diff --git a/.env.example b/.env.example
index 4bdc5535b1..1b06de63c5 100644
--- a/.env.example
+++ b/.env.example
@@ -1,10 +1,9 @@
-NEXT_PUBLIC_SENTRY_DSN=https://sentry.io
-SENTRY_CSP_REPORT_URI=https://sentry.io
+NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN=xxx
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=xxx
 NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=xxx
 NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID=UA-XXXXXX-X
 NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN=xxx
 NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY=xxx
 NEXT_PUBLIC_AUTH0_CLIENT_ID=xxx
-FAVICON_GENERATOR_API_KEY=xxx
-NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY=xxx
\ No newline at end of file
+NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY=xxx
+NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY=xxx
\ No newline at end of file
diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index 37523e907c..0000000000
--- a/.eslintignore
+++ /dev/null
@@ -1,8 +0,0 @@
-node_modules
-node_modules_linux
-
-playwright/envs.js
-deploy/tools/envs-validator/index.js
-deploy/tools/feature-reporter/build/**
-deploy/tools/feature-reporter/index.js
-public/**
\ No newline at end of file
diff --git a/.github/workflows/chakra-npm-publisher.yml b/.github/workflows/chakra-npm-publisher.yml
new file mode 100644
index 0000000000..4ab143035a
--- /dev/null
+++ b/.github/workflows/chakra-npm-publisher.yml
@@ -0,0 +1,52 @@
+name: Publish Chakra theme package to NPM
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: Package version
+        type: string
+        required: true
+  workflow_call:
+    inputs:
+      version:
+        description: Package version
+        type: string
+        required: true
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    name: Publish package to NPM registry
+    permissions:
+      id-token: write
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      # Also it will setup .npmrc file to publish to npm
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22.11.0'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Update package version
+        run: |
+          cd ./theme
+          npm version ${{ inputs.version }}
+    
+      - name: Build the package
+        run: |
+          yarn
+          cd ./theme
+          yarn
+          yarn build
+    
+      - name: Publish to NPM registry
+        run: |
+          cd ./theme
+          npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
index 028cab6e11..54aa4a141c 100644
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@@ -30,7 +30,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.11.0
+          node-version: 22.11.0
           cache: 'yarn'
 
       - name: Cache node_modules
@@ -43,7 +43,7 @@ jobs:
   
       - name: Install dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
-        run: yarn --frozen-lockfile --ignore-optional
+        run: yarn --frozen-lockfile
 
       - name: Run ESLint
         run: yarn lint:eslint
@@ -62,7 +62,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.11.0
+          node-version: 22.11.0
           cache: 'yarn'
 
       - name: Cache node_modules
@@ -75,10 +75,10 @@ jobs:
     
       - name: Install dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
-        run: yarn --frozen-lockfile --ignore-optional
+        run: yarn --frozen-lockfile
 
       - name: Install script dependencies
-        run: cd ./deploy/tools/envs-validator && yarn --frozen-lockfile --ignore-optional
+        run: cd ./deploy/tools/envs-validator && yarn --frozen-lockfile
 
       - name: Run validation tests
         run: |
@@ -95,11 +95,13 @@ jobs:
     steps:
       - name: Checkout repo
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
 
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.11.0
+          node-version: 22.11.0
           cache: 'yarn'
 
       - name: Cache node_modules
@@ -112,17 +114,64 @@ jobs:
     
       - name: Install dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
-        run: yarn --frozen-lockfile --ignore-optional
+        run: yarn --frozen-lockfile
 
       - name: Run Jest
-        run: yarn test:jest
+        run: yarn test:jest ${{ github.event_name == 'pull_request' && '--changedSince=origin/main' || '' }} --passWithNoTests
+
+  pw_affected_tests:
+    name: Resolve affected Playwright tests
+    runs-on: ubuntu-latest
+    needs: [ code_quality, envs_validation ]
+    if: github.event_name == 'pull_request'
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.11.0
+          cache: 'yarn'
+
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        id: cache-node-modules
+        with:
+          path: |
+            node_modules
+          key: node_modules-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+      
+      - name: Install dependencies
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: yarn --frozen-lockfile
+
+      - name: Install script dependencies 
+        run: cd ./deploy/tools/affected-tests && yarn --frozen-lockfile
+      
+      - name: Run script
+        run: yarn test:pw:detect-affected
+
+      - name: Upload result file
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-affected-tests
+          path: ./playwright/affected-tests.txt
+          retention-days: 3
 
   pw_tests:
     name: 'Playwright tests / Project: ${{ matrix.project }}'
-    needs: [ code_quality, envs_validation ]
+    needs: [ code_quality, envs_validation, pw_affected_tests ]
+    if: |
+      always() &&
+      needs.code_quality.result == 'success' && 
+      needs.envs_validation.result == 'success' && 
+      (needs.pw_affected_tests.result == 'success' || needs.pw_affected_tests.result == 'skipped') 
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.41.1-focal
+      image: mcr.microsoft.com/playwright:v1.49.0-noble
 
     strategy:
       fail-fast: false
@@ -141,7 +190,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.11.0
+          node-version: 22.11.0
           cache: 'yarn'
 
       - name: Cache node_modules
@@ -154,10 +203,18 @@ jobs:
     
       - name: Install dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
-        run: yarn --frozen-lockfile --ignore-optional
+        run: yarn --frozen-lockfile
+
+      - name: Download affected tests list
+        if: ${{ needs.pw_affected_tests.result == 'success' }}
+        uses: actions/download-artifact@v4
+        continue-on-error: true
+        with:
+          name: playwright-affected-tests
+          path: ./playwright
 
       - name: Run PlayWright
-        run: yarn test:pw:ci
+        run: yarn test:pw:ci --affected=${{ github.event_name == 'pull_request' }} --pass-with-no-tests
         env:
           HOME: /root
           PW_PROJECT: ${{ matrix.project }}
diff --git a/.github/workflows/copy-issues-labels.yml b/.github/workflows/copy-issues-labels.yml
new file mode 100644
index 0000000000..e05b6e88ee
--- /dev/null
+++ b/.github/workflows/copy-issues-labels.yml
@@ -0,0 +1,116 @@
+name: Copy issues labels to pull request
+
+on:
+    workflow_dispatch:
+        inputs:
+            pr_number:
+                description: Pull request number
+                required: true
+                type: string
+            issues:
+                description: JSON encoded list of issue ids
+                required: true
+                type: string
+    workflow_call:
+        inputs:
+            pr_number:
+                description: Pull request number
+                required: true
+                type: string
+            issues:
+                description: JSON encoded list of issue ids
+                required: true
+                type: string
+
+jobs:
+    run:
+        name: Run
+        runs-on: ubuntu-latest
+        steps:
+        -   name: Find unique labels
+            id: find_unique_labels
+            uses: actions/github-script@v7
+            env:
+                ISSUES: ${{ inputs.issues }}
+            with:
+                script: |
+                    const issues = JSON.parse(process.env.ISSUES);
+
+                    const WHITE_LISTED_LABELS = [
+                        'client feature',
+                        'feature',
+
+                        'bug',
+
+                        'dependencies',
+                        'performance',
+
+                        'chore',
+                        'enhancement',
+                        'refactoring',
+                        'tech',
+                        'ENVs',
+                    ]
+
+                    const labels = await Promise.all(issues.map(getIssueLabels));
+                    const uniqueLabels = uniqueStringArray(labels.flat().filter((label) => WHITE_LISTED_LABELS.includes(label)));
+
+                    if (uniqueLabels.length === 0) {
+                        core.info('No labels found.\n');
+                        return [];
+                    }
+
+                    core.info(`Found following labels: ${ uniqueLabels.join(', ') }.\n`);
+                    return uniqueLabels;
+
+                    async function getIssueLabels(issue) {
+                        core.info(`Obtaining labels list for the issue #${ issue }...`);
+                    
+                        try {
+                            const response = await github.request('GET /repos/{owner}/{repo}/issues/{issue_number}/labels', {
+                                owner: 'blockscout',
+                                repo: 'frontend',
+                                issue_number: issue,
+                            });
+                            return response.data.map(({ name }) => name);
+                        } catch (error) {
+                            core.error(`Failed to obtain labels for the issue #${ issue }: ${ error.message }`);
+                            return [];
+                        }
+                    }
+
+                    function uniqueStringArray(array) {
+                        return Array.from(new Set(array));
+                    }
+
+        -   name: Update pull request labels
+            id: update_pr_labels
+            uses: actions/github-script@v7
+            env:
+                LABELS: ${{ steps.find_unique_labels.outputs.result }}
+                PR_NUMBER: ${{ inputs.pr_number }}
+            with:
+                script: |
+                    const labels = JSON.parse(process.env.LABELS);
+                    const prNumber = Number(process.env.PR_NUMBER);
+
+                    if (labels.length === 0) {
+                        core.info('Nothing to update.\n');
+                        return;
+                    }
+
+                    for (const label of labels) {
+                        await addLabelToPr(prNumber, label);
+                    }
+                    core.info('Done.\n');
+
+                    async function addLabelToPr(prNumber, label) {
+                        console.log(`Adding label to the pull request #${ prNumber }...`);
+                    
+                        return await github.request('POST /repos/{owner}/{repo}/issues/{issue_number}/labels', {
+                            owner: 'blockscout',
+                            repo: 'frontend',
+                            issue_number: prNumber,
+                            labels: [ label ],
+                        });
+                    }
\ No newline at end of file
diff --git a/.github/workflows/deploy-main.yml b/.github/workflows/deploy-main.yml
index 087934c334..73bdd72cf7 100644
--- a/.github/workflows/deploy-main.yml
+++ b/.github/workflows/deploy-main.yml
@@ -4,6 +4,16 @@ on:
   push:
     branches:
       - main
+    paths-ignore:
+      - '.github/ISSUE_TEMPLATE/**'
+      - '.husky/**'
+      - '.vscode/**'
+      - 'docs/**'
+      - 'jest/**'
+      - 'mocks/**'
+      - 'playwright/**'
+      - 'stubs/**'
+      - 'tools/**'
   workflow_dispatch:
 
 concurrency:
@@ -15,27 +25,3 @@ jobs:
     name: Publish Docker image
     uses: './.github/workflows/publish-image.yml'
     secrets: inherit
-
-  deploy_main:
-    name: Deploy frontend
-    needs: publish_image
-    uses: blockscout/blockscout-ci-cd/.github/workflows/deploy_helmfile.yaml@master
-    with:
-      appName: front
-      globalEnv: main
-      helmfileDir: deploy
-      kubeConfigSecret: ci/data/dev/kubeconfig/k8s-dev
-      vaultRole: ci-dev
-    secrets: inherit
-
-  deploy_l2:
-    name: Deploy frontend (L2)
-    needs: publish_image
-    uses: blockscout/blockscout-ci-cd/.github/workflows/deploy_helmfile.yaml@master
-    with:
-      appName: l2-optimism-goerli
-      globalEnv: optimism-goerli
-      helmfileDir: deploy
-      kubeConfigSecret: ci/data/dev/kubeconfig/k8s-dev
-      vaultRole: ci-dev
-    secrets: inherit
diff --git a/.github/workflows/deploy-review-l2.yml b/.github/workflows/deploy-review-l2.yml
index 02feb3ce64..5df2f0d45c 100644
--- a/.github/workflows/deploy-review-l2.yml
+++ b/.github/workflows/deploy-review-l2.yml
@@ -2,6 +2,37 @@ name: Deploy review environment (L2)
 
 on:
   workflow_dispatch:
+    inputs:
+      envs_preset:
+          description: ENVs preset
+          required: false
+          default: ""
+          type: choice
+          options:
+            - none
+            - arbitrum
+            - arbitrum_nova
+            - arbitrum_sepolia
+            - base
+            - celo_alfajores
+            - garnet
+            - gnosis
+            - eth
+            - eth_sepolia
+            - eth_goerli
+            - filecoin
+            - optimism
+            - optimism_celestia
+            - optimism_sepolia
+            - polygon
+            - rootstock
+            - scroll_sepolia
+            - shibarium
+            - stability
+            - zkevm 
+            - zilliqa_prototestnet
+            - zksync
+            - zora
 
 jobs:
   make_slug:
@@ -23,6 +54,7 @@ jobs:
     uses: './.github/workflows/publish-image.yml'
     with:
         tags: ghcr.io/blockscout/frontend:review-${{ needs.make_slug.outputs.REF_SLUG }}
+        build_args: ENVS_PRESET=${{ inputs.envs_preset }}
     secrets: inherit
 
   deploy_review_l2:
diff --git a/.github/workflows/deploy-review.yml b/.github/workflows/deploy-review.yml
index c5edbc8c50..fba9827b94 100644
--- a/.github/workflows/deploy-review.yml
+++ b/.github/workflows/deploy-review.yml
@@ -2,6 +2,37 @@ name: Deploy review environment
 
 on:
   workflow_dispatch:
+    inputs:
+      envs_preset:
+          description: ENVs preset
+          required: false
+          default: ""
+          type: choice
+          options:
+            - none
+            - arbitrum
+            - arbitrum_nova
+            - arbitrum_sepolia
+            - base
+            - celo_alfajores
+            - garnet
+            - gnosis
+            - eth
+            - eth_sepolia
+            - eth_goerli
+            - filecoin
+            - optimism
+            - optimism_celestia
+            - optimism_sepolia
+            - polygon
+            - rootstock
+            - shibarium
+            - scroll_sepolia
+            - stability
+            - zkevm
+            - zilliqa_prototestnet
+            - zksync
+            - zora
 
 jobs:
   make_slug:
@@ -23,6 +54,7 @@ jobs:
     uses: './.github/workflows/publish-image.yml'
     with:
         tags: ghcr.io/blockscout/frontend:review-${{ needs.make_slug.outputs.REF_SLUG }}
+        build_args: ENVS_PRESET=${{ inputs.envs_preset }}
     secrets: inherit
 
   deploy_review:
diff --git a/.github/workflows/label-issues-in-release.yml b/.github/workflows/label-issues-in-release.yml
index 4bc9861b0d..b95fd45616 100644
--- a/.github/workflows/label-issues-in-release.yml
+++ b/.github/workflows/label-issues-in-release.yml
@@ -59,7 +59,7 @@ jobs:
         steps:
             -   name: Getting tags of the two latestest releases
                 id: tags
-                uses: actions/github-script@v6
+                uses: actions/github-script@v7
                 env:
                     TAG: ${{ inputs.tag }}
                 with:
@@ -108,7 +108,7 @@ jobs:
             
             -   name: Looking for commits between two releases
                 id: commits
-                uses: actions/github-script@v6
+                uses: actions/github-script@v7
                 env:
                     PREVIOUS_TAG: ${{ steps.tags.outputs.previous }}
                     LATEST_TAG: ${{ steps.tags.outputs.latest }}
@@ -137,7 +137,7 @@ jobs:
 
             -   name: Looking for issues linked to commits
                 id: linked_issues
-                uses: actions/github-script@v6
+                uses: actions/github-script@v7
                 env:
                     COMMITS: ${{ steps.commits.outputs.result }}
                 with:
@@ -225,7 +225,7 @@ jobs:
 
             -   name: Creating label
                 id: label_creating
-                uses: actions/github-script@v6
+                uses: actions/github-script@v7
                 env:
                     LABEL_NAME: ${{ inputs.label_name }}
                     LABEL_COLOR: ${{ inputs.label_color }}
@@ -253,7 +253,7 @@ jobs:
 
             -   name: Adding label to issues
                 id: labeling_issues
-                uses: actions/github-script@v6
+                uses: actions/github-script@v7
                 env:
                     LABEL_NAME: ${{ inputs.label_name }}
                     ISSUES: ${{ steps.linked_issues.outputs.result }}
diff --git a/.github/workflows/pre-release.yml b/.github/workflows/pre-release.yml
index e0cb8684b8..05155cbd32 100644
--- a/.github/workflows/pre-release.yml
+++ b/.github/workflows/pre-release.yml
@@ -32,7 +32,7 @@ jobs:
         steps:
             -   name: Determine if it is the initial version of the pre-release
                 id: is_initial
-                uses: actions/github-script@v6
+                uses: actions/github-script@v7
                 env:
                     TAG: ${{ github.ref_name }}
                 with:
@@ -55,7 +55,10 @@ jobs:
             label_description: Tasks in pre-release right now
         secrets: inherit
 
+    # Temporary disable this step because it is broken
+    # There is an issue with building web3modal deps
     upload_source_maps:
         name: Upload source maps to Sentry
+        if: false
         uses: './.github/workflows/upload-source-maps.yml'
         secrets: inherit
diff --git a/.github/workflows/project-management.yml b/.github/workflows/project-management.yml
index 791515b07d..1da733baeb 100644
--- a/.github/workflows/project-management.yml
+++ b/.github/workflows/project-management.yml
@@ -28,7 +28,7 @@ jobs:
             issues: "[${{ github.event.issue.number }}]"
         secrets: inherit
 
-    review_requested_issues:
+    pr_linked_issues:
         name: Get issues linked to PR
         runs-on: ubuntu-latest
         if: ${{ github.event.pull_request && github.event.action == 'review_requested' }}
@@ -37,7 +37,7 @@ jobs:
         steps:
             - name: Fetching issues linked to pull request
               id: linked_issues
-              uses: actions/github-script@v6
+              uses: actions/github-script@v7
               env:
                 PULL_REQUEST_NUMBER: ${{ github.event.pull_request.number }}
               with:
@@ -76,14 +76,24 @@ jobs:
 
                     return issues;
 
-    review_requested_tasks:
+    issues_in_review:
         name: Update status for issues in review
-        needs: [ review_requested_issues ]
-        if: ${{ needs.review_requested_issues.outputs.issues }}
+        needs: [ pr_linked_issues ]
+        if: ${{ needs.pr_linked_issues.outputs.issues }}
         uses: './.github/workflows/update-project-cards.yml'
         secrets: inherit
         with:
             project_name: ${{ vars.PROJECT_NAME }}
             field_name: Status
             field_value: Review
-            issues: ${{ needs.review_requested_issues.outputs.issues }}
+            issues: ${{ needs.pr_linked_issues.outputs.issues }}
+
+    copy_labels:
+        name: Copy issues labels to pull request
+        needs: [ pr_linked_issues ]
+        if: ${{ needs.pr_linked_issues.outputs.issues }}
+        uses: './.github/workflows/copy-issues-labels.yml'
+        secrets: inherit
+        with:
+            pr_number: ${{ github.event.pull_request.number }}
+            issues: ${{ needs.pr_linked_issues.outputs.issues }}
diff --git a/.github/workflows/publish-image.yml b/.github/workflows/publish-image.yml
index ba0382b078..97c1102e8f 100644
--- a/.github/workflows/publish-image.yml
+++ b/.github/workflows/publish-image.yml
@@ -7,6 +7,10 @@ on:
                 description: Image tags
                 required: false
                 type: string
+            build_args:
+                description: Build-time variables
+                required: false
+                type: string
             platforms:
                 description: Image platforms (you can specify multiple platforms separated by comma)
                 required: false
@@ -18,6 +22,10 @@ on:
                 description: Image tags
                 required: false
                 type: string
+            build_args:
+                description: Build-time variables
+                required: false
+                type: string
             platforms:
                 description: Image platforms (you can specify multiple platforms separated by comma)
                 required: false
@@ -72,4 +80,5 @@ jobs:
                     labels: ${{ steps.meta.outputs.labels }}
                     build-args: |
                         GIT_COMMIT_SHA=${{ env.SHORT_SHA }}
-                        GIT_TAG=${{ github.ref_type == 'tag' && github.ref_name || '' }}
\ No newline at end of file
+                        GIT_TAG=${{ github.ref_type == 'tag' && github.ref_name || '' }}
+                        ${{ inputs.build_args }}
\ No newline at end of file
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index c3ca89391e..7485ee7c82 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -12,7 +12,7 @@ jobs:
         steps:
             -   name: Remove label
                 id: tags
-                uses: actions/github-script@v6
+                uses: actions/github-script@v7
                 env:
                     LABEL_NAME: pre-release
                 with:
@@ -81,8 +81,17 @@ jobs:
         with:
             platforms: linux/amd64,linux/arm64/v8
 
+    sync_envs_docs:
+        name: Sync ENV variables docs
+        uses: './.github/workflows/sync-envs-docs.yml'
+        needs: publish_image
+        secrets: inherit
+
+    # Temporary disable this step because it is broken
+    # There is an issue with building web3modal deps
     upload_source_maps:
         name: Upload source maps to Sentry
+        if: false
         needs: publish_image
         uses: './.github/workflows/upload-source-maps.yml'
         secrets: inherit
diff --git a/.github/workflows/sync-envs-docs.yml b/.github/workflows/sync-envs-docs.yml
new file mode 100644
index 0000000000..462b22b314
--- /dev/null
+++ b/.github/workflows/sync-envs-docs.yml
@@ -0,0 +1,41 @@
+name: Sync ENV variables docs
+
+on:
+    workflow_dispatch:
+    workflow_call:
+
+jobs:
+    run:
+        name: Run
+        runs-on: ubuntu-latest
+        steps:
+            -   name: Checkout repo
+                uses: actions/checkout@v4
+
+            -   name: Copy main ENV file to Blockscout Docs repository
+                uses: dmnemec/copy_file_to_another_repo_action@main
+                env:
+                    API_TOKEN_GITHUB: ${{ secrets.GITHIB_BOT_TOKEN }}
+                with:
+                    source_file: 'docs/ENVS.md'
+                    destination_repo: 'blockscout/docs'
+                    destination_folder: 'setup/env-variables/frontend-common-envs'
+                    rename: 'envs.md'
+                    destination_branch: 'master'
+                    user_email: 'bot@blockscout.com'
+                    user_name: 'blockscout-bot'
+                    use_rsync: true
+
+            -   name: Copy deprecated ENV file to Blockscout Docs repository
+                uses: dmnemec/copy_file_to_another_repo_action@main
+                env:
+                    API_TOKEN_GITHUB: ${{ secrets.GITHIB_BOT_TOKEN }}
+                with:
+                    source_file: 'docs/DEPRECATED_ENVS.md'
+                    destination_repo: 'blockscout/docs'
+                    destination_folder: 'setup/env-variables/frontend-common-envs'
+                    rename: 'deprecated-envs.md'
+                    destination_branch: 'master'
+                    user_email: 'bot@blockscout.com'
+                    user_name: 'blockscout-bot'
+                    use_rsync: true
diff --git a/.github/workflows/update-project-cards.yml b/.github/workflows/update-project-cards.yml
index 98ffbed2bb..b071ba61da 100644
--- a/.github/workflows/update-project-cards.yml
+++ b/.github/workflows/update-project-cards.yml
@@ -48,7 +48,7 @@ jobs:
         steps:
             -   name: Getting project info
                 id: project_info
-                uses: actions/github-script@v6
+                uses: actions/github-script@v7
                 env:
                     PROJECT_NAME: ${{ inputs.project_name }}
                     FIELD_NAME: ${{ inputs.field_name }}
@@ -131,7 +131,7 @@ jobs:
 
             -   name: Getting project items that linked to the issues
                 id: items
-                uses: actions/github-script@v6
+                uses: actions/github-script@v7
                 env:
                     ISSUES: ${{ inputs.issues }}
                 with:
@@ -193,7 +193,7 @@ jobs:
 
             -   name: Updating field value of the project items
                 id: updating_items
-                uses: actions/github-script@v6
+                uses: actions/github-script@v7
                 env:
                     ITEMS: ${{ steps.items.outputs.result }}
                     PROJECT_ID: ${{ steps.project_info.outputs.id }}
diff --git a/.github/workflows/upload-source-maps.yml b/.github/workflows/upload-source-maps.yml
index 55b18067fe..6c0ec2fa04 100644
--- a/.github/workflows/upload-source-maps.yml
+++ b/.github/workflows/upload-source-maps.yml
@@ -1,3 +1,4 @@
+# TODO @tom2drum setup source maps for Rollbar
 name: Upload source maps to Sentry
 on:
   workflow_call:
@@ -21,7 +22,7 @@ jobs:
             - name: Setup node
               uses: actions/setup-node@v4
               with:
-                node-version: 20.11.0
+                node-version: 22.11.0
                 cache: 'yarn'
 
             - name: Cache node_modules
@@ -34,7 +35,7 @@ jobs:
 
             - name: Install dependencies
               if: steps.cache-node-modules.outputs.cache-hit != 'true'
-              run: yarn --frozen-lockfile --ignore-optional
+              run: yarn --frozen-lockfile
 
             - name: Make production build with source maps
               run: yarn build
diff --git a/.gitignore b/.gitignore
index 6d849c1369..74d489ae6b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,8 +12,8 @@
 # next.js
 /.next/
 /out/
-/public/assets/
-/public/envs.js
+/public/assets/envs.js
+/public/assets/configs
 /public/icons/sprite.svg
 /public/icons/README.md
 /analyze
@@ -25,6 +25,7 @@
 .DS_Store
 *.pem
 .tools
+grafana
 
 # debug
 npm-debug.log*
@@ -42,16 +43,15 @@ yarn-error.log*
 
 .eslintcache
 
-# Sentry
-.sentryclirc
-
 **.decrypted~**
 /test-results/
 /playwright-report/
 /playwright/.cache/
 /playwright/.browser/
 /playwright/envs.js
+/playwright/affected-tests.txt
 
 **.dec**
 
-.env
\ No newline at end of file
+# build outputs
+/tools/preset-sync/index.js
diff --git a/.nvmrc b/.nvmrc
index 8b0beab16a..fdb2eaaff0 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-20.11.0
+22.11.0
\ No newline at end of file
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index cd1be4e2b7..2811c40961 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -25,6 +25,27 @@
                 "instanceLimit": 1
             }
         },
+        {
+            "type": "shell",
+            "command": "yarn dev:preset:sync --name=${input:dev_config_preset}",
+            "problemMatcher": [],
+            "label": "dev preset sync",
+            "detail": "syncronize dev preset",
+            "presentation": {
+                "reveal": "always",
+                "panel": "shared",
+                "focus": true,
+                "close": false,
+                "revealProblems": "onProblem",
+            },
+            "icon": {
+                "color": "terminal.ansiMagenta",
+                "id": "repo-sync"
+            },
+            "runOptions": {
+                "instanceLimit": 1
+            }
+        },
 
         // CODE CHECKS
         {
@@ -155,6 +176,27 @@
                 "instanceLimit": 1
             }
         },
+        {
+            "type": "shell",
+            "command": "yarn test:pw:detect-affected",
+            "problemMatcher": [],
+            "label": "pw: detect affected",
+            "detail": "detect PW tests affected by changes in current branch",
+            "presentation": {
+                "reveal": "always",
+                "panel": "shared",
+                "focus": true,
+                "close": false,
+                "revealProblems": "onProblem",
+            },
+            "icon": {
+                "color": "terminal.ansiBlue",
+                "id": "diff"
+            },
+            "runOptions": {
+                "instanceLimit": 1
+            },
+        },
 
         // JEST TESTS
         {
@@ -305,6 +347,7 @@
             "options": [
               "",
               "--update-snapshots",
+              "--update-snapshots --affected",
               "--ui",
             ],
             "default": ""
@@ -315,15 +358,28 @@
             "description": "Choose dev server config preset:",
             "options": [
               "main",
-              "main.L2",
-              "poa_core",
-              "eth_goerli",
-              "sepolia",
+              "localhost",
+              "arbitrum",
+              "arbitrum_sepolia",
+              "base",
+              "celo_alfajores",
+              "garnet",
+              "gnosis",
               "eth",
-              "rootstock",
+              "eth_goerli",
+              "eth_sepolia",
+              "filecoin",
+              "optimism",
+              "optimism_celestia",
+              "optimism_sepolia",
               "polygon",
-              "gnosis",
-              "localhost",
+              "rootstock_testnet",
+              "shibarium",
+              "stability_testnet",
+              "zkevm",
+              "zilliqa_prototestnet",
+              "zksync",
+              "zora",
             ],
             "default": "main"
         },
diff --git a/Dockerfile b/Dockerfile
index f38d68ebaa..0141bee554 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,9 +1,10 @@
 # *****************************
 # *** STAGE 1: Dependencies ***
 # *****************************
-FROM node:20.11.0-alpine AS deps
+FROM node:22.11.0-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
-RUN apk add --no-cache libc6-compat
+RUN apk add --no-cache libc6-compat python3 make g++
+RUN ln -sf /usr/bin/python3 /usr/bin/python
 
 ### APP
 # Install dependencies
@@ -26,18 +27,26 @@ WORKDIR /envs-validator
 COPY ./deploy/tools/envs-validator/package.json ./deploy/tools/envs-validator/yarn.lock ./
 RUN yarn --frozen-lockfile
 
+### FAVICON GENERATOR
+# Install dependencies
+WORKDIR /favicon-generator
+COPY ./deploy/tools/favicon-generator/package.json ./deploy/tools/favicon-generator/yarn.lock ./
+RUN yarn --frozen-lockfile
+
 
 # *****************************
 # ****** STAGE 2: Build *******
 # *****************************
-FROM node:20.11.0-alpine AS builder
+FROM node:22.11.0-alpine AS builder
 RUN apk add --no-cache --upgrade libc6-compat bash
 
-# pass commit sha and git tag to the app image
+# pass build args to env variables
 ARG GIT_COMMIT_SHA
 ENV NEXT_PUBLIC_GIT_COMMIT_SHA=$GIT_COMMIT_SHA
 ARG GIT_TAG
 ENV NEXT_PUBLIC_GIT_TAG=$GIT_TAG
+ARG NEXT_OPEN_TELEMETRY_ENABLED
+ENV NEXT_OPEN_TELEMETRY_ENABLED=$NEXT_OPEN_TELEMETRY_ENABLED
 
 ENV NODE_ENV production
 
@@ -48,7 +57,7 @@ COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
 # Generate .env.registry with ENVs list and save build args into .env file
-COPY --chmod=+x ./deploy/scripts/collect_envs.sh ./
+COPY --chmod=755 ./deploy/scripts/collect_envs.sh ./
 RUN ./collect_envs.sh ./docs/ENVS.md
 
 # Next.js collects completely anonymous telemetry data about general usage.
@@ -57,8 +66,8 @@ RUN ./collect_envs.sh ./docs/ENVS.md
 # ENV NEXT_TELEMETRY_DISABLED 1
 
 # Build app for production
-RUN yarn build
 RUN yarn svg:build-sprite
+RUN yarn build
 
 
 ### FEATURE REPORTER
@@ -74,11 +83,15 @@ COPY --from=deps /envs-validator/node_modules ./deploy/tools/envs-validator/node
 RUN cd ./deploy/tools/envs-validator && yarn build
 
 
+### FAVICON GENERATOR
+# Copy dependencies and source code
+COPY --from=deps /favicon-generator/node_modules ./deploy/tools/favicon-generator/node_modules
+
 # *****************************
 # ******* STAGE 3: Run ********
 # *****************************
 # Production image, copy all the files and run next
-FROM node:20.11.0-alpine AS runner
+FROM node:22.11.0-alpine AS runner
 RUN apk add --no-cache --upgrade bash curl jq unzip
 
 ### APP
@@ -102,15 +115,15 @@ COPY --from=builder /app/deploy/tools/feature-reporter/index.js ./feature-report
 
 # Copy scripts
 ## Entripoint
-COPY --chmod=+x ./deploy/scripts/entrypoint.sh .
+COPY --chmod=755 ./deploy/scripts/entrypoint.sh .
 ## ENV validator and client script maker
-COPY --chmod=+x ./deploy/scripts/validate_envs.sh .
-COPY --chmod=+x ./deploy/scripts/make_envs_script.sh .
+COPY --chmod=755 ./deploy/scripts/validate_envs.sh .
+COPY --chmod=755 ./deploy/scripts/make_envs_script.sh .
 ## Assets downloader
-COPY --chmod=+x ./deploy/scripts/download_assets.sh .
+COPY --chmod=755 ./deploy/scripts/download_assets.sh .
 ## Favicon generator
-COPY --chmod=+x ./deploy/scripts/favicon_generator.sh .
-COPY ./deploy/tools/favicon-generator ./deploy/tools/favicon-generator
+COPY --chmod=755 ./deploy/scripts/favicon_generator.sh .
+COPY --from=builder /app/deploy/tools/favicon-generator ./deploy/tools/favicon-generator
 RUN ["chmod", "-R", "777", "./deploy/tools/favicon-generator"]
 RUN ["chmod", "-R", "777", "./public"]
 
@@ -118,6 +131,11 @@ RUN ["chmod", "-R", "777", "./public"]
 COPY --from=builder /app/.env.registry .
 COPY --from=builder /app/.env .
 
+# Copy ENVs presets
+ARG ENVS_PRESET
+ENV ENVS_PRESET=$ENVS_PRESET
+COPY ./configs/envs ./configs/envs
+
 # Automatically leverage output traces to reduce image size
 # https://nextjs.org/docs/advanced-features/output-file-tracing
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
new file mode 100644
index 0000000000..2dc937a6eb
--- /dev/null
+++ b/RELEASE_NOTES.md
@@ -0,0 +1,37 @@
+## 🚀 New Features
+-  Description of the new feature 1.
+-  Description of the new feature 2.
+
+## 🐛 Bug Fixes
+-  Description of the bug fix 1.
+-  Description of the bug fix 2.
+
+## ⚡ Performance Improvements
+-  Description of the performance improvement 1.
+-  Description of the performance improvement 2.
+
+## 📦 Dependencies updates
+-  Updated dependency: PackageName 1 to version x.x.x.
+-  Updated dependency: PackageName 2 to version x.x.x.
+
+## 🎨 Design updates
+-  New style 1.
+-  New style 2.
+
+## ✨ Other Changes
+- Another minor change 1.
+- Another minor change 2.
+
+## 🚨 Changes in ENV variables
+-  Added new environment variable: ENV_VARIABLE_NAME with value.
+-  Updated existing environment variable: ENV_VARIABLE_NAME to new value.
+
+**Full list of the ENV variables**: [v1.2.3](https://github.com/blockscout/frontend/blob/v1.2.3/docs/ENVS.md)
+
+## 🦄 New Contributors
+- @contributor1 made their first contribution in https://github.com/blockscout/frontend/pull/1
+- @contributor2 made their first contribution in https://github.com/blockscout/frontend/pull/2
+
+---
+
+**Full Changelog**: https://github.com/blockscout/frontend/compare/v1.2.2...v1.2.3
diff --git a/configs/app/chain.ts b/configs/app/chain.ts
index 3f90e329bd..a6fef46488 100644
--- a/configs/app/chain.ts
+++ b/configs/app/chain.ts
@@ -1,7 +1,22 @@
+import type { RollupType } from 'types/client/rollup';
+import type { NetworkVerificationType, NetworkVerificationTypeEnvs } from 'types/networks';
+
 import { getEnvValue } from './utils';
 
 const DEFAULT_CURRENCY_DECIMALS = 18;
 
+const rollupType = getEnvValue('NEXT_PUBLIC_ROLLUP_TYPE') as RollupType;
+
+const verificationType: NetworkVerificationType = (() => {
+  if (rollupType === 'arbitrum') {
+    return 'posting';
+  }
+  if (rollupType === 'zkEvm') {
+    return 'sequencing';
+  }
+  return getEnvValue('NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE') as NetworkVerificationTypeEnvs || 'mining';
+})();
+
 const chain = Object.freeze({
   id: getEnvValue('NEXT_PUBLIC_NETWORK_ID'),
   name: getEnvValue('NEXT_PUBLIC_NETWORK_NAME'),
@@ -13,9 +28,11 @@ const chain = Object.freeze({
     decimals: Number(getEnvValue('NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS')) || DEFAULT_CURRENCY_DECIMALS,
     image: getEnvValue('NEXT_PUBLIC_NETWORK_CURRENCY_IMAGE_URL'),
   },
-  governanceToken: {
-    symbol: getEnvValue('NEXT_PUBLIC_NETWORK_GOVERNANCE_TOKEN_SYMBOL'),
+  secondaryCoin: {
+    symbol: getEnvValue('NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL'),
   },
+  hasMultipleGasCurrencies: getEnvValue('NEXT_PUBLIC_NETWORK_MULTIPLE_GAS_CURRENCIES') === 'true',
+  tokenStandard: getEnvValue('NEXT_PUBLIC_NETWORK_TOKEN_STANDARD_NAME') || 'ERC',
   rpcUrl: getEnvValue('NEXT_PUBLIC_NETWORK_RPC_URL'),
   isTestnet: getEnvValue('NEXT_PUBLIC_IS_TESTNET') === 'true',
   isDevNet: getEnvValue('NEXT_PUBLIC_IS_DEVNET') === 'true',
diff --git a/configs/app/features/account.ts b/configs/app/features/account.ts
index 120a94b7e9..82ae3b458b 100644
--- a/configs/app/features/account.ts
+++ b/configs/app/features/account.ts
@@ -1,45 +1,16 @@
 import type { Feature } from './types';
 
-import stripTrailingSlash from 'lib/stripTrailingSlash';
-
-import app from '../app';
+import services from '../services';
 import { getEnvValue } from '../utils';
 
-const authUrl = stripTrailingSlash(getEnvValue('NEXT_PUBLIC_AUTH_URL') || app.baseUrl);
-
-const logoutUrl = (() => {
-  try {
-    const envUrl = getEnvValue('NEXT_PUBLIC_LOGOUT_URL');
-    const auth0ClientId = getEnvValue('NEXT_PUBLIC_AUTH0_CLIENT_ID');
-    const returnUrl = authUrl + '/auth/logout';
-
-    if (!envUrl || !auth0ClientId) {
-      throw Error();
-    }
-
-    const url = new URL(envUrl);
-    url.searchParams.set('client_id', auth0ClientId);
-    url.searchParams.set('returnTo', returnUrl);
-
-    return url.toString();
-  } catch (error) {
-    return;
-  }
-})();
-
 const title = 'My account';
 
-const config: Feature<{ authUrl: string; logoutUrl: string }> = (() => {
-  if (
-    getEnvValue('NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED') === 'true' &&
-    authUrl &&
-    logoutUrl
-  ) {
+const config: Feature<{ isEnabled: true; recaptchaSiteKey: string }> = (() => {
+  if (getEnvValue('NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED') === 'true' && services.reCaptchaV2.siteKey) {
     return Object.freeze({
       title,
       isEnabled: true,
-      authUrl,
-      logoutUrl,
+      recaptchaSiteKey: services.reCaptchaV2.siteKey,
     });
   }
 
diff --git a/configs/app/features/addressMetadata.ts b/configs/app/features/addressMetadata.ts
new file mode 100644
index 0000000000..5ca5b78ada
--- /dev/null
+++ b/configs/app/features/addressMetadata.ts
@@ -0,0 +1,27 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+
+const apiHost = getEnvValue('NEXT_PUBLIC_METADATA_SERVICE_API_HOST');
+
+const title = 'Address metadata';
+
+const config: Feature<{ api: { endpoint: string; basePath: string } }> = (() => {
+  if (apiHost) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      api: {
+        endpoint: apiHost,
+        basePath: '',
+      },
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/addressProfileAPI.ts b/configs/app/features/addressProfileAPI.ts
new file mode 100644
index 0000000000..e46301ee6f
--- /dev/null
+++ b/configs/app/features/addressProfileAPI.ts
@@ -0,0 +1,45 @@
+import type { Feature } from './types';
+import type { AddressProfileAPIConfig } from 'types/client/addressProfileAPIConfig';
+
+import { getEnvValue, parseEnvJson } from '../utils';
+
+const value = parseEnvJson<AddressProfileAPIConfig>(getEnvValue('NEXT_PUBLIC_ADDRESS_USERNAME_TAG'));
+
+function checkApiUrlTemplate(apiUrlTemplate: string): boolean {
+  try {
+    const testUrl = apiUrlTemplate.replace('{address}', '0x0000000000000000000000000000000000000000');
+    new URL(testUrl).toString();
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+const title = 'User profile API';
+
+const config: Feature<{
+  apiUrlTemplate: string;
+  tagLinkTemplate?: string;
+  tagIcon?: string;
+  tagBgColor?: string;
+  tagTextColor?: string;
+}> = (() => {
+  if (value && checkApiUrlTemplate(value.api_url_template)) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      apiUrlTemplate: value.api_url_template,
+      tagLinkTemplate: value.tag_link_template,
+      tagIcon: value.tag_icon,
+      tagBgColor: value.tag_bg_color,
+      tagTextColor: value.tag_text_color,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/adsBanner.ts b/configs/app/features/adsBanner.ts
index 0785ab160f..c455ed4546 100644
--- a/configs/app/features/adsBanner.ts
+++ b/configs/app/features/adsBanner.ts
@@ -1,7 +1,7 @@
 import type { Feature } from './types';
 import type { AdButlerConfig } from 'types/client/adButlerConfig';
 import { SUPPORTED_AD_BANNER_PROVIDERS } from 'types/client/adProviders';
-import type { AdBannerProviders } from 'types/client/adProviders';
+import type { AdBannerProviders, AdBannerAdditionalProviders } from 'types/client/adProviders';
 
 import { getEnvValue, parseEnvJson } from '../utils';
 
@@ -11,6 +11,8 @@ const provider: AdBannerProviders = (() => {
   return envValue && SUPPORTED_AD_BANNER_PROVIDERS.includes(envValue) ? envValue : 'slise';
 })();
 
+const additionalProvider = getEnvValue('NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER') as AdBannerAdditionalProviders;
+
 const title = 'Banner ads';
 
 type AdsBannerFeaturePayload = {
@@ -23,7 +25,16 @@ type AdsBannerFeaturePayload = {
       mobile: AdButlerConfig;
     };
   };
-}
+} | {
+  provider: Exclude<AdBannerProviders, 'adbutler' | 'none'>;
+  additionalProvider: 'adbutler';
+  adButler: {
+    config: {
+      desktop: AdButlerConfig;
+      mobile: AdButlerConfig;
+    };
+  };
+};
 
 const config: Feature<AdsBannerFeaturePayload> = (() => {
   if (provider === 'adbutler') {
@@ -44,6 +55,24 @@ const config: Feature<AdsBannerFeaturePayload> = (() => {
       });
     }
   } else if (provider !== 'none') {
+
+    if (additionalProvider === 'adbutler') {
+      const desktopConfig = parseEnvJson<AdButlerConfig>(getEnvValue('NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP'));
+      const mobileConfig = parseEnvJson<AdButlerConfig>(getEnvValue('NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE'));
+
+      return Object.freeze({
+        title,
+        isEnabled: true,
+        provider,
+        additionalProvider,
+        adButler: {
+          config: {
+            desktop: desktopConfig,
+            mobile: mobileConfig,
+          },
+        },
+      });
+    }
     return Object.freeze({
       title,
       isEnabled: true,
diff --git a/configs/app/features/adsText.ts b/configs/app/features/adsText.ts
index b44fa59e85..82946f984f 100644
--- a/configs/app/features/adsText.ts
+++ b/configs/app/features/adsText.ts
@@ -1,12 +1,12 @@
 import type { Feature } from './types';
-import { SUPPORTED_AD_BANNER_PROVIDERS } from 'types/client/adProviders';
+import { SUPPORTED_AD_TEXT_PROVIDERS } from 'types/client/adProviders';
 import type { AdTextProviders } from 'types/client/adProviders';
 
 import { getEnvValue } from '../utils';
 
 const provider: AdTextProviders = (() => {
   const envValue = getEnvValue('NEXT_PUBLIC_AD_TEXT_PROVIDER') as AdTextProviders;
-  return envValue && SUPPORTED_AD_BANNER_PROVIDERS.includes(envValue) ? envValue : 'coinzilla';
+  return envValue && SUPPORTED_AD_TEXT_PROVIDERS.includes(envValue) ? envValue : 'coinzilla';
 })();
 
 const title = 'Text ads';
diff --git a/configs/app/features/advancedFilter.ts b/configs/app/features/advancedFilter.ts
new file mode 100644
index 0000000000..7495d369f9
--- /dev/null
+++ b/configs/app/features/advancedFilter.ts
@@ -0,0 +1,23 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+
+const isDisabled = getEnvValue('NEXT_PUBLIC_ADVANCED_FILTER_ENABLED') === 'false';
+
+const title = 'Advanced filter';
+
+const config: Feature<{}> = (() => {
+  if (!isDisabled) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/celo.ts b/configs/app/features/celo.ts
new file mode 100644
index 0000000000..9d169e4220
--- /dev/null
+++ b/configs/app/features/celo.ts
@@ -0,0 +1,24 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+
+const title = 'Celo chain';
+
+const config: Feature<{ L2UpgradeBlock: number | undefined; BLOCKS_PER_EPOCH: number }> = (() => {
+
+  if (getEnvValue('NEXT_PUBLIC_CELO_ENABLED') === 'true') {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      L2UpgradeBlock: getEnvValue('NEXT_PUBLIC_CELO_L2_UPGRADE_BLOCK') ? Number(getEnvValue('NEXT_PUBLIC_CELO_L2_UPGRADE_BLOCK')) : undefined,
+      BLOCKS_PER_EPOCH: 17_280,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/csvExport.ts b/configs/app/features/csvExport.ts
index 442b4bedc7..fe1e24ec34 100644
--- a/configs/app/features/csvExport.ts
+++ b/configs/app/features/csvExport.ts
@@ -4,13 +4,13 @@ import services from '../services';
 
 const title = 'Export data to CSV file';
 
-const config: Feature<{ reCaptcha: { siteKey: string }}> = (() => {
-  if (services.reCaptcha.siteKey) {
+const config: Feature<{ reCaptcha: { siteKey: string } }> = (() => {
+  if (services.reCaptchaV2.siteKey) {
     return Object.freeze({
       title,
       isEnabled: true,
       reCaptcha: {
-        siteKey: services.reCaptcha.siteKey,
+        siteKey: services.reCaptchaV2.siteKey,
       },
     });
   }
diff --git a/configs/app/features/dataAvailability.ts b/configs/app/features/dataAvailability.ts
new file mode 100644
index 0000000000..add9e5fec5
--- /dev/null
+++ b/configs/app/features/dataAvailability.ts
@@ -0,0 +1,21 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+
+const title = 'Data availability';
+
+const config: Feature<{ isEnabled: true }> = (() => {
+  if (getEnvValue('NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED') === 'true') {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/deFiDropdown.ts b/configs/app/features/deFiDropdown.ts
new file mode 100644
index 0000000000..62b8fdcd14
--- /dev/null
+++ b/configs/app/features/deFiDropdown.ts
@@ -0,0 +1,21 @@
+import type { Feature } from './types';
+import type { DeFiDropdownItem } from 'types/client/deFiDropdown';
+
+import { getEnvValue, parseEnvJson } from '../utils';
+
+const items = parseEnvJson<Array<DeFiDropdownItem>>(getEnvValue('NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS')) || [];
+
+const title = 'DeFi dropdown';
+
+const config: Feature<{ items: Array<DeFiDropdownItem> }> = items.length > 0 ?
+  Object.freeze({
+    title,
+    isEnabled: true,
+    items,
+  }) :
+  Object.freeze({
+    title,
+    isEnabled: false,
+  });
+
+export default config;
diff --git a/configs/app/features/easterEggBadge.ts b/configs/app/features/easterEggBadge.ts
new file mode 100644
index 0000000000..d8ce02926b
--- /dev/null
+++ b/configs/app/features/easterEggBadge.ts
@@ -0,0 +1,24 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+
+const badgeClaimLink = getEnvValue('NEXT_PUBLIC_GAME_BADGE_CLAIM_LINK');
+
+const title = 'Easter egg badge';
+
+const config: Feature<{ badgeClaimLink: string }> = (() => {
+  if (badgeClaimLink) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      badgeClaimLink,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/faultProofSystem.ts b/configs/app/features/faultProofSystem.ts
new file mode 100644
index 0000000000..38a8f021db
--- /dev/null
+++ b/configs/app/features/faultProofSystem.ts
@@ -0,0 +1,22 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+import rollup from './rollup';
+
+const title = 'Fault proof system';
+
+const config: Feature<{ isEnabled: true }> = (() => {
+  if (rollup.isEnabled && rollup.type === 'optimistic' && getEnvValue('NEXT_PUBLIC_FAULT_PROOF_ENABLED') === 'true') {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/gasTracker.ts b/configs/app/features/gasTracker.ts
new file mode 100644
index 0000000000..c20242e602
--- /dev/null
+++ b/configs/app/features/gasTracker.ts
@@ -0,0 +1,37 @@
+import type { Feature } from './types';
+import { GAS_UNITS } from 'types/client/gasTracker';
+import type { GasUnit } from 'types/client/gasTracker';
+
+import { getEnvValue, parseEnvJson } from '../utils';
+
+const isDisabled = getEnvValue('NEXT_PUBLIC_GAS_TRACKER_ENABLED') === 'false';
+
+const units = ((): Array<GasUnit> => {
+  const envValue = getEnvValue('NEXT_PUBLIC_GAS_TRACKER_UNITS');
+  if (!envValue) {
+    return [ 'usd', 'gwei' ];
+  }
+
+  const units = parseEnvJson<Array<GasUnit>>(envValue)?.filter((type) => GAS_UNITS.includes(type)) || [];
+
+  return units;
+})();
+
+const title = 'Gas tracker';
+
+const config: Feature<{ units: Array<GasUnit> }> = (() => {
+  if (!isDisabled && units.length > 0) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      units,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/getGasButton.ts b/configs/app/features/getGasButton.ts
new file mode 100644
index 0000000000..db392f3c9a
--- /dev/null
+++ b/configs/app/features/getGasButton.ts
@@ -0,0 +1,35 @@
+import type { Feature } from './types';
+import type { GasRefuelProviderConfig } from 'types/client/gasRefuelProviderConfig';
+
+import chain from '../chain';
+import { getEnvValue, parseEnvJson } from '../utils';
+import marketplace from './marketplace';
+
+const value = parseEnvJson<GasRefuelProviderConfig>(getEnvValue('NEXT_PUBLIC_GAS_REFUEL_PROVIDER_CONFIG'));
+
+const title = 'Get gas button';
+
+const config: Feature<{
+  name: string;
+  logoUrl?: string;
+  url: string;
+  dappId?: string;
+}> = (() => {
+  if (value) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      name: value.name,
+      logoUrl: value.logo,
+      url: value.url_template.replace('{chainId}', chain.id || ''),
+      dappId: marketplace.isEnabled ? value.dapp_id : undefined,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/graphqlApiDocs.ts b/configs/app/features/graphqlApiDocs.ts
index 09285ac898..d26c3bfde3 100644
--- a/configs/app/features/graphqlApiDocs.ts
+++ b/configs/app/features/graphqlApiDocs.ts
@@ -7,6 +7,14 @@ const defaultTxHash = getEnvValue('NEXT_PUBLIC_GRAPHIQL_TRANSACTION');
 const title = 'GraphQL API documentation';
 
 const config: Feature<{ defaultTxHash: string | undefined }> = (() => {
+
+  if (defaultTxHash === 'none') {
+    return Object.freeze({
+      title,
+      isEnabled: false,
+    });
+  }
+
   return Object.freeze({
     title,
     isEnabled: true,
diff --git a/configs/app/features/index.ts b/configs/app/features/index.ts
index 9bd4c2253c..2652c0b480 100644
--- a/configs/app/features/index.ts
+++ b/configs/app/features/index.ts
@@ -1,26 +1,44 @@
+export { default as advancedFilter } from './advancedFilter';
 export { default as account } from './account';
 export { default as addressVerification } from './addressVerification';
+export { default as addressMetadata } from './addressMetadata';
 export { default as adsBanner } from './adsBanner';
 export { default as adsText } from './adsText';
 export { default as beaconChain } from './beaconChain';
 export { default as bridgedTokens } from './bridgedTokens';
 export { default as blockchainInteraction } from './blockchainInteraction';
+export { default as celo } from './celo';
 export { default as csvExport } from './csvExport';
+export { default as dataAvailability } from './dataAvailability';
+export { default as deFiDropdown } from './deFiDropdown';
+export { default as easterEggBadge } from './easterEggBadge';
+export { default as faultProofSystem } from './faultProofSystem';
+export { default as gasTracker } from './gasTracker';
+export { default as getGasButton } from './getGasButton';
 export { default as googleAnalytics } from './googleAnalytics';
 export { default as graphqlApiDocs } from './graphqlApiDocs';
 export { default as growthBook } from './growthBook';
 export { default as marketplace } from './marketplace';
+export { default as metasuites } from './metasuites';
 export { default as mixpanel } from './mixpanel';
+export { default as mudFramework } from './mudFramework';
+export { default as multichainButton } from './multichainButton';
 export { default as nameService } from './nameService';
+export { default as pools } from './pools';
+export { default as publicTagsSubmission } from './publicTagsSubmission';
 export { default as restApiDocs } from './restApiDocs';
-export { default as optimisticRollup } from './optimisticRollup';
+export { default as rewards } from './rewards';
+export { default as rollbar } from './rollbar';
+export { default as rollup } from './rollup';
 export { default as safe } from './safe';
-export { default as sentry } from './sentry';
+export { default as saveOnGas } from './saveOnGas';
 export { default as sol2uml } from './sol2uml';
 export { default as stats } from './stats';
 export { default as suave } from './suave';
 export { default as txInterpretation } from './txInterpretation';
 export { default as userOps } from './userOps';
+export { default as addressProfileAPI } from './addressProfileAPI';
+export { default as validators } from './validators';
 export { default as verifiedTokens } from './verifiedTokens';
 export { default as web3Wallet } from './web3Wallet';
-export { default as zkEvmRollup } from './zkEvmRollup';
+export { default as xStarScore } from './xStarScore';
diff --git a/configs/app/features/marketplace.ts b/configs/app/features/marketplace.ts
index a20d10e48a..ab5ab4a965 100644
--- a/configs/app/features/marketplace.ts
+++ b/configs/app/features/marketplace.ts
@@ -4,25 +4,71 @@ import chain from '../chain';
 import { getEnvValue, getExternalAssetFilePath } from '../utils';
 
 // config file will be downloaded at run-time and saved in the public folder
+const enabled = getEnvValue('NEXT_PUBLIC_MARKETPLACE_ENABLED');
 const configUrl = getExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL');
 const submitFormUrl = getEnvValue('NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM');
+const suggestIdeasFormUrl = getEnvValue('NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM');
 const categoriesUrl = getExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL');
+const adminServiceApiHost = getEnvValue('NEXT_PUBLIC_ADMIN_SERVICE_API_HOST');
+const securityReportsUrl = getExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL');
+const featuredApp = getEnvValue('NEXT_PUBLIC_MARKETPLACE_FEATURED_APP');
+const bannerContentUrl = getExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL');
+const bannerLinkUrl = getEnvValue('NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL');
+const ratingAirtableApiKey = getEnvValue('NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY');
+const ratingAirtableBaseId = getEnvValue('NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID');
+const graphLinksUrl = getExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_GRAPH_LINKS_URL');
 
 const title = 'Marketplace';
 
-const config: Feature<{ configUrl: string; submitFormUrl: string; categoriesUrl: string | undefined }> = (() => {
-  if (
-    chain.rpcUrl &&
-    configUrl &&
-    submitFormUrl
-  ) {
-    return Object.freeze({
-      title,
-      isEnabled: true,
-      configUrl,
+const config: Feature<(
+  { configUrl: string } |
+  { api: { endpoint: string; basePath: string } }
+) & {
+  submitFormUrl: string;
+  categoriesUrl: string | undefined;
+  suggestIdeasFormUrl: string | undefined;
+  securityReportsUrl: string | undefined;
+  featuredApp: string | undefined;
+  banner: { contentUrl: string; linkUrl: string } | undefined;
+  rating: { airtableApiKey: string; airtableBaseId: string } | undefined;
+  graphLinksUrl: string | undefined;
+}> = (() => {
+  if (enabled === 'true' && chain.rpcUrl && submitFormUrl) {
+    const props = {
       submitFormUrl,
       categoriesUrl,
-    });
+      suggestIdeasFormUrl,
+      securityReportsUrl,
+      featuredApp,
+      banner: bannerContentUrl && bannerLinkUrl ? {
+        contentUrl: bannerContentUrl,
+        linkUrl: bannerLinkUrl,
+      } : undefined,
+      rating: ratingAirtableApiKey && ratingAirtableBaseId ? {
+        airtableApiKey: ratingAirtableApiKey,
+        airtableBaseId: ratingAirtableBaseId,
+      } : undefined,
+      graphLinksUrl,
+    };
+
+    if (configUrl) {
+      return Object.freeze({
+        title,
+        isEnabled: true,
+        configUrl,
+        ...props,
+      });
+    } else if (adminServiceApiHost) {
+      return Object.freeze({
+        title,
+        isEnabled: true,
+        api: {
+          endpoint: adminServiceApiHost,
+          basePath: '',
+        },
+        ...props,
+      });
+    }
   }
 
   return Object.freeze({
diff --git a/configs/app/features/metasuites.ts b/configs/app/features/metasuites.ts
new file mode 100644
index 0000000000..333e7d5a8a
--- /dev/null
+++ b/configs/app/features/metasuites.ts
@@ -0,0 +1,21 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+
+const title = 'MetaSuites extension';
+
+const config: Feature<{ isEnabled: true }> = (() => {
+  if (getEnvValue('NEXT_PUBLIC_METASUITES_ENABLED') === 'true') {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/mudFramework.ts b/configs/app/features/mudFramework.ts
new file mode 100644
index 0000000000..86df2af34a
--- /dev/null
+++ b/configs/app/features/mudFramework.ts
@@ -0,0 +1,22 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+import rollup from './rollup';
+
+const title = 'MUD framework';
+
+const config: Feature<{ isEnabled: true }> = (() => {
+  if (rollup.isEnabled && rollup.type === 'optimistic' && getEnvValue('NEXT_PUBLIC_HAS_MUD_FRAMEWORK') === 'true') {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/multichainButton.ts b/configs/app/features/multichainButton.ts
new file mode 100644
index 0000000000..923a16bd27
--- /dev/null
+++ b/configs/app/features/multichainButton.ts
@@ -0,0 +1,31 @@
+import type { Feature } from './types';
+import type { MultichainProviderConfig, MultichainProviderConfigParsed } from 'types/client/multichainProviderConfig';
+
+import { getEnvValue, parseEnvJson } from '../utils';
+import marketplace from './marketplace';
+
+const value = parseEnvJson<Array<MultichainProviderConfig>>(getEnvValue('NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG'));
+
+const title = 'Multichain balance';
+
+const config: Feature<{ providers: Array<MultichainProviderConfigParsed> }> = (() => {
+  if (value) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      providers: value.map((provider) => ({
+        name: provider.name,
+        logoUrl: provider.logo,
+        urlTemplate: provider.url_template,
+        dappId: marketplace.isEnabled ? provider.dapp_id : undefined,
+      })),
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/optimisticRollup.ts b/configs/app/features/optimisticRollup.ts
deleted file mode 100644
index 6b4f646d59..0000000000
--- a/configs/app/features/optimisticRollup.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { Feature } from './types';
-
-import { getEnvValue } from '../utils';
-
-const title = 'Rollup (L2) chain';
-
-const config: Feature<{ L1BaseUrl: string; withdrawalUrl: string }> = (() => {
-  const L1BaseUrl = getEnvValue('NEXT_PUBLIC_L1_BASE_URL');
-  const withdrawalUrl = getEnvValue('NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL');
-
-  if (
-    getEnvValue('NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK') === 'true' &&
-    L1BaseUrl &&
-    withdrawalUrl
-  ) {
-    return Object.freeze({
-      title,
-      isEnabled: true,
-      L1BaseUrl,
-      withdrawalUrl,
-    });
-  }
-
-  return Object.freeze({
-    title,
-    isEnabled: false,
-  });
-})();
-
-export default config;
diff --git a/configs/app/features/pools.ts b/configs/app/features/pools.ts
new file mode 100644
index 0000000000..310100da4f
--- /dev/null
+++ b/configs/app/features/pools.ts
@@ -0,0 +1,28 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+
+const contractInfoApiHost = getEnvValue('NEXT_PUBLIC_CONTRACT_INFO_API_HOST');
+const dexPoolsEnabled = getEnvValue('NEXT_PUBLIC_DEX_POOLS_ENABLED') === 'true';
+
+const title = 'DEX Pools';
+
+const config: Feature<{ api: { endpoint: string; basePath: string } }> = (() => {
+  if (contractInfoApiHost && dexPoolsEnabled) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      api: {
+        endpoint: contractInfoApiHost,
+        basePath: '',
+      },
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/publicTagsSubmission.ts b/configs/app/features/publicTagsSubmission.ts
new file mode 100644
index 0000000000..6ba9ade0f0
--- /dev/null
+++ b/configs/app/features/publicTagsSubmission.ts
@@ -0,0 +1,29 @@
+import type { Feature } from './types';
+
+import services from '../services';
+import { getEnvValue } from '../utils';
+import addressMetadata from './addressMetadata';
+
+const apiHost = getEnvValue('NEXT_PUBLIC_ADMIN_SERVICE_API_HOST');
+
+const title = 'Public tag submission';
+
+const config: Feature<{ api: { endpoint: string; basePath: string } }> = (() => {
+  if (services.reCaptchaV2.siteKey && addressMetadata.isEnabled && apiHost) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      api: {
+        endpoint: apiHost,
+        basePath: '',
+      },
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/restApiDocs.ts b/configs/app/features/restApiDocs.ts
index 281282ab05..ae25f05c0a 100644
--- a/configs/app/features/restApiDocs.ts
+++ b/configs/app/features/restApiDocs.ts
@@ -2,15 +2,23 @@ import type { Feature } from './types';
 
 import { getEnvValue } from '../utils';
 
-const specUrl = getEnvValue('NEXT_PUBLIC_API_SPEC_URL') || `https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml`;
+const DEFAULT_URL = `https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml`;
+const envValue = getEnvValue('NEXT_PUBLIC_API_SPEC_URL');
 
 const title = 'REST API documentation';
 
 const config: Feature<{ specUrl: string }> = (() => {
+  if (envValue === 'none') {
+    return Object.freeze({
+      title,
+      isEnabled: false,
+    });
+  }
+
   return Object.freeze({
     title,
     isEnabled: true,
-    specUrl,
+    specUrl: envValue || DEFAULT_URL,
   });
 })();
 
diff --git a/configs/app/features/rewards.ts b/configs/app/features/rewards.ts
new file mode 100644
index 0000000000..9f19ae58bf
--- /dev/null
+++ b/configs/app/features/rewards.ts
@@ -0,0 +1,29 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+import account from './account';
+import blockchainInteraction from './blockchainInteraction';
+
+const apiHost = getEnvValue('NEXT_PUBLIC_REWARDS_SERVICE_API_HOST');
+
+const title = 'Rewards service integration';
+
+const config: Feature<{ api: { endpoint: string; basePath: string } }> = (() => {
+  if (apiHost && account.isEnabled && blockchainInteraction.isEnabled) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      api: {
+        endpoint: apiHost,
+        basePath: '',
+      },
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/rollbar.ts b/configs/app/features/rollbar.ts
new file mode 100644
index 0000000000..276f782e4e
--- /dev/null
+++ b/configs/app/features/rollbar.ts
@@ -0,0 +1,43 @@
+import type { Feature } from './types';
+
+import app from '../app';
+import { getEnvValue } from '../utils';
+
+const clientToken = getEnvValue('NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN');
+const instance = (() => {
+  const envValue = getEnvValue('NEXT_PUBLIC_APP_INSTANCE');
+  if (envValue) {
+    return envValue;
+  }
+
+  return app.host?.replace('.blockscout.com', '').replace('.k8s-dev', '').replaceAll('-', '_');
+})();
+const environment = getEnvValue('NEXT_PUBLIC_APP_ENV') || 'production';
+const codeVersion = getEnvValue('NEXT_PUBLIC_GIT_TAG') || getEnvValue('NEXT_PUBLIC_GIT_COMMIT_SHA');
+
+const title = 'Rollbar error monitoring';
+
+const config: Feature<{
+  clientToken: string;
+  environment: string;
+  instance: string | undefined;
+  codeVersion: string | undefined;
+}> = (() => {
+  if (clientToken) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      clientToken,
+      environment,
+      instance,
+      codeVersion,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/rollup.ts b/configs/app/features/rollup.ts
new file mode 100644
index 0000000000..3728e60c18
--- /dev/null
+++ b/configs/app/features/rollup.ts
@@ -0,0 +1,48 @@
+import type { Feature } from './types';
+import type { RollupType } from 'types/client/rollup';
+import { ROLLUP_TYPES } from 'types/client/rollup';
+
+import stripTrailingSlash from 'lib/stripTrailingSlash';
+
+import { getEnvValue } from '../utils';
+
+const type = (() => {
+  const envValue = getEnvValue('NEXT_PUBLIC_ROLLUP_TYPE');
+  return ROLLUP_TYPES.find((type) => type === envValue);
+})();
+
+const L1BaseUrl = getEnvValue('NEXT_PUBLIC_ROLLUP_L1_BASE_URL');
+const L2WithdrawalUrl = getEnvValue('NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL');
+
+const title = 'Rollup (L2) chain';
+
+const config: Feature<{
+  type: RollupType;
+  L1BaseUrl: string;
+  homepage: { showLatestBlocks: boolean };
+  outputRootsEnabled: boolean;
+  L2WithdrawalUrl: string | undefined;
+  parentChainName: string | undefined;
+}> = (() => {
+  if (type && L1BaseUrl) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      type,
+      L1BaseUrl: stripTrailingSlash(L1BaseUrl),
+      L2WithdrawalUrl: type === 'optimistic' ? L2WithdrawalUrl : undefined,
+      outputRootsEnabled: type === 'optimistic' && getEnvValue('NEXT_PUBLIC_ROLLUP_OUTPUT_ROOTS_ENABLED') !== 'false',
+      parentChainName: type === 'arbitrum' ? getEnvValue('NEXT_PUBLIC_ROLLUP_PARENT_CHAIN_NAME') : undefined,
+      homepage: {
+        showLatestBlocks: getEnvValue('NEXT_PUBLIC_ROLLUP_HOMEPAGE_SHOW_LATEST_BLOCKS') === 'true',
+      },
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/safe.ts b/configs/app/features/safe.ts
index bed8bf14a6..b2762a78da 100644
--- a/configs/app/features/safe.ts
+++ b/configs/app/features/safe.ts
@@ -1,35 +1,14 @@
 import type { Feature } from './types';
 
-import chain from '../chain';
-
-// https://docs.safe.global/safe-core-api/available-services
-const SAFE_API_MAP: Record<string, string> = {
-  '42161': 'https://safe-transaction-arbitrum.safe.global',
-  '1313161554': 'https://safe-transaction-aurora.safe.global',
-  '43114': 'https://safe-transaction-avalanche.safe.global',
-  '8453': 'https://safe-transaction-base.safe.global',
-  '84531': 'https://safe-transaction-base-testnet.safe.global',
-  '56': 'https://safe-transaction-bsc.safe.global',
-  '42220': 'https://safe-transaction-celo.safe.global',
-  '1': 'https://safe-transaction-mainnet.safe.global',
-  '100': 'https://safe-transaction-gnosis-chain.safe.global',
-  '5': 'https://safe-transaction-goerli.safe.global',
-  '10': 'https://safe-transaction-optimism.safe.global',
-  '137': 'https://safe-transaction-polygon.safe.global',
-};
+import { getEnvValue } from '../utils';
 
 function getApiUrl(): string | undefined {
-  if (!chain.id) {
-    return;
-  }
-
-  const apiHost = SAFE_API_MAP[chain.id];
-
-  if (!apiHost) {
+  try {
+    const envValue = getEnvValue('NEXT_PUBLIC_SAFE_TX_SERVICE_URL');
+    return new URL('/api/v1/safes', envValue).toString();
+  } catch (error) {
     return;
   }
-
-  return `${ apiHost }/api/v1/safes/`;
 }
 
 const title = 'Safe address tags';
diff --git a/configs/app/features/saveOnGas.ts b/configs/app/features/saveOnGas.ts
new file mode 100644
index 0000000000..64d24ed56f
--- /dev/null
+++ b/configs/app/features/saveOnGas.ts
@@ -0,0 +1,25 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+import marketplace from './marketplace';
+
+const title = 'Save on gas with GasHawk';
+
+const config: Feature<{
+  apiUrlTemplate: string;
+}> = (() => {
+  if (getEnvValue('NEXT_PUBLIC_SAVE_ON_GAS_ENABLED') === 'true' && marketplace.isEnabled) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      apiUrlTemplate: 'https://core.gashawk.io/apiv2/stats/address/<address>/savingsPotential/0x1',
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/sentry.ts b/configs/app/features/sentry.ts
deleted file mode 100644
index fb840ca9e5..0000000000
--- a/configs/app/features/sentry.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { Feature } from './types';
-
-import app from '../app';
-import { getEnvValue } from '../utils';
-
-const dsn = getEnvValue('NEXT_PUBLIC_SENTRY_DSN');
-const instance = (() => {
-  const envValue = getEnvValue('NEXT_PUBLIC_APP_INSTANCE');
-  if (envValue) {
-    return envValue;
-  }
-
-  return app.host?.replace('.blockscout.com', '').replaceAll('-', '_');
-})();
-const environment = getEnvValue('NEXT_PUBLIC_APP_ENV') || 'production';
-const release = getEnvValue('NEXT_PUBLIC_GIT_TAG');
-const title = 'Sentry error monitoring';
-
-const config: Feature<{
-  dsn: string;
-  instance: string;
-  release: string | undefined;
-  environment: string;
-  enableTracing: boolean;
-}> = (() => {
-  if (dsn && instance && environment) {
-    return Object.freeze({
-      title,
-      isEnabled: true,
-      dsn,
-      instance,
-      release,
-      environment,
-      enableTracing: getEnvValue('NEXT_PUBLIC_SENTRY_ENABLE_TRACING') === 'true',
-    });
-  }
-
-  return Object.freeze({
-    title,
-    isEnabled: false,
-  });
-})();
-
-export default config;
diff --git a/configs/app/features/sol2uml.ts b/configs/app/features/sol2uml.ts
index 06853e62d8..5a0ac2d4be 100644
--- a/configs/app/features/sol2uml.ts
+++ b/configs/app/features/sol2uml.ts
@@ -1,5 +1,7 @@
 import type { Feature } from './types';
 
+import stripTrailingSlash from 'lib/stripTrailingSlash';
+
 import { getEnvValue } from '../utils';
 
 const apiEndpoint = getEnvValue('NEXT_PUBLIC_VISUALIZE_API_HOST');
@@ -13,7 +15,7 @@ const config: Feature<{ api: { endpoint: string; basePath: string } }> = (() =>
       isEnabled: true,
       api: {
         endpoint: apiEndpoint,
-        basePath: '',
+        basePath: stripTrailingSlash(getEnvValue('NEXT_PUBLIC_VISUALIZE_API_BASE_PATH') || ''),
       },
     });
   }
diff --git a/configs/app/features/stats.ts b/configs/app/features/stats.ts
index b05f2f9659..d3a90ce061 100644
--- a/configs/app/features/stats.ts
+++ b/configs/app/features/stats.ts
@@ -1,5 +1,7 @@
 import type { Feature } from './types';
 
+import stripTrailingSlash from 'lib/stripTrailingSlash';
+
 import { getEnvValue } from '../utils';
 
 const apiEndpoint = getEnvValue('NEXT_PUBLIC_STATS_API_HOST');
@@ -13,7 +15,7 @@ const config: Feature<{ api: { endpoint: string; basePath: string } }> = (() =>
       isEnabled: true,
       api: {
         endpoint: apiEndpoint,
-        basePath: '',
+        basePath: stripTrailingSlash(getEnvValue('NEXT_PUBLIC_STATS_API_BASE_PATH') || ''),
       },
     });
   }
diff --git a/configs/app/features/validators.ts b/configs/app/features/validators.ts
new file mode 100644
index 0000000000..668501e28c
--- /dev/null
+++ b/configs/app/features/validators.ts
@@ -0,0 +1,29 @@
+import type { Feature } from './types';
+import { VALIDATORS_CHAIN_TYPE } from 'types/client/validators';
+import type { ValidatorsChainType } from 'types/client/validators';
+
+import { getEnvValue } from '../utils';
+
+const chainType = ((): ValidatorsChainType | undefined => {
+  const envValue = getEnvValue('NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE') as ValidatorsChainType | undefined;
+  return envValue && VALIDATORS_CHAIN_TYPE.includes(envValue) ? envValue : undefined;
+})();
+
+const title = 'Validators list';
+
+const config: Feature<{ chainType: ValidatorsChainType }> = (() => {
+  if (chainType) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      chainType,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/web3Wallet.ts b/configs/app/features/web3Wallet.ts
index f4df4d56ea..893f92394b 100644
--- a/configs/app/features/web3Wallet.ts
+++ b/configs/app/features/web3Wallet.ts
@@ -21,7 +21,7 @@ const wallets = ((): Array<WalletType> | undefined => {
 
 const title = 'Web3 wallet integration (add token or network to the wallet)';
 
-const config: Feature<{ wallets: Array<WalletType>; addToken: { isDisabled: boolean }}> = (() => {
+const config: Feature<{ wallets: Array<WalletType>; addToken: { isDisabled: boolean } }> = (() => {
   if (wallets && wallets.length > 0) {
     return Object.freeze({
       title,
diff --git a/configs/app/features/xStarScore.ts b/configs/app/features/xStarScore.ts
new file mode 100644
index 0000000000..4f8efa262d
--- /dev/null
+++ b/configs/app/features/xStarScore.ts
@@ -0,0 +1,23 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+
+const title = 'XStar score';
+const url = getEnvValue('NEXT_PUBLIC_XSTAR_SCORE_URL');
+
+const config: Feature<{ url: string }> = (() => {
+  if (url) {
+    return Object.freeze({
+      title,
+      url,
+      isEnabled: true,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/zkEvmRollup.ts b/configs/app/features/zkEvmRollup.ts
deleted file mode 100644
index 7fda84b09f..0000000000
--- a/configs/app/features/zkEvmRollup.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Feature } from './types';
-
-import { getEnvValue } from '../utils';
-
-const title = 'ZkEVM rollup (L2) chain';
-
-const config: Feature<{ L1BaseUrl: string; withdrawalUrl?: string }> = (() => {
-  const L1BaseUrl = getEnvValue('NEXT_PUBLIC_L1_BASE_URL');
-  const isZkEvm = getEnvValue('NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK') === 'true';
-
-  if (isZkEvm && L1BaseUrl) {
-    return Object.freeze({
-      title,
-      isEnabled: true,
-      L1BaseUrl,
-    });
-  }
-
-  return Object.freeze({
-    title,
-    isEnabled: false,
-  });
-})();
-
-export default config;
diff --git a/configs/app/meta.ts b/configs/app/meta.ts
index cf0f309534..3d7b777e03 100644
--- a/configs/app/meta.ts
+++ b/configs/app/meta.ts
@@ -1,13 +1,17 @@
 import app from './app';
 import { getEnvValue, getExternalAssetFilePath } from './utils';
 
-const defaultImageUrl = app.baseUrl + '/static/og_placeholder.png';
+const defaultImageUrl = '/static/og_placeholder.png';
 
 const meta = Object.freeze({
-  promoteBlockscoutInTitle: getEnvValue('NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE') || 'true',
+  promoteBlockscoutInTitle: getEnvValue('NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE') === 'false' ? false : true,
   og: {
     description: getEnvValue('NEXT_PUBLIC_OG_DESCRIPTION') || '',
-    imageUrl: getExternalAssetFilePath('NEXT_PUBLIC_OG_IMAGE_URL') || defaultImageUrl,
+    imageUrl: app.baseUrl + (getExternalAssetFilePath('NEXT_PUBLIC_OG_IMAGE_URL') || defaultImageUrl),
+    enhancedDataEnabled: getEnvValue('NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED') === 'true',
+  },
+  seo: {
+    enhancedDataEnabled: getEnvValue('NEXT_PUBLIC_SEO_ENHANCED_DATA_ENABLED') === 'true',
   },
 });
 
diff --git a/configs/app/services.ts b/configs/app/services.ts
index 86df538215..ee7d3a0b66 100644
--- a/configs/app/services.ts
+++ b/configs/app/services.ts
@@ -1,7 +1,7 @@
 import { getEnvValue } from './utils';
 
 export default Object.freeze({
-  reCaptcha: {
+  reCaptchaV2: {
     siteKey: getEnvValue('NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY'),
   },
 });
diff --git a/configs/app/ui.ts b/configs/app/ui.ts
index 907901221c..a5e79cb479 100644
--- a/configs/app/ui.ts
+++ b/configs/app/ui.ts
@@ -1,8 +1,13 @@
 import type { ContractCodeIde } from 'types/client/contract';
-import { NAVIGATION_LINK_IDS, type NavItemExternal, type NavigationLinkId } from 'types/client/navigation-items';
-import type { ChainIndicatorId } from 'types/homepage';
+import { NAVIGATION_LINK_IDS, type NavItemExternal, type NavigationLinkId, type NavigationLayout } from 'types/client/navigation';
+import { HOME_STATS_WIDGET_IDS, type ChainIndicatorId, type HeroBannerConfig, type HomeStatsWidgetId } from 'types/homepage';
 import type { NetworkExplorer } from 'types/networks';
+import type { ColorThemeId } from 'types/settings';
+import type { FontFamily } from 'types/ui';
 
+import { COLOR_THEMES } from 'lib/settings/colorTheme';
+
+import * as features from './features';
 import * as views from './ui/views';
 import { getEnvValue, getExternalAssetFilePath, parseEnvJson } from './utils';
 
@@ -21,11 +26,34 @@ const hiddenLinks = (() => {
   return result;
 })();
 
-// eslint-disable-next-line max-len
-const HOMEPAGE_PLATE_BACKGROUND_DEFAULT = 'radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%), var(--chakra-colors-blue-400)';
+const homePageStats: Array<HomeStatsWidgetId> = (() => {
+  const parsedValue = parseEnvJson<Array<HomeStatsWidgetId>>(getEnvValue('NEXT_PUBLIC_HOMEPAGE_STATS'));
+
+  if (!Array.isArray(parsedValue)) {
+    const rollupFeature = features.rollup;
+
+    if (rollupFeature.isEnabled && [ 'zkEvm', 'zkSync', 'arbitrum' ].includes(rollupFeature.type)) {
+      return [ 'latest_batch', 'average_block_time', 'total_txs', 'wallet_addresses', 'gas_tracker' ];
+    }
+
+    return [ 'total_blocks', 'average_block_time', 'total_txs', 'wallet_addresses', 'gas_tracker' ];
+  }
+
+  return parsedValue.filter((item) => HOME_STATS_WIDGET_IDS.includes(item));
+})();
+
+const highlightedRoutes = (() => {
+  const parsedValue = parseEnvJson<Array<NavigationLinkId>>(getEnvValue('NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES'));
+  return Array.isArray(parsedValue) ? parsedValue : [];
+})();
+
+const defaultColorTheme = (() => {
+  const envValue = getEnvValue('NEXT_PUBLIC_COLOR_THEME_DEFAULT') as ColorThemeId | undefined;
+  return COLOR_THEMES.find((theme) => theme.id === envValue);
+})();
 
 const UI = Object.freeze({
-  sidebar: {
+  navigation: {
     logo: {
       'default': getExternalAssetFilePath('NEXT_PUBLIC_NETWORK_LOGO'),
       dark: getExternalAssetFilePath('NEXT_PUBLIC_NETWORK_LOGO_DARK'),
@@ -35,8 +63,10 @@ const UI = Object.freeze({
       dark: getExternalAssetFilePath('NEXT_PUBLIC_NETWORK_ICON_DARK'),
     },
     hiddenLinks,
+    highlightedRoutes,
     otherLinks: parseEnvJson<Array<NavItemExternal>>(getEnvValue('NEXT_PUBLIC_OTHER_LINKS')) || [],
     featuredNetworks: getExternalAssetFilePath('NEXT_PUBLIC_FEATURED_NETWORKS'),
+    layout: (getEnvValue('NEXT_PUBLIC_NAVIGATION_LAYOUT') || 'vertical') as NavigationLayout,
   },
   footer: {
     links: getExternalAssetFilePath('NEXT_PUBLIC_FOOTER_LINKS'),
@@ -45,9 +75,12 @@ const UI = Object.freeze({
   },
   homepage: {
     charts: parseEnvJson<Array<ChainIndicatorId>>(getEnvValue('NEXT_PUBLIC_HOMEPAGE_CHARTS')) || [],
+    stats: homePageStats,
+    heroBanner: parseEnvJson<HeroBannerConfig>(getEnvValue('NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG')),
+    // !!! DEPRECATED !!!
     plate: {
-      background: getEnvValue('NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND') || HOMEPAGE_PLATE_BACKGROUND_DEFAULT,
-      textColor: getEnvValue('NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR') || 'white',
+      background: getEnvValue('NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND'),
+      textColor: getEnvValue('NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR'),
     },
     showGasTracker: getEnvValue('NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER') === 'false' ? false : true,
     showAvgBlockTime: getEnvValue('NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME') === 'false' ? false : true,
@@ -71,6 +104,15 @@ const UI = Object.freeze({
   ides: {
     items: parseEnvJson<Array<ContractCodeIde>>(getEnvValue('NEXT_PUBLIC_CONTRACT_CODE_IDES')) || [],
   },
+  hasContractAuditReports: getEnvValue('NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS') === 'true' ? true : false,
+  colorTheme: {
+    'default': defaultColorTheme,
+  },
+  fonts: {
+    heading: parseEnvJson<FontFamily>(getEnvValue('NEXT_PUBLIC_FONT_FAMILY_HEADING')),
+    body: parseEnvJson<FontFamily>(getEnvValue('NEXT_PUBLIC_FONT_FAMILY_BODY')),
+  },
+  maxContentWidth: getEnvValue('NEXT_PUBLIC_MAX_CONTENT_WIDTH_ENABLED') === 'false' ? false : true,
 });
 
 export default UI;
diff --git a/configs/app/ui/views/address.ts b/configs/app/ui/views/address.ts
index c2f0f4fb52..8972c02fce 100644
--- a/configs/app/ui/views/address.ts
+++ b/configs/app/ui/views/address.ts
@@ -1,5 +1,8 @@
-import type { AddressViewId, IdenticonType } from 'types/views/address';
-import { ADDRESS_VIEWS_IDS, IDENTICON_TYPES } from 'types/views/address';
+import type { VerifiedContractsFilter } from 'types/api/contracts';
+import type { SmartContractVerificationMethodExtra } from 'types/client/contract';
+import { SMART_CONTRACT_EXTRA_VERIFICATION_METHODS, SMART_CONTRACT_LANGUAGE_FILTERS } from 'types/client/contract';
+import type { AddressFormat, AddressViewId, IdenticonType } from 'types/views/address';
+import { ADDRESS_FORMATS, ADDRESS_VIEWS_IDS, IDENTICON_TYPES } from 'types/views/address';
 
 import { getEnvValue, parseEnvJson } from 'configs/app/utils';
 
@@ -9,6 +12,28 @@ const identiconType: IdenticonType = (() => {
   return IDENTICON_TYPES.find((type) => value === type) || 'jazzicon';
 })();
 
+const formats: Array<AddressFormat> = (() => {
+  const value = (parseEnvJson<Array<AddressFormat>>(getEnvValue('NEXT_PUBLIC_VIEWS_ADDRESS_FORMAT')) || [])
+    .filter((format) => ADDRESS_FORMATS.includes(format));
+
+  if (value.length === 0) {
+    return [ 'base16' ];
+  }
+
+  return value;
+})();
+
+const bech32Prefix = (() => {
+  const value = getEnvValue('NEXT_PUBLIC_VIEWS_ADDRESS_BECH_32_PREFIX');
+
+  if (!value || !formats.includes('bech32')) {
+    return undefined;
+  }
+
+  // these are the limits of the bech32 prefix - https://github.com/bitcoin/bips/blob/master/bip-0173.mediawiki#bech32
+  return value.length >= 1 && value.length <= 83 ? value : undefined;
+})();
+
 const hiddenViews = (() => {
   const parsedValue = parseEnvJson<Array<AddressViewId>>(getEnvValue('NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS')) || [];
 
@@ -24,10 +49,42 @@ const hiddenViews = (() => {
   return result;
 })();
 
+const extraVerificationMethods: Array<SmartContractVerificationMethodExtra> = (() => {
+  const envValue = getEnvValue('NEXT_PUBLIC_VIEWS_CONTRACT_EXTRA_VERIFICATION_METHODS');
+  if (envValue === 'none') {
+    return [];
+  }
+
+  if (!envValue) {
+    return SMART_CONTRACT_EXTRA_VERIFICATION_METHODS;
+  }
+
+  const parsedMethods = parseEnvJson<Array<SmartContractVerificationMethodExtra>>(envValue) || [];
+
+  return parsedMethods.filter((method) => SMART_CONTRACT_EXTRA_VERIFICATION_METHODS.includes(method));
+})();
+
+const languageFilters: Array<VerifiedContractsFilter> = (() => {
+  const envValue = parseEnvJson<Array<VerifiedContractsFilter>>(getEnvValue('NEXT_PUBLIC_VIEWS_CONTRACT_LANGUAGE_FILTERS'));
+  if (!envValue) {
+    // "Scilla" is chain specific language, so we don't want to show it in default scenario
+    const DEFAULT_LANGUAGE_FILTERS = SMART_CONTRACT_LANGUAGE_FILTERS.filter((filter) => filter !== 'scilla');
+    return DEFAULT_LANGUAGE_FILTERS;
+  }
+
+  return envValue.filter((filter) => SMART_CONTRACT_LANGUAGE_FILTERS.includes(filter));
+})();
+
 const config = Object.freeze({
   identiconType,
+  hashFormat: {
+    availableFormats: formats,
+    bech32Prefix,
+  },
   hiddenViews,
   solidityscanEnabled: getEnvValue('NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED') === 'true',
+  extraVerificationMethods,
+  languageFilters,
 });
 
 export default config;
diff --git a/configs/app/ui/views/nft.ts b/configs/app/ui/views/nft.ts
index b0d9f9b28c..ab9636ccea 100644
--- a/configs/app/ui/views/nft.ts
+++ b/configs/app/ui/views/nft.ts
@@ -4,6 +4,9 @@ import { getEnvValue, parseEnvJson } from 'configs/app/utils';
 
 const config = Object.freeze({
   marketplaces: parseEnvJson<Array<NftMarketplaceItem>>(getEnvValue('NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES')) || [],
+  verifiedFetch: {
+    isEnabled: getEnvValue('NEXT_PUBLIC_HELIA_VERIFIED_FETCH_ENABLED') === 'false' ? false : true,
+  },
 });
 
 export default config;
diff --git a/configs/app/utils.ts b/configs/app/utils.ts
index 2ad992653c..b188d14e8d 100644
--- a/configs/app/utils.ts
+++ b/configs/app/utils.ts
@@ -5,7 +5,8 @@ export const replaceQuotes = (value: string | undefined) => value?.replaceAll('\
 
 export const getEnvValue = (envName: string) => {
   // eslint-disable-next-line no-restricted-properties
-  const envs = isBrowser() ? window.__envs : process.env;
+  const envs = (isBrowser() ? window.__envs : process.env) ?? {};
+
   if (isBrowser() && envs.NEXT_PUBLIC_APP_INSTANCE === 'pw') {
     const storageValue = localStorage.getItem(envName);
 
@@ -38,10 +39,22 @@ export const getExternalAssetFilePath = (envName: string) => {
 export const buildExternalAssetFilePath = (name: string, value: string) => {
   try {
     const fileName = name.replace(/^NEXT_PUBLIC_/, '').replace(/_URL$/, '').toLowerCase();
-    const url = new URL(value);
-    const fileExtension = url.pathname.match(regexp.FILE_EXTENSION)?.[1];
-    return `/assets/${ fileName }.${ fileExtension }`;
+
+    const fileExtension = getAssetFileExtension(value);
+    if (!fileExtension) {
+      throw new Error('Cannot get file path');
+    }
+    return `/assets/configs/${ fileName }.${ fileExtension }`;
   } catch (error) {
     return;
   }
 };
+
+function getAssetFileExtension(value: string) {
+  try {
+    const url = new URL(value);
+    return url.pathname.match(regexp.FILE_EXTENSION)?.[1];
+  } catch (error) {
+    return parseEnvJson(value) ? 'json' : undefined;
+  }
+}
diff --git a/configs/envs/.env.arbitrum b/configs/envs/.env.arbitrum
new file mode 100644
index 0000000000..1fc81ce901
--- /dev/null
+++ b/configs/envs/.env.arbitrum
@@ -0,0 +1,44 @@
+# Set of ENVs for Arbitrum One network explorer
+# https://arbitrum.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=arbitrum"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=arbitrum.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x37c798810d49ba132b40efe7f4fdf6806a8fc58226bb5e185ddc91f896577abf
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgba(27, 74, 221, 1)
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_LOGOUT_URL=https://blockscout-arbitrum.us.auth0.com/v2/logout
+NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=ETH
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/arbitrum/pools'}}]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/arbitrum-one-icon-light.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/arbitrum-one-icon-dark.svg
+NEXT_PUBLIC_NETWORK_ID=42161
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/arbitrum-one-logo-light.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/arbitrum-one-logo-dark.svg
+NEXT_PUBLIC_NETWORK_NAME=Arbitrum One
+NEXT_PUBLIC_NETWORK_RPC_URL=https://arbitrum.llamarpc.com
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Arbitrum One
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/arbitrum-one.png
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth.blockscout.com
+NEXT_PUBLIC_ROLLUP_TYPE=arbitrum
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
\ No newline at end of file
diff --git a/configs/envs/.env.arbitrum_nova b/configs/envs/.env.arbitrum_nova
new file mode 100644
index 0000000000..2888565d7d
--- /dev/null
+++ b/configs/envs/.env.arbitrum_nova
@@ -0,0 +1,42 @@
+# Set of ENVs for Arbitrum One network explorer
+# https://arbitrum.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=arbitrum"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=arbitrum-nova.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x37c798810d49ba132b40efe7f4fdf6806a8fc58226bb5e185ddc91f896577abf
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgba(27, 74, 221, 1)
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_LOGOUT_URL=https://blockscout-arbitrum.us.auth0.com/v2/logout
+NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=ETH
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/arbitrum/pools'}}]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/arbitrum-nova-icon.svg
+NEXT_PUBLIC_NETWORK_ID=42170
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/arbitrum-nova.svg
+NEXT_PUBLIC_NETWORK_NAME=Arbitrum Nova
+NEXT_PUBLIC_NETWORK_RPC_URL=https://arbitrum.llamarpc.com
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Arbitrum Nova
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/arbitrum-nova.png
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth.blockscout.com
+NEXT_PUBLIC_ROLLUP_TYPE=arbitrum
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
\ No newline at end of file
diff --git a/configs/envs/.env.arbitrum_sepolia b/configs/envs/.env.arbitrum_sepolia
new file mode 100644
index 0000000000..58155f9212
--- /dev/null
+++ b/configs/envs/.env.arbitrum_sepolia
@@ -0,0 +1,47 @@
+# Set of ENVs for Arbitrum Sepolia network explorer
+# https://arbitrum-sepolia.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=arbitrum_sepolia"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=arbitrum-sepolia.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/arbitrum-sepolia.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xb730960249381c72588024f5e213abd8e032d968aeb9629103e70677b0850bfa
+NEXT_PUBLIC_HAS_USER_OPS=true
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG={'background':['rgba(27, 74, 221, 1)']}
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_LOGOUT_URL=https://blockscout-arbitrum.us.auth0.com/v2/logout
+NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=ETH
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/arbitrum-sepolia.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/arbitrum-sepolia-dark.svg
+NEXT_PUBLIC_NETWORK_ID=421614
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/arbitrum-sepolia.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/arbitrum-sepolia-dark.svg
+NEXT_PUBLIC_NETWORK_NAME=Arbitrum Sepolia
+NEXT_PUBLIC_NETWORK_RPC_URL=https://sepolia-rollup.arbitrum.io/rpc
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Arbitrum Sepolia
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/arbitrum-sepolia.png
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth-sepolia.blockscout.com
+NEXT_PUBLIC_ROLLUP_TYPE=arbitrum
+NEXT_PUBLIC_SENTRY_DSN=https://fdcd971162e04694bf03564c5be3d291@o1222505.ingest.sentry.io/4503902500421632
+NEXT_PUBLIC_STATS_API_HOST=https://stats-arbitrum-sepolia.k8s-prod-2.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
\ No newline at end of file
diff --git a/configs/envs/.env.base b/configs/envs/.env.base
new file mode 100644
index 0000000000..8eab44c966
--- /dev/null
+++ b/configs/envs/.env.base
@@ -0,0 +1,66 @@
+# Set of ENVs for Base Mainnet network explorer
+# https://base.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=base"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={ "id": "728301", "width": "728", "height": "90" }
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={ "id": "728302", "width": "320", "height": "100" }
+NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER=adbutler
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=base.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swap','icon':'swap','dappId':'aerodrome'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'},{'text':'Get gas','icon':'gas','dappId':'smol-refuel'}]
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/base-mainnet.json
+NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/base-mainnet.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xfd5c5dae7b69fe29e61d19b9943e688aa0f1be1e983c4fba8fe985f90ff69d5f
+NEXT_PUBLIC_HAS_USER_OPS=true
+NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS=true
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=linear-gradient(136.9deg,rgb(107 94 236) 1.5%,rgb(0 82 255) 56.84%,rgb(82 62 231) 98.54%)
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_LOGOUT_URL=https://basechain.us.auth0.com/v2/logout
+NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/maxaleks/0d18fc309ff499075127b364cc69306d/raw/2a51f961a8c1b9f884f2ab7eed79d4b69330e1ae/peanut_protocol_banner.html
+NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://base.blockscout.com/apps/peanut-protocol
+NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
+NEXT_PUBLIC_MARKETPLACE_ENABLED=true
+NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-security-reports/default.json
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_METASUITES_ENABLED=true
+NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG=[{'name': 'zerion', 'dapp_id': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview?utm_source=blockscout&utm_medium=address', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'}]
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/apps']
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/base/pools'}},{'title':'L2scan','baseUrl':'https://base.l2scan.co/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}},{'title':'Tenderly','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/base'}},{'title':'3xpl','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/3xpl.png','baseUrl':'https://3xpl.com/','paths':{'tx':'/base/transaction','address':'/base/address'}}]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/base.svg
+NEXT_PUBLIC_NETWORK_ID=8453
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/base.svg
+NEXT_PUBLIC_NETWORK_NAME=Base Mainnet
+NEXT_PUBLIC_NETWORK_RPC_URL=https://mainnet.base.org/
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Mainnet
+NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/base-mainnet.png
+NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://base.drpc.org?ref=559183','text':'Public RPC'}]
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth.blockscout.com/
+NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://bridge.base.org/withdraw
+NEXT_PUBLIC_ROLLUP_TYPE=optimistic
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-base.safe.global
+NEXT_PUBLIC_STATS_API_HOST=https://stats-l2-base-mainnet.k8s-prod-1.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE=gradient_avatar
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
\ No newline at end of file
diff --git a/configs/envs/.env.blackfort_testnet b/configs/envs/.env.blackfort_testnet
new file mode 100644
index 0000000000..eeaad00054
--- /dev/null
+++ b/configs/envs/.env.blackfort_testnet
@@ -0,0 +1,44 @@
+# Set of ENVs for BXN Testnet network explorer
+# https://blackfort-testnet.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=blackfort_testnet"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=blackfort-testnet.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/blackfort-testnet.json
+NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/blackfort.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xcb4140e22cde3412eb5aecdedf2403032c7a251f5c96b11122aca5b1b88ed953
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=linear-gradient(92deg, rgb(3, 150, 254) 0.24%, rgb(36, 209, 245) 98.31%)
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=TBXN
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=TBXN
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/blackfort.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/blackfort-dark.svg
+NEXT_PUBLIC_NETWORK_ID=4777
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/blackfort.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/blackfort-dark.svg
+NEXT_PUBLIC_NETWORK_NAME=BXN Testnet
+NEXT_PUBLIC_NETWORK_RPC_URL=https://testnet.blackfort.network/rpc
+NEXT_PUBLIC_NETWORK_SHORT_NAME=BXN Testnet
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/blackfort.png
+NEXT_PUBLIC_STATS_API_HOST=https://stats-blackfort-testnet.k8s.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE=blackfort
\ No newline at end of file
diff --git a/configs/envs/.env.celo_alfajores b/configs/envs/.env.celo_alfajores
new file mode 100644
index 0000000000..d93f9e36ae
--- /dev/null
+++ b/configs/envs/.env.celo_alfajores
@@ -0,0 +1,43 @@
+# Set of ENVs for Celo Alfajores network explorer
+# https://celo-alfajores.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=celo_alfajores"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+NEXT_PUBLIC_CELO_ENABLED=true
+NEXT_PUBLIC_CELO_L2_UPGRADE_BLOCK=26369280
+
+# Instance ENVs
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=celo-alfajores.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_GAS_TRACKER_ENABLED=false
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgba(252, 255, 82, 1)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgba(0, 0, 0, 1)
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=CELO
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=CELO
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/celo-icon-light.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/celo-icon-dark.svg
+NEXT_PUBLIC_NETWORK_ID=44787
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/celo-logo-light.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/celo-logo-dark.svg
+NEXT_PUBLIC_NETWORK_NAME=Celo Alfajores
+NEXT_PUBLIC_NETWORK_RPC_URL=https://alfajores-forno.celo-testnet.org
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Alfajores
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/celo.png
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_HOMEPAGE_STATS=['total_blocks','average_block_time','total_txs','wallet_addresses','gas_tracker','current_epoch']
\ No newline at end of file
diff --git a/configs/envs/.env.eth b/configs/envs/.env.eth
index 75ef364321..215b86e5d1 100644
--- a/configs/envs/.env.eth
+++ b/configs/envs/.env.eth
@@ -1,48 +1,70 @@
 # Set of ENVs for Ethereum network explorer
-# https://eth.blockscout.com/
+# https://eth.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=eth"
 
-# app configuration
+# Local ENVs
 NEXT_PUBLIC_APP_PROTOCOL=http
 NEXT_PUBLIC_APP_HOST=localhost
 NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
-# blockchain parameters
-NEXT_PUBLIC_NETWORK_NAME=Ethereum
-NEXT_PUBLIC_NETWORK_SHORT_NAME=ETH
-NEXT_PUBLIC_NETWORK_ID=1
-NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
-NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
-NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
-NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
-NEXT_PUBLIC_NETWORK_RPC_URL=https://eth.llamarpc.com
-
-# api configuration
-NEXT_PUBLIC_API_HOST=eth.blockscout.com
+# Instance ENVs
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={ "id": "728471", "width": "728", "height": "90" }
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={ "id": "728470", "width": "320", "height": "100" }
+NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER=adbutler
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
 NEXT_PUBLIC_API_BASE_PATH=/
-
-# ui config
-## homepage
-NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs', 'coin_price', 'market_cap']
-## sidebar
-NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/eth.json
-## footer
-##views
-NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES=[{'name':'OpenSea','collection_url':'https://opensea.io/assets/ethereum/{hash}','instance_url':'https://opensea.io/assets/ethereum/{hash}/{id}','logo_url':'https://opensea.io/static/images/logos/opensea-logo.svg'},{'name':'LooksRare','collection_url':'https://looksrare.org/collections/{hash}','instance_url':'https://looksrare.org/collections/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/looks-rare.png'}]
-## misc
-NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Etherscan','baseUrl':'https://etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]
-
-# app features
-NEXT_PUBLIC_APP_ENV=development
-NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
+NEXT_PUBLIC_API_HOST=eth.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED=true
+NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swapscout','icon':'swap','dappId':'swapscout'},{'text':'Disperse','icon':'txn_batches_slim','dappId':'smol'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'},{'text':'Get gas','icon':'gas','dappId':'smol-refuel'}]
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/eth.json
+NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/eth-mainnet.json
+NEXT_PUBLIC_GAS_REFUEL_PROVIDER_CONFIG={'name': 'Need gas?', 'url_template': 'https://smolrefuel.com/?outboundChain={chainId}&partner=blockscout&utm_source=blockscout&disableBridges=true', 'dapp_id': 'smol-refuel', 'logo': 'https://blockscout-content.s3.amazonaws.com/smolrefuel-logo-action-button.png'}
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xd01175f1efa23f36c5579b3c13e2bbd0885017643a7efef5cbcb6b474384dfa8
 NEXT_PUBLIC_HAS_BEACON_CHAIN=true
+NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS=true
+NEXT_PUBLIC_HAS_USER_OPS=true
+NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS=true
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs', 'coin_price', 'market_cap']
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
-NEXT_PUBLIC_AUTH_URL=http://localhost:3000
-NEXT_PUBLIC_LOGOUT_URL=https://blockscoutcom.us.auth0.com/v2/logout
-NEXT_PUBLIC_STATS_API_HOST=https://stats-eth-main.k8s.blockscout.com
-NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
-NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
-NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_LOGOUT_URL=https://ethereum-mainnet.us.auth0.com/v2/logout
+NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE=<p>Participated in our recent Blockscout activities? <a href="https://badges.blockscout.com?utm_source=instance&utm_medium=eth" target="_blank">Check your eligibility</a> and claim your NFT Scout badges. More exciting things are coming soon!</p>
+NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/maikReal/974c47f86a3158c1a86b092ae2f044b3/raw/abcc7e02150cd85d4974503a0357162c0a2c35a9/merits-banner.html
+NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://swap.blockscout.com?utm_source=blockscout&utm_medium=eth
+NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
+NEXT_PUBLIC_MARKETPLACE_ENABLED=true
+NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID=appGkvtmKI7fXE4Vs
+NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-security-reports/default.json
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_METASUITES_ENABLED=true
+NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG=[{'name': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'},{'name': 'zapper', 'url_template': 'https://zapper.xyz/account/{address}', 'logo': 'https://blockscout-content.s3.amazonaws.com/zapper-icon.png'}]
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/apps']
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/eth/pools'}},{'title':'Etherscan','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/etherscan.png','baseUrl':'https://etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}, {'title':'Blockchair','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/blockchair.png','baseUrl':'https://blockchair.com/','paths':{'tx':'/ethereum/transaction','address':'/ethereum/address','token':'/ethereum/erc-20/token','block':'/ethereum/block'}},{'title':'Sentio','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/sentio.png','baseUrl':'https://app.sentio.xyz/','paths':{'tx':'/tx/1','address':'/contract/1'}}, {'title':'Tenderly','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/mainnet'}}, {'title':'0xPPL','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/0xPPL.png','baseUrl':'https://0xppl.com','paths':{'tx':'/Ethereum/tx','address':'/','token':'/c/Ethereum'}}, {'title':'3xpl','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/3xpl.png','baseUrl':'https://3xpl.com/','paths':{'tx':'/ethereum/transaction','address':'/ethereum/address'}} ]
+NEXT_PUBLIC_NETWORK_ID=1
+NEXT_PUBLIC_NETWORK_NAME=Ethereum
+NEXT_PUBLIC_NETWORK_RPC_URL=https://eth.drpc.org
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Ethereum
+NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/eth.jpg
+NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://eth.drpc.org?ref=559183','text':'Public RPC'}]
+NEXT_PUBLIC_REWARDS_SERVICE_API_HOST=https://merits.blockscout.com
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-mainnet.safe.global
+NEXT_PUBLIC_SAVE_ON_GAS_ENABLED=true
+NEXT_PUBLIC_SEO_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_STATS_API_HOST=https://stats-eth-main.k8s-prod-1.blockscout.com
 NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
-
-#meta
-NEXT_PUBLIC_OG_IMAGE_URL=https://github.com/blockscout/frontend-configs/blob/main/configs/og-images/eth.jpg?raw=true
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_XSTAR_SCORE_URL=https://docs.xname.app/the-solution-adaptive-proof-of-humanity-on-blockchain/xhs-scoring-algorithm?utm_source=blockscout&utm_medium=address
+NEXT_PUBLIC_GAME_BADGE_CLAIM_LINK=https://badges.blockscout.com/mint/hiddenBlockBadge
\ No newline at end of file
diff --git a/configs/envs/.env.eth_goerli b/configs/envs/.env.eth_goerli
index 390a8f135c..5bf4167f20 100644
--- a/configs/envs/.env.eth_goerli
+++ b/configs/envs/.env.eth_goerli
@@ -33,6 +33,7 @@ NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-c
 NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES=[{'name':'LooksRare','collection_url':'https://goerli.looksrare.org/collections/{hash}','instance_url':'https://goerli.looksrare.org/collections/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/looks-rare.png'}]
 ## misc
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Bitquery','baseUrl':'https://explorer.bitquery.io/','paths':{'tx':'/goerli/tx','address':'/goerli/address','token':'/goerli/token','block':'/goerli/block'}},{'title':'Etherscan','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]
+NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS=true
 
 # app features
 NEXT_PUBLIC_APP_ENV=development
@@ -52,6 +53,7 @@ NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED='true'
 NEXT_PUBLIC_HAS_BEACON_CHAIN=true
 NEXT_PUBLIC_HAS_USER_OPS=true
 NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.blockscout.com/?address={hash}&blockscout=eth-goerli.blockscout.com','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
 
 #meta
 NEXT_PUBLIC_OG_IMAGE_URL=https://github.com/blockscout/frontend-configs/blob/main/configs/og-images/eth-goerli.png?raw=true
diff --git a/configs/envs/.env.eth_sepolia b/configs/envs/.env.eth_sepolia
new file mode 100644
index 0000000000..6de7b51a9a
--- /dev/null
+++ b/configs/envs/.env.eth_sepolia
@@ -0,0 +1,72 @@
+# Set of ENVs for Sepolia network explorer
+# https://eth-sepolia.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=eth_sepolia"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={ "id": "632019", "width": "728", "height": "90" }
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={ "id": "632018", "width": "320", "height": "100" }
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=eth-sepolia.k8s-dev.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info-test.k8s-dev.blockscout.com
+NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED=true
+NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swap','icon':'swap','dappId':'cow-swap'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'}]
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/eth-sepolia.json
+NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/sepolia.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xbf69c7abc4fee283b59a9633dadfdaedde5c5ee0fba3e80a08b5b8a3acbd4363
+NEXT_PUBLIC_HAS_BEACON_CHAIN=true
+NEXT_PUBLIC_HAS_USER_OPS=true
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG={'background':['rgba(51, 53, 67, 1)'],'text_color':['rgba(165, 252, 122, 1)']}
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_LOGOUT_URL=https://blockscout-goerli.us.auth0.com/v2/logout
+NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE=<p>Participated in our recent Blockscout activities? <a href="https://badges.blockscout.com?utm_source=instance&utm_medium=sepolia" target="_blank">Check your eligibility</a> and claim your NFT Scout badges. More exciting things are coming soon!</p>
+NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/maikReal/974c47f86a3158c1a86b092ae2f044b3/raw/abcc7e02150cd85d4974503a0357162c0a2c35a9/merits-banner.html
+NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://swap.blockscout.com?utm_source=blockscout&utm_medium=eth-sepolia
+NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
+NEXT_PUBLIC_MARKETPLACE_ENABLED=true
+NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY=patbqG4V2CI998jAq.9810c58c9de973ba2650621c94559088cbdfa1a914498e385621ed035d33c0d0
+NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID=appGkvtmKI7fXE4Vs
+NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-security-reports/default.json
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_METASUITES_ENABLED=true
+NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG=[{'name': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'},{'name': 'zapper', 'url_template': 'https://zapper.xyz/account/{address}', 'logo': 'https://blockscout-content.s3.amazonaws.com/zapper-icon.png'}]
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/apps']
+NEXT_PUBLIC_NAVIGATION_LAYOUT=horizontal
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/sepolia-testnet/pools'}},{'title':'Etherscan','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/etherscan.png','baseUrl':'https://sepolia.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}, {'title':'Tenderly','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/sepolia'}} ]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/sepolia.png
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/sepolia.png
+NEXT_PUBLIC_NETWORK_ID=11155111
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/sepolia.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/sepolia.svg
+NEXT_PUBLIC_NETWORK_NAME=Sepolia
+NEXT_PUBLIC_NETWORK_RPC_URL=https://eth-sepolia.public.blastapi.io
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Sepolia
+NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/sepolia-testnet.png
+NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://sepolia.drpc.org?ref=559183','text':'Public RPC'}]
+NEXT_PUBLIC_REWARDS_SERVICE_API_HOST=https://points.k8s-dev.blockscout.com
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-sepolia.safe.global
+NEXT_PUBLIC_STATS_API_HOST=https://stats-sepolia.k8s.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=noves
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_XSTAR_SCORE_URL=https://docs.xname.app/the-solution-adaptive-proof-of-humanity-on-blockchain/xhs-scoring-algorithm?utm_source=blockscout&utm_medium=address
+NEXT_PUBLIC_DEX_POOLS_ENABLED=true
diff --git a/configs/envs/.env.filecoin b/configs/envs/.env.filecoin
new file mode 100644
index 0000000000..0f6e05cd25
--- /dev/null
+++ b/configs/envs/.env.filecoin
@@ -0,0 +1,42 @@
+# Set of ENVs for Filecoin Virtual Machine network explorer
+# https://filecoin.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=filecoin"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=filecoin.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/fvm.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x5abb6212c1802402b828ed20c2bd4d4a6153b8bee68a5259cba3c8d7a7c6b775
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs', 'coin_price', 'market_cap']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=linear-gradient(237deg, rgb(26, 58, 150) 14.83%, rgb(111, 223, 164) 132.56%)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgba(255, 255, 255, 1)
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_LOGOUT_URL=https://blockscout-filecoin.us.auth0.com/v2/logout
+NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=FIL
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=FIL
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/filecoin/pools'}}]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/filecoin-icon-dark.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/filecoin-icon-light.svg
+NEXT_PUBLIC_NETWORK_ID=314
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/filecoin-logo-dark.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/filecoin-logo-light.svg
+NEXT_PUBLIC_NETWORK_NAME=Filecoin Virtual Machine
+NEXT_PUBLIC_NETWORK_RPC_URL=https://rpc.ankr.com/filecoin
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Filecoin Virtual Machine
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/filecoin.png
+NEXT_PUBLIC_STATS_API_HOST=https://stats-filecoin.k8s-prod-1.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
\ No newline at end of file
diff --git a/configs/envs/.env.garnet b/configs/envs/.env.garnet
new file mode 100644
index 0000000000..44720ed11c
--- /dev/null
+++ b/configs/envs/.env.garnet
@@ -0,0 +1,53 @@
+# Set of ENVs for Garnet Testnet network explorer
+# https://explorer.garnetchain.com
+# This is an auto-generated file. To update all values, run "yarn preset:sync --name=garnet"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_AD_BANNER_PROVIDER=none
+NEXT_PUBLIC_AD_TEXT_PROVIDER=none
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=explorer.garnetchain.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/redstone-testnet.json
+NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/redstone.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x5b0ba69f2cf5fbc6da96b6cf475c5521f7a385efd9d68673f69c1fc54f737a52
+NEXT_PUBLIC_HAS_MUD_FRAMEWORK=true
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG={'background':['rgb(169, 31, 47)']}
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_LOGOUT_URL=https://redstone-lattice.us.auth0.com/v2/logout
+NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/garnet.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/garnet-dark.svg
+NEXT_PUBLIC_NETWORK_ID=17069
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/garnet.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/garnet-dark.svg
+NEXT_PUBLIC_NETWORK_NAME=Garnet Testnet
+NEXT_PUBLIC_NETWORK_RPC_URL=https://partner-rpc.garnetchain.com/tireless-strand-dreamt-overcome
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Garnet Testnet
+NEXT_PUBLIC_OG_DESCRIPTION=Redstone is the home for onchain games, worlds, and other MUD applications
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/garnet.png
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth-holesky.blockscout.com/
+NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://garnet.qry.live/withdraw
+NEXT_PUBLIC_ROLLUP_TYPE=optimistic
+NEXT_PUBLIC_STATS_API_HOST=https://stats-redstone-garnet.k8s.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
\ No newline at end of file
diff --git a/configs/envs/.env.gnosis b/configs/envs/.env.gnosis
index 1e20f6c303..7e1d1e6993 100644
--- a/configs/envs/.env.gnosis
+++ b/configs/envs/.env.gnosis
@@ -1,53 +1,70 @@
-# Set of ENVs for Gnosis network explorer
-# https://gnosis.blockscout.com/
+# Set of ENVs for Gnosis chain network explorer
+# https://gnosis.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=gnosis"
 
-# app configuration
+# Local ENVs
 NEXT_PUBLIC_APP_PROTOCOL=http
 NEXT_PUBLIC_APP_HOST=localhost
 NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
-# blockchain parameters
-NEXT_PUBLIC_NETWORK_NAME=Gnosis
-NEXT_PUBLIC_NETWORK_SHORT_NAME=Gnosis
-NEXT_PUBLIC_NETWORK_ID=100
-NEXT_PUBLIC_NETWORK_CURRENCY_NAME=xDAI
-NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=xDAI
-NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
-NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
-NEXT_PUBLIC_NETWORK_RPC_URL=https://rpc.gnosischain.com
-
-# api configuration
-NEXT_PUBLIC_API_HOST=gnosis.blockscout.com
+# Instance ENVs
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={'id':'523705','width':'728','height':'90'}
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={'id':'539876','width':'320','height':'100'}
+NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER=adbutler
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
 NEXT_PUBLIC_API_BASE_PATH=/
-
-# ui config
-## homepage
-NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
-NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND="rgb(46, 74, 60)"
-NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR="rgb(255, 255, 255)"
-## sidebar
+NEXT_PUBLIC_API_HOST=gnosis.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_BEACON_CHAIN_CURRENCY_SYMBOL=GNO
+NEXT_PUBLIC_BRIDGED_TOKENS_BRIDGES=[{'type':'omni','title':'OmniBridge','short_title':'OMNI'},{'type':'amb','title':'Arbitrary Message Bridge','short_title':'AMB'}]
+NEXT_PUBLIC_BRIDGED_TOKENS_CHAINS=[{'id':'1','title':'Ethereum','short_title':'ETH','base_url':'https://eth.blockscout.com/token/'},{'id':'56','title':'Binance Smart Chain','short_title':'BSC','base_url':'https://bscscan.com/token/'},{'id':'99','title':'POA','short_title':'POA','base_url':'https://blockscout.com/poa/core/token/'}]
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED=true
+NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swap','icon':'swap','dappId':'cow-swap'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'},{'text':'Get gas','icon':'gas','dappId':'smol-refuel'}]
 NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/gnosis-chain-mainnet.json
-NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/gnosis.svg
-NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/gnosis.svg
-## footer
 NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/gnosis.json
-## views
-## misc
-
-# app features
-NEXT_PUBLIC_APP_ENV=development
 NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x082762f95047d39d612daafec832f88163f3815fde4ddd8944f2a5198a396e0f
-# NEXT_PUBLIC_BEACON_CHAIN_CURRENCY_SYMBOL=GNO
+NEXT_PUBLIC_HAS_BEACON_CHAIN=true
+NEXT_PUBLIC_HAS_USER_OPS=true
+NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS=true
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs', 'tvl']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgb(46, 74, 60)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgb(255, 255, 255)
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
-NEXT_PUBLIC_LOGOUT_URL=https://blockscoutcom.us.auth0.com/v2/logout
-NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace/gnosis-chain.json
-NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/shrmiO9mDGJoPNmJe
-NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
-NEXT_PUBLIC_WEB3_WALLETS=['token_pocket','metamask']
-NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
-NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
-NEXT_PUBLIC_BRIDGED_TOKENS_CHAINS=[{'id':'1','title':'Ethereum','short_title':'ETH','base_url':'https://eth.blockscout.com/token/'},{'id':'56','title':'Binance Smart Chain','short_title':'BSC','base_url':'https://bscscan.com/token/'},{'id':'99','title':'POA','short_title':'POA','base_url':'https://blockscout.com/poa/core/token/'}]
-NEXT_PUBLIC_BRIDGED_TOKENS_BRIDGES=[{'type':'omni','title':'OmniBridge','short_title':'OMNI'},{'type':'amb','title':'Arbitrary Message Bridge','short_title':'AMB'}]
-
-#meta
-NEXT_PUBLIC_OG_IMAGE_URL=https://github.com/blockscout/frontend-configs/blob/main/configs/og-images/polygon-mainnet.png?raw=true
+NEXT_PUBLIC_LOGOUT_URL=https://login.blockscout.com/v2/logout
+NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/maxaleks/0d18fc309ff499075127b364cc69306d/raw/2a51f961a8c1b9f884f2ab7eed79d4b69330e1ae/peanut_protocol_banner.html
+NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://gnosis.blockscout.com/apps/peanut-protocol
+NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
+NEXT_PUBLIC_MARKETPLACE_ENABLED=true
+NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-security-reports/default.json
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
+NEXT_PUBLIC_MARKETPLACE_GRAPH_LINKS_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/refs/heads/marketplace-graph-test/test-configs/marketplace-graph-links.json
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_METASUITES_ENABLED=true
+NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG=[{'name': 'zerion', 'dapp_id': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview?utm_source=blockscout&utm_medium=address', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'}]
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/apps']
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=XDAI
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=XDAI
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/xdai/pools'}},{'title':'Tenderly','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/gnosis-chain'}},{'title':'3xpl','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/3xpl.png','baseUrl':'https://3xpl.com/','paths':{'tx':'/gnosis-chain/transaction','address':'/gnosis-chain/address'}}]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/gnosis.svg
+NEXT_PUBLIC_NETWORK_ID=100
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/gnosis.svg
+NEXT_PUBLIC_NETWORK_NAME=Gnosis chain
+NEXT_PUBLIC_NETWORK_RPC_URL=https://rpc.gnosischain.com
+NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL=GNO
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Gnosis chain
+NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/gnosis-chain-mainnet.png
+NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://gnosis.drpc.org?ref=559183','text':'Public RPC'}]
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-gnosis-chain.safe.global
+NEXT_PUBLIC_STATS_API_HOST=https://stats-gnosis-mainnet.k8s-prod-1.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
\ No newline at end of file
diff --git a/configs/envs/.env.jest b/configs/envs/.env.jest
index 7a14a10b01..abe2107a80 100644
--- a/configs/envs/.env.jest
+++ b/configs/envs/.env.jest
@@ -24,8 +24,6 @@ NEXT_PUBLIC_API_BASE_PATH=/
 # ui config
 ## homepage
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cap']
-NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME=true
-NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER=true
 NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=
 ## sidebar
 NEXT_PUBLIC_NETWORK_LOGO=
@@ -44,8 +42,6 @@ NEXT_PUBLIC_APP_INSTANCE=jest
 NEXT_PUBLIC_APP_ENV=testing
 NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://localhost:3000/marketplace-config.json
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://localhost:3000/marketplace-submit-form
-NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK=false
-NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK=false
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
 NEXT_PUBLIC_AUTH_URL=http://localhost:3100
 NEXT_PUBLIC_LOGOUT_URL=https://blockscoutcom.us.auth0.com/v2/logout
diff --git a/configs/envs/.env.main b/configs/envs/.env.main
index 267b3448a6..0b0b075299 100644
--- a/configs/envs/.env.main
+++ b/configs/envs/.env.main
@@ -1,55 +1,69 @@
-# Set of ENVs for Develompent network explorer
-# https://blockscout-main.k8s-dev.blockscout.com/
+# Set of ENVs for Sepolia network explorer
+# https://eth-sepolia.k8s-dev.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=main"
 
-# app configuration
+# Local ENVs
 NEXT_PUBLIC_APP_PROTOCOL=http
 NEXT_PUBLIC_APP_HOST=localhost
 NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_APP_INSTANCE=rubber_duck
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
-# blockchain parameters
-NEXT_PUBLIC_NETWORK_NAME=Goerli
-NEXT_PUBLIC_NETWORK_SHORT_NAME=Goerli
-NEXT_PUBLIC_NETWORK_ID=5
-NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
-NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
-NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
-NEXT_PUBLIC_NETWORK_GOVERNANCE_TOKEN_SYMBOL=ETH
-NEXT_PUBLIC_NETWORK_RPC_URL=https://rpc.ankr.com/eth_goerli
-NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
-NEXT_PUBLIC_IS_TESTNET=true
-
-# api configuration
-NEXT_PUBLIC_API_HOST=blockscout-main.k8s-dev.blockscout.com
+# Instance ENVs
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={ "id": "632019", "width": "728", "height": "90" }
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={ "id": "632018", "width": "320", "height": "100" }
+NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER=adbutler
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs-test.k8s-dev.blockscout.com
 NEXT_PUBLIC_API_BASE_PATH=/
-NEXT_PUBLIC_BOOL_SCAN_API=https://dev-api.boolscan.com
-
-# ui config
-## homepage
+NEXT_PUBLIC_API_HOST=eth-sepolia.k8s-dev.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info-test.k8s-dev.blockscout.com
+NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED=true
+NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swap','icon':'swap','dappId':'uniswap'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'},{'text':'Get gas','icon':'gas','dappId':'smol-refuel'}]
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/eth-sepolia.json
+NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/sepolia.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xbf69c7abc4fee283b59a9633dadfdaedde5c5ee0fba3e80a08b5b8a3acbd4363
+NEXT_PUBLIC_HAS_BEACON_CHAIN=true
+NEXT_PUBLIC_HAS_USER_OPS=true
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
-## sidebar
-NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/eth-goerli.json
-NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-logos/goerli.svg
-NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-icons/goerli.svg
-## footer
-##views
-NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES=[{'name':'LooksRare','collection_url':'https://goerli.looksrare.org/collections/{hash}','instance_url':'https://goerli.looksrare.org/collections/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/looks-rare.png'}]
-## misc
-NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Bitquery','baseUrl':'https://explorer.bitquery.io/','paths':{'tx':'/goerli/tx','address':'/goerli/address','token':'/goerli/token','block':'/goerli/block'}},{'title':'Etherscan','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]
-## views
-# NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS=['top_accounts']
-# NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS=['value','fee_currency','gas_price','tx_fee','gas_fees','burnt_fees']
-# NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS=['fee_per_gas']
-
-# app features
-NEXT_PUBLIC_APP_ENV=development
-NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgba(51, 53, 67, 1)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgba(165, 252, 122, 1)
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
-NEXT_PUBLIC_AUTH_URL=http://localhost:3000
-NEXT_PUBLIC_LOGOUT_URL=https://blockscoutcom.us.auth0.com/v2/logout
-NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/eth-goerli.json
-NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace-categories/default.json
-NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/shrqUAcjgGJ4jU88C
-NEXT_PUBLIC_STATS_API_HOST=https://stats-goerli.k8s-dev.blockscout.com
-NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.k8s-dev.blockscout.com
-NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info-test.k8s-dev.blockscout.com
-NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs-test.k8s-dev.blockscout.com
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_LOGOUT_URL=https://blockscout-goerli.us.auth0.com/v2/logout
+NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
+NEXT_PUBLIC_MARKETPLACE_ENABLED=true
+NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/test-configs/marketplace-security-report-mock.json
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata-test.k8s-dev.blockscout.com
+NEXT_PUBLIC_METASUITES_ENABLED=true
+NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG=[{'name': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'}]
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens-rs-test.k8s-dev.blockscout.com
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/blocks','/apps']
+NEXT_PUBLIC_NAVIGATION_LAYOUT=horizontal
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Etherscan','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/etherscan.png', 'baseUrl':'https://sepolia.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}, {'title':'Tenderly','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/sepolia'}} ]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/sepolia.png
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/sepolia.png
+NEXT_PUBLIC_NETWORK_ID=11155111
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/sepolia.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/sepolia.svg
+NEXT_PUBLIC_NETWORK_NAME=Sepolia
+NEXT_PUBLIC_NETWORK_RPC_URL=https://eth-sepolia.public.blastapi.io
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Sepolia
+NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/sepolia-testnet.png
+NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://sepolia.drpc.org?ref=559183','text':'Public RPC'}]
+NEXT_PUBLIC_REWARDS_SERVICE_API_HOST=https://points.k8s-dev.blockscout.com
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-sepolia.safe.global
+NEXT_PUBLIC_SEO_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_STATS_API_HOST=https://stats-sepolia.k8s-dev.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer-test.k8s-dev.blockscout.com
\ No newline at end of file
diff --git a/configs/envs/.env.main.L2 b/configs/envs/.env.main.L2
deleted file mode 100644
index fb9359be95..0000000000
--- a/configs/envs/.env.main.L2
+++ /dev/null
@@ -1,52 +0,0 @@
-# Set of ENVs for Develompent L2 network explorer
-# https://blockscout-optimism-goerli.k8s-dev.blockscout.com/
-
-# app configuration
-NEXT_PUBLIC_APP_PROTOCOL=http
-NEXT_PUBLIC_APP_HOST=localhost
-NEXT_PUBLIC_APP_PORT=3000
-
-# blockchain parameters
-NEXT_PUBLIC_NETWORK_NAME=Base Göerli
-NEXT_PUBLIC_NETWORK_SHORT_NAME=Base
-NEXT_PUBLIC_NETWORK_ID=84531
-NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
-NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
-NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
-NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
-NEXT_PUBLIC_NETWORK_RPC_URL=https://goerli.base.org
-NEXT_PUBLIC_IS_TESTNET=true
-
-# api configuration
-NEXT_PUBLIC_API_HOST=blockscout-optimism-goerli.k8s-dev.blockscout.com
-NEXT_PUBLIC_API_BASE_PATH=/
-
-# ui config
-## homepage
-NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=linear-gradient(136.9deg,rgb(107 94 236) 1.5%,rgb(0 82 255) 56.84%,rgb(82 62 231) 98.54%)
-NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
-## sidebar
-NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/base-goerli.json
-NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-logos/base.svg
-NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-icons/base.svg
-## footer
-## misc
-## views
-NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE=gradient_avatar
-
-# app features
-NEXT_PUBLIC_APP_ENV=development
-NEXT_PUBLIC_AD_BANNER_PROVIDER=adbutler
-NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP='{ "id": "632019", "width": "728", "height": "90" }'
-NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE="{ 'id': '632018', 'width': '320', 'height': '100' }"
-NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x4a0ed8ddf751a7cb5297f827699117b0f6d21a0b2907594d300dc9fed75c7e62
-NEXT_PUBLIC_WEB3_WALLETS=['coinbase']
-NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET=true
-NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
-NEXT_PUBLIC_LOGOUT_URL=https://blockscoutcom.us.auth0.com/v2/logout
-NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/base-goerli.json
-NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/shrqUAcjgGJ4jU88C
-NEXT_PUBLIC_STATS_API_HOST=https://stats-optimism-goerli.k8s-dev.blockscout.com
-NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK=true
-NEXT_PUBLIC_L1_BASE_URL=https://blockscout-main.k8s-dev.blockscout.com
-NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL=https://app.optimism.io/bridge/withdraw
diff --git a/configs/envs/.env.optimism b/configs/envs/.env.optimism
new file mode 100644
index 0000000000..8fd9911afc
--- /dev/null
+++ b/configs/envs/.env.optimism
@@ -0,0 +1,69 @@
+# Set of ENVs for OP Mainnet network explorer
+# https://optimism.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=optimism"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={ "id": "749780", "width": "728", "height": "90" }
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={ "id": "749779", "width": "320", "height": "100" }
+NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER=adbutler
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=optimism.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swap','icon':'swap','dappId':'velodrome'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'},{'text':'Get gas','icon':'gas','dappId':'smol-refuel'}]
+NEXT_PUBLIC_FAULT_PROOF_ENABLED=true
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/optimism-mainnet.json
+NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/optimism.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x97f34a4cf685e365460dd38dbe16e092d8e4cc4b6ac779e3abcf4c18df6b1329
+NEXT_PUBLIC_HAS_USER_OPS=true
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs', 'coin_price', 'market_cap', 'secondary_coin_price']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=linear-gradient(90deg, rgb(232, 52, 53) 0%, rgb(139, 28, 232) 100%)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgb(255, 255, 255)
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_LOGOUT_URL=https://optimism-goerli.us.auth0.com/v2/logout
+NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/maxaleks/0d18fc309ff499075127b364cc69306d/raw/2a51f961a8c1b9f884f2ab7eed79d4b69330e1ae/peanut_protocol_banner.html
+NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://optimism.blockscout.com/apps/peanut-protocol
+NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
+NEXT_PUBLIC_MARKETPLACE_ENABLED=true
+NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-security-reports/default.json
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_METASUITES_ENABLED=true
+NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG=[{'name': 'zerion', 'dapp_id': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview?utm_source=blockscout&utm_medium=address', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'}]
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/apps']
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/optimism/pools'}}, {'title':'Tenderly','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/optimistic'}},{'title':'3xpl','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/3xpl.png','baseUrl':'https://3xpl.com/','paths':{'tx':'/optimism/transaction','address':'/optimism/address'}}]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism.svg
+NEXT_PUBLIC_NETWORK_ID=10
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/optimism.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/optimism.svg
+NEXT_PUBLIC_NETWORK_NAME=OP Mainnet
+NEXT_PUBLIC_NETWORK_RPC_URL=https://mainnet.optimism.io
+NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL=OP
+NEXT_PUBLIC_NETWORK_SHORT_NAME=OP Mainnet
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/optimism-mainnet.png
+NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://optimism.drpc.org?ref=559183','text':'Public RPC'}]
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth.blockscout.com/
+NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://app.optimism.io/bridge/withdraw
+NEXT_PUBLIC_ROLLUP_TYPE=optimistic
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-optimism.safe.global
+NEXT_PUBLIC_STATS_API_HOST=https://stats-optimism-mainnet.k8s-prod-1.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_WEB3_WALLETS=['token_pocket', 'metamask']
\ No newline at end of file
diff --git a/configs/envs/.env.optimism_celestia b/configs/envs/.env.optimism_celestia
new file mode 100644
index 0000000000..650975e1c1
--- /dev/null
+++ b/configs/envs/.env.optimism_celestia
@@ -0,0 +1,46 @@
+# Set of ENVs for OP Celestia Raspberry network explorer
+# https://opcelestia-raspberry.gelatoscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=optimism_celestia"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={'id':'721628','width':'728','height':'90'}
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={'id':'721627','width':'300','height':'100'}
+NEXT_PUBLIC_AD_BANNER_PROVIDER=adbutler
+NEXT_PUBLIC_AD_TEXT_PROVIDER=none
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=opcelestia-raspberry.gelatoscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/opcelestia-raspberry.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x0f5b54de81848d8d8baa02c69030037218a2b4df622d64a2a429e11721606656
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgba(255, 0, 0, 1)
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=ETH
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism.svg
+NEXT_PUBLIC_NETWORK_ID=123420111
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/optimism.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/optimism.svg
+NEXT_PUBLIC_NETWORK_NAME=OP Celestia Raspberry
+NEXT_PUBLIC_NETWORK_RPC_URL=https://rpc.opcelestia-raspberry.gelato.digital
+NEXT_PUBLIC_NETWORK_SHORT_NAME=opcelestia-raspberry
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth-sepolia.blockscout.com/
+NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://bridge.gelato.network/bridge/opcelestia-raspberry
+NEXT_PUBLIC_ROLLUP_TYPE=optimistic
+NEXT_PUBLIC_STATS_API_HOST=https://stats-opcelestia-raspberry.k8s.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_WEB3_WALLETS=none
\ No newline at end of file
diff --git a/configs/envs/.env.optimism_sepolia b/configs/envs/.env.optimism_sepolia
new file mode 100644
index 0000000000..146b064965
--- /dev/null
+++ b/configs/envs/.env.optimism_sepolia
@@ -0,0 +1,54 @@
+# Set of ENVs for OP Sepolia network explorer
+# https://optimism-sepolia.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=optimism_sepolia"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=optimism-sepolia.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_FAULT_PROOF_ENABLED=true
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/optimism-sepolia.json
+NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/optimism.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x59d26836041ab35169bdce431d68d070b7b8acb589fa52e126e6c828b6ece5e9
+NEXT_PUBLIC_HAS_USER_OPS=true
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=linear-gradient(90deg, rgb(232, 52, 53) 0%, rgb(139, 28, 232) 100%)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgb(255, 255, 255)
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_LOGOUT_URL=https://optimism-goerli.us.auth0.com/v2/logout
+NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE=<p>Build faster with the <a href="https://console.optimism.io" target="_blank">Superchain Dev Console</a>: Get testnet ETH and tools to help you build, launch, and grow your app on the Superchain</p>
+NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Tenderly','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/optimistic-sepolia'}}]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism.svg
+NEXT_PUBLIC_NETWORK_ID=11155420
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/optimism.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/optimism.svg
+NEXT_PUBLIC_NETWORK_NAME=OP Sepolia
+NEXT_PUBLIC_NETWORK_RPC_URL=https://sepolia.optimism.io
+NEXT_PUBLIC_NETWORK_SHORT_NAME=OP Sepolia
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth-sepolia.blockscout.com/
+NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://app.optimism.io/bridge/withdraw
+NEXT_PUBLIC_ROLLUP_TYPE=optimistic
+NEXT_PUBLIC_STATS_API_HOST=https://stats-optimism-sepolia.k8s.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_WEB3_WALLETS=['token_pocket', 'metamask']
\ No newline at end of file
diff --git a/configs/envs/.env.poa_core b/configs/envs/.env.poa_core
deleted file mode 100644
index f874d89f5d..0000000000
--- a/configs/envs/.env.poa_core
+++ /dev/null
@@ -1,40 +0,0 @@
-# Set of ENVs for POA network explorer
-# https://blockscout.com/poa/core/
-
-# app configuration
-NEXT_PUBLIC_APP_PROTOCOL=http
-NEXT_PUBLIC_APP_HOST=localhost
-NEXT_PUBLIC_APP_PORT=3000
-
-# blockchain parameters
-NEXT_PUBLIC_NETWORK_NAME=POA
-NEXT_PUBLIC_NETWORK_SHORT_NAME=POA
-NEXT_PUBLIC_NETWORK_ID=99
-NEXT_PUBLIC_NETWORK_CURRENCY_NAME=POA
-NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=POA
-NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
-
-# api configuration
-NEXT_PUBLIC_API_HOST=blockscout.com
-NEXT_PUBLIC_API_BASE_PATH=/poa/core
-
-# ui config
-## homepage
-NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cap']
-NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND='no-repeat bottom 20% right 0px/100% url(https://neon-labs.org/images/index/banner.jpg)'
-NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=\#DCFE76
-## sidebar
-NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/eth-goerli.json
-NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-logos/poa.svg
-NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-icons/poa.svg
-## footer
-## misc
-NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/poa/core/transaction','address':'/ethereum/poa/core/address','block':'/ethereum/poa/core/block'}}]
-
-# app features
-NEXT_PUBLIC_APP_ENV=development
-NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
-NEXT_PUBLIC_AUTH_URL=http://localhost:3000
-NEXT_PUBLIC_LOGOUT_URL=https://blockscoutcom.us.auth0.com/v2/logout
-NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
-NEXT_PUBLIC_NETWORK_RPC_URL=https://core.poa.network
diff --git a/configs/envs/.env.polygon b/configs/envs/.env.polygon
index 2cc023145d..ddd94291fc 100644
--- a/configs/envs/.env.polygon
+++ b/configs/envs/.env.polygon
@@ -1,45 +1,47 @@
-# Set of ENVs for Ethereum network explorer
-# https://polygon.blockscout.com/
+# Set of ENVs for Polygon Mainnet network explorer
+# https://polygon.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=polygon"
 
-# app configuration
+# Local ENVs
 NEXT_PUBLIC_APP_PROTOCOL=http
 NEXT_PUBLIC_APP_HOST=localhost
 NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
-# blockchain parameters
-NEXT_PUBLIC_NETWORK_NAME=Polygon
-NEXT_PUBLIC_NETWORK_SHORT_NAME=Polygon
-NEXT_PUBLIC_NETWORK_ID=137
-NEXT_PUBLIC_NETWORK_CURRENCY_NAME=MATIC
-NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=MATIC
-NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
-NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
-NEXT_PUBLIC_NETWORK_RPC_URL=https://polygon.blockpi.network/v1/rpc/public
-
-# api configuration
-NEXT_PUBLIC_API_HOST=polygon.blockscout.com
+# Instance ENVs
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={ "id": "632019", "width": "728", "height": "90" }
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={ "id": "632018", "width": "320", "height": "100" }
+NEXT_PUBLIC_AD_BANNER_PROVIDER=adbutler
 NEXT_PUBLIC_API_BASE_PATH=/
-
-# ui config
-## homepage
-NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
-NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND="linear-gradient(122deg, rgba(162, 41, 197, 1) 0%, rgba(123, 63, 228, 1) 100%)"
-NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR="rgba(255, 255, 255, 1)"
-## sidebar
+NEXT_PUBLIC_API_HOST=polygon.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
 NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/polygon-mainnet.json
-NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/polygon.svg
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x25fcb396fc8652dcd0040f677a1dcc6fecff390ecafc815894379a3f254f1aa9
+NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS=true
+NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS=true
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=linear-gradient(122deg, rgba(162, 41, 197, 1) 0%, rgba(123, 63, 228, 1) 100%)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgba(255, 255, 255, 1)
+NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_METASUITES_ENABLED=true
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=MATIC
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=MATIC
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/polygon_pos/pools'}}]
 NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/polygon-short.svg
-## footer
-## views
-## misc
-
-# app features
-NEXT_PUBLIC_APP_ENV=development
-# NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x97fa753626b8d44011d0b9f9a947c735f20b6e895efdee49d7cda76a50001017
-NEXT_PUBLIC_HAS_BEACON_CHAIN=false
-# NEXT_PUBLIC_STATS_API_HOST=https://stats-rsk-testnet.k8s.blockscout.com
+NEXT_PUBLIC_NETWORK_ID=137
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/polygon.svg
+NEXT_PUBLIC_NETWORK_NAME=Polygon Mainnet
+NEXT_PUBLIC_NETWORK_RPC_URL=https://polygon.blockpi.network/v1/rpc/public
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Polygon
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/polygon-mainnet.png
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-polygon.safe.global
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
 NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
-NEXT_PUBLIC_WEB3_WALLETS=['token_pocket','metamask']
-
-#meta
-NEXT_PUBLIC_OG_IMAGE_URL=https://github.com/blockscout/frontend-configs/blob/main/configs/og-images/polygon-mainnet.png?raw=true
+NEXT_PUBLIC_WEB3_WALLETS=['token_pocket', 'metamask']
\ No newline at end of file
diff --git a/configs/envs/.env.pw b/configs/envs/.env.pw
index 999347058b..a984b9f6fb 100644
--- a/configs/envs/.env.pw
+++ b/configs/envs/.env.pw
@@ -17,6 +17,7 @@ NEXT_PUBLIC_IS_TESTNET=true
 NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
 
 # api configuration
+NEXT_PUBLIC_API_PROTOCOL=http
 NEXT_PUBLIC_API_HOST=localhost
 NEXT_PUBLIC_API_PORT=3003
 NEXT_PUBLIC_API_BASE_PATH=/
@@ -24,8 +25,6 @@ NEXT_PUBLIC_API_BASE_PATH=/
 # ui config
 ## homepage
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cap']
-NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME=true
-NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER=true
 ## sidebar
 ## footer
 NEXT_PUBLIC_GIT_TAG=v1.0.11
@@ -39,16 +38,22 @@ NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE=
 # app features
 NEXT_PUBLIC_APP_ENV=testing
 NEXT_PUBLIC_APP_INSTANCE=pw
+NEXT_PUBLIC_MARKETPLACE_ENABLED=true
 NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://localhost:3000/marketplace-config.json
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://localhost:3000/marketplace-submit-form
-NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK=false
-NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK=false
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://localhost:3000/marketplace-suggest-ideas-form
 NEXT_PUBLIC_AD_BANNER_PROVIDER=slise
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
 NEXT_PUBLIC_AUTH_URL=http://localhost:3100
 NEXT_PUBLIC_LOGOUT_URL=https://blockscoutcom.us.auth0.com/v2/logout
 NEXT_PUBLIC_AUTH0_CLIENT_ID=xxx
-NEXT_PUBLIC_STATS_API_HOST=https://localhost:3004
-NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://localhost:3005
-NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://localhost:3006
+NEXT_PUBLIC_STATS_API_HOST=http://localhost:3004
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=http://localhost:3005
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=http://localhost:3006
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=http://localhost:3007
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=http://localhost:3008
 NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=xxx
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=xxx
+NEXT_PUBLIC_VIEWS_ADDRESS_FORMAT=['base16','bech32']
+NEXT_PUBLIC_VIEWS_ADDRESS_BECH_32_PREFIX=tom
+NEXT_PUBLIC_HELIA_VERIFIED_FETCH_ENABLED=false
\ No newline at end of file
diff --git a/configs/envs/.env.rootstock b/configs/envs/.env.rootstock
deleted file mode 100644
index ad4bcfb880..0000000000
--- a/configs/envs/.env.rootstock
+++ /dev/null
@@ -1,45 +0,0 @@
-# Set of ENVs for Ethereum network explorer
-# https://eth.blockscout.com/
-
-# app configuration
-NEXT_PUBLIC_APP_PROTOCOL=http
-NEXT_PUBLIC_APP_HOST=localhost
-NEXT_PUBLIC_APP_PORT=3000
-
-# blockchain parameters
-NEXT_PUBLIC_NETWORK_NAME=Rootstock Testnet
-NEXT_PUBLIC_NETWORK_SHORT_NAME=Rootstock
-NEXT_PUBLIC_NETWORK_ID=31
-NEXT_PUBLIC_NETWORK_CURRENCY_NAME=tRBTC
-NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=tRBTC
-NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
-NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
-NEXT_PUBLIC_NETWORK_RPC_URL=https://public-node.testnet.rsk.co
-
-# api configuration
-NEXT_PUBLIC_API_HOST=rootstock-testnet.blockscout.com
-NEXT_PUBLIC_API_BASE_PATH=/
-
-# ui config
-## homepage
-NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
-NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND="rgb(255, 145, 0)"
-## sidebar
-NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/rsk-testnet.json
-NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/rootstock.svg
-NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/rootstock-short.svg
-## footer
-NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/rootstock.json
-## views
-NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS=['burnt_fees','total_reward','nonce']
-## misc
-
-# app features
-NEXT_PUBLIC_APP_ENV=development
-NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x97fa753626b8d44011d0b9f9a947c735f20b6e895efdee49d7cda76a50001017
-NEXT_PUBLIC_HAS_BEACON_CHAIN=false
-NEXT_PUBLIC_STATS_API_HOST=https://stats-rsk-testnet.k8s.blockscout.com
-NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
-
-#meta
-NEXT_PUBLIC_OG_IMAGE_URL=https://github.com/blockscout/frontend-configs/blob/main/configs/og-images/rootstock-testnet.png?raw=true
diff --git a/configs/envs/.env.rootstock_testnet b/configs/envs/.env.rootstock_testnet
new file mode 100644
index 0000000000..06368491ef
--- /dev/null
+++ b/configs/envs/.env.rootstock_testnet
@@ -0,0 +1,46 @@
+# Set of ENVs for Rootstock Testnet network explorer
+# https://rootstock-testnet.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=rootstock_testnet"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=rootstock-testnet.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/rsk-testnet.json
+NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/rootstock.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x98b25020fa6551a439dfee58fb16ca11d9e93d4cdf15f3f07b697cf08cf11643
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgb(255, 145, 0)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgb(255, 255, 255)
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_LOGOUT_URL=https://rootstock.us.auth0.com/v2/logout
+NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=tRBTC
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=tRBTC
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Tenderly','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/rsk-testnet'}}]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/rootstock-short.svg
+NEXT_PUBLIC_NETWORK_ID=31
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/rootstock.svg
+NEXT_PUBLIC_NETWORK_NAME=Rootstock Testnet
+NEXT_PUBLIC_NETWORK_RPC_URL=https://public-node.testnet.rsk.co
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Rootstock
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/rootstock-testnet.png
+NEXT_PUBLIC_STATS_API_HOST=https://stats-rsk-testnet.k8s.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS=['burnt_fees','total_reward','nonce']
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_HOMEPAGE_STATS=['total_blocks','average_block_time','total_txs','wallet_addresses','gas_tracker','btc_locked']
\ No newline at end of file
diff --git a/configs/envs/.env.scroll_sepolia b/configs/envs/.env.scroll_sepolia
new file mode 100644
index 0000000000..c29abc0442
--- /dev/null
+++ b/configs/envs/.env.scroll_sepolia
@@ -0,0 +1,41 @@
+# Set of ENVs for Scroll Sepolia Testnet network explorer
+# https://scroll-sepolia.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=scroll_sepolia"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=scroll-sepolia.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/scroll-testnet.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xa0d22caf6217a488b1e97b646c5ed88e8a3020a607bcd1f3fe8d4c430bb19ad5
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG={'background':['rgba(255, 238, 218, 1)'],'text_color':['rgba(25, 6, 2, 1)']}
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/scroll.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/scroll-dark.svg
+NEXT_PUBLIC_NETWORK_ID=534351
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/scroll.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/scroll-dark.svg
+NEXT_PUBLIC_NETWORK_NAME=Scroll Sepolia Testnet
+NEXT_PUBLIC_NETWORK_RPC_URL=https://sepolia-rpc.scroll.io
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Scroll Sepolia Testnet
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/scroll-testnet.png
+NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=6Ld0iT8aAAAAAJdju0CmAwGjW7JTDvIw-Q5pwt5T
+NEXT_PUBLIC_STATS_API_HOST=https://stats-scroll-sepolia.k8s-prod-2.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_ROLLUP_TYPE=scroll
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth-sepolia.blockscout.com/
\ No newline at end of file
diff --git a/configs/envs/.env.sepolia b/configs/envs/.env.sepolia
deleted file mode 100644
index b54adc0775..0000000000
--- a/configs/envs/.env.sepolia
+++ /dev/null
@@ -1,60 +0,0 @@
-# Set of ENVs for Sepolia testnet network explorer
-# https://eth-sepolia.blockscout.com/
-
-# app configuration
-NEXT_PUBLIC_APP_PROTOCOL=http
-NEXT_PUBLIC_APP_HOST=localhost
-NEXT_PUBLIC_APP_PORT=3000
-
-# blockchain parameters
-NEXT_PUBLIC_NETWORK_NAME=Sepolia
-NEXT_PUBLIC_NETWORK_SHORT_NAME=Sepolia
-NEXT_PUBLIC_NETWORK_ID=11155111
-NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
-NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
-NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
-NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
-NEXT_PUBLIC_NETWORK_RPC_URL=https://eth-sepolia.public.blastapi.io
-NEXT_PUBLIC_IS_TESTNET=true
-
-# api configuration
-NEXT_PUBLIC_API_HOST=eth-sepolia.blockscout.com
-NEXT_PUBLIC_API_BASE_PATH=/
-
-# ui config
-## homepage
-NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
-NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND='rgba(51, 53, 67, 1)'
-NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR='rgba(165, 252, 122, 1)'
-## sidebar
-NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/eth-sepolia.json
-NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/sepolia.svg
-NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/sepolia.svg
-NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/sepolia.png
-NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/sepolia.png
-NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://sepolia.drpc.org?ref=559183','text':'Public RPC'}]
-## footer
-NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/sepolia.json
-##views
-NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES=[{'name':'LooksRare','collection_url':'https://sepolia.looksrare.org/collections/{hash}','instance_url':'https://sepolia.looksrare.org/collections/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/looks-rare.png'}]
-## misc
-NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Etherscan','baseUrl':'https://sepolia.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}},{'title':'Tenderly','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/sepolia'}}]
-
-# app features
-NEXT_PUBLIC_APP_ENV=development
-NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xbf69c7abc4fee283b59a9633dadfdaedde5c5ee0fba3e80a08b5b8a3acbd4363
-NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
-NEXT_PUBLIC_AUTH_URL=http://localhost:3000
-NEXT_PUBLIC_LOGOUT_URL=https://blockscout-goerli.us.auth0.com/v2/logout
-NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/eth-goerli.json
-NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/shrqUAcjgGJ4jU88C
-NEXT_PUBLIC_STATS_API_HOST=https://stats-sepolia.k8s-dev.blockscout.com
-NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
-NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
-NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
-NEXT_PUBLIC_WEB3_WALLETS=['token_pocket','metamask']
-NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
-NEXT_PUBLIC_HAS_BEACON_CHAIN=true
-
-#meta
-NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/sepolia-testnet.png
diff --git a/configs/envs/.env.shibarium b/configs/envs/.env.shibarium
new file mode 100644
index 0000000000..dde91dbeb8
--- /dev/null
+++ b/configs/envs/.env.shibarium
@@ -0,0 +1,64 @@
+# Set of ENVs for Shibarium network explorer
+# https://www.shibariumscan.io
+# This is an auto-generated file. To update all values, run "yarn preset:sync --name=shibarium"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={ "id": "727504", "width": "728", "height": "90" }
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={ "id": "727507", "width": "320", "height": "100" }
+NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER=adbutler
+NEXT_PUBLIC_AD_BANNER_PROVIDER=hype
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=www.shibariumscan.io
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_APP_INSTANCE=shibarium_mainnet
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Get gas','icon':'gas','dappId':'smol-refuel'}]
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/shibarium-mainnet.json
+NEXT_PUBLIC_GAS_REFUEL_PROVIDER_CONFIG={'name': 'Need gas?', 'url_template': 'https://smolrefuel.com/?outboundChain={chainId}&partner=blockscout&utm_source=blockscout&disableBridges=true', 'dapp_id': 'smol-refuel', 'logo': 'https://blockscout-content.s3.amazonaws.com/smolrefuel-logo-action-button.png'}
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xce531d29c0c469fb00b443b8091b8c059b4f13d7e025dd0ef843401d02b9a1a9
+NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS=true
+NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS=true
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs', 'coin_price', 'market_cap']
+NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG={'background':['linear-gradient(180deg, rgba(224, 111, 44, 1) 0%, rgba(228, 144, 52, 1) 100%)'],'text_color':['rgba(255, 255, 255, 1)']}
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_LOGOUT_URL=https://shibarium.us.auth0.com/v2/logout
+NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE=<p>Participated in our recent Blockscout activities? <a href="https://badges.blockscout.com?utm_source=instance&utm_medium=shibarium" target="_blank">Check your eligibility</a> and claim your NFT Scout badges. More exciting things are coming soon!</p>
+NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
+NEXT_PUBLIC_MARKETPLACE_ENABLED=true
+NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY=patbqG4V2CI998jAq.9810c58c9de973ba2650621c94559088cbdfa1a914498e385621ed035d33c0d0
+NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID=appGkvtmKI7fXE4Vs
+NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-security-reports/default.json
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/apps']
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=BONE
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=BONE
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/shibarium/pools'}}]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/shibarium-short.png
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/shibarium-short.png
+NEXT_PUBLIC_NETWORK_ID=109
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/shibarium-light.png
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/shibarium-dark.png
+NEXT_PUBLIC_NETWORK_NAME=Shibarium
+NEXT_PUBLIC_NETWORK_RPC_URL=https://www.shibrpc.com
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Shibarium
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/shibarium-mainnet.png
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth.blockscout.com/
+NEXT_PUBLIC_ROLLUP_TYPE=shibarium
+NEXT_PUBLIC_STATS_API_HOST=https://stats-shibarium-mainnet.k8s-prod-2.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS=['miner']
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
\ No newline at end of file
diff --git a/configs/envs/.env.stability_testnet b/configs/envs/.env.stability_testnet
new file mode 100644
index 0000000000..e96ca8462d
--- /dev/null
+++ b/configs/envs/.env.stability_testnet
@@ -0,0 +1,55 @@
+# Set of ENVs for Stability Testnet network explorer
+# https://stability-testnet.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=stability_testnet"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=stability-testnet.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com/
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/stability-testnet.json
+NEXT_PUBLIC_GAS_TRACKER_ENABLED=false
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x38125475465a4113a216448af2c9570d0e2c25ef313f8cfbef74f1daad7a97b5
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgba(46, 51, 81, 1)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgba(122, 235, 246, 1)
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_LOGOUT_URL=https://blockscout-stability.us.auth0.com/v2/logout
+NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
+NEXT_PUBLIC_MARKETPLACE_ENABLED=true
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=FREE
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=FREE
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/stability-short.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/stability-short-dark.svg
+NEXT_PUBLIC_NETWORK_ID=20180427
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/stability.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/stability-dark.svg
+NEXT_PUBLIC_NETWORK_NAME=Stability Testnet
+NEXT_PUBLIC_NETWORK_RPC_URL=https://free.testnet.stabilityprotocol.com
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Stability Testnet
+NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/stability.png
+NEXT_PUBLIC_STATS_API_HOST=https://stats-stability-testnet.k8s.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE=stability
+NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS=['top_accounts']
+NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS=['burnt_fees','total_reward']
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS=['fee_per_gas']
+NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS=['value','fee_currency','gas_price','gas_fees','burnt_fees']
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
\ No newline at end of file
diff --git a/configs/envs/.env.zilliqa_prototestnet b/configs/envs/.env.zilliqa_prototestnet
new file mode 100644
index 0000000000..00730e8999
--- /dev/null
+++ b/configs/envs/.env.zilliqa_prototestnet
@@ -0,0 +1,41 @@
+# Set of ENVs for Zilliqa EVM proto-testnet network explorer
+# https://zilliqa-prototestnet.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=zilliqa_prototestnet"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+NEXT_PUBLIC_VIEWS_CONTRACT_LANGUAGE_FILTERS=['solidity','vyper','yul','scilla']
+
+
+# Instance ENVs
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=zilliqa-prototestnet.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x3d1ded3a7924cd3256a4b1a447c9bfb194f54b9a8ceb441edb8bb01563b516db
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG={'background':['linear-gradient(90deg, rgba(0, 208, 198, 1) 0.06%, rgba(43, 146, 151, 1) 99.97%)','linear-gradient(90deg, rgba(0, 208, 198, 1) 0.06%, rgba(43, 146, 151, 1) 50.02%, rgba(0, 0, 0, 1) 99.97%)'],'text_color':['rgba(255, 255, 255, 1)','rgba(255, 255, 255, 1)'],'button':{'_default':{'background':['rgba(38, 6, 124, 1)']},'_hover':{'background':['rgba(17, 4, 87, 1)']}}}
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=ZIL
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ZIL
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/zilliqa.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/zilliqa-dark.svg
+NEXT_PUBLIC_NETWORK_ID=33103
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/zilliqa.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/zilliqa-dark.svg
+NEXT_PUBLIC_NETWORK_NAME=Zilliqa EVM proto-testnet
+NEXT_PUBLIC_NETWORK_RPC_URL=https://api.zq2-prototestnet.zilliqa.com
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Zilliqa EVM proto-testnet
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/zilliqa.png
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_ADDRESS_BECH_32_PREFIX=zil
+NEXT_PUBLIC_VIEWS_ADDRESS_FORMAT=["base16", "bech32"]
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
\ No newline at end of file
diff --git a/configs/envs/.env.zkevm b/configs/envs/.env.zkevm
index 91d7172d3f..65db320a6b 100644
--- a/configs/envs/.env.zkevm
+++ b/configs/envs/.env.zkevm
@@ -1,48 +1,48 @@
-# Set of ENVs for zkevm (dev only)
-# https://eth.blockscout.com/
+# Set of ENVs for Polygon zkEVM network explorer
+# https://zkevm.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=zkevm"
 
-# app configuration
+# Local ENVs
 NEXT_PUBLIC_APP_PROTOCOL=http
 NEXT_PUBLIC_APP_HOST=localhost
 NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
-# blockchain parameters
-NEXT_PUBLIC_NETWORK_NAME=zkEVM
-NEXT_PUBLIC_NETWORK_SHORT_NAME=zkEVM
-NEXT_PUBLIC_NETWORK_ID=1
-NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
-NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
-NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
-NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
-NEXT_PUBLIC_NETWORK_RPC_URL=https://eth.llamarpc.com
-
-# api configuration
-NEXT_PUBLIC_API_HOST=65.109.173.70
-NEXT_PUBLIC_API_PORT=80
-NEXT_PUBLIC_API_PROTOCOL=http
+# Instance ENVs
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={ "id": "632019", "width": "728", "height": "90" }
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={ "id": "632018", "width": "320", "height": "100" }
+NEXT_PUBLIC_AD_BANNER_PROVIDER=adbutler
 NEXT_PUBLIC_API_BASE_PATH=/
-
-# ui config
-## homepage
+NEXT_PUBLIC_API_HOST=zkevm.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/zkevm.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x25fcb396fc8652dcd0040f677a1dcc6fecff390ecafc815894379a3f254f1aa9
+NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS=true
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
-## sidebar
-NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/eth.json
-## footer
-## misc
-NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Etherscan','baseUrl':'https://etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]
-# app features
-NEXT_PUBLIC_APP_INSTANCE=local
-NEXT_PUBLIC_APP_ENV=development
-NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
-NEXT_PUBLIC_HAS_BEACON_CHAIN=true
-NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
-# NEXT_PUBLIC_AUTH_URL=http://localhost:3000
-NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
-NEXT_PUBLIC_LOGOUT_URL=https://blockscoutcom.us.auth0.com/v2/logout
-NEXT_PUBLIC_STATS_API_HOST=https://stats-eth-main.k8s.blockscout.com
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=linear-gradient(122deg, rgba(162, 41, 197, 1) 0%, rgba(123, 63, 228, 1) 100%)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgba(255, 255, 255, 1)
+NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_METASUITES_ENABLED=true
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=MATIC
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=MATIC
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/polygon-zkevm/pools'}}]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/polygon-short.svg
+NEXT_PUBLIC_NETWORK_ID=1101
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/polygon.svg
+NEXT_PUBLIC_NETWORK_NAME=Polygon zkEVM
+NEXT_PUBLIC_NETWORK_RPC_URL=https://zkevm-rpc.com
+NEXT_PUBLIC_NETWORK_SHORT_NAME=zkEVM
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth.blockscout.com/
+NEXT_PUBLIC_ROLLUP_TYPE=zkEvm
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-zkevm.safe.global
+NEXT_PUBLIC_STATS_API_HOST=https://stats-polygon-zkevm.k8s-prod-1.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
 NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
-NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
-NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
-# rollup
-NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK=true
-NEXT_PUBLIC_L1_BASE_URL=http://65.109.173.70:81
+NEXT_PUBLIC_WEB3_WALLETS=['token_pocket', 'metamask']
\ No newline at end of file
diff --git a/configs/envs/.env.zksync b/configs/envs/.env.zksync
new file mode 100644
index 0000000000..f7b18c0548
--- /dev/null
+++ b/configs/envs/.env.zksync
@@ -0,0 +1,52 @@
+# Set of ENVs for ZkSync Era network explorer
+# https://zksync.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=zksync"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_VIEWS_CONTRACT_EXTRA_VERIFICATION_METHODS=none
+
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=zksync.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/zksync.json
+NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/zksync.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x79c7802ccdf3be5a49c47cc751aad351b0027e8275f6f54878eda50ee559a648
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgba(53, 103, 246, 1)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgba(255, 255, 255, 1)
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_LOGOUT_URL=https://zksync.us.auth0.com/v2/logout
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_METASUITES_ENABLED=true
+NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG=[{'name': 'zerion', 'dapp_id': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview?utm_source=blockscout&utm_medium=address', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'}]
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=ETH
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/zksync/pools'}},{'title':'L2scan','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/zksync.png','baseUrl':'https://zksync-era.l2scan.co/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/zksync-short.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/zksync-short-dark.svg
+NEXT_PUBLIC_NETWORK_ID=324
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/zksync.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/zksync-dark.svg
+NEXT_PUBLIC_NETWORK_NAME=ZkSync Era
+NEXT_PUBLIC_NETWORK_RPC_URL=https://mainnet.era.zksync.io
+NEXT_PUBLIC_NETWORK_SHORT_NAME=ZkSync Era
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/zksync.png
+NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://zksync.drpc.org?ref=559183','text':'Public RPC'}]
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth.blockscout.com/
+NEXT_PUBLIC_ROLLUP_TYPE=zkSync
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-zksync.safe.global
+NEXT_PUBLIC_STATS_API_HOST=https://stats-zksync-era-mainnet.k8s-prod-2.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
\ No newline at end of file
diff --git a/configs/envs/.env.zora b/configs/envs/.env.zora
new file mode 100644
index 0000000000..de5a551bd1
--- /dev/null
+++ b/configs/envs/.env.zora
@@ -0,0 +1,60 @@
+# Set of ENVs for Zora Mainnet network explorer
+# https://explorer.zora.energy
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=zora"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_AD_BANNER_PROVIDER=none
+NEXT_PUBLIC_AD_TEXT_PROVIDER=none
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=explorer.zora.energy
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swap','icon':'swap','dappId':'uniswap'}]
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/zora.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x6d54c0226a57f5bc854f8aa589bb15113388f984f318c9e1b2722115e4e35873
+NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS=true
+NEXT_PUBLIC_HAS_USER_OPS=true
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=linear-gradient(89deg, rgb(63, 36, 22) 0.56%, rgb(44, 56, 105) 98.31%)
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_LOGOUT_URL=https://zora-blockscout.us.auth0.com/v2/logout
+NEXT_PUBLIC_MARKETPLACE_ENABLED=true
+NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY=patbqG4V2CI998jAq.9810c58c9de973ba2650621c94559088cbdfa1a914498e385621ed035d33c0d0
+NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID=appGkvtmKI7fXE4Vs
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/apps']
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/zora-network/pools'}}]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/zora.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/zora-dark.svg
+NEXT_PUBLIC_NETWORK_ID=7777777
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/zora.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/zora-dark.svg
+NEXT_PUBLIC_NETWORK_NAME=Zora Mainnet
+NEXT_PUBLIC_NETWORK_RPC_URL=https://rpc.zora.energy
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Zora Mainnet
+NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/zora-mainnet.png
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth.blockscout.com/
+NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://bridge.zora.energy
+NEXT_PUBLIC_ROLLUP_TYPE=optimistic
+NEXT_PUBLIC_STATS_API_HOST=https://stats-l2-zora-mainnet.k8s-prod-1.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG=[{'name': 'zerion', 'dapp_id': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview?utm_source=blockscout&utm_medium=address', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'}]
+NEXT_PUBLIC_ADDRESS_USERNAME_TAG={'api_url_template': 'https://api.zora.co/discover/user/{address}', 'tag_link_template': 'httpszora.co/{username}', 'tag_icon': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/zora.svg', 'tag_bg_color': 'rgba(0,0,0)', 'tag_text_color': 'rgba(255,255,255)'}
diff --git a/deploy/helmfile.yaml b/deploy/helmfile.yaml
index 0e401dce3d..6052eda969 100644
--- a/deploy/helmfile.yaml
+++ b/deploy/helmfile.yaml
@@ -16,28 +16,6 @@ repositories:
     url: https://bedag.github.io/helm-charts
 
 releases:
-  # Deploy front-main
-  - name: bs-stack
-    chart: blockscout/blockscout-stack
-    version: 1.2.*
-    namespace: front-main
-    labels:
-      app: front
-    values:
-    - values/main/values.yaml
-    - global:
-        env: "main"
-  # Deploy l2-optimism-goerli
-  - name: bs-stack
-    chart: blockscout/blockscout-stack
-    version: 1.2.*
-    namespace: l2-optimism-goerli
-    labels:
-      app: l2-optimism-goerli
-    values:
-    - values/l2-optimism-goerli/values.yaml
-    - global:
-        env: "optimism-goerli"
   # Deploy review L2
   - name: reg-secret
     chart: bedag/raw
@@ -55,7 +33,7 @@ releases:
           type: kubernetes.io/dockerconfigjson
   - name: bs-stack
     chart: blockscout/blockscout-stack
-    version: 1.2.*
+    version: 1.*.*
     namespace: review-l2-{{ requiredEnv "GITHUB_REF_NAME_SLUG" }}
     labels:
       app: review-l2-{{ requiredEnv "GITHUB_REF_NAME_SLUG" }}
@@ -80,7 +58,7 @@ releases:
           type: kubernetes.io/dockerconfigjson
   - name: bs-stack
     chart: blockscout/blockscout-stack
-    version: 1.2.*
+    version: 1.*.*
     namespace: review-{{ requiredEnv "GITHUB_REF_NAME_SLUG" }}
     labels:
       app: review-{{ requiredEnv "GITHUB_REF_NAME_SLUG" }}
diff --git a/deploy/scripts/download_assets.sh b/deploy/scripts/download_assets.sh
index f80d043ad0..f53bbb2bea 100755
--- a/deploy/scripts/download_assets.sh
+++ b/deploy/scripts/download_assets.sh
@@ -16,6 +16,9 @@ ASSETS_DIR="$1"
 ASSETS_ENVS=(
     "NEXT_PUBLIC_MARKETPLACE_CONFIG_URL"
     "NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL"
+    "NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL"
+    "NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL"
+    "NEXT_PUBLIC_MARKETPLACE_GRAPH_LINKS_URL"
     "NEXT_PUBLIC_FEATURED_NETWORKS"
     "NEXT_PUBLIC_FOOTER_LINKS"
     "NEXT_PUBLIC_NETWORK_LOGO"
@@ -47,10 +50,14 @@ get_target_filename() {
         # Extract the extension from the filename
         local extension="${filename##*.}"
     else
-        # Remove query parameters from the URL and get the filename
-        local filename=$(basename "${url%%\?*}")
-        # Extract the extension from the filename
-        local extension="${filename##*.}"
+        if [[ "$url" == http* ]]; then
+            # Remove query parameters from the URL and get the filename
+            local filename=$(basename "${url%%\?*}")
+            # Extract the extension from the filename
+            local extension="${filename##*.}"
+        else
+            local extension="json"
+        fi
     fi
 
     # Convert the extension to lowercase
@@ -78,16 +85,31 @@ download_and_save_asset() {
         # Copy the local file to the destination
         cp "${url#file://}" "$destination"
     else
-        # Download the asset using curl
-        curl -s -o "$destination" "$url"
+        # Check if the value is a URL
+        if [[ "$url" == http* ]]; then
+            # Download the asset using curl
+            curl -s -o "$destination" "$url"
+        else
+            # Convert single-quoted JSON-like content to valid JSON
+            json_content=$(echo "${!env_var}" | sed "s/'/\"/g")
+
+            # Save the JSON content to a file
+            echo "$json_content" > "$destination"
+        fi
+    fi
+
+    if [[ "$url" == file://* ]] || [[ "$url" == http* ]]; then
+        local source_name=$url
+    else
+        local source_name="raw input"
     fi
 
     # Check if the download was successful
     if [ $? -eq 0 ]; then
-        echo "   [+] $env_var: Successfully saved file from $url to $destination."
+        echo "   [+] $env_var: Successfully saved file from $source_name to $destination."
         return 0
     else
-        echo "   [-] $env_var: Failed to save file from $url."
+        echo "   [-] $env_var: Failed to save file from $source_name."
         return 1
     fi
 }
diff --git a/deploy/scripts/entrypoint.sh b/deploy/scripts/entrypoint.sh
index 2924f09189..ac1f91d6c5 100755
--- a/deploy/scripts/entrypoint.sh
+++ b/deploy/scripts/entrypoint.sh
@@ -1,12 +1,52 @@
 #!/bin/bash
 
+
+export_envs_from_preset() {
+  if [ -z "$ENVS_PRESET" ]; then
+      return
+  fi
+
+  if [ "$ENVS_PRESET" = "none" ]; then
+      return
+  fi
+
+  local preset_file="./configs/envs/.env.$ENVS_PRESET"
+
+  if [ ! -f "$preset_file" ]; then
+      return
+  fi
+
+  local blacklist=(
+    "NEXT_PUBLIC_APP_PROTOCOL" 
+    "NEXT_PUBLIC_APP_HOST"
+    "NEXT_PUBLIC_APP_PORT"
+    "NEXT_PUBLIC_APP_ENV"
+    "NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL"
+  )
+
+  while IFS='=' read -r name value; do
+      name="${name#"${name%%[![:space:]]*}"}"  # Trim leading whitespace
+      if [[ -n $name && $name == "NEXT_PUBLIC_"* && ! "${blacklist[*]}" =~ "$name" ]]; then
+          export "$name"="$value"
+      fi
+  done < <(grep "^[^#;]" "$preset_file")
+}
+
+# If there is a preset, load the environment variables from the its file
+export_envs_from_preset
+
 # Download external assets
-./download_assets.sh ./public/assets
+./download_assets.sh ./public/assets/configs
 
 # Check run-time ENVs values
-./validate_envs.sh
-if [ $? -ne 0 ]; then
-  exit 1
+if [ "$SKIP_ENVS_VALIDATION" != "true" ]; then
+  ./validate_envs.sh
+  if [ $? -ne 0 ]; then
+    exit 1
+  fi
+else
+  echo "😱 Skipping ENVs validation."
+  echo
 fi
 
 # Generate favicons bundle
diff --git a/deploy/scripts/favicon_generator.sh b/deploy/scripts/favicon_generator.sh
index 4f153dcb0b..7863bda406 100755
--- a/deploy/scripts/favicon_generator.sh
+++ b/deploy/scripts/favicon_generator.sh
@@ -4,13 +4,14 @@ master_url="${FAVICON_MASTER_URL:-$NEXT_PUBLIC_NETWORK_ICON}"
 export MASTER_URL="$master_url"
 
 cd ./deploy/tools/favicon-generator
-./script.sh
+yarn install --frozen-lockfile
+node "$(pwd)/index.js"
 if [ $? -ne 0 ]; then
     cd ../../../
     exit 1
 else
     cd ../../../
-    favicon_folder="./public/favicon/"
+    favicon_folder="./public/assets/favicon/"
 
     echo "⏳ Replacing default favicons with freshly generated pack..."
     if [ -d "$favicon_folder" ]; then
diff --git a/deploy/scripts/make_envs_script.sh b/deploy/scripts/make_envs_script.sh
index 1124a1a77c..b3548cb207 100755
--- a/deploy/scripts/make_envs_script.sh
+++ b/deploy/scripts/make_envs_script.sh
@@ -3,7 +3,7 @@
 echo "🌀 Creating client script with ENV values..."
 
 # Define the output file name
-output_file="${1:-./public/envs.js}"
+output_file="${1:-./public/assets/envs.js}"
 
 touch $output_file;
 truncate -s 0 $output_file;
@@ -18,6 +18,12 @@ echo "window.__envs = {" >> $output_file;
 
 # Iterate through all environment variables
 for var in $(env | grep '^NEXT_PUBLIC_' | cut -d= -f1); do
+  # Skip variables that start with NEXT_PUBLIC_VERCEL. Vercel injects these
+  # and they can cause runtime errors, particularly when commit messages wrap lines.
+  if [[ $var == NEXT_PUBLIC_VERCEL* ]]; then
+    continue
+  fi
+
   # Get the value of the variable
   value="${!var}"
 
diff --git a/deploy/tools/affected-tests/.gitignore b/deploy/tools/affected-tests/.gitignore
new file mode 100644
index 0000000000..30bc162798
--- /dev/null
+++ b/deploy/tools/affected-tests/.gitignore
@@ -0,0 +1 @@
+/node_modules
\ No newline at end of file
diff --git a/deploy/tools/affected-tests/index.js b/deploy/tools/affected-tests/index.js
new file mode 100644
index 0000000000..f2fc450eb6
--- /dev/null
+++ b/deploy/tools/affected-tests/index.js
@@ -0,0 +1,208 @@
+/* eslint-disable no-console */
+const { execSync } = require('child_process');
+const dependencyTree = require('dependency-tree');
+const fs = require('fs');
+const path = require('path');
+
+const ROOT_DIR = path.resolve(__dirname, '../../../');
+
+const TARGET_FILE = path.resolve(ROOT_DIR, './playwright/affected-tests.txt');
+
+const NON_EXISTENT_DEPS = [];
+
+const DIRECTORIES_WITH_TESTS = [
+  path.resolve(ROOT_DIR, './ui'),
+];
+const VISITED = {};
+
+function getAllPwFilesInDirectory(directory) {
+  const files = fs.readdirSync(directory, { recursive: true });
+  return files
+    .filter((file) => file.endsWith('.pw.tsx'))
+    .map((file) => path.join(directory, file));
+}
+
+function getFileDeps(filename, changedNpmModules) {
+  return dependencyTree.toList({
+    filename,
+    directory: ROOT_DIR,
+    filter: (path) => {
+      if (path.indexOf('node_modules') === -1) {
+        return true;
+      }
+
+      if (changedNpmModules.some((module) => path.startsWith(module))) {
+        return true;
+      }
+
+      return false;
+    },
+    tsConfig: path.resolve(ROOT_DIR, './tsconfig.json'),
+    nonExistent: NON_EXISTENT_DEPS,
+    visited: VISITED,
+  });
+}
+
+async function getChangedFiles() {
+  const command = process.env.CI ?
+    `git diff --name-only origin/${ process.env.GITHUB_BASE_REF } ${ process.env.GITHUB_SHA } -- ${ ROOT_DIR }` :
+    `git diff --name-only main $(git branch --show-current) -- ${ ROOT_DIR }`;
+
+  console.log('Executing command: ', command);
+  const files = execSync(command)
+    .toString()
+    .trim()
+    .split('\n')
+    .filter(Boolean);
+
+  return files.map((file) => path.join(ROOT_DIR, file));
+}
+
+function checkChangesInChakraTheme(changedFiles) {
+  const themeDir = path.resolve(ROOT_DIR, './theme');
+  return changedFiles.some((file) => file.startsWith(themeDir));
+}
+
+function checkChangesInSvgSprite(changedFiles) {
+  const iconDir = path.resolve(ROOT_DIR, './icons');
+  const areIconsChanged = changedFiles.some((file) => file.startsWith(iconDir));
+
+  if (!areIconsChanged) {
+    return false;
+  }
+
+  const svgNamesFile = path.resolve(ROOT_DIR, './public/icons/name.d.ts');
+  const areSvgNamesChanged = changedFiles.some((file) => file === svgNamesFile);
+
+  if (!areSvgNamesChanged) {
+    // If only the icons have changed and not the names in the SVG file, we will need to run all tests.
+    // This is because we cannot correctly identify the test files that depend on these changes.
+    return true;
+  }
+
+  // If the icon names have changed, then there should be changes in the components that use them.
+  // Otherwise, typescript would complain about that.
+  return false;
+}
+
+function createTargetFile(content) {
+  fs.writeFileSync(TARGET_FILE, content);
+}
+
+function getPackageJsonUpdatedProps(packageJsonFile) {
+  const command = process.env.CI ?
+    `git diff --unified=0 origin/${ process.env.GITHUB_BASE_REF } ${ process.env.GITHUB_SHA } -- ${ packageJsonFile }` :
+    `git diff --unified=0 main $(git branch --show-current) -- ${ packageJsonFile }`;
+
+  console.log('Executing command: ', command);
+  const changedLines = execSync(command)
+    .toString()
+    .trim()
+    .split('\n')
+    .filter(Boolean)
+    .filter((line) => line.startsWith('+ ') || line.startsWith('- '));
+
+  const changedProps = [ ...new Set(
+    changedLines
+      .map((line) => line.replaceAll(' ', '').replaceAll('+', '').replaceAll('-', ''))
+      .map((line) => line.split(':')[0].replaceAll('"', '')),
+  ) ];
+
+  return changedProps;
+}
+
+function getUpdatedNpmModules(changedFiles) {
+  const packageJsonFile = path.resolve(ROOT_DIR, './package.json');
+
+  if (!changedFiles.includes(packageJsonFile)) {
+    return [];
+  }
+
+  try {
+    const packageJsonContent = JSON.parse(fs.readFileSync(packageJsonFile, 'utf-8'));
+    const usedNpmModules = [
+      ...Object.keys(packageJsonContent.dependencies || {}),
+      ...Object.keys(packageJsonContent.devDependencies || {}),
+    ];
+    const updatedProps = getPackageJsonUpdatedProps(packageJsonFile);
+
+    return updatedProps.filter((prop) => usedNpmModules.includes(prop));
+  } catch (error) {}
+}
+
+async function run() {
+  // NOTES:
+  // - The absence of TARGET_FILE implies that all tests should be run.
+  // - The empty TARGET_FILE implies that no tests should be run.
+
+  const start = Date.now();
+
+  fs.unlink(TARGET_FILE, () => {});
+
+  const changedFiles = await getChangedFiles();
+
+  if (!changedFiles.length) {
+    createTargetFile('');
+    console.log('No changed files found. Exiting...');
+    return;
+  }
+
+  console.log('Changed files in the branch: ', changedFiles);
+
+  if (checkChangesInChakraTheme(changedFiles)) {
+    console.log('Changes in Chakra theme detected. It is advisable to run all test suites. Exiting...');
+    return;
+  }
+
+  if (checkChangesInSvgSprite(changedFiles)) {
+    console.log('There are some changes in the SVG sprite that cannot be linked to a specific component. It is advisable to run all test suites. Exiting...');
+    return;
+  }
+
+  let changedNpmModules = getUpdatedNpmModules(changedFiles);
+
+  if (!changedNpmModules) {
+    console.log('Some error occurred while detecting changed NPM modules. It is advisable to run all test suites. Exiting...');
+    return;
+  }
+
+  console.log('Changed NPM modules in the branch: ', changedNpmModules);
+
+  changedNpmModules = [
+    ...changedNpmModules,
+    ...changedNpmModules.map((module) => `@types/${ module }`), // there are some deps that are resolved to .d.ts files
+  ].map((module) => path.resolve(ROOT_DIR, `./node_modules/${ module }`));
+
+  const allTestFiles = DIRECTORIES_WITH_TESTS.reduce((acc, dir) => {
+    return acc.concat(getAllPwFilesInDirectory(dir));
+  }, []);
+
+  const isDepChanged = (dep) => changedFiles.includes(dep) || changedNpmModules.some((module) => dep.startsWith(module));
+
+  const testFilesToRun = allTestFiles
+    .map((file) => ({ file, deps: getFileDeps(file, changedNpmModules) }))
+    .filter(({ deps }) => deps.some(isDepChanged));
+  const testFileNamesToRun = testFilesToRun.map(({ file }) => path.relative(ROOT_DIR, file));
+
+  if (!testFileNamesToRun.length) {
+    createTargetFile('');
+    console.log('No tests to run. Exiting...');
+    return;
+  }
+
+  createTargetFile(testFileNamesToRun.join('\n'));
+
+  const end = Date.now();
+
+  const testFilesToRunWithFilteredDeps = testFilesToRun.map(({ file, deps }) => ({
+    file,
+    deps: deps.filter(isDepChanged),
+  }));
+
+  console.log('Total time: ', ((end - start) / 1_000).toLocaleString());
+  console.log('Total test to run: ', testFileNamesToRun.length);
+  console.log('Tests to run with changed deps: ', testFilesToRunWithFilteredDeps);
+  console.log('Non existent deps: ', NON_EXISTENT_DEPS);
+}
+
+run();
diff --git a/deploy/tools/affected-tests/package.json b/deploy/tools/affected-tests/package.json
new file mode 100644
index 0000000000..bfba5734fa
--- /dev/null
+++ b/deploy/tools/affected-tests/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "affected-tests",
+  "version": "1.0.0",
+  "main": "index.js",
+  "author": "Vasilii (tom) Goriunov <tom@ohhhh.me>",
+  "license": "MIT",
+  "dependencies": {
+    "dependency-tree": "10.0.9"
+  }
+}
diff --git a/deploy/tools/affected-tests/yarn.lock b/deploy/tools/affected-tests/yarn.lock
new file mode 100644
index 0000000000..bd755eda2b
--- /dev/null
+++ b/deploy/tools/affected-tests/yarn.lock
@@ -0,0 +1,716 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/parser@^7.21.8":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.9.tgz#7b903b6149b0f8fa7ad564af646c4c38a77fc44b"
+  integrity sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==
+
+"@dependents/detective-less@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@dependents/detective-less/-/detective-less-4.1.0.tgz#4a979ee7a6a79eb33602862d6a1263e30f98002e"
+  integrity sha512-KrkT6qO5NxqNfy68sBl6CTSoJ4SNDIS5iQArkibhlbGU4LaDukZ3q2HIkh8aUKDio6o4itU4xDR7t82Y2eP1Bg==
+  dependencies:
+    gonzales-pe "^4.3.0"
+    node-source-walk "^6.0.1"
+
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@typescript-eslint/types@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
+  integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
+
+"@typescript-eslint/typescript-estree@^5.59.5":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b"
+  integrity sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==
+  dependencies:
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/visitor-keys" "5.62.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/visitor-keys@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz#2174011917ce582875954ffe2f6912d5931e353e"
+  integrity sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==
+  dependencies:
+    "@typescript-eslint/types" "5.62.0"
+    eslint-visitor-keys "^3.3.0"
+
+app-module-path@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/app-module-path/-/app-module-path-2.2.0.tgz#641aa55dfb7d6a6f0a8141c4b9c0aa50b6c24dd5"
+  integrity sha512-gkco+qxENJV+8vFcDiiFhuoSvRXb2a/QPqpSoWhVz829VNJfOTnELbBmPmNKFxf3xdNnw4DWCkzkDaavcX/1YQ==
+
+array-union@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
+  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
+
+ast-module-types@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ast-module-types/-/ast-module-types-5.0.0.tgz#32b2b05c56067ff38e95df66f11d6afd6c9ba16b"
+  integrity sha512-JvqziE0Wc0rXQfma0HZC/aY7URXHFuZV84fJRtP8u+lhp0JYCNd5wJzVXP45t0PH0Mej3ynlzvdyITYIu0G4LQ==
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+color-name@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+commander@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06"
+  integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+
+debug@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
+dependency-tree@10.0.9:
+  version "10.0.9"
+  resolved "https://registry.yarnpkg.com/dependency-tree/-/dependency-tree-10.0.9.tgz#0c6c0dbeb0c5ec2cf83bf755f30e9cb12e7b4ac7"
+  integrity sha512-dwc59FRIsht+HfnTVM0BCjJaEWxdq2YAvEDy4/Hn6CwS3CBWMtFnL3aZGAkQn3XCYxk/YcTDE4jX2Q7bFTwCjA==
+  dependencies:
+    commander "^10.0.1"
+    filing-cabinet "^4.1.6"
+    precinct "^11.0.5"
+    typescript "^5.0.4"
+
+detective-amd@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/detective-amd/-/detective-amd-5.0.2.tgz#579900f301c160efe037a6377ec7e937434b2793"
+  integrity sha512-XFd/VEQ76HSpym80zxM68ieB77unNuoMwopU2TFT/ErUk5n4KvUTwW4beafAVUugrjV48l4BmmR0rh2MglBaiA==
+  dependencies:
+    ast-module-types "^5.0.0"
+    escodegen "^2.0.0"
+    get-amd-module-type "^5.0.1"
+    node-source-walk "^6.0.1"
+
+detective-cjs@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/detective-cjs/-/detective-cjs-5.0.1.tgz#836ad51c6de4863efc7c419ec243694f760ff8b2"
+  integrity sha512-6nTvAZtpomyz/2pmEmGX1sXNjaqgMplhQkskq2MLrar0ZAIkHMrDhLXkRiK2mvbu9wSWr0V5/IfiTrZqAQMrmQ==
+  dependencies:
+    ast-module-types "^5.0.0"
+    node-source-walk "^6.0.0"
+
+detective-es6@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/detective-es6/-/detective-es6-4.0.1.tgz#38d5d49a6d966e992ef8f2d9bffcfe861a58a88a"
+  integrity sha512-k3Z5tB4LQ8UVHkuMrFOlvb3GgFWdJ9NqAa2YLUU/jTaWJIm+JJnEh4PsMc+6dfT223Y8ACKOaC0qcj7diIhBKw==
+  dependencies:
+    node-source-walk "^6.0.1"
+
+detective-postcss@^6.1.3:
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/detective-postcss/-/detective-postcss-6.1.3.tgz#51a2d4419327ad85d0af071c7054c79fafca7e73"
+  integrity sha512-7BRVvE5pPEvk2ukUWNQ+H2XOq43xENWbH0LcdCE14mwgTBEAMoAx+Fc1rdp76SmyZ4Sp48HlV7VedUnP6GA1Tw==
+  dependencies:
+    is-url "^1.2.4"
+    postcss "^8.4.23"
+    postcss-values-parser "^6.0.2"
+
+detective-sass@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/detective-sass/-/detective-sass-5.0.3.tgz#63e54bc9b32f4bdbd9d5002308f9592a3d3a508f"
+  integrity sha512-YsYT2WuA8YIafp2RVF5CEfGhhyIVdPzlwQgxSjK+TUm3JoHP+Tcorbk3SfG0cNZ7D7+cYWa0ZBcvOaR0O8+LlA==
+  dependencies:
+    gonzales-pe "^4.3.0"
+    node-source-walk "^6.0.1"
+
+detective-scss@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/detective-scss/-/detective-scss-4.0.3.tgz#79758baa0158f72bfc4481eb7e21cc3b5f1ea6eb"
+  integrity sha512-VYI6cHcD0fLokwqqPFFtDQhhSnlFWvU614J42eY6G0s8c+MBhi9QAWycLwIOGxlmD8I/XvGSOUV1kIDhJ70ZPg==
+  dependencies:
+    gonzales-pe "^4.3.0"
+    node-source-walk "^6.0.1"
+
+detective-stylus@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/detective-stylus/-/detective-stylus-4.0.0.tgz#ce97b6499becdc291de7b3c11df8c352c1eee46e"
+  integrity sha512-TfPotjhszKLgFBzBhTOxNHDsutIxx9GTWjrL5Wh7Qx/ydxKhwUrlSFeLIn+ZaHPF+h0siVBkAQSuy6CADyTxgQ==
+
+detective-typescript@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/detective-typescript/-/detective-typescript-11.1.0.tgz#2deea5364cae1f0d9d3688bc596e662b049438cc"
+  integrity sha512-Mq8egjnW2NSCkzEb/Az15/JnBI/Ryyl6Po0Y+0mABTFvOS6DAyUGRZqz1nyhu4QJmWWe0zaGs/ITIBeWkvCkGw==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "^5.59.5"
+    ast-module-types "^5.0.0"
+    node-source-walk "^6.0.1"
+    typescript "^5.0.4"
+
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.0.0"
+
+enhanced-resolve@^5.14.1:
+  version "5.15.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz#1af946c7d93603eb88e9896cee4904dc012e9c35"
+  integrity sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
+escodegen@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.1.0.tgz#ba93bbb7a43986d29d6041f99f5262da773e2e17"
+  integrity sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^5.2.0"
+    esutils "^2.0.2"
+  optionalDependencies:
+    source-map "~0.6.1"
+
+eslint-visitor-keys@^3.3.0:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
+esprima@^4.0.0, esprima@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
+
+estraverse@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+fast-glob@^3.2.9:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+fastq@^1.6.0:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.17.0.tgz#ca5e1a90b5e68f97fc8b61330d5819b82f5fab03"
+  integrity sha512-zGygtijUMT7jnk3h26kUms3BkSDp4IfIKjmnqI2tvx6nuBfiF1UqOxbnLfzdv+apBy+53oaImsKtMw/xYbW+1w==
+  dependencies:
+    reusify "^1.0.4"
+
+filing-cabinet@^4.1.6:
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/filing-cabinet/-/filing-cabinet-4.1.6.tgz#8d6d12cf3a84365bbd94e1cbf07d71c113420dd2"
+  integrity sha512-C+HZbuQTER36sKzGtUhrAPAoK6+/PrrUhYDBQEh3kBRdsyEhkLbp1ML8S0+6e6gCUrUlid+XmubxJrhvL2g/Zw==
+  dependencies:
+    app-module-path "^2.2.0"
+    commander "^10.0.1"
+    enhanced-resolve "^5.14.1"
+    is-relative-path "^1.0.2"
+    module-definition "^5.0.1"
+    module-lookup-amd "^8.0.5"
+    resolve "^1.22.3"
+    resolve-dependency-path "^3.0.2"
+    sass-lookup "^5.0.1"
+    stylus-lookup "^5.0.1"
+    tsconfig-paths "^4.2.0"
+    typescript "^5.0.4"
+
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
+
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+get-amd-module-type@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/get-amd-module-type/-/get-amd-module-type-5.0.1.tgz#bef38ea3674e1aa1bda9c59c8b0da598582f73f2"
+  integrity sha512-jb65zDeHyDjFR1loOVk0HQGM5WNwoGB8aLWy3LKCieMKol0/ProHkhO2X1JxojuN10vbz1qNn09MJ7tNp7qMzw==
+  dependencies:
+    ast-module-types "^5.0.0"
+    node-source-walk "^6.0.1"
+
+get-own-enumerable-property-symbols@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
+  integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
+
+glob-parent@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob@^7.2.3:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.1.1"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globby@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
+gonzales-pe@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/gonzales-pe/-/gonzales-pe-4.3.0.tgz#fe9dec5f3c557eead09ff868c65826be54d067b3"
+  integrity sha512-otgSPpUmdWJ43VXyiNgEYE4luzHCL2pz4wQ0OnDluC6Eg4Ko3Vexy/SrSynglw/eR+OhkzmqFCZa/OFa/RgAOQ==
+  dependencies:
+    minimist "^1.2.5"
+
+graceful-fs@^4.2.4:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
+hasown@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.0.tgz#f4c513d454a57b7c7e1650778de226b11700546c"
+  integrity sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==
+  dependencies:
+    function-bind "^1.1.2"
+
+ignore@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
+  integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+is-core-module@^2.13.0:
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
+  integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==
+  dependencies:
+    hasown "^2.0.0"
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-glob@^4.0.1, is-glob@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-obj@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
+  integrity sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==
+
+is-regexp@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
+  integrity sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==
+
+is-relative-path@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-relative-path/-/is-relative-path-1.0.2.tgz#091b46a0d67c1ed0fe85f1f8cfdde006bb251d46"
+  integrity sha512-i1h+y50g+0hRbBD+dbnInl3JlJ702aar58snAeX+MxBAPvzXGej7sYoPMhlnykabt0ZzCJNBEyzMlekuQZN7fA==
+
+is-url-superb@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-url-superb/-/is-url-superb-4.0.0.tgz#b54d1d2499bb16792748ac967aa3ecb41a33a8c2"
+  integrity sha512-GI+WjezhPPcbM+tqE9LnmsY5qqjwHzTvjJ36wxYX5ujNXefSUJ/T17r5bqDV8yLhcgB59KTPNOc9O9cmHTPWsA==
+
+is-url@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/is-url/-/is-url-1.2.4.tgz#04a4df46d28c4cff3d73d01ff06abeb318a1aa52"
+  integrity sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==
+
+json5@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
+merge2@^1.3.0, merge2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+micromatch@^4.0.4:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
+
+minimatch@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@^1.2.5, minimist@^1.2.6:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
+module-definition@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/module-definition/-/module-definition-5.0.1.tgz#62d1194e5d5ea6176b7dc7730f818f466aefa32f"
+  integrity sha512-kvw3B4G19IXk+BOXnYq/D/VeO9qfHaapMeuS7w7sNUqmGaA6hywdFHMi+VWeR9wUScXM7XjoryTffCZ5B0/8IA==
+  dependencies:
+    ast-module-types "^5.0.0"
+    node-source-walk "^6.0.1"
+
+module-lookup-amd@^8.0.5:
+  version "8.0.5"
+  resolved "https://registry.yarnpkg.com/module-lookup-amd/-/module-lookup-amd-8.0.5.tgz#aaeea41979105b49339380ca3f7d573db78c32a5"
+  integrity sha512-vc3rYLjDo5Frjox8NZpiyLXsNWJ5BWshztc/5KSOMzpg9k5cHH652YsJ7VKKmtM4SvaxuE9RkrYGhiSjH3Ehow==
+  dependencies:
+    commander "^10.0.1"
+    glob "^7.2.3"
+    requirejs "^2.3.6"
+    requirejs-config-file "^4.0.0"
+
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+nanoid@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
+
+node-source-walk@^6.0.0, node-source-walk@^6.0.1, node-source-walk@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/node-source-walk/-/node-source-walk-6.0.2.tgz#ba81bc4bc0f6f05559b084bea10be84c3f87f211"
+  integrity sha512-jn9vOIK/nfqoFCcpK89/VCVaLg1IHE6UVfDOzvqmANaJ/rWCTEdH8RZ1V278nv2jr36BJdyQXIAavBLXpzdlag==
+  dependencies:
+    "@babel/parser" "^7.21.8"
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
+  dependencies:
+    wrappy "1"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
+
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+postcss-values-parser@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-6.0.2.tgz#636edc5b86c953896f1bb0d7a7a6615df00fb76f"
+  integrity sha512-YLJpK0N1brcNJrs9WatuJFtHaV9q5aAOj+S4DI5S7jgHlRfm0PIbDCAFRYMQD5SHq7Fy6xsDhyutgS0QOAs0qw==
+  dependencies:
+    color-name "^1.1.4"
+    is-url-superb "^4.0.0"
+    quote-unquote "^1.0.0"
+
+postcss@^8.4.23:
+  version "8.4.33"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.33.tgz#1378e859c9f69bf6f638b990a0212f43e2aaa742"
+  integrity sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+precinct@^11.0.5:
+  version "11.0.5"
+  resolved "https://registry.yarnpkg.com/precinct/-/precinct-11.0.5.tgz#3e15b3486670806f18addb54b8533e23596399ff"
+  integrity sha512-oHSWLC8cL/0znFhvln26D14KfCQFFn4KOLSw6hmLhd+LQ2SKt9Ljm89but76Pc7flM9Ty1TnXyrA2u16MfRV3w==
+  dependencies:
+    "@dependents/detective-less" "^4.1.0"
+    commander "^10.0.1"
+    detective-amd "^5.0.2"
+    detective-cjs "^5.0.1"
+    detective-es6 "^4.0.1"
+    detective-postcss "^6.1.3"
+    detective-sass "^5.0.3"
+    detective-scss "^4.0.3"
+    detective-stylus "^4.0.0"
+    detective-typescript "^11.1.0"
+    module-definition "^5.0.1"
+    node-source-walk "^6.0.2"
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
+quote-unquote@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/quote-unquote/-/quote-unquote-1.0.0.tgz#67a9a77148effeaf81a4d428404a710baaac8a0b"
+  integrity sha512-twwRO/ilhlG/FIgYeKGFqyHhoEhqgnKVkcmqMKi2r524gz3ZbDTcyFt38E9xjJI2vT+KbRNHVbnJ/e0I25Azwg==
+
+requirejs-config-file@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/requirejs-config-file/-/requirejs-config-file-4.0.0.tgz#4244da5dd1f59874038cc1091d078d620abb6ebc"
+  integrity sha512-jnIre8cbWOyvr8a5F2KuqBnY+SDA4NXr/hzEZJG79Mxm2WiFQz2dzhC8ibtPJS7zkmBEl1mxSwp5HhC1W4qpxw==
+  dependencies:
+    esprima "^4.0.0"
+    stringify-object "^3.2.1"
+
+requirejs@^2.3.6:
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/requirejs/-/requirejs-2.3.7.tgz#0b22032e51a967900e0ae9f32762c23a87036bd0"
+  integrity "sha1-CyIDLlGpZ5AOCunzJ2LCOocDa9A= sha512-DouTG8T1WanGok6Qjg2SXuCMzszOo0eHeH9hDZ5Y4x8Je+9JB38HdTLT4/VA8OaUhBa0JPVHJ0pyBkM1z+pDsw=="
+
+resolve-dependency-path@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/resolve-dependency-path/-/resolve-dependency-path-3.0.2.tgz#012816717bcbe8b846835da11af9d2beb5acef50"
+  integrity sha512-Tz7zfjhLfsvR39ADOSk9us4421J/1ztVBo4rWUkF38hgHK5m0OCZ3NxFVpqHRkjctnwVa15igEUHFJp8MCS7vA==
+
+resolve@^1.22.3:
+  version "1.22.8"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
+  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
+sass-lookup@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/sass-lookup/-/sass-lookup-5.0.1.tgz#1f01d7ff21e09d8c9dcf8d05b3fca28f2f96e6ed"
+  integrity sha512-t0X5PaizPc2H4+rCwszAqHZRtr4bugo4pgiCvrBFvIX0XFxnr29g77LJcpyj9A0DcKf7gXMLcgvRjsonYI6x4g==
+  dependencies:
+    commander "^10.0.1"
+
+semver@^7.3.7:
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
+  dependencies:
+    lru-cache "^6.0.0"
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
+source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
+source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+stringify-object@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
+  integrity sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==
+  dependencies:
+    get-own-enumerable-property-symbols "^3.0.0"
+    is-obj "^1.0.1"
+    is-regexp "^1.0.0"
+
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+  integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
+
+stylus-lookup@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/stylus-lookup/-/stylus-lookup-5.0.1.tgz#3c4d116c3b1e8e1a8169c0d9cd20e608595560f4"
+  integrity sha512-tLtJEd5AGvnVy4f9UHQMw4bkJJtaAcmo54N+ovQBjDY3DuWyK9Eltxzr5+KG0q4ew6v2EHyuWWNnHeiw/Eo7rQ==
+  dependencies:
+    commander "^10.0.1"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+tapable@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
+  integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+tsconfig-paths@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz#ef78e19039133446d244beac0fd6a1632e2d107c"
+  integrity sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==
+  dependencies:
+    json5 "^2.2.2"
+    minimist "^1.2.6"
+    strip-bom "^3.0.0"
+
+tslib@^1.8.1:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
+tsutils@^3.21.0:
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
+  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
+  dependencies:
+    tslib "^1.8.1"
+
+typescript@^5.0.4:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37"
+  integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
+
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
diff --git a/deploy/tools/envs-validator/index.ts b/deploy/tools/envs-validator/index.ts
index a7ef2b6673..69e0c3c734 100644
--- a/deploy/tools/envs-validator/index.ts
+++ b/deploy/tools/envs-validator/index.ts
@@ -20,7 +20,9 @@ async function run() {
         return result;
       }, {} as Record<string, string>);
 
+    printDeprecationWarning(appEnvs);
     await checkPlaceholdersCongruity(appEnvs);
+    checkDeprecatedEnvs(appEnvs);
     await validateEnvs(appEnvs);
 
   } catch (error) {
@@ -37,11 +39,15 @@ async function validateEnvs(appEnvs: Record<string, string>) {
       'NEXT_PUBLIC_FEATURED_NETWORKS',
       'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL',
       'NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL',
+      'NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL',
+      'NEXT_PUBLIC_MARKETPLACE_GRAPH_LINKS_URL',
       'NEXT_PUBLIC_FOOTER_LINKS',
     ];
 
     for await (const envName of envsWithJsonConfig) {
-      appEnvs[envName] = await(appEnvs[envName] ? getExternalJsonContent(envName) : Promise.resolve()) || '[]';
+      if (appEnvs[envName]) {
+        appEnvs[envName] = await getExternalJsonContent(envName) || '[]';
+      }
     }
 
     await schema.validate(appEnvs, { stripUnknown: false, abortEarly: false });
@@ -132,3 +138,64 @@ function getEnvsPlaceholders(filePath: string): Promise<Array<string>> {
     });
   });
 }
+
+function printDeprecationWarning(envsMap: Record<string, string>) {
+  if (envsMap.NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY && envsMap.NEXT_PUBLIC_RE_CAPTCHA_V3_APP_SITE_KEY) {
+    console.log('❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗');
+    // eslint-disable-next-line max-len
+    console.warn('The NEXT_PUBLIC_RE_CAPTCHA_V3_APP_SITE_KEY variable is now deprecated and will be removed in the next release. Please migrate to the NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY variable.');
+    console.log('❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗\n');
+  }
+
+  if (
+    (envsMap.NEXT_PUBLIC_SENTRY_DSN || envsMap.SENTRY_CSP_REPORT_URI || envsMap.NEXT_PUBLIC_SENTRY_ENABLE_TRACING) &&
+    envsMap.NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN
+  ) {
+    console.log('❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗');
+    // eslint-disable-next-line max-len
+    console.warn('The Sentry monitoring is now deprecated and will be removed in the next release. Please migrate to the Rollbar error monitoring.');
+    console.log('❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗\n');
+  }
+
+  if (
+    envsMap.NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR ||
+    envsMap.NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND
+  ) {
+    console.log('❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗');
+    // eslint-disable-next-line max-len
+    console.warn('The NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR and NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND variables are now deprecated and will be removed in the next release. Please migrate to the NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG variable.');
+    console.log('❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗\n');
+  }
+
+  if (
+    envsMap.NEXT_PUBLIC_AUTH0_CLIENT_ID ||
+    envsMap.NEXT_PUBLIC_AUTH_URL ||
+    envsMap.NEXT_PUBLIC_LOGOUT_URL
+  ) {
+    console.log('❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗');
+    // eslint-disable-next-line max-len
+    console.warn('The NEXT_PUBLIC_AUTH0_CLIENT_ID, NEXT_PUBLIC_AUTH_URL and NEXT_PUBLIC_LOGOUT_URL variables are now deprecated and will be removed in the next release.');
+    console.log('❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗\n');
+  }
+}
+
+function checkDeprecatedEnvs(envsMap: Record<string, string>) {
+  !silent && console.log(`🌀 Checking deprecated environment variables...`);
+
+  if (!envsMap.NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY && envsMap.NEXT_PUBLIC_RE_CAPTCHA_V3_APP_SITE_KEY) {
+    // eslint-disable-next-line max-len
+    console.log('🚨 The NEXT_PUBLIC_RE_CAPTCHA_V3_APP_SITE_KEY variable is no longer supported. Please pass NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY or remove it completely.');
+    throw new Error();
+  }
+
+  if (
+    (envsMap.NEXT_PUBLIC_SENTRY_DSN || envsMap.SENTRY_CSP_REPORT_URI || envsMap.NEXT_PUBLIC_SENTRY_ENABLE_TRACING) &&
+    !envsMap.NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN
+  ) {
+    // eslint-disable-next-line max-len
+    console.log('🚨 The Sentry error monitoring is no longer supported. Please migrate to the Rollbar error monitoring.');
+    throw new Error();
+  }
+
+  !silent && console.log('👍 All good!\n');
+}
diff --git a/deploy/tools/envs-validator/schema.ts b/deploy/tools/envs-validator/schema.ts
index 9d5ef4d354..612a5333c2 100644
--- a/deploy/tools/envs-validator/schema.ts
+++ b/deploy/tools/envs-validator/schema.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 declare module 'yup' {
   interface StringSchema {
     // Yup's URL validator is not perfect so we made our own
@@ -9,29 +10,43 @@ declare module 'yup' {
 import * as yup from 'yup';
 
 import type { AdButlerConfig } from '../../../types/client/adButlerConfig';
-import { SUPPORTED_AD_TEXT_PROVIDERS, SUPPORTED_AD_BANNER_PROVIDERS } from '../../../types/client/adProviders';
-import type { AdTextProviders, AdBannerProviders } from '../../../types/client/adProviders';
-import type { ContractCodeIde } from '../../../types/client/contract';
-import type { MarketplaceAppOverview } from '../../../types/client/marketplace';
-import { NAVIGATION_LINK_IDS } from '../../../types/client/navigation-items';
-import type { NavItemExternal, NavigationLinkId } from '../../../types/client/navigation-items';
+import type { AddressProfileAPIConfig } from '../../../types/client/addressProfileAPIConfig';
+import { SUPPORTED_AD_TEXT_PROVIDERS, SUPPORTED_AD_BANNER_PROVIDERS, SUPPORTED_AD_BANNER_ADDITIONAL_PROVIDERS } from '../../../types/client/adProviders';
+import type { AdTextProviders, AdBannerProviders, AdBannerAdditionalProviders } from '../../../types/client/adProviders';
+import { SMART_CONTRACT_EXTRA_VERIFICATION_METHODS, SMART_CONTRACT_LANGUAGE_FILTERS, type ContractCodeIde, type SmartContractVerificationMethodExtra } from '../../../types/client/contract';
+import type { DeFiDropdownItem } from '../../../types/client/deFiDropdown';
+import type { GasRefuelProviderConfig } from '../../../types/client/gasRefuelProviderConfig';
+import { GAS_UNITS } from '../../../types/client/gasTracker';
+import type { GasUnit } from '../../../types/client/gasTracker';
+import type { MarketplaceAppOverview, MarketplaceAppSecurityReportRaw, MarketplaceAppSecurityReport } from '../../../types/client/marketplace';
+import type { MultichainProviderConfig } from '../../../types/client/multichainProviderConfig';
+import { NAVIGATION_LINK_IDS } from '../../../types/client/navigation';
+import type { NavItemExternal, NavigationLinkId, NavigationLayout } from '../../../types/client/navigation';
+import { ROLLUP_TYPES } from '../../../types/client/rollup';
 import type { BridgedTokenChain, TokenBridge } from '../../../types/client/token';
 import { PROVIDERS as TX_INTERPRETATION_PROVIDERS } from '../../../types/client/txInterpretation';
+import { VALIDATORS_CHAIN_TYPE } from '../../../types/client/validators';
+import type { ValidatorsChainType } from '../../../types/client/validators';
 import type { WalletType } from '../../../types/client/wallets';
 import { SUPPORTED_WALLETS } from '../../../types/client/wallets';
 import type { CustomLink, CustomLinksGroup } from '../../../types/footerLinks';
-import type { ChainIndicatorId } from '../../../types/homepage';
-import { type NetworkVerificationType, type NetworkExplorer, type FeaturedNetwork, NETWORK_GROUPS } from '../../../types/networks';
-import type { AddressViewId } from '../../../types/views/address';
-import { ADDRESS_VIEWS_IDS, IDENTICON_TYPES } from '../../../types/views/address';
+import { CHAIN_INDICATOR_IDS, HOME_STATS_WIDGET_IDS } from '../../../types/homepage';
+import type { ChainIndicatorId, HeroBannerButtonState, HeroBannerConfig, HomeStatsWidgetId } from '../../../types/homepage';
+import { type NetworkVerificationTypeEnvs, type NetworkExplorer, type FeaturedNetwork, NETWORK_GROUPS } from '../../../types/networks';
+import { COLOR_THEME_IDS } from '../../../types/settings';
+import type { FontFamily } from '../../../types/ui';
+import type { AddressFormat, AddressViewId } from '../../../types/views/address';
+import { ADDRESS_FORMATS, ADDRESS_VIEWS_IDS, IDENTICON_TYPES } from '../../../types/views/address';
 import { BLOCK_FIELDS_IDS } from '../../../types/views/block';
 import type { BlockFieldId } from '../../../types/views/block';
 import type { NftMarketplaceItem } from '../../../types/views/nft';
 import type { TxAdditionalFieldsId, TxFieldsId } from '../../../types/views/tx';
 import { TX_ADDITIONAL_FIELDS_IDS, TX_FIELDS_IDS } from '../../../types/views/tx';
+import type { VerifiedContractsFilter } from '../../../types/api/contracts';
 
 import { replaceQuotes } from '../../../configs/app/utils';
 import * as regexp from '../../../lib/regexp';
+import type { IconName } from '../../../ui/shared/IconSvg';
 
 const protocols = [ 'http', 'https' ];
 
@@ -70,28 +85,172 @@ const marketplaceAppSchema: yup.ObjectSchema<MarketplaceAppOverview> = yup
     site: yup.string().test(urlTest),
     twitter: yup.string().test(urlTest),
     telegram: yup.string().test(urlTest),
-    github: yup.string().test(urlTest),
+    github: yup.lazy(value =>
+      Array.isArray(value) ?
+        yup.array().of(yup.string().required().test(urlTest)) :
+        yup.string().test(urlTest),
+    ),
+    discord: yup.string().test(urlTest),
     internalWallet: yup.boolean(),
     priority: yup.number(),
   });
 
+const issueSeverityDistributionSchema: yup.ObjectSchema<MarketplaceAppSecurityReport['overallInfo']['issueSeverityDistribution']> = yup
+  .object({
+    critical: yup.number().required(),
+    gas: yup.number().required(),
+    high: yup.number().required(),
+    informational: yup.number().required(),
+    low: yup.number().required(),
+    medium: yup.number().required(),
+  });
+
+const solidityscanReportSchema: yup.ObjectSchema<MarketplaceAppSecurityReport['contractsData'][number]['solidityScanReport']> = yup
+  .object({
+    contractname: yup.string().required(),
+    scan_status: yup.string().required(),
+    scan_summary: yup
+      .object({
+        issue_severity_distribution: issueSeverityDistributionSchema.required(),
+        lines_analyzed_count: yup.number().required(),
+        scan_time_taken: yup.number().required(),
+        score: yup.string().required(),
+        score_v2: yup.string().required(),
+        threat_score: yup.string().required(),
+      })
+      .required(),
+    scanner_reference_url: yup.string().test(urlTest).required(),
+  });
+
+const contractDataSchema: yup.ObjectSchema<MarketplaceAppSecurityReport['contractsData'][number]> = yup
+  .object({
+    address: yup.string().required(),
+    isVerified: yup.boolean().required(),
+    solidityScanReport: solidityscanReportSchema.nullable().notRequired(),
+  });
+
+const chainsDataSchema = yup.lazy((objValue) => {
+  let schema = yup.object();
+  Object.keys(objValue).forEach((key) => {
+    schema = schema.shape({
+      [key]: yup.object({
+        overallInfo: yup.object({
+          verifiedNumber: yup.number().required(),
+          totalContractsNumber: yup.number().required(),
+          solidityScanContractsNumber: yup.number().required(),
+          securityScore: yup.number().required(),
+          issueSeverityDistribution: issueSeverityDistributionSchema.required(),
+        }).required(),
+        contractsData: yup.array().of(contractDataSchema).required(),
+      }),
+    });
+  });
+  return schema;
+});
+
+const securityReportSchema: yup.ObjectSchema<MarketplaceAppSecurityReportRaw> = yup
+  .object({
+    appName: yup.string().required(),
+    chainsData: chainsDataSchema,
+  });
+
 const marketplaceSchema = yup
   .object()
   .shape({
+    NEXT_PUBLIC_MARKETPLACE_ENABLED: yup.boolean(),
     NEXT_PUBLIC_MARKETPLACE_CONFIG_URL: yup
       .array()
       .json()
-      .of(marketplaceAppSchema),
+      .of(marketplaceAppSchema)
+      .when('NEXT_PUBLIC_MARKETPLACE_ENABLED', {
+        is: true,
+        then: (schema) => schema,
+        // eslint-disable-next-line max-len
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL cannot not be used without NEXT_PUBLIC_MARKETPLACE_ENABLED'),
+      }),
     NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL: yup
       .array()
       .json()
-      .of(yup.string()),
+      .of(yup.string())
+      .when('NEXT_PUBLIC_MARKETPLACE_ENABLED', {
+        is: true,
+        then: (schema) => schema,
+        // eslint-disable-next-line max-len
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL cannot not be used without NEXT_PUBLIC_MARKETPLACE_ENABLED'),
+      }),
     NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM: yup
       .string()
-      .when('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', {
-        is: (value: Array<unknown>) => value.length > 0,
+      .when('NEXT_PUBLIC_MARKETPLACE_ENABLED', {
+        is: true,
         then: (schema) => schema.test(urlTest).required(),
-        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM cannot not be used without NEXT_PUBLIC_MARKETPLACE_CONFIG_URL'),
+        // eslint-disable-next-line max-len
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM cannot not be used without NEXT_PUBLIC_MARKETPLACE_ENABLED'),
+      }),
+    NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM: yup
+      .string()
+      .when('NEXT_PUBLIC_MARKETPLACE_ENABLED', {
+        is: true,
+        then: (schema) => schema.test(urlTest),
+        // eslint-disable-next-line max-len
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM cannot not be used without NEXT_PUBLIC_MARKETPLACE_ENABLED'),
+      }),
+    NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL: yup
+      .array()
+      .json()
+      .of(securityReportSchema)
+      .when('NEXT_PUBLIC_MARKETPLACE_ENABLED', {
+        is: true,
+        then: (schema) => schema,
+        // eslint-disable-next-line max-len
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL cannot not be used without NEXT_PUBLIC_MARKETPLACE_ENABLED'),
+      }),
+    NEXT_PUBLIC_MARKETPLACE_FEATURED_APP: yup
+      .string()
+      .when('NEXT_PUBLIC_MARKETPLACE_ENABLED', {
+        is: true,
+        then: (schema) => schema,
+        // eslint-disable-next-line max-len
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_MARKETPLACE_FEATURED_APP cannot not be used without NEXT_PUBLIC_MARKETPLACE_ENABLED'),
+      }),
+    NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL: yup
+      .string()
+      .when('NEXT_PUBLIC_MARKETPLACE_ENABLED', {
+        is: true,
+        then: (schema) => schema.test(urlTest),
+        // eslint-disable-next-line max-len
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL cannot not be used without NEXT_PUBLIC_MARKETPLACE_ENABLED'),
+      }),
+    NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL: yup
+      .string()
+      .when('NEXT_PUBLIC_MARKETPLACE_ENABLED', {
+        is: true,
+        then: (schema) => schema.test(urlTest),
+        // eslint-disable-next-line max-len
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL cannot not be used without NEXT_PUBLIC_MARKETPLACE_ENABLED'),
+      }),
+    NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY: yup
+      .string()
+      .when('NEXT_PUBLIC_MARKETPLACE_ENABLED', {
+        is: true,
+        then: (schema) => schema,
+        // eslint-disable-next-line max-len
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY cannot not be used without NEXT_PUBLIC_MARKETPLACE_ENABLED'),
+      }),
+    NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID: yup
+      .string()
+      .when('NEXT_PUBLIC_MARKETPLACE_ENABLED', {
+        is: true,
+        then: (schema) => schema,
+        // eslint-disable-next-line max-len
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID cannot not be used without NEXT_PUBLIC_MARKETPLACE_ENABLED'),
+      }),
+    NEXT_PUBLIC_MARKETPLACE_GRAPH_LINKS_URL: yup
+      .string()
+      .when('NEXT_PUBLIC_MARKETPLACE_ENABLED', {
+        is: true,
+        then: (schema) => schema,
+        // eslint-disable-next-line max-len
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_MARKETPLACE_GRAPH_LINKS_URL cannot not be used without NEXT_PUBLIC_MARKETPLACE_ENABLED'),
       }),
   });
 
@@ -114,23 +273,69 @@ const beaconChainSchema = yup
 const rollupSchema = yup
   .object()
   .shape({
-    NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK: yup.boolean(),
-    NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL: yup
+    NEXT_PUBLIC_ROLLUP_TYPE: yup.string().oneOf(ROLLUP_TYPES),
+    NEXT_PUBLIC_ROLLUP_L1_BASE_URL: yup
       .string()
-      .when('NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK', {
+      .when('NEXT_PUBLIC_ROLLUP_TYPE', {
         is: (value: string) => value,
         then: (schema) => schema.test(urlTest).required(),
-        // eslint-disable-next-line max-len
-        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL cannot not be used if NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK is not set to "true"'),
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL cannot not be used if NEXT_PUBLIC_ROLLUP_TYPE is not defined'),
       }),
-    NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK: yup.boolean(),
-    NEXT_PUBLIC_L1_BASE_URL: yup
+    NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL: yup
       .string()
-      .when([ 'NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK', 'NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK' ], {
-        is: (isOptimistic?: boolean, isZk?: boolean) => isOptimistic || isZk,
+      .when('NEXT_PUBLIC_ROLLUP_TYPE', {
+        is: (value: string) => value === 'optimistic',
         then: (schema) => schema.test(urlTest).required(),
-        // eslint-disable-next-line max-len
-        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_L1_BASE_URL cannot not be used if NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK or NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK is not set to "true"'),
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL can be used only if NEXT_PUBLIC_ROLLUP_TYPE is set to \'optimistic\' '),
+      }),
+    NEXT_PUBLIC_ROLLUP_OUTPUT_ROOTS_ENABLED: yup
+      .boolean()
+      .when('NEXT_PUBLIC_ROLLUP_TYPE', {
+        is: 'optimistic',
+        then: (schema) => schema,
+        otherwise: (schema) => schema.test(
+          'not-exist',
+          'NEXT_PUBLIC_ROLLUP_OUTPUT_ROOTS_ENABLED can only be used if NEXT_PUBLIC_ROLLUP_TYPE is set to \'optimistic\' ',
+          value => value === undefined,
+        ),
+      }),
+    NEXT_PUBLIC_ROLLUP_PARENT_CHAIN_NAME: yup
+      .string()
+      .when('NEXT_PUBLIC_ROLLUP_TYPE', {
+        is: 'arbitrum',
+        then: (schema) => schema,
+        otherwise: (schema) => schema.test(
+          'not-exist',
+          'NEXT_PUBLIC_ROLLUP_PARENT_CHAIN_NAME can only be used if NEXT_PUBLIC_ROLLUP_TYPE is set to \'arbitrum\' ',
+          value => value === undefined,
+        ),
+      }),
+    NEXT_PUBLIC_ROLLUP_HOMEPAGE_SHOW_LATEST_BLOCKS: yup
+      .boolean()
+      .when('NEXT_PUBLIC_ROLLUP_TYPE', {
+        is: (value: string) => value,
+        then: (schema) => schema,
+        otherwise: (schema) => schema.test(
+          'not-exist',
+          'NEXT_PUBLIC_ROLLUP_HOMEPAGE_SHOW_LATEST_BLOCKS cannot not be used if NEXT_PUBLIC_ROLLUP_TYPE is not defined',
+          value => value === undefined,
+        ),
+      }),
+  });
+
+const celoSchema = yup
+  .object()
+  .shape({
+    NEXT_PUBLIC_CELO_ENABLED: yup.boolean(),
+    NEXT_PUBLIC_CELO_L2_UPGRADE_BLOCK: yup
+      .string()
+      .when('NEXT_PUBLIC_CELO_ENABLED', {
+        is: (value: boolean) => value,
+        then: (schema) => schema.min(0).optional(),
+        otherwise: (schema) => schema.max(
+          -1,
+          'NEXT_PUBLIC_CELO_L2_UPGRADE_BLOCK cannot not be used if NEXT_PUBLIC_CELO_ENABLED is not set to "true"',
+        ),
       }),
   });
 
@@ -147,16 +352,28 @@ const adButlerConfigSchema = yup
         height: yup.number().positive().required(),
       })
       .required(),
+  })
+  .when('NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER', {
+    is: (value: AdBannerProviders) => value === 'adbutler',
+    then: (schema) => schema
+      .shape({
+        id: yup.string().required(),
+        width: yup.number().positive().required(),
+        height: yup.number().positive().required(),
+      })
+      .required(),
   });
 
 const adsBannerSchema = yup
   .object()
   .shape({
     NEXT_PUBLIC_AD_BANNER_PROVIDER: yup.string<AdBannerProviders>().oneOf(SUPPORTED_AD_BANNER_PROVIDERS),
+    NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER: yup.string<AdBannerAdditionalProviders>().oneOf(SUPPORTED_AD_BANNER_ADDITIONAL_PROVIDERS),
     NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP: adButlerConfigSchema,
     NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE: adButlerConfigSchema,
   });
 
+// DEPRECATED
 const sentrySchema = yup
   .object()
   .shape({
@@ -174,20 +391,6 @@ const sentrySchema = yup
         is: (value: string) => Boolean(value),
         then: (schema) => schema,
       }),
-    NEXT_PUBLIC_APP_INSTANCE: yup
-      .string()
-      .when('NEXT_PUBLIC_SENTRY_DSN', {
-        is: (value: string) => Boolean(value),
-        then: (schema) => schema,
-        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_APP_INSTANCE cannot not be used without NEXT_PUBLIC_SENTRY_DSN'),
-      }),
-    NEXT_PUBLIC_APP_ENV: yup
-      .string()
-      .when('NEXT_PUBLIC_SENTRY_DSN', {
-        is: (value: string) => Boolean(value),
-        then: (schema) => schema,
-        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_APP_ENV cannot not be used without NEXT_PUBLIC_SENTRY_DSN'),
-      }),
   });
 
 const accountSchema = yup
@@ -198,7 +401,7 @@ const accountSchema = yup
       .string()
       .when('NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED', {
         is: (value: boolean) => value,
-        then: (schema) => schema.required(),
+        then: (schema) => schema,
         otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_AUTH0_CLIENT_ID cannot not be used if NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED is not set to "true"'),
       }),
     NEXT_PUBLIC_AUTH_URL: yup
@@ -209,18 +412,11 @@ const accountSchema = yup
         otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_AUTH_URL cannot not be used if NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED is not set to "true"'),
       }),
     NEXT_PUBLIC_LOGOUT_URL: yup
-      .string()
-      .when('NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED', {
-        is: (value: boolean) => value,
-        then: (schema) => schema.test(urlTest).required(),
-        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_LOGOUT_URL cannot not be used if NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED is not set to "true"'),
-      }),
-    NEXT_PUBLIC_ADMIN_SERVICE_API_HOST: yup
       .string()
       .when('NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED', {
         is: (value: boolean) => value,
         then: (schema) => schema.test(urlTest),
-        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_ADMIN_SERVICE_API_HOST cannot not be used if NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED is not set to "true"'),
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_LOGOUT_URL cannot not be used if NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED is not set to "true"'),
       }),
   });
 
@@ -241,6 +437,34 @@ const navItemExternalSchema: yup.ObjectSchema<NavItemExternal> = yup
     url: yup.string().test(urlTest).required(),
   });
 
+const fontFamilySchema: yup.ObjectSchema<FontFamily> = yup
+  .object()
+  .transform(replaceQuotes)
+  .json()
+  .shape({
+    name: yup.string().required(),
+    url: yup.string().test(urlTest).required(),
+  });
+
+const heroBannerButtonStateSchema: yup.ObjectSchema<HeroBannerButtonState> = yup.object({
+  background: yup.array().max(2).of(yup.string()),
+  text_color: yup.array().max(2).of(yup.string()),
+});
+
+const heroBannerSchema: yup.ObjectSchema<HeroBannerConfig> = yup.object()
+  .transform(replaceQuotes)
+  .json()
+  .shape({
+    background: yup.array().max(2).of(yup.string()),
+    text_color: yup.array().max(2).of(yup.string()),
+    border: yup.array().max(2).of(yup.string()),
+    button: yup.object({
+      _default: heroBannerButtonStateSchema,
+      _hover: heroBannerButtonStateSchema,
+      _selected: heroBannerButtonStateSchema,
+    }),
+  });
+
 const footerLinkSchema: yup.ObjectSchema<CustomLink> = yup
   .object({
     text: yup.string().required(),
@@ -259,6 +483,7 @@ const footerLinkGroupSchema: yup.ObjectSchema<CustomLinksGroup> = yup
 const networkExplorerSchema: yup.ObjectSchema<NetworkExplorer> = yup
   .object({
     title: yup.string().required(),
+    logo: yup.string().test(urlTest),
     baseUrl: yup.string().test(urlTest).required(),
     paths: yup
       .object()
@@ -320,6 +545,24 @@ const bridgedTokensSchema = yup
       }),
   });
 
+const deFiDropdownItemSchema: yup.ObjectSchema<DeFiDropdownItem> = yup
+  .object({
+    text: yup.string().required(),
+    icon: yup.string<IconName>().required(),
+    dappId: yup.string(),
+    url: yup.string().test(urlTest),
+  })
+  .test('oneOfRequired', 'NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS: Either dappId or url is required', function(value) {
+    return Boolean(value.dappId) || Boolean(value.url);
+  }) as yup.ObjectSchema<DeFiDropdownItem>;
+
+const multichainProviderConfigSchema: yup.ObjectSchema<MultichainProviderConfig> = yup.object({
+  name: yup.string().required(),
+  url_template: yup.string().required(),
+  logo: yup.string().required(),
+  dapp_id: yup.string(),
+});
+
 const schema = yup
   .object()
   .noUnknown(true, (params) => {
@@ -337,6 +580,8 @@ const schema = yup
     NEXT_PUBLIC_APP_HOST: yup.string().required(),
     NEXT_PUBLIC_APP_PROTOCOL: yup.string().oneOf(protocols),
     NEXT_PUBLIC_APP_PORT: yup.number().positive().integer(),
+    NEXT_PUBLIC_APP_ENV: yup.string(),
+    NEXT_PUBLIC_APP_INSTANCE: yup.string(),
 
     // 2. Blockchain parameters
     NEXT_PUBLIC_NETWORK_NAME: yup.string().required(),
@@ -347,8 +592,20 @@ const schema = yup
     NEXT_PUBLIC_NETWORK_CURRENCY_WEI_NAME: yup.string(),
     NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL: yup.string(),
     NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS: yup.number().integer().positive(),
-    NEXT_PUBLIC_NETWORK_GOVERNANCE_TOKEN_SYMBOL: yup.string(),
-    NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE: yup.string<NetworkVerificationType>().oneOf([ 'validation', 'mining' ]),
+    NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL: yup.string(),
+    NEXT_PUBLIC_NETWORK_MULTIPLE_GAS_CURRENCIES: yup.boolean(),
+    NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE: yup
+      .string<NetworkVerificationTypeEnvs>().oneOf([ 'validation', 'mining' ])
+      .when('NEXT_PUBLIC_ROLLUP_TYPE', {
+        is: (value: string) => value === 'arbitrum' || value === 'zkEvm',
+        then: (schema) => schema.test(
+          'not-exist',
+          'NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE can not be set for Arbitrum and ZkEVM rollups',
+          value => value === undefined,
+        ),
+        otherwise: (schema) => schema,
+      }),
+    NEXT_PUBLIC_NETWORK_TOKEN_STANDARD_NAME: yup.string(),
     NEXT_PUBLIC_IS_TESTNET: yup.boolean(),
     NEXT_PUBLIC_IS_DEVNET: yup.boolean(),
     NEXT_PUBLIC_NETWORK_CURRENCY_IMAGE_URL: yup.string(),
@@ -365,12 +622,34 @@ const schema = yup
       .array()
       .transform(replaceQuotes)
       .json()
-      .of(yup.string<ChainIndicatorId>().oneOf([ 'daily_txs', 'coin_price', 'market_cap', 'tvl' ])),
+      .of(yup.string<ChainIndicatorId>().oneOf(CHAIN_INDICATOR_IDS)),
+    NEXT_PUBLIC_HOMEPAGE_STATS: yup
+      .array()
+      .transform(replaceQuotes)
+      .json()
+      .of(yup.string<HomeStatsWidgetId>().oneOf(HOME_STATS_WIDGET_IDS)),
     NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR: yup.string(),
     NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND: yup.string(),
     NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER: yup.boolean(),
     NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME: yup.boolean(),
     NEXT_PUBLIC_HOMEPAGE_TX_ICON: yup.string(),
+    NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG: yup
+      .mixed()
+      .test(
+        'shape',
+        (ctx) => {
+          try {
+            heroBannerSchema.validateSync(ctx.originalValue);
+            throw new Error('Unknown validation error');
+          } catch (error: unknown) {
+            const message = typeof error === 'object' && error !== null && 'errors' in error && Array.isArray(error.errors) ? error.errors.join(', ') : '';
+            return 'Invalid schema were provided for NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG' + (message ? `: ${ message }` : '');
+          }
+        },
+        (data) => {
+          const isUndefined = data === undefined;
+          return isUndefined || heroBannerSchema.isValidSync(data);
+        }),
 
     //     b. sidebar
     NEXT_PUBLIC_FEATURED_NETWORKS: yup
@@ -387,6 +666,12 @@ const schema = yup
       .transform(replaceQuotes)
       .json()
       .of(yup.string<NavigationLinkId>().oneOf(NAVIGATION_LINK_IDS)),
+    NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES: yup
+      .array()
+      .transform(replaceQuotes)
+      .json()
+      .of(yup.string()),
+    NEXT_PUBLIC_NAVIGATION_LAYOUT: yup.string<NavigationLayout>().oneOf([ 'horizontal', 'vertical' ]),
     NEXT_PUBLIC_NETWORK_LOGO: yup.string().test(urlTest),
     NEXT_PUBLIC_NETWORK_LOGO_DARK: yup.string().test(urlTest),
     NEXT_PUBLIC_NETWORK_ICON: yup.string().test(urlTest),
@@ -407,12 +692,46 @@ const schema = yup
       .json()
       .of(yup.string<BlockFieldId>().oneOf(BLOCK_FIELDS_IDS)),
     NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE: yup.string().oneOf(IDENTICON_TYPES),
+    NEXT_PUBLIC_VIEWS_ADDRESS_FORMAT: yup
+      .array()
+      .transform(replaceQuotes)
+      .json()
+      .of(yup.string<AddressFormat>().oneOf(ADDRESS_FORMATS)),
+    NEXT_PUBLIC_VIEWS_ADDRESS_BECH_32_PREFIX: yup
+      .string()
+      .when('NEXT_PUBLIC_VIEWS_ADDRESS_FORMAT', {
+        is: (value: Array<AddressFormat> | undefined) => value && value.includes('bech32'),
+        then: (schema) => schema.required().min(1).max(83),
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_VIEWS_ADDRESS_BECH_32_PREFIX is required if NEXT_PUBLIC_VIEWS_ADDRESS_FORMAT contains "bech32"'),
+      }),
+
     NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS: yup
       .array()
       .transform(replaceQuotes)
       .json()
       .of(yup.string<AddressViewId>().oneOf(ADDRESS_VIEWS_IDS)),
     NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED: yup.boolean(),
+    NEXT_PUBLIC_VIEWS_CONTRACT_EXTRA_VERIFICATION_METHODS: yup
+      .mixed()
+      .test(
+        'shape',
+        'Invalid schema were provided for NEXT_PUBLIC_VIEWS_CONTRACT_EXTRA_VERIFICATION_METHODS, it should be either array of method ids or "none" string literal',
+        (data) => {
+          const isNoneSchema = yup.string().oneOf([ 'none' ]);
+          const isArrayOfMethodsSchema = yup
+            .array()
+            .transform(replaceQuotes)
+            .json()
+            .of(yup.string<SmartContractVerificationMethodExtra>().oneOf(SMART_CONTRACT_EXTRA_VERIFICATION_METHODS));
+
+          return isNoneSchema.isValidSync(data) || isArrayOfMethodsSchema.isValidSync(data);
+        }),
+    NEXT_PUBLIC_VIEWS_CONTRACT_LANGUAGE_FILTERS: yup
+      .array()
+      .transform(replaceQuotes)
+      .json()
+      .of(yup.string<VerifiedContractsFilter>().oneOf(SMART_CONTRACT_LANGUAGE_FILTERS)),
+
     NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS: yup
       .array()
       .transform(replaceQuotes)
@@ -428,6 +747,7 @@ const schema = yup
       .transform(replaceQuotes)
       .json()
       .of(nftMarketplaceSchema),
+    NEXT_PUBLIC_HELIA_VERIFIED_FETCH_ENABLED: yup.boolean(),
 
     //     e. misc
     NEXT_PUBLIC_NETWORK_EXPLORERS: yup
@@ -440,17 +760,50 @@ const schema = yup
       .transform(replaceQuotes)
       .json()
       .of(contractCodeIdeSchema),
+    NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS: yup.boolean(),
     NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS: yup.boolean(),
     NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS: yup.boolean(),
     NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE: yup.string(),
+    NEXT_PUBLIC_COLOR_THEME_DEFAULT: yup.string().oneOf(COLOR_THEME_IDS),
+    NEXT_PUBLIC_FONT_FAMILY_HEADING: yup
+      .mixed()
+      .test('shape', 'Invalid schema were provided for NEXT_PUBLIC_FONT_FAMILY_HEADING', (data) => {
+        const isUndefined = data === undefined;
+        return isUndefined || fontFamilySchema.isValidSync(data);
+      }),
+    NEXT_PUBLIC_FONT_FAMILY_BODY: yup
+      .mixed()
+      .test('shape', 'Invalid schema were provided for NEXT_PUBLIC_FONT_FAMILY_BODY', (data) => {
+        const isUndefined = data === undefined;
+        return isUndefined || fontFamilySchema.isValidSync(data);
+      }),
+    NEXT_PUBLIC_MAX_CONTENT_WIDTH_ENABLED: yup.boolean(),
 
     // 5. Features configuration
-    NEXT_PUBLIC_API_SPEC_URL: yup.string().test(urlTest),
+    NEXT_PUBLIC_API_SPEC_URL: yup
+      .mixed()
+      .test('shape', 'Invalid schema were provided for NEXT_PUBLIC_API_SPEC_URL, it should be either URL-string or "none" string literal', (data) => {
+        const isNoneSchema = yup.string().oneOf([ 'none' ]);
+        const isUrlStringSchema = yup.string().test(urlTest);
+
+        return isNoneSchema.isValidSync(data) || isUrlStringSchema.isValidSync(data);
+      }),
     NEXT_PUBLIC_STATS_API_HOST: yup.string().test(urlTest),
+    NEXT_PUBLIC_STATS_API_BASE_PATH: yup.string(),
     NEXT_PUBLIC_VISUALIZE_API_HOST: yup.string().test(urlTest),
+    NEXT_PUBLIC_VISUALIZE_API_BASE_PATH: yup.string(),
     NEXT_PUBLIC_CONTRACT_INFO_API_HOST: yup.string().test(urlTest),
     NEXT_PUBLIC_NAME_SERVICE_API_HOST: yup.string().test(urlTest),
-    NEXT_PUBLIC_GRAPHIQL_TRANSACTION: yup.string().matches(regexp.HEX_REGEXP),
+    NEXT_PUBLIC_METADATA_SERVICE_API_HOST: yup.string().test(urlTest),
+    NEXT_PUBLIC_ADMIN_SERVICE_API_HOST: yup.string().test(urlTest),
+    NEXT_PUBLIC_GRAPHIQL_TRANSACTION: yup
+      .mixed()
+      .test('shape', 'Invalid schema were provided for NEXT_PUBLIC_GRAPHIQL_TRANSACTION, it should be either Hex-string or "none" string literal', (data) => {
+        const isNoneSchema = yup.string().oneOf([ 'none' ]);
+        const isHashStringSchema = yup.string().matches(regexp.HEX_REGEXP);
+
+        return isNoneSchema.isValidSync(data) || isHashStringSchema.isValidSync(data);
+      }),
     NEXT_PUBLIC_WEB3_WALLETS: yup
       .mixed()
       .test('shape', 'Invalid schema were provided for NEXT_PUBLIC_WEB3_WALLETS, it should be either array or "none" string literal', (data) => {
@@ -469,15 +822,97 @@ const schema = yup
     NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE: yup.boolean(),
     NEXT_PUBLIC_OG_DESCRIPTION: yup.string(),
     NEXT_PUBLIC_OG_IMAGE_URL: yup.string().test(urlTest),
+    NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED: yup.boolean(),
+    NEXT_PUBLIC_SEO_ENHANCED_DATA_ENABLED: yup.boolean(),
+    NEXT_PUBLIC_SAFE_TX_SERVICE_URL: yup.string().test(urlTest),
     NEXT_PUBLIC_IS_SUAVE_CHAIN: yup.boolean(),
     NEXT_PUBLIC_HAS_USER_OPS: yup.boolean(),
+    NEXT_PUBLIC_METASUITES_ENABLED: yup.boolean(),
+    NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG: yup
+      .array()
+      .transform(replaceQuotes)
+      .json()
+      .of(multichainProviderConfigSchema),
+    NEXT_PUBLIC_GAS_REFUEL_PROVIDER_CONFIG: yup
+      .mixed()
+      .test('shape', 'Invalid schema were provided for NEXT_PUBLIC_GAS_REFUEL_PROVIDER_CONFIG, it should have name and url template', (data) => {
+        const isUndefined = data === undefined;
+        const valueSchema = yup.object<GasRefuelProviderConfig>().transform(replaceQuotes).json().shape({
+          name: yup.string().required(),
+          url_template: yup.string().required(),
+          logo: yup.string(),
+          dapp_id: yup.string(),
+        });
+
+        return isUndefined || valueSchema.isValidSync(data);
+      }),
+    NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE: yup.string<ValidatorsChainType>().oneOf(VALIDATORS_CHAIN_TYPE),
+    NEXT_PUBLIC_GAS_TRACKER_ENABLED: yup.boolean(),
+    NEXT_PUBLIC_GAS_TRACKER_UNITS: yup.array().transform(replaceQuotes).json().of(yup.string<GasUnit>().oneOf(GAS_UNITS)),
+    NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED: yup.boolean(),
+    NEXT_PUBLIC_ADVANCED_FILTER_ENABLED: yup.boolean(),
+    NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS: yup
+      .array()
+      .transform(replaceQuotes)
+      .json()
+      .of(deFiDropdownItemSchema),
+    NEXT_PUBLIC_FAULT_PROOF_ENABLED: yup.boolean()
+      .when('NEXT_PUBLIC_ROLLUP_TYPE', {
+        is: 'optimistic',
+        then: (schema) => schema,
+        otherwise: (schema) => schema.test(
+          'not-exist',
+          'NEXT_PUBLIC_FAULT_PROOF_ENABLED can only be used with NEXT_PUBLIC_ROLLUP_TYPE=optimistic',
+          value => value === undefined,
+        ),
+      }),
+    NEXT_PUBLIC_HAS_MUD_FRAMEWORK: yup.boolean()
+      .when('NEXT_PUBLIC_ROLLUP_TYPE', {
+        is: 'optimistic',
+        then: (schema) => schema,
+        otherwise: (schema) => schema.test(
+          'not-exist',
+          'NEXT_PUBLIC_HAS_MUD_FRAMEWORK can only be used with NEXT_PUBLIC_ROLLUP_TYPE=optimistic',
+          value => value === undefined,
+        ),
+      }),
+    NEXT_PUBLIC_DEX_POOLS_ENABLED: yup.boolean()
+      .when('NEXT_PUBLIC_CONTRACT_INFO_API_HOST', {
+        is: (value: string) => Boolean(value),
+        then: (schema) => schema,
+        otherwise: (schema) => schema.test(
+          'not-exist',
+          'NEXT_PUBLIC_DEX_POOLS_ENABLED can only be used with NEXT_PUBLIC_CONTRACT_INFO_API_HOST',
+          value => value === undefined,
+        ),
+      }),
+    NEXT_PUBLIC_SAVE_ON_GAS_ENABLED: yup.boolean(),
+    NEXT_PUBLIC_ADDRESS_USERNAME_TAG: yup
+      .mixed()
+      .test('shape', 'Invalid schema were provided for NEXT_PUBLIC_ADDRESS_USERNAME_TAG, it should have api_url_template', (data) => {
+        const isUndefined = data === undefined;
+        const valueSchema = yup.object<AddressProfileAPIConfig>().transform(replaceQuotes).json().shape({
+          api_url_template: yup.string().required(),
+          tag_link_template: yup.string(),
+          tag_icon: yup.string(),
+          tag_bg_color: yup.string(),
+          tag_text_color: yup.string(),
+        });
+
+        return isUndefined || valueSchema.isValidSync(data);
+      }),
+    NEXT_PUBLIC_REWARDS_SERVICE_API_HOST: yup.string().test(urlTest),
+    NEXT_PUBLIC_XSTAR_SCORE_URL: yup.string().test(urlTest),
+    NEXT_PUBLIC_GAME_BADGE_CLAIM_LINK: yup.string().test(urlTest),
 
     // 6. External services envs
     NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: yup.string(),
     NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY: yup.string(),
+    NEXT_PUBLIC_RE_CAPTCHA_V3_APP_SITE_KEY: yup.string(), // DEPRECATED
     NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID: yup.string(),
     NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN: yup.string(),
     NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY: yup.string(),
+    NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN: yup.string(),
 
     // Misc
     NEXT_PUBLIC_USE_NEXT_JS_PROXY: yup.boolean(),
@@ -490,6 +925,7 @@ const schema = yup
   .concat(adsBannerSchema)
   .concat(marketplaceSchema)
   .concat(rollupSchema)
+  .concat(celoSchema)
   .concat(beaconChainSchema)
   .concat(bridgedTokensSchema)
   .concat(sentrySchema);
diff --git a/deploy/tools/envs-validator/test.sh b/deploy/tools/envs-validator/test.sh
index 179ef25bc9..46d3ea3fca 100755
--- a/deploy/tools/envs-validator/test.sh
+++ b/deploy/tools/envs-validator/test.sh
@@ -1,6 +1,5 @@
 #!/bin/bash
 
-secrets_file=".env.secrets"
 test_folder="./test"
 common_file="${test_folder}/.env.common"
 
@@ -8,10 +7,9 @@ common_file="${test_folder}/.env.common"
 export NEXT_PUBLIC_GIT_COMMIT_SHA=$(git rev-parse --short HEAD)
 export NEXT_PUBLIC_GIT_TAG=$(git describe --tags --abbrev=0)
 ../../scripts/collect_envs.sh ../../../docs/ENVS.md
-cp ../../../.env.example ${secrets_file}
 
 # Copy test assets
-mkdir -p "./public/assets"
+mkdir -p "./public/assets/configs"
 cp -r ${test_folder}/assets ./public/
 
 # Build validator script
@@ -26,7 +24,6 @@ validate_file() {
     dotenv \
         -e $test_file \
         -e $common_file \
-        -e $secrets_file \
             yarn run validate -- --silent
 
     if [ $? -eq 0 ]; then
@@ -46,4 +43,4 @@ for file in "${test_files[@]}"; do
     if [ $? -eq 1 ]; then
         exit 1
     fi
-done
\ No newline at end of file
+done
diff --git a/deploy/tools/envs-validator/test/.env.adbutler_add b/deploy/tools/envs-validator/test/.env.adbutler_add
new file mode 100644
index 0000000000..7f1968e4bb
--- /dev/null
+++ b/deploy/tools/envs-validator/test/.env.adbutler_add
@@ -0,0 +1,4 @@
+NEXT_PUBLIC_AD_BANNER_PROVIDER='slise'
+NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER='adbutler'
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={'id':'123456','width':'728','height':'90'}
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={'id':'654321','width':'300','height':'100'}
\ No newline at end of file
diff --git a/deploy/tools/envs-validator/test/.env.alt b/deploy/tools/envs-validator/test/.env.alt
new file mode 100644
index 0000000000..172a809a56
--- /dev/null
+++ b/deploy/tools/envs-validator/test/.env.alt
@@ -0,0 +1,8 @@
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=none
+NEXT_PUBLIC_API_SPEC_URL=none
+NEXT_PUBLIC_VIEWS_CONTRACT_EXTRA_VERIFICATION_METHODS=none
+NEXT_PUBLIC_HOMEPAGE_STATS=[]
+NEXT_PUBLIC_VIEWS_ADDRESS_FORMAT=['base16','bech32']
+NEXT_PUBLIC_VIEWS_ADDRESS_BECH_32_PREFIX=foo
+NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=xxx
+NEXT_PUBLIC_RE_CAPTCHA_V3_APP_SITE_KEY=deprecated
\ No newline at end of file
diff --git a/deploy/tools/envs-validator/test/.env.arbitrum b/deploy/tools/envs-validator/test/.env.arbitrum
new file mode 100644
index 0000000000..ee0ce91f00
--- /dev/null
+++ b/deploy/tools/envs-validator/test/.env.arbitrum
@@ -0,0 +1,4 @@
+NEXT_PUBLIC_ROLLUP_TYPE=arbitrum
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://example.com
+NEXT_PUBLIC_ROLLUP_HOMEPAGE_SHOW_LATEST_BLOCKS=true
+NEXT_PUBLIC_ROLLUP_PARENT_CHAIN_NAME=DuckChain
\ No newline at end of file
diff --git a/deploy/tools/envs-validator/test/.env.base b/deploy/tools/envs-validator/test/.env.base
index 584200a7c0..debb88fd4e 100644
--- a/deploy/tools/envs-validator/test/.env.base
+++ b/deploy/tools/envs-validator/test/.env.base
@@ -1,3 +1,14 @@
+NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN=https://rollbar.com
+NEXT_PUBLIC_AUTH_URL=https://example.com
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_LOGOUT_URL=https://example.com
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=xxx
+NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=xxx
+NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID=UA-XXXXXX-X
+NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN=xxx
+NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY=xxx
+NEXT_PUBLIC_AUTH0_CLIENT_ID=xxx
+NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY=xxx
 NEXT_PUBLIC_AD_TEXT_PROVIDER=coinzilla
 NEXT_PUBLIC_AD_BANNER_PROVIDER=slise
 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://example.com
@@ -9,28 +20,39 @@ NEXT_PUBLIC_APP_PORT=3000
 NEXT_PUBLIC_APP_PROTOCOL=http
 NEXT_PUBLIC_BRIDGED_TOKENS_CHAINS=[{'id':'1','title':'Ethereum','short_title':'ETH','base_url':'https://example.com'}]
 NEXT_PUBLIC_BRIDGED_TOKENS_BRIDGES=[{'type':'omni','title':'OmniBridge','short_title':'OMNI'}]
+NEXT_PUBLIC_COLOR_THEME_DEFAULT=dim
 NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.blockscout.com/?address={hash}&blockscout={domain}','icon_url':'https://example.com/icon.svg'}]
 NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://example.com
+NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED=true
 NEXT_PUBLIC_FEATURED_NETWORKS=https://example.com
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/accounts','/apps']
+NEXT_PUBLIC_NAVIGATION_LAYOUT=horizontal
+NEXT_PUBLIC_FONT_FAMILY_HEADING={'name':'Montserrat','url':'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap'}
+NEXT_PUBLIC_FONT_FAMILY_BODY={'name':'Raleway','url':'https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap'}
 NEXT_PUBLIC_FOOTER_LINKS=https://example.com
 NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
+NEXT_PUBLIC_HELIA_VERIFIED_FETCH_ENABLED=false
 NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS=false
 NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS=false
+NEXT_PUBLIC_MAX_CONTENT_WIDTH_ENABLED=false
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_STATS=['total_blocks','average_block_time','total_txs','wallet_addresses','gas_tracker','current_epoch']
 NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR='#fff'
 NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND='rgb(255, 145, 0)'
-NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER=true
-NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME=true
+NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG={'background':['lightpink'],'text_color':['deepskyblue','white'],'border':['3px solid black']}
+NEXT_PUBLIC_GAS_TRACKER_ENABLED=true
+NEXT_PUBLIC_GAS_TRACKER_UNITS=['gwei']
 NEXT_PUBLIC_IS_TESTNET=true
-NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://example.com
-NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://example.com
-NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://example.com
 NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE='<a href="#">Hello</a>'
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://example.com
+NEXT_PUBLIC_METASUITES_ENABLED=true
+NEXT_PUBLIC_NAVIGATION_HIDDEN_LINKS=['eth_rpc_api','rpc_api']
 NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
 NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
 NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Explorer','baseUrl':'https://example.com/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]
-NEXT_PUBLIC_NETWORK_GOVERNANCE_TOKEN_SYMBOL=gETH
+NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL=GNO
+NEXT_PUBLIC_NETWORK_MULTIPLE_GAS_CURRENCIES=true
 NEXT_PUBLIC_NETWORK_ICON=https://example.com/icon.png
 NEXT_PUBLIC_NETWORK_ICON_DARK=https://example.com/icon.png
 NEXT_PUBLIC_NETWORK_LOGO=https://example.com/logo.png
@@ -40,16 +62,30 @@ NEXT_PUBLIC_NETWORK_SHORT_NAME=Test
 NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
 NEXT_PUBLIC_OG_DESCRIPTION='Hello world!'
 NEXT_PUBLIC_OG_IMAGE_URL=https://example.com/image.png
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_SEO_ENHANCED_DATA_ENABLED=true
 NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://blockscout.com','text':'Blockscout'}]
 NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE=true
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-mainnet.safe.global
 NEXT_PUBLIC_STATS_API_HOST=https://example.com
+NEXT_PUBLIC_STATS_API_BASE_PATH=/
 NEXT_PUBLIC_USE_NEXT_JS_PROXY=false
 NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE=gradient_avatar
+NEXT_PUBLIC_VIEWS_ADDRESS_FORMAT=['base16']
 NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS=['top_accounts']
+NEXT_PUBLIC_VIEWS_CONTRACT_EXTRA_VERIFICATION_METHODS=['solidity-hardhat','solidity-foundry']
+NEXT_PUBLIC_VIEWS_CONTRACT_LANGUAGE_FILTERS=['solidity','vyper','yul','scilla']
 NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS=['burnt_fees','total_reward']
 NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES=[{'name':'NFT Marketplace','collection_url':'https://example.com/{hash}','instance_url':'https://example.com/{hash}/{id}','logo_url':'https://example.com/logo.png'}]
 NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS=['fee_per_gas']
 NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS=['value','fee_currency','gas_price','tx_fee','gas_fees','burnt_fees']
 NEXT_PUBLIC_VISUALIZE_API_HOST=https://example.com
+NEXT_PUBLIC_VISUALIZE_API_BASE_PATH=https://example.com
 NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET=false
 NEXT_PUBLIC_WEB3_WALLETS=['coinbase','metamask','token_pocket']
+NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE=stability
+NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swap','icon':'swap','dappId':'uniswap'},{'text':'Payment link','icon':'payment_link','url':'https://example.com'}]
+NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG=[{'name': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'}]
+NEXT_PUBLIC_GAS_REFUEL_PROVIDER_CONFIG={'name': 'Need gas?', 'dapp_id': 'smol-refuel', 'url_template': 'https://smolrefuel.com/?outboundChain={chainId}&partner=blockscout&utm_source=blockscout&utm_medium=address&disableBridges=true', 'logo': 'https://blockscout-content.s3.amazonaws.com/smolrefuel-logo-action-button.png'}
+NEXT_PUBLIC_SAVE_ON_GAS_ENABLED=true
+NEXT_PUBLIC_REWARDS_SERVICE_API_HOST=https://example.com
diff --git a/deploy/tools/envs-validator/test/.env.celo b/deploy/tools/envs-validator/test/.env.celo
new file mode 100644
index 0000000000..1082044208
--- /dev/null
+++ b/deploy/tools/envs-validator/test/.env.celo
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_CELO_ENABLED=true
+NEXT_PUBLIC_CELO_L2_UPGRADE_BLOCK=420
\ No newline at end of file
diff --git a/deploy/tools/envs-validator/test/.env.common b/deploy/tools/envs-validator/test/.env.common
index 1f900840ff..5788f392d3 100644
--- a/deploy/tools/envs-validator/test/.env.common
+++ b/deploy/tools/envs-validator/test/.env.common
@@ -1,7 +1,4 @@
 NEXT_PUBLIC_API_HOST=blockscout.com
 NEXT_PUBLIC_APP_HOST=localhost
-NEXT_PUBLIC_AUTH_URL=https://example.com
-NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
-NEXT_PUBLIC_LOGOUT_URL=https://example.com
 NEXT_PUBLIC_NETWORK_ID=1
 NEXT_PUBLIC_NETWORK_NAME=Testnet
diff --git a/deploy/tools/envs-validator/test/.env.marketplace b/deploy/tools/envs-validator/test/.env.marketplace
new file mode 100644
index 0000000000..6cc6b1f839
--- /dev/null
+++ b/deploy/tools/envs-validator/test/.env.marketplace
@@ -0,0 +1,12 @@
+NEXT_PUBLIC_MARKETPLACE_ENABLED=true
+NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://example.com
+NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://example.com
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://example.com
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://example.com
+NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL=https://example.com
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://example.com
+NEXT_PUBLIC_MARKETPLACE_FEATURED_APP=aave
+NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/maxaleks/36f779fd7d74877b57ec7a25a9a3a6c9/raw/746a8a59454c0537235ee44616c4690ce3bbf3c8/banner.html
+NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://www.basename.app
+NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY=test
+NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID=test
diff --git a/deploy/tools/envs-validator/test/.env.optimism b/deploy/tools/envs-validator/test/.env.optimism
new file mode 100644
index 0000000000..4821e1ca62
--- /dev/null
+++ b/deploy/tools/envs-validator/test/.env.optimism
@@ -0,0 +1,6 @@
+NEXT_PUBLIC_ROLLUP_TYPE=optimistic
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://example.com
+NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://example.com
+NEXT_PUBLIC_FAULT_PROOF_ENABLED=true
+NEXT_PUBLIC_ROLLUP_HOMEPAGE_SHOW_LATEST_BLOCKS=true
+NEXT_PUBLIC_ROLLUP_OUTPUT_ROOTS_ENABLED=false
\ No newline at end of file
diff --git a/deploy/tools/envs-validator/test/.env.rollup b/deploy/tools/envs-validator/test/.env.rollup
deleted file mode 100644
index 8534221d99..0000000000
--- a/deploy/tools/envs-validator/test/.env.rollup
+++ /dev/null
@@ -1,3 +0,0 @@
-NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK=true
-NEXT_PUBLIC_L1_BASE_URL=https://example.com
-NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL=https://example.com
\ No newline at end of file
diff --git a/deploy/tools/envs-validator/test/.env.sentry b/deploy/tools/envs-validator/test/.env.sentry
deleted file mode 100644
index c34c4d4f26..0000000000
--- a/deploy/tools/envs-validator/test/.env.sentry
+++ /dev/null
@@ -1,5 +0,0 @@
-NEXT_PUBLIC_SENTRY_DSN=https://sentry.io
-SENTRY_CSP_REPORT_URI=https://sentry.io
-NEXT_PUBLIC_SENTRY_ENABLE_TRACING=true
-NEXT_PUBLIC_APP_ENV=production
-NEXT_PUBLIC_APP_INSTANCE=duck
\ No newline at end of file
diff --git a/deploy/tools/envs-validator/test/assets/featured_networks.json b/deploy/tools/envs-validator/test/assets/configs/featured_networks.json
similarity index 100%
rename from deploy/tools/envs-validator/test/assets/featured_networks.json
rename to deploy/tools/envs-validator/test/assets/configs/featured_networks.json
diff --git a/deploy/tools/envs-validator/test/assets/footer_links.json b/deploy/tools/envs-validator/test/assets/configs/footer_links.json
similarity index 100%
rename from deploy/tools/envs-validator/test/assets/footer_links.json
rename to deploy/tools/envs-validator/test/assets/configs/footer_links.json
diff --git a/deploy/tools/envs-validator/test/assets/marketplace_categories.json b/deploy/tools/envs-validator/test/assets/configs/marketplace_categories.json
similarity index 100%
rename from deploy/tools/envs-validator/test/assets/marketplace_categories.json
rename to deploy/tools/envs-validator/test/assets/configs/marketplace_categories.json
diff --git a/deploy/tools/envs-validator/test/assets/marketplace_config.json b/deploy/tools/envs-validator/test/assets/configs/marketplace_config.json
similarity index 100%
rename from deploy/tools/envs-validator/test/assets/marketplace_config.json
rename to deploy/tools/envs-validator/test/assets/configs/marketplace_config.json
diff --git a/deploy/tools/envs-validator/test/assets/configs/marketplace_security_reports.json b/deploy/tools/envs-validator/test/assets/configs/marketplace_security_reports.json
new file mode 100644
index 0000000000..cf0f481ae3
--- /dev/null
+++ b/deploy/tools/envs-validator/test/assets/configs/marketplace_security_reports.json
@@ -0,0 +1,1073 @@
+[
+  {
+    "appName": "paraswap",
+    "doc": "https://developers.paraswap.network/smart-contracts",
+    "chainsData": {
+      "1": {
+        "overallInfo": {
+          "verifiedNumber": 4,
+          "totalContractsNumber": 4,
+          "solidityScanContractsNumber": 4,
+          "securityScore": 77.41749999999999,
+          "issueSeverityDistribution": {
+            "critical": 5,
+            "gas": 58,
+            "high": 9,
+            "informational": 27,
+            "low": 41,
+            "medium": 5
+          }
+        },
+        "contractsData": [
+          {
+            "address": "0xDEF171Fe48CF0115B1d80b88dc8eAB59176FEe57",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0xDEF171Fe48CF0115B1d80b88dc8eAB59176FEe57",
+              "contract_chain": "optimism",
+              "contract_platform": "blockscout",
+              "contract_url": "https://optimism.blockscout.com/address/0xDEF171Fe48CF0115B1d80b88dc8eAB59176FEe57",
+              "contractname": "AugustusSwapper",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0xDEF171Fe48CF0115B1d80b88dc8eAB59176FEe57/blockscout/eth?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 8,
+                  "high": 4,
+                  "informational": 7,
+                  "low": 8,
+                  "medium": 1
+                },
+                "lines_analyzed_count": 180,
+                "scan_time_taken": 1,
+                "score": "3.61",
+                "score_v2": "72.22",
+                "threat_score": "73.68"
+              }
+            }
+          },
+          {
+            "address": "0x216b4b4ba9f3e719726886d34a177484278bfcae",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x216b4b4ba9f3e719726886d34a177484278bfcae",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0x216b4b4ba9f3e719726886d34a177484278bfcae",
+              "contractname": "TokenTransferProxy",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x216b4b4ba9f3e719726886d34a177484278bfcae/blockscout/eth?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 1,
+                  "gas": 29,
+                  "high": 5,
+                  "informational": 14,
+                  "low": 21,
+                  "medium": 3
+                },
+                "lines_analyzed_count": 553,
+                "scan_time_taken": 1,
+                "score": "3.92",
+                "score_v2": "78.48",
+                "threat_score": "78.95"
+              }
+            }
+          },
+          {
+            "address": "0xa68bEA62Dc4034A689AA0F58A76681433caCa663",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0xa68bEA62Dc4034A689AA0F58A76681433caCa663",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0xa68bEA62Dc4034A689AA0F58A76681433caCa663",
+              "contractname": "AugustusRegistry",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0xa68bEA62Dc4034A689AA0F58A76681433caCa663/blockscout/eth?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 3,
+                  "high": 0,
+                  "informational": 5,
+                  "low": 4,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 103,
+                "scan_time_taken": 0,
+                "score": "4.22",
+                "score_v2": "84.47",
+                "threat_score": "88.89"
+              }
+            }
+          },
+          {
+            "address": "0xeF13101C5bbD737cFb2bF00Bbd38c626AD6952F7",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0xeF13101C5bbD737cFb2bF00Bbd38c626AD6952F7",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0xeF13101C5bbD737cFb2bF00Bbd38c626AD6952F7",
+              "contractname": "FeeClaimer",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0xeF13101C5bbD737cFb2bF00Bbd38c626AD6952F7/blockscout/eth?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 18,
+                  "high": 0,
+                  "informational": 1,
+                  "low": 8,
+                  "medium": 1
+                },
+                "lines_analyzed_count": 149,
+                "scan_time_taken": 0,
+                "score": "3.72",
+                "score_v2": "74.50",
+                "threat_score": "94.74"
+              }
+            }
+          }
+        ]
+      },
+      "10": {
+        "overallInfo": {
+          "verifiedNumber": 3,
+          "totalContractsNumber": 4,
+          "solidityScanContractsNumber": 3,
+          "securityScore": 75.44333333333333,
+          "issueSeverityDistribution": {
+            "critical": 4,
+            "gas": 29,
+            "high": 4,
+            "informational": 20,
+            "low": 20,
+            "medium": 2
+          }
+        },
+        "contractsData": [
+          {
+            "address": "0xDEF171Fe48CF0115B1d80b88dc8eAB59176FEe57",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0xDEF171Fe48CF0115B1d80b88dc8eAB59176FEe57",
+              "contract_chain": "optimism",
+              "contract_platform": "blockscout",
+              "contract_url": "https://optimism.blockscout.com/address/0xDEF171Fe48CF0115B1d80b88dc8eAB59176FEe57",
+              "contractname": "AugustusSwapper",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0xDEF171Fe48CF0115B1d80b88dc8eAB59176FEe57/blockscout/optimism?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 8,
+                  "high": 4,
+                  "informational": 7,
+                  "low": 8,
+                  "medium": 1
+                },
+                "lines_analyzed_count": 180,
+                "scan_time_taken": 1,
+                "score": "3.61",
+                "score_v2": "72.22",
+                "threat_score": "73.68"
+              }
+            }
+          },
+          {
+            "address": "0x216B4B4Ba9F3e719726886d34a177484278Bfcae",
+            "isVerified": false,
+            "solidityScanReport": null
+          },
+          {
+            "address": "0x6e7bE86000dF697facF4396efD2aE2C322165dC3",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x6e7bE86000dF697facF4396efD2aE2C322165dC3",
+              "contract_chain": "optimism",
+              "contract_platform": "blockscout",
+              "contract_url": "https://optimism.blockscout.com/address/0x6e7bE86000dF697facF4396efD2aE2C322165dC3",
+              "contractname": "AugustusRegistry",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x6e7bE86000dF697facF4396efD2aE2C322165dC3/blockscout/optimism?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 3,
+                  "high": 0,
+                  "informational": 5,
+                  "low": 4,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 102,
+                "scan_time_taken": 0,
+                "score": "4.22",
+                "score_v2": "84.31",
+                "threat_score": "88.89"
+              }
+            }
+          },
+          {
+            "address": "0xA7465CCD97899edcf11C56D2d26B49125674e45F",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0xA7465CCD97899edcf11C56D2d26B49125674e45F",
+              "contract_chain": "optimism",
+              "contract_platform": "blockscout",
+              "contract_url": "https://optimism.blockscout.com/address/0xA7465CCD97899edcf11C56D2d26B49125674e45F",
+              "contractname": "FeeClaimer",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0xA7465CCD97899edcf11C56D2d26B49125674e45F/blockscout/optimism?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 18,
+                  "high": 0,
+                  "informational": 8,
+                  "low": 8,
+                  "medium": 1
+                },
+                "lines_analyzed_count": 149,
+                "scan_time_taken": 1,
+                "score": "3.49",
+                "score_v2": "69.80",
+                "threat_score": "94.74"
+              }
+            }
+          }
+        ]
+      },
+      "8453": {
+        "overallInfo": {
+          "verifiedNumber": 1,
+          "totalContractsNumber": 4,
+          "solidityScanContractsNumber": 1,
+          "securityScore": 73.33,
+          "issueSeverityDistribution": {
+            "critical": 4,
+            "gas": 8,
+            "high": 4,
+            "informational": 5,
+            "low": 8,
+            "medium": 1
+          }
+        },
+        "contractsData": [
+          {
+            "address": "0x59C7C832e96D2568bea6db468C1aAdcbbDa08A52",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x59C7C832e96D2568bea6db468C1aAdcbbDa08A52",
+              "contract_chain": "base",
+              "contract_platform": "blockscout",
+              "contract_url": "https://base.blockscout.com/address/0x59C7C832e96D2568bea6db468C1aAdcbbDa08A52",
+              "contractname": "AugustusSwapper",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x59C7C832e96D2568bea6db468C1aAdcbbDa08A52/blockscout/base?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 8,
+                  "high": 4,
+                  "informational": 5,
+                  "low": 8,
+                  "medium": 1
+                },
+                "lines_analyzed_count": 180,
+                "scan_time_taken": 1,
+                "score": "3.67",
+                "score_v2": "73.33",
+                "threat_score": "73.68"
+              }
+            }
+          },
+          {
+            "address": "0x93aAAe79a53759cD164340E4C8766E4Db5331cD7",
+            "isVerified": false,
+            "solidityScanReport": null
+          },
+          {
+            "address": "0x7e31b336f9e8ba52ba3c4ac861b033ba90900bb3",
+            "isVerified": false,
+            "solidityScanReport": null
+          },
+          {
+            "address": "0x9aaB4B24541af30fD72784ED98D8756ac0eFb3C7",
+            "isVerified": false,
+            "solidityScanReport": null
+          }
+        ]
+      }
+    }
+  },
+  {
+    "appName": "mean-finance",
+    "doc": "https://docs.mean.finance/guides/smart-contract-registry",
+    "chainsData": {
+      "1": {
+        "overallInfo": {
+          "verifiedNumber": 4,
+          "totalContractsNumber": 6,
+          "solidityScanContractsNumber": 4,
+          "securityScore": 61.36750000000001,
+          "issueSeverityDistribution": {
+            "critical": 6,
+            "gas": 25,
+            "high": 1,
+            "informational": 10,
+            "low": 20,
+            "medium": 3
+          }
+        },
+        "contractsData": [
+          {
+            "address": "0xA5AdC5484f9997fBF7D405b9AA62A7d88883C345",
+            "isVerified": false,
+            "solidityScanReport": null
+          },
+          {
+            "address": "0x20bdAE1413659f47416f769a4B27044946bc9923",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x20bdAE1413659f47416f769a4B27044946bc9923",
+              "contract_chain": "optimism",
+              "contract_platform": "blockscout",
+              "contract_url": "https://optimism.blockscout.com/address/0x20bdAE1413659f47416f769a4B27044946bc9923",
+              "contractname": "DCAPermissionsManager",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x20bdAE1413659f47416f769a4B27044946bc9923/blockscout/eth?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 2,
+                  "gas": 22,
+                  "high": 0,
+                  "informational": 8,
+                  "low": 11,
+                  "medium": 3
+                },
+                "lines_analyzed_count": 314,
+                "scan_time_taken": 1,
+                "score": "3.87",
+                "score_v2": "77.39",
+                "threat_score": "88.89"
+              }
+            }
+          },
+          {
+            "address": "0xDf0dbc66f85979a1d54671c4D9e439F306Be27EE",
+            "isVerified": false,
+            "solidityScanReport": null
+          },
+          {
+            "address": "0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b",
+              "contractname": "DCAHubPositionDescriptor",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b/blockscout/eth?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 1,
+                  "high": 1,
+                  "informational": 2,
+                  "low": 3,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 280,
+                "scan_time_taken": 1,
+                "score": "4.77",
+                "score_v2": "95.36",
+                "threat_score": "100.00"
+              }
+            }
+          },
+          {
+            "address": "0x49c590F6a2dfB0f809E82B9e2BF788C0Dd1c31f9",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x49c590F6a2dfB0f809E82B9e2BF788C0Dd1c31f9",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0x49c590F6a2dfB0f809E82B9e2BF788C0Dd1c31f9",
+              "contractname": "DCAHubCompanion",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x49c590F6a2dfB0f809E82B9e2BF788C0Dd1c31f9/blockscout/eth?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 1,
+                  "high": 0,
+                  "informational": 0,
+                  "low": 3,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 11,
+                "scan_time_taken": 0,
+                "score": "1.82",
+                "score_v2": "36.36",
+                "threat_score": "100.00"
+              }
+            }
+          },
+          {
+            "address": "0x5ad2fED59E8DF461c6164c31B4267Efb7cBaF9C0",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x5ad2fED59E8DF461c6164c31B4267Efb7cBaF9C0",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0x5ad2fED59E8DF461c6164c31B4267Efb7cBaF9C0",
+              "contractname": "DCAHubCompanion",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x5ad2fED59E8DF461c6164c31B4267Efb7cBaF9C0/blockscout/eth?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 1,
+                  "high": 0,
+                  "informational": 0,
+                  "low": 3,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 11,
+                "scan_time_taken": 0,
+                "score": "1.82",
+                "score_v2": "36.36",
+                "threat_score": "100.00"
+              }
+            }
+          }
+        ]
+      },
+      "10": {
+        "overallInfo": {
+          "verifiedNumber": 5,
+          "totalContractsNumber": 6,
+          "solidityScanContractsNumber": 5,
+          "securityScore": 66.986,
+          "issueSeverityDistribution": {
+            "critical": 6,
+            "gas": 26,
+            "high": 1,
+            "informational": 10,
+            "low": 23,
+            "medium": 3
+          }
+        },
+        "contractsData": [
+          {
+            "address": "0xA5AdC5484f9997fBF7D405b9AA62A7d88883C345",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0xA5AdC5484f9997fBF7D405b9AA62A7d88883C345",
+              "contract_chain": "optimism",
+              "contract_platform": "blockscout",
+              "contract_url": "https://optimism.blockscout.com/address/0xA5AdC5484f9997fBF7D405b9AA62A7d88883C345",
+              "contractname": "DCAHub",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0xA5AdC5484f9997fBF7D405b9AA62A7d88883C345/blockscout/optimism?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 1,
+                  "high": 0,
+                  "informational": 0,
+                  "low": 3,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 23,
+                "scan_time_taken": 0,
+                "score": "3.48",
+                "score_v2": "69.57",
+                "threat_score": "94.44"
+              }
+            }
+          },
+          {
+            "address": "0x20bdAE1413659f47416f769a4B27044946bc9923",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x20bdAE1413659f47416f769a4B27044946bc9923",
+              "contract_chain": "optimism",
+              "contract_platform": "blockscout",
+              "contract_url": "https://optimism.blockscout.com/address/0x20bdAE1413659f47416f769a4B27044946bc9923",
+              "contractname": "DCAPermissionsManager",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x20bdAE1413659f47416f769a4B27044946bc9923/blockscout/optimism?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 2,
+                  "gas": 22,
+                  "high": 0,
+                  "informational": 8,
+                  "low": 11,
+                  "medium": 3
+                },
+                "lines_analyzed_count": 314,
+                "scan_time_taken": 1,
+                "score": "3.87",
+                "score_v2": "77.39",
+                "threat_score": "88.89"
+              }
+            }
+          },
+          {
+            "address": "0xDf0dbc66f85979a1d54671c4D9e439F306Be27EE",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0xDf0dbc66f85979a1d54671c4D9e439F306Be27EE",
+              "contract_chain": "optimism",
+              "contract_platform": "blockscout",
+              "contract_url": "https://optimism.blockscout.com/address/0xDf0dbc66f85979a1d54671c4D9e439F306Be27EE",
+              "contractname": "DCAHubCompanion",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0xDf0dbc66f85979a1d54671c4D9e439F306Be27EE/blockscout/optimism?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 1,
+                  "high": 0,
+                  "informational": 0,
+                  "low": 3,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 16,
+                "scan_time_taken": 0,
+                "score": "2.81",
+                "score_v2": "56.25",
+                "threat_score": "100.00"
+              }
+            }
+          },
+          {
+            "address": "0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b",
+              "contractname": "DCAHubPositionDescriptor",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b/blockscout/optimism?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 1,
+                  "high": 1,
+                  "informational": 2,
+                  "low": 3,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 280,
+                "scan_time_taken": 1,
+                "score": "4.77",
+                "score_v2": "95.36",
+                "threat_score": "100.00"
+              }
+            }
+          },
+          {
+            "address": "0x49c590F6a2dfB0f809E82B9e2BF788C0Dd1c31f9",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x49c590F6a2dfB0f809E82B9e2BF788C0Dd1c31f9",
+              "contract_chain": "optimism",
+              "contract_platform": "blockscout",
+              "contract_url": "https://optimism.blockscout.com/address/0x49c590F6a2dfB0f809E82B9e2BF788C0Dd1c31f9",
+              "contractname": "DCAHubCompanion",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x49c590F6a2dfB0f809E82B9e2BF788C0Dd1c31f9/blockscout/optimism?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 1,
+                  "high": 0,
+                  "informational": 0,
+                  "low": 3,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 11,
+                "scan_time_taken": 0,
+                "score": "1.82",
+                "score_v2": "36.36",
+                "threat_score": "100.00"
+              }
+            }
+          },
+          {
+            "address": "0x5ad2fED59E8DF461c6164c31B4267Efb7cBaF9C0",
+            "isVerified": false,
+            "solidityScanReport": null
+          }
+        ]
+      },
+      "8453": {
+        "overallInfo": {
+          "verifiedNumber": 4,
+          "totalContractsNumber": 6,
+          "solidityScanContractsNumber": 4,
+          "securityScore": 74.88,
+          "issueSeverityDistribution": {
+            "critical": 6,
+            "gas": 25,
+            "high": 1,
+            "informational": 7,
+            "low": 20,
+            "medium": 3
+          }
+        },
+        "contractsData": [
+          {
+            "address": "0xA5AdC5484f9997fBF7D405b9AA62A7d88883C345",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0xA5AdC5484f9997fBF7D405b9AA62A7d88883C345",
+              "contract_chain": "base",
+              "contract_platform": "blockscout",
+              "contract_url": "https://base.blockscout.com/address/0xA5AdC5484f9997fBF7D405b9AA62A7d88883C345",
+              "contractname": "DCAHub",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0xA5AdC5484f9997fBF7D405b9AA62A7d88883C345/blockscout/base?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 1,
+                  "high": 0,
+                  "informational": 0,
+                  "low": 3,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 23,
+                "scan_time_taken": 0,
+                "score": "3.48",
+                "score_v2": "69.57",
+                "threat_score": "94.44"
+              }
+            }
+          },
+          {
+            "address": "0x20bdAE1413659f47416f769a4B27044946bc9923",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x20bdAE1413659f47416f769a4B27044946bc9923",
+              "contract_chain": "base",
+              "contract_platform": "blockscout",
+              "contract_url": "https://base.blockscout.com/address/0x20bdAE1413659f47416f769a4B27044946bc9923",
+              "contractname": "DCAPermissionsManager",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x20bdAE1413659f47416f769a4B27044946bc9923/blockscout/base?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 2,
+                  "gas": 22,
+                  "high": 0,
+                  "informational": 5,
+                  "low": 11,
+                  "medium": 3
+                },
+                "lines_analyzed_count": 314,
+                "scan_time_taken": 1,
+                "score": "3.92",
+                "score_v2": "78.34",
+                "threat_score": "88.89"
+              }
+            }
+          },
+          {
+            "address": "0xDf0dbc66f85979a1d54671c4D9e439F306Be27EE",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0xDf0dbc66f85979a1d54671c4D9e439F306Be27EE",
+              "contract_chain": "base",
+              "contract_platform": "blockscout",
+              "contract_url": "https://base.blockscout.com/address/0xDf0dbc66f85979a1d54671c4D9e439F306Be27EE",
+              "contractname": "DCAHubCompanion",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0xDf0dbc66f85979a1d54671c4D9e439F306Be27EE/blockscout/base?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 1,
+                  "high": 0,
+                  "informational": 0,
+                  "low": 3,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 16,
+                "scan_time_taken": 0,
+                "score": "2.81",
+                "score_v2": "56.25",
+                "threat_score": "100.00"
+              }
+            }
+          },
+          {
+            "address": "0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b",
+              "contractname": "DCAHubPositionDescriptor",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b/blockscout/base?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 1,
+                  "high": 1,
+                  "informational": 2,
+                  "low": 3,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 280,
+                "scan_time_taken": 1,
+                "score": "4.77",
+                "score_v2": "95.36",
+                "threat_score": "100.00"
+              }
+            }
+          },
+          {
+            "address": "0x49c590F6a2dfB0f809E82B9e2BF788C0Dd1c31f9",
+            "isVerified": false,
+            "solidityScanReport": null
+          },
+          {
+            "address": "0x5ad2fED59E8DF461c6164c31B4267Efb7cBaF9C0",
+            "isVerified": false,
+            "solidityScanReport": null
+          }
+        ]
+      }
+    }
+  },
+  {
+    "appName": "cow-swap",
+    "doc": "https://docs.cow.fi/cow-protocol/reference/contracts/core#deployments",
+    "chainsData": {
+      "1": {
+        "overallInfo": {
+          "verifiedNumber": 3,
+          "totalContractsNumber": 3,
+          "solidityScanContractsNumber": 3,
+          "securityScore": 87.60000000000001,
+          "issueSeverityDistribution": {
+            "critical": 4,
+            "gas": 18,
+            "high": 0,
+            "informational": 13,
+            "low": 14,
+            "medium": 3
+          }
+        },
+        "contractsData": [
+          {
+            "address": "0x9008D19f58AAbD9eD0D60971565AA8510560ab41",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x9008D19f58AAbD9eD0D60971565AA8510560ab41",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0x9008D19f58AAbD9eD0D60971565AA8510560ab41",
+              "contractname": "GPv2Settlement",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x9008D19f58AAbD9eD0D60971565AA8510560ab41/blockscout/eth?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 16,
+                  "high": 0,
+                  "informational": 7,
+                  "low": 5,
+                  "medium": 3
+                },
+                "lines_analyzed_count": 493,
+                "scan_time_taken": 1,
+                "score": "4.57",
+                "score_v2": "91.48",
+                "threat_score": "94.74"
+              }
+            }
+          },
+          {
+            "address": "0x2c4c28DDBdAc9C5E7055b4C863b72eA0149D8aFE",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x2c4c28DDBdAc9C5E7055b4C863b72eA0149D8aFE",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0x2c4c28DDBdAc9C5E7055b4C863b72eA0149D8aFE",
+              "contractname": "EIP173Proxy",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x2c4c28DDBdAc9C5E7055b4C863b72eA0149D8aFE/blockscout/eth?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 0,
+                  "high": 0,
+                  "informational": 4,
+                  "low": 5,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 94,
+                "scan_time_taken": 0,
+                "score": "4.26",
+                "score_v2": "85.11",
+                "threat_score": "88.89"
+              }
+            }
+          },
+          {
+            "address": "0xC92E8bdf79f0507f65a392b0ab4667716BFE0110",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0xC92E8bdf79f0507f65a392b0ab4667716BFE0110",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0xC92E8bdf79f0507f65a392b0ab4667716BFE0110",
+              "contractname": "GPv2VaultRelayer",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0xC92E8bdf79f0507f65a392b0ab4667716BFE0110/blockscout/eth?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 2,
+                  "high": 0,
+                  "informational": 2,
+                  "low": 4,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 87,
+                "scan_time_taken": 0,
+                "score": "4.31",
+                "score_v2": "86.21",
+                "threat_score": "94.74"
+              }
+            }
+          }
+        ]
+      },
+      "100": {
+        "overallInfo": {
+          "verifiedNumber": 3,
+          "totalContractsNumber": 3,
+          "solidityScanContractsNumber": 3,
+          "securityScore": 87.60000000000001,
+          "issueSeverityDistribution": {
+            "critical": 4,
+            "gas": 18,
+            "high": 0,
+            "informational": 13,
+            "low": 14,
+            "medium": 3
+          }
+        },
+        "contractsData": [
+          {
+            "address": "0x9008D19f58AAbD9eD0D60971565AA8510560ab41",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x9008D19f58AAbD9eD0D60971565AA8510560ab41",
+              "contract_chain": "gnosis",
+              "contract_platform": "blockscout",
+              "contract_url": "https://gnosis.blockscout.com/address/0x9008D19f58AAbD9eD0D60971565AA8510560ab41",
+              "contractname": "GPv2Settlement",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x9008D19f58AAbD9eD0D60971565AA8510560ab41/blockscout/gnosis?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 16,
+                  "high": 0,
+                  "informational": 7,
+                  "low": 5,
+                  "medium": 3
+                },
+                "lines_analyzed_count": 493,
+                "scan_time_taken": 1,
+                "score": "4.57",
+                "score_v2": "91.48",
+                "threat_score": "94.74"
+              }
+            }
+          },
+          {
+            "address": "0x2c4c28DDBdAc9C5E7055b4C863b72eA0149D8aFE",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x2c4c28DDBdAc9C5E7055b4C863b72eA0149D8aFE",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0x2c4c28DDBdAc9C5E7055b4C863b72eA0149D8aFE",
+              "contractname": "EIP173Proxy",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x2c4c28DDBdAc9C5E7055b4C863b72eA0149D8aFE/blockscout/gnosis?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 0,
+                  "high": 0,
+                  "informational": 4,
+                  "low": 5,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 94,
+                "scan_time_taken": 0,
+                "score": "4.26",
+                "score_v2": "85.11",
+                "threat_score": "88.89"
+              }
+            }
+          },
+          {
+            "address": "0xC92E8bdf79f0507f65a392b0ab4667716BFE0110",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0xC92E8bdf79f0507f65a392b0ab4667716BFE0110",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0xC92E8bdf79f0507f65a392b0ab4667716BFE0110",
+              "contractname": "GPv2VaultRelayer",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0xC92E8bdf79f0507f65a392b0ab4667716BFE0110/blockscout/gnosis?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 2,
+                  "high": 0,
+                  "informational": 2,
+                  "low": 4,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 87,
+                "scan_time_taken": 0,
+                "score": "4.31",
+                "score_v2": "86.21",
+                "threat_score": "94.74"
+              }
+            }
+          }
+        ]
+      }
+    }
+  }
+]
diff --git a/deploy/tools/envs-validator/yarn.lock b/deploy/tools/envs-validator/yarn.lock
index ab1bf0f2b4..8259f31c56 100644
--- a/deploy/tools/envs-validator/yarn.lock
+++ b/deploy/tools/envs-validator/yarn.lock
@@ -21,6 +21,11 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
   integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
 
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
 "@jridgewell/set-array@^1.0.1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
@@ -44,7 +49,20 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
 
-"@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
+"@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
+"@jridgewell/trace-mapping@^0.3.20":
+  version "0.3.25"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
+"@jridgewell/trace-mapping@^0.3.9":
   version "0.3.18"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz#25783b2086daf6ff1dcb53c9249ae480e4dd4cd6"
   integrity sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==
@@ -52,28 +70,12 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
-"@types/eslint-scope@^3.7.3":
-  version "3.7.4"
-  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16"
-  integrity sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==
-  dependencies:
-    "@types/eslint" "*"
-    "@types/estree" "*"
-
-"@types/eslint@*":
-  version "8.44.0"
-  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.44.0.tgz#55818eabb376e2272f77fbf5c96c43137c3c1e53"
-  integrity sha512-gsF+c/0XOguWgaOgvFs+xnnRqt9GwgTvIks36WpE6ueeI4KCEHHd8K/CKHqhOqrJKsYH8m27kRzQEvWXAwXUTw==
-  dependencies:
-    "@types/estree" "*"
-    "@types/json-schema" "*"
+"@types/estree@^1.0.5":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
+  integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
 
-"@types/estree@*", "@types/estree@^1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.1.tgz#aa22750962f3bf0e79d753d3cc067f010c95f194"
-  integrity sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==
-
-"@types/json-schema@*", "@types/json-schema@^7.0.8":
+"@types/json-schema@^7.0.8":
   version "7.0.12"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.12.tgz#d70faba7039d5fca54c83c7dbab41051d2b6f6cb"
   integrity sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==
@@ -83,10 +85,10 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.4.2.tgz#129cc9ae69f93824f92fac653eebfb4812ab4af9"
   integrity sha512-Dd0BYtWgnWJKwO1jkmTrzofjK2QXXcai0dmtzvIBhcA+RsG5h8R3xlyta0kGOZRNfL9GuRtb1knmPEhQrePCEw==
 
-"@webassemblyjs/ast@1.11.6", "@webassemblyjs/ast@^1.11.5":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.6.tgz#db046555d3c413f8966ca50a95176a0e2c642e24"
-  integrity sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==
+"@webassemblyjs/ast@1.12.1", "@webassemblyjs/ast@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.12.1.tgz#bb16a0e8b1914f979f45864c23819cc3e3f0d4bb"
+  integrity sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==
   dependencies:
     "@webassemblyjs/helper-numbers" "1.11.6"
     "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
@@ -101,10 +103,10 @@
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz#6132f68c4acd59dcd141c44b18cbebbd9f2fa768"
   integrity sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==
 
-"@webassemblyjs/helper-buffer@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz#b66d73c43e296fd5e88006f18524feb0f2c7c093"
-  integrity sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==
+"@webassemblyjs/helper-buffer@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz#6df20d272ea5439bf20ab3492b7fb70e9bfcb3f6"
+  integrity sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==
 
 "@webassemblyjs/helper-numbers@1.11.6":
   version "1.11.6"
@@ -120,15 +122,15 @@
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz#bb2ebdb3b83aa26d9baad4c46d4315283acd51e9"
   integrity sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==
 
-"@webassemblyjs/helper-wasm-section@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz#ff97f3863c55ee7f580fd5c41a381e9def4aa577"
-  integrity sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==
+"@webassemblyjs/helper-wasm-section@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz#3da623233ae1a60409b509a52ade9bc22a37f7bf"
+  integrity sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==
   dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@webassemblyjs/helper-buffer" "1.11.6"
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
     "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
-    "@webassemblyjs/wasm-gen" "1.11.6"
+    "@webassemblyjs/wasm-gen" "1.12.1"
 
 "@webassemblyjs/ieee754@1.11.6":
   version "1.11.6"
@@ -149,59 +151,59 @@
   resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.11.6.tgz#90f8bc34c561595fe156603be7253cdbcd0fab5a"
   integrity sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==
 
-"@webassemblyjs/wasm-edit@^1.11.5":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz#c72fa8220524c9b416249f3d94c2958dfe70ceab"
-  integrity sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==
+"@webassemblyjs/wasm-edit@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz#9f9f3ff52a14c980939be0ef9d5df9ebc678ae3b"
+  integrity sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==
   dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@webassemblyjs/helper-buffer" "1.11.6"
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
     "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
-    "@webassemblyjs/helper-wasm-section" "1.11.6"
-    "@webassemblyjs/wasm-gen" "1.11.6"
-    "@webassemblyjs/wasm-opt" "1.11.6"
-    "@webassemblyjs/wasm-parser" "1.11.6"
-    "@webassemblyjs/wast-printer" "1.11.6"
-
-"@webassemblyjs/wasm-gen@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz#fb5283e0e8b4551cc4e9c3c0d7184a65faf7c268"
-  integrity sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/helper-wasm-section" "1.12.1"
+    "@webassemblyjs/wasm-gen" "1.12.1"
+    "@webassemblyjs/wasm-opt" "1.12.1"
+    "@webassemblyjs/wasm-parser" "1.12.1"
+    "@webassemblyjs/wast-printer" "1.12.1"
+
+"@webassemblyjs/wasm-gen@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz#a6520601da1b5700448273666a71ad0a45d78547"
+  integrity sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
     "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
     "@webassemblyjs/ieee754" "1.11.6"
     "@webassemblyjs/leb128" "1.11.6"
     "@webassemblyjs/utf8" "1.11.6"
 
-"@webassemblyjs/wasm-opt@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz#d9a22d651248422ca498b09aa3232a81041487c2"
-  integrity sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==
+"@webassemblyjs/wasm-opt@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz#9e6e81475dfcfb62dab574ac2dda38226c232bc5"
+  integrity sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==
   dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@webassemblyjs/helper-buffer" "1.11.6"
-    "@webassemblyjs/wasm-gen" "1.11.6"
-    "@webassemblyjs/wasm-parser" "1.11.6"
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
+    "@webassemblyjs/wasm-gen" "1.12.1"
+    "@webassemblyjs/wasm-parser" "1.12.1"
 
-"@webassemblyjs/wasm-parser@1.11.6", "@webassemblyjs/wasm-parser@^1.11.5":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz#bb85378c527df824004812bbdb784eea539174a1"
-  integrity sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==
+"@webassemblyjs/wasm-parser@1.12.1", "@webassemblyjs/wasm-parser@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz#c47acb90e6f083391e3fa61d113650eea1e95937"
+  integrity sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==
   dependencies:
-    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/ast" "1.12.1"
     "@webassemblyjs/helper-api-error" "1.11.6"
     "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
     "@webassemblyjs/ieee754" "1.11.6"
     "@webassemblyjs/leb128" "1.11.6"
     "@webassemblyjs/utf8" "1.11.6"
 
-"@webassemblyjs/wast-printer@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz#a7bf8dd7e362aeb1668ff43f35cb849f188eff20"
-  integrity sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==
+"@webassemblyjs/wast-printer@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz#bcecf661d7d1abdaf989d8341a4833e33e2b31ac"
+  integrity sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==
   dependencies:
-    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/ast" "1.12.1"
     "@xtuc/long" "4.2.2"
 
 "@webpack-cli/configtest@^2.1.1":
@@ -229,10 +231,10 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
-acorn-import-assertions@^1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz#507276249d684797c84e0734ef84860334cfb1ac"
-  integrity sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==
+acorn-import-attributes@^1.9.5:
+  version "1.9.5"
+  resolved "https://registry.yarnpkg.com/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz#7eb1557b1ba05ef18b5ed0ec67591bfab04688ef"
+  integrity sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==
 
 acorn@^8.7.1, acorn@^8.8.2:
   version "8.10.0"
@@ -261,32 +263,32 @@ ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
-braces@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
-  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+braces@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
   dependencies:
-    fill-range "^7.0.1"
+    fill-range "^7.1.1"
 
-browserslist@^4.14.5:
-  version "4.21.9"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.9.tgz#e11bdd3c313d7e2a9e87e8b4b0c7872b13897635"
-  integrity sha512-M0MFoZzbUrRU4KNfCrDLnvyE7gub+peetoTid3TBIqtunaDJyXlwhakT+/VkvSXcfIzFfK/nkCs4nmyTmxdNSg==
+browserslist@^4.21.10:
+  version "4.24.2"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.2.tgz#f5845bc91069dbd55ee89faf9822e1d885d16580"
+  integrity sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==
   dependencies:
-    caniuse-lite "^1.0.30001503"
-    electron-to-chromium "^1.4.431"
-    node-releases "^2.0.12"
-    update-browserslist-db "^1.0.11"
+    caniuse-lite "^1.0.30001669"
+    electron-to-chromium "^1.5.41"
+    node-releases "^2.0.18"
+    update-browserslist-db "^1.1.1"
 
 buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
-caniuse-lite@^1.0.30001503:
-  version "1.0.30001517"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001517.tgz#90fabae294215c3495807eb24fc809e11dc2f0a8"
-  integrity sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==
+caniuse-lite@^1.0.30001669:
+  version "1.0.30001673"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001673.tgz#5aa291557af1c71340e809987367410aab7a5a9e"
+  integrity sha512-WTrjUCSMp3LYX0nE12ECkV0a+e6LC85E0Auz75555/qr78Oc8YWhEPNfDd6SHdtlCMSzqtuXY0uyEMNRcsKpKw==
 
 chalk@^4.1.0:
   version "4.1.2"
@@ -366,12 +368,12 @@ dotenv@^16.0.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.3.1.tgz#369034de7d7e5b120972693352a3bf112172cc3e"
   integrity sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==
 
-electron-to-chromium@^1.4.431:
-  version "1.4.467"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.467.tgz#b0660bf644baff7eedea33b8c742fb53ec60e3c2"
-  integrity sha512-2qI70O+rR4poYeF2grcuS/bCps5KJh6y1jtZMDDEteyKJQrzLOEhFyXCLcHW6DTBjKjWkk26JhWoAi+Ux9A0fg==
+electron-to-chromium@^1.5.41:
+  version "1.5.47"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.47.tgz#ef0751bc19b28be8ee44cd8405309de3bf3b20c7"
+  integrity sha512-zS5Yer0MOYw4rtK2iq43cJagHZ8sXN0jDHDKzB+86gSBSAI4v07S97mcq+Gs2vclAxSh1j7vOAHxSVgduiiuVQ==
 
-enhanced-resolve@^5.0.0, enhanced-resolve@^5.15.0, enhanced-resolve@^5.7.0:
+enhanced-resolve@^5.0.0, enhanced-resolve@^5.7.0:
   version "5.15.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz#1af946c7d93603eb88e9896cee4904dc012e9c35"
   integrity sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==
@@ -379,6 +381,14 @@ enhanced-resolve@^5.0.0, enhanced-resolve@^5.15.0, enhanced-resolve@^5.7.0:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
+enhanced-resolve@^5.17.1:
+  version "5.17.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz#67bfbbcc2f81d511be77d686a90267ef7f898a15"
+  integrity sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
 envinfo@^7.7.3:
   version "7.10.0"
   resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.10.0.tgz#55146e3909cc5fe63c22da63fb15b05aeac35b13"
@@ -389,10 +399,10 @@ es-module-lexer@^1.2.1:
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.3.0.tgz#6be9c9e0b4543a60cd166ff6f8b4e9dae0b0c16f"
   integrity sha512-vZK7T0N2CBmBOixhmjdqx2gWVbFZ4DXZ/NyRMZVlJXPa7CyFS+/a4QQsDGDQy9ZfEzxFuNEsMLeQJnKP2p5/JA==
 
-escalade@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
-  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+escalade@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
+  integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
 
 eslint-scope@5.1.1:
   version "5.1.1"
@@ -439,10 +449,10 @@ fastest-levenshtein@^1.0.12:
   resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5"
   integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==
 
-fill-range@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
-  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
   dependencies:
     to-regex-range "^5.0.1"
 
@@ -464,7 +474,7 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-graceful-fs@^4.1.2, graceful-fs@^4.2.4, graceful-fs@^4.2.9:
+graceful-fs@^4.1.2, graceful-fs@^4.2.11, graceful-fs@^4.2.4:
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -577,11 +587,11 @@ merge-stream@^2.0.0:
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
 micromatch@^4.0.0:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
-  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
   dependencies:
-    braces "^3.0.2"
+    braces "^3.0.3"
     picomatch "^2.3.1"
 
 mime-db@1.52.0:
@@ -606,10 +616,10 @@ neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
-node-releases@^2.0.12:
-  version "2.0.13"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d"
-  integrity sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==
+node-releases@^2.0.18:
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.18.tgz#f010e8d35e2fe8d6b2944f03f70213ecedc4ca3f"
+  integrity sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==
 
 p-limit@^2.2.0:
   version "2.3.0"
@@ -645,10 +655,10 @@ path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
-picocolors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
-  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+picocolors@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
 
 picomatch@^2.3.1:
   version "2.3.1"
@@ -796,21 +806,21 @@ tapable@^2.1.1, tapable@^2.2.0:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
 
-terser-webpack-plugin@^5.3.7:
-  version "5.3.9"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz#832536999c51b46d468067f9e37662a3b96adfe1"
-  integrity sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==
+terser-webpack-plugin@^5.3.10:
+  version "5.3.10"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz#904f4c9193c6fd2a03f693a2150c62a92f40d199"
+  integrity sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==
   dependencies:
-    "@jridgewell/trace-mapping" "^0.3.17"
+    "@jridgewell/trace-mapping" "^0.3.20"
     jest-worker "^27.4.5"
     schema-utils "^3.1.1"
     serialize-javascript "^6.0.1"
-    terser "^5.16.8"
+    terser "^5.26.0"
 
-terser@^5.16.8:
-  version "5.19.2"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.19.2.tgz#bdb8017a9a4a8de4663a7983f45c506534f9234e"
-  integrity sha512-qC5+dmecKJA4cpYxRa5aVkKehYsQKc+AHeKl0Oe62aYjBL8ZA33tTljktDHJSaxxMnbI5ZYw+o/S2DxxLu8OfA==
+terser@^5.26.0:
+  version "5.36.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.36.0.tgz#8b0dbed459ac40ff7b4c9fd5a3a2029de105180e"
+  integrity sha512-IYV9eNMuFAV4THUspIRXkLakHnV6XO7FEdtKjf/mDyrnqUg9LnlOn6/RwRvM9SZjR4GUq8Nk8zj67FzVARr74w==
   dependencies:
     "@jridgewell/source-map" "^0.3.3"
     acorn "^8.8.2"
@@ -867,13 +877,13 @@ type-fest@^2.19.0:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
   integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
 
-update-browserslist-db@^1.0.11:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz#9a2a641ad2907ae7b3616506f4b977851db5b940"
-  integrity sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==
+update-browserslist-db@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz#80846fba1d79e82547fb661f8d141e0945755fe5"
+  integrity sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==
   dependencies:
-    escalade "^3.1.1"
-    picocolors "^1.0.0"
+    escalade "^3.2.0"
+    picocolors "^1.1.0"
 
 uri-js@^4.2.2:
   version "4.4.1"
@@ -882,10 +892,10 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-watchpack@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
-  integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==
+watchpack@^2.4.1:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.2.tgz#2feeaed67412e7c33184e5a79ca738fbd38564da"
+  integrity sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==
   dependencies:
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.1.2"
@@ -923,33 +933,32 @@ webpack-sources@^3.2.3:
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
 webpack@^5.88.2:
-  version "5.88.2"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.88.2.tgz#f62b4b842f1c6ff580f3fcb2ed4f0b579f4c210e"
-  integrity sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==
-  dependencies:
-    "@types/eslint-scope" "^3.7.3"
-    "@types/estree" "^1.0.0"
-    "@webassemblyjs/ast" "^1.11.5"
-    "@webassemblyjs/wasm-edit" "^1.11.5"
-    "@webassemblyjs/wasm-parser" "^1.11.5"
+  version "5.95.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.95.0.tgz#8fd8c454fa60dad186fbe36c400a55848307b4c0"
+  integrity sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==
+  dependencies:
+    "@types/estree" "^1.0.5"
+    "@webassemblyjs/ast" "^1.12.1"
+    "@webassemblyjs/wasm-edit" "^1.12.1"
+    "@webassemblyjs/wasm-parser" "^1.12.1"
     acorn "^8.7.1"
-    acorn-import-assertions "^1.9.0"
-    browserslist "^4.14.5"
+    acorn-import-attributes "^1.9.5"
+    browserslist "^4.21.10"
     chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.15.0"
+    enhanced-resolve "^5.17.1"
     es-module-lexer "^1.2.1"
     eslint-scope "5.1.1"
     events "^3.2.0"
     glob-to-regexp "^0.4.1"
-    graceful-fs "^4.2.9"
+    graceful-fs "^4.2.11"
     json-parse-even-better-errors "^2.3.1"
     loader-runner "^4.2.0"
     mime-types "^2.1.27"
     neo-async "^2.6.2"
     schema-utils "^3.2.0"
     tapable "^2.1.1"
-    terser-webpack-plugin "^5.3.7"
-    watchpack "^2.4.0"
+    terser-webpack-plugin "^5.3.10"
+    watchpack "^2.4.1"
     webpack-sources "^3.2.3"
 
 which@^2.0.1:
diff --git a/deploy/tools/favicon-generator/.gitignore b/deploy/tools/favicon-generator/.gitignore
old mode 100755
new mode 100644
index 09af2dfe51..8b8c2bf2a8
--- a/deploy/tools/favicon-generator/.gitignore
+++ b/deploy/tools/favicon-generator/.gitignore
@@ -1,4 +1,4 @@
-/output
-config.json
-response.json
-favicon_package**
\ No newline at end of file
+/node_modules
+/public
+.env
+/output
\ No newline at end of file
diff --git a/deploy/tools/favicon-generator/config.template.json b/deploy/tools/favicon-generator/config.template.json
deleted file mode 100755
index 4d032e8bb9..0000000000
--- a/deploy/tools/favicon-generator/config.template.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
-	"favicon_generation": {
-		"api_key": "<api_key>",
-		"master_picture": {
-			"type": "url",
-			"url": "<master_url>"
-		},
-		"files_location": {
-			"type": "path",
-			"path": "/favicons"
-		},
-		"favicon_design": {
-			"desktop_browser": {},
-			"ios": {
-				"picture_aspect": "no_change",
-				"assets": {
-					"ios6_and_prior_icons": false,
-					"ios7_and_later_icons": true,
-					"precomposed_icons": false,
-					"declare_only_default_icon": true
-				}
-			},
-			"safari_pinned_tab": {
-				"picture_aspect": "black_and_white",
-				"threshold": 60
-			}
-		},
-		"settings": {
-			"compression": "3",
-			"scaling_algorithm": "Mitchell",
-			"error_on_image_too_small": true,
-			"readme_file": false,
-			"html_code_file": false,
-			"use_path_as_is": false
-		},
-		"versioning": {
-			"param_name": "ver",
-			"param_value": "15Zd8"
-		}
-	}
-}
\ No newline at end of file
diff --git a/deploy/tools/favicon-generator/index.js b/deploy/tools/favicon-generator/index.js
new file mode 100644
index 0000000000..b552a9f6c9
--- /dev/null
+++ b/deploy/tools/favicon-generator/index.js
@@ -0,0 +1,71 @@
+/* eslint-disable no-console */
+const { favicons } = require('favicons');
+const fs = require('fs/promises');
+const path = require('path');
+
+generateFavicons();
+
+async function generateFavicons() {
+  console.log('Generating favicons...');
+  const masterUrl = process.env.MASTER_URL;
+  try {
+    if (!masterUrl) {
+      throw new Error('FAVICON_MASTER_URL or NEXT_PUBLIC_NETWORK_ICON must be set');
+    }
+
+    const fetch = await import('node-fetch');
+    const response = await fetch.default(masterUrl);
+    const buffer = await response.arrayBuffer();
+    const source = Buffer.from(buffer);
+
+    const configuration = {
+      path: '/output',
+      appName: 'Blockscout',
+      icons: {
+        android: true,
+        appleIcon: {
+          background: 'transparent',
+        },
+        appleStartup: false,
+        favicons: true,
+        windows: false,
+        yandex: false,
+      },
+    };
+
+    try {
+      const result = await favicons(source, configuration);
+
+      const outputDir = path.resolve(process.cwd(), 'output');
+      await fs.mkdir(outputDir, { recursive: true });
+
+      for (const image of result.images) {
+        // keep only necessary files
+        if (image.name === 'apple-touch-icon-180x180.png' || image.name === 'android-chrome-192x192.png' ||
+          (!image.name.startsWith('apple-touch-icon') && !image.name.startsWith('android-chrome'))
+        ) {
+          await fs.writeFile(path.join(outputDir, image.name), image.contents);
+        }
+
+        // copy android-chrome-192x192.png to logo-icon.png for marketing purposes
+        if (image.name === 'android-chrome-192x192.png') {
+          await fs.writeFile(path.join(outputDir, 'logo-icon.png'), image.contents);
+        }
+      }
+
+      for (const file of result.files) {
+        if (file.name !== 'manifest.webmanifest') {
+          await fs.writeFile(path.join(outputDir, file.name), file.contents);
+        }
+      }
+
+      console.log('Favicons generated successfully!');
+    } catch (faviconError) {
+      console.error('Error generating favicons:', faviconError);
+      process.exit(1);
+    }
+  } catch (error) {
+    console.error('Error in favicon generation process:', error);
+    process.exit(1);
+  }
+}
diff --git a/deploy/tools/favicon-generator/package.json b/deploy/tools/favicon-generator/package.json
new file mode 100644
index 0000000000..f4127ccc37
--- /dev/null
+++ b/deploy/tools/favicon-generator/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "favicon-generator",
+  "version": "1.0.0",
+  "main": "index.js",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "favicons": "^7.2.0",
+    "ts-loader": "^9.4.4",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4"
+  },
+  "devDependencies": {
+    "dotenv-cli": "^7.4.2",
+    "node-loader": "^2.0.0",
+    "tsconfig-paths-webpack-plugin": "^4.1.0"
+  }
+}
diff --git a/deploy/tools/favicon-generator/script.sh b/deploy/tools/favicon-generator/script.sh
deleted file mode 100755
index 69145399ed..0000000000
--- a/deploy/tools/favicon-generator/script.sh
+++ /dev/null
@@ -1,110 +0,0 @@
-#!/bin/bash
-
-echo "🌀 Generating favicons bundle..."
-
-# Check if MASTER_URL is provided
-if [ -z "$MASTER_URL" ]; then
-  echo "🛑 Error: MASTER_URL variable is not provided."
-  exit 1
-fi
-
-# Check if FAVICON_GENERATOR_API_KEY is provided
-if [ -z "$FAVICON_GENERATOR_API_KEY" ]; then
-  echo "🛑 Error: FAVICON_GENERATOR_API_KEY variable is not provided."
-  exit 1
-fi
-
-# Mask the FAVICON_GENERATOR_API_KEY to display only the first 8 characters
-API_KEY_MASKED="${FAVICON_GENERATOR_API_KEY:0:8}***"
-echo "🆗 The following variables are provided:"
-echo "      MASTER_URL: $MASTER_URL"
-echo "      FAVICON_GENERATOR_API_KEY: $API_KEY_MASKED"
-echo
-
-# RealFaviconGenerator API endpoint URL
-API_URL="https://realfavicongenerator.net/api/favicon"
-
-# Target folder for the downloaded assets
-TARGET_FOLDER="./output"
-
-# Path to the config JSON template file
-CONFIG_TEMPLATE_FILE="config.template.json"
-
-# Path to the generated config JSON file
-CONFIG_FILE="config.json"
-
-# Replace <api_key> and <master_url> placeholders in the JSON template file
-API_KEY_VALUE="$FAVICON_GENERATOR_API_KEY"
-sed -e "s|<api_key>|$API_KEY_VALUE|" -e "s|<master_url>|$MASTER_URL|" "$CONFIG_TEMPLATE_FILE" > "$CONFIG_FILE"
-
-# Make the API POST request with JSON data from the config file
-echo "⏳ Making request to API..."
-API_RESPONSE=$(curl -s -X POST -H "Content-Type: application/json" -d @"$CONFIG_FILE" "$API_URL")
-
-# Create the response.json file with the API response
-echo "$API_RESPONSE" > response.json
-
-# Check if the API response is valid JSON and contains success status
-if ! jq -e '.favicon_generation_result.result.status == "success"' <<< "$API_RESPONSE" >/dev/null; then
-  echo "🛑 Error: API response does not contain the expected structure or has an error status."
-  ERROR_MESSAGE=$(echo "$API_RESPONSE" | jq -r '.favicon_generation_result.result.error_message' | tr -d '\\')
-  if [ -n "$ERROR_MESSAGE" ]; then
-    echo "🛑 $ERROR_MESSAGE"
-  fi
-  exit 1
-fi
-echo "🆗 API responded with success status."
-
-# Parse the JSON response to extract the file URL and remove backslashes
-FILE_URL=$(echo "$API_RESPONSE" | jq -r '.favicon_generation_result.favicon.package_url' | tr -d '\\')
-PREVIEW_URL=$(echo "$API_RESPONSE" | jq -r '.favicon_generation_result.preview_picture_url' | tr -d '\\')
-
-# Check if FILE_URL is empty
-if [ -z "$FILE_URL" ]; then
-  echo "🛑 File URL not found in JSON response."
-  exit 1
-fi
-
-echo "🆗 Found following file URL in the response: $FILE_URL"
-echo "🆗 Favicon preview URL: $PREVIEW_URL"
-echo
-
-# Generate a filename based on the URL
-FILE_NAME=$(basename "$FILE_URL")
-
-# Check if the target folder exists and clear its contents if it does
-if [ -d "$TARGET_FOLDER" ]; then
-  rm -r "$TARGET_FOLDER"
-fi
-mkdir -p "$TARGET_FOLDER"
-
-# Download the file
-echo "⏳ Trying to download the file..."
-curl -s -L "$FILE_URL" -o "$FILE_NAME"
-
-# Check if the download was successful
-if [ $? -eq 0 ]; then
-  echo "🆗 File downloaded successfully."
-  echo
-else
-  echo "🛑 Error: Failed to download the file."
-  exit 1
-fi
-
-# Unzip the downloaded file to the target folder
-echo "⏳ Unzipping the file..."
-unzip -q "$FILE_NAME" -d "$TARGET_FOLDER"
-
-# Check if the unzip operation was successful
-if [ $? -eq 0 ]; then
-  echo "🆗 File unzipped successfully."
-  echo
-else
-  echo "🛑 Failed to unzip the file."
-  exit 1
-fi
-
-# Clean up - remove the JSON response file and temporary JSON config file
-rm response.json "$CONFIG_FILE"
-
-echo "✅ Done."
\ No newline at end of file
diff --git a/deploy/tools/favicon-generator/yarn.lock b/deploy/tools/favicon-generator/yarn.lock
new file mode 100644
index 0000000000..af54e5366c
--- /dev/null
+++ b/deploy/tools/favicon-generator/yarn.lock
@@ -0,0 +1,1178 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@discoveryjs/json-ext@^0.5.0":
+  version "0.5.7"
+  resolved "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz"
+  integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
+
+"@emnapi/runtime@^1.2.0":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.3.1.tgz#0fcaa575afc31f455fd33534c19381cfce6c6f60"
+  integrity sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==
+  dependencies:
+    tslib "^2.4.0"
+
+"@img/sharp-darwin-arm64@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz"
+  integrity sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==
+  optionalDependencies:
+    "@img/sharp-libvips-darwin-arm64" "1.0.4"
+
+"@img/sharp-darwin-x64@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz#e03d3451cd9e664faa72948cc70a403ea4063d61"
+  integrity sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==
+  optionalDependencies:
+    "@img/sharp-libvips-darwin-x64" "1.0.4"
+
+"@img/sharp-libvips-darwin-arm64@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz"
+  integrity sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==
+
+"@img/sharp-libvips-darwin-x64@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz#e0456f8f7c623f9dbfbdc77383caa72281d86062"
+  integrity sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==
+
+"@img/sharp-libvips-linux-arm64@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz#979b1c66c9a91f7ff2893556ef267f90ebe51704"
+  integrity sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==
+
+"@img/sharp-libvips-linux-arm@1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz#99f922d4e15216ec205dcb6891b721bfd2884197"
+  integrity sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==
+
+"@img/sharp-libvips-linux-s390x@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz#f8a5eb1f374a082f72b3f45e2fb25b8118a8a5ce"
+  integrity sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==
+
+"@img/sharp-libvips-linux-x64@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz#d4c4619cdd157774906e15770ee119931c7ef5e0"
+  integrity sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==
+
+"@img/sharp-libvips-linuxmusl-arm64@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz#166778da0f48dd2bded1fa3033cee6b588f0d5d5"
+  integrity sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==
+
+"@img/sharp-libvips-linuxmusl-x64@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz#93794e4d7720b077fcad3e02982f2f1c246751ff"
+  integrity sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==
+
+"@img/sharp-linux-arm64@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz#edb0697e7a8279c9fc829a60fc35644c4839bb22"
+  integrity sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-arm64" "1.0.4"
+
+"@img/sharp-linux-arm@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz#422c1a352e7b5832842577dc51602bcd5b6f5eff"
+  integrity sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-arm" "1.0.5"
+
+"@img/sharp-linux-s390x@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz#f5c077926b48e97e4a04d004dfaf175972059667"
+  integrity sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-s390x" "1.0.4"
+
+"@img/sharp-linux-x64@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz#d806e0afd71ae6775cc87f0da8f2d03a7c2209cb"
+  integrity sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-x64" "1.0.4"
+
+"@img/sharp-linuxmusl-arm64@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz#252975b915894fb315af5deea174651e208d3d6b"
+  integrity sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==
+  optionalDependencies:
+    "@img/sharp-libvips-linuxmusl-arm64" "1.0.4"
+
+"@img/sharp-linuxmusl-x64@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz#3f4609ac5d8ef8ec7dadee80b560961a60fd4f48"
+  integrity sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==
+  optionalDependencies:
+    "@img/sharp-libvips-linuxmusl-x64" "1.0.4"
+
+"@img/sharp-wasm32@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz#6f44f3283069d935bb5ca5813153572f3e6f61a1"
+  integrity sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==
+  dependencies:
+    "@emnapi/runtime" "^1.2.0"
+
+"@img/sharp-win32-ia32@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz#1a0c839a40c5351e9885628c85f2e5dfd02b52a9"
+  integrity sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==
+
+"@img/sharp-win32-x64@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz#56f00962ff0c4e0eb93d34a047d29fa995e3e342"
+  integrity sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==
+
+"@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.5"
+  resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz"
+  integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
+"@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
+
+"@jridgewell/source-map@^0.3.3":
+  version "0.3.6"
+  resolved "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz"
+  integrity sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
+"@jridgewell/trace-mapping@^0.3.20", "@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+  version "0.3.25"
+  resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
+"@types/estree@^1.0.5":
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz"
+  integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
+
+"@types/json-schema@^7.0.8":
+  version "7.0.15"
+  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz"
+  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
+
+"@types/node@*":
+  version "22.7.9"
+  resolved "https://registry.npmjs.org/@types/node/-/node-22.7.9.tgz"
+  integrity sha512-jrTfRC7FM6nChvU7X2KqcrgquofrWLFDeYC1hKfwNWomVvrn7JIksqf344WN2X/y8xrgqBd2dJATZV4GbatBfg==
+  dependencies:
+    undici-types "~6.19.2"
+
+"@webassemblyjs/ast@1.12.1", "@webassemblyjs/ast@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz"
+  integrity sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==
+  dependencies:
+    "@webassemblyjs/helper-numbers" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+
+"@webassemblyjs/floating-point-hex-parser@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz"
+  integrity sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==
+
+"@webassemblyjs/helper-api-error@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz"
+  integrity sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==
+
+"@webassemblyjs/helper-buffer@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz"
+  integrity sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==
+
+"@webassemblyjs/helper-numbers@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz"
+  integrity sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==
+  dependencies:
+    "@webassemblyjs/floating-point-hex-parser" "1.11.6"
+    "@webassemblyjs/helper-api-error" "1.11.6"
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/helper-wasm-bytecode@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz"
+  integrity sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==
+
+"@webassemblyjs/helper-wasm-section@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz"
+  integrity sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/wasm-gen" "1.12.1"
+
+"@webassemblyjs/ieee754@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz"
+  integrity sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==
+  dependencies:
+    "@xtuc/ieee754" "^1.2.0"
+
+"@webassemblyjs/leb128@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz"
+  integrity sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==
+  dependencies:
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/utf8@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz"
+  integrity sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==
+
+"@webassemblyjs/wasm-edit@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz"
+  integrity sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/helper-wasm-section" "1.12.1"
+    "@webassemblyjs/wasm-gen" "1.12.1"
+    "@webassemblyjs/wasm-opt" "1.12.1"
+    "@webassemblyjs/wasm-parser" "1.12.1"
+    "@webassemblyjs/wast-printer" "1.12.1"
+
+"@webassemblyjs/wasm-gen@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz"
+  integrity sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/ieee754" "1.11.6"
+    "@webassemblyjs/leb128" "1.11.6"
+    "@webassemblyjs/utf8" "1.11.6"
+
+"@webassemblyjs/wasm-opt@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz"
+  integrity sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
+    "@webassemblyjs/wasm-gen" "1.12.1"
+    "@webassemblyjs/wasm-parser" "1.12.1"
+
+"@webassemblyjs/wasm-parser@1.12.1", "@webassemblyjs/wasm-parser@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz"
+  integrity sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-api-error" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/ieee754" "1.11.6"
+    "@webassemblyjs/leb128" "1.11.6"
+    "@webassemblyjs/utf8" "1.11.6"
+
+"@webassemblyjs/wast-printer@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz"
+  integrity sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@xtuc/long" "4.2.2"
+
+"@webpack-cli/configtest@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz"
+  integrity sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==
+
+"@webpack-cli/info@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz"
+  integrity sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==
+
+"@webpack-cli/serve@^2.0.5":
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz"
+  integrity sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==
+
+"@xtuc/ieee754@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz"
+  integrity sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==
+
+"@xtuc/long@4.2.2":
+  version "4.2.2"
+  resolved "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz"
+  integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
+
+acorn-import-attributes@^1.9.5:
+  version "1.9.5"
+  resolved "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz"
+  integrity sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==
+
+acorn@^8.7.1, acorn@^8.8.2:
+  version "8.13.0"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-8.13.0.tgz"
+  integrity sha512-8zSiw54Oxrdym50NlZ9sUusyO1Z1ZchgRLWRaK6c86XJFClyCgFKetdowBg5bKxyp/u+CDBJG4Mpp0m3HLZl9w==
+
+ajv-keywords@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz"
+  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
+
+ajv@^6.12.5:
+  version "6.12.6"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+big.js@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz"
+  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
+
+braces@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+browserslist@^4.21.10:
+  version "4.24.2"
+  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz"
+  integrity sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==
+  dependencies:
+    caniuse-lite "^1.0.30001669"
+    electron-to-chromium "^1.5.41"
+    node-releases "^2.0.18"
+    update-browserslist-db "^1.1.1"
+
+buffer-from@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
+caniuse-lite@^1.0.30001669:
+  version "1.0.30001669"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001669.tgz"
+  integrity sha512-DlWzFDJqstqtIVx1zeSpIMLjunf5SmwOw0N2Ck/QSQdS8PLS4+9HrLaYei4w8BIAL7IB/UEDu889d8vhCTPA0w==
+
+chalk@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chrome-trace-event@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz"
+  integrity sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==
+
+clone-deep@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz"
+  integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==
+  dependencies:
+    is-plain-object "^2.0.4"
+    kind-of "^6.0.2"
+    shallow-clone "^3.0.0"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@^1.0.0, color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+color-string@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz"
+  integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
+color@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/color/-/color-4.2.3.tgz"
+  integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
+  dependencies:
+    color-convert "^2.0.1"
+    color-string "^1.9.0"
+
+colorette@^2.0.14:
+  version "2.0.20"
+  resolved "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz"
+  integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
+
+commander@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz"
+  integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==
+
+commander@^2.20.0:
+  version "2.20.3"
+  resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
+cross-spawn@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+detect-libc@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz"
+  integrity sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==
+
+dotenv-cli@^7.4.2:
+  version "7.4.2"
+  resolved "https://registry.npmjs.org/dotenv-cli/-/dotenv-cli-7.4.2.tgz"
+  integrity sha512-SbUj8l61zIbzyhIbg0FwPJq6+wjbzdn9oEtozQpZ6kW2ihCcapKVZj49oCT3oPM+mgQm+itgvUQcG5szxVrZTA==
+  dependencies:
+    cross-spawn "^7.0.3"
+    dotenv "^16.3.0"
+    dotenv-expand "^10.0.0"
+    minimist "^1.2.6"
+
+dotenv-expand@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-10.0.0.tgz"
+  integrity sha512-GopVGCpVS1UKH75VKHGuQFqS1Gusej0z4FyQkPdwjil2gNIv+LNsqBlboOzpJFZKVT95GkCyWJbBSdFEFUWI2A==
+
+dotenv@^16.3.0:
+  version "16.4.5"
+  resolved "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz"
+  integrity sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==
+
+electron-to-chromium@^1.5.41:
+  version "1.5.43"
+  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.43.tgz"
+  integrity sha512-NxnmFBHDl5Sachd2P46O7UJiMaMHMLSofoIWVJq3mj8NJgG0umiSeljAVP9lGzjI0UDLJJ5jjoGjcrB8RSbjLQ==
+
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
+enhanced-resolve@^5.0.0, enhanced-resolve@^5.17.1, enhanced-resolve@^5.7.0:
+  version "5.17.1"
+  resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz"
+  integrity sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
+envinfo@^7.7.3:
+  version "7.14.0"
+  resolved "https://registry.npmjs.org/envinfo/-/envinfo-7.14.0.tgz"
+  integrity sha512-CO40UI41xDQzhLB1hWyqUKgFhs250pNcGbyGKe1l/e4FSaI/+YE4IMG76GDt0In67WLPACIITC+sOi08x4wIvg==
+
+es-module-lexer@^1.2.1:
+  version "1.5.4"
+  resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.4.tgz"
+  integrity sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==
+
+escalade@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz"
+  integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
+
+escape-html@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz"
+  integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
+
+eslint-scope@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+events@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/events/-/events-3.3.0.tgz"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
+fast-deep-equal@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fastest-levenshtein@^1.0.12:
+  version "1.0.16"
+  resolved "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz"
+  integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==
+
+favicons@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/favicons/-/favicons-7.2.0.tgz"
+  integrity sha512-k/2rVBRIRzOeom3wI9jBPaSEvoTSQEW4iM0EveBmBBKFxO8mSyyRWtDlfC3VnEfu0avmjrMzy8/ZFPSe6F71Hw==
+  dependencies:
+    escape-html "^1.0.3"
+    sharp "^0.33.1"
+    xml2js "^0.6.1"
+
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+find-up@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
+flat@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz"
+  integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
+
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+glob-to-regexp@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz"
+  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
+
+graceful-fs@^4.1.2, graceful-fs@^4.2.11, graceful-fs@^4.2.4:
+  version "4.2.11"
+  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
+import-local@^3.0.2:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz"
+  integrity sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==
+  dependencies:
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.0.0"
+
+interpret@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz"
+  integrity sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==
+
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
+is-core-module@^2.13.0:
+  version "2.15.1"
+  resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz"
+  integrity sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==
+  dependencies:
+    hasown "^2.0.2"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-plain-object@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz"
+  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
+  dependencies:
+    isobject "^3.0.1"
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz"
+  integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
+
+jest-worker@^27.4.5:
+  version "27.5.1"
+  resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz"
+  integrity sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
+json-parse-even-better-errors@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
+
+json5@^2.1.2, json5@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
+kind-of@^6.0.2:
+  version "6.0.3"
+  resolved "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
+loader-runner@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz"
+  integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
+
+loader-utils@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz"
+  integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz"
+  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
+
+micromatch@^4.0.0:
+  version "4.0.8"
+  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.27:
+  version "2.1.35"
+  resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+minimist@^1.2.6:
+  version "1.2.8"
+  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
+neo-async@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+
+node-loader@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/node-loader/-/node-loader-2.0.0.tgz#9109a6d828703fd3e0aa03c1baec12a798071562"
+  integrity sha512-I5VN34NO4/5UYJaUBtkrODPWxbobrE4hgDqPrjB25yPkonFhCmZ146vTH+Zg417E9Iwoh1l/MbRs1apc5J295Q==
+  dependencies:
+    loader-utils "^2.0.0"
+
+node-releases@^2.0.18:
+  version "2.0.18"
+  resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz"
+  integrity sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==
+
+p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
+p-try@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz"
+  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+picocolors@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
+picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+pkg-dir@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
+punycode@^2.1.0:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz"
+  integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
+
+randombytes@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz"
+  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
+  dependencies:
+    safe-buffer "^5.1.0"
+
+rechoir@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz"
+  integrity sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==
+  dependencies:
+    resolve "^1.20.0"
+
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz"
+  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
+  dependencies:
+    resolve-from "^5.0.0"
+
+resolve-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
+resolve@^1.20.0:
+  version "1.22.8"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz"
+  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+safe-buffer@^5.1.0:
+  version "5.2.1"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+sax@>=0.6.0:
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz"
+  integrity sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==
+
+schema-utils@^3.1.1, schema-utils@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz"
+  integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
+  dependencies:
+    "@types/json-schema" "^7.0.8"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
+semver@^7.3.4, semver@^7.6.3:
+  version "7.6.3"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
+serialize-javascript@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz"
+  integrity sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==
+  dependencies:
+    randombytes "^2.1.0"
+
+shallow-clone@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz"
+  integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==
+  dependencies:
+    kind-of "^6.0.2"
+
+sharp@^0.33.1:
+  version "0.33.5"
+  resolved "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz"
+  integrity sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==
+  dependencies:
+    color "^4.2.3"
+    detect-libc "^2.0.3"
+    semver "^7.6.3"
+  optionalDependencies:
+    "@img/sharp-darwin-arm64" "0.33.5"
+    "@img/sharp-darwin-x64" "0.33.5"
+    "@img/sharp-libvips-darwin-arm64" "1.0.4"
+    "@img/sharp-libvips-darwin-x64" "1.0.4"
+    "@img/sharp-libvips-linux-arm" "1.0.5"
+    "@img/sharp-libvips-linux-arm64" "1.0.4"
+    "@img/sharp-libvips-linux-s390x" "1.0.4"
+    "@img/sharp-libvips-linux-x64" "1.0.4"
+    "@img/sharp-libvips-linuxmusl-arm64" "1.0.4"
+    "@img/sharp-libvips-linuxmusl-x64" "1.0.4"
+    "@img/sharp-linux-arm" "0.33.5"
+    "@img/sharp-linux-arm64" "0.33.5"
+    "@img/sharp-linux-s390x" "0.33.5"
+    "@img/sharp-linux-x64" "0.33.5"
+    "@img/sharp-linuxmusl-arm64" "0.33.5"
+    "@img/sharp-linuxmusl-x64" "0.33.5"
+    "@img/sharp-wasm32" "0.33.5"
+    "@img/sharp-win32-ia32" "0.33.5"
+    "@img/sharp-win32-x64" "0.33.5"
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz"
+  integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
+  dependencies:
+    is-arrayish "^0.3.1"
+
+source-map-support@~0.5.20:
+  version "0.5.21"
+  resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz"
+  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map@^0.6.0:
+  version "0.6.1"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+source-map@^0.7.4:
+  version "0.7.4"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz"
+  integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
+
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz"
+  integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-color@^8.0.0:
+  version "8.1.1"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+tapable@^2.1.1, tapable@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz"
+  integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
+
+terser-webpack-plugin@^5.3.10:
+  version "5.3.10"
+  resolved "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz"
+  integrity sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.20"
+    jest-worker "^27.4.5"
+    schema-utils "^3.1.1"
+    serialize-javascript "^6.0.1"
+    terser "^5.26.0"
+
+terser@^5.26.0:
+  version "5.36.0"
+  resolved "https://registry.npmjs.org/terser/-/terser-5.36.0.tgz"
+  integrity sha512-IYV9eNMuFAV4THUspIRXkLakHnV6XO7FEdtKjf/mDyrnqUg9LnlOn6/RwRvM9SZjR4GUq8Nk8zj67FzVARr74w==
+  dependencies:
+    "@jridgewell/source-map" "^0.3.3"
+    acorn "^8.8.2"
+    commander "^2.20.0"
+    source-map-support "~0.5.20"
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+ts-loader@^9.4.4:
+  version "9.5.1"
+  resolved "https://registry.npmjs.org/ts-loader/-/ts-loader-9.5.1.tgz"
+  integrity sha512-rNH3sK9kGZcH9dYzC7CewQm4NtxJTjSEVRJ2DyBZR7f8/wcta+iV44UPCXc5+nzDzivKtlzV6c9P4e+oFhDLYg==
+  dependencies:
+    chalk "^4.1.0"
+    enhanced-resolve "^5.0.0"
+    micromatch "^4.0.0"
+    semver "^7.3.4"
+    source-map "^0.7.4"
+
+tsconfig-paths-webpack-plugin@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-4.1.0.tgz"
+  integrity sha512-xWFISjviPydmtmgeUAuXp4N1fky+VCtfhOkDUFIv5ea7p4wuTomI4QTrXvFBX2S4jZsmyTSrStQl+E+4w+RzxA==
+  dependencies:
+    chalk "^4.1.0"
+    enhanced-resolve "^5.7.0"
+    tsconfig-paths "^4.1.2"
+
+tsconfig-paths@^4.1.2:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz"
+  integrity sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==
+  dependencies:
+    json5 "^2.2.2"
+    minimist "^1.2.6"
+    strip-bom "^3.0.0"
+
+tslib@^2.4.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.0.tgz#d124c86c3c05a40a91e6fdea4021bd31d377971b"
+  integrity sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==
+
+undici-types@~6.19.2:
+  version "6.19.8"
+  resolved "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz"
+  integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
+
+update-browserslist-db@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz"
+  integrity sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==
+  dependencies:
+    escalade "^3.2.0"
+    picocolors "^1.1.0"
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+watchpack@^2.4.1:
+  version "2.4.2"
+  resolved "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz"
+  integrity sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==
+  dependencies:
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.1.2"
+
+webpack-cli@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz"
+  integrity sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==
+  dependencies:
+    "@discoveryjs/json-ext" "^0.5.0"
+    "@webpack-cli/configtest" "^2.1.1"
+    "@webpack-cli/info" "^2.0.2"
+    "@webpack-cli/serve" "^2.0.5"
+    colorette "^2.0.14"
+    commander "^10.0.1"
+    cross-spawn "^7.0.3"
+    envinfo "^7.7.3"
+    fastest-levenshtein "^1.0.12"
+    import-local "^3.0.2"
+    interpret "^3.1.1"
+    rechoir "^0.8.0"
+    webpack-merge "^5.7.3"
+
+webpack-merge@^5.7.3:
+  version "5.10.0"
+  resolved "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.10.0.tgz"
+  integrity sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==
+  dependencies:
+    clone-deep "^4.0.1"
+    flat "^5.0.2"
+    wildcard "^2.0.0"
+
+webpack-sources@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz"
+  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
+
+webpack@^5.88.2:
+  version "5.95.0"
+  resolved "https://registry.npmjs.org/webpack/-/webpack-5.95.0.tgz"
+  integrity sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==
+  dependencies:
+    "@types/estree" "^1.0.5"
+    "@webassemblyjs/ast" "^1.12.1"
+    "@webassemblyjs/wasm-edit" "^1.12.1"
+    "@webassemblyjs/wasm-parser" "^1.12.1"
+    acorn "^8.7.1"
+    acorn-import-attributes "^1.9.5"
+    browserslist "^4.21.10"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.17.1"
+    es-module-lexer "^1.2.1"
+    eslint-scope "5.1.1"
+    events "^3.2.0"
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.2.11"
+    json-parse-even-better-errors "^2.3.1"
+    loader-runner "^4.2.0"
+    mime-types "^2.1.27"
+    neo-async "^2.6.2"
+    schema-utils "^3.2.0"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.3.10"
+    watchpack "^2.4.1"
+    webpack-sources "^3.2.3"
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+wildcard@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz"
+  integrity sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==
+
+xml2js@^0.6.1:
+  version "0.6.2"
+  resolved "https://registry.npmjs.org/xml2js/-/xml2js-0.6.2.tgz"
+  integrity sha512-T4rieHaC1EXcES0Kxxj4JWgaUQHDk+qwHcYOCFHfiwKz7tOVPLq7Hjq9dM1WCMhylqMEfP7hMcOIChvotiZegA==
+  dependencies:
+    sax ">=0.6.0"
+    xmlbuilder "~11.0.0"
+
+xmlbuilder@~11.0.0:
+  version "11.0.1"
+  resolved "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz"
+  integrity sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==
diff --git a/deploy/tools/feature-reporter/yarn.lock b/deploy/tools/feature-reporter/yarn.lock
index eaf396937e..783abddc02 100644
--- a/deploy/tools/feature-reporter/yarn.lock
+++ b/deploy/tools/feature-reporter/yarn.lock
@@ -39,7 +39,15 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
 
-"@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
+"@jridgewell/trace-mapping@^0.3.20":
+  version "0.3.25"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
+"@jridgewell/trace-mapping@^0.3.9":
   version "0.3.19"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz#f8a3249862f91be48d3127c3cfe992f79b4b8811"
   integrity sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==
@@ -68,28 +76,12 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@types/eslint-scope@^3.7.3":
-  version "3.7.4"
-  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16"
-  integrity sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==
-  dependencies:
-    "@types/eslint" "*"
-    "@types/estree" "*"
+"@types/estree@^1.0.5":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
+  integrity "sha1-Yo7/7q4gZKG055946B2Ht+X8e1A= sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="
 
-"@types/eslint@*":
-  version "8.44.2"
-  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.44.2.tgz#0d21c505f98a89b8dd4d37fa162b09da6089199a"
-  integrity sha512-sdPRb9K6iL5XZOmBubg8yiFp5yS/JdUDQsq5e6h95km91MCYMuvp7mh1fjPEYUhvHepKpZOjnEaMBR4PxjWDzg==
-  dependencies:
-    "@types/estree" "*"
-    "@types/json-schema" "*"
-
-"@types/estree@*", "@types/estree@^1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.1.tgz#aa22750962f3bf0e79d753d3cc067f010c95f194"
-  integrity sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==
-
-"@types/json-schema@*", "@types/json-schema@^7.0.8":
+"@types/json-schema@^7.0.8":
   version "7.0.12"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.12.tgz#d70faba7039d5fca54c83c7dbab41051d2b6f6cb"
   integrity sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==
@@ -99,10 +91,10 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.4.8.tgz#b5dda19adaa473a9bf0ab5cbd8f30ec7d43f5c85"
   integrity sha512-0mHckf6D2DiIAzh8fM8f3HQCvMKDpK94YQ0DSVkfWTG9BZleYIWudw9cJxX8oCk9bM+vAkDyujDV6dmKHbvQpg==
 
-"@webassemblyjs/ast@1.11.6", "@webassemblyjs/ast@^1.11.5":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.6.tgz#db046555d3c413f8966ca50a95176a0e2c642e24"
-  integrity sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==
+"@webassemblyjs/ast@1.12.1", "@webassemblyjs/ast@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.12.1.tgz#bb16a0e8b1914f979f45864c23819cc3e3f0d4bb"
+  integrity sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==
   dependencies:
     "@webassemblyjs/helper-numbers" "1.11.6"
     "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
@@ -117,10 +109,10 @@
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz#6132f68c4acd59dcd141c44b18cbebbd9f2fa768"
   integrity sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==
 
-"@webassemblyjs/helper-buffer@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz#b66d73c43e296fd5e88006f18524feb0f2c7c093"
-  integrity sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==
+"@webassemblyjs/helper-buffer@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz#6df20d272ea5439bf20ab3492b7fb70e9bfcb3f6"
+  integrity sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==
 
 "@webassemblyjs/helper-numbers@1.11.6":
   version "1.11.6"
@@ -136,15 +128,15 @@
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz#bb2ebdb3b83aa26d9baad4c46d4315283acd51e9"
   integrity sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==
 
-"@webassemblyjs/helper-wasm-section@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz#ff97f3863c55ee7f580fd5c41a381e9def4aa577"
-  integrity sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==
+"@webassemblyjs/helper-wasm-section@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz#3da623233ae1a60409b509a52ade9bc22a37f7bf"
+  integrity sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==
   dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@webassemblyjs/helper-buffer" "1.11.6"
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
     "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
-    "@webassemblyjs/wasm-gen" "1.11.6"
+    "@webassemblyjs/wasm-gen" "1.12.1"
 
 "@webassemblyjs/ieee754@1.11.6":
   version "1.11.6"
@@ -165,59 +157,59 @@
   resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.11.6.tgz#90f8bc34c561595fe156603be7253cdbcd0fab5a"
   integrity sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==
 
-"@webassemblyjs/wasm-edit@^1.11.5":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz#c72fa8220524c9b416249f3d94c2958dfe70ceab"
-  integrity sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==
+"@webassemblyjs/wasm-edit@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz#9f9f3ff52a14c980939be0ef9d5df9ebc678ae3b"
+  integrity sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==
   dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@webassemblyjs/helper-buffer" "1.11.6"
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
     "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
-    "@webassemblyjs/helper-wasm-section" "1.11.6"
-    "@webassemblyjs/wasm-gen" "1.11.6"
-    "@webassemblyjs/wasm-opt" "1.11.6"
-    "@webassemblyjs/wasm-parser" "1.11.6"
-    "@webassemblyjs/wast-printer" "1.11.6"
-
-"@webassemblyjs/wasm-gen@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz#fb5283e0e8b4551cc4e9c3c0d7184a65faf7c268"
-  integrity sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/helper-wasm-section" "1.12.1"
+    "@webassemblyjs/wasm-gen" "1.12.1"
+    "@webassemblyjs/wasm-opt" "1.12.1"
+    "@webassemblyjs/wasm-parser" "1.12.1"
+    "@webassemblyjs/wast-printer" "1.12.1"
+
+"@webassemblyjs/wasm-gen@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz#a6520601da1b5700448273666a71ad0a45d78547"
+  integrity sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
     "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
     "@webassemblyjs/ieee754" "1.11.6"
     "@webassemblyjs/leb128" "1.11.6"
     "@webassemblyjs/utf8" "1.11.6"
 
-"@webassemblyjs/wasm-opt@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz#d9a22d651248422ca498b09aa3232a81041487c2"
-  integrity sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==
+"@webassemblyjs/wasm-opt@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz#9e6e81475dfcfb62dab574ac2dda38226c232bc5"
+  integrity sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==
   dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@webassemblyjs/helper-buffer" "1.11.6"
-    "@webassemblyjs/wasm-gen" "1.11.6"
-    "@webassemblyjs/wasm-parser" "1.11.6"
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
+    "@webassemblyjs/wasm-gen" "1.12.1"
+    "@webassemblyjs/wasm-parser" "1.12.1"
 
-"@webassemblyjs/wasm-parser@1.11.6", "@webassemblyjs/wasm-parser@^1.11.5":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz#bb85378c527df824004812bbdb784eea539174a1"
-  integrity sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==
+"@webassemblyjs/wasm-parser@1.12.1", "@webassemblyjs/wasm-parser@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz#c47acb90e6f083391e3fa61d113650eea1e95937"
+  integrity sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==
   dependencies:
-    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/ast" "1.12.1"
     "@webassemblyjs/helper-api-error" "1.11.6"
     "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
     "@webassemblyjs/ieee754" "1.11.6"
     "@webassemblyjs/leb128" "1.11.6"
     "@webassemblyjs/utf8" "1.11.6"
 
-"@webassemblyjs/wast-printer@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz#a7bf8dd7e362aeb1668ff43f35cb849f188eff20"
-  integrity sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==
+"@webassemblyjs/wast-printer@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz#bcecf661d7d1abdaf989d8341a4833e33e2b31ac"
+  integrity sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==
   dependencies:
-    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/ast" "1.12.1"
     "@xtuc/long" "4.2.2"
 
 "@webpack-cli/configtest@^2.1.1":
@@ -245,10 +237,10 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
-acorn-import-assertions@^1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz#507276249d684797c84e0734ef84860334cfb1ac"
-  integrity sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==
+acorn-import-attributes@^1.9.5:
+  version "1.9.5"
+  resolved "https://registry.yarnpkg.com/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz#7eb1557b1ba05ef18b5ed0ec67591bfab04688ef"
+  integrity sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==
 
 acorn@^8.7.1, acorn@^8.8.2:
   version "8.10.0"
@@ -288,32 +280,32 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
-braces@^3.0.2, braces@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
-  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+braces@^3.0.3, braces@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
   dependencies:
-    fill-range "^7.0.1"
+    fill-range "^7.1.1"
 
-browserslist@^4.14.5:
-  version "4.21.10"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.10.tgz#dbbac576628c13d3b2231332cb2ec5a46e015bb0"
-  integrity sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==
+browserslist@^4.21.10:
+  version "4.24.2"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.2.tgz#f5845bc91069dbd55ee89faf9822e1d885d16580"
+  integrity "sha1-9YRbyRBp29Ve6J+vmCLh2IXRZYA= sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg=="
   dependencies:
-    caniuse-lite "^1.0.30001517"
-    electron-to-chromium "^1.4.477"
-    node-releases "^2.0.13"
-    update-browserslist-db "^1.0.11"
+    caniuse-lite "^1.0.30001669"
+    electron-to-chromium "^1.5.41"
+    node-releases "^2.0.18"
+    update-browserslist-db "^1.1.1"
 
 buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
-caniuse-lite@^1.0.30001517:
-  version "1.0.30001519"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz#3e7b8b8a7077e78b0eb054d69e6edf5c7df35601"
-  integrity sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==
+caniuse-lite@^1.0.30001669:
+  version "1.0.30001673"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001673.tgz#5aa291557af1c71340e809987367410aab7a5a9e"
+  integrity "sha1-WqKRVXrxxxNA6AmYc2dBCqt6Wp4= sha512-WTrjUCSMp3LYX0nE12ECkV0a+e6LC85E0Auz75555/qr78Oc8YWhEPNfDd6SHdtlCMSzqtuXY0uyEMNRcsKpKw=="
 
 chokidar@^3.5.3:
   version "3.5.3"
@@ -400,15 +392,15 @@ dotenv@^16.0.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.3.1.tgz#369034de7d7e5b120972693352a3bf112172cc3e"
   integrity sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==
 
-electron-to-chromium@^1.4.477:
-  version "1.4.487"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.487.tgz#e2ef8b15f2791bf68fa6f38f2656f1a551d360ae"
-  integrity sha512-XbCRs/34l31np/p33m+5tdBrdXu9jJkZxSbNxj5I0H1KtV2ZMSB+i/HYqDiRzHaFx2T5EdytjoBRe8QRJE2vQg==
+electron-to-chromium@^1.5.41:
+  version "1.5.47"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.47.tgz#ef0751bc19b28be8ee44cd8405309de3bf3b20c7"
+  integrity "sha1-7wdRvBmyi+juRM2EBTCd4787IMc= sha512-zS5Yer0MOYw4rtK2iq43cJagHZ8sXN0jDHDKzB+86gSBSAI4v07S97mcq+Gs2vclAxSh1j7vOAHxSVgduiiuVQ=="
 
-enhanced-resolve@^5.15.0:
-  version "5.15.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz#1af946c7d93603eb88e9896cee4904dc012e9c35"
-  integrity sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==
+enhanced-resolve@^5.17.1:
+  version "5.17.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz#67bfbbcc2f81d511be77d686a90267ef7f898a15"
+  integrity sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==
   dependencies:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
@@ -423,10 +415,10 @@ es-module-lexer@^1.2.1:
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.3.0.tgz#6be9c9e0b4543a60cd166ff6f8b4e9dae0b0c16f"
   integrity sha512-vZK7T0N2CBmBOixhmjdqx2gWVbFZ4DXZ/NyRMZVlJXPa7CyFS+/a4QQsDGDQy9ZfEzxFuNEsMLeQJnKP2p5/JA==
 
-escalade@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
-  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+escalade@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
+  integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
 
 eslint-scope@5.1.1:
   version "5.1.1"
@@ -491,10 +483,10 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
-fill-range@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
-  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
   dependencies:
     to-regex-range "^5.0.1"
 
@@ -540,7 +532,7 @@ globby@^11.0.4:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
-graceful-fs@^4.1.2, graceful-fs@^4.2.4, graceful-fs@^4.2.9:
+graceful-fs@^4.1.2, graceful-fs@^4.2.11, graceful-fs@^4.2.4:
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -670,11 +662,11 @@ merge2@^1.3.0, merge2@^1.4.1:
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
 micromatch@^4.0.4:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
-  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
   dependencies:
-    braces "^3.0.2"
+    braces "^3.0.3"
     picomatch "^2.3.1"
 
 mime-db@1.52.0:
@@ -704,10 +696,10 @@ neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
-node-releases@^2.0.13:
-  version "2.0.13"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d"
-  integrity sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==
+node-releases@^2.0.18:
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.18.tgz#f010e8d35e2fe8d6b2944f03f70213ecedc4ca3f"
+  integrity sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==
 
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
@@ -753,10 +745,10 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-picocolors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
-  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+picocolors@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity "sha1-PTIa8+q5ObCDyPkpodEs2oHCa2s= sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
 
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   version "2.3.1"
@@ -921,21 +913,21 @@ tapable@^2.1.1, tapable@^2.2.0:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
 
-terser-webpack-plugin@^5.3.7:
-  version "5.3.9"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz#832536999c51b46d468067f9e37662a3b96adfe1"
-  integrity sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==
+terser-webpack-plugin@^5.3.10:
+  version "5.3.10"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz#904f4c9193c6fd2a03f693a2150c62a92f40d199"
+  integrity sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==
   dependencies:
-    "@jridgewell/trace-mapping" "^0.3.17"
+    "@jridgewell/trace-mapping" "^0.3.20"
     jest-worker "^27.4.5"
     schema-utils "^3.1.1"
     serialize-javascript "^6.0.1"
-    terser "^5.16.8"
+    terser "^5.26.0"
 
-terser@^5.16.8:
-  version "5.19.2"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.19.2.tgz#bdb8017a9a4a8de4663a7983f45c506534f9234e"
-  integrity sha512-qC5+dmecKJA4cpYxRa5aVkKehYsQKc+AHeKl0Oe62aYjBL8ZA33tTljktDHJSaxxMnbI5ZYw+o/S2DxxLu8OfA==
+terser@^5.26.0:
+  version "5.36.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.36.0.tgz#8b0dbed459ac40ff7b4c9fd5a3a2029de105180e"
+  integrity "sha1-iw2+1FmsQP97TJ/Vo6ICneEFGA4= sha512-IYV9eNMuFAV4THUspIRXkLakHnV6XO7FEdtKjf/mDyrnqUg9LnlOn6/RwRvM9SZjR4GUq8Nk8zj67FzVARr74w=="
   dependencies:
     "@jridgewell/source-map" "^0.3.3"
     acorn "^8.8.2"
@@ -971,13 +963,13 @@ typescript@5.1:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274"
   integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==
 
-update-browserslist-db@^1.0.11:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz#9a2a641ad2907ae7b3616506f4b977851db5b940"
-  integrity sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==
+update-browserslist-db@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz#80846fba1d79e82547fb661f8d141e0945755fe5"
+  integrity "sha1-gIRvuh156CVH+2YfjRQeCUV1X+U= sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A=="
   dependencies:
-    escalade "^3.1.1"
-    picocolors "^1.0.0"
+    escalade "^3.2.0"
+    picocolors "^1.1.0"
 
 uri-js@^4.2.2:
   version "4.4.1"
@@ -986,10 +978,10 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-watchpack@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
-  integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==
+watchpack@^2.4.1:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.2.tgz#2feeaed67412e7c33184e5a79ca738fbd38564da"
+  integrity "sha1-L+6u1nQS58MxhOWnnKc4+9OFZNo= sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw=="
   dependencies:
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.1.2"
@@ -1027,33 +1019,32 @@ webpack-sources@^3.2.3:
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
 webpack@^5.88.2:
-  version "5.88.2"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.88.2.tgz#f62b4b842f1c6ff580f3fcb2ed4f0b579f4c210e"
-  integrity sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==
-  dependencies:
-    "@types/eslint-scope" "^3.7.3"
-    "@types/estree" "^1.0.0"
-    "@webassemblyjs/ast" "^1.11.5"
-    "@webassemblyjs/wasm-edit" "^1.11.5"
-    "@webassemblyjs/wasm-parser" "^1.11.5"
+  version "5.95.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.95.0.tgz#8fd8c454fa60dad186fbe36c400a55848307b4c0"
+  integrity "sha1-j9jEVPpg2tGG++NsQApVhIMHtMA= sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q=="
+  dependencies:
+    "@types/estree" "^1.0.5"
+    "@webassemblyjs/ast" "^1.12.1"
+    "@webassemblyjs/wasm-edit" "^1.12.1"
+    "@webassemblyjs/wasm-parser" "^1.12.1"
     acorn "^8.7.1"
-    acorn-import-assertions "^1.9.0"
-    browserslist "^4.14.5"
+    acorn-import-attributes "^1.9.5"
+    browserslist "^4.21.10"
     chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.15.0"
+    enhanced-resolve "^5.17.1"
     es-module-lexer "^1.2.1"
     eslint-scope "5.1.1"
     events "^3.2.0"
     glob-to-regexp "^0.4.1"
-    graceful-fs "^4.2.9"
+    graceful-fs "^4.2.11"
     json-parse-even-better-errors "^2.3.1"
     loader-runner "^4.2.0"
     mime-types "^2.1.27"
     neo-async "^2.6.2"
     schema-utils "^3.2.0"
     tapable "^2.1.1"
-    terser-webpack-plugin "^5.3.7"
-    watchpack "^2.4.0"
+    terser-webpack-plugin "^5.3.10"
+    watchpack "^2.4.1"
     webpack-sources "^3.2.3"
 
 which@^2.0.1:
diff --git a/deploy/values/l2-optimism-goerli/values.yaml b/deploy/values/l2-optimism-goerli/values.yaml
deleted file mode 100644
index f743299ddd..0000000000
--- a/deploy/values/l2-optimism-goerli/values.yaml
+++ /dev/null
@@ -1,203 +0,0 @@
-fullNameOverride: bs-stack
-nameOverride: bs-stack
-imagePullSecrets:
-  - name: regcred
-config:
-  network:
-    id: 420
-    name: "Base Göerli"
-    shortname: Base
-    currency:
-      name: Ether
-      symbol: ETH
-      decimals: 18
-  account:
-    enabled: true
-  testnet: true
-
-blockscout:
-  enabled: true
-  image:
-    repository: blockscout/blockscout-optimism
-    imagePullPolicy: Always
-    tag: latest
-  replicaCount: 1
-  ingress:
-    enabled: true
-    annotations:
-      kubernetes.io/ingress.class: internal-and-public
-      nginx.ingress.kubernetes.io/proxy-body-size: "500m"
-      nginx.ingress.kubernetes.io/client-max-body-size: "500M"
-      nginx.ingress.kubernetes.io/proxy-buffering: "off"
-      nginx.ingress.kubernetes.io/proxy-connect-timeout: "15m"
-      nginx.ingress.kubernetes.io/proxy-send-timeout: "15m"
-      nginx.ingress.kubernetes.io/proxy-read-timeout: "15m"
-      nginx.ingress.kubernetes.io/force-ssl-redirect: "true"
-      nginx.ingress.kubernetes.io/ssl-redirect: "true"
-      nginx.ingress.kubernetes.io/cors-allow-origin: "https://*.blockscout-main.k8s-dev.blockscout.com, https://*.k8s-dev.blockscout.com, http://localhost:3000"
-      nginx.ingress.kubernetes.io/cors-allow-credentials: "true"
-      nginx.ingress.kubernetes.io/cors-allow-methods: "PUT, GET, POST, OPTIONS, DELETE, PATCH"
-      nginx.ingress.kubernetes.io/enable-cors: "true"
-      nginx.ingress.kubernetes.io/cors-allow-headers: "DNT,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,x-csrf-token"
-    hostname: blockscout-optimism-goerli.k8s-dev.blockscout.com
-    tls:
-      enabled: true
-  resources:
-    limits:
-      memory: "4Gi"
-      cpu: "2"
-    requests:
-      memory: "2Gi"
-      cpu: "1"
-
-  env:
-    ENV: test
-    RESOURCE_MODE: account
-    PUBLIC: 'false'
-    PORT: 4000
-    PORT_PG: 5432
-    PORT_NETWORK_HTTP: 8545
-    PORT_NETWORK_WS: 8546
-    ETHEREUM_JSONRPC_VARIANT: geth
-    MIX_ENV: prod
-    MICROSERVICE_SC_VERIFIER_ENABLED: 'true'
-    MICROSERVICE_SC_VERIFIER_TYPE: 'eth_bytecode_db'
-    MICROSERVICE_SC_VERIFIER_URL: https://sc-verifier-test.k8s-dev.blockscout.com
-    DISABLE_EXCHANGE_RATES: 'true'
-    APPS_MENU: 'true'
-    EXTERNAL_APPS: '[{"title": "Marketplace", "url": "/apps"}]'
-    JSON_RPC: https://goerli.optimism.io
-    FIRST_BLOCK: '4667000'
-    TRACE_FIRST_BLOCK: '4667000'
-    LAST_BLOCK: '4677000'
-    TRACE_LAST_BLOCK: '4677000'
-    DISABLE_REALTIME_INDEXER: 'false'
-    INDEXER_OPTIMISM_L1_PORTAL_CONTRACT: 0x5b47E1A08Ea6d985D6649300584e6722Ec4B1383
-    INDEXER_OPTIMISM_L1_WITHDRAWALS_START_BLOCK: '8299683'
-    INDEXER_OPTIMISM_L2_WITHDRAWALS_START_BLOCK: '4066066'
-    INDEXER_OPTIMISM_L2_MESSAGE_PASSER_CONTRACT: 0x4200000000000000000000000000000000000016
-    INDEXER_OPTIMISM_L1_OUTPUT_ROOTS_START_BLOCK: '8299683'
-    INDEXER_OPTIMISM_L1_OUTPUT_ORACLE_CONTRACT: 0xE6Dfba0953616Bacab0c9A8ecb3a9BBa77FC15c0
-    INDEXER_OPTIMISM_L1_BATCH_START_BLOCK: '8381594'
-    INDEXER_OPTIMISM_L1_BATCH_INBOX: 0xff00000000000000000000000000000000000420
-    INDEXER_OPTIMISM_L1_BATCH_SUBMITTER: 0x7431310e026b69bfc676c0013e12a1a11411eec9
-    INDEXER_OPTIMISM_L1_DEPOSITS_START_BLOCK: '8381594'
-    ETHEREUM_JSONRPC_DEBUG_TRACE_TRANSACTION_TIMEOUT: '25s'
-  envFromSecret:
-    INDEXER_OPTIMISM_L1_RPC: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/INDEXER_OPTIMISM_L1_RPC
-    ACCOUNT_USERNAME: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_USERNAME
-    ACCOUNT_PASSWORD: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_PASSWORD
-    MAILSLURP_API_KEY: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/MAILSLURP_API_KEY
-    MAILSLURP_EMAIL_ID: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/MAILSLURP_EMAIL_ID
-    ACCOUNT_AUTH0_DOMAIN: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_AUTH0_DOMAIN
-    ACCOUNT_AUTH0_CLIENT_ID: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_AUTH0_CLIENT_ID
-    ACCOUNT_AUTH0_CLIENT_SECRET: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_AUTH0_CLIENT_SECRET
-    ACCOUNT_SENDGRID_API_KEY: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_SENDGRID_API_KEY
-    ACCOUNT_SENDGRID_SENDER: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_SENDGRID_SENDER
-    ACCOUNT_SENDGRID_TEMPLATE: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_SENDGRID_TEMPLATE
-    ACCOUNT_PUBLIC_TAGS_AIRTABLE_URL: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_PUBLIC_TAGS_AIRTABLE_URL
-    ACCOUNT_PUBLIC_TAGS_AIRTABLE_API_KEY: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_PUBLIC_TAGS_AIRTABLE_API_KEY
-    ACCOUNT_CLOAK_KEY: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_CLOAK_KEY
-    SECRET_KEY_BASE: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/SECRET_KEY_BASE
-    DATABASE_URL: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/DATABASE_URL
-    ACCOUNT_DATABASE_URL: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_DATABASE_URL
-    ACCOUNT_REDIS_URL: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_REDIS_URL
-    ETHEREUM_JSONRPC_TRACE_URL: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ETHEREUM_JSONRPC_TRACE_URL
-    ETHEREUM_JSONRPC_HTTP_URL: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ETHEREUM_JSONRPC_HTTP_URL
-    ETHEREUM_JSONRPC_WS_URL: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ETHEREUM_JSONRPC_WS_URL
-    RE_CAPTCHA_SECRET_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/RE_CAPTCHA_SECRET_KEY
-    RE_CAPTCHA_CLIENT_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/RE_CAPTCHA_CLIENT_KEY
-
-stats:
-  enabled: true
-  image:
-    tag: main
-    pullPolicy: Always
-
-  ingress:
-    enabled: true
-    annotations:
-      kubernetes.io/ingress.class: internal-and-public
-      nginx.ingress.kubernetes.io/proxy-body-size: "500m"
-      nginx.ingress.kubernetes.io/client-max-body-size: "500M"
-      nginx.ingress.kubernetes.io/proxy-buffering: "off"
-      nginx.ingress.kubernetes.io/proxy-connect-timeout: "15m"
-      nginx.ingress.kubernetes.io/proxy-send-timeout: "15m"
-      nginx.ingress.kubernetes.io/proxy-read-timeout: "15m"
-      nginx.ingress.kubernetes.io/force-ssl-redirect: "true"
-      nginx.ingress.kubernetes.io/ssl-redirect: "true"
-      nginx.ingress.kubernetes.io/cors-allow-origin: "https://*.blockscout-main.k8s-dev.blockscout.com, https://*.k8s-dev.blockscout.com, http://localhost:3000"
-      nginx.ingress.kubernetes.io/cors-allow-credentials: "true"
-      nginx.ingress.kubernetes.io/cors-allow-methods: "PUT, GET, POST, OPTIONS, DELETE, PATCH"
-      nginx.ingress.kubernetes.io/enable-cors: "true"
-    hostname: stats-optimism-goerli.k8s-dev.blockscout.com
-    tls:
-      enabled: true
-
-  resources:
-    limits:
-      cpu: 250m
-      memory: 512Mi
-    requests:
-      cpu: 250m
-      memory: 256Mi
-  env:
-    RUST_LOG: info
-    STATS__RUN_MIGRATIONS: true
-    STATS__TRACING__FORMAT: json
-    STATS__METRICS__ENABLED: true
-  envFromSecret:
-    STATS__DB_URL: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/STATS__DB_URL
-    STATS__BLOCKSCOUT_DB_URL: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/STATS__BLOCKSCOUT_DB_URL
-
-frontend:
-  enabled: true
-  image:
-    pullPolicy: Always
-  replicaCount: 1
-  ingress:
-    enabled: true
-    hostname: blockscout-optimism-goerli.k8s-dev.blockscout.com
-    annotations:
-      kubernetes.io/ingress.class: internal-and-public
-      nginx.ingress.kubernetes.io/proxy-body-size: 500m
-      nginx.ingress.kubernetes.io/client-max-body-size: "500M"
-      nginx.ingress.kubernetes.io/proxy-buffering: "off"
-      nginx.ingress.kubernetes.io/proxy-connect-timeout: "15m"
-      nginx.ingress.kubernetes.io/proxy-send-timeout: "15m"
-      nginx.ingress.kubernetes.io/proxy-read-timeout: "15m"
-      cert-manager.io/cluster-issuer: "zerossl-prod"
-  resources:
-    limits:
-      cpu: 200m
-      memory: 512Mi
-    requests:
-      cpu: 200m
-      memory: 256Mi
-  env:
-    NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE: validation
-    NEXT_PUBLIC_NETWORK_LOGO: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/base.svg
-    NEXT_PUBLIC_NETWORK_ICON: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/base.svg
-    NEXT_PUBLIC_FEATURED_NETWORKS: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/base-goerli.json
-    NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM: https://airtable.com/shrqUAcjgGJ4jU88C
-    NEXT_PUBLIC_LOGOUT_URL: https://blockscoutcom.us.auth0.com/v2/logout
-    NEXT_PUBLIC_MARKETPLACE_CONFIG_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/base-goerli.json
-    NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace-categories/default.json
-    NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND: "linear-gradient(136.9deg,rgb(107 94 236) 1.5%,rgb(0 82 255) 56.84%,rgb(82 62 231) 98.54%)"
-    NEXT_PUBLIC_NETWORK_RPC_URL: https://goerli.optimism.io
-    NEXT_PUBLIC_WEB3_WALLETS: "['coinbase']"
-    NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET: true
-    NEXT_PUBLIC_HOMEPAGE_CHARTS: "['daily_txs']"
-    NEXT_PUBLIC_VISUALIZE_API_HOST: https://visualizer-test.k8s-dev.blockscout.com
-    NEXT_PUBLIC_CONTRACT_INFO_API_HOST: https://contracts-info-test.k8s-dev.blockscout.com
-    NEXT_PUBLIC_ADMIN_SERVICE_API_HOST: https://admin-rs-test.k8s-dev.blockscout.com
-    NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK: "true"
-    NEXT_PUBLIC_L1_BASE_URL: https://eth-goerli.blockscout.com/
-    NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL: https://app.optimism.io/bridge/withdraw
-    NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 0x4a0ed8ddf751a7cb5297f827699117b0f6d21a0b2907594d300dc9fed75c7e62
-  envFromSecret:
-    NEXT_PUBLIC_AUTH0_CLIENT_ID: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_AUTH0_CLIENT_ID
-    NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID
-    NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY
-    NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID
-    FAVICON_GENERATOR_API_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_FAVICON_GENERATOR_API_KEY
diff --git a/deploy/values/main/values.yaml b/deploy/values/main/values.yaml
deleted file mode 100644
index 28e3752f42..0000000000
--- a/deploy/values/main/values.yaml
+++ /dev/null
@@ -1,173 +0,0 @@
-fullNameOverride: bs-stack
-nameOverride: bs-stack
-imagePullSecrets:
-  - name: regcred
-config:
-  network:
-    id: 5
-    name: Göerli
-    shortname: Göerli
-    currency:
-      name: Ether
-      symbol: ETH
-      decimals: 18
-  account:
-    enabled: true
-  testnet: true
-
-
-blockscout:
-  enabled: true
-  image:
-    pullPolicy: Always
-    tag: frontend-main
-  replicaCount: 1
-  # enable ingress
-  ingress:
-    enabled: true
-    annotations:
-      kubernetes.io/ingress.class: internal-and-public
-      nginx.ingress.kubernetes.io/proxy-body-size: "500m"
-      nginx.ingress.kubernetes.io/client-max-body-size: "500M"
-      nginx.ingress.kubernetes.io/proxy-buffering: "off"
-      nginx.ingress.kubernetes.io/proxy-connect-timeout: "15m"
-      nginx.ingress.kubernetes.io/proxy-send-timeout: "15m"
-      nginx.ingress.kubernetes.io/proxy-read-timeout: "15m"
-      nginx.ingress.kubernetes.io/force-ssl-redirect: "true"
-      nginx.ingress.kubernetes.io/ssl-redirect: "true"
-      nginx.ingress.kubernetes.io/cors-allow-origin: "https://*.k8s-dev.blockscout.com, http://localhost:3000"
-      nginx.ingress.kubernetes.io/cors-allow-credentials: "true"
-      nginx.ingress.kubernetes.io/cors-allow-methods: "PUT, GET, POST, OPTIONS, DELETE, PATCH"
-      nginx.ingress.kubernetes.io/enable-cors: "true"
-      nginx.ingress.kubernetes.io/cors-allow-headers: "DNT,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,x-csrf-token"
-      nginx.ingress.kubernetes.io/cors-expose-headers: "x-bs-account-csrf"
-    hostname: blockscout-main.k8s-dev.blockscout.com
-    tls:
-      enabled: true
-
-  resources:
-    limits:
-      memory: "6Gi"
-      cpu: "6"
-    requests:
-      memory: "3Gi"
-      cpu: "3"
-  # Blockscout environment variables
-  env:
-    BLOCKSCOUT_VERSION: v5.3.0-beta
-    ETHEREUM_JSONRPC_VARIANT: geth
-    HEART_BEAT_TIMEOUT: 30
-    SUBNETWORK: Ethereum
-    NETWORK: (Goerli)
-    NETWORK_ICON: _network_icon.html
-    LOGO: /images/goerli_logo.svg
-    TXS_STATS_DAYS_TO_COMPILE_AT_INIT: 1
-    COIN_BALANCE_HISTORY_DAYS: 90
-    POOL_SIZE: 100
-    DISPLAY_TOKEN_ICONS: 'true'
-    FETCH_REWARDS_WAY: manual
-    MICROSERVICE_SC_VERIFIER_ENABLED: 'true'
-    MICROSERVICE_SC_VERIFIER_TYPE: 'eth_bytecode_db'
-    MICROSERVICE_SC_VERIFIER_URL: http://eth-bytecode-db-svc.eth-bytecode-db-testing.svc.cluster.local:80
-    INDEXER_MEMORY_LIMIT: 5
-    APPS_MENU: 'true'
-    APPS: '[{"title": "Marketplace", "url": "/apps", "embedded?": true}]'
-    SESSION_COOKIE_DOMAIN: blockscout-main.k8s-dev.blockscout.com
-    ETHEREUM_JSONRPC_DEBUG_TRACE_TRANSACTION_TIMEOUT: '20s'
-    INDEXER_INTERNAL_TRANSACTIONS_BATCH_SIZE: 15
-    INDEXER_DISABLE_EMPTY_BLOCKS_SANITIZER: 'true'
-    INDEXER_DISABLE_PENDING_TRANSACTIONS_FETCHER: 'true'
-    INDEXER_RECEIPTS_BATCH_SIZE: 50
-    INDEXER_COIN_BALANCES_BATCH_SIZE: 50
-    DISABLE_EXCHANGE_RATES: 'true'
-    DISABLE_INDEXER: 'false'
-    FIRST_BLOCK: '8739119'
-    LAST_BLOCK: '8739119'
-    TRACE_FIRST_BLOCK: '8739119'
-    TRACE_LAST_BLOCK: '8739119'
-  envFromSecret:
-    ETHEREUM_JSONRPC_TRACE_URL: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ETHEREUM_JSONRPC_TRACE_URL
-    ETHEREUM_JSONRPC_HTTP_URL: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ETHEREUM_JSONRPC_HTTP_URL
-    ACCOUNT_USERNAME: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_USERNAME
-    ACCOUNT_PASSWORD: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_PASSWORD
-    MAILSLURP_API_KEY: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/MAILSLURP_API_KEY
-    MAILSLURP_EMAIL_ID: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/MAILSLURP_EMAIL_ID
-    ACCOUNT_SENDGRID_API_KEY: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_SENDGRID_API_KEY
-    ACCOUNT_SENDGRID_SENDER: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_SENDGRID_SENDER
-    ACCOUNT_SENDGRID_TEMPLATE: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_SENDGRID_TEMPLATE
-    ACCOUNT_PUBLIC_TAGS_AIRTABLE_URL: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_PUBLIC_TAGS_AIRTABLE_URL
-    ACCOUNT_PUBLIC_TAGS_AIRTABLE_API_KEY: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_PUBLIC_TAGS_AIRTABLE_API_KEY
-    ACCOUNT_CLOAK_KEY: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_CLOAK_KEY
-    SECRET_KEY_BASE: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/SECRET_KEY_BASE
-    DATABASE_URL: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/DATABASE_URL
-    DATABASE_READ_ONLY_API_URL: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/DATABASE_READ_ONLY_API_URL
-    API_SENSITIVE_ENDPOINTS_KEY: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/API_SENSITIVE_ENDPOINTS_KEY
-    ACCOUNT_DATABASE_URL: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_DATABASE_URL
-    ACCOUNT_REDIS_URL: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_REDIS_URL
-    ACCOUNT_AUTH0_DOMAIN: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_AUTH0_DOMAIN
-    ACCOUNT_AUTH0_CLIENT_ID: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_AUTH0_CLIENT_ID
-    ACCOUNT_AUTH0_CLIENT_SECRET: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_AUTH0_CLIENT_SECRET
-    RE_CAPTCHA_SECRET_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/RE_CAPTCHA_SECRET_KEY
-    RE_CAPTCHA_CLIENT_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/RE_CAPTCHA_CLIENT_KEY
-
-frontend:
-  enabled: true
-  image:
-    tag: main
-    pullPolicy: Always
-  replicaCount: 1
-  ingress:
-    enabled: true
-    annotations:
-      kubernetes.io/ingress.class: internal-and-public
-      nginx.ingress.kubernetes.io/proxy-body-size: 500m
-      nginx.ingress.kubernetes.io/client-max-body-size: "500M"
-      nginx.ingress.kubernetes.io/proxy-buffering: "off"
-      nginx.ingress.kubernetes.io/proxy-connect-timeout: "15m"
-      nginx.ingress.kubernetes.io/proxy-send-timeout: "15m"
-      nginx.ingress.kubernetes.io/proxy-read-timeout: "15m"
-      cert-manager.io/cluster-issuer: "zerossl-prod"
-    hostname: blockscout-main.k8s-dev.blockscout.com
-
-  resources:
-    limits:
-      memory: 768Mi
-      cpu: 500m
-    requests:
-      memory: 384Mi
-      cpu: 250m
-
-  env:
-    # ui config
-    NEXT_PUBLIC_FEATURED_NETWORKS: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/eth-goerli.json
-    NEXT_PUBLIC_NETWORK_EXPLORERS: "[{'title':'Bitquery','baseUrl':'https://explorer.bitquery.io/','paths':{'tx':'/goerli/tx','address':'/goerli/address','token':'/goerli/token','block':'/goerli/block'}},{'title':'Etherscan','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]"
-    # network config
-    NEXT_PUBLIC_NETWORK_LOGO: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/goerli.svg
-    NEXT_PUBLIC_NETWORK_ICON: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/goerli.svg
-
-    NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE: validation
-    NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM: https://airtable.com/shrqUAcjgGJ4jU88C
-    NEXT_PUBLIC_APP_ENV: development
-    NEXT_PUBLIC_APP_INSTANCE: main
-    NEXT_PUBLIC_STATS_API_HOST: https://stats-test.k8s-dev.blockscout.com/
-    NEXT_PUBLIC_VISUALIZE_API_HOST: http://visualizer-svc.visualizer-testing.svc.cluster.local/
-    NEXT_PUBLIC_CONTRACT_INFO_API_HOST: https://contracts-info-test.k8s-dev.blockscout.com
-    NEXT_PUBLIC_ADMIN_SERVICE_API_HOST: https://admin-rs-test.k8s-dev.blockscout.com
-    NEXT_PUBLIC_NAME_SERVICE_API_HOST: https://bens-rs-test.k8s-dev.blockscout.com
-    NEXT_PUBLIC_LOGOUT_URL: https://blockscoutcom.us.auth0.com/v2/logout
-    NEXT_PUBLIC_NETWORK_RPC_URL: https://rpc.ankr.com/eth_goerli
-    NEXT_PUBLIC_HOMEPAGE_CHARTS: "['daily_txs','coin_price','market_cap']"
-    NEXT_PUBLIC_MARKETPLACE_CONFIG_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/eth-goerli.json
-    NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace-categories/default.json
-    NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
-    NEXT_PUBLIC_WEB3_WALLETS: "['token_pocket','coinbase','metamask']"
-    NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES: "[{'name':'LooksRare','collection_url':'https://goerli.looksrare.org/collections/{hash}','instance_url':'https://goerli.looksrare.org/collections/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/looks-rare.png'}]"
-    NEXT_PUBLIC_CONTRACT_CODE_IDES: "[{'title':'Remix IDE','url':'https://remix.blockscout.com/?address={hash}&blockscout=eth-goerli.blockscout.com','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]"
-  envFromSecret:
-    NEXT_PUBLIC_SENTRY_DSN: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_SENTRY_DSN
-    SENTRY_CSP_REPORT_URI: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/SENTRY_CSP_REPORT_URI
-    NEXT_PUBLIC_AUTH0_CLIENT_ID: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_AUTH0_CLIENT_ID
-    NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID
-    NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY
-    NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID
-    FAVICON_GENERATOR_API_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_FAVICON_GENERATOR_API_KEY
diff --git a/deploy/values/review-l2/values.yaml.gotmpl b/deploy/values/review-l2/values.yaml.gotmpl
index fb661d526f..3a91738499 100644
--- a/deploy/values/review-l2/values.yaml.gotmpl
+++ b/deploy/values/review-l2/values.yaml.gotmpl
@@ -5,7 +5,7 @@ imagePullSecrets:
 config:
   network:
     id: 420
-    name: "Base Göerli"
+    name: "Base"
     shortname: Base
     currency:
       name: Ether
@@ -30,10 +30,12 @@ frontend:
       kubernetes.io/ingress.class: internal-and-public
       nginx.ingress.kubernetes.io/proxy-body-size: 500m
       nginx.ingress.kubernetes.io/client-max-body-size: "500M"
-      nginx.ingress.kubernetes.io/proxy-buffering: "off"
+      nginx.ingress.kubernetes.io/proxy-buffering: "on"
       nginx.ingress.kubernetes.io/proxy-connect-timeout: "15m"
       nginx.ingress.kubernetes.io/proxy-send-timeout: "15m"
       nginx.ingress.kubernetes.io/proxy-read-timeout: "15m"
+      nginx.ingress.kubernetes.io/proxy-buffer-size: "128k"
+      nginx.ingress.kubernetes.io/proxy-buffers-number: "8"
       cert-manager.io/cluster-issuer: "zerossl-prod"
     hostname: review-l2-{{ requiredEnv "GITHUB_REF_NAME_SLUG" }}.k8s-dev.blockscout.com
 
@@ -45,37 +47,33 @@ frontend:
       memory: 384Mi
       cpu: 250m
   env:
-    NEXT_PUBLIC_APP_ENV: development
-    NEXT_PUBLIC_APP_INSTANCE: review_L2
-    NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE: validation
+    NEXT_PUBLIC_APP_ENV: review
     NEXT_PUBLIC_NETWORK_LOGO: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/base.svg
     NEXT_PUBLIC_NETWORK_ICON: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/base.svg
-    NEXT_PUBLIC_FEATURED_NETWORKS: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/base-goerli.json
-    NEXT_PUBLIC_API_HOST: blockscout-optimism-goerli.k8s-dev.blockscout.com
-    NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM: https://airtable.com/shrqUAcjgGJ4jU88C
+    NEXT_PUBLIC_FEATURED_NETWORKS: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/base-mainnet.json
+    NEXT_PUBLIC_API_HOST: base.blockscout.com
     NEXT_PUBLIC_LOGOUT_URL: https://blockscoutcom.us.auth0.com/v2/logout
-    NEXT_PUBLIC_STATS_API_HOST: https://stats-optimism-goerli.k8s-dev.blockscout.com
-    NEXT_PUBLIC_MARKETPLACE_CONFIG_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/base-goerli.json
-    NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace-categories/default.json
+    NEXT_PUBLIC_STATS_API_HOST: https://stats-l2-base-mainnet.k8s-prod-1.blockscout.com
     NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND: "linear-gradient(136.9deg,rgb(107 94 236) 1.5%,rgb(0 82 255) 56.84%,rgb(82 62 231) 98.54%)"
-    NEXT_PUBLIC_NETWORK_RPC_URL: https://goerli.optimism.io
+    NEXT_PUBLIC_NETWORK_RPC_URL: https://mainnet.base.org
     NEXT_PUBLIC_WEB3_WALLETS: "['coinbase']"
     NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET: true
     NEXT_PUBLIC_HOMEPAGE_CHARTS: "['daily_txs']"
-    NEXT_PUBLIC_VISUALIZE_API_HOST: https://visualizer-optimism-goerli.k8s-dev.blockscout.com
-    NEXT_PUBLIC_CONTRACT_INFO_API_HOST: https://contracts-info-test.k8s-dev.blockscout.com
-    NEXT_PUBLIC_ADMIN_SERVICE_API_HOST: https://admin-rs-test.k8s-dev.blockscout.com
-    NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK: "true"
-    NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL: https://app.optimism.io/bridge/withdraw
-    NEXT_PUBLIC_L1_BASE_URL: https://blockscout-main.k8s-dev.blockscout.com
+    NEXT_PUBLIC_VISUALIZE_API_HOST: https://visualizer.services.blockscout.com
+    NEXT_PUBLIC_CONTRACT_INFO_API_HOST: https://contracts-info.services.blockscout.com
+    NEXT_PUBLIC_ADMIN_SERVICE_API_HOST: https://admin-rs.services.blockscout.com
+    NEXT_PUBLIC_NAME_SERVICE_API_HOST: https://bens.services.blockscout.com
+    NEXT_PUBLIC_METADATA_SERVICE_API_HOST: https://metadata.services.blockscout.com
+    NEXT_PUBLIC_ROLLUP_TYPE: optimistic
+    NEXT_PUBLIC_ROLLUP_L1_BASE_URL: https://eth.blockscout.com
+    NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL: https://app.optimism.io/bridge/withdraw
     NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 0x4a0ed8ddf751a7cb5297f827699117b0f6d21a0b2907594d300dc9fed75c7e62
     NEXT_PUBLIC_USE_NEXT_JS_PROXY: true
+    NEXT_PUBLIC_NAVIGATION_LAYOUT: horizontal
+    NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES: "['/blocks','/name-domains']"
   envFromSecret:
-    NEXT_PUBLIC_SENTRY_DSN: ref+vault://deployment-values/blockscout/dev/review-l2?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_SENTRY_DSN
-    SENTRY_CSP_REPORT_URI: ref+vault://deployment-values/blockscout/dev/review-l2?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/SENTRY_CSP_REPORT_URI
     NEXT_PUBLIC_AUTH0_CLIENT_ID: ref+vault://deployment-values/blockscout/dev/review-l2?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_AUTH0_CLIENT_ID
     NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: ref+vault://deployment-values/blockscout/dev/review-l2?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID
-    NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY: ref+vault://deployment-values/blockscout/dev/review-l2?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY
     NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID: ref+vault://deployment-values/blockscout/dev/review-l2?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID
-    FAVICON_GENERATOR_API_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_FAVICON_GENERATOR_API_KEY
-    NEXT_PUBLIC_OG_IMAGE_URL: https://github.com/blockscout/frontend-configs/blob/main/configs/og-images/base-goerli.png?raw=true
+    NEXT_PUBLIC_OG_IMAGE_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/base-mainnet.png
+    NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY: ref+vault://deployment-values/blockscout/eth-sepolia/testnet?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/RE_CAPTCHA_CLIENT_KEY
diff --git a/deploy/values/review/values.yaml.gotmpl b/deploy/values/review/values.yaml.gotmpl
index f2fda6ceec..6bd0759fa1 100644
--- a/deploy/values/review/values.yaml.gotmpl
+++ b/deploy/values/review/values.yaml.gotmpl
@@ -4,7 +4,7 @@ imagePullSecrets:
   - name: regcred
 config:
   network:
-    id: 5
+    id: "11155111"
     name: Blockscout
     shortname: Blockscout
     currency:
@@ -30,10 +30,12 @@ frontend:
       kubernetes.io/ingress.class: internal-and-public
       nginx.ingress.kubernetes.io/proxy-body-size: 500m
       nginx.ingress.kubernetes.io/client-max-body-size: "500M"
-      nginx.ingress.kubernetes.io/proxy-buffering: "off"
+      nginx.ingress.kubernetes.io/proxy-buffering: "on"
       nginx.ingress.kubernetes.io/proxy-connect-timeout: "15m"
       nginx.ingress.kubernetes.io/proxy-send-timeout: "15m"
       nginx.ingress.kubernetes.io/proxy-read-timeout: "15m"
+      nginx.ingress.kubernetes.io/proxy-buffer-size: "128k"
+      nginx.ingress.kubernetes.io/proxy-buffers-number: "8"
       cert-manager.io/cluster-issuer: "zerossl-prod"
     hostname: review-{{ requiredEnv "GITHUB_REF_NAME_SLUG" }}.k8s-dev.blockscout.com
 
@@ -45,44 +47,42 @@ frontend:
       memory: 384Mi
       cpu: 250m
   env:
-    NEXT_PUBLIC_APP_ENV: development
-    NEXT_PUBLIC_APP_INSTANCE: review
-    NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE: validation
-    NEXT_PUBLIC_FEATURED_NETWORKS: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/eth-goerli.json
-    NEXT_PUBLIC_NETWORK_LOGO: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/goerli.svg
-    NEXT_PUBLIC_NETWORK_ICON: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/goerli.svg
-    NEXT_PUBLIC_API_HOST: eth-goerli.blockscout.com
-    NEXT_PUBLIC_STATS_API_HOST: https://stats-goerli.k8s-dev.blockscout.com/
+    NEXT_PUBLIC_APP_ENV: review
+    NEXT_PUBLIC_FEATURED_NETWORKS: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/eth-sepolia.json
+    NEXT_PUBLIC_NETWORK_LOGO: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/sepolia.svg
+    NEXT_PUBLIC_NETWORK_ICON: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/sepolia.png
+    NEXT_PUBLIC_API_HOST: eth-sepolia.k8s-dev.blockscout.com
+    NEXT_PUBLIC_STATS_API_HOST: https://stats-sepolia.k8s-dev.blockscout.com/
     NEXT_PUBLIC_VISUALIZE_API_HOST: http://visualizer-svc.visualizer-testing.svc.cluster.local/
     NEXT_PUBLIC_CONTRACT_INFO_API_HOST: https://contracts-info-test.k8s-dev.blockscout.com
     NEXT_PUBLIC_ADMIN_SERVICE_API_HOST: https://admin-rs-test.k8s-dev.blockscout.com
     NEXT_PUBLIC_NAME_SERVICE_API_HOST: https://bens-rs-test.k8s-dev.blockscout.com
+    NEXT_PUBLIC_METADATA_SERVICE_API_HOST: https://metadata-test.k8s-dev.blockscout.com
     NEXT_PUBLIC_AUTH_URL: https://blockscout-main.k8s-dev.blockscout.com
-    NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM: https://airtable.com/shrqUAcjgGJ4jU88C
     NEXT_PUBLIC_LOGOUT_URL: https://blockscoutcom.us.auth0.com/v2/logout
     NEXT_PUBLIC_HOMEPAGE_CHARTS: "['daily_txs','coin_price','market_cap']"
-    NEXT_PUBLIC_NETWORK_RPC_URL: https://rpc.ankr.com/eth_goerli
-    NEXT_PUBLIC_NETWORK_EXPLORERS: "[{'title':'Bitquery','baseUrl':'https://explorer.bitquery.io/','paths':{'tx':'/goerli/tx','address':'/goerli/address','token':'/goerli/token','block':'/goerli/block'}},{'title':'Etherscan','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]"
-    NEXT_PUBLIC_MARKETPLACE_CONFIG_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/eth-goerli.json
-    NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace-categories/default.json
+    NEXT_PUBLIC_NETWORK_RPC_URL: https://eth-sepolia.public.blastapi.io
+    NEXT_PUBLIC_NETWORK_EXPLORERS: "[{'title':'Bitquery','baseUrl':'https://explorer.bitquery.io/','paths':{'tx':'/goerli/tx','address':'/goerli/address','token':'/goerli/token','block':'/goerli/block'}},{'title':'Etherscan','logo':'https://github.com/blockscout/frontend-configs/blob/main/configs/explorer-logos/etherscan.png?raw=true','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]"
     NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
     NEXT_PUBLIC_WEB3_WALLETS: "['token_pocket','coinbase','metamask']"
     NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE: gradient_avatar
-    NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS: "['top_accounts']"
     NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED: true
-    NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS: "['value','fee_currency','gas_price','gas_fees','burnt_fees']"
-    NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS: "['fee_per_gas']"
     NEXT_PUBLIC_USE_NEXT_JS_PROXY: true
     NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES: "[{'name':'LooksRare','collection_url':'https://goerli.looksrare.org/collections/{hash}','instance_url':'https://goerli.looksrare.org/collections/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/looks-rare.png'}]"
     NEXT_PUBLIC_HAS_USER_OPS: true
     NEXT_PUBLIC_CONTRACT_CODE_IDES: "[{'title':'Remix IDE','url':'https://remix.blockscout.com/?address={hash}&blockscout=eth-goerli.blockscout.com','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]"
+    NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER: blockscout
+    NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS: true
+    NEXT_PUBLIC_AD_BANNER_PROVIDER: slise
+    NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED: true
+    NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES: "['/apps']"
+    PROMETHEUS_METRICS_ENABLED: true
+    NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED: true
   envFromSecret:
-    NEXT_PUBLIC_SENTRY_DSN: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_SENTRY_DSN
-    SENTRY_CSP_REPORT_URI: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/SENTRY_CSP_REPORT_URI
     NEXT_PUBLIC_AUTH0_CLIENT_ID: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_AUTH0_CLIENT_ID
     NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID
-    NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY
     NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID
-    FAVICON_GENERATOR_API_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_FAVICON_GENERATOR_API_KEY
     NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY
     NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN
+    NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY: ref+vault://deployment-values/blockscout/eth-sepolia/testnet?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/RE_CAPTCHA_CLIENT_KEY
+    NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN
diff --git a/docs/BUILD-TIME_ENVS.md b/docs/BUILD-TIME_ENVS.md
index 08524e4389..f151a30e77 100644
--- a/docs/BUILD-TIME_ENVS.md
+++ b/docs/BUILD-TIME_ENVS.md
@@ -5,4 +5,5 @@ These variables are passed to the app during the image build process. They canno
 | Variable | Type | Description | Optional | Example value |
 | --- | --- | --- | --- | --- |
 | NEXT_PUBLIC_GIT_COMMIT_SHA | `string` | SHA of the latest commit in the branch from which image is built | false | `29d0613e` |
-| NEXT_PUBLIC_GIT_TAG | `string` | Git tag on the latest commit in the branch from which image is built | true | `v1.0.0` |
+| NEXT_PUBLIC_GIT_TAG | `string` | Git tag of the latest commit in the branch from which image is built | true | `v1.0.0` |
+| NEXT_OPEN_TELEMETRY_ENABLED | `boolean` | Enables OpenTelemetry SDK | true | `true` |
diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md
index 08dc19eaf2..db83ba302a 100644
--- a/docs/CONTRIBUTING.md
+++ b/docs/CONTRIBUTING.md
@@ -49,15 +49,15 @@ To develop locally, follow one of the two paths outlined below:
 A. Custom configuration:
 
 1. Create `.env.local` file in the root folder and include all required environment variables from the [list](./ENVS.md)
-2. Optionally, clone `.env.example` and name it `.env.secrets`. Fill it with necessary secrets for integrating with [external services](./ENVS.md#external-services-configuration). Include only secrets your need.
-3. Use `yarn dev` command to start the dev server.
+2. Optionally, clone `.env.example` and name it `.env.secrets`. Fill it with necessary secrets for integrating with [external services](./ENVS.md#external-services-configuration). Include only secrets you need.
+3. Use `yarn dev` command to start the Dev Server.
 4. Open your browser and navigate to the URL provided in the command line output (by default, it is `http://localhost:3000`).
 
 B. Pre-defined configuration:
 
 1. Optionally, clone `.env.example` file into `configs/envs/.env.secrets`. Fill it with necessary secrets for integrating with [external services](./ENVS.md#external-services-configuration). Include only secrets your need.
 2. Choose one of the predefined configurations located in the `/configs/envs` folder.
-3. Start your local dev server using the `yarn dev:<config_name>` command.
+3. Start your local Dev Server using the `yarn dev:preset <config_preset_name>` command.
 4. Open your browser and navigate to the URL provided in the command line output (by default, it is `http://localhost:3000`).
 
 
@@ -66,7 +66,7 @@ B. Pre-defined configuration:
 ## Adding new dependencies
 For all types of dependencies:
 - **Do not add** a dependency if the desired functionality is easily implementable
-- If adding a dependency is necessary, please be sure that is is well-maintained and trustworthy
+- If adding a dependency is necessary, please be sure that it is well-maintained and trustworthy
 
 &nbsp;
 
@@ -79,18 +79,19 @@ These are the steps that you have to follow to make everything work:
 2. Make sure that you have added a property to React app config (`configs/app/index.ts`) in appropriate section that is associated with this variable; do not use ENV variable values directly in the application code; decide where this variable belongs to and place it under the certain section:
     - `app` - the front-end app itself
     - `api` - the main API configuration
+    - `chain` - the Blockchain parameters
     - `UI` - the app UI customization
+    - `meta` - SEO and meta-tags customization
     - `features` - the particular feature of the app
-    - `services` - some 3rd party service integration which is not related to one particular feature  
-3. For local development purposes add the variable with its appropriate values to pre-defined ENV configs `configs/envs` where it is needed
-4. Add the variable to CI configs where it is needed
+    - `services` - some 3rd party service integration which is not related to one particular feature
+3. If a new variable is meant to store the URL of an external API service, remember to include its value in the Content-Security-Policy document header. Refer to `nextjs/csp/policies/app.ts` for details.
+4. For local development purposes add the variable with its appropriate values to pre-defined ENV configs `configs/envs` where it is needed
+5. Add the variable to CI configs where it is needed
     - `deploy/values/review/values.yaml.gotmpl` - review development environment
-    - `deploy/values/main/values.yaml` - main development environment
     - `deploy/values/review-l2/values.yaml.gotmpl` - review development environment for L2 networks
-    - `deploy/values/l2-optimism-goerli/values.yaml` - main development environment
-5. If your variable is meant to receive a link to some external resource (image or JSON-config file), extend the array `ASSETS_ENVS` in `deploy/scripts/download_assets.sh` with your variable name
-6. Add validation schema for the new variable into the file `deploy/tools/envs-validator/schema.ts`
-7. Check if modified validation schema is valid by doing the following steps:
+6. If your variable is meant to receive a link to some external resource (image or JSON-config file), extend the array `ASSETS_ENVS` in `deploy/scripts/download_assets.sh` with your variable name
+7. Add validation schema for the new variable into the file `deploy/tools/envs-validator/schema.ts`
+8. Check if modified validation schema is valid by doing the following steps:
     - change your current directory to `deploy/tools/envs-validator`
     - install deps with `yarn` command
     - add your variable into `./test/.env.base` test preset or create a new test preset if needed
@@ -98,7 +99,7 @@ These are the steps that you have to follow to make everything work:
       - add example of file content into `./test/assets` directory; the file name should be constructed by stripping away prefix `NEXT_PUBLIC_` and postfix `_URL` if any, and converting the remaining string to lowercase (for example, `NEXT_PUBLIC_MARKETPLACE_CONFIG_URL` will become `marketplace_config.json`)
       - in the main script `index.ts` extend array `envsWithJsonConfig` with your variable name
     - run `yarn test` command to see the validation result
-8. Don't forget to mention in the PR notes that new ENV variable was added  
+9. Don't forget to mention in the PR notes that new ENV variable was added  
 
 &nbsp;
 
@@ -108,11 +109,11 @@ Every feature or bugfix should be accompanied by tests, either unit tests or com
 
 ### Jest unit tests
 
-If your changes only related to the logic of the app and not to its visual presentation, then try to write unit tests using [Jest](https://jestjs.io/) framework and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/). In general these tests are "cheaper" and faster than Playwright ones. Use them for testing your utilities and React hooks, as well as the whole components logic. 
+If your changes are only related to the logic of the app and not to its visual presentation, then try to write unit tests using [Jest](https://jestjs.io/) framework and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/). In general these tests are "cheaper" and faster than Playwright ones. Use them for testing your utilities and React hooks, as well as the whole components logic. 
 
 Place your test suites in `.test.ts` or `.test.tsx` files. You can find or add some mocks or other helpful utilities for these tests purposes in the `/jest` folder. 
 
-*Note*, that we are using custom renderer and wrapper in all test for React components, so please do not import package `@testing-library/react` directly in your test suites, instead use imports from `jest/lib` utility.
+*Note*, that we are using custom renderer and wrapper in all tests for React components, so please do not import package `@testing-library/react` directly in your test suites, instead use imports from `jest/lib` utility.
 
 ### Playwright components tests
 
@@ -173,8 +174,8 @@ We have 3 pre-configured projects. You can run your test with the desired projec
 | Command | Description |
 | --- | --- |
 | **Running and building** |
-| `yarn dev` | run local dev server with user's configuration |
-| `yarn dev:preset <config_preset_name>` | run local dev server with predefined configuration |
+| `yarn dev` | run local Dev Server with user's configuration |
+| `yarn dev:preset <config_preset_name>` | run local Dev Server with predefined configuration |
 | `yarn build:docker` | build a docker image locally |
 | `yarn start:docker:local` | start an application from previously built local docker image with user's configuration |
 | `yarn start:docker:preset <config_preset_name>` | start an application from previously built local docker image with predefined configuration |
@@ -199,7 +200,7 @@ We have 3 pre-configured projects. You can run your test with the desired projec
 
 #### VSCode
 
-There are some predefined tasks for all commands described above. You can see its full list by pressing <kbd>cmd + shift + P</kbd> and using command `Task: Run task`
+There are some predefined tasks for all commands described above. You can see the full list by pressing <kbd>cmd + shift + P</kbd> and using command `Task: Run task`
 
 Also there is a Jest test launch configuration for debugging and running current test file in the watch mode.
 
diff --git a/docs/DEPRECATED_ENVS.md b/docs/DEPRECATED_ENVS.md
new file mode 100644
index 0000000000..171df270f9
--- /dev/null
+++ b/docs/DEPRECATED_ENVS.md
@@ -0,0 +1,14 @@
+# Deprecated environment variables
+
+| Variable | Type | Description | Compulsoriness | Default value | Example value | Introduced in version | Deprecated in version | Comment |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_FAVICON_GENERATOR_API_KEY | `string` | RealFaviconGenerator [API key](https://realfavicongenerator.net/api/) | Required | - | `<your-secret>` | v1.11.0 | v1.16.0 | Replaced FAVICON_GENERATOR_API_KEY |
+| FAVICON_GENERATOR_API_KEY | `string` | RealFaviconGenerator [API key](https://realfavicongenerator.net/api/) | Required | - | `<your-secret>` | v1.16.0+ | v1.37.0 | We don't use RealFaviconGenerator anymore |
+| NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK | `boolean` | Set to true for optimistic L2 solutions | Required | - | `true` | v1.17.0 | v1.24.0 | Replaced by NEXT_PUBLIC_ROLLUP_TYPE |
+| NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK | `boolean` | Set to true for zkevm L2 solutions  | Required | - | `true` | v1.17.0 | v1.24.0 | Replaced by NEXT_PUBLIC_ROLLUP_TYPE |
+| NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL | `string` | URL for optimistic L2 -> L1 withdrawals | Required | - | `https://app.optimism.io/bridge/withdraw` | v1.17.0 | v1.24.0 | Renamed to NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL |
+| NEXT_PUBLIC_L1_BASE_URL | `string` | Blockscout base URL for L1 network | Required | - | `'http://eth-goerli.blockscout.com'` | - | v1.24.0 | Renamed to NEXT_PUBLIC_ROLLUP_L1_BASE_URL |
+| NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER | `boolean` | Set to false if network doesn't have gas tracker | - | `true` | `false` | - | v1.25.0 | Replaced by NEXT_PUBLIC_GAS_TRACKER_ENABLED |
+| NEXT_PUBLIC_NETWORK_GOVERNANCE_TOKEN_SYMBOL | `string` | Network governance token symbol | - | - | `GNO` | v1.12.0 | v1.29.0 | Replaced by NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL |
+| NEXT_PUBLIC_SWAP_BUTTON_URL | `string` | Application ID in the marketplace or website URL | - | - | `uniswap` | v1.24.0 | v1.31.0 | Replaced by NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS |
+| NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME | `boolean` | Set to false if average block time is useless for the network | - | `true` | `false` | v1.0.x+ | v1.35.0 | Replaced by NEXT_PUBLIC_HOMEPAGE_STATS |
diff --git a/docs/ENVS.md b/docs/ENVS.md
index f11d7b8887..f155e22951 100644
--- a/docs/ENVS.md
+++ b/docs/ENVS.md
@@ -1,6 +1,6 @@
 # Run-time environment variables
 
-The app instance could be customized by passing following variables to NodeJS environment at run-time. See their list below.
+The app instance can be customized by passing the following variables to the Node.js environment at runtime. Some of these variables have been deprecated, and their full list can be found in the [file](./DEPRECATED_ENVS.md).
 
 **IMPORTANT NOTE!** For _production_ build purposes all json-like values should be single-quoted. If it contains a hash (`#`) or a dollar-sign (`$`) the whole value should be wrapped in single quotes as well (see `dotenv` [readme](https://github.com/bkeepers/dotenv#variable-substitution) for the reference)
 
@@ -16,7 +16,7 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
 - [API configuration](ENVS.md#api-configuration)
 - [UI configuration](ENVS.md#ui-configuration)
   - [Homepage](ENVS.md#homepage)
-  - [Sidebar](ENVS.md#sidebar)
+  - [Navigation](ENVS.md#navigation)
   - [Footer](ENVS.md#footer)
   - [Favicon](ENVS.md#favicon)
   - [Meta](ENVS.md#meta)
@@ -28,14 +28,15 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
   - [Misc](ENVS.md#misc)
 - [App features](ENVS.md#app-features)
   - [My account](ENVS.md#my-account)
+  - [Gas tracker](ENVS.md#gas-tracker)
+  - [Advanced filter](ENVS.md#advanced-filter)
   - [Address verification](ENVS.md#address-verification-in-my-account) in "My account"
   - [Blockchain interaction](ENVS.md#blockchain-interaction-writing-to-contract-etc) (writing to contract, etc.)
   - [Banner ads](ENVS.md#banner-ads)
   - [Text ads](ENVS.md#text-ads)
   - [Beacon chain](ENVS.md#beacon-chain)
-  - [User operations](ENVS.md#user-operations-feature-erc-4337)
-  - [Optimistic rollup (L2) chain](ENVS.md#optimistic-rollup-l2-chain)
-  - [ZkEvm rollup (L2) chain](NVS.md#zkevm-rollup-l2-chain)
+  - [User operations](ENVS.md#user-operations-erc-4337)
+  - [Rollup chain](ENVS.md#rollup-chain)
   - [Export data to CSV file](ENVS.md#export-data-to-csv-file)
   - [Google analytics](ENVS.md#google-analytics)
   - [Mixpanel analytics](ENVS.md#mixpanel-analytics)
@@ -49,54 +50,76 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
   - [Transaction interpretation](ENVS.md#transaction-interpretation)
   - [Verified tokens info](ENVS.md#verified-tokens-info)
   - [Name service integration](ENVS.md#name-service-integration)
+  - [Metadata service integration](ENVS.md#metadata-service-integration)
+  - [Public tag submission](ENVS.md#public-tag-submission)
+  - [Data availability](ENVS.md#data-availability)
   - [Bridged tokens](ENVS.md#bridged-tokens)
   - [Safe{Core} address tags](ENVS.md#safecore-address-tags)
+  - [Address profile API](ENVS.md#address-profile-api)
+  - [Address XStar XHS score](ENVS.md#address-xstar-xhs-score)
   - [SUAVE chain](ENVS.md#suave-chain)
+  - [MetaSuites extension](ENVS.md#metasuites-extension)
+  - [Validators list](ENVS.md#validators-list)
   - [Sentry error monitoring](ENVS.md#sentry-error-monitoring)
+  - [Rollbar error monitoring](ENVS.md#rollbar-error-monitoring)
   - [OpenTelemetry](ENVS.md#opentelemetry)
+  - [DeFi dropdown](ENVS.md#defi-dropdown)
+  - [Multichain balance button](ENVS.md#multichain-balance-button)
+  - [Get gas button](ENVS.md#get-gas-button)
+  - [Save on gas with GasHawk](ENVS.md#save-on-gas-with-gashawk)
+  - [Rewards service API](ENVS.md#rewards-service-api)
+  - [DEX pools](ENVS.md#dex-pools)
 - [3rd party services configuration](ENVS.md#external-services-configuration)
 
 &nbsp;
 
 ## App configuration
 
-| Variable | Type| Description | Compulsoriness | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_APP_PROTOCOL | `http \| https` | App url schema | - | `https` | `http` |
-| NEXT_PUBLIC_APP_HOST | `string` | App host | Required | - | `blockscout.com` |
-| NEXT_PUBLIC_APP_PORT | `number` | Port where app is running | - | `3000` | `3001` |
-| NEXT_PUBLIC_USE_NEXT_JS_PROXY | `boolean` | Tells the app to proxy all APIs request through the NextJS app. **We strongly advise not to use it in the production environment**, since it can lead to performance issues of the NodeJS server | - | `false` | `true` |
+| Variable | Type| Description | Compulsoriness | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_APP_PROTOCOL | `http \| https` | App url schema | - | `https` | `http` | v1.0.x+ |
+| NEXT_PUBLIC_APP_HOST | `string` | App host | Required | - | `blockscout.com` | v1.0.x+ |
+| NEXT_PUBLIC_APP_PORT | `number` | Port where app is running | - | `3000` | `3001` | v1.0.x+ |
+| NEXT_PUBLIC_APP_ENV | `string` | App env (e.g development, staging, production, etc.). | - | `production` | `staging` | v1.0.x+ |
+| NEXT_PUBLIC_APP_INSTANCE | `string` | Name of app instance. Used for app monitoring purposes. If not provided, it will be constructed from `NEXT_PUBLIC_APP_HOST` | - | - | `wonderful_kepler` | v1.0.x+ |
+| NEXT_PUBLIC_USE_NEXT_JS_PROXY | `boolean` | Tells the app to proxy all APIs request through the NextJS app. **We strongly advise not to use it in the production environment**, since it can lead to performance issues of the NodeJS server | - | `false` | `true` | v1.8.0+ |
 
 &nbsp;
 
 ## Blockchain parameters
 
-| Variable | Type| Description | Compulsoriness | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_NETWORK_NAME | `string` | Displayed name of the network | Required | - | `Gnosis Chain` |
-| NEXT_PUBLIC_NETWORK_SHORT_NAME | `string` | Used for SEO attributes (e.g, page description) | - | -  | `OoG` |
-| NEXT_PUBLIC_NETWORK_ID | `number` | Chain id, see [https://chainlist.org](https://chainlist.org) for the reference | Required | -  | `99` |
-| NEXT_PUBLIC_NETWORK_RPC_URL | `string` | Chain public RPC server url, see [https://chainlist.org](https://chainlist.org) for the reference | - | - | `https://core.poa.network` |
-| NEXT_PUBLIC_NETWORK_CURRENCY_NAME | `string` | Network currency name | - | - | `Ether` |
-| NEXT_PUBLIC_NETWORK_CURRENCY_WEI_NAME | `string` | Name of network currency subdenomination | - | `wei` | `duck` |
-| NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL | `string` | Network currency symbol | - | - | `ETH` |
-| NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS | `string` | Network currency decimals | - | `18` | `6` |
-| NEXT_PUBLIC_NETWORK_GOVERNANCE_TOKEN_SYMBOL | `string` | Network governance token symbol | - | - | `GNO` |
-| NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE | `validation` or `mining` | Verification type in the network | - | `mining` | `validation` |
-| NEXT_PUBLIC_IS_TESTNET | `boolean`| Set to true if network is testnet | - | `false` | `true` |
+*Note!* The `NEXT_PUBLIC_NETWORK_CURRENCY` variables represent the blockchain's native token used for paying transaction fees. `NEXT_PUBLIC_NETWORK_SECONDARY_COIN` variables refer to tokens like protocol-specific tokens (e.g., OP token on Optimism chain) or governance tokens (e.g., GNO on Gnosis chain).
+
+| Variable | Type| Description | Compulsoriness | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_NETWORK_NAME | `string` | Displayed name of the network | Required | - | `Gnosis Chain` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_SHORT_NAME | `string` | Used for SEO attributes (e.g, page description) | - | -  | `OoG` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_ID | `number` | Chain id, see [https://chainlist.org](https://chainlist.org) for the reference | Required | -  | `99` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_RPC_URL | `string` | Chain public RPC server url, see [https://chainlist.org](https://chainlist.org) for the reference | - | - | `https://core.poa.network` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_CURRENCY_NAME | `string` | Network currency name | - | - | `Ether` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_CURRENCY_WEI_NAME | `string` | Name of network currency subdenomination | - | `wei` | `duck` | v1.23.0+ |
+| NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL | `string` | Network currency symbol | - | - | `ETH` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS | `string` | Network currency decimals | - | `18` | `6` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL | `string` | Network secondary coin symbol.  | - | - | `GNO` | v1.29.0+ |
+| NEXT_PUBLIC_NETWORK_MULTIPLE_GAS_CURRENCIES | `boolean` | Set to `true` for networks where users can pay transaction fees in either the native coin or ERC-20 tokens.  | - | `false` | `true` | v1.33.0+ |
+| NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE | `validation` \| `mining` | Verification type in the network. Irrelevant for Arbitrum (verification type is always `posting`) and ZkEvm (verification type is always `sequencing`) L2s | - | `mining` | `validation` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_TOKEN_STANDARD_NAME | `string` | Name of the standard for creating tokens | - | `ERC` | `BEP` | v1.31.0+ |
+| NEXT_PUBLIC_IS_TESTNET | `boolean`| Set to true if network is testnet | - | `false` | `true` | v1.0.x+ |
 | NEXT_PUBLIC_NETWORK_CURRENCY_IMAGE_URL | `string` | Network currency image url | - | `` | `` |
 | NEXT_PUBLIC_IS_DEVNET | `boolean`| Set to true if network is devnet | - | `false` | `true` |
+| NEXT_PUBLIC_NETWORK_GOVERNANCE_TOKEN_SYMBOL | `string` | Network governance token symbol | - | - | `GNO` |
+
 &nbsp;
 
 ## API configuration
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_API_PROTOCOL | `http \| https` | Main API protocol | - | `https` | `http` |
-| NEXT_PUBLIC_API_HOST | `string` | Main API host | Required | - | `blockscout.com` |
-| NEXT_PUBLIC_API_PORT | `number` | Port where API is running on the host | - | - | `3001` |
-| NEXT_PUBLIC_API_BASE_PATH | `string` | Base path for Main API endpoint url | - | - | `/poa/core` |
-| NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL | `ws \| wss` | Main API websocket protocol | - | `wss` | `ws` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_API_PROTOCOL | `http \| https` | Main API protocol | - | `https` | `http` | v1.0.x+ |
+| NEXT_PUBLIC_API_HOST | `string` | Main API host | Required | - | `blockscout.com` | v1.0.x+ |
+| NEXT_PUBLIC_API_PORT | `number` | Port where API is running on the host | - | - | `3001` | v1.0.x+ |
+| NEXT_PUBLIC_API_BASE_PATH | `string` | Base path for Main API endpoint url | - | - | `/poa/core` | v1.0.x+ |
+| NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL | `ws \| wss` | Main API websocket protocol | - | `wss` | `ws` | v1.0.x+ |
 
 &nbsp;
 
@@ -104,30 +127,43 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
 
 ### Homepage
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_HOMEPAGE_CHARTS | `Array<'daily_txs' \| 'coin_price' \| 'market_cap' \| 'tvl'>` | List of charts displayed on the home page | - | - | `['daily_txs','coin_price','market_cap']` |
-| NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR | `string` | Text color of the hero plate on the homepage (escape "#" symbol if you use HEX color codes or use rgba-value instead) | - | `white` | `\#DCFE76` |
-| NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND | `string` | Background css value for hero plate on the homepage (escape "#" symbol if you use HEX color codes or use rgba-value instead) | - | `radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%), var(--chakra-colors-blue-400)` | `radial-gradient(at 15% 86%, hsla(350,65%,70%,1) 0px, transparent 50%)` \| `no-repeat bottom 20% right 0px/100% url(https://placekitten/1400/200)` |
-| NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER | `boolean` | Set to false if network doesn't have gas tracker | - | `true` | `false` |
-| NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME | `boolean` | Set to false if average block time is useless for the network | - | `true` | `false` |
-| NEXT_PUBLIC_HOMEPAGE_TX_ICON | `string` | Home Page Tx's Icoin | - | `` | `` |
-&nbsp;
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_HOMEPAGE_CHARTS | `Array<'daily_txs' \| 'coin_price'  \| 'secondary_coin_price' \| 'market_cap' \| 'tvl'>` | List of charts displayed on the home page | - | - | `['daily_txs','coin_price','market_cap']` | v1.0.x+ |
+| NEXT_PUBLIC_HOMEPAGE_STATS | `Array<'latest_batch' \| 'total_blocks'  \| 'average_block_time' \| 'total_txs' \| 'latest_l1_state_batch' \| 'wallet_addresses' \| 'gas_tracker' \| 'btc_locked' \| 'current_epoch'>` | List of stats widgets displayed on the home page | - | For zkSync, zkEvm and Arbitrum rollups: `['latest_batch','average_block_time','total_txs','wallet_addresses','gas_tracker']`, for other cases: `['total_blocks','average_block_time','total_txs','wallet_addresses','gas_tracker']` | `['total_blocks','total_txs','wallet_addresses']` | v1.35.x+ |
+| NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR | `string` | Text color of the hero plate on the homepage (escape "#" symbol if you use HEX color codes or use rgba-value instead). **DEPRECATED** _Use `NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG` instead_  | - | `white` | `\#DCFE76` | v1.0.x+ |
+| NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND | `string` | Background css value for hero plate on the homepage (escape "#" symbol if you use HEX color codes or use rgba-value instead). **DEPRECATED** _Use `NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG` instead_  | - | `radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%), var(--chakra-colors-blue-400)` | `radial-gradient(at 15% 86%, hsla(350,65%,70%,1) 0px, transparent 50%)` \| `no-repeat bottom 20% right 0px/100% url(https://placekitten/1400/200)` | v1.1.0+ |
+| NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG | `HeroBannerConfig`, see details [below](#hero-banner-configuration-properties) | Configuration of hero banner appearance. | - | - | See [below](#hero-banner-configuration-properties) | v1.35.0+ |
 
-### Sidebar
+#### Hero banner configuration properties
+
+_Note_ Here, all values are arrays of up to two strings. The first string represents the value for the light color mode, and the second string represents the value for the dark color mode. If the array contains only one string, it will be used for both color modes.
 
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_NETWORK_LOGO | `string` | Network logo; if not provided, placeholder will be shown; *Note* the logo height should be 24px and width less than 120px | - | - | `https://placekitten.com/240/40` |
-| NEXT_PUBLIC_NETWORK_LOGO_DARK | `string` | Network logo for dark color mode; if not provided, **inverted** regular logo will be used instead | - | - | `https://placekitten.com/240/40` |
-| NEXT_PUBLIC_NETWORK_ICON | `string` | Network icon; used as a replacement for regular network logo when nav bar is collapsed; if not provided, placeholder will be shown; *Note* the icon size should be at least 60px by 60px | - | - | `https://placekitten.com/60/60` |
-| NEXT_PUBLIC_NETWORK_ICON_DARK | `string` | Network icon for dark color mode; if not provided, **inverted** regular icon will be used instead | - | - | `https://placekitten.com/60/60` |
-| NEXT_PUBLIC_FEATURED_NETWORKS | `string` | URL of configuration file (`.json` format only) which contains list of featured networks that will be shown in the network menu. See [below](#featured-network-configuration-properties) list of available properties for particular network | - | - | `https://example.com/featured_networks_config.json` |
-| NEXT_PUBLIC_OTHER_LINKS | `Array<{url: string; text: string}>` | List of links for the "Other" navigation menu | - | - | `[{'url':'https://blockscout.com','text':'Blockscout'}]` |
-| NEXT_PUBLIC_NAVIGATION_HIDDEN_LINKS | `Array<LinkId>` | List of external links hidden in the navigation. Supported ids are `eth_rpc_api`, `rpc_api` | - | - | `['eth_rpc_api']` |
+| background | `[string, string]` | Banner background (could be a solid color, gradient or picture). The string should be a valid `background` CSS property value. | - | `['radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%), var(--chakra-colors-blue-400)']` | `['lightpink','no-repeat bottom 20% right 0px/100% url(https://placekitten/1400/200)']` |
+| text_color | `[string, string]` | Banner text background. The string should be a valid `color` CSS property value. | - | `['white']` | `['lightpink','#DCFE76']` |
+| border | `[string, string]` | Banner border. The string should be a valid `border` CSS property value. | - | - | `['1px solid yellow','4px dashed #DCFE76']` |
+| button | `Partial<Record<'_default' \| '_hover' \| '_selected', {'background'?: [string, string]; 'text_color?:[string, string]'}>>` | The button on the banner. It has three possible states: `_default`, `_hover`, and `_selected`. The `_selected` state reflects when the user is logged in or their wallet is connected to the app. | - | - | `{'_default':{'background':['deeppink'],'text_color':['white']}}` |
+
+&nbsp;
 
+### Navigation
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_NETWORK_LOGO | `string` | Network logo; if not provided, placeholder will be shown; *Note* the logo height should be 24px and width less than 120px | - | - | `https://placekitten.com/240/40` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_LOGO_DARK | `string` | Network logo for dark color mode; if not provided, **inverted** regular logo will be used instead | - | - | `https://placekitten.com/240/40` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_ICON | `string` | Network icon; used as a replacement for regular network logo when nav bar is collapsed; if not provided, placeholder will be shown; *Note* the icon size should be at least 60px by 60px | - | - | `https://placekitten.com/60/60` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_ICON_DARK | `string` | Network icon for dark color mode; if not provided, **inverted** regular icon will be used instead | - | - | `https://placekitten.com/60/60` | v1.0.x+ |
+| NEXT_PUBLIC_FEATURED_NETWORKS | `string` | URL of configuration file (`.json` format only) or file content string representation. It contains list of featured networks that will be shown in the network menu. See [below](#featured-network-configuration-properties) list of available properties for particular network | - | - | `https://example.com/featured_networks_config.json` \| `[{'title':'Astar(EVM)','url':'https://astar.blockscout.com/','group':'Mainnets','icon':'https://example.com/astar.svg'}]` | v1.0.x+ |
+| NEXT_PUBLIC_OTHER_LINKS | `Array<{url: string; text: string}>` | List of links for the "Other" navigation menu | - | - | `[{'url':'https://blockscout.com','text':'Blockscout'}]` | v1.0.x+ |
+| NEXT_PUBLIC_NAVIGATION_HIDDEN_LINKS | `Array<LinkId>` | List of external links hidden in the navigation. Supported ids are `eth_rpc_api`, `rpc_api` | - | - | `['eth_rpc_api']` | v1.16.0+ |
+| NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES | `Array<string>` | List of menu item routes that should have a lightning label | - | - | `['/accounts']` | v1.31.0+ |
+| NEXT_PUBLIC_NAVIGATION_LAYOUT | `vertical \| horizontal` | Navigation menu layout type | - | `vertical` | `horizontal` | v1.32.0+ |
 |NEXT_PUBLIC_HIDE_ENVS| `Array<strubg>` |hide menus| - | - | `['/validators', '/dhcs']` |
 
+
 #### Featured network configuration properties
 
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |
@@ -143,9 +179,9 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
 
 ### Footer
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_FOOTER_LINKS | `string` | URL of configuration file (`.json` format only) which contains list of link groups to be displayed in the footer. See [below](#footer-links-configuration-properties) list of available properties for particular group | - | - | `https://example.com/footer_links_config.json` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_FOOTER_LINKS | `string` | URL of configuration file (`.json` format only) or file content string representation. It contains list of link groups to be displayed in the footer. See [below](#footer-links-configuration-properties) list of available properties for particular group | - | - | `https://example.com/footer_links_config.json` \| `[{'title':'My chain','links':[{'text':'About','url':'https://example.com/about'},{'text':'Contacts','url':'https://example.com/contacts'}]}]` | v1.1.1+ |
 
 The app version shown in the footer is derived from build-time ENV variables `NEXT_PUBLIC_GIT_TAG` and `NEXT_PUBLIC_GIT_COMMIT_SHA` and cannot be overwritten at run-time.
 
@@ -160,24 +196,25 @@ The app version shown in the footer is derived from build-time ENV variables `NE
 
 ### Favicon
 
-By default, the app has generic favicon. You can override this behavior by providing the following variables. Hence, the favicon assets bundle will be generated at the container start time and will be used instead of default one.
+By default, the app has generic favicon. You can override this behavior by providing the following variable. Hence, the favicon assets bundle will be generated at the container start time and will be used instead of default one.
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| FAVICON_GENERATOR_API_KEY | `string` | RealFaviconGenerator [API key](https://realfavicongenerator.net/api/) | Required | - | `<your-secret>` |
-| FAVICON_MASTER_URL | `string` | - | - | `NEXT_PUBLIC_NETWORK_ICON` | `https://placekitten.com/180/180` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| FAVICON_MASTER_URL | `string` | - | - | `NEXT_PUBLIC_NETWORK_ICON` | `https://placekitten.com/180/180` | v1.11.0+ |
 
 &nbsp;
 
 ### Meta
 
-Settings for meta tags and OG tags
+Settings for meta tags, OG tags and SEO
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE | `boolean` | Set to `true` to promote Blockscout in meta and OG titles | - | `true` | `true` |
-| NEXT_PUBLIC_OG_DESCRIPTION | `string` | Custom OG description | - | - | `Blockscout is the #1 open-source blockchain explorer available today. 100+ chains and counting rely on Blockscout data availability, APIs, and ecosystem tools to support their networks.` |
-| NEXT_PUBLIC_OG_IMAGE_URL | `string` | OG image url. Minimum image size is 200 x 20 pixels (recommended: 1200 x 600); maximum supported file size is 8 MB; 2:1 aspect ratio; supported formats: image/jpeg, image/gif, image/png | - | `static/og_placeholder.png` | `https://placekitten.com/1200/600` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE | `boolean` | Set to `true` to promote Blockscout in meta and OG titles | - | `true` | `true` | v1.12.0+ |
+| NEXT_PUBLIC_OG_DESCRIPTION | `string` | Custom OG description | - | - | `Open-source block explorer by Blockscout. Search transactions, verify smart contracts, analyze addresses, and track network activity. Complete blockchain data and APIs for the %network_title% network.` | v1.12.0+ |
+| NEXT_PUBLIC_OG_IMAGE_URL | `string` | OG image url. Minimum image size is 200 x 20 pixels (recommended: 1200 x 600); maximum supported file size is 8 MB; 2:1 aspect ratio; supported formats: image/jpeg, image/gif, image/png | - | `static/og_placeholder.png` | `https://placekitten.com/1200/600` | v1.12.0+ |
+| NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED | `boolean` | Set to `true` to populate OG tags (title, description) with API data for social preview robot requests | - | `false` | `true` | v1.29.0+ |
+| NEXT_PUBLIC_SEO_ENHANCED_DATA_ENABLED | `boolean` | Set to `true` to pre-render page titles (e.g Token page) on the server side and inject page h1-tag to the markup before it is sent to the browser. | - | `false` | `true` | v1.30.0+ |
 
 &nbsp;
 
@@ -185,28 +222,35 @@ Settings for meta tags and OG tags
 
 #### Block views
 
-| Variable | Type | Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS | `Array<BlockFieldId>` | Array of the block fields ids that should be hidden. See below the list of the possible id values. | - | - | `'["burnt_fees","total_reward"]'` |
+| Variable | Type | Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS | `Array<BlockFieldId>` | Array of the block fields ids that should be hidden. See below the list of the possible id values. | - | - | `'["burnt_fees","total_reward"]'` | v1.10.0+ |
 
 
 ##### Block fields list
 | Id | Description |
 | --- | --- |
+| `base_fee` | Base fee |
 | `burnt_fees` | Burnt fees |
 | `total_reward` | Total block reward |
 | `nonce` | Block nonce |
 | `miner` | Address of block's miner or validator |
+| `L1_status` | Short interpretation of the batch lifecycle (applicable for Rollup chains) |
+| `batch` | Batch index (applicable for Rollup chains) |
 
 &nbsp;
 
 #### Address views
 
-| Variable | Type | Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE | `"github" \| "jazzicon" \| "gradient_avatar" \| "blockie"` | Style of address identicon appearance. Choose between [GitHub](https://github.blog/2013-08-14-identicons/), [Metamask Jazzicon](https://metamask.github.io/jazzicon/), [Gradient Avatar](https://github.com/varld/gradient-avatar) and [Ethereum Blocky](https://mycryptohq.github.io/ethereum-blockies-base64/) | - | `jazzicon` | `gradient_avatar` |
-| NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS | `Array<AddressViewId>` | Address views that should not be displayed. See below the list of the possible id values.  | - | - | `'["top_accounts"]'` |
-| NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED | `boolean` | Set to `true` if SolidityScan reports are supported | - | - | `true` |
+| Variable | Type | Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE | `"github" \| "jazzicon" \| "gradient_avatar" \| "blockie" \| "nouns"` | Default style of address identicon appearance. Choose between [GitHub](https://github.blog/2013-08-14-identicons/), [Metamask Jazzicon](https://metamask.github.io/jazzicon/), [Gradient Avatar](https://github.com/varld/gradient-avatar), [Ethereum Blocky](https://mycryptohq.github.io/ethereum-blockies-base64/) and [Nouns](https://nouns.wtf) | - | `jazzicon` | `gradient_avatar` | v1.12.0+ |
+| NEXT_PUBLIC_VIEWS_ADDRESS_FORMAT | `Array<"base16" \| "bech32">` | Displayed address format, could be either `base16` standard or [`bech32`](https://github.com/bitcoin/bips/blob/master/bip-0173.mediawiki#bech32) standard. If the array contains multiple values, the address format toggle will appear in the UI, allowing the user to switch between formats. The first item in the array will be the default format. | - | `'["base16"]'` | `'["bech32", "base16"]'` | v1.36.0+ |
+| NEXT_PUBLIC_VIEWS_ADDRESS_BECH_32_PREFIX | `string` | Human-readable prefix of `bech32` address format. | Required, if `NEXT_PUBLIC_VIEWS_ADDRESS_FORMAT` contains "bech32" value | - | `duck` | v1.36.0+ |
+| NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS | `Array<AddressViewId>` | Address views that should not be displayed. See below the list of the possible id values.  | - | - | `'["top_accounts"]'` | v1.15.0+ |
+| NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED | `boolean` | Set to `true` if SolidityScan reports are supported | - | - | `true` | v1.19.0+ |
+| NEXT_PUBLIC_VIEWS_CONTRACT_EXTRA_VERIFICATION_METHODS | `Array<'solidity-hardhat' \| 'solidity-foundry'>` | Pass an array of additional methods from which users can choose while verifying a smart contract. Both methods are available by default, pass `'none'` string to disable them all. | - | - | `['solidity-hardhat']` | v1.33.0+ |
+| NEXT_PUBLIC_VIEWS_CONTRACT_LANGUAGE_FILTERS | `Array<'solidity' \| 'vyper' \| 'yul' \| 'scilla'>` | Pass an array of contract languages that will be displayed as options in the filter on the verified contract page. | - | `['solidity','vyper','yul']` | `['solidity','vyper','yul','scilla']` | v1.37.0+ |
 
 ##### Address views list
 | Id | Description |
@@ -217,10 +261,10 @@ Settings for meta tags and OG tags
 
 #### Transaction views
 
-| Variable | Type | Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS | `Array<TxFieldsId>` | Array of the transaction fields ids that should be hidden. See below the list of the possible id values. | - | - | `'["value","tx_fee"]'` |
-| NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS | `Array<TxAdditionalFieldsId>` | Array of the additional fields ids that should be added to the transaction details. See below the list of the possible id values. | - | - | `'["fee_per_gas"]'` |
+| Variable | Type | Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS | `Array<TxFieldsId>` | Array of the transaction fields ids that should be hidden. See below the list of the possible id values. | - | - | `'["value","tx_fee"]'` | v1.15.0+ |
+| NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS | `Array<TxAdditionalFieldsId>` | Array of the additional fields ids that should be added to the transaction details. See below the list of the possible id values. | - | - | `'["fee_per_gas"]'` | v1.15.0+ |
 
 ##### Transaction fields list
 | Id | Description |
@@ -231,6 +275,8 @@ Settings for meta tags and OG tags
 | `tx_fee` | Total transaction fee |
 | `gas_fees` | Gas fees breakdown |
 | `burnt_fees` | Amount of native coin burnt for transaction |
+| `L1_status` | Short interpretation of the batch lifecycle (applicable for Rollup chains) |
+| `batch` | Batch index (applicable for Rollup chains) |
 
 ##### Transaction additional fields list
 | Id | Description |
@@ -241,10 +287,10 @@ Settings for meta tags and OG tags
 
 #### NFT views
 
-| Variable | Type | Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES | `Array<NftMarketplace>` where `NftMarketplace` can have following [properties](#nft-marketplace-properties) | Used to build up links to NFT collections and NFT instances in external marketplaces. | - | - | `[{'name':'OpenSea','collection_url':'https://opensea.io/assets/ethereum/{hash}','instance_url':'https://opensea.io/assets/ethereum/{hash}/{id}','logo_url':'https://opensea.io/static/images/logos/opensea-logo.svg'}]` |
-
+| Variable | Type | Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES | `Array<NftMarketplace>` where `NftMarketplace` can have following [properties](#nft-marketplace-properties) | Used to build up links to NFT collections and NFT instances in external marketplaces. | - | - | `[{'name':'OpenSea','collection_url':'https://opensea.io/assets/ethereum/{hash}','instance_url':'https://opensea.io/assets/ethereum/{hash}/{id}','logo_url':'https://opensea.io/static/images/logos/opensea-logo.svg'}]` | v1.15.0+ |
+| NEXT_PUBLIC_HELIA_VERIFIED_FETCH_ENABLED | `boolean` | Indicates that the [Helia verified fetch](https://github.com/ipfs/helia-verified-fetch/tree/main/packages/verified-fetch) should be used for retrieving content of NFT assets (currently limited to images) directly from IPFS network using trustless gateways. | - | `true` | `false` | v1.37.0+ |
 
 ##### NFT marketplace properties
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |
@@ -260,18 +306,24 @@ Settings for meta tags and OG tags
 
 ### Misc
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| 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_CONTRACT_CODE_IDES | `Array<ContractCodeIde>` where `ContractCodeIde` can have following [properties](#contract-code-ide-configuration-properties) | Used to build up links to IDEs with contract source code. | - | - | `[{'title':'Remix IDE','url':'https://remix.blockscout.com/?address={hash}&blockscout={domain}','icon_url':'https://example.com/icon.svg'}]` |
-| NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS | `boolean` | Set to `true` to hide indexing alert in the page header about indexing chain's blocks | - | `false` | `true` |
-| NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS | `boolean` | Set to `true` to hide indexing alert in the page footer about indexing block's internal transactions | - | `false` | `true` |
-| NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE | `string` | Used for displaying custom announcements or alerts in the header of the site. Could be a regular string or a HTML code. | - | - | `Hello world! 🤪` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| 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'}}]` | v1.0.x+ |
+| NEXT_PUBLIC_CONTRACT_CODE_IDES | `Array<ContractCodeIde>` where `ContractCodeIde` can have following [properties](#contract-code-ide-configuration-properties) | Used to build up links to IDEs with contract source code. | - | - | `[{'title':'Remix IDE','url':'https://remix.blockscout.com/?address={hash}&blockscout={domain}','icon_url':'https://example.com/icon.svg'}]` | v1.23.0+ |
+| NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS | `boolean` | Set to `true` to enable Submit Audit form on the contract page | - | `false` | `true` | v1.25.0+ |
+| NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS | `boolean` | Set to `true` to hide indexing alert in the page header about indexing chain's blocks | - | `false` | `true` | v1.17.0+ |
+| NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS | `boolean` | Set to `true` to hide indexing alert in the page footer about indexing block's internal transactions | - | `false` | `true` | v1.17.0+ |
+| NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE | `string` | Used for displaying custom announcements or alerts in the header of the site. Could be a regular string or a HTML code. | - | - | `Hello world! 🤪` | v1.13.0+ |
+| NEXT_PUBLIC_COLOR_THEME_DEFAULT | `'light' \| 'dim' \| 'midnight' \| 'dark'` | Preferred color theme of the app | - | - | `midnight` | v1.30.0+ |
+| NEXT_PUBLIC_FONT_FAMILY_HEADING | `FontFamily`, see full description [below](#font-family-configuration-properties) | Special typeface to use in page headings (`<h1>`, `<h2>`, etc.) | - | - | `{'name':'Montserrat','url':'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap'}` | v1.35.0+ |
+| NEXT_PUBLIC_FONT_FAMILY_BODY | `FontFamily`, see full description [below](#font-family-configuration-properties) | Main typeface to use in page content elements. | - | - | `{'name':'Raleway','url':'https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap'}` | v1.35.0+ |
+| NEXT_PUBLIC_MAX_CONTENT_WIDTH_ENABLED | `boolean` | Set to `true` to restrict the page content width on extra-large screens. | - | `true` | `false` | v1.34.1+ |
 
 #### Network explorer configuration properties
 
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
+| logo | `string` | URL to explorer logo file. Should be at least 40x40. | - | - | `'https://foo.app/icon.png'` |
 | title | `string` | Displayed name of the explorer | Required | - | `Anyblock` |
 | baseUrl | `string` | Base url of the explorer | Required | - | `https://explorer.anyblock.tools` |
 | paths | `Record<'tx' \| 'block' \| 'address' \| 'token', string>` | Map of explorer entities and their paths | Required | - | `{'tx':'/ethereum/poa/core/tx'}` |
@@ -286,6 +338,13 @@ Settings for meta tags and OG tags
 | url | `string` | URL of the IDE with placeholders for contract hash (`{hash}`) and current domain (`{domain}`) | Required | - | `https://remix.blockscout.com/?address={hash}&blockscout={domain}` |
 | icon_url | `string` | URL of the IDE icon | Required | - | `https://example.com/icon.svg` |
 
+#### Font family configuration properties
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value |
+| --- | --- | --- | --- | --- | --- |
+| name | `string` | Font family name; used to define the `font-family` CSS property. | Required | - | `Montserrat` |
+| url | `string` | URL for external font. Ensure the font supports the following weights: 400, 500, 600, and 700. | Required | - | `https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap` |
+
 &nbsp;
 
 ## App features
@@ -294,12 +353,34 @@ Settings for meta tags and OG tags
 
 ### My account
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED | `boolean` | Set to true if network has account feature | Required | - | `true` |
-| NEXT_PUBLIC_AUTH0_CLIENT_ID | `string` | Client id for [Auth0](https://auth0.com/) provider | Required | - | `<your-secret>` |
-| NEXT_PUBLIC_AUTH_URL | `string` | Account auth base url; it is used for building login URL (`${ NEXT_PUBLIC_AUTH_URL }/auth/auth0`) and logout return URL (`${ NEXT_PUBLIC_AUTH_URL }/auth/logout`); if not provided the base app URL will be used instead | Required | - | `https://blockscout.com` |
-| NEXT_PUBLIC_LOGOUT_URL | `string` | Account logout url. Required if account is supported for the app instance. | Required | - | `https://blockscoutcom.us.auth0.com/v2/logout` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED | `boolean` | Set to true if network has account feature | Required | - | `true` | v1.0.x+ |
+| NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY | `boolean` | See [below](ENVS.md#google-recaptcha) | Required | - | `<your-secret>` | v1.0.x+ |
+| NEXT_PUBLIC_AUTH0_CLIENT_ID | `string` | **DEPRECATED** Client id for [Auth0](https://auth0.com/) provider | - | - | `<your-secret>` | v1.0.x+ |
+| NEXT_PUBLIC_AUTH_URL | `string` | **DEPRECATED** Account auth base url; it is used for building login URL (`${ NEXT_PUBLIC_AUTH_URL }/auth/auth0`) and logout return URL (`${ NEXT_PUBLIC_AUTH_URL }/auth/logout`); if not provided the base app URL will be used instead | - | - | `https://blockscout.com` | v1.0.x+ |
+| NEXT_PUBLIC_LOGOUT_URL | `string` | **DEPRECATED** Account logout url. Required if account is supported for the app instance. | - | - | `https://blockscoutcom.us.auth0.com/v2/logout` | v1.0.x+ |
+
+&nbsp;
+
+### Gas tracker
+
+This feature is **enabled by default**. To switch it off pass `NEXT_PUBLIC_GAS_TRACKER_ENABLED=false`.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_GAS_TRACKER_ENABLED | `boolean` | Set to true to enable "Gas tracker" in the app | Required | `true` | `false` | v1.25.0+ |
+| NEXT_PUBLIC_GAS_TRACKER_UNITS | Array<`usd` \| `gwei`> | Array of units for displaying gas prices on the Gas Tracker page, in the stats snippet on the Home page, and in the top bar. The first value in the array will take priority over the second one in all mentioned views. If only one value is provided, gas prices will be displayed only in that unit. | - | `[ 'usd', 'gwei' ]` | `[ 'gwei' ]` | v1.25.0+ |
+
+&nbsp;
+
+### Advanced filter
+
+This feature is **enabled by default**. To switch it off pass `NEXT_PUBLIC_ADVANCED_FILTER_ENABLED=false`.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_ADVANCED_FILTER_ENABLED | `boolean` | Set to true to enable "Advanced filter" page in the app | Required | `true` | `false` | v1.37.0+ |
 
 &nbsp;
 
@@ -307,36 +388,38 @@ Settings for meta tags and OG tags
 
 *Note* all ENV variables required for [My account](ENVS.md#my-account) feature should be passed alongside the following ones:
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_CONTRACT_INFO_API_HOST | `string` | Contract Info API endpoint url | Required | - | `https://contracts-info.services.blockscout.com` |
-| NEXT_PUBLIC_ADMIN_SERVICE_API_HOST | `string` | Admin Service API endpoint url | Required | - | `https://admin-rs.services.blockscout.com` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_CONTRACT_INFO_API_HOST | `string` | Contract Info API endpoint url | Required | - | `https://contracts-info.services.blockscout.com` | v1.1.0+ |
+| NEXT_PUBLIC_ADMIN_SERVICE_API_HOST | `string` | Admin Service API endpoint url | Required | - | `https://admin-rs.services.blockscout.com` | v1.1.0+ |
 
 &nbsp;
 
 ### Blockchain interaction (writing to contract, etc.)
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID | `string` | Project id for [WalletConnect](https://docs.walletconnect.com/2.0/web3modal/react/installation#obtain-project-id) integration | Required | - | `<your-secret>` |
-| NEXT_PUBLIC_NETWORK_RPC_URL | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | - | `https://core.poa.network` |
-| NEXT_PUBLIC_NETWORK_NAME | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | - | `Gnosis Chain` |
-| NEXT_PUBLIC_NETWORK_ID | `number` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | -  | `99` |
-| NEXT_PUBLIC_NETWORK_CURRENCY_NAME | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | - | `Ether` |
-| NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | - | `ETH` |
-| NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | - | `18` | `6` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID | `string` | Project id for [WalletConnect](https://cloud.walletconnect.com/) integration | Required | - | `<your-secret>` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_RPC_URL | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | - | `https://core.poa.network` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_NAME | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | - | `Gnosis Chain` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_ID | `number` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | -  | `99` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_CURRENCY_NAME | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | - | `Ether` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | - | `ETH` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | - | `18` | `6` | v1.0.x+ |
 
 &nbsp;
 
 ### Banner ads
 
 This feature is **enabled by default** with the `slise` ads provider. To switch it off pass `NEXT_PUBLIC_AD_BANNER_PROVIDER=none`.
+*Note* that the `getit` ad provider is temporary disabled.
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_AD_BANNER_PROVIDER | `slise` \| `adbutler` \| `coinzilla` \| `none` | Ads provider  | - | `slise` | `coinzilla` |
-| NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP | `{ id: string; width: string; height: string }` | Placement config for desktop Adbutler banner | - | - | `{'id':'123456','width':'728','height':'90'}` |
-| NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE | `{ id: string; width: number; height: number }` | Placement config for mobile Adbutler banner | - | - | `{'id':'654321','width':'300','height':'100'}` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_AD_BANNER_PROVIDER | `slise` \| `adbutler` \| `coinzilla` \|  `hype` \| `getit` \| `none` | Ads provider  | - | `slise` | `coinzilla` | v1.0.x+ |
+| NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER | `adbutler` | Additional ads provider to mix with the main one | - | - | `adbutler` | v1.28.0+ |
+| NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP | `{ id: string; width: string; height: string }` | Placement config for desktop Adbutler banner | - | - | `{'id':'123456','width':'728','height':'90'}` | v1.3.0+ |
+| NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE | `{ id: string; width: number; height: number }` | Placement config for mobile Adbutler banner | - | - | `{'id':'654321','width':'300','height':'100'}` | v1.3.0+ |
 
 &nbsp;
 
@@ -344,117 +427,125 @@ This feature is **enabled by default** with the `slise` ads provider. To switch
 
 This feature is **enabled by default** with the `coinzilla` ads provider. To switch it off pass `NEXT_PUBLIC_AD_TEXT_PROVIDER=none`.
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_AD_TEXT_PROVIDER | `coinzilla` \| `none` | Ads provider | - | `coinzilla` | `none` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_AD_TEXT_PROVIDER | `coinzilla` \| `none` | Ads provider | - | `coinzilla` | `none` | v1.0.x+ |
 
 &nbsp;
 
 ### Beacon chain
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_HAS_BEACON_CHAIN | `boolean` | Set to true for networks with the beacon chain | Required | - | `true` |
-| NEXT_PUBLIC_BEACON_CHAIN_CURRENCY_SYMBOL | `string` | Beacon network currency symbol | - | `NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL` | `ETH` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_HAS_BEACON_CHAIN | `boolean` | Set to true for networks with the beacon chain | Required | - | `true` | v1.0.x+ |
+| NEXT_PUBLIC_BEACON_CHAIN_CURRENCY_SYMBOL | `string` | Beacon network currency symbol | - | `NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL` | `ETH` | v1.0.x+ |
 
 &nbsp;
 
-### User operations feature (ERC-4337)
+### User operations (ERC-4337)
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_HAS_USER_OPS | `boolean` | Set to true to show user operations related data and pages | - | - | `true` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_HAS_USER_OPS | `boolean` | Set to true to show user operations related data and pages | - | - | `true` | v1.23.0+ |
 
 &nbsp;
 
-### Optimistic rollup (L2) chain
-
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK | `boolean` | Set to true for optimistic L2 solutions | Required | - | `true` |
-| NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL | `string` | URL for optimistic L2 -> L1 withdrawals | Required | - | `https://app.optimism.io/bridge/withdraw` |
-| NEXT_PUBLIC_L1_BASE_URL | `string` | Blockscout base URL for L1 network | Required | - | `'http://eth-goerli.blockscout.com'` |
-
-&nbsp;
-
-### ZkEvm rollup (L2) chain
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK | `boolean` | Set to true for zkevm L2 solutions  | Required | - | `true` |
-| NEXT_PUBLIC_L1_BASE_URL | `string` | Blockscout base URL for L1 network | Required | - | `'http://eth-goerli.blockscout.com'` |
+### Rollup chain
 
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_ROLLUP_TYPE | `'optimistic' \| 'arbitrum' \| 'shibarium' \| 'zkEvm' \| 'zkSync' \| 'scroll'` | Rollup chain type | Required | - | `'optimistic'` | v1.24.0+ |
+| NEXT_PUBLIC_ROLLUP_L1_BASE_URL | `string` | Blockscout base URL for L1 network | Required | - | `'http://eth-goerli.blockscout.com'` | v1.24.0+ |
+| NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL | `string` | URL for L2 -> L1 withdrawals (Optimistic stack only) | Required for `optimistic` rollups | - | `https://app.optimism.io/bridge/withdraw` | v1.24.0+ |
+| NEXT_PUBLIC_FAULT_PROOF_ENABLED | `boolean` | Set to `true` for chains with fault proof system enabled (Optimistic stack only) | - | - | `true` | v1.31.0+ |
+| NEXT_PUBLIC_HAS_MUD_FRAMEWORK | `boolean` | Set to `true` for instances that use MUD framework (Optimistic stack only) | - | - | `true` | v1.33.0+ |
+| NEXT_PUBLIC_ROLLUP_HOMEPAGE_SHOW_LATEST_BLOCKS | `boolean` | Set to `true` to display "Latest blocks" widget instead of "Latest batches" on the home page | - | - | `true` | v1.36.0+ |
+| NEXT_PUBLIC_ROLLUP_OUTPUT_ROOTS_ENABLED | `boolean` | Enables "Output roots" page (Optimistic stack only)  | - | `true` | `false` | v1.37.0+ |
+| NEXT_PUBLIC_ROLLUP_PARENT_CHAIN_NAME | `string` | Set to customize L1 transaction status labels in the UI (e.g., "Sent to <chain-name>"). This setting is applicable only for Arbitrum-based chains.  | - | - | `DuckChain` | v1.37.0+ |
 
 &nbsp;
 
 ### Export data to CSV file
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY | `string` | See [below](ENVS.md#google-recaptcha) | true | - | `<your-secret>` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY | `string` | See [below](ENVS.md#google-recaptcha) | true | - | `<your-secret>` | v1.0.x+ |
 
 &nbsp;
 
 ### Google analytics
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID | `string` | Property ID for [Google Analytics](https://analytics.google.com/) service | true | - | `UA-XXXXXX-X` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID | `string` | Property ID for [Google Analytics](https://analytics.google.com/) service | true | - | `UA-XXXXXX-X` | v1.0.x+ |
 
 &nbsp;
 
 ### Mixpanel analytics
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN | `string` | Project token for [Mixpanel](https://mixpanel.com/) analytics service | true | - | `<your-secret>` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN | `string` | Project token for [Mixpanel](https://mixpanel.com/) analytics service | true | - | `<your-secret>` | v1.1.0+ |
 
 &nbsp;
 
 ### GrowthBook feature flagging and A/B testing
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY | `string` | Client SDK key for [GrowthBook](https://www.growthbook.io/) service | true | - | `<your-secret>` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY | `string` | Client SDK key for [GrowthBook](https://www.growthbook.io/) service | true | - | `<your-secret>` | v1.22.0+ |
 
 &nbsp;
 
 ### GraphQL API documentation
 
-This feature is **always enabled**, but you can configure its behavior by passing the following variables.
+This feature is **always enabled**, but you can disable it by passing `none` value to `NEXT_PUBLIC_GRAPHIQL_TRANSACTION` variable.
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_GRAPHIQL_TRANSACTION | `string` | Txn hash for default query at GraphQl playground page | - | - | `0x4a0ed8ddf751a7cb5297f827699117b0f6d21a0b2907594d300dc9fed75c7e62` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_GRAPHIQL_TRANSACTION | `string` | Txn hash for default query at GraphQl playground page. Pass `none` to disable the feature. | - | - | `0x4a0ed8ddf751a7cb5297f827699117b0f6d21a0b2907594d300dc9fed75c7e62` | v1.0.x+ |
 
 &nbsp;
 
 ### REST API documentation
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_API_SPEC_URL | `string` | Spec to be displayed on `/api-docs` page | Required | `https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml` | `https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml` |
+This feature is **always enabled**, but you can disable it by passing `none` value to `NEXT_PUBLIC_API_SPEC_URL` variable.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_API_SPEC_URL | `string` | Spec to be displayed on `/api-docs` page. Pass `none` to disable the feature. | - | `https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml` | `https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml` | v1.0.x+ |
 
 &nbsp;
 
 ### Marketplace
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_MARKETPLACE_CONFIG_URL | `string` | URL of configuration file (`.json` format only) which contains list of apps that will be shown on the marketplace page. See [below](#marketplace-app-configuration-properties) list of available properties for an app | Required | - | `https://example.com/marketplace_config.json` |
-| NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM | `string` | Link to form where authors can submit their dapps to the marketplace | Required | - | `https://airtable.com/shrqUAcjgGJ4jU88C` |
-| NEXT_PUBLIC_NETWORK_RPC_URL | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | - | `https://core.poa.network` |
-| NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL | `string` | URL of configuration file (`.json` format only) which contains the list of categories to be displayed on the markeplace page in the specified order. If no URL is provided, then the list of categories will be compiled based on the `categories` fields from the marketplace (apps) configuration file | - | - | `https://example.com/marketplace_categories.json` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_MARKETPLACE_ENABLED | `boolean` | `true` means that the marketplace page will be enabled | Required | - | `true` | v1.24.1+ |
+| NEXT_PUBLIC_MARKETPLACE_CONFIG_URL | `string` | URL of configuration file (`.json` format only) which contains list of apps that will be shown on the marketplace page. See [below](#marketplace-app-configuration-properties) list of available properties for an app. Can be replaced with NEXT_PUBLIC_ADMIN_SERVICE_API_HOST | Required | - | `https://example.com/marketplace_config.json` | v1.0.x+ |
+| NEXT_PUBLIC_ADMIN_SERVICE_API_HOST | `string` | Admin Service API endpoint url. Can be used instead of NEXT_PUBLIC_MARKETPLACE_CONFIG_URL | - | - | `https://admin-rs.services.blockscout.com` | v1.1.0+ |
+| NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM | `string` | Link to form where authors can submit their dapps to the marketplace | Required | - | `https://airtable.com/shrqUAcjgGJ4jU88C` | v1.0.x+ |
+| NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM | `string` | Link to form where users can suggest ideas for the marketplace | - | - | `https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form` | v1.24.0+ |
+| NEXT_PUBLIC_NETWORK_RPC_URL | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | - | `https://core.poa.network` | v1.0.x+ |
+| NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL | `string` | URL of configuration file (`.json` format only) which contains the list of categories to be displayed on the marketplace page in the specified order. If no URL is provided, then the list of categories will be compiled based on the `categories` fields from the marketplace (apps) configuration file | - | - | `https://example.com/marketplace_categories.json` | v1.23.0+ |
+| NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL | `string` | URL of configuration file (`.json` format only) which contains app security reports for displaying security scores on the Marketplace page | - | - | `https://example.com/marketplace_security_reports.json` | v1.28.0+ |
+| NEXT_PUBLIC_MARKETPLACE_FEATURED_APP | `string` | ID of the featured application to be displayed on the banner on the Marketplace page | - | - | `uniswap` | v1.29.0+ |
+| NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL | `string` | URL of the banner HTML content | - | - | `https://example.com/banner` | v1.29.0+ |
+| NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL | `string` | URL of the page the banner leads to | - | - | `https://example.com` | v1.29.0+ |
+| NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY | `string` | Airtable API key | - | - | - | v1.33.0+ |
+| NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID | `string` | Airtable base ID with dapp ratings | - | - | - | v1.33.0+ |
+| NEXT_PUBLIC_MARKETPLACE_GRAPH_LINKS_URL | `string` | URL of the file (`.json` format only) which contains the list of The Graph links to be displayed on the Marketplace page | - | - | `https://example.com/graph_links.json` | v1.36.0+ |
 
 #### Marketplace app configuration properties
 
-| Property | Type | Description | Compulsoriness | Example value
+| Property | Type | Description | Compulsoriness | Example value |
 | --- | --- | --- | --- | --- |
 | id | `string` | Used as slug for the app. Must be unique in the app list. | Required | `'app'` |
 | external | `boolean` | `true` means that the application opens in a new window, but not in an iframe. | - | `true` |
 | title | `string` | Displayed title of the app. | Required | `'The App'` |
 | logo | `string` | URL to logo file. Should be at least 288x288. | Required | `'https://foo.app/icon.png'` |
 | shortDescription | `string` | Displayed only in the app list. | Required | `'Awesome app'` |
-| categories | `Array<MarketplaceCategoryId>` | Displayed category. Select one of the following below. | Required | `['security', 'tools']` |
+| categories | `Array<string>` | Displayed category. | Required | `['Security', 'Tools']` |
 | author | `string` | Displayed author of the app | Required | `'Bob'` |
 | url | `string` | URL of the app which will be launched in the iframe. | Required | `'https://foo.app/launch'` |
 | description | `string` | Displayed only in the modal dialog with additional info about the app. | Required | `'The best app'` |
@@ -465,36 +556,23 @@ This feature is **always enabled**, but you can configure its behavior by passin
 | internalWallet | `boolean` | `true` means that the application can automatically connect to the Blockscout wallet. | - | `true` |
 | priority | `number` | The higher the priority, the higher the app will appear in the list on the Marketplace page. | - | `7` |
 
-#### Marketplace categories ids
-
-For each application, you need to specify the `MarketplaceCategoryId` to which it belongs. Select one of the following:
-
-- `defi`
-- `exchanges`
-- `finance`
-- `games`
-- `marketplaces`
-- `nft`
-- `security`
-- `social`
-- `tools`
-- `yieldFarming`
-
 &nbsp;
 
 ### Solidity to UML diagrams
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_VISUALIZE_API_HOST | `string` | Visualize API endpoint url | Required | - | `https://visualizer.services.blockscout.com` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_VISUALIZE_API_HOST | `string` | Visualize API endpoint url | Required | - | `https://visualizer.services.blockscout.com` | v1.0.x+ |
+| NEXT_PUBLIC_VISUALIZE_API_BASE_PATH | `string` | Base path for Visualize API endpoint url | - | - | `/poa/core` | v1.29.0+ |
 
 &nbsp;
 
 ### Blockchain statistics
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_STATS_API_HOST | `string` | API endpoint url | Required | - | `https://stats.services.blockscout.com` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_STATS_API_HOST | `string` | Stats API endpoint url | Required | - | `https://stats.services.blockscout.com` | v1.0.x+ |
+| NEXT_PUBLIC_STATS_API_BASE_PATH | `string` | Base path for Stats API endpoint url | - | - | `/poa/core` | v1.29.0+ |
 
 &nbsp;
 
@@ -502,26 +580,26 @@ For each application, you need to specify the `MarketplaceCategoryId` to which i
 
 This feature is **enabled by default** with the `['metamask']` value. To switch it off pass `NEXT_PUBLIC_WEB3_WALLETS=none`.
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_WEB3_WALLETS | `Array<'metamask' \| 'coinbase' \| 'token_pocket'>` | Array of Web3 wallets which will be used  to add tokens or chain to. The first wallet which is enabled in user's browser will be shown. | - | `[ 'metamask' ]` | `[ 'coinbase' ]` |
-| NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET | `boolean`| Set to `true` to hide icon "Add to your wallet" next to token addresses | - | - | `true` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_WEB3_WALLETS | `Array<'metamask' \| 'coinbase' \| 'token_pocket'>` | Array of Web3 wallets which will be used  to add tokens or chain to. The first wallet which is enabled in user's browser will be shown. | - | `[ 'metamask' ]` | `[ 'coinbase' ]` | v1.10.0+ |
+| NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET | `boolean`| Set to `true` to hide icon "Add to your wallet" next to token addresses | - | - | `true` | v1.0.x+ |
 
 &nbsp;
 
 ### Transaction interpretation
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER | `blockscout` \| `none` | Transaction interpretation provider that displays human readable transaction description | - | `none` | `blockscout` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER | `blockscout` \| `noves` \| `none` | Transaction interpretation provider that displays human readable transaction description | - | `none` | `blockscout` | v1.21.0+ |
 
 &nbsp;
 
 ### Verified tokens info
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_CONTRACT_INFO_API_HOST | `string` | Contract Info API endpoint url | Required | - | `https://contracts-info.services.blockscout.com` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_CONTRACT_INFO_API_HOST | `string` | Contract Info API endpoint url | Required | - | `https://contracts-info.services.blockscout.com` | v1.0.x+ |
 
 &nbsp;
 
@@ -529,9 +607,41 @@ This feature is **enabled by default** with the `['metamask']` value. To switch
 
 This feature allows resolving blockchain addresses using human-readable domain names.
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_NAME_SERVICE_API_HOST | `string` | Name Service API endpoint url | Required | - | `https://bens.services.blockscout.com` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_NAME_SERVICE_API_HOST | `string` | Name Service API endpoint url | Required | - | `https://bens.services.blockscout.com` | v1.22.0+ |
+
+&nbsp;
+
+### Metadata service integration
+
+This feature allows name tags and other public tags for addresses.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_METADATA_SERVICE_API_HOST | `string` | Metadata Service API endpoint url | Required | - | `https://metadata.services.blockscout.com` | v1.30.0+ |
+
+&nbsp;
+
+### Public tag submission
+
+This feature allows you to submit an application with a public address tag.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_METADATA_SERVICE_API_HOST | `string` | Metadata Service API endpoint url | Required | - | `https://metadata.services.blockscout.com` | v1.30.0+ |
+| NEXT_PUBLIC_ADMIN_SERVICE_API_HOST | `string` | Admin Service API endpoint url | Required | - | `https://admin-rs.services.blockscout.com` | v1.1.0+ |
+| NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY | `string` | See [below](ENVS.md#google-recaptcha) | true | - | `<your-secret>` | v1.0.x+ |
+
+&nbsp;
+
+### Data Availability
+
+This feature enables views related to blob transactions (EIP-4844), such as the Blob Txns tab on the Transactions page and the Blob details page.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED | `boolean` | Set to true to enable blob transactions views. | Required | - | `true` | v1.28.0+ |
 
 &nbsp;
 
@@ -539,10 +649,10 @@ This feature allows resolving blockchain addresses using human-readable domain n
 
 This feature allows users to view tokens that have been bridged from other EVM chains. Additional tab "Bridged" will be added to the tokens page and the link to original token will be displayed on the token page.
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_BRIDGED_TOKENS_CHAINS | `Array<BridgedTokenChain>` where `BridgedTokenChain` can have following [properties](#bridged-token-chain-configuration-properties) | Used for displaying filter by the chain from which token where bridged. Also, used for creating links to original tokens in other explorers. | Required | - | `[{'id':'1','title':'Ethereum','short_title':'ETH','base_url':'https://eth.blockscout.com/token'}]` |
-| NEXT_PUBLIC_BRIDGED_TOKENS_BRIDGES | `Array<TokenBridge>` where `TokenBridge` can have following [properties](#token-bridge-configuration-properties) | Used for displaying text about bridges types on the tokens page. | Required | - | `[{'type':'omni','title':'OmniBridge','short_title':'OMNI'}]` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_BRIDGED_TOKENS_CHAINS | `Array<BridgedTokenChain>` where `BridgedTokenChain` can have following [properties](#bridged-token-chain-configuration-properties) | Used for displaying filter by the chain from which token where bridged. Also, used for creating links to original tokens in other explorers. | Required | - | `[{'id':'1','title':'Ethereum','short_title':'ETH','base_url':'https://eth.blockscout.com/token'}]` | v1.14.0+ |
+| NEXT_PUBLIC_BRIDGED_TOKENS_BRIDGES | `Array<TokenBridge>` where `TokenBridge` can have following [properties](#token-bridge-configuration-properties) | Used for displaying text about bridges types on the tokens page. | Required | - | `[{'type':'omni','title':'OmniBridge','short_title':'OMNI'}]` | v1.14.0+ |
 
 #### Bridged token chain configuration properties
 
@@ -567,55 +677,217 @@ This feature allows users to view tokens that have been bridged from other EVM c
 
 ### Safe{Core} address tags
 
-For the smart contract addresses which are [Safe{Core} accounts](https://safe.global/) public tag "Multisig: Safe" will be displayed in the address page header alongside to Safe logo. The Safe service is available only for certain networks, see full list [here](https://docs.safe.global/safe-core-api/available-services). Based on provided value of `NEXT_PUBLIC_NETWORK_ID`, the feature will be enabled or disabled.
+For the smart contract addresses which are [Safe{Core} accounts](https://safe.global/) public tag "Multisig: Safe" will be displayed in the address page header alongside to Safe logo.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_SAFE_TX_SERVICE_URL | `string` | The Safe transaction service URL. See full list of supported networks [here](https://docs.safe.global/api-supported-networks). | - | - | `uniswap` | v1.26.0+ |
 
 &nbsp;
 
-### SUAVE chain
+### Address profile API
 
-For blockchains that implement SUAVE architecture additional fields will be shown on the transaction page ("Allowed peekers", "Kettle"). Users also will be able to see the list of all transactions for a particular Kettle in the separate view.
+This feature allows the integration of an external API to fetch user info for addresses or contracts. When configured, if the API returns a username, a public tag with a custom link will be displayed in the address page header.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_ADDRESS_USERNAME_TAG | `{api_url: string; tag_link_template: string; tag_icon: string; tag_bg_color: string; tag_text_color: string}` | Address profile API tag configuration properties. See [below](#user-profile-api-configuration-properties). | - | - | `uniswap` | v1.35.0+ |
+
+&nbsp;
+
+#### Address profile API configuration properties
 
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_IS_SUAVE_CHAIN | `boolean` | Set to true for blockchains with [SUAVE architecture](https://writings.flashbots.net/mevm-suave-centauri-and-beyond) | Required | - | `true` |
+| api_url_template | `string` | User profile API URL. Should be a template with `{address}` variable | Required | - | `https://example-api.com/{address}` |
+| tag_link_template | `string` | External link to the profile. Should be a template with `{username}` variable | - | - | `https://example.com/{address}` |
+| tag_icon | `string` | Public tag icon (.svg) url | - | - | `https://example.com/icon.svg` |
+| tag_bg_color | `string` | Public tag background color (escape "#" symbol if you use HEX color codes or use rgba-value instead) | - | - | `\#000000` |
+| tag_text_color | `string` | Public tag text color (escape "#" symbol if you use HEX color codes or use rgba-value instead) | - | - | `\#FFFFFF` |
+
+&nbsp;
+
+### Address XStar XHS score
+
+This feature allows the integration of an XStar API to fetch XHS score for addresses. When configured, if the API returns a score, a public tag with that score will be displayed in the address page header.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_XSTAR_SCORE_URL | `string` | XStar XHS score documentation URL for the address tag. Enables the XStar score feature. | - | - | `https://docs.xname.app/the-solution-adaptive-proof-of-humanity-on-blockchain/xhs-scoring-algorithm` | v1.36.0+ |
+
+&nbsp;
+
+### SUAVE chain
+
+For blockchains that implement SUAVE architecture additional fields will be shown on the transaction page ("Allowed peekers", "Kettle"). Users also will be able to see the list of all transactions for a particular Kettle in the separate view.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_IS_SUAVE_CHAIN | `boolean` | Set to true for blockchains with [SUAVE architecture](https://writings.flashbots.net/mevm-suave-centauri-and-beyond) | Required | - | `true` | v1.14.0+ |
+
+&nbsp;
+
+### Celo chain
+
+For blockchains that use the Celo platform. _Note_, that once the Celo mainnet becomes an L2 chain, these variables will be migrated to the Rollup configuration section.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_CELO_ENABLED | `boolean` | Indicates that it is a Celo-based chain. | - | - | `true` | v1.37.0+ |
+| NEXT_PUBLIC_CELO_L2_UPGRADE_BLOCK | `number` | Indicates the block number when the Celo-type chain transitioned to L2. This is used to display links to the Epoch block page from a regular block page. | - | - | `26369280` | v1.37.0+ |
+
+&nbsp;
+
+### MetaSuites extension
+
+Enables [MetaSuites browser extension](https://github.com/blocksecteam/metasuites) to integrate with the app views.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_METASUITES_ENABLED | `boolean` | Set to true to enable integration | Required | - | `true` | v1.26.0+ |
+
+&nbsp;
+
+### Validators list
+
+The feature enables the Validators page which provides detailed information about the validators of the PoS chains.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE | `'stability' \| 'blackfort'` | Chain type | Required | - | `'stability'` | v1.25.0+ |
 
 &nbsp;
 
 ### Sentry error monitoring
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_SENTRY_DSN | `string` | Client key for your Sentry.io app | Required | - | `<your-secret>` |
-| SENTRY_CSP_REPORT_URI | `string` | URL for sending CSP-reports to your Sentry.io app | - | - | `<your-secret>` |
-| NEXT_PUBLIC_SENTRY_ENABLE_TRACING | `boolean` | Enables tracing and performance monitoring in Sentry.io | - | `false` | `true` |
-| NEXT_PUBLIC_APP_ENV | `string` | App env (e.g development, review or production). Passed as `environment` property to Sentry config | - | `production` | `production` |
-| NEXT_PUBLIC_APP_INSTANCE | `string` | Name of app instance. Used as custom tag `app_instance` value in the main Sentry scope. If not provided, it will be constructed from `NEXT_PUBLIC_APP_HOST` | - | - | `wonderful_kepler` |
+_Note_ This feature is **deprecated**. All ENV variables will be removed in the future releases.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_SENTRY_DSN | `string` | Client key for your Sentry.io app | Required | - | `<your-secret>` | v1.0.x+ |
+| SENTRY_CSP_REPORT_URI | `string` | URL for sending CSP-reports to your Sentry.io app | - | - | `<your-secret>` | v1.0.x+ |
+| NEXT_PUBLIC_SENTRY_ENABLE_TRACING | `boolean` | Enables tracing and performance monitoring in Sentry.io | - | `false` | `true` | v1.17.0+ |
+
+&nbsp;
+
+### Rollbar error monitoring
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN | `string` | Client token for your Rollbar project | Required | - | `<your-secret>` | v1.37.x+ |
 
 &nbsp;
 
 ### OpenTelemetry
 
-OpenTelemetry SDK for Node.js app could be enabled by passing `OTEL_SDK_ENABLED=true` variable. Configure the OpenTelemetry Protocol Exporter by using the generic environment variables described in the [OT docs](https://opentelemetry.io/docs/specs/otel/protocol/exporter/#configuration-options).
+OpenTelemetry SDK for Node.js app could be enabled by passing `OTEL_SDK_ENABLED=true` variable. Configure the OpenTelemetry Protocol Exporter by using the generic environment variables described in the [OT docs](https://opentelemetry.io/docs/specs/otel/protocol/exporter/#configuration-options). Note that this Next.js feature is currently experimental. The Docker image should be built with the `NEXT_OPEN_TELEMETRY_ENABLED=true` argument to enable it.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| OTEL_SDK_ENABLED | `boolean` | Run-time flag to enable the feature | Required | `false` | `true` | v1.18.0+ |
+
+&nbsp;
+
+### DeFi dropdown
+
+If the feature is enabled, a single button or a dropdown (if more than 1 item is provided) will be displayed at the top of the explorer page, which will take a user to the specified application in the marketplace or to an external site.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS | `[{ text: string; icon: string; dappId?: string, url?: string }]` | An array of dropdown items containing the button text, icon name and dappId in DAppscout or an external url | - | - | `[{'text':'Swap','icon':'swap','dappId':'uniswap'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'}]` | v1.31.0+ |
+
+&nbsp;
+
+### Multichain balance button
+
+If the feature is enabled, a Multichain balance button will be displayed on the address page, which will take you to the portfolio application in the marketplace or to an external site.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG | `[{ name: string; url_template: string; dapp_id?: string; logo: string }]` | Multichain portfolio application config See [below](#multichain-button-configuration-properties) | - | - | `[{ name: 'zerion', url_template: 'https://app.zerion.io/{address}/overview', logo: 'https://example.com/icon.svg'}]` | v1.31.0+ |
+
+&nbsp;
+
+#### Multichain button configuration properties
 
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
-| OTEL_SDK_ENABLED | `boolean` | Flag to enable the feature | Required | `false` | `true` |
+| name | `string` | Multichain portfolio application name | Required | - | `zerion` |
+| url_template | `string` | Url template to the portfolio. Should be a template with `{address}` variable | Required | - | `https://app.zerion.io/{address}/overview` |
+| dapp_id | `string` | Set for open a Blockscout dapp page with the portfolio instead of opening external app page | - | - | `zerion` |
+| logo | `string` | Multichain portfolio application logo (.svg) url | - | - | `https://example.com/icon.svg` |
 
 &nbsp;
 
-## External services configuration
+### Get gas button
 
-### Google ReCaptcha
+If the feature is enabled, a Get gas button will be displayed in the top bar, which will take you to the gas refuel application in the marketplace or to an external site.
 
-For obtaining the variables values please refer to [reCAPTCHA documentation](https://developers.google.com/recaptcha).
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_GAS_REFUEL_PROVIDER_CONFIG | `{ name: string; url_template: string; dapp_id?: string; logo?: string }` | Get gas button config. See [below](#get-gas-button-configuration-properties) | - | - | `{ name: 'Need gas?', dapp_id: 'smol-refuel', url_template: 'https://smolrefuel.com/?outboundChain={chainId}', logo: 'https://example.com/icon.png' }` | v1.33.0+ |
+
+&nbsp;
+
+#### Get gas button configuration properties
 
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY | `string` | Site key | - | - | `<your-secret>` |
+| name | `string` | Text on the button | Required | - | `Need gas?` |
+| url_template | `string` | Url template, may contain `{chainId}` variable | Required | - | `https://smolrefuel.com/?outboundChain={chainId}` |
+| dapp_id | `string` | Set for open a Blockscout dapp page instead of opening external app page | - | - | `smol-refuel` |
+| logo | `string` | Gas refuel application logo url | - | - | `https://example.com/icon.png` |
 
+&nbsp;
+
+### Save on gas with GasHawk
+
+The feature enables a "Save with GasHawk" button next to the "Gas used" value on the address page.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_SAVE_ON_GAS_ENABLED | `boolean` | Set to "true" to enable the feature | - | - | `true` | v1.35.0+ |
+
+&nbsp;
+
+### Rewards service API
+
+This feature enables Blockscout Merits program. It requires that the [My account](ENVS.md#my-account) and [Blockchain interaction](ENVS.md#blockchain-interaction-writing-to-contract-etc) features are also enabled.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_REWARDS_SERVICE_API_HOST | `string` | API URL | - | - | `https://example.com` | v1.36.0+ |
+
+&nbsp;
+
+### DEX pools
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_DEX_POOLS_ENABLED | `boolean` | Set to true to enable the feature | Required | - | `true` | v1.37.0+ |
+| NEXT_PUBLIC_CONTRACT_INFO_API_HOST | `string` | Contract Info API endpoint url | Required | - | `https://contracts-info.services.blockscout.com` | v1.0.x+ |
+
+&nbsp;
+
+### Badge claim link
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_GAME_BADGE_CLAIM_LINK | `string` | Provide to enable the easter egg badge feature | - | - | `https://example.com` | v1.37.0+ |
 
 &nbsp;
 
+## External services configuration
+
+### Google ReCaptcha
+
+For obtaining the variables values please refer to [reCAPTCHA documentation](https://developers.google.com/recaptcha).
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_RE_CAPTCHA_V3_APP_SITE_KEY | `string` | **DEPRECATED** Google reCAPTCHA v3 site key | - | - | `<your-secret>` | v1.36.0+ |
+| NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY | `string` | Google reCAPTCHA v2 site key | - | - | `<your-secret>` | v1.0.x+ |
+
 ## Bool data configuration
 
 ### Node And Provider Pages
@@ -623,4 +895,4 @@ For obtaining the variables values please refer to [reCAPTCHA documentation](htt
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
 | NEXT_PUBLIC_BOOL_SCAN_API | `string` | The api of bool scan backend| - | - | - |
-| NEXT_PUBLIC_BOOL_SCAN_RPC | `string` | The rpc of bool chain | - | - | - |
+| NEXT_PUBLIC_BOOL_SCAN_RPC | `string` | The rpc of bool chain | - | - | - |
\ No newline at end of file
diff --git a/docs/PULL_REQUEST_TEMPLATE.md b/docs/PULL_REQUEST_TEMPLATE.md
index a57bb9602c..d4378762bf 100644
--- a/docs/PULL_REQUEST_TEMPLATE.md
+++ b/docs/PULL_REQUEST_TEMPLATE.md
@@ -15,4 +15,7 @@
 - [ ] I have tested these changes locally.
 - [ ] I added tests to cover any new functionality, following this [guide](./CONTRIBUTING.md#writing--running-tests)
 - [ ] Whenever I fix a bug, I include a regression test to ensure that the bug does not reappear silently.
-- [ ] If I have added, changed, renamed, or removed an environment variable, I have updated the list of environment variables in the [documentation](ENVS.md) and  made the necessary changes to the validator script according to the [guide](./CONTRIBUTING.md#adding-new-env-variable)
+- [ ] If I have added, changed, renamed, or removed an environment variable
+    - I updated the list of environment variables in the [documentation](ENVS.md) 
+    - I made the necessary changes to the validator script according to the [guide](./CONTRIBUTING.md#adding-new-env-variable)
+    - I added "ENVs" label to this pull request
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000000..9f7ae682b6
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,442 @@
+import { includeIgnoreFile } from '@eslint/compat';
+import jsPlugin from '@eslint/js';
+import nextJsPlugin from '@next/eslint-plugin-next';
+import stylisticPlugin from '@stylistic/eslint-plugin';
+import reactQueryPlugin from '@tanstack/eslint-plugin-query';
+import importPlugin from 'eslint-plugin-import';
+import importHelpersPlugin from 'eslint-plugin-import-helpers';
+import jestPlugin from 'eslint-plugin-jest';
+import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
+import noCyrillicStringPlugin from 'eslint-plugin-no-cyrillic-string';
+import playwrightPlugin from 'eslint-plugin-playwright';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import * as regexpPlugin from 'eslint-plugin-regexp';
+import globals from 'globals';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import tseslint from 'typescript-eslint';
+
+const RESTRICTED_MODULES = {
+  paths: [
+    { name: 'dayjs', message: 'Please use lib/date/dayjs.ts instead of directly importing dayjs' },
+    { name: '@chakra-ui/icons', message: 'Using @chakra-ui/icons is prohibited. Please use regular svg-icon instead (see examples in "icons/" folder)' },
+    { name: '@metamask/providers', message: 'Please lazy-load @metamask/providers or use useProvider hook instead' },
+    { name: '@metamask/post-message-stream', message: 'Please lazy-load @metamask/post-message-stream or use useProvider hook instead' },
+    { name: 'playwright/TestApp', message: 'Please use render() fixture from test() function of playwright/lib module' },
+    {
+      name: '@chakra-ui/react',
+      importNames: [ 'Popover', 'Menu', 'PinInput', 'useToast' ],
+      message: 'Please use corresponding component or hook from ui/shared/chakra component instead',
+    },
+    {
+      name: 'lodash',
+      message: 'Please use `import [package] from \'lodash/[package]\'` instead.',
+    },
+  ],
+  patterns: [
+    'icons/*',
+    '!lodash/*',
+  ],
+};
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const gitignorePath = path.resolve(__dirname, '.gitignore');
+
+/** @type {import('eslint').Linter.Config[]} */
+export default tseslint.config(
+  includeIgnoreFile(gitignorePath),
+
+  { files: [ '**/*.{js,mjs,cjs,ts,jsx,tsx}', '**/*.pw.tsx' ] },
+
+  { ignores: [
+    'deploy/tools/',
+    'public/',
+    'theme/dist/',
+    '.git/',
+    'theme/webpack.config.js',
+    'next.config.js',
+  ] },
+
+  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
+
+  { settings: { react: { version: 'detect' } } },
+
+  jsPlugin.configs.recommended,
+
+  {
+    plugins: {
+      '@typescript-eslint': tseslint.plugin,
+      jest: jestPlugin,
+    },
+    languageOptions: {
+      parser: tseslint.parser,
+      parserOptions: {
+        projectService: true,
+      },
+      globals: jestPlugin.environments.globals.globals,
+    },
+    rules: {
+      '@typescript-eslint/array-type': [ 'error', {
+        'default': 'generic',
+        readonly: 'generic',
+      } ],
+      '@typescript-eslint/consistent-type-imports': [ 'error' ],
+      '@typescript-eslint/naming-convention': [ 'error',
+        {
+          selector: 'default',
+          format: [ 'camelCase' ],
+          leadingUnderscore: 'allow',
+          trailingUnderscore: 'forbid',
+        },
+        {
+          selector: 'import',
+          leadingUnderscore: 'allow',
+          format: [ 'camelCase', 'PascalCase' ],
+        },
+        {
+          selector: 'class',
+          format: [ 'PascalCase' ],
+        },
+        {
+          selector: 'enum',
+          format: [ 'PascalCase', 'UPPER_CASE' ],
+        },
+        {
+          selector: 'enumMember',
+          format: [ 'camelCase', 'PascalCase', 'UPPER_CASE' ],
+        },
+        {
+          selector: 'function',
+          format: [ 'camelCase', 'PascalCase' ],
+        },
+        {
+          selector: 'interface',
+          format: [ 'PascalCase' ],
+        },
+        {
+          selector: 'method',
+          format: [ 'camelCase', 'snake_case', 'UPPER_CASE' ],
+          leadingUnderscore: 'allow',
+        },
+        {
+          selector: 'parameter',
+          format: [ 'camelCase', 'PascalCase' ],
+          leadingUnderscore: 'allow',
+        },
+        {
+          selector: 'property',
+          format: null,
+        },
+        {
+          selector: 'typeAlias',
+          format: [ 'PascalCase' ],
+        },
+        {
+          selector: 'typeLike',
+          format: [ 'PascalCase' ],
+        },
+        {
+          selector: 'typeParameter',
+          format: [ 'PascalCase', 'UPPER_CASE' ],
+        },
+        {
+          selector: 'variable',
+          format: [ 'camelCase', 'PascalCase', 'UPPER_CASE' ],
+          leadingUnderscore: 'allow',
+        },
+      ],
+      '@typescript-eslint/no-empty-function': [ 'off' ],
+      '@typescript-eslint/no-unused-vars': [ 'error', { caughtErrors: 'none', ignoreRestSiblings: true } ],
+      '@typescript-eslint/no-use-before-define': 'off',
+      '@typescript-eslint/no-useless-constructor': [ 'error' ],
+      '@typescript-eslint/no-explicit-any': [ 'error', { ignoreRestArgs: true } ],
+      '@typescript-eslint/no-unused-expressions': [ 'error', {
+        allowShortCircuit: true,
+        allowTernary: true,
+      } ],
+    },
+  },
+  {
+    // disable type-aware linting on JS files
+    files: [ '**/*.{js,mjs}' ],
+    ...tseslint.configs.disableTypeChecked,
+  },
+
+  {
+    plugins: {
+      react: reactPlugin,
+    },
+    rules: {
+      'react/jsx-key': 'error',
+      'react/jsx-no-bind': [ 'error', {
+        ignoreRefs: true,
+      } ],
+      'react/jsx-curly-brace-presence': [ 'error', {
+        props: 'never',
+        children: 'never',
+      } ],
+      'react/jsx-curly-spacing': [ 'error', {
+        when: 'always',
+        children: true,
+        spacing: {
+          objectLiterals: 'never',
+        },
+      } ],
+      'react/jsx-equals-spacing': [ 'error', 'never' ],
+      'react/jsx-fragments': [ 'error', 'syntax' ],
+      'react/jsx-no-duplicate-props': 'error',
+      'react/jsx-no-target-blank': 'off',
+      'react/jsx-no-useless-fragment': 'error',
+      'react/jsx-tag-spacing': [ 'error', {
+        afterOpening: 'never',
+        beforeSelfClosing: 'never',
+        closingSlash: 'never',
+      } ],
+      'react/jsx-wrap-multilines': [ 'error', {
+        declaration: 'parens-new-line',
+        assignment: 'parens-new-line',
+        'return': 'parens-new-line',
+        arrow: 'parens-new-line',
+        condition: 'parens-new-line',
+        logical: 'parens-new-line',
+        prop: 'parens-new-line',
+      } ],
+      'react/no-access-state-in-setstate': 'error',
+      'react/no-deprecated': 'error',
+      'react/no-direct-mutation-state': 'error',
+      'react/no-find-dom-node': 'off',
+      'react/no-redundant-should-component-update': 'error',
+      'react/no-render-return-value': 'error',
+      'react/no-string-refs': 'off',
+      'react/no-unknown-property': 'error',
+      'react/no-unused-state': 'error',
+      'react/require-optimization': [ 'error' ],
+      'react/void-dom-elements-no-children': 'error',
+    },
+  },
+
+  {
+    plugins: {
+      '@next/next': nextJsPlugin,
+    },
+    rules: {
+      ...nextJsPlugin.configs.recommended.rules,
+      ...nextJsPlugin.configs['core-web-vitals'].rules,
+    },
+  },
+
+  {
+    plugins: { '@tanstack/query': reactQueryPlugin },
+  },
+
+  {
+    ...playwrightPlugin.configs['flat/recommended'],
+    files: [ '**/*.pw.tsx' ],
+    rules: {
+      ...playwrightPlugin.configs['flat/recommended'].rules,
+      'playwright/no-standalone-expect': 'off', // this rules does not work correctly with extended test functions
+    },
+  },
+
+  {
+    plugins: { 'react-hooks': reactHooksPlugin },
+    ignores: [ '**/*.pw.tsx', 'playwright/**' ],
+    rules: {
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'error',
+    },
+  },
+
+  {
+    files: [ '**/*.test.{ts,js,jsx,tsx}' ],
+    plugins: { jest: jestPlugin },
+    languageOptions: {
+      globals: jestPlugin.environments.globals.globals,
+    },
+  },
+
+  regexpPlugin.configs['flat/recommended'],
+
+  {
+    plugins: {
+      'import': importPlugin,
+    },
+    rules: {
+      'import/no-duplicates': 'error',
+    },
+  },
+
+  {
+    plugins: {
+      'import-helpers': importHelpersPlugin,
+    },
+    rules: {
+      'import-helpers/order-imports': [
+        'error',
+        {
+          newlinesBetween: 'always',
+          groups: [
+            'module',
+            '/types/',
+            [ '/^nextjs/' ],
+            [
+              '/^configs/',
+              '/^data/',
+              '/^deploy/',
+              '/^icons/',
+              '/^jest/',
+              '/^lib/',
+              '/^mocks/',
+              '/^pages/',
+              '/^playwright/',
+              '/^stubs/',
+              '/^theme/',
+              '/^ui/',
+            ],
+            [ 'parent', 'sibling', 'index' ],
+          ],
+          alphabetize: { order: 'asc', ignoreCase: true },
+        },
+      ],
+    },
+  },
+
+  {
+    plugins: {
+      'no-cyrillic-string': noCyrillicStringPlugin,
+    },
+    rules: {
+      'no-cyrillic-string/no-cyrillic-string': 'error',
+    },
+  },
+
+  {
+    plugins: {
+      'jsx-a11y': jsxA11yPlugin,
+    },
+    languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } },
+  },
+
+  {
+    plugins: {
+      '@stylistic': stylisticPlugin,
+    },
+    rules: {
+      // replacement for @typescript-eslint
+      '@stylistic/indent': [ 'error', 2 ],
+      '@stylistic/brace-style': [ 'error', '1tbs' ],
+      '@stylistic/member-delimiter-style': [ 'error' ],
+      '@stylistic/type-annotation-spacing': 'error',
+
+      // replacement for eslint
+      '@stylistic/array-bracket-spacing': [ 'error', 'always' ],
+      '@stylistic/arrow-spacing': [ 'error', { before: true, after: true } ],
+      '@stylistic/comma-dangle': [ 'error', 'always-multiline' ],
+      '@stylistic/comma-spacing': [ 'error' ],
+      '@stylistic/comma-style': [ 'error', 'last' ],
+      '@stylistic/curly-newline': [ 'error', { multiline: true, minElements: 1 } ],
+      '@stylistic/eol-last': 'error',
+      '@stylistic/jsx-quotes': [ 'error', 'prefer-double' ],
+      '@stylistic/key-spacing': [ 'error', {
+        beforeColon: false,
+        afterColon: true,
+      } ],
+      '@stylistic/keyword-spacing': 'error',
+      '@stylistic/linebreak-style': [ 'error', 'unix' ],
+      '@stylistic/lines-around-comment': [ 'error', {
+        beforeBlockComment: true,
+        allowBlockStart: true,
+      } ],
+      '@stylistic/no-mixed-operators': [ 'error', {
+        groups: [
+          [ '&&', '||' ],
+        ],
+      } ],
+      '@stylistic/no-mixed-spaces-and-tabs': 'error',
+      '@stylistic/no-multiple-empty-lines': [ 'error', {
+        max: 1,
+        maxEOF: 0,
+        maxBOF: 0,
+      } ],
+      '@stylistic/no-multi-spaces': 'error',
+      '@stylistic/no-trailing-spaces': 'error',
+      '@stylistic/object-curly-spacing': [ 'error', 'always' ],
+      '@stylistic/operator-linebreak': [ 'error', 'after' ],
+      '@stylistic/quote-props': [ 'error', 'as-needed', {
+        keywords: true,
+        numbers: true,
+      } ],
+      '@stylistic/quotes': [ 'error', 'single', {
+        allowTemplateLiterals: true,
+      } ],
+      '@stylistic/semi': [ 'error', 'always' ],
+      '@stylistic/space-before-function-paren': [ 'error', 'never' ],
+      '@stylistic/space-before-blocks': [ 'error', 'always' ],
+      '@stylistic/space-in-parens': [ 'error', 'never' ],
+      '@stylistic/space-infix-ops': 'error',
+      '@stylistic/space-unary-ops': 'off',
+      '@stylistic/template-curly-spacing': [ 'error', 'always' ],
+      '@stylistic/wrap-iife': [ 'error', 'inside' ],
+    },
+  },
+
+  {
+    rules: {
+      // disabled in favor of @typescript-eslint and @stylistic
+      'no-use-before-define': 'off',
+      'no-useless-constructor': 'off',
+      'no-unused-vars': 'off',
+      'no-empty': [ 'error', { allowEmptyCatch: true } ],
+      'no-unused-expressions': 'off',
+
+      // this is checked by typescript compiler
+      'no-redeclare': 'off',
+
+      // rules customizations
+      eqeqeq: [ 'error', 'allow-null' ],
+      'id-match': [ 'error', '^[\\w$]+$' ],
+      'max-len': [ 'error', 160, 4 ],
+      'no-console': 'error',
+      'no-implicit-coercion': [ 'error', {
+        number: true,
+        'boolean': true,
+        string: true,
+      } ],
+      'no-nested-ternary': 'error',
+      'no-multi-str': 'error',
+      'no-spaced-func': 'error',
+      'no-with': 'error',
+      'object-shorthand': 'off',
+      'one-var': [ 'error', 'never' ],
+      'prefer-const': 'error',
+
+      // restricted imports and properties
+      'no-restricted-imports': [ 'error', RESTRICTED_MODULES ],
+      'no-restricted-properties': [ 2, {
+        object: 'process',
+        property: 'env',
+        // FIXME: restrict the rule only NEXT_PUBLIC variables
+        message: 'Please use configs/app/index.ts to import any NEXT_PUBLIC environment variables. For other properties please disable this rule for a while.',
+      } ],
+    },
+  },
+  {
+    files: [
+      'pages/**',
+      'nextjs/**',
+      'playwright/**',
+      'deploy/tools/**',
+      'middleware.ts',
+      'instrumentation*.ts',
+      '*.config.ts',
+      '*.config.js',
+    ],
+    rules: {
+      // for configs allow to consume env variables from process.env directly
+      'no-restricted-properties': 'off',
+    },
+  },
+);
diff --git a/global.d.ts b/global.d.ts
index 2955f3f872..94cfa4677d 100644
--- a/global.d.ts
+++ b/global.d.ts
@@ -1,14 +1,14 @@
-import type { WindowProvider } from 'wagmi';
+import type { WalletProvider } from 'types/web3';
 
 type CPreferences = {
   zone: string;
   width: string;
   height: string;
-}
+};
 
 declare global {
   export interface Window {
-    ethereum?: WindowProvider;
+    ethereum?: WalletProvider | undefined;
     coinzilla_display: Array<CPreferences>;
     ga?: {
       getAll: () => Array<{ get: (prop: string) => string }>;
@@ -27,3 +27,5 @@ declare global {
     }
   }
 }
+
+export {};
diff --git a/icons/API_slim.svg b/icons/API_slim.svg
new file mode 100644
index 0000000000..f4b36f08ba
--- /dev/null
+++ b/icons/API_slim.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.3 3.7a1.7 1.7 0 0 1 3.4 0v.903a1 1 0 1 0 2 0V3.7a3.7 3.7 0 0 0-7.4 0v6.272a1 1 0 0 0 2 0V3.7Zm5.4 6.302a1 1 0 0 0-2 0V16.3a1.7 1.7 0 0 1-3.4 0v-.914a1 1 0 1 0-2 0v.914a3.7 3.7 0 1 0 7.4 0v-6.298ZM3.692 8.3C2.76 8.3 2 9.059 2 10c0 .94.76 1.7 1.693 1.7H10a1 1 0 1 1 0 2H3.693A3.696 3.696 0 0 1 0 10c0-2.04 1.65-3.7 3.693-3.7h.902a1 1 0 0 1 0 2h-.902ZM10 6.3a1 1 0 0 0 0 2h6.294C17.238 8.3 18 9.064 18 10c0 .937-.761 1.7-1.705 1.7h-.865a1 1 0 1 0 0 2h.865A3.702 3.702 0 0 0 20 10c0-2.046-1.66-3.7-3.705-3.7H10Z" fill="currentColor"/>
+</svg>
diff --git a/icons/MUD.svg b/icons/MUD.svg
new file mode 100644
index 0000000000..8ab1229a71
--- /dev/null
+++ b/icons/MUD.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+  <path fill="currentColor" d="M3.933 17.138a3.98 3.98 0 0 1-1.03-.136 4.001 4.001 0 0 1-2.771-4.866L1.796 5.82a3.958 3.958 0 0 1 1.85-2.45 3.88 3.88 0 0 1 2.966-.386A3.944 3.944 0 0 1 9.07 4.992h1.857a3.922 3.922 0 0 1 2.458-2.008 3.88 3.88 0 0 1 2.965.386 3.977 3.977 0 0 1 1.85 2.436l1.665 6.33a4 4 0 0 1-2.779 4.88 3.879 3.879 0 0 1-2.965-.386 3.959 3.959 0 0 1-1.85-2.436l-.13-.629H7.856l-.164.615a3.958 3.958 0 0 1-1.85 2.436 3.9 3.9 0 0 1-1.908.522ZM5.59 4.278a2.494 2.494 0 0 0-1.229.328A2.572 2.572 0 0 0 3.175 6.17l-1.664 6.316a2.572 2.572 0 0 0 1.771 3.137 2.45 2.45 0 0 0 1.872-.243 2.53 2.53 0 0 0 1.186-1.565l.443-1.679h6.43l.436 1.68a2.558 2.558 0 0 0 1.187 1.564 2.47 2.47 0 0 0 1.879.243 2.558 2.558 0 0 0 1.764-3.137L16.814 6.17a2.535 2.535 0 0 0-1.178-1.564 2.472 2.472 0 0 0-1.88-.243 2.536 2.536 0 0 0-1.693 1.586l-.171.472H8.105l-.171-.472a2.544 2.544 0 0 0-1.7-1.586 2.486 2.486 0 0 0-.644-.086Z"/>
+  <path fill="currentColor" d="M5.712 9.993a1.429 1.429 0 1 1 0-2.858 1.429 1.429 0 0 1 0 2.858Zm8.573-2.143a.714.714 0 1 0 0-1.43.714.714 0 0 0 0 1.43Zm0 2.857a.714.714 0 1 0 0-1.429.714.714 0 0 0 0 1.43Zm-1.428-1.429a.714.714 0 1 0 0-1.428.714.714 0 0 0 0 1.428Zm2.857 0a.714.714 0 1 0 0-1.428.714.714 0 0 0 0 1.428Z"/>
+</svg>
diff --git a/icons/MUD_menu.svg b/icons/MUD_menu.svg
new file mode 100644
index 0000000000..c30c571c47
--- /dev/null
+++ b/icons/MUD_menu.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30">
+  <path fill="currentColor" d="M6.485 23.997a4.23 4.23 0 0 0 1.234.183 4.31 4.31 0 0 0 2.29-.7c.545-.353 1.022-.824 1.403-1.386s.66-1.202.817-1.884l.197-.825h5.144l.155.844c.157.682.435 1.323.816 1.885s.859 1.032 1.404 1.385a4.334 4.334 0 0 0 1.733.658 4.18 4.18 0 0 0 1.825-.14c1.214-.384 2.244-1.285 2.868-2.51a5.933 5.933 0 0 0 .467-4.04l-1.997-8.496c-.16-.682-.437-1.322-.818-1.883s-.858-1.033-1.403-1.387a4.333 4.333 0 0 0-1.733-.657 4.18 4.18 0 0 0-1.825.14c-.632.194-1.221.534-1.73.998s-.923 1.042-1.22 1.696h-2.228c-.298-.653-.714-1.23-1.222-1.694s-1.096-.804-1.728-1a4.18 4.18 0 0 0-1.825-.14c-.61.088-1.2.312-1.733.657A4.969 4.969 0 0 0 5.97 7.095a5.602 5.602 0 0 0-.813 1.895l-1.998 8.477a5.932 5.932 0 0 0 .472 4.025c.621 1.22 1.646 2.12 2.855 2.505zM8.234 7.36a2.752 2.752 0 0 1 1.474-.441c.26 0 .52.04.772.115.467.148.895.418 1.25.788.355.37.626.83.79 1.34l.206.634h4.544l.206-.633c.163-.51.432-.97.786-1.34s.78-.64 1.246-.789c.377-.114.77-.144 1.156-.088.387.056.76.197 1.099.414.348.228.653.53.896.891.243.36.419.772.518 1.21l1.998 8.476c.214.872.112 1.804-.285 2.592s-1.055 1.37-1.833 1.618c-.376.114-.77.144-1.156.088a2.761 2.761 0 0 1-1.098-.414c-.35-.228-.655-.531-.9-.892s-.422-.77-.524-1.208l-.523-2.254H11.14l-.532 2.254c-.1.438-.277.85-.522 1.21-.244.361-.55.663-.9.89a2.738 2.738 0 0 1-1.095.414 2.64 2.64 0 0 1-1.152-.088c-.777-.25-1.435-.832-1.832-1.62a3.815 3.815 0 0 1-.294-2.59L6.81 9.46c.208-.883.72-1.638 1.424-2.1zm12.765 3.985a.857.857 0 1 1-1.714 0 .857.857 0 0 1 1.714 0zm-12.098 3.14a1.715 1.715 0 1 0 1.906-2.85 1.715 1.715 0 0 0-1.906 2.85zm11.241 1.147a.857.857 0 1 0 0-1.714.857.857 0 0 0 0 1.714zm-.857-2.572a.857.857 0 1 1-1.714 0 .857.857 0 0 1 1.714 0zm2.572.857a.857.857 0 1 0 0-1.714.857.857 0 0 0 0 1.714z" fill-rule="evenodd" clip-rule="evenodd"/>
+</svg>
diff --git a/icons/apps_list.svg b/icons/apps_list.svg
new file mode 100644
index 0000000000..62cb5020d6
--- /dev/null
+++ b/icons/apps_list.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.167 4.167c0-.92.746-1.667 1.667-1.667h3.333c.92 0 1.667.746 1.667 1.667V7.5c0 .92-.747 1.667-1.667 1.667H3.834c-.92 0-1.667-.747-1.667-1.667V4.167Zm1.667.5a.5.5 0 0 1 .5-.5h2.333a.5.5 0 0 1 .5.5V7a.5.5 0 0 1-.5.5H4.334a.5.5 0 0 1-.5-.5V4.667ZM10.5 4.27c0 .519.42.938.938.938h4.792a.938.938 0 0 0 0-1.875h-4.792a.937.937 0 0 0-.938.938Zm0 3.334c0 .518.42.938.938.938h4.792a.938.938 0 0 0 0-1.875h-4.792a.937.937 0 0 0-.938.937ZM2.167 12.5c0-.92.746-1.667 1.667-1.667h3.333c.92 0 1.667.746 1.667 1.667v3.333c0 .92-.747 1.667-1.667 1.667H3.834c-.92 0-1.667-.746-1.667-1.667V12.5Zm1.667.5a.5.5 0 0 1 .5-.5h2.333a.5.5 0 0 1 .5.5v2.333a.5.5 0 0 1-.5.5H4.334a.5.5 0 0 1-.5-.5V13Zm6.666-.396c0 .518.42.938.938.938h4.792a.938.938 0 0 0 0-1.875h-4.792a.937.937 0 0 0-.938.937Zm0 3.334c0 .517.42.937.938.937h4.792a.938.938 0 0 0 0-1.875h-4.792a.937.937 0 0 0-.938.938Z" fill="currentColor"/>
+</svg>
diff --git a/icons/apps_slim.svg b/icons/apps_slim.svg
new file mode 100644
index 0000000000..59e2f2d818
--- /dev/null
+++ b/icons/apps_slim.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+  <path fill="currentColor" fill-rule="evenodd" d="M3 5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm2 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-3ZM3 15a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4Zm2 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-3ZM15 3a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-4Zm4 2.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3ZM13 15a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4Zm2 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-3Z" clip-rule="evenodd"/>
+</svg>
diff --git a/icons/arrows/up-head.svg b/icons/arrows/up-head.svg
new file mode 100644
index 0000000000..375381a790
--- /dev/null
+++ b/icons/arrows/up-head.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+  <path fill="currentColor" d="M10.56 5.27A.72.72 0 0 0 10 5a.72.72 0 0 0-.56.27l-6.3 8.585a.729.729 0 0 0-.066.75A.699.699 0 0 0 3.7 15h12.6a.699.699 0 0 0 .626-.396.728.728 0 0 0-.066-.749l-6.3-8.585Z"/>
+</svg>
diff --git a/icons/beta.svg b/icons/beta.svg
new file mode 100644
index 0000000000..bba1309f3a
--- /dev/null
+++ b/icons/beta.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="26" height="12" rx="2" fill="#F56565"/>
+  <path d="M3.028 9V1.727h1.061V4.43h.064c.062-.114.15-.245.267-.394.116-.15.277-.28.483-.391.205-.114.478-.17.816-.17.44 0 .834.11 1.18.333.345.223.616.544.812.963.2.419.299.923.299 1.512 0 .59-.098 1.095-.295 1.517a2.3 2.3 0 0 1-.81.97 2.097 2.097 0 0 1-1.175.337c-.332 0-.603-.056-.813-.167a1.54 1.54 0 0 1-.49-.391 2.957 2.957 0 0 1-.274-.398h-.089V9H3.028Zm1.04-2.727c0 .383.056.72.167 1.008.111.29.272.515.483.679.21.16.469.241.774.241.317 0 .582-.084.795-.252.214-.17.375-.401.483-.693.112-.29.167-.619.167-.983 0-.36-.054-.683-.163-.97a1.484 1.484 0 0 0-.483-.678c-.213-.166-.48-.249-.799-.249-.308 0-.568.08-.781.238-.21.159-.37.38-.48.664a2.77 2.77 0 0 0-.163.995Zm7.485 2.837c-.538 0-1-.115-1.389-.344a2.336 2.336 0 0 1-.894-.977c-.209-.421-.313-.915-.313-1.48 0-.56.104-1.052.313-1.478.21-.426.504-.759.88-.998.379-.239.822-.359 1.328-.359.308 0 .606.051.895.153.29.102.548.262.778.48.23.217.41.5.543.848.133.346.2.766.2 1.26v.377H9.556v-.795h3.296c0-.28-.057-.527-.17-.742a1.29 1.29 0 0 0-1.198-.703 1.38 1.38 0 0 0-.78.22 1.474 1.474 0 0 0-.512.568 1.641 1.641 0 0 0-.178.756v.622c0 .364.064.674.192.93.13.256.311.451.543.586.232.133.503.199.814.199.2 0 .384-.028.55-.085a1.143 1.143 0 0 0 .707-.692l1.005.18a1.82 1.82 0 0 1-.434.778 2.1 2.1 0 0 1-.777.515 2.91 2.91 0 0 1-1.062.181Zm6.064-5.565v.853h-2.979v-.853h2.98Zm-2.18-1.306h1.062v5.16c0 .205.03.36.092.465a.49.49 0 0 0 .238.21c.1.035.207.052.323.052.085 0 .16-.005.224-.017l.149-.029.192.877a2.08 2.08 0 0 1-.689.114 1.87 1.87 0 0 1-.781-.15 1.34 1.34 0 0 1-.586-.482c-.15-.218-.224-.491-.224-.82v-5.38Zm4.942 6.882c-.345 0-.658-.064-.937-.192a1.58 1.58 0 0 1-.664-.565c-.161-.246-.242-.548-.242-.905 0-.308.06-.561.178-.76a1.31 1.31 0 0 1 .48-.472c.2-.116.425-.204.674-.263a6.56 6.56 0 0 1 .76-.135l.795-.092c.204-.027.352-.068.444-.125.092-.057.139-.149.139-.277V5.31c0-.31-.088-.55-.263-.72-.173-.171-.431-.256-.774-.256-.358 0-.64.08-.845.238-.204.156-.345.33-.423.522l-.998-.228a1.92 1.92 0 0 1 .519-.802c.23-.206.493-.355.791-.448a3.116 3.116 0 0 1 1.634-.063c.246.05.476.142.689.277.215.134.392.327.53.578.136.249.205.572.205.97V9h-1.037v-.746h-.043a1.512 1.512 0 0 1-.308.405 1.642 1.642 0 0 1-.53.33 2.053 2.053 0 0 1-.774.132Zm.231-.853c.294 0 .545-.058.753-.174a1.192 1.192 0 0 0 .646-1.061V6.33a.552.552 0 0 1-.22.106 3.43 3.43 0 0 1-.366.082l-.401.06c-.13.017-.24.03-.327.043a2.63 2.63 0 0 0-.564.131.97.97 0 0 0-.405.266.665.665 0 0 0-.15.455c0 .263.098.462.292.597.194.132.441.198.742.198Z" fill="#fff"/>
+</svg>
diff --git a/icons/beta_xs.svg b/icons/beta_xs.svg
new file mode 100644
index 0000000000..a6dc48ee4e
--- /dev/null
+++ b/icons/beta_xs.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="12" height="12" rx="2" fill="#F56565"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.42 2.494c-.373-.313-.896-.49-1.5-.49a2.028 2.028 0 0 0-1.52.567 1.948 1.948 0 0 0-.453.685 1.91 1.91 0 0 0-.127.805V10h.79V8.508a2.46 2.46 0 0 0 1.59.549c.3.01.6-.04.88-.147a2.21 2.21 0 0 0 .751-.48 2.136 2.136 0 0 0 .652-1.596 1.925 1.925 0 0 0-.309-1.09 1.978 1.978 0 0 0-.717-.664 1.75 1.75 0 0 0 .557-1.301c0-.523-.22-.97-.594-1.285Zm-2.023.36c.163-.06.338-.085.512-.074h.008c.413 0 .741.105.964.28.22.171.343.417.343.72v.004a.944.944 0 0 1-.288.713.99.99 0 0 1-.732.283l-.115-.004v.781h.112c.467 0 .84.13 1.094.351.253.219.398.534.398.927v.004a1.357 1.357 0 0 1-.418 1.04 1.422 1.422 0 0 1-1.069.4h-.012a1.532 1.532 0 0 1-1.109-.393 1.437 1.437 0 0 1-.475-1.052V4.05a1.165 1.165 0 0 1 .352-.923c.123-.12.272-.214.435-.274Z" fill="#fff"/>
+</svg>
diff --git a/icons/blob.svg b/icons/blob.svg
new file mode 100644
index 0000000000..9b40d72ecb
--- /dev/null
+++ b/icons/blob.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.183 2.768h-.002a1.382 1.382 0 0 0-.107-.024 6.93 6.93 0 0 0-1.591-.1c-1.009.056-2.254.35-3.32 1.269l-.29.245c-.323.273-.714.602-.918.82-1.292 1.38-2.252 3.68-2.894 5.713a34.038 34.038 0 0 0-.91 3.57l-.01.048-.003.034a68.656 68.656 0 0 0-.067.667c-.038.403-.072.803-.072.951 0 .096.07.329.54.654.447.309 1.123.606 1.987.864 1.719.515 4.041.84 6.38.881 2.342.043 4.645-.2 6.34-.78 1.754-.602 2.556-1.445 2.556-2.415 0-2.7-1.068-5.753-2.593-8.179-.759-1.208-1.617-2.237-2.485-2.977-.875-.746-1.718-1.161-2.452-1.226l-.045-.004-.043-.011h-.001Zm.138-.618S8.18 1.356 5.786 3.42c-.069.06-.157.133-.255.216-.328.276-.769.647-1.001.895C1.74 7.51.55 14.213.55 14.213S.402 15.587.4 15.959c-.013 3.442 19 4.92 19-.794S14.912 2.467 11.321 2.15Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="m11.165 2.748.048-.213ZM.55 14.213l-.394-.07v-.002l.001-.004.003-.016.011-.059.043-.222c.04-.192.097-.47.176-.81.157-.683.395-1.625.722-2.661.65-2.056 1.666-4.552 3.126-6.112.249-.265.702-.647 1.02-.914l.015-.013c.1-.083.185-.156.252-.213C6.81 2.009 8.29 1.674 9.43 1.612a7.894 7.894 0 0 1 1.414.05 6.37 6.37 0 0 1 .53.09l.012.002c1.004.098 2.023.647 2.972 1.455.963.821 1.886 1.936 2.688 3.212 1.6 2.546 2.754 5.794 2.754 8.744 0 1.704-1.425 2.774-3.24 3.397-1.844.632-4.273.876-6.672.833-2.403-.043-4.816-.375-6.64-.922-.909-.272-1.695-.604-2.263-.997-.556-.384-.987-.89-.985-1.52.001-.208.04-.665.077-1.048l.052-.516.017-.162.006-.06.398.043Zm0 0-.398-.043.002-.014.002-.014.394.07ZM10.672 3.085a6.528 6.528 0 0 0-1.168-.04c-.952.052-2.102.328-3.08 1.17-.084.074-.185.159-.291.248l-.002.001c-.332.28-.7.591-.884.788-1.226 1.309-2.165 3.533-2.804 5.56a33.627 33.627 0 0 0-.9 3.523l-.005.031-.002.02-.016.158a66.14 66.14 0 0 0-.05.504c-.037.385-.067.742-.07.888.013.031.083.154.367.35.397.275 1.029.557 1.874.81 1.676.502 3.96.823 6.272.864 2.319.042 4.57-.2 6.203-.759 1.718-.589 2.286-1.34 2.286-2.036 0-2.606-1.036-5.587-2.531-7.966-.743-1.182-1.576-2.178-2.407-2.886-.842-.717-1.609-1.077-2.227-1.132l-.077-.007-.072-.018-.014-.003a5.01 5.01 0 0 0-.402-.067Z" fill="currentColor"/>
+  <path d="M15.85 11.65c0 1.353-.548 2.45-1.225 2.45S13.4 13.003 13.4 11.65c0-1.353.548-2.45 1.225-2.45s1.225 1.097 1.225 2.45Zm-4.25.55c0 1.436-.582 2.6-1.3 2.6-.718 0-1.3-1.164-1.3-2.6 0-1.436.582-2.6 1.3-2.6.718 0 1.3 1.164 1.3 2.6Z" fill="currentColor"/>
+</svg>
diff --git a/icons/blobs/image.svg b/icons/blobs/image.svg
new file mode 100644
index 0000000000..be08dd269c
--- /dev/null
+++ b/icons/blobs/image.svg
@@ -0,0 +1,11 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#a)" fill="currentColor">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.647 1h12.705A2.65 2.65 0 0 1 19 3.647v12.706A2.65 2.65 0 0 1 16.353 19H3.647A2.65 2.65 0 0 1 1 16.353V3.647A2.65 2.65 0 0 1 3.647 1Zm12.705 16.94a1.59 1.59 0 0 0 1.588-1.588l.001-1.87-2.647-2.206-3.192 2.66-5.77-5.246-4.273 4.747v1.915a1.59 1.59 0 0 0 1.588 1.588h12.705Zm-1.059-7.04 2.647 2.205.001-9.457a1.59 1.59 0 0 0-1.588-1.588H3.647A1.59 1.59 0 0 0 2.06 3.647v9.208L6.257 8.19l5.874 5.342 3.162-2.634Zm1.06-4.605a2.65 2.65 0 0 1-2.647 2.647 2.65 2.65 0 0 1-2.647-2.648 2.65 2.65 0 0 1 2.647-2.647 2.65 2.65 0 0 1 2.647 2.647Zm-1.059 0a1.59 1.59 0 1 0-1.588 1.588 1.59 1.59 0 0 0 1.588-1.588Z"/>
+    <path d="M19 3.647h.2-.2Zm-1.06 12.705h-.2.2Zm.001-1.87h.2v-.094l-.072-.06-.128.154Zm-2.647-2.206.128-.153-.128-.107-.128.107.128.153Zm-3.192 2.66-.134.148.129.117.133-.112-.128-.153ZM6.332 9.69l.134-.148-.149-.136-.134.15.148.134Zm-4.273 4.747-.149-.134-.051.057v.077h.2Zm15.881-1.333-.128.154.328.273v-.427h-.2ZM15.293 10.9l.128-.154-.128-.107-.128.107.128.154Zm2.648-7.252h.2-.2ZM2.06 12.855h-.2v.521l.349-.387-.15-.134ZM6.257 8.19l.134-.148-.149-.135-.134.15.149.133Zm5.874 5.342-.134.148.129.117.133-.112-.128-.153ZM16.351.8H3.648v.4h12.705V.8ZM19.2 3.647A2.85 2.85 0 0 0 16.352.8v.4A2.45 2.45 0 0 1 18.8 3.647h.4Zm0 12.706V3.647h-.4v12.706h.4ZM16.353 19.2a2.85 2.85 0 0 0 2.847-2.847h-.4a2.45 2.45 0 0 1-2.447 2.447v.4Zm-12.706 0h12.706v-.4H3.647v.4ZM.8 16.353A2.85 2.85 0 0 0 3.647 19.2v-.4A2.45 2.45 0 0 1 1.2 16.353H.8Zm0-12.706v12.706h.4V3.647H.8ZM3.647.8A2.85 2.85 0 0 0 .8 3.647h.4A2.45 2.45 0 0 1 3.647 1.2V.8ZM17.74 16.352a1.39 1.39 0 0 1-1.388 1.388v.4a1.79 1.79 0 0 0 1.788-1.788h-.4Zm.001-1.87v1.87h.4v-1.87h-.4Zm-2.575-2.052 2.647 2.205.256-.307-2.647-2.205-.256.307Zm-2.936 2.66 3.192-2.66-.256-.307-3.192 2.66.256.306ZM6.197 9.837l5.77 5.246.27-.296-5.771-5.246-.27.296Zm-3.99 4.733L6.48 9.823l-.297-.267-4.273 4.747.298.268Zm.052 1.78v-1.914h-.4v1.915h.4Zm1.388 1.39a1.39 1.39 0 0 1-1.388-1.39h-.4a1.79 1.79 0 0 0 1.788 1.79v-.4Zm12.705 0H3.647v.4h12.705v-.4Zm1.716-4.79-2.647-2.206-.256.307 2.647 2.206.256-.307Zm-.327-9.304v9.457h.4V3.647h-.4ZM16.353 2.26a1.39 1.39 0 0 1 1.388 1.388h.4a1.79 1.79 0 0 0-1.788-1.788v.4Zm-12.706 0h12.706v-.4H3.647v.4ZM2.26 3.647A1.39 1.39 0 0 1 3.647 2.26v-.4A1.79 1.79 0 0 0 1.86 3.647h.4Zm0 9.208V3.647h-.4v9.208h.4Zm3.849-4.798L1.91 12.721l.298.268 4.197-4.664-.297-.268Zm6.158 5.328L6.39 8.043l-.269.296 5.875 5.342.269-.296Zm2.899-2.64-3.162 2.634.256.307 3.162-2.634-.256-.307Zm-1.46-1.604a2.85 2.85 0 0 0 2.848-2.848h-.4a2.45 2.45 0 0 1-2.447 2.448v.4Zm-2.847-2.848a2.85 2.85 0 0 0 2.848 2.848v-.4a2.45 2.45 0 0 1-2.447-2.447h-.4Zm2.848-2.847a2.85 2.85 0 0 0-2.848 2.847h.4a2.45 2.45 0 0 1 2.448-2.447v-.4Zm2.847 2.847a2.85 2.85 0 0 0-2.847-2.847v.4a2.45 2.45 0 0 1 2.447 2.447h.4Zm-2.847-1.387a1.39 1.39 0 0 1 1.388 1.388h.4a1.79 1.79 0 0 0-1.788-1.788v.4Zm-1.389 1.388a1.39 1.39 0 0 1 1.389-1.388v-.4a1.79 1.79 0 0 0-1.789 1.788h.4Zm1.389 1.389a1.39 1.39 0 0 1-1.389-1.389h-.4a1.79 1.79 0 0 0 1.789 1.789v-.4Zm1.388-1.389a1.39 1.39 0 0 1-1.388 1.389v.4a1.79 1.79 0 0 0 1.788-1.789h-.4Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h20v20H0z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/icons/blobs/raw.svg b/icons/blobs/raw.svg
new file mode 100644
index 0000000000..8a97401ff5
--- /dev/null
+++ b/icons/blobs/raw.svg
@@ -0,0 +1,11 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#a)" fill="currentColor" stroke="currentColor" stroke-width=".4">
+    <path d="M15.063 19H4.937A3.937 3.937 0 0 1 1 15.062V4.938A3.937 3.937 0 0 1 4.938 1h5.625v1.125H4.936a2.813 2.813 0 0 0-2.812 2.813v10.125a2.812 2.812 0 0 0 2.813 2.812h10.125a2.812 2.812 0 0 0 2.812-2.813V9.439H19v5.624A3.937 3.937 0 0 1 15.062 19Z"/>
+    <path d="M15.063 8.875a3.938 3.938 0 1 1 0-7.875 3.938 3.938 0 0 1 0 7.875Zm0-6.75a2.812 2.812 0 1 0 0 5.624 2.812 2.812 0 0 0 0-5.624Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h20v20H0z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/icons/blobs/text.svg b/icons/blobs/text.svg
new file mode 100644
index 0000000000..08ec8801bf
--- /dev/null
+++ b/icons/blobs/text.svg
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4 1a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4Zm.2 1.2a2 2 0 0 0-2 2v11.6a2 2 0 0 0 2 2h11.6a2 2 0 0 0 2-2V4.2a2 2 0 0 0-2-2H4.2Z" fill="currentColor"/>
+  <rect x="4" y="5" width="12" height="1.4" rx=".7" fill="currentColor"/>
+  <rect x="4" y="8" width="8" height="1.4" rx=".7" fill="currentColor"/>
+  <rect x="4" y="10.8" width="12" height="1.4" rx=".7" fill="currentColor"/>
+  <rect x="4" y="13.6" width="9" height="1.4" rx=".7" fill="currentColor"/>
+</svg>
diff --git a/icons/block_countdown.svg b/icons/block_countdown.svg
new file mode 100644
index 0000000000..0024e52ce9
--- /dev/null
+++ b/icons/block_countdown.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 241 185" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M58.5 57.705 120.306 22.5l62.743 35.205v72.397l-48.007 26.842v-11.695l37.055-21.373-8.814-5.11.794-1.37 8.681 5.034V70.1l-23.049 13.044c.109-.729.164-1.464.166-2.2v-9.556l17.678-10.174-46.559-26.74v10.17h-1.583V34.605L74.17 61.214l16.33 9.625v10.225c.002.588.037 1.175.107 1.76L68.09 70.1v52.366l8.708-4.994.787 1.373-8.808 5.052 37.262 21.819.234 11.697L58.5 129.576V57.705Zm32.219 51.843c-.11.642-.179 1.29-.206 1.939l-5.774 3.289-.784-1.375 6.764-3.853Zm24.672 28.095h10.139v22.05l-5.147 2.807-4.992-2.806v-22.051Zm10.139-10h-10.139v-4.78h10.139v4.78Zm0-29.66-1.706-1.412 14.301-11.83a4.797 4.797 0 0 0 1.285-1.688 5.169 5.169 0 0 0 .465-2.137v-3.772l-4.375 2.518v1.254l-1.586 1.315h-2.878l-10.73 6.175-10.478-6.175h-3.504l-1.449-1.195V79.31l-4.375-2.578v4.303c.002.741.161 1.472.465 2.136a4.797 4.797 0 0 0 1.285 1.688l4.949 4.063 9.352 7.648-1.16.95v5.968l2.609-2.137v7.17c0 .634.23 1.242.641 1.69.41.448.966.7 1.547.7.58 0 1.136-.252 1.546-.7a2.503 2.503 0 0 0 .641-1.69v-7.141l3.155 2.607v-6.006Zm-4.536-27.703h-1.583v-.032h1.583v.032Zm28.844 40.893 6.353 3.66.79-1.372-7.414-4.27c.134.655.224 1.317.271 1.982ZM120.994 55.5h-1.583v-3.763h1.583V55.5Z" fill="currentColor"/>
+  <path d="M138.125 84.74a4.728 4.728 0 0 0 1.285-1.688 5.169 5.169 0 0 0 .465-2.136V70.28c0-1.268-.461-2.483-1.281-3.38-.821-.896-1.934-1.4-3.094-1.4h-30.625c-1.16 0-2.273.504-3.094 1.4-.82.897-1.281 2.112-1.281 3.38v10.756c.002.741.161 1.472.465 2.136a4.729 4.729 0 0 0 1.285 1.688l4.949 4.063 9.352 7.648-14.301 11.712a4.725 4.725 0 0 0-1.285 1.688 5.166 5.166 0 0 0-.465 2.136v10.756c0 1.267.461 2.483 1.281 3.38.821.896 1.934 1.4 3.094 1.4H135.5c1.16 0 2.273-.504 3.094-1.4.82-.897 1.281-2.113 1.281-3.38v-10.636a5.174 5.174 0 0 0-.465-2.137 4.733 4.733 0 0 0-1.285-1.688l-14.301-11.83 6.207-5.14 8.094-6.692Zm-33.25-14.46H135.5v10.636l-1.586 1.315h-27.59l-1.449-1.195V70.28Zm30.625 41.947v10.636h-30.625v-10.756L118 101.352v7.17c0 .634.23 1.242.641 1.69.41.448.966.7 1.547.7.58 0 1.136-.252 1.546-.7a2.503 2.503 0 0 0 .641-1.69v-7.141l13.125 10.846Z" fill="currentColor" stroke="currentColor" stroke-width="4"/>
+</svg>
diff --git a/icons/brands/blockscout.svg b/icons/brands/blockscout.svg
new file mode 100644
index 0000000000..0e3279de01
--- /dev/null
+++ b/icons/brands/blockscout.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path clip-rule="evenodd" d="M8.175 2.102a.834.834 0 0 0-.835-.832H5.36a.834.834 0 0 0-.835.832v1.972c0 .46-.374.832-.835.832H1.835A.834.834 0 0 0 1 5.74v12.155c0 .46.374.833.835.833h1.98a.834.834 0 0 0 .835-.832V5.739c0-.46.374-.833.835-.833H7.34a.834.834 0 0 0 .835-.832V2.102Zm7.3 0a.834.834 0 0 0-.835-.832h-1.98a.834.834 0 0 0-.835.832v1.972c0 .46.374.832.835.832h1.855c.461 0 .835.373.835.833v12.155c0 .46.374.833.835.833h1.98a.834.834 0 0 0 .835-.832V5.739a.834.834 0 0 0-.835-.833H16.31a.834.834 0 0 1-.835-.832V2.102Zm-3.65 6.962a.834.834 0 0 0-.835-.832H9.01a.834.834 0 0 0-.835.832v5.401c0 .46.374.833.835.833h1.98a.834.834 0 0 0 .835-.833V9.064Z" stroke="currentColor" stroke-width="1.4"/>
+</svg>
diff --git a/icons/brands/celenium.svg b/icons/brands/celenium.svg
new file mode 100644
index 0000000000..8a5d645ac2
--- /dev/null
+++ b/icons/brands/celenium.svg
@@ -0,0 +1,16 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="10" cy="10" r="10" fill="url(#a)"/>
+  <g clip-path="url(#b)" fill="#fff" fill-opacity=".95">
+    <path d="M15.763 12.826c.119-.243.178-.365.158-.462a.292.292 0 0 0-.148-.199c-.088-.047-.244-.02-.554.033a6.409 6.409 0 0 1-5.632-1.786 6.409 6.409 0 0 1-1.785-5.631c.053-.31.08-.466.033-.554a.292.292 0 0 0-.199-.149c-.098-.02-.219.04-.462.159a6.417 6.417 0 1 0 8.589 8.589Z"/>
+    <path d="M15.9 10.817c.152-.054.229-.082.31-.152a.686.686 0 0 0 .163-.228c.04-.1.04-.183.043-.35a6.398 6.398 0 0 0-1.879-4.624 6.398 6.398 0 0 0-4.624-1.88c-.167.003-.25.004-.35.044a.685.685 0 0 0-.229.163c-.07.081-.097.158-.151.31a5.25 5.25 0 0 0 6.717 6.717Z"/>
+  </g>
+  <defs>
+    <linearGradient id="a" x1="17.5" y1="2" x2="0" y2="20" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#196E41"/>
+      <stop offset="1" stop-color="#092E1B"/>
+    </linearGradient>
+    <clipPath id="b">
+      <rect x="3" y="3" width="14" height="14" rx="7" fill="#fff"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/icons/brands/graph.svg b/icons/brands/graph.svg
new file mode 100644
index 0000000000..bd3cc916d9
--- /dev/null
+++ b/icons/brands/graph.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+  <path fill="#6747ED" d="M10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10"/>
+  <path fill="#fff" fill-rule="evenodd" d="M9.854 11.292a2.66 2.66 0 0 1-2.666-2.667 2.66 2.66 0 0 1 2.666-2.667 2.66 2.66 0 0 1 2.667 2.667 2.66 2.66 0 0 1-2.667 2.667m0-6.667a4.001 4.001 0 0 1 0 8 4.001 4.001 0 0 1 0-8m3.813 8.208c.27.271.27.688 0 .938L11 16.437c-.27.271-.687.271-.937 0-.271-.27-.271-.687 0-.937l2.666-2.667c.25-.27.688-.27.938 0m1.541-7.541a.66.66 0 0 1-.666.666.66.66 0 0 1-.667-.666c0-.375.292-.667.667-.667.354 0 .666.292.666.667" clip-rule="evenodd"/>
+</svg>
diff --git a/icons/brands/safe.svg b/icons/brands/safe.svg
index 9e596a3821..8369513837 100644
--- a/icons/brands/safe.svg
+++ b/icons/brands/safe.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="background:#12ff80" viewBox="0 0 661.6 661.5">
-  <path d="M532 330.7h-49.4c-14.8 0-26.7 12-26.7 26.7v71.7c0 14.8-12 26.7-26.7 26.7H232.5c-14.8 0-26.7 12-26.7 26.7V532c0 14.8 12 26.7 26.7 26.7h208c14.8 0 26.5-12 26.5-26.7v-39.6c0-14.8 12-25.2 26.7-25.2H532c14.8 0 26.7-12 26.7-26.7v-83.3c0-14.9-12-26.5-26.7-26.5zm-326.2-98.2c0-14.8 12-26.7 26.7-26.7H429c14.8 0 26.7-12 26.7-26.7v-49.4c0-14.8-12-26.7-26.7-26.7H221.1c-14.8 0-26.7 12-26.7 26.7v38.1c0 14.8-12 26.7-26.7 26.7h-38c-14.8 0-26.7 12-26.7 26.7v83.4c0 14.8 12 26.1 26.8 26.1h49.4c14.8 0 26.7-12 26.7-26.7l-.1-71.5zm101.7 46.3H355c15.5 0 28 12.6 28 28v47.5c0 15.5-12.6 28-28 28h-47.5c-15.5 0-28-12.6-28-28v-47.5c0-15.5 12.6-28 28-28z"/>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 661.6 661.5">
+  <path fill="currentColor" d="M532 330.7h-49.4c-14.8 0-26.7 12-26.7 26.7v71.7c0 14.8-12 26.7-26.7 26.7H232.5c-14.8 0-26.7 12-26.7 26.7V532c0 14.8 12 26.7 26.7 26.7h208c14.8 0 26.5-12 26.5-26.7v-39.6c0-14.8 12-25.2 26.7-25.2H532c14.8 0 26.7-12 26.7-26.7v-83.3c0-14.9-12-26.5-26.7-26.5zm-326.2-98.2c0-14.8 12-26.7 26.7-26.7H429c14.8 0 26.7-12 26.7-26.7v-49.4c0-14.8-12-26.7-26.7-26.7H221.1c-14.8 0-26.7 12-26.7 26.7v38.1c0 14.8-12 26.7-26.7 26.7h-38c-14.8 0-26.7 12-26.7 26.7v83.4c0 14.8 12 26.1 26.8 26.1h49.4c14.8 0 26.7-12 26.7-26.7l-.1-71.5zm101.7 46.3H355c15.5 0 28 12.6 28 28v47.5c0 15.5-12.6 28-28 28h-47.5c-15.5 0-28-12.6-28-28v-47.5c0-15.5 12.6-28 28-28z"/>
 </svg>
diff --git a/icons/brands/solidity_scan.svg b/icons/brands/solidity_scan.svg
new file mode 100644
index 0000000000..ac5747c69a
--- /dev/null
+++ b/icons/brands/solidity_scan.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 23 20">
+  <path fill="url(#a)" d="M1.12 1.111v5.556h2.241V2.222h4.482V0H2.241a1.13 1.13 0 0 0-.793.325c-.21.209-.327.491-.327.786Zm20.168 5.556V1.11c0-.295-.118-.577-.328-.786A1.125 1.125 0 0 0 20.168 0h-5.603v2.222h4.482v4.445h2.24Zm-2.24 11.11h-4.483V20h5.603c.297 0 .582-.117.792-.326.21-.208.328-.49.328-.785v-5.556h-2.24v4.445ZM7.842 20v-2.222H3.361v-4.445h-2.24v5.556c0 .295.117.577.327.785.21.209.496.326.793.326h5.602ZM0 8.889h22.408v2.222H0V8.89Z"/>
+  <defs>
+    <linearGradient id="a" x1="2.161" x2="21.104" y1="1.429" y2="18.729" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#52FF00"/>
+      <stop offset="1" stop-color="#00EEFD"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/icons/verified_token.svg b/icons/certified.svg
similarity index 100%
rename from icons/verified_token.svg
rename to icons/certified.svg
diff --git a/icons/checkered_flag.svg b/icons/checkered_flag.svg
new file mode 100644
index 0000000000..918c29cea4
--- /dev/null
+++ b/icons/checkered_flag.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="2.4" height="16" rx="1.2" fill="currentColor"/>
+  <path d="M2.9 2.1h9.18a1.5 1.5 0 0 1 1.5 1.5v5.6a1.5 1.5 0 0 1-1.5 1.5H2.9V2.1Z" stroke="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.12 2.4H2.4v2.667h2.72V2.4Zm5.44 0H7.84v2.667h2.72V2.4ZM2.4 7.733h2.72V10.4H2.4V7.733Zm8.16 0H7.84V10.4h2.72V7.733ZM5.12 5.067h2.72v2.666H5.12V5.067Zm8.16 0h-2.72v2.666h2.72V5.067Z" fill="currentColor"/>
+</svg>
diff --git a/icons/clock-light.svg b/icons/clock-light.svg
index a41614753a..9b18072460 100644
--- a/icons/clock-light.svg
+++ b/icons/clock-light.svg
@@ -1,11 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 29 28">
-  <g fill="currentColor" clip-path="url(#a)">
-    <path d="M14.75 25.375a11.375 11.375 0 1 1 0-22.75 11.375 11.375 0 0 1 0 22.75Zm0-21a9.625 9.625 0 1 0 0 19.25 9.625 9.625 0 0 0 0-19.25Z"/>
-    <path d="M19.563 19.688a.875.875 0 0 1-.622-.254L14.13 14.62a.874.874 0 0 1-.254-.621V7a.875.875 0 0 1 1.75 0v6.641l4.559 4.55a.874.874 0 0 1-.622 1.497Z"/>
-  </g>
-  <defs>
-    <clipPath id="a">
-      <path fill="#fff" d="M.75 0h28v28h-28z"/>
-    </clipPath>
-  </defs>
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.444 18.315a10 10 0 1 0 11.112-16.63 10 10 0 0 0-11.112 16.63ZM5.3 2.965a8.462 8.462 0 1 1 9.402 14.07 8.462 8.462 0 0 1-9.402-14.07Zm8.637 11.978a.768.768 0 0 0 .295.057.769.769 0 0 0 .546-1.315l-4.008-4V3.846a.769.769 0 1 0-1.538 0V10a.77.77 0 0 0 .223.546l4.23 4.23a.77.77 0 0 0 .252.167Z" fill="currentColor"/>
 </svg>
diff --git a/icons/clock.svg b/icons/clock.svg
index f40b6ee05d..14a8c94053 100644
--- a/icons/clock.svg
+++ b/icons/clock.svg
@@ -1,3 +1,3 @@
-<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 11a7.5 7.5 0 1 1 15 0 7.5 7.5 0 0 1-15 0ZM11 1C5.477 1 1 5.477 1 11s4.477 10 10 10 10-4.477 10-10S16.523 1 11 1Zm1.25 5a1.25 1.25 0 1 0-2.5 0v5c0 .69.56 1.25 1.25 1.25h5a1.25 1.25 0 1 0 0-2.5h-3.75V6Z" fill="currentColor" stroke="transparent" stroke-width=".6" stroke-linecap="round" stroke-linejoin="round"/>
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10 .3C4.643.3.3 4.643.3 10c0 5.357 4.343 9.7 9.7 9.7 5.357 0 9.7-4.343 9.7-9.7 0-5.357-4.343-9.7-9.7-9.7ZM2.2 10a7.8 7.8 0 1 1 15.6 0 7.8 7.8 0 0 1-15.6 0ZM10 4.05a.95.95 0 0 0-.95.95v5c0 .525.425.95.95.95h5a.95.95 0 1 0 0-1.9h-3.75a.3.3 0 0 1-.3-.3V5a.95.95 0 0 0-.95-.95Z" fill="currentColor"/>
 </svg>
diff --git a/icons/columns.svg b/icons/columns.svg
new file mode 100644
index 0000000000..d4bfc97368
--- /dev/null
+++ b/icons/columns.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+  <g fill="currentColor">
+    <path d="M1 2.688A1.687 1.687 0 0 1 2.688 1h14.624A1.687 1.687 0 0 1 19 2.688v14.624A1.687 1.687 0 0 1 17.312 19H2.688A1.687 1.687 0 0 1 1 17.312zm1.688-.563a.563.563 0 0 0-.563.563v14.624a.562.562 0 0 0 .563.563h3.937V2.125zm9.562 15.75V2.125h-4.5v15.75zm1.125 0h3.938a.562.562 0 0 0 .562-.563V2.688a.563.563 0 0 0-.563-.562h-3.937z"/>
+    <path fill-rule="evenodd" d="M2.687 1.15A1.537 1.537 0 0 0 1.15 2.688v14.625a1.538 1.538 0 0 0 1.537 1.537h14.625a1.538 1.538 0 0 0 1.538-1.538V2.688a1.538 1.538 0 0 0-1.538-1.538zm-1.3.238a1.837 1.837 0 0 1 1.3-.538h14.625a1.838 1.838 0 0 1 1.838 1.838v14.624a1.838 1.838 0 0 1-1.838 1.838H2.687A1.837 1.837 0 0 1 .85 17.313V2.688c0-.488.193-.955.538-1.3zm.796.796a.712.712 0 0 1 .504-.209h4.088v16.05H2.687a.713.713 0 0 1-.712-.712V2.688c0-.19.075-.37.208-.504zm.504.091a.413.413 0 0 0-.412.413v14.625a.413.413 0 0 0 .412.412h3.788V2.275zm4.913-.3h4.8v16.05H7.6zm.3.3v15.45h4.2V2.275zm5.325-.3h4.087a.712.712 0 0 1 .713.713v14.625a.712.712 0 0 1-.713.712h-4.087zm.3.3v15.45h3.787a.413.413 0 0 0 .413-.412V2.688a.412.412 0 0 0-.413-.413z" clip-rule="evenodd"/>
+  </g>
+</svg>
diff --git a/icons/contracts/proxy.svg b/icons/contracts/proxy.svg
new file mode 100644
index 0000000000..1b75cb210f
--- /dev/null
+++ b/icons/contracts/proxy.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.392.45C3.644.163 3.984 0 4.34 0h8.038a.63.63 0 0 1 .474.225L17.54 5.61a.83.83 0 0 1 .196.544v12.308c0 .408-.141.799-.393 1.087-.25.289-.592.451-.947.451H4.34c-.356 0-.696-.162-.948-.45A1.661 1.661 0 0 1 3 18.461V1.538c0-.408.141-.799.392-1.087Zm.948 1.088h6.87v4.497c0 .388.315.702.702.702h4.485v11.725H4.34V1.538Zm8.274.59 2.791 3.205h-2.791V2.128Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.233 8.8a2.293 2.293 0 0 0-1.613.644l-.006.006-.595.591a.564.564 0 1 0 .795.8l.592-.589a1.166 1.166 0 0 1 1.649 1.648l-1.034 1.034a1.168 1.168 0 0 1-1.758-.126.564.564 0 1 0-.903.676 2.293 2.293 0 0 0 3.458.247l1.038-1.037.007-.007a2.294 2.294 0 0 0-1.63-3.887Zm-2.259 2.403a2.294 2.294 0 0 0-1.786.666l-1.037 1.037-.007.008a2.293 2.293 0 0 0 3.243 3.242l.006-.007.592-.591a.564.564 0 0 0-.797-.797l-.588.587A1.166 1.166 0 0 1 7.952 13.7l1.034-1.034a1.167 1.167 0 0 1 1.758.126.564.564 0 0 0 .903-.675 2.293 2.293 0 0 0-1.673-.914Z" fill="currentColor"/>
+</svg>
diff --git a/icons/contract.svg b/icons/contracts/regular.svg
similarity index 100%
rename from icons/contract.svg
rename to icons/contracts/regular.svg
diff --git a/icons/contracts/regular_many.svg b/icons/contracts/regular_many.svg
new file mode 100644
index 0000000000..1f0b62afd2
--- /dev/null
+++ b/icons/contracts/regular_many.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.4 2a1.8 1.8 0 0 0-1.8 1.8v14.8A1.4 1.4 0 0 0 3 20h1.6v-1.326H3V3.516h1.6V2H3.4Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.992.45C4.244.163 4.585 0 4.94 0h8.038a.63.63 0 0 1 .474.225L18.14 5.61a.83.83 0 0 1 .196.544v12.308c0 .408-.141.799-.392 1.087a1.26 1.26 0 0 1-.948.451H4.94c-.356 0-.696-.162-.948-.45a1.661 1.661 0 0 1-.392-1.088V1.538c0-.408.141-.799.392-1.087Zm.948 1.088h6.87v4.497c0 .388.315.702.702.702h4.485v11.725H4.94V1.538Zm8.274.59 2.791 3.205h-2.79V2.128Z" fill="currentColor"/>
+  <rect x="7.2" y="14.3" width="7.8" height="1.2" rx=".6" fill="currentColor"/>
+  <rect x="7.2" y="12" width="7.8" height="1.2" rx=".6" fill="currentColor"/>
+</svg>
diff --git a/icons/contract_verified.svg b/icons/contracts/verified.svg
similarity index 100%
rename from icons/contract_verified.svg
rename to icons/contracts/verified.svg
diff --git a/icons/contracts/verified_many.svg b/icons/contracts/verified_many.svg
new file mode 100644
index 0000000000..2a004f596d
--- /dev/null
+++ b/icons/contracts/verified_many.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.4 2a1.8 1.8 0 0 0-1.8 1.8v14.8A1.4 1.4 0 0 0 3 20h1.6v-1.326H3V3.516h1.6V2H3.4Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.992.45C4.244.163 4.585 0 4.94 0h8.038a.63.63 0 0 1 .474.225L18.14 5.61a.83.83 0 0 1 .196.544v12.308c0 .408-.141.799-.392 1.087a1.26 1.26 0 0 1-.948.451H4.94c-.356 0-.696-.162-.948-.45a1.661 1.661 0 0 1-.392-1.088V1.538c0-.408.141-.799.392-1.087Zm8.709 1.088H4.94v16.924h12.057V6.472l-4.296-4.934Z" fill="currentColor"/>
+  <path d="m7.9 13.357 2.2 2.357L14.5 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.512.42c.388 0 .702.315.702.703v4.21h4.21a.702.702 0 1 1 0 1.404h-4.912a.702.702 0 0 1-.702-.702V1.123c0-.388.315-.702.702-.702Z" fill="currentColor"/>
+</svg>
diff --git a/icons/dex-tracker.svg b/icons/dex-tracker.svg
new file mode 100644
index 0000000000..64deb3aed4
--- /dev/null
+++ b/icons/dex-tracker.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30">
+  <path fill="currentColor" fill-rule="evenodd" d="M13.776 20.692a8.5 8.5 0 0 1-1.695.288 7.3 7.3 0 1 0 7.632-10.68q.22.82.272 1.696a5.7 5.7 0 1 1-6.21 8.696m5.33-4.392q.312-.624.52-1.3H21v5h-5v-.287a8.5 8.5 0 0 0 1.315-1.013H19.7v-2.4z" clip-rule="evenodd"/>
+  <path fill="currentColor" fill-rule="evenodd" d="M5.8 12.5a5.7 5.7 0 1 1 11.4 0 5.7 5.7 0 0 1-11.4 0m5.7-7.3a7.3 7.3 0 1 0 0 14.6 7.3 7.3 0 0 0 0-14.6m.563 4.675L11.5 8.9l-.563.975-2.165 3.75-.563.975h6.582l-.563-.975zM10.46 13.3l1.04-1.8 1.039 1.8z" clip-rule="evenodd"/>
+</svg>
diff --git a/icons/discussions.svg b/icons/discussions.svg
deleted file mode 100644
index 47ba3acd98..0000000000
--- a/icons/discussions.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.385 17.044c1.752 2.174 4.83 3.47 7.255 4.44v-2.52a5.76 5.76 0 0 0 0-11.52H16v2.281c.064.13.118.257.156.381L16 10.5v.5c.242-.242.259-.555.156-.894l.484-1.222a4.32 4.32 0 1 1 0 8.64H15.2v1.786c-1.654-.75-2.926-1.482-3.85-2.266H9.385Z" fill="currentColor"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.385 17.044c1.752 2.174 4.83 3.47 7.255 4.44v-2.52a5.76 5.76 0 0 0 0-11.52H16v2.281c.064.13.118.257.156.381L16 10.5v.5c.242-.242.259-.555.156-.894l.484-1.222a4.32 4.32 0 1 1 0 8.64H15.2v1.786c-1.654-.75-2.926-1.482-3.85-2.266H9.385Z" fill="currentColor"/>
-  <path d="M10.4 3.444H7.2a6.32 6.32 0 0 0-4.526 1.923A6.65 6.65 0 0 0 .8 10.008c0 1.741.674 3.41 1.874 4.642A6.32 6.32 0 0 0 7.2 16.572v2.872c4-1.64 9.6-4.102 9.6-9.436a6.65 6.65 0 0 0-1.875-4.641A6.32 6.32 0 0 0 10.4 3.444ZM8.8 14.931H7.2c-.63 0-1.255-.127-1.837-.374a4.793 4.793 0 0 1-1.557-1.068c-.446-.457-.8-1-1.04-1.597a5.033 5.033 0 0 1 0-3.768 4.933 4.933 0 0 1 1.04-1.597c.445-.457.975-.82 1.557-1.067A4.696 4.696 0 0 1 7.2 5.085h3.2a4.74 4.74 0 0 1 3.394 1.442 4.988 4.988 0 0 1 1.406 3.481c0 2.962-1.97 4.895-6.4 6.958v-2.035Z" fill="currentColor"/>
-  <path d="M10.4 3.444H7.2a6.32 6.32 0 0 0-4.526 1.923A6.65 6.65 0 0 0 .8 10.008c0 1.741.674 3.41 1.874 4.642A6.32 6.32 0 0 0 7.2 16.572v2.872c4-1.64 9.6-4.102 9.6-9.436a6.65 6.65 0 0 0-1.875-4.641A6.32 6.32 0 0 0 10.4 3.444ZM8.8 14.931H7.2c-.63 0-1.255-.127-1.837-.374a4.793 4.793 0 0 1-1.557-1.068c-.446-.457-.8-1-1.04-1.597a5.033 5.033 0 0 1 0-3.768 4.933 4.933 0 0 1 1.04-1.597c.445-.457.975-.82 1.557-1.067A4.696 4.696 0 0 1 7.2 5.085h3.2a4.74 4.74 0 0 1 3.394 1.442 4.988 4.988 0 0 1 1.406 3.481c0 2.962-1.97 4.895-6.4 6.958v-2.035Z" fill="currentColor"/>
-</svg>
diff --git a/icons/email-sent.svg b/icons/email-sent.svg
deleted file mode 100644
index d31e30f244..0000000000
--- a/icons/email-sent.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg viewBox="0 0 177 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M166.961 7.644a2 2 0 0 0-2.251-2.812l-76.313 17.5a2 2 0 0 0-.727 3.569l17.58 12.744v17.636a2.001 2.001 0 0 0 3.321 1.502l10.716-9.426 21.384 9.744a2 2 0 0 0 2.634-.957l23.656-49.5ZM108.308 35.92 93.583 25.247l62.923-14.43-48.198 25.104Zm.942 1.764v14.173l8.367-7.36a.385.385 0 0 1 .022-.018l.016-.014a.998.998 0 0 1 .214-.242l37.608-30.616-46.227 24.077Zm31.293 15.962-19.927-9.08 39.719-32.335-19.792 41.415ZM93.278 65.729a1.5 1.5 0 0 0 1.93 2.296 93.435 93.435 0 0 0 2.449-2.13 57.65 57.65 0 0 0 .819-.753l.044-.042.012-.011.004-.004.001-.001L97.5 64l1.038 1.083a1.5 1.5 0 0 0-2.075-2.167l-.002.002-.008.008-.037.035a19.011 19.011 0 0 1-.154.145 90.663 90.663 0 0 1-2.984 2.623Zm-5.037 7.714a1.5 1.5 0 0 0-1.751-2.436 105.47 105.47 0 0 1-7.163 4.73 1.5 1.5 0 1 0 1.547 2.57c2.69-1.618 5.17-3.284 7.367-4.864Zm-15.172 9.06a1.5 1.5 0 0 0-1.28-2.714c-2.556 1.205-5.207 2.277-7.906 3.13a1.5 1.5 0 0 0 .905 2.86c2.847-.9 5.624-2.024 8.28-3.276Zm-17.046 5.22a1.5 1.5 0 0 0-.358-2.98A34.938 34.938 0 0 1 51.5 85c-1.392 0-2.728-.09-4.012-.26a1.5 1.5 0 1 0-.394 2.973A33.44 33.44 0 0 0 51.5 88c1.51 0 3.02-.097 4.523-.278Zm-17.422-2.388a1.5 1.5 0 1 0 1.212-2.745c-2.517-1.11-4.783-2.55-6.816-4.194a1.5 1.5 0 1 0-1.887 2.332c2.216 1.792 4.705 3.377 7.491 4.607ZM24.974 74.523a1.5 1.5 0 1 0 2.338-1.881C25.51 70.403 24 68.076 22.756 65.86a1.5 1.5 0 0 0-2.616 1.47c1.311 2.333 2.911 4.803 4.834 7.193Zm-8.515-15a1.5 1.5 0 0 0 2.796-1.086 49.986 49.986 0 0 1-1-2.813 32.043 32.043 0 0 1-.29-.956l-.013-.045-.002-.01a1.5 1.5 0 0 0-2.899.775l1.45-.388-1.45.388.001.003.002.005.004.018.018.061.064.227c.057.196.143.478.258.837.23.718.579 1.741 1.06 2.984Z" fill="currentColor"/>
-</svg>
diff --git a/icons/empty_search_result.svg b/icons/empty_search_result.svg
index 1e49771d0a..f4d62eff0e 100644
--- a/icons/empty_search_result.svg
+++ b/icons/empty_search_result.svg
@@ -1,11 +1,16 @@
-<svg viewBox="0 0 240 192" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M82.667 4H56a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4ZM56 0a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V8a8 8 0 0 0-8-8H56Zm122.667 4H152a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4ZM152 0a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V8a8 8 0 0 0-8-8H152ZM56 52h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H56a4 4 0 0 1-4-4V56a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H56a8 8 0 0 1-8-8V56Zm34.667 44H56a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V104a4 4 0 0 0-4-4ZM56 96a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V104a8 8 0 0 0-8-8H56Zm0 52h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H56a4 4 0 0 1-4-4V152a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H56a8 8 0 0 1-8-8V152ZM178.667 52H152a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V56a4 4 0 0 0-4-4ZM152 48a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V56a8 8 0 0 0-8-8H152Zm0 52h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H152a4 4 0 0 1-4-4V104a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H152a8 8 0 0 1-8-8V104Zm34.667 44H152a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V152a4 4 0 0 0-4-4ZM152 144a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V152a8 8 0 0 0-8-8H152ZM8 28h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V32Zm104-4h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H104a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H104a8 8 0 0 1-8-8V32Zm130.667-4H200a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V32a4 4 0 0 0-4-4ZM200 24a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V32a8 8 0 0 0-8-8H200Zm-96 52h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H104a4 4 0 0 1-4-4V80a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H104a8 8 0 0 1-8-8V80Zm34.667 44H104a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V128a4 4 0 0 0-4-4ZM104 120a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V128a8 8 0 0 0-8-8H104Zm96-44h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H200a4 4 0 0 1-4-4V80a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H200a8 8 0 0 1-8-8V80Zm34.667 44H200a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V128a4 4 0 0 0-4-4ZM200 120a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V128a8 8 0 0 0-8-8H200ZM8 76h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V80a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V80Zm34.667 44H8a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V128a4 4 0 0 0-4-4ZM8 120a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V128a8 8 0 0 0-8-8H8Z" fill="url(#a)"/>
-  <path d="m135.337 94.376 11.182 11.242-3.694 3.715-11.18-11.245a23.31 23.31 0 0 1-14.666 5.17c-12.971 0-23.498-10.586-23.498-23.629C93.48 66.586 104.008 56 116.979 56c12.971 0 23.499 10.586 23.499 23.629a23.614 23.614 0 0 1-5.141 14.747Zm-5.238-1.948a18.372 18.372 0 0 0 5.157-12.799c0-10.155-8.18-18.378-18.277-18.378-10.099 0-18.276 8.223-18.276 18.378 0 10.153 8.177 18.378 18.276 18.378a18.166 18.166 0 0 0 12.729-5.185l.391-.394Z" fill="#A0AEC0"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 185" fill="none">
+  <g clip-path="url(#a)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M26.307-2.023H6.923A7.2 7.2 0 0 0-.37 5.269v19.385a7.25 7.25 0 0 0 7.293 7.292h19.384a7.25 7.25 0 0 0 7.293-7.292V5.269a7.25 7.25 0 0 0-7.293-7.292Zm-19.384-2.4A9.692 9.692 0 0 0-2.77 5.269v19.385a9.692 9.692 0 0 0 9.693 9.692h19.384A9.692 9.692 0 0 0 36 24.654V5.269a9.693 9.693 0 0 0-9.693-9.692H6.923Zm19.384 54.092H6.923A7.2 7.2 0 0 0-.37 56.962v19.384a7.25 7.25 0 0 0 7.293 7.292h19.384a7.25 7.25 0 0 0 7.293-7.292V56.961a7.25 7.25 0 0 0-7.293-7.292Zm-19.384-2.4a9.693 9.693 0 0 0-9.693 9.693v19.384a9.692 9.692 0 0 0 9.693 9.692h19.384A9.692 9.692 0 0 0 36 76.346V56.961a9.693 9.693 0 0 0-9.693-9.692H6.923Zm0 54.093h19.384a7.249 7.249 0 0 1 7.293 7.292v19.384a7.25 7.25 0 0 1-7.293 7.293H6.923a7.209 7.209 0 0 1-5.184-2.108 7.208 7.208 0 0 1-2.109-5.185v-19.384a7.249 7.249 0 0 1 7.293-7.292Zm-9.693 7.292a9.693 9.693 0 0 1 9.693-9.692h19.384A9.694 9.694 0 0 1 36 108.654v19.384a9.694 9.694 0 0 1-9.693 9.693H6.923a9.691 9.691 0 0 1-9.693-9.693v-19.384Zm29.077 44.4H6.923a7.19 7.19 0 0 0-5.184 2.108 7.208 7.208 0 0 0-2.109 5.184v19.385a7.25 7.25 0 0 0 7.293 7.292h19.384a7.25 7.25 0 0 0 7.293-7.292v-19.385a7.25 7.25 0 0 0-7.293-7.292Zm-19.384-2.4a9.691 9.691 0 0 0-9.693 9.692v19.385a9.691 9.691 0 0 0 9.693 9.692h19.384A9.691 9.691 0 0 0 36 179.731v-19.385a9.691 9.691 0 0 0-9.693-9.692H6.923Zm51.692-126.83H78a7.25 7.25 0 0 1 7.292 7.291V50.5A7.25 7.25 0 0 1 78 57.792H58.615a7.2 7.2 0 0 1-7.292-7.292V31.115a7.249 7.249 0 0 1 7.292-7.292Zm-9.692 7.291a9.692 9.692 0 0 1 9.692-9.692H78a9.692 9.692 0 0 1 9.692 9.692V50.5A9.692 9.692 0 0 1 78 60.192H58.615a9.692 9.692 0 0 1-9.692-9.692V31.115ZM78 75.515H58.615a7.2 7.2 0 0 0-7.292 7.293v19.384a7.25 7.25 0 0 0 7.292 7.293H78a7.25 7.25 0 0 0 7.292-7.293v-2.123c.39 1.933.977 3.819 1.754 5.631A9.689 9.689 0 0 1 78 111.885H58.615a9.695 9.695 0 0 1-9.692-9.693V82.808a9.692 9.692 0 0 1 9.692-9.693H78c4.061 0 7.569 2.493 9.046 6.185-.83 1.754-1.385 3.692-1.846 5.538v-2.03c0-4.062-3.139-7.293-7.2-7.293Zm61.384-12.83V56.96a9.694 9.694 0 0 0-9.692-9.692h-19.385a9.693 9.693 0 0 0-9.692 9.693v5.723l2.4-1.477v-4.246a7.25 7.25 0 0 1 7.292-7.293h19.385a7.249 7.249 0 0 1 7.292 7.293v4.246l2.4 1.477Zm13.57 43.015a9.691 9.691 0 0 0 9.046 6.185h19.384a9.696 9.696 0 0 0 9.693-9.693V82.808a9.695 9.695 0 0 0-9.693-9.693H162a9.69 9.69 0 0 0-9.046 6.185c.83 1.754 1.384 3.692 1.846 5.538v-2.03c0-4.062 3.138-7.293 7.2-7.293h19.384a7.25 7.25 0 0 1 7.293 7.293v19.384a7.25 7.25 0 0 1-7.293 7.293H162a7.188 7.188 0 0 1-5.184-2.109 7.188 7.188 0 0 1-2.109-5.184v-2.123a28.602 28.602 0 0 1-1.753 5.631Zm-52.339 16.615v5.816a9.69 9.69 0 0 0 9.692 9.692h19.385a9.692 9.692 0 0 0 9.692-9.692v-5.723l-2.4 1.384v4.339a7.249 7.249 0 0 1-7.292 7.292h-19.385a7.192 7.192 0 0 1-5.217-2.14 7.199 7.199 0 0 1-2.075-5.245v-4.153l-2.4-1.385v-.185Zm-42 4.893H78a7.249 7.249 0 0 1 7.292 7.292v19.385A7.25 7.25 0 0 1 78 161.177H58.615a7.21 7.21 0 0 1-5.184-2.108 7.209 7.209 0 0 1-2.108-5.184V134.5a7.248 7.248 0 0 1 7.292-7.292Zm-9.692 7.292a9.693 9.693 0 0 1 9.692-9.692H78a9.694 9.694 0 0 1 9.692 9.692v19.385A9.693 9.693 0 0 1 78 163.577H58.615a9.69 9.69 0 0 1-9.692-9.692V134.5ZM129.692-2.023h-19.385a7.198 7.198 0 0 0-7.292 7.292v19.385a7.25 7.25 0 0 0 7.292 7.292h19.385a7.249 7.249 0 0 0 7.292-7.292V5.269a7.249 7.249 0 0 0-7.292-7.292Zm-19.385-2.4a9.693 9.693 0 0 0-9.692 9.692v19.385a9.69 9.69 0 0 0 9.692 9.692h19.385a9.693 9.693 0 0 0 9.692-9.692V5.269a9.694 9.694 0 0 0-9.692-9.692h-19.385Zm-7.292 164.769a7.25 7.25 0 0 1 7.292-7.292h19.385a7.249 7.249 0 0 1 7.292 7.292v19.385a7.249 7.249 0 0 1-7.292 7.292h-19.385a7.207 7.207 0 0 1-5.184-2.108 7.216 7.216 0 0 1-2.108-5.184v-19.385Zm-2.4 0a9.69 9.69 0 0 1 9.692-9.692h19.385a9.692 9.692 0 0 1 9.692 9.692v19.385a9.693 9.693 0 0 1-9.692 9.692h-19.385a9.691 9.691 0 0 1-9.692-9.692v-19.385Zm80.769-136.523H162a7.206 7.206 0 0 0-5.184 2.108 7.195 7.195 0 0 0-2.109 5.184V50.5A7.25 7.25 0 0 0 162 57.792h19.384a7.25 7.25 0 0 0 7.293-7.292V31.115a7.25 7.25 0 0 0-7.293-7.292ZM162 21.423a9.691 9.691 0 0 0-9.693 9.692V50.5A9.695 9.695 0 0 0 162 60.192h19.384a9.693 9.693 0 0 0 9.693-9.692V31.115a9.695 9.695 0 0 0-9.693-9.692H162Zm19.384 105.785H162a7.186 7.186 0 0 0-5.184 2.108 7.193 7.193 0 0 0-2.109 5.184v19.385a7.25 7.25 0 0 0 7.293 7.292h19.384a7.25 7.25 0 0 0 7.293-7.292V134.5a7.249 7.249 0 0 0-7.293-7.292Zm-19.384-2.4a9.695 9.695 0 0 0-9.693 9.692v19.385a9.696 9.696 0 0 0 9.693 9.692h19.384a9.692 9.692 0 0 0 9.693-9.692V134.5a9.695 9.695 0 0 0-9.693-9.692H162ZM213.692-2.023h19.385a7.25 7.25 0 0 1 7.292 7.292v19.385a7.25 7.25 0 0 1-7.292 7.292h-19.385a7.198 7.198 0 0 1-7.292-7.292V5.269a7.249 7.249 0 0 1 7.292-7.292ZM204 5.269a9.691 9.691 0 0 1 9.692-9.692h19.385a9.693 9.693 0 0 1 9.692 9.692v19.385a9.69 9.69 0 0 1-9.692 9.692h-19.385A9.69 9.69 0 0 1 204 24.654V5.269Zm29.077 44.4h-19.385a7.198 7.198 0 0 0-7.292 7.293v19.384a7.249 7.249 0 0 0 7.292 7.292h19.385a7.25 7.25 0 0 0 7.292-7.292V56.961a7.25 7.25 0 0 0-7.292-7.292Zm-19.385-2.4A9.69 9.69 0 0 0 204 56.962v19.384a9.69 9.69 0 0 0 9.692 9.692h19.385a9.693 9.693 0 0 0 9.692-9.692V56.961a9.691 9.691 0 0 0-9.692-9.692h-19.385Zm0 54.093h19.385a7.249 7.249 0 0 1 7.292 7.292v19.384a7.25 7.25 0 0 1-7.292 7.293h-19.385a7.207 7.207 0 0 1-5.184-2.108 7.2 7.2 0 0 1-2.108-5.185v-19.384a7.248 7.248 0 0 1 7.292-7.292ZM204 108.654a9.692 9.692 0 0 1 9.692-9.692h19.385a9.694 9.694 0 0 1 9.692 9.692v19.384a9.692 9.692 0 0 1-9.692 9.693h-19.385a9.692 9.692 0 0 1-9.692-9.693v-19.384Zm29.077 44.4h-19.385a7.189 7.189 0 0 0-5.184 2.108 7.2 7.2 0 0 0-2.108 5.184v19.385a7.249 7.249 0 0 0 7.292 7.292h19.385a7.25 7.25 0 0 0 7.292-7.292v-19.385a7.25 7.25 0 0 0-7.292-7.292Zm-19.385-2.4a9.69 9.69 0 0 0-9.692 9.692v19.385a9.69 9.69 0 0 0 9.692 9.692h19.385a9.691 9.691 0 0 0 9.692-9.692v-19.385a9.69 9.69 0 0 0-9.692-9.692h-19.385Z" fill="url(#b)"/>
+    <path d="M87.231 68.5c1.385-1.846 4.154-.923 4.154 1.477v.37a6.461 6.461 0 0 0 6.462 6.46h44.307a6.461 6.461 0 0 0 6.462-6.46v-.37c0-2.308 2.769-3.416 4.154-1.477.276.37.461.923.461 1.477v.37a11.078 11.078 0 0 1-11.077 11.076H97.847a11.077 11.077 0 0 1-11.078-11.077v-.37c0-.553.185-1.107.462-1.476Zm65.539 48c.276-.369.461-.923.461-1.477v-.369a11.08 11.08 0 0 0-11.077-11.077H97.847a11.078 11.078 0 0 0-11.078 11.077v.369c0 .554.185 1.108.462 1.477 1.385 1.846 4.154.923 4.154-1.477v-.369a6.461 6.461 0 0 1 6.462-6.462h44.307a6.46 6.46 0 0 1 6.462 6.462v.369c0 2.308 2.769 3.415 4.154 1.477Z" fill="#A0AEC0" fill-opacity=".5"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M153.231 92.5a33.233 33.233 0 0 1-45.948 30.701 33.237 33.237 0 0 1-17.984-17.984A33.233 33.233 0 0 1 120 59.269 33.232 33.232 0 0 1 153.231 92.5Zm-5.262 33.877a3.963 3.963 0 0 0-4.984-.369 40.618 40.618 0 0 1-54.212-7.54 40.613 40.613 0 0 1 2.52-54.675 40.614 40.614 0 0 1 62.215 51.692c-1.108 1.569-.923 3.692.369 4.984l18.185 18.185a3.693 3.693 0 0 1 0 5.169l-.739.739a3.693 3.693 0 0 1-5.169 0l-18.185-18.185Z" fill="#A0AEC0"/>
+  </g>
   <defs>
-    <radialGradient id="a" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(103.716 25.035 85.404) scale(58.3301 137.703)">
-      <stop offset=".081" stop-color="#CBD5E0" stop-opacity="0"/>
-      <stop offset=".563" stop-color="#CBD5E0" stop-opacity=".54"/>
+    <radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 96.9231 -119.218 0 116.449 92.5)">
+      <stop stop-color="#CBD5E0" stop-opacity=".8"/>
       <stop offset="1" stop-color="#CBD5E0" stop-opacity="0"/>
     </radialGradient>
+    <clipPath id="a">
+      <path fill="#fff" transform="translate(0 .192)" d="M0 0h240v184.615H0z"/>
+    </clipPath>
   </defs>
 </svg>
diff --git a/icons/games.svg b/icons/games.svg
new file mode 100644
index 0000000000..39c01ca56d
--- /dev/null
+++ b/icons/games.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" d="M24.24 18.89v-8.582c0-.28-.072-.556-.206-.8a1.576 1.576 0 0 0-.56-.587L16.16 4.476A2.232 2.232 0 0 0 15 4.149c-.408 0-.809.113-1.161.327L6.525 8.92a1.576 1.576 0 0 0-.56.587c-.134.244-.204.52-.205.8v8.581c0 .281.071.557.205.801s.327.446.56.588l7.315 4.445c.352.214.753.327 1.16.327.408 0 .809-.113 1.161-.327l7.315-4.445c.232-.142.425-.345.559-.588.134-.244.204-.52.204-.8Z"/>
+  <path stroke="transparent" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".2" stroke-width="1.6" d="M24.24 18.89v-8.582c0-.28-.072-.556-.206-.8a1.576 1.576 0 0 0-.56-.587L16.16 4.476A2.232 2.232 0 0 0 15 4.149c-.408 0-.809.113-1.161.327L6.525 8.92a1.576 1.576 0 0 0-.56.587c-.134.244-.204.52-.205.8v8.581c0 .281.071.557.205.801s.327.446.56.588l7.315 4.445c.352.214.753.327 1.16.327.408 0 .809-.113 1.161-.327l7.315-4.445c.232-.142.425-.345.559-.588.134-.244.204-.52.204-.8Z"/>
+  <path fill="currentColor" fill-rule="evenodd" d="M6.42 8.792a.8.8 0 1 0-.838 1.364l8.618 5.293v9.602a.8.8 0 1 0 1.6 0V15.45l8.617-5.293a.8.8 0 0 0-.837-1.364L15 14.062l-8.58-5.27Z" clip-rule="evenodd"/>
+  <path fill="transparent" fill-opacity=".2" fill-rule="evenodd" d="M6.42 8.792a.8.8 0 1 0-.838 1.364l8.618 5.293v9.602a.8.8 0 1 0 1.6 0V15.45l8.617-5.293a.8.8 0 0 0-.837-1.364L15 14.062l-8.58-5.27Z" clip-rule="evenodd"/>
+  <path fill="currentColor" fill-rule="evenodd" d="M15 10.177c.638 0 1.155-.36 1.155-.804 0-.444-.517-.804-1.155-.804-.637 0-1.155.36-1.155.804 0 .444.518.804 1.155.804Zm-2.9 7.735c.497 0 .9-.54.9-1.206 0-.666-.403-1.206-.9-1.206s-.9.54-.9 1.206c0 .666.403 1.206.9 1.206Zm-3 .306c0 .666-.403 1.206-.9 1.206s-.9-.54-.9-1.206c0-.667.403-1.207.9-1.207s.9.54.9 1.207Zm8.458-.404c.496.029.93-.487.968-1.152.04-.665-.331-1.227-.828-1.256-.496-.03-.93.486-.968 1.15-.04.666.331 1.228.828 1.258Zm5.068-3.305c-.039.665-.472 1.18-.969 1.152-.496-.03-.866-.592-.828-1.257.04-.665.473-1.18.97-1.151.496.029.866.591.827 1.256Zm-5.069 7.352c.497.029.93-.487.97-1.152.038-.665-.332-1.227-.829-1.256-.496-.03-.93.486-.969 1.151-.039.665.332 1.227.828 1.257Zm5.07-3.591c-.04.665-.473 1.18-.97 1.151-.496-.029-.866-.591-.828-1.256.04-.665.473-1.18.97-1.152.496.03.866.592.827 1.257Z" clip-rule="evenodd"/>
+  <path fill="transparent" fill-opacity=".2" fill-rule="evenodd" d="M15 10.177c.638 0 1.155-.36 1.155-.804 0-.444-.517-.804-1.155-.804-.637 0-1.155.36-1.155.804 0 .444.518.804 1.155.804Zm-2.9 7.735c.497 0 .9-.54.9-1.206 0-.666-.403-1.206-.9-1.206s-.9.54-.9 1.206c0 .666.403 1.206.9 1.206Zm-3 .306c0 .666-.403 1.206-.9 1.206s-.9-.54-.9-1.206c0-.667.403-1.207.9-1.207s.9.54.9 1.207Zm8.458-.404c.496.029.93-.487.968-1.152.04-.665-.331-1.227-.828-1.256-.496-.03-.93.486-.968 1.15-.04.666.331 1.228.828 1.258Zm5.068-3.305c-.039.665-.472 1.18-.969 1.152-.496-.03-.866-.592-.828-1.257.04-.665.473-1.18.97-1.151.496.029.866.591.827 1.256Zm-5.069 7.352c.497.029.93-.487.97-1.152.038-.665-.332-1.227-.829-1.256-.496-.03-.93.486-.969 1.151-.039.665.332 1.227.828 1.257Zm5.07-3.591c-.04.665-.473 1.18-.97 1.151-.496-.029-.866-.591-.828-1.256.04-.665.473-1.18.97-1.152.496.03.866.592.827 1.257Z" clip-rule="evenodd"/>
+</svg>
diff --git a/icons/gas.svg b/icons/gas.svg
index 902b8cb3ea..4334fe93f5 100644
--- a/icons/gas.svg
+++ b/icons/gas.svg
@@ -1,3 +1,10 @@
-<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M17.5 23.75h1.25v2.5H2.5v-2.5h1.25V5A1.25 1.25 0 0 1 5 3.75h11.25A1.25 1.25 0 0 1 17.5 5v10H20a2.5 2.5 0 0 1 2.5 2.5v5a1.25 1.25 0 0 0 2.5 0v-8.75h-2.5a1.25 1.25 0 0 1-1.25-1.25V8.018l-2.071-2.072 1.767-1.767 6.188 6.187a1.244 1.244 0 0 1 .366.884V22.5a3.75 3.75 0 0 1-7.5 0v-5h-2.5v6.25Zm-11.25 0H15v-7.5H6.25v7.5Zm0-17.5v7.5H15v-7.5H6.25Z" fill="currentColor"/>
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#a)">
+    <path d="M12 17h1v2H0v-2h1V2a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v8h2a2 2 0 0 1 2 2v4a1 1 0 0 0 2 0V9h-2a1 1 0 0 1-1-1V4.414l-1.657-1.657 1.414-1.414 4.95 4.95A.996.996 0 0 1 20 7v9a3 3 0 0 1-6 0v-4h-2v5Zm-9 0h7v-6H3v6ZM3 3v6h7V3H3Z" fill="currentColor"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h20v20H0z"/>
+    </clipPath>
+  </defs>
 </svg>
diff --git a/icons/gas_xl.svg b/icons/gas_xl.svg
new file mode 100644
index 0000000000..5a3913ac16
--- /dev/null
+++ b/icons/gas_xl.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6.121 1C3.131 1 .667 3.464.667 6.455V41H26.12V28.273h3.637v7.272c0 2.99 2.464 5.455 5.454 5.455 2.99 0 5.455-2.465 5.455-5.455V17.023a5.33 5.33 0 0 0-1.591-3.807l-8.58-8.58-2.557 2.557 5.17 5.17c-1.952.832-3.352 2.756-3.352 5 0 2.99 2.465 5.455 5.455 5.455.64 0 1.243-.135 1.818-.34v13.067c0 1.03-.788 1.819-1.818 1.819a1.786 1.786 0 0 1-1.818-1.819v-7.272c0-1.989-1.648-3.637-3.636-3.637H26.12V6.455C26.12 3.465 23.656 1 20.666 1H6.12Zm0 3.636h14.546c1.03 0 1.818.789 1.818 1.819v7.272H4.303V6.455c0-1.03.788-1.819 1.818-1.819Zm29.091 10.91c1.023 0 1.818.795 1.818 1.818a1.795 1.795 0 0 1-1.818 1.818 1.795 1.795 0 0 1-1.818-1.818c0-1.023.795-1.819 1.818-1.819ZM4.303 17.364h18.182v20H4.303v-20Z" fill="currentColor" stroke="currentColor"/>
+</svg>
diff --git a/icons/gear_slim.svg b/icons/gear_slim.svg
new file mode 100644
index 0000000000..abc14e6a78
--- /dev/null
+++ b/icons/gear_slim.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.039 17.16h2.432a.608.608 0 0 0 .584-.608v-.827a.84.84 0 0 1 1.429-.608l.608.608a.608.608 0 0 0 .864 0l1.72-1.72a.61.61 0 0 0 0-.864l-.608-.608a.84.84 0 0 1 .608-1.43h.876a.608.608 0 0 0 .608-.607V8.063a.608.608 0 0 0-.608-.608h-.857a.84.84 0 0 1-.608-1.429l.608-.608a.607.607 0 0 0 0-.863l-1.721-1.721a.609.609 0 0 0-.864 0l-.608.608a.84.84 0 0 1-1.429-.608v-.876a.608.608 0 0 0-.608-.608H8.033a.608.608 0 0 0-.608.608v.845a.84.84 0 0 1-1.43.608l-.607-.608a.608.608 0 0 0-.864 0L2.834 4.53a.608.608 0 0 0 0 .864l.608.608a.84.84 0 0 1-.608 1.429h-.876a.608.608 0 0 0-.608.608v2.438a.608.608 0 0 0 .608.608h.845a.839.839 0 0 1 .608 1.43l-.608.607a.609.609 0 0 0 0 .864l1.727 1.69a.608.608 0 0 0 .864 0l.608-.608a.84.84 0 0 1 1.429.608v.876a.608.608 0 0 0 .608.608Zm1.824-1.216H8.647v-.268a2.049 2.049 0 0 0-3.503-1.447l-.188.189-.863-.864.188-.188a2.05 2.05 0 0 0-1.447-3.503h-.268V8.647h.268A2.05 2.05 0 0 0 4.28 5.144l-.188-.188.863-.864.188.189a2.05 2.05 0 0 0 3.503-1.447v-.268h1.216v.268a2.05 2.05 0 0 0 3.503 1.447l.188-.189.864.864-.189.188a2.05 2.05 0 0 0 1.447 3.503h.268v1.216h-.268a2.05 2.05 0 0 0-1.447 3.503l.189.188-.864.864-.188-.189a2.05 2.05 0 0 0-3.503 1.447v.268Zm-2.297-4.161a3.04 3.04 0 1 0 3.378-5.056 3.04 3.04 0 0 0-3.378 5.056Zm.676-4.045a1.824 1.824 0 1 1 2.027 3.034 1.824 1.824 0 0 1-2.027-3.034Z" fill="currentColor"/>
+</svg>
diff --git a/icons/heart_filled.svg b/icons/heart_filled.svg
new file mode 100644
index 0000000000..80926b1668
--- /dev/null
+++ b/icons/heart_filled.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+  <path d="m10 3.557-.555-.577c-.947-.946-2.205-.989-3.508-.97a4.876 4.876 0 0 0-3.469 1.547A5.443 5.443 0 0 0 1.001 7.22a5.46 5.46 0 0 0 1.363 3.709L10 18.5l7.636-7.58a5.46 5.46 0 0 0 1.363-3.709 5.443 5.443 0 0 0-1.467-3.664 4.876 4.876 0 0 0-3.47-1.546c-1.302-.02-2.56.023-3.507.969L10 3.557Z" fill="currentColor"/>
+</svg>
diff --git a/icons/heart_outline.svg b/icons/heart_outline.svg
new file mode 100644
index 0000000000..8bf7ce3e36
--- /dev/null
+++ b/icons/heart_outline.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 20" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.671 3.458a5.332 5.332 0 0 1 7.542 7.532l-.007.008-7.54 7.548-7.539-7.54-.007-.008a5.332 5.332 0 0 1 7.542-7.532l.002-.001.008-.007Zm1.017 1.06-1.017 1.018L9.647 4.53A3.862 3.862 0 0 0 4.18 9.983l6.485 6.484 6.485-6.493a3.863 3.863 0 0 0-5.463-5.455Z" fill="currentColor" stroke="currentColor" stroke-width=".4"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.671 3.458a5.332 5.332 0 0 1 7.542 7.532l-.007.008-7.54 7.548-7.539-7.54-.007-.008a5.332 5.332 0 0 1 7.542-7.532l.002-.001.008-.007Zm1.017 1.06-1.017 1.018L9.647 4.53A3.862 3.862 0 0 0 4.18 9.983l6.485 6.484 6.485-6.493a3.863 3.863 0 0 0-5.463-5.455Z" fill="currentColor"/>
+</svg>
diff --git a/icons/hourglass.svg b/icons/hourglass.svg
new file mode 100644
index 0000000000..7ebd6d78b2
--- /dev/null
+++ b/icons/hourglass.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15.125 6.906a1.257 1.257 0 0 0 .5-1V3.125a1.25 1.25 0 0 0-1.25-1.25h-8.75a1.25 1.25 0 0 0-1.25 1.25v2.813a1.258 1.258 0 0 0 .5 1L6.289 8l2.672 2-4.086 3.063a1.258 1.258 0 0 0-.5 1v2.812a1.25 1.25 0 0 0 1.25 1.25h8.75a1.25 1.25 0 0 0 1.25-1.25v-2.781a1.257 1.257 0 0 0-.5-1L11.039 10l1.774-1.344 2.312-1.75Zm-9.5-3.781h8.75v2.781l-.453.344H6.039l-.414-.313V3.126Zm8.75 10.969v2.781h-8.75v-2.813l3.75-2.812v1.875a.625.625 0 1 0 1.25 0v-1.867l3.75 2.836Z" fill="currentColor"/>
+</svg>
diff --git a/icons/lightning.svg b/icons/lightning.svg
index 91b1ae92ca..03fea73d75 100644
--- a/icons/lightning.svg
+++ b/icons/lightning.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-  <path fill="currentColor" d="M10.833 7.5H17.5L9.167 20v-7.5H3.333l7.5-12.5v7.5ZM9.167 9.167v-3.15l-2.89 4.816h4.556v3.662l3.553-5.328h-5.22Z"/>
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.833 7.5H17.5L9.167 20v-7.5H3.333l7.5-12.5v7.5ZM9.167 9.167v-3.15l-2.89 4.816h4.556v3.662l3.553-5.328h-5.22Z" fill="currentColor"/>
 </svg>
diff --git a/icons/lightning_navbar.svg b/icons/lightning_navbar.svg
new file mode 100644
index 0000000000..9587a9c7a2
--- /dev/null
+++ b/icons/lightning_navbar.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5.375 16v-5.006H.676L7.697 0h7.9v6l.027 10H5.374Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.72 6.01V0L2.63 10.15h4.02V16l6.66-9.99H8.72Z" fill="#ED8936"/>
+</svg>
diff --git a/icons/link_external.svg b/icons/link_external.svg
new file mode 100644
index 0000000000..dbddf710bc
--- /dev/null
+++ b/icons/link_external.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.621 4.353 5.176 9.798a.69.69 0 1 1-.974-.974l5.444-5.446H5.108a.69.69 0 0 1 0-1.378H12v6.892a.69.69 0 1 1-1.379 0V4.353Z" fill="currentColor"/>
+</svg>
diff --git a/icons/merits.svg b/icons/merits.svg
new file mode 100644
index 0000000000..91b128a2b9
--- /dev/null
+++ b/icons/merits.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" fill="none">
+  <path d="M13.229 9.946c.401 0 .727.329.727.735v.636a.731.731 0 0 1-.727.735h-.353a.731.731 0 0 0-.727.735v6.532a.731.731 0 0 1-.727.735h-.695A.731.731 0 0 1 10 19.32v-6.532c0-.406.326-.735.727-.735h.352c.402 0 .728-.33.728-.736v-.635a.73.73 0 0 1 .727-.735h.694Zm4.311 0c.402 0 .728.329.728.735v.636c0 .405.326.735.727.735h.278c.401 0 .727.329.727.735v6.532a.731.731 0 0 1-.727.735h-.695a.731.731 0 0 1-.727-.735v-6.532a.731.731 0 0 0-.727-.735h-.278a.731.731 0 0 1-.727-.736v-.635c0-.406.326-.735.727-.735h.695Zm-2.178 4.031c.402 0 .727.33.727.735v2.622a.731.731 0 0 1-.727.735h-.694a.731.731 0 0 1-.728-.735v-2.622c0-.406.326-.735.728-.735h.694Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M15.894 4.213a1.98 1.98 0 0 0-1.788 0l-8 4.044A2.024 2.024 0 0 0 5 10.065v9.87c0 .766.428 1.466 1.106 1.808l8 4.044a1.981 1.981 0 0 0 1.788 0l8-4.044A2.024 2.024 0 0 0 25 19.935v-9.87c0-.766-.428-1.466-1.106-1.808l-8-4.044ZM7 10.065l8-4.043 8 4.043v9.87l-8 4.043-8-4.043v-9.87Z" fill="currentColor"/>
+</svg>
diff --git a/icons/merits_colored.svg b/icons/merits_colored.svg
new file mode 100644
index 0000000000..4006f7e43a
--- /dev/null
+++ b/icons/merits_colored.svg
@@ -0,0 +1,15 @@
+<svg viewBox="0 0 40 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M21.787 1.923a3.574 3.574 0 0 0-3.574 0l-14.706 8.49a3.574 3.574 0 0 0-1.788 3.096v16.982c0 1.277.682 2.457 1.788 3.095l14.706 8.49a3.574 3.574 0 0 0 3.574 0l14.706-8.49a3.574 3.574 0 0 0 1.788-3.095V13.509a3.574 3.574 0 0 0-1.788-3.095l-14.706-8.49Z" fill="url(#a)" stroke="#fff" stroke-width="1.92"/>
+  <path d="M18.693 2.755a2.614 2.614 0 0 1 2.614 0l14.706 8.49a2.614 2.614 0 0 1 1.308 2.264v16.982c0 .934-.499 1.797-1.308 2.264l-14.706 8.49a2.614 2.614 0 0 1-2.614 0l-14.706-8.49a2.614 2.614 0 0 1-1.308-2.265V13.51c0-.935.499-1.798 1.308-2.265l14.706-8.49Z" fill="url(#b)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.33 15.164c0-.643-.522-1.164-1.164-1.164h-1.111c-.643 0-1.164.521-1.164 1.164v1.006c0 .642-.521 1.163-1.164 1.163h-.563c-.643 0-1.164.521-1.164 1.164v10.34c0 .642.521 1.163 1.164 1.163h1.11c.643 0 1.164-.521 1.164-1.164V18.497c0-.643.521-1.164 1.164-1.164h.564c.642 0 1.163-.52 1.163-1.163v-1.006Zm6.899 0c0-.643-.521-1.164-1.164-1.164h-1.11c-.643 0-1.164.521-1.164 1.164v1.006c0 .642.52 1.163 1.163 1.163h.444c.643 0 1.164.521 1.164 1.164v10.34c0 .642.52 1.163 1.163 1.163h1.111C27.48 30 28 29.479 28 28.836v-10.34c0-.642-.521-1.163-1.164-1.163h-.443a1.164 1.164 0 0 1-1.164-1.163v-1.006Zm-3.486 6.38c0-.642-.521-1.163-1.164-1.163h-1.11c-.643 0-1.164.521-1.164 1.164v4.149c0 .642.52 1.163 1.163 1.163h1.111c.643 0 1.164-.52 1.164-1.163v-4.15Z" fill="#fff"/>
+  <defs>
+    <linearGradient id="a" x1="20" y1="2" x2="20" y2="42" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#2C5282"/>
+      <stop offset="1" stop-color="#153967"/>
+    </linearGradient>
+    <linearGradient id="b" x1="20" y1="2" x2="20" y2="42" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#008BE4"/>
+      <stop offset="1" stop-color="#81C5F1"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/icons/merits_slim.svg b/icons/merits_slim.svg
new file mode 100644
index 0000000000..8a0623a169
--- /dev/null
+++ b/icons/merits_slim.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M10.229 6.946c.401 0 .727.329.727.735v.636a.731.731 0 0 1-.727.735h-.353a.731.731 0 0 0-.727.735v6.532a.731.731 0 0 1-.727.735h-.695A.731.731 0 0 1 7 16.32V9.787c0-.406.326-.735.727-.735h.353c.401 0 .727-.33.727-.736v-.635a.73.73 0 0 1 .727-.735h.694Zm4.311 0a.73.73 0 0 1 .728.735v.635c0 .407.326.736.727.736h.278c.401 0 .727.329.727.735v6.532a.731.731 0 0 1-.727.735h-.695a.731.731 0 0 1-.727-.735V9.787a.731.731 0 0 0-.727-.735h-.278a.731.731 0 0 1-.727-.735V7.68c0-.406.326-.735.727-.735h.695Zm-2.178 4.031c.402 0 .727.33.727.735v2.622a.731.731 0 0 1-.727.735h-.694a.731.731 0 0 1-.728-.736v-2.62c0-.407.326-.736.728-.736h.694Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.894 1.213a1.98 1.98 0 0 0-1.788 0l-8 4.044A2.024 2.024 0 0 0 2 7.065v9.87c0 .766.428 1.466 1.106 1.808l8 4.044a1.981 1.981 0 0 0 1.788 0l8-4.044A2.024 2.024 0 0 0 22 16.935v-9.87c0-.766-.428-1.466-1.106-1.808l-8-4.044ZM4 7.065l8-4.043 8 4.043v9.87l-8 4.043-8-4.043v-9.87Z" fill="currentColor"/>
+</svg>
diff --git a/icons/merits_with_dot.svg b/icons/merits_with_dot.svg
new file mode 100644
index 0000000000..e216115e4e
--- /dev/null
+++ b/icons/merits_with_dot.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="m19.133 5.85-3.239-1.637a1.98 1.98 0 0 0-1.788 0l-8 4.044A2.024 2.024 0 0 0 5 10.065v9.87c0 .766.428 1.466 1.106 1.808l8 4.044a1.981 1.981 0 0 0 1.788 0l8-4.044A2.024 2.024 0 0 0 25 19.935V11.9a5.022 5.022 0 0 1-2 0v8.035l-8 4.043-8-4.043v-9.87l8-4.043 4.123 2.083a5.02 5.02 0 0 1 .01-2.255Zm-5.177 4.83a.731.731 0 0 0-.727-.734h-.695a.731.731 0 0 0-.727.735v.636a.731.731 0 0 1-.728.735h-.352a.731.731 0 0 0-.727.735v6.532c0 .406.326.735.727.735h.695a.731.731 0 0 0 .727-.735v-6.532c0-.406.326-.735.727-.735h.353c.401 0 .727-.33.727-.736v-.635Zm4.312 0a.731.731 0 0 0-.727-.734h-.695a.731.731 0 0 0-.727.735v.636c0 .406.326.735.727.735h.278a.73.73 0 0 1 .727.735v6.532c0 .406.326.735.727.735h.695a.731.731 0 0 0 .727-.735v-6.532a.731.731 0 0 0-.727-.735h-.278a.731.731 0 0 1-.727-.736v-.635Zm-2.906 3.297c.402 0 .727.33.727.735v2.622a.731.731 0 0 1-.727.735h-.694a.731.731 0 0 1-.728-.735v-2.622c0-.406.326-.735.728-.735h.694Z" fill="currentColor"/>
+  <circle cx="24" cy="7" r="3" fill="#E53E3E"/>
+</svg>
diff --git a/icons/merits_with_dot_slim.svg b/icons/merits_with_dot_slim.svg
new file mode 100644
index 0000000000..4b5bf8a0aa
--- /dev/null
+++ b/icons/merits_with_dot_slim.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="m16.133 2.85-3.239-1.637a1.98 1.98 0 0 0-1.788 0l-8 4.044A2.024 2.024 0 0 0 2 7.065v9.87c0 .766.428 1.466 1.106 1.808l8 4.044a1.981 1.981 0 0 0 1.788 0l8-4.044A2.024 2.024 0 0 0 22 16.935V8.9a5.022 5.022 0 0 1-2 0v8.035l-8 4.043-8-4.043v-9.87l8-4.043 4.123 2.083a5.02 5.02 0 0 1 .01-2.255Zm-5.177 4.83a.731.731 0 0 0-.727-.734h-.695a.731.731 0 0 0-.727.735v.635a.731.731 0 0 1-.727.736h-.353A.731.731 0 0 0 7 9.787v6.532c0 .406.326.735.727.735h.695a.731.731 0 0 0 .727-.735V9.787c0-.406.326-.735.727-.735h.353c.401 0 .727-.33.727-.735V7.68Zm4.312 0a.731.731 0 0 0-.727-.734h-.695a.731.731 0 0 0-.727.735v.636c0 .406.326.735.727.735h.278c.401 0 .727.329.727.735v6.532c0 .406.326.735.727.735h.695a.731.731 0 0 0 .727-.735V9.787a.731.731 0 0 0-.727-.735h-.278a.731.731 0 0 1-.727-.736v-.635Zm-2.906 3.297c.402 0 .727.33.727.735v2.622a.731.731 0 0 1-.727.735h-.694a.731.731 0 0 1-.728-.736v-2.62c0-.407.326-.736.728-.736h.694Z" fill="currentColor"/>
+  <circle cx="21" cy="4" r="3" fill="#E53E3E"/>
+</svg>
diff --git a/icons/open-link.svg b/icons/open-link.svg
new file mode 100644
index 0000000000..d0fcc28ab4
--- /dev/null
+++ b/icons/open-link.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.16 3A2.16 2.16 0 0 0 3 5.16v10.18a2.16 2.16 0 0 0 2.16 2.16h10.18a2.16 2.16 0 0 0 2.16-2.16v-3.272h-1.614v3.114a.704.704 0 0 1-.704.704H5.318a.705.705 0 0 1-.704-.704V5.318c0-.389.315-.704.704-.704h3.114V3H5.159Zm6.135 0a.41.41 0 0 0-.41.41v.793a.41.41 0 0 0 .41.409h3.453l-4.244 4.245a.409.409 0 0 0 0 .578l.56.561c.16.16.42.16.58 0l4.244-4.245v3.454c0 .226.183.41.41.41h.793a.41.41 0 0 0 .409-.41V3h-6.205Z" fill="currentColor"/>
+</svg>
diff --git a/icons/payment_link.svg b/icons/payment_link.svg
new file mode 100644
index 0000000000..f97128fff6
--- /dev/null
+++ b/icons/payment_link.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.603 2.425A5.072 5.072 0 0 1 19.2 6.034a5.08 5.08 0 0 1-1.423 3.571l-.012.012-2.202 2.204c.21-.479.325-1.047.325-1.718 0-.474-.057-.896-.165-1.272l.62-.62A3.08 3.08 0 0 0 14.154 3a3.072 3.072 0 0 0-2.156.859l-1.396 1.389a1 1 0 0 1-1.41-1.418l1.4-1.394.01-.01Zm-5.96 5.95-2.207 2.209-.012.012A5.079 5.079 0 0 0 6.03 19.2c1.33.011 2.612-.5 3.569-1.425l.012-.013 1.393-1.394a1 1 0 0 0-1.414-1.414l-1.387 1.388A3.072 3.072 0 0 1 3 14.15a3.08 3.08 0 0 1 .858-2.16l.62-.62a4.617 4.617 0 0 1-.163-1.268c0-.676.115-1.247.328-1.727Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.308 12.49v-1.173h2.863a.247.247 0 0 0 .184-.086.313.313 0 0 0 .076-.207.313.313 0 0 0-.076-.207.247.247 0 0 0-.184-.086H9.089c-.346 0-.677-.155-.92-.43a1.564 1.564 0 0 1-.382-1.036c0-.388.137-.76.381-1.036.244-.275.575-.429.92-.429h.521V6.628h1.041V7.8h1.302v1.172H9.088a.246.246 0 0 0-.184.086.313.313 0 0 0-.076.207c0 .078.028.153.076.208a.246.246 0 0 0 .184.085h2.083c.345 0 .676.155.92.43.244.274.381.647.381 1.036 0 .388-.137.761-.381 1.036s-.575.43-.92.43h-.52v1.171H9.608V12.49h-1.3Z" fill="currentColor"/>
+</svg>
diff --git a/icons/private_tags_slim.svg b/icons/private_tags_slim.svg
new file mode 100644
index 0000000000..538c47d054
--- /dev/null
+++ b/icons/private_tags_slim.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.605 21a2.26 2.26 0 0 1-1.614-.665l-6.314-6.318a2.266 2.266 0 0 1 0-3.23l8.45-8.457C10.888 1.57 12.265 1 13.31 1h5.412C19.956 1 21 2.045 21 3.28v5.416c0 .403-.085.856-.233 1.304H19.18c.208-.443.348-.944.348-1.352V3.233a.851.851 0 0 0-.854-.855h-5.365v.047c-.665 0-1.71.428-2.184.903l-8.451 8.456a.832.832 0 0 0 0 1.188l6.314 6.318c.332.332.902.332 1.187 0l1.818-1.82v2.09l-.773.775A2.26 2.26 0 0 1 9.605 21Z" fill="currentColor"/>
+  <path d="m7.991 20.335-.177.177.177-.177Zm-6.314-6.318.176-.177-.176.177Zm0-3.23.176.176-.176-.177Zm8.45-8.457-.176-.177.177.177ZM20.768 10v.25h.181l.057-.172-.238-.078Zm-1.587 0-.226-.106-.168.356h.394V10ZM13.31 2.378v-.25h-.25v.25h.25Zm0 .047v.25h.25v-.25h-.25Zm-2.184.903-.177-.177.177.177Zm-8.451 8.456.176.177-.176-.177Zm0 1.188-.177.176.177-.176Zm6.314 6.318-.177.177.177-.177Zm1.187 0-.177-.177-.007.007-.006.007.19.163Zm1.818-1.82h.25v-.604l-.426.428.176.176Zm0 2.09.177.177.073-.073v-.103h-.25Zm-.773.775.176.177-.176-.177Zm-3.406.177a2.51 2.51 0 0 0 1.791.738v-.5a2.01 2.01 0 0 1-1.437-.592l-.354.354ZM1.5 14.193l6.314 6.319.354-.354-6.315-6.318-.353.353Zm0-3.583c-1 1-1 2.583 0 3.583l.353-.353a2.016 2.016 0 0 1 0-2.877L1.5 10.61Zm8.45-8.457L1.5 10.61l.353.353 8.451-8.456-.353-.354ZM13.31.75c-.564 0-1.202.153-1.794.4-.592.246-1.156.595-1.564 1.003l.353.354c.352-.352.856-.668 1.403-.896.548-.229 1.12-.361 1.602-.361v-.5Zm5.412 0H13.31v.5h5.412v-.5Zm2.529 2.53c0-1.373-1.156-2.53-2.529-2.53v.5c1.096 0 2.029.933 2.029 2.03h.5Zm0 5.416V3.28h-.5v5.416h.5Zm-.245 1.382c.154-.466.245-.946.245-1.382h-.5c0 .37-.078.797-.22 1.226l.475.156Zm-1.825.172h1.587v-.5H19.18v.5Zm.098-1.602c0 .36-.126.823-.324 1.246l.452.213c.218-.464.372-1.002.372-1.459h-.5Zm0-5.415v5.415h.5V3.233h-.5Zm-.604-.605c.336 0 .604.268.604.605h.5a1.1 1.1 0 0 0-1.104-1.105v.5Zm-5.365 0h5.365v-.5H13.31v.5Zm.25-.203v-.047h-.5v.047h.5Zm-2.257 1.08c.205-.206.552-.416.939-.576.386-.159.78-.254 1.068-.254v-.5c-.377 0-.839.119-1.259.292-.42.173-.833.414-1.102.684l.354.354ZM2.85 11.96l8.452-8.456-.354-.354-8.451 8.456.353.354Zm0 .834a.582.582 0 0 1 0-.834l-.353-.354c-.43.43-.43 1.111 0 1.541l.353-.353Zm6.315 6.318L2.85 12.795l-.353.353 6.314 6.319.354-.354Zm.82.014c-.178.208-.577.23-.82-.014l-.354.354c.422.422 1.162.443 1.554-.015l-.38-.325Zm1.832-1.833-1.819 1.82.354.352 1.818-1.819-.353-.353Zm.426 2.267v-2.09h-.5v2.09h.5Zm-.847.95.774-.774-.353-.353-.774.774.353.354Zm-1.79.739a2.51 2.51 0 0 0 1.79-.738l-.353-.354a2.01 2.01 0 0 1-1.438.592v.5ZM20.988 20v-5c0-.55-.45-1-1-1h-5.996c-.55 0-1 .45-1 1v5c0 .55.45 1 1 1h5.996c.55 0 1-.45 1-1Zm-2.998-2.5c0 .55-.45 1-1 1s-1-.45-1-1 .45-1 1-1 1 .45 1 1Z" fill="currentColor"/>
+  <path d="M19.489 16v-2.5c0-1.4-1.1-2.5-2.499-2.5s-2.498 1.1-2.498 2.5V16" stroke="currentColor" stroke-opacity=".8" stroke-miterlimit="10"/>
+</svg>
diff --git a/icons/refresh.svg b/icons/refresh.svg
new file mode 100644
index 0000000000..fef0346a50
--- /dev/null
+++ b/icons/refresh.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.396 2.285a8.837 8.837 0 0 1 13.173 6.436.9.9 0 1 1-1.783.247A7.037 7.037 0 0 0 4.105 5.826a.1.1 0 0 0 .081.159H5.92a.9.9 0 1 1 0 1.8H2a.9.9 0 0 1-.9-.9v-3.92a.9.9 0 0 1 1.8 0v1.192a.1.1 0 0 0 .176.065 8.836 8.836 0 0 1 2.32-1.937Zm2.563 7.54a1.88 1.88 0 1 1 3.76 0 1.88 1.88 0 0 1-3.76 0Zm-6.083.088a.9.9 0 0 1 1.015.767 7.037 7.037 0 0 0 12.682 3.142.1.1 0 0 0-.082-.158h-1.733a.9.9 0 1 1 0-1.8h3.41a.93.93 0 0 1 .04 0h.47a.9.9 0 0 1 .9.9v3.92a.9.9 0 1 1-1.8 0V15.49a.1.1 0 0 0-.177-.064 8.834 8.834 0 0 1-12.958.564 8.837 8.837 0 0 1-2.534-5.063.9.9 0 0 1 .767-1.015Zm7.983-.088V9.82l-.002-.005a.019.019 0 0 0-.004-.006.019.019 0 0 0-.006-.004h-.002l-.004-.001h-.006l-.005.001a.019.019 0 0 0-.006.004.019.019 0 0 0-.004.006.028.028 0 0 0-.001.005v.003l.04.001Z" fill="currentColor"/>
+</svg>
diff --git a/icons/repeat_arrow.svg b/icons/repeat.svg
similarity index 100%
rename from icons/repeat_arrow.svg
rename to icons/repeat.svg
diff --git a/icons/rocket_xl.svg b/icons/rocket_xl.svg
new file mode 100644
index 0000000000..8b3f4ccdbf
--- /dev/null
+++ b/icons/rocket_xl.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M26.05 8.552c3.799-3.798 7.474-4.099 9.352-3.954.145 1.878-.156 5.553-3.954 9.352l-11.32 11.32-5.398-5.398 9.163-9.162.008-.01 2.15-2.148ZM22.817 5.32l-1.484 1.483H9.94a3.81 3.81 0 0 0-2.656 1.132l-6.166 6.147-.003.003a3.81 3.81 0 0 0 1.95 6.43h.002l7.302 1.464 7.653 7.653 1.463 7.301v.003a3.812 3.812 0 0 0 6.43 1.95l6.151-6.169a3.81 3.81 0 0 0 1.132-2.656V18.667l1.483-1.484C40.216 11.65 40.24 5.961 39.863 3.36A3.773 3.773 0 0 0 36.641.137c-2.602-.376-8.29-.353-13.824 5.182ZM5.358 16.31l5.388 1.08 6.015-6.015h-6.452l-4.95 4.935ZM22.61 29.255l1.08 5.387 4.935-4.951v-6.452l-6.015 6.015Zm-13.608-.278a2.286 2.286 0 1 0-2.29-3.958c-3.224 1.866-4.709 5.062-5.404 7.487a19.116 19.116 0 0 0-.697 4.184 11.72 11.72 0 0 0-.012.38v.044l2.286.001H.598a2.286 2.286 0 0 0 2.287 2.287v-2.287l.001 2.287h.045a9.419 9.419 0 0 0 .38-.013 19.11 19.11 0 0 0 4.184-.698c2.424-.694 5.62-2.179 7.486-5.404a2.286 2.286 0 0 0-3.958-2.29c-1.012 1.749-2.874 2.75-4.788 3.299-.244.07-.483.13-.714.183.053-.23.113-.47.183-.714.549-1.914 1.55-3.776 3.298-4.788Z" fill="currentColor"/>
+</svg>
diff --git a/icons/share.svg b/icons/share.svg
new file mode 100644
index 0000000000..f1124e47d0
--- /dev/null
+++ b/icons/share.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 15 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.502 11.242a2.491 2.491 0 0 0-1.802.77L4.919 8.758c.112-.42.112-.863 0-1.284L10.7 4.222a2.492 2.492 0 1 0-.614-1.088L4.303 6.386a2.5 2.5 0 1 0 0 3.461l5.781 3.253a2.5 2.5 0 1 0 2.417-1.858Z" fill="currentColor"/>
+</svg>
diff --git a/icons/sign_out.svg b/icons/sign_out.svg
new file mode 100644
index 0000000000..d5b68ecdab
--- /dev/null
+++ b/icons/sign_out.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M19.916 9.556c-.111-.111-.111-.223-.222-.334L16.356 5.89a1.077 1.077 0 0 0-1.558 0 1.073 1.073 0 0 0 0 1.556l1.446 1.444h-5.118c-.667 0-1.112.444-1.112 1.111s.445 1.111 1.112 1.111h5.118l-1.446 1.445a1.073 1.073 0 0 0 0 1.555c.223.222.556.334.779.334.223 0 .556-.112.779-.334l3.338-3.333c.111-.111.222-.222.222-.333a1.225 1.225 0 0 0 0-.89Z" fill="currentColor"/>
+  <path d="M13.908 16.778a8.135 8.135 0 0 1-3.894 1c-4.34 0-7.789-3.445-7.789-7.778s3.45-7.778 7.789-7.778c1.335 0 2.67.334 3.894 1 .556.334 1.224.111 1.558-.444.334-.556.111-1.222-.445-1.556C13.463.444 11.794 0 10.014 0A9.965 9.965 0 0 0 0 10c0 5.556 4.45 10 10.014 10a9.94 9.94 0 0 0 5.007-1.333c.556-.334.667-1 .445-1.556-.334-.444-1.002-.667-1.558-.333Z" fill="currentColor"/>
+</svg>
diff --git a/icons/social/canny.svg b/icons/social/canny.svg
deleted file mode 100644
index 8041cd2bf3..0000000000
--- a/icons/social/canny.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M17.283 14.602a1.13 1.13 0 0 1 1.231-1.024c.62.057 1.081.608 1.024 1.231a7.455 7.455 0 0 1-7.465 6.79c-4.143 0-7.513-3.357-7.513-7.482V9.883c0-4.126 3.37-7.483 7.513-7.483 3.84 0 7.125 2.981 7.48 6.79a1.132 1.132 0 1 1-2.255.208c-.247-2.653-2.542-4.734-5.225-4.734-2.89 0-5.245 2.343-5.245 5.219v4.234c0 2.879 2.351 5.218 5.245 5.218 2.677 0 4.966-2.077 5.21-4.733ZM8.763 9a3.447 3.447 0 0 1 3.32-2.55c1.562 0 2.93 1.05 3.32 2.559a1.135 1.135 0 0 1-.81 1.382 1.135 1.135 0 0 1-1.382-.81 1.165 1.165 0 0 0-1.132-.867c-.527 0-.99.358-1.129.873a1.133 1.133 0 0 1-1.385.8A1.132 1.132 0 0 1 8.764 9Z" fill="currentColor"/>
-</svg>
diff --git a/icons/social/tweet.svg b/icons/social/tweet.svg
deleted file mode 100644
index 20cc63ccc6..0000000000
--- a/icons/social/tweet.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.067 3.928A9.984 9.984 0 0 0 10.997 1 9.983 9.983 0 0 0 3.93 3.928 9.973 9.973 0 0 0 1 11.003a9.969 9.969 0 0 0 2.929 7.069A9.983 9.983 0 0 0 10.998 21a9.984 9.984 0 0 0 7.069-2.928 9.97 9.97 0 0 0 2.928-7.07 9.974 9.974 0 0 0-2.928-7.074Zm-.554 13.59a9.187 9.187 0 0 1-6.516 2.702 9.187 9.187 0 0 1-6.515-2.702 9.175 9.175 0 0 1-2.701-6.515 9.178 9.178 0 0 1 2.7-6.521 9.182 9.182 0 0 1 6.517-2.696 9.181 9.181 0 0 1 6.515 2.696 9.177 9.177 0 0 1 2.701 6.52c0 2.542-1.03 4.85-2.701 6.516Z" fill="currentColor" stroke="currentColor"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M15.825 7.067c-.404.238-.858.41-1.334.504a2.088 2.088 0 0 0-1.534-.654c-1.151 0-2.093.925-2.093 2.06 0 .166.028.32.061.47a5.945 5.945 0 0 1-4.318-2.153c-.177.31-.287.659-.287 1.035 0 .72.411 1.35.965 1.716-.343-.005-.703-.1-.911-.255v.028c0 .266.014.51.108.742a2.062 2.062 0 0 0 1.522 1.273 2.12 2.12 0 0 1-.563.078 1.91 1.91 0 0 1-.397-.045 2.109 2.109 0 0 0 1.952 1.44c-.72.553-1.618.88-2.598.88-.171 0-.332-.011-.504-.028.93.581 2.031.925 3.21.925 3.272 0 5.283-2.265 5.808-4.617.095-.42.129-.836.129-1.246v-.265a4.167 4.167 0 0 0 1.05-1.069 4.43 4.43 0 0 1-1.196.327c.437-.26.774-.659.93-1.146Z" fill="currentColor"/>
-</svg>
diff --git a/icons/social/twitter.svg b/icons/social/twitter.svg
new file mode 100644
index 0000000000..21e9812ff7
--- /dev/null
+++ b/icons/social/twitter.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m4.044 4 6.95 9.292L4 20.847h1.574l6.123-6.614 4.947 6.614H22l-7.34-9.815L21.168 4h-1.574l-5.639 6.092L9.4 4H4.044Zm2.315 1.16h2.46l10.866 14.528h-2.46L6.358 5.159Z" fill="currentColor"/>
+</svg>
diff --git a/icons/social/twitter_filled.svg b/icons/social/twitter_filled.svg
index 5fc356a969..0d73b850a0 100644
--- a/icons/social/twitter_filled.svg
+++ b/icons/social/twitter_filled.svg
@@ -1,3 +1,3 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.005 22c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10Zm5.011-12.322c.483-.35.894-.774 1.234-1.27a4.938 4.938 0 0 1-1.416.38 2.39 2.39 0 0 0 1.081-1.355 4.823 4.823 0 0 1-1.56.593 2.371 2.371 0 0 0-1.798-.776c-.68 0-1.26.24-1.74.72a2.37 2.37 0 0 0-.72 1.739c0 .182.021.37.062.563a6.855 6.855 0 0 1-2.83-.757 6.971 6.971 0 0 1-2.241-1.816 2.4 2.4 0 0 0-.335 1.24 2.456 2.456 0 0 0 1.096 2.048 2.44 2.44 0 0 1-1.112-.312v.031c0 .594.187 1.115.56 1.564.373.45.844.732 1.412.849a2.542 2.542 0 0 1-.647.084c-.142 0-.297-.013-.464-.038.157.492.446.897.868 1.214a2.4 2.4 0 0 0 1.431.49 4.816 4.816 0 0 1-3.053 1.051c-.218 0-.416-.01-.594-.03a6.83 6.83 0 0 0 3.777 1.104 7.19 7.19 0 0 0 2.459-.415c.766-.277 1.421-.647 1.964-1.112a7.434 7.434 0 0 0 1.405-1.602 7.138 7.138 0 0 0 .88-1.892 6.983 6.983 0 0 0 .282-2.295Z" fill="currentColor"/>
+<svg viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M13 2C7.477 2 3 6.477 3 12s4.477 10 10 10 10-4.477 10-10S18.523 2 13 2Zm-1.338 10.619L7.03 6h3.57l3.037 4.34L17.398 6h1.049l-4.34 5.009L19 18h-3.57l-3.299-4.711L8.05 18H7l4.662-5.381Zm-1.45-5.793h-1.64l7.244 10.348h1.64L10.214 6.826Z" fill="currentColor"/>
 </svg>
diff --git a/icons/star_filled.svg b/icons/star_filled.svg
index 10a3cfb0c8..7b6312c876 100644
--- a/icons/star_filled.svg
+++ b/icons/star_filled.svg
@@ -1,3 +1,3 @@
-<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M13.76 17.333a.603.603 0 0 1-.294-.075L9 14.798l-4.467 2.46a.606.606 0 0 1-.663-.051.657.657 0 0 1-.213-.285.69.69 0 0 1-.038-.36l.854-5.21-3.616-3.69a.69.69 0 0 1-.16-.677.663.663 0 0 1 .194-.301c.09-.08.2-.131.316-.149l4.994-.76 2.234-4.74a.65.65 0 0 1 .232-.269.61.61 0 0 1 .666 0c.1.065.18.158.233.269l2.233 4.74 4.994.76c.117.018.226.07.316.149a.66.66 0 0 1 .193.3.69.69 0 0 1-.16.678l-3.614 3.69.853 5.21a.692.692 0 0 1-.14.537.634.634 0 0 1-.216.173.605.605 0 0 1-.265.061Z" fill="currentColor"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+  <path d="M15.713 20a.724.724 0 0 1-.354-.09L10 16.956 4.64 19.91a.728.728 0 0 1-.796-.061.788.788 0 0 1-.256-.342.827.827 0 0 1-.045-.432l1.024-6.252L.229 8.394a.802.802 0 0 1-.207-.377.829.829 0 0 1 .015-.435.795.795 0 0 1 .232-.361.741.741 0 0 1 .379-.179L6.64 6.13 9.321.442a.78.78 0 0 1 .28-.323.731.731 0 0 1 .798 0 .78.78 0 0 1 .28.323l2.68 5.688 5.993.912a.74.74 0 0 1 .379.178.8.8 0 0 1 .232.361.828.828 0 0 1-.192.813l-4.338 4.428 1.024 6.252a.83.83 0 0 1-.167.644.762.762 0 0 1-.26.208.728.728 0 0 1-.319.074h.002Z" fill="currentColor"/>
 </svg>
diff --git a/icons/star_outline.svg b/icons/star_outline.svg
index e6fd05339c..05286fa1d5 100644
--- a/icons/star_outline.svg
+++ b/icons/star_outline.svg
@@ -1,3 +1,3 @@
-<svg viewBox="0 0 18 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.76 17.333a.604.604 0 0 1-.294-.075l.293.075Zm.004 0a.625.625 0 0 0 .477-.234.671.671 0 0 0 .14-.538l-.853-5.21 3.615-3.689a.69.69 0 0 0 .16-.677.663.663 0 0 0-.194-.301.617.617 0 0 0-.316-.149l-4.884-.743a.208.208 0 0 1-.157-.117l-2.186-4.64a.65.65 0 0 0-.233-.269.61.61 0 0 0-.666 0 .65.65 0 0 0-.232.269l-2.186 4.64a.208.208 0 0 1-.158.117l-4.884.743a.618.618 0 0 0-.316.149.663.663 0 0 0-.193.3.69.69 0 0 0 .16.678l3.54 3.614a.208.208 0 0 1 .058.18l-.837 5.105a.69.69 0 0 0 .038.36.657.657 0 0 0 .213.286.613.613 0 0 0 .663.05L8.9 14.854a.208.208 0 0 1 .2 0l4.366 2.405m-7.795-2.915c-.028.172.154.3.307.216L8.9 12.95a.208.208 0 0 1 .2 0l2.923 1.61a.208.208 0 0 0 .306-.216l-.566-3.452a.208.208 0 0 1 .057-.18l2.486-2.536a.208.208 0 0 0-.118-.351l-3.408-.519a.208.208 0 0 1-.157-.117L9.189 4.145a.208.208 0 0 0-.377 0L7.378 7.19a.208.208 0 0 1-.158.117l-3.408.519a.208.208 0 0 0-.117.351l2.485 2.537a.208.208 0 0 1 .057.18l-.566 3.45Zm8.093 2.99h-.003.003Z"/>
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M15.711 20a.724.724 0 0 1-.352-.09Zm.005 0a.73.73 0 0 0 .314-.074.77.77 0 0 0 .26-.208.806.806 0 0 0 .167-.644l-1.024-6.252 4.338-4.428a.828.828 0 0 0 .192-.813.796.796 0 0 0-.232-.36.74.74 0 0 0-.38-.179l-5.86-.892a.25.25 0 0 1-.19-.14L10.679.442A.78.78 0 0 0 10.4.119a.732.732 0 0 0-.798 0 .78.78 0 0 0-.28.323L6.699 6.01a.25.25 0 0 1-.188.14l-5.862.892a.741.741 0 0 0-.38.179.795.795 0 0 0-.231.36.829.829 0 0 0-.015.436.802.802 0 0 0 .207.377l4.25 4.338a.25.25 0 0 1 .068.215l-1.004 6.127a.827.827 0 0 0 .045.432.788.788 0 0 0 .256.342.728.728 0 0 0 .796.061l5.24-2.886a.25.25 0 0 1 .24 0l5.24 2.886m-9.354-3.497a.25.25 0 0 0 .367.26L9.88 14.74a.25.25 0 0 1 .24 0l3.507 1.932a.25.25 0 0 0 .367-.26l-.678-4.141a.25.25 0 0 1 .068-.216l2.982-3.043a.25.25 0 0 0-.14-.423l-4.09-.622a.25.25 0 0 1-.189-.14l-1.72-3.653a.25.25 0 0 0-.453 0L8.053 7.826a.25.25 0 0 1-.189.141l-4.09.622a.25.25 0 0 0-.14.423l2.982 3.043a.25.25 0 0 1 .068.216l-.678 4.14ZM15.716 20h-.003Z" fill="currentColor"/>
 </svg>
diff --git a/icons/status/pending.svg b/icons/status/pending.svg
index a8c19c187b..f9e5a88d53 100644
--- a/icons/status/pending.svg
+++ b/icons/status/pending.svg
@@ -1,4 +1,5 @@
-<svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="5" cy="5" r="5" fill="#D9DBE0"/>
-  <circle cx="5" cy="5" r="2.5" fill="#707886"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 11" fill="none">
+  <circle cx="5" cy="5.438" r="5" fill="#E2E8F0"/>
+  <circle cx="5" cy="5.438" r="2.5" fill="#4A5568"/>
+  <circle cx="5" cy="5.438" r="2.5" fill="#000" fill-opacity=".2"/>
 </svg>
diff --git a/icons/swap.svg b/icons/swap.svg
new file mode 100644
index 0000000000..c1566be5fc
--- /dev/null
+++ b/icons/swap.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.944 10.007c0 .58-.406.967-1.015.967-.609 0-1.015-.386-.913-.773 0-4.835 4.06-8.703 9.136-8.703h1.218c.102 0 .204.025.305.049s.203.048.304.048c.305.097.711.193 1.117.29.09.043.178.066.259.088.103.027.192.051.249.106h.101c.153.096.305.169.457.241.152.073.305.145.457.242.082.052.156.097.225.138.188.114.337.204.486.345.101 0 .203.097.304.194h.102c.203.097.507.387.71.58l-.304-1.644a1.007 1.007 0 0 1 .812-1.16c.61-.097 1.117.29 1.218.773l.812 3.965a1.007 1.007 0 0 1-.812 1.16l-4.264.774h-.203c-.507 0-.913-.29-1.015-.774a1.006 1.006 0 0 1 .812-1.16l1.828-.29-.203-.194a.913.913 0 0 1-.311-.277 1.259 1.259 0 0 0-.096-.11c-.05-.048-.101-.072-.152-.096-.05-.024-.101-.048-.152-.097a.534.534 0 0 0-.152-.096.534.534 0 0 1-.153-.097c-.609-.484-1.32-.774-2.03-.967a.373.373 0 0 1-.152-.048.366.366 0 0 0-.152-.049.783.783 0 0 1-.254-.048.783.783 0 0 0-.254-.048c-.203-.097-.305-.097-.508-.097h-.71c-3.96 0-7.107 2.997-7.107 6.768Zm14.112 0c0-.58.406-.966 1.015-.966.508 0 1.015.386.914.87 0 4.835-4.06 8.702-9.137 8.702H8.63c-.102 0-.203-.024-.305-.048a1.336 1.336 0 0 0-.304-.048c-.305-.097-.71-.194-1.117-.29a1.458 1.458 0 0 0-.258-.088c-.103-.028-.192-.052-.25-.106h-.101a4.445 4.445 0 0 0-.198-.116c-.234-.133-.455-.258-.614-.56-.305-.097-.508-.194-.71-.387-.102 0-.204-.097-.305-.194h-.102a4.366 4.366 0 0 0-.355-.29 4.347 4.347 0 0 1-.355-.29l.304 1.644A1.007 1.007 0 0 1 3.148 19h-.203c-.508 0-.914-.29-1.015-.773l-.812-4.062c0-.193.101-.483.203-.676a.686.686 0 0 1 .609-.387l.812-.194 3.35-.58c.61-.096 1.117.29 1.218.774a1.007 1.007 0 0 1-.812 1.16l-1.827.29.203.194c.101.096.304.29.507.386.102 0 .203.097.305.194 0 .06.039.082.092.114.033.02.072.042.11.08.61.386 1.32.773 2.031.966.051 0 .102.024.153.048.05.025.101.049.152.049.101 0 .178.024.254.048a.783.783 0 0 0 .253.048c.203.097.305.097.508.097h.71c3.96 0 7.107-2.997 7.107-6.768Z" fill="currentColor"/>
+</svg>
diff --git a/icons/token-transfers.svg b/icons/token-transfers.svg
new file mode 100644
index 0000000000..f3bef44d80
--- /dev/null
+++ b/icons/token-transfers.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30">
+  <path fill="currentColor" fill-rule="evenodd" d="m6.134 10.067 3.722-3.828a.97.97 0 0 1 1.337.06c.177.182.283.428.292.69a1.05 1.05 0 0 1-.234.704L9.243 9.765h14.371c.261 0 .513.107.7.299s.294.454.294.73c0 .274-.107.537-.294.729a.98.98 0 0 1-.7.299H6.831a.97.97 0 0 1-.55-.17 1 1 0 0 1-.368-.46 1.06 1.06 0 0 1 .22-1.126m18.723 6a.965.965 0 0 1 .55.17c.163.111.291.27.368.459a1.06 1.06 0 0 1-.22 1.125l-3.737 3.842-.006.008a1 1 0 0 1-.323.255.97.97 0 0 1-1.13-.197q-.146-.152-.224-.353a1.06 1.06 0 0 1 .281-1.16l.007-.007 2.022-2.086h-5.882c.104-.685.184-1.404 0-2.073z" clip-rule="evenodd"/>
+  <path fill="currentColor" d="M10 19.513c-1.272 0-2.48-.276-3.395-.778C5.57 18.169 5 17.374 5 16.497c0-.878.57-1.672 1.605-2.239.917-.502 2.123-.778 3.395-.778s2.48.276 3.395.778C14.43 14.825 15 15.622 15 16.497s-.57 1.671-1.605 2.238c-.917.502-2.123.778-3.395.778m0-4.793c-1.052 0-2.073.228-2.8.626-.61.334-.96.753-.96 1.15 0 .398.35.818.96 1.151.727.397 1.746.626 2.8.626s2.073-.228 2.8-.626c.61-.333.96-.753.96-1.15 0-.398-.35-.817-.96-1.151-.727-.398-1.746-.626-2.8-.626"/>
+  <path stroke="currentColor" stroke-width=".3" d="M10 19.513c-1.272 0-2.48-.276-3.395-.778C5.57 18.169 5 17.374 5 16.497c0-.878.57-1.672 1.605-2.239.917-.502 2.123-.778 3.395-.778s2.48.276 3.395.778C14.43 14.825 15 15.622 15 16.497s-.57 1.671-1.605 2.238c-.917.502-2.123.778-3.395.778Zm0-4.793c-1.052 0-2.073.228-2.8.626-.61.334-.96.753-.96 1.15 0 .398.35.818.96 1.151.727.397 1.746.626 2.8.626s2.073-.228 2.8-.626c.61-.333.96-.753.96-1.15 0-.398-.35-.817-.96-1.151-.727-.398-1.746-.626-2.8-.626Z"/>
+  <path fill="currentColor" d="M10 23.962c-1.272 0-2.48-.276-3.395-.778C5.57 22.618 5 21.823 5 20.946v-4.45a.62.62 0 0 1 1.24 0v4.45c0 .397.35.817.96 1.151.727.397 1.748.626 2.8.626 1.053 0 2.073-.229 2.8-.626.61-.334.96-.754.96-1.151v-4.45a.62.62 0 0 1 1.24 0v4.45c0 .877-.57 1.672-1.605 2.238-.917.502-2.123.778-3.395.778"/>
+  <path stroke="currentColor" stroke-width=".3" d="M10 23.962c-1.272 0-2.48-.276-3.395-.778C5.57 22.618 5 21.823 5 20.946v-4.45a.62.62 0 0 1 1.24 0v4.45c0 .397.35.817.96 1.151.727.397 1.748.626 2.8.626 1.053 0 2.073-.229 2.8-.626.61-.334.96-.754.96-1.151v-4.45a.62.62 0 0 1 1.24 0v4.45c0 .877-.57 1.672-1.605 2.238-.917.502-2.123.778-3.395.778Z"/>
+  <path fill="currentColor" d="M10 21.738c-1.272 0-2.48-.277-3.395-.778C5.57 20.393 5 19.598 5 18.72a.62.62 0 1 1 1.24 0c0 .397.35.817.96 1.151.727.398 1.748.626 2.8.626 1.053 0 2.073-.228 2.8-.626.61-.334.96-.754.96-1.15a.62.62 0 1 1 1.24 0c0 .876-.57 1.671-1.605 2.238-.917.501-2.123.778-3.395.778"/>
+  <path stroke="currentColor" stroke-width=".3" d="M10 21.738c-1.272 0-2.48-.277-3.395-.778C5.57 20.393 5 19.598 5 18.72a.62.62 0 1 1 1.24 0c0 .397.35.817.96 1.151.727.398 1.748.626 2.8.626 1.053 0 2.073-.228 2.8-.626.61-.334.96-.754.96-1.15a.62.62 0 1 1 1.24 0c0 .876-.57 1.671-1.605 2.238-.917.501-2.123.778-3.395.778Z"/>
+</svg>
diff --git a/icons/validator.svg b/icons/validator.svg
new file mode 100644
index 0000000000..e77bb0ba5d
--- /dev/null
+++ b/icons/validator.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M17.671 22.827a4.363 4.363 0 0 0 1.53-2.195 4.338 4.338 0 0 0-.042-2.67 4.366 4.366 0 0 0-1.6-2.145 4.41 4.41 0 0 0-5.117 0 4.366 4.366 0 0 0-1.6 2.145 4.338 4.338 0 0 0-.044 2.67c.267.873.802 1.64 1.53 2.195a6.578 6.578 0 0 0-3.256 3.127.705.705 0 0 0 .046.7.712.712 0 0 0 .613.346h1.246c.461-1.593 2.088-2.77 4.023-2.77 1.936 0 3.562 1.177 4.023 2.77h1.247a.716.716 0 0 0 .612-.346.705.705 0 0 0 .046-.7 6.578 6.578 0 0 0-3.257-3.127Zm-.179-3.489a2.492 2.492 0 1 1-4.984 0 2.492 2.492 0 0 1 4.984 0ZM15.002 3a1 1 0 0 1 .832.445l2.063 3.094 2.482-1.986a1 1 0 0 1 1.605.977l-1.333 6.669a1 1 0 0 1-.98.804h-9.337a1 1 0 0 1-.98-.804l-1.335-6.67a1 1 0 0 1 1.606-.976l2.482 1.986 2.063-3.094A1 1 0 0 1 15.002 3Zm0 2.803-1.836 2.753a1 1 0 0 1-1.456.226l-1.191-.952.635 3.173h7.696l.635-3.173-1.19.952a1 1 0 0 1-1.458-.226l-1.835-2.753Z" fill="currentColor"/>
+</svg>
diff --git a/icons/finalized.svg b/icons/verification-steps/finalized.svg
similarity index 100%
rename from icons/finalized.svg
rename to icons/verification-steps/finalized.svg
diff --git a/icons/unfinalized.svg b/icons/verification-steps/unfinalized.svg
similarity index 100%
rename from icons/unfinalized.svg
rename to icons/verification-steps/unfinalized.svg
diff --git a/icons/verified_slim.svg b/icons/verified_slim.svg
new file mode 100644
index 0000000000..a13930aab2
--- /dev/null
+++ b/icons/verified_slim.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M19.4 11a8.4 8.4 0 1 1-16.8 0 8.4 8.4 0 0 1 16.8 0Zm1.6 0c0 5.523-4.477 10-10 10S1 16.523 1 11 5.477 1 11 1s10 4.477 10 10Zm-5.895-3.706A.916.916 0 1 1 16.4 8.589l-6.022 6.022a1.05 1.05 0 0 1-1.485 0l-3.2-3.199a.915.915 0 0 1 1.295-1.295l2.258 2.258a.55.55 0 0 0 .778 0l5.081-5.081Z" fill="currentColor"/>
+  <path d="m16.4 7.293-.141.142.141-.142Zm-1.295 0 .142.142-.142-.141ZM16.4 8.59l-.141-.142.141.142Zm-6.022 6.022.141.141-.141-.141Zm-4.684-3.199.141-.141-.141.141Zm0-1.295-.142-.141.142.141Zm1.294 0-.141.142.141-.142Zm2.258 2.258-.14.142.14-.142Zm.778 0-.141-.141.141.141ZM11 19.6a8.6 8.6 0 0 0 8.6-8.6h-.4a8.2 8.2 0 0 1-8.2 8.2v.4ZM2.4 11a8.6 8.6 0 0 0 8.6 8.6v-.4A8.2 8.2 0 0 1 2.8 11h-.4ZM11 2.4A8.6 8.6 0 0 0 2.4 11h.4A8.2 8.2 0 0 1 11 2.8v-.4Zm8.6 8.6A8.6 8.6 0 0 0 11 2.4v.4a8.2 8.2 0 0 1 8.2 8.2h.4ZM11 21.2c5.633 0 10.2-4.567 10.2-10.2h-.4c0 5.412-4.388 9.8-9.8 9.8v.4ZM.8 11c0 5.633 4.567 10.2 10.2 10.2v-.4c-5.412 0-9.8-4.388-9.8-9.8H.8ZM11 .8C5.367.8.8 5.367.8 11h.4c0-5.412 4.388-9.8 9.8-9.8V.8ZM21.2 11C21.2 5.367 16.633.8 11 .8v.4c5.412 0 9.8 4.388 9.8 9.8h.4Zm-4.659-3.848a1.116 1.116 0 0 0-1.577 0l.283.283a.716.716 0 0 1 1.012 0l.282-.283Zm0 1.578a1.116 1.116 0 0 0 0-1.578l-.282.283c.28.28.28.733 0 1.012l.283.283Zm-6.022 6.022 6.023-6.022-.283-.283-6.023 6.023.283.282Zm-1.767 0a1.25 1.25 0 0 0 1.767 0l-.283-.282a.85.85 0 0 1-1.202 0l-.282.282Zm-3.2-3.199 3.2 3.2.282-.283-3.199-3.2-.283.283Zm0-1.577a1.115 1.115 0 0 0 0 1.577l.283-.282a.715.715 0 0 1 0-1.012l-.283-.283Zm1.578 0a1.115 1.115 0 0 0-1.578 0l.283.283a.715.715 0 0 1 1.012 0l.283-.283Zm2.258 2.258L7.13 9.976l-.283.283 2.258 2.258.283-.283Zm.495 0a.35.35 0 0 1-.495 0l-.283.283a.75.75 0 0 0 1.06 0l-.282-.283Zm5.081-5.082-5.081 5.082.283.283 5.08-5.082-.282-.283Z" fill="currentColor"/>
+</svg>
diff --git a/icons/verify-contract.svg b/icons/verify-contract.svg
deleted file mode 100644
index 5457c4f160..0000000000
--- a/icons/verify-contract.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.392 5.45c.252-.288.592-.45.948-.45h8.038a.63.63 0 0 1 .474.225l4.689 5.385a.83.83 0 0 1 .196.544v8.574l-.985 1.055-.355-.38v-8.666h-4.485a.702.702 0 0 1-.702-.702V6.538H7.34v16.924h9.44L18.217 25H7.34c-.356 0-.696-.162-.948-.45A1.661 1.661 0 0 1 6 23.461V6.538c0-.408.141-.799.392-1.087Zm9.222 1.678 2.791 3.205h-2.791V7.128ZM8.85 15.5a.65.65 0 0 1 .65-.65h7.2a.65.65 0 1 1 0 1.3H9.5a.65.65 0 0 1-.65-.65Zm0 2.4a.65.65 0 0 1 .65-.65h7.2a.65.65 0 1 1 0 1.3H9.5a.65.65 0 0 1-.65-.65Z" fill="currentColor"/>
-  <path d="m17.552 21.357 2.2 2.357 4.4-4.714" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/icons/wallet.svg b/icons/wallet.svg
index 4dea2adff2..f1765c246d 100644
--- a/icons/wallet.svg
+++ b/icons/wallet.svg
@@ -1,11 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 31 30">
-  <g fill="currentColor" clip-path="url(#a)">
-    <path d="M22.75 27.188h-15A4.688 4.688 0 0 1 3.062 22.5V9.375A.937.937 0 0 1 4 8.437h18.75a4.688 4.688 0 0 1 4.688 4.688V22.5a4.688 4.688 0 0 1-4.688 4.688ZM4.937 10.313V22.5a2.812 2.812 0 0 0 2.813 2.813h15a2.812 2.812 0 0 0 2.813-2.813v-9.375a2.812 2.812 0 0 0-2.813-2.813H4.937Z"/>
-    <path d="M24.625 10.312a.937.937 0 0 1-.937-.937V6.797a2.184 2.184 0 0 0-.732-1.754 1.82 1.82 0 0 0-1.565-.3L5.669 8.315a.938.938 0 0 0-.731.938.938.938 0 0 1-1.875 0 2.813 2.813 0 0 1 2.184-2.766l15.731-3.572a3.656 3.656 0 0 1 3.15.666 4.069 4.069 0 0 1 1.435 3.216v2.578a.938.938 0 0 1-.938.937ZM26.5 21.563h-6.563a3.75 3.75 0 1 1 0-7.5H26.5a.938.938 0 0 1 .938.937v5.625a.938.938 0 0 1-.938.938Zm-6.563-5.625a1.875 1.875 0 1 0 0 3.75h5.625v-3.75h-5.625Z"/>
-  </g>
-  <defs>
-    <clipPath id="a">
-      <path fill="#fff" d="M.25 0h30v30h-30z"/>
-    </clipPath>
-  </defs>
+<svg viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.139 20H4.83a3.847 3.847 0 0 1-3.846-3.845V5.39a.769.769 0 0 1 .77-.769h15.384a3.847 3.847 0 0 1 3.846 3.845v7.69A3.844 3.844 0 0 1 17.139 20ZM2.524 6.16v9.996a2.307 2.307 0 0 0 2.307 2.307H17.14a2.308 2.308 0 0 0 2.308-2.307v-7.69A2.306 2.306 0 0 0 17.14 6.16H2.524Z" fill="currentColor"/>
+  <path d="M18.677 6.159a.77.77 0 0 1-.769-.77V3.276a1.79 1.79 0 0 0-.6-1.438 1.493 1.493 0 0 0-1.284-.246l-12.9 2.93a.77.77 0 0 0-.6.769.769.769 0 0 1-1.539 0A2.306 2.306 0 0 1 2.778 3.02L15.685.091a3 3 0 0 1 2.585.546 3.338 3.338 0 0 1 1.177 2.638V5.39a.77.77 0 0 1-.77.769Zm1.539 9.227H14.83a3.077 3.077 0 0 1-2.175-5.25 3.074 3.074 0 0 1 2.175-.902h5.385a.77.77 0 0 1 .769.77v4.613a.77.77 0 0 1-.77.769Zm-5.385-4.614a1.539 1.539 0 1 0 0 3.076h4.616v-3.076H14.83Z" fill="currentColor"/>
 </svg>
diff --git a/instrumentation.node.ts b/instrumentation.node.ts
index bbb183dd00..a42232f4b8 100644
--- a/instrumentation.node.ts
+++ b/instrumentation.node.ts
@@ -10,7 +10,7 @@ import {
 } from '@opentelemetry/sdk-metrics';
 import { NodeSDK } from '@opentelemetry/sdk-node';
 import { SimpleSpanProcessor } from '@opentelemetry/sdk-trace-node';
-import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
+import { SEMRESATTRS_SERVICE_NAME, SEMRESATTRS_SERVICE_VERSION, SEMRESATTRS_SERVICE_INSTANCE_ID } from '@opentelemetry/semantic-conventions';
 
 diag.setLogger(new DiagConsoleLogger(), DiagLogLevel.INFO);
 
@@ -18,9 +18,9 @@ const traceExporter = new OTLPTraceExporter();
 
 const sdk = new NodeSDK({
   resource: new Resource({
-    [SemanticResourceAttributes.SERVICE_NAME]: 'blockscout_frontend',
-    [SemanticResourceAttributes.SERVICE_VERSION]: process.env.NEXT_PUBLIC_GIT_TAG || process.env.NEXT_PUBLIC_GIT_COMMIT_SHA || 'unknown_version',
-    [SemanticResourceAttributes.SERVICE_INSTANCE_ID]:
+    [SEMRESATTRS_SERVICE_NAME]: 'blockscout_frontend',
+    [SEMRESATTRS_SERVICE_VERSION]: process.env.NEXT_PUBLIC_GIT_TAG || process.env.NEXT_PUBLIC_GIT_COMMIT_SHA || 'unknown_version',
+    [SEMRESATTRS_SERVICE_INSTANCE_ID]:
         process.env.NEXT_PUBLIC_APP_INSTANCE ||
         process.env.NEXT_PUBLIC_APP_HOST?.replace('.blockscout.com', '').replaceAll('-', '_') ||
         'unknown_app',
@@ -46,9 +46,7 @@ const sdk = new NodeSDK({
               url.pathname.startsWith('/_next/static/') ||
               url.pathname.startsWith('/_next/data/') ||
               url.pathname.startsWith('/assets/') ||
-              url.pathname.startsWith('/static/') ||
-              url.pathname.startsWith('/favicon/') ||
-              url.pathname.startsWith('/envs.js')
+              url.pathname.startsWith('/static/')
             ) {
               return true;
             }
diff --git a/instrumentation.ts b/instrumentation.ts
index c5384e36a7..dc366667cb 100644
--- a/instrumentation.ts
+++ b/instrumentation.ts
@@ -1,5 +1,5 @@
 export async function register() {
-  if (process.env.NEXT_RUNTIME === 'nodejs') {
+  if (process.env.NEXT_RUNTIME === 'nodejs' && process.env.NEXT_OPEN_TELEMETRY_ENABLED === 'true') {
     await import('./instrumentation.node');
   }
 }
diff --git a/jest.config.ts b/jest.config.ts
index d87d585507..d718d56a7b 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import type { JestConfigWithTsJest } from 'ts-jest';
 
 /*
diff --git a/jest/lib.tsx b/jest/lib.tsx
index 7097e2b19a..cfbed98138 100644
--- a/jest/lib.tsx
+++ b/jest/lib.tsx
@@ -8,22 +8,19 @@ import React from 'react';
 import { AppContextProvider } from 'lib/contexts/app';
 import { ScrollDirectionProvider } from 'lib/contexts/scrollDirection';
 import { SocketProvider } from 'lib/socket/context';
-import theme from 'theme';
+import theme from 'theme/theme';
 
 import 'lib/setLocale';
 
 const PAGE_PROPS = {
   cookies: '',
   referrer: '',
-  id: '',
-  height_or_hash: '',
-  hash: '',
-  number: '',
-  q: '',
-  name: '',
+  query: {},
+  adBannerProvider: null,
+  apiData: null,
 };
 
-const TestApp = ({ children }: {children: React.ReactNode}) => {
+const TestApp = ({ children }: { children: React.ReactNode }) => {
   const [ queryClient ] = React.useState(() => new QueryClient({
     defaultOptions: {
       queries: {
diff --git a/lib/address/bech32.ts b/lib/address/bech32.ts
new file mode 100644
index 0000000000..85fcfda3ed
--- /dev/null
+++ b/lib/address/bech32.ts
@@ -0,0 +1,49 @@
+import { bech32 } from '@scure/base';
+
+import config from 'configs/app';
+import bytesToHex from 'lib/bytesToHex';
+import hexToBytes from 'lib/hexToBytes';
+
+export const DATA_PART_REGEXP = /^[\da-z]{38}$/;
+export const BECH_32_SEPARATOR = '1'; // https://github.com/bitcoin/bips/blob/master/bip-0173.mediawiki#bech32
+
+export function toBech32Address(hash: string) {
+  if (config.UI.views.address.hashFormat.bech32Prefix) {
+    try {
+      const words = bech32.toWords(hexToBytes(hash));
+      return bech32.encode(config.UI.views.address.hashFormat.bech32Prefix, words);
+    } catch (error) {}
+  }
+
+  return hash;
+}
+
+export function isBech32Address(hash: string) {
+  if (!config.UI.views.address.hashFormat.bech32Prefix) {
+    return false;
+  }
+
+  if (!hash.startsWith(`${ config.UI.views.address.hashFormat.bech32Prefix }${ BECH_32_SEPARATOR }`)) {
+    return false;
+  }
+
+  const strippedHash = hash.replace(`${ config.UI.views.address.hashFormat.bech32Prefix }${ BECH_32_SEPARATOR }`, '');
+  return DATA_PART_REGEXP.test(strippedHash);
+}
+
+export function fromBech32Address(hash: string) {
+  if (config.UI.views.address.hashFormat.bech32Prefix) {
+    try {
+      const { words, prefix } = bech32.decode(hash as `${ string }${ typeof BECH_32_SEPARATOR }${ string }`);
+
+      if (prefix !== config.UI.views.address.hashFormat.bech32Prefix) {
+        return hash;
+      }
+
+      const bytes = bech32.fromWords(words);
+      return bytesToHex(bytes);
+    } catch (error) {}
+  }
+
+  return hash;
+}
diff --git a/lib/address/getCheckedSummedAddress.ts b/lib/address/getCheckedSummedAddress.ts
new file mode 100644
index 0000000000..6cf744620d
--- /dev/null
+++ b/lib/address/getCheckedSummedAddress.ts
@@ -0,0 +1,9 @@
+import { getAddress } from 'viem';
+
+export default function getCheckedSummedAddress(address: string): string {
+  try {
+    return getAddress(address);
+  } catch (error) {
+    return address;
+  }
+}
diff --git a/lib/address/parseMetaPayload.ts b/lib/address/parseMetaPayload.ts
new file mode 100644
index 0000000000..f8d6fbc570
--- /dev/null
+++ b/lib/address/parseMetaPayload.ts
@@ -0,0 +1,46 @@
+import type { AddressMetadataTag } from 'types/api/addressMetadata';
+import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
+
+type MetaParsed = NonNullable<AddressMetadataTagFormatted['meta']>;
+
+export default function parseMetaPayload(meta: AddressMetadataTag['meta']): AddressMetadataTagFormatted['meta'] {
+  try {
+    const parsedMeta = JSON.parse(meta || '');
+
+    if (typeof parsedMeta !== 'object' || parsedMeta === null || Array.isArray(parsedMeta)) {
+      throw new Error('Invalid JSON');
+    }
+
+    const result: AddressMetadataTagFormatted['meta'] = {};
+
+    const stringFields: Array<keyof MetaParsed> = [
+      'textColor',
+      'bgColor',
+      'tagIcon',
+      'tagUrl',
+      'tooltipIcon',
+      'tooltipTitle',
+      'tooltipDescription',
+      'tooltipUrl',
+      'appID',
+      'appMarketplaceURL',
+      'appLogoURL',
+      'appActionButtonText',
+      'warpcastHandle',
+      'data',
+      'alertBgColor',
+      'alertTextColor',
+      'alertStatus',
+    ];
+
+    for (const stringField of stringFields) {
+      if (stringField in parsedMeta && typeof parsedMeta[stringField as keyof typeof parsedMeta] === 'string') {
+        result[stringField] = parsedMeta[stringField as keyof typeof parsedMeta];
+      }
+    }
+
+    return result;
+  } catch (error) {
+    return null;
+  }
+}
diff --git a/lib/address/useAddressMetadataInfoQuery.ts b/lib/address/useAddressMetadataInfoQuery.ts
new file mode 100644
index 0000000000..14c22ab676
--- /dev/null
+++ b/lib/address/useAddressMetadataInfoQuery.ts
@@ -0,0 +1,35 @@
+import type { AddressMetadataInfoFormatted, AddressMetadataTagFormatted } from 'types/client/addressMetadata';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+
+import parseMetaPayload from './parseMetaPayload';
+
+export default function useAddressMetadataInfoQuery(addresses: Array<string>, isEnabled = true) {
+
+  const resource = 'address_metadata_info';
+
+  return useApiQuery<typeof resource, unknown, AddressMetadataInfoFormatted>(resource, {
+    queryParams: {
+      addresses,
+      chainId: config.chain.id,
+      tagsLimit: '20',
+    },
+    queryOptions: {
+      enabled: isEnabled && addresses.length > 0 && config.features.addressMetadata.isEnabled,
+      select: (data) => {
+        const addresses = Object.entries(data.addresses)
+          .map(([ address, { tags, reputation } ]) => {
+            const formattedTags: Array<AddressMetadataTagFormatted> = tags.map((tag) => ({ ...tag, meta: parseMetaPayload(tag.meta) }));
+            return [ address.toLowerCase(), { tags: formattedTags, reputation } ] as const;
+          })
+          .reduce((result, item) => {
+            result[item[0]] = item[1];
+            return result;
+          }, {} as AddressMetadataInfoFormatted['addresses']);
+
+        return { addresses };
+      },
+    },
+  });
+}
diff --git a/lib/api/buildUrl.test.ts b/lib/api/buildUrl.test.ts
new file mode 100644
index 0000000000..29ea283a95
--- /dev/null
+++ b/lib/api/buildUrl.test.ts
@@ -0,0 +1,43 @@
+import buildUrl from './buildUrl';
+
+test('builds URL for resource without path params', () => {
+  const url = buildUrl('config_backend_version');
+  expect(url).toBe('https://localhost:3003/api/v2/config/backend-version');
+});
+
+test('builds URL for resource with path params', () => {
+  const url = buildUrl('block', { height_or_hash: '42' });
+  expect(url).toBe('https://localhost:3003/api/v2/blocks/42');
+});
+
+describe('falsy query parameters', () => {
+  test('leaves "false" as query parameter', () => {
+    const url = buildUrl('block', { height_or_hash: '42' }, { includeTx: false });
+    expect(url).toBe('https://localhost:3003/api/v2/blocks/42?includeTx=false');
+  });
+
+  test('leaves "null" as query parameter', () => {
+    const url = buildUrl('block', { height_or_hash: '42' }, { includeTx: null });
+    expect(url).toBe('https://localhost:3003/api/v2/blocks/42?includeTx=null');
+  });
+
+  test('strips out empty string as query parameter', () => {
+    const url = buildUrl('block', { height_or_hash: '42' }, { includeTx: null, sort: '' });
+    expect(url).toBe('https://localhost:3003/api/v2/blocks/42?includeTx=null');
+  });
+
+  test('strips out "undefined" as query parameter', () => {
+    const url = buildUrl('block', { height_or_hash: '42' }, { includeTx: null, sort: undefined });
+    expect(url).toBe('https://localhost:3003/api/v2/blocks/42?includeTx=null');
+  });
+});
+
+test('builds URL with array-like query parameters', () => {
+  const url = buildUrl('block', { height_or_hash: '42' }, { includeTx: [ '0x11', '0x22' ], sort: 'asc' });
+  expect(url).toBe('https://localhost:3003/api/v2/blocks/42?includeTx=0x11%2C0x22&sort=asc');
+});
+
+test('builds URL for resource with custom API endpoint', () => {
+  const url = buildUrl('token_verified_info', { chainId: '42', hash: '0x11' });
+  expect(url).toBe('https://localhost:3005/api/v1/chains/42/token-infos/0x11');
+});
diff --git a/lib/api/buildUrl.ts b/lib/api/buildUrl.ts
index b99fb26855..ea7e9fac3f 100644
--- a/lib/api/buildUrl.ts
+++ b/lib/api/buildUrl.ts
@@ -4,47 +4,24 @@ import config from 'configs/app';
 
 import isNeedProxy from './isNeedProxy';
 import { RESOURCES } from './resources';
-import type {
-  ApiResource,
-  ResourceName,
-  ResourcePathParams,
-} from './resources';
+import type { ApiResource, ResourceName, ResourcePathParams } from './resources';
 
 export default function buildUrl<R extends ResourceName>(
   resourceName: R,
   pathParams?: ResourcePathParams<R>,
-  queryParams?: Record<
-  string,
-  string | Array<string> | number | boolean | null | undefined
-  >,
+  queryParams?: Record<string, string | Array<string> | number | boolean | null | undefined>,
+  noProxy?: boolean,
 ): string {
   const resource: ApiResource = RESOURCES[resourceName];
-  const baseUrl =
-    resource.baseUrl ??
-    (isNeedProxy() ?
-      config.app.baseUrl :
-      resource.endpoint || config.api.endpoint);
-  const basePath =
-    resource.basePath !== undefined ? resource.basePath : config.api.basePath;
-  let path;
-
-  if (resource.baseUrl) {
-    path = basePath + resource.path;
-  } else if (isNeedProxy()) {
-    path = '/node-api/proxy' + basePath + resource.path;
-  } else {
-    path = basePath + resource.path;
-  }
-
+  const baseUrl = !noProxy && isNeedProxy() ? config.app.baseUrl : (resource.endpoint || config.api.endpoint);
+  const basePath = resource.basePath !== undefined ? resource.basePath : config.api.basePath;
+  const path = !noProxy && isNeedProxy() ? '/node-api/proxy' + basePath + resource.path : basePath + resource.path;
   const url = new URL(compile(path)(pathParams), baseUrl);
 
-  queryParams &&
-    Object.entries(queryParams).forEach(([ key, value ]) => {
-      // there are some pagination params that can be null or false for the next page
-      value !== undefined &&
-        value !== '' &&
-        url.searchParams.append(key, String(value));
-    });
+  queryParams && Object.entries(queryParams).forEach(([ key, value ]) => {
+    // there are some pagination params that can be null or false for the next page
+    value !== undefined && value !== '' && url.searchParams.append(key, String(value));
+  });
 
   return url.toString();
 }
diff --git a/lib/api/resources.ts b/lib/api/resources.ts
index 9723b751a3..b99d04846f 100644
--- a/lib/api/resources.ts
+++ b/lib/api/resources.ts
@@ -1,8 +1,10 @@
-import { getFeaturePayload } from "configs/app/features/types";
+import type * as bens from '@blockscout/bens-types';
+import type * as stats from '@blockscout/stats-types';
+import type * as visualizer from '@blockscout/visualizer-types';
+import { getFeaturePayload } from 'configs/app/features/types';
 import type {
   UserInfo,
   CustomAbis,
-  PublicTags,
   ApiKeys,
   VerifiedAddressResponse,
   TokenInfoApplicationConfig,
@@ -10,7 +12,7 @@ import type {
   WatchlistResponse,
   TransactionTagsResponse,
   AddressTagsResponse,
-} from "types/api/account";
+} from 'types/api/account';
 import type {
   Address,
   AddressCounters,
@@ -29,78 +31,92 @@ import type {
   AddressNFTsResponse,
   AddressCollectionsResponse,
   AddressNFTTokensFilter,
-} from "types/api/address";
-import type { AddressesResponse } from "types/api/addresses";
+  AddressMudTables,
+  AddressMudTablesFilter,
+  AddressMudRecords,
+  AddressMudRecordsFilter,
+  AddressMudRecordsSorting,
+  AddressMudRecord,
+  AddressEpochRewardsResponse,
+  AddressXStarResponse,
+} from 'types/api/address';
+import type { AddressesResponse, AddressesMetadataSearchResult, AddressesMetadataSearchFilters } from 'types/api/addresses';
+import type { AddressMetadataInfo, PublicTagTypesResponse } from 'types/api/addressMetadata';
+import type { AdvancedFilterParams, AdvancedFilterResponse, AdvancedFilterMethodsResponse } from 'types/api/advancedFilter';
+import type {
+  ArbitrumL2MessagesResponse,
+  ArbitrumL2TxnBatch,
+  ArbitrumL2TxnBatchesResponse,
+  ArbitrumL2BatchTxs,
+  ArbitrumL2BatchBlocks,
+  ArbitrumL2TxnBatchesItem,
+  ArbitrumLatestDepositsResponse,
+} from 'types/api/arbitrumL2';
+import type { TxBlobs, Blob } from 'types/api/blobs';
 import type {
   BlocksResponse,
   BlockTransactionsResponse,
   Block,
   BlockFilters,
   BlockWithdrawalsResponse,
-} from "types/api/block";
-import type {
-  DeviceStatisticInfos,
-  DHCDevice,
-  DHCDeviceInfo,
-  DHCDevicePage,
-  DHCDevicesParams,
-  EpochInfo,
-  EraInfo,
-  NodesPage,
-  NodesParams,
-  PageParams,
-  ProviderDetails,
-  ProviderInfo,
-  ProvidersPage,
-  ValidatorDetails,
-  ValidatorStatisticInfos,
-} from "types/api/boolscan";
-import type {
-  ChartMarketResponse,
-  ChartTransactionResponse,
-} from "types/api/charts";
-import type { BackendVersionConfig } from "types/api/configs";
+  BlockCountdownResponse,
+  BlockEpoch,
+  BlockEpochElectionRewardDetailsResponse,
+} from 'types/api/block';
+import type { ChartMarketResponse, ChartSecondaryCoinPriceResponse, ChartTransactionResponse } from 'types/api/charts';
+import type { BackendVersionConfig, CsvExportConfig } from 'types/api/configs';
 import type {
   SmartContract,
-  SmartContractReadMethod,
-  SmartContractWriteMethod,
-  SmartContractVerificationConfig,
-  SolidityscanReport,
-} from "types/api/contract";
-import type {
-  VerifiedContractsResponse,
-  VerifiedContractsFilters,
-  VerifiedContractsCounters,
-} from "types/api/contracts";
+  SmartContractVerificationConfigRaw,
+  SmartContractSecurityAudits,
+  SmartContractMudSystemsResponse,
+  SmartContractMudSystemInfo,
+} from 'types/api/contract';
+import type { VerifiedContractsResponse, VerifiedContractsFilters, VerifiedContractsCounters } from 'types/api/contracts';
 import type {
   EnsAddressLookupFilters,
-  EnsAddressLookupResponse,
-  EnsDomainDetailed,
-  EnsDomainEventsResponse,
   EnsDomainLookupFilters,
-  EnsDomainLookupResponse,
   EnsLookupSorting,
-} from "types/api/ens";
-import type { IndexingStatus } from "types/api/indexingStatus";
-import type { InternalTransactionsResponse } from "types/api/internalTransaction";
-import type { L2DepositsResponse, L2DepositsItem } from "types/api/l2Deposits";
-import type { L2OutputRootsResponse } from "types/api/l2OutputRoots";
-import type { L2TxnBatchesResponse } from "types/api/l2TxnBatches";
-import type { L2WithdrawalsResponse } from "types/api/l2Withdrawals";
-import type { LogsResponseTx, LogsResponseAddress } from "types/api/log";
-import type { RawTracesResponse } from "types/api/rawTrace";
+} from 'types/api/ens';
+import type { IndexingStatus } from 'types/api/indexingStatus';
+import type { InternalTransactionsResponse } from 'types/api/internalTransaction';
+import type { LogsResponseTx, LogsResponseAddress } from 'types/api/log';
+import type { MudWorldsResponse } from 'types/api/mudWorlds';
+import type { NovesAccountHistoryResponse, NovesDescribeTxsResponse, NovesResponseData } from 'types/api/noves';
 import type {
-  SearchRedirectResult,
-  SearchResult,
-  SearchResultFilters,
-  SearchResultItem,
-} from "types/api/search";
+  OptimisticL2DepositsResponse,
+  OptimisticL2DepositsItem,
+  OptimisticL2OutputRootsResponse,
+  OptimisticL2TxnBatchesResponse,
+  OptimisticL2WithdrawalsResponse,
+  OptimisticL2DisputeGamesResponse,
+  OptimismL2TxnBatch,
+  OptimismL2BatchTxs,
+  OptimismL2BatchBlocks,
+} from 'types/api/optimisticL2';
+import type { Pool, PoolsResponse } from 'types/api/pools';
+import type { RawTracesResponse } from 'types/api/rawTrace';
 import type {
-  Counters,
-  StatsCharts,
-  StatsChart,
-  HomeStats,
-} from "types/api/stats";
+  RewardsConfigResponse,
+  RewardsCheckRefCodeResponse,
+  RewardsNonceResponse,
+  RewardsCheckUserResponse,
+  RewardsLoginResponse,
+  RewardsUserBalancesResponse,
+  RewardsUserDailyCheckResponse,
+  RewardsUserDailyClaimResponse,
+  RewardsUserReferralsResponse,
+} from 'types/api/rewards';
+import type {
+  ScrollL2BatchesResponse,
+  ScrollL2TxnBatch,
+  ScrollL2TxnBatchTxs,
+  ScrollL2TxnBatchBlocks,
+  ScrollL2MessagesResponse,
+} from 'types/api/scrollL2';
+import type { SearchRedirectResult, SearchResult, SearchResultFilters, SearchResultItem } from 'types/api/search';
+import type { ShibariumWithdrawalsResponse, ShibariumDepositsResponse } from 'types/api/shibarium';
+import type { HomeStats } from 'types/api/stats';
 import type {
   TokenCounters,
   TokenInfo,
@@ -110,49 +126,49 @@ import type {
   TokenInstanceTransfersCount,
   TokenVerifiedInfo,
   TokenInventoryFilters,
-} from "types/api/token";
-import type {
-  TokensResponse,
-  TokensFilters,
-  TokensSorting,
-  TokenInstanceTransferResponse,
-  TokensBridgedFilters,
-} from "types/api/tokens";
-import type {
-  TokenTransferResponse,
-  TokenTransferFilters,
-} from "types/api/tokenTransfer";
+} from 'types/api/token';
+import type { TokensResponse, TokensFilters, TokensSorting, TokenInstanceTransferResponse, TokensBridgedFilters } from 'types/api/tokens';
+import type { TokenTransferResponse, TokenTransferFilters } from 'types/api/tokenTransfer';
 import type {
   TransactionsResponseValidated,
   TransactionsResponsePending,
   Transaction,
   TransactionsResponseWatchlist,
   TransactionsSorting,
-} from "types/api/transaction";
-import type { TxInterpretationResponse } from "types/api/txInterpretation";
-import type { TTxsFilters } from "types/api/txsFilters";
-import type { TxStateChanges } from "types/api/txStateChanges";
+  TransactionsResponseWithBlobs,
+  TransactionsStats,
+} from 'types/api/transaction';
+import type { TxInterpretationResponse } from 'types/api/txInterpretation';
+import type { TTxsFilters, TTxsWithBlobsFilters } from 'types/api/txsFilters';
+import type { TxStateChanges } from 'types/api/txStateChanges';
+import type { UserOpsResponse, UserOp, UserOpsFilters, UserOpsAccount } from 'types/api/userOps';
 import type {
-  UserOpsResponse,
-  UserOp,
-  UserOpsFilters,
-  UserOpsAccount,
-} from "types/api/userOps";
-import type { VerifiedContractsSorting } from "types/api/verifiedContracts";
-import type { VisualizedContract } from "types/api/visualization";
-import type {
-  WithdrawalsResponse,
-  WithdrawalsCounters,
-} from "types/api/withdrawals";
+  ValidatorsStabilityCountersResponse,
+  ValidatorsStabilityFilters,
+  ValidatorsStabilityResponse,
+  ValidatorsStabilitySorting,
+  ValidatorsBlackfortCountersResponse,
+  ValidatorsBlackfortResponse,
+  ValidatorsBlackfortSorting,
+} from 'types/api/validators';
+import type { VerifiedContractsSorting } from 'types/api/verifiedContracts';
+import type { WithdrawalsResponse, WithdrawalsCounters } from 'types/api/withdrawals';
 import type {
+  ZkEvmL2DepositsResponse,
   ZkEvmL2TxnBatch,
   ZkEvmL2TxnBatchesItem,
   ZkEvmL2TxnBatchesResponse,
   ZkEvmL2TxnBatchTxs,
-} from "types/api/zkEvmL2TxnBatches";
-import type { ArrayElement } from "types/utils";
+  ZkEvmL2WithdrawalsResponse,
+} from 'types/api/zkEvmL2';
+import type { ZkSyncBatch, ZkSyncBatchesResponse, ZkSyncBatchTxs } from 'types/api/zkSyncL2';
+import type { MarketplaceAppOverview } from 'types/client/marketplace';
+import type { ArrayElement } from 'types/utils';
+
+import config from 'configs/app';
 
-import config from "configs/app";
+const marketplaceFeature = getFeaturePayload(config.features.marketplace);
+const marketplaceApi = marketplaceFeature && 'api' in marketplaceFeature ? marketplaceFeature.api : undefined;
 
 export interface ApiResource {
   path: ResourcePath;
@@ -160,1036 +176,1315 @@ export interface ApiResource {
   basePath?: string;
   pathParams?: Array<string>;
   needAuth?: boolean; // for external APIs which require authentication
-  baseUrl?: string;
-  filterFields?: Array<any>;
+  headers?: RequestInit['headers'];
 }
 
-export const SORTING_FIELDS = [ "sort", "order" ];
+export const SORTING_FIELDS = [ 'sort', 'order' ];
 
 export const RESOURCES = {
   // ACCOUNT
   csrf: {
-    path: "/api/account/v2/get_csrf",
+    path: '/api/account/v2/get_csrf',
   },
   user_info: {
-    path: "/api/account/v2/user/info",
-  },
-  email_resend: {
-    path: "/api/account/v2/email/resend",
+    path: '/api/account/v2/user/info',
   },
   custom_abi: {
-    path: "/api/account/v2/user/custom_abis/:id?",
-    pathParams: [ "id" as const ],
+    path: '/api/account/v2/user/custom_abis{/:id}',
+    pathParams: [ 'id' as const ],
   },
   watchlist: {
-    path: "/api/account/v2/user/watchlist/:id?",
-    pathParams: [ "id" as const ],
-    filterFields: [],
-  },
-  public_tags: {
-    path: "/api/account/v2/user/public_tags/:id?",
-    pathParams: [ "id" as const ],
+    path: '/api/account/v2/user/watchlist{/:id}',
+    pathParams: [ 'id' as const ],
+    filterFields: [ ],
   },
   private_tags_address: {
-    path: "/api/account/v2/user/tags/address/:id?",
-    pathParams: [ "id" as const ],
-    filterFields: [],
+    path: '/api/account/v2/user/tags/address{/:id}',
+    pathParams: [ 'id' as const ],
+    filterFields: [ ],
   },
   private_tags_tx: {
-    path: "/api/account/v2/user/tags/transaction/:id?",
-    pathParams: [ "id" as const ],
-    filterFields: [],
+    path: '/api/account/v2/user/tags/transaction{/:id}',
+    pathParams: [ 'id' as const ],
+    filterFields: [ ],
   },
   api_keys: {
-    path: "/api/account/v2/user/api_keys/:id?",
-    pathParams: [ "id" as const ],
+    path: '/api/account/v2/user/api_keys{/:id}',
+    pathParams: [ 'id' as const ],
   },
 
   // ACCOUNT: ADDRESS VERIFICATION & TOKEN INFO
   address_verification: {
-    path: "/api/v1/chains/:chainId/verified-addresses:type",
-    pathParams: [ "chainId" as const, "type" as const ],
+    path: '/api/v1/chains/:chainId/verified-addresses:type',
+    pathParams: [ 'chainId' as const, 'type' as const ],
     endpoint: getFeaturePayload(config.features.verifiedTokens)?.api.endpoint,
     basePath: getFeaturePayload(config.features.verifiedTokens)?.api.basePath,
     needAuth: true,
   },
 
   verified_addresses: {
-    path: "/api/v1/chains/:chainId/verified-addresses",
-    pathParams: [ "chainId" as const ],
+    path: '/api/v1/chains/:chainId/verified-addresses',
+    pathParams: [ 'chainId' as const ],
     endpoint: getFeaturePayload(config.features.verifiedTokens)?.api.endpoint,
     basePath: getFeaturePayload(config.features.verifiedTokens)?.api.basePath,
     needAuth: true,
   },
 
   token_info_applications_config: {
-    path: "/api/v1/chains/:chainId/token-info-submissions/selectors",
-    pathParams: [ "chainId" as const ],
-    endpoint: getFeaturePayload(config.features.addressVerification)?.api
-      .endpoint,
-    basePath: getFeaturePayload(config.features.addressVerification)?.api
-      .basePath,
+    path: '/api/v1/chains/:chainId/token-info-submissions/selectors',
+    pathParams: [ 'chainId' as const ],
+    endpoint: getFeaturePayload(config.features.addressVerification)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.addressVerification)?.api.basePath,
     needAuth: true,
   },
 
   token_info_applications: {
-    path: "/api/v1/chains/:chainId/token-info-submissions/:id?",
-    pathParams: [ "chainId" as const, "id" as const ],
-    endpoint: getFeaturePayload(config.features.addressVerification)?.api
-      .endpoint,
-    basePath: getFeaturePayload(config.features.addressVerification)?.api
-      .basePath,
+    path: '/api/v1/chains/:chainId/token-info-submissions{/:id}',
+    pathParams: [ 'chainId' as const, 'id' as const ],
+    endpoint: getFeaturePayload(config.features.addressVerification)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.addressVerification)?.api.basePath,
     needAuth: true,
   },
 
-  // STATS
+  // AUTH
+  auth_send_otp: {
+    path: '/api/account/v2/send_otp',
+  },
+  auth_confirm_otp: {
+    path: '/api/account/v2/confirm_otp',
+  },
+  auth_siwe_message: {
+    path: '/api/account/v2/siwe_message',
+  },
+  auth_siwe_verify: {
+    path: '/api/account/v2/authenticate_via_wallet',
+  },
+  auth_link_email: {
+    path: '/api/account/v2/email/link',
+  },
+  auth_link_address: {
+    path: '/api/account/v2/address/link',
+  },
+  auth_logout: {
+    path: '/api/account/auth/logout',
+  },
+
+  // STATS MICROSERVICE API
   stats_counters: {
-    path: "/api/v1/counters",
+    path: '/api/v1/counters',
     endpoint: getFeaturePayload(config.features.stats)?.api.endpoint,
     basePath: getFeaturePayload(config.features.stats)?.api.basePath,
   },
   stats_lines: {
-    path: "/api/v1/lines",
+    path: '/api/v1/lines',
     endpoint: getFeaturePayload(config.features.stats)?.api.endpoint,
     basePath: getFeaturePayload(config.features.stats)?.api.basePath,
   },
   stats_line: {
-    path: "/api/v1/lines/:id",
-    pathParams: [ "id" as const ],
+    path: '/api/v1/lines/:id',
+    pathParams: [ 'id' as const ],
     endpoint: getFeaturePayload(config.features.stats)?.api.endpoint,
     basePath: getFeaturePayload(config.features.stats)?.api.basePath,
   },
 
   // NAME SERVICE
   addresses_lookup: {
-    path: "/api/v1/:chainId/addresses\\:lookup",
-    pathParams: [ "chainId" as const ],
+    path: '/api/v1/:chainId/addresses\\:lookup',
+    pathParams: [ 'chainId' as const ],
+    endpoint: getFeaturePayload(config.features.nameService)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.nameService)?.api.basePath,
+    filterFields: [ 'address' as const, 'resolved_to' as const, 'owned_by' as const, 'only_active' as const, 'protocols' as const ],
+  },
+  address_domain: {
+    path: '/api/v1/:chainId/addresses/:address',
+    pathParams: [ 'chainId' as const, 'address' as const ],
     endpoint: getFeaturePayload(config.features.nameService)?.api.endpoint,
     basePath: getFeaturePayload(config.features.nameService)?.api.basePath,
-    filterFields: [
-      "address" as const,
-      "resolved_to" as const,
-      "owned_by" as const,
-      "only_active" as const,
-    ],
   },
   domain_info: {
-    path: "/api/v1/:chainId/domains/:name",
-    pathParams: [ "chainId" as const, "name" as const ],
+    path: '/api/v1/:chainId/domains/:name',
+    pathParams: [ 'chainId' as const, 'name' as const ],
     endpoint: getFeaturePayload(config.features.nameService)?.api.endpoint,
     basePath: getFeaturePayload(config.features.nameService)?.api.basePath,
   },
   domain_events: {
-    path: "/api/v1/:chainId/domains/:name/events",
-    pathParams: [ "chainId" as const, "name" as const ],
+    path: '/api/v1/:chainId/domains/:name/events',
+    pathParams: [ 'chainId' as const, 'name' as const ],
     endpoint: getFeaturePayload(config.features.nameService)?.api.endpoint,
     basePath: getFeaturePayload(config.features.nameService)?.api.basePath,
   },
   domains_lookup: {
-    path: "/api/v1/:chainId/domains\\:lookup",
-    pathParams: [ "chainId" as const ],
+    path: '/api/v1/:chainId/domains\\:lookup',
+    pathParams: [ 'chainId' as const ],
     endpoint: getFeaturePayload(config.features.nameService)?.api.endpoint,
     basePath: getFeaturePayload(config.features.nameService)?.api.basePath,
-    filterFields: [ "name" as const, "only_active" as const ],
+    filterFields: [ 'name' as const, 'only_active' as const, 'protocols' as const ],
+  },
+  domain_protocols: {
+    path: '/api/v1/:chainId/protocols',
+    pathParams: [ 'chainId' as const ],
+    endpoint: getFeaturePayload(config.features.nameService)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.nameService)?.api.basePath,
+  },
+
+  // METADATA SERVICE & PUBLIC TAGS
+  address_metadata_info: {
+    path: '/api/v1/metadata',
+    endpoint: getFeaturePayload(config.features.addressMetadata)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.addressMetadata)?.api.basePath,
+  },
+  address_metadata_tag_search: {
+    path: '/api/v1/tags:search',
+    endpoint: getFeaturePayload(config.features.addressMetadata)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.addressMetadata)?.api.basePath,
+  },
+  address_metadata_tag_types: {
+    path: '/api/v1/public-tag-types',
+    endpoint: getFeaturePayload(config.features.addressMetadata)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.addressMetadata)?.api.basePath,
+  },
+  public_tag_application: {
+    path: '/api/v1/chains/:chainId/metadata-submissions/tag',
+    pathParams: [ 'chainId' as const ],
+    endpoint: getFeaturePayload(config.features.publicTagsSubmission)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.publicTagsSubmission)?.api.basePath,
   },
 
   // VISUALIZATION
   visualize_sol2uml: {
-    path: "/api/v1/solidity\\:visualize-contracts",
+    path: '/api/v1/solidity\\:visualize-contracts',
     endpoint: getFeaturePayload(config.features.sol2uml)?.api.endpoint,
     basePath: getFeaturePayload(config.features.sol2uml)?.api.basePath,
   },
 
+  // MARKETPLACE
+  marketplace_dapps: {
+    path: '/api/v1/chains/:chainId/marketplace/dapps',
+    pathParams: [ 'chainId' as const ],
+    endpoint: marketplaceApi?.endpoint,
+    basePath: marketplaceApi?.basePath,
+  },
+  marketplace_dapp: {
+    path: '/api/v1/chains/:chainId/marketplace/dapps/:dappId',
+    pathParams: [ 'chainId' as const, 'dappId' as const ],
+    endpoint: marketplaceApi?.endpoint,
+    basePath: marketplaceApi?.basePath,
+  },
+
+  // REWARDS SERVICE
+  rewards_config: {
+    path: '/api/v1/config',
+    endpoint: getFeaturePayload(config.features.rewards)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.rewards)?.api.basePath,
+  },
+  rewards_check_ref_code: {
+    path: '/api/v1/auth/code/:code',
+    pathParams: [ 'code' as const ],
+    endpoint: getFeaturePayload(config.features.rewards)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.rewards)?.api.basePath,
+  },
+  rewards_nonce: {
+    path: '/api/v1/auth/nonce',
+    endpoint: getFeaturePayload(config.features.rewards)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.rewards)?.api.basePath,
+  },
+  rewards_check_user: {
+    path: '/api/v1/auth/user/:address',
+    pathParams: [ 'address' as const ],
+    endpoint: getFeaturePayload(config.features.rewards)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.rewards)?.api.basePath,
+  },
+  rewards_login: {
+    path: '/api/v1/auth/login',
+    endpoint: getFeaturePayload(config.features.rewards)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.rewards)?.api.basePath,
+  },
+  rewards_logout: {
+    path: '/api/v1/auth/logout',
+    endpoint: getFeaturePayload(config.features.rewards)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.rewards)?.api.basePath,
+  },
+  rewards_user_balances: {
+    path: '/api/v1/user/balances',
+    endpoint: getFeaturePayload(config.features.rewards)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.rewards)?.api.basePath,
+  },
+  rewards_user_daily_check: {
+    path: '/api/v1/user/daily/check',
+    endpoint: getFeaturePayload(config.features.rewards)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.rewards)?.api.basePath,
+  },
+  rewards_user_daily_claim: {
+    path: '/api/v1/user/daily/claim',
+    endpoint: getFeaturePayload(config.features.rewards)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.rewards)?.api.basePath,
+  },
+  rewards_user_referrals: {
+    path: '/api/v1/user/referrals',
+    endpoint: getFeaturePayload(config.features.rewards)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.rewards)?.api.basePath,
+  },
+
   // BLOCKS, TXS
   blocks: {
-    path: "/api/v2/blocks",
-    filterFields: [ "type" as const ],
+    path: '/api/v2/blocks',
+    filterFields: [ 'type' as const ],
   },
   block: {
-    path: "/api/v2/blocks/:height_or_hash",
-    pathParams: [ "height_or_hash" as const ],
+    path: '/api/v2/blocks/:height_or_hash',
+    pathParams: [ 'height_or_hash' as const ],
   },
   block_txs: {
-    path: "/api/v2/blocks/:height_or_hash/transactions",
-    pathParams: [ "height_or_hash" as const ],
-    filterFields: [],
+    path: '/api/v2/blocks/:height_or_hash/transactions',
+    pathParams: [ 'height_or_hash' as const ],
+    filterFields: [ 'type' as const ],
   },
   block_withdrawals: {
-    path: "/api/v2/blocks/:height_or_hash/withdrawals",
-    pathParams: [ "height_or_hash" as const ],
+    path: '/api/v2/blocks/:height_or_hash/withdrawals',
+    pathParams: [ 'height_or_hash' as const ],
+    filterFields: [],
+  },
+  block_epoch: {
+    path: '/api/v2/blocks/:height_or_hash/epoch',
+    pathParams: [ 'height_or_hash' as const ],
     filterFields: [],
   },
+  block_election_rewards: {
+    path: '/api/v2/blocks/:height_or_hash/election-rewards/:reward_type',
+    pathParams: [ 'height_or_hash' as const, 'reward_type' as const ],
+    filterFields: [],
+  },
+  txs_stats: {
+    path: '/api/v2/transactions/stats',
+  },
   txs_validated: {
-    path: "/api/v2/transactions",
-    filterFields: [ "filter" as const, "type" as const, "method" as const ],
+    path: '/api/v2/transactions',
+    filterFields: [ 'filter' as const, 'type' as const, 'method' as const ],
   },
   txs_pending: {
-    path: "/api/v2/transactions",
-    filterFields: [ "filter" as const, "type" as const, "method" as const ],
+    path: '/api/v2/transactions',
+    filterFields: [ 'filter' as const, 'type' as const, 'method' as const ],
+  },
+  txs_with_blobs: {
+    path: '/api/v2/transactions',
+    filterFields: [ 'type' as const ],
   },
   txs_watchlist: {
-    path: "/api/v2/transactions/watchlist",
-    filterFields: [],
+    path: '/api/v2/transactions/watchlist',
+    filterFields: [ ],
   },
   txs_execution_node: {
-    path: "/api/v2/transactions/execution-node/:hash",
-    pathParams: [ "hash" as const ],
-    filterFields: [],
+    path: '/api/v2/transactions/execution-node/:hash',
+    pathParams: [ 'hash' as const ],
+    filterFields: [ ],
   },
   tx: {
-    path: "/api/v2/transactions/:hash",
-    pathParams: [ "hash" as const ],
+    path: '/api/v2/transactions/:hash',
+    pathParams: [ 'hash' as const ],
   },
   tx_internal_txs: {
-    path: "/api/v2/transactions/:hash/internal-transactions",
-    pathParams: [ "hash" as const ],
-    filterFields: [],
+    path: '/api/v2/transactions/:hash/internal-transactions',
+    pathParams: [ 'hash' as const ],
+    filterFields: [ ],
   },
   tx_logs: {
-    path: "/api/v2/transactions/:hash/logs",
-    pathParams: [ "hash" as const ],
-    filterFields: [],
+    path: '/api/v2/transactions/:hash/logs',
+    pathParams: [ 'hash' as const ],
+    filterFields: [ ],
   },
   tx_token_transfers: {
-    path: "/api/v2/transactions/:hash/token-transfers",
-    pathParams: [ "hash" as const ],
-    filterFields: [ "type" as const ],
+    path: '/api/v2/transactions/:hash/token-transfers',
+    pathParams: [ 'hash' as const ],
+    filterFields: [ 'type' as const ],
   },
   tx_raw_trace: {
-    path: "/api/v2/transactions/:hash/raw-trace",
-    pathParams: [ "hash" as const ],
+    path: '/api/v2/transactions/:hash/raw-trace',
+    pathParams: [ 'hash' as const ],
   },
   tx_state_changes: {
-    path: "/api/v2/transactions/:hash/state-changes",
-    pathParams: [ "hash" as const ],
+    path: '/api/v2/transactions/:hash/state-changes',
+    pathParams: [ 'hash' as const ],
     filterFields: [],
   },
+  tx_blobs: {
+    path: '/api/v2/transactions/:hash/blobs',
+    pathParams: [ 'hash' as const ],
+  },
   tx_interpretation: {
-    path: "/api/v2/transactions/:hash/summary",
-    pathParams: [ "hash" as const ],
+    path: '/api/v2/transactions/:hash/summary',
+    pathParams: [ 'hash' as const ],
   },
   withdrawals: {
-    path: "/api/v2/withdrawals",
+    path: '/api/v2/withdrawals',
     filterFields: [],
   },
   withdrawals_counters: {
-    path: "/api/v2/withdrawals/counters",
+    path: '/api/v2/withdrawals/counters',
   },
 
   // ADDRESSES
   addresses: {
-    path: "/api/v2/addresses/",
-    filterFields: [],
+    path: '/api/v2/addresses/',
+    filterFields: [ ],
+  },
+  addresses_metadata_search: {
+    path: '/api/v2/proxy/metadata/addresses',
+    filterFields: [ 'slug' as const, 'tag_type' as const ],
   },
 
   // ADDRESS
   address: {
-    path: "/api/v2/addresses/:hash",
-    pathParams: [ "hash" as const ],
+    path: '/api/v2/addresses/:hash',
+    pathParams: [ 'hash' as const ],
   },
   address_counters: {
-    path: "/api/v2/addresses/:hash/counters",
-    pathParams: [ "hash" as const ],
+    path: '/api/v2/addresses/:hash/counters',
+    pathParams: [ 'hash' as const ],
   },
   address_tabs_counters: {
-    path: "/api/v2/addresses/:hash/tabs-counters",
-    pathParams: [ "hash" as const ],
+    path: '/api/v2/addresses/:hash/tabs-counters',
+    pathParams: [ 'hash' as const ],
   },
   // this resource doesn't have pagination, so causing huge problems on some addresses page
   // address_token_balances: {
   //   path: '/api/v2/addresses/:hash/token-balances',
   // },
   address_txs: {
-    path: "/api/v2/addresses/:hash/transactions",
-    pathParams: [ "hash" as const ],
-    filterFields: [ "filter" as const ],
+    path: '/api/v2/addresses/:hash/transactions',
+    pathParams: [ 'hash' as const ],
+    filterFields: [ 'filter' as const ],
   },
   address_internal_txs: {
-    path: "/api/v2/addresses/:hash/internal-transactions",
-    pathParams: [ "hash" as const ],
-    filterFields: [ "filter" as const ],
+    path: '/api/v2/addresses/:hash/internal-transactions',
+    pathParams: [ 'hash' as const ],
+    filterFields: [ 'filter' as const ],
   },
   address_token_transfers: {
-    path: "/api/v2/addresses/:hash/token-transfers",
-    pathParams: [ "hash" as const ],
-    filterFields: [ "filter" as const, "type" as const, "token" as const ],
+    path: '/api/v2/addresses/:hash/token-transfers',
+    pathParams: [ 'hash' as const ],
+    filterFields: [ 'filter' as const, 'type' as const, 'token' as const ],
   },
   address_blocks_validated: {
-    path: "/api/v2/addresses/:hash/blocks-validated",
-    pathParams: [ "hash" as const ],
-    filterFields: [],
+    path: '/api/v2/addresses/:hash/blocks-validated',
+    pathParams: [ 'hash' as const ],
+    filterFields: [ ],
   },
   address_coin_balance: {
-    path: "/api/v2/addresses/:hash/coin-balance-history",
-    pathParams: [ "hash" as const ],
-    filterFields: [],
+    path: '/api/v2/addresses/:hash/coin-balance-history',
+    pathParams: [ 'hash' as const ],
+    filterFields: [ ],
   },
   address_coin_balance_chart: {
-    path: "/api/v2/addresses/:hash/coin-balance-history-by-day",
-    pathParams: [ "hash" as const ],
+    path: '/api/v2/addresses/:hash/coin-balance-history-by-day',
+    pathParams: [ 'hash' as const ],
   },
   address_logs: {
-    path: "/api/v2/addresses/:hash/logs",
-    pathParams: [ "hash" as const ],
-    filterFields: [],
+    path: '/api/v2/addresses/:hash/logs',
+    pathParams: [ 'hash' as const ],
+    filterFields: [ ],
   },
   address_tokens: {
-    path: "/api/v2/addresses/:hash/tokens",
-    pathParams: [ "hash" as const ],
-    filterFields: [ "type" as const ],
+    path: '/api/v2/addresses/:hash/tokens',
+    pathParams: [ 'hash' as const ],
+    filterFields: [ 'type' as const ],
   },
   address_nfts: {
-    path: "/api/v2/addresses/:hash/nft",
-    pathParams: [ "hash" as const ],
-    filterFields: [ "type" as const ],
+    path: '/api/v2/addresses/:hash/nft',
+    pathParams: [ 'hash' as const ],
+    filterFields: [ 'type' as const ],
   },
   address_collections: {
-    path: "/api/v2/addresses/:hash/nft/collections",
-    pathParams: [ "hash" as const ],
-    filterFields: [ "type" as const ],
+    path: '/api/v2/addresses/:hash/nft/collections',
+    pathParams: [ 'hash' as const ],
+    filterFields: [ 'type' as const ],
   },
   address_withdrawals: {
-    path: "/api/v2/addresses/:hash/withdrawals",
-    pathParams: [ "hash" as const ],
+    path: '/api/v2/addresses/:hash/withdrawals',
+    pathParams: [ 'hash' as const ],
+    filterFields: [],
+  },
+  address_epoch_rewards: {
+    path: '/api/v2/addresses/:hash/election-rewards',
+    pathParams: [ 'hash' as const ],
     filterFields: [],
   },
+  address_xstar_score: {
+    path: '/api/v2/proxy/xname/addresses/:hash',
+    pathParams: [ 'hash' as const ],
+  },
 
   // CONTRACT
   contract: {
-    path: "/api/v2/smart-contracts/:hash",
-    pathParams: [ "hash" as const ],
-  },
-  contract_methods_read: {
-    path: "/api/v2/smart-contracts/:hash/methods-read",
-    pathParams: [ "hash" as const ],
-  },
-  contract_methods_read_proxy: {
-    path: "/api/v2/smart-contracts/:hash/methods-read-proxy",
-    pathParams: [ "hash" as const ],
-  },
-  contract_method_query: {
-    path: "/api/v2/smart-contracts/:hash/query-read-method",
-    pathParams: [ "hash" as const ],
-  },
-  contract_methods_write: {
-    path: "/api/v2/smart-contracts/:hash/methods-write",
-    pathParams: [ "hash" as const ],
-  },
-  contract_methods_write_proxy: {
-    path: "/api/v2/smart-contracts/:hash/methods-write-proxy",
-    pathParams: [ "hash" as const ],
+    path: '/api/v2/smart-contracts/:hash',
+    pathParams: [ 'hash' as const ],
   },
   contract_verification_config: {
-    path: "/api/v2/smart-contracts/verification/config",
+    path: '/api/v2/smart-contracts/verification/config',
   },
   contract_verification_via: {
-    path: "/api/v2/smart-contracts/:hash/verification/via/:method",
-    pathParams: [ "hash" as const, "method" as const ],
+    path: '/api/v2/smart-contracts/:hash/verification/via/:method',
+    pathParams: [ 'hash' as const, 'method' as const ],
+  },
+  contract_solidity_scan_report: {
+    path: '/api/v2/smart-contracts/:hash/solidityscan-report',
+    pathParams: [ 'hash' as const ],
   },
-  contract_solidityscan_report: {
-    path: "/api/v2/smart-contracts/:hash/solidityscan-report",
-    pathParams: [ "hash" as const ],
+  contract_security_audits: {
+    path: '/api/v2/smart-contracts/:hash/audit-reports',
+    pathParams: [ 'hash' as const ],
   },
 
   verified_contracts: {
-    path: "/api/v2/smart-contracts",
-    filterFields: [ "q" as const, "filter" as const ],
+    path: '/api/v2/smart-contracts',
+    filterFields: [ 'q' as const, 'filter' as const ],
   },
   verified_contracts_counters: {
-    path: "/api/v2/smart-contracts/counters",
+    path: '/api/v2/smart-contracts/counters',
   },
 
   // TOKEN
   token: {
-    path: "/api/v2/tokens/:hash",
-    pathParams: [ "hash" as const ],
+    path: '/api/v2/tokens/:hash',
+    pathParams: [ 'hash' as const ],
   },
   token_verified_info: {
-    path: "/api/v1/chains/:chainId/token-infos/:hash",
-    pathParams: [ "chainId" as const, "hash" as const ],
+    path: '/api/v1/chains/:chainId/token-infos/:hash',
+    pathParams: [ 'chainId' as const, 'hash' as const ],
     endpoint: getFeaturePayload(config.features.verifiedTokens)?.api.endpoint,
     basePath: getFeaturePayload(config.features.verifiedTokens)?.api.basePath,
   },
   token_counters: {
-    path: "/api/v2/tokens/:hash/counters",
-    pathParams: [ "hash" as const ],
+    path: '/api/v2/tokens/:hash/counters',
+    pathParams: [ 'hash' as const ],
   },
   token_holders: {
-    path: "/api/v2/tokens/:hash/holders",
-    pathParams: [ "hash" as const ],
+    path: '/api/v2/tokens/:hash/holders',
+    pathParams: [ 'hash' as const ],
     filterFields: [],
   },
   token_transfers: {
-    path: "/api/v2/tokens/:hash/transfers",
-    pathParams: [ "hash" as const ],
+    path: '/api/v2/tokens/:hash/transfers',
+    pathParams: [ 'hash' as const ],
     filterFields: [],
   },
   token_inventory: {
-    path: "/api/v2/tokens/:hash/instances",
-    pathParams: [ "hash" as const ],
-    filterFields: [ "holder_address_hash" as const ],
+    path: '/api/v2/tokens/:hash/instances',
+    pathParams: [ 'hash' as const ],
+    filterFields: [ 'holder_address_hash' as const ],
   },
   tokens: {
-    path: "/api/v2/tokens",
-    filterFields: [ "q" as const, "type" as const ],
+    path: '/api/v2/tokens',
+    filterFields: [ 'q' as const, 'type' as const ],
   },
   tokens_bridged: {
-    path: "/api/v2/tokens/bridged",
-    filterFields: [ "q" as const, "chain_ids" as const ],
+    path: '/api/v2/tokens/bridged',
+    filterFields: [ 'q' as const, 'chain_ids' as const ],
   },
 
   // TOKEN INSTANCE
   token_instance: {
-    path: "/api/v2/tokens/:hash/instances/:id",
-    pathParams: [ "hash" as const, "id" as const ],
+    path: '/api/v2/tokens/:hash/instances/:id',
+    pathParams: [ 'hash' as const, 'id' as const ],
   },
   token_instance_transfers_count: {
-    path: "/api/v2/tokens/:hash/instances/:id/transfers-count",
-    pathParams: [ "hash" as const, "id" as const ],
+    path: '/api/v2/tokens/:hash/instances/:id/transfers-count',
+    pathParams: [ 'hash' as const, 'id' as const ],
   },
   token_instance_transfers: {
-    path: "/api/v2/tokens/:hash/instances/:id/transfers",
-    pathParams: [ "hash" as const, "id" as const ],
+    path: '/api/v2/tokens/:hash/instances/:id/transfers',
+    pathParams: [ 'hash' as const, 'id' as const ],
     filterFields: [],
   },
   token_instance_holders: {
-    path: "/api/v2/tokens/:hash/instances/:id/holders",
-    pathParams: [ "hash" as const, "id" as const ],
+    path: '/api/v2/tokens/:hash/instances/:id/holders',
+    pathParams: [ 'hash' as const, 'id' as const ],
+    filterFields: [],
+  },
+  token_instance_refresh_metadata: {
+    path: '/api/v2/tokens/:hash/instances/:id/refetch-metadata',
+    pathParams: [ 'hash' as const, 'id' as const ],
     filterFields: [],
   },
 
-  // HOMEPAGE
-  homepage_stats: {
-    path: "/api/v2/stats",
+  // TOKEN TRANSFERS
+  token_transfers_all: {
+    path: '/api/v2/token-transfers',
+    filterFields: [ 'type' as const ],
   },
-  homepage_chart_txs: {
-    path: "/api/v2/stats/charts/transactions",
+
+  // APP STATS
+  stats: {
+    path: '/api/v2/stats',
+    headers: {
+      'updated-gas-oracle': 'true',
+    },
   },
-  homepage_chart_market: {
-    path: "/api/v2/stats/charts/market",
+  stats_charts_txs: {
+    path: '/api/v2/stats/charts/transactions',
   },
+  stats_charts_market: {
+    path: '/api/v2/stats/charts/market',
+  },
+  stats_charts_secondary_coin_price: {
+    path: '/api/v2/stats/charts/secondary-coin-market',
+  },
+
+  // HOMEPAGE
   homepage_blocks: {
-    path: "/api/v2/main-page/blocks",
+    path: '/api/v2/main-page/blocks',
+  },
+  homepage_optimistic_deposits: {
+    path: '/api/v2/main-page/optimism-deposits',
   },
-  homepage_deposits: {
-    path: "/api/v2/main-page/optimism-deposits",
+  homepage_arbitrum_deposits: {
+    path: '/api/v2/main-page/arbitrum/messages/to-rollup',
   },
   homepage_txs: {
-    path: "/api/v2/main-page/transactions",
+    path: '/api/v2/main-page/transactions',
   },
   homepage_zkevm_l2_batches: {
-    path: "/api/v2/main-page/zkevm/batches/confirmed",
+    path: '/api/v2/main-page/zkevm/batches/confirmed',
+  },
+  homepage_arbitrum_l2_batches: {
+    path: '/api/v2/main-page/arbitrum/batches/committed',
   },
   homepage_txs_watchlist: {
-    path: "/api/v2/main-page/transactions/watchlist",
+    path: '/api/v2/main-page/transactions/watchlist',
   },
   homepage_indexing_status: {
-    path: "/api/v2/main-page/indexing-status",
+    path: '/api/v2/main-page/indexing-status',
   },
   homepage_zkevm_latest_batch: {
-    path: "/api/v2/main-page/zkevm/batches/latest-number",
+    path: '/api/v2/main-page/zkevm/batches/latest-number',
+  },
+  homepage_zksync_latest_batch: {
+    path: '/api/v2/main-page/zksync/batches/latest-number',
+  },
+  homepage_arbitrum_latest_batch: {
+    path: '/api/v2/main-page/arbitrum/batches/latest-number',
   },
 
   // SEARCH
   quick_search: {
-    path: "/api/v2/search/quick",
-    filterFields: [ "q" ],
+    path: '/api/v2/search/quick',
+    filterFields: [ 'q' ],
   },
   search: {
-    path: "/api/v2/search",
-    filterFields: [ "q" ],
+    path: '/api/v2/search',
+    filterFields: [ 'q' ],
   },
   search_check_redirect: {
-    path: "/api/v2/search/check-redirect",
+    path: '/api/v2/search/check-redirect',
+  },
+
+  // optimistic L2
+  optimistic_l2_deposits: {
+    path: '/api/v2/optimism/deposits',
+    filterFields: [],
+  },
+
+  optimistic_l2_deposits_count: {
+    path: '/api/v2/optimism/deposits/count',
+  },
+
+  optimistic_l2_withdrawals: {
+    path: '/api/v2/optimism/withdrawals',
+    filterFields: [],
+  },
+
+  optimistic_l2_withdrawals_count: {
+    path: '/api/v2/optimism/withdrawals/count',
+  },
+
+  optimistic_l2_output_roots: {
+    path: '/api/v2/optimism/output-roots',
+    filterFields: [],
+  },
+
+  optimistic_l2_output_roots_count: {
+    path: '/api/v2/optimism/output-roots/count',
+  },
+
+  optimistic_l2_txn_batches: {
+    path: '/api/v2/optimism/batches',
+    filterFields: [],
+  },
+
+  optimistic_l2_txn_batches_count: {
+    path: '/api/v2/optimism/batches/count',
+  },
+
+  optimistic_l2_txn_batch: {
+    path: '/api/v2/optimism/batches/:number',
+    pathParams: [ 'number' as const ],
+  },
+
+  optimistic_l2_txn_batch_txs: {
+    path: '/api/v2/transactions/optimism-batch/:number',
+    pathParams: [ 'number' as const ],
+    filterFields: [],
+  },
+
+  optimistic_l2_txn_batch_blocks: {
+    path: '/api/v2/blocks/optimism-batch/:number',
+    pathParams: [ 'number' as const ],
+    filterFields: [],
+  },
+
+  optimistic_l2_dispute_games: {
+    path: '/api/v2/optimism/games',
+    filterFields: [],
+  },
+
+  optimistic_l2_dispute_games_count: {
+    path: '/api/v2/optimism/games/count',
+  },
+
+  // MUD worlds on optimism
+  mud_worlds: {
+    path: '/api/v2/mud/worlds',
+    filterFields: [],
+  },
+
+  address_mud_tables: {
+    path: '/api/v2/mud/worlds/:hash/tables',
+    pathParams: [ 'hash' as const ],
+    filterFields: [ 'q' as const ],
+  },
+
+  address_mud_tables_count: {
+    path: '/api/v2/mud/worlds/:hash/tables/count',
+    pathParams: [ 'hash' as const ],
+  },
+
+  address_mud_records: {
+    path: '/api/v2/mud/worlds/:hash/tables/:table_id/records',
+    pathParams: [ 'hash' as const, 'table_id' as const ],
+    filterFields: [ 'filter_key0' as const, 'filter_key1' as const ],
+  },
+
+  address_mud_record: {
+    path: '/api/v2/mud/worlds/:hash/tables/:table_id/records/:record_id',
+    pathParams: [ 'hash' as const, 'table_id' as const, 'record_id' as const ],
+  },
+
+  contract_mud_systems: {
+    path: '/api/v2/mud/worlds/:hash/systems',
+    pathParams: [ 'hash' as const ],
+  },
+
+  contract_mud_system_info: {
+    path: '/api/v2/mud/worlds/:hash/systems/:system_address',
+    pathParams: [ 'hash' as const, 'system_address' as const ],
+  },
+
+  // arbitrum L2
+  arbitrum_l2_messages: {
+    path: '/api/v2/arbitrum/messages/:direction',
+    pathParams: [ 'direction' as const ],
+    filterFields: [],
+  },
+
+  arbitrum_l2_messages_count: {
+    path: '/api/v2/arbitrum/messages/:direction/count',
+    pathParams: [ 'direction' as const ],
   },
 
-  // L2
-  l2_deposits: {
-    path: "/api/v2/optimism/deposits",
+  arbitrum_l2_txn_batches: {
+    path: '/api/v2/arbitrum/batches',
     filterFields: [],
   },
 
-  l2_deposits_count: {
-    path: "/api/v2/optimism/deposits/count",
+  arbitrum_l2_txn_batches_count: {
+    path: '/api/v2/arbitrum/batches/count',
   },
 
-  l2_withdrawals: {
-    path: "/api/v2/optimism/withdrawals",
+  arbitrum_l2_txn_batch: {
+    path: '/api/v2/arbitrum/batches/:number',
+    pathParams: [ 'number' as const ],
+  },
+
+  arbitrum_l2_txn_batch_txs: {
+    path: '/api/v2/transactions/arbitrum-batch/:number',
+    pathParams: [ 'number' as const ],
     filterFields: [],
   },
 
-  l2_withdrawals_count: {
-    path: "/api/v2/optimism/withdrawals/count",
+  arbitrum_l2_txn_batch_blocks: {
+    path: '/api/v2/blocks/arbitrum-batch/:number',
+    pathParams: [ 'number' as const ],
+    filterFields: [],
   },
 
-  l2_output_roots: {
-    path: "/api/v2/optimism/output-roots",
+  // zkEvm L2
+  zkevm_l2_deposits: {
+    path: '/api/v2/zkevm/deposits',
     filterFields: [],
   },
 
-  l2_output_roots_count: {
-    path: "/api/v2/optimism/output-roots/count",
+  zkevm_l2_deposits_count: {
+    path: '/api/v2/zkevm/deposits/count',
   },
 
-  l2_txn_batches: {
-    path: "/api/v2/optimism/txn-batches",
+  zkevm_l2_withdrawals: {
+    path: '/api/v2/zkevm/withdrawals',
     filterFields: [],
   },
 
-  l2_txn_batches_count: {
-    path: "/api/v2/optimism/txn-batches/count",
+  zkevm_l2_withdrawals_count: {
+    path: '/api/v2/zkevm/withdrawals/count',
   },
 
   zkevm_l2_txn_batches: {
-    path: "/api/v2/zkevm/batches",
+    path: '/api/v2/zkevm/batches',
     filterFields: [],
   },
 
   zkevm_l2_txn_batches_count: {
-    path: "/api/v2/zkevm/batches/count",
+    path: '/api/v2/zkevm/batches/count',
   },
 
   zkevm_l2_txn_batch: {
-    path: "/api/v2/zkevm/batches/:number",
-    pathParams: [ "number" as const ],
+    path: '/api/v2/zkevm/batches/:number',
+    pathParams: [ 'number' as const ],
   },
+
   zkevm_l2_txn_batch_txs: {
-    path: "/api/v2/transactions/zkevm-batch/:number",
-    pathParams: [ "number" as const ],
+    path: '/api/v2/transactions/zkevm-batch/:number',
+    pathParams: [ 'number' as const ],
+    filterFields: [],
+  },
+
+  // zkSync L2
+  zksync_l2_txn_batches: {
+    path: '/api/v2/zksync/batches',
+    filterFields: [],
+  },
+
+  zksync_l2_txn_batches_count: {
+    path: '/api/v2/zksync/batches/count',
+  },
+
+  zksync_l2_txn_batch: {
+    path: '/api/v2/zksync/batches/:number',
+    pathParams: [ 'number' as const ],
+  },
+
+  zksync_l2_txn_batch_txs: {
+    path: '/api/v2/transactions/zksync-batch/:number',
+    pathParams: [ 'number' as const ],
+    filterFields: [],
+  },
+
+  // SHIBARIUM L2
+  shibarium_deposits: {
+    path: '/api/v2/shibarium/deposits',
+    filterFields: [],
+  },
+
+  shibarium_deposits_count: {
+    path: '/api/v2/shibarium/deposits/count',
+  },
+
+  shibarium_withdrawals: {
+    path: '/api/v2/shibarium/withdrawals',
+    filterFields: [],
+  },
+
+  shibarium_withdrawals_count: {
+    path: '/api/v2/shibarium/withdrawals/count',
+  },
+
+  // SCROLL L2
+  scroll_l2_deposits: {
+    path: '/api/v2/scroll/deposits',
+    filterFields: [],
+  },
+
+  scroll_l2_deposits_count: {
+    path: '/api/v2/scroll/deposits/count',
+  },
+
+  scroll_l2_withdrawals: {
+    path: '/api/v2/scroll/withdrawals',
+    filterFields: [],
+  },
+
+  scroll_l2_withdrawals_count: {
+    path: '/api/v2/scroll/withdrawals/count',
+  },
+
+  scroll_l2_txn_batches: {
+    path: '/api/v2/scroll/batches',
     filterFields: [],
   },
 
+  scroll_l2_txn_batches_count: {
+    path: '/api/v2/scroll/batches/count',
+  },
+
+  scroll_l2_txn_batch: {
+    path: '/api/v2/scroll/batches/:number',
+    pathParams: [ 'number' as const ],
+  },
+
+  scroll_l2_txn_batch_txs: {
+    path: '/api/v2/transactions/scroll-batch/:number',
+    pathParams: [ 'number' as const ],
+    filterFields: [],
+  },
+
+  scroll_l2_txn_batch_blocks: {
+    path: '/api/v2/blocks/scroll-batch/:number',
+    pathParams: [ 'number' as const ],
+    filterFields: [],
+  },
+
+  // NOVES-FI
+  noves_transaction: {
+    path: '/api/v2/proxy/noves-fi/transactions/:hash',
+    pathParams: [ 'hash' as const ],
+  },
+  noves_address_history: {
+    path: '/api/v2/proxy/noves-fi/addresses/:address/transactions',
+    pathParams: [ 'address' as const ],
+    filterFields: [],
+  },
+  noves_describe_txs: {
+    path: '/api/v2/proxy/noves-fi/transaction-descriptions',
+  },
+
   // USER OPS
   user_ops: {
-    path: "/api/v2/proxy/account-abstraction/operations",
-    filterFields: [ "transaction_hash" as const, "sender" as const ],
+    path: '/api/v2/proxy/account-abstraction/operations',
+    filterFields: [ 'transaction_hash' as const, 'sender' as const ],
   },
   user_op: {
-    path: "/api/v2/proxy/account-abstraction/operations/:hash",
-    pathParams: [ "hash" as const ],
+    path: '/api/v2/proxy/account-abstraction/operations/:hash',
+    pathParams: [ 'hash' as const ],
   },
   user_ops_account: {
-    path: "/api/v2/proxy/account-abstraction/accounts/:hash",
-    pathParams: [ "hash" as const ],
+    path: '/api/v2/proxy/account-abstraction/accounts/:hash',
+    pathParams: [ 'hash' as const ],
+  },
+  user_op_interpretation: {
+    path: '/api/v2/proxy/account-abstraction/operations/:hash/summary',
+    pathParams: [ 'hash' as const ],
+  },
+
+  // VALIDATORS
+  validators_stability: {
+    path: '/api/v2/validators/stability',
+    filterFields: [ 'address_hash' as const, 'state_filter' as const ],
+  },
+  validators_stability_counters: {
+    path: '/api/v2/validators/stability/counters',
+  },
+  validators_blackfort: {
+    path: '/api/v2/validators/blackfort',
+    filterFields: [],
+  },
+  validators_blackfort_counters: {
+    path: '/api/v2/validators/blackfort/counters',
+  },
+
+  // BLOBS
+  blob: {
+    path: '/api/v2/blobs/:hash',
+    pathParams: [ 'hash' as const ],
+  },
+
+  // ADVANCED FILTER
+  advanced_filter: {
+    path: '/api/v2/advanced-filters',
+    filterFields: [
+      'tx_types' as const,
+      'methods' as const,
+      'methods_names' as const /* frontend only */,
+      'age_from' as const,
+      'age_to' as const,
+      'age' as const /* frontend only */,
+      'from_address_hashes_to_include' as const,
+      'from_address_hashes_to_exclude' as const,
+      'to_address_hashes_to_include' as const,
+      'to_address_hashes_to_exclude' as const,
+      'address_relation' as const,
+      'amount_from' as const,
+      'amount_to' as const,
+      'token_contract_address_hashes_to_include' as const,
+      'token_contract_symbols_to_include' as const /* frontend only */,
+      'token_contract_address_hashes_to_exclude' as const,
+      'token_contract_symbols_to_exclude' as const /* frontend only */,
+      'block_number' as const,
+      'transaction_index' as const,
+      'internal_transaction_index' as const,
+      'token_transfer_index' as const,
+    ],
+  },
+  advanced_filter_methods: {
+    path: '/api/v2/advanced-filters/methods',
+    filterFields: [ 'q' as const ],
+  },
+  advanced_filter_csv: {
+    path: '/api/v2/advanced-filters/csv',
+  },
+
+  // POOLS
+  pools: {
+    path: '/api/v1/chains/:chainId/pools',
+    pathParams: [ 'chainId' as const ],
+    filterFields: [ 'query' as const ],
+    endpoint: getFeaturePayload(config.features.pools)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.pools)?.api.basePath,
+  },
+
+  pool: {
+    path: '/api/v1/chains/:chainId/pools/:hash',
+    pathParams: [ 'chainId' as const, 'hash' as const ],
+    endpoint: getFeaturePayload(config.features.pools)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.pools)?.api.basePath,
   },
 
   // CONFIGS
   config_backend_version: {
-    path: "/api/v2/config/backend-version",
+    path: '/api/v2/config/backend-version',
+  },
+  config_csv_export: {
+    path: '/api/v2/config/csv-export',
+  },
+
+  // CSV EXPORT
+  csv_export_token_holders: {
+    path: '/api/v2/tokens/:hash/holders/csv',
+    pathParams: [ 'hash' as const ],
   },
 
   // OTHER
   api_v2_key: {
-    path: "/api/v2/key",
+    path: '/api/v2/key',
   },
 
   // API V1
   csv_export_txs: {
-    path: "/api/v1/transactions-csv",
+    path: '/api/v1/transactions-csv',
   },
   csv_export_internal_txs: {
-    path: "/api/v1/internal-transactions-csv",
+    path: '/api/v1/internal-transactions-csv',
   },
   csv_export_token_transfers: {
-    path: "/api/v1/token-transfers-csv",
+    path: '/api/v1/token-transfers-csv',
   },
   csv_export_logs: {
-    path: "/api/v1/logs-csv",
+    path: '/api/v1/logs-csv',
   },
-  graphql: {
-    path: "/api/v1/graphql",
-  },
-
-  // bool provider
-  provider_stats: {
-    baseUrl: config.api.boolApi ?? "",
-    basePath: "/bool-network-beta",
-    path: "/blockchain/provider" + encodeURIComponent(":info"),
-  },
-  providers: {
-    baseUrl: config.api.boolApi ?? "",
-    basePath: "/bool-network-beta",
-    path: "/blockchain/providers",
-  },
-  nodes: {
-    baseUrl: config.api.boolApi ?? "",
-    basePath: "/bool-network-beta",
-    path: "/node/validators",
-    filterFields: [ "validatorStatus" as const, "searchStr" as const ],
-  },
-  epoch_info: {
-    baseUrl: config.api.boolApi ?? "",
-    basePath: "/bool-network-beta",
-    path: "/node/epoch-info",
-  },
-  era_info: {
-    baseUrl: config.api.boolApi ?? "",
-    basePath: "/bool-network-beta",
-    path: "/node/era-info",
-  },
-  device_statistic: {
-    baseUrl: config.api.boolApi ?? "",
-    basePath: "/bool-network-beta",
-    path: "/blockchain/device" + encodeURIComponent(":statistic"),
-    filterFields: [
-      "deviceId" as const,
-      "startTime" as const,
-      "endTime" as const,
-    ],
+  csv_export_epoch_rewards: {
+    path: '/api/v1/celo-election-rewards-csv',
   },
-  provider_details: {
-    baseUrl: config.api.boolApi ?? "",
-    basePath: "/bool-network-beta",
-    path: "/blockchain/provider-detail",
-    filterFields: [ "providerId" as const ],
-  },
-  validator_details: {
-    baseUrl: config.api.boolApi ?? "",
-    basePath: "/bool-network-beta",
-    path: "/node/validator-detail",
-    filterFields: [ "address" as const ],
-  },
-  validator_statistic: {
-    baseUrl: config.api.boolApi ?? "",
-    basePath: "/bool-network-beta",
-    path: "/node/validator-statistic",
-    filterFields: [
-      "address" as const,
-      "startTime" as const,
-      "endTime" as const,
-    ],
-  },
-  dhc_devices: {
-    baseUrl: config.api.boolApi ?? "",
-    basePath: "/bool-network-beta",
-    path: "/blockchain/device" + encodeURIComponent(":owner"),
-    filterFields: [
-      "pageNo" as const,
-      "pageSize" as const,
-      "status" as const,
-      "ownerAddress" as const,
-    ],
-  },
-  dhc_devices_info: {
-    baseUrl: config.api.boolApi ?? "",
-    basePath: "/bool-network-beta",
-    path: "/blockchain/device" + encodeURIComponent(":info"),
-    filterFields: [ "ownerAddress" as const ],
-  },
-  dhc_device: {
-    baseUrl: config.api.boolApi ?? "",
-    basePath: "/bool-network-beta",
-    path: "/blockchain/device",
-    filterFields: [ "deviceId" as const ],
+  graphql: {
+    path: '/api/v1/graphql',
   },
-  bool_rpc: {
-    baseUrl: config.chain.rpcUrl ?? "",
-    path: "/",
+  block_countdown: {
+    path: '/api',
   },
 };
 
-export const boolApiNames: Array<ResourceName> = [
-  "provider_stats",
-  "providers",
-  "nodes",
-  "epoch_info",
-  "era_info",
-  "bool_rpc",
-  "device_statistic",
-  "provider_details",
-  "validator_details",
-  "validator_statistic",
-  "dhc_devices",
-  "dhc_devices_info",
-  "dhc_device",
-];
-
 export type ResourceName = keyof typeof RESOURCES;
 
 type ResourcePathMap = {
-  [K in ResourceName]: (typeof RESOURCES)[K]["path"];
+  [K in ResourceName]: typeof RESOURCES[K]['path']
 };
 export type ResourcePath = ResourcePathMap[keyof ResourcePathMap];
 
-export type ResourceFiltersKey<R extends ResourceName> =
-  (typeof RESOURCES)[R] extends { filterFields: Array<unknown> }
-    ? ArrayElement<(typeof RESOURCES)[R]["filterFields"]>
-    : never;
+export type ResourceFiltersKey<R extends ResourceName> = typeof RESOURCES[R] extends { filterFields: Array<unknown> } ?
+  ArrayElement<typeof RESOURCES[R]['filterFields']> :
+  never;
 
 export const resourceKey = (x: keyof typeof RESOURCES) => x;
 
 type ResourcePathParamName<Resource extends ResourceName> =
-  (typeof RESOURCES)[Resource] extends { pathParams: Array<string> }
-    ? ArrayElement<(typeof RESOURCES)[Resource]["pathParams"]>
-    : string;
+  typeof RESOURCES[Resource] extends { pathParams: Array<string> } ?
+    ArrayElement<typeof RESOURCES[Resource]['pathParams']> :
+    string;
 
-export type ResourcePathParams<Resource extends ResourceName> =
-  (typeof RESOURCES)[Resource] extends { pathParams: Array<string> }
-    ? Record<ResourcePathParamName<Resource>, string | undefined>
-    : never;
+export type ResourcePathParams<Resource extends ResourceName> = typeof RESOURCES[Resource] extends { pathParams: Array<string> } ?
+  Record<ResourcePathParamName<Resource>, string | undefined> :
+  never;
 
 export interface ResourceError<T = unknown> {
   payload?: T;
-  status: Response["status"];
-  statusText: Response["statusText"];
+  status: Response['status'];
+  statusText: Response['statusText'];
 }
 
 export type ResourceErrorAccount<T> = ResourceError<{ errors: T }>;
 
-export type PaginatedResourcesOfBool = "providers" | "nodes" | "dhc_devices";
-export type PaginatedResources =
-  | "blocks"
-  | "block_txs"
-  | "txs_validated"
-  | "txs_pending"
-  | "txs_watchlist"
-  | "txs_execution_node"
-  | "tx_internal_txs"
-  | "tx_logs"
-  | "tx_token_transfers"
-  | "tx_state_changes"
-  | "addresses"
-  | "address_txs"
-  | "address_internal_txs"
-  | "address_token_transfers"
-  | "address_blocks_validated"
-  | "address_coin_balance"
-  | "search"
-  | "address_logs"
-  | "address_tokens"
-  | "address_nfts"
-  | "address_collections"
-  | "token_transfers"
-  | "token_holders"
-  | "token_inventory"
-  | "tokens"
-  | "tokens_bridged"
-  | "token_instance_transfers"
-  | "token_instance_holders"
-  | "verified_contracts"
-  | "l2_output_roots"
-  | "l2_withdrawals"
-  | "l2_txn_batches"
-  | "l2_deposits"
-  | "zkevm_l2_txn_batches"
-  | "zkevm_l2_txn_batch_txs"
-  | "withdrawals"
-  | "address_withdrawals"
-  | "block_withdrawals"
-  | "watchlist"
-  | "private_tags_address"
-  | "private_tags_tx"
-  | "domains_lookup"
-  | "addresses_lookup"
-  | "user_ops";
-
-export type PaginatedResponse<Q extends PaginatedResources> =
-  ResourcePayload<Q>;
-
-export type ResourcePayloadOfBool<Q extends ResourceName> =
-  Q extends "provider_stats"
-    ? ProviderInfo
-    : Q extends "era_info"
-      ? EraInfo
-      : Q extends "epoch_info"
-        ? EpochInfo
-        : Q extends "providers"
-          ? ProvidersPage
-          : Q extends "nodes"
-            ? NodesPage
-            : Q extends "device_statistic"
-              ? Array<DeviceStatisticInfos>
-              : Q extends "provider_details"
-                ? ProviderDetails
-                : Q extends "validator_statistic"
-                  ? Array<ValidatorStatisticInfos>
-                  : Q extends "validator_details"
-                    ? ValidatorDetails
-                    : Q extends "dhc_devices"
-                      ? DHCDevicePage
-                      : Q extends "dhc_devices_info"
-                        ? DHCDeviceInfo
-                        : Q extends "dhc_device"
-                          ? DHCDevice
-                          : never;
-
-type ResourcePayload2<Q extends ResourceName> = Q extends "user_info"
-  ? UserInfo
-  : Q extends "custom_abi"
-    ? CustomAbis
-    : Q extends "public_tags"
-      ? PublicTags
-      : Q extends "private_tags_address"
-        ? AddressTagsResponse
-        : Q extends "private_tags_tx"
-          ? TransactionTagsResponse
-          : Q extends "api_keys"
-            ? ApiKeys
-            : Q extends "watchlist"
-              ? WatchlistResponse
-              : Q extends "verified_addresses"
-                ? VerifiedAddressResponse
-                : Q extends "token_info_applications_config"
-                  ? TokenInfoApplicationConfig
-                  : Q extends "token_info_applications"
-                    ? TokenInfoApplications
-                    : Q extends "homepage_stats"
-                      ? HomeStats
-                      : Q extends "homepage_chart_txs"
-                        ? ChartTransactionResponse
-                        : Q extends "homepage_chart_market"
-                          ? ChartMarketResponse
-                          : never;
-
-/* eslint-disable @typescript-eslint/indent */
-export type ResourcePayload<Q extends ResourceName> =
-  | ResourcePayloadOfBool<Q>
-  | ResourcePayload2<Q>
-  | (Q extends "homepage_blocks"
-      ? Array<Block>
-      : Q extends "homepage_txs"
-      ? Array<Transaction>
-      : Q extends "homepage_txs_watchlist"
-      ? Array<Transaction>
-      : Q extends "homepage_deposits"
-      ? Array<L2DepositsItem>
-      : Q extends "homepage_zkevm_l2_batches"
-      ? { items: Array<ZkEvmL2TxnBatchesItem> }
-      : Q extends "homepage_indexing_status"
-      ? IndexingStatus
-      : Q extends "homepage_zkevm_latest_batch"
-      ? number
-      : Q extends "stats_counters"
-      ? Counters
-      : Q extends "stats_lines"
-      ? StatsCharts
-      : Q extends "stats_line"
-      ? StatsChart
-      : Q extends "blocks"
-      ? BlocksResponse
-      : Q extends "block"
-      ? Block
-      : Q extends "block_txs"
-      ? BlockTransactionsResponse
-      : Q extends "block_withdrawals"
-      ? BlockWithdrawalsResponse
-      : Q extends "txs_validated"
-      ? TransactionsResponseValidated
-      : Q extends "txs_pending"
-      ? TransactionsResponsePending
-      : Q extends "txs_watchlist"
-      ? TransactionsResponseWatchlist
-      : Q extends "txs_execution_node"
-      ? TransactionsResponseValidated
-      : Q extends "tx"
-      ? Transaction
-      : Q extends "tx_internal_txs"
-      ? InternalTransactionsResponse
-      : Q extends "tx_logs"
-      ? LogsResponseTx
-      : Q extends "tx_token_transfers"
-      ? TokenTransferResponse
-      : Q extends "tx_raw_trace"
-      ? RawTracesResponse
-      : Q extends "tx_state_changes"
-      ? TxStateChanges
-      : Q extends "tx_interpretation"
-      ? TxInterpretationResponse
-      : Q extends "addresses"
-      ? AddressesResponse
-      : Q extends "address"
-      ? Address
-      : Q extends "address_counters"
-      ? AddressCounters
-      : Q extends "address_tabs_counters"
-      ? AddressTabsCounters
-      : Q extends "address_txs"
-      ? AddressTransactionsResponse
-      : Q extends "address_internal_txs"
-      ? AddressInternalTxsResponse
-      : Q extends "address_token_transfers"
-      ? AddressTokenTransferResponse
-      : Q extends "address_blocks_validated"
-      ? AddressBlocksValidatedResponse
-      : Q extends "address_coin_balance"
-      ? AddressCoinBalanceHistoryResponse
-      : Q extends "address_coin_balance_chart"
-      ? AddressCoinBalanceHistoryChart
-      : Q extends "address_logs"
-      ? LogsResponseAddress
-      : Q extends "address_tokens"
-      ? AddressTokensResponse
-      : Q extends "address_nfts"
-      ? AddressNFTsResponse
-      : Q extends "address_collections"
-      ? AddressCollectionsResponse
-      : Q extends "address_withdrawals"
-      ? AddressWithdrawalsResponse
-      : Q extends "token"
-      ? TokenInfo
-      : Q extends "token_verified_info"
-      ? TokenVerifiedInfo
-      : Q extends "token_counters"
-      ? TokenCounters
-      : Q extends "token_transfers"
-      ? TokenTransferResponse
-      : Q extends "token_holders"
-      ? TokenHolders
-      : Q extends "token_instance"
-      ? TokenInstance
-      : Q extends "token_instance_transfers_count"
-      ? TokenInstanceTransfersCount
-      : Q extends "token_instance_transfers"
-      ? TokenInstanceTransferResponse
-      : Q extends "token_instance_holders"
-      ? TokenHolders
-      : Q extends "token_inventory"
-      ? TokenInventoryResponse
-      : Q extends "tokens"
-      ? TokensResponse
-      : Q extends "tokens_bridged"
-      ? TokensResponse
-      : Q extends "quick_search"
-      ? Array<SearchResultItem>
-      : Q extends "search"
-      ? SearchResult
-      : Q extends "search_check_redirect"
-      ? SearchRedirectResult
-      : Q extends "contract"
-      ? SmartContract
-      : Q extends "contract_methods_read"
-      ? Array<SmartContractReadMethod>
-      : Q extends "contract_methods_read_proxy"
-      ? Array<SmartContractReadMethod>
-      : Q extends "contract_methods_write"
-      ? Array<SmartContractWriteMethod>
-      : Q extends "contract_methods_write_proxy"
-      ? Array<SmartContractWriteMethod>
-      : Q extends "contract_solidityscan_report"
-      ? SolidityscanReport
-      : Q extends "verified_contracts"
-      ? VerifiedContractsResponse
-      : Q extends "verified_contracts_counters"
-      ? VerifiedContractsCounters
-      : Q extends "visualize_sol2uml"
-      ? VisualizedContract
-      : Q extends "contract_verification_config"
-      ? SmartContractVerificationConfig
-      : Q extends "withdrawals"
-      ? WithdrawalsResponse
-      : Q extends "withdrawals_counters"
-      ? WithdrawalsCounters
-      : Q extends "l2_output_roots"
-      ? L2OutputRootsResponse
-      : Q extends "l2_withdrawals"
-      ? L2WithdrawalsResponse
-      : Q extends "l2_deposits"
-      ? L2DepositsResponse
-      : Q extends "l2_txn_batches"
-      ? L2TxnBatchesResponse
-      : Q extends "l2_output_roots_count"
-      ? number
-      : Q extends "l2_withdrawals_count"
-      ? number
-      : Q extends "l2_deposits_count"
-      ? number
-      : Q extends "l2_txn_batches_count"
-      ? number
-      : Q extends "zkevm_l2_txn_batches"
-      ? ZkEvmL2TxnBatchesResponse
-      : Q extends "zkevm_l2_txn_batches_count"
-      ? number
-      : Q extends "zkevm_l2_txn_batch"
-      ? ZkEvmL2TxnBatch
-      : Q extends "zkevm_l2_txn_batch_txs"
-      ? ZkEvmL2TxnBatchTxs
-      : Q extends "config_backend_version"
-      ? BackendVersionConfig
-      : Q extends "addresses_lookup"
-      ? EnsAddressLookupResponse
-      : Q extends "domain_info"
-      ? EnsDomainDetailed
-      : Q extends "domain_events"
-      ? EnsDomainEventsResponse
-      : Q extends "domains_lookup"
-      ? EnsDomainLookupResponse
-      : Q extends "user_ops"
-      ? UserOpsResponse
-      : Q extends "user_op"
-      ? UserOp
-      : Q extends "user_ops_account"
-      ? UserOpsAccount
-      : never);
-/* eslint-enable @typescript-eslint/indent */
-
-/* eslint-disable @typescript-eslint/indent */
-export type PaginationFilters<
-  Q extends PaginatedResources | PaginatedResourcesOfBool
-> = Q extends "blocks"
-  ? BlockFilters
-  : Q extends "txs_validated" | "txs_pending"
-  ? TTxsFilters
-  : Q extends "tx_token_transfers"
-  ? TokenTransferFilters
-  : Q extends "token_transfers"
-  ? TokenTransferFilters
-  : Q extends "address_txs" | "address_internal_txs"
-  ? AddressTxsFilters
-  : Q extends "address_token_transfers"
-  ? AddressTokenTransferFilters
-  : Q extends "address_tokens"
-  ? AddressTokensFilter
-  : Q extends "address_nfts"
-  ? AddressNFTTokensFilter
-  : Q extends "address_collections"
-  ? AddressNFTTokensFilter
-  : Q extends "search"
-  ? SearchResultFilters
-  : Q extends "token_inventory"
-  ? TokenInventoryFilters
-  : Q extends "tokens"
-  ? TokensFilters
-  : Q extends "tokens_bridged"
-  ? TokensBridgedFilters
-  : Q extends "verified_contracts"
-  ? VerifiedContractsFilters
-  : Q extends "addresses_lookup"
-  ? EnsAddressLookupFilters
-  : Q extends "domains_lookup"
-  ? EnsDomainLookupFilters
-  : Q extends "user_ops"
-  ? UserOpsFilters
-  : Q extends "providers"
-  ? PageParams
-  : Q extends "nodes"
-  ? NodesParams
-  : Q extends "dhc_devices"
-  ? DHCDevicesParams
-  : Q extends "dhc_devices_info"
-  ? DHCDevicesParams
-  : never;
-/* eslint-enable @typescript-eslint/indent */
-
-/* eslint-disable @typescript-eslint/indent */
-export type PaginationSorting<
-  Q extends PaginatedResources | PaginatedResourcesOfBool
-> = Q extends "tokens"
-  ? TokensSorting
-  : Q extends "tokens_bridged"
-  ? TokensSorting
-  : Q extends "verified_contracts"
-  ? VerifiedContractsSorting
-  : Q extends "address_txs"
-  ? TransactionsSorting
-  : Q extends "addresses_lookup"
-  ? EnsLookupSorting
-  : Q extends "domains_lookup"
-  ? EnsLookupSorting
-  : Q extends "providers"
-  ? ProvidersPage
-  : Q extends "nodes"
-  ? NodesPage
-  : Q extends "dhc_devices"
-  ? DHCDevicePage
-  : never;
-/* eslint-enable @typescript-eslint/indent */
+export type PaginatedResources = 'blocks' | 'block_txs' | 'block_election_rewards' |
+'txs_validated' | 'txs_pending' | 'txs_with_blobs' | 'txs_watchlist' | 'txs_execution_node' |
+'tx_internal_txs' | 'tx_logs' | 'tx_token_transfers' | 'tx_state_changes' | 'tx_blobs' |
+'addresses' | 'addresses_metadata_search' |
+'address_txs' | 'address_internal_txs' | 'address_token_transfers' | 'address_blocks_validated' | 'address_coin_balance' |
+'search' |
+'address_logs' | 'address_tokens' | 'address_nfts' | 'address_collections' | 'address_epoch_rewards' |
+'token_transfers' | 'token_holders' | 'token_inventory' | 'tokens' | 'tokens_bridged' |
+'token_instance_transfers' | 'token_instance_holders' |
+'verified_contracts' |
+'optimistic_l2_output_roots' | 'optimistic_l2_withdrawals' | 'optimistic_l2_txn_batches' | 'optimistic_l2_deposits' |
+'optimistic_l2_dispute_games' | 'optimistic_l2_txn_batch_txs' | 'optimistic_l2_txn_batch_blocks' |
+'mud_worlds' | 'address_mud_tables' | 'address_mud_records' |
+'shibarium_deposits' | 'shibarium_withdrawals' |
+'arbitrum_l2_messages' | 'arbitrum_l2_txn_batches' | 'arbitrum_l2_txn_batch_txs' | 'arbitrum_l2_txn_batch_blocks' |
+'zkevm_l2_deposits' | 'zkevm_l2_withdrawals' | 'zkevm_l2_txn_batches' | 'zkevm_l2_txn_batch_txs' |
+'zksync_l2_txn_batches' | 'zksync_l2_txn_batch_txs' |
+'withdrawals' | 'address_withdrawals' | 'block_withdrawals' |
+'watchlist' | 'private_tags_address' | 'private_tags_tx' |
+'domains_lookup' | 'addresses_lookup' | 'user_ops' | 'validators_stability' | 'validators_blackfort' | 'noves_address_history' |
+'token_transfers_all' | 'scroll_l2_txn_batches' | 'scroll_l2_txn_batch_txs' | 'scroll_l2_txn_batch_blocks' |
+'scroll_l2_deposits' | 'scroll_l2_withdrawals' | 'advanced_filter' | 'pools';
+
+export type PaginatedResponse<Q extends PaginatedResources> = ResourcePayload<Q>;
+
+/* eslint-disable @stylistic/indent */
+// !!! IMPORTANT !!!
+// Don't add any new types here because TypeScript cannot handle it properly
+// use ResourcePayloadB instead
+export type ResourcePayloadA<Q extends ResourceName> =
+Q extends 'user_info' ? UserInfo :
+Q extends 'custom_abi' ? CustomAbis :
+Q extends 'private_tags_address' ? AddressTagsResponse :
+Q extends 'private_tags_tx' ? TransactionTagsResponse :
+Q extends 'api_keys' ? ApiKeys :
+Q extends 'watchlist' ? WatchlistResponse :
+Q extends 'verified_addresses' ? VerifiedAddressResponse :
+Q extends 'token_info_applications_config' ? TokenInfoApplicationConfig :
+Q extends 'token_info_applications' ? TokenInfoApplications :
+Q extends 'stats' ? HomeStats :
+Q extends 'stats_charts_txs' ? ChartTransactionResponse :
+Q extends 'stats_charts_market' ? ChartMarketResponse :
+Q extends 'stats_charts_secondary_coin_price' ? ChartSecondaryCoinPriceResponse :
+Q extends 'homepage_blocks' ? Array<Block> :
+Q extends 'homepage_txs' ? Array<Transaction> :
+Q extends 'homepage_txs_watchlist' ? Array<Transaction> :
+Q extends 'homepage_optimistic_deposits' ? Array<OptimisticL2DepositsItem> :
+Q extends 'homepage_arbitrum_deposits' ? ArbitrumLatestDepositsResponse :
+Q extends 'homepage_zkevm_l2_batches' ? { items: Array<ZkEvmL2TxnBatchesItem> } :
+Q extends 'homepage_arbitrum_l2_batches' ? { items: Array<ArbitrumL2TxnBatchesItem> } :
+Q extends 'homepage_indexing_status' ? IndexingStatus :
+Q extends 'homepage_zkevm_latest_batch' ? number :
+Q extends 'homepage_zksync_latest_batch' ? number :
+Q extends 'homepage_arbitrum_latest_batch' ? number :
+Q extends 'stats_counters' ? stats.Counters :
+Q extends 'stats_lines' ? stats.LineCharts :
+Q extends 'stats_line' ? stats.LineChart :
+Q extends 'blocks' ? BlocksResponse :
+Q extends 'block' ? Block :
+Q extends 'block_countdown' ? BlockCountdownResponse :
+Q extends 'block_txs' ? BlockTransactionsResponse :
+Q extends 'block_withdrawals' ? BlockWithdrawalsResponse :
+Q extends 'block_epoch' ? BlockEpoch :
+Q extends 'block_election_rewards' ? BlockEpochElectionRewardDetailsResponse :
+Q extends 'txs_stats' ? TransactionsStats :
+Q extends 'txs_validated' ? TransactionsResponseValidated :
+Q extends 'txs_pending' ? TransactionsResponsePending :
+Q extends 'txs_with_blobs' ? TransactionsResponseWithBlobs :
+Q extends 'txs_watchlist' ? TransactionsResponseWatchlist :
+Q extends 'txs_execution_node' ? TransactionsResponseValidated :
+Q extends 'tx' ? Transaction :
+Q extends 'tx_internal_txs' ? InternalTransactionsResponse :
+Q extends 'tx_logs' ? LogsResponseTx :
+Q extends 'tx_token_transfers' ? TokenTransferResponse :
+Q extends 'tx_raw_trace' ? RawTracesResponse :
+Q extends 'tx_state_changes' ? TxStateChanges :
+Q extends 'tx_blobs' ? TxBlobs :
+Q extends 'tx_interpretation' ? TxInterpretationResponse :
+Q extends 'addresses' ? AddressesResponse :
+Q extends 'addresses_metadata_search' ? AddressesMetadataSearchResult :
+Q extends 'address' ? Address :
+Q extends 'address_counters' ? AddressCounters :
+Q extends 'address_tabs_counters' ? AddressTabsCounters :
+Q extends 'address_txs' ? AddressTransactionsResponse :
+Q extends 'address_internal_txs' ? AddressInternalTxsResponse :
+Q extends 'address_token_transfers' ? AddressTokenTransferResponse :
+Q extends 'address_blocks_validated' ? AddressBlocksValidatedResponse :
+Q extends 'address_coin_balance' ? AddressCoinBalanceHistoryResponse :
+Q extends 'address_coin_balance_chart' ? AddressCoinBalanceHistoryChart :
+Q extends 'address_logs' ? LogsResponseAddress :
+Q extends 'address_tokens' ? AddressTokensResponse :
+Q extends 'address_nfts' ? AddressNFTsResponse :
+Q extends 'address_collections' ? AddressCollectionsResponse :
+Q extends 'address_withdrawals' ? AddressWithdrawalsResponse :
+Q extends 'token' ? TokenInfo :
+Q extends 'token_verified_info' ? TokenVerifiedInfo :
+Q extends 'token_counters' ? TokenCounters :
+Q extends 'token_transfers' ? TokenTransferResponse :
+Q extends 'token_holders' ? TokenHolders :
+Q extends 'token_instance' ? TokenInstance :
+Q extends 'token_instance_transfers_count' ? TokenInstanceTransfersCount :
+Q extends 'token_instance_transfers' ? TokenInstanceTransferResponse :
+Q extends 'token_instance_holders' ? TokenHolders :
+Q extends 'token_inventory' ? TokenInventoryResponse :
+Q extends 'tokens' ? TokensResponse :
+Q extends 'tokens_bridged' ? TokensResponse :
+Q extends 'quick_search' ? Array<SearchResultItem> :
+Q extends 'search' ? SearchResult :
+Q extends 'search_check_redirect' ? SearchRedirectResult :
+Q extends 'contract' ? SmartContract :
+Q extends 'contract_solidity_scan_report' ? unknown :
+Q extends 'verified_contracts' ? VerifiedContractsResponse :
+Q extends 'verified_contracts_counters' ? VerifiedContractsCounters :
+Q extends 'visualize_sol2uml' ? visualizer.VisualizeResponse :
+Q extends 'contract_verification_config' ? SmartContractVerificationConfigRaw :
+Q extends 'optimistic_l2_output_roots' ? OptimisticL2OutputRootsResponse :
+Q extends 'optimistic_l2_withdrawals' ? OptimisticL2WithdrawalsResponse :
+Q extends 'optimistic_l2_deposits' ? OptimisticL2DepositsResponse :
+Q extends 'optimistic_l2_txn_batches' ? OptimisticL2TxnBatchesResponse :
+Q extends 'optimistic_l2_txn_batches_count' ? number :
+Q extends 'optimistic_l2_txn_batch' ? OptimismL2TxnBatch :
+Q extends 'optimistic_l2_txn_batch_txs' ? OptimismL2BatchTxs :
+Q extends 'optimistic_l2_txn_batch_blocks' ? OptimismL2BatchBlocks :
+Q extends 'optimistic_l2_dispute_games' ? OptimisticL2DisputeGamesResponse :
+Q extends 'optimistic_l2_output_roots_count' ? number :
+Q extends 'optimistic_l2_withdrawals_count' ? number :
+Q extends 'optimistic_l2_deposits_count' ? number :
+Q extends 'optimistic_l2_dispute_games_count' ? number :
+never;
+// !!! IMPORTANT !!!
+// See comment above
+/* eslint-enable @stylistic/indent */
+
+/* eslint-disable @stylistic/indent */
+export type ResourcePayloadB<Q extends ResourceName> =
+Q extends 'config_backend_version' ? BackendVersionConfig :
+Q extends 'config_csv_export' ? CsvExportConfig :
+Q extends 'address_metadata_info' ? AddressMetadataInfo :
+Q extends 'address_metadata_tag_types' ? PublicTagTypesResponse :
+Q extends 'blob' ? Blob :
+Q extends 'marketplace_dapps' ? Array<MarketplaceAppOverview> :
+Q extends 'marketplace_dapp' ? MarketplaceAppOverview :
+Q extends 'validators_stability' ? ValidatorsStabilityResponse :
+Q extends 'validators_stability_counters' ? ValidatorsStabilityCountersResponse :
+Q extends 'validators_blackfort' ? ValidatorsBlackfortResponse :
+Q extends 'validators_blackfort_counters' ? ValidatorsBlackfortCountersResponse :
+Q extends 'shibarium_withdrawals' ? ShibariumWithdrawalsResponse :
+Q extends 'shibarium_deposits' ? ShibariumDepositsResponse :
+Q extends 'shibarium_withdrawals_count' ? number :
+Q extends 'shibarium_deposits_count' ? number :
+Q extends 'arbitrum_l2_messages' ? ArbitrumL2MessagesResponse :
+Q extends 'arbitrum_l2_messages_count' ? number :
+Q extends 'arbitrum_l2_txn_batches' ? ArbitrumL2TxnBatchesResponse :
+Q extends 'arbitrum_l2_txn_batches_count' ? number :
+Q extends 'arbitrum_l2_txn_batch' ? ArbitrumL2TxnBatch :
+Q extends 'arbitrum_l2_txn_batch_txs' ? ArbitrumL2BatchTxs :
+Q extends 'arbitrum_l2_txn_batch_blocks' ? ArbitrumL2BatchBlocks :
+Q extends 'zkevm_l2_deposits' ? ZkEvmL2DepositsResponse :
+Q extends 'zkevm_l2_deposits_count' ? number :
+Q extends 'zkevm_l2_withdrawals' ? ZkEvmL2WithdrawalsResponse :
+Q extends 'zkevm_l2_withdrawals_count' ? number :
+Q extends 'zkevm_l2_txn_batches' ? ZkEvmL2TxnBatchesResponse :
+Q extends 'zkevm_l2_txn_batches_count' ? number :
+Q extends 'zkevm_l2_txn_batch' ? ZkEvmL2TxnBatch :
+Q extends 'zkevm_l2_txn_batch_txs' ? ZkEvmL2TxnBatchTxs :
+Q extends 'zksync_l2_txn_batches' ? ZkSyncBatchesResponse :
+Q extends 'zksync_l2_txn_batches_count' ? number :
+Q extends 'zksync_l2_txn_batch' ? ZkSyncBatch :
+Q extends 'zksync_l2_txn_batch_txs' ? ZkSyncBatchTxs :
+Q extends 'scroll_l2_txn_batch_txs' ? ScrollL2TxnBatchTxs :
+Q extends 'scroll_l2_txn_batch_blocks' ? ScrollL2TxnBatchBlocks :
+Q extends 'contract_security_audits' ? SmartContractSecurityAudits :
+Q extends 'addresses_lookup' ? bens.LookupAddressResponse :
+Q extends 'address_domain' ? bens.GetAddressResponse :
+Q extends 'domain_info' ? bens.DetailedDomain :
+Q extends 'domain_events' ? bens.ListDomainEventsResponse :
+Q extends 'domains_lookup' ? bens.LookupDomainNameResponse :
+Q extends 'domain_protocols' ? bens.GetProtocolsResponse :
+Q extends 'user_ops' ? UserOpsResponse :
+Q extends 'user_op' ? UserOp :
+Q extends 'user_ops_account' ? UserOpsAccount :
+Q extends 'user_op_interpretation' ? TxInterpretationResponse :
+Q extends 'noves_transaction' ? NovesResponseData :
+Q extends 'noves_address_history' ? NovesAccountHistoryResponse :
+Q extends 'noves_describe_txs' ? NovesDescribeTxsResponse :
+Q extends 'mud_worlds' ? MudWorldsResponse :
+Q extends 'address_mud_tables' ? AddressMudTables :
+Q extends 'address_mud_tables_count' ? number :
+Q extends 'address_mud_records' ? AddressMudRecords :
+Q extends 'address_mud_record' ? AddressMudRecord :
+Q extends 'contract_mud_systems' ? SmartContractMudSystemsResponse :
+Q extends 'contract_mud_system_info' ? SmartContractMudSystemInfo :
+Q extends 'address_epoch_rewards' ? AddressEpochRewardsResponse :
+Q extends 'withdrawals' ? WithdrawalsResponse :
+Q extends 'withdrawals_counters' ? WithdrawalsCounters :
+Q extends 'rewards_config' ? RewardsConfigResponse :
+Q extends 'rewards_check_ref_code' ? RewardsCheckRefCodeResponse :
+Q extends 'rewards_nonce' ? RewardsNonceResponse :
+Q extends 'rewards_check_user' ? RewardsCheckUserResponse :
+Q extends 'rewards_login' ? RewardsLoginResponse :
+Q extends 'rewards_user_balances' ? RewardsUserBalancesResponse :
+Q extends 'rewards_user_daily_check' ? RewardsUserDailyCheckResponse :
+Q extends 'rewards_user_daily_claim' ? RewardsUserDailyClaimResponse :
+Q extends 'rewards_user_referrals' ? RewardsUserReferralsResponse :
+Q extends 'token_transfers_all' ? TokenTransferResponse :
+Q extends 'address_xstar_score' ? AddressXStarResponse :
+Q extends 'scroll_l2_txn_batches' ? ScrollL2BatchesResponse :
+Q extends 'scroll_l2_txn_batches_count' ? number :
+Q extends 'scroll_l2_txn_batch' ? ScrollL2TxnBatch :
+Q extends 'scroll_l2_deposits' ? ScrollL2MessagesResponse :
+Q extends 'scroll_l2_deposits_count' ? number :
+Q extends 'scroll_l2_withdrawals' ? ScrollL2MessagesResponse :
+Q extends 'scroll_l2_withdrawals_count' ? number :
+Q extends 'advanced_filter' ? AdvancedFilterResponse :
+Q extends 'advanced_filter_methods' ? AdvancedFilterMethodsResponse :
+Q extends 'pools' ? PoolsResponse :
+Q extends 'pool' ? Pool :
+never;
+/* eslint-enable @stylistic/indent */
+
+export type ResourcePayload<Q extends ResourceName> = ResourcePayloadA<Q> | ResourcePayloadB<Q>;
+export type PaginatedResponseItems<Q extends ResourceName> = Q extends PaginatedResources ? ResourcePayloadA<Q>['items'] | ResourcePayloadB<Q>['items'] : never;
+export type PaginatedResponseNextPageParams<Q extends ResourceName> = Q extends PaginatedResources ?
+  ResourcePayloadA<Q>['next_page_params'] | ResourcePayloadB<Q>['next_page_params'] :
+  never;
+
+/* eslint-disable @stylistic/indent */
+export type PaginationFilters<Q extends PaginatedResources> =
+Q extends 'blocks' ? BlockFilters :
+Q extends 'block_txs' ? TTxsWithBlobsFilters :
+Q extends 'txs_validated' | 'txs_pending' ? TTxsFilters :
+Q extends 'txs_with_blobs' ? TTxsWithBlobsFilters :
+Q extends 'tx_token_transfers' ? TokenTransferFilters :
+Q extends 'token_transfers' ? TokenTransferFilters :
+Q extends 'address_txs' | 'address_internal_txs' ? AddressTxsFilters :
+Q extends 'addresses_metadata_search' ? AddressesMetadataSearchFilters :
+Q extends 'address_token_transfers' ? AddressTokenTransferFilters :
+Q extends 'address_tokens' ? AddressTokensFilter :
+Q extends 'address_nfts' ? AddressNFTTokensFilter :
+Q extends 'address_collections' ? AddressNFTTokensFilter :
+Q extends 'search' ? SearchResultFilters :
+Q extends 'token_inventory' ? TokenInventoryFilters :
+Q extends 'tokens' ? TokensFilters :
+Q extends 'tokens_bridged' ? TokensBridgedFilters :
+Q extends 'verified_contracts' ? VerifiedContractsFilters :
+Q extends 'addresses_lookup' ? EnsAddressLookupFilters :
+Q extends 'domains_lookup' ? EnsDomainLookupFilters :
+Q extends 'user_ops' ? UserOpsFilters :
+Q extends 'validators_stability' ? ValidatorsStabilityFilters :
+Q extends 'address_mud_tables' ? AddressMudTablesFilter :
+Q extends 'address_mud_records' ? AddressMudRecordsFilter :
+Q extends 'token_transfers_all' ? TokenTransferFilters :
+Q extends 'advanced_filter' ? AdvancedFilterParams :
+Q extends 'pools' ? { query: string } :
+never;
+/* eslint-enable @stylistic/indent */
+
+/* eslint-disable @stylistic/indent */
+export type PaginationSorting<Q extends PaginatedResources> =
+Q extends 'tokens' ? TokensSorting :
+Q extends 'tokens_bridged' ? TokensSorting :
+Q extends 'verified_contracts' ? VerifiedContractsSorting :
+Q extends 'address_txs' ? TransactionsSorting :
+Q extends 'addresses_lookup' ? EnsLookupSorting :
+Q extends 'domains_lookup' ? EnsLookupSorting :
+Q extends 'validators_stability' ? ValidatorsStabilitySorting :
+Q extends 'validators_blackfort' ? ValidatorsBlackfortSorting :
+Q extends 'address_mud_records' ? AddressMudRecordsSorting :
+never;
+/* eslint-enable @stylistic/indent */
diff --git a/lib/api/useApiFetch.tsx b/lib/api/useApiFetch.tsx
index ca8807555b..1d58a672bf 100644
--- a/lib/api/useApiFetch.tsx
+++ b/lib/api/useApiFetch.tsx
@@ -19,8 +19,9 @@ import type { ApiResource, ResourceName, ResourcePathParams } from './resources'
 
 export interface Params<R extends ResourceName> {
   pathParams?: ResourcePathParams<R>;
-  queryParams?: Record<string, string | Array<string> | number | boolean | undefined>;
+  queryParams?: Record<string, string | Array<string> | number | boolean | undefined | null>;
   fetchParams?: Pick<FetchParams, 'body' | 'method' | 'signal' | 'headers'>;
+  logError?: boolean;
 }
 
 export default function useApiFetch() {
@@ -30,7 +31,7 @@ export default function useApiFetch() {
 
   return React.useCallback(<R extends ResourceName, SuccessType = unknown, ErrorType = unknown>(
     resourceName: R,
-    { pathParams, queryParams, fetchParams }: Params<R> = {},
+    { pathParams, queryParams, fetchParams, logError }: Params<R> = {},
   ) => {
     const apiToken = cookies.get(cookies.NAMES.API_TOKEN);
 
@@ -42,6 +43,7 @@ export default function useApiFetch() {
       'x-endpoint': resource.endpoint && isNeedProxy() ? resource.endpoint : undefined,
       Authorization: resource.endpoint && resource.needAuth ? apiToken : undefined,
       'x-csrf-token': withBody && csrfToken ? csrfToken : undefined,
+      ...resource.headers,
       ...fetchParams?.headers,
     }, Boolean) as HeadersInit;
 
@@ -58,7 +60,7 @@ export default function useApiFetch() {
       },
       {
         resource: resource.path,
-        omitSentryErrorLog: true, // disable logging of API errors to Sentry
+        logError,
       },
       resourceName,
     );
diff --git a/lib/api/useApiInfiniteQuery.tsx b/lib/api/useApiInfiniteQuery.tsx
new file mode 100644
index 0000000000..98300d0d64
--- /dev/null
+++ b/lib/api/useApiInfiniteQuery.tsx
@@ -0,0 +1,42 @@
+import type { InfiniteData, QueryKey, UseInfiniteQueryResult, UseInfiniteQueryOptions } from '@tanstack/react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+import type { PaginatedResources, ResourceError, ResourcePayload } from 'lib/api/resources';
+import useApiFetch from 'lib/api/useApiFetch';
+import type { Params as ApiFetchParams } from 'lib/api/useApiFetch';
+
+import { getResourceKey } from './useApiQuery';
+
+type TQueryData<R extends PaginatedResources> = ResourcePayload<R>;
+type TError = ResourceError<unknown>;
+type TPageParam<R extends PaginatedResources> = ApiFetchParams<R>['queryParams'] | null;
+
+export interface Params<R extends PaginatedResources> {
+  resourceName: R;
+  // eslint-disable-next-line max-len
+  queryOptions?: Omit<UseInfiniteQueryOptions<TQueryData<R>, TError, InfiniteData<TQueryData<R>>, TQueryData<R>, QueryKey, TPageParam<R>>, 'queryKey' | 'queryFn' | 'getNextPageParam' | 'initialPageParam'>;
+  pathParams?: ApiFetchParams<R>['pathParams'];
+}
+
+type ReturnType<Resource extends PaginatedResources> = UseInfiniteQueryResult<InfiniteData<ResourcePayload<Resource>>, ResourceError<unknown>>;
+
+export default function useApiInfiniteQuery<R extends PaginatedResources>({
+  resourceName,
+  queryOptions,
+  pathParams,
+}: Params<R>): ReturnType<R> {
+  const apiFetch = useApiFetch();
+
+  return useInfiniteQuery<TQueryData<R>, TError, InfiniteData<TQueryData<R>>, QueryKey, TPageParam<R>>({
+    queryKey: getResourceKey(resourceName, { pathParams }),
+    queryFn: (context) => {
+      const queryParams = 'pageParam' in context ? (context.pageParam || undefined) : undefined;
+      return apiFetch(resourceName, { pathParams, queryParams }) as Promise<TQueryData<R>>;
+    },
+    initialPageParam: null,
+    getNextPageParam: (lastPage) => {
+      return lastPage.next_page_params as TPageParam<R>;
+    },
+    ...queryOptions,
+  });
+}
diff --git a/lib/api/useApiQuery.tsx b/lib/api/useApiQuery.tsx
index b383e3249c..6cd58c024e 100644
--- a/lib/api/useApiQuery.tsx
+++ b/lib/api/useApiQuery.tsx
@@ -1,22 +1,20 @@
 import type { UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 
-import type { ResourceError, ResourceName, ResourcePayload } from './resources';
-import type { Params as ApiFetchParams } from './useApiFetch';
+import type { Params as FetchParams } from 'lib/hooks/useFetch';
+
+import type { ResourceError, ResourceName, ResourcePathParams, ResourcePayload } from './resources';
 import useApiFetch from './useApiFetch';
 
-export interface Params<R extends ResourceName, E = unknown>
-  extends ApiFetchParams<R> {
-  queryOptions?: Omit<
-  UseQueryOptions<ResourcePayload<R>, ResourceError<E>, ResourcePayload<R>>,
-  'queryKey' | 'queryFn'
-  >;
+export interface Params<R extends ResourceName, E = unknown, D = ResourcePayload<R>> {
+  pathParams?: ResourcePathParams<R>;
+  queryParams?: Record<string, string | Array<string> | number | boolean | undefined>;
+  fetchParams?: Pick<FetchParams, 'body' | 'method' | 'headers'>;
+  queryOptions?: Partial<Omit<UseQueryOptions<ResourcePayload<R>, ResourceError<E>, D>, 'queryFn'>>;
+  logError?: boolean;
 }
 
-export function getResourceKey<R extends ResourceName>(
-  resource: R,
-  { pathParams, queryParams }: Params<R> = {},
-) {
+export function getResourceKey<R extends ResourceName>(resource: R, { pathParams, queryParams }: Params<R> = {}) {
   if (pathParams || queryParams) {
     return [ resource, { ...pathParams, ...queryParams } ];
   }
@@ -24,24 +22,19 @@ export function getResourceKey<R extends ResourceName>(
   return [ resource ];
 }
 
-export default function useApiQuery<R extends ResourceName, E = unknown>(
+export default function useApiQuery<R extends ResourceName, E = unknown, D = ResourcePayload<R>>(
   resource: R,
-  { queryOptions, pathParams, queryParams, fetchParams }: Params<R, E> = {},
+  { queryOptions, pathParams, queryParams, fetchParams, logError }: Params<R, E, D> = {},
 ) {
   const apiFetch = useApiFetch();
 
-  return useQuery<ResourcePayload<R>, ResourceError<E>, ResourcePayload<R>>({
-    // eslint-disable-next-line @tanstack/query/exhaustive-deps
-    queryKey: getResourceKey(resource, { pathParams, queryParams }),
-    queryFn: async() => {
+  return useQuery<ResourcePayload<R>, ResourceError<E>, D>({
+    queryKey: queryOptions?.queryKey || getResourceKey(resource, { pathParams, queryParams }),
+    queryFn: async({ signal }) => {
       // all errors and error typing is handled by react-query
       // so error response will never go to the data
       // that's why we are safe here to do type conversion "as Promise<ResourcePayload<R>>"
-      return apiFetch(resource, {
-        pathParams,
-        queryParams,
-        fetchParams,
-      }) as Promise<ResourcePayload<R>>;
+      return apiFetch(resource, { pathParams, queryParams, logError, fetchParams: { ...fetchParams, signal } }) as Promise<ResourcePayload<R>>;
     },
     ...queryOptions,
   });
diff --git a/lib/blob/guessDataType.ts b/lib/blob/guessDataType.ts
new file mode 100644
index 0000000000..ea149236a0
--- /dev/null
+++ b/lib/blob/guessDataType.ts
@@ -0,0 +1,12 @@
+import filetype from 'magic-bytes.js';
+
+import hexToBytes from 'lib/hexToBytes';
+
+import removeNonSignificantZeroBytes from './removeNonSignificantZeroBytes';
+
+export default function guessDataType(data: string) {
+  const bytes = hexToBytes(data);
+  const filteredBytes = removeNonSignificantZeroBytes(bytes);
+
+  return filetype(filteredBytes)[0];
+}
diff --git a/lib/blob/index.ts b/lib/blob/index.ts
new file mode 100644
index 0000000000..ab178e8231
--- /dev/null
+++ b/lib/blob/index.ts
@@ -0,0 +1 @@
+export { default as guessDataType } from './guessDataType';
diff --git a/lib/blob/removeNonSignificantZeroBytes.ts b/lib/blob/removeNonSignificantZeroBytes.ts
new file mode 100644
index 0000000000..9b25287478
--- /dev/null
+++ b/lib/blob/removeNonSignificantZeroBytes.ts
@@ -0,0 +1,20 @@
+export default function removeNonSignificantZeroBytes(bytes: Uint8Array) {
+  return shouldRemoveBytes(bytes) ? bytes.filter((item, index) => index % 32) : bytes;
+}
+
+// check if every 0, 32, 64, etc byte is 0 in the provided array
+function shouldRemoveBytes(bytes: Uint8Array) {
+  let result = true;
+
+  for (let index = 0; index < bytes.length; index += 32) {
+    const element = bytes[index];
+    if (element === 0) {
+      continue;
+    } else {
+      result = false;
+      break;
+    }
+  }
+
+  return result;
+}
diff --git a/lib/block/getBlockReward.ts b/lib/block/getBlockReward.ts
index 3c00ac8d19..dfe2558232 100644
--- a/lib/block/getBlockReward.ts
+++ b/lib/block/getBlockReward.ts
@@ -3,7 +3,7 @@ import BigNumber from 'bignumber.js';
 import type { Block } from 'types/api/block';
 
 export default function getBlockReward(block: Block) {
-  const txFees = BigNumber(block.tx_fees || 0);
+  const txFees = BigNumber(block.transaction_fees || 0);
   const burntFees = BigNumber(block.burnt_fees || 0);
   const minerReward = block.rewards?.find(({ type }) => type === 'Miner Reward' || type === 'Validator Reward')?.reward;
   const totalReward = BigNumber(minerReward || 0);
diff --git a/lib/bytesToBase64.ts b/lib/bytesToBase64.ts
new file mode 100644
index 0000000000..60b23ad437
--- /dev/null
+++ b/lib/bytesToBase64.ts
@@ -0,0 +1,10 @@
+export default function bytesToBase64(bytes: Uint8Array) {
+  let binary = '';
+  for (const byte of bytes) {
+    binary += String.fromCharCode(byte);
+  }
+
+  const base64String = btoa(binary);
+
+  return base64String;
+}
diff --git a/lib/bytesToHex.ts b/lib/bytesToHex.ts
new file mode 100644
index 0000000000..be2a1c2757
--- /dev/null
+++ b/lib/bytesToHex.ts
@@ -0,0 +1,8 @@
+export default function bytesToBase64(bytes: Uint8Array) {
+  let result = '';
+  for (const byte of bytes) {
+    result += Number(byte).toString(16).padStart(2, '0');
+  }
+
+  return `0x${ result }`;
+}
diff --git a/lib/capitalizeFirstLetter.ts b/lib/capitalizeFirstLetter.ts
new file mode 100644
index 0000000000..ae054d9423
--- /dev/null
+++ b/lib/capitalizeFirstLetter.ts
@@ -0,0 +1,7 @@
+export default function capitalizeFirstLetter(text: string) {
+  if (!text || !text.length) {
+    return '';
+  }
+
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
diff --git a/lib/contexts/addressHighlight.tsx b/lib/contexts/addressHighlight.tsx
index f4bb79e8ff..085e676ecc 100644
--- a/lib/contexts/addressHighlight.tsx
+++ b/lib/contexts/addressHighlight.tsx
@@ -5,7 +5,6 @@ interface AddressHighlightProviderProps {
 }
 
 interface TAddressHighlightContext {
-  highlightedAddress: string | null;
   onMouseEnter: (event: React.MouseEvent) => void;
   onMouseLeave: (event: React.MouseEvent) => void;
 }
@@ -13,30 +12,40 @@ interface TAddressHighlightContext {
 export const AddressHighlightContext = React.createContext<TAddressHighlightContext | null>(null);
 
 export function AddressHighlightProvider({ children }: AddressHighlightProviderProps) {
-  const [ highlightedAddress, setHighlightedAddress ] = React.useState<string | null>(null);
   const timeoutId = React.useRef<number | null>(null);
+  const hashRef = React.useRef<string | null>(null);
 
   const onMouseEnter = React.useCallback((event: React.MouseEvent) => {
     const hash = event.currentTarget.getAttribute('data-hash');
     if (hash) {
+      hashRef.current = hash;
       timeoutId.current = window.setTimeout(() => {
-        setHighlightedAddress(hash);
+        // for better performance we update DOM-nodes directly bypassing React reconciliation
+        const nodes = window.document.querySelectorAll(`[data-hash="${ hashRef.current }"]`);
+        for (const node of nodes) {
+          node.classList.add('address-entity_highlighted');
+        }
       }, 100);
     }
   }, []);
 
   const onMouseLeave = React.useCallback(() => {
-    setHighlightedAddress(null);
+    if (hashRef.current) {
+      const nodes = window.document.querySelectorAll(`[data-hash="${ hashRef.current }"]`);
+      for (const node of nodes) {
+        node.classList.remove('address-entity_highlighted');
+      }
+      hashRef.current = null;
+    }
     typeof timeoutId.current === 'number' && window.clearTimeout(timeoutId.current);
   }, []);
 
   const value = React.useMemo(() => {
     return {
-      highlightedAddress,
       onMouseEnter,
       onMouseLeave,
     };
-  }, [ highlightedAddress, onMouseEnter, onMouseLeave ]);
+  }, [ onMouseEnter, onMouseLeave ]);
 
   React.useEffect(() => {
     return () => {
@@ -51,9 +60,9 @@ export function AddressHighlightProvider({ children }: AddressHighlightProviderP
   );
 }
 
-export function useAddressHighlightContext() {
+export function useAddressHighlightContext(disabled?: boolean) {
   const context = React.useContext(AddressHighlightContext);
-  if (context === undefined) {
+  if (context === undefined || disabled) {
     return null;
   }
   return context;
diff --git a/lib/contexts/app.tsx b/lib/contexts/app.tsx
index ec0a25e61b..f7672b5f21 100644
--- a/lib/contexts/app.tsx
+++ b/lib/contexts/app.tsx
@@ -1,21 +1,19 @@
 import React, { createContext, useContext } from 'react';
 
+import type { Route } from 'nextjs-routes';
 import type { Props as PageProps } from 'nextjs/getServerSideProps';
 
 type Props = {
   children: React.ReactNode;
   pageProps: PageProps;
-}
+};
 
 const AppContext = createContext<PageProps>({
   cookies: '',
   referrer: '',
-  id: '',
-  height_or_hash: '',
-  hash: '',
-  number: '',
-  q: '',
-  name: '',
+  query: {},
+  adBannerProvider: null,
+  apiData: null,
 });
 
 export function AppContextProvider({ children, pageProps }: Props) {
@@ -26,6 +24,6 @@ export function AppContextProvider({ children, pageProps }: Props) {
   );
 }
 
-export function useAppContext() {
-  return useContext(AppContext);
+export function useAppContext<Pathname extends Route['pathname'] = never>() {
+  return useContext<PageProps<Pathname>>(AppContext);
 }
diff --git a/lib/contexts/chakra.tsx b/lib/contexts/chakra.tsx
index 49aa0971f2..151d893dce 100644
--- a/lib/contexts/chakra.tsx
+++ b/lib/contexts/chakra.tsx
@@ -6,11 +6,13 @@ import {
 import type { ChakraProviderProps } from '@chakra-ui/react';
 import React from 'react';
 
+import theme from 'theme/theme';
+
 interface Props extends ChakraProviderProps {
   cookies?: string;
 }
 
-export function ChakraProvider({ cookies, theme, children }: Props) {
+export function ChakraProvider({ cookies, children }: Props) {
   const colorModeManager =
       typeof cookies === 'string' ?
         cookieStorageManagerSSR(typeof document !== 'undefined' ? document.cookie : cookies) :
diff --git a/lib/contexts/marketplace.tsx b/lib/contexts/marketplace.tsx
new file mode 100644
index 0000000000..61cde12624
--- /dev/null
+++ b/lib/contexts/marketplace.tsx
@@ -0,0 +1,48 @@
+import { useRouter } from 'next/router';
+import React, { createContext, useContext, useEffect, useState, useMemo } from 'react';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+type TMarketplaceContext = {
+  isAutoConnectDisabled: boolean;
+  setIsAutoConnectDisabled: (isAutoConnectDisabled: boolean) => void;
+};
+
+export const MarketplaceContext = createContext<TMarketplaceContext>({
+  isAutoConnectDisabled: false,
+  setIsAutoConnectDisabled: () => {},
+});
+
+export function MarketplaceContextProvider({ children }: Props) {
+  const router = useRouter();
+  const [ isAutoConnectDisabled, setIsAutoConnectDisabled ] = useState(false);
+
+  useEffect(() => {
+    const handleRouteChange = () => {
+      setIsAutoConnectDisabled(false);
+    };
+
+    router.events.on('routeChangeStart', handleRouteChange);
+
+    return () => {
+      router.events.off('routeChangeStart', handleRouteChange);
+    };
+  }, [ router.events ]);
+
+  const value = useMemo(() => ({
+    isAutoConnectDisabled,
+    setIsAutoConnectDisabled,
+  }), [ isAutoConnectDisabled, setIsAutoConnectDisabled ]);
+
+  return (
+    <MarketplaceContext.Provider value={ value }>
+      { children }
+    </MarketplaceContext.Provider>
+  );
+}
+
+export function useMarketplaceContext() {
+  return useContext(MarketplaceContext);
+}
diff --git a/lib/contexts/rewards.tsx b/lib/contexts/rewards.tsx
new file mode 100644
index 0000000000..c9a93f16bd
--- /dev/null
+++ b/lib/contexts/rewards.tsx
@@ -0,0 +1,289 @@
+import { useBoolean } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+import React, { createContext, useContext, useEffect, useMemo, useCallback } from 'react';
+import { useSignMessage } from 'wagmi';
+
+import type {
+  RewardsUserBalancesResponse, RewardsUserDailyCheckResponse,
+  RewardsNonceResponse, RewardsCheckUserResponse,
+  RewardsLoginResponse, RewardsCheckRefCodeResponse,
+  RewardsUserDailyClaimResponse, RewardsUserReferralsResponse,
+  RewardsConfigResponse,
+} from 'types/api/rewards';
+
+import config from 'configs/app';
+import type { ResourceError } from 'lib/api/resources';
+import useApiFetch from 'lib/api/useApiFetch';
+import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
+import { YEAR } from 'lib/consts';
+import * as cookies from 'lib/cookies';
+import decodeJWT from 'lib/decodeJWT';
+import getErrorMessage from 'lib/errors/getErrorMessage';
+import getErrorObjPayload from 'lib/errors/getErrorObjPayload';
+import useToast from 'lib/hooks/useToast';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import removeQueryParam from 'lib/router/removeQueryParam';
+import useAccount from 'lib/web3/useAccount';
+import useProfileQuery from 'ui/snippets/auth/useProfileQuery';
+
+const feature = config.features.rewards;
+
+type ContextQueryResult<Response> =
+  Pick<UseQueryResult<Response, ResourceError<unknown>>, 'data' | 'isLoading' | 'refetch' | 'isPending' | 'isFetching' | 'isError'>;
+
+type TRewardsContext = {
+  balancesQuery: ContextQueryResult<RewardsUserBalancesResponse>;
+  dailyRewardQuery: ContextQueryResult<RewardsUserDailyCheckResponse>;
+  referralsQuery: ContextQueryResult<RewardsUserReferralsResponse>;
+  rewardsConfigQuery: ContextQueryResult<RewardsConfigResponse>;
+  checkUserQuery: ContextQueryResult<RewardsCheckUserResponse>;
+  apiToken: string | undefined;
+  isInitialized: boolean;
+  isLoginModalOpen: boolean;
+  openLoginModal: () => void;
+  closeLoginModal: () => void;
+  login: (refCode: string) => Promise<{ isNewUser?: boolean; invalidRefCodeError?: boolean }>;
+  claim: () => Promise<void>;
+};
+
+const defaultQueryResult = {
+  data: undefined,
+  isLoading: false,
+  isPending: false,
+  isFetching: false,
+  isError: false,
+  refetch: () => Promise.resolve({} as never),
+};
+
+const initialState = {
+  balancesQuery: defaultQueryResult,
+  dailyRewardQuery: defaultQueryResult,
+  referralsQuery: defaultQueryResult,
+  rewardsConfigQuery: defaultQueryResult,
+  checkUserQuery: defaultQueryResult,
+  apiToken: undefined,
+  isInitialized: false,
+  isLoginModalOpen: false,
+  openLoginModal: () => {},
+  closeLoginModal: () => {},
+  login: async() => ({}),
+  claim: async() => {},
+};
+
+const RewardsContext = createContext<TRewardsContext>(initialState);
+
+// Message to sign for the rewards program
+function getMessageToSign(address: string, nonce: string, isLogin?: boolean, refCode?: string) {
+  const signInText = 'Sign-In for the Blockscout Merits program.';
+  const signUpText = 'Sign-Up for the Blockscout Merits program. I accept Terms of Service: https://merits.blockscout.com/terms. I love capybaras.';
+  const referralText = refCode ? ` Referral code: ${ refCode }` : '';
+  const body = isLogin ? signInText : signUpText + referralText;
+
+  const urlObj = window.location.hostname === 'localhost' && feature.isEnabled ?
+    new URL(feature.api.endpoint) :
+    window.location;
+
+  return [
+    `${ urlObj.hostname } wants you to sign in with your Ethereum account:`,
+    address,
+    '',
+    body,
+    '',
+    `URI: ${ urlObj.origin }`,
+    'Version: 1',
+    `Chain ID: ${ config.chain.id }`,
+    `Nonce: ${ nonce }`,
+    `Issued At: ${ new Date().toISOString() }`,
+    `Expiration Time: ${ new Date(Date.now() + YEAR).toISOString() }`,
+  ].join('\n');
+}
+
+// Get the registered address from the JWT token
+function getRegisteredAddress(token: string) {
+  const decodedToken = decodeJWT(token);
+  return decodedToken?.payload.sub;
+}
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export function RewardsContextProvider({ children }: Props) {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const apiFetch = useApiFetch();
+  const toast = useToast();
+  const { address } = useAccount();
+  const { signMessageAsync } = useSignMessage();
+  const profileQuery = useProfileQuery();
+
+  const [ isLoginModalOpen, setIsLoginModalOpen ] = useBoolean(false);
+  const [ isInitialized, setIsInitialized ] = useBoolean(false);
+  const [ apiToken, setApiToken ] = React.useState<string | undefined>();
+
+  // Initialize state with the API token from cookies
+  useEffect(() => {
+    if (!profileQuery.isLoading) {
+      const token = cookies.get(cookies.NAMES.REWARDS_API_TOKEN);
+      const registeredAddress = getRegisteredAddress(token || '');
+      if (registeredAddress === profileQuery.data?.address_hash) {
+        setApiToken(token);
+      }
+      setIsInitialized.on();
+    }
+  }, [ setIsInitialized, profileQuery ]);
+
+  // Save the API token to cookies and state
+  const saveApiToken = useCallback((token: string | undefined) => {
+    if (token) {
+      cookies.set(cookies.NAMES.REWARDS_API_TOKEN, token);
+    } else {
+      cookies.remove(cookies.NAMES.REWARDS_API_TOKEN);
+    }
+    setApiToken(token);
+  }, []);
+
+  const [ queryOptions, fetchParams ] = useMemo(() => [
+    { enabled: Boolean(apiToken) && feature.isEnabled },
+    { headers: { Authorization: `Bearer ${ apiToken }` } },
+  ], [ apiToken ]);
+
+  const balancesQuery = useApiQuery('rewards_user_balances', { queryOptions, fetchParams });
+  const dailyRewardQuery = useApiQuery('rewards_user_daily_check', { queryOptions, fetchParams });
+  const referralsQuery = useApiQuery('rewards_user_referrals', { queryOptions, fetchParams });
+  const rewardsConfigQuery = useApiQuery('rewards_config', { queryOptions: { enabled: feature.isEnabled } });
+  const checkUserQuery = useApiQuery('rewards_check_user', { queryOptions: { enabled: feature.isEnabled }, pathParams: { address } });
+
+  // Reset queries when the API token is removed
+  useEffect(() => {
+    if (isInitialized && !apiToken) {
+      queryClient.resetQueries({ queryKey: getResourceKey('rewards_user_balances'), exact: true });
+      queryClient.resetQueries({ queryKey: getResourceKey('rewards_user_daily_check'), exact: true });
+      queryClient.resetQueries({ queryKey: getResourceKey('rewards_user_referrals'), exact: true });
+    }
+  }, [ isInitialized, apiToken, queryClient ]);
+
+  // Handle 401 error
+  useEffect(() => {
+    if (apiToken && balancesQuery.error?.status === 401) {
+      saveApiToken(undefined);
+    }
+  }, [ balancesQuery.error, apiToken, saveApiToken ]);
+
+  // Check if the profile address is the same as the registered address
+  useEffect(() => {
+    const registeredAddress = getRegisteredAddress(apiToken || '');
+    if (registeredAddress && !profileQuery.isLoading && profileQuery.data?.address_hash !== registeredAddress) {
+      setApiToken(undefined);
+    }
+  }, [ apiToken, profileQuery, setApiToken ]);
+
+  // Handle referral code in the URL
+  useEffect(() => {
+    const refCode = getQueryParamString(router.query.ref);
+    if (refCode && isInitialized) {
+      cookies.set(cookies.NAMES.REWARDS_REFERRAL_CODE, refCode);
+      removeQueryParam(router, 'ref');
+      if (!apiToken) {
+        setIsLoginModalOpen.on();
+      }
+    }
+  }, [ router, apiToken, isInitialized, setIsLoginModalOpen ]);
+
+  const errorToast = useCallback((error: unknown) => {
+    const apiError = getErrorObjPayload<{ message: string }>(error);
+    toast({
+      position: 'top-right',
+      title: 'Error',
+      description: apiError?.message || getErrorMessage(error) || 'Something went wrong. Try again later.',
+      status: 'error',
+      variant: 'subtle',
+      isClosable: true,
+    });
+  }, [ toast ]);
+
+  // Login to the rewards program
+  const login = useCallback(async(refCode: string) => {
+    try {
+      if (!address) {
+        throw new Error();
+      }
+      const [ nonceResponse, checkCodeResponse ] = await Promise.all([
+        apiFetch('rewards_nonce') as Promise<RewardsNonceResponse>,
+        refCode ?
+          apiFetch('rewards_check_ref_code', { pathParams: { code: refCode } }) as Promise<RewardsCheckRefCodeResponse> :
+          Promise.resolve({ valid: true }),
+      ]);
+      if (!checkCodeResponse.valid) {
+        return { invalidRefCodeError: true };
+      }
+      const message = getMessageToSign(address, nonceResponse.nonce, checkUserQuery.data?.exists, refCode);
+      const signature = await signMessageAsync({ message });
+      const loginResponse = await apiFetch('rewards_login', {
+        fetchParams: {
+          method: 'POST',
+          body: {
+            nonce: nonceResponse.nonce,
+            message,
+            signature,
+          },
+        },
+      }) as RewardsLoginResponse;
+      saveApiToken(loginResponse.token);
+      return { isNewUser: loginResponse.created };
+    } catch (_error) {
+      errorToast(_error);
+      throw _error;
+    }
+  }, [ apiFetch, address, signMessageAsync, errorToast, saveApiToken, checkUserQuery ]);
+
+  // Claim daily reward
+  const claim = useCallback(async() => {
+    try {
+      await apiFetch('rewards_user_daily_claim', {
+        fetchParams: {
+          method: 'POST',
+          ...fetchParams,
+        },
+      }) as RewardsUserDailyClaimResponse;
+    } catch (_error) {
+      errorToast(_error);
+      throw _error;
+    }
+  }, [ apiFetch, errorToast, fetchParams ]);
+
+  const value = useMemo(() => {
+    if (!feature.isEnabled) {
+      return initialState;
+    }
+    return {
+      balancesQuery,
+      dailyRewardQuery,
+      referralsQuery,
+      rewardsConfigQuery,
+      checkUserQuery,
+      apiToken,
+      isInitialized,
+      isLoginModalOpen,
+      openLoginModal: setIsLoginModalOpen.on,
+      closeLoginModal: setIsLoginModalOpen.off,
+      login,
+      claim,
+    };
+  }, [
+    isLoginModalOpen, setIsLoginModalOpen, balancesQuery, dailyRewardQuery, checkUserQuery,
+    apiToken, login, claim, referralsQuery, rewardsConfigQuery, isInitialized,
+  ]);
+
+  return (
+    <RewardsContext.Provider value={ value }>
+      { children }
+    </RewardsContext.Provider>
+  );
+}
+
+export function useRewardsContext() {
+  return useContext(RewardsContext);
+}
diff --git a/lib/contexts/settings.tsx b/lib/contexts/settings.tsx
new file mode 100644
index 0000000000..054248acf9
--- /dev/null
+++ b/lib/contexts/settings.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { ADDRESS_FORMATS, type AddressFormat } from 'types/views/address';
+
+import * as cookies from 'lib/cookies';
+
+import { useAppContext } from './app';
+
+interface SettingsProviderProps {
+  children: React.ReactNode;
+}
+
+interface TSettingsContext {
+  addressFormat: AddressFormat;
+  toggleAddressFormat: () => void;
+}
+
+export const SettingsContext = React.createContext<TSettingsContext | null>(null);
+
+export function SettingsContextProvider({ children }: SettingsProviderProps) {
+  const { cookies: appCookies } = useAppContext();
+  const initialAddressFormat = cookies.get(cookies.NAMES.ADDRESS_FORMAT, appCookies);
+
+  const [ addressFormat, setAddressFormat ] = React.useState<AddressFormat>(
+    initialAddressFormat && ADDRESS_FORMATS.includes(initialAddressFormat as AddressFormat) ? initialAddressFormat as AddressFormat : 'base16',
+  );
+
+  const toggleAddressFormat = React.useCallback(() => {
+    setAddressFormat(prev => {
+      const nextValue = prev === 'base16' ? 'bech32' : 'base16';
+      cookies.set(cookies.NAMES.ADDRESS_FORMAT, nextValue);
+      return nextValue;
+    });
+  }, []);
+
+  const value = React.useMemo(() => {
+    return {
+      addressFormat,
+      toggleAddressFormat,
+    };
+  }, [ addressFormat, toggleAddressFormat ]);
+
+  return (
+    <SettingsContext.Provider value={ value }>
+      { children }
+    </SettingsContext.Provider>
+  );
+}
+
+export function useSettingsContext(disabled?: boolean) {
+  const context = React.useContext(SettingsContext);
+  if (context === undefined || disabled) {
+    return null;
+  }
+  return context;
+}
diff --git a/lib/contracts/formatLanguageName.tsx b/lib/contracts/formatLanguageName.tsx
new file mode 100644
index 0000000000..e1e9c6d233
--- /dev/null
+++ b/lib/contracts/formatLanguageName.tsx
@@ -0,0 +1,3 @@
+export default function formatLanguageName(language: string) {
+  return language.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase());
+}
diff --git a/lib/contracts/licenses.ts b/lib/contracts/licenses.ts
new file mode 100644
index 0000000000..123149e294
--- /dev/null
+++ b/lib/contracts/licenses.ts
@@ -0,0 +1,88 @@
+import type { ContractLicense } from 'types/client/contract';
+
+export const CONTRACT_LICENSES: Array<ContractLicense> = [
+  {
+    type: 'none',
+    label: 'None',
+    title: 'No License',
+    url: 'https://choosealicense.com/no-permission/',
+  },
+  {
+    type: 'unlicense',
+    label: 'Unlicense',
+    title: 'The Unlicense',
+    url: 'https://choosealicense.com/licenses/unlicense/',
+  },
+  {
+    type: 'mit',
+    label: 'MIT',
+    title: 'MIT License',
+    url: 'https://choosealicense.com/licenses/mit/',
+  },
+  {
+    type: 'gnu_gpl_v2',
+    label: 'GNU GPLv2',
+    title: 'GNU General Public License v2.0',
+    url: 'https://choosealicense.com/licenses/gpl-2.0/',
+  },
+  {
+    type: 'gnu_gpl_v3',
+    label: 'GNU GPLv3',
+    title: 'GNU General Public License v3.0',
+    url: 'https://choosealicense.com/licenses/gpl-3.0/',
+  },
+  {
+    type: 'gnu_lgpl_v2_1',
+    label: 'GNU LGPLv2.1',
+    title: 'GNU Lesser General Public License v2.1',
+    url: 'https://choosealicense.com/licenses/lgpl-2.1/',
+  },
+  {
+    type: 'gnu_lgpl_v3',
+    label: 'GNU LGPLv3',
+    title: 'GNU Lesser General Public License v3.0',
+    url: 'https://choosealicense.com/licenses/lgpl-3.0/',
+  },
+  {
+    type: 'bsd_2_clause',
+    label: 'BSD-2-Clause',
+    title: 'BSD 2-clause "Simplified" license',
+    url: 'https://choosealicense.com/licenses/bsd-2-clause/',
+  },
+  {
+    type: 'bsd_3_clause',
+    label: 'BSD-3-Clause',
+    title: 'BSD 3-clause "New" Or "Revised" license',
+    url: 'https://choosealicense.com/licenses/bsd-3-clause/',
+  },
+  {
+    type: 'mpl_2_0',
+    label: 'MPL-2.0',
+    title: 'Mozilla Public License 2.0',
+    url: 'https://choosealicense.com/licenses/mpl-2.0/',
+  },
+  {
+    type: 'osl_3_0',
+    label: 'OSL-3.0',
+    title: 'Open Software License 3.0',
+    url: 'https://choosealicense.com/licenses/osl-3.0/',
+  },
+  {
+    type: 'apache_2_0',
+    label: 'Apache',
+    title: 'Apache 2.0',
+    url: 'https://choosealicense.com/licenses/apache-2.0/',
+  },
+  {
+    type: 'gnu_agpl_v3',
+    label: 'GNU AGPLv3',
+    title: 'GNU Affero General Public License',
+    url: 'https://choosealicense.com/licenses/agpl-3.0/',
+  },
+  {
+    type: 'bsl_1_1',
+    label: 'BSL 1.1',
+    title: 'Business Source License',
+    url: 'https://mariadb.com/bsl11/',
+  },
+];
diff --git a/lib/cookies.ts b/lib/cookies.ts
index 7f3867f9e6..fc4f8cc144 100644
--- a/lib/cookies.ts
+++ b/lib/cookies.ts
@@ -3,18 +3,20 @@ import Cookies from 'js-cookie';
 import isBrowser from './isBrowser';
 
 export enum NAMES {
-  NAV_BAR_COLLAPSED='nav_bar_collapsed',
-  API_TOKEN='_explorer_key',
-  INVALID_SESSION='invalid_session',
-  CONFIRM_EMAIL_PAGE_VIEWED='confirm_email_page_viewed',
-  TXS_SORT='txs_sort',
-  COLOR_MODE='chakra-ui-color-mode',
-  COLOR_MODE_HEX='chakra-ui-color-mode-hex',
-  INDEXING_ALERT='indexing_alert',
-  ADBLOCK_DETECTED='adblock_detected',
-  MIXPANEL_DEBUG='_mixpanel_debug',
-  ADDRESS_NFT_DISPLAY_TYPE='address_nft_display_type',
-  UUID='uuid',
+  NAV_BAR_COLLAPSED = 'nav_bar_collapsed',
+  API_TOKEN = '_explorer_key',
+  REWARDS_API_TOKEN = 'rewards_api_token',
+  REWARDS_REFERRAL_CODE = 'rewards_ref_code',
+  TXS_SORT = 'txs_sort',
+  COLOR_MODE = 'chakra-ui-color-mode',
+  COLOR_MODE_HEX = 'chakra-ui-color-mode-hex',
+  ADDRESS_IDENTICON_TYPE = 'address_identicon_type',
+  ADDRESS_FORMAT = 'address_format',
+  INDEXING_ALERT = 'indexing_alert',
+  ADBLOCK_DETECTED = 'adblock_detected',
+  MIXPANEL_DEBUG = '_mixpanel_debug',
+  ADDRESS_NFT_DISPLAY_TYPE = 'address_nft_display_type',
+  UUID = 'uuid',
 }
 
 export function get(name?: NAMES | undefined | null, serverCookie?: string) {
@@ -27,12 +29,16 @@ export function get(name?: NAMES | undefined | null, serverCookie?: string) {
   }
 }
 
-export function set(name: string, value: string, attributes: Cookies.CookieAttributes = {}) {
+export function set(name: NAMES, value: string, attributes: Cookies.CookieAttributes = {}) {
   attributes.path = '/';
 
   return Cookies.set(name, value, attributes);
 }
 
+export function remove(name: NAMES, attributes: Cookies.CookieAttributes = {}) {
+  return Cookies.remove(name, attributes);
+}
+
 export function getFromCookieString(cookieString: string, name?: NAMES | undefined | null) {
   return cookieString.split(`${ name }=`)[1]?.split(';')[0];
 }
diff --git a/lib/date/dayjs.ts b/lib/date/dayjs.ts
index 06b53c01d6..e0191ce1e0 100644
--- a/lib/date/dayjs.ts
+++ b/lib/date/dayjs.ts
@@ -38,6 +38,7 @@ dayjs.extend(minMax);
 dayjs.updateLocale('en', {
   formats: {
     llll: `MMM DD YYYY HH:mm:ss A (Z${ nbsp }UTC)`,
+    lll: 'MMM D, YYYY h:mm A',
   },
   relativeTime: {
     s: '1s',
diff --git a/lib/decodeJWT.ts b/lib/decodeJWT.ts
new file mode 100644
index 0000000000..d94e21d4de
--- /dev/null
+++ b/lib/decodeJWT.ts
@@ -0,0 +1,47 @@
+interface JWTHeader {
+  alg: string;
+  typ?: string;
+  [key: string]: unknown;
+}
+
+interface JWTPayload {
+  [key: string]: unknown;
+}
+
+const base64UrlDecode = (str: string): string => {
+  // Replace characters according to Base64Url standard
+  str = str.replace(/-/g, '+').replace(/_/g, '/');
+
+  // Add padding '=' characters for correct decoding
+  const pad = str.length % 4;
+  if (pad) {
+    str += '='.repeat(4 - pad);
+  }
+
+  // Decode from Base64 to string
+  const decodedStr = atob(str);
+
+  return decodedStr;
+};
+
+export default function decodeJWT(token: string): { header: JWTHeader; payload: JWTPayload; signature: string } | null {
+  try {
+    const parts = token.split('.');
+
+    if (parts.length !== 3) {
+      throw new Error('Invalid JWT format');
+    }
+
+    const [ encodedHeader, encodedPayload, signature ] = parts;
+
+    const headerJson = base64UrlDecode(encodedHeader);
+    const payloadJson = base64UrlDecode(encodedPayload);
+
+    const header = JSON.parse(headerJson) as JWTHeader;
+    const payload = JSON.parse(payloadJson) as JWTPayload;
+
+    return { header, payload, signature };
+  } catch (error) {
+    return null;
+  }
+}
diff --git a/lib/errors/getErrorMessage.ts b/lib/errors/getErrorMessage.ts
new file mode 100644
index 0000000000..5e15f29a1c
--- /dev/null
+++ b/lib/errors/getErrorMessage.ts
@@ -0,0 +1,6 @@
+import getErrorObj from './getErrorObj';
+
+export default function getErrorMessage(error: unknown): string | undefined {
+  const errorObj = getErrorObj(error);
+  return errorObj && 'message' in errorObj && typeof errorObj.message === 'string' ? errorObj.message : undefined;
+}
diff --git a/lib/errors/throwOnResourceLoadError.ts b/lib/errors/throwOnResourceLoadError.ts
index 32e5169fc7..64075213cf 100644
--- a/lib/errors/throwOnResourceLoadError.ts
+++ b/lib/errors/throwOnResourceLoadError.ts
@@ -8,7 +8,7 @@ type Params = ({
   error: null;
 }) & {
   resource?: ResourceName;
-}
+};
 
 export const RESOURCE_LOAD_ERROR_MESSAGE = 'Resource load error';
 
diff --git a/lib/getFilterValuesFromQuery.ts b/lib/getFilterValuesFromQuery.ts
index ce5eddeb63..1ba9243d63 100644
--- a/lib/getFilterValuesFromQuery.ts
+++ b/lib/getFilterValuesFromQuery.ts
@@ -1,14 +1,10 @@
+import getValuesArrayFromQuery from './getValuesArrayFromQuery';
+
 export default function getFilterValue<FilterType>(filterValues: ReadonlyArray<FilterType>, val: string | Array<string> | undefined) {
-  if (val === undefined) {
-    return;
-  }
+  const valArray = getValuesArrayFromQuery(val);
 
-  const valArray = [];
-  if (typeof val === 'string') {
-    valArray.push(...val.split(','));
-  }
-  if (Array.isArray(val)) {
-    val.forEach(el => valArray.push(...el.split(',')));
+  if (!valArray) {
+    return;
   }
 
   return valArray.filter(el => filterValues.includes(el as unknown as FilterType)) as unknown as Array<FilterType>;
diff --git a/lib/getItemIndex.ts b/lib/getItemIndex.ts
new file mode 100644
index 0000000000..6103c23ddd
--- /dev/null
+++ b/lib/getItemIndex.ts
@@ -0,0 +1,5 @@
+const DEFAULT_PAGE_SIZE = 50;
+
+export default function getItemIndex(index: number, page: number, pageSize: number = DEFAULT_PAGE_SIZE) {
+  return (page - 1) * pageSize + index + 1;
+};
diff --git a/lib/getValuesArrayFromQuery.ts b/lib/getValuesArrayFromQuery.ts
new file mode 100644
index 0000000000..647eb03cb3
--- /dev/null
+++ b/lib/getValuesArrayFromQuery.ts
@@ -0,0 +1,18 @@
+export default function getValuesArrayFromQuery(val: string | Array<string> | undefined) {
+  if (val === undefined) {
+    return;
+  }
+
+  const valArray = [];
+  if (typeof val === 'string') {
+    valArray.push(...val.split(','));
+  }
+  if (Array.isArray(val)) {
+    if (!val.length) {
+      return;
+    }
+    val.forEach(el => valArray.push(...el.split(',')));
+  }
+
+  return valArray;
+}
diff --git a/lib/growthbook/init.ts b/lib/growthbook/init.ts
index 15188c8c7c..d98b2b94b7 100644
--- a/lib/growthbook/init.ts
+++ b/lib/growthbook/init.ts
@@ -7,7 +7,6 @@ import { STORAGE_KEY, STORAGE_LIMIT } from './consts';
 
 export interface GrowthBookFeatures {
   test_value: string;
-  marketplace_exp: boolean;
 }
 
 export const growthBook = (() => {
diff --git a/lib/hexToBase64.ts b/lib/hexToBase64.ts
new file mode 100644
index 0000000000..6fced2dc39
--- /dev/null
+++ b/lib/hexToBase64.ts
@@ -0,0 +1,8 @@
+import bytesToBase64 from './bytesToBase64';
+import hexToBytes from './hexToBytes';
+
+export default function hexToBase64(hex: string) {
+  const bytes = hexToBytes(hex);
+
+  return bytesToBase64(bytes);
+}
diff --git a/lib/hexToBytes.ts b/lib/hexToBytes.ts
index 382fd777d3..d42c931930 100644
--- a/lib/hexToBytes.ts
+++ b/lib/hexToBytes.ts
@@ -1,7 +1,9 @@
+// hex can be with prefix  - `0x{string}` - or without it - `{string}`
 export default function hexToBytes(hex: string) {
   const bytes = [];
-  for (let c = 0; c < hex.length; c += 2) {
+  const startIndex = hex.startsWith('0x') ? 2 : 0;
+  for (let c = startIndex; c < hex.length; c += 2) {
     bytes.push(parseInt(hex.substring(c, c + 2), 16));
   }
-  return bytes;
+  return new Uint8Array(bytes);
 }
diff --git a/lib/hexToUtf8.ts b/lib/hexToUtf8.ts
index 8766ee25cc..95e40ba090 100644
--- a/lib/hexToUtf8.ts
+++ b/lib/hexToUtf8.ts
@@ -2,7 +2,7 @@ import hexToBytes from 'lib/hexToBytes';
 
 export default function hexToUtf8(hex: string) {
   const utf8decoder = new TextDecoder();
-  const bytes = new Uint8Array(hexToBytes(hex));
+  const bytes = hexToBytes(hex);
 
   return utf8decoder.decode(bytes);
 }
diff --git a/lib/hooks/useAdblockDetect.tsx b/lib/hooks/useAdblockDetect.tsx
index e0ee312647..a3b42de1dd 100644
--- a/lib/hooks/useAdblockDetect.tsx
+++ b/lib/hooks/useAdblockDetect.tsx
@@ -1,22 +1,46 @@
 import { useEffect } from 'react';
 
+import type { AdBannerProviders } from 'types/client/adProviders';
+
+import config from 'configs/app';
 import { useAppContext } from 'lib/contexts/app';
 import * as cookies from 'lib/cookies';
 import isBrowser from 'lib/isBrowser';
 
+const DEFAULT_URL = 'https://request-global.czilladx.com';
+
+// in general, detect should work with any ad-provider url (that is alive)
+// but we see some false-positive results in certain browsers
+const TEST_URLS: Record<AdBannerProviders, string> = {
+  slise: 'https://v1.slise.xyz/serve',
+  coinzilla: 'https://request-global.czilladx.com',
+  adbutler: 'https://servedbyadbutler.com/app.js',
+  hype: 'https://api.hypelab.com/v1/scripts/hp-sdk.js',
+  // I don't have an url for getit to test
+  // getit: DEFAULT_URL,
+  none: DEFAULT_URL,
+};
+
+const feature = config.features.adsBanner;
+
 export default function useAdblockDetect() {
   const hasAdblockCookie = cookies.get(cookies.NAMES.ADBLOCK_DETECTED, useAppContext().cookies);
+  const provider = feature.isEnabled && feature.provider;
 
   useEffect(() => {
-    if (isBrowser() && !hasAdblockCookie) {
-      const url = 'https://request-global.czilladx.com';
+    if (isBrowser() && !hasAdblockCookie && provider) {
+      const url = TEST_URLS[provider] || DEFAULT_URL;
       fetch(url, {
         method: 'HEAD',
         mode: 'no-cors',
         cache: 'no-store',
-      }).catch(() => {
-        cookies.set(cookies.NAMES.ADBLOCK_DETECTED, 'true', { expires: 1 });
-      });
+      })
+        .then(() => {
+          cookies.set(cookies.NAMES.ADBLOCK_DETECTED, 'false', { expires: 1 });
+        })
+        .catch(() => {
+          cookies.set(cookies.NAMES.ADBLOCK_DETECTED, 'true', { expires: 1 });
+        });
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
diff --git a/lib/hooks/useAddressProfileApiQuery.tsx b/lib/hooks/useAddressProfileApiQuery.tsx
new file mode 100644
index 0000000000..ef39555d43
--- /dev/null
+++ b/lib/hooks/useAddressProfileApiQuery.tsx
@@ -0,0 +1,44 @@
+import { useQuery } from '@tanstack/react-query';
+import * as v from 'valibot';
+
+import config from 'configs/app';
+import type { ResourceError } from 'lib/api/resources';
+import useFetch from 'lib/hooks/useFetch';
+
+const feature = config.features.addressProfileAPI;
+
+type AddressInfoApiQueryResponse = v.InferOutput<typeof AddressInfoSchema>;
+
+const AddressInfoSchema = v.object({
+  user_profile: v.object({
+    username: v.union([ v.string(), v.null() ]),
+  }),
+});
+
+const ERROR_NAME = 'Invalid response schema';
+
+export default function useAddressProfileApiQuery(hash: string | undefined, isEnabled = true) {
+  const fetch = useFetch();
+
+  return useQuery<unknown, ResourceError<unknown>, AddressInfoApiQueryResponse>({
+    queryKey: [ 'username_api', hash ],
+    queryFn: async() => {
+      if (!feature.isEnabled || !hash) {
+        return Promise.reject();
+      }
+
+      return fetch(feature.apiUrlTemplate.replace('{address}', hash));
+    },
+    enabled: isEnabled && Boolean(hash),
+    refetchOnMount: false,
+    select: (response) => {
+      const parsedResponse = v.safeParse(AddressInfoSchema, response);
+
+      if (!parsedResponse.success) {
+        throw Error(ERROR_NAME);
+      }
+
+      return parsedResponse.output;
+    },
+  });
+}
diff --git a/lib/hooks/useContractTabs.tsx b/lib/hooks/useContractTabs.tsx
deleted file mode 100644
index ca02f16ddd..0000000000
--- a/lib/hooks/useContractTabs.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-
-import type { Address } from 'types/api/address';
-
-import ContractCode from 'ui/address/contract/ContractCode';
-import ContractRead from 'ui/address/contract/ContractRead';
-import ContractWrite from 'ui/address/contract/ContractWrite';
-
-export default function useContractTabs(data: Address | undefined) {
-  return React.useMemo(() => {
-    return [
-      { id: 'contact_code', title: 'Code', component: <ContractCode addressHash={ data?.hash }/> },
-      // this is not implemented in api yet
-      // data?.has_decompiled_code ?
-      //   { id: 'contact_decompiled_code', title: 'Decompiled code', component: <div>Decompiled code</div> } :
-      //   undefined,
-      data?.has_methods_read ?
-        { id: 'read_contract', title: 'Read contract', component: <ContractRead/> } :
-        undefined,
-      data?.has_methods_read_proxy ?
-        { id: 'read_proxy', title: 'Read proxy', component: <ContractRead/> } :
-        undefined,
-      data?.has_custom_methods_read ?
-        { id: 'read_custom_methods', title: 'Read custom', component: <ContractRead/> } :
-        undefined,
-      data?.has_methods_write ?
-        { id: 'write_contract', title: 'Write contract', component: <ContractWrite/> } :
-        undefined,
-      data?.has_methods_write_proxy ?
-        { id: 'write_proxy', title: 'Write proxy', component: <ContractWrite/> } :
-        undefined,
-      data?.has_custom_methods_write ?
-        { id: 'write_custom_methods', title: 'Write custom', component: <ContractWrite/> } :
-        undefined,
-    ].filter(Boolean);
-  }, [ data ]);
-}
diff --git a/lib/hooks/useFetch.tsx b/lib/hooks/useFetch.tsx
index c32ecb1b21..ea1977f251 100644
--- a/lib/hooks/useFetch.tsx
+++ b/lib/hooks/useFetch.tsx
@@ -1,116 +1,97 @@
-import * as Sentry from '@sentry/react';
 import React from 'react';
 
-import isBodyAllowed from "lib/api/isBodyAllowed";
-import type {
-  ResourceError,
-  ResourceName,
-  ResourcePath,
-} from "lib/api/resources";
-import { boolApiNames } from "lib/api/resources";
+import isBodyAllowed from 'lib/api/isBodyAllowed';
+import type { ResourceError, ResourcePath } from 'lib/api/resources';
+import { useRollbar } from 'lib/rollbar';
 
 export interface Params {
-  method?: RequestInit["method"];
-  headers?: RequestInit["headers"];
-  signal?: RequestInit["signal"];
+  method?: RequestInit['method'];
+  headers?: RequestInit['headers'];
+  signal?: RequestInit['signal'];
   body?: Record<string, unknown> | FormData;
   credentials?: RequestCredentials;
 }
 
 interface Meta {
   resource?: ResourcePath;
-  omitSentryErrorLog?: boolean;
+  logError?: boolean;
 }
 
 export default function useFetch() {
-  return React.useCallback(
-    <Success, Error>(
-      path: string,
-      params?: Params,
-      meta?: Meta,
-      resourceName?: ResourceName,
-    ): Promise<Success | ResourceError<Error>> => {
-      const _body = params?.body;
-      const isFormData = _body instanceof FormData;
-      const withBody = isBodyAllowed(params?.method);
-
-      const body: FormData | string | undefined = (() => {
-        if (!withBody) {
-          return;
+  const rollbar = useRollbar();
+
+  return React.useCallback(<Success, Error>(path: string, params?: Params, meta?: Meta): Promise<Success | ResourceError<Error>> => {
+    const _body = params?.body;
+    const isFormData = _body instanceof FormData;
+    const withBody = isBodyAllowed(params?.method);
+
+    const body: FormData | string | undefined = (() => {
+      if (!withBody) {
+        return;
+      }
+
+      if (isFormData) {
+        return _body;
+      }
+
+      return JSON.stringify(_body);
+    })();
+
+    const reqParams = {
+      ...params,
+      body,
+      headers: {
+        ...(withBody && !isFormData ? { 'Content-type': 'application/json' } : undefined),
+        ...params?.headers,
+      },
+    };
+
+    return fetch(path, reqParams).then(response => {
+
+      const isJson = response.headers.get('content-type')?.includes('application/json');
+
+      if (!response.ok) {
+        const error = {
+          status: response.status,
+          statusText: response.statusText,
+        };
+
+        if (meta?.logError && rollbar) {
+          rollbar.warn('Client fetch failed', {
+            resource: meta?.resource,
+            status_code: error.status,
+            status_text: error.statusText,
+          });
         }
 
-        if (isFormData) {
-          return _body;
+        if (!isJson) {
+          return response.text().then(
+            (textError) => Promise.reject({
+              payload: textError,
+              status: response.status,
+              statusText: response.statusText,
+            }),
+          );
         }
 
-        return JSON.stringify(_body);
-      })();
-
-      const reqParams = {
-        ...params,
-        body,
-        headers: {
-          ...(withBody && !isFormData ?
-            { "Content-type": "application/json" } :
-            undefined),
-          ...params?.headers,
-        },
-      };
-
-      return fetch(path, reqParams).then((response) => {
-        if (!response.ok) {
-          const error = {
+        return response.json().then(
+          (jsonError) => Promise.reject({
+            payload: jsonError as Error,
             status: response.status,
             statusText: response.statusText,
-          };
-
-          if (!meta?.omitSentryErrorLog) {
-            Sentry.captureException(new Error("Client fetch failed"), {
-              tags: {
-                source: "fetch",
-                "source.resource": meta?.resource,
-                "status.code": error.status,
-                "status.text": error.statusText,
-              },
-            });
-          }
-
-          return response.json().then(
-            (jsonError) =>
-              Promise.reject({
-                payload: jsonError as Error,
-                status: response.status,
-                statusText: response.statusText,
-              }),
-            () => {
-              return Promise.reject(error);
-            },
-          );
-        } else {
-          if (resourceName && boolApiNames.includes(resourceName)) {
-            return new Promise((resolve, reject) => {
-              response.json().then((res: any) => {
-                if (resourceName === "bool_rpc") {
-                  if (!res.error) {
-                    resolve(res.result);
-                  } else {
-                    reject(res.error?.message);
-                  }
-                } else {
-                  if (res.code === "000") {
-                    resolve(res.data);
-                  } else {
-                    reject(new Error(res.message));
-                  }
-                }
-              });
-            });
-          } else {
-            return response.json() as Promise<Success>;
-          }
+          }),
+          () => {
+            return Promise.reject(error);
+          },
+        );
+
+      } else {
+        if (isJson) {
+          return response.json() as Promise<Success>;
         }
-      });
-    },
-    [],
-  );
+
+        return Promise.resolve() as Promise<Success>;
+      }
+    });
+  }, [ rollbar ]);
 }
diff --git a/lib/hooks/useFetchProfileInfo.tsx b/lib/hooks/useFetchProfileInfo.tsx
deleted file mode 100644
index 4df2f8d57b..0000000000
--- a/lib/hooks/useFetchProfileInfo.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import useApiQuery from 'lib/api/useApiQuery';
-import * as cookies from 'lib/cookies';
-
-export default function useFetchProfileInfo() {
-  return useApiQuery('user_info', {
-    queryOptions: {
-      refetchOnMount: false,
-      enabled: Boolean(cookies.get(cookies.NAMES.API_TOKEN)),
-    },
-  });
-}
diff --git a/lib/hooks/useGetCsrfToken.tsx b/lib/hooks/useGetCsrfToken.tsx
index 297f1567c2..e1db1e595f 100644
--- a/lib/hooks/useGetCsrfToken.tsx
+++ b/lib/hooks/useGetCsrfToken.tsx
@@ -1,4 +1,3 @@
-import * as Sentry from '@sentry/react';
 import { useQuery } from '@tanstack/react-query';
 
 import buildUrl from 'lib/api/buildUrl';
@@ -6,11 +5,13 @@ import isNeedProxy from 'lib/api/isNeedProxy';
 import { getResourceKey } from 'lib/api/useApiQuery';
 import * as cookies from 'lib/cookies';
 import useFetch from 'lib/hooks/useFetch';
+import { useRollbar } from 'lib/rollbar';
 
 export default function useGetCsrfToken() {
   const nodeApiFetch = useFetch();
+  const rollbar = useRollbar();
 
-  useQuery({
+  return useQuery({
     queryKey: getResourceKey('csrf'),
     queryFn: async() => {
       if (!isNeedProxy()) {
@@ -19,12 +20,11 @@ export default function useGetCsrfToken() {
         const csrfFromHeader = apiResponse.headers.get('x-bs-account-csrf');
 
         if (!csrfFromHeader) {
-          Sentry.captureException(new Error('Client fetch failed'), { tags: {
-            source: 'fetch',
-            'source.resource': 'csrf',
-            'status.code': 500,
-            'status.text': 'Unable to obtain csrf token from header',
-          } });
+          rollbar?.warn('Client fetch failed', {
+            resource: 'csrf',
+            status_code: 500,
+            status_text: 'Unable to obtain csrf token from header',
+          });
           return;
         }
 
diff --git a/lib/hooks/useGraphLinks.tsx b/lib/hooks/useGraphLinks.tsx
new file mode 100644
index 0000000000..b8f83b4cf8
--- /dev/null
+++ b/lib/hooks/useGraphLinks.tsx
@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+
+import config from 'configs/app';
+import type { ResourceError } from 'lib/api/resources';
+import useFetch from 'lib/hooks/useFetch';
+
+const feature = config.features.marketplace;
+
+export default function useGraphLinks() {
+  const fetch = useFetch();
+
+  return useQuery<unknown, ResourceError<unknown>, Record<string, Array<{ text: string; url: string }>>>({
+    queryKey: [ 'graph-links' ],
+    queryFn: async() => fetch((feature.isEnabled && feature.graphLinksUrl) ? feature.graphLinksUrl : '', undefined, { resource: 'graph-links' }),
+    enabled: feature.isEnabled && Boolean(feature.graphLinksUrl),
+    staleTime: Infinity,
+    placeholderData: {},
+  });
+}
diff --git a/lib/hooks/useHasAccount.ts b/lib/hooks/useHasAccount.ts
deleted file mode 100644
index d314f6f36a..0000000000
--- a/lib/hooks/useHasAccount.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import config from 'configs/app';
-import { useAppContext } from 'lib/contexts/app';
-import * as cookies from 'lib/cookies';
-
-export default function useHasAccount() {
-  const appProps = useAppContext();
-
-  if (!config.features.account.isEnabled) {
-    return false;
-  }
-
-  const cookiesString = appProps.cookies;
-  const hasAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN, cookiesString));
-  return hasAuth;
-}
diff --git a/lib/hooks/useIsAccountActionAllowed.tsx b/lib/hooks/useIsAccountActionAllowed.tsx
deleted file mode 100644
index c8df0912a3..0000000000
--- a/lib/hooks/useIsAccountActionAllowed.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useQueryClient } from '@tanstack/react-query';
-import React from 'react';
-
-import type { UserInfo } from 'types/api/account';
-
-import { resourceKey } from 'lib/api/resources';
-import useLoginUrl from 'lib/hooks/useLoginUrl';
-
-export default function useIsAccountActionAllowed() {
-  const queryClient = useQueryClient();
-
-  const profileData = queryClient.getQueryData<UserInfo>([ resourceKey('user_info') ]);
-  const isAuth = Boolean(profileData);
-  const loginUrl = useLoginUrl();
-
-  return React.useCallback(() => {
-    if (!loginUrl) {
-      return false;
-    }
-
-    if (!isAuth) {
-      window.location.assign(loginUrl);
-      return false;
-    }
-
-    return true;
-  }, [ isAuth, loginUrl ]);
-}
diff --git a/lib/hooks/useIsMounted.tsx b/lib/hooks/useIsMounted.tsx
new file mode 100644
index 0000000000..d14880ae1b
--- /dev/null
+++ b/lib/hooks/useIsMounted.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default function useIsMounted() {
+  const [ isMounted, setIsMounted ] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsMounted(true);
+  }, [ ]);
+
+  return isMounted;
+}
diff --git a/lib/hooks/useIsSafeAddress.tsx b/lib/hooks/useIsSafeAddress.tsx
index 49062f7cc2..7888050a6c 100644
--- a/lib/hooks/useIsSafeAddress.tsx
+++ b/lib/hooks/useIsSafeAddress.tsx
@@ -15,7 +15,7 @@ export default function useIsSafeAddress(hash: string | undefined): boolean {
         return Promise.reject();
       }
 
-      return fetch(`${ feature.apiUrl }/${ hash }`, undefined, { omitSentryErrorLog: true });
+      return fetch(`${ feature.apiUrl }/${ hash }`);
     },
     enabled: feature.isEnabled && Boolean(hash),
     refetchOnMount: false,
diff --git a/lib/hooks/useLazyRenderedList.tsx b/lib/hooks/useLazyRenderedList.tsx
index 245d8a0b0b..3f2d828fe0 100644
--- a/lib/hooks/useLazyRenderedList.tsx
+++ b/lib/hooks/useLazyRenderedList.tsx
@@ -5,12 +5,12 @@ import { useInView } from 'react-intersection-observer';
 const STEP = 10;
 const MIN_ITEMS_NUM = 50;
 
-export default function useLazyRenderedList(list: Array<unknown>, isEnabled: boolean) {
-  const [ renderedItemsNum, setRenderedItemsNum ] = React.useState(MIN_ITEMS_NUM);
+export default function useLazyRenderedList(list: Array<unknown>, isEnabled: boolean, minItemsNum: number = MIN_ITEMS_NUM) {
+  const [ renderedItemsNum, setRenderedItemsNum ] = React.useState(minItemsNum);
   const { ref, inView } = useInView({
     rootMargin: '200px',
     triggerOnce: false,
-    skip: !isEnabled || list.length <= MIN_ITEMS_NUM,
+    skip: !isEnabled || list.length <= minItemsNum,
   });
 
   React.useEffect(() => {
diff --git a/lib/hooks/useLoginUrl.tsx b/lib/hooks/useLoginUrl.tsx
deleted file mode 100644
index a111d1eebb..0000000000
--- a/lib/hooks/useLoginUrl.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useRouter } from 'next/router';
-
-import { route } from 'nextjs-routes';
-
-import config from 'configs/app';
-
-const feature = config.features.account;
-
-export default function useLoginUrl() {
-  const router = useRouter();
-  return feature.isEnabled ?
-    feature.authUrl + route({ pathname: '/auth/auth0', query: { path: router.asPath } }) :
-    undefined;
-}
diff --git a/lib/hooks/useNavItems.tsx b/lib/hooks/useNavItems.tsx
index 01710e80cc..bb7c48300f 100644
--- a/lib/hooks/useNavItems.tsx
+++ b/lib/hooks/useNavItems.tsx
@@ -1,41 +1,22 @@
-import { useRouter } from "next/router";
-import React from "react";
+import { useRouter } from 'next/router';
+import React from 'react';
 
-import type {
-  NavItemInternal,
-  NavItem,
-  NavGroupItem,
-  NavItemExternal,
-} from "types/client/navigation-items";
+import type { NavItemInternal, NavItem, NavGroupItem } from 'types/client/navigation';
 
-import config from "configs/app";
-import { rightLineArrow } from "lib/html-entities";
-import UserAvatar from "ui/shared/UserAvatar";
+import config from 'configs/app';
+import { rightLineArrow } from 'lib/html-entities';
 
 interface ReturnType {
   mainNavItems: Array<NavItem | NavGroupItem>;
   accountNavItems: Array<NavItem>;
-  profileItem: NavItem;
 }
 
-export function isGroupItem(
-  item: NavItem | NavGroupItem,
-): item is NavGroupItem {
-  return "subItems" in item;
+export function isGroupItem(item: NavItem | NavGroupItem): item is NavGroupItem {
+  return 'subItems' in item;
 }
 
 export function isInternalItem(item: NavItem): item is NavItemInternal {
-  return "nextRoute" in item;
-}
-
-function networkName() {
-  if (config.chain.isDevNet) {
-    return "alpha_testnet";
-  } else if (config.chain.isTestnet) {
-    return "testnet";
-  } else {
-    return "mainnet";
-  }
+  return 'nextRoute' in item;
 }
 
 export default function useNavItems(): ReturnType {
@@ -45,292 +26,301 @@ export default function useNavItems(): ReturnType {
   return React.useMemo(() => {
     let blockchainNavItems: Array<NavItem> | Array<Array<NavItem>> = [];
 
-    const topAccounts: NavItem | null = !config.UI.views.address.hiddenViews
-      ?.top_accounts ?
-      {
-        text: "Top accounts",
-        nextRoute: { pathname: "/accounts" as const },
-        icon: "top-accounts",
-        isActive: pathname === "/accounts",
-      } :
-      null;
+    const topAccounts: NavItem | null = !config.UI.views.address.hiddenViews?.top_accounts ? {
+      text: 'Top accounts',
+      nextRoute: { pathname: '/accounts' as const },
+      icon: 'top-accounts',
+      isActive: pathname === '/accounts',
+    } : null;
     const blocks: NavItem | null = {
-      text: "Blocks",
-      nextRoute: { pathname: "/blocks" as const },
-      icon: "block",
-      isActive:
-        pathname === "/blocks" || pathname === "/block/[height_or_hash]",
+      text: 'Blocks',
+      nextRoute: { pathname: '/blocks' as const },
+      icon: 'block',
+      isActive: pathname === '/blocks' || pathname === '/block/[height_or_hash]',
     };
     const txs: NavItem | null = {
-      text: "Transactions",
-      nextRoute: { pathname: "/txs" as const },
-      icon: "transactions",
-      isActive: pathname === "/txs" || pathname === "/tx/[hash]",
+      text: 'Transactions',
+      nextRoute: { pathname: '/txs' as const },
+      icon: 'transactions',
+      isActive: pathname === '/txs' || pathname === '/tx/[hash]',
     };
-    const userOps: NavItem | null = config.features.userOps.isEnabled ?
-      {
-        text: "User operations",
-        nextRoute: { pathname: "/ops" as const },
-        icon: "user_op",
-        isActive: pathname === "/ops" || pathname === "/op/[hash]",
-      } :
-      null;
+    const userOps: NavItem | null = config.features.userOps.isEnabled ? {
+      text: 'User operations',
+      nextRoute: { pathname: '/ops' as const },
+      icon: 'user_op',
+      isActive: pathname === '/ops' || pathname === '/op/[hash]',
+    } : null;
 
-    const verifiedContracts: NavItem | null = {
-      text: "Verified contracts",
-      nextRoute: { pathname: "/verified-contracts" as const },
-      icon: "verified",
-      isActive: pathname === "/verified-contracts",
+    const verifiedContracts: NavItem | null =
+     {
+       text: 'Verified contracts',
+       nextRoute: { pathname: '/verified-contracts' as const },
+       icon: 'verified',
+       isActive: pathname === '/verified-contracts',
+     };
+    const ensLookup = config.features.nameService.isEnabled ? {
+      text: 'Name services lookup',
+      nextRoute: { pathname: '/name-domains' as const },
+      icon: 'ENS',
+      isActive: pathname === '/name-domains' || pathname === '/name-domains/[name]',
+    } : null;
+    const validators = config.features.validators.isEnabled ? {
+      text: 'Top validators',
+      nextRoute: { pathname: '/validators' as const },
+      icon: 'validator',
+      isActive: pathname === '/validators',
+    } : null;
+    const rollupDeposits = {
+      text: `Deposits (L1${ rightLineArrow }L2)`,
+      nextRoute: { pathname: '/deposits' as const },
+      icon: 'arrows/south-east',
+      isActive: pathname === '/deposits',
     };
-    const ensLookup = config.features.nameService.isEnabled ?
-      {
-        text: "Name services lookup",
-        nextRoute: { pathname: "/name-domains" as const },
-        icon: "ENS",
-        isActive:
-            pathname === "/name-domains" || pathname === "/name-domains/[name]",
-      } :
-      null;
+    const rollupWithdrawals = {
+      text: `Withdrawals (L2${ rightLineArrow }L1)`,
+      nextRoute: { pathname: '/withdrawals' as const },
+      icon: 'arrows/north-east',
+      isActive: pathname === '/withdrawals',
+    };
+    const rollupTxnBatches = {
+      text: 'Txn batches',
+      nextRoute: { pathname: '/batches' as const },
+      icon: 'txn_batches',
+      isActive: pathname === '/batches',
+    };
+    const rollupOutputRoots = {
+      text: 'Output roots',
+      nextRoute: { pathname: '/output-roots' as const },
+      icon: 'output_roots',
+      isActive: pathname === '/output-roots',
+    };
+    const rollupDisputeGames = config.features.faultProofSystem.isEnabled ? {
+      text: 'Dispute games',
+      nextRoute: { pathname: '/dispute-games' as const },
+      icon: 'games',
+      isActive: pathname === '/dispute-games',
+    } : null;
+    const mudWorlds = config.features.mudFramework.isEnabled ? {
+      text: 'MUD worlds',
+      nextRoute: { pathname: '/mud-worlds' as const },
+      icon: 'MUD_menu',
+      isActive: pathname === '/mud-worlds',
+    } : null;
 
-    const validators: NavItem | undefined = config.app.hideNevs.includes(
-      "/validators",
-    ) ?
-      undefined :
-      {
-        text: "Validators",
-        nextRoute: { pathname: "/validators" as const },
-        icon: "bool/nodes",
-        isActive: pathname.startsWith("/validators"),
-      }; // beta testnet 中不显示
+    const rollupFeature = config.features.rollup;
 
-    if (config.features.zkEvmRollup.isEnabled) {
+    if (rollupFeature.isEnabled && (
+      rollupFeature.type === 'optimistic' ||
+      rollupFeature.type === 'arbitrum' ||
+      rollupFeature.type === 'zkEvm' ||
+      rollupFeature.type === 'scroll'
+    )) {
       blockchainNavItems = [
         [
           txs,
-          userOps,
+          rollupDeposits,
+          rollupWithdrawals,
+        ],
+        [
           blocks,
+          rollupTxnBatches,
+          rollupDisputeGames,
+          rollupFeature.outputRootsEnabled ? rollupOutputRoots : undefined,
+        ].filter(Boolean),
+        [
+          userOps,
+          topAccounts,
+          mudWorlds,
           validators,
-          {
-            text: "Txn batches",
-            nextRoute: { pathname: "/zkevm-l2-txn-batches" as const },
-            icon: "txn_batches",
-            isActive:
-              pathname === "/zkevm-l2-txn-batches" ||
-              pathname === "/zkevm-l2-txn-batch/[number]",
-          },
+          verifiedContracts,
+          ensLookup,
         ].filter(Boolean),
-        [ topAccounts, verifiedContracts, ensLookup ].filter(Boolean),
       ];
-    } else if (config.features.optimisticRollup.isEnabled) {
+    } else if (rollupFeature.isEnabled && rollupFeature.type === 'shibarium') {
       blockchainNavItems = [
         [
           txs,
-          // eslint-disable-next-line max-len
-          {
-            text: `Deposits (L1${ rightLineArrow }L2)`,
-            nextRoute: { pathname: "/l2-deposits" as const },
-            icon: "arrows/south-east",
-            isActive: pathname === "/l2-deposits",
-          },
-          // eslint-disable-next-line max-len
-          {
-            text: `Withdrawals (L2${ rightLineArrow }L1)`,
-            nextRoute: { pathname: "/l2-withdrawals" as const },
-            icon: "arrows/north-east",
-            isActive: pathname === "/l2-withdrawals",
-          },
+          rollupDeposits,
+          rollupWithdrawals,
         ],
         [
           blocks,
-          // eslint-disable-next-line max-len
-          {
-            text: "Txn batches",
-            nextRoute: { pathname: "/l2-txn-batches" as const },
-            icon: "txn_batches",
-            isActive: pathname === "/l2-txn-batches",
-          },
-          // eslint-disable-next-line max-len
-          {
-            text: "Output roots",
-            nextRoute: { pathname: "/l2-output-roots" as const },
-            icon: "output_roots",
-            isActive: pathname === "/l2-output-roots",
-          },
-        ],
-        [ userOps, topAccounts, verifiedContracts, ensLookup ].filter(Boolean),
+          userOps,
+          topAccounts,
+          verifiedContracts,
+          ensLookup,
+        ].filter(Boolean),
+      ];
+    } else if (rollupFeature.isEnabled && rollupFeature.type === 'zkSync') {
+      blockchainNavItems = [
+        [
+          txs,
+          userOps,
+          blocks,
+          rollupTxnBatches,
+        ].filter(Boolean),
+        [
+          topAccounts,
+          validators,
+          verifiedContracts,
+          ensLookup,
+        ].filter(Boolean),
       ];
     } else {
       blockchainNavItems = [
         txs,
         userOps,
         blocks,
-        validators,
         topAccounts,
+        validators,
         verifiedContracts,
         ensLookup,
         config.features.beaconChain.isEnabled && {
-          text: "Withdrawals",
-          nextRoute: { pathname: "/withdrawals" as const },
-          icon: "arrows/north-east",
-          isActive: pathname === "/withdrawals",
+          text: 'Withdrawals',
+          nextRoute: { pathname: '/withdrawals' as const },
+          icon: 'arrows/north-east',
+          isActive: pathname === '/withdrawals',
         },
       ].filter(Boolean);
     }
 
+    const tokensNavItems = [
+      {
+        text: 'Tokens',
+        nextRoute: { pathname: '/tokens' as const },
+        icon: 'token',
+        isActive: pathname === '/tokens' || pathname.startsWith('/token/'),
+      },
+      {
+        text: 'Token transfers',
+        nextRoute: { pathname: '/token-transfers' as const },
+        icon: 'token-transfers',
+        isActive: pathname === '/token-transfers',
+      },
+      config.features.pools.isEnabled && {
+        text: 'DEX tracker',
+        nextRoute: { pathname: '/pools' as const },
+        icon: 'dex-tracker',
+        isActive: pathname === '/pools' || pathname.startsWith('/pool/'),
+      },
+    ].filter(Boolean);
+
     const apiNavItems: Array<NavItem> = [
-      config.features.restApiDocs.isEnabled ?
-        {
-          text: "REST API",
-          nextRoute: { pathname: "/api-docs" as const },
-          icon: "restAPI",
-          isActive: pathname === "/api-docs",
-        } :
-        null,
-      config.features.graphqlApiDocs.isEnabled ?
-        {
-          text: "GraphQL",
-          nextRoute: { pathname: "/graphiql" as const },
-          icon: "graphQL",
-          isActive: pathname === "/graphiql",
-        } :
-        null,
-      !config.UI.sidebar.hiddenLinks?.rpc_api && {
-        text: "RPC API",
-        icon: "RPC",
-        url: "https://docs.blockscout.com/for-users/api/rpc-endpoints",
+      config.features.restApiDocs.isEnabled ? {
+        text: 'REST API',
+        nextRoute: { pathname: '/api-docs' as const },
+        icon: 'restAPI',
+        isActive: pathname === '/api-docs',
+      } : null,
+      config.features.graphqlApiDocs.isEnabled ? {
+        text: 'GraphQL',
+        nextRoute: { pathname: '/graphiql' as const },
+        icon: 'graphQL',
+        isActive: pathname === '/graphiql',
+      } : null,
+      !config.UI.navigation.hiddenLinks?.rpc_api && {
+        text: 'RPC API',
+        icon: 'RPC',
+        url: 'https://docs.blockscout.com/for-users/api/rpc-endpoints',
       },
-      !config.UI.sidebar.hiddenLinks?.eth_rpc_api && {
-        text: "Eth RPC API",
-        icon: "RPC",
-        url: " https://docs.blockscout.com/for-users/api/eth-rpc",
+      !config.UI.navigation.hiddenLinks?.eth_rpc_api && {
+        text: 'Eth RPC API',
+        icon: 'RPC',
+        url: ' https://docs.blockscout.com/for-users/api/eth-rpc',
       },
     ].filter(Boolean);
 
-    const mainNavItems: ReturnType["mainNavItems"] = [
+    const otherNavItems: Array<NavItem> | Array<Array<NavItem>> = [
       {
-        text: "Blockchain",
-        icon: "globe-b",
-        isActive: blockchainNavItems
-          .flat()
-          .some((item) => isInternalItem(item) && item.isActive),
+        text: 'Verify contract',
+        nextRoute: { pathname: '/contract-verification' as const },
+        isActive: pathname.startsWith('/contract-verification'),
+      },
+      config.features.gasTracker.isEnabled && {
+        text: 'Gas tracker',
+        nextRoute: { pathname: '/gas-tracker' as const },
+        isActive: pathname.startsWith('/gas-tracker'),
+      },
+      config.features.publicTagsSubmission.isEnabled && {
+        text: 'Submit public tag',
+        nextRoute: { pathname: '/public-tags/submit' as const },
+        isActive: pathname.startsWith('/public-tags/submit'),
+      },
+      ...config.UI.navigation.otherLinks,
+    ].filter(Boolean);
+
+    const mainNavItems: ReturnType['mainNavItems'] = [
+      {
+        text: 'Blockchain',
+        icon: 'globe-b',
+        isActive: blockchainNavItems.flat().some(item => isInternalItem(item) && item.isActive),
         subItems: blockchainNavItems,
       },
       {
-        text: "Tokens",
-        nextRoute: { pathname: "/tokens" as const },
-        icon: "token",
-        isActive: pathname.startsWith("/token"),
+        text: 'Tokens',
+        icon: 'token',
+        isActive: tokensNavItems.flat().some(item => isInternalItem(item) && item.isActive),
+        subItems: tokensNavItems,
       },
-      config.features.marketplace.isEnabled ?
-        {
-          text: "Apps",
-          nextRoute: { pathname: "/apps" as const },
-          icon: "apps",
-          isActive: pathname.startsWith("/app"),
-        } :
-        null,
-      config.features.stats.isEnabled ?
-        {
-          text: "Charts & Sats",
-          nextRoute: { pathname: "/stats" as const },
-          icon: "stats",
-          isActive: pathname === "/stats",
-        } :
-        null,
+      config.features.marketplace.isEnabled ? {
+        text: 'DApps',
+        nextRoute: { pathname: '/apps' as const },
+        icon: 'apps',
+        isActive: pathname.startsWith('/app'),
+      } : null,
+      config.features.stats.isEnabled ? {
+        text: 'Charts & stats',
+        nextRoute: { pathname: '/stats' as const },
+        icon: 'stats',
+        isActive: pathname.startsWith('/stats'),
+      } : null,
       apiNavItems.length > 0 && {
-        text: "API",
-        icon: "restAPI",
-        isActive: apiNavItems.some(
-          (item) => isInternalItem(item) && item.isActive,
-        ),
+        text: 'API',
+        icon: 'restAPI',
+        isActive: apiNavItems.some(item => isInternalItem(item) && item.isActive),
         subItems: apiNavItems,
       },
-      config.app.hideNevs.includes("/dhcs") ?
-        undefined :
-        {
-          text: "DHCs",
-          nextRoute: { pathname: "/dhcs" as const },
-          icon: "bool/provider",
-          isActive: pathname.startsWith("/dhcs"),
-        }, // beta testnet 中不显示
-      {
-        text: "Ecosystem",
-        icon: "ecosystem",
-        subItems: [
-          {
-            text: "Dashboard",
-            url: `https://dashboard.boolscan.com?network=${ networkName() }`,
-          },
-          {
-            text: "Bridge Explorer",
-            url: `https://bridge.boolscan.com?network=${ networkName() }`,
-          },
-          {
-            text: "Oracle Explorer",
-            url: `https://oracle.boolscan.com?network=${ networkName() }`,
-          },
-        ] as Array<NavItemExternal>,
-      },
       {
-        text: "Others",
-        icon: "gear",
-        subItems: [
-          {
-            text: "Verify contract",
-            nextRoute: { pathname: "/contract-verification" as const },
-            isActive: pathname.startsWith("/contract-verification"),
-          },
-          ...config.UI.sidebar.otherLinks,
-        ],
+        text: 'Other',
+        icon: 'gear',
+        isActive: otherNavItems.flat().some(item => isInternalItem(item) && item.isActive),
+        subItems: otherNavItems,
       },
     ].filter(Boolean);
 
-    const accountNavItems: ReturnType["accountNavItems"] = [
-      {
-        text: "Watch list",
-        nextRoute: { pathname: "/account/watchlist" as const },
-        icon: "watchlist",
-        isActive: pathname === "/account/watchlist",
-      },
+    const accountNavItems: ReturnType['accountNavItems'] = [
       {
-        text: "Private tags",
-        nextRoute: { pathname: "/account/tag-address" as const },
-        icon: "privattags",
-        isActive: pathname === "/account/tag-address",
+        text: 'Watch list',
+        nextRoute: { pathname: '/account/watchlist' as const },
+        icon: 'watchlist',
+        isActive: pathname === '/account/watchlist',
       },
       {
-        text: "Public tags",
-        nextRoute: { pathname: "/account/public-tags-request" as const },
-        icon: "publictags",
-        isActive: pathname === "/account/public-tags-request",
+        text: 'Private tags',
+        nextRoute: { pathname: '/account/tag-address' as const },
+        icon: 'privattags',
+        isActive: pathname === '/account/tag-address',
       },
       {
-        text: "API keys",
-        nextRoute: { pathname: "/account/api-key" as const },
-        icon: "API",
-        isActive: pathname === "/account/api-key",
+        text: 'API keys',
+        nextRoute: { pathname: '/account/api-key' as const },
+        icon: 'API',
+        isActive: pathname === '/account/api-key',
       },
       {
-        text: "Custom ABI",
-        nextRoute: { pathname: "/account/custom-abi" as const },
-        icon: "ABI",
-        isActive: pathname === "/account/custom-abi",
+        text: 'Custom ABI',
+        nextRoute: { pathname: '/account/custom-abi' as const },
+        icon: 'ABI',
+        isActive: pathname === '/account/custom-abi',
       },
       config.features.addressVerification.isEnabled && {
-        text: "Verified addrs",
-        nextRoute: { pathname: "/account/verified-addresses" as const },
-        icon: "verified",
-        isActive: pathname === "/account/verified-addresses",
+        text: 'Verified addrs',
+        nextRoute: { pathname: '/account/verified-addresses' as const },
+        icon: 'verified',
+        isActive: pathname === '/account/verified-addresses',
       },
     ].filter(Boolean);
 
-    const profileItem = {
-      text: "My profile",
-      nextRoute: { pathname: "/auth/profile" as const },
-      iconComponent: UserAvatar,
-      isActive: pathname === "/auth/profile",
-    };
-
-    return { mainNavItems, accountNavItems, profileItem };
+    return { mainNavItems, accountNavItems };
   }, [ pathname ]);
 }
diff --git a/lib/hooks/useNewTxsSocket.tsx b/lib/hooks/useNewTxsSocket.tsx
index bedae0049d..576ecec46f 100644
--- a/lib/hooks/useNewTxsSocket.tsx
+++ b/lib/hooks/useNewTxsSocket.tsx
@@ -57,11 +57,11 @@ export default function useNewTxsSocket() {
   }, [ setNum ]);
 
   const handleSocketClose = React.useCallback(() => {
-    setSocketAlert('Connection is lost. Please reload page.');
+    setSocketAlert('Connection is lost. Please reload the page.');
   }, []);
 
   const handleSocketError = React.useCallback(() => {
-    setSocketAlert('An error has occurred while fetching new transactions. Please reload page.');
+    setSocketAlert('An error has occurred while fetching new transactions. Please reload the page.');
   }, []);
 
   const channel = useSocketChannel({
diff --git a/lib/hooks/useNotifyOnNavigation.tsx b/lib/hooks/useNotifyOnNavigation.tsx
new file mode 100644
index 0000000000..a3b7a7c92f
--- /dev/null
+++ b/lib/hooks/useNotifyOnNavigation.tsx
@@ -0,0 +1,24 @@
+import { usePathname } from 'next/navigation';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import config from 'configs/app';
+import getQueryParamString from 'lib/router/getQueryParamString';
+
+export default function useNotifyOnNavigation() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const tab = getQueryParamString(router.query.tab);
+
+  React.useEffect(() => {
+    if (config.features.metasuites.isEnabled) {
+      window.postMessage({ source: 'APP_ROUTER', type: 'PATHNAME_CHANGED' }, window.location.origin);
+    }
+  }, [ pathname ]);
+
+  React.useEffect(() => {
+    if (config.features.metasuites.isEnabled) {
+      window.postMessage({ source: 'APP_ROUTER', type: 'TAB_CHANGED' }, window.location.origin);
+    }
+  }, [ tab ]);
+}
diff --git a/lib/hooks/useRedirectForInvalidAuthToken.tsx b/lib/hooks/useRedirectForInvalidAuthToken.tsx
deleted file mode 100644
index 24b74ace64..0000000000
--- a/lib/hooks/useRedirectForInvalidAuthToken.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as Sentry from '@sentry/react';
-import { useQueryClient } from '@tanstack/react-query';
-import React from 'react';
-
-import { resourceKey } from 'lib/api/resources';
-import type { ResourceError } from 'lib/api/resources';
-import * as cookies from 'lib/cookies';
-import useLoginUrl from 'lib/hooks/useLoginUrl';
-
-export default function useRedirectForInvalidAuthToken() {
-  const queryClient = useQueryClient();
-
-  const state = queryClient.getQueryState<unknown, ResourceError>([ resourceKey('user_info') ]);
-  const errorStatus = state?.error?.status;
-  const loginUrl = useLoginUrl();
-
-  React.useEffect(() => {
-    if (errorStatus === 401) {
-      const apiToken = cookies.get(cookies.NAMES.API_TOKEN);
-
-      if (apiToken && loginUrl) {
-        Sentry.captureException(new Error('Invalid API token'), { tags: { source: 'invalid_api_token' } });
-        window.location.assign(loginUrl);
-      }
-    }
-  }, [ errorStatus, loginUrl ]);
-}
diff --git a/lib/hooks/useTimeAgoIncrement.tsx b/lib/hooks/useTimeAgoIncrement.tsx
index 270bada27e..2429528e87 100644
--- a/lib/hooks/useTimeAgoIncrement.tsx
+++ b/lib/hooks/useTimeAgoIncrement.tsx
@@ -19,7 +19,7 @@ function getUnits(diff: number) {
   return [ DAY, 2 * DAY ];
 }
 
-function getUpdateParams(ts: string) {
+function getUpdateParams(ts: string | number) {
   const timeDiff = Date.now() - new Date(ts).getTime();
   const [ unit, higherUnit ] = getUnits(timeDiff);
 
@@ -41,7 +41,7 @@ function getUpdateParams(ts: string) {
   };
 }
 
-export default function useTimeAgoIncrement(ts: string | null, isEnabled?: boolean) {
+export default function useTimeAgoIncrement(ts: string | number | null, isEnabled?: boolean) {
   const [ value, setValue ] = React.useState(ts ? dayjs(ts).fromNow() : null);
 
   React.useEffect(() => {
@@ -78,6 +78,8 @@ export default function useTimeAgoIncrement(ts: string | null, isEnabled?: boole
 
       isEnabled && startIncrement();
 
+      !isEnabled && setValue(dayjs(ts).fromNow());
+
       return () => {
         timeouts.forEach(window.clearTimeout);
         intervals.forEach(window.clearInterval);
diff --git a/lib/hooks/useToast.tsx b/lib/hooks/useToast.tsx
index 4110c513c1..7afc6f3e11 100644
--- a/lib/hooks/useToast.tsx
+++ b/lib/hooks/useToast.tsx
@@ -2,7 +2,7 @@ import type { UseToastOptions, ToastProps } from '@chakra-ui/react';
 import { createToastFn, useChakra } from '@chakra-ui/react';
 import React from 'react';
 
-import Toast from 'ui/shared/Toast';
+import Toast from 'ui/shared/chakra/Toast';
 
 // there is no toastComponent prop in UseToastOptions type
 // but these options will be passed to createRenderToast under the hood
@@ -12,8 +12,10 @@ const defaultOptions: UseToastOptions & { toastComponent?: React.FC<ToastProps>
   position: 'top-right',
   isClosable: true,
   containerStyle: {
-    margin: 8,
+    margin: 3,
+    marginBottom: 0,
   },
+  variant: 'subtle',
 };
 
 export default function useToastModified() {
diff --git a/lib/html-entities.ts b/lib/html-entities.ts
index 8df513b51d..1163ee9338 100644
--- a/lib/html-entities.ts
+++ b/lib/html-entities.ts
@@ -23,3 +23,4 @@ export const apos = String.fromCharCode(39); // apostrophe '
 export const shift = String.fromCharCode(8679); // upwards white arrow ⇧
 export const cmd = String.fromCharCode(8984); // place of interest sign ⌘
 export const alt = String.fromCharCode(9095); // alternate key symbol ⎇
+export const copy = String.fromCharCode(169); // copyright symbol ©
diff --git a/lib/isMetaKey.tsx b/lib/isMetaKey.tsx
index 878462bf8d..ce9b0a9d2e 100644
--- a/lib/isMetaKey.tsx
+++ b/lib/isMetaKey.tsx
@@ -1,3 +1,5 @@
+import type React from 'react';
+
 export default function isMetaKey(event: React.KeyboardEvent) {
-  return event.metaKey || event.getModifierState('Meta') || event.getModifierState('OS');
+  return event.metaKey || event.getModifierState('Meta');
 }
diff --git a/lib/makePrettyLink.ts b/lib/makePrettyLink.ts
new file mode 100644
index 0000000000..9e05a2d660
--- /dev/null
+++ b/lib/makePrettyLink.ts
@@ -0,0 +1,9 @@
+export default function makePrettyLink(url: string | undefined): { url: string; domain: string } | undefined {
+  try {
+    const urlObj = new URL(url ?? '');
+    return {
+      url: urlObj.href,
+      domain: urlObj.hostname,
+    };
+  } catch (error) {}
+}
diff --git a/lib/metadata/__snapshots__/generate.test.ts.snap b/lib/metadata/__snapshots__/generate.test.ts.snap
index de88a039ef..6997bf3de1 100644
--- a/lib/metadata/__snapshots__/generate.test.ts.snap
+++ b/lib/metadata/__snapshots__/generate.test.ts.snap
@@ -2,6 +2,7 @@
 
 exports[`generates correct metadata for: dynamic route 1`] = `
 {
+  "canonical": undefined,
   "description": "View transaction 0x12345 on Blockscout (Blockscout) Explorer",
   "opengraph": {
     "description": "",
@@ -14,6 +15,7 @@ exports[`generates correct metadata for: dynamic route 1`] = `
 
 exports[`generates correct metadata for: dynamic route with API data 1`] = `
 {
+  "canonical": undefined,
   "description": "0x12345, balances and analytics on the Blockscout (Blockscout) Explorer",
   "opengraph": {
     "description": "",
@@ -26,12 +28,13 @@ exports[`generates correct metadata for: dynamic route with API data 1`] = `
 
 exports[`generates correct metadata for: static route 1`] = `
 {
-  "description": "Blockscout is the #1 open-source blockchain explorer available today. 100+ chains and counting rely on Blockscout data availability, APIs, and ecosystem tools to support their networks.",
+  "canonical": "http://localhost:3000/txs",
+  "description": "Open-source block explorer by Blockscout. Search transactions, verify smart contracts, analyze addresses, and track network activity. Complete blockchain data and APIs for the Blockscout (Blockscout) Explorer network.",
   "opengraph": {
     "description": "",
     "imageUrl": "http://localhost:3000/static/og_placeholder.png",
-    "title": "Blockscout blocks | Blockscout",
+    "title": "Blockscout transactions - Blockscout explorer | Blockscout",
   },
-  "title": "Blockscout blocks | Blockscout",
+  "title": "Blockscout transactions - Blockscout explorer | Blockscout",
 }
 `;
diff --git a/lib/metadata/generate.test.ts b/lib/metadata/generate.test.ts
index 5a37e98fe0..f2cd05dcc1 100644
--- a/lib/metadata/generate.test.ts
+++ b/lib/metadata/generate.test.ts
@@ -4,26 +4,29 @@ import type { Route } from 'nextjs-routes';
 
 import generate from './generate';
 
-interface TestCase<R extends Route> {
+interface TestCase<Pathname extends Route['pathname']> {
   title: string;
-  route: R;
-  apiData?: ApiData<R>;
+  route: {
+    pathname: Pathname;
+    query?: Route['query'];
+  };
+  apiData?: ApiData<Pathname>;
 }
 
-const TEST_CASES: Array<TestCase<Route>> = [
+const TEST_CASES = [
   {
     title: 'static route',
     route: {
-      pathname: '/blocks',
+      pathname: '/txs',
     },
-  },
+  } as TestCase<'/txs'>,
   {
     title: 'dynamic route',
     route: {
       pathname: '/tx/[hash]',
       query: { hash: '0x12345' },
     },
-  },
+  } as TestCase<'/tx/[hash]'>,
   {
     title: 'dynamic route with API data',
     route: {
@@ -31,7 +34,7 @@ const TEST_CASES: Array<TestCase<Route>> = [
       query: { hash: '0x12345' },
     },
     apiData: { symbol: 'USDT' },
-  } as TestCase<{ pathname: '/token/[hash]'; query: { hash: string }}>,
+  } as TestCase<'/token/[hash]'>,
 ];
 
 describe('generates correct metadata for:', () => {
diff --git a/lib/metadata/generate.ts b/lib/metadata/generate.ts
index 8d24fd1606..c3d4ed15c5 100644
--- a/lib/metadata/generate.ts
+++ b/lib/metadata/generate.ts
@@ -1,25 +1,28 @@
 import type { ApiData, Metadata } from './types';
+import type { RouteParams } from 'nextjs/types';
 
 import type { Route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import getNetworkTitle from 'lib/networks/getNetworkTitle';
+import { currencyUnits } from 'lib/units';
 
 import compileValue from './compileValue';
+import getCanonicalUrl from './getCanonicalUrl';
 import getPageOgType from './getPageOgType';
 import * as templates from './templates';
 
-export default function generate<R extends Route>(route: R, apiData?: ApiData<R>): Metadata {
+export default function generate<Pathname extends Route['pathname']>(route: RouteParams<Pathname>, apiData: ApiData<Pathname> = null): Metadata {
   const params = {
     ...route.query,
     ...apiData,
     network_name: config.chain.name,
     network_title: getNetworkTitle(),
+    network_gwei: currencyUnits.gwei,
   };
 
-  const compiledTitle = compileValue(templates.title.make(route.pathname), params);
-  const title = compiledTitle ? compiledTitle + (config.meta.promoteBlockscoutInTitle ? ' | Blockscout' : '') : '';
-  const description = compileValue(templates.description.make(route.pathname), params);
+  const title = compileValue(templates.title.make(route.pathname, Boolean(apiData)), params);
+  const description = compileValue(templates.description.make(route.pathname, Boolean(apiData)), params);
 
   const pageOgType = getPageOgType(route.pathname);
 
@@ -31,5 +34,6 @@ export default function generate<R extends Route>(route: R, apiData?: ApiData<R>
       description: pageOgType !== 'Regular page' ? config.meta.og.description : '',
       imageUrl: pageOgType !== 'Regular page' ? config.meta.og.imageUrl : '',
     },
+    canonical: getCanonicalUrl(route.pathname),
   };
 }
diff --git a/lib/metadata/getCanonicalUrl.ts b/lib/metadata/getCanonicalUrl.ts
new file mode 100644
index 0000000000..2a868419a8
--- /dev/null
+++ b/lib/metadata/getCanonicalUrl.ts
@@ -0,0 +1,24 @@
+import type { Route } from 'nextjs-routes';
+
+import config from 'configs/app';
+
+const CANONICAL_ROUTES: Array<Route['pathname']> = [
+  '/',
+  '/txs',
+  '/ops',
+  '/verified-contracts',
+  '/name-domains',
+  '/withdrawals',
+  '/tokens',
+  '/stats',
+  '/api-docs',
+  '/graphiql',
+  '/gas-tracker',
+  '/apps',
+];
+
+export default function getCanonicalUrl(pathname: Route['pathname']) {
+  if (CANONICAL_ROUTES.includes(pathname)) {
+    return config.app.baseUrl + pathname;
+  }
+}
diff --git a/lib/metadata/getPageOgType.ts b/lib/metadata/getPageOgType.ts
index 01dec9c773..4535257365 100644
--- a/lib/metadata/getPageOgType.ts
+++ b/lib/metadata/getPageOgType.ts
@@ -9,7 +9,10 @@ const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
   '/tx/[hash]': 'Regular page',
   '/blocks': 'Root page',
   '/block/[height_or_hash]': 'Regular page',
+  '/block/countdown': 'Regular page',
+  '/block/countdown/[height]': 'Regular page',
   '/accounts': 'Root page',
+  '/accounts/label/[slug]': 'Root page',
   '/address/[hash]': 'Regular page',
   '/verified-contracts': 'Root page',
   '/contract-verification': 'Root page',
@@ -20,43 +23,52 @@ const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
   '/apps': 'Root page',
   '/apps/[id]': 'Regular page',
   '/stats': 'Root page',
+  '/stats/[id]': 'Regular page',
   '/api-docs': 'Regular page',
   '/graphiql': 'Regular page',
   '/search-results': 'Regular page',
   '/auth/profile': 'Root page',
+  '/account/rewards': 'Regular page',
   '/account/watchlist': 'Regular page',
   '/account/api-key': 'Regular page',
   '/account/custom-abi': 'Regular page',
-  '/account/public-tags-request': 'Regular page',
   '/account/tag-address': 'Regular page',
   '/account/verified-addresses': 'Root page',
+  '/public-tags/submit': 'Regular page',
   '/withdrawals': 'Root page',
   '/visualize/sol2uml': 'Regular page',
   '/csv-export': 'Regular page',
-  '/l2-deposits': 'Root page',
-  '/l2-output-roots': 'Root page',
-  '/l2-txn-batches': 'Root page',
-  '/l2-withdrawals': 'Root page',
-  '/zkevm-l2-txn-batches': 'Root page',
-  '/zkevm-l2-txn-batch/[number]': 'Regular page',
+  '/deposits': 'Root page',
+  '/output-roots': 'Root page',
+  '/dispute-games': 'Root page',
+  '/batches': 'Root page',
+  '/batches/[number]': 'Regular page',
+  '/blobs/[hash]': 'Regular page',
   '/ops': 'Root page',
   '/op/[hash]': 'Regular page',
   '/404': 'Regular page',
   '/name-domains': 'Root page',
   '/name-domains/[name]': 'Regular page',
+  '/validators': 'Root page',
+  '/gas-tracker': 'Root page',
+  '/mud-worlds': 'Root page',
+  '/token-transfers': 'Root page',
+  '/advanced-filter': 'Root page',
+  '/pools': 'Root page',
+  '/pools/[hash]': 'Regular page',
 
   // service routes, added only to make typescript happy
   '/login': 'Regular page',
+  '/sprite': 'Regular page',
+  '/api/metrics': 'Regular page',
+  '/api/monitoring/invalid-api-schema': 'Regular page',
+  '/api/log': 'Regular page',
   '/api/media-type': 'Regular page',
   '/api/proxy': 'Regular page',
   '/api/csrf': 'Regular page',
   '/api/healthz': 'Regular page',
-  '/auth/auth0': 'Regular page',
-  '/auth/unverified-email': 'Regular page',
-  '/validators': 'Homepage',
-  '/dhcs': 'Homepage',
-  '/validators/[hash]': 'Homepage',
-  '/dhcs/[id]': 'Homepage',
+  '/api/config': 'Regular page',
+  '/api/sprite': 'Regular page',
 };
 
 export default function getPageOgType(pathname: Route['pathname']) {
diff --git a/lib/metadata/index.ts b/lib/metadata/index.ts
index 6cf182a7b7..903bd988e8 100644
--- a/lib/metadata/index.ts
+++ b/lib/metadata/index.ts
@@ -1,2 +1,3 @@
 export { default as generate } from './generate';
 export { default as update } from './update';
+export * from './types';
diff --git a/lib/metadata/templates/description.ts b/lib/metadata/templates/description.ts
index 03b0c7e969..a8069e0f28 100644
--- a/lib/metadata/templates/description.ts
+++ b/lib/metadata/templates/description.ts
@@ -1,8 +1,8 @@
+/* eslint-disable max-len */
 import type { Route } from 'nextjs-routes';
 
 // equal og:description
-// eslint-disable-next-line max-len
-const DEFAULT_TEMPLATE = 'Blockscout is the #1 open-source blockchain explorer available today. 100+ chains and counting rely on Blockscout data availability, APIs, and ecosystem tools to support their networks.';
+const DEFAULT_TEMPLATE = 'Open-source block explorer by Blockscout. Search transactions, verify smart contracts, analyze addresses, and track network activity. Complete blockchain data and APIs for the %network_title% network.';
 
 // FIXME all page descriptions will be updated later
 const TEMPLATE_MAP: Record<Route['pathname'], string> = {
@@ -12,7 +12,10 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/tx/[hash]': 'View transaction %hash% on %network_title%',
   '/blocks': DEFAULT_TEMPLATE,
   '/block/[height_or_hash]': 'View the transactions, token transfers, and uncles for block %height_or_hash%',
+  '/block/countdown': DEFAULT_TEMPLATE,
+  '/block/countdown/[height]': DEFAULT_TEMPLATE,
   '/accounts': DEFAULT_TEMPLATE,
+  '/accounts/label/[slug]': DEFAULT_TEMPLATE,
   '/address/[hash]': 'View the account balance, transactions, and other data for %hash% on the %network_title%',
   '/verified-contracts': DEFAULT_TEMPLATE,
   '/contract-verification': DEFAULT_TEMPLATE,
@@ -23,47 +26,58 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/apps': DEFAULT_TEMPLATE,
   '/apps/[id]': DEFAULT_TEMPLATE,
   '/stats': DEFAULT_TEMPLATE,
+  '/stats/[id]': DEFAULT_TEMPLATE,
   '/api-docs': DEFAULT_TEMPLATE,
   '/graphiql': DEFAULT_TEMPLATE,
   '/search-results': DEFAULT_TEMPLATE,
   '/auth/profile': DEFAULT_TEMPLATE,
+  '/account/rewards': DEFAULT_TEMPLATE,
   '/account/watchlist': DEFAULT_TEMPLATE,
   '/account/api-key': DEFAULT_TEMPLATE,
   '/account/custom-abi': DEFAULT_TEMPLATE,
-  '/account/public-tags-request': DEFAULT_TEMPLATE,
   '/account/tag-address': DEFAULT_TEMPLATE,
   '/account/verified-addresses': DEFAULT_TEMPLATE,
+  '/public-tags/submit': 'Propose a new public tag for your address, contract or set of contracts for your dApp. Our team will review and approve your submission. Public tags are incredible tool which helps users identify contracts and addresses.',
   '/withdrawals': DEFAULT_TEMPLATE,
   '/visualize/sol2uml': DEFAULT_TEMPLATE,
   '/csv-export': DEFAULT_TEMPLATE,
-  '/l2-deposits': DEFAULT_TEMPLATE,
-  '/l2-output-roots': DEFAULT_TEMPLATE,
-  '/l2-txn-batches': DEFAULT_TEMPLATE,
-  '/l2-withdrawals': DEFAULT_TEMPLATE,
-  '/zkevm-l2-txn-batches': DEFAULT_TEMPLATE,
-  '/zkevm-l2-txn-batch/[number]': DEFAULT_TEMPLATE,
+  '/deposits': DEFAULT_TEMPLATE,
+  '/output-roots': DEFAULT_TEMPLATE,
+  '/dispute-games': DEFAULT_TEMPLATE,
+  '/batches': DEFAULT_TEMPLATE,
+  '/batches/[number]': DEFAULT_TEMPLATE,
+  '/blobs/[hash]': DEFAULT_TEMPLATE,
   '/ops': DEFAULT_TEMPLATE,
   '/op/[hash]': DEFAULT_TEMPLATE,
   '/404': DEFAULT_TEMPLATE,
   '/name-domains': DEFAULT_TEMPLATE,
   '/name-domains/[name]': DEFAULT_TEMPLATE,
+  '/validators': DEFAULT_TEMPLATE,
+  '/gas-tracker': 'Explore real-time %network_title% gas fees with Blockscout\'s advanced gas fee tracker. Get accurate %network_gwei% estimates and track transaction costs live.',
+  '/mud-worlds': DEFAULT_TEMPLATE,
+  '/token-transfers': DEFAULT_TEMPLATE,
+  '/advanced-filter': DEFAULT_TEMPLATE,
+  '/pools': DEFAULT_TEMPLATE,
+  '/pools/[hash]': DEFAULT_TEMPLATE,
 
   // service routes, added only to make typescript happy
   '/login': DEFAULT_TEMPLATE,
+  '/sprite': DEFAULT_TEMPLATE,
+  '/api/metrics': DEFAULT_TEMPLATE,
+  '/api/monitoring/invalid-api-schema': DEFAULT_TEMPLATE,
+  '/api/log': DEFAULT_TEMPLATE,
   '/api/media-type': DEFAULT_TEMPLATE,
   '/api/proxy': DEFAULT_TEMPLATE,
   '/api/csrf': DEFAULT_TEMPLATE,
   '/api/healthz': DEFAULT_TEMPLATE,
-  '/auth/auth0': DEFAULT_TEMPLATE,
-  '/auth/unverified-email': DEFAULT_TEMPLATE,
-  '/validators': DEFAULT_TEMPLATE,
-  '/dhcs': DEFAULT_TEMPLATE,
-  '/dhcs/[id]': DEFAULT_TEMPLATE,
-  '/validators/[hash]': DEFAULT_TEMPLATE,
+  '/api/config': DEFAULT_TEMPLATE,
+  '/api/sprite': DEFAULT_TEMPLATE,
 };
 
-export function make(pathname: Route['pathname']) {
-  const template = TEMPLATE_MAP[pathname];
+const TEMPLATE_MAP_ENHANCED: Partial<Record<Route['pathname'], string>> = {
+  '/stats/[id]': '%description%',
+};
 
-  return template ?? '';
+export function make(pathname: Route['pathname'], isEnriched = false) {
+  return (isEnriched ? TEMPLATE_MAP_ENHANCED[pathname] : undefined) ?? TEMPLATE_MAP[pathname] ?? '';
 }
diff --git a/lib/metadata/templates/title.ts b/lib/metadata/templates/title.ts
index 85407abcfa..46eedf1d30 100644
--- a/lib/metadata/templates/title.ts
+++ b/lib/metadata/templates/title.ts
@@ -1,64 +1,87 @@
 import type { Route } from 'nextjs-routes';
 
+import config from 'configs/app';
+
 const TEMPLATE_MAP: Record<Route['pathname'], string> = {
-  '/': 'blockchain explorer',
-  '/txs': 'transactions',
-  '/txs/kettle/[hash]': 'kettle %hash% transactions',
-  '/tx/[hash]': 'transaction %hash%',
-  '/blocks': 'blocks',
-  '/block/[height_or_hash]': 'block %height_or_hash%',
-  '/accounts': 'top accounts',
-  '/address/[hash]': 'address details for %hash%',
-  '/verified-contracts': 'verified contracts',
-  '/contract-verification': 'verify contract',
-  '/address/[hash]/contract-verification': 'contract verification for %hash%',
-  '/tokens': 'tokens',
-  '/token/[hash]': '%symbol% token details',
-  '/token/[hash]/instance/[id]': 'token instance for %symbol%',
-  '/apps': 'apps marketplace',
-  '/apps/[id]': '- %app_name%',
-  '/stats': 'statistics',
-  '/api-docs': 'REST API',
-  '/graphiql': 'GraphQL',
-  '/search-results': 'search result for %q%',
-  '/auth/profile': '- my profile',
-  '/account/watchlist': '- watchlist',
-  '/account/api-key': '- API keys',
-  '/account/custom-abi': '- custom ABI',
-  '/account/public-tags-request': '- public tag requests',
-  '/account/tag-address': '- private tags',
-  '/account/verified-addresses': '- my verified addresses',
-  '/withdrawals': 'withdrawals',
-  '/visualize/sol2uml': 'Solidity UML diagram',
-  '/csv-export': 'export data to CSV',
-  '/l2-deposits': 'deposits (L1 > L2)',
-  '/l2-output-roots': 'output roots',
-  '/l2-txn-batches': 'tx batches (L2 blocks)',
-  '/l2-withdrawals': 'withdrawals (L2 > L1)',
-  '/zkevm-l2-txn-batches': 'zkEvm L2 Tx batches',
-  '/zkevm-l2-txn-batch/[number]': 'zkEvm L2 Tx batch %number%',
-  '/ops': 'user operations',
-  '/op/[hash]': 'user operation %hash%',
-  '/404': 'error - page not found',
-  '/name-domains': 'domains search and resolve',
-  '/name-domains/[name]': '%name% domain details',
+  '/': '%network_name% blockchain explorer - View %network_name% stats',
+  '/txs': '%network_name% transactions - %network_name% explorer',
+  '/txs/kettle/[hash]': '%network_name% kettle %hash% transactions',
+  '/tx/[hash]': '%network_name% transaction %hash%',
+  '/blocks': '%network_name% blocks',
+  '/block/[height_or_hash]': '%network_name% block %height_or_hash%',
+  '/block/countdown': '%network_name% block countdown index',
+  '/block/countdown/[height]': '%network_name% block %height% countdown',
+  '/accounts': '%network_name% top accounts',
+  '/accounts/label/[slug]': '%network_name% addresses search by label',
+  '/address/[hash]': '%network_name% address details for %hash%',
+  '/verified-contracts': 'Verified %network_name% contracts lookup - %network_name% explorer',
+  '/contract-verification': '%network_name% verify contract',
+  '/address/[hash]/contract-verification': '%network_name% contract verification for %hash%',
+  '/tokens': 'Tokens list - %network_name% explorer',
+  '/token/[hash]': '%network_name% token details',
+  '/token/[hash]/instance/[id]': '%network_name% NFT instance',
+  '/apps': '%network_name% DApps - Explore top apps',
+  '/apps/[id]': '%network_name% marketplace app',
+  '/stats': '%network_name% stats - %network_name% network insights',
+  '/stats/[id]': '%network_name% stats - %id% chart',
+  '/api-docs': '%network_name% API docs - %network_name% developer tools',
+  '/graphiql': 'GraphQL for %network_name% - %network_name% data query',
+  '/search-results': '%network_name% search result for %q%',
+  '/auth/profile': '%network_name% - my profile',
+  '/account/rewards': '%network_name% - rewards',
+  '/account/watchlist': '%network_name% - watchlist',
+  '/account/api-key': '%network_name% - API keys',
+  '/account/custom-abi': '%network_name% - custom ABI',
+  '/account/tag-address': '%network_name% - private tags',
+  '/account/verified-addresses': '%network_name% - my verified addresses',
+  '/public-tags/submit': '%network_name% - public tag requests',
+  '/withdrawals': '%network_name% withdrawals - track on %network_name% explorer',
+  '/visualize/sol2uml': '%network_name% Solidity UML diagram',
+  '/csv-export': '%network_name% export data to CSV',
+  '/deposits': '%network_name% deposits (L1 > L2)',
+  '/output-roots': '%network_name% output roots',
+  '/dispute-games': '%network_name% dispute games',
+  '/batches': '%network_name% txn batches',
+  '/batches/[number]': '%network_name% L2 txn batch %number%',
+  '/blobs/[hash]': '%network_name% blob %hash% details',
+  '/ops': 'User operations on %network_name% - %network_name% explorer',
+  '/op/[hash]': '%network_name% user operation %hash%',
+  '/404': '%network_name% error - page not found',
+  '/name-domains': '%network_name% name domains - %network_name% explorer',
+  '/name-domains/[name]': '%network_name% %name% domain details',
+  '/validators': '%network_name% validators list',
+  '/gas-tracker': 'Track %network_name% gas fees in %network_gwei%',
+  '/mud-worlds': '%network_name% MUD worlds list',
+  '/token-transfers': '%network_name% token transfers',
+  '/advanced-filter': '%network_name% advanced filter',
+  '/pools': '%network_name% DEX pools',
+  '/pools/[hash]': '%network_name% pool details',
 
   // service routes, added only to make typescript happy
-  '/login': 'login',
-  '/api/media-type': 'node API media type',
-  '/api/proxy': 'node API proxy',
-  '/api/csrf': 'node API CSRF token',
-  '/api/healthz': 'node API health check',
-  '/auth/auth0': 'authentication',
-  '/auth/unverified-email': 'unverified email',
-  '/validators': 'Validators',
-  '/dhcs': 'DHCs',
-  '/validators/[hash]': 'Validator Details',
-  '/dhcs/[id]': 'DHC Details',
+  '/login': '%network_name% login',
+  '/sprite': '%network_name% SVG sprite',
+  '/api/metrics': '%network_name% node API prometheus metrics',
+  '/api/monitoring/invalid-api-schema': '%network_name% node API prometheus metrics',
+  '/api/log': '%network_name% node API request log',
+  '/api/media-type': '%network_name% node API media type',
+  '/api/proxy': '%network_name% node API proxy',
+  '/api/csrf': '%network_name% node API CSRF token',
+  '/api/healthz': '%network_name% node API health check',
+  '/api/config': '%network_name% node API app config',
+  '/api/sprite': '%network_name% node API SVG sprite content',
+};
+
+const TEMPLATE_MAP_ENHANCED: Partial<Record<Route['pathname'], string>> = {
+  '/token/[hash]': '%network_name% %symbol% token details',
+  '/token/[hash]/instance/[id]': '%network_name% token instance for %symbol%',
+  '/apps/[id]': '%network_name% - %app_name%',
+  '/address/[hash]': '%network_name% address details for %domain_name%',
+  '/stats/[id]': '%title% chart on %network_name%',
 };
 
-export function make(pathname: Route['pathname']) {
-  const template = TEMPLATE_MAP[pathname];
+export function make(pathname: Route['pathname'], isEnriched = false) {
+  const template = (isEnriched ? TEMPLATE_MAP_ENHANCED[pathname] : undefined) ?? TEMPLATE_MAP[pathname];
+  const postfix = config.meta.promoteBlockscoutInTitle ? ' | Blockscout' : '';
 
-  return `%network_name% ${ template }`;
+  return (template + postfix).trim();
 }
diff --git a/lib/metadata/types.ts b/lib/metadata/types.ts
index 252dbc29cf..4cd6d62c37 100644
--- a/lib/metadata/types.ts
+++ b/lib/metadata/types.ts
@@ -1,11 +1,18 @@
+import type { LineChart } from '@blockscout/stats-types';
+import type { TokenInfo } from 'types/api/token';
+
 import type { Route } from 'nextjs-routes';
 
-/* eslint-disable @typescript-eslint/indent */
-export type ApiData<R extends Route> =
-R['pathname'] extends '/token/[hash]' ? { symbol: string } :
-R['pathname'] extends '/token/[hash]/instance/[id]' ? { symbol: string } :
-R['pathname'] extends '/apps/[id]' ? { app_name: string } :
-never;
+/* eslint-disable @stylistic/indent */
+export type ApiData<Pathname extends Route['pathname']> =
+(
+    Pathname extends '/address/[hash]' ? { domain_name: string } :
+    Pathname extends '/token/[hash]' ? TokenInfo :
+    Pathname extends '/token/[hash]/instance/[id]' ? { symbol: string } :
+    Pathname extends '/apps/[id]' ? { app_name: string } :
+    Pathname extends '/stats/[id]' ? LineChart['info'] :
+    never
+) | null;
 
 export interface Metadata {
     title: string;
@@ -15,4 +22,5 @@ export interface Metadata {
         description?: string;
         imageUrl?: string;
     };
+    canonical: string | undefined;
 }
diff --git a/lib/metadata/update.ts b/lib/metadata/update.ts
index f6168c1ae6..123e3ca100 100644
--- a/lib/metadata/update.ts
+++ b/lib/metadata/update.ts
@@ -1,10 +1,11 @@
 import type { ApiData } from './types';
+import type { RouteParams } from 'nextjs/types';
 
 import type { Route } from 'nextjs-routes';
 
 import generate from './generate';
 
-export default function update<R extends Route>(route: R, apiData: ApiData<R>) {
+export default function update<Pathname extends Route['pathname']>(route: RouteParams<Pathname>, apiData: ApiData<Pathname>) {
   const { title, description } = generate(route, apiData);
 
   window.document.title = title;
diff --git a/lib/mixpanel/getPageType.ts b/lib/mixpanel/getPageType.ts
index d169b413c5..e361248bbf 100644
--- a/lib/mixpanel/getPageType.ts
+++ b/lib/mixpanel/getPageType.ts
@@ -7,7 +7,10 @@ export const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/tx/[hash]': 'Transaction details',
   '/blocks': 'Blocks',
   '/block/[height_or_hash]': 'Block details',
+  '/block/countdown': 'Block countdown search',
+  '/block/countdown/[height]': 'Block countdown',
   '/accounts': 'Top accounts',
+  '/accounts/label/[slug]': 'Addresses search by label',
   '/address/[hash]': 'Address details',
   '/verified-contracts': 'Verified contracts',
   '/contract-verification': 'Contract verification',
@@ -15,46 +18,55 @@ export const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/tokens': 'Tokens',
   '/token/[hash]': 'Token details',
   '/token/[hash]/instance/[id]': 'Token Instance',
-  '/apps': 'Apps',
-  '/apps/[id]': 'App',
+  '/apps': 'DApps',
+  '/apps/[id]': 'DApp',
   '/stats': 'Stats',
+  '/stats/[id]': 'Stats chart',
   '/api-docs': 'REST API',
   '/graphiql': 'GraphQL',
   '/search-results': 'Search results',
   '/auth/profile': 'Profile',
+  '/account/rewards': 'Merits',
   '/account/watchlist': 'Watchlist',
   '/account/api-key': 'API keys',
   '/account/custom-abi': 'Custom ABI',
-  '/account/public-tags-request': 'Public tags',
   '/account/tag-address': 'Private tags',
   '/account/verified-addresses': 'Verified addresses',
+  '/public-tags/submit': 'Submit public tag',
   '/withdrawals': 'Withdrawals',
   '/visualize/sol2uml': 'Solidity UML diagram',
   '/csv-export': 'Export data to CSV file',
-  '/l2-deposits': 'Deposits (L1 > L2)',
-  '/l2-output-roots': 'Output roots',
-  '/l2-txn-batches': 'Tx batches (L2 blocks)',
-  '/l2-withdrawals': 'Withdrawals (L2 > L1)',
-  '/zkevm-l2-txn-batches': 'ZkEvm L2 Tx batches',
-  '/zkevm-l2-txn-batch/[number]': 'ZkEvm L2 Tx batch details',
+  '/deposits': 'Deposits (L1 > L2)',
+  '/output-roots': 'Output roots',
+  '/dispute-games': 'Dispute games',
+  '/batches': 'Txn batches',
+  '/batches/[number]': 'L2 txn batch details',
+  '/blobs/[hash]': 'Blob details',
   '/ops': 'User operations',
   '/op/[hash]': 'User operation details',
   '/404': '404',
   '/name-domains': 'Domains search and resolve',
   '/name-domains/[name]': 'Domain details',
+  '/validators': 'Validators list',
+  '/gas-tracker': 'Gas tracker',
+  '/mud-worlds': 'MUD worlds',
+  '/token-transfers': 'Token transfers',
+  '/advanced-filter': 'Advanced filter',
+  '/pools': 'DEX pools',
+  '/pools/[hash]': 'Pool details',
 
   // service routes, added only to make typescript happy
   '/login': 'Login',
+  '/sprite': 'Sprite',
+  '/api/metrics': 'Node API: Prometheus metrics',
+  '/api/monitoring/invalid-api-schema': 'Node API: Prometheus metrics',
+  '/api/log': 'Node API: Request log',
   '/api/media-type': 'Node API: Media type',
   '/api/proxy': 'Node API: Proxy',
   '/api/csrf': 'Node API: CSRF token',
   '/api/healthz': 'Node API: Health check',
-  '/auth/auth0': 'Auth',
-  '/auth/unverified-email': 'Unverified email',
-  '/validators': 'Validators',
-  '/dhcs': 'DHCs',
-  '/validators/[hash]': 'Validator Details',
-  '/dhcs/[id]': 'DHC Details',
+  '/api/config': 'Node API: App config',
+  '/api/sprite': 'Node API: SVG sprite content',
 };
 
 export default function getPageType(pathname: Route['pathname']) {
diff --git a/lib/mixpanel/index.ts b/lib/mixpanel/index.ts
index 492269c5ea..72f7be7285 100644
--- a/lib/mixpanel/index.ts
+++ b/lib/mixpanel/index.ts
@@ -3,6 +3,7 @@ import getUuid from './getUuid';
 import logEvent from './logEvent';
 import useInit from './useInit';
 import useLogPageView from './useLogPageView';
+import * as userProfile from './userProfile';
 export * from './utils';
 
 export {
@@ -11,4 +12,5 @@ export {
   logEvent,
   getPageType,
   getUuid,
+  userProfile,
 };
diff --git a/lib/mixpanel/useInit.tsx b/lib/mixpanel/useInit.tsx
index 0be8371066..23f02332f8 100644
--- a/lib/mixpanel/useInit.tsx
+++ b/lib/mixpanel/useInit.tsx
@@ -7,9 +7,11 @@ import { deviceType } from 'react-device-detect';
 
 import config from 'configs/app';
 import * as cookies from 'lib/cookies';
+import dayjs from 'lib/date/dayjs';
 import getQueryParamString from 'lib/router/getQueryParamString';
 
 import getUuid from './getUuid';
+import * as userProfile from './userProfile';
 
 export default function useMixpanelInit() {
   const [ isInited, setIsInited ] = React.useState(false);
@@ -28,6 +30,7 @@ export default function useMixpanelInit() {
       debug: Boolean(debugFlagQuery.current || debugFlagCookie),
     };
     const isAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN));
+    const userId = getUuid();
 
     mixpanel.init(feature.projectToken, mixpanelConfig);
     mixpanel.register({
@@ -38,7 +41,15 @@ export default function useMixpanelInit() {
       'Viewport height': window.innerHeight,
       Language: window.navigator.language,
       'Device type': _capitalize(deviceType),
-      'User id': getUuid(),
+      'User id': userId,
+    });
+    mixpanel.identify(userId);
+    userProfile.set({
+      'Device Type': _capitalize(deviceType),
+      ...(isAuth ? { 'With Account': true } : {}),
+    });
+    userProfile.setOnce({
+      'First Time Join': dayjs().toISOString(),
     });
 
     setIsInited(true);
diff --git a/lib/mixpanel/useLogPageView.tsx b/lib/mixpanel/useLogPageView.tsx
index 9c3f6a929a..da5a6952f0 100644
--- a/lib/mixpanel/useLogPageView.tsx
+++ b/lib/mixpanel/useLogPageView.tsx
@@ -1,16 +1,26 @@
+import type { ColorMode } from '@chakra-ui/react';
 import { useColorMode } from '@chakra-ui/react';
 import { usePathname } from 'next/navigation';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import config from 'configs/app';
+import * as cookies from 'lib/cookies';
 import getQueryParamString from 'lib/router/getQueryParamString';
+import { COLOR_THEMES } from 'lib/settings/colorTheme';
 
 import getPageType from './getPageType';
 import getTabName from './getTabName';
 import logEvent from './logEvent';
 import { EventTypes } from './utils';
 
+function getColorTheme(hex: string | undefined, colorMode: ColorMode) {
+  const colorTheme = COLOR_THEMES.find((theme) => theme.hex === hex) ||
+    COLOR_THEMES.filter((theme) => theme.colorMode === colorMode).slice(-1)[0];
+
+  return colorTheme.id;
+}
+
 export default function useLogPageView(isInited: boolean) {
   const router = useRouter();
   const pathname = usePathname();
@@ -24,11 +34,14 @@ export default function useLogPageView(isInited: boolean) {
       return;
     }
 
+    const cookieColorModeHex = cookies.get(cookies.NAMES.COLOR_MODE_HEX);
+
     logEvent(EventTypes.PAGE_VIEW, {
       'Page type': getPageType(router.pathname),
       Tab: getTabName(tab),
       Page: page || undefined,
       'Color mode': colorMode,
+      'Color theme': getColorTheme(cookieColorModeHex, colorMode),
     });
     // these are only deps that should trigger the effect
     // in some scenarios page type is not changing (e.g navigation from one address page to another),
diff --git a/lib/mixpanel/userProfile.ts b/lib/mixpanel/userProfile.ts
new file mode 100644
index 0000000000..774d124723
--- /dev/null
+++ b/lib/mixpanel/userProfile.ts
@@ -0,0 +1,24 @@
+import mixpanel from 'mixpanel-browser';
+
+import type { PickByType } from 'types/utils';
+
+interface UserProfileProperties {
+  'With Account': boolean;
+  'With Connected Wallet': boolean;
+  'Device Type': string;
+  'First Time Join': string;
+}
+
+type UserProfilePropertiesNumerable = PickByType<UserProfileProperties, number>;
+
+export function set(props: Partial<UserProfileProperties>) {
+  mixpanel.people.set(props);
+}
+
+export function setOnce(props: Partial<UserProfileProperties>) {
+  mixpanel.people.set_once(props);
+}
+
+export function increment(props: UserProfilePropertiesNumerable) {
+  mixpanel.people.increment(props);
+}
diff --git a/lib/mixpanel/utils.ts b/lib/mixpanel/utils.ts
index 3f38840a00..42fa625c27 100644
--- a/lib/mixpanel/utils.ts
+++ b/lib/mixpanel/utils.ts
@@ -1,4 +1,5 @@
 import type { WalletType } from 'types/client/wallets';
+import type { ColorThemeId } from 'types/settings';
 
 export enum EventTypes {
   PAGE_VIEW = 'Page view',
@@ -6,6 +7,8 @@ export enum EventTypes {
   LOCAL_SEARCH = 'Local search',
   ADD_TO_WALLET = 'Add to wallet',
   ACCOUNT_ACCESS = 'Account access',
+  LOGIN = 'Login',
+  ACCOUNT_LINK_INFO = 'Account link info',
   PRIVATE_TAG = 'Private tag',
   VERIFY_ADDRESS = 'Verify address',
   VERIFY_TOKEN = 'Verify token',
@@ -15,19 +18,23 @@ export enum EventTypes {
   CONTRACT_VERIFICATION = 'Contract verification',
   QR_CODE = 'QR code',
   PAGE_WIDGET = 'Page widget',
-  TX_INTERPRETATION_INTERACTION = 'Transaction interpratetion interaction',
+  TX_INTERPRETATION_INTERACTION = 'Transaction interpretation interaction',
   EXPERIMENT_STARTED = 'Experiment started',
-  FILTERS = 'Filters'
+  FILTERS = 'Filters',
+  BUTTON_CLICK = 'Button click',
+  PROMO_BANNER = 'Promo banner',
+  APP_FEEDBACK = 'App feedback',
 }
 
-/* eslint-disable @typescript-eslint/indent */
+/* eslint-disable  @stylistic/indent */
 export type EventPayload<Type extends EventTypes> =
 Type extends EventTypes.PAGE_VIEW ?
 {
   'Page type': string;
-  'Tab': string;
-  'Page'?: string;
+  Tab: string;
+  Page?: string;
   'Color mode': 'light' | 'dark';
+  'Color theme': ColorThemeId | undefined;
 } :
 Type extends EventTypes.SEARCH_QUERY ? {
   'Search query': string;
@@ -36,76 +43,131 @@ Type extends EventTypes.SEARCH_QUERY ? {
 } :
 Type extends EventTypes.LOCAL_SEARCH ? {
   'Search query': string;
-  'Source': 'Marketplace';
+  Source: 'Marketplace';
 } :
 Type extends EventTypes.ADD_TO_WALLET ? (
   {
-    'Wallet': WalletType;
-    'Target': 'network';
+    Wallet: WalletType;
+    Target: 'network';
   } | {
-    'Wallet': WalletType;
-    'Target': 'token';
-    'Token': string;
+    Wallet: WalletType;
+    Target: 'token';
+    Token: string;
   }
 ) :
 Type extends EventTypes.ACCOUNT_ACCESS ? {
-  'Action': 'Auth0 init' | 'Verification email resent' | 'Logged out';
+  Action: 'Dropdown open' | 'Logged out';
+} :
+Type extends EventTypes.LOGIN ? (
+  {
+    Action: 'Started';
+    Source: string;
+  } | {
+    Action: 'Wallet' | 'Email';
+    Source: 'Options selector';
+  } | {
+    Action: 'OTP sent';
+    Source: 'Email';
+  } | {
+    Action: 'Success';
+    Source: 'Email' | 'Wallet';
+  }
+) :
+Type extends EventTypes.ACCOUNT_LINK_INFO ? {
+  Source: 'Profile' | 'Login modal' | 'Profile dropdown' | 'Merits';
+  Status: 'Started' | 'OTP sent' | 'Finished';
+  Type: 'Email' | 'Wallet';
 } :
 Type extends EventTypes.PRIVATE_TAG ? {
-  'Action': 'Form opened' | 'Submit';
+  Action: 'Form opened' | 'Submit';
   'Page type': string;
   'Tag type': 'Address' | 'Tx';
 } :
 Type extends EventTypes.VERIFY_ADDRESS ? (
   {
-    'Action': 'Form opened' | 'Address entered';
+    Action: 'Form opened' | 'Address entered';
     'Page type': string;
   } | {
-    'Action': 'Sign ownership';
+    Action: 'Sign ownership';
     'Page type': string;
     'Sign method': 'wallet' | 'manual';
   }
 ) :
 Type extends EventTypes.VERIFY_TOKEN ? {
-  'Action': 'Form opened' | 'Submit';
+  Action: 'Form opened' | 'Submit';
 } :
 Type extends EventTypes.WALLET_CONNECT ? {
-  'Source': 'Header' | 'Smart contracts';
-  'Status': 'Started' | 'Connected';
-} :
-Type extends EventTypes.WALLET_ACTION ? {
-  'Action': 'Open' | 'Address click';
+  Source: 'Header' | 'Login' | 'Profile' | 'Profile dropdown' | 'Smart contracts' | 'Swap button' | 'Merits';
+  Status: 'Started' | 'Connected';
 } :
+Type extends EventTypes.WALLET_ACTION ? (
+  {
+    Action: 'Open' | 'Address click';
+  } | {
+    Action: 'Send Transaction' | 'Sign Message' | 'Sign Typed Data';
+    Address: string | undefined;
+    AppId: string;
+  }
+) :
 Type extends EventTypes.CONTRACT_INTERACTION ? {
   'Method type': 'Read' | 'Write';
   'Method name': string;
 } :
 Type extends EventTypes.CONTRACT_VERIFICATION ? {
-  'Method': string;
-  'Status': 'Method selected' | 'Finished';
+  Method: string;
+  Status: 'Method selected' | 'Finished';
 } :
 Type extends EventTypes.QR_CODE ? {
   'Page type': string;
 } :
 Type extends EventTypes.PAGE_WIDGET ? (
   {
-    'Type': 'Tokens dropdown' | 'Tokens show all (icon)' | 'Add to watchlist' | 'Address actions (more button)';
+    Type: 'Tokens dropdown' | 'Tokens show all (icon)' | 'Add to watchlist' | 'Address actions (more button)';
+  } | {
+    Type: 'Favorite app' | 'More button' | 'Security score' | 'Total contracts' | 'Verified contracts' | 'Analyzed contracts';
+    Info: string;
+    Source: 'Discovery view' | 'Security view' | 'App modal' | 'App page' | 'Security score popup' | 'Banner';
+  } | {
+    Type: 'Security score';
+    Source: 'Analyzed contracts popup';
+  } | {
+    Type: 'Action button';
+    Info: string;
+    Source: 'Txn' | 'NFT collection' | 'NFT item';
   } | {
-    'Type': 'Favorite app' | 'More button';
-    'Info': string;
+    Type: 'Address tag';
+    Info: string;
+    URL: string;
+  } | {
+    Type: 'Share chart';
+    Info: string;
   }
 ) :
 Type extends EventTypes.TX_INTERPRETATION_INTERACTION ? {
-  'Type': 'Address click' | 'Token click';
+  Type: 'Address click' | 'Token click' | 'Domain click';
 } :
 Type extends EventTypes.EXPERIMENT_STARTED ? {
   'Experiment name': string;
   'Variant name': string;
-  'Source': 'growthbook';
+  Source: 'growthbook';
 } :
 Type extends EventTypes.FILTERS ? {
-  'Source': 'Marketplace';
+  Source: 'Marketplace';
   'Filter name': string;
 } :
+Type extends EventTypes.BUTTON_CLICK ? {
+  Content: string;
+  Source: string;
+} :
+Type extends EventTypes.PROMO_BANNER ? {
+  Source: 'Marketplace';
+  Link: string;
+} :
+Type extends EventTypes.APP_FEEDBACK ? {
+  Action: 'Rating';
+  Source: 'Discovery' | 'App modal' | 'App page';
+  AppId: string;
+  Score: number;
+} :
 undefined;
-/* eslint-enable @typescript-eslint/indent */
+/* eslint-enable  @stylistic/indent */
diff --git a/lib/monitoring/metrics.ts b/lib/monitoring/metrics.ts
new file mode 100644
index 0000000000..05bdad660b
--- /dev/null
+++ b/lib/monitoring/metrics.ts
@@ -0,0 +1,39 @@
+import * as promClient from 'prom-client';
+
+const metrics = (() => {
+  // eslint-disable-next-line no-restricted-properties
+  if (process.env.PROMETHEUS_METRICS_ENABLED !== 'true') {
+    return;
+  }
+
+  promClient.register.clear();
+
+  const invalidApiSchema = new promClient.Counter({
+    name: 'invalid_api_schema',
+    help: 'Number of invalid external API schema events',
+    labelNames: [ 'resource', 'url' ] as const,
+  });
+
+  const socialPreviewBotRequests = new promClient.Counter({
+    name: 'social_preview_bot_requests_total',
+    help: 'Number of incoming requests from social preview bots',
+    labelNames: [ 'route', 'bot' ] as const,
+  });
+
+  const searchEngineBotRequests = new promClient.Counter({
+    name: 'search_engine_bot_requests_total',
+    help: 'Number of incoming requests from search engine bots',
+    labelNames: [ 'route', 'bot' ] as const,
+  });
+
+  const apiRequestDuration = new promClient.Histogram({
+    name: 'api_request_duration_seconds',
+    help: 'Duration of requests to API in seconds',
+    labelNames: [ 'route', 'code' ],
+    buckets: [ 0.2, 0.5, 1, 3, 10 ],
+  });
+
+  return { invalidApiSchema, socialPreviewBotRequests, searchEngineBotRequests, apiRequestDuration };
+})();
+
+export default metrics;
diff --git a/lib/networks/getNetworkValidationActionText.ts b/lib/networks/getNetworkValidationActionText.ts
new file mode 100644
index 0000000000..c6a36f1a3d
--- /dev/null
+++ b/lib/networks/getNetworkValidationActionText.ts
@@ -0,0 +1,21 @@
+import config from 'configs/app';
+
+export default function getNetworkValidationActionText() {
+  switch (config.chain.verificationType) {
+    case 'validation': {
+      return 'validated';
+    }
+    case 'mining': {
+      return 'mined';
+    }
+    case 'posting': {
+      return 'posted';
+    }
+    case 'sequencing': {
+      return 'sequenced';
+    }
+    default: {
+      return 'miner';
+    }
+  }
+}
diff --git a/lib/networks/getNetworkValidatorTitle.ts b/lib/networks/getNetworkValidatorTitle.ts
index 7435ee0293..a0c7977cd6 100644
--- a/lib/networks/getNetworkValidatorTitle.ts
+++ b/lib/networks/getNetworkValidatorTitle.ts
@@ -1,5 +1,21 @@
 import config from 'configs/app';
 
 export default function getNetworkValidatorTitle() {
-  return config.chain.verificationType === 'validation' ? 'validator' : 'miner';
+  switch (config.chain.verificationType) {
+    case 'validation': {
+      return 'validator';
+    }
+    case 'mining': {
+      return 'miner';
+    }
+    case 'posting': {
+      return 'poster';
+    }
+    case 'sequencing': {
+      return 'sequencer';
+    }
+    default: {
+      return 'miner';
+    }
+  }
 }
diff --git a/lib/pools/getPoolLinks.ts b/lib/pools/getPoolLinks.ts
new file mode 100644
index 0000000000..19d738f01e
--- /dev/null
+++ b/lib/pools/getPoolLinks.ts
@@ -0,0 +1,21 @@
+import type { Pool } from 'types/api/pools';
+
+type PoolLink = {
+  url: string;
+  image: string;
+  title: string;
+};
+
+export default function getPoolLinks(pool?: Pool): Array<PoolLink> {
+  if (!pool) {
+    return [];
+  }
+
+  return [
+    {
+      url: pool.coin_gecko_terminal_url,
+      image: '/static/gecko_terminal.png',
+      title: 'GeckoTerminal',
+    },
+  ].filter(link => Boolean(link.url));
+}
diff --git a/lib/pools/getPoolTitle.ts b/lib/pools/getPoolTitle.ts
new file mode 100644
index 0000000000..1e4db61ac6
--- /dev/null
+++ b/lib/pools/getPoolTitle.ts
@@ -0,0 +1,5 @@
+import type { Pool } from 'types/api/pools';
+
+export const getPoolTitle = (pool: Pool) => {
+  return `${ pool.base_token_symbol } / ${ pool.quote_token_symbol } ${ pool.fee ? `(${ pool.fee }%)` : '' }`;
+};
diff --git a/lib/recentSearchKeywords.ts b/lib/recentSearchKeywords.ts
index d6f89bf962..5fe5a6bd71 100644
--- a/lib/recentSearchKeywords.ts
+++ b/lib/recentSearchKeywords.ts
@@ -1,4 +1,4 @@
-import { uniq } from 'lodash';
+import _uniq from 'lodash/uniq';
 
 import isBrowser from './isBrowser';
 
@@ -27,7 +27,7 @@ export function saveToRecentKeywords(value: string) {
   }
 
   const keywordsArr = getRecentSearchKeywords();
-  const result = uniq([ value, ...keywordsArr ]).slice(0, MAX_KEYWORDS_NUMBER - 1);
+  const result = _uniq([ value, ...keywordsArr ]).slice(0, MAX_KEYWORDS_NUMBER - 1);
   window.localStorage.setItem(RECENT_KEYWORDS_LS_KEY, JSON.stringify(result));
 }
 
diff --git a/lib/regexp.ts b/lib/regexp.ts
index d0d708db7a..ab2b3288e3 100644
--- a/lib/regexp.ts
+++ b/lib/regexp.ts
@@ -5,3 +5,5 @@ export const IPFS_PREFIX = /^ipfs:\/\//i;
 export const HEX_REGEXP = /^(?:0x)?[\da-fA-F]+$/;
 
 export const FILE_EXTENSION = /\.([\da-z]+)$/i;
+
+export const BLOCK_HEIGHT = /^\d+$/;
diff --git a/lib/rollbar/index.tsx b/lib/rollbar/index.tsx
new file mode 100644
index 0000000000..9dfbb887a0
--- /dev/null
+++ b/lib/rollbar/index.tsx
@@ -0,0 +1,23 @@
+import { Provider as DefaultProvider, useRollbar as useRollbarDefault } from '@rollbar/react';
+import type React from 'react';
+import type { Configuration } from 'rollbar';
+
+import config from 'configs/app';
+
+const feature = config.features.rollbar;
+
+const FallbackProvider = ({ children }: { children: React.ReactNode }) => children;
+
+const useRollbarFallback = (): undefined => {};
+
+export const Provider = feature.isEnabled ? DefaultProvider : FallbackProvider;
+export const useRollbar = feature.isEnabled ? useRollbarDefault : useRollbarFallback;
+
+export const clientConfig: Configuration | undefined = feature.isEnabled ? {
+  accessToken: feature.clientToken,
+  environment: feature.environment,
+  payload: {
+    code_version: feature.codeVersion,
+    app_instance: feature.instance,
+  },
+} : undefined;
diff --git a/lib/rollups/arbitrum.ts b/lib/rollups/arbitrum.ts
new file mode 100644
index 0000000000..7dbaac58d3
--- /dev/null
+++ b/lib/rollups/arbitrum.ts
@@ -0,0 +1,41 @@
+import { ARBITRUM_L2_TX_BATCH_STATUSES, type ArbitrumBatchStatus, type ArbitrumL2TxData } from 'types/api/arbitrumL2';
+
+import config from 'configs/app';
+
+const rollupFeature = config.features.rollup;
+
+type Args = {
+  status: ArbitrumBatchStatus;
+  commitment_transaction: ArbitrumL2TxData;
+  confirmation_transaction: ArbitrumL2TxData;
+};
+
+export const VERIFICATION_STEPS_MAP: Record<ArbitrumBatchStatus, string> = {
+  'Processed on rollup': 'Processed on rollup',
+  'Sent to base': rollupFeature.isEnabled && rollupFeature.parentChainName ? `Sent to ${ rollupFeature.parentChainName }` : 'Sent to parent chain',
+  'Confirmed on base': rollupFeature.isEnabled && rollupFeature.parentChainName ?
+    `Confirmed on ${ rollupFeature.parentChainName }` :
+    'Confirmed on parent chain',
+};
+
+export const verificationSteps = (() => {
+  return ARBITRUM_L2_TX_BATCH_STATUSES.map((status) => VERIFICATION_STEPS_MAP[status]);
+})();
+
+export function getVerificationStepStatus({
+  status,
+  commitment_transaction: commitTx,
+  confirmation_transaction: confirmTx,
+}: Args) {
+  if (status === 'Sent to base') {
+    if (commitTx.status === 'unfinalized') {
+      return 'pending';
+    }
+  }
+  if (status === 'Confirmed on base') {
+    if (confirmTx.status === 'unfinalized') {
+      return 'pending';
+    }
+  }
+  return 'finalized';
+}
diff --git a/lib/router/removeQueryParam.ts b/lib/router/removeQueryParam.ts
new file mode 100644
index 0000000000..d0a37975c7
--- /dev/null
+++ b/lib/router/removeQueryParam.ts
@@ -0,0 +1,12 @@
+import type { NextRouter } from 'next/router';
+
+export default function removeQueryParam(router: NextRouter, param: string) {
+  const { pathname, query, asPath } = router;
+  const newQuery = { ...query };
+  delete newQuery[param];
+
+  const hashIndex = asPath.indexOf('#');
+  const hash = hashIndex !== -1 ? asPath.substring(hashIndex) : '';
+
+  router.replace({ pathname, query: newQuery, hash }, undefined, { shallow: true });
+}
diff --git a/lib/router/updateQueryParam.ts b/lib/router/updateQueryParam.ts
new file mode 100644
index 0000000000..1dfb1f2a69
--- /dev/null
+++ b/lib/router/updateQueryParam.ts
@@ -0,0 +1,12 @@
+import type { NextRouter } from 'next/router';
+
+export default function updateQueryParam(router: NextRouter, param: string, newValue: string) {
+  const { pathname, query, asPath } = router;
+  const newQuery = { ...query };
+  newQuery[param] = newValue;
+
+  const hashIndex = asPath.indexOf('#');
+  const hash = hashIndex !== -1 ? asPath.substring(hashIndex) : '';
+
+  router.replace({ pathname, query: newQuery, hash }, undefined, { shallow: true });
+}
diff --git a/lib/sentry/config.ts b/lib/sentry/config.ts
deleted file mode 100644
index f619c9346c..0000000000
--- a/lib/sentry/config.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import * as Sentry from '@sentry/react';
-import { BrowserTracing } from '@sentry/tracing';
-
-import appConfig from 'configs/app';
-import { RESOURCE_LOAD_ERROR_MESSAGE } from 'lib/errors/throwOnResourceLoadError';
-
-const feature = appConfig.features.sentry;
-
-export const config: Sentry.BrowserOptions | undefined = (() => {
-  if (!feature.isEnabled) {
-    return;
-  }
-
-  const tracesSampleRate: number | undefined = (() => {
-    switch (feature.environment) {
-      case 'development':
-        return 1;
-      case 'staging':
-        return 0.75;
-      case 'production':
-        return 0.2;
-    }
-  })();
-
-  return {
-    environment: feature.environment,
-    dsn: feature.dsn,
-    release: feature.release,
-    enableTracing: feature.enableTracing,
-    tracesSampleRate,
-    integrations: feature.enableTracing ? [ new BrowserTracing() ] : undefined,
-
-    // error filtering settings
-    // were taken from here - https://docs.sentry.io/platforms/node/guides/azure-functions/configuration/filtering/#decluttering-sentry
-    ignoreErrors: [
-      // Random plugins/extensions
-      'top.GLOBALS',
-      // See: http://blog.errorception.com/2012/03/tale-of-unfindable-js-error.html
-      'originalCreateNotification',
-      'canvas.contentDocument',
-      'MyApp_RemoveAllHighlights',
-      'http://tt.epicplay.com',
-      'Can\'t find variable: ZiteReader',
-      'jigsaw is not defined',
-      'ComboSearch is not defined',
-      'http://loading.retry.widdit.com/',
-      'atomicFindClose',
-      // Facebook borked
-      'fb_xd_fragment',
-      // ISP "optimizing" proxy - `Cache-Control: no-transform` seems to reduce this. (thanks @acdha)
-      // See http://stackoverflow.com/questions/4113268/how-to-stop-javascript-injection-from-vodafone-proxy
-      'bmi_SafeAddOnload',
-      'EBCallBackMessageReceived',
-      // See http://toolbar.conduit.com/Developer/HtmlAndGadget/Methods/JSInjection.aspx
-      'conduitPage',
-      // Generic error code from errors outside the security sandbox
-      'Script error.',
-
-      // Relay and WalletConnect errors
-      'The quota has been exceeded',
-      'Attempt to connect to relay via',
-      'WebSocket connection failed for URL: wss://relay.walletconnect.com',
-
-      // API errors
-      RESOURCE_LOAD_ERROR_MESSAGE,
-    ],
-    denyUrls: [
-      // Facebook flakiness
-      /graph\.facebook\.com/i,
-      // Facebook blocked
-      /connect\.facebook\.net\/en_US\/all\.js/i,
-      // Woopra flakiness
-      /eatdifferent\.com\.woopra-ns\.com/i,
-      /static\.woopra\.com\/js\/woopra\.js/i,
-      // Chrome and other extensions
-      /extensions\//i,
-      /^chrome:\/\//i,
-      /^chrome-extension:\/\//i,
-      /^moz-extension:\/\//i,
-      // Other plugins
-      /127\.0\.0\.1:4001\/isrunning/i, // Cacaoweb
-      /webappstoolbarba\.texthelp\.com\//i,
-      /metrics\.itunes\.apple\.com\.edgesuite\.net\//i,
-
-      // AD fetch failed errors
-      /czilladx\.com/i,
-      /coinzilla\.com/i,
-      /coinzilla\.io/i,
-      /slise\.xyz/i,
-    ],
-  };
-})();
-
-export function configureScope(scope: Sentry.Scope) {
-  if (!feature.isEnabled) {
-    return;
-  }
-  scope.setTag('app_instance', feature.instance);
-}
-
-export function init() {
-  if (!config) {
-    return;
-  }
-
-  Sentry.init(config);
-  Sentry.configureScope(configureScope);
-}
diff --git a/lib/settings/colorTheme.ts b/lib/settings/colorTheme.ts
new file mode 100644
index 0000000000..c5b7edaa1f
--- /dev/null
+++ b/lib/settings/colorTheme.ts
@@ -0,0 +1,42 @@
+import type { ColorMode } from '@chakra-ui/react';
+
+import type { ColorThemeId } from 'types/settings';
+
+interface ColorTheme {
+  id: ColorThemeId;
+  label: string;
+  colorMode: ColorMode;
+  hex: string;
+  sampleBg: string;
+}
+
+export const COLOR_THEMES: Array<ColorTheme> = [
+  {
+    id: 'light',
+    label: 'Light',
+    colorMode: 'light',
+    hex: '#FFFFFF',
+    sampleBg: 'linear-gradient(154deg, #EFEFEF 50%, rgba(255, 255, 255, 0.00) 330.86%)',
+  },
+  {
+    id: 'dim',
+    label: 'Dim',
+    colorMode: 'dark',
+    hex: '#232B37',
+    sampleBg: 'linear-gradient(152deg, #232B37 50%, rgba(255, 255, 255, 0.00) 290.71%)',
+  },
+  {
+    id: 'midnight',
+    label: 'Midnight',
+    colorMode: 'dark',
+    hex: '#1B2E48',
+    sampleBg: 'linear-gradient(148deg, #1B3F71 50%, rgba(255, 255, 255, 0.00) 312.35%)',
+  },
+  {
+    id: 'dark',
+    label: 'Dark',
+    colorMode: 'dark',
+    hex: '#101112',
+    sampleBg: 'linear-gradient(161deg, #000 9.37%, #383838 92.52%)',
+  },
+];
diff --git a/lib/settings/identIcon.ts b/lib/settings/identIcon.ts
new file mode 100644
index 0000000000..1c26b6ef0f
--- /dev/null
+++ b/lib/settings/identIcon.ts
@@ -0,0 +1,29 @@
+import type { IdenticonType } from 'types/views/address';
+
+export const IDENTICONS: Array<{ label: string; id: IdenticonType; sampleBg: string }> = [
+  {
+    label: 'GitHub',
+    id: 'github',
+    sampleBg: 'url("/static/identicon_logos/github.png") center / contain no-repeat',
+  },
+  {
+    label: 'Metamask jazzicon',
+    id: 'jazzicon',
+    sampleBg: 'url("/static/identicon_logos/jazzicon.png") center / contain no-repeat',
+  },
+  {
+    label: 'Ethereum blockies',
+    id: 'blockie',
+    sampleBg: 'url("/static/identicon_logos/blockies.png") center / contain no-repeat',
+  },
+  {
+    label: 'Gradient avatar',
+    id: 'gradient_avatar',
+    sampleBg: 'url("/static/identicon_logos/gradient_avatar.png") center / contain no-repeat',
+  },
+  {
+    label: 'Nouns',
+    id: 'nouns',
+    sampleBg: 'url("/static/identicon_logos/nouns.svg") center / contain no-repeat',
+  },
+];
diff --git a/lib/shortenString.ts b/lib/shortenString.ts
index 28a7f67411..4125ec06f2 100644
--- a/lib/shortenString.ts
+++ b/lib/shortenString.ts
@@ -1,11 +1,11 @@
-export default function shortenString(string: string | null) {
+export default function shortenString(string: string | null, charNumber: number | undefined = 8) {
   if (!string) {
     return '';
   }
 
-  if (string.length <= 7) {
+  if (string.length <= charNumber) {
     return string;
   }
 
-  return string.slice(0, 4) + '...' + string.slice(-4);
+  return string.slice(0, charNumber - 4) + '...' + string.slice(-4);
 }
diff --git a/lib/socket/types.ts b/lib/socket/types.ts
index 4d05a1acb7..11ae7db150 100644
--- a/lib/socket/types.ts
+++ b/lib/socket/types.ts
@@ -1,12 +1,14 @@
 import type { Channel } from 'phoenix';
 
 import type { AddressCoinBalanceHistoryItem, AddressTokensBalancesSocketMessage } from 'types/api/address';
+import type { NewArbitrumBatchSocketResponse } from 'types/api/arbitrumL2';
 import type { NewBlockSocketResponse } from 'types/api/block';
 import type { SmartContractVerificationResponse } from 'types/api/contract';
 import type { RawTracesResponse } from 'types/api/rawTrace';
+import type { TokenInstanceMetadataSocketMessage } from 'types/api/token';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 import type { Transaction } from 'types/api/transaction';
-import type { NewZkEvmBatchSocketResponse } from 'types/api/zkEvmL2TxnBatches';
+import type { NewZkEvmBatchSocketResponse } from 'types/api/zkEvmL2';
 
 export type SocketMessageParams = SocketMessage.NewBlock |
 SocketMessage.BlocksIndexStatus |
@@ -15,23 +17,28 @@ SocketMessage.TxStatusUpdate |
 SocketMessage.TxRawTrace |
 SocketMessage.NewTx |
 SocketMessage.NewPendingTx |
-SocketMessage.NewDeposits |
+SocketMessage.NewOptimisticDeposits |
+SocketMessage.NewArbitrumDeposits |
 SocketMessage.AddressBalance |
 SocketMessage.AddressCurrentCoinBalance |
 SocketMessage.AddressTokenBalance |
 SocketMessage.AddressTokenBalancesErc20 |
 SocketMessage.AddressTokenBalancesErc721 |
 SocketMessage.AddressTokenBalancesErc1155 |
+SocketMessage.AddressTokenBalancesErc404 |
 SocketMessage.AddressCoinBalance |
 SocketMessage.AddressTxs |
 SocketMessage.AddressTxsPending |
 SocketMessage.AddressTokenTransfer |
 SocketMessage.AddressChangedBytecode |
+SocketMessage.AddressFetchedBytecode |
 SocketMessage.SmartContractWasVerified |
 SocketMessage.TokenTransfers |
 SocketMessage.TokenTotalSupply |
+SocketMessage.TokenInstanceMetadataFetched |
 SocketMessage.ContractVerification |
 SocketMessage.NewZkEvmL2Batch |
+SocketMessage.NewArbitrumL2Batch |
 SocketMessage.Unknown;
 
 interface SocketMessageParamsGeneric<Event extends string | undefined, Payload extends object | unknown> {
@@ -40,16 +47,16 @@ interface SocketMessageParamsGeneric<Event extends string | undefined, Payload e
   handler: (payload: Payload) => void;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace SocketMessage {
   export type NewBlock = SocketMessageParamsGeneric<'new_block', NewBlockSocketResponse>;
-  export type BlocksIndexStatus = SocketMessageParamsGeneric<'block_index_status', {finished: boolean; ratio: string}>;
-  export type InternalTxsIndexStatus = SocketMessageParamsGeneric<'internal_txs_index_status', {finished: boolean; ratio: string}>;
+  export type BlocksIndexStatus = SocketMessageParamsGeneric<'block_index_status', { finished: boolean; ratio: string }>;
+  export type InternalTxsIndexStatus = SocketMessageParamsGeneric<'internal_txs_index_status', { finished: boolean; ratio: string }>;
   export type TxStatusUpdate = SocketMessageParamsGeneric<'collated', NewBlockSocketResponse>;
   export type TxRawTrace = SocketMessageParamsGeneric<'raw_trace', RawTracesResponse>;
   export type NewTx = SocketMessageParamsGeneric<'transaction', { transaction: number }>;
   export type NewPendingTx = SocketMessageParamsGeneric<'pending_transaction', { pending_transaction: number }>;
-  export type NewDeposits = SocketMessageParamsGeneric<'deposits', { deposits: number }>;
+  export type NewOptimisticDeposits = SocketMessageParamsGeneric<'deposits', { deposits: number }>;
+  export type NewArbitrumDeposits = SocketMessageParamsGeneric<'new_messages_to_rollup_amount', { new_messages_to_rollup_amount: number }>;
   export type AddressBalance = SocketMessageParamsGeneric<'balance', { balance: string; block_number: number; exchange_rate: string }>;
   export type AddressCurrentCoinBalance =
   SocketMessageParamsGeneric<'current_coin_balance', { coin_balance: string; block_number: number; exchange_rate: string }>;
@@ -57,15 +64,19 @@ export namespace SocketMessage {
   export type AddressTokenBalancesErc20 = SocketMessageParamsGeneric<'updated_token_balances_erc_20', AddressTokensBalancesSocketMessage>;
   export type AddressTokenBalancesErc721 = SocketMessageParamsGeneric<'updated_token_balances_erc_721', AddressTokensBalancesSocketMessage>;
   export type AddressTokenBalancesErc1155 = SocketMessageParamsGeneric<'updated_token_balances_erc_1155', AddressTokensBalancesSocketMessage>;
+  export type AddressTokenBalancesErc404 = SocketMessageParamsGeneric<'updated_token_balances_erc_404', AddressTokensBalancesSocketMessage>;
   export type AddressCoinBalance = SocketMessageParamsGeneric<'coin_balance', { coin_balance: AddressCoinBalanceHistoryItem }>;
   export type AddressTxs = SocketMessageParamsGeneric<'transaction', { transactions: Array<Transaction> }>;
   export type AddressTxsPending = SocketMessageParamsGeneric<'pending_transaction', { transactions: Array<Transaction> }>;
   export type AddressTokenTransfer = SocketMessageParamsGeneric<'token_transfer', { token_transfers: Array<TokenTransfer> }>;
   export type AddressChangedBytecode = SocketMessageParamsGeneric<'changed_bytecode', Record<string, never>>;
+  export type AddressFetchedBytecode = SocketMessageParamsGeneric<'fetched_bytecode', { fetched_bytecode: string }>;
   export type SmartContractWasVerified = SocketMessageParamsGeneric<'smart_contract_was_verified', Record<string, never>>;
-  export type TokenTransfers = SocketMessageParamsGeneric<'token_transfer', {token_transfer: number }>;
-  export type TokenTotalSupply = SocketMessageParamsGeneric<'total_supply', {total_supply: number }>;
+  export type TokenTransfers = SocketMessageParamsGeneric<'token_transfer', { token_transfer: number }>;
+  export type TokenTotalSupply = SocketMessageParamsGeneric<'total_supply', { total_supply: number }>;
+  export type TokenInstanceMetadataFetched = SocketMessageParamsGeneric<'fetched_token_instance_metadata', TokenInstanceMetadataSocketMessage>;
   export type ContractVerification = SocketMessageParamsGeneric<'verification_result', SmartContractVerificationResponse>;
   export type NewZkEvmL2Batch = SocketMessageParamsGeneric<'new_zkevm_confirmed_batch', NewZkEvmBatchSocketResponse>;
+  export type NewArbitrumL2Batch = SocketMessageParamsGeneric<'new_arbitrum_batch', NewArbitrumBatchSocketResponse>;
   export type Unknown = SocketMessageParamsGeneric<undefined, unknown>;
 }
diff --git a/lib/solidityScan/schema.ts b/lib/solidityScan/schema.ts
new file mode 100644
index 0000000000..04ade657b4
--- /dev/null
+++ b/lib/solidityScan/schema.ts
@@ -0,0 +1,25 @@
+import * as v from 'valibot';
+
+export const SolidityScanIssueSeverityDistributionSchema = v.object({
+  critical: v.number(),
+  gas: v.number(),
+  high: v.number(),
+  informational: v.number(),
+  low: v.number(),
+  medium: v.number(),
+});
+
+export const SolidityScanSchema = v.object({
+  scan_report: v.object({
+    contractname: v.string(),
+    scan_status: v.string(),
+    scan_summary: v.object({
+      score_v2: v.string(),
+      issue_severity_distribution: SolidityScanIssueSeverityDistributionSchema,
+    }),
+    scanner_reference_url: v.string(),
+  }),
+});
+
+export type SolidityScanReport = v.InferOutput<typeof SolidityScanSchema>;
+export type SolidityScanReportSeverityDistribution = v.InferOutput<typeof SolidityScanIssueSeverityDistributionSchema>;
diff --git a/lib/solidityScan/useFetchReport.ts b/lib/solidityScan/useFetchReport.ts
new file mode 100644
index 0000000000..69e84b6e62
--- /dev/null
+++ b/lib/solidityScan/useFetchReport.ts
@@ -0,0 +1,51 @@
+import React from 'react';
+import * as v from 'valibot';
+
+import buildUrl from 'lib/api/buildUrl';
+import useApiQuery from 'lib/api/useApiQuery';
+import { SOLIDITY_SCAN_REPORT } from 'stubs/contract';
+
+import { SolidityScanSchema } from './schema';
+
+interface Params {
+  hash: string;
+}
+
+const RESOURCE_NAME = 'contract_solidity_scan_report';
+const ERROR_NAME = 'Invalid response schema';
+
+export default function useFetchReport({ hash }: Params) {
+  const query = useApiQuery(RESOURCE_NAME, {
+    pathParams: { hash },
+    queryOptions: {
+      select: (response) => {
+        const parsedResponse = v.safeParse(SolidityScanSchema, response);
+
+        if (!parsedResponse.success) {
+          throw Error(ERROR_NAME);
+        }
+
+        return parsedResponse.output;
+      },
+      enabled: Boolean(hash),
+      placeholderData: SOLIDITY_SCAN_REPORT,
+      retry: 0,
+    },
+  });
+
+  const errorMessage = query.error && 'message' in query.error ? query.error.message : undefined;
+
+  React.useEffect(() => {
+    if (errorMessage === ERROR_NAME) {
+      fetch('/node-api/monitoring/invalid-api-schema', {
+        method: 'POST',
+        body: JSON.stringify({
+          resource: RESOURCE_NAME,
+          url: buildUrl(RESOURCE_NAME, { hash }, undefined, true),
+        }),
+      });
+    }
+  }, [ errorMessage, hash ]);
+
+  return query;
+}
diff --git a/lib/token/metadata/attributesParser.ts b/lib/token/metadata/attributesParser.ts
index c863000366..63e572fe72 100644
--- a/lib/token/metadata/attributesParser.ts
+++ b/lib/token/metadata/attributesParser.ts
@@ -19,7 +19,7 @@ function formatValue(value: string | number, display: string | undefined, trait:
     }
     case 'date': {
       return {
-        value: dayjs(value).format('YYYY-MM-DD'),
+        value: dayjs(Number(value) * 1000).format('YYYY-MM-DD'),
       };
     }
     default: {
@@ -48,11 +48,25 @@ export default function attributesParser(attributes: Array<unknown>): Metadata['
         return;
       }
 
-      const value = 'value' in item && (typeof item.value === 'string' || typeof item.value === 'number') ? item.value : undefined;
+      const value = (() => {
+        if (!('value' in item)) {
+          return;
+        }
+        switch (typeof item.value) {
+          case 'string':
+          case 'number':
+            return item.value;
+          case 'boolean':
+            return String(item.value);
+          case 'object':
+            return JSON.stringify(item.value);
+        }
+      })();
+
       const trait = 'trait_type' in item && typeof item.trait_type === 'string' ? item.trait_type : undefined;
       const display = 'display_type' in item && typeof item.display_type === 'string' ? item.display_type : undefined;
 
-      if (!value) {
+      if (value === undefined) {
         return;
       }
 
@@ -61,5 +75,6 @@ export default function attributesParser(attributes: Array<unknown>): Metadata['
         trait_type: _upperFirst(trait || 'property'),
       };
     })
+    .filter((item) => item?.value)
     .filter(Boolean);
 }
diff --git a/lib/token/tokenTypes.ts b/lib/token/tokenTypes.ts
index 5246fc2418..a382e61340 100644
--- a/lib/token/tokenTypes.ts
+++ b/lib/token/tokenTypes.ts
@@ -1,14 +1,23 @@
 import type { NFTTokenType, TokenType } from 'types/api/token';
 
-export const NFT_TOKEN_TYPES: Array<{ title: string; id: NFTTokenType }> = [
-  { title: 'ERC-721', id: 'ERC-721' },
-  { title: 'ERC-1155', id: 'ERC-1155' },
-];
+import config from 'configs/app';
 
-export const TOKEN_TYPES: Array<{ title: string; id: TokenType }> = [
-  { title: 'ERC-20', id: 'ERC-20' },
+const tokenStandardName = config.chain.tokenStandard;
+
+export const NFT_TOKEN_TYPES: Record<NFTTokenType, string > = {
+  'ERC-721': `${ tokenStandardName }-721`,
+  'ERC-1155': `${ tokenStandardName }-1155`,
+  'ERC-404': `${ tokenStandardName }-404`,
+};
+
+export const TOKEN_TYPES: Record<TokenType, string > = {
+  'ERC-20': `${ tokenStandardName }-20`,
   ...NFT_TOKEN_TYPES,
-];
+};
+
+export const NFT_TOKEN_TYPE_IDS: Array<NFTTokenType> = [ 'ERC-721', 'ERC-1155', 'ERC-404' ];
+export const TOKEN_TYPE_IDS: Array<TokenType> = [ 'ERC-20', ...NFT_TOKEN_TYPE_IDS ];
 
-export const NFT_TOKEN_TYPE_IDS = NFT_TOKEN_TYPES.map(i => i.id);
-export const TOKEN_TYPE_IDS = TOKEN_TYPES.map(i => i.id);
+export function getTokenTypeName(typeId: TokenType) {
+  return TOKEN_TYPES[typeId];
+}
diff --git a/lib/tx/arbitrumMessageStatusDescription.ts b/lib/tx/arbitrumMessageStatusDescription.ts
new file mode 100644
index 0000000000..8f2a635a12
--- /dev/null
+++ b/lib/tx/arbitrumMessageStatusDescription.ts
@@ -0,0 +1,10 @@
+/* eslint-disable max-len */
+import type { ArbitrumMessageStatus } from 'types/api/transaction';
+
+export const MESSAGE_DESCRIPTIONS: Record<ArbitrumMessageStatus, string> = {
+  'Syncing with base layer': 'The incoming message was discovered on the rollup, but the corresponding message on L1 has not yet been found',
+  'Settlement pending': 'The transaction with the message was included in a rollup block, but there is no batch on L1 containing the block yet',
+  'Waiting for confirmation': 'The rollup block with the transaction containing the message was included in a batch on L1, but it is still waiting for the expiration of the fraud proof countdown',
+  'Ready for relay': 'The rollup state was confirmed successfully, and the message can be executed—funds can be claimed on L1',
+  Relayed: '',
+};
diff --git a/lib/validations/address.ts b/lib/validations/address.ts
deleted file mode 100644
index cfca644c41..0000000000
--- a/lib/validations/address.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// maybe it depends on the network??
-
-export const ADDRESS_REGEXP = /^0x[a-fA-F\d]{40}$/;
-
-export const ADDRESS_LENGTH = 42;
diff --git a/lib/validations/email.ts b/lib/validations/email.ts
deleted file mode 100644
index 98e0dc6d71..0000000000
--- a/lib/validations/email.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const EMAIL_REGEXP = /^[\w.%+-]+@[a-zA-Z\d-]+(?:\.[a-zA-Z\d-]+)+$/;
-
-export const validator = (value: string) => EMAIL_REGEXP.test(value) ? true : 'Invalid email';
diff --git a/lib/validations/url.ts b/lib/validations/url.ts
deleted file mode 100644
index b4b30d4e05..0000000000
--- a/lib/validations/url.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export const validator = (value: string | undefined) => {
-  if (!value) {
-    return true;
-  }
-
-  try {
-    new URL(value);
-    return true;
-  } catch (error) {
-    return 'Incorrect URL';
-  }
-};
diff --git a/lib/web3/client.ts b/lib/web3/client.ts
index e41e345455..8188f22869 100644
--- a/lib/web3/client.ts
+++ b/lib/web3/client.ts
@@ -2,10 +2,18 @@ import { createPublicClient, http } from 'viem';
 
 import currentChain from './currentChain';
 
-export const publicClient = createPublicClient({
-  chain: currentChain,
-  transport: http(),
-  batch: {
-    multicall: true,
-  },
-});
+export const publicClient = (() => {
+  if (currentChain.rpcUrls.default.http.filter(Boolean).length === 0) {
+    return;
+  }
+
+  try {
+    return createPublicClient({
+      chain: currentChain,
+      transport: http(),
+      batch: {
+        multicall: true,
+      },
+    });
+  } catch (error) {}
+})();
diff --git a/lib/web3/currentChain.ts b/lib/web3/currentChain.ts
index 23a089e97b..dd3892859f 100644
--- a/lib/web3/currentChain.ts
+++ b/lib/web3/currentChain.ts
@@ -1,20 +1,16 @@
-import type { Chain } from 'wagmi';
+import { type Chain } from 'viem';
 
 import config from 'configs/app';
 
-const currentChain: Chain = {
+const currentChain = {
   id: Number(config.chain.id),
   name: config.chain.name ?? '',
-  network: config.chain.name ?? '',
   nativeCurrency: {
     decimals: config.chain.currency.decimals,
     name: config.chain.currency.name ?? '',
     symbol: config.chain.currency.symbol ?? '',
   },
   rpcUrls: {
-    'public': {
-      http: [ config.chain.rpcUrl ?? '' ],
-    },
     'default': {
       http: [ config.chain.rpcUrl ?? '' ],
     },
@@ -25,6 +21,7 @@ const currentChain: Chain = {
       url: config.app.baseUrl,
     },
   },
-};
+  testnet: config.chain.isTestnet,
+} as const satisfies Chain;
 
 export default currentChain;
diff --git a/lib/web3/useAccount.ts b/lib/web3/useAccount.ts
new file mode 100644
index 0000000000..f3dfcd48c8
--- /dev/null
+++ b/lib/web3/useAccount.ts
@@ -0,0 +1,23 @@
+import type { UseAccountReturnType } from 'wagmi';
+import { useAccount } from 'wagmi';
+
+import config from 'configs/app';
+
+function useAccountFallback(): UseAccountReturnType {
+  return {
+    address: undefined,
+    addresses: undefined,
+    chain: undefined,
+    chainId: undefined,
+    connector: undefined,
+    isConnected: false,
+    isConnecting: false,
+    isDisconnected: true,
+    isReconnecting: false,
+    status: 'disconnected',
+  };
+}
+
+const hook = config.features.blockchainInteraction.isEnabled ? useAccount : useAccountFallback;
+
+export default hook;
diff --git a/lib/web3/useAccountWithDomain.ts b/lib/web3/useAccountWithDomain.ts
new file mode 100644
index 0000000000..0eeb18e4c5
--- /dev/null
+++ b/lib/web3/useAccountWithDomain.ts
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+
+import useAccount from './useAccount';
+
+export default function useAccountWithDomain(isEnabled: boolean) {
+  const { address } = useAccount();
+
+  const isQueryEnabled = config.features.nameService.isEnabled && Boolean(address) && Boolean(isEnabled);
+
+  const domainQuery = useApiQuery('address_domain', {
+    pathParams: {
+      chainId: config.chain.id,
+      address,
+    },
+    queryOptions: {
+      enabled: isQueryEnabled,
+      refetchOnMount: false,
+    },
+  });
+
+  return React.useMemo(() => {
+    return {
+      address: isEnabled ? address : undefined,
+      domain: domainQuery.data?.domain?.name,
+      isLoading: isQueryEnabled && domainQuery.isLoading,
+    };
+  }, [ address, domainQuery.data?.domain?.name, domainQuery.isLoading, isEnabled, isQueryEnabled ]);
+}
diff --git a/lib/web3/useAddOrSwitchChain.tsx b/lib/web3/useAddOrSwitchChain.tsx
index 05811de6d7..71114f5642 100644
--- a/lib/web3/useAddOrSwitchChain.tsx
+++ b/lib/web3/useAddOrSwitchChain.tsx
@@ -1,3 +1,4 @@
+import _get from 'lodash/get';
 import React from 'react';
 
 import config from 'configs/app';
@@ -24,9 +25,10 @@ export default function useAddOrSwitchChain() {
 
       const errorObj = getErrorObj(error);
       const code = errorObj && 'code' in errorObj ? errorObj.code : undefined;
+      const originalErrorCode = _get(errorObj, 'data.originalError.code');
 
       // This error code indicates that the chain has not been added to Wallet.
-      if (code === 4902) {
+      if (code === 4902 || originalErrorCode === 4902) {
         const params = [ {
           chainId: hexadecimalChainId,
           chainName: config.chain.name,
@@ -39,7 +41,6 @@ export default function useAddOrSwitchChain() {
           blockExplorerUrls: [ config.app.baseUrl ],
         } ] as never;
         // in wagmi types for wallet_addEthereumChain method is not provided
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
         return await provider.request({
           method: 'wallet_addEthereumChain',
diff --git a/lib/web3/useProvider.tsx b/lib/web3/useProvider.tsx
index 029eb24835..43cc7aa8fa 100644
--- a/lib/web3/useProvider.tsx
+++ b/lib/web3/useProvider.tsx
@@ -1,16 +1,14 @@
 import React from 'react';
-import type { WindowProvider } from 'wagmi';
-
-import 'wagmi/window';
 
 import type { WalletType } from 'types/client/wallets';
+import type { WalletProvider } from 'types/web3';
 
 import config from 'configs/app';
 
 const feature = config.features.web3Wallet;
 
 export default function useProvider() {
-  const [ provider, setProvider ] = React.useState<WindowProvider>();
+  const [ provider, setProvider ] = React.useState<WalletProvider>();
   const [ wallet, setWallet ] = React.useState<WalletType>();
 
   const initializeProvider = React.useMemo(() => async() => {
diff --git a/lib/web3/useWallet.ts b/lib/web3/useWallet.ts
new file mode 100644
index 0000000000..ac026e3390
--- /dev/null
+++ b/lib/web3/useWallet.ts
@@ -0,0 +1,61 @@
+import { useAppKit, useAppKitState } from '@reown/appkit/react';
+import React from 'react';
+import { useDisconnect, useAccountEffect } from 'wagmi';
+
+import * as mixpanel from 'lib/mixpanel/index';
+import useAccount from 'lib/web3/useAccount';
+
+interface Params {
+  source: mixpanel.EventPayload<mixpanel.EventTypes.WALLET_CONNECT>['Source'];
+}
+
+export default function useWeb3Wallet({ source }: Params) {
+  const { open: openModal } = useAppKit();
+  const { open: isOpen } = useAppKitState();
+  const { disconnect } = useDisconnect();
+  const [ isOpening, setIsOpening ] = React.useState(false);
+  const [ isClientLoaded, setIsClientLoaded ] = React.useState(false);
+  const isConnectionStarted = React.useRef(false);
+
+  React.useEffect(() => {
+    setIsClientLoaded(true);
+  }, []);
+
+  const handleConnect = React.useCallback(async() => {
+    setIsOpening(true);
+    await openModal();
+    setIsOpening(false);
+    mixpanel.logEvent(mixpanel.EventTypes.WALLET_CONNECT, { Source: source, Status: 'Started' });
+    isConnectionStarted.current = true;
+  }, [ openModal, source ]);
+
+  const handleAccountConnected = React.useCallback(({ isReconnected }: { isReconnected: boolean }) => {
+    if (!isReconnected && isConnectionStarted.current) {
+      mixpanel.logEvent(mixpanel.EventTypes.WALLET_CONNECT, { Source: source, Status: 'Connected' });
+      mixpanel.userProfile.setOnce({
+        'With Connected Wallet': true,
+      });
+    }
+    isConnectionStarted.current = false;
+  }, [ source ]);
+
+  const handleDisconnect = React.useCallback(() => {
+    disconnect();
+  }, [ disconnect ]);
+
+  useAccountEffect({ onConnect: handleAccountConnected });
+
+  const account = useAccount();
+  const address = account.address;
+  const isConnected = isClientLoaded && !account.isDisconnected && account.address !== undefined;
+
+  return React.useMemo(() => ({
+    connect: handleConnect,
+    disconnect: handleDisconnect,
+    isOpen: isOpening || isOpen,
+    isConnected,
+    isReconnecting: account.isReconnecting,
+    address,
+    openModal,
+  }), [ handleConnect, handleDisconnect, isOpening, isOpen, isConnected, account.isReconnecting, address, openModal ]);
+}
diff --git a/lib/web3/wagmiConfig.ts b/lib/web3/wagmiConfig.ts
new file mode 100644
index 0000000000..423b4b9b7e
--- /dev/null
+++ b/lib/web3/wagmiConfig.ts
@@ -0,0 +1,39 @@
+import { WagmiAdapter } from '@reown/appkit-adapter-wagmi';
+import { http } from 'viem';
+import { createConfig } from 'wagmi';
+
+import config from 'configs/app';
+import currentChain from 'lib/web3/currentChain';
+const feature = config.features.blockchainInteraction;
+
+const wagmi = (() => {
+  const chains = [ currentChain ];
+
+  if (!feature.isEnabled) {
+    const wagmiConfig = createConfig({
+      chains: [ currentChain ],
+      transports: {
+        [currentChain.id]: http(config.chain.rpcUrl || `${ config.api.endpoint }/api/eth-rpc`),
+      },
+      ssr: true,
+      batch: { multicall: { wait: 100 } },
+    });
+
+    return { config: wagmiConfig, adapter: null };
+  }
+
+  const wagmiAdapter = new WagmiAdapter({
+    networks: chains,
+    multiInjectedProviderDiscovery: true,
+    transports: {
+      [currentChain.id]: http(),
+    },
+    projectId: feature.walletConnect.projectId,
+    ssr: true,
+    batch: { multicall: { wait: 100 } },
+  });
+
+  return { config: wagmiAdapter.wagmiConfig, adapter: wagmiAdapter };
+})();
+
+export default wagmi;
diff --git a/lib/xStarScore/useFetchXStarScore.ts b/lib/xStarScore/useFetchXStarScore.ts
new file mode 100644
index 0000000000..3247c95a31
--- /dev/null
+++ b/lib/xStarScore/useFetchXStarScore.ts
@@ -0,0 +1,51 @@
+import React from 'react';
+import * as v from 'valibot';
+
+import config from 'configs/app';
+import buildUrl from 'lib/api/buildUrl';
+import useApiQuery from 'lib/api/useApiQuery';
+
+interface Params {
+  hash: string;
+}
+
+const RESOURCE_NAME = 'address_xstar_score';
+const ERROR_NAME = 'Invalid response schema';
+
+export default function useFetchXStarScore({ hash }: Params) {
+  const query = useApiQuery(RESOURCE_NAME, {
+    pathParams: { hash },
+    queryOptions: {
+      select: (response) => {
+        const parsedResponse = v.safeParse(v.object({ data: v.object({ level: v.nullable(v.string()) }) }), response);
+
+        if (!parsedResponse.success) {
+          throw Error(ERROR_NAME);
+        }
+
+        return parsedResponse.output;
+      },
+      enabled: Boolean(hash) && config.features.xStarScore.isEnabled,
+      placeholderData: {
+        data: { level: 'Base' },
+      },
+      retry: 0,
+    },
+  });
+
+  const errorMessage = query.error && 'message' in query.error ? query.error.message : undefined;
+
+  React.useEffect(() => {
+    if (errorMessage === ERROR_NAME) {
+      fetch('/node-api/monitoring/invalid-api-schema', {
+        method: 'POST',
+        body: JSON.stringify({
+          resource: RESOURCE_NAME,
+          url: buildUrl(RESOURCE_NAME, { hash }, undefined, true),
+        }),
+      });
+    }
+  }, [ errorMessage, hash ]);
+
+  return query;
+}
diff --git a/middleware.ts b/middleware.ts
index 17648c82f8..cd820f475e 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -19,8 +19,13 @@ export function middleware(req: NextRequest) {
     return accountResponse;
   }
 
-  const end = Date.now();
   const res = NextResponse.next();
+
+  middlewares.colorTheme(req, res);
+  middlewares.addressFormat(req, res);
+
+  const end = Date.now();
+
   res.headers.append('Content-Security-Policy', cspPolicy);
   res.headers.append('Server-Timing', `middleware;dur=${ end - start }`);
   res.headers.append('Docker-ID', process.env.HOSTNAME || '');
diff --git a/mocks/ad/textAd.ts b/mocks/ad/textAd.ts
index 6ee891bea8..0e5bb6feae 100644
--- a/mocks/ad/textAd.ts
+++ b/mocks/ad/textAd.ts
@@ -2,7 +2,7 @@ export const duck = {
   ad: {
     name: 'Hello utia!',
     description_short: 'Utia is the best! Go with utia! Utia is the best! Go with utia!',
-    thumbnail: 'https://utia.utia',
+    thumbnail: 'http://localhost:3100/utia.jpg',
     url: 'https://test.url',
     cta_button: 'Click me!',
   },
diff --git a/mocks/address/address.ts b/mocks/address/address.ts
index 7c7bc612cb..b3ad305aea 100644
--- a/mocks/address/address.ts
+++ b/mocks/address/address.ts
@@ -8,7 +8,7 @@ export const hash = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859';
 
 export const withName: AddressParam = {
   hash: hash,
-  implementation_name: null,
+  implementations: null,
   is_contract: false,
   is_verified: null,
   name: 'ArianeeStore',
@@ -20,7 +20,7 @@ export const withName: AddressParam = {
 
 export const withEns: AddressParam = {
   hash: hash,
-  implementation_name: null,
+  implementations: null,
   is_contract: false,
   is_verified: null,
   name: 'ArianeeStore',
@@ -30,9 +30,27 @@ export const withEns: AddressParam = {
   ens_domain_name: 'kitty.kitty.kitty.cat.eth',
 };
 
+export const withNameTag: AddressParam = {
+  hash: hash,
+  implementations: null,
+  is_contract: false,
+  is_verified: null,
+  name: 'ArianeeStore',
+  private_tags: [],
+  watchlist_names: [],
+  public_tags: [],
+  ens_domain_name: 'kitty.kitty.kitty.cat.eth',
+  metadata: {
+    reputation: null,
+    tags: [
+      { tagType: 'name', name: 'Mrs. Duckie', slug: 'mrs-duckie', ordinal: 0, meta: null },
+    ],
+  },
+};
+
 export const withoutName: AddressParam = {
   hash: hash,
-  implementation_name: null,
+  implementations: null,
   is_contract: false,
   is_verified: null,
   name: null,
@@ -44,7 +62,7 @@ export const withoutName: AddressParam = {
 
 export const token: Address = {
   hash: hash,
-  implementation_name: null,
+  implementations: null,
   is_contract: true,
   is_verified: false,
   name: null,
@@ -55,44 +73,56 @@ export const token: Address = {
   token: tokenInfo,
   block_number_balance_updated_at: 8201413,
   coin_balance: '1',
-  creation_tx_hash: '0xc38cf7377bf72d6436f63c37b01b24d032101f20ec1849286dc703c712f10c98',
+  creation_transaction_hash: '0xc38cf7377bf72d6436f63c37b01b24d032101f20ec1849286dc703c712f10c98',
   creator_address_hash: '0x34A9c688512ebdB575e82C50c9803F6ba2916E72',
-  exchange_rate: null,
-  implementation_address: null,
-  has_custom_methods_read: false,
-  has_custom_methods_write: false,
+  exchange_rate: '0.04311',
   has_decompiled_code: false,
   has_logs: false,
-  has_methods_read: false,
-  has_methods_read_proxy: false,
-  has_methods_write: false,
-  has_methods_write_proxy: false,
   has_token_transfers: true,
   has_tokens: true,
   has_validated_blocks: false,
   ens_domain_name: null,
 };
 
+export const eoa: Address = {
+  block_number_balance_updated_at: 30811263,
+  coin_balance: '2782650189688719421432220500',
+  creation_transaction_hash: '0xf2aff6501b632604c39978b47d309813d8a1bcca721864bbe86abf59704f195e',
+  creator_address_hash: '0x803ad3F50b9e1fF68615e8B053A186e1be288943',
+  exchange_rate: '0.04311',
+  has_decompiled_code: false,
+  has_logs: true,
+  has_token_transfers: false,
+  has_tokens: true,
+  has_validated_blocks: false,
+  hash: hash,
+  implementations: [],
+  is_contract: false,
+  is_verified: false,
+  name: null,
+  private_tags: [ publicTag ],
+  public_tags: [ privateTag ],
+  token: null,
+  watchlist_names: [ watchlistName ],
+  watchlist_address_id: 42,
+  ens_domain_name: null,
+};
+
 export const contract: Address = {
   block_number_balance_updated_at: 30811263,
   coin_balance: '27826501896887194214322205',
-  creation_tx_hash: '0xf2aff6501b632604c39978b47d309813d8a1bcca721864bbe86abf59704f195e',
+  creation_transaction_hash: '0xf2aff6501b632604c39978b47d309813d8a1bcca721864bbe86abf59704f195e',
   creator_address_hash: '0x803ad3F50b9e1fF68615e8B053A186e1be288943',
   exchange_rate: '0.04311',
-  has_custom_methods_read: false,
-  has_custom_methods_write: false,
   has_decompiled_code: false,
   has_logs: true,
-  has_methods_read: true,
-  has_methods_read_proxy: true,
-  has_methods_write: true,
-  has_methods_write_proxy: true,
   has_token_transfers: false,
   has_tokens: false,
   has_validated_blocks: false,
   hash: hash,
-  implementation_address: '0x2F4F4A52295940C576417d29F22EEb92B440eC89',
-  implementation_name: 'HomeBridge',
+  implementations: [
+    { address: '0x2F4F4A52295940C576417d29F22EEb92B440eC89', name: 'HomeBridge' },
+  ],
   is_contract: true,
   is_verified: true,
   name: 'EternalStorageProxy',
@@ -107,23 +137,16 @@ export const contract: Address = {
 export const validator: Address = {
   block_number_balance_updated_at: 30811932,
   coin_balance: '22910462800601256910890',
-  creation_tx_hash: null,
+  creation_transaction_hash: null,
   creator_address_hash: null,
   exchange_rate: '0.00432018',
-  has_custom_methods_read: false,
-  has_custom_methods_write: false,
   has_decompiled_code: false,
   has_logs: false,
-  has_methods_read: false,
-  has_methods_read_proxy: false,
-  has_methods_write: false,
-  has_methods_write_proxy: false,
   has_token_transfers: false,
   has_tokens: false,
   has_validated_blocks: true,
   hash: hash,
-  implementation_address: null,
-  implementation_name: null,
+  implementations: [],
   is_contract: false,
   is_verified: false,
   name: 'Kiryl Ihnatsyeu',
@@ -134,3 +157,12 @@ export const validator: Address = {
   watchlist_address_id: null,
   ens_domain_name: null,
 };
+
+export const filecoin = {
+  ...validator,
+  filecoin: {
+    actor_type: 'evm' as const,
+    id: 'f02977693',
+    robust: 'f410fuiwj6a3yxajbohrl5vu6ns6o2e2jriul52lvzci',
+  },
+};
diff --git a/mocks/address/coinBalanceHistory.ts b/mocks/address/coinBalanceHistory.ts
index 7bd121dafe..cc78d75602 100644
--- a/mocks/address/coinBalanceHistory.ts
+++ b/mocks/address/coinBalanceHistory.ts
@@ -35,33 +35,36 @@ export const baseResponse: AddressCoinBalanceHistoryResponse = {
   next_page_params: null,
 };
 
-export const chartResponse: AddressCoinBalanceHistoryChart = [
-  {
-    date: '2022-11-02',
-    value: '128238612887883515',
-  },
-  {
-    date: '2022-11-03',
-    value: '199807583157570922',
-  },
-  {
-    date: '2022-11-04',
-    value: '114487912907005778',
-  },
-  {
-    date: '2022-11-05',
-    value: '219533112907005778',
-  },
-  {
-    date: '2022-11-06',
-    value: '116487912907005778',
-  },
-  {
-    date: '2022-11-07',
-    value: '199807583157570922',
-  },
-  {
-    date: '2022-11-08',
-    value: '216488112907005778',
-  },
-];
+export const chartResponse: AddressCoinBalanceHistoryChart = {
+  items: [
+    {
+      date: '2022-11-02',
+      value: '128238612887883515',
+    },
+    {
+      date: '2022-11-03',
+      value: '199807583157570922',
+    },
+    {
+      date: '2022-11-04',
+      value: '114487912907005778',
+    },
+    {
+      date: '2022-11-05',
+      value: '219533112907005778',
+    },
+    {
+      date: '2022-11-06',
+      value: '116487912907005778',
+    },
+    {
+      date: '2022-11-07',
+      value: '199807583157570922',
+    },
+    {
+      date: '2022-11-08',
+      value: '216488112907005778',
+    },
+  ],
+  days: 10,
+};
diff --git a/mocks/address/epochRewards.ts b/mocks/address/epochRewards.ts
new file mode 100644
index 0000000000..5b22a66cd8
--- /dev/null
+++ b/mocks/address/epochRewards.ts
@@ -0,0 +1,50 @@
+import type { AddressEpochRewardsResponse } from 'types/api/address';
+
+import { tokenInfo } from 'mocks/tokens/tokenInfo';
+
+import { withEns, withName, withoutName } from './address';
+
+export const epochRewards: AddressEpochRewardsResponse = {
+  items: [
+    {
+      type: 'delegated_payment',
+      amount: '136609473658452408568',
+      account: withName,
+      associated_account: withName,
+      block_hash: '0x',
+      block_number: 26369280,
+      block_timestamp: '2022-05-15T13:16:24Z',
+      epoch_number: 1526,
+      token: tokenInfo,
+    },
+    {
+      type: 'group',
+      amount: '117205842355246195095',
+      account: withoutName,
+      associated_account: withoutName,
+      block_hash: '0x',
+      block_number: 26352000,
+      block_timestamp: '2022-05-15T13:16:24Z',
+      epoch_number: 1525,
+      token: tokenInfo,
+    },
+    {
+      type: 'validator',
+      amount: '125659647325556554060',
+      account: withEns,
+      associated_account: withEns,
+      block_hash: '0x',
+      block_number: 26300160,
+      block_timestamp: '2022-05-15T13:16:24Z',
+      epoch_number: 1524,
+      token: tokenInfo,
+    },
+  ],
+  next_page_params: {
+    amount: '71952055594478242556',
+    associated_account_address_hash: '0x30d060f129817c4de5fbc1366d53e19f43c8c64f',
+    block_number: 25954560,
+    items_count: 50,
+    type: 'delegated_payment',
+  },
+};
diff --git a/mocks/address/implementations.ts b/mocks/address/implementations.ts
new file mode 100644
index 0000000000..1d77032284
--- /dev/null
+++ b/mocks/address/implementations.ts
@@ -0,0 +1,11 @@
+export const multiple = [
+  { address: '0xA84d24bD8ACE4d349C5f8c5DeeDd8bc071Ce5e2b', name: null },
+  { address: '0xc9e91eDeA9DC16604022e4E5b437Df9c64EdB05A', name: 'Diamond' },
+  { address: '0x2041832c62C0F89426b48B5868146C0b1fcd23E7', name: null },
+  { address: '0x5f7DC6ECcF05594429671F83cc0e42EE18bC0974', name: 'VariablePriceFacet' },
+  { address: '0x7abC92E242e88e4B0d6c5Beb4Df80e94D2c8A78c', name: null },
+  { address: '0x84178a0c58A860eCCFB7E3aeA64a09543062A356', name: 'MultiSaleFacet' },
+  { address: '0x33aD95537e63e9f09d96dE201e10715Ed40D9400', name: 'SVGTemplatesFacet' },
+  { address: '0xfd86Aa7f902185a8Df9859c25E4BF52D3DaDd9FA', name: 'ERC721AReceiverFacet' },
+  { address: '0x6945a35df18e59Ce09fec4B6cD3C4F9cFE6369de', name: null },
+];
diff --git a/mocks/address/tabCounters.ts b/mocks/address/tabCounters.ts
new file mode 100644
index 0000000000..3853ffab4d
--- /dev/null
+++ b/mocks/address/tabCounters.ts
@@ -0,0 +1,11 @@
+import type { AddressTabsCounters } from 'types/api/address';
+
+export const base: AddressTabsCounters = {
+  internal_txs_count: 13,
+  logs_count: 51,
+  token_balances_count: 3,
+  token_transfers_count: 3,
+  transactions_count: 51,
+  validations_count: 42,
+  withdrawals_count: 11,
+};
diff --git a/mocks/address/tokens.ts b/mocks/address/tokens.ts
index c8c7386134..7505eebc57 100644
--- a/mocks/address/tokens.ts
+++ b/mocks/address/tokens.ts
@@ -1,4 +1,4 @@
-import type { AddressCollectionsResponse, AddressNFTsResponse, AddressTokenBalance } from 'types/api/address';
+import type { AddressCollectionsResponse, AddressNFTsResponse, AddressTokenBalance, AddressTokensResponse } from 'types/api/address';
 
 import * as tokens from 'mocks/tokens/tokenInfo';
 import * as tokenInstance from 'mocks/tokens/tokenInstance';
@@ -38,6 +38,17 @@ export const erc20LongSymbol: AddressTokenBalance = {
   token_instance: null,
 };
 
+export const erc20BigAmount: AddressTokenBalance = {
+  token: {
+    ...tokens.tokenInfoERC20LongSymbol,
+    exchange_rate: '4200000000',
+    name: 'DuckDuckGoose Stable Coin',
+  },
+  token_id: null,
+  value: '39000000000000000000',
+  token_instance: null,
+};
+
 export const erc721a: AddressTokenBalance = {
   token: tokens.tokenInfoERC721a,
   token_id: null,
@@ -94,28 +105,53 @@ export const erc1155LongId: AddressTokenBalance = {
   value: '42',
 };
 
-export const erc20List = {
+export const erc404a: AddressTokenBalance = {
+  token: tokens.tokenInfoERC404,
+  token_id: '42',
+  token_instance: tokenInstance.base,
+  value: '240000000000000',
+};
+
+export const erc404b: AddressTokenBalance = {
+  token: tokens.tokenInfoERC404,
+  token_instance: null,
+  value: '11',
+  token_id: null,
+};
+
+export const erc20List: AddressTokensResponse = {
   items: [
     erc20a,
     erc20b,
     erc20c,
   ],
+  next_page_params: null,
 };
 
-export const erc721List = {
+export const erc721List: AddressTokensResponse = {
   items: [
     erc721a,
     erc721b,
     erc721c,
   ],
+  next_page_params: null,
 };
 
-export const erc1155List = {
+export const erc1155List: AddressTokensResponse = {
   items: [
     erc1155withoutName,
     erc1155a,
     erc1155b,
   ],
+  next_page_params: null,
+};
+
+export const erc404List: AddressTokensResponse = {
+  items: [
+    erc404a,
+    erc404b,
+  ],
+  next_page_params: null,
 };
 
 export const nfts: AddressNFTsResponse = {
@@ -132,6 +168,12 @@ export const nfts: AddressNFTsResponse = {
       token_type: 'ERC-721',
       value: '1',
     },
+    {
+      ...tokenInstance.unique,
+      token: tokens.tokenInfoERC404,
+      token_type: 'ERC-404',
+      value: '11000',
+    },
   ],
   next_page_params: null,
 };
@@ -142,22 +184,27 @@ const nftInstance = {
   value: '11',
 };
 
+const nftInstanceWithoutImage = {
+  ...nftInstance,
+  image_url: null,
+};
+
 export const collections: AddressCollectionsResponse = {
   items: [
     {
       token: tokens.tokenInfoERC1155a,
       amount: '100',
-      token_instances: Array(5).fill(nftInstance),
+      token_instances: Array(5).fill(nftInstanceWithoutImage),
     },
     {
       token: tokens.tokenInfoERC20LongSymbol,
       amount: '100',
-      token_instances: Array(5).fill(nftInstance),
+      token_instances: Array(5).fill(nftInstanceWithoutImage),
     },
     {
       token: tokens.tokenInfoERC1155WithoutName,
       amount: '1',
-      token_instances: [ nftInstance ],
+      token_instances: [ nftInstanceWithoutImage ],
     },
   ],
   next_page_params: {
diff --git a/mocks/advancedFilter/advancedFilter.ts b/mocks/advancedFilter/advancedFilter.ts
new file mode 100644
index 0000000000..87f383b0cf
--- /dev/null
+++ b/mocks/advancedFilter/advancedFilter.ts
@@ -0,0 +1,124 @@
+import type { AdvancedFilterResponse } from 'types/api/advancedFilter';
+
+export const baseResponse: AdvancedFilterResponse = {
+  items: [
+    {
+      timestamp: '2024-12-06T12:38:59.000000Z',
+      total: null,
+      type: 'coin_transfer',
+      value: '0',
+      hash: '0x35e5793d3da98d8e8e3944e40fa15028806502b53a2319501c6acdb8c83ed4bc',
+      from: {
+        ens_domain_name: null,
+        hash: '0xC1b634853Cb333D3aD8663715b08f41A3Aec47cc',
+        implementations: [],
+        is_contract: false,
+        is_verified: false,
+        metadata: null,
+        name: null,
+        private_tags: [],
+        public_tags: [],
+        watchlist_names: [],
+      },
+      token: null,
+      to: {
+        ens_domain_name: null,
+        hash: '0x1c479675ad559DC151F6Ec7ed3FbF8ceE79582B6',
+        implementations: [
+          {
+            address: '0x31DA64D19Cd31A19CD09F4070366Fe2144792cf7',
+            name: 'SequencerInbox',
+          },
+        ],
+        is_contract: true,
+        is_verified: true,
+        metadata: null,
+        name: 'TransparentUpgradeableProxy',
+        private_tags: [],
+        public_tags: [],
+        watchlist_names: [],
+      },
+      method: 'addSequencerL2BatchFromBlobs',
+      fee: '2657475294553624',
+    },
+    {
+      timestamp: '2024-12-06T12:38:59.000000Z',
+      total: null,
+      type: 'coin_transfer',
+      value: '1328910000000000',
+      hash: '0x0d7a6c1e91540f767bc4d48bbcf2aa3fa22c93d0d8a60fb34bd7f0ecec5565b0',
+      from: {
+        ens_domain_name: null,
+        hash: '0x9BDc51980d3b81a0fBd031d0F0E39e9E1aFCB294',
+        implementations: [],
+        is_contract: false,
+        is_verified: false,
+        metadata: null,
+        name: null,
+        private_tags: [],
+        public_tags: [],
+        watchlist_names: [],
+      },
+      token: null,
+      to: {
+        ens_domain_name: null,
+        hash: '0xFe4cda7cc3603bdB9447cAd4A6550290AFeF6b38',
+        implementations: [],
+        is_contract: false,
+        is_verified: false,
+        metadata: null,
+        name: null,
+        private_tags: [],
+        public_tags: [],
+        watchlist_names: [],
+      },
+      method: null,
+      fee: '279416150328000',
+    },
+    {
+      timestamp: '2024-12-06T12:38:59.000000Z',
+      total: null,
+      type: 'coin_transfer',
+      value: '0',
+      hash: '0x925bb2b7bf0b7a37ba4012bd718015cae29fa44e7846a7563c01f11ef99461e2',
+      from: {
+        ens_domain_name: null,
+        hash: '0x807Db16fd01766EE8A7040B6d32F4169c0A0Bf47',
+        implementations: [],
+        is_contract: false,
+        is_verified: false,
+        metadata: null,
+        name: null,
+        private_tags: [],
+        public_tags: [],
+        watchlist_names: [],
+      },
+      token: null,
+      to: {
+        ens_domain_name: null,
+        hash: '0x7f39C581F595B53c5cb19bD0b3f8dA6c935E2Ca0',
+        implementations: [],
+        is_contract: true,
+        is_verified: true,
+        metadata: null,
+        name: 'WstETH',
+        private_tags: [],
+        public_tags: [],
+        watchlist_names: [],
+      },
+      method: 'approve',
+      fee: '620080096879104',
+    },
+  ],
+  next_page_params: {
+    block_number: 5867485,
+    internal_transaction_index: null,
+    token_transfer_index: null,
+    transaction_index: 208,
+    items_count: 50,
+  },
+  search_params: {
+    tokens: {},
+    methods: {},
+  },
+};
diff --git a/mocks/apps/app.html b/mocks/apps/app.html
new file mode 100644
index 0000000000..c7c675b977
--- /dev/null
+++ b/mocks/apps/app.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Mock HTML Content</title>
+  <style>
+    html {
+      height: 100%;
+    }
+    body {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      border: 1px solid #9747FF;
+      background: rgba(151, 71, 255, 0.10);
+      position: relative;
+      box-sizing: border-box;
+    }
+    h1 {
+      color: #9F7AEA;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+  <h1>Full view app</h1>
+</body>
+</html>
diff --git a/mocks/apps/apps.ts b/mocks/apps/apps.ts
index a8b27a70a4..2f748c625a 100644
--- a/mocks/apps/apps.ts
+++ b/mocks/apps/apps.ts
@@ -11,6 +11,9 @@ export const apps = [
     description: 'Hop is a scalable rollup-to-rollup general token bridge. It allows users to send tokens from one rollup or sidechain to another almost immediately without having to wait for the networks challenge period.',
     external: true,
     url: 'https://goerli.hop.exchange/send?token=ETH&sourceNetwork=ethereum',
+    github: [ 'https://github.com/hop-protocol/hop', 'https://github.com/hop-protocol/hop-ui' ],
+    discord: 'https://discord.gg/hopprotocol',
+    twitter: 'https://twitter.com/HopProtocol',
   },
   {
     author: 'Blockscout',
diff --git a/mocks/apps/ratings.ts b/mocks/apps/ratings.ts
new file mode 100644
index 0000000000..3a0322850d
--- /dev/null
+++ b/mocks/apps/ratings.ts
@@ -0,0 +1,13 @@
+import { apps } from './apps';
+
+export const ratings = {
+  records: [
+    {
+      fields: {
+        appId: apps[0].id,
+        rating: 4.3,
+        count: 15,
+      },
+    },
+  ],
+};
diff --git a/mocks/apps/securityReports.ts b/mocks/apps/securityReports.ts
new file mode 100644
index 0000000000..33457ddf2f
--- /dev/null
+++ b/mocks/apps/securityReports.ts
@@ -0,0 +1,60 @@
+import { apps } from './apps';
+
+export const securityReports = [
+  {
+    appName: apps[0].id,
+    doc: 'http://docs.li.fi/smart-contracts/deployments#mainnet',
+    chainsData: {
+      '1': {
+        overallInfo: {
+          verifiedNumber: 1,
+          totalContractsNumber: 1,
+          solidityScanContractsNumber: 1,
+          securityScore: 87.5,
+          issueSeverityDistribution: {
+            critical: 4,
+            gas: 1,
+            high: 0,
+            informational: 4,
+            low: 2,
+            medium: 0,
+          },
+        },
+        contractsData: [
+          {
+            address: '0x1231DEB6f5749EF6cE6943a275A1D3E7486F4EaE',
+            isVerified: true,
+            solidityScanReport: {
+              connection_id: '',
+              contract_address: '0x1231DEB6f5749EF6cE6943a275A1D3E7486F4EaE',
+              contract_chain: 'optimism',
+              contract_platform: 'blockscout',
+              contract_url: 'http://optimism.blockscout.com/address/0x1231DEB6f5749EF6cE6943a275A1D3E7486F4EaE',
+              contractname: 'LiFiDiamond',
+              is_quick_scan: true,
+              node_reference_id: null,
+              request_type: 'threat_scan',
+              scanner_reference_url: 'http://solidityscan.com/quickscan/0x1231DEB6f5749EF6cE6943a275A1D3E7486F4EaE/blockscout/eth?ref=blockscout',
+              scan_status: 'scan_done',
+              scan_summary: {
+                issue_severity_distribution: {
+                  critical: 0,
+                  gas: 1,
+                  high: 0,
+                  informational: 4,
+                  low: 2,
+                  medium: 0,
+                },
+                lines_analyzed_count: 72,
+                scan_time_taken: 1,
+                score: '4.38',
+                score_v2: '87.50',
+                threat_score: '100.00',
+              },
+            },
+          },
+        ],
+      },
+    },
+  },
+];
diff --git a/mocks/arbitrum/deposits.ts b/mocks/arbitrum/deposits.ts
new file mode 100644
index 0000000000..b1f47d3f76
--- /dev/null
+++ b/mocks/arbitrum/deposits.ts
@@ -0,0 +1,46 @@
+import type { ArbitrumL2MessagesResponse, ArbitrumLatestDepositsResponse } from 'types/api/arbitrumL2';
+
+export const baseResponse: ArbitrumL2MessagesResponse = {
+  items: [
+    {
+      completion_transaction_hash: '0x0b7d58c0a6b4695ba28d99df928591fb931c812c0aab6d0093ff5040d2f9bc5e',
+      id: 181920,
+      origination_address: '0x2B51Ae4412F79c3c1cB12AA40Ea4ECEb4e80511a',
+      origination_transaction_block_number: 123456,
+      origination_transaction_hash: '0x210d9f70f411de1079e32a98473b04345a5ea6ff2340a8511ebc2df641274436',
+      origination_timestamp: '2023-06-01T14:46:48.000000Z',
+      status: 'initiated',
+    },
+    {
+      completion_transaction_hash: '0x0b7d58c0a6b4695ba28d99df928591fb931c812c0aab6d0093ff5040d2f9bc5e',
+      id: 181921,
+      origination_address: '0x2B51Ae4412F79c3c1cB12AA40Ea4ECEb4e80511a',
+      origination_transaction_block_number: 123400,
+      origination_transaction_hash: '0x210d9f70f411de1079e32a98473b04345a5ea6ff2340a8511ebc2df641274436',
+      origination_timestamp: '2023-06-01T14:46:48.000000Z',
+      status: 'relayed',
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    id: 123,
+    direction: 'to-rollup',
+  },
+};
+
+export const latestDepositsResponse: ArbitrumLatestDepositsResponse = {
+  items: [
+    {
+      completion_transaction_hash: '0x3ccdf87449d3de6a9dcd3eddb7bc9ecdf1770d4631f03cdf12a098911618d138',
+      origination_transaction_block_number: 123400,
+      origination_transaction_hash: '0x210d9f70f411de1079e32a98473b04345a5ea6ff2340a8511ebc2df641274436',
+      origination_timestamp: '2023-06-01T14:46:48.000000Z',
+    },
+    {
+      completion_transaction_hash: '0xd16d918b2f95a5cdf66824f6291b6d5eb80b6f4acab3f9fb82ee0ec4109646a0',
+      origination_timestamp: null,
+      origination_transaction_block_number: null,
+      origination_transaction_hash: null,
+    },
+  ],
+};
diff --git a/mocks/arbitrum/txnBatch.ts b/mocks/arbitrum/txnBatch.ts
new file mode 100644
index 0000000000..5d163ba6bc
--- /dev/null
+++ b/mocks/arbitrum/txnBatch.ts
@@ -0,0 +1,40 @@
+/* eslint-disable max-len */
+import type { ArbitrumL2TxnBatch } from 'types/api/arbitrumL2';
+
+import { finalized } from './txnBatches';
+
+export const batchData: ArbitrumL2TxnBatch = {
+  ...finalized,
+  after_acc: '0xcd064f3409015e8e6407e492e5275a185e492c6b43ccf127f22092d8057a9ffb',
+  before_acc: '0x2ed7c4985eb778d76ec400a43805e7feecc8c2afcdb492dbe5caf227de6d37bc',
+  start_block: 1245209,
+  end_block: 1245490,
+  data_availability: {
+    batch_data_container: 'in_blob4844',
+  },
+};
+
+export const batchDataAnytrust: ArbitrumL2TxnBatch = {
+  ...finalized,
+  after_acc: '0xcd064f3409015e8e6407e492e5275a185e492c6b43ccf127f22092d8057a9ffb',
+  before_acc: '0x2ed7c4985eb778d76ec400a43805e7feecc8c2afcdb492dbe5caf227de6d37bc',
+  start_block: 1245209,
+  end_block: 1245490,
+  data_availability: {
+    batch_data_container: 'in_anytrust',
+    bls_signature: '0x142577943e30b1ad1b4e40a1c08e00c24a68d6c366f953e361048b7127e327b5bdb8f168ba986beae40cfaf79ea2788004d750555684751e361d6f6445e5c521b45ac93a76da24add241a4a5410ca3a09fa82cf0aafd78801cbd0ad99d5be6b3',
+    data_hash: '0x4ffada101d8185bcba227f2cff9e0ea0a4deeb08f328601a898131429a436ebe',
+    timeout: '2024-08-22T12:39:22Z',
+    signers: [
+      {
+        key: '0x0c6694955b524d718ca445831c5375393773401f33725a79661379dddabd5fff28619dc070befd9ed73d699e5c236c1a163be58ba81002b6130709bc064af5d7ba947130b72056bf17263800f1a3ab2269c6a510ef8e7412fd56d1ef1b916a1306e3b1d9c82c099371bd9861582acaada3a16e9dfee5d0ebce61096598a82f112d0a935e8cab5c48d82e3104b0c7ba79157dad1a019a3e7f6ad077b8e6308b116fec0f58239622463c3631fa01e2b4272409215b8009422c16715dbede590906',
+        proof: '0x06dcb5e56764bb72e6a45e6deb301ca85d8c4315c1da2efa29927f2ac8fb25571ce31d2d603735fe03196f6d56bcbf9a1999a89a74d5369822c4445d676c15ed52e5008daa775dc9a839c99ff963a19946ac740579874dac4f639907ae1bc69f',
+        trusted: false,
+      },
+      {
+        key: '0x0ee5aaeabd57313285207eb89366b411286cf3f1c5e30eb7e355f55385308b91d5807284323ee89a9743c70676f4949504ced3ed41612cbfda06ad55200c1c77d3fb3700059befd64c44bc4a57cb567ec1481ee564cf6cd6cf1f2f4a2dee6db00c547c38400ab118dedae8afd5bab93b703f76a0991baa5d43fbb125194c06b5461f8c738a3c4278a3d98e5456aec0720883c0d28919537a36e2ffd5f731e742b6653557d154c164e068ef983b367ef626faaed46f4eadecbb12b7e55f23175d',
+        trusted: true,
+      },
+    ],
+  },
+};
diff --git a/mocks/arbitrum/txnBatches.ts b/mocks/arbitrum/txnBatches.ts
new file mode 100644
index 0000000000..54ab913fa4
--- /dev/null
+++ b/mocks/arbitrum/txnBatches.ts
@@ -0,0 +1,39 @@
+import type { ArbitrumL2TxnBatchesItem, ArbitrumL2TxnBatchesResponse } from 'types/api/arbitrumL2';
+
+export const finalized: ArbitrumL2TxnBatchesItem = {
+  number: 12345,
+  blocks_count: 12345,
+  transactions_count: 10000,
+  commitment_transaction: {
+    block_number: 12345,
+    timestamp: '2022-04-17T08:51:58.000000Z',
+    hash: '0x262e7215739d6a7e33b2c20b45a838801a0f5f080f20bec8e54eb078420c4661',
+    status: 'finalized',
+  },
+  batch_data_container: 'in_blob4844',
+};
+
+export const unfinalized: ArbitrumL2TxnBatchesItem = {
+  number: 12344,
+  blocks_count: 10000,
+  transactions_count: 103020,
+  commitment_transaction: {
+    block_number: 12340,
+    timestamp: '2022-04-17T08:51:58.000000Z',
+    hash: '0x262e7215739d6a7e33b2c20b45a838801a0f5f080f20bec8e54eb078420c4661',
+    status: 'unfinalized',
+  },
+  batch_data_container: null,
+
+};
+
+export const baseResponse: ArbitrumL2TxnBatchesResponse = {
+  items: [
+    finalized,
+    unfinalized,
+  ],
+  next_page_params: {
+    items_count: 50,
+    number: 123,
+  },
+};
diff --git a/mocks/arbitrum/withdrawals.ts b/mocks/arbitrum/withdrawals.ts
new file mode 100644
index 0000000000..a825e18de6
--- /dev/null
+++ b/mocks/arbitrum/withdrawals.ts
@@ -0,0 +1,29 @@
+import type { ArbitrumL2MessagesResponse } from 'types/api/arbitrumL2';
+
+export const baseResponse: ArbitrumL2MessagesResponse = {
+  items: [
+    {
+      completion_transaction_hash: '0x0b7d58c0a6b4695ba28d99df928591fb931c812c0aab6d0093ff5040d2f9bc5e',
+      id: 181920,
+      origination_address: '0x2B51Ae4412F79c3c1cB12AA40Ea4ECEb4e80511a',
+      origination_transaction_block_number: 123456,
+      origination_transaction_hash: '0x210d9f70f411de1079e32a98473b04345a5ea6ff2340a8511ebc2df641274436',
+      origination_timestamp: '2023-06-01T14:46:48.000000Z',
+      status: 'sent',
+    },
+    {
+      completion_transaction_hash: '0x0b7d58c0a6b4695ba28d99df928591fb931c812c0aab6d0093ff5040d2f9bc5e',
+      id: 181921,
+      origination_address: '0x2B51Ae4412F79c3c1cB12AA40Ea4ECEb4e80511a',
+      origination_transaction_block_number: 123400,
+      origination_transaction_hash: '0x210d9f70f411de1079e32a98473b04345a5ea6ff2340a8511ebc2df641274436',
+      origination_timestamp: '2023-06-01T14:46:48.000000Z',
+      status: 'confirmed',
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    id: 123,
+    direction: 'from-rollup',
+  },
+};
diff --git a/mocks/blobs/blobs.ts b/mocks/blobs/blobs.ts
new file mode 100644
index 0000000000..24d25b465f
--- /dev/null
+++ b/mocks/blobs/blobs.ts
@@ -0,0 +1,36 @@
+import type { Blob, TxBlobs } from 'types/api/blobs';
+
+export const base1: Blob = {
+  blob_data: '0x004242004242004242004242004242004242',
+  hash: '0x016316f61a259aa607096440fc3eeb90356e079be01975d2fb18347bd50df33c',
+  kzg_commitment: '0xa95caabd009e189b9f205e0328ff847ad886e4f8e719bd7219875fbb9688fb3fbe7704bb1dfa7e2993a3dea8d0cf767d',
+  kzg_proof: '0x89cf91c4c8be6f2a390d4262425f79dffb74c174fb15a210182184543bf7394e5a7970a774ee8e0dabc315424c22df0f',
+  transaction_hashes: [
+    { block_consensus: true, transaction_hash: '0x970d8c45c713a50a1fa351b00ca29a8890cac474c59cc8eee4eddec91a1729f0' },
+  ],
+};
+
+export const base2: Blob = {
+  blob_data: '0x89504E470D0A1A0A0000000D494844520000003C0000003C0403',
+  hash: '0x0197fdb17195c176b23160f335daabd4b6a231aaaadd73ec567877c66a3affd1',
+  kzg_commitment: '0x89b0d8ac715ee134135471994a161ef068a784f51982fcd7161aa8e3e818eb83017ccfbfc30c89b796a2743d77554e2f',
+  kzg_proof: '0x8255a6c6a236483814b8e68992e70f3523f546866a9fed6b8e0ecfef314c65634113b8aa02d6c5c6e91b46e140f17a07',
+  transaction_hashes: [
+    { block_consensus: true, transaction_hash: '0x22d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193' },
+  ],
+};
+
+export const withoutData: Blob = {
+  blob_data: null,
+  hash: '0x0197fdb17195c176b23160f335daabd4b6a231aaaadd73ec567877c66a3affd3',
+  kzg_commitment: null,
+  kzg_proof: null,
+  transaction_hashes: [
+    { block_consensus: true, transaction_hash: '0x22d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193' },
+  ],
+};
+
+export const txBlobs: TxBlobs = {
+  items: [ base1, base2, withoutData ],
+  next_page_params: null,
+};
diff --git a/mocks/blocks/block.ts b/mocks/blocks/block.ts
index c386d16916..e6402fca53 100644
--- a/mocks/blocks/block.ts
+++ b/mocks/blocks/block.ts
@@ -1,5 +1,12 @@
 /* eslint-disable max-len */
-import type { Block, BlocksResponse } from 'types/api/block';
+import type { RpcBlock } from 'viem';
+
+import type { Block, BlocksResponse, ZilliqaBlockData } from 'types/api/block';
+
+import { ZERO_ADDRESS } from 'lib/consts';
+
+import * as addressMock from '../address/address';
+import * as tokenMock from '../tokens/tokenInfo';
 
 export const base: Block = {
   base_fee_per_gas: '10000000000',
@@ -15,7 +22,7 @@ export const base: Block = {
   height: 30146364,
   miner: {
     hash: '0xdAd49e6CbDE849353ab27DeC6319E687BFc91A41',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: null,
     name: 'Alex Emelyanov',
@@ -45,8 +52,8 @@ export const base: Block = {
   state_root: 'TODO',
   timestamp: '2022-11-11T11:59:35Z',
   total_difficulty: '10258276095980170141167591583995189665817672619',
-  tx_count: 5,
-  tx_fees: '26853607500000000',
+  transaction_count: 5,
+  transaction_fees: '26853607500000000',
   type: 'block',
   uncles_hashes: [],
 };
@@ -65,7 +72,7 @@ export const genesis: Block = {
   height: 0,
   miner: {
     hash: '0x0000000000000000000000000000000000000000',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: null,
     name: null,
@@ -82,8 +89,8 @@ export const genesis: Block = {
   state_root: 'TODO',
   timestamp: '2017-12-16T00:13:24.000000Z',
   total_difficulty: '131072',
-  tx_count: 0,
-  tx_fees: '0',
+  transaction_count: 0,
+  transaction_fees: '0',
   type: 'block',
   uncles_hashes: [],
 };
@@ -94,7 +101,7 @@ export const base2: Block = {
   size: 592,
   miner: {
     hash: '0xDfE10D55d9248B2ED66f1647df0b0A46dEb25165',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: null,
     name: 'Kiryl Ihnatsyeu',
@@ -104,7 +111,7 @@ export const base2: Block = {
     ens_domain_name: null,
   },
   timestamp: '2022-11-11T11:46:05Z',
-  tx_count: 253,
+  transaction_count: 253,
   gas_target_percentage: 23.6433,
   gas_used: '6333342',
   gas_used_percentage: 87.859504,
@@ -135,6 +142,87 @@ export const rootstock: Block = {
   minimum_gas_price: '59240000',
 };
 
+export const celo: Block = {
+  ...base,
+  celo: {
+    base_fee: {
+      token: tokenMock.tokenInfoERC20a,
+      amount: '445690000000000',
+      breakdown: [
+        {
+          address: addressMock.withName,
+          amount: '356552000000000.0000000000000',
+          percentage: 80,
+        },
+        {
+          address: {
+            ...addressMock.withoutName,
+            hash: ZERO_ADDRESS,
+          },
+          amount: '89138000000000.0000000000000',
+          percentage: 20,
+        },
+      ],
+      recipient: addressMock.contract,
+    },
+    epoch_number: 1486,
+    is_epoch_block: true,
+  },
+};
+
+export const zilliqaWithAggregateQuorumCertificate: Block = {
+  ...base,
+  zilliqa: {
+    view: 1137735,
+    aggregate_quorum_certificate: {
+      signature: '0x82d29e8f06adc890f6574c3d0ae0c811de1db695b05ed2755ef384fe21bc44f6505b99e201f6000a65f38ff6a13e286306d0e380ef1b43a273eb9947b3f11f852e14b93c258c32b516f89696fcb1190b147364b789572ebdf85d79c4cf3cbbbb',
+      view: 1137735,
+      signers: [ 1, 2, 3, 8 ],
+      nested_quorum_certificates: [
+        {
+          signature: '0xaeb3567577f9db68565c6f97c158b17522620a9684c6f6beaa78920951ad4cae0f287b630bdd034c4a4f89ada42e3dbe012985e976a6f64057d735a4531a26b4e46c182414eabbe625e5b15e6645be5b6522bdec113df408874f6d1e0d894dca',
+          view: 1137732,
+          proposed_by_validator_index: 1,
+          signers: [ 3, 8 ],
+        },
+        {
+          signature: '0xaeb3567577f9db68565c6f97c158b17522620a9684c6f6beaa78920951ad4cae0f287b630bdd034c4a4f89ada42e3dbe012985e976a6f64057d735a4531a26b4e46c182414eabbe625e5b15e6645be5b6522bdec113df408874f6d1e0d894dca',
+          view: 1137732,
+          proposed_by_validator_index: 2,
+          signers: [ 0, 2 ],
+        },
+      ],
+    },
+    quorum_certificate: {
+      signature: '0xaeb3567577f9db68565c6f97c158b17522620a9684c6f6beaa78920951ad4cae0f287b630bdd034c4a4f89ada42e3dbe012985e976a6f64057d735a4531a26b4e46c182414eabbe625e5b15e6645be5b6522bdec113df408874f6d1e0d894dca',
+      view: 1137732,
+      signers: [ 0, 2, 3, 8 ],
+    },
+  },
+};
+
+export const zilliqaWithoutAggregateQuorumCertificate: Block = {
+  ...base,
+  zilliqa: {
+    ...zilliqaWithAggregateQuorumCertificate.zilliqa,
+    aggregate_quorum_certificate: null,
+  } as ZilliqaBlockData,
+};
+
+export const withBlobTxs: Block = {
+  ...base,
+  blob_gas_price: '21518435987',
+  blob_gas_used: '393216',
+  burnt_blob_fees: '8461393325064192',
+  excess_blob_gas: '79429632',
+  blob_tx_count: 1,
+};
+
+export const withWithdrawals: Block = {
+  ...base,
+  withdrawals_count: 2,
+};
+
 export const baseListResponse: BlocksResponse = {
   items: [
     base,
@@ -142,3 +230,107 @@ export const baseListResponse: BlocksResponse = {
   ],
   next_page_params: null,
 };
+
+export const rpcBlockBase: RpcBlock = {
+  difficulty: '0x37fcc04bef8',
+  extraData: '0x476574682f76312e302e312d38326566323666362f6c696e75782f676f312e34',
+  gasLimit: '0x2fefd8',
+  gasUsed: '0x0',
+  hash: '0xfbafb4b7b6f6789338d15ff046f40dc608a42b1a33b093e109c6d7a36cd76f61',
+  logsBloom: '0x0',
+  miner: '0xe6a7a1d47ff21b6321162aea7c6cb457d5476bca',
+  mixHash: '0x038956b9df89d0c1f980fd656d045e912beafa515cff7d7fd3c5f34ffdcb9e4b',
+  nonce: '0xd8d3392f340bbb22',
+  number: '0x1869f',
+  parentHash: '0x576fd45e598c9f86835f50fe2c6e6d11df2d4c4b01f19e4241b7e793d852f9e4',
+  receiptsRoot: '0x56e81f171bcc55a6ff8345e692c0f86e5b48e01b996cadc001622fb5e363b421',
+  sha3Uncles: '0x1dcc4de8dec75d7aab85b567b6ccd41ad312451b948a7413f0a142fd40d49347',
+  size: '0x225',
+  stateRoot: '0x32356228651d64cc5e6e7be87a556ecdbf40e876251dc867ba9e4bb82a0124a3',
+  timestamp: '0x55d19741',
+  totalDifficulty: '0x259e89748daae17',
+  transactions: [
+    '0x0e70849f10e22fe2e53fe6755f86a572aa6bb2fc472f0b87d9e561efa1fc2e1f',
+    '0xae5624c77f06d0164301380afa7780ebe49debe77eb3d5167004d69bd188a09f',
+  ],
+  transactionsRoot: '0x56e81f171bcc55a6ff8345e692c0f86e5b48e01b996cadc001622fb5e363b421',
+  uncles: [],
+  baseFeePerGas: null,
+  blobGasUsed: `0x0`,
+  excessBlobGas: `0x0`,
+  sealFields: [],
+  withdrawals: [
+    { address: '0xb9d7934878b5fb9610b3fe8a5e441e8fad7e293f', amount: '0x12128cd', index: '0x3216bbb', validatorIndex: '0x4dca3' },
+    { address: '0xb9d7934878b5fb9610b3fe8a5e441e8fad7e293f', amount: '0x12027dd', index: '0x3216bbc', validatorIndex: '0x4dca4' },
+  ],
+};
+
+export const rpcBlockWithTxsInfo: RpcBlock = {
+  ...rpcBlockBase,
+  transactions: [
+    {
+      accessList: [
+        {
+          address: '0x7af661a6463993e05a171f45d774cf37e761c83f',
+          storageKeys: [
+            '0x0000000000000000000000000000000000000000000000000000000000000007',
+            '0x000000000000000000000000000000000000000000000000000000000000000c',
+            '0x0000000000000000000000000000000000000000000000000000000000000008',
+            '0x0000000000000000000000000000000000000000000000000000000000000006',
+            '0x0000000000000000000000000000000000000000000000000000000000000009',
+            '0x000000000000000000000000000000000000000000000000000000000000000a',
+          ],
+        },
+        {
+          address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
+          storageKeys: [
+            '0x0d726f311404f8052d44e7004a6ffb747709a6d3666a62ce3f5aad13374680ab',
+            '0x1a824a6850dcbd9223afea4418727593881e2911ed2e734272a263153159fe26',
+            '0xfae3a383c82daf853bbd8bbcd21280410599b135c274c01354ea7d3a5e09f43c',
+          ],
+        },
+      ],
+      blockHash: '0xeb37ebc94e31773e5c5703073fd3911b2ab596f099d00d18b55ae3ac8203c1d5',
+      blockNumber: '0x136058d',
+      chainId: '0x1',
+      from: '0x111527f1386c6725a2f5986230f3060bdcac041f',
+      gas: '0xf4240',
+      gasPrice: '0x1780b2ff9',
+      hash: '0x0e70849f10e22fe2e53fe6755f86a572aa6bb2fc472f0b87d9e561efa1fc2e1f',
+      input: '0x258d7af661a6463993e05a171f45d774cf37e761c83f402ab3277301b3574863a151d042dc870fb1b3f0c72cbbdd53a85898f62415fe124406f6608d8802269d1283cdb2a5a329649e5cb4cdcee91ab6',
+      // maxFeePerGas: '0x3ac1bf7ee',
+      // maxPriorityFeePerGas: '0x0',
+      nonce: '0x127b2',
+      r: '0x3c47223f880a3fb7b1eca368d9d7320d2278f0b679109d9ed0af4080ee386f23',
+      s: '0x587a441f9472b312ff302d7132547aa250ea06c6203c76831d56a46ec188e664',
+      to: '0x000000d40b595b94918a28b27d1e2c66f43a51d3',
+      transactionIndex: '0x0',
+      type: '0x1',
+      v: '0x1',
+      value: '0x31',
+      yParity: '0x1',
+    },
+    {
+      accessList: [],
+      blockHash: '0xeb37ebc94e31773e5c5703073fd3911b2ab596f099d00d18b55ae3ac8203c1d5',
+      blockNumber: '0x136058d',
+      chainId: '0x1',
+      from: '0xe25d2cb47b606bb6fd9272125457a7230e26f956',
+      gas: '0x47bb0',
+      gasPrice: '0x1ba875cb6',
+      hash: '0xae5624c77f06d0164301380afa7780ebe49debe77eb3d5167004d69bd188a09f',
+      input: '0x3593564c000000000000000000000000000000000000000000000000000000000000006000000000000000000000000000000000000000000000000000000000000000a0000000000000000000000000000000000000000000000000000000006696237b00000000000000000000000000000000000000000000000000000000000000040b080604000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000000008000000000000000000000000000000000000000000000000000000000000000e0000000000000000000000000000000000000000000000000000000000000020000000000000000000000000000000000000000000000000000000000000002800000000000000000000000000000000000000000000000000000000000000040000000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000b1a2bc2ec500000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000b1a2bc2ec5000000000000000000000000000000000000000000000000000000006d1aaedfab0f00000000000000000000000000000000000000000000000000000000000000a000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000002000000000000000000000000c02aaa39b223fe8d0a0e5c4f27ead9083c756cc2000000000000000000000000d84d4e8e1e8f268e027c29fa4d48c4b7e4d422990000000000000000000000000000000000000000000000000000000000000060000000000000000000000000d84d4e8e1e8f268e027c29fa4d48c4b7e4d42299000000000000000000000000000000fee13a103a10d593b9ae06b3e05f2e7e1c00000000000000000000000000000000000000000000000000000000000000190000000000000000000000000000000000000000000000000000000000000060000000000000000000000000d84d4e8e1e8f268e027c29fa4d48c4b7e4d42299000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000006cd4db3c8c8d',
+      // maxFeePerGas: '0x23493c9cd',
+      // maxPriorityFeePerGas: '0x427c2cbd',
+      nonce: '0x32b',
+      r: '0x6566181b3cfd01702b24a2124ea7698b8cc815c7f37d1ea55800f176ca7a94cf',
+      s: '0x34f8dd837f37746ccd18f4fa71e05de98a2212f1c931f740598e491518616bb3',
+      to: '0x3fc91a3afd70395cd496c647d5a6cc9d4b2b7fad',
+      transactionIndex: '0x1',
+      type: '0x1',
+      v: '0x1',
+      value: '0xb1a2bc2ec50000',
+      yParity: '0x1',
+    },
+  ],
+};
diff --git a/mocks/blocks/epoch.ts b/mocks/blocks/epoch.ts
new file mode 100644
index 0000000000..58f614fbe6
--- /dev/null
+++ b/mocks/blocks/epoch.ts
@@ -0,0 +1,57 @@
+import _padStart from 'lodash/padStart';
+
+import type { BlockEpoch, BlockEpochElectionRewardDetails, BlockEpochElectionRewardDetailsResponse } from 'types/api/block';
+
+import * as addressMock from '../address/address';
+import * as tokenMock from '../tokens/tokenInfo';
+import * as tokenTransferMock from '../tokens/tokenTransfer';
+
+export const blockEpoch1: BlockEpoch = {
+  number: 1486,
+  distribution: {
+    carbon_offsetting_transfer: tokenTransferMock.erc20,
+    community_transfer: tokenTransferMock.erc20,
+    reserve_bolster_transfer: null,
+  },
+  aggregated_election_rewards: {
+    delegated_payment: {
+      count: 0,
+      total: '71210001063118670575',
+      token: tokenMock.tokenInfoERC20d,
+    },
+    group: {
+      count: 10,
+      total: '157705500305820107521',
+      token: tokenMock.tokenInfoERC20b,
+    },
+    validator: {
+      count: 10,
+      total: '1348139501689262297152',
+      token: tokenMock.tokenInfoERC20c,
+    },
+    voter: {
+      count: 38,
+      total: '2244419545166303388',
+      token: tokenMock.tokenInfoERC20a,
+    },
+  },
+};
+
+function getRewardDetailsItem(index: number): BlockEpochElectionRewardDetails {
+  return {
+    amount: `${ 100 - index }210001063118670575`,
+    account: {
+      ...addressMock.withoutName,
+      hash: `0x30D060F129817c4DE5fBc1366d53e19f43c8c6${ _padStart(String(index), 2, '0') }`,
+    },
+    associated_account: {
+      ...addressMock.withoutName,
+      hash: `0x456f41406B32c45D59E539e4BBA3D7898c3584${ _padStart(String(index), 2, '0') }`,
+    },
+  };
+}
+
+export const electionRewardDetails1: BlockEpochElectionRewardDetailsResponse = {
+  items: Array(15).fill('').map((item, index) => getRewardDetailsItem(index)),
+  next_page_params: null,
+};
diff --git a/mocks/config/network.ts b/mocks/config/network.ts
index a1c9075425..f5dbcf1157 100644
--- a/mocks/config/network.ts
+++ b/mocks/config/network.ts
@@ -1,6 +1,6 @@
 import type { FeaturedNetwork } from 'types/networks';
 
-const FEATURED_NETWORKS: Array<FeaturedNetwork> = [
+export const FEATURED_NETWORKS: Array<FeaturedNetwork> = [
   { title: 'Gnosis Chain', url: 'https://blockscout.com/xdai/mainnet', group: 'Mainnets', isActive: true },
   { title: 'Arbitrum on xDai', url: 'https://blockscout.com/xdai/aox', group: 'Mainnets' },
   { title: 'Ethereum', url: 'https://blockscout.com/eth/mainnet', group: 'Mainnets' },
@@ -13,5 +13,3 @@ const FEATURED_NETWORKS: Array<FeaturedNetwork> = [
   { title: 'LUKSO L14', url: 'https://blockscout.com/lukso/l14', group: 'Other' },
   { title: 'Astar', url: 'https://blockscout.com/astar', group: 'Other' },
 ];
-
-export const FEATURED_NETWORKS_MOCK = JSON.stringify(FEATURED_NETWORKS);
diff --git a/mocks/contract/audits.ts b/mocks/contract/audits.ts
new file mode 100644
index 0000000000..a2a6644229
--- /dev/null
+++ b/mocks/contract/audits.ts
@@ -0,0 +1,16 @@
+import type { SmartContractSecurityAudits } from 'types/api/contract';
+
+export const contractAudits: SmartContractSecurityAudits = {
+  items: [
+    {
+      audit_company_name: 'OpenZeppelin',
+      audit_publish_date: '2023-03-01',
+      audit_report_url: 'https://blog.openzeppelin.com/eip-4337-ethereum-account-abstraction-incremental-audit',
+    },
+    {
+      audit_company_name: 'OpenZeppelin',
+      audit_publish_date: '2023-03-01',
+      audit_report_url: 'https://blog.openzeppelin.com/eip-4337-ethereum-account-abstraction-incremental-audit',
+    },
+  ],
+};
diff --git a/mocks/contract/info.ts b/mocks/contract/info.ts
index c5e1a7e040..715a908931 100644
--- a/mocks/contract/info.ts
+++ b/mocks/contract/info.ts
@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import type { SmartContract } from 'types/api/contract';
 
-export const verified: Partial<SmartContract> = {
+export const verified: SmartContract = {
   abi: [ { anonymous: false, inputs: [ { indexed: true, internalType: 'address', name: 'src', type: 'address' }, { indexed: true, internalType: 'address', name: 'guy', type: 'address' }, { indexed: false, internalType: 'uint256', name: 'wad', type: 'uint256' } ], name: 'Approval', type: 'event' } ],
   can_be_visualized_via_sol2uml: true,
   compiler_version: 'v0.5.16+commit.9c3226ce',
@@ -16,6 +16,7 @@ export const verified: Partial<SmartContract> = {
   },
   evm_version: 'default',
   is_verified: true,
+  is_blueprint: false,
   name: 'WPOA',
   optimization_enabled: true,
   optimization_runs: 1500,
@@ -23,7 +24,7 @@ export const verified: Partial<SmartContract> = {
   verified_at: '2021-08-03T10:40:41.679421Z',
   decoded_constructor_args: [
     [ '0xc59615da2da226613b1c78f0c6676cac497910bc', { internalType: 'address', name: '_token', type: 'address' } ],
-    [ '1800', { internalType: 'uint256', name: '_duration', type: 'uint256' } ],
+    [ [ 1800, 3600, 7200 ], { internalType: 'uint256[]', name: '_durations', type: 'uint256[]' } ],
     [ '900000000', { internalType: 'uint256', name: '_totalSupply', type: 'uint256' } ],
   ],
   external_libraries: [
@@ -31,9 +32,26 @@ export const verified: Partial<SmartContract> = {
     { address_hash: '0xa62744BeE8646e237441CDbfdedD3458861748A8', name: 'math' },
   ],
   language: 'solidity',
+  license_type: 'gnu_gpl_v3',
+  is_self_destructed: false,
+  is_verified_via_eth_bytecode_db: null,
+  is_changed_bytecode: null,
+  is_verified_via_sourcify: null,
+  is_fully_verified: null,
+  is_partially_verified: null,
+  sourcify_repo_url: null,
+  file_path: '',
+  additional_sources: [],
+  verified_twin_address_hash: null,
+  proxy_type: null,
 };
 
-export const withMultiplePaths: Partial<SmartContract> = {
+export const certified: SmartContract = {
+  ...verified,
+  certified: true,
+};
+
+export const withMultiplePaths: SmartContract = {
   ...verified,
   file_path: './simple_storage.sol',
   additional_sources: [
@@ -44,7 +62,7 @@ export const withMultiplePaths: Partial<SmartContract> = {
   ],
 };
 
-export const verifiedViaSourcify: Partial<SmartContract> = {
+export const verifiedViaSourcify: SmartContract = {
   ...verified,
   is_verified_via_sourcify: true,
   is_fully_verified: false,
@@ -52,36 +70,83 @@ export const verifiedViaSourcify: Partial<SmartContract> = {
   sourcify_repo_url: 'https://repo.sourcify.dev/contracts//full_match/99/0x51891596E158b2857e5356DC847e2D15dFbCF2d0/',
 };
 
-export const verifiedViaEthBytecodeDb: Partial<SmartContract> = {
+export const verifiedViaEthBytecodeDb: SmartContract = {
   ...verified,
   is_verified_via_eth_bytecode_db: true,
 };
 
-export const withTwinAddress: Partial<SmartContract> = {
+export const withTwinAddress: SmartContract = {
   ...verified,
   is_verified: false,
   verified_twin_address_hash: '0xa62744bee8646e237441cdbfdedd3458861748a8',
 };
 
-export const withProxyAddress: Partial<SmartContract> = {
+export const withProxyAddress: SmartContract = {
   ...verified,
   is_verified: false,
   verified_twin_address_hash: '0xa62744bee8646e237441cdbfdedd3458861748a8',
-  minimal_proxy_address_hash: '0xa62744bee8646e237441cdbfdedd3458861748a8',
+  proxy_type: 'eip1967',
 };
 
-export const selfDestructed: Partial<SmartContract> = {
+export const selfDestructed: SmartContract = {
   ...verified,
   is_self_destructed: true,
 };
 
-export const withChangedByteCode: Partial<SmartContract> = {
+export const withChangedByteCode: SmartContract = {
   ...verified,
   is_changed_bytecode: true,
+  is_blueprint: true,
+};
+
+export const zkSync: SmartContract = {
+  ...verified,
+  zk_compiler_version: 'v1.2.5',
+  optimization_enabled: true,
+  optimization_runs: 's',
+};
+
+export const stylusRust: SmartContract = {
+  ...verified,
+  language: 'stylus_rust',
+  github_repository_metadata: {
+    commit: 'af5029f822815e32def0015bf8e591e769c62f34',
+    path_prefix: 'examples/erc20',
+    repository_url: 'https://github.com/blockscout/cargo-stylus-test-examples',
+  },
+  compiler_version: 'v0.5.6',
+  package_name: 'erc20',
+  evm_version: null,
 };
 
-export const nonVerified: Partial<SmartContract> = {
+export const nonVerified: SmartContract = {
   is_verified: false,
+  is_blueprint: false,
   creation_bytecode: 'creation_bytecode',
   deployed_bytecode: 'deployed_bytecode',
+  is_self_destructed: false,
+  abi: null,
+  compiler_version: null,
+  evm_version: null,
+  optimization_enabled: null,
+  optimization_runs: null,
+  name: null,
+  verified_at: null,
+  is_verified_via_eth_bytecode_db: null,
+  is_changed_bytecode: null,
+  is_verified_via_sourcify: null,
+  is_fully_verified: null,
+  is_partially_verified: null,
+  sourcify_repo_url: null,
+  source_code: null,
+  constructor_args: null,
+  decoded_constructor_args: null,
+  can_be_visualized_via_sol2uml: null,
+  file_path: '',
+  additional_sources: [],
+  external_libraries: null,
+  verified_twin_address_hash: null,
+  proxy_type: null,
+  language: null,
+  license_type: null,
 };
diff --git a/mocks/contract/methods.ts b/mocks/contract/methods.ts
index 745c19770a..5fa714921c 100644
--- a/mocks/contract/methods.ts
+++ b/mocks/contract/methods.ts
@@ -1,11 +1,6 @@
-import type {
-  SmartContractQueryMethodReadError,
-  SmartContractQueryMethodReadSuccess,
-  SmartContractReadMethod,
-  SmartContractWriteMethod,
-} from 'types/api/contract';
+import type { SmartContractMethodRead, SmartContractMethodWrite } from 'ui/address/contract/methods/types';
 
-export const read: Array<SmartContractReadMethod> = [
+export const read: Array<SmartContractMethodRead> = [
   {
     constant: true,
     inputs: [
@@ -26,94 +21,15 @@ export const read: Array<SmartContractReadMethod> = [
     method_id: '06fdde03',
     name: 'name',
     outputs: [
-      { internalType: 'string', name: '', type: 'string', value: 'Wrapped POA' },
+      { internalType: 'string', name: '', type: 'string' },
     ],
     payable: false,
     stateMutability: 'view',
     type: 'function',
   },
-  {
-    constant: true,
-    inputs: [],
-    method_id: '18160ddd',
-    name: 'totalSupply',
-    outputs: [
-      { internalType: 'uint256', name: '', type: 'uint256', value: '139905710421584994690047413' },
-    ],
-    payable: false,
-    stateMutability: 'view',
-    type: 'function',
-  },
-  {
-    constant: true,
-    error: '(-32015) VM execution error. (revert)',
-    inputs: [],
-    method_id: 'df0ad3de',
-    name: 'upgradeabilityAdmin',
-    outputs: [
-      { name: '', type: 'address', value: '' },
-    ],
-    payable: false,
-    stateMutability: 'view',
-    type: 'function',
-  },
-  {
-    constant: true,
-    inputs: [],
-    method_id: '165ec2e2',
-    name: 'arianeeWhitelist',
-    outputs: [
-      {
-        name: '',
-        type: 'address',
-        value: '0xd3eee7f8e8021db24825c3457d5479f2b57f40ef',
-      },
-    ],
-    payable: false,
-    stateMutability: 'view',
-    type: 'function',
-  },
-  {
-    inputs: [],
-    method_id: '69598efe',
-    name: 'totalPartitions',
-    constant: true,
-    payable: false,
-    outputs: [
-      {
-        type: 'bytes32[]',
-        name: 'bytes32[]',
-        value: [
-          '0x7265736572766564000000000000000000000000000000000000000000000000',
-          '0x6973737565640000000000000000000000000000000000000000000000000000',
-        ],
-      },
-    ],
-    stateMutability: 'view',
-    type: 'function',
-  },
 ];
 
-export const readResultSuccess: SmartContractQueryMethodReadSuccess = {
-  is_error: false,
-  result: {
-    names: [ 'amount' ],
-    output: [
-      { type: 'uint256', value: '42' },
-    ],
-  },
-};
-
-export const readResultError: SmartContractQueryMethodReadError = {
-  is_error: true,
-  result: {
-    message: 'Some shit happened',
-    code: -32017,
-    raw: '49276d20616c7761797320726576657274696e67207769746820616e206572726f72',
-  },
-};
-
-export const write: Array<SmartContractWriteMethod> = [
+export const write: Array<SmartContractMethodWrite> = [
   {
     payable: true,
     stateMutability: 'payable',
@@ -132,6 +48,7 @@ export const write: Array<SmartContractWriteMethod> = [
     payable: false,
     stateMutability: 'nonpayable',
     type: 'function',
+    method_id: '0x01',
   },
   {
     constant: false,
@@ -146,6 +63,7 @@ export const write: Array<SmartContractWriteMethod> = [
     payable: true,
     stateMutability: 'payable',
     type: 'function',
+    method_id: '0x02',
   },
   {
     stateMutability: 'payable',
@@ -159,6 +77,7 @@ export const write: Array<SmartContractWriteMethod> = [
     payable: false,
     stateMutability: 'nonpayable',
     type: 'function',
+    method_id: '0x03',
   },
   {
     constant: false,
@@ -173,6 +92,7 @@ export const write: Array<SmartContractWriteMethod> = [
     payable: false,
     stateMutability: 'nonpayable',
     type: 'function',
+    method_id: '0x04',
   },
   {
     constant: false,
@@ -190,6 +110,7 @@ export const write: Array<SmartContractWriteMethod> = [
     payable: false,
     stateMutability: 'nonpayable',
     type: 'function',
+    method_id: '0x05',
   },
   {
     constant: false,
@@ -208,5 +129,6 @@ export const write: Array<SmartContractWriteMethod> = [
     payable: false,
     stateMutability: 'nonpayable',
     type: 'function',
+    is_invalid: true,
   },
 ];
diff --git a/mocks/contract/solidityscanReport.ts b/mocks/contract/solidityscanReport.ts
index 000adabf7f..e3d83d590d 100644
--- a/mocks/contract/solidityscanReport.ts
+++ b/mocks/contract/solidityscanReport.ts
@@ -1,5 +1,8 @@
-export const solidityscanReportAverage = {
+import type { SolidityScanReport } from 'lib/solidityScan/schema';
+
+export const solidityscanReportAverage: SolidityScanReport = {
   scan_report: {
+    contractname: 'foo',
     scan_status: 'scan_done',
     scan_summary: {
       issue_severity_distribution: {
@@ -10,18 +13,15 @@ export const solidityscanReportAverage = {
         low: 2,
         medium: 0,
       },
-      lines_analyzed_count: 18,
-      scan_time_taken: 1,
-      score: '3.61',
       score_v2: '72.22',
-      threat_score: '94.74',
     },
     scanner_reference_url: 'https://solidityscan.com/quickscan/0xc1EF7811FF2ebFB74F80ed7423f2AdAA37454be2/blockscout/eth-goerli?ref=blockscout',
   },
 };
 
-export const solidityscanReportGreat = {
+export const solidityscanReportGreat: SolidityScanReport = {
   scan_report: {
+    contractname: 'foo',
     scan_status: 'scan_done',
     scan_summary: {
       issue_severity_distribution: {
@@ -32,18 +32,15 @@ export const solidityscanReportGreat = {
         low: 0,
         medium: 0,
       },
-      lines_analyzed_count: 18,
-      scan_time_taken: 1,
-      score: '3.61',
       score_v2: '100',
-      threat_score: '94.74',
     },
     scanner_reference_url: 'https://solidityscan.com/quickscan/0xc1EF7811FF2ebFB74F80ed7423f2AdAA37454be2/blockscout/eth-goerli?ref=blockscout',
   },
 };
 
-export const solidityscanReportLow = {
+export const solidityscanReportLow: SolidityScanReport = {
   scan_report: {
+    contractname: 'foo',
     scan_status: 'scan_done',
     scan_summary: {
       issue_severity_distribution: {
@@ -54,11 +51,7 @@ export const solidityscanReportLow = {
         low: 2,
         medium: 10,
       },
-      lines_analyzed_count: 18,
-      scan_time_taken: 1,
-      score: '3.61',
       score_v2: '22.22',
-      threat_score: '94.74',
     },
     scanner_reference_url: 'https://solidityscan.com/quickscan/0xc1EF7811FF2ebFB74F80ed7423f2AdAA37454be2/blockscout/eth-goerli?ref=blockscout',
   },
diff --git a/mocks/contracts/index.ts b/mocks/contracts/index.ts
index 6db06926ba..06d6bfe580 100644
--- a/mocks/contracts/index.ts
+++ b/mocks/contracts/index.ts
@@ -3,7 +3,7 @@ import type { VerifiedContract, VerifiedContractsResponse } from 'types/api/cont
 export const contract1: VerifiedContract = {
   address: {
     hash: '0xef490030ac0d53B70E304b6Bc5bF657dc6780bEB',
-    implementation_name: null,
+    implementations: null,
     is_contract: true,
     is_verified: null,
     name: 'MockERC20',
@@ -18,14 +18,15 @@ export const contract1: VerifiedContract = {
   language: 'solidity',
   market_cap: null,
   optimization_enabled: false,
-  tx_count: 7334224,
+  transaction_count: 7334224,
   verified_at: '2022-09-16T18:49:29.605179Z',
+  license_type: 'mit',
 };
 
 export const contract2: VerifiedContract = {
   address: {
     hash: '0xB2218bdEbe8e90f80D04286772B0968ead666942',
-    implementation_name: null,
+    implementations: null,
     is_contract: true,
     is_verified: null,
     name: 'EternalStorageProxyWithSomeExternalLibrariesAndEvenMore',
@@ -34,20 +35,48 @@ export const contract2: VerifiedContract = {
     watchlist_names: [],
     ens_domain_name: null,
   },
+  certified: true,
   coin_balance: '9078234570352343999',
   compiler_version: 'v0.3.1+commit.0463ea4c',
   has_constructor_args: true,
   language: 'vyper',
   market_cap: null,
   optimization_enabled: true,
-  tx_count: 440,
+  transaction_count: 440,
   verified_at: '2021-09-07T20:01:56.076979Z',
+  license_type: 'bsd_3_clause',
+};
+
+export const contract3: VerifiedContract = {
+  address: {
+    ens_domain_name: null,
+    hash: '0xf145e3A26c6706F64d95Dc8d9d45022D8b3D676B',
+    implementations: [],
+    is_contract: true,
+    is_verified: true,
+    metadata: null,
+    name: 'StylusTestToken',
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+  },
+  certified: false,
+  coin_balance: '0',
+  compiler_version: 'v0.5.6',
+  has_constructor_args: false,
+  language: 'stylus_rust',
+  license_type: 'none',
+  market_cap: null,
+  optimization_enabled: false,
+  transaction_count: 0,
+  verified_at: '2024-12-03T14:05:42.796224Z',
 };
 
 export const baseResponse: VerifiedContractsResponse = {
   items: [
     contract1,
     contract2,
+    contract3,
   ],
   next_page_params: {
     items_count: '50',
diff --git a/mocks/ens/domain.ts b/mocks/ens/domain.ts
index 3126aaecf5..6cf446b833 100644
--- a/mocks/ens/domain.ts
+++ b/mocks/ens/domain.ts
@@ -1,17 +1,45 @@
-import type { EnsDomainDetailed } from 'types/api/ens';
+import * as bens from '@blockscout/bens-types';
 
-const domainTokenA = {
+const domainTokenA: bens.Token = {
   id: '97352314626701792030827861137068748433918254309635329404916858191911576754327',
   contract_hash: '0x57f1887a8bf19b14fc0df6fd9b2acc9af147ea85',
-  type: 'NATIVE_DOMAIN_TOKEN' as const,
+  type: bens.TokenType.NATIVE_DOMAIN_TOKEN,
 };
 const domainTokenB = {
   id: '423546333',
   contract_hash: '0x57f1887a8bf19b14fc0df6fd9b2acc9af147ea86',
-  type: 'WRAPPED_DOMAIN_TOKEN' as const,
+  type: bens.TokenType.WRAPPED_DOMAIN_TOKEN,
 };
 
-export const ensDomainA: EnsDomainDetailed = {
+export const protocolA: bens.ProtocolInfo = {
+  id: 'ens',
+  short_name: 'ENS',
+  title: 'Ethereum Name Service',
+  description: 'The Ethereum Name Service (ENS) is a distributed, open, and extensible naming system based on the Ethereum blockchain.',
+  tld_list: [
+    'eth',
+    'xyz',
+  ],
+  icon_url: 'https://i.imgur.com/GOfUwCb.jpeg',
+  docs_url: 'https://docs.ens.domains/',
+  deployment_blockscout_base_url: 'http://localhost:3200/',
+};
+
+export const protocolB: bens.ProtocolInfo = {
+  id: 'duck',
+  short_name: 'DUCK',
+  title: 'Duck Name Service',
+  description: '"Duck Name Service" is a cutting-edge blockchain naming service, providing seamless naming for crypto and decentralized applications. 🦆',
+  tld_list: [
+    'duck',
+    'quack',
+  ],
+  icon_url: 'https://localhost:3000/duck.jpg',
+  docs_url: 'https://docs.duck.domains/',
+  deployment_blockscout_base_url: '',
+};
+
+export const ensDomainA: bens.DetailedDomain = {
   id: '0xb140bf9645e54f02ed3c1bcc225566b515a98d1688f10494a5c3bc5b447936a7',
   tokens: [
     domainTokenA,
@@ -27,7 +55,6 @@ export const ensDomainA: EnsDomainDetailed = {
   owner: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
-  wrapped_owner: null,
   registration_date: '2021-06-27T13:34:44.000Z',
   expiry_date: '2025-03-01T14:20:24.000Z',
   other_addresses: {
@@ -35,26 +62,38 @@ export const ensDomainA: EnsDomainDetailed = {
     GNO: 'DDAfbb505ad214D7b80b1f830fcCc89B60fb7A83',
     NEAR: 'a0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.factory.bridge.near',
   },
+  protocol: protocolA,
+  resolver_address: {
+    hash: '0xD578780f1dA7404d9CC0eEbC9D684c140CC4b638',
+  },
+  resolved_with_wildcard: true,
+  stored_offchain: true,
+  wrapped_owner: {
+    hash: '0xD4416b13d2b3a9aBae7AcD5D6C2BbDBE25686401',
+  },
 };
 
-export const ensDomainB: EnsDomainDetailed = {
+export const ensDomainB: bens.DetailedDomain = {
   id: '0x632ac7bec8e883416b371b36beaa822f4784208c99d063ee030020e2bd09b885',
   tokens: [ domainTokenA ],
   name: 'kitty.kitty.kitty.cat.eth',
-  resolved_address: null,
+  resolved_address: undefined,
   registrant: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
   owner: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
-  wrapped_owner: null,
+  wrapped_owner: undefined,
   registration_date: '2023-08-13T13:01:12.000Z',
-  expiry_date: null,
+  expiry_date: undefined,
   other_addresses: {},
+  protocol: undefined,
+  resolved_with_wildcard: false,
+  stored_offchain: false,
 };
 
-export const ensDomainC: EnsDomainDetailed = {
+export const ensDomainC: bens.DetailedDomain = {
   id: '0xdb7f351de6d93bda077a9211bdc49f249326d87932e4787d109b0262e9d189ad',
   tokens: [ domainTokenA ],
   name: 'duck.duck.eth',
@@ -67,13 +106,16 @@ export const ensDomainC: EnsDomainDetailed = {
   owner: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
-  wrapped_owner: null,
+  wrapped_owner: undefined,
   registration_date: '2022-04-24T07:34:44.000Z',
   expiry_date: '2022-11-01T13:10:36.000Z',
   other_addresses: {},
+  protocol: undefined,
+  resolved_with_wildcard: false,
+  stored_offchain: false,
 };
 
-export const ensDomainD: EnsDomainDetailed = {
+export const ensDomainD: bens.DetailedDomain = {
   id: '0xdb7f351de6d93bda077a9211bdc49f249326d87932e4787d109b0262e9d189ae',
   tokens: [ domainTokenA ],
   name: '🦆.duck.eth',
@@ -83,9 +125,12 @@ export const ensDomainD: EnsDomainDetailed = {
   resolved_address: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
-  owner: null,
-  wrapped_owner: null,
+  owner: undefined,
+  wrapped_owner: undefined,
   registration_date: '2022-04-24T07:34:44.000Z',
   expiry_date: '2027-09-23T13:10:36.000Z',
   other_addresses: {},
+  protocol: undefined,
+  resolved_with_wildcard: false,
+  stored_offchain: false,
 };
diff --git a/mocks/ens/events.ts b/mocks/ens/events.ts
index 2d60cc721a..d13fbcbe9a 100644
--- a/mocks/ens/events.ts
+++ b/mocks/ens/events.ts
@@ -1,6 +1,6 @@
-import type { EnsDomainEvent } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
-export const ensDomainEventA: EnsDomainEvent = {
+export const ensDomainEventA: bens.DomainEvent = {
   transaction_hash: '0x86c66b9fad66e4f20d42a6eed4fe12a0f48a274786fd85e9d4aa6c60e84b5874',
   timestamp: '2021-06-27T13:34:44.000000Z',
   from_address: {
@@ -9,7 +9,7 @@ export const ensDomainEventA: EnsDomainEvent = {
   action: '0xf7a16963',
 };
 
-export const ensDomainEventB = {
+export const ensDomainEventB: bens.DomainEvent = {
   transaction_hash: '0x150bf7d5cd42457dd9c799ddd9d4bf6c30c703e1954a88c6d4b668b23fe0fbf8',
   timestamp: '2022-11-02T14:20:24.000000Z',
   from_address: {
diff --git a/mocks/l2deposits/deposits.ts b/mocks/l2deposits/deposits.ts
deleted file mode 100644
index b94c2dc657..0000000000
--- a/mocks/l2deposits/deposits.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-export const data = {
-  items: [
-    {
-      l1_block_number: 8382841,
-      l1_block_timestamp: '2022-05-27T01:13:48.000000Z',
-      l1_tx_hash: '0xaf3e5f4ef03eac22a622b3434c5dc9f4465aa291900a86bcf0ad9fb14429f05e',
-      l1_tx_origin: '0x6197d1eef304eb5284a0f6720f79403b4e9bf3a5',
-      l2_tx_gas_limit: '2156928',
-      l2_tx_hash: '0xb9212c76069b926917816767e4c5a0ef80e519b1ac1c3d3fb5818078f4984667',
-    },
-    {
-      l1_block_number: 8382841,
-      l1_block_timestamp: '2022-05-27T01:13:48.000000Z',
-      l1_tx_hash: '0xa280f18cc72f9ad904087eb262c236048e935ad184a85bbd042d544c172c10bf',
-      l1_tx_origin: '0x6197d1eef304eb5284a0f6720f79403b4e9bf3a5',
-      l2_tx_gas_limit: '1216064',
-      l2_tx_hash: '0xaaaeb47a78b5c42d870f8d831a683a7cefe1b031a992170b28b43b82bd08318c',
-    },
-    {
-      l1_block_number: 8382834,
-      l1_block_timestamp: '2022-06-27T01:11:48.000000Z',
-      l1_tx_hash: '0xfca8cc5440bffa8b975873c02bba3ff3380dd75fbc3260d10179e282cf72d6d4',
-      l1_tx_origin: '0x6197d1eef304eb5284a0f6720f79403b4e9bf3a5',
-      l2_tx_gas_limit: '405824',
-      l2_tx_hash: '0xa0604ebf2614ad708aeefa83f766fb25928dadb5ffb2f45028f5b4f1fa4d9358',
-    },
-  ],
-  next_page_params: {
-    items_count: 50,
-    l1_block_number: 8382363,
-    tx_hash: '0x2012f0ce966ce6573e7826e9235f227edf5a2f8382b8d646c979f85a77e15c05',
-  },
-};
diff --git a/mocks/l2outputRoots/outputRoots.ts b/mocks/l2outputRoots/outputRoots.ts
deleted file mode 100644
index 9f21572297..0000000000
--- a/mocks/l2outputRoots/outputRoots.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-export const outputRootsData = {
-  items: [
-    {
-      l1_block_number: 8456113,
-      l1_timestamp: '2022-02-08T12:08:48.000000Z',
-      l1_tx_hash: '0x19455a53758d5de89070164ff09c40d93f1b4447e721090f03aa150f6159265a',
-      l2_block_number: 5214988,
-      l2_output_index: 9926,
-      output_root: '0xa7de9bd3986ce5ca8de9f0ab6c7473f4cebe225fb13b57cc5c8472de84a8bab3',
-    },
-    {
-      l1_block_number: 8456099,
-      l1_timestamp: '2022-02-08T12:05:24.000000Z',
-      l1_tx_hash: '0x6aa081e8e33a085e4ec7124fcd8a5f7d36aac0828f176e80d4b70e313a11695b',
-      l2_block_number: 5214868,
-      l2_output_index: 9925,
-      output_root: '0x4ec2822d2f7b4f834d693d88f8a4cf15899882915980a21756d29cfd9f9f3898',
-    },
-    {
-      l1_block_number: 8456078,
-      l1_timestamp: '2022-02-08T12:00:48.000000Z',
-      l1_tx_hash: '0x4238988b0959e41a7b09cef67f58698e05e3bcc29b8d2f60e6c77dc68c91f16e',
-      l2_block_number: 5214748,
-      l2_output_index: 9924,
-      output_root: '0x78b2e13c20f4bbfb4a008127edaaf25aa476f933669edd4856305bf4ab64a92b',
-    },
-  ],
-  next_page_params: {
-    index: 9877,
-    items_count: 50,
-  },
-};
diff --git a/mocks/l2txnBatches/txnBatches.ts b/mocks/l2txnBatches/txnBatches.ts
deleted file mode 100644
index 4459c2b57f..0000000000
--- a/mocks/l2txnBatches/txnBatches.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-export const txnBatchesData = {
-  items: [
-    {
-      epoch_number: 8547349,
-      l1_tx_hashes: [
-        '0x5bc94d02b65743dfaa9e10a2d6e175aff2a05cce2128c8eaf848bd84ab9325c5',
-        '0x92a51bc623111dbb91f243e3452e60fab6f090710357f9d9b75ac8a0f67dfd9d',
-      ],
-      l1_timestamp: '2023-02-24T10:16:12.000000Z',
-      l2_block_number: 5902836,
-      tx_count: 0,
-    },
-    {
-      epoch_number: 8547348,
-      l1_tx_hashes: [
-        '0xc45f846ee28ce9ba116ce2d378d3dd00b55d324b833b3ecd4241c919c572c4aa',
-      ],
-      l1_timestamp: '2023-02-24T10:16:00.000000Z',
-      l2_block_number: 5902835,
-      tx_count: 0,
-    },
-    {
-      epoch_number: 8547348,
-      l1_tx_hashes: [
-        '0x48139721f792d3a68c3781b4cf50e66e8fc7dbb38adff778e09066ea5be9adb8',
-      ],
-      l1_timestamp: '2023-02-24T10:16:00.000000Z',
-      l2_block_number: 5902834,
-      tx_count: 0,
-    },
-  ],
-  next_page_params: {
-    block_number: 5902834,
-    items_count: 50,
-  },
-};
diff --git a/mocks/l2withdrawals/withdrawals.ts b/mocks/l2withdrawals/withdrawals.ts
deleted file mode 100644
index 0e0d69a22f..0000000000
--- a/mocks/l2withdrawals/withdrawals.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-export const data = {
-  items: [
-    {
-      challenge_period_end: null,
-      from: {
-        hash: '0x67aab90c548b284be30b05c376001b4db90b87ba',
-        implementation_name: null,
-        is_contract: false,
-        is_verified: false,
-        name: null,
-        private_tags: [],
-        public_tags: [],
-        watchlist_names: [],
-      },
-      l1_tx_hash: '0x1a235bee32ac10cb7efdad98415737484ca66386e491cde9e17d42b136dca684',
-      l2_timestamp: '2022-02-15T12:50:02.000000Z',
-      l2_tx_hash: '0x918cd8c5c24c17e06cd02b0379510c4ad56324bf153578fb9caaaa2fe4e7dc35',
-      msg_nonce: 396,
-      msg_nonce_raw: '1766847064778384329583297500742918515827483896875618958121606201292620172',
-      msg_nonce_version: 1,
-      status: 'Ready to prove',
-    },
-    {
-      challenge_period_end: null,
-      from: null,
-      l1_tx_hash: null,
-      l2_timestamp: null,
-      l2_tx_hash: '0x2f117bee32ac10cb7efdad98415737484ca66386e491cde9e17d42b136def593',
-      msg_nonce: 391,
-      msg_nonce_raw: '1766847064778384329583297500742918515827483896875618958121606201292620167',
-      msg_nonce_version: 1,
-      status: 'Ready to prove',
-    },
-    {
-      challenge_period_end: '2022-11-11T12:50:02.000000Z',
-      from: null,
-      l1_tx_hash: null,
-      l2_timestamp: null,
-      l2_tx_hash: '0xe14b1f46838176702244a5343629bcecf728ca2d9881d47b4ce46e00c387d7e3',
-      msg_nonce: 390,
-      msg_nonce_raw: '1766847064778384329583297500742918515827483896875618958121606201292620166',
-      msg_nonce_version: 1,
-      status: 'Ready for relay',
-    },
-  ],
-  next_page_params: {
-    items_count: 50,
-    nonce: '1766847064778384329583297500742918515827483896875618958121606201292620123',
-  },
-};
diff --git a/mocks/metadata/address.ts b/mocks/metadata/address.ts
new file mode 100644
index 0000000000..186711cc04
--- /dev/null
+++ b/mocks/metadata/address.ts
@@ -0,0 +1,115 @@
+/* eslint-disable max-len */
+import type { AddressMetadataTagApi } from 'types/api/addressMetadata';
+
+export const nameTag: AddressMetadataTagApi = {
+  slug: 'quack-quack',
+  name: 'Quack quack',
+  tagType: 'name',
+  ordinal: 99,
+  meta: null,
+};
+
+export const customNameTag: AddressMetadataTagApi = {
+  slug: 'unicorn-uproar',
+  name: 'Unicorn Uproar',
+  tagType: 'name',
+  ordinal: 777,
+  meta: {
+    tagUrl: 'https://example.com',
+    bgColor: 'linear-gradient(45deg, deeppink, deepskyblue)',
+    textColor: '#FFFFFF',
+  },
+};
+
+export const genericTag: AddressMetadataTagApi = {
+  slug: 'duck-owner',
+  name: 'duck owner 🦆',
+  tagType: 'generic',
+  ordinal: 55,
+  meta: {
+    bgColor: 'rgba(255,243,12,90%)',
+  },
+};
+
+export const infoTagWithLink: AddressMetadataTagApi = {
+  slug: 'goosegang',
+  name: 'GooseGanG GooseGanG GooseGanG GooseGanG GooseGanG GooseGanG GooseGanG',
+  tagType: 'classifier',
+  ordinal: 11,
+  meta: {
+    tagUrl: 'https://example.com',
+  },
+};
+
+export const tagWithTooltip: AddressMetadataTagApi = {
+  slug: 'blockscout-heroes',
+  name: 'BlockscoutHeroes',
+  tagType: 'classifier',
+  ordinal: 42,
+  meta: {
+    tooltipDescription: 'The Blockscout team, EVM blockchain aficionados, illuminate Ethereum networks with unparalleled insight and prowess, leading the way in blockchain exploration! 🚀🔎',
+    tooltipIcon: 'https://localhost:3100/icon.svg',
+    tooltipTitle: 'Blockscout team member',
+    tooltipUrl: 'https://blockscout.com',
+  },
+};
+
+export const protocolTag: AddressMetadataTagApi = {
+  slug: 'aerodrome',
+  name: 'Aerodrome',
+  tagType: 'protocol',
+  ordinal: 0,
+  meta: null,
+};
+
+export const protocolTagWithMeta: AddressMetadataTagApi = {
+  slug: 'uniswap',
+  name: 'Uniswap',
+  tagType: 'protocol',
+  ordinal: 0,
+  meta: {
+    appID: 'uniswap',
+    appMarketplaceURL: 'https://example.com',
+    appLogoURL: 'https://localhost:3100/icon.svg',
+    appActionButtonText: 'Swap',
+    textColor: '#FFFFFF',
+    bgColor: '#FF007A',
+  },
+};
+
+export const warpcastTag: AddressMetadataTagApi = {
+  slug: 'warpcast-account',
+  name: 'Farcaster',
+  tagType: 'protocol',
+  ordinal: 0,
+  meta: {
+    bgColor: '#8465CB',
+    tagIcon: 'data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2032%2029%22%3E%3Cpath%20d%3D%22M%205.507%200.072%20L%2026.097%200.072%20L%2026.097%204.167%20L%2031.952%204.167%20L%2030.725%208.263%20L%2029.686%208.263%20L%2029.686%2024.833%20C%2030.207%2024.833%2030.63%2025.249%2030.63%2025.763%20L%2030.63%2026.88%20L%2030.819%2026.88%20C%2031.341%2026.88%2031.764%2027.297%2031.764%2027.811%20L%2031.764%2028.928%20L%2021.185%2028.928%20L%2021.185%2027.811%20C%2021.185%2027.297%2021.608%2026.88%2022.13%2026.88%20L%2022.319%2026.88%20L%2022.319%2025.763%20C%2022.319%2025.316%2022.639%2024.943%2023.065%2024.853%20L%2023.045%2015.71%20C%2022.711%2012.057%2019.596%209.194%2015.802%209.194%20C%2012.008%209.194%208.893%2012.057%208.559%2015.71%20L%208.539%2024.845%20C%209.043%2024.919%209.663%2025.302%209.663%2025.763%20L%209.663%2026.88%20L%209.852%2026.88%20C%2010.373%2026.88%2010.796%2027.297%2010.796%2027.811%20L%2010.796%2028.928%20L%200.218%2028.928%20L%200.218%2027.811%20C%200.218%2027.297%200.641%2026.88%201.162%2026.88%20L%201.351%2026.88%20L%201.351%2025.763%20C%201.351%2025.249%201.774%2024.833%202.296%2024.833%20L%202.296%208.263%20L%201.257%208.263%20L%200.029%204.167%20L%205.507%204.167%20L%205.507%200.072%20Z%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%2026.097%200.072%20L%2026.166%200.072%20L%2026.166%200.004%20L%2026.097%200.004%20Z%20M%205.507%200.072%20L%205.507%200.004%20L%205.438%200.004%20L%205.438%200.072%20Z%20M%2026.097%204.167%20L%2026.028%204.167%20L%2026.028%204.235%20L%2026.097%204.235%20Z%20M%2031.952%204.167%20L%2032.019%204.187%20L%2032.045%204.099%20L%2031.952%204.099%20L%2031.952%204.167%20Z%20M%2030.725%208.263%20L%2030.725%208.331%20L%2030.776%208.331%20L%2030.791%208.282%20Z%20M%2029.686%208.263%20L%2029.686%208.195%20L%2029.617%208.195%20L%2029.617%208.263%20Z%20M%2029.686%2024.833%20L%2029.617%2024.833%20L%2029.617%2024.901%20L%2029.686%2024.901%20Z%20M%2030.63%2026.88%20L%2030.561%2026.88%20L%2030.561%2026.948%20L%2030.63%2026.948%20Z%20M%2031.764%2028.928%20L%2031.764%2028.996%20L%2031.832%2028.996%20L%2031.832%2028.928%20Z%20M%2021.185%2028.928%20L%2021.116%2028.928%20L%2021.116%2028.996%20L%2021.185%2028.996%20Z%20M%2022.319%2026.88%20L%2022.319%2026.948%20L%2022.388%2026.948%20L%2022.388%2026.88%20Z%20M%2023.065%2024.853%20L%2023.08%2024.919%20L%2023.134%2024.908%20L%2023.134%2024.853%20Z%20M%2023.045%2015.71%20L%2023.114%2015.71%20L%2023.114%2015.707%20L%2023.113%2015.704%20Z%20M%208.559%2015.71%20L%208.49%2015.704%20L%208.49%2015.707%20L%208.49%2015.71%20Z%20M%208.539%2024.845%20L%208.47%2024.845%20L%208.469%2024.904%20L%208.528%2024.913%20Z%20M%209.663%2026.88%20L%209.594%2026.88%20L%209.594%2026.948%20L%209.663%2026.948%20Z%20M%2010.796%2028.928%20L%2010.796%2028.996%20L%2010.865%2028.996%20L%2010.865%2028.928%20Z%20M%200.218%2028.928%20L%200.149%2028.928%20L%200.149%2028.996%20L%200.218%2028.996%20Z%20M%201.351%2026.88%20L%201.351%2026.948%20L%201.42%2026.948%20L%201.42%2026.88%20Z%20M%202.296%2024.833%20L%202.296%2024.901%20L%202.365%2024.901%20L%202.365%2024.833%20Z%20M%202.296%208.263%20L%202.365%208.263%20L%202.365%208.195%20L%202.296%208.195%20Z%20M%201.257%208.263%20L%201.191%208.282%20L%201.205%208.331%20L%201.257%208.331%20Z%20M%200.029%204.167%20L%200.029%204.1%20L%20-0.063%204.1%20L%20-0.037%204.187%20L%200.029%204.167%20Z%20M%205.507%204.167%20L%205.507%204.235%20L%205.576%204.235%20L%205.576%204.167%20Z%20M%2026.097%200.004%20L%205.507%200.004%20L%205.507%200.139%20L%2026.097%200.139%20Z%20M%2026.166%204.167%20L%2026.166%200.072%20L%2026.028%200.072%20L%2026.028%204.167%20L%2026.166%204.167%20Z%20M%2031.952%204.099%20L%2026.097%204.099%20L%2026.097%204.235%20L%2031.952%204.235%20Z%20M%2030.791%208.282%20L%2032.019%204.187%20L%2031.886%204.148%20L%2030.658%208.244%20Z%20M%2029.686%208.331%20L%2030.725%208.331%20L%2030.725%208.195%20L%2029.686%208.195%20Z%20M%2029.755%2024.833%20L%2029.755%208.263%20L%2029.617%208.263%20L%2029.617%2024.833%20Z%20M%2030.699%2025.763%20C%2030.699%2025.212%2030.245%2024.765%2029.686%2024.765%20L%2029.686%2024.9%20C%2030.169%2024.9%2030.561%2025.287%2030.561%2025.763%20Z%20M%2030.699%2026.88%20L%2030.699%2025.763%20L%2030.561%2025.763%20L%2030.561%2026.88%20Z%20M%2030.819%2026.813%20L%2030.63%2026.813%20L%2030.63%2026.948%20L%2030.819%2026.948%20Z%20M%2031.832%2027.811%20C%2031.832%2027.26%2031.379%2026.813%2030.819%2026.813%20L%2030.819%2026.948%20C%2031.303%2026.948%2031.695%2027.335%2031.695%2027.811%20Z%20M%2031.832%2028.928%20L%2031.832%2027.811%20L%2031.695%2027.811%20L%2031.695%2028.928%20Z%20M%2026.097%2028.996%20L%2031.764%2028.996%20L%2031.764%2028.86%20L%2026.097%2028.86%20Z%20M%2023.074%2028.996%20L%2026.097%2028.996%20L%2026.097%2028.86%20L%2023.074%2028.86%20Z%20M%2021.185%2028.996%20L%2023.074%2028.996%20L%2023.074%2028.86%20L%2021.185%2028.86%20Z%20M%2021.116%2027.811%20L%2021.116%2028.928%20L%2021.254%2028.928%20L%2021.254%2027.811%20Z%20M%2022.13%2026.813%20C%2021.57%2026.813%2021.116%2027.26%2021.116%2027.811%20L%2021.254%2027.811%20C%2021.254%2027.335%2021.646%2026.948%2022.13%2026.948%20Z%20M%2022.319%2026.813%20L%2022.13%2026.813%20L%2022.13%2026.948%20L%2022.319%2026.948%20Z%20M%2022.25%2025.763%20L%2022.25%2026.88%20L%2022.388%2026.88%20L%2022.388%2025.763%20Z%20M%2023.051%2024.787%20C%2022.593%2024.883%2022.25%2025.284%2022.25%2025.763%20L%2022.388%2025.763%20C%2022.388%2025.349%2022.684%2025.003%2023.08%2024.919%20Z%20M%2022.976%2015.71%20L%2022.996%2024.853%20L%2023.134%2024.853%20L%2023.114%2015.71%20Z%20M%2015.802%209.262%20C%2019.559%209.262%2022.645%2012.098%2022.976%2015.716%20L%2023.113%2015.704%20C%2022.776%2012.016%2019.632%209.126%2015.802%209.126%20Z%20M%208.628%2015.716%20C%208.959%2012.098%2012.044%209.262%2015.802%209.262%20L%2015.802%209.126%20C%2011.972%209.126%208.828%2012.016%208.49%2015.704%20Z%20M%208.608%2024.845%20L%208.628%2015.71%20L%208.49%2015.71%20L%208.47%2024.845%20Z%20M%209.732%2025.763%20C%209.732%2025.502%209.557%2025.273%209.331%2025.105%20C%209.104%2024.935%208.812%2024.817%208.549%2024.778%20L%208.528%2024.912%20C%208.769%2024.948%209.039%2025.057%209.248%2025.213%20C%209.459%2025.37%209.594%2025.563%209.594%2025.763%20Z%20M%209.732%2026.88%20L%209.732%2025.763%20L%209.594%2025.763%20L%209.594%2026.88%20Z%20M%209.852%2026.813%20L%209.663%2026.813%20L%209.663%2026.948%20L%209.852%2026.948%20Z%20M%2010.865%2027.811%20C%2010.865%2027.26%2010.411%2026.813%209.852%2026.813%20L%209.852%2026.948%20C%2010.335%2026.948%2010.727%2027.335%2010.727%2027.811%20Z%20M%2010.865%2028.928%20L%2010.865%2027.811%20L%2010.727%2027.811%20L%2010.727%2028.928%20Z%20M%208.529%2028.996%20L%2010.796%2028.996%20L%2010.796%2028.86%20L%208.529%2028.86%20Z%20M%208.372%2028.996%20L%208.529%2028.996%20L%208.529%2028.86%20L%208.372%2028.86%20Z%20M%205.507%2028.996%20L%208.372%2028.996%20L%208.372%2028.86%20L%205.507%2028.86%20Z%20M%200.218%2028.996%20L%205.507%2028.996%20L%205.507%2028.86%20L%200.218%2028.86%20Z%20M%200.149%2027.811%20L%200.149%2028.928%20L%200.287%2028.928%20L%200.287%2027.811%20Z%20M%201.162%2026.813%20C%200.603%2026.813%200.149%2027.26%200.149%2027.811%20L%200.287%2027.811%20C%200.287%2027.335%200.679%2026.948%201.162%2026.948%20Z%20M%201.351%2026.813%20L%201.162%2026.813%20L%201.162%2026.948%20L%201.351%2026.948%20Z%20M%201.282%2025.763%20L%201.282%2026.88%20L%201.42%2026.88%20L%201.42%2025.763%20Z%20M%202.296%2024.765%20C%201.736%2024.765%201.282%2025.212%201.282%2025.763%20L%201.42%2025.763%20C%201.42%2025.287%201.812%2024.9%202.296%2024.9%20Z%20M%202.227%208.263%20L%202.227%2024.833%20L%202.365%2024.833%20L%202.365%208.263%20Z%20M%201.257%208.331%20L%202.296%208.331%20L%202.296%208.195%20L%201.257%208.195%20Z%20M%20-0.037%204.187%20L%201.191%208.282%20L%201.323%208.244%20L%200.095%204.148%20Z%20M%205.507%204.099%20L%200.029%204.099%20L%200.029%204.235%20L%205.507%204.235%20L%205.507%204.099%20Z%20M%205.438%200.072%20L%205.438%204.167%20L%205.576%204.167%20L%205.576%200.072%20Z%22%20fill%3D%22rgb(255%2C255%2C255)%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E', tagUrl: 'https://warpcast.com/mbj357',
+    textColor: '#FFFFFF',
+    tooltipDescription: 'This address is linked to a Farcaster account',
+    warpcastHandle: 'duckYduck',
+  },
+};
+
+export const noteTag: AddressMetadataTagApi = {
+  slug: 'scam-tag',
+  name: 'Phish 🐟',
+  tagType: 'note',
+  ordinal: 100,
+  meta: {
+    alertBgColor: 'deeppink',
+    alertTextColor: 'white',
+    data: '<b>Warning!</b> This is scam! See the <a href="https://example.com" target="_blank">report</a>',
+  },
+};
+
+export const noteTag2: AddressMetadataTagApi = {
+  slug: 'note0',
+  name: 'note_0',
+  tagType: 'note',
+  ordinal: 0,
+  meta: {
+    alertStatus: 'info',
+    data: 'The token MILF was launched on May 13, 2021. The maximum total supply of the token is 100 billion.',
+  },
+};
diff --git a/mocks/metadata/appActionButton.ts b/mocks/metadata/appActionButton.ts
new file mode 100644
index 0000000000..47938638cd
--- /dev/null
+++ b/mocks/metadata/appActionButton.ts
@@ -0,0 +1,38 @@
+import type { AddressMetadataTagApi } from 'types/api/addressMetadata';
+
+const appID = 'uniswap';
+const appMarketplaceURL = 'https://example.com';
+export const appLogoURL = 'https://localhost:3100/icon.svg';
+const appActionButtonText = 'Swap';
+const textColor = '#FFFFFF';
+const bgColor = '#FF007A';
+
+export const buttonWithoutStyles: AddressMetadataTagApi['meta'] = {
+  appID,
+  appMarketplaceURL,
+  appLogoURL,
+  appActionButtonText,
+};
+
+export const linkWithoutStyles: AddressMetadataTagApi['meta'] = {
+  appMarketplaceURL,
+  appLogoURL,
+  appActionButtonText,
+};
+
+export const buttonWithStyles: AddressMetadataTagApi['meta'] = {
+  appID,
+  appMarketplaceURL,
+  appLogoURL,
+  appActionButtonText,
+  textColor,
+  bgColor,
+};
+
+export const linkWithStyles: AddressMetadataTagApi['meta'] = {
+  appMarketplaceURL,
+  appLogoURL,
+  appActionButtonText,
+  textColor,
+  bgColor,
+};
diff --git a/mocks/metadata/publicTagTypes.ts b/mocks/metadata/publicTagTypes.ts
new file mode 100644
index 0000000000..80bf92acba
--- /dev/null
+++ b/mocks/metadata/publicTagTypes.ts
@@ -0,0 +1,34 @@
+export const publicTagTypes = {
+  tagTypes: [
+    {
+      id: '96f9db76-02fc-477d-a003-640a0c5e7e15',
+      type: 'name' as const,
+      description: 'Alias for the address',
+    },
+    {
+      id: 'e75f396e-f52a-44c9-8790-a1dbae496b72',
+      type: 'generic' as const,
+      description: 'Group classification for the address',
+    },
+    {
+      id: '11a2d4f3-412e-4eb7-b663-86c6f48cdec3',
+      type: 'information' as const,
+      description: 'Tags with custom data for the address, e.g. additional link to project, or classification details, or minor account details',
+    },
+    {
+      id: 'd37443d4-748f-4314-a4a0-283b666e9f29',
+      type: 'classifier' as const,
+      description: 'E.g. "ERC20", "Contract", "CEX", "DEX", "NFT"',
+    },
+    {
+      id: 'ea9d0f91-9b46-44ff-be70-128bac468f6f',
+      type: 'protocol' as const,
+      description: 'Special tag type for protocol-related contracts, e.g. for bridges',
+    },
+    {
+      id: 'd2600acb-473c-445f-ac72-ed6fef53e06a',
+      type: 'note' as const,
+      description: 'Short general-purpose description for the address',
+    },
+  ],
+};
diff --git a/mocks/mud/mudTables.ts b/mocks/mud/mudTables.ts
new file mode 100644
index 0000000000..b5f0186c91
--- /dev/null
+++ b/mocks/mud/mudTables.ts
@@ -0,0 +1,94 @@
+/* eslint-disable max-len */
+import type { AddressMudRecord, AddressMudRecords, AddressMudRecordsItem, AddressMudTables } from 'types/api/address';
+import type { MudWorldSchema, MudWorldTable } from 'types/api/mudWorlds';
+
+export const table1: MudWorldTable = {
+  table_full_name: 'tb.store.Tables',
+  table_id: '0x746273746f72650000000000000000005461626c657300000000000000000000',
+  table_name: 'Tables',
+  table_namespace: 'store',
+  table_type: 'onchain',
+};
+
+export const table2: MudWorldTable = {
+  table_full_name: 'ot.world.FunctionSignatur',
+  table_id: '0x6f74776f726c6400000000000000000046756e6374696f6e5369676e61747572',
+  table_name: 'FunctionSignatur',
+  table_namespace: 'world',
+  table_type: 'offchain',
+};
+
+export const schema1: MudWorldSchema = {
+  key_names: [ 'moduleAddress', 'argumentsHash' ],
+  key_types: [ 'address', 'bytes32' ],
+  value_names: [ 'fieldLayout', 'keySchema', 'valueSchema', 'abiEncodedKeyNames', 'abiEncodedFieldNames' ],
+  value_types: [ 'bytes32', 'bytes32', 'bytes32', 'bytes', 'bytes' ],
+};
+
+export const schema2: MudWorldSchema = {
+  key_names: [],
+  key_types: [],
+  value_names: [ 'value' ],
+  value_types: [ 'address' ],
+};
+
+export const mudTables: AddressMudTables = {
+  items: [
+    {
+      table: table1,
+      schema: schema1,
+    },
+    {
+      table: table2,
+      schema: schema2,
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    table_id: '1',
+  },
+};
+
+const record: AddressMudRecordsItem = {
+  decoded: {
+    abiEncodedFieldNames: '0x00000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000000003000000000000000000000000000000000000000000000000000000000000006000000000000000000000000000000000000000000000000000000000000000a000000000000000000000000000000000000000000000000000000000000000e00000000000000000000000000000000000000000000000000000000000000006706c617965720000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000576616c7565000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000974696d657374616d700000000000000000000000000000000000000000000000',
+    abiEncodedKeyNames: '0x00000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000000000000000002000000000000000000000000000000000000000000000000000000000000000026964000000000000000000000000000000000000000000000000000000000000',
+    goldCosts: [ '100000', '150000', '200000', '250000', '400000', '550000', '700000' ],
+    prototypeIds: [
+      '0x53776f7264736d616e0000000000000000000000000000000000000000000000',
+      '0x50696b656d616e00000000000000000000000000000000000000000000000000',
+      '0x50696b656d616e00000000000000000000000000000000000000000000000000',
+      '0x4172636865720000000000000000000000000000000000000000000000000000',
+      '0x4b6e696768740000000000000000000000000000000000000000000000000000',
+    ],
+    keySchema: '0x002001001f000000000000000000000000000000000000000000000000000000',
+    tableId: '0x6f74000000000000000000000000000044726177557064617465000000000000',
+    valueSchema: '0x00540300611f1f00000000000000000000000000000000000000000000000000',
+  },
+  id: '0x007a651a000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000007',
+  is_deleted: false,
+  timestamp: '2024-05-09T15:14:32.000000Z',
+};
+
+export const mudRecords: AddressMudRecords = {
+  items: [ record, record ],
+  next_page_params: {
+    items_count: 50,
+    key0: '1',
+    key1: '2',
+    key_bytes: '3',
+  },
+  schema: {
+    key_names: [ 'tableId' ],
+    key_types: [ 'bytes32' ],
+    value_names: [ 'prototypeIds', 'goldCosts', 'keySchema', 'valueSchema', 'abiEncodedKeyNames', 'abiEncodedFieldNames' ],
+    value_types: [ 'bytes32[]', 'int32[]', 'bytes32', 'bytes32', 'bytes32', 'bytes', 'bytes' ],
+  },
+  table: table1,
+};
+
+export const mudRecord: AddressMudRecord = {
+  record,
+  schema: mudRecords.schema,
+  table: table1,
+};
diff --git a/mocks/mud/mudWorlds.ts b/mocks/mud/mudWorlds.ts
new file mode 100644
index 0000000000..beb384a33c
--- /dev/null
+++ b/mocks/mud/mudWorlds.ts
@@ -0,0 +1,27 @@
+import type { MudWorldsResponse } from 'types/api/mudWorlds';
+
+import { withName, withoutName } from 'mocks/address/address';
+
+export const mudWorlds: MudWorldsResponse = {
+  items: [
+    {
+      address: withName,
+      coin_balance: '300000000000000000',
+      transaction_count: 3938,
+    },
+    {
+      address: withoutName,
+      coin_balance: '0',
+      transaction_count: 0,
+    },
+    {
+      address: withoutName,
+      coin_balance: '0',
+      transaction_count: 0,
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    world: '0x18f01f12ca21b6fc97b917c3e32f671f8a933caa',
+  },
+};
diff --git a/mocks/noves/transaction.ts b/mocks/noves/transaction.ts
new file mode 100644
index 0000000000..6feb72a564
--- /dev/null
+++ b/mocks/noves/transaction.ts
@@ -0,0 +1,103 @@
+import type { NovesResponseData } from 'types/api/noves';
+
+import type { TokensData } from 'ui/tx/assetFlows/utils/getTokensData';
+
+export const hash = '0x380400d04ebb4179a35b1d7fdef260776915f015e978f8587ef2704b843d4e53';
+
+export const transaction: NovesResponseData = {
+  accountAddress: '0xef6595A423c99f3f2821190A4d96fcE4DcD89a80',
+  chain: 'eth-goerli',
+  classificationData: {
+    description: 'Called function \'stake\' on contract 0xef326CdAdA59D3A740A76bB5f4F88Fb2.',
+    protocol: {
+      name: null,
+    },
+    received: [],
+    sent: [
+      {
+        action: 'sent',
+        actionFormatted: 'Sent',
+        amount: '3000',
+        from: {
+          address: '0xef6595A423c99f3f2821190A4d96fcE4DcD89a80',
+          name: 'This wallet',
+        },
+        to: {
+          address: '0xdD15D2650387Fb6FEDE27ae7392C402a393F8A37',
+          name: null,
+        },
+        token: {
+          address: '0x1bfe4298796198f8664b18a98640cec7c89b5baa',
+          decimals: 18,
+          name: 'PQR-Test',
+          symbol: 'PQR',
+        },
+      },
+      {
+        action: 'paidGas',
+        actionFormatted: 'Paid Gas',
+        amount: '0.000395521502109448',
+        from: {
+          address: '0xef6595A423c99f3f2821190A4d96fcE4DcD89a80',
+          name: 'This wallet',
+        },
+        to: {
+          address: null,
+          name: 'Validators',
+        },
+        token: {
+          address: 'ETH',
+          decimals: 18,
+          name: 'ETH',
+          symbol: 'ETH',
+        },
+      },
+    ],
+    source: {
+      type: null,
+    },
+    type: 'unclassified',
+    typeFormatted: 'Unclassified',
+  },
+  rawTransactionData: {
+    blockNumber: 10388918,
+    fromAddress: '0xef6595A423c99f3f2821190A4d96fcE4DcD89a80',
+    gas: 275079,
+    gasPrice: 1500000008,
+    timestamp: 1705488588,
+    toAddress: '0xef326CdAdA59D3A740A76bB5f4F88Fb2f1076164',
+    transactionFee: {
+      amount: '395521502109448',
+      token: {
+        decimals: 18,
+        symbol: 'ETH',
+      },
+    },
+    transactionHash: '0x380400d04ebb4179a35b1d7fdef260776915f015e978f8587ef2704b843d4e53',
+  },
+  txTypeVersion: 2,
+};
+
+export const tokenData: TokensData = {
+  nameList: [ 'PQR-Test', 'ETH' ],
+  symbolList: [ 'PQR' ],
+  idList: [],
+  byName: {
+    'PQR-Test': {
+      name: 'PQR-Test',
+      symbol: 'PQR',
+      address: '0x1bfe4298796198f8664b18a98640cec7c89b5baa',
+      id: undefined,
+    },
+    ETH: { name: 'ETH', symbol: null, address: '', id: undefined },
+  },
+  bySymbol: {
+    PQR: {
+      name: 'PQR-Test',
+      symbol: 'PQR',
+      address: '0x1bfe4298796198f8664b18a98640cec7c89b5baa',
+      id: undefined,
+    },
+    'null': { name: 'ETH', symbol: null, address: '', id: undefined },
+  },
+};
diff --git a/mocks/optimism/deposits.ts b/mocks/optimism/deposits.ts
new file mode 100644
index 0000000000..e2f0ba1e9e
--- /dev/null
+++ b/mocks/optimism/deposits.ts
@@ -0,0 +1,33 @@
+export const data = {
+  items: [
+    {
+      l1_block_number: 8382841,
+      l1_block_timestamp: '2022-05-27T01:13:48.000000Z',
+      l1_transaction_hash: '0xaf3e5f4ef03eac22a622b3434c5dc9f4465aa291900a86bcf0ad9fb14429f05e',
+      l1_transaction_origin: '0x6197d1eef304eb5284a0f6720f79403b4e9bf3a5',
+      l2_transaction_gas_limit: '2156928',
+      l2_transaction_hash: '0xb9212c76069b926917816767e4c5a0ef80e519b1ac1c3d3fb5818078f4984667',
+    },
+    {
+      l1_block_number: 8382841,
+      l1_block_timestamp: '2022-05-27T01:13:48.000000Z',
+      l1_transaction_hash: '0xa280f18cc72f9ad904087eb262c236048e935ad184a85bbd042d544c172c10bf',
+      l1_transaction_origin: '0x6197d1eef304eb5284a0f6720f79403b4e9bf3a5',
+      l2_transaction_gas_limit: '1216064',
+      l2_transaction_hash: '0xaaaeb47a78b5c42d870f8d831a683a7cefe1b031a992170b28b43b82bd08318c',
+    },
+    {
+      l1_block_number: 8382834,
+      l1_block_timestamp: '2022-06-27T01:11:48.000000Z',
+      l1_transaction_hash: '0xfca8cc5440bffa8b975873c02bba3ff3380dd75fbc3260d10179e282cf72d6d4',
+      l1_transaction_origin: '0x6197d1eef304eb5284a0f6720f79403b4e9bf3a5',
+      l2_transaction_gas_limit: '405824',
+      l2_transaction_hash: '0xa0604ebf2614ad708aeefa83f766fb25928dadb5ffb2f45028f5b4f1fa4d9358',
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    l1_block_number: 8382363,
+    transaction_hash: '0x2012f0ce966ce6573e7826e9235f227edf5a2f8382b8d646c979f85a77e15c05',
+  },
+};
diff --git a/mocks/optimism/disputeGames.ts b/mocks/optimism/disputeGames.ts
new file mode 100644
index 0000000000..f522775cac
--- /dev/null
+++ b/mocks/optimism/disputeGames.ts
@@ -0,0 +1,26 @@
+export const data = {
+  items: [
+    {
+      contract_address: '0x5cbe1b88b6357e6a8f0821bea72cc0b88c231f1c',
+      created_at: '2022-05-27T01:13:48.000000Z',
+      game_type: 0,
+      index: 6662,
+      l2_block_number: 12542890,
+      resolved_at: null,
+      status: 'In progress',
+    },
+    {
+      contract_address: '0x5cbe1b88b6357e6a8f0821bea72cc0b88c231f1c',
+      created_at: '2022-05-27T01:13:48.000000Z',
+      game_type: 0,
+      index: 6662,
+      l2_block_number: 12542890,
+      resolved_at: '2022-05-27T01:13:48.000000Z',
+      status: 'Defender wins',
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    index: 8382363,
+  },
+};
diff --git a/mocks/optimism/outputRoots.ts b/mocks/optimism/outputRoots.ts
new file mode 100644
index 0000000000..0be0426fee
--- /dev/null
+++ b/mocks/optimism/outputRoots.ts
@@ -0,0 +1,32 @@
+export const outputRootsData = {
+  items: [
+    {
+      l1_block_number: 8456113,
+      l1_timestamp: '2022-02-08T12:08:48.000000Z',
+      l1_transaction_hash: '0x19455a53758d5de89070164ff09c40d93f1b4447e721090f03aa150f6159265a',
+      l2_block_number: 5214988,
+      l2_output_index: 9926,
+      output_root: '0xa7de9bd3986ce5ca8de9f0ab6c7473f4cebe225fb13b57cc5c8472de84a8bab3',
+    },
+    {
+      l1_block_number: 8456099,
+      l1_timestamp: '2022-02-08T12:05:24.000000Z',
+      l1_transaction_hash: '0x6aa081e8e33a085e4ec7124fcd8a5f7d36aac0828f176e80d4b70e313a11695b',
+      l2_block_number: 5214868,
+      l2_output_index: 9925,
+      output_root: '0x4ec2822d2f7b4f834d693d88f8a4cf15899882915980a21756d29cfd9f9f3898',
+    },
+    {
+      l1_block_number: 8456078,
+      l1_timestamp: '2022-02-08T12:00:48.000000Z',
+      l1_transaction_hash: '0x4238988b0959e41a7b09cef67f58698e05e3bcc29b8d2f60e6c77dc68c91f16e',
+      l2_block_number: 5214748,
+      l2_output_index: 9924,
+      output_root: '0x78b2e13c20f4bbfb4a008127edaaf25aa476f933669edd4856305bf4ab64a92b',
+    },
+  ],
+  next_page_params: {
+    index: 9877,
+    items_count: 50,
+  },
+};
diff --git a/mocks/optimism/txnBatches.ts b/mocks/optimism/txnBatches.ts
new file mode 100644
index 0000000000..3344f6420d
--- /dev/null
+++ b/mocks/optimism/txnBatches.ts
@@ -0,0 +1,104 @@
+import type {
+  OptimismL2TxnBatchTypeCallData,
+  OptimismL2TxnBatchTypeCelestia,
+  OptimismL2TxnBatchTypeEip4844,
+  OptimisticL2TxnBatchesResponse,
+} from 'types/api/optimisticL2';
+
+export const txnBatchesData: OptimisticL2TxnBatchesResponse = {
+  items: [
+    {
+      batch_data_container: 'in_blob4844',
+      internal_id: 260998,
+      l1_timestamp: '2022-11-10T11:29:11.000000Z',
+      l1_transaction_hashes: [
+        '0x9553351f6bd1577f4e782738c087be08697fb11f3b91745138d71ba166d62c3b',
+      ],
+      l2_block_end: 124882074,
+      l2_block_start: 124881833,
+      transaction_count: 4011,
+    },
+    {
+      batch_data_container: 'in_calldata',
+      internal_id: 260997,
+      l1_timestamp: '2022-11-03T11:20:59.000000Z',
+      l1_transaction_hashes: [
+        '0x80f5fba70d5685bc2b70df836942e892b24afa7bba289a2fac0ca8f4d554cc72',
+      ],
+      l2_block_end: 124881832,
+      l2_block_start: 124881613,
+      transaction_count: 4206,
+    },
+    {
+      internal_id: 260996,
+      l1_timestamp: '2024-09-03T11:14:23.000000Z',
+      l1_transaction_hashes: [
+        '0x39f4c46cae57bae936acb9159e367794f41f021ed3788adb80ad93830edb5f22',
+      ],
+      l2_block_end: 124881612,
+      l2_block_start: 124881380,
+      transaction_count: 4490,
+    },
+  ],
+  next_page_params: {
+    id: 5902834,
+    items_count: 50,
+  },
+};
+
+export const txnBatchTypeCallData: OptimismL2TxnBatchTypeCallData = {
+  batch_data_container: 'in_calldata',
+  internal_id: 309123,
+  l1_timestamp: '2022-08-10T10:30:24.000000Z',
+  l1_transaction_hashes: [
+    '0x478c45f182631ae6f7249d40f31fdac36f41d88caa2e373fba35340a7345ca67',
+  ],
+  l2_block_end: 10146784,
+  l2_block_start: 10145379,
+  transaction_count: 1608,
+};
+
+export const txnBatchTypeCelestia: OptimismL2TxnBatchTypeCelestia = {
+  batch_data_container: 'in_celestia',
+  blobs: [
+    {
+      commitment: '0x39c18c21c6b127d58809b8d3b5931472421f9b51532959442f53038f10b78f2a',
+      height: 2584868,
+      l1_timestamp: '2024-08-28T16:51:12.000000Z',
+      l1_transaction_hash: '0x2bb0b96a8ba0f063a243ac3dee0b2f2d87edb2ba9ef44bfcbc8ed191af1c4c24',
+      namespace: '0x00000000000000000000000000000000000000000008e5f679bf7116cb',
+    },
+  ],
+  internal_id: 309667,
+  l1_timestamp: '2022-08-28T16:51:12.000000Z',
+  l1_transaction_hashes: [
+    '0x2bb0b96a8ba0f063a243ac3dee0b2f2d87edb2ba9ef44bfcbc8ed191af1c4c24',
+  ],
+  l2_block_end: 10935879,
+  l2_block_start: 10934514,
+  transaction_count: 1574,
+};
+
+export const txnBatchTypeEip4844: OptimismL2TxnBatchTypeEip4844 = {
+  batch_data_container: 'in_blob4844',
+  blobs: [
+    {
+      hash: '0x012a4f0c6db6bce9d3d357b2bf847764320bcb0107ab318f3a532f637bc60dfe',
+      l1_timestamp: '2022-08-23T03:59:12.000000Z',
+      l1_transaction_hash: '0x3870f136497e5501dc20d0974daf379c8636c958794d59a9c90d4f8a9f0ed20a',
+    },
+    {
+      hash: '0x01d1097cce23229931afbc2fd1cf0d707da26df7b39cef1c542276ae718de4f6',
+      l1_timestamp: '2022-08-23T03:59:12.000000Z',
+      l1_transaction_hash: '0x3870f136497e5501dc20d0974daf379c8636c958794d59a9c90d4f8a9f0ed20a',
+    },
+  ],
+  internal_id: 2538459,
+  l1_timestamp: '2022-08-23T03:59:12.000000Z',
+  l1_transaction_hashes: [
+    '0x3870f136497e5501dc20d0974daf379c8636c958794d59a9c90d4f8a9f0ed20a',
+  ],
+  l2_block_end: 16291502,
+  l2_block_start: 16291373,
+  transaction_count: 704,
+};
diff --git a/mocks/optimism/withdrawals.ts b/mocks/optimism/withdrawals.ts
new file mode 100644
index 0000000000..b9d9588cdc
--- /dev/null
+++ b/mocks/optimism/withdrawals.ts
@@ -0,0 +1,50 @@
+import type { OptimisticL2WithdrawalsResponse } from 'types/api/optimisticL2';
+
+export const data: OptimisticL2WithdrawalsResponse = {
+  items: [
+    {
+      challenge_period_end: null,
+      from: {
+        hash: '0x67aab90c548b284be30b05c376001b4db90b87ba',
+        implementations: null,
+        is_contract: false,
+        is_verified: false,
+        name: null,
+        private_tags: [],
+        public_tags: [],
+        watchlist_names: [],
+        ens_domain_name: null,
+      },
+      l1_transaction_hash: '0x1a235bee32ac10cb7efdad98415737484ca66386e491cde9e17d42b136dca684',
+      l2_timestamp: '2022-02-15T12:50:02.000000Z',
+      l2_transaction_hash: '0x918cd8c5c24c17e06cd02b0379510c4ad56324bf153578fb9caaaa2fe4e7dc35',
+      msg_nonce: 396,
+      msg_nonce_version: 1,
+      status: 'Ready to prove',
+    },
+    {
+      challenge_period_end: null,
+      from: null,
+      l1_transaction_hash: null,
+      l2_timestamp: null,
+      l2_transaction_hash: '0x2f117bee32ac10cb7efdad98415737484ca66386e491cde9e17d42b136def593',
+      msg_nonce: 391,
+      msg_nonce_version: 1,
+      status: 'Ready to prove',
+    },
+    {
+      challenge_period_end: '2022-11-11T12:50:02.000000Z',
+      from: null,
+      l1_transaction_hash: null,
+      l2_timestamp: null,
+      l2_transaction_hash: '0xe14b1f46838176702244a5343629bcecf728ca2d9881d47b4ce46e00c387d7e3',
+      msg_nonce: 390,
+      msg_nonce_version: 1,
+      status: 'Ready for relay',
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    nonce: '1766847064778384329583297500742918515827483896875618958121606201292620123',
+  },
+};
diff --git a/mocks/pools/pool.ts b/mocks/pools/pool.ts
new file mode 100644
index 0000000000..78dce73b1d
--- /dev/null
+++ b/mocks/pools/pool.ts
@@ -0,0 +1,24 @@
+import type { Pool } from 'types/api/pools';
+
+export const base: Pool = {
+  contract_address: '0x06da0fd433c1a5d7a4faa01111c044910a184553',
+  chain_id: '1',
+  base_token_address: '0xdac17f958d2ee523a2206206994597c13d831ec7',
+  base_token_symbol: 'USDT',
+  base_token_icon_url: 'https://localhost:3000/utia.jpg',
+  quote_token_address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
+  quote_token_symbol: 'WETH',
+  quote_token_icon_url: 'https://localhost:3000/secondary_utia.jpg',
+  fully_diluted_valuation_usd: '75486579078',
+  market_cap_usd: '139312819076.195',
+  liquidity: '2099941.2238',
+  dex: { id: 'sushiswap', name: 'SushiSwap' },
+  fee: '0.03',
+  coin_gecko_terminal_url: 'https://www.geckoterminal.com/eth/pools/0x06da0fd433c1a5d7a4faa01111c044910a184553',
+};
+
+export const noIcons: Pool = {
+  ...base,
+  base_token_icon_url: null,
+  quote_token_icon_url: null,
+};
diff --git a/mocks/rewards/balance.ts b/mocks/rewards/balance.ts
new file mode 100644
index 0000000000..8c78eab127
--- /dev/null
+++ b/mocks/rewards/balance.ts
@@ -0,0 +1,10 @@
+import type { RewardsUserBalancesResponse } from 'types/api/rewards';
+
+export const base: RewardsUserBalancesResponse = {
+  total: '250',
+  staked: '0',
+  unstaked: '0',
+  total_staking_rewards: '0',
+  total_referral_rewards: '0',
+  pending_referral_rewards: '0',
+};
diff --git a/mocks/rewards/dailyReward.ts b/mocks/rewards/dailyReward.ts
new file mode 100644
index 0000000000..558c22aca4
--- /dev/null
+++ b/mocks/rewards/dailyReward.ts
@@ -0,0 +1,12 @@
+import type { RewardsUserDailyCheckResponse } from 'types/api/rewards';
+
+export const base: RewardsUserDailyCheckResponse = {
+  available: true,
+  daily_reward: '10',
+  streak_reward: '10',
+  pending_referral_rewards: '0',
+  total_reward: '20',
+  date: '',
+  reset_at: '',
+  streak: '6',
+};
diff --git a/mocks/rewards/referrals.ts b/mocks/rewards/referrals.ts
new file mode 100644
index 0000000000..bac2b26042
--- /dev/null
+++ b/mocks/rewards/referrals.ts
@@ -0,0 +1,7 @@
+import type { RewardsUserReferralsResponse } from 'types/api/rewards';
+
+export const base: RewardsUserReferralsResponse = {
+  code: 'QWERTY',
+  link: 'https://example.com?ref=QWERTY',
+  referrals: '15',
+};
diff --git a/mocks/rewards/rewardsConfig.ts b/mocks/rewards/rewardsConfig.ts
new file mode 100644
index 0000000000..25ae8b7277
--- /dev/null
+++ b/mocks/rewards/rewardsConfig.ts
@@ -0,0 +1,10 @@
+import type { RewardsConfigResponse } from 'types/api/rewards';
+
+export const base: RewardsConfigResponse = {
+  rewards: {
+    registration: '100',
+    registration_with_referral: '200',
+    daily_claim: '10',
+    referral_share: '0.1',
+  },
+};
diff --git a/mocks/scroll/messages.ts b/mocks/scroll/messages.ts
new file mode 100644
index 0000000000..d2bbf43a70
--- /dev/null
+++ b/mocks/scroll/messages.ts
@@ -0,0 +1,26 @@
+import type { ScrollL2MessagesResponse } from 'types/api/scrollL2';
+
+export const baseResponse: ScrollL2MessagesResponse = {
+  items: [
+    {
+      id: 930795,
+      origination_transaction_block_number: 20639178,
+      origination_transaction_hash: '0x70380f2c6ecd53aa6e0608e6c9d770acaa29c0508869ec296bae3e09678ea9f4',
+      origination_timestamp: '2024-08-30T05:03:23.000000Z',
+      completion_transaction_hash: null,
+      value: '5084131319054877748',
+    },
+    {
+      id: 930748,
+      origination_transaction_block_number: 20638104,
+      origination_transaction_hash: '0x7e7b4d5ff0b7a6af5e52f4aa2ad9eca3c0c5664368cbb781e04b5b13c6109b2b',
+      origination_timestamp: '2024-08-30T01:26:35.000000Z',
+      completion_transaction_hash: '0x426b16ea3a42228f6d754ae55c348986122cdb1e4331b6fd454975776f513ea1',
+      value: '0',
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    id: 1,
+  },
+};
diff --git a/mocks/scroll/txnBatches.ts b/mocks/scroll/txnBatches.ts
new file mode 100644
index 0000000000..03e038b4fb
--- /dev/null
+++ b/mocks/scroll/txnBatches.ts
@@ -0,0 +1,50 @@
+import type { ScrollL2BatchesResponse } from 'types/api/scrollL2';
+
+export const batchData = {
+  number: 66928,
+  commitment_transaction: {
+    block_number: 19114878,
+    hash: '0x57552c0dbcf56383ee2efdf8fd6be143b355135fc300361924582c308877b8b7',
+    timestamp: '2024-01-29T21:31:35.000000Z',
+  },
+  confirmation_transaction: {
+    block_number: null,
+    hash: null,
+    timestamp: null,
+  },
+  data_availability: {
+    batch_data_container: 'in_blob4844' as const,
+  },
+  start_block: 456000,
+  end_block: 789000,
+  transaction_count: 654,
+};
+
+export const baseResponse: ScrollL2BatchesResponse = {
+  items: [
+    batchData,
+    {
+      number: 66879,
+      commitment_transaction: {
+        block_number: 19114386,
+        hash: '0x0d33245814b9e61c8f0ed6fd3fb7464f34be33d2c3aee69629d65e8995d77edc',
+        timestamp: '2024-01-29T19:52:35.000000Z',
+      },
+      confirmation_transaction: {
+        block_number: 19114558,
+        hash: '0x6f9a19d503947ec91d6e9d5c2129913a7def86fd0f87061c06e5994cf857bee0',
+        timestamp: '2024-01-29T20:27:11.000000Z',
+      },
+      data_availability: {
+        batch_data_container: 'in_calldata',
+      },
+      start_block: 456000,
+      end_block: 789000,
+      transaction_count: 962,
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    number: 1,
+  },
+};
diff --git a/mocks/search/index.ts b/mocks/search/index.ts
index ef384d1d70..c0510f0225 100644
--- a/mocks/search/index.ts
+++ b/mocks/search/index.ts
@@ -6,6 +6,8 @@ import type {
   SearchResultLabel,
   SearchResult,
   SearchResultUserOp,
+  SearchResultBlob,
+  SearchResultDomain,
 } from 'types/api/search';
 
 export const token1: SearchResultToken = {
@@ -94,6 +96,15 @@ export const contract1: SearchResultAddressOrContract = {
   url: '/address/0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
 };
 
+export const contract2: SearchResultAddressOrContract = {
+  address: '0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
+  name: 'Super utko',
+  type: 'contract' as const,
+  is_smart_contract_verified: true,
+  certified: true,
+  url: '/address/0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
+};
+
 export const label1: SearchResultLabel = {
   address: '0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
   name: 'utko',
@@ -103,7 +114,7 @@ export const label1: SearchResultLabel = {
 };
 
 export const tx1: SearchResultTx = {
-  tx_hash: '0x349d4025d03c6faec117ee10ac0bce7c7a805dd2cbff7a9f101304d9a8a525dd',
+  transaction_hash: '0x349d4025d03c6faec117ee10ac0bce7c7a805dd2cbff7a9f101304d9a8a525dd',
   type: 'transaction' as const,
   timestamp: '2022-12-11T17:55:20Z',
   url: '/tx/0x349d4025d03c6faec117ee10ac0bce7c7a805dd2cbff7a9f101304d9a8a525dd',
@@ -116,6 +127,26 @@ export const userOp1: SearchResultUserOp = {
   url: '/op/0xcb560d77b0f3af074fa05c1e5c691bcdfe457e630062b5907e9e71fc74b2ec61',
 };
 
+export const blob1: SearchResultBlob = {
+  blob_hash: '0x0108dd3e414da9f3255f7a831afa606e8dfaea93d082dfa9b15305583cbbdbbe',
+  type: 'blob' as const,
+  timestamp: null,
+};
+
+export const domain1: SearchResultDomain = {
+  address: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045',
+  ens_info: {
+    address_hash: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045',
+    expiry_date: '2039-09-01T07:36:18.000Z',
+    name: 'vitalik.eth',
+    names_count: 1,
+  },
+  is_smart_contract_verified: false,
+  name: null,
+  type: 'ens_domain',
+  url: '/address/0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045',
+};
+
 export const baseResponse: SearchResult = {
   items: [
     token1,
@@ -124,6 +155,8 @@ export const baseResponse: SearchResult = {
     address1,
     contract1,
     tx1,
+    blob1,
+    domain1,
   ],
   next_page_params: null,
 };
diff --git a/mocks/shibarium/deposits.ts b/mocks/shibarium/deposits.ts
new file mode 100644
index 0000000000..7081042cd8
--- /dev/null
+++ b/mocks/shibarium/deposits.ts
@@ -0,0 +1,61 @@
+import type { ShibariumDepositsResponse } from 'types/api/shibarium';
+
+export const data: ShibariumDepositsResponse = {
+  items: [
+    {
+      l1_block_number: 8382841,
+      timestamp: '2022-05-27T01:13:48.000000Z',
+      l1_transaction_hash: '0xaf3e5f4ef03eac22a622b3434c5dc9f4465aa291900a86bcf0ad9fb14429f05e',
+      user: {
+        hash: '0x6197d1eef304eb5284a0f6720f79403b4e9bf3a5',
+        implementations: null,
+        is_contract: false,
+        is_verified: false,
+        name: null,
+        private_tags: [],
+        public_tags: [],
+        watchlist_names: [],
+        ens_domain_name: null,
+      },
+      l2_transaction_hash: '0xb9212c76069b926917816767e4c5a0ef80e519b1ac1c3d3fb5818078f4984667',
+    },
+    {
+      l1_block_number: 8382841,
+      timestamp: '2022-05-27T01:13:48.000000Z',
+      l1_transaction_hash: '0xaf3e5f4ef03eac22a622b3434c5dc9f4465aa291900a86bcf0ad9fb14429f05e',
+      user: {
+        hash: '0x6197d1eef304eb5284a0f6720f79403b4e9bf3a5',
+        implementations: null,
+        is_contract: false,
+        is_verified: false,
+        name: null,
+        private_tags: [],
+        public_tags: [],
+        watchlist_names: [],
+        ens_domain_name: null,
+      },
+      l2_transaction_hash: '0xb9212c76069b926917816767e4c5a0ef80e519b1ac1c3d3fb5818078f4984667',
+    },
+    {
+      l1_block_number: 8382841,
+      timestamp: '2022-05-27T01:13:48.000000Z',
+      l1_transaction_hash: '0xaf3e5f4ef03eac22a622b3434c5dc9f4465aa291900a86bcf0ad9fb14429f05e',
+      user: {
+        hash: '0x6197d1eef304eb5284a0f6720f79403b4e9bf3a5',
+        implementations: null,
+        is_contract: false,
+        is_verified: false,
+        name: null,
+        private_tags: [],
+        public_tags: [],
+        watchlist_names: [],
+        ens_domain_name: null,
+      },
+      l2_transaction_hash: '0xb9212c76069b926917816767e4c5a0ef80e519b1ac1c3d3fb5818078f4984667',
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    block_number: 8382363,
+  },
+};
diff --git a/mocks/shibarium/withdrawals.ts b/mocks/shibarium/withdrawals.ts
new file mode 100644
index 0000000000..6c1e875264
--- /dev/null
+++ b/mocks/shibarium/withdrawals.ts
@@ -0,0 +1,61 @@
+import type { ShibariumWithdrawalsResponse } from 'types/api/shibarium';
+
+export const data: ShibariumWithdrawalsResponse = {
+  items: [
+    {
+      l2_block_number: 8382841,
+      timestamp: '2022-05-27T01:13:48.000000Z',
+      l1_transaction_hash: '0xaf3e5f4ef03eac22a622b3434c5dc9f4465aa291900a86bcf0ad9fb14429f05e',
+      user: {
+        hash: '0x6197d1eef304eb5284a0f6720f79403b4e9bf3a5',
+        implementations: null,
+        is_contract: false,
+        is_verified: false,
+        name: null,
+        private_tags: [],
+        public_tags: [],
+        watchlist_names: [],
+        ens_domain_name: null,
+      },
+      l2_transaction_hash: '0xb9212c76069b926917816767e4c5a0ef80e519b1ac1c3d3fb5818078f4984667',
+    },
+    {
+      l2_block_number: 8382841,
+      timestamp: '2022-05-27T01:13:48.000000Z',
+      l1_transaction_hash: '0xaf3e5f4ef03eac22a622b3434c5dc9f4465aa291900a86bcf0ad9fb14429f05e',
+      user: {
+        hash: '0x6197d1eef304eb5284a0f6720f79403b4e9bf3a5',
+        implementations: null,
+        is_contract: false,
+        is_verified: false,
+        name: null,
+        private_tags: [],
+        public_tags: [],
+        watchlist_names: [],
+        ens_domain_name: null,
+      },
+      l2_transaction_hash: '0xb9212c76069b926917816767e4c5a0ef80e519b1ac1c3d3fb5818078f4984667',
+    },
+    {
+      l2_block_number: 8382841,
+      timestamp: '2022-05-27T01:13:48.000000Z',
+      l1_transaction_hash: '0xaf3e5f4ef03eac22a622b3434c5dc9f4465aa291900a86bcf0ad9fb14429f05e',
+      user: {
+        hash: '0x6197d1eef304eb5284a0f6720f79403b4e9bf3a5',
+        implementations: null,
+        is_contract: false,
+        is_verified: false,
+        name: null,
+        private_tags: [],
+        public_tags: [],
+        watchlist_names: [],
+        ens_domain_name: null,
+      },
+      l2_transaction_hash: '0xb9212c76069b926917816767e4c5a0ef80e519b1ac1c3d3fb5818078f4984667',
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    block_number: 8382363,
+  },
+};
diff --git a/mocks/stats/daily_txs.ts b/mocks/stats/daily_txs.ts
index 03cb3f20ac..76653e9240 100644
--- a/mocks/stats/daily_txs.ts
+++ b/mocks/stats/daily_txs.ts
@@ -2,127 +2,148 @@ export const base = {
   chart_data: [
     {
       date: '2022-11-28',
-      tx_count: 26815,
+      transaction_count: 26815,
     },
     {
       date: '2022-11-27',
-      tx_count: 34784,
+      transaction_count: 34784,
     },
     {
       date: '2022-11-26',
-      tx_count: 77527,
+      transaction_count: 77527,
     },
     {
       date: '2022-11-25',
-      tx_count: 39687,
+      transaction_count: 39687,
     },
     {
       date: '2022-11-24',
-      tx_count: 40752,
+      transaction_count: 40752,
     },
     {
       date: '2022-11-23',
-      tx_count: 32569,
+      transaction_count: 32569,
     },
     {
       date: '2022-11-22',
-      tx_count: 34449,
+      transaction_count: 34449,
     },
     {
       date: '2022-11-21',
-      tx_count: 106047,
+      transaction_count: 106047,
     },
     {
       date: '2022-11-20',
-      tx_count: 107713,
+      transaction_count: 107713,
     },
     {
       date: '2022-11-19',
-      tx_count: 96311,
+      transaction_count: 96311,
     },
     {
       date: '2022-11-18',
-      tx_count: 30828,
+      transaction_count: 30828,
     },
     {
       date: '2022-11-17',
-      tx_count: 27422,
+      transaction_count: 27422,
     },
     {
       date: '2022-11-16',
-      tx_count: 75898,
+      transaction_count: 75898,
     },
     {
       date: '2022-11-15',
-      tx_count: 84084,
+      transaction_count: 84084,
     },
     {
       date: '2022-11-14',
-      tx_count: 62266,
+      transaction_count: 62266,
     },
     {
       date: '2022-11-13',
-      tx_count: 22338,
+      transaction_count: 22338,
     },
     {
       date: '2022-11-12',
-      tx_count: 86764,
+      transaction_count: 86764,
     },
     {
       date: '2022-11-11',
-      tx_count: 79493,
+      transaction_count: 79493,
     },
     {
       date: '2022-11-10',
-      tx_count: 92887,
+      transaction_count: 92887,
     },
     {
       date: '2022-11-09',
-      tx_count: 43691,
+      transaction_count: 43691,
     },
     {
       date: '2022-11-08',
-      tx_count: 74197,
+      transaction_count: 74197,
     },
     {
       date: '2022-11-07',
-      tx_count: 58131,
+      transaction_count: 58131,
     },
     {
       date: '2022-11-06',
-      tx_count: 62477,
+      transaction_count: 62477,
     },
     {
       date: '2022-11-05',
-      tx_count: 82897,
+      transaction_count: 82897,
     },
     {
       date: '2022-11-04',
-      tx_count: 91725,
+      transaction_count: 91725,
     },
     {
       date: '2022-11-03',
-      tx_count: 83667,
+      transaction_count: 83667,
     },
     {
       date: '2022-11-02',
-      tx_count: 63743,
+      transaction_count: 63743,
     },
     {
       date: '2022-11-01',
-      tx_count: 152059,
+      transaction_count: 152059,
     },
     {
       date: '2022-10-31',
-      tx_count: 62519,
+      transaction_count: 62519,
     },
     {
       date: '2022-10-30',
-      tx_count: 48569,
+      transaction_count: 48569,
     },
     {
       date: '2022-10-29',
-      tx_count: 36789,
+      transaction_count: 36789,
     },
   ],
 };
+
+export const partialData = {
+  chart_data: [
+    { date: '2022-11-28', transaction_count: 26815 },
+    { date: '2022-11-27', transaction_count: 34784 },
+    { date: '2022-11-26', transaction_count: 77527 },
+    { date: '2022-11-25', transaction_count: null },
+    { date: '2022-11-24', transaction_count: null },
+    { date: '2022-11-23', transaction_count: null },
+    { date: '2022-11-22', transaction_count: 63433 },
+    { date: '2022-11-21', transaction_count: null },
+  ],
+};
+
+export const noData = {
+  chart_data: [
+    { date: '2022-11-25', transaction_count: null },
+    { date: '2022-11-24', transaction_count: null },
+    { date: '2022-11-23', transaction_count: null },
+  ],
+};
diff --git a/mocks/stats/index.ts b/mocks/stats/index.ts
index 4e7a63f59c..f4bc3f53e3 100644
--- a/mocks/stats/index.ts
+++ b/mocks/stats/index.ts
@@ -1,24 +1,33 @@
+import _mapValues from 'lodash/mapValues';
+
 import type { HomeStats } from 'types/api/stats';
 
 export const base: HomeStats = {
   average_block_time: 6212.0,
   coin_price: '0.00199678',
   coin_price_change_percentage: -7.42,
+  coin_image: 'http://localhost:3100/utia.jpg',
   gas_prices: {
     average: {
-      fiat_price: '1.01',
-      price: 20.41,
-      time: 12283,
+      fiat_price: '1.39',
+      price: 23.75,
+      time: 12030.25,
+      base_fee: 2.22222,
+      priority_fee: 12.424242,
     },
     fast: {
-      fiat_price: '1.26',
-      price: 25.47,
-      time: 9321,
+      fiat_price: '1.74',
+      price: 29.72,
+      time: 8763.25,
+      base_fee: 4.44444,
+      priority_fee: 22.242424,
     },
     slow: {
-      fiat_price: '0.97',
-      price: 19.55,
-      time: 24543,
+      fiat_price: '1.35',
+      price: 23.04,
+      time: 20100.25,
+      base_fee: 1.11111,
+      priority_fee: 7.8909,
     },
   },
   gas_price_updated_at: '2022-11-11T11:09:49.051171Z',
@@ -39,3 +48,44 @@ export const withBtcLocked: HomeStats = {
   ...base,
   rootstock_locked_btc: '3337493406696977561374',
 };
+
+export const withoutFiatPrices: HomeStats = {
+  ...base,
+  gas_prices: _mapValues(base.gas_prices, (price) => price ? ({ ...price, fiat_price: null }) : null),
+};
+
+export const withoutGweiPrices: HomeStats = {
+  ...base,
+  gas_prices: _mapValues(base.gas_prices, (price) => price ? ({ ...price, price: null }) : null),
+};
+
+export const withoutBothPrices: HomeStats = {
+  ...base,
+  gas_prices: _mapValues(base.gas_prices, (price) => price ? ({ ...price, price: null, fiat_price: null }) : null),
+};
+
+export const withoutGasInfo: HomeStats = {
+  ...base,
+  gas_prices: null,
+};
+
+export const withSecondaryCoin: HomeStats = {
+  ...base,
+  secondary_coin_price: '3.398',
+  secondary_coin_image: 'http://localhost:3100/secondary_utia.jpg',
+};
+
+export const noChartData: HomeStats = {
+  ...base,
+  transactions_today: null,
+  coin_price: null,
+  market_cap: null,
+  tvl: null,
+};
+
+export const indexingStatus = {
+  finished_indexing_blocks: false,
+  indexed_blocks_ratio: '0.1',
+  finished_indexing: true,
+  indexed_internal_transactions_ratio: '1',
+};
diff --git a/mocks/stats/line.ts b/mocks/stats/line.ts
new file mode 100644
index 0000000000..0c10eed840
--- /dev/null
+++ b/mocks/stats/line.ts
@@ -0,0 +1,198 @@
+import type * as stats from '@blockscout/stats-types';
+
+export const averageGasPrice: stats.LineChart = {
+  chart: [
+    {
+      date: '2023-12-22',
+      date_to: '2023-12-22',
+      value: '37.7804422597599',
+      is_approximate: false,
+    },
+    {
+      date: '2023-12-23',
+      date_to: '2023-12-23',
+      value: '25.84889883009387',
+      is_approximate: false,
+    },
+    {
+      date: '2023-12-24',
+      date_to: '2023-12-24',
+      value: '25.818463227198574',
+      is_approximate: false,
+    },
+    {
+      date: '2023-12-25',
+      date_to: '2023-12-25',
+      value: '26.045513050051298',
+      is_approximate: false,
+    },
+    {
+      date: '2023-12-26',
+      date_to: '2023-12-26',
+      value: '21.42600692652399',
+      is_approximate: false,
+    },
+    {
+      date: '2023-12-27',
+      date_to: '2023-12-27',
+      value: '31.066730409846656',
+      is_approximate: false,
+    },
+    {
+      date: '2023-12-28',
+      date_to: '2023-12-28',
+      value: '33.63955781902089',
+      is_approximate: false,
+    },
+    {
+      date: '2023-12-29',
+      date_to: '2023-12-29',
+      value: '28.064736756058384',
+      is_approximate: false,
+    },
+    {
+      date: '2023-12-30',
+      date_to: '2023-12-30',
+      value: '23.074500869678175',
+      is_approximate: false,
+    },
+    {
+      date: '2023-12-31',
+      date_to: '2023-12-31',
+      value: '17.651005734615133',
+      is_approximate: false,
+    },
+    {
+      date: '2024-01-01',
+      date_to: '2023-01-01',
+      value: '14.906085174476441',
+      is_approximate: false,
+    },
+    {
+      date: '2024-01-02',
+      date_to: '2023-01-02',
+      value: '22.28459059038656',
+      is_approximate: false,
+    },
+    {
+      date: '2024-01-03',
+      date_to: '2023-01-03',
+      value: '39.8311646806592',
+      is_approximate: false,
+    },
+    {
+      date: '2024-01-04',
+      date_to: '2023-01-04',
+      value: '26.09989322256083',
+      is_approximate: false,
+    },
+    {
+      date: '2024-01-05',
+      date_to: '2023-01-05',
+      value: '22.821996688111998',
+      is_approximate: false,
+    },
+    {
+      date: '2024-01-06',
+      date_to: '2023-01-06',
+      value: '20.32680041262083',
+      is_approximate: false,
+    },
+    {
+      date: '2024-01-07',
+      date_to: '2023-01-07',
+      value: '32.535045831809704',
+      is_approximate: false,
+    },
+    {
+      date: '2024-01-08',
+      date_to: '2023-01-08',
+      value: '27.443477102139482',
+      is_approximate: false,
+    },
+    {
+      date: '2024-01-09',
+      date_to: '2023-01-09',
+      value: '20.7911332558055',
+      is_approximate: false,
+    },
+    {
+      date: '2024-01-10',
+      date_to: '2023-01-10',
+      value: '42.10740192523919',
+      is_approximate: false,
+    },
+    {
+      date: '2024-01-11',
+      date_to: '2023-01-11',
+      value: '35.75215680343582',
+      is_approximate: false,
+    },
+    {
+      date: '2024-01-12',
+      date_to: '2023-01-12',
+      value: '27.430414798093253',
+      is_approximate: false,
+    },
+    {
+      date: '2024-01-13',
+      date_to: '2023-01-13',
+      value: '20.170934096589875',
+      is_approximate: false,
+    },
+    {
+      date: '2024-01-14',
+      date_to: '2023-01-14',
+      value: '38.79660984371034',
+      is_approximate: false,
+    },
+    {
+      date: '2024-01-15',
+      date_to: '2023-01-15',
+      value: '26.140740484554204',
+      is_approximate: false,
+    },
+    {
+      date: '2024-01-16',
+      date_to: '2023-01-16',
+      value: '36.708543184194156',
+      is_approximate: false,
+    },
+    {
+      date: '2024-01-17',
+      date_to: '2023-01-17',
+      value: '40.325438794298876',
+      is_approximate: false,
+    },
+    {
+      date: '2024-01-18',
+      date_to: '2023-01-18',
+      value: '37.55145309930694',
+      is_approximate: false,
+    },
+    {
+      date: '2024-01-19',
+      date_to: '2023-01-19',
+      value: '33.271450114434664',
+      is_approximate: false,
+    },
+    {
+      date: '2024-01-20',
+      date_to: '2023-01-20',
+      value: '19.303304377685638',
+      is_approximate: false,
+    },
+    {
+      date: '2024-01-21',
+      date_to: '2023-01-21',
+      value: '14.375908594704976',
+      is_approximate: false,
+    },
+  ],
+  info: {
+    title: 'Chart title',
+    description: 'Chart description',
+    id: 'chart',
+    resolutions: [ 'DAY', 'MONTH' ],
+  },
+};
diff --git a/mocks/stats/lines.ts b/mocks/stats/lines.ts
new file mode 100644
index 0000000000..9dfccb0fdf
--- /dev/null
+++ b/mocks/stats/lines.ts
@@ -0,0 +1,161 @@
+import type * as stats from '@blockscout/stats-types';
+
+export const base: stats.LineCharts = {
+  sections: [
+    {
+      id: 'accounts',
+      title: 'Accounts',
+      charts: [
+        {
+          id: 'accountsGrowth',
+          title: 'Accounts growth',
+          description: 'Cumulative accounts number per period',
+          units: undefined,
+          resolutions: [ 'DAY', 'MONTH' ],
+        },
+        {
+          id: 'activeAccounts',
+          title: 'Active accounts',
+          description: 'Active accounts number per period',
+          units: undefined,
+          resolutions: [ 'DAY', 'MONTH' ],
+        },
+        {
+          id: 'newAccounts',
+          title: 'New accounts',
+          description: 'New accounts number per day',
+          units: undefined,
+          resolutions: [ 'DAY', 'MONTH' ],
+        },
+      ],
+    },
+    {
+      id: 'transactions',
+      title: 'Transactions',
+      charts: [
+        {
+          id: 'averageTxnFee',
+          title: 'Average transaction fee',
+          description: 'The average amount in ETH spent per transaction',
+          units: 'ETH',
+          resolutions: [ 'DAY', 'MONTH' ],
+        },
+        {
+          id: 'newTxns',
+          title: 'New transactions',
+          description: 'New transactions number',
+          units: undefined,
+          resolutions: [ 'DAY', 'MONTH' ],
+        },
+        {
+          id: 'txnsFee',
+          title: 'Transactions fees',
+          description: 'Amount of tokens paid as fees',
+          units: 'ETH',
+          resolutions: [ 'DAY', 'MONTH' ],
+        },
+        {
+          id: 'txnsGrowth',
+          title: 'Transactions growth',
+          description: 'Cumulative transactions number',
+          units: undefined,
+          resolutions: [ 'DAY', 'MONTH' ],
+        },
+        {
+          id: 'txnsSuccessRate',
+          title: 'Transactions success rate',
+          description: 'Successful transactions rate per day',
+          units: undefined,
+          resolutions: [ 'DAY', 'MONTH' ],
+        },
+      ],
+    },
+    {
+      id: 'blocks',
+      title: 'Blocks',
+      charts: [
+        {
+          id: 'averageBlockRewards',
+          title: 'Average block rewards',
+          description: 'Average amount of distributed reward in tokens per day',
+          units: 'ETH',
+          resolutions: [ 'DAY', 'MONTH' ],
+        },
+        {
+          id: 'averageBlockSize',
+          title: 'Average block size',
+          description: 'Average size of blocks in bytes',
+          units: 'Bytes',
+          resolutions: [ 'DAY', 'MONTH' ],
+        },
+        {
+          id: 'newBlocks',
+          title: 'New blocks',
+          description: 'New blocks number',
+          units: undefined,
+          resolutions: [ 'DAY', 'MONTH' ],
+        },
+      ],
+    },
+    {
+      id: 'tokens',
+      title: 'Tokens',
+      charts: [
+        {
+          id: 'newNativeCoinTransfers',
+          title: 'New ETH transfers',
+          description: 'New token transfers number for the period',
+          units: undefined,
+          resolutions: [ 'DAY', 'MONTH' ],
+        },
+      ],
+    },
+    {
+      id: 'gas',
+      title: 'Gas',
+      charts: [
+        {
+          id: 'averageGasLimit',
+          title: 'Average gas limit',
+          description: 'Average gas limit per block for the period',
+          units: undefined,
+          resolutions: [ 'DAY', 'MONTH' ],
+        },
+        {
+          id: 'averageGasPrice',
+          title: 'Average gas price',
+          description: 'Average gas price for the period (Gwei)',
+          units: 'Gwei',
+          resolutions: [ 'DAY', 'MONTH' ],
+        },
+        {
+          id: 'gasUsedGrowth',
+          title: 'Gas used growth',
+          description: 'Cumulative gas used for the period',
+          units: undefined,
+          resolutions: [ 'DAY', 'MONTH' ],
+        },
+      ],
+    },
+    {
+      id: 'contracts',
+      title: 'Contracts',
+      charts: [
+        {
+          id: 'newVerifiedContracts',
+          title: 'New verified contracts',
+          description: 'New verified contracts number for the period',
+          units: undefined,
+          resolutions: [ 'DAY', 'MONTH' ],
+        },
+        {
+          id: 'verifiedContractsGrowth',
+          title: 'Verified contracts growth',
+          description: 'Cumulative number verified contracts for the period',
+          units: undefined,
+          resolutions: [ 'DAY', 'MONTH' ],
+        },
+      ],
+    },
+  ],
+};
diff --git a/mocks/tokens/tokenHolders.ts b/mocks/tokens/tokenHolders.ts
index 582476e903..89f2595482 100644
--- a/mocks/tokens/tokenHolders.ts
+++ b/mocks/tokens/tokenHolders.ts
@@ -2,18 +2,14 @@ import type { TokenHolders } from 'types/api/token';
 
 import { withName, withoutName } from 'mocks/address/address';
 
-import { tokenInfoERC1155a, tokenInfoERC20a } from './tokenInfo';
-
 export const tokenHoldersERC20: TokenHolders = {
   items: [
     {
       address: withName,
-      token: tokenInfoERC20a,
       value: '107014805905725000000',
     },
     {
       address: withoutName,
-      token: tokenInfoERC20a,
       value: '207014805905725000000',
     },
   ],
@@ -27,13 +23,11 @@ export const tokenHoldersERC1155: TokenHolders = {
   items: [
     {
       address: withName,
-      token: tokenInfoERC1155a,
       value: '107014805905725000000',
       token_id: '12345',
     },
     {
       address: withoutName,
-      token: tokenInfoERC1155a,
       value: '207014805905725000000',
       token_id: '12345',
     },
diff --git a/mocks/tokens/tokenInfo.ts b/mocks/tokens/tokenInfo.ts
index 1034b9bc64..a22c7537e5 100644
--- a/mocks/tokens/tokenInfo.ts
+++ b/mocks/tokens/tokenInfo.ts
@@ -8,7 +8,7 @@ export const tokenInfo: TokenInfo = {
   holders: '46554',
   name: 'ARIANEE',
   symbol: 'ARIA',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   total_supply: '1235',
   icon_url: 'http://localhost:3000/token-icon.png',
 };
@@ -27,8 +27,8 @@ export const tokenInfoERC20a: TokenInfo<'ERC-20'> = {
   name: 'hyfi.token',
   symbol: 'HyFi',
   total_supply: '369000000000000000000000000',
-  type: 'ERC-20',
-  icon_url: 'https://example.com/token-icon.png',
+  type: 'ERC-20' as const,
+  icon_url: 'http://localhost:3000/token-icon.png',
 };
 
 export const tokenInfoERC20b: TokenInfo<'ERC-20'> = {
@@ -40,7 +40,7 @@ export const tokenInfoERC20b: TokenInfo<'ERC-20'> = {
   name: 'USD Coin',
   symbol: 'USDC',
   total_supply: '900000000000000000000000000',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   icon_url: null,
 };
 
@@ -53,7 +53,7 @@ export const tokenInfoERC20c: TokenInfo<'ERC-20'> = {
   name: 'Ethereum',
   symbol: 'ETH',
   total_supply: '1000000000000000000000000',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   icon_url: null,
 };
 
@@ -66,7 +66,7 @@ export const tokenInfoERC20d: TokenInfo<'ERC-20'> = {
   name: 'Zeta',
   symbol: 'ZETA',
   total_supply: '2100000000000000000000000000',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   icon_url: null,
 };
 
@@ -79,7 +79,7 @@ export const tokenInfoERC20LongSymbol: TokenInfo<'ERC-20'> = {
   name: 'Zeta',
   symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY',
   total_supply: '2100000000000000000000000000',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   icon_url: null,
 };
 
@@ -92,7 +92,7 @@ export const tokenInfoERC721a: TokenInfo<'ERC-721'> = {
   name: 'HyFi Athena',
   symbol: 'HYFI_ATHENA',
   total_supply: '105',
-  type: 'ERC-721',
+  type: 'ERC-721' as const,
   icon_url: null,
 };
 
@@ -105,7 +105,7 @@ export const tokenInfoERC721b: TokenInfo<'ERC-721'> = {
   name: 'World Of Women Galaxy',
   symbol: 'WOWG',
   total_supply: null,
-  type: 'ERC-721',
+  type: 'ERC-721' as const,
   icon_url: null,
 };
 
@@ -118,7 +118,7 @@ export const tokenInfoERC721c: TokenInfo<'ERC-721'> = {
   name: 'Puma',
   symbol: 'PUMA',
   total_supply: null,
-  type: 'ERC-721',
+  type: 'ERC-721' as const,
   icon_url: null,
 };
 
@@ -131,7 +131,7 @@ export const tokenInfoERC721LongSymbol: TokenInfo<'ERC-721'> = {
   name: 'Puma',
   symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY',
   total_supply: null,
-  type: 'ERC-721',
+  type: 'ERC-721' as const,
   icon_url: null,
 };
 
@@ -144,7 +144,7 @@ export const tokenInfoERC1155a: TokenInfo<'ERC-1155'> = {
   name: 'HyFi Membership',
   symbol: 'HYFI_MEMBERSHIP',
   total_supply: '482',
-  type: 'ERC-1155',
+  type: 'ERC-1155' as const,
   icon_url: null,
 };
 
@@ -157,7 +157,7 @@ export const tokenInfoERC1155b: TokenInfo<'ERC-1155'> = {
   name: 'WinkyVerse Collections',
   symbol: 'WVC',
   total_supply: '4943',
-  type: 'ERC-1155',
+  type: 'ERC-1155' as const,
   icon_url: null,
 };
 
@@ -170,8 +170,21 @@ export const tokenInfoERC1155WithoutName: TokenInfo<'ERC-1155'> = {
   name: null,
   symbol: null,
   total_supply: '482',
-  type: 'ERC-1155',
+  type: 'ERC-1155' as const,
+  icon_url: null,
+};
+
+export const tokenInfoERC404: TokenInfo<'ERC-404'> = {
+  address: '0xB5C457dDB4cE3312a6C5a2b056a1652bd542a208',
+  circulating_market_cap: '0.0',
+  decimals: '18',
+  exchange_rate: '1484.13',
+  holders: '81',
   icon_url: null,
+  name: 'OMNI404',
+  symbol: 'O404',
+  total_supply: '6482275000000000000',
+  type: 'ERC-404' as const,
 };
 
 export const bridgedTokenA: TokenInfo<'ERC-20'> = {
diff --git a/mocks/tokens/tokenInstance.ts b/mocks/tokens/tokenInstance.ts
index 4173c0a609..1dc1b96493 100644
--- a/mocks/tokens/tokenInstance.ts
+++ b/mocks/tokens/tokenInstance.ts
@@ -5,9 +5,9 @@ import * as addressMock from '../address/address';
 
 export const base: TokenInstance = {
   animation_url: null,
-  external_app_url: null,
+  external_app_url: 'https://duck.nft/get-your-duck-today',
   id: '32925298983216553915666621415831103694597106215670571463977478984525997408266',
-  image_url: null,
+  image_url: 'https://example.com/image.jpg',
   is_unique: false,
   holder_address_hash: null,
   metadata: {
@@ -73,6 +73,7 @@ export const base: TokenInstance = {
     name: 'GENESIS #188848, 22a5f8bbb1602995. Blockchain pixel PFP NFT + "on music video" trait inspired by God',
   },
   owner: addressMock.withName,
+  thumbnails: null,
 };
 
 export const withRichMetadata: TokenInstance = {
diff --git a/mocks/tokens/tokenTransfer.ts b/mocks/tokens/tokenTransfer.ts
index 1e0573d43e..f17da56ec4 100644
--- a/mocks/tokens/tokenTransfer.ts
+++ b/mocks/tokens/tokenTransfer.ts
@@ -1,9 +1,10 @@
+import type { TokenInfo } from 'types/api/token';
 import type { TokenTransfer, TokenTransferResponse } from 'types/api/tokenTransfer';
 
 export const erc20: TokenTransfer = {
   from: {
     hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
-    implementation_name: null,
+    implementations: null,
     is_contract: true,
     is_verified: true,
     name: 'ArianeeStore',
@@ -14,7 +15,7 @@ export const erc20: TokenTransfer = {
   },
   to: {
     hash: '0x7d20a8D54F955b4483A66aB335635ab66e151c51',
-    implementation_name: null,
+    implementations: null,
     is_contract: true,
     is_verified: false,
     name: null,
@@ -39,9 +40,10 @@ export const erc20: TokenTransfer = {
     decimals: '18',
     value: '31567373703130350',
   },
-  tx_hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193',
+  transaction_hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193',
   type: 'token_transfer',
   timestamp: '2022-10-10T14:34:30.000000Z',
+  block_number: '12345',
   block_hash: '1',
   log_index: '1',
   method: 'updateSmartAsset',
@@ -50,7 +52,7 @@ export const erc20: TokenTransfer = {
 export const erc721: TokenTransfer = {
   from: {
     hash: '0x621C2a125ec4A6D8A7C7A655A18a2868d35eb43C',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: false,
     name: null,
@@ -61,7 +63,7 @@ export const erc721: TokenTransfer = {
   },
   to: {
     hash: '0x47eE48AEBc4ab9Ed908b805b8c8dAAa71B31Db1A',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: false,
     name: null,
@@ -85,9 +87,10 @@ export const erc721: TokenTransfer = {
   total: {
     token_id: '875879856',
   },
-  tx_hash: '0xf13bc7afe5e02b494dd2f22078381d36a4800ef94a0ccc147431db56c301e6cc',
+  transaction_hash: '0xf13bc7afe5e02b494dd2f22078381d36a4800ef94a0ccc147431db56c301e6cc',
   type: 'token_transfer',
   timestamp: '2022-10-10T14:34:30.000000Z',
+  block_number: '12345',
   block_hash: '1',
   log_index: '1',
   method: 'updateSmartAsset',
@@ -96,7 +99,7 @@ export const erc721: TokenTransfer = {
 export const erc1155A: TokenTransfer = {
   from: {
     hash: '0x0000000000000000000000000000000000000000',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: false,
     name: null,
@@ -107,7 +110,7 @@ export const erc1155A: TokenTransfer = {
   },
   to: {
     hash: '0xBb36c792B9B45Aaf8b848A1392B0d6559202729E',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: false,
     name: null,
@@ -133,9 +136,10 @@ export const erc1155A: TokenTransfer = {
     value: '42',
     decimals: null,
   },
-  tx_hash: '0x05d6589367633c032d757a69c5fb16c0e33e3994b0d9d1483f82aeee1f05d746',
+  transaction_hash: '0x05d6589367633c032d757a69c5fb16c0e33e3994b0d9d1483f82aeee1f05d746',
   type: 'token_minting',
   timestamp: '2022-10-10T14:34:30.000000Z',
+  block_number: '12345',
   block_hash: '1',
   log_index: '1',
 };
@@ -143,7 +147,7 @@ export const erc1155A: TokenTransfer = {
 export const erc1155B: TokenTransfer = {
   ...erc1155A,
   token: {
-    ...erc1155A.token,
+    ...(erc1155A.token as TokenInfo<'ERC-1155'>),
     name: 'SastanaNFT',
     symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY',
   },
@@ -153,7 +157,7 @@ export const erc1155B: TokenTransfer = {
 export const erc1155C: TokenTransfer = {
   ...erc1155A,
   token: {
-    ...erc1155A.token,
+    ...(erc1155A.token as TokenInfo<'ERC-1155'>),
     name: 'SastanaNFT',
     symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY',
   },
@@ -163,13 +167,72 @@ export const erc1155C: TokenTransfer = {
 export const erc1155D: TokenTransfer = {
   ...erc1155A,
   token: {
-    ...erc1155A.token,
+    ...(erc1155A.token as TokenInfo<'ERC-1155'>),
     name: 'SastanaNFT',
     symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY',
   },
   total: { token_id: '456', value: '42', decimals: null },
 };
 
+export const erc404A: TokenTransfer = {
+  from: {
+    hash: '0x0000000000000000000000000000000000000000',
+    implementations: null,
+    is_contract: false,
+    is_verified: false,
+    name: null,
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+    ens_domain_name: null,
+  },
+  to: {
+    hash: '0xBb36c792B9B45Aaf8b848A1392B0d6559202729E',
+    implementations: null,
+    is_contract: false,
+    is_verified: false,
+    name: null,
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+    ens_domain_name: 'kitty.kitty.cat.eth',
+  },
+  token: {
+    address: '0xF56b7693E4212C584de4a83117f805B8E89224CB',
+    circulating_market_cap: null,
+    decimals: null,
+    exchange_rate: null,
+    holders: '1',
+    name: null,
+    symbol: 'MY_SYMBOL_IS_VERY_LONG',
+    type: 'ERC-404',
+    total_supply: '0',
+    icon_url: null,
+  },
+  total: {
+    value: '42000000000000000000000000',
+    decimals: '18',
+    token_id: null,
+  },
+  transaction_hash: '0x05d6589367633c032d757a69c5fb16c0e33e3994b0d9d1483f82aeee1f05d746',
+  type: 'token_transfer',
+  method: 'swap',
+  timestamp: '2022-10-10T14:34:30.000000Z',
+  block_number: '12345',
+  block_hash: '1',
+  log_index: '1',
+};
+
+export const erc404B: TokenTransfer = {
+  ...erc404A,
+  token: {
+    ...(erc404A.token as TokenInfo<'ERC-404'>),
+    name: 'SastanaNFT',
+    symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY',
+  },
+  total: { token_id: '4625304364899952' },
+};
+
 export const mixTokens: TokenTransferResponse = {
   items: [
     erc20,
@@ -178,6 +241,8 @@ export const mixTokens: TokenTransferResponse = {
     erc1155B,
     erc1155C,
     erc1155D,
+    erc404A,
+    erc404B,
   ],
   next_page_params: null,
 };
diff --git a/mocks/txs/internalTxs.ts b/mocks/txs/internalTxs.ts
index 07eb83dc5e..7917e08517 100644
--- a/mocks/txs/internalTxs.ts
+++ b/mocks/txs/internalTxs.ts
@@ -1,12 +1,12 @@
 import type { InternalTransaction, InternalTransactionsResponse } from 'types/api/internalTransaction';
 
 export const base: InternalTransaction = {
-  block: 29611822,
+  block_number: 29611822,
   created_contract: null,
   error: null,
   from: {
     hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
-    implementation_name: null,
+    implementations: null,
     is_contract: true,
     is_verified: true,
     name: 'ArianeeStore',
@@ -21,7 +21,7 @@ export const base: InternalTransaction = {
   timestamp: '2022-10-10T14:43:05.000000Z',
   to: {
     hash: '0x502a9C8af2441a1E276909405119FaE21F3dC421',
-    implementation_name: null,
+    implementations: null,
     is_contract: true,
     is_verified: true,
     name: 'ArianeeCreditHistory',
@@ -56,7 +56,7 @@ export const withContractCreated: InternalTransaction = {
   },
   created_contract: {
     hash: '0xdda21946FF3FAa027104b15BE6970CA756439F5a',
-    implementation_name: null,
+    implementations: null,
     is_contract: true,
     is_verified: null,
     name: 'Shavuha token',
diff --git a/mocks/txs/state.ts b/mocks/txs/state.ts
index 204fe1c867..d409f4679a 100644
--- a/mocks/txs/state.ts
+++ b/mocks/txs/state.ts
@@ -1,9 +1,9 @@
-import type { TxStateChange } from 'types/api/txStateChanges';
+import type { TxStateChange, TxStateChanges } from 'types/api/txStateChanges';
 
 export const mintToken: TxStateChange = {
   address: {
     hash: '0x0000000000000000000000000000000000000000',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: false,
     name: null,
@@ -35,13 +35,13 @@ export const mintToken: TxStateChange = {
     type: 'ERC-721',
     icon_url: null,
   },
-  type: 'token',
+  type: 'token' as const,
 };
 
 export const receiveMintedToken: TxStateChange = {
   address: {
     hash: '0xC8F71D0ae51AfBdB009E2eC1Ea8CC9Ee204A42B5',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: false,
     name: null,
@@ -73,13 +73,13 @@ export const receiveMintedToken: TxStateChange = {
     type: 'ERC-721',
     icon_url: null,
   },
-  type: 'token',
+  type: 'token' as const,
 };
 
 export const transfer1155Token: TxStateChange = {
   address: {
     hash: '0x51243E83Db20F8FC2761D894067A2A9eb7B158DE',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: false,
     name: null,
@@ -105,13 +105,13 @@ export const transfer1155Token: TxStateChange = {
     type: 'ERC-1155',
   },
   token_id: '1',
-  type: 'token',
+  type: 'token' as const,
 };
 
 export const receiveCoin: TxStateChange = {
   address: {
     hash: '0x8dC847Af872947Ac18d5d63fA646EB65d4D99560',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: null,
     name: null,
@@ -125,13 +125,13 @@ export const receiveCoin: TxStateChange = {
   change: '29726406604060',
   is_miner: true,
   token: null,
-  type: 'coin',
+  type: 'coin' as const,
 };
 
 export const sendCoin: TxStateChange = {
   address: {
     hash: '0xC8F71D0ae51AfBdB009E2eC1Ea8CC9Ee204A42B5',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: null,
     name: null,
@@ -145,13 +145,14 @@ export const sendCoin: TxStateChange = {
   change: '-3844844822720562',
   is_miner: false,
   token: null,
-  type: 'coin',
+  type: 'coin' as const,
 };
 
-export const sendERC20Token = {
+export const sendERC20Token: TxStateChange = {
   address: {
     hash: '0x7f6479df95Aa3036a3BE02DB6300ea201ABd9981',
-    implementation_name: null,
+    ens_domain_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: false,
     name: null,
@@ -173,13 +174,12 @@ export const sendERC20Token = {
     name: 'Tether USD',
     symbol: 'USDT',
     total_supply: '39030615894320966',
-    type: 'ERC-20',
-    token_id: null,
+    type: 'ERC-20' as const,
   },
-  type: 'token',
+  type: 'token' as const,
 };
 
-export const baseResponse = {
+export const baseResponse: TxStateChanges = {
   items: [
     mintToken,
     receiveMintedToken,
diff --git a/mocks/txs/stats.ts b/mocks/txs/stats.ts
new file mode 100644
index 0000000000..7b05dc975a
--- /dev/null
+++ b/mocks/txs/stats.ts
@@ -0,0 +1,8 @@
+import type { TransactionsStats } from 'types/api/transaction';
+
+export const base: TransactionsStats = {
+  pending_transactions_count: '4200',
+  transaction_fees_avg_24h: '22342870314428',
+  transaction_fees_sum_24h: '22184012506492688277',
+  transactions_count_24h: '992890',
+};
diff --git a/mocks/txs/tx.ts b/mocks/txs/tx.ts
index 3ca7876b99..92bd43ed9b 100644
--- a/mocks/txs/tx.ts
+++ b/mocks/txs/tx.ts
@@ -1,13 +1,14 @@
 /* eslint-disable max-len */
 import type { Transaction } from 'types/api/transaction';
 
+import * as addressMock from 'mocks/address/address';
 import { publicTag, privateTag, watchlistName } from 'mocks/address/tag';
 import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
 import * as decodedInputDataMock from 'mocks/txs/decodedInputData';
 
 export const base: Transaction = {
   base_fee_per_gas: '10000000000',
-  block: 29611750,
+  block_number: 29611750,
   confirmation_duration: [
     0,
     6364,
@@ -22,7 +23,7 @@ export const base: Transaction = {
   },
   from: {
     hash: '0x047A81aFB05D9B1f8844bf60fcA05DCCFbC584B9',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     name: null,
     is_verified: null,
@@ -47,8 +48,8 @@ export const base: Transaction = {
   status: 'ok',
   timestamp: '2022-10-10T14:34:30.000000Z',
   to: {
-    hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
-    implementation_name: null,
+    hash: addressMock.hash,
+    implementations: null,
     is_contract: false,
     is_verified: true,
     name: null,
@@ -60,14 +61,14 @@ export const base: Transaction = {
   token_transfers: [],
   token_transfers_overflow: false,
   tx_burnt_fee: '461030000000000',
-  tx_tag: null,
-  tx_types: [
+  transaction_tag: null,
+  transaction_types: [
     'contract_call',
   ],
   type: 2,
   value: '42000000000000000000',
   actions: [],
-  has_error_in_internal_txs: false,
+  has_error_in_internal_transactions: false,
 };
 
 export const withWatchListNames: Transaction = {
@@ -92,7 +93,7 @@ export const withContractCreation: Transaction = {
   to: null,
   created_contract: {
     hash: '0xdda21946FF3FAa027104b15BE6970CA756439F5a',
-    implementation_name: null,
+    implementations: null,
     is_contract: true,
     is_verified: null,
     name: 'Shavuha token',
@@ -101,7 +102,7 @@ export const withContractCreation: Transaction = {
     watchlist_names: [],
     ens_domain_name: null,
   },
-  tx_types: [
+  transaction_types: [
     'contract_creation',
   ],
 };
@@ -110,8 +111,8 @@ export const withTokenTransfer: Transaction = {
   ...base,
   hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3196',
   to: {
-    hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
-    implementation_name: null,
+    hash: addressMock.hash,
+    implementations: null,
     is_contract: true,
     is_verified: true,
     name: 'ArianeeStore',
@@ -127,9 +128,11 @@ export const withTokenTransfer: Transaction = {
     tokenTransferMock.erc1155B,
     tokenTransferMock.erc1155C,
     tokenTransferMock.erc1155D,
+    tokenTransferMock.erc404A,
+    tokenTransferMock.erc404B,
   ],
   token_transfers_overflow: true,
-  tx_types: [
+  transaction_types: [
     'token_transfer',
   ],
 };
@@ -164,8 +167,8 @@ export const withRawRevertReason: Transaction = {
     raw: '4f6e6c79206368616972706572736f6e2063616e206769766520726967687420746f20766f74652e',
   },
   to: {
-    hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
-    implementation_name: null,
+    hash: addressMock.hash,
+    implementations: null,
     is_verified: true,
     is_contract: true,
     name: 'Bad guy',
@@ -179,7 +182,7 @@ export const withRawRevertReason: Transaction = {
 export const pending: Transaction = {
   ...base,
   base_fee_per_gas: null,
-  block: null,
+  block_number: null,
   confirmation_duration: [],
   confirmations: 0,
   decoded_input: null,
@@ -194,7 +197,7 @@ export const pending: Transaction = {
   status: null,
   timestamp: null,
   tx_burnt_fee: null,
-  tx_tag: null,
+  transaction_tag: null,
   type: null,
   value: '0',
 };
@@ -281,7 +284,7 @@ export const stabilityTx: Transaction = {
   stability_fee: {
     dapp_address: {
       hash: '0xDc2B93f3291030F3F7a6D9363ac37757f7AD5C43',
-      implementation_name: null,
+      implementations: null,
       is_contract: false,
       is_verified: null,
       name: null,
@@ -297,7 +300,7 @@ export const stabilityTx: Transaction = {
       decimals: '18',
       exchange_rate: '123.567',
       holders: '92',
-      icon_url: null,
+      icon_url: 'https://example.com/icon.png',
       name: 'Stability Gas',
       symbol: 'GAS',
       total_supply: '10000000000000000000000000',
@@ -306,7 +309,7 @@ export const stabilityTx: Transaction = {
     total_fee: '68762500000000',
     validator_address: {
       hash: '0x1432997a4058acbBe562F3c1E79738c142039044',
-      implementation_name: null,
+      implementations: null,
       is_contract: false,
       is_verified: null,
       name: null,
@@ -319,12 +322,57 @@ export const stabilityTx: Transaction = {
   },
 };
 
+export const celoTxn: Transaction = {
+  ...base,
+  celo: {
+    gas_token: {
+      address: '0x874069Fa1Eb16D44d622F2e0Ca25eeA172369bC1',
+      circulating_market_cap: null,
+      decimals: '18',
+      exchange_rate: '0.42',
+      holders: '205738',
+      icon_url: 'https://example.com/icon.png',
+      name: 'Celo Dollar',
+      symbol: 'cUSD',
+      total_supply: '7145754483836626799435133',
+      type: 'ERC-20',
+    },
+  },
+};
+
+export const arbitrumTxn: Transaction = {
+  ...base,
+  arbitrum: {
+    batch_number: 743991,
+    commitment_transaction: {
+      hash: '0x71a25e01dde129a308704de217d200ea42e0f5b8c221c8ba8b2b680ff347f708',
+      status: 'unfinalized',
+      timestamp: '2024-11-19T14:26:23.000000Z',
+    },
+    confirmation_transaction: {
+      hash: null,
+      status: null,
+      timestamp: null,
+    },
+    contains_message: null,
+    gas_used_for_l1: '129773',
+    gas_used_for_l2: '128313',
+    message_related_info: {
+      associated_l1_transaction: null,
+      message_status: 'Relayed',
+    },
+    network_fee: '1283130000000',
+    poster_fee: '1297730000000',
+    status: 'Sent to base',
+  },
+};
+
 export const base2 = {
   ...base,
   hash: '0x02d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193',
   from: {
     ...base.from,
-    hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
+    hash: addressMock.hash,
   },
 };
 
@@ -333,7 +381,7 @@ export const base3 = {
   hash: '0x12d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193',
   from: {
     ...base.from,
-    hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
+    hash: addressMock.hash,
   },
 };
 
@@ -341,3 +389,37 @@ export const base4 = {
   ...base,
   hash: '0x22d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193',
 };
+
+export const withBlob = {
+  ...base,
+  blob_gas_price: '21518435987',
+  blob_gas_used: '131072',
+  blob_versioned_hashes: [
+    '0x01a8c328b0370068aaaef49c107f70901cd79adcda81e3599a88855532122e09',
+    '0x0197fdb17195c176b23160f335daabd4b6a231aaaadd73ec567877c66a3affd1',
+  ],
+  burnt_blob_fee: '2820464441688064',
+  max_fee_per_blob_gas: '60000000000',
+  transaction_types: [ 'blob_transaction' as const ],
+  type: 3,
+};
+
+export const withRecipientName = {
+  ...base,
+  to: addressMock.withName,
+};
+
+export const withRecipientEns = {
+  ...base,
+  to: addressMock.withEns,
+};
+
+export const withRecipientNameTag = {
+  ...withRecipientEns,
+  to: addressMock.withNameTag,
+};
+
+export const withRecipientContract = {
+  ...withRecipientEns,
+  to: addressMock.contract,
+};
diff --git a/mocks/txs/txInterpretation.ts b/mocks/txs/txInterpretation.ts
index e9c1a43b85..764d697a6b 100644
--- a/mocks/txs/txInterpretation.ts
+++ b/mocks/txs/txInterpretation.ts
@@ -1,5 +1,7 @@
 import type { TxInterpretationResponse } from 'types/api/txInterpretation';
 
+import { hash } from 'mocks/address/address';
+
 export const txInterpretation: TxInterpretationResponse = {
   data: {
     summaries: [ {
@@ -25,8 +27,8 @@ export const txInterpretation: TxInterpretationResponse = {
         to_address: {
           type: 'address',
           value: {
-            hash: '0x48c04ed5691981C42154C6167398f95e8f38a7fF',
-            implementation_name: null,
+            hash: hash,
+            implementations: null,
             is_contract: false,
             is_verified: false,
             name: null,
diff --git a/mocks/user/profile.ts b/mocks/user/profile.ts
index e5caed3b63..7794447c25 100644
--- a/mocks/user/profile.ts
+++ b/mocks/user/profile.ts
@@ -1,6 +1,25 @@
-export const base = {
+import type { UserInfo } from 'types/api/account';
+
+export const base: UserInfo = {
   avatar: 'https://avatars.githubusercontent.com/u/22130104',
   email: 'tom@ohhhh.me',
   name: 'tom goriunov',
   nickname: 'tom2drum',
+  address_hash: null,
+};
+
+export const withoutEmail: UserInfo = {
+  avatar: 'https://avatars.githubusercontent.com/u/22130104',
+  email: null,
+  name: 'tom goriunov',
+  nickname: 'tom2drum',
+  address_hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
+};
+
+export const withEmailAndWallet: UserInfo = {
+  avatar: 'https://avatars.githubusercontent.com/u/22130104',
+  email: 'tom@ohhhh.me',
+  name: 'tom goriunov',
+  nickname: 'tom2drum',
+  address_hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
 };
diff --git a/mocks/userOps/userOp.ts b/mocks/userOps/userOp.ts
index efb7517187..d1508aad6c 100644
--- a/mocks/userOps/userOp.ts
+++ b/mocks/userOps/userOp.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import type { UserOp } from 'types/api/userOps';
 
 export const userOpData: UserOp = {
@@ -24,7 +25,7 @@ export const userOpData: UserOp = {
   sender: {
     ens_domain_name: null,
     hash: '0xF0C14FF4404b188fAA39a3507B388998c10FE284',
-    implementation_name: null,
+    implementations: null,
     is_contract: true,
     is_verified: null,
     name: null,
@@ -33,21 +34,20 @@ export const userOpData: UserOp = {
   entry_point: {
     ens_domain_name: null,
     hash: '0x5FF137D4b0FDCD49DcA30c7CF57E578a026d2789',
-    implementation_name: null,
+    implementations: null,
     is_contract: true,
     is_verified: null,
     name: null,
   },
   sponsor_type: 'paymaster_sponsor',
   raw: {
-    // eslint-disable-next-line max-len
+
     call_data: '0xb61d27f600000000000000000000000059f6aa952df7f048fd076e33e0ea8bb552d5ffd8000000000000000000000000000000000000000000000000003f3d017500800000000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000000',
     call_gas_limit: '26624',
     init_code: '0x',
     max_fee_per_gas: '1575000898',
     max_priority_fee_per_gas: '1575000898',
     nonce: '79',
-    // eslint-disable-next-line max-len
     paymaster_and_data: '0x7cea357b5ac0639f89f9e378a1f03aa5005c0a250000000000000000000000000000000000000000000000000000000065b3a8800000000000000000000000000000000000000000000000000000000065aa6e0028fa4c57ac1141bc9ecd8c9243f618ade8ea1db10ab6c1d1798a222a824764ff2269a72ae7a3680fa8b03a80d8a00cdc710eaf37afdcc55f8c9c4defa3fdf2471b',
     pre_verification_gas: '48396',
     sender: '0xF0C14FF4404b188fAA39a3507B388998c10FE284',
@@ -59,17 +59,43 @@ export const userOpData: UserOp = {
   bundler: {
     ens_domain_name: null,
     hash: '0xd53Eb5203e367BbDD4f72338938224881Fc501Ab',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: null,
     name: null,
   },
-  // eslint-disable-next-line max-len
   call_data: '0xb61d27f600000000000000000000000059f6aa952df7f048fd076e33e0ea8bb552d5ffd8000000000000000000000000000000000000000000000000003f3d017500800000000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000000',
+  execute_call_data: '0x3cf80e6c',
+  decoded_call_data: {
+    method_call: 'execute(address dest, uint256 value, bytes func)',
+    method_id: 'b61d27f6',
+    parameters: [
+      {
+        name: 'dest',
+        type: 'address',
+        value: '0xb0ccffd05f5a87c4c3ceffaa217900422a249915',
+      },
+      {
+        name: 'value',
+        type: 'uint256',
+        value: '0',
+      },
+      {
+        name: 'func',
+        type: 'bytes',
+        value: '0x3cf80e6c',
+      },
+    ],
+  },
+  decoded_execute_call_data: {
+    method_call: 'advanceEpoch()',
+    method_id: '3cf80e6c',
+    parameters: [],
+  },
   paymaster: {
     ens_domain_name: null,
     hash: '0x7ceA357B5AC0639F89F9e378a1f03Aa5005C0a25',
-    implementation_name: null,
+    implementations: null,
     is_contract: true,
     is_verified: null,
     name: null,
diff --git a/mocks/userOps/userOps.ts b/mocks/userOps/userOps.ts
index a58ff6ed74..9a44e62594 100644
--- a/mocks/userOps/userOps.ts
+++ b/mocks/userOps/userOps.ts
@@ -6,7 +6,7 @@ export const userOpsData: UserOpsResponse = {
       address: {
         ens_domain_name: null,
         hash: '0xF0C14FF4404b188fAA39a3507B388998c10FE284',
-        implementation_name: null,
+        implementations: null,
         is_contract: true,
         is_verified: null,
         name: null,
@@ -22,7 +22,7 @@ export const userOpsData: UserOpsResponse = {
       address:
         { ens_domain_name: null,
           hash: '0x2c298CcaFFD1549e1C21F46966A6c236fCC66dB2',
-          implementation_name: null,
+          implementations: null,
           is_contract: true,
           is_verified: null,
           name: null,
@@ -38,7 +38,7 @@ export const userOpsData: UserOpsResponse = {
       address: {
         ens_domain_name: null,
         hash: '0x2c298CcaFFD1549e1C21F46966A6c236fCC66dB2',
-        implementation_name: null,
+        implementations: null,
         is_contract: true,
         is_verified: null,
         name: null,
diff --git a/mocks/validators/blackfort.ts b/mocks/validators/blackfort.ts
new file mode 100644
index 0000000000..6a5232a321
--- /dev/null
+++ b/mocks/validators/blackfort.ts
@@ -0,0 +1,41 @@
+import type {
+  ValidatorBlackfort,
+  ValidatorsBlackfortCountersResponse,
+  ValidatorsBlackfortResponse,
+} from 'types/api/validators';
+
+import * as addressMock from '../address/address';
+
+export const validator1: ValidatorBlackfort = {
+  address: addressMock.withName,
+  name: 'testnet-3',
+  commission: 10,
+  delegated_amount: '0',
+  self_bonded_amount: '10000',
+};
+
+export const validator2: ValidatorBlackfort = {
+  address: addressMock.withEns,
+  name: 'GooseGanG GooseGanG GooseGanG GooseGanG GooseGanG GooseGanG GooseGanG',
+  commission: 5000,
+  delegated_amount: '10000',
+  self_bonded_amount: '100',
+};
+
+export const validator3: ValidatorBlackfort = {
+  address: addressMock.withoutName,
+  name: 'testnet-1',
+  commission: 0,
+  delegated_amount: '0',
+  self_bonded_amount: '10000',
+};
+
+export const validatorsResponse: ValidatorsBlackfortResponse = {
+  items: [ validator1, validator2, validator3 ],
+  next_page_params: null,
+};
+
+export const validatorsCountersResponse: ValidatorsBlackfortCountersResponse = {
+  new_validators_counter_24h: '11',
+  validators_counter: '140',
+};
diff --git a/mocks/validators/stability.ts b/mocks/validators/stability.ts
new file mode 100644
index 0000000000..a85f596674
--- /dev/null
+++ b/mocks/validators/stability.ts
@@ -0,0 +1,37 @@
+import type {
+  ValidatorStability,
+  ValidatorsStabilityCountersResponse,
+  ValidatorsStabilityResponse,
+} from 'types/api/validators';
+
+import * as addressMock from '../address/address';
+
+export const validator1: ValidatorStability = {
+  address: addressMock.withName,
+  blocks_validated_count: 7334224,
+  state: 'active',
+};
+
+export const validator2: ValidatorStability = {
+  address: addressMock.withEns,
+  blocks_validated_count: 8937453,
+  state: 'probation',
+};
+
+export const validator3: ValidatorStability = {
+  address: addressMock.withoutName,
+  blocks_validated_count: 1234,
+  state: 'inactive',
+};
+
+export const validatorsResponse: ValidatorsStabilityResponse = {
+  items: [ validator1, validator2, validator3 ],
+  next_page_params: null,
+};
+
+export const validatorsCountersResponse: ValidatorsStabilityCountersResponse = {
+  active_validators_counter: '42',
+  active_validators_percentage: 7.14,
+  new_validators_counter_24h: '11',
+  validators_counter: '140',
+};
diff --git a/mocks/withdrawals/withdrawals.ts b/mocks/withdrawals/withdrawals.ts
index 37d1da51e1..97742fe3d6 100644
--- a/mocks/withdrawals/withdrawals.ts
+++ b/mocks/withdrawals/withdrawals.ts
@@ -1,4 +1,7 @@
-export const data = {
+import type { AddressParam } from 'types/api/addressParams';
+import type { WithdrawalsResponse } from 'types/api/withdrawals';
+
+export const data: WithdrawalsResponse = {
   items: [
     {
       amount: '192175000000000',
@@ -6,11 +9,11 @@ export const data = {
       index: 11688,
       receiver: {
         hash: '0xf97e180c050e5Ab072211Ad2C213Eb5AEE4DF134',
-        implementation_name: null,
+        implementations: null,
         is_contract: false,
         is_verified: null,
         name: null,
-      },
+      } as AddressParam,
       timestamp: '2022-06-07T18:12:24.000000Z',
       validator_index: 49622,
     },
@@ -20,11 +23,11 @@ export const data = {
       index: 11687,
       receiver: {
         hash: '0xf97e987c050e5Ab072211Ad2C213Eb5AEE4DF134',
-        implementation_name: null,
+        implementations: null,
         is_contract: false,
         is_verified: null,
         name: null,
-      },
+      } as AddressParam,
       timestamp: '2022-05-07T18:12:24.000000Z',
       validator_index: 49621,
     },
@@ -34,11 +37,11 @@ export const data = {
       index: 11686,
       receiver: {
         hash: '0xf97e123c050e5Ab072211Ad2C213Eb5AEE4DF134',
-        implementation_name: null,
+        implementations: null,
         is_contract: false,
         is_verified: null,
         name: null,
-      },
+      } as AddressParam,
       timestamp: '2022-04-07T18:12:24.000000Z',
       validator_index: 49620,
     },
diff --git a/mocks/zkEvm/deposits.ts b/mocks/zkEvm/deposits.ts
new file mode 100644
index 0000000000..91ecc077c3
--- /dev/null
+++ b/mocks/zkEvm/deposits.ts
@@ -0,0 +1,28 @@
+import type { ZkEvmL2DepositsResponse } from 'types/api/zkEvmL2';
+
+export const baseResponse: ZkEvmL2DepositsResponse = {
+  items: [
+    {
+      block_number: 19681943,
+      index: 182177,
+      l1_transaction_hash: '0x29074452f976064aca1ca5c6e7c82d890c10454280693e6eca0257ae000c8e85',
+      l2_transaction_hash: null,
+      symbol: 'DAI',
+      timestamp: '2022-04-18T11:08:11.000000Z',
+      value: '0.003',
+    },
+    {
+      block_number: 19681894,
+      index: 182176,
+      l1_transaction_hash: '0x0b7d58c0a6b4695ba28d99df928591fb931c812c0aab6d0093ff5040d2f9bc5e',
+      l2_transaction_hash: '0x210d9f70f411de1079e32a98473b04345a5ea6ff2340a8511ebc2df641274436',
+      symbol: 'ETH',
+      timestamp: '2022-04-18T10:58:23.000000Z',
+      value: '0.0046651390188845',
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    index: 1,
+  },
+};
diff --git a/mocks/zkEvm/txnBatches.ts b/mocks/zkEvm/txnBatches.ts
new file mode 100644
index 0000000000..194148c16b
--- /dev/null
+++ b/mocks/zkEvm/txnBatches.ts
@@ -0,0 +1,40 @@
+import type { ZkEvmL2TxnBatch, ZkEvmL2TxnBatchesResponse } from 'types/api/zkEvmL2';
+
+export const txnBatchData: ZkEvmL2TxnBatch = {
+  acc_input_hash: '0x4bf88aabe33713b7817266d7860912c58272d808da7397cdc627ca53b296fad3',
+  global_exit_root: '0xad3228b676f7d3cd4284a5443f17f1962b36e491b30a40b2405849e597ba5fb5',
+  number: 5,
+  sequence_transaction_hash: '0x7ae010e9758441b302db10282807358af460f38c49c618d26a897592f64977f7',
+  state_root: '0x183b4a38a4a6027947ceb93b323cc94c548c8c05cf605d73ca88351d77cae1a3',
+  status: 'Finalized',
+  timestamp: '2023-10-20T10:08:18.000000Z',
+  transactions: [
+    '0xb5d432c270057c223b973f3b5f00dbad32823d9ef26f3e8d97c819c7c573453a',
+  ],
+  verify_transaction_hash: '0x6f7eeaa0eb966e63d127bba6bf8f9046d303c2a1185b542f0b5083f682a0e87f',
+};
+
+export const txnBatchesData: ZkEvmL2TxnBatchesResponse = {
+  items: [
+    {
+      timestamp: '2023-06-01T14:46:48.000000Z',
+      status: 'Finalized',
+      verify_transaction_hash: '0x48139721f792d3a68c3781b4cf50e66e8fc7dbb38adff778e09066ea5be9adb8',
+      sequence_transaction_hash: '0x6aa081e8e33a085e4ec7124fcd8a5f7d36aac0828f176e80d4b70e313a11695b',
+      number: 5218590,
+      transaction_count: 9,
+    },
+    {
+      timestamp: '2023-06-01T14:46:48.000000Z',
+      status: 'Unfinalized',
+      verify_transaction_hash: null,
+      sequence_transaction_hash: null,
+      number: 5218591,
+      transaction_count: 9,
+    },
+  ],
+  next_page_params: {
+    number: 5902834,
+    items_count: 50,
+  },
+};
diff --git a/mocks/zkEvm/withdrawals.ts b/mocks/zkEvm/withdrawals.ts
new file mode 100644
index 0000000000..c89635f4e5
--- /dev/null
+++ b/mocks/zkEvm/withdrawals.ts
@@ -0,0 +1,28 @@
+import type { ZkEvmL2WithdrawalsResponse } from 'types/api/zkEvmL2';
+
+export const baseResponse: ZkEvmL2WithdrawalsResponse = {
+  items: [
+    {
+      block_number: 11722417,
+      index: 47040,
+      l1_transaction_hash: null,
+      l2_transaction_hash: '0x68c378e412e51553524545ef1d3f00f69496fb37827c0b3b7e0870d245970408',
+      symbol: 'ETH',
+      timestamp: '2022-04-18T09:20:37.000000Z',
+      value: '0.025',
+    },
+    {
+      block_number: 11722480,
+      index: 47041,
+      l1_transaction_hash: '0xbf76feb85b8b8f24dacb17f962dd359f82efc512928d7b11ffca92fb812ad6a5',
+      l2_transaction_hash: '0xfe3c168ac1751b8399f1e819f1d83ee4cf764128bc604d454abee29114dabf49',
+      symbol: 'ETH',
+      timestamp: '2022-04-18T09:23:45.000000Z',
+      value: '4',
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    index: 1,
+  },
+};
diff --git a/mocks/zkSync/zkSyncTxnBatch.ts b/mocks/zkSync/zkSyncTxnBatch.ts
new file mode 100644
index 0000000000..79c5e28b39
--- /dev/null
+++ b/mocks/zkSync/zkSyncTxnBatch.ts
@@ -0,0 +1,20 @@
+import type { ZkSyncBatch } from 'types/api/zkSyncL2';
+
+export const base: ZkSyncBatch = {
+  commit_transaction_hash: '0x7cd80c88977c2b310f79196b0b2136da18012be015ce80d0d9e9fe6cfad52b16',
+  commit_transaction_timestamp: '2022-03-19T09:37:38.726996Z',
+  end_block: 1245490,
+  execute_transaction_hash: '0x110b9a19afbabd5818a996ab2b493a9b23c888d73d95f1ab5272dbae503e103a',
+  execute_transaction_timestamp: '2022-03-19T10:29:05.358066Z',
+  l1_gas_price: '4173068062',
+  l1_transaction_count: 0,
+  l2_fair_gas_price: '100000000',
+  l2_transaction_count: 287,
+  number: 8051,
+  prove_transaction_hash: '0xb424162ba5afe17c710dceb5fc8d15d7d46a66223454dae8c74aa39f6802625b',
+  prove_transaction_timestamp: '2022-03-19T10:29:05.279179Z',
+  root_hash: '0x108c635b94f941fcabcb85500daec2f6be4f0747dff649b1cdd9dd7a7a264792',
+  start_block: 1245209,
+  status: 'Executed on L1',
+  timestamp: '2022-03-19T09:05:49.000000Z',
+};
diff --git a/mocks/zkSync/zkSyncTxnBatches.ts b/mocks/zkSync/zkSyncTxnBatches.ts
new file mode 100644
index 0000000000..9bd3188eca
--- /dev/null
+++ b/mocks/zkSync/zkSyncTxnBatches.ts
@@ -0,0 +1,49 @@
+import type { ZkSyncBatchesItem, ZkSyncBatchesResponse } from 'types/api/zkSyncL2';
+
+export const sealed: ZkSyncBatchesItem = {
+  commit_transaction_hash: null,
+  commit_transaction_timestamp: null,
+  execute_transaction_hash: null,
+  execute_transaction_timestamp: null,
+  number: 8055,
+  prove_transaction_hash: null,
+  prove_transaction_timestamp: null,
+  status: 'Sealed on L2',
+  timestamp: '2022-03-19T12:53:36.000000Z',
+  transaction_count: 738,
+};
+
+export const sent: ZkSyncBatchesItem = {
+  commit_transaction_hash: '0x262e7215739d6a7e33b2c20b45a838801a0f5f080f20bec8e54eb078420c4661',
+  commit_transaction_timestamp: '2022-03-19T13:09:07.357570Z',
+  execute_transaction_hash: null,
+  execute_transaction_timestamp: null,
+  number: 8054,
+  prove_transaction_hash: null,
+  prove_transaction_timestamp: null,
+  status: 'Sent to L1',
+  timestamp: '2022-03-19T11:36:45.000000Z',
+  transaction_count: 766,
+};
+
+export const executed: ZkSyncBatchesItem = {
+  commit_transaction_hash: '0xa2628f477e1027ac1c60fa75c186b914647769ac1cb9c7e1cab50b13506a0035',
+  commit_transaction_timestamp: '2022-03-19T11:52:18.963659Z',
+  execute_transaction_hash: '0xb7bd6b2b17498c66d3f6e31ac3685133a81b7f728d4f6a6f42741daa257d0d68',
+  execute_transaction_timestamp: '2022-03-19T13:28:16.712656Z',
+  number: 8053,
+  prove_transaction_hash: '0x9d44f2b775bd771f8a53205755b3897929aa672d2cd419b3b988c16d41d4f21e',
+  prove_transaction_timestamp: '2022-03-19T13:28:16.603104Z',
+  status: 'Executed on L1',
+  timestamp: '2022-03-19T10:01:52.000000Z',
+  transaction_count: 1071,
+};
+
+export const baseResponse: ZkSyncBatchesResponse = {
+  items: [
+    sealed,
+    sent,
+    executed,
+  ],
+  next_page_params: null,
+};
diff --git a/mocks/zkevmL2txnBatches/zkevmL2txnBatch.ts b/mocks/zkevmL2txnBatches/zkevmL2txnBatch.ts
deleted file mode 100644
index 172481ce60..0000000000
--- a/mocks/zkevmL2txnBatches/zkevmL2txnBatch.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { ZkEvmL2TxnBatch } from 'types/api/zkEvmL2TxnBatches';
-
-export const txnBatchData: ZkEvmL2TxnBatch = {
-  acc_input_hash: '0x4bf88aabe33713b7817266d7860912c58272d808da7397cdc627ca53b296fad3',
-  global_exit_root: '0xad3228b676f7d3cd4284a5443f17f1962b36e491b30a40b2405849e597ba5fb5',
-  number: 5,
-  sequence_tx_hash: '0x7ae010e9758441b302db10282807358af460f38c49c618d26a897592f64977f7',
-  state_root: '0x183b4a38a4a6027947ceb93b323cc94c548c8c05cf605d73ca88351d77cae1a3',
-  status: 'Finalized',
-  timestamp: '2023-10-20T10:08:18.000000Z',
-  transactions: [
-    '0xb5d432c270057c223b973f3b5f00dbad32823d9ef26f3e8d97c819c7c573453a',
-  ],
-  verify_tx_hash: '0x6f7eeaa0eb966e63d127bba6bf8f9046d303c2a1185b542f0b5083f682a0e87f',
-};
diff --git a/mocks/zkevmL2txnBatches/zkevmL2txnBatches.ts b/mocks/zkevmL2txnBatches/zkevmL2txnBatches.ts
deleted file mode 100644
index 5d81a72686..0000000000
--- a/mocks/zkevmL2txnBatches/zkevmL2txnBatches.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { ZkEvmL2TxnBatchesResponse } from 'types/api/zkEvmL2TxnBatches';
-
-export const txnBatchesData: ZkEvmL2TxnBatchesResponse = {
-  items: [
-    {
-      timestamp: '2023-06-01T14:46:48.000000Z',
-      status: 'Finalized',
-      verify_tx_hash: '0x48139721f792d3a68c3781b4cf50e66e8fc7dbb38adff778e09066ea5be9adb8',
-      sequence_tx_hash: '0x6aa081e8e33a085e4ec7124fcd8a5f7d36aac0828f176e80d4b70e313a11695b',
-      number: 5218590,
-      tx_count: 9,
-    },
-    {
-      timestamp: '2023-06-01T14:46:48.000000Z',
-      status: 'Unfinalized',
-      verify_tx_hash: null,
-      sequence_tx_hash: null,
-      number: 5218591,
-      tx_count: 9,
-    },
-  ],
-  next_page_params: {
-    number: 5902834,
-    items_count: 50,
-  },
-};
diff --git a/next-env.d.ts b/next-env.d.ts
index 4f11a03dc6..a4a7b3f5cf 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/next.config.js b/next.config.js
index 8789a1a641..1ac9991d07 100644
--- a/next.config.js
+++ b/next.config.js
@@ -10,6 +10,7 @@ const headers = require('./nextjs/headers');
 const redirects = require('./nextjs/redirects');
 const rewrites = require('./nextjs/rewrites');
 
+/** @type {import('next').NextConfig} */
 const moduleExports = {
   transpilePackages: [
     'react-syntax-highlighter',
@@ -17,13 +18,7 @@ const moduleExports = {
     'swagger-ui-react',
   ],
   reactStrictMode: true,
-  webpack(config, { webpack }) {
-    config.plugins.push(
-      new webpack.DefinePlugin({
-        __SENTRY_DEBUG__: false,
-        __SENTRY_TRACING__: false,
-      }),
-    );
+  webpack(config) {
     config.module.rules.push(
       {
         test: /\.svg$/,
@@ -45,7 +40,10 @@ const moduleExports = {
   output: 'standalone',
   productionBrowserSourceMaps: true,
   experimental: {
-    instrumentationHook: true,
+    staleTimes: {
+      dynamic: 30,
+      'static': 180,
+    },
   },
 };
 
diff --git a/nextjs/PageNextJs.tsx b/nextjs/PageNextJs.tsx
index 1c15c9f419..9993410d8b 100644
--- a/nextjs/PageNextJs.tsx
+++ b/nextjs/PageNextJs.tsx
@@ -2,21 +2,23 @@ import Head from 'next/head';
 import React from 'react';
 
 import type { Route } from 'nextjs-routes';
+import type { Props as PageProps } from 'nextjs/getServerSideProps';
 
+import config from 'configs/app';
 import useAdblockDetect from 'lib/hooks/useAdblockDetect';
 import useGetCsrfToken from 'lib/hooks/useGetCsrfToken';
 import * as metadata from 'lib/metadata';
 import * as mixpanel from 'lib/mixpanel';
-import { init as initSentry } from 'lib/sentry/config';
 
-type Props = Route & {
+interface Props<Pathname extends Route['pathname']> {
+  pathname: Pathname;
   children: React.ReactNode;
+  query?: PageProps<Pathname>['query'];
+  apiData?: PageProps<Pathname>['apiData'];
 }
 
-initSentry();
-
-const PageNextJs = (props: Props) => {
-  const { title, description, opengraph } = metadata.generate(props);
+const PageNextJs = <Pathname extends Route['pathname']>(props: Props<Pathname>) => {
+  const { title, description, opengraph, canonical } = metadata.generate(props, props.apiData);
 
   useGetCsrfToken();
   useAdblockDetect();
@@ -29,14 +31,20 @@ const PageNextJs = (props: Props) => {
       <Head>
         <title>{ title }</title>
         <meta name="description" content={ description }/>
+        { canonical && <link rel="canonical" href={ canonical }/> }
 
         { /* OG TAGS */ }
         <meta property="og:title" content={ opengraph.title }/>
         { opengraph.description && <meta property="og:description" content={ opengraph.description }/> }
         <meta property="og:image" content={ opengraph.imageUrl }/>
+        <meta property="og:type" content="website"/>
+
+        { /* Twitter Meta Tags */ }
         <meta name="twitter:card" content="summary_large_image"/>
+        <meta property="twitter:domain" content={ config.app.host }/>
+        <meta name="twitter:title" content={ opengraph.title }/>
+        { opengraph.description && <meta name="twitter:description" content={ opengraph.description }/> }
         <meta property="twitter:image" content={ opengraph.imageUrl }/>
-        <meta property="og:type" content="website"/>
       </Head>
       { props.children }
     </>
diff --git a/nextjs/csp/generateCspPolicy.ts b/nextjs/csp/generateCspPolicy.ts
index da84b197e5..2f82ae563a 100644
--- a/nextjs/csp/generateCspPolicy.ts
+++ b/nextjs/csp/generateCspPolicy.ts
@@ -6,14 +6,18 @@ function generateCspPolicy() {
     descriptors.app(),
     descriptors.ad(),
     descriptors.cloudFlare(),
+    descriptors.gasHawk(),
     descriptors.googleAnalytics(),
     descriptors.googleFonts(),
     descriptors.googleReCaptcha(),
     descriptors.growthBook(),
+    descriptors.helia(),
+    descriptors.marketplace(),
     descriptors.mixpanel(),
     descriptors.monaco(),
+    descriptors.rollbar(),
     descriptors.safe(),
-    descriptors.sentry(),
+    descriptors.usernameApi(),
     descriptors.walletConnect(),
     descriptors.boolNetwork(),
   );
diff --git a/nextjs/csp/policies/ad.ts b/nextjs/csp/policies/ad.ts
index 2808dfb07c..9b018aa019 100644
--- a/nextjs/csp/policies/ad.ts
+++ b/nextjs/csp/policies/ad.ts
@@ -3,30 +3,62 @@ import sha256 from 'crypto-js/sha256';
 import type CspDev from 'csp-dev';
 
 import { connectAdbutler, placeAd } from 'ui/shared/ad/adbutlerScript';
+import { hypeInit } from 'ui/shared/ad/hypeBannerScript';
 
 export function ad(): CspDev.DirectiveDescriptor {
   return {
     'connect-src': [
+      // coinzilla
       'coinzilla.com',
       '*.coinzilla.com',
       'https://request-global.czilladx.com',
+
+      // adbutler
+      'servedbyadbutler.com',
+
+      // slise
       '*.slise.xyz',
+
+      // hype
+      'api.hypelab.com',
+      '*.ixncdn.com',
+      '*.cloudfront.net',
+
+      //getit
+      'v1.getittech.io',
+      'ipapi.co',
     ],
     'frame-src': [
+      // coinzilla
       'https://request-global.czilladx.com',
     ],
     'script-src': [
+      // coinzilla
       'coinzillatag.com',
+
+      // adbutler
       'servedbyadbutler.com',
       `'sha256-${ Base64.stringify(sha256(connectAdbutler)) }'`,
-      `'sha256-${ Base64.stringify(sha256(placeAd ?? '')) }'`,
+      `'sha256-${ Base64.stringify(sha256(placeAd(undefined) ?? '')) }'`,
+      `'sha256-${ Base64.stringify(sha256(placeAd('mobile') ?? '')) }'`,
+
+      // slise
       '*.slise.xyz',
+
+      //hype
+      `'sha256-${ Base64.stringify(sha256(hypeInit ?? '')) }'`,
+      'https://api.hypelab.com',
+      'd1q98dzwj6s2rb.cloudfront.net',
     ],
     'img-src': [
-      'servedbyadbutler.com',
+      // coinzilla
       'cdn.coinzilla.io',
+
+      // adbutler
+      'servedbyadbutler.com',
     ],
     'font-src': [
+      // coinzilla
       'https://request-global.czilladx.com',
     ],
   };
diff --git a/nextjs/csp/policies/app.ts b/nextjs/csp/policies/app.ts
index c1b5355516..2ba5f68f5d 100644
--- a/nextjs/csp/policies/app.ts
+++ b/nextjs/csp/policies/app.ts
@@ -11,24 +11,17 @@ const MAIN_DOMAINS = [
   config.app.host,
 ].filter(Boolean);
 
-const getCspReportUrl = () => {
+const externalFontsDomains = (() => {
   try {
-    const sentryFeature = config.features.sentry;
-    if (!sentryFeature.isEnabled || !process.env.SENTRY_CSP_REPORT_URI) {
-      return;
-    }
-
-    const url = new URL(process.env.SENTRY_CSP_REPORT_URI);
-
-    // https://docs.sentry.io/product/security-policy-reporting/#additional-configuration
-    url.searchParams.set('sentry_environment', sentryFeature.environment);
-    sentryFeature.release && url.searchParams.set('sentry_release', sentryFeature.release);
-
-    return url.toString();
-  } catch (error) {
-    return;
-  }
-};
+    return [
+      config.UI.fonts.heading?.url,
+      config.UI.fonts.body?.url,
+    ]
+      .filter(Boolean)
+      .map((urlString) => new URL(urlString))
+      .map((url) => url.hostname);
+  } catch (error) {}
+})();
 
 export function app(): CspDev.DirectiveDescriptor {
   return {
@@ -54,6 +47,8 @@ export function app(): CspDev.DirectiveDescriptor {
       getFeaturePayload(config.features.verifiedTokens)?.api.endpoint,
       getFeaturePayload(config.features.addressVerification)?.api.endpoint,
       getFeaturePayload(config.features.nameService)?.api.endpoint,
+      getFeaturePayload(config.features.addressMetadata)?.api.endpoint,
+      getFeaturePayload(config.features.rewards)?.api.endpoint,
 
       // chain RPC server
       config.chain.rpcUrl,
@@ -61,6 +56,9 @@ export function app(): CspDev.DirectiveDescriptor {
 
       // github (spec for api-docs page)
       'raw.githubusercontent.com',
+
+      // github api (used for Stylus contract verification)
+      'api.github.com',
     ].filter(Boolean),
 
     'script-src': [
@@ -71,8 +69,12 @@ export function app(): CspDev.DirectiveDescriptor {
       // https://github.com/vercel/next.js/issues/14221#issuecomment-657258278
       config.app.isDev ? KEY_WORDS.UNSAFE_EVAL : '',
 
-      // hash of ColorModeScript
+      // hash of ColorModeScript: system + dark
       '\'sha256-e7MRMmTzLsLQvIy1iizO1lXf7VWYoQ6ysj5fuUzvRwE=\'',
+      '\'sha256-9A7qFFHmxdWjZMQmfzYD2XWaNHLu1ZmQB0Ds4Go764k=\'',
+
+      // CapybaraRunner
+      '\'sha256-5+YTmTcBwCYdJ8Jetbr6kyjGp0Ry/H7ptpoun6CrSwQ=\'',
     ],
 
     'style-src': [
@@ -108,12 +110,14 @@ export function app(): CspDev.DirectiveDescriptor {
     ],
 
     'media-src': [
+      KEY_WORDS.BLOB,
       '*', // see comment for img-src directive
     ],
 
     'font-src': [
       KEY_WORDS.DATA,
       ...MAIN_DOMAINS,
+      ...(externalFontsDomains || []),
     ],
 
     'object-src': [
@@ -129,16 +133,11 @@ export function app(): CspDev.DirectiveDescriptor {
       '*',
     ],
 
-    ...((() => {
-      if (!config.features.sentry.isEnabled) {
-        return {};
-      }
-
-      return {
-        'report-uri': [
-          getCspReportUrl(),
-        ].filter(Boolean),
-      };
-    })()),
+    'frame-ancestors': [
+      KEY_WORDS.SELF,
+
+      // allow remix.ethereum.org to embed our contract page in iframe
+      'remix.ethereum.org',
+    ],
   };
 }
diff --git a/nextjs/csp/policies/gasHawk.ts b/nextjs/csp/policies/gasHawk.ts
new file mode 100644
index 0000000000..6a1a8e624a
--- /dev/null
+++ b/nextjs/csp/policies/gasHawk.ts
@@ -0,0 +1,30 @@
+import type CspDev from 'csp-dev';
+
+import config from 'configs/app';
+
+const feature = config.features.saveOnGas;
+
+export function gasHawk(): CspDev.DirectiveDescriptor {
+  if (!feature.isEnabled) {
+    return {};
+  }
+
+  const apiOrigin = (() => {
+    try {
+      const url = new URL(feature.apiUrlTemplate);
+      return url.origin;
+    } catch (error) {
+      return '';
+    }
+  })();
+
+  if (!apiOrigin) {
+    return {};
+  }
+
+  return {
+    'connect-src': [
+      apiOrigin,
+    ],
+  };
+}
diff --git a/nextjs/csp/policies/googleReCaptcha.ts b/nextjs/csp/policies/googleReCaptcha.ts
index d759e70d59..f7d0187523 100644
--- a/nextjs/csp/policies/googleReCaptcha.ts
+++ b/nextjs/csp/policies/googleReCaptcha.ts
@@ -3,7 +3,7 @@ import type CspDev from 'csp-dev';
 import config from 'configs/app';
 
 export function googleReCaptcha(): CspDev.DirectiveDescriptor {
-  if (!config.services.reCaptcha.siteKey) {
+  if (!config.services.reCaptchaV2.siteKey) {
     return {};
   }
 
diff --git a/nextjs/csp/policies/helia.ts b/nextjs/csp/policies/helia.ts
new file mode 100644
index 0000000000..c6e925d378
--- /dev/null
+++ b/nextjs/csp/policies/helia.ts
@@ -0,0 +1,16 @@
+import type CspDev from 'csp-dev';
+
+import config from 'configs/app';
+
+export function helia(): CspDev.DirectiveDescriptor {
+  if (!config.UI.views.nft.verifiedFetch.isEnabled) {
+    return {};
+  }
+
+  return {
+    'connect-src': [
+      'https://delegated-ipfs.dev',
+      'https://trustless-gateway.link',
+    ],
+  };
+}
diff --git a/nextjs/csp/policies/index.ts b/nextjs/csp/policies/index.ts
index 8c34ccf05c..3180748a43 100644
--- a/nextjs/csp/policies/index.ts
+++ b/nextjs/csp/policies/index.ts
@@ -1,13 +1,17 @@
 export { ad } from './ad';
 export { app } from './app';
 export { cloudFlare } from './cloudFlare';
+export { gasHawk } from './gasHawk';
 export { googleAnalytics } from './googleAnalytics';
 export { googleFonts } from './googleFonts';
 export { googleReCaptcha } from './googleReCaptcha';
 export { growthBook } from './growthBook';
+export { helia } from './helia';
+export { marketplace } from './marketplace';
 export { mixpanel } from './mixpanel';
 export { monaco } from './monaco';
+export { rollbar } from './rollbar';
 export { safe } from './safe';
-export { sentry } from './sentry';
+export { usernameApi } from './usernameApi';
 export { walletConnect } from './walletConnect';
 export { boolNetwork } from './boolNetwork';
diff --git a/nextjs/csp/policies/marketplace.ts b/nextjs/csp/policies/marketplace.ts
new file mode 100644
index 0000000000..08474a4bc1
--- /dev/null
+++ b/nextjs/csp/policies/marketplace.ts
@@ -0,0 +1,22 @@
+import type CspDev from 'csp-dev';
+
+import config from 'configs/app';
+
+const feature = config.features.marketplace;
+
+export function marketplace(): CspDev.DirectiveDescriptor {
+  if (!feature.isEnabled) {
+    return {};
+  }
+
+  return {
+    'connect-src': [
+      'api' in feature ? feature.api.endpoint : '',
+      feature.rating ? 'https://api.airtable.com' : '',
+    ],
+
+    'frame-src': [
+      '*',
+    ],
+  };
+}
diff --git a/nextjs/csp/policies/monaco.ts b/nextjs/csp/policies/monaco.ts
index edf8ac5f1c..64d6086d9f 100644
--- a/nextjs/csp/policies/monaco.ts
+++ b/nextjs/csp/policies/monaco.ts
@@ -11,6 +11,13 @@ export function monaco(): CspDev.DirectiveDescriptor {
       'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/editor/editor.main.nls.js',
       'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/basic-languages/solidity/solidity.js',
       'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/basic-languages/elixir/elixir.js',
+      'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/basic-languages/javascript/javascript.js',
+      'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/basic-languages/typescript/typescript.js',
+      'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/basic-languages/rust/rust.js',
+      'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/language/json/jsonMode.js',
+      'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/language/json/jsonWorker.js',
+      'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/language/typescript/tsMode.js',
+      'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/language/typescript/tsWorker.js',
       'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/base/worker/workerMain.js',
     ],
     'style-src': [
diff --git a/nextjs/csp/policies/rollbar.ts b/nextjs/csp/policies/rollbar.ts
new file mode 100644
index 0000000000..87470735f7
--- /dev/null
+++ b/nextjs/csp/policies/rollbar.ts
@@ -0,0 +1,15 @@
+import type CspDev from 'csp-dev';
+
+import config from 'configs/app';
+
+export function rollbar(): CspDev.DirectiveDescriptor {
+  if (!config.features.rollbar.isEnabled) {
+    return {};
+  }
+
+  return {
+    'connect-src': [
+      'api.rollbar.com',
+    ],
+  };
+}
diff --git a/nextjs/csp/policies/sentry.ts b/nextjs/csp/policies/sentry.ts
deleted file mode 100644
index 298c17a63e..0000000000
--- a/nextjs/csp/policies/sentry.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type CspDev from 'csp-dev';
-
-export function sentry(): CspDev.DirectiveDescriptor {
-  return {
-    'connect-src': [
-      'sentry.io',
-      '*.sentry.io',
-    ],
-  };
-}
diff --git a/nextjs/csp/policies/usernameApi.ts b/nextjs/csp/policies/usernameApi.ts
new file mode 100644
index 0000000000..4b2c2bd912
--- /dev/null
+++ b/nextjs/csp/policies/usernameApi.ts
@@ -0,0 +1,26 @@
+import type CspDev from 'csp-dev';
+
+import config from 'configs/app';
+
+const feature = config.features.addressProfileAPI;
+
+export function usernameApi(): CspDev.DirectiveDescriptor {
+  if (!feature.isEnabled) {
+    return {};
+  }
+
+  const apiOrigin = (() => {
+    try {
+      const url = new URL(feature.apiUrlTemplate);
+      return url.origin;
+    } catch (error) {
+      return '';
+    }
+  })();
+
+  return {
+    'connect-src': [
+      apiOrigin,
+    ],
+  };
+}
diff --git a/nextjs/csp/policies/walletConnect.ts b/nextjs/csp/policies/walletConnect.ts
index 41cb948066..728c7eab4a 100644
--- a/nextjs/csp/policies/walletConnect.ts
+++ b/nextjs/csp/policies/walletConnect.ts
@@ -12,10 +12,17 @@ export function walletConnect(): CspDev.DirectiveDescriptor {
   return {
     'connect-src': [
       '*.web3modal.com',
+      '*.web3modal.org',
       '*.walletconnect.com',
+      '*.walletconnect.org',
       'wss://relay.walletconnect.com',
+      'wss://relay.walletconnect.org',
       'wss://www.walletlink.org',
     ],
+    'frame-ancestors': [
+      '*.walletconnect.org',
+      '*.walletconnect.com',
+    ],
     'img-src': [
       KEY_WORDS.BLOB,
       '*.walletconnect.com',
diff --git a/nextjs/getServerSideProps.ts b/nextjs/getServerSideProps.ts
index 5d0deebef1..3927590800 100644
--- a/nextjs/getServerSideProps.ts
+++ b/nextjs/getServerSideProps.ts
@@ -1,29 +1,48 @@
-import type { GetServerSideProps } from 'next';
+import type { GetServerSideProps, GetServerSidePropsContext, GetServerSidePropsResult } from 'next';
+
+import type { AdBannerProviders } from 'types/client/adProviders';
+import type { RollupType } from 'types/client/rollup';
+
+import type { Route } from 'nextjs-routes';
 
 import config from 'configs/app';
+const rollupFeature = config.features.rollup;
+const adBannerFeature = config.features.adsBanner;
+import isNeedProxy from 'lib/api/isNeedProxy';
+import type * as metadata from 'lib/metadata';
 
-export type Props = {
+export interface Props<Pathname extends Route['pathname'] = never> {
+  query: Route['query'];
   cookies: string;
   referrer: string;
-  id: string;
-  height_or_hash: string;
-  hash: string;
-  number: string;
-  q: string;
-  name: string;
+  adBannerProvider: AdBannerProviders | null;
+  // if apiData is undefined, Next.js will complain that it is not serializable
+  // so we force it to be always present in the props but it can be null
+  apiData: metadata.ApiData<Pathname> | null;
 }
 
-export const base: GetServerSideProps<Props> = async({ req, query }) => {
+export const base = async <Pathname extends Route['pathname'] = never>({ req, query }: GetServerSidePropsContext):
+Promise<GetServerSidePropsResult<Props<Pathname>>> => {
+  const adBannerProvider = (() => {
+    if (adBannerFeature.isEnabled) {
+      if ('additionalProvider' in adBannerFeature && adBannerFeature.additionalProvider) {
+        // we need to get a random ad provider on the server side to keep it consistent with the client side
+        const randomIndex = Math.round(Math.random());
+        return [ adBannerFeature.provider, adBannerFeature.additionalProvider ][randomIndex];
+      } else {
+        return adBannerFeature.provider;
+      }
+    }
+    return null;
+  })();
+
   return {
     props: {
+      query,
       cookies: req.headers.cookie || '',
       referrer: req.headers.referer || '',
-      id: query.id?.toString() || '',
-      hash: query.hash?.toString() || '',
-      height_or_hash: query.height_or_hash?.toString() || '',
-      number: query.number?.toString() || '',
-      q: query.q?.toString() || '',
-      name: query.name?.toString() || '',
+      adBannerProvider: adBannerProvider,
+      apiData: null,
     },
   };
 };
@@ -48,8 +67,9 @@ export const verifiedAddresses: GetServerSideProps<Props> = async(context) => {
   return account(context);
 };
 
-export const beaconChain: GetServerSideProps<Props> = async(context) => {
-  if (!config.features.beaconChain.isEnabled) {
+const DEPOSITS_ROLLUP_TYPES: Array<RollupType> = [ 'optimistic', 'shibarium', 'zkEvm', 'arbitrum', 'scroll' ];
+export const deposits: GetServerSideProps<Props> = async(context) => {
+  if (!(rollupFeature.isEnabled && DEPOSITS_ROLLUP_TYPES.includes(rollupFeature.type))) {
     return {
       notFound: true,
     };
@@ -58,8 +78,12 @@ export const beaconChain: GetServerSideProps<Props> = async(context) => {
   return base(context);
 };
 
-export const L2: GetServerSideProps<Props> = async(context) => {
-  if (!config.features.optimisticRollup.isEnabled) {
+const WITHDRAWALS_ROLLUP_TYPES: Array<RollupType> = [ 'optimistic', 'shibarium', 'zkEvm', 'arbitrum', 'scroll' ];
+export const withdrawals: GetServerSideProps<Props> = async(context) => {
+  if (
+    !config.features.beaconChain.isEnabled &&
+    !(rollupFeature.isEnabled && WITHDRAWALS_ROLLUP_TYPES.includes(rollupFeature.type))
+  ) {
     return {
       notFound: true,
     };
@@ -68,8 +92,8 @@ export const L2: GetServerSideProps<Props> = async(context) => {
   return base(context);
 };
 
-export const zkEvmL2: GetServerSideProps<Props> = async(context) => {
-  if (!config.features.zkEvmRollup.isEnabled) {
+export const rollup: GetServerSideProps<Props> = async(context) => {
+  if (!config.features.rollup.isEnabled) {
     return {
       notFound: true,
     };
@@ -78,8 +102,8 @@ export const zkEvmL2: GetServerSideProps<Props> = async(context) => {
   return base(context);
 };
 
-export const marketplace: GetServerSideProps<Props> = async(context) => {
-  if (!config.features.marketplace.isEnabled) {
+export const outputRoots: GetServerSideProps<Props> = async(context) => {
+  if (!(rollupFeature.isEnabled && rollupFeature.outputRootsEnabled)) {
     return {
       notFound: true,
     };
@@ -88,6 +112,28 @@ export const marketplace: GetServerSideProps<Props> = async(context) => {
   return base(context);
 };
 
+const BATCH_ROLLUP_TYPES: Array<RollupType> = [ 'zkEvm', 'zkSync', 'arbitrum', 'optimistic', 'scroll' ];
+export const batch: GetServerSideProps<Props> = async(context) => {
+  if (!(rollupFeature.isEnabled && BATCH_ROLLUP_TYPES.includes(rollupFeature.type))) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
+
+export const marketplace = async <Pathname extends Route['pathname'] = never>(context: GetServerSidePropsContext):
+Promise<GetServerSidePropsResult<Props<Pathname>>> => {
+  if (!config.features.marketplace.isEnabled) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base<Pathname>(context);
+};
+
 export const apiDocs: GetServerSideProps<Props> = async(context) => {
   if (!config.features.restApiDocs.isEnabled) {
     return {
@@ -98,6 +144,16 @@ export const apiDocs: GetServerSideProps<Props> = async(context) => {
   return base(context);
 };
 
+export const graphIQl: GetServerSideProps<Props> = async(context) => {
+  if (!config.features.graphqlApiDocs.isEnabled) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
+
 export const csvExport: GetServerSideProps<Props> = async(context) => {
   if (!config.features.csvExport.isEnabled) {
     return {
@@ -148,6 +204,16 @@ export const accounts: GetServerSideProps<Props> = async(context) => {
   return base(context);
 };
 
+export const accountsLabelSearch: GetServerSideProps<Props> = async(context) => {
+  if (!config.features.addressMetadata.isEnabled || !context.query.tagType) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
+
 export const userOps: GetServerSideProps<Props> = async(context) => {
   if (!config.features.userOps.isEnabled) {
     return {
@@ -157,3 +223,105 @@ export const userOps: GetServerSideProps<Props> = async(context) => {
 
   return base(context);
 };
+
+export const validators: GetServerSideProps<Props> = async(context) => {
+  if (!config.features.validators.isEnabled) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
+
+export const gasTracker: GetServerSideProps<Props> = async(context) => {
+  if (!config.features.gasTracker.isEnabled) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
+
+export const advancedFilter: GetServerSideProps<Props> = async(context) => {
+  if (!config.features.advancedFilter.isEnabled) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
+
+export const dataAvailability: GetServerSideProps<Props> = async(context) => {
+  if (!config.features.dataAvailability.isEnabled) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
+
+export const login: GetServerSideProps<Props> = async(context) => {
+
+  if (!isNeedProxy()) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
+
+export const dev: GetServerSideProps<Props> = async(context) => {
+  if (!config.app.isDev) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
+
+export const publicTagsSubmit: GetServerSideProps<Props> = async(context) => {
+
+  if (!config.features.publicTagsSubmission.isEnabled) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
+
+export const disputeGames: GetServerSideProps<Props> = async(context) => {
+  if (!config.features.faultProofSystem.isEnabled) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
+
+export const mud: GetServerSideProps<Props> = async(context) => {
+  if (!config.features.mudFramework.isEnabled) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
+
+export const pools: GetServerSideProps<Props> = async(context) => {
+  if (!config.features.pools.isEnabled) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
diff --git a/nextjs/middlewares/account.ts b/nextjs/middlewares/account.ts
index e46c5a07fe..7ab562542f 100644
--- a/nextjs/middlewares/account.ts
+++ b/nextjs/middlewares/account.ts
@@ -1,10 +1,7 @@
 import type { NextRequest } from 'next/server';
 import { NextResponse } from 'next/server';
 
-import { route } from 'nextjs-routes';
-
 import config from 'configs/app';
-import { DAY } from 'lib/consts';
 import * as cookies from 'lib/cookies';
 
 export function account(req: NextRequest) {
@@ -25,37 +22,7 @@ export function account(req: NextRequest) {
     const isProfileRoute = req.nextUrl.pathname.includes('/auth/profile');
 
     if ((isAccountRoute || isProfileRoute)) {
-      const authUrl = feature.authUrl + route({ pathname: '/auth/auth0', query: { path: req.nextUrl.pathname } });
-      return NextResponse.redirect(authUrl);
-    }
-  }
-
-  // if user hasn't confirmed email yet
-  if (req.cookies.get(cookies.NAMES.INVALID_SESSION)) {
-    // if user has both cookies, make redirect to logout
-    if (apiTokenCookie) {
-      // yes, we could have checked that the current URL is not the logout URL, but we hadn't
-      // logout URL is always external URL in auth0.com sub-domain
-      // at least we hope so
-
-      const res = NextResponse.redirect(feature.logoutUrl);
-      res.cookies.delete(cookies.NAMES.CONFIRM_EMAIL_PAGE_VIEWED); // reset cookie to show email verification page again
-
-      return res;
-    }
-
-    // if user hasn't seen email verification page, make redirect to it
-    if (!req.cookies.get(cookies.NAMES.CONFIRM_EMAIL_PAGE_VIEWED)) {
-      if (!req.nextUrl.pathname.includes('/auth/unverified-email')) {
-        const url = config.app.baseUrl + route({ pathname: '/auth/unverified-email' });
-        const res = NextResponse.redirect(url);
-        res.cookies.set({
-          name: cookies.NAMES.CONFIRM_EMAIL_PAGE_VIEWED,
-          value: 'true',
-          expires: Date.now() + 7 * DAY,
-        });
-        return res;
-      }
+      return NextResponse.redirect(config.app.baseUrl);
     }
   }
 }
diff --git a/nextjs/middlewares/addressFormat.ts b/nextjs/middlewares/addressFormat.ts
new file mode 100644
index 0000000000..bfd8bf14e0
--- /dev/null
+++ b/nextjs/middlewares/addressFormat.ts
@@ -0,0 +1,20 @@
+import type { NextRequest, NextResponse } from 'next/server';
+
+import type { AddressFormat } from 'types/views/address';
+
+import config from 'configs/app';
+import * as cookiesLib from 'lib/cookies';
+
+export default function addressFormatMiddleware(req: NextRequest, res: NextResponse) {
+  const addressFormatCookie = req.cookies.get(cookiesLib.NAMES.ADDRESS_FORMAT);
+  const defaultFormat = config.UI.views.address.hashFormat.availableFormats[0];
+
+  if (addressFormatCookie) {
+    const isValidCookie = config.UI.views.address.hashFormat.availableFormats.includes(addressFormatCookie.value as AddressFormat);
+    if (!isValidCookie) {
+      res.cookies.set(cookiesLib.NAMES.ADDRESS_FORMAT, defaultFormat, { path: '/' });
+    }
+  } else {
+    res.cookies.set(cookiesLib.NAMES.ADDRESS_FORMAT, defaultFormat, { path: '/' });
+  }
+}
diff --git a/nextjs/middlewares/colorTheme.ts b/nextjs/middlewares/colorTheme.ts
new file mode 100644
index 0000000000..dcb8314cae
--- /dev/null
+++ b/nextjs/middlewares/colorTheme.ts
@@ -0,0 +1,15 @@
+import type { NextRequest, NextResponse } from 'next/server';
+
+import appConfig from 'configs/app';
+import * as cookiesLib from 'lib/cookies';
+
+export default function colorThemeMiddleware(req: NextRequest, res: NextResponse) {
+  const colorModeCookie = req.cookies.get(cookiesLib.NAMES.COLOR_MODE);
+
+  if (!colorModeCookie) {
+    if (appConfig.UI.colorTheme.default) {
+      res.cookies.set(cookiesLib.NAMES.COLOR_MODE, appConfig.UI.colorTheme.default.colorMode, { path: '/' });
+      res.cookies.set(cookiesLib.NAMES.COLOR_MODE_HEX, appConfig.UI.colorTheme.default.hex, { path: '/' });
+    }
+  }
+}
diff --git a/nextjs/middlewares/index.ts b/nextjs/middlewares/index.ts
index 1fe6fae29c..4e4fdbef4e 100644
--- a/nextjs/middlewares/index.ts
+++ b/nextjs/middlewares/index.ts
@@ -1 +1,3 @@
 export { account } from './account';
+export { default as colorTheme } from './colorTheme';
+export { default as addressFormat } from './addressFormat';
diff --git a/nextjs/nextjs-routes.d.ts b/nextjs/nextjs-routes.d.ts
index dd927fc5b5..1061648947 100644
--- a/nextjs/nextjs-routes.d.ts
+++ b/nextjs/nextjs-routes.d.ts
@@ -9,55 +9,76 @@ declare module "nextjs-routes" {
     | StaticRoute<"/404">
     | StaticRoute<"/account/api-key">
     | StaticRoute<"/account/custom-abi">
-    | StaticRoute<"/account/public-tags-request">
+    | StaticRoute<"/account/rewards">
     | StaticRoute<"/account/tag-address">
     | StaticRoute<"/account/verified-addresses">
     | StaticRoute<"/account/watchlist">
     | StaticRoute<"/accounts">
+    | DynamicRoute<"/accounts/label/[slug]", { "slug": string }>
     | DynamicRoute<"/address/[hash]/contract-verification", { "hash": string }>
     | DynamicRoute<"/address/[hash]", { "hash": string }>
+    | StaticRoute<"/advanced-filter">
+    | StaticRoute<"/api/config">
     | StaticRoute<"/api/csrf">
     | StaticRoute<"/api/healthz">
+    | StaticRoute<"/api/log">
     | StaticRoute<"/api/media-type">
+    | StaticRoute<"/api/metrics">
+    | StaticRoute<"/api/monitoring/invalid-api-schema">
     | StaticRoute<"/api/proxy">
+    | StaticRoute<"/api/sprite">
     | StaticRoute<"/api-docs">
     | DynamicRoute<"/apps/[id]", { "id": string }>
     | StaticRoute<"/apps">
-    | StaticRoute<"/auth/auth0">
     | StaticRoute<"/auth/profile">
-    | StaticRoute<"/auth/unverified-email">
+    | DynamicRoute<"/batches/[number]", { "number": string }>
+    | StaticRoute<"/batches">
+    | DynamicRoute<"/blobs/[hash]", { "hash": string }>
     | DynamicRoute<"/block/[height_or_hash]", { "height_or_hash": string }>
+    | DynamicRoute<"/block/countdown/[height]", { "height": string }>
+    | StaticRoute<"/block/countdown">
     | StaticRoute<"/blocks">
     | StaticRoute<"/contract-verification">
     | StaticRoute<"/csv-export">
+<<<<<<< HEAD
     | DynamicRoute<"/dhcs/[id]", { "id": string }>
     | StaticRoute<"/dhcs">
+=======
+    | StaticRoute<"/deposits">
+    | StaticRoute<"/dispute-games">
+    | StaticRoute<"/gas-tracker">
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739
     | StaticRoute<"/graphiql">
     | StaticRoute<"/">
-    | StaticRoute<"/l2-deposits">
-    | StaticRoute<"/l2-output-roots">
-    | StaticRoute<"/l2-txn-batches">
-    | StaticRoute<"/l2-withdrawals">
     | StaticRoute<"/login">
+    | StaticRoute<"/mud-worlds">
     | DynamicRoute<"/name-domains/[name]", { "name": string }>
     | StaticRoute<"/name-domains">
     | DynamicRoute<"/op/[hash]", { "hash": string }>
     | StaticRoute<"/ops">
+    | StaticRoute<"/output-roots">
+    | DynamicRoute<"/pools/[hash]", { "hash": string }>
+    | StaticRoute<"/pools">
+    | StaticRoute<"/public-tags/submit">
     | StaticRoute<"/search-results">
+    | StaticRoute<"/sprite">
+    | DynamicRoute<"/stats/[id]", { "id": string }>
     | StaticRoute<"/stats">
     | DynamicRoute<"/token/[hash]", { "hash": string }>
     | DynamicRoute<"/token/[hash]/instance/[id]", { "hash": string; "id": string }>
+    | StaticRoute<"/token-transfers">
     | StaticRoute<"/tokens">
     | DynamicRoute<"/tx/[hash]", { "hash": string }>
     | StaticRoute<"/txs">
     | DynamicRoute<"/txs/kettle/[hash]", { "hash": string }>
+<<<<<<< HEAD
     | DynamicRoute<"/validators/[hash]", { "hash": string }>
+=======
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739
     | StaticRoute<"/validators">
     | StaticRoute<"/verified-contracts">
     | StaticRoute<"/visualize/sol2uml">
-    | StaticRoute<"/withdrawals">
-    | DynamicRoute<"/zkevm-l2-txn-batch/[number]", { "number": string }>
-    | StaticRoute<"/zkevm-l2-txn-batches">;
+    | StaticRoute<"/withdrawals">;
 
   interface StaticRoute<Pathname> {
     pathname: Pathname;
diff --git a/nextjs/redirects.js b/nextjs/redirects.js
index 3c2ed3ba9a..a5908dc12f 100644
--- a/nextjs/redirects.js
+++ b/nextjs/redirects.js
@@ -49,16 +49,8 @@ const oldUrls = [
     destination: '/account/custom-abi',
   },
   {
-    source: '/account/public_tags_request',
-    destination: '/account/public-tags-request',
-  },
-  {
-    source: '/account/public_tags_request/:id/edit',
-    destination: '/account/public-tags-request',
-  },
-  {
-    source: '/account/public_tags_request/new',
-    destination: '/account/public-tags-request',
+    source: '/account/public-tags-request',
+    destination: '/public-tags/submit',
   },
 
   // TRANSACTIONS
@@ -242,6 +234,32 @@ const oldUrls = [
     source: '/token/:hash/write-proxy',
     destination: '/token/:hash?tab=write_proxy',
   },
+
+  // ROLLUPs
+  {
+    source: '/l2-txn-batches',
+    destination: '/batches',
+  },
+  {
+    source: '/zkevm-l2-txn-batches',
+    destination: '/batches',
+  },
+  {
+    source: '/zkevm-l2-txn-batch/:path*',
+    destination: '/batches/:path*',
+  },
+  {
+    source: '/l2-deposits',
+    destination: '/deposits',
+  },
+  {
+    source: '/l2-withdrawals',
+    destination: '/withdrawals',
+  },
+  {
+    source: '/l2-output-roots',
+    destination: '/output-roots',
+  },
 ];
 
 async function redirects() {
diff --git a/nextjs/types.ts b/nextjs/types.ts
index 60c007daff..a6f2a38a4e 100644
--- a/nextjs/types.ts
+++ b/nextjs/types.ts
@@ -1,6 +1,13 @@
 import type { NextPage } from 'next';
+import type React from 'react';
+
+import type { Route } from 'nextjs-routes';
 
-// eslint-disable-next-line @typescript-eslint/ban-types
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: React.ReactElement) => React.ReactNode;
+};
+
+export interface RouteParams<Pathname extends Route['pathname']> {
+  pathname: Pathname;
+  query?: Route['query'];
 }
diff --git a/nextjs/utils/detectBotRequest.ts b/nextjs/utils/detectBotRequest.ts
new file mode 100644
index 0000000000..d87a3972c0
--- /dev/null
+++ b/nextjs/utils/detectBotRequest.ts
@@ -0,0 +1,52 @@
+import type { IncomingMessage } from 'http';
+
+type SocialPreviewBot = 'twitter' | 'facebook' | 'telegram' | 'slack';
+type SearchEngineBot = 'google' | 'bing' | 'yahoo' | 'duckduckgo';
+
+type ReturnType = {
+  type: 'social_preview';
+  bot: SocialPreviewBot;
+} | {
+  type: 'search_engine';
+  bot: SearchEngineBot;
+} | undefined;
+
+export default function detectBotRequest(req: IncomingMessage): ReturnType {
+  const userAgent = req.headers['user-agent'];
+
+  if (!userAgent) {
+    return;
+  }
+
+  if (userAgent.toLowerCase().includes('twitter')) {
+    return { type: 'social_preview', bot: 'twitter' };
+  }
+
+  if (userAgent.toLowerCase().includes('facebook')) {
+    return { type: 'social_preview', bot: 'facebook' };
+  }
+
+  if (userAgent.toLowerCase().includes('telegram')) {
+    return { type: 'social_preview', bot: 'telegram' };
+  }
+
+  if (userAgent.toLowerCase().includes('slack')) {
+    return { type: 'social_preview', bot: 'slack' };
+  }
+
+  if (userAgent.toLowerCase().includes('googlebot')) {
+    return { type: 'search_engine', bot: 'google' };
+  }
+
+  if (userAgent.toLowerCase().includes('bingbot')) {
+    return { type: 'search_engine', bot: 'bing' };
+  }
+
+  if (userAgent.toLowerCase().includes('yahoo')) {
+    return { type: 'search_engine', bot: 'yahoo' };
+  }
+
+  if (userAgent.toLowerCase().includes('duckduck')) {
+    return { type: 'search_engine', bot: 'duckduckgo' };
+  }
+}
diff --git a/nextjs/utils/fetch.ts b/nextjs/utils/fetch.ts
deleted file mode 100644
index 22bfc32ff6..0000000000
--- a/nextjs/utils/fetch.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import type { IncomingMessage } from 'http';
-import _pick from 'lodash/pick';
-import type { NextApiRequest } from 'next';
-import type { NextApiRequestCookies } from 'next/dist/server/api-utils';
-import type { RequestInit, Response } from 'node-fetch';
-import nodeFetch from 'node-fetch';
-
-import { httpLogger } from 'nextjs/utils/logger';
-
-import * as cookies from 'lib/cookies';
-
-export default function fetchFactory(
-  _req: NextApiRequest | (IncomingMessage & { cookies: NextApiRequestCookies }),
-) {
-  // first arg can be only a string
-  // FIXME migrate to RequestInfo later if needed
-  return function fetch(url: string, init?: RequestInit): Promise<Response> {
-    const apiToken = _req.cookies[cookies.NAMES.API_TOKEN];
-
-    const headers = {
-      accept: _req.headers['accept'] || 'application/json',
-      'content-type': _req.headers['content-type'] || 'application/json',
-      cookie: apiToken ? `${ cookies.NAMES.API_TOKEN }=${ apiToken }` : '',
-      ..._pick(_req.headers, [
-        'x-csrf-token',
-        'Authorization',
-        // feature flags
-        'updated-gas-oracle',
-      ]) as Record<string, string | undefined>,
-    };
-
-    httpLogger.logger.info({
-      message: 'Trying to call API',
-      url,
-      req: _req,
-    });
-
-    httpLogger.logger.info({
-      message: 'API request headers',
-      headers,
-    });
-
-    const body = (() => {
-      const _body = init?.body;
-      if (!_body) {
-        return;
-      }
-
-      if (typeof _body === 'string') {
-        return _body;
-      }
-
-      return JSON.stringify(_body);
-    })();
-
-    return nodeFetch(url, {
-      ...init,
-      headers,
-      body,
-    });
-  };
-}
diff --git a/nextjs/utils/fetchApi.ts b/nextjs/utils/fetchApi.ts
new file mode 100644
index 0000000000..eed5c613b4
--- /dev/null
+++ b/nextjs/utils/fetchApi.ts
@@ -0,0 +1,53 @@
+import fetch, { AbortError } from 'node-fetch';
+
+import buildUrl from 'nextjs/utils/buildUrl';
+import { httpLogger } from 'nextjs/utils/logger';
+
+import { RESOURCES } from 'lib/api/resources';
+import type { ResourceName, ResourcePathParams, ResourcePayload } from 'lib/api/resources';
+import { SECOND } from 'lib/consts';
+import metrics from 'lib/monitoring/metrics';
+
+type Params<R extends ResourceName> = (
+  {
+    resource: R;
+    pathParams?: ResourcePathParams<R>;
+    queryParams?: Record<string, string | number | undefined>;
+  } | {
+    url: string;
+    route: string;
+  }
+) & {
+  timeout?: number;
+};
+
+export default async function fetchApi<R extends ResourceName = never, S = ResourcePayload<R>>(params: Params<R>): Promise<S | undefined> {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => {
+    controller.abort();
+  }, params.timeout || SECOND);
+
+  const url = 'url' in params ? params.url : buildUrl(params.resource, params.pathParams, params.queryParams);
+  const route = 'route' in params ? params.route : RESOURCES[params.resource]['path'];
+
+  const end = metrics?.apiRequestDuration.startTimer();
+
+  try {
+    const response = await fetch(url, { signal: controller.signal });
+
+    const duration = end?.({ route, code: response.status });
+    if (response.status === 200) {
+      httpLogger.logger.info({ message: 'API fetch', url, code: response.status, duration });
+    } else {
+      httpLogger.logger.error({ message: 'API fetch', url, code: response.status, duration });
+    }
+
+    return await response.json() as Promise<S>;
+  } catch (error) {
+    const code = error instanceof AbortError ? 504 : 500;
+    const duration = end?.({ route, code });
+    httpLogger.logger.error({ message: 'API fetch', url, code, duration });
+  } finally {
+    clearTimeout(timeout);
+  }
+}
diff --git a/nextjs/utils/fetchProxy.ts b/nextjs/utils/fetchProxy.ts
new file mode 100644
index 0000000000..a8f0c032f2
--- /dev/null
+++ b/nextjs/utils/fetchProxy.ts
@@ -0,0 +1,59 @@
+import type { IncomingMessage } from 'http';
+import _pick from 'lodash/pick';
+import type { NextApiRequest } from 'next';
+import type { NextApiRequestCookies } from 'next/dist/server/api-utils';
+import type { RequestInit, Response } from 'node-fetch';
+import nodeFetch from 'node-fetch';
+
+import { httpLogger } from 'nextjs/utils/logger';
+
+import * as cookies from 'lib/cookies';
+
+export default function fetchFactory(
+  _req: NextApiRequest | (IncomingMessage & { cookies: NextApiRequestCookies }),
+) {
+  // first arg can be only a string
+  // FIXME migrate to RequestInfo later if needed
+  return function fetch(url: string, init?: RequestInit): Promise<Response> {
+    const apiToken = _req.cookies[cookies.NAMES.API_TOKEN];
+
+    const headers = {
+      accept: _req.headers['accept'] || 'application/json',
+      'content-type': _req.headers['content-type'] || 'application/json',
+      cookie: apiToken ? `${ cookies.NAMES.API_TOKEN }=${ apiToken }` : '',
+      ..._pick(_req.headers, [
+        'x-csrf-token',
+        'Authorization', // the old value, just in case
+        'authorization', // Node.js automatically lowercases headers
+        // feature flags
+        'updated-gas-oracle',
+      ]) as Record<string, string | undefined>,
+    };
+
+    httpLogger.logger.info({
+      message: 'API fetch via Next.js proxy',
+      url,
+      // headers,
+      // init,
+    });
+
+    const body = (() => {
+      const _body = init?.body;
+      if (!_body) {
+        return;
+      }
+
+      if (typeof _body === 'string') {
+        return _body;
+      }
+
+      return JSON.stringify(_body);
+    })();
+
+    return nodeFetch(url, {
+      ...init,
+      headers,
+      body,
+    });
+  };
+}
diff --git a/nextjs/utils/logRequestFromBot.ts b/nextjs/utils/logRequestFromBot.ts
new file mode 100644
index 0000000000..6c22b63258
--- /dev/null
+++ b/nextjs/utils/logRequestFromBot.ts
@@ -0,0 +1,28 @@
+import type { IncomingMessage, ServerResponse } from 'http';
+
+import metrics from 'lib/monitoring/metrics';
+
+import detectBotRequest from './detectBotRequest';
+
+export default async function logRequestFromBot(req: IncomingMessage | undefined, res: ServerResponse<IncomingMessage> | undefined, pathname: string) {
+  if (!req || !res || !metrics) {
+    return;
+  }
+
+  const botInfo = detectBotRequest(req);
+
+  if (!botInfo) {
+    return;
+  }
+
+  switch (botInfo.type) {
+    case 'search_engine': {
+      metrics.searchEngineBotRequests.inc({ route: pathname, bot: botInfo.bot });
+      return;
+    }
+    case 'social_preview': {
+      metrics.socialPreviewBotRequests.inc({ route: pathname, bot: botInfo.bot });
+      return;
+    }
+  }
+}
diff --git a/package.json b/package.json
index 13cfafc405..62aef0248f 100644
--- a/package.json
+++ b/package.json
@@ -4,19 +4,21 @@
   "private": false,
   "homepage": "https://github.com/blockscout/frontend#readme",
   "engines": {
-    "node": "20.11.0",
-    "npm": "10.2.4"
+    "node": "22.11.0",
+    "npm": "10.9.0"
   },
   "scripts": {
     "dev": "./tools/scripts/dev.sh",
     "dev:preset": "./tools/scripts/dev.preset.sh",
+    "dev:preset:sync": "tsc -p ./tools/preset-sync/tsconfig.json && node ./tools/preset-sync/index.js",
     "build": "next build",
+    "build:next": "./deploy/scripts/download_assets.sh ./public/assets/configs && yarn svg:build-sprite && ./deploy/scripts/make_envs_script.sh && next build",
     "build:docker": "docker build --build-arg GIT_COMMIT_SHA=$(git rev-parse --short HEAD) --build-arg GIT_TAG=$(git describe --tags --abbrev=0) -t blockscout-frontend:local ./",
     "start": "next start",
     "start:docker:local": "docker run -p 3000:3000 --env-file .env.local blockscout-frontend:local",
     "start:docker:preset": "./tools/scripts/docker.preset.sh",
-    "lint:eslint": "eslint . --ext .js,.jsx,.ts,.tsx",
-    "lint:eslint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
+    "lint:eslint": "eslint .",
+    "lint:eslint:fix": "eslint . --fix",
     "lint:tsc": "tsc -p ./tsconfig.json",
     "lint:envs-validator:test": "cd ./deploy/tools/envs-validator && ./test.sh",
     "prepare": "husky install",
@@ -24,88 +26,107 @@
     "svg:build-sprite": "icons build -i ./icons -o ./public/icons --optimize",
     "test:pw": "./tools/scripts/pw.sh",
     "test:pw:local": "export NODE_PATH=$(pwd)/node_modules && yarn test:pw",
-    "test:pw:docker": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.41.1-focal ./tools/scripts/pw.docker.sh",
+    "test:pw:docker": "docker run --rm --ipc=host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.49.0-noble ./tools/scripts/pw.docker.sh",
+    "test:pw:docker:deps": "docker run --rm --ipc=host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.49.0-noble ./tools/scripts/pw.docker.deps.sh",
     "test:pw:ci": "yarn test:pw --project=$PW_PROJECT",
+    "test:pw:detect-affected": "node ./deploy/tools/affected-tests/index.js",
     "test:jest": "jest",
     "test:jest:watch": "jest --watch",
-    "favicon:generate:dev": "./tools/scripts/favicon-generator.dev.sh"
+    "favicon:generate:dev": "./tools/scripts/favicon-generator.dev.sh",
+    "monitoring:prometheus:local": "docker run --name blockscout_prometheus -d -p 127.0.0.1:9090:9090 -v $(pwd)/prometheus.yml:/etc/prometheus/prometheus.yml prom/prometheus",
+    "monitoring:grafana:local": "docker run -d -p 4000:3000 --name=blockscout_grafana --user $(id -u) --volume $(pwd)/grafana:/var/lib/grafana grafana/grafana-enterprise"
   },
   "dependencies": {
+    "@blockscout/bens-types": "1.4.1",
+    "@blockscout/stats-types": "2.0.0",
+    "@blockscout/visualizer-types": "0.2.0",
     "@chakra-ui/react": "2.7.1",
     "@chakra-ui/theme-tools": "^2.0.18",
+    "@cloudnouns/kit": "1.1.6",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@growthbook/growthbook-react": "0.21.0",
+    "@helia/verified-fetch": "2.0.1",
+    "@hypelab/sdk-react": "^1.0.0",
     "@metamask/post-message-stream": "^7.0.0",
     "@metamask/providers": "^10.2.1",
     "@monaco-editor/react": "^4.4.6",
-    "@next/bundle-analyzer": "^14.0.1",
-    "@opentelemetry/auto-instrumentations-node": "^0.39.4",
-    "@opentelemetry/exporter-metrics-otlp-proto": "^0.45.1",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.45.0",
-    "@opentelemetry/resources": "^1.18.0",
-    "@opentelemetry/sdk-node": "^0.45.0",
-    "@opentelemetry/sdk-trace-node": "^1.18.0",
-    "@opentelemetry/semantic-conventions": "^1.18.0",
-    "@sentry/cli": "^2.21.2",
-    "@sentry/react": "7.24.0",
-    "@sentry/tracing": "7.24.0",
+    "@next/bundle-analyzer": "15.0.3",
+    "@opentelemetry/auto-instrumentations-node": "0.43.0",
+    "@opentelemetry/exporter-jaeger": "1.27.0",
+    "@opentelemetry/exporter-metrics-otlp-proto": "0.49.1",
+    "@opentelemetry/exporter-trace-otlp-http": "0.49.1",
+    "@opentelemetry/resources": "1.22.0",
+    "@opentelemetry/sdk-node": "0.49.1",
+    "@opentelemetry/sdk-trace-node": "1.22.0",
+    "@opentelemetry/semantic-conventions": "1.22.0",
+    "@rollbar/react": "0.12.0-beta",
+    "@scure/base": "1.1.9",
+    "@reown/appkit": "1.6.0",
+    "@reown/appkit-adapter-wagmi": "1.6.0",
     "@slise/embed-react": "^2.2.0",
-    "@tanstack/react-query": "^5.4.3",
-    "@tanstack/react-query-devtools": "^5.4.3",
+    "@tanstack/react-query": "5.55.4",
+    "@tanstack/react-query-devtools": "5.55.4",
     "@types/papaparse": "^5.3.5",
     "@types/react-scroll": "^1.8.4",
-    "@web3modal/wagmi": "3.5.0",
+    "airtable": "^0.12.2",
     "bignumber.js": "^9.1.0",
     "blo": "^1.1.1",
-    "chakra-dayzed-datepicker": "^0.2.10",
     "chakra-react-select": "^4.4.3",
     "crypto-js": "^4.2.0",
     "d3": "^7.6.1",
-    "dappscout-iframe": "^0.1.0",
-    "date-fns": "^3.6.0",
+    "dappscout-iframe": "0.2.5",
     "dayjs": "^1.11.5",
-    "dayzed": "^3.2.3",
     "dom-to-image": "^2.6.0",
+    "focus-visible": "^5.2.0",
     "framer-motion": "^6.5.1",
-    "gradient-avatar": "^1.0.2",
+    "getit-sdk": "^1.0.4",
+    "gradient-avatar": "git+https://github.com/blockscout/gradient-avatar.git",
     "graphiql": "^2.2.0",
     "graphql": "^16.8.1",
     "graphql-ws": "^5.11.3",
     "js-cookie": "^3.0.1",
     "lodash": "^4.0.0",
+    "magic-bytes.js": "1.8.0",
     "mixpanel-browser": "^2.47.0",
     "monaco-editor": "^0.34.1",
-    "next": "13.5.4",
+    "next": "15.0.3",
     "nextjs-routes": "^1.0.8",
     "node-fetch": "^3.2.9",
     "papaparse": "^5.3.2",
-    "path-to-regexp": "^6.2.1",
+    "path-to-regexp": "8.1.0",
     "phoenix": "^1.6.15",
     "pino-http": "^8.2.1",
     "pino-pretty": "^9.1.1",
+    "prom-client": "15.1.1",
     "qrcode": "^1.5.1",
-    "react": "18.2.0",
+    "react": "18.3.1",
     "react-device-detect": "^2.2.3",
-    "react-dom": "18.2.0",
-    "react-google-recaptcha": "^2.1.0",
-    "react-hook-form": "^7.33.1",
+    "react-dom": "18.3.1",
+    "react-google-recaptcha": "3.1.0",
+    "react-hook-form": "7.52.1",
     "react-identicons": "^1.2.5",
     "react-intersection-observer": "^9.5.2",
     "react-jazzicon": "^1.0.4",
     "react-number-format": "^5.3.1",
     "react-scroll": "^1.8.7",
+    "rollbar": "2.26.4",
     "swagger-ui-react": "^5.9.0",
     "use-font-face-observer": "^1.2.1",
-    "viem": "1.20.1",
-    "wagmi": "1.4.12",
+    "valibot": "0.38.0",
+    "viem": "2.21.54",
+    "wagmi": "2.14.0",
     "xss": "^1.0.14"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-react": "1.41.1",
-    "@playwright/test": "1.41.1",
+    "@eslint/compat": "1.2.2",
+    "@eslint/js": "9.14.0",
+    "@next/eslint-plugin-next": "15.0.3",
+    "@playwright/experimental-ct-react": "1.49.0",
+    "@playwright/test": "1.49.0",
+    "@stylistic/eslint-plugin": "2.10.1",
     "@svgr/webpack": "^6.5.1",
-    "@tanstack/eslint-plugin-query": "^5.0.5",
+    "@tanstack/eslint-plugin-query": "5.60.1",
     "@testing-library/react": "^14.0.0",
     "@total-typescript/ts-reset": "^0.4.0",
     "@types/crypto-js": "^4.1.1",
@@ -115,11 +136,11 @@
     "@types/jest": "^29.2.0",
     "@types/js-cookie": "^3.0.2",
     "@types/mixpanel-browser": "^2.38.1",
-    "@types/node": "20.11.0",
+    "@types/node": "20.16.7",
     "@types/phoenix": "^1.5.4",
     "@types/qrcode": "^1.5.0",
-    "@types/react": "18.0.9",
-    "@types/react-dom": "18.0.5",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
     "@types/react-google-recaptcha": "^2.1.5",
     "@types/swagger-ui-react": "^4.11.0",
     "@types/ws": "^8.5.3",
@@ -127,14 +148,18 @@
     "@vitejs/plugin-react": "^4.0.0",
     "css-loader": "^6.7.3",
     "dotenv-cli": "^6.0.0",
-    "eslint": "^8.32.0",
-    "eslint-config-next": "13.3.0",
-    "eslint-plugin-es5": "^1.5.0",
-    "eslint-plugin-import-helpers": "^1.2.1",
-    "eslint-plugin-jest": "^27.1.6",
+    "eslint": "9.14.0",
+    "eslint-config-next": "15.0.3",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-import-helpers": "2.0.1",
+    "eslint-plugin-jest": "28.9.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-no-cyrillic-string": "^1.0.5",
-    "eslint-plugin-playwright": "^0.11.2",
-    "eslint-plugin-regexp": "^1.7.0",
+    "eslint-plugin-playwright": "2.0.1",
+    "eslint-plugin-react": "7.37.2",
+    "eslint-plugin-react-hooks": "5.0.0",
+    "eslint-plugin-regexp": "2.6.0",
+    "globals": "15.12.0",
     "husky": "^8.0.0",
     "jest": "^29.2.1",
     "jest-environment-jsdom": "^29.2.1",
@@ -146,12 +171,17 @@
     "svgo": "^2.8.0",
     "ts-jest": "^29.0.3",
     "ts-node": "^10.9.1",
-    "typescript": "^5.1.0",
+    "typescript": "5.4.2",
+    "typescript-eslint": "8.14.0",
     "vite-plugin-svgr": "^2.2.2",
-    "vite-tsconfig-paths": "^3.5.2",
-    "ws": "^8.11.0"
+    "vite-tsconfig-paths": "4.3.2",
+    "ws": "^8.17.1"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "eslint --cache --fix"
+  },
+  "resolutions": {
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1"
   }
 }
diff --git a/pages/404.tsx b/pages/404.tsx
index 0e747ae875..bd4e020c0d 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -1,19 +1,21 @@
-import * as Sentry from '@sentry/react';
 import React from 'react';
 
 import type { NextPageWithLayout } from 'nextjs/types';
 
 import PageNextJs from 'nextjs/PageNextJs';
 
+import { useRollbar } from 'lib/rollbar';
 import AppError from 'ui/shared/AppError/AppError';
 import LayoutError from 'ui/shared/layout/LayoutError';
 
 const error = new Error('Not found', { cause: { status: 404 } });
 
 const Page: NextPageWithLayout = () => {
+  const rollbar = useRollbar();
+
   React.useEffect(() => {
-    Sentry.captureException(new Error('Page not found'), { tags: { source: '404' } });
-  }, []);
+    rollbar?.error('Page not found');
+  }, [ rollbar ]);
 
   return (
     <PageNextJs pathname="/404">
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 2f8ff8374b..bc583e44e8 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,6 +1,5 @@
-import type { ChakraProps } from '@chakra-ui/react';
+import { type ChakraProps } from '@chakra-ui/react';
 import { GrowthBookProvider } from '@growthbook/growthbook-react';
-import * as Sentry from '@sentry/react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import type { AppProps } from 'next/app';
@@ -12,21 +11,28 @@ import config from 'configs/app';
 import useQueryClientConfig from 'lib/api/useQueryClientConfig';
 import { AppContextProvider } from 'lib/contexts/app';
 import { ChakraProvider } from 'lib/contexts/chakra';
+import { MarketplaceContextProvider } from 'lib/contexts/marketplace';
+import { RewardsContextProvider } from 'lib/contexts/rewards';
 import { ScrollDirectionProvider } from 'lib/contexts/scrollDirection';
+import { SettingsContextProvider } from 'lib/contexts/settings';
 import { growthBook } from 'lib/growthbook/init';
 import useLoadFeatures from 'lib/growthbook/useLoadFeatures';
+import useNotifyOnNavigation from 'lib/hooks/useNotifyOnNavigation';
+import { clientConfig as rollbarConfig, Provider as RollbarProvider } from 'lib/rollbar';
 import { SocketProvider } from 'lib/socket/context';
-import theme from 'theme';
+import RewardsLoginModal from 'ui/rewards/login/RewardsLoginModal';
 import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
+import AppErrorGlobalContainer from 'ui/shared/AppError/AppErrorGlobalContainer';
 import GoogleAnalytics from 'ui/shared/GoogleAnalytics';
 import Layout from 'ui/shared/layout/Layout';
 import Web3ModalProvider from 'ui/shared/Web3ModalProvider';
 
 import 'lib/setLocale';
+// import 'focus-visible/dist/focus-visible';
 
 type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;
-}
+};
 
 const ERROR_SCREEN_STYLES: ChakraProps = {
   h: '100vh',
@@ -36,44 +42,50 @@ const ERROR_SCREEN_STYLES: ChakraProps = {
   justifyContent: 'center',
   width: 'fit-content',
   maxW: '800px',
-  margin: '0 auto',
+  margin: { base: '0 auto', lg: '0 auto' },
   p: { base: 4, lg: 0 },
 };
 
 function MyApp({ Component, pageProps }: AppPropsWithLayout) {
 
   useLoadFeatures();
+  useNotifyOnNavigation();
 
   const queryClient = useQueryClientConfig();
 
-  const handleError = React.useCallback((error: Error) => {
-    Sentry.captureException(error);
-  }, []);
-
   const getLayout = Component.getLayout ?? ((page) => <Layout>{ page }</Layout>);
 
   return (
-    <ChakraProvider theme={ theme } cookies={ pageProps.cookies }>
-      <AppErrorBoundary
-        { ...ERROR_SCREEN_STYLES }
-        onError={ handleError }
-      >
-        <Web3ModalProvider>
-          <AppContextProvider pageProps={ pageProps }>
-            <QueryClientProvider client={ queryClient }>
-              <GrowthBookProvider growthbook={ growthBook }>
-                <ScrollDirectionProvider>
-                  <SocketProvider url={ `${ config.api.socket }${ config.api.basePath }/socket/v2` }>
-                    { getLayout(<Component { ...pageProps }/>) }
-                  </SocketProvider>
-                </ScrollDirectionProvider>
-              </GrowthBookProvider>
-              <ReactQueryDevtools buttonPosition="bottom-left" position="left"/>
-              <GoogleAnalytics/>
-            </QueryClientProvider>
-          </AppContextProvider>
-        </Web3ModalProvider>
-      </AppErrorBoundary>
+    <ChakraProvider cookies={ pageProps.cookies }>
+      <RollbarProvider config={ rollbarConfig }>
+        <AppErrorBoundary
+          { ...ERROR_SCREEN_STYLES }
+          Container={ AppErrorGlobalContainer }
+        >
+          <Web3ModalProvider>
+            <AppContextProvider pageProps={ pageProps }>
+              <QueryClientProvider client={ queryClient }>
+                <GrowthBookProvider growthbook={ growthBook }>
+                  <ScrollDirectionProvider>
+                    <SocketProvider url={ `${ config.api.socket }${ config.api.basePath }/socket/v2` }>
+                      <RewardsContextProvider>
+                        <MarketplaceContextProvider>
+                          <SettingsContextProvider>
+                            { getLayout(<Component { ...pageProps }/>) }
+                            { config.features.rewards.isEnabled && <RewardsLoginModal/> }
+                          </SettingsContextProvider>
+                        </MarketplaceContextProvider>
+                      </RewardsContextProvider>
+                    </SocketProvider>
+                  </ScrollDirectionProvider>
+                </GrowthBookProvider>
+                <ReactQueryDevtools buttonPosition="bottom-left" position="left"/>
+                <GoogleAnalytics/>
+              </QueryClientProvider>
+            </AppContextProvider>
+          </Web3ModalProvider>
+        </AppErrorBoundary>
+      </RollbarProvider>
     </ChakraProvider>
   );
 }
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 74ebe08fb5..1706e247ac 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -3,9 +3,11 @@ import type { DocumentContext } from 'next/document';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 import React from 'react';
 
+import logRequestFromBot from 'nextjs/utils/logRequestFromBot';
 import * as serverTiming from 'nextjs/utils/serverTiming';
 
-import theme from 'theme';
+import config from 'configs/app';
+import theme from 'theme/theme';
 import * as svgSprite from 'ui/shared/IconSvg';
 
 class MyDocument extends Document {
@@ -21,6 +23,8 @@ class MyDocument extends Document {
       return result;
     };
 
+    await logRequestFromBot(ctx.req, ctx.res, ctx.pathname);
+
     const initialProps = await Document.getInitialProps(ctx);
 
     return initialProps;
@@ -32,24 +36,24 @@ class MyDocument extends Document {
         <Head>
           { /* FONTS */ }
           <link
-            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+            href={ config.UI.fonts.heading?.url ?? 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap' }
             rel="stylesheet"
           />
           <link
-            href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
+            href={ config.UI.fonts.body?.url ?? 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap' }
             rel="stylesheet"
           />
 
           { /* eslint-disable-next-line @next/next/no-sync-scripts */ }
-          <script src="/envs.js"/>
+          <script src="/assets/envs.js"/>
 
           { /* FAVICON */ }
-          <link rel="icon" href="/favicon/favicon.ico" sizes="48x48"/>
-          <link rel="icon" sizes="32x32" type="image/png" href="/favicon/favicon-32x32.png"/>
-          <link rel="icon" sizes="16x16" type="image/png"href="/favicon/favicon-16x16.png"/>
-          <link rel="apple-touch-icon" href="/favicon/apple-touch-icon-180x180.png"/>
-          <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg"/>
-
+          <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png"/>
+          <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png"/>
+          <link rel="icon" type="image/png" sizes="48x48" href="/assets/favicon/favicon-48x48.png"/>
+          <link rel="shortcut icon" href="/assets/favicon/favicon.ico"/>
+          <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon-180x180.png"/>
+          <link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon/android-chrome-192x192.png"/>
           <link rel="preload" as="image" href={ svgSprite.href }/>
         </Head>
         <body>
diff --git a/pages/_error.tsx b/pages/_error.tsx
index 2476105718..8f76ae1654 100644
--- a/pages/_error.tsx
+++ b/pages/_error.tsx
@@ -7,7 +7,7 @@ import * as cookies from 'lib/cookies';
 
 type Props = ServerSidePropsCommon & {
   statusCode: number;
-}
+};
 
 const CustomErrorComponent = (props: Props) => {
   const colorModeCookie = cookies.getFromCookieString(props.cookies || '', cookies.NAMES.COLOR_MODE);
diff --git a/pages/account/public-tags-request.tsx b/pages/account/public-tags-request.tsx
deleted file mode 100644
index 66970197df..0000000000
--- a/pages/account/public-tags-request.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { NextPage } from 'next';
-import dynamic from 'next/dynamic';
-import React from 'react';
-
-import PageNextJs from 'nextjs/PageNextJs';
-
-const PublicTags = dynamic(() => import('ui/pages/PublicTags'), { ssr: false });
-
-const Page: NextPage = () => {
-  return (
-    <PageNextJs pathname="/account/public-tags-request">
-      <PublicTags/>
-    </PageNextJs>
-  );
-};
-
-export default Page;
-
-export { account as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/account/rewards.tsx b/pages/account/rewards.tsx
new file mode 100644
index 0000000000..422ce4c90f
--- /dev/null
+++ b/pages/account/rewards.tsx
@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+const RewardsDashboard = dynamic(() => import('ui/pages/RewardsDashboard'), { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/account/rewards">
+      <RewardsDashboard/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { account as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/accounts.tsx b/pages/accounts/index.tsx
similarity index 100%
rename from pages/accounts.tsx
rename to pages/accounts/index.tsx
diff --git a/pages/accounts/label/[slug].tsx b/pages/accounts/label/[slug].tsx
new file mode 100644
index 0000000000..e90b38bfe3
--- /dev/null
+++ b/pages/accounts/label/[slug].tsx
@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+const AccountsLabelSearch = dynamic(() => import('ui/pages/AccountsLabelSearch'), { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/accounts/label/[slug]">
+      <AccountsLabelSearch/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { accountsLabelSearch as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/address/[hash]/contract-verification.tsx b/pages/address/[hash]/contract-verification.tsx
index 7e7fd704d2..25f56fa4c6 100644
--- a/pages/address/[hash]/contract-verification.tsx
+++ b/pages/address/[hash]/contract-verification.tsx
@@ -8,7 +8,7 @@ import ContractVerificationForAddress from 'ui/pages/ContractVerificationForAddr
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/address/[hash]/contract-verification" query={ props }>
+    <PageNextJs pathname="/address/[hash]/contract-verification" query={ props.query }>
       <ContractVerificationForAddress/>
     </PageNextJs>
   );
diff --git a/pages/address/[hash]/index.tsx b/pages/address/[hash]/index.tsx
index 2319a31605..b394244151 100644
--- a/pages/address/[hash]/index.tsx
+++ b/pages/address/[hash]/index.tsx
@@ -1,15 +1,22 @@
-import type { NextPage } from 'next';
-import dynamic from 'next/dynamic';
+import type { GetServerSideProps, NextPage } from 'next';
 import React from 'react';
 
+import type { Route } from 'nextjs-routes';
 import type { Props } from 'nextjs/getServerSideProps';
+import * as gSSP from 'nextjs/getServerSideProps';
 import PageNextJs from 'nextjs/PageNextJs';
+import detectBotRequest from 'nextjs/utils/detectBotRequest';
+import fetchApi from 'nextjs/utils/fetchApi';
 
-const Address = dynamic(() => import('ui/pages/Address'), { ssr: false });
+import config from 'configs/app';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import Address from 'ui/pages/Address';
 
-const Page: NextPage<Props> = (props: Props) => {
+const pathname: Route['pathname'] = '/address/[hash]';
+
+const Page: NextPage<Props<typeof pathname>> = (props: Props<typeof pathname>) => {
   return (
-    <PageNextJs pathname="/address/[hash]" query={ props }>
+    <PageNextJs pathname={ pathname } query={ props.query } apiData={ props.apiData }>
       <Address/>
     </PageNextJs>
   );
@@ -17,4 +24,24 @@ const Page: NextPage<Props> = (props: Props) => {
 
 export default Page;
 
-export { base as getServerSideProps } from 'nextjs/getServerSideProps';
+export const getServerSideProps: GetServerSideProps<Props<typeof pathname>> = async(ctx) => {
+  const baseResponse = await gSSP.base<typeof pathname>(ctx);
+
+  if (config.meta.og.enhancedDataEnabled && 'props' in baseResponse) {
+    const botInfo = detectBotRequest(ctx.req);
+
+    if (botInfo?.type === 'social_preview') {
+      const addressData = await fetchApi({
+        resource: 'address',
+        pathParams: { hash: getQueryParamString(ctx.query.hash) },
+        timeout: 1_000,
+      });
+
+      (await baseResponse.props).apiData = addressData && addressData.ens_domain_name ? {
+        domain_name: addressData.ens_domain_name,
+      } : null;
+    }
+  }
+
+  return baseResponse;
+};
diff --git a/pages/advanced-filter.tsx b/pages/advanced-filter.tsx
new file mode 100644
index 0000000000..d0d5c9182a
--- /dev/null
+++ b/pages/advanced-filter.tsx
@@ -0,0 +1,18 @@
+import type { NextPage } from 'next';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+import AdvancedFilter from 'ui/pages/AdvancedFilter';
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/advanced-filter">
+      <AdvancedFilter/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { advancedFilter as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/api-docs.tsx b/pages/api-docs.tsx
index 54d678c2d6..64148d64e2 100644
--- a/pages/api-docs.tsx
+++ b/pages/api-docs.tsx
@@ -3,13 +3,16 @@ import React from 'react';
 
 import PageNextJs from 'nextjs/PageNextJs';
 
+import config from 'configs/app';
 import SwaggerUI from 'ui/apiDocs/SwaggerUI';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
 const Page: NextPage = () => {
   return (
     <PageNextJs pathname="/api-docs">
-      <PageTitle title="API Documentation"/>
+      <PageTitle
+        title={ config.meta.seo.enhancedDataEnabled ? `${ config.chain.name } API documentation` : 'API documentation' }
+      />
       <SwaggerUI/>
     </PageNextJs>
   );
diff --git a/pages/api/config.ts b/pages/api/config.ts
new file mode 100644
index 0000000000..ef3e6de661
--- /dev/null
+++ b/pages/api/config.ts
@@ -0,0 +1,15 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default async function configHandler(req: NextApiRequest, res: NextApiResponse) {
+  const publicEnvs = Object.entries(process.env)
+    .filter(([ key ]) => key.startsWith('NEXT_PUBLIC_'))
+    .sort(([ keyA ], [ keyB ]) => keyA.localeCompare(keyB))
+    .reduce((result, [ key, value ]) => {
+      result[key] = value || '';
+      return result;
+    }, {} as Record<string, string>);
+
+  res.status(200).json({
+    envs: publicEnvs,
+  });
+}
diff --git a/pages/api/csrf.ts b/pages/api/csrf.ts
index 8d4857b6f1..409ab8a1da 100644
--- a/pages/api/csrf.ts
+++ b/pages/api/csrf.ts
@@ -1,7 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 
 import buildUrl from 'nextjs/utils/buildUrl';
-import fetchFactory from 'nextjs/utils/fetch';
+import fetchFactory from 'nextjs/utils/fetchProxy';
 import { httpLogger } from 'nextjs/utils/logger';
 
 export default async function csrfHandler(_req: NextApiRequest, res: NextApiResponse) {
diff --git a/pages/api/log.ts b/pages/api/log.ts
new file mode 100644
index 0000000000..cb89b35f59
--- /dev/null
+++ b/pages/api/log.ts
@@ -0,0 +1,9 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { httpLogger } from 'nextjs/utils/logger';
+
+export default async function logHandler(req: NextApiRequest, res: NextApiResponse) {
+  httpLogger(req, res);
+
+  res.status(200).send('ok');
+}
diff --git a/pages/api/media-type.ts b/pages/api/media-type.ts
index f64301f094..95d4b3728a 100644
--- a/pages/api/media-type.ts
+++ b/pages/api/media-type.ts
@@ -3,16 +3,20 @@ import nodeFetch from 'node-fetch';
 
 import { httpLogger } from 'nextjs/utils/logger';
 
+import metrics from 'lib/monitoring/metrics';
 import getQueryParamString from 'lib/router/getQueryParamString';
 
 export default async function mediaTypeHandler(req: NextApiRequest, res: NextApiResponse) {
-  httpLogger(req, res);
 
   try {
     const url = getQueryParamString(req.query.url);
+
+    const end = metrics?.apiRequestDuration.startTimer();
     const response = await nodeFetch(url, { method: 'HEAD' });
+    const duration = end?.({ route: '/media-type', code: response.status });
 
     if (response.status !== 200) {
+      httpLogger.logger.error({ message: 'API fetch', url, code: response.status, duration });
       throw new Error();
     }
 
@@ -22,12 +26,16 @@ export default async function mediaTypeHandler(req: NextApiRequest, res: NextApi
         return 'video';
       }
 
+      if (contentType?.startsWith('image')) {
+        return 'image';
+      }
+
       if (contentType?.startsWith('text/html')) {
         return 'html';
       }
-
-      return 'image';
     })();
+    httpLogger.logger.info({ message: 'API fetch', url, code: response.status, duration });
+
     res.status(200).json({ type: mediaType });
   } catch (error) {
     res.status(200).json({ type: undefined });
diff --git a/pages/api/metrics.ts b/pages/api/metrics.ts
new file mode 100644
index 0000000000..7e5d33f749
--- /dev/null
+++ b/pages/api/metrics.ts
@@ -0,0 +1,12 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import * as promClient from 'prom-client';
+
+const isEnabled = process.env.PROMETHEUS_METRICS_ENABLED === 'true';
+
+isEnabled && promClient.collectDefaultMetrics({ prefix: 'frontend_' });
+
+export default async function metricsHandler(req: NextApiRequest, res: NextApiResponse) {
+  const metrics = await promClient.register.metrics();
+  res.setHeader('Content-type', promClient.register.contentType);
+  res.send(metrics);
+}
diff --git a/pages/api/monitoring/invalid-api-schema.ts b/pages/api/monitoring/invalid-api-schema.ts
new file mode 100644
index 0000000000..c5a67616c7
--- /dev/null
+++ b/pages/api/monitoring/invalid-api-schema.ts
@@ -0,0 +1,17 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import * as v from 'valibot';
+
+import metrics from 'lib/monitoring/metrics';
+
+const PayloadSchema = v.object({
+  resource: v.string(),
+  url: v.string(),
+});
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const payload = JSON.parse(req.body);
+    metrics?.invalidApiSchema.inc(v.parse(PayloadSchema, payload));
+  } catch (error) {}
+  res.status(200).json({ status: 'ok' });
+}
diff --git a/pages/api/proxy.ts b/pages/api/proxy.ts
index 0756f3639c..78d8e152ba 100644
--- a/pages/api/proxy.ts
+++ b/pages/api/proxy.ts
@@ -2,7 +2,7 @@ import _pick from 'lodash/pick';
 import _pickBy from 'lodash/pickBy';
 import type { NextApiRequest, NextApiResponse } from 'next';
 
-import fetchFactory from 'nextjs/utils/fetch';
+import fetchFactory from 'nextjs/utils/fetchProxy';
 
 import appConfig from 'configs/app';
 
@@ -22,8 +22,14 @@ const handler = async(nextReq: NextApiRequest, nextRes: NextApiResponse) => {
   );
 
   // proxy some headers from API
-  nextRes.setHeader('x-request-id', apiRes.headers.get('x-request-id') || '');
-  nextRes.setHeader('set-cookie', apiRes.headers.get('set-cookie') || '');
+  const requestId = apiRes.headers.get('x-request-id');
+  requestId && nextRes.setHeader('x-request-id', requestId);
+
+  const setCookie = apiRes.headers.raw()['set-cookie'];
+  setCookie?.forEach((value) => {
+    nextRes.appendHeader('set-cookie', value);
+  });
+  nextRes.setHeader('content-type', apiRes.headers.get('content-type') || '');
 
   nextRes.status(apiRes.status).send(apiRes.body);
 };
diff --git a/pages/api/sprite.ts b/pages/api/sprite.ts
new file mode 100644
index 0000000000..9ba9d7030c
--- /dev/null
+++ b/pages/api/sprite.ts
@@ -0,0 +1,49 @@
+import fs from 'fs';
+import type { NextApiRequest, NextApiResponse } from 'next';
+import path from 'path';
+
+import config from 'configs/app';
+
+const ROOT_DIR = './icons';
+const NAME_PREFIX = ROOT_DIR.replace('./', '') + '/';
+
+interface IconInfo {
+  name: string;
+  fileSize: number;
+}
+
+const getIconName = (filePath: string) => filePath.replace(NAME_PREFIX, '').replace('.svg', '');
+
+function collectIconNames(dir: string) {
+  const files = fs.readdirSync(dir, { withFileTypes: true });
+  let icons: Array<IconInfo> = [];
+
+  files.forEach((file) => {
+    const filePath = path.join(dir, file.name);
+    const stats = fs.statSync(filePath);
+
+    file.name.endsWith('.svg') && icons.push({
+      name: getIconName(filePath),
+      fileSize: stats.size,
+    });
+
+    if (file.isDirectory()) {
+      icons = [ ...icons, ...collectIconNames(filePath) ];
+    }
+  });
+
+  return icons;
+}
+
+export default async function spriteHandler(req: NextApiRequest, res: NextApiResponse) {
+
+  if (!config.app.isDev) {
+    return res.status(404).json({ error: 'Not found' });
+  }
+
+  const icons = collectIconNames(ROOT_DIR);
+
+  res.status(200).json({
+    icons,
+  });
+}
diff --git a/pages/apps/[id].tsx b/pages/apps/[id].tsx
index f99be74026..4d884af4e6 100644
--- a/pages/apps/[id].tsx
+++ b/pages/apps/[id].tsx
@@ -1,18 +1,29 @@
+import type { GetServerSideProps } from 'next';
 import dynamic from 'next/dynamic';
 import React from 'react';
 
 import type { NextPageWithLayout } from 'nextjs/types';
+import type { MarketplaceAppOverview } from 'types/client/marketplace';
 
+import type { Route } from 'nextjs-routes';
+import * as gSSP from 'nextjs/getServerSideProps';
 import type { Props } from 'nextjs/getServerSideProps';
 import PageNextJs from 'nextjs/PageNextJs';
+import detectBotRequest from 'nextjs/utils/detectBotRequest';
+import fetchApi from 'nextjs/utils/fetchApi';
 
+import config from 'configs/app';
+import getQueryParamString from 'lib/router/getQueryParamString';
 import LayoutApp from 'ui/shared/layout/LayoutApp';
 
 const MarketplaceApp = dynamic(() => import('ui/pages/MarketplaceApp'), { ssr: false });
 
-const Page: NextPageWithLayout<Props> = (props: Props) => {
+const pathname: Route['pathname'] = '/apps/[id]';
+const feature = config.features.marketplace;
+
+const Page: NextPageWithLayout<Props<typeof pathname>> = (props: Props<typeof pathname>) => {
   return (
-    <PageNextJs pathname="/apps/[id]" query={ props }>
+    <PageNextJs pathname={ pathname } query={ props.query } apiData={ props.apiData }>
       <MarketplaceApp/>
     </PageNextJs>
   );
@@ -28,4 +39,40 @@ Page.getLayout = function getLayout(page: React.ReactElement) {
 
 export default Page;
 
-export { marketplace as getServerSideProps } from 'nextjs/getServerSideProps';
+export const getServerSideProps: GetServerSideProps<Props<typeof pathname>> = async(ctx) => {
+  const baseResponse = await gSSP.marketplace<typeof pathname>(ctx);
+
+  if (config.meta.og.enhancedDataEnabled && 'props' in baseResponse && feature.isEnabled) {
+    const botInfo = detectBotRequest(ctx.req);
+
+    if (botInfo?.type === 'social_preview') {
+
+      const appData = await(async() => {
+        if ('configUrl' in feature) {
+          const appList = await fetchApi<never, Array<MarketplaceAppOverview>>({
+            url: config.app.baseUrl + feature.configUrl,
+            route: '/marketplace_config',
+            timeout: 1_000,
+          });
+
+          if (appList && Array.isArray(appList)) {
+            return appList.find(app => app.id === getQueryParamString(ctx.query.id));
+          }
+
+        } else {
+          return await fetchApi({
+            resource: 'marketplace_dapp',
+            pathParams: { dappId: getQueryParamString(ctx.query.id), chainId: config.chain.id },
+            timeout: 1_000,
+          });
+        }
+      })();
+
+      (await baseResponse.props).apiData = appData && appData.title ? {
+        app_name: appData.title,
+      } : null;
+    }
+  }
+
+  return baseResponse;
+};
diff --git a/pages/apps/index.tsx b/pages/apps/index.tsx
index 17f75586ac..aa5c0bae15 100644
--- a/pages/apps/index.tsx
+++ b/pages/apps/index.tsx
@@ -4,31 +4,13 @@ import React from 'react';
 
 import PageNextJs from 'nextjs/PageNextJs';
 
-import config from 'configs/app';
-import LinkExternal from 'ui/shared/LinkExternal';
-import PageTitle from 'ui/shared/Page/PageTitle';
-
-const feature = config.features.marketplace;
-
 const Marketplace = dynamic(() => import('ui/pages/Marketplace'), { ssr: false });
 
-const Page: NextPage = () => {
-  return (
-    <PageNextJs pathname="/apps">
-      <>
-        <PageTitle
-          title="DAppscout"
-          contentAfter={ feature.isEnabled && (
-            <LinkExternal href={ feature.submitFormUrl } variant="subtle" fontSize="sm" lineHeight={ 5 } ml="auto">
-              Submit app
-            </LinkExternal>
-          ) }
-        />
-        <Marketplace/>
-      </>
-    </PageNextJs>
-  );
-};
+const Page: NextPage = () => (
+  <PageNextJs pathname="/apps">
+    <Marketplace/>
+  </PageNextJs>
+);
 
 export default Page;
 
diff --git a/pages/auth/auth0.tsx b/pages/auth/auth0.tsx
deleted file mode 100644
index 5bf73de5f1..0000000000
--- a/pages/auth/auth0.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { NextPage } from 'next';
-
-const Page: NextPage = () => {
-  return null;
-};
-
-export default Page;
-
-export async function getServerSideProps() {
-  return {
-    notFound: true,
-  };
-}
diff --git a/pages/auth/unverified-email.tsx b/pages/auth/unverified-email.tsx
deleted file mode 100644
index 03b2cfe150..0000000000
--- a/pages/auth/unverified-email.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { NextPage } from 'next';
-import React from 'react';
-
-import PageNextJs from 'nextjs/PageNextJs';
-
-import UnverifiedEmail from 'ui/pages/UnverifiedEmail';
-
-const Page: NextPage = () => {
-  return (
-    <PageNextJs pathname="/auth/unverified-email">
-      <UnverifiedEmail/>
-    </PageNextJs>
-  );
-};
-
-export default Page;
-
-export { account as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/batches/[number].tsx b/pages/batches/[number].tsx
new file mode 100644
index 0000000000..6239aefafe
--- /dev/null
+++ b/pages/batches/[number].tsx
@@ -0,0 +1,42 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import type { Props } from 'nextjs/getServerSideProps';
+import PageNextJs from 'nextjs/PageNextJs';
+
+import config from 'configs/app';
+
+const rollupFeature = config.features.rollup;
+
+const Batch = dynamic(() => {
+  if (!rollupFeature.isEnabled) {
+    throw new Error('Rollup feature is not enabled.');
+  }
+
+  switch (rollupFeature.type) {
+    case 'arbitrum':
+      return import('ui/pages/ArbitrumL2TxnBatch');
+    case 'optimistic':
+      return import('ui/pages/OptimisticL2TxnBatch');
+    case 'zkEvm':
+      return import('ui/pages/ZkEvmL2TxnBatch');
+    case 'zkSync':
+      return import('ui/pages/ZkSyncL2TxnBatch');
+    case 'scroll':
+      return import('ui/pages/ScrollL2TxnBatch');
+  }
+  throw new Error('Txn batches feature is not enabled.');
+}, { ssr: false });
+
+const Page: NextPage<Props> = (props: Props) => {
+  return (
+    <PageNextJs pathname="/batches/[number]" query={ props.query }>
+      <Batch/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { batch as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/batches/index.tsx b/pages/batches/index.tsx
new file mode 100644
index 0000000000..176bce9f04
--- /dev/null
+++ b/pages/batches/index.tsx
@@ -0,0 +1,40 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+import config from 'configs/app';
+const rollupFeature = config.features.rollup;
+
+const Batches = dynamic(() => {
+  if (!rollupFeature.isEnabled) {
+    throw new Error('Rollup feature is not enabled.');
+  }
+
+  switch (rollupFeature.type) {
+    case 'zkEvm':
+      return import('ui/pages/ZkEvmL2TxnBatches');
+    case 'zkSync':
+      return import('ui/pages/ZkSyncL2TxnBatches');
+    case 'optimistic':
+      return import('ui/pages/OptimisticL2TxnBatches');
+    case 'arbitrum':
+      return import('ui/pages/ArbitrumL2TxnBatches');
+    case 'scroll':
+      return import('ui/pages/ScrollL2TxnBatches');
+  }
+  throw new Error('Txn batches feature is not enabled.');
+}, { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/batches">
+      <Batches/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { rollup as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/blobs/[hash].tsx b/pages/blobs/[hash].tsx
new file mode 100644
index 0000000000..c042c862aa
--- /dev/null
+++ b/pages/blobs/[hash].tsx
@@ -0,0 +1,20 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import type { Props } from 'nextjs/getServerSideProps';
+import PageNextJs from 'nextjs/PageNextJs';
+
+const Blob = dynamic(() => import('ui/pages/Blob'), { ssr: false });
+
+const Page: NextPage<Props> = (props: Props) => {
+  return (
+    <PageNextJs pathname="/blobs/[hash]" query={ props.query }>
+      <Blob/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { dataAvailability as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/block/[height_or_hash].tsx b/pages/block/[height_or_hash].tsx
index 7d74d59c49..ef2c7652d2 100644
--- a/pages/block/[height_or_hash].tsx
+++ b/pages/block/[height_or_hash].tsx
@@ -9,7 +9,7 @@ const Block = dynamic(() => import('ui/pages/Block'), { ssr: false });
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/block/[height_or_hash]" query={ props }>
+    <PageNextJs pathname="/block/[height_or_hash]" query={ props.query }>
       <Block/>
     </PageNextJs>
   );
diff --git a/pages/block/countdown/[height].tsx b/pages/block/countdown/[height].tsx
new file mode 100644
index 0000000000..77d3c01669
--- /dev/null
+++ b/pages/block/countdown/[height].tsx
@@ -0,0 +1,20 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import type { Props } from 'nextjs/getServerSideProps';
+import PageNextJs from 'nextjs/PageNextJs';
+
+const BlockCountdown = dynamic(() => import('ui/pages/BlockCountdown'), { ssr: false });
+
+const Page: NextPage<Props> = (props: Props) => {
+  return (
+    <PageNextJs pathname="/block/countdown/[height]" query={ props.query }>
+      <BlockCountdown/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { base as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/block/countdown/index.tsx b/pages/block/countdown/index.tsx
new file mode 100644
index 0000000000..78d48fe0eb
--- /dev/null
+++ b/pages/block/countdown/index.tsx
@@ -0,0 +1,20 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import type { Props } from 'nextjs/getServerSideProps';
+import PageNextJs from 'nextjs/PageNextJs';
+
+const BlockCountdownIndex = dynamic(() => import('ui/pages/BlockCountdownIndex'), { ssr: false });
+
+const Page: NextPage<Props> = (props: Props) => {
+  return (
+    <PageNextJs pathname="/block/countdown" query={ props.query }>
+      <BlockCountdownIndex/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { base as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/contract-verification.tsx b/pages/contract-verification.tsx
index a14df711e1..59dc7064b7 100644
--- a/pages/contract-verification.tsx
+++ b/pages/contract-verification.tsx
@@ -8,7 +8,7 @@ import ContractVerification from 'ui/pages/ContractVerification';
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/contract-verification" query={ props }>
+    <PageNextJs pathname="/contract-verification" query={ props.query }>
       <ContractVerification/>
     </PageNextJs>
   );
diff --git a/pages/deposits/index.tsx b/pages/deposits/index.tsx
new file mode 100644
index 0000000000..1d18dd940f
--- /dev/null
+++ b/pages/deposits/index.tsx
@@ -0,0 +1,44 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+import config from 'configs/app';
+const rollupFeature = config.features.rollup;
+
+const Deposits = dynamic(() => {
+  if (rollupFeature.isEnabled && rollupFeature.type === 'optimistic') {
+    return import('ui/pages/OptimisticL2Deposits');
+  }
+
+  if (rollupFeature.isEnabled && rollupFeature.type === 'arbitrum') {
+    return import('ui/pages/ArbitrumL2Deposits');
+  }
+
+  if (rollupFeature.isEnabled && rollupFeature.type === 'shibarium') {
+    return import('ui/pages/ShibariumDeposits');
+  }
+
+  if (rollupFeature.isEnabled && rollupFeature.type === 'zkEvm') {
+    return import('ui/pages/ZkEvmL2Deposits');
+  }
+
+  if (rollupFeature.isEnabled && rollupFeature.type === 'scroll') {
+    return import('ui/pages/ScrollL2Deposits');
+  }
+
+  throw new Error('Deposits feature is not enabled.');
+}, { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/deposits">
+      <Deposits/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { deposits as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/dispute-games/index.tsx b/pages/dispute-games/index.tsx
new file mode 100644
index 0000000000..fd4c983cc3
--- /dev/null
+++ b/pages/dispute-games/index.tsx
@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+const DisputeGames = dynamic(() => import('ui/pages/OptimisticL2DisputeGames'), { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/dispute-games">
+      <DisputeGames/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { disputeGames as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/gas-tracker.tsx b/pages/gas-tracker.tsx
new file mode 100644
index 0000000000..e407fa5cb5
--- /dev/null
+++ b/pages/gas-tracker.tsx
@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+const GasTracker = dynamic(() => import('ui/pages/GasTracker'), { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/gas-tracker">
+      <GasTracker/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { gasTracker as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/graphiql.tsx b/pages/graphiql.tsx
index 63092129b6..8bcff9cf93 100644
--- a/pages/graphiql.tsx
+++ b/pages/graphiql.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 
 import PageNextJs from 'nextjs/PageNextJs';
 
+import config from 'configs/app';
 import ContentLoader from 'ui/shared/ContentLoader';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
@@ -16,7 +17,9 @@ const Page: NextPage = () => {
 
   return (
     <PageNextJs pathname="/graphiql">
-      <PageTitle title="GraphQL playground"/>
+      <PageTitle
+        title={ config.meta.seo.enhancedDataEnabled ? `GraphiQL ${ config.chain.name } interface` : 'GraphQL playground' }
+      />
       <GraphQL/>
     </PageNextJs>
   );
@@ -24,4 +27,4 @@ const Page: NextPage = () => {
 
 export default Page;
 
-export { base as getServerSideProps } from 'nextjs/getServerSideProps';
+export { graphIQl as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/l2-deposits.tsx b/pages/l2-deposits.tsx
deleted file mode 100644
index 0c445b4706..0000000000
--- a/pages/l2-deposits.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { NextPage } from 'next';
-import dynamic from 'next/dynamic';
-import React from 'react';
-
-import PageNextJs from 'nextjs/PageNextJs';
-
-const L2Deposits = dynamic(() => import('ui/pages/L2Deposits'), { ssr: false });
-
-const Page: NextPage = () => {
-  return (
-    <PageNextJs pathname="/l2-deposits">
-      <L2Deposits/>
-    </PageNextJs>
-  );
-};
-
-export default Page;
-
-export { L2 as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/l2-output-roots.tsx b/pages/l2-output-roots.tsx
deleted file mode 100644
index 06a84a5c9b..0000000000
--- a/pages/l2-output-roots.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { NextPage } from 'next';
-import dynamic from 'next/dynamic';
-import React from 'react';
-
-import PageNextJs from 'nextjs/PageNextJs';
-
-const L2OutputRoots = dynamic(() => import('ui/pages/L2OutputRoots'), { ssr: false });
-
-const Page: NextPage = () => {
-  return (
-    <PageNextJs pathname="/l2-output-roots">
-      <L2OutputRoots/>
-    </PageNextJs>
-  );
-};
-
-export default Page;
-
-export { L2 as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/l2-txn-batches.tsx b/pages/l2-txn-batches.tsx
deleted file mode 100644
index 391a77c283..0000000000
--- a/pages/l2-txn-batches.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { NextPage } from 'next';
-import dynamic from 'next/dynamic';
-import React from 'react';
-
-import PageNextJs from 'nextjs/PageNextJs';
-
-const L2TxnBatches = dynamic(() => import('ui/pages/L2TxnBatches'), { ssr: false });
-
-const Page: NextPage = () => {
-  return (
-    <PageNextJs pathname="/l2-txn-batches">
-      <L2TxnBatches/>
-    </PageNextJs>
-  );
-};
-
-export default Page;
-
-export { L2 as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/l2-withdrawals.tsx b/pages/l2-withdrawals.tsx
deleted file mode 100644
index 0814bf4a10..0000000000
--- a/pages/l2-withdrawals.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { NextPage } from 'next';
-import dynamic from 'next/dynamic';
-import React from 'react';
-
-import PageNextJs from 'nextjs/PageNextJs';
-
-const L2Withdrawals = dynamic(() => import('ui/pages/L2Withdrawals'), { ssr: false });
-
-const Page: NextPage = () => {
-  return (
-    <PageNextJs pathname="/l2-withdrawals">
-      <L2Withdrawals/>
-    </PageNextJs>
-  );
-};
-
-export default Page;
-
-export { L2 as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/login.tsx b/pages/login.tsx
index a74410f613..11562f856b 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -15,4 +15,4 @@ const Page: NextPage = () => {
 
 export default Page;
 
-export { base as getServerSideProps } from 'nextjs/getServerSideProps';
+export { login as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/mud-worlds.tsx b/pages/mud-worlds.tsx
new file mode 100644
index 0000000000..5e970720c4
--- /dev/null
+++ b/pages/mud-worlds.tsx
@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+const MudWorlds = dynamic(() => import('ui/pages/MudWorlds'), { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/mud-worlds">
+      <MudWorlds/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { mud as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/name-domains/[name].tsx b/pages/name-domains/[name].tsx
index 7a01829baa..d9346260b4 100644
--- a/pages/name-domains/[name].tsx
+++ b/pages/name-domains/[name].tsx
@@ -9,7 +9,7 @@ const NameDomain = dynamic(() => import('ui/pages/NameDomain'), { ssr: false });
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/name-domains/[name]" query={ props }>
+    <PageNextJs pathname="/name-domains/[name]" query={ props.query }>
       <NameDomain/>
     </PageNextJs>
   );
diff --git a/pages/op/[hash].tsx b/pages/op/[hash].tsx
index 63080f817c..8a37663e5e 100644
--- a/pages/op/[hash].tsx
+++ b/pages/op/[hash].tsx
@@ -9,7 +9,7 @@ const UserOp = dynamic(() => import('ui/pages/UserOp'), { ssr: false });
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/op/[hash]" query={ props }>
+    <PageNextJs pathname="/op/[hash]" query={ props.query }>
       <UserOp/>
     </PageNextJs>
   );
diff --git a/pages/output-roots/index.tsx b/pages/output-roots/index.tsx
new file mode 100644
index 0000000000..c0fd3a841d
--- /dev/null
+++ b/pages/output-roots/index.tsx
@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+const OutputRoots = dynamic(() => import('ui/pages/OptimisticL2OutputRoots'), { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/output-roots">
+      <OutputRoots/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { outputRoots as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/pools/[hash].tsx b/pages/pools/[hash].tsx
new file mode 100644
index 0000000000..4bb18b039f
--- /dev/null
+++ b/pages/pools/[hash].tsx
@@ -0,0 +1,20 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import type { Props } from 'nextjs/getServerSideProps';
+import PageNextJs from 'nextjs/PageNextJs';
+
+const Pool = dynamic(() => import('ui/pages/Pool'), { ssr: false });
+
+const Page: NextPage<Props> = (props: Props) => {
+  return (
+    <PageNextJs pathname="/pools/[hash]" query={ props.query }>
+      <Pool/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { pools as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/pools/index.tsx b/pages/pools/index.tsx
new file mode 100644
index 0000000000..10530b11bd
--- /dev/null
+++ b/pages/pools/index.tsx
@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+const Pools = dynamic(() => import('ui/pages/Pools'), { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/pools">
+      <Pools/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { pools as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/public-tags/submit.tsx b/pages/public-tags/submit.tsx
new file mode 100644
index 0000000000..071226f11e
--- /dev/null
+++ b/pages/public-tags/submit.tsx
@@ -0,0 +1,18 @@
+import type { NextPage } from 'next';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+import PublicTagsSubmit from 'ui/pages/PublicTagsSubmit';
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/public-tags/submit">
+      <PublicTagsSubmit/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { publicTagsSubmit as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/search-results.tsx b/pages/search-results.tsx
index 460b71b6e3..f69311ef51 100644
--- a/pages/search-results.tsx
+++ b/pages/search-results.tsx
@@ -12,7 +12,7 @@ const SearchResults = dynamic(() => import('ui/pages/SearchResults'), { ssr: fal
 
 const Page: NextPageWithLayout<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/search-results" query={ props }>
+    <PageNextJs pathname="/search-results" query={ props.query }>
       <SearchResults/>
     </PageNextJs>
   );
diff --git a/pages/sprite.tsx b/pages/sprite.tsx
new file mode 100644
index 0000000000..cb90ec0de0
--- /dev/null
+++ b/pages/sprite.tsx
@@ -0,0 +1,18 @@
+import type { NextPage } from 'next';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+import Sprite from 'ui/pages/Sprite';
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/sprite">
+      <Sprite/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { dev as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/stats/[id].tsx b/pages/stats/[id].tsx
new file mode 100644
index 0000000000..6489794e35
--- /dev/null
+++ b/pages/stats/[id].tsx
@@ -0,0 +1,50 @@
+import type { GetServerSideProps, NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import type { Route } from 'nextjs-routes';
+import * as gSSP from 'nextjs/getServerSideProps';
+import type { Props } from 'nextjs/getServerSideProps';
+import PageNextJs from 'nextjs/PageNextJs';
+import detectBotRequest from 'nextjs/utils/detectBotRequest';
+import fetchApi from 'nextjs/utils/fetchApi';
+
+import config from 'configs/app';
+import dayjs from 'lib/date/dayjs';
+import getQueryParamString from 'lib/router/getQueryParamString';
+
+const Chart = dynamic(() => import('ui/pages/Chart'), { ssr: false });
+
+const pathname: Route['pathname'] = '/stats/[id]';
+
+const Page: NextPage<Props<typeof pathname>> = (props: Props<typeof pathname>) => {
+  return (
+    <PageNextJs pathname={ pathname } query={ props.query } apiData={ props.apiData }>
+      <Chart/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export const getServerSideProps: GetServerSideProps<Props<typeof pathname>> = async(ctx) => {
+  const baseResponse = await gSSP.base<typeof pathname>(ctx);
+
+  if ('props' in baseResponse) {
+    if (
+      config.meta.seo.enhancedDataEnabled ||
+      (config.meta.og.enhancedDataEnabled && detectBotRequest(ctx.req)?.type === 'social_preview')
+    ) {
+      const chartData = await fetchApi({
+        resource: 'stats_line',
+        pathParams: { id: getQueryParamString(ctx.query.id) },
+        queryParams: { from: dayjs().format('YYYY-MM-DD'), to: dayjs().format('YYYY-MM-DD') },
+        timeout: 1000,
+      });
+
+      (await baseResponse.props).apiData = chartData?.info ?? null;
+    }
+  }
+
+  return baseResponse;
+};
diff --git a/pages/token-transfers.tsx b/pages/token-transfers.tsx
new file mode 100644
index 0000000000..1901a859d9
--- /dev/null
+++ b/pages/token-transfers.tsx
@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+const TokenTransfers = dynamic(() => import('ui/pages/TokenTransfers'), { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/token-transfers">
+      <TokenTransfers/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { base as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/token/[hash]/index.tsx b/pages/token/[hash]/index.tsx
index 70f41b66fd..0ebe024f69 100644
--- a/pages/token/[hash]/index.tsx
+++ b/pages/token/[hash]/index.tsx
@@ -1,15 +1,22 @@
-import type { NextPage } from 'next';
-import dynamic from 'next/dynamic';
+import type { GetServerSideProps, NextPage } from 'next';
 import React from 'react';
 
+import type { Route } from 'nextjs-routes';
 import type { Props } from 'nextjs/getServerSideProps';
+import * as gSSP from 'nextjs/getServerSideProps';
 import PageNextJs from 'nextjs/PageNextJs';
+import detectBotRequest from 'nextjs/utils/detectBotRequest';
+import fetchApi from 'nextjs/utils/fetchApi';
 
-const Token = dynamic(() => import('ui/pages/Token'), { ssr: false });
+import config from 'configs/app';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import Token from 'ui/pages/Token';
 
-const Page: NextPage<Props> = (props: Props) => {
+const pathname: Route['pathname'] = '/token/[hash]';
+
+const Page: NextPage<Props<typeof pathname>> = (props: Props<typeof pathname>) => {
   return (
-    <PageNextJs pathname="/token/[hash]" query={ props }>
+    <PageNextJs pathname={ pathname } query={ props.query } apiData={ props.apiData }>
       <Token/>
     </PageNextJs>
   );
@@ -17,4 +24,23 @@ const Page: NextPage<Props> = (props: Props) => {
 
 export default Page;
 
-export { base as getServerSideProps } from 'nextjs/getServerSideProps';
+export const getServerSideProps: GetServerSideProps<Props<typeof pathname>> = async(ctx) => {
+  const baseResponse = await gSSP.base<typeof pathname>(ctx);
+
+  if ('props' in baseResponse) {
+    if (
+      config.meta.seo.enhancedDataEnabled ||
+      (config.meta.og.enhancedDataEnabled && detectBotRequest(ctx.req)?.type === 'social_preview')
+    ) {
+      const tokenData = await fetchApi({
+        resource: 'token',
+        pathParams: { hash: getQueryParamString(ctx.query.hash) },
+        timeout: 500,
+      });
+
+      (await baseResponse.props).apiData = tokenData ?? null;
+    }
+  }
+
+  return baseResponse;
+};
diff --git a/pages/token/[hash]/instance/[id].tsx b/pages/token/[hash]/instance/[id].tsx
index 62f0e71b96..62c8d23026 100644
--- a/pages/token/[hash]/instance/[id].tsx
+++ b/pages/token/[hash]/instance/[id].tsx
@@ -1,15 +1,22 @@
-import type { NextPage } from 'next';
-import dynamic from 'next/dynamic';
+import type { GetServerSideProps, NextPage } from 'next';
 import React from 'react';
 
+import type { Route } from 'nextjs-routes';
 import type { Props } from 'nextjs/getServerSideProps';
+import * as gSSP from 'nextjs/getServerSideProps';
 import PageNextJs from 'nextjs/PageNextJs';
+import detectBotRequest from 'nextjs/utils/detectBotRequest';
+import fetchApi from 'nextjs/utils/fetchApi';
 
-const TokenInstance = dynamic(() => import('ui/pages/TokenInstance'), { ssr: false });
+import config from 'configs/app';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import TokenInstance from 'ui/pages/TokenInstance';
 
-const Page: NextPage<Props> = (props: Props) => {
+const pathname: Route['pathname'] = '/token/[hash]/instance/[id]';
+
+const Page: NextPage<Props<typeof pathname>> = (props: Props<typeof pathname>) => {
   return (
-    <PageNextJs pathname="/token/[hash]/instance/[id]" query={ props }>
+    <PageNextJs pathname={ pathname } query={ props.query } apiData={ props.apiData }>
       <TokenInstance/>
     </PageNextJs>
   );
@@ -17,4 +24,24 @@ const Page: NextPage<Props> = (props: Props) => {
 
 export default Page;
 
-export { base as getServerSideProps } from 'nextjs/getServerSideProps';
+export const getServerSideProps: GetServerSideProps<Props<typeof pathname>> = async(ctx) => {
+  const baseResponse = await gSSP.base<typeof pathname>(ctx);
+
+  if (config.meta.og.enhancedDataEnabled && 'props' in baseResponse) {
+    const botInfo = detectBotRequest(ctx.req);
+
+    if (botInfo?.type === 'social_preview') {
+      const tokenData = await fetchApi({
+        resource: 'token',
+        pathParams: { hash: getQueryParamString(ctx.query.hash) },
+        timeout: 1_000,
+      });
+
+      (await baseResponse.props).apiData = tokenData && tokenData.symbol ? {
+        symbol: tokenData.symbol,
+      } : null;
+    }
+  }
+
+  return baseResponse;
+};
diff --git a/pages/tx/[hash].tsx b/pages/tx/[hash].tsx
index 5eae4aedaa..f90b534fc8 100644
--- a/pages/tx/[hash].tsx
+++ b/pages/tx/[hash].tsx
@@ -9,7 +9,7 @@ const Transaction = dynamic(() => import('ui/pages/Transaction'), { ssr: false }
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/tx/[hash]" query={ props }>
+    <PageNextJs pathname="/tx/[hash]" query={ props.query }>
       <Transaction/>
     </PageNextJs>
   );
diff --git a/pages/txs/kettle/[hash].tsx b/pages/txs/kettle/[hash].tsx
index 9b62f6dd0d..35a4470cb2 100644
--- a/pages/txs/kettle/[hash].tsx
+++ b/pages/txs/kettle/[hash].tsx
@@ -9,7 +9,7 @@ const KettleTxs = dynamic(() => import('ui/pages/KettleTxs'), { ssr: false });
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/txs/kettle/[hash]" query={ props }>
+    <PageNextJs pathname="/txs/kettle/[hash]" query={ props.query }>
       <KettleTxs/>
     </PageNextJs>
   );
diff --git a/pages/validators.tsx b/pages/validators.tsx
new file mode 100644
index 0000000000..a234316a58
--- /dev/null
+++ b/pages/validators.tsx
@@ -0,0 +1,33 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+import config from 'configs/app';
+
+const validatorsFeature = config.features.validators;
+
+const Validators = dynamic(() => {
+  if (validatorsFeature.isEnabled && validatorsFeature.chainType === 'stability') {
+    return import('ui/pages/ValidatorsStability');
+  }
+
+  if (validatorsFeature.isEnabled && validatorsFeature.chainType === 'blackfort') {
+    return import('ui/pages/ValidatorsBlackfort');
+  }
+
+  throw new Error('Validators feature is not enabled.');
+}, { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/validators">
+      <Validators/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { validators as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/withdrawals.tsx b/pages/withdrawals.tsx
deleted file mode 100644
index f8df33177f..0000000000
--- a/pages/withdrawals.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { NextPage } from 'next';
-import dynamic from 'next/dynamic';
-import React from 'react';
-
-import PageNextJs from 'nextjs/PageNextJs';
-
-const Withdrawals = dynamic(() => import('ui/pages/Withdrawals'), { ssr: false });
-
-const Page: NextPage = () => {
-  return (
-    <PageNextJs pathname="/withdrawals">
-      <Withdrawals/>
-    </PageNextJs>
-  );
-};
-
-export default Page;
-
-export { beaconChain as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/withdrawals/index.tsx b/pages/withdrawals/index.tsx
new file mode 100644
index 0000000000..eb0da1d5df
--- /dev/null
+++ b/pages/withdrawals/index.tsx
@@ -0,0 +1,49 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+import config from 'configs/app';
+const rollupFeature = config.features.rollup;
+const beaconChainFeature = config.features.beaconChain;
+
+const Withdrawals = dynamic(() => {
+  if (rollupFeature.isEnabled && rollupFeature.type === 'optimistic') {
+    return import('ui/pages/OptimisticL2Withdrawals');
+  }
+
+  if (rollupFeature.isEnabled && rollupFeature.type === 'arbitrum') {
+    return import('ui/pages/ArbitrumL2Withdrawals');
+  }
+
+  if (rollupFeature.isEnabled && rollupFeature.type === 'shibarium') {
+    return import('ui/pages/ShibariumWithdrawals');
+  }
+
+  if (rollupFeature.isEnabled && rollupFeature.type === 'zkEvm') {
+    return import('ui/pages/ZkEvmL2Withdrawals');
+  }
+
+  if (rollupFeature.isEnabled && rollupFeature.type === 'scroll') {
+    return import('ui/pages/ScrollL2Withdrawals');
+  }
+
+  if (beaconChainFeature.isEnabled) {
+    return import('ui/pages/BeaconChainWithdrawals');
+  }
+
+  throw new Error('Withdrawals feature is not enabled.');
+}, { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/withdrawals">
+      <Withdrawals/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { withdrawals as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/zkevm-l2-txn-batch/[number].tsx b/pages/zkevm-l2-txn-batch/[number].tsx
deleted file mode 100644
index b128b8d070..0000000000
--- a/pages/zkevm-l2-txn-batch/[number].tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { NextPage } from 'next';
-import dynamic from 'next/dynamic';
-import React from 'react';
-
-import type { Props } from 'nextjs/getServerSideProps';
-import PageNextJs from 'nextjs/PageNextJs';
-
-const ZkEvmL2TxnBatch = dynamic(() => import('ui/pages/ZkEvmL2TxnBatch'), { ssr: false });
-
-const Page: NextPage<Props> = (props: Props) => {
-  return (
-    <PageNextJs pathname="/zkevm-l2-txn-batch/[number]" query={ props }>
-      <ZkEvmL2TxnBatch/>
-    </PageNextJs>
-  );
-};
-
-export default Page;
-
-export { zkEvmL2 as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/zkevm-l2-txn-batches.tsx b/pages/zkevm-l2-txn-batches.tsx
deleted file mode 100644
index 36b8139216..0000000000
--- a/pages/zkevm-l2-txn-batches.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { NextPage } from 'next';
-import dynamic from 'next/dynamic';
-import React from 'react';
-
-import PageNextJs from 'nextjs/PageNextJs';
-
-const ZkEvmL2TxnBatches = dynamic(() => import('ui/pages/ZkEvmL2TxnBatches'), { ssr: false });
-
-const Page: NextPage = () => {
-  return (
-    <PageNextJs pathname="/zkevm-l2-txn-batches">
-      <ZkEvmL2TxnBatches/>
-    </PageNextJs>
-  );
-};
-
-export default Page;
-
-export { zkEvmL2 as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/playwright-ct.config.ts b/playwright-ct.config.ts
index 3ca605249d..3167c09c59 100644
--- a/playwright-ct.config.ts
+++ b/playwright-ct.config.ts
@@ -4,6 +4,8 @@ import react from '@vitejs/plugin-react';
 import svgr from 'vite-plugin-svgr';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
+import appConfig from 'configs/app';
+
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
@@ -26,14 +28,17 @@ const config: PlaywrightTestConfig = defineConfig({
   /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
 
-  /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
+  /* Opt out of parallel tests. */
+  // on non-performant local machines some tests may fail due to lack of resources
+  // so we opt out of parallel tests in any environment
+  workers: 1,
 
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
 
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
+    baseURL: appConfig.app.baseUrl,
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
@@ -45,7 +50,7 @@ const config: PlaywrightTestConfig = defineConfig({
 
     ctViteConfig: {
       plugins: [
-        tsconfigPaths(),
+        tsconfigPaths({ loose: true, ignoreConfigErrors: true }),
         react(),
         svgr({
           exportAsDefault: true,
@@ -58,17 +63,32 @@ const config: PlaywrightTestConfig = defineConfig({
         minify: false,
       },
       resolve: {
-        alias: {
+        alias: [
           // There is an issue with building these package using vite that I cannot resolve
           // The solution described here - https://github.com/vitejs/vite/issues/9703#issuecomment-1216662109
           // doesn't seam to work well with our setup
           // so for now we just mock these modules in tests
-          '@metamask/post-message-stream': './playwright/mocks/modules/@metamask/post-message-stream.js',
-          '@metamask/providers': './playwright/mocks/modules/@metamask/providers.js',
+          { find: '@metamask/post-message-stream', replacement: './playwright/mocks/modules/@metamask/post-message-stream.js' },
+          { find: '@metamask/providers', replacement: './playwright/mocks/modules/@metamask/providers.js' },
+
+          // '@metamask/sdk imports the browser module as UMD, but @wagmi/connectors expects it to be ESM
+          // so we do a little remapping here
+          { find: '@metamask/sdk', replacement: './node_modules/@metamask/sdk/dist/browser/es/metamask-sdk.js' },
 
           // Mock for growthbook to test feature flags
-          'lib/growthbook/useFeatureValue': './playwright/mocks/lib/growthbook/useFeatureValue.js',
-        },
+          { find: 'lib/growthbook/useFeatureValue', replacement: './playwright/mocks/lib/growthbook/useFeatureValue.js' },
+
+          // Mock for reCaptcha hook
+          { find: 'ui/shared/reCaptcha/useReCaptcha', replacement: './playwright/mocks/ui/shared/recaptcha/useReCaptcha.js' },
+
+          // The createWeb3Modal() function from web3modal/wagmi/react somehow pollutes the global styles which causes the tests to fail
+          // We don't call this function in TestApp and since we use useWeb3Modal() and useWeb3ModalState() hooks in the code, we have to mock the module
+          // Otherwise it will complain that createWeb3Modal() is no called before the hooks are used
+          { find: /^@reown\/appkit\/react$/, replacement: './playwright/mocks/modules/@reown/appkit/react.js' },
+
+          { find: '/playwright/index.ts', replacement: './playwright/index.ts' },
+          { find: '/playwright/envs.js', replacement: './playwright/envs.js' },
+        ],
       },
       define: {
         'process.env': '__envs', // Port process.env over window.__envs
diff --git a/playwright/TestApp.tsx b/playwright/TestApp.tsx
index b4b246a621..cd9237cac2 100644
--- a/playwright/TestApp.tsx
+++ b/playwright/TestApp.tsx
@@ -1,56 +1,67 @@
 import { ChakraProvider } from '@chakra-ui/react';
 import { GrowthBookProvider } from '@growthbook/growthbook-react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react';
 import React from 'react';
-import { WagmiConfig } from 'wagmi';
-import { mainnet } from 'wagmi/chains';
+import { http } from 'viem';
+import { WagmiProvider, createConfig } from 'wagmi';
+import { mock } from 'wagmi/connectors';
 
 import type { Props as PageProps } from 'nextjs/getServerSideProps';
 
+import config from 'configs/app';
 import { AppContextProvider } from 'lib/contexts/app';
+import { MarketplaceContext } from 'lib/contexts/marketplace';
+import { RewardsContextProvider } from 'lib/contexts/rewards';
+import { SettingsContextProvider } from 'lib/contexts/settings';
 import { SocketProvider } from 'lib/socket/context';
-import * as app from 'playwright/utils/app';
-import theme from 'theme';
+import currentChain from 'lib/web3/currentChain';
+import theme from 'theme/theme';
 
-type Props = {
+import { port as socketPort } from './utils/socket';
+
+export type Props = {
   children: React.ReactNode;
   withSocket?: boolean;
+  withWalletClient?: boolean;
   appContext?: {
     pageProps: PageProps;
   };
-}
+  marketplaceContext?: {
+    isAutoConnectDisabled: boolean;
+    setIsAutoConnectDisabled: (isAutoConnectDisabled: boolean) => void;
+  };
+};
 
 const defaultAppContext = {
   pageProps: {
     cookies: '',
     referrer: '',
-    id: '',
-    height_or_hash: '',
-    hash: '',
-    number: '',
-    q: '',
-    name: '',
+    query: {},
+    adBannerProvider: 'slise' as const,
+    apiData: null,
   },
 };
 
-// >>> Web3 stuff
-const chains = [ mainnet ];
-const WALLET_CONNECT_PROJECT_ID = 'PROJECT_ID';
-
-const wagmiConfig = defaultWagmiConfig({
-  chains,
-  projectId: WALLET_CONNECT_PROJECT_ID,
-});
+const defaultMarketplaceContext = {
+  isAutoConnectDisabled: false,
+  setIsAutoConnectDisabled: () => {},
+};
 
-createWeb3Modal({
-  wagmiConfig,
-  projectId: WALLET_CONNECT_PROJECT_ID,
-  chains,
+const wagmiConfig = createConfig({
+  chains: [ currentChain ],
+  connectors: [
+    mock({
+      accounts: [
+        '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
+      ],
+    }),
+  ],
+  transports: {
+    [currentChain.id]: http(),
+  },
 });
-// <<<<
 
-const TestApp = ({ children, withSocket, appContext = defaultAppContext }: Props) => {
+const TestApp = ({ children, withSocket, appContext = defaultAppContext, marketplaceContext = defaultMarketplaceContext }: Props) => {
   const [ queryClient ] = React.useState(() => new QueryClient({
     defaultOptions: {
       queries: {
@@ -63,13 +74,19 @@ const TestApp = ({ children, withSocket, appContext = defaultAppContext }: Props
   return (
     <ChakraProvider theme={ theme }>
       <QueryClientProvider client={ queryClient }>
-        <SocketProvider url={ withSocket ? `ws://${ app.domain }:${ app.socketPort }` : undefined }>
+        <SocketProvider url={ withSocket ? `ws://${ config.app.host }:${ socketPort }` : undefined }>
           <AppContextProvider { ...appContext }>
-            <GrowthBookProvider>
-              <WagmiConfig config={ wagmiConfig }>
-                { children }
-              </WagmiConfig>
-            </GrowthBookProvider>
+            <MarketplaceContext.Provider value={ marketplaceContext }>
+              <SettingsContextProvider>
+                <GrowthBookProvider>
+                  <WagmiProvider config={ wagmiConfig }>
+                    <RewardsContextProvider>
+                      { children }
+                    </RewardsContextProvider>
+                  </WagmiProvider>
+                </GrowthBookProvider>
+              </SettingsContextProvider>
+            </MarketplaceContext.Provider>
           </AppContextProvider>
         </SocketProvider>
       </QueryClientProvider>
diff --git a/playwright/fixtures/auth.ts b/playwright/fixtures/auth.ts
index 4a2aea71f1..0bda117392 100644
--- a/playwright/fixtures/auth.ts
+++ b/playwright/fixtures/auth.ts
@@ -1,8 +1,13 @@
-import type { BrowserContext } from '@playwright/test';
+import type { BrowserContext, TestFixture } from '@playwright/test';
 
+import config from 'configs/app';
 import * as cookies from 'lib/cookies';
-import { domain } from 'playwright/utils/app';
 
-export default function authFixture(context: BrowserContext) {
-  context.addCookies([ { name: cookies.NAMES.API_TOKEN, value: 'foo', domain, path: '/' } ]);
+export function authenticateUser(context: BrowserContext) {
+  context.addCookies([ { name: cookies.NAMES.API_TOKEN, value: 'foo', domain: config.app.host, path: '/' } ]);
 }
+
+export const contextWithAuth: TestFixture<BrowserContext, { context: BrowserContext }> = async({ context }, use) => {
+  authenticateUser(context);
+  use(context);
+};
diff --git a/playwright/fixtures/contextWithEnvs.ts b/playwright/fixtures/contextWithEnvs.ts
deleted file mode 100644
index e703a922fb..0000000000
--- a/playwright/fixtures/contextWithEnvs.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { test } from '@playwright/experimental-ct-react';
-
-import createContextWithStorage from './createContextWithStorage';
-
-interface Env {
-  name: string;
-  value: string;
-}
-
-// keep in mind that all passed variables here should be present in env config files (.env.pw or .env.poa)
-export default function contextWithEnvsFixture(envs: Array<Env>): Parameters<typeof test.extend>[0]['context'] {
-  return async({ browser }, use) => {
-    const context = await createContextWithStorage(browser, envs);
-
-    await use(context);
-    await context.close();
-  };
-}
diff --git a/playwright/fixtures/contextWithFeatures.ts b/playwright/fixtures/contextWithFeatures.ts
deleted file mode 100644
index a9c7836937..0000000000
--- a/playwright/fixtures/contextWithFeatures.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { test } from '@playwright/experimental-ct-react';
-
-import createContextWithStorage from './createContextWithStorage';
-
-interface Feature {
-  id: string;
-  value: unknown;
-}
-
-export default function contextWithFeaturesFixture(envs: Array<Feature>): Parameters<typeof test.extend>[0]['context'] {
-  return async({ browser }, use) => {
-    const storageItems = envs.map(({ id, value }) => ({ name: `pw_feature:${ id }`, value: JSON.stringify(value) }));
-    const context = await createContextWithStorage(browser, storageItems);
-
-    await use(context);
-    await context.close();
-  };
-}
diff --git a/playwright/fixtures/createContextWithStorage.ts b/playwright/fixtures/createContextWithStorage.ts
deleted file mode 100644
index f2555b37c0..0000000000
--- a/playwright/fixtures/createContextWithStorage.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { Browser } from '@playwright/test';
-
-import * as app from 'playwright/utils/app';
-
-export default async function createContextWithEnvs(browser: Browser, localStorage: Array<{ name: string; value: string }>) {
-  return browser.newContext({
-    storageState: {
-      origins: [
-        { origin: app.url, localStorage },
-      ],
-      cookies: [],
-    },
-  });
-}
diff --git a/playwright/fixtures/injectMetaMaskProvider.ts b/playwright/fixtures/injectMetaMaskProvider.ts
new file mode 100644
index 0000000000..f09ee81a43
--- /dev/null
+++ b/playwright/fixtures/injectMetaMaskProvider.ts
@@ -0,0 +1,18 @@
+import type { TestFixture, Page } from '@playwright/test';
+
+import type { WalletProvider } from 'types/web3';
+
+export type InjectMetaMaskProvider = () => Promise<void>;
+
+const fixture: TestFixture<InjectMetaMaskProvider, { page: Page }> = async({ page }, use) => {
+  await use(async() => {
+    await page.evaluate(() => {
+      window.ethereum = {
+        isMetaMask: true,
+        _events: {},
+      } as WalletProvider;
+    });
+  });
+};
+
+export default fixture;
diff --git a/playwright/fixtures/mockApiResponse.ts b/playwright/fixtures/mockApiResponse.ts
new file mode 100644
index 0000000000..ba4ebf4b0c
--- /dev/null
+++ b/playwright/fixtures/mockApiResponse.ts
@@ -0,0 +1,28 @@
+import type { TestFixture, Page } from '@playwright/test';
+
+import buildUrl from 'lib/api/buildUrl';
+import type { ResourceName, ResourcePayload } from 'lib/api/resources';
+
+interface Options<R extends ResourceName> {
+  pathParams?: Parameters<typeof buildUrl<R>>[1];
+  queryParams?: Parameters<typeof buildUrl<R>>[2];
+  times?: number;
+  status?: number;
+}
+
+export type MockApiResponseFixture = <R extends ResourceName>(resourceName: R, responseMock: ResourcePayload<R>, options?: Options<R>) => Promise<string>;
+
+const fixture: TestFixture<MockApiResponseFixture, { page: Page }> = async({ page }, use) => {
+  await use(async(resourceName, responseMock, options) => {
+    const apiUrl = buildUrl(resourceName, options?.pathParams, options?.queryParams);
+
+    await page.route(apiUrl, (route) => route.fulfill({
+      status: options?.status ?? 200,
+      json: responseMock,
+    }), { times: options?.times });
+
+    return apiUrl;
+  });
+};
+
+export default fixture;
diff --git a/playwright/fixtures/mockAssetResponse.ts b/playwright/fixtures/mockAssetResponse.ts
new file mode 100644
index 0000000000..8da0b75fea
--- /dev/null
+++ b/playwright/fixtures/mockAssetResponse.ts
@@ -0,0 +1,15 @@
+import type { TestFixture, Page } from '@playwright/test';
+
+export type MockAssetResponseFixture = (url: string, path: string) => Promise<void>;
+
+const fixture: TestFixture<MockAssetResponseFixture, { page: Page }> = async({ page }, use) => {
+  await use(async(url, path) => {
+
+    await page.route(url, (route) => route.fulfill({
+      status: 200,
+      path,
+    }));
+  });
+};
+
+export default fixture;
diff --git a/playwright/fixtures/mockConfigResponse.ts b/playwright/fixtures/mockConfigResponse.ts
new file mode 100644
index 0000000000..e272486767
--- /dev/null
+++ b/playwright/fixtures/mockConfigResponse.ts
@@ -0,0 +1,28 @@
+import type { TestFixture, Page } from '@playwright/test';
+
+import config from 'configs/app';
+import { buildExternalAssetFilePath } from 'configs/app/utils';
+
+export type MockConfigResponseFixture = (envName: string, envValue: string, content: unknown, isImage?: boolean) => Promise<string>;
+
+const fixture: TestFixture<MockConfigResponseFixture, { page: Page }> = async({ page }, use) => {
+  await use(async(envName, envValue, content, isImage) => {
+    const url = config.app.baseUrl + buildExternalAssetFilePath(envName, envValue);
+
+    if (isImage && typeof content === 'string') {
+      await page.route(url, (route) => route.fulfill({
+        status: 200,
+        path: content,
+      }));
+    } else {
+      await page.route(url, (route) => route.fulfill({
+        status: 200,
+        json: content,
+      }));
+    }
+
+    return url;
+  });
+};
+
+export default fixture;
diff --git a/playwright/fixtures/mockContractReadResponse.ts b/playwright/fixtures/mockContractReadResponse.ts
new file mode 100644
index 0000000000..1245724c69
--- /dev/null
+++ b/playwright/fixtures/mockContractReadResponse.ts
@@ -0,0 +1,64 @@
+import type { TestFixture, Page } from '@playwright/test';
+import _isEqual from 'lodash/isEqual';
+import { encodeFunctionData, encodeFunctionResult, type AbiFunction } from 'viem';
+
+import { getEnvValue } from 'configs/app/utils';
+
+interface Params {
+  abiItem: AbiFunction;
+  args?: Array<unknown>;
+  address: string;
+  result: Array<unknown>;
+}
+
+export type MockContractReadResponseFixture = (params: Params) => Promise<void>;
+
+const fixture: TestFixture<MockContractReadResponseFixture, { page: Page }> = async({ page }, use) => {
+  await use(async({ abiItem, args = [], address, result }) => {
+    const rpcUrl = getEnvValue('NEXT_PUBLIC_NETWORK_RPC_URL');
+
+    if (!rpcUrl) {
+      return;
+    }
+
+    await page.route(rpcUrl, (route) => {
+      const method = route.request().method();
+
+      if (method !== 'POST') {
+        route.continue();
+        return;
+      }
+
+      const json = route.request().postDataJSON();
+      const params = json?.params?.[0];
+      const id = json?.id;
+
+      const callParams = {
+        data: encodeFunctionData({
+          abi: [ abiItem ],
+          functionName: abiItem.name,
+          args,
+        }),
+        to: address,
+        value: params?.value,
+      };
+
+      if (_isEqual(params, callParams) && id) {
+        return route.fulfill({
+          status: 200,
+          json: {
+            id,
+            jsonrpc: '2.0',
+            result: encodeFunctionResult({
+              abi: [ abiItem ],
+              functionName: abiItem.name,
+              result,
+            }),
+          },
+        });
+      }
+    });
+  });
+};
+
+export default fixture;
diff --git a/playwright/fixtures/mockEnvs.ts b/playwright/fixtures/mockEnvs.ts
new file mode 100644
index 0000000000..35de51e324
--- /dev/null
+++ b/playwright/fixtures/mockEnvs.ts
@@ -0,0 +1,96 @@
+/* eslint-disable max-len */
+import type { TestFixture, Page } from '@playwright/test';
+
+export type MockEnvsFixture = (envs: Array<[string, string]>) => Promise<void>;
+
+const fixture: TestFixture<MockEnvsFixture, { page: Page }> = async({ page }, use) => {
+  await use(async(envs) => {
+    for (const [ name, value ] of envs) {
+      await page.evaluate(({ name, value }) => {
+        window.localStorage.setItem(name, value);
+      }, { name, value });
+    }
+  });
+};
+
+export default fixture;
+
+export const ENVS_MAP: Record<string, Array<[string, string]>> = {
+  optimisticRollup: [
+    [ 'NEXT_PUBLIC_ROLLUP_TYPE', 'optimistic' ],
+    [ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
+    [ 'NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL', 'https://localhost:3102' ],
+    [ 'NEXT_PUBLIC_FAULT_PROOF_ENABLED', 'true' ],
+  ],
+  arbitrumRollup: [
+    [ 'NEXT_PUBLIC_ROLLUP_TYPE', 'arbitrum' ],
+    [ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
+    [ 'NEXT_PUBLIC_ROLLUP_PARENT_CHAIN_NAME', 'DuckChain' ],
+  ],
+  shibariumRollup: [
+    [ 'NEXT_PUBLIC_ROLLUP_TYPE', 'shibarium' ],
+    [ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
+  ],
+  zkEvmRollup: [
+    [ 'NEXT_PUBLIC_ROLLUP_TYPE', 'zkEvm' ],
+    [ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
+  ],
+  zkSyncRollup: [
+    [ 'NEXT_PUBLIC_ROLLUP_TYPE', 'zkSync' ],
+    [ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
+    [ 'NEXT_PUBLIC_VIEWS_CONTRACT_EXTRA_VERIFICATION_METHODS', 'none' ],
+  ],
+  scrollRollup: [
+    [ 'NEXT_PUBLIC_ROLLUP_TYPE', 'scroll' ],
+    [ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
+  ],
+  bridgedTokens: [
+    [ 'NEXT_PUBLIC_BRIDGED_TOKENS_CHAINS', '[{"id":"1","title":"Ethereum","short_title":"ETH","base_url":"https://eth.blockscout.com/token/"},{"id":"56","title":"Binance Smart Chain","short_title":"BSC","base_url":"https://bscscan.com/token/"},{"id":"99","title":"POA","short_title":"POA","base_url":"https://blockscout.com/poa/core/token/"}]' ],
+    [ 'NEXT_PUBLIC_BRIDGED_TOKENS_BRIDGES', '[{"type":"omni","title":"OmniBridge","short_title":"OMNI"},{"type":"amb","title":"Arbitrary Message Bridge","short_title":"AMB"}]' ],
+  ],
+  userOps: [
+    [ 'NEXT_PUBLIC_HAS_USER_OPS', 'true' ],
+  ],
+  hasContractAuditReports: [
+    [ 'NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS', 'true' ],
+  ],
+  blockHiddenFields: [
+    [ 'NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS', '["burnt_fees", "total_reward", "nonce"]' ],
+  ],
+  stabilityEnvs: [
+    [ 'NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS', '["top_accounts"]' ],
+    [ 'NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS', '["value","fee_currency","gas_price","gas_fees","burnt_fees"]' ],
+    [ 'NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS', '["fee_per_gas"]' ],
+  ],
+  beaconChain: [
+    [ 'NEXT_PUBLIC_HAS_BEACON_CHAIN', 'true' ],
+  ],
+  txInterpretation: [
+    [ 'NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER', 'blockscout' ],
+  ],
+  noWalletClient: [
+    [ 'NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID', '' ],
+  ],
+  noAccount: [
+    [ 'NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED', 'false' ],
+  ],
+  noNftMarketplaces: [
+    [ 'NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES', '' ],
+  ],
+  navigationHighlightedRoutes: [
+    [ 'NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES', '["/blocks", "/apps"]' ],
+  ],
+  dataAvailability: [
+    [ 'NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED', 'true' ],
+  ],
+  nameService: [
+    [ 'NEXT_PUBLIC_NAME_SERVICE_API_HOST', 'https://localhost:3101' ],
+  ],
+  rewardsService: [
+    [ 'NEXT_PUBLIC_REWARDS_SERVICE_API_HOST', 'http://localhost:3003' ],
+  ],
+  addressBech32Format: [
+    [ 'NEXT_PUBLIC_ADDRESS_FORMAT', '["bech32","base16"]' ],
+    [ 'NEXT_PUBLIC_VIEWS_ADDRESS_BECH_32_PREFIX', 'tom' ],
+  ],
+};
diff --git a/playwright/fixtures/mockFeatures.ts b/playwright/fixtures/mockFeatures.ts
new file mode 100644
index 0000000000..55df9abca5
--- /dev/null
+++ b/playwright/fixtures/mockFeatures.ts
@@ -0,0 +1,15 @@
+import type { TestFixture, Page } from '@playwright/test';
+
+export type MockFeaturesFixture = (features: Array<[string, unknown]>) => Promise<void>;
+
+const fixture: TestFixture<MockFeaturesFixture, { page: Page }> = async({ page }, use) => {
+  await use(async(features) => {
+    for (const [ name, value ] of features) {
+      await page.evaluate(({ name, value }) => {
+        window.localStorage.setItem(`pw_feature:${ name }`, JSON.stringify(value));
+      }, { name, value });
+    }
+  });
+};
+
+export default fixture;
diff --git a/playwright/fixtures/mockRpcResponse.ts b/playwright/fixtures/mockRpcResponse.ts
new file mode 100644
index 0000000000..b257599fe3
--- /dev/null
+++ b/playwright/fixtures/mockRpcResponse.ts
@@ -0,0 +1,51 @@
+import type { TestFixture, Page } from '@playwright/test';
+import _isEqual from 'lodash/isEqual';
+import type { PublicRpcSchema } from 'viem';
+
+import { getEnvValue } from 'configs/app/utils';
+
+type Params = PublicRpcSchema[number];
+
+export type MockRpcResponseFixture = (params: Params) => Promise<void>;
+
+const fixture: TestFixture<MockRpcResponseFixture, { page: Page }> = async({ page }, use) => {
+  await use(async(rpcMock) => {
+    const rpcUrl = getEnvValue('NEXT_PUBLIC_NETWORK_RPC_URL');
+
+    if (!rpcUrl) {
+      return;
+    }
+
+    await page.route(rpcUrl, (route) => {
+      const method = route.request().method();
+
+      if (method !== 'POST') {
+        route.continue();
+        return;
+      }
+
+      const json = route.request().postDataJSON();
+      const id = json?.id;
+
+      const payload = {
+        id,
+        jsonrpc: '2.0',
+        method: rpcMock.Method,
+        ...(rpcMock.Parameters ? { params: rpcMock.Parameters } : {}),
+      };
+
+      if (_isEqual(json, payload) && id !== undefined) {
+        return route.fulfill({
+          status: 200,
+          json: {
+            id,
+            jsonrpc: '2.0',
+            result: rpcMock.ReturnType,
+          },
+        });
+      }
+    });
+  });
+};
+
+export default fixture;
diff --git a/playwright/fixtures/mockTextAd.ts b/playwright/fixtures/mockTextAd.ts
new file mode 100644
index 0000000000..e473e4ac87
--- /dev/null
+++ b/playwright/fixtures/mockTextAd.ts
@@ -0,0 +1,23 @@
+import type { TestFixture, Page } from '@playwright/test';
+
+import * as textAdMock from 'mocks/ad/textAd';
+
+export type MockTextAdFixture = () => Promise<void>;
+
+const fixture: TestFixture<MockTextAdFixture, { page: Page }> = async({ page }, use) => {
+  await use(async() => {
+
+    await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
+      status: 200,
+      json: textAdMock.duck,
+    }));
+    await page.route(textAdMock.duck.ad.thumbnail, (route) => {
+      return route.fulfill({
+        status: 200,
+        path: './playwright/mocks/image_s.jpg',
+      });
+    });
+  });
+};
+
+export default fixture;
diff --git a/playwright/fixtures/render.tsx b/playwright/fixtures/render.tsx
new file mode 100644
index 0000000000..d46af27a48
--- /dev/null
+++ b/playwright/fixtures/render.tsx
@@ -0,0 +1,36 @@
+/* eslint-disable no-restricted-imports */
+import type { MountOptions } from '@playwright/experimental-ct-react';
+import type { Locator, TestFixture } from '@playwright/test';
+import type router from 'next/router';
+import React from 'react';
+
+import type { Props as TestAppProps } from 'playwright/TestApp';
+import TestApp from 'playwright/TestApp';
+
+interface MountResult extends Locator {
+  unmount(): Promise<void>;
+  update(component: React.JSX.Element): Promise<void>;
+}
+
+interface AppHooksConfig {
+  router: Partial<Pick<typeof router, 'query' | 'isReady' | 'asPath' | 'pathname'>>;
+}
+
+type Mount = <HooksConfig extends AppHooksConfig>(component: React.JSX.Element, options?: MountOptions<HooksConfig>) => Promise<MountResult>;
+
+export type RenderFixture = (
+  component: React.JSX.Element,
+  options?: MountOptions<AppHooksConfig>,
+  props?: Omit<TestAppProps, 'children'>
+) => Promise<MountResult>;
+
+const fixture: TestFixture<RenderFixture, { mount: Mount }> = async({ mount }, use) => {
+  await use((component, options, props) => {
+    return mount(
+      <TestApp { ...props }>{ component }</TestApp>,
+      options,
+    );
+  });
+};
+
+export default fixture;
diff --git a/playwright/fixtures/rewards.ts b/playwright/fixtures/rewards.ts
new file mode 100644
index 0000000000..fc6052f477
--- /dev/null
+++ b/playwright/fixtures/rewards.ts
@@ -0,0 +1,16 @@
+import type { BrowserContext, TestFixture } from '@playwright/test';
+
+import config from 'configs/app';
+import * as cookies from 'lib/cookies';
+
+// This JWT token contains 0xd789a607CEac2f0E14867de4EB15b15C9FFB5859 address
+const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIweGQ3ODlhNjA3Q0VhYzJmMEUxNDg2N2RlNEVCMTViMTVDOUZGQjU4NTkiLCJpYXQiOjE3MzA0NzAyNTIsImV4cCI6MTczMDQ3MDU1Mn0.uhWH59mJQhpWcK8RHaLQ-X_nieXZsYE-VdcPrjYNvp4'; // eslint-disable-line max-len
+
+export function authenticateUser(context: BrowserContext) {
+  context.addCookies([ { name: cookies.NAMES.REWARDS_API_TOKEN, value: token, domain: config.app.host, path: '/' } ]);
+}
+
+export const contextWithRewards: TestFixture<BrowserContext, { context: BrowserContext }> = async({ context }, use) => {
+  authenticateUser(context);
+  use(context);
+};
diff --git a/playwright/fixtures/socketServer.ts b/playwright/fixtures/socketServer.ts
index 43c3726371..19e94f878a 100644
--- a/playwright/fixtures/socketServer.ts
+++ b/playwright/fixtures/socketServer.ts
@@ -5,22 +5,23 @@ import { WebSocketServer } from 'ws';
 import type { AddressCoinBalanceHistoryItem, AddressTokensBalancesSocketMessage } from 'types/api/address';
 import type { NewBlockSocketResponse } from 'types/api/block';
 import type { SmartContractVerificationResponse } from 'types/api/contract';
+import type { TokenInstanceMetadataSocketMessage } from 'types/api/token';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 import type { Transaction } from 'types/api/transaction';
 
-import * as app from 'playwright/utils/app';
+import { port as socketPort } from '../utils/socket';
 
-type ReturnType = () => Promise<WebSocket>;
+export type CreateSocketFixture = () => Promise<WebSocket>;
 
 type Channel = [string, string, string];
 
 export interface SocketServerFixture {
-  createSocket: ReturnType;
+  createSocket: CreateSocketFixture;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const createSocket: TestFixture<ReturnType, { page: Page}> = async({ page }, use) => {
-  const socketServer = new WebSocketServer({ port: app.socketPort });
+export const createSocket: TestFixture<CreateSocketFixture, { page: Page }> = async({ page }, use) => {
+  const socketServer = new WebSocketServer({ port: socketPort });
 
   const connectionPromise = new Promise<WebSocket>((resolve) => {
     socketServer.on('connection', (socket: WebSocket) => {
@@ -62,16 +63,19 @@ export function sendMessage(socket: WebSocket, channel: Channel, msg: 'token_bal
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'updated_token_balances_erc_20', payload: AddressTokensBalancesSocketMessage): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'updated_token_balances_erc_721', payload: AddressTokensBalancesSocketMessage): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'updated_token_balances_erc_1155', payload: AddressTokensBalancesSocketMessage): void;
+export function sendMessage(socket: WebSocket, channel: Channel, msg: 'updated_token_balances_erc_404', payload: AddressTokensBalancesSocketMessage): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'transaction', payload: { transaction: number }): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'transaction', payload: { transactions: Array<Transaction> }): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'pending_transaction', payload: { pending_transaction: number }): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'pending_transaction', payload: { pending_transactions: Array<Transaction> }): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'new_block', payload: NewBlockSocketResponse): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'verification_result', payload: SmartContractVerificationResponse): void;
-export function sendMessage(socket: WebSocket, channel: Channel, msg: 'total_supply', payload: { total_supply: number}): void;
+export function sendMessage(socket: WebSocket, channel: Channel, msg: 'total_supply', payload: { total_supply: number }): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'changed_bytecode', payload: Record<string, never>): void;
+export function sendMessage(socket: WebSocket, channel: Channel, msg: 'fetched_bytecode', payload: { fetched_bytecode: string }): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'smart_contract_was_verified', payload: Record<string, never>): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'token_transfer', payload: { token_transfers: Array<TokenTransfer> }): void;
+export function sendMessage(socket: WebSocket, channel: Channel, msg: 'fetched_token_instance_metadata', payload: TokenInstanceMetadataSocketMessage): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: string, payload: unknown): void {
   socket.send(JSON.stringify([
     ...channel,
diff --git a/playwright/index.ts b/playwright/index.ts
index 879cfa0127..96c506e9fc 100644
--- a/playwright/index.ts
+++ b/playwright/index.ts
@@ -9,12 +9,14 @@ const NEXT_ROUTER_MOCK = {
   query: {},
   pathname: '',
   push: () => Promise.resolve(),
+  replace: () => Promise.resolve(),
 };
 
 beforeMount(async({ hooksConfig }) => {
   // Before mount, redefine useRouter to return mock value from test.
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+
   // @ts-ignore: I really want to redefine this property :)
+  // eslint-disable-next-line no-import-assign
   router.useRouter = () => _defaultsDeep(hooksConfig?.router, NEXT_ROUTER_MOCK);
 
   // set current date
diff --git a/playwright/lib.tsx b/playwright/lib.tsx
new file mode 100644
index 0000000000..97448315e9
--- /dev/null
+++ b/playwright/lib.tsx
@@ -0,0 +1,76 @@
+/* eslint-disable no-console */
+import { test as base } from '@playwright/experimental-ct-react';
+import type { Page } from '@playwright/test';
+
+import * as injectMetaMaskProvider from './fixtures/injectMetaMaskProvider';
+import * as mockApiResponse from './fixtures/mockApiResponse';
+import * as mockAssetResponse from './fixtures/mockAssetResponse';
+import * as mockConfigResponse from './fixtures/mockConfigResponse';
+import * as mockContractReadResponse from './fixtures/mockContractReadResponse';
+import * as mockEnvs from './fixtures/mockEnvs';
+import * as mockFeatures from './fixtures/mockFeatures';
+import * as mockRpcResponse from './fixtures/mockRpcResponse';
+import * as mockTextAd from './fixtures/mockTextAd';
+import * as render from './fixtures/render';
+import * as socketServer from './fixtures/socketServer';
+
+export interface Fixtures {
+  render: render.RenderFixture;
+  mockApiResponse: mockApiResponse.MockApiResponseFixture;
+  mockAssetResponse: mockAssetResponse.MockAssetResponseFixture;
+  mockConfigResponse: mockConfigResponse.MockConfigResponseFixture;
+  mockContractReadResponse: mockContractReadResponse.MockContractReadResponseFixture;
+  mockEnvs: mockEnvs.MockEnvsFixture;
+  mockFeatures: mockFeatures.MockFeaturesFixture;
+  mockRpcResponse: mockRpcResponse.MockRpcResponseFixture;
+  createSocket: socketServer.CreateSocketFixture;
+  injectMetaMaskProvider: injectMetaMaskProvider.InjectMetaMaskProvider;
+  mockTextAd: mockTextAd.MockTextAdFixture;
+}
+
+export type TestFnArgs = Fixtures & { page: Page };
+
+const test = base.extend<Fixtures>({
+  render: render.default,
+  mockApiResponse: mockApiResponse.default,
+  mockAssetResponse: mockAssetResponse.default,
+  mockConfigResponse: mockConfigResponse.default,
+  mockContractReadResponse: mockContractReadResponse.default,
+  mockEnvs: mockEnvs.default,
+  mockFeatures: mockFeatures.default,
+  mockRpcResponse: mockRpcResponse.default,
+  // FIXME: for some reason Playwright does not intercept requests to text ad provider when running multiple tests in parallel
+  // even if we have a global request interceptor (maybe it is related to service worker issue, maybe not)
+  // so we have to inject mockTextAd fixture in each test and mock the response where it is needed
+  mockTextAd: mockTextAd.default,
+  createSocket: socketServer.createSocket,
+  injectMetaMaskProvider: injectMetaMaskProvider.default,
+});
+
+test.beforeEach(async({ page, mockTextAd }) => {
+  // debug
+  const isDebug = process.env.PWDEBUG === '1';
+
+  if (isDebug) {
+    page.on('console', msg => console.log(msg.text()));
+    page.on('request', request => console.info('\x1b[34m%s\x1b[0m', '>>', request.method(), request.url()));
+    page.on('response', response => console.info('\x1b[35m%s\x1b[0m', '<<', String(response.status()), response.url()));
+  }
+
+  // Abort all other requests to external resources
+  await page.route('**', (route) => {
+    if (!route.request().url().startsWith('http://localhost')) {
+      isDebug && console.info('Aborting request to', route.request().url());
+      route.abort();
+    } else {
+      route.continue();
+    }
+  });
+
+  // with few exceptions:
+  //  1. mock text AD requests
+  await mockTextAd();
+});
+
+export * from '@playwright/experimental-ct-react';
+export { test };
diff --git a/playwright/mocks/lib/growthbook/useFeatureValue.js b/playwright/mocks/lib/growthbook/useFeatureValue.js
index e3c810f70b..e731be89f3 100644
--- a/playwright/mocks/lib/growthbook/useFeatureValue.js
+++ b/playwright/mocks/lib/growthbook/useFeatureValue.js
@@ -1,6 +1,9 @@
 const useFeatureValue = (name, fallback) => {
   try {
     const value = JSON.parse(localStorage.getItem(`pw_feature:${ name }`));
+    if (value === null) {
+      throw new Error();
+    }
     return { isLoading: false, value };
   } catch (error) {
     return { isLoading: false, value: fallback };
diff --git a/playwright/mocks/modules/@reown/appkit/react.js b/playwright/mocks/modules/@reown/appkit/react.js
new file mode 100644
index 0000000000..4cc9ebd0df
--- /dev/null
+++ b/playwright/mocks/modules/@reown/appkit/react.js
@@ -0,0 +1,26 @@
+function useAppKit() {
+  return {
+    open: () => {},
+  };
+}
+
+function useAppKitState() {
+  return {
+    isOpen: false,
+  };
+}
+
+function useAppKitTheme() {
+  return {
+    setThemeMode: () => {},
+  };
+}
+
+function createAppKit() {}
+
+export {
+  createAppKit,
+  useAppKit,
+  useAppKitState,
+  useAppKitTheme,
+};
diff --git a/playwright/mocks/ui/shared/recaptcha/useReCaptcha.js b/playwright/mocks/ui/shared/recaptcha/useReCaptcha.js
new file mode 100644
index 0000000000..7d4b9de477
--- /dev/null
+++ b/playwright/mocks/ui/shared/recaptcha/useReCaptcha.js
@@ -0,0 +1,8 @@
+const useReCaptcha = () => {
+  return {
+    ref: { current: null },
+    executeAsync: () => Promise.resolve('recaptcha_token'),
+  };
+};
+
+export default useReCaptcha;
diff --git a/playwright/utils/app.ts b/playwright/utils/app.ts
deleted file mode 100644
index 475376830e..0000000000
--- a/playwright/utils/app.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const url = `${ process.env.NEXT_PUBLIC_APP_PROTOCOL }://${ process.env.NEXT_PUBLIC_APP_HOST }:${ process.env.NEXT_PUBLIC_APP_PORT }`;
-
-export const domain = process.env.NEXT_PUBLIC_APP_HOST;
-
-export const socketPort = 3200;
diff --git a/playwright/utils/buildApiUrl.ts b/playwright/utils/buildApiUrl.ts
deleted file mode 100644
index 4279efb71d..0000000000
--- a/playwright/utils/buildApiUrl.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { compile } from 'path-to-regexp';
-
-import type { ResourceName, ResourcePathParams } from 'lib/api/resources';
-import { RESOURCES } from 'lib/api/resources';
-
-export default function buildApiUrl<R extends ResourceName>(resourceName: R, pathParams?: ResourcePathParams<R>) {
-  const resource = RESOURCES[resourceName];
-  const defaultApi = 'https://' + process.env.NEXT_PUBLIC_API_HOST + ':' + process.env.NEXT_PUBLIC_API_PORT;
-  const origin = 'endpoint' in resource && resource.endpoint ? resource.endpoint + (resource.basePath ?? '') : defaultApi;
-  return origin + compile(resource.path)(pathParams);
-}
diff --git a/playwright/utils/config.ts b/playwright/utils/config.ts
new file mode 100644
index 0000000000..3e85475096
--- /dev/null
+++ b/playwright/utils/config.ts
@@ -0,0 +1,12 @@
+import { devices } from '@playwright/test';
+
+export const viewport = {
+  mobile: devices['iPhone 13 Pro'].viewport,
+  md: { width: 1001, height: 800 },
+  xl: { width: 1600, height: 1000 },
+  xxl: { width: 1920, height: 1200 },
+};
+
+export const maskColor = '#4299E1'; // blue.400
+
+export const adsBannerSelector = '.adsbyslise';
diff --git a/playwright/utils/configs.ts b/playwright/utils/configs.ts
deleted file mode 100644
index e9d35f9ec8..0000000000
--- a/playwright/utils/configs.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-/* eslint-disable max-len */
-import { devices } from '@playwright/test';
-
-export const viewport = {
-  mobile: devices['iPhone 13 Pro'].viewport,
-  xl: { width: 1600, height: 1000 },
-};
-
-export const maskColor = '#4299E1'; // blue.400
-
-export const adsBannerSelector = '.adsbyslise';
-
-export const featureEnvs = {
-  beaconChain: [
-    { name: 'NEXT_PUBLIC_HAS_BEACON_CHAIN', value: 'true' },
-  ],
-  optimisticRollup: [
-    { name: 'NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK', value: 'true' },
-    { name: 'NEXT_PUBLIC_L1_BASE_URL', value: 'https://localhost:3101' },
-    { name: 'NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL', value: 'https://localhost:3102' },
-  ],
-  bridgedTokens: [
-    {
-      name: 'NEXT_PUBLIC_BRIDGED_TOKENS_CHAINS',
-      value: '[{"id":"1","title":"Ethereum","short_title":"ETH","base_url":"https://eth.blockscout.com/token/"},{"id":"56","title":"Binance Smart Chain","short_title":"BSC","base_url":"https://bscscan.com/token/"},{"id":"99","title":"POA","short_title":"POA","base_url":"https://blockscout.com/poa/core/token/"}]',
-    },
-    {
-      name: 'NEXT_PUBLIC_BRIDGED_TOKENS_BRIDGES',
-      value: '[{"type":"omni","title":"OmniBridge","short_title":"OMNI"},{"type":"amb","title":"Arbitrary Message Bridge","short_title":"AMB"}]',
-    },
-  ],
-  txInterpretation: [
-    { name: 'NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER', value: 'blockscout' },
-  ],
-  zkRollup: [
-    { name: 'NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK', value: 'true' },
-    { name: 'NEXT_PUBLIC_L1_BASE_URL', value: 'https://localhost:3101' },
-  ],
-  userOps: [
-    { name: 'NEXT_PUBLIC_HAS_USER_OPS', value: 'true' },
-  ],
-};
-
-export const viewsEnvs = {
-  block: {
-    hiddenFields: [
-      { name: 'NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS', value: '["burnt_fees", "total_reward", "nonce"]' },
-    ],
-  },
-};
-
-export const stabilityEnvs = [
-  { name: 'NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS', value: '["top_accounts"]' },
-  { name: 'NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS', value: '["value","fee_currency","gas_price","gas_fees","burnt_fees"]' },
-  { name: 'NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS', value: '["fee_per_gas"]' },
-];
diff --git a/playwright/utils/socket.ts b/playwright/utils/socket.ts
new file mode 100644
index 0000000000..26a8a2202b
--- /dev/null
+++ b/playwright/utils/socket.ts
@@ -0,0 +1 @@
+export const port = 3200;
diff --git a/prometheus.yml b/prometheus.yml
new file mode 100644
index 0000000000..89b95e0ecb
--- /dev/null
+++ b/prometheus.yml
@@ -0,0 +1,16 @@
+global:
+  scrape_interval:     15s
+  evaluation_interval: 15s
+
+rule_files:
+  # - "first.rules"
+  # - "second.rules"
+
+scrape_configs:
+  - job_name: prometheus
+    static_configs:
+      - targets: ['localhost:9090']
+  - job_name: frontend
+    metrics_path: /node-api/metrics
+    static_configs:
+      - targets: ['host.docker.internal:3000']
\ No newline at end of file
diff --git a/public/README.md b/public/README.md
new file mode 100644
index 0000000000..3fd1a97a4c
--- /dev/null
+++ b/public/README.md
@@ -0,0 +1,4 @@
+**Directories**
+- `/icons` - Folder for SVG-sprite assets, generated at build time.
+- `/static` - Folder for static assets that are consistent between app re-runs but may differ from one build version to another.
+- `/assets` - Folder for dynamically generated assets during the app start, such as the favicon bundle, ENV variables file, and external app configurations.
\ No newline at end of file
diff --git a/public/assets/favicon/android-chrome-192x192.png b/public/assets/favicon/android-chrome-192x192.png
new file mode 100644
index 0000000000..0ebdd5e3bf
Binary files /dev/null and b/public/assets/favicon/android-chrome-192x192.png differ
diff --git a/public/assets/favicon/apple-touch-icon-180x180.png b/public/assets/favicon/apple-touch-icon-180x180.png
new file mode 100644
index 0000000000..cf659834c9
Binary files /dev/null and b/public/assets/favicon/apple-touch-icon-180x180.png differ
diff --git a/public/assets/favicon/favicon-16x16.png b/public/assets/favicon/favicon-16x16.png
new file mode 100644
index 0000000000..09e80da7d3
Binary files /dev/null and b/public/assets/favicon/favicon-16x16.png differ
diff --git a/public/assets/favicon/favicon-32x32.png b/public/assets/favicon/favicon-32x32.png
new file mode 100644
index 0000000000..064b2edd70
Binary files /dev/null and b/public/assets/favicon/favicon-32x32.png differ
diff --git a/public/assets/favicon/favicon-48x48.png b/public/assets/favicon/favicon-48x48.png
new file mode 100644
index 0000000000..d1897ec814
Binary files /dev/null and b/public/assets/favicon/favicon-48x48.png differ
diff --git a/public/assets/favicon/favicon.ico b/public/assets/favicon/favicon.ico
new file mode 100644
index 0000000000..d786dbc3bb
Binary files /dev/null and b/public/assets/favicon/favicon.ico differ
diff --git a/public/assets/favicon/logo-icon.png b/public/assets/favicon/logo-icon.png
new file mode 100644
index 0000000000..0ebdd5e3bf
Binary files /dev/null and b/public/assets/favicon/logo-icon.png differ
diff --git a/public/icons/name.d.ts b/public/icons/name.d.ts
index f5aec6e91d..4126633c3e 100644
--- a/public/icons/name.d.ts
+++ b/public/icons/name.d.ts
@@ -3,7 +3,10 @@
   export type IconName =
   	| "ABI_slim"
 	| "ABI"
+	| "API_slim"
 	| "API"
+	| "apps_list"
+	| "apps_slim"
 	| "apps"
 	| "arrows/down-right"
 	| "arrows/east-mini"
@@ -11,39 +14,43 @@
 	| "arrows/north-east"
 	| "arrows/south-east"
 	| "arrows/up-down"
+	| "arrows/up-head"
+	| "beta_xs"
+	| "beta"
+	| "blob"
+	| "blobs/image"
+	| "blobs/raw"
+	| "blobs/text"
+	| "block_countdown"
 	| "block_slim"
 	| "block"
-	| "bool/active"
-	| "bool/all"
-	| "bool/device"
-	| "bool/nodes"
-	| "bool/provider"
-	| "bool/punish"
-	| "bool/reward"
-	| "bool/stake"
-	| "bool/timer"
-	| "bool/unpaid"
-	| "bool/wating"
+	| "brands/blockscout"
+	| "brands/celenium"
+	| "brands/graph"
 	| "brands/safe"
+	| "brands/solidity_scan"
 	| "burger"
+	| "certified"
 	| "check"
+	| "checkered_flag"
 	| "clock-light"
 	| "clock"
 	| "coins/bitcoin"
 	| "collection"
-	| "contract_verified"
-	| "contract"
+	| "columns"
+	| "contracts/proxy"
+	| "contracts/regular_many"
+	| "contracts/regular"
+	| "contracts/verified_many"
+	| "contracts/verified"
 	| "copy"
 	| "cross"
 	| "delete"
-	| "devnet"
-	| "discussions"
+	| "dex-tracker"
 	| "docs"
 	| "donate"
 	| "dots"
-	| "ecosystem"
 	| "edit"
-	| "email-sent"
 	| "email"
 	| "empty_search_result"
 	| "ENS_slim"
@@ -60,20 +67,32 @@
 	| "files/sol"
 	| "files/yul"
 	| "filter"
-	| "finalized"
 	| "flame"
+	| "games"
+	| "gas_xl"
 	| "gas"
+	| "gear_slim"
 	| "gear"
 	| "globe-b"
 	| "globe"
 	| "graphQL"
+	| "heart_filled"
+	| "heart_outline"
+	| "hourglass"
 	| "info"
 	| "integration/full"
 	| "integration/partial"
 	| "key"
+	| "lightning_navbar"
 	| "lightning"
+	| "link_external"
 	| "link"
 	| "lock"
+	| "merits_colored"
+	| "merits_slim"
+	| "merits_with_dot_slim"
+	| "merits_with_dot"
+	| "merits"
 	| "minus"
 	| "monaco/file"
 	| "monaco/folder-open"
@@ -82,26 +101,34 @@
 	| "monaco/vyper"
 	| "moon-with-star"
 	| "moon"
+	| "MUD_menu"
+	| "MUD"
 	| "networks"
 	| "networks/icon-placeholder"
 	| "networks/logo-placeholder"
 	| "nft_shield"
+	| "open-link"
 	| "output_roots"
+	| "payment_link"
 	| "plus"
+	| "private_tags_slim"
 	| "privattags"
 	| "profile"
 	| "publictags_slim"
 	| "publictags"
 	| "qr_code"
-	| "repeat_arrow"
+	| "refresh"
+	| "repeat"
 	| "restAPI"
+	| "rocket_xl"
 	| "rocket"
 	| "RPC"
 	| "scope"
 	| "score/score-not-ok"
 	| "score/score-ok"
 	| "search"
-	| "social/canny"
+	| "share"
+	| "sign_out"
 	| "social/coingecko"
 	| "social/coinmarketcap"
 	| "social/defi_llama"
@@ -118,8 +145,8 @@
 	| "social/stats"
 	| "social/telega"
 	| "social/telegram_filled"
-	| "social/tweet"
 	| "social/twitter_filled"
+	| "social/twitter"
 	| "star_filled"
 	| "star_outline"
 	| "stats"
@@ -128,8 +155,10 @@
 	| "status/success"
 	| "status/warning"
 	| "sun"
+	| "swap"
 	| "testnet"
 	| "token-placeholder"
+	| "token-transfers"
 	| "token"
 	| "tokens"
 	| "tokens/xdai"
@@ -138,13 +167,14 @@
 	| "transactions"
 	| "txn_batches_slim"
 	| "txn_batches"
-	| "unfinalized"
 	| "uniswap"
 	| "user_op_slim"
 	| "user_op"
-	| "verified_token"
+	| "validator"
+	| "verification-steps/finalized"
+	| "verification-steps/unfinalized"
+	| "verified_slim"
 	| "verified"
-	| "verify-contract"
 	| "wallet"
 	| "wallets/coinbase"
 	| "wallets/metamask"
diff --git a/public/static/apple_calendar.svg b/public/static/apple_calendar.svg
new file mode 100644
index 0000000000..a55a0d5f36
--- /dev/null
+++ b/public/static/apple_calendar.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 21">
+  <g clip-path="url(#a)">
+    <path fill="#fff" d="m20.226 7.09-.001-.717a26.42 26.42 0 0 0-.01-.604 8.818 8.818 0 0 0-.115-1.313 4.42 4.42 0 0 0-.412-1.25 4.206 4.206 0 0 0-1.836-1.836 4.403 4.403 0 0 0-1.249-.41A8.815 8.815 0 0 0 15.29.843c-.2-.006-.402-.008-.603-.01H5.765c-.2.001-.402.004-.603.01a8.92 8.92 0 0 0-1.314.115c-.44.079-.85.209-1.248.411A4.207 4.207 0 0 0 .764 3.207c-.204.4-.333.809-.412 1.249a8.69 8.69 0 0 0-.115 1.313c-.006.201-.009.403-.01.604l-.001.717v7.487l.001.717c.001.2.004.402.01.603.012.438.038.88.115 1.314.08.44.209.85.412 1.25a4.202 4.202 0 0 0 1.837 1.835c.399.204.808.333 1.248.411.433.078.876.104 1.314.116.2.006.402.008.603.01h8.921c.2-.002.402-.004.603-.01a8.776 8.776 0 0 0 1.314-.116 4.43 4.43 0 0 0 1.248-.41 4.204 4.204 0 0 0 1.837-1.837c.203-.4.332-.809.412-1.249.077-.433.103-.875.115-1.314.006-.2.008-.402.01-.603V7.09Z"/>
+    <path fill="#000" d="M7.69 17.195V7.891H7.3L4.93 9.46v.396l2.343-1.534H7.3v8.873h.39Zm2.316-9.305v.357h5.111v.028l-4.105 8.921h.44l4.07-8.928V7.89h-5.516Z"/>
+    <path fill="red" d="M3.86 6.066V4.054h.007l.795 1.806h.264l.793-1.806h.01v2.012h.263V3.4h-.28L4.8 5.536h-.007l-.916-2.134h-.28v2.664h.264Zm3.566-2.079c-.556 0-.865.405-.865.953v.2c0 .552.306.958.865.958.559 0 .863-.406.863-.957V4.94c.001-.548-.308-.953-.863-.953Zm0 .252c.363 0 .576.271.576.715v.172c0 .445-.213.717-.576.717-.365 0-.577-.274-.577-.717v-.172c0-.443.212-.715.577-.715Zm1.402 1.827h.287V4.813c0-.293.16-.563.535-.563.32 0 .526.194.526.543v1.27h.287V4.75c0-.496-.315-.764-.736-.764-.336 0-.528.176-.604.313h-.008v-.28h-.287v2.048Zm2.956-2.081c-.509 0-.819.397-.819.951v.21c0 .564.287.95.819.95a.67.67 0 0 0 .613-.35h.007v.319h.271V3.258h-.287v1.055h-.007a.672.672 0 0 0-.597-.328Zm.026.257c.363 0 .586.285.586.707v.19c0 .44-.217.703-.583.703-.324 0-.56-.236-.56-.705v-.185c0-.478.24-.71.557-.71ZM14.453 5.8h.007v.266h.28V4.644c0-.42-.309-.657-.735-.657-.474 0-.718.248-.742.604h.271c.023-.217.178-.356.46-.356.29 0 .459.155.459.442v.22h-.557c-.467.002-.713.229-.713.583 0 .375.271.62.669.62.312-.002.502-.136.6-.3Zm-.534.051c-.23 0-.44-.123-.44-.377 0-.199.127-.342.426-.342h.548v.252c0 .275-.23.467-.534.467Zm2.935-1.831h-.306l-.584 1.712h-.01l-.585-1.712h-.32l.765 2.078-.04.125c-.06.211-.163.334-.404.334a.96.96 0 0 1-.15-.012v.245c.051.007.127.016.195.016.399 0 .536-.274.643-.569l.058-.153.738-2.064Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M.226.833h20v20h-20z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/public/static/badges.svg b/public/static/badges.svg
new file mode 100644
index 0000000000..741e81b6e5
--- /dev/null
+++ b/public/static/badges.svg
@@ -0,0 +1,581 @@
+<svg viewBox="0 0 262 86" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M230.856 3.608a14.189 14.189 0 0 0-14.202 0l-23.435 13.546a14.19 14.19 0 0 0-7.089 12.286v27.12a14.19 14.19 0 0 0 7.089 12.286l23.435 13.546a14.19 14.19 0 0 0 14.202 0l23.435-13.546a14.19 14.19 0 0 0 7.089-12.286V29.44a14.19 14.19 0 0 0-7.089-12.286L230.856 3.608Z" fill="#ECF5FF" stroke="#A7BFDA" stroke-width=".86"/>
+  <path d="M223.755 2.133V43l-35.354-20.436a13.755 13.755 0 0 1 5.029-5.035l.004-.002L216.869 3.98a13.75 13.75 0 0 1 6.886-1.847Z" fill="#F8FBFF"/>
+  <path d="M186.56 29.44v27.12c0 2.456.655 4.82 1.841 6.876L223.755 43l-35.354-20.436a13.753 13.753 0 0 0-1.841 6.876Z" fill="url(#a)"/>
+  <path d="M260.95 56.571v-27.12c0-2.457-.655-4.82-1.841-6.876l-35.354 20.436 35.354 20.436a13.753 13.753 0 0 0 1.841-6.876Z" fill="#E0EEFF"/>
+  <path d="M223.755 2.15v40.867l35.354-20.436a13.749 13.749 0 0 0-5.033-5.038L230.641 3.997a13.75 13.75 0 0 0-6.886-1.847Z" fill="url(#b)"/>
+  <path d="M193.431 68.472a13.75 13.75 0 0 1-5.03-5.036L223.755 43v40.867c-2.377 0-4.755-.616-6.884-1.847h-.002l-23.435-13.547-.003-.001Z" fill="url(#c)"/>
+  <path d="m230.641 82.02 23.435-13.547a13.749 13.749 0 0 0 5.033-5.037L223.755 43v40.867a13.75 13.75 0 0 0 6.886-1.847Z" fill="#D1E5FE"/>
+  <path d="M217.73 8.643a12.039 12.039 0 0 1 12.05 0l20.692 11.96a12.04 12.04 0 0 1 6.015 10.424v23.946c0 4.3-2.293 8.272-6.015 10.424l-20.692 11.96a12.039 12.039 0 0 1-12.05 0l-20.692-11.96a12.04 12.04 0 0 1-6.015-10.424V31.027c0-4.3 2.293-8.272 6.015-10.424l20.692-11.96Z" fill="#A7BFDA"/>
+  <path d="M229.996 8.27a12.472 12.472 0 0 0-12.482 0l-20.691 11.961a12.47 12.47 0 0 0-6.23 10.796v23.946a12.47 12.47 0 0 0 6.23 10.796l20.691 11.96a12.472 12.472 0 0 0 12.482 0l20.691-11.96a12.47 12.47 0 0 0 6.23-10.796V31.027a12.47 12.47 0 0 0-6.23-10.796l-20.691-11.96Z" stroke="#F8FBFF" stroke-width=".86"/>
+  <path d="M217.945 9.015a11.61 11.61 0 0 1 11.62 0l20.692 11.96a11.61 11.61 0 0 1 5.8 10.052v23.946a11.61 11.61 0 0 1-5.8 10.051l-20.692 11.96a11.61 11.61 0 0 1-11.62 0l-20.692-11.96a11.61 11.61 0 0 1-5.8-10.051V31.027a11.61 11.61 0 0 1 5.8-10.051l20.692-11.96Z" stroke="#A7BFDA" stroke-width=".86"/>
+  <path d="M217.575 8.643a12.039 12.039 0 0 1 12.05 0l20.692 11.96a12.04 12.04 0 0 1 6.015 10.424v23.946c0 4.3-2.293 8.272-6.015 10.424l-20.692 11.96a12.039 12.039 0 0 1-12.05 0l-20.692-11.96a12.04 12.04 0 0 1-6.015-10.424V31.027c0-4.3 2.293-8.272 6.015-10.424l20.692-11.96Z" fill="url(#d)"/>
+  <path d="M217.79 9.015a11.61 11.61 0 0 1 11.62 0l20.692 11.96a11.61 11.61 0 0 1 5.8 10.052v23.946a11.61 11.61 0 0 1-5.8 10.051l-20.692 11.96a11.61 11.61 0 0 1-11.62 0l-20.692-11.96a11.61 11.61 0 0 1-5.8-10.051V31.027a11.61 11.61 0 0 1 5.8-10.051l20.692-11.96Z" stroke="#136F4F" stroke-width=".86"/>
+  <path d="M228.325 18.567a9.461 9.461 0 0 0-9.449 0l-14.19 8.178a9.46 9.46 0 0 0-4.736 8.196v16.332a9.46 9.46 0 0 0 4.736 8.196l14.19 8.18a9.462 9.462 0 0 0 9.449 0l14.19-8.18a9.46 9.46 0 0 0 4.735-8.196V34.941a9.46 9.46 0 0 0-4.735-8.196l-14.19-8.178Z" fill="#136F4F" stroke="#3DC796" stroke-width=".86"/>
+  <path d="M212.17 19.56c1.09 1.197 1.833 2.017 1.685 3.62l-4.714 3.725c-1.347-4.936-.734-7.84.106-8.677.587-.585 1.833.135 2.923 1.332Z" fill="url(#e)"/>
+  <path d="M209.068 26.492c-.95-3.347-1.127-5.953-.517-7.618.359-.982 1.08-1.494 2.422-.144.868.566 2.916 2.115 3.09 3.732" stroke="#562E11" stroke-width=".645" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M235.13 19.56c-1.09 1.197-1.833 2.017-1.685 3.62l4.714 3.725c1.347-4.936.734-7.84-.106-8.677-.587-.585-1.833.135-2.923 1.332Z" fill="url(#f)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M238.13 18.308c.801.932 1.338 3.81.031 8.596l-.959-.757c.505-3.957.074-6.856-.165-8.03.242-.088.466-.119.659-.08l.434.271Z" fill="#FFC794"/>
+  <path d="M238.232 26.492c.95-3.347 1.127-5.953.517-7.618-.359-.982-1.08-1.494-2.422-.144-.868.566-2.915 2.115-3.09 3.732" stroke="#562E11" stroke-width=".645" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M223.999 78.112c1.871-.03 3.737-.53 5.414-1.5l20.691-11.96c1.23-.71.696-.366 1.554-1.442 1.291-10.32-8.967-23.876-11.302-26.855-.236-.301-.417-.532-.531-.687h-.001l-.008-.012-.128-.174c-1.305-15.357-8.165-18.067-15.357-18.067-5.173 0-16.26 1.16-16.26 18.067-1.986 2.092-5.432 6.336-8.764 12.893l-3.01 6.773-.753 7.632c.851 1.055.777 1.172 1.987 1.872l20.692 11.96a11.17 11.17 0 0 0 5.776 1.5Z" fill="url(#g)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M247.92 47.933c-.31.137-.623.256-.933.36a4.738 4.738 0 0 1-5.024-1.346c-1.305-1.478-2.456-3.5-1.828-5.849.334-1.246 1.051-2.052 1.96-2.388a73.477 73.477 0 0 1 5.825 9.223Z" fill="#C26B2A"/>
+  <path d="M228.074 18.046c3.66.883 7.697 2.65 8.959 17.665.325.264.87.89 1.402 1.269 3.332 3.548 7.525 7.418 9.245 10.32-1.72-4.3-7.422-11.013-8.123-11.968-.321-11.946-5.465-16.219-11.172-17.47l-.311.184Z" fill="#FFC794"/>
+  <path d="M223.424 78.967a11.355 11.355 0 0 0 .001 0h-.001Z" fill="url(#h)"/>
+  <path d="M195.759 63.318c.861 1.087.532.618 1.771 1.334l20.691 11.96c3.462 2.002 7.729 2.002 11.19 0l1.637-.945c-.715-4.798-2.488-7.243-4.079-9.436-1.74-2.398-3.261-4.495-2.941-9.04.392-5.57-.354-8.481-.999-11.003-.239-.934-.465-1.815-.614-2.758-2.56-5.59-3.746-10.222-4.126-14.142L235.64 25.8l-17.402-1.72c.186-2.314.635-4.337 1.15-6.154l.022-.08-5.809 2.608-2.722 3.012-2.008 5.822-.903 6.423c-1.486 1.522-2.857 3.095-4.472 5.813l-1.935 2.687c-.129.218-1.214 2.407-2.301 4.603h-.001l-.001.004-.001.002c-1.095 2.21-2.192 4.426-2.318 4.636-.367.612-1.181 3.51-1.921 6.141v.001l-.001.004-.001.003c-.231.822.943 3.02.743 3.713Z" fill="url(#i)"/>
+  <path d="M214.861 30.622c1.5-3.43 5.354-3.49 8.579-3.646 3.225.156 7.081.06 8.58 3.646 1.305 3.123-.869 9.783-2.589 11.45-2.006 1.944-4.492 1.56-5.991 1.56-1.5 0-3.984.384-5.99-1.56-1.721-1.667-3.942-8.354-2.589-11.45Z" fill="#D47B3A"/>
+  <path d="M230.164 36.42s2.765 1.587 4.98.358M229.992 38.12s2.218 1.831 4.084 1.55M217.31 36.42s-2.765 1.587-4.98.358M217.484 38.12s-1.966 1.831-3.832 1.55M227.72 37.915c-.883 1.534-4.037 1.943-4.037-1.125v-1.739" stroke="#562E11" stroke-width=".645" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M219.645 37.915c.883 1.534 4.038 1.943 4.038-1.125v-1.739" stroke="#562E11" stroke-width=".645" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M217.471 32.91c.291-.261 3.192 1.19 3.086 1.728-.107.537-1.164 1.045-2.147.372-.983-.674-1.23-1.839-.939-2.1ZM229.621 32.875c-.297-.267-3.261 1.217-3.152 1.765.109.549 1.189 1.068 2.193.38 1.004-.688 1.256-1.878.959-2.145Z" fill="#562E11"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="m250.988 53.697-.11-.063.452 2.944c-3.234-9.948-9.11-17.306-11.206-19.93a31.059 31.059 0 0 1-.619-.789l-.005-.007-.059-.08-.073-.1a.323.323 0 0 1-.061-.163c-.649-7.64-2.675-12.064-5.37-14.584-2.691-2.516-6.106-3.188-9.666-3.188-2.571 0-6.551.291-9.885 2.635-3.311 2.328-6.053 6.733-6.053 15.11a.321.321 0 0 1-.088.222c-1.73 1.822-9.289 10.593-12.68 22.383l.255-2.913c3.651-10.361 10.11-17.943 11.868-19.82.028-8.449 2.82-13.044 6.327-15.51 3.504-2.463 7.654-2.752 10.256-2.752 3.632 0 7.243.684 10.107 3.362 2.848 2.664 4.9 7.248 5.564 14.91l.082.111v.002c.125.169.331.426.603.766 1.89 2.364 6.985 8.737 10.361 17.454Z" fill="#562E11"/>
+  <ellipse cx="234.613" cy="28.595" rx="2.042" ry="2.58" fill="#333" stroke="#000" stroke-width=".645"/>
+  <ellipse cx=".632" cy="1.053" rx=".632" ry="1.053" transform="matrix(.96162 .2744 -.244 .96977 233.536 26.958)" fill="#E0E0E0"/>
+  <ellipse cx="2.042" cy="2.58" rx="2.042" ry="2.58" transform="matrix(-1 0 0 1 214.94 26.015)" fill="#333" stroke="#000" stroke-width=".645"/>
+  <ellipse cx=".632" cy="1.053" rx=".632" ry="1.053" transform="matrix(-.96162 .2744 .244 .96977 213.974 26.958)" fill="#E0E0E0"/>
+  <path d="M215.564 43.645c4.337 0 7.136 3.183 7.99 4.774.855-1.591 3.649-4.774 7.986-4.774 5.422 0 9.308 3.655 9.305 9.92-.004 9.71-8.867 15.212-14.623 18.061a6.015 6.015 0 0 1-5.335 0c-5.755-2.847-14.624-8.346-14.628-18.06-.002-6.266 3.883-9.921 9.305-9.921Z" fill="#DF3030"/>
+  <path d="M238.187 50.116c-1.72-4.428-6.451-4.858-8.237-4.145-1.786.713 4.689 1.329 5.227 4.877.429 2.83 4.241 2.436 3.01-.732Z" fill="#FF8787"/>
+  <path d="M221.462 48.073c-1.281-1.95-3.581-2.472-4.585-2.307-1.303.213 1.702 1.188 2.854 2.889.611.902 2.424.472 1.731-.582Z" fill="#F36C6C"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M218.425 44.132c-2.84.91-6.153 2.932-6.153 7.569 0 7.527 5.752 18.362 22.981 13.896-2.856 2.72-6.294 4.675-9.03 6.03a6.017 6.017 0 0 1-5.336 0c-5.754-2.848-14.623-8.347-14.627-18.061-.002-6.266 3.883-9.921 9.305-9.921 1.044 0 2 .185 2.86.487Z" fill="#CF1E1E"/>
+  <path d="M215.564 43.645c4.337 0 7.136 3.183 7.99 4.774.855-1.591 3.649-4.774 7.986-4.774 5.422 0 9.308 3.655 9.305 9.92-.004 9.71-8.867 15.212-14.623 18.061a6.015 6.015 0 0 1-5.335 0c-5.755-2.847-14.624-8.346-14.628-18.06-.002-6.266 3.883-9.921 9.305-9.921Z" stroke="#A21515" stroke-width=".645" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M224.457 51.744c0-.498.406-.897.901-.897h1.371c.495 0 .901.4.901.897v1.36c0 .137.113.252.257.252h1.284c.495 0 .901.399.901.896v8.384a.899.899 0 0 1-.901.896H227.8a.899.899 0 0 1-.901-.896v-8.384a.254.254 0 0 0-.256-.251h-1.285a.899.899 0 0 1-.901-.897v-1.36Zm-5.058 0a.9.9 0 0 1 .902-.897h1.371c.495 0 .901.4.901.897v1.36a.899.899 0 0 1-.901.897h-1.285a.254.254 0 0 0-.256.251v8.384a.899.899 0 0 1-.901.896h-1.371a.9.9 0 0 1-.902-.896v-8.384a.9.9 0 0 1 .902-.896h1.284a.254.254 0 0 0 .256-.252v-1.36Zm2.529 4.802c0-.498.406-.897.901-.897h1.372c.495 0 .901.399.901.897v3.725a.899.899 0 0 1-.901.896h-1.372a.899.899 0 0 1-.901-.896v-3.725Z" fill="#FFC4C4" stroke="#A21515" stroke-width=".645" stroke-linejoin="round"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="m206.802 70.046 1.17-.262.507-.398c.609.49 1.143.785 1.522.719l-1.521-.72-.001.001c-.831-.669-1.802-1.698-2.706-2.658-.2-.212-.669-1.48-1.127-2.717-.439-1.188-.868-2.348-1.04-2.521-.323 1.72-6.343 7.095-7.524-6.235l-.593 4.73v3.208a11.163 11.163 0 0 0 1.982 1.46l9.331 5.393Zm-1.24.276-8.521-4.925a11.98 11.98 0 0 1-1.552-1.068v.002c.483.392 1.001.748 1.55 1.066l8.522 4.926h.001Z" fill="#AE5F25"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M206.411 69.82h.036c.79-.002 1.475-.055 1.986-.123.256-.035.471-.073.637-.112.082-.02.157-.04.22-.062a.702.702 0 0 0 .192-.096.323.323 0 0 0-.375-.525 1.652 1.652 0 0 1-.186.055 6.171 6.171 0 0 1-.573.1c-.482.065-1.139.116-1.903.118-.383.001-.791-.01-1.217-.038l1.183.683Zm-10.119-5.952c-.717-1.782-.916-4.168-.219-7.362.532-2.43 1.85-5.3 3.047-7.58a63.615 63.615 0 0 1 2.069-3.633l.136-.218.035-.055.009-.014.002-.004-.271-.175.272.174a.323.323 0 0 0-.544-.347l.272.173-.272-.173-.001.001-.002.004-.01.015-.036.058a35.636 35.636 0 0 0-.639 1.049 64.236 64.236 0 0 0-1.591 2.845c-1.202 2.289-2.555 5.223-3.106 7.743-.594 2.72-.566 4.92-.096 6.693.298.285.614.554.945.806Zm-.339.82c.347.254.709.49 1.086.709l.149.086h.001l-.151-.086a12.07 12.07 0 0 1-1.084-.707l-.001-.002Zm7.04 4.15 1.535.887h-.002l-1.535-.887h.002Z" fill="#562E11"/>
+  <path d="M205.586 57.801c.49-.528.488-1.2.996-1.148l.404 2.263c.63.464 2.366 1.254 4.951.793 2.58-.46 2.706 1.806 1.292 2.82 0 0-.204.167-.569.38.523-.251 1.502-.372 2.286.7.75 1.027-.049 2.005-.755 2.528.578-.39.943-.655 1.444-.292 1.216.881-.476 2.972-2.695 3.944-2.22.972-4.582-.427-6.05-1.87-3.48-3.423-4.504-6.463-1.304-10.118Z" fill="#C26B2A"/>
+  <path d="M207.664 68.522c-3.318-4.107-2.872-7.197-.458-9.346l-.309-.605v-1.166l-.496-.645-.928 1.135c-2.572 2.954-2.38 4.796-.792 7.788l2.983 2.84Z" fill="#AE5F25"/>
+  <path d="M210.103 62.028c1.831-.493 2.972-1.036 3.592-1.777l.285.883-.532.901-1.14 1.157-2.381.7c-1.053-.058-1.655-1.371.176-1.864ZM210.895 65.12c1.947-.447 3.086-.996 3.564-1.809l.606 1.036-.328 1.002-.943 1.256-2.513.648c-1.228-.136-2.332-1.687-.386-2.133ZM212.223 68.03c1.777-.663 2.862-1.311 3.408-2.108l.368.853-.445.947-1.025 1.26-2.305.92c-1.054.042-1.777-1.209-.001-1.872Z" fill="#DF823E"/>
+  <path d="M208.842 63.75c1.573.183 2.881-.33 3.649-.747m-2.019 4.21c1.684.056 2.678-.414 3.372-.849m-1.353-3.36c.471-.256.738-.475.738-.475 1.414-1.014 1.288-3.28-1.292-2.82-2.586.461-4.08-.334-4.711-.799l-.645-2.15s-.644-.215-1.075 1.075c-.43 1.29-.43 1.139-.754 1.705m7.739 3.463c.452-.298 1.576-.596 2.454.607.879 1.202-.368 2.337-1.101 2.754m0 0c.794-.497 1.197-.95 1.791-.519 1.216.881-.476 2.973-2.695 3.944-1.309.573-2.666.322-3.861-.276-.833-.416-1.587-1.002-2.19-1.595-1.021-1.004-1.433-1.463-1.858-2.326" stroke="#562E11" stroke-width=".645" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M236.256 65.12c-1.947-.447-3.086-.996-3.564-1.809l-.606 1.036.328 1.002.943 1.256 2.514.648c1.227-.136 2.331-1.687.385-2.133Z" fill="#DF823E"/>
+  <path d="M241.53 57.816c-.494-.525-.438-1.112-.946-1.056l-.444 2.178c-.627.47-2.355 1.274-4.945.835-2.583-.439-2.69 1.828-1.268 2.83 0 0 .205.165.572.375-.525-.247-1.505-.36-2.28.72-.742 1.033.065 2.003.776 2.521-.582-.385-.949-.647-1.447-.28-1.208.891.5 2.968 2.728 3.922 2.228.953 4.578-.465 6.034-1.921 3.452-3.451 4.45-6.496 1.22-10.124Z" fill="#DF823E"/>
+  <path d="M233.698 60.68c-.352-.386.429-.893.863-1.098l3.478.27 2.125-.79-.145-1.208.673-1.094 1.075 1.29.535 1.596c-2.728 4.692-8.163 1.518-8.604 1.035ZM235.281 64.931c1.725.589 2.739-.355 3.031-.9l-3.955-1.056c-.393-.08-1.244-.157-1.509.181-.332.423.277 1.039 2.433 1.775ZM233.036 67.268c1.338.942 2.92.517 3.544.186l-3.756-1.309-1.027-.26c-.144.07-.1.441 1.239 1.383Z" fill="#FBA464"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="m240.52 70.157 9.523-5.505c.454-.262.885-.554 1.292-.872v-.248c-2.901 2.537-6.106 2.25-7.991 2.081-.489-.044-.89-.08-1.173-.056-.35.354-.729.756-1.12 1.171-.905.96-1.875 1.99-2.707 2.658l.507.398 1.669.373Zm-2.176-.77v-.001l-1.522.719c.379.066.913-.23 1.522-.719Zm3.865.787h.001l8.264-4.777a11.956 11.956 0 0 1-.001 0l-8.264 4.777Z" fill="#C26B2A"/>
+  <path d="M238.309 63.75c-1.573.183-2.881-.33-3.649-.747m2.019 4.21c-1.684.056-2.678-.414-3.372-.849m1.353-3.36c-.471-.256-.738-.475-.738-.475-1.414-1.014-1.288-3.28 1.292-2.82 2.586.461 4.08-.334 4.711-.799l.645-2.15s.644-.215 1.075 1.075c.43 1.29.43 1.139.754 1.705m-7.739 3.463c-.452-.298-1.576-.596-2.454.607-.879 1.202.368 2.337 1.101 2.754m0 0c-.794-.497-1.197-.95-1.791-.519-1.216.881.476 2.973 2.695 3.944 1.309.573 2.666.322 3.861-.276.833-.416 1.587-1.002 2.19-1.595 1.021-1.004 1.433-1.463 1.858-2.326" stroke="#562E11" stroke-width=".645" stroke-linecap="round" stroke-linejoin="round"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M250.731 64.22a11.2 11.2 0 0 0 .982-.749c.584-1.84.671-4.17.03-7.102-.55-2.517-1.856-5.45-3.013-7.738a67.586 67.586 0 0 0-2.008-3.672l-.132-.222-.035-.058-.009-.015-.003-.004-.275.168-.276.168h.001l.002.004.009.014.033.056.13.218a64.622 64.622 0 0 1 1.987 3.634c1.152 2.279 2.427 5.151 2.958 7.584.729 3.335.475 5.79-.326 7.593a4.9 4.9 0 0 1-.055.121Zm-9.623 5.597 1.234-.714c-1.618.147-3.029.045-3.797-.084a.322.322 0 1 0-.106.637c.59.098 1.538.183 2.669.16Zm5.16-24.99.275-.168a.323.323 0 0 0-.551.337l.276-.169Z" fill="#562E11"/>
+  <path d="M213.71 19.35h19.995l.887 4.964a.66.66 0 0 1-.835.746c-2.037-.596-6.685-1.84-9.942-1.84-3.278 0-7.965 1.26-9.981 1.851a.66.66 0 0 1-.838-.722l.714-4.999Z" fill="#7C3DC9" stroke="#50119C" stroke-width=".645" stroke-linejoin="round"/>
+  <path d="M213.925 18.275h19.565l.885 4.953a.662.662 0 0 1-.843.744c-1.998-.6-6.482-1.827-9.717-1.827-3.257 0-7.78 1.244-9.757 1.84a.661.661 0 0 1-.845-.722l.712-4.988Z" fill="#A45BFD"/>
+  <path d="M227.47 22.36c-4.214-2.666-8.994-3.512-10.965-2.795l-2.902 1.398-.43 2.15.43.752c.896-.18 2.73-.537 2.902-.537.172 0 3.942-.789 5.805-1.183l5.16.215Z" fill="#7C3DC9"/>
+  <path d="M213.925 18.275h19.565l.885 4.953a.662.662 0 0 1-.843.744c-1.998-.6-6.482-1.827-9.717-1.827-3.257 0-7.78 1.244-9.757 1.84a.661.661 0 0 1-.845-.722l.712-4.988Z" stroke="#50119C" stroke-width=".645" stroke-linejoin="round"/>
+  <path d="M213.75 18.333a7.74 7.74 0 0 1 7.509-5.863h5.113a7.74 7.74 0 0 1 7.509 5.863l.684 2.737s-4.515-2.58-10.75-2.58-10.75 2.58-10.75 2.58l.685-2.737Z" fill="#A45BFD"/>
+  <path d="M228.33 12.793c1.978 1.548 2.831 5.16 3.01 6.772l2.365.968h.86l-1.182-3.87-2.043-2.473-3.01-1.397Z" fill="#C698FF"/>
+  <path d="M219.515 12.793c-1.978 1.548-.537 4.622-.752 6.342l-4.623 1.398h-.86l1.183-3.87 2.042-2.473 3.01-1.397Z" fill="#7C3DC9"/>
+  <path d="M213.75 18.333a7.74 7.74 0 0 1 7.509-5.863h5.113a7.74 7.74 0 0 1 7.509 5.863l.684 2.737s-4.515-2.58-10.75-2.58-10.75 2.58-10.75 2.58l.685-2.737Z" stroke="#50119C" stroke-width=".645" stroke-linejoin="round"/>
+  <path d="M223.6 18.49v-5.805" stroke="#50119C" stroke-width=".645" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="0.86 1.29"/>
+  <path d="M222.526 12.04c0-.356.288-.645.645-.645h.86c.356 0 .645.289.645.645v.43h-2.15v-.43Z" fill="#7C3DC9" stroke="#50119C" stroke-width=".645" stroke-linejoin="round"/>
+  <path d="M196.771 28.454c1.425-.381 2.624.418 3.044.865.141-.598.779-1.889 2.203-2.27 1.78-.477 3.378.381 3.929 2.439.628 2.348-.522 4.37-1.827 5.848a4.738 4.738 0 0 1-5.024 1.347c-1.869-.627-3.877-1.803-4.507-4.152-.553-2.057.402-3.6 2.182-4.076Z" fill="#DF3030"/>
+  <path d="M204.77 28.589c-.954-1.303-2.546-1.028-3.069-.637-.524.392 1.656.024 2.145 1.142.39.892 1.607.427.924-.505Z" fill="#FF8787"/>
+  <path d="M199.098 29.39c-.592-.528-1.393-.497-1.708-.355-.41.185.663.241 1.191.698.28.243.838-.058.517-.343Z" fill="#F36C6C"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M197.753 28.363c-.853.548-1.763 1.504-1.355 3.027.663 2.472 3.505 5.524 8.771 2.54-.311.51-.674.981-1.049 1.406a4.738 4.738 0 0 1-5.024 1.347c-1.869-.627-3.877-1.803-4.507-4.152-.553-2.057.402-3.6 2.182-4.076a2.92 2.92 0 0 1 .982-.092Z" fill="#CF1E1E"/>
+  <path d="M196.771 28.454c1.425-.381 2.624.418 3.044.865.141-.598.779-1.889 2.203-2.27 1.78-.477 3.378.381 3.929 2.439.628 2.348-.522 4.37-1.827 5.848a4.738 4.738 0 0 1-5.024 1.347c-1.869-.627-3.877-1.803-4.507-4.152-.553-2.057.402-3.6 2.182-4.076Z" stroke="#A21515" stroke-width=".645" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M244.495 35.434c1.424.381 2.063 1.673 2.204 2.27.42-.447 1.618-1.246 3.042-.864 1.781.477 2.735 2.019 2.183 4.076-.63 2.348-2.637 3.524-4.506 4.152a4.737 4.737 0 0 1-5.024-1.346c-1.306-1.478-2.457-3.5-1.828-5.849.55-2.058 2.148-2.916 3.929-2.44Z" fill="#DF3030"/>
+  <path d="M251.355 39.55c-.176-1.606-1.691-2.164-2.341-2.086-.649.077 1.423.849 1.288 2.06-.108.968 1.178 1.174 1.053.026Z" fill="#FF8787"/>
+  <path d="M246.042 37.407c-.249-.753-.958-1.127-1.302-1.161-.447-.045.454.54.683 1.2.121.35.754.368.619-.039Z" fill="#F36C6C"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M245.391 35.845c-1.013.049-2.279.422-2.687 1.944-.662 2.472.273 6.537 6.325 6.586-.525.286-1.074.512-1.611.693a4.737 4.737 0 0 1-5.024-1.346c-1.306-1.478-2.457-3.5-1.828-5.849.55-2.058 2.148-2.916 3.929-2.44.342.093.64.237.896.412Z" fill="#CF1E1E"/>
+  <path d="M244.495 35.434c1.424.381 2.063 1.673 2.204 2.27.42-.447 1.618-1.246 3.042-.864 1.781.477 2.735 2.019 2.183 4.076-.63 2.348-2.637 3.524-4.506 4.152a4.737 4.737 0 0 1-5.024-1.346c-1.306-1.478-2.457-3.5-1.828-5.849.55-2.058 2.148-2.916 3.929-2.44Z" stroke="#A21515" stroke-width=".645" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M184.466 3.608a14.189 14.189 0 0 0-14.202 0l-23.435 13.546a14.19 14.19 0 0 0-7.089 12.286v27.12a14.19 14.19 0 0 0 7.089 12.286l23.435 13.546a14.19 14.19 0 0 0 14.202 0l23.435-13.546a14.19 14.19 0 0 0 7.089-12.286V29.44a14.19 14.19 0 0 0-7.089-12.286L184.466 3.608Z" fill="#ECF5FF" stroke="#A7BFDA" stroke-width=".86"/>
+  <path d="M177.365 2.133V43l-35.354-20.436a13.755 13.755 0 0 1 5.029-5.035l.004-.002L170.479 3.98a13.75 13.75 0 0 1 6.886-1.847Z" fill="#F8FBFF"/>
+  <path d="M140.17 29.44v27.12c0 2.456.655 4.82 1.841 6.876L177.365 43l-35.354-20.436a13.753 13.753 0 0 0-1.841 6.876Z" fill="url(#j)"/>
+  <path d="M214.56 56.571v-27.12c0-2.457-.655-4.82-1.841-6.876l-35.354 20.436 35.354 20.436a13.753 13.753 0 0 0 1.841-6.876Z" fill="#E0EEFF"/>
+  <path d="M177.365 2.15v40.867l35.354-20.436a13.749 13.749 0 0 0-5.033-5.038L184.251 3.997a13.75 13.75 0 0 0-6.886-1.847Z" fill="url(#k)"/>
+  <path d="M147.041 68.472a13.75 13.75 0 0 1-5.03-5.036L177.365 43v40.867c-2.377 0-4.755-.616-6.884-1.847h-.002l-23.435-13.547-.003-.001Z" fill="url(#l)"/>
+  <path d="m184.251 82.02 23.435-13.547a13.749 13.749 0 0 0 5.033-5.037L177.365 43v40.867a13.75 13.75 0 0 0 6.886-1.847Z" fill="#D1E5FE"/>
+  <path d="M171.34 8.643a12.039 12.039 0 0 1 12.05 0l20.692 11.96a12.04 12.04 0 0 1 6.015 10.424v23.946c0 4.3-2.293 8.272-6.015 10.424l-20.692 11.96a12.039 12.039 0 0 1-12.05 0l-20.692-11.96a12.04 12.04 0 0 1-6.015-10.424V31.027c0-4.3 2.293-8.272 6.015-10.424l20.692-11.96Z" fill="#A7BFDA"/>
+  <path d="M183.606 8.27a12.472 12.472 0 0 0-12.482 0l-20.691 11.961a12.47 12.47 0 0 0-6.23 10.796v23.946a12.47 12.47 0 0 0 6.23 10.796l20.691 11.96a12.472 12.472 0 0 0 12.482 0l20.691-11.96a12.47 12.47 0 0 0 6.23-10.796V31.027a12.47 12.47 0 0 0-6.23-10.796l-20.691-11.96Z" stroke="#F8FBFF" stroke-width=".86"/>
+  <path d="M171.555 9.015a11.61 11.61 0 0 1 11.62 0l20.692 11.96a11.61 11.61 0 0 1 5.8 10.052v23.946a11.61 11.61 0 0 1-5.8 10.051l-20.692 11.96a11.61 11.61 0 0 1-11.62 0l-20.692-11.96a11.61 11.61 0 0 1-5.8-10.051V31.027a11.61 11.61 0 0 1 5.8-10.051l20.692-11.96Z" stroke="#A7BFDA" stroke-width=".86"/>
+  <path d="M171.339 8.643a12.04 12.04 0 0 1 12.051 0l20.691 11.96a12.038 12.038 0 0 1 6.015 10.424v23.946c0 4.3-2.292 8.272-6.015 10.424l-20.691 11.96a12.04 12.04 0 0 1-12.051 0l-20.691-11.96a12.039 12.039 0 0 1-6.015-10.424V31.027c0-4.3 2.292-8.272 6.015-10.424l20.691-11.96Z" fill="url(#m)"/>
+  <path d="M171.554 9.015a11.611 11.611 0 0 1 11.621 0l20.691 11.96a11.609 11.609 0 0 1 5.8 10.052v23.946c0 4.146-2.21 7.977-5.8 10.051l-20.691 11.96a11.611 11.611 0 0 1-11.621 0l-20.691-11.96a11.61 11.61 0 0 1-5.8-10.051V31.027a11.61 11.61 0 0 1 5.8-10.051l20.691-11.96Z" stroke="#50119C" stroke-width=".86"/>
+  <path d="m207.855 25.644-28.969 16.725 30.35-8.132v-3.21c0-1.915-.49-3.76-1.381-5.383ZM209.236 43.215h-30.238l30.238 8.102v-8.102ZM207.641 60.728l-28.969-16.725 22.235 22.235 2.744-1.586a11.174 11.174 0 0 0 3.99-3.924ZM193.129 70.734l-15.134-26.213 8.111 30.272 7.023-4.059ZM177.149 78.111V44.633l-8.141 30.383 2.762 1.596a11.167 11.167 0 0 0 5.379 1.5ZM161.228 70.52l15.134-26.214-22.155 22.155 7.021 4.058ZM146.874 60.355l28.969-16.725-30.35 8.132v3.21c0 1.916.49 3.76 1.381 5.383ZM145.493 42.785h30.239l-30.239-8.103v8.103ZM147.088 25.271l28.97 16.726-22.235-22.236-2.745 1.587a11.174 11.174 0 0 0-3.99 3.923ZM161.601 15.265l15.133 26.212-8.111-30.27-7.022 4.058ZM177.579 7.889v33.478l8.142-30.384-2.762-1.596a11.168 11.168 0 0 0-5.38-1.498ZM193.501 15.48l-15.133 26.212 22.153-22.153-7.02-4.058Z" fill="#5F16B6"/>
+  <path d="M167.427 17.738c.929 1.02 1.562 1.718 1.436 3.084l-4.016 3.173c-1.148-4.205-.626-6.68.09-7.393.5-.498 1.561.116 2.49 1.136Z" fill="url(#n)"/>
+  <path d="M164.784 23.644c-.809-2.852-.96-5.072-.44-6.491.306-.836.92-1.273 2.063-.123.74.482 2.484 1.803 2.633 3.18" stroke="#562E11" stroke-width=".645" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M186.988 17.738c-.929 1.02-1.562 1.718-1.436 3.084l4.016 3.173c1.148-4.205.626-6.68-.09-7.393-.5-.498-1.561.116-2.49 1.136Z" fill="url(#o)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M189.542 16.67c.682.793 1.141 3.244.027 7.325l-.816-.645c.43-3.372.062-5.842-.142-6.843.207-.074.398-.1.563-.067l.368.23Z" fill="#FFC794"/>
+  <path d="M189.631 23.644c.809-2.852.96-5.072.44-6.491-.306-.836-.92-1.273-2.063-.123-.74.482-2.484 1.803-2.633 3.18" stroke="#562E11" stroke-width=".645" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M163.987 31.175c0-14.405 9.03-15.265 13.438-15.265 6.127 0 12.986 2.451 13.33 15.265 1.684 2.293 7.379 12.018 7.465 23.973-10.822 1.254-35.523 1.29-38.533 0-3.01-1.29-5.912-4.336-5.912-5.698 0-7.826 7.525-15.444 10.212-18.275Z" fill="url(#p)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M180.972 16.448c3.118.752 6.558 2.257 7.633 15.05 1.54 1.254 4.837 4.73 5.697 8.6l.023-.197c-1.135-4.473-2.623-7.436-3.571-8.726-.273-10.177-4.656-13.818-9.518-14.885l-.264.158Z" fill="#FFC794"/>
+  <path d="M185.917 52.568c-9.245-11.61-16.985-25.263-13.975-35.905l-4.515 2.687-1.72 2.58-1.182 3.87-.538 5.375c-1.469 1.505-4.794 5.16-6.342 7.74-1.935 3.225-4.838 9.03-3.655 11.933 1.182 2.902 2.472 4.192 7.31 4.73 3.87.43 9.925-1.971 12.47-3.225l12.147.215Z" fill="url(#q)"/>
+  <path d="M153.822 49.557c0-7.826 7.478-15.551 10.165-18.382 0-14.835 9.03-15.265 13.438-15.265 6.88 0 13.007 2.15 13.33 15.265 1.684 2.293 7.271 12.341 7.357 24.295" stroke="#562E11" stroke-width=".645" stroke-linejoin="round"/>
+  <ellipse cx="1.613" cy="2.15" rx="1.613" ry="2.15" transform="matrix(-1 0 0 1 169.792 22.468)" fill="#333" stroke="#000" stroke-width=".645"/>
+  <ellipse cx=".503" cy=".858" rx=".503" ry=".858" transform="matrix(-.95966 .28118 .238 .97127 169.094 23.325)" fill="#C9C9C9"/>
+  <ellipse cx="186.454" cy="24.617" rx="1.613" ry="2.15" fill="#333" stroke="#000" stroke-width=".645"/>
+  <ellipse cx=".516" cy=".859" rx=".516" ry=".859" transform="matrix(.96162 .2744 -.244 .96977 185.559 23.325)" fill="#E0E0E0"/>
+  <path d="M170.017 26.649c1.278-2.922 4.562-2.974 7.309-3.106 2.748.132 6.033.05 7.31 3.106 1.112 2.66-.74 8.335-2.206 9.755-1.709 1.656-3.826 1.329-5.104 1.329-1.277 0-3.394.327-5.103-1.329-1.466-1.42-3.359-7.118-2.206-9.755Z" fill="#D47B3A"/>
+  <path d="M183.055 31.589s2.356 1.352 4.243.305M182.907 33.037s1.89 1.56 3.48 1.32M172.104 31.589s-2.356 1.352-4.243.305M172.251 33.037s-1.674 1.56-3.265 1.32M180.972 32.862c-.752 1.307-3.44 1.656-3.44-.958v-1.481M174.092 32.862c.753 1.307 3.44 1.656 3.44-.958v-1.481" stroke="#562E11" stroke-width=".645" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M171.754 27.49c.294-.263 3.219 1.201 3.112 1.743-.108.541-1.174 1.053-2.165.374-.991-.679-1.24-1.854-.947-2.117ZM183.022 27.49c-.294-.263-3.219 1.201-3.112 1.743.108.541 1.174 1.053 2.165.374.991-.679 1.24-1.854.947-2.117Z" fill="#562E11"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M199.08 67.295V58.05h-46.225v7.63l18.915 10.933c3.462 2 7.728 2 11.19 0l16.12-9.318Z" fill="url(#r)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M199.403 67.108V56.975a.323.323 0 0 0-.323-.322h-46.225a.322.322 0 0 0-.322.322v8.518l.645.373v-8.569h45.58v10.184l.645-.373Z" fill="#3D536B"/>
+  <path d="M198.258 58.05h-44.474a.86.86 0 0 1-.671-1.397l2.407-3.01a2.581 2.581 0 0 1 2.015-.968h36.973c.783 0 1.525.356 2.014.968l2.408 3.01a.86.86 0 0 1-.672 1.397Z" fill="#E0EFFF"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="m187.793 55.255-2.688 2.795h-31.33a.86.86 0 0 1-.662-1.397l1.645-2.056 1.419-1.536c.404-.25.873-.386 1.358-.386h29.493l.765 2.58Z" fill="#A8BBCF"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="m167.153 54.18-14.083 2.58 3.208-3.758c.38-.212.812-.327 1.257-.327h25.907l-16.289 1.505Z" fill="#6E8AA7"/>
+  <path d="M198.258 58.05h-44.474a.86.86 0 0 1-.671-1.397l2.407-3.01a2.581 2.581 0 0 1 2.015-.968h36.973c.783 0 1.525.356 2.014.968l2.408 3.01a.86.86 0 0 1-.672 1.397Z" stroke="#3D536B" stroke-width=".645" stroke-linejoin="round"/>
+  <path d="M163.24 54.859c.376-.3.842-.464 1.322-.464h24.316c.48 0 .946.164 1.322.464.52.416.226 1.256-.441 1.256h-26.078c-.667 0-.961-.84-.441-1.256Z" fill="#3D536B" stroke="#3D536B" stroke-width=".645"/>
+  <g filter="url(#s)" transform="rotate(-5.573 162.187 63.497)">
+    <rect x="162.187" y="63.497" width="27.434" height="7.402" rx="2.119" fill="#3FD479"/>
+    <rect x="162.187" y="63.497" width="27.434" height="7.402" rx="2.119" stroke="#1B4D2E" stroke-width=".645"/>
+  </g>
+  <mask id="t" maskUnits="userSpaceOnUse" x="153.149" y="57.685" width="10.057" height="10.764" fill="#000">
+    <path fill="#fff" d="M153.149 57.685h10.057v10.764h-10.057z"/>
+    <path d="M161.112 62.662a2.93 2.93 0 0 0-.124-.377 3.118 3.118 0 0 0-.773-1.124 2.989 2.989 0 0 0-1.22-.684.057.057 0 0 1-.039-.071l.114-.428a.283.283 0 0 0-.196-.348.283.283 0 0 0-.344.204l-.131.488a.06.06 0 0 1-.06.044 3.018 3.018 0 0 0-.492.012c-.007 0-.014 0-.02-.002a.057.057 0 0 1-.04-.07l.167-.627a.283.283 0 0 0-.196-.348.283.283 0 0 0-.344.204l-.255.95a.11.11 0 0 1-.066.074 3.136 3.136 0 0 0-1.195.81 3.19 3.19 0 0 0-.724 1.317 3.15 3.15 0 0 0 1.074 3.283c.328.26.698.447 1.101.555l2.21.592a.185.185 0 0 0 .225-.133l.405-1.509a.236.236 0 0 0-.054-.222l-.102-.111-.006-.007-.383-.418-.007-.008-.484-.529a.107.107 0 0 1-.024-.1.108.108 0 0 1 .009-.024 1.198 1.198 0 0 0 .148-.551c0-.01.001-.018.004-.026a.107.107 0 0 1 .071-.075l.684-.216.01-.003.541-.171.008-.002.383-.122a.187.187 0 0 0 .125-.227Zm-.71-.223a.107.107 0 0 1-.066.06l-1.071.339a.198.198 0 0 1-.218-.07 1.124 1.124 0 0 0-.606-.407l-.006-.001a1.127 1.127 0 0 0-.86.121 1.171 1.171 0 0 0-.539.697c-.086.304-.05.622.101.895a1.129 1.129 0 0 0 1.428.498.196.196 0 0 1 .222.05l.764.834a.13.13 0 0 1 .03.124l-.21.785a.107.107 0 0 1-.13.076l-1.745-.467a2.474 2.474 0 0 1-.894-.45 2.572 2.572 0 0 1-.442-3.594c.2-.26.444-.477.726-.645a.034.034 0 0 1 .026-.004.034.034 0 0 1 .023.042l-.08.3a.283.283 0 0 0 .196.348.283.283 0 0 0 .344-.203l.189-.708a.11.11 0 0 1 .082-.078 2.449 2.449 0 0 1 1.136.035c.374.1.677.263.957.5.27.23.486.51.642.833a.109.109 0 0 1 .001.09Zm-1.703 1.224a.596.596 0 0 1-.716.407.593.593 0 0 1-.411-.73.593.593 0 0 1 .721-.427.575.575 0 0 1 .408.4c.029.1.032.207.009.31l-.011.04Z"/>
+    <path d="M160.056 63.194a2.013 2.013 0 0 1-.405 1.514l-.007.008.383.419.006-.007c.242-.289.415-.623.514-.991.099-.37.116-.745.05-1.116l-.001-.008-.541.17.001.011Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="m160.055 63.184-.01.003-.684.216.684-.216.01-.003Zm-.926.895a.108.108 0 0 1 .009-.024 1.192 1.192 0 0 1 0 0 .112.112 0 0 0-.009.024Z"/>
+  </mask>
+  <path d="M161.112 62.662a2.93 2.93 0 0 0-.124-.377 3.118 3.118 0 0 0-.773-1.124 2.989 2.989 0 0 0-1.22-.684.057.057 0 0 1-.039-.071l.114-.428a.283.283 0 0 0-.196-.348.283.283 0 0 0-.344.204l-.131.488a.06.06 0 0 1-.06.044 3.018 3.018 0 0 0-.492.012c-.007 0-.014 0-.02-.002a.057.057 0 0 1-.04-.07l.167-.627a.283.283 0 0 0-.196-.348.283.283 0 0 0-.344.204l-.255.95a.11.11 0 0 1-.066.074 3.136 3.136 0 0 0-1.195.81 3.19 3.19 0 0 0-.724 1.317 3.15 3.15 0 0 0 1.074 3.283c.328.26.698.447 1.101.555l2.21.592a.185.185 0 0 0 .225-.133l.405-1.509a.236.236 0 0 0-.054-.222l-.102-.111-.006-.007-.383-.418-.007-.008-.484-.529a.107.107 0 0 1-.024-.1.108.108 0 0 1 .009-.024 1.198 1.198 0 0 0 .148-.551c0-.01.001-.018.004-.026a.107.107 0 0 1 .071-.075l.684-.216.01-.003.541-.171.008-.002.383-.122a.187.187 0 0 0 .125-.227Zm-.71-.223a.107.107 0 0 1-.066.06l-1.071.339a.198.198 0 0 1-.218-.07 1.124 1.124 0 0 0-.606-.407l-.006-.001a1.127 1.127 0 0 0-.86.121 1.171 1.171 0 0 0-.539.697c-.086.304-.05.622.101.895a1.129 1.129 0 0 0 1.428.498.196.196 0 0 1 .222.05l.764.834a.13.13 0 0 1 .03.124l-.21.785a.107.107 0 0 1-.13.076l-1.745-.467a2.474 2.474 0 0 1-.894-.45 2.572 2.572 0 0 1-.442-3.594c.2-.26.444-.477.726-.645a.034.034 0 0 1 .026-.004.034.034 0 0 1 .023.042l-.08.3a.283.283 0 0 0 .196.348.283.283 0 0 0 .344-.203l.189-.708a.11.11 0 0 1 .082-.078 2.449 2.449 0 0 1 1.136.035c.374.1.677.263.957.5.27.23.486.51.642.833a.109.109 0 0 1 .001.09Zm-1.703 1.224a.596.596 0 0 1-.716.407.593.593 0 0 1-.411-.73.593.593 0 0 1 .721-.427.575.575 0 0 1 .408.4c.029.1.032.207.009.31l-.011.04Z" fill="#3D536B"/>
+  <path d="M160.056 63.194a2.013 2.013 0 0 1-.405 1.514l-.007.008.383.419.006-.007c.242-.289.415-.623.514-.991.099-.37.116-.745.05-1.116l-.001-.008-.541.17.001.011Z" fill="#3D536B"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="m160.055 63.184-.01.003-.684.216.684-.216.01-.003Zm-.926.895a.108.108 0 0 1 .009-.024 1.192 1.192 0 0 1 0 0 .112.112 0 0 0-.009.024Z" fill="#3D536B"/>
+  <path d="m159.759 61.517-.139.164.283-.324-.144.16Zm.641.832.194-.093-.194.093Zm-.641-.832.139-.165-.283.324.144-.16Zm-.473 1.986-.215-.004.215.005Zm-.133.676.158-.145-.158.145Zm.484.529-.158.145.158-.145Zm.007.008-.158.145.171.186.156-.198-.169-.133Zm.007-.009.169.133-.169-.133Zm-.513-.652-.188-.104.188.104Zm.223-.652.065.205-.065-.205Zm.684-.216-.065-.205.065.205Zm-.755.29-.208-.055.208.056Zm-.161.602-.208-.056.208.056Zm.769-2.726a2.66 2.66 0 0 0-1.041-.545l-.111.415c.325.087.619.241.874.458l.278-.328Zm.702 1.17a.325.325 0 0 0-.006-.267l-.387.186a.107.107 0 0 1-.003-.087l.396.169Zm-.006-.267a2.714 2.714 0 0 0-.696-.904l-.278.329a2.3 2.3 0 0 1 .587.761l.387-.186Zm-.979-.58.288-.319-.288.32Zm-.544 1.823a1.03 1.03 0 0 1-.033.233l.415.111c.029-.11.046-.222.048-.335l-.43-.01Zm-.077.825.485.53.317-.291-.485-.53-.317.291Zm.485.53.007.007.317-.29-.008-.008-.316.29Zm.334-.005.007-.009-.338-.266-.007.009.338.266Zm.007-.01c.184-.234.316-.501.394-.792l-.415-.111c-.063.235-.17.45-.318.64l.339.264Zm-.021-.903.415.111-.415-.111Zm.387 1.053-.383-.418-.317.29.383.419.317-.29Zm-.859-.831c.054-.099.096-.205.126-.314l-.415-.112c-.021.077-.051.15-.088.219l.377.207Zm.099-.55.683-.216-.129-.41-.684.216.13.41Zm.683-.216.01-.003-.128-.41-.011.003.129.41Zm-.813-.194a.323.323 0 0 0-.214.224l.415.111a.108.108 0 0 1-.071.075l-.13-.41Zm.04.937a.096.096 0 0 1-.009.023l-.377-.207a.321.321 0 0 0-.029.071l.415.113Zm-.415-.112a.322.322 0 0 0 .073.301l.317-.29a.108.108 0 0 1 .025.1l-.415-.111Zm.161-.6a.326.326 0 0 0-.011.076l.43.01a.07.07 0 0 1-.004.024l-.415-.11Zm.677-1.906-.278.328.278-.328Zm-2.093-.536.087.422-.087-.422Zm-.78.303.22.37.003-.002-.223-.368Zm-.726.646-.342-.262.342.262Zm-.511 1.923.426-.06-.426.06Zm.317.93-.373.213.373-.214Zm.636.74.267-.337-.267.337Zm2.949-.068.318-.29-.318.29Zm-.764-.835.317-.29-.317.29Zm-.222-.05-.166-.396.166.397Zm-1.428-.497.376-.209-.376.209Zm-.101-.895-.414-.117.414.117Zm1.399-.818.111-.415-.002-.001-.109.416Zm.612.408-.342.261.342-.26Zm.218.07.129.41-.129-.41Zm1.071-.339-.129-.41h-.001l.13.41Zm.066-.06.239-.357-.431-.289-.203.477.395.169Zm-1.861.613-.296.312.296-.312Zm-.274 1.021.101.418-.101-.418Zm.27-.147-.296-.312.296.312Zm.162-.263.411.125.002-.007.002-.007-.415-.111Zm.011-.04.415.11.002-.006.002-.007-.419-.097Zm-.009-.31-.413.122.413-.122Zm1.355-.119.426-.06v-.001l-.426.061Zm-.011-.007-.129-.41h-.001l.13.41Zm-.684.216.129.41-.129-.41Zm-.223.651-.376-.207h-.001l.377.207Zm1.974-1.392.324.282.15-.171-.058-.22-.416.109Zm-.028-.101.413-.122-.413.122Zm-.096-.276-.399.16.399-.16Zm-.773-1.124.292-.317h-.001l-.291.317Zm-1.22-.684-.118.413h.001l.117-.413Zm-.656-.111-.024.43.024-.43Zm-.492.012-.046-.428h-.001l.047.428Zm-.754.18.152.403h.001l-.153-.402Zm-1.195.811.316.291-.316-.29Zm-.724 1.317-.415-.113.415.113Zm-.083 1.234-.426.057.426-.057Zm.379 1.133-.375.21.375-.21Zm.778.916.268-.336-.268.336Zm3.887-.716.318-.29h-.001l-.317.29Zm-.102-.112.317-.29-.002-.003-.315.293Zm-.006-.007-.327-.278-.248.291.26.28.315-.293Zm-.383-.418-.316.291.342.372.312-.397-.338-.266Zm-.007-.008-.317.29.001.001.316-.29Zm-.484-.529.317-.29-.317.29Zm.133-.675-.43-.01.43.01Zm.769-.32-.416-.111-.203.757.748-.236-.129-.41Zm.541-.171-.126-.411h-.004l.13.41Zm.008-.002.126.41h.003l-.129-.41Zm.383-.122.13.41-.13-.41Zm.125-.227-.324-.283-.149.172.057.22.416-.109Zm-.711-.313.387-.186-.387.186Zm.001.09-.239.358.432.288.203-.477-.396-.169Zm-.751 2.269.338.266.001-.002-.339-.264Zm.382.42.327.279.002-.002-.329-.277Zm.564-2.107.424-.075-.001-.003-.423.078Zm-.001-.008.423-.078-.088-.48-.465.148.13.41Zm-1.306.465.415.111-.415-.111Zm-.161.6.415.113v-.001l-.415-.111Zm-.216-3.478a2.878 2.878 0 0 0-1.333-.04l.173.843c.313-.065.627-.055.937.028l.223-.83Zm-1.333-.04a.54.54 0 0 0-.411.388l.831.223a.322.322 0 0 1-.247.232l-.173-.843Zm-.411.388-.189.707.83.223.19-.707-.831-.223Zm-.189.707a.146.146 0 0 1 .182-.1l-.222.83a.712.712 0 0 0 .87-.507l-.83-.223Zm.182-.1c.088.023.126.109.108.178l-.831-.222c-.1.373.114.77.501.874l.222-.83Zm.108.178.08-.3-.83-.223-.081.3.831.223Zm.08-.3a.463.463 0 0 0-.327-.568l-.223.83a.396.396 0 0 1-.28-.485l.83.223Zm-.327-.568a.463.463 0 0 0-.359.05l.445.737a.4.4 0 0 1-.309.044l.223-.831Zm-.356.05c-.33.195-.615.449-.849.753l.683.523a2.13 2.13 0 0 1 .605-.537l-.439-.74Zm-.849.753a3.02 3.02 0 0 0-.521 1.059l.831.223c.075-.279.2-.533.373-.759l-.683-.523Zm-.521 1.059a2.98 2.98 0 0 0-.074 1.185l.852-.118a2.09 2.09 0 0 1 .053-.844l-.831-.223Zm-.074 1.185c.053.382.177.747.37 1.084l.746-.427a2.132 2.132 0 0 1-.264-.775l-.852.118Zm.37 1.084c.191.335.441.627.743.865l.533-.675a2.124 2.124 0 0 1-.53-.617l-.746.427Zm.743.865c.312.246.665.424 1.049.527l.222-.83a2.038 2.038 0 0 1-.738-.372l-.533.675Zm1.049.527 1.745.468.223-.831-1.746-.468-.222.831Zm1.745.468a.536.536 0 0 0 .656-.38l-.83-.224a.323.323 0 0 1 .397-.227l-.223.83Zm.656-.38.21-.786-.83-.222-.21.784.83.223Zm.21-.786a.56.56 0 0 0-.127-.525l-.635.58a.297.297 0 0 1-.068-.277l.83.222Zm-.892-1.36a.629.629 0 0 0-.301-.183l-.223.83a.236.236 0 0 1-.11-.066l.634-.581Zm-.301-.183a.624.624 0 0 0-.404.027l.332.793a.237.237 0 0 1-.151.01l.223-.83Zm-.404.027a.69.69 0 0 1-.452.031l-.223.831c.336.09.686.066 1.007-.069l-.332-.793Zm-.452.031a.698.698 0 0 1-.434-.34l-.752.416c.207.374.55.644.963.755l.223-.83Zm-.434-.34a.745.745 0 0 1-.064-.57l-.827-.234c-.117.411-.068.846.139 1.22l.752-.417Zm-.064-.57a.747.747 0 0 1 .343-.443l-.434-.742c-.361.21-.622.549-.736.95l.827.235Zm.343-.443a.697.697 0 0 1 .534-.076l.218-.832a1.557 1.557 0 0 0-1.186.166l.434.742Zm.531-.077.006.002.223-.83-.006-.002-.223.83Zm.006.002c.151.04.28.126.376.252l.684-.521a1.554 1.554 0 0 0-.837-.562l-.223.83Zm.376.252c.084.11.202.19.337.227l.223-.831a.225.225 0 0 1 .123.082l-.683.522Zm.337.227a.63.63 0 0 0 .352-.008l-.258-.82a.23.23 0 0 1 .129-.003l-.223.83Zm1.423-.346a.54.54 0 0 0 .333-.302l-.791-.338a.322.322 0 0 1 .2-.18l.258.82Zm-1.628-.17a1.005 1.005 0 0 0-.433-.242l-.222.83a.154.154 0 0 1 .063.036l.592-.624Zm-.433-.242a1.024 1.024 0 0 0-1.248.73l.831.223a.164.164 0 0 1 .195-.123l.222-.83Zm-1.248.73c-.145.54.166 1.11.716 1.257l.223-.831a.163.163 0 0 1-.108-.203l-.831-.223Zm.716 1.257c.162.043.333.045.496.006l-.201-.836a.147.147 0 0 1-.072-.001l-.223.83Zm.496.006a1.02 1.02 0 0 0 .464-.253l-.591-.624a.17.17 0 0 1-.074.041l.201.836Zm.464-.252c.131-.124.226-.28.278-.451l-.822-.25a.183.183 0 0 1-.047.076l.591.625Zm.282-.465.011-.04-.831-.223-.01.04.83.223Zm.015-.054a1.04 1.04 0 0 0-.016-.529l-.825.245c.009.028.01.059.003.09l.838.194Zm-.016-.529a1.027 1.027 0 0 0-.276-.451l-.592.624c.02.018.035.043.043.072l.825-.245Zm1.309.912a2.42 2.42 0 0 0 .06-.969l-.851.12c.029.208.016.419-.04.627l.831.222Zm.06-.97-.002-.01-.851.122.002.01.851-.122Zm-.556-.36-.01.003.257.821.01-.003-.257-.82Zm-.011.004-.684.215.259.82.684-.215-.259-.82Zm-1.085.9a.762.762 0 0 1-.068.17l.753.414c.063-.114.112-.236.146-.362l-.831-.223Zm2.698-1.124-.031-.114-.825.243.024.089.832-.218Zm-.031-.114a3.801 3.801 0 0 0-.11-.315l-.798.321c.031.078.059.157.083.238l.825-.245Zm-.11-.314a3.559 3.559 0 0 0-.88-1.28l-.584.632c.287.264.518.6.666.968l.798-.32Zm-.881-1.28a3.413 3.413 0 0 0-1.393-.782l-.235.827c.394.112.745.31 1.045.587l.583-.633Zm-1.393-.782c.2.057.309.262.258.454l-.831-.223a.488.488 0 0 0 .337.596l.236-.827Zm.258.454.114-.427-.83-.223-.115.427.831.223Zm.114-.427a.713.713 0 0 0-.5-.875l-.223.83a.147.147 0 0 1-.107-.178l.83.223Zm-.5-.875a.713.713 0 0 0-.871.507l.831.223a.148.148 0 0 1-.183.1l.223-.83Zm-.871.507-.131.49.831.222.131-.49-.831-.222Zm-.131.49a.372.372 0 0 1 .381-.276l-.049.86c.234.012.44-.142.499-.362l-.831-.223Zm.381-.276a3.45 3.45 0 0 0-.563.014l.092.855c.14-.014.282-.018.422-.01l.049-.858Zm-.564.014a.375.375 0 0 1 .138.011l-.223.83c.058.016.118.021.179.014l-.094-.855Zm.138.011a.373.373 0 0 1 .264.456l-.831-.223a.488.488 0 0 0 .344.598l.223-.831Zm.264.456.168-.626-.831-.223-.168.626.831.223Zm.168-.626a.713.713 0 0 0-.501-.875l-.222.83a.146.146 0 0 1-.108-.178l.831.223Zm-.501-.875a.712.712 0 0 0-.87.507l.83.223a.146.146 0 0 1-.182.1l.222-.83Zm-.87.507-.255.95.831.223.254-.95-.83-.223Zm-.255.95c.027-.1.1-.18.196-.216l.306.804a.54.54 0 0 0 .329-.365l-.831-.222Zm.196-.216a3.574 3.574 0 0 0-1.359.922l.633.581c.285-.31.642-.552 1.031-.7l-.305-.803Zm-1.359.922a3.621 3.621 0 0 0-.822 1.494l.83.226c.116-.425.332-.82.625-1.139l-.633-.581Zm-.822 1.495c-.125.46-.156.932-.094 1.403l.853-.113a2.679 2.679 0 0 1 .071-1.065l-.83-.225Zm-.094 1.403c.06.453.205.887.43 1.286l.75-.42a2.693 2.693 0 0 1-.327-.98l-.853.114Zm.43 1.286c.227.405.525.756.886 1.043l.535-.673a2.677 2.677 0 0 1-.671-.79l-.75.42Zm.886 1.043c.373.297.797.51 1.257.634l.222-.831a2.58 2.58 0 0 1-.944-.476l-.535.673Zm1.257.634 2.209.592.223-.831-2.21-.592-.222.83Zm2.209.592a.616.616 0 0 0 .753-.438l-.831-.222a.244.244 0 0 1 .301-.171l-.223.83Zm.753-.438.404-1.508-.831-.223-.404 1.509.831.222Zm.404-1.508a.666.666 0 0 0-.151-.624l-.635.58a.194.194 0 0 1-.045-.179l.831.223Zm-.152-.624-.102-.112-.634.58.102.113.634-.58Zm-.104-.114-.006-.006-.63.585.006.006.63-.585Zm-.387-.423-.007-.008-.633.582.007.008.633-.582Zm-.007-.007-.484-.529-.634.58.484.53.634-.581Zm-.293-.519c.033-.126.052-.256.055-.386l-.86-.018a.76.76 0 0 1-.026.182l.831.222Zm.523-.305.541-.171-.259-.82-.541.17.259.82Zm.538-.17.008-.002-.253-.823-.007.003.252.822Zm.011-.004.384-.12-.259-.82-.384.12.259.82Zm.384-.12a.618.618 0 0 0 .411-.747l-.832.218a.241.241 0 0 1 .162-.292l.259.82Zm.319-.355-.648-.566.648.566Zm-2.746-1.514c.312.083.559.217.791.414l.556-.656a2.817 2.817 0 0 0-1.124-.589l-.223.83Zm.791.414c.224.19.403.42.532.69l.775-.372a2.935 2.935 0 0 0-.751-.974l-.556.656Zm.532.69a.318.318 0 0 1-.006-.264l.791.337a.54.54 0 0 0-.01-.445l-.775.372Zm.628-.453-.478.714.478-.714Zm-1.05 1.799a1.548 1.548 0 0 1-.279.562l.678.53c.201-.259.347-.552.432-.87l-.831-.222Zm-.278.56-.007.01.676.531.007-.008-.676-.532Zm1.042.972.005-.006-.655-.557-.005.006.655.557Zm.007-.008c.283-.338.486-.728.6-1.157l-.83-.223a2.135 2.135 0 0 1-.429.827l.659.553Zm.6-1.157c.115-.429.135-.868.059-1.302l-.847.15c.054.309.04.62-.042.93l.83.222Zm.058-1.305-.001-.008-.846.155.001.008.846-.155Zm-.554-.34-.541.17.259.82.541-.17-.259-.82Zm-.597 2.562-.765-.835-.634.58.764.836.635-.581Zm-.475-1.917 1.071-.338-.259-.82-1.071.338.259.82Zm.311.34a.322.322 0 0 1-.215.225l-.258-.82a.538.538 0 0 0-.358.374l.831.221Zm-.065-.516h-.001l.831.223-.83-.223Zm.021.827-.831-.223.831.223Zm-.9-.052a.538.538 0 0 0-.048.12l.831.223a.316.316 0 0 1-.029.071l-.754-.414Zm.709.042c.077.084.101.199.074.302l-.831-.224a.539.539 0 0 0 .123.503l.634-.581Zm.246-.376a.325.325 0 0 1-.011.076l-.831-.223a.55.55 0 0 0-.018.129l.86.018Z" fill="#BED2E7" mask="url(#t)"/>
+  <mask id="u" maskUnits="userSpaceOnUse" x="188.254" y="56.991" width="11.428" height="11.794" fill="#000">
+    <path fill="#fff" d="M188.254 56.991h11.428v11.794h-11.428z"/>
+    <path d="M195.756 60.526a3.066 3.066 0 0 0-.354-.178 3.116 3.116 0 0 0-1.342-.248 2.99 2.99 0 0 0-1.346.378.058.058 0 0 1-.078-.022l-.221-.383a.283.283 0 0 0-.385-.107.283.283 0 0 0-.1.387l.253.438a.058.058 0 0 1-.011.073c-.122.109-.236.229-.339.356a.057.057 0 0 1-.094-.009l-.324-.56a.283.283 0 0 0-.385-.108.282.282 0 0 0-.1.388l.492.852c.017.03.019.067.005.099a3.137 3.137 0 0 0 .148 2.86 3.15 3.15 0 0 0 3.081 1.562 3.02 3.02 0 0 0 1.171-.385l1.981-1.144a.186.186 0 0 0 .065-.254l-.781-1.352a.237.237 0 0 0-.195-.12l-.151-.006h-.008l-.567-.026h-.011l-.716-.032a.107.107 0 0 1-.088-.054.1.1 0 0 1-.011-.024 1.177 1.177 0 0 0-.285-.494.108.108 0 0 1-.018-.124l.331-.636.005-.01.261-.503.004-.007.186-.357a.188.188 0 0 0-.073-.25Zm-.659.345c.011.03.01.062-.004.09l-.519.996a.198.198 0 0 1-.203.105 1.122 1.122 0 0 0-.716.141l-.005.003c-.26.152-.445.398-.523.694-.077.296-.038.607.112.874.154.276.404.475.704.561a1.125 1.125 0 0 0 1.362-.657.197.197 0 0 1 .192-.122l1.131.05a.133.133 0 0 1 .109.066l.406.704a.107.107 0 0 1-.038.145l-1.564.904a2.468 2.468 0 0 1-.95.314 2.582 2.582 0 0 1-1.856-.507 2.58 2.58 0 0 1-.941-2.692.033.033 0 0 1 .015-.02.034.034 0 0 1 .046.013l.155.269a.283.283 0 0 0 .385.107.282.282 0 0 0 .1-.387l-.366-.634a.107.107 0 0 1 .003-.113c.212-.323.491-.585.826-.779a2.39 2.39 0 0 1 1.032-.322c.353-.03.704.016 1.042.135.03.01.053.033.065.062Zm-.339 2.07a.61.61 0 0 1-.015.595.58.58 0 0 1-.204.198.593.593 0 0 1-.807-.225.593.593 0 0 1 .209-.811.575.575 0 0 1 .571-.005c.092.05.169.123.225.212l.021.036Z"/>
+    <path d="M195.386 61.65c.215.162.393.363.529.599a2 2 0 0 1 .255.758l.001.01.567.025-.001-.008a2.576 2.576 0 0 0-.337-1.065 2.57 2.57 0 0 0-.754-.825l-.007-.004-.261.503.008.007Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="m195.378 61.643-.005.01-.331.636.331-.636.005-.01Zm-.022 1.288a.1.1 0 0 1-.011-.024 1.177 1.177 0 0 0-.112-.264h-.001c.049.084.087.172.113.264a.104.104 0 0 0 .011.024Z"/>
+  </mask>
+  <path d="M195.756 60.526a3.066 3.066 0 0 0-.354-.178 3.116 3.116 0 0 0-1.342-.248 2.99 2.99 0 0 0-1.346.378.058.058 0 0 1-.078-.022l-.221-.383a.283.283 0 0 0-.385-.107.283.283 0 0 0-.1.387l.253.438a.058.058 0 0 1-.011.073c-.122.109-.236.229-.339.356a.057.057 0 0 1-.094-.009l-.324-.56a.283.283 0 0 0-.385-.108.282.282 0 0 0-.1.388l.492.852c.017.03.019.067.005.099a3.137 3.137 0 0 0 .148 2.86 3.15 3.15 0 0 0 3.081 1.562 3.02 3.02 0 0 0 1.171-.385l1.981-1.144a.186.186 0 0 0 .065-.254l-.781-1.352a.237.237 0 0 0-.195-.12l-.151-.006h-.008l-.567-.026h-.011l-.716-.032a.107.107 0 0 1-.088-.054.1.1 0 0 1-.011-.024 1.177 1.177 0 0 0-.285-.494.108.108 0 0 1-.018-.124l.331-.636.005-.01.261-.503.004-.007.186-.357a.188.188 0 0 0-.073-.25Zm-.659.345c.011.03.01.062-.004.09l-.519.996a.198.198 0 0 1-.203.105 1.122 1.122 0 0 0-.716.141l-.005.003c-.26.152-.445.398-.523.694-.077.296-.038.607.112.874.154.276.404.475.704.561a1.125 1.125 0 0 0 1.362-.657.197.197 0 0 1 .192-.122l1.131.05a.133.133 0 0 1 .109.066l.406.704a.107.107 0 0 1-.038.145l-1.564.904a2.468 2.468 0 0 1-.95.314 2.582 2.582 0 0 1-1.856-.507 2.58 2.58 0 0 1-.941-2.692.033.033 0 0 1 .015-.02.034.034 0 0 1 .046.013l.155.269a.283.283 0 0 0 .385.107.282.282 0 0 0 .1-.387l-.366-.634a.107.107 0 0 1 .003-.113c.212-.323.491-.585.826-.779a2.39 2.39 0 0 1 1.032-.322c.353-.03.704.016 1.042.135.03.01.053.033.065.062Zm-.339 2.07a.61.61 0 0 1-.015.595.58.58 0 0 1-.204.198.593.593 0 0 1-.807-.225.593.593 0 0 1 .209-.811.575.575 0 0 1 .571-.005c.092.05.169.123.225.212l.021.036Z" fill="#3D536B"/>
+  <path d="M195.386 61.65c.215.162.393.363.529.599a2 2 0 0 1 .255.758l.001.01.567.025-.001-.008a2.576 2.576 0 0 0-.337-1.065 2.57 2.57 0 0 0-.754-.825l-.007-.004-.261.503.008.007Z" fill="#3D536B"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="m195.378 61.643-.005.01-.331.636.331-.636.005-.01Zm-.022 1.288a.1.1 0 0 1-.011-.024 1.177 1.177 0 0 0-.112-.264h-.001c.049.084.087.172.113.264a.104.104 0 0 0 .011.024Z" fill="#3D536B"/>
+  <path d="m193.99 60.674.017.214-.028-.43.011.216Zm1.042.135.071-.203-.071.203Zm-1.042-.135-.018-.215.029.43-.011-.215Zm1.07 1.74-.155.148.155-.149Zm.384.571.009-.215-.009.215Zm.716.032-.009.214.009-.215Zm.011 0-.009.215.252.01-.03-.25-.213.025Zm-.001-.01.213-.026-.213.025Zm-.825-.1-.206.06.206-.06Zm-.303-.618.191.1-.191-.1Zm.331-.636-.191-.1.191.1Zm-.329.74-.186.107.186-.108Zm.312.538-.187.107.187-.107Zm-1.384-2.472c-.397.033-.775.151-1.121.351l.215.373c.291-.169.608-.268.941-.295l-.035-.429Zm1.324.332a.323.323 0 0 0-.193-.185l-.142.406a.106.106 0 0 1-.064-.06l.399-.16Zm-.193-.185a2.72 2.72 0 0 0-1.131-.147l.035.429c.323-.027.643.015.954.124l.142-.406Zm-1.102.282-.022-.43.022.43Zm.904 1.674a.95.95 0 0 1 .141.188l.373-.215a1.425 1.425 0 0 0-.204-.27l-.31.297Zm.529.638.717.031.019-.43-.717-.03-.019.429Zm.717.031h.011l.018-.429h-.011l-.018.43Zm.233-.24-.001-.01-.427.05.001.011.427-.05Zm-.001-.01a2.227 2.227 0 0 0-.282-.84l-.372.215c.122.211.198.439.227.677l.427-.053Zm-.654-.625.372-.215-.372.215Zm1.018.471-.567-.025-.019.43.567.025.019-.43Zm-1.195.02a1.426 1.426 0 0 0-.133-.311l-.373.215c.04.068.071.141.093.216l.413-.12Zm-.319-.459.331-.636-.382-.199-.331.637.382.198Zm.33-.636.005-.009-.381-.2-.005.01.381.2Zm-.712.438a.322.322 0 0 0 .007.31l.373-.215a.11.11 0 0 1 .002.103l-.382-.198Zm.691.634a.175.175 0 0 1 .01.023l-.413.12a.298.298 0 0 0 .03.071l.373-.214Zm-.373.215a.324.324 0 0 0 .265.16l.019-.429a.108.108 0 0 1 .089.054l-.373.215Zm-.311-.539a.34.34 0 0 0 .047.062l.31-.298a.09.09 0 0 1 .015.02l-.372.216Zm-.868-1.826.035.428-.035-.428Zm-1.858 1.101.358.237h.001l-.359-.237Zm-.338.765.417.107v-.003l-.417-.104Zm-.057.971-.427.056.427-.056Zm.998 1.721.26-.343-.26.343Zm.882.433-.113.415.113-.415Zm.974.074-.05-.427.05.427Zm2.037-2.134.019-.429-.019.43Zm-1.131-.05.019-.429-.019.43Zm-.192.123-.398-.163.398.163Zm-1.362.657.119-.413-.119.413Zm-.704-.561-.376.21.376-.21Zm.411-1.568-.215-.372-.002.001.217.371Zm.721-.144-.057.427.057-.427Zm.203-.105.382.199-.382-.199Zm.519-.996-.382-.199.382.199Zm.004-.09-.084-.422-.508.101.193.481.399-.16Zm-.883 1.75.011.43-.011-.43Zm.529.915.366.225-.366-.225Zm.086-.294-.43-.011.43.011Zm-.071-.301.379-.203-.003-.006-.004-.006-.372.215Zm-.021-.036.372-.215-.003-.007-.004-.006-.365.228Zm-.225-.212-.205.377.205-.377Zm.874-1.043.259-.344h-.001l-.258.344Zm-.013.003-.381-.2-.001.001.382.199Zm-.331.636.381.198-.381-.198Zm.303.618-.413.12.413-.12Zm.411-2.38.429-.03-.015-.227-.196-.115-.218.371Zm-.091-.052.206-.378h-.001l-.205.378Zm-.263-.127-.169.395h.001l.168-.395Zm-1.342-.248-.017-.43.017.43Zm-1.346.378.209.376h.001l-.21-.376Zm-.542.386.286.32-.286-.32Zm-.339.356-.335-.27-.001.002.336.268Zm-.406.662.392.176-.392-.176Zm-.272 1.418.43-.018-.43.018Zm.42 1.443-.373.213.373-.213Zm.814.93-.262.342.262-.341Zm1.068.534-.116.414.116-.414Zm1.199.098-.049-.428.049.428Zm2.241-3.256.02-.43h-.001l-.019.43Zm-.151-.006.019-.43h-.004l-.015.43Zm-.008 0-.429.034.031.381.382.014.016-.43Zm-.567-.026-.018.43.505.02-.06-.5-.427.05Zm-.011 0-.019.43h.001l.018-.43Zm-.716-.032.019-.43-.019.43Zm-.384-.572-.31.298.31-.298Zm.318-.77-.373.215.392.68.362-.696-.381-.199Zm.261-.503-.38-.201-.001.003.381.198Zm.004-.007.38.201.002-.003-.382-.198Zm.186-.357.381.198-.381-.198Zm-.073-.25-.429.03.016.227.196.115.217-.371Zm-.724.283.143-.406h-.001l-.142.406Zm.065.062.084.422.509-.101-.194-.481-.399.16Zm1.073 2.136.427-.051-.001-.002-.426.053Zm.567.027.429-.035-.001-.003-.428.038Zm-1.091-1.89.247-.352-.003-.001-.244.353Zm-.007-.004.245-.354-.401-.277-.225.432.381.199Zm-.595 1.252.373-.215h-.001l-.372.215Zm.312.54.372-.215-.372.214Zm-2.613-2.308a2.872 2.872 0 0 0-.97.914l.718.474c.176-.267.404-.483.682-.643l-.43-.745Zm-.97.914a.54.54 0 0 0-.017.565l.745-.43a.322.322 0 0 1-.011.339l-.717-.474Zm-.017.565.366.634.745-.43-.366-.634-.745.43Zm.366.634a.148.148 0 0 1 .058-.2l.43.745c.347-.2.451-.64.257-.975l-.745.43Zm.058-.2a.148.148 0 0 1 .203.05l-.745.43a.713.713 0 0 0 .972.265l-.43-.745Zm.203.05-.156-.27-.744.43.155.27.745-.43Zm-.156-.27a.463.463 0 0 0-.633-.17l.43.745a.395.395 0 0 1-.541-.144l.744-.43Zm-.633-.17a.464.464 0 0 0-.218.29l.835.207a.396.396 0 0 1-.187.248l-.43-.744Zm-.217.287a3.004 3.004 0 0 0-.067 1.133l.853-.112a2.116 2.116 0 0 1 .048-.808l-.834-.213Zm-.067 1.134c.052.394.181.77.38 1.117l.746-.43a2.146 2.146 0 0 1-.273-.8l-.853.113Zm.38 1.117c.201.348.466.648.786.89l.519-.686a2.105 2.105 0 0 1-.559-.634l-.746.43Zm.786.89c.308.233.654.403 1.028.505l.226-.83a2.149 2.149 0 0 1-.735-.36l-.519.685Zm1.028.505c.373.102.756.131 1.137.086l-.1-.854a2.123 2.123 0 0 1-.811-.062l-.226.83Zm1.137.086c.395-.046.771-.17 1.115-.369l-.43-.745c-.242.14-.506.227-.785.26l.1.854Zm1.115-.369 1.564-.903-.43-.745-1.564.903.43.745Zm1.564-.903a.537.537 0 0 0 .195-.733l-.745.43a.324.324 0 0 1 .12-.442l.43.745Zm.195-.733-.406-.704-.745.43.406.704.745-.43Zm-.406-.704a.563.563 0 0 0-.462-.281l-.038.86a.299.299 0 0 1-.245-.149l.745-.43Zm-1.593-.331a.627.627 0 0 0-.342.084l.43.744a.233.233 0 0 1-.125.031l.037-.859Zm-.342.084a.627.627 0 0 0-.267.305l.796.326a.238.238 0 0 1-.099.113l-.43-.744Zm-.267.305a.689.689 0 0 1-.298.341l.43.745c.302-.174.532-.438.664-.76l-.796-.326Zm-.298.341a.695.695 0 0 1-.547.066l-.237.827c.411.117.844.066 1.214-.148l-.43-.745Zm-.547.066a.743.743 0 0 1-.448-.358l-.751.42c.209.373.551.647.962.765l.237-.827Zm-.448-.358a.746.746 0 0 1-.071-.555l-.832-.218c-.106.404-.051.828.152 1.193l.751-.42Zm-.071-.555a.697.697 0 0 1 .324-.431l-.434-.743c-.36.21-.616.552-.722.956l.832.218Zm.322-.43.005-.003-.43-.745-.005.003.43.745Zm.005-.003a.69.69 0 0 1 .444-.087l.115-.853a1.552 1.552 0 0 0-.989.195l.43.745Zm.444-.087a.633.633 0 0 0 .399-.079l-.43-.745a.227.227 0 0 1 .145-.029l-.114.853Zm.399-.079a.63.63 0 0 0 .243-.254l-.763-.397a.232.232 0 0 1 .09-.094l.43.745Zm.761-1.25a.541.541 0 0 0 .022-.449l-.798.32a.322.322 0 0 1 .013-.269l.763.398Zm-1.271 1.03c-.168.005-.332.052-.477.135l.43.745a.145.145 0 0 1 .069-.02l-.022-.86Zm-.477.135a1.024 1.024 0 0 0-.367 1.4l.745-.43a.164.164 0 0 1 .052-.225l-.43-.745Zm-.367 1.4c.28.484.902.666 1.395.382l-.43-.745c-.067.039-.169.02-.22-.068l-.745.43Zm1.395.382c.145-.084.268-.203.355-.346l-.733-.45a.153.153 0 0 1-.052.051l.43.745Zm.355-.346c.094-.154.145-.329.15-.508l-.86-.022c0 .03-.009.057-.023.08l.733.45Zm.15-.507a1.029 1.029 0 0 0-.122-.516l-.759.405a.173.173 0 0 1 .021.087l.86.024Zm-.129-.528-.021-.036-.744.43.02.036.745-.43Zm-.028-.049a1.038 1.038 0 0 0-.385-.362l-.41.756a.177.177 0 0 1 .065.062l.73-.456Zm-.385-.362a1.021 1.021 0 0 0-.514-.124l.022.86c.027-.001.056.005.082.02l.41-.756Zm1.57-.281a2.422 2.422 0 0 0-.642-.728l-.518.687c.168.127.308.285.416.47l.744-.43Zm-.643-.729-.009-.006-.515.688.009.007.515-.689Zm-.647.139-.005.01.762.398.005-.01-.762-.398Zm-.006.01-.331.636.763.397.331-.636-.763-.397Zm-.131 1.404a.781.781 0 0 1 .072.169l.826-.24a1.622 1.622 0 0 0-.153-.36l-.745.43Zm1.114-2.703a4.46 4.46 0 0 0-.103-.058l-.411.756.079.045.435-.743Zm-.104-.058a3.576 3.576 0 0 0-.299-.145l-.337.791c.076.033.152.07.226.11l.41-.756Zm-.299-.145a3.548 3.548 0 0 0-1.528-.282l.035.86c.39-.017.79.057 1.155.213l.338-.79Zm-1.528-.282a3.423 3.423 0 0 0-1.538.433l.419.751c.358-.2.745-.308 1.154-.325l-.035-.86Zm-1.538.433a.371.371 0 0 1 .503.138l-.744.43a.488.488 0 0 0 .659.183l-.418-.751Zm.503.138-.221-.383-.745.43.222.383.744-.43Zm-.221-.383a.713.713 0 0 0-.972-.265l.43.745a.148.148 0 0 1-.203-.05l.745-.43Zm-.972-.265c-.346.2-.45.64-.257.975l.745-.43a.147.147 0 0 1-.058.2l-.43-.745Zm-.257.975.253.438.745-.43-.253-.438-.745.43Zm.253.438a.373.373 0 0 1 .075-.463l.572.642a.488.488 0 0 0 .098-.609l-.745.43Zm.075-.463c-.14.124-.27.261-.388.407l.669.54c.089-.109.186-.212.291-.305l-.572-.642Zm-.389.409a.38.38 0 0 1 .105-.09l.43.744a.475.475 0 0 0 .136-.117l-.671-.537Zm.105-.09a.372.372 0 0 1 .509.135l-.745.43a.488.488 0 0 0 .666.18l-.43-.746Zm.509.135-.324-.561-.745.43.324.56.745-.43Zm-.324-.561a.712.712 0 0 0-.972-.265l.43.745a.148.148 0 0 1-.203-.05l.745-.43Zm-.972-.265a.712.712 0 0 0-.257.974l.744-.43a.147.147 0 0 1-.057.2l-.43-.744Zm-.257.974.492.853.744-.43-.492-.852-.744.43Zm.492.853a.32.32 0 0 1-.015-.292l.784.352a.537.537 0 0 0-.025-.49l-.744.43Zm-.015-.293a3.562 3.562 0 0 0-.309 1.614l.859-.037c-.018-.42.063-.844.234-1.224l-.784-.353Zm-.309 1.614c.024.572.189 1.137.476 1.637l.746-.427a2.754 2.754 0 0 1-.363-1.247l-.859.037Zm.476 1.638c.236.413.548.77.925 1.058l.523-.683a2.687 2.687 0 0 1-.702-.803l-.746.428Zm.925 1.058a3.59 3.59 0 0 0 1.214.606l.232-.828a2.717 2.717 0 0 1-.923-.46l-.523.682Zm1.214.606a3.54 3.54 0 0 0 1.364.11l-.098-.854c-.345.04-.693.012-1.034-.084l-.232.828Zm1.364.11a3.444 3.444 0 0 0 1.337-.44l-.43-.745c-.31.18-.648.29-1.005.331l.098.855Zm1.337-.44 1.981-1.144-.43-.744-1.981 1.143.43.745Zm1.981-1.144a.615.615 0 0 0 .222-.84l-.744.43a.245.245 0 0 1 .092-.334l.43.744Zm.222-.84-.781-1.354-.744.43.781 1.353.744-.43Zm-.781-1.354a.665.665 0 0 0-.547-.333l-.039.859a.192.192 0 0 1-.158-.096l.744-.43Zm-.548-.333-.151-.007-.038.86.152.006.037-.86Zm-.155-.007h-.008l-.031.859h.008l.031-.86Zm-.572-.025h-.011l-.036.858h.011l.036-.858Zm-.01 0-.716-.032-.038.859.716.031.038-.859Zm-.574-.16a1.62 1.62 0 0 0-.234-.312l-.621.595a.748.748 0 0 1 .11.147l.745-.43Zm.154-.586.262-.504-.763-.396-.262.503.763.397Zm.26-.5.004-.008-.76-.403-.004.008.76.402Zm.006-.01.185-.358-.763-.396-.185.356.763.397Zm.185-.358a.618.618 0 0 0-.236-.818l-.435.742a.242.242 0 0 1-.092-.32l.763.396Zm-.025-.476-.858.058.858-.058Zm-3.012.87a1.96 1.96 0 0 1 .852-.266l-.07-.857c-.428.035-.82.153-1.212.379l.43.745Zm.852-.266c.292-.024.583.014.865.113l.284-.812a2.931 2.931 0 0 0-1.219-.158l.07.857Zm.865.112a.322.322 0 0 1-.192-.182l.798-.321a.54.54 0 0 0-.321-.308l-.285.811Zm.123-.765.167.844h.001l-.168-.844Zm.53 2.015c.107.186.174.386.2.595l.853-.105a2.42 2.42 0 0 0-.309-.92l-.744.43Zm.2.593.001.011.854-.102-.001-.01-.854.101Zm1.423-.05V63l-.858.07.001.008.857-.07Zm-.001-.01a2.984 2.984 0 0 0-.393-1.243l-.745.43c.16.277.254.575.282.888l.856-.076Zm-.393-1.243a2.996 2.996 0 0 0-.879-.962l-.494.705c.257.18.468.41.628.687l.745-.43Zm-.882-.963-.006-.005-.489.707.006.005.489-.707Zm-.632.15-.262.504.763.397.262-.504-.763-.397Zm1.389 2.235-1.131-.05-.038.86 1.131.05.038-.86Zm-1.691-1.02.518-.997-.763-.397-.518.997.763.397Zm.46.02a.32.32 0 0 1 .007.311l-.763-.397a.54.54 0 0 0 .012.518l.744-.431Zm-.411-.318.745-.43-.745.43Zm.6.57-.745.43.745-.43Zm-.673.6c.013.041.03.081.051.118l.745-.43a.3.3 0 0 1 .03.07l-.826.241Zm.531-.472a.322.322 0 0 1 .265.16l-.745.43a.537.537 0 0 0 .442.269l.038-.86Zm-.092-.44c.018.019.033.04.046.062l-.745.43a.502.502 0 0 0 .078.103l.621-.595Z" fill="#BED2E7" mask="url(#u)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M164.257 65.434a.398.398 0 0 1 .358-.436l.893-.087c.328-.032.821.016 1.263.273.463.27.841.753.916 1.518.074.764-.203 1.312-.606 1.666-.383.338-.857.48-1.185.512l-.894.087a.398.398 0 0 1-.435-.358l-.31-3.175Zm1.065 2.7.496-.048c.201-.02.505-.113.737-.317.212-.187.387-.484.338-.99-.05-.505-.279-.763-.523-.906a1.385 1.385 0 0 0-.784-.168l-.497.048.233 2.382Zm12.857-4.059a.4.4 0 0 1 .358-.436l2.183-.213a.399.399 0 0 1 .078.794l-.695.068.271 2.779a.398.398 0 1 1-.794.077l-.271-2.778-.694.067a.398.398 0 0 1-.436-.358Zm3.473-.339a.4.4 0 0 1 .358-.435l1.687-.165a.398.398 0 1 1 .078.794l-1.29.126.077.794.993-.097a.398.398 0 1 1 .077.794l-.992.097.077.793 1.29-.126a.4.4 0 0 1 .078.794l-1.687.165a.399.399 0 0 1-.436-.358l-.31-3.176Zm3.534-.745a.398.398 0 0 0-.358.435l.309 3.176a.4.4 0 0 0 .436.358l.893-.087a2.181 2.181 0 0 0 1.186-.512c.403-.354.68-.902.605-1.666-.074-.765-.452-1.249-.916-1.518a2.178 2.178 0 0 0-1.262-.273l-.893.087Zm1.203 3.088-.496.049-.233-2.382.496-.049c.201-.02.518.014.784.169.245.142.474.4.523.906.05.506-.125.803-.338.99a1.382 1.382 0 0 1-.736.317Zm-18.354.489c-.096-.986.52-1.954 1.503-2.05.983-.096 1.775.734 1.871 1.72.097.987-.52 1.955-1.503 2.05-.983.096-1.774-.734-1.871-1.72Zm1.581-1.257c-.442.044-.851.521-.787 1.18.064.657.558 1.047 1 1.004.442-.044.851-.521.786-1.18-.064-.657-.557-1.047-.999-1.004Zm2.215-.98a.43.43 0 0 1 .49.093l1.95 2.033-.189-1.937a.43.43 0 0 1 .856-.084l.309 3.172a.43.43 0 0 1-.738.34l-1.95-2.033.189 1.937a.43.43 0 0 1-.856.084l-.31-3.173a.431.431 0 0 1 .249-.432Zm5.556-.303a.431.431 0 0 0-.794.099l-.665 2.588-.179.697a.43.43 0 1 0 .833.214l.104-.405 1.386-.136.215.395a.43.43 0 1 0 .755-.41l-.351-.646-1.304-2.396Zm.238 2.237-.712.07.241-.936.471.866Z" fill="#1B4D2E"/>
+  <mask id="w" maskUnits="userSpaceOnUse" x="164.97" y="37.27" width="25" height="20" fill="#000">
+    <path fill="#fff" d="M164.97 37.27h25v20h-25z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M186.283 55.9a11.131 11.131 0 0 0 2.047-6.45c0-6.175-5.005-11.18-11.18-11.18s-11.18 5.005-11.18 11.18c0 2.402.758 4.627 2.047 6.45h18.266Z"/>
+  </mask>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M186.283 55.9a11.131 11.131 0 0 0 2.047-6.45c0-6.175-5.005-11.18-11.18-11.18s-11.18 5.005-11.18 11.18c0 2.402.758 4.627 2.047 6.45h18.266Z" fill="url(#v)"/>
+  <path d="M186.283 55.9v.645a.643.643 0 0 0 .526-.273l-.526-.372Zm-18.266 0-.527.373c.121.17.318.272.527.272V55.9Zm19.668-6.45c0 2.264-.714 4.36-1.929 6.077l1.053.745a11.774 11.774 0 0 0 2.166-6.822h-1.29ZM177.15 38.915c5.818 0 10.535 4.717 10.535 10.535h1.29c0-6.53-5.294-11.825-11.825-11.825v1.29ZM166.615 49.45c0-5.818 4.717-10.535 10.535-10.535v-1.29c-6.531 0-11.825 5.294-11.825 11.825h1.29Zm1.929 6.077a10.483 10.483 0 0 1-1.929-6.077h-1.29c0 2.54.802 4.895 2.165 6.822l1.054-.745Zm-.527 1.018h18.266v-1.29h-18.266v1.29Z" fill="#B07709" mask="url(#w)"/>
+  <path d="M186.68 47.097c-1.128-4.304-4.303-6.456-5.84-6.661-1.995-.266 3.073 2.87 3.073 6.866.001 3.09 3.679 3.28 2.767-.205Z" fill="#FFE3AC"/>
+  <path d="m182.31 46.899-4.73 3.8-4.73-3.8 4.73-7.124 4.73 7.124Z" fill="#F0B133"/>
+  <path d="m177.58 52.598 4.73-3.8-4.73 6.887-4.73-6.887 4.73 3.8Z" fill="#F0B133"/>
+  <path d="m177.58 50.698 4.73-3.8-4.73-7.123m0 10.923-4.73-3.8 4.73-7.123m0 10.923V39.775m4.73 9.023-4.73 3.8-4.73-3.8 4.73 6.887 4.73-6.887Z" stroke="#C38102" stroke-width=".645" stroke-linejoin="round"/>
+  <path d="m171.345 56.545 3.117-4.3-7.632 2.365 1.29 1.935h3.225Z" fill="#B07709"/>
+  <path d="M170.915 53.75c-13.528 4.893-17.128-.61-17.092-4.3l7.417-2.688c1.792.287 5.547.882 6.235.968 1.075 0 4.193-2.688 4.193-.967 0 .387-1.613.967-1.613 1.29 0 .34 1.828.537 4.085-1.075.56-.4.963-.435 1.183-.215.259.259.234.796-.597 1.612.812 0 .672 1.043-.156 1.935.323 1.182-.088 2.15-3.655 3.44Z" fill="url(#x)"/>
+  <path d="M162.315 53.213c6.536-.516 11.18-3.44 12.685-4.838l.537-1.182-.537-.538-2.15 1.183-2.365.537-.323-.537 1.398-.86v-.753h-.86c-.573.466-3.741 1.29-5.375 1.29-2.043 0-2.688-3.977 0-6.45 1.631-1.5.43-4.192-1.72-2.58-4.622 2.795-9.46 15.373-1.29 14.728Z" fill="#ED964F"/>
+  <path d="M153.823 49.45c-.036 3.69 3.564 9.193 17.092 4.3 3.567-1.29 3.978-2.258 3.655-3.44m-13.33-3.547c1.792.286 5.547.881 6.235.967 1.075 0 4.193-2.688 4.193-.967 0 .387-1.613.967-1.613 1.29 0 .34 1.828.537 4.085-1.075.56-.4.963-.435 1.183-.215.259.259.234.796-.597 1.612m-.801.645c.337-.231.599-.446.801-.645m0 0c.812 0 .672 1.043-.156 1.935m-.967.752s.769-.538.967-.752" stroke="#562E11" stroke-width=".645" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M207.142 30.315v-2.15a.43.43 0 0 0-.43-.43h-2.472a.43.43 0 0 0-.43.43V30.1c0 .237.192.43.43.43h.967M207.142 34.4v-2.15a.43.43 0 0 0-.43-.43h-2.472a.43.43 0 0 0-.43.43v1.935c0 .237.192.43.43.43h.967" stroke="#C293FC" stroke-width=".645" stroke-linecap="round"/>
+  <path d="M206.605 35.905h.107a.43.43 0 0 1 .43.43v1.935a.43.43 0 0 1-.43.43h-.967a.43.43 0 0 1-.43-.43v-1.935a.43.43 0 0 0-.43-.43h-.645a.43.43 0 0 0-.43.43V38.7M203.81 39.99v1.398m2.795-1.398h.107a.43.43 0 0 1 .43.43v.538a.43.43 0 0 1-.43.43h-2.902m0 1.397v-1.397" stroke="#C293FC" stroke-width=".645" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M147.91 40.205v2.15c0 .238.193.43.43.43h2.473a.43.43 0 0 0 .43-.43V40.42a.43.43 0 0 0-.43-.43h-.968M147.91 36.12v2.15c0 .237.193.43.43.43h2.473a.43.43 0 0 0 .43-.43v-1.935a.43.43 0 0 0-.43-.43h-.968" stroke="#C293FC" stroke-width=".645" stroke-linecap="round"/>
+  <path d="M148.448 34.615h-.108a.43.43 0 0 1-.43-.43V32.25a.43.43 0 0 1 .43-.43h.968a.43.43 0 0 1 .43.43v1.935c0 .237.192.43.43.43h.645a.43.43 0 0 0 .43-.43V31.82M151.243 30.53v-1.398m-2.795 1.398h-.108a.43.43 0 0 1-.43-.43v-.538a.43.43 0 0 1 .43-.43h2.903m0-1.397v1.398" stroke="#C293FC" stroke-width=".645" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M138.076 3.608a14.189 14.189 0 0 0-14.202 0l-23.435 13.546A14.19 14.19 0 0 0 93.35 29.44v27.12a14.19 14.19 0 0 0 7.089 12.286l23.435 13.546a14.19 14.19 0 0 0 14.202 0l23.435-13.546A14.19 14.19 0 0 0 168.6 56.56V29.44a14.19 14.19 0 0 0-7.089-12.286L138.076 3.608Z" fill="#ECF5FF" stroke="#A7BFDA" stroke-width=".86"/>
+  <path d="M130.975 2.133V43L95.621 22.564a13.753 13.753 0 0 1 5.033-5.037L124.089 3.98a13.75 13.75 0 0 1 6.886-1.847Z" fill="#F8FBFF"/>
+  <path d="M93.78 29.44v27.12c0 2.456.655 4.82 1.84 6.876L130.976 43 95.621 22.564a13.751 13.751 0 0 0-1.841 6.876Z" fill="url(#y)"/>
+  <path d="M168.17 56.571v-27.12c0-2.457-.655-4.82-1.841-6.876l-35.354 20.436 35.354 20.436a13.753 13.753 0 0 0 1.841-6.876Z" fill="#E0EEFF"/>
+  <path d="M130.975 2.15v40.867l35.354-20.436a13.749 13.749 0 0 0-5.033-5.038L137.861 3.997a13.75 13.75 0 0 0-6.886-1.847Z" fill="url(#z)"/>
+  <path d="M100.651 68.472a13.753 13.753 0 0 1-5.03-5.036L130.975 43v40.867c-2.377 0-4.755-.616-6.884-1.847h-.002l-23.435-13.547-.003-.001Z" fill="url(#A)"/>
+  <path d="m137.861 82.02 23.435-13.547a13.749 13.749 0 0 0 5.033-5.037L130.975 43v40.867a13.75 13.75 0 0 0 6.886-1.847Z" fill="#D1E5FE"/>
+  <path d="M124.95 8.643a12.039 12.039 0 0 1 12.05 0l20.692 11.96a12.04 12.04 0 0 1 6.015 10.424v23.946c0 4.3-2.293 8.272-6.015 10.424L137 77.357a12.039 12.039 0 0 1-12.05 0l-20.692-11.96a12.04 12.04 0 0 1-6.014-10.424V31.027c0-4.3 2.292-8.272 6.014-10.424l20.692-11.96Z" fill="#A7BFDA"/>
+  <path d="M137.216 8.27a12.47 12.47 0 0 0-12.481 0l-20.692 11.961a12.47 12.47 0 0 0-6.23 10.796v23.946a12.47 12.47 0 0 0 6.23 10.796l20.692 11.96a12.47 12.47 0 0 0 12.481 0l20.691-11.96a12.47 12.47 0 0 0 6.23-10.796V31.027a12.47 12.47 0 0 0-6.23-10.796l-20.691-11.96Z" stroke="#F8FBFF" stroke-width=".86"/>
+  <path d="M125.165 9.015a11.61 11.61 0 0 1 11.62 0l20.692 11.96a11.61 11.61 0 0 1 5.8 10.052v23.946a11.61 11.61 0 0 1-5.8 10.051l-20.692 11.96a11.61 11.61 0 0 1-11.62 0l-20.692-11.96a11.61 11.61 0 0 1-5.8-10.051V31.027a11.61 11.61 0 0 1 5.8-10.051l20.692-11.96Z" stroke="#A7BFDA" stroke-width=".86"/>
+  <path d="M124.949 8.643a12.04 12.04 0 0 1 12.051 0l20.692 11.96a12.04 12.04 0 0 1 6.014 10.424v23.946c0 4.3-2.292 8.272-6.014 10.424L137 77.357a12.04 12.04 0 0 1-12.051 0l-20.691-11.96a12.039 12.039 0 0 1-6.015-10.424V31.027c0-4.3 2.292-8.272 6.015-10.424l20.691-11.96Z" fill="url(#B)"/>
+  <path d="M125.164 9.015a11.611 11.611 0 0 1 11.621 0l20.691 11.96a11.609 11.609 0 0 1 5.8 10.052v23.946c0 4.146-2.21 7.977-5.8 10.051l-20.691 11.96a11.611 11.611 0 0 1-11.621 0l-20.691-11.96a11.61 11.61 0 0 1-5.8-10.051V31.027a11.61 11.61 0 0 1 5.8-10.051l20.691-11.96Z" stroke="#0E3FA7" stroke-width=".86"/>
+  <path d="m136.57 9.388 20.691 11.96a11.18 11.18 0 0 1 5.585 9.68v23.945c0 2.519-.847 4.918-2.341 6.846l-27.434-15.857a4.3 4.3 0 0 1-2.148-3.723V7.887c1.949-.009 3.9.491 5.647 1.5ZM161.272 62.232Z" fill="#0E3FA7"/>
+  <path d="m101.497 61.82 27.433-15.858a4.298 4.298 0 0 0 2.148-3.723V7.887" stroke="#0E3FA7" stroke-width=".86"/>
+  <path d="M119.389 19.56c1.09 1.197 1.833 2.017 1.685 3.62l-4.713 3.725c-1.348-4.936-.735-7.84.105-8.677.587-.585 1.833.135 2.923 1.332Z" fill="url(#C)"/>
+  <path d="M116.287 26.492c-.95-3.347-1.127-5.953-.517-7.618.36-.982 1.081-1.494 2.422-.144.868.566 2.916 2.115 3.09 3.732" stroke="#562E11" stroke-width=".645" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M142.349 19.56c-1.09 1.197-1.832 2.017-1.685 3.62l4.714 3.725c1.347-4.936.735-7.84-.105-8.677-.588-.585-1.833.135-2.924 1.332Z" fill="url(#D)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M145.35 18.308c.8.932 1.337 3.81.03 8.596l-.958-.757c.504-3.957.073-6.856-.166-8.03.243-.088.467-.119.66-.08l.434.271Z" fill="#FFC794"/>
+  <path d="M145.451 26.492c.95-3.347 1.127-5.953.517-7.618-.359-.982-1.08-1.494-2.422-.144-.868.566-2.915 2.115-3.09 3.732" stroke="#562E11" stroke-width=".645" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M131.157 78.112c1.872-.03 3.737-.53 5.414-1.5l20.692-11.96a11.17 11.17 0 0 0 3.148-2.712c-2.804-12.711-10.561-22.606-12.896-25.585a34.061 34.061 0 0 1-.532-.687l-.009-.012-.127-.174c-1.305-15.357-8.165-18.067-15.357-18.067-5.174 0-16.261 1.16-16.261 18.067-1.985 2.092-5.431 6.336-8.764 12.893l-3.01 6.773-1.874 6.841a11.16 11.16 0 0 0 3.109 2.663l20.692 11.96a11.17 11.17 0 0 0 5.775 1.5Z" fill="url(#E)"/>
+  <path d="M135.294 18.046c3.659.883 7.697 2.65 8.958 17.665.325.264.779.588 1.311.966 1.051.75 3.065 1.832 4.332 2.99-.975-1.968-2.418-3.38-3.119-4.335-.32-11.946-5.465-16.219-11.172-17.47l-.31.184Z" fill="#FFC794"/>
+  <path d="m101.818 63.533.001.004c.721.712 1.538 1.34 2.438 1.86l17.965 10.384.007.003-17.969-10.387a12.042 12.042 0 0 1-2.442-1.864Z" fill="url(#F)"/>
+  <path d="M130.585 78.967Z" fill="url(#G)"/>
+  <path d="M101.522 61.915a11.168 11.168 0 0 0 3.168 2.737l20.692 11.96c3.462 2.002 7.728 2.002 11.19 0l1.637-.945c-.715-4.798-2.489-7.243-4.08-9.436-1.739-2.398-3.261-4.495-2.941-9.04.392-5.57-.353-8.481-.999-11.003-.239-.934-.464-1.815-.613-2.758-2.56-5.59-3.746-10.222-4.126-14.142L142.8 25.8l-17.402-1.72c.187-2.314.636-4.337 1.15-6.154l.023-.08-5.809 2.608-2.723 3.012-2.007 5.822-.904 6.423c-1.485 1.522-2.856 3.095-4.471 5.813l-1.935 2.687c-.129.218-1.214 2.407-2.301 4.603h-.001l-.002.004v.002c-1.095 2.21-2.193 4.426-2.319 4.636-.367.612-1.181 3.51-1.92 6.141v.001l-.001.004-.001.003c-.231.822-.455 1.618-.655 2.31Z" fill="url(#H)"/>
+  <path d="M101.522 61.916a11.169 11.169 0 0 0 3.168 2.736l8.644 4.996c3.337-2.408 5.6-7.084 5.6-12.458 0-7.241-4.109-13.216-9.417-14.082l-.794 1.103c-.13.217-1.214 2.407-2.302 4.602v.001c-1.096 2.213-2.195 4.432-2.321 4.642-.367.611-1.181 3.51-1.92 6.14v.001l-.001.003c-.232.825-.456 1.622-.657 2.316ZM101.819 63.534l.001.002c.721.713 1.538 1.34 2.438 1.86l8.267 4.78.001-.001-8.266-4.778a12.03 12.03 0 0 1-2.441-1.863Z" fill="#AE5F25"/>
+  <path d="M122.08 30.622c1.5-3.43 5.354-3.49 8.579-3.646 3.225.156 7.081.06 8.58 3.646 1.305 3.123-.868 9.783-2.589 11.45-2.006 1.944-4.491 1.56-5.991 1.56-1.499 0-3.984.384-5.99-1.56-1.72-1.667-3.942-8.354-2.589-11.45Z" fill="#D47B3A"/>
+  <path d="M137.383 36.42s2.765 1.587 4.981.358M137.211 38.12s2.218 1.831 4.084 1.55M124.529 36.42s-2.765 1.587-4.98.358M124.703 38.12s-1.965 1.831-3.832 1.55M134.94 37.915c-.884 1.534-4.038 1.943-4.038-1.125v-1.739" stroke="#562E11" stroke-width=".645" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M126.864 37.915c.884 1.534 4.038 1.943 4.038-1.125v-1.739" stroke="#562E11" stroke-width=".645" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M124.69 32.91c.291-.261 3.192 1.19 3.086 1.728-.107.537-1.164 1.045-2.147.372-.983-.674-1.23-1.839-.939-2.1ZM136.84 32.875c-.297-.267-3.26 1.217-3.152 1.765.109.549 1.189 1.068 2.193.38 1.004-.688 1.257-1.878.959-2.145Z" fill="#562E11"/>
+  <path d="M160.039 62.385c.185-.21.363-.425.531-.648-2.552-12.772-10.292-22.452-12.725-25.494a31.1 31.1 0 0 1-.602-.766v-.001h-.001l-.082-.112c-.664-7.662-2.715-12.246-5.564-14.91-2.863-2.678-6.474-3.361-10.106-3.361-2.602 0-6.752.288-10.256 2.751-3.507 2.466-6.299 7.061-6.327 15.51-2.103 2.245-10.937 12.66-13.638 26.229.167.228.344.45.529.666 2.57-13.853 11.738-24.515 13.665-26.545a.322.322 0 0 0 .089-.222c0-8.377 2.742-12.782 6.053-15.11 3.334-2.344 7.313-2.634 9.885-2.634 3.56 0 6.975.67 9.666 3.187 2.694 2.52 4.72 6.944 5.37 14.584.005.06.026.116.061.164l.073.1.059.08.004.005.001.001c.13.176.341.441.619.79 2.485 3.111 10.289 12.883 12.696 25.736ZM101.06 62.71c.171.203.348.401.533.593l-.001.002c-.184-.192-.362-.39-.532-.593v-.003Z" fill="#562E11"/>
+  <ellipse cx="141.832" cy="28.595" rx="2.042" ry="2.58" fill="#333" stroke="#000" stroke-width=".645"/>
+  <ellipse cx=".632" cy="1.053" rx=".632" ry="1.053" transform="matrix(.96162 .2744 -.244 .96977 140.755 26.958)" fill="#E0E0E0"/>
+  <ellipse cx="2.042" cy="2.58" rx="2.042" ry="2.58" transform="matrix(-1 0 0 1 122.159 26.015)" fill="#333" stroke="#000" stroke-width=".645"/>
+  <ellipse cx=".632" cy="1.053" rx=".632" ry="1.053" transform="matrix(-.96162 .2744 .244 .96977 121.194 26.958)" fill="#E0E0E0"/>
+  <circle cx="116.354" cy="50.955" r="11.18" transform="rotate(-15 116.354 50.955)" fill="url(#I)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M123.137 59.846a11.148 11.148 0 0 1-3.889 1.908c-5.964 1.598-12.095-1.941-13.693-7.906a11.128 11.128 0 0 1 .471-7.175c-.468 7.472 5.436 16.435 17.111 13.173Z" fill="#B0B0B0"/>
+  <circle cx="116.354" cy="50.955" r="11.502" transform="rotate(-15 116.354 50.955)" stroke="#848484" stroke-width=".645" stroke-linejoin="round"/>
+  <path d="M124.95 46.216c-2.203-3.866-5.827-5.123-7.365-4.923-1.995.26 3.711 1.977 4.746 5.837.8 2.984 4.402 2.215 2.619-.914Z" fill="#fff"/>
+  <path d="m120.708 48.928-3.586 4.894-5.552-2.446 2.725-8.105 6.413 5.657Z" fill="#C4C4C4"/>
+  <path d="m117.614 55.657 3.586-4.894-2.787 7.876-6.351-5.428 5.552 2.446Z" fill="#C4C4C4"/>
+  <path d="m117.122 53.822 3.586-4.894-6.413-5.657m2.827 10.551-5.552-2.446 2.725-8.105m2.827 10.551-2.827-10.55m6.905 7.491-3.586 4.894-5.552-2.445 6.351 5.427 2.787-7.876Z" stroke="#848484" stroke-width=".645" stroke-linejoin="round"/>
+  <path d="M119.164 65.902c-.096 1.037-.901 3.423-3.356 4.665" stroke="#562E11" stroke-width=".645" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="m108.41 60.81-.002-.011c-.106-.704-.153-1.02.202-1.383l1.276 1.333c.756-.203 2.457-1.065 3.71-3.373 1.251-2.303 3.1-.987 3.009.75 0 0 .004.264-.058.682.13-.565.647-1.405 1.975-1.348 1.27.054 1.535 1.288 1.503 2.167.056-.696.077-1.146.673-1.31 1.448-.4 2.026 2.226 1.4 4.567-.627 2.34-3.194 3.313-5.238 3.56-4.846.582-7.592-.852-8.45-5.633Z" fill="#C26B2A"/>
+  <path d="M117.914 66.18c-5.28.029-7.416-2.248-7.588-5.476l-.666-.136-.875-.978-.427.052.154 1.28c.703 3.854 2.042 4.994 5.37 5.62l4.032-.362Z" fill="#AE5F25"/>
+  <path d="M114.263 60.256c.758-1.738 1.046-2.969.853-3.916l.869.328.371.98.193 1.611-.94 2.298c-.702.786-2.104.437-1.346-1.301ZM117.173 61.566c.866-1.8 1.148-3.032.812-3.912l1.187.172.578.882.393 1.521-1.062 2.368c-.873.874-2.774.77-1.908-1.03ZM120.276 62.345c.59-1.802.761-3.054.48-3.978l.896.244.462.94.344 1.587-.719 2.375c-.625.85-2.053.634-1.463-1.168Z" fill="#DF823E"/>
+  <path d="M114.822 62.315c1.124-1.114 1.54-2.457 1.694-3.316m2.029 4.205c1.094-1.281 1.348-2.35 1.441-3.165m-3.47-1.04c.094-.527.089-.873.089-.873.091-1.737-1.758-3.053-3.009-.75-1.253 2.308-2.954 3.17-3.71 3.373l-1.276-1.333c-.357.365-.307.683-.2 1.395.14.778.329 1.467.57 2.073m7.536-3.885c.048-.54.518-1.603 2.006-1.54 1.487.064 1.596 1.747 1.464 2.58m0 0c.107-.93.005-1.527.712-1.723 1.448-.4 2.026 2.227 1.4 4.568-.369 1.38-1.413 2.284-2.625 2.844-.846.39-1.773.614-2.613.715-1.423.171-2.038.207-2.977 0" stroke="#562E11" stroke-width=".645" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="145.81" cy="50.955" r="11.502" transform="rotate(15 145.81 50.955)" fill="url(#J)" stroke="#24568B" stroke-width=".645" stroke-linejoin="round"/>
+  <path d="M154.406 46.216c-2.203-3.866-5.828-5.123-7.365-4.923-1.995.259 3.711 1.976 4.746 5.837.8 2.984 4.402 2.215 2.619-.914Z" fill="#63ACF8"/>
+  <path d="M148.325 45.297a.9.9 0 0 1 1.103-.633l1.324.355a.9.9 0 0 1 .639 1.1l-.352 1.313a.253.253 0 0 0 .182.31l1.241.332a.899.899 0 0 1 .638 1.1l-2.17 8.097a.898.898 0 0 1-1.102.633l-1.325-.355a.899.899 0 0 1-.638-1.1l2.17-8.097a.254.254 0 0 0-.183-.31l-1.241-.332a.899.899 0 0 1-.638-1.099l.352-1.314Zm-4.885-1.309a.9.9 0 0 1 1.103-.633l1.324.355a.9.9 0 0 1 .639 1.1l-.352 1.313a.9.9 0 0 1-1.103.633l-1.241-.332a.253.253 0 0 0-.312.176l-2.17 8.098a.9.9 0 0 1-1.103.633l-1.324-.355a.899.899 0 0 1-.639-1.1l2.17-8.097a.9.9 0 0 1 1.103-.633l1.24.333a.254.254 0 0 0 .313-.177l.352-1.314Zm1.2 5.293a.899.899 0 0 1 1.102-.633l1.325.355a.899.899 0 0 1 .638 1.099l-.964 3.598a.899.899 0 0 1-1.102.633l-1.325-.355a.899.899 0 0 1-.638-1.099l.964-3.598Z" fill="#DBEDFF" stroke="#24568B" stroke-width=".645" stroke-linejoin="round"/>
+  <path d="m153.816 60.772.002-.013c.106-.703.153-1.02-.202-1.383l-1.276 1.334c-.757-.203-2.457-1.066-3.71-3.374-1.251-2.302-3.1-.987-3.009.75 0 0-.004.264.058.683-.131-.566-.647-1.406-1.975-1.349-1.27.055-1.535 1.289-1.503 2.167-.056-.695-.077-1.145-.673-1.31-1.448-.4-2.026 2.227-1.4 4.567.627 2.341 3.194 3.314 5.238 3.56 4.846.582 7.592-.85 8.45-5.632Z" fill="#DF823E"/>
+  <path d="M146.992 56.72c.086-.515.967-.215 1.397 0l1.935 2.903 1.935 1.183.86-.86.645-.323v1.935l-.645 1.29c-5.375.752-6.235-5.483-6.127-6.127ZM144.626 60.59c.602 1.72 1.971 1.936 2.58 1.828l-1.612-3.762c-.179-.359-.645-1.075-1.075-1.075-.538 0-.645.86.107 3.01ZM141.401 60.268c.086 1.634 1.398 2.616 2.043 2.903l-1.29-3.763-.43-.968c-.143-.071-.409.194-.323 1.828Z" fill="#FBA464"/>
+  <path d="m146.662 70.778 3.408-1.97c-.225-.616-.743-1.404-1.681-2.412a69.013 69.013 0 0 0-1.613-.158c-1.313-.119-2.722-.246-3.762-.487v.645l1.183 2.472 2.465 1.91ZM143.014 65.75l-1.505-.752c.182.34.745.576 1.505.753ZM148.078 70.953h.001l2.109-1.22-2.11 1.22Z" fill="#C26B2A"/>
+  <path d="M143.062 65.862c.096 1.038.901 3.424 3.355 4.666M147.455 62.23c-1.125-1.115-1.54-2.457-1.694-3.317m-2.029 4.205c-1.094-1.28-1.348-2.35-1.441-3.164m3.47-1.04c-.094-.528-.09-.873-.09-.873-.09-1.738 1.759-3.054 3.01-.75 1.253 2.307 2.953 3.17 3.71 3.373l1.276-1.334c.357.365.307.683.2 1.395-.14.778-.329 1.467-.57 2.073m-7.536-3.885c-.048-.54-.518-1.603-2.006-1.539-1.488.064-1.596 1.746-1.464 2.58m0 0c-.108-.931-.005-1.528-.713-1.724-1.447-.4-2.025 2.227-1.399 4.568.369 1.38 1.412 2.284 2.625 2.844.846.39 1.773.614 2.613.715 1.422.171 2.038.207 2.977 0" stroke="#562E11" stroke-width=".645" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M120.712 16.726a6.449 6.449 0 0 1 5.791-3.611h8.727a6.45 6.45 0 0 1 5.792 3.611l3.605 7.354h-27.52l3.605-7.354Z" fill="#B29661"/>
+  <path d="M135.382 13.115c2.838.946 5.912 7.632 7.095 10.75l2.042.215-3.547-7.632-2.258-2.366-3.332-.967Z" fill="#E0C38C"/>
+  <path d="M124.417 19.565h-5.053l2.043-4.193 2.042-1.612 1.828-.645h4.515l-.215 1.828-1.183 2.257-1.72 1.613-2.257.752Z" fill="url(#K)"/>
+  <path d="M137.424 19.565h5.053l-2.043-4.193-2.042-1.612-1.828-.645h-4.515l.215 1.828 1.183 2.257 1.72 1.613 2.257.752Z" fill="url(#L)"/>
+  <path d="M120.712 16.726a6.449 6.449 0 0 1 5.791-3.611h8.727a6.45 6.45 0 0 1 5.792 3.611l3.605 7.354h-27.52l3.605-7.354Z" stroke="#6F5B36" stroke-width=".645"/>
+  <path d="m116.641 27.155.072-.208c-.29.103-.551.207-.785.31-.42 1.314-.738 2.796-.927 4.464-5.162-.887-8.429-2.2-8.429-3.663 0-1.56 3.703-2.946 9.452-3.83l.008-.04c.541-.071 1.261-.157 2.111-.248l.003-.005a98.715 98.715 0 0 1 8.448-.64 79.568 79.568 0 0 1 3.709-.074l.564-.001c4.572 0 8.85.252 12.503.689l.078.138.778.083-.064-.122c6.624.864 11 2.355 11 4.05 0 1.476-3.323 2.798-8.561 3.686-.292-1.738-.671-3.28-1.127-4.645l-.32-.07c-1.214-.59-5.419-1.659-13.642-1.659-7.895 0-12.949 1.11-14.871 1.785Z" fill="#B29661"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M108.339 26.243c4.916-1.308 13.077-2.163 22.313-2.163 9.835 0 18.451.97 23.228 2.423-1.758-1.032-5.22-1.908-9.718-2.495l.064.122-.778-.083a24.478 24.478 0 0 0-.078-.138c-3.653-.438-7.931-.689-12.503-.689l-.564.001-.404-.001c-1.07 0-2.186.028-3.305.075a98.715 98.715 0 0 0-8.448.64l-.003.005c-.85.091-1.57.177-2.111.247l-.008.04c-3.382.52-6.056 1.215-7.685 2.016Z" fill="#E0C38C"/>
+  <path d="M115.919 27.542a21.299 21.299 0 0 0-.532 2.128l-.753-.753v-.86l1.285-.515ZM146.178 29.615a27.907 27.907 0 0 0-.629-2.287l1.55.73v.86l-.86.86-.061-.163Z" fill="#877045"/>
+  <path d="M153.492 26.291c-1.535 1.403-4.057 2.628-7.258 3.566.134.602.257 1.23.367 1.887 5.238-.888 8.561-2.21 8.561-3.686 0-.624-.592-1.22-1.67-1.767ZM115.387 29.778c-3.102-.93-5.644-2.115-7.145-3.486-1.078.547-1.67 1.142-1.67 1.766 0 1.464 3.363 2.759 8.525 3.646.077-.672.174-1.314.29-1.926Z" fill="#9D8351"/>
+  <path d="M106.894 28.058c0-.217.109-.465.396-.744.288-.28.73-.566 1.328-.848 1.195-.562 2.945-1.077 5.133-1.513 4.37-.87 10.421-1.41 17.116-1.41 6.694 0 12.746.54 17.116 1.41 2.188.436 3.937.95 5.132 1.513.599.282 1.04.568 1.328.848.288.28.396.527.396.744 0 .243-.138.528-.512.85-.371.32-.937.64-1.692.952-1.45.598-3.531 1.133-6.089 1.566.037.209.073.42.107.636 2.58-.437 4.714-.982 6.228-1.606.785-.324 1.422-.676 1.867-1.06.443-.381.736-.83.736-1.338 0-.452-.231-.856-.591-1.207-.359-.35-.872-.671-1.503-.968-1.264-.595-3.072-1.123-5.281-1.563-4.423-.88-10.519-1.422-17.242-1.422-6.724 0-12.819.542-17.242 1.422-2.209.44-4.017.968-5.281 1.563-.631.297-1.144.619-1.503.968-.36.35-.592.755-.592 1.207 0 .504.288.948.723 1.326.438.381 1.062.731 1.833 1.053 1.495.623 3.705 1.267 6.259 1.705.023-.217.047-.43.073-.642-2.516-.433-4.66-1.065-6.083-1.659-.741-.309-1.295-.627-1.658-.943-.366-.318-.502-.6-.502-.84Z" fill="#6F5B36"/>
+  <path d="M114.849 28.645c0-.11.054-.252.235-.43.182-.178.468-.365.865-.553.792-.376 1.959-.722 3.427-1.017 2.931-.587 6.993-.953 11.491-.953 4.497 0 8.56.366 11.491.953 1.467.295 2.634.641 3.427 1.017.397.188.682.375.864.553.182.178.235.32.235.43 0 .11-.054.252-.236.43a2.53 2.53 0 0 1-.509.37c.051.214.1.432.148.653a3.5 3.5 0 0 0 .812-.561c.255-.25.43-.548.43-.892 0-.343-.175-.642-.428-.89-.254-.249-.61-.473-1.04-.676-.862-.409-2.088-.768-3.577-1.066-2.983-.598-7.09-.966-11.617-.966-4.527 0-8.634.368-11.618.966-1.489.298-2.715.657-3.576 1.066-.43.203-.786.427-1.04.675-.254.25-.429.548-.429.89 0 .314.146.59.364.824.175.19.516.395.794.556.041-.23.086-.455.132-.677-.146-.098-.368-.226-.454-.318-.146-.157-.191-.284-.191-.384Z" fill="#6F5B36"/>
+  <path d="M119.364 19.565h3.978a6.45 6.45 0 0 0 6.45-6.45M131.942 13.115a6.45 6.45 0 0 0 6.45 6.45h3.977" stroke="#6F5B36" stroke-width=".645"/>
+  <path d="M91.686 3.608a14.19 14.19 0 0 0-14.202 0L54.049 17.154A14.19 14.19 0 0 0 46.96 29.44v27.12a14.19 14.19 0 0 0 7.089 12.286l23.435 13.546a14.19 14.19 0 0 0 14.202 0l23.435-13.546a14.19 14.19 0 0 0 7.089-12.286V29.44a14.19 14.19 0 0 0-7.089-12.286L91.686 3.608Z" fill="#ECF5FF" stroke="#A7BFDA" stroke-width=".86"/>
+  <path d="M84.585 2.133V43L49.231 22.564a13.751 13.751 0 0 1 5.03-5.035l.003-.002L77.699 3.98a13.751 13.751 0 0 1 6.886-1.847Z" fill="#F8FBFF"/>
+  <path d="M47.39 29.44v27.12c0 2.456.655 4.82 1.84 6.876L84.586 43 49.231 22.564a13.751 13.751 0 0 0-1.841 6.876Z" fill="url(#M)"/>
+  <path d="M121.78 56.571v-27.12c0-2.457-.655-4.82-1.841-6.876L84.585 43.011l35.354 20.436a13.753 13.753 0 0 0 1.841-6.876Z" fill="#E0EEFF"/>
+  <path d="M84.585 2.15v40.867L119.94 22.58a13.749 13.749 0 0 0-5.033-5.038L91.471 3.997a13.751 13.751 0 0 0-6.886-1.847Z" fill="url(#N)"/>
+  <path d="M54.261 68.472a13.751 13.751 0 0 1-5.03-5.036L84.585 43v40.867a13.75 13.75 0 0 1-6.884-1.847h-.002L54.264 68.473l-.003-.001Z" fill="url(#O)"/>
+  <path d="m91.471 82.02 23.435-13.547a13.749 13.749 0 0 0 5.033-5.037L84.585 43v40.867c2.378 0 4.756-.616 6.886-1.847Z" fill="#D1E5FE"/>
+  <path d="M78.56 8.643a12.04 12.04 0 0 1 12.05 0l20.692 11.96a12.04 12.04 0 0 1 6.015 10.424v23.946c0 4.3-2.293 8.272-6.015 10.424L90.61 77.357a12.04 12.04 0 0 1-12.05 0l-20.692-11.96a12.04 12.04 0 0 1-6.015-10.424V31.027c0-4.3 2.293-8.272 6.015-10.424L78.56 8.643Z" fill="#A7BFDA"/>
+  <path d="M90.826 8.27a12.47 12.47 0 0 0-12.481 0L57.652 20.232a12.47 12.47 0 0 0-6.23 10.796v23.946a12.47 12.47 0 0 0 6.23 10.796l20.691 11.96a12.47 12.47 0 0 0 12.482 0l20.691-11.96a12.47 12.47 0 0 0 6.23-10.796V31.027a12.47 12.47 0 0 0-6.23-10.796L90.826 8.271Z" stroke="#F8FBFF" stroke-width=".86"/>
+  <path d="M78.775 9.015a11.61 11.61 0 0 1 11.62 0l20.692 11.96a11.61 11.61 0 0 1 5.8 10.052v23.946a11.61 11.61 0 0 1-5.8 10.051l-20.692 11.96a11.61 11.61 0 0 1-11.62 0l-20.692-11.96a11.61 11.61 0 0 1-5.8-10.051V31.027a11.61 11.61 0 0 1 5.8-10.051l20.692-11.96Z" stroke="#A7BFDA" stroke-width=".86"/>
+  <path d="M78.56 8.643a12.04 12.04 0 0 1 12.05 0l20.692 11.96a12.04 12.04 0 0 1 6.014 10.424v23.946c0 4.3-2.292 8.272-6.014 10.424L90.61 77.357a12.04 12.04 0 0 1-12.05 0l-20.692-11.96a12.04 12.04 0 0 1-6.015-10.424V31.027c0-4.3 2.292-8.272 6.015-10.424l20.691-11.96Z" fill="url(#P)"/>
+  <path d="M78.775 9.015a11.61 11.61 0 0 1 11.62 0l20.691 11.96a11.609 11.609 0 0 1 5.8 10.052v23.946c0 4.146-2.21 7.977-5.8 10.051l-20.691 11.96a11.61 11.61 0 0 1-11.62 0l-20.692-11.96a11.61 11.61 0 0 1-5.8-10.051V31.027a11.61 11.61 0 0 1 5.8-10.051l20.692-11.96Z" stroke="#136F4F" stroke-width=".86"/>
+  <path d="M89.31 18.567a9.46 9.46 0 0 0-9.449 0l-14.19 8.178a9.46 9.46 0 0 0-4.736 8.196v16.332a9.46 9.46 0 0 0 4.736 8.196l14.19 8.18a9.46 9.46 0 0 0 9.448 0l14.19-8.18a9.46 9.46 0 0 0 4.736-8.196V34.941a9.46 9.46 0 0 0-4.736-8.196l-14.19-8.178Z" fill="#136F4F" stroke="#3DC796" stroke-width=".86"/>
+  <path d="M72.268 34.977c1.168 1.282 1.963 2.16 1.805 3.878l-5.048 3.988c-1.443-5.285-.787-8.396.113-9.293.628-.626 1.963.145 3.13 1.427Z" fill="url(#Q)"/>
+  <path d="M68.946 42.402c-1.018-3.586-1.207-6.376-.554-8.16.385-1.05 1.157-1.6 2.594-.154.93.606 3.123 2.266 3.31 3.998" stroke="#562E11" stroke-width=".645" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M96.858 34.977c-1.167 1.282-1.963 2.16-1.805 3.878l5.049 3.988c1.443-5.285.787-8.396-.113-9.293-.63-.626-1.963.145-3.13 1.427Z" fill="url(#R)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M100.068 33.635c.858.997 1.435 4.078.034 9.208l-1.026-.81c.54-4.24.079-7.345-.177-8.602.26-.094.5-.127.707-.085l.462.289Z" fill="#FFC794"/>
+  <path d="M100.181 42.402c1.017-3.586 1.206-6.376.553-8.16-.385-1.05-1.157-1.6-2.594-.154-.93.606-3.122 2.266-3.309 3.998" stroke="#562E11" stroke-width=".645" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M59.817 65.53 78.99 76.613c3.462 2.001 7.728 2.001 11.19 0l19.206-11.101c-2.664-6.625-6.178-11.398-7.565-13.282h-.001l-.004-.007-.141-.192c-1.398-16.448-8.745-19.35-16.448-19.35-5.54 0-17.415 1.241-17.415 19.35-2.127 2.24-5.495 7.283-7.994 13.5Z" fill="url(#S)"/>
+  <path d="M59.5 66.34Z" fill="url(#T)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M89.304 33.356c3.92.946 8.244 2.837 9.595 18.919.348.283.834.63 1.403 1.035 1.606 1.144 3.875 2.76 5.584 4.77-1.413-2.441-2.711-4.142-3.646-5.365-.237-.311-.452-.592-.638-.845-.343-12.795-5.853-17.37-11.965-18.712l-.333.198Z" fill="#FFC794"/>
+  <path d="m59.675 65.448 19.062 11.018c.49-3.71 1.132-7.691 1.975-11.751-5.992-13.084-2.49-25.464-.777-31.519l.024-.086-6.343 2.257-2.794 3.763-2.15 6.235-.968 6.88c-1.591 1.63-3.453 4.763-5.183 7.674v.001c-.278.468-.553.93-.822 1.379-.683 1.138-1.382 2.567-2.024 4.149Z" fill="url(#U)"/>
+  <path d="m59.356 66.257 19.203 11.1.04.023.018.01c-.02-.01-.039-.022-.058-.033l-19.203-11.1Z" fill="url(#V)"/>
+  <path d="M75.149 46.825c1.606-3.674 5.734-3.738 9.188-3.905 3.454.167 7.584.064 9.189 3.904 1.398 3.345-.93 10.479-2.773 12.264-2.148 2.082-4.81 1.67-6.416 1.67-1.606 0-4.267.412-6.415-1.67-1.843-1.785-4.222-8.948-2.773-12.264Z" fill="#D47B3A"/>
+  <path d="M91.54 53.035s2.96 1.7 5.333.383M91.353 54.856s2.376 1.96 4.375 1.66M77.772 53.035s-2.962 1.7-5.334.383M77.958 54.856s-2.105 1.96-4.105 1.66M88.92 54.636c-.945 1.643-4.324 2.081-4.324-1.205v-1.862M80.272 54.636c.946 1.643 4.324 2.081 4.324-1.205v-1.862" stroke="#562E11" stroke-width=".645" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M77.944 49.275c.311-.28 3.419 1.276 3.305 1.85-.114.576-1.247 1.12-2.3.399-1.052-.721-1.317-1.97-1.005-2.249ZM90.957 49.238c-.318-.286-3.492 1.303-3.376 1.89.117.588 1.274 1.144 2.349.407 1.075-.736 1.345-2.011 1.027-2.297Z" fill="#562E11"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M99.864 43c.151.485.29.991.416 1.52a.216.216 0 0 1-.215.2h-1.29a.215.215 0 0 0-.215.215v1.29a.215.215 0 0 1-.215.215h-6.45a.215.215 0 0 1-.215-.215v-1.29a.215.215 0 0 0-.215-.215h-1.29a.215.215 0 0 1-.215-.215v-1.29c0-.119.097-.215.215-.215h9.69Zm-1.44-3.44a18.42 18.42 0 0 1 1.44 3.44H88.455a.215.215 0 0 1-.215-.215v-1.29a.215.215 0 0 0-.215-.215h-1.29a.215.215 0 0 1-.215-.215v-1.29c0-.119.097-.215.215-.215h11.69ZM68.96 43c.398-1.3.888-2.44 1.449-3.44h12.456c.119 0 .215.096.215.215v1.29a.215.215 0 0 1-.215.215h-1.29a.215.215 0 0 0-.215.215v1.29a.215.215 0 0 1-.215.215H68.96Zm10.465 0c.119 0 .215.096.215.215v1.29a.215.215 0 0 1-.215.215h-1.29a.215.215 0 0 0-.215.215v1.29a.215.215 0 0 1-.215.215h-6.45a.215.215 0 0 1-.215-.215v-1.29a.215.215 0 0 0-.215-.215h-1.29a.215.215 0 0 1-.215-.215v-1.29c0-.119.096-.215.215-.215h9.89Zm6.88-3.44c.119 0 .215.096.215.215v1.29a.215.215 0 0 1-.215.215h-3.01a.215.215 0 0 1-.215-.215v-1.29c0-.119.096-.215.215-.215h3.01Z" fill="#E0833F"/>
+  <path d="M109.61 65.381a57.768 57.768 0 0 0-.428-1.132c-1.866-4.799-4.381-9.565-7.406-12.37-.487-6.07-1.424-10.948-3.92-14.312-2.537-3.417-6.631-5.21-13.27-5.21-6.638 0-10.733 1.793-13.269 5.21-2.497 3.364-3.433 8.242-3.92 14.311-3.025 2.806-5.54 7.572-7.406 12.37-.147.378-.29.757-.43 1.135l.568.327c.15-.409.304-.818.463-1.227 1.877-4.827 4.381-9.525 7.334-12.215a.322.322 0 0 0 .104-.213c.484-6.127 1.411-10.879 3.805-14.103 2.371-3.195 6.232-4.95 12.751-4.95 6.52 0 10.38 1.755 12.752 4.95 2.394 3.224 3.321 7.976 3.805 14.103a.323.323 0 0 0 .104.214c2.953 2.689 5.457 7.387 7.334 12.214.159.408.313.817.463 1.226l.566-.328ZM109.907 66.203l-.568.328.568-.328Z" fill="#562E11"/>
+  <mask id="W" maskUnits="userSpaceOnUse" x="64.665" y="40.28" width="40" height="9" fill="#000">
+    <path fill="#fff" d="M64.665 40.28h40v9h-40z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M103.505 41.495a.215.215 0 0 0-.215-.215H86.52a.215.215 0 0 0-.215.215v1.29c0 .119.096.215.215.215h1.29c.119 0 .215.096.215.215v1.29c0 .119.096.215.215.215h13.33a.215.215 0 0 0 .215-.215v-1.29c0-.119.096-.215.215-.215h1.29a.215.215 0 0 0 .215-.215v-1.29Zm-37.84 0c0-.119.096-.215.215-.215h20.21c.119 0 .215.096.215.215v1.29a.215.215 0 0 1-.215.215h-4.73a.215.215 0 0 0-.215.215v1.29a.215.215 0 0 1-.215.215H67.6a.215.215 0 0 1-.215-.215v-1.29A.215.215 0 0 0 67.17 43h-1.29a.215.215 0 0 1-.215-.215v-1.29Zm13.76 3.44a.215.215 0 0 0-.215-.215h-9.89a.215.215 0 0 0-.215.215v1.29c0 .119.096.215.215.215h1.29c.119 0 .215.096.215.215v1.29c0 .119.096.215.215.215h6.45a.215.215 0 0 0 .215-.215v-1.29c0-.119.097-.215.215-.215h1.29a.215.215 0 0 0 .215-.215v-1.29Zm20.64 0a.215.215 0 0 0-.215-.215h-9.89a.215.215 0 0 0-.215.215v1.29c0 .119.096.215.215.215h1.29c.119 0 .215.096.215.215v1.29c0 .119.096.215.215.215h6.45a.215.215 0 0 0 .215-.215v-1.29c0-.119.097-.215.215-.215h1.29a.215.215 0 0 0 .215-.215v-1.29Z"/>
+  </mask>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M103.505 41.495a.215.215 0 0 0-.215-.215H86.52a.215.215 0 0 0-.215.215v1.29c0 .119.096.215.215.215h1.29c.119 0 .215.096.215.215v1.29c0 .119.096.215.215.215h13.33a.215.215 0 0 0 .215-.215v-1.29c0-.119.096-.215.215-.215h1.29a.215.215 0 0 0 .215-.215v-1.29Zm-37.84 0c0-.119.096-.215.215-.215h20.21c.119 0 .215.096.215.215v1.29a.215.215 0 0 1-.215.215h-4.73a.215.215 0 0 0-.215.215v1.29a.215.215 0 0 1-.215.215H67.6a.215.215 0 0 1-.215-.215v-1.29A.215.215 0 0 0 67.17 43h-1.29a.215.215 0 0 1-.215-.215v-1.29Zm13.76 3.44a.215.215 0 0 0-.215-.215h-9.89a.215.215 0 0 0-.215.215v1.29c0 .119.096.215.215.215h1.29c.119 0 .215.096.215.215v1.29c0 .119.096.215.215.215h6.45a.215.215 0 0 0 .215-.215v-1.29c0-.119.097-.215.215-.215h1.29a.215.215 0 0 0 .215-.215v-1.29Zm20.64 0a.215.215 0 0 0-.215-.215h-9.89a.215.215 0 0 0-.215.215v1.29c0 .119.096.215.215.215h1.29c.119 0 .215.096.215.215v1.29c0 .119.096.215.215.215h6.45a.215.215 0 0 0 .215-.215v-1.29c0-.119.097-.215.215-.215h1.29a.215.215 0 0 0 .215-.215v-1.29Z" fill="#333"/>
+  <path d="M82.865 41.28v-.645.645Zm0 1.72v.645V43Zm3.225 0v-.645V43Zm.43-1.075h16.77v-1.29H86.52v1.29Zm.43.86v-1.29h-1.29v1.29h1.29Zm.86-.43h-1.29v1.29h1.29v-1.29Zm.86 2.15v-1.29h-1.29v1.29h1.29Zm12.9-.43H88.24v1.29h13.33v-1.29Zm-.43-.86v1.29h1.29v-1.29h-1.29Zm2.15-.86H102v1.29h1.29v-1.29Zm-.43-.86v1.29h1.29v-1.29h-1.29Zm-19.995-.86H65.88v1.29h16.985v-1.29Zm0 1.29h3.225v-1.29h-3.225v1.29Zm2.795-.43v1.29h1.29v-1.29h-1.29Zm.43.86h-3.225v1.29h3.225v-1.29Zm-4.73 1.29h1.505v-1.29H81.36v1.29Zm.43.86v-1.29H80.5v1.29h1.29Zm-14.19.86h13.33v-1.29H67.6v1.29Zm-.86-2.15v1.29h1.29v-1.29h-1.29Zm-.86.43h1.29v-1.29h-1.29v1.29Zm-.86-2.15v1.29h1.29v-1.29h-1.29Zm4.3 3.87h9.89v-1.29h-9.89v1.29Zm.43.86v-1.29h-1.29v1.29h1.29Zm.86-.43h-1.29v1.29h1.29v-1.29Zm.86 2.15v-1.29h-1.29v1.29h1.29Zm6.02-.43h-6.45v1.29h6.45v-1.29Zm-.43-.86v1.29h1.29v-1.29h-1.29Zm2.15-.86h-1.29v1.29h1.29v-1.29Zm-.43-.86v1.29h1.29v-1.29h-1.29Zm11.18.43h9.89v-1.29h-9.89v1.29Zm.43.86v-1.29H89.1v1.29h1.29Zm.86-.43h-1.29v1.29h1.29v-1.29Zm.86 2.15v-1.29h-1.29v1.29h1.29Zm6.02-.43h-6.45v1.29h6.45v-1.29Zm-.43-.86v1.29h1.29v-1.29H97.7Zm2.15-.86h-1.29v1.29h1.29v-1.29Zm-.43-.86v1.29h1.29v-1.29h-1.29Zm.43 2.15a.86.86 0 0 0 .86-.86h-1.29a.43.43 0 0 1 .43-.43v1.29Zm-.86-.43a.43.43 0 0 1-.43.43v-1.29a.86.86 0 0 0-.86.86h1.29Zm-.86 2.15a.86.86 0 0 0 .86-.86H97.7a.43.43 0 0 1 .43-.43v1.29Zm-7.31-.86c0 .475.385.86.86.86v-1.29a.43.43 0 0 1 .43.43h-1.29Zm.43-.86a.43.43 0 0 1-.43-.43h1.29a.86.86 0 0 0-.86-.86v1.29Zm-2.15-.86c0 .475.385.86.86.86v-1.29a.43.43 0 0 1 .43.43H89.1Zm10.75-.86a.43.43 0 0 1-.43-.43h1.29a.86.86 0 0 0-.86-.86v1.29Zm-9.89-1.29a.86.86 0 0 0-.86.86h1.29a.43.43 0 0 1-.43.43v-1.29Zm-10.75 3.01a.86.86 0 0 0 .86-.86h-1.29a.43.43 0 0 1 .43-.43v1.29Zm-9.03.86c0 .475.385.86.86.86v-1.29a.43.43 0 0 1 .43.43h-1.29Zm.43-.86a.43.43 0 0 1-.43-.43h1.29a.86.86 0 0 0-.86-.86v1.29Zm-2.15-.86c0 .475.385.86.86.86v-1.29a.43.43 0 0 1 .43.43h-1.29Zm10.75-.86a.43.43 0 0 1-.43-.43h1.29a.86.86 0 0 0-.86-.86v1.29Zm-9.89-1.29a.86.86 0 0 0-.86.86h1.29a.43.43 0 0 1-.43.43v-1.29Zm-3.44-1.72a.43.43 0 0 1 .43.43h-1.29c0 .475.385.86.86.86v-1.29Zm2.15.86a.86.86 0 0 0-.86-.86v1.29a.43.43 0 0 1-.43-.43h1.29Zm-.43.86a.43.43 0 0 1 .43.43h-1.29c0 .475.385.86.86.86v-1.29Zm12.9.43a.43.43 0 0 1 .43-.43v1.29a.86.86 0 0 0 .86-.86H80.5Zm.86-2.15a.86.86 0 0 0-.86.86h1.29a.43.43 0 0 1-.43.43v-1.29Zm4.73-.43a.43.43 0 0 1-.43-.43h1.29a.86.86 0 0 0-.86-.86v1.29Zm-20.21-1.29a.86.86 0 0 0-.86.86h1.29a.43.43 0 0 1-.43.43v-1.29Zm37.41 3.01a.86.86 0 0 0 .86-.86h-1.29a.43.43 0 0 1 .43-.43v1.29Zm-.86-.43a.43.43 0 0 1-.43.43v-1.29a.86.86 0 0 0-.86.86h1.29Zm-.86 2.15a.86.86 0 0 0 .86-.86h-1.29a.43.43 0 0 1 .43-.43v1.29Zm-14.19-.86c0 .475.385.86.86.86v-1.29a.43.43 0 0 1 .43.43h-1.29Zm.43-.86a.43.43 0 0 1-.43-.43h1.29a.86.86 0 0 0-.86-.86v1.29Zm-2.15-.86c0 .475.385.86.86.86v-1.29a.43.43 0 0 1 .43.43h-1.29Zm-7.31 3.87a.43.43 0 0 1-.43.43v-1.29a.86.86 0 0 0-.86.86h1.29Zm24.94-4.73a.43.43 0 0 1-.43-.43h1.29a.86.86 0 0 0-.86-.86v1.29Zm-17.63.86a.43.43 0 0 1 .43-.43v1.29a.86.86 0 0 0 .86-.86h-1.29Zm-8.17 6.02a.86.86 0 0 0 .86-.86h-1.29a.43.43 0 0 1 .43-.43v1.29Zm9.03-8.17a.86.86 0 0 0-.86.86h1.29a.43.43 0 0 1-.43.43v-1.29Z" fill="#000" mask="url(#W)"/>
+  <rect x="69.105" y="43" width="1.72" height="1.72" rx=".215" fill="#fff"/>
+  <rect x="70.825" y="44.72" width="1.72" height="1.72" rx=".215" fill="#fff"/>
+  <rect x="72.545" y="43" width="1.72" height="1.72" rx=".215" fill="#fff"/>
+  <rect x="74.265" y="44.72" width="1.72" height="1.72" rx=".215" fill="#fff"/>
+  <rect x="89.745" y="43" width="1.72" height="1.72" rx=".215" fill="#fff"/>
+  <rect x="91.465" y="44.72" width="1.72" height="1.72" rx=".215" fill="#fff"/>
+  <rect x="93.185" y="43" width="1.72" height="1.72" rx=".215" fill="#fff"/>
+  <rect x="94.905" y="44.72" width="1.72" height="1.72" rx=".215" fill="#fff"/>
+  <g filter="url(#X)">
+    <path d="M83.005 11.522c.633-1.278 2.456-1.276 3.085.003l1.617 3.285c.25.508.734.86 1.294.942l3.623.53c1.41.207 1.972 1.942.95 2.936L90.95 21.77a1.72 1.72 0 0 0-.497 1.522l.615 3.61c.24 1.405-1.236 2.475-2.497 1.81l-3.24-1.708a1.72 1.72 0 0 0-1.6-.001l-3.243 1.7c-1.263.662-2.736-.411-2.494-1.816l.623-3.608a1.72 1.72 0 0 0-.493-1.523l-2.62-2.559c-1.019-.996-.454-2.729.957-2.933l3.624-.522a1.72 1.72 0 0 0 1.297-.94l1.623-3.281Z" fill="url(#Y)"/>
+  </g>
+  <path d="M86.187 11.477c-.67-1.359-2.606-1.36-3.278-.003l-1.624 3.282c-.235.475-.69.805-1.215.88l-3.624.523c-1.5.216-2.1 2.058-1.016 3.116l2.619 2.559c.38.37.552.905.462 1.428l-.623 3.608c-.257 1.492 1.308 2.633 2.65 1.93l3.243-1.701a1.613 1.613 0 0 1 1.5.001l3.24 1.708c1.34.706 2.908-.43 2.653-1.924l-.615-3.61a1.613 1.613 0 0 1 .466-1.426l2.624-2.553c1.086-1.056.49-2.899-1.01-3.119l-3.622-.53a1.612 1.612 0 0 1-1.213-.883l-1.617-3.286Z" stroke="#A05500" stroke-width=".215"/>
+  <path d="M83.005 11.522c.633-1.278 2.456-1.276 3.085.003l1.617 3.285c.25.508.734.86 1.294.942l3.623.53c1.41.207 1.972 1.942.95 2.936L90.95 21.77a1.72 1.72 0 0 0-.497 1.522l.615 3.61c.24 1.405-1.236 2.475-2.497 1.81l-3.24-1.708a1.72 1.72 0 0 0-1.6-.001l-3.243 1.7c-1.263.662-2.736-.411-2.494-1.816l.623-3.608a1.72 1.72 0 0 0-.493-1.523l-2.62-2.559c-1.019-.996-.454-2.729.957-2.933l3.624-.522a1.72 1.72 0 0 0 1.297-.94l1.623-3.281Z" stroke="#A05500" stroke-width=".645"/>
+  <g filter="url(#Z)">
+    <path d="M64.107 20.794c.21-1.049 1.531-1.4 2.236-.596l1.376 1.572c.28.32.699.48 1.12.431l2.076-.243c1.062-.124 1.805 1.024 1.258 1.942l-1.07 1.795a1.29 1.29 0 0 0-.064 1.199l.872 1.899c.447.972-.415 2.033-1.457 1.796l-2.038-.462a1.29 1.29 0 0 0-1.16.309l-1.537 1.416c-.786.725-2.062.234-2.159-.831l-.19-2.081a1.29 1.29 0 0 0-.652-1.008l-1.822-1.023c-.932-.524-.86-1.89.124-2.31l1.92-.824a1.29 1.29 0 0 0 .757-.932l.41-2.05Z" fill="url(#aa)"/>
+  </g>
+  <path d="M66.424 20.127c-.764-.872-2.195-.49-2.422.646l-.41 2.049a1.182 1.182 0 0 1-.694.854l-1.92.824c-1.065.456-1.145 1.935-.135 2.502l1.822 1.024c.34.19.563.536.599.924l.19 2.08c.104 1.154 1.486 1.687 2.338.901l1.537-1.416c.286-.264.683-.37 1.063-.284l2.038.463c1.13.257 2.063-.893 1.58-1.946l-.873-1.899a1.183 1.183 0 0 1 .059-1.099l1.07-1.795c.592-.995-.213-2.238-1.363-2.103l-2.076.242A1.183 1.183 0 0 1 67.8 21.7l-1.376-1.572Z" stroke="#A05500" stroke-width=".215"/>
+  <path d="M64.107 20.794c.21-1.049 1.531-1.4 2.236-.596l1.376 1.572c.28.32.699.48 1.12.431l2.076-.243c1.062-.124 1.805 1.024 1.258 1.942l-1.07 1.795a1.29 1.29 0 0 0-.064 1.199l.872 1.899c.447.972-.415 2.033-1.457 1.796l-2.038-.462a1.29 1.29 0 0 0-1.16.309l-1.537 1.416c-.786.725-2.062.234-2.159-.831l-.19-2.081a1.29 1.29 0 0 0-.652-1.008l-1.822-1.023c-.932-.524-.86-1.89.124-2.31l1.92-.824a1.29 1.29 0 0 0 .757-.932l.41-2.05Z" fill="url(#ab)" stroke="#A05500" stroke-width=".645"/>
+  <g filter="url(#ac)">
+    <path d="M105.217 20.794c-.21-1.049-1.531-1.4-2.235-.596l-1.377 1.572c-.279.32-.698.48-1.12.431l-2.076-.243c-1.062-.124-1.805 1.024-1.258 1.942l1.07 1.795c.218.365.242.813.064 1.199l-.872 1.899c-.446.972.416 2.033 1.458 1.796l2.038-.462a1.29 1.29 0 0 1 1.16.309l1.536 1.416c.786.725 2.062.234 2.159-.831l.19-2.081c.039-.423.283-.8.653-1.008l1.822-1.023c.932-.524.859-1.89-.124-2.31l-1.921-.824a1.289 1.289 0 0 1-.756-.932l-.411-2.05Z" fill="url(#ad)"/>
+  </g>
+  <path d="M105.217 20.794c-.21-1.049-1.531-1.4-2.235-.596l-1.377 1.572c-.279.32-.698.48-1.12.431l-2.076-.243c-1.062-.124-1.805 1.024-1.258 1.942l1.07 1.795c.218.365.242.813.064 1.199l-.872 1.899c-.446.972.416 2.033 1.458 1.796l2.038-.462a1.29 1.29 0 0 1 1.16.309l1.536 1.416c.786.725 2.062.234 2.159-.831l.19-2.081c.039-.423.283-.8.653-1.008l1.822-1.023c.932-.524.859-1.89-.124-2.31l-1.921-.824a1.289 1.289 0 0 1-.756-.932l-.411-2.05Z" stroke="#A05500" stroke-width=".645"/>
+  <path d="M45.296 3.608a14.19 14.19 0 0 0-14.202 0L7.659 17.154A14.19 14.19 0 0 0 .57 29.44v27.12a14.19 14.19 0 0 0 7.089 12.286l23.435 13.546a14.19 14.19 0 0 0 14.202 0l23.435-13.546A14.19 14.19 0 0 0 75.82 56.56V29.44a14.19 14.19 0 0 0-7.089-12.286L45.296 3.608Z" fill="#ECF5FF" stroke="#A7BFDA" stroke-width=".86"/>
+  <path d="M38.195 2.133V43L2.841 22.564a13.751 13.751 0 0 1 5.03-5.035l.003-.002L31.309 3.98a13.751 13.751 0 0 1 6.886-1.847Z" fill="#F8FBFF"/>
+  <path d="M1 29.44v27.12c0 2.456.655 4.82 1.84 6.876L38.196 43 2.841 22.564A13.751 13.751 0 0 0 1 29.44Z" fill="url(#ae)"/>
+  <path d="M75.39 56.571v-27.12c0-2.457-.655-4.82-1.84-6.876L38.194 43.011l35.354 20.436a13.75 13.75 0 0 0 1.841-6.876Z" fill="#E0EEFF"/>
+  <path d="M38.195 2.15v40.867L73.549 22.58a13.75 13.75 0 0 0-5.033-5.038L45.081 3.997a13.751 13.751 0 0 0-6.886-1.847Z" fill="url(#af)"/>
+  <path d="M7.871 68.472a13.751 13.751 0 0 1-5.03-5.036L38.195 43v40.867a13.75 13.75 0 0 1-6.884-1.847h-.002L7.874 68.473l-.003-.001Z" fill="url(#ag)"/>
+  <path d="m45.081 82.02 23.435-13.547a13.75 13.75 0 0 0 5.033-5.037L38.195 43v40.867c2.378 0 4.756-.616 6.886-1.847Z" fill="#D1E5FE"/>
+  <path d="M32.17 8.643a12.04 12.04 0 0 1 12.05 0l20.692 11.96a12.04 12.04 0 0 1 6.015 10.424v23.946c0 4.3-2.293 8.272-6.015 10.424L44.22 77.357a12.04 12.04 0 0 1-12.05 0l-20.692-11.96a12.04 12.04 0 0 1-6.015-10.424V31.027c0-4.3 2.293-8.272 6.015-10.424L32.17 8.643Z" fill="#A7BFDA"/>
+  <path d="M44.435 8.27a12.47 12.47 0 0 0-12.48 0L11.262 20.232a12.47 12.47 0 0 0-6.23 10.796v23.946a12.47 12.47 0 0 0 6.23 10.796l20.691 11.96a12.47 12.47 0 0 0 12.481 0l20.692-11.96a12.47 12.47 0 0 0 6.23-10.796V31.027a12.47 12.47 0 0 0-6.23-10.796L44.436 8.271Z" stroke="#F8FBFF" stroke-width=".86"/>
+  <path d="M32.385 9.015a11.61 11.61 0 0 1 11.62 0l20.692 11.96a11.61 11.61 0 0 1 5.8 10.052v23.946a11.61 11.61 0 0 1-5.8 10.051l-20.692 11.96a11.61 11.61 0 0 1-11.62 0l-20.692-11.96a11.61 11.61 0 0 1-5.8-10.051V31.027a11.61 11.61 0 0 1 5.8-10.051l20.692-11.96Z" stroke="#A7BFDA" stroke-width=".86"/>
+  <path d="M32.221 8.643a12.04 12.04 0 0 1 12.051 0l20.692 11.96a12.04 12.04 0 0 1 6.014 10.424v23.946c0 4.3-2.292 8.272-6.014 10.424l-20.692 11.96a12.04 12.04 0 0 1-12.05 0L11.53 65.397a12.04 12.04 0 0 1-6.015-10.424V31.027c0-4.3 2.292-8.272 6.015-10.424L32.22 8.643Z" fill="url(#ah)"/>
+  <path d="M32.437 9.015a11.61 11.61 0 0 1 11.62 0l20.691 11.96a11.61 11.61 0 0 1 5.8 10.052v23.946a11.61 11.61 0 0 1-5.8 10.051l-20.691 11.96a11.61 11.61 0 0 1-11.62 0l-20.692-11.96a11.61 11.61 0 0 1-5.8-10.051V31.027a11.61 11.61 0 0 1 5.8-10.051l20.692-11.96Z" fill="url(#ai)" stroke="#6F89A8" stroke-width=".86"/>
+  <path d="M26.585 19.458c-.645.322-1.505 1.612-.43 4.837l5.268-3.225c-1.828-2.15-4.193-1.935-4.838-1.612Z" fill="#C06E33" stroke="#562E11" stroke-width=".645"/>
+  <path d="M36.045 20.102c15.803-1.983 16.387 7.914 20.855 19.24 9.46 11.828 7.74 25.216 7.74 25.216l-.158.094-20.692 11.96c-3.461 2.002-7.728 2.002-11.19 0l-14.23-8.225c-.218-11.726 4.111-19.828 6.388-22.484-4.515-7.561-5.375-23.709 11.287-25.8Z" fill="url(#aj)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M64.575 64.598c.681-3.778-.042-7.085-.042-7.085-.71-.434-2.254.791-4.523 2.592-3.683 2.923-9.28 7.364-16.332 8.695-9.03.752-18.317.752-17.63-7.417.687-8.17 4.186-13.787 8.923-14.083 8.707-.544 10.642-15.157 5.267-18.275-4.3-2.494-11.037-2.042-13.867-1.505-.645-2.258 2.257-4.837 2.257-4.837l-1.935 1.075-2.043 2.364-1.612 3.333-.968 3.225v3.977l.43 3.978 2.15 5.268-2.15 3.44-2.472 5.912-1.397 7.095-.27 6.031 14.24 8.232c3.461 2 7.728 2 11.19 0l20.69-11.96a9.46 9.46 0 0 0 .094-.055Z" fill="url(#ak)"/>
+  <path d="M28.235 36.12s-.756 8.227 6.37 5.092" stroke="#562E11" stroke-width=".645" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M26.196 41.337s1.787 2.009 3.04-.418" stroke="#562E11" stroke-width=".645" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <ellipse cx="45.505" cy="29.24" rx="2.15" ry="2.58" fill="#333" stroke="#000" stroke-width=".645"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M46.39 24.422c1.019.233 1.693-.107 2.388-1.75l-.155-.204-3.978-2.043-5.59-.645-3.655.645c.557.124 1.226.212 1.966.308 2.697.35 6.344.825 9.025 3.69Zm2.96-1.003 1.422 4.101s-2.19 2.571 4.383 12.943c.805.899 1.605 1.671 2.387 2.426 1.747 1.688 3.406 3.29 4.84 6.023l-1.612-3.654-2.043-3.333-2.15-3.547-3.762-10.428-3.465-4.531Z" fill="url(#al)"/>
+  <ellipse cx="46.23" cy="28.504" rx=".667" ry="1.052" transform="rotate(-16.646 46.23 28.504)" fill="#E0E0E0"/>
+  <path d="M36.93 31.45c-.358-.321-3.925 1.464-3.794 2.125.131.66 1.431 1.284 2.64.456 1.208-.827 1.512-2.26 1.154-2.581ZM22.197 31.45c.358-.321 3.925 1.464 3.794 2.125-.131.66-1.431 1.284-2.64.456-1.207-.827-1.511-2.26-1.154-2.581Z" fill="#562E11"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M65.019 64.321c.028-.404.058-.989.065-1.723a38.213 38.213 0 0 0-.447-6.075c-.757-4.947-2.702-11.385-7.454-17.345-.657-1.666-1.224-3.287-1.771-4.85v-.001c-.38-1.082-.748-2.137-1.13-3.161-.933-2.496-1.931-4.767-3.299-6.626-1.373-1.866-3.118-3.315-5.534-4.165-2.409-.848-5.463-1.092-9.444-.593-4.218.53-7.352 1.953-9.6 3.929-2.25 1.976-3.593 4.487-4.258 7.163-1.304 5.246-.007 11.147 2.218 14.996-2.316 2.85-6.321 11.152-6.28 22.352l.648.375c-.137-11.5 4.07-19.918 6.27-22.485a.323.323 0 0 0 .032-.375c-2.22-3.718-3.542-9.558-2.262-14.708.638-2.567 1.922-4.957 4.057-6.834 2.135-1.876 5.142-3.256 9.255-3.773 3.92-.492 6.866-.243 9.15.561 2.278.802 3.922 2.163 5.229 3.94 1.312 1.783 2.285 3.985 3.213 6.469.371.994.738 2.04 1.116 3.121.559 1.595 1.143 3.263 1.807 4.947a.32.32 0 0 0 .048.083C61.334 45.401 63.252 51.741 64 56.62c.373 2.44.453 4.512.44 5.972-.007.73-.037 1.308-.065 1.7-.014.194-.027.343-.037.444l.145-.084c.183-.105.362-.216.537-.33Z" fill="#562E11"/>
+  <path d="M48.515 23.906c.322-1.685 1.475-3.305 3.225-3.87 6.45-2.083 4.73 2.687 4.515 3.87-.615 3.38-6.249 2.297-5.425 3.788l.05.082a1.169 1.169 0 0 1-.05-.082l-2.315-3.788Z" fill="url(#am)"/>
+  <path d="M48.73 22.897c.753-1.827 1.613-2.365 3.01-2.862 1.71-.608 2.908-.576 3.655-.414m-4.515 8.154c-1.075-1.612 4.75-.43 5.375-3.87.352-1.934.961-3.89-.86-4.284m0 0c-1.648.053-5.139 1.255-5.913 5.641" stroke="#562E11" stroke-width=".645" stroke-linecap="round"/>
+  <path d="M36.759 37.235s5.428 1.204 8.62.807M36.668 39.328s6.087 2.152 8.27 2.083M24.718 37.045s-5.014 2.388-7.989 2.436M24.81 39.394s-4.911 2.932-6.637 2.937" stroke="#562E11" stroke-width=".645" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="m32.605 53.025-5.327 2.415-5.722-4.022-8.615-3.437-.16-1.65.69-1.129 12.327 4.02 6.807 3.803Z" fill="#B8B8B8"/>
+  <path d="M24.832 50.245c1.028.585 2.974 1.722 3.427 1.937l.518-1.346-3.3-1.733-11.923-3.819-.57.811 11.848 4.15Z" fill="#D9D9D9"/>
+  <path d="m30.262 54.087-2.3 1.043c-.423.192-.912.15-1.282-.11l-5.005-3.518a1.25 1.25 0 0 0-.256-.139l-7.975-3.18c-.322-.13-.579-.382-.661-.716-.07-.285-.127-.636-.08-.913a2.04 2.04 0 0 1 .256-.633c.265-.462.838-.612 1.337-.45l11.384 3.713c.078.025.153.058.224.098l4.511 2.52c.911.509.822 1.843-.153 2.285Z" stroke="#575757" stroke-width=".645" stroke-linejoin="round"/>
+  <path d="m42.18 73.78-4.679-16.383-.77-2.236-3.091-3.174-2.756-.27-1.914-1.116-3.108 4.728 1.398 1.053-2.11 3.876 5.24 15.154 5.678.64.465 1.335c.86-.334 1.686-.777 2.457-1.327l3.19-2.28Z" fill="#DC2929"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M43.297 76.973a12.039 12.039 0 0 1-6.539 1.049l-1.81-5.749 5.872-2.942 2.477 7.642ZM26.421 54.411l2.305 1.506.024 2.482-1.42 2.08-1.25 2.713-.931-2.934 2.11-3.876-1.504-1.042.666-.929Z" fill="#B61E1E"/>
+  <path d="m30.736 53.24-2.391-1.282.732-1.366 2.05 1.098 2.502.19.852.998 1.919 1.975.68 1.447-3.745-2.987-2.599-.074Z" fill="#FF7171"/>
+  <path d="M42.46 73.582 37.808 57.3l-.796-2.313-3.225-3.31-2.803-.274-2.113-1.233-3.563 5.252 1.529 1.06-2.04 3.745 5.442 14.914 5.59 1.208.903 1.606c.064.089.833.173 1.032.089l-1.46-2.29-5.589-1.208-5.215-14.26 2.18-4.005-1.48-1.026 2.867-4.224 1.714 1 2.709.265 2.959 3.038.744 2.16 4.708 16.485.557-.398Z" fill="#A21515"/>
+  <path d="M26.356 63.813c-.506-1.895 2.49-5.532 2.49-5.532l4.285-1.493 6.172 18.089-3.856 1.452s-4.644.066-5.1-1.294c-.455-1.36-3.484-9.327-3.99-11.222Z" fill="#B8B8B8"/>
+  <path d="m35.447 76.329-3.81-5.104-.041-.428 6.383.428 1.237 3.876-3.77 1.228Z" fill="#959595"/>
+  <path d="M26.356 63.813c-.506-1.895 2.49-5.532 2.49-5.532l4.285-1.493 6.172 18.089-3.856 1.452s-4.537-.092-4.992-1.452c-.455-1.36-3.592-9.169-4.099-11.064Z" stroke="#575757" stroke-width=".645" stroke-linejoin="round"/>
+  <path d="M32.283 72.347s-3.333-9.137-3.44-9.674c-.108-.538 0-1.828 1.182-2.258 1.182-.43 2.257.215 2.473.752.215.538 4.085 11.61 4.085 11.61l-4.3-.43Z" fill="#CC7637" stroke="#575757" stroke-width=".645" stroke-linecap="round" stroke-linejoin="round"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M58.212 68.306 50.88 54.718c-.602 3.87-4.244 6.099-5.697 6.772-2.15.996-4.15.336-4.447-.673-.501-1.868-1.093-3.344-3.182-3.047.694 2.209 1.046 4.355-1.71 4.716-3.445.452-3.565.464-4.621-.512-1.057-.976-1.776.29-1.697 1.121.047.482.147 1.4 1.057 2.222-.366 1.046-.516 2.986.992 4.054-.488.764-.42 1.724 3.039 2.815 3.292 1.038 8.974 2.019 14.345 1.469l9.253-5.349Z" fill="url(#an)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="m58.2 68.283-2.612-4.839c-3.252 2.253-7.265 4.48-11.91 5.356-4.777.398-9.626.585-13.032-.536.194.414.491.797.929 1.107-.488.764-.42 1.724 3.038 2.815 3.28 1.034 8.93 2.011 14.282 1.475l9.304-5.378Z" fill="#CA7537"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M49.662 73.249a29.533 29.533 0 0 1-3.073.231c-4.577.114-9.097-.725-11.878-1.602-1.704-.537-2.513-1.137-2.851-1.635-.217-.319-.25-.608-.192-.851.426.278.996.589 1.638.694a.322.322 0 1 0 .104-.637c-.663-.108-1.26-.498-1.693-.805-.683-.484-.963-1.042-1.044-1.588a3.087 3.087 0 0 1 .083-1.195c.554.377 1.323.695 2.401.907a.322.322 0 1 0 .125-.633c-1.281-.251-2.03-.649-2.482-1.057-.817-.738-.907-1.553-.952-2.014-.032-.333.105-.757.328-.978a.43.43 0 0 1 .318-.143c.112.003.284.058.51.267.262.242.49.446.736.595.257.155.525.245.865.281.33.035.727.019 1.244-.031.519-.05 1.179-.136 2.038-.25.728-.095 1.287-.313 1.692-.65.41-.341.634-.783.731-1.272.166-.84-.041-1.846-.33-2.827.306-.01.561.03.776.106.295.104.534.282.738.526.42.504.679 1.273.931 2.212l.002.008c.198.672.917 1.136 1.773 1.313.876.181 1.981.087 3.113-.435l.023-.01a4.758 4.758 0 0 0 .352-.174c.228-.125.539-.316.878-.585a5.98 5.98 0 0 0 1.93-2.642.323.323 0 1 0-.606-.22 5.336 5.336 0 0 1-1.724 2.356 5.652 5.652 0 0 1-.788.525 4.21 4.21 0 0 1-.298.147l-.014.006-.002.001a.184.184 0 0 0-.01.004l-.006.003c-1.017.471-1.984.544-2.717.392-.753-.155-1.183-.523-1.284-.86-.249-.927-.536-1.828-1.058-2.454a2.31 2.31 0 0 0-1.019-.721c-.416-.147-.9-.183-1.46-.103a.323.323 0 0 0-.262.416c.349 1.11.581 2.125.43 2.891-.073.369-.234.67-.512.901-.283.236-.714.422-1.363.507-.864.114-1.51.198-2.016.247-.508.049-.852.06-1.115.032a1.36 1.36 0 0 1-.598-.192c-.182-.11-.364-.27-.631-.516-.302-.279-.616-.431-.933-.44a1.072 1.072 0 0 0-.787.33c-.38.377-.565 1.001-.517 1.5.046.474.147 1.416 1.007 2.282-.159.51-.27 1.118-.178 1.742.097.652.415 1.299 1.085 1.849-.186.45-.191 1.02.206 1.605.46.678 1.438 1.335 3.191 1.888 2.843.897 7.434 1.748 12.088 1.632a31.8 31.8 0 0 0 1.69-.087l1.367-.79Zm2.526-.467-1.738 1.005 1.738-1.005Z" fill="#562E11"/>
+  <defs>
+    <linearGradient id="a" x1="205.158" y1="22.564" x2="205.158" y2="63.436" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E0EEFF"/>
+      <stop offset="1" stop-color="#F8FBFF"/>
+    </linearGradient>
+    <linearGradient id="b" x1="223.755" y1="4.192" x2="259.015" y2="4.192" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E0EEFF"/>
+      <stop offset="1" stop-color="#F8FBFF"/>
+    </linearGradient>
+    <linearGradient id="c" x1="189.248" y1="63.425" x2="223.755" y2="63.425" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D1E5FE"/>
+      <stop offset="1" stop-color="#F8FBFF"/>
+    </linearGradient>
+    <linearGradient id="d" x1="190.92" y1="40.742" x2="256.28" y2="40.742" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#2CB787"/>
+      <stop offset="1" stop-color="#25926B"/>
+    </linearGradient>
+    <linearGradient id="e" x1="212.824" y1="19.764" x2="207.266" y2="21.628" gradientUnits="userSpaceOnUse">
+      <stop offset=".28" stop-color="#DE8232"/>
+      <stop offset=".902" stop-color="#AC5B14"/>
+    </linearGradient>
+    <linearGradient id="f" x1="234.476" y1="19.764" x2="240.034" y2="21.628" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#C46E22"/>
+      <stop offset=".902" stop-color="#F7A45A"/>
+    </linearGradient>
+    <linearGradient id="g" x1="223.793" y1="17.796" x2="223.793" y2="63.991" gradientUnits="userSpaceOnUse">
+      <stop offset=".4" stop-color="#F6A359"/>
+      <stop offset=".925" stop-color="#DE813D"/>
+    </linearGradient>
+    <linearGradient id="h" x1="211.75" y1="62.855" x2="211.75" y2="18.838" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#C26A2A"/>
+      <stop offset=".47" stop-color="#DF823E"/>
+    </linearGradient>
+    <linearGradient id="i" x1="211.75" y1="62.855" x2="211.75" y2="18.838" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#C26A2A"/>
+      <stop offset=".47" stop-color="#DF823E"/>
+    </linearGradient>
+    <linearGradient id="j" x1="158.767" y1="22.564" x2="158.767" y2="63.436" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E0EEFF"/>
+      <stop offset="1" stop-color="#F8FBFF"/>
+    </linearGradient>
+    <linearGradient id="k" x1="177.365" y1="4.192" x2="212.625" y2="4.192" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E0EEFF"/>
+      <stop offset="1" stop-color="#F8FBFF"/>
+    </linearGradient>
+    <linearGradient id="l" x1="142.858" y1="63.425" x2="177.365" y2="63.425" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D1E5FE"/>
+      <stop offset="1" stop-color="#F8FBFF"/>
+    </linearGradient>
+    <linearGradient id="m" x1="144.685" y1="40.742" x2="210.045" y2="40.742" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#944DEC"/>
+      <stop offset="1" stop-color="#6213C2"/>
+    </linearGradient>
+    <linearGradient id="n" x1="167.984" y1="17.911" x2="163.249" y2="19.5" gradientUnits="userSpaceOnUse">
+      <stop offset=".28" stop-color="#DE8232"/>
+      <stop offset=".902" stop-color="#AC5B14"/>
+    </linearGradient>
+    <linearGradient id="o" x1="186.431" y1="17.911" x2="191.166" y2="19.5" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#C46E22"/>
+      <stop offset=".902" stop-color="#F7A45A"/>
+    </linearGradient>
+    <linearGradient id="p" x1="175.92" y1="15.895" x2="175.92" y2="55.541" gradientUnits="userSpaceOnUse">
+      <stop offset=".4" stop-color="#F6A359"/>
+      <stop offset=".925" stop-color="#DE813D"/>
+    </linearGradient>
+    <linearGradient id="q" x1="169.816" y1="55.629" x2="169.816" y2="17.523" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#C26A2A"/>
+      <stop offset=".47" stop-color="#DF823E"/>
+    </linearGradient>
+    <linearGradient id="r" x1="174.355" y1="58.05" x2="174.355" y2="78.113" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#A9BCD0"/>
+      <stop offset="1" stop-color="#97A7B7"/>
+    </linearGradient>
+    <linearGradient id="v" x1="177.15" y1="61.26" x2="190.326" y2="47.539" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#F0B033"/>
+      <stop offset=".695" stop-color="#FFCF70"/>
+    </linearGradient>
+    <linearGradient id="x" x1="164.645" y1="46.188" x2="164.645" y2="55.683" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D27735"/>
+      <stop offset=".618" stop-color="#C86F2E"/>
+    </linearGradient>
+    <linearGradient id="y" x1="112.378" y1="22.564" x2="112.378" y2="63.436" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E0EEFF"/>
+      <stop offset="1" stop-color="#F8FBFF"/>
+    </linearGradient>
+    <linearGradient id="z" x1="130.975" y1="4.192" x2="166.235" y2="4.192" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E0EEFF"/>
+      <stop offset="1" stop-color="#F8FBFF"/>
+    </linearGradient>
+    <linearGradient id="A" x1="96.468" y1="63.425" x2="130.975" y2="63.425" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D1E5FE"/>
+      <stop offset="1" stop-color="#F8FBFF"/>
+    </linearGradient>
+    <linearGradient id="B" x1="98.295" y1="40.742" x2="163.655" y2="40.742" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#1C75E8"/>
+      <stop offset="1" stop-color="#2C58D1"/>
+    </linearGradient>
+    <linearGradient id="C" x1="120.043" y1="19.764" x2="114.485" y2="21.628" gradientUnits="userSpaceOnUse">
+      <stop offset=".28" stop-color="#DE8232"/>
+      <stop offset=".902" stop-color="#AC5B14"/>
+    </linearGradient>
+    <linearGradient id="D" x1="141.695" y1="19.764" x2="147.253" y2="21.628" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#C46E22"/>
+      <stop offset=".902" stop-color="#F7A45A"/>
+    </linearGradient>
+    <linearGradient id="E" x1="130.952" y1="17.796" x2="130.952" y2="63.991" gradientUnits="userSpaceOnUse">
+      <stop offset=".4" stop-color="#F6A359"/>
+      <stop offset=".925" stop-color="#DE813D"/>
+    </linearGradient>
+    <linearGradient id="F" x1="118.911" y1="62.855" x2="118.911" y2="18.838" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#C26A2A"/>
+      <stop offset=".47" stop-color="#DF823E"/>
+    </linearGradient>
+    <linearGradient id="G" x1="118.911" y1="62.855" x2="118.911" y2="18.838" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#C26A2A"/>
+      <stop offset=".47" stop-color="#DF823E"/>
+    </linearGradient>
+    <linearGradient id="H" x1="118.911" y1="62.855" x2="118.911" y2="18.838" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#C26A2A"/>
+      <stop offset=".47" stop-color="#DF823E"/>
+    </linearGradient>
+    <linearGradient id="I" x1="106.335" y1="55.95" x2="126.084" y2="44.547" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#CFCECE"/>
+      <stop offset=".695" stop-color="#E9E9E9"/>
+    </linearGradient>
+    <linearGradient id="J" x1="135.791" y1="55.95" x2="155.54" y2="44.547" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#2B6CB0"/>
+      <stop offset=".695" stop-color="#4C95E2"/>
+    </linearGradient>
+    <linearGradient id="K" x1="122.267" y1="13.867" x2="127.104" y2="18.705" gradientUnits="userSpaceOnUse">
+      <stop offset=".333" stop-color="#836C3F"/>
+      <stop offset="1" stop-color="#9D8351"/>
+    </linearGradient>
+    <linearGradient id="L" x1="139.574" y1="13.867" x2="134.737" y2="18.705" gradientUnits="userSpaceOnUse">
+      <stop offset=".333" stop-color="#836C3F"/>
+      <stop offset="1" stop-color="#9D8351"/>
+    </linearGradient>
+    <linearGradient id="M" x1="65.987" y1="22.564" x2="65.987" y2="63.436" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E0EEFF"/>
+      <stop offset="1" stop-color="#F8FBFF"/>
+    </linearGradient>
+    <linearGradient id="N" x1="84.585" y1="4.192" x2="119.845" y2="4.192" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E0EEFF"/>
+      <stop offset="1" stop-color="#F8FBFF"/>
+    </linearGradient>
+    <linearGradient id="O" x1="50.078" y1="63.425" x2="84.585" y2="63.425" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D1E5FE"/>
+      <stop offset="1" stop-color="#F8FBFF"/>
+    </linearGradient>
+    <linearGradient id="P" x1="51.905" y1="40.742" x2="117.265" y2="40.742" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#2CB787"/>
+      <stop offset="1" stop-color="#25926B"/>
+    </linearGradient>
+    <linearGradient id="Q" x1="72.969" y1="35.195" x2="67.016" y2="37.192" gradientUnits="userSpaceOnUse">
+      <stop offset=".28" stop-color="#DE8232"/>
+      <stop offset=".902" stop-color="#AC5B14"/>
+    </linearGradient>
+    <linearGradient id="R" x1="96.158" y1="35.195" x2="102.11" y2="37.192" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#C46E22"/>
+      <stop offset=".902" stop-color="#F7A45A"/>
+    </linearGradient>
+    <linearGradient id="S" x1="84.652" y1="33.087" x2="84.652" y2="82.563" gradientUnits="userSpaceOnUse">
+      <stop offset=".4" stop-color="#F6A359"/>
+      <stop offset=".925" stop-color="#DE813D"/>
+    </linearGradient>
+    <linearGradient id="T" x1="84.652" y1="33.087" x2="84.652" y2="82.563" gradientUnits="userSpaceOnUse">
+      <stop offset=".4" stop-color="#F6A359"/>
+      <stop offset=".925" stop-color="#DE813D"/>
+    </linearGradient>
+    <linearGradient id="U" x1="71.752" y1="81.316" x2="71.752" y2="34.174" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#C26A2A"/>
+      <stop offset=".47" stop-color="#DF823E"/>
+    </linearGradient>
+    <linearGradient id="V" x1="71.752" y1="81.316" x2="71.752" y2="34.174" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#C26A2A"/>
+      <stop offset=".47" stop-color="#DF823E"/>
+    </linearGradient>
+    <linearGradient id="Y" x1="84.585" y1="9.926" x2="86.545" y2="28.098" gradientUnits="userSpaceOnUse">
+      <stop offset=".29" stop-color="#FFDC7A"/>
+      <stop offset="1" stop-color="#FFAC14"/>
+    </linearGradient>
+    <linearGradient id="aa" x1="64.907" y1="19.212" x2="69.316" y2="30.605" gradientUnits="userSpaceOnUse">
+      <stop offset=".29" stop-color="#FFDC7A"/>
+      <stop offset="1" stop-color="#FFAC14"/>
+    </linearGradient>
+    <linearGradient id="ab" x1="64.907" y1="19.212" x2="69.316" y2="30.605" gradientUnits="userSpaceOnUse">
+      <stop offset=".29" stop-color="#FFDC7A"/>
+      <stop offset="1" stop-color="#FFAC14"/>
+    </linearGradient>
+    <linearGradient id="ad" x1="104.418" y1="19.212" x2="100.008" y2="30.605" gradientUnits="userSpaceOnUse">
+      <stop offset=".29" stop-color="#FFDC7A"/>
+      <stop offset="1" stop-color="#FFAC14"/>
+    </linearGradient>
+    <linearGradient id="ae" x1="19.598" y1="22.564" x2="19.598" y2="63.436" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E0EEFF"/>
+      <stop offset="1" stop-color="#F8FBFF"/>
+    </linearGradient>
+    <linearGradient id="af" x1="38.195" y1="4.193" x2="73.455" y2="4.193" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E0EEFF"/>
+      <stop offset="1" stop-color="#F8FBFF"/>
+    </linearGradient>
+    <linearGradient id="ag" x1="3.688" y1="63.425" x2="38.195" y2="63.425" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D1E5FE"/>
+      <stop offset="1" stop-color="#F8FBFF"/>
+    </linearGradient>
+    <linearGradient id="ah" x1="5.567" y1="40.742" x2="70.927" y2="40.742" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D5E8FF"/>
+      <stop offset="1" stop-color="#89BEFF"/>
+    </linearGradient>
+    <linearGradient id="ai" x1="5.567" y1="40.742" x2="70.927" y2="40.742" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D0DCEC"/>
+      <stop offset=".5" stop-color="#A8BCD5"/>
+    </linearGradient>
+    <linearGradient id="aj" x1="41.562" y1="19.848" x2="41.562" y2="78.113" gradientUnits="userSpaceOnUse">
+      <stop offset=".4" stop-color="#F6A359"/>
+      <stop offset=".925" stop-color="#DE813D"/>
+    </linearGradient>
+    <linearGradient id="ak" x1="41.614" y1="22.683" x2="41.614" y2="78.113" gradientUnits="userSpaceOnUse">
+      <stop offset=".4" stop-color="#DE813D"/>
+      <stop offset="1" stop-color="#C06E33"/>
+    </linearGradient>
+    <linearGradient id="al" x1="48.891" y1="19.78" x2="48.891" y2="48.913" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFC897"/>
+      <stop offset="1" stop-color="#FFB26D"/>
+    </linearGradient>
+    <linearGradient id="am" x1="55.616" y1="19.867" x2="50.453" y2="26.665" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#C46E22"/>
+      <stop offset=".902" stop-color="#F7A45A"/>
+    </linearGradient>
+    <linearGradient id="an" x1="44.86" y1="55.363" x2="46.971" y2="71.665" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#ED964F"/>
+      <stop offset=".438" stop-color="#E78E48"/>
+    </linearGradient>
+    <filter id="s" x="162.06" y="60.706" width="28.277" height="11.145" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy=".86"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix values="0 0 0 0 0.437494 0 0 0 0 0.5025 0 0 0 0 0.574007 0 0 0 1 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_989_25194"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow_989_25194" result="shape"/>
+    </filter>
+    <filter id="X" x="74.77" y="10.35" width="19.543" height="18.781" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="1.075"/>
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+      <feColorMatrix values="0 0 0 0 1 0 0 0 0 0.890196 0 0 0 0 0.67451 0 0 0 1 0"/>
+      <feBlend in2="shape" result="effect1_innerShadow_989_25194"/>
+    </filter>
+    <filter id="Z" x="60.023" y="19.541" width="12.55" height="12.87" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy=".86"/>
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+      <feColorMatrix values="0 0 0 0 1 0 0 0 0 0.866667 0 0 0 0 0.584314 0 0 0 1 0"/>
+      <feBlend in2="shape" result="effect1_innerShadow_989_25194"/>
+    </filter>
+    <filter id="ac" x="96.967" y="19.756" width="12.12" height="12.44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy=".86"/>
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+      <feColorMatrix values="0 0 0 0 1 0 0 0 0 0.866667 0 0 0 0 0.584314 0 0 0 1 0"/>
+      <feBlend in2="shape" result="effect1_innerShadow_989_25194"/>
+    </filter>
+  </defs>
+</svg>
diff --git a/public/static/capibara/capybaraSprite.png b/public/static/capibara/capybaraSprite.png
new file mode 100644
index 0000000000..a5d6a07ce0
Binary files /dev/null and b/public/static/capibara/capybaraSprite.png differ
diff --git a/public/static/capibara/capybaraSpriteX2.png b/public/static/capibara/capybaraSpriteX2.png
new file mode 100644
index 0000000000..0455a2997f
Binary files /dev/null and b/public/static/capibara/capybaraSpriteX2.png differ
diff --git a/public/static/capibara/index.js b/public/static/capibara/index.js
new file mode 100644
index 0000000000..00d5d13dc7
--- /dev/null
+++ b/public/static/capibara/index.js
@@ -0,0 +1,2648 @@
+// Copyright (c) 2014 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+// extract from chromium source code by @liuwayong
+(function () {
+  'use strict';
+  /**
+   * T-Rex runner.
+   * @param {string} outerContainerId Outer containing element id.
+   * @param {Object} opt_config
+   * @constructor
+   * @export
+   */
+  function Runner(outerContainerId, opt_config) {
+      // Singleton
+      if (Runner.instance_) {
+          return Runner.instance_;
+      }
+      Runner.instance_ = this;
+
+      this.outerContainerEl = document.querySelector(outerContainerId);
+      this.containerEl = null;
+      this.snackbarEl = null;
+      this.detailsButton = this.outerContainerEl.querySelector('#details-button');
+
+      this.config = opt_config || Runner.config;
+
+      this.dimensions = Runner.defaultDimensions;
+
+      this.canvas = null;
+      this.canvasCtx = null;
+
+      this.tRex = null;
+
+      this.distanceMeter = null;
+      this.distanceRan = 0;
+
+      this.highestScore = 0;
+
+      this.time = 0;
+      this.runningTime = 0;
+      this.msPerFrame = 1000 / FPS;
+      this.currentSpeed = this.config.SPEED;
+
+      this.obstacles = [];
+
+      this.activated = false; // Whether the easter egg has been activated.
+      this.playing = false; // Whether the game is currently in play state.
+      this.crashed = false;
+      this.paused = false;
+      this.inverted = false;
+      this.invertTimer = 0;
+      this.resizeTimerId_ = null;
+
+      this.playCount = 0;
+
+      // Sound FX.
+    //   this.audioBuffer = null;
+    //   this.soundFx = {};
+
+      // Global web audio context for playing sounds.
+      this.audioContext = null;
+
+      // Images.
+      this.images = {};
+      this.imagesLoaded = 0;
+
+      this.highScoreReached = false; // Add this new flag
+
+      if (this.isDisabled()) {
+          this.setupDisabledRunner();
+      } else {
+          this.loadImages();
+      }
+  }
+  window['Runner'] = Runner;
+
+
+  /**
+   * Default game width.
+   * @const
+   */
+  var DEFAULT_WIDTH = 600;
+
+  /**
+   * Frames per second.
+   * @const
+   */
+  var FPS = 60;
+
+  /** @const */
+  var IS_HIDPI = 2;
+
+  /** @const */
+  var IS_IOS = /iPad|iPhone|iPod/.test(window.navigator.platform);
+
+  /** @const */
+  var IS_MOBILE = /Android/.test(window.navigator.userAgent) || IS_IOS;
+
+  /** @const */
+  var IS_TOUCH_ENABLED = 'ontouchstart' in window;
+
+  /**
+   * Default game configuration.
+   * @enum {number}
+   */
+  Runner.config = {
+      ACCELERATION: 0.001,
+      BG_CLOUD_SPEED: 0.2,
+      BOTTOM_PAD: 10,
+      CLEAR_TIME: 3000,
+      CLOUD_FREQUENCY: 0.5,
+      GAMEOVER_CLEAR_TIME: 750,
+      GAP_COEFFICIENT: 0.6,
+      GRAVITY: 0.6,
+      INITIAL_JUMP_VELOCITY: 12,
+      INVERT_FADE_DURATION: 12000,
+      INVERT_DISTANCE: 700,
+      MAX_CLOUDS: 6,
+      MAX_OBSTACLE_LENGTH: 3,
+      MAX_OBSTACLE_DUPLICATION: 2,
+      MAX_SPEED: 13,
+      MIN_JUMP_HEIGHT: 35,
+      MOBILE_SPEED_COEFFICIENT: 1.2,
+      RESOURCE_TEMPLATE_ID: 'audio-resources',
+      SPEED: 6,
+      SPEED_DROP_COEFFICIENT: 3
+  };
+
+
+  /**
+   * Default dimensions.
+   * @enum {string}
+   */
+  Runner.defaultDimensions = {
+      WIDTH: DEFAULT_WIDTH,
+      HEIGHT: 150
+  };
+
+
+  /**
+   * CSS class names.
+   * @enum {string}
+   */
+  Runner.classes = {
+      CANVAS: 'runner-canvas',
+      CONTAINER: 'runner-container',
+      CRASHED: 'crashed',
+      INVERTED: 'inverted',
+      SNACKBAR: 'snackbar',
+      SNACKBAR_SHOW: 'snackbar-show',
+      TOUCH_CONTROLLER: 'controller'
+  };
+
+
+  /**
+   * Sprite definition layout of the spritesheet.
+   * @enum {Object}
+   */
+  Runner.spriteDefinition = {
+      LDPI: {
+          CACTUS_LARGE: { x: 332, y: 2 },
+          CACTUS_SMALL: { x: 228, y: 2 },
+          CLOUD: { x: 86, y: 2 },
+          HORIZON: { x: 2, y: 54 },
+          MOON: { x: 484, y: 2 },
+          RESTART: { x: 2, y: 2 },
+          TEXT_SPRITE: { x: 655, y: 2 },
+          TREX: { x: 848, y: 2 },
+          STAR: { x: 645, y: 2 }
+      },
+      HDPI: {
+          CACTUS_LARGE: { x: 652, y: 2 },
+          CACTUS_SMALL: { x: 446, y: 2 },
+          CLOUD: { x: 166, y: 2 },
+          HORIZON: { x: 2, y: 104 },
+          MOON: { x: 954, y: 2 },
+          RESTART: { x: 2, y: 2 },
+          TEXT_SPRITE: { x: 1292, y: 2 },
+          TREX: { x: 1678, y: 2 },
+          STAR: { x: 1276, y: 2 }
+      }
+  };
+
+
+  /**
+   * Key code mapping.
+   * @enum {Object}
+   */
+  Runner.keycodes = {
+      JUMP: { '38': 1, '32': 1 },  // Up, spacebar
+      DUCK: { '40': 1 },  // Down
+      RESTART: { '13': 1 }  // Enter
+  };
+
+
+  /**
+   * Runner event names.
+   * @enum {string}
+   */
+  Runner.events = {
+      ANIM_END: 'webkitAnimationEnd',
+      CLICK: 'click',
+      KEYDOWN: 'keydown',
+      KEYUP: 'keyup',
+      MOUSEDOWN: 'mousedown',
+      MOUSEUP: 'mouseup',
+      RESIZE: 'resize',
+      TOUCHEND: 'touchend',
+      TOUCHSTART: 'touchstart',
+      VISIBILITY: 'visibilitychange',
+      BLUR: 'blur',
+      FOCUS: 'focus',
+      LOAD: 'load'
+  };
+
+
+  Runner.prototype = {
+      /**
+       * Whether the easter egg has been disabled. CrOS enterprise enrolled devices.
+       * @return {boolean}
+       */
+      isDisabled: function () {
+          // return loadTimeData && loadTimeData.valueExists('disabledEasterEgg');
+          return false;
+      },
+
+      /**
+       * For disabled instances, set up a snackbar with the disabled message.
+       */
+      setupDisabledRunner: function () {
+          this.containerEl = document.createElement('div');
+          this.containerEl.className = Runner.classes.SNACKBAR;
+          this.containerEl.textContent = loadTimeData.getValue('disabledEasterEgg');
+          this.outerContainerEl.appendChild(this.containerEl);
+
+          // Show notification when the activation key is pressed.
+          document.addEventListener(Runner.events.KEYDOWN, function (e) {
+              if (Runner.keycodes.JUMP[e.keyCode]) {
+                  this.containerEl.classList.add(Runner.classes.SNACKBAR_SHOW);
+                  document.querySelector('.icon').classList.add('icon-disabled');
+              }
+          }.bind(this));
+      },
+
+      /**
+       * Setting individual settings for debugging.
+       * @param {string} setting
+       * @param {*} value
+       */
+      updateConfigSetting: function (setting, value) {
+          if (setting in this.config && value != undefined) {
+              this.config[setting] = value;
+
+              switch (setting) {
+                  case 'GRAVITY':
+                  case 'MIN_JUMP_HEIGHT':
+                  case 'SPEED_DROP_COEFFICIENT':
+                      this.tRex.config[setting] = value;
+                      break;
+                  case 'INITIAL_JUMP_VELOCITY':
+                      this.tRex.setJumpVelocity(value);
+                      break;
+                  case 'SPEED':
+                      this.setSpeed(value);
+                      break;
+              }
+          }
+      },
+
+      /**
+       * Cache the appropriate image sprite from the page and get the sprite sheet
+       * definition.
+       */
+      loadImages: function () {
+          if (IS_HIDPI) {
+              Runner.imageSprite = document.getElementById('offline-resources-2x');
+              this.spriteDef = Runner.spriteDefinition.HDPI;
+          } else {
+              Runner.imageSprite = document.getElementById('offline-resources-2x');
+              this.spriteDef = Runner.spriteDefinition.LDPI;
+          }
+
+          if (Runner.imageSprite.complete) {
+              this.init();
+          } else {
+              // If the images are not yet loaded, add a listener.
+              Runner.imageSprite.addEventListener(Runner.events.LOAD,
+                  this.init.bind(this));
+          }
+      },
+
+      /**
+       * Load and decode base 64 encoded sounds.
+    //    */
+    //   loadSounds: function () {
+    //       if (!IS_IOS) {
+    //           this.audioContext = new AudioContext();
+
+    //           var resourceTemplate =
+    //               document.getElementById(this.config.RESOURCE_TEMPLATE_ID).content;
+
+    //           for (var sound in Runner.sounds) {
+    //               var soundSrc =
+    //                   resourceTemplate.getElementById(Runner.sounds[sound]).src;
+    //               soundSrc = soundSrc.substr(soundSrc.indexOf(',') + 1);
+    //               var buffer = decodeBase64ToArrayBuffer(soundSrc);
+
+    //               // Async, so no guarantee of order in array.
+    //               this.audioContext.decodeAudioData(buffer, function (index, audioData) {
+    //                   this.soundFx[index] = audioData;
+    //               }.bind(this, sound));
+    //           }
+    //       }
+    //   },
+
+      /**
+       * Sets the game speed. Adjust the speed accordingly if on a smaller screen.
+       * @param {number} opt_speed
+       */
+      setSpeed: function (opt_speed) {
+          var speed = opt_speed || this.currentSpeed;
+
+          // Reduce the speed on smaller mobile screens.
+          if (this.dimensions.WIDTH < DEFAULT_WIDTH) {
+              var mobileSpeed = speed * this.dimensions.WIDTH / DEFAULT_WIDTH *
+                  this.config.MOBILE_SPEED_COEFFICIENT;
+              this.currentSpeed = mobileSpeed > speed ? speed : mobileSpeed;
+          } else if (opt_speed) {
+              this.currentSpeed = opt_speed;
+          }
+      },
+
+      /**
+       * Game initialiser.
+       */
+      init: function () {
+
+          this.adjustDimensions();
+          this.setSpeed();
+
+          this.containerEl = document.createElement('div');
+          this.containerEl.className = Runner.classes.CONTAINER;
+
+          // Player canvas container.
+          this.canvas = createCanvas(this.containerEl, this.dimensions.WIDTH,
+              this.dimensions.HEIGHT, Runner.classes.PLAYER);
+
+          this.canvasCtx = this.canvas.getContext('2d');
+          this.canvasCtx.fillStyle = '#f7f7f7';
+          this.canvasCtx.fill();
+          Runner.updateCanvasScaling(this.canvas);
+
+          // Horizon contains clouds, obstacles and the ground.
+          this.horizon = new Horizon(this.canvas, this.spriteDef, this.dimensions,
+              this.config.GAP_COEFFICIENT);
+
+          // Distance meter
+          this.distanceMeter = new DistanceMeter(this.canvas,
+              this.spriteDef.TEXT_SPRITE, this.dimensions.WIDTH);
+
+          // Draw t-rex
+          this.tRex = new Trex(this.canvas, this.spriteDef.TREX);
+
+          this.outerContainerEl.appendChild(this.containerEl);
+
+          if (IS_MOBILE) {
+              this.createTouchController();
+          }
+
+          this.startListening();
+          this.update();
+
+          window.addEventListener(Runner.events.RESIZE,
+              this.debounceResize.bind(this));
+      },
+
+      /**
+       * Create the touch controller. A div that covers whole screen.
+       */
+      createTouchController: function () {
+          this.touchController = document.createElement('div');
+          this.touchController.className = Runner.classes.TOUCH_CONTROLLER;
+          this.outerContainerEl.appendChild(this.touchController);
+      },
+
+      /**
+       * Debounce the resize event.
+       */
+      debounceResize: function () {
+          if (!this.resizeTimerId_) {
+              this.resizeTimerId_ =
+                  setInterval(this.adjustDimensions.bind(this), 250);
+          }
+      },
+
+      /**
+       * Adjust game space dimensions on resize.
+       */
+      adjustDimensions: function () {
+          clearInterval(this.resizeTimerId_);
+          this.resizeTimerId_ = null;
+
+          var boxStyles = window.getComputedStyle(this.outerContainerEl);
+          var padding = Number(boxStyles.paddingLeft.substr(0,
+              boxStyles.paddingLeft.length - 2));
+
+          this.dimensions.WIDTH = this.outerContainerEl.offsetWidth - padding * 2;
+
+          // Redraw the elements back onto the canvas.
+          if (this.canvas) {
+              this.canvas.width = this.dimensions.WIDTH;
+              this.canvas.height = this.dimensions.HEIGHT;
+
+              Runner.updateCanvasScaling(this.canvas);
+
+              this.distanceMeter.calcXPos(this.dimensions.WIDTH);
+              this.clearCanvas();
+              this.horizon.update(0, 0, true);
+              this.tRex.update(0);
+
+              // Outer container and distance meter.
+              if (this.playing || this.crashed || this.paused) {
+                  this.containerEl.style.width = this.dimensions.WIDTH + 'px';
+                  this.containerEl.style.height = this.dimensions.HEIGHT + 'px';
+                  this.distanceMeter.update(0, Math.ceil(this.distanceRan));
+                  this.stop();
+              } else {
+                  this.tRex.draw(0, 0);
+              }
+
+              // Game over panel.
+              if (this.crashed && this.gameOverPanel) {
+                  this.gameOverPanel.updateDimensions(this.dimensions.WIDTH);
+                  this.gameOverPanel.draw();
+              }
+          }
+      },
+
+      /**
+       * Play the game intro.
+       * Canvas container width expands out to the full width.
+       */
+      playIntro: function () {
+          if (!this.activated && !this.crashed) {
+              this.playingIntro = true;
+              this.tRex.playingIntro = true;
+
+              // CSS animation definition.
+              var keyframes = '@-webkit-keyframes intro { ' +
+                  'from { width:' + Trex.config.WIDTH + 'px }' +
+                  'to { width: ' + this.dimensions.WIDTH + 'px }' +
+                  '}';
+              
+              // create a style sheet to put the keyframe rule in 
+              // and then place the style sheet in the html head    
+              var sheet = document.createElement('style');
+              sheet.innerHTML = keyframes;
+              document.head.appendChild(sheet);
+
+              this.containerEl.addEventListener(Runner.events.ANIM_END,
+                  this.startGame.bind(this));
+
+              this.containerEl.style.webkitAnimation = 'intro .4s ease-out 1 both';
+              this.containerEl.style.width = this.dimensions.WIDTH + 'px';
+
+              // if (this.touchController) {
+              //     this.outerContainerEl.appendChild(this.touchController);
+              // }
+              this.playing = true;
+              this.activated = true;
+          } else if (this.crashed) {
+              this.restart();
+          }
+      },
+
+
+      /**
+       * Update the game status to started.
+       */
+      startGame: function () {
+          this.runningTime = 0;
+          this.playingIntro = false;
+          this.tRex.playingIntro = false;
+          this.containerEl.style.webkitAnimation = '';
+          this.playCount++;
+
+          // Handle tabbing off the page. Pause the current game.
+          document.addEventListener(Runner.events.VISIBILITY,
+              this.onVisibilityChange.bind(this));
+
+          window.addEventListener(Runner.events.BLUR,
+              this.onVisibilityChange.bind(this));
+
+          window.addEventListener(Runner.events.FOCUS,
+              this.onVisibilityChange.bind(this));
+      },
+
+      clearCanvas: function () {
+          this.canvasCtx.clearRect(0, 0, this.dimensions.WIDTH,
+              this.dimensions.HEIGHT);
+      },
+
+      /**
+       * Update the game frame and schedules the next one.
+       */
+      update: function () {
+          this.updatePending = false;
+
+          var now = getTimeStamp();
+          var deltaTime = now - (this.time || now);
+          this.time = now;
+
+          if (this.playing) {
+              this.clearCanvas();
+
+              if (this.tRex.jumping) {
+                  this.tRex.updateJump(deltaTime);
+              }
+
+              this.runningTime += deltaTime;
+              var hasObstacles = this.runningTime > this.config.CLEAR_TIME;
+
+              // First jump triggers the intro.
+              if (this.tRex.jumpCount == 1 && !this.playingIntro) {
+                  this.playIntro();
+              }
+
+              // The horizon doesn't move until the intro is over.
+              if (this.playingIntro) {
+                  this.horizon.update(0, this.currentSpeed, hasObstacles);
+              } else {
+                  deltaTime = !this.activated ? 0 : deltaTime;
+                  this.horizon.update(deltaTime, this.currentSpeed, hasObstacles,
+                      this.inverted);
+              }
+
+              // Check for collisions.
+              var collision = hasObstacles &&
+                  checkForCollision(this.horizon.obstacles[0], this.tRex);
+
+              if (!collision) {
+                  this.distanceRan += this.currentSpeed * deltaTime / this.msPerFrame;
+
+                  if (!this.highScoreReached && this.distanceMeter.getActualDistance(this.distanceRan) >= 1000) {
+                      this.highScoreReached = true;
+                      window.dispatchEvent(new CustomEvent('reachedHighScore', {
+                          detail: { score: this.distanceRan }
+                    }));
+                  }
+
+                  if (this.currentSpeed < this.config.MAX_SPEED) {
+                      this.currentSpeed += this.config.ACCELERATION;
+                  }
+              } else {
+                  this.gameOver();
+              }
+
+              this.distanceMeter.update(deltaTime,
+                  Math.ceil(this.distanceRan));
+
+              // Night mode.
+              if (this.invertTimer > this.config.INVERT_FADE_DURATION) {
+                  this.invertTimer = 0;
+                  this.invertTrigger = false;
+                  this.invert();
+              } else if (this.invertTimer) {
+                  this.invertTimer += deltaTime;
+              } else {
+                  var actualDistance =
+                      this.distanceMeter.getActualDistance(Math.ceil(this.distanceRan));
+
+                  if (actualDistance > 0) {
+                      this.invertTrigger = !(actualDistance %
+                          this.config.INVERT_DISTANCE);
+
+                      if (this.invertTrigger && this.invertTimer === 0) {
+                          this.invertTimer += deltaTime;
+                          this.invert();
+                      }
+                  }
+              }
+          }
+
+          if (this.playing || !this.activated) {
+              this.tRex.update(deltaTime);
+              this.scheduleNextUpdate();
+          }
+      },
+
+      /**
+       * Event handler.
+       */
+      handleEvent: function (e) {
+          return (function (evtType, events) {
+              switch (evtType) {
+                  case events.KEYDOWN:
+                  case events.TOUCHSTART:
+                  case events.MOUSEDOWN:
+                      this.onKeyDown(e);
+                      break;
+                  case events.KEYUP:
+                  case events.TOUCHEND:
+                  case events.MOUSEUP:
+                      this.onKeyUp(e);
+                      break;
+              }
+          }.bind(this))(e.type, Runner.events);
+      },
+
+      /**
+       * Bind relevant key / mouse / touch listeners.
+       */
+      startListening: function () {
+          // Keys.
+          document.addEventListener(Runner.events.KEYDOWN, this);
+          document.addEventListener(Runner.events.KEYUP, this);
+
+          if (IS_MOBILE) {
+              // Mobile only touch devices.
+              this.touchController.addEventListener(Runner.events.TOUCHSTART, this);
+              this.touchController.addEventListener(Runner.events.TOUCHEND, this);
+              this.containerEl.addEventListener(Runner.events.TOUCHSTART, this);
+          } else {
+              // Mouse.
+              document.addEventListener(Runner.events.MOUSEDOWN, this);
+              document.addEventListener(Runner.events.MOUSEUP, this);
+          }
+      },
+
+      /**
+       * Remove all listeners.
+       */
+      stopListening: function () {
+          document.removeEventListener(Runner.events.KEYDOWN, this);
+          document.removeEventListener(Runner.events.KEYUP, this);
+
+          if (IS_MOBILE) {
+              this.touchController.removeEventListener(Runner.events.TOUCHSTART, this);
+              this.touchController.removeEventListener(Runner.events.TOUCHEND, this);
+              this.containerEl.removeEventListener(Runner.events.TOUCHSTART, this);
+          } else {
+              document.removeEventListener(Runner.events.MOUSEDOWN, this);
+              document.removeEventListener(Runner.events.MOUSEUP, this);
+          }
+      },
+
+      /**
+       * Process keydown.
+       * @param {Event} e
+       */
+      onKeyDown: function (e) {
+          // Prevent native page scrolling whilst tapping on mobile.
+          if (this.playing) {
+              e.preventDefault();
+          }
+
+          if (e.target != this.detailsButton) {
+              if (!this.crashed && (Runner.keycodes.JUMP[e.keyCode] ||
+                  e.type == Runner.events.TOUCHSTART)) {
+                  if (!this.playing) {
+                    //   this.loadSounds();
+                      this.playing = true;
+                      this.update();
+                      if (window.errorPageController) {
+                          errorPageController.trackEasterEgg();
+                      }
+                  }
+                  //  Play sound effect and jump on starting the game for the first time.
+                  if (!this.tRex.jumping && !this.tRex.ducking) {
+                    //   this.playSound(this.soundFx.BUTTON_PRESS);
+                      this.tRex.startJump(this.currentSpeed);
+                  }
+              }
+
+              if (this.crashed && e.type == Runner.events.TOUCHSTART &&
+                  e.currentTarget == this.containerEl) {
+                  this.restart();
+              }
+          }
+
+          if (this.playing && !this.crashed && Runner.keycodes.DUCK[e.keyCode]) {
+              e.preventDefault();
+              if (this.tRex.jumping) {
+                  // Speed drop, activated only when jump key is not pressed.
+                  this.tRex.setSpeedDrop();
+              }
+          }
+      },
+
+
+      /**
+       * Process key up.
+       * @param {Event} e
+       */
+      onKeyUp: function (e) {
+          var keyCode = String(e.keyCode);
+          var isjumpKey = Runner.keycodes.JUMP[keyCode] ||
+              e.type == Runner.events.TOUCHEND ||
+              e.type == Runner.events.MOUSEDOWN;
+
+          if (this.isRunning() && isjumpKey) {
+              this.tRex.endJump();
+          } else if (Runner.keycodes.DUCK[keyCode]) {
+              this.tRex.speedDrop = false;
+          } else if (this.crashed) {
+              // Check that enough time has elapsed before allowing jump key to restart.
+              var deltaTime = getTimeStamp() - this.time;
+
+              if (Runner.keycodes.RESTART[keyCode] || this.isLeftClickOnCanvas(e) ||
+                  (deltaTime >= this.config.GAMEOVER_CLEAR_TIME &&
+                      Runner.keycodes.JUMP[keyCode])) {
+                  this.restart();
+              }
+          } else if (this.paused && isjumpKey) {
+              // Reset the jump state
+              this.tRex.reset();
+              this.play();
+          }
+      },
+
+      /**
+       * Returns whether the event was a left click on canvas.
+       * On Windows right click is registered as a click.
+       * @param {Event} e
+       * @return {boolean}
+       */
+      isLeftClickOnCanvas: function (e) {
+          return e.button != null && e.button < 2 &&
+              e.type == Runner.events.MOUSEUP && e.target == this.canvas;
+      },
+
+      /**
+       * RequestAnimationFrame wrapper.
+       */
+      scheduleNextUpdate: function () {
+          if (!this.updatePending) {
+              this.updatePending = true;
+              this.raqId = requestAnimationFrame(this.update.bind(this));
+          }
+      },
+
+      /**
+       * Whether the game is running.
+       * @return {boolean}
+       */
+      isRunning: function () {
+          return !!this.raqId;
+      },
+
+      /**
+       * Game over state.
+       */
+      gameOver: function () {
+        //   this.playSound(this.soundFx.HIT);
+          vibrate(200);
+
+          this.stop();
+          this.crashed = true;
+          this.distanceMeter.acheivement = false;
+
+          this.tRex.update(100, Trex.status.CRASHED);
+
+          // Game over panel.
+          if (!this.gameOverPanel) {
+              this.gameOverPanel = new GameOverPanel(this.canvas,
+                  this.spriteDef.TEXT_SPRITE, this.spriteDef.RESTART,
+                  this.dimensions);
+          } else {
+              this.gameOverPanel.draw();
+          }
+
+          // Update the high score.
+          if (this.distanceRan > this.highestScore) {
+              this.highestScore = Math.ceil(this.distanceRan);
+              this.distanceMeter.setHighScore(this.highestScore);
+          }
+
+          // Reset the time clock.
+          this.time = getTimeStamp();
+      },
+
+      stop: function () {
+          this.playing = false;
+          this.paused = true;
+          cancelAnimationFrame(this.raqId);
+          this.raqId = 0;
+      },
+
+      play: function () {
+          if (!this.crashed) {
+              this.playing = true;
+              this.paused = false;
+              this.tRex.update(0, Trex.status.RUNNING);
+              this.time = getTimeStamp();
+              this.update();
+          }
+      },
+
+      restart: function () {
+          if (!this.raqId) {
+              this.playCount++;
+              this.runningTime = 0;
+              this.playing = true;
+              this.crashed = false;
+              this.distanceRan = 0;
+              this.setSpeed(this.config.SPEED);
+              this.time = getTimeStamp();
+              this.containerEl.classList.remove(Runner.classes.CRASHED);
+              this.clearCanvas();
+              this.distanceMeter.reset(this.highestScore);
+              this.horizon.reset();
+              this.tRex.reset();
+            //   this.playSound(this.soundFx.BUTTON_PRESS);
+              this.invert(true);
+              this.update();
+          }
+      },
+
+      /**
+       * Pause the game if the tab is not in focus.
+       */
+      onVisibilityChange: function (e) {
+          if (document.hidden || document.webkitHidden || e.type == 'blur' ||
+              document.visibilityState != 'visible') {
+              this.stop();
+          } else if (!this.crashed) {
+              this.tRex.reset();
+              this.play();
+          }
+      },
+
+    //   /**
+    //    * Play a sound.
+    //    * @param {SoundBuffer} soundBuffer
+    //    */
+    //   playSound: function (soundBuffer) {
+    //       if (soundBuffer) {
+    //           var sourceNode = this.audioContext.createBufferSource();
+    //           sourceNode.buffer = soundBuffer;
+    //           sourceNode.connect(this.audioContext.destination);
+    //           sourceNode.start(0);
+    //       }
+    //   },
+
+      /**
+       * Inverts the current page / canvas colors.
+       * @param {boolean} Whether to reset colors.
+       */
+      invert: function (reset) {
+          if (reset) {
+              document.body.classList.toggle(Runner.classes.INVERTED, false);
+              this.invertTimer = 0;
+              this.inverted = false;
+          } else {
+              this.inverted = document.body.classList.toggle(Runner.classes.INVERTED,
+                  this.invertTrigger);
+          }
+      }
+  };
+
+
+  /**
+   * Updates the canvas size taking into
+   * account the backing store pixel ratio and
+   * the device pixel ratio.
+   *
+   * See article by Paul Lewis:
+   * http://www.html5rocks.com/en/tutorials/canvas/hidpi/
+   *
+   * @param {HTMLCanvasElement} canvas
+   * @param {number} opt_width
+   * @param {number} opt_height
+   * @return {boolean} Whether the canvas was scaled.
+   */
+  Runner.updateCanvasScaling = function (canvas, opt_width, opt_height) {
+      var context = canvas.getContext('2d');
+
+      // Query the various pixel ratios
+      var devicePixelRatio = Math.floor(window.devicePixelRatio) || 1;
+      var backingStoreRatio = Math.floor(context.webkitBackingStorePixelRatio) || 1;
+      var ratio = devicePixelRatio / backingStoreRatio;
+
+      // Upscale the canvas if the two ratios don't match
+      if (devicePixelRatio !== backingStoreRatio) {
+          var oldWidth = opt_width || canvas.width;
+          var oldHeight = opt_height || canvas.height;
+
+          canvas.width = oldWidth * ratio;
+          canvas.height = oldHeight * ratio;
+
+          canvas.style.width = oldWidth + 'px';
+          canvas.style.height = oldHeight + 'px';
+
+          // Scale the context to counter the fact that we've manually scaled
+          // our canvas element.
+          context.scale(ratio, ratio);
+          return true;
+      } else if (devicePixelRatio == 1) {
+          // Reset the canvas width / height. Fixes scaling bug when the page is
+          // zoomed and the devicePixelRatio changes accordingly.
+          canvas.style.width = canvas.width + 'px';
+          canvas.style.height = canvas.height + 'px';
+      }
+      return false;
+  };
+
+
+  /**
+   * Get random number.
+   * @param {number} min
+   * @param {number} max
+   * @param {number}
+   */
+  function getRandomNum(min, max) {
+      return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+
+
+  /**
+   * Vibrate on mobile devices.
+   * @param {number} duration Duration of the vibration in milliseconds.
+   */
+  function vibrate(duration) {
+      if (IS_MOBILE && window.navigator.vibrate) {
+          window.navigator.vibrate(duration);
+      }
+  }
+
+
+  /**
+   * Create canvas element.
+   * @param {HTMLElement} container Element to append canvas to.
+   * @param {number} width
+   * @param {number} height
+   * @param {string} opt_classname
+   * @return {HTMLCanvasElement}
+   */
+  function createCanvas(container, width, height, opt_classname) {
+      var canvas = document.createElement('canvas');
+      canvas.className = opt_classname ? Runner.classes.CANVAS + ' ' +
+          opt_classname : Runner.classes.CANVAS;
+      canvas.width = width;
+      canvas.height = height;
+      container.appendChild(canvas);
+
+      return canvas;
+  }
+
+
+  /**
+   * Decodes the base 64 audio to ArrayBuffer used by Web Audio.
+   * @param {string} base64String
+   */
+  function decodeBase64ToArrayBuffer(base64String) {
+      var len = (base64String.length / 4) * 3;
+      var str = atob(base64String);
+      var arrayBuffer = new ArrayBuffer(len);
+      var bytes = new Uint8Array(arrayBuffer);
+
+      for (var i = 0; i < len; i++) {
+          bytes[i] = str.charCodeAt(i);
+      }
+      return bytes.buffer;
+  }
+
+
+  /**
+   * Return the current timestamp.
+   * @return {number}
+   */
+  function getTimeStamp() {
+      return IS_IOS ? new Date().getTime() : performance.now();
+  }
+
+
+  //******************************************************************************
+
+
+  /**
+   * Game over panel.
+   * @param {!HTMLCanvasElement} canvas
+   * @param {Object} textImgPos
+   * @param {Object} restartImgPos
+   * @param {!Object} dimensions Canvas dimensions.
+   * @constructor
+   */
+  function GameOverPanel(canvas, textImgPos, restartImgPos, dimensions) {
+      this.canvas = canvas;
+      this.canvasCtx = canvas.getContext('2d');
+      this.canvasDimensions = dimensions;
+      this.textImgPos = textImgPos;
+      this.restartImgPos = restartImgPos;
+      this.draw();
+  };
+
+
+  /**
+   * Dimensions used in the panel.
+   * @enum {number}
+   */
+  GameOverPanel.dimensions = {
+      TEXT_X: 0,
+      TEXT_Y: 13,
+      TEXT_WIDTH: 191,
+      TEXT_HEIGHT: 11,
+      RESTART_WIDTH: 36,
+      RESTART_HEIGHT: 32
+  };
+
+
+  GameOverPanel.prototype = {
+      /**
+       * Update the panel dimensions.
+       * @param {number} width New canvas width.
+       * @param {number} opt_height Optional new canvas height.
+       */
+      updateDimensions: function (width, opt_height) {
+          this.canvasDimensions.WIDTH = width;
+          if (opt_height) {
+              this.canvasDimensions.HEIGHT = opt_height;
+          }
+      },
+
+      /**
+       * Draw the panel.
+       */
+      draw: function () {
+          var dimensions = GameOverPanel.dimensions;
+
+          var centerX = this.canvasDimensions.WIDTH / 2;
+
+          // Game over text.
+          var textSourceX = dimensions.TEXT_X;
+          var textSourceY = dimensions.TEXT_Y;
+          var textSourceWidth = dimensions.TEXT_WIDTH;
+          var textSourceHeight = dimensions.TEXT_HEIGHT;
+
+          var textTargetX = Math.round(centerX - (dimensions.TEXT_WIDTH / 2));
+          var textTargetY = Math.round((this.canvasDimensions.HEIGHT - 25) / 3);
+          var textTargetWidth = dimensions.TEXT_WIDTH;
+          var textTargetHeight = dimensions.TEXT_HEIGHT;
+
+          var restartSourceWidth = dimensions.RESTART_WIDTH;
+          var restartSourceHeight = dimensions.RESTART_HEIGHT;
+          var restartTargetX = centerX - (dimensions.RESTART_WIDTH / 2);
+          var restartTargetY = this.canvasDimensions.HEIGHT / 2;
+
+          if (IS_HIDPI) {
+              textSourceY *= 2;
+              textSourceX *= 2;
+              textSourceWidth *= 2;
+              textSourceHeight *= 2;
+              restartSourceWidth *= 2;
+              restartSourceHeight *= 2;
+          }
+
+          textSourceX += this.textImgPos.x;
+          textSourceY += this.textImgPos.y;
+
+          // Game over text from sprite.
+          this.canvasCtx.drawImage(Runner.imageSprite,
+              textSourceX, textSourceY, textSourceWidth, textSourceHeight,
+              textTargetX, textTargetY, textTargetWidth, textTargetHeight);
+
+          // Restart button.
+          this.canvasCtx.drawImage(Runner.imageSprite,
+              this.restartImgPos.x, this.restartImgPos.y,
+              restartSourceWidth, restartSourceHeight,
+              restartTargetX, restartTargetY, dimensions.RESTART_WIDTH,
+              dimensions.RESTART_HEIGHT);
+      }
+  };
+
+
+  //******************************************************************************
+
+  /**
+   * Check for a collision.
+   * @param {!Obstacle} obstacle
+   * @param {!Trex} tRex T-rex object.
+   * @param {HTMLCanvasContext} opt_canvasCtx Optional canvas context for drawing
+   *    collision boxes.
+   * @return {Array<CollisionBox>}
+   */
+  function checkForCollision(obstacle, tRex, opt_canvasCtx) {
+      var obstacleBoxXPos = Runner.defaultDimensions.WIDTH + obstacle.xPos;
+
+      // Adjustments are made to the bounding box as there is a 1 pixel white
+      // border around the t-rex and obstacles.
+      var tRexBox = new CollisionBox(
+          tRex.xPos + 1,
+          tRex.yPos + 1,
+          tRex.config.WIDTH - 2,
+          tRex.config.HEIGHT - 2);
+
+      var obstacleBox = new CollisionBox(
+          obstacle.xPos + 1,
+          obstacle.yPos + 1,
+          obstacle.typeConfig.width * obstacle.size - 2,
+          obstacle.typeConfig.height - 2);
+
+      // Debug outer box
+      if (opt_canvasCtx) {
+          drawCollisionBoxes(opt_canvasCtx, tRexBox, obstacleBox);
+      }
+
+      // Simple outer bounds check.
+      if (boxCompare(tRexBox, obstacleBox)) {
+          var collisionBoxes = obstacle.collisionBoxes;
+          var tRexCollisionBoxes = Trex.collisionBoxes.RUNNING;
+
+          // Detailed axis aligned box check.
+          for (var t = 0; t < tRexCollisionBoxes.length; t++) {
+              for (var i = 0; i < collisionBoxes.length; i++) {
+                  // Adjust the box to actual positions.
+                  var adjTrexBox =
+                      createAdjustedCollisionBox(tRexCollisionBoxes[t], tRexBox);
+                  var adjObstacleBox =
+                      createAdjustedCollisionBox(collisionBoxes[i], obstacleBox);
+                  var crashed = boxCompare(adjTrexBox, adjObstacleBox);
+
+                  // Draw boxes for debug.
+                  if (opt_canvasCtx) {
+                      drawCollisionBoxes(opt_canvasCtx, adjTrexBox, adjObstacleBox);
+                  }
+
+                  if (crashed) {
+                      return [adjTrexBox, adjObstacleBox];
+                  }
+              }
+          }
+      }
+      return false;
+  };
+
+
+  /**
+   * Adjust the collision box.
+   * @param {!CollisionBox} box The original box.
+   * @param {!CollisionBox} adjustment Adjustment box.
+   * @return {CollisionBox} The adjusted collision box object.
+   */
+  function createAdjustedCollisionBox(box, adjustment) {
+      return new CollisionBox(
+          box.x + adjustment.x,
+          box.y + adjustment.y,
+          box.width,
+          box.height);
+  };
+
+
+  /**
+   * Draw the collision boxes for debug.
+   */
+  function drawCollisionBoxes(canvasCtx, tRexBox, obstacleBox) {
+      canvasCtx.save();
+      canvasCtx.strokeStyle = '#f00';
+      canvasCtx.strokeRect(tRexBox.x, tRexBox.y, tRexBox.width, tRexBox.height);
+
+      canvasCtx.strokeStyle = '#0f0';
+      canvasCtx.strokeRect(obstacleBox.x, obstacleBox.y,
+          obstacleBox.width, obstacleBox.height);
+      canvasCtx.restore();
+  };
+
+
+  /**
+   * Compare two collision boxes for a collision.
+   * @param {CollisionBox} tRexBox
+   * @param {CollisionBox} obstacleBox
+   * @return {boolean} Whether the boxes intersected.
+   */
+  function boxCompare(tRexBox, obstacleBox) {
+      var crashed = false;
+      var tRexBoxX = tRexBox.x;
+      var tRexBoxY = tRexBox.y;
+
+      var obstacleBoxX = obstacleBox.x;
+      var obstacleBoxY = obstacleBox.y;
+
+      // Axis-Aligned Bounding Box method.
+      if (tRexBox.x < obstacleBoxX + obstacleBox.width &&
+          tRexBox.x + tRexBox.width > obstacleBoxX &&
+          tRexBox.y < obstacleBox.y + obstacleBox.height &&
+          tRexBox.height + tRexBox.y > obstacleBox.y) {
+          crashed = true;
+      }
+
+      return crashed;
+  };
+
+
+  //******************************************************************************
+
+  /**
+   * Collision box object.
+   * @param {number} x X position.
+   * @param {number} y Y Position.
+   * @param {number} w Width.
+   * @param {number} h Height.
+   */
+  function CollisionBox(x, y, w, h) {
+      this.x = x;
+      this.y = y;
+      this.width = w;
+      this.height = h;
+  };
+
+
+  //******************************************************************************
+
+  /**
+   * Obstacle.
+   * @param {HTMLCanvasCtx} canvasCtx
+   * @param {Obstacle.type} type
+   * @param {Object} spritePos Obstacle position in sprite.
+   * @param {Object} dimensions
+   * @param {number} gapCoefficient Mutipler in determining the gap.
+   * @param {number} speed
+   * @param {number} opt_xOffset
+   */
+  function Obstacle(canvasCtx, type, spriteImgPos, dimensions,
+      gapCoefficient, speed, opt_xOffset) {
+
+      this.canvasCtx = canvasCtx;
+      this.spritePos = spriteImgPos;
+      this.typeConfig = type;
+      this.gapCoefficient = gapCoefficient;
+      this.size = getRandomNum(1, Obstacle.MAX_OBSTACLE_LENGTH);
+      this.dimensions = dimensions;
+      this.remove = false;
+      this.xPos = dimensions.WIDTH + (opt_xOffset || 0);
+      this.yPos = 0;
+      this.width = 0;
+      this.collisionBoxes = [];
+      this.gap = 0;
+      this.speedOffset = 0;
+
+      // For animated obstacles.
+      this.currentFrame = 0;
+      this.timer = 0;
+
+      this.init(speed);
+  };
+
+  /**
+   * Coefficient for calculating the maximum gap.
+   * @const
+   */
+  Obstacle.MAX_GAP_COEFFICIENT = 1.5;
+
+  /**
+   * Maximum obstacle grouping count.
+   * @const
+   */
+  Obstacle.MAX_OBSTACLE_LENGTH = 3,
+
+
+      Obstacle.prototype = {
+          /**
+           * Initialise the DOM for the obstacle.
+           * @param {number} speed
+           */
+          init: function (speed) {
+              this.cloneCollisionBoxes();
+
+              // Only allow sizing if we're at the right speed.
+              if (this.size > 1 && this.typeConfig.multipleSpeed > speed) {
+                  this.size = 1;
+              }
+
+              this.width = this.typeConfig.width * this.size;
+
+              // Check if obstacle can be positioned at various heights.
+              if (Array.isArray(this.typeConfig.yPos)) {
+                  var yPosConfig = IS_MOBILE ? this.typeConfig.yPosMobile :
+                      this.typeConfig.yPos;
+                  this.yPos = yPosConfig[getRandomNum(0, yPosConfig.length - 1)];
+              } else {
+                  this.yPos = this.typeConfig.yPos;
+              }
+
+              this.draw();
+
+              // Make collision box adjustments,
+              // Central box is adjusted to the size as one box.
+              //      ____        ______        ________
+              //    _|   |-|    _|     |-|    _|       |-|
+              //   | |<->| |   | |<--->| |   | |<----->| |
+              //   | | 1 | |   | |  2  | |   | |   3   | |
+              //   |_|___|_|   |_|_____|_|   |_|_______|_|
+              //
+              if (this.size > 1) {
+                  this.collisionBoxes[1].width = this.width - this.collisionBoxes[0].width -
+                      this.collisionBoxes[2].width;
+                  this.collisionBoxes[2].x = this.width - this.collisionBoxes[2].width;
+              }
+
+              // For obstacles that go at a different speed from the horizon.
+              if (this.typeConfig.speedOffset) {
+                  this.speedOffset = Math.random() > 0.5 ? this.typeConfig.speedOffset :
+                      -this.typeConfig.speedOffset;
+              }
+
+              this.gap = this.getGap(this.gapCoefficient, speed);
+          },
+
+          /**
+           * Draw and crop based on size.
+           */
+          draw: function () {
+              var sourceWidth = this.typeConfig.width;
+              var sourceHeight = this.typeConfig.height;
+
+              if (IS_HIDPI) {
+                  sourceWidth = sourceWidth * 2;
+                  sourceHeight = sourceHeight * 2;
+              }
+
+              // X position in sprite.
+              var sourceX = (sourceWidth * this.size) * (0.5 * (this.size - 1)) +
+                  this.spritePos.x;
+
+              // Animation frames.
+              if (this.currentFrame > 0) {
+                  sourceX += sourceWidth * this.currentFrame;
+              }
+
+              this.canvasCtx.drawImage(Runner.imageSprite,
+                  sourceX, this.spritePos.y,
+                  sourceWidth * this.size, sourceHeight,
+                  this.xPos, this.yPos,
+                  this.typeConfig.width * this.size, this.typeConfig.height);
+          },
+
+          /**
+           * Obstacle frame update.
+           * @param {number} deltaTime
+           * @param {number} speed
+           */
+          update: function (deltaTime, speed) {
+              if (!this.remove) {
+                  if (this.typeConfig.speedOffset) {
+                      speed += this.speedOffset;
+                  }
+                  this.xPos -= Math.floor((speed * FPS / 1000) * deltaTime);
+
+                  // Update frame
+                  if (this.typeConfig.numFrames) {
+                      this.timer += deltaTime;
+                      if (this.timer >= this.typeConfig.frameRate) {
+                          this.currentFrame =
+                              this.currentFrame == this.typeConfig.numFrames - 1 ?
+                                  0 : this.currentFrame + 1;
+                          this.timer = 0;
+                      }
+                  }
+                  this.draw();
+
+                  if (!this.isVisible()) {
+                      this.remove = true;
+                  }
+              }
+          },
+
+          /**
+           * Calculate a random gap size.
+           * - Minimum gap gets wider as speed increses
+           * @param {number} gapCoefficient
+           * @param {number} speed
+           * @return {number} The gap size.
+           */
+          getGap: function (gapCoefficient, speed) {
+              var minGap = Math.round(this.width * speed +
+                  this.typeConfig.minGap * gapCoefficient);
+              var maxGap = Math.round(minGap * Obstacle.MAX_GAP_COEFFICIENT);
+              return getRandomNum(minGap, maxGap);
+          },
+
+          /**
+           * Check if obstacle is visible.
+           * @return {boolean} Whether the obstacle is in the game area.
+           */
+          isVisible: function () {
+              return this.xPos + this.width > 0;
+          },
+
+          /**
+           * Make a copy of the collision boxes, since these will change based on
+           * obstacle type and size.
+           */
+          cloneCollisionBoxes: function () {
+              var collisionBoxes = this.typeConfig.collisionBoxes;
+
+              for (var i = collisionBoxes.length - 1; i >= 0; i--) {
+                  this.collisionBoxes[i] = new CollisionBox(collisionBoxes[i].x,
+                      collisionBoxes[i].y, collisionBoxes[i].width,
+                      collisionBoxes[i].height);
+              }
+          }
+      };
+
+
+  /**
+   * Obstacle definitions.
+   * minGap: minimum pixel space betweeen obstacles.
+   * multipleSpeed: Speed at which multiples are allowed.
+   * speedOffset: speed faster / slower than the horizon.
+   * minSpeed: Minimum speed which the obstacle can make an appearance.
+   */
+  Obstacle.types = [
+      {
+          type: 'CACTUS_SMALL',
+          width: 17,
+          height: 35,
+          yPos: 105,
+          multipleSpeed: 4,
+          minGap: 120,
+          minSpeed: 0,
+          collisionBoxes: [
+              new CollisionBox(0, 7, 5, 27),
+              new CollisionBox(4, 0, 6, 34),
+              new CollisionBox(10, 4, 7, 14)
+          ]
+      },
+      {
+          type: 'CACTUS_LARGE',
+          width: 25,
+          height: 50,
+          yPos: 90,
+          multipleSpeed: 7,
+          minGap: 120,
+          minSpeed: 0,
+          collisionBoxes: [
+              new CollisionBox(0, 12, 7, 38),
+              new CollisionBox(8, 0, 7, 49),
+              new CollisionBox(13, 10, 10, 38)
+          ]
+      },
+  ];
+
+
+  //******************************************************************************
+  /**
+   * T-rex game character.
+   * @param {HTMLCanvas} canvas
+   * @param {Object} spritePos Positioning within image sprite.
+   * @constructor
+   */
+  function Trex(canvas, spritePos) {
+      this.canvas = canvas;
+      this.canvasCtx = canvas.getContext('2d');
+      this.spritePos = spritePos;
+      this.xPos = 0;
+      this.yPos = 0;
+      // Position when on the ground.
+      this.groundYPos = 0;
+      this.currentFrame = 0;
+      this.currentAnimFrames = [];
+      this.blinkDelay = 0;
+      this.blinkCount = 0;
+      this.animStartTime = 0;
+      this.timer = 0;
+      this.msPerFrame = 1000 / FPS;
+      this.config = Trex.config;
+      // Current status.
+      this.status = Trex.status.WAITING;
+
+      this.jumping = false;
+      this.jumpVelocity = 0;
+      this.reachedMinHeight = false;
+      this.speedDrop = false;
+      this.jumpCount = 0;
+      this.jumpspotX = 0;
+
+      this.init();
+  };
+
+
+  /**
+   * T-rex player config.
+   * @enum {number}
+   */
+  Trex.config = {
+      DROP_VELOCITY: -5,
+      GRAVITY: 0.6,
+      HEIGHT: 47,
+      INIITAL_JUMP_VELOCITY: -10,
+      INTRO_DURATION: 1500,
+      MAX_JUMP_HEIGHT: 30,
+      MIN_JUMP_HEIGHT: 30,
+      SPEED_DROP_COEFFICIENT: 3,
+      SPRITE_WIDTH: 262,
+      START_X_POS: 50,
+      WIDTH: 42,
+      WIDTH_RUNNING: 50
+  };
+
+
+  /**
+   * Used in collision detection.
+   * @type {Array<CollisionBox>}
+   */
+  Trex.collisionBoxes = {
+      RUNNING: [
+          new CollisionBox(22, 0, 17, 16),
+          new CollisionBox(1, 18, 30, 9),
+          new CollisionBox(10, 35, 14, 8),
+          new CollisionBox(1, 24, 29, 5),
+          new CollisionBox(5, 30, 21, 4),
+          new CollisionBox(9, 34, 15, 4)
+      ]
+  };
+
+
+  /**
+   * Animation states.
+   * @enum {string}
+   */
+  Trex.status = {
+      CRASHED: 'CRASHED',
+      JUMPING: 'JUMPING',
+      RUNNING: 'RUNNING',
+      WAITING: 'WAITING'
+  };
+
+  /**
+   * Blinking coefficient.
+   * @const
+   */
+  Trex.BLINK_TIMING = 500;
+
+
+  /**
+   * Animation config for different states.
+   * @enum {Object}
+   */
+  Trex.animFrames = {
+      WAITING: {
+          frames: [43.5, 0],
+          msPerFrame: 1000 / 3
+      },
+      RUNNING: {
+          frames: [88, 140],
+          msPerFrame: 1000 / 12
+      },
+      CRASHED: {
+          frames: [190, 234],
+          msPerFrame: 1000 / 60
+      },
+      JUMPING: {
+          frames: [88],
+          msPerFrame: 1000 / 60
+      },
+  };
+
+
+  Trex.prototype = {
+      /**
+       * T-rex player initaliser.
+       * Sets the t-rex to blink at random intervals.
+       */
+      init: function () {
+          this.groundYPos = Runner.defaultDimensions.HEIGHT - this.config.HEIGHT -
+              Runner.config.BOTTOM_PAD;
+          this.yPos = this.groundYPos;
+          this.minJumpHeight = this.groundYPos - this.config.MIN_JUMP_HEIGHT;
+
+          this.draw(0, 0);
+          this.update(0, Trex.status.WAITING);
+      },
+
+      /**
+       * Setter for the jump velocity.
+       * The approriate drop velocity is also set.
+       */
+      setJumpVelocity: function (setting) {
+          this.config.INIITAL_JUMP_VELOCITY = -setting;
+          this.config.DROP_VELOCITY = -setting / 2;
+      },
+
+      /**
+       * Set the animation status.
+       * @param {!number} deltaTime
+       * @param {Trex.status} status Optional status to switch to.
+       */
+      update: function (deltaTime, opt_status) {
+          this.timer += deltaTime;
+
+          // Update the status.
+          if (opt_status) {
+              this.status = opt_status;
+              this.currentFrame = 0;
+              this.msPerFrame = Trex.animFrames[opt_status].msPerFrame;
+              this.currentAnimFrames = Trex.animFrames[opt_status].frames;
+
+              if (opt_status == Trex.status.WAITING) {
+                  this.animStartTime = getTimeStamp();
+                  this.setBlinkDelay();
+              }
+          }
+
+          // Game intro animation, T-rex moves in from the left.
+          if (this.playingIntro && this.xPos < this.config.START_X_POS) {
+              this.xPos += Math.round((this.config.START_X_POS /
+                  this.config.INTRO_DURATION) * deltaTime);
+          }
+
+          if (this.status == Trex.status.WAITING) {
+              this.blink(getTimeStamp());
+          } else {
+              this.draw(this.currentAnimFrames[this.currentFrame], 0);
+          }
+
+          // Update the frame position.
+          if (this.timer >= this.msPerFrame) {
+              this.currentFrame = this.currentFrame ==
+                  this.currentAnimFrames.length - 1 ? 0 : this.currentFrame + 1;
+              this.timer = 0;
+          }
+
+          // Speed drop becomes duck if the down key is still being pressed.
+          if (this.speedDrop && this.yPos == this.groundYPos) {
+              this.speedDrop = false;
+          }
+      },
+
+      /**
+       * Draw the t-rex to a particular position.
+       * @param {number} x
+       * @param {number} y
+       */
+      draw: function (x, y) {
+          var sourceX = x;
+          var sourceY = y;
+          var sourceWidth = this.status === Trex.status.RUNNING || this.status === Trex.status.JUMPING ?
+              this.config.WIDTH_RUNNING : this.config.WIDTH;
+          var sourceHeight = this.config.HEIGHT;
+
+          if (IS_HIDPI) {
+              sourceX *= 2;
+              sourceY *= 2;
+              sourceWidth *= 2;
+              sourceHeight *= 2;
+          }
+
+          // Adjustments for sprite sheet position.
+          sourceX += this.spritePos.x;
+          sourceY += this.spritePos.y;
+
+              // Standing / running
+              this.canvasCtx.drawImage(Runner.imageSprite, sourceX, sourceY,
+                  sourceWidth, sourceHeight,
+                  this.xPos, this.yPos,
+                  this.config.WIDTH, this.config.HEIGHT);
+      },
+
+      /**
+       * Sets a random time for the blink to happen.
+       */
+      setBlinkDelay: function () {
+          this.blinkDelay = Math.ceil(Math.random() * Trex.BLINK_TIMING);
+      },
+
+      /**
+       * Make t-rex blink at random intervals.
+       * @param {number} time Current time in milliseconds.
+       */
+      blink: function (time) {
+          var deltaTime = time - this.animStartTime;
+
+          if (deltaTime >= this.blinkDelay) {
+              this.draw(this.currentAnimFrames[this.currentFrame], 0);
+
+              if (this.currentFrame == 1) {
+                  // Set new random delay to blink.
+                  this.setBlinkDelay();
+                  this.animStartTime = time;
+                  this.blinkCount++;
+              }
+          }
+      },
+
+      /**
+       * Initialise a jump.
+       * @param {number} speed
+       */
+      startJump: function (speed) {
+          if (!this.jumping) {
+              this.update(0, Trex.status.JUMPING);
+              // Tweak the jump velocity based on the speed.
+              this.jumpVelocity = this.config.INIITAL_JUMP_VELOCITY - (speed / 10);
+              this.jumping = true;
+              this.reachedMinHeight = false;
+              this.speedDrop = false;
+          }
+      },
+
+      /**
+       * Jump is complete, falling down.
+       */
+      endJump: function () {
+          if (this.reachedMinHeight &&
+              this.jumpVelocity < this.config.DROP_VELOCITY) {
+              this.jumpVelocity = this.config.DROP_VELOCITY;
+          }
+      },
+
+      /**
+       * Update frame for a jump.
+       * @param {number} deltaTime
+       * @param {number} speed
+       */
+      updateJump: function (deltaTime, speed) {
+          var msPerFrame = Trex.animFrames[this.status].msPerFrame;
+          var framesElapsed = deltaTime / msPerFrame;
+
+          // Speed drop makes Trex fall faster.
+          if (this.speedDrop) {
+              this.yPos += Math.round(this.jumpVelocity *
+                  this.config.SPEED_DROP_COEFFICIENT * framesElapsed);
+          } else {
+              this.yPos += Math.round(this.jumpVelocity * framesElapsed);
+          }
+
+          this.jumpVelocity += this.config.GRAVITY * framesElapsed;
+
+          // Minimum height has been reached.
+          if (this.yPos < this.minJumpHeight || this.speedDrop) {
+              this.reachedMinHeight = true;
+          }
+
+          // Reached max height
+          if (this.yPos < this.config.MAX_JUMP_HEIGHT || this.speedDrop) {
+              this.endJump();
+          }
+
+          // Back down at ground level. Jump completed.
+          if (this.yPos > this.groundYPos) {
+              this.reset();
+              this.jumpCount++;
+          }
+
+          this.update(deltaTime);
+      },
+
+      /**
+       * Set the speed drop. Immediately cancels the current jump.
+       */
+      setSpeedDrop: function () {
+          this.speedDrop = true;
+          this.jumpVelocity = 1;
+      },
+
+      /**
+       * @param {boolean} isDucking.
+       */
+      setDuck: function (isDucking) {
+          if (isDucking && this.status != Trex.status.DUCKING) {
+              this.update(0, Trex.status.DUCKING);
+              this.ducking = true;
+          } else if (this.status == Trex.status.DUCKING) {
+              this.update(0, Trex.status.RUNNING);
+              this.ducking = false;
+          }
+      },
+
+      /**
+       * Reset the t-rex to running at start of game.
+       */
+      reset: function () {
+          this.yPos = this.groundYPos;
+          this.jumpVelocity = 0;
+          this.jumping = false;
+          this.ducking = false;
+          this.update(0, Trex.status.RUNNING);
+          this.midair = false;
+          this.speedDrop = false;
+          this.jumpCount = 0;
+          this.highScoreReached = false;
+      }
+  };
+
+
+  //******************************************************************************
+
+  /**
+   * Handles displaying the distance meter.
+   * @param {!HTMLCanvasElement} canvas
+   * @param {Object} spritePos Image position in sprite.
+   * @param {number} canvasWidth
+   * @constructor
+   */
+  function DistanceMeter(canvas, spritePos, canvasWidth) {
+      this.canvas = canvas;
+      this.canvasCtx = canvas.getContext('2d');
+      this.image = Runner.imageSprite;
+      this.spritePos = spritePos;
+      this.x = 0;
+      this.y = 5;
+
+      this.currentDistance = 0;
+      this.maxScore = 0;
+      this.highScore = 0;
+      this.container = null;
+
+      this.digits = [];
+      this.acheivement = false;
+      this.defaultString = '';
+      this.flashTimer = 0;
+      this.flashIterations = 0;
+      this.invertTrigger = false;
+
+      this.config = DistanceMeter.config;
+      this.maxScoreUnits = this.config.MAX_DISTANCE_UNITS;
+      this.init(canvasWidth);
+  };
+
+
+  /**
+   * @enum {number}
+   */
+  DistanceMeter.dimensions = {
+      WIDTH: 10,
+      HEIGHT: 12,
+      DEST_WIDTH: 11
+  };
+
+
+  /**
+   * Y positioning of the digits in the sprite sheet.
+   * X position is always 0.
+   * @type {Array<number>}
+   */
+  DistanceMeter.yPos = [0, 13, 27, 40, 53, 67, 80, 93, 107, 120];
+
+
+  /**
+   * Distance meter config.
+   * @enum {number}
+   */
+  DistanceMeter.config = {
+      // Number of digits.
+      MAX_DISTANCE_UNITS: 5,
+
+      // Distance that causes achievement animation.
+      ACHIEVEMENT_DISTANCE: 100,
+
+      // Used for conversion from pixel distance to a scaled unit.
+      COEFFICIENT: 0.025,
+
+      // Flash duration in milliseconds.
+      FLASH_DURATION: 1000 / 4,
+
+      // Flash iterations for achievement animation.
+      FLASH_ITERATIONS: 3
+  };
+
+
+  DistanceMeter.prototype = {
+      /**
+       * Initialise the distance meter to '00000'.
+       * @param {number} width Canvas width in px.
+       */
+      init: function (width) {
+          var maxDistanceStr = '';
+
+          this.calcXPos(width);
+          this.maxScore = this.maxScoreUnits;
+          for (var i = 0; i < this.maxScoreUnits; i++) {
+              this.draw(i, 0);
+              this.defaultString += '0';
+              maxDistanceStr += '9';
+          }
+
+          this.maxScore = parseInt(maxDistanceStr);
+      },
+
+      /**
+       * Calculate the xPos in the canvas.
+       * @param {number} canvasWidth
+       */
+      calcXPos: function (canvasWidth) {
+          this.x = canvasWidth - (DistanceMeter.dimensions.DEST_WIDTH *
+              (this.maxScoreUnits + 1));
+      },
+
+      /**
+       * Draw a digit to canvas.
+       * @param {number} digitPos Position of the digit.
+       * @param {number} value Digit value 0-9.
+       * @param {boolean} opt_highScore Whether drawing the high score.
+       */
+      draw: function (digitPos, value, opt_highScore) {
+          var sourceWidth = DistanceMeter.dimensions.WIDTH;
+          var sourceHeight = DistanceMeter.dimensions.HEIGHT;
+          var sourceX = DistanceMeter.dimensions.WIDTH * value;
+          var sourceY = 0;
+
+          var targetX = digitPos * DistanceMeter.dimensions.DEST_WIDTH;
+          var targetY = this.y;
+          var targetWidth = DistanceMeter.dimensions.WIDTH;
+          var targetHeight = DistanceMeter.dimensions.HEIGHT;
+
+          // For high DPI we 2x source values.
+          if (IS_HIDPI) {
+              sourceWidth *= 2;
+              sourceHeight *= 2;
+              sourceX *= 2;
+          }
+
+          sourceX += this.spritePos.x;
+          sourceY += this.spritePos.y;
+
+          this.canvasCtx.save();
+
+          if (opt_highScore) {
+              // Left of the current score.
+              var highScoreX = this.x - (this.maxScoreUnits * 2) *
+                  DistanceMeter.dimensions.WIDTH;
+              this.canvasCtx.translate(highScoreX, this.y);
+          } else {
+              this.canvasCtx.translate(this.x, this.y);
+          }
+
+          this.canvasCtx.drawImage(this.image, sourceX, sourceY,
+              sourceWidth, sourceHeight,
+              targetX, targetY,
+              targetWidth, targetHeight
+          );
+
+          this.canvasCtx.restore();
+      },
+
+      /**
+       * Covert pixel distance to a 'real' distance.
+       * @param {number} distance Pixel distance ran.
+       * @return {number} The 'real' distance ran.
+       */
+      getActualDistance: function (distance) {
+          return distance ? Math.round(distance * this.config.COEFFICIENT) : 0;
+      },
+
+      /**
+       * Update the distance meter.
+       * @param {number} distance
+       * @param {number} deltaTime
+       * @return {boolean} Whether the acheivement sound fx should be played.
+       */
+      update: function (deltaTime, distance) {
+          var paint = true;
+
+          if (!this.acheivement) {
+              distance = this.getActualDistance(distance);
+              // Score has gone beyond the initial digit count.
+              if (distance > this.maxScore && this.maxScoreUnits ==
+                  this.config.MAX_DISTANCE_UNITS) {
+                  this.maxScoreUnits++;
+                  this.maxScore = parseInt(this.maxScore + '9');
+              } else {
+                  this.distance = 0;
+              }
+
+              if (distance > 0) {
+                  // Acheivement unlocked
+                  if (distance % this.config.ACHIEVEMENT_DISTANCE == 0) {
+                      // Flash score and play sound.
+                      this.acheivement = true;
+                      this.flashTimer = 0;
+                    //   playSound = true;
+                  }
+
+                  // Create a string representation of the distance with leading 0.
+                  var distanceStr = (this.defaultString +
+                      distance).substr(-this.maxScoreUnits);
+                  this.digits = distanceStr.split('');
+              } else {
+                  this.digits = this.defaultString.split('');
+              }
+          } else {
+              // Control flashing of the score on reaching acheivement.
+              if (this.flashIterations <= this.config.FLASH_ITERATIONS) {
+                  this.flashTimer += deltaTime;
+
+                  if (this.flashTimer < this.config.FLASH_DURATION) {
+                      paint = false;
+                  } else if (this.flashTimer >
+                      this.config.FLASH_DURATION * 2) {
+                      this.flashTimer = 0;
+                      this.flashIterations++;
+                  }
+              } else {
+                  this.acheivement = false;
+                  this.flashIterations = 0;
+                  this.flashTimer = 0;
+              }
+          }
+
+          // Draw the digits if not flashing.
+          if (paint) {
+              for (var i = this.digits.length - 1; i >= 0; i--) {
+                  this.draw(i, parseInt(this.digits[i]));
+              }
+          }
+
+          this.drawHighScore();
+          return false;
+      },
+
+      /**
+       * Draw the high score.
+       */
+      drawHighScore: function () {
+          this.canvasCtx.save();
+          this.canvasCtx.globalAlpha = .8;
+          for (var i = this.highScore.length - 1; i >= 0; i--) {
+              this.draw(i, parseInt(this.highScore[i], 10), true);
+          }
+          this.canvasCtx.restore();
+      },
+
+      /**
+       * Set the highscore as a array string.
+       * Position of char in the sprite: H - 10, I - 11.
+       * @param {number} distance Distance ran in pixels.
+       */
+      setHighScore: function (distance) {
+          distance = this.getActualDistance(distance);
+          var highScoreStr = (this.defaultString +
+              distance).substr(-this.maxScoreUnits);
+
+          this.highScore = ['10', '11', ''].concat(highScoreStr.split(''));
+      },
+
+      /**
+       * Reset the distance meter back to '00000'.
+       */
+      reset: function () {
+          this.update(0);
+          this.acheivement = false;
+      }
+  };
+
+
+  //******************************************************************************
+
+  /**
+   * Cloud background item.
+   * Similar to an obstacle object but without collision boxes.
+   * @param {HTMLCanvasElement} canvas Canvas element.
+   * @param {Object} spritePos Position of image in sprite.
+   * @param {number} containerWidth
+   */
+  function Cloud(canvas, spritePos, containerWidth) {
+      this.canvas = canvas;
+      this.canvasCtx = this.canvas.getContext('2d');
+      this.spritePos = spritePos;
+      this.containerWidth = containerWidth;
+      this.xPos = containerWidth;
+      this.yPos = 0;
+      this.remove = false;
+      this.cloudGap = getRandomNum(Cloud.config.MIN_CLOUD_GAP,
+          Cloud.config.MAX_CLOUD_GAP);
+
+      this.init();
+  };
+
+
+  /**
+   * Cloud object config.
+   * @enum {number}
+   */
+  Cloud.config = {
+      HEIGHT: 14,
+      MAX_CLOUD_GAP: 400,
+      MAX_SKY_LEVEL: 30,
+      MIN_CLOUD_GAP: 100,
+      MIN_SKY_LEVEL: 71,
+      WIDTH: 46
+  };
+
+
+  Cloud.prototype = {
+      /**
+       * Initialise the cloud. Sets the Cloud height.
+       */
+      init: function () {
+          this.yPos = getRandomNum(Cloud.config.MAX_SKY_LEVEL,
+              Cloud.config.MIN_SKY_LEVEL);
+          this.draw();
+      },
+
+      /**
+       * Draw the cloud.
+       */
+      draw: function () {
+          this.canvasCtx.save();
+          var sourceWidth = Cloud.config.WIDTH;
+          var sourceHeight = Cloud.config.HEIGHT;
+
+          if (IS_HIDPI) {
+              sourceWidth = sourceWidth * 2;
+              sourceHeight = sourceHeight * 2;
+          }
+
+          this.canvasCtx.drawImage(Runner.imageSprite, this.spritePos.x,
+              this.spritePos.y,
+              sourceWidth, sourceHeight,
+              this.xPos, this.yPos,
+              Cloud.config.WIDTH, Cloud.config.HEIGHT);
+
+          this.canvasCtx.restore();
+      },
+
+      /**
+       * Update the cloud position.
+       * @param {number} speed
+       */
+      update: function (speed) {
+          if (!this.remove) {
+              this.xPos -= Math.ceil(speed);
+              this.draw();
+
+              // Mark as removeable if no longer in the canvas.
+              if (!this.isVisible()) {
+                  this.remove = true;
+              }
+          }
+      },
+
+      /**
+       * Check if the cloud is visible on the stage.
+       * @return {boolean}
+       */
+      isVisible: function () {
+          return this.xPos + Cloud.config.WIDTH > 0;
+      }
+  };
+
+
+  //******************************************************************************
+
+  /**
+   * Nightmode shows a moon and stars on the horizon.
+   */
+  function NightMode(canvas, spritePos, containerWidth) {
+      this.spritePos = spritePos;
+      this.canvas = canvas;
+      this.canvasCtx = canvas.getContext('2d');
+      this.xPos = containerWidth - 50;
+      this.yPos = 30;
+      this.currentPhase = 0;
+      this.opacity = 0;
+      this.containerWidth = containerWidth;
+      this.stars = [];
+      this.drawStars = false;
+      this.placeStars();
+  };
+
+  /**
+   * @enum {number}
+   */
+  NightMode.config = {
+      FADE_SPEED: 0.035,
+      HEIGHT: 40,
+      MOON_SPEED: 0.25,
+      NUM_STARS: 2,
+      STAR_SIZE: 9,
+      STAR_SPEED: 0.3,
+      STAR_MAX_Y: 70,
+      WIDTH: 20
+  };
+
+  NightMode.phases = [140, 120, 100, 60, 40, 20, 0];
+
+  NightMode.prototype = {
+      /**
+       * Update moving moon, changing phases.
+       * @param {boolean} activated Whether night mode is activated.
+       * @param {number} delta
+       */
+      update: function (activated, delta) {
+          // Moon phase.
+          if (activated && this.opacity == 0) {
+              this.currentPhase++;
+
+              if (this.currentPhase >= NightMode.phases.length) {
+                  this.currentPhase = 0;
+              }
+          }
+
+          // Fade in / out.
+          if (activated && (this.opacity < 1 || this.opacity == 0)) {
+              this.opacity += NightMode.config.FADE_SPEED;
+          } else if (this.opacity > 0) {
+              this.opacity -= NightMode.config.FADE_SPEED;
+          }
+
+          // Set moon positioning.
+          if (this.opacity > 0) {
+              this.xPos = this.updateXPos(this.xPos, NightMode.config.MOON_SPEED);
+
+              // Update stars.
+              if (this.drawStars) {
+                  for (var i = 0; i < NightMode.config.NUM_STARS; i++) {
+                      this.stars[i].x = this.updateXPos(this.stars[i].x,
+                          NightMode.config.STAR_SPEED);
+                  }
+              }
+              this.draw();
+          } else {
+              this.opacity = 0;
+              this.placeStars();
+          }
+          this.drawStars = true;
+      },
+
+      updateXPos: function (currentPos, speed) {
+          if (currentPos < -NightMode.config.WIDTH) {
+              currentPos = this.containerWidth;
+          } else {
+              currentPos -= speed;
+          }
+          return currentPos;
+      },
+
+      draw: function () {
+          var moonSourceWidth = this.currentPhase == 3 ? NightMode.config.WIDTH * 2 :
+              NightMode.config.WIDTH;
+          var moonSourceHeight = NightMode.config.HEIGHT;
+          var moonSourceX = this.spritePos.x + NightMode.phases[this.currentPhase];
+          var moonOutputWidth = moonSourceWidth;
+          var starSize = NightMode.config.STAR_SIZE;
+          var starSourceX = Runner.spriteDefinition.LDPI.STAR.x;
+
+          if (IS_HIDPI) {
+              moonSourceWidth *= 2;
+              moonSourceHeight *= 2;
+              moonSourceX = this.spritePos.x +
+                  (NightMode.phases[this.currentPhase] * 2);
+              starSize *= 2;
+              starSourceX = Runner.spriteDefinition.HDPI.STAR.x;
+          }
+
+          this.canvasCtx.save();
+          this.canvasCtx.globalAlpha = this.opacity;
+
+          // Stars.
+          if (this.drawStars) {
+              for (var i = 0; i < NightMode.config.NUM_STARS; i++) {
+                  this.canvasCtx.drawImage(Runner.imageSprite,
+                      starSourceX, this.stars[i].sourceY, starSize, starSize,
+                      Math.round(this.stars[i].x), this.stars[i].y,
+                      NightMode.config.STAR_SIZE, NightMode.config.STAR_SIZE);
+              }
+          }
+
+          // Moon.
+          this.canvasCtx.drawImage(Runner.imageSprite, moonSourceX,
+              this.spritePos.y, moonSourceWidth, moonSourceHeight,
+              Math.round(this.xPos), this.yPos,
+              moonOutputWidth, NightMode.config.HEIGHT);
+
+          this.canvasCtx.globalAlpha = 1;
+          this.canvasCtx.restore();
+      },
+
+      // Do star placement.
+      placeStars: function () {
+          var segmentSize = Math.round(this.containerWidth /
+              NightMode.config.NUM_STARS);
+
+          for (var i = 0; i < NightMode.config.NUM_STARS; i++) {
+              this.stars[i] = {};
+              this.stars[i].x = getRandomNum(segmentSize * i, segmentSize * (i + 1));
+              this.stars[i].y = getRandomNum(0, NightMode.config.STAR_MAX_Y);
+
+              if (IS_HIDPI) {
+                  this.stars[i].sourceY = Runner.spriteDefinition.HDPI.STAR.y +
+                      NightMode.config.STAR_SIZE * 2 * i;
+              } else {
+                  this.stars[i].sourceY = Runner.spriteDefinition.LDPI.STAR.y +
+                      NightMode.config.STAR_SIZE * i;
+              }
+          }
+      },
+
+      reset: function () {
+          this.currentPhase = 0;
+          this.opacity = 0;
+          this.update(false);
+      }
+
+  };
+
+
+  //******************************************************************************
+
+  /**
+   * Horizon Line.
+   * Consists of two connecting lines. Randomly assigns a flat / bumpy horizon.
+   * @param {HTMLCanvasElement} canvas
+   * @param {Object} spritePos Horizon position in sprite.
+   * @constructor
+   */
+  function HorizonLine(canvas, spritePos) {
+      this.spritePos = spritePos;
+      this.canvas = canvas;
+      this.canvasCtx = canvas.getContext('2d');
+      this.sourceDimensions = {};
+      this.dimensions = HorizonLine.dimensions;
+      this.sourceXPos = [this.spritePos.x, this.spritePos.x +
+          this.dimensions.WIDTH];
+      this.xPos = [];
+      this.yPos = 0;
+      this.bumpThreshold = 0.5;
+
+      this.setSourceDimensions();
+      this.draw();
+  };
+
+
+  /**
+   * Horizon line dimensions.
+   * @enum {number}
+   */
+  HorizonLine.dimensions = {
+      WIDTH: 600,
+      HEIGHT: 12,
+      YPOS: 127
+  };
+
+
+  HorizonLine.prototype = {
+      /**
+       * Set the source dimensions of the horizon line.
+       */
+      setSourceDimensions: function () {
+
+          for (var dimension in HorizonLine.dimensions) {
+              if (IS_HIDPI) {
+                  if (dimension != 'YPOS') {
+                      this.sourceDimensions[dimension] =
+                          HorizonLine.dimensions[dimension] * 2;
+                  }
+              } else {
+                  this.sourceDimensions[dimension] =
+                      HorizonLine.dimensions[dimension];
+              }
+              this.dimensions[dimension] = HorizonLine.dimensions[dimension];
+          }
+
+          this.xPos = [0, HorizonLine.dimensions.WIDTH];
+          this.yPos = HorizonLine.dimensions.YPOS;
+      },
+
+      /**
+       * Return the crop x position of a type.
+       */
+      getRandomType: function () {
+          return Math.random() > this.bumpThreshold ? this.dimensions.WIDTH : 0;
+      },
+
+      /**
+       * Draw the horizon line.
+       */
+      draw: function () {
+          this.canvasCtx.drawImage(Runner.imageSprite, this.sourceXPos[0],
+              this.spritePos.y,
+              this.sourceDimensions.WIDTH, this.sourceDimensions.HEIGHT,
+              this.xPos[0], this.yPos,
+              this.dimensions.WIDTH, this.dimensions.HEIGHT);
+
+          this.canvasCtx.drawImage(Runner.imageSprite, this.sourceXPos[1],
+              this.spritePos.y,
+              this.sourceDimensions.WIDTH, this.sourceDimensions.HEIGHT,
+              this.xPos[1], this.yPos,
+              this.dimensions.WIDTH, this.dimensions.HEIGHT);
+      },
+
+      /**
+       * Update the x position of an indivdual piece of the line.
+       * @param {number} pos Line position.
+       * @param {number} increment
+       */
+      updateXPos: function (pos, increment) {
+          var line1 = pos;
+          var line2 = pos == 0 ? 1 : 0;
+
+          this.xPos[line1] -= increment;
+          this.xPos[line2] = this.xPos[line1] + this.dimensions.WIDTH;
+
+          if (this.xPos[line1] <= -this.dimensions.WIDTH) {
+              this.xPos[line1] += this.dimensions.WIDTH * 2;
+              this.xPos[line2] = this.xPos[line1] - this.dimensions.WIDTH;
+              this.sourceXPos[line1] = this.getRandomType() + this.spritePos.x;
+          }
+      },
+
+      /**
+       * Update the horizon line.
+       * @param {number} deltaTime
+       * @param {number} speed
+       */
+      update: function (deltaTime, speed) {
+          var increment = Math.floor(speed * (FPS / 1000) * deltaTime);
+
+          if (this.xPos[0] <= 0) {
+              this.updateXPos(0, increment);
+          } else {
+              this.updateXPos(1, increment);
+          }
+          this.draw();
+      },
+
+      /**
+       * Reset horizon to the starting position.
+       */
+      reset: function () {
+          this.xPos[0] = 0;
+          this.xPos[1] = HorizonLine.dimensions.WIDTH;
+      }
+  };
+
+
+  //******************************************************************************
+
+  /**
+   * Horizon background class.
+   * @param {HTMLCanvasElement} canvas
+   * @param {Object} spritePos Sprite positioning.
+   * @param {Object} dimensions Canvas dimensions.
+   * @param {number} gapCoefficient
+   * @constructor
+   */
+  function Horizon(canvas, spritePos, dimensions, gapCoefficient) {
+      this.canvas = canvas;
+      this.canvasCtx = this.canvas.getContext('2d');
+      this.config = Horizon.config;
+      this.dimensions = dimensions;
+      this.gapCoefficient = gapCoefficient;
+      this.obstacles = [];
+      this.obstacleHistory = [];
+      this.horizonOffsets = [0, 0];
+      this.cloudFrequency = this.config.CLOUD_FREQUENCY;
+      this.spritePos = spritePos;
+      this.nightMode = null;
+
+      // Cloud
+      this.clouds = [];
+      this.cloudSpeed = this.config.BG_CLOUD_SPEED;
+
+      // Horizon
+      this.horizonLine = null;
+      this.init();
+  };
+
+
+  /**
+   * Horizon config.
+   * @enum {number}
+   */
+  Horizon.config = {
+      BG_CLOUD_SPEED: 0.2,
+      BUMPY_THRESHOLD: .3,
+      CLOUD_FREQUENCY: .5,
+      HORIZON_HEIGHT: 16,
+      MAX_CLOUDS: 6
+  };
+
+
+  Horizon.prototype = {
+      /**
+       * Initialise the horizon. Just add the line and a cloud. No obstacles.
+       */
+      init: function () {
+          this.addCloud();
+          this.horizonLine = new HorizonLine(this.canvas, this.spritePos.HORIZON);
+          this.nightMode = new NightMode(this.canvas, this.spritePos.MOON,
+              this.dimensions.WIDTH);
+      },
+
+      /**
+       * @param {number} deltaTime
+       * @param {number} currentSpeed
+       * @param {boolean} updateObstacles Used as an override to prevent
+       *     the obstacles from being updated / added. This happens in the
+       *     ease in section.
+       * @param {boolean} showNightMode Night mode activated.
+       */
+      update: function (deltaTime, currentSpeed, updateObstacles, showNightMode) {
+          this.runningTime += deltaTime;
+          this.horizonLine.update(deltaTime, currentSpeed);
+          this.nightMode.update(showNightMode);
+          this.updateClouds(deltaTime, currentSpeed);
+
+          if (updateObstacles) {
+              this.updateObstacles(deltaTime, currentSpeed);
+          }
+      },
+
+      /**
+       * Update the cloud positions.
+       * @param {number} deltaTime
+       * @param {number} currentSpeed
+       */
+      updateClouds: function (deltaTime, speed) {
+          var cloudSpeed = this.cloudSpeed / 1000 * deltaTime * speed;
+          var numClouds = this.clouds.length;
+
+          if (numClouds) {
+              for (var i = numClouds - 1; i >= 0; i--) {
+                  this.clouds[i].update(cloudSpeed);
+              }
+
+              var lastCloud = this.clouds[numClouds - 1];
+
+              // Check for adding a new cloud.
+              if (numClouds < this.config.MAX_CLOUDS &&
+                  (this.dimensions.WIDTH - lastCloud.xPos) > lastCloud.cloudGap &&
+                  this.cloudFrequency > Math.random()) {
+                  this.addCloud();
+              }
+
+              // Remove expired clouds.
+              this.clouds = this.clouds.filter(function (obj) {
+                  return !obj.remove;
+              });
+          } else {
+              this.addCloud();
+          }
+      },
+
+      /**
+       * Update the obstacle positions.
+       * @param {number} deltaTime
+       * @param {number} currentSpeed
+       */
+      updateObstacles: function (deltaTime, currentSpeed) {
+          // Obstacles, move to Horizon layer.
+          var updatedObstacles = this.obstacles.slice(0);
+
+          for (var i = 0; i < this.obstacles.length; i++) {
+              var obstacle = this.obstacles[i];
+              obstacle.update(deltaTime, currentSpeed);
+
+              // Clean up existing obstacles.
+              if (obstacle.remove) {
+                  updatedObstacles.shift();
+              }
+          }
+          this.obstacles = updatedObstacles;
+
+          if (this.obstacles.length > 0) {
+              var lastObstacle = this.obstacles[this.obstacles.length - 1];
+
+              if (lastObstacle && !lastObstacle.followingObstacleCreated &&
+                  lastObstacle.isVisible() &&
+                  (lastObstacle.xPos + lastObstacle.width + lastObstacle.gap) <
+                  this.dimensions.WIDTH) {
+                  this.addNewObstacle(currentSpeed);
+                  lastObstacle.followingObstacleCreated = true;
+              }
+          } else {
+              // Create new obstacles.
+              this.addNewObstacle(currentSpeed);
+          }
+      },
+
+      removeFirstObstacle: function () {
+          this.obstacles.shift();
+      },
+
+      /**
+       * Add a new obstacle.
+       * @param {number} currentSpeed
+       */
+      addNewObstacle: function (currentSpeed) {
+          var obstacleTypeIndex = getRandomNum(0, Obstacle.types.length - 1);
+          var obstacleType = Obstacle.types[obstacleTypeIndex];
+
+          // Check for multiples of the same type of obstacle.
+          // Also check obstacle is available at current speed.
+          if (this.duplicateObstacleCheck(obstacleType.type) ||
+              currentSpeed < obstacleType.minSpeed) {
+              this.addNewObstacle(currentSpeed);
+          } else {
+              var obstacleSpritePos = this.spritePos[obstacleType.type];
+
+              this.obstacles.push(new Obstacle(this.canvasCtx, obstacleType,
+                  obstacleSpritePos, this.dimensions,
+                  this.gapCoefficient, currentSpeed, obstacleType.width));
+
+              this.obstacleHistory.unshift(obstacleType.type);
+
+              if (this.obstacleHistory.length > 1) {
+                  this.obstacleHistory.splice(Runner.config.MAX_OBSTACLE_DUPLICATION);
+              }
+          }
+      },
+
+      /**
+       * Returns whether the previous two obstacles are the same as the next one.
+       * Maximum duplication is set in config value MAX_OBSTACLE_DUPLICATION.
+       * @return {boolean}
+       */
+      duplicateObstacleCheck: function (nextObstacleType) {
+          var duplicateCount = 0;
+
+          for (var i = 0; i < this.obstacleHistory.length; i++) {
+              duplicateCount = this.obstacleHistory[i] == nextObstacleType ?
+                  duplicateCount + 1 : 0;
+          }
+          return duplicateCount >= Runner.config.MAX_OBSTACLE_DUPLICATION;
+      },
+
+      /**
+       * Reset the horizon layer.
+       * Remove existing obstacles and reposition the horizon line.
+       */
+      reset: function () {
+          this.obstacles = [];
+          this.horizonLine.reset();
+          this.nightMode.reset();
+      },
+
+      /**
+       * Update the canvas width and scaling.
+       * @param {number} width Canvas width.
+       * @param {number} height Canvas height.
+       */
+      resize: function (width, height) {
+          this.canvas.width = width;
+          this.canvas.height = height;
+      },
+
+      /**
+       * Add a new cloud to the horizon.
+       */
+      addCloud: function () {
+          this.clouds.push(new Cloud(this.canvas, this.spritePos.CLOUD,
+              this.dimensions.WIDTH));
+      }
+  };
+})();
+
+new Runner('.interstitial-wrapper');
\ No newline at end of file
diff --git a/public/static/contract_star.png b/public/static/contract_star.png
new file mode 100644
index 0000000000..32d635ef60
Binary files /dev/null and b/public/static/contract_star.png differ
diff --git a/public/static/gas_hawk_logo.svg b/public/static/gas_hawk_logo.svg
new file mode 100644
index 0000000000..ffa6acdde5
--- /dev/null
+++ b/public/static/gas_hawk_logo.svg
@@ -0,0 +1,24 @@
+<svg viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.4 12.07c-.164-.152-.302-.312-.456-.454-.703-.668-.168-1.364-.168-1.364s-.844.132-2.113-.128a4.273 4.273 0 0 0-4.44 1.175 2.618 2.618 0 0 0-2.084 2.334 4.722 4.722 0 0 0-.002.5 4.64 4.64 0 0 0 .024.209s.023.132.038.196l.025.095v.003l.028.094.014.04a2.6 2.6 0 0 1 .286-.97.38.38 0 0 1 .346-.196 7 7 0 0 1 1.352.218 4.28 4.28 0 0 1 2.343 2.9h.001a4.683 4.683 0 0 1-.152 2.937A7.22 7.22 0 0 0 14.4 12.07Zm-4.82-.62a.644.644 0 0 1-1.074-.138c.118-.184.239-.278.36-.328.473-.212.807-.22.807-.22.1.221.073.489-.094.686Z" fill="url(#a)"/>
+  <path d="M9.594 16.721a4.743 4.743 0 0 1 .107.5l1.551 1.474.088.021a7.247 7.247 0 0 0 2.415-2.86c-3.78-3.424-7.12-2.33-7.856-2.252.464.029.916.103 1.352.218a4.28 4.28 0 0 1 2.343 2.9Z" fill="url(#b)"/>
+  <path d="M7.605.209A.46.46 0 0 0 7.22 0a.459.459 0 0 0-.387.209L1.381 8.544A7.185 7.185 0 0 0 0 12.782c-.004 3.86 3.064 7.044 6.889 7.218.562-.986.571-2.159.565-2.426a4.866 4.866 0 0 1-.236.006h-.033a4.757 4.757 0 0 1-3.361-1.422 4.755 4.755 0 0 1-1.396-3.374 4.751 4.751 0 0 1 .915-2.81l3.875-5.92L9.53 7.69a6.433 6.433 0 0 1 3.095.254L7.605.209Z" fill="url(#c)"/>
+  <path d="M12.256 17.96c-.686-1.602-1.57-2.637-2.252-3.249-1.07-.958-1.997-1.25-2.875-1.24-.877.01-1.361.15-1.361.15a.408.408 0 0 1 .13-.017c.465.029.917.102 1.352.217a4.28 4.28 0 0 1 2.344 2.9 4.683 4.683 0 0 1-.152 2.937 7.22 7.22 0 0 0 2.814-1.7v.001Z" fill="url(#d)"/>
+  <defs>
+    <linearGradient id="a" x1="7.369" y1="12.845" x2="12.113" y2="14.707" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FDF0C2"/>
+      <stop offset="1" stop-color="#F6C789"/>
+    </linearGradient>
+    <linearGradient id="b" x1="9.827" y1="13.377" x2="9.837" y2="18.83" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FDF1C3"/>
+      <stop offset=".625" stop-color="#F5C57D"/>
+    </linearGradient>
+    <linearGradient id="c" x1="2.388" y1="15.63" x2="11.492" y2="4.616" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#F5C060"/>
+      <stop offset="1" stop-color="#F0994D"/>
+    </linearGradient>
+    <linearGradient id="d" x1="9.012" y1="13.47" x2="9.009" y2="15.153" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#F5C780"/>
+      <stop offset="1" stop-color="#FADFA1"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/public/static/gecko_terminal.png b/public/static/gecko_terminal.png
new file mode 100644
index 0000000000..b6f3e13b3b
Binary files /dev/null and b/public/static/gecko_terminal.png differ
diff --git a/public/static/google_calendar.svg b/public/static/google_calendar.svg
new file mode 100644
index 0000000000..7bd127e92c
--- /dev/null
+++ b/public/static/google_calendar.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 21">
+  <g clip-path="url(#a)">
+    <path fill="#fff" d="m15.489 5.57-4.737-.526-5.79.526-.526 5.263.526 5.263 5.264.658 5.263-.658.526-5.394-.526-5.132Z"/>
+    <path fill="#1A73E8" d="M7.122 13.736c-.394-.266-.666-.654-.815-1.167l.913-.376c.083.315.228.56.435.734.205.173.455.259.747.259.299 0 .555-.09.77-.272a.87.87 0 0 0 .322-.694.86.86 0 0 0-.34-.703c-.226-.18-.51-.272-.85-.272h-.527v-.904h.474c.292 0 .538-.079.738-.237a.78.78 0 0 0 .3-.648c0-.245-.09-.44-.269-.586-.179-.146-.405-.22-.68-.22-.268 0-.482.072-.64.215a1.26 1.26 0 0 0-.344.528l-.904-.377c.12-.34.34-.64.662-.898.322-.26.734-.39 1.234-.39.37 0 .703.071.997.215.295.143.527.342.694.594.167.254.25.539.25.854 0 .323-.078.595-.233.819a1.606 1.606 0 0 1-.573.514v.054c.3.125.542.316.735.572a1.5 1.5 0 0 1 .286.922c0 .357-.09.677-.272.957a1.89 1.89 0 0 1-.751.662 2.37 2.37 0 0 1-1.078.242 2.23 2.23 0 0 1-1.281-.397Zm5.604-4.532-.998.725-.5-.76 1.798-1.297h.69v6.12h-.99V9.203Z"/>
+    <path fill="#EA4335" d="m15.489 20.833 4.736-4.736-2.368-1.053-2.368 1.052-1.053 2.369 1.053 2.368Z"/>
+    <path fill="#34A853" d="m3.91 18.465 1.052 2.368H15.49v-4.736H4.962L3.91 18.465Z"/>
+    <path fill="#4285F4" d="M1.804.833C.932.833.226 1.54.226 2.413v13.683l2.368 1.053 2.368-1.053V5.57H15.49l1.052-2.368L15.49.833H1.804Z"/>
+    <path fill="#188038" d="M.226 16.097v3.157c0 .873.706 1.58 1.578 1.58h3.158v-4.737H.226Z"/>
+    <path fill="#FBBC04" d="M15.489 5.57v10.526h4.737V5.57l-2.369-1.052L15.49 5.57Z"/>
+    <path fill="#1967D2" d="M20.226 5.57V2.412a1.58 1.58 0 0 0-1.58-1.579H15.49V5.57h4.737Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M.226.833h20v20h-20z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/public/static/identicon_logos/blockies.png b/public/static/identicon_logos/blockies.png
new file mode 100644
index 0000000000..d9ccead353
Binary files /dev/null and b/public/static/identicon_logos/blockies.png differ
diff --git a/public/static/identicon_logos/github.png b/public/static/identicon_logos/github.png
new file mode 100644
index 0000000000..346f9d212e
Binary files /dev/null and b/public/static/identicon_logos/github.png differ
diff --git a/public/static/identicon_logos/gradient_avatar.png b/public/static/identicon_logos/gradient_avatar.png
new file mode 100644
index 0000000000..396ee27848
Binary files /dev/null and b/public/static/identicon_logos/gradient_avatar.png differ
diff --git a/public/static/identicon_logos/jazzicon.png b/public/static/identicon_logos/jazzicon.png
new file mode 100644
index 0000000000..c06bc880ca
Binary files /dev/null and b/public/static/identicon_logos/jazzicon.png differ
diff --git a/public/static/identicon_logos/nouns.svg b/public/static/identicon_logos/nouns.svg
new file mode 100644
index 0000000000..8f14010f97
--- /dev/null
+++ b/public/static/identicon_logos/nouns.svg
@@ -0,0 +1,64 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320" shape-rendering="crispEdges">
+  <rect width="100%" height="100%" fill="#d5d7e1"/>
+  <path fill="#caeff9" d="M90 210h140v10H90zm0 10h140v10H90zm0 10h140v10H90zm0 10h140v10H90zm0 10h20v10H90zm30 0h110v10H120zm-30 10h20v10H90zm30 0h110v10H120zm-30 10h20v10H90zm30 0h110v10H120zm-30 10h20v10H90zm30 0h110v10H120zm-30 10h20v10H90zm30 0h110v10H120zm-30 10h20v10H90zm30 0h110v10H120zm-30 10h20v10H90zm30 0h110v10H120z"/>
+  <path fill="#9f21a0" d="M200 230h30v10h-30z"/>
+  <path fill="#d22209" d="M160 240h40v10h-40z"/>
+  <path fill="#9f21a0" d="M200 240h30v10h-30z"/>
+  <path fill="#fe500c" d="M120 250h40v10h-40z"/>
+  <path fill="#d22209" d="M160 250h40v10h-40z"/>
+  <path fill="#9f21a0" d="M200 250h30v10h-30z"/>
+  <path fill="#ffc925" d="M90 260h20v10H90z"/>
+  <path fill="#fe500c" d="M120 260h40v10h-40z"/>
+  <path fill="#d22209" d="M160 260h40v10h-40z"/>
+  <path fill="#ffc925" d="M90 270h20v10H90z"/>
+  <path fill="#fe500c" d="M120 270h40v10h-40z"/>
+  <path fill="#ffc925" d="M90 280h20v10H90z"/>
+  <path fill="#ffc110" d="M160 30h80v10h-80zm-20 10h50v10h-50z"/>
+  <path fill="#fff0ee" d="M190 40h40v10h-40z"/>
+  <path fill="#ffc110" d="M230 40h20v10h-20zM130 50h50v10h-50z"/>
+  <path fill="#fff0ee" d="M180 50h20v10h-20z"/>
+  <path d="M200 50h20v10h-20z"/>
+  <path fill="#fff0ee" d="M220 50h20v10h-20z"/>
+  <path fill="#ffc110" d="M240 50h10v10h-10zM130 60h50v10h-50z"/>
+  <path fill="#fff0ee" d="M180 60h20v10h-20z"/>
+  <path d="M200 60h20v10h-20z"/>
+  <path fill="#fff0ee" d="M220 60h20v10h-20z"/>
+  <path fill="#ffc110" d="M240 60h10v10h-10z"/>
+  <path fill="#fe500c" d="M250 60h10v10h-10z"/>
+  <path fill="#ffc110" d="M130 70h60v10h-60z"/>
+  <path fill="#fff0ee" d="M190 70h40v10h-40z"/>
+  <path fill="#ffc110" d="M230 70h20v10h-20z"/>
+  <path fill="#fe500c" d="M250 70h30v10h-30z"/>
+  <path fill="#ffc110" d="M50 80h20v10H50zm90 0h100v10H140z"/>
+  <path fill="#fe500c" d="M240 80h30v10h-30z"/>
+  <path fill="#ffc110" d="M50 90h50v10H50zm100 0h100v10H150zM40 100h220v10H40zm0 10h230v10H40zm0 10h240v10H40zm0 10h240v10H40zm0 10h240v10H40zm10 10h230v10H50zm0 10h230v10H50zm10 10h220v10H60zm0 10h110v10H60z"/>
+  <path fill="#d08b11" d="M170 180h10v10h-10z"/>
+  <path fill="#ffc110" d="M180 180h90v10h-90zM70 190h70v10H70z"/>
+  <path fill="#d08b11" d="M140 190h30v10h-30z"/>
+  <path fill="#ffc110" d="M170 190h90v10h-90zm-80 10h160v10H90z"/>
+  <path fill="#ff638d" d="M100 110h60v10h-60zm70 0h60v10h-60zm-70 10h10v10h-10z"/>
+  <path fill="#fff" d="M110 120h20v10h-20z"/>
+  <path d="M130 120h20v10h-20z"/>
+  <path fill="#ff638d" d="M150 120h10v10h-10zm20 0h10v10h-10z"/>
+  <path fill="#fff" d="M180 120h20v10h-20z"/>
+  <path d="M200 120h20v10h-20z"/>
+  <path fill="#ff638d" d="M220 120h10v10h-10zM70 130h40v10H70z"/>
+  <path fill="#fff" d="M110 130h20v10h-20z"/>
+  <path d="M130 130h20v10h-20z"/>
+  <path fill="#ff638d" d="M150 130h30v10h-30z"/>
+  <path fill="#fff" d="M180 130h20v10h-20z"/>
+  <path d="M200 130h20v10h-20z"/>
+  <path fill="#ff638d" d="M220 130h10v10h-10zM70 140h40v10H70z"/>
+  <path fill="#fff" d="M110 140h20v10h-20z"/>
+  <path d="M130 140h20v10h-20z"/>
+  <path fill="#ff638d" d="M150 140h30v10h-30z"/>
+  <path fill="#fff" d="M180 140h20v10h-20z"/>
+  <path d="M200 140h20v10h-20z"/>
+  <path fill="#ff638d" d="M220 140h10v10h-10zM70 150h10v10H70zm30 0h10v10h-10z"/>
+  <path fill="#fff" d="M110 150h20v10h-20z"/>
+  <path d="M130 150h20v10h-20z"/>
+  <path fill="#ff638d" d="M150 150h10v10h-10zm20 0h10v10h-10z"/>
+  <path fill="#fff" d="M180 150h20v10h-20z"/>
+  <path d="M200 150h20v10h-20z"/>
+  <path fill="#ff638d" d="M220 150h10v10h-10zm-120 10h60v10h-60zm70 0h60v10h-60z"/>
+</svg>
diff --git a/public/static/merits_program.png b/public/static/merits_program.png
new file mode 100644
index 0000000000..8e5dee0551
Binary files /dev/null and b/public/static/merits_program.png differ
diff --git a/stubs/ENS.ts b/stubs/ENS.ts
index 4fbd654adf..a35773f077 100644
--- a/stubs/ENS.ts
+++ b/stubs/ENS.ts
@@ -1,20 +1,19 @@
-import type { EnsDomainDetailed, EnsDomainEvent } from 'types/api/ens';
+import * as bens from '@blockscout/bens-types';
 
 import { ADDRESS_PARAMS, ADDRESS_HASH } from './addressParams';
 import { TX_HASH } from './tx';
 
-export const ENS_DOMAIN: EnsDomainDetailed = {
+export const ENS_DOMAIN: bens.DetailedDomain = {
   id: '0x126d74db13895f8d3a1d362410212731d1e1d9be8add83e388385f93d84c8c84',
   name: 'kitty.cat.eth',
   tokens: [
     {
       id: '973523146267017920308',
       contract_hash: ADDRESS_HASH,
-      type: 'NATIVE_DOMAIN_TOKEN',
+      type: bens.TokenType.NATIVE_DOMAIN_TOKEN,
     },
   ],
   owner: ADDRESS_PARAMS,
-  wrapped_owner: null,
   resolved_address: ADDRESS_PARAMS,
   registrant: ADDRESS_PARAMS,
   registration_date: '2023-12-20T01:29:12.000Z',
@@ -22,9 +21,12 @@ export const ENS_DOMAIN: EnsDomainDetailed = {
   other_addresses: {
     ETH: ADDRESS_HASH,
   },
+  protocol: undefined,
+  resolved_with_wildcard: false,
+  stored_offchain: false,
 };
 
-export const ENS_DOMAIN_EVENT: EnsDomainEvent = {
+export const ENS_DOMAIN_EVENT: bens.DomainEvent = {
   transaction_hash: TX_HASH,
   timestamp: '2022-06-06T08:43:15.000000Z',
   from_address: ADDRESS_PARAMS,
diff --git a/stubs/L2.ts b/stubs/L2.ts
index b10eb4db0e..0fcd933e86 100644
--- a/stubs/L2.ts
+++ b/stubs/L2.ts
@@ -1,46 +1,74 @@
-import type { L2DepositsItem } from 'types/api/l2Deposits';
-import type { L2OutputRootsItem } from 'types/api/l2OutputRoots';
-import type { L2TxnBatchesItem } from 'types/api/l2TxnBatches';
-import type { L2WithdrawalsItem } from 'types/api/l2Withdrawals';
+import type {
+  OptimismL2TxnBatch,
+  OptimisticL2DepositsItem,
+  OptimisticL2DisputeGamesItem,
+  OptimisticL2OutputRootsItem,
+  OptimisticL2TxnBatchesItem,
+  OptimisticL2WithdrawalsItem,
+} from 'types/api/optimisticL2';
 
 import { ADDRESS_HASH, ADDRESS_PARAMS } from './addressParams';
 import { TX_HASH } from './tx';
 
-export const L2_DEPOSIT_ITEM: L2DepositsItem = {
+export const L2_DEPOSIT_ITEM: OptimisticL2DepositsItem = {
   l1_block_number: 9045233,
   l1_block_timestamp: '2023-05-22T18:00:36.000000Z',
-  l1_tx_hash: TX_HASH,
-  l1_tx_origin: ADDRESS_HASH,
-  l2_tx_gas_limit: '100000',
-  l2_tx_hash: TX_HASH,
+  l1_transaction_hash: TX_HASH,
+  l1_transaction_origin: ADDRESS_HASH,
+  l2_transaction_gas_limit: '100000',
+  l2_transaction_hash: TX_HASH,
 };
 
-export const L2_WITHDRAWAL_ITEM: L2WithdrawalsItem = {
+export const L2_WITHDRAWAL_ITEM: OptimisticL2WithdrawalsItem = {
   challenge_period_end: null,
   from: ADDRESS_PARAMS,
-  l1_tx_hash: TX_HASH,
+  l1_transaction_hash: TX_HASH,
   l2_timestamp: '2023-06-01T13:44:56.000000Z',
-  l2_tx_hash: TX_HASH,
+  l2_transaction_hash: TX_HASH,
   msg_nonce: 2393,
   msg_nonce_version: 1,
   status: 'Ready to prove',
 };
 
-export const L2_TXN_BATCHES_ITEM: L2TxnBatchesItem = {
-  epoch_number: 9103513,
+export const L2_TXN_BATCHES_ITEM: OptimisticL2TxnBatchesItem = {
+  internal_id: 260991,
+  batch_data_container: 'in_blob4844',
   l1_timestamp: '2023-06-01T14:46:48.000000Z',
-  l1_tx_hashes: [
+  l1_transaction_hashes: [
     TX_HASH,
   ],
-  l2_block_number: 5218590,
-  tx_count: 9,
+  l2_block_start: 5218590,
+  l2_block_end: 5218777,
+  transaction_count: 9,
 };
 
-export const L2_OUTPUT_ROOTS_ITEM: L2OutputRootsItem = {
+export const L2_TXN_BATCH: OptimismL2TxnBatch = {
+  ...L2_TXN_BATCHES_ITEM,
+  batch_data_container: 'in_blob4844',
+  blobs: [
+    {
+      hash: '0x01fb41e1ae9f827e13abb0ee94be2ee574a23ac31426cea630ddd18af854bc85',
+      l1_timestamp: '2024-09-03T13:26:23.000000Z',
+      l1_transaction_hash: '0xd25ee571f1701690615099b208a9431d8611d0130dc342bead6d9edc291f04b9',
+    },
+  ],
+};
+
+export const L2_OUTPUT_ROOTS_ITEM: OptimisticL2OutputRootsItem = {
   l1_block_number: 9103684,
   l1_timestamp: '2023-06-01T15:26:12.000000Z',
-  l1_tx_hash: TX_HASH,
+  l1_transaction_hash: TX_HASH,
   l2_block_number: 10102468,
   l2_output_index: 50655,
   output_root: TX_HASH,
 };
+
+export const L2_DISPUTE_GAMES_ITEM: OptimisticL2DisputeGamesItem = {
+  contract_address: ADDRESS_HASH,
+  created_at: '2023-06-01T15:26:12.000000Z',
+  game_type: 0,
+  index: 6594,
+  l2_block_number: 50655,
+  resolved_at: null,
+  status: 'In progress',
+};
diff --git a/stubs/RPC.ts b/stubs/RPC.ts
index c550695e17..0da0947c7c 100644
--- a/stubs/RPC.ts
+++ b/stubs/RPC.ts
@@ -53,6 +53,10 @@ export const GET_TRANSACTION_RECEIPT: TransactionReceipt = {
 
 export const GET_TRANSACTION_CONFIRMATIONS = BigInt(420);
 
+export const GET_BALANCE = BigInt(42_000_000_000_000);
+
+export const GET_TRANSACTIONS_COUNT = 42;
+
 export const GET_BLOCK: GetBlockReturnType<Chain, false, 'latest'> = {
   baseFeePerGas: BigInt(11),
   difficulty: BigInt(111),
@@ -80,6 +84,8 @@ export const GET_BLOCK: GetBlockReturnType<Chain, false, 'latest'> = {
   withdrawals: Array(10).fill(WITHDRAWAL),
   withdrawalsRoot: TX_HASH,
   sealFields: [ '0x00' ],
+  blobGasUsed: BigInt(0),
+  excessBlobGas: BigInt(0),
 };
 
 export const GET_BLOCK_WITH_TRANSACTIONS: GetBlockReturnType<Chain, true, 'latest'> = {
diff --git a/stubs/account.ts b/stubs/account.ts
index cdb1bab556..f46a3a064f 100644
--- a/stubs/account.ts
+++ b/stubs/account.ts
@@ -1,4 +1,4 @@
-import type { PublicTag, AddressTag, TransactionTag, ApiKey, CustomAbi, VerifiedAddress, TokenInfoApplication, WatchlistAddress } from 'types/api/account';
+import type { AddressTag, TransactionTag, ApiKey, CustomAbi, VerifiedAddress, TokenInfoApplication, WatchlistAddress } from 'types/api/account';
 
 import { ADDRESS_PARAMS, ADDRESS_HASH } from './addressParams';
 import { TX_HASH } from './tx';
@@ -6,35 +6,22 @@ import { TX_HASH } from './tx';
 export const PRIVATE_TAG_ADDRESS: AddressTag = {
   address: ADDRESS_PARAMS,
   address_hash: ADDRESS_HASH,
-  id: '4',
+  id: 4,
   name: 'placeholder',
 };
 
 export const PRIVATE_TAG_TX: TransactionTag = {
-  id: '1',
+  id: 1,
   name: 'placeholder',
   transaction_hash: TX_HASH,
 };
 
-export const PUBLIC_TAG: PublicTag = {
-  additional_comment: 'my comment',
-  addresses: [ ADDRESS_HASH ],
-  addresses_with_info: [ ADDRESS_PARAMS ],
-  company: 'Blockscout',
-  email: 'john.doe@example.com',
-  full_name: 'name',
-  id: 1,
-  is_owner: true,
-  tags: 'placeholder',
-  website: 'example.com',
-};
-
 export const WATCH_LIST_ITEM_WITH_TOKEN_INFO: WatchlistAddress = {
   address: ADDRESS_PARAMS,
   address_balance: '7072643779453701031672',
   address_hash: ADDRESS_HASH,
   exchange_rate: '0.00099052',
-  id: '18',
+  id: 18,
   name: 'placeholder',
   notification_methods: {
     email: false,
@@ -48,6 +35,10 @@ export const WATCH_LIST_ITEM_WITH_TOKEN_INFO: WatchlistAddress = {
       incoming: true,
       outcoming: true,
     },
+    'ERC-404': {
+      incoming: true,
+      outcoming: true,
+    },
     'native': {
       incoming: true,
       outcoming: true,
@@ -77,7 +68,7 @@ export const CUSTOM_ABI: CustomAbi = {
   ],
   contract_address: ADDRESS_PARAMS,
   contract_address_hash: ADDRESS_HASH,
-  id: '1',
+  id: 1,
   name: 'placeholder',
 };
 
diff --git a/stubs/address.ts b/stubs/address.ts
index 19f2a398ad..acd1c1d03e 100644
--- a/stubs/address.ts
+++ b/stubs/address.ts
@@ -3,38 +3,34 @@ import type {
   AddressCoinBalanceHistoryItem,
   AddressCollection,
   AddressCounters,
+  AddressEpochRewardsItem,
+  AddressMudTableItem,
   AddressNFT,
   AddressTabsCounters,
   AddressTokenBalance,
 } from 'types/api/address';
 import type { AddressesItem } from 'types/api/addresses';
 
-import { ADDRESS_HASH } from './addressParams';
-import { TOKEN_INFO_ERC_1155, TOKEN_INFO_ERC_20, TOKEN_INFO_ERC_721, TOKEN_INSTANCE } from './token';
+import { ADDRESS_HASH, ADDRESS_PARAMS } from './addressParams';
+import { MUD_SCHEMA, MUD_TABLE } from './mud';
+import { TOKEN_INFO_ERC_1155, TOKEN_INFO_ERC_20, TOKEN_INFO_ERC_721, TOKEN_INFO_ERC_404, TOKEN_INSTANCE } from './token';
 import { TX_HASH } from './tx';
 
 export const ADDRESS_INFO: Address = {
   block_number_balance_updated_at: 8774377,
   coin_balance: '810941268802273085757',
-  creation_tx_hash: null,
+  creation_transaction_hash: null,
   creator_address_hash: ADDRESS_HASH,
   exchange_rate: null,
-  has_custom_methods_read: false,
-  has_custom_methods_write: false,
   has_decompiled_code: false,
   has_logs: true,
-  has_methods_read: false,
-  has_methods_read_proxy: false,
-  has_methods_write: false,
-  has_methods_write_proxy: false,
   has_token_transfers: false,
   has_tokens: false,
   has_validated_blocks: false,
   hash: ADDRESS_HASH,
-  implementation_address: null,
-  implementation_name: null,
-  is_contract: false,
-  is_verified: false,
+  implementations: [ { address: ADDRESS_HASH, name: 'Transparent Upgradable Proxy' } ],
+  is_contract: true,
+  is_verified: true,
   name: 'ChainLink Token (goerli)',
   token: TOKEN_INFO_ERC_20,
   private_tags: [],
@@ -63,9 +59,9 @@ export const ADDRESS_TABS_COUNTERS: AddressTabsCounters = {
 
 export const TOP_ADDRESS: AddressesItem = {
   coin_balance: '11886682377162664596540805',
-  tx_count: '1835',
+  transaction_count: '1835',
   hash: '0x4f7A67464B5976d7547c860109e4432d50AfB38e',
-  implementation_name: null,
+  implementations: null,
   is_contract: false,
   is_verified: null,
   name: null,
@@ -104,8 +100,32 @@ export const ADDRESS_NFT_1155: AddressNFT = {
   ...TOKEN_INSTANCE,
 };
 
+export const ADDRESS_NFT_404: AddressNFT = {
+  token_type: 'ERC-404',
+  token: TOKEN_INFO_ERC_404,
+  value: '10',
+  ...TOKEN_INSTANCE,
+};
+
 export const ADDRESS_COLLECTION: AddressCollection = {
   token: TOKEN_INFO_ERC_1155,
   amount: '4',
   token_instances: Array(4).fill(TOKEN_INSTANCE),
 };
+
+export const ADDRESS_MUD_TABLE_ITEM: AddressMudTableItem = {
+  schema: MUD_SCHEMA,
+  table: MUD_TABLE,
+};
+
+export const EPOCH_REWARD_ITEM: AddressEpochRewardsItem = {
+  amount: '136609473658452408568',
+  block_number: 10355938,
+  block_timestamp: '2022-05-15T13:16:24Z',
+  type: 'voter',
+  token: TOKEN_INFO_ERC_20,
+  block_hash: '0x5956a847d8089e254e02e5111cad6992b99ceb9e5c2dc4343fd53002834c4dc6',
+  account: ADDRESS_PARAMS,
+  epoch_number: 1234,
+  associated_account: ADDRESS_PARAMS,
+};
diff --git a/stubs/addressParams.ts b/stubs/addressParams.ts
index 819a71402b..8548abca9c 100644
--- a/stubs/addressParams.ts
+++ b/stubs/addressParams.ts
@@ -4,7 +4,7 @@ export const ADDRESS_HASH = '0x2B51Ae4412F79c3c1cB12AA40Ea4ECEb4e80511a';
 
 export const ADDRESS_PARAMS: AddressParam = {
   hash: ADDRESS_HASH,
-  implementation_name: null,
+  implementations: null,
   is_contract: false,
   is_verified: null,
   name: null,
diff --git a/stubs/advancedFilter.ts b/stubs/advancedFilter.ts
new file mode 100644
index 0000000000..341280220b
--- /dev/null
+++ b/stubs/advancedFilter.ts
@@ -0,0 +1,17 @@
+import type { AdvancedFilterResponseItem } from 'types/api/advancedFilter';
+
+import { ADDRESS_PARAMS } from './addressParams';
+import { TX_HASH } from './tx';
+
+export const ADVANCED_FILTER_ITEM: AdvancedFilterResponseItem = {
+  fee: '215504444616317',
+  from: ADDRESS_PARAMS,
+  hash: TX_HASH,
+  method: 'approve',
+  timestamp: '2022-11-11T11:11:11.000000Z',
+  to: ADDRESS_PARAMS,
+  token: null,
+  total: null,
+  type: 'coin_transfer',
+  value: '42000420000000000000',
+};
diff --git a/stubs/arbitrumL2.ts b/stubs/arbitrumL2.ts
new file mode 100644
index 0000000000..a8e9ba0a1d
--- /dev/null
+++ b/stubs/arbitrumL2.ts
@@ -0,0 +1,38 @@
+import type { ArbitrumL2TxnBatchesItem, ArbitrumL2TxnBatch, ArbitrumL2MessagesItem } from 'types/api/arbitrumL2';
+
+import { ADDRESS_HASH } from './addressParams';
+import { TX_HASH } from './tx';
+
+export const ARBITRUM_MESSAGES_ITEM: ArbitrumL2MessagesItem = {
+  completion_transaction_hash: TX_HASH,
+  id: 181920,
+  origination_address: ADDRESS_HASH,
+  origination_transaction_block_number: 123456,
+  origination_transaction_hash: TX_HASH,
+  origination_timestamp: '2023-06-01T14:46:48.000000Z',
+  status: 'relayed',
+};
+
+export const ARBITRUM_L2_TXN_BATCHES_ITEM: ArbitrumL2TxnBatchesItem = {
+  number: 12345,
+  blocks_count: 12345,
+  transactions_count: 10000,
+  commitment_transaction: {
+    block_number: 12345,
+    timestamp: '2024-04-17T08:51:58.000000Z',
+    hash: TX_HASH,
+    status: 'finalized',
+  },
+  batch_data_container: 'in_blob4844',
+};
+
+export const ARBITRUM_L2_TXN_BATCH: ArbitrumL2TxnBatch = {
+  ...ARBITRUM_L2_TXN_BATCHES_ITEM,
+  after_acc: '0xcd064f3409015e8e6407e492e5275a185e492c6b43ccf127f22092d8057a9ffb',
+  before_acc: '0x2ed7c4985eb778d76ec400a43805e7feecc8c2afcdb492dbe5caf227de6d37bc',
+  start_block: 1245209,
+  end_block: 1245490,
+  data_availability: {
+    batch_data_container: 'in_blob4844',
+  },
+};
diff --git a/stubs/blobs.ts b/stubs/blobs.ts
new file mode 100644
index 0000000000..89ca5c4cb4
--- /dev/null
+++ b/stubs/blobs.ts
@@ -0,0 +1,20 @@
+import type { Blob, TxBlob } from 'types/api/blobs';
+
+import { TX_HASH } from './tx';
+
+const BLOB_HASH = '0x0137cd898a9aaa92bbe94999d2a98241f5eabc829d9354160061789963f85995';
+const BLOB_PROOF = '0x82683d5d6e58a76f2a607b8712cad113621d46cb86a6bcfcffb1e274a70c7308b3243c6075ee22d904fecf8d4c147c6f';
+
+export const TX_BLOB: TxBlob = {
+  blob_data: '0x010203040506070809101112',
+  hash: BLOB_HASH,
+  kzg_commitment: BLOB_PROOF,
+  kzg_proof: BLOB_PROOF,
+};
+
+export const BLOB: Blob = {
+  ...TX_BLOB,
+  transaction_hashes: [
+    { block_consensus: true, transaction_hash: TX_HASH },
+  ],
+};
diff --git a/stubs/block.ts b/stubs/block.ts
index aea58c499b..044843e0fd 100644
--- a/stubs/block.ts
+++ b/stubs/block.ts
@@ -1,11 +1,12 @@
-import type { Block } from 'types/api/block';
+import type { Block, BlockEpochElectionReward, BlockEpoch } from 'types/api/block';
 
 import { ADDRESS_PARAMS } from './addressParams';
+import { TOKEN_INFO_ERC_20, TOKEN_TRANSFER_ERC_20 } from './token';
 
 export const BLOCK_HASH = '0x8fa7b9e5e5e79deeb62d608db22ba9a5cb45388c7ebb9223ae77331c6080dc70';
 
 export const BLOCK: Block = {
-  base_fee_per_gas: '14',
+  base_fee_per_gas: '10000000000',
   burnt_fees: '92834504000000000',
   burnt_fees_percentage: 42.2,
   difficulty: '340282366920938463463374607431768211451',
@@ -30,8 +31,29 @@ export const BLOCK: Block = {
   state_root: 'TODO',
   timestamp: '2023-05-12T19:29:12.000000Z',
   total_difficulty: '10837812015930321201107455268036056402048391639',
-  tx_count: 142,
-  tx_fees: '19241635547777613',
+  transaction_count: 142,
+  transaction_fees: '19241635547777613',
   type: 'block',
   uncles_hashes: [],
 };
+
+const BLOCK_EPOCH_REWARD: BlockEpochElectionReward = {
+  count: 10,
+  total: '157705500305820107521',
+  token: TOKEN_INFO_ERC_20,
+};
+
+export const BLOCK_EPOCH: BlockEpoch = {
+  number: 1486,
+  aggregated_election_rewards: {
+    group: BLOCK_EPOCH_REWARD,
+    validator: BLOCK_EPOCH_REWARD,
+    voter: BLOCK_EPOCH_REWARD,
+    delegated_payment: BLOCK_EPOCH_REWARD,
+  },
+  distribution: {
+    carbon_offsetting_transfer: TOKEN_TRANSFER_ERC_20,
+    community_transfer: TOKEN_TRANSFER_ERC_20,
+    reserve_bolster_transfer: TOKEN_TRANSFER_ERC_20,
+  },
+};
diff --git a/stubs/contract.ts b/stubs/contract.ts
index 36d7b13ed2..cb9111cfdb 100644
--- a/stubs/contract.ts
+++ b/stubs/contract.ts
@@ -1,7 +1,9 @@
-import type { SmartContract, SolidityscanReport } from 'types/api/contract';
-import type { VerifiedContract } from 'types/api/contracts';
+import type { SmartContract, SmartContractMudSystemsResponse } from 'types/api/contract';
+import type { VerifiedContract, VerifiedContractsCounters } from 'types/api/contracts';
 
-import { ADDRESS_PARAMS } from './addressParams';
+import type { SolidityScanReport } from 'lib/solidityScan/schema';
+
+import { ADDRESS_PARAMS, ADDRESS_HASH } from './addressParams';
 
 export const CONTRACT_CODE_UNVERIFIED = {
   creation_bytecode: '0x60806040526e',
@@ -10,7 +12,22 @@ export const CONTRACT_CODE_UNVERIFIED = {
 } as SmartContract;
 
 export const CONTRACT_CODE_VERIFIED = {
-  abi: [],
+  abi: [
+    {
+      inputs: [],
+      name: 'symbol',
+      outputs: [ { internalType: 'string', name: '', type: 'string' } ],
+      stateMutability: 'view',
+      type: 'function',
+    },
+    {
+      inputs: [ { internalType: 'address', name: 'newOwner', type: 'address' } ],
+      name: 'transferOwnership',
+      outputs: [],
+      stateMutability: 'nonpayable',
+      type: 'function',
+    },
+  ],
   additional_sources: [],
   can_be_visualized_via_sol2uml: true,
   compiler_settings: {
@@ -29,6 +46,7 @@ export const CONTRACT_CODE_VERIFIED = {
     remappings: [],
   },
   compiler_version: 'v0.8.7+commit.e28d00a7',
+  constructor_args: '0000000000000000000000005c7bcd6e7de5423a257d81b442095a1a6ced35c5000000000000000000000000c02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
   creation_bytecode: '0x6080604052348',
   deployed_bytecode: '0x60806040',
   evm_version: 'london',
@@ -40,6 +58,7 @@ export const CONTRACT_CODE_VERIFIED = {
   optimization_runs: 200,
   source_code: 'source_code',
   verified_at: '2023-02-21T14:39:16.906760Z',
+  license_type: 'mit',
 } as unknown as SmartContract;
 
 export const VERIFIED_CONTRACT_INFO: VerifiedContract = {
@@ -50,12 +69,21 @@ export const VERIFIED_CONTRACT_INFO: VerifiedContract = {
   language: 'solidity',
   market_cap: null,
   optimization_enabled: false,
-  tx_count: 565058,
+  transaction_count: 565058,
   verified_at: '2023-04-10T13:16:33.884921Z',
+  license_type: 'mit',
+};
+
+export const VERIFIED_CONTRACTS_COUNTERS: VerifiedContractsCounters = {
+  smart_contracts: '123456789',
+  new_smart_contracts_24h: '12345',
+  verified_smart_contracts: '654321',
+  new_verified_smart_contracts_24h: '1234',
 };
 
-export const SOLIDITYSCAN_REPORT: SolidityscanReport = {
+export const SOLIDITY_SCAN_REPORT: SolidityScanReport = {
   scan_report: {
+    contractname: 'BullRunners',
     scan_status: 'scan_done',
     scan_summary: {
       issue_severity_distribution: {
@@ -66,12 +94,17 @@ export const SOLIDITYSCAN_REPORT: SolidityscanReport = {
         low: 2,
         medium: 0,
       },
-      lines_analyzed_count: 18,
-      scan_time_taken: 1,
-      score: '3.61',
       score_v2: '72.22',
-      threat_score: '94.74',
     },
     scanner_reference_url: 'https://solidityscan.com/quickscan/0xc1EF7811FF2ebFB74F80ed7423f2AdAA37454be2/blockscout/eth-goerli?ref=blockscout',
   },
 };
+
+export const MUD_SYSTEMS: SmartContractMudSystemsResponse = {
+  items: [
+    {
+      name: 'sy.AccessManagement',
+      address: ADDRESS_HASH,
+    },
+  ],
+};
diff --git a/stubs/internalTx.ts b/stubs/internalTx.ts
index 15f0785da9..f0e24bd1f1 100644
--- a/stubs/internalTx.ts
+++ b/stubs/internalTx.ts
@@ -4,7 +4,7 @@ import { ADDRESS_PARAMS } from './addressParams';
 import { TX_HASH } from './tx';
 
 export const INTERNAL_TX: InternalTransaction = {
-  block: 9006105,
+  block_number: 9006105,
   created_contract: null,
   error: null,
   from: ADDRESS_PARAMS,
diff --git a/stubs/log.ts b/stubs/log.ts
index 0200ba4d04..3e34dbcee5 100644
--- a/stubs/log.ts
+++ b/stubs/log.ts
@@ -31,5 +31,5 @@ export const LOG: Log = {
     '0x000000000000000000000000302fd86163cb9ad5533b3952dafa3b633a82bc51',
     null,
   ],
-  tx_hash: TX_HASH,
+  transaction_hash: TX_HASH,
 };
diff --git a/stubs/mud.ts b/stubs/mud.ts
new file mode 100644
index 0000000000..f987149f32
--- /dev/null
+++ b/stubs/mud.ts
@@ -0,0 +1,24 @@
+import type { MudWorldItem, MudWorldSchema, MudWorldTable } from 'types/api/mudWorlds';
+
+import { ADDRESS_PARAMS } from './addressParams';
+
+export const MUD_TABLE: MudWorldTable = {
+  table_full_name: 'ot.Match',
+  table_id: '0x6f7400000000000000000000000000004d617463680000000000000000000000',
+  table_name: 'Match',
+  table_namespace: '',
+  table_type: 'offchain',
+};
+
+export const MUD_SCHEMA: MudWorldSchema = {
+  key_names: [ 'matchEntityKey', 'entity' ],
+  key_types: [ 'bytes32', 'bytes32' ],
+  value_names: [ 'matchEntity' ],
+  value_types: [ 'bytes32' ],
+};
+
+export const MUD_WORLD: MudWorldItem = {
+  address: ADDRESS_PARAMS,
+  coin_balance: '7072643779453701031672',
+  transaction_count: 442,
+};
diff --git a/stubs/noves/NovesTranslate.ts b/stubs/noves/NovesTranslate.ts
new file mode 100644
index 0000000000..848ed6dab9
--- /dev/null
+++ b/stubs/noves/NovesTranslate.ts
@@ -0,0 +1,43 @@
+import type { NovesResponseData, NovesClassificationData, NovesRawTransactionData } from 'types/api/noves';
+
+const NOVES_TRANSLATE_CLASSIFIED: NovesClassificationData = {
+  description: 'Sent 0.04 ETH',
+  received: [ {
+    action: 'Sent Token',
+    actionFormatted: 'Sent Token',
+    amount: '45',
+    from: { name: '', address: '0xa0393A76b132526a70450273CafeceB45eea6dEE' },
+    to: { name: '', address: '0xa0393A76b132526a70450273CafeceB45eea6dEE' },
+    token: {
+      address: '',
+      name: 'ETH',
+      symbol: 'ETH',
+      decimals: 18,
+    },
+  } ],
+  sent: [],
+  source: {
+    type: '',
+  },
+  type: '0x2',
+  typeFormatted: 'Send NFT',
+};
+
+const NOVES_TRANSLATE_RAW: NovesRawTransactionData = {
+  blockNumber: 1,
+  fromAddress: '0xCFC123a23dfeD71bDAE054e487989d863C525C73',
+  gas: 2,
+  gasPrice: 3,
+  timestamp: 20000,
+  toAddress: '0xCFC123a23dfeD71bDAE054e487989d863C525C73',
+  transactionFee: 2,
+  transactionHash: '0x128b79937a0eDE33258992c9668455f997f1aF24',
+};
+
+export const NOVES_TRANSLATE: NovesResponseData = {
+  accountAddress: '0x2b824349b320cfa72f292ab26bf525adb00083ba9fa097141896c3c8c74567cc',
+  chain: 'base',
+  txTypeVersion: 2,
+  rawTransactionData: NOVES_TRANSLATE_RAW,
+  classificationData: NOVES_TRANSLATE_CLASSIFIED,
+};
diff --git a/stubs/pools.ts b/stubs/pools.ts
new file mode 100644
index 0000000000..47aadaf6a0
--- /dev/null
+++ b/stubs/pools.ts
@@ -0,0 +1,15 @@
+export const POOL = {
+  contract_address: '0x6a1041865b76d1dc33da0257582591227c57832c',
+  chain_id: '1',
+  base_token_address: '0xf63e309818e4ea13782678ce6c31c1234fa61809',
+  base_token_symbol: 'JANET',
+  base_token_icon_url: null,
+  quote_token_address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
+  quote_token_symbol: 'WETH',
+  quote_token_icon_url: 'https://coin-images.coingecko.com/coins/images/2518/small/weth.png?1696503332',
+  fully_diluted_valuation_usd: '15211385',
+  market_cap_usd: '15211385',
+  liquidity: '394101.2428',
+  dex: { id: 'uniswap_v2', name: 'Uniswap V2' },
+  coin_gecko_terminal_url: 'https://www.geckoterminal.com/eth/pools/0x6a1041865b76d1dc33da0257582591227c57832c',
+};
diff --git a/stubs/scrollL2.ts b/stubs/scrollL2.ts
new file mode 100644
index 0000000000..d1a8881154
--- /dev/null
+++ b/stubs/scrollL2.ts
@@ -0,0 +1,32 @@
+import type { ScrollL2MessageItem, ScrollL2TxnBatch } from 'types/api/scrollL2';
+
+import { TX_HASH } from './tx';
+
+export const SCROLL_L2_TXN_BATCH: ScrollL2TxnBatch = {
+  commitment_transaction: {
+    block_number: 4053979,
+    hash: '0xd04d626495ef69abd37ae3ea585ed03319a3d3b50cf10874f7f36741c7b45a18',
+    timestamp: '2023-08-09T08:09:12.000000Z',
+  },
+  confirmation_transaction: {
+    block_number: null,
+    hash: null,
+    timestamp: null,
+  },
+  end_block: 1711,
+  number: 273,
+  start_block: 1697,
+  transaction_count: 15,
+  data_availability: {
+    batch_data_container: 'in_blob4844',
+  },
+};
+
+export const SCROLL_L2_MESSAGE_ITEM: ScrollL2MessageItem = {
+  id: 930795,
+  origination_transaction_block_number: 20639178,
+  origination_transaction_hash: TX_HASH,
+  origination_timestamp: '2024-08-30T05:03:23.000000Z',
+  completion_transaction_hash: 'TX_HASH',
+  value: '5084131319054877748',
+};
diff --git a/stubs/search.ts b/stubs/search.ts
index 77d1662a89..079a7a542e 100644
--- a/stubs/search.ts
+++ b/stubs/search.ts
@@ -26,5 +26,5 @@ export const SEARCH_RESULT_NEXT_PAGE_PARAMS: SearchResult['next_page_params'] =
   items_count: 50,
   name: 'USDCTest',
   q: 'usd',
-  tx_hash: null,
+  transaction_hash: null,
 };
diff --git a/stubs/shibarium.ts b/stubs/shibarium.ts
new file mode 100644
index 0000000000..3003be7110
--- /dev/null
+++ b/stubs/shibarium.ts
@@ -0,0 +1,20 @@
+import type { ShibariumDepositsItem, ShibariumWithdrawalsItem } from 'types/api/shibarium';
+
+import { ADDRESS_PARAMS } from './addressParams';
+import { TX_HASH } from './tx';
+
+export const SHIBARIUM_DEPOSIT_ITEM: ShibariumDepositsItem = {
+  l1_block_number: 9045233,
+  l1_transaction_hash: TX_HASH,
+  l2_transaction_hash: TX_HASH,
+  timestamp: '2023-05-22T18:00:36.000000Z',
+  user: ADDRESS_PARAMS,
+};
+
+export const SHIBARIUM_WITHDRAWAL_ITEM: ShibariumWithdrawalsItem = {
+  l2_block_number: 9045233,
+  l1_transaction_hash: TX_HASH,
+  l2_transaction_hash: TX_HASH,
+  timestamp: '2023-05-22T18:00:36.000000Z',
+  user: ADDRESS_PARAMS,
+};
diff --git a/stubs/stats.ts b/stubs/stats.ts
index 3a2bba67cb..3e7be4b565 100644
--- a/stubs/stats.ts
+++ b/stubs/stats.ts
@@ -1,4 +1,5 @@
-import type { Counter, HomeStats, StatsChartsSection } from 'types/api/stats';
+import type * as stats from '@blockscout/stats-types';
+import type { HomeStats } from 'types/api/stats';
 
 export const HOMEPAGE_STATS: HomeStats = {
   average_block_time: 14346,
@@ -9,16 +10,22 @@ export const HOMEPAGE_STATS: HomeStats = {
       fiat_price: '1.01',
       price: 20.41,
       time: 12283,
+      base_fee: 2.22222,
+      priority_fee: 12.424242,
     },
     fast: {
       fiat_price: '1.26',
       price: 25.47,
       time: 9321,
+      base_fee: 4.44444,
+      priority_fee: 22.242424,
     },
     slow: {
       fiat_price: '0.97',
       price: 19.55,
       time: 24543,
+      base_fee: 1.11111,
+      priority_fee: 7.8909,
     },
   },
   gas_price_updated_at: '2022-11-11T11:09:49.051171Z',
@@ -35,7 +42,7 @@ export const HOMEPAGE_STATS: HomeStats = {
   tvl: '1767425.102766552',
 };
 
-export const STATS_CHARTS_SECTION: StatsChartsSection = {
+export const STATS_CHARTS_SECTION: stats.LineChartSection = {
   id: 'placeholder',
   title: 'Placeholder',
   charts: [
@@ -44,24 +51,28 @@ export const STATS_CHARTS_SECTION: StatsChartsSection = {
       title: 'Average transaction fee',
       description: 'The average amount in ETH spent per transaction',
       units: 'ETH',
+      resolutions: [ 'DAY', 'MONTH' ],
     },
     {
       id: 'chart_1',
       title: 'Transactions fees',
       description: 'Amount of tokens paid as fees',
       units: 'ETH',
+      resolutions: [ 'DAY', 'MONTH' ],
     },
     {
       id: 'chart_2',
       title: 'New transactions',
       description: 'New transactions number',
-      units: null,
+      units: undefined,
+      resolutions: [ 'DAY', 'MONTH' ],
     },
     {
       id: 'chart_3',
       title: 'Transactions growth',
       description: 'Cumulative transactions number',
-      units: null,
+      units: undefined,
+      resolutions: [ 'DAY', 'MONTH' ],
     },
   ],
 };
@@ -70,7 +81,7 @@ export const STATS_CHARTS = {
   sections: [ STATS_CHARTS_SECTION ],
 };
 
-export const STATS_COUNTER: Counter = {
+export const STATS_COUNTER: stats.Counter = {
   id: 'stub',
   value: '9074405',
   title: 'Placeholder Counter',
diff --git a/stubs/token.ts b/stubs/token.ts
index e60e004bad..c301ff7cd2 100644
--- a/stubs/token.ts
+++ b/stubs/token.ts
@@ -1,11 +1,21 @@
-import type { TokenCounters, TokenHolder, TokenInfo, TokenInstance, TokenType } from 'types/api/token';
+import type {
+  TokenCounters,
+  TokenHolder,
+  TokenHolders,
+  TokenHoldersPagination,
+  TokenInfo,
+  TokenInstance,
+  TokenType,
+} from 'types/api/token';
+import type { TokenInstanceTransferPagination, TokenInstanceTransferResponse } from 'types/api/tokens';
 import type { TokenTransfer, TokenTransferPagination, TokenTransferResponse } from 'types/api/tokenTransfer';
 
 import { ADDRESS_PARAMS, ADDRESS_HASH } from './addressParams';
-import { BLOCK_HASH } from './block';
 import { TX_HASH } from './tx';
 import { generateListStub } from './utils';
 
+export const BLOCK_HASH = '0x8fa7b9e5e5e79deeb62d608db22ba9a5cb45388c7ebb9223ae77331c6080dc70';
+
 export const TOKEN_INFO_ERC_20: TokenInfo<'ERC-20'> = {
   address: ADDRESS_HASH,
   circulating_market_cap: '117629601.61913824',
@@ -31,6 +41,12 @@ export const TOKEN_INFO_ERC_1155: TokenInfo<'ERC-1155'> = {
   type: 'ERC-1155',
 };
 
+export const TOKEN_INFO_ERC_404: TokenInfo<'ERC-404'> = {
+  ...TOKEN_INFO_ERC_20,
+  circulating_market_cap: null,
+  type: 'ERC-404',
+};
+
 export const TOKEN_COUNTERS: TokenCounters = {
   token_holders_count: '123456',
   transfers_count: '123456',
@@ -38,19 +54,44 @@ export const TOKEN_COUNTERS: TokenCounters = {
 
 export const TOKEN_HOLDER_ERC_20: TokenHolder = {
   address: ADDRESS_PARAMS,
-  token: TOKEN_INFO_ERC_20,
   value: '1021378038331138520',
 };
 
 export const TOKEN_HOLDER_ERC_1155: TokenHolder = {
   address: ADDRESS_PARAMS,
-  token: TOKEN_INFO_ERC_1155,
   token_id: '12345',
   value: '1021378038331138520',
 };
 
+export const getTokenHoldersStub = (type?: TokenType, pagination: TokenHoldersPagination | null = null): TokenHolders => {
+  switch (type) {
+    case 'ERC-721':
+      return generateListStub<'token_holders'>(TOKEN_HOLDER_ERC_20, 50, { next_page_params: pagination });
+    case 'ERC-1155':
+      return generateListStub<'token_holders'>(TOKEN_HOLDER_ERC_1155, 50, { next_page_params: pagination });
+    case 'ERC-404':
+      return generateListStub<'token_holders'>(TOKEN_HOLDER_ERC_1155, 50, { next_page_params: pagination });
+    default:
+      return generateListStub<'token_holders'>(TOKEN_HOLDER_ERC_20, 50, { next_page_params: pagination });
+  }
+};
+
+export const getTokenInstanceHoldersStub = (type?: TokenType, pagination: TokenHoldersPagination | null = null): TokenHolders => {
+  switch (type) {
+    case 'ERC-721':
+      return generateListStub<'token_instance_holders'>(TOKEN_HOLDER_ERC_20, 10, { next_page_params: pagination });
+    case 'ERC-1155':
+      return generateListStub<'token_instance_holders'>(TOKEN_HOLDER_ERC_1155, 10, { next_page_params: pagination });
+    case 'ERC-404':
+      return generateListStub<'token_instance_holders'>(TOKEN_HOLDER_ERC_1155, 10, { next_page_params: pagination });
+    default:
+      return generateListStub<'token_instance_holders'>(TOKEN_HOLDER_ERC_20, 10, { next_page_params: pagination });
+  }
+};
+
 export const TOKEN_TRANSFER_ERC_20: TokenTransfer = {
   block_hash: BLOCK_HASH,
+  block_number: '123456',
   from: ADDRESS_PARAMS,
   log_index: '4',
   method: 'addLiquidity',
@@ -61,7 +102,7 @@ export const TOKEN_TRANSFER_ERC_20: TokenTransfer = {
     decimals: '18',
     value: '9851351626684503',
   },
-  tx_hash: TX_HASH,
+  transaction_hash: TX_HASH,
   type: 'token_minting',
 };
 
@@ -83,17 +124,42 @@ export const TOKEN_TRANSFER_ERC_1155: TokenTransfer = {
   token: TOKEN_INFO_ERC_1155,
 };
 
+export const TOKEN_TRANSFER_ERC_404: TokenTransfer = {
+  ...TOKEN_TRANSFER_ERC_20,
+  total: {
+    token_id: '35870',
+    value: '123',
+    decimals: '18',
+  },
+  token: TOKEN_INFO_ERC_404,
+};
+
 export const getTokenTransfersStub = (type?: TokenType, pagination: TokenTransferPagination | null = null): TokenTransferResponse => {
   switch (type) {
     case 'ERC-721':
       return generateListStub<'token_transfers'>(TOKEN_TRANSFER_ERC_721, 50, { next_page_params: pagination });
     case 'ERC-1155':
       return generateListStub<'token_transfers'>(TOKEN_TRANSFER_ERC_1155, 50, { next_page_params: pagination });
+    case 'ERC-404':
+      return generateListStub<'token_transfers'>(TOKEN_TRANSFER_ERC_404, 50, { next_page_params: pagination });
     default:
       return generateListStub<'token_transfers'>(TOKEN_TRANSFER_ERC_20, 50, { next_page_params: pagination });
   }
 };
 
+export const getTokenInstanceTransfersStub = (type?: TokenType, pagination: TokenInstanceTransferPagination | null = null): TokenInstanceTransferResponse => {
+  switch (type) {
+    case 'ERC-721':
+      return generateListStub<'token_instance_transfers'>(TOKEN_TRANSFER_ERC_721, 10, { next_page_params: pagination });
+    case 'ERC-1155':
+      return generateListStub<'token_instance_transfers'>(TOKEN_TRANSFER_ERC_1155, 10, { next_page_params: pagination });
+    case 'ERC-404':
+      return generateListStub<'token_instance_transfers'>(TOKEN_TRANSFER_ERC_404, 10, { next_page_params: pagination });
+    default:
+      return generateListStub<'token_instance_transfers'>(TOKEN_TRANSFER_ERC_20, 10, { next_page_params: pagination });
+  }
+};
+
 export const TOKEN_INSTANCE: TokenInstance = {
   animation_url: null,
   external_app_url: 'https://vipsland.com/nft/collections/genesis/188882',
@@ -105,8 +171,9 @@ export const TOKEN_INSTANCE: TokenInstance = {
     description: '**GENESIS #188882**, **8a77ca1bcaa4036f** :: *844th* generation of *#57806 and #57809* :: **eGenetic Hash Code (eDNA)** = *2822355e953a462d*',
     external_url: 'https://vipsland.com/nft/collections/genesis/188882',
     image: 'https://ipfs.vipsland.com/nft/collections/genesis/188882.gif',
-    name: 'GENESIS #188882, 8a77ca1bcaa4036f. Blockchain pixel PFP NFT + "on music video" trait inspired by God',
+    name: 'GENESIS #188882, 8a77ca1bcaa4036f',
   },
   owner: ADDRESS_PARAMS,
   holder_address_hash: ADDRESS_HASH,
+  thumbnails: null,
 };
diff --git a/stubs/tx.ts b/stubs/tx.ts
index 1f7eb1c0a6..370712b220 100644
--- a/stubs/tx.ts
+++ b/stubs/tx.ts
@@ -1,5 +1,5 @@
 import type { RawTracesResponse } from 'types/api/rawTrace';
-import type { Transaction } from 'types/api/transaction';
+import type { Transaction, TransactionsStats } from 'types/api/transaction';
 
 import { ADDRESS_PARAMS } from './addressParams';
 
@@ -12,7 +12,7 @@ export const TX: Transaction = {
     value: '2100000000000000',
   },
   gas_limit: '21000',
-  block: 9004925,
+  block_number: 9004925,
   status: 'ok',
   method: 'placeholder',
   confirmations: 71,
@@ -28,14 +28,14 @@ export const TX: Transaction = {
   base_fee_per_gas: '24',
   from: ADDRESS_PARAMS,
   token_transfers: null,
-  tx_types: [
+  transaction_types: [
     'coin_transfer',
   ],
   gas_used: '21000',
   created_contract: null,
   position: 0,
   nonce: 295929,
-  has_error_in_internal_txs: false,
+  has_error_in_internal_transactions: false,
   actions: [],
   decoded_input: null,
   token_transfers_overflow: false,
@@ -47,7 +47,7 @@ export const TX: Transaction = {
     0,
     14545,
   ],
-  tx_tag: null,
+  transaction_tag: null,
 };
 
 export const TX_ZKEVM_L2: Transaction = {
@@ -59,3 +59,10 @@ export const TX_ZKEVM_L2: Transaction = {
 };
 
 export const TX_RAW_TRACE: RawTracesResponse = [];
+
+export const TXS_STATS: TransactionsStats = {
+  pending_transactions_count: '4200',
+  transaction_fees_avg_24h: '22342870314428',
+  transaction_fees_sum_24h: '22184012506492688277',
+  transactions_count_24h: '992890',
+};
diff --git a/stubs/userOps.ts b/stubs/userOps.ts
index 3e2fcbd1c7..283e43c4fd 100644
--- a/stubs/userOps.ts
+++ b/stubs/userOps.ts
@@ -21,6 +21,9 @@ export const USER_OP: UserOp = {
   sender: ADDRESS_HASH,
   nonce: '0x00b',
   call_data: '0x123',
+  execute_call_data: null,
+  decoded_call_data: null,
+  decoded_execute_call_data: null,
   call_gas_limit: '71316',
   verification_gas_limit: '91551',
   pre_verification_gas: '53627',
diff --git a/stubs/utils.ts b/stubs/utils.ts
index 0e870f5eec..ef825f9252 100644
--- a/stubs/utils.ts
+++ b/stubs/utils.ts
@@ -1,29 +1,11 @@
-import type { ArrayElement } from "types/utils";
+import type { ArrayElement } from 'types/utils';
 
-import type {
-  PaginatedResources,
-  PaginatedResourcesOfBool,
-  PaginatedResponse,
-  ResourcePayloadOfBool,
-} from "lib/api/resources";
+import type { PaginatedResources, PaginatedResponse, PaginatedResponseItems } from 'lib/api/resources';
 
 export function generateListStub<Resource extends PaginatedResources>(
-  stub: ArrayElement<any>, // PaginatedResponse<Resource>["items"]
+  stub: ArrayElement<PaginatedResponseItems<Resource>>,
   num = 50,
-  rest: Omit<PaginatedResponse<Resource>, "items">,
-) {
-  return {
-    items: Array(num).fill(stub),
-    ...rest,
-  };
-}
-
-export function generateListStubOfBool<
-  Resource extends PaginatedResourcesOfBool
->(
-  stub: ArrayElement<ResourcePayloadOfBool<Resource>["items"]>,
-  num = 50,
-  rest: Omit<ResourcePayloadOfBool<Resource>, "items">,
+  rest: Omit<PaginatedResponse<Resource>, 'items'>,
 ) {
   return {
     items: Array(num).fill(stub),
diff --git a/stubs/validators.ts b/stubs/validators.ts
new file mode 100644
index 0000000000..885818e115
--- /dev/null
+++ b/stubs/validators.ts
@@ -0,0 +1,34 @@
+import type {
+  ValidatorStability,
+  ValidatorsStabilityCountersResponse,
+  ValidatorBlackfort,
+  ValidatorsBlackfortCountersResponse,
+} from 'types/api/validators';
+
+import { ADDRESS_PARAMS } from './addressParams';
+
+export const VALIDATOR_STABILITY: ValidatorStability = {
+  address: ADDRESS_PARAMS,
+  blocks_validated_count: 25987,
+  state: 'active',
+};
+
+export const VALIDATORS_STABILITY_COUNTERS: ValidatorsStabilityCountersResponse = {
+  active_validators_counter: '42',
+  active_validators_percentage: 7.14,
+  new_validators_counter_24h: '11',
+  validators_counter: '140',
+};
+
+export const VALIDATOR_BLACKFORT: ValidatorBlackfort = {
+  address: ADDRESS_PARAMS,
+  name: 'testnet-1',
+  commission: 10,
+  delegated_amount: '0',
+  self_bonded_amount: '10000',
+};
+
+export const VALIDATORS_BLACKFORT_COUNTERS: ValidatorsBlackfortCountersResponse = {
+  new_validators_counter_24h: '11',
+  validators_counter: '140',
+};
diff --git a/stubs/zkEvmL2.ts b/stubs/zkEvmL2.ts
index d68f1ac9d3..3878230972 100644
--- a/stubs/zkEvmL2.ts
+++ b/stubs/zkEvmL2.ts
@@ -1,24 +1,44 @@
-import type { ZkEvmL2TxnBatch, ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2TxnBatches';
+import type { ZkEvmL2DepositsItem, ZkEvmL2TxnBatch, ZkEvmL2TxnBatchesItem, ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2';
 
 import { TX_HASH } from './tx';
 
+export const ZKEVM_DEPOSITS_ITEM: ZkEvmL2DepositsItem = {
+  block_number: 19674901,
+  index: 181920,
+  l1_transaction_hash: '0xa74edfa5824a07a5f95ca1145140ed589df7f05bb17796bf18090b14c4566b5d',
+  l2_transaction_hash: '0x436d1c7ada270466ca0facdb96ecc22934d68d13b8a08f541b8df11b222967b5',
+  symbol: 'ETH',
+  timestamp: '2023-06-01T14:46:48.000000Z',
+  value: '0.13040262',
+};
+
+export const ZKEVM_WITHDRAWALS_ITEM: ZkEvmL2WithdrawalsItem = {
+  block_number: 11692968,
+  index: 47003,
+  l1_transaction_hash: '0x230cf46dabea287ac7d0ba83b8ea120bb83c1de58a81d34f44788f0459096c52',
+  l2_transaction_hash: '0x519d9f025ec47f08a48d708964d177189d2246ddf988686c481f5debcf097e34',
+  symbol: 'ETH',
+  timestamp: '2024-04-17T08:51:58.000000Z',
+  value: '110.35',
+};
+
 export const ZKEVM_L2_TXN_BATCHES_ITEM: ZkEvmL2TxnBatchesItem = {
   timestamp: '2023-06-01T14:46:48.000000Z',
   status: 'Finalized',
-  verify_tx_hash: TX_HASH,
-  sequence_tx_hash: TX_HASH,
+  verify_transaction_hash: TX_HASH,
+  sequence_transaction_hash: TX_HASH,
   number: 5218590,
-  tx_count: 9,
+  transaction_count: 9,
 };
 
 export const ZKEVM_L2_TXN_BATCH: ZkEvmL2TxnBatch = {
   acc_input_hash: '0xb815fe2832977f1324ad0124a019b938f189f7b470292f40a21284f15774b3b3',
   global_exit_root: '0x0000000000000000000000000000000000000000000000000000000000000000',
   number: 1,
-  sequence_tx_hash: '0x57b9b95db5f94f125710bdc8fbb3fabaac10125b44b0cb61dbc69daddf06d0cd',
+  sequence_transaction_hash: '0x57b9b95db5f94f125710bdc8fbb3fabaac10125b44b0cb61dbc69daddf06d0cd',
   state_root: '0xb9a589d6b3ae44d3b250a9993caa5e3721568197f56e4743989ecb2285d80ec4',
   status: 'Finalized',
   timestamp: '2023-09-15T06:22:48.000000Z',
   transactions: [ '0xff99dd67646b8f3d657cc6f19eb33abc346de2dbaccd03e45e7726cc28e3e186' ],
-  verify_tx_hash: '0x093276fa65c67d7b12dd96f4fefafba9d9ad2f1c23c6e53f96583971ce75352d',
+  verify_transaction_hash: '0x093276fa65c67d7b12dd96f4fefafba9d9ad2f1c23c6e53f96583971ce75352d',
 };
diff --git a/stubs/zkSyncL2.ts b/stubs/zkSyncL2.ts
new file mode 100644
index 0000000000..f8edd2c398
--- /dev/null
+++ b/stubs/zkSyncL2.ts
@@ -0,0 +1,27 @@
+import type { ZkSyncBatch, ZkSyncBatchesItem } from 'types/api/zkSyncL2';
+
+import { TX_HASH } from './tx';
+
+export const ZKSYNC_L2_TXN_BATCHES_ITEM: ZkSyncBatchesItem = {
+  commit_transaction_hash: TX_HASH,
+  commit_transaction_timestamp: '2022-03-17T19:33:04.519145Z',
+  execute_transaction_hash: TX_HASH,
+  execute_transaction_timestamp: '2022-03-17T20:49:48.856345Z',
+  number: 8002,
+  prove_transaction_hash: TX_HASH,
+  prove_transaction_timestamp: '2022-03-17T20:49:48.772442Z',
+  status: 'Executed on L1',
+  timestamp: '2022-03-17T17:00:11.000000Z',
+  transaction_count: 1215,
+};
+
+export const ZKSYNC_L2_TXN_BATCH: ZkSyncBatch = {
+  ...ZKSYNC_L2_TXN_BATCHES_ITEM,
+  start_block: 1245209,
+  end_block: 1245490,
+  l1_gas_price: '4173068062',
+  l1_transaction_count: 0,
+  l2_fair_gas_price: '100000000',
+  l2_transaction_count: 287,
+  root_hash: '0x108c635b94f941fcabcb85500daec2f6be4f0747dff649b1cdd9dd7a7a264792',
+};
diff --git a/theme/.gitignore b/theme/.gitignore
new file mode 100644
index 0000000000..b2d59d1f75
--- /dev/null
+++ b/theme/.gitignore
@@ -0,0 +1,2 @@
+/node_modules
+/dist
\ No newline at end of file
diff --git a/theme/components/Alert/Alert.pw.tsx b/theme/components/Alert/Alert.pw.tsx
index 96918e2cd6..144a4540e8 100644
--- a/theme/components/Alert/Alert.pw.tsx
+++ b/theme/components/Alert/Alert.pw.tsx
@@ -1,9 +1,8 @@
 import type { AlertProps } from '@chakra-ui/react';
 import { Alert, AlertIcon, AlertTitle } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 test.use({ viewport: { width: 400, height: 720 } });
 
@@ -29,16 +28,14 @@ const TEST_CASES: Array<AlertProps> = [
 TEST_CASES.forEach((props) => {
   const testName = Object.entries(props).map(([ key, value ]) => `${ key }=${ value }`).join(', ');
 
-  test(`${ testName } +@dark-mode`, async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <Alert { ...props }>
-          <AlertIcon/>
-          <AlertTitle>
-            This is alert text
-          </AlertTitle>
-        </Alert>
-      </TestApp>,
+  test(`${ testName } +@dark-mode`, async({ render }) => {
+    const component = await render(
+      <Alert { ...props }>
+        <AlertIcon/>
+        <AlertTitle>
+          This is alert text
+        </AlertTitle>
+      </Alert>,
     );
 
     await expect(component).toHaveScreenshot();
diff --git a/theme/components/Alert/Alert.ts b/theme/components/Alert/Alert.ts
index 457511c2d7..acce04ee0e 100644
--- a/theme/components/Alert/Alert.ts
+++ b/theme/components/Alert/Alert.ts
@@ -13,7 +13,7 @@ function getBg(props: StyleFunctionProps) {
   const { theme, colorScheme: c } = props;
   const darkBg = transparentize(`${ c }.200`, 0.16)(theme);
   return {
-    light: `colors.${ c }.${ c === 'red' ? '50' : '100' }`,
+    light: `colors.${ c }.100`,
     dark: darkBg,
   };
 }
diff --git a/theme/components/Alert/__screenshots__/Alert.pw.tsx_dark-color-mode_status-error-dark-mode-1.png b/theme/components/Alert/__screenshots__/Alert.pw.tsx_dark-color-mode_status-error-dark-mode-1.png
index 0d7cf86918..d1f0f8e805 100644
Binary files a/theme/components/Alert/__screenshots__/Alert.pw.tsx_dark-color-mode_status-error-dark-mode-1.png and b/theme/components/Alert/__screenshots__/Alert.pw.tsx_dark-color-mode_status-error-dark-mode-1.png differ
diff --git a/theme/components/Alert/__screenshots__/Alert.pw.tsx_dark-color-mode_status-info-colorScheme-gray-dark-mode-1.png b/theme/components/Alert/__screenshots__/Alert.pw.tsx_dark-color-mode_status-info-colorScheme-gray-dark-mode-1.png
index 44fa15ebd5..259f974e96 100644
Binary files a/theme/components/Alert/__screenshots__/Alert.pw.tsx_dark-color-mode_status-info-colorScheme-gray-dark-mode-1.png and b/theme/components/Alert/__screenshots__/Alert.pw.tsx_dark-color-mode_status-info-colorScheme-gray-dark-mode-1.png differ
diff --git a/theme/components/Alert/__screenshots__/Alert.pw.tsx_dark-color-mode_status-info-dark-mode-1.png b/theme/components/Alert/__screenshots__/Alert.pw.tsx_dark-color-mode_status-info-dark-mode-1.png
index e2666ea5d4..34f5fbbf66 100644
Binary files a/theme/components/Alert/__screenshots__/Alert.pw.tsx_dark-color-mode_status-info-dark-mode-1.png and b/theme/components/Alert/__screenshots__/Alert.pw.tsx_dark-color-mode_status-info-dark-mode-1.png differ
diff --git a/theme/components/Alert/__screenshots__/Alert.pw.tsx_dark-color-mode_status-success-dark-mode-1.png b/theme/components/Alert/__screenshots__/Alert.pw.tsx_dark-color-mode_status-success-dark-mode-1.png
index 1e0f949386..12ca38da9c 100644
Binary files a/theme/components/Alert/__screenshots__/Alert.pw.tsx_dark-color-mode_status-success-dark-mode-1.png and b/theme/components/Alert/__screenshots__/Alert.pw.tsx_dark-color-mode_status-success-dark-mode-1.png differ
diff --git a/theme/components/Alert/__screenshots__/Alert.pw.tsx_dark-color-mode_status-warning-dark-mode-1.png b/theme/components/Alert/__screenshots__/Alert.pw.tsx_dark-color-mode_status-warning-dark-mode-1.png
index d3a7652e7d..7b73b0cac1 100644
Binary files a/theme/components/Alert/__screenshots__/Alert.pw.tsx_dark-color-mode_status-warning-dark-mode-1.png and b/theme/components/Alert/__screenshots__/Alert.pw.tsx_dark-color-mode_status-warning-dark-mode-1.png differ
diff --git a/theme/components/Alert/__screenshots__/Alert.pw.tsx_default_status-error-dark-mode-1.png b/theme/components/Alert/__screenshots__/Alert.pw.tsx_default_status-error-dark-mode-1.png
index 2c591eb46a..03427b8929 100644
Binary files a/theme/components/Alert/__screenshots__/Alert.pw.tsx_default_status-error-dark-mode-1.png and b/theme/components/Alert/__screenshots__/Alert.pw.tsx_default_status-error-dark-mode-1.png differ
diff --git a/theme/components/Alert/__screenshots__/Alert.pw.tsx_default_status-info-colorScheme-gray-dark-mode-1.png b/theme/components/Alert/__screenshots__/Alert.pw.tsx_default_status-info-colorScheme-gray-dark-mode-1.png
index 8353f5d3f8..2f5c4ef2a6 100644
Binary files a/theme/components/Alert/__screenshots__/Alert.pw.tsx_default_status-info-colorScheme-gray-dark-mode-1.png and b/theme/components/Alert/__screenshots__/Alert.pw.tsx_default_status-info-colorScheme-gray-dark-mode-1.png differ
diff --git a/theme/components/Alert/__screenshots__/Alert.pw.tsx_default_status-info-dark-mode-1.png b/theme/components/Alert/__screenshots__/Alert.pw.tsx_default_status-info-dark-mode-1.png
index 25af83257a..7bb647aba2 100644
Binary files a/theme/components/Alert/__screenshots__/Alert.pw.tsx_default_status-info-dark-mode-1.png and b/theme/components/Alert/__screenshots__/Alert.pw.tsx_default_status-info-dark-mode-1.png differ
diff --git a/theme/components/Alert/__screenshots__/Alert.pw.tsx_default_status-success-dark-mode-1.png b/theme/components/Alert/__screenshots__/Alert.pw.tsx_default_status-success-dark-mode-1.png
index 59d97008ca..5dd37bf3b3 100644
Binary files a/theme/components/Alert/__screenshots__/Alert.pw.tsx_default_status-success-dark-mode-1.png and b/theme/components/Alert/__screenshots__/Alert.pw.tsx_default_status-success-dark-mode-1.png differ
diff --git a/theme/components/Alert/__screenshots__/Alert.pw.tsx_default_status-warning-dark-mode-1.png b/theme/components/Alert/__screenshots__/Alert.pw.tsx_default_status-warning-dark-mode-1.png
index e80b215d6b..75d62d855b 100644
Binary files a/theme/components/Alert/__screenshots__/Alert.pw.tsx_default_status-warning-dark-mode-1.png and b/theme/components/Alert/__screenshots__/Alert.pw.tsx_default_status-warning-dark-mode-1.png differ
diff --git a/theme/components/Badge.ts b/theme/components/Badge.ts
index 81f650a014..ab0b13a491 100644
--- a/theme/components/Badge.ts
+++ b/theme/components/Badge.ts
@@ -1,5 +1,5 @@
 import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
-import { mode, transparentize } from '@chakra-ui/theme-tools';
+import { mode } from '@chakra-ui/theme-tools';
 
 const baseStyle = defineStyle({
   fontSize: 'xs',
@@ -8,19 +8,42 @@ const baseStyle = defineStyle({
 });
 
 const variantSubtle = defineStyle((props) => {
-  const { colorScheme: c, theme } = props;
-  const darkBg = transparentize(`${ c }.200`, 0.16)(theme);
+  const { colorScheme: c } = props;
 
   if (c === 'gray') {
     return {
-      bg: mode('blackAlpha.100', 'whiteAlpha.400')(props),
-      color: mode('gray.600', 'gray.50')(props),
+      bg: mode('blackAlpha.50', 'whiteAlpha.100')(props),
+      color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
+    };
+  }
+
+  if (c === 'gray-blue') {
+    return {
+      bg: mode('gray.100', 'gray.800')(props),
+      color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
+      _hover: {
+        opacity: 0.76,
+      },
+    };
+  }
+
+  if (c === 'black-blue') {
+    return {
+      bg: mode('blue.50', 'blue.800')(props),
+      color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
+    };
+  }
+
+  if (c === 'black-purple') {
+    return {
+      bg: mode('purple.100', 'purple.800')(props),
+      color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
     };
   }
 
   return {
-    bg: mode(`${ c }.50`, darkBg)(props),
-    color: mode(`${ c }.500`, `${ c }.200`)(props),
+    bg: mode(`${ c }.50`, `${ c }.800`)(props),
+    color: mode(`${ c }.500`, `${ c }.100`)(props),
   };
 });
 
diff --git a/theme/components/Button/Button.pw.tsx b/theme/components/Button/Button.pw.tsx
index 4c0a48ba62..4435715b88 100644
--- a/theme/components/Button/Button.pw.tsx
+++ b/theme/components/Button/Button.pw.tsx
@@ -1,56 +1,78 @@
-import { Button } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
+import { Box, Button, Flex } from '@chakra-ui/react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
+
+test.use({ viewport: { width: 150, height: 350 } });
 
 [
-  { variant: 'solid' },
-  { variant: 'solid', colorScheme: 'gray', withDarkMode: true },
-  { variant: 'outline', colorScheme: 'gray', withDarkMode: true },
-  { variant: 'outline', colorScheme: 'gray-dark', withDarkMode: true },
-  { variant: 'outline', colorScheme: 'blue', withDarkMode: true },
-  { variant: 'simple', withDarkMode: true },
-  { variant: 'ghost', withDarkMode: true },
-  { variant: 'subtle' },
-  { variant: 'subtle', colorScheme: 'gray', withDarkMode: true },
-].forEach(({ variant, colorScheme, withDarkMode }) => {
+  { variant: 'solid', states: [ 'default', 'disabled', 'hovered', 'active' ] },
+  { variant: 'outline', colorScheme: 'gray', withDarkMode: true, states: [ 'default', 'disabled', 'hovered', 'active', 'selected' ] },
+  { variant: 'outline', colorScheme: 'blue', withDarkMode: true, states: [ 'default', 'disabled', 'hovered', 'active', 'selected' ] },
+  { variant: 'simple', withDarkMode: true, states: [ 'default', 'hovered' ] },
+  { variant: 'ghost', withDarkMode: true, states: [ 'default', 'hovered', 'active' ] },
+  { variant: 'subtle', states: [ 'default', 'hovered' ] },
+  { variant: 'subtle', colorScheme: 'gray', states: [ 'default', 'hovered' ], withDarkMode: true },
+  { variant: 'hero', states: [ 'default', 'hovered' ], withDarkMode: true },
+  { variant: 'header', states: [ 'default', 'hovered', 'selected' ], withDarkMode: true },
+  { variant: 'radio_group', states: [ 'default', 'hovered', 'selected' ], withDarkMode: true },
+].forEach(({ variant, colorScheme, withDarkMode, states }) => {
   test.describe(`variant ${ variant }${ colorScheme ? ` with ${ colorScheme } color scheme` : '' }${ withDarkMode ? ' +@dark-mode' : '' }`, () => {
-    test('base', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <Button variant={ variant } colorScheme={ colorScheme }>Click me</Button>
-        </TestApp>,
-      );
-      await expect(component.locator('button')).toHaveScreenshot();
-    });
-
-    test('disabled', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <Button variant={ variant } colorScheme={ colorScheme } isDisabled>Click me</Button>
-        </TestApp>,
-      );
-      await expect(component.locator('button')).toHaveScreenshot();
-    });
-
-    test('hovered', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <Button variant={ variant } colorScheme={ colorScheme }>Click me</Button>
-        </TestApp>,
-      );
-      await component.getByText(/click/i).hover();
-      await expect(component.locator('button')).toHaveScreenshot();
-    });
+    test('base view', async({ render }) => {
+      const component = await render(
+        <Flex p={ 2 } flexDir="column" rowGap={ 3 }>
+          { states?.map((state) => {
+            switch (state) {
+              case 'default': {
+                return (
+                  <Box>
+                    <Box color="text_secondary" fontSize="sm">Default:</Box>
+                    <Button variant={ variant } colorScheme={ colorScheme }>Click me</Button>
+                  </Box>
+                );
+              }
+              case 'disabled': {
+                return (
+                  <Box>
+                    <Box color="text_secondary" fontSize="sm">Disabled:</Box>
+                    <Button variant={ variant } colorScheme={ colorScheme } isDisabled>Click me</Button>
+                  </Box>
+                );
+              }
+              case 'active': {
+                return (
+                  <Box>
+                    <Box color="text_secondary" fontSize="sm">Active:</Box>
+                    <Button variant={ variant } colorScheme={ colorScheme } isActive>Click me</Button>
+                  </Box>
+                );
+              }
+              case 'hovered': {
+                return (
+                  <Box>
+                    <Box color="text_secondary" fontSize="sm">Hovered:</Box>
+                    <Button variant={ variant } colorScheme={ colorScheme }>Hover me</Button>
+                  </Box>
+                );
+              }
+              case 'selected': {
+                return (
+                  <Box>
+                    <Box color="text_secondary" fontSize="sm">Selected:</Box>
+                    <Button variant={ variant } colorScheme={ colorScheme } data-selected="true">Click me</Button>
+                  </Box>
+                );
+              }
 
-    test('active', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <Button variant={ variant } colorScheme={ colorScheme } isActive>Click me</Button>
-        </TestApp>,
+              default: {
+                return null;
+              }
+            }
+          }) }
+        </Flex>,
       );
-      await expect(component.locator('button')).toHaveScreenshot();
+      await component.getByText('Hover me').hover();
+      await expect(component).toHaveScreenshot();
     });
   });
 });
diff --git a/theme/components/Button/Button.ts b/theme/components/Button/Button.ts
index d96d2d49da..7f6ea7605f 100644
--- a/theme/components/Button/Button.ts
+++ b/theme/components/Button/Button.ts
@@ -2,28 +2,15 @@ import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
 import { mode } from '@chakra-ui/theme-tools';
 import { runIfFn } from '@chakra-ui/utils';
 
+import config from 'configs/app';
+
 const variantSolid = defineStyle((props) => {
   const { colorScheme: c } = props;
 
-  if (c === 'gray') {
-    const bg = mode(`gray.100`, `whiteAlpha.200`)(props);
-
-    return {
-      bg,
-      _hover: {
-        bg: mode(`gray.200`, `whiteAlpha.300`)(props),
-        _disabled: {
-          bg,
-        },
-      },
-      _active: { bg: mode(`gray.300`, `whiteAlpha.400`)(props) },
-    };
-  }
-
   const bg = `${ c }.600`;
   const color = 'white';
   const hoverBg = `${ c }.400`;
-  const activeBg = `${ c }.700`;
+  const activeBg = hoverBg;
 
   return {
     bg,
@@ -37,6 +24,8 @@ const variantSolid = defineStyle((props) => {
     _disabled: {
       opacity: 0.2,
     },
+    // According to design there is no "active" or "pressed" state
+    // It is simply should be the same as the "hover" state
     _active: { bg: activeBg },
     fontWeight: 600,
   };
@@ -45,22 +34,15 @@ const variantSolid = defineStyle((props) => {
 const variantOutline = defineStyle((props) => {
   const { colorScheme: c } = props;
 
-  const isGrayTheme = c === 'gray' || c === 'gray-dark';
+  const isGrayTheme = c === 'gray';
+
+  const bg = 'transparent';
+
   const color = isGrayTheme ? mode('blackAlpha.800', 'whiteAlpha.800')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
   const borderColor = isGrayTheme ? mode('gray.200', 'gray.600')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
-  const activeBg = isGrayTheme ? mode('blue.50', 'gray.600')(props) : mode(`${ c }.50`, 'gray.600')(props);
-  const activeColor = (() => {
-    if (c === 'gray') {
-      return mode('blue.600', 'gray.50')(props);
-    }
-    if (c === 'gray-dark') {
-      return mode('blue.600', 'gray.50')(props);
-    }
-    if (c === 'blue') {
-      return mode('blue.600', 'gray.50')(props);
-    }
-    return 'blue.600';
-  })();
+
+  const selectedBg = isGrayTheme ? mode('blue.50', 'gray.600')(props) : mode(`${ c }.50`, 'gray.600')(props);
+  const selectedColor = mode('blue.600', 'gray.50')(props);
 
   return {
     color,
@@ -68,40 +50,84 @@ const variantOutline = defineStyle((props) => {
     borderWidth: props.borderWidth || '2px',
     borderStyle: 'solid',
     borderColor,
-    bg: 'transparent',
+    bg,
     _hover: {
       color: 'link_hovered',
       borderColor: 'link_hovered',
-      bg: 'transparent',
-      _active: {
-        bg: props.isActive ? activeBg : 'transparent',
-        borderColor: props.isActive ? activeBg : 'link_hovered',
-        color: props.isActive ? activeColor : 'link_hovered',
-        p: {
-          color: 'link_hovered',
-        },
+      bg,
+      span: {
+        color: 'link_hovered',
       },
       _disabled: {
         color,
         borderColor,
       },
-      p: {
-        color: 'link_hovered',
-      },
     },
     _disabled: {
       opacity: 0.2,
     },
+    // According to design there is no "active" or "pressed" state
+    // It is simply should be the same as the "hover" state
     _active: {
-      bg: activeBg,
-      borderColor: activeBg,
-      color: activeColor,
+      color: 'link_hovered',
+      borderColor: 'link_hovered',
+      bg,
+      span: {
+        color: 'link_hovered',
+      },
       _disabled: {
-        color,
-        borderColor,
+        color: 'link_hovered',
+        borderColor: 'link_hovered',
       },
-      p: {
-        color: activeColor,
+    },
+    // We have a special state for this button variant that serves as a popover trigger.
+    // When any items (filters) are selected in the popover, the button should change its background and text color.
+    // The last CSS selector is for redefining styles for the TabList component.
+    [`
+      &[data-selected=true],
+      &[data-selected=true][aria-selected=true]
+    `]: {
+      bg: selectedBg,
+      color: selectedColor,
+      borderColor: selectedBg,
+    },
+  };
+});
+
+const variantRadioGroup = defineStyle((props) => {
+  const outline = runIfFn(variantOutline, props);
+  const bgColor = mode('blue.50', 'gray.800')(props);
+  const selectedTextColor = mode('blue.700', 'gray.50')(props);
+
+  return {
+    ...outline,
+    fontWeight: 500,
+    cursor: 'pointer',
+    bgColor: 'none',
+    borderColor: bgColor,
+    _hover: {
+      borderColor: bgColor,
+      color: 'link_hovered',
+    },
+    _active: {
+      bgColor: 'none',
+    },
+    _notFirst: {
+      borderLeftWidth: 0,
+    },
+    // We have a special state for this button variant that serves as a popover trigger.
+    // When any items (filters) are selected in the popover, the button should change its background and text color.
+    // The last CSS selector is for redefining styles for the TabList component.
+    [`
+      &[data-selected=true],
+      &[data-selected=true][aria-selected=true]
+    `]: {
+      cursor: 'initial',
+      bgColor,
+      borderColor: bgColor,
+      color: selectedTextColor,
+      _hover: {
+        color: selectedTextColor,
       },
     },
   };
@@ -165,12 +191,78 @@ const variantSubtle = defineStyle((props) => {
   };
 });
 
+// for buttons in the hero banner
+const variantHero = defineStyle((props) => {
+  const buttonConfig = config.UI.homepage.heroBanner?.button;
+  return {
+    bg: mode(
+      buttonConfig?._default?.background?.[0] || 'blue.600',
+      buttonConfig?._default?.background?.[1] || buttonConfig?._default?.background?.[0] || 'blue.600',
+    )(props),
+    color: mode(
+      buttonConfig?._default?.text_color?.[0] || 'white',
+      buttonConfig?._default?.text_color?.[1] || buttonConfig?._default?.text_color?.[0] || 'white',
+    )(props),
+    _hover: {
+      bg: mode(
+        buttonConfig?._hover?.background?.[0] || 'blue.400',
+        buttonConfig?._hover?.background?.[1] || buttonConfig?._hover?.background?.[0] || 'blue.400',
+      )(props),
+      color: mode(
+        buttonConfig?._hover?.text_color?.[0] || 'white',
+        buttonConfig?._hover?.text_color?.[1] || buttonConfig?._hover?.text_color?.[0] || 'white',
+      )(props),
+    },
+    '&[data-selected=true]': {
+      bg: mode(
+        buttonConfig?._selected?.background?.[0] || 'blue.50',
+        buttonConfig?._selected?.background?.[1] || buttonConfig?._selected?.background?.[0] || 'blue.50',
+      )(props),
+      color: mode(
+        buttonConfig?._selected?.text_color?.[0] || 'blackAlpha.800',
+        buttonConfig?._selected?.text_color?.[1] || buttonConfig?._selected?.text_color?.[0] || 'blackAlpha.800',
+      )(props),
+    },
+  };
+});
+
+// for buttons in the page header
+const variantHeader = defineStyle((props) => {
+
+  return {
+    bgColor: 'transparent',
+    color: mode('blackAlpha.800', 'gray.400')(props),
+    borderColor: mode('gray.300', 'gray.600')(props),
+    borderWidth: props.borderWidth || '2px',
+    borderStyle: 'solid',
+    _hover: {
+      color: 'link_hovered',
+      borderColor: 'link_hovered',
+    },
+    '&[data-selected=true]': {
+      bgColor: mode('blackAlpha.50', 'whiteAlpha.100')(props),
+      color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
+      borderColor: 'transparent',
+      borderWidth: props.borderWidth || '0px',
+    },
+    '&[data-selected=true][data-warning=true]': {
+      bgColor: mode('orange.100', 'orange.900')(props),
+      color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
+      borderColor: 'transparent',
+      borderWidth: props.borderWidth || '0px',
+    },
+  };
+});
+
 const variants = {
   solid: variantSolid,
   outline: variantOutline,
   simple: variantSimple,
   ghost: variantGhost,
   subtle: variantSubtle,
+  hero: variantHero,
+  header: variantHeader,
+  radio_group: variantRadioGroup,
 };
 
 const baseStyle = defineStyle({
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-active-1.png
deleted file mode 100644
index f519401d1e..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-base-1.png
deleted file mode 100644
index 336dd1b8f7..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-base-view-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-base-view-1.png
new file mode 100644
index 0000000000..37ff0091e6
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-base-view-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-disabled-1.png
deleted file mode 100644
index 884ac88b55..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-hovered-1.png
deleted file mode 100644
index 5bb143cf3e..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-header-dark-mode-base-view-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-header-dark-mode-base-view-1.png
new file mode 100644
index 0000000000..e622a8b4eb
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-header-dark-mode-base-view-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-hero-dark-mode-base-view-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-hero-dark-mode-base-view-1.png
new file mode 100644
index 0000000000..ddc8f0ef3c
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-hero-dark-mode-base-view-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-active-1.png
deleted file mode 100644
index 62d690fbef..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-base-1.png
deleted file mode 100644
index 63c25c4ef3..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-base-view-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-base-view-1.png
new file mode 100644
index 0000000000..b079eac502
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-base-view-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-disabled-1.png
deleted file mode 100644
index c32c9f4700..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-hovered-1.png
deleted file mode 100644
index 289408bbbd..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-active-1.png
deleted file mode 100644
index 62d690fbef..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-base-1.png
deleted file mode 100644
index fbc8117dce..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-base-view-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-base-view-1.png
new file mode 100644
index 0000000000..9262b0d04a
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-base-view-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-disabled-1.png
deleted file mode 100644
index 723caaac4f..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-hovered-1.png
deleted file mode 100644
index 289408bbbd..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-active-1.png
deleted file mode 100644
index 62d690fbef..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-base-1.png
deleted file mode 100644
index fbc8117dce..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-disabled-1.png
deleted file mode 100644
index 723caaac4f..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-hovered-1.png
deleted file mode 100644
index 289408bbbd..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-radio-group-dark-mode-base-view-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-radio-group-dark-mode-base-view-1.png
new file mode 100644
index 0000000000..cf4a712198
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-radio-group-dark-mode-base-view-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-active-1.png
deleted file mode 100644
index 9d2e16c466..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-base-1.png
deleted file mode 100644
index 9d2e16c466..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-base-view-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-base-view-1.png
new file mode 100644
index 0000000000..82c8ff359e
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-base-view-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-disabled-1.png
deleted file mode 100644
index ce5d907dd2..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-hovered-1.png
deleted file mode 100644
index 62603351af..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-active-1.png
deleted file mode 100644
index 3ced2622bc..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-base-1.png
deleted file mode 100644
index 5dc02f7215..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-disabled-1.png
deleted file mode 100644
index 061a4a511e..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-hovered-1.png
deleted file mode 100644
index 7970651830..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-active-1.png
deleted file mode 100644
index 9306ab7578..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-base-1.png
deleted file mode 100644
index 9306ab7578..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-base-view-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-base-view-1.png
new file mode 100644
index 0000000000..aedec3455a
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-base-view-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-disabled-1.png
deleted file mode 100644
index 5d08e00f0f..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-hovered-1.png
deleted file mode 100644
index 0819be4cc5..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-active-1.png
deleted file mode 100644
index ff0444b3e3..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-base-1.png
deleted file mode 100644
index 0c80b4f99d..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-base-view-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-base-view-1.png
new file mode 100644
index 0000000000..c1f3c959cf
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-base-view-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-disabled-1.png
deleted file mode 100644
index be418bc9d2..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-hovered-1.png
deleted file mode 100644
index eb4b1b612f..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-header-dark-mode-base-view-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-header-dark-mode-base-view-1.png
new file mode 100644
index 0000000000..026d216e0a
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-header-dark-mode-base-view-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-hero-dark-mode-base-view-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-hero-dark-mode-base-view-1.png
new file mode 100644
index 0000000000..5df1869f44
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-hero-dark-mode-base-view-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-active-1.png
deleted file mode 100644
index 04e7804665..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-base-1.png
deleted file mode 100644
index 6b24fb0b36..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-base-view-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-base-view-1.png
new file mode 100644
index 0000000000..a3a33865d4
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-base-view-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-disabled-1.png
deleted file mode 100644
index 258b31af68..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-hovered-1.png
deleted file mode 100644
index f3692b3216..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-active-1.png
deleted file mode 100644
index 04e7804665..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-base-1.png
deleted file mode 100644
index 33d32d1e2c..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-base-view-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-base-view-1.png
new file mode 100644
index 0000000000..9d69c07b5d
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-base-view-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-disabled-1.png
deleted file mode 100644
index 0a1a9a27f4..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-hovered-1.png
deleted file mode 100644
index f3692b3216..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-active-1.png
deleted file mode 100644
index 04e7804665..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-base-1.png
deleted file mode 100644
index 33d32d1e2c..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-disabled-1.png
deleted file mode 100644
index 0a1a9a27f4..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-hovered-1.png
deleted file mode 100644
index f3692b3216..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-radio-group-dark-mode-base-view-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-radio-group-dark-mode-base-view-1.png
new file mode 100644
index 0000000000..f8a1d79190
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-radio-group-dark-mode-base-view-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-active-1.png
deleted file mode 100644
index 99262ae8a5..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-base-1.png
deleted file mode 100644
index 99262ae8a5..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-base-view-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-base-view-1.png
new file mode 100644
index 0000000000..eb6bb39eb0
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-base-view-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-disabled-1.png
deleted file mode 100644
index a6e2c3094c..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-hovered-1.png
deleted file mode 100644
index a84dd4a732..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-active-1.png
deleted file mode 100644
index 3b07d16161..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-base-1.png
deleted file mode 100644
index e2b1284365..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-base-view-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-base-view-1.png
new file mode 100644
index 0000000000..88de692805
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-base-view-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-disabled-1.png
deleted file mode 100644
index de9a716a02..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-hovered-1.png
deleted file mode 100644
index a895dc475a..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-active-1.png
deleted file mode 100644
index 8c0cb0427e..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-base-1.png
deleted file mode 100644
index e014823eae..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-disabled-1.png
deleted file mode 100644
index ee63e2c93f..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-hovered-1.png
deleted file mode 100644
index ba1feb7c4d..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-active-1.png
deleted file mode 100644
index 1e13e03bad..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-base-1.png
deleted file mode 100644
index 1e13e03bad..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-base-view-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-base-view-1.png
new file mode 100644
index 0000000000..36b02771b6
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-base-view-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-disabled-1.png
deleted file mode 100644
index fdd327ee61..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-hovered-1.png
deleted file mode 100644
index b8d4dce465..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-active-1.png
deleted file mode 100644
index b43cdb9499..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-base-1.png
deleted file mode 100644
index b43cdb9499..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-base-view-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-base-view-1.png
new file mode 100644
index 0000000000..fdecbca7b8
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-base-view-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-disabled-1.png
deleted file mode 100644
index 6173c806b7..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-hovered-1.png
deleted file mode 100644
index 3ff3167615..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Form.ts b/theme/components/Form.ts
index 582c0e96ca..119e2b0316 100644
--- a/theme/components/Form.ts
+++ b/theme/components/Form.ts
@@ -1,9 +1,8 @@
 import { formAnatomy as parts } from '@chakra-ui/anatomy';
 import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
 import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
-import { getColor, mode } from '@chakra-ui/theme-tools';
 
-import getDefaultFormColors from '../utils/getDefaultFormColors';
+import getFormStyles from '../utils/getFormStyles';
 import FancySelect from './FancySelect';
 import FormLabel from './FormLabel';
 import Input from './Input';
@@ -13,13 +12,12 @@ const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(parts.keys);
 
 function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunctionProps) {
-  const { theme } = props;
-  const { focusPlaceholderColor, errorColor } = getDefaultFormColors(props);
+  const formStyles = getFormStyles(props);
 
   const activeLabelStyles = {
     ...FormLabel.variants?.floating?.(props)._focusWithin,
     ...FormLabel.sizes?.[size](props)._focusWithin,
-  } || {};
+  };
 
   const activeInputStyles = (() => {
     switch (size) {
@@ -63,12 +61,29 @@ function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunction
       // label styles
       label: FormLabel.sizes?.[size](props) || {},
       'input:not(:placeholder-shown) + label, textarea:not(:placeholder-shown) + label': activeLabelStyles,
+      'textarea:not(:placeholder-shown) + label': {
+        bgColor: formStyles.input.filled.bgColor,
+      },
+      [`
+        input[readonly] + label,
+        textarea[readonly] + label,
+        &[aria-readonly=true] label
+      `]: {
+        bgColor: formStyles.input.readOnly.bgColor,
+      },
       [`
         input[aria-invalid=true] + label, 
         textarea[aria-invalid=true] + label,
         &[aria-invalid=true] label
       `]: {
-        color: getColor(theme, errorColor),
+        color: formStyles.placeholder.error.color,
+      },
+      [`
+        input[disabled] + label,
+        textarea[disabled] + label,
+        &[aria-disabled=true] label
+      `]: {
+        color: formStyles.placeholder.disabled.color,
       },
 
       // input styles
@@ -79,31 +94,24 @@ function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunction
         padding: inputPx,
       },
       'input:not(:placeholder-shown), textarea:not(:placeholder-shown)': activeInputStyles,
-      [`
-        input[disabled] + label, 
-        &[aria-disabled=true] label
-      `]: {
-        backgroundColor: 'transparent',
-      },
-      // in textarea bg of label could not be transparent; it should match the background color of input but without alpha
-      // so we have to use non-standard colors here
-      'textarea[disabled] + label': {
-        backgroundColor: mode('#ececec', '#232425')(props),
-      },
-      'textarea[disabled] + label[data-in-modal=true]': {
-        backgroundColor: mode('#ececec', '#292b34')(props),
-      },
 
       // indicator styles
       'input:not(:placeholder-shown) + label .chakra-form__required-indicator, textarea:not(:placeholder-shown) + label .chakra-form__required-indicator': {
-        color: getColor(theme, focusPlaceholderColor),
+        color: formStyles.placeholder.default.color,
       },
       [`
         input[aria-invalid=true] + label .chakra-form__required-indicator,
         textarea[aria-invalid=true] + label .chakra-form__required-indicator,
         &[aria-invalid=true] .chakra-form__required-indicator
       `]: {
-        color: getColor(theme, errorColor),
+        color: formStyles.placeholder.error.color,
+      },
+      [`
+        input[disabled] + label .chakra-form__required-indicator,
+        textarea[disabled] + label .chakra-form__required-indicator,
+        &[aria-disabled=true] .chakra-form__required-indicator
+      `]: {
+        color: formStyles.placeholder.disabled.color,
       },
     },
   };
diff --git a/theme/components/Form/FormControl.pw.tsx b/theme/components/Form/FormControl.pw.tsx
index 79cfba10ce..39ab811036 100644
--- a/theme/components/Form/FormControl.pw.tsx
+++ b/theme/components/Form/FormControl.pw.tsx
@@ -1,20 +1,17 @@
 import { FormControl, Input, FormLabel } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 test.use({ viewport: { width: 500, height: 300 } });
 
 test.describe('floating label size md +@dark-mode', () => {
-  test('empty', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <FormControl variant="floating" id="name" isRequired size="md">
-          <Input required value=""/>
-          <FormLabel>Smart contract / Address (0x...)</FormLabel>
-        </FormControl>
-      </TestApp>,
+  test('empty', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="md">
+        <Input required value=""/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
     );
 
     await expect(component).toHaveScreenshot();
@@ -23,14 +20,12 @@ test.describe('floating label size md +@dark-mode', () => {
     await expect(component).toHaveScreenshot();
   });
 
-  test('empty error', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <FormControl variant="floating" id="name" isRequired size="md">
-          <Input required value="" isInvalid/>
-          <FormLabel>Smart contract / Address (0x...)</FormLabel>
-        </FormControl>
-      </TestApp>,
+  test('empty error', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="md">
+        <Input required value="" isInvalid/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
     );
 
     await expect(component).toHaveScreenshot();
@@ -39,40 +34,45 @@ test.describe('floating label size md +@dark-mode', () => {
     await expect(component).toHaveScreenshot();
   });
 
-  test('filled', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <FormControl variant="floating" id="name" isRequired size="md">
-          <Input required value="foo"/>
-          <FormLabel>Smart contract / Address (0x...)</FormLabel>
-        </FormControl>
-      </TestApp>,
+  test('filled', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="md">
+        <Input required value="foo"/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
     );
 
     await expect(component).toHaveScreenshot();
   });
 
-  test('filled disabled', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <FormControl variant="floating" id="name" isRequired size="md">
-          <Input required value="foo" isDisabled/>
-          <FormLabel>Smart contract / Address (0x...)</FormLabel>
-        </FormControl>
-      </TestApp>,
+  test('filled disabled', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="md">
+        <Input required value="foo" isDisabled/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
     );
 
     await expect(component).toHaveScreenshot();
   });
 
-  test('filled error', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <FormControl variant="floating" id="name" isRequired size="md">
-          <Input required value="foo" isInvalid/>
-          <FormLabel>Smart contract / Address (0x...)</FormLabel>
-        </FormControl>
-      </TestApp>,
+  test('filled read-only', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="md">
+        <Input required value="foo" isReadOnly/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('filled error', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="md">
+        <Input required value="foo" isInvalid/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
     );
 
     await expect(component).toHaveScreenshot();
@@ -80,14 +80,12 @@ test.describe('floating label size md +@dark-mode', () => {
 });
 
 test.describe('floating label size lg +@dark-mode', () => {
-  test('empty', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <FormControl variant="floating" id="name" isRequired size="lg">
-          <Input required value=""/>
-          <FormLabel>Smart contract / Address (0x...)</FormLabel>
-        </FormControl>
-      </TestApp>,
+  test('empty', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="lg">
+        <Input required value=""/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
     );
 
     await expect(component).toHaveScreenshot();
@@ -96,14 +94,12 @@ test.describe('floating label size lg +@dark-mode', () => {
     await expect(component).toHaveScreenshot();
   });
 
-  test('filled', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <FormControl variant="floating" id="name" isRequired size="lg">
-          <Input required value="foo"/>
-          <FormLabel>Smart contract / Address (0x...)</FormLabel>
-        </FormControl>
-      </TestApp>,
+  test('filled', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="lg">
+        <Input required value="foo"/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
     );
 
     await expect(component).toHaveScreenshot();
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-lg-dark-mode-empty-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-lg-dark-mode-empty-1.png
index 45d9e21bdb..1f1dd2e377 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-lg-dark-mode-empty-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-lg-dark-mode-empty-1.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-lg-dark-mode-filled-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-lg-dark-mode-filled-1.png
index d562e42ec3..ff66b3eb82 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-lg-dark-mode-filled-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-lg-dark-mode-filled-1.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-lg-dark-mode-filled-2.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-lg-dark-mode-filled-2.png
index 7dc7f74c87..c56bd9edeb 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-lg-dark-mode-filled-2.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-lg-dark-mode-filled-2.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-1.png
index ef143a201a..3453be33b4 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-1.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-1.png
index f6a6920831..4d19167035 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-1.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-2.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-2.png
index 74975f5d7b..8f252b3add 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-2.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-2.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-1.png
index 39bc437bdb..d1c5826ade 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-1.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-disabled-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-disabled-1.png
index 4d1637cf2c..c37d9af17f 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-disabled-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-disabled-1.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-error-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-error-1.png
index 51d89c26bb..36af890044 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-error-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-error-1.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-read-only-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-read-only-1.png
new file mode 100644
index 0000000000..06974bcc7c
Binary files /dev/null and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-read-only-1.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-lg-dark-mode-empty-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-lg-dark-mode-empty-1.png
index 233dfbc010..eea73198d2 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-lg-dark-mode-empty-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-lg-dark-mode-empty-1.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-lg-dark-mode-filled-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-lg-dark-mode-filled-1.png
index 8fceb62be4..24de73349c 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-lg-dark-mode-filled-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-lg-dark-mode-filled-1.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-lg-dark-mode-filled-2.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-lg-dark-mode-filled-2.png
index 94f92a10b8..0f549d03d9 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-lg-dark-mode-filled-2.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-lg-dark-mode-filled-2.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-empty-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-empty-1.png
index 3aa991ab81..6c295197f2 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-empty-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-empty-1.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-empty-error-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-empty-error-1.png
index b6266c0093..84482f53d7 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-empty-error-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-empty-error-1.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-1.png
index 2fc531aa82..56712ddcf5 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-1.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-disabled-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-disabled-1.png
index 8e19274714..9b30da40a5 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-disabled-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-disabled-1.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-error-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-error-1.png
index 5d0e7e2e55..acb481c7a7 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-error-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-error-1.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-read-only-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-read-only-1.png
new file mode 100644
index 0000000000..c721e5196e
Binary files /dev/null and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-read-only-1.png differ
diff --git a/theme/components/FormLabel.ts b/theme/components/FormLabel.ts
index 03f86537d6..c67ac969eb 100644
--- a/theme/components/FormLabel.ts
+++ b/theme/components/FormLabel.ts
@@ -1,7 +1,6 @@
 import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
-import { getColor, mode } from '@chakra-ui/theme-tools';
 
-import getDefaultFormColors from '../utils/getDefaultFormColors';
+import getFormStyles from '../utils/getFormStyles';
 
 const baseStyle = defineStyle({
   display: 'flex',
@@ -13,14 +12,12 @@ const baseStyle = defineStyle({
   transitionDuration: 'normal',
   opacity: 1,
   _disabled: {
-    opacity: 0.4,
+    opacity: 0.2,
   },
 });
 
 const variantFloating = defineStyle((props) => {
-  const { theme, backgroundColor } = props;
-  const { focusPlaceholderColor } = getDefaultFormColors(props);
-  const bc = backgroundColor || mode('white', 'black')(props);
+  const formStyles = getFormStyles(props);
 
   return {
     left: '2px',
@@ -29,8 +26,8 @@ const variantFloating = defineStyle((props) => {
     position: 'absolute',
     borderRadius: 'base',
     boxSizing: 'border-box',
-    color: 'gray.500',
-    backgroundColor: 'transparent',
+    color: formStyles.placeholder.default.color,
+    backgroundColor: props.bgColor || props.backgroundColor || 'transparent',
     pointerEvents: 'none',
     margin: 0,
     transformOrigin: 'top left',
@@ -39,8 +36,8 @@ const variantFloating = defineStyle((props) => {
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
     _focusWithin: {
-      backgroundColor: bc,
-      color: getColor(theme, focusPlaceholderColor),
+      backgroundColor: props.bgColor || props.backgroundColor || 'transparent',
+      color: formStyles.placeholder.default.color,
       fontSize: 'xs',
       lineHeight: '16px',
       borderTopRightRadius: 'none',
@@ -70,7 +67,7 @@ const sizes = {
       return {
         fontSize: 'md',
         lineHeight: '24px',
-        padding: '28px 4px 28px 24px',
+        padding: '26px 4px 26px 24px',
         right: '22px',
         _focusWithin: {
           padding: '16px 0 2px 24px',
diff --git a/theme/components/Heading.ts b/theme/components/Heading.ts
index 7b08a7efa9..e9cf8c51b2 100644
--- a/theme/components/Heading.ts
+++ b/theme/components/Heading.ts
@@ -17,7 +17,6 @@ const sizes = {
   xl: defineStyle({
     fontSize: '40px',
     lineHeight: '48px',
-    letterSpacing: '-1px',
   }),
   lg: defineStyle({
     fontSize: '32px',
diff --git a/theme/components/Input.ts b/theme/components/Input.ts
index 50a0adb0d5..d127835109 100644
--- a/theme/components/Input.ts
+++ b/theme/components/Input.ts
@@ -29,6 +29,20 @@ const size = {
     h: '40px',
     borderRadius: 'base',
   }),
+  // TEMPORARY INPUT SIZE!!!
+  // soon we will migrate to the new size and get rid off this one
+  // lg -> 60
+  // md -> 48
+  // sm -> 40
+  // xs ->32
+  sm_md: defineStyle({
+    fontSize: 'md',
+    lineHeight: '24px',
+    px: '8px',
+    py: '12px',
+    h: '48px',
+    borderRadius: 'base',
+  }),
   md: defineStyle({
     fontSize: 'md',
     lineHeight: '20px',
@@ -71,6 +85,10 @@ const sizes = {
     field: size.sm,
     addon: size.sm,
   }),
+  sm_md: definePartsStyle({
+    field: size.sm_md,
+    addon: size.sm_md,
+  }),
   md: definePartsStyle({
     field: size.md,
     addon: size.md,
diff --git a/theme/components/Menu.ts b/theme/components/Menu.ts
index fb314ddcfd..5e425ff738 100644
--- a/theme/components/Menu.ts
+++ b/theme/components/Menu.ts
@@ -25,15 +25,15 @@ const baseStyleList = defineStyle({
 
 const baseStyleItem = defineStyle({
   _focus: {
-    [$bg.variable]: 'colors.blue.50',
+    [$bg.variable]: 'transparent',
     _dark: {
-      [$bg.variable]: 'colors.gray.800',
+      [$bg.variable]: 'transparent',
     },
   },
   _hover: {
     [$bg.variable]: 'colors.blue.50',
     _dark: {
-      [$bg.variable]: 'colors.gray.800',
+      [$bg.variable]: 'colors.whiteAlpha.100',
     },
   },
   bg: $bg.reference,
diff --git a/theme/components/Modal.ts b/theme/components/Modal.ts
index d2e291f8d5..2992f4e7d8 100644
--- a/theme/components/Modal.ts
+++ b/theme/components/Modal.ts
@@ -10,11 +10,11 @@ import { runIfFn } from '@chakra-ui/utils';
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
 
-const baseStyleDialog = defineStyle((props) => {
+const baseStyleDialog = defineStyle(() => {
   return {
     padding: 8,
     borderRadius: 'lg',
-    bg: mode('white', 'gray.900')(props),
+    bg: 'dialog_bg',
     margin: 'auto',
   };
 });
@@ -61,7 +61,7 @@ const baseStyleOverlay = defineStyle({
 });
 
 const baseStyle = definePartsStyle((props) => ({
-  dialog: runIfFn(baseStyleDialog, props),
+  dialog: runIfFn(baseStyleDialog),
   dialogContainer: baseStyleDialogContainer,
 
   header: runIfFn(baseStyleHeader, props),
diff --git a/theme/components/PinInput.ts b/theme/components/PinInput.ts
new file mode 100644
index 0000000000..251b38ca78
--- /dev/null
+++ b/theme/components/PinInput.ts
@@ -0,0 +1,34 @@
+import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
+
+import getOutlinedFieldStyles from '../utils/getOutlinedFieldStyles';
+
+const baseStyle = defineStyle({
+  textAlign: 'center',
+  bgColor: 'dialog_bg',
+});
+
+const sizes = {
+  md: defineStyle({
+    fontSize: 'md',
+    w: 10,
+    h: 10,
+    borderRadius: 'md',
+  }),
+};
+
+const variants = {
+  outline: defineStyle(
+    (props) => getOutlinedFieldStyles(props),
+  ),
+};
+
+const PinInput = defineStyleConfig({
+  baseStyle,
+  sizes,
+  variants,
+  defaultProps: {
+    size: 'md',
+  },
+});
+
+export default PinInput;
diff --git a/theme/components/Switch.ts b/theme/components/Switch.ts
index b432e84bdc..6059618c0f 100644
--- a/theme/components/Switch.ts
+++ b/theme/components/Switch.ts
@@ -15,6 +15,9 @@ const baseStyleTrack = defineStyle((props) => {
         bg: mode(`${ c }.600`, `${ c }.400`)(props),
       },
     },
+    _focusVisible: {
+      boxShadow: 'none',
+    },
   };
 });
 
diff --git a/theme/components/Table.ts b/theme/components/Table.ts
index 0441fbb72c..583cd0ece7 100644
--- a/theme/components/Table.ts
+++ b/theme/components/Table.ts
@@ -30,39 +30,30 @@ const variantSimple = definePartsStyle((props) => {
 });
 
 const sizes = {
-  md: definePartsStyle({
-    th: {
-      px: 4,
-      fontSize: 'sm',
-    },
-    td: {
-      p: 4,
-    },
-  }),
   sm: definePartsStyle({
-    th: {
-      px: '10px',
-      py: '10px',
-      fontSize: 'sm',
-    },
-    td: {
-      px: '10px',
-      py: 4,
-      fontSize: 'sm',
-      fontWeight: 500,
-    },
-  }),
-  xs: definePartsStyle({
     th: {
       px: '6px',
       py: '10px',
       fontSize: 'sm',
+      _first: {
+        pl: 3,
+      },
+      _last: {
+        pr: 3,
+      },
     },
     td: {
       px: '6px',
       py: 4,
       fontSize: 'sm',
       fontWeight: 500,
+      lineHeight: 5,
+      _first: {
+        pl: 3,
+      },
+      _last: {
+        pr: 3,
+      },
     },
   }),
 };
@@ -104,6 +95,10 @@ const Table = defineMultiStyleConfig({
   baseStyle,
   sizes,
   variants,
+  defaultProps: {
+    size: 'sm',
+    variant: 'simple',
+  },
 });
 
 export default Table;
diff --git a/theme/components/Tabs.ts b/theme/components/Tabs.ts
index e73668761a..f64bec2886 100644
--- a/theme/components/Tabs.ts
+++ b/theme/components/Tabs.ts
@@ -41,6 +41,30 @@ const variantOutline = definePartsStyle((props) => {
   };
 });
 
+const variantRadioGroup = definePartsStyle((props) => {
+  return {
+    tab: {
+      ...Button.baseStyle,
+      ...Button.variants?.radio_group(props),
+      _selected: Button.variants?.radio_group(props)?.[`
+      &[data-selected=true],
+      &[data-selected=true][aria-selected=true]
+    `],
+      borderRadius: 'none',
+      '&[role="tab"]': {
+        _first: {
+          borderTopLeftRadius: 'base',
+          borderBottomLeftRadius: 'base',
+        },
+        _last: {
+          borderTopRightRadius: 'base',
+          borderBottomRightRadius: 'base',
+        },
+      },
+    },
+  };
+});
+
 const sizes = {
   sm: definePartsStyle({
     tab: Button.sizes?.sm,
@@ -53,6 +77,7 @@ const sizes = {
 const variants = {
   'soft-rounded': variantSoftRounded,
   outline: variantOutline,
+  radio_group: variantRadioGroup,
 };
 
 const Tabs = defineMultiStyleConfig({
diff --git a/theme/components/Tag/Tag.pw.tsx b/theme/components/Tag/Tag.pw.tsx
index 6141db546d..28da22a9ef 100644
--- a/theme/components/Tag/Tag.pw.tsx
+++ b/theme/components/Tag/Tag.pw.tsx
@@ -1,29 +1,20 @@
 import { Box, Tag } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
-
-[ 'blue', 'gray', 'orange', 'green', 'purple', 'cyan', 'teal' ].forEach((colorScheme) => {
-  test(`${ colorScheme } color scheme +@dark-mode`, async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <Tag colorScheme={ colorScheme }>content</Tag>
-      </TestApp>,
-    );
+import { test, expect } from 'playwright/lib';
 
+[ 'blue', 'gray', 'gray-blue', 'orange', 'green', 'purple', 'cyan', 'teal' ].forEach((colorScheme) => {
+  test(`${ colorScheme } color scheme +@dark-mode`, async({ render }) => {
+    const component = await render(<Tag colorScheme={ colorScheme }>content</Tag>);
     await expect(component.getByText(/content/i)).toHaveScreenshot();
   });
 });
 
-test('with long text', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box w="100px">
-        <Tag>this is very looooooooooong text</Tag>
-      </Box>
-    </TestApp>,
+test('with long text', async({ render }) => {
+  const component = await render(
+    <Box w="100px">
+      <Tag>this is very looooooooooong text</Tag>
+    </Box>,
   );
-
   await expect(component.getByText(/this/i)).toHaveScreenshot();
 });
diff --git a/theme/components/Tag/Tag.ts b/theme/components/Tag/Tag.ts
index 5cd5b2bd97..240a2a1c26 100644
--- a/theme/components/Tag/Tag.ts
+++ b/theme/components/Tag/Tag.ts
@@ -3,9 +3,11 @@ import {
   createMultiStyleConfigHelpers,
   defineStyle,
 } from '@chakra-ui/styled-system';
+import { mode } from '@chakra-ui/theme-tools';
 
 import getDefaultTransitionProps from '../../utils/getDefaultTransitionProps';
 import Badge from '../Badge';
+
 const transitionProps = getDefaultTransitionProps();
 
 const { defineMultiStyleConfig, definePartsStyle } =
@@ -15,19 +17,47 @@ const variants = {
   subtle: definePartsStyle((props) => ({
     container: Badge.variants?.subtle(props),
   })),
+  select: definePartsStyle((props) => ({
+    container: {
+      bg: mode('gray.100', 'gray.800')(props),
+      color: mode('gray.500', 'whiteAlpha.800')(props),
+      cursor: 'pointer',
+      _hover: {
+        color: 'blue.400',
+        opacity: 0.76,
+      },
+      [`
+        &[data-selected=true],
+        &[data-selected=true][aria-selected=true]
+      `]: {
+        bg: mode('blue.500', 'blue.900')(props),
+        color: 'whiteAlpha.800',
+      },
+    },
+  })),
 };
 
 const sizes = {
-  md: definePartsStyle({
+  sm: definePartsStyle({
     container: {
       minH: 6,
       minW: 6,
       fontSize: 'sm',
-      px: 2,
+      px: 1,
       py: '2px',
       lineHeight: 5,
     },
   }),
+  md: definePartsStyle({
+    container: {
+      minH: 8,
+      minW: 8,
+      fontSize: 'sm',
+      px: '6px',
+      py: '6px',
+      lineHeight: 5,
+    },
+  }),
 };
 
 const baseStyleContainer = defineStyle({
@@ -48,7 +78,7 @@ const Tag = defineMultiStyleConfig({
   variants,
   sizes,
   defaultProps: {
-    size: 'md',
+    size: 'sm',
     variant: 'subtle',
     colorScheme: 'gray',
   },
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_blue-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_blue-color-scheme-dark-mode-1.png
index e2964560a2..cc5ed7c640 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_blue-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_blue-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_cyan-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_cyan-color-scheme-dark-mode-1.png
index 8a1efa746b..93e36ae37d 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_cyan-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_cyan-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_gray-blue-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_gray-blue-color-scheme-dark-mode-1.png
new file mode 100644
index 0000000000..991537c134
Binary files /dev/null and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_gray-blue-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_gray-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_gray-color-scheme-dark-mode-1.png
index a956655fb5..2cc37e85b8 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_gray-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_gray-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_green-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_green-color-scheme-dark-mode-1.png
index 18f0765090..acd4ad7582 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_green-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_green-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_orange-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_orange-color-scheme-dark-mode-1.png
index 51d848855b..0079acf091 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_orange-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_orange-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_purple-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_purple-color-scheme-dark-mode-1.png
index 9fd2e54028..7d5714466f 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_purple-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_purple-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_teal-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_teal-color-scheme-dark-mode-1.png
index e4b5437ff4..a5c299c701 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_teal-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_teal-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_blue-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_blue-color-scheme-dark-mode-1.png
index 475e4b3500..ce7946c035 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_blue-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_blue-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_cyan-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_cyan-color-scheme-dark-mode-1.png
index e2df67339c..1cac3c3c0c 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_cyan-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_cyan-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_gray-blue-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_gray-blue-color-scheme-dark-mode-1.png
new file mode 100644
index 0000000000..b3f72fbba9
Binary files /dev/null and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_gray-blue-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_gray-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_gray-color-scheme-dark-mode-1.png
index 533fb98865..fadfdd7262 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_gray-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_gray-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_green-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_green-color-scheme-dark-mode-1.png
index 89b0f21d9b..926ff7e591 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_green-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_green-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_orange-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_orange-color-scheme-dark-mode-1.png
index 78612cf01f..3b8b6c4939 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_orange-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_orange-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_purple-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_purple-color-scheme-dark-mode-1.png
index bcad901b56..aec0669393 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_purple-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_purple-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_teal-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_teal-color-scheme-dark-mode-1.png
index 6d1b5b96e0..8b713c96bc 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_teal-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_teal-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_with-long-text-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_with-long-text-1.png
index 3b47811eaa..7ce1510b5b 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_with-long-text-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_with-long-text-1.png differ
diff --git a/theme/components/Textarea.ts b/theme/components/Textarea.ts
index 6a4c9a3a5b..bb0a00ca56 100644
--- a/theme/components/Textarea.ts
+++ b/theme/components/Textarea.ts
@@ -1,22 +1,8 @@
 import { Textarea as TextareaComponent } from '@chakra-ui/react';
 import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
-import { mode } from '@chakra-ui/theme-tools';
 
 import getOutlinedFieldStyles from '../utils/getOutlinedFieldStyles';
 
-const variantFilledInactive = defineStyle((props) => {
-  return {
-    // https://bugs.chromium.org/p/chromium/issues/detail?id=1362573
-    // there is a problem with scrollbar color in chromium
-    // so blackAlpha.50 here is replaced with #f5f5f6
-    // and whiteAlpha.50 is replaced with #1a1b1b
-
-    // bgColor: mode('blackAlpha.50', 'whiteAlpha.50')(props),
-    bgColor: mode('#f5f5f6', '#1a1b1b')(props),
-
-  };
-});
-
 const sizes = {
   md: defineStyle({
     fontSize: 'md',
@@ -38,7 +24,6 @@ const Textarea = defineStyleConfig({
   sizes,
   variants: {
     outline: defineStyle(getOutlinedFieldStyles),
-    filledInactive: variantFilledInactive,
   },
   defaultProps: {
     variant: 'outline',
diff --git a/theme/components/Tooltip/Tooltip.pw.tsx b/theme/components/Tooltip/Tooltip.pw.tsx
index 370df8836e..e41255ca61 100644
--- a/theme/components/Tooltip/Tooltip.pw.tsx
+++ b/theme/components/Tooltip/Tooltip.pw.tsx
@@ -1,18 +1,15 @@
 import { Box, Tooltip, Icon } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
-test('base view +@dark-mode', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <Box m={ 10 }>
-        <Tooltip label="Tooltip content">
-          trigger
-        </Tooltip>
-      </Box>
-    </TestApp>,
+test('base view +@dark-mode', async({ render, page }) => {
+  const component = await render(
+    <Box m={ 10 }>
+      <Tooltip label="Tooltip content">
+        trigger
+      </Tooltip>
+    </Box>,
   );
 
   await component.getByText(/trigger/i).hover();
@@ -22,22 +19,20 @@ test('base view +@dark-mode', async({ mount, page }) => {
 
 // was not able to reproduce in tests issue when Icon is used as trigger for tooltip
 // https://github.com/chakra-ui/chakra-ui/issues/7107
-test.skip('with icon', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <Box m={ 10 }>
-        <Tooltip label="Tooltip content">
-          <Icon viewBox="0 0 20 20" boxSize={ 5 } aria-label="Trigger">
-            <circle cx="10" cy="10" r="10"/>
-          </Icon>
-        </Tooltip>
-      </Box>
-    </TestApp>,
+test.fixme('with icon', async({ render, page }) => {
+  const component = await render(
+    <Box m={ 10 }>
+      <Tooltip label="Tooltip content">
+        <Icon viewBox="0 0 20 20" boxSize={ 5 } aria-label="Trigger">
+          <circle cx="10" cy="10" r="10"/>
+        </Icon>
+      </Tooltip>
+    </Box>,
   );
 
   const tooltip = page.getByText(/tooltip content/i);
-  expect(await tooltip.isVisible()).toBe(false);
+  await expect(tooltip).toBeHidden();
 
   await component.locator('svg[aria-label="Trigger"]').hover();
-  expect(await tooltip.isVisible()).toBe(true);
+  await expect(tooltip).toBeVisible();
 });
diff --git a/theme/components/Tooltip/Tooltip.ts b/theme/components/Tooltip/Tooltip.ts
index a98dd867ce..d0bbae57e2 100644
--- a/theme/components/Tooltip/Tooltip.ts
+++ b/theme/components/Tooltip/Tooltip.ts
@@ -35,7 +35,8 @@ const baseStyle = defineStyle((props) => {
     [$bg.variable]: `colors.${ bg }`,
     [$fg.variable]: `colors.${ fg }`,
     [$arrowBg.variable]: $bg.reference,
-    maxWidth: props.maxWidth || props.maxW || 'unset',
+    maxWidth: props.maxWidth || props.maxW || 'calc(100vw - 8px)',
+    marginX: '4px',
   };
 });
 
diff --git a/theme/components/Tooltip/__screenshots__/Tooltip.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/theme/components/Tooltip/__screenshots__/Tooltip.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
index 44b6eff06f..8b61705f88 100644
Binary files a/theme/components/Tooltip/__screenshots__/Tooltip.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/theme/components/Tooltip/__screenshots__/Tooltip.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/theme/components/Tooltip/__screenshots__/Tooltip.pw.tsx_default_base-view-dark-mode-1.png b/theme/components/Tooltip/__screenshots__/Tooltip.pw.tsx_default_base-view-dark-mode-1.png
index 4667657549..ab9a1ac7b9 100644
Binary files a/theme/components/Tooltip/__screenshots__/Tooltip.pw.tsx_default_base-view-dark-mode-1.png and b/theme/components/Tooltip/__screenshots__/Tooltip.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/theme/components/index.ts b/theme/components/index.ts
index b32509ccaa..61903f55f6 100644
--- a/theme/components/index.ts
+++ b/theme/components/index.ts
@@ -10,6 +10,7 @@ import Input from './Input';
 import Link from './Link';
 import Menu from './Menu';
 import Modal from './Modal';
+import PinInput from './PinInput';
 import Popover from './Popover';
 import Radio from './Radio';
 import Select from './Select';
@@ -36,6 +37,7 @@ const components = {
   Link,
   Menu,
   Modal,
+  PinInput,
   Popover,
   Radio,
   Select,
diff --git a/theme/config.ts b/theme/config.ts
index 7ae9c23bcb..ddca2b54ea 100644
--- a/theme/config.ts
+++ b/theme/config.ts
@@ -1,7 +1,9 @@
 import { type ThemeConfig } from '@chakra-ui/react';
 
+import appConfig from 'configs/app';
+
 const config: ThemeConfig = {
-  initialColorMode: 'system',
+  initialColorMode: appConfig.UI.colorTheme.default?.colorMode ?? 'system',
   useSystemColorMode: false,
   disableTransitionOnChange: false,
 };
diff --git a/theme/foundations/breakpoints.ts b/theme/foundations/breakpoints.ts
index aa60d95011..ece6201c12 100644
--- a/theme/foundations/breakpoints.ts
+++ b/theme/foundations/breakpoints.ts
@@ -4,8 +4,9 @@ const breakpoints = {
   //   md: '768px',
   lg: '1000px',
   xl: '1440px',
+  '2xl': '1920px',
   // these breakpoint are needed just to make others work
-  '2xl': '3000px',
+  '3xl': '3000px',
 };
 
 export default breakpoints;
diff --git a/theme/foundations/colors.ts b/theme/foundations/colors.ts
index 20bcd4d904..d1e3dae714 100644
--- a/theme/foundations/colors.ts
+++ b/theme/foundations/colors.ts
@@ -1,76 +1,66 @@
 const colors = {
   green: {
-    "100": "#C6F6D5",
-    "400": "#48BB78",
-    "500": "#38A169",
-    "600": "#25855A",
+    '100': '#C6F6D5',
+    '400': '#48BB78',
+    '500': '#38A169',
+    '600': '#25855A',
   },
   blue: {
-    "50": "#eff4ff",
-    "100": "#D6E9FF",
-    "200": "#dae5ff",
-    "300": "#bed2ff",
-    "400": "#AEC9FF",
-    "500": "#85ADFF",
-    "600": "#5C92FF",
-    "700": "#246CFF",
-    "800": "#004EEB",
-    "900": "#003BB3",
-    "950": "#003297",
+    '50': '#EBF8FF',
+    '100': '#BEE3F8',
+    '200': '#90CDF4',
+    '300': '#63B3ED',
+    '400': '#4299E1',
+    '500': '#3182CE',
+    '600': '#2B6CB0',
+    '700': '#2C5282',
+    '800': '#2A4365',
+    '900': '#1A365D',
   },
   red: {
-    "500": "#E53E3E",
-    "100": "#FED7D7",
+    '500': '#E53E3E',
+    '100': '#FED7D7',
   },
   orange: {
-    "50": "#fef5ee",
-    "100": "#fde9d7",
-    "200": "#facfae",
-    "300": "#f7ad7a",
-    "400": "#f38044",
-    "500": "#ef5a19",
-    "600": "#e14515",
-    "700": "#ba3214",
-    "800": "#942a18",
-    "900": "#782516",
-    "950": "#400f0a",
+    '100': '#FEEBCB',
   },
   gray: {
-    "50": "#F7FAFC", // <-
-    "100": "#EDF2F7",
-    "200": "#E2E8F0",
-    "300": "#CBD5E0",
-    "400": "#A0AEC0",
-    "500": "#718096",
-    "600": "#4A5568",
-    "700": "#2D3748",
-    "800": "#1A202C",
-    "900": "#171923",
+    '50': '#F7FAFC', // <-
+    '100': '#EDF2F7',
+    '200': '#E2E8F0',
+    '300': '#CBD5E0',
+    '400': '#A0AEC0',
+    '500': '#718096',
+    '600': '#4A5568',
+    '700': '#2D3748',
+    '800': '#1A202C',
+    '900': '#171923',
   },
-  black: "#101112",
-  white: "#ffffff",
+  black: '#101112',
+  white: '#ffffff',
   blackAlpha: {
-    "50": "RGBA(16, 17, 18, 0.04)",
-    "100": "RGBA(16, 17, 18, 0.06)",
-    "200": "RGBA(16, 17, 18, 0.08)",
-    "300": "RGBA(16, 17, 18, 0.16)",
-    "400": "RGBA(16, 17, 18, 0.24)",
-    "500": "RGBA(16, 17, 18, 0.36)",
-    "600": "RGBA(16, 17, 18, 0.48)",
-    "700": "RGBA(16, 17, 18, 0.64)",
-    "800": "RGBA(16, 17, 18, 0.80)",
-    "900": "RGBA(16, 17, 18, 0.92)",
+    '50': 'RGBA(16, 17, 18, 0.04)',
+    '100': 'RGBA(16, 17, 18, 0.06)',
+    '200': 'RGBA(16, 17, 18, 0.08)',
+    '300': 'RGBA(16, 17, 18, 0.16)',
+    '400': 'RGBA(16, 17, 18, 0.24)',
+    '500': 'RGBA(16, 17, 18, 0.36)',
+    '600': 'RGBA(16, 17, 18, 0.48)',
+    '700': 'RGBA(16, 17, 18, 0.64)',
+    '800': 'RGBA(16, 17, 18, 0.80)',
+    '900': 'RGBA(16, 17, 18, 0.92)',
   },
-  github: "#171923",
-  telegram: "#2775CA",
-  linkedin: "#1564BA",
-  discord: "#9747FF",
-  slack: "#1BA27A",
-  twitter: "#63B3ED",
-  opensea: "#2081E2",
-  facebook: "#4460A0",
-  medium: "#231F20",
-  reddit: "#FF4500",
+  github: '#171923',
+  telegram: '#2775CA',
+  linkedin: '#1564BA',
+  discord: '#9747FF',
+  slack: '#1BA27A',
+  twitter: '#000000',
+  opensea: '#2081E2',
+  facebook: '#4460A0',
+  medium: '#231F20',
+  reddit: '#FF4500',
+  celo: '#FCFF52',
 };
 
 export default colors;
diff --git a/theme/foundations/semanticTokens.ts b/theme/foundations/semanticTokens.ts
index 9cd676492f..9f1fc4888b 100644
--- a/theme/foundations/semanticTokens.ts
+++ b/theme/foundations/semanticTokens.ts
@@ -19,9 +19,21 @@ const semanticTokens = {
     link_hovered: {
       'default': 'orange.400',
     },
+    icon_link_external: {
+      'default': 'gray.300',
+      _dark: 'gray.500',
+    },
+    icon_info: {
+      'default': 'gray.400',
+      _dark: 'gray.500',
+    },
     error: {
-      'default': 'red.400',
-      _dark: 'red.300',
+      'default': 'red.500',
+      _dark: 'red.500',
+    },
+    dialog_bg: {
+      'default': 'white',
+      _dark: 'gray.900',
     },
   },
   shadows: {
diff --git a/theme/foundations/typography.ts b/theme/foundations/typography.ts
index c91a7b28a6..b129403a93 100644
--- a/theme/foundations/typography.ts
+++ b/theme/foundations/typography.ts
@@ -1,7 +1,9 @@
 import { theme } from '@chakra-ui/react';
 
-export const BODY_TYPEFACE = 'Inter';
-export const HEADING_TYPEFACE = 'Poppins';
+import config from 'configs/app';
+
+export const BODY_TYPEFACE = config.UI.fonts.body?.name ?? 'Inter';
+export const HEADING_TYPEFACE = config.UI.fonts.heading?.name ?? 'Poppins';
 
 const typography = {
   fonts: {
@@ -21,6 +23,12 @@ const typography = {
       lineHeight: '32px',
       fontFamily: 'heading',
     },
+    h4: {
+      fontSize: 'md',
+      fontWeight: '500',
+      lineHeight: '24px',
+      fontFamily: 'heading',
+    },
   },
 };
 
diff --git a/theme/global.ts b/theme/global.ts
index 5ddff6bcf7..acdbc2fecb 100644
--- a/theme/global.ts
+++ b/theme/global.ts
@@ -2,6 +2,8 @@ import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
 import { mode } from '@chakra-ui/theme-tools';
 
 import scrollbar from './foundations/scrollbar';
+import addressEntity from './globals/address-entity';
+import recaptcha from './globals/recaptcha';
 import getDefaultTransitionProps from './utils/getDefaultTransitionProps';
 
 const global = (props: StyleFunctionProps) => ({
@@ -23,6 +25,8 @@ const global = (props: StyleFunctionProps) => ({
     w: '100%',
   },
   ...scrollbar(props),
+  ...addressEntity(props),
+  ...recaptcha(),
 });
 
 export default global;
diff --git a/theme/globals/address-entity.ts b/theme/globals/address-entity.ts
new file mode 100644
index 0000000000..25641c3020
--- /dev/null
+++ b/theme/globals/address-entity.ts
@@ -0,0 +1,37 @@
+import { mode } from '@chakra-ui/theme-tools';
+import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
+
+const styles = (props: StyleFunctionProps) => {
+  return {
+    '.address-entity': {
+      '&.address-entity_highlighted': {
+        _before: {
+          content: `" "`,
+          position: 'absolute',
+          py: 1,
+          pl: 1,
+          pr: 0,
+          top: '-5px',
+          left: '-5px',
+          width: `100%`,
+          height: '100%',
+          borderRadius: 'base',
+          borderColor: mode('blue.200', 'blue.600')(props),
+          borderWidth: '1px',
+          borderStyle: 'dashed',
+          bgColor: mode('blue.50', 'blue.900')(props),
+          zIndex: -1,
+        },
+      },
+    },
+    '.address-entity_no-copy': {
+      '&.address-entity_highlighted': {
+        _before: {
+          pr: 2,
+        },
+      },
+    },
+  };
+};
+
+export default styles;
diff --git a/theme/globals/recaptcha.ts b/theme/globals/recaptcha.ts
new file mode 100644
index 0000000000..c551eb4ae2
--- /dev/null
+++ b/theme/globals/recaptcha.ts
@@ -0,0 +1,22 @@
+const styles = () => {
+  return {
+    '.grecaptcha-badge': {
+      visibility: 'hidden',
+    },
+    'div:has(div):has(iframe[title="recaptcha challenge expires in two minutes"])': {
+      '&::after': {
+        content: `" "`,
+        display: 'block',
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        zIndex: 100000,
+        bgColor: 'blackAlpha.300',
+      },
+    },
+  };
+};
+
+export default styles;
diff --git a/theme/package.json b/theme/package.json
new file mode 100644
index 0000000000..9f4fe3a558
--- /dev/null
+++ b/theme/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@blockscout/chakra-theme",
+  "version": "1.32.0",
+  "main": "./dist/index.js",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/blockscout/frontend.git",
+    "directory": "theme"
+  },
+  "scripts": {
+    "build": "yarn webpack-cli -c ./webpack.config.js"
+  },
+  "devDependencies": {
+    "typescript": "5.4.2",
+    "ts-loader": "^9.4.4",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^5.1.4",
+    "tsconfig-paths-webpack-plugin": "^4.1.0"
+  },
+  "files": [
+    "/dist"
+  ]
+}
diff --git a/theme/index.ts b/theme/theme.ts
similarity index 100%
rename from theme/index.ts
rename to theme/theme.ts
diff --git a/theme/tsconfig.json b/theme/tsconfig.json
new file mode 100644
index 0000000000..153821f077
--- /dev/null
+++ b/theme/tsconfig.json
@@ -0,0 +1,24 @@
+{
+	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"noEmit": false,
+		"target": "es2016",
+		"module": "CommonJS",
+		"moduleResolution": "node",
+		"paths": {
+			"nextjs-routes": ["./nextjs/nextjs-routes.d.ts"],
+		}
+	},
+	"include": [ 
+		"../types/**/*.ts", 
+		"../configs/app/**/*.ts", 
+		"../global.d.ts", 
+		"./theme.ts",
+		"./components/**/*.pw.tsx",
+	],
+	"tsc-alias": {
+	  "verbose": true,
+	  "resolveFullPaths": true,
+	}
+}
+  
\ No newline at end of file
diff --git a/theme/utils/getDefaultFormColors.ts b/theme/utils/getDefaultFormColors.ts
deleted file mode 100644
index 994788bf25..0000000000
--- a/theme/utils/getDefaultFormColors.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
-import { mode } from '@chakra-ui/theme-tools';
-
-export default function getDefaultFormColors(props: StyleFunctionProps) {
-  const { focusBorderColor: fc, errorBorderColor: ec, filledBorderColor: flc } = props;
-  return {
-    focusBorderColor: fc || mode('blue.500', 'blue.300')(props),
-    focusPlaceholderColor: fc || 'gray.500',
-    errorColor: ec || mode('red.400', 'red.300')(props),
-    filledColor: flc || mode('gray.300', 'gray.600')(props),
-  };
-}
diff --git a/theme/utils/getDefaultTransitionProps.ts b/theme/utils/getDefaultTransitionProps.ts
index 5beb452049..2f7d60e7a7 100644
--- a/theme/utils/getDefaultTransitionProps.ts
+++ b/theme/utils/getDefaultTransitionProps.ts
@@ -1,4 +1,4 @@
-export default function getDefaultTransitionProps(props?: {transitionProperty: string}) {
+export default function getDefaultTransitionProps(props?: { transitionProperty: string }) {
   return {
     transitionProperty: `background-color, color, border-color${ props?.transitionProperty ? ', ' + props.transitionProperty : '' }`,
     transitionDuration: 'normal',
diff --git a/theme/utils/getFormStyles.ts b/theme/utils/getFormStyles.ts
new file mode 100644
index 0000000000..5dda16db55
--- /dev/null
+++ b/theme/utils/getFormStyles.ts
@@ -0,0 +1,55 @@
+import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
+import { mode, transparentize } from '@chakra-ui/theme-tools';
+
+export default function getFormStyles(props: StyleFunctionProps) {
+  return {
+    input: {
+      empty: {
+        // there is no text in the empty input
+        // color: ???,
+        bgColor: props.bgColor || mode('white', 'black')(props),
+        borderColor: mode('gray.100', 'gray.700')(props),
+      },
+      hover: {
+        color: mode('gray.800', 'gray.50')(props),
+        bgColor: props.bgColor || mode('white', 'black')(props),
+        borderColor: mode('gray.200', 'gray.500')(props),
+      },
+      focus: {
+        color: mode('gray.800', 'gray.50')(props),
+        bgColor: props.bgColor || mode('white', 'black')(props),
+        borderColor: mode('blue.400', 'blue.400')(props),
+      },
+      filled: {
+        color: mode('gray.800', 'gray.50')(props),
+        bgColor: props.bgColor || mode('white', 'black')(props),
+        borderColor: mode('gray.300', 'gray.600')(props),
+      },
+      readOnly: {
+        color: mode('gray.800', 'gray.50')(props),
+        bgColor: mode('gray.200', 'gray.800')(props),
+        borderColor: mode('gray.200', 'gray.800')(props),
+      },
+      // we use opacity to show the disabled state
+      disabled: {
+        opacity: 0.2,
+      },
+      error: {
+        color: mode('gray.800', 'gray.50')(props),
+        bgColor: props.bgColor || mode('white', 'black')(props),
+        borderColor: mode('red.500', 'red.500')(props),
+      },
+    },
+    placeholder: {
+      'default': {
+        color: mode('gray.500', 'gray.500')(props),
+      },
+      disabled: {
+        color: transparentize('gray.500', 0.2)(props.theme),
+      },
+      error: {
+        color: mode('red.500', 'red.500')(props),
+      },
+    },
+  };
+}
diff --git a/theme/utils/getOutlinedFieldStyles.ts b/theme/utils/getOutlinedFieldStyles.ts
index cae5060e4e..c26ed15d11 100644
--- a/theme/utils/getOutlinedFieldStyles.ts
+++ b/theme/utils/getOutlinedFieldStyles.ts
@@ -1,54 +1,66 @@
 import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
-import { mode, getColor } from '@chakra-ui/theme-tools';
+import { mode } from '@chakra-ui/theme-tools';
 
-import getDefaultFormColors from './getDefaultFormColors';
 import getDefaultTransitionProps from './getDefaultTransitionProps';
+import getFormStyles from './getFormStyles';
 
 export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
-  const { theme, borderColor } = props;
-  const { focusBorderColor, errorColor } = getDefaultFormColors(props);
+  const formStyles = getFormStyles(props);
   const transitionProps = getDefaultTransitionProps();
 
   return {
     border: '2px solid',
     // filled input
-    backgroundColor: 'transparent',
-    borderColor: mode('gray.300', 'gray.600')(props),
+    ...formStyles.input.filled,
     ...transitionProps,
     _hover: {
-      borderColor: mode('gray.200', 'gray.500')(props),
+      ...formStyles.input.hover,
     },
     _readOnly: {
       boxShadow: 'none !important',
       userSelect: 'all',
+      pointerEvents: 'none',
+      ...formStyles.input.readOnly,
+      _hover: {
+        ...formStyles.input.readOnly,
+      },
+      _focus: {
+        ...formStyles.input.readOnly,
+      },
     },
     _disabled: {
-      opacity: 1,
-      backgroundColor: mode('blackAlpha.200', 'whiteAlpha.200')(props),
-      borderColor: 'transparent',
+      ...formStyles.input.disabled,
       cursor: 'not-allowed',
-      _hover: {
-        borderColor: 'transparent',
-      },
       ':-webkit-autofill': {
         // background color for disabled input which value was selected from browser autocomplete popup
         '-webkit-box-shadow': `0 0 0px 1000px ${ mode('rgba(16, 17, 18, 0.08)', 'rgba(255, 255, 255, 0.08)')(props) } inset`,
       },
     },
     _invalid: {
-      borderColor: getColor(theme, errorColor),
+      ...formStyles.input.error,
       boxShadow: `none`,
+      _placeholder: {
+        color: formStyles.placeholder.error.color,
+      },
     },
     _focusVisible: {
+      ...formStyles.input.focus,
       zIndex: 1,
-      borderColor: getColor(theme, focusBorderColor),
       boxShadow: 'md',
     },
     _placeholder: {
-      color: mode('blackAlpha.600', 'whiteAlpha.600')(props),
+      color: formStyles.placeholder.default.color,
     },
     // not filled input
-    ':placeholder-shown:not(:focus-visible):not(:hover):not([aria-invalid=true])': { borderColor: borderColor || mode('gray.100', 'gray.700')(props) },
+    ':placeholder-shown:not(:focus-visible):not(:hover):not([aria-invalid=true]):not([aria-readonly=true])': {
+      ...formStyles.input.empty,
+    },
+
+    // not filled input with type="date"
+    ':not(:placeholder-shown)[value=""]:not(:focus-visible):not(:hover):not([aria-invalid=true]):not([aria-readonly=true])': {
+      ...formStyles.input.empty,
+    },
+
     ':-webkit-autofill': { transition: 'background-color 5000s ease-in-out 0s' },
     ':-webkit-autofill:hover': { transition: 'background-color 5000s ease-in-out 0s' },
     ':-webkit-autofill:focus': { transition: 'background-color 5000s ease-in-out 0s' },
diff --git a/theme/webpack.config.js b/theme/webpack.config.js
new file mode 100644
index 0000000000..146517ea3e
--- /dev/null
+++ b/theme/webpack.config.js
@@ -0,0 +1,32 @@
+const path = require('path');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+
+const config = {
+  mode: 'production',
+  entry: path.resolve(__dirname) + '/theme.ts',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: [ '.tsx', '.ts', '.js' ],
+    plugins: [ new TsconfigPathsPlugin({ configFile: './tsconfig.json' }) ],
+  },
+  output: {
+    filename: 'index.js',
+    path: path.resolve(__dirname) + '/dist',
+    library: {
+      type: 'commonjs',
+    },
+  },
+  optimization: {
+    minimize: false,
+  },
+};
+
+module.exports = config;
diff --git a/theme/yarn.lock b/theme/yarn.lock
new file mode 100644
index 0000000000..28a6a1400c
--- /dev/null
+++ b/theme/yarn.lock
@@ -0,0 +1,918 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@discoveryjs/json-ext@^0.5.0":
+  version "0.5.7"
+  resolved "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz"
+  integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
+
+"@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.5"
+  resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz"
+  integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
+"@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
+
+"@jridgewell/source-map@^0.3.3":
+  version "0.3.6"
+  resolved "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz"
+  integrity sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
+"@jridgewell/trace-mapping@^0.3.20", "@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+  version "0.3.25"
+  resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
+"@types/estree@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz"
+  integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
+
+"@types/json-schema@^7.0.8":
+  version "7.0.15"
+  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz"
+  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
+
+"@types/node@*":
+  version "20.14.11"
+  resolved "https://registry.npmjs.org/@types/node/-/node-20.14.11.tgz"
+  integrity sha512-kprQpL8MMeszbz6ojB5/tU8PLN4kesnN8Gjzw349rDlNgsSzg90lAVj3llK99Dh7JON+t9AuscPPFW6mPbTnSA==
+  dependencies:
+    undici-types "~5.26.4"
+
+"@webassemblyjs/ast@1.12.1", "@webassemblyjs/ast@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz"
+  integrity sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==
+  dependencies:
+    "@webassemblyjs/helper-numbers" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+
+"@webassemblyjs/floating-point-hex-parser@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz"
+  integrity sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==
+
+"@webassemblyjs/helper-api-error@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz"
+  integrity sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==
+
+"@webassemblyjs/helper-buffer@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz"
+  integrity sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==
+
+"@webassemblyjs/helper-numbers@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz"
+  integrity sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==
+  dependencies:
+    "@webassemblyjs/floating-point-hex-parser" "1.11.6"
+    "@webassemblyjs/helper-api-error" "1.11.6"
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/helper-wasm-bytecode@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz"
+  integrity sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==
+
+"@webassemblyjs/helper-wasm-section@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz"
+  integrity sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/wasm-gen" "1.12.1"
+
+"@webassemblyjs/ieee754@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz"
+  integrity sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==
+  dependencies:
+    "@xtuc/ieee754" "^1.2.0"
+
+"@webassemblyjs/leb128@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz"
+  integrity sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==
+  dependencies:
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/utf8@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz"
+  integrity sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==
+
+"@webassemblyjs/wasm-edit@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz"
+  integrity sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/helper-wasm-section" "1.12.1"
+    "@webassemblyjs/wasm-gen" "1.12.1"
+    "@webassemblyjs/wasm-opt" "1.12.1"
+    "@webassemblyjs/wasm-parser" "1.12.1"
+    "@webassemblyjs/wast-printer" "1.12.1"
+
+"@webassemblyjs/wasm-gen@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz"
+  integrity sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/ieee754" "1.11.6"
+    "@webassemblyjs/leb128" "1.11.6"
+    "@webassemblyjs/utf8" "1.11.6"
+
+"@webassemblyjs/wasm-opt@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz"
+  integrity sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
+    "@webassemblyjs/wasm-gen" "1.12.1"
+    "@webassemblyjs/wasm-parser" "1.12.1"
+
+"@webassemblyjs/wasm-parser@1.12.1", "@webassemblyjs/wasm-parser@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz"
+  integrity sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-api-error" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/ieee754" "1.11.6"
+    "@webassemblyjs/leb128" "1.11.6"
+    "@webassemblyjs/utf8" "1.11.6"
+
+"@webassemblyjs/wast-printer@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz"
+  integrity sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@xtuc/long" "4.2.2"
+
+"@webpack-cli/configtest@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz"
+  integrity sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==
+
+"@webpack-cli/info@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz"
+  integrity sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==
+
+"@webpack-cli/serve@^2.0.5":
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz"
+  integrity sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==
+
+"@xtuc/ieee754@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz"
+  integrity sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==
+
+"@xtuc/long@4.2.2":
+  version "4.2.2"
+  resolved "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz"
+  integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
+
+acorn-import-attributes@^1.9.5:
+  version "1.9.5"
+  resolved "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz"
+  integrity sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==
+
+acorn@^8.7.1, acorn@^8.8.2:
+  version "8.12.1"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz"
+  integrity sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==
+
+ajv-keywords@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz"
+  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
+
+ajv@^6.12.5:
+  version "6.12.6"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+braces@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+browserslist@^4.21.10:
+  version "4.23.2"
+  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.23.2.tgz"
+  integrity sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==
+  dependencies:
+    caniuse-lite "^1.0.30001640"
+    electron-to-chromium "^1.4.820"
+    node-releases "^2.0.14"
+    update-browserslist-db "^1.1.0"
+
+buffer-from@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
+caniuse-lite@^1.0.30001640:
+  version "1.0.30001643"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001643.tgz"
+  integrity sha512-ERgWGNleEilSrHM6iUz/zJNSQTP8Mr21wDWpdgvRwcTXGAq6jMtOUPP4dqFPTdKqZ2wKTdtB+uucZ3MRpAUSmg==
+
+chalk@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chrome-trace-event@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz"
+  integrity sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==
+
+clone-deep@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz"
+  integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==
+  dependencies:
+    is-plain-object "^2.0.4"
+    kind-of "^6.0.2"
+    shallow-clone "^3.0.0"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+colorette@^2.0.14:
+  version "2.0.20"
+  resolved "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz"
+  integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
+
+commander@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz"
+  integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==
+
+commander@^2.20.0:
+  version "2.20.3"
+  resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
+cross-spawn@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+electron-to-chromium@^1.4.820:
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.0.tgz"
+  integrity sha512-Vb3xHHYnLseK8vlMJQKJYXJ++t4u1/qJ3vykuVrVjvdiOEhYyT1AuP4x03G8EnPmYvYOhe9T+dADTmthjRQMkA==
+
+enhanced-resolve@^5.0.0, enhanced-resolve@^5.17.1, enhanced-resolve@^5.7.0:
+  version "5.17.1"
+  resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz"
+  integrity sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
+envinfo@^7.7.3:
+  version "7.13.0"
+  resolved "https://registry.npmjs.org/envinfo/-/envinfo-7.13.0.tgz"
+  integrity sha512-cvcaMr7KqXVh4nyzGTVqTum+gAiL265x5jUWQIDLq//zOGbW+gSW/C+OWLleY/rs9Qole6AZLMXPbtIFQbqu+Q==
+
+es-module-lexer@^1.2.1:
+  version "1.5.4"
+  resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.4.tgz"
+  integrity sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==
+
+escalade@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz"
+  integrity sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==
+
+eslint-scope@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+events@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/events/-/events-3.3.0.tgz"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
+fast-deep-equal@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fastest-levenshtein@^1.0.12:
+  version "1.0.16"
+  resolved "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz"
+  integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==
+
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+find-up@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
+flat@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz"
+  integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
+
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+glob-to-regexp@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz"
+  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
+
+graceful-fs@^4.1.2, graceful-fs@^4.2.11, graceful-fs@^4.2.4:
+  version "4.2.11"
+  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
+import-local@^3.0.2:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz"
+  integrity sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==
+  dependencies:
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.0.0"
+
+interpret@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz"
+  integrity sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==
+
+is-core-module@^2.13.0:
+  version "2.15.0"
+  resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.0.tgz"
+  integrity sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==
+  dependencies:
+    hasown "^2.0.2"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-plain-object@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz"
+  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
+  dependencies:
+    isobject "^3.0.1"
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz"
+  integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
+
+jest-worker@^27.4.5:
+  version "27.5.1"
+  resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz"
+  integrity sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
+json-parse-even-better-errors@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
+
+json5@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
+kind-of@^6.0.2:
+  version "6.0.3"
+  resolved "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
+loader-runner@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz"
+  integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
+
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz"
+  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
+
+micromatch@^4.0.0:
+  version "4.0.8"
+  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.27:
+  version "2.1.35"
+  resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+minimist@^1.2.6:
+  version "1.2.8"
+  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
+neo-async@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+
+node-releases@^2.0.14:
+  version "2.0.18"
+  resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz"
+  integrity sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==
+
+p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
+p-try@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz"
+  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+picocolors@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz"
+  integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
+
+picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+pkg-dir@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
+punycode@^2.1.0:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz"
+  integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
+
+randombytes@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz"
+  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
+  dependencies:
+    safe-buffer "^5.1.0"
+
+rechoir@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz"
+  integrity sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==
+  dependencies:
+    resolve "^1.20.0"
+
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz"
+  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
+  dependencies:
+    resolve-from "^5.0.0"
+
+resolve-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
+resolve@^1.20.0:
+  version "1.22.8"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz"
+  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+safe-buffer@^5.1.0:
+  version "5.2.1"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+schema-utils@^3.1.1, schema-utils@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz"
+  integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
+  dependencies:
+    "@types/json-schema" "^7.0.8"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
+semver@^7.3.4:
+  version "7.6.3"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
+serialize-javascript@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz"
+  integrity sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==
+  dependencies:
+    randombytes "^2.1.0"
+
+shallow-clone@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz"
+  integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==
+  dependencies:
+    kind-of "^6.0.2"
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+source-map-support@~0.5.20:
+  version "0.5.21"
+  resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz"
+  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map@^0.6.0:
+  version "0.6.1"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+source-map@^0.7.4:
+  version "0.7.4"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz"
+  integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
+
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz"
+  integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-color@^8.0.0:
+  version "8.1.1"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+tapable@^2.1.1, tapable@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz"
+  integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
+
+terser-webpack-plugin@^5.3.10:
+  version "5.3.10"
+  resolved "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz"
+  integrity sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.20"
+    jest-worker "^27.4.5"
+    schema-utils "^3.1.1"
+    serialize-javascript "^6.0.1"
+    terser "^5.26.0"
+
+terser@^5.26.0:
+  version "5.31.3"
+  resolved "https://registry.npmjs.org/terser/-/terser-5.31.3.tgz"
+  integrity sha512-pAfYn3NIZLyZpa83ZKigvj6Rn9c/vd5KfYGX7cN1mnzqgDcxWvrU5ZtAfIKhEXz9nRecw4z3LXkjaq96/qZqAA==
+  dependencies:
+    "@jridgewell/source-map" "^0.3.3"
+    acorn "^8.8.2"
+    commander "^2.20.0"
+    source-map-support "~0.5.20"
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+ts-loader@^9.4.4:
+  version "9.5.1"
+  resolved "https://registry.npmjs.org/ts-loader/-/ts-loader-9.5.1.tgz"
+  integrity sha512-rNH3sK9kGZcH9dYzC7CewQm4NtxJTjSEVRJ2DyBZR7f8/wcta+iV44UPCXc5+nzDzivKtlzV6c9P4e+oFhDLYg==
+  dependencies:
+    chalk "^4.1.0"
+    enhanced-resolve "^5.0.0"
+    micromatch "^4.0.0"
+    semver "^7.3.4"
+    source-map "^0.7.4"
+
+tsconfig-paths-webpack-plugin@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-4.1.0.tgz"
+  integrity sha512-xWFISjviPydmtmgeUAuXp4N1fky+VCtfhOkDUFIv5ea7p4wuTomI4QTrXvFBX2S4jZsmyTSrStQl+E+4w+RzxA==
+  dependencies:
+    chalk "^4.1.0"
+    enhanced-resolve "^5.7.0"
+    tsconfig-paths "^4.1.2"
+
+tsconfig-paths@^4.1.2:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz"
+  integrity sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==
+  dependencies:
+    json5 "^2.2.2"
+    minimist "^1.2.6"
+    strip-bom "^3.0.0"
+
+typescript@5.4.2:
+  version "5.4.2"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz"
+  integrity sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==
+
+undici-types@~5.26.4:
+  version "5.26.5"
+  resolved "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz"
+  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
+
+update-browserslist-db@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz"
+  integrity sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==
+  dependencies:
+    escalade "^3.1.2"
+    picocolors "^1.0.1"
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+watchpack@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz"
+  integrity sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==
+  dependencies:
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.1.2"
+
+webpack-cli@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz"
+  integrity sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==
+  dependencies:
+    "@discoveryjs/json-ext" "^0.5.0"
+    "@webpack-cli/configtest" "^2.1.1"
+    "@webpack-cli/info" "^2.0.2"
+    "@webpack-cli/serve" "^2.0.5"
+    colorette "^2.0.14"
+    commander "^10.0.1"
+    cross-spawn "^7.0.3"
+    envinfo "^7.7.3"
+    fastest-levenshtein "^1.0.12"
+    import-local "^3.0.2"
+    interpret "^3.1.1"
+    rechoir "^0.8.0"
+    webpack-merge "^5.7.3"
+
+webpack-merge@^5.7.3:
+  version "5.10.0"
+  resolved "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.10.0.tgz"
+  integrity sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==
+  dependencies:
+    clone-deep "^4.0.1"
+    flat "^5.0.2"
+    wildcard "^2.0.0"
+
+webpack-sources@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz"
+  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
+
+webpack@^5.94.0:
+  version "5.94.0"
+  resolved "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz"
+  integrity sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==
+  dependencies:
+    "@types/estree" "^1.0.5"
+    "@webassemblyjs/ast" "^1.12.1"
+    "@webassemblyjs/wasm-edit" "^1.12.1"
+    "@webassemblyjs/wasm-parser" "^1.12.1"
+    acorn "^8.7.1"
+    acorn-import-attributes "^1.9.5"
+    browserslist "^4.21.10"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.17.1"
+    es-module-lexer "^1.2.1"
+    eslint-scope "5.1.1"
+    events "^3.2.0"
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.2.11"
+    json-parse-even-better-errors "^2.3.1"
+    loader-runner "^4.2.0"
+    mime-types "^2.1.27"
+    neo-async "^2.6.2"
+    schema-utils "^3.2.0"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.3.10"
+    watchpack "^2.4.1"
+    webpack-sources "^3.2.3"
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+wildcard@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz"
+  integrity sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==
diff --git a/tools/preset-sync/index.ts b/tools/preset-sync/index.ts
new file mode 100755
index 0000000000..4a4c782bbc
--- /dev/null
+++ b/tools/preset-sync/index.ts
@@ -0,0 +1,133 @@
+import fs from 'fs';
+import path from 'path';
+
+/* eslint-disable no-console */
+const PRESETS = {
+  arbitrum: 'https://arbitrum.blockscout.com',
+  arbitrum_sepolia: 'https://arbitrum-sepolia.blockscout.com',
+  base: 'https://base.blockscout.com',
+  blackfort_testnet: 'https://blackfort-testnet.blockscout.com',
+  celo_alfajores: 'https://celo-alfajores.blockscout.com',
+  eth: 'https://eth.blockscout.com',
+  eth_goerli: 'https://eth-goerli.blockscout.com',
+  eth_sepolia: 'https://eth-sepolia.blockscout.com',
+  garnet: 'https://explorer.garnetchain.com',
+  filecoin: 'https://filecoin.blockscout.com',
+  gnosis: 'https://gnosis.blockscout.com',
+  optimism: 'https://optimism.blockscout.com',
+  optimism_celestia: 'https://opcelestia-raspberry.gelatoscout.com',
+  optimism_sepolia: 'https://optimism-sepolia.blockscout.com',
+  polygon: 'https://polygon.blockscout.com',
+  rootstock_testnet: 'https://rootstock-testnet.blockscout.com',
+  scroll_sepolia: 'https://scroll-sepolia.blockscout.com',
+  shibarium: 'https://www.shibariumscan.io',
+  stability_testnet: 'https://stability-testnet.blockscout.com',
+  zkevm: 'https://zkevm.blockscout.com',
+  zksync: 'https://zksync.blockscout.com',
+  zilliqa_prototestnet: 'https://zilliqa-prototestnet.blockscout.com',
+  zora: 'https://explorer.zora.energy',
+  // main === staging
+  main: 'https://eth-sepolia.k8s-dev.blockscout.com',
+};
+
+const LOCAL_ENVS = {
+  NEXT_PUBLIC_APP_PROTOCOL: 'http',
+  NEXT_PUBLIC_APP_HOST: 'localhost',
+  NEXT_PUBLIC_APP_PORT: '3000',
+  NEXT_PUBLIC_APP_ENV: 'development',
+  NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL: 'ws',
+};
+
+const IGNORED_ENVS = [
+  'NEXT_PUBLIC_GIT_COMMIT_SHA',
+  'NEXT_PUBLIC_GIT_TAG',
+];
+
+function parseScriptArgs() {
+  const args = process.argv.slice(2);
+
+  const result: Record<string, string> = {};
+  args.forEach(arg => {
+    const [ key, value ] = arg.split('=');
+    if (key && value) {
+      result[key.replace(/^--/, '') as keyof typeof result] = value;
+    }
+  });
+
+  return result;
+}
+
+function getSecretEnvsList() {
+  const fileContent = fs.readFileSync(path.resolve(__dirname, '../../.env.example'), 'utf8');
+  const result = fileContent.split('\n').map((line) => line.split('=')[0]);
+  return result;
+}
+
+function updateFileContent(envsEntries: Array<[ string, string ]>, presetId: keyof typeof PRESETS) {
+  const presetEnvsContent = envsEntries
+    .map(([ key, value ]) => `${ key }=${ value }`)
+    .join('\n');
+
+  const chainName = envsEntries.find(([ key ]) => key === 'NEXT_PUBLIC_NETWORK_NAME')?.[1] ?? 'Unknown';
+
+  const explorerUrl = PRESETS[presetId];
+
+  const localEnvsContent = Object.entries(LOCAL_ENVS)
+    .map(([ key, value ]) => `${ key }=${ value }`)
+    .join('\n');
+
+  const content =
+    `# Set of ENVs for ${ chainName } network explorer\n` +
+    '# ' + explorerUrl + '\n' +
+    `# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=${ presetId }"\n` +
+    '\n' +
+    '# Local ENVs\n' +
+    localEnvsContent + '\n' +
+    '\n' +
+    '# Instance ENVs\n' +
+    presetEnvsContent;
+
+  fs.writeFileSync(path.resolve(__dirname, `../../configs/envs/.env.${ presetId }`), content);
+}
+
+async function updatePresetFile(presetId: keyof typeof PRESETS) {
+  const secretEnvs = getSecretEnvsList();
+
+  const instanceUrl = PRESETS[presetId];
+  const response = await fetch(`${ instanceUrl }/node-api/config`);
+  const instanceConfig = await response.json() as Record<'envs', Record<string, string>>;
+
+  const ignoredEnvs = [
+    ...Object.keys(LOCAL_ENVS),
+    ...IGNORED_ENVS,
+    ...secretEnvs,
+  ];
+
+  const presetEnvsEntries = Object.entries(instanceConfig.envs)
+    .filter(([ key ]) => !ignoredEnvs.includes(key));
+
+  updateFileContent(presetEnvsEntries, presetId);
+}
+
+async function run() {
+  console.log(`🌀 Syncing preset configuration file...`);
+
+  const args = parseScriptArgs();
+  if (!args.name) {
+    console.log('🚨 No "--name" argument is provided. Exiting...');
+    return;
+  }
+
+  const presetId = args.name as keyof typeof PRESETS;
+  const instanceUrl = PRESETS[presetId];
+  if (!instanceUrl) {
+    console.log(`🚨 No preset with name "${ presetId }" found. Exiting...`);
+    return;
+  }
+
+  await updatePresetFile(presetId);
+
+  console.log(`✅ Done!`);
+}
+
+run();
diff --git a/tools/preset-sync/tsconfig.json b/tools/preset-sync/tsconfig.json
new file mode 100644
index 0000000000..b9056abc0f
--- /dev/null
+++ b/tools/preset-sync/tsconfig.json
@@ -0,0 +1,15 @@
+{
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+		"module": "node16",
+    	"target": "es2022",
+		"resolveJsonModule": false,
+		"isolatedModules": false,
+		"noEmit": false,
+		"moduleResolution": "node16"
+	},
+	"include": [ 
+		"./index.ts", 
+	]
+}
+  
\ No newline at end of file
diff --git a/tools/scripts/dev.preset.sh b/tools/scripts/dev.preset.sh
index c8566819e0..d0a0d49e66 100755
--- a/tools/scripts/dev.preset.sh
+++ b/tools/scripts/dev.preset.sh
@@ -17,7 +17,7 @@ fi
 # download assets for the running instance
 dotenv \
   -e $config_file \
-  -- bash -c './deploy/scripts/download_assets.sh ./public/assets'
+  -- bash -c './deploy/scripts/download_assets.sh ./public/assets/configs'
 
 yarn svg:build-sprite
 echo ""
@@ -28,5 +28,5 @@ dotenv \
   -v NEXT_PUBLIC_GIT_TAG=$(git describe --tags --abbrev=0) \
   -e $config_file \
   -e $secrets_file \
-  -- bash -c './deploy/scripts/make_envs_script.sh && next dev -- -p $NEXT_PUBLIC_APP_PORT' |
+  -- bash -c './deploy/scripts/make_envs_script.sh && next dev -p $NEXT_PUBLIC_APP_PORT' |
 pino-pretty
\ No newline at end of file
diff --git a/tools/scripts/dev.sh b/tools/scripts/dev.sh
index fabcad2ff4..dea2114c22 100755
--- a/tools/scripts/dev.sh
+++ b/tools/scripts/dev.sh
@@ -6,7 +6,7 @@ dotenv \
   -e .env.local \
   -e .env.development \
   -e .env \
-  -- bash -c './deploy/scripts/download_assets.sh ./public/assets'
+  -- bash -c './deploy/scripts/download_assets.sh ./public/assets/configs'
 
 yarn svg:build-sprite
 echo ""
@@ -20,5 +20,5 @@ dotenv \
   -e .env.local \
   -e .env.development \
   -e .env \
-  -- bash -c './deploy/scripts/make_envs_script.sh && next dev -- -p $NEXT_PUBLIC_APP_PORT' |
+  -- bash -c './deploy/scripts/make_envs_script.sh && next dev --turbopack -p $NEXT_PUBLIC_APP_PORT' |
 pino-pretty
\ No newline at end of file
diff --git a/tools/scripts/favicon-generator.dev.sh b/tools/scripts/favicon-generator.dev.sh
index 9d69088a8f..85750d43ba 100755
--- a/tools/scripts/favicon-generator.dev.sh
+++ b/tools/scripts/favicon-generator.dev.sh
@@ -1,16 +1,9 @@
-secrets_file="./configs/envs/.env.secrets"
-favicon_folder="./public/favicon/"
+favicon_folder="./public/assets/favicon/"
 master_url="https://raw.githubusercontent.com/blockscout/frontend/main/tools/scripts/favicon.svg"
 
-if [ ! -f "$secrets_file" ]; then
-    echo "Error: File '$secrets_file' not found."
-    exit 1
-fi
-
 dotenv \
   -v MASTER_URL=$master_url \
-  -e $secrets_file \
-  -- bash -c 'cd ./deploy/tools/favicon-generator && ./script.sh'
+  -- bash -c 'cd ./deploy/tools/favicon-generator && yarn install --frozen-lockfile && node "$(pwd)/index.js"'
 
 if [ -d "$favicon_folder" ]; then
   rm -r "$favicon_folder"
diff --git a/tools/scripts/pw.docker.deps.sh b/tools/scripts/pw.docker.deps.sh
new file mode 100755
index 0000000000..719930361f
--- /dev/null
+++ b/tools/scripts/pw.docker.deps.sh
@@ -0,0 +1,3 @@
+#!/bin/bash
+
+yarn install --modules-folder node_modules_linux
diff --git a/tools/scripts/pw.docker.sh b/tools/scripts/pw.docker.sh
index 30179e8c4c..49c763f9ad 100755
--- a/tools/scripts/pw.docker.sh
+++ b/tools/scripts/pw.docker.sh
@@ -1,7 +1,5 @@
 #!/bin/bash
 
-yarn install --modules-folder node_modules_linux
-
 export NODE_PATH=$(pwd)/node_modules_linux
 
 yarn test:pw "$@"
diff --git a/tools/scripts/pw.sh b/tools/scripts/pw.sh
index 22aee344a2..0754f0be1e 100755
--- a/tools/scripts/pw.sh
+++ b/tools/scripts/pw.sh
@@ -10,7 +10,73 @@ dotenv \
 
 yarn svg:build-sprite
 
+# Check if the "--affected" argument is present in the script args
+check_affected_flag() {
+    local affected_flag=false
+
+    for arg in "$@"; do
+        if [[ "$arg" = "--affected"* ]]; then
+            # Extract the value after the equals sign
+            is_affected_value=${is_affected_arg#*=}
+
+            if [ "$is_affected_value" != "false" ]; then
+                affected_flag=true
+            fi
+            
+            break
+        fi
+    done
+
+    echo "$affected_flag"
+}
+
+# Remove the "--affected" argument from the script args
+filter_arguments() {
+    local args=()
+
+    for arg in "$@"; do
+        if [[ "$arg" != "--affected"* ]]; then
+            args+=("$arg")
+        fi
+    done
+
+    echo "${args[@]}"
+}
+
+get_files_to_run() {
+  local is_affected=$1
+  local files_to_run=""
+
+  if [ "$is_affected" = true ]; then
+      affected_tests_file="./playwright/affected-tests.txt"
+
+      if [ -f "$affected_tests_file" ]; then
+            file_content=$(<"$affected_tests_file")
+            files_to_run="${file_content//$'\n'/$' '}"
+
+            if [ -z "$files_to_run" ]; then
+                exit 1
+            fi
+      fi
+  fi
+
+  echo "$files_to_run"
+}
+
+args=$(filter_arguments "$@")
+affected_flag=$(check_affected_flag "$@")
+files_to_run=$(get_files_to_run "$affected_flag")
+if [ $? -eq 1 ]; then
+    echo "No affected tests found in the file. Exiting..."
+    exit 0
+fi
+
+echo "Running Playwright tests with the following arguments: $args"
+echo "Affected flag: $affected_flag"
+echo "Files to run: $files_to_run"
+
 dotenv \
   -v NODE_OPTIONS=\"--max-old-space-size=4096\" \
   -e $config_file \
-  -- playwright test -c playwright-ct.config.ts "$@"
+  -- playwright test -c playwright-ct.config.ts $files_to_run $args
+
diff --git a/tsconfig.json b/tsconfig.json
index dab9681982..29c8095af6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,6 +16,6 @@
     "incremental": true,
     "baseUrl": ".",
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.node.ts", "**/*.tsx", "decs.d.ts", "global.d.ts"],
-  "exclude": ["node_modules", "node_modules_linux", "./deploy/tools/envs-validator"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.node.ts", "**/*.tsx", "**/*.pw.tsx", "decs.d.ts", "global.d.ts"],
+  "exclude": ["node_modules", "node_modules_linux", "./deploy/tools/envs-validator", "./deploy/tools/favicon-generator"],
 }
diff --git a/types/api/account.ts b/types/api/account.ts
index 101b746ed0..a58c7311ff 100644
--- a/types/api/account.ts
+++ b/types/api/account.ts
@@ -1,12 +1,14 @@
+import type { Abi } from 'viem';
+
 import type { AddressParam } from './addressParams';
 export interface AddressTag {
   address_hash: string;
   address: AddressParam;
   name: string;
-  id: string;
+  id: number;
 }
 
-export type AddressTags = Array<AddressTag>
+export type AddressTags = Array<AddressTag>;
 
 export type AddressTagsResponse = {
   items: AddressTags;
@@ -14,14 +16,14 @@ export type AddressTagsResponse = {
     id: number;
     items_count: number;
   } | null;
-}
+};
 
 export interface ApiKey {
   api_key: string;
   name: string;
 }
 
-export type ApiKeys = Array<ApiKey>
+export type ApiKeys = Array<ApiKey>;
 
 export interface ModelError {
   message: string;
@@ -36,6 +38,7 @@ export interface NotificationSettings {
   'native': NotificationDirection;
   'ERC-20': NotificationDirection;
   'ERC-721': NotificationDirection;
+  'ERC-404': NotificationDirection;
 }
 
 export interface NotificationMethods {
@@ -51,10 +54,10 @@ export interface Transaction {
 export interface TransactionTag {
   transaction_hash: string;
   name: string;
-  id: string;
+  id: number;
 }
 
-export type TransactionTags = Array<TransactionTag>
+export type TransactionTags = Array<TransactionTag>;
 
 export type TransactionTagsResponse = {
   items: TransactionTags;
@@ -62,14 +65,15 @@ export type TransactionTagsResponse = {
     id: number;
     items_count: number;
   } | null;
-}
+};
 
-export type Transactions = Array<Transaction>
+export type Transactions = Array<Transaction>;
 
 export interface UserInfo {
   name?: string;
   nickname?: string;
-  email: string;
+  email: string | null;
+  address_hash: string | null;
   avatar?: string;
 }
 
@@ -80,7 +84,7 @@ export interface WatchlistAddress {
   exchange_rate: string;
   notification_settings: NotificationSettings;
   notification_methods: NotificationMethods;
-  id: string;
+  id: number;
   address: AddressParam;
   tokens_count: number;
   tokens_fiat_value: string;
@@ -92,7 +96,7 @@ export interface WatchlistAddressNew {
   notificationSettings: NotificationSettings;
 }
 
-export type WatchlistAddresses = Array<WatchlistAddress>
+export type WatchlistAddresses = Array<WatchlistAddress>;
 
 export type WatchlistResponse = {
   items: WatchlistAddresses;
@@ -100,62 +104,30 @@ export type WatchlistResponse = {
     id: number;
     items_count: number;
   } | null;
-}
-
-export interface PublicTag {
-  website: string;
-  tags: string; // tag_1;tag_2;tag_3 etc.
-  is_owner: boolean;
-  id: number;
-  full_name: string;
-  email: string;
-  company: string;
-  addresses: Array<string>;
-  addresses_with_info: Array<AddressParam>;
-  additional_comment: string;
-}
-
-export type PublicTagNew = Omit<PublicTag, 'id' | 'addresses_with_info'>
-
-export type PublicTags = Array<PublicTag>;
+};
 
-export type CustomAbis = Array<CustomAbi>
+export type CustomAbis = Array<CustomAbi>;
 
 export interface CustomAbi {
   name: string;
-  id: string;
+  id: number;
   contract_address_hash: string;
   contract_address: AddressParam;
-  abi: Array<AbiItem>;
-}
-
-export interface AbiItem {
-  type: 'function';
-  stateMutability: 'nonpayable' | 'view';
-  payable: boolean;
-  outputs: Array<AbiInputOutput>;
-  name: string;
-  inputs: Array<AbiInputOutput>;
-  constant: boolean;
-}
-
-interface AbiInputOutput {
-  type: 'uint256' | 'address';
-  name: string;
+  abi: Abi;
 }
 
 export type WatchlistErrors = {
   address_hash?: Array<string>;
   name?: Array<string>;
   watchlist_id?: Array<string>;
-}
+};
 
 export type CustomAbiErrors = {
   address_hash?: Array<string>;
   name?: Array<string>;
   abi?: Array<string>;
   identity_id?: Array<string>;
-}
+};
 
 export type ApiKeyErrors = {
   name?: Array<string>;
@@ -166,21 +138,13 @@ export type AddressTagErrors = {
   address_hash: Array<string>;
   name: Array<string>;
   identity_id?: Array<string>;
-}
+};
 
 export type TransactionTagErrors = {
-  tx_hash: Array<string>;
+  transaction_hash: Array<string>;
   name: Array<string>;
   identity_id?: Array<string>;
-}
-
-export type PublicTagErrors = {
-  additional_comment: Array<string>;
-  addresses: Array<string>;
-  email: Array<string>;
-  full_name: Array<string>;
-  tags: Array<string>;
-}
+};
 
 export interface VerifiedAddress {
   userId: string;
diff --git a/types/api/address.ts b/types/api/address.ts
index 1a75f593ee..6b6e1a2818 100644
--- a/types/api/address.ts
+++ b/types/api/address.ts
@@ -1,8 +1,9 @@
 import type { Transaction } from 'types/api/transaction';
 
-import type { UserTags } from './addressParams';
-import type { Block } from './block';
+import type { UserTags, AddressImplementation, AddressParam, AddressFilecoinParams } from './addressParams';
+import type { Block, EpochRewardsType } from './block';
 import type { InternalTransaction } from './internalTransaction';
+import type { MudWorldSchema, MudWorldTable } from './mudWorlds';
 import type { NFTTokenType, TokenInfo, TokenInstance, TokenType } from './token';
 import type { TokenTransfer, TokenTransferPagination } from './tokenTransfer';
 
@@ -10,25 +11,21 @@ export interface Address extends UserTags {
   block_number_balance_updated_at: number | null;
   coin_balance: string | null;
   creator_address_hash: string | null;
-  creation_tx_hash: string | null;
+  creator_filecoin_robust_address?: string | null;
+  creation_transaction_hash: string | null;
   exchange_rate: string | null;
   ens_domain_name: string | null;
+  filecoin?: AddressFilecoinParams;
+  zilliqa?: AddressZilliqaParams;
   // TODO: if we are happy with tabs-counters method, should we delete has_something fields?
   has_beacon_chain_withdrawals?: boolean;
-  has_custom_methods_read: boolean;
-  has_custom_methods_write: boolean;
   has_decompiled_code: boolean;
   has_logs: boolean;
-  has_methods_read: boolean;
-  has_methods_read_proxy: boolean;
-  has_methods_write: boolean;
-  has_methods_write_proxy: boolean;
   has_token_transfers: boolean;
   has_tokens: boolean;
   has_validated_blocks: boolean;
   hash: string;
-  implementation_address: string | null;
-  implementation_name: string | null;
+  implementations: Array<AddressImplementation> | null;
   is_contract: boolean;
   is_verified: boolean;
   name: string | null;
@@ -36,10 +33,14 @@ export interface Address extends UserTags {
   watchlist_address_id: number | null;
 }
 
+export interface AddressZilliqaParams {
+  is_scilla_contract: boolean;
+}
+
 export interface AddressCounters {
   transactions_count: string;
   token_transfers_count: string;
-  gas_usage_count: string;
+  gas_usage_count: string | null;
   validations_count: string | null;
 }
 
@@ -54,13 +55,13 @@ export type AddressNFT = TokenInstance & {
   token: TokenInfo;
   token_type: Omit<TokenType, 'ERC-20'>;
   value: string;
-}
+};
 
 export type AddressCollection = {
   token: TokenInfo;
   amount: string;
   token_instances: Array<Omit<AddressNFT, 'token'>>;
-}
+};
 
 export interface AddressTokensResponse {
   items: Array<AddressTokenBalance>;
@@ -111,7 +112,7 @@ export type AddressFromToFilter = typeof AddressFromToFilterValues[number] | und
 
 export type AddressTxsFilters = {
   filter: AddressFromToFilter;
-}
+};
 
 export interface AddressTokenTransferResponse {
   items: Array<TokenTransfer>;
@@ -122,15 +123,15 @@ export type AddressTokenTransferFilters = {
   filter?: AddressFromToFilter;
   type?: Array<TokenType>;
   token?: string;
-}
+};
 
 export type AddressTokensFilter = {
   type: TokenType;
-}
+};
 
 export type AddressNFTTokensFilter = {
   type: Array<NFTTokenType> | undefined;
-}
+};
 
 export interface AddressCoinBalanceHistoryItem {
   block_number: number;
@@ -148,10 +149,13 @@ export interface AddressCoinBalanceHistoryResponse {
   } | null;
 }
 
-export type AddressCoinBalanceHistoryChart = Array<{
-  date: string;
-  value: string;
-}>
+export type AddressCoinBalanceHistoryChart = {
+  items: Array<{
+    date: string;
+    value: string;
+  }>;
+  days: number;
+};
 
 export interface AddressBlocksValidatedResponse {
   items: Array<Block>;
@@ -176,7 +180,7 @@ export type AddressWithdrawalsResponse = {
     index: number;
     items_count: number;
   };
-}
+};
 
 export type AddressWithdrawalsItem = {
   amount: string;
@@ -184,7 +188,7 @@ export type AddressWithdrawalsItem = {
   index: number;
   timestamp: string;
   validator_index: number;
-}
+};
 
 export type AddressTabsCounters = {
   internal_txs_count: number | null;
@@ -194,4 +198,87 @@ export type AddressTabsCounters = {
   transactions_count: number | null;
   validations_count: number | null;
   withdrawals_count: number | null;
-}
+  celo_election_rewards_count?: number | null;
+};
+
+// MUD framework
+export type AddressMudTableItem = {
+  schema: MudWorldSchema;
+  table: MudWorldTable;
+};
+
+export type AddressMudTables = {
+  items: Array<AddressMudTableItem>;
+  next_page_params: {
+    items_count: number;
+    table_id: string;
+  };
+};
+
+export type AddressMudTablesFilter = {
+  q?: string;
+};
+
+export type AddressMudRecords = {
+  items: Array<AddressMudRecordsItem>;
+  schema: MudWorldSchema;
+  table: MudWorldTable;
+  next_page_params: {
+    items_count: number;
+    key0: string;
+    key1: string;
+    key_bytes: string;
+  };
+};
+
+export type AddressMudRecordsItem = {
+  decoded: Record<string, string | Array<string>>;
+  id: string;
+  is_deleted: boolean;
+  timestamp: string;
+};
+
+export type AddressMudRecordsFilter = {
+  filter_key0?: string;
+  filter_key1?: string;
+};
+
+export type AddressMudRecordsSorting = {
+  sort: 'key0' | 'key1';
+  order: 'asc' | 'desc' | undefined;
+};
+
+export type AddressMudRecord = {
+  record: AddressMudRecordsItem;
+  schema: MudWorldSchema;
+  table: MudWorldTable;
+};
+
+export type AddressEpochRewardsResponse = {
+  items: Array<AddressEpochRewardsItem>;
+  next_page_params: {
+    amount: string;
+    associated_account_address_hash: string;
+    block_number: number;
+    items_count: number;
+    type: EpochRewardsType;
+  } | null;
+};
+
+export type AddressEpochRewardsItem = {
+  type: EpochRewardsType;
+  token: TokenInfo;
+  amount: string;
+  block_number: number;
+  block_hash: string;
+  block_timestamp: string;
+  account: AddressParam;
+  epoch_number: number;
+  associated_account: AddressParam;
+};
+
+export type AddressXStarResponse = {
+  data: {
+    level: string | null;
+  };
+};
diff --git a/types/api/addressMetadata.ts b/types/api/addressMetadata.ts
new file mode 100644
index 0000000000..6840a8235f
--- /dev/null
+++ b/types/api/addressMetadata.ts
@@ -0,0 +1,54 @@
+import type { AlertStatus } from '@chakra-ui/react';
+
+export interface AddressMetadataInfo {
+  addresses: Record<string, {
+    tags: Array<AddressMetadataTag>;
+    reputation: number | null;
+  }>;
+}
+
+export type AddressMetadataTagType = 'name' | 'generic' | 'classifier' | 'information' | 'note' | 'protocol';
+
+// Response model from Metadata microservice API
+export interface AddressMetadataTag {
+  slug: string;
+  name: string;
+  tagType: AddressMetadataTagType;
+  ordinal: number;
+  meta: string | null;
+}
+
+// Response model from Blockscout API with parsed meta field
+export interface AddressMetadataTagApi extends Omit<AddressMetadataTag, 'meta'> {
+  meta: {
+    textColor?: string;
+    bgColor?: string;
+    tagIcon?: string;
+    tagUrl?: string;
+    tooltipIcon?: string;
+    tooltipTitle?: string;
+    tooltipDescription?: string;
+    tooltipUrl?: string;
+    appID?: string;
+    appMarketplaceURL?: string;
+    appLogoURL?: string;
+    appActionButtonText?: string;
+    warpcastHandle?: string;
+    data?: string;
+    alertBgColor?: string;
+    alertTextColor?: string;
+    alertStatus?: AlertStatus;
+  } | null;
+}
+
+// TAG SUBMISSION
+
+export interface PublicTagType {
+  id: string;
+  type: AddressMetadataTagType;
+  description: string;
+}
+
+export interface PublicTagTypesResponse {
+  tagTypes: Array<PublicTagType>;
+}
diff --git a/types/api/addressParams.ts b/types/api/addressParams.ts
index fe8cb3d90c..dbddbf73b2 100644
--- a/types/api/addressParams.ts
+++ b/types/api/addressParams.ts
@@ -1,3 +1,11 @@
+import type { AddressMetadataTagApi } from './addressMetadata';
+
+export interface AddressImplementation {
+  address: string;
+  filecoin_robust_address?: string | null;
+  name?: string | null;
+}
+
 export interface AddressTag {
   label: string;
   display_name: string;
@@ -9,6 +17,30 @@ export interface WatchlistName {
   display_name: string;
 }
 
+export type AddressFilecoinParams = {
+  actor_type?: FilecoinActorType;
+  id?: string | null;
+  robust?: string | null;
+};
+
+export type FilecoinActorType =
+  'account' |
+  'cron' |
+  'datacap' |
+  'eam' |
+  'ethaccount' |
+  'evm' |
+  'init' |
+  'market' |
+  'miner' |
+  'multisig' |
+  'paych' |
+  'placeholder' |
+  'power' |
+  'reward' |
+  'system' |
+  'verifreg';
+
 export interface UserTags {
   private_tags: Array<AddressTag> | null;
   watchlist_names: Array<WatchlistName> | null;
@@ -17,11 +49,16 @@ export interface UserTags {
 
 export type AddressParamBasic = {
   hash: string;
-  implementation_name: string | null;
+  implementations: Array<AddressImplementation> | null;
   name: string | null;
   is_contract: boolean;
   is_verified: boolean | null;
   ens_domain_name: string | null;
-}
+  metadata?: {
+    reputation: number | null;
+    tags: Array<AddressMetadataTagApi>;
+  } | null;
+  filecoin?: AddressFilecoinParams;
+};
 
 export type AddressParam = UserTags & AddressParamBasic;
diff --git a/types/api/addresses.ts b/types/api/addresses.ts
index 9c76000760..a471c67665 100644
--- a/types/api/addresses.ts
+++ b/types/api/addresses.ts
@@ -1,6 +1,6 @@
 import type { AddressParam } from './addressParams';
 
-export type AddressesItem = AddressParam &{ tx_count: string; coin_balance: string }
+export type AddressesItem = AddressParam & { transaction_count: string; coin_balance: string | null };
 
 export type AddressesResponse = {
   items: Array<AddressesItem>;
@@ -10,4 +10,14 @@ export type AddressesResponse = {
     items_count: number;
   } | null;
   total_supply: string;
+};
+
+export interface AddressesMetadataSearchResult {
+  items: Array<AddressesItem>;
+  next_page_params: null;
+}
+
+export interface AddressesMetadataSearchFilters {
+  slug: string;
+  tag_type: string;
 }
diff --git a/types/api/advancedFilter.ts b/types/api/advancedFilter.ts
new file mode 100644
index 0000000000..474d299df3
--- /dev/null
+++ b/types/api/advancedFilter.ts
@@ -0,0 +1,69 @@
+import type { AddressParam } from './addressParams';
+import type { TokenInfo } from './token';
+
+export type AdvancedFilterParams = {
+  tx_types?: Array<AdvancedFilterType>;
+  methods?: Array<string>;
+  methods_names?: Array<string>; /* frontend only */
+  age_from?: string;
+  age_to?: string;
+  age?: AdvancedFilterAge | ''; /* frontend only */
+  from_address_hashes_to_include?: Array<string>;
+  from_address_hashes_to_exclude?: Array<string>;
+  to_address_hashes_to_include?: Array<string>;
+  to_address_hashes_to_exclude?: Array<string>;
+  address_relation?: 'or' | 'and';
+  amount_from?: string;
+  amount_to?: string;
+  token_contract_address_hashes_to_include?: Array<string>;
+  token_contract_address_hashes_to_exclude?: Array<string>;
+  token_contract_symbols_to_include?: Array<string>;
+  token_contract_symbols_to_exclude?: Array<string>;
+};
+
+export const ADVANCED_FILTER_TYPES = [ 'coin_transfer', 'ERC-20', 'ERC-404', 'ERC-721', 'ERC-1155' ] as const;
+export type AdvancedFilterType = typeof ADVANCED_FILTER_TYPES[number];
+
+export const ADVANCED_FILTER_AGES = [ '1h', '24h', '7d', '1m', '3m', '6m' ] as const;
+export type AdvancedFilterAge = typeof ADVANCED_FILTER_AGES[number];
+
+export type AdvancedFilterResponseItem = {
+  fee: string;
+  from: AddressParam;
+  created_contract?: AddressParam;
+  hash: string;
+  method: string | null;
+  timestamp: string;
+  to: AddressParam;
+  token: TokenInfo | null;
+  total: {
+    decimals: string | null;
+    value: string;
+  } | null;
+  type: string;
+  value: string | null;
+};
+
+export type AdvancedFiltersSearchParams = {
+  methods: Record<string, string>;
+  tokens: Record<string, TokenInfo>;
+};
+
+export type AdvancedFilterResponse = {
+  items: Array<AdvancedFilterResponseItem>;
+  search_params: AdvancedFiltersSearchParams;
+  next_page_params: {
+    block_number: number;
+    internal_transaction_index: number | null;
+    token_transfer_index: number | null;
+    transaction_index: number;
+    items_count: number;
+  };
+};
+
+export type AdvancedFilterMethodsResponse = Array<AdvancedFilterMethodInfo>;
+
+export type AdvancedFilterMethodInfo = {
+  method_id: string;
+  name?: string;
+};
diff --git a/types/api/arbitrumL2.ts b/types/api/arbitrumL2.ts
new file mode 100644
index 0000000000..4bf19ed35e
--- /dev/null
+++ b/types/api/arbitrumL2.ts
@@ -0,0 +1,119 @@
+import type { Block } from './block';
+import type { Transaction } from './transaction';
+
+export interface ArbitrumLatestDepositsItem {
+  completion_transaction_hash: string;
+  origination_timestamp: string | null;
+  origination_transaction_block_number: number | null;
+  origination_transaction_hash: string | null;
+}
+
+export interface ArbitrumLatestDepositsResponse {
+  items: Array<ArbitrumLatestDepositsItem>;
+}
+
+export type ArbitrumL2MessagesItem = {
+  completion_transaction_hash: string | null;
+  id: number;
+  origination_address: string;
+  origination_timestamp: string | null;
+  origination_transaction_block_number: number | null;
+  origination_transaction_hash: string;
+  status: 'initiated' | 'sent' | 'confirmed' | 'relayed';
+};
+
+export type ArbitrumL2MessagesResponse = {
+  items: Array<ArbitrumL2MessagesItem>;
+  next_page_params: {
+    direction: string;
+    id: number;
+    items_count: number;
+  };
+};
+
+export type ArbitrumL2TxData = {
+  hash: string | null;
+  status: string | null;
+  timestamp: string | null;
+};
+
+type ArbitrumL2BatchCommitmentTx = {
+  block_number: number;
+  hash: string;
+  status: string;
+  timestamp: string;
+};
+
+type BatchDataContainer = 'in_blob4844' | 'in_calldata' | 'in_anytrust' | 'in_celestia' | null;
+
+export type ArbitrumL2TxnBatchesItem = {
+  blocks_count: number;
+  commitment_transaction: ArbitrumL2BatchCommitmentTx;
+  number: number;
+  transactions_count: number;
+  batch_data_container: BatchDataContainer;
+};
+
+export type ArbitrumL2TxnBatchesResponse = {
+  items: Array<ArbitrumL2TxnBatchesItem>;
+  next_page_params: {
+    number: number;
+    items_count: number;
+  } | null;
+};
+
+export type ArbitrumL2TxnBatchDAAnytrust = {
+  batch_data_container: 'in_anytrust';
+  bls_signature: string;
+  data_hash: string;
+  timeout: string;
+  signers: Array<{
+    key: string;
+    trusted: boolean;
+    proof?: string;
+  }>;
+};
+
+export type ArbitrumL2TxnBatchDataAvailability = ArbitrumL2TxnBatchDAAnytrust | {
+  batch_data_container: Exclude<BatchDataContainer, 'in_anytrust'>;
+};
+
+export type ArbitrumL2TxnBatch = {
+  after_acc: string;
+  before_acc: string;
+  commitment_transaction: ArbitrumL2BatchCommitmentTx;
+  end_block: number;
+  start_block: number;
+  number: number;
+  transactions_count: number;
+  data_availability: ArbitrumL2TxnBatchDataAvailability;
+};
+
+export type ArbitrumL2BatchTxs = {
+  items: Array<Transaction>;
+  next_page_params: {
+    batch_number: string;
+    block_number: number;
+    index: number;
+    items_count: number;
+  } | null;
+};
+
+export type ArbitrumL2BatchBlocks = {
+  items: Array<Block>;
+  next_page_params: {
+    batch_number: string;
+    block_number: number;
+    items_count: number;
+  } | null;
+};
+
+export const ARBITRUM_L2_TX_BATCH_STATUSES = [
+  'Processed on rollup' as const,
+  'Sent to base' as const,
+  'Confirmed on base' as const,
+];
+
+export type ArbitrumBatchStatus = typeof ARBITRUM_L2_TX_BATCH_STATUSES[number];
+
+export type NewArbitrumBatchSocketResponse = { batch: ArbitrumL2TxnBatchesItem };
diff --git a/types/api/blobs.ts b/types/api/blobs.ts
new file mode 100644
index 0000000000..7b8abb55fd
--- /dev/null
+++ b/types/api/blobs.ts
@@ -0,0 +1,18 @@
+export interface TxBlob {
+  hash: string;
+  blob_data: string | null;
+  kzg_commitment: string | null;
+  kzg_proof: string | null;
+}
+
+export type TxBlobs = {
+  items: Array<TxBlob>;
+  next_page_params: null;
+};
+
+export interface Blob extends TxBlob {
+  transaction_hashes: Array<{
+    block_consensus: boolean;
+    transaction_hash: string;
+  }>;
+}
diff --git a/types/api/block.ts b/types/api/block.ts
index 1f2a508b08..7b0971a064 100644
--- a/types/api/block.ts
+++ b/types/api/block.ts
@@ -2,12 +2,25 @@ import type { AddressParam } from 'types/api/addressParams';
 import type { Reward } from 'types/api/reward';
 import type { Transaction } from 'types/api/transaction';
 
+import type { ArbitrumBatchStatus, ArbitrumL2TxData } from './arbitrumL2';
+import type { OptimisticL2BatchDataContainer, OptimisticL2BlobTypeEip4844, OptimisticL2BlobTypeCelestia } from './optimisticL2';
+import type { TokenInfo } from './token';
+import type { TokenTransfer } from './tokenTransfer';
+import type { ZkSyncBatchesItem } from './zkSyncL2';
+
 export type BlockType = 'block' | 'reorg' | 'uncle';
 
+export interface BlockBaseFeeCelo {
+  amount: string;
+  breakdown: Array<{ amount: string; percentage: number; address: AddressParam }>;
+  recipient: AddressParam;
+  token: TokenInfo;
+}
+
 export interface Block {
   height: number;
   timestamp: string;
-  tx_count: number;
+  transaction_count: number;
   miner: AddressParam;
   size: number;
   hash: string;
@@ -27,7 +40,7 @@ export interface Block {
   gas_used_percentage: number | null;
   burnt_fees_percentage: number | null;
   type: BlockType;
-  tx_fees: string | null;
+  transaction_fees: string | null;
   uncles_hashes: Array<string>;
   withdrawals_count?: number;
   // ROOTSTOCK FIELDS
@@ -36,6 +49,63 @@ export interface Block {
   bitcoin_merged_mining_merkle_proof?: string | null;
   hash_for_merged_mining?: string | null;
   minimum_gas_price?: string | null;
+  // BLOB FIELDS
+  blob_gas_price?: string;
+  blob_gas_used?: string;
+  burnt_blob_fees?: string;
+  excess_blob_gas?: string;
+  blob_tx_count?: number;
+  // ZKSYNC FIELDS
+  zksync?: Omit<ZkSyncBatchesItem, 'number' | 'transaction_count' | 'timestamp'> & {
+    batch_number: number | null;
+  };
+  arbitrum?: ArbitrumBlockData;
+  optimism?: OptimismBlockData;
+  // CELO FIELDS
+  celo?: {
+    epoch_number: number;
+    is_epoch_block: boolean;
+    base_fee?: BlockBaseFeeCelo;
+  };
+  // ZILLIQA FIELDS
+  zilliqa?: ZilliqaBlockData;
+}
+
+type ArbitrumBlockData = {
+  batch_number: number;
+  commitment_transaction: ArbitrumL2TxData;
+  confirmation_transaction: ArbitrumL2TxData;
+  delayed_messages: number;
+  l1_block_height: number;
+  send_count: number;
+  send_root: string;
+  status: ArbitrumBatchStatus;
+};
+
+export interface OptimismBlockData {
+  batch_data_container: OptimisticL2BatchDataContainer;
+  internal_id: number;
+  blobs: Array<OptimisticL2BlobTypeEip4844> | Array<OptimisticL2BlobTypeCelestia> | null;
+  l1_timestamp: string;
+  l1_transaction_hashes: Array<string>;
+}
+
+export interface ZilliqaBlockData {
+  view: number;
+  quorum_certificate: ZilliqaQuorumCertificate;
+  aggregate_quorum_certificate: (ZilliqaQuorumCertificate & {
+    nested_quorum_certificates: Array<ZilliqaNestedQuorumCertificate>;
+  }) | null;
+}
+
+export interface ZilliqaQuorumCertificate {
+  view: number;
+  signature: string;
+  signers: Array<number>;
+}
+
+export interface ZilliqaNestedQuorumCertificate extends ZilliqaQuorumCertificate {
+  proposed_by_validator_index: number;
 }
 
 export interface BlocksResponse {
@@ -70,11 +140,49 @@ export type BlockWithdrawalsResponse = {
     index: number;
     items_count: number;
   } | null;
-}
+};
 
 export type BlockWithdrawalsItem = {
   amount: string;
   index: number;
   receiver: AddressParam;
   validator_index: number;
+};
+
+export interface BlockCountdownResponse {
+  result: {
+    CountdownBlock: string;
+    CurrentBlock: string;
+    EstimateTimeInSec: string;
+    RemainingBlock: string;
+  } | null;
+}
+
+export interface BlockEpochElectionReward {
+  count: number;
+  token: TokenInfo<'ERC-20'>;
+  total: string;
+}
+
+export type EpochRewardsType = 'group' | 'validator' | 'delegated_payment' | 'voter';
+
+export interface BlockEpoch {
+  number: number;
+  distribution: {
+    carbon_offsetting_transfer: TokenTransfer | null;
+    community_transfer: TokenTransfer | null;
+    reserve_bolster_transfer: TokenTransfer | null;
+  };
+  aggregated_election_rewards: Record<EpochRewardsType, BlockEpochElectionReward | null>;
+}
+
+export interface BlockEpochElectionRewardDetails {
+  account: AddressParam;
+  amount: string;
+  associated_account: AddressParam;
+}
+
+export interface BlockEpochElectionRewardDetailsResponse {
+  items: Array<BlockEpochElectionRewardDetails>;
+  next_page_params: null;
 }
diff --git a/types/api/charts.ts b/types/api/charts.ts
index 5414f68e60..27aec385e5 100644
--- a/types/api/charts.ts
+++ b/types/api/charts.ts
@@ -1,12 +1,12 @@
 export interface ChartTransactionItem {
   date: string;
-  tx_count: number;
+  transaction_count: number | null;
 }
 
 export interface ChartMarketItem {
   date: string;
-  closing_price: string;
-  market_cap?: string;
+  closing_price: string | null;
+  market_cap?: string | null;
   tvl?: string | null;
 }
 
@@ -18,3 +18,8 @@ export interface ChartMarketResponse {
   available_supply: string;
   chart_data: Array<ChartMarketItem>;
 }
+
+export interface ChartSecondaryCoinPriceResponse {
+  available_supply: string;
+  chart_data: Array<ChartMarketItem>;
+}
diff --git a/types/api/configs.ts b/types/api/configs.ts
index c04e29c359..b190c0f2b9 100644
--- a/types/api/configs.ts
+++ b/types/api/configs.ts
@@ -1,3 +1,7 @@
 export interface BackendVersionConfig {
   backend_version: string;
 }
+
+export interface CsvExportConfig {
+  limit: number;
+}
diff --git a/types/api/contract.ts b/types/api/contract.ts
index dd66d0380f..f317421e1f 100644
--- a/types/api/contract.ts
+++ b/types/api/contract.ts
@@ -3,6 +3,36 @@ import type { Abi, AbiType } from 'abitype';
 export type SmartContractMethodArgType = AbiType;
 export type SmartContractMethodStateMutability = 'view' | 'nonpayable' | 'payable';
 
+export type SmartContractLicenseType =
+'none' |
+'unlicense' |
+'mit' |
+'gnu_gpl_v2' |
+'gnu_gpl_v3' |
+'gnu_lgpl_v2_1' |
+'gnu_lgpl_v3' |
+'bsd_2_clause' |
+'bsd_3_clause' |
+'mpl_2_0' |
+'osl_3_0' |
+'apache_2_0' |
+'gnu_agpl_v3' |
+'bsl_1_1';
+
+export type SmartContractProxyType =
+  | 'eip1167'
+  | 'eip1967'
+  | 'eip1822'
+  | 'eip930'
+  | 'eip2535'
+  | 'master_copy'
+  | 'basic_implementation'
+  | 'basic_get_implementation'
+  | 'comptroller'
+  | 'clone_with_immutable_arguments'
+  | 'unknown'
+  | null;
+
 export interface SmartContract {
   deployed_bytecode: string | null;
   creation_bytecode: string | null;
@@ -11,12 +41,14 @@ export interface SmartContract {
   compiler_version: string | null;
   evm_version: string | null;
   optimization_enabled: boolean | null;
-  optimization_runs: number | null;
+  optimization_runs: number | string | null;
   name: string | null;
   verified_at: string | null;
+  is_blueprint: boolean | null;
   is_verified: boolean | null;
   is_verified_via_eth_bytecode_db: boolean | null;
   is_changed_bytecode: boolean | null;
+
   // sourcify info >>>
   is_verified_via_sourcify: boolean | null;
   is_fully_verified: boolean | null;
@@ -35,112 +67,50 @@ export interface SmartContract {
     remappings?: Array<string>;
   };
   verified_twin_address_hash: string | null;
-  minimal_proxy_address_hash: string | null;
+  verified_twin_filecoin_robust_address?: string | null;
+  proxy_type: SmartContractProxyType | null;
   language: string | null;
+  license_type: SmartContractLicenseType | null;
+  certified?: boolean;
+  zk_compiler_version?: string;
+  github_repository_metadata?: {
+    commit?: string;
+    path_prefix?: string;
+    repository_url?: string;
+  };
+  package_name?: string;
 }
 
 export type SmartContractDecodedConstructorArg = [
-  string,
+  unknown,
   {
     internalType: SmartContractMethodArgType;
     name: string;
     type: SmartContractMethodArgType;
-  }
-]
+  },
+];
 
 export interface SmartContractExternalLibrary {
   address_hash: string;
   name: string;
 }
 
-export interface SmartContractMethodBase {
-  inputs: Array<SmartContractMethodInput>;
-  outputs: Array<SmartContractMethodOutput>;
-  constant: boolean;
-  name: string;
-  stateMutability: SmartContractMethodStateMutability;
-  type: 'function';
-  payable: boolean;
-  error?: string;
-}
-
-export interface SmartContractReadMethod extends SmartContractMethodBase {
-  method_id: string;
-}
-
-export interface SmartContractWriteFallback {
-  payable?: true;
-  stateMutability: 'payable';
-  type: 'fallback';
-}
-
-export interface SmartContractWriteReceive {
-  payable?: true;
-  stateMutability: 'payable';
-  type: 'receive';
-}
-
-export type SmartContractWriteMethod = SmartContractMethodBase | SmartContractWriteFallback | SmartContractWriteReceive;
-
-export type SmartContractMethod = SmartContractReadMethod | SmartContractWriteMethod;
-
-export interface SmartContractMethodInput {
-  internalType?: SmartContractMethodArgType;
-  name: string;
-  type: SmartContractMethodArgType;
-  components?: Array<SmartContractMethodInput>;
-  fieldType?: 'native_coin';
-}
-
-export interface SmartContractMethodOutput extends SmartContractMethodInput {
-  value?: string | boolean | object;
-}
-
-export interface SmartContractQueryMethodReadSuccess {
-  is_error: false;
-  result: {
-    names: Array<string | [ string, Array<string> ]>;
-    output: Array<{
-      type: string;
-      value: string | Array<unknown>;
-    }>;
-  };
-}
-
-export interface SmartContractQueryMethodReadError {
-  is_error: true;
-  result: {
-    code: number;
-    message: string;
-  } | {
-    error: string;
-  } | {
-    raw: string;
-  } | {
-    method_call: string;
-    method_id: string;
-    parameters: Array<{ 'name': string; 'type': string; 'value': string }>;
-  };
-}
-
-export type SmartContractQueryMethodRead = SmartContractQueryMethodReadSuccess | SmartContractQueryMethodReadError;
-
 // VERIFICATION
 
-export type SmartContractVerificationMethod = 'flattened-code' | 'standard-input' | 'sourcify' | 'multi-part'
-| 'vyper-code' | 'vyper-multi-part' | 'vyper-standard-input';
+export type SmartContractVerificationMethodApi = 'flattened-code' | 'standard-input' | 'sourcify' | 'multi-part'
+| 'vyper-code' | 'vyper-multi-part' | 'vyper-standard-input' | 'stylus-github-repository';
 
 export interface SmartContractVerificationConfigRaw {
   solidity_compiler_versions: Array<string>;
   solidity_evm_versions: Array<string>;
   verification_options: Array<string>;
   vyper_compiler_versions: Array<string>;
+  stylus_compiler_versions?: Array<string>;
   vyper_evm_versions: Array<string>;
   is_rust_verifier_microservice_enabled: boolean;
-}
-
-export interface SmartContractVerificationConfig extends SmartContractVerificationConfigRaw {
-  verification_options: Array<SmartContractVerificationMethod>;
+  license_types: Record<SmartContractLicenseType, number>;
+  zk_compiler_versions?: Array<string>;
+  zk_optimization_modes?: Array<string>;
 }
 
 export type SmartContractVerificationResponse = {
@@ -148,7 +118,7 @@ export type SmartContractVerificationResponse = {
   errors: SmartContractVerificationError;
 } | {
   status: 'success';
-}
+};
 
 export interface SmartContractVerificationError {
   contract_source_code?: Array<string>;
@@ -159,24 +129,41 @@ export interface SmartContractVerificationError {
   name?: Array<string>;
 }
 
-export type SolidityscanReport = {
-  scan_report: {
-    scan_status: string;
-    scan_summary: {
-      issue_severity_distribution: {
-        critical: number;
-        gas: number;
-        high: number;
-        informational: number;
-        low: number;
-        medium: number;
-      };
-      lines_analyzed_count: number;
-      scan_time_taken: number;
-      score: string;
-      score_v2: string;
-      threat_score: string;
-    };
-    scanner_reference_url: string;
-  };
+type SmartContractSecurityAudit = {
+  audit_company_name: string;
+  audit_publish_date: string;
+  audit_report_url: string;
+};
+
+export type SmartContractSecurityAudits = {
+  items: Array<SmartContractSecurityAudit>;
+};
+
+export type SmartContractSecurityAuditSubmission = {
+  address_hash: string;
+  submitter_name: string;
+  submitter_email: string;
+  is_project_owner: boolean;
+  project_name: string;
+  project_url: string;
+  audit_company_name: string;
+  audit_report_url: string;
+  audit_publish_date: string;
+  comment?: string;
+};
+
+// MUD SYSTEM
+
+export interface SmartContractMudSystemsResponse {
+  items: Array<SmartContractMudSystemItem>;
+}
+
+export interface SmartContractMudSystemItem {
+  address: string;
+  name: string;
+}
+
+export interface SmartContractMudSystemInfo {
+  name: string;
+  abi: Abi;
 }
diff --git a/types/api/contracts.ts b/types/api/contracts.ts
index e075f038f0..f124f72be1 100644
--- a/types/api/contracts.ts
+++ b/types/api/contracts.ts
@@ -1,15 +1,19 @@
 import type { AddressParam } from './addressParams';
+import type { SmartContractLicenseType } from './contract';
 
 export interface VerifiedContract {
   address: AddressParam;
+  certified?: boolean;
   coin_balance: string;
-  compiler_version: string;
-  language: 'vyper' | 'yul' | 'solidity';
+  compiler_version: string | null;
+  language: 'vyper' | 'yul' | 'solidity' | 'stylus_rust';
   has_constructor_args: boolean;
   optimization_enabled: boolean;
-  tx_count: number | null;
+  transaction_count: number | null;
   verified_at: string;
   market_cap: string | null;
+  license_type: SmartContractLicenseType | null;
+  zk_compiler_version?: string;
 }
 
 export interface VerifiedContractsResponse {
@@ -20,9 +24,11 @@ export interface VerifiedContractsResponse {
   } | null;
 }
 
+export type VerifiedContractsFilter = 'solidity' | 'vyper' | 'yul' | 'scilla';
+
 export interface VerifiedContractsFilters {
   q: string | undefined;
-  filter: 'vyper' | 'solidity' | 'yul' | undefined;
+  filter: VerifiedContractsFilter | undefined;
 }
 
 export type VerifiedContractsCounters = {
@@ -30,4 +36,4 @@ export type VerifiedContractsCounters = {
   new_verified_smart_contracts_24h: string;
   smart_contracts: string;
   verified_smart_contracts: string;
-}
+};
diff --git a/types/api/ens.ts b/types/api/ens.ts
index 6ee12f846b..16ac03ee31 100644
--- a/types/api/ens.ts
+++ b/types/api/ens.ts
@@ -1,71 +1,16 @@
-export interface EnsDomain {
-  id: string;
-  name: string;
-  resolved_address: {
-    hash: string;
-  } | null;
-  owner: {
-    hash: string;
-  } | null;
-  wrapped_owner: {
-    hash: string;
-  } | null;
-  registration_date?: string;
-  expiry_date: string | null;
-}
-
-export interface EnsDomainDetailed extends EnsDomain {
-  tokens: Array<{ id: string; contract_hash: string; type: 'NATIVE_DOMAIN_TOKEN' | 'WRAPPED_DOMAIN_TOKEN' }>;
-  registrant: {
-    hash: string;
-  } | null;
-  other_addresses: Record<string, string>;
-}
-
-export interface EnsDomainEvent {
-  transaction_hash: string;
-  timestamp: string;
-  from_address: {
-    hash: string;
-  } | null;
-  action?: string;
-}
-
-export interface EnsAddressLookupResponse {
-  items: Array<EnsDomain>;
-  next_page_params: {
-    page_token: string;
-    page_size: number;
-  } | null;
-}
-
-export interface EnsDomainEventsResponse {
-  items: Array<EnsDomainEvent>;
-}
-
-export interface EnsDomainLookupResponse {
-  items: Array<EnsDomain>;
-  next_page_params: {
-    page_token: string;
-    page_size: number;
-  } | null;
-}
+import type * as bens from '@blockscout/bens-types';
 
-export interface EnsAddressLookupFilters {
-  address: string | null;
-  resolved_to: boolean;
-  owned_by: boolean;
-  only_active: boolean;
+export interface EnsAddressLookupFilters extends Pick<bens.LookupAddressRequest, 'address' | 'resolved_to' | 'owned_by' | 'only_active'> {
+  protocols: Array<string> | undefined;
 }
 
-export interface EnsDomainLookupFilters {
-  name: string | null;
-  only_active: boolean;
+export interface EnsDomainLookupFilters extends Pick<bens.LookupDomainNameRequest, 'name' | 'only_active'> {
+  protocols: Array<string> | undefined;
 }
 
 export interface EnsLookupSorting {
   sort: 'registration_date';
-  order: 'ASC' | 'DESC';
+  order: Exclude<bens.Order, bens.Order.ORDER_UNSPECIFIED | bens.Order.UNRECOGNIZED>;
 }
 
 export type EnsDomainLookupFiltersOptions = Array<'resolved_to' | 'owned_by' | 'with_inactive'>;
diff --git a/types/api/indexingStatus.ts b/types/api/indexingStatus.ts
index 8d186785fc..b945ca44ba 100644
--- a/types/api/indexingStatus.ts
+++ b/types/api/indexingStatus.ts
@@ -3,4 +3,4 @@ export type IndexingStatus = {
   finished_indexing_blocks: boolean;
   indexed_blocks_ratio: string;
   indexed_internal_transactions_ratio: string;
-}
+};
diff --git a/types/api/internalTransaction.ts b/types/api/internalTransaction.ts
index 29b9d42d21..d953f2cd82 100644
--- a/types/api/internalTransaction.ts
+++ b/types/api/internalTransaction.ts
@@ -1,6 +1,6 @@
 import type { AddressParam } from './addressParams';
 
-export type TxInternalsType = 'call' | 'delegatecall' | 'staticcall' | 'create' | 'create2' | 'selfdestruct' | 'reward'
+export type TxInternalsType = 'call' | 'delegatecall' | 'staticcall' | 'create' | 'create2' | 'selfdestruct' | 'reward';
 
 export type InternalTransaction = (
   {
@@ -19,10 +19,10 @@ export type InternalTransaction = (
   from: AddressParam;
   value: string;
   index: number;
-  block: number;
+  block_number: number;
   timestamp: string;
   gas_limit: string;
-}
+};
 
 export interface InternalTransactionsResponse {
   items: Array<InternalTransaction>;
diff --git a/types/api/l2Deposits.ts b/types/api/l2Deposits.ts
deleted file mode 100644
index 1704414da5..0000000000
--- a/types/api/l2Deposits.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export type L2DepositsItem = {
-  l1_block_number: number;
-  l1_tx_hash: string;
-  l1_block_timestamp: string;
-  l1_tx_origin: string;
-  l2_tx_gas_limit: string;
-  l2_tx_hash: string;
-}
-
-export type L2DepositsResponse = {
-  items: Array<L2DepositsItem>;
-  next_page_params: {
-    items_count: number;
-    l1_block_number: number;
-    tx_hash: string;
-  };
-}
diff --git a/types/api/l2OutputRoots.ts b/types/api/l2OutputRoots.ts
deleted file mode 100644
index 8bcfe07d75..0000000000
--- a/types/api/l2OutputRoots.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export type L2OutputRootsItem = {
-  l1_block_number: number;
-  l1_timestamp: string;
-  l1_tx_hash: string;
-  l2_block_number: number;
-  l2_output_index: number;
-  output_root: string;
-}
-
-export type L2OutputRootsResponse = {
-  items: Array<L2OutputRootsItem>;
-  next_page_params: {
-    index: number;
-    items_count: number;
-  };
-}
diff --git a/types/api/l2TxnBatches.ts b/types/api/l2TxnBatches.ts
deleted file mode 100644
index 62f320e14e..0000000000
--- a/types/api/l2TxnBatches.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export type L2TxnBatchesItem = {
-  epoch_number: number;
-  l1_tx_hashes: Array<string>;
-  l1_timestamp: string;
-  l2_block_number: number;
-  tx_count: number;
-}
-
-export type L2TxnBatchesResponse = {
-  items: Array<L2TxnBatchesItem>;
-  next_page_params: {
-    block_number: number;
-    items_count: number;
-  };
-}
diff --git a/types/api/l2Withdrawals.ts b/types/api/l2Withdrawals.ts
deleted file mode 100644
index e9a9103e79..0000000000
--- a/types/api/l2Withdrawals.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { AddressParam } from './addressParams';
-
-export type L2WithdrawalsItem = {
-  'challenge_period_end': string | null;
-  'from': AddressParam | null;
-  'l1_tx_hash': string | null;
-  'l2_timestamp': string | null;
-  'l2_tx_hash': string;
-  'msg_nonce': number;
-  'msg_nonce_version': number;
-  'status': string;
-}
-
-export const WITHDRAWAL_STATUSES = [
-  'Waiting for state root',
-  'Ready to prove',
-  'In challenge period',
-  'Ready for relay',
-  'Relayed',
-] as const;
-
-export type L2WithdrawalStatus = typeof WITHDRAWAL_STATUSES[number];
-
-export type L2WithdrawalsResponse = {
-  items: Array<L2WithdrawalsItem>;
-  'next_page_params': {
-    'items_count': number;
-    'nonce': string;
-  };
-}
diff --git a/types/api/log.ts b/types/api/log.ts
index eff0c95fa5..dffac19c4d 100644
--- a/types/api/log.ts
+++ b/types/api/log.ts
@@ -7,7 +7,7 @@ export interface Log {
   data: string;
   index: number;
   decoded: DecodedInput | null;
-  tx_hash: string | null;
+  transaction_hash: string | null;
 }
 
 export interface LogsResponseTx {
diff --git a/types/api/mudWorlds.ts b/types/api/mudWorlds.ts
new file mode 100644
index 0000000000..1a86ee20a5
--- /dev/null
+++ b/types/api/mudWorlds.ts
@@ -0,0 +1,30 @@
+import type { AddressParam } from './addressParams';
+
+export type MudWorldsResponse = {
+  items: Array<MudWorldItem>;
+  next_page_params: {
+    items_count: number;
+    world: string;
+  };
+};
+
+export type MudWorldItem = {
+  address: AddressParam;
+  coin_balance: string;
+  transaction_count: number | null;
+};
+
+export type MudWorldSchema = {
+  key_names: Array<string>;
+  key_types: Array<string>;
+  value_names: Array<string>;
+  value_types: Array<string>;
+};
+
+export type MudWorldTable = {
+  table_full_name: string;
+  table_id: string;
+  table_name: string;
+  table_namespace: string;
+  table_type: string;
+};
diff --git a/types/api/noves.ts b/types/api/noves.ts
new file mode 100644
index 0000000000..edb6e42bdb
--- /dev/null
+++ b/types/api/noves.ts
@@ -0,0 +1,125 @@
+export interface NovesResponseData {
+  txTypeVersion: number;
+  chain: string;
+  accountAddress: string;
+  classificationData: NovesClassificationData;
+  rawTransactionData: NovesRawTransactionData;
+}
+
+export interface NovesClassificationData {
+  type: string;
+  typeFormatted?: string;
+  description: string;
+  sent: Array<NovesSentReceived>;
+  received: Array<NovesSentReceived>;
+  approved?: Approved;
+  protocol?: {
+    name: string | null;
+  };
+  source: {
+    type: string | null;
+  };
+  message?: string;
+  deployedContractAddress?: string;
+}
+
+export interface Approved {
+  amount: string;
+  spender: string;
+  token?: NovesToken;
+  nft?: NovesNft;
+}
+
+export interface NovesSentReceived {
+  action: string;
+  actionFormatted?: string;
+  amount: string;
+  to: NovesTo;
+  from: NovesFrom;
+  token?: NovesToken;
+  nft?: NovesNft;
+}
+
+export interface NovesToken {
+  symbol: string;
+  name: string;
+  decimals: number;
+  address: string;
+  id?: string;
+}
+
+export interface NovesNft {
+  name: string;
+  id: string;
+  symbol: string;
+  address: string;
+}
+
+export interface NovesFrom {
+  name: string | null;
+  address: string;
+}
+
+export interface NovesTo {
+  name: string | null;
+  address: string | null;
+}
+
+export interface NovesRawTransactionData {
+  transactionHash: string;
+  fromAddress: string;
+  toAddress: string;
+  blockNumber: number;
+  gas: number;
+  gasPrice: number;
+  transactionFee: NovesTransactionFee | number;
+  timestamp: number;
+}
+
+export interface NovesTransactionFee {
+  amount: string;
+  currency?: string;
+  token?: {
+    decimals: number;
+    symbol: string;
+  };
+}
+
+export interface NovesAccountHistoryResponse {
+  hasNextPage: boolean;
+  items: Array<NovesResponseData>;
+  pageNumber: number;
+  pageSize: number;
+  next_page_params?: {
+    startBlock: string;
+    endBlock: string;
+    pageNumber: number;
+    pageSize: number;
+    ignoreTransactions: string;
+    viewAsAccountAddress: string;
+  };
+}
+
+export const NovesHistoryFilterValues = [ 'received', 'sent' ] as const;
+
+export type NovesHistoryFilterValue = typeof NovesHistoryFilterValues[number] | undefined;
+
+export interface NovesHistoryFilters {
+  filter?: NovesHistoryFilterValue;
+}
+
+export interface NovesDescribeResponse {
+  type: string;
+  description: string;
+}
+
+export type NovesDescribeTxsResponse = {
+  txHash: string;
+  type: string;
+  description: string;
+};
+
+export interface NovesTxTranslation {
+  data?: NovesDescribeTxsResponse;
+  isLoading: boolean;
+}
diff --git a/types/api/optimisticL2.ts b/types/api/optimisticL2.ts
new file mode 100644
index 0000000000..2911b40f4d
--- /dev/null
+++ b/types/api/optimisticL2.ts
@@ -0,0 +1,161 @@
+import type { AddressParam } from './addressParams';
+import type { Block } from './block';
+import type { Transaction } from './transaction';
+
+export type OptimisticL2DepositsItem = {
+  l1_block_number: number;
+  l1_transaction_hash: string;
+  l1_block_timestamp: string;
+  l1_transaction_origin: string;
+  l2_transaction_gas_limit: string;
+  l2_transaction_hash: string;
+};
+
+export type OptimisticL2DepositsResponse = {
+  items: Array<OptimisticL2DepositsItem>;
+  next_page_params: {
+    items_count: number;
+    l1_block_number: number;
+    transaction_hash: string;
+  };
+};
+
+export type OptimisticL2OutputRootsItem = {
+  l1_block_number: number;
+  l1_timestamp: string;
+  l1_transaction_hash: string;
+  l2_block_number: number;
+  l2_output_index: number;
+  output_root: string;
+};
+
+export type OptimisticL2OutputRootsResponse = {
+  items: Array<OptimisticL2OutputRootsItem>;
+  next_page_params: {
+    index: number;
+    items_count: number;
+  };
+};
+
+export type OptimisticL2BatchDataContainer = 'in_blob4844' | 'in_celestia' | 'in_calldata';
+
+export type OptimisticL2TxnBatchesItem = {
+  internal_id: number;
+  batch_data_container?: OptimisticL2BatchDataContainer;
+  l1_timestamp: string;
+  l1_transaction_hashes: Array<string>;
+  l2_block_start: number;
+  l2_block_end: number;
+  transaction_count: number;
+};
+
+export type OptimisticL2TxnBatchesResponse = {
+  items: Array<OptimisticL2TxnBatchesItem>;
+  next_page_params: {
+    id: number;
+    items_count: number;
+  };
+};
+
+export interface OptimisticL2BlobTypeEip4844 {
+  hash: string;
+  l1_timestamp: string;
+  l1_transaction_hash: string;
+}
+
+export interface OptimisticL2BlobTypeCelestia {
+  commitment: string;
+  height: number;
+  l1_timestamp: string;
+  l1_transaction_hash: string;
+  namespace: string;
+}
+
+interface OptimismL2TxnBatchBase {
+  internal_id: number;
+  l1_timestamp: string;
+  l1_transaction_hashes: Array<string>;
+  l2_block_start: number;
+  l2_block_end: number;
+  transaction_count: number;
+}
+
+export interface OptimismL2TxnBatchTypeCallData extends OptimismL2TxnBatchBase {
+  batch_data_container: 'in_calldata';
+}
+
+export interface OptimismL2TxnBatchTypeEip4844 extends OptimismL2TxnBatchBase {
+  batch_data_container: 'in_blob4844';
+  blobs: Array<OptimisticL2BlobTypeEip4844> | null;
+}
+
+export interface OptimismL2TxnBatchTypeCelestia extends OptimismL2TxnBatchBase {
+  batch_data_container: 'in_celestia';
+  blobs: Array<OptimisticL2BlobTypeCelestia> | null;
+}
+
+export type OptimismL2TxnBatch = OptimismL2TxnBatchTypeCallData | OptimismL2TxnBatchTypeEip4844 | OptimismL2TxnBatchTypeCelestia;
+
+export type OptimismL2BatchTxs = {
+  items: Array<Transaction>;
+  next_page_params: {
+    block_number: number;
+    index: number;
+    items_count: number;
+  } | null;
+};
+
+export type OptimismL2BatchBlocks = {
+  items: Array<Block>;
+  next_page_params: {
+    batch_number: number;
+    items_count: number;
+  } | null;
+};
+
+export type OptimisticL2WithdrawalsItem = {
+  challenge_period_end: string | null;
+  from: AddressParam | null;
+  l1_transaction_hash: string | null;
+  l2_timestamp: string | null;
+  l2_transaction_hash: string;
+  msg_nonce: number;
+  msg_nonce_version: number;
+  status: string;
+};
+
+export type OptimisticL2WithdrawalStatus =
+  'Waiting for state root' |
+  'Ready to prove' |
+  'In challenge period' |
+  'Waiting a game to resolve' |
+  'Ready to prove' |
+  'Proven' |
+  'Ready for relay' |
+  'Relayed';
+
+export type OptimisticL2WithdrawalsResponse = {
+  items: Array<OptimisticL2WithdrawalsItem>;
+  next_page_params: {
+    items_count: number;
+    nonce: string;
+  };
+};
+
+export type OptimisticL2DisputeGamesResponse = {
+  items: Array<OptimisticL2DisputeGamesItem>;
+  next_page_params: {
+    items_count: number;
+    index: number;
+  };
+};
+
+export type OptimisticL2DisputeGamesItem = {
+  contract_address: string;
+  created_at: string;
+  game_type: number;
+  index: number;
+  l2_block_number: number;
+  resolved_at: string | null;
+  status: string;
+};
diff --git a/types/api/pools.tsx b/types/api/pools.tsx
new file mode 100644
index 0000000000..21560f6735
--- /dev/null
+++ b/types/api/pools.tsx
@@ -0,0 +1,27 @@
+export type PoolsResponse = {
+  items: Array<Pool>;
+  next_page_params: {
+    page_token: string;
+    page_size: number;
+  } | null;
+};
+
+export type Pool = {
+  contract_address: string;
+  chain_id: string;
+  base_token_address: string;
+  base_token_symbol: string;
+  base_token_icon_url: string | null;
+  quote_token_address: string;
+  quote_token_symbol: string;
+  quote_token_icon_url: string | null;
+  fully_diluted_valuation_usd: string;
+  market_cap_usd: string;
+  liquidity: string;
+  dex: {
+    id: string;
+    name: string;
+  };
+  fee?: string;
+  coin_gecko_terminal_url: string;
+};
diff --git a/types/api/rewards.ts b/types/api/rewards.ts
new file mode 100644
index 0000000000..b406f08c30
--- /dev/null
+++ b/types/api/rewards.ts
@@ -0,0 +1,59 @@
+export type RewardsConfigResponse = {
+  rewards: {
+    registration: string;
+    registration_with_referral: string;
+    daily_claim: string;
+    referral_share: string;
+  };
+};
+
+export type RewardsCheckRefCodeResponse = {
+  valid: boolean;
+};
+
+export type RewardsNonceResponse = {
+  nonce: string;
+};
+
+export type RewardsCheckUserResponse = {
+  exists: boolean;
+};
+
+export type RewardsLoginResponse = {
+  created: boolean;
+  token: string;
+};
+
+export type RewardsUserBalancesResponse = {
+  total: string;
+  staked: string;
+  unstaked: string;
+  total_staking_rewards: string;
+  total_referral_rewards: string;
+  pending_referral_rewards: string;
+};
+
+export type RewardsUserDailyCheckResponse = {
+  available: boolean;
+  daily_reward: string;
+  streak_reward: string;
+  pending_referral_rewards: string;
+  total_reward: string;
+  date: string;
+  reset_at: string;
+  streak: string;
+};
+
+export type RewardsUserDailyClaimResponse = {
+  daily_reward: string;
+  streak_reward: string;
+  pending_referral_rewards: string;
+  total_reward: string;
+  streak: string;
+};
+
+export type RewardsUserReferralsResponse = {
+  code: string;
+  link: string;
+  referrals: string;
+};
diff --git a/types/api/scrollL2.ts b/types/api/scrollL2.ts
new file mode 100644
index 0000000000..617b90235a
--- /dev/null
+++ b/types/api/scrollL2.ts
@@ -0,0 +1,78 @@
+import type { Block } from './block';
+import type { Transaction } from './transaction';
+
+export interface ScrollL2BatchesResponse {
+  items: Array<ScrollL2TxnBatch>;
+  next_page_params: {
+    items_count: number;
+    number: number;
+  };
+}
+
+type ScrollL2TxnBatchCommitmentTransaction = {
+  block_number: number;
+  hash: string;
+  timestamp: string;
+};
+
+type ScrollL2TxnBatchConfirmationTransaction = {
+  block_number: number | null;
+  hash: string | null;
+  timestamp: string | null;
+};
+
+export type ScrollL2TxnBatch = {
+  number: number;
+  commitment_transaction: ScrollL2TxnBatchCommitmentTransaction;
+  confirmation_transaction: ScrollL2TxnBatchConfirmationTransaction;
+  start_block: number;
+  end_block: number;
+  transaction_count: number;
+  data_availability: {
+    batch_data_container: 'in_blob4844' | 'in_calldata';
+  };
+};
+
+export type ScrollL2TxnBatchTxs = {
+  items: Array<Transaction>;
+  next_page_params: {
+    batch_number: number;
+    block_number: number;
+    index: number;
+    items_count: number;
+  } | null;
+};
+
+export type ScrollL2TxnBatchBlocks = {
+  items: Array<Block>;
+  next_page_params: {
+    batch_number: number;
+    block_number: number;
+    items_count: number;
+  } | null;
+};
+
+export type ScrollL2MessagesResponse = {
+  items: Array<ScrollL2MessageItem>;
+  next_page_params: {
+    id: number;
+    items_count: number;
+  } | null;
+};
+
+export type ScrollL2MessageItem = {
+  id: number;
+  origination_transaction_block_number: number;
+  origination_transaction_hash: string;
+  origination_timestamp: string;
+  completion_transaction_hash: string | null;
+  value: string;
+};
+
+export const SCROLL_L2_BLOCK_STATUSES = [
+  'Confirmed by Sequencer' as const,
+  'Committed' as const,
+  'Finalized' as const,
+];
+
+export type ScrollL2BlockStatus = typeof SCROLL_L2_BLOCK_STATUSES[number];
diff --git a/types/api/search.ts b/types/api/search.ts
index 49b1e87ec3..94b70c4f5a 100644
--- a/types/api/search.ts
+++ b/types/api/search.ts
@@ -15,6 +15,8 @@ export interface SearchResultToken {
   total_supply: string | null;
   is_verified_via_admin_panel: boolean;
   is_smart_contract_verified: boolean;
+  filecoin_robust_address?: string | null;
+  certified?: boolean;
 }
 
 export interface SearchResultAddressOrContract {
@@ -22,6 +24,8 @@ export interface SearchResultAddressOrContract {
   name: string | null;
   address: string;
   is_smart_contract_verified: boolean;
+  certified?: true;
+  filecoin_robust_address?: string | null;
   url?: string; // not used by the frontend, we build the url ourselves
   ens_info?: {
     address_hash: string;
@@ -31,9 +35,25 @@ export interface SearchResultAddressOrContract {
   };
 }
 
+export interface SearchResultDomain {
+  type: 'ens_domain';
+  name: string | null;
+  address: string;
+  filecoin_robust_address?: string | null;
+  is_smart_contract_verified: boolean;
+  url?: string; // not used by the frontend, we build the url ourselves
+  ens_info: {
+    address_hash: string;
+    expiry_date?: string;
+    name: string;
+    names_count: number;
+  };
+}
+
 export interface SearchResultLabel {
   type: 'label';
   address: string;
+  filecoin_robust_address?: string | null;
   name: string;
   is_smart_contract_verified: boolean;
   url?: string; // not used by the frontend, we build the url ourselves
@@ -50,11 +70,17 @@ export interface SearchResultBlock {
 
 export interface SearchResultTx {
   type: 'transaction';
-  tx_hash: string;
+  transaction_hash: string;
   timestamp: string;
   url?: string; // not used by the frontend, we build the url ourselves
 }
 
+export interface SearchResultBlob {
+  type: 'blob';
+  blob_hash: string;
+  timestamp: null;
+}
+
 export interface SearchResultUserOp {
   type: 'user_operation';
   user_operation_hash: string;
@@ -62,20 +88,21 @@ export interface SearchResultUserOp {
   url?: string; // not used by the frontend, we build the url ourselves
 }
 
-export type SearchResultItem = SearchResultToken | SearchResultAddressOrContract | SearchResultBlock | SearchResultTx | SearchResultLabel | SearchResultUserOp;
+export type SearchResultItem = SearchResultToken | SearchResultAddressOrContract | SearchResultBlock | SearchResultTx | SearchResultLabel | SearchResultUserOp |
+SearchResultBlob | SearchResultDomain;
 
 export interface SearchResult {
   items: Array<SearchResultItem>;
   next_page_params: {
-    'address_hash': string | null;
-    'block_hash': string | null;
-    'holder_count': number | null;
-    'inserted_at': string | null;
-    'item_type': SearchResultType;
-    'items_count': number;
-    'name': string;
-    'q': string;
-    'tx_hash': string | null;
+    address_hash: string | null;
+    block_hash: string | null;
+    holder_count: number | null;
+    inserted_at: string | null;
+    item_type: SearchResultType;
+    items_count: number;
+    name: string;
+    q: string;
+    transaction_hash: string | null;
   } | null;
 }
 
@@ -86,5 +113,5 @@ export interface SearchResultFilters {
 export interface SearchRedirectResult {
   parameter: string | null;
   redirect: boolean;
-  type: 'address' | 'block' | 'transaction' | 'user_operation' | null;
+  type: 'address' | 'block' | 'transaction' | 'user_operation' | 'blob' | null;
 }
diff --git a/types/api/shibarium.ts b/types/api/shibarium.ts
new file mode 100644
index 0000000000..d39ee9cf91
--- /dev/null
+++ b/types/api/shibarium.ts
@@ -0,0 +1,33 @@
+import type { AddressParam } from './addressParams';
+
+export type ShibariumDepositsItem = {
+  l1_block_number: number;
+  l1_transaction_hash: string;
+  l2_transaction_hash: string;
+  timestamp: string;
+  user: AddressParam | string;
+};
+
+export type ShibariumDepositsResponse = {
+  items: Array<ShibariumDepositsItem>;
+  next_page_params: {
+    items_count: number;
+    block_number: number;
+  };
+};
+
+export type ShibariumWithdrawalsItem = {
+  l1_transaction_hash: string;
+  l2_block_number: number;
+  l2_transaction_hash: string;
+  timestamp: string;
+  user: AddressParam | string;
+};
+
+export type ShibariumWithdrawalsResponse = {
+  items: Array<ShibariumWithdrawalsItem>;
+  next_page_params: {
+    items_count: number;
+    block_number: number;
+  };
+};
diff --git a/types/api/stats.ts b/types/api/stats.ts
index e4a32598ba..93239fe751 100644
--- a/types/api/stats.ts
+++ b/types/api/stats.ts
@@ -3,65 +3,38 @@ export type HomeStats = {
   total_addresses: string;
   total_transactions: string;
   average_block_time: number;
+  coin_image?: string | null;
   coin_price: string | null;
   coin_price_change_percentage: number | null; // e.g -6.22
   total_gas_used: string;
-  transactions_today: string;
+  transactions_today: string | null;
   gas_used_today: string;
   gas_prices: GasPrices | null;
   gas_price_updated_at: string | null;
   gas_prices_update_in: number;
   static_gas_price: string | null;
-  market_cap: string;
+  market_cap: string | null;
   network_utilization_percentage: number;
   tvl: string | null;
   rootstock_locked_btc?: string | null;
-}
+  last_output_root_size?: string | null;
+  secondary_coin_price?: string | null;
+  secondary_coin_image?: string | null;
+  celo?: {
+    epoch_number: number;
+  };
+};
 
 export type GasPrices = {
   average: GasPriceInfo | null;
   fast: GasPriceInfo | null;
   slow: GasPriceInfo | null;
-}
+};
 
 export interface GasPriceInfo {
   fiat_price: string | null;
   price: number | null;
   time: number | null;
-}
-
-export type Counters = {
-  counters: Array<Counter>;
-}
-
-export type Counter = {
-  id: string;
-  value: string;
-  title: string;
-  description?: string;
-  units: string;
-}
-
-export type StatsCharts = {
-  sections: Array<StatsChartsSection>;
-}
-
-export type StatsChartsSection = {
-  id: string;
-  title: string;
-  charts: Array<StatsChartInfo>;
-}
-
-export type StatsChartInfo = {
-  id: string;
-  title: string;
-  description: string;
-  units: string | null;
-}
-
-export type StatsChart = { chart: Array<StatsChartItem> };
-
-export type StatsChartItem = {
-  date: string;
-  value: string;
+  base_fee: number | null;
+  priority_fee: number | null;
 }
diff --git a/types/api/token.ts b/types/api/token.ts
index 417c74aab6..c223d70a03 100644
--- a/types/api/token.ts
+++ b/types/api/token.ts
@@ -1,7 +1,7 @@
 import type { TokenInfoApplication } from './account';
 import type { AddressParam } from './addressParams';
 
-export type NFTTokenType = 'ERC-721' | 'ERC-1155';
+export type NFTTokenType = 'ERC-721' | 'ERC-1155' | 'ERC-404';
 export type TokenType = 'ERC-20' | NFTTokenType;
 
 export interface TokenInfo<T extends TokenType = TokenType> {
@@ -20,6 +20,7 @@ export interface TokenInfo<T extends TokenType = TokenType> {
   bridge_type?: string | null;
   origin_chain_id?: string | null;
   foreign_address?: string | null;
+  filecoin_robust_address?: string | null;
 }
 
 export interface TokenCounters {
@@ -37,21 +38,20 @@ export type TokenHolder = TokenHolderERC20ERC721 | TokenHolderERC1155;
 export type TokenHolderBase = {
   address: AddressParam;
   value: string;
-}
+};
 
-export type TokenHolderERC20ERC721 = TokenHolderBase & {
-  token: TokenInfo<'ERC-20'> | TokenInfo<'ERC-721'>;
-}
+export type TokenHolderERC20ERC721 = TokenHolderBase;
 
 export type TokenHolderERC1155 = TokenHolderBase & {
-  token: TokenInfo<'ERC-1155'>;
   token_id: string;
-}
+};
 
 export type TokenHoldersPagination = {
   items_count: number;
   value: string;
-}
+};
+
+export type ThumbnailSize = '60x60' | '250x250' | '500x500' | 'original';
 
 export interface TokenInstance {
   is_unique: boolean;
@@ -62,6 +62,12 @@ export interface TokenInstance {
   external_app_url: string | null;
   metadata: Record<string, unknown> | null;
   owner: AddressParam | null;
+  thumbnails: Partial<Record<ThumbnailSize, string>> | null;
+}
+
+export interface TokenInstanceMetadataSocketMessage {
+  token_id: number;
+  fetched_metadata: TokenInstance['metadata'];
 }
 
 export interface TokenInstanceTransfersCount {
@@ -75,10 +81,10 @@ export interface TokenInventoryResponse {
 
 export type TokenInventoryPagination = {
   unique_token: number;
-}
+};
 
 export type TokenVerifiedInfo = Omit<TokenInfoApplication, 'id' | 'status'>;
 
 export type TokenInventoryFilters = {
   holder_address_hash?: string;
-}
+};
diff --git a/types/api/tokenTransfer.ts b/types/api/tokenTransfer.ts
index b1100db636..b34b78269a 100644
--- a/types/api/tokenTransfer.ts
+++ b/types/api/tokenTransfer.ts
@@ -4,41 +4,54 @@ import type { TokenInfo, TokenType } from './token';
 export type Erc20TotalPayload = {
   decimals: string | null;
   value: string;
-}
+};
 
 export type Erc721TotalPayload = {
-  token_id: string;
-}
+  token_id: string | null;
+};
 
 export type Erc1155TotalPayload = {
   decimals: string | null;
   value: string;
+  token_id: string | null;
+};
+
+export type Erc404TotalPayload = {
+  decimals: string;
+  value: string;
+  token_id: null;
+} | {
   token_id: string;
-}
+};
 
 export type TokenTransfer = (
   {
-    token: TokenInfo<'ERC-20'>;
-    total: Erc20TotalPayload;
+    token: TokenInfo<'ERC-20'> | null;
+    total: Erc20TotalPayload | null;
+  } |
+  {
+    token: TokenInfo<'ERC-721'> | null;
+    total: Erc721TotalPayload | null;
   } |
   {
-    token: TokenInfo<'ERC-721'>;
-    total: Erc721TotalPayload;
+    token: TokenInfo<'ERC-1155'> | null;
+    total: Erc1155TotalPayload | null;
   } |
   {
-    token: TokenInfo<'ERC-1155'>;
-    total: Erc1155TotalPayload;
+    token: TokenInfo<'ERC-404'> | null;
+    total: Erc404TotalPayload | null;
   }
-) & TokenTransferBase
+) & TokenTransferBase;
 
 export type TokenTotal = Erc20TotalPayload | Erc721TotalPayload | Erc1155TotalPayload;
 
 interface TokenTransferBase {
   type: 'token_transfer' | 'token_burning' | 'token_spawning' | 'token_minting';
-  tx_hash: string;
+  transaction_hash: string;
   from: AddressParam;
   to: AddressParam;
   timestamp: string;
+  block_number: string;
   block_hash: string;
   log_index: string;
   method?: string;
@@ -48,7 +61,7 @@ export type TokenTransferPagination = {
   block_number: number;
   index: number;
   items_count: number;
-}
+};
 
 export interface TokenTransferResponse {
   items: Array<TokenTransfer>;
diff --git a/types/api/tokens.ts b/types/api/tokens.ts
index adeca8d768..b7e2410fa2 100644
--- a/types/api/tokens.ts
+++ b/types/api/tokens.ts
@@ -8,8 +8,8 @@ export type TokensResponse = {
     items_count: number;
     name: string;
     market_cap: string | null;
-  };
-}
+  } | null;
+};
 
 export type TokensFilters = { q: string; type: Array<TokenType> | undefined };
 
diff --git a/types/api/transaction.ts b/types/api/transaction.ts
index a2b4a2a48f..43c19110a2 100644
--- a/types/api/transaction.ts
+++ b/types/api/transaction.ts
@@ -1,37 +1,27 @@
-import type { AddressParam } from "./addressParams";
-import type { BlockTransactionsResponse } from "./block";
-import type { DecodedInput } from "./decodedInput";
-import type { Fee } from "./fee";
-import type { L2WithdrawalStatus } from "./l2Withdrawals";
-import type { TokenInfo } from "./token";
-import type { TokenTransfer } from "./tokenTransfer";
-import type { TxAction } from "./txAction";
-
-export type TransactionRevertReason =
-  | {
-    raw: string;
-  }
-  | DecodedInput;
-
-type WrappedTransactionFields =
-  | "decoded_input"
-  | "fee"
-  | "gas_limit"
-  | "gas_price"
-  | "hash"
-  | "max_fee_per_gas"
-  | "max_priority_fee_per_gas"
-  | "method"
-  | "nonce"
-  | "raw_input"
-  | "to"
-  | "type"
-  | "value";
+import type { AddressParam } from './addressParams';
+import type { ArbitrumBatchStatus, ArbitrumL2TxData } from './arbitrumL2';
+import type { BlockTransactionsResponse } from './block';
+import type { DecodedInput } from './decodedInput';
+import type { Fee } from './fee';
+import type { NovesTxTranslation } from './noves';
+import type { OptimisticL2WithdrawalStatus } from './optimisticL2';
+import type { ScrollL2BlockStatus } from './scrollL2';
+import type { TokenInfo } from './token';
+import type { TokenTransfer } from './tokenTransfer';
+import type { TxAction } from './txAction';
+import type { ZkSyncBatchesItem } from './zkSyncL2';
+
+export type TransactionRevertReason = {
+  raw: string;
+} | DecodedInput;
+
+type WrappedTransactionFields = 'decoded_input' | 'fee' | 'gas_limit' | 'gas_price' | 'hash' | 'max_fee_per_gas' |
+'max_priority_fee_per_gas' | 'method' | 'nonce' | 'raw_input' | 'to' | 'type' | 'value';
 
 export interface OpWithdrawal {
   l1_transaction_hash: string;
   nonce: number;
-  status: L2WithdrawalStatus;
+  status: OptimisticL2WithdrawalStatus;
 }
 
 export type Transaction = {
@@ -40,8 +30,8 @@ export type Transaction = {
   hash: string;
   result: string;
   confirmations: number;
-  status: "ok" | "error" | null | undefined;
-  block: number | null;
+  status: 'ok' | 'error' | null | undefined;
+  block_number: number | null;
   timestamp: string | null;
   confirmation_duration: Array<number> | null;
   from: AddressParam;
@@ -65,14 +55,14 @@ export type Transaction = {
   token_transfers_overflow: boolean;
   exchange_rate: string | null;
   method: string | null;
-  tx_types: Array<TransactionType>;
-  tx_tag: string | null;
+  transaction_types: Array<TransactionType>;
+  transaction_tag: string | null;
   actions: Array<TxAction>;
   l1_fee?: string;
   l1_fee_scalar?: string;
   l1_gas_price?: string;
   l1_gas_used?: string;
-  has_error_in_internal_txs: boolean | null;
+  has_error_in_internal_transactions: boolean | null;
   // optimism fields
   op_withdrawals?: Array<OpWithdrawal>;
   // SUAVE fields
@@ -88,18 +78,63 @@ export type Transaction = {
     validator_address: AddressParam;
     validator_fee: string;
   };
+  // Celo fields
+  celo?: {
+    gas_token: TokenInfo<'ERC-20'> | null;
+  };
   // zkEvm fields
   zkevm_verify_hash?: string;
   zkevm_batch_number?: number;
-  zkevm_status?: (typeof ZKEVM_L2_TX_STATUSES)[number];
+  zkevm_status?: typeof ZKEVM_L2_TX_STATUSES[number];
   zkevm_sequence_hash?: string;
+  // zkSync FIELDS
+  zksync?: Omit<ZkSyncBatchesItem, 'number' | 'transaction_count' | 'timestamp'> & {
+    batch_number: number | null;
+  };
+  // Zilliqa fields
+  zilliqa?: {
+    is_scilla: boolean;
+  };
+  // blob tx fields
+  blob_versioned_hashes?: Array<string>;
+  blob_gas_used?: string;
+  blob_gas_price?: string;
+  burnt_blob_fee?: string;
+  max_fee_per_blob_gas?: string;
+  // Noves-fi
+  translation?: NovesTxTranslation;
+  arbitrum?: ArbitrumTransactionData;
+  scroll?: ScrollTransactionData;
 };
 
-export const ZKEVM_L2_TX_STATUSES = [ "Confirmed by Sequencer", "L1 Confirmed" ];
+type ArbitrumTransactionData = {
+  batch_number: number;
+  commitment_transaction: ArbitrumL2TxData;
+  confirmation_transaction: ArbitrumL2TxData;
+  contains_message: 'incoming' | 'outcoming' | null;
+  gas_used_for_l1: string;
+  gas_used_for_l2: string;
+  network_fee: string;
+  poster_fee: string;
+  status: ArbitrumBatchStatus;
+  message_related_info: {
+    associated_l1_transaction: string | null;
+    message_status: ArbitrumMessageStatus;
+  };
+};
+
+export type ArbitrumMessageStatus = 'Relayed' | 'Syncing with base layer' | 'Waiting for confirmation' | 'Ready for relay' | 'Settlement pending';
+
+export const ZKEVM_L2_TX_STATUSES = [ 'Confirmed by Sequencer', 'L1 Confirmed' ];
+
+export interface TransactionsStats {
+  pending_transactions_count: string;
+  transaction_fees_avg_24h: string;
+  transaction_fees_sum_24h: string;
+  transactions_count_24h: string;
+}
 
-export type TransactionsResponse =
-  | TransactionsResponseValidated
-  | TransactionsResponsePending;
+export type TransactionsResponse = TransactionsResponseValidated | TransactionsResponsePending;
 
 export interface TransactionsResponseValidated {
   items: Array<Transaction>;
@@ -107,7 +142,7 @@ export interface TransactionsResponseValidated {
     block_number: number;
     index: number;
     items_count: number;
-    filter: "validated";
+    filter: 'validated';
   } | null;
 }
 
@@ -116,7 +151,16 @@ export interface TransactionsResponsePending {
   next_page_params: {
     inserted_at: string;
     hash: string;
-    filter: "pending";
+    filter: 'pending';
+  } | null;
+}
+
+export interface TransactionsResponseWithBlobs {
+  items: Array<Transaction>;
+  next_page_params: {
+    block_number: number;
+    index: number;
+    items_count: number;
   } | null;
 }
 
@@ -129,51 +173,36 @@ export interface TransactionsResponseWatchlist {
   } | null;
 }
 
-export type TransactionType =
-  | "rootstock_remasc"
-  | "rootstock_bridge"
-  | "token_transfer"
-  | "contract_creation"
-  | "contract_call"
-  | "token_creation"
-  | "coin_transfer"
-  | "100"
-  | "101"
-  | "102"
-  | "103"
-  | "104"
-  | "105"
-  | "106"
-  | "107"
-  | "108"
-  | "109"
-  | "110"
-  | "110"
-  | "111"
-  | "112"
-  | "113"
-  | "114"
-  | "115"
-  | "116"
-  | "117"
-  | "118"
-  | "119"
-  | "120"
-  | "121"
-  | "122"
-  | "123";
-
-export type TxsResponse =
-  | TransactionsResponseValidated
-  | TransactionsResponsePending
-  | BlockTransactionsResponse;
+export type TransactionType = 'rootstock_remasc' |
+'rootstock_bridge' |
+'token_transfer' |
+'contract_creation' |
+'contract_call' |
+'token_creation' |
+'coin_transfer' |
+'blob_transaction';
+
+export type TxsResponse = TransactionsResponseValidated | TransactionsResponsePending | BlockTransactionsResponse;
 
 export interface TransactionsSorting {
-  sort: "value" | "fee";
-  order: "asc" | "desc";
+  sort: 'value' | 'fee' | 'block_number';
+  order: 'asc' | 'desc';
 }
 
-export type TransactionsSortingField = TransactionsSorting["sort"];
+export type TransactionsSortingField = TransactionsSorting['sort'];
 
-export type TransactionsSortingValue =
-  `${ TransactionsSortingField }-${ TransactionsSorting["order"] }`;
+export type TransactionsSortingValue = `${ TransactionsSortingField }-${ TransactionsSorting['order'] }`;
+
+export type ScrollTransactionData = {
+  l1_fee: string;
+  l2_fee: Fee;
+  l1_fee_commit_scalar: number;
+  l1_base_fee: number;
+  l1_blob_base_fee: number;
+  l1_fee_scalar: number;
+  l1_fee_overhead: number;
+  l1_fee_blob_scalar: number;
+  l1_gas_used: number;
+  l2_block_status: ScrollL2BlockStatus;
+  queue_index: number;
+};
diff --git a/types/api/txAction.ts b/types/api/txAction.ts
index e56c0ccf2a..2bf8ee7ba1 100644
--- a/types/api/txAction.ts
+++ b/types/api/txAction.ts
@@ -23,4 +23,4 @@ export interface TxActionNft {
 
 export type TxAction = {
   protocol: 'uniswap_v3';
-} & (TxActionGeneral | TxActionNft)
+} & (TxActionGeneral | TxActionNft);
diff --git a/types/api/txInterpretation.ts b/types/api/txInterpretation.ts
index be9393203f..062dc03cc0 100644
--- a/types/api/txInterpretation.ts
+++ b/types/api/txInterpretation.ts
@@ -10,38 +10,50 @@ export interface TxInterpretationResponse {
 export type TxInterpretationSummary = {
   summary_template: string;
   summary_template_variables: Record<string, TxInterpretationVariable>;
-}
+};
 
 export type TxInterpretationVariable =
   TxInterpretationVariableString |
   TxInterpretationVariableCurrency |
   TxInterpretationVariableTimestamp |
   TxInterpretationVariableToken |
-  TxInterpretationVariableAddress;
+  TxInterpretationVariableAddress |
+  TxInterpretationVariableDomain |
+  TxInterpretationVariableMethod;
 
-export type TxInterpretationVariableType = 'string' | 'currency' | 'timestamp' | 'token' | 'address';
+export type TxInterpretationVariableType = 'string' | 'currency' | 'timestamp' | 'token' | 'address' | 'domain' | 'method';
 
 export type TxInterpretationVariableString = {
   type: 'string';
   value: string;
-}
+};
 
 export type TxInterpretationVariableCurrency = {
   type: 'currency';
   value: string;
-}
+};
 
 export type TxInterpretationVariableTimestamp = {
   type: 'timestamp';
   value: string;
-}
+};
 
 export type TxInterpretationVariableToken = {
   type: 'token';
   value: TokenInfo;
-}
+};
 
 export type TxInterpretationVariableAddress = {
   type: 'address';
   value: AddressParam;
-}
+};
+
+export type TxInterpretationVariableDomain = {
+  type: 'domain';
+  value: string;
+};
+
+export type TxInterpretationVariableMethod = {
+  type: 'method';
+  value: string;
+};
diff --git a/types/api/txStateChanges.ts b/types/api/txStateChanges.ts
index 459f196aff..32066ee177 100644
--- a/types/api/txStateChanges.ts
+++ b/types/api/txStateChanges.ts
@@ -7,7 +7,7 @@ export type TxStateChange = (TxStateChangeCoin | TxStateChangeToken) & {
   is_miner: boolean;
   balance_before: string | null;
   balance_after: string | null;
-}
+};
 
 export interface TxStateChangeCoin {
   type: 'coin';
@@ -41,6 +41,13 @@ export interface TxStateChangeTokenErc1155 {
   token_id: string;
 }
 
+export interface TxStateChangeTokenErc404 {
+  type: 'token';
+  token: TokenInfo<'ERC-404'>;
+  change: string;
+  token_id: string;
+}
+
 export type TxStateChanges = {
   items: Array<TxStateChange>;
   next_page_params: {
diff --git a/types/api/txsFilters.ts b/types/api/txsFilters.ts
index e34cef83f8..4704d1f7e8 100644
--- a/types/api/txsFilters.ts
+++ b/types/api/txsFilters.ts
@@ -2,8 +2,12 @@ export type TTxsFilters = {
   filter: 'pending' | 'validated';
   type?: Array<TypeFilter>;
   method?: Array<MethodFilter>;
-}
+};
 
-export type TypeFilter = 'token_transfer' | 'contract_creation' | 'contract_call' | 'coin_transfer' | 'token_creation';
+export type TTxsWithBlobsFilters = {
+  type: 'blob_transaction';
+};
+
+export type TypeFilter = 'token_transfer' | 'contract_creation' | 'contract_call' | 'coin_transfer' | 'token_creation' | 'blob_transaction';
 
 export type MethodFilter = 'approve' | 'transfer' | 'multicall' | 'mint' | 'commit';
diff --git a/types/api/userOps.ts b/types/api/userOps.ts
index 86ea183a42..a5e7b67923 100644
--- a/types/api/userOps.ts
+++ b/types/api/userOps.ts
@@ -1,4 +1,5 @@
 import type { AddressParamBasic } from './addressParams';
+import type { DecodedInput } from './decodedInput';
 
 export type UserOpsItem = {
   hash: string;
@@ -8,7 +9,7 @@ export type UserOpsItem = {
   timestamp: string;
   status: boolean;
   fee: string;
-}
+};
 
 export type UserOpsResponse = {
   items: Array<UserOpsItem>;
@@ -16,7 +17,7 @@ export type UserOpsResponse = {
     page_token: string;
     page_size: number;
   } | null;
-}
+};
 
 export type UserOpSponsorType = 'paymaster_hybrid' | 'paymaster_sponsor' | 'wallet_balance' | 'wallet_deposit';
 
@@ -46,11 +47,16 @@ export type UserOp = {
   signature: string;
   nonce: string;
   call_data: string;
+  decoded_call_data: DecodedInput | null;
+  execute_call_data: string | null;
+  decoded_execute_call_data: DecodedInput | null;
   user_logs_start_index: number;
   user_logs_count: number;
   raw: {
+    account_gas_limits?: string;
     call_data: string;
     call_gas_limit: string;
+    gas_fees?: string;
     init_code: string;
     max_fee_per_gas: string;
     max_priority_fee_per_gas: string;
@@ -63,13 +69,13 @@ export type UserOp = {
   };
   gas_price: string;
   gas_used: string;
-}
+};
 
 export type UserOpsFilters = {
   transaction_hash?: string;
   sender?: string;
-}
+};
 
 export type UserOpsAccount = {
   total_ops: number;
-}
+};
diff --git a/types/api/validators.ts b/types/api/validators.ts
new file mode 100644
index 0000000000..4f54715175
--- /dev/null
+++ b/types/api/validators.ts
@@ -0,0 +1,67 @@
+import type { AddressParam } from './addressParams';
+
+export interface ValidatorStability {
+  address: AddressParam;
+  blocks_validated_count: number;
+  state: 'active' | 'probation' | 'inactive';
+}
+
+export interface ValidatorsStabilityResponse {
+  items: Array<ValidatorStability>;
+  next_page_params: {
+    address_hash: string;
+    blocks_validated: string;
+    items_count: string;
+    state: ValidatorStability['state'];
+  } | null;
+}
+
+export interface ValidatorsStabilityCountersResponse {
+  active_validators_counter: string;
+  active_validators_percentage: number;
+  new_validators_counter_24h: string;
+  validators_counter: string;
+}
+
+export interface ValidatorsStabilityFilters {
+  // address_hash: string | undefined; // right now API doesn't support filtering by address_hash
+  state_filter: ValidatorStability['state'] | undefined;
+}
+
+export interface ValidatorsStabilitySorting {
+  sort: 'state' | 'blocks_validated';
+  order: 'asc' | 'desc';
+}
+
+export type ValidatorsStabilitySortingField = ValidatorsStabilitySorting['sort'];
+
+export type ValidatorsStabilitySortingValue = `${ ValidatorsStabilitySortingField }-${ ValidatorsStabilitySorting['order'] }`;
+
+export interface ValidatorBlackfort {
+  address: AddressParam;
+  name: string;
+  commission: number;
+  delegated_amount: string;
+  self_bonded_amount: string;
+}
+
+export interface ValidatorsBlackfortResponse {
+  items: Array<ValidatorBlackfort>;
+  next_page_params: {
+    address_hash: string;
+  } | null;
+}
+
+export interface ValidatorsBlackfortCountersResponse {
+  new_validators_counter_24h: string;
+  validators_counter: string;
+}
+
+export interface ValidatorsBlackfortSorting {
+  sort: 'address_hash';
+  order: 'asc' | 'desc';
+}
+
+export type ValidatorsBlackfortSortingField = ValidatorsBlackfortSorting['sort'];
+
+export type ValidatorsBlackfortSortingValue = `${ ValidatorsBlackfortSortingField }-${ ValidatorsBlackfortSorting['order'] }`;
diff --git a/types/api/visualization.ts b/types/api/visualization.ts
deleted file mode 100644
index f80dc493b1..0000000000
--- a/types/api/visualization.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface VisualizedContract {
-  png: string | null;
-  svg: string | null;
-}
diff --git a/types/api/withdrawals.ts b/types/api/withdrawals.ts
index f9f280b442..e130b9cb86 100644
--- a/types/api/withdrawals.ts
+++ b/types/api/withdrawals.ts
@@ -6,7 +6,7 @@ export type WithdrawalsResponse = {
     index: number;
     items_count: number;
   };
-}
+};
 
 export type WithdrawalsItem = {
   amount: string;
@@ -15,9 +15,9 @@ export type WithdrawalsItem = {
   receiver: AddressParam;
   timestamp: string;
   validator_index: number;
-}
+};
 
 export type WithdrawalsCounters = {
   withdrawal_count: string;
   withdrawal_sum: string;
-}
+};
diff --git a/types/api/zkEvmL2.ts b/types/api/zkEvmL2.ts
new file mode 100644
index 0000000000..9544450c33
--- /dev/null
+++ b/types/api/zkEvmL2.ts
@@ -0,0 +1,76 @@
+import type { Transaction } from './transaction';
+
+export type ZkEvmL2DepositsItem = {
+  block_number: number;
+  index: number;
+  l1_transaction_hash: string;
+  l2_transaction_hash: string | null;
+  timestamp: string;
+  value: string;
+  symbol: string;
+};
+
+export type ZkEvmL2DepositsResponse = {
+  items: Array<ZkEvmL2DepositsItem>;
+  next_page_params: {
+    items_count: number;
+    index: number;
+  };
+};
+
+export type ZkEvmL2WithdrawalsItem = {
+  block_number: number;
+  index: number;
+  l1_transaction_hash: string | null;
+  l2_transaction_hash: string;
+  timestamp: string;
+  value: string;
+  symbol: string;
+};
+
+export type ZkEvmL2WithdrawalsResponse = {
+  items: Array<ZkEvmL2WithdrawalsItem>;
+  next_page_params: {
+    items_count: number;
+    index: number;
+  };
+};
+
+export type ZkEvmL2TxnBatchesItem = {
+  number: number;
+  verify_transaction_hash: string | null;
+  sequence_transaction_hash: string | null;
+  status: string;
+  timestamp: string | null;
+  transaction_count: number;
+};
+
+export type ZkEvmL2TxnBatchesResponse = {
+  items: Array<ZkEvmL2TxnBatchesItem>;
+  next_page_params: {
+    number: number;
+    items_count: number;
+  } | null;
+};
+
+export const ZKEVM_L2_TX_BATCH_STATUSES = [ 'Unfinalized', 'L1 Sequence Confirmed', 'Finalized' ];
+
+export type ZkEvmL2TxnBatch = {
+  acc_input_hash: string;
+  global_exit_root: string;
+  number: number;
+  sequence_transaction_hash: string;
+  state_root: string;
+  status: typeof ZKEVM_L2_TX_BATCH_STATUSES[number];
+  timestamp: string | null;
+  transactions: Array<string>;
+  verify_transaction_hash: string;
+};
+
+export type ZkEvmL2TxnBatchTxs = {
+  items: Array<Transaction>;
+  // API responce doesn't have next_page_params option, but we need to add it to the type for consistency
+  next_page_params: null;
+};
+
+export type NewZkEvmBatchSocketResponse = { batch: ZkEvmL2TxnBatchesItem };
diff --git a/types/api/zkEvmL2TxnBatches.ts b/types/api/zkEvmL2TxnBatches.ts
deleted file mode 100644
index 3a82b375ae..0000000000
--- a/types/api/zkEvmL2TxnBatches.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { Transaction } from './transaction';
-
-export type ZkEvmL2TxnBatchesItem = {
-  number: number;
-  verify_tx_hash: string | null;
-  sequence_tx_hash: string | null;
-  status: string;
-  timestamp: string;
-  tx_count: number;
-}
-
-export type ZkEvmL2TxnBatchesResponse = {
-  items: Array<ZkEvmL2TxnBatchesItem>;
-  next_page_params: {
-    number: number;
-    items_count: number;
-  } | null;
-}
-
-export const ZKEVM_L2_TX_BATCH_STATUSES = [ 'Unfinalized', 'L1 Sequence Confirmed', 'Finalized' ];
-
-export type ZkEvmL2TxnBatch = {
-  acc_input_hash: string;
-  global_exit_root: string;
-  number: number;
-  sequence_tx_hash: string;
-  state_root: string;
-  status: typeof ZKEVM_L2_TX_BATCH_STATUSES[number];
-  timestamp: string;
-  transactions: Array<string>;
-  verify_tx_hash: string;
-}
-
-export type ZkEvmL2TxnBatchTxs = {
-  items: Array<Transaction>;
-  // API responce doesn't have next_page_params option, but we need to add it to the type for consistency
-  next_page_params: null;
-}
-
-export type NewZkEvmBatchSocketResponse = { batch: ZkEvmL2TxnBatchesItem };
diff --git a/types/api/zkSyncL2.ts b/types/api/zkSyncL2.ts
new file mode 100644
index 0000000000..0211364579
--- /dev/null
+++ b/types/api/zkSyncL2.ts
@@ -0,0 +1,52 @@
+import type { Transaction } from './transaction';
+
+export const ZKSYNC_L2_TX_BATCH_STATUSES = [
+  'Processed on L2' as const,
+  'Sealed on L2' as const,
+  'Sent to L1' as const,
+  'Validated on L1' as const,
+  'Executed on L1' as const,
+];
+
+export type ZkSyncBatchStatus = typeof ZKSYNC_L2_TX_BATCH_STATUSES[number];
+
+export interface ZkSyncBatchesItem {
+  commit_transaction_hash: string | null;
+  commit_transaction_timestamp: string | null;
+  execute_transaction_hash: string | null;
+  execute_transaction_timestamp: string | null;
+  number: number;
+  prove_transaction_hash: string | null;
+  prove_transaction_timestamp: string | null;
+  status: ZkSyncBatchStatus;
+  timestamp: string;
+  transaction_count: number;
+}
+
+export type ZkSyncBatchesResponse = {
+  items: Array<ZkSyncBatchesItem>;
+  next_page_params: {
+    number: number;
+    items_count: number;
+  } | null;
+};
+
+export interface ZkSyncBatch extends Omit<ZkSyncBatchesItem, 'transaction_count'> {
+  start_block: number;
+  end_block: number;
+  l1_gas_price: string;
+  l1_transaction_count: number;
+  l2_fair_gas_price: string;
+  l2_transaction_count: number;
+  root_hash: string;
+}
+
+export type ZkSyncBatchTxs = {
+  items: Array<Transaction>;
+  next_page_params: {
+    batch_number: string;
+    block_number: number;
+    index: number;
+    items_count: number;
+  } | null;
+};
diff --git a/types/client/adButlerConfig.ts b/types/client/adButlerConfig.ts
index 39dcb385b7..b69f5a7b7e 100644
--- a/types/client/adButlerConfig.ts
+++ b/types/client/adButlerConfig.ts
@@ -2,4 +2,4 @@ export type AdButlerConfig = {
   id: string;
   width: string;
   height: string;
-}
+};
diff --git a/types/client/adProviders.ts b/types/client/adProviders.ts
index 0ae135eff9..df3962b9ec 100644
--- a/types/client/adProviders.ts
+++ b/types/client/adProviders.ts
@@ -1,7 +1,17 @@
 import type { ArrayElement } from 'types/utils';
 
-export const SUPPORTED_AD_BANNER_PROVIDERS = [ 'slise', 'adbutler', 'coinzilla', 'none' ] as const;
+export const SUPPORTED_AD_BANNER_PROVIDERS = [
+  'slise',
+  'adbutler',
+  'coinzilla',
+  'hype',
+  //   'getit', // temporary disabled
+  'none',
+] as const;
 export type AdBannerProviders = ArrayElement<typeof SUPPORTED_AD_BANNER_PROVIDERS>;
 
+export const SUPPORTED_AD_BANNER_ADDITIONAL_PROVIDERS = [ 'adbutler' ] as const;
+export type AdBannerAdditionalProviders = ArrayElement<typeof SUPPORTED_AD_BANNER_ADDITIONAL_PROVIDERS>;
+
 export const SUPPORTED_AD_TEXT_PROVIDERS = [ 'coinzilla', 'none' ] as const;
 export type AdTextProviders = ArrayElement<typeof SUPPORTED_AD_TEXT_PROVIDERS>;
diff --git a/types/client/address.ts b/types/client/address.ts
index 719aa339bf..e46be6c086 100644
--- a/types/client/address.ts
+++ b/types/client/address.ts
@@ -8,4 +8,12 @@ export type CsvExportParams = {
   type: 'logs';
   filterType?: 'topic';
   filterValue?: string;
-}
+} | {
+  type: 'holders';
+  filterType?: undefined;
+  filterValue?: undefined;
+} | {
+  type: 'epoch-rewards';
+  filterType?: undefined;
+  filterValue?: undefined;
+};
diff --git a/types/client/addressMetadata.ts b/types/client/addressMetadata.ts
new file mode 100644
index 0000000000..8281e1cf1b
--- /dev/null
+++ b/types/client/addressMetadata.ts
@@ -0,0 +1,10 @@
+import type { AddressMetadataTagApi } from 'types/api/addressMetadata';
+
+export interface AddressMetadataInfoFormatted {
+  addresses: Record<string, {
+    tags: Array<AddressMetadataTagFormatted>;
+    reputation: number | null;
+  }>;
+}
+
+export type AddressMetadataTagFormatted = AddressMetadataTagApi;
diff --git a/types/client/addressProfileAPIConfig.ts b/types/client/addressProfileAPIConfig.ts
new file mode 100644
index 0000000000..66078b3fcd
--- /dev/null
+++ b/types/client/addressProfileAPIConfig.ts
@@ -0,0 +1,7 @@
+export type AddressProfileAPIConfig = {
+  api_url_template: string;
+  tag_link_template?: string;
+  tag_icon?: string;
+  tag_bg_color?: string;
+  tag_text_color?: string;
+};
diff --git a/types/client/contract.ts b/types/client/contract.ts
index df049315a1..95aed6816a 100644
--- a/types/client/contract.ts
+++ b/types/client/contract.ts
@@ -1,5 +1,35 @@
+import type { SmartContractLicenseType, SmartContractVerificationConfigRaw, SmartContractVerificationMethodApi } from 'types/api/contract';
+import type { VerifiedContractsFilter } from 'types/api/contracts';
+
 export interface ContractCodeIde {
   title: string;
   url: string;
   icon_url: string;
 }
+
+export interface ContractLicense {
+  type: SmartContractLicenseType;
+  url: string;
+  label: string;
+  title: string;
+}
+
+export const SMART_CONTRACT_EXTRA_VERIFICATION_METHODS = [
+  'solidity-hardhat' as const,
+  'solidity-foundry' as const,
+];
+
+export type SmartContractVerificationMethodExtra = (typeof SMART_CONTRACT_EXTRA_VERIFICATION_METHODS)[number];
+
+export type SmartContractVerificationMethod = SmartContractVerificationMethodApi | SmartContractVerificationMethodExtra;
+
+export interface SmartContractVerificationConfig extends SmartContractVerificationConfigRaw {
+  verification_options: Array<SmartContractVerificationMethod>;
+}
+
+export const SMART_CONTRACT_LANGUAGE_FILTERS: Array<VerifiedContractsFilter> = [
+  'solidity',
+  'vyper',
+  'yul',
+  'scilla',
+];
diff --git a/types/client/deFiDropdown.ts b/types/client/deFiDropdown.ts
new file mode 100644
index 0000000000..2d087f5a1b
--- /dev/null
+++ b/types/client/deFiDropdown.ts
@@ -0,0 +1,9 @@
+import type { IconName } from 'ui/shared/IconSvg';
+
+export type DeFiDropdownItem = {
+  text: string;
+  icon: IconName;
+} & (
+  { dappId: string; url?: never } |
+  { url: string; dappId?: never }
+);
diff --git a/types/client/gasRefuelProviderConfig.ts b/types/client/gasRefuelProviderConfig.ts
new file mode 100644
index 0000000000..d135952480
--- /dev/null
+++ b/types/client/gasRefuelProviderConfig.ts
@@ -0,0 +1,6 @@
+export type GasRefuelProviderConfig = {
+  name: string;
+  dapp_id?: string;
+  url_template: string;
+  logo?: string;
+};
diff --git a/types/client/gasTracker.ts b/types/client/gasTracker.ts
new file mode 100644
index 0000000000..f998202e95
--- /dev/null
+++ b/types/client/gasTracker.ts
@@ -0,0 +1,6 @@
+export const GAS_UNITS = [
+  'usd',
+  'gwei',
+] as const;
+
+export type GasUnit = typeof GAS_UNITS[number];
diff --git a/types/client/marketplace.ts b/types/client/marketplace.ts
index eb132aac20..edbd0b4132 100644
--- a/types/client/marketplace.ts
+++ b/types/client/marketplace.ts
@@ -1,3 +1,5 @@
+import type { SolidityScanReport, SolidityScanReportSeverityDistribution } from 'lib/solidityScan/schema';
+
 export type MarketplaceAppPreview = {
   id: string;
   external?: boolean;
@@ -9,18 +11,62 @@ export type MarketplaceAppPreview = {
   url: string;
   internalWallet?: boolean;
   priority?: number;
-}
+};
+
+export type MarketplaceAppSocialInfo = {
+  twitter?: string;
+  telegram?: string;
+  github?: string | Array<string>;
+  discord?: string;
+};
 
-export type MarketplaceAppOverview = MarketplaceAppPreview & {
+export type MarketplaceAppOverview = MarketplaceAppPreview & MarketplaceAppSocialInfo & {
   author: string;
   description: string;
   site?: string;
-  twitter?: string;
-  telegram?: string;
-  github?: string;
-}
+};
+
+export type AppRating = {
+  recordId: string;
+  value: number | undefined;
+  count?: number;
+};
+
+export type MarketplaceAppWithSecurityReport = MarketplaceAppOverview & {
+  securityReport?: MarketplaceAppSecurityReport;
+  rating?: AppRating;
+};
 
 export enum MarketplaceCategory {
   ALL = 'All',
   FAVORITES = 'Favorites',
 }
+
+export enum ContractListTypes {
+  ANALYZED = 'Analyzed',
+  ALL = 'All',
+  VERIFIED = 'Verified',
+}
+
+export type MarketplaceAppSecurityReport = {
+  overallInfo: {
+    verifiedNumber: number;
+    totalContractsNumber: number;
+    solidityScanContractsNumber: number;
+    securityScore: number;
+    totalIssues?: number;
+    issueSeverityDistribution: SolidityScanReportSeverityDistribution;
+  };
+  contractsData: Array<{
+    address: string;
+    isVerified: boolean;
+    solidityScanReport?: SolidityScanReport['scan_report'] | null;
+  }>;
+};
+
+export type MarketplaceAppSecurityReportRaw = {
+  appName: string;
+  chainsData: {
+    [chainId: string]: MarketplaceAppSecurityReport;
+  };
+};
diff --git a/types/client/multichainProviderConfig.ts b/types/client/multichainProviderConfig.ts
new file mode 100644
index 0000000000..8d4a695c69
--- /dev/null
+++ b/types/client/multichainProviderConfig.ts
@@ -0,0 +1,13 @@
+export type MultichainProviderConfig = {
+  name: string;
+  dapp_id?: string;
+  url_template: string;
+  logo: string;
+};
+
+export type MultichainProviderConfigParsed = {
+  name: string;
+  logoUrl: string;
+  urlTemplate: string;
+  dappId?: string;
+};
diff --git a/types/client/navigation-items.ts b/types/client/navigation-items.ts
deleted file mode 100644
index 862b1cec84..0000000000
--- a/types/client/navigation-items.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import type React from 'react';
-
-import type { Route } from 'nextjs-routes';
-
-import type { IconName } from 'ui/shared/IconSvg';
-
-type NavIconOrComponent = {
-  icon?: IconName;
-} | {
-  iconComponent?: React.FC<{size?: number}>;
-};
-
-type NavItemCommon = {
-  text: string;
-} & NavIconOrComponent;
-
-export type NavItemInternal = NavItemCommon & {
-  nextRoute: Route;
-  isActive?: boolean;
-}
-
-export type NavItemExternal = {
-  text: string;
-  url: string;
-}
-
-export type NavItem = NavItemInternal | NavItemExternal
-
-export type NavGroupItem = NavItemCommon & {
-  isActive?: boolean;
-  subItems: Array<NavItem> | Array<Array<NavItem>>;
-}
-
-import type { ArrayElement } from '../utils';
-
-export const NAVIGATION_LINK_IDS = [ 'rpc_api', 'eth_rpc_api' ] as const;
-export type NavigationLinkId = ArrayElement<typeof NAVIGATION_LINK_IDS>;
diff --git a/types/client/navigation.ts b/types/client/navigation.ts
new file mode 100644
index 0000000000..5085615267
--- /dev/null
+++ b/types/client/navigation.ts
@@ -0,0 +1,39 @@
+import type React from 'react';
+
+import type { Route } from 'nextjs-routes';
+
+import type { IconName } from 'ui/shared/IconSvg';
+
+type NavIconOrComponent = {
+  icon?: IconName;
+} | {
+  iconComponent?: React.FC<{ size?: number; className?: string }>;
+};
+
+type NavItemCommon = {
+  text: string;
+} & NavIconOrComponent;
+
+export type NavItemInternal = NavItemCommon & {
+  nextRoute: Route;
+  isActive?: boolean;
+};
+
+export type NavItemExternal = {
+  text: string;
+  url: string;
+};
+
+export type NavItem = NavItemInternal | NavItemExternal;
+
+export type NavGroupItem = NavItemCommon & {
+  isActive?: boolean;
+  subItems: Array<NavItem> | Array<Array<NavItem>>;
+};
+
+import type { ArrayElement } from '../utils';
+
+export const NAVIGATION_LINK_IDS = [ 'rpc_api', 'eth_rpc_api' ] as const;
+export type NavigationLinkId = ArrayElement<typeof NAVIGATION_LINK_IDS>;
+
+export type NavigationLayout = 'vertical' | 'horizontal';
diff --git a/types/client/rollup.ts b/types/client/rollup.ts
new file mode 100644
index 0000000000..9e20b89a1a
--- /dev/null
+++ b/types/client/rollup.ts
@@ -0,0 +1,12 @@
+import type { ArrayElement } from 'types/utils';
+
+export const ROLLUP_TYPES = [
+  'optimistic',
+  'arbitrum',
+  'shibarium',
+  'zkEvm',
+  'zkSync',
+  'scroll',
+] as const;
+
+export type RollupType = ArrayElement<typeof ROLLUP_TYPES>;
diff --git a/types/client/search.ts b/types/client/search.ts
new file mode 100644
index 0000000000..ca02af1e3e
--- /dev/null
+++ b/types/client/search.ts
@@ -0,0 +1,14 @@
+import type * as api from 'types/api/search';
+
+export interface SearchResultFutureBlock {
+  type: 'block';
+  block_type: 'block';
+  block_number: number | string;
+  block_hash: string;
+  timestamp: undefined;
+  url?: string; // not used by the frontend, we build the url ourselves
+}
+
+export type SearchResultBlock = api.SearchResultBlock | SearchResultFutureBlock;
+
+export type SearchResultItem = api.SearchResultItem | SearchResultBlock;
diff --git a/types/client/stats.ts b/types/client/stats.ts
index fb7ee36e99..1e4219bba6 100644
--- a/types/client/stats.ts
+++ b/types/client/stats.ts
@@ -1,9 +1,9 @@
-export type StatsInterval = { id: StatsIntervalIds; title: string }
+export type StatsInterval = { id: StatsIntervalIds; title: string };
 export type StatsIntervalIds = keyof typeof StatsIntervalId;
 export enum StatsIntervalId {
-  'all',
-  'oneMonth',
-  'threeMonths',
-  'sixMonths',
-  'oneYear',
+  all,
+  oneMonth,
+  threeMonths,
+  sixMonths,
+  oneYear,
 }
diff --git a/types/client/txInterpretation.ts b/types/client/txInterpretation.ts
index e264b267bc..23f55ed217 100644
--- a/types/client/txInterpretation.ts
+++ b/types/client/txInterpretation.ts
@@ -2,6 +2,7 @@ import type { ArrayElement } from 'types/utils';
 
 export const PROVIDERS = [
   'blockscout',
+  'noves',
   'none',
 ] as const;
 
diff --git a/types/client/validators.ts b/types/client/validators.ts
new file mode 100644
index 0000000000..3b806c4366
--- /dev/null
+++ b/types/client/validators.ts
@@ -0,0 +1,8 @@
+import type { ArrayElement } from 'types/utils';
+
+export const VALIDATORS_CHAIN_TYPE = [
+  'stability',
+  'blackfort',
+] as const;
+
+export type ValidatorsChainType = ArrayElement<typeof VALIDATORS_CHAIN_TYPE>;
diff --git a/types/footerLinks.ts b/types/footerLinks.ts
index 7a86b91f1b..78dccf2af4 100644
--- a/types/footerLinks.ts
+++ b/types/footerLinks.ts
@@ -1,9 +1,9 @@
 export type CustomLink = {
   text: string;
   url: string;
-}
+};
 
 export type CustomLinksGroup = {
   title: string;
   links: Array<CustomLink>;
-}
+};
diff --git a/types/homepage.ts b/types/homepage.ts
index b773176288..d8d06647c9 100644
--- a/types/homepage.ts
+++ b/types/homepage.ts
@@ -1 +1,31 @@
-export type ChainIndicatorId = 'daily_txs' | 'coin_price' | 'market_cap' | 'tvl';
+export const CHAIN_INDICATOR_IDS = [ 'daily_txs', 'coin_price', 'secondary_coin_price', 'market_cap', 'tvl' ] as const;
+export type ChainIndicatorId = typeof CHAIN_INDICATOR_IDS[number];
+
+export const HOME_STATS_WIDGET_IDS = [
+  'latest_batch',
+  'total_blocks',
+  'average_block_time',
+  'total_txs',
+  'latest_l1_state_batch',
+  'wallet_addresses',
+  'gas_tracker',
+  'btc_locked',
+  'current_epoch',
+] as const;
+export type HomeStatsWidgetId = typeof HOME_STATS_WIDGET_IDS[number];
+
+export interface HeroBannerButtonState {
+  background?: Array<string | undefined>;
+  text_color?: Array<string | undefined>;
+}
+
+export interface HeroBannerConfig {
+  background?: Array<string | undefined>;
+  text_color?: Array<string | undefined>;
+  border?: Array<string | undefined>;
+  button?: {
+    _default?: HeroBannerButtonState;
+    _hover?: HeroBannerButtonState;
+    _selected?: HeroBannerButtonState;
+  };
+}
diff --git a/types/networks.ts b/types/networks.ts
index dbc505d51a..fb729eb891 100644
--- a/types/networks.ts
+++ b/types/networks.ts
@@ -13,6 +13,7 @@ export interface FeaturedNetwork {
 }
 
 export interface NetworkExplorer {
+  logo?: string;
   title: string;
   baseUrl: string;
   paths: {
@@ -23,4 +24,6 @@ export interface NetworkExplorer {
   };
 }
 
-export type NetworkVerificationType = 'mining' | 'validation';
+export type NetworkVerificationTypeEnvs = 'mining' | 'validation';
+export type NetworkVerificationTypeComputed = 'posting' | 'sequencing';
+export type NetworkVerificationType = NetworkVerificationTypeEnvs | NetworkVerificationTypeComputed;
diff --git a/types/settings.ts b/types/settings.ts
new file mode 100644
index 0000000000..992205c4de
--- /dev/null
+++ b/types/settings.ts
@@ -0,0 +1,2 @@
+export const COLOR_THEME_IDS = [ 'light', 'dim', 'midnight', 'dark' ] as const;
+export type ColorThemeId = typeof COLOR_THEME_IDS[number];
diff --git a/types/ui.ts b/types/ui.ts
new file mode 100644
index 0000000000..119920c0f3
--- /dev/null
+++ b/types/ui.ts
@@ -0,0 +1,4 @@
+export interface FontFamily {
+  name: string;
+  url: string;
+}
diff --git a/types/utils.ts b/types/utils.ts
index 6a41f16f0c..568b7bfa44 100644
--- a/types/utils.ts
+++ b/types/utils.ts
@@ -7,3 +7,16 @@ export type ExcludeNull<T> = T extends null ? never : T;
 export type ExcludeUndefined<T> = T extends undefined ? never : T;
 
 export type KeysOfObjectOrNull<T> = keyof ExcludeNull<T>;
+
+/** Combines members of an intersection into a readable type. */
+// https://twitter.com/mattpocockuk/status/1622730173446557697?s=20&t=NdpAcmEFXY01xkqU3KO0Mg
+export type Evaluate<Type> = { [key in keyof Type]: Type[key] } & unknown;
+
+// Keeps in the object type only those properties that have the provided type (e.g only numbers)
+export type PickByType<T, X> = Record<
+  { [K in keyof T]: T[K] extends X ? K : never }[keyof T],
+  X
+>;
+
+// Make some properties of an object optional
+export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
diff --git a/types/views/address.ts b/types/views/address.ts
index 271e661e02..5dc5b7904b 100644
--- a/types/views/address.ts
+++ b/types/views/address.ts
@@ -5,6 +5,7 @@ export const IDENTICON_TYPES = [
   'jazzicon',
   'gradient_avatar',
   'blockie',
+  'nouns',
 ] as const;
 
 export type IdenticonType = ArrayElement<typeof IDENTICON_TYPES>;
@@ -14,3 +15,6 @@ export const ADDRESS_VIEWS_IDS = [
 ] as const;
 
 export type AddressViewId = ArrayElement<typeof ADDRESS_VIEWS_IDS>;
+
+export const ADDRESS_FORMATS = [ 'base16', 'bech32' ] as const;
+export type AddressFormat = typeof ADDRESS_FORMATS[ number ];
diff --git a/types/views/block.ts b/types/views/block.ts
index e924d6189b..c0324e508a 100644
--- a/types/views/block.ts
+++ b/types/views/block.ts
@@ -1,10 +1,13 @@
 import type { ArrayElement } from 'types/utils';
 
 export const BLOCK_FIELDS_IDS = [
+  'base_fee',
   'burnt_fees',
   'total_reward',
   'nonce',
   'miner',
+  'L1_status',
+  'batch',
 ] as const;
 
 export type BlockFieldId = ArrayElement<typeof BLOCK_FIELDS_IDS>;
diff --git a/types/views/tx.ts b/types/views/tx.ts
index 21800d80e0..d3a30adcc5 100644
--- a/types/views/tx.ts
+++ b/types/views/tx.ts
@@ -7,6 +7,8 @@ export const TX_FIELDS_IDS = [
   'tx_fee',
   'gas_fees',
   'burnt_fees',
+  'L1_status',
+  'batch',
 ] as const;
 
 export type TxFieldsId = ArrayElement<typeof TX_FIELDS_IDS>;
diff --git a/types/web3.ts b/types/web3.ts
new file mode 100644
index 0000000000..8c85e601d0
--- /dev/null
+++ b/types/web3.ts
@@ -0,0 +1,65 @@
+// copied from node_modules/@wagmi/core/src/connectors/injected.ts
+import type { EIP1193Provider } from 'viem';
+
+import type { Evaluate } from './utils';
+
+type WalletProviderFlags =
+  | 'isApexWallet'
+  | 'isAvalanche'
+  | 'isBackpack'
+  | 'isBifrost'
+  | 'isBitKeep'
+  | 'isBitski'
+  | 'isBlockWallet'
+  | 'isBraveWallet'
+  | 'isCoinbaseWallet'
+  | 'isDawn'
+  | 'isEnkrypt'
+  | 'isExodus'
+  | 'isFrame'
+  | 'isFrontier'
+  | 'isGamestop'
+  | 'isHyperPay'
+  | 'isImToken'
+  | 'isKuCoinWallet'
+  | 'isMathWallet'
+  | 'isMetaMask'
+  | 'isOkxWallet'
+  | 'isOKExWallet'
+  | 'isOneInchAndroidWallet'
+  | 'isOneInchIOSWallet'
+  | 'isOpera'
+  | 'isPhantom'
+  | 'isPortal'
+  | 'isRabby'
+  | 'isRainbow'
+  | 'isStatus'
+  | 'isTally'
+  | 'isTokenPocket'
+  | 'isTokenary'
+  | 'isTrust'
+  | 'isTrustWallet'
+  | 'isXDEFI'
+  | 'isZerion';
+
+export type WalletProvider = Evaluate<
+EIP1193Provider & {
+  [key in WalletProviderFlags]?: true | undefined
+} & {
+  providers?: Array<WalletProvider> | undefined;
+
+  /** Only exists in MetaMask as of 2022/04/03 */
+  _events?: { connect?: (() => void) | undefined } | undefined;
+
+  /** Only exists in MetaMask as of 2022/04/03 */
+  _state?:
+  | {
+    accounts?: Array<string>;
+    initialized?: boolean;
+    isConnected?: boolean;
+    isPermanentlyDisconnected?: boolean;
+    isUnlocked?: boolean;
+  }
+  | undefined;
+}
+>;
diff --git a/ui/address/AddressAccountHistory.tsx b/ui/address/AddressAccountHistory.tsx
new file mode 100644
index 0000000000..cd9d495b6a
--- /dev/null
+++ b/ui/address/AddressAccountHistory.tsx
@@ -0,0 +1,134 @@
+import { Box, Hide, Show, Table,
+  Tbody, Th, Tr } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { NovesHistoryFilterValue } from 'types/api/noves';
+import { NovesHistoryFilterValues } from 'types/api/noves';
+
+import getFilterValueFromQuery from 'lib/getFilterValueFromQuery';
+import useIsMounted from 'lib/hooks/useIsMounted';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { NOVES_TRANSLATE } from 'stubs/noves/NovesTranslate';
+import { generateListStub } from 'stubs/utils';
+import AddressAccountHistoryTableItem from 'ui/address/accountHistory/AddressAccountHistoryTableItem';
+import ActionBar from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import { getFromToValue } from 'ui/shared/Noves/utils';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import TheadSticky from 'ui/shared/TheadSticky';
+
+import AddressAccountHistoryListItem from './accountHistory/AddressAccountHistoryListItem';
+import AccountHistoryFilter from './AddressAccountHistoryFilter';
+
+const getFilterValue = (getFilterValueFromQuery<NovesHistoryFilterValue>).bind(null, NovesHistoryFilterValues);
+
+type Props = {
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
+};
+
+const AddressAccountHistory = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
+  const router = useRouter();
+  const isMounted = useIsMounted();
+
+  const currentAddress = getQueryParamString(router.query.hash).toLowerCase();
+
+  const [ filterValue, setFilterValue ] = React.useState<NovesHistoryFilterValue>(getFilterValue(router.query.filter));
+
+  const { data, isError, pagination, isPlaceholderData } = useQueryWithPages({
+    resourceName: 'noves_address_history',
+    pathParams: { address: currentAddress },
+    scrollRef,
+    options: {
+      enabled: isQueryEnabled,
+      placeholderData: generateListStub<'noves_address_history'>(NOVES_TRANSLATE, 10, { hasNextPage: false, pageNumber: 1, pageSize: 10 }),
+    },
+  });
+
+  const handleFilterChange = React.useCallback((val: string | Array<string>) => {
+
+    const newVal = getFilterValue(val);
+    setFilterValue(newVal);
+  }, [ ]);
+
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
+  const actionBar = (
+    <ActionBar mt={ -6 } pb={{ base: 6, md: 5 }}>
+      <AccountHistoryFilter
+        defaultFilter={ filterValue }
+        onFilterChange={ handleFilterChange }
+        hasActiveFilter={ Boolean(filterValue) }
+        isLoading={ pagination.isLoading }
+      />
+
+      <Pagination ml={{ base: 'auto', lg: 8 }} { ...pagination }/>
+    </ActionBar>
+  );
+
+  const filteredData = isPlaceholderData ? data?.items : data?.items.filter(i => filterValue ? getFromToValue(i, currentAddress) === filterValue : i);
+
+  const content = (
+    <Box position="relative">
+      <Hide above="lg" ssr={ false }>
+        { filteredData?.map((item, i) => (
+          <AddressAccountHistoryListItem
+            key={ `${ i }-${ item.rawTransactionData.transactionHash }` }
+            tx={ item }
+            currentAddress={ currentAddress }
+            isPlaceholderData={ isPlaceholderData }
+          />
+        )) }
+      </Hide>
+
+      <Show above="lg" ssr={ false }>
+        <Table>
+          <TheadSticky top={ 75 }>
+            <Tr>
+              <Th width="120px">
+                Age
+              </Th>
+              <Th>
+                Action
+              </Th>
+              <Th width="320px">
+                From/To
+              </Th>
+            </Tr>
+          </TheadSticky>
+          <Tbody maxWidth="full">
+            { filteredData?.map((item, i) => (
+              <AddressAccountHistoryTableItem
+                key={ `${ i }-${ item.rawTransactionData.transactionHash }` }
+                tx={ item }
+                currentAddress={ currentAddress }
+                isPlaceholderData={ isPlaceholderData }
+              />
+            )) }
+          </Tbody>
+        </Table>
+      </Show>
+    </Box>
+  );
+
+  return (
+    <DataListDisplay
+      isError={ isError }
+      items={ filteredData }
+      emptyText="There are no transactions."
+      content={ content }
+      actionBar={ actionBar }
+      filterProps={{
+        hasActiveFilters: Boolean(filterValue),
+        emptyFilteredText: 'No match found for current filter',
+      }}
+    />
+  );
+};
+
+export default AddressAccountHistory;
diff --git a/ui/address/AddressAccountHistoryFilter.tsx b/ui/address/AddressAccountHistoryFilter.tsx
new file mode 100644
index 0000000000..b321051b27
--- /dev/null
+++ b/ui/address/AddressAccountHistoryFilter.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+import type { NovesHistoryFilterValue } from 'types/api/noves';
+
+import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
+import PopoverFilterRadio from 'ui/shared/filters/PopoverFilterRadio';
+
+const OPTIONS = [
+  { value: 'all', label: 'All' },
+  { value: 'received', label: 'Received from' },
+  { value: 'sent', label: 'Sent to' },
+];
+
+interface Props {
+  hasActiveFilter: boolean;
+  defaultFilter: NovesHistoryFilterValue;
+  onFilterChange: (nextValue: string | Array<string>) => void;
+  isLoading?: boolean;
+}
+
+const AccountHistoryFilter = ({ onFilterChange, defaultFilter, hasActiveFilter, isLoading }: Props) => {
+  const isInitialLoading = useIsInitialLoading(isLoading);
+
+  return (
+    <PopoverFilterRadio
+      name="account_history_filter"
+      options={ OPTIONS }
+      onChange={ onFilterChange }
+      hasActiveFilter={ hasActiveFilter }
+      isLoading={ isInitialLoading }
+      defaultValue={ defaultFilter || OPTIONS[0].value }
+    />
+  );
+};
+
+export default React.memo(AccountHistoryFilter);
diff --git a/ui/address/AddressBlocksValidated.tsx b/ui/address/AddressBlocksValidated.tsx
index b72ef4776e..114d47c57b 100644
--- a/ui/address/AddressBlocksValidated.tsx
+++ b/ui/address/AddressBlocksValidated.tsx
@@ -8,29 +8,37 @@ import type { AddressBlocksValidatedResponse } from 'types/api/address';
 
 import config from 'configs/app';
 import { getResourceKey } from 'lib/api/useApiQuery';
+import useIsMounted from 'lib/hooks/useIsMounted';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import { currencyUnits } from 'lib/units';
 import { BLOCK } from 'stubs/block';
 import { generateListStub } from 'stubs/utils';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
-import SocketAlert from 'ui/shared/SocketAlert';
+import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
 import AddressBlocksValidatedListItem from './blocksValidated/AddressBlocksValidatedListItem';
 import AddressBlocksValidatedTableItem from './blocksValidated/AddressBlocksValidatedTableItem';
 
+const OVERLOAD_COUNT = 75;
+
 interface Props {
   scrollRef?: React.RefObject<HTMLDivElement>;
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
 }
 
-const AddressBlocksValidated = ({ scrollRef }: Props) => {
-  const [ socketAlert, setSocketAlert ] = React.useState(false);
+const AddressBlocksValidated = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
+  const [ socketAlert, setSocketAlert ] = React.useState('');
+  const [ newItemsCount, setNewItemsCount ] = React.useState(0);
+
   const queryClient = useQueryClient();
   const router = useRouter();
+  const isMounted = useIsMounted();
 
   const addressHash = String(router.query.hash);
   const query = useQueryWithPages({
@@ -38,6 +46,7 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
     pathParams: { hash: addressHash },
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_blocks_validated'>(
         BLOCK,
         50,
@@ -52,11 +61,11 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
   });
 
   const handleSocketError = React.useCallback(() => {
-    setSocketAlert(true);
+    setSocketAlert('An error has occurred while fetching new blocks. Please refresh the page to load new blocks.');
   }, []);
 
   const handleNewSocketMessage: SocketMessage.NewBlock['handler'] = React.useCallback((payload) => {
-    setSocketAlert(false);
+    setSocketAlert('');
 
     queryClient.setQueryData(
       getResourceKey('address_blocks_validated', { pathParams: { hash: addressHash } }),
@@ -65,6 +74,11 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
           return;
         }
 
+        if (prevData.items.length >= OVERLOAD_COUNT) {
+          setNewItemsCount(prev => prev + 1);
+          return prevData;
+        }
+
         return {
           ...prevData,
           items: [ payload.block, ...prevData.items ],
@@ -84,22 +98,32 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
     handler: handleNewSocketMessage,
   });
 
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
   const content = query.data?.items ? (
     <>
-      { socketAlert && <SocketAlert mb={ 6 }/> }
       <Hide below="lg" ssr={ false }>
-        <Table variant="simple" size="sm">
-          <Thead top={ query.pagination.isVisible ? 80 : 0 }>
+        <Table style={{ tableLayout: 'auto' }}>
+          <Thead top={ query.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }>
             <Tr>
-              <Th width="17%">Block</Th>
-              <Th width="17%">Age</Th>
-              <Th width="16%">Txn</Th>
-              <Th width="25%">Gas used</Th>
-              { !config.UI.views.block.hiddenFields?.total_reward &&
-              <Th width="25%" isNumeric>Reward { currencyUnits.ether }</Th> }
+              <Th>Block</Th>
+              <Th>Age</Th>
+              <Th>Txn</Th>
+              <Th>Gas used</Th>
+              { !config.UI.views.block.hiddenFields?.total_reward && !config.features.rollup.isEnabled &&
+              <Th isNumeric>Reward { currencyUnits.ether }</Th> }
             </Tr>
           </Thead>
           <Tbody>
+            <SocketNewItemsNotice.Desktop
+              url={ window.location.href }
+              num={ newItemsCount }
+              alert={ socketAlert }
+              type="block"
+              isLoading={ query.isPlaceholderData }
+            />
             { query.data.items.map((item, index) => (
               <AddressBlocksValidatedTableItem
                 key={ item.height + (query.isPlaceholderData ? String(index) : '') }
@@ -112,6 +136,15 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
         </Table>
       </Hide>
       <Show below="lg" ssr={ false }>
+        { query.pagination.page === 1 && (
+          <SocketNewItemsNotice.Mobile
+            url={ window.location.href }
+            num={ newItemsCount }
+            alert={ socketAlert }
+            type="block"
+            isLoading={ query.isPlaceholderData }
+          />
+        ) }
         { query.data.items.map((item, index) => (
           <AddressBlocksValidatedListItem
             key={ item.height + (query.isPlaceholderData ? String(index) : '') }
diff --git a/ui/address/AddressCoinBalance.pw.tsx b/ui/address/AddressCoinBalance.pw.tsx
index 95bcf16aa8..97a3789975 100644
--- a/ui/address/AddressCoinBalance.pw.tsx
+++ b/ui/address/AddressCoinBalance.pw.tsx
@@ -1,41 +1,41 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as balanceHistoryMock from 'mocks/address/coinBalanceHistory';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect, devices } from 'playwright/lib';
 
 import AddressCoinBalance from './AddressCoinBalance';
 
-const addressHash = 'hash';
-const BALANCE_HISTORY_API_URL = buildApiUrl('address_coin_balance', { hash: addressHash });
-const BALANCE_HISTORY_CHART_API_URL = buildApiUrl('address_coin_balance_chart', { hash: addressHash });
+const addressHash = '0x1234';
 const hooksConfig = {
   router: {
     query: { hash: addressHash },
   },
 };
 
-test('base view +@dark-mode +@mobile', async({ mount, page }) => {
-  await page.route(BALANCE_HISTORY_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(balanceHistoryMock.baseResponse),
-  }));
-  await page.route(BALANCE_HISTORY_CHART_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(balanceHistoryMock.chartResponse),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <AddressCoinBalance/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('base view +@dark-mode', async({ render, page, mockApiResponse }) => {
+  await mockApiResponse('address_coin_balance', balanceHistoryMock.baseResponse, { pathParams: { hash: addressHash } });
+  await mockApiResponse('address_coin_balance_chart', balanceHistoryMock.chartResponse, { pathParams: { hash: addressHash } });
+  const component = await render(<AddressCoinBalance/>, { hooksConfig });
   await page.waitForFunction(() => {
     return document.querySelector('path[data-name="chart-Balances-small"]')?.getAttribute('opacity') === '1';
   });
+  await page.mouse.move(100, 100);
   await page.mouse.move(240, 100);
-
   await expect(component).toHaveScreenshot();
 });
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('base view', async({ render, page, mockApiResponse }) => {
+    await mockApiResponse('address_coin_balance', balanceHistoryMock.baseResponse, { pathParams: { hash: addressHash } });
+    await mockApiResponse('address_coin_balance_chart', balanceHistoryMock.chartResponse, { pathParams: { hash: addressHash } });
+    const component = await render(<AddressCoinBalance/>, { hooksConfig });
+    await page.waitForFunction(() => {
+      return document.querySelector('path[data-name="chart-Balances-small"]')?.getAttribute('opacity') === '1';
+    });
+    await page.mouse.move(100, 100);
+    await page.mouse.move(240, 100);
+    await expect(component).toHaveScreenshot();
+  });
+});
diff --git a/ui/address/AddressCoinBalance.tsx b/ui/address/AddressCoinBalance.tsx
index 1f109cf366..184f86cbb4 100644
--- a/ui/address/AddressCoinBalance.tsx
+++ b/ui/address/AddressCoinBalance.tsx
@@ -6,6 +6,7 @@ import type { SocketMessage } from 'lib/socket/types';
 import type { AddressCoinBalanceHistoryResponse } from 'types/api/address';
 
 import { getResourceKey } from 'lib/api/useApiQuery';
+import useIsMounted from 'lib/hooks/useIsMounted';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
@@ -17,10 +18,17 @@ import SocketAlert from 'ui/shared/SocketAlert';
 import AddressCoinBalanceChart from './coinBalance/AddressCoinBalanceChart';
 import AddressCoinBalanceHistory from './coinBalance/AddressCoinBalanceHistory';
 
-const AddressCoinBalance = () => {
+type Props = {
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
+};
+
+const AddressCoinBalance = ({ shouldRender = true, isQueryEnabled = true }: Props) => {
   const [ socketAlert, setSocketAlert ] = React.useState(false);
   const queryClient = useQueryClient();
   const router = useRouter();
+  const isMounted = useIsMounted();
+
   const scrollRef = React.useRef<HTMLDivElement>(null);
 
   const addressHash = getQueryParamString(router.query.hash);
@@ -29,6 +37,7 @@ const AddressCoinBalance = () => {
     pathParams: { hash: addressHash },
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_coin_balance'>(
         ADDRESS_COIN_BALANCE,
         50,
@@ -78,6 +87,10 @@ const AddressCoinBalance = () => {
     handler: handleNewSocketMessage,
   });
 
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
   return (
     <>
       { socketAlert && <SocketAlert mb={ 6 }/> }
diff --git a/ui/address/AddressContract.pw.tsx b/ui/address/AddressContract.pw.tsx
new file mode 100644
index 0000000000..0229581a08
--- /dev/null
+++ b/ui/address/AddressContract.pw.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+
+import * as addressMock from 'mocks/address/address';
+import * as contractInfoMock from 'mocks/contract/info';
+import * as contractMethodsMock from 'mocks/contract/methods';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import * as socketServer from 'playwright/fixtures/socketServer';
+import { test, expect } from 'playwright/lib';
+
+import AddressContract from './AddressContract.pwstory';
+
+const hash = addressMock.contract.hash;
+
+test.beforeEach(async({ mockApiResponse }) => {
+  await mockApiResponse('address', addressMock.contract, { pathParams: { hash } });
+  await mockApiResponse(
+    'contract',
+    { ...contractInfoMock.verified, abi: [ ...contractMethodsMock.read, ...contractMethodsMock.write ] },
+    { pathParams: { hash } },
+  );
+});
+
+test.describe('ABI functionality', () => {
+  test('read', async({ render, createSocket }) => {
+    const hooksConfig = {
+      router: {
+        query: { hash, tab: 'read_contract' },
+      },
+    };
+    const component = await render(<AddressContract/>, { hooksConfig }, { withSocket: true });
+    const socket = await createSocket();
+    await socketServer.joinChannel(socket, 'addresses:' + addressMock.contract.hash.toLowerCase());
+
+    await expect(component.getByRole('button', { name: 'Connect wallet' })).toBeVisible();
+    await component.getByText('FLASHLOAN_PREMIUM_TOTAL').click();
+    await expect(component.getByRole('button', { name: 'Read' })).toBeVisible();
+  });
+
+  test('read, no wallet client', async({ render, createSocket, mockEnvs }) => {
+    const hooksConfig = {
+      router: {
+        query: { hash, tab: 'read_contract' },
+      },
+    };
+    await mockEnvs(ENVS_MAP.noWalletClient);
+    const component = await render(<AddressContract/>, { hooksConfig }, { withSocket: true });
+    const socket = await createSocket();
+    await socketServer.joinChannel(socket, 'addresses:' + addressMock.contract.hash.toLowerCase());
+
+    await expect(component.getByRole('button', { name: 'Connect wallet' })).toBeHidden();
+    await component.getByText('FLASHLOAN_PREMIUM_TOTAL').click();
+    await expect(component.getByRole('button', { name: 'Read' })).toBeVisible();
+  });
+
+  test('write', async({ render, createSocket }) => {
+    const hooksConfig = {
+      router: {
+        query: { hash, tab: 'write_contract' },
+      },
+    };
+    const component = await render(<AddressContract/>, { hooksConfig }, { withSocket: true });
+    const socket = await createSocket();
+    await socketServer.joinChannel(socket, 'addresses:' + addressMock.contract.hash.toLowerCase());
+
+    await expect(component.getByRole('button', { name: 'Connect wallet' })).toBeVisible();
+    await component.getByText('setReserveInterestRateStrategyAddress').click();
+    await expect(component.getByLabel('9.').getByRole('button', { name: 'Simulate' })).toBeEnabled();
+    await expect(component.getByLabel('9.').getByRole('button', { name: 'Write' })).toBeEnabled();
+
+    await component.getByText('pause').click();
+    await expect(component.getByLabel('5.').getByRole('button', { name: 'Simulate' })).toBeHidden();
+    await expect(component.getByLabel('5.').getByRole('button', { name: 'Write' })).toBeEnabled();
+  });
+
+  test('write, no wallet client', async({ render, createSocket, mockEnvs }) => {
+    const hooksConfig = {
+      router: {
+        query: { hash, tab: 'write_contract' },
+      },
+    };
+    await mockEnvs(ENVS_MAP.noWalletClient);
+
+    const component = await render(<AddressContract/>, { hooksConfig }, { withSocket: true });
+    const socket = await createSocket();
+    await socketServer.joinChannel(socket, 'addresses:' + addressMock.contract.hash.toLowerCase());
+
+    await expect(component.getByRole('button', { name: 'Connect wallet' })).toBeHidden();
+    await component.getByText('setReserveInterestRateStrategyAddress').click();
+    await expect(component.getByLabel('9.').getByRole('button', { name: 'Simulate' })).toBeEnabled();
+    await expect(component.getByLabel('9.').getByRole('button', { name: 'Write' })).toBeDisabled();
+
+    await component.getByText('pause').click();
+    await expect(component.getByLabel('5.').getByRole('button', { name: 'Simulate' })).toBeHidden();
+    await expect(component.getByLabel('5.').getByRole('button', { name: 'Write' })).toBeDisabled();
+  });
+});
diff --git a/ui/address/AddressContract.pwstory.tsx b/ui/address/AddressContract.pwstory.tsx
new file mode 100644
index 0000000000..b088e93fbc
--- /dev/null
+++ b/ui/address/AddressContract.pwstory.tsx
@@ -0,0 +1,18 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import useContractTabs from 'ui/address/contract/useContractTabs';
+
+import AddressContract from './AddressContract';
+
+const AddressContractPwStory = () => {
+  const router = useRouter();
+  const hash = getQueryParamString(router.query.hash);
+  const addressQuery = useApiQuery('address', { pathParams: { hash } });
+  const { tabs } = useContractTabs(addressQuery.data, false);
+  return <AddressContract tabs={ tabs } shouldRender={ true } isLoading={ false }/>;
+};
+
+export default AddressContractPwStory;
diff --git a/ui/address/AddressContract.tsx b/ui/address/AddressContract.tsx
index a2dd58db5f..a349532a7a 100644
--- a/ui/address/AddressContract.tsx
+++ b/ui/address/AddressContract.tsx
@@ -3,29 +3,24 @@ import React from 'react';
 import type { RoutedSubTab } from 'ui/shared/Tabs/types';
 
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
-import Web3ModalProvider from 'ui/shared/Web3ModalProvider';
 
 interface Props {
   tabs: Array<RoutedSubTab>;
-  addressHash?: string;
+  isLoading: boolean;
+  shouldRender?: boolean;
 }
 
 const TAB_LIST_PROPS = {
   columnGap: 3,
 };
 
-const AddressContract = ({ tabs }: Props) => {
-  const fallback = React.useCallback(() => {
-    const noProviderTabs = tabs.filter(({ id }) => id === 'contact_code' || id.startsWith('read_'));
-    return (
-      <RoutedTabs tabs={ noProviderTabs } variant="outline" colorScheme="gray" size="sm" tabListProps={ TAB_LIST_PROPS }/>
-    );
-  }, [ tabs ]);
+const AddressContract = ({ tabs, isLoading, shouldRender }: Props) => {
+  if (!shouldRender) {
+    return null;
+  }
 
   return (
-    <Web3ModalProvider fallback={ fallback }>
-      <RoutedTabs tabs={ tabs } variant="outline" colorScheme="gray" size="sm" tabListProps={ TAB_LIST_PROPS }/>
-    </Web3ModalProvider>
+    <RoutedTabs tabs={ tabs } variant="outline" colorScheme="gray" size="sm" tabListProps={ TAB_LIST_PROPS } isLoading={ isLoading }/>
   );
 };
 
diff --git a/ui/address/AddressCsvExportLink.tsx b/ui/address/AddressCsvExportLink.tsx
index 6ef1d2dd0a..313de665c8 100644
--- a/ui/address/AddressCsvExportLink.tsx
+++ b/ui/address/AddressCsvExportLink.tsx
@@ -9,7 +9,7 @@ import config from 'configs/app';
 import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 
 interface Props {
   address: string;
diff --git a/ui/address/AddressDetails.pw.tsx b/ui/address/AddressDetails.pw.tsx
index 2b7d3ce97e..9c7a14917d 100644
--- a/ui/address/AddressDetails.pw.tsx
+++ b/ui/address/AddressDetails.pw.tsx
@@ -1,118 +1,117 @@
-import { test, expect } from '@playwright/experimental-ct-react';
-import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
-import type { WindowProvider } from 'wagmi';
 
-import type { Address } from 'types/api/address';
-
-import type { ResourceError } from 'lib/api/resources';
 import * as addressMock from 'mocks/address/address';
 import * as countersMock from 'mocks/address/counters';
 import * as tokensMock from 'mocks/address/tokens';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { test, expect, devices } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import AddressDetails from './AddressDetails';
 import MockAddressPage from './testUtils/MockAddressPage';
+import type { AddressQuery } from './utils/useAddressQuery';
 
 const ADDRESS_HASH = addressMock.hash;
-const API_URL_ADDRESS = buildApiUrl('address', { hash: ADDRESS_HASH });
-const API_URL_COUNTERS = buildApiUrl('address_counters', { hash: ADDRESS_HASH });
-const API_URL_TOKENS_ERC20 = buildApiUrl('address_tokens', { hash: ADDRESS_HASH }) + '?type=ERC-20';
-const API_URL_TOKENS_ERC721 = buildApiUrl('address_tokens', { hash: ADDRESS_HASH }) + '?type=ERC-721';
-const API_URL_TOKENS_ER1155 = buildApiUrl('address_tokens', { hash: ADDRESS_HASH }) + '?type=ERC-1155';
 const hooksConfig = {
   router: {
     query: { hash: ADDRESS_HASH },
   },
 };
 
-test('contract +@mobile', async({ mount, page }) => {
-  await page.route(API_URL_ADDRESS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(addressMock.contract),
-  }));
-  await page.route(API_URL_COUNTERS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(countersMock.forContract),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <AddressDetails addressQuery={{ data: addressMock.contract } as UseQueryResult<Address, ResourceError>}/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+  test('contract', async({ render, mockApiResponse, page }) => {
+    await mockApiResponse('address', addressMock.contract, { pathParams: { hash: ADDRESS_HASH } });
+    await mockApiResponse('address_counters', countersMock.forContract, { pathParams: { hash: ADDRESS_HASH } });
+
+    const component = await render(<AddressDetails addressQuery={{ data: addressMock.contract } as AddressQuery}/>, { hooksConfig });
+
+    await expect(component).toHaveScreenshot({
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
+    });
+  });
+
+  test('validator', async({ render, page, mockApiResponse }) => {
+    await mockApiResponse('address', addressMock.validator, { pathParams: { hash: ADDRESS_HASH } });
+    await mockApiResponse('address_counters', countersMock.forValidator, { pathParams: { hash: ADDRESS_HASH } });
+
+    const component = await render(<AddressDetails addressQuery={{ data: addressMock.validator } as AddressQuery}/>, { hooksConfig });
+
+    await expect(component).toHaveScreenshot({
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
+    });
+  });
+
+  test('filecoin', async({ render, mockApiResponse, page }) => {
+    await mockApiResponse('address', addressMock.filecoin, { pathParams: { hash: ADDRESS_HASH } });
+    await mockApiResponse('address_counters', countersMock.forValidator, { pathParams: { hash: ADDRESS_HASH } });
+
+    const component = await render(<AddressDetails addressQuery={{ data: addressMock.filecoin } as AddressQuery}/>, { hooksConfig });
+
+    await expect(component).toHaveScreenshot({
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
+    });
   });
 });
 
-test('token', async({ mount, page }) => {
-  await page.route(API_URL_ADDRESS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(addressMock.token),
-  }));
-  await page.route(API_URL_COUNTERS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(countersMock.forToken),
-  }));
-  await page.route(API_URL_TOKENS_ERC20, async(route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(tokensMock.erc20List),
-  }), { times: 1 });
-  await page.route(API_URL_TOKENS_ERC721, async(route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(tokensMock.erc721List),
-  }), { times: 1 });
-  await page.route(API_URL_TOKENS_ER1155, async(route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(tokensMock.erc1155List),
-  }), { times: 1 });
-
-  await page.evaluate(() => {
-    window.ethereum = {
-      providers: [ { isMetaMask: true, _events: {} } ],
-    }as WindowProvider;
+test('contract', async({ render, page, mockApiResponse }) => {
+  await mockApiResponse('address', addressMock.contract, { pathParams: { hash: ADDRESS_HASH } });
+  await mockApiResponse('address_counters', countersMock.forContract, { pathParams: { hash: ADDRESS_HASH } });
+
+  const component = await render(<AddressDetails addressQuery={{ data: addressMock.contract } as AddressQuery}/>, { hooksConfig });
+
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
+});
 
-  const component = await mount(
-    <TestApp>
-      <MockAddressPage>
-        <AddressDetails addressQuery={{ data: addressMock.token } as UseQueryResult<Address, ResourceError>}/>
-      </MockAddressPage>
-    </TestApp>,
+// there's an unexpected timeout occurred in this test
+test.fixme('token', async({ render, mockApiResponse, injectMetaMaskProvider, page }) => {
+  await mockApiResponse('address', addressMock.token, { pathParams: { hash: ADDRESS_HASH } });
+  await mockApiResponse('address_counters', countersMock.forToken, { pathParams: { hash: ADDRESS_HASH } });
+  await mockApiResponse('address_tokens', tokensMock.erc20List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-20' }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc721List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-721' }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc1155List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-1155' }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc404List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' }, times: 1 });
+  await injectMetaMaskProvider();
+
+  const component = await render(
+    <MockAddressPage>
+      <AddressDetails addressQuery={{ data: addressMock.token } as AddressQuery}/>
+    </MockAddressPage>,
     { hooksConfig },
   );
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-test('validator +@mobile', async({ mount, page }) => {
-  await page.route(API_URL_ADDRESS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(addressMock.validator),
-  }));
-  await page.route(API_URL_COUNTERS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(countersMock.forValidator),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <AddressDetails addressQuery={{ data: addressMock.validator } as UseQueryResult<Address, ResourceError>}/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('validator', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse('address', addressMock.validator, { pathParams: { hash: ADDRESS_HASH } });
+  await mockApiResponse('address_counters', countersMock.forValidator, { pathParams: { hash: ADDRESS_HASH } });
+
+  const component = await render(<AddressDetails addressQuery={{ data: addressMock.validator } as AddressQuery}/>, { hooksConfig });
+
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
+});
+
+test('filecoin', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse('address', addressMock.filecoin, { pathParams: { hash: ADDRESS_HASH } });
+  await mockApiResponse('address_counters', countersMock.forValidator, { pathParams: { hash: ADDRESS_HASH } });
+
+  const component = await render(<AddressDetails addressQuery={{ data: addressMock.filecoin } as AddressQuery}/>, { hooksConfig });
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
diff --git a/ui/address/AddressDetails.tsx b/ui/address/AddressDetails.tsx
index 96a20b9057..f17c0072e6 100644
--- a/ui/address/AddressDetails.tsx
+++ b/ui/address/AddressDetails.tsx
@@ -1,29 +1,36 @@
 import { Box, Text, Grid } from '@chakra-ui/react';
-import type { UseQueryResult } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { Address as TAddress } from 'types/api/address';
-
-import type { ResourceError } from 'lib/api/resources';
-import useApiQuery from 'lib/api/useApiQuery';
+import config from 'configs/app';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import getNetworkValidationActionText from 'lib/networks/getNetworkValidationActionText';
+import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import getQueryParamString from 'lib/router/getQueryParamString';
-import { ADDRESS_COUNTERS } from 'stubs/address';
 import AddressCounterItem from 'ui/address/details/AddressCounterItem';
+import ServiceDegradationWarning from 'ui/shared/alerts/ServiceDegradationWarning';
+import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 
+import AddressAlternativeFormat from './details/AddressAlternativeFormat';
 import AddressBalance from './details/AddressBalance';
+import AddressImplementations from './details/AddressImplementations';
 import AddressNameInfo from './details/AddressNameInfo';
+import AddressNetWorth from './details/AddressNetWorth';
+import AddressSaveOnGas from './details/AddressSaveOnGas';
+import FilecoinActorTag from './filecoin/FilecoinActorTag';
 import TokenSelect from './tokenSelect/TokenSelect';
+import useAddressCountersQuery from './utils/useAddressCountersQuery';
+import type { AddressQuery } from './utils/useAddressQuery';
 
 interface Props {
-  addressQuery: UseQueryResult<TAddress, ResourceError>;
+  addressQuery: AddressQuery;
   scrollRef?: React.RefObject<HTMLDivElement>;
 }
 
@@ -32,12 +39,9 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
 
   const addressHash = getQueryParamString(router.query.hash);
 
-  const countersQuery = useApiQuery('address_counters', {
-    pathParams: { hash: addressHash },
-    queryOptions: {
-      enabled: Boolean(addressHash) && Boolean(addressQuery.data),
-      placeholderData: ADDRESS_COUNTERS,
-    },
+  const countersQuery = useAddressCountersQuery({
+    hash: addressHash,
+    addressQuery,
   });
 
   const handleCounterItemClick = React.useCallback(() => {
@@ -47,15 +51,14 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
     }, 500);
   }, [ scrollRef ]);
 
-  const errorData = React.useMemo(() => ({
+  const error404Data = React.useMemo(() => ({
     hash: addressHash || '',
     is_contract: false,
-    implementation_name: null,
-    implementation_address: null,
+    implementations: null,
     token: null,
     watchlist_address_id: null,
     watchlist_names: null,
-    creation_tx_hash: null,
+    creation_transaction_hash: null,
     block_number_balance_updated_at: null,
     name: null,
     exchange_rate: null,
@@ -63,155 +66,260 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
     has_tokens: true,
     has_token_transfers: true,
     has_validated_blocks: false,
+    filecoin: undefined,
+    creator_filecoin_robust_address: null,
+    creator_address_hash: null,
   }), [ addressHash ]);
 
-  const is404Error = addressQuery.isError && 'status' in addressQuery.error && addressQuery.error.status === 404;
-  const is422Error = addressQuery.isError && 'status' in addressQuery.error && addressQuery.error.status === 422;
-
-  if (addressQuery.isError && is422Error) {
-    throwOnResourceLoadError(addressQuery);
-  }
-
-  if (addressQuery.isError && !is404Error) {
-    return <DataFetchAlert/>;
+  // error handling (except 404 codes)
+  if (addressQuery.isError) {
+    if (isCustomAppError(addressQuery.error)) {
+      const is404Error = addressQuery.isError && 'status' in addressQuery.error && addressQuery.error.status === 404;
+      if (!is404Error) {
+        throwOnResourceLoadError(addressQuery);
+      }
+    } else {
+      return <DataFetchAlert/>;
+    }
   }
 
-  const data = addressQuery.isError ? errorData : addressQuery.data;
+  const data = addressQuery.isError ? error404Data : addressQuery.data;
 
   if (!data) {
     return null;
   }
 
+  const creatorAddressHash = data.creator_address_hash;
+
   return (
-    <Grid
-      columnGap={ 8 }
-      rowGap={{ base: 1, lg: 3 }}
-      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden"
-    >
-      <AddressNameInfo data={ data } isLoading={ addressQuery.isPlaceholderData }/>
-      { data.is_contract && data.creation_tx_hash && data.creator_address_hash && (
-        <DetailsInfoItem
-          title="Creator"
-          hint="Transaction and address of creation"
-          isLoading={ addressQuery.isPlaceholderData }
-        >
-          <AddressEntity
-            address={{ hash: data.creator_address_hash }}
-            truncation="constant"
-            noIcon
-          />
-          <Text whiteSpace="pre"> at txn </Text>
-          <TxEntity hash={ data.creation_tx_hash } truncation="constant" noIcon noCopy={ false }/>
-        </DetailsInfoItem>
-      ) }
-      { data.is_contract && data.implementation_address && (
-        <DetailsInfoItem
-          title="Implementation"
-          hint="Implementation address of the proxy contract"
-          columnGap={ 1 }
-        >
-          <AddressEntity
-            address={{ hash: data.implementation_address, name: data.implementation_name, is_contract: true }}
-            isLoading={ addressQuery.isPlaceholderData }
-            noIcon
-          />
-        </DetailsInfoItem>
-      ) }
-      <AddressBalance data={ data } isLoading={ addressQuery.isPlaceholderData }/>
-      { data.has_tokens && (
-        <DetailsInfoItem
-          title="Tokens"
-          hint="All tokens in the account and total value"
-          alignSelf="center"
-          py={ 0 }
-        >
-          { addressQuery.data ? <TokenSelect onClick={ handleCounterItemClick }/> : <Box py="6px">0</Box> }
-        </DetailsInfoItem>
-      ) }
-      <DetailsInfoItem
-        title="Transactions"
-        hint="Number of transactions related to this address"
-        isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
+    <>
+      { addressQuery.isDegradedData && <ServiceDegradationWarning isLoading={ addressQuery.isPlaceholderData } mb={ 6 }/> }
+      <Grid
+        columnGap={ 8 }
+        rowGap={{ base: 1, lg: 3 }}
+        templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden"
       >
-        { addressQuery.data ? (
-          <AddressCounterItem
-            prop="transactions_count"
-            query={ countersQuery }
-            address={ data.hash }
-            onClick={ handleCounterItemClick }
-            isAddressQueryLoading={ addressQuery.isPlaceholderData }
-          />
-        ) :
-          0 }
-      </DetailsInfoItem>
-      { data.has_token_transfers && (
-        <DetailsInfoItem
-          title="Transfers"
-          hint="Number of transfers to/from this address"
-          isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
-        >
-          { addressQuery.data ? (
-            <AddressCounterItem
-              prop="token_transfers_count"
-              query={ countersQuery }
-              address={ data.hash }
-              onClick={ handleCounterItemClick }
-              isAddressQueryLoading={ addressQuery.isPlaceholderData }
-            />
-          ) :
-            0 }
-        </DetailsInfoItem>
-      ) }
-      <DetailsInfoItem
-        title="Gas used"
-        hint="Gas used by the address"
-        isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
-      >
-        { addressQuery.data ? (
-          <AddressCounterItem
-            prop="gas_usage_count"
-            query={ countersQuery }
-            address={ data.hash }
-            onClick={ handleCounterItemClick }
-            isAddressQueryLoading={ addressQuery.isPlaceholderData }
+        <AddressAlternativeFormat isLoading={ addressQuery.isPlaceholderData } addressHash={ addressHash }/>
+
+        { data.filecoin?.id && (
+          <>
+            <DetailsInfoItem.Label
+              hint="Short identifier of an address that may change with chain state updates"
+            >
+              ID
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value>
+              <Text>{ data.filecoin.id }</Text>
+              <CopyToClipboard text={ data.filecoin.id }/>
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+
+        { data.filecoin?.actor_type && (
+          <>
+            <DetailsInfoItem.Label
+              hint="Identifies the purpose and behavior of the address on the Filecoin network"
+            >
+              Actor
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value>
+              <FilecoinActorTag actorType={ data.filecoin.actor_type }/>
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+
+        { (data.filecoin?.actor_type === 'evm' || data.filecoin?.actor_type === 'ethaccount') && data?.filecoin?.robust && (
+          <>
+            <DetailsInfoItem.Label
+              hint="0x-style address to which the Filecoin address is assigned by the Ethereum Address Manager"
+            >
+              Ethereum Address
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value flexWrap="nowrap">
+              <AddressEntity
+                address={{ hash: data.hash }}
+                noIcon
+                noLink
+              />
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+
+        <AddressNameInfo data={ data } isLoading={ addressQuery.isPlaceholderData }/>
+
+        { data.is_contract && data.creation_transaction_hash && (creatorAddressHash) && (
+          <>
+            <DetailsInfoItem.Label
+              hint="Transaction and address of creation"
+              isLoading={ addressQuery.isPlaceholderData }
+            >
+              Creator
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value>
+              <AddressEntity
+                address={{ hash: creatorAddressHash, filecoin: { robust: data.creator_filecoin_robust_address } }}
+                truncation="constant"
+                noIcon
+              />
+              <Text whiteSpace="pre"> at txn </Text>
+              <TxEntity hash={ data.creation_transaction_hash } truncation="constant" noIcon noCopy={ false }/>
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+        { data.is_contract && data.implementations && data.implementations?.length > 0 && (
+          <AddressImplementations
+            data={ data.implementations }
+            isLoading={ addressQuery.isPlaceholderData }
           />
-        ) :
-          0 }
-      </DetailsInfoItem>
-      { data.has_validated_blocks && (
-        <DetailsInfoItem
-          title="Blocks validated"
-          hint="Number of blocks validated by this validator"
+        ) }
+
+        <AddressBalance data={ data } isLoading={ addressQuery.isPlaceholderData }/>
+
+        { data.has_tokens && (
+          <>
+            <DetailsInfoItem.Label
+              hint="All tokens in the account and total value"
+            >
+              Tokens
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value py={ addressQuery.data ? 0 : undefined }>
+              { addressQuery.data ? <TokenSelect onClick={ handleCounterItemClick }/> : <Box>0</Box> }
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+        { (config.features.multichainButton.isEnabled || (data.exchange_rate && data.has_tokens)) && (
+          <>
+            <DetailsInfoItem.Label
+              hint="Total net worth in USD of all tokens for the address"
+              isLoading={ addressQuery.isPlaceholderData }
+            >
+              Net worth
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value alignSelf="center" py={ 0 }>
+              <AddressNetWorth addressData={ addressQuery.data } addressHash={ addressHash } isLoading={ addressQuery.isPlaceholderData }/>
+            </DetailsInfoItem.Value>
+          </>
+        )
+        }
+
+        <DetailsInfoItem.Label
+          hint="Number of transactions related to this address"
           isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
         >
+          Transactions
+        </DetailsInfoItem.Label>
+        <DetailsInfoItem.Value>
           { addressQuery.data ? (
             <AddressCounterItem
-              prop="validations_count"
+              prop="transactions_count"
               query={ countersQuery }
               address={ data.hash }
               onClick={ handleCounterItemClick }
               isAddressQueryLoading={ addressQuery.isPlaceholderData }
+              isDegradedData={ addressQuery.isDegradedData }
             />
           ) :
             0 }
-        </DetailsInfoItem>
-      ) }
-      { data.block_number_balance_updated_at && (
-        <DetailsInfoItem
-          title="Last balance update"
-          hint="Block number in which the address was updated"
-          alignSelf="center"
-          py={{ base: '2px', lg: 1 }}
-          isLoading={ addressQuery.isPlaceholderData }
-        >
-          <BlockEntity
-            number={ data.block_number_balance_updated_at }
-            isLoading={ addressQuery.isPlaceholderData }
-          />
-        </DetailsInfoItem>
-      ) }
-      <DetailsSponsoredItem isLoading={ addressQuery.isPlaceholderData }/>
-    </Grid>
+        </DetailsInfoItem.Value>
+
+        { data.has_token_transfers && (
+          <>
+            <DetailsInfoItem.Label
+              hint="Number of transfers to/from this address"
+              isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
+            >
+              Transfers
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value>
+              { addressQuery.data ? (
+                <AddressCounterItem
+                  prop="token_transfers_count"
+                  query={ countersQuery }
+                  address={ data.hash }
+                  onClick={ handleCounterItemClick }
+                  isAddressQueryLoading={ addressQuery.isPlaceholderData }
+                  isDegradedData={ addressQuery.isDegradedData }
+                />
+              ) :
+                0 }
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+
+        { countersQuery.data?.gas_usage_count && (
+          <>
+            <DetailsInfoItem.Label
+              hint="Gas used by the address"
+              isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
+            >
+              Gas used
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value>
+              { addressQuery.data ? (
+                <AddressCounterItem
+                  prop="gas_usage_count"
+                  query={ countersQuery }
+                  address={ data.hash }
+                  onClick={ handleCounterItemClick }
+                  isAddressQueryLoading={ addressQuery.isPlaceholderData }
+                  isDegradedData={ addressQuery.isDegradedData }
+                />
+              ) :
+                0 }
+              { !countersQuery.isPlaceholderData && countersQuery.data?.gas_usage_count && (
+                <AddressSaveOnGas
+                  gasUsed={ countersQuery.data.gas_usage_count }
+                  address={ data.hash }
+                />
+              ) }
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+
+        { data.has_validated_blocks && (
+          <>
+            <DetailsInfoItem.Label
+              hint={ `Number of blocks ${ getNetworkValidationActionText() } by this ${ getNetworkValidatorTitle() }` }
+              isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
+            >
+              { `Blocks ${ getNetworkValidationActionText() }` }
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value>
+              { addressQuery.data ? (
+                <AddressCounterItem
+                  prop="validations_count"
+                  query={ countersQuery }
+                  address={ data.hash }
+                  onClick={ handleCounterItemClick }
+                  isAddressQueryLoading={ addressQuery.isPlaceholderData }
+                  isDegradedData={ addressQuery.isDegradedData }
+                />
+              ) :
+                0 }
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+
+        { data.block_number_balance_updated_at && (
+          <>
+            <DetailsInfoItem.Label
+              hint="Block number in which the address was updated"
+              isLoading={ addressQuery.isPlaceholderData }
+            >
+              Last balance update
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value>
+              <BlockEntity
+                number={ data.block_number_balance_updated_at }
+                isLoading={ addressQuery.isPlaceholderData }
+              />
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+
+        <DetailsSponsoredItem isLoading={ addressQuery.isPlaceholderData }/>
+      </Grid>
+    </>
   );
 };
 
diff --git a/ui/address/AddressEpochRewards.pw.tsx b/ui/address/AddressEpochRewards.pw.tsx
new file mode 100644
index 0000000000..8732a7c866
--- /dev/null
+++ b/ui/address/AddressEpochRewards.pw.tsx
@@ -0,0 +1,25 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { epochRewards } from 'mocks/address/epochRewards';
+import { test, expect } from 'playwright/lib';
+
+import AddressEpochRewards from './AddressEpochRewards';
+
+const ADDRESS_HASH = '0x1234';
+const hooksConfig = {
+  router: {
+    query: { hash: ADDRESS_HASH },
+  },
+};
+
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address_epoch_rewards', epochRewards, { pathParams: { hash: ADDRESS_HASH } });
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
+      <AddressEpochRewards/>
+    </Box>,
+    { hooksConfig },
+  );
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/AddressEpochRewards.tsx b/ui/address/AddressEpochRewards.tsx
new file mode 100644
index 0000000000..d97f586a0a
--- /dev/null
+++ b/ui/address/AddressEpochRewards.tsx
@@ -0,0 +1,96 @@
+import { Hide, Show } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import useIsMounted from 'lib/hooks/useIsMounted';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { EPOCH_REWARD_ITEM } from 'stubs/address';
+import { generateListStub } from 'stubs/utils';
+import AddressEpochRewardsTable from 'ui/address/epochRewards/AddressEpochRewardsTable';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+
+import AddressCsvExportLink from './AddressCsvExportLink';
+import AddressEpochRewardsListItem from './epochRewards/AddressEpochRewardsListItem';
+
+type Props = {
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
+};
+
+const AddressEpochRewards = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
+  const router = useRouter();
+  const isMounted = useIsMounted();
+
+  const hash = getQueryParamString(router.query.hash);
+
+  const rewardsQuery = useQueryWithPages({
+    resourceName: 'address_epoch_rewards',
+    pathParams: {
+      hash,
+    },
+    scrollRef,
+    options: {
+      enabled: isQueryEnabled && Boolean(hash),
+      placeholderData: generateListStub<'address_epoch_rewards'>(EPOCH_REWARD_ITEM, 50, { next_page_params: {
+        amount: '1',
+        items_count: 50,
+        type: 'voter',
+        associated_account_address_hash: '1',
+        block_number: 10355938,
+      } }),
+    },
+  });
+
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
+  const content = rewardsQuery.data?.items ? (
+    <>
+      <Hide below="lg" ssr={ false }>
+        <AddressEpochRewardsTable
+          items={ rewardsQuery.data.items }
+          top={ rewardsQuery.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+          isLoading={ rewardsQuery.isPlaceholderData }
+        />
+      </Hide>
+      <Show below="lg" ssr={ false }>
+        { rewardsQuery.data.items.map((item, index) => (
+          <AddressEpochRewardsListItem
+            key={ item.block_hash + item.type + item.account.hash + item.associated_account.hash + (rewardsQuery.isPlaceholderData ? String(index) : '') }
+            item={ item }
+            isLoading={ rewardsQuery.isPlaceholderData }
+          />
+        )) }
+      </Show>
+    </>
+  ) : null;
+
+  const actionBar = rewardsQuery.pagination.isVisible ? (
+    <ActionBar mt={ -6 }>
+      <AddressCsvExportLink
+        address={ hash }
+        isLoading={ rewardsQuery.pagination.isLoading }
+        params={{ type: 'epoch-rewards' }}
+        ml={{ lg: 'auto' }}
+      />
+      <Pagination ml={{ base: 0, lg: 8 }} { ...rewardsQuery.pagination }/>
+    </ActionBar>
+  ) : null;
+
+  return (
+    <DataListDisplay
+      isError={ rewardsQuery.isError }
+      items={ rewardsQuery.data?.items }
+      emptyText="There are no epoch rewards for this address."
+      content={ content }
+      actionBar={ actionBar }
+    />
+  );
+};
+
+export default AddressEpochRewards;
diff --git a/ui/address/AddressInternalTxs.pw.tsx b/ui/address/AddressInternalTxs.pw.tsx
index 38d8e6dab5..cce88f4c99 100644
--- a/ui/address/AddressInternalTxs.pw.tsx
+++ b/ui/address/AddressInternalTxs.pw.tsx
@@ -1,34 +1,25 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as internalTxsMock from 'mocks/txs/internalTxs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import AddressInternalTxs from './AddressInternalTxs';
 
 const ADDRESS_HASH = internalTxsMock.base.from.hash;
-const API_URL_TX_INTERNALS = buildApiUrl('address_internal_txs', { hash: ADDRESS_HASH });
 const hooksConfig = {
   router: {
     query: { hash: ADDRESS_HASH },
   },
 };
 
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(API_URL_TX_INTERNALS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(internalTxsMock.baseResponse),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address_internal_txs', internalTxsMock.baseResponse, { pathParams: { hash: ADDRESS_HASH } });
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <AddressInternalTxs/>
-    </TestApp>,
+    </Box>,
     { hooksConfig },
   );
-
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/address/AddressInternalTxs.tsx b/ui/address/AddressInternalTxs.tsx
index d4d302e39b..eb0006df9a 100644
--- a/ui/address/AddressInternalTxs.tsx
+++ b/ui/address/AddressInternalTxs.tsx
@@ -6,6 +6,7 @@ import type { AddressFromToFilter } from 'types/api/address';
 import { AddressFromToFilterValues } from 'types/api/address';
 
 import getFilterValueFromQuery from 'lib/getFilterValueFromQuery';
+import useIsMounted from 'lib/hooks/useIsMounted';
 import { apos } from 'lib/html-entities';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { INTERNAL_TX } from 'stubs/internalTx';
@@ -22,8 +23,15 @@ import AddressIntTxsList from './internals/AddressIntTxsList';
 
 const getFilterValue = (getFilterValueFromQuery<AddressFromToFilter>).bind(null, AddressFromToFilterValues);
 
-const AddressInternalTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>}) => {
+type Props = {
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
+};
+const AddressInternalTxs = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
+  const isMounted = useIsMounted();
+
   const [ filterValue, setFilterValue ] = React.useState<AddressFromToFilter>(getFilterValue(router.query.filter));
 
   const hash = getQueryParamString(router.query.hash);
@@ -34,6 +42,7 @@ const AddressInternalTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
     filters: { filter: filterValue },
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_internal_txs'>(
         INTERNAL_TX,
         50,
@@ -55,6 +64,10 @@ const AddressInternalTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
     onFilterChange({ filter: newVal });
   }, [ onFilterChange ]);
 
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
   const content = data?.items ? (
     <>
       <Show below="lg" ssr={ false }>
@@ -71,7 +84,7 @@ const AddressInternalTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
       <AddressTxsFilter
         defaultFilter={ filterValue }
         onFilterChange={ handleFilterChange }
-        isActive={ Boolean(filterValue) }
+        hasActiveFilter={ Boolean(filterValue) }
         isLoading={ pagination.isLoading }
       />
       <AddressCsvExportLink
diff --git a/ui/address/AddressLogs.tsx b/ui/address/AddressLogs.tsx
index 5de923c0fd..9df130cd8d 100644
--- a/ui/address/AddressLogs.tsx
+++ b/ui/address/AddressLogs.tsx
@@ -1,6 +1,7 @@
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import useIsMounted from 'lib/hooks/useIsMounted';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { LOG } from 'stubs/log';
 import { generateListStub } from 'stubs/utils';
@@ -11,9 +12,17 @@ import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
 import AddressCsvExportLink from './AddressCsvExportLink';
+import useAddressQuery from './utils/useAddressQuery';
 
-const AddressLogs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>}) => {
+type Props = {
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
+};
+
+const AddressLogs = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
+  const isMounted = useIsMounted();
 
   const hash = getQueryParamString(router.query.hash);
   const { data, isPlaceholderData, isError, pagination } = useQueryWithPages({
@@ -21,6 +30,7 @@ const AddressLogs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>
     pathParams: { hash },
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_logs'>(LOG, 3, { next_page_params: {
         block_number: 9005750,
         index: 42,
@@ -30,6 +40,8 @@ const AddressLogs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>
     },
   });
 
+  const addressQuery = useAddressQuery({ hash });
+
   const actionBar = (
     <ActionBar mt={ -6 } showShadow justifyContent={{ base: 'space-between', lg: 'end' }}>
       <AddressCsvExportLink
@@ -41,7 +53,19 @@ const AddressLogs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>
     </ActionBar>
   );
 
-  const content = data?.items ? data.items.map((item, index) => <LogItem key={ index } { ...item } type="address" isLoading={ isPlaceholderData }/>) : null;
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
+  const content = data?.items ? data.items.map((item, index) => (
+    <LogItem
+      key={ index }
+      { ...item }
+      type="address"
+      isLoading={ isPlaceholderData }
+      defaultDataType={ addressQuery.data?.zilliqa?.is_scilla_contract ? 'UTF-8' : undefined }
+    />
+  )) : null;
 
   return (
     <DataListDisplay
diff --git a/ui/address/AddressMud.tsx b/ui/address/AddressMud.tsx
new file mode 100644
index 0000000000..93489f97fe
--- /dev/null
+++ b/ui/address/AddressMud.tsx
@@ -0,0 +1,37 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import useIsMounted from 'lib/hooks/useIsMounted';
+
+import AddressMudRecord from './mud/AddressMudRecord';
+import AddressMudTable from './mud/AddressMudTable';
+import AddressMudTables from './mud/AddressMudTables';
+
+type Props = {
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
+};
+
+const AddressMud = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
+  const isMounted = useIsMounted();
+  const router = useRouter();
+  const tableId = router.query.table_id?.toString();
+  const recordId = router.query.record_id?.toString();
+
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
+  if (tableId && recordId) {
+    return <AddressMudRecord tableId={ tableId } recordId={ recordId } isQueryEnabled={ isQueryEnabled } scrollRef={ scrollRef }/>;
+  }
+
+  if (tableId) {
+    return <AddressMudTable tableId={ tableId } scrollRef={ scrollRef } isQueryEnabled={ isQueryEnabled }/>;
+  }
+
+  return <AddressMudTables scrollRef={ scrollRef } isQueryEnabled={ isQueryEnabled }/>;
+};
+
+export default AddressMud;
diff --git a/ui/address/AddressTokenTransfers.pw.tsx b/ui/address/AddressTokenTransfers.pw.tsx
index 3befb96359..2c7ccac9c1 100644
--- a/ui/address/AddressTokenTransfers.pw.tsx
+++ b/ui/address/AddressTokenTransfers.pw.tsx
@@ -1,126 +1,110 @@
 import { Box } from '@chakra-ui/react';
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
 import * as socketServer from 'playwright/fixtures/socketServer';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect, devices } from 'playwright/lib';
 
 import AddressTokenTransfers from './AddressTokenTransfers';
 
 const CURRENT_ADDRESS = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859';
-
-const API_URL = buildApiUrl('address_token_transfers', { hash: CURRENT_ADDRESS }) +
- '?token=0x1189a607CEac2f0E14867de4EB15b15C9FFB5859';
-
+const TOKEN_HASH = '0x1189a607CEac2f0E14867de4EB15b15C9FFB5859';
 const hooksConfig = {
   router: {
-    query: { hash: CURRENT_ADDRESS, token: '0x1189a607CEac2f0E14867de4EB15b15C9FFB5859' },
+    query: { hash: CURRENT_ADDRESS, token: TOKEN_HASH },
   },
 };
 
-const test = base.extend<socketServer.SocketServerFixture>({
-  createSocket: socketServer.createSocket,
-});
-
 // FIXME
 // test cases which use socket cannot run in parallel since the socket server always run on the same port
 test.describe.configure({ mode: 'serial' });
 
-test('with token filter and pagination', async({ mount, page }) => {
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
-  }));
+const tokenTransfersWithPagination = {
+  items: [ tokenTransferMock.erc1155A ],
+  next_page_params: { block_number: 1, index: 1, items_count: 1 },
+};
+const tokenTransfersWoPagination = {
+  items: [ tokenTransferMock.erc1155A ],
+  next_page_params: null,
+};
 
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+test('with token filter and pagination', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
+    pathParams: { hash: CURRENT_ADDRESS },
+    queryParams: { token: TOKEN_HASH },
+  });
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <AddressTokenTransfers/>
-    </TestApp>,
+    </Box>,
     { hooksConfig },
   );
-
   await expect(component).toHaveScreenshot();
 });
 
-test('with token filter and no pagination', async({ mount, page }) => {
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ] }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+test('with token filter and no pagination', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address_token_transfers', tokenTransfersWoPagination, {
+    pathParams: { hash: CURRENT_ADDRESS },
+    queryParams: { token: TOKEN_HASH },
+  });
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <AddressTokenTransfers/>
-    </TestApp>,
+    </Box>,
     { hooksConfig },
   );
-
   await expect(component).toHaveScreenshot();
 });
 
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  test('with token filter and pagination', async({ mount, page }) => {
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <Box h={{ base: '134px', lg: 6 }}/>
+  test('with token filter and pagination', async({ render, mockApiResponse }) => {
+    await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
+      pathParams: { hash: CURRENT_ADDRESS },
+      queryParams: { token: TOKEN_HASH },
+    });
+    const component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokenTransfers/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
     );
-
     await expect(component).toHaveScreenshot();
   });
 
-  test('with token filter and no pagination', async({ mount, page }) => {
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ] }),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <Box h={{ base: '134px', lg: 6 }}/>
+  test('with token filter and no pagination', async({ render, mockApiResponse }) => {
+    await mockApiResponse('address_token_transfers', tokenTransfersWoPagination, {
+      pathParams: { hash: CURRENT_ADDRESS },
+      queryParams: { token: TOKEN_HASH },
+    });
+    const component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokenTransfers/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
     );
-
     await expect(component).toHaveScreenshot();
   });
 });
 
 test.describe('socket', () => {
-  test('without overload', async({ mount, page, createSocket }) => {
+  test('without overload', async({ render, mockApiResponse, createSocket, page }) => {
     const hooksConfigNoToken = {
       router: {
         query: { hash: CURRENT_ADDRESS },
       },
     };
-
-    const API_URL_NO_TOKEN = buildApiUrl('address_token_transfers', { hash: CURRENT_ADDRESS }) + '?type=';
-
-    await page.route(API_URL_NO_TOKEN, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
-    }));
-
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
+      pathParams: { hash: CURRENT_ADDRESS },
+      queryParams: { type: [] },
+    });
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokenTransfers/>
-      </TestApp>,
+      </Box>,
       { hooksConfig: hooksConfigNoToken },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -131,32 +115,29 @@ test.describe('socket', () => {
 
     socketServer.sendMessage(socket, channel, 'token_transfer', { token_transfers: [ tokenTransferMock.erc1155B, tokenTransferMock.erc1155C ] });
 
-    await page.waitForSelector('tbody tr:nth-child(3)');
+    const thirdRow = page.locator('tbody tr:nth-child(3)');
+    await thirdRow.waitFor();
 
     const itemsCountNew = await page.locator('tbody tr').count();
     expect(itemsCountNew).toBe(4);
   });
 
-  test('with overload', async({ mount, page, createSocket }) => {
+  test('with overload', async({ render, mockApiResponse, page, createSocket }) => {
     const hooksConfigNoToken = {
       router: {
         query: { hash: CURRENT_ADDRESS },
       },
     };
-
-    const API_URL_NO_TOKEN = buildApiUrl('address_token_transfers', { hash: CURRENT_ADDRESS }) + '?type=';
-
-    await page.route(API_URL_NO_TOKEN, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
-    }));
-
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
+      pathParams: { hash: CURRENT_ADDRESS },
+      queryParams: { type: [] },
+    });
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokenTransfers overloadCount={ 2 }/>
-      </TestApp>,
+      </Box>,
       { hooksConfig: hooksConfigNoToken },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -167,7 +148,8 @@ test.describe('socket', () => {
 
     socketServer.sendMessage(socket, channel, 'token_transfer', { token_transfers: [ tokenTransferMock.erc1155B, tokenTransferMock.erc1155C ] });
 
-    await page.waitForSelector('tbody tr:nth-child(3)');
+    const thirdRow = page.locator('tbody tr:nth-child(3)');
+    await thirdRow.waitFor();
 
     const itemsCountNew = await page.locator('tbody tr').count();
     expect(itemsCountNew).toBe(3);
@@ -176,26 +158,23 @@ test.describe('socket', () => {
     expect(counter?.startsWith('1 ')).toBe(true);
   });
 
-  test('without overload, with filters', async({ mount, page, createSocket }) => {
+  test('without overload, with filters', async({ render, mockApiResponse, page, createSocket }) => {
     const hooksConfigWithFilter = {
       router: {
         query: { hash: CURRENT_ADDRESS, type: 'ERC-1155' },
       },
     };
+    await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
+      pathParams: { hash: CURRENT_ADDRESS },
+      queryParams: { type: 'ERC-1155' },
+    });
 
-    const API_URL_WITH_FILTER = buildApiUrl('address_token_transfers', { hash: CURRENT_ADDRESS }) + '?type=ERC-1155';
-
-    await page.route(API_URL_WITH_FILTER, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
-    }));
-
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokenTransfers/>
-      </TestApp>,
+      </Box>,
       { hooksConfig: hooksConfigWithFilter },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -206,32 +185,30 @@ test.describe('socket', () => {
 
     socketServer.sendMessage(socket, channel, 'token_transfer', { token_transfers: [ tokenTransferMock.erc1155B, tokenTransferMock.erc20 ] });
 
-    await page.waitForSelector('tbody tr:nth-child(3)');
+    const thirdRow = page.locator('tbody tr:nth-child(3)');
+    await thirdRow.waitFor();
 
     const itemsCountNew = await page.locator('tbody tr').count();
     expect(itemsCountNew).toBe(3);
   });
 
-  test('with overload, with filters', async({ mount, page, createSocket }) => {
+  test('with overload, with filters', async({ render, mockApiResponse, page, createSocket }) => {
     const hooksConfigWithFilter = {
       router: {
         query: { hash: CURRENT_ADDRESS, type: 'ERC-1155' },
       },
     };
+    await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
+      pathParams: { hash: CURRENT_ADDRESS },
+      queryParams: { type: 'ERC-1155' },
+    });
 
-    const API_URL_WITH_FILTER = buildApiUrl('address_token_transfers', { hash: CURRENT_ADDRESS }) + '?type=ERC-1155';
-
-    await page.route(API_URL_WITH_FILTER, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
-    }));
-
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokenTransfers overloadCount={ 2 }/>
-      </TestApp>,
+      </Box>,
       { hooksConfig: hooksConfigWithFilter },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -247,7 +224,8 @@ test.describe('socket', () => {
       { token_transfers: [ tokenTransferMock.erc1155B, tokenTransferMock.erc20, tokenTransferMock.erc1155C, tokenTransferMock.erc721 ] },
     );
 
-    await page.waitForSelector('tbody tr:nth-child(3)');
+    const thirdRow = page.locator('tbody tr:nth-child(3)');
+    await thirdRow.waitFor();
 
     const itemsCountNew = await page.locator('tbody tr').count();
     expect(itemsCountNew).toBe(3);
diff --git a/ui/address/AddressTokenTransfers.tsx b/ui/address/AddressTokenTransfers.tsx
index 0ebba17f8e..077dc25b47 100644
--- a/ui/address/AddressTokenTransfers.tsx
+++ b/ui/address/AddressTokenTransfers.tsx
@@ -13,13 +13,14 @@ import { getResourceKey } from 'lib/api/useApiQuery';
 import getFilterValueFromQuery from 'lib/getFilterValueFromQuery';
 import getFilterValuesFromQuery from 'lib/getFilterValuesFromQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import useIsMounted from 'lib/hooks/useIsMounted';
 import { apos } from 'lib/html-entities';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import { TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
 import { getTokenTransfersStub } from 'stubs/token';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import HashStringShorten from 'ui/shared/HashStringShorten';
@@ -36,7 +37,7 @@ import AddressCsvExportLink from './AddressCsvExportLink';
 type Filters = {
   type: Array<TokenType>;
   filter: AddressFromToFilter | undefined;
-}
+};
 
 const getTokenFilterValue = (getFilterValuesFromQuery<TokenType>).bind(null, TOKEN_TYPE_IDS);
 const getAddressFilterValue = (getFilterValueFromQuery<AddressFromToFilter>).bind(null, AddressFromToFilterValues);
@@ -53,7 +54,7 @@ const matchFilters = (filters: Filters, tokenTransfer: TokenTransfer, address?:
     }
   }
   if (filters.type && filters.type.length) {
-    if (!filters.type.includes(tokenTransfer.token.type)) {
+    if (!tokenTransfer.token || !filters.type.includes(tokenTransfer.token.type)) {
       return false;
     }
   }
@@ -63,14 +64,17 @@ const matchFilters = (filters: Filters, tokenTransfer: TokenTransfer, address?:
 
 type Props = {
   scrollRef?: React.RefObject<HTMLDivElement>;
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
   // for tests only
   overloadCount?: number;
-}
+};
 
-const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Props) => {
+const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
   const queryClient = useQueryClient();
   const isMobile = useIsMobile();
+  const isMounted = useIsMounted();
 
   const currentAddress = getQueryParamString(router.query.hash);
 
@@ -92,6 +96,7 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Pr
     filters: tokenFilter ? { token: tokenFilter } : filters,
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: getTokenTransfersStub(undefined, {
         block_number: 7793535,
         index: 46,
@@ -179,6 +184,18 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Pr
     handler: handleNewSocketMessage,
   });
 
+  const tokenData = React.useMemo(() => ({
+    address: tokenFilter || '',
+    name: '',
+    icon_url: '',
+    symbol: '',
+    type: 'ERC-20' as const,
+  }), [ tokenFilter ]);
+
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
   const numActiveFilters = (filters.type?.length || 0) + (filters.filter ? 1 : 0);
   const isActionBarHidden = !tokenFilter && !numActiveFilters && !data?.items.length && !currentAddress;
 
@@ -189,7 +206,7 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Pr
           data={ data?.items }
           baseAddress={ currentAddress }
           showTxInfo
-          top={ isActionBarHidden ? 0 : 80 }
+          top={ isActionBarHidden ? 0 : ACTION_BAR_HEIGHT_DESKTOP }
           enableTimeIncrement
           showSocketInfo={ pagination.page === 1 && !tokenFilter }
           socketInfoAlert={ socketAlert }
@@ -218,14 +235,6 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Pr
     </>
   ) : null;
 
-  const tokenData = React.useMemo(() => ({
-    address: tokenFilter || '',
-    name: '',
-    icon_url: '',
-    symbol: '',
-    type: 'ERC-20' as const,
-  }), [ tokenFilter ]);
-
   const tokenFilterComponent = tokenFilter && (
     <Flex alignItems="center" flexWrap="wrap" mb={{ base: isActionBarHidden ? 3 : 6, lg: 0 }} mr={ 4 }>
       <Text whiteSpace="nowrap" mr={ 2 } py={ 1 }>Filtered by token</Text>
diff --git a/ui/address/AddressTokens.pw.tsx b/ui/address/AddressTokens.pw.tsx
index 7ee5556986..3b2a34af8e 100644
--- a/ui/address/AddressTokens.pw.tsx
+++ b/ui/address/AddressTokens.pw.tsx
@@ -1,73 +1,54 @@
 import { Box } from '@chakra-ui/react';
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import type { AddressTokensResponse } from 'types/api/address';
+
 import * as addressMock from 'mocks/address/address';
 import * as tokensMock from 'mocks/address/tokens';
+import * as tokenInstance from 'mocks/tokens/tokenInstance';
 import * as socketServer from 'playwright/fixtures/socketServer';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect, devices } from 'playwright/lib';
 
 import AddressTokens from './AddressTokens';
 
-const ADDRESS_HASH = addressMock.withName.hash;
-const API_URL_ADDRESS = buildApiUrl('address', { hash: ADDRESS_HASH });
-const API_URL_TOKENS = buildApiUrl('address_tokens', { hash: ADDRESS_HASH });
-const API_URL_NFT = buildApiUrl('address_nfts', { hash: ADDRESS_HASH }) + '?type=';
-const API_URL_COLLECTIONS = buildApiUrl('address_collections', { hash: ADDRESS_HASH }) + '?type=';
+const ADDRESS_HASH = addressMock.validator.hash;
 
 const nextPageParams = {
   items_count: 50,
   token_name: 'aaa',
-  token_type: '123',
+  token_type: 'ERC-20' as const,
   value: 1,
+  fiat_value: '1',
 };
 
-const test = base.extend({
-  page: async({ page }, use) => {
-    const response20 = {
-      items: [ tokensMock.erc20a, tokensMock.erc20b, tokensMock.erc20c, tokensMock.erc20d ],
-      next_page_params: nextPageParams,
-    };
-    const response721 = {
-      items: [ tokensMock.erc721a, tokensMock.erc721b, tokensMock.erc721c ],
-      next_page_params: nextPageParams,
-    };
-    const response1155 = {
-      items: [ tokensMock.erc1155a, tokensMock.erc1155b ],
-      next_page_params: nextPageParams,
-    };
+test.beforeEach(async({ mockApiResponse }) => {
+  const response20: AddressTokensResponse = {
+    items: [ tokensMock.erc20a, tokensMock.erc20b, tokensMock.erc20c, tokensMock.erc20d ],
+    next_page_params: nextPageParams,
+  };
+  const response721: AddressTokensResponse = {
+    items: [ tokensMock.erc721a, tokensMock.erc721b, tokensMock.erc721c ],
+    next_page_params: nextPageParams,
+  };
+  const response1155: AddressTokensResponse = {
+    items: [ tokensMock.erc1155a, tokensMock.erc1155b ],
+    next_page_params: nextPageParams,
+  };
+  const response404: AddressTokensResponse = {
+    items: [ tokensMock.erc404a, tokensMock.erc404b ],
+    next_page_params: nextPageParams,
+  };
 
-    await page.route(API_URL_ADDRESS, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(addressMock.withName),
-    }));
-    await page.route(API_URL_TOKENS + '?type=ERC-20', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(response20),
-    }));
-    await page.route(API_URL_TOKENS + '?type=ERC-721', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(response721),
-    }));
-    await page.route(API_URL_TOKENS + '?type=ERC-1155', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(response1155),
-    }));
-    await page.route(API_URL_NFT, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(tokensMock.nfts),
-    }));
-    await page.route(API_URL_COLLECTIONS, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(tokensMock.collections),
-    }));
-
-    use(page);
-  },
+  await mockApiResponse('address', addressMock.validator, { pathParams: { hash: ADDRESS_HASH } });
+  await mockApiResponse('address_tokens', response20, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-20' } });
+  await mockApiResponse('address_tokens', response721, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-721' } });
+  await mockApiResponse('address_tokens', response1155, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-1155' } });
+  await mockApiResponse('address_tokens', response404, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' } });
+  await mockApiResponse('address_nfts', tokensMock.nfts, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: [] } });
+  await mockApiResponse('address_collections', tokensMock.collections, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: [] } });
 });
 
-test('erc20 +@dark-mode', async({ mount }) => {
+test('erc20 +@dark-mode', async({ render }) => {
   const hooksConfig = {
     router: {
       query: { hash: ADDRESS_HASH, tab: 'tokens_erc20' },
@@ -75,18 +56,17 @@ test('erc20 +@dark-mode', async({ mount }) => {
     },
   };
 
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <AddressTokens/>
-    </TestApp>,
+    </Box>,
     { hooksConfig },
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('collections +@dark-mode', async({ mount }) => {
+test('collections +@dark-mode', async({ render }) => {
   const hooksConfig = {
     router: {
       query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },
@@ -94,18 +74,19 @@ test('collections +@dark-mode', async({ mount }) => {
     },
   };
 
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <AddressTokens/>
-    </TestApp>,
+    </Box>,
     { hooksConfig },
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('nfts +@dark-mode', async({ mount }) => {
+test('nfts +@dark-mode', async({ render, mockAssetResponse }) => {
+  await mockAssetResponse(tokenInstance.base.image_url as string, './playwright/mocks/image_s.jpg');
+
   const hooksConfig = {
     router: {
       query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },
@@ -113,11 +94,10 @@ test('nfts +@dark-mode', async({ mount }) => {
     },
   };
 
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <AddressTokens/>
-    </TestApp>,
+    </Box>,
     { hooksConfig },
   );
 
@@ -129,7 +109,7 @@ test('nfts +@dark-mode', async({ mount }) => {
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  test('erc20', async({ mount }) => {
+  test('erc20', async({ render }) => {
     const hooksConfig = {
       router: {
         query: { hash: ADDRESS_HASH, tab: 'tokens_erc20' },
@@ -137,18 +117,19 @@ test.describe('mobile', () => {
       },
     };
 
-    const component = await mount(
-      <TestApp>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    const component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokens/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
     );
 
     await expect(component).toHaveScreenshot();
   });
 
-  test('nfts', async({ mount }) => {
+  test('nfts', async({ render, mockAssetResponse }) => {
+    await mockAssetResponse(tokenInstance.base.image_url as string, './playwright/mocks/image_s.jpg');
+
     const hooksConfig = {
       router: {
         query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },
@@ -156,11 +137,10 @@ test.describe('mobile', () => {
       },
     };
 
-    const component = await mount(
-      <TestApp>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    const component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokens/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
     );
 
@@ -169,7 +149,7 @@ test.describe('mobile', () => {
     await expect(component).toHaveScreenshot();
   });
 
-  test('collections', async({ mount }) => {
+  test('collections', async({ render }) => {
     const hooksConfig = {
       router: {
         query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },
@@ -177,11 +157,10 @@ test.describe('mobile', () => {
       },
     };
 
-    const component = await mount(
-      <TestApp>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    const component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokens/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
     );
 
@@ -189,13 +168,10 @@ test.describe('mobile', () => {
   });
 });
 
-base.describe('update balances via socket', () => {
-  const test = base.extend<socketServer.SocketServerFixture>({
-    createSocket: socketServer.createSocket,
-  });
+test.describe('update balances via socket', () => {
   test.describe.configure({ mode: 'serial' });
 
-  test('', async({ mount, page, createSocket }) => {
+  test('base flow', async({ render, page, createSocket, mockApiResponse }) => {
     test.slow();
 
     const hooksConfig = {
@@ -217,37 +193,28 @@ base.describe('update balances via socket', () => {
       items: [ tokensMock.erc1155a ],
       next_page_params: null,
     };
+    const response404 = {
+      items: [ tokensMock.erc404a ],
+      next_page_params: null,
+    };
 
-    await page.route(API_URL_ADDRESS, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(addressMock.validator),
-    }));
-    await page.route(API_URL_TOKENS + '?type=ERC-20', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(response20),
-    }));
-    await page.route(API_URL_TOKENS + '?type=ERC-721', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(response721),
-    }));
-    await page.route(API_URL_TOKENS + '?type=ERC-1155', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(response1155),
-    }));
-
-    const component = await mount(
-      <TestApp withSocket>
-        <Box>
-          <Box h={{ base: '134px', lg: 6 }}/>
-          <AddressTokens/>
-        </Box>
-      </TestApp>,
+    const erc20ApiUrl = await mockApiResponse('address_tokens', response20, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-20' } });
+    const erc721ApiUrl = await mockApiResponse('address_tokens', response721, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-721' } });
+    const erc1155ApiUrl = await mockApiResponse('address_tokens', response1155, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-1155' } });
+    const erc404ApiUrl = await mockApiResponse('address_tokens', response404, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' } });
+
+    const component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
+        <AddressTokens/>
+      </Box>,
       { hooksConfig },
+      { withSocket: true },
     );
 
-    await page.waitForResponse(API_URL_TOKENS + '?type=ERC-20');
-    await page.waitForResponse(API_URL_TOKENS + '?type=ERC-721');
-    await page.waitForResponse(API_URL_TOKENS + '?type=ERC-1155');
+    await page.waitForResponse(erc20ApiUrl);
+    await page.waitForResponse(erc721ApiUrl);
+    await page.waitForResponse(erc1155ApiUrl);
+    await page.waitForResponse(erc404ApiUrl);
 
     await expect(component).toHaveScreenshot();
 
diff --git a/ui/address/AddressTokens.tsx b/ui/address/AddressTokens.tsx
index 0e27a73f7d..511c6c0079 100644
--- a/ui/address/AddressTokens.tsx
+++ b/ui/address/AddressTokens.tsx
@@ -5,10 +5,12 @@ import React from 'react';
 import type { NFTTokenType } from 'types/api/token';
 import type { PaginationParams } from 'ui/shared/pagination/types';
 
+import config from 'configs/app';
 import { useAppContext } from 'lib/contexts/app';
 import * as cookies from 'lib/cookies';
 import getFilterValuesFromQuery from 'lib/getFilterValuesFromQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import useIsMounted from 'lib/hooks/useIsMounted';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
 import { ADDRESS_TOKEN_BALANCE_ERC_20, ADDRESS_NFT_1155, ADDRESS_COLLECTION } from 'stubs/address';
@@ -28,7 +30,8 @@ import TokenBalances from './tokens/TokenBalances';
 type TNftDisplayType = 'collection' | 'list';
 
 const TAB_LIST_PROPS = {
-  my: 3,
+  mt: 1,
+  mb: { base: 6, lg: 1 },
   py: 5,
   columnGap: 3,
 };
@@ -40,9 +43,15 @@ const TAB_LIST_PROPS_MOBILE = {
 
 const getTokenFilterValue = (getFilterValuesFromQuery<NFTTokenType>).bind(null, NFT_TOKEN_TYPE_IDS);
 
-const AddressTokens = () => {
+type Props = {
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
+};
+
+const AddressTokens = ({ shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
   const isMobile = useIsMobile();
+  const isMounted = useIsMounted();
 
   const scrollRef = React.useRef<HTMLDivElement>(null);
 
@@ -59,7 +68,7 @@ const AddressTokens = () => {
     filters: { type: 'ERC-20' },
     scrollRef,
     options: {
-      enabled: !tab || tab === 'tokens_erc20',
+      enabled: isQueryEnabled && (!tab || tab === 'tokens' || tab === 'tokens_erc20'),
       refetchOnMount: false,
       placeholderData: generateListStub<'address_tokens'>(ADDRESS_TOKEN_BALANCE_ERC_20, 10, { next_page_params: null }),
     },
@@ -70,7 +79,7 @@ const AddressTokens = () => {
     pathParams: { hash },
     scrollRef,
     options: {
-      enabled: tab === 'tokens_nfts' && nftDisplayType === 'collection',
+      enabled: isQueryEnabled && tab === 'tokens_nfts' && nftDisplayType === 'collection',
       placeholderData: generateListStub<'address_collections'>(ADDRESS_COLLECTION, 10, { next_page_params: null }),
     },
     filters: { type: tokenTypes },
@@ -81,7 +90,7 @@ const AddressTokens = () => {
     pathParams: { hash },
     scrollRef,
     options: {
-      enabled: tab === 'tokens_nfts' && nftDisplayType === 'list',
+      enabled: isQueryEnabled && tab === 'tokens_nfts' && nftDisplayType === 'list',
       placeholderData: generateListStub<'address_nfts'>(ADDRESS_NFT_1155, 10, { next_page_params: null }),
     },
     filters: { type: tokenTypes },
@@ -98,8 +107,12 @@ const AddressTokens = () => {
     setTokenTypes(value);
   }, [ nftsQuery, collectionsQuery ]);
 
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
   const nftTypeFilter = (
-    <PopoverFilter isActive={ tokenTypes && tokenTypes.length > 0 } contentProps={{ w: '200px' }} appliedFiltersNum={ tokenTypes?.length }>
+    <PopoverFilter contentProps={{ w: '200px' }} appliedFiltersNum={ tokenTypes?.length }>
       <TokenTypeFilter<NFTTokenType> nftOnly onChange={ handleTokenTypesChange } defaultValue={ tokenTypes }/>
     </PopoverFilter>
   );
@@ -107,7 +120,7 @@ const AddressTokens = () => {
   const hasActiveFilters = Boolean(tokenTypes?.length);
 
   const tabs = [
-    { id: 'tokens_erc20', title: 'ERC-20', component: <ERC20Tokens tokensQuery={ erc20Query }/> },
+    { id: 'tokens_erc20', title: `${ config.chain.tokenStandard }-20`, component: <ERC20Tokens tokensQuery={ erc20Query }/> },
     {
       id: 'tokens_nfts',
       title: 'NFTs',
diff --git a/ui/address/AddressTxs.pw.tsx b/ui/address/AddressTxs.pw.tsx
index b226debc32..2f41a65ff7 100644
--- a/ui/address/AddressTxs.pw.tsx
+++ b/ui/address/AddressTxs.pw.tsx
@@ -1,84 +1,78 @@
 import { Box } from '@chakra-ui/react';
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import type { Locator } from '@playwright/test';
 import React from 'react';
 
 import * as txMock from 'mocks/txs/tx';
 import * as socketServer from 'playwright/fixtures/socketServer';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import AddressTxs from './AddressTxs';
 
 const CURRENT_ADDRESS = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859';
 
-const API_URL = buildApiUrl('address_txs', { hash: CURRENT_ADDRESS });
-
 const hooksConfig = {
   router: {
     query: { hash: CURRENT_ADDRESS },
   },
 };
+const DEFAULT_PAGINATION = { block_number: 1, index: 1, items_count: 1 };
 
-base.describe('base view', () => {
+test.describe('base view', () => {
   let component: Locator;
 
-  base.beforeEach(async({ page, mount }) => {
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [
-        txMock.base,
-        {
-          ...txMock.base,
-          hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3194',
-        },
-      ], next_page_params: { block: 1 } }),
-    }));
-
-    component = await mount(
-      <TestApp>
-        <Box h={{ base: '134px', lg: 6 }}/>
+  test.beforeEach(async({ render, mockApiResponse }) => {
+    await mockApiResponse(
+      'address_txs',
+      {
+        items: [
+          txMock.base,
+          { ...txMock.base, hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3194' },
+        ],
+        next_page_params: DEFAULT_PAGINATION,
+      },
+      { pathParams: { hash: CURRENT_ADDRESS } },
+    );
+    component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTxs/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
     );
   });
 
-  base('+@mobile', async() => {
+  test('+@mobile', async() => {
     await expect(component).toHaveScreenshot();
   });
 
-  base.describe('screen xl', () => {
-    base.use({ viewport: configs.viewport.xl });
+  test.describe('screen xl', () => {
+    test.use({ viewport: pwConfig.viewport.xl });
 
-    base('', async() => {
-      base.slow();
+    test('base view', async() => {
+      test.slow();
       await expect(component).toHaveScreenshot();
     });
   });
 });
 
-base.describe('socket', () => {
-  const test = base.extend<socketServer.SocketServerFixture>({
-    createSocket: socketServer.createSocket,
-  });
+test.describe('socket', () => {
   // FIXME
   // test cases which use socket cannot run in parallel since the socket server always run on the same port
   test.describe.configure({ mode: 'serial' });
 
-  test('without overload', async({ mount, page, createSocket }) => {
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ txMock.base ], next_page_params: { block: 1 } }),
-    }));
+  test('without overload', async({ render, mockApiResponse, page, createSocket }) => {
+    await mockApiResponse(
+      'address_txs',
+      { items: [ txMock.base ], next_page_params: DEFAULT_PAGINATION },
+      { pathParams: { hash: CURRENT_ADDRESS } },
+    );
 
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTxs/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -89,24 +83,26 @@ base.describe('socket', () => {
 
     socketServer.sendMessage(socket, channel, 'transaction', { transactions: [ txMock.base2, txMock.base4 ] });
 
-    await page.waitForSelector('tbody tr:nth-child(3)');
+    const thirdRow = page.locator('tbody tr:nth-child(3)');
+    await thirdRow.waitFor();
 
     const itemsCountNew = await page.locator('tbody tr').count();
     expect(itemsCountNew).toBe(4);
   });
 
-  test('with update', async({ mount, page, createSocket }) => {
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ txMock.pending ], next_page_params: { block: 1 } }),
-    }));
+  test('with update', async({ render, mockApiResponse, page, createSocket }) => {
+    await mockApiResponse(
+      'address_txs',
+      { items: [ txMock.pending ], next_page_params: DEFAULT_PAGINATION },
+      { pathParams: { hash: CURRENT_ADDRESS } },
+    );
 
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTxs/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -117,24 +113,26 @@ base.describe('socket', () => {
 
     socketServer.sendMessage(socket, channel, 'transaction', { transactions: [ txMock.base, txMock.base2 ] });
 
-    await page.waitForSelector('tbody tr:nth-child(3)');
+    const thirdRow = page.locator('tbody tr:nth-child(3)');
+    await thirdRow.waitFor();
 
     const itemsCountNew = await page.locator('tbody tr').count();
     expect(itemsCountNew).toBe(3);
   });
 
-  test('with overload', async({ mount, page, createSocket }) => {
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ txMock.base ], next_page_params: { block: 1 } }),
-    }));
+  test('with overload', async({ render, mockApiResponse, page, createSocket }) => {
+    await mockApiResponse(
+      'address_txs',
+      { items: [ txMock.base ], next_page_params: DEFAULT_PAGINATION },
+      { pathParams: { hash: CURRENT_ADDRESS } },
+    );
 
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTxs overloadCount={ 2 }/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -145,7 +143,8 @@ base.describe('socket', () => {
 
     socketServer.sendMessage(socket, channel, 'transaction', { transactions: [ txMock.base2, txMock.base3, txMock.base4 ] });
 
-    await page.waitForSelector('tbody tr:nth-child(3)');
+    const thirdRow = page.locator('tbody tr:nth-child(3)');
+    await thirdRow.waitFor();
 
     const itemsCountNew = await page.locator('tbody tr').count();
     expect(itemsCountNew).toBe(3);
@@ -154,26 +153,25 @@ base.describe('socket', () => {
     expect(counter?.startsWith('2 ')).toBe(true);
   });
 
-  test('without overload, with filters', async({ mount, page, createSocket }) => {
+  test('without overload, with filters', async({ render, mockApiResponse, page, createSocket }) => {
     const hooksConfigWithFilter = {
       router: {
         query: { hash: CURRENT_ADDRESS, filter: 'from' },
       },
     };
 
-    const API_URL_WITH_FILTER = buildApiUrl('address_txs', { hash: CURRENT_ADDRESS }) + '?filter=from';
-
-    await page.route(API_URL_WITH_FILTER, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ txMock.base ], next_page_params: { block: 1 } }),
-    }));
+    await mockApiResponse(
+      'address_txs',
+      { items: [ txMock.base ], next_page_params: DEFAULT_PAGINATION },
+      { pathParams: { hash: CURRENT_ADDRESS }, queryParams: { filter: 'from' } },
+    );
 
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTxs/>
-      </TestApp>,
+      </Box>,
       { hooksConfig: hooksConfigWithFilter },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -184,32 +182,32 @@ base.describe('socket', () => {
 
     socketServer.sendMessage(socket, channel, 'transaction', { transactions: [ txMock.base2, txMock.base4 ] });
 
-    await page.waitForSelector('tbody tr:nth-child(3)');
+    const thirdRow = page.locator('tbody tr:nth-child(3)');
+    await thirdRow.waitFor();
 
     const itemsCountNew = await page.locator('tbody tr').count();
     expect(itemsCountNew).toBe(3);
   });
 
-  test('with overload, with filters', async({ mount, page, createSocket }) => {
+  test('with overload, with filters', async({ render, mockApiResponse, page, createSocket }) => {
     const hooksConfigWithFilter = {
       router: {
         query: { hash: CURRENT_ADDRESS, filter: 'from' },
       },
     };
 
-    const API_URL_WITH_FILTER = buildApiUrl('address_txs', { hash: CURRENT_ADDRESS }) + '?filter=from';
-
-    await page.route(API_URL_WITH_FILTER, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ txMock.base ], next_page_params: { block: 1 } }),
-    }));
+    await mockApiResponse(
+      'address_txs',
+      { items: [ txMock.base ], next_page_params: DEFAULT_PAGINATION },
+      { pathParams: { hash: CURRENT_ADDRESS }, queryParams: { filter: 'from' } },
+    );
 
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTxs overloadCount={ 2 }/>
-      </TestApp>,
+      </Box>,
       { hooksConfig: hooksConfigWithFilter },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -220,7 +218,8 @@ base.describe('socket', () => {
 
     socketServer.sendMessage(socket, channel, 'transaction', { transactions: [ txMock.base2, txMock.base3, txMock.base4 ] });
 
-    await page.waitForSelector('tbody tr:nth-child(3)');
+    const thirdRow = page.locator('tbody tr:nth-child(3)');
+    await thirdRow.waitFor();
 
     const itemsCountNew = await page.locator('tbody tr').count();
     expect(itemsCountNew).toBe(3);
diff --git a/ui/address/AddressTxs.tsx b/ui/address/AddressTxs.tsx
index cc21c355df..4df86bd5b7 100644
--- a/ui/address/AddressTxs.tsx
+++ b/ui/address/AddressTxs.tsx
@@ -10,16 +10,18 @@ import type { Transaction, TransactionsSortingField, TransactionsSortingValue, T
 import { getResourceKey } from 'lib/api/useApiQuery';
 import getFilterValueFromQuery from 'lib/getFilterValueFromQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import useIsMounted from 'lib/hooks/useIsMounted';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import { TX } from 'stubs/tx';
 import { generateListStub } from 'stubs/utils';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import getSortParamsFromValue from 'ui/shared/sort/getSortParamsFromValue';
 import getSortValueFromQuery from 'ui/shared/sort/getSortValueFromQuery';
+import { sortTxsFromSocket } from 'ui/txs/sortTxs';
 import TxsWithAPISorting from 'ui/txs/TxsWithAPISorting';
 import { SORT_OPTIONS } from 'ui/txs/useTxsSort';
 
@@ -46,13 +48,16 @@ const matchFilter = (filterValue: AddressFromToFilter, transaction: Transaction,
 
 type Props = {
   scrollRef?: React.RefObject<HTMLDivElement>;
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
   // for tests only
   overloadCount?: number;
-}
+};
 
-const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Props) => {
+const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
   const queryClient = useQueryClient();
+  const isMounted = useIsMounted();
 
   const [ socketAlert, setSocketAlert ] = React.useState('');
   const [ newItemsCount, setNewItemsCount ] = React.useState(0);
@@ -70,6 +75,7 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Props) => {
     sorting: getSortParamsFromValue<TransactionsSortingValue, TransactionsSortingField, TransactionsSorting['order']>(sort),
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_txs'>(TX, 50, { next_page_params: {
         block_number: 9005713,
         index: 5,
@@ -85,7 +91,7 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Props) => {
     addressTxsQuery.onFilterChange({ filter: newVal });
   }, [ addressTxsQuery ]);
 
-  const handleNewSocketMessage: SocketMessage.AddressTxs['handler'] = (payload) => {
+  const handleNewSocketMessage: SocketMessage.AddressTxs['handler'] = React.useCallback((payload) => {
     setSocketAlert('');
 
     queryClient.setQueryData(
@@ -123,10 +129,10 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Props) => {
           items: [
             ...newItems,
             ...prevData.items,
-          ],
+          ].sort(sortTxsFromSocket(sort)),
         };
       });
-  };
+  }, [ currentAddress, filterValue, overloadCount, queryClient, sort ]);
 
   const handleSocketClose = React.useCallback(() => {
     setSocketAlert('Connection is lost. Please refresh the page to load new transactions.');
@@ -155,11 +161,15 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Props) => {
     handler: handleNewSocketMessage,
   });
 
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
   const filter = (
     <AddressTxsFilter
       defaultFilter={ filterValue }
       onFilterChange={ handleFilterChange }
-      isActive={ Boolean(filterValue) }
+      hasActiveFilter={ Boolean(filterValue) }
       isLoading={ addressTxsQuery.pagination.isLoading }
     />
   );
@@ -191,7 +201,7 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Props) => {
         showSocketInfo={ addressTxsQuery.pagination.page === 1 }
         socketInfoAlert={ socketAlert }
         socketInfoNum={ newItemsCount }
-        top={ 80 }
+        top={ ACTION_BAR_HEIGHT_DESKTOP }
         sorting={ sort }
         setSort={ setSort }
       />
diff --git a/ui/address/AddressTxsFilter.tsx b/ui/address/AddressTxsFilter.tsx
index c566f1d91e..d3bdbd61fe 100644
--- a/ui/address/AddressTxsFilter.tsx
+++ b/ui/address/AddressTxsFilter.tsx
@@ -1,48 +1,35 @@
-import {
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuOptionGroup,
-  MenuItemOption,
-  useDisclosure,
-} from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressFromToFilter } from 'types/api/address';
 
 import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
-import FilterButton from 'ui/shared/filters/FilterButton';
+import PopoverFilterRadio from 'ui/shared/filters/PopoverFilterRadio';
+
+const OPTIONS = [
+  { value: 'all', label: 'All' },
+  { value: 'from', label: 'Outgoing transactions' },
+  { value: 'to', label: 'Incoming transactions' },
+];
 
 interface Props {
-  isActive: boolean;
+  hasActiveFilter: boolean;
   defaultFilter: AddressFromToFilter;
   onFilterChange: (nextValue: string | Array<string>) => void;
   isLoading?: boolean;
 }
 
-const AddressTxsFilter = ({ onFilterChange, defaultFilter, isActive, isLoading }: Props) => {
-  const { isOpen, onToggle } = useDisclosure();
+const AddressTxsFilter = ({ onFilterChange, defaultFilter, hasActiveFilter, isLoading }: Props) => {
   const isInitialLoading = useIsInitialLoading(isLoading);
 
   return (
-    <Menu>
-      <MenuButton>
-        <FilterButton
-          isActive={ isOpen || isActive }
-          isLoading={ isInitialLoading }
-          onClick={ onToggle }
-          appliedFiltersNum={ isActive ? 1 : 0 }
-          as="div"
-        />
-      </MenuButton>
-      <MenuList zIndex={ 2 }>
-        <MenuOptionGroup defaultValue={ defaultFilter || 'all' } title="Address" type="radio" onChange={ onFilterChange }>
-          <MenuItemOption value="all">All</MenuItemOption>
-          <MenuItemOption value="from">Outgoing transactions</MenuItemOption>
-          <MenuItemOption value="to">Incoming transactions</MenuItemOption>
-        </MenuOptionGroup>
-      </MenuList>
-    </Menu>
+    <PopoverFilterRadio
+      name="txs_filter"
+      options={ OPTIONS }
+      onChange={ onFilterChange }
+      hasActiveFilter={ hasActiveFilter }
+      isLoading={ isInitialLoading }
+      defaultValue={ defaultFilter || OPTIONS[0].value }
+    />
   );
 };
 
diff --git a/ui/address/AddressUserOps.tsx b/ui/address/AddressUserOps.tsx
index 7c93c83b47..cc78576893 100644
--- a/ui/address/AddressUserOps.tsx
+++ b/ui/address/AddressUserOps.tsx
@@ -1,6 +1,7 @@
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import useIsMounted from 'lib/hooks/useIsMounted';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { USER_OPS_ITEM } from 'stubs/userOps';
 import { generateListStub } from 'stubs/utils';
@@ -9,10 +10,13 @@ import UserOpsContent from 'ui/userOps/UserOpsContent';
 
 type Props = {
   scrollRef?: React.RefObject<HTMLDivElement>;
-}
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
+};
 
-const AddressUserOps = ({ scrollRef }: Props) => {
+const AddressUserOps = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
+  const isMounted = useIsMounted();
 
   const hash = getQueryParamString(router.query.hash);
 
@@ -20,7 +24,7 @@ const AddressUserOps = ({ scrollRef }: Props) => {
     resourceName: 'user_ops',
     scrollRef,
     options: {
-      enabled: Boolean(hash),
+      enabled: isQueryEnabled && Boolean(hash),
       placeholderData: generateListStub<'user_ops'>(USER_OPS_ITEM, 50, { next_page_params: {
         page_token: '10355938,0x5956a847d8089e254e02e5111cad6992b99ceb9e5c2dc4343fd53002834c4dc6',
         page_size: 50,
@@ -29,6 +33,10 @@ const AddressUserOps = ({ scrollRef }: Props) => {
     filters: { sender: hash },
   });
 
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
   return <UserOpsContent query={ userOpsQuery } showSender={ false }/>;
 };
 
diff --git a/ui/address/AddressWithdrawals.tsx b/ui/address/AddressWithdrawals.tsx
index 5deaedc52d..414a016a25 100644
--- a/ui/address/AddressWithdrawals.tsx
+++ b/ui/address/AddressWithdrawals.tsx
@@ -2,18 +2,25 @@ import { Show, Hide } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import useIsMounted from 'lib/hooks/useIsMounted';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { generateListStub } from 'stubs/utils';
 import { WITHDRAWAL } from 'stubs/withdrawals';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
-import WithdrawalsListItem from 'ui/withdrawals/WithdrawalsListItem';
-import WithdrawalsTable from 'ui/withdrawals/WithdrawalsTable';
+import BeaconChainWithdrawalsListItem from 'ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem';
+import BeaconChainWithdrawalsTable from 'ui/withdrawals/beaconChain/BeaconChainWithdrawalsTable';
 
-const AddressWithdrawals = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>}) => {
+type Props = {
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
+};
+const AddressWithdrawals = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
+  const isMounted = useIsMounted();
 
   const hash = getQueryParamString(router.query.hash);
 
@@ -22,17 +29,23 @@ const AddressWithdrawals = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
     pathParams: { hash },
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_withdrawals'>(WITHDRAWAL, 50, { next_page_params: {
         index: 5,
         items_count: 50,
       } }),
     },
   });
+
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
   const content = data?.items ? (
     <>
       <Show below="lg" ssr={ false }>
         { data.items.map((item, index) => (
-          <WithdrawalsListItem
+          <BeaconChainWithdrawalsListItem
             key={ item.index + Number(isPlaceholderData ? index : '') }
             item={ item }
             view="address"
@@ -41,7 +54,12 @@ const AddressWithdrawals = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
         )) }
       </Show>
       <Hide below="lg" ssr={ false }>
-        <WithdrawalsTable items={ data.items } view="address" top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <BeaconChainWithdrawalsTable
+          items={ data.items }
+          view="address"
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+          isLoading={ isPlaceholderData }
+        />
       </Hide>
     </>
   ) : null ;
diff --git a/ui/address/SolidityscanReport.pw.tsx b/ui/address/SolidityscanReport.pw.tsx
index fd41c7a860..ba41a98511 100644
--- a/ui/address/SolidityscanReport.pw.tsx
+++ b/ui/address/SolidityscanReport.pw.tsx
@@ -1,27 +1,19 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as solidityscanReportMock from 'mocks/contract/solidityscanReport';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import SolidityscanReport from './SolidityscanReport';
 
 const addressHash = 'hash';
-const REPORT_API_URL = buildApiUrl('contract_solidityscan_report', { hash: addressHash });
-
-test('average report +@dark-mode +@mobile', async({ mount, page }) => {
-  await page.route(REPORT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(solidityscanReportMock.solidityscanReportAverage),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <SolidityscanReport hash={ addressHash }/>
-    </TestApp>,
-  );
 
+test('average report +@dark-mode +@mobile', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse(
+    'contract_solidity_scan_report',
+    solidityscanReportMock.solidityscanReportAverage,
+    { pathParams: { hash: addressHash } },
+  );
+  const component = await render(<SolidityscanReport hash={ addressHash }/>);
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 100, height: 50 } });
 
   await component.getByLabel('SolidityScan score').click();
@@ -29,16 +21,15 @@ test('average report +@dark-mode +@mobile', async({ mount, page }) => {
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 500 } });
 });
 
-test('great report', async({ mount, page }) => {
-  await page.route(REPORT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(solidityscanReportMock.solidityscanReportGreat),
-  }));
+test('great report', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse(
+    'contract_solidity_scan_report',
+    solidityscanReportMock.solidityscanReportGreat,
+    { pathParams: { hash: addressHash } },
+  );
 
-  const component = await mount(
-    <TestApp>
-      <SolidityscanReport hash={ addressHash }/>
-    </TestApp>,
+  const component = await render(
+    <SolidityscanReport hash={ addressHash }/>,
   );
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 100, height: 50 } });
@@ -48,16 +39,15 @@ test('great report', async({ mount, page }) => {
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 500 } });
 });
 
-test('low report', async({ mount, page }) => {
-  await page.route(REPORT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(solidityscanReportMock.solidityscanReportLow),
-  }));
+test('low report', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse(
+    'contract_solidity_scan_report',
+    solidityscanReportMock.solidityscanReportLow,
+    { pathParams: { hash: addressHash } },
+  );
 
-  const component = await mount(
-    <TestApp>
-      <SolidityscanReport hash={ addressHash }/>
-    </TestApp>,
+  const component = await render(
+    <SolidityscanReport hash={ addressHash }/>,
   );
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 100, height: 50 } });
diff --git a/ui/address/SolidityscanReport.tsx b/ui/address/SolidityscanReport.tsx
index d7bbdc9ca2..a704c53a1a 100644
--- a/ui/address/SolidityscanReport.tsx
+++ b/ui/address/SolidityscanReport.tsx
@@ -1,175 +1,69 @@
-import {
-  Box,
-  Flex,
-  Text,
-  Grid,
-  Button,
-  chakra,
-  Popover,
-  PopoverTrigger,
-  PopoverBody,
-  PopoverContent,
-  useDisclosure,
-  Skeleton,
-  Center,
-  useColorModeValue,
-} from '@chakra-ui/react';
+import { Box, Text, Icon, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 
-import { SolidityscanReport } from 'types/api/contract';
-
-import useApiQuery from 'lib/api/useApiQuery';
-import { SOLIDITYSCAN_REPORT } from 'stubs/contract';
-import IconSvg from 'ui/shared/IconSvg';
-import LinkExternal from 'ui/shared/LinkExternal';
-
-type DistributionItem = {
-  id: keyof SolidityscanReport['scan_report']['scan_summary']['issue_severity_distribution'];
-  name: string;
-  color: string;
-}
-
-const DISTRIBUTION_ITEMS: Array<DistributionItem> = [
-  { id: 'critical', name: 'Critical', color: '#891F11' },
-  { id: 'high', name: 'High', color: '#EC672C' },
-  { id: 'medium', name: 'Medium', color: '#FBE74D' },
-  { id: 'low', name: 'Low', color: '#68C88E' },
-  { id: 'informational', name: 'Informational', color: '#A3AEBE' },
-  { id: 'gas', name: 'Gas', color: '#A47585' },
-];
+// This icon doesn't work properly when it is in the sprite
+// Probably because of the gradient
+// eslint-disable-next-line no-restricted-imports
+import solidityScanIcon from 'icons/brands/solidity_scan.svg';
+import useFetchReport from 'lib/solidityScan/useFetchReport';
+import Popover from 'ui/shared/chakra/Popover';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import SolidityscanReportButton from 'ui/shared/solidityscanReport/SolidityscanReportButton';
+import SolidityscanReportDetails from 'ui/shared/solidityscanReport/SolidityscanReportDetails';
+import SolidityscanReportScore from 'ui/shared/solidityscanReport/SolidityscanReportScore';
 
 interface Props {
-  className?: string;
   hash: string;
 }
 
-type ItemProps = {
-  item: DistributionItem;
-  vulnerabilities: SolidityscanReport['scan_report']['scan_summary']['issue_severity_distribution'];
-  vulnerabilitiesCount: number;
-}
-
-const SolidityScanReportItem = ({ item, vulnerabilities, vulnerabilitiesCount }: ItemProps) => {
-  const bgBar = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
-  const yetAnotherGrayColor = useColorModeValue('gray.400', 'gray.500');
-
-  return (
-    <>
-      <Box w={ 3 } h={ 3 } bg={ item.color } borderRadius="6px" mr={ 2 }></Box>
-      <Flex justifyContent="space-between" mr={ 3 }>
-        <Text>{ item.name }</Text>
-        <Text color={ vulnerabilities[item.id] > 0 ? 'text' : yetAnotherGrayColor }>{ vulnerabilities[item.id] }</Text>
-      </Flex>
-      <Box bg={ bgBar } h="10px" borderRadius="8px">
-        <Box bg={ item.color } w={ vulnerabilities[item.id] / vulnerabilitiesCount } h="10px" borderRadius="8px"/>
-      </Box>
-    </>
-  );
-};
-
-const SolidityscanReport = ({ className, hash }: Props) => {
+const SolidityscanReport = ({ hash }: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
 
-  const { data, isPlaceholderData, isError } = useApiQuery('contract_solidityscan_report', {
-    pathParams: { hash },
-    queryOptions: {
-      enabled: Boolean(hash),
-      placeholderData: SOLIDITYSCAN_REPORT,
-    },
-  });
-
-  const score = Number(data?.scan_report.scan_summary.score_v2);
-
-  const chartGrayColor = useColorModeValue('gray.100', 'gray.700');
-  const yetAnotherGrayColor = useColorModeValue('gray.400', 'gray.500');
-  const popoverBgColor = useColorModeValue('white', 'gray.900');
-
-  const greatScoreColor = useColorModeValue('green.600', 'green.400');
-  const averageScoreColor = useColorModeValue('purple.600', 'purple.400');
-  const lowScoreColor = useColorModeValue('red.600', 'red.400');
+  const { data, isPlaceholderData, isError } = useFetchReport({ hash });
 
-  if (isError || !score) {
+  if (isError || !data) {
     return null;
   }
 
-  let scoreColor;
-  let scoreLevel;
-  if (score >= 80) {
-    scoreColor = greatScoreColor;
-    scoreLevel = 'GREAT';
-  } else if (score >= 30) {
-    scoreColor = averageScoreColor;
-    scoreLevel = 'AVERAGE';
-  } else {
-    scoreColor = lowScoreColor;
-    scoreLevel = 'LOW';
+  const score = Number(data.scan_report.scan_summary.score_v2);
+
+  if (!score) {
+    return null;
   }
 
-  const vulnerabilities = data?.scan_report.scan_summary.issue_severity_distribution;
+  const vulnerabilities = data.scan_report.scan_summary.issue_severity_distribution;
   const vulnerabilitiesCounts = vulnerabilities ? Object.values(vulnerabilities) : [];
   const vulnerabilitiesCount = vulnerabilitiesCounts.reduce((acc, val) => acc + val, 0);
 
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
       <PopoverTrigger>
-        <Skeleton isLoaded={ !isPlaceholderData } borderRadius="base">
-          <Button
-            className={ className }
-            color={ scoreColor }
-            size="sm"
-            variant="outline"
-            colorScheme="gray"
-            onClick={ onToggle }
-            aria-label="SolidityScan score"
-            fontWeight={ 500 }
-            px="6px"
-            h="32px"
-            flexShrink={ 0 }
-          >
-            <IconSvg name={ score < 80 ? 'score/score-not-ok' : 'score/score-ok' } boxSize={ 5 } mr={ 1 }/>
-            { score }
-          </Button>
-        </Skeleton>
+        <SolidityscanReportButton
+          score={ score }
+          isLoading={ isPlaceholderData }
+          onClick={ onToggle }
+          isActive={ isOpen }
+        />
       </PopoverTrigger>
       <PopoverContent w={{ base: '100vw', lg: '328px' }}>
         <PopoverBody px="26px" py="20px" fontSize="sm">
-          <Box mb={ 5 }>Contract analyzed for 140+ vulnerability patterns by SolidityScan</Box>
-          <Flex alignItems="center" mb={ 5 }>
-            <Box
-              w={ 12 }
-              h={ 12 }
-              bgGradient={ `conic-gradient(${ scoreColor } 0, ${ scoreColor } ${ score }%, ${ chartGrayColor } 0, ${ chartGrayColor } 100%)` }
-              borderRadius="24px"
-              position="relative"
-              mr={ 3 }
-            >
-              <Center position="absolute" w="38px" h="38px" top="5px" right="5px" bg={ popoverBgColor } borderRadius="20px">
-                <IconSvg name={ score < 80 ? 'score/score-not-ok' : 'score/score-ok' } boxSize={ 5 } color={ scoreColor }/>
-              </Center>
-            </Box>
-            <Box>
-              <Flex>
-                <Text color={ scoreColor } fontSize="lg" fontWeight={ 500 }>{ score }</Text>
-                <Text color={ yetAnotherGrayColor } fontSize="lg" fontWeight={ 500 } whiteSpace="pre"> / 100</Text>
-              </Flex>
-              <Text color={ scoreColor } fontWeight={ 500 }>Security score is { scoreLevel }</Text>
-            </Box>
-          </Flex>
+          <Box mb={ 5 } lineHeight="25px">
+            Contract analyzed for 240+ vulnerability patterns by
+            <Icon as={ solidityScanIcon } mr={ 1 } ml="6px" w="23px" h="20px" display="inline-block" verticalAlign="middle"/>
+            <Text fontWeight={ 600 } display="inline-block">SolidityScan</Text>
+          </Box>
+          <SolidityscanReportScore score={ score } mb={ 5 }/>
           { vulnerabilities && vulnerabilitiesCount > 0 && (
             <Box mb={ 5 }>
               <Text py="7px" variant="secondary" fontSize="xs" fontWeight={ 500 }>Vulnerabilities distribution</Text>
-              <Grid templateColumns="20px 1fr 100px" alignItems="center" rowGap={ 2 }>
-                { DISTRIBUTION_ITEMS.map(item => (
-                  <SolidityScanReportItem item={ item } key={ item.id } vulnerabilities={ vulnerabilities } vulnerabilitiesCount={ vulnerabilitiesCount }/>
-                )) }
-              </Grid>
+              <SolidityscanReportDetails vulnerabilities={ vulnerabilities } vulnerabilitiesCount={ vulnerabilitiesCount }/>
             </Box>
           ) }
-          <LinkExternal href={ data?.scan_report.scanner_reference_url }>View full report</LinkExternal>
+          <LinkExternal href={ data.scan_report.scanner_reference_url }>View full report</LinkExternal>
         </PopoverBody>
       </PopoverContent>
     </Popover>
   );
 };
 
-export default chakra(SolidityscanReport);
+export default React.memo(SolidityscanReport);
diff --git a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..b972103055
Binary files /dev/null and b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png
deleted file mode 100644
index c1213499a3..0000000000
Binary files a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png and /dev/null differ
diff --git a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-1.png b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..1795600ce8
Binary files /dev/null and b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-mobile-1.png b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-mobile-1.png
deleted file mode 100644
index 62261bac29..0000000000
Binary files a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-mobile-1.png and /dev/null differ
diff --git a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_mobile-base-view-1.png b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_mobile-base-view-1.png
new file mode 100644
index 0000000000..917cd0ce5b
Binary files /dev/null and b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_mobile_base-view-dark-mode-mobile-1.png b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_mobile_base-view-dark-mode-mobile-1.png
index c477a7b1a2..2b1559efce 100644
Binary files a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_mobile_base-view-dark-mode-mobile-1.png and b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_mobile_base-view-dark-mode-mobile-1.png differ
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_contract-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_contract-1.png
new file mode 100644
index 0000000000..d6c75b8200
Binary files /dev/null and b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_contract-1.png differ
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_contract-mobile-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_contract-mobile-1.png
deleted file mode 100644
index 532df5851c..0000000000
Binary files a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_contract-mobile-1.png and /dev/null differ
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_filecoin-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_filecoin-1.png
new file mode 100644
index 0000000000..703dbd2ed2
Binary files /dev/null and b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_filecoin-1.png differ
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-contract-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-contract-1.png
new file mode 100644
index 0000000000..7c160310cf
Binary files /dev/null and b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-contract-1.png differ
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-filecoin-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-filecoin-1.png
new file mode 100644
index 0000000000..6f79f2dd68
Binary files /dev/null and b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-filecoin-1.png differ
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-validator-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-validator-1.png
new file mode 100644
index 0000000000..fdc0888b51
Binary files /dev/null and b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-validator-1.png differ
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_token-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_token-1.png
deleted file mode 100644
index 28d70e3dfe..0000000000
Binary files a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_token-1.png and /dev/null differ
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_validator-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_validator-1.png
new file mode 100644
index 0000000000..8fe4dc6aac
Binary files /dev/null and b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_validator-1.png differ
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_validator-mobile-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_validator-mobile-1.png
deleted file mode 100644
index 4a98354191..0000000000
Binary files a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_validator-mobile-1.png and /dev/null differ
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_mobile_contract-mobile-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_mobile_contract-mobile-1.png
deleted file mode 100644
index 5f80ab8c8e..0000000000
Binary files a/ui/address/__screenshots__/AddressDetails.pw.tsx_mobile_contract-mobile-1.png and /dev/null differ
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_mobile_validator-mobile-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_mobile_validator-mobile-1.png
deleted file mode 100644
index 65a58209b3..0000000000
Binary files a/ui/address/__screenshots__/AddressDetails.pw.tsx_mobile_validator-mobile-1.png and /dev/null differ
diff --git a/ui/address/__screenshots__/AddressEpochRewards.pw.tsx_default_base-view-mobile-1.png b/ui/address/__screenshots__/AddressEpochRewards.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..a29982c419
Binary files /dev/null and b/ui/address/__screenshots__/AddressEpochRewards.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/address/__screenshots__/AddressEpochRewards.pw.tsx_mobile_base-view-mobile-1.png b/ui/address/__screenshots__/AddressEpochRewards.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..99d0b36bc9
Binary files /dev/null and b/ui/address/__screenshots__/AddressEpochRewards.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/address/__screenshots__/AddressInternalTxs.pw.tsx_default_base-view-mobile-1.png b/ui/address/__screenshots__/AddressInternalTxs.pw.tsx_default_base-view-mobile-1.png
index b724db94a6..0d64c97a27 100644
Binary files a/ui/address/__screenshots__/AddressInternalTxs.pw.tsx_default_base-view-mobile-1.png and b/ui/address/__screenshots__/AddressInternalTxs.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/address/__screenshots__/AddressInternalTxs.pw.tsx_mobile_base-view-mobile-1.png b/ui/address/__screenshots__/AddressInternalTxs.pw.tsx_mobile_base-view-mobile-1.png
index 7eaf7bc55a..ab937a3be6 100644
Binary files a/ui/address/__screenshots__/AddressInternalTxs.pw.tsx_mobile_base-view-mobile-1.png and b/ui/address/__screenshots__/AddressInternalTxs.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-no-pagination-1.png b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-no-pagination-1.png
index b843f9ec00..9c47d83b6a 100644
Binary files a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-no-pagination-1.png and b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-no-pagination-1.png differ
diff --git a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-pagination-1.png b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-pagination-1.png
index 7a87a936aa..ce20551d45 100644
Binary files a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-pagination-1.png and b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-pagination-1.png differ
diff --git a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-no-pagination-1.png b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-no-pagination-1.png
index 870534e4de..5387be0020 100644
Binary files a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-no-pagination-1.png and b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-no-pagination-1.png differ
diff --git a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-pagination-1.png b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-pagination-1.png
index 95c6b55d44..229ab9a91b 100644
Binary files a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-pagination-1.png and b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-pagination-1.png differ
diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_collections-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_collections-dark-mode-1.png
index 2cfbdaf3a7..63a64f592c 100644
Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_collections-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_collections-dark-mode-1.png differ
diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_erc20-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_erc20-dark-mode-1.png
index 988d310f09..3d27aa37c1 100644
Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_erc20-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_erc20-dark-mode-1.png differ
diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_nfts-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_nfts-dark-mode-1.png
index ff3f91748f..9aaaf6dfac 100644
Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_nfts-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_nfts-dark-mode-1.png differ
diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_collections-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_collections-dark-mode-1.png
index 185fa05a5c..ea5d4ec1cc 100644
Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_collections-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_collections-dark-mode-1.png differ
diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_erc20-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_erc20-dark-mode-1.png
index 5cb20256d2..55792ab34d 100644
Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_erc20-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_erc20-dark-mode-1.png differ
diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-collections-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-collections-1.png
index d2aacbe810..af1b440782 100644
Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-collections-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-collections-1.png differ
diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-erc20-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-erc20-1.png
index 9325e2a5b4..716c9835f5 100644
Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-erc20-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-erc20-1.png differ
diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-nfts-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-nfts-1.png
index cb01e73aa2..17132ec07c 100644
Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-nfts-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-nfts-1.png differ
diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_nfts-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_nfts-dark-mode-1.png
index f4ca1946ec..76e318c99b 100644
Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_nfts-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_nfts-dark-mode-1.png differ
diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-1.png
deleted file mode 100644
index fab130576d..0000000000
Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-1.png and /dev/null differ
diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-2.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-2.png
deleted file mode 100644
index 4ada42569e..0000000000
Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-2.png and /dev/null differ
diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-base-flow-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-base-flow-1.png
new file mode 100644
index 0000000000..5c05da9ea0
Binary files /dev/null and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-base-flow-1.png differ
diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-base-flow-2.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-base-flow-2.png
new file mode 100644
index 0000000000..304c1422a2
Binary files /dev/null and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-base-flow-2.png differ
diff --git a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-mobile-1.png b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-mobile-1.png
index d553ec739c..9138f10c12 100644
Binary files a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-mobile-1.png and b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-screen-xl-1.png b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-screen-xl-1.png
deleted file mode 100644
index fb292560fd..0000000000
Binary files a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-screen-xl-1.png and /dev/null differ
diff --git a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-screen-xl-base-view-1.png b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-screen-xl-base-view-1.png
new file mode 100644
index 0000000000..19ddbcbbff
Binary files /dev/null and b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-screen-xl-base-view-1.png differ
diff --git a/ui/address/__screenshots__/AddressTxs.pw.tsx_mobile_base-view-mobile-1.png b/ui/address/__screenshots__/AddressTxs.pw.tsx_mobile_base-view-mobile-1.png
index b05cf14839..c4f406ff15 100644
Binary files a/ui/address/__screenshots__/AddressTxs.pw.tsx_mobile_base-view-mobile-1.png and b/ui/address/__screenshots__/AddressTxs.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_dark-color-mode_average-report-dark-mode-mobile-1.png b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_dark-color-mode_average-report-dark-mode-mobile-1.png
index cb130891fb..c752d8a792 100644
Binary files a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_dark-color-mode_average-report-dark-mode-mobile-1.png and b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_dark-color-mode_average-report-dark-mode-mobile-1.png differ
diff --git a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_dark-color-mode_average-report-dark-mode-mobile-2.png b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_dark-color-mode_average-report-dark-mode-mobile-2.png
index 30011e3179..b2350c3805 100644
Binary files a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_dark-color-mode_average-report-dark-mode-mobile-2.png and b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_dark-color-mode_average-report-dark-mode-mobile-2.png differ
diff --git a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_average-report-dark-mode-mobile-1.png b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_average-report-dark-mode-mobile-1.png
index 0462c76ca1..df991d1722 100644
Binary files a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_average-report-dark-mode-mobile-1.png and b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_average-report-dark-mode-mobile-1.png differ
diff --git a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_average-report-dark-mode-mobile-2.png b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_average-report-dark-mode-mobile-2.png
index 64a8c4c7d4..bb83eb74a5 100644
Binary files a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_average-report-dark-mode-mobile-2.png and b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_average-report-dark-mode-mobile-2.png differ
diff --git a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_great-report-1.png b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_great-report-1.png
index 2cf3772046..c73b56cb89 100644
Binary files a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_great-report-1.png and b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_great-report-1.png differ
diff --git a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_great-report-2.png b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_great-report-2.png
index 7f849f73f4..e6da9182a9 100644
Binary files a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_great-report-2.png and b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_great-report-2.png differ
diff --git a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_low-report-2.png b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_low-report-2.png
index a357f25316..92ac51c72b 100644
Binary files a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_low-report-2.png and b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_low-report-2.png differ
diff --git a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_mobile_average-report-dark-mode-mobile-1.png b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_mobile_average-report-dark-mode-mobile-1.png
index 9441baa4ca..9977d21826 100644
Binary files a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_mobile_average-report-dark-mode-mobile-1.png and b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_mobile_average-report-dark-mode-mobile-1.png differ
diff --git a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_mobile_average-report-dark-mode-mobile-2.png b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_mobile_average-report-dark-mode-mobile-2.png
index 8f4b2b9099..6380efd335 100644
Binary files a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_mobile_average-report-dark-mode-mobile-2.png and b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_mobile_average-report-dark-mode-mobile-2.png differ
diff --git a/ui/address/accountHistory/AddressAccountHistoryListItem.tsx b/ui/address/accountHistory/AddressAccountHistoryListItem.tsx
new file mode 100644
index 0000000000..1770b2062f
--- /dev/null
+++ b/ui/address/accountHistory/AddressAccountHistoryListItem.tsx
@@ -0,0 +1,69 @@
+import { Box, Flex, Skeleton, Text } from '@chakra-ui/react';
+import React, { useMemo } from 'react';
+
+import type { NovesResponseData } from 'types/api/noves';
+
+import IconSvg from 'ui/shared/IconSvg';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+import NovesFromTo from 'ui/shared/Noves/NovesFromTo';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+type Props = {
+  isPlaceholderData: boolean;
+  tx: NovesResponseData;
+  currentAddress: string;
+};
+
+const AddressAccountHistoryListItem = (props: Props) => {
+
+  const parsedDescription = useMemo(() => {
+    const description = props.tx.classificationData.description;
+
+    return description.endsWith('.') ? description.substring(0, description.length - 1) : description;
+  }, [ props.tx.classificationData.description ]);
+
+  return (
+    <ListItemMobile rowGap={ 4 } w="full">
+      <Skeleton borderRadius="sm" isLoaded={ !props.isPlaceholderData } w="full">
+        <Flex justifyContent="space-between" w="full">
+          <Flex columnGap={ 2 }>
+            <IconSvg
+              name="lightning"
+              height="5"
+              width="5"
+              color="gray.500"
+              _dark={{ color: 'gray.400' }}
+            />
+
+            <Text fontSize="sm" fontWeight={ 500 }>
+              Action
+            </Text>
+          </Flex>
+          <TimeAgoWithTooltip
+            timestamp={ props.tx.rawTransactionData.timestamp * 1000 }
+            color="text_secondary"
+            borderRadius="sm"
+            fontWeight={ 500 }
+          />
+        </Flex>
+      </Skeleton>
+      <Skeleton borderRadius="sm" isLoaded={ !props.isPlaceholderData }>
+        <LinkInternal
+          href={ `/tx/${ props.tx.rawTransactionData.transactionHash }` }
+          fontWeight="bold"
+          whiteSpace="break-spaces"
+          wordBreak="break-word"
+        >
+          { parsedDescription }
+        </LinkInternal>
+      </Skeleton>
+
+      <Box maxW="full">
+        <NovesFromTo txData={ props.tx } currentAddress={ props.currentAddress } isLoaded={ !props.isPlaceholderData }/>
+      </Box>
+    </ListItemMobile>
+  );
+};
+
+export default React.memo(AddressAccountHistoryListItem);
diff --git a/ui/address/accountHistory/AddressAccountHistoryTableItem.tsx b/ui/address/accountHistory/AddressAccountHistoryTableItem.tsx
new file mode 100644
index 0000000000..16211ba8f2
--- /dev/null
+++ b/ui/address/accountHistory/AddressAccountHistoryTableItem.tsx
@@ -0,0 +1,68 @@
+import { Td, Tr, Skeleton, Box } from '@chakra-ui/react';
+import React, { useMemo } from 'react';
+
+import type { NovesResponseData } from 'types/api/noves';
+
+import IconSvg from 'ui/shared/IconSvg';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import NovesFromTo from 'ui/shared/Noves/NovesFromTo';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+type Props = {
+  isPlaceholderData: boolean;
+  tx: NovesResponseData;
+  currentAddress: string;
+};
+
+const AddressAccountHistoryTableItem = (props: Props) => {
+
+  const parsedDescription = useMemo(() => {
+    const description = props.tx.classificationData.description;
+
+    return description.endsWith('.') ? description.substring(0, description.length - 1) : description;
+  }, [ props.tx.classificationData.description ]);
+
+  return (
+    <Tr>
+      <Td px={ 3 } py="18px" fontSize="sm" >
+        <TimeAgoWithTooltip
+          timestamp={ props.tx.rawTransactionData.timestamp * 1000 }
+          isLoading={ props.isPlaceholderData }
+          color="text_secondary"
+          borderRadius="sm"
+          flexShrink={ 0 }
+        />
+      </Td>
+      <Td px={ 3 } py="18px" fontSize="sm" >
+        <Skeleton borderRadius="sm" isLoaded={ !props.isPlaceholderData }>
+          <Box display="flex">
+            <IconSvg
+              name="lightning"
+              height="5"
+              width="5"
+              color="gray.500"
+              mr="8px"
+              _dark={{ color: 'gray.400' }}
+            />
+
+            <LinkInternal
+              href={ `/tx/${ props.tx.rawTransactionData.transactionHash }` }
+              fontWeight="bold"
+              whiteSpace="break-spaces"
+              wordBreak="break-word"
+            >
+              { parsedDescription }
+            </LinkInternal>
+          </Box>
+        </Skeleton>
+      </Td>
+      <Td px={ 3 } py="18px" fontSize="sm">
+        <Box flexShrink={ 0 } >
+          <NovesFromTo txData={ props.tx } currentAddress={ props.currentAddress } isLoaded={ !props.isPlaceholderData }/>
+        </Box>
+      </Td>
+    </Tr>
+  );
+};
+
+export default React.memo(AddressAccountHistoryTableItem);
diff --git a/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx b/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx
index 8785f2868d..fc3d6f6050 100644
--- a/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx
+++ b/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx
@@ -1,4 +1,4 @@
-import { Flex, Skeleton } from '@chakra-ui/react';
+import { Text, Flex, Skeleton } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -6,11 +6,11 @@ import type { Block } from 'types/api/block';
 
 import config from 'configs/app';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import { currencyUnits } from 'lib/units';
+import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
-import Utilization from 'ui/shared/Utilization/Utilization';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 type Props = Block & {
   page: number;
@@ -18,7 +18,6 @@ type Props = Block & {
 };
 
 const AddressBlocksValidatedListItem = (props: Props) => {
-  const timeAgo = useTimeAgoIncrement(props.timestamp, props.page === 1);
   const totalReward = getBlockTotalReward(props);
 
   return (
@@ -30,29 +29,37 @@ const AddressBlocksValidatedListItem = (props: Props) => {
           noIcon
           fontWeight={ 700 }
         />
-        <Skeleton isLoaded={ !props.isLoading } color="text_secondary" display="inline-block">
-          <span>{ timeAgo }</span>
-        </Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ props.timestamp }
+          enableIncrement={ props.page === 1 }
+          isLoading={ props.isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
       </Flex>
       <Flex columnGap={ 2 } w="100%">
         <Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Txn</Skeleton>
         <Skeleton isLoaded={ !props.isLoading } display="inline-block" color="Skeleton_secondary">
-          <span>{ props.tx_count }</span>
+          <span>{ props.transaction_count }</span>
         </Skeleton>
       </Flex>
       <Flex columnGap={ 2 } w="100%">
         <Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Gas used</Skeleton>
-        <Skeleton isLoaded={ !props.isLoading } color="text_secondary">{ BigNumber(props.gas_used || 0).toFormat() }</Skeleton>
-        <Utilization
-          colorScheme="gray"
-          value={ BigNumber(props.gas_used || 0).dividedBy(BigNumber(props.gas_limit)).toNumber() }
+        <Skeleton isLoaded={ !props.isLoading }>
+          <Text color="text_secondary">{ BigNumber(props.gas_used || 0).toFormat() }</Text>
+        </Skeleton>
+        <BlockGasUsed
+          gasUsed={ props.gas_used }
+          gasLimit={ props.gas_limit }
           isLoading={ props.isLoading }
         />
       </Flex>
-      { !config.UI.views.block.hiddenFields?.total_reward && (
+      { !config.UI.views.block.hiddenFields?.total_reward && !config.features.rollup.isEnabled && (
         <Flex columnGap={ 2 } w="100%">
           <Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Reward { currencyUnits.ether }</Skeleton>
-          <Skeleton isLoaded={ !props.isLoading } color="text_secondary">{ totalReward.toFixed() }</Skeleton>
+          <Skeleton isLoaded={ !props.isLoading }>
+            <Text color="text_secondary">{ totalReward.toFixed() }</Text>
+          </Skeleton>
         </Flex>
       ) }
     </ListItemMobile>
diff --git a/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx b/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx
index b2ca7b4e79..296eb00567 100644
--- a/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx
+++ b/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx
@@ -6,9 +6,9 @@ import type { Block } from 'types/api/block';
 
 import config from 'configs/app';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
-import Utilization from 'ui/shared/Utilization/Utilization';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 type Props = Block & {
   page: number;
@@ -16,7 +16,6 @@ type Props = Block & {
 };
 
 const AddressBlocksValidatedTableItem = (props: Props) => {
-  const timeAgo = useTimeAgoIncrement(props.timestamp, props.page === 1);
   const totalReward = getBlockTotalReward(props);
 
   return (
@@ -32,13 +31,17 @@ const AddressBlocksValidatedTableItem = (props: Props) => {
         />
       </Td>
       <Td>
-        <Skeleton isLoaded={ !props.isLoading } color="text_secondary" display="inline-block">
-          <span>{ timeAgo }</span>
-        </Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ props.timestamp }
+          enableIncrement={ props.page === 1 }
+          isLoading={ props.isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
       </Td>
       <Td>
         <Skeleton isLoaded={ !props.isLoading } display="inline-block" fontWeight="500">
-          <span>{ props.tx_count }</span>
+          <span>{ props.transaction_count }</span>
         </Skeleton>
       </Td>
       <Td>
@@ -46,15 +49,15 @@ const AddressBlocksValidatedTableItem = (props: Props) => {
           <Skeleton isLoaded={ !props.isLoading } flexBasis="80px">
             { BigNumber(props.gas_used || 0).toFormat() }
           </Skeleton>
-          <Utilization
-            colorScheme="gray"
-            value={ BigNumber(props.gas_used || 0).dividedBy(BigNumber(props.gas_limit)).toNumber() }
+          <BlockGasUsed
+            gasUsed={ props.gas_used }
+            gasLimit={ props.gas_limit }
             isLoading={ props.isLoading }
           />
         </Flex>
       </Td>
-      { !config.UI.views.block.hiddenFields?.total_reward && (
-        <Td isNumeric display="flex" justifyContent="end">
+      { !config.UI.views.block.hiddenFields?.total_reward && !config.features.rollup.isEnabled && (
+        <Td isNumeric>
           <Skeleton isLoaded={ !props.isLoading } display="inline-block">
             <span>{ totalReward.toFixed() }</span>
           </Skeleton>
diff --git a/ui/address/coinBalance/AddressCoinBalanceChart.tsx b/ui/address/coinBalance/AddressCoinBalanceChart.tsx
index 4e551f1e8b..94542df368 100644
--- a/ui/address/coinBalance/AddressCoinBalanceChart.tsx
+++ b/ui/address/coinBalance/AddressCoinBalanceChart.tsx
@@ -15,10 +15,16 @@ const AddressCoinBalanceChart = ({ addressHash }: Props) => {
     pathParams: { hash: addressHash },
   });
 
-  const items = React.useMemo(() => data?.map(({ date, value }) => ({
-    date: new Date(date),
-    value: BigNumber(value).div(10 ** config.chain.currency.decimals).toNumber(),
-  })), [ data ]);
+  const items = React.useMemo(() => {
+    if (!data) {
+      return undefined;
+    }
+
+    return data.items.map(({ date, value }) => ({
+      date: new Date(date),
+      value: BigNumber(value).div(10 ** config.chain.currency.decimals).toNumber(),
+    }));
+  }, [ data ]);
 
   return (
     <ChartWidget
@@ -28,6 +34,7 @@ const AddressCoinBalanceChart = ({ addressHash }: Props) => {
       isLoading={ isPending }
       h="300px"
       units={ currencyUnits.ether }
+      emptyText={ data?.days && `Insufficient data for the past ${ data.days } days` }
     />
   );
 };
diff --git a/ui/address/coinBalance/AddressCoinBalanceHistory.tsx b/ui/address/coinBalance/AddressCoinBalanceHistory.tsx
index 31be2c4006..f084e92654 100644
--- a/ui/address/coinBalance/AddressCoinBalanceHistory.tsx
+++ b/ui/address/coinBalance/AddressCoinBalanceHistory.tsx
@@ -7,7 +7,7 @@ import type { PaginationParams } from 'ui/shared/pagination/types';
 
 import type { ResourceError } from 'lib/api/resources';
 import { currencyUnits } from 'lib/units';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import { default as Thead } from 'ui/shared/TheadSticky';
@@ -26,8 +26,8 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
   const content = query.data?.items ? (
     <>
       <Hide below="lg" ssr={ false }>
-        <Table variant="simple" size="sm">
-          <Thead top={ query.pagination.isVisible ? 80 : 0 }>
+        <Table>
+          <Thead top={ query.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }>
             <Tr>
               <Th width="20%">Block</Th>
               <Th width="20%">Txn</Th>
diff --git a/ui/address/coinBalance/AddressCoinBalanceListItem.tsx b/ui/address/coinBalance/AddressCoinBalanceListItem.tsx
index 19ebf6f420..4f9a21dc74 100644
--- a/ui/address/coinBalance/AddressCoinBalanceListItem.tsx
+++ b/ui/address/coinBalance/AddressCoinBalanceListItem.tsx
@@ -5,11 +5,11 @@ import React from 'react';
 import type { AddressCoinBalanceHistoryItem } from 'types/api/address';
 
 import { WEI, ZERO } from 'lib/consts';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import { currencyUnits } from 'lib/units';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 type Props = AddressCoinBalanceHistoryItem & {
   page: number;
@@ -19,7 +19,6 @@ type Props = AddressCoinBalanceHistoryItem & {
 const AddressCoinBalanceListItem = (props: Props) => {
   const deltaBn = BigNumber(props.delta).div(WEI);
   const isPositiveDelta = deltaBn.gte(ZERO);
-  const timeAgo = useTimeAgoIncrement(props.block_timestamp, props.page === 1);
 
   return (
     <ListItemMobile rowGap={ 2 } isAnimated>
@@ -61,7 +60,12 @@ const AddressCoinBalanceListItem = (props: Props) => {
       ) }
       <Flex columnGap={ 2 } w="100%">
         <Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Age</Skeleton>
-        <Skeleton isLoaded={ !props.isLoading } color="text_secondary"><span>{ timeAgo }</span></Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ props.block_timestamp }
+          enableIncrement={ props.page === 1 }
+          isLoading={ props.isLoading }
+          color="text_secondary"
+        />
       </Flex>
     </ListItemMobile>
   );
diff --git a/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx b/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx
index 0e87a4d7fa..eff93d79a2 100644
--- a/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx
+++ b/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx
@@ -5,9 +5,9 @@ import React from 'react';
 import type { AddressCoinBalanceHistoryItem } from 'types/api/address';
 
 import { WEI, ZERO } from 'lib/consts';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 type Props = AddressCoinBalanceHistoryItem & {
   page: number;
@@ -17,7 +17,6 @@ type Props = AddressCoinBalanceHistoryItem & {
 const AddressCoinBalanceTableItem = (props: Props) => {
   const deltaBn = BigNumber(props.delta).div(WEI);
   const isPositiveDelta = deltaBn.gte(ZERO);
-  const timeAgo = useTimeAgoIncrement(props.block_timestamp, props.page === 1);
 
   return (
     <Tr>
@@ -43,9 +42,13 @@ const AddressCoinBalanceTableItem = (props: Props) => {
         ) }
       </Td>
       <Td>
-        <Skeleton isLoaded={ !props.isLoading } color="text_secondary" display="inline-block">
-          <span>{ timeAgo }</span>
-        </Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ props.block_timestamp }
+          enableIncrement={ props.page === 1 }
+          isLoading={ props.isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
       </Td>
       <Td isNumeric pr={ 1 }>
         <Skeleton isLoaded={ !props.isLoading } color="text_secondary" display="inline-block">
diff --git a/ui/address/contract/ContractCode.pw.tsx b/ui/address/contract/ContractCode.pw.tsx
deleted file mode 100644
index 5358af0c40..0000000000
--- a/ui/address/contract/ContractCode.pw.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
-import React from 'react';
-
-import * as addressMock from 'mocks/address/address';
-import * as contractMock from 'mocks/contract/info';
-import * as socketServer from 'playwright/fixtures/socketServer';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import MockAddressPage from 'ui/address/testUtils/MockAddressPage';
-
-import ContractCode from './ContractCode';
-
-const addressHash = 'hash';
-const CONTRACT_API_URL = buildApiUrl('contract', { hash: addressHash });
-const hooksConfig = {
-  router: {
-    query: { hash: addressHash },
-  },
-};
-
-const test = base.extend<socketServer.SocketServerFixture>({
-  createSocket: socketServer.createSocket,
-});
-
-// FIXME
-// test cases which use socket cannot run in parallel since the socket server always run on the same port
-test.describe.configure({ mode: 'serial' });
-
-test('full view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
-  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMock.withChangedByteCode),
-  }));
-
-  const ADDRESS_API_URL = buildApiUrl('address', { hash: addressHash });
-  await page.route(ADDRESS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(addressMock.contract),
-  }));
-
-  const PROXY_CONTRACT_API_URL = buildApiUrl('contract', { hash: addressMock.contract.implementation_address as string });
-  await page.route(PROXY_CONTRACT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMock.withChangedByteCode),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <MockAddressPage>
-        <ContractCode addressHash={ addressHash } noSocket/>
-      </MockAddressPage>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('verified with changed byte code socket', async({ mount, page, createSocket }) => {
-  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMock.verified),
-  }));
-  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
-
-  const component = await mount(
-    <TestApp withSocket>
-      <ContractCode addressHash={ addressHash }/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  const socket = await createSocket();
-  const channel = await socketServer.joinChannel(socket, 'addresses:' + addressHash.toLowerCase());
-  socketServer.sendMessage(socket, channel, 'changed_bytecode', {});
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('verified via lookup in eth_bytecode_db', async({ mount, page, createSocket }) => {
-  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMock.nonVerified),
-  }));
-  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
-
-  await mount(
-    <TestApp withSocket>
-      <ContractCode addressHash={ addressHash }/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  const socket = await createSocket();
-  const channel = await socketServer.joinChannel(socket, 'addresses:' + addressHash.toLowerCase());
-
-  await page.waitForResponse(CONTRACT_API_URL);
-  socketServer.sendMessage(socket, channel, 'smart_contract_was_verified', {});
-
-  const request = await page.waitForRequest(CONTRACT_API_URL);
-
-  expect(request).toBeTruthy();
-});
-
-test('verified with multiple sources', async({ mount, page }) => {
-  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMock.withMultiplePaths),
-  }));
-  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
-
-  await mount(
-    <TestApp>
-      <ContractCode addressHash={ addressHash } noSocket/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  const section = page.locator('section', { hasText: 'Contract source code' });
-  await expect(section).toHaveScreenshot();
-
-  await page.getByRole('button', { name: 'View external libraries' }).click();
-  await expect(section).toHaveScreenshot();
-
-  await page.getByRole('button', { name: 'Open source code in IDE' }).click();
-  await expect(section).toHaveScreenshot();
-});
-
-test('verified via sourcify', async({ mount, page }) => {
-  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMock.verifiedViaSourcify),
-  }));
-  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
-
-  await mount(
-    <TestApp>
-      <ContractCode addressHash={ addressHash } noSocket/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 110 } });
-});
-
-test('verified via eth bytecode db', async({ mount, page }) => {
-  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMock.verifiedViaEthBytecodeDb),
-  }));
-  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
-
-  await mount(
-    <TestApp>
-      <ContractCode addressHash={ addressHash } noSocket/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 110 } });
-});
-
-test('self destructed', async({ mount, page }) => {
-  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMock.selfDestructed),
-  }));
-  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
-
-  await mount(
-    <TestApp>
-      <ContractCode addressHash={ addressHash } noSocket/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  const section = page.locator('section', { hasText: 'Contract creation code' });
-  await expect(section).toHaveScreenshot();
-});
-
-test('with twin address alert +@mobile', async({ mount, page }) => {
-  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMock.withTwinAddress),
-  }));
-  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
-
-  const component = await mount(
-    <TestApp>
-      <ContractCode addressHash={ addressHash } noSocket/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  await expect(component.getByRole('alert')).toHaveScreenshot();
-});
-
-test('with proxy address alert +@mobile', async({ mount, page }) => {
-  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMock.withProxyAddress),
-  }));
-  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
-
-  const component = await mount(
-    <TestApp>
-      <ContractCode addressHash={ addressHash } noSocket/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  await expect(component.getByRole('alert')).toHaveScreenshot();
-});
-
-test('non verified', async({ mount, page }) => {
-  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMock.nonVerified),
-  }));
-  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
-
-  const component = await mount(
-    <TestApp>
-      <ContractCode addressHash={ addressHash } noSocket/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  await expect(component).toHaveScreenshot();
-});
diff --git a/ui/address/contract/ContractCode.tsx b/ui/address/contract/ContractCode.tsx
deleted file mode 100644
index cfa2e5f003..0000000000
--- a/ui/address/contract/ContractCode.tsx
+++ /dev/null
@@ -1,295 +0,0 @@
-import { Flex, Skeleton, Button, Grid, GridItem, Alert, Link, chakra, Box } from '@chakra-ui/react';
-import { useQueryClient } from '@tanstack/react-query';
-import React from 'react';
-
-import type { SocketMessage } from 'lib/socket/types';
-import type { Address as AddressInfo } from 'types/api/address';
-
-import { route } from 'nextjs-routes';
-
-import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
-import dayjs from 'lib/date/dayjs';
-import useSocketChannel from 'lib/socket/useSocketChannel';
-import useSocketMessage from 'lib/socket/useSocketMessage';
-import * as stubs from 'stubs/contract';
-import DataFetchAlert from 'ui/shared/DataFetchAlert';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import LinkExternal from 'ui/shared/LinkExternal';
-import LinkInternal from 'ui/shared/LinkInternal';
-import RawDataSnippet from 'ui/shared/RawDataSnippet';
-
-import ContractSourceCode from './ContractSourceCode';
-
-type Props = {
-  addressHash?: string;
-  // prop for pw tests only
-  noSocket?: boolean;
-}
-
-const InfoItem = chakra(({ label, value, className, isLoading }: { label: string; value: string; className?: string; isLoading: boolean }) => (
-  <GridItem display="flex" columnGap={ 6 } wordBreak="break-all" className={ className } alignItems="baseline">
-    <Skeleton isLoaded={ !isLoading } w="170px" flexShrink={ 0 } fontWeight={ 500 }>{ label }</Skeleton>
-    <Skeleton isLoaded={ !isLoading }>{ value }</Skeleton>
-  </GridItem>
-));
-
-const ContractCode = ({ addressHash, noSocket }: Props) => {
-  const [ isQueryEnabled, setIsQueryEnabled ] = React.useState(false);
-  const [ isChangedBytecodeSocket, setIsChangedBytecodeSocket ] = React.useState<boolean>();
-
-  const queryClient = useQueryClient();
-  const addressInfo = queryClient.getQueryData<AddressInfo>(getResourceKey('address', { pathParams: { hash: addressHash } }));
-
-  const { data, isPlaceholderData, isError } = useApiQuery('contract', {
-    pathParams: { hash: addressHash },
-    queryOptions: {
-      enabled: Boolean(addressHash) && (noSocket || isQueryEnabled),
-      refetchOnMount: false,
-      placeholderData: addressInfo?.is_verified ? stubs.CONTRACT_CODE_VERIFIED : stubs.CONTRACT_CODE_UNVERIFIED,
-    },
-  });
-
-  const handleChangedBytecodeMessage: SocketMessage.AddressChangedBytecode['handler'] = React.useCallback(() => {
-    setIsChangedBytecodeSocket(true);
-  }, [ ]);
-
-  const handleContractWasVerifiedMessage: SocketMessage.SmartContractWasVerified['handler'] = React.useCallback(() => {
-    queryClient.refetchQueries({
-      queryKey: getResourceKey('address', { pathParams: { hash: addressHash } }),
-    });
-    queryClient.refetchQueries({
-      queryKey: getResourceKey('contract', { pathParams: { hash: addressHash } }),
-    });
-  }, [ addressHash, queryClient ]);
-
-  const enableQuery = React.useCallback(() => setIsQueryEnabled(true), []);
-
-  const channel = useSocketChannel({
-    topic: `addresses:${ addressHash?.toLowerCase() }`,
-    isDisabled: !addressHash,
-    onJoin: enableQuery,
-    onSocketError: enableQuery,
-  });
-  useSocketMessage({
-    channel,
-    event: 'changed_bytecode',
-    handler: handleChangedBytecodeMessage,
-  });
-  useSocketMessage({
-    channel,
-    event: 'smart_contract_was_verified',
-    handler: handleContractWasVerifiedMessage,
-  });
-
-  if (isError) {
-    return <DataFetchAlert/>;
-  }
-
-  const canBeVerified = !data?.is_self_destructed && !data?.is_verified;
-
-  const verificationButton = isPlaceholderData ? (
-    <Skeleton
-      w="130px"
-      h={ 8 }
-      mr={ data?.is_partially_verified ? 0 : 3 }
-      ml={ data?.is_partially_verified ? 0 : 'auto' }
-      borderRadius="base"
-      flexShrink={ 0 }
-    />
-  ) : (
-    <Button
-      size="sm"
-      mr={ data?.is_partially_verified ? 0 : 3 }
-      ml={ data?.is_partially_verified ? 0 : 'auto' }
-      flexShrink={ 0 }
-      as="a"
-      href={ route({ pathname: '/address/[hash]/contract-verification', query: { hash: addressHash || '' } }) }
-    >
-        Verify & publish
-    </Button>
-  );
-
-  const constructorArgs = (() => {
-    if (!data?.decoded_constructor_args) {
-      return data?.constructor_args;
-    }
-
-    const decoded = data.decoded_constructor_args
-      .map(([ value, { name, type } ], index) => {
-        const valueEl = type === 'address' ? (
-          <AddressEntity
-            address={{ hash: value }}
-            noIcon
-            display="inline-flex"
-            maxW="100%"
-          />
-        ) : <span>{ value }</span>;
-        return (
-          <Box key={ index }>
-            <span>Arg [{ index }] { name || '' } ({ type }): </span>
-            { valueEl }
-          </Box>
-        );
-      });
-
-    return (
-      <>
-        <span>{ data.constructor_args }</span>
-        <br/><br/>
-        { decoded }
-      </>
-    );
-  })();
-
-  const verificationAlert = (() => {
-    if (data?.is_verified_via_eth_bytecode_db) {
-      return (
-        <Alert status="warning" whiteSpace="pre-wrap" flexWrap="wrap">
-          <span>This contract has been { data.is_partially_verified ? 'partially ' : '' }verified using </span>
-          <LinkExternal
-            href="https://docs.blockscout.com/about/features/ethereum-bytecode-database-microservice"
-            fontSize="md"
-          >
-            Blockscout Bytecode Database
-          </LinkExternal>
-        </Alert>
-      );
-    }
-
-    if (data?.is_verified_via_sourcify) {
-      return (
-        <Alert status="warning" whiteSpace="pre-wrap" flexWrap="wrap">
-          <span>This contract has been { data.is_partially_verified ? 'partially ' : '' }verified via Sourcify. </span>
-          { data.sourcify_repo_url && <LinkExternal href={ data.sourcify_repo_url } fontSize="md">View contract in Sourcify repository</LinkExternal> }
-        </Alert>
-      );
-    }
-
-    return null;
-  })();
-
-  return (
-    <>
-      <Flex flexDir="column" rowGap={ 2 } mb={ 6 } _empty={{ display: 'none' }}>
-        { data?.is_verified && (
-          <Skeleton isLoaded={ !isPlaceholderData }>
-            <Alert status="success" flexWrap="wrap" rowGap={ 3 } columnGap={ 5 }>
-              <span>Contract Source Code Verified ({ data.is_partially_verified ? 'Partial' : 'Exact' } Match)</span>
-              { data.is_partially_verified ? verificationButton : null }
-            </Alert>
-          </Skeleton>
-        ) }
-        { verificationAlert }
-        { (data?.is_changed_bytecode || isChangedBytecodeSocket) && (
-          <Alert status="warning">
-            Warning! Contract bytecode has been changed and does not match the verified one. Therefore, interaction with this smart contract may be risky.
-          </Alert>
-        ) }
-        { !data?.is_verified && data?.verified_twin_address_hash && !data?.minimal_proxy_address_hash && (
-          <Alert status="warning" whiteSpace="pre-wrap" flexWrap="wrap">
-            <span>Contract is not verified. However, we found a verified contract with the same bytecode in Blockscout DB </span>
-            <AddressEntity
-              address={{ hash: data.verified_twin_address_hash, is_contract: true, implementation_name: null }}
-              truncation="constant"
-              fontSize="sm"
-              fontWeight="500"
-            />
-            <chakra.span mt={ 1 }>All functions displayed below are from ABI of that contract. In order to verify current contract, proceed with </chakra.span>
-            <LinkInternal href={ route({ pathname: '/address/[hash]/contract-verification', query: { hash: addressHash || '' } }) }>
-              Verify & Publish
-            </LinkInternal>
-            <span> page</span>
-          </Alert>
-        ) }
-        { data?.minimal_proxy_address_hash && (
-          <Alert status="warning" flexWrap="wrap" whiteSpace="pre-wrap">
-            <span>Minimal Proxy Contract for </span>
-            <AddressEntity
-              address={{ hash: data.minimal_proxy_address_hash, is_contract: true, implementation_name: null }}
-              truncation="constant"
-              fontSize="sm"
-              fontWeight="500"
-              noCopy
-            />
-            <span>. </span>
-            <Box>
-              <Link href="https://eips.ethereum.org/EIPS/eip-1167">EIP-1167</Link>
-              <span> - minimal bytecode implementation that delegates all calls to a known address</span>
-            </Box>
-          </Alert>
-        ) }
-      </Flex>
-      { data?.is_verified && (
-        <Grid templateColumns={{ base: '1fr', lg: '1fr 1fr' }} rowGap={ 4 } columnGap={ 6 } mb={ 8 }>
-          { data.name && <InfoItem label="Contract name" value={ data.name } isLoading={ isPlaceholderData }/> }
-          { data.compiler_version && <InfoItem label="Compiler version" value={ data.compiler_version } isLoading={ isPlaceholderData }/> }
-          { data.evm_version && <InfoItem label="EVM version" value={ data.evm_version } textTransform="capitalize" isLoading={ isPlaceholderData }/> }
-          { typeof data.optimization_enabled === 'boolean' &&
-            <InfoItem label="Optimization enabled" value={ data.optimization_enabled ? 'true' : 'false' } isLoading={ isPlaceholderData }/> }
-          { data.optimization_runs && <InfoItem label="Optimization runs" value={ String(data.optimization_runs) } isLoading={ isPlaceholderData }/> }
-          { data.verified_at &&
-            <InfoItem label="Verified at" value={ dayjs(data.verified_at).format('llll') } wordBreak="break-word" isLoading={ isPlaceholderData }/> }
-          { data.file_path && <InfoItem label="Contract file path" value={ data.file_path } wordBreak="break-word" isLoading={ isPlaceholderData }/> }
-        </Grid>
-      ) }
-      <Flex flexDir="column" rowGap={ 6 }>
-        { constructorArgs && (
-          <RawDataSnippet
-            data={ constructorArgs }
-            title="Constructor Arguments"
-            textareaMaxHeight="200px"
-            isLoading={ isPlaceholderData }
-          />
-        ) }
-        { data?.source_code && (
-          <ContractSourceCode
-            address={ addressHash }
-            implementationAddress={ addressInfo?.implementation_address ?? undefined }
-          />
-        ) }
-        { data?.compiler_settings ? (
-          <RawDataSnippet
-            data={ JSON.stringify(data.compiler_settings, undefined, 4) }
-            title="Compiler Settings"
-            textareaMaxHeight="200px"
-            isLoading={ isPlaceholderData }
-          />
-        ) : null }
-        { data?.abi && (
-          <RawDataSnippet
-            data={ JSON.stringify(data.abi, undefined, 4) }
-            title="Contract ABI"
-            textareaMaxHeight="200px"
-            isLoading={ isPlaceholderData }
-          />
-        ) }
-        { data?.creation_bytecode && (
-          <RawDataSnippet
-            data={ data.creation_bytecode }
-            title="Contract creation code"
-            rightSlot={ canBeVerified ? verificationButton : null }
-            beforeSlot={ data.is_self_destructed ? (
-              <Alert status="info" whiteSpace="pre-wrap" mb={ 3 }>
-                Contracts that self destruct in their constructors have no contract code published and cannot be verified.
-                Displaying the init data provided of the creating transaction.
-              </Alert>
-            ) : null }
-            textareaMaxHeight="200px"
-            isLoading={ isPlaceholderData }
-          />
-        ) }
-        { data?.deployed_bytecode && (
-          <RawDataSnippet
-            data={ data.deployed_bytecode }
-            title="Deployed ByteCode"
-            rightSlot={ !data?.creation_bytecode && canBeVerified ? verificationButton : null }
-            textareaMaxHeight="200px"
-            isLoading={ isPlaceholderData }
-          />
-        ) }
-      </Flex>
-    </>
-  );
-};
-
-export default ContractCode;
diff --git a/ui/address/contract/ContractCodeIdes.tsx b/ui/address/contract/ContractCodeIdes.tsx
index 5207f74c68..fc06317043 100644
--- a/ui/address/contract/ContractCodeIdes.tsx
+++ b/ui/address/contract/ContractCodeIdes.tsx
@@ -1,16 +1,29 @@
-import { Flex, Button, chakra, Popover, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, Image, useColorModeValue } from '@chakra-ui/react';
+import {
+  Flex,
+  Button,
+  chakra,
+  PopoverTrigger,
+  PopoverBody,
+  PopoverContent,
+  Image,
+  Skeleton,
+  useDisclosure,
+  useColorModeValue,
+} from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
+import Popover from 'ui/shared/chakra/Popover';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkExternal from 'ui/shared/LinkExternal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
 
 interface Props {
   className?: string;
   hash: string;
+  isLoading?: string;
 }
 
-const ContractCodeIde = ({ className, hash }: Props) => {
+const ContractCodeIde = ({ className, hash, isLoading }: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
   const defaultIconColor = useColorModeValue('gray.600', 'gray.500');
 
@@ -31,6 +44,10 @@ const ContractCodeIde = ({ className, hash }: Props) => {
       });
   }, [ defaultIconColor, hash ]);
 
+  if (isLoading) {
+    return <Skeleton h={ 8 } w="92px" borderRadius="base"/>;
+  }
+
   if (ideLinks.length === 0) {
     return null;
   }
@@ -44,6 +61,7 @@ const ContractCodeIde = ({ className, hash }: Props) => {
           variant="outline"
           colorScheme="gray"
           onClick={ onToggle }
+          isActive={ isOpen }
           aria-label="Open source code in IDE"
           fontWeight={ 500 }
           px={ 2 }
diff --git a/ui/address/contract/ContractCustomAbiAlert.tsx b/ui/address/contract/ContractCustomAbiAlert.tsx
deleted file mode 100644
index f78566dff3..0000000000
--- a/ui/address/contract/ContractCustomAbiAlert.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Alert } from '@chakra-ui/react';
-import React from 'react';
-
-const ContractCustomAbiAlert = () => {
-  return (
-    <Alert status="warning" mb={ 4 }>
-        Note: Contract with custom ABI is only meant for debugging purpose and it is the user’s responsibility to ensure that the provided ABI
-        matches the contract, otherwise errors may occur or results returned may be incorrect.
-        Blockscout is not responsible for any losses that arise from the use of Read & Write contract.
-    </Alert>
-  );
-};
-
-export default React.memo(ContractCustomAbiAlert);
diff --git a/ui/address/contract/ContractDetails.pw.tsx b/ui/address/contract/ContractDetails.pw.tsx
new file mode 100644
index 0000000000..1313f33ee3
--- /dev/null
+++ b/ui/address/contract/ContractDetails.pw.tsx
@@ -0,0 +1,139 @@
+import React from 'react';
+
+import * as addressMock from 'mocks/address/address';
+import * as contractMock from 'mocks/contract/info';
+import * as socketServer from 'playwright/fixtures/socketServer';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
+
+import ContractDetails from './specs/ContractDetails';
+
+const hooksConfig = {
+  router: {
+    query: { hash: addressMock.contract.hash, tab: 'contract_code' },
+  },
+};
+
+// FIXME
+// test cases which use socket cannot run in parallel since the socket server always run on the same port
+test.describe.configure({ mode: 'serial' });
+
+let addressApiUrl: string;
+
+test.beforeEach(async({ mockApiResponse, page }) => {
+  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => {
+    route.abort();
+  });
+  addressApiUrl = await mockApiResponse('address', addressMock.contract, { pathParams: { hash: addressMock.contract.hash } });
+});
+
+test.describe('full view', () => {
+  test.beforeEach(async({ mockApiResponse }) => {
+    await mockApiResponse('contract', contractMock.withChangedByteCode, { pathParams: { hash: addressMock.contract.hash } });
+    await mockApiResponse('contract', contractMock.withChangedByteCode, { pathParams: { hash: addressMock.contract.implementations?.[0].address as string } });
+  });
+
+  test('source code +@dark-mode', async({ render, createSocket }) => {
+    const hooksConfig = {
+      router: {
+        query: { hash: addressMock.contract.hash, tab: 'contract_source_code' },
+      },
+    };
+    const component = await render(<ContractDetails/>, { hooksConfig }, { withSocket: true });
+    await createSocket();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('compiler', async({ render, createSocket }) => {
+    const hooksConfig = {
+      router: {
+        query: { hash: addressMock.contract.hash, tab: 'contract_compiler' },
+      },
+    };
+    const component = await render(<ContractDetails/>, { hooksConfig }, { withSocket: true });
+    await createSocket();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('abi', async({ render, createSocket }) => {
+    const hooksConfig = {
+      router: {
+        query: { hash: addressMock.contract.hash, tab: 'contract_abi' },
+      },
+    };
+    const component = await render(<ContractDetails/>, { hooksConfig }, { withSocket: true });
+    await createSocket();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('bytecode', async({ render, createSocket }) => {
+    const hooksConfig = {
+      router: {
+        query: { hash: addressMock.contract.hash, tab: 'contract_bytecode' },
+      },
+    };
+    const component = await render(<ContractDetails/>, { hooksConfig }, { withSocket: true });
+    await createSocket();
+    await expect(component).toHaveScreenshot();
+  });
+});
+
+test.describe('mobile view', () => {
+  test.use({ viewport: pwConfig.viewport.mobile });
+
+  test('source code', async({ render, createSocket, mockApiResponse }) => {
+    await mockApiResponse('contract', contractMock.withChangedByteCode, { pathParams: { hash: addressMock.contract.hash } });
+    await mockApiResponse('contract', contractMock.withChangedByteCode, { pathParams: { hash: addressMock.contract.implementations?.[0].address as string } });
+    const component = await render(<ContractDetails/>, { hooksConfig }, { withSocket: true });
+    await createSocket();
+    await expect(component).toHaveScreenshot();
+  });
+});
+
+test('verified via lookup in eth_bytecode_db', async({ render, mockApiResponse, createSocket, page }) => {
+  const contractApiUrl = await mockApiResponse('contract', contractMock.nonVerified, { pathParams: { hash: addressMock.contract.hash } });
+  await render(<ContractDetails/>, { hooksConfig }, { withSocket: true });
+
+  const socket = await createSocket();
+  const channel = await socketServer.joinChannel(socket, 'addresses:' + addressMock.contract.hash.toLowerCase());
+  await page.waitForResponse(contractApiUrl);
+  socketServer.sendMessage(socket, channel, 'smart_contract_was_verified', {});
+  const request = await page.waitForRequest(addressApiUrl);
+
+  expect(request).toBeTruthy();
+});
+
+test('verified with multiple sources', async({ render, page, mockApiResponse }) => {
+  await mockApiResponse('contract', contractMock.withMultiplePaths, { pathParams: { hash: addressMock.contract.hash } });
+  await render(<ContractDetails/>, { hooksConfig }, { withSocket: true });
+
+  const section = page.locator('section', { hasText: 'Contract source code' });
+  await expect(section).toHaveScreenshot();
+
+  await page.getByRole('button', { name: 'View external libraries' }).click();
+  await expect(section).toHaveScreenshot();
+
+  await page.getByRole('button', { name: 'Open source code in IDE' }).click();
+  await expect(section).toHaveScreenshot();
+});
+
+test('self destructed', async({ render, mockApiResponse, page }) => {
+  const hooksConfig = {
+    router: {
+      query: { hash: addressMock.contract.hash, tab: 'contract_bytecode' },
+    },
+  };
+  await mockApiResponse('contract', contractMock.selfDestructed, { pathParams: { hash: addressMock.contract.hash } });
+  await render(<ContractDetails/>, { hooksConfig }, { withSocket: true });
+
+  const section = page.locator('section', { hasText: 'Contract creation code' });
+  await expect(section).toHaveScreenshot();
+});
+
+test('non verified', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address', { ...addressMock.contract, name: null }, { pathParams: { hash: addressMock.contract.hash } });
+  await mockApiResponse('contract', contractMock.nonVerified, { pathParams: { hash: addressMock.contract.hash } });
+  const component = await render(<ContractDetails/>, { hooksConfig }, { withSocket: true });
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/contract/ContractDetails.tsx b/ui/address/contract/ContractDetails.tsx
new file mode 100644
index 0000000000..29fa7fb691
--- /dev/null
+++ b/ui/address/contract/ContractDetails.tsx
@@ -0,0 +1,133 @@
+import { Box } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+import type { Channel } from 'phoenix';
+import React from 'react';
+
+import type { SocketMessage } from 'lib/socket/types';
+import type { Address as AddressInfo } from 'types/api/address';
+import type { AddressImplementation } from 'types/api/addressParams';
+import type { SmartContract } from 'types/api/contract';
+
+import type { ResourceError } from 'lib/api/resources';
+import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import useSocketMessage from 'lib/socket/useSocketMessage';
+import * as stubs from 'stubs/contract';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
+
+import ContractDetailsAlerts from './alerts/ContractDetailsAlerts';
+import ContractSourceAddressSelector from './ContractSourceAddressSelector';
+import ContractDetailsInfo from './info/ContractDetailsInfo';
+import useContractDetailsTabs from './useContractDetailsTabs';
+
+const TAB_LIST_PROPS = { flexWrap: 'wrap', rowGap: 2 };
+const LEFT_SLOT_PROPS = { w: { base: '100%', lg: 'auto' } };
+
+type Props = {
+  addressHash: string;
+  channel: Channel | undefined;
+  mainContractQuery: UseQueryResult<SmartContract, ResourceError>;
+};
+
+const ContractDetails = ({ addressHash, channel, mainContractQuery }: Props) => {
+  const router = useRouter();
+  const sourceAddress = getQueryParamString(router.query.source_address);
+
+  const queryClient = useQueryClient();
+  const addressInfo = queryClient.getQueryData<AddressInfo>(getResourceKey('address', { pathParams: { hash: addressHash } }));
+
+  const sourceItems: Array<AddressImplementation> = React.useMemo(() => {
+    const currentAddressItem = { address: addressHash, name: addressInfo?.name || 'Current contract' };
+    if (!addressInfo || !addressInfo.implementations || addressInfo.implementations.length === 0) {
+      return [ currentAddressItem ];
+    }
+
+    return [
+      currentAddressItem,
+      ...(addressInfo?.implementations.filter((item) => item.address !== addressHash && item.name) || []),
+    ];
+  }, [ addressInfo, addressHash ]);
+
+  const [ selectedItem, setSelectedItem ] = React.useState(sourceItems.find((item) => item.address === sourceAddress) || sourceItems[0]);
+
+  const contractQuery = useApiQuery('contract', {
+    pathParams: { hash: selectedItem?.address },
+    queryOptions: {
+      enabled: Boolean(selectedItem?.address),
+      refetchOnMount: false,
+      placeholderData: addressInfo?.is_verified ? stubs.CONTRACT_CODE_VERIFIED : stubs.CONTRACT_CODE_UNVERIFIED,
+    },
+  });
+  const { data, isPlaceholderData, isError } = contractQuery;
+
+  const tabs = useContractDetailsTabs({ data, isLoading: isPlaceholderData, addressHash, sourceAddress: selectedItem.address });
+
+  const handleContractWasVerifiedMessage: SocketMessage.SmartContractWasVerified['handler'] = React.useCallback(() => {
+    queryClient.refetchQueries({
+      queryKey: getResourceKey('address', { pathParams: { hash: addressHash } }),
+    });
+    queryClient.refetchQueries({
+      queryKey: getResourceKey('contract', { pathParams: { hash: addressHash } }),
+    });
+  }, [ addressHash, queryClient ]);
+
+  useSocketMessage({
+    channel,
+    event: 'smart_contract_was_verified',
+    handler: handleContractWasVerifiedMessage,
+  });
+
+  if (isError) {
+    return <DataFetchAlert/>;
+  }
+
+  const addressSelector = sourceItems.length > 1 ? (
+    <ContractSourceAddressSelector
+      isLoading={ mainContractQuery.isPlaceholderData }
+      label="Source code"
+      items={ sourceItems }
+      selectedItem={ selectedItem }
+      onItemSelect={ setSelectedItem }
+      mr={{ lg: 8 }}
+    />
+  ) : null;
+
+  return (
+    <>
+      <ContractDetailsAlerts
+        data={ mainContractQuery.data }
+        isLoading={ mainContractQuery.isPlaceholderData }
+        addressHash={ addressHash }
+        channel={ channel }
+      />
+      { mainContractQuery.data?.is_verified && (
+        <ContractDetailsInfo
+          data={ mainContractQuery.data }
+          isLoading={ mainContractQuery.isPlaceholderData }
+          addressHash={ addressHash }
+        />
+      ) }
+      { tabs.length > 1 ? (
+        <RoutedTabs
+          tabs={ tabs }
+          isLoading={ isPlaceholderData }
+          variant="radio_group"
+          size="sm"
+          leftSlot={ addressSelector }
+          tabListProps={ TAB_LIST_PROPS }
+          leftSlotProps={ LEFT_SLOT_PROPS }
+        />
+      ) : (
+        <>
+          { addressSelector && <Box mb={ 6 }>{ addressSelector }</Box> }
+          <div>{ tabs[0].component }</div>
+        </>
+      ) }
+    </>
+  );
+};
+
+export default ContractDetails;
diff --git a/ui/address/contract/ContractDetailsConstructorArgs.tsx b/ui/address/contract/ContractDetailsConstructorArgs.tsx
new file mode 100644
index 0000000000..20764a5cc7
--- /dev/null
+++ b/ui/address/contract/ContractDetailsConstructorArgs.tsx
@@ -0,0 +1,106 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import type { SmartContract } from 'types/api/contract';
+
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import type { Truncation } from 'ui/shared/entities/base/components';
+import RawDataSnippet from 'ui/shared/RawDataSnippet';
+
+import { matchArray } from './methods/form/utils';
+
+interface DecodedItemProps {
+  value: unknown;
+  type: string;
+  addressTruncation?: Truncation;
+}
+
+const DecodedItemValue = ({ value, type, addressTruncation = 'dynamic' }: DecodedItemProps) => {
+  const arrayMatch = matchArray(type);
+
+  if (arrayMatch && Array.isArray(value)) {
+    return value.map((item, index) => (
+      <>
+        <DecodedItemValue key={ index } value={ item } type={ arrayMatch.itemType } addressTruncation="constant"/>
+        { index < value.length - 1 && ', ' }
+      </>
+    ));
+  }
+
+  if (type === 'address' && typeof value === 'string') {
+    return (
+      <AddressEntity
+        address={{ hash: value }}
+        noIcon
+        display="inline-flex"
+        maxW="100%"
+        truncation={ addressTruncation }
+      />
+    );
+  }
+
+  const content = (() => {
+    if (value === null || value === undefined || value === '') {
+      return '""';
+    }
+
+    if (typeof value === 'object') {
+      return JSON.stringify(value);
+    }
+
+    if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+      return value;
+    }
+
+    return String(value);
+  })();
+
+  return <span>{ content }</span>;
+};
+
+interface Props {
+  data: SmartContract | undefined;
+  isLoading: boolean;
+}
+
+const ContractDetailsConstructorArgs = ({ data, isLoading }: Props) => {
+
+  const content = React.useMemo(() => {
+    if (!data?.decoded_constructor_args) {
+      return data?.constructor_args;
+    }
+
+    const decoded = data.decoded_constructor_args
+      .map(([ value, { name, type } ], index) => {
+        return (
+          <Box key={ index }>
+            <span>Arg [{ index }] { name || '' } ({ type }): </span>
+            <DecodedItemValue value={ value } type={ type }/>
+          </Box>
+        );
+      });
+
+    return (
+      <>
+        <span>{ data.constructor_args }</span>
+        <br/><br/>
+        { decoded }
+      </>
+    );
+  }, [ data?.constructor_args, data?.decoded_constructor_args ]);
+
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <RawDataSnippet
+      data={ content }
+      title="Constructor Arguments"
+      textareaMaxHeight="200px"
+      isLoading={ isLoading }
+    />
+  );
+};
+
+export default React.memo(ContractDetailsConstructorArgs);
diff --git a/ui/address/contract/ContractDetailsVerificationButton.tsx b/ui/address/contract/ContractDetailsVerificationButton.tsx
new file mode 100644
index 0000000000..129f251f02
--- /dev/null
+++ b/ui/address/contract/ContractDetailsVerificationButton.tsx
@@ -0,0 +1,39 @@
+import { Button, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+interface Props {
+  isLoading: boolean;
+  addressHash: string;
+  isPartiallyVerified: boolean;
+}
+
+const ContractDetailsVerificationButton = ({ isLoading, addressHash, isPartiallyVerified }: Props) => {
+  if (isLoading) {
+    return (
+      <Skeleton
+        w="130px"
+        h={ 8 }
+        mr={ isPartiallyVerified ? 0 : 3 }
+        ml={ isPartiallyVerified ? 0 : 'auto' }
+        borderRadius="base"
+        flexShrink={ 0 }
+      />
+    );
+  }
+  return (
+    <Button
+      size="sm"
+      mr={ isPartiallyVerified ? 0 : 3 }
+      ml={ isPartiallyVerified ? 0 : 'auto' }
+      flexShrink={ 0 }
+      as="a"
+      href={ route({ pathname: '/address/[hash]/contract-verification', query: { hash: addressHash } }) }
+    >
+      Verify & publish
+    </Button>
+  );
+};
+
+export default React.memo(ContractDetailsVerificationButton);
diff --git a/ui/address/contract/ContractExternalLibraries.tsx b/ui/address/contract/ContractExternalLibraries.tsx
index 4c89b5af69..83df015e2b 100644
--- a/ui/address/contract/ContractExternalLibraries.tsx
+++ b/ui/address/contract/ContractExternalLibraries.tsx
@@ -7,10 +7,10 @@ import {
   Modal,
   ModalCloseButton,
   ModalContent,
-  Popover,
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
+  Skeleton,
   StackDivider,
   useDisclosure,
   VStack,
@@ -21,12 +21,14 @@ import type { SmartContractExternalLibrary } from 'types/api/contract';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { apos } from 'lib/html-entities';
+import Popover from 'ui/shared/chakra/Popover';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   className?: string;
   data: Array<SmartContractExternalLibrary>;
+  isLoading?: boolean;
 }
 
 const Item = (data: SmartContractExternalLibrary) => {
@@ -34,7 +36,7 @@ const Item = (data: SmartContractExternalLibrary) => {
     <Flex flexDir="column" py={ 2 } w="100%" rowGap={ 1 }>
       <Box>{ data.name }</Box>
       <AddressEntity
-        address={{ hash: data.address_hash, is_contract: true, implementation_name: null }}
+        address={{ hash: data.address_hash, is_contract: true }}
         query={{ tab: 'contract' }}
         fontSize="sm"
         fontWeight="500"
@@ -44,10 +46,14 @@ const Item = (data: SmartContractExternalLibrary) => {
   );
 };
 
-const ContractExternalLibraries = ({ className, data }: Props) => {
+const ContractExternalLibraries = ({ className, data, isLoading }: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
   const isMobile = useIsMobile();
 
+  if (isLoading) {
+    return <Skeleton h={ 8 } w="150px" borderRadius="base"/>;
+  }
+
   if (data.length === 0) {
     return null;
   }
@@ -59,6 +65,7 @@ const ContractExternalLibraries = ({ className, data }: Props) => {
       variant="outline"
       colorScheme="gray"
       onClick={ onToggle }
+      isActive={ isOpen }
       fontWeight={ 600 }
       px={ 2 }
       aria-label="View external libraries"
@@ -80,6 +87,8 @@ const ContractExternalLibraries = ({ className, data }: Props) => {
         divider={ <StackDivider borderColor="divider"/> }
         spacing={ 2 }
         mt={ 4 }
+        maxH={{ lg: '50vh' }}
+        overflowY="scroll"
       >
         { data.map((item) => <Item key={ item.address_hash } { ...item }/>) }
       </VStack>
diff --git a/ui/address/contract/ContractImplementationAddress.tsx b/ui/address/contract/ContractImplementationAddress.tsx
deleted file mode 100644
index 2483bd1c44..0000000000
--- a/ui/address/contract/ContractImplementationAddress.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Flex } from '@chakra-ui/react';
-import { useQueryClient } from '@tanstack/react-query';
-import React from 'react';
-
-import type { Address as TAddress } from 'types/api/address';
-
-import { getResourceKey } from 'lib/api/useApiQuery';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-
-interface Props {
-  hash: string | undefined;
-}
-
-const ContractImplementationAddress = ({ hash }: Props) => {
-  const queryClient = useQueryClient();
-  const data = queryClient.getQueryData<TAddress>(getResourceKey('address', {
-    pathParams: { hash },
-  }));
-
-  if (!data?.implementation_address) {
-    return null;
-  }
-
-  return (
-    <Flex mb={ 6 } flexWrap="wrap" columnGap={ 2 }>
-      <span>Implementation address:</span>
-      <AddressEntity address={{ hash: data.implementation_address, is_contract: true }} noIcon noCopy/>
-    </Flex>
-  );
-};
-
-export default React.memo(ContractImplementationAddress);
diff --git a/ui/address/contract/ContractMethodCallable.tsx b/ui/address/contract/ContractMethodCallable.tsx
deleted file mode 100644
index a9ce55bf0e..0000000000
--- a/ui/address/contract/ContractMethodCallable.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import { Box, Button, chakra, Flex } from '@chakra-ui/react';
-import React from 'react';
-import type { SubmitHandler } from 'react-hook-form';
-import { useForm, FormProvider } from 'react-hook-form';
-
-import type { MethodFormFields, ContractMethodCallResult } from './types';
-import type { SmartContractMethodInput, SmartContractMethod } from 'types/api/contract';
-
-import config from 'configs/app';
-import * as mixpanel from 'lib/mixpanel/index';
-import IconSvg from 'ui/shared/IconSvg';
-
-import ContractMethodCallableRow from './ContractMethodCallableRow';
-import { formatFieldValues, transformFieldsToArgs } from './utils';
-
-interface ResultComponentProps<T extends SmartContractMethod> {
-  item: T;
-  result: ContractMethodCallResult<T>;
-  onSettle: () => void;
-}
-
-interface Props<T extends SmartContractMethod> {
-  data: T;
-  onSubmit: (data: T, args: Array<string | Array<unknown>>) => Promise<ContractMethodCallResult<T>>;
-  resultComponent: (props: ResultComponentProps<T>) => JSX.Element | null;
-  isWrite?: boolean;
-}
-
-// groupName%groupIndex:inputName%inputIndex
-const getFormFieldName = (input: { index: number; name: string }, group?: { index: number; name: string }) =>
-  `${ group ? `${ group.name }%${ group.index }:` : '' }${ input.name || 'input' }%${ input.index }`;
-
-const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit, resultComponent: ResultComponent, isWrite }: Props<T>) => {
-
-  const [ result, setResult ] = React.useState<ContractMethodCallResult<T>>();
-  const [ isLoading, setLoading ] = React.useState(false);
-
-  const inputs: Array<SmartContractMethodInput> = React.useMemo(() => {
-    return [
-      ...('inputs' in data ? data.inputs : []),
-      ...('stateMutability' in data && data.stateMutability === 'payable' ? [ {
-        name: `Send native ${ config.chain.currency.symbol || 'coin' }`,
-        type: 'uint256' as const,
-        internalType: 'uint256' as const,
-        fieldType: 'native_coin' as const,
-      } ] : []),
-    ];
-  }, [ data ]);
-
-  const formApi = useForm<MethodFormFields>({
-    mode: 'onBlur',
-  });
-
-  const handleTxSettle = React.useCallback(() => {
-    setLoading(false);
-  }, []);
-
-  const handleFormChange = React.useCallback(() => {
-    result && setResult(undefined);
-  }, [ result ]);
-
-  const onFormSubmit: SubmitHandler<MethodFormFields> = React.useCallback(async(formData) => {
-    const formattedData = formatFieldValues(formData, inputs);
-    const args = transformFieldsToArgs(formattedData);
-
-    setResult(undefined);
-    setLoading(true);
-
-    onSubmit(data, args)
-      .then((result) => {
-        setResult(result);
-      })
-      .catch((error) => {
-        setResult(error?.error || error?.data || (error?.reason && { message: error.reason }) || error);
-        setLoading(false);
-      })
-      .finally(() => {
-        mixpanel.logEvent(mixpanel.EventTypes.CONTRACT_INTERACTION, {
-          'Method type': isWrite ? 'Write' : 'Read',
-          'Method name': 'name' in data ? data.name : 'Fallback',
-        });
-      });
-  }, [ inputs, onSubmit, data, isWrite ]);
-
-  return (
-    <Box>
-      <FormProvider { ...formApi }>
-        <chakra.form
-          noValidate
-          onSubmit={ formApi.handleSubmit(onFormSubmit) }
-          onChange={ handleFormChange }
-        >
-          <Flex
-            flexDir="column"
-            rowGap={ 3 }
-            mb={ 3 }
-            _empty={{ display: 'none' }}
-          >
-            { inputs.map((input, index) => {
-              const fieldName = getFormFieldName({ name: input.name, index });
-
-              if (input.type === 'tuple' && input.components) {
-                return (
-                  <React.Fragment key={ fieldName }>
-                    { index !== 0 && <><Box h={{ base: 0, lg: 3 }}/><div/></> }
-                    <Box
-                      fontWeight={ 500 }
-                      lineHeight="20px"
-                      py={{ lg: '6px' }}
-                      fontSize="sm"
-                      wordBreak="break-word"
-                    >
-                      { input.name } ({ input.type })
-                    </Box>
-                    { input.components.map((component, componentIndex) => {
-                      const fieldName = getFormFieldName(
-                        { name: component.name, index: componentIndex },
-                        { name: input.name, index },
-                      );
-
-                      return (
-                        <ContractMethodCallableRow
-                          key={ fieldName }
-                          fieldName={ fieldName }
-                          argName={ component.name }
-                          argType={ component.type }
-                          isDisabled={ isLoading }
-                          onChange={ handleFormChange }
-                          isGrouped
-                        />
-                      );
-                    }) }
-                    { index !== inputs.length - 1 && <><Box h={{ base: 0, lg: 3 }}/><div/></> }
-                  </React.Fragment>
-                );
-              }
-
-              return (
-                <ContractMethodCallableRow
-                  key={ fieldName }
-                  fieldName={ fieldName }
-                  fieldType={ input.fieldType }
-                  argName={ input.name }
-                  argType={ input.type }
-                  isDisabled={ isLoading }
-                  isOptional={ input.fieldType === 'native_coin' && inputs.length > 1 }
-                  onChange={ handleFormChange }
-                />
-              );
-            }) }
-          </Flex>
-          <Button
-            isLoading={ isLoading }
-            loadingText={ isWrite ? 'Write' : 'Read' }
-            variant="outline"
-            size="sm"
-            flexShrink={ 0 }
-            width="min-content"
-            px={ 4 }
-            type="submit"
-          >
-            { isWrite ? 'Write' : 'Read' }
-          </Button>
-        </chakra.form>
-      </FormProvider>
-      { 'outputs' in data && !isWrite && data.outputs.length > 0 && (
-        <Flex mt={ 3 } fontSize="sm">
-          <IconSvg name="arrows/down-right" boxSize={ 5 } mr={ 1 }/>
-          <p>
-            { data.outputs.map(({ type, name }, index) => {
-              return (
-                <>
-                  <chakra.span fontWeight={ 500 }>{ name } </chakra.span>
-                  <span>{ name ? `(${ type })` : type }</span>
-                  { index < data.outputs.length - 1 && <span>, </span> }
-                </>
-              );
-            }) }
-          </p>
-        </Flex>
-      ) }
-      { result && <ResultComponent item={ data } result={ result } onSettle={ handleTxSettle }/> }
-    </Box>
-  );
-};
-
-export default React.memo(ContractMethodCallable) as typeof ContractMethodCallable;
diff --git a/ui/address/contract/ContractMethodCallableRow.tsx b/ui/address/contract/ContractMethodCallableRow.tsx
deleted file mode 100644
index 2cc01d7861..0000000000
--- a/ui/address/contract/ContractMethodCallableRow.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Box, Flex, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-import { useFormContext } from 'react-hook-form';
-
-import type { MethodFormFields } from './types';
-import type { SmartContractMethodArgType, SmartContractMethodInput } from 'types/api/contract';
-
-import ContractMethodField from './ContractMethodField';
-import ContractMethodFieldArray from './ContractMethodFieldArray';
-import { ARRAY_REGEXP } from './utils';
-
-interface Props {
-  fieldName: string;
-  fieldType?: SmartContractMethodInput['fieldType'];
-  argName: string;
-  argType: SmartContractMethodArgType;
-  onChange: () => void;
-  isDisabled: boolean;
-  isGrouped?: boolean;
-  isOptional?: boolean;
-}
-
-const ContractMethodCallableRow = ({ argName, fieldName, fieldType, argType, onChange, isDisabled, isGrouped, isOptional }: Props) => {
-  const { control, getValues, setValue } = useFormContext<MethodFormFields>();
-  const arrayTypeMatch = argType.match(ARRAY_REGEXP);
-  const nativeCoinFieldBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.100');
-
-  const content = arrayTypeMatch ? (
-    <ContractMethodFieldArray
-      name={ fieldName }
-      argType={ arrayTypeMatch[1] as SmartContractMethodArgType }
-      size={ Number(arrayTypeMatch[2] || Infinity) }
-      control={ control }
-      setValue={ setValue }
-      getValues={ getValues }
-      isDisabled={ isDisabled }
-      onChange={ onChange }
-    />
-  ) : (
-    <ContractMethodField
-      name={ fieldName }
-      argType={ argType }
-      placeholder={ argType }
-      control={ control }
-      setValue={ setValue }
-      getValues={ getValues }
-      isDisabled={ isDisabled }
-      isOptional={ isOptional }
-      onChange={ onChange }
-    />
-  );
-
-  const isNativeCoinField = fieldType === 'native_coin';
-
-  return (
-    <Flex
-      flexDir={{ base: 'column', lg: 'row' }}
-      columnGap={ 3 }
-      rowGap={{ base: 2, lg: 0 }}
-      bgColor={ isNativeCoinField ? nativeCoinFieldBgColor : undefined }
-      py={ isNativeCoinField ? 1 : undefined }
-      px={ isNativeCoinField ? '6px' : undefined }
-      mx={ isNativeCoinField ? '-6px' : undefined }
-      borderRadius="base"
-    >
-      <Box
-        position="relative"
-        fontWeight={ 500 }
-        lineHeight="20px"
-        py={{ lg: '6px' }}
-        fontSize="sm"
-        color={ isGrouped ? 'text_secondary' : 'initial' }
-        wordBreak="break-word"
-        w={{ lg: '250px' }}
-        flexShrink={ 0 }
-      >
-        { argName }{ isOptional ? '' : '*' } ({ argType })
-      </Box>
-      { content }
-    </Flex>
-  );
-};
-
-export default React.memo(ContractMethodCallableRow);
diff --git a/ui/address/contract/ContractMethodConstant.tsx b/ui/address/contract/ContractMethodConstant.tsx
deleted file mode 100644
index cb52ffcf27..0000000000
--- a/ui/address/contract/ContractMethodConstant.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Checkbox, Flex, chakra } from '@chakra-ui/react';
-import BigNumber from 'bignumber.js';
-import type { ChangeEvent } from 'react';
-import React from 'react';
-
-import type { SmartContractMethodOutput } from 'types/api/contract';
-
-import { WEI } from 'lib/consts';
-import { currencyUnits } from 'lib/units';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-
-function castValueToString(value: number | string | boolean | object | bigint | undefined): string {
-  switch (typeof value) {
-    case 'string':
-      return value;
-    case 'boolean':
-      return String(value);
-    case 'undefined':
-      return '';
-    case 'number':
-      return value.toLocaleString(undefined, { useGrouping: false });
-    case 'bigint':
-      return value.toString();
-    case 'object':
-      return JSON.stringify(value, undefined, 2);
-  }
-}
-
-interface Props {
-  data: SmartContractMethodOutput;
-}
-
-const ContractMethodStatic = ({ data }: Props) => {
-  const [ value, setValue ] = React.useState<string>(castValueToString(data.value));
-  const [ label, setLabel ] = React.useState(currencyUnits.wei.toUpperCase());
-
-  const handleCheckboxChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
-    const initialValue = castValueToString(data.value);
-
-    if (event.target.checked) {
-      setValue(BigNumber(initialValue).div(WEI).toFixed());
-      setLabel(currencyUnits.ether.toUpperCase());
-    } else {
-      setValue(BigNumber(initialValue).toFixed());
-      setLabel(currencyUnits.wei.toUpperCase());
-    }
-  }, [ data.value ]);
-
-  const content = (() => {
-    if (typeof data.value === 'string' && data.type === 'address' && data.value) {
-      return (
-        <AddressEntity
-          address={{ hash: data.value }}
-          noIcon
-        />
-      );
-    }
-
-    return <chakra.span wordBreak="break-all" whiteSpace="pre-wrap">({ data.type }): { String(value) }</chakra.span>;
-  })();
-
-  return (
-    <Flex flexDir={{ base: 'column', lg: 'row' }} columnGap={ 2 } rowGap={ 2 }>
-      { content }
-      { (data.type.includes('int256') || data.type.includes('int128')) && <Checkbox onChange={ handleCheckboxChange }>{ label }</Checkbox> }
-    </Flex>
-  );
-};
-
-export default ContractMethodStatic;
diff --git a/ui/address/contract/ContractMethodField.tsx b/ui/address/contract/ContractMethodField.tsx
deleted file mode 100644
index 47837114f6..0000000000
--- a/ui/address/contract/ContractMethodField.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import {
-  Box,
-  FormControl,
-  Input,
-  InputGroup,
-  InputRightElement,
-  useColorModeValue,
-} from '@chakra-ui/react';
-import React from 'react';
-import type { Control, ControllerRenderProps, FieldError, UseFormGetValues, UseFormSetValue, UseFormStateReturn } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-import { NumericFormat } from 'react-number-format';
-import { isAddress, isHex, getAddress } from 'viem';
-
-import type { MethodFormFields } from './types';
-import type { SmartContractMethodArgType } from 'types/api/contract';
-
-import ClearButton from 'ui/shared/ClearButton';
-
-import ContractMethodFieldZeroes from './ContractMethodFieldZeroes';
-import { INT_REGEXP, BYTES_REGEXP, getIntBoundaries, formatBooleanValue } from './utils';
-
-interface Props {
-  name: string;
-  index?: number;
-  groupName?: string;
-  placeholder: string;
-  argType: SmartContractMethodArgType;
-  control: Control<MethodFormFields>;
-  setValue: UseFormSetValue<MethodFormFields>;
-  getValues: UseFormGetValues<MethodFormFields>;
-  isDisabled: boolean;
-  isOptional?: boolean;
-  onChange: () => void;
-}
-
-const ContractMethodField = ({ control, name, groupName, index, argType, placeholder, setValue, getValues, isDisabled, isOptional, onChange }: Props) => {
-  const ref = React.useRef<HTMLInputElement>(null);
-  const bgColor = useColorModeValue('white', 'black');
-
-  const handleClear = React.useCallback(() => {
-    setValue(name, '');
-    onChange();
-    ref.current?.focus();
-  }, [ name, onChange, setValue ]);
-
-  const handleAddZeroesClick = React.useCallback((power: number) => {
-    const value = groupName && index !== undefined ? getValues()[groupName][index] : getValues()[name];
-    const zeroes = Array(power).fill('0').join('');
-    const newValue = value ? value + zeroes : '1' + zeroes;
-    setValue(name, newValue);
-    onChange();
-  }, [ getValues, groupName, index, name, onChange, setValue ]);
-
-  const intMatch = React.useMemo(() => {
-    const match = argType.match(INT_REGEXP);
-    if (!match) {
-      return null;
-    }
-
-    const [ , isUnsigned, power = '256' ] = match;
-    const [ min, max ] = getIntBoundaries(Number(power), Boolean(isUnsigned));
-
-    return { isUnsigned, power, min, max };
-  }, [ argType ]);
-
-  const bytesMatch = React.useMemo(() => {
-    return argType.match(BYTES_REGEXP);
-  }, [ argType ]);
-
-  const renderInput = React.useCallback((
-    { field, formState }: { field: ControllerRenderProps<MethodFormFields>; formState: UseFormStateReturn<MethodFormFields> },
-  ) => {
-    const error: FieldError | undefined = index !== undefined && groupName !== undefined ?
-      (formState.errors[groupName] as unknown as Array<FieldError>)?.[index] :
-      formState.errors[name];
-
-    // show control for all inputs which allows to insert 10^18 or greater numbers
-    const hasZerosControl = intMatch && Number(intMatch.power) >= 64;
-
-    return (
-      <Box w="100%">
-        <FormControl
-          id={ name }
-          isDisabled={ isDisabled }
-        >
-          <InputGroup size="xs">
-            <Input
-              { ...field }
-              { ...(intMatch ? {
-                as: NumericFormat,
-                thousandSeparator: ' ',
-                decimalScale: 0,
-                allowNegative: !intMatch.isUnsigned,
-              } : {}) }
-              ref={ ref }
-              isInvalid={ Boolean(error) }
-              required={ !isOptional }
-              placeholder={ placeholder }
-              paddingRight={ hasZerosControl ? '120px' : '40px' }
-              autoComplete="off"
-              bgColor={ bgColor }
-            />
-            <InputRightElement w="auto" right={ 1 }>
-              { typeof field.value === 'string' && field.value.replace('\n', '') && <ClearButton onClick={ handleClear } isDisabled={ isDisabled }/> }
-              { hasZerosControl && <ContractMethodFieldZeroes onClick={ handleAddZeroesClick } isDisabled={ isDisabled }/> }
-            </InputRightElement>
-          </InputGroup>
-        </FormControl>
-        { error && <Box color="error" fontSize="sm" mt={ 1 }>{ error.message }</Box> }
-      </Box>
-    );
-  }, [ index, groupName, name, intMatch, isDisabled, isOptional, placeholder, bgColor, handleClear, handleAddZeroesClick ]);
-
-  const validate = React.useCallback((_value: string | Array<string> | undefined) => {
-    if (typeof _value === 'object' || !_value) {
-      return;
-    }
-
-    const value = _value.replace('\n', '');
-
-    if (!value && !isOptional) {
-      return 'Field is required';
-    }
-
-    if (argType === 'address') {
-      if (!isAddress(value)) {
-        return 'Invalid address format';
-      }
-
-      // all lowercase addresses are valid
-      const isInLowerCase = value === value.toLowerCase();
-      if (isInLowerCase) {
-        return true;
-      }
-
-      // check if address checksum is valid
-      return getAddress(value) === value ? true : 'Invalid address checksum';
-    }
-
-    if (intMatch) {
-      const formattedValue = Number(value.replace(/\s/g, ''));
-
-      if (Object.is(formattedValue, NaN)) {
-        return 'Invalid integer format';
-      }
-
-      if (formattedValue > intMatch.max || formattedValue < intMatch.min) {
-        const lowerBoundary = intMatch.isUnsigned ? '0' : `-1 * 2 ^ ${ Number(intMatch.power) / 2 }`;
-        const upperBoundary = intMatch.isUnsigned ? `2 ^ ${ intMatch.power } - 1` : `2 ^ ${ Number(intMatch.power) / 2 } - 1`;
-        return `Value should be in range from "${ lowerBoundary }" to "${ upperBoundary }" inclusively`;
-      }
-
-      return true;
-    }
-
-    if (argType === 'bool') {
-      const formattedValue = formatBooleanValue(value);
-      if (formattedValue === undefined) {
-        return 'Invalid boolean format. Allowed values: 0, 1, true, false';
-      }
-    }
-
-    if (bytesMatch) {
-      const [ , length ] = bytesMatch;
-
-      if (!isHex(value)) {
-        return 'Invalid bytes format';
-      }
-
-      if (length) {
-        const valueLengthInBytes = value.replace('0x', '').length / 2;
-        return valueLengthInBytes !== Number(length) ? `Value should be ${ length } bytes in length` : true;
-      }
-
-      return true;
-    }
-
-    return true;
-  }, [ isOptional, argType, intMatch, bytesMatch ]);
-
-  return (
-    <Controller
-      name={ name }
-      control={ control }
-      render={ renderInput }
-      rules={{ required: isOptional ? false : 'Field is required', validate }}
-    />
-  );
-};
-
-export default React.memo(ContractMethodField);
diff --git a/ui/address/contract/ContractMethodFieldArray.tsx b/ui/address/contract/ContractMethodFieldArray.tsx
deleted file mode 100644
index 35018b2f7f..0000000000
--- a/ui/address/contract/ContractMethodFieldArray.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { Flex, IconButton } from '@chakra-ui/react';
-import React from 'react';
-import type { Control, UseFormGetValues, UseFormSetValue } from 'react-hook-form';
-import { useFieldArray } from 'react-hook-form';
-
-import type { MethodFormFields } from './types';
-import type { SmartContractMethodArgType } from 'types/api/contract';
-
-import IconSvg from 'ui/shared/IconSvg';
-
-import ContractMethodField from './ContractMethodField';
-
-interface Props {
-  name: string;
-  size: number;
-  argType: SmartContractMethodArgType;
-  control: Control<MethodFormFields>;
-  setValue: UseFormSetValue<MethodFormFields>;
-  getValues: UseFormGetValues<MethodFormFields>;
-  isDisabled: boolean;
-  onChange: () => void;
-}
-
-const ContractMethodFieldArray = ({ control, name, setValue, getValues, isDisabled, argType, onChange, size }: Props) => {
-  const { fields, append, remove } = useFieldArray({
-    name: name as never,
-    control,
-  });
-
-  React.useEffect(() => {
-    if (fields.length === 0) {
-      if (size === Infinity) {
-        append('');
-      } else {
-        for (let i = 0; i < size - 1; i++) {
-          // a little hack to append multiple empty fields in the array
-          // had to adjust code in ContractMethodField as well
-          append('\n');
-        }
-      }
-    }
-
-  }, [ fields.length, append, size ]);
-
-  const handleAddButtonClick = React.useCallback(() => {
-    append('');
-  }, [ append ]);
-
-  const handleRemoveButtonClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
-    const itemIndex = event.currentTarget.getAttribute('data-index');
-    if (itemIndex) {
-      remove(Number(itemIndex));
-    }
-  }, [ remove ]);
-
-  return (
-    <Flex flexDir="column" rowGap={ 3 } w="100%">
-      { fields.map((field, index, array) => {
-        return (
-          <Flex key={ field.id } columnGap={ 3 }>
-            <ContractMethodField
-              name={ `${ name }[${ index }]` }
-              groupName={ name }
-              index={ index }
-              argType={ argType }
-              placeholder={ argType }
-              control={ control }
-              setValue={ setValue }
-              getValues={ getValues }
-              isDisabled={ isDisabled }
-              onChange={ onChange }
-            />
-            { array.length > 1 && size === Infinity && (
-              <IconButton
-                aria-label="remove"
-                data-index={ index }
-                variant="outline"
-                w="30px"
-                h="30px"
-                flexShrink={ 0 }
-                onClick={ handleRemoveButtonClick }
-                icon={ <IconSvg name="minus" boxSize={ 4 }/> }
-                isDisabled={ isDisabled }
-              />
-            ) }
-            { index === array.length - 1 && size === Infinity && (
-              <IconButton
-                aria-label="add"
-                data-index={ index }
-                variant="outline"
-                w="30px"
-                h="30px"
-                flexShrink={ 0 }
-                onClick={ handleAddButtonClick }
-                icon={ <IconSvg name="plus" boxSize={ 4 }/> }
-                isDisabled={ isDisabled }
-              />
-            ) }
-          </Flex>
-        );
-      }) }
-    </Flex>
-  );
-};
-
-export default React.memo(ContractMethodFieldArray);
diff --git a/ui/address/contract/ContractMethodFieldZeroes.tsx b/ui/address/contract/ContractMethodFieldZeroes.tsx
deleted file mode 100644
index 1c0bfc9852..0000000000
--- a/ui/address/contract/ContractMethodFieldZeroes.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import {
-  chakra,
-  Popover,
-  PopoverBody,
-  PopoverContent,
-  PopoverTrigger,
-  Portal,
-  Button,
-  List,
-  ListItem,
-  useDisclosure,
-  Input,
-} from '@chakra-ui/react';
-import React from 'react';
-
-import { times } from 'lib/html-entities';
-import IconSvg from 'ui/shared/IconSvg';
-
-interface Props {
-  onClick: (power: number) => void;
-  isDisabled?: boolean;
-}
-
-const ContractMethodFieldZeroes = ({ onClick, isDisabled }: Props) => {
-  const [ selectedOption, setSelectedOption ] = React.useState<number | undefined>(18);
-  const [ customValue, setCustomValue ] = React.useState<number>();
-  const { isOpen, onToggle, onClose } = useDisclosure();
-
-  const handleOptionClick = React.useCallback((event: React.MouseEvent) => {
-    const id = Number((event.currentTarget as HTMLDivElement).getAttribute('data-id'));
-    if (!Object.is(id, NaN)) {
-      setSelectedOption((prev) => prev === id ? undefined : id);
-      setCustomValue(undefined);
-      onClose();
-    }
-  }, [ onClose ]);
-
-  const handleInputChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    setCustomValue(Number(event.target.value));
-    setSelectedOption(undefined);
-  }, []);
-
-  const value = selectedOption || customValue;
-
-  const handleButtonClick = React.useCallback(() => {
-    value && onClick(value);
-  }, [ onClick, value ]);
-
-  return (
-    <>
-      { Boolean(value) && (
-        <Button
-          px={ 1 }
-          lineHeight={ 6 }
-          h={ 6 }
-          fontWeight={ 500 }
-          ml={ 1 }
-          variant="subtle"
-          colorScheme="gray"
-          display="inline"
-          onClick={ handleButtonClick }
-          isDisabled={ isDisabled }
-        >
-          { times }
-          <chakra.span>10</chakra.span>
-          <chakra.span fontSize="xs" lineHeight={ 4 } verticalAlign="super">{ value }</chakra.span>
-        </Button>
-      ) }
-      <Popover placement="bottom-end" isLazy isOpen={ isOpen } onClose={ onClose }>
-        <PopoverTrigger>
-          <Button
-            variant="subtle"
-            colorScheme="gray"
-            size="xs"
-            cursor="pointer"
-            ml={ 1 }
-            p={ 0 }
-            onClick={ onToggle }
-            isDisabled={ isDisabled }
-          >
-            <IconSvg name="arrows/east-mini" transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' } boxSize={ 6 }/>
-          </Button>
-        </PopoverTrigger>
-        <Portal>
-          <PopoverContent w="110px">
-            <PopoverBody py={ 2 }>
-              <List>
-                { [ 8, 12, 16, 18, 20 ].map((id) => (
-                  <ListItem
-                    key={ id }
-                    py={ 2 }
-                    data-id={ id }
-                    onClick={ handleOptionClick }
-                    display="flex"
-                    justifyContent="space-between"
-                    alignItems="center"
-                    cursor="pointer"
-                  >
-                    <span>10*{ id }</span>
-                    { selectedOption === id && <IconSvg name="check" boxSize={ 6 } color="blue.600"/> }
-                  </ListItem>
-                )) }
-                <ListItem
-                  py={ 2 }
-                  display="flex"
-                  justifyContent="space-between"
-                  alignItems="center"
-                >
-                  <span>10*</span>
-                  <Input
-                    type="number"
-                    min={ 0 }
-                    max={ 100 }
-                    ml={ 3 }
-                    size="xs"
-                    onChange={ handleInputChange }
-                    value={ customValue || '' }
-                  />
-                </ListItem>
-              </List>
-            </PopoverBody>
-          </PopoverContent>
-        </Portal>
-      </Popover>
-    </>
-  );
-};
-
-export default React.memo(ContractMethodFieldZeroes);
diff --git a/ui/address/contract/ContractMethodsAccordion.tsx b/ui/address/contract/ContractMethodsAccordion.tsx
deleted file mode 100644
index b1e4c4bf6b..0000000000
--- a/ui/address/contract/ContractMethodsAccordion.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Accordion, Box, Flex, Link } from '@chakra-ui/react';
-import _range from 'lodash/range';
-import React from 'react';
-import { scroller } from 'react-scroll';
-
-import type { SmartContractMethod } from 'types/api/contract';
-
-import ContractMethodsAccordionItem from './ContractMethodsAccordionItem';
-
-interface Props<T extends SmartContractMethod> {
-  data: Array<T>;
-  addressHash?: string;
-  renderItemContent: (item: T, index: number, id: number) => React.ReactNode;
-  tab: string;
-}
-
-const ContractMethodsAccordion = <T extends SmartContractMethod>({ data, addressHash, renderItemContent, tab }: Props<T>) => {
-  const [ expandedSections, setExpandedSections ] = React.useState<Array<number>>(data.length === 1 ? [ 0 ] : []);
-  const [ id, setId ] = React.useState(0);
-
-  React.useEffect(() => {
-    const hash = window.location.hash.replace('#', '');
-
-    if (!hash) {
-      return;
-    }
-
-    const index = data.findIndex((item) => 'method_id' in item && item.method_id === hash);
-    if (index > -1) {
-      scroller.scrollTo(`method_${ hash }`, {
-        duration: 500,
-        smooth: true,
-        offset: -100,
-      });
-      setExpandedSections([ index ]);
-    }
-  }, [ data ]);
-
-  const handleAccordionStateChange = React.useCallback((newValue: Array<number>) => {
-    setExpandedSections(newValue);
-  }, []);
-
-  const handleExpandAll = React.useCallback(() => {
-    if (!data) {
-      return;
-    }
-
-    if (expandedSections.length < data.length) {
-      setExpandedSections(_range(0, data.length));
-    } else {
-      setExpandedSections([]);
-    }
-  }, [ data, expandedSections.length ]);
-
-  const handleReset = React.useCallback(() => {
-    setId((id) => id + 1);
-  }, []);
-
-  if (data.length === 0) {
-    return null;
-  }
-
-  return (
-    <>
-      <Flex mb={ 3 }>
-        <Box fontWeight={ 500 } mr="auto">Contract information</Box>
-        { data.length > 1 && (
-          <Link onClick={ handleExpandAll }>
-            { expandedSections.length === data.length ? 'Collapse' : 'Expand' } all
-          </Link>
-        ) }
-        <Link onClick={ handleReset } ml={ 3 }>Reset</Link>
-      </Flex>
-      <Accordion allowMultiple position="relative" onChange={ handleAccordionStateChange } index={ expandedSections }>
-        { data.map((item, index) => (
-          <ContractMethodsAccordionItem
-            key={ index }
-            data={ item }
-            id={ id }
-            index={ index }
-            addressHash={ addressHash }
-            renderContent={ renderItemContent as (item: SmartContractMethod, index: number, id: number) => React.ReactNode }
-            tab={ tab }
-          />
-        )) }
-      </Accordion>
-    </>
-  );
-};
-
-export default React.memo(ContractMethodsAccordion) as typeof ContractMethodsAccordion;
diff --git a/ui/address/contract/ContractMethodsAccordionItem.tsx b/ui/address/contract/ContractMethodsAccordionItem.tsx
deleted file mode 100644
index d69222cdad..0000000000
--- a/ui/address/contract/ContractMethodsAccordionItem.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Tooltip, useClipboard, useDisclosure } from '@chakra-ui/react';
-import React from 'react';
-import { Element } from 'react-scroll';
-
-import type { SmartContractMethod } from 'types/api/contract';
-
-import { route } from 'nextjs-routes';
-
-import config from 'configs/app';
-import Hint from 'ui/shared/Hint';
-import IconSvg from 'ui/shared/IconSvg';
-
-interface Props<T extends SmartContractMethod> {
-  data: T;
-  index: number;
-  id: number;
-  addressHash?: string;
-  renderContent: (item: T, index: number, id: number) => React.ReactNode;
-  tab: string;
-}
-
-const ContractMethodsAccordionItem = <T extends SmartContractMethod>({ data, index, id, addressHash, renderContent, tab }: Props<T>) => {
-  const url = React.useMemo(() => {
-    if (!('method_id' in data)) {
-      return '';
-    }
-
-    return config.app.baseUrl + route({
-      pathname: '/address/[hash]',
-      query: {
-        hash: addressHash ?? '',
-        tab,
-      },
-      hash: data.method_id,
-    });
-  }, [ addressHash, data, tab ]);
-
-  const { hasCopied, onCopy } = useClipboard(url, 1000);
-  const { isOpen, onOpen, onClose } = useDisclosure();
-
-  const handleCopyLinkClick = React.useCallback((event: React.MouseEvent) => {
-    event.stopPropagation();
-    onCopy();
-  }, [ onCopy ]);
-
-  return (
-    <AccordionItem as="section" _first={{ borderTopWidth: 0 }} _last={{ borderBottomWidth: 0 }}>
-      <Element as="h2" name={ 'method_id' in data ? `method_${ data.method_id }` : '' }>
-        <AccordionButton px={ 0 } py={ 3 } _hover={{ bgColor: 'inherit' }} wordBreak="break-all" textAlign="left">
-          { 'method_id' in data && (
-            <Tooltip label={ hasCopied ? 'Copied!' : 'Copy link' } isOpen={ isOpen || hasCopied } onClose={ onClose }>
-              <Box
-                boxSize={ 5 }
-                color="text_secondary"
-                _hover={{ color: 'link_hovered' }}
-                mr={ 2 }
-                onClick={ handleCopyLinkClick }
-                onMouseEnter={ onOpen }
-                onMouseLeave={ onClose }
-              >
-                <IconSvg name="link" boxSize={ 5 }/>
-              </Box>
-            </Tooltip>
-          ) }
-          <Box as="span" fontWeight={ 500 } mr={ 1 }>
-            { index + 1 }. { data.type === 'fallback' || data.type === 'receive' ? data.type : data.name }
-          </Box>
-          { data.type === 'fallback' && (
-            <Hint
-              label={
-                `The fallback function is executed on a call to the contract if none of the other functions match 
-                    the given function signature, or if no data was supplied at all and there is no receive Ether function. 
-                    The fallback function always receives data, but in order to also receive Ether it must be marked payable.`
-              }/>
-          ) }
-          { data.type === 'receive' && (
-            <Hint
-              label={
-                `The receive function is executed on a call to the contract with empty calldata. 
-                    This is the function that is executed on plain Ether transfers (e.g. via .send() or .transfer()). 
-                    If no such function exists, but a payable fallback function exists, the fallback function will be called on a plain Ether transfer. 
-                    If neither a receive Ether nor a payable fallback function is present, 
-                    the contract cannot receive Ether through regular transactions and throws an exception.`
-              }/>
-          ) }
-          <AccordionIcon/>
-        </AccordionButton>
-      </Element>
-      <AccordionPanel pb={ 4 } pr={ 0 } pl="28px" w="calc(100% - 6px)">
-        { renderContent(data, index, id) }
-      </AccordionPanel>
-    </AccordionItem>
-  );
-};
-
-export default React.memo(ContractMethodsAccordionItem);
diff --git a/ui/address/contract/ContractRead.pw.tsx b/ui/address/contract/ContractRead.pw.tsx
deleted file mode 100644
index d540c1c07e..0000000000
--- a/ui/address/contract/ContractRead.pw.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { test, expect } from '@playwright/experimental-ct-react';
-import React from 'react';
-
-import * as contractMethodsMock from 'mocks/contract/methods';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-
-import ContractRead from './ContractRead';
-
-const addressHash = 'hash';
-const CONTRACT_READ_METHODS_API_URL = buildApiUrl('contract_methods_read', { hash: addressHash }) + '?is_custom_abi=false';
-const CONTRACT_QUERY_METHOD_API_URL = buildApiUrl('contract_method_query', { hash: addressHash }) + '?is_custom_abi=false';
-const hooksConfig = {
-  router: {
-    query: { hash: addressHash },
-  },
-};
-
-test('base view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(CONTRACT_READ_METHODS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMethodsMock.read),
-  }));
-  await page.route(CONTRACT_QUERY_METHOD_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMethodsMock.readResultSuccess),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <ContractRead/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  await component.getByText(/expand all/i).click();
-
-  await expect(component).toHaveScreenshot();
-
-  await component.getByPlaceholder(/address/i).type('0xa113Ce24919C08a26C952E81681dAc861d6a2466');
-  await component.getByText(/read/i).click();
-
-  await component.getByText(/wei/i).click();
-
-  await expect(component).toHaveScreenshot();
-});
diff --git a/ui/address/contract/ContractRead.tsx b/ui/address/contract/ContractRead.tsx
deleted file mode 100644
index 88330196ea..0000000000
--- a/ui/address/contract/ContractRead.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { Alert, Flex } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
-import React from 'react';
-
-import type { SmartContractReadMethod, SmartContractQueryMethodRead } from 'types/api/contract';
-
-import useApiFetch from 'lib/api/useApiFetch';
-import useApiQuery from 'lib/api/useApiQuery';
-import getQueryParamString from 'lib/router/getQueryParamString';
-import ContractMethodsAccordion from 'ui/address/contract/ContractMethodsAccordion';
-import ContentLoader from 'ui/shared/ContentLoader';
-import DataFetchAlert from 'ui/shared/DataFetchAlert';
-
-import ContractConnectWallet from './ContractConnectWallet';
-import ContractCustomAbiAlert from './ContractCustomAbiAlert';
-import ContractImplementationAddress from './ContractImplementationAddress';
-import ContractMethodCallable from './ContractMethodCallable';
-import ContractMethodConstant from './ContractMethodConstant';
-import ContractReadResult from './ContractReadResult';
-import useWatchAccount from './useWatchAccount';
-
-const ContractRead = () => {
-  const apiFetch = useApiFetch();
-  const account = useWatchAccount();
-  const router = useRouter();
-
-  const tab = getQueryParamString(router.query.tab);
-  const addressHash = getQueryParamString(router.query.hash);
-  const isProxy = tab === 'read_proxy';
-  const isCustomAbi = tab === 'read_custom_methods';
-
-  const { data, isPending, isError } = useApiQuery(isProxy ? 'contract_methods_read_proxy' : 'contract_methods_read', {
-    pathParams: { hash: addressHash },
-    queryParams: {
-      is_custom_abi: isCustomAbi ? 'true' : 'false',
-      from: account?.address,
-    },
-    queryOptions: {
-      enabled: Boolean(addressHash),
-    },
-  });
-
-  const handleMethodFormSubmit = React.useCallback(async(item: SmartContractReadMethod, args: Array<string | Array<unknown>>) => {
-    return apiFetch<'contract_method_query', SmartContractQueryMethodRead>('contract_method_query', {
-      pathParams: { hash: addressHash },
-      queryParams: {
-        is_custom_abi: isCustomAbi ? 'true' : 'false',
-      },
-      fetchParams: {
-        method: 'POST',
-        body: {
-          args,
-          method_id: item.method_id,
-          contract_type: isProxy ? 'proxy' : 'regular',
-          from: account?.address,
-        },
-      },
-    });
-  }, [ account?.address, addressHash, apiFetch, isCustomAbi, isProxy ]);
-
-  const renderItemContent = React.useCallback((item: SmartContractReadMethod, index: number, id: number) => {
-    if (item.error) {
-      return <Alert status="error" fontSize="sm" wordBreak="break-word">{ item.error }</Alert>;
-    }
-
-    if (item.outputs.some(({ value }) => value !== undefined && value !== null)) {
-      return (
-        <Flex flexDir="column" rowGap={ 1 }>
-          { item.outputs.map((output, index) => <ContractMethodConstant key={ index } data={ output }/>) }
-        </Flex>
-      );
-    }
-
-    return (
-      <ContractMethodCallable
-        key={ id + '_' + index }
-        data={ item }
-        onSubmit={ handleMethodFormSubmit }
-        resultComponent={ ContractReadResult }
-      />
-    );
-  }, [ handleMethodFormSubmit ]);
-
-  if (isError) {
-    return <DataFetchAlert/>;
-  }
-
-  if (isPending) {
-    return <ContentLoader/>;
-  }
-
-  if (data.length === 0 && !isProxy) {
-    return <span>No public read functions were found for this contract.</span>;
-  }
-
-  return (
-    <>
-      { isCustomAbi && <ContractCustomAbiAlert/> }
-      { account && <ContractConnectWallet/> }
-      { isProxy && <ContractImplementationAddress hash={ addressHash }/> }
-      <ContractMethodsAccordion data={ data } addressHash={ addressHash } renderItemContent={ renderItemContent } tab={ tab }/>
-    </>
-  );
-};
-
-export default React.memo(ContractRead);
diff --git a/ui/address/contract/ContractReadResult.pw.tsx b/ui/address/contract/ContractReadResult.pw.tsx
deleted file mode 100644
index 35b4991a0c..0000000000
--- a/ui/address/contract/ContractReadResult.pw.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { test, expect } from '@playwright/experimental-ct-react';
-import React from 'react';
-
-import type { ContractMethodReadResult } from './types';
-
-import * as contractMethodsMock from 'mocks/contract/methods';
-import TestApp from 'playwright/TestApp';
-
-import ContractReadResult from './ContractReadResult';
-
-const item = contractMethodsMock.read[0];
-const onSettle = () => Promise.resolve();
-
-test.use({ viewport: { width: 500, height: 500 } });
-
-test('default error', async({ mount }) => {
-  const result: ContractMethodReadResult = {
-    is_error: true,
-    result: {
-      error: 'I am an error',
-    },
-  };
-  const component = await mount(
-    <TestApp>
-      <ContractReadResult item={ item } onSettle={ onSettle } result={ result }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('error with code', async({ mount }) => {
-  const result: ContractMethodReadResult = {
-    is_error: true,
-    result: {
-      message: 'I am an error',
-      code: -32017,
-    },
-  };
-  const component = await mount(
-    <TestApp>
-      <ContractReadResult item={ item } onSettle={ onSettle } result={ result }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('raw error', async({ mount }) => {
-  const result: ContractMethodReadResult = {
-    is_error: true,
-    result: {
-      raw: '49276d20616c7761797320726576657274696e67207769746820616e206572726f72',
-    },
-  };
-  const component = await mount(
-    <TestApp>
-      <ContractReadResult item={ item } onSettle={ onSettle } result={ result }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('complex error', async({ mount }) => {
-  const result: ContractMethodReadResult = {
-    is_error: true,
-    result: {
-      method_call: 'SomeCustomError(address addr, uint256 balance)',
-      method_id: '50289a9f',
-      parameters: [
-        { name: 'addr', type: 'address', value: '0x850e73b42f48e91ebaedf8f00a74f6147e485c5a' },
-        { name: 'balance', type: 'uint256', value: '14' },
-      ],
-    },
-  };
-  const component = await mount(
-    <TestApp>
-      <ContractReadResult item={ item } onSettle={ onSettle } result={ result }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('success', async({ mount }) => {
-  const result: ContractMethodReadResult = {
-    is_error: false,
-    result: {
-      names: [ 'address' ],
-      output: [ { type: 'address', value: '0x0000000000000000000000000000000000000000' } ],
-    },
-  };
-  const component = await mount(
-    <TestApp>
-      <ContractReadResult item={ item } onSettle={ onSettle } result={ result }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('complex success', async({ mount }) => {
-  const result: ContractMethodReadResult = {
-    is_error: false,
-    result: {
-      names: [
-        [
-          'data',
-          [ 'totalSupply', 'owner', 'symbol' ],
-        ],
-        'supports721',
-        'page',
-      ],
-      output: [
-        {
-          type: 'tuple[uint256,address,string]',
-          value: [ 1000, '0xe150519ae293922cfe6217feba3add4726f5e851', 'AOC_INCUBATORS' ],
-        },
-        { type: 'bool', value: 'true' },
-        { type: 'uint256[]', value: [ 1, 2, 3, 4, 5 ] },
-      ],
-    },
-  };
-  const component = await mount(
-    <TestApp>
-      <ContractReadResult item={ item } onSettle={ onSettle } result={ result }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
diff --git a/ui/address/contract/ContractReadResult.tsx b/ui/address/contract/ContractReadResult.tsx
deleted file mode 100644
index 28f701eb9b..0000000000
--- a/ui/address/contract/ContractReadResult.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { Alert, Box, chakra, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-import type { ContractMethodReadResult } from './types';
-import type { SmartContractQueryMethodReadSuccess, SmartContractReadMethod } from 'types/api/contract';
-
-import hexToUtf8 from 'lib/hexToUtf8';
-
-const TUPLE_TYPE_REGEX = /\[(.+)\]/;
-
-const ContractReadResultError = ({ children }: {children: React.ReactNode}) => {
-  return (
-    <Alert status="error" mt={ 3 } p={ 4 } borderRadius="md" fontSize="sm" wordBreak="break-word" whiteSpace="pre-wrap">
-      { children }
-    </Alert>
-  );
-};
-
-interface ItemProps {
-  output: SmartContractQueryMethodReadSuccess['result']['output'][0];
-  name: SmartContractQueryMethodReadSuccess['result']['names'][0];
-}
-
-const ContractReadResultItem = ({ output, name }: ItemProps) => {
-  if (Array.isArray(name)) {
-    const [ structName, argNames ] = name;
-    const argTypes = output.type.match(TUPLE_TYPE_REGEX)?.[1].split(',');
-
-    return (
-      <>
-        <p>
-          <chakra.span fontWeight={ 500 }>  { structName }</chakra.span>
-          <span> ({ output.type }) :</span>
-        </p>
-        { argNames.map((argName, argIndex) => {
-          return (
-            <p key={ argName }>
-              <chakra.span fontWeight={ 500 }>      { argName }</chakra.span>
-              <span>{ argTypes?.[argIndex] ? ` (${ argTypes[argIndex] })` : '' } : { String(output.value[argIndex]) }</span>
-            </p>
-          );
-        }) }
-      </>
-    );
-  }
-
-  return (
-    <p>
-      <span>  </span>
-      { name && <chakra.span fontWeight={ 500 }>{ name } </chakra.span> }
-      <span>({ output.type }) : { String(output.value) }</span>
-    </p>
-  );
-};
-
-interface Props {
-  item: SmartContractReadMethod;
-  result: ContractMethodReadResult;
-  onSettle: () => void;
-}
-
-const ContractReadResult = ({ item, result, onSettle }: Props) => {
-  const resultBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
-
-  React.useEffect(() => {
-    onSettle();
-  }, [ onSettle ]);
-
-  if ('status' in result) {
-    return <ContractReadResultError>{ result.statusText }</ContractReadResultError>;
-  }
-
-  if (result.is_error) {
-    if ('error' in result.result) {
-      return <ContractReadResultError>{ result.result.error }</ContractReadResultError>;
-    }
-
-    if ('message' in result.result) {
-      return <ContractReadResultError>[{ result.result.code }] { result.result.message }</ContractReadResultError>;
-    }
-
-    if ('raw' in result.result) {
-      return <ContractReadResultError>{ `Revert reason: ${ hexToUtf8(result.result.raw) }` }</ContractReadResultError>;
-    }
-
-    if ('method_id' in result.result) {
-      return <ContractReadResultError>{ JSON.stringify(result.result, undefined, 2) }</ContractReadResultError>;
-    }
-
-    return <ContractReadResultError>Something went wrong.</ContractReadResultError>;
-  }
-
-  return (
-    <Box mt={ 3 } p={ 4 } borderRadius="md" bgColor={ resultBgColor } fontSize="sm" whiteSpace="break-spaces" wordBreak="break-all">
-      <p>
-        [ <chakra.span fontWeight={ 500 }>{ 'name' in item ? item.name : '' }</chakra.span> method response ]
-      </p>
-      <p>[</p>
-      { result.result.output.map((output, index) => <ContractReadResultItem key={ index } output={ output } name={ result.result.names[index] }/>) }
-      <p>]</p>
-    </Box>
-  );
-};
-
-export default React.memo(ContractReadResult);
diff --git a/ui/address/contract/ContractSourceAddressSelector.tsx b/ui/address/contract/ContractSourceAddressSelector.tsx
new file mode 100644
index 0000000000..0bb39c6f20
--- /dev/null
+++ b/ui/address/contract/ContractSourceAddressSelector.tsx
@@ -0,0 +1,80 @@
+import { chakra, Flex, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import LinkNewTab from 'ui/shared/links/LinkNewTab';
+import Select from 'ui/shared/select/Select';
+
+export interface Item {
+  address: string;
+  name?: string | null | undefined;
+}
+
+interface Props {
+  className?: string;
+  label: string;
+  selectedItem: Item;
+  onItemSelect: (item: Item) => void;
+  items: Array<Item>;
+  isLoading?: boolean;
+}
+
+const ContractSourceAddressSelector = ({ className, selectedItem, onItemSelect, items, isLoading, label }: Props) => {
+
+  const handleItemSelect = React.useCallback((value: string) => {
+    const nextOption = items.find(({ address }) => address === value);
+    if (nextOption) {
+      onItemSelect(nextOption);
+    }
+  }, [ items, onItemSelect ]);
+
+  const options = React.useMemo(() => {
+    return items.map(({ address, name }) => ({ label: name || address, value: address }));
+  }, [ items ]);
+
+  if (isLoading) {
+    return <Skeleton h={ 6 } w={{ base: '300px', lg: '500px' }} className={ className }/>;
+  }
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  if (items.length === 1) {
+    return (
+      <Flex flexWrap="wrap" columnGap={ 3 } rowGap={ 2 } className={ className }>
+        <chakra.span fontWeight={ 500 } fontSize="sm">{ label }</chakra.span>
+        <AddressEntity
+          address={{ hash: items[0].address, is_contract: true, is_verified: true }}
+        />
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex columnGap={ 3 } rowGap={ 2 } alignItems="center" className={ className }>
+      <chakra.span fontWeight={ 500 } fontSize="sm">{ label }</chakra.span>
+      <Select
+        options={ options }
+        name="contract-source-address"
+        defaultValue={ options[0].value }
+        onChange={ handleItemSelect }
+        isLoading={ isLoading }
+        maxW={{ base: '180px', lg: 'none' }}
+        fontWeight={ 600 }
+      />
+      <Flex columnGap={ 2 } alignItems="center">
+        <CopyToClipboard text={ selectedItem.address } ml={ 0 }/>
+        <LinkNewTab
+          label="Open contract details page in new tab"
+          href={ route({ pathname: '/address/[hash]', query: { hash: selectedItem.address, tab: 'contract' } }) }
+        />
+      </Flex>
+    </Flex>
+  );
+};
+
+export default React.memo(chakra(ContractSourceAddressSelector));
diff --git a/ui/address/contract/ContractSourceCode.tsx b/ui/address/contract/ContractSourceCode.tsx
index 4d5356eb65..7a3be99133 100644
--- a/ui/address/contract/ContractSourceCode.tsx
+++ b/ui/address/contract/ContractSourceCode.tsx
@@ -1,27 +1,19 @@
-import { Box, Flex, Select, Skeleton, Text, Tooltip } from '@chakra-ui/react';
+import { Flex, Skeleton, Text, Tooltip } from '@chakra-ui/react';
 import React from 'react';
 
 import type { SmartContract } from 'types/api/contract';
-import type { ArrayElement } from 'types/utils';
 
 import { route } from 'nextjs-routes';
 
-import useApiQuery from 'lib/api/useApiQuery';
-import * as stubs from 'stubs/contract';
+import formatLanguageName from 'lib/contracts/formatLanguageName';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import CodeEditor from 'ui/shared/monaco/CodeEditor';
 import formatFilePath from 'ui/shared/monaco/utils/formatFilePath';
 
 import ContractCodeIdes from './ContractCodeIdes';
 import ContractExternalLibraries from './ContractExternalLibraries';
 
-const SOURCE_CODE_OPTIONS = [
-  { id: 'primary', label: 'Proxy' } as const,
-  { id: 'secondary', label: 'Implementation' } as const,
-];
-type SourceCodeType = ArrayElement<typeof SOURCE_CODE_OPTIONS>['id'];
-
 function getEditorData(contractInfo: SmartContract | undefined) {
   if (!contractInfo || !contractInfo.source_code) {
     return undefined;
@@ -33,6 +25,10 @@ function getEditorData(contractInfo: SmartContract | undefined) {
         return 'vy';
       case 'yul':
         return 'yul';
+      case 'scilla':
+        return 'scilla';
+      case 'stylus_rust':
+        return 'rs';
       default:
         return 'sol';
     }
@@ -45,66 +41,35 @@ function getEditorData(contractInfo: SmartContract | undefined) {
 }
 
 interface Props {
-  address?: string;
-  implementationAddress?: string;
+  data: SmartContract | undefined;
+  sourceAddress: string;
+  isLoading?: boolean;
 }
 
-const ContractSourceCode = ({ address, implementationAddress }: Props) => {
-  const [ sourceType, setSourceType ] = React.useState<SourceCodeType>('primary');
-
-  const primaryContractQuery = useApiQuery('contract', {
-    pathParams: { hash: address },
-    queryOptions: {
-      enabled: Boolean(address),
-      refetchOnMount: false,
-      placeholderData: stubs.CONTRACT_CODE_VERIFIED,
-    },
-  });
-
-  const secondaryContractQuery = useApiQuery('contract', {
-    pathParams: { hash: implementationAddress },
-    queryOptions: {
-      enabled: Boolean(implementationAddress),
-      refetchOnMount: false,
-      placeholderData: stubs.CONTRACT_CODE_VERIFIED,
-    },
-  });
-
-  const isLoading = implementationAddress ?
-    primaryContractQuery.isPlaceholderData || secondaryContractQuery.isPlaceholderData :
-    primaryContractQuery.isPlaceholderData;
-
-  const primaryEditorData = React.useMemo(() => {
-    return getEditorData(primaryContractQuery.data);
-  }, [ primaryContractQuery.data ]);
-
-  const secondaryEditorData = React.useMemo(() => {
-    return secondaryContractQuery.isPlaceholderData ? undefined : getEditorData(secondaryContractQuery.data);
-  }, [ secondaryContractQuery.data, secondaryContractQuery.isPlaceholderData ]);
-
-  const activeContract = sourceType === 'secondary' ? secondaryContractQuery.data : primaryContractQuery.data;
-  const activeContractData = sourceType === 'secondary' ? secondaryEditorData : primaryEditorData;
+export const ContractSourceCode = ({ data, isLoading, sourceAddress }: Props) => {
+
+  const editorData = React.useMemo(() => {
+    return getEditorData(data);
+  }, [ data ]);
 
   const heading = (
     <Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>
       <span>Contract source code</span>
-      { activeContract?.language &&
-        <Text whiteSpace="pre" as="span" variant="secondary" textTransform="capitalize"> ({ activeContract.language })</Text> }
+      { data?.language &&
+        <Text whiteSpace="pre" as="span" variant="secondary"> ({ formatLanguageName(data.language) })</Text> }
     </Skeleton>
   );
 
-  const diagramLinkAddress = (() => {
-    if (!activeContract?.can_be_visualized_via_sol2uml) {
-      return;
-    }
-    return sourceType === 'secondary' ? implementationAddress : address;
-  })();
+  const externalLibraries = data?.external_libraries ?
+    <ContractExternalLibraries data={ data.external_libraries } isLoading={ isLoading }/> :
+    null;
 
-  const diagramLink = diagramLinkAddress ? (
+  const diagramLink = data?.can_be_visualized_via_sol2uml ? (
     <Tooltip label="Visualize contract code using Sol2Uml JS library">
       <LinkInternal
-        href={ route({ pathname: '/visualize/sol2uml', query: { address: diagramLinkAddress } }) }
+        href={ route({ pathname: '/visualize/sol2uml', query: { address: sourceAddress } }) }
         ml={{ base: '0', lg: 'auto' }}
+        isLoading={ isLoading }
       >
         <Skeleton isLoaded={ !isLoading }>
           View UML diagram
@@ -113,82 +78,45 @@ const ContractSourceCode = ({ address, implementationAddress }: Props) => {
     </Tooltip>
   ) : null;
 
-  const copyToClipboard = activeContractData?.length === 1 ?
-    <CopyToClipboard text={ activeContractData[0].source_code } isLoading={ isLoading } ml={{ base: 'auto', lg: diagramLink ? '0' : 'auto' }}/> :
+  const ides = data?.language && [ 'solidity', 'vyper', 'yul' ].includes(data.language) ?
+    <ContractCodeIdes hash={ sourceAddress } isLoading={ isLoading }/> :
     null;
 
-  const ides = sourceType === 'secondary' ? <ContractCodeIdes hash={ implementationAddress }/> : <ContractCodeIdes hash={ address }/>;
-
-  const handleSelectChange = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
-    setSourceType(event.target.value as SourceCodeType);
-  }, []);
-
-  const editorSourceTypeSelector = !secondaryContractQuery.isPlaceholderData && secondaryContractQuery.data?.source_code ? (
-    <Select
-      size="xs"
-      value={ sourceType }
-      onChange={ handleSelectChange }
-      focusBorderColor="none"
-      w="auto"
-      fontWeight={ 600 }
-      borderRadius="base"
-    >
-      { SOURCE_CODE_OPTIONS.map((option) => <option key={ option.id } value={ option.id }>{ option.label }</option>) }
-    </Select>
-  ) : null;
-
-  const externalLibraries = (() => {
-    if (sourceType === 'secondary') {
-      return secondaryContractQuery.data?.external_libraries && <ContractExternalLibraries data={ secondaryContractQuery.data.external_libraries }/>;
-    }
-
-    return primaryContractQuery.data?.external_libraries && <ContractExternalLibraries data={ primaryContractQuery.data.external_libraries }/>;
-  })();
+  const copyToClipboard = data && editorData?.length === 1 ? (
+    <CopyToClipboard
+      text={ data.source_code }
+      isLoading={ isLoading }
+      ml={{ base: 'auto', lg: diagramLink ? '0' : 'auto' }}
+    />
+  ) :
+    null;
 
   const content = (() => {
     if (isLoading) {
       return <Skeleton h="557px" w="100%"/>;
     }
 
-    if (!primaryEditorData) {
+    if (!editorData) {
       return null;
     }
 
     return (
-      <>
-        <Box display={ sourceType === 'primary' ? 'block' : 'none' }>
-          <CodeEditor
-            data={ primaryEditorData }
-            remappings={ primaryContractQuery.data?.compiler_settings?.remappings }
-            libraries={ primaryContractQuery.data?.external_libraries ?? undefined }
-            language={ primaryContractQuery.data?.language ?? undefined }
-            mainFile={ primaryEditorData[0]?.file_path }
-          />
-        </Box>
-        { secondaryEditorData && (
-          <Box display={ sourceType === 'secondary' ? 'block' : 'none' }>
-            <CodeEditor
-              data={ secondaryEditorData }
-              remappings={ secondaryContractQuery.data?.compiler_settings?.remappings }
-              libraries={ secondaryContractQuery.data?.external_libraries ?? undefined }
-              language={ secondaryContractQuery.data?.language ?? undefined }
-              mainFile={ secondaryEditorData?.[0]?.file_path }
-            />
-          </Box>
-        ) }
-      </>
+      <CodeEditor
+        key={ sourceAddress }
+        data={ editorData }
+        remappings={ data?.compiler_settings?.remappings }
+        libraries={ data?.external_libraries ?? undefined }
+        language={ data?.language ?? undefined }
+        mainFile={ editorData[0]?.file_path }
+        contractName={ data?.name ?? undefined }
+      />
     );
   })();
 
-  if (!primaryEditorData) {
-    return null;
-  }
-
   return (
     <section>
       <Flex alignItems="center" mb={ 3 } columnGap={ 3 } rowGap={ 2 } flexWrap="wrap">
         { heading }
-        { editorSourceTypeSelector }
         { externalLibraries }
         { diagramLink }
         { ides }
diff --git a/ui/address/contract/ContractWrite.pw.tsx b/ui/address/contract/ContractWrite.pw.tsx
deleted file mode 100644
index bf3007d2e0..0000000000
--- a/ui/address/contract/ContractWrite.pw.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { test, expect } from '@playwright/experimental-ct-react';
-import React from 'react';
-
-import * as contractMethodsMock from 'mocks/contract/methods';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-
-import ContractWrite from './ContractWrite';
-
-const addressHash = 'hash';
-const CONTRACT_WRITE_METHODS_API_URL = buildApiUrl('contract_methods_write', { hash: addressHash }) + '?is_custom_abi=false';
-const hooksConfig = {
-  router: {
-    query: { hash: addressHash },
-  },
-};
-
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(CONTRACT_WRITE_METHODS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMethodsMock.write),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <ContractWrite/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  await component.getByText(/expand all/i).click();
-
-  await expect(component).toHaveScreenshot();
-});
diff --git a/ui/address/contract/ContractWrite.tsx b/ui/address/contract/ContractWrite.tsx
deleted file mode 100644
index b199b99291..0000000000
--- a/ui/address/contract/ContractWrite.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { useRouter } from 'next/router';
-import React from 'react';
-import { useAccount, useWalletClient, useNetwork, useSwitchNetwork } from 'wagmi';
-
-import type { SmartContractWriteMethod } from 'types/api/contract';
-
-import config from 'configs/app';
-import useApiQuery from 'lib/api/useApiQuery';
-import getQueryParamString from 'lib/router/getQueryParamString';
-import ContractMethodsAccordion from 'ui/address/contract/ContractMethodsAccordion';
-import ContentLoader from 'ui/shared/ContentLoader';
-import DataFetchAlert from 'ui/shared/DataFetchAlert';
-
-import ContractConnectWallet from './ContractConnectWallet';
-import ContractCustomAbiAlert from './ContractCustomAbiAlert';
-import ContractImplementationAddress from './ContractImplementationAddress';
-import ContractMethodCallable from './ContractMethodCallable';
-import ContractWriteResult from './ContractWriteResult';
-import useContractAbi from './useContractAbi';
-import { getNativeCoinValue, prepareAbi } from './utils';
-
-const ContractWrite = () => {
-  const { data: walletClient } = useWalletClient();
-  const { isConnected } = useAccount();
-  const { chain } = useNetwork();
-  const { switchNetworkAsync } = useSwitchNetwork();
-
-  const router = useRouter();
-
-  const tab = getQueryParamString(router.query.tab);
-  const addressHash = getQueryParamString(router.query.hash);
-  const isProxy = tab === 'write_proxy';
-  const isCustomAbi = tab === 'write_custom_methods';
-
-  const { data, isPending, isError } = useApiQuery(isProxy ? 'contract_methods_write_proxy' : 'contract_methods_write', {
-    pathParams: { hash: addressHash },
-    queryParams: {
-      is_custom_abi: isCustomAbi ? 'true' : 'false',
-    },
-    queryOptions: {
-      enabled: Boolean(addressHash),
-    },
-  });
-
-  const contractAbi = useContractAbi({ addressHash, isProxy, isCustomAbi });
-
-  const handleMethodFormSubmit = React.useCallback(async(item: SmartContractWriteMethod, args: Array<string | Array<unknown>>) => {
-    if (!isConnected) {
-      throw new Error('Wallet is not connected');
-    }
-
-    if (chain?.id && String(chain.id) !== config.chain.id) {
-      await switchNetworkAsync?.(Number(config.chain.id));
-    }
-
-    if (!contractAbi) {
-      throw new Error('Something went wrong. Try again later.');
-    }
-
-    if (item.type === 'receive' || item.type === 'fallback') {
-      const value = getNativeCoinValue(args[0]);
-      const hash = await walletClient?.sendTransaction({
-        to: addressHash as `0x${ string }` | undefined,
-        value,
-      });
-      return { hash };
-    }
-
-    const _args = 'stateMutability' in item && item.stateMutability === 'payable' ? args.slice(0, -1) : args;
-    const value = 'stateMutability' in item && item.stateMutability === 'payable' ? getNativeCoinValue(args[args.length - 1]) : undefined;
-    const methodName = item.name;
-
-    if (!methodName) {
-      throw new Error('Method name is not defined');
-    }
-
-    const abi = prepareAbi(contractAbi, item);
-    const hash = await walletClient?.writeContract({
-      args: _args,
-      abi,
-      functionName: methodName,
-      address: addressHash as `0x${ string }`,
-      value: value as undefined,
-    });
-
-    return { hash };
-  }, [ isConnected, chain, contractAbi, walletClient, addressHash, switchNetworkAsync ]);
-
-  const renderItemContent = React.useCallback((item: SmartContractWriteMethod, index: number, id: number) => {
-    return (
-      <ContractMethodCallable
-        key={ id + '_' + index }
-        data={ item }
-        onSubmit={ handleMethodFormSubmit }
-        resultComponent={ ContractWriteResult }
-        isWrite
-      />
-    );
-  }, [ handleMethodFormSubmit ]);
-
-  if (isError) {
-    return <DataFetchAlert/>;
-  }
-
-  if (isPending) {
-    return <ContentLoader/>;
-  }
-
-  if (data.length === 0 && !isProxy) {
-    return <span>No public write functions were found for this contract.</span>;
-  }
-
-  return (
-    <>
-      { isCustomAbi && <ContractCustomAbiAlert/> }
-      <ContractConnectWallet/>
-      { isProxy && <ContractImplementationAddress hash={ addressHash }/> }
-      <ContractMethodsAccordion data={ data } addressHash={ addressHash } renderItemContent={ renderItemContent } tab={ tab }/>
-    </>
-  );
-};
-
-export default React.memo(ContractWrite);
diff --git a/ui/address/contract/ContractWriteResult.tsx b/ui/address/contract/ContractWriteResult.tsx
deleted file mode 100644
index 9fed0e271e..0000000000
--- a/ui/address/contract/ContractWriteResult.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import { useWaitForTransaction } from 'wagmi';
-
-import type { ContractMethodWriteResult } from './types';
-
-import ContractWriteResultDumb from './ContractWriteResultDumb';
-
-interface Props {
-  result: ContractMethodWriteResult;
-  onSettle: () => void;
-}
-
-const ContractWriteResult = ({ result, onSettle }: Props) => {
-  const txHash = result && 'hash' in result ? result.hash as `0x${ string }` : undefined;
-  const txInfo = useWaitForTransaction({
-    hash: txHash,
-  });
-
-  return <ContractWriteResultDumb result={ result } onSettle={ onSettle } txInfo={ txInfo }/>;
-};
-
-export default React.memo(ContractWriteResult);
diff --git a/ui/address/contract/ContractWriteResultDumb.pw.tsx b/ui/address/contract/ContractWriteResultDumb.pw.tsx
deleted file mode 100644
index e082542ff0..0000000000
--- a/ui/address/contract/ContractWriteResultDumb.pw.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { test, expect } from '@playwright/experimental-ct-react';
-import React from 'react';
-
-import TestApp from 'playwright/TestApp';
-
-import ContractWriteResultDumb from './ContractWriteResultDumb';
-
-test('loading', async({ mount }) => {
-  const props = {
-    txInfo: {
-      status: 'loading' as const,
-      error: null,
-    },
-    result: {
-      hash: '0x363574E6C5C71c343d7348093D84320c76d5Dd29' as `0x${ string }`,
-    },
-    onSettle: () => {},
-  };
-
-  const component = await mount(
-    <TestApp>
-      <ContractWriteResultDumb { ...props }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('success', async({ mount }) => {
-  const props = {
-    txInfo: {
-      status: 'success' as const,
-      error: null,
-    },
-    result: {
-      hash: '0x363574E6C5C71c343d7348093D84320c76d5Dd29' as `0x${ string }`,
-    },
-    onSettle: () => {},
-  };
-
-  const component = await mount(
-    <TestApp>
-      <ContractWriteResultDumb { ...props }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('error +@mobile', async({ mount }) => {
-  const props = {
-    txInfo: {
-      status: 'error' as const,
-      error: {
-        // eslint-disable-next-line max-len
-        message: 'missing revert data in call exception; Transaction reverted without a reason string [ See: https://links.ethers.org/v5-errors-CALL_EXCEPTION ]',
-      } as Error,
-    },
-    result: {
-      hash: '0x363574E6C5C71c343d7348093D84320c76d5Dd29' as `0x${ string }`,
-    },
-    onSettle: () => {},
-  };
-
-  const component = await mount(
-    <TestApp>
-      <ContractWriteResultDumb { ...props }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('error in result', async({ mount }) => {
-  const props = {
-    txInfo: {
-      status: 'idle' as const,
-      error: null,
-    },
-    result: {
-      message: 'wallet is not connected',
-    } as Error,
-    onSettle: () => {},
-  };
-
-  const component = await mount(
-    <TestApp>
-      <ContractWriteResultDumb { ...props }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
diff --git a/ui/address/contract/ContractWriteResultDumb.tsx b/ui/address/contract/ContractWriteResultDumb.tsx
deleted file mode 100644
index 6e734f93a1..0000000000
--- a/ui/address/contract/ContractWriteResultDumb.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { Box, chakra, Spinner } from '@chakra-ui/react';
-import React from 'react';
-
-import type { ContractMethodWriteResult } from './types';
-
-import { route } from 'nextjs-routes';
-
-import LinkInternal from 'ui/shared/LinkInternal';
-
-interface Props {
-  result: ContractMethodWriteResult;
-  onSettle: () => void;
-  txInfo: {
-    status: 'loading' | 'success' | 'error' | 'idle';
-    error: Error | null;
-  };
-}
-
-const ContractWriteResultDumb = ({ result, onSettle, txInfo }: Props) => {
-  const txHash = result && 'hash' in result ? result.hash : undefined;
-
-  React.useEffect(() => {
-    if (txInfo.status !== 'loading') {
-      onSettle();
-    }
-  }, [ onSettle, txInfo.status ]);
-
-  if (!result) {
-    return null;
-  }
-
-  const isErrorResult = 'message' in result;
-
-  const txLink = txHash ? (
-    <LinkInternal href={ route({ pathname: '/tx/[hash]', query: { hash: txHash } }) }>View transaction details</LinkInternal>
-  ) : null;
-
-  const content = (() => {
-    if (isErrorResult) {
-      return (
-        <>
-          <span>Error: </span>
-          <span>{ result.message }</span>
-        </>
-      );
-    }
-
-    switch (txInfo.status) {
-      case 'success': {
-        return (
-          <>
-            <span>Transaction has been confirmed. </span>
-            { txLink }
-          </>
-        );
-      }
-
-      case 'loading': {
-        return (
-          <>
-            <Spinner size="sm" mr={ 3 }/>
-            <chakra.span verticalAlign="text-bottom">
-              { 'Waiting for transaction\'s confirmation. ' }
-              { txLink }
-            </chakra.span>
-          </>
-        );
-      }
-
-      case 'error': {
-        return (
-          <>
-            <span>Error: </span>
-            <span>{ txInfo.error ? txInfo.error.message : 'Something went wrong' } </span>
-            { txLink }
-          </>
-        );
-      }
-    }
-  })();
-
-  return (
-    <Box
-      fontSize="sm"
-      mt={ 3 }
-      alignItems="center"
-      whiteSpace="pre-wrap"
-      wordBreak="break-all"
-      color={ txInfo.status === 'error' || isErrorResult ? 'error' : undefined }
-    >
-      { content }
-    </Box>
-  );
-};
-
-export default React.memo(ContractWriteResultDumb);
diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_dark-color-mode_full-view-mobile-dark-mode-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_dark-color-mode_full-view-mobile-dark-mode-1.png
deleted file mode 100644
index 991c4e2000..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_dark-color-mode_full-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_full-view-mobile-dark-mode-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_full-view-mobile-dark-mode-1.png
deleted file mode 100644
index 371527fdcd..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_full-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_non-verified-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_non-verified-1.png
deleted file mode 100644
index a6332dac40..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_non-verified-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_self-destructed-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_self-destructed-1.png
deleted file mode 100644
index 5545e8b31f..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_self-destructed-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-via-eth-bytecode-db-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-via-eth-bytecode-db-1.png
deleted file mode 100644
index 3582332da3..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-via-eth-bytecode-db-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-via-sourcify-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-via-sourcify-1.png
deleted file mode 100644
index b797261a7a..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-via-sourcify-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-changed-byte-code-socket-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-changed-byte-code-socket-1.png
deleted file mode 100644
index 613f117789..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-changed-byte-code-socket-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-1.png
deleted file mode 100644
index 1fa16c4e84..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-2.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-2.png
deleted file mode 100644
index 1305877878..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-2.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-3.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-3.png
deleted file mode 100644
index ff7ca931ce..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-3.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-proxy-address-alert-mobile-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-proxy-address-alert-mobile-1.png
deleted file mode 100644
index f60ab9af44..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-proxy-address-alert-mobile-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-twin-address-alert-mobile-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-twin-address-alert-mobile-1.png
deleted file mode 100644
index 39196cf219..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-twin-address-alert-mobile-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_mobile_full-view-mobile-dark-mode-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_mobile_full-view-mobile-dark-mode-1.png
deleted file mode 100644
index 18dbc49d73..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_mobile_full-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_mobile_with-proxy-address-alert-mobile-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_mobile_with-proxy-address-alert-mobile-1.png
deleted file mode 100644
index b9c761a578..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_mobile_with-proxy-address-alert-mobile-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_mobile_with-twin-address-alert-mobile-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_mobile_with-twin-address-alert-mobile-1.png
deleted file mode 100644
index 2e9ff60d89..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_mobile_with-twin-address-alert-mobile-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_dark-color-mode_full-view-source-code-dark-mode-1.png b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_dark-color-mode_full-view-source-code-dark-mode-1.png
new file mode 100644
index 0000000000..65bc859a78
Binary files /dev/null and b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_dark-color-mode_full-view-source-code-dark-mode-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-abi-1.png b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-abi-1.png
new file mode 100644
index 0000000000..40ebfae091
Binary files /dev/null and b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-abi-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-bytecode-1.png b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-bytecode-1.png
new file mode 100644
index 0000000000..e82936fdc8
Binary files /dev/null and b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-bytecode-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-compiler-1.png b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-compiler-1.png
new file mode 100644
index 0000000000..f2b4f8c920
Binary files /dev/null and b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-compiler-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-source-code-dark-mode-1.png b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-source-code-dark-mode-1.png
new file mode 100644
index 0000000000..ea3251f534
Binary files /dev/null and b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-source-code-dark-mode-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_mobile-view-source-code-1.png b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_mobile-view-source-code-1.png
new file mode 100644
index 0000000000..a0d74ca0b3
Binary files /dev/null and b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_mobile-view-source-code-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_non-verified-1.png b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_non-verified-1.png
new file mode 100644
index 0000000000..7d4a2f52bd
Binary files /dev/null and b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_non-verified-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_self-destructed-1.png b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_self-destructed-1.png
new file mode 100644
index 0000000000..d13a9f2164
Binary files /dev/null and b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_self-destructed-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_verified-with-multiple-sources-1.png b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_verified-with-multiple-sources-1.png
new file mode 100644
index 0000000000..f6759f3cbb
Binary files /dev/null and b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_verified-with-multiple-sources-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_verified-with-multiple-sources-2.png b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_verified-with-multiple-sources-2.png
new file mode 100644
index 0000000000..76c0952e84
Binary files /dev/null and b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_verified-with-multiple-sources-2.png differ
diff --git a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_verified-with-multiple-sources-3.png b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_verified-with-multiple-sources-3.png
new file mode 100644
index 0000000000..9b53a7ebc4
Binary files /dev/null and b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_verified-with-multiple-sources-3.png differ
diff --git a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png
deleted file mode 100644
index 57d28fdef2..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-2.png b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-2.png
deleted file mode 100644
index 89504d9220..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-2.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_default_base-view-mobile-dark-mode-1.png
deleted file mode 100644
index 17168a8434..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_default_base-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_default_base-view-mobile-dark-mode-2.png b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_default_base-view-mobile-dark-mode-2.png
deleted file mode 100644
index 3a22929ac6..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_default_base-view-mobile-dark-mode-2.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_mobile_base-view-mobile-dark-mode-1.png b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_mobile_base-view-mobile-dark-mode-1.png
deleted file mode 100644
index 0da704eaba..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_mobile_base-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_mobile_base-view-mobile-dark-mode-2.png b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_mobile_base-view-mobile-dark-mode-2.png
deleted file mode 100644
index 3a72b3d0b0..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_mobile_base-view-mobile-dark-mode-2.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_complex-error-1.png b/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_complex-error-1.png
deleted file mode 100644
index 80741a58e9..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_complex-error-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_complex-success-1.png b/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_complex-success-1.png
deleted file mode 100644
index 695b1df2c6..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_complex-success-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_default-error-1.png b/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_default-error-1.png
deleted file mode 100644
index 31c2a142c1..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_default-error-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_error-with-code-1.png b/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_error-with-code-1.png
deleted file mode 100644
index 680fbde860..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_error-with-code-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_raw-error-1.png b/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_raw-error-1.png
deleted file mode 100644
index dfbf8524ab..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_raw-error-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_success-1.png b/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_success-1.png
deleted file mode 100644
index 0010723b55..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_success-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractWrite.pw.tsx_default_base-view-mobile-1.png b/ui/address/contract/__screenshots__/ContractWrite.pw.tsx_default_base-view-mobile-1.png
deleted file mode 100644
index eee1a2a500..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractWrite.pw.tsx_default_base-view-mobile-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractWrite.pw.tsx_mobile_base-view-mobile-1.png b/ui/address/contract/__screenshots__/ContractWrite.pw.tsx_mobile_base-view-mobile-1.png
deleted file mode 100644
index 5724e9b234..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractWrite.pw.tsx_mobile_base-view-mobile-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_error-in-result-1.png b/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_error-in-result-1.png
deleted file mode 100644
index 30a20b5510..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_error-in-result-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_error-mobile-1.png b/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_error-mobile-1.png
deleted file mode 100644
index e9ec6c1578..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_error-mobile-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_loading-1.png b/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_loading-1.png
deleted file mode 100644
index 986269100c..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_loading-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_success-1.png b/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_success-1.png
deleted file mode 100644
index 49697a5f42..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_success-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_mobile_error-mobile-1.png b/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_mobile_error-mobile-1.png
deleted file mode 100644
index ec96baa0f5..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_mobile_error-mobile-1.png and /dev/null differ
diff --git a/ui/address/contract/alerts/ContractDetailsAlertProxyPattern.pw.tsx b/ui/address/contract/alerts/ContractDetailsAlertProxyPattern.pw.tsx
new file mode 100644
index 0000000000..e6e4134db4
--- /dev/null
+++ b/ui/address/contract/alerts/ContractDetailsAlertProxyPattern.pw.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { test, expect } from 'playwright/lib';
+
+import ContractDetailsAlertProxyPattern from './ContractDetailsAlertProxyPattern';
+
+test('proxy type with link +@mobile', async({ render }) => {
+  const component = await render(<ContractDetailsAlertProxyPattern type="eip1167"/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('proxy type with link but without description', async({ render }) => {
+  const component = await render(<ContractDetailsAlertProxyPattern type="master_copy"/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('proxy type without link', async({ render }) => {
+  const component = await render(<ContractDetailsAlertProxyPattern type="basic_implementation"/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/contract/alerts/ContractDetailsAlertProxyPattern.tsx b/ui/address/contract/alerts/ContractDetailsAlertProxyPattern.tsx
new file mode 100644
index 0000000000..78b99e5e03
--- /dev/null
+++ b/ui/address/contract/alerts/ContractDetailsAlertProxyPattern.tsx
@@ -0,0 +1,89 @@
+import { Alert } from '@chakra-ui/react';
+import React from 'react';
+
+import type { SmartContractProxyType } from 'types/api/contract';
+
+import LinkExternal from 'ui/shared/links/LinkExternal';
+
+interface Props {
+  type: NonNullable<SmartContractProxyType>;
+}
+
+const PROXY_TYPES: Record<NonNullable<SmartContractProxyType>, {
+  name: string;
+  link?: string;
+  description?: string;
+}> = {
+  eip1167: {
+    name: 'EIP-1167',
+    link: 'https://eips.ethereum.org/EIPS/eip-1167',
+    description: 'Minimal proxy',
+  },
+  eip1967: {
+    name: 'EIP-1967',
+    link: 'https://eips.ethereum.org/EIPS/eip-1967',
+    description: 'Proxy storage slots',
+  },
+  eip1822: {
+    name: 'EIP-1822',
+    link: 'https://eips.ethereum.org/EIPS/eip-1822',
+    description: 'Universal upgradeable proxy standard (UUPS)',
+  },
+  eip2535: {
+    name: 'EIP-2535',
+    link: 'https://eips.ethereum.org/EIPS/eip-2535',
+    description: 'Diamond proxy',
+  },
+  eip930: {
+    name: 'ERC-930',
+    link: 'https://github.com/ethereum/EIPs/issues/930',
+    description: 'Eternal storage',
+  },
+  clone_with_immutable_arguments: {
+    name: 'Clones with immutable arguments',
+    link: 'https://github.com/wighawag/clones-with-immutable-args',
+  },
+  master_copy: {
+    name: 'Safe proxy',
+    link: 'https://github.com/safe-global/safe-smart-account',
+  },
+  comptroller: {
+    name: 'Compound protocol proxy',
+    link: 'https://github.com/compound-finance/compound-protocol',
+  },
+  basic_implementation: {
+    name: 'public implementation() getter',
+  },
+  basic_get_implementation: {
+    name: 'public getImplementation() getter',
+  },
+  unknown: {
+    name: 'Unknown proxy pattern',
+  },
+};
+
+const ContractCodeProxyPattern = ({ type }: Props) => {
+  const proxyInfo = PROXY_TYPES[type];
+
+  if (!proxyInfo || type === 'unknown') {
+    return null;
+  }
+
+  return (
+    <Alert status="warning" flexWrap="wrap" whiteSpace="pre-wrap">
+      { proxyInfo.link ? (
+        <>
+          This proxy smart-contract is detected via <LinkExternal href={ proxyInfo.link }>{ proxyInfo.name }</LinkExternal>
+          { proxyInfo.description && ` - ${ proxyInfo.description }` }
+        </>
+      ) : (
+        <>
+          This proxy smart-contract is detected via { proxyInfo.name }
+          { proxyInfo.description && ` - ${ proxyInfo.description }` }
+        </>
+      ) }
+    </Alert>
+  );
+};
+
+export default React.memo(ContractCodeProxyPattern);
diff --git a/ui/address/contract/alerts/ContractDetailsAlertVerificationSource.tsx b/ui/address/contract/alerts/ContractDetailsAlertVerificationSource.tsx
new file mode 100644
index 0000000000..3309d60593
--- /dev/null
+++ b/ui/address/contract/alerts/ContractDetailsAlertVerificationSource.tsx
@@ -0,0 +1,39 @@
+import { Alert } from '@chakra-ui/react';
+import React from 'react';
+
+import type { SmartContract } from 'types/api/contract';
+
+import LinkExternal from 'ui/shared/links/LinkExternal';
+
+interface Props {
+  data: SmartContract | undefined;
+}
+
+const ContractDetailsAlertVerificationSource = ({ data }: Props) => {
+  if (data?.is_verified_via_eth_bytecode_db) {
+    return (
+      <Alert status="warning" whiteSpace="pre-wrap" flexWrap="wrap">
+        <span>This contract has been { data.is_partially_verified ? 'partially ' : '' }verified using </span>
+        <LinkExternal
+          href="https://docs.blockscout.com/about/features/ethereum-bytecode-database-microservice"
+          fontSize="md"
+        >
+          Blockscout Bytecode Database
+        </LinkExternal>
+      </Alert>
+    );
+  }
+
+  if (data?.is_verified_via_sourcify) {
+    return (
+      <Alert status="warning" whiteSpace="pre-wrap" flexWrap="wrap">
+        <span>This contract has been { data.is_partially_verified ? 'partially ' : '' }verified via Sourcify. </span>
+        { data.sourcify_repo_url && <LinkExternal href={ data.sourcify_repo_url } fontSize="md">View contract in Sourcify repository</LinkExternal> }
+      </Alert>
+    );
+  }
+
+  return null;
+};
+
+export default React.memo(ContractDetailsAlertVerificationSource);
diff --git a/ui/address/contract/alerts/ContractDetailsAlerts.pw.tsx b/ui/address/contract/alerts/ContractDetailsAlerts.pw.tsx
new file mode 100644
index 0000000000..52fd35fe4c
--- /dev/null
+++ b/ui/address/contract/alerts/ContractDetailsAlerts.pw.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+
+import * as addressMock from 'mocks/address/address';
+import * as contractMock from 'mocks/contract/info';
+import * as socketServer from 'playwright/fixtures/socketServer';
+import { test, expect } from 'playwright/lib';
+
+import ContractDetailsAlerts from './ContractDetailsAlerts.pwstory';
+
+// FIXME
+// test cases which use socket cannot run in parallel since the socket server always run on the same port
+test.describe.configure({ mode: 'serial' });
+
+test('verified with changed byte code socket', async({ render, createSocket }) => {
+  const props = {
+    data: contractMock.verified,
+    isLoading: false,
+    addressHash: addressMock.contract.hash,
+  };
+  const component = await render(<ContractDetailsAlerts { ...props }/>, undefined, { withSocket: true });
+  const socket = await createSocket();
+  const channel = await socketServer.joinChannel(socket, 'addresses:' + addressMock.contract.hash.toLowerCase());
+  socketServer.sendMessage(socket, channel, 'changed_bytecode', {});
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('verified via sourcify', async({ render }) => {
+  const props = {
+    data: contractMock.verifiedViaSourcify,
+    isLoading: false,
+    addressHash: addressMock.contract.hash,
+  };
+  const component = await render(<ContractDetailsAlerts { ...props }/>, undefined, { withSocket: true });
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('verified via eth bytecode db', async({ render }) => {
+  const props = {
+    data: contractMock.verifiedViaEthBytecodeDb,
+    isLoading: false,
+    addressHash: addressMock.contract.hash,
+  };
+  const component = await render(<ContractDetailsAlerts { ...props }/>, undefined, { withSocket: true });
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('with twin address alert +@mobile', async({ render }) => {
+  const props = {
+    data: contractMock.withTwinAddress,
+    isLoading: false,
+    addressHash: addressMock.contract.hash,
+  };
+  const component = await render(<ContractDetailsAlerts { ...props }/>, undefined, { withSocket: true });
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/contract/alerts/ContractDetailsAlerts.pwstory.tsx b/ui/address/contract/alerts/ContractDetailsAlerts.pwstory.tsx
new file mode 100644
index 0000000000..e7fea90322
--- /dev/null
+++ b/ui/address/contract/alerts/ContractDetailsAlerts.pwstory.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import useSocketChannel from 'lib/socket/useSocketChannel';
+
+import type { Props } from './ContractDetailsAlerts';
+import ContractDetailsAlerts from './ContractDetailsAlerts';
+
+const ContractDetailsAlertsPwStory = (props: Props) => {
+  const channel = useSocketChannel({
+    topic: `addresses:${ props.addressHash.toLowerCase() }`,
+    isDisabled: false,
+  });
+
+  return <ContractDetailsAlerts { ...props } channel={ channel }/>;
+};
+
+export default ContractDetailsAlertsPwStory;
diff --git a/ui/address/contract/alerts/ContractDetailsAlerts.tsx b/ui/address/contract/alerts/ContractDetailsAlerts.tsx
new file mode 100644
index 0000000000..f701de2f02
--- /dev/null
+++ b/ui/address/contract/alerts/ContractDetailsAlerts.tsx
@@ -0,0 +1,92 @@
+import { chakra, Alert, Box, Flex, Skeleton } from '@chakra-ui/react';
+import type { Channel } from 'phoenix';
+import React from 'react';
+
+import type { SocketMessage } from 'lib/socket/types';
+import type { SmartContract } from 'types/api/contract';
+
+import { route } from 'nextjs-routes';
+
+import useSocketMessage from 'lib/socket/useSocketMessage';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+import ContractDetailsVerificationButton from '../ContractDetailsVerificationButton';
+import ContractDetailsAlertProxyPattern from './ContractDetailsAlertProxyPattern';
+import ContractDetailsAlertVerificationSource from './ContractDetailsAlertVerificationSource';
+
+export interface Props {
+  data: SmartContract | undefined;
+  isLoading: boolean;
+  addressHash: string;
+  channel?: Channel;
+}
+
+const ContractDetailsAlerts = ({ data, isLoading, addressHash, channel }: Props) => {
+  const [ isChangedBytecodeSocket, setIsChangedBytecodeSocket ] = React.useState<boolean>();
+
+  const handleChangedBytecodeMessage: SocketMessage.AddressChangedBytecode['handler'] = React.useCallback(() => {
+    setIsChangedBytecodeSocket(true);
+  }, [ ]);
+
+  useSocketMessage({
+    channel,
+    event: 'changed_bytecode',
+    handler: handleChangedBytecodeMessage,
+  });
+
+  return (
+    <Flex flexDir="column" rowGap={ 2 } mb={ 6 } _empty={{ display: 'none' }}>
+      { data?.is_blueprint && (
+        <Box>
+          <span>This is an </span>
+          <LinkExternal href="https://eips.ethereum.org/EIPS/eip-5202">
+            ERC-5202 Blueprint contract
+          </LinkExternal>
+        </Box>
+      ) }
+      { data?.is_verified && (
+        <Skeleton isLoaded={ !isLoading }>
+          <Alert status="success" flexWrap="wrap" rowGap={ 3 } columnGap={ 5 }>
+            <span>Contract Source Code Verified ({ data.is_partially_verified ? 'Partial' : 'Exact' } Match)</span>
+            {
+              data.is_partially_verified ? (
+                <ContractDetailsVerificationButton
+                  isLoading={ isLoading }
+                  addressHash={ addressHash }
+                  isPartiallyVerified
+                />
+              ) : null
+            }
+          </Alert>
+        </Skeleton>
+      ) }
+      <ContractDetailsAlertVerificationSource data={ data }/>
+      { (data?.is_changed_bytecode || isChangedBytecodeSocket) && (
+        <Alert status="warning">
+          Warning! Contract bytecode has been changed and does not match the verified one. Therefore, interaction with this smart contract may be risky.
+        </Alert>
+      ) }
+      { !data?.is_verified && data?.verified_twin_address_hash && (!data?.proxy_type || data.proxy_type === 'unknown') && (
+        <Alert status="warning" whiteSpace="pre-wrap" flexWrap="wrap">
+          <span>Contract is not verified. However, we found a verified contract with the same bytecode in Blockscout DB </span>
+          <AddressEntity
+            address={{ hash: data.verified_twin_address_hash, filecoin: { robust: data.verified_twin_filecoin_robust_address }, is_contract: true }}
+            truncation="constant"
+            fontSize="sm"
+            fontWeight="500"
+          />
+          <chakra.span mt={ 1 }>All functions displayed below are from ABI of that contract. In order to verify current contract, proceed with </chakra.span>
+          <LinkInternal href={ route({ pathname: '/address/[hash]/contract-verification', query: { hash: addressHash } }) }>
+            Verify & Publish
+          </LinkInternal>
+          <span> page</span>
+        </Alert>
+      ) }
+      { data?.proxy_type && <ContractDetailsAlertProxyPattern type={ data.proxy_type }/> }
+    </Flex>
+  );
+};
+
+export default React.memo(ContractDetailsAlerts);
diff --git a/ui/address/contract/alerts/__screenshots__/ContractDetailsAlertProxyPattern.pw.tsx_default_proxy-type-with-link-but-without-description-1.png b/ui/address/contract/alerts/__screenshots__/ContractDetailsAlertProxyPattern.pw.tsx_default_proxy-type-with-link-but-without-description-1.png
new file mode 100644
index 0000000000..4358b0c66d
Binary files /dev/null and b/ui/address/contract/alerts/__screenshots__/ContractDetailsAlertProxyPattern.pw.tsx_default_proxy-type-with-link-but-without-description-1.png differ
diff --git a/ui/address/contract/alerts/__screenshots__/ContractDetailsAlertProxyPattern.pw.tsx_default_proxy-type-with-link-mobile-1.png b/ui/address/contract/alerts/__screenshots__/ContractDetailsAlertProxyPattern.pw.tsx_default_proxy-type-with-link-mobile-1.png
new file mode 100644
index 0000000000..3dc888ede0
Binary files /dev/null and b/ui/address/contract/alerts/__screenshots__/ContractDetailsAlertProxyPattern.pw.tsx_default_proxy-type-with-link-mobile-1.png differ
diff --git a/ui/address/contract/alerts/__screenshots__/ContractDetailsAlertProxyPattern.pw.tsx_default_proxy-type-without-link-1.png b/ui/address/contract/alerts/__screenshots__/ContractDetailsAlertProxyPattern.pw.tsx_default_proxy-type-without-link-1.png
new file mode 100644
index 0000000000..a277fc8260
Binary files /dev/null and b/ui/address/contract/alerts/__screenshots__/ContractDetailsAlertProxyPattern.pw.tsx_default_proxy-type-without-link-1.png differ
diff --git a/ui/address/contract/alerts/__screenshots__/ContractDetailsAlertProxyPattern.pw.tsx_mobile_proxy-type-with-link-mobile-1.png b/ui/address/contract/alerts/__screenshots__/ContractDetailsAlertProxyPattern.pw.tsx_mobile_proxy-type-with-link-mobile-1.png
new file mode 100644
index 0000000000..3809c509a9
Binary files /dev/null and b/ui/address/contract/alerts/__screenshots__/ContractDetailsAlertProxyPattern.pw.tsx_mobile_proxy-type-with-link-mobile-1.png differ
diff --git a/ui/address/contract/alerts/__screenshots__/ContractDetailsAlerts.pw.tsx_default_verified-via-eth-bytecode-db-1.png b/ui/address/contract/alerts/__screenshots__/ContractDetailsAlerts.pw.tsx_default_verified-via-eth-bytecode-db-1.png
new file mode 100644
index 0000000000..0eae8612fd
Binary files /dev/null and b/ui/address/contract/alerts/__screenshots__/ContractDetailsAlerts.pw.tsx_default_verified-via-eth-bytecode-db-1.png differ
diff --git a/ui/address/contract/alerts/__screenshots__/ContractDetailsAlerts.pw.tsx_default_verified-via-sourcify-1.png b/ui/address/contract/alerts/__screenshots__/ContractDetailsAlerts.pw.tsx_default_verified-via-sourcify-1.png
new file mode 100644
index 0000000000..a0542c3647
Binary files /dev/null and b/ui/address/contract/alerts/__screenshots__/ContractDetailsAlerts.pw.tsx_default_verified-via-sourcify-1.png differ
diff --git a/ui/address/contract/alerts/__screenshots__/ContractDetailsAlerts.pw.tsx_default_verified-with-changed-byte-code-socket-1.png b/ui/address/contract/alerts/__screenshots__/ContractDetailsAlerts.pw.tsx_default_verified-with-changed-byte-code-socket-1.png
new file mode 100644
index 0000000000..4758938b38
Binary files /dev/null and b/ui/address/contract/alerts/__screenshots__/ContractDetailsAlerts.pw.tsx_default_verified-with-changed-byte-code-socket-1.png differ
diff --git a/ui/address/contract/alerts/__screenshots__/ContractDetailsAlerts.pw.tsx_default_with-twin-address-alert-mobile-1.png b/ui/address/contract/alerts/__screenshots__/ContractDetailsAlerts.pw.tsx_default_with-twin-address-alert-mobile-1.png
new file mode 100644
index 0000000000..019443f452
Binary files /dev/null and b/ui/address/contract/alerts/__screenshots__/ContractDetailsAlerts.pw.tsx_default_with-twin-address-alert-mobile-1.png differ
diff --git a/ui/address/contract/alerts/__screenshots__/ContractDetailsAlerts.pw.tsx_mobile_with-twin-address-alert-mobile-1.png b/ui/address/contract/alerts/__screenshots__/ContractDetailsAlerts.pw.tsx_mobile_with-twin-address-alert-mobile-1.png
new file mode 100644
index 0000000000..01cc90e853
Binary files /dev/null and b/ui/address/contract/alerts/__screenshots__/ContractDetailsAlerts.pw.tsx_mobile_with-twin-address-alert-mobile-1.png differ
diff --git a/ui/address/contract/audits/ContractSecurityAudits.tsx b/ui/address/contract/audits/ContractSecurityAudits.tsx
new file mode 100644
index 0000000000..970fac1706
--- /dev/null
+++ b/ui/address/contract/audits/ContractSecurityAudits.tsx
@@ -0,0 +1,66 @@
+import { Box, Button, useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+import type { SmartContractSecurityAuditSubmission } from 'types/api/contract';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import dayjs from 'lib/date/dayjs';
+import ContainerWithScrollY from 'ui/shared/ContainerWithScrollY';
+import FormModal from 'ui/shared/FormModal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+
+import ContractSubmitAuditForm from './ContractSubmitAuditForm';
+
+type Props = {
+  addressHash?: string;
+};
+
+const ContractSecurityAudits = ({ addressHash }: Props) => {
+  const { data, isPlaceholderData } = useApiQuery('contract_security_audits', {
+    pathParams: { hash: addressHash },
+    queryOptions: {
+      refetchOnMount: false,
+      placeholderData: { items: [] },
+      enabled: Boolean(addressHash),
+    },
+  });
+
+  const formTitle = 'Submit audit';
+
+  const modalProps = useDisclosure();
+
+  const renderForm = React.useCallback(() => {
+    return <ContractSubmitAuditForm address={ addressHash } onSuccess={ modalProps.onClose }/>;
+  }, [ addressHash, modalProps.onClose ]);
+
+  return (
+    <>
+      <Button variant="outline" size="sm" onClick={ modalProps.onOpen }>Submit audit</Button>
+      { data?.items && data.items.length > 0 && (
+        <Box position="relative">
+          <ContainerWithScrollY
+            gradientHeight={ 24 }
+            rowGap={ 1 }
+            w="100%"
+            maxH="80px"
+            mt={ 2 }
+          >
+            { data.items.map(item => (
+              <LinkExternal href={ item.audit_report_url } key={ item.audit_company_name + item.audit_publish_date } isLoading={ isPlaceholderData }>
+                { `${ item.audit_company_name }, ${ dayjs(item.audit_publish_date).format('MMM DD, YYYY') }` }
+              </LinkExternal>
+            )) }
+          </ContainerWithScrollY>
+        </Box>
+      ) }
+      <FormModal<SmartContractSecurityAuditSubmission>
+        isOpen={ modalProps.isOpen }
+        onClose={ modalProps.onClose }
+        title={ formTitle }
+        renderForm={ renderForm }
+      />
+    </>
+  );
+};
+
+export default React.memo(ContractSecurityAudits);
diff --git a/ui/address/contract/audits/ContractSubmitAuditForm.pw.tsx b/ui/address/contract/audits/ContractSubmitAuditForm.pw.tsx
new file mode 100644
index 0000000000..a9053cad83
--- /dev/null
+++ b/ui/address/contract/audits/ContractSubmitAuditForm.pw.tsx
@@ -0,0 +1,11 @@
+import noop from 'lodash/noop';
+import React from 'react';
+
+import { test, expect } from 'playwright/lib';
+
+import ContractSubmitAuditForm from './ContractSubmitAuditForm';
+
+test('base view', async({ render }) => {
+  const component = await render(<ContractSubmitAuditForm address="hash" onSuccess={ noop }/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/contract/audits/ContractSubmitAuditForm.tsx b/ui/address/contract/audits/ContractSubmitAuditForm.tsx
new file mode 100644
index 0000000000..1fdc735531
--- /dev/null
+++ b/ui/address/contract/audits/ContractSubmitAuditForm.tsx
@@ -0,0 +1,136 @@
+import { Button, VStack } from '@chakra-ui/react';
+import React from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import type { SmartContractSecurityAuditSubmission } from 'types/api/contract';
+
+import type { ResourceError } from 'lib/api/resources';
+import useApiFetch from 'lib/api/useApiFetch';
+import dayjs from 'lib/date/dayjs';
+import useToast from 'lib/hooks/useToast';
+import FormFieldCheckbox from 'ui/shared/forms/fields/FormFieldCheckbox';
+import FormFieldEmail from 'ui/shared/forms/fields/FormFieldEmail';
+import FormFieldText from 'ui/shared/forms/fields/FormFieldText';
+import FormFieldUrl from 'ui/shared/forms/fields/FormFieldUrl';
+
+interface Props {
+  address?: string;
+  onSuccess: () => void;
+}
+
+export type Inputs = {
+  submitter_name: string;
+  submitter_email: string;
+  is_project_owner: boolean;
+  project_name: string;
+  project_url: string;
+  audit_company_name: string;
+  audit_report_url: string;
+  audit_publish_date: string;
+  comment?: string;
+};
+
+type AuditSubmissionErrors = {
+  errors: Record<keyof Inputs, Array<string>>;
+};
+
+const ContractSubmitAuditForm = ({ address, onSuccess }: Props) => {
+  const containerRef = React.useRef<HTMLFormElement>(null);
+
+  const apiFetch = useApiFetch();
+  const toast = useToast();
+
+  const formApi = useForm<Inputs>({
+    mode: 'onTouched',
+    defaultValues: { is_project_owner: false },
+  });
+  const { handleSubmit, formState, setError } = formApi;
+
+  const onFormSubmit: SubmitHandler<Inputs> = React.useCallback(async(data) => {
+    try {
+      await apiFetch<'contract_security_audits', SmartContractSecurityAuditSubmission, AuditSubmissionErrors>('contract_security_audits', {
+        pathParams: { hash: address },
+        fetchParams: {
+          method: 'POST',
+          body: data,
+        },
+      });
+
+      toast({
+        position: 'top-right',
+        title: 'Success',
+        description: 'Your audit report has been successfully submitted for review',
+        status: 'success',
+        variant: 'subtle',
+        isClosable: true,
+      });
+
+      onSuccess();
+
+    } catch (_error) {
+      const error = _error as ResourceError<AuditSubmissionErrors>;
+      // add scroll to the error field
+      const errorMap = error?.payload?.errors;
+      if (errorMap && Object.keys(errorMap).length) {
+        (Object.keys(errorMap) as Array<keyof Inputs>).forEach((errorField) => {
+          setError(errorField, { type: 'custom', message: errorMap[errorField].join(', ') });
+        });
+      } else {
+        toast({
+          position: 'top-right',
+          title: 'Error',
+          description: (_error as ResourceError<{ message: string }>)?.payload?.message || 'Something went wrong. Try again later.',
+          status: 'error',
+          variant: 'subtle',
+          isClosable: true,
+        });
+      }
+    }
+  }, [ apiFetch, address, toast, setError, onSuccess ]);
+
+  return (
+    <FormProvider { ...formApi }>
+      <form noValidate onSubmit={ handleSubmit(onFormSubmit) } autoComplete="off" ref={ containerRef }>
+        <VStack gap={ 5 } alignItems="flex-start">
+          <FormFieldText<Inputs> name="submitter_name" isRequired placeholder="Submitter name"/>
+          <FormFieldEmail<Inputs> name="submitter_email" isRequired placeholder="Submitter email"/>
+          <FormFieldCheckbox<Inputs, 'is_project_owner'>
+            name="is_project_owner"
+            label="I'm the contract owner"
+          />
+          <FormFieldText<Inputs> name="project_name" isRequired placeholder="Project name"/>
+          <FormFieldUrl<Inputs> name="project_url" isRequired placeholder="Project URL"/>
+          <FormFieldText<Inputs> name="audit_company_name" isRequired placeholder="Audit company name"/>
+          <FormFieldUrl<Inputs> name="audit_report_url" isRequired placeholder="Audit report URL"/>
+          <FormFieldText<Inputs>
+            name="audit_publish_date"
+            type="date"
+            max={ dayjs().format('YYYY-MM-DD') }
+            isRequired
+            placeholder="Audit publish date"
+          />
+          <FormFieldText<Inputs>
+            name="comment"
+            placeholder="Comment"
+            maxH="160px"
+            rules={{ maxLength: 300 }}
+            asComponent="Textarea"
+          />
+        </VStack>
+        <Button
+          type="submit"
+          size="lg"
+          mt={ 8 }
+          isLoading={ formState.isSubmitting }
+          loadingText="Send request"
+          isDisabled={ !formState.isDirty }
+        >
+          Send request
+        </Button>
+      </form>
+    </FormProvider>
+  );
+};
+
+export default React.memo(ContractSubmitAuditForm);
diff --git a/ui/address/contract/audits/__screenshots__/ContractSubmitAuditForm.pw.tsx_default_base-view-1.png b/ui/address/contract/audits/__screenshots__/ContractSubmitAuditForm.pw.tsx_default_base-view-1.png
new file mode 100644
index 0000000000..c730eb8bd6
Binary files /dev/null and b/ui/address/contract/audits/__screenshots__/ContractSubmitAuditForm.pw.tsx_default_base-view-1.png differ
diff --git a/ui/address/contract/info/ContractDetailsInfo.pw.tsx b/ui/address/contract/info/ContractDetailsInfo.pw.tsx
new file mode 100644
index 0000000000..8509e98812
--- /dev/null
+++ b/ui/address/contract/info/ContractDetailsInfo.pw.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+
+import * as addressMock from 'mocks/address/address';
+import { contractAudits } from 'mocks/contract/audits';
+import * as contractMock from 'mocks/contract/info';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import ContractDetailsInfo from './ContractDetailsInfo';
+
+test('with certified icon', async({ render }) => {
+  const props = {
+    data: contractMock.certified,
+    isLoading: false,
+    addressHash: addressMock.contract.hash,
+  };
+  const component = await render(<ContractDetailsInfo { ...props }/>);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('zkSync contract', async({ render, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.zkSyncRollup);
+  const props = {
+    data: contractMock.zkSync,
+    isLoading: false,
+    addressHash: addressMock.contract.hash,
+  };
+  const component = await render(<ContractDetailsInfo { ...props }/>);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('stylus rust contract', async({ render, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.zkSyncRollup);
+  const props = {
+    data: contractMock.stylusRust,
+    isLoading: false,
+    addressHash: addressMock.contract.hash,
+  };
+  const component = await render(<ContractDetailsInfo { ...props }/>);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('with audits feature', () => {
+
+  test.beforeEach(async({ mockEnvs }) => {
+    await mockEnvs(ENVS_MAP.hasContractAuditReports);
+  });
+
+  test('no audits', async({ render, mockApiResponse }) => {
+    await mockApiResponse('contract_security_audits', { items: [] }, { pathParams: { hash: addressMock.contract.hash } });
+    const props = {
+      data: contractMock.verified,
+      isLoading: false,
+      addressHash: addressMock.contract.hash,
+    };
+    const component = await render(<ContractDetailsInfo { ...props }/>);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('has audits', async({ render, mockApiResponse }) => {
+    await mockApiResponse('contract_security_audits', contractAudits, { pathParams: { hash: addressMock.contract.hash } });
+    const props = {
+      data: contractMock.verified,
+      isLoading: false,
+      addressHash: addressMock.contract.hash,
+    };
+    const component = await render(<ContractDetailsInfo { ...props }/>);
+
+    await expect(component).toHaveScreenshot();
+  });
+});
diff --git a/ui/address/contract/info/ContractDetailsInfo.tsx b/ui/address/contract/info/ContractDetailsInfo.tsx
new file mode 100644
index 0000000000..a25d7536aa
--- /dev/null
+++ b/ui/address/contract/info/ContractDetailsInfo.tsx
@@ -0,0 +1,162 @@
+import { Flex, Grid } from '@chakra-ui/react';
+import React from 'react';
+
+import type { SmartContract } from 'types/api/contract';
+
+import config from 'configs/app';
+import { CONTRACT_LICENSES } from 'lib/contracts/licenses';
+import dayjs from 'lib/date/dayjs';
+import { getGitHubOwnerAndRepo } from 'ui/contractVerification/utils';
+import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+
+import ContractSecurityAudits from '../audits/ContractSecurityAudits';
+import ContractDetailsInfoItem from './ContractDetailsInfoItem';
+
+const rollupFeature = config.features.rollup;
+
+interface Props {
+  data: SmartContract;
+  isLoading: boolean;
+  addressHash: string;
+}
+
+const ContractDetailsInfo = ({ data, isLoading, addressHash }: Props) => {
+  const contractNameWithCertifiedIcon = data ? (
+    <Flex alignItems="center">
+      { data.name }
+      { data.certified && <ContractCertifiedLabel iconSize={ 5 } boxSize={ 5 } ml={ 2 }/> }
+    </Flex>
+  ) : null;
+
+  const licenseLink = (() => {
+    if (!data?.license_type) {
+      return null;
+    }
+
+    const license = CONTRACT_LICENSES.find((license) => license.type === data.license_type);
+    if (!license || license.type === 'none') {
+      return null;
+    }
+
+    return (
+      <LinkExternal href={ license.url }>
+        { license.label }
+      </LinkExternal>
+    );
+  })();
+
+  const sourceCodeLink = (() => {
+    if (!data.github_repository_metadata?.repository_url || !data.github_repository_metadata?.commit) {
+      return null;
+    }
+
+    const { owner, repo } = getGitHubOwnerAndRepo(data.github_repository_metadata.repository_url) || {};
+
+    const repoUrl = data.github_repository_metadata.repository_url;
+    const commit = data.github_repository_metadata.commit;
+    const pathPrefix = data.github_repository_metadata.path_prefix;
+    return (
+      <LinkExternal href={ `${ repoUrl }/tree/${ commit }${ pathPrefix ? `/${ pathPrefix }` : '' }` }>
+        { owner && repo ? `${ owner }/${ repo }` : data.github_repository_metadata.repository_url }
+      </LinkExternal>
+    );
+  })();
+
+  const isStylusContract = data.language === 'stylus_rust';
+
+  return (
+    <Grid templateColumns={{ base: '1fr', lg: '1fr 1fr' }} rowGap={ 4 } columnGap={ 6 } mb={ 8 }>
+      { data.name && (
+        <ContractDetailsInfoItem
+          label="Contract name"
+          content={ contractNameWithCertifiedIcon }
+          isLoading={ isLoading }
+        />
+      ) }
+      { data.compiler_version && (
+        <ContractDetailsInfoItem
+          label="Compiler version"
+          content={ data.compiler_version }
+          isLoading={ isLoading }
+        />
+      ) }
+      { data.zk_compiler_version && (
+        <ContractDetailsInfoItem
+          label="ZK compiler version"
+          content={ data.zk_compiler_version }
+          isLoading={ isLoading }
+        />
+      ) }
+      { data.evm_version && (
+        <ContractDetailsInfoItem
+          label="EVM version"
+          content={ data.evm_version }
+          textTransform="capitalize"
+          isLoading={ isLoading }
+        />
+      ) }
+      { licenseLink && (
+        <ContractDetailsInfoItem
+          label="License"
+          content={ licenseLink }
+          hint="License type is entered manually during verification. The initial source code may contain a different license type than the one displayed."
+          isLoading={ isLoading }
+        />
+      ) }
+      { typeof data.optimization_enabled === 'boolean' && !isStylusContract && (
+        <ContractDetailsInfoItem
+          label="Optimization enabled"
+          content={ data.optimization_enabled ? 'true' : 'false' }
+          isLoading={ isLoading }
+        />
+      ) }
+      { data.optimization_runs !== null && !isStylusContract && (
+        <ContractDetailsInfoItem
+          label={ rollupFeature.isEnabled && rollupFeature.type === 'zkSync' ? 'Optimization mode' : 'Optimization runs' }
+          content={ String(data.optimization_runs) }
+          isLoading={ isLoading }
+        />
+      ) }
+      { data.package_name && (
+        <ContractDetailsInfoItem
+          label="Package name"
+          content={ data.package_name }
+          isLoading={ isLoading }
+        />
+      ) }
+      { data.verified_at && (
+        <ContractDetailsInfoItem
+          label="Verified at"
+          content={ dayjs(data.verified_at).format('llll') }
+          wordBreak="break-word"
+          isLoading={ isLoading }
+        />
+      ) }
+      { data.file_path && !isStylusContract && (
+        <ContractDetailsInfoItem
+          label="Contract file path"
+          content={ data.file_path }
+          wordBreak="break-word"
+          isLoading={ isLoading }
+        />
+      ) }
+      { sourceCodeLink && (
+        <ContractDetailsInfoItem
+          label="Source code"
+          content={ sourceCodeLink }
+          isLoading={ isLoading }
+        />
+      ) }
+      { config.UI.hasContractAuditReports && (
+        <ContractDetailsInfoItem
+          label="Security audit"
+          content={ <ContractSecurityAudits addressHash={ addressHash }/> }
+          isLoading={ isLoading }
+        />
+      ) }
+    </Grid>
+  );
+};
+
+export default React.memo(ContractDetailsInfo);
diff --git a/ui/address/contract/info/ContractDetailsInfoItem.tsx b/ui/address/contract/info/ContractDetailsInfoItem.tsx
new file mode 100644
index 0000000000..ab4e0f10ce
--- /dev/null
+++ b/ui/address/contract/info/ContractDetailsInfoItem.tsx
@@ -0,0 +1,36 @@
+import { chakra, useColorModeValue, Flex, GridItem, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import Hint from 'ui/shared/Hint';
+
+interface Props {
+  label: string;
+  content: string | React.ReactNode;
+  className?: string;
+  isLoading: boolean;
+  hint?: string;
+}
+
+const ContractDetailsInfoItem = ({ label, content, className, isLoading, hint }: Props) => {
+  const hintIconColor = useColorModeValue('gray.600', 'gray.400');
+  return (
+    <GridItem display="flex" columnGap={ 6 } wordBreak="break-all" className={ className } alignItems="baseline">
+      <Skeleton isLoaded={ !isLoading } w="170px" flexShrink={ 0 } fontWeight={ 500 }>
+        <Flex alignItems="center">
+          { label }
+          { hint && (
+            <Hint
+              label={ hint }
+              ml={ 2 }
+              color={ hintIconColor }
+              tooltipProps={{ placement: 'bottom' }}
+            />
+          ) }
+        </Flex>
+      </Skeleton>
+      <Skeleton isLoaded={ !isLoading }>{ content }</Skeleton>
+    </GridItem>
+  );
+};
+
+export default React.memo(chakra(ContractDetailsInfoItem));
diff --git a/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_stylus-rust-contract-1.png b/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_stylus-rust-contract-1.png
new file mode 100644
index 0000000000..82e52717aa
Binary files /dev/null and b/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_stylus-rust-contract-1.png differ
diff --git a/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_with-audits-feature-has-audits-1.png b/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_with-audits-feature-has-audits-1.png
new file mode 100644
index 0000000000..28da31ecff
Binary files /dev/null and b/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_with-audits-feature-has-audits-1.png differ
diff --git a/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_with-audits-feature-no-audits-1.png b/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_with-audits-feature-no-audits-1.png
new file mode 100644
index 0000000000..dd083c589f
Binary files /dev/null and b/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_with-audits-feature-no-audits-1.png differ
diff --git a/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_with-certified-icon-1.png b/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_with-certified-icon-1.png
new file mode 100644
index 0000000000..b9897aae9d
Binary files /dev/null and b/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_with-certified-icon-1.png differ
diff --git a/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_zkSync-contract-1.png b/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_zkSync-contract-1.png
new file mode 100644
index 0000000000..9e8301a884
Binary files /dev/null and b/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_zkSync-contract-1.png differ
diff --git a/ui/address/contract/methods/ContractAbi.tsx b/ui/address/contract/methods/ContractAbi.tsx
new file mode 100644
index 0000000000..72f7fe6295
--- /dev/null
+++ b/ui/address/contract/methods/ContractAbi.tsx
@@ -0,0 +1,99 @@
+import { Accordion, Box, Flex, Link } from '@chakra-ui/react';
+import _range from 'lodash/range';
+import React from 'react';
+
+import type { SmartContractMethod } from './types';
+
+import { route } from 'nextjs-routes';
+
+import { apos } from 'lib/html-entities';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+import ContractAbiItem from './ContractAbiItem';
+import useFormSubmit from './useFormSubmit';
+import useScrollToMethod from './useScrollToMethod';
+
+interface Props {
+  abi: Array<SmartContractMethod>;
+  visibleItems?: Array<number>;
+  addressHash: string;
+  tab: string;
+  sourceAddress?: string;
+}
+
+const ContractAbi = ({ abi, addressHash, sourceAddress, tab, visibleItems }: Props) => {
+  const [ expandedSections, setExpandedSections ] = React.useState<Array<number>>(abi.length === 1 ? [ 0 ] : []);
+  const [ id, setId ] = React.useState(0);
+
+  useScrollToMethod(abi, setExpandedSections);
+
+  const handleFormSubmit = useFormSubmit({ addressHash });
+
+  const handleAccordionStateChange = React.useCallback((newValue: Array<number>) => {
+    setExpandedSections(newValue);
+  }, []);
+
+  const handleExpandAll = React.useCallback(() => {
+    if (!abi) {
+      return;
+    }
+
+    if (expandedSections.length < abi.length) {
+      setExpandedSections(_range(0, abi.length));
+    } else {
+      setExpandedSections([]);
+    }
+  }, [ abi, expandedSections.length ]);
+
+  const handleReset = React.useCallback(() => {
+    setId((id) => id + 1);
+  }, []);
+
+  const hasVisibleItems = !visibleItems || visibleItems.length > 0;
+
+  return (
+    <div>
+      <Flex mb={ 3 }>
+        <Box fontWeight={ 500 } mr="auto">Contract information</Box>
+        { abi.length > 1 && (
+          <Link onClick={ handleExpandAll }>
+            { expandedSections.length === abi.length ? 'Collapse' : 'Expand' } all
+          </Link>
+        ) }
+        <Link onClick={ handleReset } ml={ 3 }>Reset</Link>
+      </Flex>
+      <Accordion allowMultiple position="relative" onChange={ handleAccordionStateChange } index={ expandedSections }>
+        { abi.map((item, index) => (
+          <ContractAbiItem
+            key={ index }
+            id={ id }
+            index={ index }
+            data={ item }
+            isVisible={ !visibleItems || visibleItems.includes(index) }
+            addressHash={ addressHash }
+            sourceAddress={ sourceAddress }
+            tab={ tab }
+            onSubmit={ handleFormSubmit }
+          />
+        )) }
+      </Accordion>
+      { !hasVisibleItems && (
+        <div>
+          <div>Couldn{ apos }t find any method that matches your query.</div>
+          <div>
+            You can use custom ABI for this contract without verifying the contract in the{ ' ' }
+            <LinkInternal
+              href={ route({ pathname: '/address/[hash]', query: { hash: addressHash, tab: 'read_write_custom_methods' } }) }
+              scroll={ false }
+            >
+              Custom ABI
+            </LinkInternal>
+            { ' ' }tab.
+          </div>
+        </div>
+      ) }
+    </div>
+  );
+};
+
+export default React.memo(ContractAbi);
diff --git a/ui/address/contract/methods/ContractAbiItem.tsx b/ui/address/contract/methods/ContractAbiItem.tsx
new file mode 100644
index 0000000000..8e575ee175
--- /dev/null
+++ b/ui/address/contract/methods/ContractAbiItem.tsx
@@ -0,0 +1,122 @@
+import { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Alert, Box, Tag } from '@chakra-ui/react';
+import React from 'react';
+import { Element } from 'react-scroll';
+
+import type { FormSubmitHandler, SmartContractMethod } from './types';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import Hint from 'ui/shared/Hint';
+
+import ContractMethodForm from './form/ContractMethodForm';
+import { getElementId, getElementName } from './useScrollToMethod';
+import { isReadMethod } from './utils';
+
+interface Props {
+  data: SmartContractMethod;
+  index: number;
+  id: number;
+  addressHash: string;
+  sourceAddress?: string;
+  tab: string;
+  onSubmit: FormSubmitHandler;
+  isVisible?: boolean;
+}
+
+const ContractAbiItem = ({ data, index, id, addressHash, sourceAddress, tab, onSubmit, isVisible = true }: Props) => {
+  const [ attempt, setAttempt ] = React.useState(0);
+
+  const url = React.useMemo(() => {
+    return config.app.baseUrl + route({
+      pathname: '/address/[hash]',
+      query: {
+        hash: addressHash ?? '',
+        tab,
+        ...(sourceAddress ? { source_address: sourceAddress } : {}),
+      },
+      hash: getElementId(data),
+    });
+  }, [ addressHash, data, tab, sourceAddress ]);
+
+  const handleReset = React.useCallback(() => {
+    setAttempt((prev) => prev + 1);
+  }, []);
+
+  const isRead = isReadMethod(data);
+
+  return (
+    <AccordionItem as="section" _first={{ borderTopWidth: 0 }} _last={{ borderBottomWidth: 0 }} display={ isVisible ? 'block' : 'none' }>
+      { ({ isExpanded }) => (
+        <>
+          <Element as="h2" name={ getElementName(data) }>
+            <AccordionButton
+              px={ 0 }
+              py={ 3 }
+              _hover={{ bgColor: 'inherit' }}
+              wordBreak="break-all"
+              textAlign="left"
+              as="div"
+              cursor="pointer"
+              display="flex"
+              alignItems="center"
+              columnGap={ 2 }
+            >
+              <CopyToClipboard text={ url } type="link" ml={ 0 } color="text_secondary"/>
+              <Box as="div" fontWeight={ 500 } display="flex" alignItems="center">
+                { index + 1 }. { data.type === 'fallback' || data.type === 'receive' ? data.type : data.name }
+                { data.type === 'fallback' && (
+                  <Hint
+                    label={
+                      `The fallback function is executed on a call to the contract if none of the other functions match 
+                    the given function signature, or if no data was supplied at all and there is no receive Ether function. 
+                    The fallback function always receives data, but in order to also receive Ether it must be marked payable.`
+                    }
+                    ml={ 1 }
+                  />
+                ) }
+                { data.type === 'receive' && (
+                  <Hint
+                    label={
+                      `The receive function is executed on a call to the contract with empty calldata. 
+                    This is the function that is executed on plain Ether transfers (e.g. via .send() or .transfer()). 
+                    If no such function exists, but a payable fallback function exists, the fallback function will be called on a plain Ether transfer. 
+                    If neither a receive Ether nor a payable fallback function is present, 
+                    the contract cannot receive Ether through regular transactions and throws an exception.`
+                    }
+                    ml={ 1 }
+                  />
+                ) }
+              </Box>
+              <Tag colorScheme={ isRead ? 'black-purple' : 'black-blue' } flexShrink={ 0 }>{ isRead ? 'read' : 'write' }</Tag>
+              { 'method_id' in data && (
+                <Tag display="inline-flex" alignItems="center" flexShrink={ 0 }>
+                  { data.method_id }
+                  <CopyToClipboard text={ data.method_id }/>
+                </Tag>
+              ) }
+              <AccordionIcon transform={ isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)' } color="gray.500"/>
+            </AccordionButton>
+          </Element>
+          <AccordionPanel pb={ 4 } pr={ 0 } pl="28px" w="calc(100% - 6px)">
+            { 'is_invalid' in data && data.is_invalid ? (
+              <Alert status="warning">An error occurred while parsing the method signature.</Alert>
+            ) : (
+              <ContractMethodForm
+                key={ id + '_' + index + '_' + attempt }
+                data={ data }
+                attempt={ attempt }
+                onSubmit={ onSubmit }
+                onReset={ handleReset }
+                isOpen={ isExpanded }
+              />
+            ) }
+          </AccordionPanel>
+        </>
+      ) }
+    </AccordionItem>
+  );
+};
+
+export default React.memo(ContractAbiItem);
diff --git a/ui/address/contract/methods/ContractConnectWallet.tsx b/ui/address/contract/methods/ContractConnectWallet.tsx
new file mode 100644
index 0000000000..21c24193c3
--- /dev/null
+++ b/ui/address/contract/methods/ContractConnectWallet.tsx
@@ -0,0 +1,64 @@
+import { Alert, Button, Flex, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import useWeb3Wallet from 'lib/web3/useWallet';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+
+interface Props {
+  isLoading?: boolean;
+}
+
+const ContractConnectWallet = ({ isLoading }: Props) => {
+  const web3Wallet = useWeb3Wallet({ source: 'Smart contracts' });
+  const isMobile = useIsMobile();
+
+  const content = (() => {
+    if (!web3Wallet.isConnected) {
+      return (
+        <>
+          <span>Disconnected</span>
+          <Button
+            ml={ 3 }
+            onClick={ web3Wallet.connect }
+            size="sm"
+            variant="outline"
+            isLoading={ web3Wallet.isOpen }
+            loadingText="Connect wallet"
+          >
+            Connect wallet
+          </Button>
+        </>
+      );
+    }
+
+    return (
+      <Flex columnGap={ 3 } rowGap={ 3 } alignItems={{ base: 'flex-start', lg: 'center' }} flexDir={{ base: 'column', lg: 'row' }}>
+        <Flex alignItems="center">
+          <span>Connected to </span>
+          <AddressEntity
+            address={{ hash: web3Wallet.address || '' }}
+            truncation={ isMobile ? 'constant' : 'dynamic' }
+            fontWeight={ 600 }
+            ml={ 2 }
+            noAltHash
+          />
+        </Flex>
+        <Button onClick={ web3Wallet.disconnect } size="sm" variant="outline">Disconnect</Button>
+      </Flex>
+    );
+  })();
+
+  return (
+    <Skeleton isLoaded={ !isLoading }>
+      <Alert status={ web3Wallet.address ? 'success' : 'warning' }>
+        { content }
+      </Alert>
+    </Skeleton>
+  );
+};
+
+const Fallback = () => null;
+
+export default config.features.blockchainInteraction.isEnabled ? ContractConnectWallet : Fallback;
diff --git a/ui/address/contract/methods/ContractCustomAbiAlert.tsx b/ui/address/contract/methods/ContractCustomAbiAlert.tsx
new file mode 100644
index 0000000000..633aa43cb4
--- /dev/null
+++ b/ui/address/contract/methods/ContractCustomAbiAlert.tsx
@@ -0,0 +1,20 @@
+import { Alert, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  isLoading?: boolean;
+}
+
+const ContractCustomAbiAlert = ({ isLoading }: Props) => {
+  return (
+    <Skeleton isLoaded={ !isLoading }>
+      <Alert status="warning">
+        Note: Contract with custom ABI is only meant for debugging purpose and it is the user’s responsibility to ensure that the provided ABI
+        matches the contract, otherwise errors may occur or results returned may be incorrect.
+        Blockscout is not responsible for any losses that arise from the use of Read & Write contract.
+      </Alert>
+    </Skeleton>
+  );
+};
+
+export default React.memo(ContractCustomAbiAlert);
diff --git a/ui/address/contract/methods/ContractMethodsContainer.tsx b/ui/address/contract/methods/ContractMethodsContainer.tsx
new file mode 100644
index 0000000000..67e2138def
--- /dev/null
+++ b/ui/address/contract/methods/ContractMethodsContainer.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import type { MethodType } from './types';
+
+import ContentLoader from 'ui/shared/ContentLoader';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+
+interface Props {
+  isLoading?: boolean;
+  isError?: boolean;
+  isEmpty?: boolean;
+  type: MethodType;
+  children: React.JSX.Element;
+}
+
+const ContractMethodsContainer = ({ isLoading, isError, isEmpty, type, children }: Props) => {
+
+  if (isLoading) {
+    return <ContentLoader w="fit-content"/>;
+  }
+
+  if (isError) {
+    return <DataFetchAlert/>;
+  }
+
+  if (isEmpty) {
+    const typeText = type === 'all' ? '' : type;
+    return <span>No public { typeText } functions were found for this contract.</span>;
+  }
+
+  return children;
+};
+
+export default React.memo(ContractMethodsContainer);
diff --git a/ui/address/contract/methods/ContractMethodsCustom.pw.tsx b/ui/address/contract/methods/ContractMethodsCustom.pw.tsx
new file mode 100644
index 0000000000..7a7c05f063
--- /dev/null
+++ b/ui/address/contract/methods/ContractMethodsCustom.pw.tsx
@@ -0,0 +1,46 @@
+import type { BrowserContext } from '@playwright/test';
+import React from 'react';
+import type { AbiItem } from 'viem';
+
+import * as addressMock from 'mocks/address/address';
+import * as methodsMock from 'mocks/contract/methods';
+import { contextWithAuth } from 'playwright/fixtures/auth';
+import { test, expect } from 'playwright/lib';
+
+import ContractMethodsCustom from './ContractMethodsCustom';
+
+const addressHash = addressMock.hash;
+
+const authTest = test.extend<{ context: BrowserContext }>({
+  context: contextWithAuth,
+});
+
+authTest('without data', async({ render }) => {
+  const hooksConfig = {
+    router: {
+      query: { hash: addressHash, tab: 'read_write_custom_methods' },
+    },
+  };
+
+  const component = await render(<ContractMethodsCustom/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
+
+authTest('with data', async({ render, mockApiResponse }) => {
+  const abi: Array<AbiItem> = [ ...methodsMock.read, ...methodsMock.write ];
+  await mockApiResponse('custom_abi', [ {
+    abi,
+    contract_address_hash: addressHash,
+    contract_address: addressMock.withName,
+    id: 1,
+    name: 'Test',
+  } ]);
+  const hooksConfig = {
+    router: {
+      query: { hash: addressHash, tab: 'read_write_custom_methods' },
+    },
+  };
+
+  const component = await render(<ContractMethodsCustom/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/contract/methods/ContractMethodsCustom.tsx b/ui/address/contract/methods/ContractMethodsCustom.tsx
new file mode 100644
index 0000000000..00203175c7
--- /dev/null
+++ b/ui/address/contract/methods/ContractMethodsCustom.tsx
@@ -0,0 +1,122 @@
+import { Button, Flex, Skeleton, useDisclosure } from '@chakra-ui/react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { SmartContract } from 'types/api/contract';
+
+import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import CustomAbiModal from 'ui/customAbi/CustomAbiModal/CustomAbiModal';
+import RawDataSnippet from 'ui/shared/RawDataSnippet';
+import AuthGuard from 'ui/snippets/auth/AuthGuard';
+import useIsAuth from 'ui/snippets/auth/useIsAuth';
+
+import ContractAbi from './ContractAbi';
+import ContractConnectWallet from './ContractConnectWallet';
+import ContractCustomAbiAlert from './ContractCustomAbiAlert';
+import ContractMethodsContainer from './ContractMethodsContainer';
+import ContractMethodsFilters from './ContractMethodsFilters';
+import useMethodsFilters from './useMethodsFilters';
+import { formatAbi } from './utils';
+
+interface Props {
+  isLoading?: boolean;
+}
+
+const ContractMethodsCustom = ({ isLoading: isLoadingProp }: Props) => {
+
+  const modal = useDisclosure();
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  const tab = getQueryParamString(router.query.tab);
+  const addressHash = getQueryParamString(router.query.hash);
+
+  const isAuth = useIsAuth();
+
+  const customAbiQuery = useApiQuery('custom_abi', {
+    queryOptions: {
+      enabled: !isLoadingProp && isAuth,
+      refetchOnMount: false,
+    },
+  });
+
+  const contractQueryData = queryClient.getQueryData<SmartContract>(getResourceKey('contract', { pathParams: { hash: addressHash } }));
+
+  const isLoading = isLoadingProp || (isAuth && customAbiQuery.isLoading);
+
+  const currentInfo = customAbiQuery.data?.find((item) => item.contract_address_hash.toLowerCase() === addressHash.toLowerCase());
+  const modalData = currentInfo ?? (contractQueryData ? {
+    name: contractQueryData.name || '',
+    contract_address_hash: addressHash,
+  } : undefined);
+
+  const abi = React.useMemo(() => formatAbi(currentInfo?.abi || []), [ currentInfo ]);
+  const filters = useMethodsFilters({ abi });
+
+  const updateButton = React.useMemo(() => {
+    return (
+      <Skeleton isLoaded={ !isLoading } ml="auto" mr="3" borderRadius="base">
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={ modal.onOpen }
+        >
+          Update
+        </Button>
+      </Skeleton>
+    );
+  }, [ isLoading, modal.onOpen ]);
+
+  return (
+    <Flex flexDir="column" rowGap={ 6 }>
+      { currentInfo ? (
+        <>
+          <Flex flexDir="column" rowGap={ 2 }>
+            <ContractConnectWallet isLoading={ isLoading }/>
+            <ContractCustomAbiAlert isLoading={ isLoading }/>
+          </Flex>
+          <RawDataSnippet
+            data={ JSON.stringify(abi) }
+            title="Contract ABI"
+            textareaMaxHeight="150px"
+            isLoading={ isLoading }
+            rightSlot={ updateButton }
+          />
+          <ContractMethodsFilters
+            defaultMethodType={ filters.methodType }
+            defaultSearchTerm={ filters.searchTerm }
+            onChange={ filters.onChange }
+            isLoading={ isLoading }
+          />
+          <ContractMethodsContainer isLoading={ isLoading } isEmpty={ abi.length === 0 } type={ filters.methodType }>
+            <ContractAbi abi={ abi } tab={ tab } addressHash={ addressHash } visibleItems={ filters.visibleItems }/>
+          </ContractMethodsContainer>
+        </>
+      ) : (
+        <>
+          <Skeleton isLoaded={ !isLoading }>
+            Add custom ABIs for this contract and access when logged into your account. Helpful for debugging,
+            functional testing and contract interaction.
+          </Skeleton>
+          <AuthGuard onAuthSuccess={ modal.onOpen }>
+            { ({ onClick }) => (
+              <Skeleton isLoaded={ !isLoading } w="fit-content">
+                <Button
+                  size="sm"
+                  onClick={ onClick }
+                >
+                  Add custom ABI
+                </Button>
+              </Skeleton>
+            ) }
+          </AuthGuard>
+        </>
+      ) }
+      <CustomAbiModal { ...modal } data={ modalData }/>
+    </Flex>
+  );
+};
+
+export default React.memo(ContractMethodsCustom);
diff --git a/ui/address/contract/methods/ContractMethodsFilters.tsx b/ui/address/contract/methods/ContractMethodsFilters.tsx
new file mode 100644
index 0000000000..be06abe20c
--- /dev/null
+++ b/ui/address/contract/methods/ContractMethodsFilters.tsx
@@ -0,0 +1,51 @@
+import { Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import type { MethodType } from './types';
+
+import FilterInput from 'ui/shared/filters/FilterInput';
+import RadioButtonGroup from 'ui/shared/radioButtonGroup/RadioButtonGroup';
+
+import type { MethodsFilters } from './useMethodsFilters';
+import { TYPE_FILTER_OPTIONS } from './utils';
+
+interface Props {
+  defaultMethodType: MethodType;
+  defaultSearchTerm: string;
+  onChange: (filter: MethodsFilters) => void;
+  isLoading?: boolean;
+}
+
+const ContractMethodsFilters = ({ defaultMethodType, defaultSearchTerm, onChange, isLoading }: Props) => {
+
+  const handleTypeChange = React.useCallback((value: MethodType) => {
+    onChange({ type: 'method_type', value });
+  }, [ onChange ]);
+
+  const handleSearchTermChange = React.useCallback((value: string) => {
+    onChange({ type: 'method_name', value });
+  }, [ onChange ]);
+
+  return (
+    <Flex columnGap={ 3 } rowGap={ 3 } flexDir={{ base: 'column', lg: 'row' }}>
+      <RadioButtonGroup<MethodType>
+        name="contract-methods-filter"
+        defaultValue={ defaultMethodType }
+        options={ TYPE_FILTER_OPTIONS }
+        onChange={ handleTypeChange }
+        w={{ lg: 'fit-content' }}
+        isLoading={ isLoading }
+      />
+      <FilterInput
+        initialValue={ defaultSearchTerm }
+        onChange={ handleSearchTermChange }
+        placeholder="Search by method name"
+        w={{ base: '100%', lg: '450px' }}
+        size="xs"
+        isLoading={ isLoading }
+      />
+    </Flex>
+  );
+};
+
+export default React.memo(ContractMethodsFilters);
diff --git a/ui/address/contract/methods/ContractMethodsMudSystem.tsx b/ui/address/contract/methods/ContractMethodsMudSystem.tsx
new file mode 100644
index 0000000000..22cf2596c8
--- /dev/null
+++ b/ui/address/contract/methods/ContractMethodsMudSystem.tsx
@@ -0,0 +1,84 @@
+import { Flex } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { SmartContractMudSystemItem } from 'types/api/contract';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import getQueryParamString from 'lib/router/getQueryParamString';
+
+import type { Item } from '../ContractSourceAddressSelector';
+import ContractSourceAddressSelector from '../ContractSourceAddressSelector';
+import ContractAbi from './ContractAbi';
+import ContractConnectWallet from './ContractConnectWallet';
+import ContractMethodsContainer from './ContractMethodsContainer';
+import ContractMethodsFilters from './ContractMethodsFilters';
+import useMethodsFilters from './useMethodsFilters';
+import { formatAbi } from './utils';
+
+interface Props {
+  items: Array<SmartContractMudSystemItem>;
+}
+
+const ContractMethodsMudSystem = ({ items }: Props) => {
+
+  const router = useRouter();
+
+  const addressHash = getQueryParamString(router.query.hash);
+  const sourceAddress = getQueryParamString(router.query.source_address);
+  const tab = getQueryParamString(router.query.tab);
+
+  const [ selectedItem, setSelectedItem ] = React.useState(items.find((item) => item.address === sourceAddress) || items[0]);
+
+  const systemInfoQuery = useApiQuery('contract_mud_system_info', {
+    pathParams: { hash: addressHash, system_address: selectedItem.address },
+    queryOptions: {
+      enabled: Boolean(selectedItem?.address),
+      refetchOnMount: false,
+    },
+  });
+
+  const handleItemSelect = React.useCallback((item: Item) => {
+    setSelectedItem(item as SmartContractMudSystemItem);
+  }, []);
+
+  const abi = React.useMemo(() => formatAbi(systemInfoQuery.data?.abi || []), [ systemInfoQuery.data?.abi ]);
+  const filters = useMethodsFilters({ abi });
+
+  return (
+    <Flex flexDir="column" rowGap={ 6 }>
+      <ContractConnectWallet/>
+      <div>
+        <ContractSourceAddressSelector
+          items={ items }
+          selectedItem={ selectedItem }
+          onItemSelect={ handleItemSelect }
+          label="System address"
+          mb={ 3 }
+        />
+        <ContractMethodsFilters
+          defaultMethodType={ filters.methodType }
+          defaultSearchTerm={ filters.searchTerm }
+          onChange={ filters.onChange }
+        />
+      </div>
+      <ContractMethodsContainer
+        key={ selectedItem.address }
+        isLoading={ systemInfoQuery.isPending }
+        isEmpty={ abi.length === 0 }
+        type={ filters.methodType }
+        isError={ systemInfoQuery.isError }
+      >
+        <ContractAbi
+          abi={ abi }
+          tab={ tab }
+          addressHash={ addressHash }
+          visibleItems={ filters.visibleItems }
+          sourceAddress={ selectedItem.address }
+        />
+      </ContractMethodsContainer>
+    </Flex>
+  );
+};
+
+export default React.memo(ContractMethodsMudSystem);
diff --git a/ui/address/contract/methods/ContractMethodsProxy.pw.tsx b/ui/address/contract/methods/ContractMethodsProxy.pw.tsx
new file mode 100644
index 0000000000..d89e23b05b
--- /dev/null
+++ b/ui/address/contract/methods/ContractMethodsProxy.pw.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+import * as addressMock from 'mocks/address/address';
+import * as contractMock from 'mocks/contract/info';
+import * as methodsMock from 'mocks/contract/methods';
+import { test, expect } from 'playwright/lib';
+
+import ContractMethodsProxy from './ContractMethodsProxy';
+
+const addressHash = addressMock.hash;
+
+test('with one implementation +@mobile', async({ render, mockApiResponse }) => {
+  const hooksConfig = {
+    router: {
+      query: { hash: addressHash, tab: 'read_proxy' },
+    },
+  };
+  const implementations = [
+    { address: '0x2F4F4A52295940C576417d29F22EEb92B440eC89', name: 'HomeBridge' },
+  ];
+  await mockApiResponse('contract', { ...contractMock.verified, abi: methodsMock.read }, { pathParams: { hash: implementations[0].address } });
+
+  const component = await render(<ContractMethodsProxy implementations={ implementations }/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
+
+test('with multiple implementations +@mobile', async({ render, mockApiResponse }) => {
+  const hooksConfig = {
+    router: {
+      query: { hash: addressHash, tab: 'read_proxy' },
+    },
+  };
+  const implementations = [
+    { address: '0x2F4F4A52295940C576417d29F22EEb92B440eC89', name: 'HomeBridge' },
+    { address: '0xc9e91eDeA9DC16604022e4E5b437Df9c64EdB05A', name: 'Diamond' },
+  ];
+  await mockApiResponse('contract', { ...contractMock.verified, abi: methodsMock.read }, { pathParams: { hash: implementations[0].address } });
+
+  const component = await render(<ContractMethodsProxy implementations={ implementations }/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/contract/methods/ContractMethodsProxy.tsx b/ui/address/contract/methods/ContractMethodsProxy.tsx
new file mode 100644
index 0000000000..99f872e3a8
--- /dev/null
+++ b/ui/address/contract/methods/ContractMethodsProxy.tsx
@@ -0,0 +1,80 @@
+import { Flex } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { AddressImplementation } from 'types/api/addressParams';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import getQueryParamString from 'lib/router/getQueryParamString';
+
+import ContractSourceAddressSelector from '../ContractSourceAddressSelector';
+import ContractAbi from './ContractAbi';
+import ContractConnectWallet from './ContractConnectWallet';
+import ContractMethodsContainer from './ContractMethodsContainer';
+import ContractMethodsFilters from './ContractMethodsFilters';
+import useMethodsFilters from './useMethodsFilters';
+import { formatAbi } from './utils';
+
+interface Props {
+  implementations: Array<AddressImplementation>;
+  isLoading?: boolean;
+}
+
+const ContractMethodsProxy = ({ implementations, isLoading: isInitialLoading }: Props) => {
+  const router = useRouter();
+  const sourceAddress = getQueryParamString(router.query.source_address);
+  const tab = getQueryParamString(router.query.tab);
+  const addressHash = getQueryParamString(router.query.hash);
+
+  const [ selectedItem, setSelectedItem ] = React.useState(implementations.find((item) => item.address === sourceAddress) || implementations[0]);
+
+  const contractQuery = useApiQuery('contract', {
+    pathParams: { hash: selectedItem.address },
+    queryOptions: {
+      enabled: Boolean(selectedItem.address),
+      refetchOnMount: false,
+    },
+  });
+
+  const abi = React.useMemo(() => formatAbi(contractQuery.data?.abi || []), [ contractQuery.data?.abi ]);
+  const filters = useMethodsFilters({ abi });
+
+  return (
+    <Flex flexDir="column" rowGap={ 6 }>
+      <ContractConnectWallet isLoading={ isInitialLoading }/>
+      <div>
+        <ContractSourceAddressSelector
+          items={ implementations }
+          selectedItem={ selectedItem }
+          onItemSelect={ setSelectedItem }
+          isLoading={ isInitialLoading }
+          label="Implementation address"
+          mb={ 3 }
+        />
+        <ContractMethodsFilters
+          defaultMethodType={ filters.methodType }
+          defaultSearchTerm={ filters.searchTerm }
+          onChange={ filters.onChange }
+          isLoading={ isInitialLoading }
+        />
+      </div>
+      <ContractMethodsContainer
+        key={ selectedItem.address }
+        isLoading={ isInitialLoading || contractQuery.isPending }
+        isEmpty={ abi.length === 0 }
+        type={ filters.methodType }
+        isError={ contractQuery.isError }
+      >
+        <ContractAbi
+          abi={ abi }
+          tab={ tab }
+          addressHash={ addressHash }
+          visibleItems={ filters.visibleItems }
+          sourceAddress={ selectedItem.address }
+        />
+      </ContractMethodsContainer>
+    </Flex>
+  );
+};
+
+export default React.memo(ContractMethodsProxy);
diff --git a/ui/address/contract/methods/ContractMethodsRegular.pw.tsx b/ui/address/contract/methods/ContractMethodsRegular.pw.tsx
new file mode 100644
index 0000000000..93973df51a
--- /dev/null
+++ b/ui/address/contract/methods/ContractMethodsRegular.pw.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+
+import type { SmartContractMethod } from './types';
+
+import * as addressMock from 'mocks/address/address';
+import * as methodsMock from 'mocks/contract/methods';
+import { test, expect } from 'playwright/lib';
+
+import ContractMethodsRegular from './ContractMethodsRegular';
+
+const addressHash = addressMock.hash;
+
+test('can read method', async({ render, mockContractReadResponse }) => {
+  // for some reason it takes a long time for "wagmi" library to parse response result in the test environment
+  // so I had to increase the test timeout
+  test.slow();
+
+  const hooksConfig = {
+    router: {
+      query: { hash: addressHash, tab: 'read_contract' },
+    },
+  };
+
+  await mockContractReadResponse({
+    abiItem: methodsMock.read[1],
+    address: addressHash,
+    result: [ 'USDC' ],
+  });
+
+  const component = await render(<ContractMethodsRegular abi={ methodsMock.read }/>, { hooksConfig });
+  await component.getByText(/expand all/i).click();
+
+  await expect(component.getByText('USDC')).toBeVisible({ timeout: 20_000 });
+});
+
+test('all methods +@dark-mode +@mobile', async({ render }) => {
+  const hooksConfig = {
+    router: {
+      query: { hash: addressHash, tab: 'read_write_contract' },
+    },
+  };
+
+  const abi: Array<SmartContractMethod> = [ ...methodsMock.read, ...methodsMock.write ];
+  const component = await render(<ContractMethodsRegular abi={ abi }/>, { hooksConfig });
+  await component.getByText(/expand all/i).click();
+  await expect(component.getByText('HTTP request failed')).toBeVisible();
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/contract/methods/ContractMethodsRegular.tsx b/ui/address/contract/methods/ContractMethodsRegular.tsx
new file mode 100644
index 0000000000..0d2d129799
--- /dev/null
+++ b/ui/address/contract/methods/ContractMethodsRegular.tsx
@@ -0,0 +1,46 @@
+import { Flex } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+import type { Abi } from 'viem';
+
+import getQueryParamString from 'lib/router/getQueryParamString';
+
+import ContractAbi from './ContractAbi';
+import ContractConnectWallet from './ContractConnectWallet';
+import ContractMethodsContainer from './ContractMethodsContainer';
+import ContractMethodsFilters from './ContractMethodsFilters';
+import useMethodsFilters from './useMethodsFilters';
+import { formatAbi } from './utils';
+
+interface Props {
+  abi: Abi;
+  isLoading?: boolean;
+}
+
+const ContractMethodsRegular = ({ abi, isLoading }: Props) => {
+
+  const router = useRouter();
+
+  const tab = getQueryParamString(router.query.tab);
+  const addressHash = getQueryParamString(router.query.hash);
+
+  const formattedAbi = React.useMemo(() => formatAbi(abi), [ abi ]);
+  const filters = useMethodsFilters({ abi: formattedAbi });
+
+  return (
+    <Flex flexDir="column" rowGap={ 6 }>
+      <ContractConnectWallet isLoading={ isLoading }/>
+      <ContractMethodsFilters
+        defaultMethodType={ filters.methodType }
+        defaultSearchTerm={ filters.searchTerm }
+        onChange={ filters.onChange }
+        isLoading={ isLoading }
+      />
+      <ContractMethodsContainer isLoading={ isLoading } isEmpty={ formattedAbi.length === 0 } type={ filters.methodType }>
+        <ContractAbi abi={ formattedAbi } tab={ tab } addressHash={ addressHash } visibleItems={ filters.visibleItems }/>
+      </ContractMethodsContainer>
+    </Flex>
+  );
+};
+
+export default React.memo(ContractMethodsRegular);
diff --git a/ui/address/contract/methods/__screenshots__/ContractMethodsCustom.pw.tsx_default_with-data-1.png b/ui/address/contract/methods/__screenshots__/ContractMethodsCustom.pw.tsx_default_with-data-1.png
new file mode 100644
index 0000000000..ce280563c5
Binary files /dev/null and b/ui/address/contract/methods/__screenshots__/ContractMethodsCustom.pw.tsx_default_with-data-1.png differ
diff --git a/ui/address/contract/methods/__screenshots__/ContractMethodsCustom.pw.tsx_default_without-data-1.png b/ui/address/contract/methods/__screenshots__/ContractMethodsCustom.pw.tsx_default_without-data-1.png
new file mode 100644
index 0000000000..9401b8221c
Binary files /dev/null and b/ui/address/contract/methods/__screenshots__/ContractMethodsCustom.pw.tsx_default_without-data-1.png differ
diff --git a/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_default_with-multiple-implementations-mobile-1.png b/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_default_with-multiple-implementations-mobile-1.png
new file mode 100644
index 0000000000..cf09184eee
Binary files /dev/null and b/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_default_with-multiple-implementations-mobile-1.png differ
diff --git a/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_default_with-one-implementation-mobile-1.png b/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_default_with-one-implementation-mobile-1.png
new file mode 100644
index 0000000000..bf3bc6804c
Binary files /dev/null and b/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_default_with-one-implementation-mobile-1.png differ
diff --git a/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_mobile_with-multiple-implementations-mobile-1.png b/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_mobile_with-multiple-implementations-mobile-1.png
new file mode 100644
index 0000000000..dd51667557
Binary files /dev/null and b/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_mobile_with-multiple-implementations-mobile-1.png differ
diff --git a/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_mobile_with-one-implementation-mobile-1.png b/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_mobile_with-one-implementation-mobile-1.png
new file mode 100644
index 0000000000..c51203e7f0
Binary files /dev/null and b/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_mobile_with-one-implementation-mobile-1.png differ
diff --git a/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_dark-color-mode_all-methods-dark-mode-mobile-1.png b/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_dark-color-mode_all-methods-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..9e294a2b1f
Binary files /dev/null and b/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_dark-color-mode_all-methods-dark-mode-mobile-1.png differ
diff --git a/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_default_all-methods-dark-mode-mobile-1.png b/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_default_all-methods-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..acb79c5e68
Binary files /dev/null and b/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_default_all-methods-dark-mode-mobile-1.png differ
diff --git a/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_mobile_all-methods-dark-mode-mobile-1.png b/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_mobile_all-methods-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..e90d6e5653
Binary files /dev/null and b/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_mobile_all-methods-dark-mode-mobile-1.png differ
diff --git a/ui/address/contract/methods/form/ContractMethodAddressButton.tsx b/ui/address/contract/methods/form/ContractMethodAddressButton.tsx
new file mode 100644
index 0000000000..c21a82f066
--- /dev/null
+++ b/ui/address/contract/methods/form/ContractMethodAddressButton.tsx
@@ -0,0 +1,36 @@
+import { Button, Tooltip } from '@chakra-ui/react';
+import React from 'react';
+
+import useAccount from 'lib/web3/useAccount';
+
+interface Props {
+  onClick: (address: string) => void;
+  isDisabled?: boolean;
+}
+
+const ContractMethodAddressButton = ({ onClick, isDisabled }: Props) => {
+  const { address } = useAccount();
+
+  const handleClick = React.useCallback(() => {
+    address && onClick(address);
+  }, [ address, onClick ]);
+
+  return (
+    <Tooltip label={ !address ? 'Connect your wallet to enter your address.' : undefined }>
+      <Button
+        variant="subtle"
+        colorScheme="gray"
+        size="xs"
+        fontSize="normal"
+        fontWeight={ 500 }
+        ml={ 1 }
+        onClick={ handleClick }
+        isDisabled={ isDisabled || !address }
+      >
+        Self
+      </Button>
+    </Tooltip>
+  );
+};
+
+export default React.memo(ContractMethodAddressButton);
diff --git a/ui/address/contract/methods/form/ContractMethodArrayButton.tsx b/ui/address/contract/methods/form/ContractMethodArrayButton.tsx
new file mode 100644
index 0000000000..a39df7c926
--- /dev/null
+++ b/ui/address/contract/methods/form/ContractMethodArrayButton.tsx
@@ -0,0 +1,31 @@
+import { IconButton, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props {
+  index: number;
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  isDisabled?: boolean;
+  type: 'add' | 'remove';
+  className?: string;
+}
+
+const ContractMethodArrayButton = ({ className, type, index, onClick, isDisabled }: Props) => {
+  return (
+    <IconButton
+      className={ className }
+      aria-label={ type }
+      data-index={ index }
+      variant="outline"
+      w="20px"
+      h="20px"
+      flexShrink={ 0 }
+      onClick={ onClick }
+      icon={ <IconSvg name={ type === 'remove' ? 'minus' : 'plus' } boxSize={ 3 }/> }
+      isDisabled={ isDisabled }
+    />
+  );
+};
+
+export default React.memo(chakra(ContractMethodArrayButton));
diff --git a/ui/address/contract/methods/form/ContractMethodFieldAccordion.tsx b/ui/address/contract/methods/form/ContractMethodFieldAccordion.tsx
new file mode 100644
index 0000000000..93084f71de
--- /dev/null
+++ b/ui/address/contract/methods/form/ContractMethodFieldAccordion.tsx
@@ -0,0 +1,51 @@
+import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import ContractMethodArrayButton from './ContractMethodArrayButton';
+
+export interface Props {
+  label: string;
+  level: number;
+  children: React.ReactNode;
+  onAddClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onRemoveClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  index?: number;
+  isInvalid?: boolean;
+}
+
+const ContractMethodFieldAccordion = ({ label, level, children, onAddClick, onRemoveClick, index, isInvalid }: Props) => {
+  const bgColorLevel0 = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+  const bgColor = useColorModeValue('whiteAlpha.700', 'blackAlpha.700');
+
+  return (
+    <Accordion allowToggle w="100%" bgColor={ level === 0 ? bgColorLevel0 : bgColor } borderRadius="base">
+      <AccordionItem _first={{ borderTopWidth: 0 }} _last={{ borderBottomWidth: 0 }}>
+        { ({ isExpanded }) => (
+          <>
+            <AccordionButton
+              as="div"
+              cursor="pointer"
+              px="6px"
+              py="6px"
+              wordBreak="break-all"
+              textAlign="left"
+              _hover={{ bgColor: 'inherit' }}
+            >
+              <AccordionIcon transform={ isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)' } color="gray.500"/>
+              <Box fontSize="sm" lineHeight={ 5 } fontWeight={ 700 } mr="auto" ml={ 1 } color={ isInvalid ? 'error' : undefined }>
+                { label }
+              </Box>
+              { onRemoveClick && <ContractMethodArrayButton index={ index } onClick={ onRemoveClick } type="remove"/> }
+              { onAddClick && <ContractMethodArrayButton index={ index } onClick={ onAddClick } type="add" ml={ 2 }/> }
+            </AccordionButton>
+            <AccordionPanel display="flex" flexDir="column" rowGap={ 1 } pl="18px" pr="6px">
+              { children }
+            </AccordionPanel>
+          </>
+        ) }
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+export default React.memo(ContractMethodFieldAccordion);
diff --git a/ui/address/contract/methods/form/ContractMethodFieldInput.tsx b/ui/address/contract/methods/form/ContractMethodFieldInput.tsx
new file mode 100644
index 0000000000..7869c1690b
--- /dev/null
+++ b/ui/address/contract/methods/form/ContractMethodFieldInput.tsx
@@ -0,0 +1,160 @@
+import { Box, Button, Flex, FormControl, Input, InputGroup, InputRightElement, chakra, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+import { NumericFormat } from 'react-number-format';
+
+import type { ContractAbiItemInput } from '../types';
+
+import { HOUR, SECOND } from 'lib/consts';
+import ClearButton from 'ui/shared/ClearButton';
+
+import ContractMethodAddressButton from './ContractMethodAddressButton';
+import ContractMethodFieldLabel from './ContractMethodFieldLabel';
+import ContractMethodMultiplyButton from './ContractMethodMultiplyButton';
+import useFormatFieldValue from './useFormatFieldValue';
+import useValidateField from './useValidateField';
+import { matchInt } from './utils';
+
+const TIMESTAMP_BUTTON_REGEXP = /time|deadline|expiration|expiry/i;
+
+interface Props {
+  data: ContractAbiItemInput;
+  hideLabel?: boolean;
+  path: string;
+  className?: string;
+  isDisabled: boolean;
+  isOptional?: boolean;
+  level: number;
+}
+
+const ContractMethodFieldInput = ({ data, hideLabel, path: name, className, isDisabled, isOptional: isOptionalProp, level }: Props) => {
+  const ref = React.useRef<HTMLInputElement>(null);
+
+  const isNativeCoin = data.fieldType === 'native_coin';
+  const isOptional = isOptionalProp || isNativeCoin;
+
+  const argTypeMatchInt = React.useMemo(() => matchInt(data.type), [ data.type ]);
+  const hasTimestampButton = React.useMemo(() => TIMESTAMP_BUTTON_REGEXP.test(data.name || ''), [ data.name ]);
+  const validate = useValidateField({ isOptional, argType: data.type, argTypeMatchInt });
+  const format = useFormatFieldValue({ argType: data.type, argTypeMatchInt });
+
+  const { control, setValue, getValues } = useFormContext();
+  const { field, fieldState } = useController({ control, name, rules: { validate } });
+
+  const inputBgColor = useColorModeValue('white', 'black');
+  const nativeCoinRowBgColor = useColorModeValue('gray.100', 'gray.700');
+
+  const hasMultiplyButton = argTypeMatchInt && Number(argTypeMatchInt.power) >= 64;
+
+  const handleChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const formattedValue = format(event.target.value);
+    field.onChange(formattedValue); // data send back to hook form
+    setValue(name, formattedValue); // UI state
+  }, [ field, name, setValue, format ]);
+
+  const handleClear = React.useCallback(() => {
+    setValue(name, '');
+    ref.current?.focus();
+  }, [ name, setValue ]);
+
+  const handleMultiplyButtonClick = React.useCallback((power: number) => {
+    const zeroes = Array(power).fill('0').join('');
+    const value = getValues(name);
+    const newValue = format(value ? value + zeroes : '1' + zeroes);
+    setValue(name, newValue, { shouldValidate: true });
+  }, [ format, getValues, name, setValue ]);
+
+  const handleMaxIntButtonClick = React.useCallback(() => {
+    if (!argTypeMatchInt) {
+      return;
+    }
+
+    const newValue = format(argTypeMatchInt.max.toString());
+    setValue(name, newValue, { shouldValidate: true });
+  }, [ format, name, setValue, argTypeMatchInt ]);
+
+  const handleAddressButtonClick = React.useCallback((address: string) => {
+    const newValue = format(address);
+    setValue(name, newValue, { shouldValidate: true });
+  }, [ format, name, setValue ]);
+
+  const handleTimestampButtonClick = React.useCallback(() => {
+    const newValue = format(String(Math.floor((Date.now() + HOUR) / SECOND)));
+    setValue(name, newValue, { shouldValidate: true });
+  }, [ format, name, setValue ]);
+
+  const error = fieldState.error;
+
+  return (
+    <Flex
+      className={ className }
+      flexDir={{ base: 'column', md: 'row' }}
+      alignItems="flex-start"
+      columnGap={ 3 }
+      w="100%"
+      bgColor={ isNativeCoin ? nativeCoinRowBgColor : undefined }
+      borderRadius="base"
+      px="6px"
+      py={ isNativeCoin ? 1 : 0 }
+    >
+      { !hideLabel && <ContractMethodFieldLabel data={ data } isOptional={ isOptional } level={ level }/> }
+      <FormControl isDisabled={ isDisabled }>
+        <InputGroup size="xs">
+          <Input
+            { ...field }
+            { ...(argTypeMatchInt ? {
+              as: NumericFormat,
+              thousandSeparator: ' ',
+              decimalScale: 0,
+              allowNegative: !argTypeMatchInt.isUnsigned,
+            } : {}) }
+            ref={ ref }
+            onChange={ handleChange }
+            required={ !isOptional }
+            isInvalid={ Boolean(error) }
+            placeholder={ data.type }
+            autoComplete="off"
+            data-1p-ignore
+            bgColor={ inputBgColor }
+            paddingRight={ hasMultiplyButton ? '120px' : '40px' }
+          />
+          <InputRightElement w="auto" right={ 1 } bgColor={ inputBgColor } h="calc(100% - 4px)" top="2px" borderRadius="base">
+            { field.value !== undefined && field.value !== '' && <ClearButton onClick={ handleClear } isDisabled={ isDisabled }/> }
+            { data.type === 'address' && <ContractMethodAddressButton onClick={ handleAddressButtonClick } isDisabled={ isDisabled }/> }
+            { argTypeMatchInt && !isNativeCoin && (hasTimestampButton ? (
+              <Button
+                variant="subtle"
+                colorScheme="gray"
+                size="xs"
+                fontSize="normal"
+                fontWeight={ 500 }
+                ml={ 1 }
+                onClick={ handleTimestampButtonClick }
+                isDisabled={ isDisabled }
+              >
+                Now+1h
+              </Button>
+            ) : (
+              <Button
+                variant="subtle"
+                colorScheme="gray"
+                size="xs"
+                fontSize="normal"
+                fontWeight={ 500 }
+                ml={ 1 }
+                onClick={ handleMaxIntButtonClick }
+                isDisabled={ isDisabled }
+              >
+                Max
+              </Button>
+            )) }
+            { hasMultiplyButton && <ContractMethodMultiplyButton onClick={ handleMultiplyButtonClick } isDisabled={ isDisabled }/> }
+          </InputRightElement>
+        </InputGroup>
+        { error && <Box color="error" fontSize="sm" lineHeight={ 5 } mt={ 1 }>{ error.message }</Box> }
+      </FormControl>
+    </Flex>
+  );
+};
+
+export default React.memo(chakra(ContractMethodFieldInput));
diff --git a/ui/address/contract/methods/form/ContractMethodFieldInputArray.tsx b/ui/address/contract/methods/form/ContractMethodFieldInputArray.tsx
new file mode 100644
index 0000000000..0c98d14589
--- /dev/null
+++ b/ui/address/contract/methods/form/ContractMethodFieldInputArray.tsx
@@ -0,0 +1,165 @@
+import { Flex } from '@chakra-ui/react';
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import type { ContractAbiItemInput } from '../types';
+
+import ContractMethodArrayButton from './ContractMethodArrayButton';
+import type { Props as AccordionProps } from './ContractMethodFieldAccordion';
+import ContractMethodFieldAccordion from './ContractMethodFieldAccordion';
+import ContractMethodFieldInput from './ContractMethodFieldInput';
+import ContractMethodFieldInputTuple from './ContractMethodFieldInputTuple';
+import ContractMethodFieldLabel from './ContractMethodFieldLabel';
+import { getFieldLabel, matchArray, transformDataForArrayItem } from './utils';
+
+interface Props extends Pick<AccordionProps, 'onAddClick' | 'onRemoveClick' | 'index'> {
+  data: ContractAbiItemInput;
+  level: number;
+  basePath: string;
+  isDisabled: boolean;
+  isArrayElement?: boolean;
+  size?: number;
+}
+
+const ContractMethodFieldInputArray = ({
+  data,
+  level,
+  basePath,
+  onAddClick,
+  onRemoveClick,
+  index: parentIndex,
+  isDisabled,
+  isArrayElement,
+}: Props) => {
+  const { formState: { errors } } = useFormContext();
+  const fieldsWithErrors = Object.keys(errors);
+  const isInvalid = fieldsWithErrors.some((field) => field.startsWith(basePath));
+
+  const arrayMatch = matchArray(data.type);
+  const hasFixedSize = arrayMatch !== null && arrayMatch.size !== Infinity;
+
+  const [ registeredIndices, setRegisteredIndices ] = React.useState(hasFixedSize ? Array(arrayMatch.size).fill(0).map((_, i) => i) : [ 0 ]);
+
+  const handleAddButtonClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    setRegisteredIndices((prev) => [ ...prev, prev[prev.length - 1] + 1 ]);
+  }, []);
+
+  const handleRemoveButtonClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    const itemIndex = event.currentTarget.getAttribute('data-index');
+    if (itemIndex) {
+      setRegisteredIndices((prev) => prev.filter((index) => index !== Number(itemIndex)));
+    }
+  }, [ ]);
+
+  if (arrayMatch?.isNested) {
+    return (
+      <>
+        {
+          registeredIndices.map((registeredIndex, index) => {
+            const itemData = transformDataForArrayItem(data, index);
+            const itemBasePath = `${ basePath }:${ registeredIndex }`;
+            const itemIsInvalid = fieldsWithErrors.some((field) => field.startsWith(itemBasePath));
+
+            return (
+              <ContractMethodFieldAccordion
+                key={ registeredIndex }
+                level={ level + 1 }
+                label={ getFieldLabel(itemData) }
+                isInvalid={ itemIsInvalid }
+                onAddClick={ !hasFixedSize && index === registeredIndices.length - 1 ? handleAddButtonClick : undefined }
+                onRemoveClick={ !hasFixedSize && registeredIndices.length > 1 ? handleRemoveButtonClick : undefined }
+                index={ registeredIndex }
+              >
+                <ContractMethodFieldInputArray
+                  key={ registeredIndex }
+                  data={ itemData }
+                  basePath={ itemBasePath }
+                  level={ level + 1 }
+                  isDisabled={ isDisabled }
+                  isArrayElement
+                />
+              </ContractMethodFieldAccordion>
+            );
+          })
+        }
+      </>
+    );
+  }
+
+  const isTupleArray = arrayMatch?.itemType.includes('tuple');
+
+  if (isTupleArray) {
+    const content = (
+      <>
+        { registeredIndices.map((registeredIndex, index) => {
+          const itemData = transformDataForArrayItem(data, index);
+
+          return (
+            <ContractMethodFieldInputTuple
+              key={ registeredIndex }
+              data={ itemData }
+              basePath={ `${ basePath }:${ registeredIndex }` }
+              level={ level + 1 }
+              onAddClick={ !hasFixedSize && index === registeredIndices.length - 1 ? handleAddButtonClick : undefined }
+              onRemoveClick={ !hasFixedSize && registeredIndices.length > 1 ? handleRemoveButtonClick : undefined }
+              index={ registeredIndex }
+              isDisabled={ isDisabled }
+              isOptional={ registeredIndices.length === 1 }
+            />
+          );
+        }) }
+      </>
+    );
+
+    if (isArrayElement) {
+      return content;
+    }
+
+    return (
+      <ContractMethodFieldAccordion
+        level={ level }
+        label={ getFieldLabel(data) }
+        onAddClick={ onAddClick }
+        onRemoveClick={ onRemoveClick }
+        index={ parentIndex }
+        isInvalid={ isInvalid }
+      >
+        { content }
+      </ContractMethodFieldAccordion>
+    );
+  }
+
+  // primitive value array
+  return (
+    <Flex flexDir={{ base: 'column', md: 'row' }} alignItems="flex-start" columnGap={ 3 } px="6px">
+      { !isArrayElement && <ContractMethodFieldLabel data={ data } level={ level } isOptional={ registeredIndices.length === 1 }/> }
+      <Flex flexDir="column" rowGap={ 1 } w="100%">
+        { registeredIndices.map((registeredIndex, index) => {
+          const itemData = transformDataForArrayItem(data, index);
+
+          return (
+            <Flex key={ registeredIndex } alignItems="flex-start" columnGap={ 3 }>
+              <ContractMethodFieldInput
+                data={ itemData }
+                hideLabel
+                path={ `${ basePath }:${ index }` }
+                level={ level }
+                px={ 0 }
+                isDisabled={ isDisabled }
+                isOptional={ registeredIndices.length === 1 }
+              />
+              { !hasFixedSize && registeredIndices.length > 1 &&
+                <ContractMethodArrayButton index={ registeredIndex } onClick={ handleRemoveButtonClick } type="remove" my="6px"/> }
+              { !hasFixedSize && index === registeredIndices.length - 1 &&
+                <ContractMethodArrayButton index={ registeredIndex } onClick={ handleAddButtonClick } type="add" my="6px"/> }
+            </Flex>
+          );
+        }) }
+      </Flex>
+    </Flex>
+  );
+};
+
+export default React.memo(ContractMethodFieldInputArray);
diff --git a/ui/address/contract/methods/form/ContractMethodFieldInputTuple.tsx b/ui/address/contract/methods/form/ContractMethodFieldInputTuple.tsx
new file mode 100644
index 0000000000..6f820a0dd8
--- /dev/null
+++ b/ui/address/contract/methods/form/ContractMethodFieldInputTuple.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import type { ContractAbiItemInput } from '../types';
+
+import type { Props as AccordionProps } from './ContractMethodFieldAccordion';
+import ContractMethodFieldAccordion from './ContractMethodFieldAccordion';
+import ContractMethodFieldInput from './ContractMethodFieldInput';
+import ContractMethodFieldInputArray from './ContractMethodFieldInputArray';
+import { getFieldLabel, matchArray } from './utils';
+
+interface Props extends Pick<AccordionProps, 'onAddClick' | 'onRemoveClick' | 'index'> {
+  data: ContractAbiItemInput;
+  basePath: string;
+  level: number;
+  isDisabled: boolean;
+  isOptional?: boolean;
+}
+
+const ContractMethodFieldInputTuple = ({ data, basePath, level, isDisabled, isOptional, ...accordionProps }: Props) => {
+  const { formState: { errors } } = useFormContext();
+  const fieldsWithErrors = Object.keys(errors);
+  const isInvalid = fieldsWithErrors.some((field) => field.startsWith(basePath));
+
+  if (!('components' in data)) {
+    return null;
+  }
+
+  return (
+    <ContractMethodFieldAccordion
+      { ...accordionProps }
+      level={ level }
+      label={ getFieldLabel(data) }
+      isInvalid={ isInvalid }
+    >
+      { data.components?.map((component, index) => {
+        if ('components' in component && component.type === 'tuple') {
+          return (
+            <ContractMethodFieldInputTuple
+              key={ index }
+              data={ component }
+              basePath={ `${ basePath }:${ index }` }
+              level={ level + 1 }
+              isDisabled={ isDisabled }
+              isOptional={ isOptional }
+            />
+          );
+        }
+
+        const arrayMatch = matchArray(component.type);
+        if (arrayMatch) {
+          return (
+            <ContractMethodFieldInputArray
+              key={ index }
+              data={ component }
+              basePath={ `${ basePath }:${ index }` }
+              level={ arrayMatch.itemType === 'tuple' ? level + 1 : level }
+              isDisabled={ isDisabled }
+            />
+          );
+        }
+
+        return (
+          <ContractMethodFieldInput
+            key={ index }
+            data={ component }
+            path={ `${ basePath }:${ index }` }
+            isDisabled={ isDisabled }
+            isOptional={ isOptional }
+            level={ level }
+          />
+        );
+      }) }
+    </ContractMethodFieldAccordion>
+  );
+};
+
+export default React.memo(ContractMethodFieldInputTuple);
diff --git a/ui/address/contract/methods/form/ContractMethodFieldLabel.tsx b/ui/address/contract/methods/form/ContractMethodFieldLabel.tsx
new file mode 100644
index 0000000000..305738fe12
--- /dev/null
+++ b/ui/address/contract/methods/form/ContractMethodFieldLabel.tsx
@@ -0,0 +1,32 @@
+import { Box, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ContractAbiItemInput } from '../types';
+
+import { getFieldLabel } from './utils';
+
+interface Props {
+  data: ContractAbiItemInput;
+  isOptional?: boolean;
+  level: number;
+}
+
+const ContractMethodFieldLabel = ({ data, isOptional, level }: Props) => {
+  const color = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
+
+  return (
+    <Box
+      w="250px"
+      fontSize="sm"
+      lineHeight={ 5 }
+      py="6px"
+      flexShrink={ 0 }
+      fontWeight={ 500 }
+      color={ level > 1 ? color : undefined }
+    >
+      { getFieldLabel(data, !isOptional) }
+    </Box>
+  );
+};
+
+export default React.memo(ContractMethodFieldLabel);
diff --git a/ui/address/contract/methods/form/ContractMethodForm.pw.tsx b/ui/address/contract/methods/form/ContractMethodForm.pw.tsx
new file mode 100644
index 0000000000..d385156328
--- /dev/null
+++ b/ui/address/contract/methods/form/ContractMethodForm.pw.tsx
@@ -0,0 +1,144 @@
+import React from 'react';
+
+import type { FormSubmitHandler, SmartContractMethod } from '../types';
+
+import { test, expect } from 'playwright/lib';
+
+import ContractMethodForm from './ContractMethodForm';
+
+const onSubmit: FormSubmitHandler = () => Promise.resolve({ source: 'wallet_client' as const, data: { hash: '0x0000' as `0x${ string }` } });
+const onReset = () => {};
+
+const data: SmartContractMethod = {
+  inputs: [
+    // TUPLE
+    {
+      components: [
+        { internalType: 'address', name: 'offerToken', type: 'address' },
+        { internalType: 'uint256', name: 'offerIdentifier', type: 'uint256' },
+        { internalType: 'enum BasicOrderType', name: 'basicOrderType', type: 'uint8' },
+        {
+          components: [
+            { internalType: 'uint256', name: 'amount', type: 'uint256' },
+            { internalType: 'address payable', name: 'recipient', type: 'address' },
+          ],
+          internalType: 'struct AdditionalRecipient[]',
+          name: 'additionalRecipients',
+          type: 'tuple[]',
+        },
+        { internalType: 'bytes', name: 'signature', type: 'bytes' },
+      ],
+      internalType: 'struct BasicOrderParameters',
+      name: 'parameters',
+      type: 'tuple',
+    },
+
+    // NESTED ARRAY OF TUPLES
+    {
+      components: [
+        {
+          internalType: 'uint256',
+          name: 'orderIndex',
+          type: 'uint256',
+        },
+        {
+          internalType: 'uint256',
+          name: 'itemIndex',
+          type: 'uint256',
+        },
+      ],
+      internalType: 'struct FulfillmentComponent[][]',
+      name: '',
+      type: 'tuple[][]',
+    },
+
+    // TOP LEVEL NESTED ARRAY
+    {
+      internalType: 'int256[2][][3]',
+      name: 'ParentArray',
+      type: 'int256[2][][3]',
+    },
+
+    // LITERALS
+    { internalType: 'bytes32', name: 'fulfillerConduitKey', type: 'bytes32' },
+    { internalType: 'address', name: 'recipient', type: 'address' },
+    { internalType: 'uint256', name: 'startTime', type: 'uint256' },
+    { internalType: 'int8[]', name: 'criteriaProof', type: 'int8[]' },
+  ],
+  method_id: '87201b41',
+  name: 'fulfillAvailableAdvancedOrders',
+  outputs: [
+    { internalType: 'bool[]', name: '', type: 'bool[]' },
+    {
+      components: [
+        {
+          components: [
+            { internalType: 'enum ItemType', name: 'itemType', type: 'uint8' },
+            { internalType: 'address', name: 'token', type: 'address' },
+            { internalType: 'uint256', name: 'identifier', type: 'uint256' },
+            { internalType: 'uint256', name: 'amount', type: 'uint256' },
+            { internalType: 'address payable', name: 'recipient', type: 'address' },
+          ],
+          internalType: 'struct ReceivedItem',
+          name: 'item',
+          type: 'tuple',
+        },
+        { internalType: 'address', name: 'offerer', type: 'address' },
+        { internalType: 'bytes32', name: 'conduitKey', type: 'bytes32' },
+      ],
+      internalType: 'struct Execution[]',
+      name: '',
+      type: 'tuple[]',
+    },
+  ],
+  stateMutability: 'payable',
+  type: 'function',
+  payable: true,
+  constant: false,
+};
+
+test('base view +@mobile +@dark-mode', async({ render }) => {
+
+  const component = await render(
+    <ContractMethodForm
+      data={ data }
+      onSubmit={ onSubmit }
+      onReset={ onReset }
+      isOpen
+      attempt={ 0 }
+    />,
+  );
+
+  // fill top level fields
+  await component.getByPlaceholder('address').last().fill('0x0000');
+  await component.getByPlaceholder('uint256').last().fill('42');
+  await component.getByRole('button', { name: '×' }).last().click();
+  await component.getByPlaceholder('bytes32').last().fill('aa');
+  await component.getByRole('button', { name: 'add' }).last().click();
+  await component.getByRole('button', { name: 'add' }).last().click();
+  await component.getByPlaceholder('int8', { exact: true }).first().fill('1');
+  await component.getByPlaceholder('int8', { exact: true }).last().fill('3');
+
+  // expand all sections
+  await component.getByText('parameters').click();
+  await component.getByText('additionalRecipients').click();
+  await component.getByText('#1 AdditionalRecipient').click();
+  await component.getByRole('button', { name: 'add' }).first().click();
+  await component.getByPlaceholder('uint256').nth(1).fill('42');
+  await component.getByPlaceholder('address').nth(1).fill('0xd789a607CEac2f0E14867de4EB15b15C9FFB5859');
+
+  await component.getByText('struct FulfillmentComponent[][]').click();
+  await component.getByRole('button', { name: 'add' }).nth(1).click();
+  await component.getByText('#1 FulfillmentComponent[]').click();
+  await component.getByLabel('#1 FulfillmentComponent[] (tuple[])').getByText('#1 FulfillmentComponent (tuple)').click();
+  await component.getByRole('button', { name: 'add' }).nth(1).click();
+
+  await component.getByText('ParentArray (int256[2][][3])').click();
+  await component.getByText('#1 int256[2][] (int256[2][])').click();
+  await component.getByLabel('#1 int256[2][] (int256[2][])').getByText('#1 int256[2] (int256[2])').click();
+
+  // submit form
+  await component.getByRole('button', { name: 'Write' }).click();
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/contract/methods/form/ContractMethodForm.tsx b/ui/address/contract/methods/form/ContractMethodForm.tsx
new file mode 100644
index 0000000000..9d3722ada7
--- /dev/null
+++ b/ui/address/contract/methods/form/ContractMethodForm.tsx
@@ -0,0 +1,320 @@
+import { Box, Button, Flex, Tooltip, chakra, useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm, FormProvider } from 'react-hook-form';
+import { encodeFunctionData, type AbiFunction } from 'viem';
+
+import type { FormSubmitHandler, FormSubmitResult, MethodCallStrategy, SmartContractMethod } from '../types';
+
+import config from 'configs/app';
+import { SECOND } from 'lib/consts';
+import * as mixpanel from 'lib/mixpanel/index';
+import IconSvg from 'ui/shared/IconSvg';
+
+import { isReadMethod } from '../utils';
+import ContractMethodFieldAccordion from './ContractMethodFieldAccordion';
+import ContractMethodFieldInput from './ContractMethodFieldInput';
+import ContractMethodFieldInputArray from './ContractMethodFieldInputArray';
+import ContractMethodFieldInputTuple from './ContractMethodFieldInputTuple';
+import ContractMethodResultPublicClient from './ContractMethodResultPublicClient';
+import ContractMethodResultWalletClient from './ContractMethodResultWalletClient';
+import { getFieldLabel, matchArray, transformFormDataToMethodArgs } from './utils';
+import type { ContractMethodFormFields } from './utils';
+
+// eslint-disable-next-line max-len
+const NO_WALLET_CLIENT_TEXT = 'Blockchain interaction is not available at the moment since WalletConnect is not configured for this application. Please contact the service maintainer to make necessary changes in the service configuration.';
+
+interface Props {
+  data: SmartContractMethod;
+  attempt: number;
+  onSubmit: FormSubmitHandler;
+  isOpen: boolean;
+  onReset: () => void;
+}
+
+const ContractMethodForm = ({ data, attempt, onSubmit, onReset, isOpen }: Props) => {
+
+  const [ result, setResult ] = React.useState<FormSubmitResult>();
+  const [ isLoading, setLoading ] = React.useState(false);
+  const [ callStrategy, setCallStrategy ] = React.useState<MethodCallStrategy>();
+  const callStrategyRef = React.useRef(callStrategy);
+
+  const formApi = useForm<ContractMethodFormFields>({
+    mode: 'all',
+    shouldUnregister: true,
+  });
+
+  const calldataButtonTooltip = useDisclosure();
+
+  const handleButtonClick = React.useCallback((event: React.MouseEvent) => {
+    const callStrategy = event?.currentTarget.getAttribute('data-call-strategy');
+    setCallStrategy(callStrategy as MethodCallStrategy);
+    callStrategyRef.current = callStrategy as MethodCallStrategy;
+
+    if (callStrategy === 'copy_calldata') {
+      calldataButtonTooltip.onOpen();
+      window.setTimeout(() => {
+        calldataButtonTooltip.onClose();
+      }, SECOND);
+    }
+  }, [ calldataButtonTooltip ]);
+
+  const methodType = isReadMethod(data) ? 'read' : 'write';
+
+  const onFormSubmit: SubmitHandler<ContractMethodFormFields> = React.useCallback(async(formData) => {
+    const args = transformFormDataToMethodArgs(formData);
+
+    if (callStrategyRef.current === 'copy_calldata') {
+      if (!('name' in data) || !data.name) {
+        return;
+      }
+
+      const callData = encodeFunctionData({
+        abi: [ data ],
+        functionName: data.name,
+        // since we have added additional input for native coin value
+        // we need to slice it off
+        args: args.slice(0, data.inputs.length),
+      });
+      await navigator.clipboard.writeText(callData);
+      return;
+    }
+
+    setResult(undefined);
+    setLoading(true);
+
+    onSubmit(data, args, callStrategyRef.current)
+      .then((result) => {
+        setResult(result);
+      })
+      .catch((error: Error) => {
+        setResult({
+          source: callStrategyRef.current === 'write' ? 'wallet_client' : 'public_client',
+          data: error,
+        });
+        setLoading(false);
+      })
+      .finally(() => {
+        mixpanel.logEvent(mixpanel.EventTypes.CONTRACT_INTERACTION, {
+          'Method type': methodType === 'write' ? 'Write' : 'Read',
+          'Method name': 'name' in data ? data.name : 'Fallback',
+        });
+      });
+  }, [ data, methodType, onSubmit ]);
+
+  React.useEffect(() => {
+    if (isOpen && !callStrategyRef.current && attempt === 0) {
+      const hasConstantOutputs = isReadMethod(data) && data.inputs.length === 0;
+      if (hasConstantOutputs) {
+        setCallStrategy('read');
+        callStrategyRef.current = 'read';
+        onFormSubmit({});
+      }
+    }
+  }, [ data, isOpen, onFormSubmit, attempt ]);
+
+  const handleResultSettle = React.useCallback(() => {
+    setLoading(false);
+  }, []);
+
+  const handleFormChange = React.useCallback(() => {
+    result && setResult(undefined);
+  }, [ result ]);
+
+  const inputs: AbiFunction['inputs'] = React.useMemo(() => {
+    return [
+      ...('inputs' in data && data.inputs ? data.inputs : []),
+      ...('stateMutability' in data && data.stateMutability === 'payable' ? [ {
+        name: `Send native ${ config.chain.currency.symbol || 'coin' }`,
+        type: 'uint256' as const,
+        internalType: 'uint256' as const,
+        fieldType: 'native_coin' as const,
+      } ] : []),
+    ];
+  }, [ data ]);
+
+  const primaryButton = (() => {
+    const isDisabled = !config.features.blockchainInteraction.isEnabled && methodType === 'write';
+    const text = methodType === 'write' ? 'Write' : 'Read';
+    const buttonCallStrategy = methodType === 'write' ? 'write' : 'read';
+
+    return (
+      <Tooltip label={ isDisabled ? NO_WALLET_CLIENT_TEXT : undefined } maxW="300px">
+        <Button
+          isLoading={ callStrategy === buttonCallStrategy && isLoading }
+          isDisabled={ isLoading || isDisabled }
+          onClick={ handleButtonClick }
+          loadingText={ text }
+          variant="outline"
+          size="sm"
+          flexShrink={ 0 }
+          width="min-content"
+          px={ 4 }
+          type="submit"
+          data-call-strategy={ buttonCallStrategy }
+        >
+          { text }
+        </Button>
+      </Tooltip>
+    );
+  })();
+
+  const secondaryButton = (() => {
+    if (methodType === 'read') {
+      return null;
+    }
+
+    const hasOutputs = 'outputs' in data && data.outputs.length > 0;
+    if (!hasOutputs) {
+      return null;
+    }
+
+    const text = 'Simulate';
+    const buttonCallStrategy = 'simulate';
+
+    return (
+      <Button
+        isLoading={ callStrategy === buttonCallStrategy && isLoading }
+        isDisabled={ isLoading }
+        onClick={ handleButtonClick }
+        loadingText={ text }
+        variant="outline"
+        size="sm"
+        flexShrink={ 0 }
+        width="min-content"
+        px={ 4 }
+        mr={ 3 }
+        type="submit"
+        data-call-strategy={ buttonCallStrategy }
+      >
+        { text }
+      </Button>
+    );
+  })();
+
+  const copyCallDataButton = (() => {
+    if (inputs.length === 0) {
+      return null;
+    }
+
+    if (inputs.length === 1) {
+      const [ input ] = inputs;
+      if ('fieldType' in input && input.fieldType === 'native_coin') {
+        return null;
+      }
+    }
+
+    const text = 'Copy calldata';
+    const buttonCallStrategy = 'copy_calldata';
+    const isDisabled = isLoading || !formApi.formState.isValid;
+
+    return (
+      <Tooltip
+        isDisabled={ isDisabled }
+        label="Copied"
+        closeDelay={ SECOND }
+        isOpen={ calldataButtonTooltip.isOpen }
+        onClose={ calldataButtonTooltip.onClose }
+      >
+        <Button
+          isLoading={ callStrategy === buttonCallStrategy && isLoading }
+          isDisabled={ isDisabled }
+          onClick={ handleButtonClick }
+          loadingText={ text }
+          variant="outline"
+          size="sm"
+          flexShrink={ 0 }
+          width="min-content"
+          px={ 4 }
+          ml={ 3 }
+          type="submit"
+          data-call-strategy={ buttonCallStrategy }
+        >
+          { text }
+        </Button>
+      </Tooltip>
+    );
+  })();
+
+  return (
+    <Box>
+      <FormProvider { ...formApi }>
+        <chakra.form
+          noValidate
+          onSubmit={ formApi.handleSubmit(onFormSubmit) }
+          onChange={ handleFormChange }
+        >
+          <Flex flexDir="column" rowGap={ 3 } mb={ 6 } _empty={{ display: 'none' }}>
+            { inputs.map((input, index) => {
+              const props = {
+                data: input,
+                basePath: `${ index }`,
+                isDisabled: isLoading,
+                level: 0,
+              };
+
+              if ('components' in input && input.components && input.type === 'tuple') {
+                return <ContractMethodFieldInputTuple key={ index } { ...props }/>;
+              }
+
+              const arrayMatch = matchArray(input.type);
+              if (arrayMatch) {
+                if (arrayMatch.isNested) {
+                  const fieldsWithErrors = Object.keys(formApi.formState.errors);
+                  const isInvalid = fieldsWithErrors.some((field) => field.startsWith(index + ':'));
+
+                  return (
+                    <ContractMethodFieldAccordion
+                      key={ index }
+                      level={ 0 }
+                      label={ getFieldLabel(input) }
+                      isInvalid={ isInvalid }
+                    >
+                      <ContractMethodFieldInputArray { ...props }/>
+                    </ContractMethodFieldAccordion>
+                  );
+
+                }
+
+                return <ContractMethodFieldInputArray key={ index } { ...props }/>;
+              }
+
+              return <ContractMethodFieldInput key={ index } { ...props } path={ `${ index }` }/>;
+            }) }
+          </Flex>
+          { secondaryButton }
+          { primaryButton }
+          { copyCallDataButton }
+          { result && !isLoading && (
+            <Button
+              variant="simple"
+              colorScheme="blue"
+              size="sm"
+              onClick={ onReset }
+              ml={ 1 }
+            >
+              <IconSvg name="repeat" boxSize={ 5 } mr={ 1 }/>
+              Reset
+            </Button>
+          ) }
+        </chakra.form>
+      </FormProvider>
+      { result && result.source === 'wallet_client' && (
+        <ContractMethodResultWalletClient
+          data={ result.data }
+          onSettle={ handleResultSettle }
+        />
+      ) }
+      { 'outputs' in data && data.outputs.length > 0 && (
+        <ContractMethodResultPublicClient
+          data={ result && result.source === 'public_client' ? result.data : undefined }
+          onSettle={ handleResultSettle }
+          abiItem={ data }
+          mode={ result && result.source === 'public_client' ? 'result' : 'preview' }
+        />
+      ) }
+    </Box>
+  );
+};
+
+export default React.memo(ContractMethodForm) as typeof ContractMethodForm;
diff --git a/ui/address/contract/methods/form/ContractMethodMultiplyButton.tsx b/ui/address/contract/methods/form/ContractMethodMultiplyButton.tsx
new file mode 100644
index 0000000000..4bd208d43d
--- /dev/null
+++ b/ui/address/contract/methods/form/ContractMethodMultiplyButton.tsx
@@ -0,0 +1,145 @@
+import {
+  chakra,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Portal,
+  Button,
+  List,
+  ListItem,
+  useDisclosure,
+  Input,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import { times } from 'lib/html-entities';
+import Popover from 'ui/shared/chakra/Popover';
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props {
+  onClick: (power: number) => void;
+  isDisabled?: boolean;
+}
+
+const ContractMethodMultiplyButton = ({ onClick, isDisabled }: Props) => {
+  const [ selectedOption, setSelectedOption ] = React.useState<number | undefined>(18);
+  const [ customValue, setCustomValue ] = React.useState<number>();
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  const dividerColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+
+  const handleOptionClick = React.useCallback((event: React.MouseEvent) => {
+    const id = Number((event.currentTarget as HTMLDivElement).getAttribute('data-id'));
+    if (!Object.is(id, NaN)) {
+      setSelectedOption((prev) => prev === id ? undefined : id);
+      setCustomValue(undefined);
+      onClose();
+    }
+  }, [ onClose ]);
+
+  const handleInputChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setCustomValue(Number(event.target.value));
+    setSelectedOption(undefined);
+  }, []);
+
+  const value = selectedOption || customValue;
+
+  const handleButtonClick = React.useCallback(() => {
+    value && onClick(value);
+  }, [ onClick, value ]);
+
+  return (
+    <>
+      { Boolean(value) && (
+        <Button
+          px={ 1 }
+          lineHeight={ 6 }
+          h={ 6 }
+          fontWeight={ 500 }
+          ml={ 1 }
+          variant="subtle"
+          colorScheme="gray"
+          display="inline"
+          onClick={ handleButtonClick }
+          isDisabled={ isDisabled }
+          borderBottomRightRadius={ 0 }
+          borderTopRightRadius={ 0 }
+        >
+          { times }
+          <chakra.span>10</chakra.span>
+          <chakra.span fontSize="xs" lineHeight={ 4 } verticalAlign="super">{ value }</chakra.span>
+        </Button>
+      ) }
+      <Popover placement="bottom-end" isLazy isOpen={ isOpen } onClose={ onClose }>
+        <PopoverTrigger>
+          <Button
+            variant="subtle"
+            colorScheme="gray"
+            size="xs"
+            cursor="pointer"
+            p={ 0 }
+            onClick={ onToggle }
+            isActive={ isOpen }
+            isDisabled={ isDisabled }
+            borderBottomLeftRadius={ 0 }
+            borderTopLeftRadius={ 0 }
+            borderLeftWidth="1px"
+            borderLeftColor={ dividerColor }
+          >
+            <IconSvg
+              name="arrows/east-mini"
+              transitionDuration="fast"
+              transitionProperty="transform"
+              transitionTimingFunction="ease-in-out"
+              transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' }
+              boxSize={ 6 }
+            />
+          </Button>
+        </PopoverTrigger>
+        <Portal>
+          <PopoverContent w="110px">
+            <PopoverBody py={ 2 }>
+              <List>
+                { [ 8, 12, 16, 18, 20 ].map((id) => (
+                  <ListItem
+                    key={ id }
+                    py={ 2 }
+                    data-id={ id }
+                    onClick={ handleOptionClick }
+                    display="flex"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    cursor="pointer"
+                  >
+                    <span>10*{ id }</span>
+                    { selectedOption === id && <IconSvg name="check" boxSize={ 6 } color="blue.600"/> }
+                  </ListItem>
+                )) }
+                <ListItem
+                  py={ 2 }
+                  display="flex"
+                  justifyContent="space-between"
+                  alignItems="center"
+                >
+                  <span>10*</span>
+                  <Input
+                    type="number"
+                    min={ 0 }
+                    max={ 100 }
+                    ml={ 3 }
+                    size="xs"
+                    onChange={ handleInputChange }
+                    value={ customValue || '' }
+                  />
+                </ListItem>
+              </List>
+            </PopoverBody>
+          </PopoverContent>
+        </Portal>
+      </Popover>
+    </>
+  );
+};
+
+export default React.memo(ContractMethodMultiplyButton);
diff --git a/ui/address/contract/methods/form/ContractMethodResultPublicClient.pw.tsx b/ui/address/contract/methods/form/ContractMethodResultPublicClient.pw.tsx
new file mode 100644
index 0000000000..677057b285
--- /dev/null
+++ b/ui/address/contract/methods/form/ContractMethodResultPublicClient.pw.tsx
@@ -0,0 +1,182 @@
+import React from 'react';
+import type { AbiFunction } from 'viem';
+
+import { test, expect } from 'playwright/lib';
+
+import ContractMethodResultPublicClient from './ContractMethodResultPublicClient';
+import { ErrorStory } from './ContractMethodResultPublicClient.pwstory';
+
+const abiItem: AbiFunction = {
+  inputs: [],
+  name: 'testAbiMethod',
+  stateMutability: 'view',
+  type: 'function',
+  outputs: [
+    // PRIMITIVES
+    { internalType: 'address', name: 'owner', type: 'address' },
+    { internalType: 'uint256', name: 'validatorsCount', type: 'uint256' },
+    { internalType: 'bool', name: '', type: 'bool' },
+
+    // ARRAY OF PRIMITIVES
+    { internalType: 'address[]', name: 'interChainClients', type: 'address[]' },
+
+    // NESTED ARRAY
+    { internalType: 'uint256[2][]', name: 'chainIds', type: 'uint256[2][]' },
+
+    // TUPLE
+    {
+      components: [
+        {
+          components: [
+            { internalType: 'bool', name: 'executed', type: 'bool' },
+            { internalType: 'uint56', name: 'snapshotId', type: 'uint56' },
+            { internalType: 'string', name: 'descriptionURL', type: 'string' },
+          ],
+          internalType: 'struct IGovValidators.ProposalCore',
+          name: 'core',
+          type: 'tuple',
+        },
+      ],
+      internalType: 'struct IGovValidators.ExternalProposal',
+      name: '',
+      type: 'tuple',
+    },
+
+    // ARRAY OF TUPLE
+    {
+      components: [
+        {
+          components: [
+            { internalType: 'enum IGovValidators.ProposalType', name: 'proposalType', type: 'uint8' },
+            { internalType: 'bytes', name: 'data', type: 'bytes' },
+            {
+              components: [
+                { internalType: 'bool', name: 'executed', type: 'bool' },
+                { internalType: 'uint56', name: 'snapshotId', type: 'uint56' },
+              ],
+              internalType: 'struct IGovValidators.ProposalCore',
+              name: 'core',
+              type: 'tuple',
+            },
+          ],
+          internalType: 'struct IGovValidators.InternalProposal',
+          name: 'proposal',
+          type: 'tuple',
+        },
+        { internalType: 'enum IGovValidators.ProposalState', name: 'proposalState', type: 'uint8' },
+      ],
+      internalType: 'struct IGovValidators.InternalProposalView[]',
+      name: 'internalProposals',
+      type: 'tuple[]',
+    },
+
+    // ARRAY OF TUPLES WITHOUT NAMES
+    {
+      components: [
+        { type: 'address' },
+        { type: 'uint256' },
+      ],
+      internalType: 'struct SharingPercentage[]',
+      name: '_sharingPercentages',
+      type: 'tuple[]',
+    },
+  ],
+};
+
+const result = [
+  '0x0000000000000000000000000000000000000000',
+  BigInt(42),
+  false,
+  [
+    '0x92a309C640c3f6AF4F84FE40120fD02b58E3Aa96',
+    '0x588c7Bda9366EEf83EdF67049a1C45f737aFFe0F',
+  ],
+  [
+    [ BigInt(11_000), BigInt(12_000), BigInt(13_000) ],
+    [ BigInt(21_000), BigInt(22_000) ],
+  ],
+  {
+    core: {
+      executed: true,
+      snapshotId: BigInt(77),
+      descriptionURL: '',
+    },
+  },
+  [
+    {
+      proposalState: 1,
+      proposal: {
+        proposalType: 100,
+        data: '0x000100',
+        core: {
+          executed: true,
+          snapshotId: 111,
+        },
+      },
+    },
+    {
+      proposalState: 3,
+      proposal: {
+        proposalType: 300,
+        data: '0x000300',
+        core: {
+          executed: true,
+          snapshotId: 333,
+        },
+      },
+    },
+  ],
+  [
+    [ '0xfD36176C63dA52E783a347DE3544B0b44C7054a6', 0 ],
+    [ '0xC9534cB913150aD3e98D792857689B55e2404212', 3500 ],
+  ],
+];
+
+const onSettle = () => {};
+
+test('preview mode', async({ render }) => {
+  const component = await render(
+    <ContractMethodResultPublicClient
+      abiItem={ abiItem }
+      data={ undefined }
+      mode="preview"
+      onSettle={ onSettle }
+    />,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('result mode', async({ render }) => {
+  const component = await render(
+    <ContractMethodResultPublicClient
+      abiItem={ abiItem }
+      data={ result }
+      mode="result"
+      onSettle={ onSettle }
+    />,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('error', async({ render }) => {
+  const component = await render(
+    <ErrorStory
+      abiItem={ abiItem }
+      mode="result"
+      onSettle={ onSettle }
+    />,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('single output', async({ render }) => {
+  const component = await render(
+    <ContractMethodResultPublicClient
+      abiItem={{ ...abiItem, outputs: abiItem.outputs.slice(3, 4) }}
+      data={ result[3] }
+      mode="result"
+      onSettle={ onSettle }
+    />,
+  );
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/contract/methods/form/ContractMethodResultPublicClient.pwstory.tsx b/ui/address/contract/methods/form/ContractMethodResultPublicClient.pwstory.tsx
new file mode 100644
index 0000000000..22621a3f94
--- /dev/null
+++ b/ui/address/contract/methods/form/ContractMethodResultPublicClient.pwstory.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+import type { Props } from './ContractMethodResultPublicClient';
+import ContractMethodResultPublicClient from './ContractMethodResultPublicClient';
+
+export const ErrorStory = (props: Omit<Props, 'data'>) => {
+  const result = new Error('Something went wrong');
+
+  return <ContractMethodResultPublicClient { ...props } data={ result }/>;
+};
diff --git a/ui/address/contract/methods/form/ContractMethodResultPublicClient.tsx b/ui/address/contract/methods/form/ContractMethodResultPublicClient.tsx
new file mode 100644
index 0000000000..d63d452805
--- /dev/null
+++ b/ui/address/contract/methods/form/ContractMethodResultPublicClient.tsx
@@ -0,0 +1,65 @@
+import { Alert, Flex, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+import type { AbiFunction } from 'viem';
+
+import type { FormSubmitResultPublicClient, ResultViewMode } from '../types';
+
+import ResultItem from './resultPublicClient/Item';
+
+export interface Props {
+  data: FormSubmitResultPublicClient['data'];
+  abiItem: AbiFunction;
+  onSettle: () => void;
+  mode: ResultViewMode;
+}
+
+const ContractMethodResultPublicClient = ({ data, abiItem, onSettle, mode: modeProps }: Props) => {
+  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  React.useEffect(() => {
+    if (modeProps === 'result') {
+      onSettle();
+    }
+  }, [ onSettle, modeProps ]);
+
+  const formattedData = (() => {
+    return abiItem.outputs.length > 1 && Array.isArray(data) ? data : [ data ];
+  })();
+
+  const isError = data instanceof Error;
+  const mode = isError ? 'preview' : modeProps;
+
+  return (
+    <>
+      { isError && (
+        <Alert status="error" mt={ 3 } p={ 4 } borderRadius="md" fontSize="sm" wordBreak="break-word" whiteSpace="pre-wrap">
+          { 'shortMessage' in data && typeof data.shortMessage === 'string' ? data.shortMessage : data.message }
+        </Alert>
+      ) }
+      <Flex
+        flexDir="column"
+        rowGap={ 2 }
+        mt={ 3 }
+        p={ 4 }
+        borderRadius="md"
+        bgColor={ bgColor }
+        color={ mode === 'preview' ? 'gray.500' : undefined }
+        fontSize="sm"
+        lineHeight="20px"
+        whiteSpace="break-spaces"
+        wordBreak="break-all"
+      >
+        { abiItem.outputs.map((output, index) => (
+          <ResultItem
+            key={ index }
+            abiParameter={ output }
+            data={ isError ? undefined : formattedData[index] }
+            mode={ mode }
+          />
+        )) }
+      </Flex>
+    </>
+  );
+};
+
+export default React.memo(ContractMethodResultPublicClient);
diff --git a/ui/address/contract/methods/form/ContractMethodResultWalletClient.pw.tsx b/ui/address/contract/methods/form/ContractMethodResultWalletClient.pw.tsx
new file mode 100644
index 0000000000..f7d54b925f
--- /dev/null
+++ b/ui/address/contract/methods/form/ContractMethodResultWalletClient.pw.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+
+import { test, expect } from 'playwright/lib';
+
+import type { PropsDumb } from './ContractMethodResultWalletClient';
+import { ContractMethodResultWalletClientDumb } from './ContractMethodResultWalletClient';
+
+test('loading', async({ render }) => {
+  const props = {
+    txInfo: {
+      status: 'pending' as const,
+      error: null,
+    } as PropsDumb['txInfo'],
+    data: {
+      hash: '0x363574E6C5C71c343d7348093D84320c76d5Dd29' as `0x${ string }`,
+    },
+    onSettle: () => {},
+  };
+
+  const component = await render(<ContractMethodResultWalletClientDumb { ...props }/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('success', async({ render }) => {
+  const props = {
+    txInfo: {
+      status: 'success' as const,
+      error: null,
+    } as PropsDumb['txInfo'],
+    data: {
+      hash: '0x363574E6C5C71c343d7348093D84320c76d5Dd29' as `0x${ string }`,
+    },
+    onSettle: () => {},
+  };
+
+  const component = await render(<ContractMethodResultWalletClientDumb { ...props }/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('error +@mobile', async({ render }) => {
+  const props = {
+    txInfo: {
+      status: 'error' as const,
+      error: {
+        // eslint-disable-next-line max-len
+        message: 'missing revert data in call exception; Transaction reverted without a reason string [ See: https://links.ethers.org/v5-errors-CALL_EXCEPTION ]',
+      } as Error,
+    } as PropsDumb['txInfo'],
+    data: {
+      hash: '0x363574E6C5C71c343d7348093D84320c76d5Dd29' as `0x${ string }`,
+    },
+    onSettle: () => {},
+  };
+
+  const component = await render(<ContractMethodResultWalletClientDumb { ...props }/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('error in result', async({ render }) => {
+  const props = {
+    txInfo: {
+      status: 'idle' as const,
+      error: null,
+    } as unknown as PropsDumb['txInfo'],
+    data: {
+      message: 'wallet is not connected',
+    } as Error,
+    onSettle: () => {},
+  };
+
+  const component = await render(<ContractMethodResultWalletClientDumb { ...props }/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/contract/methods/form/ContractMethodResultWalletClient.tsx b/ui/address/contract/methods/form/ContractMethodResultWalletClient.tsx
new file mode 100644
index 0000000000..eb4009c77b
--- /dev/null
+++ b/ui/address/contract/methods/form/ContractMethodResultWalletClient.tsx
@@ -0,0 +1,106 @@
+import { chakra, Spinner, Box, Alert } from '@chakra-ui/react';
+import React from 'react';
+import type { UseWaitForTransactionReceiptReturnType } from 'wagmi';
+import { useWaitForTransactionReceipt } from 'wagmi';
+
+import type { FormSubmitResultWalletClient } from '../types';
+
+import { route } from 'nextjs-routes';
+
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+interface Props {
+  data: FormSubmitResultWalletClient['data'];
+  onSettle: () => void;
+}
+
+const ContractMethodResultWalletClient = ({ data, onSettle }: Props) => {
+  const txHash = data && 'hash' in data ? data.hash as `0x${ string }` : undefined;
+  const txInfo = useWaitForTransactionReceipt({
+    hash: txHash,
+  });
+
+  return <ContractMethodResultWalletClientDumb data={ data } onSettle={ onSettle } txInfo={ txInfo }/>;
+};
+
+export interface PropsDumb {
+  data: FormSubmitResultWalletClient['data'];
+  onSettle: () => void;
+  txInfo: UseWaitForTransactionReceiptReturnType;
+}
+
+export const ContractMethodResultWalletClientDumb = ({ data, onSettle, txInfo }: PropsDumb) => {
+  const txHash = data && 'hash' in data ? data.hash : undefined;
+
+  React.useEffect(() => {
+    if (txInfo.status !== 'pending') {
+      onSettle();
+    }
+  }, [ onSettle, txInfo.status ]);
+
+  if (!data) {
+    return null;
+  }
+
+  const isErrorResult = 'message' in data;
+
+  const txLink = txHash ? (
+    <LinkInternal href={ route({ pathname: '/tx/[hash]', query: { hash: txHash } }) }>View transaction details</LinkInternal>
+  ) : null;
+
+  const content = (() => {
+    if (isErrorResult) {
+      return (
+        <Alert status="error">
+          { data.message }
+        </Alert>
+      );
+    }
+
+    switch (txInfo.status) {
+      case 'success': {
+        return (
+          <>
+            <span>Transaction has been confirmed. </span>
+            { txLink }
+          </>
+        );
+      }
+
+      case 'pending': {
+        return (
+          <>
+            <Spinner size="sm" mr={ 3 }/>
+            <chakra.span verticalAlign="text-bottom">
+              { 'Waiting for transaction\'s confirmation. ' }
+              { txLink }
+            </chakra.span>
+          </>
+        );
+      }
+
+      case 'error': {
+        return (
+          <Alert status="error" flexDir="column" alignItems="flex-start" rowGap={ 1 }>
+            Error: { txInfo.error ? txInfo.error.message : 'Something went wrong' } { txLink }
+          </Alert>
+        );
+      }
+    }
+  })();
+
+  return (
+    <Box
+      fontSize="sm"
+      mt={ 3 }
+      alignItems="center"
+      whiteSpace="pre-wrap"
+      wordBreak="break-all"
+      color={ txInfo.status === 'error' || isErrorResult ? 'error' : undefined }
+    >
+      { content }
+    </Box>
+  );
+};
+
+export default React.memo(ContractMethodResultWalletClient);
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..88737d03d9
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodForm.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodForm.pw.tsx_default_base-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..eac80f82af
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodForm.pw.tsx_default_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..30db58a461
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_error-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_error-1.png
new file mode 100644
index 0000000000..8c9f4eb6e4
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_error-1.png differ
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_preview-mode-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_preview-mode-1.png
new file mode 100644
index 0000000000..eced58c912
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_preview-mode-1.png differ
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_result-mode-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_result-mode-1.png
new file mode 100644
index 0000000000..341238a137
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_result-mode-1.png differ
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_single-output-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_single-output-1.png
new file mode 100644
index 0000000000..25b5fd2e17
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_single-output-1.png differ
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_error-in-result-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_error-in-result-1.png
new file mode 100644
index 0000000000..4d54974d92
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_error-in-result-1.png differ
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_error-mobile-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_error-mobile-1.png
new file mode 100644
index 0000000000..406675a0cc
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_error-mobile-1.png differ
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_loading-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_loading-1.png
new file mode 100644
index 0000000000..0895e8ebf5
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_loading-1.png differ
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_success-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_success-1.png
new file mode 100644
index 0000000000..e5f4926132
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_success-1.png differ
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_mobile_error-mobile-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_mobile_error-mobile-1.png
new file mode 100644
index 0000000000..a5adc182cc
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_mobile_error-mobile-1.png differ
diff --git a/ui/address/contract/methods/form/resultPublicClient/Item.tsx b/ui/address/contract/methods/form/resultPublicClient/Item.tsx
new file mode 100644
index 0000000000..09f095ed0d
--- /dev/null
+++ b/ui/address/contract/methods/form/resultPublicClient/Item.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import type { AbiParameter } from 'viem';
+
+import type { ResultViewMode } from '../../types';
+
+import { matchArray } from '../utils';
+import ItemArray from './ItemArray';
+import ItemPrimitive from './ItemPrimitive';
+import ItemTuple from './ItemTuple';
+
+interface Props {
+  abiParameter: AbiParameter;
+  data: unknown;
+  mode: ResultViewMode;
+  level?: number;
+}
+
+const Item = ({ abiParameter, data, mode, level = 0 }: Props) => {
+
+  const arrayMatch = React.useMemo(() => matchArray(abiParameter.type), [ abiParameter.type ]);
+  if (arrayMatch) {
+    if (!Array.isArray(data)) {
+      if (arrayMatch.itemType === 'tuple' && mode === 'preview' && 'components' in abiParameter) {
+        const previewData = Object.fromEntries(abiParameter.components.map(({ name }) => ([ name ?? '', undefined ])));
+        return <ItemArray abiParameter={ abiParameter } data={ [ previewData ] } mode={ mode } level={ level } arrayMatch={ arrayMatch }/>;
+      }
+      return <ItemPrimitive abiParameter={ abiParameter } data={ data || (mode === 'preview' ? undefined : '[ ]') } level={ level }/>;
+    }
+    return <ItemArray abiParameter={ abiParameter } data={ data } level={ level } mode={ mode } arrayMatch={ arrayMatch }/>;
+  }
+
+  const tupleMatch = abiParameter.type.includes('tuple');
+  if (tupleMatch) {
+    return <ItemTuple abiParameter={ abiParameter } data={ data } mode={ mode } level={ level }/>;
+  }
+
+  return <ItemPrimitive abiParameter={ abiParameter } data={ data } level={ level }/>;
+};
+
+export default React.memo(Item);
diff --git a/ui/address/contract/methods/form/resultPublicClient/ItemArray.tsx b/ui/address/contract/methods/form/resultPublicClient/ItemArray.tsx
new file mode 100644
index 0000000000..73bfce24fd
--- /dev/null
+++ b/ui/address/contract/methods/form/resultPublicClient/ItemArray.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import type { AbiParameter } from 'viem';
+
+import type { ResultViewMode } from '../../types';
+
+import { matchArray, type MatchArray } from '../utils';
+import ItemLabel from './ItemLabel';
+import ItemPrimitive from './ItemPrimitive';
+import ItemTuple from './ItemTuple';
+import { printRowOffset } from './utils';
+
+interface Props {
+  abiParameter: AbiParameter;
+  data: Array<unknown>;
+  mode: ResultViewMode;
+  level: number;
+  arrayMatch: MatchArray;
+}
+
+const ItemArray = ({ abiParameter, data, level, arrayMatch, mode }: Props) => {
+
+  const itemAbiParameter = React.useMemo(() => {
+    const type = arrayMatch.itemType;
+    const internalType = matchArray(abiParameter.internalType || '')?.itemType;
+    return { ...abiParameter, type, internalType };
+  }, [ abiParameter, arrayMatch.itemType ]);
+
+  const content = (() => {
+    if (arrayMatch.isNested && data.every(Array.isArray)) {
+      const itemArrayMatch = matchArray(arrayMatch.itemType);
+
+      if (itemArrayMatch) {
+        return data.map((item, index) => (
+          <ItemArray
+            key={ index }
+            abiParameter={ itemAbiParameter }
+            data={ item }
+            mode={ mode }
+            arrayMatch={ itemArrayMatch }
+            level={ level + 1 }
+          />
+        ));
+      }
+    }
+
+    if (arrayMatch.itemType === 'tuple') {
+      return data.map((item, index) => (
+        <ItemTuple
+          key={ index }
+          abiParameter={ itemAbiParameter }
+          data={ item }
+          mode={ mode }
+          level={ level + 1 }
+        />
+      ));
+    }
+
+    return data.map((item, index) => (
+      <ItemPrimitive
+        key={ index }
+        abiParameter={ itemAbiParameter }
+        data={ item }
+        level={ level + 1 }
+        hideLabel
+      />
+    ));
+  })();
+
+  return (
+    <p>
+      <p>
+        <span>{ printRowOffset(level) }</span>
+        <ItemLabel abiParameter={ abiParameter }/>
+        <span>[{ data.length === 0 ? ' ]' : '' }</span>
+      </p>
+      { content }
+      { data.length > 0 && <p>{ printRowOffset(level) }]</p> }
+    </p>
+  );
+};
+
+export default React.memo(ItemArray);
diff --git a/ui/address/contract/methods/form/resultPublicClient/ItemLabel.tsx b/ui/address/contract/methods/form/resultPublicClient/ItemLabel.tsx
new file mode 100644
index 0000000000..1b0d3f9a8d
--- /dev/null
+++ b/ui/address/contract/methods/form/resultPublicClient/ItemLabel.tsx
@@ -0,0 +1,18 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+import type { AbiParameter } from 'viem';
+
+interface Props {
+  abiParameter: AbiParameter;
+}
+
+const ItemLabel = ({ abiParameter }: Props) => {
+  return (
+    <>
+      { abiParameter.name && <chakra.span fontWeight={ 500 }>{ abiParameter.name } </chakra.span> }
+      <span>({ abiParameter.type }) : </span>
+    </>
+  );
+};
+
+export default React.memo(ItemLabel);
diff --git a/ui/address/contract/methods/form/resultPublicClient/ItemPrimitive.tsx b/ui/address/contract/methods/form/resultPublicClient/ItemPrimitive.tsx
new file mode 100644
index 0000000000..377c78eb7f
--- /dev/null
+++ b/ui/address/contract/methods/form/resultPublicClient/ItemPrimitive.tsx
@@ -0,0 +1,75 @@
+import { Tooltip } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+import type { AbiParameter } from 'viem';
+
+import { route } from 'nextjs-routes';
+
+import { WEI } from 'lib/consts';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+import { matchInt } from '../utils';
+import ItemLabel from './ItemLabel';
+import { printRowOffset } from './utils';
+
+function castValueToString(value: unknown): string {
+  switch (typeof value) {
+    case 'string':
+      return value === '' ? `""` : value;
+    case 'undefined':
+      return '';
+    case 'number':
+      return value.toLocaleString(undefined, { useGrouping: false });
+    case 'bigint':
+      return value.toString();
+    case 'boolean':
+    default:
+      return String(value);
+  }
+}
+
+const INT_TOOLTIP_THRESHOLD = 10 ** 9;
+
+interface Props {
+  abiParameter: AbiParameter;
+  data: unknown;
+  level: number;
+  hideLabel?: boolean;
+}
+
+const ItemPrimitive = ({ abiParameter, data, level, hideLabel }: Props) => {
+
+  const value = (() => {
+    if (abiParameter.type === 'address' && typeof data === 'string') {
+      return (
+        <>
+          <LinkInternal href={ route({ pathname: '/address/[hash]', query: { hash: data } }) }>{ data }</LinkInternal>
+          <CopyToClipboard text={ data } size={ 4 } verticalAlign="sub"/>
+        </>
+      );
+    }
+
+    const intMatch = matchInt(abiParameter.type);
+    if (intMatch && typeof data === 'bigint' && intMatch.max > INT_TOOLTIP_THRESHOLD && data > INT_TOOLTIP_THRESHOLD) {
+      const dividedValue = BigNumber(data.toString()).div(WEI);
+      return (
+        <Tooltip label={ dividedValue.toLocaleString() + ' ETH' }>
+          <span>{ castValueToString(data) }</span>
+        </Tooltip>
+      );
+    }
+
+    return <span>{ castValueToString(data) }</span>;
+  })();
+
+  return (
+    <p>
+      <span>{ printRowOffset(level) }</span>
+      { !hideLabel && <ItemLabel abiParameter={ abiParameter }/> }
+      { value }
+    </p>
+  );
+};
+
+export default React.memo(ItemPrimitive);
diff --git a/ui/address/contract/methods/form/resultPublicClient/ItemTuple.tsx b/ui/address/contract/methods/form/resultPublicClient/ItemTuple.tsx
new file mode 100644
index 0000000000..ff9f4fde64
--- /dev/null
+++ b/ui/address/contract/methods/form/resultPublicClient/ItemTuple.tsx
@@ -0,0 +1,55 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+import type { AbiParameter } from 'viem';
+
+import type { ResultViewMode } from '../../types';
+
+import Item from './Item';
+import { printRowOffset } from './utils';
+
+interface Props {
+  abiParameter: AbiParameter;
+  data: unknown;
+  level: number;
+  mode: ResultViewMode;
+}
+
+const ItemTuple = ({ abiParameter, data, mode, level }: Props) => {
+  return (
+    <div>
+      <p>
+        <span>{ printRowOffset(level) }</span>
+        <chakra.span fontWeight={ 500 }>{ abiParameter.name || abiParameter.internalType }</chakra.span>
+        <span> { '{' }</span>
+      </p>
+      { 'components' in abiParameter && abiParameter.components.map((component, index) => {
+        const itemData = (() => {
+          if (typeof data !== 'object' || data === null) {
+            return;
+          }
+
+          if (Array.isArray(data)) {
+            return data[index];
+          }
+
+          if (component.name && component.name in data) {
+            return data[component.name as keyof typeof data];
+          }
+        })();
+
+        return (
+          <Item
+            key={ index }
+            abiParameter={ component }
+            data={ itemData }
+            mode={ mode }
+            level={ level + 1 }
+          />
+        );
+      }) }
+      <p>{ printRowOffset(level) }{ '}' }</p>
+    </div>
+  );
+};
+
+export default React.memo(ItemTuple);
diff --git a/ui/address/contract/methods/form/resultPublicClient/utils.ts b/ui/address/contract/methods/form/resultPublicClient/utils.ts
new file mode 100644
index 0000000000..f05415e63c
--- /dev/null
+++ b/ui/address/contract/methods/form/resultPublicClient/utils.ts
@@ -0,0 +1,2 @@
+const TAB_SIZE = 2;
+export const printRowOffset = (level: number) => ' '.repeat(level * TAB_SIZE);
diff --git a/ui/address/contract/methods/form/useFormatFieldValue.tsx b/ui/address/contract/methods/form/useFormatFieldValue.tsx
new file mode 100644
index 0000000000..70bd8270fe
--- /dev/null
+++ b/ui/address/contract/methods/form/useFormatFieldValue.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+
+import type { MatchInt } from './utils';
+
+interface Params {
+  argType: string;
+  argTypeMatchInt: MatchInt | null;
+}
+
+export default function useFormatFieldValue({ argType, argTypeMatchInt }: Params) {
+
+  return React.useCallback((value: string | undefined) => {
+    if (!value) {
+      return;
+    }
+
+    if (argTypeMatchInt) {
+      // we have to store all numbers as strings to avoid precision loss
+      // and we cannot store them as BigInt because the NumberFormat component will not work properly
+      // so we just remove all white spaces here otherwise the `viem` library will throw an error on attempt to write value to a contract
+      const formattedString = value.replace(/\s/g, '');
+      return formattedString;
+    }
+
+    if (argType === 'bool') {
+      const formattedValue = value.toLowerCase();
+
+      switch (formattedValue) {
+        case 'true': {
+          return true;
+        }
+
+        case 'false':{
+          return false;
+        }
+
+        default:
+          return value;
+      }
+    }
+
+    return value;
+  }, [ argType, argTypeMatchInt ]);
+}
diff --git a/ui/address/contract/methods/form/useValidateField.tsx b/ui/address/contract/methods/form/useValidateField.tsx
new file mode 100644
index 0000000000..de9d506f31
--- /dev/null
+++ b/ui/address/contract/methods/form/useValidateField.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { getAddress, isAddress, isHex } from 'viem';
+
+import type { MatchInt } from './utils';
+import { BYTES_REGEXP } from './utils';
+
+interface Params {
+  argType: string;
+  argTypeMatchInt: MatchInt | null;
+  isOptional: boolean;
+}
+
+export default function useValidateField({ isOptional, argType, argTypeMatchInt }: Params) {
+
+  const bytesMatch = React.useMemo(() => {
+    return argType.match(BYTES_REGEXP);
+  }, [ argType ]);
+
+  // some values are formatted before they are sent to the validator
+  // see ./useFormatFieldValue.tsx hook
+  return React.useCallback((value: string | boolean | undefined) => {
+    if (value === undefined || value === '') {
+      return isOptional ? true : 'Field is required';
+    }
+
+    if (argType === 'address') {
+      if (typeof value !== 'string' || !isAddress(value)) {
+        return 'Invalid address format';
+      }
+
+      // all lowercase addresses are valid
+      const isInLowerCase = value === value.toLowerCase();
+      if (isInLowerCase) {
+        return true;
+      }
+
+      // check if address checksum is valid
+      return getAddress(value) === value ? true : 'Invalid address checksum';
+    }
+
+    if (argTypeMatchInt) {
+      const valueBi = (() => {
+        try {
+          return BigInt(value);
+        } catch (error) {
+          return null;
+        }
+      })();
+
+      if (typeof value !== 'string' || valueBi === null) {
+        return 'Invalid integer format';
+      }
+
+      if (valueBi > argTypeMatchInt.max || valueBi < argTypeMatchInt.min) {
+        const lowerBoundary = argTypeMatchInt.isUnsigned ? '0' : `-1 * 2 ^ ${ Number(argTypeMatchInt.power) - 1 }`;
+        const upperBoundary = argTypeMatchInt.isUnsigned ? `2 ^ ${ argTypeMatchInt.power } - 1` : `2 ^ ${ Number(argTypeMatchInt.power) - 1 } - 1`;
+        return `Value should be in range from "${ lowerBoundary }" to "${ upperBoundary }" inclusively`;
+      }
+
+      return true;
+    }
+
+    if (argType === 'bool') {
+      if (typeof value !== 'boolean') {
+        return 'Invalid boolean format. Allowed values: true, false';
+      }
+    }
+
+    if (bytesMatch) {
+      const [ , length ] = bytesMatch;
+
+      if (!isHex(value)) {
+        return 'Invalid bytes format';
+      }
+
+      if (length) {
+        const valueLengthInBytes = value.replace('0x', '').length / 2;
+        return valueLengthInBytes !== Number(length) ? `Value should be ${ length } bytes in length` : true;
+      }
+
+      return true;
+    }
+
+    return true;
+  }, [ isOptional, argType, argTypeMatchInt, bytesMatch ]);
+}
diff --git a/ui/address/contract/methods/form/utils.test.ts b/ui/address/contract/methods/form/utils.test.ts
new file mode 100644
index 0000000000..48c2f2b4a3
--- /dev/null
+++ b/ui/address/contract/methods/form/utils.test.ts
@@ -0,0 +1,100 @@
+import { transformFormDataToMethodArgs } from './utils';
+
+describe('transformFormDataToMethodArgs', () => {
+  it('should transform form data to method args array', () => {
+    const formData = {
+      '1': '1',
+      '2': '2',
+      '0:1': '0:1',
+      '0:0:0': '0:0:0',
+      '0:0:1:0': '0:0:1:0',
+      '0:0:1:3': '0:0:1:3',
+      '0:0:2:1:0': '0:0:2:1:0',
+      '0:0:2:1:1': '0:0:2:1:1',
+      '0:0:2:2:0': '0:0:2:2:0',
+      '0:0:2:2:2': '0:0:2:2:2',
+      '0:0:2:5:3': '0:0:2:5:3',
+      '0:0:2:5:8': '0:0:2:5:8',
+    };
+    const result = transformFormDataToMethodArgs(formData);
+    expect(result).toEqual([
+      [
+        [
+          '0:0:0',
+          [
+            '0:0:1:0',
+            '0:0:1:3',
+          ],
+          [
+            [
+              '0:0:2:1:0',
+              '0:0:2:1:1',
+            ],
+            [
+              '0:0:2:2:0',
+              '0:0:2:2:2',
+            ],
+            [
+              '0:0:2:5:3',
+              '0:0:2:5:8',
+            ],
+          ],
+        ],
+        '0:1',
+      ],
+      '1',
+      '2',
+    ]);
+  });
+
+  it('should leave the arg if it is an empty array', () => {
+    const formData = {
+      // simple array
+      '0:0': undefined,
+
+      // nested array
+      '1:0:0': undefined,
+      '1:1:0': '1',
+      '1:1:1': '2',
+
+      // array in a tuple
+      '2:0': 'duck',
+      '2:1:0': undefined,
+    };
+    const result = transformFormDataToMethodArgs(formData);
+    expect(result).toEqual([
+      [],
+      [
+        [],
+        [ '1', '2' ],
+      ],
+      [
+        'duck',
+        [],
+      ],
+    ]);
+  });
+
+  it('should transform all nested empty arrays to empty arrays', () => {
+    const formData = {
+      '0': '0x1D415D28380ff51A507F7B176ca5F27833F7FffD',
+      '1': '0x1D415D28380ff51A507F7B176ca5F27833F7FffD',
+      '2': '3160',
+      '3': true,
+      // tuple array without elements
+      '4:0:0:0': undefined,
+      '4:0:1:0': undefined,
+      '4:0:1:1': undefined,
+      '4:0:1:2': undefined,
+      '4:0:1:3': undefined,
+    };
+    const result = transformFormDataToMethodArgs(formData);
+    expect(result).toEqual([
+      '0x1D415D28380ff51A507F7B176ca5F27833F7FffD',
+      '0x1D415D28380ff51A507F7B176ca5F27833F7FffD',
+      '3160',
+      true,
+      [],
+    ]);
+  });
+});
diff --git a/ui/address/contract/methods/form/utils.ts b/ui/address/contract/methods/form/utils.ts
new file mode 100644
index 0000000000..e067f0f74f
--- /dev/null
+++ b/ui/address/contract/methods/form/utils.ts
@@ -0,0 +1,118 @@
+import _set from 'lodash/set';
+
+import type { ContractAbiItemInput } from '../types';
+
+export type ContractMethodFormFields = Record<string, string | boolean | undefined>;
+
+export const INT_REGEXP = /^(u)?int(\d+)?$/i;
+
+export const BYTES_REGEXP = /^bytes(\d+)?$/i;
+
+export const ARRAY_REGEXP = /^(.*)\[(\d*)\]$/;
+
+export interface MatchArray {
+  itemType: string;
+  size: number;
+  isNested: boolean;
+}
+
+export const matchArray = (argType: string): MatchArray | null => {
+  const match = argType.match(ARRAY_REGEXP);
+  if (!match) {
+    return null;
+  }
+
+  const [ , itemType, size ] = match;
+  const isNested = Boolean(matchArray(itemType));
+
+  return {
+    itemType,
+    size: size ? Number(size) : Infinity,
+    isNested,
+  };
+};
+
+export interface MatchInt {
+  isUnsigned: boolean;
+  power: string;
+  min: bigint;
+  max: bigint;
+}
+
+export const matchInt = (argType: string): MatchInt | null => {
+  const match = argType.match(INT_REGEXP);
+  if (!match) {
+    return null;
+  }
+
+  const [ , isUnsigned, power = '256' ] = match;
+  const [ min, max ] = getIntBoundaries(Number(power), Boolean(isUnsigned));
+
+  return { isUnsigned: Boolean(isUnsigned), power, min, max };
+};
+
+export const transformDataForArrayItem = (data: ContractAbiItemInput, index: number): ContractAbiItemInput => {
+  const arrayMatchType = matchArray(data.type);
+  const arrayMatchInternalType = data.internalType ? matchArray(data.internalType) : null;
+  const childrenInternalType = arrayMatchInternalType?.itemType.replaceAll('struct ', '');
+
+  const postfix = childrenInternalType ? ' ' + childrenInternalType : '';
+
+  return {
+    ...data,
+    type: arrayMatchType?.itemType || data.type,
+    internalType: childrenInternalType,
+    name: `#${ index + 1 }${ postfix }`,
+  };
+};
+
+export const getIntBoundaries = (power: number, isUnsigned: boolean) => {
+  const maxUnsigned = BigInt(2 ** power);
+  const max = isUnsigned ? maxUnsigned - BigInt(1) : maxUnsigned / BigInt(2) - BigInt(1);
+  const min = isUnsigned ? BigInt(0) : -maxUnsigned / BigInt(2);
+  return [ min, max ];
+};
+
+export function transformFormDataToMethodArgs(formData: ContractMethodFormFields) {
+  const result: Array<unknown> = [];
+
+  for (const field in formData) {
+    const value = formData[field];
+    _set(result, field.replaceAll(':', '.'), value);
+  }
+
+  const filteredResult = filterOutEmptyItems(result);
+  const mappedResult = mapEmptyNestedArrays(filteredResult);
+  return mappedResult;
+}
+
+function filterOutEmptyItems(array: Array<unknown>): Array<unknown> {
+  // The undefined value may occur in two cases:
+  //    1. When an optional form field is left blank by the user.
+  //        The only optional field is the native coin value, which is safely handled in the form submit handler.
+  //    2. When the user adds and removes items from a field array.
+  //        In this scenario, empty items need to be filtered out to maintain the correct sequence of arguments.
+  // We don't use isEmptyField() function here because of the second case otherwise it will not keep the correct order of arguments.
+  return array
+    .map((item) => Array.isArray(item) ? filterOutEmptyItems(item) : item)
+    .filter((item) => item !== undefined);
+}
+
+function isEmptyField(field: unknown): boolean {
+  // the empty string is meant that the field was touched but left empty
+  // the undefined is meant that the field was not touched
+  return field === undefined || field === '';
+}
+
+function isEmptyNestedArray(array: Array<unknown>): boolean {
+  return array.flat(Infinity).filter((item) => !isEmptyField(item)).length === 0;
+}
+
+function mapEmptyNestedArrays(array: Array<unknown>): Array<unknown> {
+  return array.map((item) => Array.isArray(item) && isEmptyNestedArray(item) ? [] : item);
+}
+
+export function getFieldLabel(input: ContractAbiItemInput, isRequired?: boolean) {
+  const name = input.name || input.internalType || '<unnamed argument>';
+  return `${ name } (${ input.type })${ isRequired ? '*' : '' }`;
+}
diff --git a/ui/address/contract/methods/types.ts b/ui/address/contract/methods/types.ts
new file mode 100644
index 0000000000..c3b924de2f
--- /dev/null
+++ b/ui/address/contract/methods/types.ts
@@ -0,0 +1,24 @@
+import type { AbiFunction, AbiFallback, AbiReceive } from 'abitype';
+
+export type ContractAbiItemInput = AbiFunction['inputs'][number] & { fieldType?: 'native_coin' };
+
+export type MethodType = 'read' | 'write' | 'all';
+export type MethodCallStrategy = 'read' | 'write' | 'simulate' | 'copy_calldata';
+export type ResultViewMode = 'preview' | 'result';
+
+export type SmartContractMethodCustomFields = { method_id: string } | { is_invalid: boolean };
+export type SmartContractMethodRead = AbiFunction & SmartContractMethodCustomFields;
+export type SmartContractMethodWrite = AbiFunction & SmartContractMethodCustomFields | AbiFallback | AbiReceive;
+export type SmartContractMethod = SmartContractMethodRead | SmartContractMethodWrite;
+
+export interface FormSubmitResultPublicClient {
+  source: 'public_client';
+  data: unknown | Error;
+}
+export interface FormSubmitResultWalletClient {
+  source: 'wallet_client';
+  data: { hash: `0x${ string }` } | Error;
+}
+export type FormSubmitResult = FormSubmitResultPublicClient | FormSubmitResultWalletClient;
+
+export type FormSubmitHandler = (item: SmartContractMethod, args: Array<unknown>, submitType: MethodCallStrategy | undefined) => Promise<FormSubmitResult>;
diff --git a/ui/address/contract/methods/useCallMethodPublicClient.ts b/ui/address/contract/methods/useCallMethodPublicClient.ts
new file mode 100644
index 0000000000..7d68766aa4
--- /dev/null
+++ b/ui/address/contract/methods/useCallMethodPublicClient.ts
@@ -0,0 +1,54 @@
+import React from 'react';
+import { getAddress } from 'viem';
+import { usePublicClient } from 'wagmi';
+
+import type { FormSubmitResult, MethodCallStrategy, SmartContractMethod } from './types';
+
+import config from 'configs/app';
+import useAccount from 'lib/web3/useAccount';
+
+import { getNativeCoinValue } from './utils';
+
+interface Params {
+  item: SmartContractMethod;
+  args: Array<unknown>;
+  addressHash: string;
+  strategy: Exclude<MethodCallStrategy, 'write'>;
+}
+
+export default function useCallMethodPublicClient(): (params: Params) => Promise<FormSubmitResult> {
+  const publicClient = usePublicClient({ chainId: Number(config.chain.id) });
+  const { address: account } = useAccount();
+
+  return React.useCallback(async({ args, item, addressHash, strategy }) => {
+    if (!('name' in item)) {
+      throw new Error('Unknown contract method');
+    }
+
+    if (!publicClient) {
+      throw new Error('Public Client is not defined');
+    }
+
+    const address = getAddress(addressHash);
+    // for write payable methods we add additional input for native coin value
+    // so in simulate mode we need to strip it off
+    const _args = args.slice(0, item.inputs.length);
+    const value = getNativeCoinValue(args[item.inputs.length]);
+
+    const params = {
+      abi: [ item ],
+      functionName: item.name,
+      args: _args,
+      address,
+      account,
+      value,
+    };
+
+    const result = strategy === 'read' ? await publicClient.readContract(params) : await publicClient.simulateContract(params);
+    return {
+      source: 'public_client' as const,
+      data: strategy === 'read' ? result : result.result,
+    };
+
+  }, [ account, publicClient ]);
+}
diff --git a/ui/address/contract/methods/useCallMethodWalletClient.ts b/ui/address/contract/methods/useCallMethodWalletClient.ts
new file mode 100644
index 0000000000..ff04768b4b
--- /dev/null
+++ b/ui/address/contract/methods/useCallMethodWalletClient.ts
@@ -0,0 +1,73 @@
+import React from 'react';
+import { getAddress, type Abi } from 'viem';
+import { useAccount, useWalletClient, useSwitchChain } from 'wagmi';
+
+import type { FormSubmitResult, SmartContractMethod } from './types';
+
+import config from 'configs/app';
+
+import { getNativeCoinValue } from './utils';
+
+interface Params {
+  item: SmartContractMethod;
+  args: Array<unknown>;
+  addressHash: string;
+}
+
+export default function useCallMethodWalletClient(): (params: Params) => Promise<FormSubmitResult> {
+  const { data: walletClient } = useWalletClient();
+  const { isConnected, chainId, address: account } = useAccount();
+  const { switchChainAsync } = useSwitchChain();
+
+  return React.useCallback(async({ args, item, addressHash }) => {
+    if (!isConnected) {
+      throw new Error('Wallet is not connected');
+    }
+
+    if (!walletClient) {
+      throw new Error('Wallet Client is not defined');
+    }
+
+    if (chainId && String(chainId) !== config.chain.id) {
+      await switchChainAsync?.({ chainId: Number(config.chain.id) });
+    }
+
+    const address = getAddress(addressHash);
+
+    if (item.type === 'receive' || item.type === 'fallback') {
+      const value = getNativeCoinValue(args[0]);
+      const hash = await walletClient.sendTransaction({
+        to: address,
+        value,
+      });
+      return { source: 'wallet_client', data: { hash } };
+    }
+
+    const methodName = item.name;
+
+    if (!methodName) {
+      throw new Error('Method name is not defined');
+    }
+
+    const _args = args.slice(0, item.inputs.length);
+    const value = getNativeCoinValue(args[item.inputs.length]);
+
+    const hash = await walletClient.writeContract({
+      args: _args,
+      // Here we provide the ABI as an array containing only one item from the submitted form.
+      // This is a workaround for the issue with the "viem" library.
+      // It lacks a "method_id" field to uniquely identify the correct method and instead attempts to find a method based on its name.
+      // But the name is not unique in the contract ABI and this behavior in the "viem" could result in calling the wrong method.
+      // See related issues:
+      //    - https://github.com/blockscout/frontend/issues/1032,
+      //    - https://github.com/blockscout/frontend/issues/1327
+      abi: [ item ] as Abi,
+      functionName: methodName,
+      address,
+      value,
+      account,
+    });
+
+    return { source: 'wallet_client', data: { hash } };
+  }, [ chainId, isConnected, switchChainAsync, walletClient, account ]);
+}
diff --git a/ui/address/contract/methods/useFormSubmit.ts b/ui/address/contract/methods/useFormSubmit.ts
new file mode 100644
index 0000000000..7c1f171d8b
--- /dev/null
+++ b/ui/address/contract/methods/useFormSubmit.ts
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import type { FormSubmitHandler } from './types';
+
+import config from 'configs/app';
+
+import useCallMethodPublicClient from './useCallMethodPublicClient';
+import useCallMethodWalletClient from './useCallMethodWalletClient';
+
+interface Params {
+  addressHash: string;
+}
+
+function useFormSubmit({ addressHash }: Params): FormSubmitHandler {
+  const callMethodWalletClient = useCallMethodWalletClient();
+  const callMethodPublicClient = useCallMethodPublicClient();
+
+  return React.useCallback(async(item, args, strategy) => {
+    switch (strategy) {
+      case 'read':
+      case 'simulate': {
+        return callMethodPublicClient({ args, item, addressHash, strategy });
+      }
+      case 'write': {
+        return callMethodWalletClient({ args, item, addressHash });
+      }
+
+      default: {
+        throw new Error(`Unknown call strategy "${ strategy }"`);
+      }
+    }
+  }, [ addressHash, callMethodWalletClient, callMethodPublicClient ]);
+}
+
+function useFormSubmitFallback({ addressHash }: Params): FormSubmitHandler {
+  const callMethodPublicClient = useCallMethodPublicClient();
+
+  return React.useCallback(async(item, args, strategy) => {
+    switch (strategy) {
+      case 'read':
+      case 'simulate': {
+        return callMethodPublicClient({ args, item, addressHash, strategy });
+      }
+
+      default: {
+        throw new Error(`Unknown call strategy "${ strategy }"`);
+      }
+    }
+
+  }, [ callMethodPublicClient, addressHash ]);
+}
+
+const hook = config.features.blockchainInteraction.isEnabled ? useFormSubmit : useFormSubmitFallback;
+
+export default hook;
diff --git a/ui/address/contract/methods/useMethodsFilters.ts b/ui/address/contract/methods/useMethodsFilters.ts
new file mode 100644
index 0000000000..5cda37075f
--- /dev/null
+++ b/ui/address/contract/methods/useMethodsFilters.ts
@@ -0,0 +1,123 @@
+import _pickBy from 'lodash/pickBy';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { MethodType, SmartContractMethod } from './types';
+
+import getQueryParamString from 'lib/router/getQueryParamString';
+
+import type { CONTRACT_MAIN_TAB_IDS } from '../utils';
+import { TYPE_FILTER_OPTIONS, isReadMethod, isWriteMethod } from './utils';
+
+function getInitialMethodType(tab: string) {
+  switch (tab) {
+    case 'read_contract':
+    case 'read_proxy':
+    case 'read_custom_methods':
+      return 'read';
+    case 'write_contract':
+    case 'write_proxy':
+    case 'write_custom_methods':
+      return 'write';
+    default:
+      return 'all';
+  }
+}
+
+const METHOD_TABS_MATRIX: Array<Array<typeof CONTRACT_MAIN_TAB_IDS[number]>> = [
+  [ 'read_write_contract', 'read_contract', 'write_contract' ],
+  [ 'read_write_proxy', 'read_proxy', 'write_proxy' ],
+  [ 'read_write_custom_methods', 'read_custom_methods', 'write_custom_methods' ],
+];
+
+interface MethodFilterType {
+  type: 'method_type';
+  value: MethodType;
+}
+
+interface MethodFilterName {
+  type: 'method_name';
+  value: string;
+}
+
+export type MethodsFilters = MethodFilterType | MethodFilterName;
+
+interface Params {
+  abi: Array<SmartContractMethod>;
+}
+
+export default function useMethodsFilters({ abi }: Params) {
+  const router = useRouter();
+
+  const tab = getQueryParamString(router.query.tab);
+
+  const [ methodType, setMethodType ] = React.useState<MethodType>(getInitialMethodType(tab));
+  const [ searchTerm, setSearchTerm ] = React.useState<string>('');
+
+  const changeTabInQuery = React.useCallback((methodType: MethodType) => {
+    const currentTab = getQueryParamString(router.query.tab);
+    const tabIndex = TYPE_FILTER_OPTIONS.findIndex(({ value }) => value === methodType);
+    const nextTab = METHOD_TABS_MATRIX.find((tabsSet) => tabsSet.includes(currentTab))?.[tabIndex];
+
+    if (!nextTab) {
+      return;
+    }
+
+    const queryForPathname = _pickBy(router.query, (value, key) => router.pathname.includes(`[${ key }]`));
+    router.push(
+      { pathname: router.pathname, query: { ...queryForPathname, tab: nextTab } },
+      undefined,
+      { shallow: true },
+    );
+
+  }, [ router ]);
+
+  const onChange = React.useCallback((filters: MethodsFilters) => {
+    if (filters.type === 'method_type') {
+      setMethodType(filters.value);
+      changeTabInQuery(filters.value);
+    } else if (filters.type === 'method_name') {
+      setSearchTerm(filters.value);
+    }
+  }, [ changeTabInQuery ]);
+
+  return React.useMemo(() => {
+    const typeFilterFn = (() => {
+      switch (methodType) {
+        case 'all':
+          return () => true;
+        case 'read':
+          return isReadMethod;
+        case 'write':
+          return isWriteMethod;
+      }
+    })();
+
+    const nameFilterFn = (method: SmartContractMethod) => {
+      const searchTermLower = searchTerm.toLowerCase().trim();
+
+      if (searchTermLower === '') {
+        return true;
+      }
+
+      if (method.type === 'fallback') {
+        return 'fallback'.includes(searchTermLower);
+      }
+
+      if (method.type === 'receive') {
+        return 'receive'.includes(searchTermLower);
+      }
+
+      return method.name.toLowerCase().includes(searchTermLower);
+    };
+
+    return {
+      methodType,
+      searchTerm,
+      onChange,
+      visibleItems: abi
+        .map((method, index) => typeFilterFn(method) && nameFilterFn(method) ? index : -1)
+        .filter((item) => item !== -1),
+    };
+  }, [ methodType, searchTerm, onChange, abi ]);
+}
diff --git a/ui/address/contract/methods/useScrollToMethod.ts b/ui/address/contract/methods/useScrollToMethod.ts
new file mode 100644
index 0000000000..9649800e50
--- /dev/null
+++ b/ui/address/contract/methods/useScrollToMethod.ts
@@ -0,0 +1,40 @@
+import React from 'react';
+import { scroller } from 'react-scroll';
+
+import type { SmartContractMethod } from './types';
+
+export const getElementId = (data: SmartContractMethod) => {
+  if ('method_id' in data) {
+    return data.method_id;
+  }
+
+  if ('name' in data) {
+    return data.name;
+  }
+
+  return data.type;
+};
+
+export const getElementName = (data: SmartContractMethod) => {
+  return `method_${ getElementId(data) }`;
+};
+
+export default function useScrollToMethod(data: Array<SmartContractMethod>, onScroll: (indices: Array<number>) => void) {
+  React.useEffect(() => {
+    const hash = window.location.hash.replace('#', '');
+
+    if (!hash) {
+      return;
+    }
+
+    const index = data.findIndex((item) => getElementId(item) === hash);
+    if (index > -1) {
+      scroller.scrollTo(getElementName(data[ index ]), {
+        duration: 500,
+        smooth: true,
+        offset: -100,
+      });
+      onScroll([ index ]);
+    }
+  }, [ data, onScroll ]);
+}
diff --git a/ui/address/contract/methods/utils.ts b/ui/address/contract/methods/utils.ts
new file mode 100644
index 0000000000..fe63631784
--- /dev/null
+++ b/ui/address/contract/methods/utils.ts
@@ -0,0 +1,68 @@
+import type { Abi, AbiFallback, AbiReceive } from 'abitype';
+import type { AbiFunction } from 'viem';
+import { toFunctionSelector } from 'viem';
+
+import type { MethodType, SmartContractMethod, SmartContractMethodRead, SmartContractMethodWrite } from './types';
+
+export const getNativeCoinValue = (value: unknown) => {
+  if (typeof value !== 'string') {
+    return BigInt(0);
+  }
+
+  return BigInt(value);
+};
+
+export const isMethod = (method: Abi[number]): method is SmartContractMethod =>
+  (method.type === 'function' || method.type === 'fallback' || method.type === 'receive');
+
+export const isReadMethod = (method: Abi[number]): method is SmartContractMethodRead =>
+  method.type === 'function' && (
+    method.constant || method.stateMutability === 'view' || method.stateMutability === 'pure'
+  );
+
+export const isWriteMethod = (method: Abi[number]): method is SmartContractMethodWrite =>
+  (method.type === 'function' || method.type === 'fallback' || method.type === 'receive') &&
+    !isReadMethod(method);
+
+export const enrichWithMethodId = (method: AbiFunction | AbiFallback | AbiReceive): SmartContractMethod => {
+  if (method.type !== 'function') {
+    return method;
+  }
+
+  try {
+    return {
+      ...method,
+      method_id: toFunctionSelector(method),
+    };
+  } catch (error) {
+    return {
+      ...method,
+      is_invalid: true,
+    };
+  }
+};
+
+const getNameForSorting = (method: SmartContractMethod | AbiFallback | AbiReceive) => {
+  if ('name' in method) {
+    return method.name;
+  }
+
+  return method.type === 'fallback' ? 'fallback' : 'receive';
+};
+
+export const formatAbi = (abi: Abi) => {
+  return abi
+    .filter(isMethod)
+    .map(enrichWithMethodId)
+    .sort((a, b) => {
+      const aName = getNameForSorting(a);
+      const bName = getNameForSorting(b);
+      return aName.localeCompare(bName);
+    });
+};
+
+export const TYPE_FILTER_OPTIONS: Array<{ value: MethodType; title: string }> = [
+  { value: 'all', title: 'All' },
+  { value: 'read', title: 'Read' },
+  { value: 'write', title: 'Write' },
+];
diff --git a/ui/address/contract/specs/ContractDetails.tsx b/ui/address/contract/specs/ContractDetails.tsx
new file mode 100644
index 0000000000..ac2aebf087
--- /dev/null
+++ b/ui/address/contract/specs/ContractDetails.tsx
@@ -0,0 +1,17 @@
+import { useRouter } from 'next/router';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import getQueryParamString from 'lib/router/getQueryParamString';
+
+import useContractTabs from '../useContractTabs';
+
+const ContractDetails = () => {
+  const router = useRouter();
+  const hash = getQueryParamString(router.query.hash);
+  const addressQuery = useApiQuery('address', { pathParams: { hash } });
+  const { tabs } = useContractTabs(addressQuery.data, false);
+  const content = tabs.find(({ id }) => id === 'contract_code')?.component;
+  return content ?? null;
+};
+
+export default ContractDetails;
diff --git a/ui/address/contract/types.ts b/ui/address/contract/types.ts
deleted file mode 100644
index b076f30f78..0000000000
--- a/ui/address/contract/types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { SmartContractQueryMethodRead, SmartContractMethod } from 'types/api/contract';
-
-import type { ResourceError } from 'lib/api/resources';
-
-export type MethodFormFields = Record<string, string | Array<string>>;
-export type MethodFormFieldsFormatted = Record<string, MethodArgType>;
-
-export type MethodArgType = string | boolean | Array<MethodArgType>;
-
-export type ContractMethodReadResult = SmartContractQueryMethodRead | ResourceError;
-
-export type ContractMethodWriteResult = Error | { hash: `0x${ string }` | undefined } | undefined;
-
-export type ContractMethodCallResult<T extends SmartContractMethod> =
-    T extends { method_id: string } ? ContractMethodReadResult : ContractMethodWriteResult;
diff --git a/ui/address/contract/useContractAbi.tsx b/ui/address/contract/useContractAbi.tsx
deleted file mode 100644
index 7f85bb4d8e..0000000000
--- a/ui/address/contract/useContractAbi.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useQueryClient } from '@tanstack/react-query';
-import type { Abi } from 'abitype';
-import React from 'react';
-
-import type { Address } from 'types/api/address';
-
-import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
-
-interface Params {
-  addressHash?: string;
-  isProxy?: boolean;
-  isCustomAbi?: boolean;
-}
-
-export default function useContractAbi({ addressHash, isProxy, isCustomAbi }: Params): Abi | undefined {
-  const queryClient = useQueryClient();
-
-  const { data: contractInfo } = useApiQuery('contract', {
-    pathParams: { hash: addressHash },
-    queryOptions: {
-      enabled: Boolean(addressHash),
-      refetchOnMount: false,
-    },
-  });
-
-  const addressInfo = queryClient.getQueryData<Address>(getResourceKey('address', {
-    pathParams: { hash: addressHash },
-  }));
-
-  const { data: proxyInfo } = useApiQuery('contract', {
-    pathParams: { hash: addressInfo?.implementation_address || '' },
-    queryOptions: {
-      enabled: Boolean(addressInfo?.implementation_address),
-      refetchOnMount: false,
-    },
-  });
-
-  const { data: customInfo } = useApiQuery('contract_methods_write', {
-    pathParams: { hash: addressHash },
-    queryParams: { is_custom_abi: 'true' },
-    queryOptions: {
-      enabled: Boolean(addressInfo?.has_custom_methods_write),
-      refetchOnMount: false,
-    },
-  });
-
-  return React.useMemo(() => {
-    if (isProxy) {
-      return proxyInfo?.abi ?? undefined;
-    }
-
-    if (isCustomAbi) {
-      return customInfo;
-    }
-
-    return contractInfo?.abi ?? undefined;
-  }, [ contractInfo?.abi, customInfo, isCustomAbi, isProxy, proxyInfo?.abi ]);
-}
diff --git a/ui/address/contract/useContractDetailsTabs.tsx b/ui/address/contract/useContractDetailsTabs.tsx
new file mode 100644
index 0000000000..7a0f16ac89
--- /dev/null
+++ b/ui/address/contract/useContractDetailsTabs.tsx
@@ -0,0 +1,120 @@
+import { Alert, Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import type { SmartContract } from 'types/api/contract';
+
+import CodeViewSnippet from 'ui/shared/CodeViewSnippet';
+import RawDataSnippet from 'ui/shared/RawDataSnippet';
+
+import ContractDetailsConstructorArgs from './ContractDetailsConstructorArgs';
+import ContractDetailsVerificationButton from './ContractDetailsVerificationButton';
+import ContractSourceCode from './ContractSourceCode';
+import type { CONTRACT_DETAILS_TAB_IDS } from './utils';
+
+interface Tab {
+  id: typeof CONTRACT_DETAILS_TAB_IDS[number];
+  title: string;
+  component: React.ReactNode;
+}
+
+interface Props {
+  data: SmartContract | undefined;
+  isLoading: boolean;
+  addressHash: string;
+  sourceAddress: string;
+}
+
+export default function useContractDetailsTabs({ data, isLoading, addressHash, sourceAddress }: Props): Array<Tab> {
+
+  const canBeVerified = !data?.is_self_destructed && !data?.is_verified;
+
+  return React.useMemo(() => {
+    const verificationButton = (
+      <ContractDetailsVerificationButton
+        isLoading={ isLoading }
+        addressHash={ addressHash }
+        isPartiallyVerified={ Boolean(data?.is_partially_verified) }
+      />
+    );
+
+    return [
+      (data?.constructor_args || data?.source_code) ? {
+        id: 'contract_source_code' as const,
+        title: 'Code',
+        component: (
+          <Flex flexDir="column" rowGap={ 6 }>
+            <ContractDetailsConstructorArgs data={ data } isLoading={ isLoading }/>
+            { data?.source_code && (
+              <ContractSourceCode
+                data={ data }
+                isLoading={ isLoading }
+                sourceAddress={ sourceAddress }
+              />
+            ) }
+          </Flex>
+        ),
+      } : undefined,
+
+      data?.compiler_settings ? {
+        id: 'contract_compiler' as const,
+        title: 'Compiler',
+        component: (
+          <CodeViewSnippet
+            data={ JSON.stringify(data.compiler_settings, undefined, 2) }
+            language="json"
+            title="Compiler Settings"
+            copyData={ JSON.stringify(data.compiler_settings) }
+            isLoading={ isLoading }
+          />
+        ),
+      } : undefined,
+
+      data?.abi ? {
+        id: 'contract_abi' as const,
+        title: 'ABI',
+        component: (
+          <CodeViewSnippet
+            data={ JSON.stringify(data.abi, undefined, 2) }
+            language="json"
+            title="Contract ABI"
+            copyData={ JSON.stringify(data.abi) }
+            isLoading={ isLoading }
+          />
+        ),
+      } : undefined,
+
+      (data?.creation_bytecode || data?.deployed_bytecode) ? {
+        id: 'contract_bytecode' as const,
+        title: 'ByteCode',
+        component: (
+          <Flex flexDir="column" rowGap={ 6 }>
+            { data?.creation_bytecode && (
+              <RawDataSnippet
+                data={ data.creation_bytecode }
+                title="Contract creation code"
+                rightSlot={ canBeVerified ? verificationButton : null }
+                beforeSlot={ data.is_self_destructed ? (
+                  <Alert status="info" whiteSpace="pre-wrap" mb={ 3 }>
+                    Contracts that self destruct in their constructors have no contract code published and cannot be verified.
+                    Displaying the init data provided of the creating transaction.
+                  </Alert>
+                ) : null }
+                textareaMaxHeight="300px"
+                isLoading={ isLoading }
+              />
+            ) }
+            { data?.deployed_bytecode && (
+              <RawDataSnippet
+                data={ data.deployed_bytecode }
+                title="Deployed ByteCode"
+                rightSlot={ !data?.creation_bytecode && canBeVerified ? verificationButton : null }
+                textareaMaxHeight="300px"
+                isLoading={ isLoading }
+              />
+            ) }
+          </Flex>
+        ),
+      } : undefined,
+    ].filter(Boolean);
+  }, [ isLoading, addressHash, data, sourceAddress, canBeVerified ]);
+}
diff --git a/ui/address/contract/useContractTabs.tsx b/ui/address/contract/useContractTabs.tsx
new file mode 100644
index 0000000000..d9b9f3e0c0
--- /dev/null
+++ b/ui/address/contract/useContractTabs.tsx
@@ -0,0 +1,117 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { Address } from 'types/api/address';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import * as stubs from 'stubs/contract';
+import ContractDetails from 'ui/address/contract/ContractDetails';
+import ContractMethodsCustom from 'ui/address/contract/methods/ContractMethodsCustom';
+import ContractMethodsMudSystem from 'ui/address/contract/methods/ContractMethodsMudSystem';
+import ContractMethodsProxy from 'ui/address/contract/methods/ContractMethodsProxy';
+import ContractMethodsRegular from 'ui/address/contract/methods/ContractMethodsRegular';
+import ContentLoader from 'ui/shared/ContentLoader';
+
+import type { CONTRACT_MAIN_TAB_IDS } from './utils';
+import { CONTRACT_DETAILS_TAB_IDS, CONTRACT_TAB_IDS } from './utils';
+
+interface ContractTab {
+  id: typeof CONTRACT_MAIN_TAB_IDS[number] | Array<typeof CONTRACT_MAIN_TAB_IDS[number]>;
+  title: string;
+  component: React.JSX.Element;
+  subTabs?: Array<string>;
+}
+
+interface ReturnType {
+  tabs: Array<ContractTab>;
+  isLoading: boolean;
+}
+
+export default function useContractTabs(data: Address | undefined, isPlaceholderData: boolean, hasMudTab?: boolean): ReturnType {
+  const [ isQueryEnabled, setIsQueryEnabled ] = React.useState(false);
+
+  const router = useRouter();
+  const tab = getQueryParamString(router.query.tab);
+
+  const isEnabled = Boolean(data?.hash) && data?.is_contract && !isPlaceholderData && CONTRACT_TAB_IDS.concat('contract' as never).includes(tab);
+
+  const enableQuery = React.useCallback(() => {
+    setIsQueryEnabled(true);
+  }, []);
+
+  const contractQuery = useApiQuery('contract', {
+    pathParams: { hash: data?.hash },
+    queryOptions: {
+      enabled: isEnabled && isQueryEnabled,
+      refetchOnMount: false,
+      placeholderData: data?.is_verified ? stubs.CONTRACT_CODE_VERIFIED : stubs.CONTRACT_CODE_UNVERIFIED,
+    },
+  });
+
+  const mudSystemsQuery = useApiQuery('contract_mud_systems', {
+    pathParams: { hash: data?.hash },
+    queryOptions: {
+      enabled: isEnabled && isQueryEnabled && hasMudTab,
+      refetchOnMount: false,
+      placeholderData: stubs.MUD_SYSTEMS,
+    },
+  });
+
+  const channel = useSocketChannel({
+    topic: `addresses:${ data?.hash?.toLowerCase() }`,
+    isDisabled: !isEnabled,
+    onJoin: enableQuery,
+    onSocketError: enableQuery,
+  });
+
+  const verifiedImplementations = React.useMemo(() => {
+    return data?.implementations?.filter(({ name, address }) => name && address && address !== data?.hash) || [];
+  }, [ data?.hash, data?.implementations ]);
+
+  return React.useMemo(() => {
+    return {
+      tabs: [
+        data?.hash && {
+          id: 'contract_code' as const,
+          title: 'Code',
+          component: <ContractDetails mainContractQuery={ contractQuery } channel={ channel } addressHash={ data.hash }/>,
+          subTabs: CONTRACT_DETAILS_TAB_IDS as unknown as Array<string>,
+        },
+        contractQuery.data?.abi && {
+          id: [ 'read_write_contract' as const, 'read_contract' as const, 'write_contract' as const ],
+          title: 'Read/Write contract',
+          component: <ContractMethodsRegular abi={ contractQuery.data.abi } isLoading={ contractQuery.isPlaceholderData }/>,
+        },
+        verifiedImplementations.length > 0 && {
+          id: [ 'read_write_proxy' as const, 'read_proxy' as const, 'write_proxy' as const ],
+          title: 'Read/Write proxy',
+          component: <ContractMethodsProxy implementations={ verifiedImplementations } isLoading={ contractQuery.isPlaceholderData }/>,
+        },
+        config.features.account.isEnabled && {
+          id: [ 'read_write_custom_methods' as const, 'read_custom_methods' as const, 'write_custom_methods' as const ],
+          title: 'Custom ABI',
+          component: <ContractMethodsCustom isLoading={ contractQuery.isPlaceholderData }/>,
+        },
+        hasMudTab && {
+          id: 'mud_system' as const,
+          title: 'MUD System',
+          component: mudSystemsQuery.isPlaceholderData ?
+            <ContentLoader/> :
+            <ContractMethodsMudSystem items={ mudSystemsQuery.data?.items ?? [] }/>,
+        },
+      ].filter(Boolean),
+      isLoading: contractQuery.isPlaceholderData,
+    };
+  }, [
+    data?.hash,
+    contractQuery,
+    channel,
+    verifiedImplementations,
+    hasMudTab,
+    mudSystemsQuery.isPlaceholderData,
+    mudSystemsQuery.data?.items,
+  ]);
+}
diff --git a/ui/address/contract/useWatchAccount.tsx b/ui/address/contract/useWatchAccount.tsx
deleted file mode 100644
index d4035e6ce5..0000000000
--- a/ui/address/contract/useWatchAccount.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { watchAccount, getAccount } from '@wagmi/core';
-import React from 'react';
-
-export function getWalletAccount() {
-  try {
-    return getAccount();
-  } catch (error) {
-    return null;
-  }
-}
-
-export default function useWatchAccount() {
-  const [ account, setAccount ] = React.useState(getWalletAccount());
-
-  React.useEffect(() => {
-    if (!account) {
-      return;
-    }
-
-    return watchAccount(setAccount);
-  }, [ account ]);
-
-  return account;
-}
diff --git a/ui/address/contract/utils.test.ts b/ui/address/contract/utils.test.ts
deleted file mode 100644
index da20410583..0000000000
--- a/ui/address/contract/utils.test.ts
+++ /dev/null
@@ -1,199 +0,0 @@
-import type { SmartContractMethodInput } from 'types/api/contract';
-
-import { prepareAbi, transformFieldsToArgs, formatFieldValues } from './utils';
-
-describe('function prepareAbi()', () => {
-  const commonAbi = [
-    {
-      inputs: [
-        { internalType: 'address', name: '_pool', type: 'address' },
-        { internalType: 'address', name: '_token', type: 'address' },
-        { internalType: 'uint256', name: '_denominator', type: 'uint256' },
-      ],
-      stateMutability: 'nonpayable' as const,
-      type: 'constructor' as const,
-    },
-    {
-      anonymous: false,
-      inputs: [
-        { indexed: false, internalType: 'uint256[]', name: 'indices', type: 'uint256[]' },
-      ],
-      name: 'CompleteDirectDepositBatch',
-      type: 'event' as const,
-    },
-    {
-      inputs: [
-        { internalType: 'address', name: '_fallbackUser', type: 'address' },
-        { internalType: 'string', name: '_zkAddress', type: 'string' },
-      ],
-      name: 'directNativeDeposit',
-      outputs: [
-        { internalType: 'uint256', name: '', type: 'uint256' },
-      ],
-      stateMutability: 'payable' as const,
-      type: 'function' as const,
-    },
-  ];
-
-  const method = {
-    inputs: [
-      { internalType: 'address' as const, name: '_fallbackUser', type: 'address' as const },
-      { internalType: 'string' as const, name: '_zkAddress', type: 'string' as const },
-    ],
-    name: 'directNativeDeposit',
-    outputs: [
-      { internalType: 'uint256' as const, name: '', type: 'uint256' as const },
-    ],
-    stateMutability: 'payable' as const,
-    type: 'function' as const,
-    constant: false,
-    payable: true,
-  };
-
-  it('if there is only one method with provided name, does nothing', () => {
-    const abi = prepareAbi(commonAbi, method);
-    expect(abi).toHaveLength(commonAbi.length);
-  });
-
-  it('if there are two or more methods with the same name and inputs length, filters out those which input types are not matched', () => {
-    const abi = prepareAbi([
-      ...commonAbi,
-      {
-        inputs: [
-          { internalType: 'address', name: '_fallbackUser', type: 'address' },
-          { internalType: 'bytes', name: '_rawZkAddress', type: 'bytes' },
-        ],
-        name: 'directNativeDeposit',
-        outputs: [
-          { internalType: 'uint256', name: '', type: 'uint256' },
-        ],
-        stateMutability: 'payable',
-        type: 'function',
-      },
-    ], method);
-
-    expect(abi).toHaveLength(commonAbi.length);
-
-    const item = abi.find((item) => 'name' in item ? item.name === method.name : false);
-    expect(item).toEqual(commonAbi[2]);
-  });
-
-  it('if there are two or more methods with the same name and different inputs length, filters out those which inputs are not matched', () => {
-    const abi = prepareAbi([
-      ...commonAbi,
-      {
-        inputs: [
-          { internalType: 'address', name: '_fallbackUser', type: 'address' },
-        ],
-        name: 'directNativeDeposit',
-        outputs: [
-          { internalType: 'uint256', name: '', type: 'uint256' },
-        ],
-        stateMutability: 'payable',
-        type: 'function',
-      },
-    ], method);
-
-    expect(abi).toHaveLength(commonAbi.length);
-
-    const item = abi.find((item) => 'name' in item ? item.name === method.name : false);
-    expect(item).toEqual(commonAbi[2]);
-  });
-});
-
-describe('function formatFieldValues()', () => {
-  const formFields = {
-    '_tx%0:nonce%0': '1 000 000 000 000 000 000',
-    '_tx%0:sender%1': '0xB375d4150A853482f25E3922A4C64c6C4fF6Ae3c',
-    '_tx%0:targets%2': [
-      '1',
-      'true',
-    ],
-    '_l2OutputIndex%1': '0xaeff',
-    '_paused%2': '0',
-    '_withdrawalProof%3': [
-      '0x0f',
-      '0x02',
-    ],
-  };
-
-  const inputs: Array<SmartContractMethodInput> = [
-    {
-      components: [
-        { internalType: 'uint256', name: 'nonce', type: 'uint256' },
-        { internalType: 'address', name: 'sender', type: 'address' },
-        { internalType: 'bool[]', name: 'targets', type: 'bool[]' },
-      ],
-      internalType: 'tuple',
-      name: '_tx',
-      type: 'tuple',
-    },
-    { internalType: 'bytes32', name: '_l2OutputIndex', type: 'bytes32' },
-    {
-      internalType: 'bool',
-      name: '_paused',
-      type: 'bool',
-    },
-    {
-      internalType: 'bytes32[]',
-      name: '_withdrawalProof',
-      type: 'bytes32[]',
-    },
-  ];
-
-  it('converts values to correct format', () => {
-    const result = formatFieldValues(formFields, inputs);
-    expect(result).toEqual({
-      '_tx%0:nonce%0': '1000000000000000000',
-      '_tx%0:sender%1': '0xB375d4150A853482f25E3922A4C64c6C4fF6Ae3c',
-      '_tx%0:targets%2': [
-        true,
-        true,
-      ],
-      '_l2OutputIndex%1': '0xaeff',
-      '_paused%2': false,
-      '_withdrawalProof%3': [
-        '0x0f',
-        '0x02',
-      ],
-    });
-  });
-
-  it('converts nested array string representation to correct format', () => {
-    const formFields = {
-      '_withdrawalProof%0': '[ [ 1 ], [ 2, 3 ], [ 4 ]]',
-    };
-    const inputs: Array<SmartContractMethodInput> = [
-      { internalType: 'uint[][]', name: '_withdrawalProof', type: 'uint[][]' },
-    ];
-    const result = formatFieldValues(formFields, inputs);
-
-    expect(result).toEqual({
-      '_withdrawalProof%0': [ [ 1 ], [ 2, 3 ], [ 4 ] ],
-    });
-  });
-});
-
-describe('function transformFieldsToArgs()', () => {
-  it('groups struct and array fields', () => {
-    const formFields = {
-      '_paused%2': 'primitive_1',
-      '_l2OutputIndex%1': 'primitive_0',
-      '_tx%0:nonce%0': 'struct_0',
-      '_tx%0:sender%1': 'struct_1',
-      '_tx%0:target%2': [ 'struct_2_0', 'struct_2_1' ],
-      '_withdrawalProof%3': [
-        'array_0',
-        'array_1',
-      ],
-    };
-
-    const args = transformFieldsToArgs(formFields);
-    expect(args).toEqual([
-      [ 'struct_0', 'struct_1', [ 'struct_2_0', 'struct_2_1' ] ],
-      'primitive_0',
-      'primitive_1',
-      [ 'array_0', 'array_1' ],
-    ]);
-  });
-});
diff --git a/ui/address/contract/utils.ts b/ui/address/contract/utils.ts
index 4474b89eb8..14832728b6 100644
--- a/ui/address/contract/utils.ts
+++ b/ui/address/contract/utils.ts
@@ -1,197 +1,22 @@
-import type { Abi } from 'abitype';
-import _mapValues from 'lodash/mapValues';
-
-import type { MethodArgType, MethodFormFields, MethodFormFieldsFormatted } from './types';
-import type { SmartContractMethodArgType, SmartContractMethodInput, SmartContractWriteMethod } from 'types/api/contract';
-
-export const INT_REGEXP = /^(u)?int(\d+)?$/i;
-
-export const BYTES_REGEXP = /^bytes(\d+)?$/i;
-
-export const ARRAY_REGEXP = /^(.*)\[(\d*)\]$/;
-
-export const getIntBoundaries = (power: number, isUnsigned: boolean) => {
-  const maxUnsigned = 2 ** power;
-  const max = isUnsigned ? maxUnsigned - 1 : maxUnsigned / 2 - 1;
-  const min = isUnsigned ? 0 : -maxUnsigned / 2;
-  return [ min, max ];
-};
-
-export const formatBooleanValue = (value: string) => {
-  const formattedValue = value.toLowerCase();
-
-  switch (formattedValue) {
-    case 'true':
-    case '1': {
-      return 'true';
-    }
-
-    case 'false':
-    case '0': {
-      return 'false';
-    }
-
-    default:
-      return;
-  }
-};
-
-export const getNativeCoinValue = (value: string | Array<unknown>) => {
-  const _value = Array.isArray(value) ? value[0] : value;
-
-  if (typeof _value !== 'string') {
-    return BigInt(0);
-  }
-
-  return BigInt(_value);
-};
-
-interface ExtendedError extends Error {
-  detectedNetwork?: {
-    chain: number;
-    name: string;
-  };
-  reason?: string;
-}
-
-export function isExtendedError(error: unknown): error is ExtendedError {
-  return (
-    typeof error === 'object' &&
-    error !== null &&
-    'message' in error &&
-    typeof (error as Record<string, unknown>).message === 'string'
-  );
-}
-
-export function prepareAbi(abi: Abi, item: SmartContractWriteMethod): Abi {
-  if ('name' in item) {
-    const hasMethodsWithSameName = abi.filter((abiItem) => 'name' in abiItem ? abiItem.name === item.name : false).length > 1;
-
-    if (hasMethodsWithSameName) {
-      return abi.filter((abiItem) => {
-        if (!('name' in abiItem)) {
-          return true;
-        }
-
-        if (abiItem.name !== item.name) {
-          return true;
-        }
-
-        if (abiItem.inputs.length !== item.inputs.length) {
-          return false;
-        }
-
-        return abiItem.inputs.every(({ name, type }) => {
-          const itemInput = item.inputs.find((input) => input.name === name);
-          return Boolean(itemInput) && itemInput?.type === type;
-        });
-      });
-    }
-  }
-
-  return abi;
-}
-
-function getFieldType(fieldName: string, inputs: Array<SmartContractMethodInput>) {
-  const chunks = fieldName.split(':');
-
-  if (chunks.length === 1) {
-    const [ , index ] = chunks[0].split('%');
-    return inputs[Number(index)].type;
-  } else {
-    const group = chunks[0].split('%');
-    const input = chunks[1].split('%');
-
-    return inputs[Number(group[1])].components?.[Number(input[1])].type;
-  }
-}
-
-function parseArrayValue(value: string) {
-  try {
-    const parsedResult = JSON.parse(value);
-    if (Array.isArray(parsedResult)) {
-      return parsedResult as Array<string>;
-    }
-    throw new Error('Not an array');
-  } catch (error) {
-    return '';
-  }
-}
-
-function castValue(value: string, type: SmartContractMethodArgType) {
-  if (type === 'bool') {
-    return formatBooleanValue(value) === 'true';
-  }
-
-  const intMatch = type.match(INT_REGEXP);
-  if (intMatch) {
-    return value.replaceAll(' ', '');
-  }
-
-  const isNestedArray = (type.match(/\[/g) || []).length > 1;
-  const isNestedTuple = type.includes('tuple');
-  if (isNestedArray || isNestedTuple) {
-    return parseArrayValue(value) || value;
-  }
-
-  return value;
-}
-
-export function formatFieldValues(formFields: MethodFormFields, inputs: Array<SmartContractMethodInput>) {
-  const formattedFields = _mapValues(formFields, (value, key) => {
-    const type = getFieldType(key, inputs);
-
-    if (!type) {
-      return value;
-    }
-
-    if (Array.isArray(value)) {
-      const arrayMatch = type.match(ARRAY_REGEXP);
-
-      if (arrayMatch) {
-        return value.map((item) => castValue(item, arrayMatch[1] as SmartContractMethodArgType));
-      }
-
-      return value;
-    }
-
-    return castValue(value, type);
-  });
-
-  return formattedFields;
-}
-
-export function transformFieldsToArgs(formFields: MethodFormFieldsFormatted) {
-  const unGroupedFields = Object.entries(formFields)
-    .reduce((
-      result: Record<string, MethodArgType>,
-      [ key, value ]: [ string, MethodArgType ],
-    ) => {
-      const chunks = key.split(':');
-
-      if (chunks.length > 1) {
-        const groupKey = chunks[0];
-        const [ , fieldIndex ] = chunks[1].split('%');
-
-        if (result[groupKey] === undefined) {
-          result[groupKey] = [];
-        }
-
-        (result[groupKey] as Array<MethodArgType>)[Number(fieldIndex)] = value;
-        return result;
-      }
-
-      result[key] = value;
-      return result;
-    }, {});
-
-  const args = (Object.entries(unGroupedFields)
-    .map(([ key, value ]) => {
-      const [ , index ] = key.split('%');
-      return [ Number(index), value ];
-    }) as Array<[ number, string | Array<string> ]>)
-    .sort((a, b) => a[0] - b[0])
-    .map(([ , value ]) => value);
-
-  return args;
-}
+export const CONTRACT_MAIN_TAB_IDS = [
+  'contract_code',
+  'read_contract',
+  'write_contract',
+  'read_write_contract',
+  'read_proxy',
+  'write_proxy',
+  'read_write_proxy',
+  'read_custom_methods',
+  'write_custom_methods',
+  'read_write_custom_methods',
+  'mud_system',
+] as const;
+
+export const CONTRACT_DETAILS_TAB_IDS = [
+  'contract_source_code',
+  'contract_compiler',
+  'contract_abi',
+  'contract_bytecode',
+] as const;
+
+export const CONTRACT_TAB_IDS = (CONTRACT_MAIN_TAB_IDS as unknown as Array<string>).concat(CONTRACT_DETAILS_TAB_IDS as unknown as Array<string>);
diff --git a/ui/address/details/AddressAlternativeFormat.tsx b/ui/address/details/AddressAlternativeFormat.tsx
new file mode 100644
index 0000000000..18da689936
--- /dev/null
+++ b/ui/address/details/AddressAlternativeFormat.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import config from 'configs/app';
+import { BECH_32_SEPARATOR, toBech32Address } from 'lib/address/bech32';
+import { useSettingsContext } from 'lib/contexts/settings';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+
+interface Props {
+  isLoading: boolean;
+  addressHash: string;
+}
+
+const AddressAlternativeFormat = ({ isLoading, addressHash }: Props) => {
+  const settingsContext = useSettingsContext();
+
+  if (!settingsContext || config.UI.views.address.hashFormat.availableFormats.length < 2) {
+    return null;
+  }
+
+  const label = settingsContext.addressFormat === 'bech32' ? '0x hash' : `${ config.UI.views.address.hashFormat.bech32Prefix }${ BECH_32_SEPARATOR } hash`;
+  const hint = settingsContext.addressFormat === 'bech32' ? 'Address hash encoded in base16 format' : 'Address hash encoded in bech32 format';
+  const altHash = settingsContext.addressFormat === 'bech32' ? addressHash : toBech32Address(addressHash);
+
+  return (
+    <>
+      <DetailsInfoItem.Label
+        hint={ hint }
+        isLoading={ isLoading }
+      >
+        { label }
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <AddressEntity
+          address={{ hash: altHash }}
+          isLoading={ isLoading }
+          noIcon
+          noLink
+          noAltHash
+        />
+      </DetailsInfoItem.Value>
+    </>
+  );
+};
+
+export default React.memo(AddressAlternativeFormat);
diff --git a/ui/address/details/AddressBalance.tsx b/ui/address/details/AddressBalance.tsx
index 37450d3325..59ca449214 100644
--- a/ui/address/details/AddressBalance.tsx
+++ b/ui/address/details/AddressBalance.tsx
@@ -10,7 +10,8 @@ import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import { currencyUnits } from 'lib/units';
 import CurrencyValue from 'ui/shared/CurrencyValue';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import NativeTokenIcon from 'ui/shared/NativeTokenIcon';
 
 interface Props {
   data: Pick<Address, 'block_number_balance_updated_at' | 'coin_balance' | 'hash' | 'exchange_rate'>;
@@ -65,24 +66,27 @@ const AddressBalance = ({ data, isLoading }: Props) => {
   });
 
   return (
-    <DetailsInfoItem
-      title="Balance"
-      hint={ `Address balance in ${ currencyUnits.ether }. Doesn't include ERC20, ERC721 and ERC1155 tokens` }
-      flexWrap="nowrap"
-      alignItems="flex-start"
-      isLoading={ isLoading }
-    >
-      <CurrencyValue
-        value={ data.coin_balance || '0' }
-        exchangeRate={ data.exchange_rate }
-        decimals={ String(config.chain.currency.decimals) }
-        currency={ currencyUnits.ether }
-        accuracyUsd={ 2 }
-        accuracy={ 8 }
-        flexWrap="wrap"
+    <>
+      <DetailsInfoItem.Label
+        hint={ `${ currencyUnits.ether } balance` }
         isLoading={ isLoading }
-      />
-    </DetailsInfoItem>
+      >
+        Balance
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value alignSelf="center" flexWrap="nowrap">
+        <NativeTokenIcon boxSize={ 6 } mr={ 2 } isLoading={ isLoading }/>
+        <CurrencyValue
+          value={ data.coin_balance || '0' }
+          exchangeRate={ data.exchange_rate }
+          decimals={ String(config.chain.currency.decimals) }
+          currency={ currencyUnits.ether }
+          accuracyUsd={ 2 }
+          accuracy={ 8 }
+          flexWrap="wrap"
+          isLoading={ isLoading }
+        />
+      </DetailsInfoItem.Value>
+    </>
   );
 };
 
diff --git a/ui/address/details/AddressCounterItem.tsx b/ui/address/details/AddressCounterItem.tsx
index 21156b2cd8..2354967e22 100644
--- a/ui/address/details/AddressCounterItem.tsx
+++ b/ui/address/details/AddressCounterItem.tsx
@@ -8,7 +8,7 @@ import type { AddressCounters } from 'types/api/address';
 import { route } from 'nextjs-routes';
 
 import type { ResourceError } from 'lib/api/resources';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 
 interface Props {
   prop: keyof AddressCounters;
@@ -16,6 +16,7 @@ interface Props {
   address: string;
   onClick: () => void;
   isAddressQueryLoading: boolean;
+  isDegradedData: boolean;
 }
 
 const PROP_TO_TAB = {
@@ -24,7 +25,7 @@ const PROP_TO_TAB = {
   validations_count: 'blocks_validated',
 };
 
-const AddressCounterItem = ({ prop, query, address, onClick, isAddressQueryLoading }: Props) => {
+const AddressCounterItem = ({ prop, query, address, onClick, isAddressQueryLoading, isDegradedData }: Props) => {
   if (query.isPlaceholderData || isAddressQueryLoading) {
     return <Skeleton h={ 5 } w="80px" borderRadius="full"/>;
   }
@@ -44,6 +45,11 @@ const AddressCounterItem = ({ prop, query, address, onClick, isAddressQueryLoadi
       if (data === '0') {
         return <span>0</span>;
       }
+
+      if (isDegradedData) {
+        return <span>{ Number(data).toLocaleString() }</span>;
+      }
+
       return (
         <LinkInternal href={ route({ pathname: '/address/[hash]', query: { hash: address, tab: PROP_TO_TAB[prop] } }) } onClick={ onClick }>
           { Number(data).toLocaleString() }
diff --git a/ui/address/details/AddressFavoriteButton.tsx b/ui/address/details/AddressFavoriteButton.tsx
index 8ce50e6c56..097c93d671 100644
--- a/ui/address/details/AddressFavoriteButton.tsx
+++ b/ui/address/details/AddressFavoriteButton.tsx
@@ -5,10 +5,10 @@ import React from 'react';
 
 import config from 'configs/app';
 import { getResourceKey } from 'lib/api/useApiQuery';
-import useIsAccountActionAllowed from 'lib/hooks/useIsAccountActionAllowed';
 import usePreventFocusAfterModalClosing from 'lib/hooks/usePreventFocusAfterModalClosing';
 import * as mixpanel from 'lib/mixpanel/index';
 import IconSvg from 'ui/shared/IconSvg';
+import AuthGuard from 'ui/snippets/auth/AuthGuard';
 import WatchlistAddModal from 'ui/watchlist/AddressModal/AddressModal';
 import DeleteAddressModal from 'ui/watchlist/DeleteAddressModal';
 
@@ -23,16 +23,12 @@ const AddressFavoriteButton = ({ className, hash, watchListId }: Props) => {
   const deleteModalProps = useDisclosure();
   const queryClient = useQueryClient();
   const router = useRouter();
-  const isAccountActionAllowed = useIsAccountActionAllowed();
   const onFocusCapture = usePreventFocusAfterModalClosing();
 
-  const handleClick = React.useCallback(() => {
-    if (!isAccountActionAllowed()) {
-      return;
-    }
+  const handleAddToFavorite = React.useCallback(() => {
     watchListId ? deleteModalProps.onOpen() : addModalProps.onOpen();
     !watchListId && mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Add to watchlist' });
-  }, [ isAccountActionAllowed, watchListId, deleteModalProps, addModalProps ]);
+  }, [ watchListId, deleteModalProps, addModalProps ]);
 
   const handleAddOrDeleteSuccess = React.useCallback(async() => {
     const queryKey = getResourceKey('address', { pathParams: { hash: router.query.hash?.toString() } });
@@ -49,9 +45,13 @@ const AddressFavoriteButton = ({ className, hash, watchListId }: Props) => {
   }, [ deleteModalProps ]);
 
   const formData = React.useMemo(() => {
+    if (typeof watchListId !== 'number') {
+      return { address_hash: hash };
+    }
+
     return {
       address_hash: hash,
-      id: String(watchListId),
+      id: watchListId,
     };
   }, [ hash, watchListId ]);
 
@@ -61,21 +61,25 @@ const AddressFavoriteButton = ({ className, hash, watchListId }: Props) => {
 
   return (
     <>
-      <Tooltip label={ `${ watchListId ? 'Remove address from Watch list' : 'Add address to Watch list' }` }>
-        <IconButton
-          isActive={ Boolean(watchListId) }
-          className={ className }
-          aria-label="edit"
-          variant="outline"
-          size="sm"
-          pl="6px"
-          pr="6px"
-          flexShrink={ 0 }
-          onClick={ handleClick }
-          icon={ <IconSvg name={ watchListId ? 'star_filled' : 'star_outline' } boxSize={ 5 }/> }
-          onFocusCapture={ onFocusCapture }
-        />
-      </Tooltip>
+      <AuthGuard onAuthSuccess={ handleAddToFavorite }>
+        { ({ onClick }) => (
+          <Tooltip label={ `${ watchListId ? 'Remove address from Watch list' : 'Add address to Watch list' }` }>
+            <IconButton
+              isActive={ Boolean(watchListId) }
+              className={ className }
+              aria-label="edit"
+              variant="outline"
+              size="sm"
+              pl="6px"
+              pr="6px"
+              flexShrink={ 0 }
+              onClick={ onClick }
+              icon={ <IconSvg name={ watchListId ? 'star_filled' : 'star_outline' } boxSize={ 5 }/> }
+              onFocusCapture={ onFocusCapture }
+            />
+          </Tooltip>
+        ) }
+      </AuthGuard>
       <WatchlistAddModal
         { ...addModalProps }
         isAdd
@@ -83,12 +87,14 @@ const AddressFavoriteButton = ({ className, hash, watchListId }: Props) => {
         onSuccess={ handleAddOrDeleteSuccess }
         data={ formData }
       />
-      <DeleteAddressModal
-        { ...deleteModalProps }
-        onClose={ handleDeleteModalClose }
-        data={ formData }
-        onSuccess={ handleAddOrDeleteSuccess }
-      />
+      { formData.id && (
+        <DeleteAddressModal
+          { ...deleteModalProps }
+          onClose={ handleDeleteModalClose }
+          data={ formData }
+          onSuccess={ handleAddOrDeleteSuccess }
+        />
+      ) }
     </>
   );
 };
diff --git a/ui/address/details/AddressImplementations.tsx b/ui/address/details/AddressImplementations.tsx
new file mode 100644
index 0000000000..2f5cde364e
--- /dev/null
+++ b/ui/address/details/AddressImplementations.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+import type { AddressImplementation } from 'types/api/addressParams';
+
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+
+interface Props {
+  data: Array<AddressImplementation>;
+  isLoading?: boolean;
+}
+
+const AddressImplementations = ({ data, isLoading }: Props) => {
+  const hasManyItems = data.length > 1;
+  const [ hasScroll, setHasScroll ] = React.useState(false);
+
+  return (
+    <>
+      <DetailsInfoItem.Label
+        hint={ `Implementation${ hasManyItems ? 's' : '' } address${ hasManyItems ? 'es' : '' } of the proxy contract` }
+        isLoading={ isLoading }
+        hasScroll={ hasScroll }
+      >
+        { `Implementation${ hasManyItems ? 's' : '' }` }
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.ValueWithScroll
+        gradientHeight={ 48 }
+        onScrollVisibilityChange={ setHasScroll }
+        rowGap={ 2 }
+        maxH="200px"
+      >
+        { data.map((item) => (
+          <AddressEntity
+            key={ item.address }
+            address={{
+              hash: item.address,
+              filecoin: { robust: item.filecoin_robust_address },
+              name: item.name,
+              is_contract: true,
+            }}
+            isLoading={ isLoading }
+            noIcon
+          />
+        )) }
+      </DetailsInfoItem.ValueWithScroll>
+    </>
+  );
+};
+
+export default React.memo(AddressImplementations);
diff --git a/ui/address/details/AddressMetadataAlert.pw.tsx b/ui/address/details/AddressMetadataAlert.pw.tsx
new file mode 100644
index 0000000000..70cba4a672
--- /dev/null
+++ b/ui/address/details/AddressMetadataAlert.pw.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import * as metadataMock from 'mocks/metadata/address';
+import { test, expect } from 'playwright/lib';
+
+import AddressMetadataAlert from './AddressMetadataAlert';
+
+test('base view', async({ render }) => {
+  const component = await render(<AddressMetadataAlert tags={ [ metadataMock.noteTag, metadataMock.noteTag2 ] }/>);
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/details/AddressMetadataAlert.tsx b/ui/address/details/AddressMetadataAlert.tsx
new file mode 100644
index 0000000000..fc982b229c
--- /dev/null
+++ b/ui/address/details/AddressMetadataAlert.tsx
@@ -0,0 +1,43 @@
+import { Alert, Flex, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
+
+interface Props {
+  tags: Array<AddressMetadataTagFormatted> | undefined;
+  className?: string;
+}
+
+const AddressMetadataAlert = ({ tags, className }: Props) => {
+  const noteTags = tags?.filter(({ tagType }) => tagType === 'note').filter(({ meta }) => meta?.data);
+
+  if (!noteTags?.length) {
+    return null;
+  }
+
+  return (
+    <Flex flexDir="column" gap={ 3 } className={ className }>
+      { noteTags.map((noteTag) => (
+        <Alert
+          key={ noteTag.name }
+          status={ noteTag.meta?.alertStatus ?? 'error' }
+          bgColor={ noteTag.meta?.alertBgColor }
+          color={ noteTag.meta?.alertTextColor }
+          whiteSpace="pre-wrap"
+          display="inline-block"
+          sx={{
+            '& a': {
+              color: 'link',
+              _hover: {
+                color: 'link_hovered',
+              },
+            },
+          }}
+          dangerouslySetInnerHTML={{ __html: noteTag.meta?.data ?? '' }}
+        />
+      )) }
+    </Flex>
+  );
+};
+
+export default React.memo(chakra(AddressMetadataAlert));
diff --git a/ui/address/details/AddressMultichainButton.tsx b/ui/address/details/AddressMultichainButton.tsx
new file mode 100644
index 0000000000..eee6e63c92
--- /dev/null
+++ b/ui/address/details/AddressMultichainButton.tsx
@@ -0,0 +1,70 @@
+import { Image, Tooltip } from '@chakra-ui/react';
+import _capitalize from 'lodash/capitalize';
+import React from 'react';
+
+import type { MultichainProviderConfigParsed } from 'types/client/multichainProviderConfig';
+
+import { route } from 'nextjs-routes';
+
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+const TEMPLATE_ADDRESS = '{address}';
+
+type Props = {
+  hasSingleProvider: boolean;
+  item: MultichainProviderConfigParsed;
+  addressHash: string;
+  onClick?: () => void;
+};
+
+const AddressMultichainButton = ({ item, addressHash, onClick, hasSingleProvider }: Props) => {
+
+  const buttonIcon = <Image src={ item.logoUrl } alt={ item.name } boxSize={ 5 } mr={ hasSingleProvider ? 2 : 0 } borderRadius="4px" overflow="hidden"/>;
+
+  const buttonContent = hasSingleProvider ? (
+    <>
+      { buttonIcon }
+      { _capitalize(item.name) }
+    </>
+  ) : (
+    <Tooltip label={ _capitalize(item.name) }>{ buttonIcon }</Tooltip>
+  );
+
+  const linkProps = {
+    variant: hasSingleProvider ? 'subtle' as const : undefined,
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: 'sm',
+    lineHeight: 5,
+    fontWeight: 500,
+    onClick,
+  };
+
+  try {
+    const portfolioUrlString = item.urlTemplate.replace(TEMPLATE_ADDRESS, addressHash);
+    const portfolioUrl = new URL(portfolioUrlString);
+    portfolioUrl.searchParams.append('utm_source', 'blockscout');
+    portfolioUrl.searchParams.append('utm_medium', 'address');
+    const dappId = item.dappId;
+    return typeof dappId === 'string' ? (
+      <LinkInternal
+        href={ route({ pathname: '/apps/[id]', query: { id: dappId, url: portfolioUrl.toString() } }) }
+        { ...linkProps }
+      >
+        { buttonContent }
+      </LinkInternal>
+    ) : (
+      <LinkExternal
+        href={ portfolioUrl.toString() }
+        { ...linkProps }
+      >
+        { buttonContent }
+      </LinkExternal>
+    );
+  } catch (error) {}
+
+  return null;
+};
+
+export default AddressMultichainButton;
diff --git a/ui/address/details/AddressNameInfo.tsx b/ui/address/details/AddressNameInfo.tsx
index cf6d7fa5b5..d9d8dc9122 100644
--- a/ui/address/details/AddressNameInfo.tsx
+++ b/ui/address/details/AddressNameInfo.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import type { Address } from 'types/api/address';
 
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 
 interface Props {
@@ -14,46 +14,58 @@ interface Props {
 const AddressNameInfo = ({ data, isLoading }: Props) => {
   if (data.token) {
     return (
-      <DetailsInfoItem
-        title="Token name"
-        hint="Token name and symbol"
-        isLoading={ isLoading }
-      >
-        <TokenEntity
-          token={ data.token }
+      <>
+        <DetailsInfoItem.Label
+          hint="Token name and symbol"
           isLoading={ isLoading }
-          noIcon
-          noCopy
-        />
-      </DetailsInfoItem>
+        >
+          Token name
+        </DetailsInfoItem.Label>
+        <DetailsInfoItem.Value>
+          <TokenEntity
+            token={ data.token }
+            isLoading={ isLoading }
+            noIcon
+            noCopy
+          />
+        </DetailsInfoItem.Value>
+      </>
     );
   }
 
   if (data.is_contract && data.name) {
     return (
-      <DetailsInfoItem
-        title="Contract name"
-        hint="The name found in the source code of the Contract"
-        isLoading={ isLoading }
-      >
-        <Skeleton isLoaded={ !isLoading }>
-          { data.name }
-        </Skeleton>
-      </DetailsInfoItem>
+      <>
+        <DetailsInfoItem.Label
+          hint="The name found in the source code of the Contract"
+          isLoading={ isLoading }
+        >
+          Contract name
+        </DetailsInfoItem.Label>
+        <DetailsInfoItem.Value>
+          <Skeleton isLoaded={ !isLoading }>
+            { data.name }
+          </Skeleton>
+        </DetailsInfoItem.Value>
+      </>
     );
   }
 
   if (data.name) {
     return (
-      <DetailsInfoItem
-        title="Validator name"
-        hint="The name of the validator"
-        isLoading={ isLoading }
-      >
-        <Skeleton isLoaded={ !isLoading }>
-          { data.name }
-        </Skeleton>
-      </DetailsInfoItem>
+      <>
+        <DetailsInfoItem.Label
+          hint="The name of the validator"
+          isLoading={ isLoading }
+        >
+          Validator name
+        </DetailsInfoItem.Label>
+        <DetailsInfoItem.Value>
+          <Skeleton isLoaded={ !isLoading }>
+            { data.name }
+          </Skeleton>
+        </DetailsInfoItem.Value>
+      </>
     );
   }
 
diff --git a/ui/address/details/AddressNetWorth.pw.tsx b/ui/address/details/AddressNetWorth.pw.tsx
new file mode 100644
index 0000000000..4f5c744728
--- /dev/null
+++ b/ui/address/details/AddressNetWorth.pw.tsx
@@ -0,0 +1,77 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import * as addressMock from 'mocks/address/address';
+import * as tokensMock from 'mocks/address/tokens';
+import { test, expect } from 'playwright/lib';
+
+import AddressNetWorth from './AddressNetWorth';
+
+const ADDRESS_HASH = addressMock.hash;
+const ICON_URL = 'https://localhost:3000/my-icon.png';
+
+test.beforeEach(async({ mockApiResponse }) => {
+  await mockApiResponse('address_tokens', tokensMock.erc20List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-20' } });
+  await mockApiResponse('address_tokens', tokensMock.erc721List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-721' } });
+  await mockApiResponse('address_tokens', tokensMock.erc1155List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-1155' } });
+  await mockApiResponse('address_tokens', tokensMock.erc404List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' } });
+});
+
+test('base view', async({ render }) => {
+  const component = await render(<AddressNetWorth addressData={ addressMock.eoa } addressHash={ ADDRESS_HASH }/>);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('with single multichain button internal +@dark-mode', async({ render, mockEnvs, mockAssetResponse }) => {
+  await mockEnvs([
+    [
+      'NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG',
+      `[{"name": "duck", "dapp_id": "duck", "url_template": "https://duck.url/{address}", "logo": "${ ICON_URL }"}]` ],
+  ]);
+  await mockAssetResponse(ICON_URL, './playwright/mocks/image_svg.svg');
+
+  const component = await render(<AddressNetWorth addressData={ addressMock.eoa } addressHash={ ADDRESS_HASH }/>);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('with single multichain button external', async({ render, mockEnvs, mockAssetResponse }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG', `[{"name": "duck", "url_template": "https://duck.url/{address}", "logo": "${ ICON_URL }"}]` ],
+  ]);
+  await mockAssetResponse(ICON_URL, './playwright/mocks/image_svg.svg');
+
+  const component = await render(<AddressNetWorth addressData={ addressMock.eoa } addressHash={ ADDRESS_HASH }/>);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('with two multichain button external', async({ render, mockEnvs, mockAssetResponse }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG', `[
+      {"name": "duck", "url_template": "https://duck.url/{address}", "logo": "${ ICON_URL }"},
+      {"name": "duck2", "url_template": "https://duck.url/{address}", "logo": "${ ICON_URL }"}
+    ]` ],
+  ]);
+  await mockAssetResponse(ICON_URL, './playwright/mocks/image_svg.svg');
+
+  const component = await render(<AddressNetWorth addressData={ addressMock.eoa } addressHash={ ADDRESS_HASH }/>);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('with multichain button internal small screen', async({ render, mockEnvs, mockAssetResponse }) => {
+  await mockEnvs([
+    [
+      'NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG',
+      `[{"name": "duck", "dapp_id": "duck", "url_template": "https://duck.url/{address}", "logo": "${ ICON_URL }"}]` ],
+  ]);
+  await mockAssetResponse(ICON_URL, './playwright/mocks/image_svg.svg');
+
+  const component = await render(
+    <Box w="300px"><AddressNetWorth addressData={ addressMock.eoa } addressHash={ ADDRESS_HASH }/></Box>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/details/AddressNetWorth.tsx b/ui/address/details/AddressNetWorth.tsx
new file mode 100644
index 0000000000..7fea56048c
--- /dev/null
+++ b/ui/address/details/AddressNetWorth.tsx
@@ -0,0 +1,79 @@
+import { Skeleton, Text, Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import type { Address } from 'types/api/address';
+
+import config from 'configs/app';
+import getCurrencyValue from 'lib/getCurrencyValue';
+import * as mixpanel from 'lib/mixpanel/index';
+import TextSeparator from 'ui/shared/TextSeparator';
+
+import { getTokensTotalInfo } from '../utils/tokenUtils';
+import useFetchTokens from '../utils/useFetchTokens';
+import AddressMultichainButton from './AddressMultichainButton';
+
+const multichainFeature = config.features.multichainButton;
+
+type Props = {
+  addressHash: string;
+  addressData?: Address;
+  isLoading?: boolean;
+};
+
+const AddressNetWorth = ({ addressData, isLoading, addressHash }: Props) => {
+  const { data, isError, isPending } = useFetchTokens({ hash: addressData?.hash, enabled: addressData?.has_tokens });
+
+  const { usdBn: nativeUsd } = getCurrencyValue({
+    value: addressData?.coin_balance || '0',
+    accuracy: 8,
+    accuracyUsd: 2,
+    exchangeRate: addressData?.exchange_rate,
+    decimals: String(config.chain.currency.decimals),
+  });
+
+  const { usd, isOverflow } = getTokensTotalInfo(data);
+  const prefix = isOverflow ? '>' : '';
+
+  const totalUsd = nativeUsd.plus(usd);
+
+  const onMultichainClick = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.BUTTON_CLICK, { Content: 'Multichain', Source: 'address' });
+  }, []);
+
+  let multichainItems = null;
+
+  if (multichainFeature.isEnabled && !addressData?.is_contract) {
+    const { providers } = multichainFeature;
+    const hasSingleProvider = providers.length === 1;
+
+    multichainItems = (
+      <>
+        <TextSeparator mx={ 0 } color="gray.500"/>
+        <Flex alignItems="center" gap={ 2 }>
+          <Text>Multichain</Text>
+          { providers.map((item) => (
+            <AddressMultichainButton
+              key={ item.name }
+              item={ item }
+              addressHash={ addressHash }
+              onClick={ onMultichainClick }
+              hasSingleProvider={ hasSingleProvider }
+            />
+          ))
+          }
+        </Flex>
+      </>
+    );
+  }
+
+  return (
+    <Skeleton display="flex" alignItems="center" flexWrap="wrap" isLoaded={ !isLoading && !(addressData?.has_tokens && isPending) } gap={ 2 }>
+      <Text>
+        { (isError || !addressData?.exchange_rate) ? 'N/A' : `${ prefix }$${ totalUsd.toFormat(2) }` }
+      </Text>
+      { multichainItems }
+    </Skeleton>
+  );
+};
+
+export default AddressNetWorth;
diff --git a/ui/address/details/AddressQrCode.pw.tsx b/ui/address/details/AddressQrCode.pw.tsx
index aef931f75e..1ae1c71187 100644
--- a/ui/address/details/AddressQrCode.pw.tsx
+++ b/ui/address/details/AddressQrCode.pw.tsx
@@ -1,18 +1,12 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as addressMock from 'mocks/address/address';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import AddressQrCode from './AddressQrCode';
 
-test('default view +@mobile +@dark-mode', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <AddressQrCode address={ addressMock.withoutName }/>
-    </TestApp>,
-  );
+test('default view +@mobile +@dark-mode', async({ render, page }) => {
+  await render(<AddressQrCode address={ addressMock.withoutName }/>);
   await page.getByRole('button', { name: /qr code/i }).click();
-
   await expect(page).toHaveScreenshot();
 });
diff --git a/ui/address/details/AddressQrCode.tsx b/ui/address/details/AddressQrCode.tsx
index f3f58e546c..4a3f3970a0 100644
--- a/ui/address/details/AddressQrCode.tsx
+++ b/ui/address/details/AddressQrCode.tsx
@@ -14,7 +14,6 @@ import {
   IconButton,
   Skeleton,
 } from '@chakra-ui/react';
-import * as Sentry from '@sentry/react';
 import { useRouter } from 'next/router';
 import QRCode from 'qrcode';
 import React from 'react';
@@ -23,6 +22,7 @@ import type { Address as AddressType } from 'types/api/address';
 
 import getPageType from 'lib/mixpanel/getPageType';
 import * as mixpanel from 'lib/mixpanel/index';
+import { useRollbar } from 'lib/rollbar';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import IconSvg from 'ui/shared/IconSvg';
 
@@ -40,6 +40,7 @@ const AddressQrCode = ({ address, className, isLoading }: Props) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const router = useRouter();
+  const rollbar = useRollbar();
 
   const [ qr, setQr ] = React.useState('');
   const [ error, setError ] = React.useState('');
@@ -51,7 +52,7 @@ const AddressQrCode = ({ address, className, isLoading }: Props) => {
       QRCode.toString(address.hash, SVG_OPTIONS, (error: Error | null | undefined, svg: string) => {
         if (error) {
           setError('We were unable to generate QR code.');
-          Sentry.captureException(error, { tags: { source: 'qr_code' } });
+          rollbar?.warn('QR code generation failed');
           return;
         }
 
@@ -60,7 +61,7 @@ const AddressQrCode = ({ address, className, isLoading }: Props) => {
         mixpanel.logEvent(mixpanel.EventTypes.QR_CODE, { 'Page type': pageType });
       });
     }
-  }, [ address.hash, isOpen, onClose, pageType ]);
+  }, [ address.hash, isOpen, onClose, pageType, rollbar ]);
 
   if (isLoading) {
     return <Skeleton className={ className } w="36px" h="32px" borderRadius="base"/>;
diff --git a/ui/address/details/AddressSaveOnGas.tsx b/ui/address/details/AddressSaveOnGas.tsx
new file mode 100644
index 0000000000..3452de3beb
--- /dev/null
+++ b/ui/address/details/AddressSaveOnGas.tsx
@@ -0,0 +1,88 @@
+import { Image, Skeleton } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import React from 'react';
+import * as v from 'valibot';
+
+import config from 'configs/app';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import TextSeparator from 'ui/shared/TextSeparator';
+
+const feature = config.features.saveOnGas;
+
+const responseSchema = v.object({
+  percent: v.number(),
+});
+
+const ERROR_NAME = 'Invalid response schema';
+
+interface Props {
+  gasUsed: string;
+  address: string;
+}
+
+const AddressSaveOnGas = ({ gasUsed, address }: Props) => {
+
+  const gasUsedNumber = Number(gasUsed);
+
+  const query = useQuery({
+    queryKey: [ 'gas_hawk_saving_potential', { address } ],
+    queryFn: async() => {
+      if (!feature.isEnabled) {
+        return;
+      }
+
+      const response = await fetch(feature.apiUrlTemplate.replace('<address>', address));
+      const data = await response.json();
+      return data;
+    },
+    select: (response) => {
+      const parsedResponse = v.safeParse(responseSchema, response);
+
+      if (!parsedResponse.success) {
+        throw Error('Invalid response schema');
+      }
+
+      return parsedResponse.output;
+    },
+    placeholderData: { percent: 42 },
+    enabled: feature.isEnabled && gasUsedNumber > 0,
+  });
+
+  const errorMessage = query.error && 'message' in query.error ? query.error.message : undefined;
+
+  React.useEffect(() => {
+    if (errorMessage === ERROR_NAME) {
+      fetch('/node-api/monitoring/invalid-api-schema', {
+        method: 'POST',
+        body: JSON.stringify({
+          resource: 'gas_hawk_saving_potential',
+          url: feature.isEnabled ? feature.apiUrlTemplate.replace('<address>', address) : undefined,
+        }),
+      });
+    }
+  }, [ address, errorMessage ]);
+
+  if (gasUsedNumber <= 0 || !feature.isEnabled || query.isError || !query.data?.percent) {
+    return null;
+  }
+
+  const percent = Math.round(query.data.percent);
+
+  if (percent < 1) {
+    return null;
+  }
+
+  return (
+    <>
+      <TextSeparator color="divider"/>
+      <Skeleton isLoaded={ !query.isPlaceholderData } display="flex" alignItems="center" columnGap={ 2 }>
+        <Image src="/static/gas_hawk_logo.svg" w="15px" h="20px" alt="GasHawk logo"/>
+        <LinkExternal href="https://www.gashawk.io?utm_source=blockscout&utm_medium=address" fontSize="sm">
+          Save { percent.toLocaleString(undefined, { maximumFractionDigits: 0 }) }% with GasHawk
+        </LinkExternal>
+      </Skeleton>
+    </>
+  );
+};
+
+export default React.memo(AddressSaveOnGas);
diff --git a/ui/address/details/__screenshots__/AddressMetadataAlert.pw.tsx_default_base-view-1.png b/ui/address/details/__screenshots__/AddressMetadataAlert.pw.tsx_default_base-view-1.png
new file mode 100644
index 0000000000..0152abc7b7
Binary files /dev/null and b/ui/address/details/__screenshots__/AddressMetadataAlert.pw.tsx_default_base-view-1.png differ
diff --git a/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_dark-color-mode_with-single-multichain-button-internal-dark-mode-1.png b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_dark-color-mode_with-single-multichain-button-internal-dark-mode-1.png
new file mode 100644
index 0000000000..0de6e82e33
Binary files /dev/null and b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_dark-color-mode_with-single-multichain-button-internal-dark-mode-1.png differ
diff --git a/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_base-view-1.png b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_base-view-1.png
new file mode 100644
index 0000000000..3cc25b4cf2
Binary files /dev/null and b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_base-view-1.png differ
diff --git a/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-internal-small-screen-1.png b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-internal-small-screen-1.png
new file mode 100644
index 0000000000..d408289004
Binary files /dev/null and b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-internal-small-screen-1.png differ
diff --git a/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-single-multichain-button-external-1.png b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-single-multichain-button-external-1.png
new file mode 100644
index 0000000000..211f9b39fd
Binary files /dev/null and b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-single-multichain-button-external-1.png differ
diff --git a/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-single-multichain-button-internal-dark-mode-1.png b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-single-multichain-button-internal-dark-mode-1.png
new file mode 100644
index 0000000000..fef96dbe82
Binary files /dev/null and b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-single-multichain-button-internal-dark-mode-1.png differ
diff --git a/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-two-multichain-button-external-1.png b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-two-multichain-button-external-1.png
new file mode 100644
index 0000000000..665fdc0204
Binary files /dev/null and b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-two-multichain-button-external-1.png differ
diff --git a/ui/address/details/__screenshots__/AddressQrCode.pw.tsx_mobile_default-view-mobile-dark-mode-1.png b/ui/address/details/__screenshots__/AddressQrCode.pw.tsx_mobile_default-view-mobile-dark-mode-1.png
index e2b90c535e..709ddca5c6 100644
Binary files a/ui/address/details/__screenshots__/AddressQrCode.pw.tsx_mobile_default-view-mobile-dark-mode-1.png and b/ui/address/details/__screenshots__/AddressQrCode.pw.tsx_mobile_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/address/ensDomains/AddressEnsDomains.pw.tsx b/ui/address/ensDomains/AddressEnsDomains.pw.tsx
index 8f75aede6d..81ff0f41d3 100644
--- a/ui/address/ensDomains/AddressEnsDomains.pw.tsx
+++ b/ui/address/ensDomains/AddressEnsDomains.pw.tsx
@@ -1,37 +1,39 @@
-import { test, expect } from '@playwright/experimental-ct-react';
+import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
-import config from 'configs/app';
+import type * as bens from '@blockscout/bens-types';
+
+import type { ResourceError } from 'lib/api/resources';
 import * as ensDomainMock from 'mocks/ens/domain';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import AddressEnsDomains from './AddressEnsDomains';
 
-const ADDRESS_HASH = ensDomainMock.ensDomainA.owner?.hash ?? '';
-const ADDRESSES_LOOKUP_API_URL = buildApiUrl('addresses_lookup', { chainId: config.chain.id }) +
-  `?address=${ ADDRESS_HASH }&resolved_to=true&owned_by=true&only_active=true&order=ASC`;
+const ADDRESS_HASH = ensDomainMock.ensDomainA.owner?.hash as string;
 
-test('base view', async({ mount, page }) => {
-  await page.route(ADDRESSES_LOOKUP_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({
+test('base view', async({ render, page, mockAssetResponse }) => {
+  const query = {
+    data: {
       items: [
         ensDomainMock.ensDomainA,
         ensDomainMock.ensDomainB,
         ensDomainMock.ensDomainC,
         ensDomainMock.ensDomainD,
       ],
-    }),
-  }));
+      next_page_params: null,
+    },
+    isPending: false,
+    isError: false,
+  } as unknown as UseQueryResult<bens.LookupAddressResponse, ResourceError<unknown>>;
+  await mockAssetResponse(ensDomainMock.ensDomainA.protocol?.icon_url as string, './playwright/mocks/image_s.jpg');
 
-  const component = await mount(
-    <TestApp>
-      <AddressEnsDomains addressHash={ ADDRESS_HASH } mainDomainName={ ensDomainMock.ensDomainA.name }/>
-    </TestApp>,
+  const component = await render(
+    <AddressEnsDomains
+      query={ query }
+      addressHash={ ADDRESS_HASH }
+      mainDomainName={ ensDomainMock.ensDomainA.name }
+    />,
   );
-
   await component.getByText('4').click();
-
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 550, height: 350 } });
 });
diff --git a/ui/address/ensDomains/AddressEnsDomains.tsx b/ui/address/ensDomains/AddressEnsDomains.tsx
index c7099ee0d1..fe046db30a 100644
--- a/ui/address/ensDomains/AddressEnsDomains.tsx
+++ b/ui/address/ensDomains/AddressEnsDomains.tsx
@@ -1,24 +1,40 @@
-import { Button, chakra, Flex, Grid, Hide, Popover, PopoverBody, PopoverContent, PopoverTrigger, Show, Skeleton, useDisclosure } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  Flex,
+  Grid,
+  Hide,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Show,
+  Skeleton,
+  useDisclosure,
+  chakra,
+} from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
 import _clamp from 'lodash/clamp';
 import React from 'react';
 
-import type { EnsDomain } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
 import { route } from 'nextjs-routes';
 
-import config from 'configs/app';
-import useApiQuery from 'lib/api/useApiQuery';
+import type { ResourceError } from 'lib/api/resources';
 import dayjs from 'lib/date/dayjs';
+import Popover from 'ui/shared/chakra/Popover';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import PopoverTriggerTooltip from 'ui/shared/PopoverTriggerTooltip';
 
 interface Props {
+  query: UseQueryResult<bens.LookupAddressResponse, ResourceError<unknown>>;
   addressHash: string;
-  mainDomainName: string | null;
+  mainDomainName: string | null | undefined;
 }
 
-const DomainsGrid = ({ data }: { data: Array<EnsDomain> }) => {
+const DomainsGrid = ({ data }: { data: Array<bens.Domain> }) => {
   return (
     <Grid
       templateColumns={{ base: `repeat(${ _clamp(data.length, 1, 2) }, 1fr)`, lg: `repeat(${ _clamp(data.length, 1, 3) }, 1fr)` }}
@@ -26,24 +42,15 @@ const DomainsGrid = ({ data }: { data: Array<EnsDomain> }) => {
       rowGap={ 4 }
       mt={ 2 }
     >
-      { data.slice(0, 9).map((domain) => <EnsEntity key={ domain.id } name={ domain.name } noCopy/>) }
+      { data.slice(0, 9).map((domain) => <EnsEntity key={ domain.id } domain={ domain.name } protocol={ domain.protocol } noCopy/>) }
     </Grid>
   );
 };
 
-const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
+const AddressEnsDomains = ({ query, addressHash, mainDomainName }: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
 
-  const { data, isPending, isError } = useApiQuery('addresses_lookup', {
-    pathParams: { chainId: config.chain.id },
-    queryParams: {
-      address: addressHash,
-      resolved_to: true,
-      owned_by: true,
-      only_active: true,
-      order: 'ASC',
-    },
-  });
+  const { data, isPending, isError } = query;
 
   if (isError) {
     return null;
@@ -57,9 +64,9 @@ const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
     return null;
   }
 
-  const mainDomain = data.items.find((domain) => domain.name === mainDomainName);
+  const mainDomain = data.items.find((domain) => mainDomainName && domain.name === mainDomainName);
   const ownedDomains = data.items.filter((domain) => {
-    if (domain.name === mainDomainName) {
+    if (mainDomainName && domain.name === mainDomainName) {
       return false;
     }
 
@@ -90,37 +97,40 @@ const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
       <PopoverTrigger>
-        <Button
-          size="sm"
-          variant="outline"
-          colorScheme="gray"
-          onClick={ onToggle }
-          aria-label="Address domains"
-          fontWeight={ 500 }
-          px={ 2 }
-          h="32px"
-          flexShrink={ 0 }
-        >
-          <IconSvg name="ENS_slim" boxSize={ 5 }/>
-          <Show above="xl">
-            <chakra.span ml={ 1 }>{ totalRecords } Domain{ data.items.length > 1 ? 's' : '' }</chakra.span>
-          </Show>
-          <Hide above="xl">
-            <chakra.span ml={ 1 }>{ totalRecords }</chakra.span>
-          </Hide>
-        </Button>
+        <PopoverTriggerTooltip label="List of names resolved or owned by this address">
+          <Button
+            size="sm"
+            variant="outline"
+            colorScheme="gray"
+            onClick={ onToggle }
+            isActive={ isOpen }
+            aria-label="Address domains"
+            fontWeight={ 500 }
+            px={ 2 }
+            h="32px"
+            flexShrink={ 0 }
+          >
+            <IconSvg name="ENS_slim" boxSize={ 5 }/>
+            <Show above="xl">
+              <chakra.span ml={ 1 }>{ totalRecords } Domain{ data.items.length > 1 ? 's' : '' }</chakra.span>
+            </Show>
+            <Hide above="xl">
+              <chakra.span ml={ 1 }>{ totalRecords }</chakra.span>
+            </Hide>
+          </Button>
+        </PopoverTriggerTooltip>
       </PopoverTrigger>
       <PopoverContent w={{ base: '100vw', lg: '500px' }}>
         <PopoverBody px={ 6 } py={ 5 } fontSize="sm" display="flex" flexDir="column" rowGap={ 5 } alignItems="flex-start">
           { mainDomain && (
-            <div>
+            <Box w="100%">
               <chakra.span color="text_secondary" fontSize="xs">Primary*</chakra.span>
               <Flex alignItems="center" fontSize="md" mt={ 2 }>
-                <EnsEntity name={ mainDomain.name } fontWeight={ 600 } noCopy/>
+                <EnsEntity domain={ mainDomain.name } protocol={ mainDomain.protocol } fontWeight={ 600 } noCopy/>
                 { mainDomain.expiry_date &&
                     <chakra.span color="text_secondary" whiteSpace="pre"> (expires { dayjs(mainDomain.expiry_date).fromNow() })</chakra.span> }
               </Flex>
-            </div>
+            </Box>
           ) }
           { ownedDomains.length > 0 && (
             <div>
diff --git a/ui/address/ensDomains/__screenshots__/AddressEnsDomains.pw.tsx_default_base-view-1.png b/ui/address/ensDomains/__screenshots__/AddressEnsDomains.pw.tsx_default_base-view-1.png
index 7f5315bbb9..e1e238e65d 100644
Binary files a/ui/address/ensDomains/__screenshots__/AddressEnsDomains.pw.tsx_default_base-view-1.png and b/ui/address/ensDomains/__screenshots__/AddressEnsDomains.pw.tsx_default_base-view-1.png differ
diff --git a/ui/address/epochRewards/AddressEpochRewardsListItem.tsx b/ui/address/epochRewards/AddressEpochRewardsListItem.tsx
new file mode 100644
index 0000000000..4d61904873
--- /dev/null
+++ b/ui/address/epochRewards/AddressEpochRewardsListItem.tsx
@@ -0,0 +1,75 @@
+import { Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressEpochRewardsItem } from 'types/api/address';
+
+import getCurrencyValue from 'lib/getCurrencyValue';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import EpochRewardTypeTag from 'ui/shared/EpochRewardTypeTag';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+type Props = {
+  item: AddressEpochRewardsItem;
+  isLoading?: boolean;
+};
+
+const AddressEpochRewardsListItem = ({ item, isLoading }: Props) => {
+  const { valueStr } = getCurrencyValue({ value: item.amount, accuracy: 2, decimals: item.token.decimals });
+  return (
+    <ListItemMobileGrid.Container gridTemplateColumns="100px auto">
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Block</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BlockEntity
+          number={ Number(item.block_number) }
+          isLoading={ isLoading }
+          noIcon
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Epoch #</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading }>
+          { item.epoch_number }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TimeAgoWithTooltip
+          timestamp={ item.block_timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Reward type</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <EpochRewardTypeTag type={ item.type } isLoading={ isLoading }/>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Associated address</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <AddressEntity
+          address={ item.associated_account }
+          isLoading={ isLoading }
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="flex" alignItems="center" gap={ 2 }>
+          { valueStr }
+          <TokenEntity token={ item.token } isLoading={ isLoading } onlySymbol width="auto" noCopy/>
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default AddressEpochRewardsListItem;
diff --git a/ui/address/epochRewards/AddressEpochRewardsTable.tsx b/ui/address/epochRewards/AddressEpochRewardsTable.tsx
new file mode 100644
index 0000000000..5032eaf02b
--- /dev/null
+++ b/ui/address/epochRewards/AddressEpochRewardsTable.tsx
@@ -0,0 +1,42 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressEpochRewardsItem } from 'types/api/address';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import AddressEpochRewardsTableItem from './AddressEpochRewardsTableItem';
+
+ type Props = {
+   items: Array<AddressEpochRewardsItem>;
+   isLoading?: boolean;
+   top: number;
+ };
+
+const AddressEpochRewardsTable = ({ items, isLoading, top }: Props) => {
+  return (
+    <Table minW="1000px" style={{ tableLayout: 'auto' }}>
+      <Thead top={ top }>
+        <Tr>
+          <Th>Block</Th>
+          <Th>Reward type</Th>
+          <Th>Associated address</Th>
+          <Th isNumeric>Value</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => {
+          return (
+            <AddressEpochRewardsTableItem
+              key={ item.block_hash + item.type + item.account.hash + item.associated_account.hash + (isLoading ? String(index) : '') }
+              item={ item }
+              isLoading={ isLoading }
+            />
+          );
+        }) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default AddressEpochRewardsTable;
diff --git a/ui/address/epochRewards/AddressEpochRewardsTableItem.tsx b/ui/address/epochRewards/AddressEpochRewardsTableItem.tsx
new file mode 100644
index 0000000000..ab7169121a
--- /dev/null
+++ b/ui/address/epochRewards/AddressEpochRewardsTableItem.tsx
@@ -0,0 +1,47 @@
+import { Flex, Td, Tr, Text, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressEpochRewardsItem } from 'types/api/address';
+
+import getCurrencyValue from 'lib/getCurrencyValue';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import EpochRewardTypeTag from 'ui/shared/EpochRewardTypeTag';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+ type Props = {
+   item: AddressEpochRewardsItem;
+   isLoading?: boolean;
+ };
+
+const AddressEpochRewardsTableItem = ({ item, isLoading }: Props) => {
+  const { valueStr } = getCurrencyValue({ value: item.amount, decimals: item.token.decimals });
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <Flex alignItems="center" gap={ 3 }>
+          <BlockEntity number={ item.block_number } isLoading={ isLoading } noIcon fontWeight={ 600 }/>
+          <Skeleton isLoaded={ !isLoading }>
+            <Text color="text_secondary" fontWeight={ 600 }>{ `Epoch # ${ item.epoch_number }` }</Text>
+          </Skeleton>
+          <TimeAgoWithTooltip timestamp={ item.block_timestamp } isLoading={ isLoading } textColor="text_secondary" fontWeight={ 400 }/>
+        </Flex>
+      </Td>
+      <Td verticalAlign="middle">
+        <EpochRewardTypeTag type={ item.type } isLoading={ isLoading }/>
+      </Td>
+      <Td verticalAlign="middle">
+        <AddressEntity address={ item.associated_account } isLoading={ isLoading } truncation="constant"/>
+      </Td>
+      <Td verticalAlign="middle" isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="flex" alignItems="center" gap={ 2 } justifyContent="flex-end">
+          { valueStr }
+          <TokenEntity token={ item.token } isLoading={ isLoading } onlySymbol width="auto" noCopy/>
+        </Skeleton>
+      </Td>
+    </Tr>
+  );
+};
+
+export default AddressEpochRewardsTableItem;
diff --git a/ui/address/filecoin/FilecoinActorTag.tsx b/ui/address/filecoin/FilecoinActorTag.tsx
new file mode 100644
index 0000000000..92e52f500d
--- /dev/null
+++ b/ui/address/filecoin/FilecoinActorTag.tsx
@@ -0,0 +1,39 @@
+import { Tag } from '@chakra-ui/react';
+import React from 'react';
+
+import type { FilecoinActorType } from 'types/api/addressParams';
+
+const ACTOR_TYPES: Record<FilecoinActorType, string> = {
+  account: 'Account',
+  cron: 'Scheduled Tasks',
+  datacap: 'Data Cap Management',
+  eam: 'Ethereum Address Manager',
+  ethaccount: 'Ethereum-Compatible Account',
+  evm: 'Ethereum Virtual Machine',
+  init: 'Initialization',
+  market: 'Storage Market',
+  miner: 'Storage Provider',
+  multisig: 'Multi-Signature Wallet',
+  paych: 'Payment Channel',
+  placeholder: 'Placeholder Address',
+  power: 'Power Management',
+  reward: 'Incentives and Rewards',
+  system: 'System Operations',
+  verifreg: 'Verification Registry',
+};
+
+type Props = {
+  actorType: FilecoinActorType;
+};
+
+const FilecoinActorTag = ({ actorType }: Props) => {
+  const text = ACTOR_TYPES[actorType];
+
+  if (!text) {
+    return null;
+  }
+
+  return <Tag colorScheme="gray">{ text }</Tag>;
+};
+
+export default FilecoinActorTag;
diff --git a/ui/address/internals/AddressIntTxsList.tsx b/ui/address/internals/AddressIntTxsList.tsx
index 8a564e8456..4ed7306519 100644
--- a/ui/address/internals/AddressIntTxsList.tsx
+++ b/ui/address/internals/AddressIntTxsList.tsx
@@ -9,7 +9,7 @@ type Props = {
   data: Array<InternalTransaction>;
   currentAddress: string;
   isLoading?: boolean;
-}
+};
 
 const AddressIntTxsList = ({ data, currentAddress, isLoading }: Props) => {
   return (
diff --git a/ui/address/internals/AddressIntTxsListItem.tsx b/ui/address/internals/AddressIntTxsListItem.tsx
index 0a3153193e..df13c6dbee 100644
--- a/ui/address/internals/AddressIntTxsListItem.tsx
+++ b/ui/address/internals/AddressIntTxsListItem.tsx
@@ -5,7 +5,6 @@ import React from 'react';
 import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
 import { currencyUnits } from 'lib/units';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import Tag from 'ui/shared/chakra/Tag';
@@ -13,6 +12,7 @@ import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
 type Props = InternalTransaction & { currentAddress: string; isLoading?: boolean };
@@ -26,7 +26,7 @@ const TxInternalsListItem = ({
   error,
   created_contract: createdContract,
   transaction_hash: txnHash,
-  block,
+  block_number: blockNumber,
   timestamp,
   currentAddress,
   isLoading,
@@ -45,17 +45,21 @@ const TxInternalsListItem = ({
           hash={ txnHash }
           isLoading={ isLoading }
           fontWeight={ 700 }
-          truncation="constant"
+          truncation="constant_long"
+        />
+        <TimeAgoWithTooltip
+          timestamp={ timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+          fontWeight="400"
+          fontSize="sm"
         />
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm">
-          <span>{ dayjs(timestamp).fromNow() }</span>
-        </Skeleton>
       </Flex>
       <HStack spacing={ 1 }>
         <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Block</Skeleton>
         <BlockEntity
           isLoading={ isLoading }
-          number={ block }
+          number={ blockNumber }
           noIcon
           fontSize="sm"
           lineHeight={ 5 }
diff --git a/ui/address/internals/AddressIntTxsTable.tsx b/ui/address/internals/AddressIntTxsTable.tsx
index 83e0f13f7a..2daae73cb5 100644
--- a/ui/address/internals/AddressIntTxsTable.tsx
+++ b/ui/address/internals/AddressIntTxsTable.tsx
@@ -18,8 +18,8 @@ interface Props {
 const AddressIntTxsTable = ({ data, currentAddress, isLoading }: Props) => {
   return (
     <AddressHighlightProvider>
-      <Table variant="simple" size="sm">
-        <Thead top={ 80 }>
+      <Table>
+        <Thead top={ 68 }>
           <Tr>
             <Th width="15%">Parent txn hash</Th>
             <Th width="15%">Type</Th>
diff --git a/ui/address/internals/AddressIntTxsTableItem.tsx b/ui/address/internals/AddressIntTxsTableItem.tsx
index 4e3301d2f2..3bd6b694fa 100644
--- a/ui/address/internals/AddressIntTxsTableItem.tsx
+++ b/ui/address/internals/AddressIntTxsTableItem.tsx
@@ -5,15 +5,15 @@ import React from 'react';
 import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import config from 'configs/app';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import Tag from 'ui/shared/chakra/Tag';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
-type Props = InternalTransaction & { currentAddress: string; isLoading?: boolean }
+type Props = InternalTransaction & { currentAddress: string; isLoading?: boolean };
 
 const AddressIntTxsTableItem = ({
   type,
@@ -24,7 +24,7 @@ const AddressIntTxsTableItem = ({
   error,
   created_contract: createdContract,
   transaction_hash: txnHash,
-  block,
+  block_number: blockNumber,
   timestamp,
   currentAddress,
   isLoading,
@@ -32,8 +32,6 @@ const AddressIntTxsTableItem = ({
   const typeTitle = TX_INTERNALS_ITEMS.find(({ id }) => id === type)?.title;
   const toData = to ? to : createdContract;
 
-  const timeAgo = useTimeAgoIncrement(timestamp, true);
-
   return (
     <Tr alignItems="top">
       <Td verticalAlign="middle">
@@ -43,12 +41,16 @@ const AddressIntTxsTableItem = ({
             isLoading={ isLoading }
             fontWeight={ 700 }
             noIcon
+            truncation="constant_long"
+          />
+          <TimeAgoWithTooltip
+            timestamp={ timestamp }
+            enableIncrement
+            isLoading={ isLoading }
+            color="text_secondary"
+            fontWeight="400"
+            fontSize="sm"
           />
-          { timestamp && (
-            <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm">
-              <span>{ timeAgo }</span>
-            </Skeleton>
-          ) }
         </Flex>
       </Td>
       <Td verticalAlign="middle">
@@ -64,7 +66,7 @@ const AddressIntTxsTableItem = ({
       <Td verticalAlign="middle">
         <BlockEntity
           isLoading={ isLoading }
-          number={ block }
+          number={ blockNumber }
           noIcon
           fontSize="sm"
           lineHeight={ 5 }
diff --git a/ui/address/mud/AddressMudBreadcrumbs.tsx b/ui/address/mud/AddressMudBreadcrumbs.tsx
new file mode 100644
index 0000000000..1504618ece
--- /dev/null
+++ b/ui/address/mud/AddressMudBreadcrumbs.tsx
@@ -0,0 +1,119 @@
+import { Box, useColorModeValue, chakra, Grid } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import isBrowser from 'lib/isBrowser';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+import useAddressQuery from '../utils/useAddressQuery';
+
+type TableViewProps = {
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  className?: string;
+  hash: string;
+  tableId: string;
+  tableName: string;
+};
+
+type RecordViewProps = TableViewProps & {
+  recordId: string;
+  recordName: string;
+};
+
+type BreadcrumbItemProps = {
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  text: string;
+  href: string;
+  isLast?: boolean;
+};
+
+const BreadcrumbItem = ({ text, href, isLast, scrollRef }: BreadcrumbItemProps) => {
+  const iconColor = useColorModeValue('gray.300', 'gray.600');
+
+  const currentUrl = isBrowser() ? window.location.href : '';
+
+  const onLinkClick = React.useCallback(() => {
+    window.setTimeout(() => {
+      // cannot do scroll instantly, have to wait a little
+      scrollRef?.current?.scrollIntoView({ behavior: 'smooth' });
+    }, 500);
+  }, [ scrollRef ]);
+
+  if (isLast) {
+    return (
+      <Grid gap={ 2 } overflow="hidden" templateColumns="auto 24px" alignItems="center">
+        <Box
+          overflow="hidden"
+          whiteSpace="nowrap"
+          textOverflow="ellipsis"
+        >
+          { text }
+        </Box>
+        <CopyToClipboard text={ currentUrl } type="link" mx={ 0 } color="text_secondary"/>
+      </Grid>
+    );
+  }
+
+  return (
+    <Grid gap={ 2 } overflow="hidden" templateColumns="auto 24px" alignItems="center">
+      <LinkInternal
+        href={ href }
+        onClick={ onLinkClick }
+        overflow="hidden"
+        textOverflow="ellipsis"
+        whiteSpace="nowrap"
+      >
+        { text }
+      </LinkInternal>
+      { !isLast && <IconSvg name="arrows/east" boxSize={ 6 } color={ iconColor }/> }
+    </Grid>
+  );
+};
+
+const AddressMudBreadcrumbs = (props: TableViewProps | RecordViewProps) => {
+  const queryParams = { tab: 'mud', hash: props.hash };
+  const isMobile = useIsMobile();
+
+  const addressQuery = useAddressQuery({ hash: props.hash });
+
+  return (
+    <Box
+      display={ isMobile ? 'flex' : 'grid' }
+      flexWrap="wrap"
+      gridTemplateColumns="20px auto auto auto"
+      gap={ 2 }
+      alignItems="center"
+      className={ props.className }
+      width="fit-content"
+      fontSize="sm"
+    >
+      <IconSvg name="MUD" boxSize={ 5 } color={ addressQuery.data?.is_verified ? 'green.500' : 'text_secondary' }/>
+      <BreadcrumbItem
+        text="MUD World"
+        href={ route({ pathname: '/address/[hash]', query: queryParams }) }
+        scrollRef={ props.scrollRef }
+      />
+      <BreadcrumbItem
+        text={ props.tableName }
+        href={ route({ pathname: '/address/[hash]', query: { ...queryParams, table_id: props.tableId } }) }
+        isLast={ !('recordId' in props) }
+        scrollRef={ props.scrollRef }
+      />
+      { ('recordId' in props) && (
+        <BreadcrumbItem
+          text={ props.recordName }
+          href={ route({ pathname: '/address/[hash]', query: { ...queryParams, table_id: props.tableId, record_id: props.recordId } }) }
+          isLast
+          scrollRef={ props.scrollRef }
+
+        />
+      ) }
+    </Box>
+  );
+};
+
+export default React.memo(chakra(AddressMudBreadcrumbs));
diff --git a/ui/address/mud/AddressMudRecord.pw.tsx b/ui/address/mud/AddressMudRecord.pw.tsx
new file mode 100644
index 0000000000..bd806698ff
--- /dev/null
+++ b/ui/address/mud/AddressMudRecord.pw.tsx
@@ -0,0 +1,46 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { mudRecord } from 'mocks/mud/mudTables';
+import { test, expect, devices } from 'playwright/lib';
+
+import AddressMudRecord from './AddressMudRecord';
+
+const ADDRESS_HASH = 'hash';
+const TABLE_ID = '123';
+const RECORD_ID = '234';
+const hooksConfig = {
+  router: {
+    query: { hash: ADDRESS_HASH },
+  },
+};
+
+test('base view', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address_mud_record', mudRecord, { pathParams: { hash: ADDRESS_HASH, table_id: TABLE_ID, record_id: RECORD_ID } });
+
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
+      <AddressMudRecord tableId={ TABLE_ID } recordId={ RECORD_ID }/>
+    </Box>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('base view', async({ render, mockApiResponse }) => {
+    await mockApiResponse('address_mud_record', mudRecord, { pathParams: { hash: ADDRESS_HASH, table_id: TABLE_ID, record_id: RECORD_ID } });
+
+    const component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
+        <AddressMudRecord tableId={ TABLE_ID } recordId={ RECORD_ID }/>
+      </Box>,
+      { hooksConfig },
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+});
diff --git a/ui/address/mud/AddressMudRecord.tsx b/ui/address/mud/AddressMudRecord.tsx
new file mode 100644
index 0000000000..981bd5adff
--- /dev/null
+++ b/ui/address/mud/AddressMudRecord.tsx
@@ -0,0 +1,95 @@
+import { Box, Td, Tr, Flex, Text, Table, Show, Hide, Divider, VStack } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import dayjs from 'lib/date/dayjs';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import ContentLoader from 'ui/shared/ContentLoader';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import TruncatedValue from 'ui/shared/TruncatedValue';
+
+import AddressMudBreadcrumbs from './AddressMudBreadcrumbs';
+import AddressMudRecordValues from './AddressMudRecordValues';
+import { getValueString } from './utils';
+
+type Props = {
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  isQueryEnabled?: boolean;
+  tableId: string;
+  recordId: string;
+};
+
+const AddressMudRecord = ({ tableId, recordId, isQueryEnabled = true, scrollRef }: Props) => {
+  const router = useRouter();
+
+  const hash = getQueryParamString(router.query.hash);
+
+  const { data, isLoading, isError } = useApiQuery('address_mud_record', {
+    pathParams: { hash, table_id: tableId, record_id: recordId },
+    queryOptions: {
+      enabled: isQueryEnabled,
+    },
+  });
+
+  if (isLoading) {
+    return <ContentLoader/>;
+  }
+
+  if (isError) {
+    return <DataFetchAlert/>;
+  }
+
+  return (
+    <>
+      { data && (
+        <AddressMudBreadcrumbs
+          hash={ hash }
+          tableId={ tableId }
+          tableName={ data?.table.table_full_name }
+          recordId={ recordId }
+          recordName={ data.record.id }
+          mb={ 6 }
+          scrollRef={ scrollRef }
+        />
+      ) }
+      <Show above="lg" ssr={ false }>
+        <Table borderRadius="8px" style={{ tableLayout: 'auto' }} width="100%" overflow="hidden">
+          { data?.schema.key_names.length && data?.schema.key_names.map((keyName, index) => (
+            <Tr key={ keyName } borderBottomStyle={ index === data.schema.key_names.length - 1 ? 'hidden' : 'solid' }>
+              <Td fontWeight={ 600 } whiteSpace="nowrap" fontSize="sm">
+                { keyName } ({ data.schema.key_types[index] })
+              </Td>
+              <Td colSpan={ 2 } fontSize="sm">
+                <Flex justifyContent="space-between">
+                  <TruncatedValue value={ getValueString(data.record.decoded[keyName]) } mr={ 2 }/>
+                  { index === 0 && <Box color="text_secondary">{ dayjs(data.record.timestamp).format('lll') }</Box> }
+                </Flex>
+              </Td>
+            </Tr>
+          )) }
+          <AddressMudRecordValues data={ data }/>
+        </Table>
+      </Show>
+      <Hide above="lg" ssr={ false }>
+        <>
+          { data?.schema.key_names.length && data?.schema.key_names.map((keyName, index) => (
+            <VStack gap={ 1 } key={ keyName } alignItems="start" fontSize="sm">
+              <Divider/>
+              <Text fontWeight={ 600 } whiteSpace="nowrap">
+                { keyName } ({ data.schema.key_types[index] })
+              </Text>
+              <Text wordBreak="break-word">{ getValueString(data.record.decoded[keyName]) }</Text>
+              { index === 0 && <Box color="text_secondary">{ dayjs(data.record.timestamp).format('lll') }</Box> }
+            </VStack>
+          )) }
+          <Table borderRadius="8px" style={{ tableLayout: 'auto' }} width="100%" mt={ 2 } overflow="hidden">
+            <AddressMudRecordValues data={ data }/>
+          </Table>
+        </>
+      </Hide>
+    </>
+  );
+};
+
+export default AddressMudRecord;
diff --git a/ui/address/mud/AddressMudRecordValues.tsx b/ui/address/mud/AddressMudRecordValues.tsx
new file mode 100644
index 0000000000..eea3c9aa13
--- /dev/null
+++ b/ui/address/mud/AddressMudRecordValues.tsx
@@ -0,0 +1,43 @@
+import { Box, Td, Tr, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressMudRecord } from 'types/api/address';
+
+import { getValueString } from './utils';
+
+type Props = {
+  data?: AddressMudRecord;
+};
+
+const AddressMudRecordValues = ({ data }: Props) => {
+  const valuesBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  if (!data?.schema.value_names.length) {
+    return null;
+  }
+
+  return (
+    <>
+      <Tr backgroundColor={ valuesBgColor } borderBottomStyle="hidden" >
+        <Td fontWeight={ 600 } w="100px" fontSize="sm">Field</Td>
+        <Td fontWeight={ 600 } w="90px" fontSize="sm">Type</Td>
+        <Td fontWeight={ 600 } fontSize="sm">Value</Td>
+      </Tr>
+      {
+        data?.schema.value_names.map((valName, index) => (
+          <Tr key={ valName } backgroundColor={ valuesBgColor } borderBottomStyle="hidden">
+            <Td fontWeight={ 400 } w="100px" py={ 0 } pb={ 4 } pr={ 0 }wordBreak="break-all">{ valName }</Td>
+            <Td fontWeight={ 400 } w="90px" py={ 0 } pb={ 4 } wordBreak="break-all">{ data.schema.value_types[index] }</Td>
+            <Td fontWeight={ 400 } wordBreak="break-word" py={ 0 } pb={ 4 }>
+              <Box>
+                { getValueString(data.record.decoded[valName]) }
+              </Box>
+            </Td>
+          </Tr>
+        ))
+      }
+    </>
+  );
+};
+
+export default AddressMudRecordValues;
diff --git a/ui/address/mud/AddressMudRecordsKeyFilter.tsx b/ui/address/mud/AddressMudRecordsKeyFilter.tsx
new file mode 100644
index 0000000000..5466d9efe0
--- /dev/null
+++ b/ui/address/mud/AddressMudRecordsKeyFilter.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import TableColumnFilterWrapper from 'ui/shared/filters/TableColumnFilterWrapper';
+
+import AddressMudRecordsKeyFilterContent from './AddressMudRecordsKeyFilterContent';
+
+type Props = {
+  value?: string;
+  handleFilterChange: (val: string) => void;
+  title: string;
+  columnName: string;
+  isLoading?: boolean;
+};
+
+const AddressMudRecordsKeyFilter = ({ value = '', handleFilterChange, columnName, title, isLoading }: Props) => {
+  return (
+    <TableColumnFilterWrapper
+      columnName={ columnName }
+      isActive={ Boolean(value) }
+      isLoading={ isLoading }
+      w="350px"
+    >
+      <AddressMudRecordsKeyFilterContent
+        value={ value }
+        handleFilterChange={ handleFilterChange }
+        title={ title }
+        columnName={ columnName }
+      />
+    </TableColumnFilterWrapper>
+  );
+};
+
+export default AddressMudRecordsKeyFilter;
diff --git a/ui/address/mud/AddressMudRecordsKeyFilterContent.tsx b/ui/address/mud/AddressMudRecordsKeyFilterContent.tsx
new file mode 100644
index 0000000000..bc7af9dc63
--- /dev/null
+++ b/ui/address/mud/AddressMudRecordsKeyFilterContent.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import FilterInput from 'ui/shared/filters/FilterInput';
+import TableColumnFilter from 'ui/shared/filters/TableColumnFilter';
+
+type Props = {
+  value?: string;
+  handleFilterChange: (val: string) => void;
+  title: string;
+  columnName: string;
+  onClose?: () => void;
+};
+
+const AddressMudRecordsKeyFilter = ({ value = '', handleFilterChange, columnName, title, onClose }: Props) => {
+  const [ filterValue, setFilterValue ] = React.useState<string>(value);
+
+  const onFilter = React.useCallback(() => {
+    handleFilterChange(filterValue);
+  }, [ handleFilterChange, filterValue ]);
+
+  return (
+    <TableColumnFilter
+      title={ title }
+      isFilled={ filterValue !== value }
+      onFilter={ onFilter }
+      onClose={ onClose }
+    >
+      <FilterInput
+        initialValue={ value }
+        size="xs"
+        onChange={ setFilterValue }
+        placeholder={ columnName }
+      />
+    </TableColumnFilter>
+  );
+};
+
+export default AddressMudRecordsKeyFilter;
diff --git a/ui/address/mud/AddressMudRecordsTable.tsx b/ui/address/mud/AddressMudRecordsTable.tsx
new file mode 100644
index 0000000000..a9ccc174cc
--- /dev/null
+++ b/ui/address/mud/AddressMudRecordsTable.tsx
@@ -0,0 +1,225 @@
+import type { StyleProps } from '@chakra-ui/react';
+import { Box, Link, Table, Tbody, Td, Th, Tr, Flex, useColorModeValue, useBoolean, Tooltip } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { AddressMudRecords, AddressMudRecordsFilter, AddressMudRecordsSorting } from 'types/api/address';
+
+import { route } from 'nextjs-routes';
+
+import capitalizeFirstLetter from 'lib/capitalizeFirstLetter';
+import dayjs from 'lib/date/dayjs';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import AddressMudRecordsKeyFilter from './AddressMudRecordsKeyFilter';
+import { getNameTypeText, getValueString } from './utils';
+
+const COL_MIN_WIDTH = 180;
+const COL_MIN_WIDTH_MOBILE = 140;
+const CUT_COL_WIDTH = 36;
+const MIN_CUT_COUNT = 2;
+
+type Props = {
+  data: AddressMudRecords;
+  top: number;
+  sorting?: AddressMudRecordsSorting;
+  toggleSorting: (key: AddressMudRecordsSorting['sort']) => void;
+  setFilters: React.Dispatch<React.SetStateAction<AddressMudRecordsFilter>>;
+  filters: AddressMudRecordsFilter;
+  toggleTableHasHorizontalScroll: () => void;
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  hash: string;
+};
+
+const AddressMudRecordsTable = ({
+  data,
+  top,
+  sorting,
+  toggleSorting,
+  filters,
+  setFilters,
+  toggleTableHasHorizontalScroll,
+  scrollRef,
+  hash,
+}: Props) => {
+  const totalColsCut = data.schema.key_names.length + data.schema.value_names.length;
+  const isMobile = useIsMobile(false);
+  const [ colsCutCount, setColsCutCount ] = React.useState<number>(isMobile ? MIN_CUT_COUNT : 0);
+  const [ isOpened, setIsOpened ] = useBoolean(false);
+  const [ hasCut, setHasCut ] = useBoolean(isMobile ? totalColsCut > MIN_CUT_COUNT : true);
+
+  const containerRef = React.useRef<HTMLTableElement>(null);
+  const tableRef = React.useRef<HTMLTableElement>(null);
+
+  const router = useRouter();
+
+  const toggleIsOpen = React.useCallback(() => {
+    isOpened && tableRef.current?.scroll({ left: 0 });
+    setIsOpened.toggle();
+    toggleTableHasHorizontalScroll();
+  }, [ setIsOpened, toggleTableHasHorizontalScroll, isOpened ]);
+
+  const onRecordClick = React.useCallback((e: React.MouseEvent) => {
+    if (e.metaKey || e.ctrlKey) {
+      // Allow opening in a new tab/window with right-click or ctrl/cmd+click
+      return;
+    }
+
+    e.preventDefault();
+
+    const recordId = e.currentTarget.getAttribute('data-id');
+    if (recordId) {
+      router.push(
+        { pathname: '/address/[hash]', query: { hash, tab: 'mud', table_id: data.table.table_id, record_id: recordId } },
+        undefined,
+        { shallow: true },
+      );
+    }
+    scrollRef?.current?.scrollIntoView();
+  }, [ router, scrollRef, hash, data.table.table_id ]);
+
+  const handleFilterChange = React.useCallback((field: keyof AddressMudRecordsFilter) => (val: string) => {
+    setFilters(prev => {
+      const newVal = { ...prev };
+      newVal[field] = val;
+      return newVal;
+    });
+  }, [ setFilters ]);
+
+  const onKeySortClick = React.useCallback(
+    (e: React.MouseEvent) => toggleSorting('key' + e.currentTarget.getAttribute('data-id') as AddressMudRecordsSorting['sort']),
+    [ toggleSorting ],
+  );
+
+  const keyBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  React.useEffect(() => {
+    if (hasCut && !colsCutCount && containerRef.current) {
+      const count = Math.floor((containerRef.current.getBoundingClientRect().width - CUT_COL_WIDTH) / COL_MIN_WIDTH);
+      if (totalColsCut > MIN_CUT_COUNT && count - 1 < totalColsCut) {
+        setColsCutCount(count - 1);
+      } else {
+        setHasCut.off();
+      }
+    }
+  }, [ colsCutCount, data.schema, hasCut, setHasCut, totalColsCut ]);
+
+  const colW = isMobile ? COL_MIN_WIDTH_MOBILE : COL_MIN_WIDTH;
+
+  const keys = (isOpened || !hasCut) ? data.schema.key_names : data.schema.key_names.slice(0, colsCutCount);
+  const values = (isOpened || !hasCut) ? data.schema.value_names : data.schema.value_names.slice(0, colsCutCount - data.schema.key_names.length);
+  const colsCount = (isOpened || !hasCut) ? totalColsCut : colsCutCount;
+
+  const tdStyles: StyleProps = {
+    wordBreak: 'break-word',
+    whiteSpace: 'normal',
+    minW: `${ colW }px`,
+    w: `${ 100 / colsCount }%`,
+    verticalAlign: 'top',
+    lineHeight: '20px',
+  };
+
+  const hasHorizontalScroll = isMobile || isOpened;
+
+  if (hasCut && !colsCutCount) {
+    return <Box w="100%" ref={ containerRef }></Box>;
+  }
+
+  const cutButton = (
+    <Th width={ `${ CUT_COL_WIDTH }px ` } verticalAlign="baseline">
+      <Tooltip label={ isOpened ? 'Hide columns' : 'Show all columns' }>
+        <Link onClick={ toggleIsOpen } aria-label="show/hide columns">...</Link>
+      </Tooltip>
+    </Th>
+  );
+
+  return (
+    // can't implement both horizontal table scroll and sticky header
+    <Box maxW="100%" overflowX={ hasHorizontalScroll ? 'scroll' : 'unset' } whiteSpace="nowrap" ref={ tableRef }>
+      <Table style={{ tableLayout: 'fixed' }}>
+        <Thead top={ hasHorizontalScroll ? 0 : top } display={ hasHorizontalScroll ? 'table' : 'table-header-group' } w="100%">
+          <Tr >
+            { keys.map((keyName, index) => {
+              const text = getNameTypeText(keyName, data.schema.key_types[index]);
+              return (
+                <Th key={ keyName } { ...tdStyles }>
+                  { index < 2 ? (
+                    <Flex alignItems="center">
+                      <Link
+                        onClick={ onKeySortClick }
+                        data-id={ index }
+                        display="flex"
+                        alignItems="start"
+                        lineHeight="20px"
+                        mr={ 2 }
+                      >
+                        { sorting?.sort === `key${ index }` && sorting.order && (
+                          <Box minW="24px" w="24px" mr={ 2 }>
+                            <IconSvg
+                              name="arrows/east"
+                              boxSize={ 5 }
+                              transform={ sorting.order === 'asc' ? 'rotate(-90deg)' : 'rotate(90deg)' }
+                            />
+                          </Box>
+                        ) }
+                        { text }
+                      </Link>
+                      <Box minW="20px" w="20px">
+                        <AddressMudRecordsKeyFilter
+                          value={ filters[index === 0 ? 'filter_key0' : 'filter_key1'] }
+                          title={ text }
+                          columnName={ keyName }
+                          handleFilterChange={ handleFilterChange(index === 0 ? 'filter_key0' : 'filter_key1') }
+                        />
+                      </Box>
+                    </Flex>
+                  ) : text }
+                </Th>
+              );
+            }) }
+            { values.map((valName, index) => (
+              <Th key={ valName } { ...tdStyles }>
+                { capitalizeFirstLetter(valName) } ({ data.schema.value_types[index] })
+              </Th>
+            )) }
+            { hasCut && !isOpened && cutButton }
+            <Th { ...tdStyles } w={ `${ colW }px` }>Modified</Th>
+            { hasCut && isOpened && cutButton }
+          </Tr>
+        </Thead>
+        <Tbody display={ hasHorizontalScroll ? 'table' : 'table-row-group' } w="100%">
+          { data.items.map((item) => (
+            <Tr key={ item.id }>
+              { keys.map((keyName, index) => (
+                <Td key={ keyName } backgroundColor={ keyBgColor } { ...tdStyles }>
+                  { index === 0 ? (
+                    <LinkInternal
+                      onClick={ onRecordClick }
+                      data-id={ item.id }
+                      fontWeight={ 700 }
+                      href={ route({ pathname: '/address/[hash]', query: { hash, tab: 'mud', table_id: data.table.table_id, record_id: item.id } }) }
+                    >
+                      { getValueString(item.decoded[keyName]) }
+                    </LinkInternal>
+                  ) : getValueString(item.decoded[keyName]) }
+                  <CopyToClipboard text={ item.decoded[keyName] }/>
+                </Td>
+              )) }
+              { values.map((valName) =>
+                <Td key={ valName } { ...tdStyles }>{ getValueString(item.decoded[valName]) }</Td>) }
+              { hasCut && !isOpened && <Td width={ `${ CUT_COL_WIDTH }px ` }></Td> }
+              <Td { ...tdStyles } color="text_secondary" w={ `${ colW }px` }>{ dayjs(item.timestamp).format('lll') }</Td>
+              { hasCut && isOpened && <Td width={ `${ CUT_COL_WIDTH }px ` }></Td> }
+            </Tr>
+          )) }
+        </Tbody>
+      </Table>
+    </Box>
+  );
+};
+
+export default AddressMudRecordsTable;
diff --git a/ui/address/mud/AddressMudTable.pw.tsx b/ui/address/mud/AddressMudTable.pw.tsx
new file mode 100644
index 0000000000..a5e5b1116c
--- /dev/null
+++ b/ui/address/mud/AddressMudTable.pw.tsx
@@ -0,0 +1,59 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { mudRecords } from 'mocks/mud/mudTables';
+import { test, expect } from 'playwright/lib';
+
+import AddressMudTable from './AddressMudTable';
+
+const ADDRESS_HASH = 'hash';
+const TABLE_ID = '123';
+const hooksConfig = {
+  router: {
+    query: { hash: ADDRESS_HASH },
+  },
+};
+
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address_mud_records', mudRecords, { pathParams: { hash: ADDRESS_HASH, table_id: TABLE_ID } });
+
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
+      <AddressMudTable tableId={ TABLE_ID }/>
+    </Box>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('expanded view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address_mud_records', mudRecords, { pathParams: { hash: ADDRESS_HASH, table_id: TABLE_ID } });
+
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
+      <AddressMudTable tableId={ TABLE_ID }/>
+    </Box>,
+    { hooksConfig },
+  );
+
+  await component.locator('a[aria-label="show/hide columns"]').first().click();
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('empty +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse(
+    'address_mud_records',
+    { ...mudRecords, items: [] },
+    { pathParams: { hash: ADDRESS_HASH, table_id: TABLE_ID } });
+
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
+      <AddressMudTable tableId={ TABLE_ID }/>
+    </Box>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/mud/AddressMudTable.tsx b/ui/address/mud/AddressMudTable.tsx
new file mode 100644
index 0000000000..0b23c58978
--- /dev/null
+++ b/ui/address/mud/AddressMudTable.tsx
@@ -0,0 +1,164 @@
+import { Box, HStack, Tag, TagCloseButton, chakra, useBoolean } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { AddressMudRecordsFilter, AddressMudRecordsSorting } from 'types/api/address';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import { apos, nbsp } from 'lib/html-entities';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import ContentLoader from 'ui/shared/ContentLoader';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import { getNextOrderValue } from 'ui/shared/sort/getNextSortValue';
+import getSortParamsFromQuery from 'ui/shared/sort/getSortParamsFromQuery';
+
+import AddressMudBreadcrumbs from './AddressMudBreadcrumbs';
+import AddressMudRecordsTable from './AddressMudRecordsTable';
+import { getNameTypeText, SORT_SEQUENCE } from './utils';
+
+const BREADCRUMBS_HEIGHT = 60;
+const FILTERS_HEIGHT = 44;
+
+type Props = {
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  isQueryEnabled?: boolean;
+  tableId: string;
+};
+
+type FilterKeys = keyof AddressMudRecordsFilter;
+
+const AddressMudTable = ({ scrollRef, tableId, isQueryEnabled = true }: Props) => {
+  const router = useRouter();
+  const [ sorting, setSorting ] =
+    React.useState<AddressMudRecordsSorting | undefined>(getSortParamsFromQuery<AddressMudRecordsSorting>(router.query, SORT_SEQUENCE));
+  const [ filters, setFilters ] = React.useState<AddressMudRecordsFilter>({});
+  const isMobile = useIsMobile();
+  const [ tableHasHorizontalScroll, setTableHasHorizontalScroll ] = useBoolean(isMobile);
+
+  const hash = getQueryParamString(router.query.hash);
+
+  const { data, isLoading, isError, pagination, onSortingChange } = useQueryWithPages({
+    resourceName: 'address_mud_records',
+    pathParams: { hash, table_id: tableId },
+    filters,
+    sorting,
+    scrollRef,
+    options: {
+      // no placeholder data because the structure of a table is unpredictable
+      enabled: isQueryEnabled,
+    },
+  });
+
+  const toggleSorting = React.useCallback((val: AddressMudRecordsSorting['sort']) => {
+    const newSorting = { sort: val, order: getNextOrderValue(sorting?.sort === val ? sorting.order : undefined) };
+    setSorting(newSorting);
+    onSortingChange(newSorting);
+  }, [ onSortingChange, sorting ]);
+
+  const onRemoveFilterClick = React.useCallback((key: FilterKeys) => () => {
+    setFilters(prev => {
+      const newFilters = { ...prev };
+      delete newFilters[key];
+      return newFilters;
+    });
+  }, []);
+
+  const hasActiveFilters = Object.values(filters).some(Boolean);
+
+  const actionBarHeight = React.useMemo(() => {
+    const heightWithoutFilters = pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : BREADCRUMBS_HEIGHT;
+
+    return hasActiveFilters ? heightWithoutFilters + FILTERS_HEIGHT : heightWithoutFilters;
+  }, [ pagination.isVisible, hasActiveFilters ]);
+
+  if (isLoading) {
+    return <ContentLoader/>;
+  }
+
+  const filtersTags = hasActiveFilters ? (
+    <HStack gap={ 3 } mb={ 1 } flexWrap="wrap">
+      { Object.entries(filters).map(([ key, value ]) => {
+        const index = key as FilterKeys === 'filter_key0' ? 0 : 1;
+        return (
+          <Tag display="inline-flex" key={ key } maxW="360px" colorScheme="blue">
+            <chakra.span color="text_secondary" >{
+              getNameTypeText(data?.schema.key_names[index] || '', data?.schema.key_types[index] || '') }
+            </chakra.span>
+            <chakra.span color="text" overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">
+              { nbsp }
+              { value }
+            </chakra.span>
+            <TagCloseButton onClick={ onRemoveFilterClick(key as FilterKeys) }/>
+          </Tag>
+        );
+      }) }
+    </HStack>
+  ) : null;
+
+  const breadcrumbs = data ? (
+    <AddressMudBreadcrumbs
+      hash={ hash }
+      tableId={ tableId }
+      tableName={ data?.table.table_full_name }
+      scrollRef={ scrollRef }
+      mb={ hasActiveFilters ? 4 : 0 }
+    />
+  ) : null;
+
+  const actionBar = (!isMobile || hasActiveFilters || pagination.isVisible) && (
+    <ActionBar mt={ -6 } showShadow={ tableHasHorizontalScroll } justifyContent="space-between" alignItems={ hasActiveFilters ? 'start' : 'center' }>
+      <Box>
+        { !isMobile && breadcrumbs }
+        { filtersTags }
+      </Box>
+      <Pagination ml={{ base: 0, lg: 8 }} { ...pagination }/>
+    </ActionBar>
+  );
+
+  const content = data?.items ? (
+    <AddressMudRecordsTable
+      data={ data }
+      top={ actionBarHeight }
+      sorting={ sorting }
+      toggleSorting={ toggleSorting }
+      setFilters={ setFilters }
+      filters={ filters }
+      toggleTableHasHorizontalScroll={ setTableHasHorizontalScroll.toggle }
+      scrollRef={ scrollRef }
+      hash={ hash }
+    />
+  ) : null;
+
+  const emptyText = (
+    <>
+      <chakra.span>There are no records for </chakra.span>
+      { data?.table.table_full_name ? <chakra.span fontWeight={ 600 }>{ data?.table.table_full_name }</chakra.span> : 'this table' }
+    </>
+  );
+
+  return (
+    <>
+      { isMobile && (
+        <Box mb={ 6 }>{ breadcrumbs }</Box>
+      ) }
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText={ emptyText }
+        filterProps={{
+          emptyFilteredText: `Couldn${ apos }t find records that match your filter query.`,
+          hasActiveFilters: Object.values(filters).some(Boolean),
+        }}
+        content={ content }
+        actionBar={ actionBar }
+        showActionBarIfEmpty={ !isMobile }
+        mt={ data?.items.length ? 0 : 2 }
+      />
+    </>
+  );
+};
+
+export default AddressMudTable;
diff --git a/ui/address/mud/AddressMudTables.pw.tsx b/ui/address/mud/AddressMudTables.pw.tsx
new file mode 100644
index 0000000000..b9bdbabd5f
--- /dev/null
+++ b/ui/address/mud/AddressMudTables.pw.tsx
@@ -0,0 +1,42 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { mudTables } from 'mocks/mud/mudTables';
+import { test, expect } from 'playwright/lib';
+
+import AddressMudTables from './AddressMudTables';
+
+const ADDRESS_HASH = 'hash';
+const hooksConfig = {
+  router: {
+    query: { hash: ADDRESS_HASH, q: 'o' },
+  },
+};
+
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address_mud_tables', mudTables, { pathParams: { hash: ADDRESS_HASH }, queryParams: { q: 'o' } });
+
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
+      <AddressMudTables/>
+    </Box>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('with schema opened +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address_mud_tables', mudTables, { pathParams: { hash: ADDRESS_HASH }, queryParams: { q: 'o' } });
+
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
+      <AddressMudTables/>
+    </Box>,
+    { hooksConfig },
+  );
+
+  await component.locator('div[aria-label="View schema"]').first().click();
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/mud/AddressMudTables.tsx b/ui/address/mud/AddressMudTables.tsx
new file mode 100644
index 0000000000..3d1a73aad6
--- /dev/null
+++ b/ui/address/mud/AddressMudTables.tsx
@@ -0,0 +1,107 @@
+import { Hide, Show } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import useDebounce from 'lib/hooks/useDebounce';
+import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
+import { apos } from 'lib/html-entities';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { ADDRESS_MUD_TABLE_ITEM } from 'stubs/address';
+import { generateListStub } from 'stubs/utils';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import FilterInput from 'ui/shared/filters/FilterInput';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+
+import AddressMudTablesListItem from './AddressMudTablesListItem';
+import AddressMudTablesTable from './AddressMudTablesTable';
+
+type Props = {
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  isQueryEnabled?: boolean;
+};
+
+const AddressMudTables = ({ scrollRef, isQueryEnabled = true }: Props) => {
+  const router = useRouter();
+
+  const hash = getQueryParamString(router.query.hash);
+  const q = getQueryParamString(router.query.q);
+  const [ searchTerm, setSearchTerm ] = React.useState<string>(q || '');
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+
+  const { data, isPlaceholderData, isError, pagination } = useQueryWithPages({
+    resourceName: 'address_mud_tables',
+    pathParams: { hash },
+    filters: { q: debouncedSearchTerm },
+    scrollRef,
+    options: {
+      enabled: isQueryEnabled,
+      placeholderData: generateListStub<'address_mud_tables'>(ADDRESS_MUD_TABLE_ITEM, 3, { next_page_params: {
+        items_count: 50,
+        table_id: '1',
+      } }),
+    },
+  });
+
+  const isInitialLoading = useIsInitialLoading(isPlaceholderData);
+
+  const searchInput = (
+    <FilterInput
+      w={{ base: '100%', lg: '360px' }}
+      minW={{ base: 'auto', lg: '250px' }}
+      size="xs"
+      onChange={ setSearchTerm }
+      placeholder="Search by name, namespace or table ID..."
+      initialValue={ searchTerm }
+      isLoading={ isInitialLoading }
+    />
+  );
+
+  const actionBar = (
+    <ActionBar mt={ -6 } showShadow justifyContent="space-between">
+      { searchInput }
+      <Pagination ml={{ base: 0, lg: 8 }} { ...pagination }/>
+    </ActionBar>
+  );
+
+  const content = data?.items ? (
+    <>
+      <Hide below="lg" ssr={ false }>
+        <AddressMudTablesTable
+          items={ data.items }
+          isLoading={ isPlaceholderData }
+          top={ ACTION_BAR_HEIGHT_DESKTOP }
+          scrollRef={ scrollRef }
+          hash={ hash }
+        />
+      </Hide>
+      <Show below="lg" ssr={ false }>
+        { data.items.map((item, index) => (
+          <AddressMudTablesListItem
+            key={ item.table.table_id + (isPlaceholderData ? String(index) : '') }
+            item={ item }
+            isLoading={ isPlaceholderData }
+            hash={ hash }
+          />
+        )) }
+      </Show>
+    </>
+  ) : null;
+
+  return (
+    <DataListDisplay
+      isError={ isError }
+      items={ data?.items }
+      emptyText="There are no tables for this address."
+      filterProps={{
+        emptyFilteredText: `Couldn${ apos }t find tables that match your filter query.`,
+        hasActiveFilters: Boolean(searchTerm),
+      }}
+      content={ content }
+      actionBar={ actionBar }
+    />
+  );
+};
+
+export default AddressMudTables;
diff --git a/ui/address/mud/AddressMudTablesListItem.tsx b/ui/address/mud/AddressMudTablesListItem.tsx
new file mode 100644
index 0000000000..e3e5aa74bd
--- /dev/null
+++ b/ui/address/mud/AddressMudTablesListItem.tsx
@@ -0,0 +1,114 @@
+import { Divider, Text, Skeleton, useBoolean, Flex, Link, VStack, chakra, Box, Grid, GridItem } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { AddressMudTableItem } from 'types/api/address';
+
+import { route } from 'nextjs-routes';
+
+import Tag from 'ui/shared/chakra/Tag';
+import HashStringShorten from 'ui/shared/HashStringShorten';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+
+type Props = {
+  item: AddressMudTableItem;
+  isLoading: boolean;
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  hash: string;
+};
+
+const AddressMudTablesListItem = ({ item, isLoading, scrollRef, hash }: Props) => {
+  const [ isOpened, setIsOpened ] = useBoolean(false);
+
+  const router = useRouter();
+
+  const onTableClick = React.useCallback((e: React.MouseEvent) => {
+    if (e.metaKey || e.ctrlKey) {
+      // Allow opening in a new tab/window with right-click or ctrl/cmd+click
+      return;
+    }
+
+    e.preventDefault();
+
+    const tableId = e.currentTarget.getAttribute('data-id');
+    if (tableId) {
+      router.push(
+        { pathname: '/address/[hash]', query: { hash, tab: 'mud', table_id: tableId } },
+        undefined,
+        { shallow: true },
+      );
+    }
+
+    scrollRef?.current?.scrollIntoView();
+  }, [ router, scrollRef, hash ]);
+
+  return (
+    <ListItemMobile rowGap={ 3 } fontSize="sm" py={ 3 }>
+      <Flex w="100%">
+        <Skeleton isLoaded={ !isLoading }>
+          <Link display="block">
+            <IconSvg
+              name="arrows/east-mini"
+              transform={ isOpened ? 'rotate(270deg)' : 'rotate(180deg)' }
+              boxSize={ 6 }
+              cursor="pointer"
+              onClick={ setIsOpened.toggle }
+              transitionDuration="faster"
+              aria-label="View schema"
+            />
+          </Link>
+        </Skeleton>
+        <Box flexGrow="1">
+          <Flex justifyContent="space-between" height={ 6 } alignItems="center" mb={ 3 }>
+            <Skeleton isLoaded={ !isLoading }>
+              <LinkInternal
+                onClick={ onTableClick }
+                data-id={ item.table.table_id }
+                fontWeight={ 500 }
+                href={ route({ pathname: '/address/[hash]', query: { hash, tab: 'mud', table_id: item.table.table_id } }) }
+              >
+                { item.table.table_full_name }
+              </LinkInternal>
+            </Skeleton>
+            <Skeleton isLoaded={ !isLoading } color="text_secondary">
+              { item.table.table_type }
+            </Skeleton>
+          </Flex>
+          <Skeleton isLoaded={ !isLoading } color="text_secondary">
+            <HashStringShorten hash={ item.table.table_id } type="long"/>
+          </Skeleton>
+        </Box>
+      </Flex>
+
+      { isOpened && (
+        <Grid templateColumns="48px 1fr" gap="8px 24px" fontWeight={ 500 } w="100%">
+          { Boolean(item.schema.key_names.length) && (
+            <>
+              <Text lineHeight="24px">Key</Text>
+              <VStack gap={ 1 } alignItems="start">
+                { item.schema.key_names.map((name, index) => (
+                  <Tag key={ name }>
+                    <chakra.span fontWeight={ 700 }>{ item.schema.key_types[index] }</chakra.span> { name }
+                  </Tag>
+                )) }
+              </VStack>
+            </>
+          ) }
+          <GridItem colSpan={ 2 }><Divider/></GridItem>
+          <Text lineHeight="24px">Value</Text>
+          <VStack gap={ 1 } alignItems="start">
+            { item.schema.value_names.map((name, index) => (
+              <Text key={ name }>
+                <chakra.span fontWeight={ 700 }>{ item.schema.value_types[index] }</chakra.span> { name }
+              </Text>
+            )) }
+          </VStack>
+        </Grid>
+      ) }
+    </ListItemMobile>
+  );
+};
+
+export default React.memo(AddressMudTablesListItem);
diff --git a/ui/address/mud/AddressMudTablesTable.tsx b/ui/address/mud/AddressMudTablesTable.tsx
new file mode 100644
index 0000000000..9d21f23f45
--- /dev/null
+++ b/ui/address/mud/AddressMudTablesTable.tsx
@@ -0,0 +1,45 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressMudTables } from 'types/api/address';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import AddressMudTablesTableItem from './AddressMudTablesTableItem';
+
+type Props = {
+  items: AddressMudTables['items'];
+  isLoading: boolean;
+  top: number;
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  hash: string;
+};
+
+//sorry for the naming
+const AddressMudTablesTable = ({ items, isLoading, top, scrollRef, hash }: Props) => {
+  return (
+    <Table style={{ tableLayout: 'auto' }}>
+      <Thead top={ top }>
+        <Tr>
+          <Th width="24px"></Th>
+          <Th>Full name</Th>
+          <Th>Table ID</Th>
+          <Th>Type</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <AddressMudTablesTableItem
+            key={ item.table.table_id + (isLoading ? String(index) : '') }
+            item={ item }
+            isLoading={ isLoading }
+            scrollRef={ scrollRef }
+            hash={ hash }
+          />
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default AddressMudTablesTable;
diff --git a/ui/address/mud/AddressMudTablesTableItem.tsx b/ui/address/mud/AddressMudTablesTableItem.tsx
new file mode 100644
index 0000000000..66d72a2a48
--- /dev/null
+++ b/ui/address/mud/AddressMudTablesTableItem.tsx
@@ -0,0 +1,124 @@
+import { Td, Tr, Text, Skeleton, useBoolean, Link, Table, VStack, chakra } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { AddressMudTableItem } from 'types/api/address';
+
+import { route } from 'nextjs-routes';
+
+import Tag from 'ui/shared/chakra/Tag';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+type Props = {
+  item: AddressMudTableItem;
+  isLoading: boolean;
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  hash: string;
+};
+
+const AddressMudTablesTableItem = ({ item, isLoading, scrollRef, hash }: Props) => {
+  const [ isOpened, setIsOpened ] = useBoolean(false);
+
+  const router = useRouter();
+
+  const onTableClick = React.useCallback((e: React.MouseEvent) => {
+    if (e.metaKey || e.ctrlKey) {
+      // Allow opening in a new tab/window with right-click or ctrl/cmd+click
+      return;
+    }
+
+    e.preventDefault();
+
+    const tableId = e.currentTarget.getAttribute('data-id');
+    if (tableId) {
+      router.push(
+        { pathname: '/address/[hash]', query: { hash, tab: 'mud', table_id: tableId } },
+        undefined,
+        { shallow: true },
+      );
+    }
+    scrollRef?.current?.scrollIntoView();
+  }, [ router, scrollRef, hash ]);
+
+  return (
+    <>
+      <Tr borderBottomStyle={ isOpened ? 'hidden' : 'unset' }>
+        <Td verticalAlign="middle">
+          <Skeleton isLoaded={ !isLoading }>
+            <Link display="block">
+              <IconSvg
+                name="arrows/east-mini"
+                transform={ isOpened ? 'rotate(270deg)' : 'rotate(180deg)' }
+                boxSize={ 6 }
+                cursor="pointer"
+                onClick={ setIsOpened.toggle }
+                transitionDuration="faster"
+                aria-label="View schema"
+              />
+            </Link>
+          </Skeleton>
+        </Td>
+        <Td verticalAlign="middle">
+          <Skeleton isLoaded={ !isLoading }>
+            <LinkInternal
+              href={ route({ pathname: '/address/[hash]', query: { hash, tab: 'mud', table_id: item.table.table_id } }) }
+              data-id={ item.table.table_id }
+              onClick={ onTableClick }
+              fontWeight={ 700 }
+            >
+              { item.table.table_full_name }
+            </LinkInternal>
+          </Skeleton>
+        </Td>
+        <Td verticalAlign="middle">
+          <Skeleton isLoaded={ !isLoading }>
+            { item.table.table_id }
+          </Skeleton>
+        </Td>
+        <Td verticalAlign="middle">
+          <Skeleton isLoaded={ !isLoading }>
+            { item.table.table_type }
+          </Skeleton>
+        </Td>
+      </Tr>
+      { isOpened && (
+        <Tr>
+          <Td pt={ 0 }></Td>
+          <Td colSpan={ 3 } pt={ 0 }>
+            <Table>
+              { Boolean(item.schema.key_names.length) && (
+                <Tr>
+                  <Td width="80px" fontSize="sm" fontWeight={ 600 } py={ 2 } pl={ 0 } verticalAlign="middle">Key</Td>
+                  <Td py={ 2 }>
+                    <VStack gap={ 1 } alignItems="start">
+                      { item.schema.key_names.map((name, index) => (
+                        <Tag key={ name }>
+                          <chakra.span fontWeight={ 700 }>{ item.schema.key_types[index] }</chakra.span> { name }
+                        </Tag>
+                      )) }
+                    </VStack>
+                  </Td>
+                </Tr>
+              ) }
+              <Tr borderBottomStyle="hidden">
+                <Td width="80px" fontSize="sm" fontWeight={ 600 } py={ 2 } pl={ 0 } >Value</Td>
+                <Td fontSize="sm" py={ 2 }>
+                  <VStack gap={ 1 } alignItems="start">
+                    { item.schema.value_names.map((name, index) => (
+                      <Text key={ name }>
+                        <chakra.span fontWeight={ 700 }>{ item.schema.value_types[index] }</chakra.span> { name }
+                      </Text>
+                    )) }
+                  </VStack>
+                </Td>
+              </Tr>
+            </Table>
+          </Td>
+        </Tr>
+      ) }
+    </>
+  );
+};
+
+export default React.memo(AddressMudTablesTableItem);
diff --git a/ui/address/mud/__screenshots__/AddressMudRecord.pw.tsx_default_base-view-1.png b/ui/address/mud/__screenshots__/AddressMudRecord.pw.tsx_default_base-view-1.png
new file mode 100644
index 0000000000..9d06d9d724
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudRecord.pw.tsx_default_base-view-1.png differ
diff --git a/ui/address/mud/__screenshots__/AddressMudRecord.pw.tsx_default_mobile-base-view-1.png b/ui/address/mud/__screenshots__/AddressMudRecord.pw.tsx_default_mobile-base-view-1.png
new file mode 100644
index 0000000000..2a26f23f1c
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudRecord.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_default_base-view-mobile-1.png b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..957801fc71
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_default_empty-mobile-1.png b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_default_empty-mobile-1.png
new file mode 100644
index 0000000000..98d02d1309
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_default_empty-mobile-1.png differ
diff --git a/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_default_expanded-view-mobile-1.png b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_default_expanded-view-mobile-1.png
new file mode 100644
index 0000000000..2500a668a3
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_default_expanded-view-mobile-1.png differ
diff --git a/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_mobile_base-view-mobile-1.png b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..c53de56964
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_mobile_empty-mobile-1.png b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_mobile_empty-mobile-1.png
new file mode 100644
index 0000000000..505eea1ef6
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_mobile_empty-mobile-1.png differ
diff --git a/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_mobile_expanded-view-mobile-1.png b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_mobile_expanded-view-mobile-1.png
new file mode 100644
index 0000000000..1b8a8c500a
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_mobile_expanded-view-mobile-1.png differ
diff --git a/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_default_base-view-mobile-1.png b/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..8bee44beb6
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_default_with-schema-opened-mobile-1.png b/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_default_with-schema-opened-mobile-1.png
new file mode 100644
index 0000000000..4698597b85
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_default_with-schema-opened-mobile-1.png differ
diff --git a/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_mobile_base-view-mobile-1.png b/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..d8c124a586
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_mobile_with-schema-opened-mobile-1.png b/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_mobile_with-schema-opened-mobile-1.png
new file mode 100644
index 0000000000..99e2ae3301
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_mobile_with-schema-opened-mobile-1.png differ
diff --git a/ui/address/mud/utils.ts b/ui/address/mud/utils.ts
new file mode 100644
index 0000000000..259926daac
--- /dev/null
+++ b/ui/address/mud/utils.ts
@@ -0,0 +1,18 @@
+import capitalizeFirstLetter from 'lib/capitalizeFirstLetter';
+
+export const SORT_SEQUENCE: Record<'key0' | 'key1', Array<'desc' | 'asc' | undefined>> = {
+  key0: [ 'desc', 'asc', undefined ],
+  key1: [ 'desc', 'asc', undefined ],
+};
+
+export const getNameTypeText = (name: string, type: string) => {
+  return capitalizeFirstLetter(name) + ' (' + type + ')';
+};
+
+export const getValueString = (value: string | Array<string>) => {
+  if (Array.isArray(value)) {
+    return value.join(', ');
+  }
+
+  return value.toString();
+};
diff --git a/ui/address/testUtils/MockAddressPage.tsx b/ui/address/testUtils/MockAddressPage.tsx
index d6bcc1139c..5e39c1610c 100644
--- a/ui/address/testUtils/MockAddressPage.tsx
+++ b/ui/address/testUtils/MockAddressPage.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
 
-const MockAddressPage = ({ children }: { children: JSX.Element }): JSX.Element => {
+const MockAddressPage = ({ children }: { children: React.JSX.Element }): React.JSX.Element => {
   const router = useRouter();
 
   const { data } = useApiQuery('address', {
diff --git a/ui/address/tokenSelect/TokenSelect.pw.tsx b/ui/address/tokenSelect/TokenSelect.pw.tsx
index d2a810c981..e354233650 100644
--- a/ui/address/tokenSelect/TokenSelect.pw.tsx
+++ b/ui/address/tokenSelect/TokenSelect.pw.tsx
@@ -1,70 +1,43 @@
 import { Flex } from '@chakra-ui/react';
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import * as addressMock from 'mocks/address/address';
 import * as tokensMock from 'mocks/address/tokens';
 import { tokenInfoERC20a } from 'mocks/tokens/tokenInfo';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect, devices } from 'playwright/lib';
 import MockAddressPage from 'ui/address/testUtils/MockAddressPage';
 
 import TokenSelect from './TokenSelect';
 
 const ASSET_URL = tokenInfoERC20a.icon_url as string;
-const TOKENS_ERC20_API_URL = buildApiUrl('address_tokens', { hash: '1' }) + '?type=ERC-20';
-const TOKENS_ERC721_API_URL = buildApiUrl('address_tokens', { hash: '1' }) + '?type=ERC-721';
-const TOKENS_ER1155_API_URL = buildApiUrl('address_tokens', { hash: '1' }) + '?type=ERC-1155';
-const ADDRESS_API_URL = buildApiUrl('address', { hash: '1' });
+const ADDRESS_HASH = addressMock.hash;
 const hooksConfig = {
   router: {
-    query: { hash: '1' },
+    query: { hash: ADDRESS_HASH },
   },
 };
 const CLIPPING_AREA = { x: 0, y: 0, width: 360, height: 500 };
 
-const test = base.extend({
-  page: async({ page }, use) => {
-    await page.route(ASSET_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-    await page.route(ADDRESS_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ hash: '1' }),
-    }), { times: 1 });
-    await page.route(TOKENS_ERC20_API_URL, async(route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(tokensMock.erc20List),
-    }), { times: 1 });
-    await page.route(TOKENS_ERC721_API_URL, async(route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(tokensMock.erc721List),
-    }), { times: 1 });
-    await page.route(TOKENS_ER1155_API_URL, async(route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(tokensMock.erc1155List),
-    }), { times: 1 });
-
-    use(page);
-  },
+test.beforeEach(async({ mockApiResponse, mockAssetResponse }) => {
+  await mockAssetResponse(ASSET_URL, './playwright/mocks/image_s.jpg');
+  await mockApiResponse('address', addressMock.validator, { pathParams: { hash: ADDRESS_HASH }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc20List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-20' }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc721List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-721' }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc1155List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-1155' }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc404List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' }, times: 1 });
 });
 
-test('base view +@dark-mode', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <MockAddressPage>
-        <Flex>
-          <TokenSelect/>
-        </Flex>
-      </MockAddressPage>
-    </TestApp>,
+test('base view +@dark-mode', async({ render, page }) => {
+  await render(
+    <MockAddressPage>
+      <Flex>
+        <TokenSelect/>
+      </Flex>
+    </MockAddressPage>,
     { hooksConfig },
   );
 
   await page.getByRole('button', { name: /select/i }).click();
-  await page.getByText('USD Coin').hover();
 
   await expect(page).toHaveScreenshot({ clip: CLIPPING_AREA });
 
@@ -76,39 +49,35 @@ test('base view +@dark-mode', async({ mount, page }) => {
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  test('base view', async({ mount, page }) => {
-    await mount(
-      <TestApp>
-        <MockAddressPage>
-          <Flex>
-            <TokenSelect/>
-          </Flex>
-        </MockAddressPage>
-      </TestApp>,
+  test('base view', async({ render, page }) => {
+    await render(
+      <MockAddressPage>
+        <Flex>
+          <TokenSelect/>
+        </Flex>
+      </MockAddressPage>,
       { hooksConfig },
     );
 
     await page.getByRole('button', { name: /select/i }).click();
-    await page.getByText('USD Coin').hover();
 
     await expect(page).toHaveScreenshot();
   });
 });
 
-test('sort', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <MockAddressPage>
-        <Flex>
-          <TokenSelect/>
-        </Flex>
-      </MockAddressPage>
-    </TestApp>,
+test('sort', async({ render, page }) => {
+  await render(
+    <MockAddressPage>
+      <Flex>
+        <TokenSelect/>
+      </Flex>
+    </MockAddressPage>,
     { hooksConfig },
   );
   await page.getByRole('button', { name: /select/i }).click();
   await page.locator('a[aria-label="Sort ERC-20 tokens"]').click();
 
+  await page.mouse.wheel(0, -1000);
   await expect(page).toHaveScreenshot({ clip: CLIPPING_AREA });
 
   await page.mouse.move(100, 200);
@@ -118,15 +87,13 @@ test('sort', async({ mount, page }) => {
   await expect(page).toHaveScreenshot({ clip: CLIPPING_AREA });
 });
 
-test('filter', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <MockAddressPage>
-        <Flex>
-          <TokenSelect/>
-        </Flex>
-      </MockAddressPage>
-    </TestApp>,
+test('filter', async({ render, page }) => {
+  await render(
+    <MockAddressPage>
+      <Flex>
+        <TokenSelect/>
+      </Flex>
+    </MockAddressPage>,
     { hooksConfig },
   );
   await page.getByRole('button', { name: /select/i }).click();
@@ -135,38 +102,24 @@ test('filter', async({ mount, page }) => {
   await expect(page).toHaveScreenshot({ clip: CLIPPING_AREA });
 });
 
-base('long values', async({ mount, page }) => {
-  await page.route(ASSET_URL, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
-  await page.route(ADDRESS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ hash: '1' }),
-  }), { times: 1 });
-  await page.route(TOKENS_ERC20_API_URL, async(route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ items: [ tokensMock.erc20LongSymbol ] }),
-  }), { times: 1 });
-  await page.route(TOKENS_ERC721_API_URL, async(route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ items: [ tokensMock.erc721LongSymbol ] }),
-  }), { times: 1 });
-  await page.route(TOKENS_ER1155_API_URL, async(route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ items: [ tokensMock.erc1155LongId ] }),
-  }), { times: 1 });
-
-  await mount(
-    <TestApp>
-      <MockAddressPage>
-        <Flex>
-          <TokenSelect/>
-        </Flex>
-      </MockAddressPage>
-    </TestApp>,
+test('long values', async({ render, page, mockApiResponse }) => {
+  await mockApiResponse('address_tokens', {
+    items: [ tokensMock.erc20LongSymbol, tokensMock.erc20BigAmount ], next_page_params: null,
+  }, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-20' }, times: 1 });
+  await mockApiResponse('address_tokens', {
+    items: [ tokensMock.erc721LongSymbol ], next_page_params: null,
+  }, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-721' }, times: 1 });
+  await mockApiResponse('address_tokens', {
+    items: [ tokensMock.erc1155LongId ], next_page_params: null,
+  }, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-1155' }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc404List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' }, times: 1 });
+
+  await render(
+    <MockAddressPage>
+      <Flex>
+        <TokenSelect/>
+      </Flex>
+    </MockAddressPage>,
     { hooksConfig },
   );
   await page.getByRole('button', { name: /select/i }).click();
diff --git a/ui/address/tokenSelect/TokenSelect.tsx b/ui/address/tokenSelect/TokenSelect.tsx
index 3cada7e253..0bc02b17c6 100644
--- a/ui/address/tokenSelect/TokenSelect.tsx
+++ b/ui/address/tokenSelect/TokenSelect.tsx
@@ -55,7 +55,7 @@ const TokenSelect = ({ onClick }: Props) => {
   }
 
   return (
-    <Flex columnGap={ 3 } mt={{ base: '6px', lg: 0 }}>
+    <Flex columnGap={ 3 } mt={{ base: 1, lg: 0 }}>
       { isMobile ?
         <TokenSelectMobile data={ data } isLoading={ tokensIsFetching === 1 }/> :
         <TokenSelectDesktop data={ data } isLoading={ tokensIsFetching === 1 }/>
diff --git a/ui/address/tokenSelect/TokenSelectButton.tsx b/ui/address/tokenSelect/TokenSelectButton.tsx
index 67fb5b58f8..9662b20cc9 100644
--- a/ui/address/tokenSelect/TokenSelectButton.tsx
+++ b/ui/address/tokenSelect/TokenSelectButton.tsx
@@ -1,8 +1,9 @@
-import { Box, Button, Skeleton, Text, useColorModeValue } from '@chakra-ui/react';
+import { Box, Button, Skeleton, chakra, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import type { FormattedData } from './types';
 
+import { space } from 'lib/html-entities';
 import * as mixpanel from 'lib/mixpanel/index';
 import IconSvg from 'ui/shared/IconSvg';
 
@@ -38,11 +39,21 @@ const TokenSelectButton = ({ isOpen, isLoading, onClick, data }: Props, ref: Rea
         variant="outline"
         colorScheme="gray"
         onClick={ handleClick }
+        isActive={ isOpen }
         aria-label="Token select"
       >
         <IconSvg name="tokens" boxSize={ 4 } mr={ 2 }/>
-        <Text fontWeight={ 600 }>{ prefix }{ num }</Text>
-        <Text whiteSpace="pre" variant="secondary" fontWeight={ 400 }> ({ prefix }${ usd.toFormat(2) })</Text>
+        <chakra.span fontWeight={ 600 }>{ prefix }{ num }</chakra.span>
+        <chakra.span
+          whiteSpace="pre"
+          color="text_secondary"
+          fontWeight={ 400 }
+          maxW={{ base: 'calc(100vw - 230px)', lg: '500px' }}
+          overflow="hidden"
+          textOverflow="ellipsis"
+        >
+          { space }({ prefix }${ usd.toFormat(2) })
+        </chakra.span>
         <IconSvg name="arrows/east-mini" transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' } transitionDuration="faster" boxSize={ 5 } ml={ 3 }/>
       </Button>
       { isLoading && !isOpen && <Skeleton h="100%" w="100%" position="absolute" top={ 0 } left={ 0 } bgColor={ skeletonBgColor } borderRadius="base"/> }
diff --git a/ui/address/tokenSelect/TokenSelectDesktop.tsx b/ui/address/tokenSelect/TokenSelectDesktop.tsx
index 629fa5fda3..c354866114 100644
--- a/ui/address/tokenSelect/TokenSelectDesktop.tsx
+++ b/ui/address/tokenSelect/TokenSelectDesktop.tsx
@@ -1,8 +1,10 @@
-import { useColorModeValue, Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
+import { PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 
 import type { FormattedData } from './types';
 
+import Popover from 'ui/shared/chakra/Popover';
+
 import TokenSelectButton from './TokenSelectButton';
 import TokenSelectMenu from './TokenSelectMenu';
 import useTokenSelect from './useTokenSelect';
@@ -15,8 +17,6 @@ interface Props {
 const TokenSelectDesktop = ({ data, isLoading }: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
 
-  const bgColor = useColorModeValue('white', 'gray.900');
-
   const result = useTokenSelect(data);
 
   return (
@@ -25,7 +25,7 @@ const TokenSelectDesktop = ({ data, isLoading }: Props) => {
         <TokenSelectButton isOpen={ isOpen } onClick={ onToggle } data={ result.data } isLoading={ isLoading }/>
       </PopoverTrigger>
       <PopoverContent w="355px" maxH="450px" overflowY="scroll">
-        <PopoverBody px={ 4 } py={ 6 } bgColor={ bgColor } boxShadow="2xl" >
+        <PopoverBody px={ 4 } py={ 6 } boxShadow="2xl" >
           <TokenSelectMenu { ...result }/>
         </PopoverBody>
       </PopoverContent>
diff --git a/ui/address/tokenSelect/TokenSelectItem.tsx b/ui/address/tokenSelect/TokenSelectItem.tsx
index bd9b9ea007..94d12f24a5 100644
--- a/ui/address/tokenSelect/TokenSelectItem.tsx
+++ b/ui/address/tokenSelect/TokenSelectItem.tsx
@@ -1,11 +1,12 @@
-import { chakra, Flex, Text, useColorModeValue } from '@chakra-ui/react';
+import { chakra, Flex, useColorModeValue } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
+import getCurrencyValue from 'lib/getCurrencyValue';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
 import type { TokenEnhancedData } from '../utils/tokenUtils';
@@ -45,6 +46,25 @@ const TokenSelectItem = ({ data }: Props) => {
           </>
         );
       }
+      case 'ERC-404': {
+        return (
+          <>
+            { data.token_id !== null && (
+              <chakra.span textOverflow="ellipsis" overflow="hidden" mr={ 6 }>
+                #{ data.token_id || 0 }
+              </chakra.span>
+            ) }
+            { data.value !== null && (
+              <span>
+                { data.token.decimals ?
+                  getCurrencyValue({ value: data.value, decimals: data.token.decimals, accuracy: 2 }).valueStr :
+                  BigNumber(data.value).toFormat()
+                }
+              </span>
+            ) }
+          </>
+        );
+      }
     }
   })();
 
@@ -62,7 +82,7 @@ const TokenSelectItem = ({ data }: Props) => {
       _hover={{
         bgColor: useColorModeValue('blue.50', 'gray.800'),
       }}
-      color="initial"
+      color="unset"
       fontSize="sm"
       href={ url }
     >
@@ -73,8 +93,11 @@ const TokenSelectItem = ({ data }: Props) => {
           noCopy
           noLink
           fontWeight={ 700 }
+          mr={ 2 }
         />
-        { data.usd && <Text fontWeight={ 700 } ml="auto">${ data.usd.toFormat(2) }</Text> }
+        { data.usd && (
+          <TruncatedValue value={ `$${ data.usd.toFormat(2) }` } fontWeight={ 700 } minW="120px" ml="auto" textAlign="right"/>
+        ) }
       </Flex>
       <Flex alignItems="center" justifyContent="space-between" w="100%" whiteSpace="nowrap">
         { secondRow }
diff --git a/ui/address/tokenSelect/TokenSelectMenu.tsx b/ui/address/tokenSelect/TokenSelectMenu.tsx
index d247a0e3cd..41c8129d11 100644
--- a/ui/address/tokenSelect/TokenSelectMenu.tsx
+++ b/ui/address/tokenSelect/TokenSelectMenu.tsx
@@ -6,6 +6,7 @@ import React from 'react';
 import type { FormattedData } from './types';
 import type { TokenType } from 'types/api/token';
 
+import { getTokenTypeName } from 'lib/token/tokenTypes';
 import IconSvg from 'ui/shared/IconSvg';
 
 import type { Sort } from '../utils/tokenUtils';
@@ -16,14 +17,14 @@ interface Props {
   searchTerm: string;
   erc20sort: Sort;
   erc1155sort: Sort;
+  erc404sort: Sort;
   filteredData: FormattedData;
   onInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
   onSortClick: (event: React.SyntheticEvent) => void;
 }
 
-const TokenSelectMenu = ({ erc20sort, erc1155sort, filteredData, onInputChange, onSortClick, searchTerm }: Props) => {
+const TokenSelectMenu = ({ erc20sort, erc1155sort, erc404sort, filteredData, onInputChange, onSortClick, searchTerm }: Props) => {
   const searchIconColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
-  const inputBorderColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.200');
 
   const hasFilteredResult = _sumBy(Object.values(filteredData), ({ items }) => items.length) > 0;
 
@@ -38,20 +39,22 @@ const TokenSelectMenu = ({ erc20sort, erc1155sort, filteredData, onInputChange,
           placeholder="Search by token name"
           ml="1px"
           onChange={ onInputChange }
-          borderColor={ inputBorderColor }
+          bgColor="dialog_bg"
         />
       </InputGroup>
       <Flex flexDir="column" rowGap={ 6 }>
         { Object.entries(filteredData).sort(sortTokenGroups).map(([ tokenType, tokenInfo ]) => {
-
           if (tokenInfo.items.length === 0) {
             return null;
           }
 
           const type = tokenType as TokenType;
-          const arrowTransform = (type === 'ERC-1155' && erc1155sort === 'desc') || (type === 'ERC-20' && erc20sort === 'desc') ?
-            'rotate(90deg)' :
-            'rotate(-90deg)';
+          const arrowTransform =
+            (type === 'ERC-1155' && erc1155sort === 'desc') ||
+            (type === 'ERC-404' && erc404sort === 'desc') ||
+            (type === 'ERC-20' && erc20sort === 'desc') ?
+              'rotate(90deg)' :
+              'rotate(-90deg)';
           const sortDirection: Sort = (() => {
             switch (type) {
               case 'ERC-1155':
@@ -62,15 +65,20 @@ const TokenSelectMenu = ({ erc20sort, erc1155sort, filteredData, onInputChange,
                 return 'desc';
             }
           })();
-          const hasSort = type === 'ERC-1155' || (type === 'ERC-20' && tokenInfo.items.some(({ usd }) => usd));
+          const hasSort =
+            (type === 'ERC-404' && tokenInfo.items.some(item => item.value)) ||
+            type === 'ERC-1155' ||
+            (type === 'ERC-20' && tokenInfo.items.some(({ usd }) => usd));
           const numPrefix = tokenInfo.isOverflow ? '>' : '';
 
           return (
             <Box key={ type }>
               <Flex justifyContent="space-between">
-                <Text mb={ 3 } color="gray.500" fontWeight={ 600 } fontSize="sm">{ type } tokens ({ numPrefix }{ tokenInfo.items.length })</Text>
+                <Text mb={ 3 } color="gray.500" fontWeight={ 600 } fontSize="sm">
+                  { getTokenTypeName(type) } tokens ({ numPrefix }{ tokenInfo.items.length })
+                </Text>
                 { hasSort && (
-                  <Link data-type={ type } onClick={ onSortClick } aria-label={ `Sort ${ type } tokens` }>
+                  <Link data-type={ type } onClick={ onSortClick } aria-label={ `Sort ${ getTokenTypeName(type) } tokens` }>
                     <IconSvg name="arrows/east" boxSize={ 5 } transform={ arrowTransform } transitionDuration="faster"/>
                   </Link>
                 ) }
diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
index 9dba7e43bb..bcf909abb9 100644
Binary files a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-2.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-2.png
index 0079d7d3db..e37cc05502 100644
Binary files a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-2.png and b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-2.png differ
diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-1.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-1.png
index 6b7fa96751..a566383356 100644
Binary files a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-1.png and b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-2.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-2.png
index 464e028a1c..d84b120d53 100644
Binary files a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-2.png and b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-2.png differ
diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_filter-1.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_filter-1.png
index f2151d30c1..29f3efdf59 100644
Binary files a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_filter-1.png and b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_filter-1.png differ
diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_long-values-1.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_long-values-1.png
index 523b23617f..27520e990e 100644
Binary files a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_long-values-1.png and b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_long-values-1.png differ
diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_mobile-base-view-1.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_mobile-base-view-1.png
index 98ab4ea3a3..74a69703ff 100644
Binary files a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_mobile-base-view-1.png and b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-1.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-1.png
index c276436451..76a799de19 100644
Binary files a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-1.png and b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-1.png differ
diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-2.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-2.png
index 10c6465fa7..5f83b97aad 100644
Binary files a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-2.png and b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-2.png differ
diff --git a/ui/address/tokenSelect/useTokenSelect.ts b/ui/address/tokenSelect/useTokenSelect.ts
index da268d248e..95346e25c3 100644
--- a/ui/address/tokenSelect/useTokenSelect.ts
+++ b/ui/address/tokenSelect/useTokenSelect.ts
@@ -10,6 +10,7 @@ import { filterTokens } from '../utils/tokenUtils';
 export default function useTokenSelect(data: FormattedData) {
   const [ searchTerm, setSearchTerm ] = React.useState('');
   const [ erc1155sort, setErc1155Sort ] = React.useState<Sort>('desc');
+  const [ erc404sort, setErc404Sort ] = React.useState<Sort>('desc');
   const [ erc20sort, setErc20Sort ] = React.useState<Sort>('desc');
 
   const onInputChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
@@ -21,6 +22,9 @@ export default function useTokenSelect(data: FormattedData) {
     if (tokenType === 'ERC-1155') {
       setErc1155Sort((prevValue) => prevValue === 'desc' ? 'asc' : 'desc');
     }
+    if (tokenType === 'ERC-404') {
+      setErc404Sort((prevValue) => prevValue === 'desc' ? 'asc' : 'desc');
+    }
     if (tokenType === 'ERC-20') {
       setErc20Sort((prevValue) => prevValue === 'desc' ? 'asc' : 'desc');
     }
@@ -37,6 +41,7 @@ export default function useTokenSelect(data: FormattedData) {
     searchTerm,
     erc20sort,
     erc1155sort,
+    erc404sort,
     onInputChange,
     onSortClick,
     data,
diff --git a/ui/address/tokens/AddressCollections.tsx b/ui/address/tokens/AddressCollections.tsx
index 96b8326116..71dad66352 100644
--- a/ui/address/tokens/AddressCollections.tsx
+++ b/ui/address/tokens/AddressCollections.tsx
@@ -8,7 +8,7 @@ import { apos } from 'lib/html-entities';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import NftFallback from 'ui/shared/nft/NftFallback';
 import Pagination from 'ui/shared/pagination/Pagination';
 import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
@@ -20,7 +20,7 @@ type Props = {
   collectionsQuery: QueryWithPagesResult<'address_collections'>;
   address: string;
   hasActiveFilters: boolean;
-}
+};
 
 const AddressCollections = ({ collectionsQuery, address, hasActiveFilters }: Props) => {
   const isMobile = useIsMobile();
@@ -33,7 +33,7 @@ const AddressCollections = ({ collectionsQuery, address, hasActiveFilters }: Pro
     </ActionBar>
   );
 
-  const content = data?.items ? data?.items.map((item, index) => {
+  const content = data?.items ? data?.items.filter((item) => item.token_instances.length > 0).map((item, index) => {
     const collectionUrl = route({
       pathname: '/token/[hash]',
       query: {
@@ -64,7 +64,7 @@ const AddressCollections = ({ collectionsQuery, address, hasActiveFilters }: Pro
         </Flex>
         <Grid
           w="100%"
-          mb={ 7 }
+          mb={ 6 }
           columnGap={{ base: 3, lg: 6 }}
           rowGap={{ base: 3, lg: 6 }}
           gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }}
diff --git a/ui/address/tokens/AddressNFTs.tsx b/ui/address/tokens/AddressNFTs.tsx
index 1c559e8d08..5b41a6911a 100644
--- a/ui/address/tokens/AddressNFTs.tsx
+++ b/ui/address/tokens/AddressNFTs.tsx
@@ -13,7 +13,7 @@ import NFTItem from './NFTItem';
 type Props = {
   tokensQuery: QueryWithPagesResult<'address_nfts'>;
   hasActiveFilters: boolean;
-}
+};
 
 const AddressNFTs = ({ tokensQuery, hasActiveFilters }: Props) => {
   const isMobile = useIsMobile();
diff --git a/ui/address/tokens/ERC20Tokens.tsx b/ui/address/tokens/ERC20Tokens.tsx
index 5d85337363..dea07b99a8 100644
--- a/ui/address/tokens/ERC20Tokens.tsx
+++ b/ui/address/tokens/ERC20Tokens.tsx
@@ -12,7 +12,7 @@ import ERC20TokensTable from './ERC20TokensTable';
 
 type Props = {
   tokensQuery: QueryWithPagesResult<'address_tokens'>;
-}
+};
 
 const ERC20Tokens = ({ tokensQuery }: Props) => {
   const isMobile = useIsMobile();
diff --git a/ui/address/tokens/ERC20TokensListItem.tsx b/ui/address/tokens/ERC20TokensListItem.tsx
index 3f5c79893c..91e76c4cd8 100644
--- a/ui/address/tokens/ERC20TokensListItem.tsx
+++ b/ui/address/tokens/ERC20TokensListItem.tsx
@@ -9,7 +9,7 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 
-type Props = AddressTokenBalance & { isLoading: boolean};
+type Props = AddressTokenBalance & { isLoading: boolean };
 
 const ERC20TokensListItem = ({ token, value, isLoading }: Props) => {
 
@@ -46,17 +46,17 @@ const ERC20TokensListItem = ({ token, value, isLoading }: Props) => {
           </Skeleton>
         </HStack>
       ) }
-      <HStack spacing={ 3 }>
+      <HStack spacing={ 3 } alignItems="baseline">
         <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Quantity</Skeleton>
-        <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary">
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" whiteSpace="pre-wrap" wordBreak="break-word">
           <span>{ tokenQuantity }</span>
         </Skeleton>
       </HStack>
       { tokenValue !== undefined && (
-        <HStack spacing={ 3 }>
+        <HStack spacing={ 3 } alignItems="baseline">
           <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Value</Skeleton>
-          <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary">
-            <span>{ tokenValue }</span>
+          <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" whiteSpace="pre-wrap" wordBreak="break-word">
+            <span>${ tokenValue }</span>
           </Skeleton>
         </HStack>
       ) }
diff --git a/ui/address/tokens/ERC20TokensTable.tsx b/ui/address/tokens/ERC20TokensTable.tsx
index 31a97ef868..cd844faa6e 100644
--- a/ui/address/tokens/ERC20TokensTable.tsx
+++ b/ui/address/tokens/ERC20TokensTable.tsx
@@ -15,7 +15,7 @@ interface Props {
 
 const ERC20TokensTable = ({ data, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm">
+    <Table>
       <Thead top={ top }>
         <Tr>
           <Th width="30%">Asset</Th>
diff --git a/ui/address/tokens/ERC20TokensTableItem.tsx b/ui/address/tokens/ERC20TokensTableItem.tsx
index ed78abcfd5..8f1f491db9 100644
--- a/ui/address/tokens/ERC20TokensTableItem.tsx
+++ b/ui/address/tokens/ERC20TokensTableItem.tsx
@@ -23,11 +23,7 @@ const ERC20TokensTableItem = ({
 
   return (
     <Tr
-      sx={{
-        '&:hover [aria-label="Add token to wallet"]': {
-          opacity: 1,
-        },
-      }}
+      role="group"
     >
       <Td verticalAlign="middle">
         <TokenEntity
@@ -43,9 +39,10 @@ const ERC20TokensTableItem = ({
           <AddressEntity
             address={{ hash: token.address }}
             isLoading={ isLoading }
+            truncation="constant"
             noIcon
           />
-          <AddressAddToWallet token={ token } ml={ 4 } isLoading={ isLoading } opacity="0"/>
+          <AddressAddToWallet token={ token } ml={ 4 } isLoading={ isLoading } opacity="0" _groupHover={{ opacity: 1 }}/>
         </Flex>
       </Td>
       <Td isNumeric verticalAlign="middle">
diff --git a/ui/address/tokens/NFTItem.tsx b/ui/address/tokens/NFTItem.tsx
index 50a33ab73b..270da14fbb 100644
--- a/ui/address/tokens/NFTItem.tsx
+++ b/ui/address/tokens/NFTItem.tsx
@@ -5,6 +5,8 @@ import type { AddressNFT } from 'types/api/address';
 
 import { route } from 'nextjs-routes';
 
+import getCurrencyValue from 'lib/getCurrencyValue';
+import { getTokenTypeName } from 'lib/token/tokenTypes';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import NftMedia from 'ui/shared/nft/NftMedia';
@@ -14,6 +16,7 @@ import NFTItemContainer from './NFTItemContainer';
 type Props = AddressNFT & { isLoading: boolean; withTokenLink?: boolean };
 
 const NFTItem = ({ token, value, isLoading, withTokenLink, ...tokenInstance }: Props) => {
+  const valueResult = token.decimals && value ? getCurrencyValue({ value, decimals: token.decimals, accuracy: 2 }).valueStr : value;
   const tokenInstanceLink = tokenInstance.id ?
     route({ pathname: '/token/[hash]/instance/[id]', query: { hash: token.address, id: tokenInstance.id } }) :
     undefined;
@@ -21,22 +24,28 @@ const NFTItem = ({ token, value, isLoading, withTokenLink, ...tokenInstance }: P
   return (
     <NFTItemContainer position="relative">
       <Skeleton isLoaded={ !isLoading }>
-        <LightMode><Tag background="gray.50" zIndex={ 1 } position="absolute" top="18px" right="18px">{ token.type }</Tag></LightMode>
+        <LightMode><Tag background="gray.50" zIndex={ 1 } position="absolute" top="18px" right="18px">{ getTokenTypeName(token.type) }</Tag></LightMode>
       </Skeleton>
       <Link href={ isLoading ? undefined : tokenInstanceLink }>
         <NftMedia
           mb="18px"
-          url={ tokenInstance?.animation_url || tokenInstance?.image_url || null }
+          data={ tokenInstance }
           isLoading={ isLoading }
+          autoplayVideo={ false }
         />
       </Link>
-      <Flex justifyContent="space-between" w="100%">
+      <Flex justifyContent="space-between" w="100%" flexWrap="wrap">
         <Flex ml={ 1 } overflow="hidden">
           <Text whiteSpace="pre" variant="secondary">ID# </Text>
           <NftEntity hash={ token.address } id={ tokenInstance.id } isLoading={ isLoading } noIcon/>
         </Flex>
-        <Skeleton isLoaded={ !isLoading }>
-          { Number(value) > 1 && <Flex><Text variant="secondary" whiteSpace="pre">Qty </Text>{ value }</Flex> }
+        <Skeleton isLoaded={ !isLoading } overflow="hidden" ml={ 1 }>
+          { valueResult && (
+            <Flex>
+              <Text variant="secondary" whiteSpace="pre">Qty </Text>
+              <Text overflow="hidden" wordBreak="break-all">{ valueResult }</Text>
+            </Flex>
+          ) }
         </Skeleton>
       </Flex>
       { withTokenLink && (
diff --git a/ui/address/tokens/TokenBalances.tsx b/ui/address/tokens/TokenBalances.tsx
index 76f8ef75e5..7c4f5055fc 100644
--- a/ui/address/tokens/TokenBalances.tsx
+++ b/ui/address/tokens/TokenBalances.tsx
@@ -8,6 +8,8 @@ import { ZERO } from 'lib/consts';
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { currencyUnits } from 'lib/units';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import IconSvg from 'ui/shared/IconSvg';
+import NativeTokenIcon from 'ui/shared/NativeTokenIcon';
 
 import { getTokensTotalInfo } from '../utils/tokenUtils';
 import useFetchTokens from '../utils/useFetchTokens';
@@ -42,28 +44,30 @@ const TokenBalances = () => {
   const prefix = tokensInfo.isOverflow ? '>' : '';
   const totalUsd = nativeUsd.plus(tokensInfo.usd);
   const tokensNumText = tokensInfo.num > 0 ?
-    ` | ${ prefix }${ tokensInfo.num } ${ tokensInfo.num > 1 ? 'tokens' : 'token' }` :
-    '';
+    `${ prefix }${ tokensInfo.num } ${ tokensInfo.num > 1 ? 'tokens' : 'token' }` :
+    '0';
 
   return (
     <Flex columnGap={ 3 } rowGap={ 3 } mt={{ base: '6px', lg: 0 }} flexDirection={{ base: 'column', lg: 'row' }}>
       <TokenBalancesItem
         name="Net Worth"
-        value={ addressData?.exchange_rate ? `${ prefix }$${ totalUsd.toFormat(2) } USD` : 'N/A' }
+        value={ addressData?.exchange_rate ? `${ prefix }$${ totalUsd.toFormat(2) }` : 'N/A' }
         isLoading={ addressQuery.isPending || tokenQuery.isPending }
+        icon={ <IconSvg name="wallet" boxSize="20px" flexShrink={ 0 } color="text_secondary"/> }
       />
       <TokenBalancesItem
         name={ `${ currencyUnits.ether } Balance` }
-        value={ (!nativeUsd.eq(ZERO) ? `$${ nativeUsd.toFormat(2) } USD | ` : '') + `${ nativeValue } ${ currencyUnits.ether }` }
+        value={ `${ nativeValue } ${ currencyUnits.ether }` }
+        valueSecondary={ !nativeUsd.eq(ZERO) ? `$${ nativeUsd.toFormat(2) }` : '' }
         isLoading={ addressQuery.isPending || tokenQuery.isPending }
+        icon={ <NativeTokenIcon boxSize="20px"/> }
       />
       <TokenBalancesItem
         name="Tokens"
-        value={
-          `${ prefix }$${ tokensInfo.usd.toFormat(2) } USD ` +
-          tokensNumText
-        }
+        value={ tokensNumText }
+        valueSecondary={ `${ prefix }$${ tokensInfo.usd.toFormat(2) }` }
         isLoading={ addressQuery.isPending || tokenQuery.isPending }
+        icon={ <IconSvg name="tokens" boxSize="20px" flexShrink={ 0 } color="text_secondary"/> }
       />
     </Flex>
   );
diff --git a/ui/address/tokens/TokenBalancesItem.tsx b/ui/address/tokens/TokenBalancesItem.tsx
index 7bf61d1860..0e1a2a3077 100644
--- a/ui/address/tokens/TokenBalancesItem.tsx
+++ b/ui/address/tokens/TokenBalancesItem.tsx
@@ -1,20 +1,29 @@
 import { Box, Flex, Skeleton, Text, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-import IconSvg from 'ui/shared/IconSvg';
+type Props = {
+  name: string;
+  value: string;
+  icon: React.ReactNode;
+  valueSecondary?: string;
+  isLoading: boolean;
+};
 
-const TokenBalancesItem = ({ name, value, isLoading }: {name: string; value: string; isLoading: boolean }) => {
+const TokenBalancesItem = ({ name, icon, value, valueSecondary, isLoading }: Props) => {
 
   const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
   return (
-    <Flex p={ 5 } bgColor={ bgColor } borderRadius="16px" alignItems="center">
-      <IconSvg name="wallet" boxSize="30px" mr={ 3 }/>
-      <Box>
-        <Text variant="secondary" fontSize="xs">{ name }</Text>
-        <Skeleton isLoaded={ !isLoading } fontWeight="500">{ value }</Skeleton>
-      </Box>
-    </Flex>
+    <Box px="12px" py="10px" bgColor={ bgColor } borderRadius="base">
+      <Text variant="secondary" fontSize="xs" fontWeight={ 500 } mb={ 1 }>{ name }</Text>
+      <Flex alignItems="center">
+        { icon }
+        <Skeleton isLoaded={ !isLoading } fontWeight="500" whiteSpace="pre-wrap" wordBreak="break-word" display="flex" ml={ 2 }>
+          { value }
+          { Boolean(valueSecondary) && <Text color="text_secondary"> ({ valueSecondary })</Text> }
+        </Skeleton>
+      </Flex>
+    </Box>
   );
 };
 
diff --git a/ui/address/utils/tokenUtils.ts b/ui/address/utils/tokenUtils.ts
index 67f2e52c2e..a4aaa37364 100644
--- a/ui/address/utils/tokenUtils.ts
+++ b/ui/address/utils/tokenUtils.ts
@@ -9,7 +9,7 @@ import { ZERO } from 'lib/consts';
 
 export type TokenEnhancedData = AddressTokenBalance & {
   usd?: BigNumber ;
-}
+};
 
 export type Sort = 'desc' | 'asc';
 
@@ -22,13 +22,13 @@ export interface TokenSelectDataItem {
 
 type TokenGroup = [string, TokenSelectDataItem];
 
-const TOKEN_GROUPS_ORDER: Array<TokenType> = [ 'ERC-20', 'ERC-721', 'ERC-1155' ];
+const TOKEN_GROUPS_ORDER: Array<TokenType> = [ 'ERC-20', 'ERC-721', 'ERC-1155', 'ERC-404' ];
 
 export const sortTokenGroups = (groupA: TokenGroup, groupB: TokenGroup) => {
   return TOKEN_GROUPS_ORDER.indexOf(groupA[0] as TokenType) > TOKEN_GROUPS_ORDER.indexOf(groupB[0] as TokenType) ? 1 : -1;
 };
 
-const sortErc1155Tokens = (sort: Sort) => (dataA: AddressTokenBalance, dataB: AddressTokenBalance) => {
+const sortErc1155or404Tokens = (sort: Sort) => (dataA: AddressTokenBalance, dataB: AddressTokenBalance) => {
   if (dataA.value === dataB.value) {
     return 0;
   }
@@ -38,6 +38,7 @@ const sortErc1155Tokens = (sort: Sort) => (dataA: AddressTokenBalance, dataB: Ad
 
   return Number(dataA.value) > Number(dataB.value) ? 1 : -1;
 };
+
 const sortErc20Tokens = (sort: Sort) => (dataA: TokenEnhancedData, dataB: TokenEnhancedData) => {
   if (!dataA.usd && !dataB.usd) {
     return 0;
@@ -63,7 +64,8 @@ const sortErc721Tokens = () => () => 0;
 export const sortingFns = {
   'ERC-20': sortErc20Tokens,
   'ERC-721': sortErc721Tokens,
-  'ERC-1155': sortErc1155Tokens,
+  'ERC-1155': sortErc1155or404Tokens,
+  'ERC-404': sortErc1155or404Tokens,
 };
 
 export const filterTokens = (searchTerm: string) => ({ token }: AddressTokenBalance) => {
diff --git a/ui/address/utils/useAddressCountersQuery.ts b/ui/address/utils/useAddressCountersQuery.ts
new file mode 100644
index 0000000000..44397fc59e
--- /dev/null
+++ b/ui/address/utils/useAddressCountersQuery.ts
@@ -0,0 +1,74 @@
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+
+import type { AddressCounters } from 'types/api/address';
+
+import type { ResourceError } from 'lib/api/resources';
+import useApiQuery from 'lib/api/useApiQuery';
+import { publicClient } from 'lib/web3/client';
+import { ADDRESS_COUNTERS } from 'stubs/address';
+import { GET_TRANSACTIONS_COUNT } from 'stubs/RPC';
+
+import type { AddressQuery } from './useAddressQuery';
+
+type RpcResponseType = [
+  number | null,
+];
+
+export type AddressCountersQuery = UseQueryResult<AddressCounters, ResourceError<{ status: number }>> & {
+  isDegradedData: boolean;
+};
+
+interface Params {
+  hash: string;
+  addressQuery: AddressQuery;
+}
+
+export default function useAddressCountersQuery({ hash, addressQuery }: Params): AddressCountersQuery {
+  const enabled = Boolean(hash) && !addressQuery.isPlaceholderData;
+
+  const apiQuery = useApiQuery<'address_counters', { status: number }>('address_counters', {
+    pathParams: { hash },
+    queryOptions: {
+      enabled: enabled && !addressQuery.isDegradedData,
+      placeholderData: ADDRESS_COUNTERS,
+      refetchOnMount: false,
+    },
+  });
+
+  const rpcQuery = useQuery<RpcResponseType, unknown, AddressCounters | null>({
+    queryKey: [ 'RPC', 'address_counters', { hash } ],
+    queryFn: async() => {
+      if (!publicClient) {
+        throw new Error('No public RPC client');
+      }
+
+      const txCount = publicClient.getTransactionCount({ address: hash as `0x${ string }` }).catch(() => null);
+
+      return Promise.all([
+        txCount,
+      ]);
+    },
+    select: (response) => {
+      const [ txCount ] = response;
+      return {
+        transactions_count: txCount?.toString() ?? '0',
+        token_transfers_count: '0',
+        gas_usage_count: null,
+        validations_count: null,
+      };
+    },
+    placeholderData: [ GET_TRANSACTIONS_COUNT ],
+    enabled: enabled && (addressQuery.isDegradedData || apiQuery.isError),
+    retry: false,
+    refetchOnMount: false,
+  });
+
+  const isRpcQuery = Boolean((addressQuery.isDegradedData || apiQuery.isError) && rpcQuery.data && publicClient);
+  const query = isRpcQuery ? rpcQuery as UseQueryResult<AddressCounters, ResourceError<{ status: number }>> : apiQuery;
+
+  return {
+    ...query,
+    isDegradedData: isRpcQuery,
+  };
+}
diff --git a/ui/address/utils/useAddressQuery.ts b/ui/address/utils/useAddressQuery.ts
new file mode 100644
index 0000000000..3f1ae73929
--- /dev/null
+++ b/ui/address/utils/useAddressQuery.ts
@@ -0,0 +1,125 @@
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+import React from 'react';
+
+import type { Address } from 'types/api/address';
+
+import type { ResourceError } from 'lib/api/resources';
+import useApiQuery from 'lib/api/useApiQuery';
+import { retry } from 'lib/api/useQueryClientConfig';
+import { SECOND } from 'lib/consts';
+import { publicClient } from 'lib/web3/client';
+import { ADDRESS_INFO } from 'stubs/address';
+import { GET_BALANCE } from 'stubs/RPC';
+
+type RpcResponseType = [
+    bigint | null,
+];
+
+export type AddressQuery = UseQueryResult<Address, ResourceError<{ status: number }>> & {
+  isDegradedData: boolean;
+};
+
+interface Params {
+  hash: string;
+  isEnabled?: boolean;
+}
+
+export default function useAddressQuery({ hash, isEnabled = true }: Params): AddressQuery {
+  const [ isRefetchEnabled, setRefetchEnabled ] = React.useState(false);
+
+  const apiQuery = useApiQuery<'address', { status: number }>('address', {
+    pathParams: { hash },
+    queryOptions: {
+      enabled: isEnabled && Boolean(hash),
+      placeholderData: ADDRESS_INFO,
+      refetchOnMount: false,
+      retry: (failureCount, error) => {
+        if (isRefetchEnabled) {
+          return false;
+        }
+
+        return retry(failureCount, error);
+      },
+      refetchInterval: (): number | false => {
+        return isRefetchEnabled ? 15 * SECOND : false;
+      },
+    },
+  });
+
+  const rpcQuery = useQuery<RpcResponseType, unknown, Address | null>({
+    queryKey: [ 'RPC', 'address', { hash } ],
+    queryFn: async() => {
+      if (!publicClient) {
+        throw new Error('No public RPC client');
+      }
+
+      const balance = publicClient.getBalance({ address: hash as `0x${ string }` }).catch(() => null);
+
+      return Promise.all([
+        balance,
+      ]);
+    },
+    select: (response) => {
+      const [ balance ] = response;
+
+      if (!balance) {
+        return null;
+      }
+
+      return {
+        hash,
+        block_number_balance_updated_at: null,
+        coin_balance: balance.toString(),
+        creator_address_hash: null,
+        creation_transaction_hash: null,
+        exchange_rate: null,
+        ens_domain_name: null,
+        has_decompiled_code: false,
+        has_logs: false,
+        has_token_transfers: false,
+        has_tokens: false,
+        has_validated_blocks: false,
+        implementations: null,
+        is_contract: false,
+        is_verified: false,
+        name: null,
+        token: null,
+        watchlist_address_id: null,
+        private_tags: null,
+        public_tags: null,
+        watchlist_names: null,
+      };
+    },
+    placeholderData: [ GET_BALANCE ],
+    enabled: apiQuery.isError || apiQuery.errorUpdateCount > 0,
+    retry: false,
+    refetchOnMount: false,
+  });
+
+  React.useEffect(() => {
+    if (apiQuery.isPlaceholderData || !publicClient) {
+      return;
+    }
+
+    if (apiQuery.isError && apiQuery.errorUpdateCount === 1) {
+      setRefetchEnabled(true);
+    } else if (!apiQuery.isError) {
+      setRefetchEnabled(false);
+    }
+  }, [ apiQuery.errorUpdateCount, apiQuery.isError, apiQuery.isPlaceholderData ]);
+
+  React.useEffect(() => {
+    if (!rpcQuery.isPlaceholderData && !rpcQuery.data) {
+      setRefetchEnabled(false);
+    }
+  }, [ rpcQuery.data, rpcQuery.isPlaceholderData ]);
+
+  const isRpcQuery = Boolean((apiQuery.isError || apiQuery.isPlaceholderData) && apiQuery.errorUpdateCount > 0 && rpcQuery.data && publicClient);
+  const query = isRpcQuery ? rpcQuery as UseQueryResult<Address, ResourceError<{ status: number }>> : apiQuery;
+
+  return {
+    ...query,
+    isDegradedData: isRpcQuery,
+  };
+}
diff --git a/ui/address/utils/useCheckAddressFormat.ts b/ui/address/utils/useCheckAddressFormat.ts
new file mode 100644
index 0000000000..f4b3315f09
--- /dev/null
+++ b/ui/address/utils/useCheckAddressFormat.ts
@@ -0,0 +1,26 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import config from 'configs/app';
+import { fromBech32Address, isBech32Address } from 'lib/address/bech32';
+
+export default function useCheckAddressFormat(hash: string) {
+  const router = useRouter();
+  const hasBech32Format = config.UI.views.address.hashFormat.availableFormats.includes('bech32') && isBech32Address(hash);
+  const [ isLoading, setIsLoading ] = React.useState(hasBech32Format);
+
+  React.useEffect(() => {
+    if (!isLoading) {
+      return;
+    }
+
+    const base16Hash = fromBech32Address(hash);
+    if (base16Hash !== hash) {
+      router.replace({ pathname: '/address/[hash]', query: { ...router.query, hash: base16Hash } });
+    } else {
+      setIsLoading(false);
+    }
+  }, [ hash, isLoading, router ]);
+
+  return isLoading;
+}
diff --git a/ui/address/utils/useCheckDomainNameParam.ts b/ui/address/utils/useCheckDomainNameParam.ts
new file mode 100644
index 0000000000..f5cc9fd631
--- /dev/null
+++ b/ui/address/utils/useCheckDomainNameParam.ts
@@ -0,0 +1,46 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+
+const DOMAIN_NAME_REGEXP = /.\../;
+
+export default function useCheckDomainNameParam(hashOrDomainName: string) {
+  const router = useRouter();
+  const maybeDomainName = DOMAIN_NAME_REGEXP.test(hashOrDomainName);
+  const isQueryEnabled = config.features.nameService.isEnabled && maybeDomainName;
+  const [ isLoading, setIsLoading ] = React.useState(isQueryEnabled);
+
+  const domainLookupQuery = useApiQuery('domains_lookup', {
+    pathParams: { chainId: config.chain.id },
+    queryParams: {
+      name: hashOrDomainName,
+      only_active: false,
+    },
+    queryOptions: {
+      enabled: isQueryEnabled,
+    },
+  });
+
+  React.useEffect(() => {
+    if (domainLookupQuery.isPending) {
+      return;
+    }
+
+    const firstDomainAddress = domainLookupQuery.data?.items[0]?.resolved_address?.hash;
+    if (firstDomainAddress) {
+      router.replace({ pathname: '/address/[hash]', query: { hash: firstDomainAddress } });
+    } else {
+      setIsLoading(false);
+    }
+  }, [ domainLookupQuery.isPending, domainLookupQuery.data, router ]);
+
+  React.useEffect(() => {
+    if (!maybeDomainName) {
+      setIsLoading(false);
+    }
+  }, [ maybeDomainName ]);
+
+  return isLoading;
+}
diff --git a/ui/address/utils/useFetchTokens.ts b/ui/address/utils/useFetchTokens.ts
index 9b5bcda583..0ef43b146d 100644
--- a/ui/address/utils/useFetchTokens.ts
+++ b/ui/address/utils/useFetchTokens.ts
@@ -12,6 +12,7 @@ import useSocketMessage from 'lib/socket/useSocketMessage';
 import { calculateUsdValue } from './tokenUtils';
 interface Props {
   hash?: string;
+  enabled?: boolean;
 }
 
 const tokenBalanceItemIdentityFactory = (match: AddressTokenBalance) => (item: AddressTokenBalance) => ((
@@ -20,21 +21,26 @@ const tokenBalanceItemIdentityFactory = (match: AddressTokenBalance) => (item: A
   match.token_instance?.id === item.token_instance?.id
 ));
 
-export default function useFetchTokens({ hash }: Props) {
+export default function useFetchTokens({ hash, enabled }: Props) {
   const erc20query = useApiQuery('address_tokens', {
     pathParams: { hash },
     queryParams: { type: 'ERC-20' },
-    queryOptions: { enabled: Boolean(hash), refetchOnMount: false },
+    queryOptions: { enabled: Boolean(hash) && enabled, refetchOnMount: false },
   });
   const erc721query = useApiQuery('address_tokens', {
     pathParams: { hash },
     queryParams: { type: 'ERC-721' },
-    queryOptions: { enabled: Boolean(hash), refetchOnMount: false },
+    queryOptions: { enabled: Boolean(hash) && enabled, refetchOnMount: false },
   });
   const erc1155query = useApiQuery('address_tokens', {
     pathParams: { hash },
     queryParams: { type: 'ERC-1155' },
-    queryOptions: { enabled: Boolean(hash), refetchOnMount: false },
+    queryOptions: { enabled: Boolean(hash) && enabled, refetchOnMount: false },
+  });
+  const erc404query = useApiQuery('address_tokens', {
+    pathParams: { hash },
+    queryParams: { type: 'ERC-404' },
+    queryOptions: { enabled: Boolean(hash) && enabled, refetchOnMount: false },
   });
 
   const queryClient = useQueryClient();
@@ -78,6 +84,10 @@ export default function useFetchTokens({ hash }: Props) {
     updateTokensData('ERC-1155', payload);
   }, [ updateTokensData ]);
 
+  const handleTokenBalancesErc404Message: SocketMessage.AddressTokenBalancesErc1155['handler'] = React.useCallback((payload) => {
+    updateTokensData('ERC-404', payload);
+  }, [ updateTokensData ]);
+
   const channel = useSocketChannel({
     topic: `addresses:${ hash?.toLowerCase() }`,
     isDisabled: Boolean(hash) && (erc20query.isPlaceholderData || erc721query.isPlaceholderData || erc1155query.isPlaceholderData),
@@ -98,6 +108,11 @@ export default function useFetchTokens({ hash }: Props) {
     event: 'updated_token_balances_erc_1155',
     handler: handleTokenBalancesErc1155Message,
   });
+  useSocketMessage({
+    channel,
+    event: 'updated_token_balances_erc_404',
+    handler: handleTokenBalancesErc404Message,
+  });
 
   const data = React.useMemo(() => {
     return {
@@ -113,12 +128,16 @@ export default function useFetchTokens({ hash }: Props) {
         items: erc1155query.data?.items.map(calculateUsdValue) || [],
         isOverflow: Boolean(erc1155query.data?.next_page_params),
       },
+      'ERC-404': {
+        items: erc404query.data?.items.map(calculateUsdValue) || [],
+        isOverflow: Boolean(erc1155query.data?.next_page_params),
+      },
     };
-  }, [ erc1155query.data, erc20query.data, erc721query.data ]);
+  }, [ erc1155query.data, erc20query.data, erc721query.data, erc404query.data ]);
 
   return {
-    isPending: erc20query.isPending || erc721query.isPending || erc1155query.isPending,
-    isError: erc20query.isError || erc721query.isError || erc1155query.isError,
+    isPending: erc20query.isPending || erc721query.isPending || erc1155query.isPending || erc404query.isPending,
+    isError: erc20query.isError || erc721query.isError || erc1155query.isError || erc404query.isError,
     data,
   };
 }
diff --git a/ui/addressVerification/AddressVerificationModal.tsx b/ui/addressVerification/AddressVerificationModal.tsx
index b70d472dc7..b36de3fd7e 100644
--- a/ui/addressVerification/AddressVerificationModal.tsx
+++ b/ui/addressVerification/AddressVerificationModal.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import type { AddressVerificationFormFirstStepFields, AddressCheckStatusSuccess } from './types';
 import type { VerifiedAddress } from 'types/api/account';
 
+import config from 'configs/app';
 import * as mixpanel from 'lib/mixpanel/index';
 import IconSvg from 'ui/shared/IconSvg';
 import Web3ModalProvider from 'ui/shared/Web3ModalProvider';
@@ -76,8 +77,13 @@ const AddressVerificationModal = ({ defaultAddress, isOpen, onClose, onSubmit, o
     },
     {
       title: 'Copy and sign message',
-      content: <AddressVerificationStepSignature { ...data } onContinue={ handleGoToThirdStep }/>,
-      fallback: <AddressVerificationStepSignature { ...data } onContinue={ handleGoToThirdStep } noWeb3Provider/>,
+      content: (
+        <AddressVerificationStepSignature
+          { ...data }
+          onContinue={ handleGoToThirdStep }
+          noWeb3Provider={ !config.features.blockchainInteraction.isEnabled }
+        />
+      ),
     },
     {
       title: 'Congrats! Address is verified.',
@@ -100,14 +106,14 @@ const AddressVerificationModal = ({ defaultAddress, isOpen, onClose, onSubmit, o
         <ModalHeader fontWeight="500" textStyle="h3" mb={ 6 }>
           { stepIndex !== 0 && (
             <Link mr={ 3 } onClick={ handleGoToPrevStep }>
-              <IconSvg name="arrows/east" boxSize={ 6 } transform="rotate(180deg)" verticalAlign="middle"/>
+              <IconSvg name="arrows/east" boxSize={ 6 } transform="rotate(180deg)" verticalAlign="middle" color="gray.400"/>
             </Link>
           ) }
           <span>{ step.title }</span>
         </ModalHeader>
         <ModalCloseButton/>
         <ModalBody mb={ 0 }>
-          <Web3ModalProvider fallback={ step?.fallback || step.content }>
+          <Web3ModalProvider>
             { step.content }
           </Web3ModalProvider>
         </ModalBody>
diff --git a/ui/addressVerification/fields/AddressVerificationFieldAddress.tsx b/ui/addressVerification/fields/AddressVerificationFieldAddress.tsx
deleted file mode 100644
index 868505d158..0000000000
--- a/ui/addressVerification/fields/AddressVerificationFieldAddress.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { FormControl, Input, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-import type { Control, ControllerRenderProps, FormState } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import type { AddressVerificationFormFirstStepFields, RootFields } from '../types';
-
-import { ADDRESS_REGEXP, ADDRESS_LENGTH } from 'lib/validations/address';
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
-type Fields = RootFields & AddressVerificationFormFirstStepFields;
-
-interface Props {
-  formState: FormState<Fields>;
-  control: Control<Fields>;
-}
-
-const AddressVerificationFieldAddress = ({ formState, control }: Props) => {
-  const backgroundColor = useColorModeValue('white', 'gray.900');
-
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, 'address'>}) => {
-    const error = 'address' in formState.errors ? formState.errors.address : undefined;
-
-    return (
-      <FormControl variant="floating" id={ field.name } isRequired size="md" backgroundColor={ backgroundColor } mt={ 8 }>
-        <Input
-          { ...field }
-          required
-          isInvalid={ Boolean(error) }
-          maxLength={ ADDRESS_LENGTH }
-          isDisabled={ formState.isSubmitting }
-          autoComplete="off"
-        />
-        <InputPlaceholder text="Smart contract address (0x...)" error={ error }/>
-      </FormControl>
-    );
-  }, [ formState.errors, formState.isSubmitting, backgroundColor ]);
-
-  return (
-    <Controller
-      name="address"
-      control={ control }
-      render={ renderControl }
-      rules={{ required: true, pattern: ADDRESS_REGEXP }}
-    />
-  );
-};
-
-export default React.memo(AddressVerificationFieldAddress);
diff --git a/ui/addressVerification/fields/AddressVerificationFieldMessage.tsx b/ui/addressVerification/fields/AddressVerificationFieldMessage.tsx
deleted file mode 100644
index 44db8bc302..0000000000
--- a/ui/addressVerification/fields/AddressVerificationFieldMessage.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { FormControl, Textarea, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-import type { Control, ControllerRenderProps, FormState } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import type { AddressVerificationFormSecondStepFields, RootFields } from '../types';
-
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
-
-type Fields = RootFields & AddressVerificationFormSecondStepFields;
-
-interface Props {
-  formState: FormState<Fields>;
-  control: Control<Fields>;
-}
-
-const AddressVerificationFieldMessage = ({ formState, control }: Props) => {
-  const backgroundColor = useColorModeValue('white', 'gray.900');
-
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, 'message'>}) => {
-    const error = 'message' in formState.errors ? formState.errors.message : undefined;
-
-    return (
-      <FormControl variant="floating" id={ field.name } isRequired size="md" backgroundColor={ backgroundColor }>
-        <Textarea
-          { ...field }
-          required
-          isInvalid={ Boolean(error) }
-          isDisabled
-          autoComplete="off"
-          maxH={{ base: '140px', lg: '80px' }}
-        />
-        <InputPlaceholder text="Message to sign" error={ error } isInModal/>
-      </FormControl>
-    );
-  }, [ formState.errors, backgroundColor ]);
-
-  return (
-    <Controller
-      defaultValue="some value"
-      name="message"
-      control={ control }
-      render={ renderControl }
-      rules={{ required: true }}
-    />
-  );
-};
-
-export default React.memo(AddressVerificationFieldMessage);
diff --git a/ui/addressVerification/fields/AddressVerificationFieldSignature.tsx b/ui/addressVerification/fields/AddressVerificationFieldSignature.tsx
deleted file mode 100644
index a0df3bfed5..0000000000
--- a/ui/addressVerification/fields/AddressVerificationFieldSignature.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { FormControl, Input, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-import type { Control, ControllerRenderProps, FormState } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import type { AddressVerificationFormSecondStepFields, RootFields } from '../types';
-
-import { SIGNATURE_REGEXP } from 'lib/validations/signature';
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
-
-type Fields = RootFields & AddressVerificationFormSecondStepFields;
-
-interface Props {
-  formState: FormState<Fields>;
-  control: Control<Fields>;
-}
-
-const AddressVerificationFieldSignature = ({ formState, control }: Props) => {
-  const backgroundColor = useColorModeValue('white', 'gray.900');
-
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, 'signature'>}) => {
-    const error = 'signature' in formState.errors ? formState.errors.signature : undefined;
-
-    return (
-      <FormControl variant="floating" id={ field.name } isRequired size="md" backgroundColor={ backgroundColor }>
-        <Input
-          { ...field }
-          required
-          isInvalid={ Boolean(error) }
-          isDisabled={ formState.isSubmitting }
-          autoComplete="off"
-        />
-        <InputPlaceholder text="Signature hash" error={ error }/>
-      </FormControl>
-    );
-  }, [ formState.errors, formState.isSubmitting, backgroundColor ]);
-
-  return (
-    <Controller
-      name="signature"
-      control={ control }
-      render={ renderControl }
-      rules={{ required: true, pattern: SIGNATURE_REGEXP }}
-    />
-  );
-};
-
-export default React.memo(AddressVerificationFieldSignature);
diff --git a/ui/addressVerification/steps/AddressVerificationStepAddress.pw.tsx b/ui/addressVerification/steps/AddressVerificationStepAddress.pw.tsx
index 3efcd497f8..a707a5b924 100644
--- a/ui/addressVerification/steps/AddressVerificationStepAddress.pw.tsx
+++ b/ui/addressVerification/steps/AddressVerificationStepAddress.pw.tsx
@@ -1,49 +1,38 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import buildUrl from 'lib/api/buildUrl';
 import * as mocks from 'mocks/account/verifiedAddresses';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import AddressVerificationStepAddress from './AddressVerificationStepAddress';
 
-const CHECK_ADDRESS_URL = buildApiUrl('address_verification', { chainId: '1', type: ':prepare' });
+const CHECK_ADDRESS_URL = buildUrl('address_verification', { chainId: '1', type: ':prepare' });
 
-test('base view', async({ mount, page }) => {
+test('base view', async({ render, page }) => {
   await page.route(CHECK_ADDRESS_URL, (route) => route.fulfill({
     status: 200,
-    body: JSON.stringify(mocks.ADDRESS_CHECK_RESPONSE.SUCCESS),
+    json: mocks.ADDRESS_CHECK_RESPONSE.SUCCESS,
   }));
-
   const props = {
     onContinue: () => {},
     defaultAddress: mocks.VERIFIED_ADDRESS.NEW_ITEM.contractAddress,
   };
 
-  await mount(
-    <TestApp>
-      <AddressVerificationStepAddress { ...props }/>
-    </TestApp>,
-  );
-
+  await render(<AddressVerificationStepAddress { ...props }/>);
   await expect(page).toHaveScreenshot();
 });
 
-test('SOURCE_CODE_NOT_VERIFIED_ERROR view +@mobile', async({ mount, page }) => {
+test('SOURCE_CODE_NOT_VERIFIED_ERROR view +@mobile', async({ render, page }) => {
   await page.route(CHECK_ADDRESS_URL, (route) => route.fulfill({
     status: 200,
-    body: JSON.stringify(mocks.ADDRESS_CHECK_RESPONSE.SOURCE_CODE_NOT_VERIFIED_ERROR),
+    json: mocks.ADDRESS_CHECK_RESPONSE.SOURCE_CODE_NOT_VERIFIED_ERROR,
   }));
 
   const props = {
     onContinue: () => {},
   };
 
-  await mount(
-    <TestApp>
-      <AddressVerificationStepAddress { ...props }/>
-    </TestApp>,
-  );
+  await render(<AddressVerificationStepAddress { ...props }/>);
 
   const addressInput = page.getByLabel(/smart contract address/i);
   await addressInput.focus();
diff --git a/ui/addressVerification/steps/AddressVerificationStepAddress.tsx b/ui/addressVerification/steps/AddressVerificationStepAddress.tsx
index a757d9b2b9..7619d69864 100644
--- a/ui/addressVerification/steps/AddressVerificationStepAddress.tsx
+++ b/ui/addressVerification/steps/AddressVerificationStepAddress.tsx
@@ -1,7 +1,7 @@
 import { Alert, Box, Button, Flex } from '@chakra-ui/react';
 import React from 'react';
 import type { SubmitHandler } from 'react-hook-form';
-import { useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
 
 import type {
   AddressVerificationResponseError,
@@ -16,10 +16,10 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
 import useApiFetch from 'lib/api/useApiFetch';
-import LinkInternal from 'ui/shared/LinkInternal';
+import FormFieldAddress from 'ui/shared/forms/fields/FormFieldAddress';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import AdminSupportText from 'ui/shared/texts/AdminSupportText';
 
-import AddressVerificationFieldAddress from '../fields/AddressVerificationFieldAddress';
 type Fields = RootFields & AddressVerificationFormFirstStepFields;
 
 interface Props {
@@ -34,7 +34,7 @@ const AddressVerificationStepAddress = ({ defaultAddress, onContinue }: Props) =
       address: defaultAddress,
     },
   });
-  const { handleSubmit, formState, control, setError, clearErrors, watch } = formApi;
+  const { handleSubmit, formState, setError, clearErrors, watch } = formApi;
   const apiFetch = useApiFetch();
 
   const address = watch('address');
@@ -100,17 +100,25 @@ const AddressVerificationStepAddress = ({ defaultAddress, onContinue }: Props) =
   })();
 
   return (
-    <form noValidate onSubmit={ onSubmit }>
-      <Box>Enter the contract address you are verifying ownership for.</Box>
-      { rootError && <Alert status="warning" mt={ 3 }>{ rootError }</Alert> }
-      <AddressVerificationFieldAddress formState={ formState } control={ control }/>
-      <Flex alignItems={{ base: 'flex-start', lg: 'center' }} mt={ 8 } columnGap={ 5 } rowGap={ 2 } flexDir={{ base: 'column', lg: 'row' }}>
-        <Button size="lg" type="submit" isDisabled={ formState.isSubmitting } flexShrink={ 0 }>
+    <FormProvider { ...formApi }>
+      <form noValidate onSubmit={ onSubmit }>
+        <Box>Enter the contract address you are verifying ownership for.</Box>
+        { rootError && <Alert status="warning" mt={ 3 }>{ rootError }</Alert> }
+        <FormFieldAddress<Fields>
+          name="address"
+          isRequired
+          bgColor="dialog_bg"
+          placeholder="Smart contract address (0x...)"
+          mt={ 8 }
+        />
+        <Flex alignItems={{ base: 'flex-start', lg: 'center' }} mt={ 8 } columnGap={ 5 } rowGap={ 2 } flexDir={{ base: 'column', lg: 'row' }}>
+          <Button size="lg" type="submit" isLoading={ formState.isSubmitting } loadingText="Continue" flexShrink={ 0 }>
             Continue
-        </Button>
-        <AdminSupportText/>
-      </Flex>
-    </form>
+          </Button>
+          <AdminSupportText/>
+        </Flex>
+      </form>
+    </FormProvider>
   );
 };
 
diff --git a/ui/addressVerification/steps/AddressVerificationStepSignature.pw.tsx b/ui/addressVerification/steps/AddressVerificationStepSignature.pw.tsx
index bda66934aa..004d9cff30 100644
--- a/ui/addressVerification/steps/AddressVerificationStepSignature.pw.tsx
+++ b/ui/addressVerification/steps/AddressVerificationStepSignature.pw.tsx
@@ -1,18 +1,17 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import buildUrl from 'lib/api/buildUrl';
 import * as mocks from 'mocks/account/verifiedAddresses';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import AddressVerificationStepSignature from './AddressVerificationStepSignature';
 
-const VERIFY_ADDRESS_URL = buildApiUrl('address_verification', { chainId: '1', type: ':verify' });
+const VERIFY_ADDRESS_URL = buildUrl('address_verification', { chainId: '1', type: ':verify' });
 
-test('base view', async({ mount, page }) => {
+test('base view', async({ render, page }) => {
   await page.route(VERIFY_ADDRESS_URL, (route) => route.fulfill({
     status: 200,
-    body: JSON.stringify(mocks.ADDRESS_VERIFY_RESPONSE.SUCCESS),
+    json: mocks.ADDRESS_VERIFY_RESPONSE.SUCCESS,
   }));
 
   const props = {
@@ -22,19 +21,14 @@ test('base view', async({ mount, page }) => {
     signingMessage: mocks.ADDRESS_CHECK_RESPONSE.SUCCESS.result.signingMessage,
   };
 
-  await mount(
-    <TestApp>
-      <AddressVerificationStepSignature { ...props }/>
-    </TestApp>,
-  );
-
+  await render(<AddressVerificationStepSignature { ...props }/>);
   await expect(page).toHaveScreenshot();
 });
 
-test('INVALID_SIGNER_ERROR view +@mobile', async({ mount, page }) => {
+test('INVALID_SIGNER_ERROR view +@mobile', async({ render, page }) => {
   await page.route(VERIFY_ADDRESS_URL, (route) => route.fulfill({
     status: 200,
-    body: JSON.stringify(mocks.ADDRESS_VERIFY_RESPONSE.INVALID_SIGNER_ERROR),
+    json: mocks.ADDRESS_VERIFY_RESPONSE.INVALID_SIGNER_ERROR,
   }));
 
   const props = {
@@ -44,11 +38,7 @@ test('INVALID_SIGNER_ERROR view +@mobile', async({ mount, page }) => {
     ...mocks.ADDRESS_CHECK_RESPONSE.SUCCESS.result,
   };
 
-  await mount(
-    <TestApp>
-      <AddressVerificationStepSignature { ...props }/>
-    </TestApp>,
-  );
+  await render(<AddressVerificationStepSignature { ...props }/>);
 
   const signatureInput = page.getByLabel(/signature hash/i);
   await signatureInput.fill(mocks.SIGNATURE);
diff --git a/ui/addressVerification/steps/AddressVerificationStepSignature.tsx b/ui/addressVerification/steps/AddressVerificationStepSignature.tsx
index 0c779f4880..65b8928d8d 100644
--- a/ui/addressVerification/steps/AddressVerificationStepSignature.tsx
+++ b/ui/addressVerification/steps/AddressVerificationStepSignature.tsx
@@ -1,8 +1,8 @@
 import { Alert, Box, Button, chakra, Flex, Link, Radio, RadioGroup } from '@chakra-ui/react';
-import { useWeb3Modal } from '@web3modal/wagmi/react';
+import { useAppKit } from '@reown/appkit/react';
 import React from 'react';
 import type { SubmitHandler } from 'react-hook-form';
-import { useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
 import { useSignMessage, useAccount } from 'wagmi';
 
 import type {
@@ -19,16 +19,15 @@ import config from 'configs/app';
 import useApiFetch from 'lib/api/useApiFetch';
 import shortenString from 'lib/shortenString';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import FormFieldText from 'ui/shared/forms/fields/FormFieldText';
+import { SIGNATURE_REGEXP } from 'ui/shared/forms/validators/signature';
 import AdminSupportText from 'ui/shared/texts/AdminSupportText';
 
-import AddressVerificationFieldMessage from '../fields/AddressVerificationFieldMessage';
-import AddressVerificationFieldSignature from '../fields/AddressVerificationFieldSignature';
-
 type Fields = RootFields & AddressVerificationFormSecondStepFields;
 
 type SignMethod = 'wallet' | 'manual';
 
-interface Props extends AddressVerificationFormFirstStepFields, AddressCheckStatusSuccess{
+interface Props extends AddressVerificationFormFirstStepFields, AddressCheckStatusSuccess {
   onContinue: (newItem: VerifiedAddress, signMethod: SignMethod) => void;
   noWeb3Provider?: boolean;
 }
@@ -36,7 +35,7 @@ interface Props extends AddressVerificationFormFirstStepFields, AddressCheckStat
 const AddressVerificationStepSignature = ({ address, signingMessage, contractCreator, contractOwner, onContinue, noWeb3Provider }: Props) => {
   const [ signMethod, setSignMethod ] = React.useState<SignMethod>(noWeb3Provider ? 'manual' : 'wallet');
 
-  const { open: openWeb3Modal } = useWeb3Modal();
+  const { open: openWeb3Modal } = useAppKit();
   const { isConnected } = useAccount();
 
   const formApi = useForm<Fields>({
@@ -45,7 +44,7 @@ const AddressVerificationStepSignature = ({ address, signingMessage, contractCre
       message: signingMessage,
     },
   });
-  const { handleSubmit, formState, control, setValue, getValues, setError, clearErrors, watch } = formApi;
+  const { handleSubmit, formState, setValue, getValues, setError, clearErrors, watch } = formApi;
 
   const apiFetch = useApiFetch();
 
@@ -80,15 +79,7 @@ const AddressVerificationStepSignature = ({ address, signingMessage, contractCre
 
   const onSubmit = handleSubmit(onFormSubmit);
 
-  const { signMessage, isLoading: isSigning } = useSignMessage({
-    onSuccess: (data) => {
-      setValue('signature', data);
-      onSubmit();
-    },
-    onError: (error) => {
-      return setError('root', { type: 'SIGNING_FAIL', message: (error as Error)?.message || 'Oops! Something went wrong' });
-    },
-  });
+  const { signMessage, isPending: isSigning } = useSignMessage();
 
   const handleSignMethodChange = React.useCallback((value: typeof signMethod) => {
     setSignMethod(value);
@@ -108,8 +99,16 @@ const AddressVerificationStepSignature = ({ address, signingMessage, contractCre
     }
 
     const message = getValues('message');
-    signMessage({ message });
-  }, [ clearErrors, isConnected, getValues, signMessage, setError ]);
+    signMessage({ message }, {
+      onSuccess: (data) => {
+        setValue('signature', data);
+        onSubmit();
+      },
+      onError: (error) => {
+        return setError('root', { type: 'SIGNING_FAIL', message: (error as Error)?.message || 'Oops! Something went wrong' });
+      },
+    });
+  }, [ clearErrors, isConnected, getValues, signMessage, setError, setValue, onSubmit ]);
 
   const handleManualSignClick = React.useCallback(() => {
     clearErrors('root');
@@ -157,7 +156,7 @@ const AddressVerificationStepSignature = ({ address, signingMessage, contractCre
       }
       case 'INVALID_SIGNER_ERROR': {
         const signer = shortenString(formState.errors.root.message || '');
-        const expectedSigners = [ contractCreator, contractOwner ].filter(Boolean).map(shortenString).join(', ');
+        const expectedSigners = [ contractCreator, contractOwner ].filter(Boolean).map(s => shortenString(s)).join(', ');
         return (
           <Box>
             <span>This address </span>
@@ -184,51 +183,69 @@ const AddressVerificationStepSignature = ({ address, signingMessage, contractCre
   })();
 
   return (
-    <form noValidate onSubmit={ onSubmit }>
-      { rootError && <Alert status="warning" mb={ 6 }>{ rootError }</Alert> }
-      <Box mb={ 8 }>
-        <span>Please select the address to sign and copy the message and sign it using the Blockscout message provider of your choice. </span>
-        <Link href="https://docs.blockscout.com/for-users/my-account/verified-addresses/copy-and-sign-message" target="_blank">
-          Additional instructions
-        </Link>
-        <span>. If you do not see your address here but are sure that you are the owner of the contract, kindly </span>
-        { contactUsLink }
-        <span> for further assistance.</span>
-      </Box>
-      { (contractOwner || contractCreator) && (
-        <Flex flexDir="column" rowGap={ 4 } mb={ 4 }>
-          { contractCreator && (
-            <Box>
-              <chakra.span fontWeight={ 600 }>Contract creator: </chakra.span>
-              <chakra.span>{ contractCreator }</chakra.span>
-            </Box>
+    <FormProvider { ...formApi }>
+      <form noValidate onSubmit={ onSubmit }>
+        { rootError && <Alert status="warning" mb={ 6 }>{ rootError }</Alert> }
+        <Box mb={ 8 }>
+          <span>Please select the address to sign and copy the message and sign it using the Blockscout message provider of your choice. </span>
+          <Link href="https://docs.blockscout.com/for-users/my-account/verified-addresses/copy-and-sign-message" target="_blank">
+            Additional instructions
+          </Link>
+          <span>. If you do not see your address here but are sure that you are the owner of the contract, kindly </span>
+          { contactUsLink }
+          <span> for further assistance.</span>
+        </Box>
+        { (contractOwner || contractCreator) && (
+          <Flex flexDir="column" rowGap={ 4 } mb={ 4 }>
+            { contractCreator && (
+              <Box>
+                <chakra.span fontWeight={ 600 }>Contract creator: </chakra.span>
+                <chakra.span>{ contractCreator }</chakra.span>
+              </Box>
+            ) }
+            { contractOwner && (
+              <Box>
+                <chakra.span fontWeight={ 600 }>Contract owner: </chakra.span>
+                <chakra.span>{ contractOwner }</chakra.span>
+              </Box>
+            ) }
+          </Flex>
+        ) }
+        <Flex rowGap={ 5 } flexDir="column">
+          <div>
+            <CopyToClipboard text={ signingMessage } ml="auto" display="block"/>
+            <FormFieldText<Fields>
+              name="message"
+              placeholder="Message to sign"
+              isRequired
+              asComponent="Textarea"
+              isReadOnly
+              maxH={{ base: '140px', lg: '80px' }}
+              bgColor="dialog_bg"
+            />
+          </div>
+          { !noWeb3Provider && (
+            <RadioGroup onChange={ handleSignMethodChange } value={ signMethod } display="flex" flexDir="column" rowGap={ 4 }>
+              <Radio value="wallet">Sign via Web3 wallet</Radio>
+              <Radio value="manual">Sign manually</Radio>
+            </RadioGroup>
           ) }
-          { contractOwner && (
-            <Box>
-              <chakra.span fontWeight={ 600 }>Contract owner: </chakra.span>
-              <chakra.span>{ contractOwner }</chakra.span>
-            </Box>
+          { signMethod === 'manual' && (
+            <FormFieldText<Fields>
+              name="signature"
+              placeholder="Signature hash"
+              isRequired
+              rules={{ pattern: SIGNATURE_REGEXP }}
+              bgColor="dialog_bg"
+            />
           ) }
         </Flex>
-      ) }
-      <Flex rowGap={ 5 } flexDir="column">
-        <div>
-          <CopyToClipboard text={ signingMessage } ml="auto" display="block"/>
-          <AddressVerificationFieldMessage formState={ formState } control={ control }/>
-        </div>
-        { !noWeb3Provider && (
-          <RadioGroup onChange={ handleSignMethodChange } value={ signMethod } display="flex" flexDir="column" rowGap={ 4 }>
-            <Radio value="wallet">Sign via Web3 wallet</Radio>
-            <Radio value="manually">Sign manually</Radio>
-          </RadioGroup>
-        ) }
-        { signMethod === 'manual' && <AddressVerificationFieldSignature formState={ formState } control={ control }/> }
-      </Flex>
-      <Flex alignItems={{ base: 'flex-start', lg: 'center' }} mt={ 8 } columnGap={ 5 } rowGap={ 2 } flexDir={{ base: 'column', lg: 'row' }}>
-        { button }
-        <AdminSupportText/>
-      </Flex>
-    </form>
+        <Flex alignItems={{ base: 'flex-start', lg: 'center' }} mt={ 8 } columnGap={ 5 } rowGap={ 2 } flexDir={{ base: 'column', lg: 'row' }}>
+          { button }
+          <AdminSupportText/>
+        </Flex>
+      </form>
+    </FormProvider>
   );
 };
 
diff --git a/ui/addressVerification/steps/__screenshots__/AddressVerificationStepAddress.pw.tsx_default_SOURCE-CODE-NOT-VERIFIED-ERROR-view-mobile-1.png b/ui/addressVerification/steps/__screenshots__/AddressVerificationStepAddress.pw.tsx_default_SOURCE-CODE-NOT-VERIFIED-ERROR-view-mobile-1.png
index c494f4f2a7..436ebf372c 100644
Binary files a/ui/addressVerification/steps/__screenshots__/AddressVerificationStepAddress.pw.tsx_default_SOURCE-CODE-NOT-VERIFIED-ERROR-view-mobile-1.png and b/ui/addressVerification/steps/__screenshots__/AddressVerificationStepAddress.pw.tsx_default_SOURCE-CODE-NOT-VERIFIED-ERROR-view-mobile-1.png differ
diff --git a/ui/addressVerification/steps/__screenshots__/AddressVerificationStepAddress.pw.tsx_default_base-view-1.png b/ui/addressVerification/steps/__screenshots__/AddressVerificationStepAddress.pw.tsx_default_base-view-1.png
index 9d690bf8b9..baad951227 100644
Binary files a/ui/addressVerification/steps/__screenshots__/AddressVerificationStepAddress.pw.tsx_default_base-view-1.png and b/ui/addressVerification/steps/__screenshots__/AddressVerificationStepAddress.pw.tsx_default_base-view-1.png differ
diff --git a/ui/addressVerification/steps/__screenshots__/AddressVerificationStepAddress.pw.tsx_mobile_SOURCE-CODE-NOT-VERIFIED-ERROR-view-mobile-1.png b/ui/addressVerification/steps/__screenshots__/AddressVerificationStepAddress.pw.tsx_mobile_SOURCE-CODE-NOT-VERIFIED-ERROR-view-mobile-1.png
index b7b0f3ef55..33bbf8c61f 100644
Binary files a/ui/addressVerification/steps/__screenshots__/AddressVerificationStepAddress.pw.tsx_mobile_SOURCE-CODE-NOT-VERIFIED-ERROR-view-mobile-1.png and b/ui/addressVerification/steps/__screenshots__/AddressVerificationStepAddress.pw.tsx_mobile_SOURCE-CODE-NOT-VERIFIED-ERROR-view-mobile-1.png differ
diff --git a/ui/addressVerification/steps/__screenshots__/AddressVerificationStepSignature.pw.tsx_default_INVALID-SIGNER-ERROR-view-mobile-1.png b/ui/addressVerification/steps/__screenshots__/AddressVerificationStepSignature.pw.tsx_default_INVALID-SIGNER-ERROR-view-mobile-1.png
index 7e0ca0fc1b..6706039911 100644
Binary files a/ui/addressVerification/steps/__screenshots__/AddressVerificationStepSignature.pw.tsx_default_INVALID-SIGNER-ERROR-view-mobile-1.png and b/ui/addressVerification/steps/__screenshots__/AddressVerificationStepSignature.pw.tsx_default_INVALID-SIGNER-ERROR-view-mobile-1.png differ
diff --git a/ui/addressVerification/steps/__screenshots__/AddressVerificationStepSignature.pw.tsx_default_base-view-1.png b/ui/addressVerification/steps/__screenshots__/AddressVerificationStepSignature.pw.tsx_default_base-view-1.png
index f95f115313..27083e4b03 100644
Binary files a/ui/addressVerification/steps/__screenshots__/AddressVerificationStepSignature.pw.tsx_default_base-view-1.png and b/ui/addressVerification/steps/__screenshots__/AddressVerificationStepSignature.pw.tsx_default_base-view-1.png differ
diff --git a/ui/addressVerification/steps/__screenshots__/AddressVerificationStepSignature.pw.tsx_mobile_INVALID-SIGNER-ERROR-view-mobile-1.png b/ui/addressVerification/steps/__screenshots__/AddressVerificationStepSignature.pw.tsx_mobile_INVALID-SIGNER-ERROR-view-mobile-1.png
index d28f43ed1e..1991f1e1fb 100644
Binary files a/ui/addressVerification/steps/__screenshots__/AddressVerificationStepSignature.pw.tsx_mobile_INVALID-SIGNER-ERROR-view-mobile-1.png and b/ui/addressVerification/steps/__screenshots__/AddressVerificationStepSignature.pw.tsx_mobile_INVALID-SIGNER-ERROR-view-mobile-1.png differ
diff --git a/ui/addressVerification/types.ts b/ui/addressVerification/types.ts
index e2bc66180d..1a6635a7dc 100644
--- a/ui/addressVerification/types.ts
+++ b/ui/addressVerification/types.ts
@@ -47,4 +47,4 @@ export type AddressValidationResponseSuccess = {
 } |
 { status: 'VALIDITY_EXPIRED_ERROR' } |
 { status: 'INVALID_SIGNATURE_ERROR' } |
-{ status: 'UNKNOWN_STATUS' }
+{ status: 'UNKNOWN_STATUS' };
diff --git a/ui/addresses/AddressesListItem.tsx b/ui/addresses/AddressesListItem.tsx
index f50a5909fa..9ed744454e 100644
--- a/ui/addresses/AddressesListItem.tsx
+++ b/ui/addresses/AddressesListItem.tsx
@@ -16,7 +16,7 @@ type Props = {
   index: number;
   totalSupply: BigNumber;
   isLoading?: boolean;
-}
+};
 
 const AddressesListItem = ({
   item,
@@ -25,7 +25,7 @@ const AddressesListItem = ({
   isLoading,
 }: Props) => {
 
-  const addressBalance = BigNumber(item.coin_balance).div(BigNumber(10 ** config.chain.currency.decimals));
+  const addressBalance = BigNumber(item.coin_balance || 0).div(BigNumber(10 ** config.chain.currency.decimals));
 
   return (
     <ListItemMobile rowGap={ 3 }>
@@ -35,6 +35,7 @@ const AddressesListItem = ({
           isLoading={ isLoading }
           fontWeight={ 700 }
           mr={ 2 }
+          truncation="constant"
         />
         <Skeleton isLoaded={ !isLoading } fontSize="sm" ml="auto" minW={ 6 } color="text_secondary">
           <span>{ index }</span>
@@ -43,9 +44,9 @@ const AddressesListItem = ({
       { item.public_tags !== null && item.public_tags.length > 0 && item.public_tags.map(tag => (
         <Tag key={ tag.label } isLoading={ isLoading }>{ tag.display_name }</Tag>
       )) }
-      <HStack spacing={ 3 }>
-        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>{ `Balance ${ currencyUnits.ether }` }</Skeleton>
-        <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary">
+      <HStack spacing={ 3 } maxW="100%" alignItems="flex-start">
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 } flexShrink={ 0 }>{ `Balance ${ currencyUnits.ether }` }</Skeleton>
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" minW="0" whiteSpace="pre-wrap">
           <span>{ addressBalance.dp(8).toFormat() }</span>
         </Skeleton>
       </HStack>
@@ -60,7 +61,7 @@ const AddressesListItem = ({
       <HStack spacing={ 3 }>
         <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Txn count</Skeleton>
         <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary">
-          <span>{ Number(item.tx_count).toLocaleString() }</span>
+          <span>{ Number(item.transaction_count).toLocaleString() }</span>
         </Skeleton>
       </HStack>
     </ListItemMobile>
diff --git a/ui/addresses/AddressesTable.tsx b/ui/addresses/AddressesTable.tsx
index 60634f96c7..be25767839 100644
--- a/ui/addresses/AddressesTable.tsx
+++ b/ui/addresses/AddressesTable.tsx
@@ -21,12 +21,11 @@ interface Props {
 const AddressesTable = ({ items, totalSupply, pageStartIndex, top, isLoading }: Props) => {
   const hasPercentage = !totalSupply.eq(ZERO);
   return (
-    <Table variant="simple" size="sm">
+    <Table>
       <Thead top={ top }>
         <Tr>
           <Th width="64px">Rank</Th>
-          <Th width={ hasPercentage ? '30%' : '40%' }>Address</Th>
-          <Th width="20%" pl={ 10 }>Public tag</Th>
+          <Th width={ hasPercentage ? '50%' : '60%' }>Address</Th>
           <Th width={ hasPercentage ? '20%' : '25%' } isNumeric>{ `Balance ${ currencyUnits.ether }` }</Th>
           { hasPercentage && <Th width="15%" isNumeric>Percentage</Th> }
           <Th width="15%" isNumeric>Txn count</Th>
diff --git a/ui/addresses/AddressesTableItem.tsx b/ui/addresses/AddressesTableItem.tsx
index 05f2f0ce0a..18ecaa1afc 100644
--- a/ui/addresses/AddressesTableItem.tsx
+++ b/ui/addresses/AddressesTableItem.tsx
@@ -1,4 +1,4 @@
-import { Tr, Td, Text, Skeleton } from '@chakra-ui/react';
+import { Tr, Td, Text, Skeleton, Flex } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -14,7 +14,7 @@ type Props = {
   totalSupply: BigNumber;
   hasPercentage: boolean;
   isLoading?: boolean;
-}
+};
 
 const AddressesTableItem = ({
   item,
@@ -24,7 +24,7 @@ const AddressesTableItem = ({
   isLoading,
 }: Props) => {
 
-  const addressBalance = BigNumber(item.coin_balance).div(BigNumber(10 ** config.chain.currency.decimals));
+  const addressBalance = BigNumber(item.coin_balance || 0).div(BigNumber(10 ** config.chain.currency.decimals));
   const addressBalanceChunks = addressBalance.dp(8).toFormat().split('.');
 
   return (
@@ -34,22 +34,22 @@ const AddressesTableItem = ({
           { index }
         </Skeleton>
       </Td>
-      <Td verticalAlign="middle">
-        <AddressEntity
-          address={ item }
-          isLoading={ isLoading }
-          fontWeight={ 700 }
-        />
-      </Td>
-      <Td pl={ 10 }>
-        { item.public_tags && item.public_tags.length ? item.public_tags.map(tag => (
-          <Tag key={ tag.label } isLoading={ isLoading } isTruncated>{ tag.display_name }</Tag>
-        )) : null }
+      <Td>
+        <Flex alignItems="center" columnGap={ 2 }>
+          <AddressEntity
+            address={ item }
+            isLoading={ isLoading }
+            fontWeight={ 700 }
+            my="2px"
+          />
+          { item.public_tags && item.public_tags.length ? item.public_tags.map(tag => (
+            <Tag key={ tag.label } isLoading={ isLoading } isTruncated>{ tag.display_name }</Tag>
+          )) : null }
+        </Flex>
       </Td>
       <Td isNumeric>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
-          <Text lineHeight="24px" as="span">{ addressBalanceChunks[0] }</Text>
-          { addressBalanceChunks[1] && <Text lineHeight="24px" as="span">.</Text> }
+        <Skeleton isLoaded={ !isLoading } display="inline-block" maxW="100%">
+          <Text lineHeight="24px" as="span">{ addressBalanceChunks[0] + (addressBalanceChunks[1] ? '.' : '') }</Text>
           <Text lineHeight="24px" variant="secondary" as="span">{ addressBalanceChunks[1] }</Text>
         </Skeleton>
       </Td>
@@ -60,7 +60,7 @@ const AddressesTableItem = ({
       ) }
       <Td isNumeric>
         <Skeleton isLoaded={ !isLoading } display="inline-block" lineHeight="24px">
-          { Number(item.tx_count).toLocaleString() }
+          { Number(item.transaction_count).toLocaleString() }
         </Skeleton>
       </Td>
     </Tr>
diff --git a/ui/addressesLabelSearch/AddressesLabelSearchListItem.tsx b/ui/addressesLabelSearch/AddressesLabelSearchListItem.tsx
new file mode 100644
index 0000000000..b0cabf576c
--- /dev/null
+++ b/ui/addressesLabelSearch/AddressesLabelSearchListItem.tsx
@@ -0,0 +1,48 @@
+import { HStack, Skeleton } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { AddressesItem } from 'types/api/addresses';
+
+import config from 'configs/app';
+import { currencyUnits } from 'lib/units';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+
+type Props = {
+  item: AddressesItem;
+  isLoading?: boolean;
+};
+
+const AddressesLabelSearchListItem = ({
+  item,
+  isLoading,
+}: Props) => {
+
+  const addressBalance = BigNumber(item.coin_balance || 0).div(BigNumber(10 ** config.chain.currency.decimals));
+
+  return (
+    <ListItemMobile rowGap={ 3 }>
+      <AddressEntity
+        address={ item }
+        isLoading={ isLoading }
+        fontWeight={ 700 }
+        w="100%"
+      />
+      <HStack spacing={ 3 } maxW="100%" alignItems="flex-start">
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 } flexShrink={ 0 }>{ `Balance ${ currencyUnits.ether }` }</Skeleton>
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" minW="0" whiteSpace="pre-wrap">
+          <span>{ addressBalance.dp(8).toFormat() }</span>
+        </Skeleton>
+      </HStack>
+      <HStack spacing={ 3 }>
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Txn count</Skeleton>
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary">
+          <span>{ Number(item.transaction_count).toLocaleString() }</span>
+        </Skeleton>
+      </HStack>
+    </ListItemMobile>
+  );
+};
+
+export default React.memo(AddressesLabelSearchListItem);
diff --git a/ui/addressesLabelSearch/AddressesLabelSearchTable.tsx b/ui/addressesLabelSearch/AddressesLabelSearchTable.tsx
new file mode 100644
index 0000000000..364bee5a9d
--- /dev/null
+++ b/ui/addressesLabelSearch/AddressesLabelSearchTable.tsx
@@ -0,0 +1,40 @@
+import { Table, Tbody, Tr, Th } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressesItem } from 'types/api/addresses';
+
+import { currencyUnits } from 'lib/units';
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import AddressesLabelSearchTableItem from './AddressesLabelSearchTableItem';
+
+interface Props {
+  items: Array<AddressesItem>;
+  top: number;
+  isLoading?: boolean;
+}
+
+const AddressesLabelSearchTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table>
+      <Thead top={ top }>
+        <Tr>
+          <Th width="70%">Address</Th>
+          <Th width="15%" isNumeric>{ `Balance ${ currencyUnits.ether }` }</Th>
+          <Th width="15%" isNumeric>Txn count</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <AddressesLabelSearchTableItem
+            key={ item.hash + (isLoading ? index : '') }
+            item={ item }
+            isLoading={ isLoading }
+          />
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default AddressesLabelSearchTable;
diff --git a/ui/addressesLabelSearch/AddressesLabelSearchTableItem.tsx b/ui/addressesLabelSearch/AddressesLabelSearchTableItem.tsx
new file mode 100644
index 0000000000..f3985ae9a3
--- /dev/null
+++ b/ui/addressesLabelSearch/AddressesLabelSearchTableItem.tsx
@@ -0,0 +1,48 @@
+import { Tr, Td, Text, Skeleton } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { AddressesItem } from 'types/api/addresses';
+
+import config from 'configs/app';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+
+type Props = {
+  item: AddressesItem;
+  isLoading?: boolean;
+};
+
+const AddressesLabelSearchTableItem = ({
+  item,
+  isLoading,
+}: Props) => {
+
+  const addressBalance = BigNumber(item.coin_balance || 0).div(BigNumber(10 ** config.chain.currency.decimals));
+  const addressBalanceChunks = addressBalance.dp(8).toFormat().split('.');
+
+  return (
+    <Tr>
+      <Td>
+        <AddressEntity
+          address={ item }
+          isLoading={ isLoading }
+          fontWeight={ 700 }
+          my="2px"
+        />
+      </Td>
+      <Td isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="inline-block" maxW="100%">
+          <Text lineHeight="24px" as="span">{ addressBalanceChunks[0] + (addressBalanceChunks[1] ? '.' : '') }</Text>
+          <Text lineHeight="24px" variant="secondary" as="span">{ addressBalanceChunks[1] }</Text>
+        </Skeleton>
+      </Td>
+      <Td isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="inline-block" lineHeight="24px">
+          { Number(item.transaction_count).toLocaleString() }
+        </Skeleton>
+      </Td>
+    </Tr>
+  );
+};
+
+export default React.memo(AddressesLabelSearchTableItem);
diff --git a/ui/advancedFilter/ColumnFilter.tsx b/ui/advancedFilter/ColumnFilter.tsx
new file mode 100644
index 0000000000..bd1d91a961
--- /dev/null
+++ b/ui/advancedFilter/ColumnFilter.tsx
@@ -0,0 +1,80 @@
+import {
+  chakra,
+  Flex,
+  Text,
+  Link,
+  Button,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import ColumnFilterWrapper from './ColumnFilterWrapper';
+
+type Props = {
+  columnName: string;
+  title: string;
+  isActive?: boolean;
+  isFilled?: boolean;
+  onFilter: () => void;
+  onReset?: () => void;
+  onClose?: () => void;
+  isLoading?: boolean;
+  className?: string;
+  children: React.ReactNode;
+};
+
+type ContentProps = {
+  title: string;
+  isFilled?: boolean;
+  onFilter: () => void;
+  onReset?: () => void;
+  onClose?: () => void;
+  children: React.ReactNode;
+};
+
+const ColumnFilterContent = ({ title, isFilled, onFilter, onReset, onClose, children }: ContentProps) => {
+  const onFilterClick = React.useCallback(() => {
+    onClose && onClose();
+    onFilter();
+  }, [ onClose, onFilter ]);
+  return (
+    <>
+      <Flex alignItems="center" justifyContent="space-between" mb={ 3 }>
+        <Text color="text_secondary" fontWeight="600">{ title }</Text>
+        <Link
+          onClick={ onReset }
+          cursor={ isFilled ? 'pointer' : 'unset' }
+          opacity={ isFilled ? 1 : 0.2 }
+          _hover={{
+            color: isFilled ? 'link_hovered' : 'none',
+          }}
+        >
+          Reset
+        </Link>
+      </Flex>
+      { children }
+      <Button
+        isDisabled={ !isFilled }
+        mt={ 4 }
+        onClick={ onFilterClick }
+        w="fit-content"
+      >
+        Filter
+      </Button>
+    </>
+  );
+};
+
+const ColumnFilter = ({ columnName, isActive, className, isLoading, ...props }: Props) => {
+  return (
+    <ColumnFilterWrapper
+      isActive={ isActive }
+      columnName={ columnName }
+      className={ className }
+      isLoading={ isLoading }
+    >
+      <ColumnFilterContent { ...props }/>
+    </ColumnFilterWrapper>
+  );
+};
+
+export default chakra(ColumnFilter);
diff --git a/ui/advancedFilter/ColumnFilterWrapper.tsx b/ui/advancedFilter/ColumnFilterWrapper.tsx
new file mode 100644
index 0000000000..184ff04def
--- /dev/null
+++ b/ui/advancedFilter/ColumnFilterWrapper.tsx
@@ -0,0 +1,57 @@
+import {
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  useDisclosure,
+  IconButton,
+  chakra,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import Popover from 'ui/shared/chakra/Popover';
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props {
+  columnName: string;
+  isActive?: boolean;
+  isLoading?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const ColumnFilterWrapper = ({ columnName, isActive, className, children, isLoading }: Props) => {
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  const child = React.Children.only(children) as React.ReactElement & {
+    ref?: React.Ref<React.ReactNode>;
+  };
+
+  const modifiedChildren = React.cloneElement(
+    child,
+    { onClose },
+  );
+
+  return (
+    <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy lazyBehavior="unmount">
+      <PopoverTrigger>
+        <IconButton
+          onClick={ onToggle }
+          aria-label={ `filter by ${ columnName }` }
+          variant="ghost"
+          w="30px"
+          h="30px"
+          icon={ <IconSvg name="filter" w="20px" h="20px"/> }
+          isActive={ isActive }
+          isDisabled={ isLoading }
+        />
+      </PopoverTrigger>
+      <PopoverContent className={ className }>
+        <PopoverBody px={ 4 } py={ 6 } display="flex" flexDir="column" rowGap={ 5 }>
+          { modifiedChildren }
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default chakra(ColumnFilterWrapper);
diff --git a/ui/advancedFilter/ColumnsButton.tsx b/ui/advancedFilter/ColumnsButton.tsx
new file mode 100644
index 0000000000..77659617a5
--- /dev/null
+++ b/ui/advancedFilter/ColumnsButton.tsx
@@ -0,0 +1,67 @@
+import {
+  Button,
+  Grid,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  useDisclosure,
+  Checkbox,
+} from '@chakra-ui/react';
+import React from 'react';
+import type { ChangeEvent } from 'react';
+
+import type { ColumnsIds } from 'ui/advancedFilter/constants';
+import { TABLE_COLUMNS } from 'ui/advancedFilter/constants';
+import Popover from 'ui/shared/chakra/Popover';
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props {
+  columns: Record<ColumnsIds, boolean>;
+  onChange: (val: Record<ColumnsIds, boolean>) => void;
+}
+
+const ColumnsButton = ({ columns, onChange }: Props) => {
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  const onCheckboxClick = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    const newCols = { ...columns };
+    const id = event.target.id as ColumnsIds;
+    newCols[id] = event.target.checked;
+    onChange(newCols);
+  }, [ onChange, columns ]);
+
+  return (
+    <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
+      <PopoverTrigger>
+        <Button
+          onClick={ onToggle }
+          variant="outline"
+          colorScheme="gray"
+          size="sm"
+          leftIcon={ <IconSvg name="columns" boxSize={ 5 } color="inherit"/> }
+        >
+          Columns
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <PopoverBody px={ 4 } py={ 6 } display="flex" flexDir="column" rowGap={ 5 }>
+          <Grid gridTemplateColumns="160px 160px" gap={ 3 }>
+            { TABLE_COLUMNS.map(col => (
+              <Checkbox
+                key={ col.id }
+                defaultChecked={ columns[col.id] }
+                onChange={ onCheckboxClick }
+                id={ col.id }
+                size="lg"
+              >
+                { col.id === 'or_and' ? 'And/Or' : col.name }
+              </Checkbox>
+            )) }
+          </Grid>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default ColumnsButton;
diff --git a/ui/advancedFilter/ExportCSV.tsx b/ui/advancedFilter/ExportCSV.tsx
new file mode 100644
index 0000000000..cade60a19c
--- /dev/null
+++ b/ui/advancedFilter/ExportCSV.tsx
@@ -0,0 +1,85 @@
+import { Button } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AdvancedFilterParams } from 'types/api/advancedFilter';
+
+import config from 'configs/app';
+import buildUrl from 'lib/api/buildUrl';
+import dayjs from 'lib/date/dayjs';
+import downloadBlob from 'lib/downloadBlob';
+import useToast from 'lib/hooks/useToast';
+import ReCaptcha from 'ui/shared/reCaptcha/ReCaptcha';
+import useReCaptcha from 'ui/shared/reCaptcha/useReCaptcha';
+
+type Props = {
+  filters: AdvancedFilterParams;
+};
+
+const ExportCSV = ({ filters }: Props) => {
+  const recaptcha = useReCaptcha();
+  const toast = useToast();
+  const [ isLoading, setIsLoading ] = React.useState(false);
+
+  const handleExportCSV = React.useCallback(async() => {
+    try {
+      setIsLoading(true);
+      const token = await recaptcha.executeAsync();
+
+      if (!token) {
+        throw new Error('ReCaptcha is not solved');
+      }
+
+      const url = buildUrl('advanced_filter_csv', undefined, {
+        ...filters,
+        recaptcha_response: token,
+      });
+
+      const response = await fetch(url, {
+        headers: {
+          'content-type': 'application/octet-stream',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error();
+      }
+
+      const blob = await response.blob();
+      const fileName = `export-filtered-txs-${ dayjs().format('YYYY-MM-DD-HH-mm-ss') }.csv`;
+      downloadBlob(blob, fileName);
+
+    } catch (error) {
+      toast({
+        position: 'top-right',
+        title: 'Error',
+        description: (error as Error)?.message || 'Something went wrong. Try again later.',
+        status: 'error',
+        variant: 'subtle',
+        isClosable: true,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [ toast, filters, recaptcha ]);
+
+  if (!config.services.reCaptchaV2.siteKey) {
+    return null;
+  }
+
+  return (
+    <>
+      <Button
+        onClick={ handleExportCSV }
+        variant="outline"
+        isLoading={ isLoading }
+        size="sm"
+        mr={ 3 }
+      >
+        Export to CSV
+      </Button>
+      <ReCaptcha ref={ recaptcha.ref }/>
+    </>
+  );
+};
+
+export default ExportCSV;
diff --git a/ui/advancedFilter/FilterByColumn.pw.tsx b/ui/advancedFilter/FilterByColumn.pw.tsx
new file mode 100644
index 0000000000..861119ae1e
--- /dev/null
+++ b/ui/advancedFilter/FilterByColumn.pw.tsx
@@ -0,0 +1,62 @@
+/* eslint-disable react/jsx-no-bind */
+import React from 'react';
+
+import { test, expect } from 'playwright/lib';
+import type { ColumnsIds } from 'ui/advancedFilter/constants';
+
+import FilterByColumn from './FilterByColumn';
+
+const columns: Array<ColumnsIds> = [
+  'type',
+  'method',
+  'age',
+  'or_and',
+  'from',
+  'to',
+  'amount',
+  'asset',
+];
+
+const filters = {
+  tx_types: [ 'coin_transfer' as const ],
+  methods: [ '0xa9059cbb' ],
+  age: '7d' as const,
+  address_relation: 'or' as const,
+  from_address_hashes_to_include: [ '0x123' ],
+  to_address_hashes_to_include: [ '0x456' ],
+  amount_from: '100',
+  token_contract_symbols_to_include: [ 'ETH' ],
+  token_contract_address_hashes_to_include: [ 'native' ],
+};
+
+const searchParams = {
+  methods: {
+    '0xa9059cbb': 'transfer',
+  },
+  tokens: {},
+};
+
+for (const column of columns) {
+  test(`${ column } filter +@dark-mode`, async({ page, render, mockApiResponse }) => {
+    await mockApiResponse('tokens', {
+      items: [],
+      next_page_params: null,
+    });
+    await mockApiResponse('advanced_filter_methods', [], { queryParams: { q: '' } });
+    await render(
+      <FilterByColumn
+        filters={ filters }
+        searchParams={ searchParams }
+        column={ column }
+        columnName="Test"
+        handleFilterChange={ () => {} }
+      />,
+    );
+
+    const filterButton = page.locator('button');
+    await filterButton.click();
+    const popover = page.locator('.chakra-popover__content');
+    await expect(popover).toBeVisible();
+    await expect(popover).toHaveScreenshot();
+  });
+}
diff --git a/ui/advancedFilter/FilterByColumn.tsx b/ui/advancedFilter/FilterByColumn.tsx
new file mode 100644
index 0000000000..3c997c1c4a
--- /dev/null
+++ b/ui/advancedFilter/FilterByColumn.tsx
@@ -0,0 +1,161 @@
+import React from 'react';
+
+import type { AdvancedFilterParams, AdvancedFiltersSearchParams } from 'types/api/advancedFilter';
+
+import type { ColumnsIds } from 'ui/advancedFilter/constants';
+import TableColumnFilterWrapper from 'ui/shared/filters/TableColumnFilterWrapper';
+
+import { NATIVE_TOKEN } from './constants';
+import type { AddressFilterMode } from './filters/AddressFilter';
+import AddressFilter from './filters/AddressFilter';
+import AddressRelationFilter from './filters/AddressRelationFilter';
+import AgeFilter from './filters/AgeFilter';
+import AmountFilter from './filters/AmountFilter';
+import type { AssetFilterMode } from './filters/AssetFilter';
+import AssetFilter from './filters/AssetFilter';
+import MethodFilter from './filters/MethodFilter';
+import TypeFilter from './filters/TypeFilter';
+
+type Props = {
+  filters: AdvancedFilterParams;
+  searchParams?: AdvancedFiltersSearchParams;
+  column: ColumnsIds;
+  columnName: string;
+  handleFilterChange: <T extends keyof AdvancedFilterParams>(field: T, val: AdvancedFilterParams[T]) => void;
+  isLoading?: boolean;
+};
+
+const FilterByColumn = ({ column, filters, columnName, handleFilterChange, searchParams, isLoading }: Props) => {
+  const commonProps = { columnName, handleFilterChange, isLoading };
+  switch (column) {
+    case 'type': {
+      const value = filters.tx_types;
+      return (
+        <TableColumnFilterWrapper
+          columnName="Type"
+          isLoading={ isLoading }
+          isActive={ Boolean(value && value.length) }
+        >
+          <TypeFilter { ...commonProps } value={ value }/>
+        </TableColumnFilterWrapper>
+      );
+    }
+    case 'method': {
+      const value = filters.methods?.map(m => ({ name: searchParams?.methods[m], method_id: m }));
+      return (
+        <TableColumnFilterWrapper
+          columnName="Method"
+          isLoading={ isLoading }
+          isActive={ Boolean(value && value.length) }
+          w="350px"
+        >
+          <MethodFilter { ...commonProps } value={ value }/>
+        </TableColumnFilterWrapper>
+      );
+    }
+    case 'age': {
+      const value = { age: filters.age || '' as const, from: filters.age_from || '', to: filters.age_to || '' };
+      return (
+        <TableColumnFilterWrapper
+          columnName="Age"
+          isLoading={ isLoading }
+          isActive={ Boolean(value.from || value.to || value.age) }
+          w="382px"
+        >
+          <AgeFilter { ...commonProps } value={ value }/>
+        </TableColumnFilterWrapper>
+      );
+    }
+    case 'or_and': {
+      return (
+        <TableColumnFilterWrapper
+          columnName="And/Or"
+          isLoading={ isLoading }
+          isActive={ false }
+          w="106px"
+          value={ filters.address_relation === 'and' ? 'AND' : 'OR' }
+        >
+          <AddressRelationFilter { ...commonProps } value={ filters.address_relation }/>
+        </TableColumnFilterWrapper>
+      );
+    }
+    case 'from': {
+      const valueInclude = filters?.from_address_hashes_to_include?.map(hash => ({ address: hash, mode: 'include' as AddressFilterMode }));
+      const valueExclude = filters?.from_address_hashes_to_exclude?.map(hash => ({ address: hash, mode: 'exclude' as AddressFilterMode }));
+
+      const value = (valueInclude || []).concat(valueExclude || []);
+      return (
+        <TableColumnFilterWrapper
+          columnName="Address from"
+          isLoading={ isLoading }
+          isActive={ Boolean(value.length) }
+          w="480px"
+        >
+          <AddressFilter { ...commonProps } type="from" value={ value }/>
+        </TableColumnFilterWrapper>
+      );
+
+    }
+    case 'to': {
+      const valueInclude = filters?.to_address_hashes_to_include?.map(hash => ({ address: hash, mode: 'include' as AddressFilterMode }));
+      const valueExclude = filters?.to_address_hashes_to_exclude?.map(hash => ({ address: hash, mode: 'exclude' as AddressFilterMode }));
+
+      const value = (valueInclude || []).concat(valueExclude || []);
+      return (
+        <TableColumnFilterWrapper
+          columnName="Address to"
+          isLoading={ isLoading }
+          isActive={ Boolean(value.length) }
+          w="480px"
+        >
+          <AddressFilter { ...commonProps } type="to" value={ value }/>
+        </TableColumnFilterWrapper>
+      );
+    }
+    case 'amount': {
+      const value = { from: filters.amount_from, to: filters.amount_to };
+      return (
+        <TableColumnFilterWrapper
+          columnName="Amount"
+          isLoading={ isLoading }
+          isActive={ Boolean(value.from || value.to) }
+          w="382px"
+        >
+          <AmountFilter { ...commonProps } value={ value }/>
+        </TableColumnFilterWrapper>
+      );
+    }
+    case 'asset': {
+      const tokens = searchParams?.tokens;
+
+      const value = tokens ?
+        Object.entries(tokens).map(([ address, token ]) => {
+          const mode = filters.token_contract_address_hashes_to_include?.find(i => i.toLowerCase() === address.toLowerCase()) ?
+            'include' as AssetFilterMode :
+            'exclude' as AssetFilterMode;
+          return ({ token, mode });
+        }) : [];
+      if (filters.token_contract_address_hashes_to_include?.includes('native')) {
+        value.unshift({ token: NATIVE_TOKEN, mode: 'include' });
+      }
+      if (filters.token_contract_address_hashes_to_exclude?.includes('native')) {
+        value.unshift({ token: NATIVE_TOKEN, mode: 'exclude' });
+      }
+      return (
+        <TableColumnFilterWrapper
+          columnName="Asset"
+          isLoading={ isLoading }
+          isActive={ Boolean(value.length) }
+          w="382px"
+        >
+          <AssetFilter { ...commonProps } value={ value }/>
+        </TableColumnFilterWrapper>
+      );
+    }
+    default: {
+      return null;
+    }
+  }
+};
+
+export default FilterByColumn;
diff --git a/ui/advancedFilter/ItemByColumn.tsx b/ui/advancedFilter/ItemByColumn.tsx
new file mode 100644
index 0000000000..c9906d158d
--- /dev/null
+++ b/ui/advancedFilter/ItemByColumn.tsx
@@ -0,0 +1,94 @@
+import { Flex, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AdvancedFilterResponseItem } from 'types/api/advancedFilter';
+
+import config from 'configs/app';
+import getCurrencyValue from 'lib/getCurrencyValue';
+import type { ColumnsIds } from 'ui/advancedFilter/constants';
+import AddressFromToIcon from 'ui/shared/address/AddressFromToIcon';
+import Tag from 'ui/shared/chakra/Tag';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+import { ADVANCED_FILTER_TYPES } from './constants';
+
+type Props = {
+  item: AdvancedFilterResponseItem;
+  column: ColumnsIds;
+  isLoading?: boolean;
+};
+
+const ItemByColumn = ({ item, column, isLoading }: Props) => {
+  switch (column) {
+    case 'tx_hash':
+      return <TxEntity truncation="constant_long" hash={ item.hash } isLoading={ isLoading } noIcon fontWeight={ 700 }/>;
+    case 'type': {
+      const type = ADVANCED_FILTER_TYPES.find(t => t.id === item.type);
+      if (!type) {
+        return null;
+      }
+      return <Tag isLoading={ isLoading }>{ type.name }</Tag>;
+    }
+    case 'method':
+      return item.method ? <Tag isLoading={ isLoading } isTruncated colorScheme="gray">{ item.method }</Tag> : null;
+    case 'age':
+      return <TimeAgoWithTooltip timestamp={ item.timestamp } isLoading={ isLoading } color="text_secondary" fontWeight={ 400 }/>;
+    case 'from':
+      return (
+        <Flex w="100%">
+          <AddressEntity address={ item.from } truncation="constant" isLoading={ isLoading }/>
+        </Flex>
+      );
+    case 'to': {
+      const address = item.to ? item.to : item.created_contract;
+      if (!address) {
+        return null;
+      }
+      return (
+        <Flex w="100%">
+          <AddressEntity address={ address } truncation="constant" isLoading={ isLoading }/>
+        </Flex>
+      );
+    }
+    case 'or_and':
+      return (
+        <AddressFromToIcon
+          isLoading={ isLoading }
+          type="unspecified"
+        />
+      );
+    case 'amount': {
+      if (item.token?.type === 'ERC-721') {
+        return <Skeleton isLoaded={ !isLoading }>1</Skeleton>;
+      }
+      if (item.total) {
+        return (
+          <Skeleton isLoaded={ !isLoading }>
+            { getCurrencyValue({ value: item.total?.value, decimals: item.total.decimals, accuracy: 8 }).valueStr }
+          </Skeleton>
+        );
+      }
+      if (item.value) {
+        return (
+          <Skeleton isLoaded={ !isLoading }>
+            { getCurrencyValue({ value: item.value, decimals: config.chain.currency.decimals.toString(), accuracy: 8 }).valueStr }
+          </Skeleton>
+        );
+      }
+      return null;
+    }
+    case 'asset':
+      return item.token ?
+        <TokenEntity token={ item.token } isLoading={ isLoading } fontWeight={ 700 } onlySymbol noCopy/> :
+        <Skeleton isLoaded={ !isLoading } fontWeight={ 700 }>{ config.chain.currency.symbol }</Skeleton>;
+    case 'fee':
+      return <Skeleton isLoaded={ !isLoading }>{ item.fee ? getCurrencyValue({ value: item.fee, accuracy: 8 }).valueStr : '-' }</Skeleton>;
+    default:
+      return null;
+  }
+};
+
+export default ItemByColumn;
diff --git a/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_age-filter-dark-mode-1.png b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_age-filter-dark-mode-1.png
new file mode 100644
index 0000000000..164459af60
Binary files /dev/null and b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_age-filter-dark-mode-1.png differ
diff --git a/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_amount-filter-dark-mode-1.png b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_amount-filter-dark-mode-1.png
new file mode 100644
index 0000000000..7429a3ea3b
Binary files /dev/null and b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_amount-filter-dark-mode-1.png differ
diff --git a/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_asset-filter-dark-mode-1.png b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_asset-filter-dark-mode-1.png
new file mode 100644
index 0000000000..c5fcb0b4b4
Binary files /dev/null and b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_asset-filter-dark-mode-1.png differ
diff --git a/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_from-filter-dark-mode-1.png b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_from-filter-dark-mode-1.png
new file mode 100644
index 0000000000..e93ea7235d
Binary files /dev/null and b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_from-filter-dark-mode-1.png differ
diff --git a/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_method-filter-dark-mode-1.png b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_method-filter-dark-mode-1.png
new file mode 100644
index 0000000000..58a5e8cdb3
Binary files /dev/null and b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_method-filter-dark-mode-1.png differ
diff --git a/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_or-and-filter-dark-mode-1.png b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_or-and-filter-dark-mode-1.png
new file mode 100644
index 0000000000..965fcbed77
Binary files /dev/null and b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_or-and-filter-dark-mode-1.png differ
diff --git a/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_to-filter-dark-mode-1.png b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_to-filter-dark-mode-1.png
new file mode 100644
index 0000000000..4af8428bf3
Binary files /dev/null and b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_to-filter-dark-mode-1.png differ
diff --git a/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_type-filter-dark-mode-1.png b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_type-filter-dark-mode-1.png
new file mode 100644
index 0000000000..2a3479a707
Binary files /dev/null and b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_type-filter-dark-mode-1.png differ
diff --git a/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_age-filter-dark-mode-1.png b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_age-filter-dark-mode-1.png
new file mode 100644
index 0000000000..badc02e3f3
Binary files /dev/null and b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_age-filter-dark-mode-1.png differ
diff --git a/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_amount-filter-dark-mode-1.png b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_amount-filter-dark-mode-1.png
new file mode 100644
index 0000000000..40fb268055
Binary files /dev/null and b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_amount-filter-dark-mode-1.png differ
diff --git a/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_asset-filter-dark-mode-1.png b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_asset-filter-dark-mode-1.png
new file mode 100644
index 0000000000..62ff47d6c3
Binary files /dev/null and b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_asset-filter-dark-mode-1.png differ
diff --git a/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_from-filter-dark-mode-1.png b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_from-filter-dark-mode-1.png
new file mode 100644
index 0000000000..7cadcd7861
Binary files /dev/null and b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_from-filter-dark-mode-1.png differ
diff --git a/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_method-filter-dark-mode-1.png b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_method-filter-dark-mode-1.png
new file mode 100644
index 0000000000..cb767076df
Binary files /dev/null and b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_method-filter-dark-mode-1.png differ
diff --git a/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_or-and-filter-dark-mode-1.png b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_or-and-filter-dark-mode-1.png
new file mode 100644
index 0000000000..115a9da519
Binary files /dev/null and b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_or-and-filter-dark-mode-1.png differ
diff --git a/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_to-filter-dark-mode-1.png b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_to-filter-dark-mode-1.png
new file mode 100644
index 0000000000..247e4a4b81
Binary files /dev/null and b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_to-filter-dark-mode-1.png differ
diff --git a/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_type-filter-dark-mode-1.png b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_type-filter-dark-mode-1.png
new file mode 100644
index 0000000000..fe404f96a7
Binary files /dev/null and b/ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_default_type-filter-dark-mode-1.png differ
diff --git a/ui/advancedFilter/constants.ts b/ui/advancedFilter/constants.ts
new file mode 100644
index 0000000000..7da669724b
--- /dev/null
+++ b/ui/advancedFilter/constants.ts
@@ -0,0 +1,106 @@
+import type { TokenInfo } from 'types/api/token';
+
+import config from 'configs/app';
+
+export type ColumnsIds = 'tx_hash' | 'type' | 'method' | 'age' | 'from' | 'or_and' | 'to' | 'amount' | 'asset' | 'fee';
+
+type TxTableColumn = {
+  id: ColumnsIds;
+  name: string;
+  width: string;
+  isNumeric?: boolean;
+};
+
+export const TABLE_COLUMNS: Array<TxTableColumn> = [
+  {
+    id: 'tx_hash',
+    name: 'Tx hash',
+    width: '180px',
+  },
+  {
+    id: 'type',
+    name: 'Type',
+    width: '160px',
+  },
+  {
+    id: 'method',
+    name: 'Method',
+    width: '160px',
+  },
+  {
+    id: 'age',
+    name: 'Age',
+    width: '80px',
+  },
+  {
+    id: 'from',
+    name: 'From',
+    width: '160px',
+  },
+  {
+    id: 'or_and',
+    name: '',
+    width: '60px',
+  },
+  {
+    id: 'to',
+    name: 'To',
+    width: '160px',
+  },
+  {
+    id: 'amount',
+    name: 'Amount',
+    isNumeric: true,
+    width: '150px',
+  },
+  {
+    id: 'asset',
+    name: 'Asset',
+    width: '120px',
+  },
+  {
+    id: 'fee',
+    name: 'Fee',
+    isNumeric: true,
+    width: '120px',
+  },
+] as const;
+
+export const ADVANCED_FILTER_TYPES = [
+  {
+    id: 'coin_transfer',
+    name: 'Coin Transfer',
+  },
+  {
+    id: 'ERC-20',
+    name: 'ERC-20',
+  },
+  {
+    id: 'ERC-404',
+    name: ' ERC-404',
+  },
+  {
+    id: 'ERC-721',
+    name: 'ERC-721',
+  },
+  {
+    id: 'ERC-1155',
+    name: 'ERC-1155',
+  },
+] as const;
+
+export const ADVANCED_FILTER_TYPES_WITH_ALL = [
+  {
+    id: 'all',
+    name: 'All',
+  },
+  ...ADVANCED_FILTER_TYPES,
+];
+
+export const NATIVE_TOKEN = {
+  name: config.chain.currency.name || '',
+  icon_url: '',
+  symbol: config.chain.currency.symbol || '',
+  address: 'native',
+  type: 'ERC-20' as const,
+} as TokenInfo;
diff --git a/ui/advancedFilter/filters/AddressFilter.tsx b/ui/advancedFilter/filters/AddressFilter.tsx
new file mode 100644
index 0000000000..9bb197a099
--- /dev/null
+++ b/ui/advancedFilter/filters/AddressFilter.tsx
@@ -0,0 +1,162 @@
+import { Flex, Select, Input, InputGroup, InputRightElement, VStack, IconButton } from '@chakra-ui/react';
+import isEqual from 'lodash/isEqual';
+import type { ChangeEvent } from 'react';
+import React from 'react';
+
+import type { AdvancedFilterParams } from 'types/api/advancedFilter';
+
+import ClearButton from 'ui/shared/ClearButton';
+import TableColumnFilter from 'ui/shared/filters/TableColumnFilter';
+import IconSvg from 'ui/shared/IconSvg';
+
+const FILTER_PARAM_TO_INCLUDE = 'to_address_hashes_to_include';
+const FILTER_PARAM_FROM_INCLUDE = 'from_address_hashes_to_include';
+const FILTER_PARAM_TO_EXCLUDE = 'to_address_hashes_to_exclude';
+const FILTER_PARAM_FROM_EXCLUDE = 'from_address_hashes_to_exclude';
+
+export type AddressFilterMode = 'include' | 'exclude';
+
+type Value = Array<{ address: string; mode: AddressFilterMode }>;
+
+type Props = {
+  value: Value;
+  handleFilterChange: (filed: keyof AdvancedFilterParams, val: Array<string> | undefined) => void;
+  columnName: string;
+  type: 'from' | 'to';
+  isLoading?: boolean;
+  onClose?: () => void;
+};
+
+type InputProps = {
+  address?: string;
+  mode?: AddressFilterMode;
+  isLast: boolean;
+  onModeChange: (event: ChangeEvent<HTMLSelectElement>) => void;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  onClear: () => void;
+  onAddFieldClick: () => void;
+};
+
+type AddressFilter = {
+  address: string;
+  mode: AddressFilterMode;
+};
+
+function addressFilterToKey(filter: AddressFilter) {
+  return `${ filter.address.toLowerCase() }-${ filter.mode }`;
+}
+
+const AddressFilterInput = ({ address, mode, onModeChange, onChange, onClear, isLast, onAddFieldClick }: InputProps) => {
+  return (
+    <Flex alignItems="center" w="100%">
+      <Select
+        size="xs"
+        borderRadius="base"
+        value={ mode || 'include' }
+        onChange={ onModeChange }
+        minW="105px"
+        w="105px"
+        mr={ 3 }
+      >
+        <option value="include">Include</option>
+        <option value="exclude">Exclude</option>
+      </Select>
+      <InputGroup size="xs" flexGrow={ 1 }>
+        <Input value={ address } onChange={ onChange } placeholder="Smart contract / Address (0x...)*" size="xs" autoComplete="off"/>
+        <InputRightElement>
+          <ClearButton onClick={ onClear } isDisabled={ !address }/>
+        </InputRightElement>
+      </InputGroup>
+      { isLast && (
+        <IconButton
+          aria-label="add"
+          variant="outline"
+          minW="30px"
+          w="30px"
+          h="30px"
+          ml={ 2 }
+          onClick={ onAddFieldClick }
+          icon={ <IconSvg name="plus" w="20px" h="20px"/> }
+        />
+      ) }
+    </Flex>
+  );
+};
+
+const emptyItem = { address: '', mode: 'include' as AddressFilterMode };
+
+const AddressFilter = ({ type, value = [], handleFilterChange, onClose }: Props) => {
+  const [ currentValue, setCurrentValue ] =
+    React.useState<Array<AddressFilter>>([ ...value, emptyItem ]);
+
+  const handleModeSelectChange = React.useCallback((index: number) => (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = event.target.value as AddressFilterMode;
+    setCurrentValue(prev => {
+      prev[index] = { ...prev[index], mode: value };
+      return [ ...prev ];
+    });
+  }, []);
+
+  const handleAddressClear = React.useCallback((index: number) => () => {
+    setCurrentValue(prev => {
+      const newVal = [ ...prev ];
+      newVal[index] = { ...newVal[index], address: '' };
+      return newVal;
+    });
+  }, []);
+
+  const handleAddressChange = React.useCallback((index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+
+    setCurrentValue(prev => {
+      const newVal = [ ...prev ];
+      newVal[index] = { ...newVal[index], address: value };
+      return newVal;
+    });
+  }, []);
+
+  const onAddFieldClick = React.useCallback(() => {
+    setCurrentValue(prev => [ ...prev, emptyItem ]);
+  }, []);
+
+  const onReset = React.useCallback(() => setCurrentValue([ emptyItem ]), []);
+
+  const onFilter = React.useCallback(() => {
+    const includeFilterParam = type === 'from' ? FILTER_PARAM_FROM_INCLUDE : FILTER_PARAM_TO_INCLUDE;
+    const excludeFilterParam = type === 'from' ? FILTER_PARAM_FROM_EXCLUDE : FILTER_PARAM_TO_EXCLUDE;
+    const includeValue = currentValue.filter(i => i.mode === 'include').map(i => i.address).filter(Boolean);
+    const excludeValue = currentValue.filter(i => i.mode === 'exclude').map(i => i.address).filter(Boolean);
+
+    handleFilterChange(includeFilterParam, includeValue.length ? includeValue : undefined);
+    handleFilterChange(excludeFilterParam, excludeValue.length ? excludeValue : undefined);
+  }, [ handleFilterChange, currentValue, type ]);
+
+  return (
+    <TableColumnFilter
+      title={ type === 'from' ? 'From address' : 'To address' }
+      isFilled={ Boolean(currentValue[0].address) }
+      isTouched={ !isEqual(currentValue.filter(i => i.address).map(addressFilterToKey).sort(), value.map(addressFilterToKey).sort()) }
+      onFilter={ onFilter }
+      onReset={ onReset }
+      onClose={ onClose }
+      hasReset
+    >
+      <VStack gap={ 2 }>
+        { currentValue.map((item, index) => (
+          <AddressFilterInput
+            key={ index }
+            address={ item.address }
+            mode={ item.mode }
+            isLast={ index === currentValue.length - 1 }
+            onModeChange={ handleModeSelectChange(index) }
+            onChange={ handleAddressChange(index) }
+            onClear={ handleAddressClear(index) }
+            onAddFieldClick={ onAddFieldClick }
+          />
+        )) }
+      </VStack>
+    </TableColumnFilter>
+  );
+};
+
+export default AddressFilter;
diff --git a/ui/advancedFilter/filters/AddressRelationFilter.tsx b/ui/advancedFilter/filters/AddressRelationFilter.tsx
new file mode 100644
index 0000000000..725e6cfd40
--- /dev/null
+++ b/ui/advancedFilter/filters/AddressRelationFilter.tsx
@@ -0,0 +1,38 @@
+import { Radio, RadioGroup, Stack, Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { type AdvancedFilterParams } from 'types/api/advancedFilter';
+
+const FILTER_PARAM = 'address_relation';
+
+type Value = 'or' | 'and';
+
+const DEFAULT_VALUE = 'or' as Value;
+
+type Props = {
+  value?: Value;
+  handleFilterChange: (filed: keyof AdvancedFilterParams, value?: string) => void;
+  columnName: string;
+  isLoading?: boolean;
+  onClose?: () => void;
+};
+
+const AddressRelationFilter = ({ value = DEFAULT_VALUE, handleFilterChange, onClose }: Props) => {
+  const onFilter = React.useCallback((val: Value) => {
+    onClose && onClose();
+    handleFilterChange(FILTER_PARAM, val);
+  }, [ handleFilterChange, onClose ]);
+
+  return (
+    <Box w="120px">
+      <RadioGroup onChange={ onFilter } value={ value }>
+        <Stack direction="column">
+          <Radio value="or">OR</Radio>
+          <Radio value="and">AND</Radio>
+        </Stack>
+      </RadioGroup>
+    </Box>
+  );
+};
+
+export default AddressRelationFilter;
diff --git a/ui/advancedFilter/filters/AgeFilter.tsx b/ui/advancedFilter/filters/AgeFilter.tsx
new file mode 100644
index 0000000000..370407e518
--- /dev/null
+++ b/ui/advancedFilter/filters/AgeFilter.tsx
@@ -0,0 +1,110 @@
+import { Flex, Input, Text } from '@chakra-ui/react';
+import isEqual from 'lodash/isEqual';
+import type { ChangeEvent } from 'react';
+import React from 'react';
+
+import { ADVANCED_FILTER_AGES, type AdvancedFilterAge, type AdvancedFilterParams } from 'types/api/advancedFilter';
+
+import dayjs from 'lib/date/dayjs';
+import { ndash } from 'lib/html-entities';
+import TableColumnFilter from 'ui/shared/filters/TableColumnFilter';
+import TagGroupSelect from 'ui/shared/tagGroupSelect/TagGroupSelect';
+
+import { getDurationFromAge } from '../lib';
+
+const FILTER_PARAM_FROM = 'age_from';
+const FILTER_PARAM_TO = 'age_to';
+const FILTER_PARAM_AGE = 'age';
+
+const defaultValue = { age: '', from: '', to: '' } as const;
+type AgeFromToValue = { age: AdvancedFilterAge | ''; from: string; to: string };
+
+type Props = {
+  value?: AgeFromToValue;
+  handleFilterChange: (filed: keyof AdvancedFilterParams, value?: string) => void;
+  columnName: string;
+  isLoading?: boolean;
+  onClose?: () => void;
+};
+
+const AgeFilter = ({ value = defaultValue, handleFilterChange, onClose }: Props) => {
+  const [ currentValue, setCurrentValue ] = React.useState<AgeFromToValue>({
+    age: value.age,
+    from: value.age ? '' : value.from,
+    to: value.age ? '' : value.to,
+  });
+
+  const handleFromChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setCurrentValue(prev => ({ age: '', to: prev.to, from: event.target.value }));
+  }, []);
+
+  const handleToChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setCurrentValue(prev => ({ age: '', from: prev.from, to: event.target.value }));
+  }, []);
+
+  const onPresetChange = React.useCallback((age: AdvancedFilterAge) => {
+    const from = dayjs((dayjs().valueOf() - getDurationFromAge(age))).toISOString();
+    handleFilterChange(FILTER_PARAM_FROM, from);
+    const to = dayjs().toISOString();
+    handleFilterChange(FILTER_PARAM_TO, to);
+    handleFilterChange(FILTER_PARAM_AGE, age);
+    onClose && onClose();
+  }, [ onClose, handleFilterChange ]);
+
+  const onReset = React.useCallback(() => setCurrentValue(defaultValue), []);
+
+  const onFilter = React.useCallback(() => {
+    if (!currentValue.age && !currentValue.to && !currentValue.from) {
+      handleFilterChange(FILTER_PARAM_FROM, undefined);
+      handleFilterChange(FILTER_PARAM_TO, undefined);
+      handleFilterChange(FILTER_PARAM_AGE, undefined);
+      return;
+    }
+    const from = currentValue.age ?
+      dayjs((dayjs().valueOf() - getDurationFromAge(currentValue.age))).toISOString() :
+      dayjs(currentValue.from).startOf('day').toISOString();
+    handleFilterChange(FILTER_PARAM_FROM, from);
+    const to = currentValue.age ? dayjs().toISOString() : dayjs(currentValue.to).endOf('day').toISOString();
+    handleFilterChange(FILTER_PARAM_TO, to);
+    handleFilterChange(FILTER_PARAM_AGE, currentValue.age);
+  }, [ handleFilterChange, currentValue ]);
+
+  return (
+    <TableColumnFilter
+      title="Set last duration"
+      isFilled={ Boolean(currentValue.from || currentValue.to || currentValue.age) }
+      isTouched={ value.age ? value.age !== currentValue.age : !isEqual(currentValue, value) }
+      onFilter={ onFilter }
+      onReset={ onReset }
+      onClose={ onClose }
+      hasReset
+    >
+      <Flex gap={ 3 }>
+        <TagGroupSelect<AdvancedFilterAge>
+          items={ ADVANCED_FILTER_AGES.map(val => ({ id: val, title: val })) }
+          onChange={ onPresetChange }
+          value={ currentValue.age || undefined }
+        />
+      </Flex>
+      <Flex mt={ 3 }>
+        <Input
+          value={ currentValue.age ? '' : dayjs(currentValue.from).format('YYYY-MM-DD') }
+          onChange={ handleFromChange }
+          placeholder="From"
+          type="date"
+          size="xs"
+        />
+        <Text mx={ 3 }>{ ndash }</Text>
+        <Input
+          value={ currentValue.age ? '' : dayjs(currentValue.to).format('YYYY-MM-DD') }
+          onChange={ handleToChange }
+          placeholder="To"
+          type="date"
+          size="xs"
+        />
+      </Flex>
+    </TableColumnFilter>
+  );
+};
+
+export default AgeFilter;
diff --git a/ui/advancedFilter/filters/AmountFilter.tsx b/ui/advancedFilter/filters/AmountFilter.tsx
new file mode 100644
index 0000000000..df64eb08e6
--- /dev/null
+++ b/ui/advancedFilter/filters/AmountFilter.tsx
@@ -0,0 +1,106 @@
+import { Flex, Input, Tag, Text } from '@chakra-ui/react';
+import isEqual from 'lodash/isEqual';
+import type { ChangeEvent } from 'react';
+import React from 'react';
+
+import type { AdvancedFilterParams } from 'types/api/advancedFilter';
+
+import { ndash } from 'lib/html-entities';
+import TableColumnFilter from 'ui/shared/filters/TableColumnFilter';
+
+const FILTER_PARAM_FROM = 'amount_from';
+const FILTER_PARAM_TO = 'amount_to';
+
+const PRESETS = [
+  {
+    value: '10',
+    name: '<10',
+  },
+  {
+    value: '100',
+    name: '<100',
+  },
+  {
+    value: '1000',
+    name: '<1K',
+  },
+  {
+    value: '10000',
+    name: '<10K',
+  },
+  {
+    value: '100000',
+    name: '<100K',
+  },
+  {
+    value: '1000000',
+    name: '<1M',
+  },
+];
+
+const defaultValue = { from: '', to: '' };
+type AmountValue = { from?: string; to?: string };
+
+type Props = {
+  value?: AmountValue;
+  handleFilterChange: (filed: keyof AdvancedFilterParams, value?: string) => void;
+  onClose?: () => void;
+};
+
+const AmountFilter = ({ value = {}, handleFilterChange, onClose }: Props) => {
+  const [ currentValue, setCurrentValue ] = React.useState<AmountValue>(value || defaultValue);
+
+  const handleFromChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setCurrentValue(prev => ({ ...prev, from: event.target.value }));
+  }, []);
+
+  const handleToChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setCurrentValue(prev => ({ ...prev, to: event.target.value }));
+  }, []);
+
+  const onReset = React.useCallback(() => setCurrentValue(defaultValue), []);
+
+  const onFilter = React.useCallback(() => {
+    handleFilterChange(FILTER_PARAM_FROM, currentValue.from);
+    handleFilterChange(FILTER_PARAM_TO, currentValue.to);
+  }, [ handleFilterChange, currentValue ]);
+
+  const onPresetClick = React.useCallback((event: React.SyntheticEvent) => {
+    const to = (event.currentTarget as HTMLDivElement).getAttribute('data-id') as string;
+    handleFilterChange(FILTER_PARAM_FROM, '');
+    handleFilterChange(FILTER_PARAM_TO, to);
+    onClose && onClose();
+  }, [ handleFilterChange, onClose ]);
+
+  return (
+    <TableColumnFilter
+      title="Amount"
+      isFilled={ Boolean(currentValue.from || currentValue.to) }
+      isTouched={ !isEqual(currentValue, value) }
+      onFilter={ onFilter }
+      onReset={ onReset }
+      onClose={ onClose }
+      hasReset
+    >
+      <Flex gap={ 3 }>
+        { PRESETS.map(preset => (
+          <Tag
+            key={ preset.value }
+            data-id={ preset.value }
+            onClick={ onPresetClick }
+            variant="select"
+          >
+            { preset.name }
+          </Tag>
+        )) }
+      </Flex>
+      <Flex mt={ 3 } alignItems="center">
+        <Input value={ currentValue.from } onChange={ handleFromChange } placeholder="From" type="number" size="xs"/>
+        <Text mx={ 3 }>{ ndash }</Text>
+        <Input value={ currentValue.to } onChange={ handleToChange } placeholder="To" type="number" size="xs"/>
+      </Flex>
+    </TableColumnFilter>
+  );
+};
+
+export default AmountFilter;
diff --git a/ui/advancedFilter/filters/AssetFilter.tsx b/ui/advancedFilter/filters/AssetFilter.tsx
new file mode 100644
index 0000000000..048e8aeddb
--- /dev/null
+++ b/ui/advancedFilter/filters/AssetFilter.tsx
@@ -0,0 +1,169 @@
+import { Flex, Checkbox, CheckboxGroup, Text, Spinner, Select } from '@chakra-ui/react';
+import isEqual from 'lodash/isEqual';
+import React from 'react';
+
+import type { AdvancedFilterParams } from 'types/api/advancedFilter';
+import type { TokenInfo } from 'types/api/token';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import useDebounce from 'lib/hooks/useDebounce';
+import Tag from 'ui/shared/chakra/Tag';
+import ClearButton from 'ui/shared/ClearButton';
+import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import FilterInput from 'ui/shared/filters/FilterInput';
+import TableColumnFilter from 'ui/shared/filters/TableColumnFilter';
+import NativeTokenIcon from 'ui/shared/NativeTokenIcon';
+
+import { NATIVE_TOKEN } from '../constants';
+
+const FILTER_PARAM_INCLUDE = 'token_contract_address_hashes_to_include';
+const FILTER_PARAM_EXCLUDE = 'token_contract_address_hashes_to_exclude';
+const NAME_PARAM_INCLUDE = 'token_contract_symbols_to_include';
+const NAME_PARAM_EXCLUDE = 'token_contract_symbols_to_exclude';
+
+export type AssetFilterMode = 'include' | 'exclude';
+
+// add native token
+type Value = Array<{ token: TokenInfo; mode: AssetFilterMode }>;
+
+type Props = {
+  value: Value;
+  handleFilterChange: (filed: keyof AdvancedFilterParams, val: Array<string>) => void;
+  columnName: string;
+  isLoading?: boolean;
+  onClose?: () => void;
+};
+
+const AssetFilter = ({ value = [], handleFilterChange, onClose }: Props) => {
+  const [ currentValue, setCurrentValue ] = React.useState<Value>([ ...value ]);
+  const [ searchTerm, setSearchTerm ] = React.useState<string>('');
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+
+  const onSearchChange = React.useCallback((value: string) => {
+    setSearchTerm(value);
+  }, []);
+
+  const handleModeSelectChange = React.useCallback((index: number) => (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = event.target.value as AssetFilterMode;
+    setCurrentValue(prev => {
+      const newValue = [ ...prev ];
+      newValue[index] = { ...prev[index], mode: value };
+      return newValue;
+    });
+  }, []);
+
+  const handleRemove = React.useCallback((index: number) => () => {
+    setCurrentValue(prev => {
+      prev.splice(index, 1);
+      return [ ...prev ];
+    });
+  }, []);
+
+  const tokensQuery = useApiQuery('tokens', {
+    queryParams: { limit: debouncedSearchTerm ? undefined : '7', q: debouncedSearchTerm },
+    queryOptions: {
+      refetchOnMount: false,
+    },
+  });
+
+  const onTokenClick = React.useCallback((token: TokenInfo) => () => {
+    setCurrentValue(prev => prev.findIndex(i => i.token.address === token.address) > -1 ? prev : [ { token, mode: 'include' }, ...prev ]);
+  }, []);
+
+  const onReset = React.useCallback(() => setCurrentValue([]), []);
+
+  const onFilter = React.useCallback(() => {
+    setSearchTerm('');
+    handleFilterChange(FILTER_PARAM_INCLUDE, currentValue.filter(i => i.mode === 'include').map(i => i.token.address));
+    handleFilterChange(NAME_PARAM_INCLUDE, currentValue.filter(i => i.mode === 'include').map(i => i.token.symbol || ''));
+    handleFilterChange(FILTER_PARAM_EXCLUDE, currentValue.filter(i => i.mode === 'exclude').map(i => i.token.address));
+    handleFilterChange(NAME_PARAM_EXCLUDE, currentValue.filter(i => i.mode === 'exclude').map(i => i.token.symbol || ''));
+    return;
+  }, [ handleFilterChange, currentValue ]);
+
+  return (
+    <TableColumnFilter
+      title="Asset"
+      isFilled={ Boolean(currentValue.length) }
+      isTouched={ !isEqual(currentValue.map(i => JSON.stringify(i)).sort(), value.map(i => JSON.stringify(i)).sort()) }
+      onFilter={ onFilter }
+      onReset={ onReset }
+      onClose={ onClose }
+      hasReset
+    >
+      <FilterInput
+        size="xs"
+        onChange={ onSearchChange }
+        placeholder="Token name or symbol"
+        initialValue={ searchTerm }
+      />
+      { !searchTerm && currentValue.map((item, index) => (
+        <Flex key={ item.token.address } alignItems="center">
+          <Select
+            size="xs"
+            borderRadius="base"
+            value={ item.mode }
+            onChange={ handleModeSelectChange(index) }
+            minW="105px"
+            w="105px"
+            mr={ 3 }
+          >
+            <option value="include">Include</option>
+            <option value="exclude">Exclude</option>
+          </Select>
+          <TokenEntity.default token={ item.token } noLink noCopy flexGrow={ 1 }/>
+          <ClearButton onClick={ handleRemove(index) }/>
+        </Flex>
+      )) }
+      { tokensQuery.isLoading && <Spinner display="block" mt={ 3 }/> }
+      { tokensQuery.data && !searchTerm && (
+        <>
+          <Text color="text_secondary" fontWeight="600" mt={ 3 }>Popular</Text>
+          <Flex rowGap={ 3 } flexWrap="wrap" gap={ 3 } mb={ 2 }>
+            { [ NATIVE_TOKEN, ...tokensQuery.data.items ].map(token => (
+              <Tag
+                key={ token.address }
+                data-id={ token.address }
+                onClick={ onTokenClick(token) }
+                variant="select"
+              >
+                <Flex flexGrow={ 1 } alignItems="center">
+                  { token.address === NATIVE_TOKEN.address ? <NativeTokenIcon boxSize={ 5 }/> : <TokenEntity.Icon token={ token }/> }
+                  { token.symbol || token.name || token.address }
+                </Flex>
+              </Tag>
+            )) }
+          </Flex>
+        </>
+      ) }
+      { searchTerm && tokensQuery.data && !tokensQuery.data?.items.length && <Text>No tokens found</Text> }
+      { searchTerm && tokensQuery.data && Boolean(tokensQuery.data?.items.length) && (
+        <Flex display="flex" flexDir="column" rowGap={ 3 } maxH="250px" overflowY="scroll" mt={ 3 } ml="-4px">
+          <CheckboxGroup value={ currentValue.map(i => i.token.address) }>
+            { tokensQuery.data.items.map(token => (
+              <Flex key={ token.address }>
+                <Checkbox
+                  value={ token.address }
+                  id={ token.address }
+                  onChange={ onTokenClick(token) }
+                  overflow="hidden"
+                  w="100%"
+                  pl={ 1 }
+                  sx={{
+                    '.chakra-checkbox__label': {
+                      flexGrow: 1,
+                    },
+                  }}
+                >
+                  <TokenEntity.default token={ token } noLink noCopy/>
+                </Checkbox>
+              </Flex>
+            )) }
+          </CheckboxGroup>
+        </Flex>
+      ) }
+    </TableColumnFilter>
+  );
+};
+
+export default AssetFilter;
diff --git a/ui/advancedFilter/filters/MethodFilter.tsx b/ui/advancedFilter/filters/MethodFilter.tsx
new file mode 100644
index 0000000000..93bc65e45d
--- /dev/null
+++ b/ui/advancedFilter/filters/MethodFilter.tsx
@@ -0,0 +1,123 @@
+import { Flex, Checkbox, CheckboxGroup, Spinner, chakra } from '@chakra-ui/react';
+import differenceBy from 'lodash/differenceBy';
+import isEqual from 'lodash/isEqual';
+import type { ChangeEvent } from 'react';
+import React from 'react';
+
+import type { AdvancedFilterMethodInfo, AdvancedFilterParams } from 'types/api/advancedFilter';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import useDebounce from 'lib/hooks/useDebounce';
+import Tag from 'ui/shared/chakra/Tag';
+import FilterInput from 'ui/shared/filters/FilterInput';
+import TableColumnFilter from 'ui/shared/filters/TableColumnFilter';
+
+const RESET_VALUE = 'all';
+
+const FILTER_PARAM = 'methods';
+const NAMES_PARAM = 'methods_names';
+
+type Props = {
+  value?: Array<AdvancedFilterMethodInfo>;
+  handleFilterChange: (filed: keyof AdvancedFilterParams, val: Array<string>) => void;
+  onClose?: () => void;
+};
+
+const MethodFilter = ({ value = [], handleFilterChange, onClose }: Props) => {
+  const [ currentValue, setCurrentValue ] = React.useState<Array<AdvancedFilterMethodInfo>>([ ...value ]);
+  const [ searchTerm, setSearchTerm ] = React.useState<string>('');
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+  const [ methodsList, setMethodsList ] = React.useState<Array<AdvancedFilterMethodInfo>>([]);
+
+  const onSearchChange = React.useCallback((value: string) => {
+    setSearchTerm(value);
+  }, []);
+
+  const methodsQuery = useApiQuery('advanced_filter_methods', {
+    queryParams: { q: debouncedSearchTerm },
+    queryOptions: { refetchOnMount: false },
+  });
+
+  React.useEffect(() => {
+    if (!methodsList.length && methodsQuery.data) {
+      setMethodsList([ ...value, ...differenceBy(methodsQuery.data, value, i => i.method_id) ]);
+    }
+  }, [ methodsQuery.data, value, methodsList ]);
+
+  const handleChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    const checked = event.target.checked;
+    const id = event.target.id as string | typeof RESET_VALUE;
+    if (id === RESET_VALUE) {
+      setCurrentValue([]);
+      setMethodsList(methodsQuery.data || []);
+    } else {
+      const methodInfo = methodsQuery.data?.find(m => m.method_id === id);
+      if (methodInfo) {
+        setCurrentValue(prev => {
+          return checked ? [ ...prev, methodInfo ] : prev.filter(i => i.method_id !== id);
+        });
+        searchTerm && checked &&
+        setMethodsList(prev => [ methodInfo, ...(prev.filter(m => m.method_id !== id) || []) ]);
+      }
+    }
+  }, [ methodsQuery.data, searchTerm ]);
+
+  const onReset = React.useCallback(() => setCurrentValue([]), []);
+
+  const onFilter = React.useCallback(() => {
+    handleFilterChange(FILTER_PARAM, currentValue.map(item => item.method_id));
+    handleFilterChange(NAMES_PARAM, currentValue.map(item => item.name || ''));
+  }, [ handleFilterChange, currentValue ]);
+
+  return (
+    <TableColumnFilter
+      title="Method"
+      isFilled={ Boolean(currentValue.length) }
+      isTouched={ !isEqual(currentValue.map(i => JSON.stringify(i)).sort(), value.map(i => JSON.stringify(i)).sort()) }
+      onFilter={ onFilter }
+      onReset={ onReset }
+      onClose={ onClose }
+      hasReset
+    >
+      <FilterInput
+        size="xs"
+        onChange={ onSearchChange }
+        placeholder="Find by function name/ method ID"
+        mb={ 3 }
+      />
+      { methodsQuery.isLoading && <Spinner/> }
+      { methodsQuery.isError && <span>Something went wrong. Please try again.</span> }
+      { Boolean(searchTerm) && methodsQuery.data?.length === 0 && <span>No results found.</span> }
+      { methodsQuery.data && (
+        // added negative margin because of checkbox focus styles & overflow hidden
+        <Flex display="flex" flexDir="column" rowGap={ 3 } maxH="250px" overflowY="scroll" ml="-4px">
+          <CheckboxGroup value={ currentValue.length ? currentValue.map(i => i.method_id) : [ RESET_VALUE ] }>
+            { (searchTerm ? methodsQuery.data : (methodsList || [])).map(method => (
+              <Checkbox
+                key={ method.method_id }
+                value={ method.method_id }
+                id={ method.method_id }
+                onChange={ handleChange }
+                pl={ 1 }
+                sx={{
+                  '.chakra-checkbox__label': {
+                    flexGrow: 1,
+                  },
+                }}
+              >
+                <Flex justifyContent="space-between" alignItems="center" id={ method.method_id }>
+                  <chakra.span overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis">{ method.name || method.method_id }</chakra.span>
+                  <Tag colorScheme="gray" isTruncated ml={ 2 }>
+                    { method.method_id }
+                  </Tag>
+                </Flex>
+              </Checkbox>
+            )) }
+          </CheckboxGroup>
+        </Flex>
+      ) }
+    </TableColumnFilter>
+  );
+};
+
+export default MethodFilter;
diff --git a/ui/advancedFilter/filters/TypeFilter.tsx b/ui/advancedFilter/filters/TypeFilter.tsx
new file mode 100644
index 0000000000..f3a61c2562
--- /dev/null
+++ b/ui/advancedFilter/filters/TypeFilter.tsx
@@ -0,0 +1,70 @@
+import { Flex, Checkbox, CheckboxGroup } from '@chakra-ui/react';
+import isEqual from 'lodash/isEqual';
+import without from 'lodash/without';
+import type { ChangeEvent } from 'react';
+import React from 'react';
+
+import type { AdvancedFilterParams, AdvancedFilterType } from 'types/api/advancedFilter';
+
+import TableColumnFilter from 'ui/shared/filters/TableColumnFilter';
+
+import { ADVANCED_FILTER_TYPES_WITH_ALL } from '../constants';
+
+const RESET_VALUE = 'all';
+
+const FILTER_PARAM = 'tx_types';
+
+type Props = {
+  value?: Array<AdvancedFilterType>;
+  handleFilterChange: (filed: keyof AdvancedFilterParams, value: Array<AdvancedFilterType>) => void;
+  onClose?: () => void;
+};
+
+const TypeFilter = ({ value = [], handleFilterChange, onClose }: Props) => {
+  const [ currentValue, setCurrentValue ] = React.useState<Array<AdvancedFilterType>>([ ...value ]);
+
+  const handleChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    const checked = event.target.checked;
+    const id = event.target.id as AdvancedFilterType | typeof RESET_VALUE;
+    if (id === RESET_VALUE) {
+      setCurrentValue([]);
+    } else {
+      setCurrentValue(prev => checked ? [ ...prev, id ] : without(prev, id));
+    }
+  }, []);
+
+  const onReset = React.useCallback(() => setCurrentValue([]), []);
+
+  const onFilter = React.useCallback(() => {
+    handleFilterChange(FILTER_PARAM, currentValue);
+  }, [ handleFilterChange, currentValue ]);
+
+  return (
+    <TableColumnFilter
+      title="Type of transfer"
+      isFilled={ currentValue.length > 0 }
+      isTouched={ !isEqual(currentValue.sort(), value.sort()) }
+      onFilter={ onFilter }
+      onReset={ onReset }
+      onClose={ onClose }
+      hasReset
+    >
+      <Flex display="flex" flexDir="column" rowGap={ 3 }>
+        <CheckboxGroup value={ currentValue.length ? currentValue : [ RESET_VALUE ] }>
+          { ADVANCED_FILTER_TYPES_WITH_ALL.map(type => (
+            <Checkbox
+              key={ type.id }
+              value={ type.id }
+              id={ type.id }
+              onChange={ handleChange }
+            >
+              { type.name }
+            </Checkbox>
+          )) }
+        </CheckboxGroup>
+      </Flex>
+    </TableColumnFilter>
+  );
+};
+
+export default TypeFilter;
diff --git a/ui/advancedFilter/lib.ts b/ui/advancedFilter/lib.ts
new file mode 100644
index 0000000000..3b8380fde2
--- /dev/null
+++ b/ui/advancedFilter/lib.ts
@@ -0,0 +1,113 @@
+import castArray from 'lodash/castArray';
+
+import type { AdvancedFilterAge, AdvancedFilterParams } from 'types/api/advancedFilter';
+
+import { HOUR, DAY, MONTH } from 'lib/consts';
+import dayjs from 'lib/date/dayjs';
+
+import { ADVANCED_FILTER_TYPES } from './constants';
+
+export function getDurationFromAge(age: AdvancedFilterAge) {
+  switch (age) {
+    case '1h':
+      return HOUR;
+    case '24h':
+      return DAY;
+    case '7d':
+      return DAY * 7;
+    case '1m':
+      return MONTH;
+    case '3m':
+      return MONTH * 3;
+    case '6m':
+      return MONTH * 6;
+  }
+}
+
+function getFilterValueWithNames(values?: Array<string>, names?: Array<string>) {
+  if (!names) {
+    return castArray(values).join(', ');
+  } else if (Array.isArray(names) && Array.isArray(values)) {
+    return names.map((n, i) => n ? n : values[i]).join(', ');
+  } else {
+    return names;
+  }
+}
+
+const filterParamNames: Record<keyof AdvancedFilterParams, string> = {
+  // we don't show address_relation as filter tag
+  address_relation: '',
+  age: 'Age',
+  age_from: 'Date from',
+  age_to: 'Date to',
+  amount_from: 'Amount from',
+  amount_to: 'Amount to',
+  from_address_hashes_to_exclude: 'From Exc',
+  from_address_hashes_to_include: 'From',
+  methods: 'Methods',
+  methods_names: '',
+  to_address_hashes_to_exclude: 'To Exc',
+  to_address_hashes_to_include: 'To',
+  token_contract_address_hashes_to_exclude: 'Asset Exc',
+  token_contract_symbols_to_exclude: '',
+  token_contract_address_hashes_to_include: 'Asset',
+  token_contract_symbols_to_include: '',
+  tx_types: 'Type',
+};
+
+export function getFilterTags(filters: AdvancedFilterParams) {
+  const filtersToShow = { ...filters };
+  if (filtersToShow.age) {
+    filtersToShow.age_from = undefined;
+    filtersToShow.age_to = undefined;
+  }
+
+  return (Object.entries(filtersToShow) as Array<[keyof AdvancedFilterParams, AdvancedFilterParams[keyof AdvancedFilterParams]]>).map(([ key, value ]) => {
+    if (!value) {
+      return;
+    }
+    const name = filterParamNames[key as keyof AdvancedFilterParams];
+    if (!name) {
+      return;
+    }
+    let valueStr;
+    switch (key) {
+      case 'methods': {
+        valueStr = getFilterValueWithNames(filtersToShow.methods, filtersToShow.methods_names);
+        break;
+      }
+      case 'tx_types': {
+        valueStr = castArray(value).map(i => ADVANCED_FILTER_TYPES.find(t => t.id === i)?.name).filter(Boolean).join(', ');
+        break;
+      }
+      case 'token_contract_address_hashes_to_exclude': {
+        valueStr = getFilterValueWithNames(filtersToShow.token_contract_address_hashes_to_exclude, filtersToShow.token_contract_symbols_to_exclude);
+        break;
+      }
+      case 'token_contract_address_hashes_to_include': {
+        valueStr = getFilterValueWithNames(filtersToShow.token_contract_address_hashes_to_include, filtersToShow.token_contract_symbols_to_include);
+        break;
+      }
+      case 'age_from': {
+        valueStr = dayjs(filtersToShow.age_from).format('YYYY-MM-DD');
+        break;
+      }
+      case 'age_to': {
+        valueStr = dayjs(filtersToShow.age_to).format('YYYY-MM-DD');
+        break;
+      }
+      default: {
+        valueStr = castArray(value).join(', ');
+      }
+    }
+    if (!valueStr) {
+      return;
+    }
+
+    return {
+      key: key as keyof AdvancedFilterParams,
+      name,
+      value: valueStr,
+    };
+  }).filter(Boolean);
+}
diff --git a/ui/apiKey/ApiKeyModal/ApiKeyForm.tsx b/ui/apiKey/ApiKeyModal/ApiKeyForm.tsx
index b1f6bf4aa8..a781d43f11 100644
--- a/ui/apiKey/ApiKeyModal/ApiKeyForm.tsx
+++ b/ui/apiKey/ApiKeyModal/ApiKeyForm.tsx
@@ -1,15 +1,11 @@
 import {
   Box,
   Button,
-  FormControl,
-  FormLabel,
-  Input,
-  useColorModeValue,
 } from '@chakra-ui/react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import React, { useCallback } from 'react';
-import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
-import { useForm, Controller } from 'react-hook-form';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm, FormProvider } from 'react-hook-form';
 
 import type { ApiKey, ApiKeys, ApiKeyErrors } from 'types/api/account';
 
@@ -17,23 +13,23 @@ import type { ResourceErrorAccount } from 'lib/api/resources';
 import { resourceKey } from 'lib/api/resources';
 import useApiFetch from 'lib/api/useApiFetch';
 import getErrorMessage from 'lib/getErrorMessage';
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
+import FormFieldText from 'ui/shared/forms/fields/FormFieldText';
 
 type Props = {
   data?: ApiKey;
   onClose: () => void;
   setAlertVisible: (isAlertVisible: boolean) => void;
-}
+};
 
 type Inputs = {
   token: string;
   name: string;
-}
+};
 
 const NAME_MAX_LENGTH = 255;
 
 const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
-  const { control, handleSubmit, formState: { errors, isDirty }, setError } = useForm<Inputs>({
+  const formApi = useForm<Inputs>({
     mode: 'onTouched',
     defaultValues: {
       token: data?.api_key || '',
@@ -42,7 +38,6 @@ const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
   });
   const apiFetch = useApiFetch();
   const queryClient = useQueryClient();
-  const formBackgroundColor = useColorModeValue('white', 'gray.900');
 
   const updateApiKey = (data: Inputs) => {
     const body = { name: data.name };
@@ -57,7 +52,7 @@ const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
     });
   };
 
-  const mutation = useMutation({
+  const { mutateAsync, isPending } = useMutation({
     mutationFn: updateApiKey,
     onSuccess: async(data) => {
       const response = data as unknown as ApiKey;
@@ -83,78 +78,54 @@ const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
     onError: (error: ResourceErrorAccount<ApiKeyErrors>) => {
       const errorMap = error.payload?.errors;
       if (errorMap?.name) {
-        setError('name', { type: 'custom', message: getErrorMessage(errorMap, 'name') });
+        formApi.setError('name', { type: 'custom', message: getErrorMessage(errorMap, 'name') });
       } else if (errorMap?.identity_id) {
-        setError('name', { type: 'custom', message: getErrorMessage(errorMap, 'identity_id') });
+        formApi.setError('name', { type: 'custom', message: getErrorMessage(errorMap, 'identity_id') });
       } else {
         setAlertVisible(true);
       }
     },
   });
 
-  const onSubmit: SubmitHandler<Inputs> = useCallback((data) => {
+  const onSubmit: SubmitHandler<Inputs> = useCallback(async(data) => {
     setAlertVisible(false);
-    mutation.mutate(data);
-  }, [ mutation, setAlertVisible ]);
-
-  const renderTokenInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'token'>}) => {
-    return (
-      <FormControl variant="floating" id="address">
-        <Input
-          { ...field }
-          isDisabled={ true }
-        />
-        <FormLabel data-in-modal="true">Auto-generated API key token</FormLabel>
-      </FormControl>
-    );
-  }, []);
-
-  const renderNameInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'name'>}) => {
-    return (
-      <FormControl variant="floating" id="name" isRequired backgroundColor={ formBackgroundColor }>
-        <Input
-          { ...field }
-          isInvalid={ Boolean(errors.name) }
-          maxLength={ NAME_MAX_LENGTH }
-        />
-        <InputPlaceholder text="Application name for API key (e.g Web3 project)" error={ errors.name }/>
-      </FormControl>
-    );
-  }, [ errors, formBackgroundColor ]);
+    await mutateAsync(data);
+  }, [ mutateAsync, setAlertVisible ]);
 
   return (
-    <form noValidate onSubmit={ handleSubmit(onSubmit) }>
-      { data && (
-        <Box marginBottom={ 5 }>
-          <Controller
+    <FormProvider { ...formApi }>
+      <form noValidate onSubmit={ formApi.handleSubmit(onSubmit) }>
+        { data && (
+          <FormFieldText<Inputs>
             name="token"
-            control={ control }
-            render={ renderTokenInput }
+            placeholder="Auto-generated API key token"
+            isReadOnly
+            bgColor="dialog_bg"
+            mb={ 5 }
           />
-        </Box>
-      ) }
-      <Box marginBottom={ 8 }>
-        <Controller
+        ) }
+        <FormFieldText<Inputs>
           name="name"
-          control={ control }
+          placeholder="Application name for API key (e.g Web3 project)"
+          isRequired
           rules={{
             maxLength: NAME_MAX_LENGTH,
-            required: true,
           }}
-          render={ renderNameInput }
+          bgColor="dialog_bg"
+          mb={ 8 }
         />
-      </Box>
-      <Box marginTop={ 8 }>
-        <Button
-          size="lg"
-          type="submit"
-          isDisabled={ !isDirty }
-          isLoading={ mutation.isPending }
-        >
-          { data ? 'Save' : 'Generate API key' }
-        </Button>
-      </Box>
-    </form>
+        <Box marginTop={ 8 }>
+          <Button
+            size="lg"
+            type="submit"
+            isDisabled={ !formApi.formState.isDirty }
+            isLoading={ isPending }
+          >
+            { data ? 'Save' : 'Generate API key' }
+          </Button>
+        </Box>
+      </form>
+    </FormProvider>
   );
 };
 
diff --git a/ui/apiKey/ApiKeyModal/ApiKeyModal.tsx b/ui/apiKey/ApiKeyModal/ApiKeyModal.tsx
index d48c6478ad..7a3a4131b4 100644
--- a/ui/apiKey/ApiKeyModal/ApiKeyModal.tsx
+++ b/ui/apiKey/ApiKeyModal/ApiKeyModal.tsx
@@ -10,7 +10,7 @@ type Props = {
   isOpen: boolean;
   onClose: () => void;
   data?: ApiKey;
-}
+};
 
 const ApiKeyModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
   const title = data ? 'Edit API key' : 'New API key';
diff --git a/ui/apiKey/ApiKeyTable/ApiKeyTable.tsx b/ui/apiKey/ApiKeyTable/ApiKeyTable.tsx
index 467f025484..2f2c4aaea4 100644
--- a/ui/apiKey/ApiKeyTable/ApiKeyTable.tsx
+++ b/ui/apiKey/ApiKeyTable/ApiKeyTable.tsx
@@ -21,7 +21,7 @@ interface Props {
 
 const ApiKeyTable = ({ data, isLoading, onDeleteClick, onEditClick, limit }: Props) => {
   return (
-    <Table variant="simple" minWidth="600px">
+    <Table minWidth="600px">
       <Thead>
         <Tr>
           <Th>{ `API key token (limit ${ limit } keys)` }</Th>
diff --git a/ui/apiKey/DeleteApiKeyModal.tsx b/ui/apiKey/DeleteApiKeyModal.tsx
index 6751da04e8..a84465ee11 100644
--- a/ui/apiKey/DeleteApiKeyModal.tsx
+++ b/ui/apiKey/DeleteApiKeyModal.tsx
@@ -12,7 +12,7 @@ type Props = {
   isOpen: boolean;
   onClose: () => void;
   data: ApiKey;
-}
+};
 
 const DeleteApiKeyModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
   const queryClient = useQueryClient();
diff --git a/ui/blob/BlobData.pw.tsx b/ui/blob/BlobData.pw.tsx
new file mode 100644
index 0000000000..fa1a947875
--- /dev/null
+++ b/ui/blob/BlobData.pw.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { test, expect } from 'playwright/lib';
+
+import BlobData from './BlobData';
+import imageBlobWithZeroesBytes from './image_with_zeroes.blob';
+
+test.use({ viewport: { width: 500, height: 300 } });
+
+test('text', async({ render }) => {
+  // eslint-disable-next-line max-len
+  const data = '0xE2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A280E2A3A4E2A1B6E2A0BFE2A0BFE2A0B7E2A3B6E2A384E2A080E2A080E2A080E2A080E2A0800AE2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A3B0E2A1BFE2A081E2A080E2A080E2A280E2A380E2A180E2A099E2A3B7E2A180E2A080E2A080E2A0800AE2A080E2A080E2A080E2A180E2A080E2A080E2A080E2A080E2A080E2A2A0E2A3BFE2A081E2A080E2A080E2A080E2A098E2A0BFE2A083E2A080E2A2B8E2A3BFE2A3BFE2A3BFE2A3BF0AE2A080E2A3A0E2A1BFE2A09BE2A2B7E2A3A6E2A180E2A080E2A080E2A088E2A3BFE2A184E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A3B8E2A3BFE2A3BFE2A3BFE2A09F0AE2A2B0E2A1BFE2A081E2A080E2A080E2A099E2A2BFE2A3A6E2A3A4E2A3A4E2A3BCE2A3BFE2A384E2A080E2A080E2A080E2A080E2A080E2A2B4E2A19FE2A09BE2A08BE2A081E2A0800AE2A3BFE2A087E2A080E2A080E2A080E2A080E2A080E2A089E2A089E2A089E2A089E2A089E2A081E2A080E2A080E2A080E2A080E2A080E2A088E2A3BFE2A180E2A080E2A080E2A0800AE2A3BFE2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A2B9E2A187E2A080E2A080E2A0800AE2A3BFE2A186E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A3BCE2A187E2A080E2A080E2A0800AE2A0B8E2A3B7E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A2A0E2A1BFE2A080E2A080E2A080E2A0800AE2A080E2A0B9E2A3B7E2A3A4E2A380E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A380E2A3B0E2A1BFE2A081E2A080E2A080E2A080E2A0800AE2A080E2A080E2A080E2A089E2A099E2A09BE2A0BFE2A0B6E2A3B6E2A3B6E2A3B6E2A3B6E2A3B6E2A0B6E2A0BFE2A09FE2A09BE2A089E2A080E2A080E2A080E2A080E2A080E2A080';
+  const component = await render(<BlobData hash="0x01" data={ data }/>);
+  await expect(component).toHaveScreenshot();
+  await component.getByRole('button', { name: 'Raw' }).click();
+  await component.getByText('UTF-8').click();
+  await expect(component).toHaveScreenshot();
+});
+
+test('image', async({ render }) => {
+  // eslint-disable-next-line max-len
+  const data = '0x89504E470D0A1A0A0000000D494844520000003C0000003C0403000000C8D2C4410000000467414D410000B18F0BFC6105000000017352474200AECE1CE900000027504C54454C69712B6CB02A6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB0F4205A540000000C74524E5300ED2F788CD91B99475C09B969CFA99D0000004F7A5458745261772070726F66696C65207479706520697074630000789CE3CA2C2849E6520003230B2E630B1323134B9314031320448034C3640323B35420CBD8D4C8C4CCC41CC407CB8048A04A2E0028950EE32A226D1F0000000970485973000084DF000084DF0195C81C33000000F24944415438CB636000018E983367CE482780D90CDA40F6991D0C4820152472A60ACCE6DA03629F4E40929E03961602B39964C09C0624691B24690E88F48461215D03160903B3D962C01C07842C2758C341A80643B0B40484C3646C6C5C78E6E016171723A8E215262EEE31670E161B1B7731304C05AB155EC08002C0D172E6F80206884DBB50651938CF4003FE0CBA4390E3C56064482F53525252C329CD562A2828283A0197340B22AAB0494332C311FCD2C747A547A58996C69998D8F12745B68DA0846C85331B2CEAE8E8681A81D91F8B348C4605D0527B02A4283FA88026CD05163EAAC0900ED21EC9800EC0C2110C002BBA9FE999B920330000000049454E44AE426082';
+  const component = await render(<BlobData hash="0x01" data={ data }/>);
+  await expect(component).toHaveScreenshot();
+  await component.getByRole('button', { name: 'Image' }).click();
+  await component.getByText('Base64').click();
+  await expect(component).toHaveScreenshot();
+});
+
+test('image blob with zeroes bytes', async({ render }) => {
+  const component = await render(<BlobData hash="0x01" data={ imageBlobWithZeroesBytes }/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/blob/BlobData.tsx b/ui/blob/BlobData.tsx
new file mode 100644
index 0000000000..cfa9a31615
--- /dev/null
+++ b/ui/blob/BlobData.tsx
@@ -0,0 +1,133 @@
+import { Flex, GridItem, Skeleton, Button } from '@chakra-ui/react';
+import React from 'react';
+
+import * as blobUtils from 'lib/blob';
+import removeNonSignificantZeroBytes from 'lib/blob/removeNonSignificantZeroBytes';
+import bytesToBase64 from 'lib/bytesToBase64';
+import downloadBlob from 'lib/downloadBlob';
+import hexToBase64 from 'lib/hexToBase64';
+import hexToBytes from 'lib/hexToBytes';
+import hexToUtf8 from 'lib/hexToUtf8';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import RawDataSnippet from 'ui/shared/RawDataSnippet';
+import Select from 'ui/shared/select/Select';
+
+import BlobDataImage from './BlobDataImage';
+
+const FORMATS = [
+  { label: 'Image', value: 'Image' as const },
+  { label: 'Raw', value: 'Raw' as const },
+  { label: 'UTF-8', value: 'UTF-8' as const },
+  { label: 'Base64', value: 'Base64' as const },
+];
+
+type Format = typeof FORMATS[number]['value'];
+
+interface Props {
+  data: string;
+  hash: string;
+  isLoading?: boolean;
+}
+
+const BlobData = ({ data, isLoading, hash }: Props) => {
+  const [ format, setFormat ] = React.useState<Format>('Raw');
+
+  const guessedType = React.useMemo(() => {
+    if (isLoading) {
+      return;
+    }
+    return blobUtils.guessDataType(data);
+  }, [ data, isLoading ]);
+
+  const isImage = guessedType?.mime?.startsWith('image/');
+  const formats = isImage ? FORMATS : FORMATS.filter((format) => format.value !== 'Image');
+
+  React.useEffect(() => {
+    if (isImage) {
+      setFormat('Image');
+    }
+  }, [ isImage ]);
+
+  const handleDownloadButtonClick = React.useCallback(() => {
+    const fileBlob = (() => {
+      switch (format) {
+        case 'Image': {
+          const bytes = hexToBytes(data);
+          const filteredBytes = removeNonSignificantZeroBytes(bytes);
+          return new Blob([ filteredBytes ], { type: guessedType?.mime });
+        }
+        case 'UTF-8': {
+          return new Blob([ hexToUtf8(data) ], { type: guessedType?.mime ?? 'text/plain' });
+        }
+        case 'Base64': {
+          return new Blob([ hexToBase64(data) ], { type: 'application/octet-stream' });
+        }
+        case 'Raw': {
+          return new Blob([ data ], { type: 'application/octet-stream' });
+        }
+      }
+    })();
+    const fileName = `blob_${ hash }`;
+
+    downloadBlob(fileBlob, fileName);
+  }, [ data, format, guessedType, hash ]);
+
+  const content = (() => {
+    switch (format) {
+      case 'Image': {
+        if (!guessedType?.mime?.startsWith('image/')) {
+          return <RawDataSnippet data="Not an image" showCopy={ false } isLoading={ isLoading }/>;
+        }
+
+        const bytes = hexToBytes(data);
+        const filteredBytes = removeNonSignificantZeroBytes(bytes);
+        const base64 = bytesToBase64(filteredBytes);
+
+        const imgSrc = `data:${ guessedType.mime };base64,${ base64 }`;
+
+        return <BlobDataImage src={ imgSrc }/>;
+      }
+      case 'UTF-8':
+        return <RawDataSnippet data={ hexToUtf8(data) } showCopy={ false } isLoading={ isLoading } contentProps={{ wordBreak: 'break-word' }}/>;
+      case 'Base64':
+        return <RawDataSnippet data={ hexToBase64(data) } showCopy={ false } isLoading={ isLoading }/>;
+      case 'Raw':
+        return <RawDataSnippet data={ data } showCopy={ false } isLoading={ isLoading }/>;
+      default:
+        return <span/>;
+    }
+  })();
+
+  return (
+    <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 2 }}>
+      <Flex alignItems="center" mb={ 3 }>
+        <Skeleton fontWeight={{ base: 700, lg: 500 }} isLoaded={ !isLoading }>
+          Blob data
+        </Skeleton>
+        <Skeleton ml={ 5 } isLoaded={ !isLoading }>
+          <Select
+            options={ formats }
+            name="format"
+            defaultValue={ format }
+            onChange={ setFormat }
+            isLoading={ isLoading }
+            w="95px"
+          />
+        </Skeleton>
+        <Skeleton ml="auto" mr={ 3 } isLoaded={ !isLoading }>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={ handleDownloadButtonClick }
+          >
+            Download
+          </Button>
+        </Skeleton>
+        <CopyToClipboard text={ data } isLoading={ isLoading }/>
+      </Flex>
+      { content }
+    </GridItem>
+  );
+};
+
+export default React.memo(BlobData);
diff --git a/ui/blob/BlobDataImage.tsx b/ui/blob/BlobDataImage.tsx
new file mode 100644
index 0000000000..8cc8e54323
--- /dev/null
+++ b/ui/blob/BlobDataImage.tsx
@@ -0,0 +1,31 @@
+import { Image, Center, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  src: string;
+}
+
+const BlobDataImage = ({ src }: Props) => {
+  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  return (
+    <Center
+      bgColor={ bgColor }
+      p={ 4 }
+      minH="200px"
+      w="100%"
+      borderRadius="md"
+    >
+      <Image
+        src={ src }
+        objectFit="contain"
+        maxW="100%"
+        maxH="100%"
+        objectPosition="center"
+        alt="Blob image representation"
+      />
+    </Center>
+  );
+};
+
+export default React.memo(BlobDataImage);
diff --git a/ui/blob/BlobInfo.tsx b/ui/blob/BlobInfo.tsx
new file mode 100644
index 0000000000..cf746d6ed2
--- /dev/null
+++ b/ui/blob/BlobInfo.tsx
@@ -0,0 +1,112 @@
+import { Alert, Grid, GridItem, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { Blob } from 'types/api/blobs';
+
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
+import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+
+import BlobData from './BlobData';
+
+interface Props {
+  data: Blob;
+  isLoading?: boolean;
+}
+
+const BlobInfo = ({ data, isLoading }: Props) => {
+  return (
+    <Grid
+      columnGap={ 8 }
+      rowGap={ 3 }
+      templateColumns={{ base: 'minmax(0, 1fr)', lg: '216px minmax(728px, auto)' }}
+    >
+      { !data.blob_data && (
+        <GridItem colSpan={{ base: undefined, lg: 2 }} mb={ 3 }>
+          <Skeleton isLoaded={ !isLoading }>
+            <Alert status="warning">This blob is not yet indexed</Alert>
+          </Skeleton>
+        </GridItem>
+      ) }
+
+      { data.kzg_proof && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Zero knowledge proof. Allows for quick verification of commitment"
+            isLoading={ isLoading }
+          >
+            Proof
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !isLoading } overflow="hidden" whiteSpace="pre-wrap" wordBreak="break-all" lineHeight={ 6 } my="-2px">
+              { data.kzg_proof }
+              <CopyToClipboard text={ data.kzg_proof } isLoading={ isLoading }/>
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { data.kzg_commitment && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Commitment to the data in the blob"
+            isLoading={ isLoading }
+          >
+            Commitment
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !isLoading } overflow="hidden" whiteSpace="pre-wrap" wordBreak="break-all" lineHeight={ 6 } my="-2px">
+              { data.kzg_commitment }
+              <CopyToClipboard text={ data.kzg_commitment } isLoading={ isLoading }/>
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { data.blob_data && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Blob size in bytes"
+            isLoading={ isLoading }
+          >
+            Size, bytes
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !isLoading } overflow="hidden" whiteSpace="pre-wrap" wordBreak="break-all">
+              { (data.blob_data.replace('0x', '').length / 2).toLocaleString() }
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { data.blob_data && <DetailsInfoItemDivider/> }
+
+      { data.transaction_hashes[0] && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Hash of the transaction with this blob"
+            isLoading={ isLoading }
+          >
+            Transaction hash
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <TxEntity hash={ data.transaction_hashes[0].transaction_hash } isLoading={ isLoading } noIcon noCopy={ false }/>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      <DetailsSponsoredItem isLoading={ isLoading }/>
+
+      { data.blob_data && (
+        <>
+          <DetailsInfoItemDivider/>
+          <BlobData data={ data.blob_data } hash={ data.hash } isLoading={ isLoading }/>
+        </>
+      ) }
+    </Grid>
+  );
+};
+
+export default React.memo(BlobInfo);
diff --git a/ui/blob/__screenshots__/BlobData.pw.tsx_default_image-1.png b/ui/blob/__screenshots__/BlobData.pw.tsx_default_image-1.png
new file mode 100644
index 0000000000..61a4d4f221
Binary files /dev/null and b/ui/blob/__screenshots__/BlobData.pw.tsx_default_image-1.png differ
diff --git a/ui/blob/__screenshots__/BlobData.pw.tsx_default_image-2.png b/ui/blob/__screenshots__/BlobData.pw.tsx_default_image-2.png
new file mode 100644
index 0000000000..ac97087934
Binary files /dev/null and b/ui/blob/__screenshots__/BlobData.pw.tsx_default_image-2.png differ
diff --git a/ui/blob/__screenshots__/BlobData.pw.tsx_default_image-blob-with-zeroes-bytes-1.png b/ui/blob/__screenshots__/BlobData.pw.tsx_default_image-blob-with-zeroes-bytes-1.png
new file mode 100644
index 0000000000..ab25d0fba0
Binary files /dev/null and b/ui/blob/__screenshots__/BlobData.pw.tsx_default_image-blob-with-zeroes-bytes-1.png differ
diff --git a/ui/blob/__screenshots__/BlobData.pw.tsx_default_text-1.png b/ui/blob/__screenshots__/BlobData.pw.tsx_default_text-1.png
new file mode 100644
index 0000000000..7a9602212c
Binary files /dev/null and b/ui/blob/__screenshots__/BlobData.pw.tsx_default_text-1.png differ
diff --git a/ui/blob/__screenshots__/BlobData.pw.tsx_default_text-2.png b/ui/blob/__screenshots__/BlobData.pw.tsx_default_text-2.png
new file mode 100644
index 0000000000..2e98fb041f
Binary files /dev/null and b/ui/blob/__screenshots__/BlobData.pw.tsx_default_text-2.png differ
diff --git a/ui/blob/image_with_zeroes.blob.ts b/ui/blob/image_with_zeroes.blob.ts
new file mode 100644
index 0000000000..7c9eb4ed8a
--- /dev/null
+++ b/ui/blob/image_with_zeroes.blob.ts
@@ -0,0 +1,3 @@
+// eslint-disable-next-line max-len
+const data = '0x00ffd8ffe000104a46494600010100000100010000ffe201d84943435f50524f0046494c45000101000001c800000000043000006d6e74725247422058595a200007e0000100010000000000006163737000000000000000000000000000000000000000000000000000000000010000f6d6000100000000d32d00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000964657363000000f0000000247258595a0000000114000000146758595a00000128000000146258595a0000013c000000001477747074000001500000001472545243000001640000002867545243000000016400000028625452430000016400000028637072740000018c0000003c6d006c756300000000000000010000000c656e5553000000080000001c00730052000047004258595a200000000000006fa2000038f50000039058595a200000000000000062990000b785000018da58595a2000000000000024a000000f84000000b6cf58595a20000000000000f6d6000100000000d32d70617261000000000000040000000266660000f2a700000d59000013d000000a5b0000000000000000006d6c756300000000000000010000000c656e5553000000200000001c004700006f006f0067006c006500200049006e0063002e00200032003000310036ffdb00004300010101010101010101010101010101010101010101010101010101010001010101010101010101010101010101010101010101010101010101010101000101010101ffdb004301010101010101010101010101010101010101010101000101010101010101010101010101010101010101010101010101010101010100010101010101010101010101ffc0001108019001900301110002110103110100ffc4001f000100010402030100000000000000000000010708090a02060305000b04ffc4005d100001020404040306030603020809080b0102030405112100000607310841516112718109131491a1f0b1c1d10a151622e1f117233218422400333952627278b619373843778293b7c225264853565792a22735444754668300a3a6b3d3ffc4001d01010001040301000000000000000000000001020304050006070809ffc4005911000102040305060404030600080b06070102110003040021053141061251617107138191a1f022b1c1d1081432e11542f1162333526200722443455382a2b2c2252634353654739293b3d2094463647583171827658400a4b4ffda000c03010002110311003f00f9ff00e1086108610861086108610800610861086108610861086108610861086108610861089009200049240000a90024d80005c926c00df084558cbba17ab39a12f392cc913965860b617113a6d900cbacb85c5bed8f855cf5d9718ff76ec33adc47c0089f8473dda62bdc975af100f68ecc762bdaa6d7bab04d88c6d720212b15988c8460943312b240322b71a9009414d544149de4534d9cb40214b4a52a04e42296a267e892beaa1b83c0aca4001f0262ba48b832cd1125a5664ce52293b6e309794893c0c74fe2185b90c8750010afa229597d80fb710a5c2c5a9889898768b6a7e15e8e6d480aefdc03f05500b715a8913768f69f67b0044d4854c91452ab31daea6743f773656ee1744b9a0085ba2677188ce921b7a5cf999466230b9a5b7e6211c4005645bfe887d0ddb90098ac328e1074ca022988999cc3354f10cbcd38a80899841414be29b4a00758008bfddd2d8799fbb75cf12d2a829a413cda3c2d871641717dcf83fe0b3b3ca3005489b8d6d16d4e32b96a42a648a799876174751ba0efa264b45155d62252cd00da4e212a6a47c226b82a8c94e172436fae6288cd8a520f8312c7929f9c54d9003e81e8fc8e3188e82c8727887e1d4e2da44e171f9860c8792a496df96cfe3200672e8b4a02c86be2a15f5364256921d4058ed2c33f0d7d896173a4cf93b0f400953364a8a93fc4f12c6b1294b371fdf52d76273e8a7062fb9369d6870e120b0018c84d0d2a588940917f894a5798258f421a3bbc3e47c9708971a82c9d94e0009a796a5b8c40e5b92c14329c340a57c3c2c0b4cd7c206cd800505a829d834900d9bf675429228b60762e912e1ff2fb2f824a2a2d62a32e892a592c03a892460065b2bc24491949943a4b40f908ecd05596c3220e5c7e020db484370b0558580066d09144a10c31eeda4a40164a52001602d8e4b47856154084caa2c330fa2900681ba89749474d4c8400186e2644a9694a4337c2001c85a2e04a40609481c0000005f3b08e44a9649528a89a9a935249352493526db9a81ccf218cf76b0006004e437239002d7f10fd44c1254829285149dea0d0835352082286b7fa0c0a8100cc039f4661c5f33d0daed7844468332865c1cc7fe1f06e27c0e42c6ffc2a19006850f0a92b61ef78d292454292a41143420d71afabc2f0aaf96b955d8661f500d2d60854baba2a6a996a49674a913a5ad2a0cee0821b94414a55fa9292f9b80005fcfa08eaf1191f2545a5b6e33276548e6597038db11d96e4b1d0c8580521007f0f1502f326809176c8a1db738e3757d9bf6775c9ddaed81d8caa4dca454600cbe09354330e83328894a80243a485072c43806d99124e72651eb2d07e623a0044e340f47a7919111d1b90e4ec3f12a694e264eb8ecbd069f749424261e5b20008b96cba110b4a007be1211953854b714af7ab2b3d7d897e1afb13c526ce9f003b61a969a74e502bfe1b8963585ca410024095494388c8a392180f864d3a1200a3bca52092a2ab2aa1a55124ca009ff2a9691e49501e914d271c20699c7c5300d132c986699121f79c7132f8698c146cbe15a536434c41fef296c44cfddb6e0000b52e36691aeb892a6fc68252b4756631f82deceeb173a6e0db43b55832a60015aa5c99d370ec528e41206ea25cb99454b58a96955c89d884e98a0e0cc4820008c7561720beeae625f4252a03901ba0f9a89e714767bc1966886f7aacb79c0064538436ca9d4a26f031f21887968875b8b8665308acc10fef9d884a2161170011150d0ce9703d14fc0b614074ced07e0ab6e28933e66ce6d3ecf63e89482b009522b65d66055d52420932a54a2313a144e52c044bfcc6252649077d73a58b004632f0b9a1f726216da17413d07c41faa80e7142f316866ace574b4e4cf24400e1f65e2b098892a19cc4c3650a61bff852e42f4c7e03de3912d370ff001c2100be2dcf78985f7c5977c1d05b4dd8a76a9b22cac6f6231b4482852cd661d4e900c6e865a52529267d6e0b32be9a9492a1ba8aa9b256b0e509525248c3994b51002bf5ca5b66e91be9039946f01e244527208241041048208a10458820dc106c0041db1d5d18f11842184218421842184218421842184218421842184218421800421842184218421842184218421842184218421842184218421842184218420018421842184218422a8e46d19d45d42532ee5fcbd12995b8eb2854fa69596c0095b6dd70a16fb7171090b98221802e453528666318d202690ca5baca1cecbd0087ec83b44ed0d6856ccecd56d450929dfc62b0270ec1a5a7bc12d6b4e235a6004c8aa54924aa6d3d09aaab4a4129a75581bf2a9a7ceff0e5923fcc7e147fef001b1e81cf28bbaca1c1ac860fe162f3be658c9d4436e30fbf2991342592b516005d5a9d827665121e99c74245a12d256f4343c8631a429f6d95a1d2d44b7ebf00d8cfc1661b23b9a9dbdda99d5d304c94b5e15b352ff29464215bcb953716af0092baaa8953834b589141874f969dfeeea1331485cbd94ac2d22f3a613fe996001878a9572fc920f3e173f9534e7246486d94655caf27943ac174a63da854bd003757be429b703b3a8b311367d25b5bad21b7a356d36dbcf36ca1b6dd712bf50056c9f655d9cec3a65ff66764b06a09f294568c46653ff10c592a50209fe2d80081aac482589025a6a84b46f10842428bec65d3c894dddcb4a48fe66757fef100757ac77420f5efb5458d76a57ccd6b5fa760ef8d3ede3c1b2fb5a2f44786b6002079803a9a53cc7dd6c6adf19be8c731a7b2dab5816684026d7adabe95fa9b0079dcf3e51bde570efc3d2f9dc8c9f83a005bd48af3a1f3048b1dbd79d70de00033d7e5e0e0e87a65704420523bf7f4a505297e74dfd70df1a7cf4624f21a8200097b4214a509bd0d4501277b6d4b0006f5e83960142e35676e99872cc46bfd0059003a5efb11b0e7bec7e408248186f747b105ede0dcdf4b36908537dc53e4007f1b75df7aee5586f86f3cbf766f9bf1b420050dab737f974a5ae79f216dee00de19e9e6d9b1719bf2763e88786fccf3352695e56e7b6c49b6e45aadf1ccdd00b2f5e9fbf030852e398a937ad473e95f43bf4b571215c8837b3176fa73bb710021e10f08a7cbb5fa80297bf7f0df6008c415b3ddfc7319f4e77373e04a1e1100b8b9008bec6c45ff000f4eb86f0e77f3e56e0743e6d08809edf303a1d87a8a0083e86a2b892af1e02f93b70391eb08e999af4e72367869d466acaf299bbcf1006caa60ec3866703dc36969b4b539832c4d58425b6da6cb4d46a1a750cb2dbc008710d2129ebddadecabb39db94ccfed36c8e0f88544c5a662b10974e70fc5800903741fe2d872a931254b01b7a52aa8c956ea77e5ab752d66653c89dfe24a400a8bbef36eaadfea4b29b93b45b066fe0da431822a2b246658e93c42dd79e6200553e6d3329580eba92dc23531864b13281858541752dbd130f3d8b790961b70096a73dec52fcabb65f82bc36777d53b07b555143354b98b97856d2ca157463007d5bc9912f15a0928aba7952412997df61f88cf5a0244d9ca9815317af9b8500a4b99330a4e899971d378070068e951e2758b47cf5a33a89a76a79dcc397e200152a69e79a44fe567f79491d436e06db7d7170e92b97b7141497211a9bb12e008c750540c2a5c65f6daf1f6dc7643da1f678a5af69b66eb29e80294118c51e00ee23832d226f752d6ac428ccd934a67a8a4c9a7aff00ca55a92a4934e92e0600b27534f91fe22081a2832927c52ecfa0531e20452dc75ac5886108610861080061086108610861086108610861086108610861086108610861086108610861000861086108610861086108610861086108aefa71c3bea16a1a588f103fc3590075e4a5d44f67cd3d0e98c654965c4392897f8531b336de69f0e43c6210cca900e2d3ed099a5f694d63bb7b38ec07b43ed20c9aba1c37f82e013082ada1c7130036928a64b281302e824141acc4c2d25a5cda490ba3ef3e09d572194a4e5c8a0039d3d8a53b88ff003aec3fe88cd5d406e2445f4e43e1a74cf241868b8897af00364ee1d4a70cd331a1a7e19b794c065460e469aca98690a0a89833188994c20012297ef9a9915b30aa67de5d9efe17bb36d8a34f5b89d21db3c72429333f3b008eca42b0e933bba32d4693024a974225ef133650c4bf89cf9338226caa842e005cb29dbc9c3e44a62a1deab37581ba2da2326d7e2de6e36117009484a42520002529484a52004a5200a2401b0012289000a580d857d1d2e5cb952d12a5211200a54b4265ca972d2944b972d09094225a100250842404a52901294800000011009d6d2c341c044d3b76a52b526fca9d7a93d8e2b7f4f1f9f2844529fa539f3100f9fdd312fc4e8de571c3d5d8741089a01bfe7d6f5e7cb954f7df0249279e7e00bec741c042229dff00bde9bd0f2fadef6c1f316d3d3dddfac2269dc6e3e5d70095afcc8bef887cba742dcf5b65ca1116b7cbbfe5b9e9d3b60f9dfc1f837c8700d210a57f2dbf3fbfc707f5b7be8de9c21134e5fd6b5dbafa52d7e94c4fdbe800dc3df18447a74e5f2fd7bef8876f979da1134d8017fd493eb5a8a7c872c4bf004361f26b787df363080036ee7f1279f9fc86c4d2a77e19365c1bcf21cba42100e1efc8f317de94a50d3b8bd77e78876e1a79f8e673f330852dc8f3e55bf2f9001f4ea0d712fc2dd1e10e676a5c585bcc5b726a45f7e831048d6d6d4fbf01c000723087cb61f8f9d2b7ef6de94b1f4b7d7eff0048429d08f3eb5f3bd07a6de8006497f1cf2cf8d80605b5b78c214d8fade879d3d7f1bdebb987f5fdbdf0f4840029ebdfcae7efe83077e1cbd4b71d5e110529502950052a052a49150524514000a4820822a083635a6c0e295a11350b953108992e62148992d690b42d0a052b0042d0a052a42924a54950208241041845bfe7de1a74d33b9898c625eaca53b8008525cfde99750d310cb752c161262e44a0995bed38af0c4c59836a5b1f191400dfbe7664971e8a53fe71ed07f0bdd9b6dafe62b70ca456c6e3938999f9ec06005a13874d9c25f769357812948a032f7809b3bf877f0ba89f3b7a6cea952e6400c2bc19d87c89ae520ca59bba3f493cd06cdfeddd3ce2c5b51f877d42d3b4bf001ea81fe24cbaca54eae7b2169e884423294bee2dc9b4bfc263a58db2d305c80088c5b6f4a992e32d19917dd4b58f06768fd807689d9bf7f595d86ff1ad9f940049fed0e0699957452a5841595e214fb82b70c12c27766ceab908a3135a5caa00c9c5492ad44fa29f21c94efa07f3a2e07fb87ea4f3246ebd81314231d25189000c210c210c210c210c210c210c210c210c210c210c210c210c210c210c210c00210c210c210c210c210c210c210c211dfb21699e71d49997eefcad2a5c4b6d00a9023a6912a30b2796b6a5b485391b1eb49405212ea5ef83864c4cc5f652e200e160a23dda80e6fb0bd9d6d7768d8a0c2b657099b5cb4141acae987b8c330d0094b501df57d72c77525206f2d3253de55d4250b4d2d34f989dc8bd2644d9ea00dd9697e2a364a47151d3a5c9d018c89698f0cd91b22b70f309e30c673cca8200dbdf1d34851fba65ce9654871a96c95c75f857bdd38e92dcc26498b8bf7b0f000f1d02d4a5e0594fd12ecbbf0b9b19b1229b13da8453ed96d22372685d6c8200701c3e6eeac2934385cede456291de7c3598a227abbc9526aa92970f9c186e00a9f0f95299533fbd999dc7c00f24eadc54fc40498b912a2a254a254a51254a0026aa249a9249a9249b93b9bdef8f502592024240003000300320c136602c18006561666d844624a89f26d7c795f5843adbefe74f9e1bc4677b6afc723d73bb00bda10bd3977ec2bdbbf23dbb6054486b31e0fc8eb7e5c336843ec77fe95b7600be0f717b0e835ebc9ef67e59a1ebf5fa7af4e780511cf3f0e9e86f99d1ef08007ddbe9b73ebfae04b12737caedcf205db5be79c217dbeed7f973fae009cb2100a70e418d9bea5c92d0876f5dbece0f66ebc067e2186ad7bdb2b42183b3316b003d80377235cade275844ff007f3fed7fad30737caec5ecf62e2c35e3eb6844007f6b52fe7d7cfb76c0a9f5b58f89b9b1b10ef9fca10c4ef3e8340eecd99b3900b007e5a3864307b5b9e8c2e6fab6bad830e3087dfe34fba76b571049367b7400b30d45ba9cacd6c83203e5bfdfdec7e786f5c72bdef7fab641f23ab421fd3b006df7ebb9c495177e447b7bb6b95f22ed643eff00bf4fbf41258646dc3a785900b4b5afac227e5cbbfe54f3af3eb887cdc8cb2e37c8f9977cfc4184462778f10016d18807cbe45817bf0843d3d0fe36f9ee3f2c46f173cf3176cafe79f1e79b00a1b721f3a8f9f7edb72277c378e7619e9ef33c2ed9bb0843efefef972c09cd00bc5b8b8d75c9df89cf8a2429492149252a49052a048208350411420837046c006fbe0485050500a4a92c52458836208208219ed931391308b6dd4ee19b23e700a4444c644c31933332fde3bf192b854fee898bc1969286e67256dc62199f7800b67fcc984ac42457be898a8f8e6a6eff008593e5ded47f0b9b17b6a2a314d90084c8d8dda45efcd52a8a47fe01c46694cb0135b85cb29451ad465deaf0b1200085ce9f53574988cf50035f5187ca9aea96d2a66761f02baa74ea96cc921463001db9f74d338e9b4c952ecd32a721db538b4414d61bc5132699a12a584bb0130000842165684178c244261e62c36a418b83865a8231f3bb6e3b3bdafeceb13500617b55844fa1515a852572019d85e2484dfbec3f10427b8a849494ad729d150054fbc11554f226ef4b1a59d226c856ecc491c159a55d1591e998d408e858e100116618421842184218421842184218421842184218421842184218421842180042184218421842184218422f1f4778579a66210d98751d11b21929703b0d9600c05424f66a841a83302b4fbd92c03ab1eed4d1409bc4b497bdd26581c838f7007d75d8e7e17318dac14bb43b7a2af67b6714513a9f08dc548c7718940b8335003313bd84504e6b4e9c835d5129d54f2244a9b4f5c7654b87ae632e73a25e6100392d5e047c29e66e7401de320b2590c9b2dcb61e4f209640c9e570894221e000a0219b86601f7686cbcb4b63c4fc4ba96d0a898b7d4ec5c5b80bd14f3afa9400b57d12d9fd9ec0b6530ba6c1b6770aa2c1f0ca6404cba4a1928948de4a1085004e9ea03bca9aa9a10933eaea5736a6a260ef274d993145477884225a42109000948c800c3af327526e758f6d4a5e97e5cc56e2d6a5ebb52b620914a1dd3f3100c4f103833bf8f46046554401534e7b7979fd6df65be1ba65cf561f5ebce11300437a5ec2b7aee474f2f4bf998df1c75f4e76f972e7088a1aedd36e5f5a6c39009dae7ae2778367c45ece40d6df219f9420013b7f5b5edd7ebf861bc398bfcf008fcdf5d09bc227c3ced4a57e401a7af9f5d861be39e6df31ab5985f83b422700c34eb7b5b6d8837bdc9f2f31ca37bea799c8f260dafcf547102bd6fd2db79600fc89e74b6c052a71c47be3931cc5f5f284284f2f3e5f2ed4a7a9ee311bc1d800eaede1993ae6e385bc610a540a72153defbdf71b0f9d39e01573a5f741fa7c00f93422684f2fa1b1b589f2b8ad7eb86f07cfd783e433f367b33ea852bd079000a8bda9607f123a50e1bc06a4b747d5ed6f938ccdaf0801dab5a7236ed51e7700a50d7eade1c78f8b7c8db5d39e4814902b4b7a7afd76ded4c02c7cf2072cdf00cb3e7ca1029e9e63a915b5bd79796f6c37b8e791e0ed7be5e679e57843c37e005e7cbaf9d295bf63d090df0df4d7edeb9422294dfbf314f5bef636ded41be100bc3dbbf935ee34fa5d120579f5deb6a0af23e7ca9cf7b06f676fb91c6e074600cc9b73840279f202febccf3b75b8a75a530de1f3ced97bc8907ce11045397e003f4a81f7f3c0287bd0359ff6d783b422424da97d89af2a72343b76373436c000a85efe5e998cfd39c21423702d5ef5b806b4db7ed4e57386f0e3f4617c9c5e00e39de1114b9a50d3e5e55fd4df00a0dfd09eb6f50d6d435e1134aedd4f5edd00b615e77a6e49c37c0e393fbe3d438f00f08007e95b5093c873db9795b95a0a008663a645b9e99b7cbcd114dfb53ea37ad48de9e7db94ef7db89b35985f2f2d006f6847ab9d48a5198e5b15269f4ae0a6f2b8c6d6888819843b712c28142d0100d485a49662590e2970d18c29b8b847bc2fc2bccbe86dc4e9768367f01daac200ea305da2c2e8f18c32ad0533692b6489a804852133a4a8b4ca6a995bca548a00aa75caa9a75b4c91365cc014295a1131250b48524e60871d7911a1171a463e00758b8579a65ef8acc5a6edc6cf64616a76272d90a8a9e4a5b70f8bff00938a0001767700d289421b0854da1d92c9744cc262e3dbf9dbdb1fe17718d93fcd6d000ec10abda0d9c4954fa9c1f7553f1dc1e59528a8ca44b49562d87c9b3cd94900188534a20d4c8a89726a2be3495587ae5bae4bad199466b40e5fe748e5f10d004100aa2ce31e458d6430843084308430843084308430843084308430843084003084308430843084308430847b39349a6b9866903259240444ce6b317d10d0005050a8f78f3ef2cd80164a10848538f3ce290cb0d256f3ce36d216b4e7e1780056258de214984e11455388e255f3934f4745492953aa27cd5e494212096001005ad65912e5a5532629284a942a4a54b504a41529458001c93efcb38c95e897000d528c84982ccd9bc434f3398f0c4434381ef65196dc29212dc2a544a26534006ebe37264f20310cf78512c612b861338bfa3fd89fe1a70bd8c147b4db6d2e009719dac48975149871099f84ecf4d524143056f4ac4b15925449ab5255494900501270f4ae6d3cac466ef29281325a64e65ccb109cd283a7fb943fcd924dc6005bd175279d875a9f2b9ef6b52d5b8f3f5902d974d797cb8e8798b6c7c7c9be00bd5fdddf9d3aec7911f6056bd460efe1f563f5812de3975eb11406c6bdf7a100bd8f5a8a7cbadb007873fb663e5d79c4c00a577ebceff334e9d3bd8d30776f0021e16fa7ccc2269b5b9d79d6fe5f5ada9f40578bd99b36b78659d8f3061e9000f0f31623cb9f3a541351bf423a5cb79ed9e991b35d9f46e16e7a41fdf5853f005df9dff5f5e783f1e5f36eb6b79c3c62297b827d6a2fcb7a0a5f6e56a9ad0900f2c87a79f3faf3261e79fbf0f63489a0bd0007a91ebdabe9cfad061bd617b30071fdf866d6617871f95bdf9988f0f6040d88245adbd6e69414e7b5852c7eae0079dc9bf36cadf5bc3cfdb72f77e16902fe5b7607ebd760052d7a0c1c701fd200da1d72bdf3eb0f16f7ecf844505bb1b6fe77373d7b1d8f2c378727c8b73b33000c9f5844d295e7cf99351e64f2a0fef815731a8d0717cbc5e10eb6e553cbb500a97247ddb07cbfab667cbef07f7efc3cc447845f99b75a7adee48df6df6bdd00bc79ea32395ad7d38662cef089a0a9faf7de9b74f9ec6b6c01e1ef4d78b74300d2d0f3f2e9cbddf8408a8a01f502bebcabb799dc0b83b7b1c786beecf687d60023c2294b8bd8d6fbf99f3f5eb53897b8e2dc2de961e3627ab42269dbaefdfe007bf5ee7d601f98e5d398cf94214f2b1efe7ea7913cee4f3183f0e87d3fac4300b7f4e7eda141b5f7afad7e5e63f0c1fe9ebea3d3e7130f0dc91f315dbcab4e007cc6f722f40deb365adfa7ed71fb3479ebc3e97e9d38e6237d8d4017e9de9c00ee76fa7205750d7caf7f9e5ce261e106a28057d3ea7b8f2c029b2396973cb200f4f3e1088a0b56848b77bdea29cfd6b726e6f86f6aecfe5c1b837a70b421f3003b0a791ad7adbeb4e75049dfdf16f4e0dce113415d876b6df67ef7c1f4f31600f3e2d7f1cc3da111e1ed5f2b5390b9341c85a9caa696c1c7836ba366cde36800428395ba8b7d46dd0d77a6d83f8e977fa31b365a5e112403eb4afa7e5dbbfa00e0eccedab3b6bf3e507f6c62d5b5b786a9467d11b99b2808691e722151113000de10d4a3323807f3a62929a265b357400b44c9942988a7c2913260ae297348004f26f6d9f869c2b6cc566d36c4a29305dab50995357877c34f84ed0cc0825400e94b4ac37159c52e9ac425349593d4a388265cd9f371195adaba04ce79925900332e4a724acfc92ae7604fea624a8635273269ae5e9a46c967701112c9acb900f5c346c14523c0f30ea391b94adb5a4a5c65e6d4b65f696879971c69685abe0070e2b8562581e215784e2f4353876254139522ae8aae52a4d4489a9cd2b42c0002c410b42c3a264b52664b5290a4a8e8d49521452a052a496208620fbf3ce300d6635f14c3084308430843084308430843084308430843084308430843084300084767c9f93b30e7b9f4265ccb32f5cc26515e2594821b8784856bc3efe3a300a215fe5c2c1c38527de3ce1fe65ada87652ec4bec32e720d97d97c776cb1aa003d9fd9da09b88e295aa225c996c944b9696336a6a672c8954f4b21277a74f900aa4a1018395a9095572e5ae6ac225a7794721c8664936006a4fce32b5a37a200d21d249438961489ae679a36cfefb9fbad212b210127f764a42901c8293b4e00d5e2827e22631011131eb5261e5f0b2ffa95d8e762580f6558777ea32b16da00cae948fe278e2e506900a005e1d83a5684cca5c390bde2b98a6aac417fded50094ca452d1d1f21a5a445324970b985b796465fe94ea0072faaac4b0000acff00007bfdd31ddfbc7dddf8b8cafaf3be7196d9f3f7eddf9c3efbfe941f33e97a009c3b8e1e16d1865964e2c1c92ed0e0f7cbcfd05b3f900d0fbaf5fbfbed1bc70042d776f5d34274d38b41aefe57ea3276b0f3877b1edf7ebfa8b60fa127317b00e8fccb6993e5a917716cff00a79e5af47021e9d3efefe9838b72be84be62ff00003b7220c3df0e47ee1dfae50f5fa57d3faf217e54c013ccb0d4dbadc6872e006de23a6971d7c1b2ebc1e077b0e9bfcf9d6a3a6f5f9d00dae4ea79f41c1f520078e4c4bbefefafadfa385cf2fec39dbef99c1d98bdc753a3017e1724bea59e000cefd7e591fb6766780f96ff00773f9dabb72c1cf1d0680640db4e27d1a1ef00f7d7e999261e5f7d795ed5fd77c1ce6fa0b5b3c859db4e16d06461f4ebe37e009e7e7034fb14a7e5f9f60298825fd79bdc71b8b3797589f7ef4f2fb40efcbe00c7e3bd7e589de3c4e86e5c58fbf66cf7efd7de7c56b436852dc5a1b424556b005a825290375294a3448eb7031724ca9f53351229e54ca89f355b92a44996b900b3a6288b2512d0952d6a205800556b6b000920004926c039249e033e805b9400567d20e1cf886e20626161f43342b567561b8b8a720db9be4bc8f3c98e566900f69450f263b3a3d0d0d93a5adb0b4a9b79d98cf615a6dc05a5ac39fcb8cdc60028e8765e4aa7edb6d36ca6c2cb1244feeb6b3682870ec5152d77404ecf4a550056d24d5cc077a5a2560eb5293f181baa0a8998112413513a4d3d9da74d4a5700c9a502a9b7d0045e321b92fd85bed36cdeb47c7688e51d3e6174a456a06b06004065210a485254b85c9132cf5304100d1685410710b05252680e3acebfb6be00c070c0a337b51a9c5a6253fe16cc6c3ed25692b73be9ef71e4ecc4821c0dd50089c42c3164dc0c35623864bceb0cc37b49a79abbf07982486e05fe515d59fd009c7f6843d0ff0010bcefc23c22fc3e2f8188d4fd5a5c5d69747bc85d047e0b00c5c81f89f00247f311538e387f131f87f96a32ff0035dadce513ff0094c9d8007d92974fa907ba9dda38a82904dc36f1660c22c1c630d767ad363714f240f2003541514cb37fb02bda5595d0e392bc85a47a8496d255e0c8fac52a65f70806008969bd40936414924d07f3bad8bd6e0571b7a0edebf0fd8881ff008fdb4983004d51000da0ecfeb64c90f65154dd9ec676994961774c95b9007c222ea314c30015ff00de66a0bffc6d3280b9cde5ae69b696e51641ac7c0071bfa00daa275600b857d62cbf2c6e1dd897f304872eb7a9195a11860153ae47e67d318cce5249005a50805c57ef58d8125014a0084923b0b02c6761b6bc84ec67699b07b473d500344a97872b1a56cc632a2b608eeb0adb2a7d9ea9a8df53202684561058167800cb95369a7da9eae9e6976ddef3b959d07c13c4a2a7ff004ef0f48b3d878a87008b47bd867da7dbad0a9a712b0957fcd5049252a1b292ba2924104541a6d71200c2f13c1e79a4c5682b30fa94e52ab29e6d3ad4904a77e5efa52264a71f04c9006572d60ef25441062e290b429969524b64a0478b117eaedc338f3fd3cfd7f100e4797318c07e800fd98647260e5b4e77a1b4eb9fadc64ee5baf843d7efef7300d7a540c46f1cfd6e6ec79e798bbd9b85ccf99f0cb5cf8dadec8653af9fcb6d00fb8fd2f8390ff17ee727b72bb9f5ce27fafd6183f33e377ea0e59db3bbc47100f7a367c7e90c439e26fc0b7d3870b65c2261d2dfd7fadc5ad4e789059fc472001ae8f627401b2d1c4479f4cbed0bff005fbbf2f4e86f83e61dae78fd1ecfa000ceee7230f95b3be5ebe3c5b3bc3fa7e3f75b73f9378b1be6feac33b0f4b3360045a0defcefc7aff587e1cfee8712ee741abe57b3ea33bb3f4b6866e27adfa100cb4f0d49bc4fa72e9d29b9ef53f879439e22cdf37702c3462d63eb0c985f5e0027ccfdfed11cb96feb6fcba7e7418805bf63974bebaf95a27dfbf7e621f7f700f75c4bfa391cb3e1c6dc05b2b98375f3f7e79f387cadb7ebb0c43b6a72e9ec006bede1145b59745a43ab728692f2db95e689636efee49fb4ca4ac25695132a009b04a0bb192775e3ef92807e265d12571500b4a622630731e91ed93b12c0bb0056c344e065611b5941297fc2f1c972920540dc56e61d8c2508332ab0e5af7400a26201abc3d63bea52b94aaaa3acc3aaa4454877dd9803256397f2af521fc5003a6a158a7ce193b30e449f45e5cccd00b809942f856054390f170cef8bdc4600c0c4a2adc541be12af76f366a9710ec3bc96a2587d86be5a6d46cbe3bb1b8d00566cfed1504dc3b14a2501324cc652264b53995534d3904caa8a59e91bd26700ca5290b0e1c2d2b4a78f4c96b94b289892950cc7c88391074223ac638fc51000c210c210c210c210c210c210c210c210c210c210c210c211da72664d9f67dc00c5019632dc288a9947ad5453abf7309070cd0f1c4c7474414a843c1c2b60ad00d584add70f821e199888b7988777906cb6cbe35b658ed06ceecfd1aab713c40066f7726583b92a52120ae754d4cd20a6452d3cb0a9b3e6aac942484852ca5000aae5cb5cd5a5080ea5161c3a93a01a98cb6693e93e5ed29cbcd4b256cb51530098a6db727f981c6bc319368b4f89440f12966165d0c54a6a025ed2bdd34d8200f3df111efc545c47d5cec93b24c0bb2ac09349489975d8fd6cb9671dc74cb6009d59381defcb536f92aa7c3a9d67769e9925256c2a2a02a7a94a1c929a991400c860c5647c6bd49e038246835ccde2aa1e56e54e7cb9fcfa77a8b9af6e3b7300cf9f1f5b1f18c988fbfbfbdadb60faf973f3f4f37843f2a589f9f2f5a7f5380087cc7b7f0c9b22e35e9087deff00df6fb22b5c1c5ef967ab756f7e508003b700d7bff73b9fae25dee78b69d34f26f0684283bed5f5fd3f3e9be21fa3736e3c0079d88f9de10dac0fd49faf3fc3124ea7ec3ec2113bd07e27f5b0fd6b887f9b0079fcaf6d7ea1102d5fbf3fd397cad8977f7e1f4bfef089fbf98f972bf3fca100eed7e7a7cf30fc1e111bd7ef6bfd0dfb6f897f7d7ef97a4216bff7fcbb007600debd460fc7dfbfb0e108bc7e0cf80ee2438efcecfe57d0bcacc3796a49162100b3c6aee6cf8c96698645516511061261378786898a9ee63799719f83ca5962001a673b5188878b98b729937c4cda1b176b768b63fb32c129f68bb47c567e1d0026be4f7f80ecbe1699151b63b512cae64b13f0da09ca4c8c370a44c96aefb100cc6554d4252952281188d514532add44f91472c4daa594850797290c67ce0500c3a126c9438bcc5eea7fcbbe7e18dbfb83ef614f067c36312ccc9a99204f14001ab10feea25fcd1ab52c838cc8d288ef866da7daca1a4f589ca707028790a8009838acd68ce3992162145d879fb09f76cb5e28dbdfc59f687b452e7e11b0fd00d765db30b4aa41a6d979f353b4d8949ef0ad2bc736c54118cd44d5a591369b000b9983e14a40dcfe1cdbca571da9c72ae6ba29da8e53334927be58777993cf00f784f108eed0dfc9c733d2e96cba4f01092b94c0414ae5900c370b032e974200b10501050aca4219868484866da878661a40096d965b436848094a4014c79700aa2a2a2ae7cda9aa9f3aa6a67cc54d9f51513573a7ce9ab2eb99366cc52a6400c98a24952d6a2a512e4931a624a895289528972492493c493727ac74ed47d5006d30d1ecbaf66ed59d45c8fa6595a1ca90ee62cfd9aa479464a971282e7b9400cca7d1d0108e44292925b876dd53ee1a25b6d4a201dbecf6cc6d26d6e208c200765b67f1ada3c4e60de4e1f81e195b8ad614b84ef9a7a1933e6a65827e298a00484273528004c572a4ce9ebdc932a64d59fe596852d5d592096e718b9cefed00e0f665e4d723a1a0b5c67b9fe3601e7585c369e6946a7cfa1e25c694a42cc0004fa2b2acaf2bc73056921a8b869e3908f829721df75a21cc77fd07e107b71a00932bf8960bb39b2e99a94aff00f19f6e763f0aa8921402826a30efe333f1590013424baa4cca14ce4314ae5a543763689c0b11511bf2e4c97ff9ea890823aa0042cac11a8297114725bfb469ecf08b8cf713387e2132d4185515389de90fbd0097251ffd6a9321ccb3b992514bde5de3a03fc95b63938fc11f6b551bb2b0cd00a1ecaf19ad5da5e1d876de521ad98b25822526b68e8e4cc592c1913d41c87200c445efeced71fd1368e62b44a2a46f126d60a4a41f03f30f7a9a7fed5be04f0051e530198251ac93290e5999a14b82ce3a83a55abfa71905d08092ed75173c006439164247b92b4a5d2bcca94a147c35271d778f7e17fb6dd9eaa9f4355b23004f5d88d3102761380ed3ec9ed0e3892a2425b00c1b1badc755bfba4a7770e20048bb4624dc22be528a0c942d60b1972a7c89b347ff00b4898a9b7ff64742e20003d9e7ece8f68ce5c9866d839669d4c335c6a5c5c1f101c37e63ca7079ca1e006118597d11936cc394bf7a65ccefef510e10983cfb2cccd0c9857627e05b8300887445379fb27db576e3d89544ac031746313b0341099fd9ff00697856255500832e4ca4cc945145418b8a6c4b02992fbd25355b3f5585d4227265aa64c584000966b9188623871ee962619567a6ab42ccb600864a56ca946f654a28208176000d1a917b413d93dc45f00b11139be614d61e1e62231b625fad395253110ae60058545c43ccc04b755f2b21c8c7f2746baa6da69acc50b1131c951f111b010a0089c4be6d1824ac7b5fb37ed23613b6992656c819bb37b6f2a4cda8adece71900ac44f9f5a89284cd9f51b118c2932538fd3ca4296a383d52246d0c9934f3e600264e212902a57c8e8eb69b100d25e4d4004aa9662812a66734ebb77a90ff0000a14d343160a178c5d8215450a281014140820820104106e0d6df2e95e48a4a0090a52169521695142d0a4a92a4a9259495248749490410406218b45f2388b800e3a189fd39fe5ebc85ab5279e21dd867d1b9fd99fa0e8879fdedfd7a52d88d00e62dafdedec6afac227b8b5790ada96ea69f8d77e44cbdb4b3e5d7cc9e5c6c00211183fedcfa421d3b7515b8af5dbebcf00781eac74f6210037fd4f2a1e5f900dbe583fdb40fa59d83faeb081bf21f7fdff21416c01cfc8fbf5f28448e7b5b00efe7b7235ad4f5c43f969c4eb937de10e9b7d9e7f75a60e3886eb088c09035001e25b87d3e9c61137fa72e86dfd3fad7070fef3e0def93c21fa7e237e7dbfa00723f47e0fcfdf8da114b35634a32eeabe5e76593365b859cc336e2e413f6da00062e531868a00f84a15132e89294b51f2f7545a7db3ef992c473107170fd4b00dae76498176ab812a92ad32a871fa2973158163a25bcea39c7e3fcb546eb2e00a70da95009a8a73bdb849a8a708a8425471aa699152862c1607c0bd41e078a004ea34cc5e31259cf26cff20e628fcb19921042cca01693e26d7ef6123219d100e3868f8188094888838a6e8b6965287507c70f12cc3c5b2fc3b5f28b6a765f001ad8dc76bf6776828d54589e1d37bb9d2c9df95350a01726a69a680133e96a002594cd91353652140282561484f1b992d7296a42c329258f0ea0ea0e863ab60038fc510c210c210c210c210c210c210c210c210c210c211ece4d269a6619ac000492490311329acce2110b05050c82e3cfbcba9a01608421214ebcf3852d3000ca1c79e5a1a6d6b4e7e1785e218de234584613493abf12c46a25525151d3a7007e74f9f3941284245800e5d6b514cb9680a9931494254a1294a96a0948254a0020003324e4232dda27a332ad24cbea6bc68996699b21977304e0b484a43810009526512ca51d6a5104e54a56ea8bf318a2e4c2212c36a8397cbbeaaf627d8f0061dd95e04553ccaaddacc5a54a998e6261082242590b4e0d872c24a9187d2a00c6f4d59515d7d5a55553b765228a969391d252a69937654c57eb57001be14f002073e26e5810135a8a76a5af4200dbbd77efe447418eee7be6f978f221f867009e56e3195bdc9871240bdadd731e1e4205ea4015201a7e343414e5b6db0be100bc435c9e39f971ead12e5b2b80e478699ebfd490444784dc7304721fd856b500a6d635186f65eb6e97cee79d8f03ac1f8f8ead9bf934494d09b8aee3a5af4a005283e62ddac5bc6dc2faf327883af1bb4017bdd8ff0046e3f4e700012aa74b005491cafb76adb7e54ad68de3c85c5c0bdaff003bf583e5cfe5c7e5e6f0a50f0023636b914adb99b52e37da94ad0e0efc8666f99d74ccbf3e761691d1bdfbf900c4f86c0d2be5cebb73bdee6bc8f414c1cdc027ddf5cb9b666d7887bf83b9b60046fa7be4e0c71a57e74a5091de9b1f437ef5c1cf13959edabf12f933f8189f0097bf79c7229040a6fccf53dc8aeddebc80380511af87adb40fcbed10ff0030003cfab38e6223c3d46e6c45697bdc6f6f4e753890a25efa7be0d9f9861c20fa00e9efdeafa42963cae05297aed6ea4efebbd092697eaf77bf1cf4f57307e5a6006f6d73e5cda0526f61db95cded722db6f4f5c55bc4645ada5dcf3b0cdb573700e713ef8f4f790bf58c9f7b2f7d9ab9c7da15aa51eb9b44cd72770e3a6d1d0600355b5020db533309ecc9d4a62a1b4bf20c538cb90cee6999422d1179826c3d00ec3e4c90c4331b1095cde6997e0261c6fb48ed1b06ec576628f68713a5a6c60036cf6865cd99b0bb2554cba612252cca5ed86d2d3852668c06967a0cac2b0f005eeaf68abe5293ff009ae9ab669c7adac9787c94cc58132a2683f97906e18500bbf9c1dfba06c84e735408fd014637e9d25d22d34d09d3ecb5a57a4392e43900034ff28cb9996c872d65e82441c14332d2129722a25cfe68a99cda3dc4aa2e006f3b99bf19389d4c5d88994da3a323e25f8973e606d4ed56d16dae3b886d3600d562f5b8e6398a4f55456e215d34cd9ab5289dc952921a5535253a5a4d25150034b9349474e8974f4b264c8968969e193a74da898a9d396a993165d4a5173d0006812324a400948b0004546c71f8b5183ef6a87b5ee4bc19bffe02e834aa5500a9fc55cfe5d0efbd2f78ae6795f47a5d366bc72b9b6738196bbf1d37cdd3580075b71b95b20b2e424444c13b0d9867cfc2491f9542e62f54761bf87c93b6780070ed07b44aaadc07b39a7a89b270ea7a5dda7c6f6e6b69140555260b3aa50600450e0945301958ced1cd44e95226a578761f26ab1213851eeb0dc2bf3091550054a54aa404ee01699505246f2504d912c64b9c5c020a500af2d5b273c2d7b5001b8edcf4bd41cf3a3bc4eeb66699badd8985cd7a819467f97f284b5888507000c1e567b334265cd3cca5264d1221e53969329804252928616b2a52fd535bdb005f655b0184ff0067f02da5d89d81d9ea6dd97fd9fd95c429cd554142373bdc0066750cdabda1c7eb55754daac627d64c3314a281253ba84eed588d051cbeea005cfa6a69496feea4ac151d3e329de9b355a9330a892e7e119570917b057da700f3af76a88d0394481b5a428393dd5bd256fc2084d12e332dce7328a4280249004a98052010aa2804e3ab6abf14bd8ad3b846d5cfaa2091bb4b80e3a78dc2a70061d25043ea165ec5c863186ac770c4ff00c793fed9534ffdcbf51fd3bb1fd900e7f695068b8323e97958493ee06ace59f7ab37fe449510c05721e27928adca00c6f8d5ff00fcdaf637bc13fc531b676df38156ee876054e3e26d7f4f16075b007fda0c39ff005ccebdd29beb6f6d1efb49bd9a3edace08b35b9a87a23a4f3b00824c3b897b31e59cada87a659d3236a040368ff3e579b74de1f3aad7991a8a00860b846e358933399e5c141c91cca062d0c3a396aff139f87fdbbc3e5ece6d00d63d4f8fe14bf828e763186e3787ed06cecd514eed5eceed3cdc3bbec2a649005244dfc94caa9d82d4a8ac56d0cd13664c17178be0f5a8ee6aa626620d92a900889889b28e8a9538a0196412fba5465aafbe9209319aae1c257c3d717b2f8f004eaa70b73be1238bec9309031ba9994651039cf873d64804c7baf43c167aca0019fb233ba779fb3769acf2670918253347a61170901346622533863e390d44004c3816d7e33b69d9f4aa2aed92ed22476a1d9363cb9d2b67b10c4ce15b73b3005de53a50ba8c031cd9dc7918f60b83ed361f2264a1574c8912d5534aa955b40013a6524c1dd6aaa665650eeaa9eb7f3b4134912662ca2aa4b862654d93384d00972a7a030527746f27e2412936cb4e5e6a020723c1e9ce6a445ea26596f2ea0032b4d5ccfcfa336cdb33ca3e044ba2919ba2670d3cce687a670be344ddd9ab002e2e685e7d71aa794eb9e2f32e2089d3f1a9bb41852a56cfe24aaf389d327000342b0ba5c36afbefcc4b3854ba4521786229e6b2a9534ab48a508409210129006d577ebef0cd0d2d456563ba1dd84125c77612c1013fca12cd66368d393daf00beca783e12a39de25786f96c5c670b799a6d0d079bf2831f1d318bd02cd1370089533064bae262221bd2c9fc72d88195464c625472bcfa321642f441974ce400447d02ec6bb5b99db2d1cdd99da832a476c184524eaba7aa48914f27b4bc22008e505d4ce9325065ca5eda61b4e95d555c8a5960e3b4126756a249c429aa8400de6586e22311419530a456cb4950361f9b4a4392d61dfa4395001e625d4dbc000be0aa95a11b5b6bee7b1de94e84efbe39fb9cae0f3e39177cb33e77e23381003c3c7e5fd34f2313e1ad4537b8edd8f4df6a73e74c1c8b851cb5f0ebf4cbcc00ff004f52d105372074e95adfb0e84569fa9c028f12f9b3db89e19decdaf18300e5cfd0f0ebef3b104837af7b5c53e877ad3ca86bcdbc417e16b656e96f768300f2f0d7a70f5d6ed0f08bd05af606f6a7235bf5a7c81b13970e785efc3323520038ebcc41c7eece1b896d3de57804f5b117b81fadc0a6d6a56f6ddbc789bf0300e238e5f2ea60fc2e395cfc98789789f09b6db539d295aefdfcb7d87307cb3700777776c8117cf2b5f2b183ebebf5e9ae7114dedbd284ed4269cb63cc74f4bb007ae2e79b5f5275fdfd48812dcf8f2b137f4e1d61cf704f9545057a134a817000073a58570770da75e79d99cf526e0939c1f9306773f6f79400a8e808f96e7a008a8e7f9d8d449faf17d18db36b1c811e64e1dbdfbe50f0fd7614de9e54a7950041eb5a5c5478f4e57767b1b71bf2ce0fa7bf77bf996710f08a56fbd0d76e7c00c795bbd2a2f86f66343f3d1ddcfadb436107e8c59b898786dfd294e54fccef005a015ad096f5b816bf3e77b93e2e331a807e991d6d6e6def870a29ad7a332a00d5bcbe1af1a25d9a652879ecbf390d21492b2859549e6962ebb288d769e25b006a0fcba28351f0e1f6c464be63d23db6f63d8776a980854832a8b6af08953600660789ee200a800294ac1b1159014ac3aa9677a52c282f0faa22aa505ca55500d2d66255d28a945984c47e8571e28559f74e6381be4e0e24a75269a65d9ac700c927703112d9acb22170b1b05128287987914b1174adb5a4a5d65e6ca9a7d9005b6f32b71a710b57caac530bc4305c46b709c5692750e2587544da4ada4a8400eecd913e4a8a56850b821c3a5682a9731053325a948525478ea92a428a540800524b10743ef516398b47acc604530c210c210c210c210c210c210c210c210c00211945e19f447f8024dfc5f9960ca339cfe1825985884a0b99724ce7f3a21100290545b99cc87bb7e66a59f7b0cd261a5a96e19d6e6422fe917e1bbb191b1b0086236d369693776a718a6070fa4a8420cdc030a9e0a92374ef1918a6232ca50075654d3a9694cba052644c5e212a6ef28697ba4f7ab1fde287c20b7c008700003ff312c55a81f0b5d422eae9bf4e96fc3ebe78f5515f5d59b5e0fd0817cb3000cd9ec4dc83d430b16bd9dd9c6a3e621f7b77dbe586f97e9d41b8cd816f76e30000fec1bb872cccec5ec45b95e14eb4e54eddf9fe1f961bff005f21c872e62e000b9e2cf89177195ce619bcae4b9bf1853ef7efcfec72e586f5b9ebf2b8b96e009cb52403b9b024fa58364720c5d9c1367cc188e57afe07efad0f974c378fcc00e79e8c2d6c8e7d4dda040041393ddc1cfc5f363c49d4dc1134af97437aff00005af9db7ea1bf6e77b5ed7b17cfc3e5ab43af3162f73c5cd8bb780ccb2dcebf002afe7f2fcb1014459c9e3a0c9b321fc6df5880cfa3b317704961e398b1b1cd008387853eec2fcec37e7ebd2d89dec8732f9f4cef9e767eba938622f9f366b3008b8cc0e2cd63c6229eb71e971f86ff00416c028f1d3875cf363a9b101afc22006ec73e02cef63a0b6a327767600189a53a1e5506bb76b52bcec36b5b0dff00001e5971e5978f89bb09e2e1f880069d7996274639c452fbed5bdefb7913b505007d700a2f72347cb8f1f9fa5af03604bf2c806e9a3872ecef90689faee3e82e007d7a7cb9e016793dba5fd436b9f51a83e4d7cafc41cb426d70e4bf1ccc55ee001fb42f3d7137ae1a63c3fe9a3095e72d52ccf0d20848d7901c83cbb2665a7600639ab38ccd1ef1a2a9564fcb30734cc51eca166222db97881836de8d8a8661007968aec1b03c271fdb2da82b4ecbec6e18bc671844a5aa5cec4669988a6c230067e91612addadda0c566d2e172261dd4d3a274eab98a44aa698a15154b952e0064f9ce2553a37e637c255a225a59fe29b31909c8072a7dd05fe927c33f0eba006dc28e88640d05d2895896e4fc8527440b6fbbfcf329fce625c5c6e61cd73d00885296b8b9ee669d4446ce266f15fba44445985836e1e021e12158f959da1600de63dda5ed8635b67b473933311c62a42d3224a44ba3c368242134f86e138700c9484a2461f85d14a914549292907ba921734ae72e6cc5f08aaa999595132a00269f8e61761fa5090190848d1284809038073724c577c70b8c78b61e2cb5b2007da35a69030da772d85cc5ae5abb9ba45a31a0195631110ec14df55f3caa22001e53369e370ac443cde4bd3f9442ceb52b50637c0db70591f27cfde310cbde00e09ec5eccb64b0fda9c7aaaa768aaa661db11b2184576d96de6292952d33a900765b0412e655525099ab972d78ce3f57368b673009054553f1bc5e811b8b4600f88caa49289b314a9a4a69e9e5aaa2a5619c4996c4a52e40ef26a8a64ca0f7009931218c546e187839d24e1ab29caa1e53972459bb57a393133ad51d7b9de500a9339aabab1a813e7dc99e70ce799f347c23b3a519cce6262dd964891305ca0032bc904bb2cc8d885934a60619aea0ed4bb5dda9ed47682aebab6aaab0cd9b0095ddd06cb6c4d156d4ff0067764f67281229f07c0b0ba0df4d30451522258a009abee135389d7aaab14ad54cadac9f357acadafa8ae9aa24a9326c9914c85200bba9129008972d0876f853fa94ceb5152d4ea5131778897c6382a987700ffa00746fd68b292479038eae12669c907c593f32231934f395712d4dcc6efa163e0091e4fdd71fbfb8ff00fb8cfe1ef2b89fcbceff0027fd64ff00f5455f959f9f0077ff00591f2de78f1ae5f1a815543b87fea00e1f936547e98832668cd07c19005ff6498a4d3ce48732d5e0ca3e4924fa47e552168345a1483d149293f2206200d9046608ea1a2d1046608ea08f9c7e48a83838d425a8d85868b692a2b4b71400c351084aca16d15a50ea1690a2db8e3654054a1c5a2be15281bd4f555548b3003296a67d34c2374cca79d324aca7792bdd2a96a4a88df4214cedbc84ab34820000919123a12229fce74c2433105c979724f1054b592c03110ab2b2090a847500c4fbb0920fbb4c33d0eda02940a1490808e6f84f6878d50b22b823159012840081388935290870e2a65cb256a5023bc5544b9eb514a485a49595dc4ce50cfe002eb63e63ed140b50b4bd11b97731e4fcf197a5f9ab22e7092ccf2ce679546300063f2fe60cbf39835c04d2533661412a4311b0914ec3a90fa5973c656e41ba0056d25e4f706cb6db52d55761f8ae0389546158fe13574d8961d312b14d89e100f5f49384fa6aba3981453317266c94cdde90a98909dd4d421216659cc91505001311364aca264b5256922c52a05c1e771a131f3dcf681f07337e087893cc9a0050911b1da67981a773be88e638df03af4d74fa3e2d6d09147c425f7cbb98720014c4b995a70ec49878b99b30d2bcc8a8487859fc283f52f03daba3ed2b637000ced0e865c9a6c4aa2a0e0bb7585d3ba65619b612a499ebada694a96812b0bd00a8a54ab1aa0952953a4d2547f12c304c06892076053d522ba9a5d5a193314700bba940ca5cf48049b0b2272409896b075a5dd0c2ca282f43f954d056f63c8d0039f2f2af78dce448b667a6acfe02d7e46e7890da3a9ef91d6f70e188f9445300efd6bf7d682a70de3c746701ef6bb5add46658388076b3f0391d069c41033c0081bf29a01d0d6f4e9dcedcc5799f4c378b1e2cfc865c8b9737766cb9c1c80500c33102dc33b06390bf4e710457727fb1ede43f1deb88de3c8faf005f2003e500c34b110006767bbb87eaf97a805ddbe1b43f5fc3d3efaed89dfe96f32de00500f3d0f230debe4e097196b639f5b904076c9ee207d4ed6ebdbadf95fbe1be6e002da6479f176f46e360440ebc5f50332030cf3fa3b86689a03dbefd7d7b7a60001441bdc7937d2f7b3dc8b5b39c807bbe6f6e7ab87e02daf83ec53eff00b6050045c8ebd6de62d773a81c60ce4967d0b372cdcdb51c5b510a53d2d6dbf2f9f3003b93be1beda83e7edbef603214b97258e77e2ccedab7810cdfcb0a7adc0bf9009a1dbcae761426f5c3785b3362581c9dacefd7a3861139e84d8e6e0e8e086d005f41d00ce2282f4f9dcd0fcc11b9f99a6f5c37dd9ec0bfeda1d41d3cc40bb000b3366c43676e4e08e3a31cda269bfebf9dfb914ec0537c37c30f5d7c33cf8300e972e6009d398bb3bd8bb0bbe7e17b9ce29cf9f53cbcbec6e7d6778fa6474e00bc189616f8bc8c320330320daf81362f77e1997cad53899d1239fe4c3376590083f1e729043a83f0cc0487331c99145ae0ca0d3decca5bfe63f2c52141d8860057152e52229c5cb5309e54fc48f63636cf0b5ed9ece5183b558353135f4b4d002d2999b4184c91bca05218cec530d9614ba32099d554a2650013e6a30f952f005f5f4bdea7bd427fbc48ba400eb480e5dadbc039005c8b5cb018bbc7cdd8d1004308430843084308430843084308430845e4f0a9a34acc9366f52331422ff700048231272ec3bc92844e27d0ab0bf8e483fcef4048dd4a54149019899b06d8000f3825d318557abbf0cfd918da9c613b71b414a55b3d80d527f84d3ce4912b0017c6e429331130a48fefa830a504cc9d94aa8ae3229899d2e457481b0a1a6e00f15df2ff004215f082df1285dd8e694f91530bb111926ad4f97ddbcb63fd2f00f464a8303ec6bf2b8e3a3bc6e9cb339fdbe67a7ac3a7f6fbfbb6f8a4ac78dd00b23d323e3e8ee21bdebcdefa7316201be4fae526df66f6e5fdbd312140f02600cfe3e591e0fa7483f1e2e41cb8e4e39db22f7bb4476ad0f9d37b7979576389000a07c8f02036771124b9b387b972001ae9a8e26f686d4f4eb7b11615f53f3e00e20281f9f0005b3bf36eb14bfb1c1835df461f52e22683ecfe5b61bc34d41c00f4e6470d78f00625eef9db5d1b8310dcb26d2e1e20fafd39f3db97af3ec03700872eae38df2d7519bf2897d1c3170f99bb3e4c72e39b17bd84f95fd7d6d53400fba74c37b8b0fd8906fae560cfe1943df36ceefc88f3ff002ddee03981f97c0086ff00af2b53e630dfe5f7f47d1cf46e302a3637b781beb6fa0e0ef11f3ec600a2f5bdbfb6db61bdf6b966e239dce6035e0f97225af61ef42fe36b3d7b75fd007eb5efd71014fc35d78741c1cbb373bc1f89ea73e59b1bb644580e70ea6a7f001ed6143f4e95eb890ae993e6dae4c756e7f389de372fc2eef67c98bbb5f51600bd9eef9fdfd6df3f5c4ef0d18d9f316f17f7a90f10fc0f07722ede2fa640e400066e236d2fd9b9e15532fcb1abbc6666895b898fcdd1afe8be9144c5b1e14a00727e5c8b8498ea466297297e2f7adcfb3a312fcaa98b6c34b65cc85368649700198d714bf37fe2df6bff008660fb17d9550cd099d364caed0b6cd08992d5300057e29227536c7e173fba6dc4d0ececc9b8dfe5e6aa62c2f69a5ae6095324a60054bd4e393f725d3d124dc815551c779608908247f96513318bde6e86c3697c00786238dc30845a9696e5a82d77e3cf3c67899a951f93b828d3f95e9965197b00f0edfc235c41ebe49a033cea4664617e2f78669943433fc2ecb72698845588002d5ccff2b616d7bf8f0ff616d9d6ccd8fec3304d9f92f2314ed931fa9da6c600274a9aa4cd9bb05b09573f05d9cc3668dd6fca62db6dfda6c4ab29f787793f0065300a95ef777277362a9611872259706ba699b30a4b1553d3932e54b57fa10073fbd5a92083bd265139346501a61964785a6d0d8ffa29009f356ea3dc927100e634a129b2520741f3399f18c44a1080c84848e43e6733e31e5c551543084300084715a10b1e15a12b4f45a4287c88231040362011c0878820283280238100008f231eb1f9442bb52d82c2c926a9a941f3413403a0494d316174f2d4e43a0f002c9ffda74e41a316651ca5394ba0f2ba7c8e9d1a3d144cba261aaa527c6d8f00fce375200a13fcc3fd49a52e48f0836f11a8ae24c92b97721d3fe619788cc700cb998c19b4f3255c8de4ff00992e46b9d9c657d3998f5ee368750b6dd421c600dc4a90e36e242d0b42814a90b42814a92a49214950208241041c5085ae5ad100325ad52e64b525685a1452b42d24292b42924292a4a8029502082010411163002ca3081edabf674c77173c2ccce7ba41207671adda231f11a95a6d97205a6d00c99e64876e1530b9f321491461e2225e773765b6dc8895c8982db933ce123c00aac3312cb684c3abdb3f84efc41516c66d94dd93ed06bd149b15b7d429d99c006f1c9ea5a6461158269a9d9ada2c48266ca4046098c7702aabd4e89183d5620086a24cd13264d8e41816269a5aa32aa14134d569ee272c964cb53bc99cab80003ba98c14a2e04b54c70738d03a652b9a4963a22553a964ca4d35835fba8d9500cde062a59338278a438588d808d6988b857929524a9a88690e24100a6a40c700d0c2a405cc4a26c89c997326cb3369a7c9a9a798a9331529664d4485cc9339001be8504cc94b5a1603a54410639912320a7009b82950241d142c438b172f66001947e0eb7fad853eef88de22c45f87c9cbb66e06bf582fafa177ccdf3d7ddd00e1f9fdd3d7d3e7b8aafc835f9647c8f524e9778a89639db91b333585c3750400b364739ed5bf5dbd7a61be3fadbc7cbe5cc440397d4e5ab8e1a37c8bc46e770036b53fbfe37b569d70de1a90fc1c3fa91eadc19e0fc09cf5218f9f372e470d00627f3f3fb1f7cf02b1d2f7b0c8ea18e5d1fa341df5232cb2e161d067e0c338008fbe5b733bfdf4c0a85bd7a316ccb3e5ab35c30c8f9fd6da30d5cb8393b00f0062224fafe3f80c3781c98707f57e7c03e9c19cee43d83bf11cedcd8d8f1d3300881cfecd79f615b1e5b936386f0d383f0e5adbafa3c378f17d58f8b8766b8e009cb811e5e7d69fa57cb13bc34bb70e19dce5d2fc9f363b91773e593ddcebc000f47724803f3debbfc81e46a05bb1ae0ffb737f67c898746376cb8b30716bdd00d986772f122febd7efe786f0b039f0f1e6dcfae99c1cdae74b642c73e1c8590085ed6731b036a9e57efdfec72db11bc1c70fadbd3470f77d03c1d9cf1e674600cd9b373e39335dcfef97d06fdc91f46f0e39e4ee3e79b5fd06b070f6e2e0bd00c67fd5b57b97b8c6cf159a37fc35365ea3e5d855fee1cc1187f88a1da495b700289fc52d4e7c7507f3b5013b70a94a2a0a6a1a6def592f34998cba111f39bf00131d918d96c5d5b738052a93b3f8fd528e2d4d252552b08c6e7954c54c1ba100a550e2cadf9b247f874f5a27d3a4ca953a8a44696ba9bbb577a80c859f886700baa37776c9598e05c581022cdb1e528d7c308430843084308430843084541d002fd3f98ea667494e5580f1b4d442d515378f4b6e2d12b92c214ae3e35c521a00792dafc2a44240fbf4a187e67150308e3ad0880b1ccfb3fd8bc47b40dabc2b006670e4ac1ac9c175d549415230ec324a92aaeaf9a5b740912491292b2913ea00974f4c957793d00dd912953e6265a6ce7e23a2523f528f41e6586b199b91c90025996e4d2c90c9615b82954a20a1e5f030cd8480db10ed84254e109497a21d00214f45c4ac7be8b8a71e8a885b8fbce2d7f5db00c0f0dd99c170cc0307a74d002e1b84d24aa3a4949090adc969f8a6cd52529ef6a2a2615cfa99ea1bf3ea26004d9d3095cc513c913284b4a5080c948601b3035393a8ff00364497372498f60094ad3cab7eb53e80dbfad0e36ef9b78fdbc5fe513bbd78331b3b676e7c33b0007ce14fe9e7b917f335f3ef5c4bfc9b33969fb69689ddbf85875eb66cc80efd000bc286a77b58f417ed6ed5fb27d327e1adb2d6dab75833364e40d78bbf571c003835dc3c84934ef7dc8e74e5b5fcbe66f0e395b906e3d322fafda377d33e190039032c868e0f4bc47dfd7ec7e383f4b5bfaf3bfc9a2776c5f3e41fc09e3c9c00699da200e5f53f5f9fd4f235bc93c5bed9d8676be5cb4688ddd380bd8e77f000e17b0eb1ca96a7323714afaf21606b6b57e50e05d87afddfa44ee8e632fe5300fbdcf85f94453d7d3d7f2fa5712fe0395b95f8feec1a1ba327cdd8b1e2cd9800bf11cf5cc29f7f7e54ebd307f1fa7b7814f3d0e608bdce4d930cac750199c0006d41bfe3cffafcf10fcfd74cbf68821ace01fbf3e0ceec395cb32879d77bf600f4ed6fcee7077e1f7e7cdeff00d044848e23afef9116b64737c9a14e77fc7a00d3efd06d897caf965a7bbfdf330dd6b59c0d012faf01d1c7373908ec79772500672ce6ce665e4ecb933cc2e652ca398b3c660302c29c8792e59caf2e766335009c4d6249443c0c0b286db8669710eb6a8d98c540caa09313338f82847f270d00fc8d4637b3d84d7d64aa44e3d8f6118153a94a099936a313ac954c9448490a0054c98896b99394c95264c8953aa266ec99331699404779290a56e89b3512c3009ccacb0003392c4ab2609ba86eb98fa50f04ba0f2fe19784ae1f343606051200f89c83a5f9620b32a10b71cf8bcf5338144fb50a6ee29d52d5ef6779e66b980066eea010d32b8d532c21b61b6db4fcceed876ce67683da86dced7aa60994d800c6d1620ac2921294229f01a39bfc3f67a8a5a5012912a8703a4c3e8e5db7940089014b256a528f0eafa835559533ddc2e6af732004b49dd9490d664cb4a53e000f9c5d263ada312184228a7b3565ea8fe1da79abb190c113ae22f5e75fb5c200363d577e6997330ea9e63cb9a48fbab23fcc6a5fa1d94f4ca4500a154996ca0060c82a24ad5c8ff11f53dcf68749b292a63d1f67db11b09b1522406dca5c43000fd98c3f10daa4240fd2a9fb6b8a6d2d6cf06e2a6aa702c0048dad7fc339120041f869a9e9e401c14994954ee8f3d735446854632078e848c2861086108610008610861086108f5119296def138c51a77729d9b59ee07fa09ea0509dc5ea3100a6d3a55743255c3f94fd8f3cb96b1873a912b754b642b366f855cbfd279e5c0046a3acb8dada594389285a774a850f9f420f222a0ee0e3054929252a041198003eee381163a46b14952094a8104687ddc731631853f6b17b23f22f1d99463b005374d2125192b8a6cad2971524cc486588095ea9c140304c364ccfaeb61b4200e314db6984cb59b620aa2e4abf8797cc1d7e4094b503e8bec2fb79c4fb32af009582e31327e23b135d3c0a9a42a54d9d824c9abf8f11c312ade2258528ccac00a14322a06fcd9294d51de99b7c2f145d1284a9a54ba659b87732893fad0fa600aa40b1cc32af1a0a67bc899c34cb38e63d3fd40cb737ca39d328cda2e49993002dcf211d819a4a66904e16df868a8674022944b8cbc82b622585b5150cebb000ef34eabea36198a61f8ce1f498ae15594f5f8757c8454d256534c4cd933e4400c0e95cb5827894a92596850521612b4a9239c21489884cc42d2a42920a542e0008e360dd357b671d529db71b6dced4adcd6dd7a0eb8ce71e5af0d5b366d7d6002add07ebcb317cdb425ed9b1e11fd2bdbd2bd6d5f2ae278fbe1e7efc6775ae00e33d73b68dadf301f2b3e50a5ebd2d4341f4dfef960f6faeacccdd1a047073006cc6b6be9e39977619d94dbe9e7f7cbc8f4c43b7935f87f488005f561a7a9f000f5e90fbefcfeff4ae113bae6c0fdfc747c8381771982f34af9501bf2ef63d007cf6db7183f47bfa8cbca200e3a799e0c2c6e0b871a7076823a5bc8fcfb5ef00f62b8973adf91f76cb486e9b73d35e37c9beedd600721b935fa72bdeb4a5080017db7bc1f90f2ce27773d3a9be5ab03959f217ccb830a53fb83b0b9b7e7d3b001c1f8fb73a69e1cfa402797272e1b47b81c6c3371a650e5fdebf7e55e9d06100ef84377cb8b7a8605f2b5c3bdb3ba9bf9ec79529f7d6b538973e41be7f76e9000dd272b7ab900e86e1d8b38b5efa400039d6dea3d48eb73f74124fbf2b727d003ef10c3d2cce5edd2ce41372fa30ce3d54f6472ccc9259a482750a88d95ce200062202361d6127c6c442148529b514abdd3ec2bc2fc2c4a13efa1625a6621800521e690b4e9f68303c3369b05c4f00c629d15386e2d49368aae52820a8226a0059336529695895534f3372a296781bf4f532e54f96d325a08854b4cc4a90b000e95062f98720701f15dc5ad6502630cbaa1a7f31d33ce936ca91e54f370cb400454aa3fc0e25b9949e2c1720231b538cb095b81017091dee52b61999c2c74200b4eba987f78af913da06c5625d9fed5e29b318902b551cdef28aaf714997880061b3dd7455d29c0044d95f0ce4a0a9322aa5d45315a972171c6e7ca54898a9006ad0fc259b792725373198d0b8d229f638645a861086108610861086108cad00f0b9a5a3226446b304c9909cc99d9a849ac4871a6bdf4b649e05ae4b2d4ba90079e5255110efaa6b1c91f0af07e361e023a143f286d67e947e1afb381b1fb2000368f1290138fed74a935644c4244da0c100ef30ca3042e66eaaac286275360092b3dfd2d2d44913681e3794327ba9456a037e6b1be6122e94b73b28e4f91b0088b9b23950ded5af2b9e7fa73a571e92de23e6cc05f9b7bcb2d33c12de2ecc00cedad807bf3d35d38d01ea6b7e7cf993415aff002d40da9bee713bc7965ab0006cec06845f3cc7839db30cc3276c9b2b9622e4139bf38e405450daa6b437b50036e5403a72e57a110ec5c7476639e7adcea4f941efc58696bbe7a837bdec7a00c71526b7e75d8536f98a9a53bd4f422921472761a7cb320dbe407177949c86008c73c9db306f9deeeccf6e33e11bdcd79d079f2bdc5479f4a0c378f27ea7a600ae33639f89730723802320e7336d6d6b11a70b171253f679debbdfadea083d0006202bdf8368de0c4373887e9c59b23c85ae1dc1b7072d11e1da805c509bd800ef71535f23d81389de2d7e2fd464c32f31ccf53b3b9cae06841b5ac2fcfa9e0030f08b56ff00403ca9cc9fb1605bc74e7ccf8be807bce1bc731966d997f11900037b69e2d14363436b5e86c05adccdf97317e6713bda3e7a8b3126f73703c000e7e10717722f9338b967b9761c6d773d239016a8e74d8529caa2a2bd4df7af007c5254fe0f9937b93a16e1970176812e58b589ccbe6722c59b2b68dae51045006bbded5a74a5ed6a1bf4d8505462428f2b7419fbb30b3dc81683e5966f620500cbf11a59ac58665b28f0ef63f4a023b6e7737209a5280e0547a58fa8cdf4c800586a0bb41f22e3326f9977bbe42cd6701f321a2aa689e8aea3f10faa592f4600b4972e45e6acff009f670cc9a432885484a42d695bd193198c5101996c964d0000cc4cd677348a5220e572a838c8e8a710c30a50d26d1ed1e13b2782e21b41008ed5cba2c2f0ba7554554f985dc02132e4c9439336a6a26a91229e4cb75ce900f325cb96379401b73a7cba796b9b314132e5875124b06c921c1751364b5c9200006ca376586f6726977035c0ee52d09cb2981cc1ac9c466bef0a390758352f00e197f1d9e1b7f5e72266bcfb9665a6207c44bf204a34ef2ee75858192368650031f2e878a99ce21de9acc22dc1e1ad85ed6b1aed27b69aedb1ad1369b6776000b60bb51da1c0308df1dde173e56c2e3b866055f3b77e0998aceda2c4b065aa00a49519350b952a9d699326588e2d4d5f36b71233d4e24d252d6cd952f447fc001a6a25a8f19866ad077b304803e1119abc74a460c3084536d65cd2ee46d20d0056cecc385a7f27e9b679cd2cba0d0b6ee5fcb1349b36e03c8a17089503ca9800e45b2186231adacd98c1a6242a5e2db4582e18b49c948afc4a9a95493c8a660091e3176423bc9f265ff9e6cb47fef2c27eb1503821cbaaca3c17f08d959c48004bd977864d0792c47f28495c54b74b72b42453ae04800baf4434ebaf2cd54b00756b5a8952893c47b69c4062ddb176af89a4ba310ed276e6b25dc902554ed300e29365252eec944b5a528192520245808cdad56fd655abfcd533d43a19ab2300ca2e871d6718b0c210c210c210c210c210c210c211f922e0da8b478563c2b400ff00a1c03f993dbba4f349f3143438b7325266063623250cc7dc72f91bc59900d253392c6ca1fa54331cb983a8f1ce3a8c443bb0ce169d4d08ba48ff004ad300c9493cc1f98350684118d72d0a96a295781d08e22351325aa528a5418e8742003883ed8d8c6027db4beca59771839123f881d1391310dc4e69e4896b8b964b00a19a695ad594654d171596a3d2d8417f3bc96110e1c973450722662cb6328400697619d91c448bd3df876edc276c0e272b65368ea94ad8dc56a40953a72d4a001b3b5f394c2ae512fbb86d4cc23f88480c894a3f9f9602c54a2a77583e2869001629e7289a798a0c4ffc4ac9b29f3dc27f50c927e3170aded0e62a0e2a022a0022063a1a2212360df7a122e0e25a721a261a261dc532fc3c4b0ea50e3110c300a85b6f30ea50e36e214871295a48c7d3844e4cd42664a5a172e6252b97310a004ad0b4a8052548502ca4281052a0e920ba490d1cd4104383622dfcc199f9b800c9959b01a02de1a7514adb61ce9f2aedcfa03d6a737bf021c93cbcf5bb71630066ab47041233724dc65d727d059c866650ff0053436dcd6be84d01b8dea4e000fd39338e41bd73e39160221c38fa137203001ae356b837b8b004123a76db7b00fa9a5ad5e94268460544bdfdb35b20f762dd40b3c0971a710c6fae96bff98e009980f11e135af737aec2c3a0ef4a0a01e840a890416d2c38bbbfdc17f52d2e002fcd880d99bf32c1eed6e99bcf86e9a57bd474fa57a537dfbe1bc482fae5cb00ebf419646237aca0e2fcf8e6d6259b3e1c89b282a0116aee695b580ef5a7a800e55be0146f9e47d4b936cac7c3d21c4bb16d07472fd6c4bbb877d226829d3d003ad81ec76b9d88e40e21cdf525f9b5f2e633b657be563dce44b3dfd40d08ce00dc3571105229ce95f9548b0df6f5e7cee24294fa13f40e6f90d7d3cdbc49d100f8dc5d2e6f978e59ded6209e7d4935d890694db97caff58de3970000b3e5ad00fc7dde04d883c180cd8837d3c8dce7726269526a3f1dadf9d7bd69db07601b00ae433bfd1baeb9983e4c730e48039be41f2b3b819beadc4a45474dbd6d5ad600fb6c2f5df6ad6ade2d997e832d187cce8ec4160d53967ea742ec1b41e648490002d1212294a6c77a6e2b5dedcaddafeb4951770785b8166f7e1ac53bc5f3cc0072cd80bf0bf1b785c5b27147a5a9cf5915dcc32d602b32e49662e690deedb600bdf4ca4be14393a9738e171952d4c43b1fbd60524c53a62211f8182850fcdd00c563cdbf894ecdc6d86c8ab6930da70bda0d92933eb077691ded7608ddee250046495a378d1a12ac4a952d3560c9aaa6a79466d71546057c91365f789fd7280013d519a920bdf77f52431d407778c52e3e6bc68e18421842184218422bc70e00ba6dfe23ea34b998e860fe5dcba5b9f6604b894298886215d498195ba875a7005b79b9a4706988a87212a7658998a9b71b71b4ac770761fb03ff00f1036f3000ea3aa9266e078494e318eb84197329296627b8a150582998312ab326926ca100fde1a45d54d411dca949c9a593df4e4821d09f8d7c18643fe9160466c49d23003004924924926e4935a9b927ccd6e79e3eaaa4848dd0025290c000c0240b00000000003203a358c720f4be9e1a5b289a13f2ad0d6e00e5d76ed6f2ae277c6500c750d6bf5d3cb5ca1f3f4f7944115fa1e9b53e77bfe836055ede7d7c38103a00d8f127cf8e5971cfa70b0ca248f514b72dbadfe62f506fbd437aecd77bea3a00659b6590b3bb0bbdff004b16ccfcf368505bfbed5e7e96debbf6c37efa8e9c00f216e20f203283fb16f97b6b43a77fbf2e84f6a6d5c378077377f4ced7d46400e73f288f7975d7dfa0876f4e543cc74e637e56e830df16e07ed7c9f906b3e800e225cf906e19088a5f9fdf6fbfa9c37ac0e59e9a5cfefadb9070f7efd9f9320096af97e7b74da96e60d790c3783b7dfcbc2eeecd91d483fed61e17398eaf93006b69a771e869f8d2c79f2f9d0b79dec411cbe6c0b795f4e4b74eb7e3cb3e190037ac453cafd69f9edb7a6f805679d9f4d0f16716c8f483fbf77e57d3c2248a00731cf98e42bd7eedd710160fcedd79b6419cf5e107e9e5f6cfc5e3f4c14146004c636125f2f85888f9847c43107030306c3b1517191914ea5886858586612e003d111310f38869961b429c75d521b4214a50069993a5c944c9b3569952a525004b99366282112d084952d7314b64a10848256a25929049205e0a50624b000300936160333a00007e57d237fef633fb3265fc10e90b7a9ba9929857f89ad5c9002423f9b1e79b4baf69ae528a5313197e9a4b5e527fca8e0b6e12639e221809004c5cfd96656876325f97e023227e5c7e213b649dda3e3c706c1e7ad3b1d80d004cc450a52a2138c57a02a54dc627247ea96c6649c350a7dca552a794a26d5400d4238362f889ac9dddcb51fcbca24274ef162c6611c34960e49bb02a205d7f0019d1ceaf5abd9d99705150d36e2c7394de31850f125d4e56e10789b98c22d4009d8985993f0714d120fbb79a69c4d1684285eec0a9d03663f107889044da3e00c9f0aa4933066838a76b5d9ad3ce483981369913a5a9b3429493f0920d5840001dd62ab39a6850905b55d6d203d1c020f2f28ba9c71d8a618422dab8cf795000dc1e7161108345c3f0d3aecf24f4535a5d9a5c49f9a463b17b204099dad76500d2c87133b45d89411c42b6970c491eb195421eba8c71aaa71e739117cba370008dc0690e95c0b4025a82d37c8f08d81400370d96256ca0002c004a0014b53600c7426d7cd5546d66d44f5b954eda2c6e6a89ccaa662552b2ef777518aa717900d349d66cc3e6b315231c762dc308430843084308430843084308430847e68b00856e2da2daec45d0b1fea42ba8ea0eca49b11d084916e64b4cc4ee9cf43a8300f63af2e6d16a74a4ce46e9b1cd2ad41fb1c88fa80474e7d8721dd534e24852004dba293c9493cd2797a8342081ad5a548514a85c7911c47231a75a152d450a000c47a8d08e47dde34d8fda03f668b1912791bc73e89e5ff7194f374de1a1b80080cb3278165a82cb79b262a6e165fa9b0b0b06c368879666f8df77059c1c52004919c62e1a74f3b10fe668e5c2fd00fc2d76c4ac4e965f66db4755bd5d4121006bd97aba89aa54daca1920cc9b83ad7314a2b9f412de65024103f87cb5d3a500294d1ca0be5581e226624514e53ad00990a51ba921899649cca412501ff482001804df569ebce9f2f3fbeb8f6a6f0b375e274b378bdb26d639272fb7bf61f2006853d76f5208e9dea7bd36008c46ff00df9b1cf83dbd0eac493fbcddf3f7f500bc453b8b7a57d2bca9bfe150313bc3cf4e8eef9379b780261efe7e90a7715100cb7dfcac7f2e57c029f3e2473e4e33d5acf78687c3df1f2e7120791fcbb9a600c3afd79605438f3b6a082d9eb91f4bc1fc3a787d9fac0803a8b1ef520d29c800539feb88df0fc7d001c78be9cf96a26e750fc9dbcad9787088da97fbdafdf900dbb5f13bc1c8e9d188e3c39f36107cf47f201f97be5934db603bd6f53d4dad00b7f7c029d8926e6c2c3935f36e475cb4025cbe7d7e5eda14db957ad77e7bf700f41e58050677d6fe397f5d40367c9f6e0df2f9da14a76f3f97df3c3787b6b5009d8b9f796707f3fb0e7c7f6688f2fc3b5fe5d7f0c02c11adbc583dbcf875ea005a6bf4fdb33c627c239d3a8f3a57cb737e97a916ab7eec1f81f037b0be5e16001ce0fcce4d7f96b6f6d0b8351629a1041a107911cc11f4383a540a480a0a040014b0208d4106c41163983d20fe5c0e5f48c3ef113a6c34e351a64c40c3867200ee622e4fe4096d284b30cc45bcb31b2b6d2db4d36ca2571def988587016b6a0058a9729d716e38a59f953db86c01ecff006f711a2a69265e098b156338110100225a28eae62ccea240400940c3aac4ea4972d5fde0a5452cd5bf7c952b8fd50049ee67103f42be247207316c98b81c9a28463a7e31a18421842184232dfc310069f7f02e98cbe2e32194c4f73816b31cd3dea9a53adc23edd24507565214db006c4ad4dc62a16254b89848f99cc5a74b4b261d8fa67f873d87fec86c052e21005720c9c636ad52f1aadef04bef6550a905383529521c8962897f9eeea69336004d4623512a6250b49968ded14aeee48510ca99f19cb2fe416d377e263705440045c4fdfcf1dfaf9721f53fbc65c3ef7de9d7e74fb387bf7d323cde10fbf3e700f7df124ea5b8fd49bf5be90891cafcc7a7ce9fa753812efcfd9842a7ad7f2f00d36e588fa7b63ef584460fcef6cbcdbebe1e210afe5f4b0fa6108797afddeb00f4c4bb7af2626d6f7d34844efcfd4f2bfcf9d6d5c43fafbf7e3088f5fbfb030007f3b9f3fa7a421f973fbe94e9cf13e1ef97eef08621f9deeda1e248e3ccdf00d2c8d9cbf67c7d9d2cea9e76778d7d5fcbab7f21699ce972ed1194cda0d62000b35ea44b948547e78433170fee66326c80b5261a4f14c29c875e78f78e36fb0071d942261d5e3afc53f6b2bc130d1d9de0354118a6334e276d1d448980cda200c226b8958715217bd26a3140ea9e8504a861ac14932eb90a8e3d8e621dca3f0029295fde4d4bcd20dd12ce48b5c29799c88468cb11ba38054425209248000b009249a0007324d863e7a67947100092c0393600664f08b04e3421041f121ecd0012b03c4e710dada1d3bff9cae0eb5f4b290ada884875341fea2a511dbd49d8005cb12fb3afc460ff008c3d9fec6289ff0048ed6f61778740e9bf1ead1c9b0f009224d06260dd6aa790547fff00329fe1cee071e2e6ced162bc5dfb67b86fe100df3acef46b4ddf91eb7eb4e5d7dd97e699543e7694e50d3dc81330d20a607300767788869cc74da6cc3ce166639734e72c6789c49a26162e5f9a1196a3108400afd11d927e0efb43ed1308a3daeda1fcc6c46c6d7a113f0daca9c2aa713c77001ca62a2f3f09c15132925d3d2ad09df915f8f62183d2d5cb9b26a30dfe2325004542ea30ca8ee13533a4d5094b732a5d3524da9a89c067ba8484ca94923f4c00caa9d4e85e72cae31ccffb5738c3d64f8883c93ad7c31e410ca4baf4168e64000567dcdd2e6d64009984e751f503344a6add4201734ce54bf1925c40346c7a006a97f08fd8fecb6e4ec6766fb44da1def844cda7c711836153d41fe2914bb300d8261d56378dd86d054a583249ba8e92b7144e1dfe26cf624804b266e273660053ca51d3765c9a6960be7f0d5ac364758a479eb54788ad61904df2aeb3f15300af59eb2ce6297c6ca67f96e593bca9a5797e6f289943b90731944c20b463280069dc6c7ca26108f3d091f2e994ca3e1a3615e7a1e250f30e2db573ac07603b0033d90afa5c5364bb32d8cc2712a09f26ae8710aba5c4f696ba92aa9e62675300d553cddacc531d9522ae44e4226c8a8a791226499a844c96a42d21435476b600ad2a4aa968b0ea35248295a242ea56082e14f5b3aa52140b10528490406ca300c594a7faab90e32063f4eb89be29f284ce54cb09972e17892d5ccd12e8465a004866150fe4ed40cd79c324cca11a4b21a6a0a759626301e06cb26154d85231007317d96d86c7a4d45363fd99766589c8ab5acd46f767fb2f86d54c5ac954d5002316c0f0cc2b18a79ab2b2a54ea3c469e76f10b130299504ed562c59537f2500512c9ba6661f4884a8e64779225499c9393ee4d42b2bc649b87bf6bcf117a30071b0125e2a656c7119a581d4b31faad90f2bcb32aeba64e8471c0a7a7599f200148040646d5192cad90eb9188d3f9364ace4d41a522599533b4d47b889f2df00697f831d83da9a7a9c43b27ab99b09b4810a992764f1dc4aa712d8dc5a6210007768f0cc76b8cfc67672b2a57ba994ac72af17c2553947f318960f4bfde4ad00cd1e3187620532a62461954ab277a62a6504d512c94098b79b4aa5120033970036482e573a5272d8eb4bb54b4f35af20656d53d28cdf24cf9a7d9d654c4eb200ce6acbd1698c96cce05ff125401a21f848d838843d03349547330b3493cce100a2e5735838398c1c542b5f35369b6676836371ec536636a709adc0f1fc1aa900747896178849326a69a7a18871744d93365a913e9aa64ae65355d34c95534b003a753cd973579f325ae52d52e624a1682ca49cc6a391041052a04852485249000418efd8d14510c210c210c210c210c210c210c211f823e09316d5a81e402500b55857fe828ffcd57ff94d0ed506cce942626dfa85d27e8791f42c78838f5100244e45acb4dd26d7ff0049e47d0def91a519e325659d43ca39ab4fb3c496130030651ce5219be56cd12198254a849ac8e7504fcb6692f8808521c4a226122100d6bde32e36f34541d65c6dd42169b5876215b83e214789e1d51329310c3aaa004d651d4ca2d32455534c4cd95312e08251310094a814a80295029241d5254b0095312b4929992d61492334a925c79111f35af68bf0559ab810e27338e8dcd5003151f92e354bcdda479a62005a73469bce2362d32575f75286d0a9dc8dd87800acb9991a0cb004ea5517170ccfeec8d973f11f5e7b28ed128bb4bd8dc3f6860041972b1096050e3b4482c68b17a7420d42529249fcbd42568aba453a9e9e7a0010b577d2e7253d8341588ada744e4b057e99a9ff002cc006f06ff29cd26f6200cee0c5897d36edebf9e3b2dcf1cedd5cfd4fda3321fd7f03f8ed887c8797a900f7fb421f7f7f7cf07e9e9a7bbf1d610c1f8ded6bfbc9e10fe9bd7faec3f0c100d99dbc72d4fcba02c1e10fb1f3ae00ea2fefea3d210fbfbfbe5838e3cb3e9600f36f4842bdbb75f5bfd83b5af89de193827a87b6873b06ca113ca96dfecdfd002bcbaec0e21c72e1e3f784457d7cff005dfefbe25dbdf1b6ae3873b0bc21f300dbfbfa73fbae04fbf6dfd5ceb0854efd3ee9f21b1b6201e07c8f8fefeb08b7005e27b4fce79d318f8b83865444f727ad798a57ee8b2979708c35e19ec182f0002a5b4f4ad2b8d10b0ea444c5c74ae5cd33ef56130cff00417e23761ffb5fd900fd4e21492153b18d9354dc6a8fbb4cb3366d0042538cd2ef4c20f7668d1f9f00eee59ef674fc3e44a96998b5842b12b6577b2490e552dd619ae3f985f95ed70024001f28c48e3e66468a184218422a968be4456a36a465bcb6e34e392c545f00ef29f290db8b4372496522a390f38d50c3263821b953312a212dc647c30a2d006a4b6be7fd976c81db9dbac036796952a8a7d58aac55404c646154293575c90052e5fc524d4ca9468a44d2521353532012e4037a9e577d3508d1dd5c929b9c00b27fd2399119a74a6802529094848094a404a4003f9424000240000a0d85b900d31f5a901129299684844b9694a10840094a1281ba9421202425294b200003000160cc07228107a6fb53f2ebe7cfa9c57bdcce834cbd4b87b3126d784484de00fcec3af315a56a29cf96fd8182a7f2b8d1c8f1e1677be99c1a2684f2b54f230073e5bd06f4a5b6df13bd717b8cdb5700e6e35d1dad7c808471a11f8f6a5cdf007076e469db12e48f4bdc9361717e37ccf2e289f0efbdbe97eb416a7ebb569400951d5f91048e3a1cc3e7c38b30844015adbf0fcfbd36f2e7897b35eeecdcb20037b81ad8b5bac22694dfa5bcf98a53d3901e76c52096b3db98e034d72e600f0038471a1fbfbf9f4c54157cfc4b662f9067b0b1605fc0031e11245fcf6e43c80073ed53bf3e78825c93e80be9e16b5c8d0b4204115b7a5edfdb7e9b57a60157007e36b9f120700f913f784477fcbe7f8e249d3af22f7b11606fd7835dca2e4f00844e19f39f17dc44698f0fb9187b89a67e9f221a673971bf790b95f2acb99500cd335e698d495b695b121cbf091f1edc29710e4c631a8595c3154646c3b6ae0023b73b63876c26cae31b53899df9386536fcaa704a57595b30a64d0d1cb37300bf5354b952d4bdd2994854c9cb1ddca51162aaa114b2264f99fa509703552800d9291d5567d2e748fa6de8e693648d08d2cc83a3ba712862499234e32bcab200ae5e8065a61a598395c32195c7c72a1da61117389b44fbf9b4ee64b6c444d200711b1d328b5391514f38af8f3b418ee23b4d8de298fe2f3d55388e2d5b3eb600aa6a94a5013272ca84a9416a51448908dd914f281dd93225cb9480108481d70053a6ae7cd993a6175cc51528f32720fa00c00d000348ad12783f11316e0b240094b20f356ca73a109ba53b8f1788d8a41c61534b73de1d0b2473d4f86439f30011954725cf7aa1649210389d55e190b33bea230e1c5d49673c7b710794f493004db31667c89a51c1c67f9d4d35675bb23cf0c8f33669d5bcdba5d997224f38007ed399e34db8ec9e1e45a79a931511ab39fe4ca5cef2f4d6772cc9d93e3249009d6573d9ce59f7076435347d86ec162bb5bb494187635b4fdae605474bb2bb00178cd10adc3f0dd94c2b6970ec728b6f36828d4a4a6a975d8fececa97b2d81005584d1d7d35154e2d8b49acc1ea6869312e472e6ff000fa654c5211367d6cb0048932668de972e4a26a6626a66a5fe252a64a024ca3621257302a5a9295d6900d2ce16b4c787ccab0f95b46b4d32364290c0c2b2d39079424d0d03309898560012dfc74ee66615338ccd3a894b7ef23a733b8f9a4ee6b14a722a3a322e2de7001d5f1cda4ed436876ef1399896d76d16378d56ce98a526762d5732753d389a00b2aee28e9c4d34986d1cb2a6934947229a8a96504cb912a54a42529d4544ea00aaa5999513973964bbad6480e72482c94243d929094a458002d16c33cc83c1009f1e994e64f4d32e64ed487a43315c9e61354cb66991f59f4bb31c1be5cf8000898e543e57d5fd27cccd2e1c3ca96c69cb9318e972c7c4424649e394989ece00a0c7bb5dec3f15a61478962fb3a9ad902ae9e9d3534d8c6c8ed2504d437e620054a4ccc4b65769f0e5099ba2a24fe7e4499e3fbb9b26ae4832ee955761eaee00d7bc844c4b99530227d2d44b21ae857794d532cbb3b2d2142c42936c37711100c3a6a1707f9a6532eccf3b98ea2e8766f99b526c81ac5328684627f97a7f1600a599769eeaf09643c1ca513698f8550b9433d40c0caa519aa210cc8e63032f00cd4fc1267ded7eccbb51c0bb5bc3aa0d2d253e01b6d85d32aab19d97a799310054189514a03bfc6f65ff0033326d49a7916998a60d3a754d561c82aab913a700e1c99a68f8fe298348a89336bf0c9424cc928332b30e4952929969fd75545b00c4acca45953e9d4a5ae482a9a8519014255b4e7cc85153d8b97e70ca13319600352b2d43bcde5f9f84b8b8099c12d7f10fe52ce102d1027794a68ea68fc3b8000c6c9e25d339903f03356c3ce76be138b4ba5973b0dc4a47e7b04ae5a55594008e04ea79a06e2311c366a81fcae232127e158feeaa65a7f2d5689b4eadd1a500c3b1114a2652d54afcce1b52a49a8a72c172d606ea6aa9167fc1ab943f4a8100089c91dccf0b9458773d35cfcc6a0481d8c7a5ef487324963df90e71caf16e0021c8dcb7992052d98a817168b4440c5b2ec3cd647324252ccde471f2e99329004a227dda3578de10bc1ead32933935745532915786d7cb494caaea29afddcd00483744d96b4ae9eaa412554f572674851251bc6710a234539294cc4cfa69f200d33e92a500845453adf75601fd331042a54f964954a9c8992d574b9bc0e0cf008b49b7019abc731bf1510be1735533141b7c40e4d690b7e0b21cf268b87954001f10f94e0c3886e55112770c0b7ac50b08130998323c3c4e69760e2732e5780055cc3a1fb7aec628fb74d9132a9244b4f69db2d87ce5ec4e28e113b1ea1a610032aa76c262737754aa94d527bf5eca4d9bfde50e33325e1c99d2b0fc4a709300c9701c4cd62118555ade7a52461950b507701ff213544ba913188a47754b9c0044907bb98023712848b858f85868e8189878d828d87662e0e3211e6e22162e001625b4bd0f130d10ca96d3f0efb2b43acbcd2d4dbadad2b429495027e31cd90053644d99227cb992674998b953a4cd42a5cd95365a8a264b992d60291310b00052b428052540a4804111b5208241041058836208cc11a111fa316e10c210c20010c210c210c210c210c211e866f05e21f16da4f88503c00dd205039e69b05700fd1a13409271895329c7789171fa9b51c7a8d79748c0ac92e3bd48b8fd607000ff0037864795f8c614fdb57c09b1c64f09f39cc394a5222b5c34121a6da85a0072e42b2954c33149e1a0c3d9e74faa88688898a198a4b0626123816034ebf900c24997e1c44310917300f777fe1e7b4a56c06dbd3d2574f32f67369d7230bc00582d47baa4a85cc29c3714bad0847e56a2699553314e94d0545528a54b972800a6ee0f5a692a9285a9a44f225cc7c92a3644ce5baa2ca2dfa0ab911f3d322e006d4a1a1e446c0f237001f1539de9bd7ea7ef1d6ee9b35f366cf37b1ccfdb9d0043c276feb4ee680ee2b6ade82dd4f7e00f57362ce5c581e801e41e1114e9b7005bfdf97e03072381c999b4f9062464390cc9429cebdac0efd3a7d76f960490007ec5b419b87272cf3219a10a540a7af9f217373e43e78057124d9b36f5079900b9bd865a1befeadf3850fd69ca95e95c4bb80e74bf121f47cc96d79e65c04400f84d09e9b5ab5afe95b1fceb8a4a9cf266cf8ea6c7c406d1b2108114f3de830061bdbf0e7cc62a0a7367cf5be60f3b6ba11a9c842228477adfad39efeb4a79005b6388de275019feb67e16d0924e5fe9429ce9f3af3a6d61b733b7d2b1bce4003e57b1b81f52da6ba73844f84f2e7df6e5d05c9a81bfd2b89273d74677198200e3ab5c301cc5842047a5ba8debd694ed4b6c49237c1f36f5b177772c47161900682ed08e2a42569521680b42c142d0a4852549228a4ad2410a4a8120a482080034208de95a51325ae54d42264b98952264b584ad1310a052b42d2a74ad0a4900dd5255bc1492a490438067d1c657cafa17b79c616759f222b4e75233265b6d00a5b72d4c5fef191294871285c92663e2e05b69c72bf102042d72b7e2104a1c008c8089144a92a423e4af6a3b20ad87dbada0d9e4a0a68e4559aac29452b09500e155e91574012a5de61a7933451ce980949a9a69e013bb1c76a25f753968d100dd3fed371e42c798314b71c022cc30846463829c95f0923ccf9f63219d4bf30088b465e93baf30eb3e2964bbddc54ce2211d594b7150b1b31761a15c710952001a8b91bcca5d2ea1f6dbf717e12f657b8a1da2db3a892b4ccac9d2f00c326200e5a90f4b4ddd5662532529569b2a7d52e8a495a414267504e97bc56998946d00b0e96c999348ba8ee0ff00686529b912de296e317cd4dad6dfd6dca829b93b00016a9dce3d8cff0068d9bdcb74f0e1ac4d0f3e446d716f51cfcc0b52b8023400e6f66e16f97025c8888743cf63f5fbbec2c37c1c71f7ec8f38408edf96e6e700f03d6a37c4bfbe1ef86508809a1af5fbbd49ef7b73ea0604dafa7c868c3f7300f53fdfce269defdad5edfdcf5b8ad310e2f91fa7be70fdf9e7114d87216dc800b1a5bbed43cfcf72897d753c58fa37bf189a0b741e7bf2341734a13f2b1a8c003f6f7ec7941cfbf7ec5b28115fc3bf9efd850d395ab6c4bb79ebf2e99bb58f008444476341536de94e9fd36e605b10f9338f7d037d3c610007cafbf981cfa700cc0a1a6d83e9ef9f83df978b912f785056d6a54fd2941f85ab4e8374c83f6e00567cf8b68ffb19727dfbf6fc63761fd9d0e0b9bd30d10cc7c5ee71959673be00ba08acb5a7a6202d2fca748e45344262e310cadb6cb0ee75cdb2b5c628abde00a5f92e5ccbd1d08e25998bc1df9e1f8afed08e33b4549b09413f7b0ed9b28a00cc53708299d8e54c8265cb2a04850c3e8678961b74a6a2aaa65ac1329053c300f1fabef27269127e192cb9841ce629361627f424f220a940e41b658876151200f21946ea373ff3522ea51f2153dcd00b918f23a1056a091a9f21993e51a1960083316940d4dcf01a9f0114af8b3d693c3870d7ab9ab92f85663b30652ca111000d9064af34e3ad662d4fccd130b9474af2b2d0d254b23356a34f72c65f5384000435fbccbef290d21c5a7b5fb28d8a4f681da1ec96c84d5aa9f0ec4f1594bc0072ae5a928561fb3386cb998aed3e280a884be19b3f4389e20dfa9669f7520a009401e47474e99b3a4c8fd282a1beab7c12900ae6af4fd12d2b59e2d142f87800d1d81d04d19c89a5b0b1eb9d4c32fca9c8acdd9a620bcb8ecefa8798a362b30026a3e7e9a3910e3afae6b9eb3d4df3066b9915aca51193775a650d43b6d32d00f63edf6d6cedb8daec6f6966484d153d7d5265613864b0812305c030f932b000ed9ec0a9932d294269704c1292830ba764baa552256b2a98a5ad566aa7aaa600a26ce2182d5f0234972d202654b0d6dd972c25039262b4e387c63c59af123c002c39a893483d69d119c4bb4a78a4c9f0a84e5ccfc9845a72f6a549213c2eb900a47aeb2d806fdee73d359fa5a1070f1af35159a34e23dd6b366428b8299c2c00540cdbb7bb3bed3ffb3d4f3763f6c692a369fb34c5a6938860466835fb3d590035d29daad8aa89eaddc2368a84a8ce5c942e5e19b41212ac2f1c953a9e6ca900f499b4d5494a0d35524cea3984ef4bfe790b3ff1f4ca3fe1ce4e643844d0e8009a0a4b8a4f96271a77c69f0ff9a72be7fc98f4ba1a7cde63d2cd69d29cc0ec00244662d36d44903c25f9af294c2261c2d0c4fb2b4e510d3bca59a6010d263e0005595f3e65b7440cca5118ae678852e3dd906dd61989e038c22a2650ab0fda006d8fda8a04cd9741b43805724cfc2f15a796b214ba2c4e90cca3c530d9e5460044f1896098824cea7aa9431e6cb9b8755a4a161451bb3a44d483b93a4ac3a1006c7344c4ba264b5647bc94b0e14235e8732c669d30ceba87a1b9f62dc98e7400d19cc89cab173d79284af39e548d97c2cef4f7503c2851407b3764f8e96c5c00edb692db1039ba1f32ca58406e5a09fa4186e3786ed6ecfecfedae0d2d323000cdaac3cd78a249246158a489f328f1dc15cdf730cc524d44aa452895cec357004154b2f50c3886d0504aa4ab44fa64eed1e212cd553a0391215bea45452b90002d22725425dc93215254a254a3149736ad3a73a8f95f532187b990e6e8b94e009aea4b481e1607ef68cf85d3fcdefb6d84fbc8d94e658987ca71514e7bc2240099a7de44521e4cc2e1f9761e938d60b5f81acef55e1d2ea31bc154a2eb229e005efe3187214a7dd95514285e22896187e6b0fdd47c752b0bab0e51c4282a7000b5fc53e9513711c349babfba46f57d22493644da64aaa9290dfdf53327e29c00a0ab8c8a85868e8688828c6198a848b61e858a85886d0f31130d10da9a7d8700da70290eb2f34b536e36b4942d0a525408246385cb98b94b44d94b54b992d6009992e621452b42d04290b4281052a4a8052540820804178d4a54a4292b428a0056850525492ca4a925d2a045c1040208c8c6c23ec5ad7a9ae7ee1db33f0f9900be60fcc738709799a5fa77289847457c44c279a2398a58a9fe884d5f4ada6900f0dc8642d4e349be2dd5452e671ba591f327635d8b898a661fe627e35bb3da005d97ed328b6e308a7453e0ddaa61f3f68e7c89328cba7a2db0a2a9145b6549002c8529055595cba4da832d025269a56d2c8a74494ca9729733b245426ba9a9007114b0555cb3f984866456c93ddd5061977aa09a94a6dba8a848c802731d8f001bc510c210c210c210c210c210c210c21104050295004104106e08228411cc0011638679c0804104383620e447031d363e10c23e522bee97553477fe5e692700aa0d8d6e4515cf1ac9b2fbb5901f74dd279707e20db8e4758d34f95dccc20700e93f120f2e1d41b73b1d63e78dedb2e0b4708bc63e629c65595181d21d7dfd00e1aa3a7e186dcf8194cda3a37ffd20e4f697ee59619321ccd14a994be5f0e500c6a5d95f3165c87f785c0f04fd4afc3c7685fdbad81a4915b3bbcc7b667bac001b14de23bd9f2654bffc195ea4ef294a1534681266cd50499b5b4b56a6621f009ae1159f9ba4485179b21a5cce2407eed4f99de4d89372a4a9e30f3416b77a009e86d4bf6001a8dba1c77c93c75f0fda36ae7df57f662696a6fe77e7f7e5d200987bf3888e2050dfbdf6e43fa814a500c4bfbf6fc89fd844bf9dbebef2bfcf0090efd4f7adcede47a8b536a8ae21fc34f4bea7317e9a0ca222283e7bd7adb700a5bbf99dc570f4f941cf189a0e77af6dfcfe587d211143d06f7efcc9a546e4000a549b74be0e1f5e06cdeedaf3e61e5cf97bf7c224002bfd7602c3f1b5ef7300838f7c783fd3af38393ef8dfdf965022bc8fe1cfb1ea2c7f0db00787cadebe00ee0c4471a0e9ced4a8de8795eb6adc5ac3960ee7325b521f8daf9b1cf875b4004bfd3d23953715dc934fcb6a53b6e6b415be0e3e9e36ebeef6d2220802a46f004bd36a8da82f7036dbf3c1f4f1f7d7e9ca11633c6be4a31725cb19f6121de7001e93c53997a70eb4c38f044b6625c8c9644453a8253090b07324454221c710001b762e76cb25d4bab61b7bc71f8b3d95efe876736d29a52d4ba39abc031252002595814b53ded661b366a93fe0cb93528ad9256b1b8b9d5d225ef25650999a00cc465b844d0e48f815ad8b9493c002e3aa80eb8e7c787a3550c2119c4d31ca002de45d3fca79552c965f94c9a1533141712ed671120c74e9c0b4296829766d001318e3694b8e21b6948690e2db6d2a3f5b3b37d9c4ec86c36cc6cf84144ea100c2a42eb52b20a86275bbd5d89dc5b7457d4d426582484cb4a13bcadd04f2390008eee54b46a9487ff71babfeb131df29f669d6db74b77ea2bb7362a246679e007cb2bebabdb8345d89fbdc7e36faf961bc78fab71c9bfa3e6f0881f88e63bf002e60f5ada95029892af982073e760fc33f368400e9c87ddbee9cf101478f1f007d79e6ed72f088b74269f75bdad6f95af5c013c588cb2e8d7c85fa0bc2269e007b1af3f2dcdb7a5a83d6986f1cf5bded9331f1b67ae41998a1d87dd7eff3380090a3ccd8f9bf4d071b0bc207cfe55adfe5f9ec69c8e2378f1f65ecc6de9c9f004843e7e5f76f2ae0f6ccdf37e8c7c19b5f0e088fd4d683af5dcf3fb1892ae0004f8b9d2dcb9177e2e74472bf6f9f7b73fb17b5b11bc78eafc1cb6acd9f2f580045c6f087c3be60e2bb894d1ee1ff002e7be444ea3e718195cd639853495c97002a40a1e9c674cc00ba0b4a5c8329cba73376d95057c4bd06dc2b685bcf368500713dbadaba5d8bd92c7b69eaca77309a09b3a44b50511515cbdd9187d31dd200e3f335b369e4150ba02ca94424122c554f4d353cd9eaca5a0900eaa36426d700f89440f178fa7de4ac9d96f4ef27655c8393a56c49329649cbb25ca79664f000de230f2b90e5f9743caa5300d1714a71688581846190e38b5bae783c6e2d6b0052947e3ae235f578ad7d6e275f395515d88d5d456d6542db7a754d54d5ce9f00314cc015cc5a94c0001d8000011d70b5aa62d53164a96b515289cca945c9f300315364d0deeda544287f33bfca8dea1b49beff00f3d42bcea12920df155323007525673565fed1f73e803671b1a395ba9330e6bb0cec91e1fcc6fad806d62c0037da231226797f851d317fc025dab9c6e684ca669e2405a970ba43099d38a50086874836098d9af0ff002e8188343583898947fbd51e8bfc3dcafcbe25da8600d2201351b29d8c6dc55d3328a409bb573707ecca64c245c9934bb77513e58f00f9d972ce91baa3f84564e19c9a1a829eb3b72974e02a09d3e915d31c5a355000c210c2118e0d5396234438d3c899ca5c9542e4ae31e4530d36ce52f866690800debf691e549ae72c839ca2490a4b7199bb4732fe74c9739896d6d18a1a79a700f0cb69e2c975bf44eca55ab6cbb20c6f07a8226e31d92d6c8da2c227cc5bce0056c2ed56294d84639844b0e0aa4e13b5b5f84631492c8509471fc76605242f0074e691f99c3a60379b40b1310a399a59eb08992f989750a44c4862ddecdb870068c6ff00b52723339635af87cd69840b437a8f24cd5c3fe6a4a57e169f99e500f849aead699462d01212a5c040c0eaecbdc538b53ab33a8043212db2ff008b00d3ff00853c7d75fb31b79b193483fc16a70ddb9c30b39449ab994db33b432900dc90274d9bb31390129091f959e56495a1b4b89cafcce07522dbf875449ad900659cf7550a4d1d4a01d3796ba398746945eed18e8cfd9599cef92735e517d40086c66290cce54cc42d249828c8a84751013168a7f9db8896c77c3c7c2bcd9400bac44c334f32a4bada143d438457ab0bc530fc4520abf275922a14807fc595002e624ce92a05c144e95bf2a62540a5685a92a052488e1f4154aa1ada4ac482007f2f3e54d5247f3a12b0664b2ee0a66237a5a810414a88208263dae93e6a7b003be9a645cd716a49994eb2bca22a7284a423e1e7c9836d89fc1a9b4d9b76060074cc7c1bcd8ff8b7585a3fddc636d061e9c2b1cc5b0f9608914b5f532e9892004efd2198a5524c04dd499b4ca95312a3fa92b0758cbc4e993478856d2a1fbb0093533532492fbd20a8aa42df50b9250b0750a063243ecaed42674efda1121c00b5131512cc07113a0da81908c2362b0d199d34966f26d50c96ec40d82a0f2700466b2a5b59350b8b436907de288f2a7e30766d58ff0060b3718952a5aaa3600036e304c6153556992b07da9a5aad9cc5912ef7efb1797b2454902e99249fd20023936ce4c3370dc429cb7fc16a69aad17c91508994d3d87fbd1499737d236b008c7c928da4308430843084308430843084308430847e1984288a875003fcd600eab68f3240ba3ff5c0a74af84f2c5a9d2fbc41007c42e9eba8f116ead162a200577b2c801d49f893c5c6607fb85af6768c30fb69383fff006b4e09f3bff0fc00ad31daa5a23f11abda76504a22e3065f827ff8db2d3650d3af447f1064e33400f8196b7e011d99a5b973c6b48601c76f7e1f76ecec3f687878aa9c6560db4500bb8162a0dd12cd4cc49c3aad4e4047e56bc49ef669732e926d5b03bd16f07a00afcad62028b4b9dfdd4c1c1cfc0a3c3754ce74495718f9ddd0fdf2e57aff00006028063ea8b902da105f9b37be373ca39dc3afdfdd0dc56d6c1fa9bbfa5c6a007d59b4842f5ebf9003a7cff5d86277ac1f89e0efc74e27e562ca843eff00af00a7dd45711bc7d5fe4ceccf970b69a321f9ed4ad6ff009efb72e7bd01446472001ec5fc1999af630877f2e9f80b79d3f0028de2cc6fa87b9e17f5cc78334220008e5dc1e5d41fbe7e6700aeb97139e4e6f7b7ec35844fcfd4fdf5b5b614adb000de36cad76035160ffd6c398843eef5bfebe7d6b53d0e5ee48bdd8f3be5088100cedcfd7ce86fd47953b61bc789f3b5b4b01efd11cb98dbeb4f5f4e9cbb93880073f5e3f373a42389fbb8e5ebf434b56b6a5677ae6fd06879116cf8db5b398400745d4eca4de79d3fcdb9556c97de9ac962d12e425c4b644e21902364ae15a90048484b536868371c429c6d0eb685b2e3886dc5a8708ed2366c6d76c36d360100b8a9b3abb0a9eba24254028e2746d5d860049fd3f9fa7a70b49237d056824600f16b53d1de4a988cca925bfdc2e9ff00ac0460eb1f25238e455ad09cb2336e00ae64593ad61b6133b666f144a14b0ec265f6dd9ec442d10eb4b418e6a5ca82004bc95d61d5101ff0381b2dabb0bb28c03fb4dda2ec9612a29ee578b49aea9000b4952665261295e2b572581041a8a7a2994e955c217352a2084906f53a3bc900f2d3a6f026cf64fc447880cfa3c669c7e57e83a1dad4b57af5be3ead1573e300ae572385c64435db8ebc8a23af97dfdf6c37989cfcfcb8d98b866e17ce10fb00fd7f3c40531bbb7526e3c4023d0f9ba248a5adfd891f7dbd713bc2d98cae4800b3b1d08719bf0cad94222df4e7d7d29cfe9cb0debb8361d6fc7874625b80780043ebf7f90fc296dc02b8e8e49e3ea38f9d800d644dc57b7d2ff91e9dfd5bdc00ceacf77161a5b8b677172d9a23ef6c40564f9824e6757b331f0feb087a6ffd00ab5e42be95df13bd6cfcec6fadb31c19ada6461134f5ebb585bcfa1bd39dcd000d30df2331c4e672c872391c836a2ef0857e9b569e7d2f7ae242c3e472cce600cce3f6bc202dcabf8f5b1b91d7a53b629dfebe27c1c59baf33ca11b69fecce0070bed38bd6de2fb304bd0b5b0a6f4434d9d8a824a8b2e2db95669d449cc0bf0010d12877dcb994645091f2f5a55ee9fccf2d7dc2871e671e24fc5d6d928276007b61696691be0ed162e11314378033e8b0b9131285314ef26baa572a686de400d24d425c25438c6d0d4b0934a939ff007d3189cae9402069fa8907fd240d4600dc70cc9887db645bc6aa13d120152cf984824753418f10a1256a4a46a7d332007c0031c665a0cc5a503f98f901727c0031de129084a529144a404a40d800280007a014c6d4000002c00000e4328de00000006000007002c0463b7da290eb9600ca7840d48710152bd2ce39b442613959710dfc3c2eae4875178619744ff39100e34b398f5ea46b7928aa8301d729e14288f42fe1e6626a2b7b58d9d4922a76009fb14db4a7a301255bf37652bf67bb4aa8976058af0fd86ad08258199b897700508cea2f8935b28673682784f332552ea88f14d3a9b48af78e271aa86108610008b11f68d25d96f0dace7f816c7ef9d24d70e1b752e5318281e97b126d79d300e9666d7995923c098dd3e9de7092c70d9f954d63e1560b710b07bbff000f6a004d4768a7029caff81ed56c67687b3b5528bee4f5d5ec463d53852163f98c9c007a8f09ac92ff00a2a69a44d17960c67e1a37aa1724fe99f4b572486772aa6900aa45b889894287050062cefdac523838de172479a1e682e3f4ff00883e1fa700d287bc452a857f336a5c974ae68e248babdf65ad449ec22d07f954888350680031ddbf853ae9d4fdaaccc390a22463bb15b6f415686044c9741b3f57b474e0008396e6218151cd045c14003331af949132462524fe99b84e24e19dcc8a59950068f29b4e850e603462271edc8eb88a5fc39908d3c99c0a7fd12ad53d6b963700d0350fab99d14ca4744a5a710800592134140001bddb4be33266d9ea301d98009ea6ff0032f6770cde7e6540927324deef1c871d735b256739b85e0f30f5560015480f9904b9bb98bebe0c496fda1dc08bc81fe61d56d5985246ff000f11c2009ebfade1ff0054aa1d92a1b129493b0c79f3f10602bf0eddb4a55fa46cfeca004c1c3bc4769bb0e9478b2d4dd4c6cb65897c613a1c365a8f54e23420796f1b00e7eb1b92e3e2ac6f61842184218421842184218421842184218423a94e211200dbca25014cc4a545492014152aa1d4106a08503e2a114214452831af9e832e0066f25c051de0438650cd8be6ff00106667602d1a9ab95ddccde1fa57f10d19005a8ffbc32cdb478f9aafb56384f7b83de36756b4ee5f2e76072066a98ab54b004a9cf866a160dcc879e62a323e1e592e6d9529021328cf9a9f6496c90db8e700f0dfc429a421f6fc5f57bb17db84edd767b8262932689989d14a18363437ca00e60c4b0e44b94b9d354abf795b4caa7c418384fe6c242894284737c36a855d001ca98eeb48eee6ddcefa00049e6a4eeaff00e94639edf7e57dbaec3b6fdbb5007786af9be7a70d5f50d61d34cf88a0befb8fbdc5ac2bcaff00390ae2ceed6e0019be9d2e6cf70e2e853bfad6bb797e97f2c37f91d357f5bf2b75079a27ea29005e7e5f2aef4efe78055efc00777c8124fbe6c4c21f5f31b1363cfd6bd713bd00ae6d73a6797500d8db867aa23ecfdfebb54d37bc6f102e4bbf0190cf3bbf3600670c21122d5f2fe97dbcf9de9e8deb731c0b8e19bbeb6676b703088af2fbe90081570737e5e1a5af93df5639422798afad7bff0043f98e586ffb24dbd389d200fe004203fa7cfb7e6057e98153b68dccdfc383e7ab78c207f2b52bdeb635ef005a1a0eb86ff5e4c473cf3d0f30488447dfe986f8be6351e8e3c6f9e5e021180058d75cb2328eade7a93a1c0e30a9dbb37852942901b84cc0d353d8785016eb00cb59826a6298253ca5d62150e5ff000361c0da7e52f6ad807f667b44dadc250025264a3169d5b4c109294a293164a315a592c4924d3d3d64ba75aac16b94a5000090a0071da847773e6274de2469657c43c8167d79651701c1148046672ce1009916c34ea24997a1256db8e08752a1a2e7f1fef9b7584b8853edbeb8591c6c003fc443947821de8886749445842bb8ff000a983a6ab6bb1fc7264a4cc460f8002229652d494abb8abc5ea4097310ff001a66aa9282ba505a6c254c9a857eb1001958721e62d643ee218722a39f56491d098c95149b9f5bd36b57ce95e9cbc80063de216096f07cf561a701c79718dc4295e5bef4e56ad87e42e2845684627700ada72d1fc4e97cc58db5cd0009a53a5fd69ce9eb7db90b02637807f1ebcfcf002f425ec10f01edf80f33e5f957cdbc39bb3b35f8e9cbde70814dcd8f4b0a7700ad2c29cb7b6fb5061bef724390f9fa139bf87476843c34f41cc1bd6d614dee002c4d8d46d7c378656f020f3bea1b8819732d088a56b4a6e3e77b722052f4be00d4a93892a6e99db51c79876e99e57844f86ddf6f2dafe95015516b9f38debf00b1ab78bb1238db990f7efdfd1e3c24d6f4b91d2fd3a6e05857125596b67b5e00df6b9cda113e1b9fa5add3fdedefcbb8bd2a446f7c9f3be4fa641aefcb2722001029deddf6def4a5796f400015df6a50142d7cf3bb73caf6d4dedd6d08f3430042444644310908c3b111516fb50b0b0eca14ebcfc43ee25b65969b482a71d7005c525b6d08054b5a82520922b4ae6a25a55316a4a5084a96b528b04a1097520089b001203a89218024f181203be81cf48fa77f01fc3b4270a7c22683e85b5000c61a6b93f21cb1fce014b43ab7b3fe652ee68cfaf7bd6c51c64e6d9c4dda8200bafdd4bda84870b5a594a8fc83ed276a666da6dced2ed1a97bf26bb129c9a100b10138652351e1a9655c2bf2522419961bd34ad6c0a888ebaae9e6a6ae7ce2005c296426cdf027e1406e4901f897317b52487a25c8950babfcb6c91fee8a150091e6aa27ff00548c714a54594b3afc23ea7e43c0f28bd452d82a61d7e14f4100727cd87818f7d8cb8cf8b52e38747673aefc29eb3e9de550e9cfabcb2c675d002e2cb81a5275734b2752bd50d2653aba12210ea364fcb288f4a68b7605512d00216852c2d3da5d8a6d7d26c376a5b1db438994ff00034e24bc1b6942d3be0e00ca6d3d1d4ecd6d484a5c0ef7fb3d8b6246412e94cf12d4a0a0929395453532006aa4ad7fe1ef19737ff63352654de4fddad4cf67678e9da41a9920d67d2bd300ad5acafe34c8352325e5cce72c8779c69c8b806330caa1664a954c3dca948600a6b287621c964da14f85d83994245423c86de65c6d3c9b6b3672bb63f69f6800365712635db3d8c62183d4cc42549953d74155329c5548df00ae9aa912d353004b36e99b4f3654d415216951c29f2952274d92bfd52a62a5ab404a490e1f4200ce0ea08222a3638fc5a86108b19f69246261f833d5882f0a96fe659a69364700814207896b99e7ed68d3cc972c084ee5498f9f43aed7484157fbb8eebfc3c4009333b5fd969ae128c3a9f6a31a9ea2580a6c0f6431fc62a493c3b8a1980f17006d633f0c1ff0c96744227cc57fb65d3cd5abd12436b165fed639fc1c170c59006b28bae1131d48e21b41241286529f129f772967f976afcdc1a5d086b2ce9900cf1f53942125b424d0ac63bcff000a587cea9ed4aa7149690646cf6c46da6200156a258225e25824fd97a623fcca5621b4146809cc85123f4c6be5a84ba7c400e71fd32b09c4412ecc6a69d7452fce6d4cb1e3c6311b8f6d475c4531e1c13e00f74bda9a8490de64cf1aab9a21964102220330ea766e9acae2dba81e2622e50091307130eb4ff238c3adb88250b493bbdb52138f2e43b9a2c2f00a058b3a2600d1e058753cf96589654b9f2e64b5a734ad2a4900861c871e64e20256b4f438005d3287f96648c369654c49e051312a49198208370d191ff674e499867ff68e0070e6b80759107a3992f5d75bb31256495082fe0a634424f0e8f0a55e1888c900c6b508a874b8509761a4f335214a543290af307e2971da6c07f0ebb73227850019fb618e6c5ec7e1fbadfe2a31756d955cc5391fddcaa4d9032a6148514cca00ba749004c71b6d9846e52e2d504165a68e890742a9939554b6ff006a6906f7000df483fa846ddf8f8e71b98610861086108610861086108610861086108fc5001f0df130cb401fe627f9dbff00ae9adadff3924a7a5483cb16a723bc411a8b00a7a8fbe5166a25f7b2d49fe61f127a8d3c438f18d5d7f693385e567be1fb4d00f8a1cbd2b43d3ed0fcc8328e788c694db6f9d37d428a868497464505d1c8b600e439f1b934141b0c92e43a739cd22d4da986de719f51fe13b6c4619b4d8bec007554e29a7da1a4fcf61d2d40948c5b0b42d73a5a3f965aaa70d351326294c100668242010add0abfb3f51b93e65328b09a9df402ff00e22331c0128727fda0004695341b1047cbbd28297ad3adce3e80ef702f63e5af4cefaf28e5f114bdaf00e761d4f2a1b50dcd296bdb07b5ed97ae56cf3b75f444f876bd39ed5a0e7bf2000791dafe66378697d3c797170eda1cb3c90f09b1fe5b1e86f5b6d6dba5857700e786f8cafaf4617f2d78ead93a1e120d2d5ec2bcbbd07f7f2c4ef59f8daf610098e1f51a13ce10f0f5af90007cabbdbb56c6b7de92b0fa79fcec751c5aee2d000878694af9ed5b77ff0049ebd7e989dee1eac1fa7120dbead0f7efdf0e300900ea2a079ef5bd29d0023bd01e6302a6f1cb95acfd74cadd210a5370295de86e0036277b8046db5491db1214f970f1cac3c9f5cb91843c34ded6ee6bdcd8d3ae00d6b0def88de0ec3f6f03af4e47c50f0d773dee2f5de94ad6bb9a7973d9bc3d0039b66d9b64ed70fd2d081493b0b52dda845b9df95c835af2186f8d7a6b935800e9e8fa6708c6a71b9201079cf28663430db4dcef2f454adc71b4c3a15131720008f2fbaebe96d297dd7d10b3d81871131057e386661a1d921108509f077e2a00f064d2ed76018dcb949968c67045d2cd989091dfd5e1156a0b98b6014a989a004afa19254a27fbb952909b20c69f11434d42c06df4313c4a4fcd8a474022b6007059247a074ce71387d871933dcd918a8471684253172e96cbe020d110d3800078d6da665fbd614a567c287619cf025256b52fb3bf0b3862a9b62f1ac5264b00285e29b413254a594a477d4b87d152a10b4a87c4a426aaa2b6500ab2572e6600e8b927230e4b4a5a9bf52c8ea1207d491e717857e76fea76b6c46c0dfae3d300c08b1d395f4f57e1e11b088f98bd6e46c697df6a548dc589d8d307d1edc87e00c0df2275e7089edbd39547316dc0e5cea7722fb83f85beaf7e3fd384207a770016d8db737dfec8b8ae0feff6c80e5cce85a10bd373b9bd7bd29f8f2b12280d002b86bfb7f5f5cf5844fd7f5b5e87e76dafcce21ddfd9f65efc7384453d003e00429ea4edd6d6a81638973e7cbdff005be70874a5ee2b5de82b7a01602963b7003ef83e57c9c7dfeaf0876dcd7cf95452a6db5b90ef4a95bd3fafcdaffb4220009df7db6af3e6282f5efd0ee050e23cbdbfbf2e7089bf4b5a9e5ca8473dab5300434de95c49e3f303339fedecc2326bec7ee1f18e237da05a0d95a6b2f899860053c933c8ad5cce1ee1bf1b0ccaf4da19798652d4cbc495204b66f9c18cb320008c4aa9ef9a9b1650429d4d3a8fb72da856caf665b4959226a25d6e214c8c12008378b2953b1550a59c65331ef64d02aaea6591fa552428b805f5d8acff00cb00d0cf582ca5a7ba4df599f092398495171c1f48fa3b25254a4a522aa510903a00926807a938f9557278927cc98e020124017248007339477987652c32db49d90008009eaaff007947ba95527cf1b6424212948d0378ea7c4b98de4b409684a0005985f99cc9b7131e6c5515c308462f72a4a1be18f5ff0035e81c6a112fd29d00719fe72d69e1ba397e0665b2ecd53d8b7f35ebce86b710f3ea5b93a82cd71b003dd6ec9d02a09723b26e73cdd289143264ba511c217d435d5c7b4ad82c2f6e002528cfda9d89a1c2363bb43901d7515185d14a4617b0fb6aa968404a68e761007268b633179e1d32317c1f0aaaad986b36a2477b95523f33211549bcd90944008aa1992948dd9150cd649404c859c82d08528ef4d8baac75b46b6184231e9c005ccdc6a6eb5f0dbc31cacb31d090b9b20b8a0d6984f153f7769c68f46bf11a00570f14540a03d9ab88346498f9641905c994b34ef382851897450577f764d4007fd9dd90ed0bb48a90b9331785ceecdf63e737fe51b43b592508da65ca00850014619b08ac62454cdfd34f518fe12082ba894d9d23fb8a4abaa362b41a2a7300c66cf03bf2392297bc04e8a9a819a8118a9f694ea7426a2f119a6ba392788600a324fc3e48265a8f9dde86790e370daa3a912a7b2de46cbd14026ad4c245a600cfe6fcc331830b2b4c167eca718ea5a43d0feffd77f861d969d81ec3ed26d900d5cb5c9a9db6ac91b3b82a66214933767702a84d7e335d29cb2e9eb31e46190043266b01df609894a41514ccdcd162f3ff0029832a5b8137159c896949fd5f0092a3589b3660e026558912d0a399913d21ca4b63af57f33c6e57c87365c954004e6acc2a85c9d929842921d7f3866b7932590ad293552989745c509c4c94da001c5c3ca25b308cf76a443af1e9cd9ca1955d8b538a903f87d189989626a2fb00a9c3b0f49a9ab04e4173a5cbfcb480480ba89f265b82b11c6b07a54d5e2121003340fcb48deabac2412052528efa782d60a9884f732dc80a9b325a1c1508aa0059432dc1e4cca596328c02d4b80cad97a4d97a0dd70250b72164b2e879732e00b81202038e370c971ca003c6a51c71fc46b66e27885762338013abeb2a6b2600252e40995539739494bb9dd4a96425f4022dd5d42eaeaaa6a963e3a99f3a7a0080bb2a74c54c2072054c3946753d881a2b1abcb3acdc5fe60971876f5a269200bd32d1979f4a52f44e8be93cc27888dcd70e8a7bd661b50b53e739b62a0de500acb539ca594f23cea1109858b65e89f9d5f8e8dbc93538f6c9764f8754898900d89a5a9c7f6b132c92846d86d3c8a354ac366281285ccc07672930b973529000154989e298cd1cd3dec95a25f3ea6a5fe1f87525128113d5bd5b581df767d400a6589724d831934c894169b944e5ce492e18679f1e078aa2cb78d7e3974c380021c95956739af286abeb16a6ea7cf23f2a688f0edc3fe4598ea66ba6b566990044a5fcc13d97646c9b2d532152dcab9761a273166fccd398e95e5fcbb2865b001151ee4da672394cda92588001529592433b021cdd800970e7a00e481117700000726ece0581009be81c3f511695ecbdf6d6f0b3ed47986a769fe4191ea168008710ba35318e85d43e1d75ba5b2e906a4cba5b2e8d6a531d98e530f011f1d000d37944a67cb732de63855980cc79567cc261332482590d339146cde0294e1000b4142ca77acea4100805a66e8048247c24254d7096bc4390add5a4a5453bd600752480402cb601c121c100ddc06bc661f15c550c210c211f8261348095221100c8f7d2c223663012a86a824bd1d32896e12118404824a9c75c153608405ad40042524e03300ea40cd9f8f0d1cf1e11233038966e3a9f404f1611a5ff00ed7700659d42e1998e087da79c366a3670d19d7dd37d585f0ff30cdf9267b112788900f4967325cc1aad91e0e77008884c04fa592898643ce5073492cd65f3493e6400936637a4b9960661288787844dd2841fe50f6bb07701817cec2d9e4e32262e009420df752e58bb0770181767702c395b28d88bd90fc7cc0fb4ab801d08e2a500c8695cab3ce629447e50d60cb9298b868887cbbabb90e3ddcb99d1944230e300aec9a03314442c2e79cb7268f263e0b28e6ccbdefdc8a0e371913641b9048200527754dc581f07490a0381116038241cd258f9023cc107c6325b898986108b0067e27b44a45aff00a23abfa1f989985724faa990332e554bd16cfc4352c98400de5b10d49e7486ca54445e5e9e0819dc038805c62320219e6ffcc42719bb39008e54ec9ed460bb43485626e138952620132d5b866ca953926a2989b0dca99100ded3cc492ca95354936546b4a9549592e726c133133436a97f8d3d0fc4923f00ca79c7cb3f376569e647cd79a32566681765999327e619d6569fcb5ea07a02007797e6313299ac13b4a80e42c7c24443aee405b66871f60686b69f11a2a4c40028e6267525752d3d6534d4dd3329ea652274998392e5cc4a87231d80952569004ad25d2b4a5492354a8020f88223aef7d8f315dedb74e54ad8d06f6c653e9e00f8b7d5bc62a81bdc1d8f90f9fd8e5bdc3d5f8c21e5cf9ee057902076e7ebc800625f2fdfd7cce5ce10a1ee761da97af2a799e7b0a5460fc2dd337eb9b68cfe006734284f3237a8a8e95a585adfd2a4d4c421d6f4bf2a7dd76adba01d713f4f006df3843d48af2a0db7bef5bdbe5d893b5fa97bbf3bbfb73085773cf7ec69d0009af2b13415b6d518037e591d59fdb8108549277a0e83b57bd6d714f51700c300fbfa4222fdc8a5457f50772294a56e6a2971897e795adceec459ff007d43420026a7bf21feeefceb41bd2fcf602db622dc78fa7bf38459e71a925763f4ce4900388761c7cc8f364298b710da54984974ca5f30855c43ae1ff31a6953112b8400a24f81c7a2590b05496fc3e62fc53e18aa9d8bc131444a2b5617b4089335610020f734b88d0d52662d4ab144b5555351ca61654c992dee046bf104bca42802007756013c0281b93d424753154f86e94c4c9f44b20c2c5c3b90cf44cba366be00edc5a56550b3a9bcc66f031092952c25b8b808d8589422a1484bd45a50b0a00039ef617453283b2ad9395365994b9d4f5d5dbaa20928aec5ab6ae9e63876130069a6ca989bfe95a524050298bf460a69e5836704f829448d4e60bfd04570ee002bb007637dc0e7ea6bcfd476def1667e2c4ea39dafaf33e8726077fedb6c7f00237041361b541f52e6fa38197833f263724bd8421d6b7a5a95ebd76a6f414d00ae0570de2efc589667b7c99b537cd9898437f2ede9416a14f226dd2f89dec900d9c1bdf4d58581e02e7a4214bf30492473a72ee2e3b5b6adc61be7c867a13c00c5b9ea7270181844d3af33cefbf2dedf5076e7411bc78bdb98e4e2fe390fac002141e7d7ccee4d3cefd06c30de27d48d2dfb371cdb5108e213fa1e5cc1a8a500fd2b4aed4c37b5f2cafc7799af6b72f3844d3f1adad5a798a1b83bf2bd70de00cac07d33c9b2704027ad9c42269b6fd37dadcf97a9adf13be7967e7a0cee7c001b2be764472ed6370491704576a91435bedb8270ded38bdddbc8f83025df9500c4236dbfd98ad102987e25b8908e62bef1ecb9a25966269b7ba4c3e7aceed100245483efb202904103f95ca8b8a789ff00173b44ead93d9596b36155b41568003c15bd8761ea0321fa7137ea1ad9f17da29fff0093d383fe69cb1ff511ff00007fce36e394b1ef62d2b34f0b20b86a2b557fa503cc28f881ff00a38f1953a3007a639c921fc721e46fe11a1a446fcd04b3206f5f8e49f237f08ed98d8c6da100842184228feba68964fe2034ee65a7d9bdc9acb02e325d3ecad9bb2d46feea00ce5a7d9de4112998e55cf992a721b74caf32e5b99b6dc542a9d662a59348450046c8330cba7196e6f3893c7f2ed87db4c5f6076829b683084d2d414caa8a1c004f09c464fe6b07c7f05af9669f13c0f19a3de40a9c3b11a652a54d085caa9a0069a24d750545262349495722ec99ca91302d202ac52b4283a264b5065cb5a70054a858e441652485252463315c5c45f0cb9da51a17c7bc5c934b332cda3132009d2ae25970eb90f0e9c43c321a79d62218cc914e3f29d1dd526a1594273769006e7b9a4be1c4dd6b8ad3f9ee6bcbb1b00f33e9a97d9749ed2b05aadb6ec3650056ed361d4b28d56d476722626bbb40d80985684ae5ccc3a525155b5bb32b9800b270ada6c129a7acd2012b1ea2c2f10933d0ac85e1ff009842aa30f0a9c84800de9b4afbd534c5c38dd60a9d29cfc1365825ad3129503179ede79ca113256b0030cb731c9271268987115093293cd2026701170ea478d110c46c1c43d08b87005268a1121ef71420fbca115ea5fe058ba2b15413f0eada4ab9730ca9b4f57400b3e9a74a980ee944c9339089a2603632f73bc7046ed8b6ad40a1452a4a92a10062920853f0dd21c65a88c2a7115c6a683e85e73d5f9870f8653ae9c556b3cc00244ecf60e55995ecd593f4fdbcb72087ca79715a939ca05f8d95e47c9993610020a327707a5b2a8d63356609fcf2751d2a91c12f364d332427b4fb37ec536e00f6ef09d92a4db6455ec67663b2126b5349515586a70bc4f1b388d7ccc5310300806153a5c9a9c6717c5a64e954737692a654cc3686868a8e454d64e186536100f36f4f5f734f2a762933f29454e95f7128a426a2a8a9456a4d3482cb9b326900210aa9527b99694a77d6d2c22312321954c2044de6798277179af39e6e9f4d00737e7bce1316db6e659b338cfe20c5ce27314db5544331e32dcbe4d2b654a800490c8206552197844be590ada3dad3554a895454386d1cac3307c26869b0ac001b0b90546461d85d14b12a9a990a57c532610153aaea57fded656cda8ac9e50053ea2628f01c4f119b89d5aaa16912d0129934d4e924a29e9e5b897250f9b300954c5303366aa64d50de5aa3b6a25f0612cc647b30cb5c138a8d867629b69700fbbdc4b0f32a8b65c741f867842bf10d2df4290b4c3bcf345610e3a9560aa7004c754b92b584cd025ad32d4a1df24ad0b12d413fad3de210a082e0ad2953120094918b2b7d2e12560cc4ee2929246fa4a92adc5007e205494ab74b8de092ce00045c0f097c2567af680671121cb066997385e934c0c36b36bac207e121734400242bc04cf48b4566746d198f354fd285ca336e7793baf4874e24cfcc54dccd00ecf3fba64e8ea1edafb6cc07b05c15736a154b89f69f5d4fbfb27b1cb289cb00c2664e41fcbed4ed7d3ba8d061b424a6ab0bc1ea928adc7ead14e0d3a706fc00dd58e6783e0a68ccbc471395bb35244ca2a098196a5e68a9ab967e29726596005ca92b01750b092a4890e666e2194f2ae5cc8b95b2de49c9f2680cbb94b27c00824f95b2be5f95308859648f2f4825f0f2a92c9e5d0c8a221e065b2d84868300846103c2d30cb68164e3e31e2b8a6218de2788e358bd64fc4315c5ebaaf13c004ebeaa619b535b8857d44caaacaba898af8a64fa9a89b3274d59ba96b528e7001b85ad5316a5ad454b5a94b5a8dca94a24a944ea49249e71eff18114c602780038d4e57169edcef699e7a8d8b8599e52f67c68be80f06fa42cb70cb760a027007acb179935575ee72c3d1097d963368ceba750192e7d172c7a0dd732ec8b2e00cb23619cf872ebb32412662cef31594a4286eb251f0960402c57be428bef060020946eb55243efacbdd452970cc947c2400c0b1585173fa9c31290831abd7b0061b34bdeca9fda7ed03e2f74fdd81c9d963591ad10d65d478680964ba0a51100f9433ecca7ba05c40b119050af7b98b8ecd724ca79a734cca71190d0b1aacd0093d5e61ff3e690c89a3f54e1fdd9533997f186cfe1b903aa5c7378aa68f81400a67281be2ce7e1b900712010dabe99c7d1ec1040208208a822e083b107983800a22dc30843084625fda23c464af4638b1f63fe459ce6032496eb1f1bb9ce4700170c998c4c1a672fff00b2beb9645cb32f8e84856dc54d25abcfbaa39392980068a065d0f3e732fcc22434f424246c190a5098948701485957c24a484aa5b0002a664ab7940a4382a09530201626f31018d82d40b16046ea7f5330242cb0700048de60402d873fdb48cdb2e947b31f44f29ba65cecdf377193915e82878a6d004b8e6a5b97349b59a2a6b3295a825419721a2a3a4d2f8b754a40309377190400a9e0939119116a7fb109ab5309ae86f1e3a16fb8eaa5991355747b55a5ad14002830dc6eaae52cdb94a72e25cf1f814f3cce8f48d2b4a5b0b4b6cb65c5a9250094a31d569aa0d628429dc5d44ad2433b8b246801bb125db1d76986d629492500f32ea0cd98b017b03a5de37a0c210c211ea270c7bc860e81fccc2aa6d5250b00212a029d0f8547900938c6a943a37b549f4363eac630eb25ef4b0b19a0dffd00a6c7c8b1e8f1f3c7f6f1f0fc3443da0d9fb304b65b092fcadaf121916b249100b81494b1fbce6edbf97f3cfc42681299947677cbd3dcc11884d6a89f42c41a00188a0fa49f872da83b43d9961b4d3674c9b57b39515380d419841577320a6a0070fdd373dd4bc3eaa9a9a592d7a75a4174bc726c167f7d412d2492a904c95300f04b290dc8214948e87a461900d850fd0fa1a9df91a72e9cbbe378dee3c43e00ae0e5a73cb8691b686e2bcee072fa817f216af5df0de209f47b79dfa5cddb3000c5a103d7eb5b5395afd48b5fcab605657f901e19016e36d59f3400dc79f9000b6dbd0d294b790c4956561986e3d6f93e9676736b421deb5a5e806f514f5bd00f7fcb11bc796673d320e7cf50da0b58227f2e67a7d3a7e15c028dae7867eb7003a58e80dc59a111e87bfcb7da86b4a5baf22712159e5c9ad7b58f47e5966610011cb7ea0ed6a5ed700114de9bd4d00388debbfcf4e6e38e46d7000844f903f00402de7cf953b0ad2c70dee7e77d43e418bddf95c5ddd0a1a75dc0db91a837b00d8ed5a03e57c4ef5f40ecdebe008d6c7239b01087337dfb0ada82b53f8115f005ae1bfae6df5d3c06b96605888450fe246531337d12cfd0b090ee44bcc4ba000a6c50da929298692ce25f378f7d552905b8481828a8a7124a94a4347c2952800a41ea3edd68e6621d95ed64b952d53a648a7a1ae0848ba25d0e2b43533e63d0086ecaa6973a6af5dc42807258e35607a698c1d824f928127c039f0d728a85a00770820b4ff002241216a711039372b4136e2a854a6a1245030ed9510026a5000d24a88091b9000a01cb761e4a68f62f642912494c8d98c064ba9812656174a0082a5330724126d724b45c941a54b4be52d1cf248cb8fd2d6d23b8536dcd2bb0013e57a7a5faed42698e53bd9367990fa723973e9171f8f1b5be99fa7a5e14a0057fbfd8af3e42bcb00a0dcf81b7ab374cf9eb1274ebefdf8429de9c873f5260087a123d37e6de19fbd39bd9ef9e479438ebcbdfd4f943ef96dd36c3781d40e000febc2da68f7b5a1efdb7be113fd7fbf2dc9b74e7de0abc2f773cfa17e6dc600c73221f439fa781f66cecd114e5604f3b73e75e7eb6f9e24ab27f639684720005f966225fdfbcb9be5023ef98a798f5e789de60fa91fb172da3b73cb3887fa005ecd7e1f2eb11e1f4b9a936bf3db9f2e54f2a831bfccf06be439e4c082f76b003bc017f277f973bc4d3af2e5debf88fbe58050d5c75f6edcd9a0fc32cceb6e005fb3e96bc29cff00aefb8fa8b0dad51414c0aadadd8e8de2720743adf8983f00a1f64727f0cf844d37d85c5abf8f61606be470de0dd79873cf3e3e5c20f7b300b6a5ade1c4f4b10f1f455f62ce8dab463d9c7c3e40c64ad996cf750e5539d500e9ea9b4781e982b512731938cb31f16480a5c4ab21ff000942ff0035db62110096366863e5e76f98e8c7bb53da6992e719d4d864e9182533974ca18653cb9100572d1c13fc47f3ab6162a5a959931c0f189ddf57cf20ba6591293c07761940007fd3de2fabc65ee4cd782194edaaf2c9af3f0b64a003e4af19f5c755d325a500956aa3e82c3d5e26891bb2caf559f44b81eaf1edf1931990c210c210c2114e00356b4834bf5e320662d2cd64c879635274f735c139013eca79b6550d36954600b4b4a92dbe86e2105c829941ad422659378076166b298d6d98f96464246b0c00c437c876576b769b61f1ec3f69f6431cc4b6771fc2e7267d0e2b85554ca4aa0092a041520ae59099d4f3923bba9a49e9994b55254b9153266c95ae5aaf495c00e93313364a972e620ba5693baa1f707220b821c104388d75b5a3f6747264b600366d30e1433de449665d98c4bd10d6907107925fcd19765ad3ca2a12e946a400e4d765b9a5e96b214b6c2f5172c6a9cfe21b0cfc46625adb75511f44b61fff0000b453185c9a5a7ed5b66b12c46be9e54b94adadd86c52561789d429018d45005ecfe2a89f858a95b051fe0588ecdd1215bc25d0252a4897933a7cdaa00cca00dc528a6310665056ad295598134f3bbc44b219c2696652cb0e59193536947b0016b8e892c0b125cbf19c136509632a486cca33d6b04540c3a0f8438e31966000b4072bc3f8949154b299db20512953ea03c58e6f55f8e5ec46a662aaaab0de00d8b12a9502542ab07d929531658eea555f336df1098cecea346a2ce42348d0004cd9da29f3953aaf16c52a8ab354ca593df2b36de9d32ba793d4cb3ad845c200652f61aeaf4c1b65cd4de3264320140a7a0745f4121e1662dad413e26d19a7005475033e4bdf6d14506dc4e9fc0baa2a0b51481eecf5ce35f8f5c02515a366003b20a9aab908a8daedb6993a4a921d94ac3367303c1a7cb529c1527f8ece4800018393bc2fc9c0f03905ff002b57567ffcdd604a39908a4914cb0fce72a2eb00b4c3d891c236558d6669abf3fd65e28a321a361a3a1657ad19ce5b0190a1dc0086a110b15a67a499774cb2466a963cb4f8e265da8527ce90cfd54cb8930ab500307a7b6aff001bddb1e3921749b312364fb35a799266c89b3f63708a8998dc00c4cd70664bda2da8c4368b19c32a500b4ba8c06af07988202c1ef0058d949400d2d217a1a1a4a357fcecb96a9b3c734d4552ea274a50d0c95cb2f7cef197190014864595a4d2bcb99624b29cb997a49050f2c92c86452e839449a512d846d200cc2cbe572b97b30f0301050cd252d43c24230d30cb694a1b6d290063c8d5d500d5d89d654e238956556218856ce9953595d5d513aaeb2aea26a8ae6d454d550042e64f9f3a6ac954c9b356b98b512a52892f14a86f28a944a94a2495294a2a0024e64924924ea4c7b6c62c46e2787a9fbc3086ea787a9fbc6975fb357add0d0030f6acfb7ef4a67d344b99b750b8999eeb449a561e210995e4ad7ed7bcaf9c006361587bdec42d94456a86438259314e3708db706c86d1efd05534ec64a58b008de99720073de2f78b24245d4e6c07373788960252000c1d46edaa8926c00b0092f96b7bc6bebfb5fbadf2ad50f6baaf24c962d1147877e1ef49b4b26ea43600df819cc5368dcd3ac118c25f6dc5fc4fc3406a6ca587c2d2db90d1ad45c2290027dcd717541d2a1c5245ac6e38e915100820e44105b363c1af1f4d0e13f30400d736f0b5c3566a9ebe98a9e666d00d1bcc1398a434961113359ce9d65c994c005f4308fe4652f4644bce25a47f2b614109b018c697fe1cbb93f026e4824fc2002e4809049d48003e400b45a4cb1ba965123753755d46d99b26e75b0be8328a00ff008ae2770f110c220a14347e9ede34a4fdb34cc7a83a5ba71ecd5d7ad3990093f97f31e8ef1319e330e5acd108a64c5e5ecf90720c999bb24cc61d8782c3008ec346e488d8e6d6b696ca1d816db787f9e84aa50409894dee85906cd628b1002eee5dc000820289660e4b8580410e95696705363abb390066028e91a7e7b500d7db55c467b5fe79a2115ac595326e9ae55d0fca51d2e92646d3f7e74ec86600b9e7330969cf1a831ca9dc64645a6367824f298094ca8bafc3e5c9340220d8008a8c8b8d9acc63efc5e8d99ff61c64f3148f6934fd50ee2652f1e14e4ecc5f008daf74ecc61bfda1236261c361c2f8718868a8470ad4d25a2989096dc5ad2e0025bc758fef9dcda580cc58ba95776dd70d9024872e0021f1d63fbd773fe1a4003316ba9577667b64efc40043efef842184238b884b885b6aff004ad2a42bc9004083f438823781072208f30d10a0149524e4a041e84318d577f698f42c660d0002d13d7c974a971135d2dd478fc8398e610cd92a85ca7a852c762a162262e2004544141e69cad2c97c2296406a37327bb45151671e9dfc27ed09a3da6da1d90099f3822562b862310a694a36556e1738226a250ff3ae8eae74d581728a40a3006445cd9f9a5151514ca536f23780ff005cb531097d5944e5924da34bb1f75e00ff007e7d2d8f79150cfe99f06e66c7a5cb3c72cf5bfbe1978e5c614a6d7dcd00b956a6e06f4e63d6b5186f0e2ff4e57cba9b3922d6107e473d7c7dfd2ef003006eb534f53f76f2de95c4be9627ef97bcf80bc1db3cbedf3e80687a4295f9d7007a53b77af4f3df11bc3cb3cbcddf2f583dc73f672078dded973853f3febfdb00cbb61bd7d35eada65c4e5c4335cc4bfbebc467efac29bd0f7d80e96a01b0db00cbbd30de17e4fd6deecf9c3dfbf7f78529d77205052b7f2bf4ebb576181531006bf1f0bbe6346279db304b438e239df27ca143bd283fa8af6dedf9df0def9e007979b9e46fe8f683f9f07f7a7cb85e1d29d79d3aefebbde94adf6b8a86bae400dc321776d3c32e707fbe472fbf2d7d0294af2b9b6c790bedd6bcfcad50dee300e0e6f62ccdd5f906bc1ffa8f13cf4cfadb310a6f6faec6fb5f737b8eb4b9a100c3785f96ba11eedc09ea041ed91767035fdb31d358e9ba8b0a98ed3ecf704a00716d223725e69835b89a789288b914743b8a15045425c552a36df738e2db730021359b15b5f48a702a76631e93bcc0949998555a12abd9c2885273048498b700383c99a08cd0b16e692d9f0717d3c23b7c240b12e84869743252dc340c3b300070eda004a10c42b6865a4002d44b684a5236a0a5b7c6e30ea745261f43492d002128a6a3a5a74240b253224225240e00048f26cad1290404802cc06af6166c009879b139b0b79e80d850114dc73b0bd46e7cafbdcffa7309273f7d3844807c002eec6f99e0ff003e59b8572a58817dfbede66e79d05ab5163887fb79ff0058008bbbf117d383f0200cb8eb716811bf7ebb569622b5ea282be55a0c4bf1d79e0079f9f8ded6685c35b2b5ae59df466b31eadc4c4048b0f4aedd8f2e9dea7f98008e580d7cdd9fdbbf9b6512497d2cd6371c5f8f12e34038167847a577e75af60002943d6a3c860ffd3c7de4c79c47c407cdf22c39e761766e6e5da3c26d51c800834ec491b6db0df7af5be0f6d33cb9b70f3cbc74892e0901df30e1c0d0df9300f874cd4dab7df604d00af98f41423a13420fd32f7970cef6b40be771935c100009007cfc0f100982801414dfcf6edb8277ef4b0070737bfd38587d78b3dda0001c5c93912c48cf9e4c3261a16ca24276dadea2c7cc1ede9435a0c1efe26edc0073e57e1e5104ab3bded667cba1b67911c80bc08de82f5bf3e76edff48d4f40006d4c1fecfe8edd2d965767807162fad85896009e1adad72e6e6e4fbfca996600679cb3465bca32463e26739a67d26cb72760923dfcce7930869640346d5ff30022a29a46c6c6805b18d5b57268692aab6a15bb228e9a7d54f530f86553ca5c00e9845f2084a8e9d2214a294a8a8b00952d4782521cb33b586be6e6df554d3a00c952dd38c819134ea49e254a321e4fcb192a50549085aa5b95e4b0323802a40027f952a54340b44a4581240b63e3b6295f3b16c5311c4e781dfe255f575d38000cbbeaca89951300e3f1cc37d63ade628cd98b5eb316a53735a89f998ad6c30061965a687fe6d094f9900027d4d4fae2fa53ba94a78003cb33e39c6e909084002503f952078ea74ccdf28f2e2a8ac027286115841d587a9f7e30c22b0848e700d618454c0641a184218421842184218421842184218423e3a3c74ea9714bec00a4f6e0f1aba85a039fa69a47ac5953892d6cccf95730424249b3043c669d6b00bcc2659f241033992664819de5dcc72b9d641cf525887e06752c8d661a62980058f658829ccae0df82ae4b84312094a94090c1fe224120000120825866498a005164b16704bb30d4e8001e9189c9b4f75638a2d76899f6689bcef5375af5ef0053d111369c4cde1133dceba89a8b995085bcfb890d37f19399ecd528434ca10088660bc8661da6186db6d154c2c8597664a8b9d2c624e46ed637e1cf5ca3ee00a7a5390e034b34bb4db4c656419669ce41c9d90e5c43afbe0c0650cbb2ecbf000843f14a5c4bc0c3cbdba3b12a53ee7fade5170a89b09042520972120136b9000189b048bf24a470005a003002f6005d9ec356003f40070023bf62a898610800d7fbf698f8249c71b1eca6d6083c95288a9dea770e53794713790a5902e32d00c54d1bd3a97cee5fa872b4a5d52171def74a73267899404a21d662a699825300228783622a3442c2bd4aaca42ffc8b04e7fa540a146dc028ab23fa5833b8a5005a1e041c9ec6c7c9ddf803c4c7c8431951547d5ebf64ef827cc5c28fb3065700a9b9f65b3093e7ce30b3cc6eba993cd201d96c749f4cdb95c0e54d2961e65e0001d886b3148a551da8f2c8e21088892e7d963686a8c179fc5fd4b5aecca64a006dfc887673aba94b50d374860ee4da28de5296f9b01d12faf52a3ae995e367006c5514949198f1f7f5861110c2118dcf6ad68d7f8dfc06f14d911a0b31cad200c99e7b9325b405baecef4c2221351a5b06d8a13e299466536e5ca291e30dc7002fc355531cdfb2ac6ffb39da76c86246d2d78b48a09e49200918ba1784ce590023fe6915666dece804da31a42ff2f89d3ccb6ecc5a525f2699fdd2b864ef7f00de3e67fe1f4af3e62b5dec2bd29524d6e4db1f5479feff0038e6d70dae590200c72cb41c5ec03586622483526bb8e42f41caa7627952dcf7c1fdfdf8c0060d009f5259f5161a017e6e3531053f23f3a8e7b8af33eb5a1c4bfb7e4c0f87b61000f886619bc9b86ad76f01a31313e1a8da972295e57b8b5076d89b1aef83f4d200fe563c85ada1881bda6ada5c91c4824b16cc96bdad971f0edb8b91e5dc58720016d86d6dea7f4b8cf973b3f2bc4deec341f5e2fa9b92e0deef90269cafcb63004befb72ad6dd397312e7df4d6fa6b0727891ad9893e7605883cc917d013d8800a9b7614df634a9eb716e6307e9e43df2e96893bda70f5719b72e16777b447800457b74bf4f4d8fd01aec70249cce597bfae7072c05f5721b4e57b903a027c20039f86c472b6ddf7e753e47a0b1a60e7f6f2e366e595b260229214fc4dc9e1600c80b69c83972cd9c70f0f634bf98de9b9aed4edc88ae0faf4cac6de1a36b7c008c54e78e59f0d01e81dee41c8dc089f081b035a5286845452f53d6bdac0f3c0001cb97875be711f11e84b9395ae34e0dc4e97223c11702c4c616225f1494b9000d1d0ef414436a154b90f16da98750a0770a6dc5248248a1f43878853a2ae8002ba96600a975547534f3126e1489d2572d49503982951046af10a75254345200482f7d0e7666208c85f2d5c7ec372491b9a922f7b9ebdb9dc5319008012072004eba5ada7887d013ac56dcbde56e16c9b8e90a6ff97e67cb9f3a5ad89de17e00a40c86435736bf16cc44ebafb6f7e7c61423e5f8f5f9dbb114e586f0e205f500e1e2cdf77b11784287f2e7dbf5fe9b61bc3ad9f41f3bdf4b6bc3286e9e5a7f004f7a4453e9bdfcedfd0f4a8b61bc2d7f477d34e27ed9e46f0cf2b71f7d624800b0e763b5091dcf2a5ea09af51b0c3783eba31d2f978bb8cb4be569f1f7ebef0058529db73d3f1a6e7a5f7b60540d81cfc7e4de6e388d5a19fdf87a8b716e1000a72bfcbaedde9b6fd6d88de1cb419defabf2bfcdee1de7afbb7bbf1c943b6f006aedb8f51d2be82bd0e242835f319f5bebcdac074106faf0d4fbfade229cbf005f5a53d6fdb11bcdadf9e8d7b87176b5acf6b44fbf7efe90a57e74e7f423ec0080713bc0e4fc6cda072ef969c33cf3686f3e233f7e8f768be0f66a69d3daa700c7d7091941b4071b56b8e47cd31ed783c69764fa7f336f3fcf1950b7f2bd2700cb11cd15ff00e6c2fc641f050f5ff6ab8aa708ecdf6d6b8963fd9fc428e592004069f8949386c820e5f0ceab96a19bb3067b61e20b12e8aa97a890b483cd6000cb1cf350b795e3e99b2f6c3b18c24ec17e33ff00f4c158f425201f3c7ca692009de9a81a3bf9027e91c0a9d3bd3a58393b9ffa20abe623b9e3671bd4a5ee7200f9c308b800194308986108610861086108610861086108610861086108d11300f6b73d8e7aa3ac798f26fb473859d33cc3a8d98a0f2f4ab4d789dc8b9032fc0064ff0037c4cb648b54369f6b0424865298b9c6616e5b2e884644ce9fbb20220062a4b2294e4d9c390c64b0198a672ba52a1294a52ac85b152893f0ac00904b009202549001600050073528c527e1249c8e65ec0861e0e35b00d7ce3175fb2f00fec61d5de2038c4c97c677109a5f9a323f0e5c2dcfa5b9fb28b39ff2bcfb2f002b58359a01a5c769dc16566660b934546c834fe7625ba873e9f34ccce4711100d249165289848f67304c8cba56b4cddd4a1972c9256b0414ba4864862778ef005cb061ba4120b022ca6018806e6c43a4b81ccbf0c9aec63ea01898aa184218004238ad08710b6dc425c6dc4a90b42d21485a140a5485a540a54952490a490400104820838423598cd1fb275eca6ccfc570e25cc8755a4f95e2738233dce78600394e6b92b1a07359e7bd7a36325a9973b961dcf12bc99339b3889ac6e4d96600748694b3476472812aca8e3597e1ed8428029ef57dd9046e7c36496b05b77900a100ef92028804327768dd396f1ddc9b95bf9b3d1b3c89d588d9725b2d974900a5d012793c0414aa532a828596cae572d8562065d2d9740b0dc2c14040414200b6d4341c141c334d43c2c2c3b4db10ec36db2cb686d0948b996515c7edc21000c2285201cac7d21845b2082c63abe6d9540ce253152e9942b51b2e98c345ca00e6308f242d98b809843390f150cf24d3c4d3eca96d2d3500a5c239e2ccd5ae004ae4544a52913644e44c97313652168505a1693a14a90083a18c1ad0c99730006685b38cc3dc17e45367d4f38f944eade467b4c75575374da25c53b11a7da80039cf23bef2c10b71eca998e652171c5a4eca52e00a9429504917c7d78c1712004e2d836138a246e8c4f0da0af0919245652caa9001b693000d61616ce39ccb00589b2a5cd6b4c9695b7252429bd7c6d9da29f52fb53f2bd2a7d77b6367bc1800b17f3cef96762cfcb8c56c0e9ed88f9130a74e5bfd7b6df23caf7c4ef0cb5200e3986e39b7cacfca262294eb715eb5eff2fc29cac704798e17e5d74bf8da0d00fbf31efdde248bee37b13420d287eef415be0141b5d39e7a71b71d79981f7e00fdbe50007e23b72daa47991df913511bdadb5e7913c1f866c5af7d0c37db3d000e6dc3d32e0d0a6fcea2bcadccedea29c85cf3c4ef6b7606e58b31723e8fd7008189f7efdf0f08236ebdfe4476f5ec69b62778717f4e7af2faf02c6fbf9c28003b733d2a773daa296e77f9524b59c970d6cf2cc1e25c72b1d6d06f7efe50a7007deddbf3edc81bd36de7785f96770feb6cf9e5abb08803c2ccc3287d3efe78003df5e4dc8b1b9fadb818365fb67a7101b90e1a06890282b4b83cec2bbf6da900b124d4da9883c1eca19679b0d7377e591d6f13f4f76fdbe70b836a1a58f903007af3a7e22d5a62c853b1767008bf93716887b8cae1ef637cb5b9f7d57fa75a00dabcfd7af3c4ef0cec3d38e6fc8f94520ea73d43f077b58d9eee3869f1437f00b36a7f603a7e4de70f6b9cf237b72e37d74e02241b07e21efc78bb59dc117600d32b2a79f2e4474e5e5ca9f860f66d0f07235ebcae4365ce04f83b31cf3e870042cef63e311f76e7f74e7f8e00e447dfaf2e460fcb205db3196a6dc7d1811700857f5e97edcb972fa5b07e7cb9dee4710487f3f083d89c81721f3667d0f5d400344d0ff5dc5adf2b50570de7cf9e97b876b6bab6b7cdcc01d1dcb121ede052003d3326ed0dbefa7507cab86f659f2d45ed9876e19d8e5c621f50efa6b990f700cb3b5cf880410de96fd4d37e97bede430de17f5cf8eaf7e77eba40171c436a005c872c474c8dc82d7d2d1df02a075b9cb9d9b5cdecd7e633897be7996173ca00f9f46cb3243d895fef9f2dcfcaf61f3c1dbd97191cb3f3d48d5a2064ccd6be00a5f95c9b599f97000e6b3d805a5d98b3efb46b4fb374a619a7247a3992f51f003e66c8a79cf7698697cdb284d34e654d4302087e3a2730e779516e1814acc000b1318b154413831d0df890c62970eecbf13a29cb509f8e576178751a121cae00648ad9389cd2ae12d14d4135d6cdbea972ec5623538e4d4a282620d953572d00090d7242d2b3a65ba855fa070e23e81f2468979c788fe54365009ff9ea2926009e49041ffac3adbe7552a7e252b4018753fb0f58e3187cbde98b591f0a53bb00ff0049441cb5b03e91d9719d1b886108610861086108610861086108610861000861086108610861086108610861086108610861086108610861086110a0e3009e91eba6b4f817bb16a9e7ef503f027166a3fc2572ddff00b4235f57fe02fa00a7fed08f9a17b59f4f6134cbda37c5ae5c8152550d31d538bcfa3c1fe943fa00a72894ea646b2050784311b9b62580903c290d809fe5a63e9cf6358a2f15ec00c3632a667eb9783cbc36f994e113a76152d44bdca9144853f13772efca30b9008665052a8e7dd8961fff00c32658e04bee79868c76f7fbf3c7669568ed761d004e9c72e3c79c679398d6edc727b677f4623a44d4df9fd93dadce9b751838d700f773a6ae790bf9c1eefa3664861d1b339b8e97ca1e7d09b539fd07d36eb4c100f83ff43cdadad9ded6d60e5db9dae06a3437b0bf8d833188fbfbae1bcdaebe00bf7f51d221f8781cc663a70bd8900b82d137fa7cabfdfe7e986f740e4b79e900a3dadab5b4b4926c2d72c6fd75b312d6e6f9343e5f4fbe7b73da96c0a9f37200e781cefc59b2f0b642f11bc38121d81e6f987f16e0cc73b47d9f9ff6e9fa9f00a67ebc3f6897e362e46a6e4e59f2be9d18889bd87e3702bcfa0dfe788de0c700c45b539b0c9f2b0cb8443bbe65b90bbdece483cb3b0b5cc2e6f4f5fbe95f210060795677864fd787db43cf37768926f9b01c1cbfd34e6d7e0f1153cbd2c2b500edf977be1bc353c079583fa873ada00f136bdf2d4b38d2d6bea0bb9631c80a009de84edb751b743d85fe7815b02acec5f33907bf46e601e907bf1e399bdb8000d396a7211f9e0a2d99941c24c21549721e3e1998c61c49050b622da43ecad200454514dba9524834228474c6b682a515943455682152eaa8e96a1041b2933a00422625408cc14a9c3686c62d05020173700b817e872ebd752d1fabc1e87e7400b13daa69b915db6dc9cb7fea49cedf603d86973c72e6472cf4d487b073d220002483f3a0f3a52bb1e77a8a53cf13bd73abdf835f4b9cdbed95cecee4e62faf00d74c98eb99193c3736e9b72daa3737bd6f5dabdf10e752ef9dfcb3e06f6e3900c493660486773bd9bdfc723a0626f7ce3c279d852dcf7b0171bf5a0b72e58300b707bf1f30c4366d6e1ce201e6d7661c05c805fea493e2fc827a826e2b73720077229d2d7f3b9c1f8721af0cb98f4e99447306fc72b001bea3e6d1052456d600a5cd77ef615a0b1f21537c1ee7d73cfc0eafeb689b71e366cbccb124378b5e00d7048b6e2f6af5e74e40da82a7d2c0e0fa3e7ea58f10e753f2660c7f1f1cc6008e466dd397213e1e95dc827cabe76e44732296c4bbbbf86b7b71e01d9f2eb000770c4f3d7336d757bf017cf288a5390a0dcd6bb1a906c2a6db52dcf9521dae004f1bd9df4e976bf585b89cedc9af93e57b6b997d0cf84d39de951b72f2ee4d00771dc8c1cbbf37f1f7c21bd7f1b665871b9f439f28d9abf66426d2887e20b8009690bca6bf7e4c747b2dcd65a1411ef8cae4d9d21e12745a24fbc0da62e792003f7c9455254592ba78514f29fe2ba4ce56cdecb54241fcbcac6eaa4cd3fcbd00f4fa052a46f68e5122a18b3b6f7126341b40099121407c227281ea50775fc90041f563abbeeb32429f877523fd41e255b6c50809ef7a2bb58f7c78a294fc0a001a85bf981f631aac388dc58d77cfaa52df231ee71951b28610861086108610008610861086108610861086108610861086108610861086108610861086108600108610861086108f41388c494fc2366a7c414f11b0a5d28ee6b452ba500dea00061d4cc0477692e5c6f372c93d5d8f846a2b6702f2937254ea3e2e13d722780065c63e61ded11d538cd6ae3938a8d438c8a878c6a63ad19d6472689842150c00e656c9134772364f5b6b4a94973ff9ad96e4e1c7927c0f3be37923c2b213f50033b34c21181767fb2186212b41958150544f42dc293575f2457d6822cdff00000baa9ec9374a592728e5f452fbaa4a69601004a4137b952d214b1a5c151195009d8f3b32a1a5aa69ebdb9924731415069b014c73905c1bf3d6ecfa0cdf3075006d5e32c10e5ecfa83c1b4beb91cee6e4de27c3da94b52dbd29426dce943d4900b11727d4e9c5f8eaef6f2f3ce9278bfcb5371d0bf1d72d20269435df71bedb008d8f4a914ad453a9c1dac3476e4fc4716f1be76107cb95870ea1f23ccfa30800929b56849b56e6b5163d6a0fdd45b076f7c6d6e199ea62a0407bd83b78db88002ff7d2e638d286f5ad294037ebd8d050fcb9df07b37efe17b33fccf120c58100b366c09d32bf17f4cf3197329f3ea79f4aee2e6a2bcff0183b1f6fe86d6b6700941fd3af136777663f21ce23c34adcf4245bd2fca80d6f6b545060fd38b35a00e5fe8dd2cf68383a78124be5abe7e17e65a229d80e77f216b91ccec6d5df6b009c8d74d391e5e6e1f3e7076b5ce42c48c8db8bf0195af99b0a7feb0a1df7eb007e4390bf2af4c4ef33eaf9b9f06f53af0c99a0fc6eedaf86afcf3e2086880200bd0d36a56be55d81a1dcd6f4a5c5a1ddf26e4c1ce4ede1a0f273125ae2f9b10076e3739b93607abe42d1f9e363189641c54c629496e165f0afc6c438ab250c00c2b6b7dd5a89d825b6d44d6c00e56231310a94d1d056d5ad4132e968ea6a1600a240094c890b98a51b860024972c337d620a804a8dd8051cf2b3f1bb5dcf07002c63abe9bc5a63f4ef20c7252a6d11b92f2ac62507fd494c4c8a01e4a55424005521c4824137046d5c71ed8aa9155b1bb2952976a8d9bc0e6b1fe53330ca5500904e5bc924a5859d2fa5ed4b732e59bde5a0f8103ea7cf9c775de86ff7d41a007e74e5d71c99c8e0c3477d74e0da3dac0dd845711cea7f4fba501a9b505401004ae054e08e3cf2000b5c5defe3c5eef7eff6f189a50d7efe57d8d80daf51bd00037b30ff00517cf4d7868e7500421b7a9fcb9fcbb74c4051e37e77cb4e596600332ce433c4dfd75e3ef3f588a814b11b816f5fb1b9a6c712547883e16cae3900bebe8439111eb12457d7e9b0adf6229e639621f836438bd9b9f2d34e9696d30037e17f7edee214e74e84de87a7ad3a79f4c4ef9b3def7b0cb973d7ddd7f4d500b9e4ff004d6076e7d7b9ea39de9d29e7be277f871bb66ce496b364d73fd221004df9795adbfa73db9dc5ce20ab23a8f007eb7cf4032630fa4398dec3adbd7a009e95deb6a9c378e7c2e747c873b3e7902c322611779c09f1573be0bf8a3d2f00d7f9542c44d65796268fcb33b65e8779d69599320e6285764f9b254da11150008cbf1edcb629536902635d300c66695c963631a75a842d9e17da0ec8c8dbad0092c5b6727cc4c99b572533682a5484abf2b88d2ac4ea39c494ad499666a04a00a8284f7aaa59d3d082952c2a31eae9c5553cd9059d6014a99f756920a159120003d94d729240b911f4add22d59c8bab9913296ab698e6597671d3fcf72583900ee5e9fca5e0ec2c7cba2d3501493e17a0e6302fa5d8299cb235b62612a994300464ae650d0b1d0d10c35f2fb12c3711d9ec56b709c56926d1d7d04f5d355d200ce4eead13107349ba56858699266a0aa54e94a4cc96b54b5a56784a4cca39e00a44c494a927766235b6441c8f1491620d8b178adadb887901c6d414856ca0600a0fe846c41a10410704a8280524b83efce3752e62662428105f2235fdf88e5001cf1545c861086108610861086108610861086108610861086108610861086001086108610861086108610861086108f553298261d0a65a502fac11507fe280011fea34d977fe51b83fcc4529e2c79f382014a4fc66d63fa799e6d96a338c000aaab12c144b20ac86247f273e45b2d756667c44fb5938facbfc0f70d9989f90034ea095af5a9d2d98e54d1fcbc88a499a41474c195c1cd350e261db59888790046498479d98c345bad9868ecca24b2652bc31b10e31d99d8ef67753b7db53400c2a244cfecf6133a556e3752a49eea6225a84c9586a5646eaa7d7ad225ad09003bf2e97bf9ece848558c3289559500a81ee6510b9aae2c5c21cd9d66c7321200e5a3e768b5add5adc756a71c716a71c71c515adc7164a96b5ad47c4a5a964a0094b554a944a8d49ae3e9702c9dd0c90000909b01ba00000166b580602e5b2800e6defc07d8470a0f5de87f1a6dcc1b0a7fbdb5f125577e0ed9ea38d8f1d07000c99a7d35f77fb9f0bc2df3aed5fa91d36df95b6c0a8b9bb0393862c7874e5d005b38881ee2b436a0afe3dfa6d6adaf86f12ccff66f37b664bbe6c2272cb5e700f407ae7a7510fbdbaf3faf2ea6bb1a1ce60f32ee1db8b598f0b70e04c78429007aefcb7b0f4ebbdfc86f88de3d3d79e45b5d4b9e70853ec5bf0c4956799701009fd5c65ae9c06778919f86a075d5edcedc620815bd7f2e43d2bca97dee307000756d4b783836e1c98eb939713c2fea34cb58934e479ed6ea2bbdb7f507cef300bfc7ebcf3ea2ee0786a17f31e9719f4d074ced0bef4ebce9cb9fe1cc73e56800dee19f1b73e0dc49cb3d3326202df86dc87d4f6f3f5c46f1e3d73074e0403c00afa69944dcfcfce3a5ea44526034ef3ec7ad2a7110592f3545a9093fccb4430048e39e5a478881e221b2002a02bd3971adb4aafcaec76d654aae29f66b1c9a00458b9461954400e40751dd480e0127abd134912a61cbe051d3449c9ecfea49006d629ef0cb35889be87641888a7d710f43404c2561c71212530f279d4ca570002c0f0a520a21a06121a19b552aa4340a94a57894787762b5cbadeccb661736006998b9322ba8dd4dbc25d16275b4f225dbf96553ca932d0e3f4a0664b9a6900083225ef5ec43b5c3294d9170c0365701dcde2bbd2bf67bdbd7973b6e0571da005bc388f1d6e45bcbe59e517ec5defccea7c08b162c03b71cc429df7fe9cf97003efced6c4ef0eb673c873fb67ca2a6075b676c99981b8f872cae7481161fd000ec47cbb77be0fed8fc9b98f5e11045b4b802e0bf4d58b330b9cefac452d53c00ee3954d4537e76a72bf7c1f86b6b74fb5fa783881c3366e17bb69a5ac46aec005a276b75bd6a7e5bfad077af4c01072bfefd7d3ce258306be4df50013d4ddf0057160edbd76fbf4ef7af2da378313c34d7edd2ed95dcb452c9ccdc97f3677d00350458b13936900deb7e96b8f515237b127a62a8aaf986616199762f617cc800624f07e11343cbccf6007df4f9e20a80cfefc9fcaff2b883371e27907e20d800103af32cd11d0f4fd3b56a797af961bc2fe7cdba69e36662fc21811eadfb06003cb8310778b089fcf6f4fbdf99e75c1c7b7ebf2bb682e62a200bb0166cb91e0040e59df88d21f2e5f7faf9e0e3df8db8bdbdde2181761c6c001c9d89d082cf007bf58cb57b32fdabdaa7c00e6439566f0d1fa93c39e63982a2b34e9aae2d28009965c8f89280fe6dd3a8d8a588795cee884aa65258a5a24399190b6a304be600860e7d2fe9ced53b21c23b46a51572152f0cda6a59611498a041eeaa65a02800a68f124246f4e90e4897390f514aa628ef250994f3357886192eb920a5a5cf004864cc6b2983eecc6177c9c17473168dec7862e2d74378aec8109a97a03a850027ceb217432dce25ad3821b31657993882b549b37e5a892dcdb2fcd5b2873d00da2321db66399408e954547cb5e6231ef026d36ca6d1ec4e26bc331fc3e75000cf054652d43bca3ad9692ddf51d4a1e4d4ca2e1d52d7bd2d44cb9a997312a4000e25325d5504d28989282e6c6f2e6016749059438949706c58da2ea61a6b0e00fd12b3ee1c3b85ff00a09ffa2e586fff003fc2790adb1a645421763f0ab9e4007a1fbb466c9ae42ecbf84daca363d14dff0069b48f66082010410454106a0800eb516a1dc5f19119a149391f7f5f089c22a861086108610861086108610861000861086108610861086108610861086108610861105406663c2f44310e9f1300ce25039026aa3ff5522aa57a03d4db14a9694075103e67a0ccf8459993d12c003a884f5ccf448b9f5e61a3d0c54e16b0510c0b69d8baaa7bc23aa46c8aef53005574f09c61cca925c2030ff31cfc387ac6b6756a96e25b8196f1fd5ff440b2007e7d23101ed0ef6b970fbc0bca669956163e1355f88688837449b4a72ecc19007dacbd19110efaa0a6ba9f3987716d6569536ea1a75c93254fe6e9a35110ab008194332d89727705dafd9b7637b47b7f3e5564d42f07d9b13019f8bd54b5250075494ad2264ac2a4ac3d5ce20a877e40a39252bef272a624489976870c9f5a00a0b53ca92eea9ab70557b840375127351f845dcbd8e889c4a712dabfc59ead00661d67d6cccef664cdf3e5a1961a6d2a8591e5a92432dc32ccb195a521c7190093e5f9521d5a61a0da52de8888762a6733898f9bc7cc23e2be82ecbecbe09b001d83d36058152a6968a9815124efd4554f50489b57573982a7d4ce501beb20000002654a44b932e5ca4732914d2a9a4893253ba94ddafbca36752ffcca275200e198064800505f3f4dfd36a8daf7fa134c7210416e61fe9178016b66e5989200dd1b8f1719100650e7f4b123eec2e4f952f4c1ecfc9c7bb7a911278b67a86c00b8dc1d03172cdc1c80a5c8efe9e7f3e9e7cf07019ecff4cefecf27b452c03f0042185f267b971a139b8b6b6876fcff00aff6ed83fbd736f5e3d225b237c9b3000e2ed67d2fa870407689fa7e553f3e97e87737c1febe87d4f2196b06bdc378003d81d2cf7d4f3be6008fbfa7e7bf3dfe4de0e038be57f7cdb8b671240c81e900d1b56e6497b8371a9872f2ebcfcb9f3fcf076fa7bfa794411663d491726ec30036625f3ccb1ce1f7f7fd397ae1bc1db90e8c757cbc7c070830f912320465c5008e9aea6e4d8473f5b6dd3e9f89f2ae27dfbf6dce01c97637f116b666d70ecf00ab5d8989a72b7af9f2e56e44dad7af38de1e7d7debe2f67789616c8bf2e8f7000c323671990466d0a7e5f43bfd7f0c1c73d34cdf87df2e710c0e8726b8b17300a37019176660e3334238999ac4c9f43b3f4442beb877a26025f2a2b42428aa001a7339974ae39821495242226022e26196aa0294bc4a149584a8756f6d55b30028bb32da899266194b9d228a8f7800ea975b89d1d2d44b620da6d3cc9d2d560070952882080463d55a9e61762c079ac0019b221c39bf38a53c114f1c8ed34900fc95f7d6f2a459b22150adadc4a842cbe6b2f81896d869bff5b6d2e62ccd22007c47f956f443de1248584f01fc35e24aa8d92c630d5cd2b561d8e2e6cb429600e24d357d1d3290808174cb554d3d64c1a2a64c9845c2a2c502bfba524e617600726c08496238120f893179dcb6fe9f7debdb1e8a7cef9ff5d7a5f52da98cd70039faea0dc8172e41619bf2b888dfd07cfeff0001802c431f3d2df472d12e4600ad66bfbd1dc369123d3efe7f76a8be0fcce4de8cda5b2fdf53f858e57d1b9d008903ddc8fe9f874fcfd79e0fefedc34ca21db81e96bf10c031f5f02220fcad004fd797a751c8db12fcdcf3e77279dc6b6d58bda5ec38b58f8393937273910e00f9913f96fdee76fa7dd71009f2cb4f571980de8200e400d35cddb4ccdc365900e8d114efd87d2f7e5e7f960f6c9cea4fb7f17d7903104820d9cfafcc93aeb600d6c043efefd2b437a1c1c7df406e7c48cb3bfa432360e351a1b916e39d9dcb00f487afa74c016f79f5e59e57f4225db5ea0f1e4d6001c998fcc4edd363d79f002f4f972b8b624976e0cda699736637b5cbb7238c9f46e3766038b07cd9f30300808fbfcb10f667b6796bf33104d80d2c72b3e5d4f3e7668604bfdcbf13e7c500d9e2779ddef9dcf3f0b819e42e070022ac68d6b9eaff000f39de5fa8da27a80099a34df394b56d96a7196666ec198c61a790f9974e204fbc96cfe4cfb8da0c005c9677071f298d40f771706fa3f94ea31bc0706da4a19986e3b86d2629453000106455ca4ccdc5105226499969b4f392144227c85cb9d2f342d26f16a6ca95003d1ddcd426625b25007c41cc1b9629650b8caf1b39f08bfb49496d893e51e3003f4c1e79e426025eeeb0690c333e27a81985766d9b74ea651acb687090b99400de3f274dd2824bccc97242006210f95f6cbf0c414a9d59b118aa520f79306000d8cad4c92ea5a64d26252a5a89194a932eb6496f8553eb8fc4b8e3f538082e00aa498c6eaeea6e5a9dd42c0e19058eab8d91f87ce317870e26a4ec4eb4075b00b23ea1b6eb0e443d24954e5b86cd72d69a59438a9de469c2603364928aba55003691c18750a4bcc29c6568715e66c7f6436b36467aa463d82e218610a0913a006c93328a695071dc56caef68a796ff009a9cb20ba4b1040d2ae556d1965a2600cbd03a77a597bfc258a09e61cc5d1b33b58a07994a80ff0079a2507cca5454000d7cc0e6072c685354a1fa920f3163d58b8f94568af586df483c4a4b1b722e000f981c23d8353683700aad4d28da8e248f5f1202900772477a62f26a259cc9004f220fcc38f7a46522ba5299c949ff00524fcd2e3dde3f7a1e69cff8b71b5f00fd45a55f81fba62e8524e4a49e841f94652672159107fdaa0af918f257ee870015457be9e3e87ed0a8eb844b8e23ce1844c30843084308430843084308430800871c442bcff0bfe184415246a3e7f288240152401d49a0f5ae04817258713100066245fd721e24c7e5723a11aff5bedf9215ef15ff00e140511f2ef8b6a9b200d39ac7405cfa3b78c585d5ca4e6b474077cf926e3c63f03b3a6124869b71d200362a21b49f2ff52a83ba41df95f16555491fa5255ccd87d4fa08c55d7a6e120014aeac949f99f40fe463d5c4ce625485a8adb8669095296a4d13e14004a94b007564f8424024a814002a49b57164cf9ab2026da320392f6e67a3379c62aeae0072ec92100d9922e5f9972fd1a3187c537b5bf81de15216650f9b757e59a87900f2121dc718d35d227a0f3fe6b898b6e2130ca809846cbe3519532b45b4b2a7009e633766491c508469c761a1a29d30ec3fd95b29d8eedf6d7ae52e97079d8700504c500ac531a1330fa44a0a4ac4c9689a835956822c9551d2cf46fa805290009de526fd3e195b544112d4849ce64e7486e2c415a8734a48e79c6aff00c68700b7ef89fe216166f923426093c3469ac6ae2a15c9865d9a3934d5b9f4b1d68b001eea619dc3308c65743e3fe15ee325cbe593681716a83566999c3a14b7fd5700b0ff00878d94d9b5c9afc7d676a31497b8b12ea64a6560f4f341de79742553000d594bee6f574c9b2660017f9494b2c9e4349835348dd5ce3dfcc0c7e2004b00497d10e5faadc581dc72230351b1b19328c8a984c62e263e3e3a25e8c8e8e800d7dd8a8c8c8b89754f44c54544beb5bd111310f2d6f3cfbcb5baebab538e2d004b5127d0484a252132e52532e5a1025a25a121289684801284200dd4a129f8005294b0480c1846e136b0019ac960c006b37017dd00e6dc63f362a24f1e1f2f00a59f98112fcdac081e0edc386772c350044d7d3e5ebf3a6ddc81be0f91cf97008307fa8e1d4c1fa3f0033d007e6e6c0e56b3b08e9e66ff007cbd09f3c4ef58005d88f9f1362ef91bdc9c98393d85c0373cc96b12de57cdee2d79e5f3e9dbd600837f4b0a8c4126ce4db89d7970d221cdbc4e97bfa6590d4060f788fbf2bf9500ff0043bda98390cda5fc7ddb87d40e433e0c35d09b5f2bdb2f181bf5b773f700f7df07f5be40deff0073d39b4492f7391b3bf0d406ea1c0b3e44bbbefcf6b500afcade7f23f5e77ebf319c1f52789b837367c8330f3377ce24f9d796ff002f0041f7cb07cdadf6d6fefe6e3626c346e84686c48b0d393dcbc7f4f98fbad7ae000ff6f9fdfd88873c321c18821f9bf13d464cf0fbfbda9f8fe383fb73cdb5d100fddde41e1a3e4e6dc7cc96d720487261f4fbd86fdfd3b8c4b9d4f2bdf30c4800e3ab5f5ea619f137bdc9d34e976bbb1b17b85ad6079fdff4eb88724e77c9fc005eedf4e510ee41246432278ebd3806e568b33e37276ec0e99c864cc3eb68cf007364318a6d0b481152f95cba3e256c3ad9fe75b6998392c89f122c87619af10091e340579d7f127892a9f64708c35130a1589638899310143fbda6a1a3a85a00d0a05c9426a67d24d2dfa568439bb1c2af57f76816054b7607400bdb4b907300cf4772688f03798441678cdd965c7db6913fcb90f3165a714ca0c546e5f8e000869a60ad41e71f4414e66311ee190a0a876621e70010e950eb5fc3662c9a5d00a8c6b085cd084e2b8422a25a14523bea9c32a53b92d00b2953134d5b593425003ff172e62d56408c7a1534c5a5db792e39949c878127a03193ca5bb580b54d00f6269b57e7caf8f66ef1be77e7ccf26c8e4d9df946cfdfbf7a408a52b6defb00ed5e9e637bfa62778972e0b3123c79ea180e5a392f0f7efdfec036b6fb0e7b005cdf7bd0d2bd6d4be1bc6f7e1a7a5896b1cee6dcae89f0ec2943707cee41df009f2e5b9a530de2e4bbeac3fa700fd3504c222847ce96b9b6ff002e5b1389de0037e0d70e35eb93647304d99cc4bebec7edcb2bc29636b8df7daf7bd3fa8e5600ae2378bd8e6ec0335db3b9e66faf8c47bf7efa4083df903523737e7b5fd6970036386f1d186649bb0fdb83f40030897cf2f7efed0a5796fb6c397af51de97300bd44ef1be7d5f891a80dc5ad6cb4688b7879fda24a48d813dfe7b8dfa7d9b4006f9f62df536cf239e5689777fdfdf9c7120d45b7bd29fa53974dbb6c2778b100cf8706b64e6ef9def95807107e37d33d224835dbf336ef6ec2ddb72311bc6d007e2e6cd7e43506ff00d5a220474bf2f3a0a93d282bf2f9e2428f1eaf71e00500f2bd890e6e0692fef8b71800798e9e7d00f2eb4a9d853a37b987be4436998200daddf21cef07f93787bbf5bde14de87e55f502bbf30056a7a52f86f9d7d91e00777e2c0359cda0ff007f1b39f16e9ca3d9c9e7138cbb33829de5f9b4ce45390096c437152e9bc9e3e2a5734818a68f89a88828f827588a84886d54536eb2ea001d411e24a8114c5a9f2a4d5495c8a8932aa244d4944d933e5a26c99892ce9500cb981495a4870a49043162f105940820105dc10082f98208620f0368ca9e8000fb6c7da15a06994cb53abe357b2acabc4819635b254d678f8b655b34fe700e00cb351cfba00fc327f8cbdd3144a3dd2da1ee8f52ed0f61dd9ced0f7d34e0a30007ab9c4135581cd340506ec5347bb370dbff003351052ae497f886ba7615430039c995dda8ff0034a2517d1937475f863307a33fb4d996621a6a0f884e1a2700b2c884253efb3068e667809d43c42cabf9ca3296747244ec0a129354839ce6004b511e12057c43a631bfc2dd482a5ece6d44898924eed36354b324a921890f0059422a04cb8bff00c065800f9eae6e007391500ffa66a5bfeba1deff00e81100945d32f6dffb36f52912b697aeebd3c9b4ccb69fdcfa999333765854bdd59a007bb996616a5132c950a11bae27f8a170891fcc62280d3aa715ec23b4dc2ccd0050c013894994e7bec2eba8eabbd48d65532a74aae57fb7f2a17fe98d7ccc2200ba5b91284c03596b4a9fa2490bff00ab190fd3ee23b4335496d37a5bae9a5500a86eb884b8dc3e46d49ca59a9f5215fe9261a49398e7473fe55b60820822a000d3aef10d9eda4c1c138a6098d6180382aaec3ab6913cfe29f25093c73e7a3c0062a915727f5227cb6ff325691d2e1bc22b426691c367eb4b5d0d9ffe0afe7800d48a89a3f99fa81f6881553c7f3be974a7edf38fd099cc5277430aff00d450003ffe5581d7973c562aa67041f03f4317056cd19a507c08f929bd3ed1e413b700b9b2d1f252d3f99c4fe695fe44f998a8572c7f225f9122397efc5f3874ff0000ed543ff87f3c4fe6cff907fef7ed157f105ff93feb9fb472fdf87ffe187fed008fff00f3c3f35ffe19ff00e21ffe989fe207fe6cff00f10fff0044419e28ff0000fb30ff00db2bf240c3f37c25f9ac9ffbb0fe20ad259ffe213ff7447133b700393081e6e2cfce80570fcdab440f33fb4527105e881e2a27e823899dc472690091e6167ff8c623f34bff002a7d7ef149ae99a211e3bc7ea35f7ac7815378d300fe9536dffd46d3ff00c7e3eb8a0d4cd3a81d00fabc506b271c8a53d123fef300c7e28b9c3ac30f444647a6161986d4ebf10ebad42b2cb484f896e3cf12da1b006d29054a5ad494a5209240ae202e7cd50424ad6a51094a10095289b001290e0049e00127c62d99f3d76ef1649b326c4ffee80ff58b4cd4be3c3835d25868d8008d44e29344646ecbfc622a55fe2465b9ce634adb34534d65791cc26998e25f000411ee21a56f3d507f92c69cab0cd81db8c69484e1fb2d8f54a6636e4e561d005526998e44d5d4225532125eca5ce4a58bbb5e2ea692b6733489eb7c8942f7007ff794c91e2631cbab3fb41fecf8d3d6529c9739d4dd6d9839e34a61f20e4000984920985a455263665a98f645096566def25d0b3471373ee48dfb2707fc3a00768b88abfe1d270bc0e586255886212e7ad40e6112f0c4d7fc4384d54a1fea008cd978256aff005f77247fad6147a012f7c799039c62a75abf698758e74b98004068070fd90f2240b8d3b0f053ed4a9dcdf3ecf91e3aa5b983528911c9f2580008b6c10b44245bf98a0db700f7ca8a6c941edac0ff000bf8248eea66d0ed160021882c14a974f8648938753963796674f15b3e620e456814cb21f7770b11b1009580494b19d3a62cea1004b4f473bea234fe53d34c2e7103ed15e35789f43b0007ac5c42e7b9d481e69d61cca1218c87c8d92de61d5125a8dca79261a4123900b1457dda2267105308a0d8f0189502a07bc3677b37d87d95217826ce61f22a0012a0b15b508557d7029003a2b2bd5513e4be6532572d054c771ef1b591454b004ffe1494023f988df5f8296ea1e044594d3a54d45ebf52686fb5452b5ef43800e6fbc580f5b73e56cc0f0cc3bc657bf9c453e75a52dce9717a9af2b1143be20077fc2da644f37e56b6675c9a5f97bf5f4689a1171f9588bedca9b5edd69c9b00c4bddb965d483e659c78e51111424edd86f434b79d3af4e830deb38cdcbf0b00fa73039127525efdfbeb12534a77f3a54d7981f75f5c378866c80163addad600cf3cb367d1a25efec5bf78148eb7a7983bf3f4da9b903be24289e1a3e7965f0057b1197488852e6d6ad0d29bed6da82fd3a0ee2378b6af7673a1d79e473d4d008680fefdfca24a4da97f4ebea7e761f5c02cebe3e82da0e278c4bfbe1d2208003b77e5b73faf4adef4f36f6be8e78f8661b2716723847afbf3852b502a2dbd00ea4dafeb6dec05e830de22e5880788e6d93b6bf27312e7d5fc62286a01b6df005bf4a9e9b1bdb0de39b8d5afebe5600e79b1311121269cfbdfbf314aed7a5e00bbf622a3a1e8f767f3195b9390d99869efdfdbc4c294ad472a0f33b53aff00007e9892a7d48bbe5a67c0f4ccf1c8d9efdfbf9c0249a5b96f5d8548f9deb4af002ef4c41517e199eae2da5f2b123ef08786c3b9ed41d6a4136e7b56dcb0df3e0017b666fcfde791160f7ef38c6271c998046e78ca3969b886de6e419722262e00b6d965661a373047a90eb2f2907df21e5c1c9a5f11ee5e0909877e1de6814c004151f18fe24b16155b4f82e1089a26270bc257533109293dcd4e295077d0b600254998aa5a1a39a50a6025cc94a48f8cc6b2b94eb425df752e79151cbc923c0019a2deb427348c9dabb90e76b4256c09eb12b8cf12d484b7053f43b228b89a00a50e29460d898b91886c27fce5b0968a9095950ea9ecdf1bfecf6dcecd62640024ca4e252a92a0ac94a514b892558754cd24025e4c8aa5ce48c94a9694920100262c485ee4d42b4de63d15627c017cc65c233883953bd6fd282c0de80f96dc00ed5fa4048e41bdf160f98737bd8346ea1cba52a3b5b98b916b6fb50ed882a000e3df20dc79f5045a11006fd8d81a814def5173726f5bed4b6277806f20dabe0062dedac2112052bf7ebe66f536db6c415001ff0077e2cc74d4e5d61106dd2c0045bd7aef5dcf913635ae242af6e0e38b7420063967f56408a820f6a5ea7d7700ef717237b8c46f7935c8caccfd478663c912453e95bd76a752056837a7a8c0002ae1b83df9bdb87239f06cd9100f6adceca1e9cc579f7a82772713bd9f26cc00101fc45b31e06113da9b9a1d8f43537e6074a8fc4ff27636f3cfefd611005000d7b6d424d3977ad46e7e42988de1a5eec2e19d81fafbb4227d36209ed5b93e0062b5edbf204cbf8f4e9f7702e6f67ce10e5b7e35b50f9549eff335186f3b5f00a73cf8b656e274601a1114e553bd8ec7ad2be8935a577ef4150eb67f0e361e00f520e689dc1b1dc1a5af71f97e95ad6871e0cefefd38b1e1088eb51cb6b127006dedcac413d6f6b623787bf1fb10d9bda113435df9d473a6fdf9f7040d803400b37c72c8e4e350393db3d48bb5e10f2f3a56953735dc546e05afcec2a25fdf0093bd9983dcbc223b6d7a6d5daf5db7bdc9a9206f6ae2378e8c5c696cb97360000677cf9a250a521495b6a5256950525695292a4a81aa560f2554541170763e00202b248b82031b5f5191041d079317ca115c72af139c49e4465986c8fc426b007e4d86864a530cc655d57cf99798874241094b2d4a73041a1a4a450252da500012294db1a1abd99d98c4095576cee035cb55d46af08c3ea54a27fcca9d4eb2006fa9d4df38b4aa790b2eb932964e6552d0a3ea93174b92bdad9ed1ec82c37000d23e2d753e60d363c15ceab906a43c4529fcd19a8523ccf18b229feb54478c001bf88926bc52bbb21ecd3112a5546c7e152892e7f222a30d03363b986cfa54000cf20966e918ebc3686612554d2c3ff90197ff00cb296f0cf58abf2ff6e9fb004ea05685af884974c12920a9a98691e8db8858047892b543e43867403420a9000e215452a8a49a14e9a6760dd964c047f67664b26c0cbc631a0752087c414200e086045db23168e11879ff00886cf29937ff00afd32e5154e4dfb42ded12950096fe3e71a3b98820afc5fbdf4c21a1cbde2ff485fee09bc9000ddbc1ee836400ff00be57cf513ff0e9d9bce732a46354c0e92b155ab772cbf312679be7f112002f988b4704a139266a7a4c3f5063bac27ed1f71e90e55eff0027f0e31a15600022721e74404db74fc1ea5c2a89373fce542db52d8c299f86aecf881bb57b48008c8fc388519241399dfc35400f01d620e0745c678fff00713f5418fc913fb4006bc7d3c1cf7597b87a832ba847c3e9fe687033514051f15a8111520dc7bd2e000ad010ad8d69fc367678967a8da25b1b856234a09d6fbb87a7a1609bb97005009fc0e8bffc6ffe20ff00e88a6f3bf6ff00fb492689526035034eb2e129480a0092e93e507d4921654569198a1a7c9f1293fc8a0a4a93e1ba1295d578d953fe001ebb329441998762354c6fdf62f5a9196bf97553b806e199bf989040358c160080672d6aff0074d5ff00dd298a711fedc2f69e46a549ff006945420582098100d29d17875804107c0b4e9e15214370a04104d52410063692fb0becb25904ec00b8510729b8b636a06e343888717e1c8da2e0c270f1ff00ddc1eb326fff005800fdf578b78cefed28e3ef505f75ecc7c5eebdb61f512e42e59d449f64596aea00285265391e2b2ecb0b641b3420c360d15e10a16e4743d99f67b8725a9b6376007cee80caaac369ebe68606fded7a2a2682daefb9f9de450d1a3f4d349eaa9600959f35851f58b61ce3aadaa5a88a0ad40d49cfd9e969515a579c738e61ccaa000b06be3499d4c634a555a10b4ff35686d418e554585613868230ec370ea00c00cd43474d4ae1b22244b43e46d1909972d1fa10847fb5294fc808e835574e7700a9a8e5d2a7e800e60ef8d86f0167bfb39e5eb15c40036bf6d89ad88dba13ce00a9d8d6f73819fbf97b059da113cc501e95351cafcbcab5b134a7507e9fbbf800585fc8e4d7447406d7b126a6dcc57e5eb6ad7070c4f0ce11cafe7d4fcec2f600dec6be7b0c46f8e59f93ea72b656d1f898471bdc9371bd294a026d5b50dfad0086f4389ded742dd6f9300e4ebe5e3089bf7daa6a2bd29b52e3b74a9a1c37c00071637e5616bb9fe8e585c3c220569ce95bee0edcb6a508b800dac09a60e38800e5c395efa7cc5838108e57f3b9df7a6d6b0deffad0d9bc35238e8da1b0d45e00d68441039da953d7d6e39741b5bb600bfcfcfe5e39e62d080b6d4d80afd0540057ad4723ca96ae1bcd9dbd4f316c88b139db56784396f515dea36039db6ad800fd4e20aaeda81af32edeb9f93d84220d4d79037adbd09a8b5280ef5e9b5a7700837a6b9dadcf930e3089a5c13b529b8373e62a79f326fd2b83db98079659de00e33d5cfa42205bb9a93bfcb9ec6b5a1b5ef7dc156bf2cb9bfcae08d48c9d8400226f4e9b9e47f2e7cac4f337b60fcb47be9e6cedab1b5bc103d40b9241ad2e002f6bf5dcd3cef7c1c7a3bb1d387f57108806961534ea0017e86d720837dfb100383fbc99b5e96cfeef089bf21cfb0aefd8d396f43cbcc540679685f4b78f9300c23077aed9a4671d5dcf93b425298733d7e5707e05a9c4bb052043722848900056842926321e5cdc62db293ee5710a6829610167e6ff006918dff6836e76970013013dd2b129b494e524a92ba5c3529c3a9a682402f3a452a27293925531490004800c6967af7e74c3a6f103a26c0eb9b3e7676168a4b8e1116633b7a4f9bd0019f74e32766a0eade889a492144c9c524215fbe209265f3a4848091e14cd610063036b4a12971bf0b884a52b007d26d86c7c6d2ec8ecfe33be664daac3a4a200aca83135f4af495ee2d635922714b00148dc50480531bd94aef25217c407e40043853eb9837e1ced150f958569ca9b73163d3a6fb6d8e58e490e5833679b5b00d5cdcf3cda2e35db3f9e4e6df767b3670e5d47735db63b1ad7e96a0c1efc0800e01baea19b2e7a9810ccfaf5fb7cbc5a27715a7723fbd36b7ca988d59f887f00e8f63003cef66e9f3f772220df9d3e97f2ed5141b1069d312fe59358db317200e3f7049b9306f7f56cdb2cf37b4003516ec7615aef4ec4904edb73c09e7ab80072490065d0e6dd5cb58c19fa5afd7de7cba449bde876b0bede47d4006bb7ca001f216f4e3c73f17106d465fd439d065fd6208b8dcfc8817b549bd456bcf98b000269215c380f4176c80c9acc599af06f1b3e5f3fd9c44d36a721e5e56e9bd600dbd310e6f7bff4d7c037a41bc32cdf525b4e01f5eaf6890926f43cb9034a7900569f3adf142965258310c73736366cc5adc0447d61e03d15f5fbfbec294f7a00ae09f2f63ddb5743c06b5a1af97ea3f0a61dea99ac4677079f3bdef78428470023eb5fcf6f4c4778ae03cbf784453b9da9fd7cfbff004a4f7aae03376bb74c00f27bb7eee853b9fb35f3bf3bdf13deab8275d0e46cd9e434f0e108529616fb00fbfef88ef55cbd7e87cb48429e7f74fd3ea6b8778ab585b2b1e7a3b6bc341000853d7efe5c86066a8f0d38e81b8f330878474fbe9e5dbe7877aae5ebcaf73900bddf99e508506f7afe3e7d71266a8e89f236cac2f6166f378400a733b5295b0052dcb6e5f3f4c477aa3a25f8b5fcdfdb421416e54ad29df9fdf5c3bc55f2bb0039bbdbc7db4214ee7cf6af9d29e55df6e828ef55a003c0f176b936e5f72e85003eed6c3bd5701c1aecc7c7de79de113f76b570ef15cadc43fa13088201ea3f00b536da9f8e244d50d13e20f2be79da10a7f7e77a74f2fb188ef55c98642ff5003ce10a72dfcf0ef15c00cb27d3c610a773f76f4b74a1ef89ef55c13ae875cf005bf8b8e5085011f9dab7df952fced7c04d234d1b336e8ef9758429f852bf9f004af7a606692ee33cf2d3c210a5ebfa76dba6df53877a787a9e7f7f41081153005fbfad7e94dcf5c4f7a47f2e8d99f7fd070108014f33b9eb877bc881a31cbd00b9d610a773f8d7ceb5381980924837e5fbfbd610a5297341cbeefe95a7a60600683a71d06b9eb0853b9d88e5cfbd2bf77be1de8e06c41f2e4edcfc6d088f0800efce94b52bd29f7735df13de8e1c05c3bb5f53afd9a1134df7b904d3b72f2c00477a3572dc40d7c73f661114e5f33b1ea6b6e75e5d68001522b0a7015e42dd00059f881e4097b44b7be1d7e9c4e513d7ebdbad2943535af3c1fcecdf7e16cb00836906f77cb8f48817a50daa6dbf90f4e82d4db6ae249cc11c1ecc799c9c3f00dcb5ec6f7f3be5fd43448fbafdf604f2e95df10797d7df4d78b41babe81bdd00a208e479fadac2e4dea79539d37a624123e7a8e2598166d4db8e56837eda7a009e5f4e30a7524d0d7cfa74bd7d3b0b50e74e0471d2f6e7672da6a5dcd937cb005e038c2e2f51dea6c06d4ee4d6e4915c1dc375d3c78b06e56009f137ae5d210043b6d5bd390fa52dd013537b0ae2490dc4e4e49c9f2177bf12cc2ce4c1bd7a00f86977d19e29e6ace6f6f2169c671cd65d533112c92c5265ab4252b57ef98d00025f24052a0a05266b1507ef54a4ac36d78dc29525252788edd63e3667647100ec6428a26d2e1f39348a48048afaa6a4a1201b048ac9f24ad83265851215ba00c6d4e5f772d6b3980400e1f78d83f0625f896b460931f36a3470c211925e0600b3b98a9466bd3e8b88716f4ae25accd2669d79c74265f1deea066ccc336a050030d0f091e88189536da821d8a9c3eefbb4b8a79c77d65f872da3ef28f1bd97009f314a5d2cc4e3340952d4b6a79fddd3574b96936972e54f4d2cddd490954d00ab9b33752a2b52f6342b74ae59391de1d0b03ea079c5fdefbf7e9cbefcfd6d008f4e6f372f3c8b3bf9e41fe6d9f114def4a1fd2bd8ed4af7b545c8281b7dbc0039f80e4f784481fa927e55fede406277875601db23ef3b9b0e96408a54579d002dda9bd77db9f2b79b7b2cfc9f3f3233f323ac2237fcac7a7f7bdb7c37864f00c32cae72cf3fead0f7efca269f226bcb7d8fad479e20ac5aeed6d72eacdd2e00dcda111b72e5ebcbb126df5a627785af9e6f6c9c6ad707c6f08e543bf4ebd300ad0d88b7d69cf11bc38f339166be9d5add4bb423c8dec7cff218c79ca3bc18009fd235e67cbc6f08e78b4e789f330860e789f330860e789f330861bc789f38004313beae3e83ed0861beae3e83ed0861beae3e83ed088a0e83e430df571f4100f684283a0f90c37d5c7d07da10a0e83e430df571f41f684283a0f90c37d5c700d07da10a0e83e430df571f41f684283a0f90c37d5d7c3ecd0850741f2189df003c07afde10a0e83e430df3c07afde10f0a4f21f87e186f9e03d7ef088f027a007d4feb86f9e03d7ef087813d3ea7f5c37cf01ebf7843c09e9f53fae1be780f005fbc21e04f4fa9fd70df3c07afde10f027a7d4feb86f9e03d7ef087813d3ea007f5c4f79cbd610f027a7d4feb8779cbd7f6843c09e9f53fae1de72f5fda11100e04f7c3bce5ebfb421e01d4fd3f4c4f783507e7f6843c03a9fa7e986f8e07d003ef08780753f4fd30df1c0fa7de10f00ea7e9fa61be381f4fbc23c6a1451030095cf7b75fbdb17d0a0500f0e9c4f3fdf84214dcf9790076bd69befb7d0d2ad00f1e1ebf7f7a3877d2208ee6e2d4f5bed51b73f9601434fa1febf5bb3de111400fc6bf4a7e1890ab1376cae34fd5edbe4e61e9d3deb1343f9f90a7ebf8e2028001f7e5e7cbc5a0fefdfca013ca94f9814bfcbada9e741892b05dce4cf6bf0eb006d7ee610fbf3dc7caf86f8e3e2c74bd8f2e2210a77eddb9df975bede986f580016ccdb2f7a3371b6b08b03e3973bfc34a32a69f4244ba87a6712ee669c34d300ab6c2a5f03ef60652cc4212026221e2a3dc8e884b6b51437132865e536a71000c38df98bf11bb45ddd1e07b2f226a82eaa62f19af421652f4f20cca5a197300024b4c97367aaaa6eea894a66d1ca99bbbc9414e0572ec896f9fc4472164f86007e5ca31b78f26c6ba18422aa68ae7d569b6a5e57cd0b714897331c202789f1003810b91cd1260664b5a1b23df98365efde30ecaaa85464143288050143986c000ed22b6536b706c64a88a693522457a5d402b0fab069eaca929237cc99530d004ca417499f265122d17644ceee6a55a3b2bfda6c7cb31cc08ce636a6dd421c006d495b6e212e36e21416871b5a4292b42d24a54952540a54824281040bdfe800ba26226212b96b4ae5cc485a168505216950de4a92438292920820b10c4166008ddc79080682840adcf3e43caf6b826b7b62a73c4f9f03f4f430801524edd300c88a0dedcf6bf4006c60a86bd33e25efea6fccbdac8507226fb545b7e9b9a50069717ad7ae0fa3f26f5bf96bc39421e1f3237dafff0056d7e95b7cb07d43780036b7faf9728408b6c400072adaa2e69d3720dabc8ef838f3fa6708822e37a5000548bdf9f7a52e3953614c48530b1e4efcc5bcc78bb4226836e7b12413f2e500e46d40310ef91f23e2d08e49a52d6f3dfd7efe961626a8050ff682e3993c4f00ed08e58b7be381f4fbc2186f8e07d3ef0861be381f4fbc2186f8e07d3ef086001be381f4fbc2186f8e07d3ef0861be39fbf184313be9e3e87ed0861be9e3e8007ed0861be9e3e87ed0861be9e3e87ed0861be9e3e87ed0861be9e3e87ed086001be9e3e87ed0861be9e3e87ed08627792751f2f9c21838e23cc421838e23cc00421838e23cc421838e23cc421838e23cc421838e23cc421838e23cc421838e0023cc421898430843084308430847050dcd2bb52de5d8d6e36e95ea317907e1001c01721f9fa5a1000016aefcf7a5ae2c4f6a7cfb54e390cc7cf89f0e5d611c007c23a9ed5bed5e74a0a007fdea13bd36c1fefccf1e6798e7d6112126f51bef004e4297a7736b014dc73343e77b6b96972fd3edc0422280d2c01236a74df60200fd40a1bed502b2fefc5edc3faf1843c3b75bd452b4e62829402b6de9bf2ae100bd9b160fa1d785b5f53abc227c229e44dafb7e35e96dc6c7730fcf23ebf78400705a9b690b75d5250db692b5b8e2825084369aad4b52bf9528480a52c9344a004155922f0a9894214b5a928425254a52c84a52901d4a5151012000e5458017002d08c18eb4e7d56a56a5667cd2db8b54b9f8d301234294e94b7239624414b900486dda187318d3466310c04a5288c8d89342a5294af9d3b7db4aadacdacc63001a4a9469675477187a495b230fa448a7a4212bbcb33a5cb15336580009f3e700102e63493a6199314ad1d93fed161e799e64c52cc70e8b50c210c211989e13007523f8f34b60a591d12a7e7f9214d65e98974b3ef9e9721b2acbf1a52d00a200d2e5a812df7efa7e22262a5518f3ca75c5179cf72762db59fda2d909145513004ccc47678a30ca9ef0a4ae65204956193f750df07e593f94df58ef264da39c00b5a94a5152b6f4b33bc94013f123e13c5bf94f959f529262e7bf948dfb57bf002a13e9d6e3a8a63b7828ff005c9afa78e9e51930077fea3f1edd3cf9e049d0009f03627d3eba0166842df3bf424f5a75c4151fa7870b35b802ed971743d0d800d45f7dfafcafb72eb897e76b38b86660fd7570f965a4200d295e67cb7aefe70043d2fc8600ddeee471f0cf361c2f90b9d1014df73e95fa5ba034eddb0de23200b701760fae7e59eb0853f5db9dfeb5e788737b9bf87a74844e2d4c2490f7b0001ea610c5b8430843084308477dd2ac8ffe26ea869be9b7ef4fdc9fe2167ec900f91ff7d7c17ef2fdd1fc599865d21fde9fbbbe2e03e3fe03e3fe2fe0be3e0b00e2bdd7b8f8b86f79ef918589567f0fc3abebfbbefbf23455559dd6ff0077de00fe5a44c9dddf79babdcdfdcdddfdc5eebef6ea998c12c09e009f20f1971f6a000fb1e7ff0006e699e9b6a2ff00b44ff8cdfe2167a8bc95fb9ffc23ff000eff0000747c2c823679fbcff787f89d9ebf787bcf83f85f83f8182f0fbcf7ff001600af07b957597679da97f6f710afa1fe05fc2bf23468abef7f89fe7bbdde9e89003ddee7f0fa3dc6dededfdf5bb36e87718f22a7be514ee6eb25df7b7b501bf4008e31851c76d464c308430845fefb373819ff00c211c43c56827f8a3fe117c30069de65cfbfc57fc13fc7de3fe1d98e5f80fdd3fb8bf8bb25787e33f7efbdf800efdf0af87f85f77f06ff00bff1b3c2b6f76c3fb1181271afe1dfc4f7aba9e800bf2df9bfc9377e89ebef7befcad5fe8ee5b73baf8b79f7c331b53a6f728dfd00ddef880676cdeeec78708f4bed0fe0c7fd82b8959df0f1fe247f8adfb9f2b60053ccbfc5ff00c1ff00c0bf11fc512dfde1f05fc3ff00c539c7dcfc0ffc4fc400fefb77e27fe33dc43ffa317761b6b3fb69804ac73f21fc37bda9a9a7fcafe600bf39bbf975846ff7ff0096a57df77ddee46ee5bcace1266f7a8dfddddb90ce00f97361f28b1cc7308bb0c210c210c210c2119ece197d883fed19c048e37ffd00a77f83ab9175873aff00863fe0b7f10ffe29e6d9d257fbb3f8d3fc5991ff0000faff00f843dffc67f09fff00257ef1f75f0932f84f7913d31b41daf7f02db4003b21fd9efcd356e1749fc43f8b771ff9ca5524cef3f29fc3277f83f9adddcf00ccff0079ddbef4bde64e2aeab727775b8ff1246f6f37ea00bb6e9c9f8de3020078ee78ca8610861086108ce1e8afb33f843987039a29c68714bc67668e1f64009acb9af3864b964aa034666ba8502ce61cb59a73cc9e1601988cb5171d3651008f93e488e9bb9111929848361c2b83110b73dc7beea1c5fb40da897b618b6c009ece6c9d3e393b0aa6a5ab993178b4aa05991514f47354b526a12895f04dac0044a0944d52d4197ba06f6ee32a7ccef572a5ca0b290093be136201d6d996ce003d14db844f63bc2cae65132bf6a9e70994ce1e5f18fcba5cae1535361931f100ccc338e42412a21c9606d84c54425b60bcb210d070ad47c2938bb2b6a3b525004c96999d9bd2cb96a5a04c58da5c3945082a016b091349514a5cb00496610e00f2a7ff00571ffc54fde29b7b29bd9bb22f68fe7ad5ec993bd549b6967f86b9002e4b9a2063a579620f33fef6899c4e1f950838b662e6f28f84618f74978bcc00adf717e228f769a02761da46deced83a3c2eae4e1b2b11fcfd5cea65a2654200e9fba4ca9426efa54995377897218803578aaa27192124242b789172da3f030018dfd54d38ccba3da99a83a519ca14c166bd36ce79972366286295a5289c650069c464963d4cf8c02b8676220d6ec2bc2a87e19c69e6d4a6dc4a8f3cc36be900f15c3e8712a4505d357d253d6485382f2aa65266a1db2504ac050cc281040200088bc921490a1928023a10e22adf077c33e69e307894d27e1db294526591da008b991107359eada4bed65aca92b85899de6fccab875b8c2229724cb52e9a4700c2402a221ccd23d98495b6fb4f46b6a1acda9da0a7d97c0313c76a52662282009cae5c90774d454cc5264d2d385328a44ea8992d0a584abbb4154c2921044500331625a14b3a0b0e24d80f33e02f15e3da75c10493d9fdc4942e834875026b00a9504fe9be57cf4acc73790c265d8a11198a6398a09c97a65d05319a33ee610051246d687cc595baa7d614da02120e9bb3ddaf9db6d802b199d432f0f5a6be00a68c48953953d3bb225c85899de2e5cb2ea338829dd60122e5e289134ce46f0094eefc4433be4dc8718c77e39cc5e8625c8c8910882057722d4b73dfe645c800a5f17d0a3ba352f67cc5f8f0391b8f9c215faed5e7cfcff4c4927470c1b33e00fab374840edcfd37b1a91ded6e5eb4bc83d3223cf91e7760353d210a8b935100f75fe9e6283025ecfa5f9b7f4cf3e2c2c10a8e543e57e7dbbfeb8873c4db28004053cc72a03d7a8bf5a9aef7b5462778e84f9ebadb2fda1027cc56837bdfcb00f2e5d711bc78fd7e7ef86908b61e2c7523f80f4b6365b0314a627f9d94ee5d00977bbf745e6a5ce360e618d0976e96d12d5996fbf6125f858b9ac1bcd16960003cdf51f6d3b587677642a28a9e7197896d095e194db851bf2e914907139ecb00bee0a557e53bc47f792e75649988525490b4e355ccdc94403f12fe11d3f98f0095bc4461db1e1a8d4430843084308457be1c353ffc2fd4b95c746bfeeb2e4f00fc197f31f89484b4c41c63c8f8599ad4e2929684a6383116fbc0fbc12f4c73002d825f293d8dd976d71d90daba3a99d33730bc40a70dc541202134d3d69eee00a945564fe4ea04b9eb58057f974d44b4ff008a41bf4f37ba98092c957c2ae800723e0589e4f19aa17008a50804102b5a81422876e629e7404027dec160804200b781008bd9ae4313620b8bbdf982d1b9852b63cb9915dbcc536a8aedce82b400c4ef6972f978f8bb8e01b8738429f2ed5a52f6de8697adb6340062378e5af300b7c999ded7b1172c610f0d2be7cb90b52e6a6bced6ad76370dff00972b9bbe00b972b13085c0a1140294b9a9f507722b417bf6a5677b817e5901d5ef62ce5c0074ce1022bbdb7def4db6ad4539d7adad5a080bd189e06fc32e2ef6fa96728900a7a1d81d86c696a9aedf64530def2b1b679f10cdc083cb8bc23cada4106b7b00f535d81eb6df6a0f2c589aa3bc2e72d32cce4d9f5bf58473f027a7d4e2db9e0027ccc223c03a9fa7e9839e27ccc21e01d4fd3f4c1cf13e6610f00ea7e9fa6100bc789f38457ae155007141c379bdb5eb47fa7ff785977b634fb46a57f67b1e00bffc8d8a683ff519fca2899642cf042be4636dff00da8048570d1c375796ba004dbfee04ef1e67fc3d9231fc79b5c1e57a56cafbc6be87fc45ff00b3fef08d004cf4d783ce2af58e4ad665d2ae1c75bb5072dc415a61b31653d33cdd3990450029b157130b3a83943b2d89522de34b114e290480a00900fa52bf6ab6770a9a0069f12c7b08a19e18aa454d7d24a9c90722a94b9826241d0a92018d82a64b4900652d20f02408e8ba9fa13acfa271f0d2cd62d25d49d2c8f8df1fc0c36a0e4a00cc79417304b567172e33e96c0a23db410429d8353ed82082ab1c6661f8d617008b215330bc4e8311421b7d545554f5410f96ff0072b59413a05006252b42ee0095057420c52cf00ea7e9fa6363beae3e83ed15467e7f66e9207b43a6841ffe008f1a943fff0022d3fc74bf6eea2761d009ff0096f0fe1ff335b1895bfe08ff00007a7e4a8e97fb4388afb4a73a9aefa5da4fcbff00e5c3df195d87a88d82a40063ff0028e25c3fe7c44d1ff823fdcaf9c60e7ddf7fa7f5c76f6fab8fa0fb460054541d3bd21d54d5e9b9cbfa51a6f9f352e7894a56e4a7216519f66e9832da008f843afc2486063de619aeef3c8434900952c0048c2aec5b0fc2e577d8957d001504936136b6a64d2a091a2553972c28f2049e510a52521d4a091c49007ac50068ce5c0af19da7d267b31674e15b881cb721866cbd173999e92e77665904ca005254a7a3e353265c3c0b4948254ec5ad940d8a81b63554bb67b2d5d3448a4d00a3c0e7ce5164ca978952198b39321067052cf24827945026ca51613104f00a00116aca69685290b050b4a8a54950295254934525492010a0410410082286f800e4626121c3106e08c88e39c5c88f01ea3ebfa61be780f5fbc237d5f6665bd80026074d0be30bfef66b463c69da01ff00facc4fff00de365cff00feae131aa900c5eaff00fdc963c824468dba6da3faafac93b732de9269b67bd4ecc0cb022a00224d90329cfb374ca1a14a8a3e2e2a0e43011efc2c2f8c1498988436c0558b0080db1ebdafc5b0fc2a489f89d7d161f209dd4cdada9954d2d4a67dd4aa74c4000529afba924b5da368a52521d4a091cc81e01f33ca2ad67ce09b8c1d2f91c400e67d43e1835e72765b8160c547e619f6956758091cba1920153f329abb25100012e68545571afb0906c4d6d8d6d16d86cce233934f43b4182d5542ceea244900c46957396a259912c4edf59b6484931409b294584c413c0283f93c5b1780f5001f5fd31c837cf01ebf78b90f01ea3ebfa61be780f5fbc2369980e0f3884e3300bd845c0be9ef0e791d8cf99b32c6bdeaa6729d4b1fcd194f2a22132eb19cf500fe48e4708ecdf3b914044293329d4ba1fe161a25d8b21f2f2582cb4f388f3b00af6ab04d94ed8f6bebf1dab3474d518261d492a6269ea6a37a79a5c166846e0052c99cb4bcb93315bca484d9b79c80703bd44aaa9a56480529018137dd41d2003155aa3ec64f68be8ce9de71d55d45d088291645c83218eccd9aa70deaae9000cd572d92cb5bf7d1916996ca33d474ce34b4d8f1087818389897366da59b6300b1f0eed5f61b15aea5c3687175ceacad9c8a7a69470fc4e589936616427bc900b46896873fccb5a523531909a992b2121772580dd55c9e6cde662f3fd8419c0073069ce53f69bea0e558c32ecd391782bcd79cb2d4c1286dc540cff2c4b736004ee4f1896dd4b8d2cc2cc60619f08750b6d451e15a549241e27db1d348c42a007b3fa2a946fd355ed65352d44b72cb9153329a54d492188de96a525c5c396800b556013241b833002391678a7dedaac8996753a6bc397b4674b611a3a7dc69006964823f382a0a2044c2c875a325c9a0a479a32f4511e110f30848081624b1008da5b69b899d654cc2fa438f0897579bd9357d461d2b1dd85c449fceeca625003d14bbe37553b09ab9cb9d4d3d39ef214b5aa6a0924a64d4484961ba0554c400a42e4abf54a5102d9a49705f9936d588d32ee3ecb0531c1af085c5d7b487300041b4de718d8297f0bdc30b51a3e1622333f6748a837733e6694aa31872166000ce5d5392499abe110eb9110394b3a4a56f42a96b2ac5ed19476af69f66360e004a8fe510b5ed16d0941df09a2a44ac53d3cd08214833c09d2fe220257534930077541a227ff79325c9fe507bc99afc23205af7b8f106ed1d37f6845f898de300832245c4bae4444c570ada2f111310f2cadd7e21f8ace4ebcf3ab512a5b8e3008b52d6b51254a5124d4e32fb11dd97b235a84864a768f1609000002426900000068000c07089a4ff00095ffb457d2305be0574fa8fd71dc3be381f4fbc654300c0ae9f51fae1be381f4fbc23828106fdb6e5f9126a3d3a8a8c5e42c6ed8713007d5bf607c85ef088a0dfb5faef4b1b529ce9b0b114a524a8df4e190d1ef9f80071bb102d08002c6f7f3b52a37e469dfa731882a566e3fa81a16b70b13cdb3400450d4f2a569eb6b01d295e75aec09a62adf16ea39707d7c38677221126f4df00b9b8e836faee0d2a6b7bb78f11972776b8705b982cce5b942208e40daa4505003635aefdf976a81d1bfc41c8b3f85ac3835cf184410120a89f0a4024d4d02600953524ec05c93b037a902b88df0904a8e4092720c2e5dd8066773a702e21180056e23f53c6a86a64d63e0624bf96e445520cb7e1282cbd0506eafe2a64da9b005290ea26d1c5f8c877890eaa5ea8069c092c0427c13da8ed71dafdabaca9910037bcc2f0f7c370a00a4a174f214aef6a92524858ada8336a25cc3f19a7553a0014ddd848d3544def66120fc29f853d0667c4b91c984504c75cc588610861080061086108cbaf091ab49cfb91119566d10179a322c3c34bdc2ead1efa65978000f732798a501b6bc6b8369b4ca2355ff0877c70f0b1918f97e68907da3d8b6d00a0da1d9e182d6ce0716c025caa6f8d49ef2ab0c1f0514f00251bc69d29147300c83314f2e44e9cb332a446da9277788dc27e24003aa7207c323e04e717694b00d3e6081bf4a56e3ee9d7b981d7c5fa73d3df08ca852f4e7f2a73dedd36f4df0012f67d3cf965f5f1844508a547ca9b73ebca87e476c0117fab8bbb7dc79eb00089237debe9617ded73717b8c4020b337adf97cfd7c10a1fa57d2fd76afd6a300b525c75bb789fb67ca10a5f6ebe94b9f3a529cff003c1c7cbd72f9c23c88d800d791a7c80c62ce2778312c520f0d4c239e2d39e27ccc21839e27ccc2186f1e0027ce10c4efab8fa0fb422bd70adff95070dfff00a7ad1fff00de165dc69b6800d6afecf63d7ff91b14d07fea33f945133fc399fec57fd931f444f680f0c1a1009c4049348b3ef1379864d28d03e18b394ff5bb51a553f4ac49f34c14a7294c0065f2e93ce1d4ac78a4889845351d3596a1a8b88cc4d433796d88388fdecb4800f126c5ed0e31824ec4e8f67e4cd998ced052c9c26866496ef69d532a51326400d9408ff18a12512e61294c82a33cad3dd08d4495a905410095ad3b896cc390005c73b5b867668c0b6acfed32c0652cc09ca3c2df0b5970e9765af04a24934c00fd3c89cbcf4ce5500b54343992e48ca12f8781ca52b30ad342590af4da64f30050ea6cc4cbe05c4aa09bee1c37b045d4c9353b43b433ff0088543cd9d2e8a5002670973163795ded5d52d4ba999bc4f78a12e582a7dd5ac32ce5268890f326001de372c1fcc9ccfbbc644b83cf6977071ed7b90cf386bd74d1990e5bd42986005f8c8e774a350e2a559bf2f66d86621dc879a4d74bf363d2f93cc5198e4d0c00f199a1886809266f92437bf9ac922a3a1e4d1f3685e13b4fb07b51d99ce93800f60f8ace9f4489c840c4a85332967d328a82a5cbc42982e6cb3226a8777bca005cda69aadd97352854d44b559992265390b4a890ff00a92e08e1bc2e2f96a000e5ab46a95ed54e00e63ecfee25637224a9c984d34873ec0bd9cb47330cc57e00fe31fcbc620434d72d4d2290db6d3d3cca1345feee8b23fcf8995c448e711000868cd9081e8cecef6d53b6780a2b266e4bc4e8d629714908002533c277a5cf009692e449aa97f1a744cc4ce9409ee898cf91384d4025b7c59432bf10381f9b0088bc5fd9bcff00943a65ff0067ad4bff00bc39071c5fb75513b132c13ff2dd000683fe62b62dd6ff00823fde9f92a3a67ed0d7fca539d7b697e93ffddbafe7008caec4d446c1d231ff0094312e1ff3f1347fe08ff72be716b7ecbce01a71ed0003e24a5fa6f151b31cbfa599425cace1abb9ae5a868c7cb72cb0f0868192c900d51095c389fe6a9aad894cbd6ea1e101086653a54345a254b857f917681b6a008d8bc0575e944b9f88554c14b86534c7dc995046f2e6cddd63dcd34b066ac000237d5ddca0a499bbc2e4f9c24a1f351b2473e2790f5ca36b9e2d7da2dc16fb001c32d48786bd03d1790665d498191c0c5ab4bb2346cbf2ac0e5c828a864997004fb5633c9964f66f1998e76ca513410f1b093acd73a855b13299c4cba0a65200e994479c766f6236afb51a89d8f6338ace9140b9cb40c46b10ba95cf5a547b00c9386d1f792652644953cb2a42a4d34a5054b96998b97325a7025c999524ad006a212e7e22e493c1209161966c326b34580e8dfed3ec74666f87977103c32c009e0321cc625b86899fe9766d9845cf72f42bab08722a272e66783721333b4d00a1557d8869d65f783695ad86e2dcf042af99e29d802114ca9982e3f357592d002549938853213267a807094cfa758553927252a54e0ec0948750baaa160e8500dc7f9830f319457df6a2fb37b876e38386489e3cf82882cb29d4087ca311a9004ebba7f2e621245ae1932590f10f66482984920130c881d4d90b5071eb6e2500301fbfa3a6f288ec9b98605e99bd091726d4767bb798eec8e3e9d8edab5d4100a2554a6800ae98a5cec22aa6292242e5cd59515e1f38a900a77fb944b9a8ab0090b12c293368913d7297dd4d76763bc6e836038b8b0e405c16cf4a820824100041048208a10458820dc107718f56778797afde3671f406f6416498bd4bf62d0069fe9c4046c3cb63b3fe42e26324c14c631b75d8497c5e6ad4ad59914346c50034cff9ce43c2bd1e87df6daff356d36a4b7fcc463c5fda6d62687b55adaf5a000cc451d660156b968202969a6c3f0c9ca4249b052820804d8137b46a27909a00a51cc05215e49493164baa5ed12e11bd8a794e59c1870ada472bd6bd6aca1200c95b7acd9cd73386caf297f3cbb04dc44d2619f33341cb2713ccd59add75e000f2729c02989564f9744c3e5f6a732e7654b9337cb30fd89da6ed5ea666d56d001627330ac2aaa64c38552896aa8982902b765a28e9d5325c9a6a60031a95ef004daa98954e32a6098269ba99332a7fbc98b2949277433d864c1c0039e66e75008f5bc317ed2e64dcf39ba0324715fa192fd3acb998e60ccad5a8f906791b9800b2e48a1a60b10ca733764e9e40ae6a64cc8595cc669289bcd1f44395d32f3800842dcc55b41d835552532eaf673175d74f908333f2359251227ce5206f014d005525625f7a48644b992a5a496fefc16112ba2500f2d7bc468431f020e7c03000eb14ff00db93ecb4d2d674bdee3cb84ccb997e4f2a866e5338d61ca7901a8400464c9ee529f0856259ab193a57256952a842c3d1500f66a1254b12998caa3500cce0e36dc4424ee3e619fd91768b88ff00101b1db493e74d98a3325617535a00566aa4d4c92a3330daa993542629c25629bbdde9b2e6a0528252a9289734b300d5bc254c2f984951b83fe52f73c06ba0d046a498f4a779cbd7f68d846c2baf0079867d977f67e3d9fd1797e773791453dc4eea8433d13269946cb221e87fe2002e23dc2c3af413cc38e325c6db70b4b51478d085787c49491d2983cb933fb6009db313e4ca9c91b3f879099a844c485773818de016950059c380ec488c3400006ae73807e04e601fe54718c0dc66a26a04c6162206619e738c7c14534a662a000e33334ea2a1625958a2da88877e396cbcd2c594db8852542c41c770a2968a005a92b45152a1692e95224494a9246452a12c1047105e32b753fe54f90fb46600dfd8b7ff0089ef6b2ffd80f52ffeebe77c753f6aaadec4fb370cdff8e9879c00ff00fcc52728c6aace47fed47cc47bff00677ca5ee3e3d9fbc527b3b231c33007d56d235278a1e15a163a2617df333597b8a96e68ca5247235e65b81869c4c00e6eb95be56fb3050efea446cc5ea7ba79c4d8db69e9d8ddb5d9edb84244ac300b130767b689484a8832d63bca7aa9a109256a952e509896056a4d0a101dc02009dfdd4e44e164abe099d343e9e8d678f51ed78cc721d0790f071eccfd3d99c0023f23e1672449336eb17eeb79e721a73af1a88db1369a44c62d6969312a97c0014c6673b952cb497e1a133f44413e4aa1db6d9bbd99ca9b8c4fda9dbdae96b0013b68eae6d2e15de04854ac1a84aa54b4a4024a77d72e5c9981c852a892a4d008978900afbd9e7359504f248c9b873e39c759fda06ff00cb5f4f7feca3a25f00ff00bb386323b16504eca5702fff00a498b7ca962aa4ff00095ffb457d230600b8edddf1c0fa7de32a186f8e07d3ef08f0a812a3f76a537e5e751b6f8c8428006ea4f323c5ce9e196b68471a7a77a7ad2bdf9f6bf218adf4f4f47f0844d2d500b73fbbfdedd460f7d74f7eede459114e54dcdbcf7fcc1afeb5c1f9fbbfd01f002843c3f8027615ad37f9d6a3d79d1bdc789033393d8791cfc38943e9e5e77f00bfef838e474b9d740fc470f4845a5f171ab43216445e5494c404668cf4c44c00bd25a7101f9665e00353898290a69d295c6b6b3278227e1dcac4c646c1c48700e56507a5fb69db4fecf6cf7f06a29bbb8aed0226d38521602e970b1f0d6d43006eac8554051a292e65abfbca89f2a60994ac712ae6ee4bdc07e25db984ea7c007f48ea482e231178f17c6aa184218421842184218422a1696ea1cd74bb3b4900b384a8a9c302e9666503e3525a9a49e2a8dcc25ef04ad2957bd6a8ec329cf100b70f1ec4245fbb5ae1d031c8f64f696b764f1ea1c6e88951a799b9532378a500157453593534b3188044c97f14b2a0a12a7a24cf092a9498b92e6196b4ac68006e388d41f79b18ce865acc528cdf97e5199a431488c94cee0589840be953650041b7d00a997d2dad6198b85702a1a32194b2ec2c5b2f433c10f32a09f7f613008ad163586d162b87cd13e8eba9e5d44858209dd5872898015044e92ade953a00513bd2a72172d63792a11ba4a82d21492e141c1f7eb1ef2829d798a5b63bf400a9b548b114db1b07739b3fbcf36e578aa229eb4a035236b2ba5f90a7e1be0f00e1a867cd9b53eb9c224a76bec3622be469ccd3cbf23214cf6ccbbbdf987cd900fdeb088a56c76b5ae3a5796f63d373b57027867a9f12d773a7c85cc214afa9003bd01e74a9b93d011c8d79621fdf0e9717cbc44239014f9dbcb97ddfe5618f0039642835fe1198d5cf3feb99bc410fa91d0b44e2cef9e03d7ef11bbfea579c0030ef0ea07cbef0dd3a295e6ff68627bce5ebfb446e9ff39f5fbc30ef397afe00d0dd3fe73ebf78af5c2b7fe541c37ffe9eb47fff007859771a7da25becfe3a001b3c1b1319f1a29fca289893b8bf889f8156bf03ce372cfda4fd5acc991b8200bc89a7920982a060b59358a5524cdada3c41c99658ca7249ae6efddfe34a920052d2b32c065a8a781f1071109ee949297091e5fec2b0f9155b55595d3a585a00b0bc2e64da6272975153365d36fb105c890b9e94f02a7171181469de984e5b00a97059ee481f278d1671eb9df1c0fa7de364cbe23df8455bd04d579ee856b600694eb1e5b8d88809ce9ae7fcab9c615e865b885b8dc8e71091b1904e869485003b0932816a265f1d0c4f822a0e25f867029b75493adc6686462f84e2385cf40005caafa2a8a5505004033a529095877654b594ad0acd2b4a542e0452a429690052490ca041f1f08dc7bf69ab204ae7dc226896a6061a72739175d21e45051c000254a44833fe4acc4f4e219a58493e08c99651cb310a21610a1029aa547c05001e61ec16ba648da5c5a80922556610a9cb4719d4557204a51048ba1155509c009c6fe978c0a32a13169059d2f7e292330c74278461f7f66f3fe50e997fd9eb0052ff00ef0641c76676e6a0762a580fff009ee83ff915b17eac2bbab9046f8f0091e423a67ed0d7fca539d7be97e93ffddba7e58cbec51606c25202ff00f9c30012ff00e7f589a40aee431006f2be7d0c66dff669f4de5d937833d66d648e830065b9a67fd679c407c7a1285c4bd9434e327e5e4c0b457e10b425a9fcf3371f0073e328551b748aa853aa3b77af5d5ed4617862144cba2c2a52f70b802aabaa00a7ef96b8bc9934d767cc463d6289989492fba97e01c93d3402e789f1d3af8800bd5dcc9af7af1abdacd9b63e2a633dd49d42cd59ae25d8b8a888b54242cce600f14ecaa4f0ae44b8ebad4ae4329f819249a082fdccbe532f8280864370d0cd00369f4e609414f8360f866154c8089341454f4c9084a5214a97292264d504b00033274ddf9b3567e25cc5ad6a254a24e7a10a42529040090001ec67c79c518c006d37c703e9f78afe3e293e7f402374bfd993d689be6bd05d7dd089e4c62265002dd2fcf122cd395a022d45f8794c8b51e026699b4ae112baa5b817e7f9763e006aa8503dd98d9acc5f20aa25caf963b7bc32548c6306c624cb12d788524ea700a85a46eaa6cea05cb32e6288cd69933e5cb0a37dc96848b2436bab504292b20000de0416d48e3cd8fa46aabc6e69cc1e91f18bc51e9acb219b839364dd7cd500692c8215a00370f9718ceb395e5d6929484a5011237200142404a0d502c91800f446ca620712d98d9faf98a2a9b5583e1d36728bbaa7aa96577e49d5e685df005ce3365a96a9682c0ba125f9b07d78c6ed1ec80ce6ee9bfb1734fb50d8436e003d90f21f12f9d196dd495b4e3b95f52b56678da1c4020a9b5ae0405a4104a400915a9ae3ca5da6530afed52b68cb84d6566034a482c5aa2830d92483a165b800e11ae9e0aaa48362a54b05b9a5239c68319c335cf33de6dcd19e333c73d34c00cb9cb314ef35e6199c4acb911319e66199c54de6d1cfad5552de8b8f8c8888007564d54b7144dce3d8d4b269e8e9a9e929d225d3d2c8954d225a410997264400b4ca948486b042129481c046cc6f000048600017d0586b1d7717f7d3c7d0fd00a25d7c07bf18df67d8c93e57157ec8b8bd19ceaebb3b449e0b5a78768e726400f2e29d88cb739838c8d91305d882e16d893c873b41c8e5a8069050927844300096d2cb4078efb5294367bb4a4e2b4804aef57856388081ba04f94a4a27298300399b3a9173661fe75cd592e498d6540289fbd604eead871d75d59cf1731a1300a92a4a949502952494a9241052a0684106e0822841b838f626fa78fa1fb46c00dd7c07bf18b86ccfc54eb8e71e1cf4eb850cc39ba1e3742b4a335cd73b645c009e9cb796616224f992751199e2a651ee6658494319a26687dfce3985620e6900388c8367e3529661db4c2c2258d253e0183d2e395db47229d48c5f11a69749005955dfd4a933644a4d3a65a053aa61a7965229648de97290b3ba5d47794f4000410b54c091bea0c4b9b800016de6190c845bc6377be9e3e87ed171d5fe5ffa00c22e0b43f8a2d6de1ce4babf97f4873643e5994ebbe9e4d34af54219fcb99600a7cacc391e73091f05319432fe6094ccdf9338fc34ca31b132923b2f99b45d000b6631b5b6da91a6c5b01c231c9b864fc4e9cd44cc1eba5e2387a84f9f27b800ab94a42d134a64cd962680a9693ddce0b965ae92097a1690b29de964ee9de400dcd8f1b67e2e23d5f0f1c466b170abaa526d66d09cdeee49d439141cda5d0300394cb24f3b8654be7900f4b667051f25cc1013492cce162219e2a0c4c25f1200db314d4346b096e321619f6ae63782615b4587cdc2f18a74d5d14e5ca5ae51009b324ab7e4ac4c96b44d90b97365a92a19a1692525482e952812c0989295cb0025258b5c645f301c781ca3ab6a7eac6a06b2ea666cd60d4acc7159a75133be006188cd19973146330acbb1f3788712e7bc441c2310f2f838487436cc340cb6000a161e5f0104c43c0c1c33108c34ca3270fc3e870ba0a6c32824a29e8692420069e9e4214a211292198a94a52d6a53952e62d4a98b5a94b5a94a5124964a42001282120335fed9f38ee9c44f131acdc5667996ea3eb9e6a6337e7094e519160045809a43e5ecb99690ce58cb6a8d549e5e6032c4aa4f2f7570aa984595463b000ab8d88f78044443a10df871304c0b09d9da499438448fcad2cca99d58b966007cf9e4d44fdcef57bf51366ac056e27e00a084b7c290e612c2658294a1401200fa9b9ccdfa4506c6e1c711e622bdeff4abca1838e23cc437bfd2af28e2402400f514a72f5069bef415a5be5912d5f006caf7177b9cc3b7a4540bf11d7388f0008bef7b52fbd795af4bd283ad6c6d56f1cf577fa7f5bde11200bf3af5ec08a5007aee6d71b5b6c1cf1e9a33e6d97bb8e3088a0bd46f415ebca94a5b6fcc1da800de3c722fe27abf1f6e5d0205f9dba03715bf73b0a73ef7a4ef7ccd9cdc1d0000cb8f3faa3d1e66cc528ca397e6f99a7d168829449605e8f8d88594821a6535004b2d25453efa2a25cf043414383ef62629e6619a4a9d752856bb15c528f05c003ab315c427264d1d053cca89f30963ba80e112c1237e74d5eec99329277a7400d5a25a015ad2f4a941095289609049f0fa9c871368c17ea8ea14d75433bceb00384d4ad1f1ef96a5b025656dcae4f0ea5225d2e64788a521864f8e214d8422002239d8a8b280e442f1e01dacda4acdacc76bb1aac2a06a266e52c82a74d251004a2534b4a8d00952d8cc524013672a6ce237e6a89d2cc98662d4b3a9b0e0340003de6e629f638e45b8610861086108610861086108bd8e10b5c7f8367a9d3800ccd18a4e58ccd1a81238a7d654d48f30c4a92d258249ff00225d3c51432f11005661a6221e24a596a2a63123bcfb1adbe181d78d9ac5671184e293c7e466cc005128c3f12984252939ee53572b71130fe8955025cd21089953323329676e28004b5164a8d8e80f0be40f1d0df531958a7707d45b714fa77c7ae778d9db8df300cbaea0e603bbdb38d9fdf8fbd74fe903dbef973f3afa731505bd98273763a7002c83e99d8df2d621edc1c81e65ba713ae87287e5d3a13da9d7fb9a61bccf7700cf8f0195c867cbe80b89772dd5d8e5a7d72ead70222f51bedda806e3adefe40079e1bc18b71e84e7d33b657199caebf3bf461f3b8f104f2ca686a6849e7b540000295e56af7f3c37afcb5bdf88b58386e60e44978805ed77cceac067cef90d006f934318f34ba81ff487eae78f0cbc2d6891af5fa0febe30c5b89861086108006108af5c2b7fe541c37ffe9eb47fff007859771a7da1ff00cc18e7ff00a3e2007fff00c53e2899fe1ccff62bfec98dc67f69774d73066be0d74c33f49a5cec0074bf4b75b25f179aa21a1e2fdd321cdd96e75975898bdcc43af31ae412d510002cf4c582aa26a47997b09ae934fb4f5f4735610bc430a5a69c1ff8c9d4d3e5004f281feaee04e9839215ac6ba89404c5027f526c389041f93c68d98f5946d2002a468e69c4df58756f4c74a2410ef454e75273f652c8f2d6584296e18acd1300d819336e5120f85b63e30bef3aa010cb2db8eb852da14a18389d74ac330daf00c467109954347535730a8b0dda792b9a4732add6005c9200b9114a9412952800e49049f00f1ba1fed30e729648782dd22c821d6db99e71d7e92c6c04083e1500993e4dc8f9c1733896d3cda838b9d48a196374aa3d93d71e5dec229664eda900c4ab189974b834d42d6ce3bdaaaba512d24e85499539438ee18d6d1079aa3a000411e2486f40630d7fb379ff002874cbfecf5a97ff0078320e3b3bb71ffd0a0097ff00eb541ffc8ac8c9adff00047fbd3f25474dfda1bff94a33a7fe8bb49f00feee1c65762dff00a0b4bffea188ff00f3c44d1ff823fdcaf9c6743f66e33c0041e76e03f5474bdf7db44c721eb7e6e817186d7e379bcbb9ef276559a4b23900d41a780bf38466a876d23f914997f881f19581d4bdb9522e976bf0faf00945005e134cb04d819f4955532e6201e528d3a89ff5f48c5ad1bb352ae291e6927e008d1a576af69fcf34a355b52f4c332c2ae0b3069de7dcdd926750cb0a05a99600589f47c9a2c24a9292b694f41ad6cba1212eb4a43a8aa16927d4b86d6c9c47000fa1c429d41522ba8e9aae5286b2ea24a26a5db2202c02342083711b3490a400a543250047421e29de336263726fd97fd2a9a4ab4bf89bd668c86898796e7300ce392b20c95e75952188ff00e0795cda73357e19c5001e443446708585714800f1252f25d6ca82db5a4798fb7dc465ccafc070b4a92a994b4d555934020a9100f9b992e54b0a198de14aa5007463918d7572be2427802a3e25be91aca71fd900ee0b5338e0e2d33c4b1d6e22533de21355d7268a697ef1b8b9240e729bcae400d1a85ec4464ae0a122a8925292e94a54a480a3df1b1d48aa0d94d9ca4980a600649c170e13526c533974b2a64d4ffd198b5279b398cd9437654b073084bf90008dd1bd9199362f517d8a591f4fa03c1f1d9eb4eb89cc9b07ef1610dfc5e67d0045d5a9243f8d6a212847be8e47896a2024549200c7973b49aa4d176a9575ab007dca4adc02a94c1ceed3d0e1b354c352c8368d6d41ddaa52b82a59f24a4c68002b9864336cab3f9e6589f413f2d9e65c9c4ce433a974536b6626026d278d7e005f31828869c4a5c69f858c8779879b5a52b438da92a4850207b0a4ce97512600554495899267ca973a54c49052b973501685a48b10a4a82811620c6d810402002e087078831ea317611bebfb0e2429e1d7d94111ac59b2b01039823f5ab5de002c46a1c87f85caf9599899243c43a971293f0f192ec80f4e21df48287e0661000eeb65485249f2076b33bf8df68a9c329be35c84615842770856f545414ce50000dfcc95d6094a1985a140dc18d5557c751ba336427c4dff00ef46854b5adc005adc71456b714a5ad6a355296b254a513cca89249ea71ebfcb28dac71c210c00210c210c210c210c210c210c2111d3f4f4de95a5c5ab4b5791c64cb532078800b1be64e46d7c9fc3ac1cc7dbc3ea3cb94057eb4b917befdbaf2a0a8ec6e6f000e2e7c6c7ea3eb7d6d0efcaff005f9bb020b33c4fdf3fcaff007b6237f8e9c300c6e1ecc7c33d624f0e395c87f2b86d74f3b3bed5af3ec074adc7a5f9ef815300f5cfc9cfa0f12796700f16cdb3f1d6e08e072e70fbfbe5f7dce1bc2fc9cf5300970d5f8d80e113edfd6d6639ff00568c53f179ae5fc653c569be588d52b2b6005a8d5fefc8a61546e7b98a194a696c85a6efcb648a0b659d988a991888af0b00edc2cb6271e46ed976f8e39882b66b0b9e4e1385cf3f9e9b2d442310c4a51200852417fef29684ef4b9764a26d4f7b380988974b36359553f7d5dda4fc093700caea1d3303e6e7268b27c746461c30843084308430843084308430843084650093850d7d19fa4e8c859b2382b3a486107eed8d8a710977334961d344ac28940097e712a69296e3d241888c830dccbc512ea266eb1ebbec8bb42fed051a767b0018a87c6f0f923f2b3e6a805e29432c303bc58ccada440099eef327c909a9260062d354b46c69e795a7bb51752459ff0099239e654323cbe2cc122f331ddafd00357f7a367fb464927460f661c8d8f0e8413967136fbe5b7df3f2c1c72b67fb00c4bdb913edec1dbc6eee0b880ec06e7bfcc5ec076fc307e7cbf6f5f58926ee0035176b1eb7279b902d7bbb911b7afaff006f3f3ef87bf7efe511bc73cfe96600e2e19d9c67c63ca90083500de9d760316262805005f2fa9e315a723d6d776b000b3c72a0e83e4316f7c703e9f78aa141d07c861be381f4fbc2141d07c861be00381f4fbc2141d07c861be9e708af3c2b81fed3dc38d87fe3e748390ffef0b200ee351b42a4ff0000c72fff0023e27a1ffd4a7f28a267f8733fd8affb263e88007c79eb9f0e392a0f4b3873e2aa5908bd20e3123b39e91cd3324d23198392650089c424a65731cbef4e221d6caa56d47cd22d86659995b75b19627ecca26b100059826e263e07c57b2384e3754ac431bd9e98a189ecd22971197225a4aa6d4400a54c9889c25807fbc289692664820fe62499b2c3a8a50bd3ca4acef2e5bef400b6530cc87bb71e6350e391d69358bf666b89096e758f1a09ac3a4b9cf4d6320025c7a431ba8534cc395738cbe5ee2caa1e1e770b24ca73e924c5f658521266007298c61a8e5256f0954bd2a4318ef6c33b77c0d7488fe31866234b5e94813900144893514cb58b29529536a24cd960973ddcc428a3f4f78bce33935a86f8d200a0a6bb310fe25c7ac6507d9b9ec67d39f6784d63b8a8e28b53f24667d4bc9b00229bbf2d983517fb9f48f4965ef43944d3357efdcd30d268c99e6044ac45410022733385944b64f091b1e21a02263570b3386e01b73da7d6edacb46cfe018700d553d0554e942620a7bdc4b125a540cba7ee69d5312892666eafba42a6cc9a00a4a379694ef4b563cfa954ef81092124f5528f0b69cb33e91ae87b637da110001c7bf11d0711905e8a3a13a390132ca7a54b8a878c807f323b33888489cd9900f62e5b18b0f413999a365f010b2c61e87838a6f2dc924663e0a1266e47b29e00ececc7638ec7e06b4d6848c5f135cba9c4424a562409695269a8d331037562004256b52d4952d267cd9bb8b54b08319b4d24ca417fd4a20ab93643c2fe24c500c17ecdf240f686ccc81ffd1eb52b99ff00ed0e41c69fb70503b172d8ff00cb00543c7fe66b228adff047fbd3f25474cfda18483ed27ce848ff00f75fa51d7f00fb398caec5d406c352b9ff0094311e3ff3f1347fe08ff72be71473d90bed07006b804e23d536ceab8f7f42b54e061f2a6ad424be1e22611b276a19c7e232de007795cb5979b3151b96a64fad31ec36d444544e5c984ed881877e62605b3b2e00d2b6386d8e0625d26e2717c3d66a70e52c84226950099f49326149dd4cf96100d0494a533d1294b5046f98aaa24f7a8b7eb4dd3cf88f119738d8a7da21ec7a00d2ef693454bf8c0e11756f24cab50350a4d258a9acc62a611136d27d5480800097225f2e9f89be5e849bccf2ee6a8796c2c049e35c87808d818b4cb596267200b96cdd99847c574a6c4f699886c3257b35b4986d54da2a39b3532d0940978800e1eb5cc2b5c9eee72e5cb9f4ea5a973520ad0b495932e64c945084e1c9a954009feee6025209ff0072797021eff22cd18c5d29fd99be2ae719c6570fac7ab100a3592b20a22585cfa679326d99b38e6b760439ff000887914a23f2a65f951800d5b60a5b8899cda1e19852d2e9662fc061d7cfb11eddf67a552cc385e1b89d005d61491291552e452d305b58ce988a89d3371f312e59516674e717d55a803e0014a896b3b00fceeed1949e3db8c3e1dfd921c1ac1f04bc2ecdd8735c1dc9710079572848e12351389e64385cdaa8d8accfab9a8933877186e5f9a664e4c667003bcbd2f712dc6464fe632b8c8491b3946095ee3afb63f66b1aed1f6a17b55b00412c8c245526a2aa6ad3dd4aac553ee269f0da296a077e9d0112e54f587426004a2625534d4aef6254b5d44def660f85dc9c81dd60129e5903c9eef1a34ba5006fb8e3cf38e3af3cb5baebae2cadc75c71456b71c5aaaa5ad6a254b528952900449249271eb30520000a400000030000b0000b0006423691bff7b21f5091a4007ec5ad3ed547258a9d37a6b917893cf8b93a22441ae6a8ca3a9baad3f54b930016a69f4c2aa3532f30c988532ea592e070b6b09f09f1c769346712ed4ab70f001304a35d57815189a53bc25fe66830e922614b8de09dfde21c3b3388d4540d00ea95272de5212fc1d290f18eee28bd93ba59ed4d974af8f2f67e6a7648cb13001d67874cf752b4e33988c9548139efdd21bccab5c465e94cda3f29e7b4cc9200f23384a661298a964f66fef735404d7e1e7023265cd767fb45c43b3f5ccd9000db2a0aba897859ee682b6977664efc9bbc8613a6cb454d1996c69a6226266400996d4eb96f2b71179150a91fdd4d493bb64919eee99e8d96a059ad149f86bf00d99bd5a88cf92999f157ab390653a6d2e8a662e6996b492673d9ee6fccadb000ea1c54a44de7b95a4729cbb0518949662268ca6711cd34a5a61a05a754889600b658ef6ef870a49b2f67b0dac995cb494cba8c491264d348243099dd49a89b0032729198967ba412dbcb21d26b5d6a5bfbb49278aac07802e78fa45d07b70300da11a53a05c3f39ecf2e1a63a428cd53ccb727c8ba8109949f43b2bd21d279006c343349c901f837d70ec66acd301090b278c944418889976528b99c4cc5b80078f9b4a2271c7fb28d8cc4318c646da63c99bf97933e65651aaa434cc4b119008a51fcdeeac051a7a75a95353352c95d4265a50548973045ba594a5afbe5bb00024827f995c7a0cfab691a63f80753f4fd31ea171c47988d943c03a9fa7e98009843c03a9fa7e984223ddf7fa7f5c210f77dfe9fd70843ddf7fa7f5c210f7700dfe9fd708447bb3c88fc3f5c210f01ea3ebfa6108e2450907f5171f4f3eb8b00c9fd23c7e675f0f7adb3fa8bf973200d03b10747b8d2f11cb96fd2fcfeefd80074c54f97a7bf61fac40259ede81b86618e4f6bdb9087dfdfe3eb87bf9fbe50007d497b5afa9b1cec2c7570e2c5ad0a75fcba7dd7a7d3076e01eccecfcb8c0700a664dcdcea78db8b6ae1ec6ccf8b0d7e19064ee641ca71c139d27d0844ca360015c41772cc96213e152fc42a589c4d5a2a6e0520088838353b330a8675c95b00af74976bbda18d9fa356cf60f3db1bc424ff00c2a7ca524ab0ba19a189de0e00515b5682532006992249555032d6aa55af1aa27940294d96afd4da0e2c6e090006de76b3e26f1e448d6c3084308430843084308430843084308430847b393400e66997a6b2f9dc9639f96cd65714d464047432fc0f43c432a0a42d26e140dd002e36b0a6dd6d4b69d42db5a927268ab2ab0eaba7aea29f329aae926a27d3cf0094add992a6cb2149524f50c52414a924a540a490641292140b105c1f7ecc66006f87dd74956b365cf0bfeea5d9d248cb4d6629478d148901284267b2b4788200dc95c6b87c2e36521d96c695413fef19540c6c77b57b3bdbea5db4c33766ee0048c6e8112d388d192969a182457d225dcd2ce5165a582e967932564cb34f36007ed644d4cd4924eeac7ea193bb7c432ccf500d88b826e100dab6adb9d4f2e7005eb71614db1d8815f373721fcb5b67e7997c829f930b02de7a5f2f2c830a7e00ede95e95af324fa530deceda8c9ac06432f674cde3745afa1177724e6731fd0035c88509dbce94a7adedd0d36bf6c48511e9e3c45c3ebe176cda0520faf41c00ec5acdf27c8c284037a76a907702b41f2bf3bf2c412f987b8cf807b7a8bdae001f3bc480d67e5e2c0b9f2362f639b5a06a2b73cab7dcd0579ee2db57d05b0000435c077cdae1c6795dbabb5b281049b13d01b120e4eee3870d6268aea7bdcd0007a8e845fd46d5021c6a01bdf3cb964df3e8331ead6b0b67ea4f3d35cf27f30075279115bf3b5f636fee0e0e34039580f97c8be99c00b392471b9fae5d6de100a4ff00313b9162373722dcfa9a6c3eb5c1c701993971e2cc3de9a99f537032003eb7723de672f65239dcdf2dcea4f98a41328b944f64333809d4966b02fb9000d1d2c9b4ae2da8e96cc60e21b216c45c14630cc4c33cd90a6de690b490a0310044e972aa254d933a5cb992a72172a6cb5a42913254c4291310a490414ad0a2009503985105f430662e4104106fd416f222e3a5deb7eb47161c4b7119032295006bbeb86a46ac4bb2c4646cc32fc1679ccd309f4349e3a3d8661a3a265edc6b00ab4433f14c30cb4f38df84ad0da013618d4e17b3b80e08b9d3308c26870e5d00425089eaa4a744954d420952428a521d2144900e4496ccc52896896fba9097001a0eac0806ed76e37e022e3346bdabbed09d00c9b2fd3ed31e267384b7274a001a6d893c933149b25e7e664f08c32861897ca62f3fe58ccd31964b219b425b00869540c643cbe1c0019856eb53a3c53b3bd8bc66a975b5f80d2aeaa69266cd009132aa8ccd51254573114751225ae62893bd31482b3aa8c50aa792b249482400ea1441e760c0e599726ee758a47c44f1d1c5c716298787e2075db3b6a1ca61001f6a2a172dc4bd2f90650878b610a6598c6b2765581916574c736db8e2131a0065062ffcc70a9e25c714ad9609b25b37b39bcac1707a4a298b0a4aa780b9d500250a20941a9a85cda8dd700ee8981361f0b000548932e59f812125b477b6770024923882f169801ea4d47536a1bef4aef4a56831c8dc3d801ea0ebaf1f0f9b00dcbb5c9f0171e5fbdefd2a9690eb6eaee8166c5e79d15d45cdba619c5c954600489799726ce22a4938549a60ec2bf1b2d546422db78c1c53f0508e3ec57c0e002e19951ba134c0c4b0ac3318a61478ad0d36214a262670915525136509a80a0009584a9c6f2029612a6b0510cc6295212b0ca008705897167637d78b11d63c001aafac5aa9ae99be273feb1e7dcd1a939da3206065d159a337cda2a733a88800196b261e5f08e4745b8b756c4131fe530d289f768fe548a1270c3b0cc3b08a006145865153d0d2254a5a69e9a52654a0a59256add48037964ba8d9cdf83128004a46ea5922e585ae58e5f4bfde9a9f103726a7957d6dcba814dcda9d33c11600b0b3e9a70e3cbfa022a6e674163ebc381b70e6445d170efc6af157c27c445300dc3deb8676d3786982d4f47c925f130737cad1cfabc09545c664fcc90539ca00d131a52db6811aeca57189425284bc114038fe37b2db3bb46948c6b08a4ae5002032272d2a9550919eea6a69d72aa12977f844d092e7e178b6b952d7fad21500cce633fe60c5bc7319e717419bbdb41ed37ced218fcb938e2af34c24b6630e00a868b732c651d34c9b36532ea1487043e61ca392a4b3e8052d0a20bb0133850072f658a0c6829bb2ed82a49c89f2b6769d4b96ade48a8a9afaa96e2e1e4d4d004cd92bbe4172d432719bdb4d34917dc72c3376cf504f9f8b124db19f379c4e003304d2613c9fcd2673b9d4d629f8e9a4e26f1b153199cc6362145c7e323e3a0031c7e2a2e25e70a96ebefbae3ae28952d64d4e39e4a972a44b449932e5ca95002d2944b972a5a65cb9684860842121294a468121accc445f6019ac3200161700c9b4e807170c447adfe6a7335ee7b77a9e409d86d7b62e38e02dcae490cf960099df90d20732e4dd8f0003f519e5c733ac5cce53e3378afc8ba56e68764ee2000b5572d6903b2acc322734e24f9b66705945729cd8fcc62732cb152769e4c2009849dc44da66ecc9928f0452e3e294e03ef555d0546cbece55e22316aac17000e9f89f792668ae9b4d2d55226d389699133bc29dede9425cb12c8ba7712d9500e832a5956f14a4aac5d8396cb32ee2d7fab37e7e1cf8bee25f84b9e4c67fc300b6b0e6bd318c9c21b6a73092972026597e76964292c2e7395b3040ce32ccd900f860a58848a9849e22220fde2fe19d64a8d6ac7366f01da4948938de174d5e009944994a98152e74a273eeaa24aa5544b4961bc944d48537c40c4ae52163e3001bc06a5dc0b3b10411e0d9c5cc6a47b607da4baad96a2f28e6ee2a73ab523900836b66399ca125c8da791f14c2d1e07597a799072b65a9e961c4d52e30999200587013e342aa29a1a0ecd761b0ea84d4d36cf5219a82e835336aeb50950b820024d654544a70598ee38d08bc5b14f2525d280f6673bcc32b05122fcddf998c006e3ef4444bcec444bcec444443ab79e7de756f3cfbce28adc75e75c5296e3800e28a96b5ad4a52d6a2a59e78e720252025212948000484801206400480036900906b5b28bd901a35f3d00d5dc81c4687ce3c37aefd48a93b0f5e74d8d4daf80093bb6602c380e0dd5f2bb8cac2001bb939f1f968dc98e79922cbdae7ff00c500bd6a076dc1eb620de9838bb81cb911edf5d21d0e46ff006e1c32cafac2f7b900f5371f8d6d7341eb4c492086648b3337ed6cbd7c400639a8df8e9a5bde47a1001f15ea4f5a8ad37a7e7c81f960e380f9b7bb33bb74b035f33a59c07f777667006e21c8f8b7a9df604fc8579dfcc52f7a8c43f21e5f4cb9e46fca258712d99b00e9c5f3bb366033c056d737a5af735d85c723527caa76c1c70e8d66d7831e6e002f11e2c757e76e367d18c3f9b7bf21407734ed6a58d69b6d6df12e3403adce00ba3e5eaf0639925b85869776fd9a1423626f6bd6e48f41e5426e060fc8790d003ef77cb4be906d1ceba9f76b367adb58915bee452c4934e46e7e9514069d2a00443f21e4380e56f0e312d7b9e973c7adf303db47120d2a7d0935a8e95dc9bf003e9cc6d21447937be7cc7cef10520f9f2e9ec1e995a0072bf4f5e86a3af5eb00bdaa5bc7d7db9ccfa6678d9ba35d41f60741617c870ba95e437239df7e42ff0000414aed4a00dec9beed7b66341ec5e000bbf2bb33bf4b104e9e05ed16f7c4000ebacab46b2dd18f7530ce93b65e6b2ec9fc6d910c3c2b42a7b3441256dcaa000dd494b6da51ef265181304c78194c7c64075e7687b7f4bb178634a28a8c7200b92b4e1d460a7fba1baa49afab4e62964aac84b15554e024a375099f3a463d0044d4c90000ea20b07cb2f88f06e1a93c1db0c9399ccd330cd6613c9d46bf32009b4d229d8d8f8e895f8de888879454b5a8d02529164b6da12969a6d2869a42001b42103c535b595588d5d45756cf995357573573ea27cd3bcb9b36612a528900c85ec948012948094809000d512544a944924b9273263d6631a221842184210084218421842184218421842184218423b3e4dce39832166396e6acb11ca80900bcade2e30ef8438cbcdad250fc245b2a211110914ca94cc432aa7890a250a4003894388d9e0d8c62180e254d8ae193cd3d652af7e5ac5d0b491bb324cd438100324cd41289883fa924b10a0142a42d4850524b11e446a08d41d44669344b5b00b2e6b2e5c4c740ad997e6597b2d2731e5c53b58897c42bf93e2a17de785515002a8a5a7c7091690bf0788434496e290b463da9b11b7586ed9e1a27c928a6c400e9909188e1a56eb92b3f0f7b25d9536926aaf2a680771fba9ad3017db499c8009a977650037d2487e16d58922f96873315acdea29f2daf53ce80f7efb1ad0800e6c56d970b75f7d0daf988bdcc5c9cad7e998c99dad95ee5e22a00a81f2af300e42dd4916b0bf3342df1c0bb65cf26f7a443d9ef96432726dd4e848e1a189300734fe9b56c763cf97516a6edf1edf3e76f50fd22722ce4f53a8fe9a026ef6b0013c6a4dfa8de9d81a54d398a8a1b5c9ea1be6f959b9f5d46b910f9819988050059e8da8e0fa9201e441366731c81ad37adf98e55a8e5f80e57c37c7b23ead600f65acf39e7abdb40067991c33b00783df89a545a973caa48a1277db7bd7a8a00ec406fb90cc06af9fd069c4e635b440cc5f5662c340720da019bd88e6227bd002f5b56a2b5e953befceb4005284524283b38d5fc3dbbbe9ced57a677cb276600cdf53af16b888afc811616e74adee39002b623a0c46f8e42fcf2d4e5e422970077c8316be976762183bb5db573685ea6d515068773cea075a7423b8c0afa7a00dee7838be8fd5988839bfcf2367b0670ed9025dee4472ad6d4279134a03bd700f4bd2fd30df039f307af5e4c39dcc351676e197f33b5ada59f360f6788ea2c00391e62c3957a122b502953d2b86f5aecfc3a8395efc7a16ce26fa9cb99e17d0043e85cb33e713e437af2a11dc9bf4bd45ea3722edf1c3e5efaea3866d1cfe2007d74b5ed636cf99e1773100ed6a0f95296afca9d4795313bd9ea0703cc5fa500f9b9e02e472218b5dee5f30e6fa798b9b8ccbad477bd81b9e645398e86a2fd00a37f3cb967f51e197a5e0090fe0ce4e6dc481e5c41ca20122b402e3b1b8f2a008a5391a1a9b1e781531395873bf4cf46b7ab07817ea19d9f3bbf3e22c72d0b003bf226c3ad6d50454fcbbf6af502b86f8f6fe3a7964efa449239e6c05c5fcb003bea730ee0b988adc8a5b6a58927aff356be7c8106dbe05634cafd79741ebc00a235c9f4ff005785c00352d762e43178917a5b9541bfcba91437a9bf4de93b00c395c67e246ad96b971601da43f98771939e03d6e6e49e6c24db9f957e94af00a5ef88df16f7ef8bf86792cfd1ee72c8ea2d91cce9cc988a826e2f704537b700314da95e95a6dc837c7be6dcb4bbf9805d843e9c1ac017b31c9868e34762c000bb05881b9b5397956bb57a5ef5ef86f81d756d3c723edda1d1f3059ec2ed6200ede0e731610a9a6d4a1e96a7e1bdea0f2dc5461bf723cb57f5cdefcc73222600ee6c73b3df8e570daf266d4dc08a117ed6d8f6e86bc89e94dc0c4ef0bf200d00bd7906ea786707eb66cb8f32f9f227cc90d069c81dbbd8f2a8deb7b1ea6b7e0051be2fd09bf1d07bf0ce04bbe796a1af664b665defc74e53bdb702d71415bd003b6f6b7234bee1be037be3c1fee39c38791bb5cbb8773a8195c599f288e66900f31df6b9adcf323d7951bfe1cbabb73e1702cfabd8ef61901935aeeda65964002dcf454dad735a56d4a529cbe76e9422966fdb4be59b74b0d333969d622f6e0024585f3be658aacef986d09b989161b57b0045e97d850d48e829b1a6d86fd900f3b5c7a71e2de05ef0bb5ef666f3ea736cd8d9cf080b72163e4456c2bf85f700b134a61be1cf0f5d34f3eb9676339bddbc4b876cc121b881a8c9b5907734a10015e5bf3a0f3f954d6f5c37c78bf51e76f32d9f0866e2f62ded8877cf402d66001104df615e476af91b6f5a58dbbe277858063c5b97a71ccdb9ead4339d7337006e0e6fd1f997b42b716ed5e87a6dcab4e9f5c46fe5cf997f9372cfca20588e000e0666d663906cfd5f9b2a3a0ff55f9ef5ed5aef4a81bd0546f254388f3cbe00bd0b6b9715b8e4c2ce48e5cdc8b3863ce26d435a501e961e56a57aef7f96010063df8fdbd471b4dae4f3bdf5e6c32c9816079b4513d6ed6dcb9a3397571d1c00b6a619963d97139772e25da444c22127c1f15141155c2ca6197fcd1716a08f001f87e1a1bde452d081c236e36e70ed8cc38ce9c515189d421630ec3829973e00603bbdecdddf8a5d24a379b34eeef37752b7a6a8016674e1240b3a8e497e190065fca2f9f11d230b99c738660cfb98e659ab33c72a3e6f347bdebee91e0659006d0021884846412987838568259876135086d20a94b714b715e2bc6718c43100ec4aab15c4e79a8acab5efcc59b21091697264a1c89726520044a969b252030092492752b5a96a2a51751ccfbc808eb18d64530c210c210c210c210c210c21000c210c210c210c210c210c211d9b27e71cc590e7f0399b2b4c9e95cde0164b004fb7e15b6f34ba07a122d85853315071091e07e1de429b58095001c42169d900e118c6238157c8c4f0aa95d2d6539251310c52b41b2e54d429d1364cc1699200d60a5418b38045495290a0a49623d791e223319a11c4165bd6694fc390d493003a4b5a6ff7c65d71e053109084f8a6b2352d65d8c95b8e7892b6d44c64add400fb88c4a98720e3a3fd87b0bda0e1bb654a65908a1c6a990935987a961a6009001bd5542544aa752a94e1482f3a995f04e0a42a4cf9fb4933d334313baa4b3a006f703322ee78ff00a5b8677083603a123d0771bec06fccd46e31d82e3d8317009ecc1ec736d1d869736666e2f942837a0de97dcf2e7f3ea460481ae5f67f94001c0cdf81243a9eed77b1d416c8676b474a1a0a92697defbd2805ec29717df00071c47d79db96bc2eecd10f7605817739f5b16603a0b718903a577ad2f602c0009a0b036ad6bcc004db12e3dfbf2e3a41f267e05f4c80c803a0e5d4e537e42900cfebb7af3e553504ef8871e8fae5efdda015d5f33ceec6dab8cf810fc6229600e82bdaa0d48b72e9dee6f5c1c65e391d3e7e1025ad7d6d60d767163e9ab98500c6f7a8da83eb4b5b9defd88b9c71e1ebefc35890a3912e7266cdf4d059ef7d001ad995c73eb7a5fa9a5f9d3c8536e427dfbf380240d1dc8d1f9b7cf2cd800500ec3cab5e7d2bb763cc03def622d8871c747f0e30de2f77c9c59acce4e7c011006b873d214b1a83bf4dc56a2dd89fa5fa60e38f2f7c3eba41c31704b1d75b920034b1b9397a5a1b0b1bf3a5aa79edcfcae29e8649033f6f07f85deee4d983dd00ae39df8e44dd9a14bd7bd6fbd3bfc8d2d5b27a61072ef737b6791274d1ce4f00caf63134f43da97a114e54adbb01718805ff00a1e9ec433bb281f9b1d4b66f00968320342f9fd8db7dfb9f2ad4e25fdfbd796712f662e1878b68e5f32cf71c00b5bc0151b52961723627903d79defe98871efc7ec6201b331b1b0b8d726e360037777177d54fe9414e543cc740473a0b57070cfa7bf6786b94403a876e9959008e474cd83b002e2f0a5791bf7a5bf1bdaa3b7615971f3f4fea22732d7c8be7007cbfd2f77b861a5ac1c052bbdcf527c8f4e5ceb6b1ad69887fbdf85bcb3d6000385c3be649666e63263cc30d338a509a54fcb9f2deb7b54907adab63ddbe8700e794058960acf864fa1278daf7b73369a6e282d7dac05c0edd2a2dbe25fefc00fca0ece18f1b87005c3b02337bb599c8b4475009f3009a5fea4d4df7a50f7c001c7bf7973ca1bda827d6c3986624b9cf8664dccd77dfbf5a9bd001cf6dbb9a00d7738f47f088de624107376b659f85bd6ee359fc8f53b7cb96d7e7d77c438e003efd883f1d5435c81e79d9b9640dc4401ce845f9d054927a57ad01f96e6a70003dfbe0626c1c870747619922e4bdc5f32ecfa3c2e29527a6d5d85cdaa6f5b50048e7bed838bf2e36f9fce0e4664db8f467fd2ec5d81f37ca005072a58d0816001f5b8ea286bb923071fd6c786479c0383906170f6d5b987e04df9b5a0763ce0097ad472b9a5c114a1b75b0b581c71f76fb888dec9dfcc68c4bbfa7036be41400bdb607ea77fc7b815e7b24e3d1f9fb1af0d625dfc1df8dec4b3373d59ce790007507ad476e9cb7aedd76bdf0716e6edef873e9c6014e48e26d91673a30cee600ef6e7ac117e7b52bbdae4006d7e7526c40def89ce19dd8e59b1e2481d72bde00e350f134f4bd8dad7db9796c48a917be21c7cbd728383fe6e46dc5800030e300d2f9885fbee4f3ebe66b4de9515e95da5c7bf0f4be7941f8bbbb8cd8e42da9000336b45bd6bbf10796f46655f0e90d4ef3a4c5a5993e5e6de4d21c16d5e09b004f5485a5d8295b6bf006da47863266e92c41252c22363a07af76efb41c376300697bb0115d8d54215f93c392b0d2dd3f0d55794a82a4d2a491ba84b4eaa57f00772775099d5122c4e9e9942d751b80f776cc9d33161c1859c8c3a670ce398f003e6608eccf9a664f4d27130582ebee7850db4d207859858461012cc2c243a300f9198765096d02aa214e2d6b578f317c6311c76be7e278a54aeaab2a0bae6200d825091fa254a425912a4cb1644b40094872c54493ac5ad4b51528b93eec340011d671ac8a618421842184218421842184218421842184218421842184218400218423d949e7335cbd34829d48e61172a9b4b9f444c0c7c13cb622619e456800a6dc41068a49521c42aadbada96d3a95b6b524e4d1d65561f5326b68aa26d200d553ac4c915121665cd96b1aa54920dc38502e952494a814920c824104120800c88ce32a9c3ff16528cfc207296a03b0721ce8a0886829a1288692e677128a0023c2a57859954e5f2920c0ad49838d88294cb16dbd10ccadaf51ec176ad49800ef718563ea93438c9099526a8b4ba2c49412c0ba9914b593082f24912674c20005314ae6229519f26a02d92b60bbdec12ae9c147871fd37200bd2a0e9faf4a00d77f5fae3b95cf1e5f58c8883f9eff009efd0d3cef4c47bebc8c21f3f9dffa0053faee712e73c9b80f7f6e1683c08af5efb73e42febd6c696c4421dba1e77a00faef4e95b8f2b625f90d74e3f6d384224dfcabe963cb634db7afc8e0e7cbdb0074e50853f53f8fca87bf5df11efdfce110053bf9f952fd683eb71cb12e7d8100c5fdf2b65089a50f6ed4a6c47ade80f2b5ab4a13fbf5f7d4c21d79d3fa914b005fa7e270249ce103cfca9d77e7f5bf95c0be2016843e9b0e57fbad3eea4fef00dfbcb843df9445b60294fb35b81d76daa2a0ef8973e7fb7d842269bfdfcb950000f4b1e783fb61ebc7c61022e091b7f4afcc74e46c6f839e3e1f2b70e10882003cf976a7ea05e80f3f960e7d1bfa7083bfca24f9935a7d074ed715fd2c7cac003efd61efdfbd614eff007b5ba8af3bf3dad839f7c3874f7c225f4f7d3a6bd700c2228395c5eb7adcefbdfad796f5dc60e5ddf9c444d39df6b01cfaf31d37e500eb63e7ed9b84223bdfcbefefa6e6b1efdfbf9064295db9fdd7d29ced4dec31002e7dfbf66f9c21f3fa9fc7cb9dafd49c1fa790f7e50f7efdfccc3a577ed5e6004fddab41b9dce2210a7dfcea6db1a13ebe789727fa9f2cf4cc7abc214dfcff00002e54b8fbeb8391ef3ebc7c610236dae7d458df6a1a6c2b7e7df073e8de1e003efc211201ebb75f5e74df98bdc01cea307e9e4df284294e9f7f7be0e7dfbf0066f9c214a7dd37fbf5c1cfbf7cbc3466112e7df3e5165baffc5949f2108eca005a7ee424fb3a00e42c6cd014c4c972c3aa410b2a527c4d4d672c12026050a50041c14402264e38ec33d2b7ba6b6f7b56a4c07bec2b0054aaec64054a9d541a00651e18a6bdc3a2aab25936909264c99808a952972d74abc69b5011f0a18ab80082e127c332386873b868c55ce27335cc3348d9d4f26117359b4c5f5c4c747c006bcb7e2625e5d2aa71c592689484a1b4268db4da50d34943684a47972b2b2a00b10aa9f5b5b5136aaaaa662a6cf9f396573262d599528f00c1290c94a404a40004800601249249726e498f5b8c68886108610861086108610861086108610800610861086108610861086108610861086108bdcd0ae3027992fe0b2c6a418d00ccd9590530f0b3cf12a2731489a242501e5b8af1cea58c7ff52eac4ca1992a0010b1114d310d2d3dd1b11dadd760c24e19b42676258602112ab9ccdc42850500800a2a53d6d34bcc2164544a49225cc9a844aa68c9955053f0add4343a8f3c00c78b8cb2b465072d667cbb9ca510d3fcaf37819e4a231095311b00f879bf12009295a997d167a1629af104c4c1c52598a8472ad4434db89281e96c3715a0c500e8e5576195726b69668744e90b4a9209485196b0fbd2a6a0280992a621135000af826212a04467a4a5402828149bb8d3a8cdf88cc6ad1efc27615dc58d3e7c00b6a1e66b5db19dbff3f31cd88bf836913ba7973b8b676cf3b4296ad2e01e5600bfadef51b107a52986f5f3b1e62d7e9c083a1b66ee20dafbfb783bc4536a8d00ad6ad4f437df9d0588e9414c0af85be973fb1d7858de2774f2cbe8e7fa9b65007b8853980453bd41ada95037bd0509a50ec6f86f68ef6cf51c35bf307d440a00798e7c78bb35837eed9052805cdc8af90dedb9a6f71d30dfb9d1816d5ce9ef00d728863efef97ae861414a0dedc8dfbec696b80296e67600b39966ea1f96b900f1e5a0d64a7e5c72219eecdf47b3daf2520d0806e6fd69d7fb6f5c40590eed00cbed6f639e510d722d6e607ce14dad5bdeb5206c2805796c6fb035b118159f00a59812399bdfa6a5f944b58dc7af51c00717e3a00ee238d3a0b81d09aef53700db6b0eb6b1ad2adfea5c9e01bc8fab886e9e593df51ab74d7d1dc4494db73e005437eb4eb5a0239589b728dff2bb78e4e05ecde475b3c3788e5e77e1f7b0780052f60481b023f1a815f2153414ef890ab5f33cc70b3393cb360e6fac1aff00005d3df0d4dad7852e7715ea0fca94bdfced526a7680b367f1e7f6faf1113bb600370481a37b667cdaeccf0a79d2b5162773f51400fafa16ff002d03dfe5c0df0099b75614f31a8e197c9f47d5f4bc4848e636b6d5e5ce95ea08bf5dac00af2600f1e5cbd8f3ce219f2be4da727be61ede5d223c3fa1dc771ca96b137a77e65b00f9fa7bb67d1c7a035d87cc7c813f530a6dcfadabd48ff77a1ad2e7b002b86f00bbf1c86839ebebd3276896cf467cf3b5b4e24b6bade1422a057e5bd0f317a800a1e56ea2e2b215cf5bbb790cb5e2f9bbd8810411e4fcb5d7c3ecf1341d39d600970799a6c7bedbed7a54d3be7e9c87303efc39da7779e9cac7abb373d1c38b00877840dfcbad2be5cef514045697eb3be7e7d3936bc35e36c9a1ba5f2bf99e0040736e99b295ee6b5da848e7cc75dac6c39528dff07e6ede9f7e8e0883797d00f2e367d723c9e2295b9e77e9734a015df7dac0ff00ceb59be058396d4ddfd700d6fd225897c86adc3c9d9b86632cc87809a8f5a0239fa1a1efe57a73c37d8f001cecfd2ee2de1a17836796bc465d6fc813d33b44d0826e763537b9f3a0e7e700714c37fc2efa64f9666f9e57b657b400f967935b3fb7c9f56b827cea37b54700c88bf5fc3a86fbe4de367f5b7be4099b36bf31caf67e797d2ef0820d01b76f00a6f7e7dee2f4186f9e5c3f7c9ef6d34b0d21ba6d95c3f9f336e3ae91201e9500f9d2d4b9a9fa52f4e430dff659f5cbd2f76d5ed13bbc48167d4db9366de5ce00c5bafe65ccf9772749e2a7d9a67101239441a14a7a36611086105696d6ea6100d86d443b1718f25b5261a0a15b7a2e25ca350ecbce14a4e0e258b61f84524c00aec4aae45152c904ae6cf5a5092c14a08961cae64e504908932d2b9d354022005a14a2c68514a412a500071b780cdcf0e8f68c5feba71813dce898ccb1a6e600372c6575a96c45cf3c6a87cc53d6527c252cada505c925af52ecb2e2a6314c00f85315110cd3b132e3e69db7ed6ebb19efb0dd9e33f0dc2c9289b58fdde21500c804864a905e8e9976f810a351310009b325a57329ce0cda82a74a1d2352ec00a3cad90e3772380244591e3a5e31a18421842184218421842184218421842100842184218421842184218421842184218421842184218422a069eea8677d2e009ba26f93a77112f515a151b2e714a8893cd5b4d8b333962d5f0f149282a42100ea222e18294b8389867bc2ea77d806d2e35b35542ab08ad994e4a819d4ea260065255245b72a69947bb9819c256c99b2dcaa4cc96b650ad13172cef2491cb4003d4647c75bc650b4838c0c879f8434a337aa1f226695fbb69223e240cb9337008a5c2a5404e1ef022014a2d0ff00814e150e4b9110f090719337caa9e93d9300ed6304c704ba4c58cbc1313532477f33ff000754ad94499156b61214777fc100ab32cef2e5ca933aa564b67caa942acaf815d431b1c8916cf23968498bbc0b004a92140a4a4d08208208374a8116208a2811cae31daa149201041058820820008391e845fa718be0ea33b1046bcb4e3a73d188022f7a75ad2bb52ff4da9b5a00a0e25c7cada8bb5ef95c7ef1275e234019af7190fae7ae626a0f7fbdbefb53000de0751e63dfbb440274e9cf37f98f7a7134a6db1a9a8fafaf2ea2a2876c4600f7a66f98fa7adf47897639916661a69a9bdf200f3b34482075b9b1a1f5a529006a5aa6a2879d2d2e3cf2e7d3ddf483f003a01ae43377d0b6bd5cc2a2e6b5b800bd6c2b6b74defcfe988de1c787ab6b9167bb41ed978f0bbb1e3e248f17893400fbdad7f21bf3a5ef7a0c4bfbfbf0f16e50e22c33f6ec4fadc5a1516a5ec69700f2ea77f3db9d307072bd9f4fbbfd20f7d2fc3c80b13a588b5b9de20106dd2d00cf901d472eff009e202874fa3073e597583bf52fa6a6d666cc33f9e71208ef006a83bf637df6e5e74df12e19df2cec73f7eb6ce04e6dab656f4e0467a3f4bc006f43f9f7a581b50f5a56869cc60fc6dd5afcc5c5b9f0d2e221ed6f7e2ef63700038dcf089b505b6a103a52c6ddba7a6f83ff004d79f56d5b5b6712e75e8f6b0082786b704bf1ccc45457d477af23cedb54ed4b79623787bbfc9f2ccf2688f000cad98e7e7d7d72692453d6f6e63aff004e5716151254071cd8d8dacfefce2500dbaf5b0e9e3e07982622c2bca95aefd2bb1dcf3f99eb538b97b0fa07b443b900bfec5b21c46be82cd0045cedccd398a6fcaa2b51cef88de1d75f0e376e0dd500b8c49eb6c98e7f2e432e5785ae6b5bd7af4a6d7b53f1ae277866e3cde1a588006e2465cb5cdce44f83409fc4da9ebcf9f4a1b9bd08c0903e5e3c3c74e39e570088f9e5c49707a8bfd98e6627c43e7b1ef5bfdf3ae20281d73cb31e1f2eb13600b793f9b66c1ae33b86d2d024585efd46d6e5fd6f534a508c4bdc0e3cbdb5d8005eefa5de1c34e40104ddf8710d623260d9c0115a5bafcf9f9f3efbe0e2f71600f2f1390e911ae9f316c86ae222a0edcfcc026a76b72dcd0529627a37869ae5009df3e5a35edc21c2de275d35e0d6c9bd61502a6b6b75b56ff9fca9ea70cefe003d72cfdeb944be5600dafe1cfc0be86fac14a4a6a545200a951240090012540049d8002e4d2d882a02e48005c92400033be797f5ca19790b390e0dfeb7035b00b1631687abfc60643c8298a946515c3e7bcd280b68a602241cb92c7bc0d94a00a3e70c78db8f520bbfcd05285bebf7ac3f0919192d7c050eaadabed6303c0c004da4c28cbc6f134ba5a44c7c3a9d6c920cfab43a6794ef5e4d2159de42e54d009b4eb118d32a108b2594ae5748eba3df21a8d2d18bed43d51cefaa537338ce0053a7a60b41588197b43e1a512a656a24312d97367dc43a424a50b7d41d8d89004a10a8c8a89713ef0f9b31fda5c6769aacd5e2f58b9ea04f73213fddd252a0009fd14f4e93b92c00c0acef4e980033a64c57c5182b98b985d45f9683a0fae600629f6343144308430843084308430843084308430843084308430843084308004308430843084308430843084308430843084308457fd2de25353b4afe1e06005f35fdfd969921272ce6053b1b02d341096c372d89f1a63e5296d29f132c4100c4265e974971e817ca9615ce766bb42da3d99dc914f55f9dc3916fe1d5c55300a4a10c13bb4f33784fa50901d089330480af8972261241ba89d3119171fe55005c786a3c0b7106322fa6bc5ce9567d30b03358d5e459fbe43265f989e6d32d0079ef745d5fc16614a512e2d150532d7ef3fdd31512f10cb106b71d6839dfbb003ddaa6cce39dd48aa9cac16b96427b8c414914cb5eeef1126bc014e52ee94700e67f2b3262d9289454a483988a896b604ee9e072f03979b1e51746dadb79b600dd696871b71295a1c6d49536b6dc48525685a4a92b4ad04292a0485050209b000c764a5495252a4a8292a01495248295254010a490e08218822c431117e3c80041f3a0e62b53534e75ade84d3befb4c4f8fcf8fb3fbc4528458efbd857a50000aedb8f2a6f6c2221426bbed717b904ec6c396f700f2e425cf137cf9c3c7df000f48920923aed7e943e84dc9a124dafcf073c4c2229514a79d2b634a0bec687007de97bd7788412907b73a03cefcb714ea49fa9a2112452fb9a1b93f89e54e400450f71424a272e07df31114edb1f3dfc469416b12280ef5e40d02221e1b585000ef4ad45abcf6db9d6a3b5c942041ad0576b5ec7aa79116f9d2a4f44204740006bcfb9371b1e56ed535d85307cefd7f784082453e77da9d69524d88f3d8505008e78f3f1e30f1e70a13437da848bd77279debb0e5e94aa1134206c4f234e9600af3aec08ee7a513839e3efd81e5088f09b5cd6b4ad474ad77af33df9db628400484d3a8ea2de5b8da95df737a5308445081cc8ad695b52bb117a9deb4b57e800842808207624d6a4d457957c85075209a91842383ab6d969c79e71b659690b0071e75c521b69a69b4953ab71c514a50da1214b5294a094a5254a2082710a520050952d6a0842415294a21294a45c9512400000e492c19cc3c7c74eb16b7a9900c5ce95e42f89809546ab3de60614a68cbf2e3adaa56c3fee83a9f8dcc4b4b9002ef77e25065d32b13689877bc6cbd0adb8db896fad768bb54d99c10cc914b3008e355c82526450281a642f777877b5e42a9f75c84aff002df9a992d6e85cb400a92a09b0ba8968b03bc780c87539793f8463a354b893d4ed542fc14c26bfb80072dbb548cb59794ec0c03ad1416d489944870c74d8389357598d885c0177fc00c62061c8484f41ed2f685b47b4dbf267d57e470f5381875015c990a49052450044cde33aab785d689d30c8def891265d80c39939732c4b27fca32f1e3a676b005808a038e0d16a184218421842184218421842184218421842184218421842001842184218421842184218421842184218421842184218421842184218422a00b69f6b6ea7698a90de52cd51d0d2d4ac297228ef04d244e0f7bef9d4a6591c0097988454428a83f132e10718b4a9548949a11c9b02db0da2d9c2061789ce97004e082aa29cd5144a1bdbca029a705a251597df9923ba9c4123bc117113568f00d2a2dc0dc791c9f8863ce2f772371e92a880c426a2e5088973ca71b6dd9ce50057446c0a7de2fc2a7dd93cc5f6e36198870438e08798cd221680b2cc3adc080065cee1c1bb6ca75ee4ac7b0a5c8515252aaac355dec9f88b15ae96a16274b400205d5ddd4542ca5ca259504a15929aa192d2dcd39791bfa9e9178592f58b4c0035012dff0009e74924ce29d5942258e44feee9c95253e220496669839a29000013475308a65652b08717e0553b5309dadd9dc7377f8662f475130b84d3a966009eac901cff00c12a44aa929e0a128a0b59458919099885fe9503cb23e458fa00454bfbe9faf97ad4539721de2d73cf22083e1623ab3ead15c4d37a5fb8a79500ebb53a91c879e20ababfa1e47c33b67930844115a76a1febcc6e29ebe7890b003cac322c2eda6567d33e1c90a52d4f976f2e8310559dcb599ada5fdb962d63000852bbf98dcd4da83b7e1d6f51890a3a970ceed9756b0beac7d610a11f8f7b000bfe17039f2ad711bfe16d1b870be4798b42007adbaf9fe1bf96f6c48517cf00803a338bbb8670438f2e410a0a76bf4ad697e87d7957e6dec803e39f99278d00ddb85b48400de94b7f41f98c0aee7e97bb5b523a8bf89bc226961d0d69e9f700e5f5c46f13adb91be7aeb60e6c1b9306088a6ff2a83bf2ad773e7e5db13bfc00386bc79b79db98376644d3b6d734b50d79fafcef5ed1be78e990e3f26b66c400876be7088a6e2ffdaa6a08f3bd0d08a624298dcb86f1761e1c9adabdf344d000f4a7d3e96db7b0b56f6c37af9fa72d5cdaf7001d58b42299e73d62d31d3f4b00bfc599d2472d89654942e58dc5098ce42d40100c965a98b9a04dd254e2a11200d3614952d69490a3c7f16dadd9dc0c2bf89e2d494f31040553a6677f56e45b00fe074fded484f15195b81c152859e854c423f5280d1b33e41cfa459e67ae3d002590e5e84d39ca11131750e3adb739cd4efc1c1292dabc0879993cb9f5c64400b1102ae37f1331963edb7e0f7b0c9716b6d9eaac6bb6ca746fcbc030b5cf580052922ab1357752484964ad14b216a9b312bba815d4532c27777e5ef129463a00aa80b2124f355867c03921b983ca2c8f5035bb53b5356b466ccd71f132e5290045123812995c89b4fbc2eb6954b200310f16a64d12d44cc04646a50901512a003527a7b1cdb0da2da22a189e273e64824b51493f97a248dede4834f277513400a324cc9fdece00006618c55cc5aff52891c321e4387137e714a71c6628861000861086108610861086108610861086108610861086108610861086108610860010861086108610861086108610861086108610861086108610861086108610008abb94f5eb5872555120cff3f4439425b103338944fe5eda10544087809eb70031858424abf9d708d30e3802438a525090394619b6bb558438a2c6eb82080900126a660ad90909723bb935a9a89528dee6525054000a240005c4cd989c965b0081b8f00a76f08b8ecb5c79ea04bd30ed668ca59673236ca128762205d8ecbd00308af0a0243af3a153697b6f29c1e373e1a54c30412db70ed0a1c73dc3fb6800c724042711c330faf09002972553a867cc64b6f2d4f55202cabe257774e84500d9284e7179354b0dbc94a9b321c13cce61f8b003908aef22e3c74c6356cb5300dcb39be44a74a12e4432d4b273030dfcb552dd71a8f838f5b6957f282c4b9e00715fcaaf749b84f32a3ed9f67a72909acc3f14a32a202a62114f55265b8b95002933e54e2906c372429445f74651745520fea4a87911f43e9157655c54e82400ddf661d8d41828475f250813595cfa54ca0a4151f7f193095c3c143a4f84d1004f453682a2129512a485728a6ed2762aa968968c6e54a52c903f334d594c80004027e39b3e9e5c940b58ae6004b005c806b13e51b6ff009850f521a2a5416a009e98cc105503a8d9163535093f0d9b640f7849a1f0a83730514280503e05040090390b9c6fe56d26cecf0f271ec1a6819f778a512d89d084cf241b8b163173007d0725a4ff00d21f78ed3073893cc9087a5d3696c7b2b00a1c828f858a428100b85256cbae2555a920a54410450d2b8d94aaba59e90a91534f3926e152a74b0098920e44142882fc8c4820e441e8447b21700836aee0efc8936a120dc1de9d00f19113125200b904022f5a0a0f96c493f99c090332075847ac8d9c49e5cdad00d984d65900d2012b76323a1615b6c0bff3ade75b4a452b535141734a9ae3cd00aba59092b9f534f25290ea54d9d2e5a40cdc95a92006d4988240cc81d4b4750068cd53d30970f147ea2e448304803e2b374819f11153448723d2a5abc35252009aaadb1071ad9bb49b3b203cec7b06940e5de629448721ec02a7824d8d8398008df40cd691ff00487de29a4d78aad0394bcfc3bfa810516f30bf0a84aa553f009ab2b34068cc6404a9f827d14200718895b60d478c10a034153da4ec552ad60085e372a6a9058fe5a9ab6a504b3fc1364d32e4ac5f344c507d6c5a833e502d00be3c0288f3008f6d9c5229df1e3a6304b886a45963384f16d296869f886a5700288189f0d7c0e32e391f1b1c869c3ce225acbc80492cd7f94f17aced9f67a40095a68f0fc52b0a49095ad34f4b266364a4a953a6ce0927fcf4e85017dc394500b354819051e7603e6fe9142732f1e7a83304443396329659cb8dbc8521a88800f763f30cc617c4823deb2f15ca65eb792e1f7883112a7d8b04b90ee5ce386e0021db46393c2d38761987d0254084ae72a7574f96e923792b7a590a5853293b00f4cb40665215169554b3fa5294f57247c87a45b866cd79d60ceb444ff3fcfd00c87085b660a5912890cbdc42ca5444440489b97424590523c0b8b69f71b05400942d295281e0589edaed562ec2b71bae5200293269e60a290a0483fde48a2400d3ca9a41163352b526e12402445954d98acd6785be117e212cfe3148f1c5e200dc30843084308430843084308430843084308430843084308430843084308400308430847fffd900000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000';
+export default data;
diff --git a/ui/block/BlockCeloEpochTag.tsx b/ui/block/BlockCeloEpochTag.tsx
new file mode 100644
index 0000000000..12a84f1970
--- /dev/null
+++ b/ui/block/BlockCeloEpochTag.tsx
@@ -0,0 +1,72 @@
+import { Tag, Tooltip, useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+import type { BlockQuery } from './useBlockQuery';
+
+interface Props {
+  blockQuery: BlockQuery;
+}
+
+const BlockCeloEpochTag = ({ blockQuery }: Props) => {
+  // have to implement controlled tooltip because of the issue - https://github.com/chakra-ui/chakra-ui/issues/7107
+  const { isOpen, onOpen, onToggle, onClose } = useDisclosure();
+
+  if (!blockQuery.data?.celo) {
+    return null;
+  }
+
+  if (!blockQuery.data.celo.is_epoch_block) {
+    const celoConfig = config.features.celo;
+    const epochBlockNumber = celoConfig.isEnabled && celoConfig.L2UpgradeBlock && blockQuery.data.height <= celoConfig.L2UpgradeBlock ?
+      blockQuery.data.celo.epoch_number * celoConfig.BLOCKS_PER_EPOCH :
+      undefined;
+    const tag = (
+      <Tag
+        colorScheme={ epochBlockNumber ? 'gray-blue' : 'gray' }
+        onClick={ epochBlockNumber ? undefined : onToggle }
+        onMouseEnter={ onOpen }
+        onMouseLeave={ onClose }
+      >
+        Epoch #{ blockQuery.data.celo.epoch_number }
+      </Tag>
+    );
+    const content = epochBlockNumber ? (
+      <LinkInternal href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(epochBlockNumber) } }) }>
+        { tag }
+      </LinkInternal>
+    ) : tag;
+
+    return (
+      <Tooltip
+        label="Displays the epoch this block belongs to before the epoch is finalized"
+        maxW="280px"
+        textAlign="center"
+        isOpen={ isOpen }
+        onClose={ onClose }
+      >
+        { content }
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Tooltip
+      label="Displays the epoch finalized by this block"
+      maxW="280px"
+      textAlign="center"
+      isOpen={ isOpen }
+      onClose={ onClose }
+    >
+      <Tag bgColor="celo" color="blackAlpha.800" onClick={ onToggle } onMouseEnter={ onOpen } onMouseLeave={ onClose }>
+        Finalized epoch #{ blockQuery.data.celo.epoch_number }
+      </Tag>
+    </Tooltip>
+  );
+};
+
+export default React.memo(BlockCeloEpochTag);
diff --git a/ui/block/BlockDetails.pw.tsx b/ui/block/BlockDetails.pw.tsx
index a38f551041..a10a06ef5a 100644
--- a/ui/block/BlockDetails.pw.tsx
+++ b/ui/block/BlockDetails.pw.tsx
@@ -1,10 +1,8 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as blockMock from 'mocks/blocks/block';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import BlockDetails from './BlockDetails';
 import type { BlockQuery } from './useBlockQuery';
@@ -15,59 +13,56 @@ const hooksConfig = {
   },
 };
 
-test('regular block +@mobile +@dark-mode', async({ mount, page }) => {
+test('regular block +@mobile +@dark-mode', async({ render, page }) => {
   const query = {
     data: blockMock.base,
     isPending: false,
   } as BlockQuery;
 
-  const component = await mount(
-    <TestApp>
-      <BlockDetails query={ query }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const component = await render(<BlockDetails query={ query }/>, { hooksConfig });
 
   await page.getByText('View details').click();
 
   await expect(component).toHaveScreenshot();
 });
 
-test('genesis block', async({ mount, page }) => {
+test('genesis block', async({ render, page }) => {
   const query = {
     data: blockMock.genesis,
     isPending: false,
   } as BlockQuery;
 
-  const component = await mount(
-    <TestApp>
-      <BlockDetails query={ query }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const component = await render(<BlockDetails query={ query }/>, { hooksConfig });
 
   await page.getByText('View details').click();
 
   await expect(component).toHaveScreenshot();
 });
 
-const customFieldsTest = test.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.viewsEnvs.block.hiddenFields) as any,
+test('with blob txs', async({ render, page, mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED', 'true' ],
+  ]);
+  const query = {
+    data: blockMock.withBlobTxs,
+    isPending: false,
+  } as BlockQuery;
+
+  const component = await render(<BlockDetails query={ query }/>, { hooksConfig });
+
+  await page.getByText('View details').click();
+
+  await expect(component).toHaveScreenshot();
 });
 
-customFieldsTest('rootstock custom fields', async({ mount, page }) => {
+test('rootstock custom fields', async({ render, page, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.blockHiddenFields);
   const query = {
     data: blockMock.rootstock,
     isPending: false,
   } as BlockQuery;
 
-  const component = await mount(
-    <TestApp>
-      <BlockDetails query={ query }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const component = await render(<BlockDetails query={ query }/>, { hooksConfig });
 
   await page.getByText('View details').click();
 
diff --git a/ui/block/BlockDetails.tsx b/ui/block/BlockDetails.tsx
index 55add205d4..fd65bcee6c 100644
--- a/ui/block/BlockDetails.tsx
+++ b/ui/block/BlockDetails.tsx
@@ -1,48 +1,59 @@
-import { Grid, GridItem, Text, Link, Box, Tooltip, useColorModeValue, Skeleton } from '@chakra-ui/react';
+import { Grid, GridItem, Text, Link, Box, Tooltip, Skeleton } from '@chakra-ui/react';
 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 { ZKSYNC_L2_TX_BATCH_STATUSES } from 'types/api/zkSyncL2';
+
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import getBlockReward from 'lib/block/getBlockReward';
 import { GWEI, WEI, WEI_IN_GWEI, ZERO } from 'lib/consts';
 import { space } from 'lib/html-entities';
+import getNetworkValidationActionText from 'lib/networks/getNetworkValidationActionText';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
+import * as arbitrum from 'lib/rollups/arbitrum';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { currencyUnits } from 'lib/units';
+import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA';
+import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
 import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
+import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import PrevNext from 'ui/shared/PrevNext';
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
-import TextSeparator from 'ui/shared/TextSeparator';
+import StatusTag from 'ui/shared/statusTag/StatusTag';
 import Utilization from 'ui/shared/Utilization/Utilization';
+import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps';
+import ZkSyncL2TxnBatchHashesInfo from 'ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo';
 
+import BlockDetailsBaseFeeCelo from './details/BlockDetailsBaseFeeCelo';
+import BlockDetailsBlobInfo from './details/BlockDetailsBlobInfo';
+import BlockDetailsZilliqaQuorumCertificate from './details/BlockDetailsZilliqaQuorumCertificate';
 import type { BlockQuery } from './useBlockQuery';
 
 interface Props {
   query: BlockQuery;
 }
 
-const isRollup = config.features.optimisticRollup.isEnabled || config.features.zkEvmRollup.isEnabled;
+const rollupFeature = config.features.rollup;
 
 const BlockDetails = ({ query }: Props) => {
   const [ isExpanded, setIsExpanded ] = React.useState(false);
   const router = useRouter();
   const heightOrHash = getQueryParamString(router.query.height_or_hash);
 
-  const separatorColor = useColorModeValue('gray.200', 'gray.700');
-
   const { data, isPlaceholderData } = query;
 
   const handleCutClick = React.useCallback(() => {
@@ -73,7 +84,7 @@ const BlockDetails = ({ query }: Props) => {
   const validatorTitle = getNetworkValidatorTitle();
 
   const rewardBreakDown = (() => {
-    if (isRollup || totalReward.isEqualTo(ZERO) || txFees.isEqualTo(ZERO) || burntFees.isEqualTo(ZERO)) {
+    if (rollupFeature.isEnabled || totalReward.isEqualTo(ZERO) || txFees.isEqualTo(ZERO) || burntFees.isEqualTo(ZERO)) {
       return null;
     }
 
@@ -106,12 +117,31 @@ const BlockDetails = ({ query }: Props) => {
     );
   })();
 
-  const verificationTitle = (() => {
-    if (config.features.zkEvmRollup.isEnabled) {
-      return 'Sequenced by';
-    }
+  const verificationTitle = `${ capitalize(getNetworkValidationActionText()) } by`;
 
-    return config.chain.verificationType === 'validation' ? 'Validated by' : 'Mined by';
+  const txsNum = (() => {
+    const blockTxsNum = (
+      <LinkInternal href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: heightOrHash, tab: 'txs' } }) }>
+        { data.transaction_count } txn{ data.transaction_count === 1 ? '' : 's' }
+      </LinkInternal>
+    );
+
+    const blockBlobTxsNum = (config.features.dataAvailability.isEnabled && data.blob_tx_count) ? (
+      <>
+        <span> including </span>
+        <LinkInternal href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: heightOrHash, tab: 'blob_txs' } }) }>
+          { data.blob_tx_count } blob txn{ data.blob_tx_count === 1 ? '' : 's' }
+        </LinkInternal>
+      </>
+    ) : null;
+
+    return (
+      <>
+        { blockTxsNum }
+        { blockBlobTxsNum }
+        <span> in this block</span>
+      </>
+    );
   })();
 
   const blockTypeLabel = (() => {
@@ -132,11 +162,13 @@ const BlockDetails = ({ query }: Props) => {
       templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
       overflow="hidden"
     >
-      <DetailsInfoItem
-        title={ `${ blockTypeLabel } height` }
+      <DetailsInfoItem.Label
         hint="The block height of a particular block is defined as the number of blocks preceding it in the blockchain"
         isLoading={ isPlaceholderData }
       >
+        { blockTypeLabel } height
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData }>
           { data.height }
         </Skeleton>
@@ -149,199 +181,377 @@ const BlockDetails = ({ query }: Props) => {
           isPrevDisabled={ data.height === 0 }
           isLoading={ isPlaceholderData }
         />
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Size"
+      </DetailsInfoItem.Value>
+
+      { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && (
+        <>
+          <DetailsInfoItem.Label
+            hint="The most recent L1 block height as of this L2 block"
+            isLoading={ isPlaceholderData }
+          >
+            L1 block height
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <BlockEntityL1 isLoading={ isPlaceholderData } number={ data.arbitrum.l1_block_height }/>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && !config.UI.views.block.hiddenFields?.batch && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Batch number"
+            isLoading={ isPlaceholderData }
+          >
+            Batch
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            { data.arbitrum.batch_number ?
+              <BatchEntityL2 isLoading={ isPlaceholderData } number={ data.arbitrum.batch_number }/> :
+              <Skeleton isLoaded={ !isPlaceholderData }>Pending</Skeleton> }
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { rollupFeature.isEnabled && rollupFeature.type === 'optimistic' && data.optimism && !config.UI.views.block.hiddenFields?.batch && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Batch number"
+            isLoading={ isPlaceholderData }
+          >
+            Batch
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value columnGap={ 3 }>
+            { data.optimism.internal_id ?
+              <BatchEntityL2 isLoading={ isPlaceholderData } number={ data.optimism.internal_id }/> :
+              <Skeleton isLoaded={ !isPlaceholderData }>Pending</Skeleton> }
+            { data.optimism.batch_data_container && (
+              <OptimisticL2TxnBatchDA
+                container={ data.optimism.batch_data_container }
+                isLoading={ isPlaceholderData }
+              />
+            ) }
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      <DetailsInfoItem.Label
         hint="Size of the block in bytes"
         isLoading={ isPlaceholderData }
       >
+        Size
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData }>
           { data.size.toLocaleString() }
         </Skeleton>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Timestamp"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Date & time at which block was produced."
         isLoading={ isPlaceholderData }
       >
+        Timestamp
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <DetailsTimestamp timestamp={ data.timestamp } isLoading={ isPlaceholderData }/>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Transactions"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="The number of transactions in the block"
         isLoading={ isPlaceholderData }
       >
+        Transactions
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData }>
-          <LinkInternal href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: heightOrHash, tab: 'txs' } }) }>
-            { data.tx_count } transaction{ data.tx_count === 1 ? '' : 's' }
-          </LinkInternal>
+          { txsNum }
         </Skeleton>
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
+
       { config.features.beaconChain.isEnabled && Boolean(data.withdrawals_count) && (
-        <DetailsInfoItem
-          title="Withdrawals"
-          hint="The number of beacon withdrawals in the block"
-          isLoading={ isPlaceholderData }
-        >
-          <Skeleton isLoaded={ !isPlaceholderData }>
-            <LinkInternal href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: heightOrHash, tab: 'withdrawals' } }) }>
-              { data.withdrawals_count } withdrawal{ data.withdrawals_count === 1 ? '' : 's' }
-            </LinkInternal>
-          </Skeleton>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="The number of beacon withdrawals in the block"
+            isLoading={ isPlaceholderData }
+          >
+            Withdrawals
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !isPlaceholderData }>
+              <LinkInternal href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: heightOrHash, tab: 'withdrawals' } }) }>
+                { data.withdrawals_count } withdrawal{ data.withdrawals_count === 1 ? '' : 's' }
+              </LinkInternal>
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && data.zksync && !config.UI.views.block.hiddenFields?.batch && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Batch number"
+            isLoading={ isPlaceholderData }
+          >
+            Batch
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            { data.zksync.batch_number ?
+              <BatchEntityL2 isLoading={ isPlaceholderData } number={ data.zksync.batch_number }/> :
+              <Skeleton isLoaded={ !isPlaceholderData }>Pending</Skeleton> }
+          </DetailsInfoItem.Value>
+        </>
       ) }
+      { !config.UI.views.block.hiddenFields?.L1_status && rollupFeature.isEnabled &&
+        ((rollupFeature.type === 'zkSync' && data.zksync) || (rollupFeature.type === 'arbitrum' && data.arbitrum)) &&
+      (
+        <>
+          <DetailsInfoItem.Label
+            hint="Status is the short interpretation of the batch lifecycle"
+            isLoading={ isPlaceholderData }
+          >
+            Status
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            { rollupFeature.type === 'zkSync' && data.zksync &&
+              <VerificationSteps steps={ ZKSYNC_L2_TX_BATCH_STATUSES } currentStep={ data.zksync.status } isLoading={ isPlaceholderData }/> }
+            { rollupFeature.type === 'arbitrum' && data.arbitrum && (
+              <VerificationSteps
+                steps={ arbitrum.verificationSteps }
+                currentStep={ arbitrum.VERIFICATION_STEPS_MAP[data.arbitrum.status] }
+                currentStepPending={ arbitrum.getVerificationStepStatus(data.arbitrum) === 'pending' }
+                isLoading={ isPlaceholderData }
+              />
+            ) }
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
       { !config.UI.views.block.hiddenFields?.miner && (
-        <DetailsInfoItem
-          title={ verificationTitle }
-          hint="A block producer who successfully included the block onto the blockchain"
-          columnGap={ 1 }
-          isLoading={ isPlaceholderData }
-        >
-          <AddressEntity
-            address={ data.miner }
+        <>
+          <DetailsInfoItem.Label
+            hint="A block producer who successfully included the block onto the blockchain"
             isLoading={ isPlaceholderData }
-          />
-          { /* api doesn't return the block processing time yet */ }
-          { /* <Text>{ dayjs.duration(block.minedIn, 'second').humanize(true) }</Text> */ }
-        </DetailsInfoItem>
+          >
+            { verificationTitle }
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <AddressEntity
+              address={ data.miner }
+              isLoading={ isPlaceholderData }
+            />
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' &&
+        (data.arbitrum?.commitment_transaction.hash || data.arbitrum?.confirmation_transaction.hash) &&
+      (
+        <>
+          <DetailsInfoItemDivider/>
+          { data.arbitrum?.commitment_transaction.hash && (
+            <>
+              <DetailsInfoItem.Label
+                hint="L1 transaction containing this batch commitment"
+                isLoading={ isPlaceholderData }
+              >
+                Commitment tx
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <TxEntityL1 hash={ data.arbitrum?.commitment_transaction.hash } isLoading={ isPlaceholderData }/>
+                { data.arbitrum?.commitment_transaction.status === 'finalized' && <StatusTag type="ok" text="Finalized" ml={ 2 }/> }
+              </DetailsInfoItem.Value>
+            </>
+          ) }
+          { data.arbitrum?.confirmation_transaction.hash && (
+            <>
+              <DetailsInfoItem.Label
+                hint="L1 transaction containing confirmation of this batch"
+                isLoading={ isPlaceholderData }
+              >
+                Confirmation tx
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <TxEntityL1 hash={ data.arbitrum?.confirmation_transaction.hash } isLoading={ isPlaceholderData }/>
+                { data.arbitrum?.commitment_transaction.status === 'finalized' && <StatusTag type="ok" text="Finalized" ml={ 2 }/> }
+              </DetailsInfoItem.Value>
+            </>
+          ) }
+        </>
       ) }
-      { !isRollup && !totalReward.isEqualTo(ZERO) && !config.UI.views.block.hiddenFields?.total_reward && (
-        <DetailsInfoItem
-          title="Block reward"
-          hint={
-            `For each block, the ${ validatorTitle } is rewarded with a finite amount of ${ config.chain.currency.symbol || 'native token' } 
+
+      { !rollupFeature.isEnabled && !totalReward.isEqualTo(ZERO) && !config.UI.views.block.hiddenFields?.total_reward && (
+        <>
+          <DetailsInfoItem.Label
+            hint={
+              `For each block, the ${ validatorTitle } is rewarded with a finite amount of ${ config.chain.currency.symbol || 'native token' } 
           on top of the fees paid for all transactions in the block`
-          }
-          columnGap={ 1 }
-          isLoading={ isPlaceholderData }
-        >
-          <Skeleton isLoaded={ !isPlaceholderData }>
-            { totalReward.dividedBy(WEI).toFixed() } { currencyUnits.ether }
-          </Skeleton>
-          { rewardBreakDown }
-        </DetailsInfoItem>
+            }
+            isLoading={ isPlaceholderData }
+          >
+            Block reward
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value columnGap={ 1 }>
+            <Skeleton isLoaded={ !isPlaceholderData }>
+              { totalReward.dividedBy(WEI).toFixed() } { currencyUnits.ether }
+            </Skeleton>
+            { rewardBreakDown }
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       { data.rewards
         ?.filter(({ type }) => type !== 'Validator Reward' && type !== 'Miner Reward')
         .map(({ type, reward }) => (
-          <DetailsInfoItem
-            key={ type }
-            title={ type }
-            // 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() } { currencyUnits.ether }
-          </DetailsInfoItem>
+          <React.Fragment key={ type }>
+            <DetailsInfoItem.Label
+              hint={ `Amount of distributed reward. ${ capitalize(validatorTitle) }s receive a static block reward + Tx fees + uncle fees` }
+            >
+              { type }
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value>
+              { BigNumber(reward).dividedBy(WEI).toFixed() } { currencyUnits.ether }
+            </DetailsInfoItem.Value>
+          </React.Fragment>
         ))
       }
 
+      { typeof data.zilliqa?.view === 'number' && (
+        <>
+          <DetailsInfoItem.Label
+            hint="The iteration of the consensus round in which the block was proposed"
+            isLoading={ isPlaceholderData }
+          >
+            View
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !isPlaceholderData }>
+              { data.zilliqa.view }
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
       <DetailsInfoItemDivider/>
 
-      <DetailsInfoItem
-        title="Gas used"
+      { data.celo?.base_fee && <BlockDetailsBaseFeeCelo data={ data.celo.base_fee }/> }
+
+      <DetailsInfoItem.Label
         hint="The total gas amount used in the block and its percentage of gas filled in the block"
         isLoading={ isPlaceholderData }
       >
+        Gas used
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData }>
           { BigNumber(data.gas_used || 0).toFormat() }
         </Skeleton>
-        <Utilization
-          ml={ 4 }
-          colorScheme="gray"
-          value={ BigNumber(data.gas_used || 0).dividedBy(BigNumber(data.gas_limit)).toNumber() }
+        <BlockGasUsed
+          gasUsed={ data.gas_used }
+          gasLimit={ data.gas_limit }
           isLoading={ isPlaceholderData }
+          ml={ 4 }
+          gasTarget={ data.gas_target_percentage }
         />
-        { data.gas_target_percentage && (
-          <>
-            <TextSeparator color={ separatorColor } mx={ 1 }/>
-            <GasUsedToTargetRatio value={ data.gas_target_percentage } isLoading={ isPlaceholderData }/>
-          </>
-        ) }
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Gas limit"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Total gas limit provided by all transactions in the block"
         isLoading={ isPlaceholderData }
       >
+        Gas limit
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData }>
           { BigNumber(data.gas_limit).toFormat() }
         </Skeleton>
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
+
       { data.minimum_gas_price && (
-        <DetailsInfoItem
-          title="Minimum gas price"
-          hint="The minimum gas price a transaction should have in order to be included in this block"
-          isLoading={ isPlaceholderData }
-        >
-          <Skeleton isLoaded={ !isPlaceholderData }>
-            { BigNumber(data.minimum_gas_price).dividedBy(GWEI).toFormat() } { currencyUnits.gwei }
-          </Skeleton>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="The minimum gas price a transaction should have in order to be included in this block"
+            isLoading={ isPlaceholderData }
+          >
+            Minimum gas price
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !isPlaceholderData }>
+              { BigNumber(data.minimum_gas_price).dividedBy(GWEI).toFormat() } { currencyUnits.gwei }
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       { data.base_fee_per_gas && (
-        <DetailsInfoItem
-          title="Base fee per gas"
-          hint="Minimum fee required per unit of gas. Fee adjusts based on network congestion"
-          isLoading={ isPlaceholderData }
-        >
-          { isPlaceholderData ? (
-            <Skeleton isLoaded={ !isPlaceholderData } h="20px" maxW="380px" w="100%"/>
-          ) : (
-            <>
-              <Text>{ BigNumber(data.base_fee_per_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text>
-              <Text variant="secondary" whiteSpace="pre">
-                { space }({ BigNumber(data.base_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })
-              </Text>
-            </>
-          ) }
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Minimum fee required per unit of gas. Fee adjusts based on network congestion"
+            isLoading={ isPlaceholderData }
+          >
+            Base fee per gas
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            { isPlaceholderData ? (
+              <Skeleton isLoaded={ !isPlaceholderData } h="20px" maxW="380px" w="100%"/>
+            ) : (
+              <>
+                <Text>{ BigNumber(data.base_fee_per_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text>
+                <Text variant="secondary" whiteSpace="pre">
+                  { space }({ BigNumber(data.base_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })
+                </Text>
+              </>
+            ) }
+          </DetailsInfoItem.Value>
+        </>
       ) }
-      { !config.UI.views.block.hiddenFields?.burnt_fees && !burntFees.isEqualTo(ZERO) && (
-        <DetailsInfoItem
-          title="Burnt fees"
-          hint={
-            `Amount of ${ config.chain.currency.symbol || 'native token' } burned from transactions included in the block.
 
-          Equals Block Base Fee per Gas * Gas Used`
-          }
-          isLoading={ isPlaceholderData }
-        >
-          <IconSvg name="flame" boxSize={ 5 } color="gray.500" isLoading={ isPlaceholderData }/>
-          <Skeleton isLoaded={ !isPlaceholderData } ml={ 2 }>
-            { burntFees.dividedBy(WEI).toFixed() } { currencyUnits.ether }
-          </Skeleton>
-          { !txFees.isEqualTo(ZERO) && (
-            <Tooltip label="Burnt fees / Txn fees * 100%">
-              <Box>
-                <Utilization
-                  ml={ 4 }
-                  value={ burntFees.dividedBy(txFees).toNumber() }
-                  isLoading={ isPlaceholderData }
-                />
-              </Box>
-            </Tooltip>
-          ) }
-        </DetailsInfoItem>
+      { !config.UI.views.block.hiddenFields?.burnt_fees && !burntFees.isEqualTo(ZERO) && (
+        <>
+          <DetailsInfoItem.Label
+            hint={
+              `Amount of ${ config.chain.currency.symbol || 'native token' } burned from transactions included in the block. 
+              Equals Block Base Fee per Gas * Gas Used`
+            }
+            isLoading={ isPlaceholderData }
+          >
+            Burnt fees
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <IconSvg name="flame" boxSize={ 5 } color="gray.500" isLoading={ isPlaceholderData }/>
+            <Skeleton isLoaded={ !isPlaceholderData } ml={ 2 }>
+              { burntFees.dividedBy(WEI).toFixed() } { currencyUnits.ether }
+            </Skeleton>
+            { !txFees.isEqualTo(ZERO) && (
+              <Tooltip label="Burnt fees / Txn fees * 100%">
+                <Box>
+                  <Utilization
+                    ml={ 4 }
+                    value={ burntFees.dividedBy(txFees).toNumber() }
+                    isLoading={ isPlaceholderData }
+                  />
+                </Box>
+              </Tooltip>
+            ) }
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       { data.priority_fee !== null && BigNumber(data.priority_fee).gt(ZERO) && (
-        <DetailsInfoItem
-          title="Priority fee / Tip"
-          hint="User-defined tips sent to validator for transaction priority/inclusion"
-          isLoading={ isPlaceholderData }
-        >
-          <Skeleton isLoaded={ !isPlaceholderData }>
-            { BigNumber(data.priority_fee).dividedBy(WEI).toFixed() } { currencyUnits.ether }
-          </Skeleton>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="User-defined tips sent to validator for transaction priority/inclusion"
+            isLoading={ isPlaceholderData }
+          >
+            Priority fee / Tip
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !isPlaceholderData }>
+              { BigNumber(data.priority_fee).dividedBy(WEI).toFixed() } { currencyUnits.ether }
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
       ) }
-      { /* api doesn't support extra data yet */ }
-      { /* <DetailsInfoItem
-        title="Extra data"
-        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>
-      </DetailsInfoItem> */ }
 
       { /* CUT */ }
       <GridItem colSpan={{ base: undefined, lg: 2 }}>
@@ -364,122 +574,201 @@ const BlockDetails = ({ query }: Props) => {
         <>
           <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
 
+          { rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && data.zksync &&
+            <ZkSyncL2TxnBatchHashesInfo data={ data.zksync } isLoading={ isPlaceholderData }/> }
+
+          { !isPlaceholderData && <BlockDetailsBlobInfo data={ data }/> }
+
           { data.bitcoin_merged_mining_header && (
-            <DetailsInfoItem
-              title="Bitcoin merged mining header"
-              hint="Merged-mining field: Bitcoin header"
-              flexWrap="nowrap"
-              alignSelf="flex-start"
-            >
-              <Box whiteSpace="nowrap" overflow="hidden">
-                <HashStringShortenDynamic hash={ data.bitcoin_merged_mining_header }/>
-              </Box>
-              <CopyToClipboard text={ data.bitcoin_merged_mining_header }/>
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="Merged-mining field: Bitcoin header"
+              >
+                Bitcoin merged mining header
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value
+                flexWrap="nowrap"
+                alignSelf="flex-start"
+              >
+                <Box whiteSpace="nowrap" overflow="hidden">
+                  <HashStringShortenDynamic hash={ data.bitcoin_merged_mining_header }/>
+                </Box>
+                <CopyToClipboard text={ data.bitcoin_merged_mining_header }/>
+              </DetailsInfoItem.Value>
+            </>
           ) }
+
           { data.bitcoin_merged_mining_coinbase_transaction && (
-            <DetailsInfoItem
-              title="Bitcoin merged mining coinbase transaction"
-              hint="Merged-mining field: Coinbase transaction"
-            >
-              <RawDataSnippet
-                data={ data.bitcoin_merged_mining_coinbase_transaction }
-                isLoading={ isPlaceholderData }
-                showCopy={ false }
-                textareaMaxHeight="100px"
-              />
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="Merged-mining field: Coinbase transaction"
+              >
+                Bitcoin merged mining coinbase transaction
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <RawDataSnippet
+                  data={ data.bitcoin_merged_mining_coinbase_transaction }
+                  isLoading={ isPlaceholderData }
+                  showCopy={ false }
+                  textareaMaxHeight="100px"
+                />
+              </DetailsInfoItem.Value>
+            </>
           ) }
+
           { data.bitcoin_merged_mining_merkle_proof && (
-            <DetailsInfoItem
-              title="Bitcoin merged mining Merkle proof"
-              hint="Merged-mining field: Merkle proof"
-            >
-              <RawDataSnippet
-                data={ data.bitcoin_merged_mining_merkle_proof }
-                isLoading={ isPlaceholderData }
-                showCopy={ false }
-                textareaMaxHeight="100px"
-              />
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="Merged-mining field: Merkle proof"
+              >
+                Bitcoin merged mining Merkle proof
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <RawDataSnippet
+                  data={ data.bitcoin_merged_mining_merkle_proof }
+                  isLoading={ isPlaceholderData }
+                  showCopy={ false }
+                  textareaMaxHeight="100px"
+                />
+              </DetailsInfoItem.Value>
+            </>
           ) }
+
           { data.hash_for_merged_mining && (
-            <DetailsInfoItem
-              title="Hash for merged mining"
-              hint="Merged-mining field: Rootstock block header hash"
-              flexWrap="nowrap"
-              alignSelf="flex-start"
-            >
-              <Box whiteSpace="nowrap" overflow="hidden">
-                <HashStringShortenDynamic hash={ data.hash_for_merged_mining }/>
-              </Box>
-              <CopyToClipboard text={ data.hash_for_merged_mining }/>
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="Merged-mining field: Rootstock block header hash"
+              >
+                Hash for merged mining
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value
+                flexWrap="nowrap"
+                alignSelf="flex-start"
+              >
+                <Box whiteSpace="nowrap" overflow="hidden">
+                  <HashStringShortenDynamic hash={ data.hash_for_merged_mining }/>
+                </Box>
+                <CopyToClipboard text={ data.hash_for_merged_mining }/>
+              </DetailsInfoItem.Value>
+            </>
           ) }
 
-          <DetailsInfoItem
-            title="Difficulty"
+          <DetailsInfoItem.Label
             hint={ `Block difficulty for ${ validatorTitle }, used to calibrate block generation time` }
           >
-            <Box whiteSpace="nowrap" overflow="hidden">
-              <HashStringShortenDynamic hash={ BigNumber(data.difficulty).toFormat() }/>
-            </Box>
-          </DetailsInfoItem>
+            Difficulty
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value overflow="hidden">
+            <HashStringShortenDynamic hash={ BigNumber(data.difficulty).toFormat() }/>
+          </DetailsInfoItem.Value>
+
           { data.total_difficulty && (
-            <DetailsInfoItem
-              title="Total difficulty"
-              hint="Total difficulty of the chain until this block"
-            >
-              <Box whiteSpace="nowrap" overflow="hidden">
+            <>
+              <DetailsInfoItem.Label
+                hint="Total difficulty of the chain until this block"
+              >
+                Total difficulty
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value overflow="hidden">
                 <HashStringShortenDynamic hash={ BigNumber(data.total_difficulty).toFormat() }/>
-              </Box>
-            </DetailsInfoItem>
+              </DetailsInfoItem.Value>
+            </>
           ) }
 
           <DetailsInfoItemDivider/>
 
-          <DetailsInfoItem
-            title="Hash"
+          <DetailsInfoItem.Label
             hint="The SHA256 hash of the block"
-            flexWrap="nowrap"
           >
-            <Box overflow="hidden">
+            Hash
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value flexWrap="nowrap">
+            <Box overflow="hidden" >
               <HashStringShortenDynamic hash={ data.hash }/>
             </Box>
             <CopyToClipboard text={ data.hash }/>
-          </DetailsInfoItem>
+          </DetailsInfoItem.Value>
+
           { data.height > 0 && (
-            <DetailsInfoItem
-              title="Parent hash"
-              hint="The hash of the block from which this block was generated"
-              flexWrap="nowrap"
-            >
-              <LinkInternal
-                href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.height - 1) } }) }
-                overflow="hidden"
-                whiteSpace="nowrap"
+            <>
+              <DetailsInfoItem.Label
+                hint="The hash of the block from which this block was generated"
               >
-                <HashStringShortenDynamic
-                  hash={ data.parent_hash }
-                />
-              </LinkInternal>
-              <CopyToClipboard text={ data.parent_hash }/>
-            </DetailsInfoItem>
+                Parent hash
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value flexWrap="nowrap">
+                <LinkInternal
+                  href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.height - 1) } }) }
+                  overflow="hidden"
+                  whiteSpace="nowrap"
+                >
+                  <HashStringShortenDynamic
+                    hash={ data.parent_hash }
+                  />
+                </LinkInternal>
+                <CopyToClipboard text={ data.parent_hash }/>
+              </DetailsInfoItem.Value>
+            </>
           ) }
-          { /* api doesn't support state root yet */ }
-          { /* <DetailsInfoItem
-            title="State root"
-            hint="The root of the state trie"
-          >
-            <Text wordBreak="break-all" whiteSpace="break-spaces">{ data.state_root }</Text>
-          </DetailsInfoItem> */ }
+
+          { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && (
+            <>
+              <DetailsInfoItem.Label
+                hint="The cumulative number of L2 to L1 transactions as of this block"
+                isLoading={ isPlaceholderData }
+              >
+                Send count
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                { data.arbitrum.send_count.toLocaleString() }
+              </DetailsInfoItem.Value>
+
+              <DetailsInfoItem.Label
+                hint="The root of the Merkle accumulator representing all L2 to L1 transactions as of this block"
+                isLoading={ isPlaceholderData }
+              >
+                Send root
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                { data.arbitrum.send_root }
+              </DetailsInfoItem.Value>
+
+              <DetailsInfoItem.Label
+                hint="The number of delayed L1 to L2 messages read as of this block"
+                isLoading={ isPlaceholderData }
+              >
+                Delayed messages
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                { data.arbitrum.delayed_messages.toLocaleString() }
+              </DetailsInfoItem.Value>
+            </>
+          ) }
+
           { !config.UI.views.block.hiddenFields?.nonce && (
-            <DetailsInfoItem
-              title="Nonce"
-              hint="Block nonce is a value used during mining to demonstrate proof of work for a block"
-            >
-              { data.nonce }
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="Block nonce is a value used during mining to demonstrate proof of work for a block"
+              >
+                Nonce
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                { data.nonce }
+              </DetailsInfoItem.Value>
+            </>
+          ) }
+
+          { data.zilliqa && (
+            <>
+              <DetailsInfoItemDivider/>
+              <BlockDetailsZilliqaQuorumCertificate data={ data.zilliqa?.quorum_certificate }/>
+              { data.zilliqa?.aggregate_quorum_certificate && (
+                <>
+                  <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 2 }}/>
+                  <BlockDetailsZilliqaQuorumCertificate data={ data.zilliqa?.aggregate_quorum_certificate }/>
+                </>
+              ) }
+            </>
           ) }
         </>
       ) }
diff --git a/ui/block/BlockEpochRewards.tsx b/ui/block/BlockEpochRewards.tsx
new file mode 100644
index 0000000000..86f6785600
--- /dev/null
+++ b/ui/block/BlockEpochRewards.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { BLOCK_EPOCH } from 'stubs/block';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+
+import BlockEpochElectionRewards from './epochRewards/BlockEpochElectionRewards';
+import BlockEpochRewardsDistribution from './epochRewards/BlockEpochRewardsDistribution';
+
+interface Props {
+  heightOrHash: string;
+}
+
+const BlockEpochRewards = ({ heightOrHash }: Props) => {
+  const query = useApiQuery('block_epoch', {
+    pathParams: {
+      height_or_hash: heightOrHash,
+    },
+    queryOptions: {
+      placeholderData: BLOCK_EPOCH,
+    },
+  });
+
+  if (query.isError) {
+    return <DataFetchAlert/>;
+  }
+
+  if (!query.data) {
+    return <span>No block epoch rewards data</span>;
+  }
+
+  return (
+    <>
+      <BlockEpochRewardsDistribution data={ query.data } isLoading={ query.isPlaceholderData }/>
+      <BlockEpochElectionRewards data={ query.data } isLoading={ query.isPlaceholderData }/>
+    </>
+  );
+};
+
+export default React.memo(BlockEpochRewards);
diff --git a/ui/block/BlockWithdrawals.tsx b/ui/block/BlockWithdrawals.tsx
index 59db634825..02a56df7b3 100644
--- a/ui/block/BlockWithdrawals.tsx
+++ b/ui/block/BlockWithdrawals.tsx
@@ -3,28 +3,29 @@ import React from 'react';
 
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
-import WithdrawalsList from 'ui/withdrawals/WithdrawalsList';
-import WithdrawalsTable from 'ui/withdrawals/WithdrawalsTable';
+import BeaconChainWithdrawalsList from 'ui/withdrawals/beaconChain/BeaconChainWithdrawalsList';
+import BeaconChainWithdrawalsTable from 'ui/withdrawals/beaconChain/BeaconChainWithdrawalsTable';
 
 type Props = {
   blockWithdrawalsQuery: QueryWithPagesResult<'block_withdrawals'>;
-}
+};
+const TABS_HEIGHT = 88;
 
 const BlockWithdrawals = ({ blockWithdrawalsQuery }: Props) => {
   const content = blockWithdrawalsQuery.data?.items ? (
     <>
       <Show below="lg" ssr={ false }>
-        <WithdrawalsList
+        <BeaconChainWithdrawalsList
           items={ blockWithdrawalsQuery.data.items }
           isLoading={ blockWithdrawalsQuery.isPlaceholderData }
           view="block"
         />
       </Show>
       <Hide below="lg" ssr={ false }>
-        <WithdrawalsTable
+        <BeaconChainWithdrawalsTable
           items={ blockWithdrawalsQuery.data.items }
           isLoading={ blockWithdrawalsQuery.isPlaceholderData }
-          top={ blockWithdrawalsQuery.pagination.isVisible ? 80 : 0 }
+          top={ blockWithdrawalsQuery.pagination.isVisible ? TABS_HEIGHT : 0 }
           view="block"
         />
       </Hide>
diff --git a/ui/block/__screenshots__/BlockDetails.pw.tsx_dark-color-mode_regular-block-mobile-dark-mode-1.png b/ui/block/__screenshots__/BlockDetails.pw.tsx_dark-color-mode_regular-block-mobile-dark-mode-1.png
index 2c02cc9f41..833f40b4df 100644
Binary files a/ui/block/__screenshots__/BlockDetails.pw.tsx_dark-color-mode_regular-block-mobile-dark-mode-1.png and b/ui/block/__screenshots__/BlockDetails.pw.tsx_dark-color-mode_regular-block-mobile-dark-mode-1.png differ
diff --git a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_genesis-block-1.png b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_genesis-block-1.png
index 0497acbc7a..d585de5a6f 100644
Binary files a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_genesis-block-1.png and b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_genesis-block-1.png differ
diff --git a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_regular-block-mobile-dark-mode-1.png b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_regular-block-mobile-dark-mode-1.png
index 82fb1c0367..c954ff988d 100644
Binary files a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_regular-block-mobile-dark-mode-1.png and b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_regular-block-mobile-dark-mode-1.png differ
diff --git a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_rootstock-custom-fields-1.png b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_rootstock-custom-fields-1.png
index 9e656d501f..0a58a09605 100644
Binary files a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_rootstock-custom-fields-1.png and b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_rootstock-custom-fields-1.png differ
diff --git a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_with-blob-txs-1.png b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_with-blob-txs-1.png
new file mode 100644
index 0000000000..4c0db82672
Binary files /dev/null and b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_with-blob-txs-1.png differ
diff --git a/ui/block/__screenshots__/BlockDetails.pw.tsx_mobile_regular-block-mobile-dark-mode-1.png b/ui/block/__screenshots__/BlockDetails.pw.tsx_mobile_regular-block-mobile-dark-mode-1.png
index 701513d232..1307767003 100644
Binary files a/ui/block/__screenshots__/BlockDetails.pw.tsx_mobile_regular-block-mobile-dark-mode-1.png and b/ui/block/__screenshots__/BlockDetails.pw.tsx_mobile_regular-block-mobile-dark-mode-1.png differ
diff --git a/ui/block/details/BlockDetailsBaseFeeCelo.pw.tsx b/ui/block/details/BlockDetailsBaseFeeCelo.pw.tsx
new file mode 100644
index 0000000000..699f88b544
--- /dev/null
+++ b/ui/block/details/BlockDetailsBaseFeeCelo.pw.tsx
@@ -0,0 +1,23 @@
+import { Grid } from '@chakra-ui/react';
+import React from 'react';
+
+import type { BlockBaseFeeCelo } from 'types/api/block';
+
+import * as blockMock from 'mocks/blocks/block';
+import { test, expect } from 'playwright/lib';
+
+import BlockDetailsBaseFeeCelo from './BlockDetailsBaseFeeCelo';
+
+test('base view +@mobile', async({ render }) => {
+  const component = await render(
+    <Grid
+      columnGap={ 8 }
+      rowGap={{ base: 3, lg: 3 }}
+      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
+      overflow="hidden"
+    >
+      <BlockDetailsBaseFeeCelo data={ blockMock.celo.celo?.base_fee as BlockBaseFeeCelo }/>
+    </Grid>,
+  );
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/block/details/BlockDetailsBaseFeeCelo.tsx b/ui/block/details/BlockDetailsBaseFeeCelo.tsx
new file mode 100644
index 0000000000..7b094ecd21
--- /dev/null
+++ b/ui/block/details/BlockDetailsBaseFeeCelo.tsx
@@ -0,0 +1,97 @@
+import { Box, Flex, Link } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { AddressParam } from 'types/api/addressParams';
+import type { BlockBaseFeeCelo } from 'types/api/block';
+import type { TokenInfo } from 'types/api/token';
+
+import { WEI, ZERO_ADDRESS } from 'lib/consts';
+import AddressFromTo from 'ui/shared/address/AddressFromTo';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import IconSvg from 'ui/shared/IconSvg';
+
+type ItemProps = BlockBaseFeeCelo['breakdown'][number] & {
+  addressFrom: AddressParam;
+  token: TokenInfo;
+};
+
+const BreakDownItem = ({ amount, percentage, address, addressFrom, token }: ItemProps) => {
+  const isBurning = address.hash === ZERO_ADDRESS;
+
+  return (
+    <Flex alignItems="center" columnGap={ 2 } rowGap={ 1 } flexWrap="wrap">
+      <Box color="text_secondary">{ percentage }% of amount</Box>
+      <Flex columnGap={ 2 }>
+        { BigNumber(amount).dividedBy(WEI).toFixed() }
+        <TokenEntity token={ token } noCopy onlySymbol/>
+      </Flex>
+      { isBurning ? (
+        <>
+          <AddressEntity address={ addressFrom } truncation="constant"/>
+          <IconSvg name="flame" boxSize={ 5 } color="gray.500"/>
+          <Box color="text_secondary">burnt</Box>
+        </>
+      ) : <AddressFromTo from={ addressFrom } to={ address }/> }
+    </Flex>
+  );
+};
+
+interface Props {
+  data: BlockBaseFeeCelo;
+}
+
+const BlockDetailsBaseFeeCelo = ({ data }: Props) => {
+  const totalBaseFee = BigNumber(data.amount).dividedBy(WEI).toFixed();
+
+  const totalFeeLabel = (
+    <Box whiteSpace="pre-wrap">
+      <span>The FeeHandler regularly burns 80% of its tokens. Non-CELO tokens are swapped to CELO beforehand. The remaining 20% are sent to the </span>
+      <Link isExternal href="https://www.ultragreen.money">Green Fund</Link>
+      <span>.</span>
+    </Box>
+  );
+
+  return (
+    <>
+      <DetailsInfoItem.Label
+        hint="The contract receiving the base fee, responsible for handling fee usage. This contract is controlled by governance process."
+      >
+        Base fee handler
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <AddressEntity address={ data.recipient }/>
+      </DetailsInfoItem.Value>
+      <DetailsInfoItem.Label
+        hint={ totalFeeLabel }
+        type="popover"
+      >
+        Base fee total
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value display="block">
+        <Flex columnGap={ 2 }>
+          { totalBaseFee }
+          <TokenEntity token={ data.token } noCopy onlySymbol/>
+        </Flex>
+        { data.breakdown.length > 0 && (
+          <Flex flexDir="column" rowGap={ 2 } mt={ 2 }>
+            { data.breakdown.map((item, index) => (
+              <BreakDownItem
+                key={ index }
+                { ...item }
+                addressFrom={ data.recipient }
+                token={ data.token }
+              />
+            )) }
+          </Flex>
+        ) }
+      </DetailsInfoItem.Value>
+      <DetailsInfoItemDivider/>
+    </>
+  );
+};
+
+export default React.memo(BlockDetailsBaseFeeCelo);
diff --git a/ui/block/details/BlockDetailsBlobInfo.tsx b/ui/block/details/BlockDetailsBlobInfo.tsx
new file mode 100644
index 0000000000..c8a170eb73
--- /dev/null
+++ b/ui/block/details/BlockDetailsBlobInfo.tsx
@@ -0,0 +1,103 @@
+import { Text, Tooltip } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { Block } from 'types/api/block';
+
+import { WEI, WEI_IN_GWEI, ZERO } from 'lib/consts';
+import { space } from 'lib/html-entities';
+import { currencyUnits } from 'lib/units';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
+import IconSvg from 'ui/shared/IconSvg';
+import Utilization from 'ui/shared/Utilization/Utilization';
+
+interface Props {
+  data: Block;
+}
+
+const BlockDetailsBlobInfo = ({ data }: Props) => {
+  if (
+    !data.blob_gas_price ||
+    !data.blob_gas_used ||
+    !data.burnt_blob_fees ||
+    !data.excess_blob_gas
+  ) {
+    return null;
+  }
+
+  const burntBlobFees = BigNumber(data.burnt_blob_fees || 0);
+  const blobFees = BigNumber(data.blob_gas_price || 0).multipliedBy(BigNumber(data.blob_gas_used || 0));
+
+  return (
+    <>
+
+      { data.blob_gas_price && (
+        <>
+          <DetailsInfoItem.Label
+            // eslint-disable-next-line max-len
+            hint="Price per unit of gas used for for blob deployment. Blob gas is independent of normal gas. Both gas prices can affect the priority of transaction execution."
+          >
+            Blob gas price
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Text>{ BigNumber(data.blob_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text>
+            <Text variant="secondary" whiteSpace="pre">
+              { space }({ BigNumber(data.blob_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })
+            </Text>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+      { data.blob_gas_used && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Actual amount of gas used by the blobs in this block"
+          >
+            Blob gas used
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Text>{ BigNumber(data.blob_gas_used).toFormat() }</Text>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+      { !burntBlobFees.isEqualTo(ZERO) && (
+        <>
+          <DetailsInfoItem.Label
+            hint={ `Amount of ${ currencyUnits.ether } used for blobs in this block` }
+          >
+            Blob burnt fees
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <IconSvg name="flame" boxSize={ 5 } color="gray.500" mr={ 2 }/>
+            { burntBlobFees.dividedBy(WEI).toFixed() } { currencyUnits.ether }
+            { !blobFees.isEqualTo(ZERO) && (
+              <Tooltip label="Blob burnt fees / Txn fees * 100%">
+                <div>
+                  <Utilization ml={ 4 } value={ burntBlobFees.dividedBy(blobFees).toNumber() }/>
+                </div>
+              </Tooltip>
+            ) }
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+      { data.excess_blob_gas && (
+        <>
+          <DetailsInfoItem.Label
+            hint="A running total of blob gas consumed in excess of the target, prior to the block."
+          >
+            Excess blob gas
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Text>{ BigNumber(data.excess_blob_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text>
+            <Text variant="secondary" whiteSpace="pre">
+              { space }({ BigNumber(data.excess_blob_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })
+            </Text>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+      <DetailsInfoItemDivider/>
+    </>
+  );
+};
+
+export default React.memo(BlockDetailsBlobInfo);
diff --git a/ui/block/details/BlockDetailsZilliqaQuorumCertificate.pw.tsx b/ui/block/details/BlockDetailsZilliqaQuorumCertificate.pw.tsx
new file mode 100644
index 0000000000..af93a2cb7c
--- /dev/null
+++ b/ui/block/details/BlockDetailsZilliqaQuorumCertificate.pw.tsx
@@ -0,0 +1,41 @@
+import { Grid } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ZilliqaQuorumCertificate } from 'types/api/block';
+
+import * as blockMock from 'mocks/blocks/block';
+import { test, expect } from 'playwright/lib';
+
+import BlockDetailsZilliqaQuorumCertificate from './BlockDetailsZilliqaQuorumCertificate';
+
+test('quorum certificate', async({ render }) => {
+  const component = await render(
+    <Grid
+      columnGap={ 8 }
+      rowGap={{ base: 3, lg: 3 }}
+      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
+      overflow="hidden"
+    >
+      <BlockDetailsZilliqaQuorumCertificate data={ blockMock.zilliqaWithAggregateQuorumCertificate.zilliqa?.quorum_certificate as ZilliqaQuorumCertificate }/>
+    </Grid>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('aggregated quorum certificate +@mobile', async({ render }) => {
+  const component = await render(
+    <Grid
+      columnGap={ 8 }
+      rowGap={{ base: 3, lg: 3 }}
+      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
+      overflow="hidden"
+    >
+      <BlockDetailsZilliqaQuorumCertificate
+        data={ blockMock.zilliqaWithAggregateQuorumCertificate.zilliqa?.aggregate_quorum_certificate as ZilliqaQuorumCertificate }
+      />
+    </Grid>,
+  );
+  await component.getByRole('button', { name: 'Nested quorum certificates' }).click();
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/block/details/BlockDetailsZilliqaQuorumCertificate.tsx b/ui/block/details/BlockDetailsZilliqaQuorumCertificate.tsx
new file mode 100644
index 0000000000..2263e7c167
--- /dev/null
+++ b/ui/block/details/BlockDetailsZilliqaQuorumCertificate.tsx
@@ -0,0 +1,131 @@
+import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Divider, Grid, GridItem, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ZilliqaNestedQuorumCertificate, ZilliqaQuorumCertificate } from 'types/api/block';
+
+import { apos, ndash } from 'lib/html-entities';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
+import Hint from 'ui/shared/Hint';
+
+function formatSigners(signers: Array<number>) {
+  return `[${ signers.join(', ') }]`;
+}
+
+interface Props {
+  data: ZilliqaQuorumCertificate & {
+    nested_quorum_certificates?: Array<ZilliqaNestedQuorumCertificate>;
+  };
+}
+
+const BlockDetailsZilliqaQuorumCertificate = ({ data }: Props) => {
+  const nestedBlockBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  const hint = (isNested?: boolean) => (
+    <>
+      The iteration of the consensus round in which the block was proposed:<br/><br/>
+      View { ndash } the view number of the quorum certificate, indicating the consensus round.<br/><br/>
+      Signature { ndash } aggregated BLS signature representing the validators{ apos } agreement.<br/><br/>
+      Signers { ndash } an array of integers representing the indices of validators who participated in the quorum (indicated by the cosigned bit vector).
+      { isNested && (
+        <>
+          <br/><br/>
+          Proposed by validator { ndash } validator index proposing the nested quorum certificate.
+        </>
+      ) }
+    </>
+  );
+
+  return (
+    <>
+      <DetailsInfoItem.Label
+        hint={ hint() }
+      >
+        { data.nested_quorum_certificates ? 'Aggregate quorum certificate' : 'Quorum certificate' }
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value rowGap={ 0 }>
+        <Grid
+          fontSize="sm"
+          lineHeight={ 5 }
+          gridTemplateColumns="min-content 1fr"
+          columnGap={ 5 }
+        >
+          <GridItem fontWeight={ 600 }>View</GridItem>
+          <GridItem>{ data.view }</GridItem>
+          <DetailsInfoItemDivider my={{ base: 2, lg: 2 }} colSpan={ 2 }/>
+          <GridItem fontWeight={ 600 }>Signature</GridItem>
+          <GridItem whiteSpace="pre-wrap" wordBreak="break-word" display="flex" alignItems="flex-start" columnGap={ 5 }>
+            { data.signature }
+            <CopyToClipboard text={ data.signature }/>
+          </GridItem>
+          <DetailsInfoItemDivider my={{ base: 2, lg: 2 }} colSpan={ 2 }/>
+          <GridItem fontWeight={ 600 }>Signers</GridItem>
+          <GridItem >{ formatSigners(data.signers) }</GridItem>
+        </Grid>
+        { data.nested_quorum_certificates && data.nested_quorum_certificates.length > 0 && (
+          <>
+            <Divider my={ 2 }/>
+            <Accordion
+              allowToggle
+              w="100%"
+              fontSize="sm"
+              lineHeight={ 5 }
+            >
+              <AccordionItem borderWidth={ 0 } _last={{ borderBottomWidth: 0 }}>
+                { ({ isExpanded }) => (
+                  <>
+                    <AccordionButton
+                      fontSize="sm"
+                      lineHeight={ 5 }
+                      fontWeight={ 600 }
+                      display="flex"
+                      alignItems="center"
+                      columnGap={ 1 }
+                      px={ 0 }
+                      pt={ 0 }
+                      pb={ 2 }
+                      _hover={{ bgColor: 'inherit' }}
+                    >
+                      <span>Nested quorum certificates</span>
+                      <Hint label={ hint(true) }/>
+                      <AccordionIcon flexShrink={ 0 } boxSize={ 5 } transform={ isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)' } color="gray.500"/>
+                    </AccordionButton>
+                    <AccordionPanel display="flex" flexDirection="column" rowGap={ 2 } p={ 0 }>
+                      { data.nested_quorum_certificates?.map((item, index) => (
+                        <Grid
+                          key={ index }
+                          gridTemplateColumns="90px 1fr"
+                          columnGap={ 3 }
+                          rowGap={ 2 }
+                          bgColor={ nestedBlockBgColor }
+                          p={ 4 }
+                          borderRadius="md"
+                          _first={{ borderTopRightRadius: 0, borderTopLeftRadius: 0 }}
+                        >
+                          <GridItem>View</GridItem>
+                          <GridItem>{ item.view }</GridItem>
+                          <GridItem>Signature</GridItem>
+                          <GridItem whiteSpace="pre-wrap" wordBreak="break-word" display="flex" alignItems="flex-start" columnGap={ 3 }>
+                            { item.signature }
+                            <CopyToClipboard text={ item.signature }/>
+                          </GridItem>
+                          <GridItem>Signers</GridItem>
+                          <GridItem >{ formatSigners(item.signers) }</GridItem>
+                          <GridItem whiteSpace="pre-wrap">Proposed by validator</GridItem>
+                          <GridItem >{ item.proposed_by_validator_index }</GridItem>
+                        </Grid>
+                      )) }
+                    </AccordionPanel>
+                  </>
+                ) }
+              </AccordionItem>
+            </Accordion>
+          </>
+        ) }
+      </DetailsInfoItem.Value>
+    </>
+  );
+};
+
+export default React.memo(BlockDetailsZilliqaQuorumCertificate);
diff --git a/ui/block/details/__screenshots__/BlockDetailsBaseFeeCelo.pw.tsx_default_base-view-mobile-1.png b/ui/block/details/__screenshots__/BlockDetailsBaseFeeCelo.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..534f77832d
Binary files /dev/null and b/ui/block/details/__screenshots__/BlockDetailsBaseFeeCelo.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/block/details/__screenshots__/BlockDetailsBaseFeeCelo.pw.tsx_mobile_base-view-mobile-1.png b/ui/block/details/__screenshots__/BlockDetailsBaseFeeCelo.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..06bb27657e
Binary files /dev/null and b/ui/block/details/__screenshots__/BlockDetailsBaseFeeCelo.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/block/details/__screenshots__/BlockDetailsZilliqaQuorumCertificate.pw.tsx_default_aggregated-quorum-certificate-mobile-1.png b/ui/block/details/__screenshots__/BlockDetailsZilliqaQuorumCertificate.pw.tsx_default_aggregated-quorum-certificate-mobile-1.png
new file mode 100644
index 0000000000..52be910804
Binary files /dev/null and b/ui/block/details/__screenshots__/BlockDetailsZilliqaQuorumCertificate.pw.tsx_default_aggregated-quorum-certificate-mobile-1.png differ
diff --git a/ui/block/details/__screenshots__/BlockDetailsZilliqaQuorumCertificate.pw.tsx_default_quorum-certificate-1.png b/ui/block/details/__screenshots__/BlockDetailsZilliqaQuorumCertificate.pw.tsx_default_quorum-certificate-1.png
new file mode 100644
index 0000000000..6196152e17
Binary files /dev/null and b/ui/block/details/__screenshots__/BlockDetailsZilliqaQuorumCertificate.pw.tsx_default_quorum-certificate-1.png differ
diff --git a/ui/block/details/__screenshots__/BlockDetailsZilliqaQuorumCertificate.pw.tsx_mobile_aggregated-quorum-certificate-mobile-1.png b/ui/block/details/__screenshots__/BlockDetailsZilliqaQuorumCertificate.pw.tsx_mobile_aggregated-quorum-certificate-mobile-1.png
new file mode 100644
index 0000000000..260ebf8a9c
Binary files /dev/null and b/ui/block/details/__screenshots__/BlockDetailsZilliqaQuorumCertificate.pw.tsx_mobile_aggregated-quorum-certificate-mobile-1.png differ
diff --git a/ui/block/epochRewards/BlockEpochElectionRewardDetailsDesktop.tsx b/ui/block/epochRewards/BlockEpochElectionRewardDetailsDesktop.tsx
new file mode 100644
index 0000000000..3f118103c3
--- /dev/null
+++ b/ui/block/epochRewards/BlockEpochElectionRewardDetailsDesktop.tsx
@@ -0,0 +1,102 @@
+import { Box, Grid, GridItem, Text, useColorModeValue } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { BlockEpoch } from 'types/api/block';
+import type { TokenInfo } from 'types/api/token';
+
+import getCurrencyValue from 'lib/getCurrencyValue';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import ContentLoader from 'ui/shared/ContentLoader';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import useLazyLoadedList from 'ui/shared/pagination/useLazyLoadedList';
+
+import { formatRewardType, getRewardDetailsTableTitles } from './utils';
+
+interface Props {
+  type: keyof BlockEpoch['aggregated_election_rewards'];
+  token: TokenInfo;
+}
+
+const BlockEpochElectionRewardDetailsDesktop = ({ type, token }: Props) => {
+  const rootRef = React.useRef<HTMLDivElement>(null);
+
+  const router = useRouter();
+  const heightOrHash = getQueryParamString(router.query.height_or_hash);
+
+  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  const { cutRef, query } = useLazyLoadedList({
+    rootRef,
+    resourceName: 'block_election_rewards',
+    pathParams: { height_or_hash: heightOrHash, reward_type: formatRewardType(type) },
+    queryOptions: {
+      refetchOnMount: false,
+    },
+  });
+
+  const titles = getRewardDetailsTableTitles(type);
+
+  return (
+    <Box
+      p={ 4 }
+      bgColor={ bgColor }
+      borderRadius="base"
+      maxH="360px"
+      overflowY="scroll"
+      fontWeight={ 400 }
+      lineHeight={ 5 }
+    >
+      { query.data && (
+        <Grid
+          gridTemplateColumns="min-content min-content min-content"
+          rowGap={ 5 }
+          columnGap={ 5 }
+        >
+          <GridItem fontWeight={ 600 } mb={ 1 } whiteSpace="nowrap">
+            { titles[0] }
+          </GridItem>
+          <GridItem fontWeight={ 600 } mb={ 1 } whiteSpace="nowrap" textAlign="right">
+            Amount { token.symbol }
+          </GridItem>
+          <GridItem fontWeight={ 600 } mb={ 1 } whiteSpace="nowrap">
+            { titles[1] }
+          </GridItem>
+
+          { query.data?.pages
+            .map((page) => page.items)
+            .flat()
+            .map((item, index) => {
+
+              const amount = getCurrencyValue({
+                value: item.amount,
+                decimals: token.decimals,
+              });
+
+              return (
+                <React.Fragment key={ index }>
+                  <GridItem>
+                    <AddressEntity address={ item.account } noIcon truncation="constant"/>
+                  </GridItem>
+                  <GridItem textAlign="right">
+                    { amount.valueStr }
+                  </GridItem>
+                  <GridItem>
+                    <AddressEntity address={ item.associated_account } noIcon truncation="constant"/>
+                  </GridItem>
+                </React.Fragment>
+              );
+            }) }
+        </Grid>
+      ) }
+
+      { query.isFetching && <ContentLoader maxW="200px" mt={ 3 }/> }
+
+      { query.isError && <Text color="error" mt={ 3 }>Something went wrong. Unable to load next page.</Text> }
+
+      <Box h="0" w="100px" ref={ cutRef }/>
+    </Box>
+  );
+};
+
+export default React.memo(BlockEpochElectionRewardDetailsDesktop);
diff --git a/ui/block/epochRewards/BlockEpochElectionRewardDetailsMobile.tsx b/ui/block/epochRewards/BlockEpochElectionRewardDetailsMobile.tsx
new file mode 100644
index 0000000000..c22fa452d4
--- /dev/null
+++ b/ui/block/epochRewards/BlockEpochElectionRewardDetailsMobile.tsx
@@ -0,0 +1,77 @@
+import { Box, Flex, Text, useColorModeValue } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { BlockEpoch } from 'types/api/block';
+import type { TokenInfo } from 'types/api/token';
+
+import getCurrencyValue from 'lib/getCurrencyValue';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import ContentLoader from 'ui/shared/ContentLoader';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import useLazyLoadedList from 'ui/shared/pagination/useLazyLoadedList';
+
+import { formatRewardType } from './utils';
+
+interface Props {
+  type: keyof BlockEpoch['aggregated_election_rewards'];
+  token: TokenInfo;
+}
+
+const BlockEpochElectionRewardDetailsMobile = ({ type, token }: Props) => {
+  const rootRef = React.useRef<HTMLDivElement>(null);
+
+  const router = useRouter();
+  const heightOrHash = getQueryParamString(router.query.height_or_hash);
+
+  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  const { cutRef, query } = useLazyLoadedList({
+    rootRef,
+    resourceName: 'block_election_rewards',
+    pathParams: { height_or_hash: heightOrHash, reward_type: formatRewardType(type) },
+    queryOptions: {
+      refetchOnMount: false,
+    },
+  });
+
+  return (
+    <Flex flexDir="column" rowGap={ 3 } p={ 4 } bgColor={ bgColor } borderRadius="base" maxH="360px" overflowY="scroll">
+
+      { query.data?.pages
+        .map((page) => page.items)
+        .flat()
+        .map((item, index) => {
+
+          const amount = getCurrencyValue({
+            value: item.amount,
+            decimals: token.decimals,
+          });
+
+          return (
+            <Flex key={ index } flexDir="column" alignItems="flex-start" rowGap={ 1 } fontWeight={ 400 }>
+              <AddressEntity address={ item.account } noIcon w="100%"/>
+              <Flex columnGap={ 1 } alignItems="center">
+                <Box flexShrink={ 0 } color="text_secondary">got</Box>
+                <Box>{ amount.valueStr }</Box>
+                <TokenEntity token={ token } noIcon onlySymbol w="auto"/>
+              </Flex>
+              <Flex columnGap={ 1 } alignItems="center" w="100%">
+                <Box flexShrink={ 0 } color="text_secondary">on behalf of</Box>
+                <AddressEntity address={ item.associated_account } noIcon/>
+              </Flex>
+            </Flex>
+          );
+        }) }
+
+      { query.isFetching && <ContentLoader maxW="200px" mt={ 3 }/> }
+
+      { query.isError && <Text color="error" mt={ 3 }>Something went wrong. Unable to load next page.</Text> }
+
+      <Box h="0" w="100px" mt="-12px" ref={ cutRef }/>
+    </Flex>
+  );
+};
+
+export default React.memo(BlockEpochElectionRewardDetailsMobile);
diff --git a/ui/block/epochRewards/BlockEpochElectionRewards.pw.tsx b/ui/block/epochRewards/BlockEpochElectionRewards.pw.tsx
new file mode 100644
index 0000000000..4bc4b1264c
--- /dev/null
+++ b/ui/block/epochRewards/BlockEpochElectionRewards.pw.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import * as blockEpochMock from 'mocks/blocks/epoch';
+import { test, expect } from 'playwright/lib';
+
+import BlockEpochElectionRewards from './BlockEpochElectionRewards';
+
+const heightOrHash = '1234';
+const hooksConfig = {
+  router: {
+    query: { height_or_hash: heightOrHash },
+  },
+};
+
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse(
+    'block_election_rewards',
+    blockEpochMock.electionRewardDetails1,
+    { pathParams: { height_or_hash: heightOrHash, reward_type: 'voter' } },
+  );
+  const component = await render(<BlockEpochElectionRewards data={ blockEpochMock.blockEpoch1 }/>, { hooksConfig });
+  await component.getByText('Voting rewards').click();
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/block/epochRewards/BlockEpochElectionRewards.tsx b/ui/block/epochRewards/BlockEpochElectionRewards.tsx
new file mode 100644
index 0000000000..e00deb7da5
--- /dev/null
+++ b/ui/block/epochRewards/BlockEpochElectionRewards.tsx
@@ -0,0 +1,72 @@
+import { Box, Heading, Hide, Show, Table, Tbody, Th, Thead, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { BlockEpoch } from 'types/api/block';
+
+import BlockEpochElectionRewardsListItem from './BlockEpochElectionRewardsListItem';
+import BlockEpochElectionRewardsTableItem from './BlockEpochElectionRewardsTableItem';
+
+interface Props {
+  data: BlockEpoch;
+  isLoading?: boolean;
+}
+
+const BlockEpochElectionRewards = ({ data, isLoading }: Props) => {
+  return (
+    <Box mt={ 8 }>
+      <Heading as="h4" size="sm" mb={ 3 }>Election rewards</Heading>
+      <Hide below="lg" ssr={ false }>
+        <Table style={{ tableLayout: 'auto' }}>
+          <Thead>
+            <Tr>
+              <Th width="24px"/>
+              <Th width="180px">Reward type</Th>
+              <Th/>
+              <Th isNumeric>Value</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            { Object.entries(data.aggregated_election_rewards).map((entry) => {
+              const key = entry[0] as keyof BlockEpoch['aggregated_election_rewards'];
+              const value = entry[1];
+
+              if (!value) {
+                return null;
+              }
+
+              return (
+                <BlockEpochElectionRewardsTableItem
+                  key={ key }
+                  type={ key }
+                  isLoading={ isLoading }
+                  data={ value }
+                />
+              );
+            }) }
+          </Tbody>
+        </Table>
+      </Hide>
+      <Show below="lg" ssr={ false }>
+        { Object.entries(data.aggregated_election_rewards).map((entry) => {
+          const key = entry[0] as keyof BlockEpoch['aggregated_election_rewards'];
+          const value = entry[1];
+
+          if (!value) {
+            return null;
+          }
+
+          return (
+            <BlockEpochElectionRewardsListItem
+              key={ key }
+              type={ key }
+              isLoading={ isLoading }
+              data={ value }
+            />
+          );
+        }) }
+      </Show>
+    </Box>
+  );
+};
+
+export default React.memo(BlockEpochElectionRewards);
diff --git a/ui/block/epochRewards/BlockEpochElectionRewardsListItem.tsx b/ui/block/epochRewards/BlockEpochElectionRewardsListItem.tsx
new file mode 100644
index 0000000000..d43cd48018
--- /dev/null
+++ b/ui/block/epochRewards/BlockEpochElectionRewardsListItem.tsx
@@ -0,0 +1,78 @@
+import { Box, Flex, IconButton, Skeleton, useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+import type { BlockEpoch, BlockEpochElectionReward } from 'types/api/block';
+
+import getCurrencyValue from 'lib/getCurrencyValue';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import EpochRewardTypeTag from 'ui/shared/EpochRewardTypeTag';
+import IconSvg from 'ui/shared/IconSvg';
+
+import BlockEpochElectionRewardDetailsMobile from './BlockEpochElectionRewardDetailsMobile';
+
+interface Props {
+  data: BlockEpochElectionReward;
+  type: keyof BlockEpoch['aggregated_election_rewards'];
+  isLoading?: boolean;
+}
+
+const BlockEpochElectionRewardsListItem = ({ data, isLoading, type }: Props) => {
+  const section = useDisclosure();
+
+  const { valueStr } = getCurrencyValue({
+    value: data.total,
+    decimals: data.token.decimals,
+    accuracy: 2,
+  });
+
+  return (
+    <Box
+      py={ 3 }
+      borderBottomWidth="1px"
+      borderColor="divider"
+      fontSize="sm"
+      onClick={ isLoading || !data.count ? undefined : section.onToggle }
+      cursor={ isLoading || !data.count ? undefined : 'pointer' }
+    >
+      <Flex my="3px" columnGap={ 3 } alignItems="center" flexWrap="wrap" rowGap={ 2 }>
+        { data.count ? (
+          <Skeleton isLoaded={ !isLoading } display="flex" borderRadius="sm">
+            <IconButton
+              aria-label={ section.isOpen ? 'Collapse section' : 'Expand section' }
+              variant="link"
+              boxSize={ 6 }
+              flexShrink={ 0 }
+              icon={ (
+                <IconSvg
+                  name="arrows/east-mini"
+                  boxSize={ 6 }
+                  transform={ section.isOpen ? 'rotate(270deg)' : 'rotate(180deg)' }
+                  transitionDuration="faster"
+                />
+              ) }
+            />
+          </Skeleton>
+        ) : <Box boxSize={ 6 }/> }
+        <EpochRewardTypeTag type={ type } isLoading={ isLoading }/>
+        <Skeleton isLoaded={ !isLoading }>{ data.count }</Skeleton>
+        <Flex columnGap={ 2 } alignItems="center" ml={{ base: 9, lg: 'auto' }} w={{ base: '100%', lg: 'fit-content' }} fontWeight={ 500 }>
+          <Skeleton isLoaded={ !isLoading }>{ valueStr }</Skeleton>
+          <TokenEntity
+            token={ data.token }
+            noCopy
+            onlySymbol
+            w="auto"
+            isLoading={ isLoading }
+          />
+        </Flex>
+      </Flex>
+      { section.isOpen && (
+        <Box mt={ 2 }>
+          <BlockEpochElectionRewardDetailsMobile type={ type } token={ data.token }/>
+        </Box>
+      ) }
+    </Box>
+  );
+};
+
+export default React.memo(BlockEpochElectionRewardsListItem);
diff --git a/ui/block/epochRewards/BlockEpochElectionRewardsTableItem.tsx b/ui/block/epochRewards/BlockEpochElectionRewardsTableItem.tsx
new file mode 100644
index 0000000000..b12cb6dea1
--- /dev/null
+++ b/ui/block/epochRewards/BlockEpochElectionRewardsTableItem.tsx
@@ -0,0 +1,89 @@
+import { Flex, IconButton, Skeleton, Td, Tr, useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+import type { BlockEpoch, BlockEpochElectionReward } from 'types/api/block';
+
+import getCurrencyValue from 'lib/getCurrencyValue';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import EpochRewardTypeTag from 'ui/shared/EpochRewardTypeTag';
+import IconSvg from 'ui/shared/IconSvg';
+
+import BlockEpochElectionRewardDetailsDesktop from './BlockEpochElectionRewardDetailsDesktop';
+import { getRewardNumText } from './utils';
+
+interface Props {
+  data: BlockEpochElectionReward;
+  type: keyof BlockEpoch['aggregated_election_rewards'];
+  isLoading?: boolean;
+}
+
+const BlockEpochElectionRewardsTableItem = ({ isLoading, data, type }: Props) => {
+  const section = useDisclosure();
+
+  const { valueStr } = getCurrencyValue({
+    value: data.total,
+    decimals: data.token.decimals,
+  });
+
+  const mainRowBorderColor = section.isOpen ? 'transparent' : 'divider';
+
+  return (
+    <>
+      <Tr
+        onClick={ isLoading || !data.count ? undefined : section.onToggle }
+        cursor={ isLoading || !data.count ? undefined : 'pointer' }
+      >
+        <Td borderColor={ mainRowBorderColor }>
+          { Boolean(data.count) && (
+            <Skeleton isLoaded={ !isLoading } display="flex" borderRadius="sm">
+              <IconButton
+                aria-label={ section.isOpen ? 'Collapse section' : 'Expand section' }
+                variant="link"
+                boxSize={ 6 }
+                flexShrink={ 0 }
+                icon={ (
+                  <IconSvg
+                    name="arrows/east-mini"
+                    boxSize={ 6 }
+                    transform={ section.isOpen ? 'rotate(270deg)' : 'rotate(180deg)' }
+                    transitionDuration="faster"
+                  />
+                ) }
+              />
+            </Skeleton>
+          ) }
+        </Td>
+        <Td borderColor={ mainRowBorderColor }>
+          <EpochRewardTypeTag type={ type } isLoading={ isLoading }/>
+        </Td>
+        <Td borderColor={ mainRowBorderColor }>
+          <Skeleton isLoaded={ !isLoading } fontWeight={ 400 } my={ 1 }>
+            { getRewardNumText(type, data.count) }
+          </Skeleton>
+        </Td>
+        <Td borderColor={ mainRowBorderColor }>
+          <Flex columnGap={ 2 } alignItems="center" justifyContent="flex-end" my="2px">
+            <Skeleton isLoaded={ !isLoading }>{ valueStr }</Skeleton>
+            <TokenEntity
+              token={ data.token }
+              noCopy
+              onlySymbol
+              w="auto"
+              isLoading={ isLoading }
+            />
+          </Flex>
+        </Td>
+      </Tr>
+      { section.isOpen && (
+        <Tr>
+          <Td/>
+          <Td colSpan={ 3 } pr={ 0 } pt={ 0 }>
+            <BlockEpochElectionRewardDetailsDesktop type={ type } token={ data.token }/>
+          </Td>
+        </Tr>
+      ) }
+    </>
+  );
+};
+
+export default React.memo(BlockEpochElectionRewardsTableItem);
diff --git a/ui/block/epochRewards/BlockEpochRewardsDistribution.tsx b/ui/block/epochRewards/BlockEpochRewardsDistribution.tsx
new file mode 100644
index 0000000000..0a4ef677a0
--- /dev/null
+++ b/ui/block/epochRewards/BlockEpochRewardsDistribution.tsx
@@ -0,0 +1,72 @@
+import { Grid } from '@chakra-ui/react';
+import React from 'react';
+
+import type { BlockEpoch } from 'types/api/block';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import TokenTransferSnippet from 'ui/shared/TokenTransferSnippet/TokenTransferSnippet';
+
+interface Props {
+  data: BlockEpoch;
+  isLoading?: boolean;
+}
+
+const BlockEpochRewardsDistribution = ({ data, isLoading }: Props) => {
+  const isMobile = useIsMobile();
+
+  if (!data.distribution.community_transfer && !data.distribution.carbon_offsetting_transfer && !data.distribution.reserve_bolster_transfer) {
+    return null;
+  }
+
+  return (
+    <Grid
+      columnGap={ 8 }
+      rowGap={{ base: 3, lg: 3 }}
+      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
+      overflow="hidden"
+    >
+      { data.distribution.community_transfer && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Funds allocation to support Celo projects and community initiatives"
+            isLoading={ isLoading }
+          >
+            Community fund
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <TokenTransferSnippet data={ data.distribution.community_transfer } isLoading={ isLoading } noAddressIcons={ isMobile }/>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+      { data.distribution.carbon_offsetting_transfer && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Funds allocation to support projects that make Celo carbon-negative"
+            isLoading={ isLoading }
+          >
+            Carbon offset fund
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <TokenTransferSnippet data={ data.distribution.carbon_offsetting_transfer } isLoading={ isLoading } noAddressIcons={ isMobile }/>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+      { data.distribution.reserve_bolster_transfer && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Funds allocation to strengthen Celo’s reserve for network stability and security"
+            isLoading={ isLoading }
+          >
+            Reserve bolster
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <TokenTransferSnippet data={ data.distribution.reserve_bolster_transfer } isLoading={ isLoading } noAddressIcons={ isMobile }/>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+    </Grid>
+  );
+};
+
+export default React.memo(BlockEpochRewardsDistribution);
diff --git a/ui/block/epochRewards/__screenshots__/BlockEpochElectionRewards.pw.tsx_default_base-view-mobile-1.png b/ui/block/epochRewards/__screenshots__/BlockEpochElectionRewards.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..4de971b073
Binary files /dev/null and b/ui/block/epochRewards/__screenshots__/BlockEpochElectionRewards.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/block/epochRewards/__screenshots__/BlockEpochElectionRewards.pw.tsx_mobile_base-view-mobile-1.png b/ui/block/epochRewards/__screenshots__/BlockEpochElectionRewards.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..437d90fcdc
Binary files /dev/null and b/ui/block/epochRewards/__screenshots__/BlockEpochElectionRewards.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/block/epochRewards/utils.ts b/ui/block/epochRewards/utils.ts
new file mode 100644
index 0000000000..8c318e1fc1
--- /dev/null
+++ b/ui/block/epochRewards/utils.ts
@@ -0,0 +1,44 @@
+import type { BlockEpoch } from 'types/api/block';
+
+export function getRewardNumText(type: keyof BlockEpoch['aggregated_election_rewards'], num: number) {
+  const postfix1 = num !== 1 ? 's' : '';
+  const postfix2 = num !== 1 ? 'es' : '';
+
+  const text = (() => {
+    switch (type) {
+      case 'delegated_payment':
+        return 'payment' + postfix1;
+      case 'group':
+        return 'group reward' + postfix1;
+      case 'validator':
+        return 'validator' + postfix1;
+      case 'voter':
+        return 'voting address' + postfix2;
+      default:
+        return '';
+    }
+  })();
+
+  if (!text) {
+    return '';
+  }
+
+  return `${ num } ${ text }`;
+}
+
+export function getRewardDetailsTableTitles(type: keyof BlockEpoch['aggregated_election_rewards']): [string, string] {
+  switch (type) {
+    case 'delegated_payment':
+      return [ 'Beneficiary', 'Validator' ];
+    case 'group':
+      return [ 'Validator group', 'Associated validator' ];
+    case 'validator':
+      return [ 'Validator', 'Validator group' ];
+    case 'voter':
+      return [ 'Voter', 'Validator group' ];
+  }
+}
+
+export function formatRewardType(type: keyof BlockEpoch['aggregated_election_rewards']) {
+  return type.replaceAll('_', '-');
+}
diff --git a/ui/block/useBlockBlobTxsQuery.tsx b/ui/block/useBlockBlobTxsQuery.tsx
new file mode 100644
index 0000000000..23a6d71ac2
--- /dev/null
+++ b/ui/block/useBlockBlobTxsQuery.tsx
@@ -0,0 +1,26 @@
+import { TX } from 'stubs/tx';
+import { generateListStub } from 'stubs/utils';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+
+import type { BlockQuery } from './useBlockQuery';
+
+interface Params {
+  heightOrHash: string;
+  blockQuery: BlockQuery;
+  tab: string;
+}
+
+export default function useBlockBlobTxsQuery({ heightOrHash, blockQuery, tab }: Params) {
+  const apiQuery = useQueryWithPages({
+    resourceName: 'block_txs',
+    pathParams: { height_or_hash: heightOrHash },
+    filters: { type: 'blob_transaction' },
+    options: {
+      enabled: Boolean(tab === 'blob_txs' && !blockQuery.isPlaceholderData && blockQuery.data?.blob_tx_count),
+      placeholderData: generateListStub<'block_txs'>(TX, 3, { next_page_params: null }),
+      refetchOnMount: false,
+    },
+  });
+
+  return apiQuery;
+}
diff --git a/ui/block/useBlockQuery.tsx b/ui/block/useBlockQuery.tsx
index 7e4caf90db..c2861c2b81 100644
--- a/ui/block/useBlockQuery.tsx
+++ b/ui/block/useBlockQuery.tsx
@@ -50,6 +50,10 @@ export default function useBlockQuery({ heightOrHash }: Params): BlockQuery {
   const rpcQuery = useQuery<RpcResponseType, unknown, Block | null>({
     queryKey: [ 'RPC', 'block', { heightOrHash } ],
     queryFn: async() => {
+      if (!publicClient) {
+        return null;
+      }
+
       const blockParams = heightOrHash.startsWith('0x') ? { blockHash: heightOrHash as `0x${ string }` } : { blockNumber: BigInt(heightOrHash) };
       return publicClient.getBlock(blockParams).catch(() => null);
     },
@@ -61,7 +65,7 @@ export default function useBlockQuery({ heightOrHash }: Params): BlockQuery {
       return {
         height: Number(block.number),
         timestamp: dayjs.unix(Number(block.timestamp)).format(),
-        tx_count: block.transactions.length,
+        transaction_count: block.transactions.length,
         miner: { ...unknownAddress, hash: block.miner },
         size: Number(block.size),
         hash: block.hash,
@@ -80,19 +84,19 @@ export default function useBlockQuery({ heightOrHash }: Params): BlockQuery {
         gas_used_percentage: null,
         burnt_fees_percentage: null,
         type: 'block', // we can't get this type from RPC, so it will always be a regular block
-        tx_fees: null,
+        transaction_fees: null,
         uncles_hashes: block.uncles,
         withdrawals_count: block.withdrawals?.length,
       };
     },
     placeholderData: GET_BLOCK,
-    enabled: apiQuery.isError || apiQuery.errorUpdateCount > 0,
+    enabled: publicClient !== undefined && (apiQuery.isError || apiQuery.errorUpdateCount > 0),
     retry: false,
     refetchOnMount: false,
   });
 
   React.useEffect(() => {
-    if (apiQuery.isPlaceholderData) {
+    if (apiQuery.isPlaceholderData || !publicClient) {
       return;
     }
 
@@ -109,7 +113,7 @@ export default function useBlockQuery({ heightOrHash }: Params): BlockQuery {
     }
   }, [ rpcQuery.data, rpcQuery.isPlaceholderData ]);
 
-  const isRpcQuery = Boolean((apiQuery.isError || apiQuery.isPlaceholderData) && apiQuery.errorUpdateCount > 0 && rpcQuery.data);
+  const isRpcQuery = Boolean(publicClient && (apiQuery.isError || apiQuery.isPlaceholderData) && apiQuery.errorUpdateCount > 0 && rpcQuery.data);
   const query = isRpcQuery ? rpcQuery as UseQueryResult<Block, ResourceError<{ status: number }>> : apiQuery;
 
   return {
diff --git a/ui/block/useBlockTxQuery.tsx b/ui/block/useBlockTxQuery.tsx
deleted file mode 100644
index eafd168659..0000000000
--- a/ui/block/useBlockTxQuery.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import type { UseQueryResult } from '@tanstack/react-query';
-import { useQuery } from '@tanstack/react-query';
-import React from 'react';
-import type { Chain, GetBlockReturnType } from 'viem';
-
-import type { BlockTransactionsResponse } from 'types/api/block';
-
-import type { ResourceError } from 'lib/api/resources';
-import { retry } from 'lib/api/useQueryClientConfig';
-import { SECOND } from 'lib/consts';
-import dayjs from 'lib/date/dayjs';
-import hexToDecimal from 'lib/hexToDecimal';
-import { publicClient } from 'lib/web3/client';
-import { GET_BLOCK_WITH_TRANSACTIONS } from 'stubs/RPC';
-import { TX } from 'stubs/tx';
-import { generateListStub } from 'stubs/utils';
-import { unknownAddress } from 'ui/shared/address/utils';
-import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
-import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
-import { emptyPagination } from 'ui/shared/pagination/utils';
-
-import type { BlockQuery } from './useBlockQuery';
-
-type RpcResponseType = GetBlockReturnType<Chain, boolean, 'latest'> | null;
-
-export type BlockTxsQuery = QueryWithPagesResult<'block_txs'> & {
-  isDegradedData: boolean;
-};
-
-interface Params {
-  heightOrHash: string;
-  blockQuery: BlockQuery;
-  tab: string;
-}
-
-export default function useBlockTxQuery({ heightOrHash, blockQuery, tab }: Params): BlockTxsQuery {
-  const [ isRefetchEnabled, setRefetchEnabled ] = React.useState(false);
-
-  const apiQuery = useQueryWithPages({
-    resourceName: 'block_txs',
-    pathParams: { height_or_hash: heightOrHash },
-    options: {
-      enabled: Boolean(tab === 'txs' && !blockQuery.isPlaceholderData && !blockQuery.isDegradedData),
-      placeholderData: generateListStub<'block_txs'>(TX, 50, { next_page_params: {
-        block_number: 9004925,
-        index: 49,
-        items_count: 50,
-      } }),
-      refetchOnMount: false,
-      retry: (failureCount, error) => {
-        if (isRefetchEnabled) {
-          return false;
-        }
-
-        return retry(failureCount, error);
-      },
-      refetchInterval: (): number | false => {
-        return isRefetchEnabled ? 15 * SECOND : false;
-      },
-    },
-  });
-
-  const rpcQuery = useQuery<RpcResponseType, unknown, BlockTransactionsResponse | null>({
-    queryKey: [ 'RPC', 'block_txs', { heightOrHash } ],
-    queryFn: async() => {
-      const blockParams = heightOrHash.startsWith('0x') ?
-        { blockHash: heightOrHash as `0x${ string }`, includeTransactions: true } :
-        { blockNumber: BigInt(heightOrHash), includeTransactions: true };
-      return publicClient.getBlock(blockParams).catch(() => null);
-    },
-    select: (block) => {
-      if (!block) {
-        return null;
-      }
-
-      return {
-        items: block.transactions
-          .map((tx) => {
-            if (typeof tx === 'string') {
-              return;
-            }
-
-            return {
-              from: { ...unknownAddress, hash: tx.from as string },
-              to: tx.to ? { ...unknownAddress, hash: tx.to as string } : null,
-              hash: tx.hash as string,
-              timestamp: block?.timestamp ? dayjs.unix(Number(block.timestamp)).format() : null,
-              confirmation_duration: null,
-              status: undefined,
-              block: Number(block.number),
-              value: tx.value.toString(),
-              gas_price: tx.gasPrice?.toString() ?? null,
-              base_fee_per_gas: block?.baseFeePerGas?.toString() ?? null,
-              max_fee_per_gas: tx.maxFeePerGas?.toString() ?? null,
-              max_priority_fee_per_gas: tx.maxPriorityFeePerGas?.toString() ?? null,
-              nonce: tx.nonce,
-              position: tx.transactionIndex,
-              type: tx.typeHex ? hexToDecimal(tx.typeHex) : null,
-              raw_input: tx.input,
-              gas_used: null,
-              gas_limit: tx.gas.toString(),
-              confirmations: 0,
-              fee: {
-                value: null,
-                type: 'actual',
-              },
-              created_contract: null,
-              result: '',
-              priority_fee: null,
-              tx_burnt_fee: null,
-              revert_reason: null,
-              decoded_input: null,
-              has_error_in_internal_txs: null,
-              token_transfers: null,
-              token_transfers_overflow: false,
-              exchange_rate: null,
-              method: null,
-              tx_types: [],
-              tx_tag: null,
-              actions: [],
-            };
-          })
-          .filter(Boolean),
-        next_page_params: null,
-      };
-    },
-    placeholderData: GET_BLOCK_WITH_TRANSACTIONS,
-    enabled: tab === 'txs' && (blockQuery.isDegradedData || apiQuery.isError || apiQuery.errorUpdateCount > 0),
-    retry: false,
-    refetchOnMount: false,
-  });
-
-  React.useEffect(() => {
-    if (apiQuery.isPlaceholderData) {
-      return;
-    }
-
-    if (apiQuery.isError && apiQuery.errorUpdateCount === 1) {
-      setRefetchEnabled(true);
-    } else if (!apiQuery.isError) {
-      setRefetchEnabled(false);
-    }
-  }, [ apiQuery.errorUpdateCount, apiQuery.isError, apiQuery.isPlaceholderData ]);
-
-  React.useEffect(() => {
-    if (!rpcQuery.isPlaceholderData && !rpcQuery.data) {
-      setRefetchEnabled(false);
-    }
-  }, [ rpcQuery.data, rpcQuery.isPlaceholderData ]);
-
-  const isRpcQuery = Boolean((
-    blockQuery.isDegradedData ||
-    ((apiQuery.isError || apiQuery.isPlaceholderData) && apiQuery.errorUpdateCount > 0)
-  ) && rpcQuery.data);
-
-  const rpcQueryWithPages: QueryWithPagesResult<'block_txs'> = React.useMemo(() => {
-    return {
-      ...rpcQuery as UseQueryResult<BlockTransactionsResponse, ResourceError>,
-      pagination: emptyPagination,
-      onFilterChange: () => {},
-      onSortingChange: () => {},
-    };
-  }, [ rpcQuery ]);
-
-  const query = isRpcQuery ? rpcQueryWithPages : apiQuery;
-
-  return {
-    ...query,
-    isDegradedData: isRpcQuery,
-  };
-}
diff --git a/ui/block/useBlockTxsQuery.tsx b/ui/block/useBlockTxsQuery.tsx
new file mode 100644
index 0000000000..3acc27dfac
--- /dev/null
+++ b/ui/block/useBlockTxsQuery.tsx
@@ -0,0 +1,173 @@
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+import React from 'react';
+import type { Chain, GetBlockReturnType } from 'viem';
+
+import type { BlockTransactionsResponse } from 'types/api/block';
+
+import type { ResourceError } from 'lib/api/resources';
+import { retry } from 'lib/api/useQueryClientConfig';
+import { SECOND } from 'lib/consts';
+import dayjs from 'lib/date/dayjs';
+import hexToDecimal from 'lib/hexToDecimal';
+import { publicClient } from 'lib/web3/client';
+import { GET_BLOCK_WITH_TRANSACTIONS } from 'stubs/RPC';
+import { TX } from 'stubs/tx';
+import { generateListStub } from 'stubs/utils';
+import { unknownAddress } from 'ui/shared/address/utils';
+import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import { emptyPagination } from 'ui/shared/pagination/utils';
+
+import type { BlockQuery } from './useBlockQuery';
+
+type RpcResponseType = GetBlockReturnType<Chain, boolean, 'latest'> | null;
+
+export type BlockTxsQuery = QueryWithPagesResult<'block_txs'> & {
+  isDegradedData: boolean;
+};
+
+interface Params {
+  heightOrHash: string;
+  blockQuery: BlockQuery;
+  tab: string;
+}
+
+export default function useBlockTxsQuery({ heightOrHash, blockQuery, tab }: Params): BlockTxsQuery {
+  const [ isRefetchEnabled, setRefetchEnabled ] = React.useState(false);
+
+  const apiQuery = useQueryWithPages({
+    resourceName: 'block_txs',
+    pathParams: { height_or_hash: heightOrHash },
+    options: {
+      enabled: Boolean(tab === 'txs' && !blockQuery.isPlaceholderData && !blockQuery.isDegradedData),
+      placeholderData: generateListStub<'block_txs'>(TX, 50, { next_page_params: {
+        block_number: 9004925,
+        index: 49,
+        items_count: 50,
+      } }),
+      refetchOnMount: false,
+      retry: (failureCount, error) => {
+        if (isRefetchEnabled) {
+          return false;
+        }
+
+        return retry(failureCount, error);
+      },
+      refetchInterval: (): number | false => {
+        return isRefetchEnabled ? 15 * SECOND : false;
+      },
+    },
+  });
+
+  const rpcQuery = useQuery<RpcResponseType, unknown, BlockTransactionsResponse | null>({
+    queryKey: [ 'RPC', 'block_txs', { heightOrHash } ],
+    queryFn: async() => {
+      if (!publicClient) {
+        return null;
+      }
+
+      const blockParams = heightOrHash.startsWith('0x') ?
+        { blockHash: heightOrHash as `0x${ string }`, includeTransactions: true } :
+        { blockNumber: BigInt(heightOrHash), includeTransactions: true };
+      return publicClient.getBlock(blockParams).catch(() => null);
+    },
+    select: (block) => {
+      if (!block) {
+        return null;
+      }
+
+      return {
+        items: block.transactions
+          .map((tx) => {
+            if (typeof tx === 'string') {
+              return;
+            }
+
+            return {
+              from: { ...unknownAddress, hash: tx.from as string },
+              to: tx.to ? { ...unknownAddress, hash: tx.to as string } : null,
+              hash: tx.hash as string,
+              timestamp: block?.timestamp ? dayjs.unix(Number(block.timestamp)).format() : null,
+              confirmation_duration: null,
+              status: undefined,
+              block_number: Number(block.number),
+              value: tx.value.toString(),
+              gas_price: tx.gasPrice?.toString() ?? null,
+              base_fee_per_gas: block?.baseFeePerGas?.toString() ?? null,
+              max_fee_per_gas: tx.maxFeePerGas?.toString() ?? null,
+              max_priority_fee_per_gas: tx.maxPriorityFeePerGas?.toString() ?? null,
+              nonce: tx.nonce,
+              position: tx.transactionIndex,
+              type: tx.typeHex ? hexToDecimal(tx.typeHex) : null,
+              raw_input: tx.input,
+              gas_used: null,
+              gas_limit: tx.gas.toString(),
+              confirmations: 0,
+              fee: {
+                value: null,
+                type: 'actual',
+              },
+              created_contract: null,
+              result: '',
+              priority_fee: null,
+              tx_burnt_fee: null,
+              revert_reason: null,
+              decoded_input: null,
+              has_error_in_internal_transactions: null,
+              token_transfers: null,
+              token_transfers_overflow: false,
+              exchange_rate: null,
+              method: null,
+              transaction_types: [],
+              transaction_tag: null,
+              actions: [],
+            };
+          })
+          .filter(Boolean),
+        next_page_params: null,
+      };
+    },
+    placeholderData: GET_BLOCK_WITH_TRANSACTIONS,
+    enabled: publicClient !== undefined && tab === 'txs' && (blockQuery.isDegradedData || apiQuery.isError || apiQuery.errorUpdateCount > 0),
+    retry: false,
+    refetchOnMount: false,
+  });
+
+  React.useEffect(() => {
+    if (apiQuery.isPlaceholderData || !publicClient) {
+      return;
+    }
+
+    if (apiQuery.isError && apiQuery.errorUpdateCount === 1) {
+      setRefetchEnabled(true);
+    } else if (!apiQuery.isError) {
+      setRefetchEnabled(false);
+    }
+  }, [ apiQuery.errorUpdateCount, apiQuery.isError, apiQuery.isPlaceholderData ]);
+
+  React.useEffect(() => {
+    if (!rpcQuery.isPlaceholderData && !rpcQuery.data) {
+      setRefetchEnabled(false);
+    }
+  }, [ rpcQuery.data, rpcQuery.isPlaceholderData ]);
+
+  const isRpcQuery = Boolean((
+    blockQuery.isDegradedData ||
+    ((apiQuery.isError || apiQuery.isPlaceholderData) && apiQuery.errorUpdateCount > 0)
+  ) && rpcQuery.data && publicClient);
+
+  const rpcQueryWithPages: QueryWithPagesResult<'block_txs'> = {
+    ...rpcQuery as UseQueryResult<BlockTransactionsResponse, ResourceError>,
+    pagination: emptyPagination,
+    onFilterChange: () => {},
+    onSortingChange: () => {},
+  };
+
+  const query = isRpcQuery ? rpcQueryWithPages : apiQuery;
+
+  return {
+    ...query,
+    isDegradedData: isRpcQuery,
+  };
+}
diff --git a/ui/block/useBlockWithdrawalsQuery.tsx b/ui/block/useBlockWithdrawalsQuery.tsx
index 670238793a..d5007feba4 100644
--- a/ui/block/useBlockWithdrawalsQuery.tsx
+++ b/ui/block/useBlockWithdrawalsQuery.tsx
@@ -65,6 +65,10 @@ export default function useBlockWithdrawalsQuery({ heightOrHash, blockQuery, tab
   const rpcQuery = useQuery<RpcResponseType, unknown, BlockWithdrawalsResponse | null>({
     queryKey: [ 'RPC', 'block', { heightOrHash } ],
     queryFn: async() => {
+      if (!publicClient) {
+        return null;
+      }
+
       const blockParams = heightOrHash.startsWith('0x') ? { blockHash: heightOrHash as `0x${ string }` } : { blockNumber: BigInt(heightOrHash) };
       return publicClient.getBlock(blockParams).catch(() => null);
     },
@@ -89,6 +93,7 @@ export default function useBlockWithdrawalsQuery({ heightOrHash, blockQuery, tab
     },
     placeholderData: GET_BLOCK,
     enabled:
+      publicClient !== undefined &&
       tab === 'withdrawals' &&
       config.features.beaconChain.isEnabled &&
       (blockQuery.isDegradedData || apiQuery.isError || apiQuery.errorUpdateCount > 0),
@@ -97,7 +102,7 @@ export default function useBlockWithdrawalsQuery({ heightOrHash, blockQuery, tab
   });
 
   React.useEffect(() => {
-    if (apiQuery.isPlaceholderData) {
+    if (apiQuery.isPlaceholderData || !publicClient) {
       return;
     }
 
@@ -117,16 +122,14 @@ export default function useBlockWithdrawalsQuery({ heightOrHash, blockQuery, tab
   const isRpcQuery = Boolean((
     blockQuery.isDegradedData ||
     ((apiQuery.isError || apiQuery.isPlaceholderData) && apiQuery.errorUpdateCount > 0)
-  ) && rpcQuery.data);
-
-  const rpcQueryWithPages: QueryWithPagesResult<'block_withdrawals'> = React.useMemo(() => {
-    return {
-      ...rpcQuery as UseQueryResult<BlockWithdrawalsResponse, ResourceError>,
-      pagination: emptyPagination,
-      onFilterChange: () => {},
-      onSortingChange: () => {},
-    };
-  }, [ rpcQuery ]);
+  ) && rpcQuery.data && publicClient);
+
+  const rpcQueryWithPages: QueryWithPagesResult<'block_withdrawals'> = {
+    ...rpcQuery as UseQueryResult<BlockWithdrawalsResponse, ResourceError>,
+    pagination: emptyPagination,
+    onFilterChange: () => {},
+    onSortingChange: () => {},
+  };
 
   const query = isRpcQuery ? rpcQueryWithPages : apiQuery;
 
diff --git a/ui/blockCountdown/BlockCountdownTimer.tsx b/ui/blockCountdown/BlockCountdownTimer.tsx
new file mode 100644
index 0000000000..98860a4865
--- /dev/null
+++ b/ui/blockCountdown/BlockCountdownTimer.tsx
@@ -0,0 +1,55 @@
+import { HStack, StackDivider, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import { SECOND } from 'lib/consts';
+
+import BlockCountdownTimerItem from './BlockCountdownTimerItem';
+import splitSecondsInPeriods from './splitSecondsInPeriods';
+
+interface Props {
+  value: number;
+  onFinish: () => void;
+}
+
+const BlockCountdownTimer = ({ value: initialValue, onFinish }: Props) => {
+
+  const [ value, setValue ] = React.useState(initialValue);
+
+  const bgColor = useColorModeValue('gray.50', 'whiteAlpha.100');
+
+  React.useEffect(() => {
+    const intervalId = window.setInterval(() => {
+      setValue((prev) => {
+        if (prev > 1) {
+          return prev - 1;
+        }
+
+        onFinish();
+        return 0;
+      });
+    }, SECOND);
+
+    return () => {
+      window.clearInterval(intervalId);
+    };
+  }, [ initialValue, onFinish ]);
+
+  const periods = splitSecondsInPeriods(value);
+
+  return (
+    <HStack
+      bgColor={ bgColor }
+      mt={{ base: 6, lg: 8 }}
+      p={{ base: 3, lg: 4 }}
+      borderRadius="base"
+      divider={ <StackDivider borderColor="divider"/> }
+    >
+      <BlockCountdownTimerItem label="Days" value={ periods.days }/>
+      <BlockCountdownTimerItem label="Hours" value={ periods.hours }/>
+      <BlockCountdownTimerItem label="Minutes" value={ periods.minutes }/>
+      <BlockCountdownTimerItem label="Seconds" value={ periods.seconds }/>
+    </HStack>
+  );
+};
+
+export default React.memo(BlockCountdownTimer);
diff --git a/ui/blockCountdown/BlockCountdownTimerItem.tsx b/ui/blockCountdown/BlockCountdownTimerItem.tsx
new file mode 100644
index 0000000000..e653de2a59
--- /dev/null
+++ b/ui/blockCountdown/BlockCountdownTimerItem.tsx
@@ -0,0 +1,32 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import TruncatedValue from 'ui/shared/TruncatedValue';
+
+interface Props {
+  label: string;
+  value: string;
+}
+
+const BlockCountdownTimerItem = ({ label, value }: Props) => {
+  return (
+    <Box
+      minW={{ base: '70px', lg: '100px' }}
+      textAlign="center"
+      overflow="hidden"
+      flex="1 1 auto"
+    >
+      <TruncatedValue
+        value={ value }
+        fontFamily="heading"
+        fontSize={{ base: '40px', lg: '48px' }}
+        lineHeight="48px"
+        fontWeight={ 600 }
+        w="100%"
+      />
+      <Box fontSize="sm" lineHeight="20px" mt={ 1 } color="text_secondary">{ label }</Box>
+    </Box>
+  );
+};
+
+export default React.memo(BlockCountdownTimerItem);
diff --git a/ui/blockCountdown/createGoogleCalendarLink.ts b/ui/blockCountdown/createGoogleCalendarLink.ts
new file mode 100644
index 0000000000..da45281f24
--- /dev/null
+++ b/ui/blockCountdown/createGoogleCalendarLink.ts
@@ -0,0 +1,30 @@
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import dayjs from 'lib/date/dayjs';
+interface Params {
+  timeFromNow: number;
+  blockHeight: string;
+}
+
+const DATE_FORMAT = 'YYYYMMDDTHHmm';
+
+export default function createGoogleCalendarLink({ timeFromNow, blockHeight }: Params): string {
+
+  const date = dayjs().add(timeFromNow, 's');
+  const name = `Block #${ blockHeight } reminder | ${ config.chain.name }`;
+  const description = `#${ blockHeight } block creation time on ${ config.chain.name } blockchain.`;
+  const startTime = date.format(DATE_FORMAT);
+  const endTime = date.add(15, 'minutes').format(DATE_FORMAT);
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const blockUrl = config.app.baseUrl + route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: blockHeight } });
+
+  const url = new URL('calendar/render', 'https://www.google.com/');
+  url.searchParams.append('action', 'TEMPLATE');
+  url.searchParams.append('text', name);
+  url.searchParams.append('details', description + '\n' + blockUrl);
+  url.searchParams.append('dates', `${ startTime }/${ endTime }`);
+  url.searchParams.append('ctz', timeZone);
+
+  return url.toString();
+}
diff --git a/ui/blockCountdown/createIcsFileBlob.ts b/ui/blockCountdown/createIcsFileBlob.ts
new file mode 100644
index 0000000000..8f53e52848
--- /dev/null
+++ b/ui/blockCountdown/createIcsFileBlob.ts
@@ -0,0 +1,35 @@
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import type dayjs from 'lib/date/dayjs';
+
+interface Params {
+  date: dayjs.Dayjs;
+  blockHeight: string;
+}
+
+const DATE_FORMAT = 'YYYYMMDDTHHmmss';
+
+export default function createIcsFileBlob({ date, blockHeight }: Params): Blob {
+  const name = `Block #${ blockHeight } reminder | ${ config.chain.name }`;
+  const description = `#${ blockHeight } block creation time on ${ config.chain.name } blockchain.`;
+  const startTime = date.format(DATE_FORMAT);
+  const endTime = date.add(15, 'minutes').format(DATE_FORMAT);
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const blockUrl = config.app.baseUrl + route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: blockHeight } });
+
+  const icsContent = `BEGIN:VCALENDAR
+VERSION:2.0
+BEGIN:VEVENT
+SUMMARY:${ name }
+DESCRIPTION:${ description }
+DTSTART;TZID=${ timeZone }:${ startTime }
+DTEND;TZID=${ timeZone }:${ endTime }
+URL:${ blockUrl }
+END:VEVENT
+END:VCALENDAR`;
+
+  const blob = new Blob([ icsContent ], { type: 'text/calendar' });
+
+  return blob;
+}
diff --git a/ui/blockCountdown/splitSecondsInPeriods.ts b/ui/blockCountdown/splitSecondsInPeriods.ts
new file mode 100644
index 0000000000..b187ba5e0e
--- /dev/null
+++ b/ui/blockCountdown/splitSecondsInPeriods.ts
@@ -0,0 +1,15 @@
+import _padStart from 'lodash/padStart';
+
+export default function splitSecondsInPeriods(value: number) {
+  const seconds = value % 60;
+  const minutes = (value - seconds) / 60 % 60;
+  const hours = (value - seconds - minutes * 60) / (60 * 60) % 24;
+  const days = (value - seconds - minutes * 60 - hours * 60 * 60) / (60 * 60 * 24);
+
+  return {
+    seconds: _padStart(String(seconds), 2, '0'),
+    minutes: _padStart(String(minutes), 2, '0'),
+    hours: _padStart(String(hours), 2, '0'),
+    days: _padStart(String(days), 2, '0'),
+  };
+}
diff --git a/ui/blocks/BlockTimestamp.tsx b/ui/blocks/BlockTimestamp.tsx
deleted file mode 100644
index 1f7b7f4325..0000000000
--- a/ui/blocks/BlockTimestamp.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Skeleton, chakra } from '@chakra-ui/react';
-import React from 'react';
-
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
-
-interface Props {
-  ts: string;
-  isEnabled?: boolean;
-  isLoading?: boolean;
-  className?: string;
-}
-
-const BlockTimestamp = ({ ts, isEnabled, isLoading, className }: Props) => {
-  const timeAgo = useTimeAgoIncrement(ts, isEnabled);
-
-  return (
-    <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight={ 400 } className={ className } display="inline-block">
-      <span>{ timeAgo }</span>
-    </Skeleton>
-  );
-};
-
-export default React.memo(chakra(BlockTimestamp));
diff --git a/ui/blocks/BlocksContent.tsx b/ui/blocks/BlocksContent.tsx
index 3a0faa67e6..65862ca1ca 100644
--- a/ui/blocks/BlocksContent.tsx
+++ b/ui/blocks/BlocksContent.tsx
@@ -5,6 +5,8 @@ import React from 'react';
 import type { SocketMessage } from 'lib/socket/types';
 import type { BlockType, BlocksResponse } from 'types/api/block';
 
+import { route } from 'nextjs-routes';
+
 import { getResourceKey } from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useSocketChannel from 'lib/socket/useSocketChannel';
@@ -13,18 +15,23 @@ import BlocksList from 'ui/blocks/BlocksList';
 import BlocksTable from 'ui/blocks/BlocksTable';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import Pagination from 'ui/shared/pagination/Pagination';
 import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 
 const OVERLOAD_COUNT = 75;
+const TABS_HEIGHT = 88;
 
 interface Props {
   type?: BlockType;
-  query: QueryWithPagesResult<'blocks'>;
+  query: QueryWithPagesResult<'blocks'> | QueryWithPagesResult<'optimistic_l2_txn_batch_blocks'>;
+  enableSocket?: boolean;
+  top?: number;
 }
 
-const BlocksContent = ({ type, query }: Props) => {
+const BlocksContent = ({ type, query, enableSocket = true, top }: Props) => {
   const queryClient = useQueryClient();
   const isMobile = useIsMobile();
   const [ socketAlert, setSocketAlert ] = React.useState('');
@@ -70,7 +77,7 @@ const BlocksContent = ({ type, query }: Props) => {
     topic: 'blocks:new_block',
     onSocketClose: handleSocketClose,
     onSocketError: handleSocketError,
-    isDisabled: query.isPlaceholderData || query.isError || query.pagination.page !== 1,
+    isDisabled: query.isPlaceholderData || query.isError || query.pagination.page !== 1 || !enableSocket,
   });
   useSocketMessage({
     channel,
@@ -81,7 +88,7 @@ const BlocksContent = ({ type, query }: Props) => {
   const content = query.data?.items ? (
     <>
       <Box display={{ base: 'block', lg: 'none' }}>
-        { query.pagination.page === 1 && (
+        { query.pagination.page === 1 && enableSocket && (
           <SocketNewItemsNotice.Mobile
             url={ window.location.href }
             num={ newItemsCount }
@@ -95,10 +102,10 @@ const BlocksContent = ({ type, query }: Props) => {
       <Box display={{ base: 'none', lg: 'block' }}>
         <BlocksTable
           data={ query.data.items }
-          top={ query.pagination.isVisible ? 80 : 0 }
+          top={ top || (query.pagination.isVisible ? TABS_HEIGHT : 0) }
           page={ query.pagination.page }
           isLoading={ query.isPlaceholderData }
-          showSocketInfo={ query.pagination.page === 1 }
+          showSocketInfo={ query.pagination.page === 1 && enableSocket }
           socketInfoNum={ newItemsCount }
           socketInfoAlert={ socketAlert }
         />
@@ -106,8 +113,12 @@ const BlocksContent = ({ type, query }: Props) => {
     </>
   ) : null;
 
-  const actionBar = isMobile && query.pagination.isVisible ? (
+  const actionBar = isMobile ? (
     <ActionBar mt={ -6 }>
+      <LinkInternal display="inline-flex" alignItems="center" href={ route({ pathname: '/block/countdown' }) }>
+        <IconSvg name="hourglass" boxSize={ 5 } mr={ 2 }/>
+        <span>Block countdown</span>
+      </LinkInternal>
       <Pagination ml="auto" { ...query.pagination }/>
     </ActionBar>
   ) : null;
diff --git a/ui/blocks/BlocksListItem.tsx b/ui/blocks/BlocksListItem.tsx
index 9760992c97..8243942f2b 100644
--- a/ui/blocks/BlocksListItem.tsx
+++ b/ui/blocks/BlocksListItem.tsx
@@ -1,4 +1,4 @@
-import { Flex, Skeleton, Text, Box, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Skeleton, Text, Box, Tooltip } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import capitalize from 'lodash/capitalize';
 import React from 'react';
@@ -12,30 +12,30 @@ import getBlockTotalReward from 'lib/block/getBlockTotalReward';
 import { WEI } from 'lib/consts';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import { currencyUnits } from 'lib/units';
-import BlockTimestamp from 'ui/blocks/BlockTimestamp';
+import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
-import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
-import TextSeparator from 'ui/shared/TextSeparator';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
+import { getBaseFeeValue } from './utils';
+
 interface Props {
   data: Block;
   isLoading?: boolean;
   enableTimeIncrement?: boolean;
 }
 
-const isRollup = config.features.optimisticRollup.isEnabled || config.features.zkEvmRollup.isEnabled;
+const isRollup = config.features.rollup.isEnabled;
 
 const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
   const totalReward = getBlockTotalReward(data);
   const burntFees = BigNumber(data.burnt_fees || 0);
-  const txFees = BigNumber(data.tx_fees || 0);
-
-  const separatorColor = useColorModeValue('gray.200', 'gray.700');
+  const txFees = BigNumber(data.transaction_fees || 0);
+  const baseFeeValue = getBaseFeeValue(data.base_fee_per_gas);
 
   return (
     <ListItemMobile rowGap={ 3 } key={ String(data.height) } isAnimated>
@@ -48,8 +48,20 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
             noIcon
             fontWeight={ 600 }
           />
+          { data.celo?.is_epoch_block && (
+            <Tooltip label={ `Finalized epoch #${ data.celo.epoch_number }` }>
+              <IconSvg name="checkered_flag" boxSize={ 5 } p="1px" isLoading={ isLoading } flexShrink={ 0 }/>
+            </Tooltip>
+          ) }
         </Flex>
-        <BlockTimestamp ts={ data.timestamp } isEnabled={ enableTimeIncrement } isLoading={ isLoading }/>
+        <TimeAgoWithTooltip
+          timestamp={ data.timestamp }
+          enableIncrement={ enableTimeIncrement }
+          isLoading={ isLoading }
+          color="text_secondary"
+          fontWeight={ 400 }
+          display="inline-block"
+        />
       </Flex>
       <Flex columnGap={ 2 }>
         <Text fontWeight={ 500 }>Size</Text>
@@ -63,19 +75,20 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
           <AddressEntity
             address={ data.miner }
             isLoading={ isLoading }
+            truncation="constant"
           />
         </Flex>
       ) }
       <Flex columnGap={ 2 }>
         <Text fontWeight={ 500 }>Txn</Text>
-        { data.tx_count > 0 ? (
+        { data.transaction_count > 0 ? (
           <Skeleton isLoaded={ !isLoading } display="inline-block">
             <LinkInternal href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.height), tab: 'txs' } }) }>
-              { data.tx_count }
+              { data.transaction_count }
             </LinkInternal>
           </Skeleton>
         ) :
-          <Text variant="secondary">{ data.tx_count }</Text>
+          <Text variant="secondary">{ data.transaction_count }</Text>
         }
       </Flex>
       <Box>
@@ -84,13 +97,12 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
           <Skeleton isLoaded={ !isLoading } display="inline-block" color="text_secondary" mr={ 4 }>
             <span>{ BigNumber(data.gas_used || 0).toFormat() }</span>
           </Skeleton>
-          <Utilization colorScheme="gray" value={ BigNumber(data.gas_used || 0).div(BigNumber(data.gas_limit)).toNumber() } isLoading={ isLoading }/>
-          { data.gas_target_percentage && (
-            <>
-              <TextSeparator color={ separatorColor } mx={ 1 }/>
-              <GasUsedToTargetRatio value={ data.gas_target_percentage } isLoading={ isLoading }/>
-            </>
-          ) }
+          <BlockGasUsed
+            gasUsed={ data.gas_used }
+            gasLimit={ data.gas_limit }
+            isLoading={ isLoading }
+            gasTarget={ data.gas_target_percentage }
+          />
         </Flex>
       </Box>
       { !isRollup && !config.UI.views.block.hiddenFields?.total_reward && (
@@ -115,6 +127,14 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
           </Flex>
         </Box>
       ) }
+      { !isRollup && !config.UI.views.block.hiddenFields?.base_fee && baseFeeValue && (
+        <Flex columnGap={ 2 }>
+          <Text fontWeight={ 500 }>Base fee</Text>
+          <Skeleton isLoaded={ !isLoading } display="inline-block" color="text_secondary">
+            <span>{ baseFeeValue }</span>
+          </Skeleton>
+        </Flex>
+      ) }
     </ListItemMobile>
   );
 };
diff --git a/ui/blocks/BlocksTabSlot.tsx b/ui/blocks/BlocksTabSlot.tsx
index 2186185fdb..ff8b9fe6d8 100644
--- a/ui/blocks/BlocksTabSlot.tsx
+++ b/ui/blocks/BlocksTabSlot.tsx
@@ -3,9 +3,13 @@ import React from 'react';
 
 import type { PaginationParams } from 'ui/shared/pagination/types';
 
+import { route } from 'nextjs-routes';
+
 import useApiQuery from 'lib/api/useApiQuery';
 import { nbsp } from 'lib/html-entities';
 import { HOMEPAGE_STATS } from 'stubs/stats';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import Pagination from 'ui/shared/pagination/Pagination';
 
 interface Props {
@@ -13,12 +17,7 @@ interface Props {
 }
 
 const BlocksTabSlot = ({ pagination }: Props) => {
-  const statsQuery = useApiQuery('homepage_stats', {
-    fetchParams: {
-      headers: {
-        'updated-gas-oracle': 'true',
-      },
-    },
+  const statsQuery = useApiQuery('stats', {
     queryOptions: {
       placeholderData: HOMEPAGE_STATS,
     },
@@ -29,13 +28,17 @@ const BlocksTabSlot = ({ pagination }: Props) => {
       { statsQuery.data?.network_utilization_percentage !== undefined && (
         <Box>
           <Text as="span" fontSize="sm">
-              Network utilization (last 50 blocks):{ nbsp }
+            Network utilization (last 50 blocks):{ nbsp }
           </Text>
           <Skeleton display="inline-block" fontSize="sm" color="blue.400" fontWeight={ 600 } isLoaded={ !statsQuery.isPlaceholderData }>
             <span>{ statsQuery.data.network_utilization_percentage.toFixed(2) }%</span>
           </Skeleton>
         </Box>
       ) }
+      <LinkInternal display="inline-flex" alignItems="center" href={ route({ pathname: '/block/countdown' }) }>
+        <IconSvg name="hourglass" boxSize={ 5 } mr={ 2 }/>
+        <span>Block countdown</span>
+      </LinkInternal>
       <Pagination my={ 1 } { ...pagination }/>
     </Flex>
   );
diff --git a/ui/blocks/BlocksTable.tsx b/ui/blocks/BlocksTable.tsx
index cfe0a7067f..45a1fd0cbd 100644
--- a/ui/blocks/BlocksTable.tsx
+++ b/ui/blocks/BlocksTable.tsx
@@ -28,22 +28,22 @@ const GAS_COL_WEIGHT = 33;
 const REWARD_COL_WEIGHT = 22;
 const FEES_COL_WEIGHT = 22;
 
-const isRollup = config.features.optimisticRollup.isEnabled || config.features.zkEvmRollup.isEnabled;
+const isRollup = config.features.rollup.isEnabled;
 
 const BlocksTable = ({ data, isLoading, top, page, showSocketInfo, socketInfoNum, socketInfoAlert }: Props) => {
 
   const widthBase =
-    VALIDATOR_COL_WEIGHT +
+    (!config.UI.views.block.hiddenFields?.miner ? VALIDATOR_COL_WEIGHT : 0) +
     GAS_COL_WEIGHT +
     (!isRollup && !config.UI.views.block.hiddenFields?.total_reward ? REWARD_COL_WEIGHT : 0) +
     (!isRollup && !config.UI.views.block.hiddenFields?.burnt_fees ? FEES_COL_WEIGHT : 0);
 
   return (
     <AddressHighlightProvider>
-      <Table variant="simple" minWidth="1040px" size="md" fontWeight={ 500 }>
+      <Table minWidth="1040px" fontWeight={ 500 }>
         <Thead top={ top }>
           <Tr>
-            <Th width="125px">Block</Th>
+            <Th width="150px">Block</Th>
             <Th width="120px">Size, bytes</Th>
             { !config.UI.views.block.hiddenFields?.miner &&
             <Th width={ `${ VALIDATOR_COL_WEIGHT / widthBase * 100 }%` } minW="160px">{ capitalize(getNetworkValidatorTitle()) }</Th> }
@@ -53,6 +53,8 @@ const BlocksTable = ({ data, isLoading, top, page, showSocketInfo, socketInfoNum
               <Th width={ `${ REWARD_COL_WEIGHT / widthBase * 100 }%` }>Reward { currencyUnits.ether }</Th> }
             { !isRollup && !config.UI.views.block.hiddenFields?.burnt_fees &&
               <Th width={ `${ FEES_COL_WEIGHT / widthBase * 100 }%` }>Burnt fees { currencyUnits.ether }</Th> }
+            { !isRollup && !config.UI.views.block.hiddenFields?.base_fee &&
+              <Th width="150px" isNumeric>Base fee</Th> }
           </Tr>
         </Thead>
         <Tbody>
diff --git a/ui/blocks/BlocksTableItem.tsx b/ui/blocks/BlocksTableItem.tsx
index 8323ab83a8..bb0d4411c4 100644
--- a/ui/blocks/BlocksTableItem.tsx
+++ b/ui/blocks/BlocksTableItem.tsx
@@ -10,31 +10,33 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
 import { WEI } from 'lib/consts';
-import BlockTimestamp from 'ui/blocks/BlockTimestamp';
+import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
-import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkInternal from 'ui/shared/LinkInternal';
-import TextSeparator from 'ui/shared/TextSeparator';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
+import { getBaseFeeValue } from './utils';
+
 interface Props {
   data: Block;
   isLoading?: boolean;
   enableTimeIncrement?: boolean;
 }
 
-const isRollup = config.features.optimisticRollup.isEnabled || config.features.zkEvmRollup.isEnabled;
+const isRollup = config.features.rollup.isEnabled;
 
 const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
   const totalReward = getBlockTotalReward(data);
   const burntFees = BigNumber(data.burnt_fees || 0);
-  const txFees = BigNumber(data.tx_fees || 0);
+  const txFees = BigNumber(data.transaction_fees || 0);
 
-  const separatorColor = useColorModeValue('gray.200', 'gray.700');
   const burntFeesIconColor = useColorModeValue('gray.500', 'inherit');
 
+  const baseFeeValue = getBaseFeeValue(data.base_fee_per_gas);
+
   return (
     <Tr
       as={ motion.tr }
@@ -46,6 +48,11 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
     >
       <Td fontSize="sm">
         <Flex columnGap={ 2 } alignItems="center" mb={ 2 }>
+          { data.celo?.is_epoch_block && (
+            <Tooltip label={ `Finalized epoch #${ data.celo.epoch_number }` }>
+              <IconSvg name="checkered_flag" boxSize={ 5 } p="1px" isLoading={ isLoading } flexShrink={ 0 }/>
+            </Tooltip>
+          ) }
           <Tooltip isDisabled={ data.type !== 'reorg' } label="Chain reorganizations">
             <BlockEntity
               isLoading={ isLoading }
@@ -58,7 +65,14 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
             />
           </Tooltip>
         </Flex>
-        <BlockTimestamp ts={ data.timestamp } isEnabled={ enableTimeIncrement } isLoading={ isLoading }/>
+        <TimeAgoWithTooltip
+          timestamp={ data.timestamp }
+          enableIncrement={ enableTimeIncrement }
+          isLoading={ isLoading }
+          color="text_secondary"
+          fontWeight={ 400 }
+          display="inline-block"
+        />
       </Td>
       <Td fontSize="sm">
         <Skeleton isLoaded={ !isLoading } display="inline-block">
@@ -70,48 +84,41 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
           <AddressEntity
             address={ data.miner }
             isLoading={ isLoading }
+            truncation="constant"
+            maxW="min-content"
           />
         </Td>
       ) }
       <Td isNumeric fontSize="sm">
-        { data.tx_count > 0 ? (
+        { data.transaction_count > 0 ? (
           <Skeleton isLoaded={ !isLoading } display="inline-block">
             <LinkInternal href={ route({
               pathname: '/block/[height_or_hash]',
               query: { height_or_hash: String(data.height), tab: 'txs' },
             }) }>
-              { data.tx_count }
+              { data.transaction_count }
             </LinkInternal>
           </Skeleton>
-        ) : data.tx_count }
+        ) : data.transaction_count }
+      </Td>
+      <Td fontSize="sm">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ BigNumber(data.gas_used || 0).toFormat() }</Skeleton>
+        <Flex mt={ 2 }>
+          <BlockGasUsed
+            gasUsed={ data.gas_used }
+            gasLimit={ data.gas_limit }
+            isLoading={ isLoading }
+            gasTarget={ data.gas_target_percentage }
+          />
+        </Flex>
       </Td>
       { !isRollup && !config.UI.views.block.hiddenFields?.total_reward && (
         <Td fontSize="sm">
-          <Skeleton isLoaded={ !isLoading } display="inline-block">{ BigNumber(data.gas_used || 0).toFormat() }</Skeleton>
-          <Flex mt={ 2 }>
-            <Tooltip label={ isLoading ? undefined : 'Gas Used %' }>
-              <Box>
-                <Utilization
-                  colorScheme="gray"
-                  value={ BigNumber(data.gas_used || 0).dividedBy(BigNumber(data.gas_limit)).toNumber() }
-                  isLoading={ isLoading }
-                />
-              </Box>
-            </Tooltip>
-            { data.gas_target_percentage && (
-              <>
-                <TextSeparator color={ separatorColor } mx={ 1 }/>
-                <GasUsedToTargetRatio value={ data.gas_target_percentage } isLoading={ isLoading }/>
-              </>
-            ) }
-          </Flex>
+          <Skeleton isLoaded={ !isLoading } display="inline-block">
+            { totalReward.toFixed(8) }
+          </Skeleton>
         </Td>
       ) }
-      <Td fontSize="sm">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
-          { totalReward.toFixed(8) }
-        </Skeleton>
-      </Td>
       { !isRollup && !config.UI.views.block.hiddenFields?.burnt_fees && (
         <Td fontSize="sm">
           <Flex alignItems="center" columnGap={ 2 }>
@@ -127,6 +134,13 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
           </Tooltip>
         </Td>
       ) }
+      { !isRollup && !config.UI.views.block.hiddenFields?.base_fee && Boolean(baseFeeValue) && (
+        <Td fontSize="sm" isNumeric>
+          <Skeleton isLoaded={ !isLoading } display="inline-block">
+            { baseFeeValue }
+          </Skeleton>
+        </Td>
+      ) }
     </Tr>
   );
 };
diff --git a/ui/blocks/utils.ts b/ui/blocks/utils.ts
new file mode 100644
index 0000000000..ab47657c13
--- /dev/null
+++ b/ui/blocks/utils.ts
@@ -0,0 +1,13 @@
+import getValueWithUnit from 'lib/getValueWithUnit';
+import { currencyUnits } from 'lib/units';
+
+export const getBaseFeeValue = (baseFee: string | null) => {
+  if (!baseFee) {
+    return null;
+  }
+  const valGwei = getValueWithUnit(baseFee, 'gwei');
+  if (valGwei.isGreaterThanOrEqualTo(0.0001)) {
+    return `${ valGwei.toFormat(4) } ${ currencyUnits.gwei }`;
+  }
+  return `${ getValueWithUnit(baseFee, 'wei').toFormat() } ${ currencyUnits.wei }`;
+};
diff --git a/ui/contractVerification/ContractVerificationForm.pw.tsx b/ui/contractVerification/ContractVerificationForm.pw.tsx
index 140ba75293..d2cbd343a8 100644
--- a/ui/contractVerification/ContractVerificationForm.pw.tsx
+++ b/ui/contractVerification/ContractVerificationForm.pw.tsx
@@ -1,10 +1,10 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import type { SmartContractVerificationConfig } from 'types/api/contract';
+import type { SmartContractVerificationConfig } from 'types/client/contract';
 
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
 import * as socketServer from 'playwright/fixtures/socketServer';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import ContractVerificationForm from './ContractVerificationForm';
 
@@ -38,6 +38,8 @@ const formConfig: SmartContractVerificationConfig = {
     'vyper-code',
     'vyper-multi-part',
     'vyper-standard-input',
+    'solidity-hardhat',
+    'solidity-foundry',
   ],
   vyper_compiler_versions: [
     'v0.3.7+commit.6020b8bb',
@@ -54,56 +56,67 @@ const formConfig: SmartContractVerificationConfig = {
     'petersburg',
     'istanbul',
   ],
+  license_types: {
+    apache_2_0: 12,
+    bsd_2_clause: 8,
+    bsd_3_clause: 9,
+    bsl_1_1: 14,
+    gnu_agpl_v3: 13,
+    gnu_gpl_v2: 4,
+    gnu_gpl_v3: 5,
+    gnu_lgpl_v2_1: 6,
+    gnu_lgpl_v3: 7,
+    mit: 3,
+    mpl_2_0: 10,
+    none: 1,
+    osl_3_0: 11,
+    unlicense: 2,
+  },
 };
 
-test('flatten source code method +@dark-mode +@mobile', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <ContractVerificationForm config={ formConfig } hash={ hash }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('flatten source code method +@dark-mode +@mobile', async({ render, page }) => {
+  const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
+
+  // select license
+  await component.getByLabel(/contract license/i).focus();
+  await component.getByLabel(/contract license/i).fill('mit');
+  await page.getByRole('button', { name: /mit license/i }).click();
 
+  // select method
   await component.getByLabel(/verification method/i).focus();
-  await component.getByLabel(/verification method/i).type('solidity');
-  await page.getByRole('button', { name: /flattened source code/i }).click();
+  await component.getByLabel(/verification method/i).fill('solidity');
+  await page.getByRole('button', { name: /single file/i }).click();
+
   await page.getByText(/add contract libraries/i).click();
   await page.locator('button[aria-label="add"]').click();
 
   await expect(component).toHaveScreenshot();
 });
 
-test('standard input json method', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <ContractVerificationForm config={ formConfig } hash={ hash }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('standard input json method', async({ render, page }) => {
+  const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
 
+  // select method
   await component.getByLabel(/verification method/i).focus();
-  await component.getByLabel(/verification method/i).type('solidity');
+  await component.getByLabel(/verification method/i).fill('solidity');
   await page.getByRole('button', { name: /standard json input/i }).click();
 
   await expect(component).toHaveScreenshot();
 });
 
 test.describe('sourcify', () => {
-  const testWithSocket = test.extend<socketServer.SocketServerFixture>({
-    createSocket: socketServer.createSocket,
-  });
-  testWithSocket.describe.configure({ mode: 'serial', timeout: 20_000 });
+  test.describe.configure({ mode: 'serial', timeout: 20_000 });
 
-  testWithSocket('with multiple contracts', async({ mount, page, createSocket }) => {
-    const component = await mount(
-      <TestApp withSocket>
-        <ContractVerificationForm config={ formConfig } hash={ hash }/>
-      </TestApp>,
+  test('with multiple contracts', async({ render, page, createSocket }) => {
+    const component = await render(
+      <ContractVerificationForm config={ formConfig } hash={ hash }/>,
       { hooksConfig },
+      { withSocket: true },
     );
 
+    // select method
     await component.getByLabel(/verification method/i).focus();
-    await component.getByLabel(/verification method/i).type('solidity');
+    await component.getByLabel(/verification method/i).fill('solidity');
     await page.getByRole('button', { name: /sourcify/i }).click();
 
     await page.getByText(/drop files/i).click();
@@ -129,7 +142,7 @@ test.describe('sourcify', () => {
     });
 
     await component.getByLabel(/contract name/i).focus();
-    await component.getByLabel(/contract name/i).type('e');
+    await component.getByLabel(/contract name/i).fill('e');
     const contractNameOption = page.getByRole('button', { name: /MockERC20/i });
 
     await expect(contractNameOption).toBeVisible();
@@ -138,62 +151,153 @@ test.describe('sourcify', () => {
   });
 });
 
-test('multi-part files method', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <ContractVerificationForm config={ formConfig } hash={ hash }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('multi-part files method', async({ render, page }) => {
+  const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
 
+  // select method
   await component.getByLabel(/verification method/i).focus();
-  await component.getByLabel(/verification method/i).type('solidity');
+  await component.getByLabel(/verification method/i).fill('solidity');
   await page.getByRole('button', { name: /multi-part files/i }).click();
 
   await expect(component).toHaveScreenshot();
 });
 
-test('vyper contract method', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <ContractVerificationForm config={ formConfig } hash={ hash }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('vyper contract method', async({ render, page }) => {
+  const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
 
+  // select method
   await component.getByLabel(/verification method/i).focus();
-  await component.getByLabel(/verification method/i).type('vyper');
+  await component.getByLabel(/verification method/i).fill('vyper');
   await page.getByRole('button', { name: /contract/i }).click();
 
   await expect(component).toHaveScreenshot();
 });
 
-test('vyper multi-part method', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <ContractVerificationForm config={ formConfig } hash={ hash }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('vyper multi-part method', async({ render, page }) => {
+  const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
 
+  // select method
   await component.getByLabel(/verification method/i).focus();
-  await component.getByLabel(/verification method/i).type('vyper');
+  await component.getByLabel(/verification method/i).fill('vyper');
   await page.getByRole('button', { name: /multi-part files/i }).click();
 
   await expect(component).toHaveScreenshot();
 });
 
-test('vyper vyper-standard-input method', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <ContractVerificationForm config={ formConfig } hash={ hash }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('vyper vyper-standard-input method', async({ render, page }) => {
+  const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
 
+  // select method
   await component.getByLabel(/verification method/i).focus();
-  await component.getByLabel(/verification method/i).type('vyper');
+  await component.getByLabel(/verification method/i).fill('vyper');
   await page.getByRole('button', { name: /standard json input/i }).click();
 
   await expect(component).toHaveScreenshot();
 });
+
+test('solidity-hardhat method', async({ render, page }) => {
+  const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
+
+  // select method
+  await component.getByLabel(/verification method/i).focus();
+  await component.getByLabel(/verification method/i).fill('hardhat');
+  await page.getByRole('button', { name: /hardhat/i }).click();
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('solidity-foundry method', async({ render, page }) => {
+  const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
+
+  // select method
+  await component.getByLabel(/verification method/i).focus();
+  await component.getByLabel(/verification method/i).fill('foundry');
+  await page.getByRole('button', { name: /foundry/i }).click();
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('verification of zkSync contract', async({ render, mockEnvs }) => {
+  const zkSyncFormConfig: SmartContractVerificationConfig = {
+    ...formConfig,
+    verification_options: [ 'standard-input' ],
+    zk_compiler_versions: [ 'v1.4.1', 'v1.4.0', 'v1.3.23', 'v1.3.22' ],
+    zk_optimization_modes: [ '0', '1', '2', '3', 's', 'z' ],
+  };
+
+  await mockEnvs(ENVS_MAP.zkSyncRollup);
+  const component = await render(<ContractVerificationForm config={ zkSyncFormConfig } hash={ hash }/>, { hooksConfig });
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('verification of stylus rust contract', async({ render, page }) => {
+  const stylusRustFormConfig: SmartContractVerificationConfig = {
+    ...formConfig,
+    stylus_compiler_versions: [ 'v0.5.0', 'v0.5.1', 'v0.5.2', 'v0.5.3' ],
+    verification_options: formConfig.verification_options.concat([ 'stylus-github-repository' ]),
+  };
+
+  const component = await render(<ContractVerificationForm config={ stylusRustFormConfig } hash={ hash }/>, { hooksConfig });
+
+  // select method
+  await component.getByLabel(/verification method/i).focus();
+  await component.getByLabel(/verification method/i).fill('stylus');
+  await page.getByRole('button', { name: /stylus/i }).click();
+
+  // check validation of github repository field
+  const githubRepositoryField = component.getByLabel(/github repository url/i);
+  await githubRepositoryField.focus();
+  await githubRepositoryField.fill('https://example.com');
+  await githubRepositoryField.blur();
+
+  await expect(component.getByText(/invalid github repository url/i)).toBeVisible();
+
+  const DUCK_COMMIT_HASH = '45dd018a19fff2651eb3c23037427a7531af6588';
+  const GOOSE_COMMIT_HASH = 'f7e5629';
+  await page.route('https://api.github.com/repos/tom2drum/not-duck/commits?per_page=1', (route) => {
+    return route.fulfill({ status: 404 });
+  }, { times: 1 });
+  await page.route('https://api.github.com/repos/tom2drum/duck/commits?per_page=1', (route) => {
+    return route.fulfill({ status: 200, json: [ { sha: DUCK_COMMIT_HASH } ] });
+  }, { times: 1 });
+  await githubRepositoryField.focus();
+  await githubRepositoryField.fill('https://github.com/tom2drum/not-duck');
+  await githubRepositoryField.blur();
+
+  await expect(component.getByText(/github repository not found/i)).toBeVisible();
+
+  await githubRepositoryField.focus();
+  await githubRepositoryField.fill('https://github.com/tom2drum/duck');
+  await githubRepositoryField.blur();
+
+  await expect(component.getByText(/github repository not found/i)).toBeHidden();
+  await expect(component.getByText(/we have found the latest commit hash/i)).toBeVisible();
+  await expect(component.getByText(DUCK_COMMIT_HASH.slice(0, 7))).toBeVisible();
+
+  // check validation of commit hash field
+  await page.route(`https://api.github.com/repos/tom2drum/duck/commits/${ GOOSE_COMMIT_HASH }`, (route) => {
+    return route.fulfill({ status: 404 });
+  }, { times: 1 });
+  await page.route(`https://api.github.com/repos/tom2drum/goose/commits/${ GOOSE_COMMIT_HASH }`, (route) => {
+    return route.fulfill({ status: 200, json: { sha: GOOSE_COMMIT_HASH } });
+  }, { times: 1 });
+  await page.route('https://api.github.com/repos/tom2drum/goose/commits?per_page=1', (route) => {
+    return route.fulfill({ status: 200, json: [ { sha: GOOSE_COMMIT_HASH } ] });
+  }, { times: 1 });
+  const commitHashField = component.getByLabel(/commit hash/i);
+
+  await commitHashField.focus();
+  await commitHashField.fill(GOOSE_COMMIT_HASH);
+  await commitHashField.blur();
+
+  await expect(component.getByText(/commit hash not found in the repository/i)).toBeVisible();
+
+  await githubRepositoryField.focus();
+  await githubRepositoryField.fill('https://github.com/tom2drum/goose');
+  await githubRepositoryField.blur();
+
+  await expect(component.getByText(/commit hash not found in the repository/i)).toBeHidden();
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/contractVerification/ContractVerificationForm.tsx b/ui/contractVerification/ContractVerificationForm.tsx
index 2a464a017e..bc20ce0961 100644
--- a/ui/contractVerification/ContractVerificationForm.tsx
+++ b/ui/contractVerification/ContractVerificationForm.tsx
@@ -1,15 +1,17 @@
-import { Button, Grid, chakra, useUpdateEffect } from '@chakra-ui/react';
+import { Button, Grid, Text, chakra, useUpdateEffect } from '@chakra-ui/react';
 import React from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm, FormProvider } from 'react-hook-form';
 
 import type { FormFields } from './types';
 import type { SocketMessage } from 'lib/socket/types';
-import type { SmartContractVerificationMethod, SmartContractVerificationConfig, SmartContract } from 'types/api/contract';
+import type { SmartContract, SmartContractVerificationMethodApi } from 'types/api/contract';
+import type { SmartContractVerificationConfig } from 'types/client/contract';
 
 import { route } from 'nextjs-routes';
 
 import useApiFetch from 'lib/api/useApiFetch';
+import capitalizeFirstLetter from 'lib/capitalizeFirstLetter';
 import delay from 'lib/delay';
 import getErrorObjStatusCode from 'lib/errors/getErrorObjStatusCode';
 import useToast from 'lib/hooks/useToast';
@@ -18,18 +20,22 @@ import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 
 import ContractVerificationFieldAddress from './fields/ContractVerificationFieldAddress';
+import ContractVerificationFieldLicenseType from './fields/ContractVerificationFieldLicenseType';
 import ContractVerificationFieldMethod from './fields/ContractVerificationFieldMethod';
 import ContractVerificationFlattenSourceCode from './methods/ContractVerificationFlattenSourceCode';
 import ContractVerificationMultiPartFile from './methods/ContractVerificationMultiPartFile';
+import ContractVerificationSolidityFoundry from './methods/ContractVerificationSolidityFoundry';
+import ContractVerificationSolidityHardhat from './methods/ContractVerificationSolidityHardhat';
 import ContractVerificationSourcify from './methods/ContractVerificationSourcify';
 import ContractVerificationStandardInput from './methods/ContractVerificationStandardInput';
+import ContractVerificationStylusGitHubRepo from './methods/ContractVerificationStylusGitHubRepo';
 import ContractVerificationVyperContract from './methods/ContractVerificationVyperContract';
 import ContractVerificationVyperMultiPartFile from './methods/ContractVerificationVyperMultiPartFile';
 import ContractVerificationVyperStandardInput from './methods/ContractVerificationVyperStandardInput';
 import { prepareRequestBody, formatSocketErrors, getDefaultValues, METHOD_LABELS } from './utils';
 
 interface Props {
-  method?: SmartContractVerificationMethod;
+  method?: SmartContractVerificationMethodApi;
   config: SmartContractVerificationConfig;
   hash?: string;
 }
@@ -37,9 +43,9 @@ interface Props {
 const ContractVerificationForm = ({ method: methodFromQuery, config, hash }: Props) => {
   const formApi = useForm<FormFields>({
     mode: 'onBlur',
-    defaultValues: methodFromQuery ? getDefaultValues(methodFromQuery, config, hash) : undefined,
+    defaultValues: getDefaultValues(methodFromQuery, config, hash, null),
   });
-  const { control, handleSubmit, watch, formState, setError, reset, getFieldState } = formApi;
+  const { handleSubmit, watch, formState, setError, reset, getFieldState, getValues, clearErrors } = formApi;
   const submitPromiseResolver = React.useRef<(value: unknown) => void>();
   const methodNameRef = React.useRef<string>();
 
@@ -85,13 +91,26 @@ const ContractVerificationForm = ({ method: methodFromQuery, config, hash }: Pro
     });
   }, [ apiFetch, hash, setError ]);
 
+  const handleFormChange = React.useCallback(() => {
+    clearErrors('root');
+  }, [ clearErrors ]);
+
   const address = watch('address');
   const addressState = getFieldState('address');
 
   const handleNewSocketMessage: SocketMessage.ContractVerification['handler'] = React.useCallback(async(payload) => {
     if (payload.status === 'error') {
       const errors = formatSocketErrors(payload.errors);
-      errors.filter(Boolean).forEach(([ field, error ]) => setError(field, error));
+
+      const existingErrors = errors.filter(Boolean).filter(([ field ]) => getValues(field));
+      if (existingErrors.length) {
+        existingErrors.forEach(([ field, error ]) => setError(field, error));
+      } else {
+        const globalErrors = Object.entries(payload.errors).map(([ , value ]) => value.join(', '));
+        const rootError = capitalizeFirstLetter(globalErrors.join('\n\n'));
+        setError('root', { message: rootError });
+      }
+
       await delay(100); // have to wait a little bit, otherwise isSubmitting status will not be updated
       submitPromiseResolver.current?.(null);
       return;
@@ -113,7 +132,7 @@ const ContractVerificationForm = ({ method: methodFromQuery, config, hash }: Pro
     );
 
     window.location.assign(route({ pathname: '/address/[hash]', query: { hash: address, tab: 'contract' } }));
-  }, [ setError, toast, address ]);
+  }, [ setError, toast, address, getValues ]);
 
   const handleSocketError = React.useCallback(() => {
     if (!formState.isSubmitting) {
@@ -141,7 +160,7 @@ const ContractVerificationForm = ({ method: methodFromQuery, config, hash }: Pro
     topic: `addresses:${ address?.toLowerCase() }`,
     onSocketClose: handleSocketError,
     onSocketError: handleSocketError,
-    isDisabled: Boolean(address && addressState.error),
+    isDisabled: !address || Boolean(address && addressState.error),
   });
   useSocketMessage({
     channel,
@@ -158,15 +177,19 @@ const ContractVerificationForm = ({ method: methodFromQuery, config, hash }: Pro
       'vyper-code': <ContractVerificationVyperContract config={ config }/>,
       'vyper-multi-part': <ContractVerificationVyperMultiPartFile/>,
       'vyper-standard-input': <ContractVerificationVyperStandardInput/>,
+      'solidity-hardhat': <ContractVerificationSolidityHardhat config={ config }/>,
+      'solidity-foundry': <ContractVerificationSolidityFoundry/>,
+      'stylus-github-repository': <ContractVerificationStylusGitHubRepo/>,
     };
   }, [ config ]);
   const method = watch('method');
+  const licenseType = watch('license_type');
   const content = methods[method?.value] || null;
   const methodValue = method?.value;
 
   useUpdateEffect(() => {
     if (methodValue) {
-      reset(getDefaultValues(methodValue, config, address || hash));
+      reset(getDefaultValues(methodValue, config, hash || address, licenseType));
 
       const methodName = METHOD_LABELS[methodValue];
       mixpanel.logEvent(mixpanel.EventTypes.CONTRACT_VERIFICATION, { Status: 'Method selected', Method: methodName });
@@ -180,17 +203,16 @@ const ContractVerificationForm = ({ method: methodFromQuery, config, hash }: Pro
       <chakra.form
         noValidate
         onSubmit={ handleSubmit(onFormSubmit) }
+        onChange={ handleFormChange }
       >
         <Grid as="section" columnGap="30px" rowGap={{ base: 2, lg: 5 }} templateColumns={{ base: '1fr', lg: 'minmax(auto, 680px) minmax(0, 340px)' }}>
           { !hash && <ContractVerificationFieldAddress/> }
-          <ContractVerificationFieldMethod
-            control={ control }
-            methods={ config.verification_options }
-            isDisabled={ formState.isSubmitting }
-          />
+          <ContractVerificationFieldLicenseType/>
+          <ContractVerificationFieldMethod methods={ config.verification_options }/>
         </Grid>
         { content }
-        { Boolean(method) && (
+        { formState.errors.root?.message && <Text color="error"mt={ 4 } fontSize="sm" whiteSpace="pre-wrap">{ formState.errors.root.message }</Text> }
+        { Boolean(method) && method.value !== 'solidity-hardhat' && method.value !== 'solidity-foundry' && (
           <Button
             variant="solid"
             size="lg"
diff --git a/ui/contractVerification/ContractVerificationFormCodeSnippet.tsx b/ui/contractVerification/ContractVerificationFormCodeSnippet.tsx
new file mode 100644
index 0000000000..d234eb9447
--- /dev/null
+++ b/ui/contractVerification/ContractVerificationFormCodeSnippet.tsx
@@ -0,0 +1,16 @@
+import { Code } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  code: string;
+}
+
+const ContractVerificationFormCodeSnippet = ({ code }: Props) => {
+  return (
+    <Code whiteSpace="pre-wrap" wordBreak="break-all" p={ 2 } borderRadius="base">
+      { code }
+    </Code>
+  );
+};
+
+export default React.memo(ContractVerificationFormCodeSnippet);
diff --git a/ui/contractVerification/ContractVerificationFormRow.tsx b/ui/contractVerification/ContractVerificationFormRow.tsx
index fe38e53c87..eee0137e3f 100644
--- a/ui/contractVerification/ContractVerificationFormRow.tsx
+++ b/ui/contractVerification/ContractVerificationFormRow.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import useIsMobile from 'lib/hooks/useIsMobile';
 
 interface Props {
-  children: [JSX.Element, JSX.Element | null] | (JSX.Element | null);
+  children: [React.JSX.Element, React.JSX.Element | null] | (React.JSX.Element | null);
   className?: string;
 }
 
diff --git a/ui/contractVerification/ContractVerificationMethod.tsx b/ui/contractVerification/ContractVerificationMethod.tsx
index 24bef17bf4..9e5a081f36 100644
--- a/ui/contractVerification/ContractVerificationMethod.tsx
+++ b/ui/contractVerification/ContractVerificationMethod.tsx
@@ -4,14 +4,15 @@ import React from 'react';
 interface Props {
   title: string;
   children: React.ReactNode;
+  disableScroll?: boolean;
 }
 
-const ContractVerificationMethod = ({ title, children }: Props) => {
+const ContractVerificationMethod = ({ title, children, disableScroll }: Props) => {
   const ref = React.useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
-    ref.current?.scrollIntoView({ behavior: 'smooth' });
-  }, []);
+    !disableScroll && ref.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [ disableScroll ]);
 
   return (
     <section ref={ ref }>
diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_dark-color-mode_flatten-source-code-method-dark-mode-mobile-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_dark-color-mode_flatten-source-code-method-dark-mode-mobile-1.png
index b142a092b0..10c37ff9e6 100644
Binary files a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_dark-color-mode_flatten-source-code-method-dark-mode-mobile-1.png and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_dark-color-mode_flatten-source-code-method-dark-mode-mobile-1.png differ
diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_flatten-source-code-method-dark-mode-mobile-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_flatten-source-code-method-dark-mode-mobile-1.png
index 4943890371..fe1f9b7a9b 100644
Binary files a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_flatten-source-code-method-dark-mode-mobile-1.png and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_flatten-source-code-method-dark-mode-mobile-1.png differ
diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_multi-part-files-method-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_multi-part-files-method-1.png
index 97f9d82d25..a176468417 100644
Binary files a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_multi-part-files-method-1.png and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_multi-part-files-method-1.png differ
diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_solidity-foundry-method-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_solidity-foundry-method-1.png
new file mode 100644
index 0000000000..6836cee745
Binary files /dev/null and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_solidity-foundry-method-1.png differ
diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_solidity-hardhat-method-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_solidity-hardhat-method-1.png
new file mode 100644
index 0000000000..a89b72725d
Binary files /dev/null and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_solidity-hardhat-method-1.png differ
diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_sourcify-with-multiple-contracts-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_sourcify-with-multiple-contracts-1.png
index ee8f87002c..fbf689f480 100644
Binary files a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_sourcify-with-multiple-contracts-1.png and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_sourcify-with-multiple-contracts-1.png differ
diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_sourcify-with-multiple-contracts-2.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_sourcify-with-multiple-contracts-2.png
index 9c4ba1955e..23a46cfca4 100644
Binary files a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_sourcify-with-multiple-contracts-2.png and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_sourcify-with-multiple-contracts-2.png differ
diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_standard-input-json-method-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_standard-input-json-method-1.png
index 742e849f00..c98b7bb170 100644
Binary files a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_standard-input-json-method-1.png and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_standard-input-json-method-1.png differ
diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_verification-of-stylus-rust-contract-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_verification-of-stylus-rust-contract-1.png
new file mode 100644
index 0000000000..9e18c44ba7
Binary files /dev/null and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_verification-of-stylus-rust-contract-1.png differ
diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_verification-of-zkSync-contract-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_verification-of-zkSync-contract-1.png
new file mode 100644
index 0000000000..aac3c2975b
Binary files /dev/null and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_verification-of-zkSync-contract-1.png differ
diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-contract-method-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-contract-method-1.png
index 575cbb0102..c1d442b550 100644
Binary files a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-contract-method-1.png and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-contract-method-1.png differ
diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-multi-part-method-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-multi-part-method-1.png
index 218d41f8d5..0f1bd5da55 100644
Binary files a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-multi-part-method-1.png and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-multi-part-method-1.png differ
diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-vyper-standard-input-method-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-vyper-standard-input-method-1.png
index 0accffd8ea..881d7234e7 100644
Binary files a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-vyper-standard-input-method-1.png and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-vyper-standard-input-method-1.png differ
diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_mobile_flatten-source-code-method-dark-mode-mobile-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_mobile_flatten-source-code-method-dark-mode-mobile-1.png
index 8862ea1733..4a3ff11b2e 100644
Binary files a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_mobile_flatten-source-code-method-dark-mode-mobile-1.png and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_mobile_flatten-source-code-method-dark-mode-mobile-1.png differ
diff --git a/ui/contractVerification/fields/ContractVerificationFieldAddress.tsx b/ui/contractVerification/fields/ContractVerificationFieldAddress.tsx
index 0d5890ba17..ab94424c2b 100644
--- a/ui/contractVerification/fields/ContractVerificationFieldAddress.tsx
+++ b/ui/contractVerification/fields/ContractVerificationFieldAddress.tsx
@@ -1,12 +1,9 @@
-import { FormControl, Input, chakra } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import React from 'react';
-import type { ControllerRenderProps } from 'react-hook-form';
-import { Controller, useFormContext } from 'react-hook-form';
 
 import type { FormFields } from '../types';
 
-import { ADDRESS_REGEXP, ADDRESS_LENGTH } from 'lib/validations/address';
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
+import FormFieldAddress from 'ui/shared/forms/fields/FormFieldAddress';
 
 import ContractVerificationFormRow from '../ContractVerificationFormRow';
 
@@ -15,26 +12,6 @@ interface Props {
 }
 
 const ContractVerificationFieldAddress = ({ isReadOnly }: Props) => {
-  const { formState, control } = useFormContext<FormFields>();
-
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'address'>}) => {
-    const error = 'address' in formState.errors ? formState.errors.address : undefined;
-
-    return (
-      <FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }}>
-        <Input
-          { ...field }
-          required
-          isInvalid={ Boolean(error) }
-          maxLength={ ADDRESS_LENGTH }
-          isDisabled={ formState.isSubmitting || isReadOnly }
-          autoComplete="off"
-        />
-        <InputPlaceholder text="Smart contract / Address (0x...)" error={ error }/>
-      </FormControl>
-    );
-  }, [ formState.errors, formState.isSubmitting, isReadOnly ]);
-
   return (
     <>
       <ContractVerificationFormRow>
@@ -42,12 +19,13 @@ const ContractVerificationFieldAddress = ({ isReadOnly }: Props) => {
           Contract address to verify
         </chakra.span>
       </ContractVerificationFormRow>
-      <ContractVerificationFormRow mb={ 3 }>
-        <Controller
+      <ContractVerificationFormRow>
+        <FormFieldAddress<FormFields>
           name="address"
-          control={ control }
-          render={ renderControl }
-          rules={{ required: true, pattern: ADDRESS_REGEXP }}
+          isRequired
+          placeholder="Smart contract / Address (0x...)"
+          isReadOnly={ isReadOnly }
+          size={{ base: 'md', lg: 'lg' }}
         />
       </ContractVerificationFormRow>
     </>
diff --git a/ui/contractVerification/fields/ContractVerificationFieldAutodetectArgs.tsx b/ui/contractVerification/fields/ContractVerificationFieldAutodetectArgs.tsx
index 5242ef703d..3d74f91678 100644
--- a/ui/contractVerification/fields/ContractVerificationFieldAutodetectArgs.tsx
+++ b/ui/contractVerification/fields/ContractVerificationFieldAutodetectArgs.tsx
@@ -1,39 +1,29 @@
 import React from 'react';
-import type { ControllerRenderProps } from 'react-hook-form';
-import { Controller, useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
 
 import type { FormFields } from '../types';
 
-import CheckboxInput from 'ui/shared/CheckboxInput';
+import FormFieldCheckbox from 'ui/shared/forms/fields/FormFieldCheckbox';
 
 import ContractVerificationFormRow from '../ContractVerificationFormRow';
 import ContractVerificationFieldConstructorArgs from './ContractVerificationFieldConstructorArgs';
 
 const ContractVerificationFieldAutodetectArgs = () => {
   const [ isOn, setIsOn ] = React.useState(true);
-  const { formState, control, resetField } = useFormContext<FormFields>();
+  const { resetField } = useFormContext<FormFields>();
 
   const handleCheckboxChange = React.useCallback(() => {
     !isOn && resetField('constructor_args');
     setIsOn(prev => !prev);
   }, [ isOn, resetField ]);
 
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'autodetect_constructor_args'>}) => (
-    <CheckboxInput<FormFields, 'autodetect_constructor_args'>
-      text="Try to fetch constructor arguments automatically"
-      field={ field }
-      isDisabled={ formState.isSubmitting }
-      onChange={ handleCheckboxChange }
-    />
-  ), [ formState.isSubmitting, handleCheckboxChange ]);
-
   return (
     <>
       <ContractVerificationFormRow>
-        <Controller
+        <FormFieldCheckbox<FormFields, 'autodetect_constructor_args'>
           name="autodetect_constructor_args"
-          control={ control }
-          render={ renderControl }
+          label="Try to fetch constructor arguments automatically"
+          onChange={ handleCheckboxChange }
         />
       </ContractVerificationFormRow>
       { !isOn && <ContractVerificationFieldConstructorArgs/> }
diff --git a/ui/contractVerification/fields/ContractVerificationFieldCode.tsx b/ui/contractVerification/fields/ContractVerificationFieldCode.tsx
index 4e956558d6..1196b989f4 100644
--- a/ui/contractVerification/fields/ContractVerificationFieldCode.tsx
+++ b/ui/contractVerification/fields/ContractVerificationFieldCode.tsx
@@ -1,12 +1,8 @@
-import { FormControl, Link, Textarea } from '@chakra-ui/react';
 import React from 'react';
-import type { ControllerRenderProps } from 'react-hook-form';
-import { useFormContext, Controller } from 'react-hook-form';
 
 import type { FormFields } from '../types';
 
-import FieldError from 'ui/shared/forms/FieldError';
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
+import FormFieldText from 'ui/shared/forms/fields/FormFieldText';
 
 import ContractVerificationFormRow from '../ContractVerificationFormRow';
 
@@ -15,40 +11,17 @@ interface Props {
 }
 
 const ContractVerificationFieldCode = ({ isVyper }: Props) => {
-  const { formState, control } = useFormContext<FormFields>();
-
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'code'>}) => {
-    const error = 'code' in formState.errors ? formState.errors.code : undefined;
-
-    return (
-      <FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }}>
-        <Textarea
-          { ...field }
-          isInvalid={ Boolean(error) }
-          isDisabled={ formState.isSubmitting }
-          required
-        />
-        <InputPlaceholder text="Contract code"/>
-        { error?.message && <FieldError message={ error?.message }/> }
-      </FormControl>
-    );
-  }, [ formState.errors, formState.isSubmitting ]);
-
   return (
     <ContractVerificationFormRow>
-      <Controller
+      <FormFieldText<FormFields>
         name="code"
-        control={ control }
-        render={ renderControl }
-        rules={{ required: true }}
+        isRequired
+        placeholder="Contract code"
+        size={{ base: 'md', lg: 'lg' }}
+        asComponent="Textarea"
       />
       { isVyper ? null : (
-        <>
-          <span>We recommend using flattened code. This is necessary if your code utilizes a library or inherits dependencies. Use the </span>
-          <Link href="https://github.com/poanetwork/solidity-flattener" target="_blank">POA solidity flattener</Link>
-          <span> or the </span>
-          <Link href="https://www.npmjs.com/package/truffle-flattener" target="_blank">Truffle flattener</Link>
-        </>
+        <span>If your code utilizes a library or inherits dependencies, we recommend using other verification methods instead.</span>
       ) }
     </ContractVerificationFormRow>
   );
diff --git a/ui/contractVerification/fields/ContractVerificationFieldCommit.tsx b/ui/contractVerification/fields/ContractVerificationFieldCommit.tsx
new file mode 100644
index 0000000000..a95b770eb3
--- /dev/null
+++ b/ui/contractVerification/fields/ContractVerificationFieldCommit.tsx
@@ -0,0 +1,119 @@
+import { chakra, Code, Link } from '@chakra-ui/react';
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import delay from 'lib/delay';
+import useFetch from 'lib/hooks/useFetch';
+import FormFieldText from 'ui/shared/forms/fields/FormFieldText';
+
+import ContractVerificationFormRow from '../ContractVerificationFormRow';
+import { getGitHubOwnerAndRepo } from '../utils';
+
+const COMMIT_HASH_PATTERN = /^([a-f0-9]{40}|[a-f0-9]{7})$/;
+
+interface Props {
+  latestCommitHash: string | undefined;
+}
+
+const ContractVerificationFieldCommit = ({ latestCommitHash }: Props) => {
+  const hashErrorRef = React.useRef<string | undefined>(undefined);
+  const fetch = useFetch();
+  const { getValues, trigger, setValue, getFieldState } = useFormContext<FormFields>();
+
+  const handleUseLatestCommitClick = React.useCallback(() => {
+    if (latestCommitHash) {
+      setValue('commit_hash', latestCommitHash);
+      trigger('commit_hash');
+    }
+  }, [ setValue, trigger, latestCommitHash ]);
+
+  const handleBlur = React.useCallback(async() => {
+    await delay(100); // have to wait to properly trigger subsequent validation
+    const repositoryUrlValue = getValues('repository_url');
+    const repositoryUrlState = getFieldState('repository_url');
+
+    if (!repositoryUrlValue || repositoryUrlState.invalid) {
+      return;
+    }
+
+    const { error } = getFieldState('commit_hash');
+
+    if (error && error.type !== 'commitHash') {
+      return;
+    }
+
+    const commitHash = getValues('commit_hash');
+
+    if (!commitHash) {
+      hashErrorRef.current = undefined;
+      trigger('commit_hash');
+      return;
+    }
+
+    const gitHubData = getGitHubOwnerAndRepo(repositoryUrlValue);
+
+    if (gitHubData) {
+      try {
+        const response = await fetch<{ sha?: string }, unknown>(
+          `https://api.github.com/repos/${ gitHubData.owner }/${ gitHubData.repo }/commits/${ commitHash }`,
+        );
+
+        if ('sha' in response) {
+          hashErrorRef.current = undefined;
+          trigger('commit_hash');
+          return;
+        }
+      } catch (error) {}
+    }
+
+    hashErrorRef.current = 'Commit hash not found in the repository';
+    trigger('commit_hash');
+  }, [ fetch, getValues, trigger, getFieldState ]);
+
+  React.useEffect(() => {
+    if (latestCommitHash) {
+      // revalidate field every time the latest commit hash changes
+      // because the repository url field has changed
+      handleBlur();
+    }
+  }, [ handleBlur, latestCommitHash ]);
+
+  const commitHashValidator = React.useCallback(() => {
+    return hashErrorRef.current ? hashErrorRef.current : true;
+  }, []);
+
+  const rules = React.useMemo(() => {
+    return {
+      validate: {
+        commitHash: commitHashValidator,
+      },
+      pattern: COMMIT_HASH_PATTERN,
+    };
+  }, [ commitHashValidator ]);
+
+  return (
+    <ContractVerificationFormRow>
+      <FormFieldText<FormFields>
+        name="commit_hash"
+        placeholder="Commit hash"
+        isRequired
+        size={{ base: 'md', lg: 'lg' }}
+        onBlur={ handleBlur }
+        rules={ rules }
+      />
+      { latestCommitHash && (
+        <chakra.div>
+          <span >We have found the latest commit hash for the repository: </span>
+          <Code color="text_secondary">{ latestCommitHash.slice(0, 7) }</Code>
+          <span>. If you want to use it, </span>
+          <Link onClick={ handleUseLatestCommitClick }>click here</Link>
+          <span>.</span>
+        </chakra.div>
+      ) }
+    </ContractVerificationFormRow>
+  );
+};
+
+export default React.memo(ContractVerificationFieldCommit);
diff --git a/ui/contractVerification/fields/ContractVerificationFieldCompiler.tsx b/ui/contractVerification/fields/ContractVerificationFieldCompiler.tsx
index 4d19802460..e4d08306cc 100644
--- a/ui/contractVerification/fields/ContractVerificationFieldCompiler.tsx
+++ b/ui/contractVerification/fields/ContractVerificationFieldCompiler.tsx
@@ -1,15 +1,13 @@
 import { chakra, Checkbox, Code } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import React from 'react';
-import type { ControllerRenderProps } from 'react-hook-form';
-import { useFormContext, Controller } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
 
 import type { FormFields } from '../types';
-import type { SmartContractVerificationConfig } from 'types/api/contract';
+import type { SmartContractVerificationConfig } from 'types/client/contract';
 
 import { getResourceKey } from 'lib/api/useApiQuery';
-import useIsMobile from 'lib/hooks/useIsMobile';
-import FancySelect from 'ui/shared/FancySelect/FancySelect';
+import FormFieldFancySelect from 'ui/shared/forms/fields/FormFieldFancySelect';
 import IconSvg from 'ui/shared/IconSvg';
 
 import ContractVerificationFormRow from '../ContractVerificationFormRow';
@@ -18,12 +16,12 @@ const OPTIONS_LIMIT = 50;
 
 interface Props {
   isVyper?: boolean;
+  isStylus?: boolean;
 }
 
-const ContractVerificationFieldCompiler = ({ isVyper }: Props) => {
+const ContractVerificationFieldCompiler = ({ isVyper, isStylus }: Props) => {
   const [ isNightly, setIsNightly ] = React.useState(false);
-  const { formState, control, getValues, resetField } = useFormContext<FormFields>();
-  const isMobile = useIsMobile();
+  const { formState, getValues, resetField } = useFormContext<FormFields>();
   const queryClient = useQueryClient();
   const config = queryClient.getQueryData<SmartContractVerificationConfig>(getResourceKey('contract_verification_config'));
 
@@ -35,9 +33,19 @@ const ContractVerificationFieldCompiler = ({ isVyper }: Props) => {
     setIsNightly(prev => !prev);
   }, [ getValues, isNightly, resetField ]);
 
-  const options = React.useMemo(() => (
-    (isVyper ? config?.vyper_compiler_versions : config?.solidity_compiler_versions)?.map((option) => ({ label: option, value: option })) || []
-  ), [ config?.solidity_compiler_versions, config?.vyper_compiler_versions, isVyper ]);
+  const options = React.useMemo(() => {
+    const versions = (() => {
+      if (isStylus) {
+        return config?.stylus_compiler_versions;
+      }
+      if (isVyper) {
+        return config?.vyper_compiler_versions;
+      }
+      return config?.solidity_compiler_versions;
+    })();
+
+    return versions?.map((option) => ({ label: option, value: option })) || [];
+  }, [ isStylus, isVyper, config?.solidity_compiler_versions, config?.stylus_compiler_versions, config?.vyper_compiler_versions ]);
 
   const loadOptions = React.useCallback(async(inputValue: string) => {
     return options
@@ -46,29 +54,10 @@ const ContractVerificationFieldCompiler = ({ isVyper }: Props) => {
       .slice(0, OPTIONS_LIMIT);
   }, [ isNightly, options ]);
 
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'compiler'>}) => {
-    const error = 'compiler' in formState.errors ? formState.errors.compiler : undefined;
-
-    return (
-      <FancySelect
-        { ...field }
-        loadOptions={ loadOptions }
-        defaultOptions
-        size={ isMobile ? 'md' : 'lg' }
-        placeholder="Compiler (enter version or use the dropdown)"
-        placeholderIcon={ <IconSvg name="search"/> }
-        isDisabled={ formState.isSubmitting }
-        error={ error }
-        isRequired
-        isAsync
-      />
-    );
-  }, [ formState.errors, formState.isSubmitting, isMobile, loadOptions ]);
-
   return (
     <ContractVerificationFormRow>
       <>
-        { !isVyper && (
+        { !isVyper && !isStylus && (
           <Checkbox
             size="lg"
             mb={ 2 }
@@ -78,14 +67,17 @@ const ContractVerificationFieldCompiler = ({ isVyper }: Props) => {
             Include nightly builds
           </Checkbox>
         ) }
-        <Controller
+        <FormFieldFancySelect<FormFields, 'compiler'>
           name="compiler"
-          control={ control }
-          render={ renderControl }
-          rules={{ required: true }}
+          placeholder="Compiler (enter version or use the dropdown)"
+          loadOptions={ loadOptions }
+          defaultOptions
+          placeholderIcon={ <IconSvg name="search"/> }
+          isRequired
+          isAsync
         />
       </>
-      { isVyper ? null : (
+      { isVyper || isStylus ? null : (
         <chakra.div mt={{ base: 0, lg: 8 }}>
           <span >The compiler version is specified in </span>
           <Code color="text_secondary">pragma solidity X.X.X</Code>
diff --git a/ui/contractVerification/fields/ContractVerificationFieldConstructorArgs.tsx b/ui/contractVerification/fields/ContractVerificationFieldConstructorArgs.tsx
index 13cfe2fa37..295ab30a01 100644
--- a/ui/contractVerification/fields/ContractVerificationFieldConstructorArgs.tsx
+++ b/ui/contractVerification/fields/ContractVerificationFieldConstructorArgs.tsx
@@ -1,43 +1,22 @@
-import { FormControl, Link, Textarea } from '@chakra-ui/react';
+import { Link } from '@chakra-ui/react';
 import React from 'react';
-import type { ControllerRenderProps } from 'react-hook-form';
-import { Controller, useFormContext } from 'react-hook-form';
 
 import type { FormFields } from '../types';
 
-import FieldError from 'ui/shared/forms/FieldError';
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
+import FormFieldText from 'ui/shared/forms/fields/FormFieldText';
 
 import ContractVerificationFormRow from '../ContractVerificationFormRow';
 
 const ContractVerificationFieldConstructorArgs = () => {
-  const { formState, control } = useFormContext<FormFields>();
-
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'constructor_args'>}) => {
-    const error = 'constructor_args' in formState.errors ? formState.errors.constructor_args : undefined;
-
-    return (
-      <FormControl variant="floating" id={ field.name } size={{ base: 'md', lg: 'lg' }} isRequired>
-        <Textarea
-          { ...field }
-          maxLength={ 255 }
-          isDisabled={ formState.isSubmitting }
-          isInvalid={ Boolean(error) }
-          required
-        />
-        <InputPlaceholder text="ABI-encoded Constructor Arguments"/>
-        { error?.message && <FieldError message={ error?.message }/> }
-      </FormControl>
-    );
-  }, [ formState.errors, formState.isSubmitting ]);
-
   return (
     <ContractVerificationFormRow>
-      <Controller
+      <FormFieldText<FormFields>
         name="constructor_args"
-        control={ control }
-        render={ renderControl }
-        rules={{ required: true }}
+        isRequired
+        rules={{ maxLength: 255 }}
+        placeholder="ABI-encoded Constructor Arguments"
+        size={{ base: 'md', lg: 'lg' }}
+        asComponent="Textarea"
       />
       <>
         <span>Add arguments in </span>
diff --git a/ui/contractVerification/fields/ContractVerificationFieldContractIndex.tsx b/ui/contractVerification/fields/ContractVerificationFieldContractIndex.tsx
index 272e06de7d..6cf5604914 100644
--- a/ui/contractVerification/fields/ContractVerificationFieldContractIndex.tsx
+++ b/ui/contractVerification/fields/ContractVerificationFieldContractIndex.tsx
@@ -1,13 +1,11 @@
 import { useUpdateEffect } from '@chakra-ui/react';
 import React from 'react';
-import type { ControllerRenderProps } from 'react-hook-form';
-import { useFormContext, Controller } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
 
 import type { FormFields } from '../types';
-import type { Option } from 'ui/shared/FancySelect/types';
+import type { Option } from 'ui/shared/forms/inputs/select/types';
 
-import useIsMobile from 'lib/hooks/useIsMobile';
-import FancySelect from 'ui/shared/FancySelect/FancySelect';
+import FormFieldFancySelect from 'ui/shared/forms/fields/FormFieldFancySelect';
 
 import ContractVerificationFormRow from '../ContractVerificationFormRow';
 
@@ -15,8 +13,7 @@ const SOURCIFY_ERROR_REGEXP = /\(([^()]*)\)/;
 
 const ContractVerificationFieldContractIndex = () => {
   const [ options, setOptions ] = React.useState<Array<Option>>([]);
-  const { formState, control, watch } = useFormContext<FormFields>();
-  const isMobile = useIsMobile();
+  const { formState, watch } = useFormContext<FormFields>();
 
   const sources = watch('sources');
   const sourcesError = 'sources' in formState.errors ? formState.errors.sources?.message : undefined;
@@ -40,34 +37,18 @@ const ContractVerificationFieldContractIndex = () => {
     setOptions([]);
   }, [ sources ]);
 
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'contract_index'>}) => {
-    const error = 'contract_index' in formState.errors ? formState.errors.contract_index : undefined;
-
-    return (
-      <FancySelect
-        { ...field }
-        options={ options }
-        size={ isMobile ? 'md' : 'lg' }
-        placeholder="Contract name"
-        isDisabled={ formState.isSubmitting }
-        error={ error }
-        isRequired
-        isAsync={ false }
-      />
-    );
-  }, [ formState.errors, formState.isSubmitting, isMobile, options ]);
-
   if (options.length === 0) {
     return null;
   }
 
   return (
     <ContractVerificationFormRow>
-      <Controller
+      <FormFieldFancySelect<FormFields, 'contract_index'>
         name="contract_index"
-        control={ control }
-        render={ renderControl }
-        rules={{ required: true }}
+        placeholder="Contract name"
+        options={ options }
+        isRequired
+        isAsync={ false }
       />
     </ContractVerificationFormRow>
   );
diff --git a/ui/contractVerification/fields/ContractVerificationFieldEvmVersion.tsx b/ui/contractVerification/fields/ContractVerificationFieldEvmVersion.tsx
index ce56eec145..79af135b63 100644
--- a/ui/contractVerification/fields/ContractVerificationFieldEvmVersion.tsx
+++ b/ui/contractVerification/fields/ContractVerificationFieldEvmVersion.tsx
@@ -1,15 +1,12 @@
 import { Link } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import React from 'react';
-import type { ControllerRenderProps } from 'react-hook-form';
-import { useFormContext, Controller } from 'react-hook-form';
 
 import type { FormFields } from '../types';
-import type { SmartContractVerificationConfig } from 'types/api/contract';
+import type { SmartContractVerificationConfig } from 'types/client/contract';
 
 import { getResourceKey } from 'lib/api/useApiQuery';
-import useIsMobile from 'lib/hooks/useIsMobile';
-import FancySelect from 'ui/shared/FancySelect/FancySelect';
+import FormFieldFancySelect from 'ui/shared/forms/fields/FormFieldFancySelect';
 
 import ContractVerificationFormRow from '../ContractVerificationFormRow';
 
@@ -18,8 +15,6 @@ interface Props {
 }
 
 const ContractVerificationFieldEvmVersion = ({ isVyper }: Props) => {
-  const { formState, control } = useFormContext<FormFields>();
-  const isMobile = useIsMobile();
   const queryClient = useQueryClient();
   const config = queryClient.getQueryData<SmartContractVerificationConfig>(getResourceKey('contract_verification_config'));
 
@@ -27,29 +22,13 @@ const ContractVerificationFieldEvmVersion = ({ isVyper }: Props) => {
     (isVyper ? config?.vyper_evm_versions : config?.solidity_evm_versions)?.map((option) => ({ label: option, value: option })) || []
   ), [ config?.solidity_evm_versions, config?.vyper_evm_versions, isVyper ]);
 
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'evm_version'>}) => {
-    const error = 'evm_version' in formState.errors ? formState.errors.evm_version : undefined;
-
-    return (
-      <FancySelect
-        { ...field }
-        options={ options }
-        size={ isMobile ? 'md' : 'lg' }
-        placeholder="EVM Version"
-        isDisabled={ formState.isSubmitting }
-        error={ error }
-        isRequired
-      />
-    );
-  }, [ formState.errors, formState.isSubmitting, isMobile, options ]);
-
   return (
     <ContractVerificationFormRow>
-      <Controller
+      <FormFieldFancySelect<FormFields, 'evm_version'>
         name="evm_version"
-        control={ control }
-        render={ renderControl }
-        rules={{ required: true }}
+        placeholder="EVM Version"
+        options={ options }
+        isRequired
       />
       <>
         <span>The EVM version the contract is written for. If the bytecode does not match the version, we try to verify using the latest EVM version. </span>
diff --git a/ui/contractVerification/fields/ContractVerificationFieldGitHubRepo.tsx b/ui/contractVerification/fields/ContractVerificationFieldGitHubRepo.tsx
new file mode 100644
index 0000000000..68e378b868
--- /dev/null
+++ b/ui/contractVerification/fields/ContractVerificationFieldGitHubRepo.tsx
@@ -0,0 +1,85 @@
+import _get from 'lodash/get';
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import delay from 'lib/delay';
+import useFetch from 'lib/hooks/useFetch';
+import FormFieldUrl from 'ui/shared/forms/fields/FormFieldUrl';
+
+import ContractVerificationFormRow from '../ContractVerificationFormRow';
+import { getGitHubOwnerAndRepo } from '../utils';
+
+interface Props {
+  onCommitHashChange: (commitHash?: string) => void;
+}
+
+const ContractVerificationFieldGitHubRepo = ({ onCommitHashChange }: Props) => {
+  const repoErrorRef = React.useRef<string | undefined>(undefined);
+  const fetch = useFetch();
+  const { getValues, trigger, getFieldState } = useFormContext<FormFields>();
+
+  const handleBlur = React.useCallback(async() => {
+    await delay(100); // have to wait to properly trigger subsequent validation
+    const repositoryUrl = getValues('repository_url');
+    const { error } = getFieldState('repository_url');
+
+    if (error && error.type !== 'repoUrl') {
+      return;
+    }
+
+    if (!repositoryUrl) {
+      repoErrorRef.current = undefined;
+      trigger('repository_url');
+      onCommitHashChange();
+      return;
+    }
+
+    const gitHubData = getGitHubOwnerAndRepo(repositoryUrl);
+
+    if (gitHubData && gitHubData.rest.length === 0 && !gitHubData.url.search && !gitHubData.url.hash) {
+      try {
+        const response = await fetch(`https://api.github.com/repos/${ gitHubData.owner }/${ gitHubData.repo }/commits?per_page=1`);
+        repoErrorRef.current = undefined;
+        trigger('repository_url');
+        onCommitHashChange(_get(response, '[0].sha'));
+        return;
+      } catch (error) {
+        repoErrorRef.current = 'GitHub repository not found';
+      }
+    } else {
+      repoErrorRef.current = 'Invalid GitHub repository URL';
+    }
+
+    trigger('repository_url');
+    onCommitHashChange();
+  }, [ fetch, getValues, getFieldState, onCommitHashChange, trigger ]);
+
+  const repoUrlValidator = React.useCallback(() => {
+    return repoErrorRef.current ? repoErrorRef.current : true;
+  }, []);
+
+  const rules = React.useMemo(() => {
+    return {
+      validate: {
+        repoUrl: repoUrlValidator,
+      },
+    };
+  }, [ repoUrlValidator ]);
+
+  return (
+    <ContractVerificationFormRow>
+      <FormFieldUrl<FormFields>
+        name="repository_url"
+        placeholder="GitHub repository URL"
+        isRequired
+        size={{ base: 'md', lg: 'lg' }}
+        onBlur={ handleBlur }
+        rules={ rules }
+      />
+    </ContractVerificationFormRow>
+  );
+};
+
+export default React.memo(ContractVerificationFieldGitHubRepo);
diff --git a/ui/contractVerification/fields/ContractVerificationFieldIsYul.tsx b/ui/contractVerification/fields/ContractVerificationFieldIsYul.tsx
index c19a9138bd..ab55036ced 100644
--- a/ui/contractVerification/fields/ContractVerificationFieldIsYul.tsx
+++ b/ui/contractVerification/fields/ContractVerificationFieldIsYul.tsx
@@ -1,26 +1,17 @@
 import React from 'react';
-import type { ControllerRenderProps } from 'react-hook-form';
-import { useFormContext, Controller } from 'react-hook-form';
 
 import type { FormFields } from '../types';
 
-import CheckboxInput from 'ui/shared/CheckboxInput';
+import FormFieldCheckbox from 'ui/shared/forms/fields/FormFieldCheckbox';
 
 import ContractVerificationFormRow from '../ContractVerificationFormRow';
 
 const ContractVerificationFieldIsYul = () => {
-  const { formState, control } = useFormContext<FormFields>();
-
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'is_yul'>}) => (
-    <CheckboxInput<FormFields, 'is_yul'> text="Is Yul contract" field={ field } isDisabled={ formState.isSubmitting }/>
-  ), [ formState.isSubmitting ]);
-
   return (
     <ContractVerificationFormRow>
-      <Controller
+      <FormFieldCheckbox<FormFields, 'is_yul'>
         name="is_yul"
-        control={ control }
-        render={ renderControl }
+        label="Is Yul contract"
       />
     </ContractVerificationFormRow>
   );
diff --git a/ui/contractVerification/fields/ContractVerificationFieldLibraries.tsx b/ui/contractVerification/fields/ContractVerificationFieldLibraries.tsx
index cbe99b21d5..702b81d574 100644
--- a/ui/contractVerification/fields/ContractVerificationFieldLibraries.tsx
+++ b/ui/contractVerification/fields/ContractVerificationFieldLibraries.tsx
@@ -56,11 +56,9 @@ const ContractVerificationFieldLibraries = () => {
         <ContractVerificationFieldLibraryItem
           key={ field.id }
           index={ index }
-          control={ control }
           fieldsLength={ fields.length }
           onAddFieldClick={ handleAddFieldClick }
           onRemoveFieldClick={ handleRemoveFieldClick }
-          error={ 'libraries' in formState.errors ? formState.errors.libraries?.[index] : undefined }
           isDisabled={ formState.isSubmitting }
         />
       )) }
diff --git a/ui/contractVerification/fields/ContractVerificationFieldLibraryItem.tsx b/ui/contractVerification/fields/ContractVerificationFieldLibraryItem.tsx
index d4c79826a6..bb27142d2e 100644
--- a/ui/contractVerification/fields/ContractVerificationFieldLibraryItem.tsx
+++ b/ui/contractVerification/fields/ContractVerificationFieldLibraryItem.tsx
@@ -1,65 +1,27 @@
-import { Flex, FormControl, IconButton, Input, Text } from '@chakra-ui/react';
+import { Flex, IconButton, Text } from '@chakra-ui/react';
 import React from 'react';
-import type { Control, ControllerRenderProps, FieldError } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
 
 import type { FormFields } from '../types';
 
-import { ADDRESS_REGEXP } from 'lib/validations/address';
+import FormFieldAddress from 'ui/shared/forms/fields/FormFieldAddress';
+import FormFieldText from 'ui/shared/forms/fields/FormFieldText';
 import IconSvg from 'ui/shared/IconSvg';
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 import ContractVerificationFormRow from '../ContractVerificationFormRow';
 
 const LIMIT = 10;
 
 interface Props {
-  control: Control<FormFields>;
   index: number;
   fieldsLength: number;
-  error?: {
-    name?: FieldError;
-    address?: FieldError;
-  };
   onAddFieldClick: (index: number) => void;
   onRemoveFieldClick: (index: number) => void;
   isDisabled?: boolean;
 }
 
-const ContractVerificationFieldLibraryItem = ({ control, index, fieldsLength, onAddFieldClick, onRemoveFieldClick, error, isDisabled }: Props) => {
+const ContractVerificationFieldLibraryItem = ({ index, fieldsLength, onAddFieldClick, onRemoveFieldClick, isDisabled }: Props) => {
   const ref = React.useRef<HTMLDivElement>(null);
 
-  const renderNameControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, `libraries.${ number }.name`>}) => {
-    return (
-      <FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }}>
-        <Input
-          { ...field }
-          required
-          isInvalid={ Boolean(error?.name) }
-          isDisabled={ isDisabled }
-          maxLength={ 255 }
-          autoComplete="off"
-        />
-        <InputPlaceholder text="Library name (.sol file)" error={ error?.name }/>
-      </FormControl>
-    );
-  }, [ error?.name, isDisabled ]);
-
-  const renderAddressControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, `libraries.${ number }.address`>}) => {
-    return (
-      <FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }}>
-        <Input
-          { ...field }
-          isInvalid={ Boolean(error?.address) }
-          isDisabled={ isDisabled }
-          required
-          autoComplete="off"
-        />
-        <InputPlaceholder text="Library address (0x...)" error={ error?.address }/>
-      </FormControl>
-    );
-  }, [ error?.address, isDisabled ]);
-
   const handleAddButtonClick = React.useCallback(() => {
     onAddFieldClick(index);
   }, [ index, onAddFieldClick ]);
@@ -104,11 +66,12 @@ const ContractVerificationFieldLibraryItem = ({ control, index, fieldsLength, on
         </Flex>
       </ContractVerificationFormRow>
       <ContractVerificationFormRow>
-        <Controller
+        <FormFieldText<FormFields, `libraries.${ number }.name`>
           name={ `libraries.${ index }.name` }
-          control={ control }
-          render={ renderNameControl }
-          rules={{ required: true }}
+          isRequired
+          rules={{ maxLength: 255 }}
+          placeholder="Library name (.sol file)"
+          size={{ base: 'md', lg: 'lg' }}
         />
         { index === 0 ? (
           <>
@@ -117,15 +80,15 @@ const ContractVerificationFieldLibraryItem = ({ control, index, fieldsLength, on
         ) : null }
       </ContractVerificationFormRow>
       <ContractVerificationFormRow>
-        <Controller
+        <FormFieldAddress<FormFields, `libraries.${ number }.address`>
           name={ `libraries.${ index }.address` }
-          control={ control }
-          render={ renderAddressControl }
-          rules={{ required: true, pattern: ADDRESS_REGEXP }}
+          isRequired
+          placeholder="Library address (0x...)"
+          size={{ base: 'md', lg: 'lg' }}
         />
         { index === 0 ? (
           <>
-              The 0x library address. This can be found in the generated json file or Truffle output (if using truffle).
+            The 0x library address. This can be found in the generated json file or Truffle output (if using truffle).
           </>
         ) : null }
       </ContractVerificationFormRow>
diff --git a/ui/contractVerification/fields/ContractVerificationFieldLicenseType.tsx b/ui/contractVerification/fields/ContractVerificationFieldLicenseType.tsx
new file mode 100644
index 0000000000..520cef6b8b
--- /dev/null
+++ b/ui/contractVerification/fields/ContractVerificationFieldLicenseType.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import type { FormFields } from '../types';
+
+import { CONTRACT_LICENSES } from 'lib/contracts/licenses';
+import FormFieldFancySelect from 'ui/shared/forms/fields/FormFieldFancySelect';
+
+import ContractVerificationFormRow from '../ContractVerificationFormRow';
+
+const options = CONTRACT_LICENSES.map(({ label, title, type }) => ({ label: `${ title } (${ label })`, value: type }));
+
+const ContractVerificationFieldLicenseType = () => {
+
+  return (
+    <ContractVerificationFormRow>
+      <FormFieldFancySelect<FormFields, 'license_type'>
+        name="license_type"
+        placeholder="Contract license"
+        options={ options }
+      />
+      <span>
+        For best practices, all contract source code holders, publishers and authors are encouraged to also
+        specify the accompanying license for their verified contract source code provided.
+      </span>
+    </ContractVerificationFormRow>
+  );
+};
+
+export default React.memo(ContractVerificationFieldLicenseType);
diff --git a/ui/contractVerification/fields/ContractVerificationFieldMethod.tsx b/ui/contractVerification/fields/ContractVerificationFieldMethod.tsx
index 7e9c5088d2..5d6d8fc0c6 100644
--- a/ui/contractVerification/fields/ContractVerificationFieldMethod.tsx
+++ b/ui/contractVerification/fields/ContractVerificationFieldMethod.tsx
@@ -1,7 +1,6 @@
 import {
   Link,
   chakra,
-  Popover,
   PopoverTrigger,
   Portal,
   PopoverContent,
@@ -11,27 +10,25 @@ import {
   DarkMode,
   ListItem,
   OrderedList,
+  Box,
 } from '@chakra-ui/react';
 import React from 'react';
-import type { ControllerRenderProps, Control } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
 
 import type { FormFields } from '../types';
-import type { SmartContractVerificationConfig, SmartContractVerificationMethod } from 'types/api/contract';
+import type { SmartContractVerificationMethod, SmartContractVerificationConfig } from 'types/client/contract';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
-import FancySelect from 'ui/shared/FancySelect/FancySelect';
+import Popover from 'ui/shared/chakra/Popover';
+import FormFieldFancySelect from 'ui/shared/forms/fields/FormFieldFancySelect';
 import IconSvg from 'ui/shared/IconSvg';
 
 import { METHOD_LABELS } from '../utils';
 
 interface Props {
-  control: Control<FormFields>;
-  isDisabled?: boolean;
   methods: SmartContractVerificationConfig['verification_options'];
 }
 
-const ContractVerificationFieldMethod = ({ control, isDisabled, methods }: Props) => {
+const ContractVerificationFieldMethod = ({ methods }: Props) => {
   const tooltipBg = useColorModeValue('gray.700', 'gray.900');
   const isMobile = useIsMobile();
 
@@ -40,24 +37,10 @@ const ContractVerificationFieldMethod = ({ control, isDisabled, methods }: Props
     label: METHOD_LABELS[method],
   })), [ methods ]);
 
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'method'>}) => {
-    return (
-      <FancySelect
-        { ...field }
-        options={ options }
-        size={ isMobile ? 'md' : 'lg' }
-        placeholder="Verification method (compiler type)"
-        isDisabled={ isDisabled }
-        isRequired
-        isAsync={ false }
-      />
-    );
-  }, [ isDisabled, isMobile, options ]);
-
   const renderPopoverListItem = React.useCallback((method: SmartContractVerificationMethod) => {
     switch (method) {
       case 'flattened-code':
-        return <ListItem key={ method }>Verification through flattened source code.</ListItem>;
+        return <ListItem key={ method }>Verification through a single file.</ListItem>;
       case 'multi-part':
         return <ListItem key={ method }>Verification of multi-part Solidity files.</ListItem>;
       case 'sourcify':
@@ -92,19 +75,25 @@ const ContractVerificationFieldMethod = ({ control, isDisabled, methods }: Props
             <span> file.</span>
           </ListItem>
         );
+      case 'solidity-hardhat':
+        return <ListItem key={ method }>Verification through Hardhat plugin.</ListItem>;
+      case 'solidity-foundry':
+        return <ListItem key={ method }>Verification through Foundry.</ListItem>;
+      case 'stylus-github-repository':
+        return <ListItem key={ method }>Verification of Stylus contract via GitHub repository.</ListItem>;
     }
   }, []);
 
   return (
     <>
-      <div>
+      <Box mt={{ base: 10, lg: 6 }} gridColumn={{ lg: '1 / 3' }}>
         <chakra.span fontWeight={ 500 } fontSize="lg" fontFamily="heading">
           Currently, Blockscout supports { methods.length } contract verification methods
         </chakra.span>
         <Popover trigger="hover" isLazy placement={ isMobile ? 'bottom-end' : 'right-start' } offset={ [ -8, 8 ] }>
           <PopoverTrigger>
             <chakra.span display="inline-block" ml={ 1 } cursor="pointer" verticalAlign="middle" h="22px">
-              <IconSvg name="info" boxSize={ 5 } color="link" _hover={{ color: 'link_hovered' }}/>
+              <IconSvg name="info" boxSize={ 5 } color="icon_info" _hover={{ color: 'link_hovered' }}/>
             </chakra.span>
           </PopoverTrigger>
           <Portal>
@@ -121,13 +110,14 @@ const ContractVerificationFieldMethod = ({ control, isDisabled, methods }: Props
             </PopoverContent>
           </Portal>
         </Popover>
-      </div>
-      <div/>
-      <Controller
+      </Box>
+      <FormFieldFancySelect<FormFields, 'method'>
         name="method"
-        control={ control }
-        render={ renderControl }
-        rules={{ required: true }}
+        placeholder="Verification method (compiler type)"
+        options={ options }
+        isRequired
+        isAsync={ false }
+        isReadOnly={ options.length === 1 }
       />
     </>
   );
diff --git a/ui/contractVerification/fields/ContractVerificationFieldName.tsx b/ui/contractVerification/fields/ContractVerificationFieldName.tsx
index 084f92e8ca..5fad4da285 100644
--- a/ui/contractVerification/fields/ContractVerificationFieldName.tsx
+++ b/ui/contractVerification/fields/ContractVerificationFieldName.tsx
@@ -1,47 +1,25 @@
-import { chakra, Code, FormControl, Input } from '@chakra-ui/react';
+import { chakra, Code } from '@chakra-ui/react';
 import React from 'react';
-import type { ControllerRenderProps } from 'react-hook-form';
-import { Controller, useFormContext } from 'react-hook-form';
 
 import type { FormFields } from '../types';
 
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
+import FormFieldText from 'ui/shared/forms/fields/FormFieldText';
 
 import ContractVerificationFormRow from '../ContractVerificationFormRow';
 
 interface Props {
   hint?: string;
-  isReadOnly?: boolean;
 }
 
-const ContractVerificationFieldName = ({ hint, isReadOnly }: Props) => {
-  const { formState, control } = useFormContext<FormFields>();
-
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'name'>}) => {
-    const error = 'name' in formState.errors ? formState.errors.name : undefined;
-
-    return (
-      <FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }}>
-        <Input
-          { ...field }
-          required
-          isInvalid={ Boolean(error) }
-          maxLength={ 255 }
-          isDisabled={ formState.isSubmitting || isReadOnly }
-          autoComplete="off"
-        />
-        <InputPlaceholder text="Contract name" error={ error }/>
-      </FormControl>
-    );
-  }, [ formState.errors, formState.isSubmitting, isReadOnly ]);
-
+const ContractVerificationFieldName = ({ hint }: Props) => {
   return (
     <ContractVerificationFormRow>
-      <Controller
+      <FormFieldText<FormFields>
         name="name"
-        control={ control }
-        render={ renderControl }
-        rules={{ required: true }}
+        isRequired
+        placeholder="Contract name"
+        size={{ base: 'md', lg: 'lg' }}
+        rules={{ maxLength: 255 }}
       />
       { hint ? <span>{ hint }</span> : (
         <>
diff --git a/ui/contractVerification/fields/ContractVerificationFieldOptimization.tsx b/ui/contractVerification/fields/ContractVerificationFieldOptimization.tsx
index 107022d123..a5386a3cb6 100644
--- a/ui/contractVerification/fields/ContractVerificationFieldOptimization.tsx
+++ b/ui/contractVerification/fields/ContractVerificationFieldOptimization.tsx
@@ -1,67 +1,39 @@
-import { Flex, Input } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import React from 'react';
-import type { ControllerRenderProps } from 'react-hook-form';
-import { Controller, useFormContext } from 'react-hook-form';
 
 import type { FormFields } from '../types';
 
-import CheckboxInput from 'ui/shared/CheckboxInput';
+import FormFieldCheckbox from 'ui/shared/forms/fields/FormFieldCheckbox';
+import FormFieldText from 'ui/shared/forms/fields/FormFieldText';
 
 import ContractVerificationFormRow from '../ContractVerificationFormRow';
 
 const ContractVerificationFieldOptimization = () => {
   const [ isEnabled, setIsEnabled ] = React.useState(true);
-  const { formState, control } = useFormContext<FormFields>();
-
-  const error = 'optimization_runs' in formState.errors ? formState.errors.optimization_runs : undefined;
 
   const handleCheckboxChange = React.useCallback(() => {
     setIsEnabled(prev => !prev);
   }, []);
 
-  const renderCheckboxControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'is_optimization_enabled'>}) => (
-    <Flex flexShrink={ 0 }>
-      <CheckboxInput<FormFields, 'is_optimization_enabled'>
-        text="Optimization enabled"
-        field={ field }
-        onChange={ handleCheckboxChange }
-        isDisabled={ formState.isSubmitting }
-      />
-    </Flex>
-  ), [ formState.isSubmitting, handleCheckboxChange ]);
-
-  const renderInputControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'optimization_runs'>}) => {
-    return (
-      <Input
-        { ...field }
-        required
-        isDisabled={ formState.isSubmitting }
-        autoComplete="off"
-        type="number"
-        placeholder="Optimization runs"
-        size="xs"
-        minW="100px"
-        maxW="200px"
-        flexShrink={ 1 }
-        isInvalid={ Boolean(error) }
-      />
-    );
-  }, [ error, formState.isSubmitting ]);
-
   return (
     <ContractVerificationFormRow>
       <Flex columnGap={ 5 } h={{ base: 'auto', lg: '32px' }}>
-        <Controller
+        <FormFieldCheckbox<FormFields, 'is_optimization_enabled'>
           name="is_optimization_enabled"
-          control={ control }
-          render={ renderCheckboxControl }
+          label="Optimization enabled"
+          onChange={ handleCheckboxChange }
+          flexShrink={ 0 }
         />
         { isEnabled && (
-          <Controller
+          <FormFieldText<FormFields, 'optimization_runs'>
             name="optimization_runs"
-            control={ control }
-            render={ renderInputControl }
-            rules={{ required: true }}
+            isRequired
+            placeholder="Optimization runs"
+            type="number"
+            size="xs"
+            minW="100px"
+            maxW="200px"
+            flexShrink={ 1 }
           />
         ) }
       </Flex>
diff --git a/ui/contractVerification/fields/ContractVerificationFieldSources.tsx b/ui/contractVerification/fields/ContractVerificationFieldSources.tsx
index 17d0f7f016..e9c39263d1 100644
--- a/ui/contractVerification/fields/ContractVerificationFieldSources.tsx
+++ b/ui/contractVerification/fields/ContractVerificationFieldSources.tsx
@@ -6,25 +6,26 @@ import { Controller, useFormContext } from 'react-hook-form';
 import type { FormFields } from '../types';
 
 import { Mb } from 'lib/consts';
-import DragAndDropArea from 'ui/shared/forms/DragAndDropArea';
-import FieldError from 'ui/shared/forms/FieldError';
-import FileInput from 'ui/shared/forms/FileInput';
-import FileSnippet from 'ui/shared/forms/FileSnippet';
+import FieldError from 'ui/shared/forms/components/FieldError';
+import DragAndDropArea from 'ui/shared/forms/inputs/file/DragAndDropArea';
+import FileInput from 'ui/shared/forms/inputs/file/FileInput';
+import FileSnippet from 'ui/shared/forms/inputs/file/FileSnippet';
 
 import ContractVerificationFormRow from '../ContractVerificationFormRow';
 
-type FileTypes = '.sol' | '.yul' | '.json' | '.vy'
+type FileTypes = '.sol' | '.yul' | '.json' | '.vy';
 
 interface Props {
   name?: 'sources' | 'interfaces';
   fileTypes: Array<FileTypes>;
+  fullFilePath?: boolean;
   multiple?: boolean;
   required?: boolean;
   title: string;
   hint: string | React.ReactNode;
 }
 
-const ContractVerificationFieldSources = ({ fileTypes, multiple, required, title, hint, name = 'sources' }: Props) => {
+const ContractVerificationFieldSources = ({ fileTypes, multiple, required, title, hint, name = 'sources', fullFilePath }: Props) => {
   const { setValue, getValues, control, formState, clearErrors } = useFormContext<FormFields>();
 
   const error = (() => {
@@ -56,7 +57,7 @@ const ContractVerificationFieldSources = ({ fileTypes, multiple, required, title
       <div>
         <Text fontWeight={ 500 } color="text_secondary" mb={ 3 }>{ title }</Text>
         <Button size="sm" variant="outline">
-            Drop file{ multiple ? 's' : '' } or click here
+          Drop file{ multiple ? 's' : '' } or click here
         </Button>
       </div>
     );
@@ -89,7 +90,7 @@ const ContractVerificationFieldSources = ({ fileTypes, multiple, required, title
     );
   }, [ formState.isSubmitting, handleFileRemove, fileError ]);
 
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, typeof name>}) => {
+  const renderControl = React.useCallback(({ field }: { field: ControllerRenderProps<FormFields, typeof name> }) => {
     const hasValue = field.value && field.value.length > 0;
 
     const errorElement = (() => {
@@ -114,7 +115,7 @@ const ContractVerificationFieldSources = ({ fileTypes, multiple, required, title
               rowGap={ 2 }
               w="100%"
             >
-              <DragAndDropArea onDrop={ onChange } p={{ base: 3, lg: 6 }} isDisabled={ formState.isSubmitting }>
+              <DragAndDropArea onDrop={ onChange } fullFilePath={ fullFilePath } p={{ base: 3, lg: 6 }} isDisabled={ formState.isSubmitting }>
                 { hasValue ? renderFiles(field.value) : renderUploadButton() }
               </DragAndDropArea>
             </Flex>
@@ -123,7 +124,7 @@ const ContractVerificationFieldSources = ({ fileTypes, multiple, required, title
         { errorElement }
       </>
     );
-  }, [ fileTypes, multiple, commonError, formState.isSubmitting, renderFiles, renderUploadButton ]);
+  }, [ fileTypes, multiple, commonError, formState.isSubmitting, renderFiles, renderUploadButton, fullFilePath ]);
 
   const validateFileType = React.useCallback(async(value: FieldPathValue<FormFields, typeof name>): Promise<ValidateResult> => {
     if (Array.isArray(value)) {
diff --git a/ui/contractVerification/fields/ContractVerificationFieldZkCompiler.tsx b/ui/contractVerification/fields/ContractVerificationFieldZkCompiler.tsx
new file mode 100644
index 0000000000..2cba3cc2e2
--- /dev/null
+++ b/ui/contractVerification/fields/ContractVerificationFieldZkCompiler.tsx
@@ -0,0 +1,49 @@
+import { Box, Link } from '@chakra-ui/react';
+import { useQueryClient } from '@tanstack/react-query';
+import React from 'react';
+
+import type { FormFields } from '../types';
+import type { SmartContractVerificationConfig } from 'types/client/contract';
+
+import { getResourceKey } from 'lib/api/useApiQuery';
+import FormFieldFancySelect from 'ui/shared/forms/fields/FormFieldFancySelect';
+import IconSvg from 'ui/shared/IconSvg';
+
+import ContractVerificationFormRow from '../ContractVerificationFormRow';
+
+const OPTIONS_LIMIT = 50;
+
+const ContractVerificationFieldZkCompiler = () => {
+  const queryClient = useQueryClient();
+  const config = queryClient.getQueryData<SmartContractVerificationConfig>(getResourceKey('contract_verification_config'));
+
+  const options = React.useMemo(() => (
+    config?.zk_compiler_versions?.map((option) => ({ label: option, value: option })) || []
+  ), [ config?.zk_compiler_versions ]);
+
+  const loadOptions = React.useCallback(async(inputValue: string) => {
+    return options
+      .filter(({ label }) => !inputValue || label.toLowerCase().includes(inputValue.toLowerCase()))
+      .slice(0, OPTIONS_LIMIT);
+  }, [ options ]);
+
+  return (
+    <ContractVerificationFormRow>
+      <FormFieldFancySelect<FormFields, 'zk_compiler'>
+        name="zk_compiler"
+        placeholder="ZK compiler (enter version or use the dropdown)"
+        placeholderIcon={ <IconSvg name="search"/> }
+        loadOptions={ loadOptions }
+        defaultOptions
+        isRequired
+        isAsync
+      />
+      <Box>
+        <Link isExternal href="https://docs.zksync.io/zk-stack/components/compiler/specification#glossary">zksolc</Link>
+        <span> compiler version.</span>
+      </Box>
+    </ContractVerificationFormRow>
+  );
+};
+
+export default React.memo(ContractVerificationFieldZkCompiler);
diff --git a/ui/contractVerification/methods/ContractVerificationFlattenSourceCode.tsx b/ui/contractVerification/methods/ContractVerificationFlattenSourceCode.tsx
index f3333697e5..ee258e1c97 100644
--- a/ui/contractVerification/methods/ContractVerificationFlattenSourceCode.tsx
+++ b/ui/contractVerification/methods/ContractVerificationFlattenSourceCode.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { SmartContractVerificationConfig } from 'types/api/contract';
+import type { SmartContractVerificationConfig } from 'types/client/contract';
 
 import ContractVerificationMethod from '../ContractVerificationMethod';
 import ContractVerificationFieldAutodetectArgs from '../fields/ContractVerificationFieldAutodetectArgs';
diff --git a/ui/contractVerification/methods/ContractVerificationMultiPartFile.tsx b/ui/contractVerification/methods/ContractVerificationMultiPartFile.tsx
index da2967a9e8..8212b3b583 100644
--- a/ui/contractVerification/methods/ContractVerificationMultiPartFile.tsx
+++ b/ui/contractVerification/methods/ContractVerificationMultiPartFile.tsx
@@ -18,6 +18,7 @@ const ContractVerificationMultiPartFile = () => {
       <ContractVerificationFieldSources
         fileTypes={ FILE_TYPES }
         multiple
+        fullFilePath
         required
         title="Sources *.sol or *.yul files"
         hint="Upload all Solidity or Yul contract source files."
diff --git a/ui/contractVerification/methods/ContractVerificationSolidityFoundry.tsx b/ui/contractVerification/methods/ContractVerificationSolidityFoundry.tsx
new file mode 100644
index 0000000000..a481631c3c
--- /dev/null
+++ b/ui/contractVerification/methods/ContractVerificationSolidityFoundry.tsx
@@ -0,0 +1,41 @@
+import { Box, Flex, Link } from '@chakra-ui/react';
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import config from 'configs/app';
+
+import ContractVerificationFormCodeSnippet from '../ContractVerificationFormCodeSnippet';
+import ContractVerificationFormRow from '../ContractVerificationFormRow';
+import ContractVerificationMethod from '../ContractVerificationMethod';
+
+const ContractVerificationSolidityFoundry = () => {
+  const { watch } = useFormContext<FormFields>();
+  const address = watch('address');
+
+  const codeSnippet = `forge verify-contract \\
+  --rpc-url ${ config.chain.rpcUrl || `${ config.api.endpoint }/api/eth-rpc` } \\
+  --verifier blockscout \\
+  --verifier-url '${ config.api.endpoint }/api/' \\
+  ${ address || '<address>' } \\
+  [contractFile]:[contractName]`;
+
+  return (
+    <ContractVerificationMethod title="Contract verification via Foundry">
+      <ContractVerificationFormRow>
+        <Flex flexDir="column">
+          <ContractVerificationFormCodeSnippet code={ codeSnippet }/>
+        </Flex>
+        <Box whiteSpace="pre-wrap">
+          <span>Full tutorial about contract verification via Foundry on Blockscout is available </span>
+          <Link href="https://docs.blockscout.com/for-users/verifying-a-smart-contract/foundry-verification" target="_blank">
+            here
+          </Link>
+        </Box>
+      </ContractVerificationFormRow>
+    </ContractVerificationMethod>
+  );
+};
+
+export default React.memo(ContractVerificationSolidityFoundry);
diff --git a/ui/contractVerification/methods/ContractVerificationSolidityHardhat.tsx b/ui/contractVerification/methods/ContractVerificationSolidityHardhat.tsx
new file mode 100644
index 0000000000..d779aea9e4
--- /dev/null
+++ b/ui/contractVerification/methods/ContractVerificationSolidityHardhat.tsx
@@ -0,0 +1,68 @@
+import { Box, Flex, Link } from '@chakra-ui/react';
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+import type { SmartContractVerificationConfig } from 'types/client/contract';
+
+import config from 'configs/app';
+
+import ContractVerificationFormCodeSnippet from '../ContractVerificationFormCodeSnippet';
+import ContractVerificationFormRow from '../ContractVerificationFormRow';
+import ContractVerificationMethod from '../ContractVerificationMethod';
+
+const ContractVerificationSolidityHardhat = ({ config: formConfig }: { config: SmartContractVerificationConfig }) => {
+  const chainNameSlug = config.chain.name?.toLowerCase().split(' ').join('-');
+  const { watch } = useFormContext<FormFields>();
+  const address = watch('address');
+
+  const latestSolidityVersion = formConfig.solidity_compiler_versions.find((version) => !version.includes('nightly'))?.split('+')[0];
+
+  const firstCodeSnippet = `const config: HardhatUserConfig = {
+  solidity: "${ latestSolidityVersion || '0.8.24' }", // replace if necessary
+  networks: {
+    '${ chainNameSlug }': {
+      url: '${ config.chain.rpcUrl || `${ config.api.endpoint }/api/eth-rpc` }'
+    },
+  },
+  etherscan: {
+    apiKey: {
+      '${ chainNameSlug }': 'empty'
+    },
+    customChains: [
+      {
+        network: "${ chainNameSlug }",
+        chainId: ${ config.chain.id },
+        urls: {
+          apiURL: "${ config.api.endpoint }/api",
+          browserURL: "${ config.app.baseUrl }"
+        }
+      }
+    ]
+  }
+};`;
+
+  const secondCodeSnippet = `npx hardhat verify \\
+  --network ${ chainNameSlug } \\
+  ${ address || '<address>' } \\
+  [...constructorArgs]`;
+
+  return (
+    <ContractVerificationMethod title="Contract verification via Solidity Hardhat plugin">
+      <ContractVerificationFormRow>
+        <Flex flexDir="column" rowGap={ 3 }>
+          <ContractVerificationFormCodeSnippet code={ firstCodeSnippet }/>
+          <ContractVerificationFormCodeSnippet code={ secondCodeSnippet }/>
+        </Flex>
+        <Box whiteSpace="pre-wrap">
+          <span>Full tutorial about contract verification via Hardhat on Blockscout is available </span>
+          <Link href="https://docs.blockscout.com/for-users/verifying-a-smart-contract/hardhat-verification-plugin" target="_blank">
+            here
+          </Link>
+        </Box>
+      </ContractVerificationFormRow>
+    </ContractVerificationMethod>
+  );
+};
+
+export default React.memo(ContractVerificationSolidityHardhat);
diff --git a/ui/contractVerification/methods/ContractVerificationStandardInput.tsx b/ui/contractVerification/methods/ContractVerificationStandardInput.tsx
index 75c30ff3eb..9f0e9b0974 100644
--- a/ui/contractVerification/methods/ContractVerificationStandardInput.tsx
+++ b/ui/contractVerification/methods/ContractVerificationStandardInput.tsx
@@ -1,20 +1,25 @@
 import React from 'react';
 
-import type { SmartContractVerificationConfig } from 'types/api/contract';
+import type { SmartContractVerificationConfig } from 'types/client/contract';
+
+import config from 'configs/app';
 
 import ContractVerificationMethod from '../ContractVerificationMethod';
 import ContractVerificationFieldAutodetectArgs from '../fields/ContractVerificationFieldAutodetectArgs';
 import ContractVerificationFieldCompiler from '../fields/ContractVerificationFieldCompiler';
 import ContractVerificationFieldName from '../fields/ContractVerificationFieldName';
 import ContractVerificationFieldSources from '../fields/ContractVerificationFieldSources';
+import ContractVerificationFieldZkCompiler from '../fields/ContractVerificationFieldZkCompiler';
 
 const FILE_TYPES = [ '.json' as const ];
+const rollupFeature = config.features.rollup;
 
 const ContractVerificationStandardInput = ({ config }: { config: SmartContractVerificationConfig }) => {
   return (
-    <ContractVerificationMethod title="Contract verification via Solidity (standard JSON input) ">
+    <ContractVerificationMethod title="Contract verification via Solidity (standard JSON input) " disableScroll={ config.verification_options.length === 1 }>
       { !config?.is_rust_verifier_microservice_enabled && <ContractVerificationFieldName/> }
       <ContractVerificationFieldCompiler/>
+      { rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && <ContractVerificationFieldZkCompiler/> }
       <ContractVerificationFieldSources
         fileTypes={ FILE_TYPES }
         title="Standard Input JSON"
diff --git a/ui/contractVerification/methods/ContractVerificationStylusGitHubRepo.tsx b/ui/contractVerification/methods/ContractVerificationStylusGitHubRepo.tsx
new file mode 100644
index 0000000000..8f0d72bfca
--- /dev/null
+++ b/ui/contractVerification/methods/ContractVerificationStylusGitHubRepo.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import type { FormFields } from '../types';
+
+import FormFieldText from 'ui/shared/forms/fields/FormFieldText';
+
+import ContractVerificationFormRow from '../ContractVerificationFormRow';
+import ContractVerificationMethod from '../ContractVerificationMethod';
+import ContractVerificationFieldCommit from '../fields/ContractVerificationFieldCommit';
+import ContractVerificationFieldCompiler from '../fields/ContractVerificationFieldCompiler';
+import ContractVerificationFieldGitHubRepo from '../fields/ContractVerificationFieldGitHubRepo';
+
+const ContractVerificationStylusGitHubRepo = () => {
+  const [ latestCommitHash, setLatestCommitHash ] = React.useState<string | undefined>(undefined);
+
+  return (
+    <ContractVerificationMethod title="Contract verification via Stylus (GitHub repository) ">
+      <ContractVerificationFieldCompiler isStylus/>
+      <ContractVerificationFieldGitHubRepo onCommitHashChange={ setLatestCommitHash }/>
+      <ContractVerificationFieldCommit latestCommitHash={ latestCommitHash }/>
+
+      <ContractVerificationFormRow>
+        <FormFieldText<FormFields>
+          name="path_prefix"
+          placeholder="Path prefix"
+          size={{ base: 'md', lg: 'lg' }}
+        />
+        <span>
+          The crate should be located in the root directory. If it is not the case, please specify the relative path from
+          the root to the crate directory.
+        </span>
+      </ContractVerificationFormRow>
+    </ContractVerificationMethod>
+  );
+};
+
+export default React.memo(ContractVerificationStylusGitHubRepo);
diff --git a/ui/contractVerification/methods/ContractVerificationVyperContract.tsx b/ui/contractVerification/methods/ContractVerificationVyperContract.tsx
index 734cad9bc2..f5a975d7ab 100644
--- a/ui/contractVerification/methods/ContractVerificationVyperContract.tsx
+++ b/ui/contractVerification/methods/ContractVerificationVyperContract.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { SmartContractVerificationConfig } from 'types/api/contract';
+import type { SmartContractVerificationConfig } from 'types/client/contract';
 
 import ContractVerificationMethod from '../ContractVerificationMethod';
 import ContractVerificationFieldCode from '../fields/ContractVerificationFieldCode';
diff --git a/ui/contractVerification/methods/ContractVerificationVyperMultiPartFile.tsx b/ui/contractVerification/methods/ContractVerificationVyperMultiPartFile.tsx
index 607d7dad82..0d3148c448 100644
--- a/ui/contractVerification/methods/ContractVerificationVyperMultiPartFile.tsx
+++ b/ui/contractVerification/methods/ContractVerificationVyperMultiPartFile.tsx
@@ -37,6 +37,7 @@ const ContractVerificationVyperMultiPartFile = () => {
         name="interfaces"
         fileTypes={ INTERFACE_TYPES }
         multiple
+        fullFilePath
         title="Interfaces (.vy or .json)"
         hint={ interfacesHint }
       />
diff --git a/ui/contractVerification/types.ts b/ui/contractVerification/types.ts
index e61cf1d6ad..be0b60a6dc 100644
--- a/ui/contractVerification/types.ts
+++ b/ui/contractVerification/types.ts
@@ -1,5 +1,6 @@
-import type { SmartContractVerificationMethod } from 'types/api/contract';
-import type { Option } from 'ui/shared/FancySelect/types';
+import type { SmartContractLicenseType } from 'types/api/contract';
+import type { SmartContractVerificationMethod } from 'types/client/contract';
+import type { Option } from 'ui/shared/forms/inputs/select/types';
 
 export interface ContractLibrary {
   name: string;
@@ -11,9 +12,18 @@ interface MethodOption {
   value: SmartContractVerificationMethod;
 }
 
-export interface FormFieldsFlattenSourceCode {
+export interface LicenseOption {
+  label: string;
+  value: SmartContractLicenseType;
+}
+
+interface FormFieldsBase {
   address: string;
   method: MethodOption;
+  license_type: LicenseOption | null;
+}
+
+export interface FormFieldsFlattenSourceCode extends FormFieldsBase {
   is_yul: boolean;
   name: string | undefined;
   compiler: Option | null;
@@ -26,9 +36,7 @@ export interface FormFieldsFlattenSourceCode {
   libraries: Array<ContractLibrary>;
 }
 
-export interface FormFieldsStandardInput {
-  address: string;
-  method: MethodOption;
+export interface FormFieldsStandardInput extends FormFieldsBase {
   name: string;
   compiler: Option | null;
   sources: Array<File>;
@@ -36,16 +44,21 @@ export interface FormFieldsStandardInput {
   constructor_args: string;
 }
 
-export interface FormFieldsSourcify {
-  address: string;
-  method: MethodOption;
+export interface FormFieldsStandardInputZk extends FormFieldsBase {
+  name: string;
+  compiler: Option | null;
+  zk_compiler: Option | null;
+  sources: Array<File>;
+  autodetect_constructor_args: boolean;
+  constructor_args: string;
+}
+
+export interface FormFieldsSourcify extends FormFieldsBase {
   sources: Array<File>;
   contract_index?: Option;
 }
 
-export interface FormFieldsMultiPartFile {
-  address: string;
-  method: MethodOption;
+export interface FormFieldsMultiPartFile extends FormFieldsBase {
   compiler: Option | null;
   evm_version: Option | null;
   is_optimization_enabled: boolean;
@@ -54,9 +67,7 @@ export interface FormFieldsMultiPartFile {
   libraries: Array<ContractLibrary>;
 }
 
-export interface FormFieldsVyperContract {
-  address: string;
-  method: MethodOption;
+export interface FormFieldsVyperContract extends FormFieldsBase {
   name: string;
   evm_version: Option | null;
   compiler: Option | null;
@@ -64,21 +75,24 @@ export interface FormFieldsVyperContract {
   constructor_args: string | undefined;
 }
 
-export interface FormFieldsVyperMultiPartFile {
-  address: string;
-  method: MethodOption;
+export interface FormFieldsVyperMultiPartFile extends FormFieldsBase {
   compiler: Option | null;
   evm_version: Option | null;
   sources: Array<File>;
   interfaces: Array<File>;
 }
 
-export interface FormFieldsVyperStandardInput {
-  address: string;
-  method: MethodOption;
+export interface FormFieldsVyperStandardInput extends FormFieldsBase {
   compiler: Option | null;
   sources: Array<File>;
 }
 
-export type FormFields = FormFieldsFlattenSourceCode | FormFieldsStandardInput | FormFieldsSourcify |
-FormFieldsMultiPartFile | FormFieldsVyperContract | FormFieldsVyperMultiPartFile | FormFieldsVyperStandardInput;
+export interface FormFieldsStylusGitHubRepo extends FormFieldsBase {
+  compiler: Option | null;
+  repository_url: string;
+  commit_hash: string;
+  path_prefix: string;
+}
+
+export type FormFields = FormFieldsFlattenSourceCode | FormFieldsStandardInput | FormFieldsStandardInputZk | FormFieldsSourcify |
+FormFieldsMultiPartFile | FormFieldsVyperContract | FormFieldsVyperMultiPartFile | FormFieldsVyperStandardInput | FormFieldsStylusGitHubRepo;
diff --git a/ui/contractVerification/useFormConfigQuery.tsx b/ui/contractVerification/useFormConfigQuery.tsx
index cb4da6e6b8..974ca2ec59 100644
--- a/ui/contractVerification/useFormConfigQuery.tsx
+++ b/ui/contractVerification/useFormConfigQuery.tsx
@@ -1,3 +1,4 @@
+import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 
 import { isValidVerificationMethod, sortVerificationMethods } from './utils';
@@ -8,7 +9,10 @@ export default function useFormConfigQuery(enabled: boolean) {
       select: (data) => {
         return {
           ...data,
-          verification_options: data.verification_options.filter(isValidVerificationMethod).sort(sortVerificationMethods),
+          verification_options: [
+            ...data.verification_options,
+            ...config.UI.views.address.extraVerificationMethods,
+          ].filter(isValidVerificationMethod).sort(sortVerificationMethods),
         };
       },
       enabled,
diff --git a/ui/contractVerification/utils.ts b/ui/contractVerification/utils.ts
index 1a60089eea..16525b0c10 100644
--- a/ui/contractVerification/utils.ts
+++ b/ui/contractVerification/utils.ts
@@ -7,32 +7,45 @@ import type {
   FormFieldsMultiPartFile,
   FormFieldsSourcify,
   FormFieldsStandardInput,
+  FormFieldsStandardInputZk,
+  FormFieldsStylusGitHubRepo,
   FormFieldsVyperContract,
   FormFieldsVyperMultiPartFile,
   FormFieldsVyperStandardInput,
 } from './types';
-import type { SmartContractVerificationMethod, SmartContractVerificationError, SmartContractVerificationConfig } from 'types/api/contract';
+import type {
+  SmartContractVerificationError,
+  SmartContractLicenseType,
+} from 'types/api/contract';
+import type { SmartContractVerificationConfig, SmartContractVerificationMethod } from 'types/client/contract';
 
 import type { Params as FetchParams } from 'lib/hooks/useFetch';
+import stripLeadingSlash from 'lib/stripLeadingSlash';
 
 export const SUPPORTED_VERIFICATION_METHODS: Array<SmartContractVerificationMethod> = [
   'flattened-code',
   'standard-input',
   'sourcify',
   'multi-part',
+  'solidity-hardhat',
+  'solidity-foundry',
   'vyper-code',
   'vyper-multi-part',
   'vyper-standard-input',
+  'stylus-github-repository',
 ];
 
 export const METHOD_LABELS: Record<SmartContractVerificationMethod, string> = {
-  'flattened-code': 'Solidity (Flattened source code)',
+  'flattened-code': 'Solidity (Single file)',
   'standard-input': 'Solidity (Standard JSON input)',
   sourcify: 'Solidity (Sourcify)',
   'multi-part': 'Solidity (Multi-part files)',
   'vyper-code': 'Vyper (Contract)',
   'vyper-multi-part': 'Vyper (Multi-part files)',
   'vyper-standard-input': 'Vyper (Standard JSON input)',
+  'solidity-hardhat': 'Solidity (Hardhat)',
+  'solidity-foundry': 'Solidity (Foundry)',
+  'stylus-github-repository': 'Stylus (GitHub repository)',
 };
 
 export const DEFAULT_VALUES: Record<SmartContractVerificationMethod, FormFields> = {
@@ -52,6 +65,7 @@ export const DEFAULT_VALUES: Record<SmartContractVerificationMethod, FormFields>
     autodetect_constructor_args: true,
     constructor_args: '',
     libraries: [],
+    license_type: null,
   },
   'standard-input': {
     address: '',
@@ -64,6 +78,7 @@ export const DEFAULT_VALUES: Record<SmartContractVerificationMethod, FormFields>
     sources: [],
     autodetect_constructor_args: true,
     constructor_args: '',
+    license_type: null,
   },
   sourcify: {
     address: '',
@@ -72,6 +87,7 @@ export const DEFAULT_VALUES: Record<SmartContractVerificationMethod, FormFields>
       label: METHOD_LABELS.sourcify,
     },
     sources: [],
+    license_type: null,
   },
   'multi-part': {
     address: '',
@@ -85,6 +101,7 @@ export const DEFAULT_VALUES: Record<SmartContractVerificationMethod, FormFields>
     optimization_runs: '200',
     sources: [],
     libraries: [],
+    license_type: null,
   },
   'vyper-code': {
     address: '',
@@ -97,6 +114,7 @@ export const DEFAULT_VALUES: Record<SmartContractVerificationMethod, FormFields>
     evm_version: null,
     code: '',
     constructor_args: '',
+    license_type: null,
   },
   'vyper-multi-part': {
     address: '',
@@ -107,6 +125,7 @@ export const DEFAULT_VALUES: Record<SmartContractVerificationMethod, FormFields>
     compiler: null,
     evm_version: null,
     sources: [],
+    license_type: null,
   },
   'vyper-standard-input': {
     address: '',
@@ -116,11 +135,56 @@ export const DEFAULT_VALUES: Record<SmartContractVerificationMethod, FormFields>
     },
     compiler: null,
     sources: [],
+    license_type: null,
+  },
+  'solidity-hardhat': {
+    address: '',
+    method: {
+      value: 'solidity-hardhat' as const,
+      label: METHOD_LABELS['solidity-hardhat'],
+    },
+    compiler: null,
+    sources: [],
+    license_type: null,
+  },
+  'solidity-foundry': {
+    address: '',
+    method: {
+      value: 'solidity-foundry' as const,
+      label: METHOD_LABELS['solidity-foundry'],
+    },
+    compiler: null,
+    sources: [],
+    license_type: null,
+  },
+  'stylus-github-repository': {
+    address: '',
+    method: {
+      value: 'stylus-github-repository' as const,
+      label: METHOD_LABELS['stylus-github-repository'],
+    },
+    compiler: null,
+    repository_url: '',
+    commit_hash: '',
+    path_prefix: '',
+    license_type: null,
   },
 };
 
-export function getDefaultValues(method: SmartContractVerificationMethod, config: SmartContractVerificationConfig, hash?: string) {
-  const defaultValues = { ...DEFAULT_VALUES[method], address: hash };
+export function getDefaultValues(
+  methodParam: SmartContractVerificationMethod | undefined,
+  config: SmartContractVerificationConfig,
+  hash: string | undefined,
+  licenseType: FormFields['license_type'],
+) {
+  const singleMethod = config.verification_options.length === 1 ? config.verification_options[0] : undefined;
+  const method = singleMethod || methodParam;
+
+  if (!method) {
+    return { address: hash || '' };
+  }
+
+  const defaultValues: FormFields = { ...DEFAULT_VALUES[method], address: hash || '', license_type: licenseType };
 
   if ('evm_version' in defaultValues) {
     if (method === 'flattened-code' || method === 'multi-part') {
@@ -139,6 +203,13 @@ export function getDefaultValues(method: SmartContractVerificationMethod, config
     }
   }
 
+  if (singleMethod) {
+    defaultValues.method = {
+      label: METHOD_LABELS[config.verification_options[0]],
+      value: config.verification_options[0],
+    };
+  }
+
   return defaultValues;
 }
 
@@ -162,6 +233,8 @@ export function sortVerificationMethods(methodA: SmartContractVerificationMethod
 }
 
 export function prepareRequestBody(data: FormFields): FetchParams['body'] {
+  const defaultLicenseType: SmartContractLicenseType = 'none';
+
   switch (data.method.value) {
     case 'flattened-code': {
       const _data = data as FormFieldsFlattenSourceCode;
@@ -176,19 +249,24 @@ export function prepareRequestBody(data: FormFields): FetchParams['body'] {
         evm_version: _data.evm_version?.value,
         autodetect_constructor_args: _data.autodetect_constructor_args,
         constructor_args: _data.constructor_args,
+        license_type: _data.license_type?.value ?? defaultLicenseType,
       };
     }
 
     case 'standard-input': {
-      const _data = data as FormFieldsStandardInput;
+      const _data = data as (FormFieldsStandardInput | FormFieldsStandardInputZk);
 
       const body = new FormData();
       _data.compiler && body.set('compiler_version', _data.compiler.value);
+      body.set('license_type', _data.license_type?.value ?? defaultLicenseType);
       body.set('contract_name', _data.name);
       body.set('autodetect_constructor_args', String(Boolean(_data.autodetect_constructor_args)));
       body.set('constructor_args', _data.constructor_args);
       addFilesToFormData(body, _data.sources, 'files');
 
+      // zkSync fields
+      'zk_compiler' in _data && _data.zk_compiler && body.set('zk_compiler_version', _data.zk_compiler.value);
+
       return body;
     }
 
@@ -196,7 +274,8 @@ export function prepareRequestBody(data: FormFields): FetchParams['body'] {
       const _data = data as FormFieldsSourcify;
       const body = new FormData();
       addFilesToFormData(body, _data.sources, 'files');
-      _data.contract_index && body.set('chosen_contract_index', _data.contract_index.value);
+      body.set('chosen_contract_index', _data.contract_index?.value ?? defaultLicenseType);
+      _data.license_type && body.set('license_type', _data.license_type.value);
 
       return body;
     }
@@ -207,6 +286,7 @@ export function prepareRequestBody(data: FormFields): FetchParams['body'] {
       const body = new FormData();
       _data.compiler && body.set('compiler_version', _data.compiler.value);
       _data.evm_version && body.set('evm_version', _data.evm_version.value);
+      body.set('license_type', _data.license_type?.value ?? defaultLicenseType);
       body.set('is_optimization_enabled', String(Boolean(_data.is_optimization_enabled)));
       _data.is_optimization_enabled && body.set('optimization_runs', _data.optimization_runs);
 
@@ -226,6 +306,7 @@ export function prepareRequestBody(data: FormFields): FetchParams['body'] {
         source_code: _data.code,
         contract_name: _data.name,
         constructor_args: _data.constructor_args,
+        license_type: _data.license_type?.value ?? defaultLicenseType,
       };
     }
 
@@ -235,6 +316,7 @@ export function prepareRequestBody(data: FormFields): FetchParams['body'] {
       const body = new FormData();
       _data.compiler && body.set('compiler_version', _data.compiler.value);
       _data.evm_version && body.set('evm_version', _data.evm_version.value);
+      body.set('license_type', _data.license_type?.value ?? defaultLicenseType);
       addFilesToFormData(body, _data.sources, 'files');
       addFilesToFormData(body, _data.interfaces, 'interfaces');
 
@@ -246,11 +328,24 @@ export function prepareRequestBody(data: FormFields): FetchParams['body'] {
 
       const body = new FormData();
       _data.compiler && body.set('compiler_version', _data.compiler.value);
+      body.set('license_type', _data.license_type?.value ?? defaultLicenseType);
       addFilesToFormData(body, _data.sources, 'files');
 
       return body;
     }
 
+    case 'stylus-github-repository': {
+      const _data = data as FormFieldsStylusGitHubRepo;
+
+      return {
+        cargo_stylus_version: _data.compiler?.value,
+        repository_url: _data.repository_url,
+        commit: _data.commit_hash,
+        path_prefix: _data.path_prefix,
+        license_type: _data.license_type?.value ?? defaultLicenseType,
+      };
+    }
+
     default: {
       return {};
     }
@@ -298,3 +393,16 @@ export function formatSocketErrors(errors: SmartContractVerificationError): Arra
     return [ API_ERROR_TO_FORM_FIELD[_key], { message: value.join(',') } ];
   });
 }
+
+export function getGitHubOwnerAndRepo(repositoryUrl: string) {
+  try {
+    const urlObj = new URL(repositoryUrl);
+    if (urlObj.hostname !== 'github.com') {
+      throw new Error();
+    }
+    const [ owner, repo, ...rest ] = stripLeadingSlash(urlObj.pathname).split('/');
+    return { owner, repo, rest, url: urlObj };
+  } catch (error) {
+    return;
+  }
+}
diff --git a/ui/csvExport/CsvExportForm.tsx b/ui/csvExport/CsvExportForm.tsx
index 1105757b2c..12c85568f5 100644
--- a/ui/csvExport/CsvExportForm.tsx
+++ b/ui/csvExport/CsvExportForm.tsx
@@ -1,4 +1,4 @@
-import { Button, chakra, Flex } from '@chakra-ui/react';
+import { Alert, Button, chakra, Flex } from '@chakra-ui/react';
 import React from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm, FormProvider } from 'react-hook-form';
@@ -6,14 +6,16 @@ import { useForm, FormProvider } from 'react-hook-form';
 import type { FormFields } from './types';
 import type { CsvExportParams } from 'types/client/address';
 
+import config from 'configs/app';
 import buildUrl from 'lib/api/buildUrl';
 import type { ResourceName } from 'lib/api/resources';
 import dayjs from 'lib/date/dayjs';
 import downloadBlob from 'lib/downloadBlob';
 import useToast from 'lib/hooks/useToast';
+import ReCaptcha from 'ui/shared/reCaptcha/ReCaptcha';
+import useReCaptcha from 'ui/shared/reCaptcha/useReCaptcha';
 
 import CsvExportFormField from './CsvExportFormField';
-import CsvExportFormReCaptcha from './CsvExportFormReCaptcha';
 
 interface Props {
   hash: string;
@@ -21,9 +23,10 @@ interface Props {
   filterType?: CsvExportParams['filterType'] | null;
   filterValue?: CsvExportParams['filterValue'] | null;
   fileNameTemplate: string;
+  exportType: CsvExportParams['type'] | undefined;
 }
 
-const CsvExportForm = ({ hash, resource, filterType, filterValue, fileNameTemplate }: Props) => {
+const CsvExportForm = ({ hash, resource, filterType, filterValue, fileNameTemplate, exportType }: Props) => {
   const formApi = useForm<FormFields>({
     mode: 'onBlur',
     defaultValues: {
@@ -33,16 +36,23 @@ const CsvExportForm = ({ hash, resource, filterType, filterValue, fileNameTempla
   });
   const { handleSubmit, formState } = formApi;
   const toast = useToast();
+  const recaptcha = useReCaptcha();
 
   const onFormSubmit: SubmitHandler<FormFields> = React.useCallback(async(data) => {
     try {
-      const url = buildUrl(resource, undefined, {
+      const token = await recaptcha.executeAsync();
+
+      if (!token) {
+        throw new Error('ReCaptcha is not solved');
+      }
+
+      const url = buildUrl(resource, { hash } as never, {
         address_id: hash,
-        from_period: data.from,
-        to_period: data.to,
+        from_period: exportType !== 'holders' ? data.from : null,
+        to_period: exportType !== 'holders' ? data.to : null,
         filter_type: filterType,
         filter_value: filterValue,
-        recaptcha_response: data.reCaptcha,
+        recaptcha_response: token,
       });
 
       const response = await fetch(url, {
@@ -56,11 +66,11 @@ const CsvExportForm = ({ hash, resource, filterType, filterValue, fileNameTempla
       }
 
       const blob = await response.blob();
-      downloadBlob(
-        blob,
-        `${ fileNameTemplate }_${ hash }_${ data.from }_${ data.to }
-        ${ filterType && filterValue ? '_with_filter_type_' + filterType + '_value_' + filterValue : '' }.csv`,
-      );
+      const fileName = exportType === 'holders' ?
+        `${ fileNameTemplate }_${ hash }.csv` :
+        // eslint-disable-next-line max-len
+        `${ fileNameTemplate }_${ hash }_${ data.from }_${ data.to }${ filterType && filterValue ? '_with_filter_type_' + filterType + '_value_' + filterValue : '' }.csv`;
+      downloadBlob(blob, fileName);
 
     } catch (error) {
       toast({
@@ -73,7 +83,16 @@ const CsvExportForm = ({ hash, resource, filterType, filterValue, fileNameTempla
       });
     }
 
-  }, [ fileNameTemplate, hash, resource, filterType, filterValue, toast ]);
+  }, [ recaptcha, resource, hash, exportType, filterType, filterValue, fileNameTemplate, toast ]);
+
+  if (!config.services.reCaptchaV2.siteKey) {
+    return (
+      <Alert status="error">
+        CSV export is not available at the moment since reCaptcha is not configured for this application.
+        Please contact the service maintainer to make necessary changes in the service configuration.
+      </Alert>
+    );
+  }
 
   return (
     <FormProvider { ...formApi }>
@@ -82,10 +101,10 @@ const CsvExportForm = ({ hash, resource, filterType, filterValue, fileNameTempla
         onSubmit={ handleSubmit(onFormSubmit) }
       >
         <Flex columnGap={ 5 } rowGap={ 3 } flexDir={{ base: 'column', lg: 'row' }} alignItems={{ base: 'flex-start', lg: 'center' }} flexWrap="wrap">
-          <CsvExportFormField name="from" formApi={ formApi }/>
-          <CsvExportFormField name="to" formApi={ formApi }/>
-          <CsvExportFormReCaptcha formApi={ formApi }/>
+          { exportType !== 'holders' && <CsvExportFormField name="from" formApi={ formApi }/> }
+          { exportType !== 'holders' && <CsvExportFormField name="to" formApi={ formApi }/> }
         </Flex>
+        <ReCaptcha ref={ recaptcha.ref }/>
         <Button
           variant="solid"
           size="lg"
@@ -93,7 +112,7 @@ const CsvExportForm = ({ hash, resource, filterType, filterValue, fileNameTempla
           mt={ 8 }
           isLoading={ formState.isSubmitting }
           loadingText="Download"
-          isDisabled={ !formState.isValid }
+          isDisabled={ Boolean(formState.errors.from || formState.errors.to) }
         >
           Download
         </Button>
diff --git a/ui/csvExport/CsvExportFormField.tsx b/ui/csvExport/CsvExportFormField.tsx
index e37f722af8..9c556e2a1e 100644
--- a/ui/csvExport/CsvExportFormField.tsx
+++ b/ui/csvExport/CsvExportFormField.tsx
@@ -1,13 +1,11 @@
-import { FormControl, Input } from '@chakra-ui/react';
 import _capitalize from 'lodash/capitalize';
 import React from 'react';
-import type { ControllerRenderProps, UseFormReturn } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
+import type { UseFormReturn } from 'react-hook-form';
 
 import type { FormFields } from './types';
 
 import dayjs from 'lib/date/dayjs';
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
+import FormFieldText from 'ui/shared/forms/fields/FormFieldText';
 
 interface Props {
   formApi: UseFormReturn<FormFields>;
@@ -15,26 +13,7 @@ interface Props {
 }
 
 const CsvExportFormField = ({ formApi, name }: Props) => {
-  const { formState, control, getValues, trigger } = formApi;
-
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'from' | 'to'>}) => {
-    const error = field.name in formState.errors ? formState.errors[field.name] : undefined;
-
-    return (
-      <FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }} maxW={{ base: 'auto', lg: '220px' }}>
-        <Input
-          { ...field }
-          required
-          isInvalid={ Boolean(error) }
-          type="date"
-          isDisabled={ formState.isSubmitting }
-          autoComplete="off"
-          max={ dayjs().format('YYYY-MM-DD') }
-        />
-        <InputPlaceholder text={ _capitalize(field.name) } error={ error }/>
-      </FormControl>
-    );
-  }, [ formState.errors, formState.isSubmitting ]);
+  const { formState, getValues, trigger } = formApi;
 
   const validate = React.useCallback((newValue: string) => {
     if (name === 'from') {
@@ -57,11 +36,15 @@ const CsvExportFormField = ({ formApi, name }: Props) => {
   }, [ formState.errors.from, formState.errors.to, getValues, name, trigger ]);
 
   return (
-    <Controller
+    <FormFieldText<FormFields, typeof name>
       name={ name }
-      control={ control }
-      render={ renderControl }
-      rules={{ required: true, validate }}
+      type="date"
+      max={ dayjs().format('YYYY-MM-DD') }
+      placeholder={ _capitalize(name) }
+      isRequired
+      rules={{ validate }}
+      size={{ base: 'md', lg: 'lg' }}
+      maxW={{ base: 'auto', lg: '220px' }}
     />
   );
 };
diff --git a/ui/csvExport/CsvExportFormReCaptcha.tsx b/ui/csvExport/CsvExportFormReCaptcha.tsx
deleted file mode 100644
index a3df1467f8..0000000000
--- a/ui/csvExport/CsvExportFormReCaptcha.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Alert } from '@chakra-ui/react';
-import React from 'react';
-import ReCaptcha from 'react-google-recaptcha';
-import type { UseFormReturn } from 'react-hook-form';
-
-import type { FormFields } from './types';
-
-import config from 'configs/app';
-
-interface Props {
-  formApi: UseFormReturn<FormFields>;
-}
-
-const CsvExportFormReCaptcha = ({ formApi }: Props) => {
-
-  const ref = React.useRef<ReCaptcha>(null);
-
-  React.useEffect(() => {
-    formApi.register('reCaptcha', { required: true, shouldUnregister: true });
-
-    return () => {
-      formApi.unregister('reCaptcha');
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  React.useEffect(() => {
-    ref.current?.reset();
-    formApi.trigger('reCaptcha');
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ formApi.formState.submitCount ]);
-
-  const handleReCaptchaChange = React.useCallback((token: string | null) => {
-    if (token) {
-      formApi.clearErrors('reCaptcha');
-      formApi.setValue('reCaptcha', token, { shouldValidate: true });
-    }
-  }, [ formApi ]);
-
-  const handleReCaptchaExpire = React.useCallback(() => {
-    formApi.resetField('reCaptcha');
-    formApi.setError('reCaptcha', { type: 'required' });
-  }, [ formApi ]);
-
-  const feature = config.features.csvExport;
-
-  if (!feature.isEnabled) {
-    return (
-      <Alert status="error">
-        CSV export is not available at the moment since reCaptcha is not configured for this application.
-        Please contact the service maintainer to make necessary changes in the service configuration.
-      </Alert>
-    );
-  }
-
-  return (
-    <ReCaptcha
-      className="recaptcha"
-      ref={ ref }
-      sitekey={ feature.reCaptcha.siteKey }
-      onChange={ handleReCaptchaChange }
-      onExpired={ handleReCaptchaExpire }
-    />
-  );
-};
-
-export default CsvExportFormReCaptcha;
diff --git a/ui/csvExport/types.ts b/ui/csvExport/types.ts
index 6f8effb629..ca5ec6a0c2 100644
--- a/ui/csvExport/types.ts
+++ b/ui/csvExport/types.ts
@@ -1,5 +1,4 @@
 export interface FormFields {
   from: string;
   to: string;
-  reCaptcha: string;
 }
diff --git a/ui/customAbi/CustomAbiModal/CustomAbiForm.tsx b/ui/customAbi/CustomAbiModal/CustomAbiForm.tsx
index ed36d0f522..7ed7f0a909 100644
--- a/ui/customAbi/CustomAbiModal/CustomAbiForm.tsx
+++ b/ui/customAbi/CustomAbiModal/CustomAbiForm.tsx
@@ -1,15 +1,11 @@
 import {
   Box,
   Button,
-  FormControl,
-  Input,
-  Textarea,
-  useColorModeValue,
 } from '@chakra-ui/react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import React, { useCallback } from 'react';
-import type { ControllerRenderProps, SubmitHandler } from 'react-hook-form';
-import { useForm, Controller } from 'react-hook-form';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm, FormProvider } from 'react-hook-form';
 
 import type { CustomAbi, CustomAbis, CustomAbiErrors } from 'types/api/account';
 
@@ -17,30 +13,35 @@ import type { ResourceErrorAccount } from 'lib/api/resources';
 import { resourceKey } from 'lib/api/resources';
 import useApiFetch from 'lib/api/useApiFetch';
 import getErrorMessage from 'lib/getErrorMessage';
-import { ADDRESS_REGEXP } from 'lib/validations/address';
-import AddressInput from 'ui/shared/AddressInput';
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
+import FormFieldAddress from 'ui/shared/forms/fields/FormFieldAddress';
+import FormFieldText from 'ui/shared/forms/fields/FormFieldText';
+
+export type FormData = CustomAbi | {
+  contract_address_hash: string;
+  name: string;
+} | undefined;
 
 type Props = {
-  data?: CustomAbi;
+  data: FormData;
   onClose: () => void;
+  onSuccess?: () => Promise<void>;
   setAlertVisible: (isAlertVisible: boolean) => void;
-}
+};
 
 type Inputs = {
   contract_address_hash: string;
   name: string;
   abi: string;
-}
+};
 
 const NAME_MAX_LENGTH = 255;
 
-const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
-  const { control, formState: { errors, isDirty }, handleSubmit, setError } = useForm<Inputs>({
+const CustomAbiForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVisible }) => {
+  const formApi = useForm<Inputs>({
     defaultValues: {
       contract_address_hash: data?.contract_address_hash || '',
       name: data?.name || '',
-      abi: JSON.stringify(data?.abi) || '',
+      abi: data && 'abi' in data ? JSON.stringify(data.abi) : '',
     },
     mode: 'onTouched',
   });
@@ -61,11 +62,9 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
     });
   };
 
-  const formBackgroundColor = useColorModeValue('white', 'gray.900');
-
-  const mutation = useMutation({
+  const { mutateAsync, isPending } = useMutation({
     mutationFn: customAbiKey,
-    onSuccess: (data) => {
+    onSuccess: async(data) => {
       const response = data as unknown as CustomAbi;
       queryClient.setQueryData([ resourceKey('custom_abi') ], (prevData: CustomAbis | undefined) => {
         const isExisting = prevData && prevData.some((item) => item.id === response.id);
@@ -82,106 +81,72 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
 
         return [ response, ...(prevData || []) ];
       });
-
+      await onSuccess?.();
       onClose();
     },
     onError: (error: ResourceErrorAccount<CustomAbiErrors>) => {
       const errorMap = error.payload?.errors;
       if (errorMap?.address_hash || errorMap?.name || errorMap?.abi) {
-        errorMap?.address_hash && setError('contract_address_hash', { type: 'custom', message: getErrorMessage(errorMap, 'address_hash') });
-        errorMap?.name && setError('name', { type: 'custom', message: getErrorMessage(errorMap, 'name') });
-        errorMap?.abi && setError('abi', { type: 'custom', message: getErrorMessage(errorMap, 'abi') });
+        errorMap?.address_hash && formApi.setError('contract_address_hash', { type: 'custom', message: getErrorMessage(errorMap, 'address_hash') });
+        errorMap?.name && formApi.setError('name', { type: 'custom', message: getErrorMessage(errorMap, 'name') });
+        errorMap?.abi && formApi.setError('abi', { type: 'custom', message: getErrorMessage(errorMap, 'abi') });
       } else if (errorMap?.identity_id) {
-        setError('contract_address_hash', { type: 'custom', message: getErrorMessage(errorMap, 'identity_id') });
+        formApi.setError('contract_address_hash', { type: 'custom', message: getErrorMessage(errorMap, 'identity_id') });
       } else {
         setAlertVisible(true);
       }
     },
   });
 
-  const onSubmit: SubmitHandler<Inputs> = useCallback((formData) => {
+  const onSubmit: SubmitHandler<Inputs> = useCallback(async(formData) => {
     setAlertVisible(false);
-    mutation.mutate({ ...formData, id: data?.id });
-  }, [ mutation, data, setAlertVisible ]);
-
-  const renderContractAddressInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'contract_address_hash'>}) => {
-    return (
-      <AddressInput<Inputs, 'contract_address_hash'>
-        field={ field }
-        error={ errors.contract_address_hash }
-        backgroundColor={ formBackgroundColor }
-        placeholder="Smart contract address (0x...)"
-      />
-    );
-  }, [ errors, formBackgroundColor ]);
-
-  const renderNameInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'name'>}) => {
-    return (
-      <FormControl variant="floating" id="name" isRequired backgroundColor={ formBackgroundColor }>
-        <Input
-          { ...field }
-          isInvalid={ Boolean(errors.name) }
-          maxLength={ NAME_MAX_LENGTH }
-        />
-        <InputPlaceholder text="Project name" error={ errors.name }/>
-      </FormControl>
-    );
-  }, [ errors, formBackgroundColor ]);
-
-  const renderAbiInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'abi'>}) => {
-    return (
-      <FormControl variant="floating" id="abi" isRequired backgroundColor={ formBackgroundColor }>
-        <Textarea
-          { ...field }
-          size="lg"
-          minH="300px"
-          isInvalid={ Boolean(errors.abi) }
-        />
-        <InputPlaceholder text="Custom ABI [{...}] (JSON format)" error={ errors.abi }/>
-      </FormControl>
-    );
-  }, [ errors, formBackgroundColor ]);
+    const id = data && 'id' in data ? String(data.id) : undefined;
+    await mutateAsync({ ...formData, id });
+  }, [ mutateAsync, data, setAlertVisible ]);
 
   return (
-    <form noValidate onSubmit={ handleSubmit(onSubmit) }>
-      <Box>
-        <Controller
+    <FormProvider { ...formApi }>
+      <form noValidate onSubmit={ formApi.handleSubmit(onSubmit) }>
+        <FormFieldAddress<Inputs>
           name="contract_address_hash"
-          control={ control }
-          render={ renderContractAddressInput }
-          rules={{
-            pattern: ADDRESS_REGEXP,
-            required: true,
-          }}
+          placeholder="Smart contract address (0x...)"
+          isRequired
+          bgColor="dialog_bg"
+          isReadOnly={ Boolean(data && 'contract_address_hash' in data) }
+          mb={ 5 }
         />
-      </Box>
-      <Box marginTop={ 5 }>
-        <Controller
+        <FormFieldText<Inputs>
           name="name"
-          control={ control }
-          render={ renderNameInput }
-          rules={{ required: true }}
+          placeholder="Project name"
+          isRequired
+          rules={{
+            maxLength: NAME_MAX_LENGTH,
+          }}
+          bgColor="dialog_bg"
+          mb={ 5 }
         />
-      </Box>
-      <Box marginTop={ 5 }>
-        <Controller
+        <FormFieldText<Inputs>
           name="abi"
-          control={ control }
-          render={ renderAbiInput }
-          rules={{ required: true }}
-        />
-      </Box>
-      <Box marginTop={ 8 }>
-        <Button
+          placeholder="Custom ABI [{...}] (JSON format)"
+          isRequired
+          asComponent="Textarea"
+          bgColor="dialog_bg"
           size="lg"
-          type="submit"
-          isDisabled={ !isDirty }
-          isLoading={ mutation.isPending }
-        >
-          { data ? 'Save' : 'Create custom ABI' }
-        </Button>
-      </Box>
-    </form>
+          minH="300px"
+          mb={ 8 }
+        />
+        <Box>
+          <Button
+            size="lg"
+            type="submit"
+            isDisabled={ !formApi.formState.isDirty }
+            isLoading={ isPending }
+          >
+            { data && 'id' in data ? 'Save' : 'Create custom ABI' }
+          </Button>
+        </Box>
+      </form>
+    </FormProvider>
   );
 };
 
diff --git a/ui/customAbi/CustomAbiModal/CustomAbiModal.tsx b/ui/customAbi/CustomAbiModal/CustomAbiModal.tsx
index 7f79207e9b..435deb380f 100644
--- a/ui/customAbi/CustomAbiModal/CustomAbiModal.tsx
+++ b/ui/customAbi/CustomAbiModal/CustomAbiModal.tsx
@@ -4,23 +4,24 @@ import type { CustomAbi } from 'types/api/account';
 
 import FormModal from 'ui/shared/FormModal';
 
-import CustomAbiForm from './CustomAbiForm';
+import CustomAbiForm, { type FormData } from './CustomAbiForm';
 
 type Props = {
   isOpen: boolean;
   onClose: () => void;
-  data?: CustomAbi;
-}
+  onSuccess?: () => Promise<void>;
+  data: FormData;
+};
 
-const CustomAbiModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
-  const title = data ? 'Edit custom ABI' : 'New custom ABI';
-  const text = !data ? 'Double check the ABI matches the contract to prevent errors or incorrect results.' : '';
+const CustomAbiModal: React.FC<Props> = ({ isOpen, onClose, data, onSuccess }) => {
+  const title = data && 'id' in data ? 'Edit custom ABI' : 'New custom ABI';
+  const text = !(data && 'id' in data) ? 'Double check the ABI matches the contract to prevent errors or incorrect results.' : '';
 
   const [ isAlertVisible, setAlertVisible ] = useState(false);
 
   const renderForm = useCallback(() => {
-    return <CustomAbiForm data={ data } onClose={ onClose } setAlertVisible={ setAlertVisible }/>;
-  }, [ data, onClose ]);
+    return <CustomAbiForm data={ data } onClose={ onClose } onSuccess={ onSuccess } setAlertVisible={ setAlertVisible }/>;
+  }, [ data, onClose, onSuccess ]);
   return (
     <FormModal<CustomAbi>
       isOpen={ isOpen }
diff --git a/ui/customAbi/CustomAbiTable/CustomAbiTable.tsx b/ui/customAbi/CustomAbiTable/CustomAbiTable.tsx
index e09aea306e..c8cdef4b71 100644
--- a/ui/customAbi/CustomAbiTable/CustomAbiTable.tsx
+++ b/ui/customAbi/CustomAbiTable/CustomAbiTable.tsx
@@ -20,7 +20,7 @@ interface Props {
 
 const CustomAbiTable = ({ data, isLoading, onDeleteClick, onEditClick }: Props) => {
   return (
-    <Table variant="simple" minWidth="600px">
+    <Table minWidth="600px">
       <Thead>
         <Tr>
           <Th>ABI for Smart contract address (0x...)</Th>
@@ -30,7 +30,7 @@ const CustomAbiTable = ({ data, isLoading, onDeleteClick, onEditClick }: Props)
       <Tbody>
         { data?.map((item, index) => (
           <CustomAbiTableItem
-            key={ item.id + (isLoading ? index : '') }
+            key={ item.id + (isLoading ? String(index) : '') }
             item={ item }
             isLoading={ isLoading }
             onDeleteClick={ onDeleteClick }
diff --git a/ui/customAbi/DeleteCustomAbiModal.tsx b/ui/customAbi/DeleteCustomAbiModal.tsx
index da1959526a..1282f2af5f 100644
--- a/ui/customAbi/DeleteCustomAbiModal.tsx
+++ b/ui/customAbi/DeleteCustomAbiModal.tsx
@@ -12,7 +12,7 @@ type Props = {
   isOpen: boolean;
   onClose: () => void;
   data: CustomAbi;
-}
+};
 
 const DeleteCustomAbiModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
 
diff --git a/ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx b/ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx
new file mode 100644
index 0000000000..7c1564735d
--- /dev/null
+++ b/ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx
@@ -0,0 +1,88 @@
+import { Skeleton } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { OptimisticL2DepositsItem } from 'types/api/optimisticL2';
+
+import config from 'configs/app';
+import AddressEntityL1 from 'ui/shared/entities/address/AddressEntityL1';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: OptimisticL2DepositsItem; isLoading?: boolean };
+
+const OptimisticDepositsListItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') {
+    return null;
+  }
+
+  return (
+    <ListItemMobileGrid.Container>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 block No</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BlockEntityL1
+          number={ item.l1_block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TxEntity
+          isLoading={ isLoading }
+          hash={ item.l2_transaction_hash }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TimeAgoWithTooltip
+          timestamp={ item.l1_block_timestamp }
+          isLoading={ isLoading }
+          display="inline-block"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TxEntityL1
+          isLoading={ isLoading }
+          hash={ item.l1_transaction_hash }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn origin</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <AddressEntityL1
+          address={{ hash: item.l1_transaction_origin, name: '', is_contract: false, is_verified: false, ens_domain_name: null, implementations: null }}
+          isLoading={ isLoading }
+          noCopy
+          truncation="constant"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Gas limit</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ BigNumber(item.l2_transaction_gas_limit).toFormat() }</Skeleton>
+      </ListItemMobileGrid.Value>
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default OptimisticDepositsListItem;
diff --git a/ui/deposits/optimisticL2/OptimisticDepositsTable.tsx b/ui/deposits/optimisticL2/OptimisticDepositsTable.tsx
new file mode 100644
index 0000000000..a81036f128
--- /dev/null
+++ b/ui/deposits/optimisticL2/OptimisticDepositsTable.tsx
@@ -0,0 +1,38 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { OptimisticL2DepositsItem } from 'types/api/optimisticL2';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import OptimisticDepositsTableItem from './OptimisticDepositsTableItem';
+
+ type Props = {
+   items: Array<OptimisticL2DepositsItem>;
+   top: number;
+   isLoading?: boolean;
+ };
+
+const OptimisticDepositsTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
+      <Thead top={ top }>
+        <Tr>
+          <Th>L1 block No</Th>
+          <Th>L2 txn hash</Th>
+          <Th>Age</Th>
+          <Th>L1 txn hash</Th>
+          <Th>L1 txn origin</Th>
+          <Th isNumeric>Gas limit</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <OptimisticDepositsTableItem key={ item.l2_transaction_hash + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default OptimisticDepositsTable;
diff --git a/ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx b/ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx
new file mode 100644
index 0000000000..299509a4a9
--- /dev/null
+++ b/ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx
@@ -0,0 +1,81 @@
+import { Td, Tr, Skeleton } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { OptimisticL2DepositsItem } from 'types/api/optimisticL2';
+
+import config from 'configs/app';
+import AddressEntityL1 from 'ui/shared/entities/address/AddressEntityL1';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+ type Props = { item: OptimisticL2DepositsItem; isLoading?: boolean };
+
+const OptimisticDepositsTableItem = ({ item, isLoading }: Props) => {
+
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') {
+    return null;
+  }
+
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <BlockEntityL1
+          number={ item.l1_block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+          noIcon
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <TxEntity
+          isLoading={ isLoading }
+          hash={ item.l2_transaction_hash }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+          noIcon
+        />
+      </Td>
+      <Td verticalAlign="middle" pr={ 12 }>
+        <TimeAgoWithTooltip
+          timestamp={ item.l1_block_timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <TxEntityL1
+          isLoading={ isLoading }
+          hash={ item.l1_transaction_hash }
+          truncation="constant_long"
+          noIcon
+          fontSize="sm"
+          lineHeight={ 5 }
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <AddressEntityL1
+          address={{ hash: item.l1_transaction_origin, name: '', is_contract: false, is_verified: false, ens_domain_name: null, implementations: null }}
+          isLoading={ isLoading }
+          truncation="constant"
+          noCopy
+        />
+      </Td>
+      <Td verticalAlign="middle" isNumeric>
+        <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block">
+          <span>{ BigNumber(item.l2_transaction_gas_limit).toFormat() }</span>
+        </Skeleton>
+      </Td>
+    </Tr>
+  );
+};
+
+export default OptimisticDepositsTableItem;
diff --git a/ui/deposits/scrollL2/ScrollL2DepositsListItem.tsx b/ui/deposits/scrollL2/ScrollL2DepositsListItem.tsx
new file mode 100644
index 0000000000..37a6d20602
--- /dev/null
+++ b/ui/deposits/scrollL2/ScrollL2DepositsListItem.tsx
@@ -0,0 +1,94 @@
+import { Skeleton, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ScrollL2MessageItem } from 'types/api/scrollL2';
+
+import config from 'configs/app';
+import getCurrencyValue from 'lib/getCurrencyValue';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: ScrollL2MessageItem; isLoading?: boolean };
+
+const ScrollL2DepositsListItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'scroll') {
+    return null;
+  }
+
+  const { valueStr } = getCurrencyValue({ value: item.value, decimals: String(config.chain.currency.decimals) });
+
+  return (
+    <ListItemMobileGrid.Container>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 block</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BlockEntityL1
+          number={ item.origination_transaction_block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Index</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { item.id }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TxEntityL1
+          isLoading={ isLoading }
+          hash={ item.origination_transaction_hash }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TimeAgoWithTooltip
+          timestamp={ item.origination_timestamp }
+          isLoading={ isLoading }
+          display="inline-block"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        { item.completion_transaction_hash ? (
+          <TxEntity
+            isLoading={ isLoading }
+            hash={ item.completion_transaction_hash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+          />
+        ) : (
+          <chakra.span>
+            Pending Claim
+          </chakra.span>
+        ) }
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { `${ valueStr } ${ config.chain.currency.symbol }` }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default ScrollL2DepositsListItem;
diff --git a/ui/deposits/scrollL2/ScrollL2DepositsTable.tsx b/ui/deposits/scrollL2/ScrollL2DepositsTable.tsx
new file mode 100644
index 0000000000..0a272a7362
--- /dev/null
+++ b/ui/deposits/scrollL2/ScrollL2DepositsTable.tsx
@@ -0,0 +1,39 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ScrollL2MessageItem } from 'types/api/scrollL2';
+
+import config from 'configs/app';
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import ScrollL2DepositsTableItem from './ScrollL2DepositsTableItem';
+
+ type Props = {
+   items: Array<ScrollL2MessageItem>;
+   top: number;
+   isLoading?: boolean;
+ };
+
+const ScrollL2DepositsTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
+      <Thead top={ top }>
+        <Tr>
+          <Th>L1 block</Th>
+          <Th>Index</Th>
+          <Th>L1 txn hash</Th>
+          <Th>Age</Th>
+          <Th>L2 txn hash</Th>
+          <Th isNumeric>Value { config.chain.currency.symbol }</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <ScrollL2DepositsTableItem key={ String(item.id) + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default ScrollL2DepositsTable;
diff --git a/ui/deposits/scrollL2/ScrollL2DepositsTableItem.tsx b/ui/deposits/scrollL2/ScrollL2DepositsTableItem.tsx
new file mode 100644
index 0000000000..4a48813c23
--- /dev/null
+++ b/ui/deposits/scrollL2/ScrollL2DepositsTableItem.tsx
@@ -0,0 +1,83 @@
+import { Td, Tr, Skeleton, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ScrollL2MessageItem } from 'types/api/scrollL2';
+
+import config from 'configs/app';
+import getCurrencyValue from 'lib/getCurrencyValue';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+ type Props = { item: ScrollL2MessageItem; isLoading?: boolean };
+
+const ScrollL2DepositsTableItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'scroll') {
+    return null;
+  }
+
+  const { valueStr } = getCurrencyValue({ value: item.value, decimals: String(config.chain.currency.decimals) });
+
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <BlockEntityL1
+          number={ item.origination_transaction_block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+          noIcon
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading }>
+          <span>{ item.id }</span>
+        </Skeleton>
+      </Td>
+      <Td verticalAlign="middle">
+        <TxEntityL1
+          isLoading={ isLoading }
+          hash={ item.origination_transaction_hash }
+          truncation="constant_long"
+          noIcon
+          fontSize="sm"
+          lineHeight={ 5 }
+        />
+      </Td>
+      <Td verticalAlign="middle" pr={ 12 }>
+        <TimeAgoWithTooltip
+          timestamp={ item.origination_timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        { item.completion_transaction_hash ? (
+          <TxEntity
+            isLoading={ isLoading }
+            hash={ item.completion_transaction_hash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+            noIcon
+          />
+        ) : (
+          <chakra.span color="text_secondary">
+            Pending Claim
+          </chakra.span>
+        ) }
+      </Td>
+      <Td verticalAlign="middle" isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          <span>{ valueStr }</span>
+        </Skeleton>
+      </Td>
+    </Tr>
+  );
+};
+
+export default ScrollL2DepositsTableItem;
diff --git a/ui/deposits/shibarium/DepositsListItem.tsx b/ui/deposits/shibarium/DepositsListItem.tsx
new file mode 100644
index 0000000000..53d88f515f
--- /dev/null
+++ b/ui/deposits/shibarium/DepositsListItem.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+
+import type { ShibariumDepositsItem } from 'types/api/shibarium';
+
+import config from 'configs/app';
+import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const feature = config.features.rollup;
+
+type Props = { item: ShibariumDepositsItem; isLoading?: boolean };
+
+const DepositsListItem = ({ item, isLoading }: Props) => {
+  if (!(feature.isEnabled && feature.type === 'shibarium')) {
+    return null;
+  }
+
+  return (
+    <ListItemMobileGrid.Container>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 block No</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BlockEntityL1
+          number={ item.l1_block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TxEntityL1
+          isLoading={ isLoading }
+          hash={ item.l1_transaction_hash }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TxEntity
+          isLoading={ isLoading }
+          hash={ item.l2_transaction_hash }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>User</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <AddressStringOrParam
+          address={ item.user }
+          isLoading={ isLoading }
+          noCopy
+          truncation="constant"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          isLoading={ isLoading }
+          display="inline-block"
+        />
+      </ListItemMobileGrid.Value>
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default DepositsListItem;
diff --git a/ui/deposits/shibarium/DepositsTable.tsx b/ui/deposits/shibarium/DepositsTable.tsx
new file mode 100644
index 0000000000..1bb215f3a6
--- /dev/null
+++ b/ui/deposits/shibarium/DepositsTable.tsx
@@ -0,0 +1,37 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ShibariumDepositsItem } from 'types/api/shibarium';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import DepositsTableItem from './DepositsTableItem';
+
+ type Props = {
+   items: Array<ShibariumDepositsItem>;
+   top: number;
+   isLoading?: boolean;
+ };
+
+const DepositsTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
+      <Thead top={ top }>
+        <Tr>
+          <Th>L1 block No</Th>
+          <Th>L1 txn hash</Th>
+          <Th>L2 txn hash</Th>
+          <Th>User</Th>
+          <Th>Age</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <DepositsTableItem key={ item.l2_transaction_hash + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default DepositsTable;
diff --git a/ui/deposits/shibarium/DepositsTableItem.tsx b/ui/deposits/shibarium/DepositsTableItem.tsx
new file mode 100644
index 0000000000..da23f68ecc
--- /dev/null
+++ b/ui/deposits/shibarium/DepositsTableItem.tsx
@@ -0,0 +1,72 @@
+import { Td, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ShibariumDepositsItem } from 'types/api/shibarium';
+
+import config from 'configs/app';
+import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const feature = config.features.rollup;
+
+ type Props = { item: ShibariumDepositsItem; isLoading?: boolean };
+
+const DepositsTableItem = ({ item, isLoading }: Props) => {
+
+  if (!(feature.isEnabled && feature.type === 'shibarium')) {
+    return null;
+  }
+
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <BlockEntityL1
+          number={ item.l1_block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <TxEntityL1
+          isLoading={ isLoading }
+          hash={ item.l1_transaction_hash }
+          truncation="constant_long"
+          fontSize="sm"
+          lineHeight={ 5 }
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <TxEntity
+          isLoading={ isLoading }
+          hash={ item.l2_transaction_hash }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <AddressStringOrParam
+          address={ item.user }
+          isLoading={ isLoading }
+          truncation="constant"
+          noCopy
+        />
+      </Td>
+      <Td verticalAlign="middle" pr={ 12 }>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
+      </Td>
+    </Tr>
+  );
+};
+
+export default DepositsTableItem;
diff --git a/ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx b/ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx
new file mode 100644
index 0000000000..3bca44ee29
--- /dev/null
+++ b/ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx
@@ -0,0 +1,99 @@
+import { Skeleton, chakra } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { ZkEvmL2DepositsItem } from 'types/api/zkEvmL2';
+
+import config from 'configs/app';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: ZkEvmL2DepositsItem; isLoading?: boolean };
+
+const ZkEvmL2DepositsListItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'zkEvm') {
+    return null;
+  }
+
+  return (
+    <ListItemMobileGrid.Container>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 block</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BlockEntityL1
+          number={ item.block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Index</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { item.index }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TxEntityL1
+          isLoading={ isLoading }
+          hash={ item.l1_transaction_hash }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          isLoading={ isLoading }
+          display="inline-block"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        { item.l2_transaction_hash ? (
+          <TxEntity
+            isLoading={ isLoading }
+            hash={ item.l2_transaction_hash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+          />
+        ) : (
+          <chakra.span>
+            Pending Claim
+          </chakra.span>
+        ) }
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { BigNumber(item.value).toFormat() }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Token</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { item.symbol }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default ZkEvmL2DepositsListItem;
diff --git a/ui/deposits/zkEvmL2/ZkEvmL2DepositsTable.tsx b/ui/deposits/zkEvmL2/ZkEvmL2DepositsTable.tsx
new file mode 100644
index 0000000000..69f76ad298
--- /dev/null
+++ b/ui/deposits/zkEvmL2/ZkEvmL2DepositsTable.tsx
@@ -0,0 +1,39 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ZkEvmL2DepositsItem } from 'types/api/zkEvmL2';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import ZkEvmL2DepositsTableItem from './ZkEvmL2DepositsTableItem';
+
+ type Props = {
+   items: Array<ZkEvmL2DepositsItem>;
+   top: number;
+   isLoading?: boolean;
+ };
+
+const ZkEvmL2DepositsTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
+      <Thead top={ top }>
+        <Tr>
+          <Th>L1 block</Th>
+          <Th>Index</Th>
+          <Th>L1 txn hash</Th>
+          <Th>Age</Th>
+          <Th>L2 txn hash</Th>
+          <Th isNumeric>Value</Th>
+          <Th>Token</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <ZkEvmL2DepositsTableItem key={ String(item.index) + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default ZkEvmL2DepositsTable;
diff --git a/ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx b/ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx
new file mode 100644
index 0000000000..962135741b
--- /dev/null
+++ b/ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx
@@ -0,0 +1,86 @@
+import { Td, Tr, Skeleton, chakra } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { ZkEvmL2DepositsItem } from 'types/api/zkEvmL2';
+
+import config from 'configs/app';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+ type Props = { item: ZkEvmL2DepositsItem; isLoading?: boolean };
+
+const ZkEvmL2DepositsTableItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'zkEvm') {
+    return null;
+  }
+
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <BlockEntityL1
+          number={ item.block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+          noIcon
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading }>
+          <span>{ item.index }</span>
+        </Skeleton>
+      </Td>
+      <Td verticalAlign="middle">
+        <TxEntityL1
+          isLoading={ isLoading }
+          hash={ item.l1_transaction_hash }
+          truncation="constant_long"
+          noIcon
+          fontSize="sm"
+          lineHeight={ 5 }
+        />
+      </Td>
+      <Td verticalAlign="middle" pr={ 12 }>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        { item.l2_transaction_hash ? (
+          <TxEntity
+            isLoading={ isLoading }
+            hash={ item.l2_transaction_hash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+            noIcon
+          />
+        ) : (
+          <chakra.span color="text_secondary">
+            Pending Claim
+          </chakra.span>
+        ) }
+      </Td>
+      <Td verticalAlign="middle" isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          <span>{ BigNumber(item.value).toFormat() }</span>
+        </Skeleton>
+      </Td>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          <span>{ item.symbol }</span>
+        </Skeleton>
+      </Td>
+    </Tr>
+  );
+};
+
+export default ZkEvmL2DepositsTableItem;
diff --git a/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesListItem.tsx b/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesListItem.tsx
new file mode 100644
index 0000000000..27d83573c5
--- /dev/null
+++ b/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesListItem.tsx
@@ -0,0 +1,84 @@
+import { Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { OptimisticL2DisputeGamesItem } from 'types/api/optimisticL2';
+
+import config from 'configs/app';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
+import HashStringShorten from 'ui/shared/HashStringShorten';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: OptimisticL2DisputeGamesItem; isLoading?: boolean };
+
+const OptimisticL2DisputeGamesListItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') {
+    return null;
+  }
+
+  return (
+    <ListItemMobileGrid.Container>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Index</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value fontWeight={ 600 } color="text">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.index }</Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Game type</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.game_type }</Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Address</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value color="text">
+        <Skeleton isLoaded={ !isLoading } display="flex" overflow="hidden" w="100%" alignItems="center">
+          <HashStringShorten hash={ item.contract_address } type="long"/>
+          <CopyToClipboard text={ item.contract_address } ml={ 2 } isLoading={ isLoading }/>
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 block #</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BlockEntityL2
+          isLoading={ isLoading }
+          number={ item.l2_block_number }
+          fontSize="sm"
+          lineHeight={ 5 }
+          noIcon
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TimeAgoWithTooltip
+          timestamp={ item.created_at }
+          isLoading={ isLoading }
+          display="inline-block"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Status</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value color="text">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.status }</Skeleton>
+      </ListItemMobileGrid.Value>
+
+      { item.resolved_at && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>Resolution age</ListItemMobileGrid.Label><ListItemMobileGrid.Value>
+            <TimeAgoWithTooltip
+              timestamp={ item.resolved_at }
+              isLoading={ isLoading }
+              display="inline-block"
+            />
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default OptimisticL2DisputeGamesListItem;
diff --git a/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTable.tsx b/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTable.tsx
new file mode 100644
index 0000000000..e79acb92d9
--- /dev/null
+++ b/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTable.tsx
@@ -0,0 +1,43 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { OptimisticL2DisputeGamesItem } from 'types/api/optimisticL2';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import OptimisticL2DisputeGamesTableItem from './OptimisticL2DisputeGamesTableItem';
+
+type Props = {
+  items: Array<OptimisticL2DisputeGamesItem>;
+  top: number;
+  isLoading?: boolean;
+};
+
+const OptimisticL2DisputeGamesTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
+      <Thead top={ top }>
+        <Tr>
+          <Th>Index</Th>
+          <Th>Game type</Th>
+          <Th>Address</Th>
+          <Th>L2 block #</Th>
+          <Th>Age</Th>
+          <Th>Status</Th>
+          <Th>Resolution age</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <OptimisticL2DisputeGamesTableItem
+            key={ String(item.index) + (isLoading ? index : '') }
+            item={ item }
+            isLoading={ isLoading }
+          />
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default OptimisticL2DisputeGamesTable;
diff --git a/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTableItem.tsx b/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTableItem.tsx
new file mode 100644
index 0000000000..dd55542b5d
--- /dev/null
+++ b/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTableItem.tsx
@@ -0,0 +1,68 @@
+import { Flex, Td, Tr, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { OptimisticL2DisputeGamesItem } from 'types/api/optimisticL2';
+
+import config from 'configs/app';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
+import HashStringShorten from 'ui/shared/HashStringShorten';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const faultProofSystemFeature = config.features.faultProofSystem;
+
+type Props = { item: OptimisticL2DisputeGamesItem; isLoading?: boolean };
+
+const OptimisticL2DisputeGamesTableItem = ({ item, isLoading }: Props) => {
+  if (!faultProofSystemFeature.isEnabled) {
+    return null;
+  }
+
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.index }</Skeleton>
+      </Td>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.game_type }</Skeleton>
+      </Td>
+      <Td verticalAlign="middle">
+        <Flex overflow="hidden" w="100%" alignItems="center">
+          <Skeleton isLoaded={ !isLoading }>
+            <HashStringShorten hash={ item.contract_address } type="long"/>
+          </Skeleton>
+          <CopyToClipboard text={ item.contract_address } ml={ 2 } isLoading={ isLoading }/>
+        </Flex>
+      </Td>
+      <Td verticalAlign="middle">
+        <BlockEntityL2
+          isLoading={ isLoading }
+          number={ item.l2_block_number }
+          fontSize="sm"
+          lineHeight={ 5 }
+          noIcon
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <TimeAgoWithTooltip
+          timestamp={ item.created_at }
+          isLoading={ isLoading }
+          display="inline-block"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.status }</Skeleton>
+      </Td>
+      <Td>
+        <TimeAgoWithTooltip
+          timestamp={ item.resolved_at }
+          fallbackText="N/A"
+          isLoading={ isLoading }
+          display="inline-block"
+        />
+      </Td>
+    </Tr>
+  );
+};
+
+export default OptimisticL2DisputeGamesTableItem;
diff --git a/ui/games/CapybaraRunner.tsx b/ui/games/CapybaraRunner.tsx
new file mode 100644
index 0000000000..dc23d40de2
--- /dev/null
+++ b/ui/games/CapybaraRunner.tsx
@@ -0,0 +1,56 @@
+/* eslint-disable @next/next/no-img-element */
+import { Box, Text, Button, Flex } from '@chakra-ui/react';
+import Script from 'next/script';
+import React from 'react';
+
+import config from 'configs/app';
+
+const easterEggBadgeFeature = config.features.easterEggBadge;
+
+const CapybaraRunner = () => {
+  const [ hasReachedHighScore, setHasReachedHighScore ] = React.useState(false);
+
+  React.useEffect(() => {
+    const preventDefaultKeys = (e: KeyboardEvent) => {
+      if (e.code === 'Space' || e.code === 'ArrowUp' || e.code === 'ArrowDown') {
+        e.preventDefault();
+      }
+    };
+
+    const handleHighScore = () => {
+      setHasReachedHighScore(true);
+    };
+
+    window.addEventListener('reachedHighScore', handleHighScore);
+    window.addEventListener('keydown', preventDefaultKeys);
+
+    return () => {
+      window.removeEventListener('keydown', preventDefaultKeys);
+      window.removeEventListener('reachedHighScore', handleHighScore);
+    };
+  }, []);
+
+  return (
+    <>
+      <Script strategy="lazyOnload" src="/static/capibara/index.js"/>
+      <Box width={{ base: '100%', lg: '600px' }} height="300px" p="50px 0">
+        <div id="main-frame-error" className="interstitial-wrapper" style={{ marginTop: '20px' }}>
+          <div id="main-content"></div>
+          <div id="offline-resources" style={{ display: 'none' }}>
+            <img id="offline-resources-1x" src="/static/capibara/capybaraSprite.png"/>
+            <img id="offline-resources-2x" src="/static/capibara/capybaraSpriteX2.png"/>
+          </div>
+        </div>
+      </Box>
+      { easterEggBadgeFeature.isEnabled && hasReachedHighScore && (
+        <Flex flexDirection="column" alignItems="center" justifyContent="center" gap={ 4 } mt={ 10 }>
+          <Text fontSize="2xl" fontWeight="bold">You unlocked a hidden badge!</Text>
+          <Text fontSize="lg" textAlign="center">Congratulations! You’re eligible to claim an epic hidden badge!</Text>
+          <Button as="a" href={ easterEggBadgeFeature.badgeClaimLink } target="_blank">Claim</Button>
+        </Flex>
+      ) }
+    </>
+  );
+};
+
+export default CapybaraRunner;
diff --git a/ui/gasTracker/GasTrackerChart.tsx b/ui/gasTracker/GasTrackerChart.tsx
new file mode 100644
index 0000000000..a85991db8c
--- /dev/null
+++ b/ui/gasTracker/GasTrackerChart.tsx
@@ -0,0 +1,63 @@
+import { Box, Flex, chakra, useBoolean } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { STATS_CHARTS } from 'stubs/stats';
+import ContentLoader from 'ui/shared/ContentLoader';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import ChartWidgetContainer from 'ui/stats/ChartWidgetContainer';
+
+const GAS_PRICE_CHART_ID = 'averageGasPrice';
+
+const GasTrackerChart = () => {
+  const [ isChartLoadingError, setChartLoadingError ] = useBoolean(false);
+  const { data, isPlaceholderData, isError } = useApiQuery('stats_lines', {
+    queryOptions: {
+      placeholderData: STATS_CHARTS,
+    },
+  });
+
+  const content = (() => {
+    if (isPlaceholderData) {
+      return <ContentLoader/>;
+    }
+
+    if (isChartLoadingError || isError) {
+      return <DataFetchAlert/>;
+    }
+
+    const chart = data?.sections.map((section) => section.charts.find((chart) => chart.id === GAS_PRICE_CHART_ID)).filter(Boolean)?.[0];
+
+    if (!chart) {
+      return <DataFetchAlert/>;
+    }
+
+    return (
+      <ChartWidgetContainer
+        id={ GAS_PRICE_CHART_ID }
+        title={ chart.title }
+        description={ chart.description }
+        interval="oneMonth"
+        units={ chart.units || undefined }
+        isPlaceholderData={ isPlaceholderData }
+        onLoadingError={ setChartLoadingError.on }
+        h="320px"
+      />
+    );
+  })();
+
+  return (
+    <Box>
+      <Flex justifyContent="space-between" alignItems="center" mb={ 6 }>
+        <chakra.h3 textStyle="h3">Gas price history</chakra.h3>
+        <LinkInternal href={ route({ pathname: '/stats', hash: 'gas' }) }>Charts & stats</LinkInternal>
+      </Flex>
+      { content }
+    </Box>
+  );
+};
+
+export default React.memo(GasTrackerChart);
diff --git a/ui/gasTracker/GasTrackerFaq.tsx b/ui/gasTracker/GasTrackerFaq.tsx
new file mode 100644
index 0000000000..054c0ce990
--- /dev/null
+++ b/ui/gasTracker/GasTrackerFaq.tsx
@@ -0,0 +1,47 @@
+import {
+  Box,
+  Heading,
+  Accordion,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import { currencyUnits } from 'lib/units';
+
+import GasTrackerFaqItem from './GasTrackerFaqItem';
+
+const FAQ_ITEMS = [
+  {
+    question: 'What does gas refer to on the blockchain?',
+    answer: 'Gas is the amount of native tokens required to perform a transaction on the blockchain.',
+  },
+  {
+    question: `How can I check ${ config.chain.name } gas fees?`,
+    // eslint-disable-next-line max-len
+    answer: `You can easily check live ${ config.chain.name } gas fees on Blockscout by visiting our gas tracker. It displays current gas fees in ${ currencyUnits.gwei } for all ${ config.chain.name } transactions.`,
+  },
+  {
+    question: `What is the average gas fee for ${ config.chain.name } transactions?`,
+    // eslint-disable-next-line max-len
+    answer: `The average gas fee for ${ config.chain.name } transactions depends on network congestion and transaction complexity. Blockscout provides real-time gas fee estimations to help users make informed decisions.`,
+  },
+  {
+    question: 'How does Blockscout calculate gas fees?',
+    answer: 'Blockscout calculates gas fees based on the average price of gas fees spent for the last 200 blocks.',
+  },
+];
+
+const GasTrackerFaq = () => {
+  return (
+    <Box mt={ 12 }>
+      <Heading as="h2" mb={ 4 } fontSize="2xl" fontWeight="medium">FAQ</Heading>
+      <Accordion>
+        { FAQ_ITEMS.map((item, index) => (
+          <GasTrackerFaqItem key={ index } question={ item.question } answer={ item.answer }/>
+        )) }
+      </Accordion>
+    </Box>
+  );
+};
+
+export default GasTrackerFaq;
diff --git a/ui/gasTracker/GasTrackerFaqItem.tsx b/ui/gasTracker/GasTrackerFaqItem.tsx
new file mode 100644
index 0000000000..8a15b52636
--- /dev/null
+++ b/ui/gasTracker/GasTrackerFaqItem.tsx
@@ -0,0 +1,39 @@
+import {
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  AccordionIcon,
+  Text,
+  chakra,
+  useColorModeValue,
+} from '@chakra-ui/react';
+
+interface Props {
+  question: string;
+  answer: string;
+}
+
+const GasTrackerFaqItem = ({ question, answer }: Props) => {
+  const hoverColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+  const borderColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.200');
+  return (
+    <AccordionItem as="section" _first={{ borderTopWidth: 0 }} _last={{ borderBottomWidth: 0 }} borderColor={ borderColor }>
+      { ({ isExpanded }) => (
+        <>
+          <AccordionButton
+            _hover={{ bgColor: hoverColor }}
+            px={ 0 }
+          >
+            <chakra.h3 flex="1" textAlign="left" fontSize="lg" fontWeight={ 500 }>{ question }</chakra.h3>
+            <AccordionIcon transform={ isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)' } color="gray.500"/>
+          </AccordionButton>
+          <AccordionPanel pb={ 4 } px={ 0 }>
+            <Text color="text_secondary">{ answer }</Text>
+          </AccordionPanel>
+        </>
+      ) }
+    </AccordionItem>
+  );
+};
+
+export default GasTrackerFaqItem;
diff --git a/ui/gasTracker/GasTrackerNetworkUtilization.tsx b/ui/gasTracker/GasTrackerNetworkUtilization.tsx
new file mode 100644
index 0000000000..e108c7a880
--- /dev/null
+++ b/ui/gasTracker/GasTrackerNetworkUtilization.tsx
@@ -0,0 +1,39 @@
+import { Skeleton, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import { mdash } from 'lib/html-entities';
+
+interface Props {
+  percentage: number;
+  isLoading: boolean;
+}
+
+const GasTrackerNetworkUtilization = ({ percentage, isLoading }: Props) => {
+  const load = (() => {
+    if (percentage > 80) {
+      return 'high';
+    }
+
+    if (percentage > 50) {
+      return 'medium';
+    }
+
+    return 'low';
+  })();
+
+  const colors = {
+    high: 'red.600',
+    medium: 'orange.600',
+    low: 'green.600',
+  };
+  const color = colors[load];
+
+  return (
+    <Skeleton isLoaded={ !isLoading } whiteSpace="pre-wrap">
+      <span>Network utilization </span>
+      <chakra.span color={ color }>{ percentage.toFixed(2) }% { mdash } { load } load</chakra.span>
+    </Skeleton>
+  );
+};
+
+export default React.memo(GasTrackerNetworkUtilization);
diff --git a/ui/gasTracker/GasTrackerPriceSnippet.pw.tsx b/ui/gasTracker/GasTrackerPriceSnippet.pw.tsx
new file mode 100644
index 0000000000..ac81323c70
--- /dev/null
+++ b/ui/gasTracker/GasTrackerPriceSnippet.pw.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+
+import type { GasPriceInfo } from 'types/api/stats';
+
+import * as statsMock from 'mocks/stats/index';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
+
+import GasTrackerPriceSnippet from './GasTrackerPriceSnippet';
+
+test.use({ viewport: pwConfig.viewport.md });
+
+const data = statsMock.base.gas_prices?.fast as GasPriceInfo;
+const clip = { x: 0, y: 0, width: 334, height: 204 };
+
+test('with usd as primary unit +@dark-mode', async({ render, page }) => {
+  await render(
+    <GasTrackerPriceSnippet
+      data={ data }
+      type="fast"
+      isLoading={ false }
+    />,
+  );
+  await expect(page).toHaveScreenshot({ clip });
+});
+
+test('loading state', async({ render, page }) => {
+  await render(
+    <GasTrackerPriceSnippet
+      data={ data }
+      type="fast"
+      isLoading={ true }
+    />,
+  );
+  await expect(page).toHaveScreenshot({ clip });
+});
+
+test('with gwei as primary unit +@dark-mode', async({ render, page, mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_GAS_TRACKER_UNITS', '["gwei","usd"]' ],
+  ]);
+  await render(
+    <GasTrackerPriceSnippet
+      data={ data }
+      type="slow"
+      isLoading={ false }
+    />,
+  );
+  await expect(page).toHaveScreenshot({ clip });
+});
+
+test('with zero values', async({ render, page }) => {
+  const data = {
+    fiat_price: '1.74',
+    price: 0.0,
+    time: 0,
+    base_fee: 0,
+    priority_fee: 0,
+  };
+
+  await render(
+    <GasTrackerPriceSnippet
+      data={ data }
+      type="slow"
+      isLoading={ false }
+    />,
+  );
+  await expect(page).toHaveScreenshot({ clip });
+});
+
+test('with small values', async({ render, page }) => {
+  const data = {
+    fiat_price: '0.0042',
+    price: 0.042,
+    time: 0,
+    base_fee: 0,
+    priority_fee: 0,
+  };
+
+  await render(
+    <GasTrackerPriceSnippet
+      data={ data }
+      type="slow"
+      isLoading={ false }
+    />,
+  );
+  await expect(page).toHaveScreenshot({ clip });
+});
diff --git a/ui/gasTracker/GasTrackerPriceSnippet.tsx b/ui/gasTracker/GasTrackerPriceSnippet.tsx
new file mode 100644
index 0000000000..f9ebe01445
--- /dev/null
+++ b/ui/gasTracker/GasTrackerPriceSnippet.tsx
@@ -0,0 +1,72 @@
+import { Box, Flex, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import type { GasPriceInfo, GasPrices } from 'types/api/stats';
+
+import { SECOND } from 'lib/consts';
+import { asymp } from 'lib/html-entities';
+import GasPrice from 'ui/shared/gas/GasPrice';
+import type { IconName } from 'ui/shared/IconSvg';
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props {
+  type: keyof GasPrices;
+  data: GasPriceInfo;
+  isLoading: boolean;
+}
+
+const TITLES: Record<keyof GasPrices, string> = {
+  fast: 'Fast',
+  average: 'Normal',
+  slow: 'Slow',
+};
+const ICONS: Record<keyof GasPrices, IconName> = {
+  fast: 'rocket_xl',
+  average: 'gas_xl',
+  slow: 'gas_xl',
+};
+
+const GasTrackerPriceSnippet = ({ data, type, isLoading }: Props) => {
+  const bgColors = {
+    fast: 'transparent',
+    average: useColorModeValue('gray.50', 'whiteAlpha.200'),
+    slow: useColorModeValue('gray.50', 'whiteAlpha.200'),
+  };
+  const borderColor = useColorModeValue('gray.200', 'whiteAlpha.300');
+
+  return (
+    <Box
+      as="li"
+      listStyleType="none"
+      px={ 9 }
+      py={ 6 }
+      w={{ lg: 'calc(100% / 3)' }}
+      bgColor={ bgColors[type] }
+      _notLast={{
+        borderColor: borderColor,
+        borderRightWidth: { lg: '2px' },
+        borderBottomWidth: { base: '2px', lg: '0' },
+      }}
+    >
+      <Skeleton textStyle="h3" isLoaded={ !isLoading } w="fit-content">{ TITLES[type] }</Skeleton>
+      <Flex columnGap={ 3 } alignItems="center" mt={ 3 }>
+        <IconSvg name={ ICONS[type] } boxSize={{ base: '30px', xl: 10 }} isLoading={ isLoading } flexShrink={ 0 }/>
+        <Skeleton isLoaded={ !isLoading }>
+          <GasPrice data={ data } fontSize={{ base: '36px', xl: '48px' }} lineHeight="48px" fontWeight={ 600 } letterSpacing="-1px" fontFamily="heading"/>
+        </Skeleton>
+      </Flex>
+      <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" mt={ 3 } w="fit-content">
+        { data.price !== null && data.fiat_price !== null && <GasPrice data={ data } prefix={ `${ asymp } ` } unitMode="secondary"/> }
+        <span> per transaction</span>
+        { typeof data.time === 'number' && data.time > 0 && <span> / { (data.time / SECOND).toLocaleString(undefined, { maximumFractionDigits: 1 }) }s</span> }
+      </Skeleton>
+      <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" mt={ 2 } w="fit-content" whiteSpace="pre">
+        { typeof data.base_fee === 'number' && <span>Base { data.base_fee.toLocaleString(undefined, { maximumFractionDigits: 0 }) }</span> }
+        { typeof data.base_fee === 'number' && typeof data.priority_fee === 'number' && <span> / </span> }
+        { typeof data.priority_fee === 'number' && <span>Priority { data.priority_fee.toLocaleString(undefined, { maximumFractionDigits: 0 }) }</span> }
+      </Skeleton>
+    </Box>
+  );
+};
+
+export default React.memo(GasTrackerPriceSnippet);
diff --git a/ui/gasTracker/GasTrackerPrices.tsx b/ui/gasTracker/GasTrackerPrices.tsx
new file mode 100644
index 0000000000..2f90ec16b3
--- /dev/null
+++ b/ui/gasTracker/GasTrackerPrices.tsx
@@ -0,0 +1,32 @@
+import { Flex, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import type { GasPrices } from 'types/api/stats';
+
+import GasTrackerPriceSnippet from './GasTrackerPriceSnippet';
+
+interface Props {
+  prices: GasPrices;
+  isLoading: boolean;
+}
+
+const GasTrackerPrices = ({ prices, isLoading }: Props) => {
+  const borderColor = useColorModeValue('gray.200', 'whiteAlpha.300');
+
+  return (
+    <Flex
+      as="ul"
+      flexDir={{ base: 'column', lg: 'row' }}
+      borderColor={ borderColor }
+      borderWidth="2px"
+      borderRadius="xl"
+      overflow="hidden"
+    >
+      { prices.fast && <GasTrackerPriceSnippet type="fast" data={ prices.fast } isLoading={ isLoading }/> }
+      { prices.average && <GasTrackerPriceSnippet type="average" data={ prices.average } isLoading={ isLoading }/> }
+      { prices.slow && <GasTrackerPriceSnippet type="slow" data={ prices.slow } isLoading={ isLoading }/> }
+    </Flex>
+  );
+};
+
+export default React.memo(GasTrackerPrices);
diff --git a/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_dark-color-mode_with-gwei-as-primary-unit-dark-mode-1.png b/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_dark-color-mode_with-gwei-as-primary-unit-dark-mode-1.png
new file mode 100644
index 0000000000..8d24038437
Binary files /dev/null and b/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_dark-color-mode_with-gwei-as-primary-unit-dark-mode-1.png differ
diff --git a/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_dark-color-mode_with-usd-as-primary-unit-dark-mode-1.png b/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_dark-color-mode_with-usd-as-primary-unit-dark-mode-1.png
new file mode 100644
index 0000000000..c21deb2047
Binary files /dev/null and b/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_dark-color-mode_with-usd-as-primary-unit-dark-mode-1.png differ
diff --git a/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_default_loading-state-1.png b/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_default_loading-state-1.png
new file mode 100644
index 0000000000..af5d0293cd
Binary files /dev/null and b/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_default_loading-state-1.png differ
diff --git a/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_default_with-gwei-as-primary-unit-dark-mode-1.png b/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_default_with-gwei-as-primary-unit-dark-mode-1.png
new file mode 100644
index 0000000000..fb88bb5cc5
Binary files /dev/null and b/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_default_with-gwei-as-primary-unit-dark-mode-1.png differ
diff --git a/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_default_with-small-values-1.png b/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_default_with-small-values-1.png
new file mode 100644
index 0000000000..b733a18327
Binary files /dev/null and b/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_default_with-small-values-1.png differ
diff --git a/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_default_with-usd-as-primary-unit-dark-mode-1.png b/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_default_with-usd-as-primary-unit-dark-mode-1.png
new file mode 100644
index 0000000000..ac9baa0826
Binary files /dev/null and b/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_default_with-usd-as-primary-unit-dark-mode-1.png differ
diff --git a/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_default_with-zero-values-1.png b/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_default_with-zero-values-1.png
new file mode 100644
index 0000000000..30df70b6b2
Binary files /dev/null and b/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_default_with-zero-values-1.png differ
diff --git a/ui/home/HeroBanner.pw.tsx b/ui/home/HeroBanner.pw.tsx
new file mode 100644
index 0000000000..a637ab382e
--- /dev/null
+++ b/ui/home/HeroBanner.pw.tsx
@@ -0,0 +1,47 @@
+import type { BrowserContext } from '@playwright/test';
+import React from 'react';
+
+import * as rewardsBalanceMock from 'mocks/rewards/balance';
+import * as dailyRewardMock from 'mocks/rewards/dailyReward';
+import * as profileMock from 'mocks/user/profile';
+import { contextWithAuth } from 'playwright/fixtures/auth';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { contextWithRewards } from 'playwright/fixtures/rewards';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
+
+import HeroBanner from './HeroBanner';
+
+const authTest = test.extend<{ context: BrowserContext }>({
+  context: contextWithAuth,
+}).extend<{ context: BrowserContext }>({
+  context: contextWithRewards,
+});
+
+authTest('customization +@dark-mode', async({ render, page, mockEnvs, mockApiResponse }) => {
+  const IMAGE_URL = 'https://localhost:3000/my-image.png';
+
+  await mockEnvs([
+    ...ENVS_MAP.rewardsService,
+    // eslint-disable-next-line max-len
+    [ 'NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG', `{"background":["lightpink","no-repeat center/cover url(${ IMAGE_URL })"],"text_color":["deepskyblue","white"],"border":["3px solid green","3px dashed yellow"],"button":{"_default":{"background":["deeppink"],"text_color":["white"]},"_selected":{"background":["lime"]}}}` ],
+  ]);
+
+  await page.route(IMAGE_URL, (route) => {
+    return route.fulfill({
+      status: 200,
+      path: './playwright/mocks/image_long.jpg',
+    });
+  });
+
+  await mockApiResponse('user_info', profileMock.withEmailAndWallet);
+  await mockApiResponse('rewards_user_balances', rewardsBalanceMock.base);
+  await mockApiResponse('rewards_user_daily_check', dailyRewardMock.base);
+
+  const component = await render(<HeroBanner/>);
+
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
+});
diff --git a/ui/home/HeroBanner.tsx b/ui/home/HeroBanner.tsx
new file mode 100644
index 0000000000..396987c9d5
--- /dev/null
+++ b/ui/home/HeroBanner.tsx
@@ -0,0 +1,87 @@
+import { Box, Flex, Heading, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import RewardsButton from 'ui/rewards/RewardsButton';
+import AdBanner from 'ui/shared/ad/AdBanner';
+import SearchBar from 'ui/snippets/searchBar/SearchBar';
+import UserProfileDesktop from 'ui/snippets/user/profile/UserProfileDesktop';
+import UserWalletDesktop from 'ui/snippets/user/wallet/UserWalletDesktop';
+
+const BACKGROUND_DEFAULT = 'radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%), var(--chakra-colors-blue-400)';
+const TEXT_COLOR_DEFAULT = 'white';
+const BORDER_DEFAULT = 'none';
+
+const HeroBanner = () => {
+  const background = useColorModeValue(
+    // light mode
+    config.UI.homepage.heroBanner?.background?.[0] ||
+    config.UI.homepage.plate.background ||
+    BACKGROUND_DEFAULT,
+    // dark mode
+    config.UI.homepage.heroBanner?.background?.[1] ||
+    config.UI.homepage.heroBanner?.background?.[0] ||
+    config.UI.homepage.plate.background ||
+    BACKGROUND_DEFAULT,
+  );
+
+  const textColor = useColorModeValue(
+    // light mode
+    config.UI.homepage.heroBanner?.text_color?.[0] ||
+    config.UI.homepage.plate.textColor ||
+    TEXT_COLOR_DEFAULT,
+    // dark mode
+    config.UI.homepage.heroBanner?.text_color?.[1] ||
+    config.UI.homepage.heroBanner?.text_color?.[0] ||
+    config.UI.homepage.plate.textColor ||
+    TEXT_COLOR_DEFAULT,
+  );
+
+  const border = useColorModeValue(
+    config.UI.homepage.heroBanner?.border?.[0] || BORDER_DEFAULT,
+    config.UI.homepage.heroBanner?.border?.[1] || config.UI.homepage.heroBanner?.border?.[0] || BORDER_DEFAULT,
+  );
+
+  return (
+    <Flex
+      w="100%"
+      background={ background }
+      border={ border }
+      borderRadius="md"
+      p={{ base: 4, lg: 8 }}
+      columnGap={ 8 }
+      alignItems="center"
+    >
+      <Box flexGrow={ 1 }>
+        <Flex mb={{ base: 2, lg: 3 }} justifyContent="space-between" alignItems="center" columnGap={ 2 }>
+          <Heading
+            as="h1"
+            fontSize={{ base: '18px', lg: '30px' }}
+            lineHeight={{ base: '24px', lg: '36px' }}
+            fontWeight={{ base: 500, lg: 700 }}
+            color={ textColor }
+          >
+            {
+              config.meta.seo.enhancedDataEnabled ?
+                `${ config.chain.name } blockchain explorer` :
+                `${ config.chain.name } explorer`
+            }
+          </Heading>
+          { config.UI.navigation.layout === 'vertical' && (
+            <Box display={{ base: 'none', lg: 'flex' }} gap={ 2 }>
+              { config.features.rewards.isEnabled && <RewardsButton variant="hero"/> }
+              {
+                (config.features.account.isEnabled && <UserProfileDesktop buttonVariant="hero"/>) ||
+                (config.features.blockchainInteraction.isEnabled && <UserWalletDesktop buttonVariant="hero"/>)
+              }
+            </Box>
+          ) }
+        </Flex>
+        <SearchBar isHomepage/>
+      </Box>
+      <AdBanner platform="mobile" w="fit-content" flexShrink={ 0 } borderRadius="md" overflow="hidden" display={{ base: 'none', lg: 'block ' }}/>
+    </Flex>
+  );
+};
+
+export default React.memo(HeroBanner);
diff --git a/ui/home/LatestBlocks.pw.tsx b/ui/home/LatestBlocks.pw.tsx
index 8450ba1aa0..0852902c50 100644
--- a/ui/home/LatestBlocks.pw.tsx
+++ b/ui/home/LatestBlocks.pw.tsx
@@ -1,145 +1,49 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as blockMock from 'mocks/blocks/block';
 import * as statsMock from 'mocks/stats/index';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
 import * as socketServer from 'playwright/fixtures/socketServer';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { test, expect } from 'playwright/lib';
 
 import LatestBlocks from './LatestBlocks';
 
-const STATS_API_URL = buildApiUrl('homepage_stats');
-const BLOCKS_API_URL = buildApiUrl('homepage_blocks');
-
-export const test = base.extend<socketServer.SocketServerFixture>({
-  createSocket: socketServer.createSocket,
-});
-
-test('default view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(STATS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
-  await page.route(BLOCKS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      blockMock.base,
-      blockMock.base2,
-    ]),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LatestBlocks/>
-    </TestApp>,
-  );
-
+test('default view +@mobile +@dark-mode', async({ render, mockApiResponse }) => {
+  await mockApiResponse('stats', statsMock.base);
+  await mockApiResponse('homepage_blocks', [ blockMock.base, blockMock.base2 ]);
+  const component = await render(<LatestBlocks/>);
   await expect(component).toHaveScreenshot();
 });
 
-const testL2 = test.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
-testL2('L2 view', async({ mount, page }) => {
-  await page.route(STATS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
-  await page.route(BLOCKS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      blockMock.base,
-      blockMock.base2,
-    ]),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LatestBlocks/>
-    </TestApp>,
-  );
-
+test('L2 view', async({ render, mockEnvs, mockApiResponse }) => {
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  await mockApiResponse('stats', statsMock.base);
+  await mockApiResponse('homepage_blocks', [ blockMock.base, blockMock.base2 ]);
+  const component = await render(<LatestBlocks/>);
   await expect(component).toHaveScreenshot();
 });
 
-const testNoReward = test.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.viewsEnvs.block.hiddenFields) as any,
-});
-
-testNoReward('no reward view', async({ mount, page }) => {
-  await page.route(STATS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
-  await page.route(BLOCKS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      blockMock.base,
-      blockMock.base2,
-    ]),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LatestBlocks/>
-    </TestApp>,
-  );
-
+test('no reward view', async({ render, mockEnvs, mockApiResponse }) => {
+  await mockEnvs(ENVS_MAP.blockHiddenFields);
+  await mockApiResponse('stats', statsMock.base);
+  await mockApiResponse('homepage_blocks', [ blockMock.base, blockMock.base2 ]);
+  const component = await render(<LatestBlocks/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('with long block height', async({ mount, page }) => {
-  await page.route(STATS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
-  await page.route(BLOCKS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      {
-        ...blockMock.base,
-        height: 123456789012345,
-      },
-    ]),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LatestBlocks/>
-    </TestApp>,
-  );
-
+test('with long block height', async({ render, mockApiResponse }) => {
+  await mockApiResponse('stats', statsMock.base);
+  await mockApiResponse('homepage_blocks', [ { ...blockMock.base, height: 123456789012345 } ]);
+  const component = await render(<LatestBlocks/>);
   await expect(component).toHaveScreenshot();
 });
 
 test.describe('socket', () => {
   test.describe.configure({ mode: 'serial' });
-
-  test('new item', async({ mount, page, createSocket }) => {
-    await page.route(STATS_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(statsMock.base),
-    }));
-    await page.route(BLOCKS_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify([
-        blockMock.base,
-        blockMock.base2,
-      ]),
-    }));
-
-    const component = await mount(
-      <TestApp withSocket>
-        <LatestBlocks/>
-      </TestApp>,
-    );
-
+  test('new item', async({ render, mockApiResponse, createSocket }) => {
+    await mockApiResponse('stats', statsMock.base);
+    await mockApiResponse('homepage_blocks', [ blockMock.base, blockMock.base2 ]);
+    const component = await render(<LatestBlocks/>, undefined, { withSocket: true });
     const socket = await createSocket();
     const channel = await socketServer.joinChannel(socket, 'blocks:new_block');
     socketServer.sendMessage(socket, channel, 'new_block', {
@@ -150,7 +54,6 @@ test.describe('socket', () => {
         timestamp: '2022-11-11T11:59:58Z',
       },
     });
-
     await expect(component).toHaveScreenshot();
   });
 });
diff --git a/ui/home/LatestBlocks.tsx b/ui/home/LatestBlocks.tsx
index cd8f0358d5..25b7d6ccc4 100644
--- a/ui/home/LatestBlocks.tsx
+++ b/ui/home/LatestBlocks.tsx
@@ -1,4 +1,4 @@
-import { Box, Heading, Flex, Text, VStack, Skeleton } from '@chakra-ui/react';
+import { chakra, Box, Heading, Flex, Text, VStack, Skeleton } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { AnimatePresence } from 'framer-motion';
 import React from 'react';
@@ -16,7 +16,7 @@ import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import { BLOCK } from 'stubs/block';
 import { HOMEPAGE_STATS } from 'stubs/stats';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 
 import LatestBlocksItem from './LatestBlocksItem';
 
@@ -24,7 +24,7 @@ const LatestBlocks = () => {
   const isMobile = useIsMobile();
   // const blocksMaxCount = isMobile ? 2 : 3;
   let blocksMaxCount: number;
-  if (config.features.optimisticRollup.isEnabled || config.UI.views.block.hiddenFields?.total_reward) {
+  if (config.features.rollup.isEnabled || config.UI.views.block.hiddenFields?.total_reward) {
     blocksMaxCount = isMobile ? 4 : 5;
   } else {
     blocksMaxCount = isMobile ? 2 : 3;
@@ -36,12 +36,7 @@ const LatestBlocks = () => {
   });
 
   const queryClient = useQueryClient();
-  const statsQueryResult = useApiQuery('homepage_stats', {
-    fetchParams: {
-      headers: {
-        'updated-gas-oracle': 'true',
-      },
-    },
+  const statsQueryResult = useApiQuery('stats', {
     queryOptions: {
       refetchOnMount: false,
       placeholderData: HOMEPAGE_STATS,
@@ -74,7 +69,7 @@ const LatestBlocks = () => {
   let content;
 
   if (isError) {
-    content = <Text>No data. Please reload page.</Text>;
+    content = <Text>No data. Please reload the page.</Text>;
   }
 
   if (data) {
@@ -82,17 +77,7 @@ const LatestBlocks = () => {
 
     content = (
       <>
-        { statsQueryResult.data?.network_utilization_percentage !== undefined && (
-          <Skeleton isLoaded={ !statsQueryResult.isPlaceholderData } mb={{ base: 6, lg: 3 }} display="inline-block">
-            <Text as="span" fontSize="sm">
-              Network utilization:{ nbsp }
-            </Text>
-            <Text as="span" fontSize="sm" color="blue.400" fontWeight={ 700 }>
-              { statsQueryResult.data?.network_utilization_percentage.toFixed(2) }%
-            </Text>
-          </Skeleton>
-        ) }
-        <VStack spacing={ 3 } mb={ 4 } overflow="hidden" alignItems="stretch">
+        <VStack spacing={ 2 } mb={ 3 } overflow="hidden" alignItems="stretch">
           <AnimatePresence initial={ false } >
             { dataToShow.map(((block, index) => (
               <LatestBlocksItem
@@ -112,8 +97,26 @@ const LatestBlocks = () => {
 
   return (
     <Box width={{ base: '100%', lg: '280px' }} flexShrink={ 0 }>
-      <Heading as="h4" size="sm" mb={ 4 }>Latest blocks</Heading>
-      { content }
+      <Heading as="h4" size="sm">Latest blocks</Heading>
+      { statsQueryResult.data?.network_utilization_percentage !== undefined && (
+        <Skeleton isLoaded={ !statsQueryResult.isPlaceholderData } mt={ 1 } display="inline-block">
+          <Text as="span" fontSize="sm">
+            Network utilization:{ nbsp }
+          </Text>
+          <Text as="span" fontSize="sm" color="blue.400" fontWeight={ 700 }>
+            { statsQueryResult.data?.network_utilization_percentage.toFixed(2) }%
+          </Text>
+        </Skeleton>
+      ) }
+      { statsQueryResult.data?.celo && (
+        <Box whiteSpace="pre-wrap" fontSize="sm">
+          <span>Current epoch: </span>
+          <chakra.span fontWeight={ 700 }>#{ statsQueryResult.data.celo.epoch_number }</chakra.span>
+        </Box>
+      ) }
+      <Box mt={ 3 }>
+        { content }
+      </Box>
     </Box>
   );
 };
diff --git a/ui/home/LatestBlocksItem.tsx b/ui/home/LatestBlocksItem.tsx
index 1f8ee76a3d..dee0c889f4 100644
--- a/ui/home/LatestBlocksItem.tsx
+++ b/ui/home/LatestBlocksItem.tsx
@@ -3,6 +3,7 @@ import {
   Flex,
   Grid,
   Skeleton,
+  Tooltip,
 } from '@chakra-ui/react';
 import { motion } from 'framer-motion';
 import React from 'react';
@@ -12,14 +13,15 @@ import type { Block } from 'types/api/block';
 import config from 'configs/app';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
-import BlockTimestamp from 'ui/blocks/BlockTimestamp';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import IconSvg from 'ui/shared/IconSvg';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 type Props = {
   block: Block;
   isLoading?: boolean;
-}
+};
 
 const LatestBlocksItem = ({ block, isLoading }: Props) => {
   const totalReward = getBlockTotalReward(block);
@@ -34,7 +36,7 @@ const LatestBlocksItem = ({ block, isLoading }: Props) => {
       borderRadius="md"
       border="1px solid"
       borderColor="divider"
-      p={ 6 }
+      p={ 3 }
     >
       <Flex alignItems="center" overflow="hidden" w="100%" mb={ 3 }>
         <BlockEntity
@@ -46,10 +48,18 @@ const LatestBlocksItem = ({ block, isLoading }: Props) => {
           fontWeight={ 500 }
           mr="auto"
         />
-        <BlockTimestamp
-          ts={ block.timestamp }
-          isEnabled={ !isLoading }
+        { block.celo?.is_epoch_block && (
+          <Tooltip label={ `Finalized epoch #${ block.celo.epoch_number }` }>
+            <IconSvg name="checkered_flag" boxSize={ 5 } p="1px" ml={ 2 } isLoading={ isLoading } flexShrink={ 0 }/>
+          </Tooltip>
+        ) }
+        <TimeAgoWithTooltip
+          timestamp={ block.timestamp }
+          enableIncrement={ !isLoading }
           isLoading={ isLoading }
+          color="text_secondary"
+          fontWeight={ 400 }
+          display="inline-block"
           fontSize="sm"
           flexShrink={ 0 }
           ml={ 2 }
@@ -57,16 +67,16 @@ const LatestBlocksItem = ({ block, isLoading }: Props) => {
       </Flex>
       <Grid gridGap={ 2 } templateColumns="auto minmax(0, 1fr)" fontSize="sm">
         <Skeleton isLoaded={ !isLoading }>Txn</Skeleton>
-        <Skeleton isLoaded={ !isLoading } color="text_secondary"><span>{ block.tx_count }</span></Skeleton>
+        <Skeleton isLoaded={ !isLoading } color="text_secondary"><span>{ block.transaction_count }</span></Skeleton>
 
-        { !config.features.optimisticRollup.isEnabled && !config.UI.views.block.hiddenFields?.total_reward && (
+        { !config.features.rollup.isEnabled && !config.UI.views.block.hiddenFields?.total_reward && (
           <>
             <Skeleton isLoaded={ !isLoading }>Reward</Skeleton>
             <Skeleton isLoaded={ !isLoading } color="text_secondary"><span>{ totalReward.dp(10).toFixed() }</span></Skeleton>
           </>
         ) }
 
-        { !config.features.optimisticRollup.isEnabled && !config.UI.views.block.hiddenFields?.miner && (
+        { !config.features.rollup.isEnabled && !config.UI.views.block.hiddenFields?.miner && (
           <>
             <Skeleton isLoaded={ !isLoading } textTransform="capitalize">{ getNetworkValidatorTitle() }</Skeleton>
             <AddressEntity
@@ -74,6 +84,7 @@ const LatestBlocksItem = ({ block, isLoading }: Props) => {
               isLoading={ isLoading }
               noIcon
               noCopy
+              truncation="constant"
             />
           </>
         ) }
diff --git a/ui/home/LatestDeposits.pw.tsx b/ui/home/LatestDeposits.pw.tsx
deleted file mode 100644
index 44886e6496..0000000000
--- a/ui/home/LatestDeposits.pw.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
-import React from 'react';
-
-import * as depositMock from 'mocks/l2deposits/deposits';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
-
-import LatestDeposits from './LatestDeposits';
-
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
-test('default view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(buildApiUrl('homepage_deposits'), (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(depositMock.data.items),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LatestDeposits/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
diff --git a/ui/home/LatestDeposits.tsx b/ui/home/LatestDeposits.tsx
deleted file mode 100644
index dff2c945b8..0000000000
--- a/ui/home/LatestDeposits.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Box, Flex, Text } from '@chakra-ui/react';
-import React from 'react';
-
-import type { SocketMessage } from 'lib/socket/types';
-
-import { route } from 'nextjs-routes';
-
-import useApiQuery from 'lib/api/useApiQuery';
-import useGradualIncrement from 'lib/hooks/useGradualIncrement';
-import useIsMobile from 'lib/hooks/useIsMobile';
-import useSocketChannel from 'lib/socket/useSocketChannel';
-import useSocketMessage from 'lib/socket/useSocketMessage';
-import { L2_DEPOSIT_ITEM } from 'stubs/L2';
-import LinkInternal from 'ui/shared/LinkInternal';
-import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
-
-import LatestDepositsItem from './LatestDepositsItem';
-
-const LatestDeposits = () => {
-  const isMobile = useIsMobile();
-  const itemsCount = isMobile ? 2 : 6;
-  const { data, isPlaceholderData, isError } = useApiQuery('homepage_deposits', {
-    queryOptions: {
-      placeholderData: Array(itemsCount).fill(L2_DEPOSIT_ITEM),
-    },
-  });
-
-  const [ num, setNum ] = useGradualIncrement(0);
-  const [ socketAlert, setSocketAlert ] = React.useState('');
-
-  const handleSocketClose = React.useCallback(() => {
-    setSocketAlert('Connection is lost. Please reload page.');
-  }, []);
-
-  const handleSocketError = React.useCallback(() => {
-    setSocketAlert('An error has occurred while fetching new transactions. Please reload page.');
-  }, []);
-
-  const handleNewDepositMessage: SocketMessage.NewDeposits['handler'] = React.useCallback((payload) => {
-    setNum(payload.deposits);
-  }, [ setNum ]);
-
-  const channel = useSocketChannel({
-    topic: 'optimism_deposits:new_deposits',
-    onSocketClose: handleSocketClose,
-    onSocketError: handleSocketError,
-    isDisabled: false,
-  });
-
-  useSocketMessage({
-    channel,
-    event: 'deposits',
-    handler: handleNewDepositMessage,
-  });
-
-  if (isError) {
-    return <Text mt={ 4 }>No data. Please reload page.</Text>;
-  }
-
-  if (data) {
-    const depositsUrl = route({ pathname: '/l2-deposits' });
-    return (
-      <>
-        <SocketNewItemsNotice borderBottomRadius={ 0 } url={ depositsUrl } num={ num } alert={ socketAlert } type="deposit" isLoading={ isPlaceholderData }/>
-        <Box mb={{ base: 3, lg: 4 }}>
-          { data.slice(0, itemsCount).map(((item, index) => (
-            <LatestDepositsItem
-              key={ item.l2_tx_hash + (isPlaceholderData ? index : '') }
-              item={ item }
-              isLoading={ isPlaceholderData }
-            />
-          ))) }
-        </Box>
-        <Flex justifyContent="center">
-          <LinkInternal fontSize="sm" href={ depositsUrl }>View all deposits</LinkInternal>
-        </Flex>
-      </>
-    );
-  }
-
-  return null;
-};
-
-export default LatestDeposits;
diff --git a/ui/home/LatestDepositsItem.tsx b/ui/home/LatestDepositsItem.tsx
deleted file mode 100644
index c6f8fdc7b8..0000000000
--- a/ui/home/LatestDepositsItem.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import {
-  Box,
-  Flex,
-  Grid,
-  Skeleton,
-} from '@chakra-ui/react';
-import React from 'react';
-
-import type { L2DepositsItem } from 'types/api/l2Deposits';
-
-import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
-import useIsMobile from 'lib/hooks/useIsMobile';
-import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
-import TxEntity from 'ui/shared/entities/tx/TxEntity';
-import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-
-const feature = config.features.optimisticRollup;
-
-type Props = {
-  item: L2DepositsItem;
-  isLoading?: boolean;
-}
-
-const LatestTxsItem = ({ item, isLoading }: Props) => {
-  const timeAgo = dayjs(item.l1_block_timestamp).fromNow();
-  const isMobile = useIsMobile();
-
-  if (!feature.isEnabled) {
-    return null;
-  }
-
-  const l1BlockLink = (
-    <BlockEntityL1
-      number={ item.l1_block_number }
-      isLoading={ isLoading }
-      fontSize="sm"
-      lineHeight={ 5 }
-      fontWeight={ 700 }
-    />
-  );
-
-  const l1TxLink = (
-    <TxEntityL1
-      isLoading={ isLoading }
-      hash={ item.l1_tx_hash }
-      fontSize="sm"
-      lineHeight={ 5 }
-    />
-  );
-
-  const l2TxLink = (
-    <TxEntity
-      isLoading={ isLoading }
-      hash={ item.l2_tx_hash }
-      fontSize="sm"
-      lineHeight={ 5 }
-    />
-  );
-
-  const content = (() => {
-    if (isMobile) {
-      return (
-        <>
-          <Flex justifyContent="space-between" alignItems="center" mb={ 1 }>
-            { l1BlockLink }
-            <Skeleton isLoaded={ !isLoading } color="text_secondary">
-              <span>{ timeAgo }</span>
-            </Skeleton>
-          </Flex>
-          <Grid gridTemplateColumns="56px auto">
-            <Skeleton isLoaded={ !isLoading } my="5px" w="fit-content">
-              L1 txn
-            </Skeleton>
-            { l1TxLink }
-            <Skeleton isLoaded={ !isLoading } my="3px" w="fit-content">
-              L2 txn
-            </Skeleton>
-            { l2TxLink }
-          </Grid>
-        </>
-      );
-    }
-
-    return (
-      <Grid width="100%" columnGap={ 4 } rowGap={ 2 } templateColumns="max-content max-content auto" w="100%">
-        { l1BlockLink }
-        <Skeleton isLoaded={ !isLoading } w="fit-content" h="fit-content" my="5px">
-          L1 txn
-        </Skeleton>
-        { l1TxLink }
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" w="fit-content" h="fit-content" my="2px">
-          <span>{ timeAgo }</span>
-        </Skeleton>
-        <Skeleton isLoaded={ !isLoading } w="fit-content" h="fit-content" my="2px">
-          L2 txn
-        </Skeleton>
-        { l2TxLink }
-      </Grid>
-    );
-  })();
-
-  return (
-    <Box
-      width="100%"
-      borderTop="1px solid"
-      borderColor="divider"
-      py={ 4 }
-      px={{ base: 0, lg: 4 }}
-      _last={{ borderBottom: '1px solid', borderColor: 'divider' }}
-      fontSize="sm"
-      lineHeight={ 5 }
-    >
-      { content }
-    </Box>
-  );
-};
-
-export default React.memo(LatestTxsItem);
diff --git a/ui/home/LatestTxs.pw.tsx b/ui/home/LatestTxs.pw.tsx
index 6e16add22f..a3b0d4880d 100644
--- a/ui/home/LatestTxs.pw.tsx
+++ b/ui/home/LatestTxs.pw.tsx
@@ -1,10 +1,8 @@
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as txMock from 'mocks/txs/tx';
 import * as socketServer from 'playwright/fixtures/socketServer';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test as base, expect, devices } from 'playwright/lib';
 
 import LatestTxs from './LatestTxs';
 
@@ -14,44 +12,28 @@ export const test = base.extend<socketServer.SocketServerFixture>({
 
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
-  test('default view', async({ mount, page }) => {
-    await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify([
-        txMock.base,
-        txMock.withContractCreation,
-        txMock.withTokenTransfer,
-        txMock.withWatchListNames,
-      ]),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <LatestTxs/>
-      </TestApp>,
-    );
-
-    await expect(component).toHaveScreenshot();
-  });
-});
-
-test('default view +@dark-mode', async({ mount, page }) => {
-  await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
+  test('default view', async({ render, mockApiResponse }) => {
+    await mockApiResponse('homepage_txs', [
       txMock.base,
       txMock.withContractCreation,
       txMock.withTokenTransfer,
       txMock.withWatchListNames,
-    ]),
-  }));
+    ]);
 
-  const component = await mount(
-    <TestApp>
-      <LatestTxs/>
-    </TestApp>,
-  );
+    const component = await render(<LatestTxs/>);
+    await expect(component).toHaveScreenshot();
+  });
+});
+
+test('default view +@dark-mode', async({ render, mockApiResponse }) => {
+  await mockApiResponse('homepage_txs', [
+    txMock.base,
+    txMock.withContractCreation,
+    txMock.withTokenTransfer,
+    txMock.withWatchListNames,
+  ]);
 
+  const component = await render(<LatestTxs/>);
   await expect(component).toHaveScreenshot();
 });
 
@@ -65,27 +47,17 @@ test.describe('socket', () => {
     },
   };
 
-  test('new item', async({ mount, page, createSocket }) => {
-    await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify([
-        txMock.base,
-        txMock.withContractCreation,
-        txMock.withTokenTransfer,
-      ]),
-    }));
-
-    const component = await mount(
-      <TestApp withSocket>
-        <LatestTxs/>
-      </TestApp>,
-      { hooksConfig },
-    );
+  test('new item', async({ render, mockApiResponse, createSocket }) => {
+    await mockApiResponse('homepage_txs', [
+      txMock.base,
+      txMock.withContractCreation,
+      txMock.withTokenTransfer,
+    ]);
 
+    const component = await render(<LatestTxs/>, { hooksConfig }, { withSocket: true });
     const socket = await createSocket();
     const channel = await socketServer.joinChannel(socket, 'transactions:new_transaction');
     socketServer.sendMessage(socket, channel, 'transaction', { transaction: 1 });
-
     await expect(component).toHaveScreenshot();
   });
 });
diff --git a/ui/home/LatestTxs.tsx b/ui/home/LatestTxs.tsx
index 37b4ea695a..290bdf337e 100644
--- a/ui/home/LatestTxs.tsx
+++ b/ui/home/LatestTxs.tsx
@@ -8,7 +8,7 @@ import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useNewTxsSocket from 'lib/hooks/useNewTxsSocket';
 import { TX } from 'stubs/tx';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 
 import LatestTxsItem from './LatestTxsItem';
@@ -26,7 +26,7 @@ const LatestTransactions = () => {
   const { num, socketAlert } = useNewTxsSocket();
 
   if (isError) {
-    return <Text mt={ 4 }>No data. Please reload page.</Text>;
+    return <Text mt={ 4 }>No data. Please reload the page.</Text>;
   }
 
   if (data) {
@@ -44,7 +44,7 @@ const LatestTransactions = () => {
           ))) }
         </Box>
         <AddressHighlightProvider>
-          <Box mb={ 4 } display={{ base: 'none', lg: 'block' }}>
+          <Box mb={ 3 } display={{ base: 'none', lg: 'block' }}>
             { data.slice(0, txsCount).map(((tx, index) => (
               <LatestTxsItem
                 key={ tx.hash + (isPlaceholderData ? index : '') }
diff --git a/ui/home/LatestTxsItem.tsx b/ui/home/LatestTxsItem.tsx
index 80219ccb68..82b3c0296a 100644
--- a/ui/home/LatestTxsItem.tsx
+++ b/ui/home/LatestTxsItem.tsx
@@ -12,12 +12,12 @@ import type { Transaction } from 'types/api/transaction';
 
 import config from 'configs/app';
 import getValueWithUnit from 'lib/getValueWithUnit';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import { currencyUnits } from 'lib/units';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
-import TxFeeStability from 'ui/shared/tx/TxFeeStability';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TxFee from 'ui/shared/tx/TxFee';
 import TxWatchListTags from 'ui/shared/tx/TxWatchListTags';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 import TxType from 'ui/txs/TxType';
@@ -25,18 +25,17 @@ import TxType from 'ui/txs/TxType';
 type Props = {
   tx: Transaction;
   isLoading?: boolean;
-}
+};
 
 const LatestTxsItem = ({ tx, isLoading }: Props) => {
   const dataTo = tx.to ? tx.to : tx.created_contract;
-  const timeAgo = useTimeAgoIncrement(tx.timestamp || '0', true);
   const columnNum = config.UI.views.tx.hiddenFields?.value && config.UI.views.tx.hiddenFields?.tx_fee ? 2 : 3;
 
   return (
     <Grid
       gridTemplateColumns={{
-        lg: columnNum === 2 ? '3fr minmax(auto, 180px)' : '3fr minmax(auto, 180px) 150px',
-        xl: columnNum === 2 ? '3fr minmax(auto, 250px)' : '3fr minmax(auto, 275px) 150px',
+        lg: columnNum === 2 ? '3fr minmax(auto, 180px)' : '3fr minmax(auto, 180px) 170px',
+        xl: columnNum === 2 ? '3fr minmax(auto, 250px)' : '3fr minmax(auto, 275px) 170px',
       }}
       gridGap={ 8 }
       width="100%"
@@ -51,7 +50,7 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
         <TxAdditionalInfo tx={ tx } isLoading={ isLoading } my="3px"/>
         <Box ml={ 3 } w="calc(100% - 40px)">
           <HStack flexWrap="wrap" my="3px">
-            <TxType types={ tx.tx_types } isLoading={ isLoading }/>
+            <TxType types={ tx.transaction_types } isLoading={ isLoading }/>
             <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/>
             <TxWatchListTags tx={ tx } isLoading={ isLoading }/>
           </HStack>
@@ -65,18 +64,16 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
               hash={ tx.hash }
               fontWeight="700"
             />
-            { tx.timestamp && (
-              <Skeleton
-                isLoaded={ !isLoading }
-                color="text_secondary"
-                fontWeight="400"
-                fontSize="sm"
-                flexShrink={ 0 }
-                ml={ 2 }
-              >
-                <span>{ timeAgo }</span>
-              </Skeleton>
-            ) }
+            <TimeAgoWithTooltip
+              timestamp={ tx.timestamp }
+              enableIncrement
+              isLoading={ isLoading }
+              color="text_secondary"
+              fontWeight="400"
+              fontSize="sm"
+              flexShrink={ 0 }
+              ml={ 2 }
+            />
           </Flex>
         </Box>
       </Flex>
@@ -89,18 +86,14 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
       <Flex flexDir="column">
         { !config.UI.views.tx.hiddenFields?.value && (
           <Skeleton isLoaded={ !isLoading } my="3px">
-            <Text as="span" whiteSpace="pre">{ currencyUnits.ether } </Text>
-            <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() }</Text>
+            <Text as="span" whiteSpace="pre">Value </Text>
+            <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() } { currencyUnits.ether }</Text>
           </Skeleton>
         ) }
         { !config.UI.views.tx.hiddenFields?.tx_fee && (
           <Skeleton isLoaded={ !isLoading } display="flex" whiteSpace="pre" my="3px">
             <Text as="span">Fee </Text>
-            { tx.stability_fee ? (
-              <TxFeeStability data={ tx.stability_fee } accuracy={ 5 } color="text_secondary" hideUsd/>
-            ) : (
-              <Text as="span" variant="secondary">{ tx.fee.value ? getValueWithUnit(tx.fee.value).dp(5).toFormat() : '-' }</Text>
-            ) }
+            <TxFee tx={ tx } accuracy={ 5 } color="text_secondary"/>
           </Skeleton>
         ) }
       </Flex>
diff --git a/ui/home/LatestTxsItemMobile.tsx b/ui/home/LatestTxsItemMobile.tsx
index 06d6c95b37..c5b852a776 100644
--- a/ui/home/LatestTxsItemMobile.tsx
+++ b/ui/home/LatestTxsItemMobile.tsx
@@ -11,12 +11,12 @@ import type { Transaction } from 'types/api/transaction';
 
 import config from 'configs/app';
 import getValueWithUnit from 'lib/getValueWithUnit';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import { currencyUnits } from 'lib/units';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
-import TxFeeStability from 'ui/shared/tx/TxFeeStability';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TxFee from 'ui/shared/tx/TxFee';
 import TxWatchListTags from 'ui/shared/tx/TxWatchListTags';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 import TxType from 'ui/txs/TxType';
@@ -24,11 +24,10 @@ import TxType from 'ui/txs/TxType';
 type Props = {
   tx: Transaction;
   isLoading?: boolean;
-}
+};
 
 const LatestTxsItem = ({ tx, isLoading }: Props) => {
   const dataTo = tx.to ? tx.to : tx.created_contract;
-  const timeAgo = useTimeAgoIncrement(tx.timestamp || '0', true);
 
   return (
     <Box
@@ -41,7 +40,7 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
     >
       <Flex justifyContent="space-between">
         <HStack flexWrap="wrap">
-          <TxType types={ tx.tx_types } isLoading={ isLoading }/>
+          <TxType types={ tx.transaction_types } isLoading={ isLoading }/>
           <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/>
           <TxWatchListTags tx={ tx } isLoading={ isLoading }/>
         </HStack>
@@ -58,13 +57,17 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
           isLoading={ isLoading }
           hash={ tx.hash }
           fontWeight="700"
-          truncation="constant"
+          truncation="constant_long"
+        />
+        <TimeAgoWithTooltip
+          timestamp={ tx.timestamp }
+          enableIncrement
+          isLoading={ isLoading }
+          color="text_secondary"
+          fontWeight="400"
+          fontSize="sm"
+          ml={ 3 }
         />
-        { tx.timestamp && (
-          <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm" ml={ 3 }>
-            <span>{ timeAgo }</span>
-          </Skeleton>
-        ) }
       </Flex>
       <AddressFromTo
         from={ tx.from }
@@ -76,18 +79,14 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
       />
       { !config.UI.views.tx.hiddenFields?.value && (
         <Skeleton isLoaded={ !isLoading } mb={ 2 } fontSize="sm" w="fit-content">
-          <Text as="span">Value { currencyUnits.ether } </Text>
-          <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() }</Text>
+          <Text as="span">Value </Text>
+          <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() } { currencyUnits.ether }</Text>
         </Skeleton>
       ) }
       { !config.UI.views.tx.hiddenFields?.tx_fee && (
         <Skeleton isLoaded={ !isLoading } fontSize="sm" w="fit-content" display="flex" whiteSpace="pre">
-          <Text as="span">Fee { !config.UI.views.tx.hiddenFields?.fee_currency ? `${ currencyUnits.ether } ` : '' }</Text>
-          { tx.stability_fee ? (
-            <TxFeeStability data={ tx.stability_fee } accuracy={ 5 } color="text_secondary" hideUsd/>
-          ) : (
-            <Text as="span" variant="secondary">{ tx.fee.value ? getValueWithUnit(tx.fee.value).dp(5).toFormat() : '-' }</Text>
-          ) }
+          <Text as="span">Fee </Text>
+          <TxFee tx={ tx } accuracy={ 5 } color="text_secondary"/>
         </Skeleton>
       ) }
     </Box>
diff --git a/ui/home/LatestWatchlistTxs.tsx b/ui/home/LatestWatchlistTxs.tsx
index f191b80d96..3bf82839c4 100644
--- a/ui/home/LatestWatchlistTxs.tsx
+++ b/ui/home/LatestWatchlistTxs.tsx
@@ -5,9 +5,9 @@ import { route } from 'nextjs-routes';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
-import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
 import { TX } from 'stubs/tx';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import useRedirectForInvalidAuthToken from 'ui/snippets/auth/useRedirectForInvalidAuthToken';
 
 import LatestTxsItem from './LatestTxsItem';
 import LatestTxsItemMobile from './LatestTxsItemMobile';
@@ -23,7 +23,7 @@ const LatestWatchlistTxs = () => {
   });
 
   if (isError) {
-    return <Text mt={ 4 }>No data. Please reload page.</Text>;
+    return <Text mt={ 4 }>No data. Please reload the page.</Text>;
   }
 
   if (!data?.length) {
diff --git a/ui/home/LatestZkEvmL2Batches.pw.tsx b/ui/home/LatestZkEvmL2Batches.pw.tsx
deleted file mode 100644
index 5a470ac854..0000000000
--- a/ui/home/LatestZkEvmL2Batches.pw.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
-import React from 'react';
-
-import { txnBatchesData } from 'mocks/zkevmL2txnBatches/zkevmL2txnBatches';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
-
-import LatestZkEvmL2Batches from './LatestZkEvmL2Batches';
-
-const BATCHES_API_URL = buildApiUrl('homepage_zkevm_l2_batches');
-
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.zkRollup) as any,
-});
-
-test('default view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(BATCHES_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(txnBatchesData),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LatestZkEvmL2Batches/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
diff --git a/ui/home/LatestZkEvmL2Batches.tsx b/ui/home/LatestZkEvmL2Batches.tsx
deleted file mode 100644
index e6a24214b7..0000000000
--- a/ui/home/LatestZkEvmL2Batches.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { Box, Heading, Flex, Text, VStack } from '@chakra-ui/react';
-import { useQueryClient } from '@tanstack/react-query';
-import { AnimatePresence } from 'framer-motion';
-import React from 'react';
-
-import type { SocketMessage } from 'lib/socket/types';
-import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2TxnBatches';
-
-import { route } from 'nextjs-routes';
-
-import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
-import useIsMobile from 'lib/hooks/useIsMobile';
-import useSocketChannel from 'lib/socket/useSocketChannel';
-import useSocketMessage from 'lib/socket/useSocketMessage';
-import { ZKEVM_L2_TXN_BATCHES_ITEM } from 'stubs/zkEvmL2';
-import LinkInternal from 'ui/shared/LinkInternal';
-
-import LatestZkevmL2BatchItem from './LatestZkevmL2BatchItem';
-
-const LatestZkEvmL2Batches = () => {
-  const isMobile = useIsMobile();
-  const batchesMaxCount = isMobile ? 2 : 5;
-  const queryClient = useQueryClient();
-
-  const { data, isPlaceholderData, isError } = useApiQuery('homepage_zkevm_l2_batches', {
-    queryOptions: {
-      placeholderData: { items: Array(batchesMaxCount).fill(ZKEVM_L2_TXN_BATCHES_ITEM) },
-    },
-  });
-
-  const handleNewBatchMessage: SocketMessage.NewZkEvmL2Batch['handler'] = React.useCallback((payload) => {
-    queryClient.setQueryData(getResourceKey('homepage_zkevm_l2_batches'), (prevData: { items: Array<ZkEvmL2TxnBatchesItem> } | undefined) => {
-      const newItems = prevData?.items ? [ ...prevData.items ] : [];
-
-      if (newItems.some((batch => batch.number === payload.batch.number))) {
-        return { items: newItems };
-      }
-
-      return { items: [ payload.batch, ...newItems ].sort((b1, b2) => b2.number - b1.number).slice(0, batchesMaxCount) };
-    });
-  }, [ queryClient, batchesMaxCount ]);
-
-  const channel = useSocketChannel({
-    topic: 'zkevm_batches:new_zkevm_confirmed_batch',
-    isDisabled: isPlaceholderData || isError,
-  });
-  useSocketMessage({
-    channel,
-    event: 'new_zkevm_confirmed_batch',
-    handler: handleNewBatchMessage,
-  });
-
-  let content;
-
-  if (isError) {
-    content = <Text>No data. Please reload page.</Text>;
-  }
-
-  if (data) {
-    const dataToShow = data.items.slice(0, batchesMaxCount);
-
-    content = (
-      <>
-        <VStack spacing={ 3 } mb={ 4 } overflow="hidden" alignItems="stretch">
-          <AnimatePresence initial={ false } >
-            { dataToShow.map(((batch, index) => (
-              <LatestZkevmL2BatchItem
-                key={ batch.number + (isPlaceholderData ? String(index) : '') }
-                batch={ batch }
-                isLoading={ isPlaceholderData }
-              />
-            ))) }
-          </AnimatePresence>
-        </VStack>
-        <Flex justifyContent="center">
-          <LinkInternal fontSize="sm" href={ route({ pathname: '/zkevm-l2-txn-batches' }) }>View all batches</LinkInternal>
-        </Flex>
-      </>
-    );
-  }
-
-  return (
-    <Box width={{ base: '100%', lg: '280px' }} flexShrink={ 0 }>
-      <Heading as="h4" size="sm" mb={ 4 }>Latest batches</Heading>
-      { content }
-    </Box>
-  );
-};
-
-export default LatestZkEvmL2Batches;
diff --git a/ui/home/LatestZkevmL2BatchItem.tsx b/ui/home/LatestZkevmL2BatchItem.tsx
deleted file mode 100644
index bad789425e..0000000000
--- a/ui/home/LatestZkevmL2BatchItem.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import {
-  Box,
-  Flex,
-  Skeleton,
-} from '@chakra-ui/react';
-import { motion } from 'framer-motion';
-import React from 'react';
-
-import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2TxnBatches';
-
-import { route } from 'nextjs-routes';
-
-import BlockTimestamp from 'ui/blocks/BlockTimestamp';
-import ZkEvmBatchEntityL2 from 'ui/shared/entities/block/ZkEvmBatchEntityL2';
-import LinkInternal from 'ui/shared/LinkInternal';
-import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus';
-
-type Props = {
-  batch: ZkEvmL2TxnBatchesItem;
-  isLoading?: boolean;
-}
-
-const LatestZkevmL2BatchItem = ({ batch, isLoading }: Props) => {
-  return (
-    <Box
-      as={ motion.div }
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ display: 'none' }}
-      transitionDuration="normal"
-      transitionTimingFunction="linear"
-      borderRadius="md"
-      border="1px solid"
-      borderColor="divider"
-      p={ 6 }
-    >
-      <Flex alignItems="center" overflow="hidden" w="100%" mb={ 3 }>
-        <ZkEvmBatchEntityL2
-          isLoading={ isLoading }
-          number={ batch.number }
-          tailLength={ 2 }
-          fontSize="xl"
-          lineHeight={ 7 }
-          fontWeight={ 500 }
-          mr="auto"
-        />
-        <BlockTimestamp
-          ts={ batch.timestamp }
-          isEnabled={ !isLoading }
-          isLoading={ isLoading }
-          fontSize="sm"
-          flexShrink={ 0 }
-          ml={ 2 }
-        />
-      </Flex>
-      <Flex alignItems="center" justifyContent="space-between" w="100%" flexWrap="wrap">
-        <Flex alignItems="center">
-          <Skeleton isLoaded={ !isLoading } mr={ 2 }>Txn</Skeleton>
-          <LinkInternal
-            href={ route({ pathname: '/zkevm-l2-txn-batch/[number]', query: { number: batch.number.toString(), tab: 'txs' } }) }
-            isLoading={ isLoading }
-          >
-            <Skeleton isLoaded={ !isLoading }>
-              { batch.tx_count }
-            </Skeleton>
-          </LinkInternal>
-        </Flex>
-        <ZkEvmL2TxnBatchStatus status={ batch.status } isLoading={ isLoading }/>
-      </Flex>
-    </Box>
-  );
-};
-
-export default LatestZkevmL2BatchItem;
diff --git a/ui/home/Stats.pw.tsx b/ui/home/Stats.pw.tsx
index 06e0b0d88d..9add012cba 100644
--- a/ui/home/Stats.pw.tsx
+++ b/ui/home/Stats.pw.tsx
@@ -1,91 +1,48 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import type { Locator } from '@playwright/test';
 import React from 'react';
 
 import * as statsMock from 'mocks/stats/index';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { test, expect } from 'playwright/lib';
 
 import Stats from './Stats';
 
-const API_URL = buildApiUrl('homepage_stats');
-
 test.describe('all items', () => {
   let component: Locator;
 
-  test.beforeEach(async({ page, mount }) => {
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(statsMock.withBtcLocked),
-    }));
-
-    component = await mount(
-      <TestApp>
-        <Stats/>
-      </TestApp>,
-    );
+  test.beforeEach(async({ render, mockApiResponse, mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_HOMEPAGE_STATS', '["total_blocks","average_block_time","total_txs","wallet_addresses","gas_tracker","btc_locked"]' ],
+    ]);
+    await mockApiResponse('stats', statsMock.withBtcLocked);
+    component = await render(<Stats/>);
   });
 
   test('+@mobile +@dark-mode', async() => {
     await expect(component).toHaveScreenshot();
   });
-
-  test.describe('screen xl', () => {
-    test.use({ viewport: configs.viewport.xl });
-
-    test('', async() => {
-      await expect(component).toHaveScreenshot();
-    });
-  });
 });
 
-test.describe('4 items', () => {
-  const extendedTest = test.extend({
-    context: contextWithEnvs([
-      { name: 'NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME', value: 'false' },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ]) as any,
-  });
-
-  extendedTest('default view +@mobile -@default', async({ mount, page }) => {
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(statsMock.base),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <Stats/>
-      </TestApp>,
-    );
+test('no gas info', async({ render, mockApiResponse }) => {
+  await mockApiResponse('stats', statsMock.withoutGasInfo);
+  const component = await render(<Stats/>);
 
-    await expect(component).toHaveScreenshot();
-  });
+  await expect(component).toHaveScreenshot();
 });
 
-test.describe('3 items', () => {
-  const extendedTest = test.extend({
-    context: contextWithEnvs([
-      { name: 'NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME', value: 'false' },
-      { name: 'NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER', value: 'false' },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ]) as any,
-  });
-
-  extendedTest('default view +@mobile -@default', async({ mount, page }) => {
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(statsMock.base),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <Stats/>
-      </TestApp>,
-    );
+test('4 items default view +@mobile -@default', async({ render, mockApiResponse, mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_HOMEPAGE_STATS', '["total_txs","gas_tracker","wallet_addresses","total_blocks"]' ],
+  ]);
+  await mockApiResponse('stats', statsMock.base);
+  const component = await render(<Stats/>);
+  await expect(component).toHaveScreenshot();
+});
 
-    await expect(component).toHaveScreenshot();
-  });
+test('3 items default view +@mobile -@default', async({ render, mockApiResponse, mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_HOMEPAGE_STATS', '["total_txs","wallet_addresses","total_blocks"]' ],
+  ]);
+  await mockApiResponse('stats', statsMock.base);
+  const component = await render(<Stats/>);
+  await expect(component).toHaveScreenshot();
 });
diff --git a/ui/home/Stats.tsx b/ui/home/Stats.tsx
index 2192f7ce14..ab00e80cf1 100644
--- a/ui/home/Stats.tsx
+++ b/ui/home/Stats.tsx
@@ -2,142 +2,206 @@ import { Grid } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
-import { route } from 'nextjs-routes';
+import type { HomeStatsWidgetId } from 'types/homepage';
 
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import { WEI } from 'lib/consts';
-import { currencyUnits } from 'lib/units';
 import { HOMEPAGE_STATS } from 'stubs/stats';
-import GasInfoTooltipContent from 'ui/shared/GasInfoTooltipContent/GasInfoTooltipContent';
+import GasInfoTooltip from 'ui/shared/gas/GasInfoTooltip';
+import GasPrice from 'ui/shared/gas/GasPrice';
+import IconSvg from 'ui/shared/IconSvg';
+import type { Props as StatsWidgetProps } from 'ui/shared/stats/StatsWidget';
+import StatsWidget from 'ui/shared/stats/StatsWidget';
 
-import StatsItem from './StatsItem';
-
-const hasGasTracker = config.UI.homepage.showGasTracker;
-const hasAvgBlockTime = config.UI.homepage.showAvgBlockTime;
+const rollupFeature = config.features.rollup;
 
 const Stats = () => {
-  const { data, isPlaceholderData, isError, dataUpdatedAt } = useApiQuery('homepage_stats', {
-    fetchParams: {
-      headers: {
-        'updated-gas-oracle': 'true',
-      },
-    },
+  const [ hasGasTracker, setHasGasTracker ] = React.useState(config.features.gasTracker.isEnabled);
+  const { data, isPlaceholderData, isError, dataUpdatedAt } = useApiQuery('stats', {
     queryOptions: {
       refetchOnMount: false,
       placeholderData: HOMEPAGE_STATS,
     },
   });
 
+  React.useEffect(() => {
+    if (!isPlaceholderData && !data?.gas_prices?.average) {
+      setHasGasTracker(false);
+    }
+  // should run only after initial fetch
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ isPlaceholderData ]);
+
   const zkEvmLatestBatchQuery = useApiQuery('homepage_zkevm_latest_batch', {
     queryOptions: {
       placeholderData: 12345,
-      enabled: config.features.zkEvmRollup.isEnabled,
+      enabled: rollupFeature.isEnabled && rollupFeature.type === 'zkEvm' && config.UI.homepage.stats.includes('latest_batch'),
+    },
+  });
+
+  const zkSyncLatestBatchQuery = useApiQuery('homepage_zksync_latest_batch', {
+    queryOptions: {
+      placeholderData: 12345,
+      enabled: rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && config.UI.homepage.stats.includes('latest_batch'),
+    },
+  });
+
+  const arbitrumLatestBatchQuery = useApiQuery('homepage_arbitrum_latest_batch', {
+    queryOptions: {
+      placeholderData: 12345,
+      enabled: rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && config.UI.homepage.stats.includes('latest_batch'),
     },
   });
 
-  if (isError || zkEvmLatestBatchQuery.isError) {
+  const latestBatchQuery = (() => {
+    if (!rollupFeature.isEnabled || !config.UI.homepage.stats.includes('latest_batch')) {
+      return;
+    }
+
+    switch (rollupFeature.type) {
+      case 'zkEvm':
+        return zkEvmLatestBatchQuery;
+      case 'zkSync':
+        return zkSyncLatestBatchQuery;
+      case 'arbitrum':
+        return arbitrumLatestBatchQuery;
+    }
+  })();
+
+  if (isError || latestBatchQuery?.isError) {
     return null;
   }
 
-  let content;
-
-  const lastItemTouchStyle = { gridColumn: { base: 'span 2', lg: 'unset' } };
-
-  let itemsCount = 5;
-  !hasGasTracker && itemsCount--;
-  !hasAvgBlockTime && itemsCount--;
-
-  if (data) {
-    !data.gas_prices && itemsCount--;
-    data.rootstock_locked_btc && itemsCount++;
-    const isOdd = Boolean(itemsCount % 2);
-    const gasLabel = hasGasTracker && data.gas_prices ? <GasInfoTooltipContent data={ data } dataUpdatedAt={ dataUpdatedAt }/> : null;
-
-    const gasPriceText = (() => {
-      // if (data.gas_prices?.average?.fiat_price) {
-      //   return `$${ data.gas_prices.average.fiat_price }`;
-      // }
-
-      if (data.gas_prices?.average?.price) {
-        return String(data.gas_prices.average.price.toLocaleString()) + currencyUnits.gwei ;
-      }
-
-      return 'N/A';
-    })();
-
-    content = (
-      <>
-        { config.features.zkEvmRollup.isEnabled ? (
-          <StatsItem
-            icon="txn_batches"
-            title="Latest batch"
-            value={ (zkEvmLatestBatchQuery.data || 0).toLocaleString() }
-            url={ route({ pathname: '/zkevm-l2-txn-batches' }) }
-            isLoading={ zkEvmLatestBatchQuery.isPlaceholderData }
-          />
-        ) : (
-          <StatsItem
-            icon="block"
-            title="Total blocks"
-            value={ Number(data.total_blocks).toLocaleString() }
-            url={ route({ pathname: '/blocks' }) }
-            isLoading={ isPlaceholderData }
-          />
-        ) }
-        { hasAvgBlockTime && (
-          <StatsItem
-            icon="clock-light"
-            title="Average block time"
-            value={ `${ (data.average_block_time / 1000).toFixed(1) }s` }
-            isLoading={ isPlaceholderData }
-          />
-        ) }
-        <StatsItem
-          icon="transactions"
-          title="Total transactions"
-          value={ Number(data.total_transactions).toLocaleString() }
-          url={ route({ pathname: '/txs' }) }
-          isLoading={ isPlaceholderData }
-        />
-        <StatsItem
-          icon="wallet"
-          title="Wallet addresses"
-          value={ Number(data.total_addresses).toLocaleString() }
-          _last={ isOdd ? lastItemTouchStyle : undefined }
-          isLoading={ isPlaceholderData }
+  const isLoading = isPlaceholderData || latestBatchQuery?.isPlaceholderData;
+
+  interface Item extends StatsWidgetProps {
+    id: HomeStatsWidgetId;
+  }
+
+  const items: Array<Item> = (() => {
+    if (!data) {
+      return [];
+    }
+
+    const gasInfoTooltip = hasGasTracker && data.gas_prices && data.gas_prices.average ? (
+      <GasInfoTooltip data={ data } dataUpdatedAt={ dataUpdatedAt }>
+        <IconSvg
+          isLoading={ isLoading }
+          name="info"
+          boxSize={ 5 }
+          flexShrink={ 0 }
+          cursor="pointer"
+          color="icon_info"
+          _hover={{ color: 'link_hovered' }}
         />
-        { hasGasTracker && data.gas_prices && (
-          <StatsItem
-            icon="gas"
-            title="Gas tracker"
-            value={ gasPriceText }
-            _last={ isOdd ? lastItemTouchStyle : undefined }
-            tooltipLabel={ gasLabel }
-            isLoading={ isPlaceholderData }
-          />
-        ) }
-        { data.rootstock_locked_btc && (
-          <StatsItem
-            icon="coins/bitcoin"
-            title="BTC Locked in 2WP"
-            value={ `${ BigNumber(data.rootstock_locked_btc).div(WEI).dp(0).toFormat() } RBTC` }
-            _last={ isOdd ? lastItemTouchStyle : undefined }
-            isLoading={ isPlaceholderData }
-          />
-        ) }
-      </>
-    );
+      </GasInfoTooltip>
+    ) : null;
+
+    return [
+      latestBatchQuery?.data !== undefined && {
+        id: 'latest_batch' as const,
+        icon: 'txn_batches_slim' as const,
+        label: 'Latest batch',
+        value: latestBatchQuery.data.toLocaleString(),
+        href: { pathname: '/batches' as const },
+        isLoading,
+      },
+      {
+        id: 'total_blocks' as const,
+        icon: 'block_slim' as const,
+        label: 'Total blocks',
+        value: Number(data.total_blocks).toLocaleString(),
+        href: { pathname: '/blocks' as const },
+        isLoading,
+      },
+      {
+        id: 'average_block_time' as const,
+        icon: 'clock-light' as const,
+        label: 'Average block time',
+        value: `${ (data.average_block_time / 1000).toFixed(1) }s`,
+        isLoading,
+      },
+      {
+        id: 'total_txs' as const,
+        icon: 'transactions_slim' as const,
+        label: 'Total transactions',
+        value: Number(data.total_transactions).toLocaleString(),
+        href: { pathname: '/txs' as const },
+        isLoading,
+      },
+      data.last_output_root_size && {
+        id: 'latest_l1_state_batch' as const,
+        icon: 'txn_batches_slim' as const,
+        label: 'Latest L1 state batch',
+        value: data.last_output_root_size,
+        href: { pathname: '/batches' as const },
+        isLoading,
+      },
+      {
+        id: 'wallet_addresses' as const,
+        icon: 'wallet' as const,
+        label: 'Wallet addresses',
+        value: Number(data.total_addresses).toLocaleString(),
+        isLoading,
+      },
+      hasGasTracker && data.gas_prices && {
+        id: 'gas_tracker' as const,
+        icon: 'gas' as const,
+        label: 'Gas tracker',
+        value: data.gas_prices.average ? <GasPrice data={ data.gas_prices.average }/> : 'N/A',
+        hint: gasInfoTooltip,
+        isLoading,
+      },
+      data.rootstock_locked_btc && {
+        id: 'btc_locked' as const,
+        icon: 'coins/bitcoin' as const,
+        label: 'BTC Locked in 2WP',
+        value: `${ BigNumber(data.rootstock_locked_btc).div(WEI).dp(0).toFormat() } RBTC`,
+        isLoading,
+      },
+      data.celo && {
+        id: 'current_epoch' as const,
+        icon: 'hourglass' as const,
+        label: 'Current epoch',
+        value: `#${ data.celo.epoch_number }`,
+        isLoading,
+      },
+    ]
+      .filter(Boolean)
+      .filter(({ id }) => config.UI.homepage.stats.includes(id))
+      .sort((a, b) => {
+        const indexA = config.UI.homepage.stats.indexOf(a.id);
+        const indexB = config.UI.homepage.stats.indexOf(b.id);
+        if (indexA > indexB) {
+          return 1;
+        }
+        if (indexA < indexB) {
+          return -1;
+        }
+        return 0;
+      });
+  })();
+
+  if (items.length === 0) {
+    return null;
   }
 
   return (
     <Grid
-      gridTemplateColumns={{ lg: `repeat(${ itemsCount }, 1fr)`, base: '1fr 1fr' }}
-      gridTemplateRows={{ lg: 'none', base: undefined }}
-      gridGap="10px"
-      marginTop="24px"
+      gridTemplateColumns="1fr 1fr"
+      gridGap={{ base: 1, lg: 2 }}
+      flexBasis="50%"
+      flexGrow={ 1 }
     >
-      { content }
+      { items.map((item, index) => (
+        <StatsWidget
+          key={ item.id }
+          { ...item }
+          isLoading={ isLoading }
+          _last={ items.length % 2 === 1 && index === items.length - 1 ? { gridColumn: 'span 2' } : undefined }/>
+      ),
+      ) }
     </Grid>
 
   );
diff --git a/ui/home/Transactions.tsx b/ui/home/Transactions.tsx
index ad7a2b244a..db24cb4a51 100644
--- a/ui/home/Transactions.tsx
+++ b/ui/home/Transactions.tsx
@@ -2,31 +2,42 @@ import { Heading } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
-import useHasAccount from 'lib/hooks/useHasAccount';
-import LatestDeposits from 'ui/home/LatestDeposits';
+import LatestOptimisticDeposits from 'ui/home/latestDeposits/LatestOptimisticDeposits';
 import LatestTxs from 'ui/home/LatestTxs';
 import LatestWatchlistTxs from 'ui/home/LatestWatchlistTxs';
 import TabsWithScroll from 'ui/shared/Tabs/TabsWithScroll';
+import useAuth from 'ui/snippets/auth/useIsAuth';
+
+import LatestArbitrumDeposits from './latestDeposits/LatestArbitrumDeposits';
+
+const rollupFeature = config.features.rollup;
+
+const TAB_LIST_PROPS = {
+  mb: { base: 3, lg: 3 },
+};
 
 const TransactionsHome = () => {
-  const hasAccount = useHasAccount();
-  if (config.features.optimisticRollup.isEnabled || hasAccount) {
+  const isAuth = useAuth();
+  if ((rollupFeature.isEnabled && (rollupFeature.type === 'optimistic' || rollupFeature.type === 'arbitrum')) || isAuth) {
     const tabs = [
       { id: 'txn', title: 'Latest txn', component: <LatestTxs/> },
-      config.features.optimisticRollup.isEnabled && { id: 'deposits', title: 'Deposits (L1→L2 txn)', component: <LatestDeposits/> },
-      hasAccount && { id: 'watchlist', title: 'Watch list', component: <LatestWatchlistTxs/> },
+      rollupFeature.isEnabled && rollupFeature.type === 'optimistic' &&
+        { id: 'deposits', title: 'Deposits (L1→L2 txn)', component: <LatestOptimisticDeposits/> },
+      rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' &&
+        { id: 'deposits', title: 'Deposits (L1→L2 txn)', component: <LatestArbitrumDeposits/> },
+      isAuth && { id: 'watchlist', title: 'Watch list', component: <LatestWatchlistTxs/> },
     ].filter(Boolean);
     return (
       <>
-        <Heading as="h4" size="sm" mb={ 4 }>Transactions</Heading>
-        <TabsWithScroll tabs={ tabs } lazyBehavior="keepMounted"/>
+        <Heading as="h4" size="sm" mb={ 3 }>Transactions</Heading>
+        <TabsWithScroll tabs={ tabs } lazyBehavior="keepMounted" tabListProps={ TAB_LIST_PROPS }/>
       </>
     );
   }
 
   return (
     <>
-      <Heading as="h4" size="sm" mb={ 4 }>Latest transactions</Heading>
+      <Heading as="h4" size="sm" mb={ 3 }>Latest transactions</Heading>
       <LatestTxs/>
     </>
   );
diff --git a/ui/home/__screenshots__/HeroBanner.pw.tsx_dark-color-mode_customization-dark-mode-1.png b/ui/home/__screenshots__/HeroBanner.pw.tsx_dark-color-mode_customization-dark-mode-1.png
new file mode 100644
index 0000000000..eeec90574b
Binary files /dev/null and b/ui/home/__screenshots__/HeroBanner.pw.tsx_dark-color-mode_customization-dark-mode-1.png differ
diff --git a/ui/home/__screenshots__/HeroBanner.pw.tsx_default_customization-dark-mode-1.png b/ui/home/__screenshots__/HeroBanner.pw.tsx_default_customization-dark-mode-1.png
new file mode 100644
index 0000000000..217ab92bbb
Binary files /dev/null and b/ui/home/__screenshots__/HeroBanner.pw.tsx_default_customization-dark-mode-1.png differ
diff --git a/ui/home/__screenshots__/LatestBlocks.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png b/ui/home/__screenshots__/LatestBlocks.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png
index 07ed6de08b..20e3e98677 100644
Binary files a/ui/home/__screenshots__/LatestBlocks.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png and b/ui/home/__screenshots__/LatestBlocks.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_L2-view-1.png b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_L2-view-1.png
index 97b3579fe1..3148f0ec9b 100644
Binary files a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_L2-view-1.png and b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_L2-view-1.png differ
diff --git a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_default-view-mobile-dark-mode-1.png b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_default-view-mobile-dark-mode-1.png
index 09b203b93e..65fb3d8762 100644
Binary files a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_default-view-mobile-dark-mode-1.png and b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_no-reward-view-1.png b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_no-reward-view-1.png
index 7c716088b6..0fe24b83ee 100644
Binary files a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_no-reward-view-1.png and b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_no-reward-view-1.png differ
diff --git a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_socket-new-item-1.png b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_socket-new-item-1.png
index 5ba27642b3..59ba3dcdfd 100644
Binary files a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_socket-new-item-1.png and b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_socket-new-item-1.png differ
diff --git a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_with-long-block-height-1.png b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_with-long-block-height-1.png
index 6b391bea59..90639faa57 100644
Binary files a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_with-long-block-height-1.png and b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_with-long-block-height-1.png differ
diff --git a/ui/home/__screenshots__/LatestBlocks.pw.tsx_mobile_default-view-mobile-dark-mode-1.png b/ui/home/__screenshots__/LatestBlocks.pw.tsx_mobile_default-view-mobile-dark-mode-1.png
index 06999ed281..c0a9bc8dbe 100644
Binary files a/ui/home/__screenshots__/LatestBlocks.pw.tsx_mobile_default-view-mobile-dark-mode-1.png and b/ui/home/__screenshots__/LatestBlocks.pw.tsx_mobile_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/home/__screenshots__/LatestDeposits.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png b/ui/home/__screenshots__/LatestDeposits.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png
deleted file mode 100644
index bf49709f59..0000000000
Binary files a/ui/home/__screenshots__/LatestDeposits.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/home/__screenshots__/LatestDeposits.pw.tsx_default_default-view-mobile-dark-mode-1.png b/ui/home/__screenshots__/LatestDeposits.pw.tsx_default_default-view-mobile-dark-mode-1.png
deleted file mode 100644
index 91d4b60f31..0000000000
Binary files a/ui/home/__screenshots__/LatestDeposits.pw.tsx_default_default-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/home/__screenshots__/LatestDeposits.pw.tsx_mobile_default-view-mobile-dark-mode-1.png b/ui/home/__screenshots__/LatestDeposits.pw.tsx_mobile_default-view-mobile-dark-mode-1.png
deleted file mode 100644
index 080a71d98c..0000000000
Binary files a/ui/home/__screenshots__/LatestDeposits.pw.tsx_mobile_default-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/home/__screenshots__/LatestTxs.pw.tsx_dark-color-mode_default-view-dark-mode-1.png b/ui/home/__screenshots__/LatestTxs.pw.tsx_dark-color-mode_default-view-dark-mode-1.png
index 34bc045c5e..d1f03023e8 100644
Binary files a/ui/home/__screenshots__/LatestTxs.pw.tsx_dark-color-mode_default-view-dark-mode-1.png and b/ui/home/__screenshots__/LatestTxs.pw.tsx_dark-color-mode_default-view-dark-mode-1.png differ
diff --git a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_default-view-dark-mode-1.png b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_default-view-dark-mode-1.png
index 268424019d..e1704af270 100644
Binary files a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_default-view-dark-mode-1.png and b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_default-view-dark-mode-1.png differ
diff --git a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_mobile-default-view-1.png b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_mobile-default-view-1.png
index eb01f0123c..bf31071943 100644
Binary files a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_mobile-default-view-1.png and b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_mobile-default-view-1.png differ
diff --git a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_socket-new-item-1.png b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_socket-new-item-1.png
index a3e9edc2c1..a1adf26f3d 100644
Binary files a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_socket-new-item-1.png and b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_socket-new-item-1.png differ
diff --git a/ui/home/__screenshots__/LatestZkEvmL2Batches.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png b/ui/home/__screenshots__/LatestZkEvmL2Batches.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png
deleted file mode 100644
index 8fcbc37c81..0000000000
Binary files a/ui/home/__screenshots__/LatestZkEvmL2Batches.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/home/__screenshots__/LatestZkEvmL2Batches.pw.tsx_default_default-view-mobile-dark-mode-1.png b/ui/home/__screenshots__/LatestZkEvmL2Batches.pw.tsx_default_default-view-mobile-dark-mode-1.png
deleted file mode 100644
index 402759dca9..0000000000
Binary files a/ui/home/__screenshots__/LatestZkEvmL2Batches.pw.tsx_default_default-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/home/__screenshots__/LatestZkEvmL2Batches.pw.tsx_mobile_default-view-mobile-dark-mode-1.png b/ui/home/__screenshots__/LatestZkEvmL2Batches.pw.tsx_mobile_default-view-mobile-dark-mode-1.png
deleted file mode 100644
index e342b5ce69..0000000000
Binary files a/ui/home/__screenshots__/LatestZkEvmL2Batches.pw.tsx_mobile_default-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/home/__screenshots__/Stats.pw.tsx_dark-color-mode_all-items-mobile-dark-mode-1.png b/ui/home/__screenshots__/Stats.pw.tsx_dark-color-mode_all-items-mobile-dark-mode-1.png
index 6c9fad8221..464ccaa58e 100644
Binary files a/ui/home/__screenshots__/Stats.pw.tsx_dark-color-mode_all-items-mobile-dark-mode-1.png and b/ui/home/__screenshots__/Stats.pw.tsx_dark-color-mode_all-items-mobile-dark-mode-1.png differ
diff --git a/ui/home/__screenshots__/Stats.pw.tsx_default_all-items-mobile-dark-mode-1.png b/ui/home/__screenshots__/Stats.pw.tsx_default_all-items-mobile-dark-mode-1.png
index 5dae281c5a..10eb185b93 100644
Binary files a/ui/home/__screenshots__/Stats.pw.tsx_default_all-items-mobile-dark-mode-1.png and b/ui/home/__screenshots__/Stats.pw.tsx_default_all-items-mobile-dark-mode-1.png differ
diff --git a/ui/home/__screenshots__/Stats.pw.tsx_default_all-items-screen-xl-1.png b/ui/home/__screenshots__/Stats.pw.tsx_default_all-items-screen-xl-1.png
deleted file mode 100644
index f763f3400a..0000000000
Binary files a/ui/home/__screenshots__/Stats.pw.tsx_default_all-items-screen-xl-1.png and /dev/null differ
diff --git a/ui/home/__screenshots__/Stats.pw.tsx_default_no-gas-info-1.png b/ui/home/__screenshots__/Stats.pw.tsx_default_no-gas-info-1.png
new file mode 100644
index 0000000000..416a5c300f
Binary files /dev/null and b/ui/home/__screenshots__/Stats.pw.tsx_default_no-gas-info-1.png differ
diff --git a/ui/home/__screenshots__/Stats.pw.tsx_mobile_3-items-default-view-mobile---default-1.png b/ui/home/__screenshots__/Stats.pw.tsx_mobile_3-items-default-view-mobile---default-1.png
index f78405a5b7..7e00bc0f16 100644
Binary files a/ui/home/__screenshots__/Stats.pw.tsx_mobile_3-items-default-view-mobile---default-1.png and b/ui/home/__screenshots__/Stats.pw.tsx_mobile_3-items-default-view-mobile---default-1.png differ
diff --git a/ui/home/__screenshots__/Stats.pw.tsx_mobile_4-items-default-view-mobile---default-1.png b/ui/home/__screenshots__/Stats.pw.tsx_mobile_4-items-default-view-mobile---default-1.png
index e9cc47e889..82e4e121e2 100644
Binary files a/ui/home/__screenshots__/Stats.pw.tsx_mobile_4-items-default-view-mobile---default-1.png and b/ui/home/__screenshots__/Stats.pw.tsx_mobile_4-items-default-view-mobile---default-1.png differ
diff --git a/ui/home/__screenshots__/Stats.pw.tsx_mobile_all-items-mobile-dark-mode-1.png b/ui/home/__screenshots__/Stats.pw.tsx_mobile_all-items-mobile-dark-mode-1.png
index 7c8833a558..e05fee1820 100644
Binary files a/ui/home/__screenshots__/Stats.pw.tsx_mobile_all-items-mobile-dark-mode-1.png and b/ui/home/__screenshots__/Stats.pw.tsx_mobile_all-items-mobile-dark-mode-1.png differ
diff --git a/ui/home/indicators/ChainIndicatorChart.tsx b/ui/home/indicators/ChainIndicatorChart.tsx
index a455be896a..f73c410dc9 100644
--- a/ui/home/indicators/ChainIndicatorChart.tsx
+++ b/ui/home/indicators/ChainIndicatorChart.tsx
@@ -14,7 +14,7 @@ interface Props {
   caption?: string;
 }
 
-const CHART_MARGIN = { bottom: 5, left: 10, right: 10, top: 0 };
+const CHART_MARGIN = { bottom: 5, left: 10, right: 10, top: 5 };
 
 const ChainIndicatorChart = ({ data }: Props) => {
   const overlayRef = React.useRef<SVGRectElement>(null);
@@ -23,11 +23,11 @@ const ChainIndicatorChart = ({ data }: Props) => {
   const axesConfig = React.useMemo(() => {
     return {
       x: { ticks: 4 },
-      y: { ticks: 3, nice: true },
+      y: { ticks: 3, nice: true, noLabel: true },
     };
   }, [ ]);
 
-  const { rect, ref, axis, innerWidth, innerHeight } = useTimeChartController({
+  const { rect, ref, axes, innerWidth, innerHeight, chartMargin } = useTimeChartController({
     data,
     margin: CHART_MARGIN,
     axesConfig,
@@ -35,16 +35,16 @@ const ChainIndicatorChart = ({ data }: Props) => {
 
   return (
     <svg width="100%" height="100%" ref={ ref } cursor="pointer">
-      <g transform={ `translate(${ CHART_MARGIN?.left || 0 },${ CHART_MARGIN?.top || 0 })` } opacity={ rect ? 1 : 0 }>
+      <g transform={ `translate(${ chartMargin.left || 0 },${ chartMargin.top || 0 })` } opacity={ rect ? 1 : 0 }>
         <ChartArea
           data={ data[0].items }
-          xScale={ axis.x.scale }
-          yScale={ axis.y.scale }
+          xScale={ axes.x.scale }
+          yScale={ axes.y.scale }
         />
         <ChartLine
           data={ data[0].items }
-          xScale={ axis.x.scale }
-          yScale={ axis.y.scale }
+          xScale={ axes.x.scale }
+          yScale={ axes.y.scale }
           stroke={ lineColor }
           animation="left"
           strokeWidth={ 3 }
@@ -54,8 +54,8 @@ const ChainIndicatorChart = ({ data }: Props) => {
             anchorEl={ overlayRef.current }
             width={ innerWidth }
             height={ innerHeight }
-            xScale={ axis.x.scale }
-            yScale={ axis.y.scale }
+            xScale={ axes.x.scale }
+            yScale={ axes.y.scale }
             data={ data }
           />
         </ChartOverlay>
diff --git a/ui/home/indicators/ChainIndicatorChartContainer.tsx b/ui/home/indicators/ChainIndicatorChartContainer.tsx
index 95f4f34904..a8bc2d2192 100644
--- a/ui/home/indicators/ChainIndicatorChartContainer.tsx
+++ b/ui/home/indicators/ChainIndicatorChartContainer.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@chakra-ui/react';
+import { chakra, Flex, Box } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
@@ -15,17 +15,25 @@ const ChainIndicatorChartContainer = ({ data, isError, isPending }: Props) => {
 
   const content = (() => {
     if (isPending) {
-      return <ContentLoader mt="auto"/>;
+      return <ContentLoader mt="auto" fontSize="xs"/>;
     }
 
     if (isError) {
-      return <DataFetchAlert/>;
+      return <DataFetchAlert fontSize="xs" p={ 3 }/>;
     }
 
-    return <ChainIndicatorChart data={ data }/>;
+    if (data[0].items.length === 0) {
+      return <chakra.span fontSize="xs">no data</chakra.span>;
+    }
+
+    return (
+      <Box mx="-10px" my="-5px" h="calc(100% + 10px)" w="calc(100% + 20px)">
+        <ChainIndicatorChart data={ data }/>
+      </Box>
+    );
   })();
 
-  return <Flex h={{ base: '150px', lg: 'auto' }} minH="150px" alignItems="flex-start" flexGrow={ 1 }>{ content }</Flex>;
+  return <Flex h={{ base: '80px', lg: '110px' }} alignItems="flex-start" flexGrow={ 1 }>{ content }</Flex>;
 };
 
 export default React.memo(ChainIndicatorChartContainer);
diff --git a/ui/home/indicators/ChainIndicatorItem.tsx b/ui/home/indicators/ChainIndicatorItem.tsx
index 51efc16b23..5cfc5b1ebc 100644
--- a/ui/home/indicators/ChainIndicatorItem.tsx
+++ b/ui/home/indicators/ChainIndicatorItem.tsx
@@ -6,74 +6,85 @@ import type { HomeStats } from 'types/api/stats';
 import type { ChainIndicatorId } from 'types/homepage';
 
 import type { ResourceError } from 'lib/api/resources';
-import useIsMobile from 'lib/hooks/useIsMobile';
 
 interface Props {
   id: ChainIndicatorId;
   title: string;
   value: (stats: HomeStats) => string;
+  valueDiff?: (stats?: HomeStats) => number | null | undefined;
   icon: React.ReactNode;
   isSelected: boolean;
   onClick: (id: ChainIndicatorId) => void;
   stats: UseQueryResult<HomeStats, ResourceError<unknown>>;
 }
 
-const ChainIndicatorItem = ({ id, title, value, icon, isSelected, onClick, stats }: Props) => {
-  const isMobile = useIsMobile();
-
-  const activeBgColorDesktop = useColorModeValue('white', 'gray.900');
-  const activeBgColorMobile = useColorModeValue('white', 'black');
-  const activeBgColor = isMobile ? activeBgColorMobile : activeBgColorDesktop;
+const ChainIndicatorItem = ({ id, title, value, valueDiff, icon, isSelected, onClick, stats }: Props) => {
+  const activeColor = useColorModeValue('gray.500', 'gray.400');
+  const activeBgColor = useColorModeValue('white', 'black');
 
   const handleClick = React.useCallback(() => {
     onClick(id);
   }, [ id, onClick ]);
 
   const valueContent = (() => {
-    if (isMobile) {
-      return null;
+    if (!stats.data) {
+      return <Text variant="secondary" fontWeight={ 400 }>no data</Text>;
     }
 
-    if (stats.isPlaceholderData) {
-      return (
-        <Skeleton
-          h={ 3 }
-          w="70px"
-          my={ 1.5 }
-          // ssr: isMobile = undefined, isLoading = true
-          display={{ base: 'none', lg: 'block' }}
-        />
-      );
-    }
+    return (
+      <Skeleton isLoaded={ !stats.isPlaceholderData } variant="secondary" fontWeight={ 600 } minW="30px">
+        { value(stats.data) }
+      </Skeleton>
+    );
+  })();
 
-    if (!stats.data) {
-      return <Text variant="secondary" fontWeight={ 400 }>no data</Text>;
+  const valueDiffContent = (() => {
+    if (!valueDiff) {
+      return null;
     }
+    const diff = valueDiff(stats.data);
+    if (diff === undefined || diff === null) {
+      return null;
+    }
+
+    const diffColor = diff >= 0 ? 'green.500' : 'red.500';
 
-    return <Text variant="secondary" fontWeight={ 600 }>{ value(stats.data) }</Text>;
+    return (
+      <Skeleton isLoaded={ !stats.isPlaceholderData } ml={ 1 } display="flex" alignItems="center" color={ diffColor }>
+        <span>{ diff >= 0 ? '+' : '-' }</span>
+        <Text color={ diffColor } fontWeight={ 600 }>{ Math.abs(diff) }%</Text>
+      </Skeleton>
+    );
   })();
 
   return (
     <Flex
       alignItems="center"
-      columnGap={ 3 }
-      p={ 4 }
+      columnGap={ 2 }
+      flexGrow={{ base: 0, lg: 1 }}
+      px={{ base: '6px', lg: 2 }}
+      py="6px"
       as="li"
-      borderRadius="md"
+      borderRadius="base"
       cursor="pointer"
+      color={ isSelected ? activeColor : 'link' }
+      bgColor={ isSelected ? activeBgColor : undefined }
       onClick={ handleClick }
-      bgColor={ isSelected ? activeBgColor : 'inherit' }
-      boxShadow={ isSelected ? 'lg' : 'none' }
-      zIndex={ isSelected ? 1 : 'initial' }
+      fontSize="xs"
+      fontWeight={ 500 }
       _hover={{
-        activeBgColor,
+        bgColor: activeBgColor,
+        color: isSelected ? activeColor : 'link_hovered',
         zIndex: 1,
       }}
     >
       { icon }
-      <Box>
-        <Text fontFamily="heading" fontWeight={ 500 }>{ title }</Text>
-        { valueContent }
+      <Box display={{ base: 'none', lg: 'block' }}>
+        <span>{ title }</span>
+        <Flex alignItems="center" color="text">
+          { valueContent }
+          { valueDiffContent }
+        </Flex>
       </Box>
     </Flex>
   );
diff --git a/ui/home/indicators/ChainIndicators.pw.tsx b/ui/home/indicators/ChainIndicators.pw.tsx
index 59181fce54..a1454282b6 100644
--- a/ui/home/indicators/ChainIndicators.pw.tsx
+++ b/ui/home/indicators/ChainIndicators.pw.tsx
@@ -1,44 +1,32 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import type { Locator } from '@playwright/test';
 import React from 'react';
 
 import * as dailyTxsMock from 'mocks/stats/daily_txs';
 import * as statsMock from 'mocks/stats/index';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import ChainIndicators from './ChainIndicators';
 
-const STATS_API_URL = buildApiUrl('homepage_stats');
-const TX_CHART_API_URL = buildApiUrl('homepage_chart_txs');
-
-const test = base.extend({
-  context: contextWithEnvs([
-    { name: 'NEXT_PUBLIC_HOMEPAGE_CHARTS', value: '["daily_txs","coin_price","market_cap","tvl"]' },
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
+test.beforeEach(async({ mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_HOMEPAGE_CHARTS', '["daily_txs","coin_price","secondary_coin_price","market_cap","tvl"]' ],
+    [ 'NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL', 'DUCK' ],
+  ]);
 });
 
 test.describe('daily txs chart', () => {
   let component: Locator;
 
-  test.beforeEach(async({ page, mount }) => {
-    await page.route(STATS_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(statsMock.base),
-    }));
-    await page.route(TX_CHART_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(dailyTxsMock.base),
-    }));
-
-    component = await mount(
-      <TestApp>
-        <ChainIndicators/>
-      </TestApp>,
-    );
-    await page.hover('.ChartOverlay', { position: { x: 100, y: 100 } });
+  test.beforeEach(async({ page, mockApiResponse, mockAssetResponse, render }) => {
+    await mockApiResponse('stats', statsMock.withSecondaryCoin);
+    await mockApiResponse('stats_charts_txs', dailyTxsMock.base);
+    await mockAssetResponse(statsMock.withSecondaryCoin.coin_image as string, './playwright/mocks/image_svg.svg');
+    await mockAssetResponse(statsMock.withSecondaryCoin.secondary_coin_image as string, './playwright/mocks/image_s.jpg');
+    component = await render(<ChainIndicators/>);
+    await page.waitForFunction(() => {
+      return document.querySelector('path[data-name="gradient-chart-area"]')?.getAttribute('opacity') === '1';
+    });
+    await page.hover('.ChartOverlay', { position: { x: 50, y: 50 } });
   });
 
   test('+@mobile', async() => {
@@ -53,3 +41,24 @@ test.describe('daily txs chart', () => {
     });
   });
 });
+
+test('partial data', async({ page, mockApiResponse, mockAssetResponse, render }) => {
+  await mockApiResponse('stats', statsMock.base);
+  await mockApiResponse('stats_charts_txs', dailyTxsMock.partialData);
+  await mockAssetResponse(statsMock.base.coin_image as string, './playwright/mocks/image_s.jpg');
+
+  const component = await render(<ChainIndicators/>);
+  await page.waitForFunction(() => {
+    return document.querySelector('path[data-name="gradient-chart-area"]')?.getAttribute('opacity') === '1';
+  });
+  await expect(component).toHaveScreenshot();
+});
+
+test('no data', async({ mockApiResponse, mockAssetResponse, render }) => {
+  await mockApiResponse('stats', statsMock.noChartData);
+  await mockApiResponse('stats_charts_txs', dailyTxsMock.noData);
+  await mockAssetResponse(statsMock.noChartData.coin_image as string, './playwright/mocks/image_s.jpg');
+
+  const component = await render(<ChainIndicators/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/home/indicators/ChainIndicators.tsx b/ui/home/indicators/ChainIndicators.tsx
index 7e340e129e..2a98ccf519 100644
--- a/ui/home/indicators/ChainIndicators.tsx
+++ b/ui/home/indicators/ChainIndicators.tsx
@@ -5,6 +5,7 @@ import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import { HOMEPAGE_STATS } from 'stubs/stats';
 import Hint from 'ui/shared/Hint';
+import IconSvg from 'ui/shared/IconSvg';
 
 import ChainIndicatorChartContainer from './ChainIndicatorChartContainer';
 import ChainIndicatorItem from './ChainIndicatorItem';
@@ -30,22 +31,14 @@ const ChainIndicators = () => {
   const indicator = indicators.find(({ id }) => id === selectedIndicator);
 
   const queryResult = useFetchChartData(indicator);
-  const statsQueryResult = useApiQuery('homepage_stats', {
-    fetchParams: {
-      headers: {
-        'updated-gas-oracle': 'true',
-      },
-    },
+  const statsQueryResult = useApiQuery('stats', {
     queryOptions: {
       refetchOnMount: false,
       placeholderData: HOMEPAGE_STATS,
     },
   });
 
-  const bgColorDesktop = useColorModeValue('white', 'gray.900');
-  const bgColorMobile = useColorModeValue('white', 'black');
-  const listBgColorDesktop = useColorModeValue('gray.50', 'black');
-  const listBgColorMobile = useColorModeValue('gray.50', 'gray.900');
+  const bgColor = useColorModeValue('gray.50', 'whiteAlpha.100');
 
   if (indicators.length === 0) {
     return null;
@@ -53,40 +46,70 @@ const ChainIndicators = () => {
 
   const valueTitle = (() => {
     if (statsQueryResult.isPlaceholderData) {
-      return <Skeleton h="48px" w="215px" mt={ 3 } mb={ 4 }/>;
+      return <Skeleton h="36px" w="215px"/>;
     }
 
     if (!statsQueryResult.data) {
-      return <Text mt={ 3 } mb={ 4 }>There is no data</Text>;
+      return <Text fontSize="xs">There is no data</Text>;
     }
 
     return (
-      <Text fontWeight={ 600 } fontFamily="heading" fontSize="48px" lineHeight="48px" mt={ 3 } mb={ 4 }>
+      <Text fontWeight={ 700 } fontSize="30px" lineHeight="36px">
         { indicator?.value(statsQueryResult.data) }
       </Text>
     );
   })();
 
+  const valueDiff = (() => {
+    if (!statsQueryResult.data || !indicator?.valueDiff) {
+      return null;
+    }
+
+    const diff = indicator.valueDiff(statsQueryResult.data);
+    if (diff === undefined || diff === null) {
+      return null;
+    }
+
+    const diffColor = diff >= 0 ? 'green.500' : 'red.500';
+
+    return (
+      <Skeleton isLoaded={ !statsQueryResult.isPlaceholderData } display="flex" alignItems="center" color={ diffColor } ml={ 2 }>
+        <IconSvg name="arrows/up-head" boxSize={ 5 } mr={ 1 } transform={ diff < 0 ? 'rotate(180deg)' : 'rotate(0)' }/>
+        <Text color={ diffColor } fontWeight={ 600 }>{ diff }%</Text>
+      </Skeleton>
+    );
+  })();
+
   return (
     <Flex
+<<<<<<< HEAD
       p={{ base: 0, lg: 8 }}
       borderRadius={{ base: 'none', lg: 'lg' }}
       borderWidth="1px"
       borderColor="orange.200"
       bgColor={{ base: bgColorMobile, lg: bgColorDesktop }}
       columnGap={ 12 }
+=======
+      px={{ base: 3, lg: 4 }}
+      py={ 3 }
+      borderRadius="base"
+      bgColor={ bgColor }
+      columnGap={{ base: 3, lg: 4 }}
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739
       rowGap={ 0 }
-      flexDir={{ base: 'column', lg: 'row' }}
-      w="100%"
+      flexBasis="50%"
+      flexGrow={ 1 }
       alignItems="stretch"
-      mt={ 8 }
     >
-      <Flex flexGrow={ 1 } flexDir="column" order={{ base: 2, lg: 1 }} p={{ base: 6, lg: 0 }}>
+      <Flex flexGrow={ 1 } flexDir="column">
         <Flex alignItems="center">
-          <Text fontWeight={ 500 } fontFamily="heading" fontSize="lg">{ indicator?.title }</Text>
+          <Text fontWeight={ 500 }>{ indicator?.title }</Text>
           { indicator?.hint && <Hint label={ indicator.hint } ml={ 1 }/> }
         </Flex>
-        { valueTitle }
+        <Flex mb={{ base: 0, lg: 2 }} mt={ 1 } alignItems="end">
+          { valueTitle }
+          { valueDiff }
+        </Flex>
         <ChainIndicatorChartContainer { ...queryResult }/>
       </Flex>
       { indicators.length > 1 && (
@@ -94,11 +117,9 @@ const ChainIndicators = () => {
           flexShrink={ 0 }
           flexDir="column"
           as="ul"
-          p={ 3 }
           borderRadius="lg"
-          bgColor={{ base: listBgColorMobile, lg: listBgColorDesktop }}
-          rowGap={ 3 }
-          order={{ base: 1, lg: 2 }}
+          rowGap="6px"
+          m={{ base: 'auto 0', lg: 0 }}
         >
           { indicators.map((indicator) => (
             <ChainIndicatorItem
diff --git a/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_default_daily-txs-chart-dark-mode-mobile-1.png b/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_default_daily-txs-chart-dark-mode-mobile-1.png
index b354bd5198..18681ae3ab 100644
Binary files a/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_default_daily-txs-chart-dark-mode-mobile-1.png and b/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_default_daily-txs-chart-dark-mode-mobile-1.png differ
diff --git a/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_default_daily-txs-chart-mobile-1.png b/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_default_daily-txs-chart-mobile-1.png
index c2b269b416..8f5be09bda 100644
Binary files a/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_default_daily-txs-chart-mobile-1.png and b/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_default_daily-txs-chart-mobile-1.png differ
diff --git a/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_default_no-data-1.png b/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_default_no-data-1.png
new file mode 100644
index 0000000000..c05ea45530
Binary files /dev/null and b/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_default_no-data-1.png differ
diff --git a/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_default_partial-data-1.png b/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_default_partial-data-1.png
new file mode 100644
index 0000000000..35e0cb1e6a
Binary files /dev/null and b/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_default_partial-data-1.png differ
diff --git a/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_mobile_daily-txs-chart-dark-mode-mobile-1.png b/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_mobile_daily-txs-chart-dark-mode-mobile-1.png
index 9a1b5d6269..0f562c9981 100644
Binary files a/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_mobile_daily-txs-chart-dark-mode-mobile-1.png and b/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_mobile_daily-txs-chart-dark-mode-mobile-1.png differ
diff --git a/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_mobile_daily-txs-chart-mobile-1.png b/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_mobile_daily-txs-chart-mobile-1.png
index 8c76d6185c..057fdd0ee9 100644
Binary files a/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_mobile_daily-txs-chart-mobile-1.png and b/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_mobile_daily-txs-chart-mobile-1.png differ
diff --git a/ui/home/indicators/types.ts b/ui/home/indicators/types.ts
index 1a4b4d1fc7..5fcfcc86f2 100644
--- a/ui/home/indicators/types.ts
+++ b/ui/home/indicators/types.ts
@@ -1,15 +1,18 @@
+import type React from 'react';
+
 import type { HomeStats } from 'types/api/stats';
 import type { ChainIndicatorId } from 'types/homepage';
 import type { TimeChartData } from 'ui/shared/chart/types';
 
 import type { ResourcePayload } from 'lib/api/resources';
 
-export type ChartsResources = 'homepage_chart_txs' | 'homepage_chart_market';
+export type ChartsResources = 'stats_charts_txs' | 'stats_charts_market' | 'stats_charts_secondary_coin_price';
 
 export interface TChainIndicator<R extends ChartsResources> {
   id: ChainIndicatorId;
   title: string;
   value: (stats: HomeStats) => string;
+  valueDiff?: (stats?: HomeStats) => number | null | undefined;
   icon: React.ReactNode;
   hint?: string;
   api: {
diff --git a/ui/home/indicators/useFetchChartData.tsx b/ui/home/indicators/useFetchChartData.tsx
index 1e7def5c96..ffebc2b685 100644
--- a/ui/home/indicators/useFetchChartData.tsx
+++ b/ui/home/indicators/useFetchChartData.tsx
@@ -8,7 +8,7 @@ import type { ResourcePayload } from 'lib/api/resources';
 import useApiQuery from 'lib/api/useApiQuery';
 
 export default function useFetchChartData<R extends ChartsResources>(indicator: TChainIndicator<R> | undefined): UseQueryResult<TimeChartData> {
-  const queryResult = useApiQuery(indicator?.api.resourceName || 'homepage_chart_txs', {
+  const queryResult = useApiQuery(indicator?.api.resourceName || 'stats_charts_txs', {
     queryOptions: { enabled: Boolean(indicator) },
   });
 
diff --git a/ui/home/indicators/utils/indicators.tsx b/ui/home/indicators/utils/indicators.tsx
index 35a05e1b50..b1fbcd5cc9 100644
--- a/ui/home/indicators/utils/indicators.tsx
+++ b/ui/home/indicators/utils/indicators.tsx
@@ -1,104 +1,148 @@
 import React from 'react';
 
 import type { TChainIndicator } from '../types';
+import type { TimeChartItem, TimeChartItemRaw } from 'ui/shared/chart/types';
 
 import config from 'configs/app';
 import { sortByDateDesc } from 'ui/shared/chart/utils/sorts';
-import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import IconSvg from 'ui/shared/IconSvg';
-const txIconData = {
-  name: '',
-  icon_url: config.UI.homepage.txIcoin || '',
-  symbol: '',
-  address: '',
-  type: 'ERC-20' as const,
+import NativeTokenIcon from 'ui/shared/NativeTokenIcon';
+
+const nonNullTailReducer = (result: Array<TimeChartItemRaw>, item: TimeChartItemRaw) => {
+  if (item.value === null && result.length === 0) {
+    return result;
+  }
+  result.unshift(item);
+  return result;
 };
-const dailyTxsIndicator: TChainIndicator<'homepage_chart_txs'> = {
+
+const mapNullToZero: (item: TimeChartItemRaw) => TimeChartItem = (item) => ({ ...item, value: Number(item.value) });
+
+const dailyTxsIndicator: TChainIndicator<'stats_charts_txs'> = {
   id: 'daily_txs',
   title: 'Daily transactions',
-  value: (stats) => Number(stats.transactions_today).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
-  // icon: <IconSvg name="transactions" boxSize={ 6 } bgColor="#56ACD1" borderRadius="base" color="white"/>,
-  icon: <TokenEntity.Icon token={ txIconData } boxSize={ 6 } marginRight={ 0 }/>,
+  value: (stats) => stats.transactions_today === null ?
+    'N/A' :
+    Number(stats.transactions_today).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
+  icon: <IconSvg name="transactions" boxSize={ 6 } bgColor="#56ACD1" borderRadius="base" color="white"/>,
   hint: `Number of transactions yesterday (0:00 - 23:59 UTC). The chart displays daily transactions for the past 30 days.`,
   api: {
-    resourceName: 'homepage_chart_txs',
+    resourceName: 'stats_charts_txs',
     dataFn: (response) => ([ {
       items: response.chart_data
-        .map((item) => ({ date: new Date(item.date), value: item.tx_count }))
-        .sort(sortByDateDesc),
+        .map((item) => ({ date: new Date(item.date), value: item.transaction_count }))
+        .sort(sortByDateDesc)
+        .reduceRight(nonNullTailReducer, [] as Array<TimeChartItemRaw>)
+        .map(mapNullToZero),
       name: 'Tx/day',
       valueFormatter: (x: number) => x.toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
     } ]),
   },
 };
 
-const nativeTokenData = {
-  name: config.chain.currency.name || '',
-  icon_url: config.chain.currency.image || '',
-  // icon_url: '',
-  symbol: '',
-  address: '',
-  type: 'ERC-20' as const,
+const coinPriceIndicator: TChainIndicator<'stats_charts_market'> = {
+  id: 'coin_price',
+  title: `${ config.chain.currency.symbol } price`,
+  value: (stats) => stats.coin_price === null ?
+    '$N/A' :
+    '$' + Number(stats.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
+  valueDiff: (stats) => stats?.coin_price !== null ? stats?.coin_price_change_percentage : null,
+  icon: <NativeTokenIcon boxSize={ 6 }/>,
+  hint: `${ config.chain.currency.symbol } token daily price in USD.`,
+  api: {
+    resourceName: 'stats_charts_market',
+    dataFn: (response) => ([ {
+      items: response.chart_data
+        .map((item) => ({ date: new Date(item.date), value: item.closing_price }))
+        .sort(sortByDateDesc)
+        .reduceRight(nonNullTailReducer, [] as Array<TimeChartItemRaw>)
+        .map(mapNullToZero),
+      name: `${ config.chain.currency.symbol } price`,
+      valueFormatter: (x: number) => '$' + x.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
+    } ]),
+  },
 };
 
-const coinPriceIndicator: TChainIndicator<'homepage_chart_market'> = {
-  id: 'coin_price',
-  title: `${ config.chain.governanceToken.symbol || config.chain.currency.symbol } price`,
-  value: (stats) => '$' + Number(stats.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
-  icon: <TokenEntity.Icon token={ nativeTokenData } boxSize={ 6 } marginRight={ 0 }/>,
-  hint: `${ config.chain.governanceToken.symbol || config.chain.currency.symbol } token daily price in USD.`,
+const secondaryCoinPriceIndicator: TChainIndicator<'stats_charts_secondary_coin_price'> = {
+  id: 'secondary_coin_price',
+  title: `${ config.chain.secondaryCoin.symbol } price`,
+  value: (stats) => !stats.secondary_coin_price || stats.secondary_coin_price === null ?
+    '$N/A' :
+    '$' + Number(stats.secondary_coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
+  valueDiff: () => null,
+  icon: <NativeTokenIcon boxSize={ 6 } type="secondary"/>,
+  hint: `${ config.chain.secondaryCoin.symbol } token daily price in USD.`,
   api: {
-    resourceName: 'homepage_chart_market',
+    resourceName: 'stats_charts_secondary_coin_price',
     dataFn: (response) => ([ {
       items: response.chart_data
-        .map((item) => ({ date: new Date(item.date), value: Number(item.closing_price) }))
-        .sort(sortByDateDesc),
-      name: `${ config.chain.governanceToken.symbol || config.chain.currency.symbol } price`,
+        .map((item) => ({ date: new Date(item.date), value: item.closing_price }))
+        .sort(sortByDateDesc)
+        .reduceRight(nonNullTailReducer, [] as Array<TimeChartItemRaw>)
+        .map(mapNullToZero),
+      name: `${ config.chain.secondaryCoin.symbol } price`,
       valueFormatter: (x: number) => '$' + x.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
     } ]),
   },
 };
 
-const marketPriceIndicator: TChainIndicator<'homepage_chart_market'> = {
+const marketPriceIndicator: TChainIndicator<'stats_charts_market'> = {
   id: 'market_cap',
   title: 'Market cap',
-  value: (stats) => '$' + Number(stats.market_cap).toLocaleString(undefined, { maximumFractionDigits: 0, notation: 'compact' }),
+  value: (stats) => stats.market_cap === null ?
+    '$N/A' :
+    '$' + Number(stats.market_cap).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
   icon: <IconSvg name="globe" boxSize={ 6 } bgColor="#6A5DCC" borderRadius="base" color="white"/>,
   // eslint-disable-next-line max-len
   hint: 'The total market value of a cryptocurrency\'s circulating supply. It is analogous to the free-float capitalization in the stock market. Market Cap = Current Price x Circulating Supply.',
   api: {
-    resourceName: 'homepage_chart_market',
+    resourceName: 'stats_charts_market',
     dataFn: (response) => ([ {
       items: response.chart_data
         .map((item) => (
           {
             date: new Date(item.date),
-            value: item.market_cap ? Number(item.market_cap) : Number(item.closing_price) * Number(response.available_supply),
+            value: (() => {
+              if (item.market_cap !== undefined) {
+                return item.market_cap;
+              }
+
+              if (item.closing_price === null) {
+                return null;
+              }
+
+              return Number(item.closing_price) * Number(response.available_supply);
+            })(),
           }))
-        .sort(sortByDateDesc),
+        .sort(sortByDateDesc)
+        .reduceRight(nonNullTailReducer, [] as Array<TimeChartItemRaw>)
+        .map(mapNullToZero),
       name: 'Market cap',
-      valueFormatter: (x: number) => '$' + x.toLocaleString(undefined, { maximumFractionDigits: 0 }),
+      valueFormatter: (x: number) => '$' + x.toLocaleString(undefined, { maximumFractionDigits: 2 }),
     } ]),
   },
 };
 
-const tvlIndicator: TChainIndicator<'homepage_chart_market'> = {
+const tvlIndicator: TChainIndicator<'stats_charts_market'> = {
   id: 'tvl',
   title: 'Total value locked',
-  value: (stats) => '$' + Number(stats.tvl).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
+  value: (stats) => stats.tvl === null ?
+    '$N/A' :
+    '$' + Number(stats.tvl).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
   icon: <IconSvg name="lock" boxSize={ 6 } bgColor="#517FDB" borderRadius="base" color="white"/>,
-  // eslint-disable-next-line max-len
   hint: 'Total value of digital assets locked or staked in a chain',
   api: {
-    resourceName: 'homepage_chart_market',
+    resourceName: 'stats_charts_market',
     dataFn: (response) => ([ {
       items: response.chart_data
         .map((item) => (
           {
             date: new Date(item.date),
-            value: item.tvl ? Number(item.tvl) : 0,
+            value: item.tvl !== undefined ? item.tvl : 0,
           }))
-        .sort(sortByDateDesc),
+        .sort(sortByDateDesc)
+        .reduceRight(nonNullTailReducer, [] as Array<TimeChartItemRaw>)
+        .map(mapNullToZero),
       name: 'TVL',
       valueFormatter: (x: number) => '$' + x.toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
     } ]),
@@ -108,6 +152,7 @@ const tvlIndicator: TChainIndicator<'homepage_chart_market'> = {
 const INDICATORS = [
   dailyTxsIndicator,
   coinPriceIndicator,
+  secondaryCoinPriceIndicator,
   marketPriceIndicator,
   tvlIndicator,
 ];
diff --git a/ui/home/latestBatches/LatestArbitrumL2Batches.pw.tsx b/ui/home/latestBatches/LatestArbitrumL2Batches.pw.tsx
new file mode 100644
index 0000000000..373541d1b7
--- /dev/null
+++ b/ui/home/latestBatches/LatestArbitrumL2Batches.pw.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { finalized, unfinalized } from 'mocks/arbitrum/txnBatches';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import LatestArbitrumL2Batches from './LatestArbitrumL2Batches';
+
+test('default view +@mobile +@dark-mode', async({ render, mockEnvs, mockApiResponse }) => {
+  await mockEnvs(ENVS_MAP.arbitrumRollup);
+  await mockApiResponse('homepage_arbitrum_l2_batches', { items: [ finalized, unfinalized ] });
+
+  const component = await render(<LatestArbitrumL2Batches/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/home/latestBatches/LatestArbitrumL2Batches.tsx b/ui/home/latestBatches/LatestArbitrumL2Batches.tsx
new file mode 100644
index 0000000000..46e8495acf
--- /dev/null
+++ b/ui/home/latestBatches/LatestArbitrumL2Batches.tsx
@@ -0,0 +1,92 @@
+import { Box, Heading, Flex, Text, VStack } from '@chakra-ui/react';
+import { useQueryClient } from '@tanstack/react-query';
+import { AnimatePresence } from 'framer-motion';
+import React from 'react';
+
+import type { SocketMessage } from 'lib/socket/types';
+import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2';
+
+import { route } from 'nextjs-routes';
+
+import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
+import { ARBITRUM_L2_TXN_BATCHES_ITEM } from 'stubs/arbitrumL2';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+import LatestBatchItem from './LatestBatchItem';
+
+const LatestArbitrumL2Batches = () => {
+  const isMobile = useIsMobile();
+  const batchesMaxCount = isMobile ? 2 : 5;
+  const queryClient = useQueryClient();
+
+  const { data, isPlaceholderData, isError } = useApiQuery('homepage_arbitrum_l2_batches', {
+    queryOptions: {
+      placeholderData: { items: Array(batchesMaxCount).fill(ARBITRUM_L2_TXN_BATCHES_ITEM) },
+    },
+  });
+
+  const handleNewBatchMessage: SocketMessage.NewArbitrumL2Batch['handler'] = React.useCallback((payload) => {
+    queryClient.setQueryData(getResourceKey('homepage_arbitrum_l2_batches'), (prevData: { items: Array<ArbitrumL2TxnBatchesItem> } | undefined) => {
+      const newItems = prevData?.items ? [ ...prevData.items ] : [];
+
+      if (newItems.some((batch => batch.number === payload.batch.number))) {
+        return { items: newItems };
+      }
+
+      return { items: [ payload.batch, ...newItems ].sort((b1, b2) => b2.number - b1.number).slice(0, batchesMaxCount) };
+    });
+  }, [ queryClient, batchesMaxCount ]);
+
+  const channel = useSocketChannel({
+    topic: 'arbitrum:new_batch',
+    isDisabled: isPlaceholderData || isError,
+  });
+  useSocketMessage({
+    channel,
+    event: 'new_arbitrum_batch',
+    handler: handleNewBatchMessage,
+  });
+
+  let content;
+
+  if (isError) {
+    content = <Text>No data. Please reload the page.</Text>;
+  }
+
+  if (data) {
+    const dataToShow = data.items.slice(0, batchesMaxCount);
+
+    content = (
+      <>
+        <VStack spacing={ 2 } mb={ 3 } overflow="hidden" alignItems="stretch">
+          <AnimatePresence initial={ false } >
+            { dataToShow.map(((batch, index) => (
+              <LatestBatchItem
+                key={ batch.number + (isPlaceholderData ? String(index) : '') }
+                number={ batch.number }
+                timestamp={ batch.commitment_transaction.timestamp }
+                txCount={ batch.transactions_count }
+                isLoading={ isPlaceholderData }
+              />
+            ))) }
+          </AnimatePresence>
+        </VStack>
+        <Flex justifyContent="center">
+          <LinkInternal fontSize="sm" href={ route({ pathname: '/batches' }) }>View all batches</LinkInternal>
+        </Flex>
+      </>
+    );
+  }
+
+  return (
+    <Box width={{ base: '100%', lg: '280px' }} flexShrink={ 0 }>
+      <Heading as="h4" size="sm" mb={ 3 }>Latest batches</Heading>
+      { content }
+    </Box>
+  );
+};
+
+export default LatestArbitrumL2Batches;
diff --git a/ui/home/latestBatches/LatestBatchItem.tsx b/ui/home/latestBatches/LatestBatchItem.tsx
new file mode 100644
index 0000000000..4d56701235
--- /dev/null
+++ b/ui/home/latestBatches/LatestBatchItem.tsx
@@ -0,0 +1,77 @@
+import {
+  Box,
+  Flex,
+  Skeleton,
+} from '@chakra-ui/react';
+import { motion } from 'framer-motion';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+type Props = {
+  number: number;
+  timestamp: string | null;
+  txCount: number;
+  status?: React.ReactNode;
+  isLoading: boolean;
+};
+
+const LatestBatchItem = ({ number, timestamp, txCount, status, isLoading }: Props) => {
+  return (
+    <Box
+      as={ motion.div }
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ display: 'none' }}
+      transitionDuration="normal"
+      transitionTimingFunction="linear"
+      borderRadius="md"
+      border="1px solid"
+      borderColor="divider"
+      p={ 3 }
+    >
+      <Flex alignItems="center" overflow="hidden" w="100%" mb={ 3 }>
+        <BatchEntityL2
+          isLoading={ isLoading }
+          number={ number }
+          tailLength={ 2 }
+          fontSize="xl"
+          lineHeight={ 7 }
+          fontWeight={ 500 }
+          mr="auto"
+        />
+        <TimeAgoWithTooltip
+          timestamp={ timestamp }
+          enableIncrement={ !isLoading }
+          isLoading={ isLoading }
+          color="text_secondary"
+          fontWeight={ 400 }
+          display="inline-block"
+          fontSize="sm"
+          flexShrink={ 0 }
+          ml={ 2 }
+        />
+      </Flex>
+      <Flex alignItems="center" justifyContent="space-between" w="100%" flexWrap="wrap">
+        <Flex alignItems="center">
+          <Skeleton isLoaded={ !isLoading } mr={ 2 }>Txn</Skeleton>
+          <LinkInternal
+            href={ route({ pathname: '/batches/[number]', query: { number: number.toString(), tab: 'txs' } }) }
+            isLoading={ isLoading }
+          >
+            <Skeleton isLoaded={ !isLoading }>
+              { txCount }
+            </Skeleton>
+          </LinkInternal>
+        </Flex>
+        { status }
+      </Flex>
+    </Box>
+  );
+};
+
+export default LatestBatchItem;
diff --git a/ui/home/latestBatches/LatestZkEvmL2Batches.pw.tsx b/ui/home/latestBatches/LatestZkEvmL2Batches.pw.tsx
new file mode 100644
index 0000000000..47ed65a1a4
--- /dev/null
+++ b/ui/home/latestBatches/LatestZkEvmL2Batches.pw.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { txnBatchesData } from 'mocks/zkEvm/txnBatches';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import LatestZkEvmL2Batches from './LatestZkEvmL2Batches';
+
+test('default view +@mobile +@dark-mode', async({ render, mockEnvs, mockApiResponse }) => {
+  await mockEnvs(ENVS_MAP.zkEvmRollup);
+  await mockApiResponse('homepage_zkevm_l2_batches', txnBatchesData);
+
+  const component = await render(<LatestZkEvmL2Batches/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/home/latestBatches/LatestZkEvmL2Batches.tsx b/ui/home/latestBatches/LatestZkEvmL2Batches.tsx
new file mode 100644
index 0000000000..7297194dd2
--- /dev/null
+++ b/ui/home/latestBatches/LatestZkEvmL2Batches.tsx
@@ -0,0 +1,97 @@
+import { Box, Heading, Flex, Text, VStack } from '@chakra-ui/react';
+import { useQueryClient } from '@tanstack/react-query';
+import { AnimatePresence } from 'framer-motion';
+import React from 'react';
+
+import type { SocketMessage } from 'lib/socket/types';
+import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2';
+
+import { route } from 'nextjs-routes';
+
+import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
+import { ZKEVM_L2_TXN_BATCHES_ITEM } from 'stubs/zkEvmL2';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus';
+
+import LatestBatchItem from './LatestBatchItem';
+
+const LatestZkEvmL2Batches = () => {
+  const isMobile = useIsMobile();
+  const batchesMaxCount = isMobile ? 2 : 5;
+  const queryClient = useQueryClient();
+
+  const { data, isPlaceholderData, isError } = useApiQuery('homepage_zkevm_l2_batches', {
+    queryOptions: {
+      placeholderData: { items: Array(batchesMaxCount).fill(ZKEVM_L2_TXN_BATCHES_ITEM) },
+    },
+  });
+
+  const handleNewBatchMessage: SocketMessage.NewZkEvmL2Batch['handler'] = React.useCallback((payload) => {
+    queryClient.setQueryData(getResourceKey('homepage_zkevm_l2_batches'), (prevData: { items: Array<ZkEvmL2TxnBatchesItem> } | undefined) => {
+      const newItems = prevData?.items ? [ ...prevData.items ] : [];
+
+      if (newItems.some((batch => batch.number === payload.batch.number))) {
+        return { items: newItems };
+      }
+
+      return { items: [ payload.batch, ...newItems ].sort((b1, b2) => b2.number - b1.number).slice(0, batchesMaxCount) };
+    });
+  }, [ queryClient, batchesMaxCount ]);
+
+  const channel = useSocketChannel({
+    topic: 'zkevm_batches:new_zkevm_confirmed_batch',
+    isDisabled: isPlaceholderData || isError,
+  });
+  useSocketMessage({
+    channel,
+    event: 'new_zkevm_confirmed_batch',
+    handler: handleNewBatchMessage,
+  });
+
+  let content;
+
+  if (isError) {
+    content = <Text>No data. Please reload the page.</Text>;
+  }
+
+  if (data) {
+    const dataToShow = data.items.slice(0, batchesMaxCount);
+
+    content = (
+      <>
+        <VStack spacing={ 2 } mb={ 3 } overflow="hidden" alignItems="stretch">
+          <AnimatePresence initial={ false } >
+            { dataToShow.map(((batch, index) => {
+              const status = <ZkEvmL2TxnBatchStatus status={ batch.status } isLoading={ isPlaceholderData }/>;
+              return (
+                <LatestBatchItem
+                  key={ batch.number + (isPlaceholderData ? String(index) : '') }
+                  number={ batch.number }
+                  txCount={ batch.transaction_count }
+                  timestamp={ batch.timestamp }
+                  status={ status }
+                  isLoading={ isPlaceholderData }
+                />
+              );
+            })) }
+          </AnimatePresence>
+        </VStack>
+        <Flex justifyContent="center">
+          <LinkInternal fontSize="sm" href={ route({ pathname: '/batches' }) }>View all batches</LinkInternal>
+        </Flex>
+      </>
+    );
+  }
+
+  return (
+    <Box width={{ base: '100%', lg: '280px' }} flexShrink={ 0 }>
+      <Heading as="h4" size="sm" mb={ 3 }>Latest batches</Heading>
+      { content }
+    </Box>
+  );
+};
+
+export default LatestZkEvmL2Batches;
diff --git a/ui/home/latestBatches/__screenshots__/LatestArbitrumL2Batches.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png b/ui/home/latestBatches/__screenshots__/LatestArbitrumL2Batches.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..6c14b1a75e
Binary files /dev/null and b/ui/home/latestBatches/__screenshots__/LatestArbitrumL2Batches.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/home/latestBatches/__screenshots__/LatestArbitrumL2Batches.pw.tsx_default_default-view-mobile-dark-mode-1.png b/ui/home/latestBatches/__screenshots__/LatestArbitrumL2Batches.pw.tsx_default_default-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..e9356f9f9b
Binary files /dev/null and b/ui/home/latestBatches/__screenshots__/LatestArbitrumL2Batches.pw.tsx_default_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/home/latestBatches/__screenshots__/LatestArbitrumL2Batches.pw.tsx_mobile_default-view-mobile-dark-mode-1.png b/ui/home/latestBatches/__screenshots__/LatestArbitrumL2Batches.pw.tsx_mobile_default-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..10933d4d87
Binary files /dev/null and b/ui/home/latestBatches/__screenshots__/LatestArbitrumL2Batches.pw.tsx_mobile_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/home/latestBatches/__screenshots__/LatestZkEvmL2Batches.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png b/ui/home/latestBatches/__screenshots__/LatestZkEvmL2Batches.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..50a9ff5683
Binary files /dev/null and b/ui/home/latestBatches/__screenshots__/LatestZkEvmL2Batches.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/home/latestBatches/__screenshots__/LatestZkEvmL2Batches.pw.tsx_default_default-view-mobile-dark-mode-1.png b/ui/home/latestBatches/__screenshots__/LatestZkEvmL2Batches.pw.tsx_default_default-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..29f95e9727
Binary files /dev/null and b/ui/home/latestBatches/__screenshots__/LatestZkEvmL2Batches.pw.tsx_default_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/home/latestBatches/__screenshots__/LatestZkEvmL2Batches.pw.tsx_mobile_default-view-mobile-dark-mode-1.png b/ui/home/latestBatches/__screenshots__/LatestZkEvmL2Batches.pw.tsx_mobile_default-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..f56ca0ab53
Binary files /dev/null and b/ui/home/latestBatches/__screenshots__/LatestZkEvmL2Batches.pw.tsx_mobile_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/home/latestDeposits/LatestArbitrumDeposits.pw.tsx b/ui/home/latestDeposits/LatestArbitrumDeposits.pw.tsx
new file mode 100644
index 0000000000..496a215603
--- /dev/null
+++ b/ui/home/latestDeposits/LatestArbitrumDeposits.pw.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import * as depositMock from 'mocks/arbitrum/deposits';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import LatestArbitrumDeposits from './LatestArbitrumDeposits';
+
+test('default view +@mobile', async({ render, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.arbitrumRollup);
+  mockApiResponse('homepage_arbitrum_deposits', depositMock.latestDepositsResponse);
+  const component = await render(<LatestArbitrumDeposits/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/home/latestDeposits/LatestArbitrumDeposits.tsx b/ui/home/latestDeposits/LatestArbitrumDeposits.tsx
new file mode 100644
index 0000000000..1c22dbf79a
--- /dev/null
+++ b/ui/home/latestDeposits/LatestArbitrumDeposits.tsx
@@ -0,0 +1,77 @@
+import { Text } from '@chakra-ui/react';
+import React from 'react';
+
+import type { SocketMessage } from 'lib/socket/types';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import useGradualIncrement from 'lib/hooks/useGradualIncrement';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
+import { ARBITRUM_MESSAGES_ITEM } from 'stubs/arbitrumL2';
+
+import LatestDeposits from './LatestDeposits';
+
+const LatestArbitrumDeposits = () => {
+  const isMobile = useIsMobile();
+  const itemsCount = isMobile ? 2 : 6;
+  const { data, isPlaceholderData, isError } = useApiQuery('homepage_arbitrum_deposits', {
+    queryOptions: {
+      placeholderData: { items: Array(itemsCount).fill(ARBITRUM_MESSAGES_ITEM) },
+    },
+  });
+
+  const [ num, setNum ] = useGradualIncrement(0);
+  const [ socketAlert, setSocketAlert ] = React.useState('');
+
+  const handleSocketClose = React.useCallback(() => {
+    setSocketAlert('Connection is lost. Please reload the page.');
+  }, []);
+
+  const handleSocketError = React.useCallback(() => {
+    setSocketAlert('An error has occurred while fetching new transactions. Please reload the page.');
+  }, []);
+
+  const handleNewDepositMessage: SocketMessage.NewArbitrumDeposits['handler'] = React.useCallback((payload) => {
+    setNum(payload.new_messages_to_rollup_amount);
+  }, [ setNum ]);
+
+  const channel = useSocketChannel({
+    topic: 'arbitrum:new_messages_to_rollup_amount',
+    onSocketClose: handleSocketClose,
+    onSocketError: handleSocketError,
+    isDisabled: false,
+  });
+
+  useSocketMessage({
+    channel,
+    event: 'new_messages_to_rollup_amount',
+    handler: handleNewDepositMessage,
+  });
+
+  if (isError) {
+    return <Text mt={ 4 }>No data. Please reload the page.</Text>;
+  }
+
+  if (data) {
+    return (
+      <LatestDeposits
+        items={ data.items.slice(0, itemsCount).map((item) => (
+          {
+            l1BlockNumber: item.origination_transaction_block_number,
+            l1TxHash: item.origination_transaction_hash,
+            l2TxHash: item.completion_transaction_hash,
+            timestamp: item.origination_timestamp,
+          }
+        )) }
+        isLoading={ isPlaceholderData }
+        socketItemsNum={ num }
+        socketAlert={ socketAlert }
+      />
+    );
+  }
+
+  return null;
+};
+
+export default LatestArbitrumDeposits;
diff --git a/ui/home/latestDeposits/LatestDeposits.tsx b/ui/home/latestDeposits/LatestDeposits.tsx
new file mode 100644
index 0000000000..d0eba75354
--- /dev/null
+++ b/ui/home/latestDeposits/LatestDeposits.tsx
@@ -0,0 +1,180 @@
+import {
+  Box,
+  Flex,
+  Grid,
+  GridItem,
+  Skeleton,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+type DepositsItem = {
+  l1BlockNumber: number | null;
+  l1TxHash: string | null;
+  l2TxHash: string;
+  timestamp: string | null;
+};
+
+type Props = {
+  isLoading?: boolean;
+  items: Array<DepositsItem>;
+  socketItemsNum: number;
+  socketAlert?: string;
+};
+
+type ItemProps = {
+  item: DepositsItem;
+  isLoading?: boolean;
+};
+
+const LatestDepositsItem = ({ item, isLoading }: ItemProps) => {
+  const isMobile = useIsMobile();
+
+  const l1BlockLink = item.l1BlockNumber ? (
+    <BlockEntityL1
+      number={ item.l1BlockNumber }
+      isLoading={ isLoading }
+      fontSize="sm"
+      lineHeight={ 5 }
+      fontWeight={ 700 }
+    />
+  ) : (
+    <BlockEntityL1
+      number="TBD"
+      isLoading={ isLoading }
+      fontSize="sm"
+      lineHeight={ 5 }
+      fontWeight={ 700 }
+      noLink
+    />
+  );
+
+  const l1TxLink = item.l1TxHash ? (
+    <TxEntityL1
+      isLoading={ isLoading }
+      hash={ item.l1TxHash }
+      fontSize="sm"
+      lineHeight={ 5 }
+      truncation={ isMobile ? 'constant_long' : 'dynamic' }
+    />
+  ) : (
+    <TxEntityL1
+      isLoading={ isLoading }
+      hash="To be determined"
+      fontSize="sm"
+      lineHeight={ 5 }
+      truncation="none"
+      noLink
+    />
+  );
+
+  const l2TxLink = (
+    <TxEntity
+      isLoading={ isLoading }
+      hash={ item.l2TxHash }
+      fontSize="sm"
+      lineHeight={ 5 }
+      truncation={ isMobile ? 'constant_long' : 'dynamic' }
+    />
+  );
+
+  const content = (() => {
+    if (isMobile) {
+      return (
+        <>
+          <Flex justifyContent="space-between" alignItems="center" mb={ 1 }>
+            { l1BlockLink }
+            { item.timestamp ? (
+              <TimeAgoWithTooltip
+                timestamp={ item.timestamp }
+                isLoading={ isLoading }
+                color="text_secondary"
+              />
+            ) : <GridItem/> }
+          </Flex>
+          <Grid gridTemplateColumns="56px auto">
+            <Skeleton isLoaded={ !isLoading } my="5px" w="fit-content">
+              L1 txn
+            </Skeleton>
+            { l1TxLink }
+            <Skeleton isLoaded={ !isLoading } my="3px" w="fit-content">
+              L2 txn
+            </Skeleton>
+            { l2TxLink }
+          </Grid>
+        </>
+      );
+    }
+
+    return (
+      <Grid width="100%" columnGap={ 4 } rowGap={ 2 } templateColumns="max-content max-content auto" w="100%">
+        { l1BlockLink }
+        <Skeleton isLoaded={ !isLoading } w="fit-content" h="fit-content" my="5px">
+          L1 txn
+        </Skeleton>
+        { l1TxLink }
+        { item.timestamp ? (
+          <TimeAgoWithTooltip
+            timestamp={ item.timestamp }
+            isLoading={ isLoading }
+            color="text_secondary"
+            w="fit-content"
+            h="fit-content"
+            my="2px"
+          />
+        ) : <GridItem/> }
+        <Skeleton isLoaded={ !isLoading } w="fit-content" h="fit-content" my="2px">
+          L2 txn
+        </Skeleton>
+        { l2TxLink }
+      </Grid>
+    );
+  })();
+
+  return (
+    <Box
+      width="100%"
+      borderTop="1px solid"
+      borderColor="divider"
+      py={ 4 }
+      px={{ base: 0, lg: 4 }}
+      _last={{ borderBottom: '1px solid', borderColor: 'divider' }}
+      fontSize="sm"
+      lineHeight={ 5 }
+    >
+      { content }
+    </Box>
+  );
+};
+
+const LatestDeposits = ({ isLoading, items, socketAlert, socketItemsNum }: Props) => {
+  const depositsUrl = route({ pathname: '/deposits' });
+  return (
+    <>
+      <SocketNewItemsNotice borderBottomRadius={ 0 } url={ depositsUrl } num={ socketItemsNum } alert={ socketAlert } type="deposit" isLoading={ isLoading }/>
+      <Box mb={{ base: 3, lg: 4 }}>
+        { items.map(((item, index) => (
+          <LatestDepositsItem
+            key={ item.l1TxHash + item.l2TxHash + (isLoading ? index : '') }
+            item={ item }
+            isLoading={ isLoading }
+          />
+        ))) }
+      </Box>
+      <Flex justifyContent="center">
+        <LinkInternal fontSize="sm" href={ depositsUrl }>View all deposits</LinkInternal>
+      </Flex>
+    </>
+  );
+};
+
+export default LatestDeposits;
diff --git a/ui/home/latestDeposits/LatestDepositsItem.tsx b/ui/home/latestDeposits/LatestDepositsItem.tsx
new file mode 100644
index 0000000000..3bc208ab04
--- /dev/null
+++ b/ui/home/latestDeposits/LatestDepositsItem.tsx
@@ -0,0 +1,121 @@
+import {
+  Box,
+  Flex,
+  Grid,
+  Skeleton,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+type Props = {
+  l1BlockNumber: number;
+  l1TxHash: string;
+  l2TxHash: string | null;
+  timestamp: string | null;
+  isLoading?: boolean;
+};
+
+const LatestDepositsItem = ({ l1BlockNumber, l1TxHash, l2TxHash, timestamp, isLoading }: Props) => {
+  const isMobile = useIsMobile();
+
+  const l1BlockLink = (
+    <BlockEntityL1
+      number={ l1BlockNumber }
+      isLoading={ isLoading }
+      fontSize="sm"
+      lineHeight={ 5 }
+      fontWeight={ 700 }
+    />
+  );
+
+  const l1TxLink = (
+    <TxEntityL1
+      isLoading={ isLoading }
+      hash={ l1TxHash }
+      fontSize="sm"
+      lineHeight={ 5 }
+      truncation={ isMobile ? 'constant_long' : 'dynamic' }
+    />
+  );
+
+  const l2TxLink = l2TxHash ? (
+    <TxEntity
+      isLoading={ isLoading }
+      hash={ l2TxHash }
+      fontSize="sm"
+      lineHeight={ 5 }
+      truncation={ isMobile ? 'constant_long' : 'dynamic' }
+    />
+  ) : null;
+
+  const content = (() => {
+    if (isMobile) {
+      return (
+        <>
+          <Flex justifyContent="space-between" alignItems="center" mb={ 1 }>
+            { l1BlockLink }
+            <TimeAgoWithTooltip
+              timestamp={ timestamp }
+              isLoading={ isLoading }
+              color="text_secondary"
+            />
+          </Flex>
+          <Grid gridTemplateColumns="56px auto">
+            <Skeleton isLoaded={ !isLoading } my="5px" w="fit-content">
+              L1 txn
+            </Skeleton>
+            { l1TxLink }
+            <Skeleton isLoaded={ !isLoading } my="3px" w="fit-content">
+              L2 txn
+            </Skeleton>
+            { l2TxLink }
+          </Grid>
+        </>
+      );
+    }
+
+    return (
+      <Grid width="100%" columnGap={ 4 } rowGap={ 2 } templateColumns="max-content max-content auto" w="100%">
+        { l1BlockLink }
+        <Skeleton isLoaded={ !isLoading } w="fit-content" h="fit-content" my="5px">
+          L1 txn
+        </Skeleton>
+        { l1TxLink }
+        <TimeAgoWithTooltip
+          timestamp={ timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+          w="fit-content"
+          h="fit-content"
+          my="2px"
+        />
+        <Skeleton isLoaded={ !isLoading } w="fit-content" h="fit-content" my="2px">
+          L2 txn
+        </Skeleton>
+        { l2TxLink }
+      </Grid>
+    );
+  })();
+
+  return (
+    <Box
+      width="100%"
+      borderTop="1px solid"
+      borderColor="divider"
+      py={ 4 }
+      px={{ base: 0, lg: 4 }}
+      _last={{ borderBottom: '1px solid', borderColor: 'divider' }}
+      fontSize="sm"
+      lineHeight={ 5 }
+    >
+      { content }
+    </Box>
+  );
+};
+
+export default React.memo(LatestDepositsItem);
diff --git a/ui/home/latestDeposits/LatestOptimisticDeposits.pw.tsx b/ui/home/latestDeposits/LatestOptimisticDeposits.pw.tsx
new file mode 100644
index 0000000000..6a0396a42c
--- /dev/null
+++ b/ui/home/latestDeposits/LatestOptimisticDeposits.pw.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import * as depositMock from 'mocks/optimism/deposits';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import LatestOptimisticDeposits from './LatestOptimisticDeposits';
+
+test('default view +@mobile +@dark-mode', async({ render, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  mockApiResponse('homepage_optimistic_deposits', depositMock.data.items);
+  const component = await render(<LatestOptimisticDeposits/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/home/latestDeposits/LatestOptimisticDeposits.tsx b/ui/home/latestDeposits/LatestOptimisticDeposits.tsx
new file mode 100644
index 0000000000..89ffb53796
--- /dev/null
+++ b/ui/home/latestDeposits/LatestOptimisticDeposits.tsx
@@ -0,0 +1,72 @@
+import { Text } from '@chakra-ui/react';
+import React from 'react';
+
+import type { SocketMessage } from 'lib/socket/types';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import useGradualIncrement from 'lib/hooks/useGradualIncrement';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
+import { L2_DEPOSIT_ITEM } from 'stubs/L2';
+
+import LatestDeposits from './LatestDeposits';
+
+const LatestOptimisticDeposits = () => {
+  const isMobile = useIsMobile();
+  const itemsCount = isMobile ? 2 : 6;
+  const { data, isPlaceholderData, isError } = useApiQuery('homepage_optimistic_deposits', {
+    queryOptions: {
+      placeholderData: Array(itemsCount).fill(L2_DEPOSIT_ITEM),
+    },
+  });
+
+  const [ num, setNum ] = useGradualIncrement(0);
+  const [ socketAlert, setSocketAlert ] = React.useState('');
+
+  const handleSocketClose = React.useCallback(() => {
+    setSocketAlert('Connection is lost. Please reload the page.');
+  }, []);
+
+  const handleSocketError = React.useCallback(() => {
+    setSocketAlert('An error has occurred while fetching new transactions. Please reload the page.');
+  }, []);
+
+  const handleNewDepositMessage: SocketMessage.NewOptimisticDeposits['handler'] = React.useCallback((payload) => {
+    setNum(payload.deposits);
+  }, [ setNum ]);
+
+  const channel = useSocketChannel({
+    topic: 'optimism_deposits:new_deposits',
+    onSocketClose: handleSocketClose,
+    onSocketError: handleSocketError,
+    isDisabled: false,
+  });
+
+  useSocketMessage({
+    channel,
+    event: 'deposits',
+    handler: handleNewDepositMessage,
+  });
+
+  if (isError) {
+    return <Text mt={ 4 }>No data. Please reload the page.</Text>;
+  }
+
+  if (data) {
+    return (
+      <LatestDeposits
+        items={ data.slice(0, itemsCount).map((item) => (
+          { l1BlockNumber: item.l1_block_number, l1TxHash: item.l1_transaction_hash, l2TxHash: item.l2_transaction_hash, timestamp: item.l1_block_timestamp }
+        )) }
+        isLoading={ isPlaceholderData }
+        socketItemsNum={ num }
+        socketAlert={ socketAlert }
+      />
+    );
+  }
+
+  return null;
+};
+
+export default LatestOptimisticDeposits;
diff --git a/ui/home/latestDeposits/__screenshots__/LatestArbitrumDeposits.pw.tsx_default_default-view-mobile-1.png b/ui/home/latestDeposits/__screenshots__/LatestArbitrumDeposits.pw.tsx_default_default-view-mobile-1.png
new file mode 100644
index 0000000000..02e8a3b6b0
Binary files /dev/null and b/ui/home/latestDeposits/__screenshots__/LatestArbitrumDeposits.pw.tsx_default_default-view-mobile-1.png differ
diff --git a/ui/home/latestDeposits/__screenshots__/LatestArbitrumDeposits.pw.tsx_mobile_default-view-mobile-1.png b/ui/home/latestDeposits/__screenshots__/LatestArbitrumDeposits.pw.tsx_mobile_default-view-mobile-1.png
new file mode 100644
index 0000000000..950b31fc77
Binary files /dev/null and b/ui/home/latestDeposits/__screenshots__/LatestArbitrumDeposits.pw.tsx_mobile_default-view-mobile-1.png differ
diff --git a/ui/home/latestDeposits/__screenshots__/LatestOptimisticDeposits.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png b/ui/home/latestDeposits/__screenshots__/LatestOptimisticDeposits.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..e5dc4af0d5
Binary files /dev/null and b/ui/home/latestDeposits/__screenshots__/LatestOptimisticDeposits.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/home/latestDeposits/__screenshots__/LatestOptimisticDeposits.pw.tsx_default_default-view-mobile-dark-mode-1.png b/ui/home/latestDeposits/__screenshots__/LatestOptimisticDeposits.pw.tsx_default_default-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..5e69e9d56d
Binary files /dev/null and b/ui/home/latestDeposits/__screenshots__/LatestOptimisticDeposits.pw.tsx_default_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/home/latestDeposits/__screenshots__/LatestOptimisticDeposits.pw.tsx_mobile_default-view-mobile-dark-mode-1.png b/ui/home/latestDeposits/__screenshots__/LatestOptimisticDeposits.pw.tsx_mobile_default-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..89c27ec008
Binary files /dev/null and b/ui/home/latestDeposits/__screenshots__/LatestOptimisticDeposits.pw.tsx_mobile_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/l2Deposits/DepositsListItem.tsx b/ui/l2Deposits/DepositsListItem.tsx
deleted file mode 100644
index 658d09d979..0000000000
--- a/ui/l2Deposits/DepositsListItem.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Skeleton } from '@chakra-ui/react';
-import BigNumber from 'bignumber.js';
-import React from 'react';
-
-import type { L2DepositsItem } from 'types/api/l2Deposits';
-
-import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
-import AddressEntityL1 from 'ui/shared/entities/address/AddressEntityL1';
-import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
-import TxEntity from 'ui/shared/entities/tx/TxEntity';
-import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
-
-const feature = config.features.optimisticRollup;
-
-type Props = { item: L2DepositsItem; isLoading?: boolean };
-
-const DepositsListItem = ({ item, isLoading }: Props) => {
-  const timeAgo = dayjs(item.l1_block_timestamp).fromNow();
-
-  if (!feature.isEnabled) {
-    return null;
-  }
-
-  return (
-    <ListItemMobileGrid.Container>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 block No</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <BlockEntityL1
-          number={ item.l1_block_number }
-          isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
-          fontWeight={ 600 }
-        />
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 txn hash</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <TxEntity
-          isLoading={ isLoading }
-          hash={ item.l2_tx_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
-        />
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ timeAgo }</Skeleton>
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn hash</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <TxEntityL1
-          isLoading={ isLoading }
-          hash={ item.l1_tx_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
-        />
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn origin</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <AddressEntityL1
-          address={{ hash: item.l1_tx_origin, name: '', is_contract: false, is_verified: false, implementation_name: '', ens_domain_name: null }}
-          isLoading={ isLoading }
-          noCopy
-        />
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Gas limit</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ BigNumber(item.l2_tx_gas_limit).toFormat() }</Skeleton>
-      </ListItemMobileGrid.Value>
-
-    </ListItemMobileGrid.Container>
-  );
-};
-
-export default DepositsListItem;
diff --git a/ui/l2Deposits/DepositsTable.tsx b/ui/l2Deposits/DepositsTable.tsx
deleted file mode 100644
index 8aea8aadcf..0000000000
--- a/ui/l2Deposits/DepositsTable.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
-import React from 'react';
-
-import type { L2DepositsItem } from 'types/api/l2Deposits';
-
-import { default as Thead } from 'ui/shared/TheadSticky';
-
-import DepositsTableItem from './DepositsTableItem';
-
- type Props = {
-   items: Array<L2DepositsItem>;
-   top: number;
-   isLoading?: boolean;
- }
-
-const DepositsTable = ({ items, top, isLoading }: Props) => {
-  return (
-    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px">
-      <Thead top={ top }>
-        <Tr>
-          <Th>L1 block No</Th>
-          <Th>L2 txn hash</Th>
-          <Th>Age</Th>
-          <Th>L1 txn hash</Th>
-          <Th>L1 txn origin</Th>
-          <Th isNumeric>Gas limit</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        { items.map((item, index) => (
-          <DepositsTableItem key={ item.l2_tx_hash + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
-        )) }
-      </Tbody>
-    </Table>
-  );
-};
-
-export default DepositsTable;
diff --git a/ui/l2Deposits/DepositsTableItem.tsx b/ui/l2Deposits/DepositsTableItem.tsx
deleted file mode 100644
index 2c9f437ab7..0000000000
--- a/ui/l2Deposits/DepositsTableItem.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Td, Tr, Skeleton } from '@chakra-ui/react';
-import BigNumber from 'bignumber.js';
-import React from 'react';
-
-import type { L2DepositsItem } from 'types/api/l2Deposits';
-
-import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
-import AddressEntityL1 from 'ui/shared/entities/address/AddressEntityL1';
-import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
-import TxEntity from 'ui/shared/entities/tx/TxEntity';
-import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-
-const feature = config.features.optimisticRollup;
-
- type Props = { item: L2DepositsItem; isLoading?: boolean };
-
-const WithdrawalsTableItem = ({ item, isLoading }: Props) => {
-  const timeAgo = dayjs(item.l1_block_timestamp).fromNow();
-
-  if (!feature.isEnabled) {
-    return null;
-  }
-
-  return (
-    <Tr>
-      <Td verticalAlign="middle">
-        <BlockEntityL1
-          number={ item.l1_block_number }
-          isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
-          fontWeight={ 600 }
-        />
-      </Td>
-      <Td verticalAlign="middle">
-        <TxEntity
-          isLoading={ isLoading }
-          hash={ item.l2_tx_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
-          truncation="constant"
-        />
-      </Td>
-      <Td verticalAlign="middle" pr={ 12 }>
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block"><span>{ timeAgo }</span></Skeleton>
-      </Td>
-      <Td verticalAlign="middle">
-        <TxEntityL1
-          isLoading={ isLoading }
-          hash={ item.l1_tx_hash }
-          truncation="constant"
-          fontSize="sm"
-          lineHeight={ 5 }
-        />
-      </Td>
-      <Td verticalAlign="middle">
-        <AddressEntityL1
-          address={{ hash: item.l1_tx_origin, name: '', is_contract: false, is_verified: false, implementation_name: '', ens_domain_name: null }}
-          isLoading={ isLoading }
-          truncation="constant"
-          noCopy
-        />
-      </Td>
-      <Td verticalAlign="middle" isNumeric>
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block">
-          <span>{ BigNumber(item.l2_tx_gas_limit).toFormat() }</span>
-        </Skeleton>
-      </Td>
-    </Tr>
-  );
-};
-
-export default WithdrawalsTableItem;
diff --git a/ui/l2OutputRoots/OutputRootsListItem.tsx b/ui/l2OutputRoots/OutputRootsListItem.tsx
deleted file mode 100644
index 4a4a9337d0..0000000000
--- a/ui/l2OutputRoots/OutputRootsListItem.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Flex, Skeleton } from '@chakra-ui/react';
-import React from 'react';
-
-import type { L2OutputRootsItem } from 'types/api/l2OutputRoots';
-
-import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
-import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
-import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
-import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
-
-const feature = config.features.optimisticRollup;
-
-type Props = { item: L2OutputRootsItem; isLoading?: boolean };
-
-const OutputRootsListItem = ({ item, isLoading }: Props) => {
-  const timeAgo = dayjs(item.l1_timestamp).fromNow();
-
-  if (!feature.isEnabled) {
-    return null;
-  }
-
-  return (
-    <ListItemMobileGrid.Container>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 output index</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value fontWeight={ 600 } color="text">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.l2_output_index }</Skeleton>
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
-          <span>{ timeAgo }</span>
-        </Skeleton>
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 block #</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <BlockEntityL2
-          isLoading={ isLoading }
-          number={ item.l2_block_number }
-          fontSize="sm"
-          lineHeight={ 5 }
-          noIcon
-        />
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn hash</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value py="3px">
-        <TxEntityL1
-          isLoading={ isLoading }
-          hash={ item.l1_tx_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
-        />
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Output root</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <Flex overflow="hidden" whiteSpace="nowrap" alignItems="center" w="100%" justifyContent="space-between">
-          <Skeleton isLoaded={ !isLoading } color="text_secondary" w="calc(100% - 24px)">
-            <HashStringShortenDynamic hash={ item.output_root }/>
-          </Skeleton>
-          <CopyToClipboard text={ item.output_root } isLoading={ isLoading }/>
-        </Flex>
-      </ListItemMobileGrid.Value>
-
-    </ListItemMobileGrid.Container>
-  );
-};
-
-export default OutputRootsListItem;
diff --git a/ui/l2OutputRoots/OutputRootsTable.tsx b/ui/l2OutputRoots/OutputRootsTable.tsx
deleted file mode 100644
index 96ce6c9c40..0000000000
--- a/ui/l2OutputRoots/OutputRootsTable.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
-import React from 'react';
-
-import type { L2OutputRootsItem } from 'types/api/l2OutputRoots';
-
-import { default as Thead } from 'ui/shared/TheadSticky';
-
-import OutputRootsTableItem from './OutputRootsTableItem';
-
-type Props = {
-  items: Array<L2OutputRootsItem>;
-  top: number;
-  isLoading?: boolean;
-}
-
-const OutputRootsTable = ({ items, top, isLoading }: Props) => {
-  return (
-    <Table variant="simple" size="sm" minW="900px">
-      <Thead top={ top }>
-        <Tr>
-          <Th width="140px">L2 output index</Th>
-          <Th width="20%">Age</Th>
-          <Th width="20%">L2 block #</Th>
-          <Th width="30%">L1 txn hash</Th>
-          <Th width="30%">Output root</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        { items.map((item, index) => (
-          <OutputRootsTableItem key={ item.l2_output_index + (Number(isLoading ? index : '') ? String(index) : '') } item={ item } isLoading={ isLoading }/>
-        )) }
-      </Tbody>
-    </Table>
-  );
-};
-
-export default OutputRootsTable;
diff --git a/ui/l2OutputRoots/OutputRootsTableItem.tsx b/ui/l2OutputRoots/OutputRootsTableItem.tsx
deleted file mode 100644
index e64b613a82..0000000000
--- a/ui/l2OutputRoots/OutputRootsTableItem.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Flex, Td, Tr, Skeleton } from '@chakra-ui/react';
-import React from 'react';
-
-import type { L2OutputRootsItem } from 'types/api/l2OutputRoots';
-
-import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
-import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
-import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
-
-const feature = config.features.optimisticRollup;
-
-type Props = { item: L2OutputRootsItem; isLoading?: boolean };
-
-const OutputRootsTableItem = ({ item, isLoading }: Props) => {
-  const timeAgo = dayjs(item.l1_timestamp).fromNow();
-
-  if (!feature.isEnabled) {
-    return null;
-  }
-
-  return (
-    <Tr>
-      <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.l2_output_index }</Skeleton>
-      </Td>
-      <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block"><span>{ timeAgo }</span></Skeleton>
-      </Td>
-      <Td verticalAlign="middle">
-        <BlockEntityL2
-          isLoading={ isLoading }
-          number={ item.l2_block_number }
-          fontSize="sm"
-          lineHeight={ 5 }
-          fontWeight={ 600 }
-        />
-      </Td>
-      <Td verticalAlign="middle" pr={ 12 }>
-        <TxEntityL1
-          isLoading={ isLoading }
-          hash={ item.l1_tx_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
-        />
-      </Td>
-      <Td verticalAlign="middle">
-        <Flex overflow="hidden" whiteSpace="nowrap" w="100%" alignItems="center">
-          <Skeleton isLoaded={ !isLoading } w="calc(100% - 36px)">
-            <HashStringShortenDynamic hash={ item.output_root }/>
-          </Skeleton>
-          <CopyToClipboard text={ item.output_root } ml={ 2 } isLoading={ isLoading }/>
-        </Flex>
-      </Td>
-    </Tr>
-  );
-};
-
-export default OutputRootsTableItem;
diff --git a/ui/l2TxnBatches/TxnBatchesListItem.tsx b/ui/l2TxnBatches/TxnBatchesListItem.tsx
deleted file mode 100644
index 3efba7b03e..0000000000
--- a/ui/l2TxnBatches/TxnBatchesListItem.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { Skeleton, VStack } from '@chakra-ui/react';
-import React from 'react';
-
-import type { L2TxnBatchesItem } from 'types/api/l2TxnBatches';
-
-import { route } from 'nextjs-routes';
-
-import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
-import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
-import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
-import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkInternal from 'ui/shared/LinkInternal';
-import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
-
-const feature = config.features.optimisticRollup;
-
-type Props = { item: L2TxnBatchesItem; isLoading?: boolean };
-
-const TxnBatchesListItem = ({ item, isLoading }: Props) => {
-  const timeAgo = dayjs(item.l1_timestamp).fromNow();
-
-  if (!feature.isEnabled) {
-    return null;
-  }
-
-  return (
-    <ListItemMobileGrid.Container gridTemplateColumns="100px auto">
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 block #</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value py="3px">
-        <BlockEntityL2
-          isLoading={ isLoading }
-          number={ item.l2_block_number }
-          fontSize="sm"
-          lineHeight={ 5 }
-          fontWeight={ 600 }
-        />
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 block txn count</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <LinkInternal
-          href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: item.l2_block_number.toString(), tab: 'txs' } }) }
-          isLoading={ isLoading }
-        >
-          <Skeleton isLoaded={ !isLoading } minW="40px">
-            { item.tx_count }
-          </Skeleton>
-        </LinkInternal>
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Epoch number</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <BlockEntityL1
-          isLoading={ isLoading }
-          number={ item.epoch_number }
-          noIcon
-          fontSize="sm"
-          lineHeight={ 5 }
-          fontWeight={ 600 }
-        />
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn hash</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value py="3px">
-        <VStack spacing={ 3 } w="100%" overflow="hidden" alignItems="flex-start">
-          { item.l1_tx_hashes.map(hash => (
-            <TxEntityL1
-              key={ hash }
-              isLoading={ isLoading }
-              hash={ hash }
-              fontSize="sm"
-              lineHeight={ 5 }
-              maxW="100%"
-            />
-          )) }
-        </VStack>
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ timeAgo }</Skeleton>
-      </ListItemMobileGrid.Value>
-
-    </ListItemMobileGrid.Container>
-  );
-};
-
-export default TxnBatchesListItem;
diff --git a/ui/l2TxnBatches/TxnBatchesTable.tsx b/ui/l2TxnBatches/TxnBatchesTable.tsx
deleted file mode 100644
index 17770faa01..0000000000
--- a/ui/l2TxnBatches/TxnBatchesTable.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
-import React from 'react';
-
-import type { L2TxnBatchesItem } from 'types/api/l2TxnBatches';
-
-import { default as Thead } from 'ui/shared/TheadSticky';
-
-import TxnBatchesTableItem from './TxnBatchesTableItem';
-
-type Props = {
-  items: Array<L2TxnBatchesItem>;
-  top: number;
-  isLoading?: boolean;
-}
-
-const TxnBatchesTable = ({ items, top, isLoading }: Props) => {
-  return (
-    <Table variant="simple" size="sm" minW="850px">
-      <Thead top={ top }>
-        <Tr>
-          <Th width="170px">L2 block #</Th>
-          <Th width="170px">L2 block txn count</Th>
-          <Th width="160px">Epoch number</Th>
-          <Th width="100%">L1 txn hash</Th>
-          <Th width="150px">Age</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        { items.map((item, index) => (
-          <TxnBatchesTableItem
-            key={ item.l2_block_number + (isLoading ? String(index) : '') }
-            item={ item }
-            isLoading={ isLoading }
-          />
-        )) }
-      </Tbody>
-    </Table>
-  );
-};
-
-export default TxnBatchesTable;
diff --git a/ui/l2TxnBatches/TxnBatchesTableItem.tsx b/ui/l2TxnBatches/TxnBatchesTableItem.tsx
deleted file mode 100644
index 8409b8e736..0000000000
--- a/ui/l2TxnBatches/TxnBatchesTableItem.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Td, Tr, VStack, Skeleton } from '@chakra-ui/react';
-import React from 'react';
-
-import type { L2TxnBatchesItem } from 'types/api/l2TxnBatches';
-
-import { route } from 'nextjs-routes';
-
-import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
-import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
-import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
-import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkInternal from 'ui/shared/LinkInternal';
-
-const feature = config.features.optimisticRollup;
-
-type Props = { item: L2TxnBatchesItem; isLoading?: boolean };
-
-const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
-  const timeAgo = dayjs(item.l1_timestamp).fromNow();
-
-  if (!feature.isEnabled) {
-    return null;
-  }
-
-  return (
-    <Tr>
-      <Td>
-        <BlockEntityL2
-          isLoading={ isLoading }
-          number={ item.l2_block_number }
-          fontSize="sm"
-          lineHeight={ 5 }
-          fontWeight={ 600 }
-        />
-      </Td>
-      <Td>
-        <LinkInternal
-          href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: item.l2_block_number.toString(), tab: 'txs' } }) }
-          isLoading={ isLoading }
-        >
-          <Skeleton isLoaded={ !isLoading } minW="40px" my={ 1 }>
-            { item.tx_count }
-          </Skeleton>
-        </LinkInternal>
-      </Td>
-      <Td>
-        <BlockEntityL1
-          isLoading={ isLoading }
-          number={ item.epoch_number }
-          fontSize="sm"
-          lineHeight={ 5 }
-          fontWeight={ 600 }
-          py="2px"
-          noIcon
-        />
-      </Td>
-      <Td pr={ 12 }>
-        <VStack spacing={ 3 } alignItems="flex-start">
-          { item.l1_tx_hashes.map(hash => (
-            <TxEntityL1
-              key={ hash }
-              isLoading={ isLoading }
-              hash={ hash }
-              fontSize="sm"
-              lineHeight={ 5 }
-              maxW="100%"
-            />
-          )) }
-        </VStack>
-      </Td>
-      <Td>
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" my={ 1 } display="inline-block">
-          <span>{ timeAgo }</span>
-        </Skeleton>
-      </Td>
-    </Tr>
-  );
-};
-
-export default TxnBatchesTableItem;
diff --git a/ui/l2Withdrawals/WithdrawalsListItem.tsx b/ui/l2Withdrawals/WithdrawalsListItem.tsx
deleted file mode 100644
index 585b3f7688..0000000000
--- a/ui/l2Withdrawals/WithdrawalsListItem.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { Skeleton } from '@chakra-ui/react';
-import React from 'react';
-
-import type { L2WithdrawalsItem } from 'types/api/l2Withdrawals';
-
-import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import TxEntity from 'ui/shared/entities/tx/TxEntity';
-import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkExternal from 'ui/shared/LinkExternal';
-import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
-
-const feature = config.features.optimisticRollup;
-
-type Props = { item: L2WithdrawalsItem; isLoading?: boolean };
-
-const WithdrawalsListItem = ({ item, isLoading }: Props) => {
-  const timeAgo = item.l2_timestamp ? dayjs(item.l2_timestamp).fromNow() : null;
-  const timeToEnd = item.challenge_period_end ? dayjs(item.challenge_period_end).fromNow(true) + ' left' : null;
-
-  if (!feature.isEnabled) {
-    return null;
-  }
-
-  return (
-    <ListItemMobileGrid.Container>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Msg nonce</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
-          { item.msg_nonce_version + '-' + item.msg_nonce }
-        </Skeleton>
-      </ListItemMobileGrid.Value>
-
-      { item.from && (
-        <>
-          <ListItemMobileGrid.Label isLoading={ isLoading }>From</ListItemMobileGrid.Label>
-          <ListItemMobileGrid.Value>
-            <AddressEntity
-              address={ item.from }
-              isLoading={ isLoading }
-            />
-          </ListItemMobileGrid.Value>
-        </>
-      ) }
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 txn hash</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <TxEntity
-          isLoading={ isLoading }
-          hash={ item.l2_tx_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
-        />
-      </ListItemMobileGrid.Value>
-
-      { timeAgo && (
-        <>
-          <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
-          <ListItemMobileGrid.Value>
-            <Skeleton isLoaded={ !isLoading } display="inline-block">
-              { timeAgo }
-            </Skeleton>
-          </ListItemMobileGrid.Value>
-        </>
-      ) }
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Status</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        { item.status === 'Ready for relay' ?
-          <LinkExternal href={ feature.withdrawalUrl }>{ item.status }</LinkExternal> :
-          <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.status }</Skeleton> }
-      </ListItemMobileGrid.Value>
-
-      { item.l1_tx_hash && (
-        <>
-          <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn hash</ListItemMobileGrid.Label>
-          <ListItemMobileGrid.Value>
-            <TxEntityL1
-              isLoading={ isLoading }
-              hash={ item.l1_tx_hash }
-              fontSize="sm"
-              lineHeight={ 5 }
-            />
-          </ListItemMobileGrid.Value>
-        </>
-      ) }
-
-      { timeToEnd && (
-        <>
-          <ListItemMobileGrid.Label isLoading={ isLoading }>Time left</ListItemMobileGrid.Label>
-          <ListItemMobileGrid.Value>{ timeToEnd }</ListItemMobileGrid.Value>
-        </>
-      ) }
-
-    </ListItemMobileGrid.Container>
-  );
-};
-
-export default WithdrawalsListItem;
diff --git a/ui/l2Withdrawals/WithdrawalsTable.tsx b/ui/l2Withdrawals/WithdrawalsTable.tsx
deleted file mode 100644
index 603d52ef5b..0000000000
--- a/ui/l2Withdrawals/WithdrawalsTable.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
-import React from 'react';
-
-import type { L2WithdrawalsItem } from 'types/api/l2Withdrawals';
-
-import { default as Thead } from 'ui/shared/TheadSticky';
-
-import WithdrawalsTableItem from './WithdrawalsTableItem';
-
- type Props = {
-   items: Array<L2WithdrawalsItem>;
-   top: number;
-   isLoading?: boolean;
- }
-
-const WithdrawalsTable = ({ items, top, isLoading }: Props) => {
-  return (
-    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px">
-      <Thead top={ top }>
-        <Tr>
-          <Th>Msg nonce</Th>
-          <Th>From</Th>
-          <Th>L2 txn hash</Th>
-          <Th>Age</Th>
-          <Th>Status</Th>
-          <Th>L1 txn hash</Th>
-          <Th>Time left</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        { items.map((item, index) => (
-          <WithdrawalsTableItem key={ item.l2_tx_hash + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
-        )) }
-      </Tbody>
-    </Table>
-  );
-};
-
-export default WithdrawalsTable;
diff --git a/ui/l2Withdrawals/WithdrawalsTableItem.tsx b/ui/l2Withdrawals/WithdrawalsTableItem.tsx
deleted file mode 100644
index 6df6254116..0000000000
--- a/ui/l2Withdrawals/WithdrawalsTableItem.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { Td, Tr, Skeleton } from '@chakra-ui/react';
-import React from 'react';
-
-import type { L2WithdrawalsItem } from 'types/api/l2Withdrawals';
-
-import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import TxEntity from 'ui/shared/entities/tx/TxEntity';
-import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkExternal from 'ui/shared/LinkExternal';
-
-const feature = config.features.optimisticRollup;
-
- type Props = { item: L2WithdrawalsItem; isLoading?: boolean };
-
-const WithdrawalsTableItem = ({ item, isLoading }: Props) => {
-  const timeAgo = item.l2_timestamp ? dayjs(item.l2_timestamp).fromNow() : 'N/A';
-  const timeToEnd = item.challenge_period_end ? dayjs(item.challenge_period_end).fromNow(true) + ' left' : '';
-
-  if (!feature.isEnabled) {
-    return null;
-  }
-
-  return (
-    <Tr>
-      <Td verticalAlign="middle" fontWeight={ 600 }>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.msg_nonce_version + '-' + item.msg_nonce }</Skeleton>
-      </Td>
-      <Td verticalAlign="middle">
-        { item.from ? (
-          <AddressEntity
-            address={ item.from }
-            isLoading={ isLoading }
-            truncation="constant"
-          />
-        ) : 'N/A' }
-      </Td>
-      <Td verticalAlign="middle">
-        <TxEntity
-          isLoading={ isLoading }
-          hash={ item.l2_tx_hash }
-          truncation="constant"
-          fontSize="sm"
-          lineHeight={ 5 }
-        />
-      </Td>
-      <Td verticalAlign="middle" pr={ 12 }>
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block">
-          <span> { timeAgo }</span>
-        </Skeleton>
-      </Td>
-      <Td verticalAlign="middle">
-        { item.status === 'Ready for relay' ?
-          <LinkExternal href={ feature.withdrawalUrl }>{ item.status }</LinkExternal> :
-          <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.status }</Skeleton>
-        }
-      </Td>
-      <Td verticalAlign="middle">
-        { item.l1_tx_hash ? (
-          <TxEntityL1
-            isLoading={ isLoading }
-            hash={ item.l1_tx_hash }
-            truncation="constant"
-            fontSize="sm"
-            lineHeight={ 5 }
-          />
-        ) :
-          'N/A'
-        }
-      </Td>
-      <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" minW="50px" minH="20px" display="inline-block">{ timeToEnd }</Skeleton>
-      </Td>
-    </Tr>
-  );
-};
-
-export default WithdrawalsTableItem;
diff --git a/ui/marketplace/AppSecurityReport.tsx b/ui/marketplace/AppSecurityReport.tsx
new file mode 100644
index 0000000000..33da12daa2
--- /dev/null
+++ b/ui/marketplace/AppSecurityReport.tsx
@@ -0,0 +1,112 @@
+import { Box, Text, Link, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, chakra, Flex, Divider, Icon } from '@chakra-ui/react';
+import React from 'react';
+
+import type { MarketplaceAppSecurityReport } from 'types/client/marketplace';
+import { ContractListTypes } from 'types/client/marketplace';
+
+import config from 'configs/app';
+// This icon doesn't work properly when it is in the sprite
+// Probably because of the gradient
+// eslint-disable-next-line no-restricted-imports
+import solidityScanIcon from 'icons/brands/solidity_scan.svg';
+import { apos } from 'lib/html-entities';
+import * as mixpanel from 'lib/mixpanel/index';
+import Popover from 'ui/shared/chakra/Popover';
+import IconSvg from 'ui/shared/IconSvg';
+import SolidityscanReportButton from 'ui/shared/solidityscanReport/SolidityscanReportButton';
+import SolidityscanReportDetails from 'ui/shared/solidityscanReport/SolidityscanReportDetails';
+import SolidityscanReportScore from 'ui/shared/solidityscanReport/SolidityscanReportScore';
+
+type Props = {
+  id: string;
+  securityReport?: MarketplaceAppSecurityReport;
+  showContractList: (id: string, type: ContractListTypes) => void;
+  isLoading?: boolean;
+  onlyIcon?: boolean;
+  source: 'Discovery view' | 'App modal' | 'App page';
+  className?: string;
+  popoverPlacement?: 'bottom-start' | 'bottom-end' | 'left';
+};
+
+const AppSecurityReport = ({
+  id, securityReport, showContractList, isLoading, onlyIcon, source, className, popoverPlacement = 'bottom-start',
+}: Props) => {
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  const handleButtonClick = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Security score', Info: id, Source: source });
+    onToggle();
+  }, [ id, source, onToggle ]);
+
+  const showAnalyzedContracts = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Analyzed contracts', Info: id, Source: 'Security score popup' });
+    showContractList(id, ContractListTypes.ANALYZED);
+  }, [ showContractList, id ]);
+
+  const showAllContracts = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Total contracts', Info: id, Source: 'Security score popup' });
+    showContractList(id, ContractListTypes.ALL);
+  }, [ showContractList, id ]);
+
+  const {
+    securityScore = 0,
+    solidityScanContractsNumber = 0,
+    issueSeverityDistribution = {} as MarketplaceAppSecurityReport['overallInfo']['issueSeverityDistribution'],
+    totalIssues = 0,
+  } = securityReport?.overallInfo || {};
+
+  if ((!securityReport || !securityScore) && !isLoading) {
+    return null;
+  }
+
+  return (
+    <Popover isOpen={ isOpen } onClose={ onClose } placement={ popoverPlacement } isLazy>
+      <PopoverTrigger>
+        <SolidityscanReportButton
+          score={ securityScore }
+          isLoading={ isLoading }
+          onClick={ handleButtonClick }
+          isActive={ isOpen }
+          onlyIcon={ onlyIcon }
+          label={ <>The security score is based on analysis<br/>of a DApp{ apos }s smart contracts.</> }
+          className={ className }
+        />
+      </PopoverTrigger>
+      <PopoverContent w={{ base: 'calc(100vw - 24px)', lg: '328px' }} mx={{ base: 3, lg: 0 }}>
+        <PopoverBody px="26px" py="20px" fontSize="sm">
+          <Text fontWeight="500" fontSize="xs" mb={ 2 } variant="secondary">Smart contracts info</Text>
+          <Flex alignItems="center" justifyContent="space-between" py={ 1.5 }>
+            <Flex alignItems="center">
+              <IconSvg name="contracts/verified_many" boxSize={ 5 } color="green.500" mr={ 1 }/>
+              <Text>Verified contracts</Text>
+            </Flex>
+            <Link fontSize="sm" fontWeight="500" onClick={ showAllContracts }>
+              { securityReport?.overallInfo.verifiedNumber ?? 0 } of { securityReport?.overallInfo.totalContractsNumber ?? 0 }
+            </Link>
+          </Flex>
+          <Divider my={ 3 }/>
+          <Box mb={ 5 }>
+            { solidityScanContractsNumber } smart contract{ solidityScanContractsNumber === 1 ? ' was' : 's were' } evaluated to determine
+            this protocol{ apos }s overall security score on the { config.chain.name } network by { ' ' }
+            <Box>
+              <Icon as={ solidityScanIcon } mr={ 1 } w="23px" h="20px" display="inline-block" verticalAlign="middle"/>
+              <Text fontWeight={ 600 } display="inline-block">SolidityScan</Text>
+            </Box>
+          </Box>
+          <SolidityscanReportScore score={ securityScore } mb={ 5 }/>
+          { issueSeverityDistribution && totalIssues > 0 && (
+            <Box mb={ 5 }>
+              <Text py="7px" variant="secondary" fontSize="xs" fontWeight={ 500 }>Threat score & vulnerabilities</Text>
+              <SolidityscanReportDetails vulnerabilities={ issueSeverityDistribution } vulnerabilitiesCount={ totalIssues }/>
+            </Box>
+          ) }
+          <Link onClick={ showAnalyzedContracts } display="inline-flex" alignItems="center">
+            Analyzed contracts
+          </Link>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default chakra(AppSecurityReport);
diff --git a/ui/marketplace/Banner.tsx b/ui/marketplace/Banner.tsx
new file mode 100644
index 0000000000..157972ba42
--- /dev/null
+++ b/ui/marketplace/Banner.tsx
@@ -0,0 +1,51 @@
+import type { MouseEvent } from 'react';
+import React from 'react';
+
+import type { MarketplaceAppPreview } from 'types/client/marketplace';
+
+import config from 'configs/app';
+import { apps as appsMock } from 'mocks/apps/apps';
+
+import FeaturedApp from './Banner/FeaturedApp';
+import IframeBanner from './Banner/IframeBanner';
+
+const feature = config.features.marketplace;
+
+type BannerProps = {
+  apps: Array<MarketplaceAppPreview> | undefined;
+  favoriteApps: Array<string>;
+  isLoading: boolean;
+  onInfoClick: (id: string) => void;
+  onFavoriteClick: (id: string, isFavorite: boolean, source: 'Banner') => void;
+  onAppClick: (event: MouseEvent, id: string) => void;
+};
+
+const Banner = ({ apps = [], favoriteApps, isLoading, onInfoClick, onFavoriteClick, onAppClick }: BannerProps) => {
+  if (!feature.isEnabled) {
+    return null;
+  }
+
+  if (feature.featuredApp) {
+    const app = apps.find(app => app.id === feature.featuredApp);
+    const isFavorite = favoriteApps.includes(feature.featuredApp);
+    if (!isLoading && !app) {
+      return null;
+    }
+    return (
+      <FeaturedApp
+        app={ app || appsMock[0] }
+        isFavorite={ isFavorite }
+        isLoading={ isLoading }
+        onInfoClick={ onInfoClick }
+        onFavoriteClick={ onFavoriteClick }
+        onAppClick={ onAppClick }
+      />
+    );
+  } else if (feature.banner) {
+    return <IframeBanner contentUrl={ feature.banner.contentUrl } linkUrl={ feature.banner.linkUrl }/>;
+  }
+
+  return null;
+};
+
+export default Banner;
diff --git a/ui/marketplace/Banner/FeaturedApp.tsx b/ui/marketplace/Banner/FeaturedApp.tsx
new file mode 100644
index 0000000000..b7d88fc921
--- /dev/null
+++ b/ui/marketplace/Banner/FeaturedApp.tsx
@@ -0,0 +1,158 @@
+import { Link, Skeleton, useColorModeValue, LinkBox, Flex, Image, LinkOverlay, IconButton } from '@chakra-ui/react';
+import NextLink from 'next/link';
+import type { MouseEvent } from 'react';
+import React, { useCallback } from 'react';
+
+import type { MarketplaceAppPreview } from 'types/client/marketplace';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import * as mixpanel from 'lib/mixpanel/index';
+
+import FavoriteIcon from '../FavoriteIcon';
+import MarketplaceAppIntegrationIcon from '../MarketplaceAppIntegrationIcon';
+import FeaturedAppMobile from './FeaturedAppMobile';
+
+type FeaturedAppProps = {
+  app: MarketplaceAppPreview;
+  isFavorite: boolean;
+  isLoading: boolean;
+  onInfoClick: (id: string) => void;
+  onFavoriteClick: (id: string, isFavorite: boolean, source: 'Banner') => void;
+  onAppClick: (event: MouseEvent, id: string) => void;
+};
+
+const FeaturedApp = ({
+  app, isFavorite, isLoading, onAppClick,
+  onInfoClick, onFavoriteClick,
+}: FeaturedAppProps) => {
+  const isMobile = useIsMobile();
+
+  const { id, url, external, title, logo, logoDarkMode, shortDescription, categories, internalWallet } = app;
+  const logoUrl = useColorModeValue(logo, logoDarkMode || logo);
+  const categoriesLabel = categories.join(', ');
+
+  const backgroundColor = useColorModeValue('purple.50', 'whiteAlpha.100');
+
+  const handleInfoClick = useCallback((event: MouseEvent) => {
+    event.preventDefault();
+    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'More button', Info: id, Source: 'Banner' });
+    onInfoClick(id);
+  }, [ onInfoClick, id ]);
+
+  const handleFavoriteClick = useCallback(() => {
+    onFavoriteClick(id, isFavorite, 'Banner');
+  }, [ onFavoriteClick, id, isFavorite ]);
+
+  if (isMobile) {
+    return (
+      <FeaturedAppMobile
+        { ...app }
+        onInfoClick={ handleInfoClick }
+        isFavorite={ isFavorite }
+        onFavoriteClick={ handleFavoriteClick }
+        isLoading={ isLoading }
+        onAppClick={ onAppClick }
+      />
+    );
+  }
+
+  return (
+    <LinkBox role="group">
+      <Flex
+        gap={ 6 }
+        borderRadius="md"
+        height="136px"
+        padding={ 5 }
+        background={ backgroundColor }
+        mb={ 2 }
+        mt={ 6 }
+      >
+        <Skeleton
+          isLoaded={ !isLoading }
+          w="96px"
+          h="96px"
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+        >
+          <Image
+            src={ isLoading ? undefined : logoUrl }
+            alt={ `${ title } app icon` }
+            borderRadius="md"
+          />
+        </Skeleton>
+
+        <Flex flexDirection="column" flex={ 1 } gap={ 2 }>
+          <Flex alignItems="center" gap={ 3 }>
+            <Skeleton
+              isLoaded={ !isLoading }
+              fontSize="30px"
+              fontWeight="semibold"
+              fontFamily="heading"
+              lineHeight="36px"
+            >
+              { external ? (
+                <LinkOverlay href={ url } isExternal={ true } marginRight={ 2 }>
+                  { title }
+                </LinkOverlay>
+              ) : (
+                <NextLink href={{ pathname: '/apps/[id]', query: { id } }} passHref legacyBehavior>
+                  <LinkOverlay marginRight={ 2 }>
+                    { title }
+                  </LinkOverlay>
+                </NextLink>
+              ) }
+              <MarketplaceAppIntegrationIcon external={ external } internalWallet={ internalWallet }/>
+            </Skeleton>
+
+            <Skeleton
+              isLoaded={ !isLoading }
+              color="text_secondary"
+              fontSize="xs"
+              flex={ 1 }
+            >
+              <span>{ categoriesLabel }</span>
+            </Skeleton>
+
+            { !isLoading && (
+              <Link
+                fontSize="sm"
+                fontWeight="500"
+                href="#"
+                onClick={ handleInfoClick }
+              >
+                More info
+              </Link>
+            ) }
+
+            { !isLoading && (
+              <IconButton
+                display="flex"
+                alignItems="center"
+                aria-label="Mark as favorite"
+                title="Mark as favorite"
+                variant="ghost"
+                colorScheme="gray"
+                w={ 9 }
+                h={ 8 }
+                onClick={ handleFavoriteClick }
+                icon={ <FavoriteIcon isFavorite={ isFavorite }/> }
+              />
+            ) }
+          </Flex>
+
+          <Skeleton
+            isLoaded={ !isLoading }
+            fontSize="sm"
+            lineHeight="20px"
+            noOfLines={ 2 }
+          >
+            { shortDescription }
+          </Skeleton>
+        </Flex>
+      </Flex>
+    </LinkBox>
+  );
+};
+
+export default FeaturedApp;
diff --git a/ui/marketplace/Banner/FeaturedAppMobile.tsx b/ui/marketplace/Banner/FeaturedAppMobile.tsx
new file mode 100644
index 0000000000..5f7e8c7b4b
--- /dev/null
+++ b/ui/marketplace/Banner/FeaturedAppMobile.tsx
@@ -0,0 +1,154 @@
+import { IconButton, Image, Link, LinkBox, Skeleton, useColorModeValue, Flex } from '@chakra-ui/react';
+import type { MouseEvent } from 'react';
+import React from 'react';
+
+import type { MarketplaceAppPreview } from 'types/client/marketplace';
+
+import FavoriteIcon from '../FavoriteIcon';
+import MarketplaceAppCardLink from '../MarketplaceAppCardLink';
+import MarketplaceAppIntegrationIcon from '../MarketplaceAppIntegrationIcon';
+
+interface Props extends MarketplaceAppPreview {
+  onInfoClick: (event: MouseEvent) => void;
+  isFavorite: boolean;
+  onFavoriteClick: () => void;
+  isLoading: boolean;
+  onAppClick: (event: MouseEvent, id: string) => void;
+}
+
+const FeaturedAppMobile = ({
+  id,
+  url,
+  external,
+  title,
+  logo,
+  logoDarkMode,
+  shortDescription,
+  categories,
+  onInfoClick,
+  isFavorite,
+  onFavoriteClick,
+  isLoading,
+  internalWallet,
+  onAppClick,
+}: Props) => {
+  const categoriesLabel = categories.join(', ');
+
+  const logoUrl = useColorModeValue(logo, logoDarkMode || logo);
+
+  return (
+    <LinkBox
+      borderRadius="md"
+      padding={{ base: 3, sm: '20px' }}
+      role="group"
+      background={ useColorModeValue('purple.50', 'whiteAlpha.100') }
+      mt={ 6 }
+    >
+      <Flex
+        flexDirection="row"
+        height="100%"
+        alignContent="start"
+        gap={ 4 }
+      >
+        <Flex
+          flexDirection="column"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Skeleton
+            isLoaded={ !isLoading }
+            w={{ base: '64px', sm: '96px' }}
+            h={{ base: '64px', sm: '96px' }}
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Image
+              src={ isLoading ? undefined : logoUrl }
+              alt={ `${ title } app icon` }
+              borderRadius="8px"
+            />
+          </Skeleton>
+
+          { !isLoading && (
+            <Flex
+              position={{ base: 'relative', sm: 'absolute' }}
+              right={{ base: 0, sm: '50px' }}
+              top={{ base: 0, sm: '24px' }}
+            >
+              <Link
+                fontSize={{ base: 'xs', sm: 'sm' }}
+                fontWeight="500"
+                paddingRight={{ sm: 2 }}
+                href="#"
+                onClick={ onInfoClick }
+              >
+                More info
+              </Link>
+            </Flex>
+          ) }
+        </Flex>
+
+        <Flex flexDirection="column" gap={ 2 }>
+          <Skeleton
+            isLoaded={ !isLoading }
+            fontSize={{ base: 'sm', sm: 'lg' }}
+            lineHeight={{ base: '20px', sm: '28px' }}
+            paddingRight={{ base: '25px', sm: '110px' }}
+            fontWeight="semibold"
+            fontFamily="heading"
+            display="inline-block"
+          >
+            <MarketplaceAppCardLink
+              id={ id }
+              url={ url }
+              external={ external }
+              title={ title }
+              onClick={ onAppClick }
+            />
+            <MarketplaceAppIntegrationIcon external={ external } internalWallet={ internalWallet }/>
+          </Skeleton>
+
+          <Skeleton
+            isLoaded={ !isLoading }
+            color="text_secondary"
+            fontSize="xs"
+            lineHeight="16px"
+          >
+            <span>{ categoriesLabel }</span>
+          </Skeleton>
+
+          <Skeleton
+            isLoaded={ !isLoading }
+            fontSize={{ base: 'xs', sm: 'sm' }}
+            lineHeight="20px"
+            noOfLines={ 3 }
+          >
+            { shortDescription }
+          </Skeleton>
+        </Flex>
+
+        { !isLoading && (
+          <IconButton
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            position="absolute"
+            right={{ base: 1, sm: '10px' }}
+            top={{ base: 1, sm: '18px' }}
+            aria-label="Mark as favorite"
+            title="Mark as favorite"
+            variant="ghost"
+            colorScheme="gray"
+            w={ 9 }
+            h={ 8 }
+            onClick={ onFavoriteClick }
+            icon={ <FavoriteIcon isFavorite={ isFavorite }/> }
+          />
+        ) }
+      </Flex>
+    </LinkBox>
+  );
+};
+
+export default React.memo(FeaturedAppMobile);
diff --git a/ui/marketplace/Banner/IframeBanner.tsx b/ui/marketplace/Banner/IframeBanner.tsx
new file mode 100644
index 0000000000..85d11c2698
--- /dev/null
+++ b/ui/marketplace/Banner/IframeBanner.tsx
@@ -0,0 +1,52 @@
+import { Link, Skeleton, Box } from '@chakra-ui/react';
+import React, { useCallback, useState } from 'react';
+
+import * as mixpanel from 'lib/mixpanel/index';
+
+const IframeBanner = ({ contentUrl, linkUrl }: { contentUrl: string; linkUrl: string }) => {
+  const [ isFrameLoading, setIsFrameLoading ] = useState(true);
+
+  const handleIframeLoad = useCallback(() => {
+    setIsFrameLoading(false);
+  }, []);
+
+  const handleClick = useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.PROMO_BANNER, { Source: 'Marketplace', Link: linkUrl });
+  }, [ linkUrl ]);
+
+  return (
+    <Skeleton
+      isLoaded={ !isFrameLoading }
+      position="relative"
+      h="136px"
+      w="100%"
+      borderRadius="md"
+      mb={{ base: 0, sm: 2 }}
+      mt={ 6 }
+      overflow="hidden"
+    >
+      <Link
+        href={ linkUrl }
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={ handleClick }
+        position="absolute"
+        w="100%"
+        h="100%"
+        top={ 0 }
+        left={ 0 }
+        zIndex={ 1 }
+      />
+      <Box
+        as="iframe"
+        h="100%"
+        w="100%"
+        src={ contentUrl }
+        title="Marketplace banner"
+        onLoad={ handleIframeLoad }
+      />
+    </Skeleton>
+  );
+};
+
+export default IframeBanner;
diff --git a/ui/marketplace/ContractListModal.tsx b/ui/marketplace/ContractListModal.tsx
new file mode 100644
index 0000000000..ca1b743425
--- /dev/null
+++ b/ui/marketplace/ContractListModal.tsx
@@ -0,0 +1,119 @@
+import {
+  Box, Modal, Text, ModalBody,
+  ModalCloseButton, ModalContent, ModalHeader, ModalOverlay,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import type { MarketplaceAppSecurityReport } from 'types/client/marketplace';
+import { ContractListTypes } from 'types/client/marketplace';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import { apos } from 'lib/html-entities';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import IconSvg from 'ui/shared/IconSvg';
+
+import ContractSecurityReport from './ContractSecurityReport';
+
+type Props = {
+  onClose: () => void;
+  onBack?: () => void;
+  type: ContractListTypes;
+  contracts?: MarketplaceAppSecurityReport['contractsData'];
+};
+
+const titles = {
+  [ContractListTypes.ALL]: `All app${ apos }s smart contracts`,
+  [ContractListTypes.ANALYZED]: 'Analyzed contracts',
+  [ContractListTypes.VERIFIED]: 'Verified contracts',
+};
+
+const ContractListModal = ({ onClose, onBack, type, contracts }: Props) => {
+  const isMobile = useIsMobile();
+
+  const displayedContracts = React.useMemo(() => {
+    if (!contracts) {
+      return [];
+    }
+    switch (type) {
+      default:
+      case ContractListTypes.ALL:
+        return contracts.sort((a) => a.isVerified ? -1 : 1);
+      case ContractListTypes.ANALYZED:
+        return contracts
+          .filter((contract) => Boolean(contract.solidityScanReport))
+          .sort((a, b) =>
+            (parseFloat(b.solidityScanReport?.scan_summary.score_v2 ?? '0')) - (parseFloat(a.solidityScanReport?.scan_summary.score_v2 ?? '0')),
+          );
+      case ContractListTypes.VERIFIED:
+        return contracts.filter((contract) => contract.isVerified);
+    }
+  }, [ contracts, type ]);
+
+  if (!contracts) {
+    return null;
+  }
+
+  return (
+    <Modal
+      isOpen={ Boolean(type) }
+      onClose={ onClose }
+      size={ isMobile ? 'full' : 'md' }
+      isCentered
+    >
+      <ModalOverlay/>
+      <ModalContent>
+        <ModalHeader display="flex" alignItems="center" mb={ 4 }>
+          { onBack && (
+            <IconSvg
+              name="arrows/east"
+              w={ 6 }
+              h={ 10 }
+              transform="rotate(180deg)"
+              verticalAlign="middle"
+              color="gray.400"
+              mr={ 3 }
+              cursor="pointer"
+              onClick={ onBack }
+            />
+          ) }
+          <Text fontWeight="500" textStyle="h3">
+            { titles[type] }
+          </Text>
+        </ModalHeader>
+        <ModalCloseButton/>
+        <ModalBody
+          maxH={ isMobile ? 'auto' : '352px' }
+          overflow="scroll"
+          mb={ 0 }
+          display="grid"
+          gridTemplateColumns="max-content 1fr"
+          rowGap={ 2 }
+          columnGap={ type === ContractListTypes.ANALYZED ? 4 : 0 }
+        >
+          { displayedContracts.map((contract) => (
+            <React.Fragment key={ contract.address }>
+              { type === ContractListTypes.ANALYZED && (
+                <Box gridColumn={ 1 }>
+                  <ContractSecurityReport securityReport={ contract.solidityScanReport }/>
+                </Box>
+              ) }
+              <AddressEntity
+                address={{
+                  hash: contract.address,
+                  name: contract.solidityScanReport?.contractname,
+                  is_contract: true,
+                  is_verified: contract.isVerified,
+                }}
+                noCopy
+                gridColumn={ 2 }
+                height="32px"
+              />
+            </React.Fragment>
+          )) }
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default ContractListModal;
diff --git a/ui/marketplace/ContractSecurityReport.tsx b/ui/marketplace/ContractSecurityReport.tsx
new file mode 100644
index 0000000000..a2983342d2
--- /dev/null
+++ b/ui/marketplace/ContractSecurityReport.tsx
@@ -0,0 +1,73 @@
+import { Box, Text, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, Icon } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+// This icon doesn't work properly when it is in the sprite
+// Probably because of the gradient
+// eslint-disable-next-line no-restricted-imports
+import solidityScanIcon from 'icons/brands/solidity_scan.svg';
+import * as mixpanel from 'lib/mixpanel/index';
+import type { SolidityScanReport } from 'lib/solidityScan/schema';
+import Popover from 'ui/shared/chakra/Popover';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import SolidityscanReportButton from 'ui/shared/solidityscanReport/SolidityscanReportButton';
+import SolidityscanReportDetails from 'ui/shared/solidityscanReport/SolidityscanReportDetails';
+import SolidityscanReportScore from 'ui/shared/solidityscanReport/SolidityscanReportScore';
+
+type Props = {
+  securityReport?: SolidityScanReport['scan_report'] | null;
+};
+
+const ContractSecurityReport = ({ securityReport }: Props) => {
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  const handleClick = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Security score', Source: 'Analyzed contracts popup' });
+    onToggle();
+  }, [ onToggle ]);
+
+  if (!securityReport) {
+    return null;
+  }
+
+  const url = securityReport.scanner_reference_url;
+  const {
+    score_v2: securityScore,
+    issue_severity_distribution: issueSeverityDistribution,
+  } = securityReport.scan_summary;
+
+  const totalIssues = Object.values(issueSeverityDistribution as Record<string, number>).reduce((acc, val) => acc + val, 0);
+
+  return (
+    <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
+      <PopoverTrigger>
+        <SolidityscanReportButton
+          score={ parseFloat(securityScore) }
+          onClick={ handleClick }
+          isActive={ isOpen }
+        />
+      </PopoverTrigger>
+      <PopoverContent w={{ base: '100vw', lg: '328px' }}>
+        <PopoverBody px="26px" py="20px" fontSize="sm">
+          <Box mb={ 5 }>
+            The security score was derived from evaluating the smart contracts of a protocol on the { config.chain.name } network  by { ' ' }
+            <Box>
+              <Icon as={ solidityScanIcon } mr={ 1 } w="23px" h="20px" display="inline-block" verticalAlign="middle"/>
+              <Text fontWeight={ 600 } display="inline-block">SolidityScan</Text>
+            </Box>
+          </Box>
+          <SolidityscanReportScore score={ parseFloat(securityScore) } mb={ 5 }/>
+          { issueSeverityDistribution && totalIssues > 0 && (
+            <Box mb={ 5 }>
+              <Text py="7px" variant="secondary" fontSize="xs" fontWeight={ 500 }>Threat score & vulnerabilities</Text>
+              <SolidityscanReportDetails vulnerabilities={ issueSeverityDistribution } vulnerabilitiesCount={ totalIssues }/>
+            </Box>
+          ) }
+          <LinkExternal href={ url }>View full report</LinkExternal>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default ContractSecurityReport;
diff --git a/ui/marketplace/EmptySearchResult.tsx b/ui/marketplace/EmptySearchResult.tsx
new file mode 100644
index 0000000000..b6a263fbcf
--- /dev/null
+++ b/ui/marketplace/EmptySearchResult.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { MarketplaceCategory } from 'types/client/marketplace';
+
+import config from 'configs/app';
+import { apos } from 'lib/html-entities';
+import EmptySearchResultDefault from 'ui/shared/EmptySearchResult';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+
+const feature = config.features.marketplace;
+
+type Props = {
+  favoriteApps: Array<string>;
+  selectedCategoryId?: string;
+};
+
+const EmptySearchResult = ({ favoriteApps, selectedCategoryId }: Props) => (
+  <EmptySearchResultDefault
+    text={
+      (selectedCategoryId === MarketplaceCategory.FAVORITES && !favoriteApps.length) ? (
+        <>
+          You don{ apos }t have any favorite apps.<br/>
+          Click on the <IconSvg name="heart_outline" boxSize={ 5 } mb={ -1 } color="gray.400"/> icon on the app{ apos }s card to add it to Favorites.
+        </>
+      ) : (
+        <>
+          No matching apps found.
+          { 'suggestIdeasFormUrl' in feature && (
+            <>
+              { ' ' }Have a groundbreaking idea or app suggestion?<br/>
+              <LinkExternal href={ feature.suggestIdeasFormUrl }>Share it with us</LinkExternal>
+            </>
+          ) }
+        </>
+      )
+    }
+  />
+);
+
+export default React.memo(EmptySearchResult);
diff --git a/ui/marketplace/FavoriteIcon.tsx b/ui/marketplace/FavoriteIcon.tsx
new file mode 100644
index 0000000000..f48c44f748
--- /dev/null
+++ b/ui/marketplace/FavoriteIcon.tsx
@@ -0,0 +1,24 @@
+import { useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+type Props = {
+  isFavorite: boolean;
+  color?: string;
+};
+
+const FavoriteIcon = ({ isFavorite, color }: Props) => {
+  const heartFilledColor = useColorModeValue('blue.600', 'blue.300');
+  const defaultColor = isFavorite ? heartFilledColor : (color || 'gray.400');
+
+  return (
+    <IconSvg
+      name={ isFavorite ? 'heart_filled' : 'heart_outline' }
+      color={ defaultColor }
+      boxSize={ 5 }
+    />
+  );
+};
+
+export default FavoriteIcon;
diff --git a/ui/marketplace/MarketplaceAppCard.tsx b/ui/marketplace/MarketplaceAppCard.tsx
index 19b87e7f5c..4e19994dfa 100644
--- a/ui/marketplace/MarketplaceAppCard.tsx
+++ b/ui/marketplace/MarketplaceAppCard.tsx
@@ -1,22 +1,35 @@
-import { Box, IconButton, Image, Link, LinkBox, Skeleton, useColorModeValue, Tooltip } from '@chakra-ui/react';
+import { IconButton, Image, Link, LinkBox, Skeleton, useColorModeValue, chakra, Flex } from '@chakra-ui/react';
 import type { MouseEvent } from 'react';
 import React, { useCallback } from 'react';
 
-import type { MarketplaceAppPreview } from 'types/client/marketplace';
+import type { MarketplaceAppWithSecurityReport, ContractListTypes, AppRating } from 'types/client/marketplace';
 
-import useFeatureValue from 'lib/growthbook/useFeatureValue';
-import * as mixpanel from 'lib/mixpanel/index';
-import type { IconName } from 'ui/shared/IconSvg';
-import IconSvg from 'ui/shared/IconSvg';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import isBrowser from 'lib/isBrowser';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 
+import AppSecurityReport from './AppSecurityReport';
+import FavoriteIcon from './FavoriteIcon';
 import MarketplaceAppCardLink from './MarketplaceAppCardLink';
+import MarketplaceAppGraphLinks from './MarketplaceAppGraphLinks';
+import MarketplaceAppIntegrationIcon from './MarketplaceAppIntegrationIcon';
+import Rating from './Rating/Rating';
+import type { RateFunction } from './Rating/useRatings';
 
-interface Props extends MarketplaceAppPreview {
+interface Props extends MarketplaceAppWithSecurityReport {
   onInfoClick: (id: string) => void;
   isFavorite: boolean;
   onFavoriteClick: (id: string, isFavorite: boolean) => void;
   isLoading: boolean;
-  showDisclaimer: (id: string) => void;
+  onAppClick: (event: MouseEvent, id: string) => void;
+  className?: string;
+  showContractList: (id: string, type: ContractListTypes) => void;
+  userRating?: AppRating;
+  rateApp: RateFunction;
+  isRatingSending: boolean;
+  isRatingLoading: boolean;
+  canRate: boolean | undefined;
+  graphLinks: Array<{ text: string; url: string }>;
 }
 
 const MarketplaceAppCard = ({
@@ -31,26 +44,25 @@ const MarketplaceAppCard = ({
   onInfoClick,
   isFavorite,
   onFavoriteClick,
-  isLoading: isDataLoading,
-  showDisclaimer,
+  isLoading,
   internalWallet,
+  onAppClick,
+  securityReport,
+  className,
+  showContractList,
+  rating,
+  userRating,
+  rateApp,
+  isRatingSending,
+  isRatingLoading,
+  canRate,
+  graphLinks,
 }: Props) => {
-  const { value: isExperiment, isLoading: isExperimentLoading } = useFeatureValue('marketplace_exp', false);
-  const isLoading = isDataLoading || isExperimentLoading;
-
+  const isMobile = useIsMobile();
   const categoriesLabel = categories.join(', ');
 
-  const handleClick = useCallback((event: MouseEvent) => {
-    const isShown = window.localStorage.getItem('marketplace-disclaimer-shown');
-    if (!isShown) {
-      event.preventDefault();
-      showDisclaimer(id);
-    }
-  }, [ showDisclaimer, id ]);
-
   const handleInfoClick = useCallback((event: MouseEvent) => {
     event.preventDefault();
-    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'More button', Info: id });
     onInfoClick(id);
   }, [ onInfoClick, id ]);
 
@@ -59,27 +71,10 @@ const MarketplaceAppCard = ({
   }, [ onFavoriteClick, id, isFavorite ]);
 
   const logoUrl = useColorModeValue(logo, logoDarkMode || logo);
-  const moreButtonBgGradient = `linear(to-r, ${ useColorModeValue('whiteAlpha.50', 'blackAlpha.50') }, ${ useColorModeValue('white', 'black') } 20%)`;
-
-  const [ integrationIcon, integrationIconColor, integrationText ] = React.useMemo(() => {
-    let icon: IconName = 'integration/partial';
-    let color = 'gray.400';
-    let text = 'This app opens in Blockscout without Blockscout wallet functionality. Use your external web3 wallet to connect directly to this application';
-
-    if (external) {
-      icon = 'arrows/north-east';
-      text = 'This app opens in a separate tab';
-    } else if (internalWallet) {
-      icon = 'integration/full';
-      color = 'green.500';
-      text = 'This app opens in Blockscout and your Blockscout wallet connects automatically';
-    }
-
-    return [ icon, color, text ];
-  }, [ external, internalWallet ]);
 
   return (
     <LinkBox
+      className={ className }
       _hover={{
         boxShadow: isLoading ? 'none' : 'md',
       }}
@@ -87,167 +82,161 @@ const MarketplaceAppCard = ({
         boxShadow: isLoading ? 'none' : 'md',
       }}
       borderRadius="md"
-      height="100%"
-      padding={{ base: 3, sm: '20px' }}
+      padding={{ base: 3, md: '20px' }}
       border="1px"
       borderColor={ useColorModeValue('gray.200', 'gray.600') }
       role="group"
     >
-      <Box
-        display={{ base: 'grid', sm: isExperiment ? 'flex' : 'block' }}
-        flexDirection={ isExperiment ? 'column' : undefined }
-        gridTemplateColumns={{ base: '64px 1fr', sm: '1fr' }}
-        gridTemplateRows={{ base: 'none', sm: 'none' }}
-        gridRowGap={{ base: 2, sm: 0 }}
-        gridColumnGap={{ base: 4, sm: 0 }}
+      <Flex
+        flexDirection="column"
         height="100%"
-        alignContent={ isExperiment ? 'start' : undefined }
+        alignContent="start"
+        gap={ 2 }
       >
-        <Skeleton
-          isLoaded={ !isLoading }
-          gridRow={{ base: '1 / 4', sm: 'auto' }}
-          marginBottom={ 4 }
-          w={{ base: '64px', sm: '96px' }}
-          h={{ base: '64px', sm: '96px' }}
-          display="flex"
-          alignItems="center"
-          justifyContent="center"
+        <Flex
+          display={{ base: 'flex', md: 'contents' }}
+          gap={ 4 }
         >
-          <Image
-            src={ isLoading ? undefined : logoUrl }
-            alt={ `${ title } app icon` }
-            borderRadius="8px"
-          />
-        </Skeleton>
-
-        <Skeleton
-          isLoaded={ !isLoading }
-          gridColumn={{ base: 2, sm: 'auto' }}
-          as="h3"
-          marginBottom={{ base: 0, sm: 2 }}
-          fontSize={{ base: 'sm', sm: 'lg' }}
-          fontWeight="semibold"
-          fontFamily="heading"
-          display="inline-block"
-        >
-          <MarketplaceAppCardLink
-            id={ id }
-            url={ url }
-            external={ external }
-            title={ title }
-            onClick={ handleClick }
-          />
-          { isExperiment && (
-            <Tooltip
-              label={ integrationText }
-              textAlign="center"
-              padding={ 2 }
-              openDelay={ 300 }
-              maxW={ 400 }
+          <Skeleton
+            isLoaded={ !isLoading }
+            w={{ base: '64px', md: '96px' }}
+            h={{ base: '64px', md: '96px' }}
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            mb={{ base: 0, md: 2 }}
+          >
+            <Image
+              src={ isLoading ? undefined : logoUrl }
+              alt={ `${ title } app icon` }
+              borderRadius="8px"
+            />
+          </Skeleton>
+
+          <Flex
+            display={{ base: 'flex', md: 'contents' }}
+            flexDirection="column"
+            gap={ 2 }
+            pt={ 1 }
+          >
+            <Skeleton
+              isLoaded={ !isLoading }
+              paddingRight={{ base: '40px', md: 0 }}
+              display="inline-block"
             >
-              <IconSvg
-                name={ integrationIcon }
-                boxSize={ 5 }
-                color={ integrationIconColor }
-                position="relative"
-                cursor="pointer"
+              <MarketplaceAppCardLink
+                id={ id }
+                url={ url }
+                external={ external }
+                title={ title }
+                onClick={ onAppClick }
+                fontWeight="semibold"
+                fontFamily="heading"
+                fontSize={{ base: 'sm', md: 'lg' }}
+                lineHeight={{ base: '20px', md: '28px' }}
+              />
+              <MarketplaceAppIntegrationIcon external={ external } internalWallet={ internalWallet }/>
+              <MarketplaceAppGraphLinks
+                links={ graphLinks }
+                ml={ 2 }
                 verticalAlign="middle"
-                marginBottom={ 1 }
+                mb={{ base: 0, md: 1 }}
               />
-            </Tooltip>
-          ) }
-        </Skeleton>
+            </Skeleton>
 
-        <Skeleton
-          isLoaded={ !isLoading }
-          marginBottom={{ base: 0, sm: 2 }}
-          color="text_secondary"
-          fontSize="xs"
-        >
-          <span>{ categoriesLabel }</span>
-        </Skeleton>
+            <Skeleton
+              isLoaded={ !isLoading }
+              color="text_secondary"
+              fontSize="xs"
+              lineHeight="16px"
+            >
+              <span>{ categoriesLabel }</span>
+            </Skeleton>
+          </Flex>
+        </Flex>
 
         <Skeleton
           isLoaded={ !isLoading }
-          fontSize={{ base: 'xs', sm: 'sm' }}
+          fontSize="sm"
           lineHeight="20px"
-          noOfLines={ isExperiment ? 3 : 4 }
+          noOfLines={{ base: 2, md: 3 }}
         >
           { shortDescription }
         </Skeleton>
 
         { !isLoading && (
-          isExperiment ? (
-            <Box
-              display="flex"
-              position={{ base: 'absolute', sm: 'relative' }}
-              bottom={{ base: 3, sm: 0 }}
-              left={{ base: 3, sm: 0 }}
-              marginTop={{ base: 0, sm: 'auto' }}
-              paddingTop={{ base: 0, sm: 4 }}
+          <Flex
+            alignItems="center"
+            justifyContent="space-between"
+            marginTop="auto"
+          >
+            <Link
+              fontSize="sm"
+              fontWeight="500"
+              paddingRight={{ md: 2 }}
+              href="#"
+              onClick={ handleInfoClick }
             >
-              <Link
-                fontSize={{ base: 'xs', sm: 'sm' }}
-                paddingRight={{ sm: 2 }}
-                href="#"
-                onClick={ handleInfoClick }
-              >
-                More info
-              </Link>
-            </Box>
-          ) : (
-            <Box
-              position="absolute"
-              right={{ base: 3, sm: '20px' }}
-              bottom={{ base: 3, sm: '20px' }}
-              paddingLeft={ 8 }
-              bgGradient={ moreButtonBgGradient }
-            >
-              <Link
-                fontSize={{ base: 'xs', sm: 'sm' }}
-                display="flex"
-                alignItems="center"
-                paddingRight={{ sm: 2 }}
-                maxW="100%"
-                overflow="hidden"
-                href="#"
-                onClick={ handleInfoClick }
-              >
-              More
-
-                <IconSvg
-                  name="arrows/north-east"
-                  marginLeft={ 1 }
-                  boxSize={ 4 }
-                />
-              </Link>
-            </Box>
-          )
+              More info
+            </Link>
+            <Flex alignItems="center">
+              <Rating
+                appId={ id }
+                rating={ rating }
+                userRating={ userRating }
+                rate={ rateApp }
+                isSending={ isRatingSending }
+                isLoading={ isRatingLoading }
+                canRate={ canRate }
+                source="Discovery"
+              />
+              <IconButton
+                aria-label="Mark as favorite"
+                title="Mark as favorite"
+                variant="ghost"
+                colorScheme="gray"
+                w={{ base: 6, md: '30px' }}
+                h={{ base: 6, md: '30px' }}
+                onClick={ handleFavoriteClick }
+                icon={ <FavoriteIcon isFavorite={ isFavorite }/> }
+                ml={ 2 }
+              />
+              <CopyToClipboard
+                text={ isBrowser() ? window.location.origin + `/apps/${ id }` : '' }
+                icon="share"
+                size={ 4 }
+                variant="ghost"
+                colorScheme="gray"
+                w={{ base: 6, md: '30px' }}
+                h={{ base: 6, md: '30px' }}
+                color="gray.400"
+                _hover={{ color: 'gray.400' }}
+                ml={{ base: 1, md: 0 }}
+                display="inline-flex"
+                borderRadius="base"
+              />
+            </Flex>
+          </Flex>
         ) }
 
-        { !isLoading && (
-          <IconButton
-            display={{ base: 'block', sm: isFavorite || isExperiment ? 'block' : 'none' }}
-            _groupHover={{ display: 'block' }}
+        { securityReport && (
+          <AppSecurityReport
+            id={ id }
+            securityReport={ securityReport }
+            showContractList={ showContractList }
+            isLoading={ isLoading }
+            source="Discovery view"
+            popoverPlacement={ isMobile ? 'bottom-end' : 'left' }
             position="absolute"
-            right={{ base: 3, sm: '10px' }}
-            top={{ base: 3, sm: '14px' }}
-            aria-label="Mark as favorite"
-            title="Mark as favorite"
-            variant="ghost"
-            colorScheme="gray"
-            w={ 9 }
-            h={ 8 }
-            onClick={ handleFavoriteClick }
-            icon={ isFavorite ?
-              <IconSvg name="star_filled" w={ 4 } h={ 4 } color="yellow.400"/> :
-              <IconSvg name="star_outline" w={ 4 } h={ 4 } color="gray.300"/>
-            }
+            right={{ base: 3, md: 5 }}
+            top={{ base: '10px', md: 5 }}
+            border={ 0 }
+            padding={ 0 }
           />
         ) }
-      </Box>
+      </Flex>
     </LinkBox>
   );
 };
 
-export default React.memo(MarketplaceAppCard);
+export default React.memo(chakra(MarketplaceAppCard));
diff --git a/ui/marketplace/MarketplaceAppCardLink.tsx b/ui/marketplace/MarketplaceAppCardLink.tsx
index 907a0db8c1..090add8137 100644
--- a/ui/marketplace/MarketplaceAppCardLink.tsx
+++ b/ui/marketplace/MarketplaceAppCardLink.tsx
@@ -1,4 +1,4 @@
-import { LinkOverlay } from '@chakra-ui/react';
+import { LinkOverlay, chakra } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import React from 'react';
 import type { MouseEvent } from 'react';
@@ -8,21 +8,26 @@ type Props = {
   url: string;
   external?: boolean;
   title: string;
-  onClick?: (event: MouseEvent) => void;
-}
+  onClick?: (event: MouseEvent, id: string) => void;
+  className?: string;
+};
+
+const MarketplaceAppCardLink = ({ url, external, id, title, onClick, className }: Props) => {
+  const handleClick = React.useCallback((event: MouseEvent) => {
+    onClick?.(event, id);
+  }, [ onClick, id ]);
 
-const MarketplaceAppCardLink = ({ url, external, id, title, onClick }: Props) => {
   return external ? (
-    <LinkOverlay href={ url } isExternal={ true } marginRight={ 2 }>
+    <LinkOverlay href={ url } isExternal={ true } marginRight={ 2 } className={ className }>
       { title }
     </LinkOverlay>
   ) : (
     <NextLink href={{ pathname: '/apps/[id]', query: { id } }} passHref legacyBehavior>
-      <LinkOverlay onClick={ onClick } marginRight={ 2 }>
+      <LinkOverlay onClick={ handleClick } marginRight={ 2 } className={ className }>
         { title }
       </LinkOverlay>
     </NextLink>
   );
 };
 
-export default MarketplaceAppCardLink;
+export default chakra(MarketplaceAppCardLink);
diff --git a/ui/marketplace/MarketplaceAppGraphLinks.tsx b/ui/marketplace/MarketplaceAppGraphLinks.tsx
new file mode 100644
index 0000000000..3b2a98d595
--- /dev/null
+++ b/ui/marketplace/MarketplaceAppGraphLinks.tsx
@@ -0,0 +1,58 @@
+import {
+  Text,
+  PopoverTrigger,
+  PopoverBody,
+  PopoverContent,
+  chakra,
+  Box,
+  VStack,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import Popover from 'ui/shared/chakra/Popover';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+
+interface Props {
+  className?: string;
+  links?: Array<{ title: string; url: string }>;
+}
+
+const MarketplaceAppGraphLinks = ({ className, links }: Props) => {
+  const isMobile = useIsMobile();
+
+  const handleButtonClick = React.useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+  }, []);
+
+  if (!links || links.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box position="relative" className={ className } display="inline-flex" alignItems="center" height={ 7 } onClick={ handleButtonClick }>
+      <Popover
+        placement={ isMobile ? 'bottom-end' : 'bottom' }
+        isLazy
+        trigger="hover"
+      >
+        <PopoverTrigger>
+          <IconSvg name="brands/graph" boxSize={ 5 } onClick={ handleButtonClick }/>
+        </PopoverTrigger>
+        <PopoverContent w="260px">
+          <PopoverBody fontSize="sm">
+            <VStack gap={ 4 } align="start">
+              <Text>{ `This dapp uses ${ links.length > 1 ? 'several subgraphs' : 'a subgraph' } powered by The Graph` }</Text>
+              { links.map(link => (
+                <LinkExternal key={ link.url } href={ link.url }>{ link.title }</LinkExternal>
+              )) }
+            </VStack>
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
+    </Box>
+  );
+};
+
+export default React.memo(chakra(MarketplaceAppGraphLinks));
diff --git a/ui/marketplace/MarketplaceAppInfo.pw.tsx b/ui/marketplace/MarketplaceAppInfo.pw.tsx
new file mode 100644
index 0000000000..1d15158a03
--- /dev/null
+++ b/ui/marketplace/MarketplaceAppInfo.pw.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { apps as appsMock } from 'mocks/apps/apps';
+import { test, expect, devices } from 'playwright/lib';
+
+import MarketplaceAppInfo from './MarketplaceAppInfo';
+
+test('base view +@dark-mode', async({ render, page }) => {
+  await render(<MarketplaceAppInfo data={ appsMock[0] }/>);
+  await page.getByText('Info').click();
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 500, height: 400 } });
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('base view', async({ render, page }) => {
+    await render(<MarketplaceAppInfo data={ appsMock[0] }/>);
+    await page.getByLabel('Show info').click();
+    await expect(page).toHaveScreenshot();
+  });
+});
diff --git a/ui/marketplace/MarketplaceAppInfo.tsx b/ui/marketplace/MarketplaceAppInfo.tsx
new file mode 100644
index 0000000000..107186017c
--- /dev/null
+++ b/ui/marketplace/MarketplaceAppInfo.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import type { MarketplaceAppOverview } from 'types/client/marketplace';
+
+import InfoButton from 'ui/shared/InfoButton';
+
+import Content from './MarketplaceAppInfo/Content';
+
+interface Props {
+  data: MarketplaceAppOverview | undefined;
+}
+
+const MarketplaceAppInfo = ({ data }: Props) => {
+  return (
+    <InfoButton>
+      <Content data={ data }/>
+    </InfoButton>
+  );
+};
+
+export default React.memo(MarketplaceAppInfo);
diff --git a/ui/marketplace/MarketplaceAppInfo/Content.tsx b/ui/marketplace/MarketplaceAppInfo/Content.tsx
new file mode 100644
index 0000000000..778d421237
--- /dev/null
+++ b/ui/marketplace/MarketplaceAppInfo/Content.tsx
@@ -0,0 +1,53 @@
+import { Flex, Text, Grid } from '@chakra-ui/react';
+import React from 'react';
+
+import type { MarketplaceAppOverview } from 'types/client/marketplace';
+
+import SocialLink from './SocialLink';
+import type { Props as SocialLinkProps } from './SocialLink';
+import WebsiteLink from './WebsiteLink';
+
+interface Props {
+  data: MarketplaceAppOverview | undefined;
+}
+
+const SOCIAL_LINKS: Array<Omit<SocialLinkProps, 'href'>> = [
+  { field: 'github', icon: 'social/github_filled', title: 'Github' },
+  { field: 'twitter', icon: 'social/twitter_filled', title: 'X (ex-Twitter)' },
+  { field: 'telegram', icon: 'social/telegram_filled', title: 'Telegram' },
+  { field: 'discord', icon: 'social/discord_filled', title: 'Discord' },
+];
+
+const Content = ({ data }: Props) => {
+  const socialLinks: Array<SocialLinkProps> = [];
+  SOCIAL_LINKS.forEach((link) => {
+    const href = data?.[link.field];
+    if (href) {
+      if (Array.isArray(href)) {
+        href.forEach((href) => socialLinks.push({ ...link, href }));
+      } else {
+        socialLinks.push({ ...link, href });
+      }
+    }
+  });
+
+  return (
+    <Flex fontSize="sm" flexDir="column" rowGap={ 5 }>
+      <div>
+        <Text variant="secondary" fontSize="xs">Project info</Text>
+        <Text fontSize="sm" mt={ 3 }>{ data?.shortDescription }</Text>
+        <WebsiteLink url={ data?.site }/>
+      </div>
+      { socialLinks.length > 0 && (
+        <div>
+          <Text variant="secondary" fontSize="xs">Links</Text>
+          <Grid templateColumns={{ base: 'repeat(2, 1fr)', lg: 'repeat(3, 1fr)' }} columnGap={ 4 } rowGap={ 3 } mt={ 3 }>
+            { socialLinks.map((link, index) => <SocialLink key={ index } { ...link }/>) }
+          </Grid>
+        </div>
+      ) }
+    </Flex>
+  );
+};
+
+export default Content;
diff --git a/ui/marketplace/MarketplaceAppInfo/SocialLink.tsx b/ui/marketplace/MarketplaceAppInfo/SocialLink.tsx
new file mode 100644
index 0000000000..da3464f6d6
--- /dev/null
+++ b/ui/marketplace/MarketplaceAppInfo/SocialLink.tsx
@@ -0,0 +1,32 @@
+import { Link } from '@chakra-ui/react';
+import React from 'react';
+
+import type { MarketplaceAppSocialInfo } from 'types/client/marketplace';
+
+import type { IconName } from 'ui/shared/IconSvg';
+import IconSvg from 'ui/shared/IconSvg';
+
+export interface Props {
+  field: keyof MarketplaceAppSocialInfo;
+  icon: IconName;
+  title: string;
+  href?: string;
+}
+
+const SocialLink = ({ href, icon, title }: Props) => {
+  return (
+    <Link
+      href={ href }
+      aria-label={ title }
+      title={ title }
+      target="_blank"
+      display="inline-flex"
+      alignItems="center"
+    >
+      <IconSvg name={ icon } boxSize={ 5 } mr={ 2 } color="text_secondary"/>
+      <span>{ title }</span>
+    </Link>
+  );
+};
+
+export default SocialLink;
diff --git a/ui/marketplace/MarketplaceAppInfo/WebsiteLink.tsx b/ui/marketplace/MarketplaceAppInfo/WebsiteLink.tsx
new file mode 100644
index 0000000000..2a3dea9cca
--- /dev/null
+++ b/ui/marketplace/MarketplaceAppInfo/WebsiteLink.tsx
@@ -0,0 +1,36 @@
+import { Link } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props {
+  url?: string | undefined;
+}
+
+const WebsiteLink = ({ url }: Props) => {
+  if (!url) {
+    return null;
+  }
+
+  function getHostname(url: string) {
+    try {
+      return new URL(url).hostname;
+    } catch (err) {}
+  }
+
+  return (
+    <Link
+      href={ url }
+      target="_blank"
+      display="inline-flex"
+      alignItems="center"
+      columnGap={ 1 }
+      mt={ 3 }
+    >
+      <IconSvg name="link" boxSize={ 5 } color="text_secondary"/>
+      <span>{ getHostname(url) }</span>
+    </Link>
+  );
+};
+
+export default WebsiteLink;
diff --git a/ui/marketplace/MarketplaceAppIntegrationIcon.tsx b/ui/marketplace/MarketplaceAppIntegrationIcon.tsx
new file mode 100644
index 0000000000..6011eec96f
--- /dev/null
+++ b/ui/marketplace/MarketplaceAppIntegrationIcon.tsx
@@ -0,0 +1,54 @@
+import { Tooltip } from '@chakra-ui/react';
+import React from 'react';
+
+import type { IconName } from 'ui/shared/IconSvg';
+import IconSvg from 'ui/shared/IconSvg';
+
+type Props = {
+  internalWallet: boolean | undefined;
+  external: boolean | undefined;
+};
+
+const MarketplaceAppIntegrationIcon = ({ external, internalWallet }: Props) => {
+  const [ icon, iconColor, text, boxSize ] = React.useMemo(() => {
+    let icon: IconName = 'integration/partial';
+    let color = 'gray.400';
+    let text = 'This app opens in Blockscout without Blockscout wallet functionality. Use your external web3 wallet to connect directly to this application';
+    let boxSize = 5;
+
+    if (external) {
+      icon = 'link_external';
+      color = 'icon_link_external';
+      text = 'This app opens in a separate tab';
+      boxSize = 4;
+    } else if (internalWallet) {
+      icon = 'integration/full';
+      color = 'green.500';
+      text = 'This app opens in Blockscout and your Blockscout wallet connects automatically';
+    }
+
+    return [ icon, color, text, boxSize ];
+  }, [ external, internalWallet ]);
+
+  return (
+    <Tooltip
+      label={ text }
+      textAlign="center"
+      padding={ 2 }
+      openDelay={ 300 }
+      maxW={{ base: 'calc(100vw - 8px)', lg: '400px' }}
+    >
+      <IconSvg
+        name={ icon }
+        boxSize={ boxSize }
+        color={ iconColor }
+        position="relative"
+        cursor="pointer"
+        verticalAlign="middle"
+        mb={{ base: 0, md: 1 }}
+      />
+    </Tooltip>
+  );
+};
+
+export default MarketplaceAppIntegrationIcon;
diff --git a/ui/marketplace/MarketplaceAppModal.pw.tsx b/ui/marketplace/MarketplaceAppModal.pw.tsx
new file mode 100644
index 0000000000..1d8da4d224
--- /dev/null
+++ b/ui/marketplace/MarketplaceAppModal.pw.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import type { MarketplaceAppWithSecurityReport } from 'types/client/marketplace';
+
+import { apps as appsMock } from 'mocks/apps/apps';
+import { securityReports as securityReportsMock } from 'mocks/apps/securityReports';
+import type { TestFnArgs } from 'playwright/lib';
+import { test, expect, devices } from 'playwright/lib';
+
+import MarketplaceAppModal from './MarketplaceAppModal';
+
+const props = {
+  onClose: () => {},
+  onFavoriteClick: () => {},
+  showContractList: () => {},
+  data: {
+    ...appsMock[0],
+    securityReport: securityReportsMock[0].chainsData['1'],
+    rating: {
+      recordId: 'test',
+      value: 4.3,
+    },
+  } as MarketplaceAppWithSecurityReport,
+  isFavorite: false,
+  userRating: undefined,
+  rateApp: () => {},
+  isRatingSending: false,
+  isRatingLoading: false,
+  canRate: undefined,
+};
+
+const testFn = async({ render, page, mockAssetResponse, mockEnvs }: TestFnArgs) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY', 'test' ],
+    [ 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID', 'test' ],
+  ]);
+  await mockAssetResponse(appsMock[0].logo, './playwright/mocks/image_s.jpg');
+  await render(<MarketplaceAppModal { ...props }/>);
+  await page.getByText('Launch app').focus();
+  await expect(page).toHaveScreenshot();
+};
+
+test('base view +@dark-mode', testFn);
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+  test('base view', testFn);
+});
diff --git a/ui/marketplace/MarketplaceAppModal.tsx b/ui/marketplace/MarketplaceAppModal.tsx
index d997621f8a..e5f31a576e 100644
--- a/ui/marketplace/MarketplaceAppModal.tsx
+++ b/ui/marketplace/MarketplaceAppModal.tsx
@@ -1,32 +1,61 @@
 import {
-  Box, Flex, Heading, IconButton, Image, Link, List, Modal, ModalBody,
-  ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Tag, Text, useColorModeValue,
+  Box, Flex, Heading, IconButton, Image, Link, Modal, ModalBody,
+  ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, Tag, Text, useColorModeValue,
 } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 
-import type { MarketplaceAppOverview } from 'types/client/marketplace';
+import type { MarketplaceAppWithSecurityReport, AppRating } from 'types/client/marketplace';
+import { ContractListTypes } from 'types/client/marketplace';
 
+import config from 'configs/app';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { nbsp } from 'lib/html-entities';
+import isBrowser from 'lib/isBrowser';
+import * as mixpanel from 'lib/mixpanel/index';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
 
+import AppSecurityReport from './AppSecurityReport';
+import FavoriteIcon from './FavoriteIcon';
+import MarketplaceAppGraphLinks from './MarketplaceAppGraphLinks';
+import MarketplaceAppIntegrationIcon from './MarketplaceAppIntegrationIcon';
 import MarketplaceAppModalLink from './MarketplaceAppModalLink';
+import Rating from './Rating/Rating';
+import type { RateFunction } from './Rating/useRatings';
+
+const feature = config.features.marketplace;
+const isRatingEnabled = feature.isEnabled && feature.rating;
 
 type Props = {
   onClose: () => void;
   isFavorite: boolean;
-  onFavoriteClick: (id: string, isFavorite: boolean) => void;
-  data: MarketplaceAppOverview;
-}
+  onFavoriteClick: (id: string, isFavorite: boolean, source: 'App modal') => void;
+  data: MarketplaceAppWithSecurityReport;
+  showContractList: (id: string, type: ContractListTypes, hasPreviousStep: boolean) => void;
+  userRating?: AppRating;
+  rateApp: RateFunction;
+  isRatingSending: boolean;
+  isRatingLoading: boolean;
+  canRate: boolean | undefined;
+  graphLinks?: Array<{ text: string; url: string }>;
+};
 
 const MarketplaceAppModal = ({
   onClose,
   isFavorite,
   onFavoriteClick,
   data,
+  showContractList: showContractListProp,
+  userRating,
+  rateApp,
+  isRatingSending,
+  isRatingLoading,
+  canRate,
+  graphLinks,
 }: Props) => {
   const {
+    id,
     title,
     url,
     external,
@@ -36,33 +65,63 @@ const MarketplaceAppModal = ({
     github,
     telegram,
     twitter,
+    discord,
     logo,
     logoDarkMode,
     categories,
+    securityReport,
+    rating,
+    internalWallet,
   } = data;
 
   const socialLinks = [
     telegram ? {
-      icon: 'social/telega' as IconName,
+      icon: 'social/telegram_filled' as IconName,
       url: telegram,
     } : null,
     twitter ? {
-      icon: 'social/tweet' as IconName,
+      icon: 'social/twitter_filled' as IconName,
       url: twitter,
     } : null,
-    github ? {
-      icon: 'social/git' as IconName,
-      url: github,
+    discord ? {
+      icon: 'social/discord_filled' as IconName,
+      url: discord,
     } : null,
   ].filter(Boolean);
 
+  if (github) {
+    if (Array.isArray(github)) {
+      github.forEach((url) => socialLinks.push({ icon: 'social/github_filled', url }));
+    } else {
+      socialLinks.push({ icon: 'social/github_filled', url: github });
+    }
+  }
+
   const handleFavoriteClick = useCallback(() => {
-    onFavoriteClick(data.id, isFavorite);
-  }, [ onFavoriteClick, data.id, isFavorite ]);
+    onFavoriteClick(id, isFavorite, 'App modal');
+  }, [ onFavoriteClick, id, isFavorite ]);
+
+  const showContractList = useCallback((id: string, type: ContractListTypes) => {
+    onClose();
+    showContractListProp(id, type, true);
+  }, [ onClose, showContractListProp ]);
+
+  const showAllContracts = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Total contracts', Info: id, Source: 'App modal' });
+    showContractList(id, ContractListTypes.ALL);
+  }, [ showContractList, id ]);
 
   const isMobile = useIsMobile();
   const logoUrl = useColorModeValue(logo, logoDarkMode || logo);
 
+  function getHostname(url: string | undefined) {
+    try {
+      return new URL(url || '').hostname;
+    } catch (err) {}
+  }
+
+  const iconColor = useColorModeValue('blue.600', 'gray.400');
+
   return (
     <Modal
       isOpen={ Boolean(data.id) }
@@ -73,166 +132,220 @@ const MarketplaceAppModal = ({
       <ModalOverlay/>
 
       <ModalContent>
-        <ModalHeader
+        <Box
           display="grid"
           gridTemplateColumns={{ base: 'auto 1fr' }}
-          paddingRight={{ sm: 12 }}
+          paddingRight={{ md: 12 }}
+          marginBottom={{ base: 6, md: 8 }}
         >
           <Flex
             alignItems="center"
             justifyContent="center"
-            w={{ base: '72px', sm: '144px' }}
-            h={{ base: '72px', sm: '144px' }}
-            marginRight={{ base: 6, sm: 8 }}
-            gridRow={{ base: '1 / 3', sm: '1 / 4' }}
+            w={{ base: '72px', md: '144px' }}
+            h={{ base: '72px', md: '144px' }}
+            marginRight={{ base: 6, md: 8 }}
+            gridRow={{ base: '1 / 3', md: '1 / 5' }}
           >
             <Image
               src={ logoUrl }
               alt={ `${ title } app icon` }
+              borderRadius="md"
             />
           </Flex>
 
-          <Heading
-            as="h2"
-            gridColumn={ 2 }
-            fontSize={{ base: '2xl', sm: '3xl' }}
-            fontWeight="medium"
-            lineHeight={ 1 }
-            color="blue.600"
-          >
-            { title }
-          </Heading>
+          <Flex alignItems="center" mb={{ md: 2 }} gridColumn={ 2 }>
+            <Heading
+              as="h2"
+              fontSize={{ base: '2xl', md: '32px' }}
+              fontWeight="medium"
+              lineHeight={{ md: 10 }}
+              mr={ 2 }
+            >
+              { title }
+            </Heading>
+            <MarketplaceAppIntegrationIcon external={ external } internalWallet={ internalWallet }/>
+            <MarketplaceAppGraphLinks links={ graphLinks } ml={ 2 }/>
+          </Flex>
 
           <Text
             variant="secondary"
             gridColumn={ 2 }
-            fontSize="sm"
+            fontSize={{ base: 'sm', md: 'md' }}
             fontWeight="normal"
-            lineHeight={ 1 }
+            lineHeight={{ md: 6 }}
           >
             By{ nbsp }{ author }
           </Text>
 
+          { isRatingEnabled && (
+            <Box
+              gridColumn={{ base: '1 / 3', md: 2 }}
+              marginTop={{ base: 6, md: 3 }}
+              py={{ base: 0, md: 1.5 }}
+              width="fit-content"
+            >
+              <Rating
+                appId={ id }
+                rating={ rating }
+                userRating={ userRating }
+                rate={ rateApp }
+                isSending={ isRatingSending }
+                isLoading={ isRatingLoading }
+                fullView
+                canRate={ canRate }
+                source="App modal"
+              />
+            </Box>
+          ) }
+
           <Box
-            gridColumn={{ base: '1 / 3', sm: 2 }}
-            marginTop={{ base: 6, sm: 0 }}
+            gridColumn={{ base: '1 / 3', md: 2 }}
+            marginTop={{ base: 6, md: 3 }}
           >
-            <Box display="flex">
-              <MarketplaceAppModalLink
-                id={ data.id }
-                url={ url }
-                external={ external }
-                title={ title }
-              />
+            <Flex flexWrap="wrap" gap={ 6 }>
+              <Flex width={{ base: '100%', md: 'auto' }}>
+                <MarketplaceAppModalLink
+                  id={ data.id }
+                  url={ url }
+                  external={ external }
+                  title={ title }
+                />
 
-              <IconButton
-                aria-label="Mark as favorite"
-                title="Mark as favorite"
-                variant="outline"
-                colorScheme="gray"
-                w={ 9 }
-                h={ 8 }
-                onClick={ handleFavoriteClick }
-                icon={ isFavorite ?
-                  <IconSvg name="star_filled" w={ 4 } h={ 4 } color="yellow.400"/> :
-                  <IconSvg name="star_outline" w={ 4 } h={ 4 } color="gray.300"/> }
-              />
-            </Box>
+                <IconButton
+                  aria-label="Mark as favorite"
+                  title="Mark as favorite"
+                  variant="outline"
+                  colorScheme="gray"
+                  w={ 9 }
+                  h={ 8 }
+                  flexShrink={ 0 }
+                  onClick={ handleFavoriteClick }
+                  icon={ <FavoriteIcon isFavorite={ isFavorite } color={ iconColor }/> }
+                />
+
+                <CopyToClipboard
+                  text={ isBrowser() ? window.location.origin + `/apps/${ id }` : '' }
+                  icon="share"
+                  size={ 4 }
+                  variant="outline"
+                  colorScheme="gray"
+                  w={ 9 }
+                  h={ 8 }
+                  color={ iconColor }
+                  _hover={{ color: iconColor }}
+                  display="inline-flex"
+                  borderRadius="base"
+                />
+              </Flex>
+            </Flex>
           </Box>
-        </ModalHeader>
+        </Box>
 
         <ModalCloseButton/>
 
-        <ModalBody>
-          <Heading
-            as="h3"
-            fontSize="2xl"
-            marginBottom={ 4 }
-          >
-            Overview
-          </Heading>
+        <ModalBody mb={ 6 }>
+          { securityReport && (
+            <Flex
+              direction={{ base: 'column', md: 'row' }}
+              justifyContent={{ base: 'flex-start', md: 'space-between' }}
+              gap={ 3 }
+              fontSize="sm"
+              mb={ 6 }
+            >
+              <Flex alignItems="center" gap={ 2 } flexWrap="wrap">
+                <IconSvg name="contracts/verified_many" boxSize={ 5 } color="green.500"/>
+                <Text>Verified contracts</Text>
+                <Text fontWeight="500">
+                  { securityReport?.overallInfo.verifiedNumber ?? 0 } of { securityReport?.overallInfo.totalContractsNumber ?? 0 }
+                </Text>
+                <Link onClick={ showAllContracts } ml={ 1 }>
+                  View all contracts
+                </Link>
+              </Flex>
+              <Flex alignItems="center" gap={ 2 }>
+                <Text>Security level</Text>
+                <AppSecurityReport
+                  id={ id }
+                  securityReport={ securityReport }
+                  showContractList={ showContractList }
+                  source="App modal"
+                  popoverPlacement={ isMobile ? 'bottom-start' : 'left' }
+                />
+              </Flex>
+            </Flex>
+          ) }
+          <Text>{ description }</Text>
+        </ModalBody>
 
-          <Box marginBottom={ 2 }>
+        <ModalFooter
+          display="flex"
+          flexDirection={{ base: 'column', md: 'row' }}
+          justifyContent={{ base: 'flex-start', md: 'space-between' }}
+          alignItems={{ base: 'flex-start', md: 'center' }}
+          gap={ 3 }
+        >
+          <Flex gap={ 2 }>
             { categories.map((category) => (
               <Tag
                 colorScheme="blue"
-                marginRight={ 2 }
-                marginBottom={ 2 }
                 key={ category }
               >
                 { category }
               </Tag>
             )) }
-          </Box>
-
-          <Text>{ description }</Text>
-        </ModalBody>
-
-        <ModalFooter
-          display="flex"
-          flexDirection={{ base: 'column', sm: 'row' }}
-          alignItems={{ base: 'flex-start', sm: 'center' }}
-        >
-          { site && (
-            <Link
-              isExternal
-              href={ site }
-              display="flex"
-              alignItems="center"
-              paddingRight={{ sm: 2 }}
-              marginBottom={{ base: 3, sm: 0 }}
-              maxW="100%"
-              overflow="hidden"
-            >
-              <IconSvg
-                name="link"
-                display="inline"
-                verticalAlign="baseline"
-                boxSize="18px"
-                marginRight={ 2 }
-              />
+          </Flex>
 
-              <Text
-                color="inherit"
-                whiteSpace="nowrap"
-                overflow="hidden"
-                textOverflow="ellipsis"
+          <Flex alignItems="center" gap={ 3 }>
+            { site && (
+              <Link
+                isExternal
+                href={ site }
+                display="flex"
+                alignItems="center"
+                fontSize="sm"
               >
-                { site }
-              </Text>
-            </Link>
-          ) }
+                <IconSvg
+                  name="link"
+                  display="inline"
+                  verticalAlign="baseline"
+                  boxSize="18px"
+                  marginRight={ 2 }
+                />
 
-          { socialLinks.length > 0 && (
-            <List
-              marginLeft={{ sm: 'auto' }}
-              display="grid"
-              gridAutoFlow="column"
-              columnGap={ 2 }
-            >
-              { socialLinks.map(({ icon, url }) => (
-                <Link
-                  aria-label={ `Link to ${ url }` }
-                  title={ url }
-                  key={ url }
-                  href={ url }
-                  display="flex"
-                  alignItems="center"
-                  justifyContent="center"
-                  isExternal
-                  w={ 10 }
-                  h={ 10 }
+                <Text
+                  color="inherit"
+                  whiteSpace="nowrap"
+                  overflow="hidden"
+                  textOverflow="ellipsis"
                 >
-                  <IconSvg
-                    name={ icon }
-                    w="20px"
-                    h="20px"
-                    display="block"
-                  />
-                </Link>
-              )) }
-            </List>
-          ) }
+                  { getHostname(site) }
+                </Text>
+              </Link>
+            ) }
+
+            { socialLinks.map(({ icon, url }) => (
+              <Link
+                aria-label={ `Link to ${ url }` }
+                title={ url }
+                key={ url }
+                href={ url }
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+                isExternal
+                w={ 5 }
+                h={ 5 }
+              >
+                <IconSvg
+                  name={ icon }
+                  w="20px"
+                  h="20px"
+                  display="block"
+                  color="text_secondary"
+                />
+              </Link>
+            )) }
+          </Flex>
         </ModalFooter>
       </ModalContent>
     </Modal>
diff --git a/ui/marketplace/MarketplaceAppModalLink.tsx b/ui/marketplace/MarketplaceAppModalLink.tsx
index 4e5e9838e5..47bfa0575f 100644
--- a/ui/marketplace/MarketplaceAppModalLink.tsx
+++ b/ui/marketplace/MarketplaceAppModalLink.tsx
@@ -7,7 +7,7 @@ type Props = {
   url: string;
   external?: boolean;
   title: string;
-}
+};
 
 const MarketplaceAppModalLink = ({ url, external, id }: Props) => {
   const buttonProps = {
diff --git a/ui/marketplace/MarketplaceAppTopBar.tsx b/ui/marketplace/MarketplaceAppTopBar.tsx
new file mode 100644
index 0000000000..55b6a717da
--- /dev/null
+++ b/ui/marketplace/MarketplaceAppTopBar.tsx
@@ -0,0 +1,122 @@
+import { chakra, Flex, Tooltip, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { MarketplaceAppOverview, MarketplaceAppSecurityReport, ContractListTypes } from 'types/client/marketplace';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import { useAppContext } from 'lib/contexts/app';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import RewardsButton from 'ui/rewards/RewardsButton';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
+import UserProfileDesktop from 'ui/snippets/user/profile/UserProfileDesktop';
+import UserWalletDesktop from 'ui/snippets/user/wallet/UserWalletDesktop';
+
+import AppSecurityReport from './AppSecurityReport';
+import ContractListModal from './ContractListModal';
+import MarketplaceAppInfo from './MarketplaceAppInfo';
+import Rating from './Rating/Rating';
+import useRatings from './Rating/useRatings';
+
+type Props = {
+  appId: string;
+  data: MarketplaceAppOverview | undefined;
+  isLoading: boolean;
+  securityReport?: MarketplaceAppSecurityReport;
+};
+
+const MarketplaceAppTopBar = ({ appId, data, isLoading, securityReport }: Props) => {
+  const [ contractListType, setContractListType ] = React.useState<ContractListTypes>();
+  const appProps = useAppContext();
+  const isMobile = useIsMobile();
+
+  const { ratings, userRatings, rateApp, isRatingSending, isRatingLoading, canRate } = useRatings();
+
+  const goBackUrl = React.useMemo(() => {
+    if (appProps.referrer && appProps.referrer.includes('/apps') && !appProps.referrer.includes('/apps/')) {
+      return appProps.referrer;
+    }
+    return route({ pathname: '/apps' });
+  }, [ appProps.referrer ]);
+
+  function getHostname(url: string | undefined) {
+    try {
+      return new URL(url || '').hostname;
+    } catch (err) {}
+  }
+
+  const showContractList = React.useCallback((id: string, type: ContractListTypes) => setContractListType(type), []);
+  const hideContractList = React.useCallback(() => setContractListType(undefined), []);
+
+  return (
+    <>
+      <Flex alignItems="center" mb={{ base: 3, md: 2 }} rowGap={ 3 } columnGap={ 2 }>
+        { !isMobile && <NetworkLogo isCollapsed/> }
+        <Tooltip label="Back to dApps list">
+          <LinkInternal display="inline-flex" href={ goBackUrl } h="32px" isLoading={ isLoading } ml={ isMobile ? 0 : 4 }>
+            <IconSvg name="arrows/east" boxSize={ 6 } transform="rotate(180deg)" margin="auto" color="gray.400"/>
+          </LinkInternal>
+        </Tooltip>
+        <LinkExternal
+          href={ data?.url }
+          variant="subtle"
+          fontSize="sm"
+          lineHeight={ 5 }
+          minW={ 0 }
+          maxW={{ base: 'calc(100% - 114px)', md: 'auto' }}
+          display="flex"
+          isLoading={ isLoading }
+        >
+          <chakra.span isTruncated>
+            { getHostname(data?.url) }
+          </chakra.span>
+        </LinkExternal>
+        <Skeleton isLoaded={ !isLoading }>
+          <MarketplaceAppInfo data={ data }/>
+        </Skeleton>
+        { (securityReport || isLoading) && (
+          <AppSecurityReport
+            id={ data?.id || '' }
+            securityReport={ securityReport }
+            showContractList={ showContractList }
+            isLoading={ isLoading }
+            onlyIcon={ isMobile }
+            source="App page"
+          />
+        ) }
+        <Rating
+          appId={ appId }
+          rating={ ratings[appId] }
+          userRating={ userRatings[appId] }
+          rate={ rateApp }
+          isSending={ isRatingSending }
+          isLoading={ isRatingLoading }
+          canRate={ canRate }
+          source="App page"
+        />
+        { !isMobile && (
+          <Flex ml="auto" gap={ 2 }>
+            { config.features.rewards.isEnabled && <RewardsButton size="sm"/> }
+            {
+              (config.features.account.isEnabled && <UserProfileDesktop buttonSize="sm"/>) ||
+              (config.features.blockchainInteraction.isEnabled && <UserWalletDesktop buttonSize="sm"/>)
+            }
+          </Flex>
+        ) }
+      </Flex>
+      { contractListType && (
+        <ContractListModal
+          type={ contractListType }
+          contracts={ securityReport?.contractsData }
+          onClose={ hideContractList }
+        />
+      ) }
+    </>
+  );
+};
+
+export default MarketplaceAppTopBar;
diff --git a/ui/marketplace/MarketplaceCategoriesMenu.tsx b/ui/marketplace/MarketplaceCategoriesMenu.tsx
deleted file mode 100644
index 38e452db62..0000000000
--- a/ui/marketplace/MarketplaceCategoriesMenu.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Box, Button, Menu, MenuButton, MenuList, Skeleton } from '@chakra-ui/react';
-import React from 'react';
-
-import { MarketplaceCategory } from 'types/client/marketplace';
-
-import IconSvg from 'ui/shared/IconSvg';
-
-import MarketplaceCategoriesMenuItem from './MarketplaceCategoriesMenuItem';
-
-type Props = {
-  categories: Array<string>;
-  selectedCategoryId: string;
-  onSelect: (category: string) => void;
-  isLoading: boolean;
-}
-
-const MarketplaceCategoriesMenu = ({ selectedCategoryId, onSelect, categories, isLoading }: Props) => {
-  const options = React.useMemo(() => ([
-    MarketplaceCategory.FAVORITES,
-    MarketplaceCategory.ALL,
-    ...categories,
-  ]), [ categories ]);
-
-  if (isLoading) {
-    return (
-      <Skeleton
-        h="40px"
-        w={{ base: '100%', sm: '120px' }}
-        borderRadius="base"
-        mb={{ base: 2, sm: 0 }}
-        mr={{ base: 0, sm: 2 }}
-      />
-    );
-  }
-
-  return (
-    <Menu>
-      <MenuButton
-        as={ Button }
-        mb={{ base: 2, sm: 0 }}
-        mr={{ base: 0, sm: 2 }}
-        size="md"
-        variant="outline"
-        colorScheme="gray"
-        flexShrink={ 0 }
-      >
-        <Box
-          as="span"
-          display="flex"
-          alignItems="center"
-        >
-          { selectedCategoryId }
-          <IconSvg transform="rotate(-90deg)" ml={{ base: 'auto', sm: 1 }} name="arrows/east-mini" w={ 5 } h={ 5 }/>
-        </Box>
-      </MenuButton>
-
-      <MenuList zIndex={ 3 }>
-        { options.map((category: string) => (
-          <MarketplaceCategoriesMenuItem
-            key={ category }
-            id={ category }
-            onClick={ onSelect }
-          />
-        )) }
-      </MenuList>
-    </Menu>
-  );
-};
-
-export default React.memo(MarketplaceCategoriesMenu);
diff --git a/ui/marketplace/MarketplaceCategoriesMenuItem.tsx b/ui/marketplace/MarketplaceCategoriesMenuItem.tsx
deleted file mode 100644
index 3d9c983c9e..0000000000
--- a/ui/marketplace/MarketplaceCategoriesMenuItem.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { MenuItem } from '@chakra-ui/react';
-import React, { useCallback } from 'react';
-
-import { MarketplaceCategory } from 'types/client/marketplace';
-
-import type { IconName } from 'ui/shared/IconSvg';
-import IconSvg from 'ui/shared/IconSvg';
-
-type Props = {
-  id: string;
-  onClick: (category: string) => void;
-}
-
-const ICONS: Record<string, IconName> = {
-  [MarketplaceCategory.FAVORITES]: 'star_filled',
-};
-
-const MarketplaceCategoriesMenuItem = ({ id, onClick }: Props) => {
-  const handleSelection = useCallback(() => {
-    onClick(id);
-  }, [ id, onClick ]);
-
-  return (
-    <MenuItem
-      key={ id }
-      onClick={ handleSelection }
-      display="flex"
-      alignItems="center"
-    >
-      { id in ICONS && <IconSvg mr={ 3 } name={ ICONS[id] } w={ 4 } h={ 4 } color="blackAlpha.800"/> }
-      { id }
-    </MenuItem>
-  );
-};
-
-export default MarketplaceCategoriesMenuItem;
diff --git a/ui/marketplace/MarketplaceDisclaimerModal.tsx b/ui/marketplace/MarketplaceDisclaimerModal.tsx
index a1cffbb320..ba8cc489ec 100644
--- a/ui/marketplace/MarketplaceDisclaimerModal.tsx
+++ b/ui/marketplace/MarketplaceDisclaimerModal.tsx
@@ -8,7 +8,7 @@ type Props = {
   isOpen: boolean;
   onClose: () => void;
   appId: string;
-}
+};
 
 const MarketplaceDisclaimerModal = ({ isOpen, onClose, appId }: Props) => {
 
diff --git a/ui/marketplace/MarketplaceList.tsx b/ui/marketplace/MarketplaceList.tsx
index 0c780aadbe..7b8edd8bf2 100644
--- a/ui/marketplace/MarketplaceList.tsx
+++ b/ui/marketplace/MarketplaceList.tsx
@@ -1,71 +1,91 @@
-import { Grid } from '@chakra-ui/react';
-import React from 'react';
+import { Grid, Box } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import React, { useCallback } from 'react';
+import type { MouseEvent } from 'react';
 
-import type { MarketplaceAppPreview } from 'types/client/marketplace';
-import { MarketplaceCategory } from 'types/client/marketplace';
+import type { MarketplaceAppWithSecurityReport, ContractListTypes, AppRating } from 'types/client/marketplace';
 
-import useFeatureValue from 'lib/growthbook/useFeatureValue';
-import { apos } from 'lib/html-entities';
-import EmptySearchResult from 'ui/shared/EmptySearchResult';
-import IconSvg from 'ui/shared/IconSvg';
+import useLazyRenderedList from 'lib/hooks/useLazyRenderedList';
+import * as mixpanel from 'lib/mixpanel/index';
 
+import EmptySearchResult from './EmptySearchResult';
 import MarketplaceAppCard from './MarketplaceAppCard';
+import type { RateFunction } from './Rating/useRatings';
 
 type Props = {
-  apps: Array<MarketplaceAppPreview>;
-  onAppClick: (id: string) => void;
+  apps: Array<MarketplaceAppWithSecurityReport>;
+  showAppInfo: (id: string) => void;
   favoriteApps: Array<string>;
-  onFavoriteClick: (id: string, isFavorite: boolean) => void;
+  onFavoriteClick: (id: string, isFavorite: boolean, source: 'Discovery view') => void;
   isLoading: boolean;
-  showDisclaimer: (id: string) => void;
   selectedCategoryId?: string;
-}
+  onAppClick: (event: MouseEvent, id: string) => void;
+  showContractList: (id: string, type: ContractListTypes) => void;
+  userRatings: Record<string, AppRating>;
+  rateApp: RateFunction;
+  isRatingSending: boolean;
+  isRatingLoading: boolean;
+  canRate: boolean | undefined;
+  graphLinksQuery: UseQueryResult<Record<string, Array<{ text: string; url: string }>>, unknown>;
+};
+
+const MarketplaceList = ({
+  apps, showAppInfo, favoriteApps, onFavoriteClick, isLoading, selectedCategoryId,
+  onAppClick, showContractList, userRatings, rateApp, isRatingSending, isRatingLoading, canRate,
+  graphLinksQuery,
+}: Props) => {
+  const { cutRef, renderedItemsNum } = useLazyRenderedList(apps, !isLoading, 16);
+
+  const handleInfoClick = useCallback((id: string) => {
+    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'More button', Info: id, Source: 'Discovery view' });
+    showAppInfo(id);
+  }, [ showAppInfo ]);
 
-const MarketplaceList = ({ apps, onAppClick, favoriteApps, onFavoriteClick, isLoading, showDisclaimer, selectedCategoryId }: Props) => {
-  const { value: isExperiment } = useFeatureValue('marketplace_exp', false);
+  const handleFavoriteClick = useCallback((id: string, isFavorite: boolean) => {
+    onFavoriteClick(id, isFavorite, 'Discovery view');
+  }, [ onFavoriteClick ]);
 
   return apps.length > 0 ? (
-    <Grid
-      templateColumns={{
-        sm: 'repeat(auto-fill, minmax(178px, 1fr))',
-        lg: 'repeat(auto-fill, minmax(260px, 1fr))',
-      }}
-      autoRows="1fr"
-      gap={{ base: '16px', sm: '24px' }}
-    >
-      { apps.map((app, index) => (
-        <MarketplaceAppCard
-          key={ app.id + (isLoading ? index : '') }
-          onInfoClick={ onAppClick }
-          id={ app.id }
-          external={ app.external }
-          url={ app.url }
-          title={ app.title }
-          logo={ app.logo }
-          logoDarkMode={ app.logoDarkMode }
-          shortDescription={ app.shortDescription }
-          categories={ app.categories }
-          isFavorite={ favoriteApps.includes(app.id) }
-          onFavoriteClick={ onFavoriteClick }
-          isLoading={ isLoading }
-          showDisclaimer={ showDisclaimer }
-          internalWallet={ app.internalWallet }
-        />
-      )) }
-    </Grid>
+    <>
+      <Grid
+        templateColumns={{ md: 'repeat(auto-fill, minmax(270px, 1fr))' }}
+        autoRows="1fr"
+        gap={{ base: '16px', md: '24px' }}
+        marginTop={{ base: 0, lg: 3 }}
+      >
+        { apps.slice(0, renderedItemsNum).map((app, index) => (
+          <MarketplaceAppCard
+            key={ app.id + (isLoading ? index : '') }
+            onInfoClick={ handleInfoClick }
+            id={ app.id }
+            external={ app.external }
+            url={ app.url }
+            title={ app.title }
+            logo={ app.logo }
+            logoDarkMode={ app.logoDarkMode }
+            shortDescription={ app.shortDescription }
+            categories={ app.categories }
+            isFavorite={ favoriteApps.includes(app.id) }
+            onFavoriteClick={ handleFavoriteClick }
+            isLoading={ isLoading }
+            internalWallet={ app.internalWallet }
+            onAppClick={ onAppClick }
+            securityReport={ app.securityReport }
+            showContractList={ showContractList }
+            rating={ app.rating }
+            userRating={ userRatings[app.id] }
+            rateApp={ rateApp }
+            isRatingSending={ isRatingSending }
+            isRatingLoading={ isRatingLoading }
+            canRate={ canRate }
+            graphLinks={ graphLinksQuery.data?.[app.id] }
+          />
+        )) }
+      </Grid>
+      <Box ref={ cutRef } h={ 0 }/>
+    </>
   ) : (
-    <EmptySearchResult
-      text={
-        (selectedCategoryId === MarketplaceCategory.FAVORITES && !favoriteApps.length && isExperiment) ? (
-          <>
-            You don{ apos }t have any favorite apps.
-            Click on the <IconSvg name="star_outline" w={ 4 } h={ 4 } mb={ -0.5 }/> icon on the app{ apos }s card to add it to Favorites.
-          </>
-        ) : (
-          `Couldn${ apos }t find an app that matches your filter query.`
-        )
-      }
-    />
+    <EmptySearchResult selectedCategoryId={ selectedCategoryId } favoriteApps={ favoriteApps }/>
   );
 };
 
diff --git a/ui/marketplace/Rating/PopoverContent.tsx b/ui/marketplace/Rating/PopoverContent.tsx
new file mode 100644
index 0000000000..d86d31179d
--- /dev/null
+++ b/ui/marketplace/Rating/PopoverContent.tsx
@@ -0,0 +1,81 @@
+import { Text, Flex, Spinner } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AppRating } from 'types/client/marketplace';
+
+import type { EventTypes, EventPayload } from 'lib/mixpanel/index';
+import IconSvg from 'ui/shared/IconSvg';
+
+import Stars from './Stars';
+import type { RateFunction } from './useRatings';
+
+const ratingDescriptions = [ 'Very bad', 'Bad', 'Average', 'Good', 'Excellent' ];
+
+type Props = {
+  appId: string;
+  rating?: AppRating;
+  userRating?: AppRating;
+  rate: RateFunction;
+  isSending?: boolean;
+  source: EventPayload<EventTypes.APP_FEEDBACK>['Source'];
+};
+
+const PopoverContent = ({ appId, rating, userRating, rate, isSending, source }: Props) => {
+  const [ hovered, setHovered ] = React.useState(-1);
+
+  const filledIndex = React.useMemo(() => {
+    if (hovered >= 0) {
+      return hovered;
+    }
+    return userRating?.value ? userRating?.value - 1 : -1;
+  }, [ userRating, hovered ]);
+
+  const handleMouseOverFactory = React.useCallback((index: number) => () => {
+    setHovered(index);
+  }, []);
+
+  const handleMouseOut = React.useCallback(() => {
+    setHovered(-1);
+  }, []);
+
+  const handleRateFactory = React.useCallback((index: number) => () => {
+    rate(appId, rating?.recordId, userRating?.recordId, index + 1, source);
+  }, [ appId, rating, rate, userRating, source ]);
+
+  if (isSending) {
+    return (
+      <Flex alignItems="center">
+        <Spinner size="md"/>
+        <Text fontSize="md" ml={ 3 }>Sending your feedback</Text>
+      </Flex>
+    );
+  }
+
+  return (
+    <>
+      <Flex alignItems="center">
+        { userRating && (
+          <IconSvg name="verified" color="green.400" boxSize="30px" mr={ 1 } ml="-5px"/>
+        ) }
+        <Text fontWeight="500" fontSize="xs" lineHeight="30px" variant="secondary">
+          { userRating ? 'App is already rated by you' : 'How was your experience?' }
+        </Text>
+      </Flex>
+      <Flex alignItems="center" h="32px">
+        <Stars
+          filledIndex={ filledIndex }
+          onMouseOverFactory={ handleMouseOverFactory }
+          onMouseOut={ handleMouseOut }
+          onClickFactory={ handleRateFactory }
+        />
+        { (filledIndex >= 0) && (
+          <Text fontSize="md" ml={ 3 }>
+            { ratingDescriptions[filledIndex] }
+          </Text>
+        ) }
+      </Flex>
+    </>
+  );
+};
+
+export default PopoverContent;
diff --git a/ui/marketplace/Rating/Rating.tsx b/ui/marketplace/Rating/Rating.tsx
new file mode 100644
index 0000000000..4884460e20
--- /dev/null
+++ b/ui/marketplace/Rating/Rating.tsx
@@ -0,0 +1,87 @@
+import { Text, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, Skeleton, useOutsideClick, Box } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AppRating } from 'types/client/marketplace';
+
+import config from 'configs/app';
+import type { EventTypes, EventPayload } from 'lib/mixpanel/index';
+import Popover from 'ui/shared/chakra/Popover';
+
+import Content from './PopoverContent';
+import Stars from './Stars';
+import TriggerButton from './TriggerButton';
+import type { RateFunction } from './useRatings';
+
+const feature = config.features.marketplace;
+const isEnabled = feature.isEnabled && feature.rating;
+
+type Props = {
+  appId: string;
+  rating?: AppRating;
+  userRating?: AppRating;
+  rate: RateFunction;
+  isSending?: boolean;
+  isLoading?: boolean;
+  fullView?: boolean;
+  canRate: boolean | undefined;
+  source: EventPayload<EventTypes.APP_FEEDBACK>['Source'];
+};
+
+const Rating = ({
+  appId, rating, userRating, rate,
+  isSending, isLoading, fullView, canRate, source,
+}: Props) => {
+  const { isOpen, onToggle, onClose } = useDisclosure();
+  // have to implement this solution because popover loses focus on button click inside it (issue: https://github.com/chakra-ui/chakra-ui/issues/7359)
+  const popoverRef = React.useRef(null);
+  useOutsideClick({ ref: popoverRef, handler: onClose });
+
+  if (!isEnabled) {
+    return null;
+  }
+
+  return (
+    <Skeleton
+      display="flex"
+      alignItems="center"
+      isLoaded={ !isLoading }
+      w={ (isLoading && !fullView) ? '40px' : 'auto' }
+    >
+      { fullView && (
+        <>
+          <Stars filledIndex={ (rating?.value || 0) - 1 }/>
+          <Text fontSize="md" ml={ 2 }>{ rating?.value }</Text>
+          { rating?.count && <Text variant="secondary" fontSize="md" ml={ 1 }>({ rating?.count })</Text> }
+        </>
+      ) }
+      <Box ref={ popoverRef }>
+        <Popover isOpen={ isOpen } placement="bottom" isLazy>
+          <PopoverTrigger>
+            <TriggerButton
+              rating={ rating?.value }
+              count={ rating?.count }
+              fullView={ fullView }
+              isActive={ isOpen }
+              onClick={ onToggle }
+              canRate={ canRate }
+            />
+          </PopoverTrigger>
+          <PopoverContent w="250px" mx={ 3 }>
+            <PopoverBody p={ 4 }>
+              <Content
+                appId={ appId }
+                rating={ rating }
+                userRating={ userRating }
+                rate={ rate }
+                isSending={ isSending }
+                source={ source }
+              />
+            </PopoverBody>
+          </PopoverContent>
+        </Popover>
+      </Box>
+    </Skeleton>
+  );
+};
+
+export default Rating;
diff --git a/ui/marketplace/Rating/Stars.tsx b/ui/marketplace/Rating/Stars.tsx
new file mode 100644
index 0000000000..ca2e8d0be4
--- /dev/null
+++ b/ui/marketplace/Rating/Stars.tsx
@@ -0,0 +1,38 @@
+import { Flex, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+import type { MouseEventHandler } from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+type Props = {
+  filledIndex: number;
+  onMouseOverFactory?: (index: number) => MouseEventHandler<HTMLDivElement>;
+  onMouseOut?: () => void;
+  onClickFactory?: (index: number) => MouseEventHandler<HTMLDivElement>;
+};
+
+const Stars = ({ filledIndex, onMouseOverFactory, onMouseOut, onClickFactory }: Props) => {
+  const disabledStarColor = useColorModeValue('gray.200', 'gray.700');
+  const outlineStartColor = onMouseOverFactory ? 'gray.400' : disabledStarColor;
+  return (
+    <Flex>
+      { Array(5).fill(null).map((_, index) => (
+        <IconSvg
+          key={ index }
+          name={ filledIndex >= index ? 'star_filled' : 'star_outline' }
+          color={ filledIndex >= index ? 'yellow.400' : outlineStartColor }
+          w={ 6 } // 5 + 1 padding
+          h={ 5 }
+          pr={ 1 } // use padding intead of margin so that there are no empty spaces between stars without hover effect
+          _last={{ w: 5, pr: 0 }}
+          cursor={ onMouseOverFactory ? 'pointer' : 'default' }
+          onMouseOver={ onMouseOverFactory?.(index) }
+          onMouseOut={ onMouseOut }
+          onClick={ onClickFactory?.(index) }
+        />
+      )) }
+    </Flex>
+  );
+};
+
+export default Stars;
diff --git a/ui/marketplace/Rating/TriggerButton.tsx b/ui/marketplace/Rating/TriggerButton.tsx
new file mode 100644
index 0000000000..c94647efb8
--- /dev/null
+++ b/ui/marketplace/Rating/TriggerButton.tsx
@@ -0,0 +1,91 @@
+import { Button, chakra, useColorModeValue, Tooltip, useDisclosure, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import usePreventFocusAfterModalClosing from 'lib/hooks/usePreventFocusAfterModalClosing';
+import IconSvg from 'ui/shared/IconSvg';
+
+type Props = {
+  rating?: number;
+  count?: number;
+  fullView?: boolean;
+  isActive: boolean;
+  onClick: () => void;
+  canRate: boolean | undefined;
+};
+
+const getTooltipText = (canRate: boolean | undefined) => {
+  if (canRate === undefined) {
+    return <>Please connect your wallet to Blockscout to rate this DApp.<br/>Only wallets with 5+ transactions are eligible</>;
+  }
+  if (!canRate) {
+    return <>Brand new wallets cannot leave ratings.<br/>Please connect a wallet with 5 or more transactions on this chain</>;
+  }
+  return <>Ratings come from verified users.<br/>Click here to rate!</>;
+};
+
+const TriggerButton = (
+  { rating, count, fullView, isActive, onClick, canRate }: Props,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) => {
+  const textColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
+  const onFocusCapture = usePreventFocusAfterModalClosing();
+
+  // have to implement controlled tooltip on mobile because of the issue - https://github.com/chakra-ui/chakra-ui/issues/7107
+  const { isOpen, onToggle, onClose } = useDisclosure();
+  const isMobile = useIsMobile();
+
+  const handleClick = React.useCallback(() => {
+    if (canRate) {
+      onClick();
+    } else if (isMobile) {
+      onToggle();
+    }
+  }, [ canRate, isMobile, onToggle, onClick ]);
+
+  return (
+    <Tooltip
+      label={ getTooltipText(canRate) }
+      openDelay={ 100 }
+      textAlign="center"
+      closeOnClick={ Boolean(canRate) || isMobile }
+      isOpen={ isMobile ? isOpen : undefined }
+    >
+      <Button
+        ref={ ref }
+        size="xs"
+        variant="outline"
+        border={ 0 }
+        p={ 0 }
+        onClick={ handleClick }
+        fontSize={ fullView ? 'md' : 'sm' }
+        fontWeight={ fullView ? '400' : '500' }
+        lineHeight="21px"
+        ml={ fullView ? 3 : 0 }
+        isActive={ isActive }
+        onFocusCapture={ onFocusCapture }
+        cursor={ canRate ? 'pointer' : 'default' }
+        onMouseLeave={ isMobile ? onClose : undefined }
+      >
+        { !fullView && (
+          <IconSvg
+            name={ rating ? 'star_filled' : 'star_outline' }
+            color={ rating ? 'yellow.400' : 'gray.400' }
+            boxSize={ 5 }
+            mr={ 1 }
+          />
+        ) }
+        { (rating && !fullView) ? (
+          <chakra.span color={ textColor } transition="inherit" display="inline-flex">
+            { rating }
+            <Text variant="secondary" ml={ 1 }>({ count })</Text>
+          </chakra.span>
+        ) : (
+          'Rate it!'
+        ) }
+      </Button>
+    </Tooltip>
+  );
+};
+
+export default React.forwardRef(TriggerButton);
diff --git a/ui/marketplace/Rating/useRatings.test.tsx b/ui/marketplace/Rating/useRatings.test.tsx
new file mode 100644
index 0000000000..ee8d71695d
--- /dev/null
+++ b/ui/marketplace/Rating/useRatings.test.tsx
@@ -0,0 +1,74 @@
+import { renderHook, wrapper } from 'jest/lib';
+
+import useRatings from './useRatings';
+
+const useAccount = jest.fn();
+const useApiQuery = jest.fn();
+
+jest.mock('lib/hooks/useToast', () => jest.fn());
+jest.mock('wagmi', () => ({ useAccount: () => useAccount() }));
+jest.mock('lib/api/useApiQuery', () => () => useApiQuery());
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+it('should set canRate to true if address is defined and transactions_count is 5 or more', async() => {
+  useAccount.mockReturnValue({ address: '0x123' });
+  useApiQuery.mockReturnValue({
+    isPlaceholderData: false,
+    data: { transactions_count: 5 },
+  });
+  const { result } = renderHook(() => useRatings(), { wrapper });
+  expect(result.current.canRate).toBe(true);
+});
+
+it('should set canRate to undefined if address is undefined', async() => {
+  useAccount.mockReturnValue({ address: undefined });
+  useApiQuery.mockReturnValue({
+    isPlaceholderData: false,
+    data: { transactions_count: 5 },
+  });
+  const { result } = renderHook(() => useRatings(), { wrapper });
+  expect(result.current.canRate).toBe(undefined);
+});
+
+it('should set canRate to false if transactions_count is less than 5', async() => {
+  useAccount.mockReturnValue({ address: '0x123' });
+  useApiQuery.mockReturnValue({
+    isPlaceholderData: false,
+    data: { transactions_count: 4 },
+  });
+  const { result } = renderHook(() => useRatings(), { wrapper });
+  expect(result.current.canRate).toBe(false);
+});
+
+it('should set canRate to false if isPlaceholderData is true', async() => {
+  useAccount.mockReturnValue({ address: '0x123' });
+  useApiQuery.mockReturnValue({
+    isPlaceholderData: true,
+    data: { transactions_count: 5 },
+  });
+  const { result } = renderHook(() => useRatings(), { wrapper });
+  expect(result.current.canRate).toBe(false);
+});
+
+it('should set canRate to false if data is undefined', async() => {
+  useAccount.mockReturnValue({ address: '0x123' });
+  useApiQuery.mockReturnValue({
+    isPlaceholderData: false,
+    data: undefined,
+  });
+  const { result } = renderHook(() => useRatings());
+  expect(result.current.canRate).toBe(false);
+});
+
+it('should set canRate to false if transactions_count is undefined', async() => {
+  useAccount.mockReturnValue({ address: '0x123' });
+  useApiQuery.mockReturnValue({
+    isPlaceholderData: false,
+    data: {},
+  });
+  const { result } = renderHook(() => useRatings());
+  expect(result.current.canRate).toBe(false);
+});
diff --git a/ui/marketplace/Rating/useRatings.tsx b/ui/marketplace/Rating/useRatings.tsx
new file mode 100644
index 0000000000..663b1b3667
--- /dev/null
+++ b/ui/marketplace/Rating/useRatings.tsx
@@ -0,0 +1,194 @@
+import Airtable from 'airtable';
+import { useEffect, useState, useCallback } from 'react';
+import { useAccount } from 'wagmi';
+
+import type { AppRating } from 'types/client/marketplace';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+import useToast from 'lib/hooks/useToast';
+import type { EventTypes, EventPayload } from 'lib/mixpanel/index';
+import * as mixpanel from 'lib/mixpanel/index';
+import { ADDRESS_COUNTERS } from 'stubs/address';
+
+const MIN_TRANSACTION_COUNT = 5;
+
+const feature = config.features.marketplace;
+const airtable = (feature.isEnabled && feature.rating) ?
+  new Airtable({ apiKey: feature.rating.airtableApiKey }).base(feature.rating.airtableBaseId) :
+  undefined;
+
+export type RateFunction = (
+  appId: string,
+  appRecordId: string | undefined,
+  userRecordId: string | undefined,
+  rating: number,
+  source: EventPayload<EventTypes.APP_FEEDBACK>['Source'],
+) => void;
+
+function formatRatings(data: Airtable.Records<Airtable.FieldSet>) {
+  return data.reduce((acc: Record<string, AppRating>, record) => {
+    const fields = record.fields as { appId: string | Array<string>; rating: number | undefined; count?: number };
+    const appId = Array.isArray(fields.appId) ? fields.appId[0] : fields.appId;
+    acc[appId] = {
+      recordId: record.id,
+      value: fields.rating,
+      count: fields.count,
+    };
+    return acc;
+  }, {});
+}
+
+export default function useRatings() {
+  const { address } = useAccount();
+  const toast = useToast();
+
+  const addressCountersQuery = useApiQuery<'address_counters', { status: number }>('address_counters', {
+    pathParams: { hash: address },
+    queryOptions: {
+      enabled: Boolean(address),
+      placeholderData: ADDRESS_COUNTERS,
+      refetchOnMount: false,
+    },
+  });
+
+  const [ ratings, setRatings ] = useState<Record<string, AppRating>>({});
+  const [ userRatings, setUserRatings ] = useState<Record<string, AppRating>>({});
+  const [ isRatingLoading, setIsRatingLoading ] = useState<boolean>(false);
+  const [ isUserRatingLoading, setIsUserRatingLoading ] = useState<boolean>(false);
+  const [ isSending, setIsSending ] = useState<boolean>(false);
+  const [ canRate, setCanRate ] = useState<boolean | undefined>(undefined);
+
+  const fetchRatings = useCallback(async() => {
+    if (!airtable) {
+      return;
+    }
+    try {
+      const data = await airtable('apps_ratings').select({ fields: [ 'appId', 'rating', 'count' ] }).all();
+      const ratings = formatRatings(data);
+      setRatings(ratings);
+    } catch (error) {
+      toast({
+        status: 'error',
+        title: 'Error loading ratings',
+        description: 'Please try again later',
+      });
+    }
+  }, [ toast ]);
+
+  useEffect(() => {
+    async function fetch() {
+      setIsRatingLoading(true);
+      await fetchRatings();
+      setIsRatingLoading(false);
+    }
+    fetch();
+  }, [ fetchRatings ]);
+
+  useEffect(() => {
+    async function fetchUserRatings() {
+      setIsUserRatingLoading(true);
+      let userRatings = {} as Record<string, AppRating>;
+      if (address && airtable) {
+        try {
+          const data = await airtable('users_ratings').select({
+            filterByFormula: `address = "${ address }"`,
+            fields: [ 'appId', 'rating' ],
+          }).all();
+          userRatings = formatRatings(data);
+        } catch (error) {
+          toast({
+            status: 'error',
+            title: 'Error loading user ratings',
+            description: 'Please try again later',
+          });
+        }
+      }
+      setUserRatings(userRatings);
+      setIsUserRatingLoading(false);
+    }
+    fetchUserRatings();
+  }, [ address, toast ]);
+
+  useEffect(() => {
+    const { isPlaceholderData, data } = addressCountersQuery;
+    const canRate = address && !isPlaceholderData && Number(data?.transactions_count) >= MIN_TRANSACTION_COUNT;
+    setCanRate(canRate);
+  }, [ address, addressCountersQuery ]);
+
+  const rateApp = useCallback(async(
+    appId: string,
+    appRecordId: string | undefined,
+    userRecordId: string | undefined,
+    rating: number,
+    source: EventPayload<EventTypes.APP_FEEDBACK>['Source'],
+  ) => {
+    setIsSending(true);
+
+    try {
+      if (!address || !airtable) {
+        throw new Error('Address is missing');
+      }
+
+      if (!appRecordId) {
+        const records = await airtable('apps_ratings').create([ { fields: { appId } } ]);
+        appRecordId = records[0].id;
+        if (!appRecordId) {
+          throw new Error('Record ID is missing');
+        }
+      }
+
+      if (!userRecordId) {
+        const userRecords = await airtable('users_ratings').create([
+          {
+            fields: {
+              address,
+              appRecordId: [ appRecordId ],
+              rating,
+            },
+          },
+        ]);
+        userRecordId = userRecords[0].id;
+      } else {
+        await airtable('users_ratings').update(userRecordId, { rating });
+      }
+
+      setUserRatings({
+        ...userRatings,
+        [appId]: {
+          recordId: userRecordId,
+          value: rating,
+        },
+      });
+      fetchRatings();
+
+      toast({
+        status: 'success',
+        title: 'Awesome! Thank you 💜',
+        description: 'Your rating improves the service',
+      });
+      mixpanel.logEvent(
+        mixpanel.EventTypes.APP_FEEDBACK,
+        { Action: 'Rating', Source: source, AppId: appId, Score: rating },
+      );
+    } catch (error) {
+      toast({
+        status: 'error',
+        title: 'Ooops! Something went wrong',
+        description: 'Please try again later',
+      });
+    }
+
+    setIsSending(false);
+  }, [ address, userRatings, fetchRatings, toast ]);
+
+  return {
+    ratings,
+    userRatings,
+    rateApp,
+    isRatingSending: isSending,
+    isRatingLoading,
+    isUserRatingLoading,
+    canRate,
+  };
+}
diff --git a/ui/marketplace/__screenshots__/MarketplaceAppInfo.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/marketplace/__screenshots__/MarketplaceAppInfo.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..6c912d627e
Binary files /dev/null and b/ui/marketplace/__screenshots__/MarketplaceAppInfo.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/marketplace/__screenshots__/MarketplaceAppInfo.pw.tsx_default_base-view-dark-mode-1.png b/ui/marketplace/__screenshots__/MarketplaceAppInfo.pw.tsx_default_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..d6e441a77e
Binary files /dev/null and b/ui/marketplace/__screenshots__/MarketplaceAppInfo.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/marketplace/__screenshots__/MarketplaceAppInfo.pw.tsx_default_mobile-base-view-1.png b/ui/marketplace/__screenshots__/MarketplaceAppInfo.pw.tsx_default_mobile-base-view-1.png
new file mode 100644
index 0000000000..7bb7f5597c
Binary files /dev/null and b/ui/marketplace/__screenshots__/MarketplaceAppInfo.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/marketplace/__screenshots__/MarketplaceAppModal.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/marketplace/__screenshots__/MarketplaceAppModal.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..0d7e74cac7
Binary files /dev/null and b/ui/marketplace/__screenshots__/MarketplaceAppModal.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/marketplace/__screenshots__/MarketplaceAppModal.pw.tsx_default_base-view-dark-mode-1.png b/ui/marketplace/__screenshots__/MarketplaceAppModal.pw.tsx_default_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..196f4dfaa1
Binary files /dev/null and b/ui/marketplace/__screenshots__/MarketplaceAppModal.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/marketplace/__screenshots__/MarketplaceAppModal.pw.tsx_default_mobile-base-view-1.png b/ui/marketplace/__screenshots__/MarketplaceAppModal.pw.tsx_default_mobile-base-view-1.png
new file mode 100644
index 0000000000..04509513b0
Binary files /dev/null and b/ui/marketplace/__screenshots__/MarketplaceAppModal.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/marketplace/useAutoConnectWallet.tsx b/ui/marketplace/useAutoConnectWallet.tsx
new file mode 100644
index 0000000000..52b5a0c8ee
--- /dev/null
+++ b/ui/marketplace/useAutoConnectWallet.tsx
@@ -0,0 +1,39 @@
+import { useRouter } from 'next/router';
+import { useEffect, useRef } from 'react';
+
+import removeQueryParam from 'lib/router/removeQueryParam';
+import updateQueryParam from 'lib/router/updateQueryParam';
+import useWeb3Wallet from 'lib/web3/useWallet';
+
+export default function useAutoConnectWallet() {
+  const router = useRouter();
+  const web3Wallet = useWeb3Wallet({ source: 'Swap button' });
+  const isConnectionStarted = useRef(false);
+
+  useEffect(() => {
+    if (router.query.action !== 'connect') {
+      return;
+    }
+
+    let timer: ReturnType<typeof setTimeout>;
+
+    if (!web3Wallet.isConnected && !web3Wallet.isOpen) {
+      if (!isConnectionStarted.current) {
+        timer = setTimeout(() => {
+          if (!web3Wallet.isConnected) {
+            web3Wallet.connect();
+            isConnectionStarted.current = true;
+          }
+        }, 500);
+      } else {
+        isConnectionStarted.current = false;
+        updateQueryParam(router, 'action', 'tooltip');
+      }
+    } else if (web3Wallet.isConnected) {
+      isConnectionStarted.current = false;
+      removeQueryParam(router, 'action');
+    }
+
+    return () => clearTimeout(timer);
+  }, [ router, web3Wallet ]);
+}
diff --git a/ui/marketplace/useMarketplace.tsx b/ui/marketplace/useMarketplace.tsx
index 80221c65a2..1a67d6d791 100644
--- a/ui/marketplace/useMarketplace.tsx
+++ b/ui/marketplace/useMarketplace.tsx
@@ -1,13 +1,14 @@
-import _pickBy from 'lodash/pickBy';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import type { ContractListTypes } from 'types/client/marketplace';
 import { MarketplaceCategory } from 'types/client/marketplace';
 
 import useDebounce from 'lib/hooks/useDebounce';
 import * as mixpanel from 'lib/mixpanel/index';
 import getQueryParamString from 'lib/router/getQueryParamString';
 
+import useRatings from './Rating/useRatings';
 import useMarketplaceApps from './useMarketplaceApps';
 import useMarketplaceCategories from './useMarketplaceCategories';
 
@@ -30,11 +31,14 @@ export default function useMarketplace() {
   const [ selectedCategoryId, setSelectedCategoryId ] = React.useState<string>(MarketplaceCategory.ALL);
   const [ filterQuery, setFilterQuery ] = React.useState(defaultFilterQuery);
   const [ favoriteApps, setFavoriteApps ] = React.useState<Array<string>>([]);
+  const [ isFavoriteAppsLoaded, setIsFavoriteAppsLoaded ] = React.useState<boolean>(false);
   const [ isAppInfoModalOpen, setIsAppInfoModalOpen ] = React.useState<boolean>(false);
   const [ isDisclaimerModalOpen, setIsDisclaimerModalOpen ] = React.useState<boolean>(false);
+  const [ contractListModalType, setContractListModalType ] = React.useState<ContractListTypes | null>(null);
+  const [ hasPreviousStep, setHasPreviousStep ] = React.useState<boolean>(false);
 
-  const handleFavoriteClick = React.useCallback((id: string, isFavorite: boolean) => {
-    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Favorite app', Info: id });
+  const handleFavoriteClick = React.useCallback((id: string, isFavorite: boolean, source: 'Discovery view' | 'Security view' | 'App modal' | 'Banner') => {
+    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Favorite app', Info: id, Source: source });
 
     const favoriteApps = getFavoriteApps();
 
@@ -59,11 +63,21 @@ export default function useMarketplace() {
     setIsDisclaimerModalOpen(true);
   }, []);
 
+  const showContractList = React.useCallback((id: string, type: ContractListTypes, hasPreviousStep?: boolean) => {
+    setSelectedAppId(id);
+    setContractListModalType(type);
+    if (hasPreviousStep) {
+      setHasPreviousStep(true);
+    }
+  }, []);
+
   const debouncedFilterQuery = useDebounce(filterQuery, 500);
   const clearSelectedAppId = React.useCallback(() => {
     setSelectedAppId(null);
     setIsAppInfoModalOpen(false);
     setIsDisclaimerModalOpen(false);
+    setContractListModalType(null);
+    setHasPreviousStep(false);
   }, []);
 
   const handleCategoryChange = React.useCallback((newCategory: string) => {
@@ -71,11 +85,17 @@ export default function useMarketplace() {
     setSelectedCategoryId(newCategory);
   }, []);
 
-  const { isPlaceholderData, isError, error, data, displayedApps } = useMarketplaceApps(debouncedFilterQuery, selectedCategoryId, favoriteApps);
-  const { isPlaceholderData: isCategoriesPlaceholderData, data: categories } = useMarketplaceCategories(data, isPlaceholderData);
+  const { ratings, userRatings, rateApp, isRatingSending, isRatingLoading, canRate } = useRatings();
+  const {
+    isPlaceholderData, isError, error, data, displayedApps, setSorting,
+  } = useMarketplaceApps(debouncedFilterQuery, selectedCategoryId, favoriteApps, isFavoriteAppsLoaded, ratings);
+  const {
+    isPlaceholderData: isCategoriesPlaceholderData, data: categories,
+  } = useMarketplaceCategories(data, isPlaceholderData);
 
   React.useEffect(() => {
     setFavoriteApps(getFavoriteApps());
+    setIsFavoriteAppsLoaded(true);
   }, [ ]);
 
   React.useEffect(() => {
@@ -88,24 +108,38 @@ export default function useMarketplace() {
   }, [ isPlaceholderData ]);
 
   React.useEffect(() => {
-    const query = _pickBy({
-      category: selectedCategoryId === MarketplaceCategory.ALL ? undefined : selectedCategoryId,
-      filter: debouncedFilterQuery,
-    }, Boolean);
+    if (isPlaceholderData) {
+      return;
+    }
+
+    const { query } = router;
+    const newQuery = { ...query };
+
+    if (selectedCategoryId !== MarketplaceCategory.ALL) {
+      newQuery.category = selectedCategoryId;
+    } else {
+      delete newQuery.category;
+    }
+
+    if (debouncedFilterQuery) {
+      newQuery.filter = debouncedFilterQuery;
+    } else {
+      delete newQuery.filter;
+    }
 
     if (debouncedFilterQuery.length > 0) {
       mixpanel.logEvent(mixpanel.EventTypes.LOCAL_SEARCH, { Source: 'Marketplace', 'Search query': debouncedFilterQuery });
     }
 
     router.replace(
-      { pathname: '/apps', query },
+      { pathname: '/apps', query: newQuery },
       undefined,
       { shallow: true },
     );
   // omit router in the deps because router.push() somehow modifies it
   // and we get infinite re-renders then
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ debouncedFilterQuery, selectedCategoryId ]);
+  }, [ debouncedFilterQuery, selectedCategoryId, isPlaceholderData ]);
 
   return React.useMemo(() => ({
     selectedCategoryId,
@@ -116,6 +150,7 @@ export default function useMarketplace() {
     isError,
     error,
     categories,
+    apps: data,
     displayedApps,
     showAppInfo,
     selectedAppId,
@@ -127,11 +162,21 @@ export default function useMarketplace() {
     showDisclaimer,
     appsTotal: data?.length || 0,
     isCategoriesPlaceholderData,
+    showContractList,
+    contractListModalType,
+    hasPreviousStep,
+    setSorting,
+    userRatings,
+    rateApp,
+    isRatingSending,
+    isRatingLoading,
+    canRate,
   }), [
     selectedCategoryId,
     categories,
     clearSelectedAppId,
     selectedAppId,
+    data,
     displayedApps,
     error,
     favoriteApps,
@@ -144,7 +189,15 @@ export default function useMarketplace() {
     isAppInfoModalOpen,
     isDisclaimerModalOpen,
     showDisclaimer,
-    data?.length,
     isCategoriesPlaceholderData,
+    showContractList,
+    contractListModalType,
+    hasPreviousStep,
+    setSorting,
+    userRatings,
+    rateApp,
+    isRatingSending,
+    isRatingLoading,
+    canRate,
   ]);
 }
diff --git a/ui/marketplace/useMarketplaceApps.tsx b/ui/marketplace/useMarketplaceApps.tsx
index 3e6e730165..2b5dbd4158 100644
--- a/ui/marketplace/useMarketplaceApps.tsx
+++ b/ui/marketplace/useMarketplaceApps.tsx
@@ -1,36 +1,39 @@
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
-import type { MarketplaceAppOverview } from 'types/client/marketplace';
+import type { MarketplaceAppWithSecurityReport, AppRating } from 'types/client/marketplace';
 import { MarketplaceCategory } from 'types/client/marketplace';
 
 import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
-import useFeatureValue from 'lib/growthbook/useFeatureValue';
-import useApiFetch from 'lib/hooks/useFetch';
+import useApiFetch from 'lib/api/useApiFetch';
+import useFetch from 'lib/hooks/useFetch';
 import { MARKETPLACE_APP } from 'stubs/marketplace';
 
+import useSecurityReports from './useSecurityReports';
+import type { SortValue } from './utils';
+
 const feature = config.features.marketplace;
-const configUrl = feature.isEnabled ? feature.configUrl : '';
 
-function isAppNameMatches(q: string, app: MarketplaceAppOverview) {
+function isAppNameMatches(q: string, app: MarketplaceAppWithSecurityReport) {
   return app.title.toLowerCase().includes(q.toLowerCase());
 }
 
-function isAppCategoryMatches(category: string, app: MarketplaceAppOverview, favoriteApps: Array<string>) {
+function isAppCategoryMatches(category: string, app: MarketplaceAppWithSecurityReport, favoriteApps: Array<string> = []) {
   return category === MarketplaceCategory.ALL ||
       (category === MarketplaceCategory.FAVORITES && favoriteApps.includes(app.id)) ||
       app.categories.includes(category);
 }
 
-function sortApps(apps: Array<MarketplaceAppOverview>, isExperiment: boolean) {
-  if (!isExperiment) {
-    return apps.sort((a, b) => a.title.localeCompare(b.title));
-  }
+function sortApps(apps: Array<MarketplaceAppWithSecurityReport>, favoriteApps: Array<string> = []) {
   return apps.sort((a, b) => {
     const priorityA = a.priority || 0;
     const priorityB = b.priority || 0;
-    // First, sort by priority (descending)
+    // First, sort by favorite apps
+    if (favoriteApps.includes(a.id) !== favoriteApps.includes(b.id)) {
+      return favoriteApps.includes(a.id) ? -1 : 1;
+    }
+    // Then sort by priority (descending)
     if (priorityB !== priorityA) {
       return priorityB - priorityA;
     }
@@ -47,22 +50,79 @@ function sortApps(apps: Array<MarketplaceAppOverview>, isExperiment: boolean) {
   });
 }
 
-export default function useMarketplaceApps(filter: string, selectedCategoryId: string = MarketplaceCategory.ALL, favoriteApps: Array<string> = []) {
+export default function useMarketplaceApps(
+  filter: string,
+  selectedCategoryId: string = MarketplaceCategory.ALL,
+  favoriteApps: Array<string> | undefined = undefined,
+  isFavoriteAppsLoaded: boolean = false,
+  ratings: Record<string, AppRating> | undefined = undefined,
+) {
+  const fetch = useFetch();
   const apiFetch = useApiFetch();
-  const { value: isExperiment } = useFeatureValue('marketplace_exp', false);
 
-  const { isPlaceholderData, isError, error, data } = useQuery<unknown, ResourceError<unknown>, Array<MarketplaceAppOverview>>({
-    queryKey: [ 'marketplace-apps' ],
-    queryFn: async() => apiFetch(configUrl, undefined, { resource: 'marketplace-apps' }),
-    select: (data) => sortApps(data as Array<MarketplaceAppOverview>, isExperiment),
+  const { data: securityReports, isPlaceholderData: isSecurityReportsPlaceholderData } = useSecurityReports();
+
+  const [ sorting, setSorting ] = React.useState<SortValue>();
+  // Set the value only 1 time to avoid unnecessary useQuery calls and re-rendering of all applications
+  const [ snapshotFavoriteApps, setSnapshotFavoriteApps ] = React.useState<Array<string> | undefined>();
+  const isInitialSetup = React.useRef(true);
+
+  React.useEffect(() => {
+    if (isInitialSetup.current && (isFavoriteAppsLoaded || favoriteApps === undefined)) {
+      setSnapshotFavoriteApps(favoriteApps || []);
+      isInitialSetup.current = false;
+    }
+  }, [ isFavoriteAppsLoaded, favoriteApps ]);
+
+  const {
+    isPlaceholderData: isAppsPlaceholderData, isError, error, data,
+  } = useQuery<unknown, ResourceError<unknown>, Array<MarketplaceAppWithSecurityReport>>({
+    queryKey: [ 'marketplace-dapps', snapshotFavoriteApps ],
+    queryFn: async() => {
+      if (!feature.isEnabled) {
+        return [];
+      } else if ('configUrl' in feature) {
+        return fetch<Array<MarketplaceAppWithSecurityReport>, unknown>(feature.configUrl, undefined, { resource: 'marketplace-dapps' });
+      } else {
+        return apiFetch('marketplace_dapps', { pathParams: { chainId: config.chain.id } });
+      }
+    },
+    select: (data) => sortApps(data as Array<MarketplaceAppWithSecurityReport>, snapshotFavoriteApps),
     placeholderData: feature.isEnabled ? Array(9).fill(MARKETPLACE_APP) : undefined,
     staleTime: Infinity,
-    enabled: feature.isEnabled,
+    enabled: feature.isEnabled && Boolean(snapshotFavoriteApps),
   });
 
+  const isPlaceholderData = isAppsPlaceholderData || isSecurityReportsPlaceholderData;
+
+  const appsWithSecurityReportsAndRating = React.useMemo(() =>
+    data?.map((app) => ({
+      ...app,
+      securityReport: securityReports?.[app.id],
+      rating: ratings?.[app.id],
+    })),
+  [ data, securityReports, ratings ]);
+
   const displayedApps = React.useMemo(() => {
-    return data?.filter(app => isAppNameMatches(filter, app) && isAppCategoryMatches(selectedCategoryId, app, favoriteApps)) || [];
-  }, [ selectedCategoryId, data, filter, favoriteApps ]);
+    if (isPlaceholderData) {
+      return appsWithSecurityReportsAndRating || [];
+    }
+
+    return appsWithSecurityReportsAndRating
+      ?.filter(app => isAppNameMatches(filter, app) && isAppCategoryMatches(selectedCategoryId, app, favoriteApps))
+      .sort((a, b) => {
+        if (sorting === 'security_score') {
+          return (b.securityReport?.overallInfo.securityScore || 0) - (a.securityReport?.overallInfo.securityScore || 0);
+        }
+        if (sorting === 'rating_score') {
+          return (b.rating?.value || 0) - (a.rating?.value || 0);
+        }
+        if (sorting === 'rating_count') {
+          return (b.rating?.count || 0) - (a.rating?.count || 0);
+        }
+        return 0;
+      }) || [];
+  }, [ selectedCategoryId, appsWithSecurityReportsAndRating, filter, favoriteApps, sorting, isPlaceholderData ]);
 
   return React.useMemo(() => ({
     data,
@@ -70,11 +130,13 @@ export default function useMarketplaceApps(filter: string, selectedCategoryId: s
     error,
     isError,
     isPlaceholderData,
+    setSorting,
   }), [
     data,
     displayedApps,
     error,
     isError,
     isPlaceholderData,
+    setSorting,
   ]);
 }
diff --git a/ui/marketplace/useMarketplaceCategories.tsx b/ui/marketplace/useMarketplaceCategories.tsx
index 3118833dbb..68b2a8f542 100644
--- a/ui/marketplace/useMarketplaceCategories.tsx
+++ b/ui/marketplace/useMarketplaceCategories.tsx
@@ -1,12 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
-import _groudBy from 'lodash/groupBy';
 import React from 'react';
 
 import type { MarketplaceAppOverview } from 'types/client/marketplace';
 
 import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
-import useFeatureValue from 'lib/growthbook/useFeatureValue';
 import useApiFetch from 'lib/hooks/useFetch';
 import { CATEGORIES } from 'stubs/marketplace';
 
@@ -15,7 +13,6 @@ const categoriesUrl = (feature.isEnabled && feature.categoriesUrl) || '';
 
 export default function useMarketplaceCategories(apps: Array<MarketplaceAppOverview> | undefined, isAppsPlaceholderData: boolean) {
   const apiFetch = useApiFetch();
-  const { value: isExperiment } = useFeatureValue('marketplace_exp', false);
 
   const { isPlaceholderData, data } = useQuery<unknown, ResourceError<unknown>, Array<string>>({
     queryKey: [ 'marketplace-categories' ],
@@ -31,18 +28,27 @@ export default function useMarketplaceCategories(apps: Array<MarketplaceAppOverv
     }
 
     let categoryNames: Array<string> = [];
-    const grouped = _groudBy(apps, app => app.categories);
-
-    if (data?.length && !isPlaceholderData && isExperiment) {
+    const grouped: { [key: string]: number } = {};
+
+    apps?.forEach(app => {
+      app.categories.forEach(category => {
+        if (grouped[category] === undefined) {
+          grouped[category] = 0;
+        }
+        grouped[category]++;
+      });
+    });
+
+    if (data?.length && !isPlaceholderData) {
       categoryNames = data;
     } else {
       categoryNames = Object.keys(grouped);
     }
 
     return categoryNames
-      .map(category => ({ name: category, count: grouped[category]?.length || 0 }))
+      .map(category => ({ name: category, count: grouped[category] || 0 }))
       .filter(c => c.count > 0);
-  }, [ apps, isAppsPlaceholderData, data, isPlaceholderData, isExperiment ]);
+  }, [ apps, isAppsPlaceholderData, data, isPlaceholderData ]);
 
   return React.useMemo(() => ({
     isPlaceholderData: isAppsPlaceholderData || isPlaceholderData,
diff --git a/ui/marketplace/useMarketplaceWallet.tsx b/ui/marketplace/useMarketplaceWallet.tsx
index 17370ea6bd..24e2f6858c 100644
--- a/ui/marketplace/useMarketplaceWallet.tsx
+++ b/ui/marketplace/useMarketplaceWallet.tsx
@@ -1,14 +1,15 @@
 import type { TypedData } from 'abitype';
 import { useCallback } from 'react';
 import type { Account, SignTypedDataParameters } from 'viem';
-import { useAccount, useSendTransaction, useSwitchNetwork, useNetwork, useSignMessage, useSignTypedData } from 'wagmi';
+import { useAccount, useSendTransaction, useSwitchChain, useSignMessage, useSignTypedData } from 'wagmi';
 
 import config from 'configs/app';
+import * as mixpanel from 'lib/mixpanel/index';
 
 type SendTransactionArgs = {
   chainId?: number;
   mode?: 'prepared';
-  to: string;
+  to: `0x${ string }`;
 };
 
 export type SignTypedDataArgs<
@@ -20,31 +21,39 @@ export type SignTypedDataArgs<
   TPrimaryType extends string = string,
 > = SignTypedDataParameters<TTypedData, TPrimaryType, Account>;
 
-export default function useMarketplaceWallet() {
-  const { address } = useAccount();
-  const { chain } = useNetwork();
+export default function useMarketplaceWallet(appId: string) {
+  const { address, chainId } = useAccount();
   const { sendTransactionAsync } = useSendTransaction();
   const { signMessageAsync } = useSignMessage();
   const { signTypedDataAsync } = useSignTypedData();
-  const { switchNetworkAsync } = useSwitchNetwork({ chainId: Number(config.chain.id) });
+  const { switchChainAsync } = useSwitchChain();
+
+  const logEvent = useCallback((event: mixpanel.EventPayload<mixpanel.EventTypes.WALLET_ACTION>['Action']) => {
+    mixpanel.logEvent(
+      mixpanel.EventTypes.WALLET_ACTION,
+      { Action: event, Address: address, AppId: appId },
+    );
+  }, [ address, appId ]);
 
   const switchNetwork = useCallback(async() => {
-    if (Number(config.chain.id) !== chain?.id) {
-      await switchNetworkAsync?.();
+    if (Number(config.chain.id) !== chainId) {
+      await switchChainAsync?.({ chainId: Number(config.chain.id) });
     }
-  }, [ chain, switchNetworkAsync ]);
+  }, [ chainId, switchChainAsync ]);
 
   const sendTransaction = useCallback(async(transaction: SendTransactionArgs) => {
     await switchNetwork();
     const tx = await sendTransactionAsync(transaction);
-    return tx.hash;
-  }, [ sendTransactionAsync, switchNetwork ]);
+    logEvent('Send Transaction');
+    return tx;
+  }, [ sendTransactionAsync, switchNetwork, logEvent ]);
 
   const signMessage = useCallback(async(message: string) => {
     await switchNetwork();
     const signature = await signMessageAsync({ message });
+    logEvent('Sign Message');
     return signature;
-  }, [ signMessageAsync, switchNetwork ]);
+  }, [ signMessageAsync, switchNetwork, logEvent ]);
 
   const signTypedData = useCallback(async(typedData: SignTypedDataArgs) => {
     await switchNetwork();
@@ -52,8 +61,9 @@ export default function useMarketplaceWallet() {
       typedData.domain.chainId = Number(typedData.domain.chainId);
     }
     const signature = await signTypedDataAsync(typedData);
+    logEvent('Sign Typed Data');
     return signature;
-  }, [ signTypedDataAsync, switchNetwork ]);
+  }, [ signTypedDataAsync, switchNetwork, logEvent ]);
 
   return {
     address,
diff --git a/ui/marketplace/useSecurityReports.tsx b/ui/marketplace/useSecurityReports.tsx
new file mode 100644
index 0000000000..c15aef2d8a
--- /dev/null
+++ b/ui/marketplace/useSecurityReports.tsx
@@ -0,0 +1,35 @@
+import { useQuery } from '@tanstack/react-query';
+
+import type { MarketplaceAppSecurityReport, MarketplaceAppSecurityReportRaw } from 'types/client/marketplace';
+
+import config from 'configs/app';
+import type { ResourceError } from 'lib/api/resources';
+import useApiFetch from 'lib/hooks/useFetch';
+
+const feature = config.features.marketplace;
+const securityReportsUrl = (feature.isEnabled && feature.securityReportsUrl) || '';
+
+export default function useSecurityReports() {
+  const apiFetch = useApiFetch();
+
+  return useQuery<unknown, ResourceError<unknown>, Record<string, MarketplaceAppSecurityReport>>({
+    queryKey: [ 'marketplace-security-reports' ],
+    queryFn: async() => apiFetch(securityReportsUrl, undefined, { resource: 'marketplace-security-reports' }),
+    select: (data) => {
+      const securityReports: Record<string, MarketplaceAppSecurityReport> = {};
+      (data as Array<MarketplaceAppSecurityReportRaw>).forEach((item) => {
+        const report = item.chainsData[config.chain.id || ''];
+        if (report) {
+          const issues: Record<string, number> = report.overallInfo.issueSeverityDistribution;
+          report.overallInfo.totalIssues = Object.values(issues).reduce((acc, val) => acc + val, 0);
+          report.overallInfo.securityScore = Number(report.overallInfo.securityScore.toFixed(2));
+        }
+        securityReports[item.appName] = report;
+      });
+      return securityReports;
+    },
+    placeholderData: securityReportsUrl ? {} : undefined,
+    staleTime: Infinity,
+    enabled: Boolean(securityReportsUrl),
+  });
+}
diff --git a/ui/marketplace/utils.test.ts b/ui/marketplace/utils.test.ts
new file mode 100644
index 0000000000..c67e046f0d
--- /dev/null
+++ b/ui/marketplace/utils.test.ts
@@ -0,0 +1,58 @@
+import type { NextRouter } from 'next/router';
+
+import { getAppUrl } from './utils';
+
+describe('getAppUrl', () => {
+  let router: NextRouter;
+
+  beforeEach(() => {
+    router = {
+      pathname: '/current/path',
+      asPath: '/current/path?someParam=value',
+      query: {},
+      replace: jest.fn(),
+    } as unknown as NextRouter;
+  });
+
+  it('should return undefined if url is undefined', () => {
+    const result = getAppUrl(undefined, router);
+    expect(result).toBeUndefined();
+  });
+
+  it('should return the custom url if origins match', () => {
+    router.query.url = 'https://example.com/custom-path?query=value';
+    const result = getAppUrl('https://example.com/app', router);
+    expect(result).toBe('https://example.com/custom-path?query=value');
+  });
+
+  it('should remove the query param and return original url if origins do not match', () => {
+    router.query.url = 'https://different.com/custom-path?query=value';
+    const result = getAppUrl('https://example.com/app', router);
+    expect(result).toBe('https://example.com/app?someParam=value');
+    expect(router.replace).toHaveBeenCalledWith({ pathname: '/current/path', query: {}, hash: '' }, undefined, { shallow: true });
+  });
+
+  it('should construct the new url with custom params and hash', () => {
+    router.asPath = '/current/path?path=newPath&newParam=newValue#section';
+    const result = getAppUrl('https://example.com/app?existingParam=1', router);
+    expect(result).toBe('https://example.com/newPath?existingParam=1&newParam=newValue#section');
+  });
+
+  it('should handle url without query and hash', () => {
+    router.asPath = '/current/path';
+    const result = getAppUrl('https://example.com/app', router);
+    expect(result).toBe('https://example.com/app');
+  });
+
+  it('should handle error in custom url parsing', () => {
+    router.query.url = 'invalid-url';
+    const result = getAppUrl('https://example.com/app', router);
+    expect(result).toBe('https://example.com/app?someParam=value');
+  });
+
+  it('should handle error in target url parsing', () => {
+    router.asPath = '/current/path?invalidQuery#section';
+    const result = getAppUrl('invalid-url', router);
+    expect(result).toBe('invalid-url');
+  });
+});
diff --git a/ui/marketplace/utils.ts b/ui/marketplace/utils.ts
new file mode 100644
index 0000000000..010a09d9b5
--- /dev/null
+++ b/ui/marketplace/utils.ts
@@ -0,0 +1,72 @@
+import type { NextRouter } from 'next/router';
+
+import type { SelectOption } from 'ui/shared/select/types';
+
+import config from 'configs/app';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import removeQueryParam from 'lib/router/removeQueryParam';
+
+const feature = config.features.marketplace;
+
+export type SortValue = 'rating_score' | 'rating_count' | 'security_score';
+
+export const SORT_OPTIONS: Array<SelectOption<SortValue>> = [
+  { label: 'Default', value: undefined },
+  (feature.isEnabled && feature.rating) && { label: 'Top rated', value: 'rating_score' },
+  (feature.isEnabled && feature.rating) && { label: 'Most rated', value: 'rating_count' },
+  (feature.isEnabled && feature.securityReportsUrl) && { label: 'Security score', value: 'security_score' },
+].filter(Boolean) as Array<SelectOption<SortValue>>;
+
+export function getAppUrl(url: string | undefined, router: NextRouter) {
+  if (!url) {
+    return;
+  }
+
+  try {
+    // get the custom url from the query
+    const customUrl = getQueryParamString(router.query.url);
+
+    if (customUrl) {
+      const customOrigin = new URL(customUrl).origin;
+      const appOrigin = new URL(url).origin;
+      if (customOrigin === appOrigin) {
+        return customUrl;
+      } else {
+        removeQueryParam(router, 'url');
+      }
+    }
+  } catch (err) {}
+
+  try {
+    // get hash and params (using asPath to avoid conflicts with dynamic route params)
+    const [ , queryAndHash ] = router.asPath.split('?');
+    const [ queryString, hash ] = queryAndHash ? queryAndHash.split('#') : [ '', '' ];
+    const customHash = hash ? `#${ hash }` : '';
+    const customParams = new URLSearchParams(queryString);
+
+    // remove reserved params
+    [ 'url', 'action' ].forEach((param) => customParams.delete(param));
+
+    if (customParams.toString() || customHash) {
+      const targetUrl = new URL(url);
+      const targetParams = new URLSearchParams(targetUrl.search);
+
+      let customPath = customParams.get('path');
+      if (customPath) {
+        customPath = customPath.startsWith('/') ? customPath : `/${ customPath }`;
+        targetUrl.pathname = customPath;
+        customParams.delete('path');
+      }
+
+      customParams.forEach((value, key) => {
+        targetParams.append(key, value);
+      });
+
+      targetUrl.search = targetParams.toString();
+      targetUrl.hash = customHash;
+      return targetUrl.toString();
+    }
+  } catch (err) {}
+
+  return url;
+}
diff --git a/ui/messages/ArbitrumL2Messages.tsx b/ui/messages/ArbitrumL2Messages.tsx
new file mode 100644
index 0000000000..1637fd8881
--- /dev/null
+++ b/ui/messages/ArbitrumL2Messages.tsx
@@ -0,0 +1,102 @@
+import { Hide, Show, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { rightLineArrow, nbsp } from 'lib/html-entities';
+import { ARBITRUM_MESSAGES_ITEM } from 'stubs/arbitrumL2';
+import { generateListStub } from 'stubs/utils';
+import ArbitrumL2MessagesListItem from 'ui/messages/ArbitrumL2MessagesListItem';
+import ArbitrumL2MessagesTable from 'ui/messages/ArbitrumL2MessagesTable';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+
+export type MessagesDirection = 'from-rollup' | 'to-rollup';
+
+type Props = {
+  direction: MessagesDirection;
+};
+
+const ArbitrumL2Messages = ({ direction }: Props) => {
+  const type = direction === 'from-rollup' ? 'withdrawals' : 'deposits';
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'arbitrum_l2_messages',
+    pathParams: { direction },
+    options: {
+      placeholderData: generateListStub<'arbitrum_l2_messages'>(
+        ARBITRUM_MESSAGES_ITEM,
+        50,
+        { next_page_params: { items_count: 50, direction: 'to-rollup', id: 123456 } },
+      ),
+    },
+  });
+
+  const countersQuery = useApiQuery('arbitrum_l2_messages_count', {
+    pathParams: { direction },
+    queryOptions: {
+      placeholderData: 1927029,
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        { data.items.map(((item, index) => (
+          <ArbitrumL2MessagesListItem
+            key={ String(item.id) + (isPlaceholderData ? index : '') }
+            isLoading={ isPlaceholderData }
+            item={ item }
+            direction={ direction }
+          />
+        ))) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <ArbitrumL2MessagesTable
+          items={ data.items }
+          direction={ direction }
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+          isLoading={ isPlaceholderData }
+        />
+      </Hide>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (countersQuery.isError) {
+      return null;
+    }
+
+    return (
+      <Skeleton
+        isLoaded={ !countersQuery.isPlaceholderData }
+        display="inline-block"
+      >
+        A total of { countersQuery.data?.toLocaleString() } { type } found
+      </Skeleton>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle
+        title={ direction === 'from-rollup' ?
+          `Withdrawals (L2${ nbsp }${ rightLineArrow }${ nbsp }L1)` :
+          `Deposits (L1${ nbsp }${ rightLineArrow }${ nbsp }L2)` }
+        withTextAd
+      />
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText={ `There are no ${ type }.` }
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default ArbitrumL2Messages;
diff --git a/ui/messages/ArbitrumL2MessagesListItem.tsx b/ui/messages/ArbitrumL2MessagesListItem.tsx
new file mode 100644
index 0000000000..d291efc9fe
--- /dev/null
+++ b/ui/messages/ArbitrumL2MessagesListItem.tsx
@@ -0,0 +1,128 @@
+import { Skeleton, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ArbitrumL2MessagesItem } from 'types/api/arbitrumL2';
+
+import config from 'configs/app';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import ArbitrumL2MessageStatus from 'ui/shared/statusTag/ArbitrumL2MessageStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+import type { MessagesDirection } from './ArbitrumL2Messages';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: ArbitrumL2MessagesItem; isLoading?: boolean; direction: MessagesDirection };
+
+const ArbitrumL2MessagesListItem = ({ item, isLoading, direction }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'arbitrum') {
+    return null;
+  }
+
+  const l1TxHash = direction === 'from-rollup' ? item.completion_transaction_hash : item.origination_transaction_hash;
+  const l2TxHash = direction === 'from-rollup' ? item.origination_transaction_hash : item.completion_transaction_hash;
+
+  return (
+    <ListItemMobileGrid.Container gridTemplateColumns="110px auto">
+
+      { direction === 'to-rollup' && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>L1 block</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value>
+            { item.origination_transaction_block_number ? (
+              <BlockEntityL1
+                number={ item.origination_transaction_block_number }
+                isLoading={ isLoading }
+                fontSize="sm"
+                lineHeight={ 5 }
+                fontWeight={ 600 }
+              />
+            ) : <chakra.span>N/A</chakra.span> }
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+
+      { direction === 'from-rollup' && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>From</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value>
+            <AddressEntity
+              address={{ hash: item.origination_address }}
+              truncation="constant"
+              isLoading={ isLoading }
+              fontSize="sm"
+              lineHeight={ 5 }
+              fontWeight={ 600 }
+            />
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Message #</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { item.id }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 transaction</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        { l2TxHash ? (
+          <TxEntity
+            isLoading={ isLoading }
+            hash={ l2TxHash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+          />
+        ) : (
+          <chakra.span>
+            N/A
+          </chakra.span>
+        ) }
+      </ListItemMobileGrid.Value>
+
+      { item.origination_timestamp && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value>
+            <TimeAgoWithTooltip
+              timestamp={ item.origination_timestamp }
+              isLoading={ isLoading }
+              display="inline-block"
+            />
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Status</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <ArbitrumL2MessageStatus status={ item.status } isLoading={ isLoading }/>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 transaction</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        { l1TxHash ? (
+          <TxEntityL1
+            isLoading={ isLoading }
+            hash={ l1TxHash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+          />
+        ) : (
+          <chakra.span>
+            N/A
+          </chakra.span>
+        ) }
+      </ListItemMobileGrid.Value>
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default ArbitrumL2MessagesListItem;
diff --git a/ui/messages/ArbitrumL2MessagesTable.tsx b/ui/messages/ArbitrumL2MessagesTable.tsx
new file mode 100644
index 0000000000..4fa8678f23
--- /dev/null
+++ b/ui/messages/ArbitrumL2MessagesTable.tsx
@@ -0,0 +1,46 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ArbitrumL2MessagesItem } from 'types/api/arbitrumL2';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import type { MessagesDirection } from './ArbitrumL2Messages';
+import ArbitrumL2MessagesTableItem from './ArbitrumL2MessagesTableItem';
+
+ type Props = {
+   items: Array<ArbitrumL2MessagesItem>;
+   direction: MessagesDirection;
+   top: number;
+   isLoading?: boolean;
+ };
+
+const ArbitrumL2MessagesTable = ({ items, direction, top, isLoading }: Props) => {
+  return (
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
+      <Thead top={ top }>
+        <Tr>
+          { direction === 'to-rollup' && <Th>L1 block</Th> }
+          { direction === 'from-rollup' && <Th>From</Th> }
+          <Th>Message #</Th>
+          <Th>L2 transaction</Th>
+          <Th>Age</Th>
+          <Th>Status</Th>
+          <Th>L1 transaction</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <ArbitrumL2MessagesTableItem
+            key={ String(item.id) + (isLoading ? index : '') }
+            item={ item }
+            direction={ direction }
+            isLoading={ isLoading }
+          />
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default ArbitrumL2MessagesTable;
diff --git a/ui/messages/ArbitrumL2MessagesTableItem.tsx b/ui/messages/ArbitrumL2MessagesTableItem.tsx
new file mode 100644
index 0000000000..a59319ef31
--- /dev/null
+++ b/ui/messages/ArbitrumL2MessagesTableItem.tsx
@@ -0,0 +1,107 @@
+import { Td, Tr, Skeleton, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ArbitrumL2MessagesItem } from 'types/api/arbitrumL2';
+
+import config from 'configs/app';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import ArbitrumL2MessageStatus from 'ui/shared/statusTag/ArbitrumL2MessageStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+import type { MessagesDirection } from './ArbitrumL2Messages';
+
+const rollupFeature = config.features.rollup;
+
+ type Props = { item: ArbitrumL2MessagesItem; isLoading?: boolean; direction: MessagesDirection };
+
+const ArbitrumL2MessagesTableItem = ({ item, direction, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'arbitrum') {
+    return null;
+  }
+
+  const l1TxHash = direction === 'from-rollup' ? item.completion_transaction_hash : item.origination_transaction_hash;
+  const l2TxHash = direction === 'from-rollup' ? item.origination_transaction_hash : item.completion_transaction_hash;
+
+  return (
+    <Tr>
+      { direction === 'to-rollup' && (
+        <Td verticalAlign="middle">
+          { item.origination_transaction_block_number ? (
+            <BlockEntityL1
+              number={ item.origination_transaction_block_number }
+              isLoading={ isLoading }
+              fontSize="sm"
+              lineHeight={ 5 }
+              fontWeight={ 600 }
+              noIcon
+            />
+          ) : <chakra.span color="text_secondary">N/A</chakra.span> }
+        </Td>
+      ) }
+      { direction === 'from-rollup' && (
+        <Td verticalAlign="middle">
+          <AddressEntity
+            address={{ hash: item.origination_address }}
+            truncation="constant"
+            isLoading={ isLoading }
+            fontSize="sm"
+            lineHeight={ 5 }
+            fontWeight={ 600 }
+          />
+        </Td>
+      ) }
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading }>
+          <span>{ item.id }</span>
+        </Skeleton>
+      </Td>
+      <Td verticalAlign="middle">
+        { l2TxHash ? (
+          <TxEntity
+            isLoading={ isLoading }
+            hash={ l2TxHash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+            noIcon
+          />
+        ) : (
+          <chakra.span color="text_secondary">
+            N/A
+          </chakra.span>
+        ) }
+      </Td>
+      <Td verticalAlign="middle" pr={ 12 }>
+        <TimeAgoWithTooltip
+          timestamp={ item.origination_timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <ArbitrumL2MessageStatus status={ item.status } isLoading={ isLoading }/>
+      </Td>
+      <Td verticalAlign="middle">
+        { l1TxHash ? (
+          <TxEntityL1
+            isLoading={ isLoading }
+            hash={ l1TxHash }
+            truncation="constant_long"
+            noIcon
+            fontSize="sm"
+            lineHeight={ 5 }
+          />
+        ) : (
+          <chakra.span color="text_secondary">
+            N/A
+          </chakra.span>
+        ) }
+      </Td>
+    </Tr>
+  );
+};
+
+export default ArbitrumL2MessagesTableItem;
diff --git a/ui/mudWorlds/MudWorldsListItem.tsx b/ui/mudWorlds/MudWorldsListItem.tsx
new file mode 100644
index 0000000000..404a5319b5
--- /dev/null
+++ b/ui/mudWorlds/MudWorldsListItem.tsx
@@ -0,0 +1,49 @@
+import { HStack, Skeleton } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { MudWorldItem } from 'types/api/mudWorlds';
+
+import config from 'configs/app';
+import { currencyUnits } from 'lib/units';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+
+type Props = {
+  item: MudWorldItem;
+  isLoading?: boolean;
+};
+
+const MudWorldsListItem = ({
+  item,
+  isLoading,
+}: Props) => {
+
+  const addressBalance = BigNumber(item.coin_balance).div(BigNumber(10 ** config.chain.currency.decimals));
+
+  return (
+    <ListItemMobile rowGap={ 3 }>
+      <AddressEntity
+        address={ item.address }
+        isLoading={ isLoading }
+        fontWeight={ 700 }
+        mr={ 2 }
+        truncation="constant_long"
+      />
+      <HStack spacing={ 3 } maxW="100%" alignItems="flex-start">
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 } flexShrink={ 0 }>{ `Balance ${ currencyUnits.ether }` }</Skeleton>
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" minW="0" whiteSpace="pre-wrap">
+          <span>{ addressBalance.dp(8).toFormat() }</span>
+        </Skeleton>
+      </HStack>
+      <HStack spacing={ 3 }>
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Txn count</Skeleton>
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary">
+          <span>{ Number(item.transaction_count).toLocaleString() }</span>
+        </Skeleton>
+      </HStack>
+    </ListItemMobile>
+  );
+};
+
+export default React.memo(MudWorldsListItem);
diff --git a/ui/mudWorlds/MudWorldsTable.tsx b/ui/mudWorlds/MudWorldsTable.tsx
new file mode 100644
index 0000000000..e825757abc
--- /dev/null
+++ b/ui/mudWorlds/MudWorldsTable.tsx
@@ -0,0 +1,40 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { MudWorldItem } from 'types/api/mudWorlds';
+
+import { currencyUnits } from 'lib/units';
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import MudWorldsTableItem from './MudWorldsTableItem';
+
+type Props = {
+  items: Array<MudWorldItem>;
+  top: number;
+  isLoading?: boolean;
+};
+
+const MudWorldsTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table style={{ tableLayout: 'auto' }}>
+      <Thead top={ top }>
+        <Tr>
+          <Th>Address</Th>
+          <Th isNumeric>{ `Balance ${ currencyUnits.ether }` }</Th>
+          <Th isNumeric>Txn count</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <MudWorldsTableItem
+            key={ String(item.address.hash) + (isLoading ? index : '') }
+            item={ item }
+            isLoading={ isLoading }
+          />
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default MudWorldsTable;
diff --git a/ui/mudWorlds/MudWorldsTableItem.tsx b/ui/mudWorlds/MudWorldsTableItem.tsx
new file mode 100644
index 0000000000..c2a0e1ab73
--- /dev/null
+++ b/ui/mudWorlds/MudWorldsTableItem.tsx
@@ -0,0 +1,36 @@
+import { Text, Td, Tr, Skeleton } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { MudWorldItem } from 'types/api/mudWorlds';
+
+import config from 'configs/app';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+
+type Props = { item: MudWorldItem; isLoading?: boolean };
+
+const MudWorldsTableItem = ({ item, isLoading }: Props) => {
+  const addressBalance = BigNumber(item.coin_balance).div(BigNumber(10 ** config.chain.currency.decimals));
+  const addressBalanceChunks = addressBalance.dp(8).toFormat().split('.');
+
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <AddressEntity address={ item.address } isLoading={ isLoading } fontWeight={ 700 }/>
+      </Td>
+      <Td isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="inline-block" maxW="100%">
+          <Text lineHeight="24px" as="span">{ addressBalanceChunks[0] + (addressBalanceChunks[1] ? '.' : '') }</Text>
+          <Text lineHeight="24px" variant="secondary" as="span">{ addressBalanceChunks[1] }</Text>
+        </Skeleton>
+      </Td>
+      <Td isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="inline-block" lineHeight="24px">
+          { Number(item.transaction_count).toLocaleString() }
+        </Skeleton>
+      </Td>
+    </Tr>
+  );
+};
+
+export default MudWorldsTableItem;
diff --git a/ui/myProfile/MyProfileEmail.tsx b/ui/myProfile/MyProfileEmail.tsx
new file mode 100644
index 0000000000..345dd42d70
--- /dev/null
+++ b/ui/myProfile/MyProfileEmail.tsx
@@ -0,0 +1,118 @@
+import { Button, chakra, Heading, useDisclosure } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import React from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import type { FormFields } from './types';
+import type { UserInfo } from 'types/api/account';
+
+import config from 'configs/app';
+import useApiFetch from 'lib/api/useApiFetch';
+import getErrorMessage from 'lib/errors/getErrorMessage';
+import getErrorObjPayload from 'lib/errors/getErrorObjPayload';
+import useToast from 'lib/hooks/useToast';
+import * as mixpanel from 'lib/mixpanel';
+import FormFieldText from 'ui/shared/forms/fields/FormFieldText';
+import ReCaptcha from 'ui/shared/reCaptcha/ReCaptcha';
+import useReCaptcha from 'ui/shared/reCaptcha/useReCaptcha';
+import AuthModal from 'ui/snippets/auth/AuthModal';
+
+import MyProfileFieldsEmail from './fields/MyProfileFieldsEmail';
+
+const MIXPANEL_CONFIG = {
+  account_link_info: {
+    source: 'Profile' as const,
+  },
+};
+
+interface Props {
+  profileQuery: UseQueryResult<UserInfo, unknown>;
+}
+
+const MyProfileEmail = ({ profileQuery }: Props) => {
+  const authModal = useDisclosure();
+  const apiFetch = useApiFetch();
+  const toast = useToast();
+  const recaptcha = useReCaptcha();
+
+  const formApi = useForm<FormFields>({
+    mode: 'onBlur',
+    defaultValues: {
+      email: profileQuery.data?.email || '',
+      name: profileQuery.data?.name || profileQuery.data?.nickname || '',
+    },
+  });
+
+  const onFormSubmit: SubmitHandler<FormFields> = React.useCallback(async(formData) => {
+    try {
+      const token = await recaptcha.executeAsync();
+
+      await apiFetch('auth_send_otp', {
+        fetchParams: {
+          method: 'POST',
+          body: {
+            email: formData.email,
+            recaptcha_response: token,
+          },
+        },
+      });
+      mixpanel.logEvent(mixpanel.EventTypes.ACCOUNT_LINK_INFO, {
+        Source: 'Profile',
+        Status: 'OTP sent',
+        Type: 'Email',
+      });
+      authModal.onOpen();
+    } catch (error) {
+      const apiError = getErrorObjPayload<{ message: string }>(error);
+      toast({
+        status: 'error',
+        title: 'Error',
+        description: apiError?.message || getErrorMessage(error) || 'Something went wrong',
+      });
+    }
+  }, [ apiFetch, authModal, toast, recaptcha ]);
+
+  const hasDirtyFields = Object.keys(formApi.formState.dirtyFields).length > 0;
+
+  return (
+    <section>
+      <Heading as="h2" size="sm" mb={ 3 }>Notifications</Heading>
+      <FormProvider { ...formApi }>
+        <chakra.form
+          noValidate
+          onSubmit={ formApi.handleSubmit(onFormSubmit) }
+        >
+          <FormFieldText<FormFields> name="name" placeholder="Name" isReadOnly mb={ 3 }/>
+          <MyProfileFieldsEmail
+            isReadOnly={ !config.services.reCaptchaV2.siteKey || Boolean(profileQuery.data?.email) }
+            defaultValue={ profileQuery.data?.email || undefined }
+          />
+          { config.services.reCaptchaV2.siteKey && !profileQuery.data?.email && <ReCaptcha ref={ recaptcha.ref }/> }
+          { config.services.reCaptchaV2.siteKey && !profileQuery.data?.email && (
+            <Button
+              mt={ 6 }
+              size="sm"
+              variant="outline"
+              type="submit"
+              isDisabled={ formApi.formState.isSubmitting || !hasDirtyFields }
+              isLoading={ formApi.formState.isSubmitting }
+              loadingText="Save changes"
+            >
+              Save changes
+            </Button>
+          ) }
+        </chakra.form>
+      </FormProvider>
+      { authModal.isOpen && (
+        <AuthModal
+          initialScreen={{ type: 'otp_code', isAuth: true, email: formApi.getValues('email') }}
+          onClose={ authModal.onClose }
+          mixpanelConfig={ MIXPANEL_CONFIG }
+        />
+      ) }
+    </section>
+  );
+};
+
+export default React.memo(MyProfileEmail);
diff --git a/ui/myProfile/MyProfileWallet.tsx b/ui/myProfile/MyProfileWallet.tsx
new file mode 100644
index 0000000000..210acf8ef7
--- /dev/null
+++ b/ui/myProfile/MyProfileWallet.tsx
@@ -0,0 +1,46 @@
+import { Box, Button, Heading, Text, useColorModeValue } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import React from 'react';
+
+import type { UserInfo } from 'types/api/account';
+
+import config from 'configs/app';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+
+interface Props {
+  profileQuery: UseQueryResult<UserInfo, unknown>;
+  onAddWallet: () => void;
+}
+
+const MyProfileWallet = ({ profileQuery, onAddWallet }: Props) => {
+  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  return (
+    <section>
+      <Heading as="h2" size="sm" mb={ 3 }>My linked wallet</Heading>
+      <Text mb={ 3 } >
+        This wallet address is used for login{ ' ' }
+        { config.features.rewards.isEnabled && (
+          <>
+            and participation in the Merits Program.
+            <LinkExternal href="https://docs.blockscout.com/using-blockscout/merits" ml={ 1 }>
+              Learn more
+            </LinkExternal>
+          </>
+        ) }
+      </Text>
+      { profileQuery.data?.address_hash ? (
+        <Box px={ 3 } py="18px" bgColor={ bgColor } borderRadius="base">
+          <AddressEntity
+            address={{ hash: profileQuery.data.address_hash }}
+            fontWeight="500"
+            noAltHash
+          />
+        </Box>
+      ) : <Button size="sm" onClick={ onAddWallet }>Link wallet</Button> }
+    </section>
+  );
+};
+
+export default React.memo(MyProfileWallet);
diff --git a/ui/myProfile/fields/MyProfileFieldsEmail.tsx b/ui/myProfile/fields/MyProfileFieldsEmail.tsx
new file mode 100644
index 0000000000..caf2feab00
--- /dev/null
+++ b/ui/myProfile/fields/MyProfileFieldsEmail.tsx
@@ -0,0 +1,50 @@
+import { FormControl, Input, InputGroup, InputRightElement, Text } from '@chakra-ui/react';
+import React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import FormInputPlaceholder from 'ui/shared/forms/inputs/FormInputPlaceholder';
+import { EMAIL_REGEXP } from 'ui/shared/forms/validators/email';
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props {
+  isReadOnly?: boolean;
+  defaultValue: string | undefined;
+}
+
+const MyProfileFieldsEmail = ({ isReadOnly, defaultValue }: Props) => {
+  const { control } = useFormContext<FormFields>();
+  const { field, fieldState, formState } = useController<FormFields, 'email'>({
+    control,
+    name: 'email',
+    rules: { required: true, pattern: EMAIL_REGEXP },
+  });
+
+  const isDisabled = formState.isSubmitting;
+  const isVerified = defaultValue && field.value === defaultValue;
+
+  return (
+    <FormControl variant="floating" isDisabled={ isDisabled } isRequired size="md">
+      <InputGroup>
+        <Input
+          { ...field }
+          required
+          isInvalid={ Boolean(fieldState.error) }
+          isDisabled={ isDisabled }
+          isReadOnly={ isReadOnly }
+          autoComplete="off"
+        />
+        <FormInputPlaceholder text="Email" error={ fieldState.error }/>
+        { isVerified && (
+          <InputRightElement h="100%">
+            <IconSvg name="certified" boxSize={ 5 } color="green.500"/>
+          </InputRightElement>
+        ) }
+      </InputGroup>
+      <Text variant="secondary" mt={ 1 } fontSize="sm">Email for watch list notifications and private tags</Text>
+    </FormControl>
+  );
+};
+
+export default React.memo(MyProfileFieldsEmail);
diff --git a/ui/myProfile/types.tsx b/ui/myProfile/types.tsx
new file mode 100644
index 0000000000..49eac6c32f
--- /dev/null
+++ b/ui/myProfile/types.tsx
@@ -0,0 +1,4 @@
+export interface FormFields {
+  email: string;
+  name: string;
+}
diff --git a/ui/nameDomain/NameDomainDetails.tsx b/ui/nameDomain/NameDomainDetails.tsx
index 91a74c95ee..f12e4fa30f 100644
--- a/ui/nameDomain/NameDomainDetails.tsx
+++ b/ui/nameDomain/NameDomainDetails.tsx
@@ -2,23 +2,26 @@ import { Grid, Skeleton, Tooltip, Flex } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
-import type { EnsDomainDetailed } from 'types/api/ens';
+import * as bens from '@blockscout/bens-types';
 
 import { route } from 'nextjs-routes';
 
+import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
 import dayjs from 'lib/date/dayjs';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import stripTrailingSlash from 'lib/stripTrailingSlash';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import TextSeparator from 'ui/shared/TextSeparator';
 
+import NameDomainDetailsAlert from './details/NameDomainDetailsAlert';
 import NameDomainExpiryStatus from './NameDomainExpiryStatus';
 
 interface Props {
-  query: UseQueryResult<EnsDomainDetailed, ResourceError<unknown>>;
+  query: UseQueryResult<bens.DetailedDomain, ResourceError<unknown>>;
 }
 
 const NameDomainDetails = ({ query }: Props) => {
@@ -28,148 +31,217 @@ const NameDomainDetails = ({ query }: Props) => {
   const hasExpired = query.data?.expiry_date && dayjs(query.data.expiry_date).isBefore(dayjs());
 
   return (
-    <Grid columnGap={ 8 } rowGap={ 3 } templateColumns={{ base: 'minmax(0, 1fr)', lg: 'max-content minmax(728px, auto)' }}>
-      { query.data?.registration_date && (
-        <DetailsInfoItem
-          title="Registration date"
-          hint="The date the name was registered"
-          isLoading={ isLoading }
-        >
-          <IconSvg name="clock" boxSize={ 5 } color="gray.500" verticalAlign="middle" isLoading={ isLoading } mr={ 2 }/>
-          <Skeleton isLoaded={ !isLoading } display="inline" whiteSpace="pre-wrap" lineHeight="20px">
-            { dayjs(query.data.registration_date).format('llll') }
-          </Skeleton>
-        </DetailsInfoItem>
-      ) }
-      { query.data?.expiry_date && (
-        <DetailsInfoItem
-          title="Expiration date"
-          // eslint-disable-next-line max-len
-          hint="The date the name expires, upon which there is a 90 day grace period for the owner to renew. After the 90 days, the name is released to the market"
-          isLoading={ isLoading }
-          display="inline-block"
-        >
-          <IconSvg name="clock" boxSize={ 5 } color="gray.500" verticalAlign="middle" isLoading={ isLoading } mr={ 2 } mt="-2px"/>
-          { hasExpired && (
-            <>
+    <>
+      <NameDomainDetailsAlert data={ query.data }/>
+      <Grid columnGap={ 8 } rowGap={ 3 } templateColumns={{ base: 'minmax(0, 1fr)', lg: 'max-content minmax(728px, auto)' }}>
+        { query.data?.registration_date && (
+          <>
+            <DetailsInfoItem.Label
+              hint="The date the name was registered"
+              isLoading={ isLoading }
+            >
+              Registration date
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value>
+              <IconSvg name="clock" boxSize={ 5 } color="gray.500" verticalAlign="middle" isLoading={ isLoading } mr={ 2 }/>
+              <Skeleton isLoaded={ !isLoading } display="inline" whiteSpace="pre-wrap" lineHeight="20px">
+                { dayjs(query.data.registration_date).format('llll') }
+              </Skeleton>
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+
+        { query.data?.expiry_date && (
+          <>
+            <DetailsInfoItem.Label
+            // eslint-disable-next-line max-len
+              hint="The date the name expires, upon which there is a grace period for the owner to renew. After grace period ends, the name is released to the market"
+              isLoading={ isLoading }
+            >
+              Expiration date
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value>
+              <IconSvg name="clock" boxSize={ 5 } color="gray.500" verticalAlign="middle" isLoading={ isLoading } mr={ 2 } mt="-2px"/>
+              { hasExpired && (
+                <>
+                  <Skeleton isLoaded={ !isLoading } display="inline" whiteSpace="pre-wrap" lineHeight="24px">
+                    { dayjs(query.data.expiry_date).fromNow() }
+                  </Skeleton>
+                  <TextSeparator color="gray.500"/>
+                </>
+              ) }
               <Skeleton isLoaded={ !isLoading } display="inline" whiteSpace="pre-wrap" lineHeight="24px">
-                { dayjs(query.data.expiry_date).fromNow() }
+                { dayjs(query.data.expiry_date).format('llll') }
               </Skeleton>
               <TextSeparator color="gray.500"/>
-            </>
-          ) }
-          <Skeleton isLoaded={ !isLoading } display="inline" whiteSpace="pre-wrap" lineHeight="24px">
-            { dayjs(query.data.expiry_date).format('llll') }
-          </Skeleton>
-          <TextSeparator color="gray.500"/>
-          <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline">
-            <NameDomainExpiryStatus date={ query.data?.expiry_date }/>
-          </Skeleton>
-        </DetailsInfoItem>
-      ) }
-      { query.data?.registrant && (
-        <DetailsInfoItem
-          title="Registrant"
-          hint="The account that owns the domain name and has the rights to edit its ownership and records"
-          isLoading={ isLoading }
-          columnGap={ 2 }
-          flexWrap="nowrap"
-        >
-          <AddressEntity
-            address={ query.data.registrant }
-            isLoading={ isLoading }
-          />
-          <Tooltip label="Lookup for related domain names">
-            <LinkInternal
-              flexShrink={ 0 }
-              display="inline-flex"
-              href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', address: query.data.registrant.hash } }) }
+              <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline">
+                <NameDomainExpiryStatus date={ query.data?.expiry_date }/>
+              </Skeleton>
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+
+        { query.data?.resolver_address && (
+          <>
+            <DetailsInfoItem.Label
+              hint="The resolver contract provides information about a domain name"
+              isLoading={ isLoading }
             >
-              <IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
-            </LinkInternal>
-          </Tooltip>
-        </DetailsInfoItem>
-      ) }
-      { query.data?.owner && (
-        <DetailsInfoItem
-          title="Owner"
-          hint="The account that owns the rights to edit the records of this domain name"
-          isLoading={ isLoading }
-          columnGap={ 2 }
-          flexWrap="nowrap"
-        >
-          <AddressEntity
-            address={ query.data.owner }
-            isLoading={ isLoading }
-          />
-          <Tooltip label="Lookup for related domain names">
-            <LinkInternal
-              flexShrink={ 0 }
-              display="inline-flex"
-              href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', address: query.data.owner.hash } }) }
+              Resolver
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value
             >
-              <IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
-            </LinkInternal>
-          </Tooltip>
-        </DetailsInfoItem>
-      ) }
-      { query.data?.wrapped_owner && (
-        <DetailsInfoItem
-          title="Manager"
-          hint="Owner of this NFT domain in NameWrapper contract"
-          isLoading={ isLoading }
-          columnGap={ 2 }
-          flexWrap="nowrap"
-        >
-          <AddressEntity
-            address={ query.data.wrapped_owner }
-            isLoading={ isLoading }
-          />
-          <Tooltip label="Lookup for related domain names">
-            <LinkInternal
-              flexShrink={ 0 }
-              display="inline-flex"
-              href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', address: query.data.wrapped_owner.hash } }) }
+              <AddressEntity
+                address={ query.data.resolver_address }
+                isLoading={ isLoading }
+              />
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+
+        { query.data?.registrant && (
+          <>
+            <DetailsInfoItem.Label
+              hint="The account that owns the domain name and has the rights to edit its ownership and records"
+              isLoading={ isLoading }
+            >
+              Registrant
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value
+              columnGap={ 2 }
+              flexWrap="nowrap"
             >
-              <IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
-            </LinkInternal>
-          </Tooltip>
-        </DetailsInfoItem>
-      ) }
-      { query.data?.tokens.map((token) => (
-        <DetailsInfoItem
-          key={ token.type }
-          title={ token.type === 'WRAPPED_DOMAIN_TOKEN' ? 'Wrapped token ID' : 'Token ID' }
-          hint={ `The ${ token.type === 'WRAPPED_DOMAIN_TOKEN' ? 'wrapped ' : '' }token ID of this domain name NFT` }
-          isLoading={ isLoading }
-          wordBreak="break-all"
-          whiteSpace="pre-wrap"
-        >
-          <NftEntity hash={ token.contract_hash } id={ token.id } isLoading={ isLoading } noIcon/>
-        </DetailsInfoItem>
-      )) }
-      { otherAddresses.length > 0 && (
-        <DetailsInfoItem
-          title="Other addresses"
-          hint="Other cryptocurrency addresses added to this domain name"
-          isLoading={ isLoading }
-          flexDir="column"
-          alignItems="flex-start"
-        >
-          { otherAddresses.map(([ type, address ]) => (
-            <Flex key={ type } columnGap={ 2 } minW="0" w="100%" overflow="hidden">
-              <Skeleton isLoaded={ !isLoading }>{ type }</Skeleton>
               <AddressEntity
-                address={{ hash: address }}
+                address={ query.data.registrant }
                 isLoading={ isLoading }
-                noLink
-                noIcon
               />
-            </Flex>
-          )) }
-        </DetailsInfoItem>
-      ) }
-    </Grid>
+              <Tooltip label="Lookup for related domain names">
+                <LinkInternal
+                  flexShrink={ 0 }
+                  display="inline-flex"
+                  href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', address: query.data.registrant.hash } }) }
+                >
+                  <IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
+                </LinkInternal>
+              </Tooltip>
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+
+        { query.data?.owner && (
+          <>
+            <DetailsInfoItem.Label
+              hint="The account that owns the rights to edit the records of this domain name"
+              isLoading={ isLoading }
+            >
+              Owner
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value
+              columnGap={ 2 }
+              flexWrap="nowrap"
+            >
+              <AddressEntity
+                address={ query.data.owner }
+                isLoading={ isLoading }
+              />
+              <Tooltip label="Lookup for related domain names">
+                <LinkInternal
+                  flexShrink={ 0 }
+                  display="inline-flex"
+                  href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', address: query.data.owner.hash } }) }
+                >
+                  <IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
+                </LinkInternal>
+              </Tooltip>
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+
+        { query.data?.wrapped_owner && (
+          <>
+            <DetailsInfoItem.Label
+              hint="Owner of this NFT domain in NameWrapper contract"
+              isLoading={ isLoading }
+            >
+              Manager
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value
+              columnGap={ 2 }
+              flexWrap="nowrap"
+            >
+              <AddressEntity
+                address={ query.data.wrapped_owner }
+                isLoading={ isLoading }
+              />
+              <Tooltip label="Lookup for related domain names">
+                <LinkInternal
+                  flexShrink={ 0 }
+                  display="inline-flex"
+                  href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', address: query.data.wrapped_owner.hash } }) }
+                >
+                  <IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
+                </LinkInternal>
+              </Tooltip>
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+
+        { query.data?.tokens.map((token) => {
+          const isProtocolBaseChain = stripTrailingSlash(query.data.protocol?.deployment_blockscout_base_url ?? '') === config.app.baseUrl;
+          const entityProps = {
+            isExternal: !isProtocolBaseChain ? true : false,
+            href: !isProtocolBaseChain ? (
+              stripTrailingSlash(query.data.protocol?.deployment_blockscout_base_url ?? '') +
+            route({ pathname: '/token/[hash]/instance/[id]', query: { hash: token.contract_hash, id: token.id } })
+            ) : undefined,
+          };
+
+          return (
+            <React.Fragment key={ token.type }>
+              <DetailsInfoItem.Label
+                hint={ `The ${ token.type === bens.TokenType.WRAPPED_DOMAIN_TOKEN ? 'wrapped ' : '' }token ID of this domain name NFT` }
+                isLoading={ isLoading }
+              >
+                { token.type === bens.TokenType.WRAPPED_DOMAIN_TOKEN ? 'Wrapped token ID' : 'Token ID' }
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value
+                wordBreak="break-all"
+                whiteSpace="pre-wrap"
+              >
+                <NftEntity { ...entityProps } hash={ token.contract_hash } id={ token.id } isLoading={ isLoading } noIcon/>
+              </DetailsInfoItem.Value>
+            </React.Fragment>
+          );
+        }) }
+
+        { otherAddresses.length > 0 && (
+          <>
+            <DetailsInfoItem.Label
+              hint="Other cryptocurrency addresses added to this domain name"
+              isLoading={ isLoading }
+            >
+              Other addresses
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value
+              flexDir="column"
+              alignItems="flex-start"
+            >
+              { otherAddresses.map(([ type, address ]) => (
+                <Flex key={ type } columnGap={ 2 } minW="0" w="100%" overflow="hidden">
+                  <Skeleton isLoaded={ !isLoading }>{ type }</Skeleton>
+                  <AddressEntity
+                    address={{ hash: address }}
+                    isLoading={ isLoading }
+                    noLink
+                    noIcon
+                  />
+                </Flex>
+              )) }
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+      </Grid>
+    </>
   );
 };
 
diff --git a/ui/nameDomain/NameDomainHistory.tsx b/ui/nameDomain/NameDomainHistory.tsx
index ba5747ad46..40780267f6 100644
--- a/ui/nameDomain/NameDomainHistory.tsx
+++ b/ui/nameDomain/NameDomainHistory.tsx
@@ -2,6 +2,8 @@ import { Box, Hide, Show } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import type * as bens from '@blockscout/bens-types';
+
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import getQueryParamString from 'lib/router/getQueryParamString';
@@ -12,7 +14,11 @@ import NameDomainHistoryListItem from './history/NameDomainHistoryListItem';
 import NameDomainHistoryTable from './history/NameDomainHistoryTable';
 import { getNextSortValue, type Sort, type SortField } from './history/utils';
 
-const NameDomainHistory = () => {
+interface Props {
+  domain: bens.DetailedDomain | undefined;
+}
+
+const NameDomainHistory = ({ domain }: Props) => {
   const router = useRouter();
   const domainName = getQueryParamString(router.query.name);
 
@@ -40,12 +46,20 @@ const NameDomainHistory = () => {
     <>
       <Show below="lg" ssr={ false }>
         <Box>
-          { data?.items.map((item, index) => <NameDomainHistoryListItem key={ index } { ...item } isLoading={ isPlaceholderData }/>) }
+          { data?.items.map((item, index) => (
+            <NameDomainHistoryListItem
+              key={ index }
+              event={ item }
+              domain={ domain }
+              isLoading={ isPlaceholderData }
+            />
+          )) }
         </Box>
       </Show>
       <Hide below="lg" ssr={ false }>
         <NameDomainHistoryTable
-          data={ data }
+          history={ data }
+          domain={ domain }
           isLoading={ isPlaceholderData }
           sort={ sort }
           onSortToggle={ handleSortToggle }
diff --git a/ui/nameDomain/details/NameDomainDetailsAlert.tsx b/ui/nameDomain/details/NameDomainDetailsAlert.tsx
new file mode 100644
index 0000000000..02b74ec93f
--- /dev/null
+++ b/ui/nameDomain/details/NameDomainDetailsAlert.tsx
@@ -0,0 +1,28 @@
+import { Alert } from '@chakra-ui/react';
+import React from 'react';
+
+import type * as bens from '@blockscout/bens-types';
+
+import LinkExternal from 'ui/shared/links/LinkExternal';
+
+interface Props {
+  data: bens.DetailedDomain | undefined;
+}
+
+const NameDomainDetailsAlert = ({ data }: Props) => {
+
+  if (!data?.stored_offchain && !data?.resolved_with_wildcard) {
+    return null;
+  }
+
+  return (
+    <Alert status="info" colorScheme="gray" display="inline-block" whiteSpace="pre-wrap" mb={ 6 }>
+      <span>The domain name is resolved offchain using </span>
+      { data.stored_offchain && <LinkExternal href="https://eips.ethereum.org/EIPS/eip-3668">EIP-3668: CCIP Read</LinkExternal> }
+      { data.stored_offchain && data.resolved_with_wildcard && <span> & </span> }
+      { data.resolved_with_wildcard && <LinkExternal href="https://eips.ethereum.org/EIPS/eip-2544">EIP-2544: Wildcard Resolution</LinkExternal> }
+    </Alert>
+  );
+};
+
+export default React.memo(NameDomainDetailsAlert);
diff --git a/ui/nameDomain/history/NameDomainHistoryListItem.tsx b/ui/nameDomain/history/NameDomainHistoryListItem.tsx
index afa2e526b3..ebc43e607e 100644
--- a/ui/nameDomain/history/NameDomainHistoryListItem.tsx
+++ b/ui/nameDomain/history/NameDomainHistoryListItem.tsx
@@ -1,47 +1,64 @@
-import { Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomainEvent } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
-import dayjs from 'lib/date/dayjs';
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import stripTrailingSlash from 'lib/stripTrailingSlash';
 import Tag from 'ui/shared/chakra/Tag';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
-type Props = EnsDomainEvent & {
+interface Props {
+  event: bens.DomainEvent;
+  domain: bens.DetailedDomain | undefined;
   isLoading?: boolean;
 }
 
-const NameDomainHistoryListItem = ({ isLoading, transaction_hash: transactionHash, timestamp, from_address: fromAddress, action }: Props) => {
+const NameDomainHistoryListItem = ({ isLoading, domain, event }: Props) => {
+  const isProtocolBaseChain = stripTrailingSlash(domain?.protocol?.deployment_blockscout_base_url ?? '') === config.app.baseUrl;
+  const txEntityProps = {
+    isExternal: !isProtocolBaseChain ? true : false,
+    href: !isProtocolBaseChain ? (
+      stripTrailingSlash(domain?.protocol?.deployment_blockscout_base_url ?? '') +
+      route({ pathname: '/tx/[hash]', query: { hash: event.transaction_hash } })
+    ) : undefined,
+  };
+
   return (
     <ListItemMobileGrid.Container>
       <ListItemMobileGrid.Label isLoading={ isLoading }>Txn hash</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <TxEntity hash={ transactionHash } isLoading={ isLoading } fontWeight={ 500 }/>
+        <TxEntity { ...txEntityProps } hash={ event.transaction_hash } isLoading={ isLoading } fontWeight={ 500 } truncation="constant_long"/>
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block">
-          <span>{ dayjs(timestamp).fromNow() }</span>
-        </Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ event.timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
       </ListItemMobileGrid.Value>
 
-      { fromAddress && (
+      { event.from_address && (
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>From</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
-            <AddressEntity address={ fromAddress } isLoading={ isLoading }/>
+            <AddressEntity address={ event.from_address } isLoading={ isLoading } truncation="constant"/>
           </ListItemMobileGrid.Value>
         </>
       ) }
 
-      { action && (
+      { event.action && (
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>Method</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
-            <Tag colorScheme="gray" isLoading={ isLoading }>{ action }</Tag>
+            <Tag colorScheme="gray" isLoading={ isLoading }>{ event.action }</Tag>
           </ListItemMobileGrid.Value>
         </>
       ) }
diff --git a/ui/nameDomain/history/NameDomainHistoryTable.tsx b/ui/nameDomain/history/NameDomainHistoryTable.tsx
index f6560372eb..90fc301915 100644
--- a/ui/nameDomain/history/NameDomainHistoryTable.tsx
+++ b/ui/nameDomain/history/NameDomainHistoryTable.tsx
@@ -1,7 +1,7 @@
 import { Table, Tbody, Tr, Th, Link } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomainEventsResponse } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
 import IconSvg from 'ui/shared/IconSvg';
 import { default as Thead } from 'ui/shared/TheadSticky';
@@ -11,17 +11,18 @@ import type { Sort } from './utils';
 import { sortFn } from './utils';
 
 interface Props {
-  data: EnsDomainEventsResponse | undefined;
+  history: bens.ListDomainEventsResponse | undefined;
+  domain: bens.DetailedDomain | undefined;
   isLoading?: boolean;
   sort: Sort | undefined;
   onSortToggle: (event: React.MouseEvent) => void;
 }
 
-const NameDomainHistoryTable = ({ data, isLoading, sort, onSortToggle }: Props) => {
+const NameDomainHistoryTable = ({ history, domain, isLoading, sort, onSortToggle }: Props) => {
   const sortIconTransform = sort?.includes('asc') ? 'rotate(-90deg)' : 'rotate(90deg)';
 
   return (
-    <Table variant="simple" size="sm">
+    <Table>
       <Thead top={ 0 }>
         <Tr>
           <Th width="25%">Txn hash</Th>
@@ -47,10 +48,10 @@ const NameDomainHistoryTable = ({ data, isLoading, sort, onSortToggle }: Props)
       </Thead>
       <Tbody>
         {
-          data?.items
+          history?.items
             .slice()
             .sort(sortFn(sort))
-            .map((item, index) => <NameDomainHistoryTableItem key={ index } { ...item } isLoading={ isLoading }/>)
+            .map((item, index) => <NameDomainHistoryTableItem key={ index } event={ item } domain={ domain } isLoading={ isLoading }/>)
         }
       </Tbody>
     </Table>
diff --git a/ui/nameDomain/history/NameDomainHistoryTableItem.tsx b/ui/nameDomain/history/NameDomainHistoryTableItem.tsx
index d52e4626ca..cd287cc98d 100644
--- a/ui/nameDomain/history/NameDomainHistoryTableItem.tsx
+++ b/ui/nameDomain/history/NameDomainHistoryTableItem.tsx
@@ -1,34 +1,58 @@
-import { Tr, Td, Skeleton } from '@chakra-ui/react';
+import { Tr, Td } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomainEvent } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
-import dayjs from 'lib/date/dayjs';
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import stripTrailingSlash from 'lib/stripTrailingSlash';
 import Tag from 'ui/shared/chakra/Tag';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
-type Props = EnsDomainEvent & {
+interface Props {
+  event: bens.DomainEvent;
+  domain: bens.DetailedDomain | undefined;
   isLoading?: boolean;
 }
 
-const NameDomainHistoryTableItem = ({ isLoading, transaction_hash: transactionHash, from_address: fromAddress, action, timestamp }: Props) => {
+const NameDomainHistoryTableItem = ({ isLoading, event, domain }: Props) => {
+  const isProtocolBaseChain = stripTrailingSlash(domain?.protocol?.deployment_blockscout_base_url ?? '') === config.app.baseUrl;
+  const txEntityProps = {
+    isExternal: !isProtocolBaseChain ? true : false,
+    href: !isProtocolBaseChain ? (
+      stripTrailingSlash(domain?.protocol?.deployment_blockscout_base_url ?? '') +
+      route({ pathname: '/tx/[hash]', query: { hash: event.transaction_hash } })
+    ) : undefined,
+  };
 
   return (
     <Tr>
       <Td verticalAlign="middle">
-        <TxEntity hash={ transactionHash } isLoading={ isLoading } fontWeight={ 700 }/>
+        <TxEntity
+          { ...txEntityProps }
+          hash={ event.transaction_hash }
+          isLoading={ isLoading }
+          fontWeight={ 700 }
+          noIcon
+          truncation="constant_long"
+        />
       </Td>
       <Td pl={ 9 } verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block">
-          <span>{ dayjs(timestamp).fromNow() }</span>
-        </Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ event.timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
       </Td>
       <Td verticalAlign="middle">
-        { fromAddress && <AddressEntity address={ fromAddress } isLoading={ isLoading }/> }
+        { event.from_address && <AddressEntity address={ event.from_address } isLoading={ isLoading } truncation="constant"/> }
       </Td>
       <Td verticalAlign="middle">
-        { action && <Tag colorScheme="gray" isLoading={ isLoading }>{ action }</Tag> }
+        { event.action && <Tag colorScheme="gray" isLoading={ isLoading }>{ event.action }</Tag> }
       </Td>
     </Tr>
   );
diff --git a/ui/nameDomain/history/utils.ts b/ui/nameDomain/history/utils.ts
index 168050df2d..585856901e 100644
--- a/ui/nameDomain/history/utils.ts
+++ b/ui/nameDomain/history/utils.ts
@@ -1,4 +1,4 @@
-import type { EnsDomainEvent } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
 import getNextSortValueShared from 'ui/shared/sort/getNextSortValue';
 
@@ -11,7 +11,7 @@ const SORT_SEQUENCE: Record<SortField, Array<Sort | undefined>> = {
 
 export const getNextSortValue = (getNextSortValueShared<SortField, Sort>).bind(undefined, SORT_SEQUENCE);
 
-export const sortFn = (sort: Sort | undefined) => (a: EnsDomainEvent, b: EnsDomainEvent) => {
+export const sortFn = (sort: Sort | undefined) => (a: bens.DomainEvent, b: bens.DomainEvent) => {
   switch (sort) {
     case 'timestamp-asc': {
       return b.timestamp.localeCompare(a.timestamp);
diff --git a/ui/nameDomains/NameDomainsActionBar.tsx b/ui/nameDomains/NameDomainsActionBar.tsx
index ff57107799..8518abceb2 100644
--- a/ui/nameDomains/NameDomainsActionBar.tsx
+++ b/ui/nameDomains/NameDomainsActionBar.tsx
@@ -1,6 +1,7 @@
-import { Checkbox, CheckboxGroup, HStack, Text } from '@chakra-ui/react';
+import { Box, Checkbox, CheckboxGroup, Flex, HStack, Image, Link, Text, VStack, chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import type * as bens from '@blockscout/bens-types';
 import type { EnsDomainLookupFiltersOptions } from 'types/api/ens';
 import type { PaginationParams } from 'ui/shared/pagination/types';
 
@@ -8,6 +9,7 @@ import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
 import ActionBar from 'ui/shared/ActionBar';
 import FilterInput from 'ui/shared/filters/FilterInput';
 import PopoverFilter from 'ui/shared/filters/PopoverFilter';
+import IconSvg from 'ui/shared/IconSvg';
 import Pagination from 'ui/shared/pagination/Pagination';
 import Sort from 'ui/shared/sort/Sort';
 
@@ -20,6 +22,9 @@ interface Props {
   onSearchChange: (value: string) => void;
   filterValue: EnsDomainLookupFiltersOptions;
   onFilterValueChange: (nextValue: EnsDomainLookupFiltersOptions) => void;
+  protocolsData: Array<bens.ProtocolInfo> | undefined;
+  protocolsFilterValue: Array<string>;
+  onProtocolsFilterChange: (nextValue: Array<string>) => void;
   sort: TSort | undefined;
   onSortChange: (nextValue: TSort | undefined) => void;
   isLoading: boolean;
@@ -36,6 +41,9 @@ const NameDomainsActionBar = ({
   isLoading,
   isAddressSearch,
   pagination,
+  protocolsData,
+  protocolsFilterValue,
+  onProtocolsFilterChange,
 }: Props) => {
   const isInitialLoading = useIsInitialLoading(isLoading);
 
@@ -45,32 +53,78 @@ const NameDomainsActionBar = ({
       minW={{ base: 'auto', lg: '250px' }}
       size="xs"
       onChange={ onSearchChange }
-      placeholder="Search by name"
+      placeholder="Search by name or address"
       initialValue={ searchTerm }
       isLoading={ isInitialLoading }
     />
   );
 
+  const handleProtocolReset = React.useCallback(() => {
+    onProtocolsFilterChange([]);
+  }, [ onProtocolsFilterChange ]);
+
+  const filterGroupDivider = <Box w="100%" borderBottomWidth="1px" borderBottomColor="divider" my={ 4 }/>;
+
+  const appliedFiltersNum = filterValue.length + (protocolsData && protocolsData.length > 1 ? protocolsFilterValue.length : 0);
+
   const filter = (
-    <PopoverFilter appliedFiltersNum={ filterValue.length } contentProps={{ w: '220px' }} isLoading={ isInitialLoading }>
+    <PopoverFilter appliedFiltersNum={ appliedFiltersNum } contentProps={{ minW: '220px', w: 'fit-content' }} isLoading={ isInitialLoading }>
       <div>
+        { protocolsData && protocolsData.length > 1 && (
+          <>
+            <Flex justifyContent="space-between" fontSize="sm" mb={ 3 }>
+              <Text fontWeight={ 600 } variant="secondary">Protocol</Text>
+              <Link
+                onClick={ handleProtocolReset }
+                color={ protocolsData.length > 0 ? 'link' : 'text_secondary' }
+                _hover={{
+                  color: protocolsData.length > 0 ? 'link_hovered' : 'text_secondary',
+                }}
+              >
+                Reset
+              </Link>
+            </Flex>
+            <CheckboxGroup size="lg" value={ protocolsFilterValue } defaultValue={ protocolsFilterValue } onChange={ onProtocolsFilterChange }>
+              <VStack gap={ 5 } alignItems="flex-start">
+                { protocolsData.map((protocol) => {
+                  const topLevelDomains = protocol.tld_list.map((domain) => `.${ domain }`).join(' ');
+                  return (
+                    <Checkbox key={ protocol.id } value={ protocol.id }>
+                      <Flex alignItems="center">
+                        <Image
+                          src={ protocol.icon_url }
+                          boxSize={ 5 }
+                          borderRadius="sm"
+                          mr={ 2 }
+                          alt={ `${ protocol.title } protocol icon` }
+                          fallback={ <IconSvg name="ENS_slim" boxSize={ 5 } mr={ 2 }/> }
+                          fallbackStrategy={ protocol.icon_url ? 'onError' : 'beforeLoadOrError' }
+                        />
+                        <span>{ protocol.short_name }</span>
+                        <chakra.span color="text_secondary" whiteSpace="pre"> { topLevelDomains }</chakra.span>
+                      </Flex>
+                    </Checkbox>
+                  );
+                }) }
+              </VStack>
+            </CheckboxGroup>
+            { filterGroupDivider }
+          </>
+        ) }
         <CheckboxGroup size="lg" onChange={ onFilterValueChange } value={ filterValue } defaultValue={ filterValue }>
           <Text variant="secondary" fontWeight={ 600 } mb={ 3 } fontSize="sm">Address</Text>
-          <Checkbox value="owned_by" display="block" isDisabled={ !isAddressSearch }>
+          <Checkbox value="owned_by" isDisabled={ !isAddressSearch } display="block">
             Owned by
           </Checkbox>
           <Checkbox
             value="resolved_to"
-            display="block"
             mt={ 5 }
-            mb={ 4 }
-            pb={ 4 }
-            borderBottom="1px solid"
-            borderColor="divider"
             isDisabled={ !isAddressSearch }
+            display="block"
           >
             Resolved to address
           </Checkbox>
+          { filterGroupDivider }
           <Text variant="secondary" fontWeight={ 600 } mb={ 3 } fontSize="sm">Status</Text>
           <Checkbox value="with_inactive" display="block">
             Include expired
@@ -82,9 +136,10 @@ const NameDomainsActionBar = ({
 
   const sortButton = (
     <Sort
+      name="name_domains_sorting"
+      defaultValue={ sort }
       options={ SORT_OPTIONS }
-      sort={ sort }
-      setSort={ onSortChange }
+      onChange={ onSortChange }
       isLoading={ isInitialLoading }
     />
   );
diff --git a/ui/nameDomains/NameDomainsListItem.tsx b/ui/nameDomains/NameDomainsListItem.tsx
index ac7275d9cc..63ba315ffa 100644
--- a/ui/nameDomains/NameDomainsListItem.tsx
+++ b/ui/nameDomains/NameDomainsListItem.tsx
@@ -1,7 +1,7 @@
 import { Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomain } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
 import dayjs from 'lib/date/dayjs';
 import NameDomainExpiryStatus from 'ui/nameDomain/NameDomainExpiryStatus';
@@ -9,16 +9,23 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 
-interface Props extends EnsDomain {
+interface Props extends bens.Domain {
   isLoading: boolean;
 }
 
-const NameDomainsListItem = ({ name, isLoading, resolved_address: resolvedAddress, registration_date: registrationDate, expiry_date: expiryDate }: Props) => {
+const NameDomainsListItem = ({
+  name,
+  isLoading,
+  resolved_address: resolvedAddress,
+  registration_date: registrationDate,
+  expiry_date: expiryDate,
+  protocol,
+}: Props) => {
   return (
     <ListItemMobileGrid.Container>
       <ListItemMobileGrid.Label isLoading={ isLoading }>Domain</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <EnsEntity name={ name } isLoading={ isLoading } fontWeight={ 500 }/>
+        <EnsEntity domain={ name } protocol={ protocol } isLoading={ isLoading } fontWeight={ 500 }/>
       </ListItemMobileGrid.Value>
 
       { resolvedAddress && (
@@ -35,7 +42,7 @@ const NameDomainsListItem = ({ name, isLoading, resolved_address: resolvedAddres
           <ListItemMobileGrid.Label isLoading={ isLoading }>Registered on</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
             <Skeleton isLoaded={ !isLoading }>
-              <div>{ dayjs(registrationDate).format('MMM DD YYYY HH:mm:ss A') }</div>
+              <div>{ dayjs(registrationDate).format('lll') }</div>
               <div> { dayjs(registrationDate).fromNow() }</div>
             </Skeleton>
           </ListItemMobileGrid.Value>
@@ -47,7 +54,7 @@ const NameDomainsListItem = ({ name, isLoading, resolved_address: resolvedAddres
           <ListItemMobileGrid.Label isLoading={ isLoading }>Expiration date</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
             <Skeleton isLoaded={ !isLoading } whiteSpace="pre-wrap">
-              <div>{ dayjs(expiryDate).format('MMM DD YYYY HH:mm:ss A') } </div>
+              <div>{ dayjs(expiryDate).format('lll') } </div>
               <NameDomainExpiryStatus date={ expiryDate }/>
             </Skeleton>
           </ListItemMobileGrid.Value>
diff --git a/ui/nameDomains/NameDomainsTable.tsx b/ui/nameDomains/NameDomainsTable.tsx
index ec46b7cec8..45f20d4078 100644
--- a/ui/nameDomains/NameDomainsTable.tsx
+++ b/ui/nameDomains/NameDomainsTable.tsx
@@ -1,8 +1,9 @@
 import { Table, Tbody, Tr, Th, Link } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomainLookupResponse } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import IconSvg from 'ui/shared/IconSvg';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
@@ -10,7 +11,7 @@ import NameDomainsTableItem from './NameDomainsTableItem';
 import { type Sort } from './utils';
 
 interface Props {
-  data: EnsDomainLookupResponse | undefined;
+  data: bens.LookupDomainNameResponse | undefined;
   isLoading?: boolean;
   sort: Sort | undefined;
   onSortToggle: (event: React.MouseEvent) => void;
@@ -20,8 +21,8 @@ const NameDomainsTable = ({ data, isLoading, sort, onSortToggle }: Props) => {
   const sortIconTransform = sort?.toLowerCase().includes('asc') ? 'rotate(-90deg)' : 'rotate(90deg)';
 
   return (
-    <Table variant="simple" size="sm">
-      <Thead top={ 80 }>
+    <Table>
+      <Thead top={ ACTION_BAR_HEIGHT_DESKTOP }>
         <Tr>
           <Th width="25%">Domain</Th>
           <Th width="25%">Address</Th>
diff --git a/ui/nameDomains/NameDomainsTableItem.tsx b/ui/nameDomains/NameDomainsTableItem.tsx
index a4147ae8cf..ed79386a5d 100644
--- a/ui/nameDomains/NameDomainsTableItem.tsx
+++ b/ui/nameDomains/NameDomainsTableItem.tsx
@@ -1,23 +1,30 @@
 import { chakra, Tr, Td, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomain } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
 import dayjs from 'lib/date/dayjs';
 import NameDomainExpiryStatus from 'ui/nameDomain/NameDomainExpiryStatus';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 
-type Props = EnsDomain & {
+type Props = bens.Domain & {
   isLoading?: boolean;
-}
+};
 
-const NameDomainsTableItem = ({ isLoading, name, resolved_address: resolvedAddress, registration_date: registrationDate, expiry_date: expiryDate }: Props) => {
+const NameDomainsTableItem = ({
+  isLoading,
+  name,
+  resolved_address: resolvedAddress,
+  registration_date: registrationDate,
+  expiry_date: expiryDate,
+  protocol,
+}: Props) => {
 
   return (
     <Tr>
       <Td verticalAlign="middle">
-        <EnsEntity name={ name } isLoading={ isLoading } fontWeight={ 600 }/>
+        <EnsEntity domain={ name } protocol={ protocol } isLoading={ isLoading } fontWeight={ 600 }/>
       </Td>
       <Td verticalAlign="middle">
         { resolvedAddress && <AddressEntity address={ resolvedAddress } isLoading={ isLoading } fontWeight={ 500 }/> }
@@ -25,7 +32,7 @@ const NameDomainsTableItem = ({ isLoading, name, resolved_address: resolvedAddre
       <Td verticalAlign="middle" pl={ 9 }>
         { registrationDate && (
           <Skeleton isLoaded={ !isLoading }>
-            { dayjs(registrationDate).format('MMM DD YYYY HH:mm:ss A') }
+            { dayjs(registrationDate).format('lll') }
             <chakra.span color="text_secondary"> { dayjs(registrationDate).fromNow() }</chakra.span>
           </Skeleton>
         ) }
@@ -33,7 +40,7 @@ const NameDomainsTableItem = ({ isLoading, name, resolved_address: resolvedAddre
       <Td verticalAlign="middle">
         { expiryDate && (
           <Skeleton isLoaded={ !isLoading } whiteSpace="pre-wrap">
-            <span>{ dayjs(expiryDate).format('MMM DD YYYY HH:mm:ss A') } </span>
+            <span>{ dayjs(expiryDate).format('lll') } </span>
             <NameDomainExpiryStatus date={ expiryDate }/>
           </Skeleton>
         ) }
diff --git a/ui/nameDomains/utils.ts b/ui/nameDomains/utils.ts
index c240e5c93e..38f9f2c91d 100644
--- a/ui/nameDomains/utils.ts
+++ b/ui/nameDomains/utils.ts
@@ -1,15 +1,15 @@
 import type { EnsLookupSorting } from 'types/api/ens';
+import type { SelectOption } from 'ui/shared/select/types';
 
 import getNextSortValueShared from 'ui/shared/sort/getNextSortValue';
-import type { Option } from 'ui/shared/sort/Sort';
 
 export type SortField = EnsLookupSorting['sort'];
 export type Sort = `${ EnsLookupSorting['sort'] }-${ EnsLookupSorting['order'] }`;
 
-export const SORT_OPTIONS: Array<Option<Sort>> = [
-  { title: 'Default', id: undefined },
-  { title: 'Registered on descending', id: 'registration_date-DESC' },
-  { title: 'Registered on ascending', id: 'registration_date-ASC' },
+export const SORT_OPTIONS: Array<SelectOption<Sort>> = [
+  { label: 'Default', value: undefined },
+  { label: 'Registered on descending', value: 'registration_date-DESC' },
+  { label: 'Registered on ascending', value: 'registration_date-ASC' },
 ];
 
 const SORT_SEQUENCE: Record<SortField, Array<Sort | undefined>> = {
diff --git a/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx
new file mode 100644
index 0000000000..51bf962945
--- /dev/null
+++ b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx
@@ -0,0 +1,76 @@
+import { Flex, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { OptimisticL2OutputRootsItem } from 'types/api/optimisticL2';
+
+import config from 'configs/app';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import HashStringShorten from 'ui/shared/HashStringShorten';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: OptimisticL2OutputRootsItem; isLoading?: boolean };
+
+const OptimisticL2OutputRootsListItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') {
+    return null;
+  }
+
+  return (
+    <ListItemMobileGrid.Container>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 output index</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value fontWeight={ 600 } color="text">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.l2_output_index }</Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TimeAgoWithTooltip
+          timestamp={ item.l1_timestamp }
+          isLoading={ isLoading }
+          display="inline-block"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 block #</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BlockEntityL2
+          isLoading={ isLoading }
+          number={ item.l2_block_number }
+          fontSize="sm"
+          lineHeight={ 5 }
+          noIcon
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value py="3px">
+        <TxEntityL1
+          isLoading={ isLoading }
+          hash={ item.l1_transaction_hash }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Output root</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Flex overflow="hidden" whiteSpace="nowrap" alignItems="center" w="100%" justifyContent="start">
+          <Skeleton isLoaded={ !isLoading } color="text_secondary">
+            <HashStringShorten hash={ item.output_root } type="long"/>
+          </Skeleton>
+          <CopyToClipboard text={ item.output_root } isLoading={ isLoading }/>
+        </Flex>
+      </ListItemMobileGrid.Value>
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default OptimisticL2OutputRootsListItem;
diff --git a/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTable.tsx b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTable.tsx
new file mode 100644
index 0000000000..e96d22a01f
--- /dev/null
+++ b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTable.tsx
@@ -0,0 +1,41 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { OptimisticL2OutputRootsItem } from 'types/api/optimisticL2';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import OptimisticL2OutputRootsTableItem from './OptimisticL2OutputRootsTableItem';
+
+type Props = {
+  items: Array<OptimisticL2OutputRootsItem>;
+  top: number;
+  isLoading?: boolean;
+};
+
+const OptimisticL2OutputRootsTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table minW="900px">
+      <Thead top={ top }>
+        <Tr>
+          <Th width="160px">L2 output index</Th>
+          <Th width="20%">Age</Th>
+          <Th width="20%">L2 block #</Th>
+          <Th width="30%">L1 txn hash</Th>
+          <Th width="30%">Output root</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <OptimisticL2OutputRootsTableItem
+            key={ item.l2_output_index + (Number(isLoading ? index : '') ? String(index) : '') }
+            item={ item }
+            isLoading={ isLoading }
+          />
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default OptimisticL2OutputRootsTable;
diff --git a/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx
new file mode 100644
index 0000000000..4e2fd76c73
--- /dev/null
+++ b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx
@@ -0,0 +1,67 @@
+import { Flex, Td, Tr, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { OptimisticL2OutputRootsItem } from 'types/api/optimisticL2';
+
+import config from 'configs/app';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import HashStringShorten from 'ui/shared/HashStringShorten';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: OptimisticL2OutputRootsItem; isLoading?: boolean };
+
+const OptimisticL2OutputRootsTableItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') {
+    return null;
+  }
+
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.l2_output_index }</Skeleton>
+      </Td>
+      <Td verticalAlign="middle">
+        <TimeAgoWithTooltip
+          timestamp={ item.l1_timestamp }
+          isLoading={ isLoading }
+          display="inline-block"
+          color="text_secondary"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <BlockEntityL2
+          isLoading={ isLoading }
+          number={ item.l2_block_number }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+          noIcon
+        />
+      </Td>
+      <Td verticalAlign="middle" pr={ 12 }>
+        <TxEntityL1
+          isLoading={ isLoading }
+          hash={ item.l1_transaction_hash }
+          fontSize="sm"
+          lineHeight={ 5 }
+          noIcon
+          truncation="constant_long"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <Flex overflow="hidden" w="100%" alignItems="center">
+          <Skeleton isLoaded={ !isLoading }>
+            <HashStringShorten hash={ item.output_root } type="long"/>
+          </Skeleton>
+          <CopyToClipboard text={ item.output_root } ml={ 2 } isLoading={ isLoading }/>
+        </Flex>
+      </Td>
+    </Tr>
+  );
+};
+
+export default OptimisticL2OutputRootsTableItem;
diff --git a/ui/pages/Accounts.pw.tsx b/ui/pages/Accounts.pw.tsx
index 77eb639235..d9d9784384 100644
--- a/ui/pages/Accounts.pw.tsx
+++ b/ui/pages/Accounts.pw.tsx
@@ -1,52 +1,43 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import type { AddressesResponse } from 'types/api/addresses';
 
 import * as addressMocks from 'mocks/address/address';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import Accounts from './Accounts';
 
-const ADDRESSES_API_URL = buildApiUrl('addresses');
-
 const addresses: AddressesResponse = {
   items: [
     {
       ...addressMocks.withName,
-      tx_count: '1',
+      transaction_count: '1',
       coin_balance: '12345678901234567890000',
-    }, {
+    },
+    {
       ...addressMocks.token,
-      tx_count: '109123890123',
+      transaction_count: '109123890123',
       coin_balance: '22222345678901234567890000',
       ens_domain_name: null,
-    }, {
+    },
+    {
       ...addressMocks.withoutName,
-      tx_count: '11',
+      transaction_count: '11',
       coin_balance: '1000000000000000000',
     },
+    {
+      ...addressMocks.eoa,
+      transaction_count: '420',
+      coin_balance: '123456',
+    },
   ],
   total_supply: '25222000',
   next_page_params: null,
 };
 
-test('base view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(ADDRESSES_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(addresses),
-  }));
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Accounts/>
-    </TestApp>,
-  );
-
+test('base view +@mobile +@dark-mode', async({ render, mockTextAd, mockApiResponse }) => {
+  await mockTextAd();
+  await mockApiResponse('addresses', addresses);
+  const component = await render(<Accounts/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/pages/Accounts.tsx b/ui/pages/Accounts.tsx
index ce9a8009bc..602cb676b0 100644
--- a/ui/pages/Accounts.tsx
+++ b/ui/pages/Accounts.tsx
@@ -2,18 +2,17 @@ import { Hide, Show } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
+import getItemIndex from 'lib/getItemIndex';
 import { TOP_ADDRESS } from 'stubs/address';
 import { generateListStub } from 'stubs/utils';
 import AddressesListItem from 'ui/addresses/AddressesListItem';
 import AddressesTable from 'ui/addresses/AddressesTable';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
-const PAGE_SIZE = 50;
-
 const Accounts = () => {
   const { isError, isPlaceholderData, data, pagination } = useQueryWithPages({
     resourceName: 'addresses',
@@ -39,7 +38,7 @@ const Accounts = () => {
     </ActionBar>
   );
 
-  const pageStartIndex = (pagination.page - 1) * PAGE_SIZE + 1;
+  const pageStartIndex = getItemIndex(0, pagination.page);
   const totalSupply = React.useMemo(() => {
     return BigNumber(data?.total_supply || '0');
   }, [ data?.total_supply ]);
@@ -48,7 +47,7 @@ const Accounts = () => {
     <>
       <Hide below="lg" ssr={ false }>
         <AddressesTable
-          top={ pagination.isVisible ? 80 : 0 }
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
           items={ data.items }
           totalSupply={ totalSupply }
           pageStartIndex={ pageStartIndex }
diff --git a/ui/pages/AccountsLabelSearch.pw.tsx b/ui/pages/AccountsLabelSearch.pw.tsx
new file mode 100644
index 0000000000..98ba6efcc2
--- /dev/null
+++ b/ui/pages/AccountsLabelSearch.pw.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import type { AddressesMetadataSearchResult } from 'types/api/addresses';
+
+import * as addressMocks from 'mocks/address/address';
+import { test, expect } from 'playwright/lib';
+
+import AccountsLabelSearch from './AccountsLabelSearch';
+
+const addresses: AddressesMetadataSearchResult = {
+  items: [
+    {
+      ...addressMocks.withName,
+      transaction_count: '1',
+      coin_balance: '12345678901234567890000',
+    },
+    {
+      ...addressMocks.token,
+      transaction_count: '109123890123',
+      coin_balance: '22222345678901234567890000',
+      ens_domain_name: null,
+    },
+    {
+      ...addressMocks.withoutName,
+      transaction_count: '11',
+      coin_balance: '1000000000000000000',
+    },
+    {
+      ...addressMocks.eoa,
+      transaction_count: '420',
+      coin_balance: null,
+    },
+  ],
+  next_page_params: null,
+};
+
+const hooksConfig = {
+  router: {
+    query: {
+      slug: 'euler-finance-exploit',
+      tagType: 'generic',
+      tagName: 'Euler finance exploit',
+    },
+  },
+};
+
+test('base view +@mobile', async({ render, mockTextAd, mockApiResponse }) => {
+  await mockTextAd();
+  await mockApiResponse(
+    'addresses_metadata_search',
+    addresses,
+    {
+      queryParams: {
+        slug: 'euler-finance-exploit',
+        tag_type: 'generic',
+      },
+    },
+  );
+  const component = await render(<AccountsLabelSearch/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/AccountsLabelSearch.tsx b/ui/pages/AccountsLabelSearch.tsx
new file mode 100644
index 0000000000..8ed107858e
--- /dev/null
+++ b/ui/pages/AccountsLabelSearch.tsx
@@ -0,0 +1,113 @@
+import { chakra, Flex, Hide, Show, Skeleton } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { EntityTag as TEntityTag, EntityTagType } from 'ui/shared/EntityTags/types';
+
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { TOP_ADDRESS } from 'stubs/address';
+import { generateListStub } from 'stubs/utils';
+import AddressesLabelSearchListItem from 'ui/addressesLabelSearch/AddressesLabelSearchListItem';
+import AddressesLabelSearchTable from 'ui/addressesLabelSearch/AddressesLabelSearchTable';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import EntityTag from 'ui/shared/EntityTags/EntityTag';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+
+const AccountsLabelSearch = () => {
+
+  const router = useRouter();
+  const slug = getQueryParamString(router.query.slug);
+  const tagType = getQueryParamString(router.query.tagType);
+  const tagName = getQueryParamString(router.query.tagName);
+
+  const { isError, isPlaceholderData, data, pagination } = useQueryWithPages({
+    resourceName: 'addresses_metadata_search',
+    filters: {
+      slug,
+      tag_type: tagType,
+    },
+    options: {
+      placeholderData: generateListStub<'addresses_metadata_search'>(
+        TOP_ADDRESS,
+        50,
+        {
+          next_page_params: null,
+        },
+      ),
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Hide below="lg" ssr={ false }>
+        <AddressesLabelSearchTable
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+          items={ data.items }
+          isLoading={ isPlaceholderData }
+        />
+      </Hide>
+      <Show below="lg" ssr={ false }>
+        { data.items.map((item, index) => {
+          return (
+            <AddressesLabelSearchListItem
+              key={ item.hash + (isPlaceholderData ? index : '') }
+              item={ item }
+              isLoading={ isPlaceholderData }
+            />
+          );
+        }) }
+      </Show>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (isError) {
+      return null;
+    }
+
+    const num = data?.items.length || 0;
+
+    const tagData: TEntityTag = {
+      tagType: tagType as EntityTagType,
+      slug,
+      name: tagName || slug,
+      ordinal: 0,
+    };
+
+    return (
+      <Flex alignItems="center" columnGap={ 2 } flexWrap="wrap" rowGap={ 1 }>
+        <Skeleton
+          isLoaded={ !isPlaceholderData }
+          display="inline-block"
+        >
+          Found{ ' ' }
+          <chakra.span fontWeight={ 700 }>
+            { num }{ data?.next_page_params || pagination.page > 1 ? '+' : '' }
+          </chakra.span>{ ' ' }
+          matching result{ num > 1 ? 's' : '' } for
+        </Skeleton>
+        <EntityTag data={ tagData } isLoading={ isPlaceholderData } noLink/>
+      </Flex>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle title="Search result" withTextAd/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText={ text }
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default AccountsLabelSearch;
diff --git a/ui/pages/Address.pw.tsx b/ui/pages/Address.pw.tsx
new file mode 100644
index 0000000000..e958c71e96
--- /dev/null
+++ b/ui/pages/Address.pw.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { numberToHex } from 'viem';
+
+import config from 'configs/app';
+import * as addressMock from 'mocks/address/address';
+import * as addressCountersMock from 'mocks/address/counters';
+import * as addressTabCountersMock from 'mocks/address/tabCounters';
+import * as socketServer from 'playwright/fixtures/socketServer';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
+
+import Address from './Address';
+
+const hooksConfig = {
+  router: {
+    query: { hash: addressMock.hash },
+  },
+};
+
+test.beforeEach(async({ mockTextAd }) => {
+  await mockTextAd();
+});
+
+test.describe('fetched bytecode', () => {
+  test('should refetch address query', async({ render, mockApiResponse, createSocket, page }) => {
+    const addressApiUrl = await mockApiResponse('address', addressMock.validator, { pathParams: { hash: addressMock.hash } });
+    await mockApiResponse('address_counters', addressCountersMock.forValidator, { pathParams: { hash: addressMock.hash } });
+    await mockApiResponse('address_tabs_counters', addressTabCountersMock.base, { pathParams: { hash: addressMock.hash } });
+    await mockApiResponse('address_txs', { items: [], next_page_params: null }, { pathParams: { hash: addressMock.hash } });
+    await render(<Address/>, { hooksConfig }, { withSocket: true });
+
+    const socket = await createSocket();
+    const channel = await socketServer.joinChannel(socket, `addresses:${ addressMock.hash.toLowerCase() }`);
+    socketServer.sendMessage(socket, channel, 'fetched_bytecode', { fetched_bytecode: '0x0123' });
+
+    const request = await page.waitForRequest(addressApiUrl);
+
+    expect(request).toBeTruthy();
+  });
+});
+
+test('degradation view', async({ render, page, mockRpcResponse, mockApiResponse }) => {
+  await mockApiResponse('address', null as never, { pathParams: { hash: addressMock.hash }, status: 500 });
+  await mockApiResponse('address_counters', addressCountersMock.forValidator, { pathParams: { hash: addressMock.hash } });
+  await mockApiResponse('address_tabs_counters', null as never, { pathParams: { hash: addressMock.hash }, status: 500 });
+  await mockApiResponse('address_txs', null as never, { pathParams: { hash: addressMock.hash }, status: 500 });
+  await mockRpcResponse({
+    Method: 'eth_getBalance',
+    Parameters: [ addressMock.hash, 'latest' ],
+    ReturnType: numberToHex(1234567890123456),
+  });
+
+  const component = await render(<Address/>, { hooksConfig });
+  await page.waitForResponse(config.chain.rpcUrl as string);
+
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
+});
diff --git a/ui/pages/Address.tsx b/ui/pages/Address.tsx
index fdb5db012e..0fa028ae2f 100644
--- a/ui/pages/Address.tsx
+++ b/ui/pages/Address.tsx
@@ -1,45 +1,67 @@
-import { Box, Flex, HStack } from '@chakra-ui/react';
+import { Box, Flex, HStack, useColorModeValue } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import type { EntityTag } from 'ui/shared/EntityTags/types';
 import type { RoutedTab } from 'ui/shared/Tabs/types';
 
 import config from 'configs/app';
+import getCheckedSummedAddress from 'lib/address/getCheckedSummedAddress';
+import useAddressMetadataInfoQuery from 'lib/address/useAddressMetadataInfoQuery';
 import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/contexts/app';
-import useContractTabs from 'lib/hooks/useContractTabs';
+import useAddressProfileApiQuery from 'lib/hooks/useAddressProfileApiQuery';
 import useIsSafeAddress from 'lib/hooks/useIsSafeAddress';
+import getNetworkValidationActionText from 'lib/networks/getNetworkValidationActionText';
 import getQueryParamString from 'lib/router/getQueryParamString';
-import { ADDRESS_INFO, ADDRESS_TABS_COUNTERS } from 'stubs/address';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
+import useFetchXStarScore from 'lib/xStarScore/useFetchXStarScore';
+import { ADDRESS_TABS_COUNTERS } from 'stubs/address';
 import { USER_OPS_ACCOUNT } from 'stubs/userOps';
+import AddressAccountHistory from 'ui/address/AddressAccountHistory';
 import AddressBlocksValidated from 'ui/address/AddressBlocksValidated';
 import AddressCoinBalance from 'ui/address/AddressCoinBalance';
 import AddressContract from 'ui/address/AddressContract';
 import AddressDetails from 'ui/address/AddressDetails';
+import AddressEpochRewards from 'ui/address/AddressEpochRewards';
 import AddressInternalTxs from 'ui/address/AddressInternalTxs';
 import AddressLogs from 'ui/address/AddressLogs';
+import AddressMud from 'ui/address/AddressMud';
 import AddressTokens from 'ui/address/AddressTokens';
 import AddressTokenTransfers from 'ui/address/AddressTokenTransfers';
 import AddressTxs from 'ui/address/AddressTxs';
 import AddressUserOps from 'ui/address/AddressUserOps';
 import AddressWithdrawals from 'ui/address/AddressWithdrawals';
+import useContractTabs from 'ui/address/contract/useContractTabs';
+import { CONTRACT_TAB_IDS } from 'ui/address/contract/utils';
 import AddressFavoriteButton from 'ui/address/details/AddressFavoriteButton';
+import AddressMetadataAlert from 'ui/address/details/AddressMetadataAlert';
 import AddressQrCode from 'ui/address/details/AddressQrCode';
 import AddressEnsDomains from 'ui/address/ensDomains/AddressEnsDomains';
 import SolidityscanReport from 'ui/address/SolidityscanReport';
+import useAddressQuery from 'ui/address/utils/useAddressQuery';
+import useCheckAddressFormat from 'ui/address/utils/useCheckAddressFormat';
+import useCheckDomainNameParam from 'ui/address/utils/useCheckDomainNameParam';
 import AccountActionsMenu from 'ui/shared/AccountActionsMenu/AccountActionsMenu';
 import TextAd from 'ui/shared/ad/TextAd';
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
-import EntityTags from 'ui/shared/EntityTags';
+import EntityTags from 'ui/shared/EntityTags/EntityTags';
+import formatUserTags from 'ui/shared/EntityTags/formatUserTags';
+import sortEntityTags from 'ui/shared/EntityTags/sortEntityTags';
 import IconSvg from 'ui/shared/IconSvg';
 import NetworkExplorers from 'ui/shared/NetworkExplorers';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
-import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
 
 const TOKEN_TABS = [ 'tokens_erc20', 'tokens_nfts', 'tokens_nfts_collection', 'tokens_nfts_list' ];
+const PREDEFINED_TAG_PRIORITY = 100;
+
+const txInterpretation = config.features.txInterpretation;
+const addressProfileAPIFeature = config.features.addressProfileAPI;
+const xScoreFeature = config.features.xStarScore;
 
 const AddressPageContent = () => {
   const router = useRouter();
@@ -47,19 +69,17 @@ const AddressPageContent = () => {
 
   const tabsScrollRef = React.useRef<HTMLDivElement>(null);
   const hash = getQueryParamString(router.query.hash);
+  const checkSummedHash = React.useMemo(() => getCheckedSummedAddress(hash), [ hash ]);
 
-  const addressQuery = useApiQuery('address', {
-    pathParams: { hash },
-    queryOptions: {
-      enabled: Boolean(hash),
-      placeholderData: ADDRESS_INFO,
-    },
-  });
+  const checkDomainName = useCheckDomainNameParam(hash);
+  const checkAddressFormat = useCheckAddressFormat(hash);
+  const areQueriesEnabled = !checkDomainName && !checkAddressFormat;
+  const addressQuery = useAddressQuery({ hash, isEnabled: areQueriesEnabled });
 
   const addressTabsCountersQuery = useApiQuery('address_tabs_counters', {
     pathParams: { hash },
     queryOptions: {
-      enabled: Boolean(hash),
+      enabled: areQueriesEnabled && Boolean(hash),
       placeholderData: ADDRESS_TABS_COUNTERS,
     },
   });
@@ -67,29 +87,99 @@ const AddressPageContent = () => {
   const userOpsAccountQuery = useApiQuery('user_ops_account', {
     pathParams: { hash },
     queryOptions: {
-      enabled: Boolean(hash),
+      enabled: areQueriesEnabled && Boolean(hash) && config.features.userOps.isEnabled,
       placeholderData: USER_OPS_ACCOUNT,
     },
   });
 
+  const mudTablesCountQuery = useApiQuery('address_mud_tables_count', {
+    pathParams: { hash },
+    queryOptions: {
+      enabled: config.features.mudFramework.isEnabled && areQueriesEnabled && Boolean(hash),
+      placeholderData: 10,
+    },
+  });
+
+  const addressesForMetadataQuery = React.useMemo(() => ([ hash ].filter(Boolean)), [ hash ]);
+  const addressMetadataQuery = useAddressMetadataInfoQuery(addressesForMetadataQuery, areQueriesEnabled);
+  const userPropfileApiQuery = useAddressProfileApiQuery(hash, addressProfileAPIFeature.isEnabled && areQueriesEnabled);
+
+  const addressEnsDomainsQuery = useApiQuery('addresses_lookup', {
+    pathParams: { chainId: config.chain.id },
+    queryParams: {
+      address: hash,
+      resolved_to: true,
+      owned_by: true,
+      only_active: true,
+      order: 'ASC',
+    },
+    queryOptions: {
+      enabled: Boolean(hash) && config.features.nameService.isEnabled,
+    },
+  });
+  const addressMainDomain = !addressQuery.isPlaceholderData ?
+    addressEnsDomainsQuery.data?.items.find((domain) => domain.name === addressQuery.data?.ens_domain_name) :
+    undefined;
+
+  const isLoading = addressQuery.isPlaceholderData;
+  const isTabsLoading =
+    isLoading ||
+    addressTabsCountersQuery.isPlaceholderData ||
+    (config.features.userOps.isEnabled && userOpsAccountQuery.isPlaceholderData) ||
+    (config.features.mudFramework.isEnabled && mudTablesCountQuery.isPlaceholderData);
+
+  const handleFetchedBytecodeMessage = React.useCallback(() => {
+    addressQuery.refetch();
+  }, [ addressQuery ]);
+
+  const channel = useSocketChannel({
+    topic: `addresses:${ hash?.toLowerCase() }`,
+    isDisabled: isTabsLoading || addressQuery.isDegradedData || Boolean(addressQuery.data?.is_contract),
+  });
+  useSocketMessage({
+    channel,
+    event: 'fetched_bytecode',
+    handler: handleFetchedBytecodeMessage,
+  });
+
   const isSafeAddress = useIsSafeAddress(!addressQuery.isPlaceholderData && addressQuery.data?.is_contract ? hash : undefined);
+  const safeIconColor = useColorModeValue('black', 'white');
+
+  const xStarQuery = useFetchXStarScore({ hash });
 
-  const contractTabs = useContractTabs(addressQuery.data);
+  const contractTabs = useContractTabs(
+    addressQuery.data,
+    config.features.mudFramework.isEnabled ? (mudTablesCountQuery.isPlaceholderData || addressQuery.isPlaceholderData) : addressQuery.isPlaceholderData,
+    Boolean(config.features.mudFramework.isEnabled && mudTablesCountQuery.data && mudTablesCountQuery.data > 0),
+  );
 
   const tabs: Array<RoutedTab> = React.useMemo(() => {
     return [
+      config.features.mudFramework.isEnabled && mudTablesCountQuery.data && mudTablesCountQuery.data > 0 && {
+        id: 'mud',
+        title: 'MUD',
+        count: mudTablesCountQuery.data,
+        component: <AddressMud scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
+      },
       {
         id: 'txs',
         title: 'Transactions',
         count: addressTabsCountersQuery.data?.transactions_count,
-        component: <AddressTxs scrollRef={ tabsScrollRef }/>,
+        component: <AddressTxs scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
       },
+      txInterpretation.isEnabled && txInterpretation.provider === 'noves' ?
+        {
+          id: 'account_history',
+          title: 'Account history',
+          component: <AddressAccountHistory scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
+        } :
+        undefined,
       config.features.userOps.isEnabled && Boolean(userOpsAccountQuery.data?.total_ops) ?
         {
           id: 'user_ops',
           title: 'User operations',
           count: userOpsAccountQuery.data?.total_ops,
-          component: <AddressUserOps/>,
+          component: <AddressUserOps shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
         } :
         undefined,
       config.features.beaconChain.isEnabled && addressTabsCountersQuery.data?.withdrawals_count ?
@@ -97,39 +187,45 @@ const AddressPageContent = () => {
           id: 'withdrawals',
           title: 'Withdrawals',
           count: addressTabsCountersQuery.data?.withdrawals_count,
-          component: <AddressWithdrawals scrollRef={ tabsScrollRef }/>,
+          component: <AddressWithdrawals scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
         } :
         undefined,
       {
         id: 'token_transfers',
         title: 'Token transfers',
         count: addressTabsCountersQuery.data?.token_transfers_count,
-        component: <AddressTokenTransfers scrollRef={ tabsScrollRef }/>,
+        component: <AddressTokenTransfers scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
       },
       {
         id: 'tokens',
         title: 'Tokens',
         count: addressTabsCountersQuery.data?.token_balances_count,
-        component: <AddressTokens/>,
+        component: <AddressTokens shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
         subTabs: TOKEN_TABS,
       },
       {
         id: 'internal_txns',
         title: 'Internal txns',
         count: addressTabsCountersQuery.data?.internal_txs_count,
-        component: <AddressInternalTxs scrollRef={ tabsScrollRef }/>,
+        component: <AddressInternalTxs scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
       },
+      addressTabsCountersQuery.data?.celo_election_rewards_count ? {
+        id: 'epoch_rewards',
+        title: 'Epoch rewards',
+        count: addressTabsCountersQuery.data?.celo_election_rewards_count,
+        component: <AddressEpochRewards scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
+      } : undefined,
       {
         id: 'coin_balance_history',
         title: 'Coin balance history',
-        component: <AddressCoinBalance/>,
+        component: <AddressCoinBalance shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
       },
-      config.chain.verificationType === 'validation' && addressTabsCountersQuery.data?.validations_count ?
+      addressTabsCountersQuery.data?.validations_count ?
         {
           id: 'blocks_validated',
-          title: 'Blocks validated',
+          title: `Blocks ${ getNetworkValidationActionText() }`,
           count: addressTabsCountersQuery.data?.validations_count,
-          component: <AddressBlocksValidated scrollRef={ tabsScrollRef }/>,
+          component: <AddressBlocksValidated scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
         } :
         undefined,
       addressTabsCountersQuery.data?.logs_count ?
@@ -137,9 +233,10 @@ const AddressPageContent = () => {
           id: 'logs',
           title: 'Logs',
           count: addressTabsCountersQuery.data?.logs_count,
-          component: <AddressLogs scrollRef={ tabsScrollRef }/>,
+          component: <AddressLogs scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
         } :
         undefined,
+
       addressQuery.data?.is_contract ? {
         id: 'contract',
         title: () => {
@@ -154,48 +251,125 @@ const AddressPageContent = () => {
 
           return 'Contract';
         },
-        component: <AddressContract tabs={ contractTabs }/>,
-        subTabs: contractTabs.map(tab => tab.id),
+        component: (
+          <AddressContract
+            tabs={ contractTabs.tabs }
+            shouldRender={ !isTabsLoading }
+            isLoading={ contractTabs.isLoading }
+          />
+        ),
+        subTabs: CONTRACT_TAB_IDS,
       } : undefined,
     ].filter(Boolean);
-  }, [ addressQuery.data, contractTabs, addressTabsCountersQuery.data, userOpsAccountQuery.data ]);
+  }, [
+    addressQuery.data,
+    contractTabs,
+    addressTabsCountersQuery.data,
+    userOpsAccountQuery.data,
+    isTabsLoading,
+    areQueriesEnabled,
+    mudTablesCountQuery.data,
+  ]);
+
+  const usernameApiTag = userPropfileApiQuery.data?.user_profile?.username;
 
-  const tags = (
+  const tags: Array<EntityTag> = React.useMemo(() => {
+    return [
+      ...(addressQuery.data?.public_tags?.map((tag) => ({ slug: tag.label, name: tag.display_name, tagType: 'custom' as const, ordinal: -1 })) || []),
+      !addressQuery.data?.is_contract ? { slug: 'eoa', name: 'EOA', tagType: 'custom' as const, ordinal: PREDEFINED_TAG_PRIORITY } : undefined,
+      config.features.validators.isEnabled && addressQuery.data?.has_validated_blocks ?
+        { slug: 'validator', name: 'Validator', tagType: 'custom' as const, ordinal: PREDEFINED_TAG_PRIORITY } :
+        undefined,
+      addressQuery.data?.implementations?.length ? { slug: 'proxy', name: 'Proxy', tagType: 'custom' as const, ordinal: PREDEFINED_TAG_PRIORITY } : undefined,
+      addressQuery.data?.token ? { slug: 'token', name: 'Token', tagType: 'custom' as const, ordinal: PREDEFINED_TAG_PRIORITY } : undefined,
+      isSafeAddress ? { slug: 'safe', name: 'Multisig: Safe', tagType: 'custom' as const, ordinal: -10 } : undefined,
+      addressProfileAPIFeature.isEnabled && usernameApiTag ? {
+        slug: 'username_api',
+        name: usernameApiTag,
+        tagType: 'custom' as const,
+        ordinal: 11,
+        meta: {
+          tagIcon: addressProfileAPIFeature.tagIcon,
+          bgColor: addressProfileAPIFeature.tagBgColor,
+          textColor: addressProfileAPIFeature.tagTextColor,
+          tagUrl: addressProfileAPIFeature.tagLinkTemplate ? addressProfileAPIFeature.tagLinkTemplate.replace('{username}', usernameApiTag) : undefined,
+        },
+      } : undefined,
+      config.features.userOps.isEnabled && userOpsAccountQuery.data ?
+        { slug: 'user_ops_acc', name: 'Smart contract wallet', tagType: 'custom' as const, ordinal: PREDEFINED_TAG_PRIORITY } :
+        undefined,
+      config.features.mudFramework.isEnabled && mudTablesCountQuery.data ?
+        { slug: 'mud', name: 'MUD World', tagType: 'custom' as const, ordinal: PREDEFINED_TAG_PRIORITY } :
+        undefined,
+      ...formatUserTags(addressQuery.data),
+      ...(addressMetadataQuery.data?.addresses?.[hash.toLowerCase()]?.tags.filter(tag => tag.tagType !== 'note') || []),
+      !addressQuery.data?.is_contract && xScoreFeature.isEnabled && xStarQuery.data?.data.level ?
+        {
+          slug: 'xstar',
+          name: `XHS ${ xStarQuery.data.data.level } level`,
+          tagType: 'custom' as const,
+          ordinal: 12,
+          meta: {
+            tooltipTitle: 'XStar humanity levels',
+            tooltipDescription:
+              'XStar looks for off-chain information about an address and interpret it as a XHS score. Different score means different humanity levels.',
+            tooltipUrl: xScoreFeature.url,
+          },
+        } :
+        undefined,
+    ].filter(Boolean).sort(sortEntityTags);
+  }, [
+    addressMetadataQuery.data,
+    addressQuery.data,
+    hash,
+    isSafeAddress,
+    userOpsAccountQuery.data,
+    mudTablesCountQuery.data,
+    usernameApiTag,
+    xStarQuery.data?.data,
+  ]);
+
+  const titleContentAfter = (
     <EntityTags
-      data={ addressQuery.data }
-      isLoading={ addressQuery.isPlaceholderData }
-      tagsBefore={ [
-        !addressQuery.data?.is_contract ? { label: 'eoa', display_name: 'EOA' } : undefined,
-        addressQuery.data?.implementation_address ? { label: 'proxy', display_name: 'Proxy' } : undefined,
-        addressQuery.data?.token ? { label: 'token', display_name: 'Token' } : undefined,
-        isSafeAddress ? { label: 'safe', display_name: 'Multisig: Safe' } : undefined,
-        userOpsAccountQuery.data ? { label: 'user_ops_acc', display_name: 'Smart contract wallet' } : undefined,
-      ] }
+      tags={ tags }
+      isLoading={
+        isLoading ||
+        (config.features.userOps.isEnabled && userOpsAccountQuery.isPlaceholderData) ||
+        (config.features.addressMetadata.isEnabled && addressMetadataQuery.isPending) ||
+        (addressProfileAPIFeature.isEnabled && userPropfileApiQuery.isPending) ||
+        (xScoreFeature.isEnabled && xStarQuery.isPlaceholderData)
+      }
     />
   );
 
-  const content = addressQuery.isError ? null : <RoutedTabs tabs={ tabs } tabListProps={{ mt: 8 }}/>;
+  const content = (addressQuery.isError || addressQuery.isDegradedData) ?
+    null :
+    <RoutedTabs tabs={ tabs } tabListProps={{ mt: 6 }} isLoading={ isTabsLoading }/>;
 
   const backLink = React.useMemo(() => {
-    const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/accounts');
+    if (appProps.referrer && appProps.referrer.includes('/accounts')) {
+      return {
+        label: 'Back to top accounts list',
+        url: appProps.referrer,
+      };
+    }
 
-    if (!hasGoBackLink) {
-      return;
+    if (appProps.referrer && appProps.referrer.includes('/mud-worlds')) {
+      return {
+        label: 'Back to MUD worlds list',
+        url: appProps.referrer,
+      };
     }
 
-    return {
-      label: 'Back to top accounts list',
-      url: appProps.referrer,
-    };
+    return;
   }, [ appProps.referrer ]);
 
-  const isLoading = addressQuery.isPlaceholderData;
-
   const titleSecondRow = (
     <Flex alignItems="center" w="100%" columnGap={ 2 } rowGap={ 2 } flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
       { addressQuery.data?.ens_domain_name && (
         <EnsEntity
-          name={ addressQuery.data?.ens_domain_name }
+          domain={ addressQuery.data?.ens_domain_name }
+          protocol={ !addressEnsDomainsQuery.isPending ? addressMainDomain?.protocol : null }
           fontFamily="heading"
           fontSize="lg"
           fontWeight={ 500 }
@@ -204,13 +378,20 @@ const AddressPageContent = () => {
         />
       ) }
       <AddressEntity
-        address={{ ...addressQuery.data, hash, name: '', ens_domain_name: '' }}
+        address={{
+          ...addressQuery.data,
+          hash: checkSummedHash,
+          name: '',
+          ens_domain_name: '',
+          implementations: null,
+        }}
         isLoading={ isLoading }
         fontFamily="heading"
         fontSize="lg"
         fontWeight={ 500 }
         noLink
         isSafeAddress={ isSafeAddress }
+        icon={{ color: isSafeAddress ? safeIconColor : undefined }}
         mr={ 4 }
       />
       { !isLoading && addressQuery.data?.is_contract && addressQuery.data.token &&
@@ -218,12 +399,13 @@ const AddressPageContent = () => {
       { !isLoading && !addressQuery.data?.is_contract && config.features.account.isEnabled && (
         <AddressFavoriteButton hash={ hash } watchListId={ addressQuery.data?.watchlist_address_id }/>
       ) }
-      <AddressQrCode address={{ hash }} isLoading={ isLoading }/>
+      <AddressQrCode address={{ hash: addressQuery.data?.filecoin?.robust ?? checkSummedHash }} isLoading={ isLoading }/>
       <AccountActionsMenu isLoading={ isLoading }/>
       <HStack ml="auto" gap={ 2 }/>
-      { addressQuery.data?.is_contract && addressQuery.data?.is_verified && config.UI.views.address.solidityscanEnabled && <SolidityscanReport hash={ hash }/> }
-      { !isLoading && addressQuery.data && config.features.nameService.isEnabled &&
-        <AddressEnsDomains addressHash={ hash } mainDomainName={ addressQuery.data.ens_domain_name }/> }
+      { !isLoading && addressQuery.data?.is_contract && addressQuery.data?.is_verified && config.UI.views.address.solidityscanEnabled &&
+        <SolidityscanReport hash={ hash }/> }
+      { !isLoading && addressEnsDomainsQuery.data && config.features.nameService.isEnabled &&
+        <AddressEnsDomains query={ addressEnsDomainsQuery } addressHash={ hash } mainDomainName={ addressQuery.data?.ens_domain_name }/> }
       <NetworkExplorers type="address" pathParam={ hash }/>
     </Flex>
   );
@@ -234,17 +416,17 @@ const AddressPageContent = () => {
       <PageTitle
         title={ `${ addressQuery.data?.is_contract ? 'Contract' : 'Address' } details` }
         backLink={ backLink }
-        contentAfter={ tags }
+        contentAfter={ titleContentAfter }
         secondRow={ titleSecondRow }
         isLoading={ isLoading }
       />
+      { !addressMetadataQuery.isPending &&
+        <AddressMetadataAlert tags={ addressMetadataQuery.data?.addresses?.[hash.toLowerCase()]?.tags } mt="-4px" mb={ 6 }/> }
+      { config.features.metasuites.isEnabled && <Box display="none" id="meta-suites__address" data-ready={ !isLoading }/> }
       <AddressDetails addressQuery={ addressQuery } scrollRef={ tabsScrollRef }/>
       { /* should stay before tabs to scroll up with pagination */ }
       <Box ref={ tabsScrollRef }></Box>
-      { (addressQuery.isPlaceholderData || addressTabsCountersQuery.isPlaceholderData || userOpsAccountQuery.isPlaceholderData) ?
-        <TabsSkeleton tabs={ tabs }/> :
-        content
-      }
+      { content }
     </>
   );
 };
diff --git a/ui/pages/AdvancedFilter.pw.tsx b/ui/pages/AdvancedFilter.pw.tsx
new file mode 100644
index 0000000000..406e970ed1
--- /dev/null
+++ b/ui/pages/AdvancedFilter.pw.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import * as advancedFilterMock from 'mocks/advancedFilter/advancedFilter';
+import { test, expect } from 'playwright/lib';
+
+import AdvancedFilter from './AdvancedFilter';
+
+test('base view +@dark-mode', async({ render, mockApiResponse, mockTextAd }) => {
+  await mockTextAd();
+  await mockApiResponse('advanced_filter', advancedFilterMock.baseResponse);
+  await mockApiResponse('tokens', { items: [], next_page_params: null }, { queryParams: { limit: '7', q: '' } });
+  await mockApiResponse('advanced_filter_methods', [], { queryParams: { q: '' } });
+
+  const component = await render(<AdvancedFilter/>);
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/AdvancedFilter.tsx b/ui/pages/AdvancedFilter.tsx
new file mode 100644
index 0000000000..9fc6a5a9f1
--- /dev/null
+++ b/ui/pages/AdvancedFilter.tsx
@@ -0,0 +1,266 @@
+import {
+  Table,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  Thead,
+  Box,
+  Text,
+  Tag,
+  TagCloseButton,
+  chakra,
+  Flex,
+  TagLabel,
+  HStack,
+  Link,
+} from '@chakra-ui/react';
+import omit from 'lodash/omit';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { AdvancedFilterParams } from 'types/api/advancedFilter';
+import { ADVANCED_FILTER_TYPES, ADVANCED_FILTER_AGES } from 'types/api/advancedFilter';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
+import dayjs from 'lib/date/dayjs';
+import getFilterValueFromQuery from 'lib/getFilterValueFromQuery';
+import getFilterValuesFromQuery from 'lib/getFilterValuesFromQuery';
+import getValuesArrayFromQuery from 'lib/getValuesArrayFromQuery';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { ADVANCED_FILTER_ITEM } from 'stubs/advancedFilter';
+import { generateListStub } from 'stubs/utils';
+import ColumnsButton from 'ui/advancedFilter/ColumnsButton';
+import type { ColumnsIds } from 'ui/advancedFilter/constants';
+import { TABLE_COLUMNS } from 'ui/advancedFilter/constants';
+import ExportCSV from 'ui/advancedFilter/ExportCSV';
+import FilterByColumn from 'ui/advancedFilter/FilterByColumn';
+import ItemByColumn from 'ui/advancedFilter/ItemByColumn';
+import { getDurationFromAge, getFilterTags } from 'ui/advancedFilter/lib';
+import ActionBar from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import IconSvg from 'ui/shared/IconSvg';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+
+const COLUMNS_CHECKED = {} as Record<ColumnsIds, boolean>;
+TABLE_COLUMNS.forEach(c => COLUMNS_CHECKED[c.id] = true);
+
+const AdvancedFilter = () => {
+  const router = useRouter();
+
+  const [ filters, setFilters ] = React.useState<AdvancedFilterParams>(() => {
+    const age = getFilterValueFromQuery(ADVANCED_FILTER_AGES, router.query.age);
+    return {
+      tx_types: getFilterValuesFromQuery(ADVANCED_FILTER_TYPES, router.query.tx_types),
+      methods: getValuesArrayFromQuery(router.query.methods),
+      methods_names: getValuesArrayFromQuery(router.query.methods_names),
+      amount_from: getQueryParamString(router.query.amount_from),
+      amount_to: getQueryParamString(router.query.amount_to),
+      age,
+      age_to: age ? dayjs().toISOString() : getQueryParamString(router.query.age_to),
+      age_from: age ? dayjs((dayjs().valueOf() - getDurationFromAge(age))).toISOString() : getQueryParamString(router.query.age_from),
+      token_contract_address_hashes_to_exclude: getValuesArrayFromQuery(router.query.token_contract_address_hashes_to_exclude),
+      token_contract_symbols_to_exclude: getValuesArrayFromQuery(router.query.token_contract_symbols_to_exclude),
+      token_contract_address_hashes_to_include: getValuesArrayFromQuery(router.query.token_contract_address_hashes_to_include),
+      token_contract_symbols_to_include: getValuesArrayFromQuery(router.query.token_contract_symbols_to_include),
+      to_address_hashes_to_include: getValuesArrayFromQuery(router.query.to_address_hashes_to_include),
+      from_address_hashes_to_include: getValuesArrayFromQuery(router.query.from_address_hashes_to_include),
+      to_address_hashes_to_exclude: getValuesArrayFromQuery(router.query.to_address_hashes_to_exclude),
+      from_address_hashes_to_exclude: getValuesArrayFromQuery(router.query.from_address_hashes_to_exclude),
+    };
+  });
+
+  const [ columns, setColumns ] = React.useState<Record<ColumnsIds, boolean>>(COLUMNS_CHECKED);
+  const { data, isError, isLoading, pagination, onFilterChange, isPlaceholderData } = useQueryWithPages({
+    resourceName: 'advanced_filter',
+    filters,
+    options: {
+      placeholderData: generateListStub<'advanced_filter'>(
+        ADVANCED_FILTER_ITEM,
+        50,
+        {
+          next_page_params: {
+            block_number: 5867485,
+            internal_transaction_index: 0,
+            items_count: 50,
+            token_transfer_index: null,
+            transaction_index: 2,
+          },
+          search_params: {
+            tokens: {},
+            methods: {},
+          },
+        },
+      ),
+    },
+  });
+
+  // maybe don't need to prefetch, but on dev sepolia those requests take several seconds.
+  useApiQuery('tokens', { queryParams: { limit: '7', q: '' }, queryOptions: { refetchOnMount: false } });
+  useApiQuery('advanced_filter_methods', { queryParams: { q: '' }, queryOptions: { refetchOnMount: false } });
+
+  const handleFilterChange = React.useCallback(<T extends keyof AdvancedFilterParams>(field: T, val: AdvancedFilterParams[T]) => {
+    setFilters(prevState => {
+      const newState = { ...prevState };
+
+      newState[field] = val;
+      onFilterChange(newState.age ? omit(newState, [ 'age_from', 'age_to' ]) : newState);
+      return newState;
+    });
+  }, [ onFilterChange ]);
+
+  const onClearFilter = React.useCallback((key: keyof AdvancedFilterParams) => () => {
+    if (key === 'methods') {
+      handleFilterChange('methods_names', undefined);
+    }
+    if (key === 'token_contract_address_hashes_to_exclude') {
+      handleFilterChange('token_contract_symbols_to_exclude', undefined);
+    }
+    if (key === 'token_contract_address_hashes_to_include') {
+      handleFilterChange('token_contract_symbols_to_include', undefined);
+    }
+    if (key === 'age') {
+      handleFilterChange('age_from', undefined);
+      handleFilterChange('age_to', undefined);
+    }
+    handleFilterChange(key, undefined);
+  }, [ handleFilterChange ]);
+
+  const clearAllFilters = React.useCallback(() => {
+    setFilters({});
+    onFilterChange({});
+  }, [ onFilterChange ]);
+
+  const columnsToShow = TABLE_COLUMNS.filter(c => columns[c.id]);
+
+  if (isLoading) {
+    return null;
+  }
+
+  const filterTags = getFilterTags(filters);
+
+  const content = (
+    <AddressHighlightProvider>
+      <Box maxW="100%" overflowX="scroll" whiteSpace="nowrap">
+        <Table style={{ tableLayout: 'fixed' }} minWidth="950px" w="100%">
+          <Thead w="100%" display="table">
+            <Tr>
+              { columnsToShow.map(column => {
+                return (
+                  <Th
+                    key={ column.id }
+                    isNumeric={ column.isNumeric }
+                    minW={ column.width }
+                    w={ column.width }
+                    wordBreak="break-word"
+                    whiteSpace="normal"
+                  >
+                    { Boolean(column.name) && <chakra.span mr={ 2 } lineHeight="24px">{ column.name }</chakra.span> }
+                    <FilterByColumn
+                      column={ column.id }
+                      columnName={ column.name }
+                      handleFilterChange={ handleFilterChange }
+                      filters={ filters }
+                      searchParams={ data?.search_params }
+                      isLoading={ isPlaceholderData }
+                    />
+                  </Th>
+                );
+              }) }
+            </Tr>
+          </Thead>
+          <Tbody w="100%" display="table">
+            { data?.items.map((item, index) => (
+              <Tr key={ item.hash + String(index) }>
+                { columnsToShow.map(column => (
+                  <Td
+                    key={ item.hash + column.id }
+                    isNumeric={ column.isNumeric }
+                    minW={ column.width }
+                    maxW={ column.width }
+                    w={ column.width }
+                    wordBreak="break-word"
+                    whiteSpace="nowrap"
+                    overflow="hidden"
+                    textAlign={ column.id === 'or_and' ? 'center' : 'start' }
+                  >
+                    <ItemByColumn item={ item } column={ column.id } isLoading={ isPlaceholderData }/>
+                  </Td>
+                )) }
+              </Tr>
+            )) }
+          </Tbody>
+        </Table>
+      </Box>
+    </AddressHighlightProvider>
+  );
+
+  const actionBar = (
+    <ActionBar mt={ -6 }>
+      <ExportCSV filters={ filters }/>
+      <ColumnsButton columns={ columns } onChange={ setColumns }/>
+      <Pagination ml="auto" { ...pagination }/>
+    </ActionBar>
+  );
+
+  return (
+    <>
+      <PageTitle
+        title="Advanced filter"
+        withTextAd
+      />
+      <Flex mb={ 4 } justifyContent="space-between" alignItems="start">
+        <Text fontSize="lg" mr={ 3 } lineHeight="24px" w="100px">Filtered by:</Text>
+        { filterTags.length !== 0 && (
+          <Link onClick={ clearAllFilters } display="flex" alignItems="center" justifyContent="end" gap={ 2 } fontSize="sm" w="150px">
+            <IconSvg name="repeat" boxSize={ 5 }/>
+            Reset filters
+          </Link>
+        ) }
+      </Flex>
+      <HStack gap={ 2 } flexWrap="wrap" mb={ 6 }>
+        { filterTags.map(t => (
+          <Tag key={ t.name } colorScheme="blue" display="inline-flex">
+            <TagLabel>
+              <chakra.span color="text_secondary">{ t.name }: </chakra.span>
+              <chakra.span color="text">{ t.value }</chakra.span>
+            </TagLabel>
+            <TagCloseButton onClick={ onClearFilter(t.key) }/>
+          </Tag>
+        )) }
+        { filterTags.length === 0 && (
+          <>
+            <Tag colorScheme="blue" display="inline-flex">
+              <TagLabel>
+                <chakra.span color="text_secondary">Type: </chakra.span>
+                <chakra.span color="text">All</chakra.span>
+              </TagLabel>
+            </Tag>
+            <Tag colorScheme="blue" display="inline-flex">
+              <TagLabel>
+                <chakra.span color="text_secondary">Age: </chakra.span>
+                <chakra.span color="text">7d</chakra.span>
+              </TagLabel>
+            </Tag>
+          </>
+        ) }
+      </HStack>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no transactions."
+        content={ content }
+        actionBar={ actionBar }
+        filterProps={{
+          hasActiveFilters: Object.values(filters).some(Boolean),
+          emptyFilteredText: 'No match found for current filter',
+        }}
+      />
+    </>
+  );
+};
+
+export default AdvancedFilter;
diff --git a/ui/pages/ApiKeys.tsx b/ui/pages/ApiKeys.tsx
index 122896ba29..2f00e205d7 100644
--- a/ui/pages/ApiKeys.tsx
+++ b/ui/pages/ApiKeys.tsx
@@ -4,7 +4,6 @@ import React, { useCallback, useState } from 'react';
 import type { ApiKey } from 'types/api/account';
 
 import useApiQuery from 'lib/api/useApiQuery';
-import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
 import { space } from 'lib/html-entities';
 import { API_KEY } from 'stubs/account';
 import ApiKeyModal from 'ui/apiKey/ApiKeyModal/ApiKeyModal';
@@ -14,6 +13,7 @@ import DeleteApiKeyModal from 'ui/apiKey/DeleteApiKeyModal';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import PageTitle from 'ui/shared/Page/PageTitle';
+import useRedirectForInvalidAuthToken from 'ui/snippets/auth/useRedirectForInvalidAuthToken';
 
 const DATA_LIMIT = 3;
 
@@ -108,7 +108,7 @@ const ApiKeysPage: React.FC = () => {
             onClick={ apiKeyModalProps.onOpen }
             isDisabled={ !canAdd }
           >
-              Add API key
+            Add API key
           </Button>
           { !canAdd && (
             <Text fontSize="sm" variant="secondary">
diff --git a/ui/pages/ArbitrumL2Deposits.pw.tsx b/ui/pages/ArbitrumL2Deposits.pw.tsx
new file mode 100644
index 0000000000..af26008a4f
--- /dev/null
+++ b/ui/pages/ArbitrumL2Deposits.pw.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import * as depositsMock from 'mocks/arbitrum/deposits';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import ArbitrumL2Deposits from './ArbitrumL2Deposits';
+
+test('base view +@mobile', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => {
+  await mockTextAd();
+  await mockEnvs(ENVS_MAP.arbitrumRollup);
+  await mockApiResponse('arbitrum_l2_messages', depositsMock.baseResponse, { pathParams: { direction: 'to-rollup' } });
+  await mockApiResponse('arbitrum_l2_messages_count', 3971111, { pathParams: { direction: 'to-rollup' } });
+
+  const component = await render(<ArbitrumL2Deposits/>);
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/ArbitrumL2Deposits.tsx b/ui/pages/ArbitrumL2Deposits.tsx
new file mode 100644
index 0000000000..fbee21ae6a
--- /dev/null
+++ b/ui/pages/ArbitrumL2Deposits.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import ArbitrumL2Messages from 'ui/messages/ArbitrumL2Messages';
+
+const ArbitrumL2Deposits = () => {
+  return <ArbitrumL2Messages direction="to-rollup"/>;
+};
+
+export default ArbitrumL2Deposits;
diff --git a/ui/pages/ArbitrumL2TxnBatch.pw.tsx b/ui/pages/ArbitrumL2TxnBatch.pw.tsx
new file mode 100644
index 0000000000..1057ae2744
--- /dev/null
+++ b/ui/pages/ArbitrumL2TxnBatch.pw.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { batchData, batchDataAnytrust } from 'mocks/arbitrum/txnBatch';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect, devices } from 'playwright/lib';
+
+import ArbitrumL2TxnBatch from './ArbitrumL2TxnBatch';
+
+const batchNumber = '5';
+const hooksConfig = {
+  router: {
+    query: { number: batchNumber },
+  },
+};
+
+test.beforeEach(async({ mockTextAd, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.arbitrumRollup);
+  await mockTextAd();
+});
+
+test('base view', async({ render, mockApiResponse }) => {
+  await mockApiResponse('arbitrum_l2_txn_batch', batchData, { pathParams: { number: batchNumber } });
+  const component = await render(<ArbitrumL2TxnBatch/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
+
+test('with anytrust DA', async({ render, mockApiResponse }) => {
+  await mockApiResponse('arbitrum_l2_txn_batch', batchDataAnytrust, { pathParams: { number: batchNumber } });
+  const component = await render(<ArbitrumL2TxnBatch/>, { hooksConfig });
+  await component.getByText('Show data availability info').click();
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+  test('base view', async({ render, mockApiResponse }) => {
+    await mockApiResponse('arbitrum_l2_txn_batch', batchData, { pathParams: { number: batchNumber } });
+    const component = await render(<ArbitrumL2TxnBatch/>, { hooksConfig });
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('with anytrust DA', async({ render, mockApiResponse }) => {
+    await mockApiResponse('arbitrum_l2_txn_batch', batchDataAnytrust, { pathParams: { number: batchNumber } });
+    const component = await render(<ArbitrumL2TxnBatch/>, { hooksConfig });
+    await component.getByText('Show data availability info').click();
+    await expect(component).toHaveScreenshot();
+  });
+});
diff --git a/ui/pages/ArbitrumL2TxnBatch.tsx b/ui/pages/ArbitrumL2TxnBatch.tsx
new file mode 100644
index 0000000000..6684df430f
--- /dev/null
+++ b/ui/pages/ArbitrumL2TxnBatch.tsx
@@ -0,0 +1,136 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { RoutedTab } from 'ui/shared/Tabs/types';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { useAppContext } from 'lib/contexts/app';
+import throwOnAbsentParamError from 'lib/errors/throwOnAbsentParamError';
+import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { ARBITRUM_L2_TXN_BATCH } from 'stubs/arbitrumL2';
+import { BLOCK } from 'stubs/block';
+import { TX } from 'stubs/tx';
+import { generateListStub } from 'stubs/utils';
+import BlocksContent from 'ui/blocks/BlocksContent';
+import TextAd from 'ui/shared/ad/TextAd';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
+import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
+import ArbitrumL2TxnBatchDetails from 'ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetails';
+import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
+
+const TAB_LIST_PROPS = {
+  marginBottom: 0,
+  py: 5,
+  marginTop: -5,
+};
+
+const TABS_HEIGHT = 80;
+
+const ArbitrumL2TxnBatch = () => {
+  const router = useRouter();
+  const appProps = useAppContext();
+  const number = getQueryParamString(router.query.number);
+  const tab = getQueryParamString(router.query.tab);
+  const isMobile = useIsMobile();
+
+  const batchQuery = useApiQuery('arbitrum_l2_txn_batch', {
+    pathParams: { number },
+    queryOptions: {
+      enabled: Boolean(number),
+      placeholderData: ARBITRUM_L2_TXN_BATCH,
+    },
+  });
+
+  const batchTxsQuery = useQueryWithPages({
+    resourceName: 'arbitrum_l2_txn_batch_txs',
+    pathParams: { number },
+    options: {
+      enabled: Boolean(!batchQuery.isPlaceholderData && batchQuery.data?.number && tab === 'txs'),
+      placeholderData: generateListStub<'arbitrum_l2_txn_batch_txs'>(TX, 50, { next_page_params: {
+        batch_number: '8122',
+        block_number: 1338932,
+        index: 0,
+        items_count: 50,
+      } }),
+    },
+  });
+
+  const batchBlocksQuery = useQueryWithPages({
+    resourceName: 'arbitrum_l2_txn_batch_blocks',
+    pathParams: { number },
+    options: {
+      enabled: Boolean(!batchQuery.isPlaceholderData && batchQuery.data?.number && tab === 'blocks'),
+      placeholderData: generateListStub<'arbitrum_l2_txn_batch_blocks'>(BLOCK, 50, { next_page_params: {
+        batch_number: '8122',
+        block_number: 1338932,
+        items_count: 50,
+      } }),
+    },
+  });
+
+  throwOnAbsentParamError(number);
+  throwOnResourceLoadError(batchQuery);
+
+  let pagination;
+  if (tab === 'txs') {
+    pagination = batchTxsQuery.pagination;
+  }
+  if (tab === 'blocks') {
+    pagination = batchBlocksQuery.pagination;
+  }
+
+  const hasPagination = !isMobile && pagination?.isVisible;
+
+  const tabs: Array<RoutedTab> = React.useMemo(() => ([
+    { id: 'index', title: 'Details', component: <ArbitrumL2TxnBatchDetails query={ batchQuery }/> },
+    {
+      id: 'txs',
+      title: 'Transactions',
+      component: <TxsWithFrontendSorting query={ batchTxsQuery } showSocketInfo={ false } top={ hasPagination ? TABS_HEIGHT : 0 }/>,
+    },
+    {
+      id: 'blocks',
+      title: 'Blocks',
+      component: <BlocksContent type="block" query={ batchBlocksQuery } enableSocket={ false } top={ hasPagination ? TABS_HEIGHT : 0 }/>,
+    },
+  ].filter(Boolean)), [ batchQuery, batchTxsQuery, batchBlocksQuery, hasPagination ]);
+
+  const backLink = React.useMemo(() => {
+    const hasGoBackLink = appProps.referrer && appProps.referrer.endsWith('/batches');
+
+    if (!hasGoBackLink) {
+      return;
+    }
+
+    return {
+      label: 'Back to txn batches list',
+      url: appProps.referrer,
+    };
+  }, [ appProps.referrer ]);
+
+  return (
+    <>
+      <TextAd mb={ 6 }/>
+      <PageTitle
+        title={ `Txn batch #${ number }` }
+        backLink={ backLink }
+      />
+      { batchQuery.isPlaceholderData ?
+        <TabsSkeleton tabs={ tabs }/> : (
+          <RoutedTabs
+            tabs={ tabs }
+            tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
+            rightSlot={ hasPagination && pagination ? <Pagination { ...(pagination) }/> : null }
+            stickyEnabled={ hasPagination }
+          />
+        ) }
+    </>
+  );
+};
+
+export default ArbitrumL2TxnBatch;
diff --git a/ui/pages/ArbitrumL2TxnBatches.pw.tsx b/ui/pages/ArbitrumL2TxnBatches.pw.tsx
new file mode 100644
index 0000000000..f1c0a06d06
--- /dev/null
+++ b/ui/pages/ArbitrumL2TxnBatches.pw.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import * as arbitrumTxnBatchesMock from 'mocks/arbitrum/txnBatches';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import ArbitrumL2TxnBatches from './ArbitrumL2TxnBatches';
+
+test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
+  test.slow();
+  await mockEnvs(ENVS_MAP.arbitrumRollup);
+  await mockTextAd();
+  await mockApiResponse('arbitrum_l2_txn_batches', arbitrumTxnBatchesMock.baseResponse);
+  await mockApiResponse('arbitrum_l2_txn_batches_count', 9927);
+
+  const component = await render(<ArbitrumL2TxnBatches/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/ArbitrumL2TxnBatches.tsx b/ui/pages/ArbitrumL2TxnBatches.tsx
new file mode 100644
index 0000000000..42e9785d5e
--- /dev/null
+++ b/ui/pages/ArbitrumL2TxnBatches.tsx
@@ -0,0 +1,86 @@
+import { Hide, Show, Skeleton, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { ARBITRUM_L2_TXN_BATCHES_ITEM } from 'stubs/arbitrumL2';
+import { generateListStub } from 'stubs/utils';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+import ArbitrumL2TxnBatchesListItem from 'ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesListItem';
+import ArbitrumL2TxnBatchesTable from 'ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTable';
+
+const ArbitrumL2TxnBatches = () => {
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'arbitrum_l2_txn_batches',
+    options: {
+      placeholderData: generateListStub<'arbitrum_l2_txn_batches'>(
+        ARBITRUM_L2_TXN_BATCHES_ITEM,
+        50,
+        {
+          next_page_params: {
+            items_count: 50,
+            number: 9045200,
+          },
+        },
+      ),
+    },
+  });
+
+  const countersQuery = useApiQuery('arbitrum_l2_txn_batches_count', {
+    queryOptions: {
+      placeholderData: 5231746,
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        { data.items.map(((item, index) => (
+          <ArbitrumL2TxnBatchesListItem
+            key={ item.number + (isPlaceholderData ? String(index) : '') }
+            item={ item }
+            isLoading={ isPlaceholderData }
+          />
+        ))) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <ArbitrumL2TxnBatchesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (countersQuery.isError || isError || !data?.items.length) {
+      return null;
+    }
+
+    return (
+      <Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap">
+        Txn batch
+        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].number } </Text>to
+        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].number } </Text>
+        (total of { countersQuery.data?.toLocaleString() } batches)
+      </Skeleton>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle title="Txn batches" withTextAd/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no txn batches."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default ArbitrumL2TxnBatches;
diff --git a/ui/pages/ArbitrumL2Withdrawals.pw.tsx b/ui/pages/ArbitrumL2Withdrawals.pw.tsx
new file mode 100644
index 0000000000..47873b7efe
--- /dev/null
+++ b/ui/pages/ArbitrumL2Withdrawals.pw.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import * as depositsMock from 'mocks/arbitrum/withdrawals';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import ArbitrumL2Withdrawals from './ArbitrumL2Withdrawals';
+
+test('base view +@mobile', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => {
+  await mockTextAd();
+  await mockEnvs(ENVS_MAP.arbitrumRollup);
+  await mockApiResponse('arbitrum_l2_messages', depositsMock.baseResponse, { pathParams: { direction: 'from-rollup' } });
+  await mockApiResponse('arbitrum_l2_messages_count', 3971111, { pathParams: { direction: 'from-rollup' } });
+
+  const component = await render(<ArbitrumL2Withdrawals/>);
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/ArbitrumL2Withdrawals.tsx b/ui/pages/ArbitrumL2Withdrawals.tsx
new file mode 100644
index 0000000000..a4a1b04eaf
--- /dev/null
+++ b/ui/pages/ArbitrumL2Withdrawals.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import ArbitrumL2Messages from 'ui/messages/ArbitrumL2Messages';
+
+const ArbitrumL2Withdrawals = () => {
+  return <ArbitrumL2Messages direction="from-rollup"/>;
+};
+
+export default ArbitrumL2Withdrawals;
diff --git a/ui/pages/BeaconChainWithdrawals.pw.tsx b/ui/pages/BeaconChainWithdrawals.pw.tsx
new file mode 100644
index 0000000000..a445ee1720
--- /dev/null
+++ b/ui/pages/BeaconChainWithdrawals.pw.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { data as withdrawalsData } from 'mocks/withdrawals/withdrawals';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import BeaconChainWithdrawals from './BeaconChainWithdrawals';
+
+test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
+  await mockEnvs(ENVS_MAP.beaconChain);
+  await mockTextAd();
+  await mockApiResponse('withdrawals', withdrawalsData);
+  await mockApiResponse('withdrawals_counters', { withdrawal_count: '111111', withdrawal_sum: '1010101010110101001101010' });
+  const component = await render(<BeaconChainWithdrawals/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/BeaconChainWithdrawals.tsx b/ui/pages/BeaconChainWithdrawals.tsx
new file mode 100644
index 0000000000..b19f30f26c
--- /dev/null
+++ b/ui/pages/BeaconChainWithdrawals.tsx
@@ -0,0 +1,100 @@
+import { Hide, Show, Skeleton, Text } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+import getCurrencyValue from 'lib/getCurrencyValue';
+import { currencyUnits } from 'lib/units';
+import { generateListStub } from 'stubs/utils';
+import { WITHDRAWAL } from 'stubs/withdrawals';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+import BeaconChainWithdrawalsListItem from 'ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem';
+import BeaconChainWithdrawalsTable from 'ui/withdrawals/beaconChain/BeaconChainWithdrawalsTable';
+
+const feature = config.features.beaconChain;
+
+const Withdrawals = () => {
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'withdrawals',
+    options: {
+      placeholderData: generateListStub<'withdrawals'>(WITHDRAWAL, 50, { next_page_params: {
+        index: 5,
+        items_count: 50,
+      } }),
+    },
+  });
+
+  const countersQuery = useApiQuery('withdrawals_counters', {
+    queryOptions: {
+      placeholderData: {
+        withdrawal_count: '19091878',
+        withdrawal_sum: '4630710684332438',
+      },
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        { data.items.map(((item, index) => (
+          <BeaconChainWithdrawalsListItem
+            key={ item.index + (isPlaceholderData ? String(index) : '') }
+            item={ item }
+            view="list"
+            isLoading={ isPlaceholderData }
+          />
+        ))) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <BeaconChainWithdrawalsTable
+          items={ data.items }
+          view="list"
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+          isLoading={ isPlaceholderData }
+        />
+      </Hide>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (countersQuery.isError || !feature.isEnabled) {
+      return null;
+    }
+
+    return (
+      <Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap">
+        { countersQuery.data && (
+          <Text lineHeight={{ base: '24px', lg: '32px' }}>
+            { BigNumber(countersQuery.data.withdrawal_count).toFormat() } withdrawals processed
+            and { getCurrencyValue({ value: countersQuery.data.withdrawal_sum }).valueStr } { currencyUnits.ether } withdrawn
+          </Text>
+        ) }
+      </Skeleton>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle
+        title={ config.meta.seo.enhancedDataEnabled ? `${ config.chain.name } withdrawals` : 'Withdrawals' }
+        withTextAd
+      />
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no withdrawals."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default Withdrawals;
diff --git a/ui/pages/Blob.pw.tsx b/ui/pages/Blob.pw.tsx
new file mode 100644
index 0000000000..9e18607631
--- /dev/null
+++ b/ui/pages/Blob.pw.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import * as blobsMock from 'mocks/blobs/blobs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
+
+import Blob from './Blob';
+
+const hooksConfig = {
+  router: {
+    query: { hash: blobsMock.base1.hash },
+  },
+};
+
+test.beforeEach(async({ mockTextAd }) => {
+  await mockTextAd();
+});
+
+test('base view +@mobile +@dark-mode', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse('blob', blobsMock.base1, { pathParams: { hash: blobsMock.base1.hash } });
+  const component = await render(<Blob/>, { hooksConfig });
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
+});
+
+test('without data', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse('blob', blobsMock.withoutData, { pathParams: { hash: blobsMock.base1.hash } });
+  const component = await render(<Blob/>, { hooksConfig });
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
+});
diff --git a/ui/pages/Blob.tsx b/ui/pages/Blob.tsx
new file mode 100644
index 0000000000..4df70d1ba9
--- /dev/null
+++ b/ui/pages/Blob.tsx
@@ -0,0 +1,59 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { BLOB } from 'stubs/blobs';
+import BlobInfo from 'ui/blob/BlobInfo';
+import TextAd from 'ui/shared/ad/TextAd';
+import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import BlobEntity from 'ui/shared/entities/blob/BlobEntity';
+import PageTitle from 'ui/shared/Page/PageTitle';
+
+const BlobPageContent = () => {
+  const router = useRouter();
+  const hash = getQueryParamString(router.query.hash);
+
+  const { data, isPlaceholderData, isError, error } = useApiQuery('blob', {
+    pathParams: { hash },
+    queryOptions: {
+      placeholderData: BLOB,
+      refetchOnMount: false,
+    },
+  });
+
+  const content = (() => {
+    if (isError) {
+      if (isCustomAppError(error)) {
+        throwOnResourceLoadError({ resource: 'blob', error, isError: true });
+      }
+
+      return <DataFetchAlert/>;
+    }
+
+    if (!data) {
+      return null;
+    }
+
+    return <BlobInfo data={ data } isLoading={ isPlaceholderData }/>;
+  })();
+
+  const titleSecondRow = (
+    <BlobEntity hash={ hash } noLink fontWeight={ 500 } fontFamily="heading"/>
+  );
+
+  return (
+    <>
+      <TextAd mb={ 6 }/>
+      <PageTitle
+        title="Blob details"
+        secondRow={ titleSecondRow }
+      />
+      { content }
+    </>
+  );
+};
+
+export default BlobPageContent;
diff --git a/ui/pages/Block.pw.tsx b/ui/pages/Block.pw.tsx
new file mode 100644
index 0000000000..48a69ee034
--- /dev/null
+++ b/ui/pages/Block.pw.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { numberToHex } from 'viem';
+
+import config from 'configs/app';
+import * as blockMock from 'mocks/blocks/block';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import Block from './Block';
+
+const height = String(blockMock.base.height);
+const hooksConfig = {
+  router: {
+    query: { height_or_hash: height },
+  },
+};
+
+test.beforeEach(async({ mockTextAd }) => {
+  await mockTextAd();
+});
+
+test('degradation view, details tab', async({ render, mockApiResponse, mockRpcResponse, page }) => {
+  await mockApiResponse('block', null as never, { pathParams: { height_or_hash: height }, status: 500 });
+  await mockRpcResponse({
+    Method: 'eth_getBlockByNumber',
+    Parameters: [ numberToHex(Number(height)), false ],
+    ReturnType: blockMock.rpcBlockBase,
+  });
+
+  const component = await render(<Block/>, { hooksConfig });
+  await page.waitForResponse(config.chain.rpcUrl as string);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('degradation view, txs tab', async({ render, mockApiResponse, mockRpcResponse, page }) => {
+  const hooksConfig = {
+    router: {
+      query: { height_or_hash: height, tab: 'txs' },
+    },
+  };
+
+  await mockApiResponse('block', blockMock.base, { pathParams: { height_or_hash: height } });
+  await mockApiResponse('block_txs', null as never, { pathParams: { height_or_hash: height }, status: 500 });
+  await mockRpcResponse({
+    Method: 'eth_getBlockByNumber',
+    Parameters: [ numberToHex(Number(height)), true ],
+    ReturnType: blockMock.rpcBlockWithTxsInfo,
+  });
+
+  const component = await render(<Block/>, { hooksConfig });
+  await page.waitForResponse(config.chain.rpcUrl as string);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('degradation view, withdrawals tab', async({ render, mockApiResponse, mockRpcResponse, mockEnvs, page }) => {
+  const hooksConfig = {
+    router: {
+      query: { height_or_hash: height, tab: 'withdrawals' },
+    },
+  };
+
+  await mockEnvs(ENVS_MAP.beaconChain);
+  await mockApiResponse('block', blockMock.withWithdrawals, { pathParams: { height_or_hash: height } });
+  await mockApiResponse('block_withdrawals', null as never, { pathParams: { height_or_hash: height }, status: 500 });
+  await mockRpcResponse({
+    Method: 'eth_getBlockByNumber',
+    Parameters: [ numberToHex(Number(height)), false ],
+    ReturnType: blockMock.rpcBlockBase,
+  });
+
+  const component = await render(<Block/>, { hooksConfig });
+  await page.waitForResponse(config.chain.rpcUrl as string);
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/Block.tsx b/ui/pages/Block.tsx
index 8f7b67c26b..b3c0222195 100644
--- a/ui/pages/Block.tsx
+++ b/ui/pages/Block.tsx
@@ -1,4 +1,5 @@
 import { chakra, Skeleton } from '@chakra-ui/react';
+import capitalize from 'lodash/capitalize';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -10,11 +11,15 @@ import { useAppContext } from 'lib/contexts/app';
 import throwOnAbsentParamError from 'lib/errors/throwOnAbsentParamError';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import getNetworkValidationActionText from 'lib/networks/getNetworkValidationActionText';
 import getQueryParamString from 'lib/router/getQueryParamString';
+import BlockCeloEpochTag from 'ui/block/BlockCeloEpochTag';
 import BlockDetails from 'ui/block/BlockDetails';
+import BlockEpochRewards from 'ui/block/BlockEpochRewards';
 import BlockWithdrawals from 'ui/block/BlockWithdrawals';
+import useBlockBlobTxsQuery from 'ui/block/useBlockBlobTxsQuery';
 import useBlockQuery from 'ui/block/useBlockQuery';
-import useBlockTxQuery from 'ui/block/useBlockTxQuery';
+import useBlockTxsQuery from 'ui/block/useBlockTxsQuery';
 import useBlockWithdrawalsQuery from 'ui/block/useBlockWithdrawalsQuery';
 import TextAd from 'ui/shared/ad/TextAd';
 import ServiceDegradationWarning from 'ui/shared/alerts/ServiceDegradationWarning';
@@ -28,9 +33,11 @@ import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
 
 const TAB_LIST_PROPS = {
   marginBottom: 0,
-  py: 5,
+  pt: 6,
+  pb: 6,
   marginTop: -5,
 };
+const TABS_HEIGHT = 88;
 
 const BlockPageContent = () => {
   const router = useRouter();
@@ -40,8 +47,14 @@ const BlockPageContent = () => {
   const tab = getQueryParamString(router.query.tab);
 
   const blockQuery = useBlockQuery({ heightOrHash });
-  const blockTxsQuery = useBlockTxQuery({ heightOrHash, blockQuery, tab });
+  const blockTxsQuery = useBlockTxsQuery({ heightOrHash, blockQuery, tab });
   const blockWithdrawalsQuery = useBlockWithdrawalsQuery({ heightOrHash, blockQuery, tab });
+  const blockBlobTxsQuery = useBlockBlobTxsQuery({ heightOrHash, blockQuery, tab });
+
+  const hasPagination = !isMobile && (
+    (tab === 'txs' && blockTxsQuery.pagination.isVisible) ||
+    (tab === 'withdrawals' && blockWithdrawalsQuery.pagination.isVisible)
+  );
 
   const tabs: Array<RoutedTab> = React.useMemo(() => ([
     {
@@ -60,10 +73,18 @@ const BlockPageContent = () => {
       component: (
         <>
           { blockTxsQuery.isDegradedData && <ServiceDegradationWarning isLoading={ blockTxsQuery.isPlaceholderData } mb={ 6 }/> }
-          <TxsWithFrontendSorting query={ blockTxsQuery } showBlockInfo={ false } showSocketInfo={ false }/>
+          <TxsWithFrontendSorting query={ blockTxsQuery } showBlockInfo={ false } showSocketInfo={ false } top={ hasPagination ? TABS_HEIGHT : 0 }/>
         </>
       ),
     },
+    config.features.dataAvailability.isEnabled && blockQuery.data?.blob_tx_count ?
+      {
+        id: 'blob_txs',
+        title: 'Blob txns',
+        component: (
+          <TxsWithFrontendSorting query={ blockBlobTxsQuery } showBlockInfo={ false } showSocketInfo={ false }/>
+        ),
+      } : null,
     config.features.beaconChain.isEnabled && Boolean(blockQuery.data?.withdrawals_count) ?
       {
         id: 'withdrawals',
@@ -75,12 +96,12 @@ const BlockPageContent = () => {
           </>
         ),
       } : null,
-  ].filter(Boolean)), [ blockQuery, blockTxsQuery, blockWithdrawalsQuery ]);
-
-  const hasPagination = !isMobile && (
-    (tab === 'txs' && blockTxsQuery.pagination.isVisible) ||
-    (tab === 'withdrawals' && blockWithdrawalsQuery.pagination.isVisible)
-  );
+    blockQuery.data?.celo?.is_epoch_block ? {
+      id: 'epoch_rewards',
+      title: 'Epoch rewards',
+      component: <BlockEpochRewards heightOrHash={ heightOrHash }/>,
+    } : null,
+  ].filter(Boolean)), [ blockBlobTxsQuery, blockQuery, blockTxsQuery, blockWithdrawalsQuery, hasPagination, heightOrHash ]);
 
   let pagination;
   if (tab === 'txs') {
@@ -103,7 +124,15 @@ const BlockPageContent = () => {
   }, [ appProps.referrer ]);
 
   throwOnAbsentParamError(heightOrHash);
-  throwOnResourceLoadError(blockQuery);
+
+  if (blockQuery.isError) {
+    if (!blockQuery.isDegradedData && blockQuery.error.status === 404 && !heightOrHash.startsWith('0x')) {
+      router.push({ pathname: '/block/countdown/[height]', query: { height: heightOrHash } });
+      return null;
+    } else {
+      throwOnResourceLoadError(blockQuery);
+    }
+  }
 
   const title = (() => {
     switch (blockQuery.data?.type) {
@@ -117,9 +146,10 @@ const BlockPageContent = () => {
         return `Block #${ blockQuery.data?.height }`;
     }
   })();
+
   const titleSecondRow = (
     <>
-      { !config.UI.views.block.hiddenFields?.miner && (
+      { !config.UI.views.block.hiddenFields?.miner && blockQuery.data?.miner && (
         <Skeleton
           isLoaded={ !blockQuery.isPlaceholderData }
           fontFamily="heading"
@@ -129,9 +159,9 @@ const BlockPageContent = () => {
           fontWeight={ 500 }
         >
           <chakra.span flexShrink={ 0 }>
-            { config.chain.verificationType === 'validation' ? 'Validated by' : 'Mined by' }
+            { `${ capitalize(getNetworkValidationActionText()) } by` }
           </chakra.span>
-          <AddressEntity address={ blockQuery.data?.miner }/>
+          <AddressEntity address={ blockQuery.data.miner }/>
         </Skeleton>
       ) }
       <NetworkExplorers type="block" pathParam={ heightOrHash } ml={{ base: config.UI.views.block.hiddenFields?.miner ? 0 : 3, lg: 'auto' }}/>
@@ -144,6 +174,7 @@ const BlockPageContent = () => {
       <PageTitle
         title={ title }
         backLink={ backLink }
+        contentAfter={ <BlockCeloEpochTag blockQuery={ blockQuery }/> }
         secondRow={ titleSecondRow }
         isLoading={ blockQuery.isPlaceholderData }
       />
diff --git a/ui/pages/BlockCountdown.pw.tsx b/ui/pages/BlockCountdown.pw.tsx
new file mode 100644
index 0000000000..d242979f78
--- /dev/null
+++ b/ui/pages/BlockCountdown.pw.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { test, expect } from 'playwright/lib';
+
+import BlockCountdown from './BlockCountdown';
+
+test('short period until the block +@mobile', async({ render, mockApiResponse }) => {
+  const height = '1234567890';
+  const hooksConfig = {
+    router: {
+      query: { height: height },
+    },
+  };
+
+  await mockApiResponse('block_countdown', {
+    result: {
+      CountdownBlock: height,
+      CurrentBlock: '1234567700',
+      RemainingBlock: '190',
+      EstimateTimeInSec: String(24 * 60 * 60 + 3 * 60 * 60 + 42 * 60 + 11),
+    },
+  }, {
+    queryParams: {
+      module: 'block',
+      action: 'getblockcountdown',
+      blockno: height,
+    },
+  });
+  const component = await render(<BlockCountdown hideCapybaraRunner/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
+
+test('long period until the block +@mobile', async({ render, mockApiResponse }) => {
+  const height = '123456789012345678901234567890';
+  const hooksConfig = {
+    router: {
+      query: { height: height },
+    },
+  };
+
+  await mockApiResponse('block_countdown', {
+    result: {
+      CountdownBlock: height,
+      CurrentBlock: '1234567700',
+      RemainingBlock: '123456789012345678900000000190',
+      EstimateTimeInSec: String(1234567890 * 24 * 60 * 60 + 3 * 60 * 60 + 42 * 60 + 11),
+    },
+  }, {
+    queryParams: {
+      module: 'block',
+      action: 'getblockcountdown',
+      blockno: height,
+    },
+  });
+  const component = await render(<BlockCountdown hideCapybaraRunner/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/BlockCountdown.tsx b/ui/pages/BlockCountdown.tsx
new file mode 100644
index 0000000000..cf16980b9a
--- /dev/null
+++ b/ui/pages/BlockCountdown.tsx
@@ -0,0 +1,127 @@
+import { Box, Center, Flex, Heading, Image, useColorModeValue, Grid, Button } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import dayjs from 'lib/date/dayjs';
+import downloadBlob from 'lib/downloadBlob';
+import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import BlockCountdownTimer from 'ui/blockCountdown/BlockCountdownTimer';
+import createGoogleCalendarLink from 'ui/blockCountdown/createGoogleCalendarLink';
+import createIcsFileBlob from 'ui/blockCountdown/createIcsFileBlob';
+import ContentLoader from 'ui/shared/ContentLoader';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import StatsWidget from 'ui/shared/stats/StatsWidget';
+import TruncatedValue from 'ui/shared/TruncatedValue';
+
+import CapybaraRunner from '../games/CapybaraRunner';
+
+type Props = {
+  hideCapybaraRunner?: boolean;
+};
+
+const BlockCountdown = ({ hideCapybaraRunner }: Props) => {
+  const router = useRouter();
+  const height = getQueryParamString(router.query.height);
+  const iconColor = useColorModeValue('gray.300', 'gray.600');
+  const buttonBgColor = useColorModeValue('gray.100', 'gray.700');
+
+  const { data, isPending, isError, error } = useApiQuery('block_countdown', {
+    queryParams: {
+      module: 'block',
+      action: 'getblockcountdown',
+      blockno: height,
+    },
+  });
+
+  const handleAddToAppleCalClick = React.useCallback(() => {
+    if (!data?.result?.EstimateTimeInSec) {
+      return;
+    }
+    const fileBlob = createIcsFileBlob({ blockHeight: height, date: dayjs().add(Number(data.result.EstimateTimeInSec), 's') });
+    downloadBlob(fileBlob, `Block #${ height } creation event.ics`);
+  }, [ data?.result?.EstimateTimeInSec, height ]);
+
+  const handleTimerFinish = React.useCallback(() => {
+    window.location.assign(route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: height } }));
+  }, [ height ]);
+
+  React.useEffect(() => {
+    if (!isError && !isPending && !data.result) {
+      handleTimerFinish();
+    }
+  }, [ data?.result, handleTimerFinish, isError, isPending ]);
+
+  if (isError) {
+    throwOnResourceLoadError({ isError, error, resource: 'block_countdown' });
+  }
+
+  if (isPending || !data?.result) {
+    return <Center h="100%"><ContentLoader/></Center>;
+  }
+
+  return (
+    <Center h="100%" alignItems={{ base: 'flex-start', lg: 'center' }}>
+      <Flex flexDir="column" w="fit-content" maxW={{ base: '100%', lg: '700px', xl: '1000px' }}>
+        <Flex columnGap={ 8 } alignItems="flex-start" justifyContent={{ base: 'space-between', lg: undefined }} w="100%">
+          <Box maxW={{ base: 'calc(100% - 65px - 32px)', lg: 'calc(100% - 125px - 32px)' }}>
+            <Heading
+              fontSize={{ base: '18px', lg: '32px' }}
+              lineHeight={{ base: '24px', lg: '40px' }}
+              h={{ base: '24px', lg: '40px' }}
+            >
+              <TruncatedValue value={ `Block #${ height }` } w="100%"/>
+            </Heading>
+            <Box mt={ 2 } color="text_secondary">
+              <Box fontWeight={ 600 }>Estimated target date</Box>
+              <Box>{ dayjs().add(Number(data.result.EstimateTimeInSec), 's').format('llll') }</Box>
+            </Box>
+            <Flex columnGap={ 2 } mt={ 3 }>
+              <LinkExternal
+                variant="subtle"
+                fontSize="sm"
+                lineHeight="20px"
+                px={ 2 }
+                display="inline-flex"
+                href={ createGoogleCalendarLink({ blockHeight: height, timeFromNow: Number(data.result.EstimateTimeInSec) }) }
+              >
+                <Image src="/static/google_calendar.svg" alt="Google calendar logo" boxSize={ 5 } mr={ 2 }/>
+                <span>Google</span>
+              </LinkExternal>
+              <Button
+                variant="subtle"
+                fontWeight={ 400 }
+                px={ 2 }
+                size="sm"
+                bgColor={ buttonBgColor }
+                display="inline-flex"
+                onClick={ handleAddToAppleCalClick }
+              >
+                <Image src="/static/apple_calendar.svg" alt="Apple calendar logo" boxSize={ 5 } mr={ 2 }/>
+                <span>Apple</span>
+              </Button>
+            </Flex>
+          </Box>
+          <IconSvg name="block_slim" w={{ base: '65px', lg: '125px' }} h={{ base: '75px', lg: '140px' }} color={ iconColor } flexShrink={ 0 }/>
+        </Flex>
+        { data.result.EstimateTimeInSec && (
+          <BlockCountdownTimer
+            value={ Math.ceil(Number(data.result.EstimateTimeInSec)) }
+            onFinish={ handleTimerFinish }
+          />
+        ) }
+        <Grid gridTemplateColumns="repeat(2, calc(50% - 4px))" columnGap={ 2 } mt={ 2 }>
+          <StatsWidget label="Remaining blocks" value={ data.result.RemainingBlock } icon="apps_slim"/>
+          <StatsWidget label="Current block" value={ data.result.CurrentBlock } icon="block_slim"/>
+        </Grid>
+        { !hideCapybaraRunner && <CapybaraRunner/> }
+      </Flex>
+    </Center>
+  );
+};
+
+export default React.memo(BlockCountdown);
diff --git a/ui/pages/BlockCountdownIndex.pw.tsx b/ui/pages/BlockCountdownIndex.pw.tsx
new file mode 100644
index 0000000000..50c5c2d14f
--- /dev/null
+++ b/ui/pages/BlockCountdownIndex.pw.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { test, expect } from 'playwright/lib';
+
+import BlockCountdownIndex from './BlockCountdownIndex';
+
+test('base view +@mobile', async({ render }) => {
+  const component = await render(<BlockCountdownIndex/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/BlockCountdownIndex.tsx b/ui/pages/BlockCountdownIndex.tsx
new file mode 100644
index 0000000000..9ba197fd90
--- /dev/null
+++ b/ui/pages/BlockCountdownIndex.tsx
@@ -0,0 +1,53 @@
+import { chakra, Box, Center, Heading, useColorModeValue } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import FilterInput from 'ui/shared/filters/FilterInput';
+import IconSvg from 'ui/shared/IconSvg';
+
+const BlockCountdownIndex = () => {
+  const router = useRouter();
+  const iconColor = useColorModeValue('gray.300', 'gray.600');
+
+  const handleFormSubmit = React.useCallback((event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const formData = new FormData(event.target as HTMLFormElement);
+    const searchTerm = formData.get('search_term');
+    if (typeof searchTerm === 'string' && searchTerm) {
+      router.push({ pathname: '/block/countdown/[height]', query: { height: searchTerm } }, undefined, { shallow: true });
+    }
+  }, [ router ]);
+
+  return (
+    <Center h="100%" justifyContent={{ base: 'flex-start', lg: 'center' }} flexDir="column" textAlign="center" pt={{ base: 8, lg: 0 }}>
+      <IconSvg name="block_countdown" color={ iconColor } w={{ base: '160px', lg: '240px' }} h={{ base: '123px', lg: '184px' }}/>
+      <Heading
+        fontSize={{ base: '18px', lg: '32px' }}
+        lineHeight={{ base: '24px', lg: '40px' }}
+        h={{ base: '24px', lg: '40px' }}
+        mt={{ base: 3, lg: 6 }}
+      >
+        Block countdown
+      </Heading>
+      <Box mt={ 2 }>
+        The estimated time for a block to be created and added to the blockchain.
+      </Box>
+      <chakra.form
+        noValidate
+        onSubmit={ handleFormSubmit }
+        w={{ base: '100%', lg: '360px' }}
+        mt={{ base: 3, lg: 6 }}
+      >
+        <FilterInput
+          placeholder="Search by block number"
+          size="xs"
+          type="number"
+          name="search_term"
+        />
+      </chakra.form>
+    </Center>
+  );
+};
+
+export default React.memo(BlockCountdownIndex);
diff --git a/ui/pages/Blocks.pw.tsx b/ui/pages/Blocks.pw.tsx
index 330e6b5bfa..d81c6f2c92 100644
--- a/ui/pages/Blocks.pw.tsx
+++ b/ui/pages/Blocks.pw.tsx
@@ -1,19 +1,13 @@
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import * as textAdMock from 'mocks/ad/textAd';
 import * as blockMock from 'mocks/blocks/block';
 import * as statsMock from 'mocks/stats/index';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
 import * as socketServer from 'playwright/fixtures/socketServer';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { test, expect, devices } from 'playwright/lib';
 
 import Blocks from './Blocks';
 
-const BLOCKS_API_URL = buildApiUrl('blocks') + '?type=block';
-const STATS_API_URL = buildApiUrl('homepage_stats');
 const hooksConfig = {
   router: {
     query: { tab: 'blocks' },
@@ -21,70 +15,29 @@ const hooksConfig = {
   },
 };
 
-const test = base.extend<socketServer.SocketServerFixture>({
-  createSocket: socketServer.createSocket,
-});
-
 // FIXME
 // test cases which use socket cannot run in parallel since the socket server always run on the same port
 test.describe.configure({ mode: 'serial' });
 
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
+test.beforeEach(async({ mockTextAd }) => {
+  await mockTextAd();
 });
 
-test('base view +@dark-mode', async({ mount, page }) => {
-  await page.route(BLOCKS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(blockMock.baseListResponse),
-  }));
-  await page.route(STATS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Blocks/>
-    </TestApp>,
-    { hooksConfig },
-  );
-  await page.waitForResponse(BLOCKS_API_URL);
+test('base view +@dark-mode', async({ render, mockApiResponse }) => {
+  await mockApiResponse('blocks', blockMock.baseListResponse, { queryParams: { type: 'block' } });
+  await mockApiResponse('stats', statsMock.base);
+
+  const component = await render(<Blocks/>, { hooksConfig });
 
   await expect(component).toHaveScreenshot();
 });
 
-const hiddenFieldsTest = test.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.viewsEnvs.block.hiddenFields) as any,
-});
+test('hidden fields', async({ render, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.blockHiddenFields);
+  await mockApiResponse('blocks', blockMock.baseListResponse, { queryParams: { type: 'block' } });
+  await mockApiResponse('stats', statsMock.base);
 
-hiddenFieldsTest('hidden fields', async({ mount, page }) => {
-  await page.route(BLOCKS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(blockMock.baseListResponse),
-  }));
-  await page.route(STATS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Blocks/>
-    </TestApp>,
-    { hooksConfig },
-  );
-  await page.waitForResponse(BLOCKS_API_URL);
+  const component = await render(<Blocks/>, { hooksConfig });
 
   await expect(component).toHaveScreenshot();
 });
@@ -92,66 +45,30 @@ hiddenFieldsTest('hidden fields', async({ mount, page }) => {
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  test(' base view', async({ mount, page }) => {
-    await page.route(BLOCKS_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(blockMock.baseListResponse),
-    }));
-    await page.route(STATS_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(statsMock.base),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <Blocks/>
-      </TestApp>,
-      { hooksConfig },
-    );
-    await page.waitForResponse(BLOCKS_API_URL);
+  test('base view', async({ render, mockApiResponse }) => {
+    await mockApiResponse('blocks', blockMock.baseListResponse, { queryParams: { type: 'block' } });
+    await mockApiResponse('stats', statsMock.base);
+
+    const component = await render(<Blocks/>, { hooksConfig });
 
     await expect(component).toHaveScreenshot();
   });
 
-  const hiddenFieldsTest = test.extend({
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    context: contextWithEnvs(configs.viewsEnvs.block.hiddenFields) as any,
-  });
+  test('hidden fields', async({ render, mockApiResponse, mockEnvs }) => {
+    await mockEnvs(ENVS_MAP.blockHiddenFields);
+    await mockApiResponse('blocks', blockMock.baseListResponse, { queryParams: { type: 'block' } });
+    await mockApiResponse('stats', statsMock.base);
 
-  hiddenFieldsTest('hidden fields', async({ mount, page }) => {
-    await page.route(BLOCKS_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(blockMock.baseListResponse),
-    }));
-    await page.route(STATS_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(statsMock.base),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <Blocks/>
-      </TestApp>,
-      { hooksConfig },
-    );
-    await page.waitForResponse(BLOCKS_API_URL);
+    const component = await render(<Blocks/>, { hooksConfig });
 
     await expect(component).toHaveScreenshot();
   });
 });
 
-test('new item from socket', async({ mount, page, createSocket }) => {
-  await page.route(BLOCKS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(blockMock.baseListResponse),
-  }));
+test('new item from socket', async({ render, mockApiResponse, createSocket }) => {
+  await mockApiResponse('blocks', blockMock.baseListResponse, { queryParams: { type: 'block' } });
 
-  const component = await mount(
-    <TestApp withSocket>
-      <Blocks/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const component = await render(<Blocks/>, { hooksConfig }, { withSocket: true });
 
   const socket = await createSocket();
   const channel = await socketServer.joinChannel(socket, 'blocks:new_block');
@@ -167,18 +84,10 @@ test('new item from socket', async({ mount, page, createSocket }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('socket error', async({ mount, page, createSocket }) => {
-  await page.route(BLOCKS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(blockMock.baseListResponse),
-  }));
-
-  const component = await mount(
-    <TestApp withSocket>
-      <Blocks/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('socket error', async({ render, mockApiResponse, createSocket }) => {
+  await mockApiResponse('blocks', blockMock.baseListResponse, { queryParams: { type: 'block' } });
+
+  const component = await render(<Blocks/>, { hooksConfig }, { withSocket: true });
 
   const socket = await createSocket();
   await socketServer.joinChannel(socket, 'blocks:new_block');
diff --git a/ui/pages/Blocks.tsx b/ui/pages/Blocks.tsx
index 183188c4fa..56934c7bfd 100644
--- a/ui/pages/Blocks.tsx
+++ b/ui/pages/Blocks.tsx
@@ -15,7 +15,8 @@ import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 
 const TAB_LIST_PROPS = {
   marginBottom: 0,
-  py: 5,
+  pt: 6,
+  pb: 6,
   marginTop: -5,
 };
 
diff --git a/ui/pages/Chart.pw.tsx b/ui/pages/Chart.pw.tsx
new file mode 100644
index 0000000000..d5e494abbb
--- /dev/null
+++ b/ui/pages/Chart.pw.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+
+import * as statsLineMock from 'mocks/stats/line';
+import { test, expect } from 'playwright/lib';
+import formatDate from 'ui/shared/chart/utils/formatIntervalDate';
+
+import Chart from './Chart';
+
+const CHART_ID = 'averageGasPrice';
+
+test.beforeEach(async({ mockTextAd }) => {
+  await mockTextAd();
+});
+
+const hooksConfig = {
+  router: {
+    query: { id: CHART_ID },
+  },
+};
+
+test('base view +@dark-mode +@mobile', async({ render, mockApiResponse, page }) => {
+  const date = new Date();
+  date.setMonth(date.getMonth() - 1);
+
+  const chartApiUrl = await mockApiResponse(
+    'stats_line',
+    statsLineMock.averageGasPrice,
+    {
+      pathParams: { id: CHART_ID },
+      queryParams: {
+        from: formatDate(date),
+        to: '2022-11-11',
+        resolution: 'DAY',
+      },
+    },
+  );
+
+  const component = await render(<Chart/>, { hooksConfig });
+  await page.waitForResponse(chartApiUrl);
+  await page.waitForFunction(() => {
+    return document.querySelector('path[data-name="chart-Charttitle-fullscreen"]')?.getAttribute('opacity') === '1';
+  });
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/Chart.tsx b/ui/pages/Chart.tsx
new file mode 100644
index 0000000000..1e1bef382a
--- /dev/null
+++ b/ui/pages/Chart.tsx
@@ -0,0 +1,279 @@
+import { Button, Flex, Link, Skeleton, Text } from '@chakra-ui/react';
+import type { NextRouter } from 'next/router';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import { Resolution } from '@blockscout/stats-types';
+import type { StatsIntervalIds } from 'types/client/stats';
+import { StatsIntervalId } from 'types/client/stats';
+
+import config from 'configs/app';
+import { useAppContext } from 'lib/contexts/app';
+import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import isBrowser from 'lib/isBrowser';
+import * as metadata from 'lib/metadata';
+import * as mixpanel from 'lib/mixpanel/index';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
+import ChartIntervalSelect from 'ui/shared/chart/ChartIntervalSelect';
+import ChartMenu from 'ui/shared/chart/ChartMenu';
+import ChartWidgetContent from 'ui/shared/chart/ChartWidgetContent';
+import useChartQuery from 'ui/shared/chart/useChartQuery';
+import useZoom from 'ui/shared/chart/useZoom';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import IconSvg from 'ui/shared/IconSvg';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import Select from 'ui/shared/select/Select';
+import { STATS_RESOLUTIONS } from 'ui/stats/constants';
+
+const DEFAULT_RESOLUTION = Resolution.DAY;
+
+const getIntervalByResolution = (resolution: Resolution): StatsIntervalIds => {
+  switch (resolution) {
+    case 'DAY':
+      return 'oneMonth';
+    case 'WEEK':
+      return 'oneMonth';
+    case 'MONTH':
+      return 'oneYear';
+    case 'YEAR':
+      return 'all';
+    default:
+      return 'oneMonth';
+  }
+};
+
+const getIntervalFromQuery = (router: NextRouter): StatsIntervalIds | undefined => {
+  const intervalFromQuery = getQueryParamString(router.query.interval);
+
+  if (!intervalFromQuery || !Object.values(StatsIntervalId).includes(intervalFromQuery as StatsIntervalIds)) {
+    return undefined;
+  }
+
+  return intervalFromQuery as StatsIntervalIds;
+};
+
+const getResolutionFromQuery = (router: NextRouter) => {
+  const resolutionFromQuery = getQueryParamString(router.query.resolution);
+
+  if (!resolutionFromQuery || !Resolution[resolutionFromQuery as keyof typeof Resolution]) {
+    return DEFAULT_RESOLUTION;
+  }
+
+  return resolutionFromQuery as Resolution;
+};
+
+const Chart = () => {
+  const router = useRouter();
+  const id = getQueryParamString(router.query.id);
+  const intervalFromQuery = getIntervalFromQuery(router);
+  const resolutionFromQuery = getResolutionFromQuery(router);
+  const defaultResolution = resolutionFromQuery || DEFAULT_RESOLUTION;
+  const [ intervalState, setIntervalState ] = React.useState<StatsIntervalIds | undefined>(intervalFromQuery);
+  const [ resolution, setResolution ] = React.useState<Resolution>(defaultResolution);
+  const { zoomRange, handleZoom, handleZoomReset } = useZoom();
+
+  const interval = intervalState || getIntervalByResolution(resolution);
+
+  const ref = React.useRef(null);
+
+  const isMobile = useIsMobile();
+  const isInBrowser = isBrowser();
+
+  const appProps = useAppContext();
+  const backLink = React.useMemo(() => {
+    const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/stats');
+
+    if (!hasGoBackLink) {
+      return;
+    }
+
+    return {
+      label: 'Back to charts list',
+      url: appProps.referrer,
+    };
+  }, [ appProps.referrer ]);
+
+  const onIntervalChange = React.useCallback((interval: StatsIntervalIds) => {
+    setIntervalState(interval);
+    router.push(
+      {
+        pathname: router.pathname,
+        query: { ...router.query, interval },
+      },
+      undefined,
+      { shallow: true },
+    );
+  }, [ setIntervalState, router ]);
+
+  const onResolutionChange = React.useCallback((resolution: Resolution) => {
+    setResolution(resolution);
+    router.push({
+      pathname: router.pathname,
+      query: { ...router.query, resolution },
+    },
+    undefined,
+    { shallow: true },
+    );
+  }, [ setResolution, router ]);
+
+  const handleReset = React.useCallback(() => {
+    handleZoomReset();
+    onResolutionChange(DEFAULT_RESOLUTION);
+  }, [ handleZoomReset, onResolutionChange ]);
+
+  const { items, info, lineQuery } = useChartQuery(id, resolution, interval);
+
+  React.useEffect(() => {
+    if (info && !config.meta.seo.enhancedDataEnabled) {
+      metadata.update({ pathname: '/stats/[id]', query: { id } }, info);
+    }
+  }, [ info, id ]);
+
+  const onShare = React.useCallback(async() => {
+    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Share chart', Info: id });
+    try {
+      await window.navigator.share({
+        title: info?.title,
+        text: info?.description,
+        url: window.location.href,
+      });
+    } catch (error) {}
+  }, [ info, id ]);
+
+  if (lineQuery.isError) {
+    if (isCustomAppError(lineQuery.error)) {
+      throwOnResourceLoadError({ resource: 'stats_line', error: lineQuery.error, isError: true });
+    }
+  }
+
+  const hasItems = (items && items.length > 2) || lineQuery.isPending;
+
+  const isInfoLoading = !info && lineQuery.isPlaceholderData;
+
+  const shareButton = (
+    <Button
+      leftIcon={ <IconSvg name="share" w={ 4 } h={ 4 }/> }
+      colorScheme="blue"
+      size="sm"
+      variant="outline"
+      onClick={ onShare }
+      ml={ 6 }
+    >
+      Share
+    </Button>
+  );
+
+  const resolutionOptions = React.useMemo(() => {
+    const resolutions = lineQuery.data?.info?.resolutions || [];
+    return STATS_RESOLUTIONS
+      .filter((resolution) => resolutions.includes(resolution.id))
+      .map((resolution) => ({ value: resolution.id, label: resolution.title }));
+  }, [ lineQuery.data?.info?.resolutions ]);
+
+  return (
+    <>
+      <PageTitle
+        title={ info?.title || lineQuery.data?.info?.title || '' }
+        mb={ 3 }
+        isLoading={ isInfoLoading }
+        backLink={ backLink }
+        secondRow={ info?.description || lineQuery.data?.info?.description }
+        withTextAd
+      />
+      <Flex alignItems="center" justifyContent="space-between">
+        <Flex alignItems="center" gap={{ base: 3, lg: 6 }} maxW="100%">
+          <Flex alignItems="center" gap={ 3 }>
+            { !isMobile && <Text>Period</Text> }
+            <ChartIntervalSelect interval={ interval } onIntervalChange={ onIntervalChange }/>
+          </Flex>
+          { (
+            (info?.resolutions && info?.resolutions.length > 1) ||
+            (!info && lineQuery.data?.info?.resolutions && lineQuery.data?.info?.resolutions.length > 1)
+          ) && (
+            <Flex alignItems="center" gap={ 3 }>
+              <Skeleton isLoaded={ !isInfoLoading }>
+                { isMobile ? 'Res.' : 'Resolution' }
+              </Skeleton>
+              <Select
+                options={ resolutionOptions }
+                defaultValue={ defaultResolution }
+                onChange={ onResolutionChange }
+                isLoading={ isInfoLoading }
+                w={{ base: 'fit-content', lg: '160px' }}
+                fontWeight={ 600 }
+              />
+            </Flex>
+          ) }
+          { (Boolean(zoomRange)) && (
+            <Link
+              onClick={ handleReset }
+              display="flex"
+              alignItems="center"
+              gap={ 2 }
+            >
+              <IconSvg name="repeat" w={ 5 } h={ 5 }/>
+              { !isMobile && 'Reset' }
+            </Link>
+          ) }
+        </Flex>
+        <Flex alignItems="center" gap={ 3 }>
+          { /* TS thinks window.navigator.share can't be undefined, but it can */ }
+          { /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ }
+          { !isMobile && (isInBrowser && ((window.navigator.share as any) ?
+            shareButton :
+            (
+              <CopyToClipboard
+                text={ config.app.baseUrl + router.asPath }
+                size={ 5 }
+                type="link"
+                variant="outline"
+                colorScheme="blue"
+                display="flex"
+                borderRadius="8px"
+                width={ 8 }
+                height={ 8 }
+              />
+            )
+          )) }
+          { (hasItems || lineQuery.isPlaceholderData) && (
+            <ChartMenu
+              items={ items }
+              title={ info?.title || '' }
+              isLoading={ lineQuery.isPlaceholderData }
+              chartRef={ ref }
+              resolution={ resolution }
+              zoomRange={ zoomRange }
+              handleZoom={ handleZoom }
+              handleZoomReset={ handleZoomReset }
+              chartUrl={ isMobile ? window.location.href : undefined }
+            />
+          ) }
+        </Flex>
+      </Flex>
+      <Flex
+        ref={ ref }
+        flexGrow={ 1 }
+        h="50vh"
+        mt={ 3 }
+        position="relative"
+      >
+        <ChartWidgetContent
+          isError={ lineQuery.isError }
+          items={ items }
+          title={ info?.title || '' }
+          units={ info?.units || undefined }
+          isEnlarged
+          isLoading={ lineQuery.isPlaceholderData }
+          zoomRange={ zoomRange }
+          handleZoom={ handleZoom }
+          emptyText="No data for the selected resolution & interval."
+          resolution={ resolution }
+        />
+      </Flex>
+    </>
+  );
+};
+
+export default Chart;
diff --git a/ui/pages/ContractVerificationForAddress.tsx b/ui/pages/ContractVerificationForAddress.tsx
index d4dceb9259..b7f30d8034 100644
--- a/ui/pages/ContractVerificationForAddress.tsx
+++ b/ui/pages/ContractVerificationForAddress.tsx
@@ -1,7 +1,8 @@
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { SmartContractVerificationMethod } from 'types/api/contract';
+import type { SmartContractVerificationMethodApi } from 'types/api/contract';
+import type { SmartContractVerificationMethod } from 'types/client/contract';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/contexts/app';
@@ -59,7 +60,7 @@ const ContractVerificationForAddress = () => {
 
     return (
       <ContractVerificationForm
-        method={ method && configQuery.data.verification_options.includes(method) ? method : undefined }
+        method={ method && configQuery.data.verification_options.includes(method) ? method as SmartContractVerificationMethodApi : undefined }
         config={ configQuery.data }
         hash={ hash }
       />
@@ -86,7 +87,7 @@ const ContractVerificationForAddress = () => {
         backLink={ backLink }
       />
       <AddressEntity
-        address={{ hash, is_contract: true, implementation_name: null }}
+        address={{ hash, is_contract: true }}
         noLink
         fontFamily="heading"
         fontSize="lg"
diff --git a/ui/pages/CsvExport.pw.tsx b/ui/pages/CsvExport.pw.tsx
index 15e3ead1ac..6ded334b95 100644
--- a/ui/pages/CsvExport.pw.tsx
+++ b/ui/pages/CsvExport.pw.tsx
@@ -1,41 +1,35 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as addressMock from 'mocks/address/address';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import * as tokenMock from 'mocks/tokens/tokenInfo';
+import { test, expect } from 'playwright/lib';
 
 import CsvExport from './CsvExport';
 
-const ADDRESS_API_URL = buildApiUrl('address', { hash: addressMock.hash });
-const hooksConfig = {
-  router: {
-    query: { address: addressMock.hash, type: 'transactions', filterType: 'address', filterValue: 'from' },
-    isReady: true,
-  },
-};
-
-test.beforeEach(async({ page }) => {
-  await page.route(ADDRESS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(addressMock.withName),
-  }));
-});
+test('base view +@mobile +@dark-mode', async({ render, mockApiResponse }) => {
+  const hooksConfig = {
+    router: {
+      query: { address: addressMock.hash, type: 'transactions', filterType: 'address', filterValue: 'from' },
+    },
+  };
+  await mockApiResponse('address', addressMock.validator, { pathParams: { hash: addressMock.hash } });
+  await mockApiResponse('config_csv_export', { limit: 42123 });
+
+  const component = await render(<CsvExport/>, { hooksConfig });
 
-test('base view +@mobile +@dark-mode', async({ mount, page }) => {
+  await expect(component).toHaveScreenshot();
+});
 
-  const component = await mount(
-    <TestApp>
-      <CsvExport/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('token holders', async({ render, mockApiResponse }) => {
+  const hooksConfig = {
+    router: {
+      query: { address: addressMock.hash, type: 'holders' },
+    },
+  };
+  await mockApiResponse('address', addressMock.token, { pathParams: { hash: addressMock.hash } });
+  await mockApiResponse('token', tokenMock.tokenInfo, { pathParams: { hash: addressMock.hash } });
 
-  await page.waitForResponse('https://www.google.com/recaptcha/api2/**');
+  const component = await render(<CsvExport/>, { hooksConfig });
 
-  await expect(component).toHaveScreenshot({
-    mask: [ page.locator('.recaptcha') ],
-    maskColor: configs.maskColor,
-  });
+  await expect(component).toHaveScreenshot();
 });
diff --git a/ui/pages/CsvExport.tsx b/ui/pages/CsvExport.tsx
index 38a9b66a7b..58dc12122d 100644
--- a/ui/pages/CsvExport.tsx
+++ b/ui/pages/CsvExport.tsx
@@ -15,6 +15,7 @@ import { nbsp } from 'lib/html-entities';
 import CsvExportForm from 'ui/csvExport/CsvExportForm';
 import ContentLoader from 'ui/shared/ContentLoader';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
 interface ExportTypeEntity {
@@ -53,6 +54,16 @@ const EXPORT_TYPES: Record<CsvExportParams['type'], ExportTypeEntity> = {
     fileNameTemplate: 'logs',
     filterType: 'topic',
   },
+  holders: {
+    text: 'holders',
+    resource: 'csv_export_token_holders',
+    fileNameTemplate: 'holders',
+  },
+  'epoch-rewards': {
+    text: 'epoch rewards',
+    resource: 'csv_export_epoch_rewards',
+    fileNameTemplate: 'epoch_rewards',
+  },
 };
 
 const isCorrectExportType = (type: string): type is CsvExportParams['type'] => Object.keys(EXPORT_TYPES).includes(type);
@@ -75,6 +86,21 @@ const CsvExport = () => {
     },
   });
 
+  const tokenQuery = useApiQuery('token', {
+    pathParams: { hash: addressHash },
+    queryOptions: {
+      enabled: Boolean(addressHash) && exportTypeParam === 'holders',
+    },
+  });
+
+  const configQuery = useApiQuery('config_csv_export', {
+    queryOptions: {
+      enabled: Boolean(addressHash),
+    },
+  });
+
+  const isLoading = addressQuery.isPending || configQuery.isPending || (exportTypeParam === 'holders' && tokenQuery.isPending);
+
   const backLink = React.useMemo(() => {
     const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/address');
 
@@ -111,7 +137,7 @@ const CsvExport = () => {
   const content = (() => {
     throwOnResourceLoadError(addressQuery);
 
-    if (addressQuery.isPending) {
+    if (isLoading) {
       return <ContentLoader/>;
     }
 
@@ -119,6 +145,7 @@ const CsvExport = () => {
       <CsvExportForm
         hash={ addressHash }
         resource={ exportType.resource }
+        exportType={ isCorrectExportType(exportTypeParam) ? exportTypeParam : undefined }
         filterType={ filterType }
         filterValue={ filterValue }
         fileNameTemplate={ exportType.fileNameTemplate }
@@ -126,24 +153,58 @@ const CsvExport = () => {
     );
   })();
 
-  return (
-    <>
-      <PageTitle
-        title="Export data to CSV file"
-        backLink={ backLink }
-      />
+  const description = (() => {
+    if (isLoading) {
+      return null;
+    }
+
+    const limit = (configQuery.data?.limit || 10_000).toLocaleString(undefined, { maximumFractionDigits: 3, notation: 'compact' });
+
+    if (exportTypeParam === 'holders' && tokenQuery.data) {
+      return (
+        <Flex mb={ 10 } whiteSpace="pre-wrap" flexWrap="wrap">
+          <span>Export { exportType.text } for token </span>
+          <TokenEntity
+            token={ tokenQuery.data }
+            truncation={ isMobile ? 'constant' : 'dynamic' }
+            w="fit-content"
+            maxW={{ base: '100%', lg: '400px' }}
+            noCopy
+            noSymbol
+          />
+          <span> to CSV file. </span>
+          <span>Exports are limited to the top { limit } holders by amount held.</span>
+        </Flex>
+      );
+    }
+
+    if (!addressQuery.data) {
+      return null;
+    }
+
+    return (
       <Flex mb={ 10 } whiteSpace="pre-wrap" flexWrap="wrap">
         <span>Export { exportType.text } for address </span>
         <AddressEntity
-          address={{ hash: addressHash, is_contract: true, implementation_name: null }}
+          address={ addressQuery.data }
           truncation={ isMobile ? 'constant' : 'dynamic' }
           noCopy
         />
         <span>{ nbsp }</span>
         { filterType && filterValue && <span>with applied filter by { filterType } ({ filterValue }) </span> }
         <span>to CSV file. </span>
-        <span>Exports are limited to the last 10K { exportType.text }.</span>
+        <span>Exports are limited to the last { limit } { exportType.text }.</span>
       </Flex>
+    );
+  })();
+
+  return (
+    <>
+      <PageTitle
+        title="Export data to CSV file"
+        backLink={ backLink }
+      />
+      { description }
       { content }
     </>
   );
diff --git a/ui/pages/CustomAbi.tsx b/ui/pages/CustomAbi.tsx
index d2cdd70839..49a72ae9e7 100644
--- a/ui/pages/CustomAbi.tsx
+++ b/ui/pages/CustomAbi.tsx
@@ -4,7 +4,6 @@ import React, { useCallback, useState } from 'react';
 import type { CustomAbi } from 'types/api/account';
 
 import useApiQuery from 'lib/api/useApiQuery';
-import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
 import { CUSTOM_ABI } from 'stubs/account';
 import CustomAbiModal from 'ui/customAbi/CustomAbiModal/CustomAbiModal';
 import CustomAbiListItem from 'ui/customAbi/CustomAbiTable/CustomAbiListItem';
@@ -13,6 +12,7 @@ import DeleteCustomAbiModal from 'ui/customAbi/DeleteCustomAbiModal';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import PageTitle from 'ui/shared/Page/PageTitle';
+import useRedirectForInvalidAuthToken from 'ui/snippets/auth/useRedirectForInvalidAuthToken';
 
 const CustomAbiPage: React.FC = () => {
   const customAbiModalProps = useDisclosure();
@@ -64,7 +64,7 @@ const CustomAbiPage: React.FC = () => {
         <Box display={{ base: 'block', lg: 'none' }}>
           { data?.map((item, index) => (
             <CustomAbiListItem
-              key={ item.id + (isPlaceholderData ? index : '') }
+              key={ item.id + (isPlaceholderData ? String(index) : '') }
               item={ item }
               isLoading={ isPlaceholderData }
               onDeleteClick={ onDeleteClick }
diff --git a/ui/pages/GasTracker.pw.tsx b/ui/pages/GasTracker.pw.tsx
new file mode 100644
index 0000000000..3a989cd72c
--- /dev/null
+++ b/ui/pages/GasTracker.pw.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import * as statsMock from 'mocks/stats/index';
+import * as statsLineMock from 'mocks/stats/line';
+import * as statsLinesMock from 'mocks/stats/lines';
+import { test, expect } from 'playwright/lib';
+
+import GasTracker from './GasTracker';
+
+test.beforeEach(async({ mockTextAd }) => {
+  await mockTextAd();
+});
+
+test('base view +@dark-mode +@mobile', async({ render, mockApiResponse, mockEnvs, page }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_SEO_ENHANCED_DATA_ENABLED', 'true' ],
+  ]);
+  await mockApiResponse('stats', { ...statsMock.base, coin_price: '2442.789' });
+  await mockApiResponse('stats_lines', statsLinesMock.base);
+  const chartApiUrl = await mockApiResponse(
+    'stats_line',
+    statsLineMock.averageGasPrice,
+    { pathParams: { id: 'averageGasPrice' }, queryParams: { from: '**' } },
+  );
+  const component = await render(<GasTracker/>);
+  await page.waitForResponse(chartApiUrl);
+  await page.waitForFunction(() => {
+    return document.querySelector('path[data-name="chart-Averagegasprice-small"]')?.getAttribute('opacity') === '1';
+  });
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/GasTracker.tsx b/ui/pages/GasTracker.tsx
new file mode 100644
index 0000000000..177fbae566
--- /dev/null
+++ b/ui/pages/GasTracker.tsx
@@ -0,0 +1,104 @@
+import {
+  Alert,
+  Box,
+  Flex,
+  Heading,
+  Skeleton,
+  chakra,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+import dayjs from 'lib/date/dayjs';
+import { HOMEPAGE_STATS } from 'stubs/stats';
+import GasTrackerChart from 'ui/gasTracker/GasTrackerChart';
+import GasTrackerFaq from 'ui/gasTracker/GasTrackerFaq';
+import GasTrackerNetworkUtilization from 'ui/gasTracker/GasTrackerNetworkUtilization';
+import GasTrackerPrices from 'ui/gasTracker/GasTrackerPrices';
+import GasInfoUpdateTimer from 'ui/shared/gas/GasInfoUpdateTimer';
+import NativeTokenIcon from 'ui/shared/NativeTokenIcon';
+import PageTitle from 'ui/shared/Page/PageTitle';
+
+const GasTracker = () => {
+  const { data, isPlaceholderData, isError, error, dataUpdatedAt } = useApiQuery('stats', {
+    queryOptions: {
+      placeholderData: HOMEPAGE_STATS,
+      refetchOnMount: false,
+    },
+  });
+
+  if (isError) {
+    throw new Error(undefined, { cause: error });
+  }
+
+  const isLoading = isPlaceholderData;
+
+  const titleSecondRow = (
+    <Flex
+      alignItems={{ base: 'flex-start', lg: 'center' }}
+      fontFamily="heading"
+      fontSize="lg"
+      fontWeight={ 500 }
+      w="100%"
+      columnGap={ 3 }
+      rowGap={ 1 }
+      flexDir={{ base: 'column', lg: 'row' }}
+    >
+      { typeof data?.network_utilization_percentage === 'number' &&
+        <GasTrackerNetworkUtilization percentage={ data.network_utilization_percentage } isLoading={ isLoading }/> }
+      { data?.gas_price_updated_at && (
+        <Skeleton isLoaded={ !isLoading } whiteSpace="pre" display="flex" alignItems="center">
+          <span>Last updated </span>
+          <chakra.span color="text_secondary">{ dayjs(data.gas_price_updated_at).format('DD MMM, HH:mm:ss') }</chakra.span>
+          { data.gas_prices_update_in !== 0 && (
+            <GasInfoUpdateTimer
+              key={ dataUpdatedAt }
+              startTime={ dataUpdatedAt }
+              duration={ data.gas_prices_update_in }
+              size={ 5 }
+              ml={ 2 }
+            />
+          ) }
+        </Skeleton>
+      ) }
+      { data?.coin_price && (
+        <Skeleton isLoaded={ !isLoading } ml={{ base: 0, lg: 'auto' }} whiteSpace="pre" display="flex" alignItems="center">
+          <NativeTokenIcon mr={ 2 } boxSize={ 6 }/>
+          <chakra.span color="text_secondary">{ config.chain.currency.symbol }</chakra.span>
+          <span> ${ Number(data.coin_price).toLocaleString(undefined, { maximumFractionDigits: 2 }) }</span>
+        </Skeleton>
+      ) }
+    </Flex>
+  );
+
+  const snippets = (() => {
+    if (!isPlaceholderData && data?.gas_prices?.slow === null && data?.gas_prices.average === null && data.gas_prices.fast === null) {
+      return <Alert status="warning">No recent data available</Alert>;
+    }
+
+    return data?.gas_prices ? <GasTrackerPrices prices={ data.gas_prices } isLoading={ isLoading }/> : null;
+  })();
+
+  const faq = config.meta.seo.enhancedDataEnabled ? <GasTrackerFaq/> : null;
+
+  return (
+    <>
+      <PageTitle
+        title={ config.meta.seo.enhancedDataEnabled ? `${ config.chain.name } gas tracker` : 'Gas tracker' }
+        secondRow={ titleSecondRow }
+        withTextAd
+      />
+      <Heading as="h2" mt={ 8 } mb={ 4 } fontSize="2xl">{ `Track ${ config.chain.name } gas fees` }</Heading>
+      { snippets }
+      { config.features.stats.isEnabled && (
+        <Box mt={ 12 }>
+          <GasTrackerChart/>
+        </Box>
+      ) }
+      { faq }
+    </>
+  );
+};
+
+export default GasTracker;
diff --git a/ui/pages/Home.pw.tsx b/ui/pages/Home.pw.tsx
index 30e9dd0a05..51630da274 100644
--- a/ui/pages/Home.pw.tsx
+++ b/ui/pages/Home.pw.tsx
@@ -1,4 +1,3 @@
-import { test, expect, devices } from '@playwright/experimental-ct-react';
 import type { Locator } from '@playwright/test';
 import React from 'react';
 
@@ -6,137 +5,73 @@ import * as blockMock from 'mocks/blocks/block';
 import * as dailyTxsMock from 'mocks/stats/daily_txs';
 import * as statsMock from 'mocks/stats/index';
 import * as txMock from 'mocks/txs/tx';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { test, expect, devices } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import Home from './Home';
 
 test.describe('default view', () => {
   let component: Locator;
 
-  test.beforeEach(async({ page, mount }) => {
-    await page.route(buildApiUrl('homepage_stats'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(statsMock.base),
-    }));
-    await page.route(buildApiUrl('homepage_blocks'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify([
-        blockMock.base,
-        blockMock.base2,
-      ]),
-    }));
-    await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify([
-        txMock.base,
-        txMock.withContractCreation,
-        txMock.withTokenTransfer,
-      ]),
-    }));
-    await page.route(buildApiUrl('homepage_chart_txs'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(dailyTxsMock.base),
-    }));
-
-    component = await mount(
-      <TestApp>
-        <Home/>
-      </TestApp>,
-    );
+  test.beforeEach(async({ render, mockApiResponse, mockAssetResponse }) => {
+    await mockAssetResponse(statsMock.base.coin_image as string, './playwright/mocks/image_s.jpg');
+    await mockApiResponse('stats', statsMock.base);
+    await mockApiResponse('homepage_blocks', [
+      blockMock.base,
+      blockMock.base2,
+    ]);
+    await mockApiResponse('homepage_txs', [
+      txMock.base,
+      txMock.withContractCreation,
+      txMock.withTokenTransfer,
+    ]);
+    await mockApiResponse('stats_charts_txs', dailyTxsMock.base);
+
+    component = await render(<Home/>);
   });
 
   test('-@default +@dark-mode', async({ page }) => {
     await expect(component).toHaveScreenshot({
-      mask: [ page.locator(configs.adsBannerSelector) ],
-      maskColor: configs.maskColor,
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
     });
   });
 
   test.describe('screen xl', () => {
-    test.use({ viewport: configs.viewport.xl });
+    test.use({ viewport: pwConfig.viewport.xl });
 
-    test('', async({ page }) => {
+    test('base view', async({ page }) => {
       await expect(component).toHaveScreenshot({
-        mask: [ page.locator(configs.adsBannerSelector) ],
-        maskColor: configs.maskColor,
+        mask: [ page.locator(pwConfig.adsBannerSelector) ],
+        maskColor: pwConfig.maskColor,
       });
     });
   });
 });
 
-test.describe('custom hero plate background', () => {
-  const IMAGE_URL = 'https://localhost:3000/my-image.png';
-  const extendedTest = test.extend({
-    context: contextWithEnvs([
-      { name: 'NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND', value: `no-repeat center/cover url(${ IMAGE_URL })` },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ]) as any,
-  });
-
-  extendedTest('default view', async({ mount, page }) => {
-    await page.route(IMAGE_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_long.jpg',
-      });
-    });
-
-    const component = await mount(
-      <TestApp>
-        <Home/>
-      </TestApp>,
-    );
-
-    const heroPlate = component.locator('div[data-label="hero plate"]');
-
-    await expect(heroPlate).toHaveScreenshot({
-      mask: [ page.locator(configs.adsBannerSelector) ],
-      maskColor: configs.maskColor,
-    });
-  });
-});
-
 // had to separate mobile test, otherwise all the tests fell on CI
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  test('base view', async({ mount, page }) => {
-    await page.route(buildApiUrl('homepage_stats'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(statsMock.base),
-    }));
-    await page.route(buildApiUrl('homepage_blocks'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify([
-        blockMock.base,
-        blockMock.base2,
-      ]),
-    }));
-    await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify([
-        txMock.base,
-        txMock.withContractCreation,
-        txMock.withTokenTransfer,
-      ]),
-    }));
-    await page.route(buildApiUrl('homepage_chart_txs'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(dailyTxsMock.base),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <Home/>
-      </TestApp>,
-    );
+  test('base view', async({ render, page, mockAssetResponse, mockApiResponse }) => {
+    await mockAssetResponse(statsMock.base.coin_image as string, './playwright/mocks/image_s.jpg');
+    await mockApiResponse('stats', statsMock.base);
+    await mockApiResponse('homepage_blocks', [
+      blockMock.base,
+      blockMock.base2,
+    ]);
+    await mockApiResponse('homepage_txs', [
+      txMock.base,
+      txMock.withContractCreation,
+      txMock.withTokenTransfer,
+    ]);
+    await mockApiResponse('stats_charts_txs', dailyTxsMock.base);
+
+    const component = await render(<Home/>);
 
     await expect(component).toHaveScreenshot({
-      mask: [ page.locator(configs.adsBannerSelector) ],
-      maskColor: configs.maskColor,
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
     });
   });
 });
diff --git a/ui/pages/Home.tsx b/ui/pages/Home.tsx
index e3abd31c37..dc1a9da868 100644
--- a/ui/pages/Home.tsx
+++ b/ui/pages/Home.tsx
@@ -1,18 +1,24 @@
+<<<<<<< HEAD
 import { Box, Heading, Flex, useColorModeValue } from '@chakra-ui/react';
+=======
+import { Box, Flex } from '@chakra-ui/react';
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739
 import React from 'react';
 
 import config from 'configs/app';
+import HeroBanner from 'ui/home/HeroBanner';
 import ChainIndicators from 'ui/home/indicators/ChainIndicators';
+import LatestArbitrumL2Batches from 'ui/home/latestBatches/LatestArbitrumL2Batches';
+import LatestZkEvmL2Batches from 'ui/home/latestBatches/LatestZkEvmL2Batches';
 import LatestBlocks from 'ui/home/LatestBlocks';
-import LatestZkEvmL2Batches from 'ui/home/LatestZkEvmL2Batches';
 import Stats from 'ui/home/Stats';
 import Transactions from 'ui/home/Transactions';
 import AdBanner from 'ui/shared/ad/AdBanner';
-import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
-import SearchBar from 'ui/snippets/searchBar/SearchBar';
-import WalletMenuDesktop from 'ui/snippets/walletMenu/WalletMenuDesktop';
+
+const rollupFeature = config.features.rollup;
 
 const Home = () => {
+<<<<<<< HEAD
   const textColor = useColorModeValue('gray.800', 'white');
   return (
     <Box as="main">
@@ -47,6 +53,32 @@ const Home = () => {
       <AdBanner mt={{ base: 6, lg: 8 }} mx="auto" display="flex" justifyContent="center"/>
       <Flex mt={ 8 } direction={{ base: 'column', lg: 'row' }} columnGap={ 12 } rowGap={ 8 }>
         { config.features.zkEvmRollup.isEnabled ? <LatestZkEvmL2Batches/> : <LatestBlocks/> }
+=======
+
+  const leftWidget = (() => {
+    if (rollupFeature.isEnabled && !rollupFeature.homepage.showLatestBlocks) {
+      switch (rollupFeature.type) {
+        case 'zkEvm':
+          return <LatestZkEvmL2Batches/>;
+        case 'arbitrum':
+          return <LatestArbitrumL2Batches/>;
+      }
+    }
+
+    return <LatestBlocks/>;
+  })();
+
+  return (
+    <Box as="main">
+      <HeroBanner/>
+      <Flex flexDir={{ base: 'column', lg: 'row' }} columnGap={ 2 } rowGap={ 1 } mt={ 3 } _empty={{ mt: 0 }}>
+        <Stats/>
+        <ChainIndicators/>
+      </Flex>
+      <AdBanner mt={ 6 } mx="auto" display={{ base: 'flex', lg: 'none' }} justifyContent="center"/>
+      <Flex mt={ 8 } direction={{ base: 'column', lg: 'row' }} columnGap={ 12 } rowGap={ 6 }>
+        { leftWidget }
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739
         <Box flexGrow={ 1 }>
           <Transactions/>
         </Box>
diff --git a/ui/pages/L2Deposits.pw.tsx b/ui/pages/L2Deposits.pw.tsx
deleted file mode 100644
index 94c62178b8..0000000000
--- a/ui/pages/L2Deposits.pw.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
-import React from 'react';
-
-import { data as depositsData } from 'mocks/l2deposits/deposits';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
-
-import L2Deposits from './L2Deposits';
-
-const DEPOSITS_API_URL = buildApiUrl('l2_deposits');
-const DEPOSITS_COUNT_API_URL = buildApiUrl('l2_deposits_count');
-
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
-test('base view +@mobile', async({ mount, page }) => {
-  // test on mobile is flaky
-  // my assumption is there is not enough time to calculate hashes truncation so component is unstable
-  // so I raised the test timeout to check if it helps
-  test.slow();
-
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(DEPOSITS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(depositsData),
-  }));
-
-  await page.route(DEPOSITS_COUNT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: '3971111',
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <L2Deposits/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot({ timeout: 10_000 });
-});
diff --git a/ui/pages/L2Deposits.tsx b/ui/pages/L2Deposits.tsx
deleted file mode 100644
index 707511145a..0000000000
--- a/ui/pages/L2Deposits.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Hide, Show, Skeleton } from '@chakra-ui/react';
-import React from 'react';
-
-import useApiQuery from 'lib/api/useApiQuery';
-import { rightLineArrow, nbsp } from 'lib/html-entities';
-import { L2_DEPOSIT_ITEM } from 'stubs/L2';
-import { generateListStub } from 'stubs/utils';
-import DepositsListItem from 'ui/l2Deposits/DepositsListItem';
-import DepositsTable from 'ui/l2Deposits/DepositsTable';
-import DataListDisplay from 'ui/shared/DataListDisplay';
-import PageTitle from 'ui/shared/Page/PageTitle';
-import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
-import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
-
-const L2Deposits = () => {
-  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
-    resourceName: 'l2_deposits',
-    options: {
-      placeholderData: generateListStub<'l2_deposits'>(
-        L2_DEPOSIT_ITEM,
-        50,
-        {
-          next_page_params: {
-            items_count: 50,
-            l1_block_number: 9045200,
-            tx_hash: '',
-          },
-        },
-      ),
-    },
-  });
-
-  const countersQuery = useApiQuery('l2_deposits_count', {
-    queryOptions: {
-      placeholderData: 1927029,
-    },
-  });
-
-  const content = data?.items ? (
-    <>
-      <Show below="lg" ssr={ false }>
-        { data.items.map(((item, index) => (
-          <DepositsListItem
-            key={ item.l2_tx_hash + (isPlaceholderData ? index : '') }
-            isLoading={ isPlaceholderData }
-            item={ item }
-          />
-        ))) }
-      </Show>
-      <Hide below="lg" ssr={ false }>
-        <DepositsTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
-      </Hide>
-    </>
-  ) : null;
-
-  const text = (() => {
-    if (countersQuery.isError) {
-      return null;
-    }
-
-    return (
-      <Skeleton
-        isLoaded={ !countersQuery.isPlaceholderData }
-        display="inline-block"
-      >
-        A total of { countersQuery.data?.toLocaleString() } deposits found
-      </Skeleton>
-    );
-  })();
-
-  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
-
-  return (
-    <>
-      <PageTitle title={ `Deposits (L1${ nbsp }${ rightLineArrow }${ nbsp }L2)` } withTextAd/>
-      <DataListDisplay
-        isError={ isError }
-        items={ data?.items }
-        emptyText="There are no withdrawals."
-        content={ content }
-        actionBar={ actionBar }
-      />
-    </>
-  );
-};
-
-export default L2Deposits;
diff --git a/ui/pages/L2OutputRoots.pw.tsx b/ui/pages/L2OutputRoots.pw.tsx
deleted file mode 100644
index d4f85eec48..0000000000
--- a/ui/pages/L2OutputRoots.pw.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
-import React from 'react';
-
-import { outputRootsData } from 'mocks/l2outputRoots/outputRoots';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
-
-import OutputRoots from './L2OutputRoots';
-
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
-const OUTPUT_ROOTS_API_URL = buildApiUrl('l2_output_roots');
-const OUTPUT_ROOTS_COUNT_API_URL = buildApiUrl('l2_output_roots_count');
-
-test('base view +@mobile', async({ mount, page }) => {
-  // test on mobile is flaky
-  // my assumption is there is not enough time to calculate hashes truncation so component is unstable
-  // so I raised the test timeout to check if it helps
-  test.slow();
-
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(OUTPUT_ROOTS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(outputRootsData),
-  }));
-
-  await page.route(OUTPUT_ROOTS_COUNT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: '9927',
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <OutputRoots/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot({ timeout: 10_000 });
-});
diff --git a/ui/pages/L2OutputRoots.tsx b/ui/pages/L2OutputRoots.tsx
deleted file mode 100644
index c66211c781..0000000000
--- a/ui/pages/L2OutputRoots.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Hide, Show, Skeleton, Text } from '@chakra-ui/react';
-import React from 'react';
-
-import useApiQuery from 'lib/api/useApiQuery';
-import { L2_OUTPUT_ROOTS_ITEM } from 'stubs/L2';
-import { generateListStub } from 'stubs/utils';
-import OutputRootsListItem from 'ui/l2OutputRoots/OutputRootsListItem';
-import OutputRootsTable from 'ui/l2OutputRoots/OutputRootsTable';
-import DataListDisplay from 'ui/shared/DataListDisplay';
-import PageTitle from 'ui/shared/Page/PageTitle';
-import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
-import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
-
-const L2OutputRoots = () => {
-  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
-    resourceName: 'l2_output_roots',
-    options: {
-      placeholderData: generateListStub<'l2_output_roots'>(
-        L2_OUTPUT_ROOTS_ITEM,
-        50,
-        {
-          next_page_params: {
-            items_count: 50,
-            index: 9045200,
-          },
-        },
-      ),
-    },
-  });
-
-  const countersQuery = useApiQuery('l2_output_roots_count', {
-    queryOptions: {
-      placeholderData: 50617,
-    },
-  });
-
-  const content = data?.items ? (
-    <>
-      <Show below="lg" ssr={ false }>
-        { data.items.map(((item, index) => (
-          <OutputRootsListItem
-            key={ item.l2_output_index + (isPlaceholderData ? String(index) : '') }
-            item={ item }
-            isLoading={ isPlaceholderData }
-          />
-        ))) }
-      </Show>
-      <Hide below="lg" ssr={ false }>
-        <OutputRootsTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
-      </Hide>
-    </>
-  ) : null;
-
-  const text = (() => {
-    if (countersQuery.isError || isError || !data?.items.length) {
-      return null;
-    }
-
-    return (
-      <Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap">
-        L2 output index
-        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].l2_output_index } </Text>to
-        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].l2_output_index } </Text>
-        (total of { countersQuery.data?.toLocaleString() } roots)
-      </Skeleton>
-    );
-  })();
-
-  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
-
-  return (
-    <>
-      <PageTitle title="Output roots" withTextAd/>
-      <DataListDisplay
-        isError={ isError }
-        items={ data?.items }
-        emptyText="There are no output roots."
-        content={ content }
-        actionBar={ actionBar }
-      />
-    </>
-  );
-};
-
-export default L2OutputRoots;
diff --git a/ui/pages/L2TxnBatches.pw.tsx b/ui/pages/L2TxnBatches.pw.tsx
deleted file mode 100644
index 4216bb0c3b..0000000000
--- a/ui/pages/L2TxnBatches.pw.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
-import React from 'react';
-
-import { txnBatchesData } from 'mocks/l2txnBatches/txnBatches';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
-
-import L2TxnBatches from './L2TxnBatches';
-
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
-const TXN_BATCHES_API_URL = buildApiUrl('l2_txn_batches');
-const TXN_BATCHES_COUNT_API_URL = buildApiUrl('l2_txn_batches_count');
-
-test('base view +@mobile', async({ mount, page }) => {
-  // test on mobile is flaky
-  // my assumption is there is not enough time to calculate hashes truncation so component is unstable
-  // so I raised the test timeout to check if it helps
-  test.slow();
-
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(TXN_BATCHES_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(txnBatchesData),
-  }));
-
-  await page.route(TXN_BATCHES_COUNT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: '1235016',
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <L2TxnBatches/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot({ timeout: 10_000 });
-});
diff --git a/ui/pages/L2TxnBatches.tsx b/ui/pages/L2TxnBatches.tsx
deleted file mode 100644
index 4afaa838aa..0000000000
--- a/ui/pages/L2TxnBatches.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Hide, Show, Skeleton, Text } from '@chakra-ui/react';
-import React from 'react';
-
-import useApiQuery from 'lib/api/useApiQuery';
-import { nbsp } from 'lib/html-entities';
-import { L2_TXN_BATCHES_ITEM } from 'stubs/L2';
-import { generateListStub } from 'stubs/utils';
-import TxnBatchesListItem from 'ui/l2TxnBatches/TxnBatchesListItem';
-import TxnBatchesTable from 'ui/l2TxnBatches/TxnBatchesTable';
-import DataListDisplay from 'ui/shared/DataListDisplay';
-import PageTitle from 'ui/shared/Page/PageTitle';
-import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
-import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
-
-const L2TxnBatches = () => {
-  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
-    resourceName: 'l2_txn_batches',
-    options: {
-      placeholderData: generateListStub<'l2_txn_batches'>(
-        L2_TXN_BATCHES_ITEM,
-        50,
-        {
-          next_page_params: {
-            items_count: 50,
-            block_number: 9045200,
-          },
-        },
-      ),
-    },
-  });
-
-  const countersQuery = useApiQuery('l2_txn_batches_count', {
-    queryOptions: {
-      placeholderData: 5231746,
-    },
-  });
-
-  const content = data?.items ? (
-    <>
-      <Show below="lg" ssr={ false }>
-        { data.items.map(((item, index) => (
-          <TxnBatchesListItem
-            key={ item.l2_block_number + (isPlaceholderData ? String(index) : '') }
-            item={ item }
-            isLoading={ isPlaceholderData }
-          />
-        ))) }
-      </Show>
-      <Hide below="lg" ssr={ false }><TxnBatchesTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/></Hide>
-    </>
-  ) : null;
-
-  const text = (() => {
-    if (countersQuery.isError || isError || !data?.items.length) {
-      return null;
-    }
-
-    return (
-      <Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap">
-        Tx batch (L2 block)
-        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].l2_block_number } </Text>to
-        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].l2_block_number } </Text>
-        (total of { countersQuery.data?.toLocaleString() } batches)
-      </Skeleton>
-    );
-  })();
-
-  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
-
-  return (
-    <>
-      <PageTitle title={ `Tx batches (L2${ nbsp }blocks)` } withTextAd/>
-      <DataListDisplay
-        isError={ isError }
-        items={ data?.items }
-        emptyText="There are no tx batches."
-        content={ content }
-        actionBar={ actionBar }
-      />
-    </>
-  );
-};
-
-export default L2TxnBatches;
diff --git a/ui/pages/L2Withdrawals.pw.tsx b/ui/pages/L2Withdrawals.pw.tsx
deleted file mode 100644
index 5ea8399a3f..0000000000
--- a/ui/pages/L2Withdrawals.pw.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
-import React from 'react';
-
-import { data as withdrawalsData } from 'mocks/l2withdrawals/withdrawals';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
-
-import L2Withdrawals from './L2Withdrawals';
-
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
-const WITHDRAWALS_API_URL = buildApiUrl('l2_withdrawals');
-const WITHDRAWALS_COUNT_API_URL = buildApiUrl('l2_withdrawals_count');
-
-test('base view +@mobile', async({ mount, page }) => {
-  // test on mobile is flaky
-  // my assumption is there is not enough time to calculate hashes truncation so component is unstable
-  // so I raised the test timeout to check if it helps
-  test.slow();
-
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(WITHDRAWALS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(withdrawalsData),
-  }));
-
-  await page.route(WITHDRAWALS_COUNT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: '397',
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <L2Withdrawals/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot({ timeout: 10_000 });
-});
diff --git a/ui/pages/L2Withdrawals.tsx b/ui/pages/L2Withdrawals.tsx
deleted file mode 100644
index 8d17f7ed25..0000000000
--- a/ui/pages/L2Withdrawals.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Hide, Show, Skeleton } from '@chakra-ui/react';
-import React from 'react';
-
-import useApiQuery from 'lib/api/useApiQuery';
-import { rightLineArrow, nbsp } from 'lib/html-entities';
-import { L2_WITHDRAWAL_ITEM } from 'stubs/L2';
-import { generateListStub } from 'stubs/utils';
-import WithdrawalsListItem from 'ui/l2Withdrawals/WithdrawalsListItem';
-import WithdrawalsTable from 'ui/l2Withdrawals/WithdrawalsTable';
-import DataListDisplay from 'ui/shared/DataListDisplay';
-import PageTitle from 'ui/shared/Page/PageTitle';
-import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
-import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
-
-const L2Withdrawals = () => {
-  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
-    resourceName: 'l2_withdrawals',
-    options: {
-      placeholderData: generateListStub<'l2_withdrawals'>(
-        L2_WITHDRAWAL_ITEM,
-        50,
-        {
-          next_page_params: {
-            items_count: 50,
-            nonce: '',
-          },
-        },
-      ),
-    },
-  });
-
-  const countersQuery = useApiQuery('l2_withdrawals_count', {
-    queryOptions: {
-      placeholderData: 23700,
-    },
-  });
-
-  const content = data?.items ? (
-    <>
-      <Show below="lg" ssr={ false }>{ data.items.map(((item, index) => (
-        <WithdrawalsListItem
-          key={ item.l2_tx_hash + (isPlaceholderData ? index : '') }
-          item={ item }
-          isLoading={ isPlaceholderData }
-        />
-      ))) }</Show>
-      <Hide below="lg" ssr={ false }>
-        <WithdrawalsTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
-      </Hide>
-    </>
-  ) : null;
-
-  const text = (() => {
-    if (countersQuery.isError) {
-      return null;
-    }
-
-    return (
-      <Skeleton
-        isLoaded={ !countersQuery.isPlaceholderData }
-        display="inline-block"
-      >
-        A total of { countersQuery.data?.toLocaleString() } withdrawals found
-      </Skeleton>
-    );
-  })();
-
-  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
-
-  return (
-    <>
-      <PageTitle title={ `Withdrawals (L2${ nbsp }${ rightLineArrow }${ nbsp }L1)` } withTextAd/>
-      <DataListDisplay
-        isError={ isError }
-        items={ data?.items }
-        emptyText="There are no withdrawals."
-        content={ content }
-        actionBar={ actionBar }
-      />
-    </>
-  );
-};
-
-export default L2Withdrawals;
diff --git a/ui/pages/Login.pw.tsx b/ui/pages/Login.pw.tsx
index 5a56a8b55c..8462630141 100644
--- a/ui/pages/Login.pw.tsx
+++ b/ui/pages/Login.pw.tsx
@@ -1,25 +1,14 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import contextWithFeatures from 'playwright/fixtures/contextWithFeatures';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import Login from './Login';
 
-const testWithFeature = base.extend({
-  context: contextWithFeatures([
-    { id: 'test_value', value: 'kitty' },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
-});
-
-testWithFeature('has feature text', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Login/>
-    </TestApp>,
-  );
-
+test.fixme('has feature text', async({ render, mockFeatures }) => {
+  await mockFeatures([
+    [ 'test_value', 'kitty' ],
+  ]);
+  const component = await render(<Login/>);
   const featureText = component.getByText('kitty');
   await expect(featureText).toBeVisible();
 });
diff --git a/ui/pages/Login.tsx b/ui/pages/Login.tsx
index f737bae160..7bc96b70a6 100644
--- a/ui/pages/Login.tsx
+++ b/ui/pages/Login.tsx
@@ -1,5 +1,4 @@
 import { VStack, Textarea, Button, Alert, AlertTitle, AlertDescription, Code, Flex, Box } from '@chakra-ui/react';
-import * as Sentry from '@sentry/react';
 import mixpanel from 'mixpanel-browser';
 import type { ChangeEvent } from 'react';
 import React from 'react';
@@ -9,13 +8,13 @@ import * as cookies from 'lib/cookies';
 import useFeatureValue from 'lib/growthbook/useFeatureValue';
 import useGradualIncrement from 'lib/hooks/useGradualIncrement';
 import useToast from 'lib/hooks/useToast';
+import { useRollbar } from 'lib/rollbar';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
-{ /* will be deleted when we fix login in preview CI stands */ }
 const Login = () => {
+  const rollbar = useRollbar();
   const toast = useToast();
   const [ num, setNum ] = useGradualIncrement(0);
-
   const testFeature = useFeatureValue('test_value', 'fallback');
 
   const [ isFormVisible, setFormVisibility ] = React.useState(false);
@@ -24,12 +23,12 @@ const Login = () => {
   React.useEffect(() => {
     const token = cookies.get(cookies.NAMES.API_TOKEN);
     setFormVisibility(Boolean(!token && config.features.account.isEnabled));
-    // throw new Error('Test error');
+    // throw new Error('Render error');
   }, []);
 
-  const checkSentry = React.useCallback(() => {
-    Sentry.captureException(new Error('Test error'), { tags: { source: 'test' } });
-  }, []);
+  const checkRollbar = React.useCallback(() => {
+    rollbar?.error('Test error', { payload: 'foo' });
+  }, [ rollbar ]);
 
   const checkMixpanel = React.useCallback(() => {
     mixpanel.track('Test event', { my_prop: 'foo bar' });
@@ -68,12 +67,12 @@ const Login = () => {
         <>
           <Alert status="error" flexDirection="column" alignItems="flex-start">
             <AlertTitle fontSize="md">
-                !!! Temporary solution for authentication on localhost !!!
+              !!! Temporary solution for authentication on localhost !!!
             </AlertTitle>
             <AlertDescription mt={ 3 }>
-                    To Sign in go to production instance first, sign in there, copy obtained API token from cookie
+              To Sign in go to production instance first, sign in there, copy obtained API token from cookie
               <Code ml={ 1 }>{ cookies.NAMES.API_TOKEN }</Code> and paste it in the form below. After submitting the form you should be successfully
-                    authenticated in current environment
+              authenticated in current environment
             </AlertDescription>
           </Alert>
           <Textarea value={ token } onChange={ handleTokenChange } placeholder="API token"/>
@@ -81,7 +80,7 @@ const Login = () => {
         </>
       ) }
       <Flex columnGap={ 2 }>
-        <Button colorScheme="red" onClick={ checkSentry }>Check Sentry</Button>
+        <Button colorScheme="red" onClick={ checkRollbar }>Check Rollbar</Button>
         <Button colorScheme="teal" onClick={ checkMixpanel }>Check Mixpanel</Button>
       </Flex>
       <Flex columnGap={ 2 } alignItems="center">
diff --git a/ui/pages/Marketplace.pw.tsx b/ui/pages/Marketplace.pw.tsx
new file mode 100644
index 0000000000..a7d000adf8
--- /dev/null
+++ b/ui/pages/Marketplace.pw.tsx
@@ -0,0 +1,101 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { apps as appsMock } from 'mocks/apps/apps';
+import { ratings as ratingsMock } from 'mocks/apps/ratings';
+import { securityReports as securityReportsMock } from 'mocks/apps/securityReports';
+import { test, expect, devices } from 'playwright/lib';
+
+import Marketplace from './Marketplace';
+
+const MARKETPLACE_CONFIG_URL = 'http://localhost:4000/marketplace-config.json';
+const MARKETPLACE_SECURITY_REPORTS_URL = 'https://localhost:4000/marketplace-security-reports.json';
+
+test.beforeEach(async({ mockConfigResponse, mockEnvs, mockAssetResponse, page }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_MARKETPLACE_ENABLED', 'true' ],
+    [ 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL ],
+    [ 'NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL', MARKETPLACE_SECURITY_REPORTS_URL ],
+    [ 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY', 'test' ],
+    [ 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID', 'test' ],
+  ]);
+  await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL, appsMock);
+  await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL', MARKETPLACE_SECURITY_REPORTS_URL, securityReportsMock);
+  await Promise.all(appsMock.map(app => mockAssetResponse(app.logo, './playwright/mocks/image_s.jpg')));
+  await page.route('https://api.airtable.com/v0/test/apps_ratings?fields%5B%5D=appId&fields%5B%5D=rating&fields%5B%5D=count', (route) => route.fulfill({
+    status: 200,
+    json: ratingsMock,
+  }));
+});
+
+test('base view +@dark-mode', async({ render }) => {
+  const component = await render(<Marketplace/>);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('with featured app +@dark-mode', async({ render, mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_MARKETPLACE_FEATURED_APP', 'hop-exchange' ],
+  ]);
+  const component = await render(<Marketplace/>);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('with banner +@dark-mode', async({ render, mockEnvs, mockConfigResponse }) => {
+  const MARKETPLACE_BANNER_CONTENT_URL = 'https://localhost/marketplace-banner.html';
+  const MARKETPLACE_BANNER_LINK_URL = 'https://example.com';
+
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL', MARKETPLACE_BANNER_CONTENT_URL ],
+    [ 'NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL', MARKETPLACE_BANNER_LINK_URL ],
+  ]);
+  await mockConfigResponse('MARKETPLACE_BANNER_CONTENT_URL', MARKETPLACE_BANNER_CONTENT_URL, './playwright/mocks/page.html', true);
+  const component = await render(<Marketplace/>);
+
+  await expect(component).toHaveScreenshot();
+});
+
+// I had a memory error while running tests in GH actions
+// separate run for mobile tests fixes it
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('base view', async({ render }) => {
+    const component = await render(
+      <Box>
+        { /* Added a fake header because without the ActionBar works incorrectly without it */ }
+        <Box h="100px" backgroundColor="#dbdbdb" p={ 1 }>
+          Header
+        </Box>
+        <Marketplace/>
+      </Box>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('with featured app', async({ render, mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_MARKETPLACE_FEATURED_APP', 'hop-exchange' ],
+    ]);
+    const component = await render(<Marketplace/>);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('with banner', async({ render, mockEnvs, mockConfigResponse }) => {
+    const MARKETPLACE_BANNER_CONTENT_URL = 'https://localhost/marketplace-banner.html';
+    const MARKETPLACE_BANNER_LINK_URL = 'https://example.com';
+
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL', MARKETPLACE_BANNER_CONTENT_URL ],
+      [ 'NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL', MARKETPLACE_BANNER_LINK_URL ],
+    ]);
+    await mockConfigResponse('MARKETPLACE_BANNER_CONTENT_URL', MARKETPLACE_BANNER_CONTENT_URL, './playwright/mocks/page.html', true);
+    const component = await render(<Marketplace/>);
+
+    await expect(component).toHaveScreenshot();
+  });
+});
diff --git a/ui/pages/Marketplace.tsx b/ui/pages/Marketplace.tsx
index 06c40c59e4..f9ee624b36 100644
--- a/ui/pages/Marketplace.tsx
+++ b/ui/pages/Marketplace.tsx
@@ -1,24 +1,51 @@
-import { Box } from '@chakra-ui/react';
+import { MenuButton, MenuItem, MenuList, Flex, IconButton } from '@chakra-ui/react';
 import React from 'react';
+import type { MouseEvent } from 'react';
 
 import { MarketplaceCategory } from 'types/client/marketplace';
 import type { TabItem } from 'ui/shared/Tabs/types';
 
 import config from 'configs/app';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
-import useFeatureValue from 'lib/growthbook/useFeatureValue';
+import useGraphLinks from 'lib/hooks/useGraphLinks';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import Banner from 'ui/marketplace/Banner';
+import ContractListModal from 'ui/marketplace/ContractListModal';
 import MarketplaceAppModal from 'ui/marketplace/MarketplaceAppModal';
-import MarketplaceCategoriesMenu from 'ui/marketplace/MarketplaceCategoriesMenu';
 import MarketplaceDisclaimerModal from 'ui/marketplace/MarketplaceDisclaimerModal';
 import MarketplaceList from 'ui/marketplace/MarketplaceList';
+import { SORT_OPTIONS } from 'ui/marketplace/utils';
+import ActionBar from 'ui/shared/ActionBar';
+import Menu from 'ui/shared/chakra/Menu';
 import FilterInput from 'ui/shared/filters/FilterInput';
 import IconSvg from 'ui/shared/IconSvg';
-import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
+import type { IconName } from 'ui/shared/IconSvg';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import Sort from 'ui/shared/sort/Sort';
 import TabsWithScroll from 'ui/shared/Tabs/TabsWithScroll';
 
 import useMarketplace from '../marketplace/useMarketplace';
 const feature = config.features.marketplace;
 
+const links: Array<{ label: string; href: string; icon: IconName }> = [];
+if (feature.isEnabled) {
+  if (feature.submitFormUrl) {
+    links.push({
+      label: 'Submit app',
+      href: feature.submitFormUrl,
+      icon: 'plus' as IconName,
+    });
+  }
+  if (feature.suggestIdeasFormUrl) {
+    links.push({
+      label: 'Suggest ideas',
+      href: feature.suggestIdeasFormUrl,
+      icon: 'edit' as IconName,
+    });
+  }
+}
+
 const Marketplace = () => {
   const {
     isPlaceholderData,
@@ -30,6 +57,7 @@ const Marketplace = () => {
     filterQuery,
     onSearchInputChange,
     showAppInfo,
+    apps,
     displayedApps,
     selectedAppId,
     clearSelectedAppId,
@@ -40,9 +68,20 @@ const Marketplace = () => {
     showDisclaimer,
     appsTotal,
     isCategoriesPlaceholderData,
+    showContractList,
+    contractListModalType,
+    hasPreviousStep,
+    setSorting,
+    userRatings,
+    rateApp,
+    isRatingSending,
+    isRatingLoading,
+    canRate,
   } = useMarketplace();
 
-  const { value: isExperiment } = useFeatureValue('marketplace_exp', false);
+  const isMobile = useIsMobile();
+
+  const graphLinksQuery = useGraphLinks();
 
   const categoryTabs = React.useMemo(() => {
     const tabs: Array<TabItem> = categories.map(category => ({
@@ -61,78 +100,149 @@ const Marketplace = () => {
 
     tabs.unshift({
       id: MarketplaceCategory.FAVORITES,
-      title: () => <IconSvg name="star_outline" w={ 4 } h={ 4 }/>,
-      count: null,
+      title: () => <IconSvg name="heart_filled" boxSize={ 5 } verticalAlign="middle" mt={ -1 }/>,
+      count: favoriteApps.length,
       component: null,
     });
 
     return tabs;
-  }, [ categories, appsTotal ]);
+  }, [ categories, appsTotal, favoriteApps.length ]);
 
   const selectedCategoryIndex = React.useMemo(() => {
     const index = categoryTabs.findIndex(c => c.id === selectedCategoryId);
     return index === -1 ? 0 : index;
   }, [ categoryTabs, selectedCategoryId ]);
 
+  const selectedApp = displayedApps.find(app => app.id === selectedAppId);
+
   const handleCategoryChange = React.useCallback((index: number) => {
-    onCategoryChange(categoryTabs[index].id);
+    const tabId = categoryTabs[index].id;
+    if (typeof tabId === 'string') {
+      onCategoryChange(tabId);
+    }
   }, [ categoryTabs, onCategoryChange ]);
 
+  const handleAppClick = React.useCallback((event: MouseEvent, id: string) => {
+    const isShown = window.localStorage.getItem('marketplace-disclaimer-shown');
+    if (!isShown) {
+      event.preventDefault();
+      showDisclaimer(id);
+    }
+  }, [ showDisclaimer ]);
+
+  const handleGoBackInContractListModal = React.useCallback(() => {
+    clearSelectedAppId();
+    if (selectedApp) {
+      showAppInfo(selectedApp.id);
+    }
+  }, [ clearSelectedAppId, showAppInfo, selectedApp ]);
+
   throwOnResourceLoadError(isError && error ? { isError, error } : { isError: false, error: null });
 
   if (!feature.isEnabled) {
     return null;
   }
 
-  const selectedApp = displayedApps.find(app => app.id === selectedAppId);
+  const showSort = SORT_OPTIONS.length > 1;
 
   return (
     <>
-      { isExperiment && (
-        <Box marginTop={{ base: 0, lg: 8 }}>
-          { (isCategoriesPlaceholderData) ? (
-            <TabsSkeleton tabs={ categoryTabs }/>
-          ) : (
-            <TabsWithScroll
-              tabs={ categoryTabs }
-              onTabChange={ handleCategoryChange }
-              defaultTabIndex={ selectedCategoryIndex }
-              marginBottom={{ base: 0, lg: -2 }}
+      <PageTitle
+        title="DAppscout"
+        mb={ 2 }
+        contentAfter={ (isMobile && links.length > 1) ? (
+          <Menu>
+            <MenuButton
+              as={ IconButton }
+              size="sm"
+              variant="outline"
+              colorScheme="gray"
+              px="9px"
+              ml="auto"
+              icon={ <IconSvg name="dots" boxSize="18px"/> }
             />
-          ) }
-        </Box>
-      ) }
-      <Box
+            <MenuList minW="max-content">
+              { links.map(({ label, href, icon }) => (
+                <MenuItem key={ label } as="a" href={ href } target="_blank" py={ 2 } px={ 4 }>
+                  <IconSvg name={ icon } boxSize={ 4 } mr={ 2.5 }/>
+                  { label }
+                  <IconSvg name="link_external" boxSize={ 3 } color="icon_link_external" ml={ 2 }/>
+                </MenuItem>
+              )) }
+            </MenuList>
+          </Menu>
+        ) : (
+          <Flex ml="auto">
+            { links.map(({ label, href }) => (
+              <LinkExternal key={ label } href={ href } variant="subtle" fontSize="sm" lineHeight={ 5 } ml={ 2 }>
+                { label }
+              </LinkExternal>
+            )) }
+          </Flex>
+        ) }
+      />
+
+      <Banner
+        apps={ apps }
+        favoriteApps={ favoriteApps }
+        isLoading={ isPlaceholderData }
+        onInfoClick={ showAppInfo }
+        onFavoriteClick={ onFavoriteClick }
+        onAppClick={ handleAppClick }
+      />
+
+      <ActionBar
+        showShadow
         display="flex"
-        flexDirection={{ base: 'column', sm: 'row' }}
+        flexDirection="column"
+        mx={{ base: -3, lg: -12 }}
+        px={{ base: 3, lg: 12 }}
+        pt={{ base: 4, lg: 6 }}
+        pb={{ base: 4, lg: 3 }}
       >
-        { !isExperiment && (
-          <MarketplaceCategoriesMenu
-            categories={ categories.map(c => c.name) }
-            selectedCategoryId={ selectedCategoryId }
-            onSelect={ onCategoryChange }
+        <TabsWithScroll
+          tabs={ categoryTabs }
+          onTabChange={ handleCategoryChange }
+          defaultTabIndex={ selectedCategoryIndex }
+          marginBottom={ -2 }
+          isLoading={ isCategoriesPlaceholderData }
+        />
+
+        <Flex gap={{ base: 2, lg: 3 }}>
+          { showSort && (
+            <Sort
+              name="dapps_sorting"
+              options={ SORT_OPTIONS }
+              onChange={ setSorting }
+              isLoading={ isPlaceholderData }
+            />
+          ) }
+          <FilterInput
+            initialValue={ filterQuery }
+            onChange={ onSearchInputChange }
+            placeholder="Find app by name or keyword..."
             isLoading={ isPlaceholderData }
+            size={ showSort ? 'xs' : 'sm' }
+            w={{ base: '100%', lg: '350px' }}
           />
-        ) }
-
-        <FilterInput
-          initialValue={ filterQuery }
-          onChange={ onSearchInputChange }
-          marginBottom={{ base: '4', lg: '6' }}
-          w="100%"
-          placeholder="Find app"
-          isLoading={ isPlaceholderData }
-        />
-      </Box>
+        </Flex>
+      </ActionBar>
 
       <MarketplaceList
         apps={ displayedApps }
-        onAppClick={ showAppInfo }
+        showAppInfo={ showAppInfo }
         favoriteApps={ favoriteApps }
         onFavoriteClick={ onFavoriteClick }
         isLoading={ isPlaceholderData }
-        showDisclaimer={ showDisclaimer }
         selectedCategoryId={ selectedCategoryId }
+        onAppClick={ handleAppClick }
+        showContractList={ showContractList }
+        userRatings={ userRatings }
+        rateApp={ rateApp }
+        isRatingSending={ isRatingSending }
+        isRatingLoading={ isRatingLoading }
+        canRate={ canRate }
+        graphLinksQuery={ graphLinksQuery }
       />
 
       { (selectedApp && isAppInfoModalOpen) && (
@@ -141,6 +251,13 @@ const Marketplace = () => {
           isFavorite={ favoriteApps.includes(selectedApp.id) }
           onFavoriteClick={ onFavoriteClick }
           data={ selectedApp }
+          showContractList={ showContractList }
+          userRating={ userRatings[selectedApp.id] }
+          rateApp={ rateApp }
+          isRatingSending={ isRatingSending }
+          isRatingLoading={ isRatingLoading }
+          canRate={ canRate }
+          graphLinks={ graphLinksQuery.data?.[selectedApp.id] }
         />
       ) }
 
@@ -151,6 +268,15 @@ const Marketplace = () => {
           appId={ selectedApp.id }
         />
       ) }
+
+      { (selectedApp && contractListModalType) && (
+        <ContractListModal
+          type={ contractListModalType }
+          contracts={ selectedApp?.securityReport?.contractsData }
+          onClose={ clearSelectedAppId }
+          onBack={ hasPreviousStep ? handleGoBackInContractListModal : undefined }
+        />
+      ) }
     </>
   );
 };
diff --git a/ui/pages/MarketplaceApp.pw.tsx b/ui/pages/MarketplaceApp.pw.tsx
new file mode 100644
index 0000000000..3f25bfe66c
--- /dev/null
+++ b/ui/pages/MarketplaceApp.pw.tsx
@@ -0,0 +1,59 @@
+import { Flex } from '@chakra-ui/react';
+import React from 'react';
+import { numberToHex } from 'viem';
+
+import config from 'configs/app';
+import { apps as appsMock } from 'mocks/apps/apps';
+import { ratings as ratingsMock } from 'mocks/apps/ratings';
+import { securityReports as securityReportsMock } from 'mocks/apps/securityReports';
+import type { TestFnArgs } from 'playwright/lib';
+import { test, expect, devices } from 'playwright/lib';
+
+import MarketplaceApp from './MarketplaceApp';
+
+const hooksConfig = {
+  router: {
+    query: { id: appsMock[0].id },
+    isReady: true,
+  },
+};
+
+const MARKETPLACE_CONFIG_URL = 'http://localhost:4000/marketplace-config.json';
+const MARKETPLACE_SECURITY_REPORTS_URL = 'http://localhost:4000/marketplace-security-reports.json';
+
+const testFn = async({ render, mockConfigResponse, mockAssetResponse, mockEnvs, mockRpcResponse, page }: TestFnArgs) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_MARKETPLACE_ENABLED', 'true' ],
+    [ 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL ],
+    [ 'NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL', MARKETPLACE_SECURITY_REPORTS_URL ],
+    [ 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY', 'test' ],
+    [ 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID', 'test' ],
+  ]);
+  await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL, appsMock);
+  await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL', MARKETPLACE_SECURITY_REPORTS_URL, securityReportsMock);
+  await mockAssetResponse(appsMock[0].url, './mocks/apps/app.html');
+  await mockRpcResponse({
+    Method: 'eth_chainId',
+    ReturnType: numberToHex(Number(config.chain.id)),
+  });
+  await page.route('https://api.airtable.com/v0/test/apps_ratings?fields%5B%5D=appId&fields%5B%5D=rating&fields%5B%5D=count', (route) => route.fulfill({
+    status: 200,
+    json: ratingsMock,
+  }));
+
+  const component = await render(
+    <Flex flexDirection="column" mx={{ base: 4, lg: 6 }} h="100vh">
+      <MarketplaceApp/>
+    </Flex>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot();
+};
+
+test('base view +@dark-mode', testFn);
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+  test('base view', testFn);
+});
diff --git a/ui/pages/MarketplaceApp.tsx b/ui/pages/MarketplaceApp.tsx
index 5d5c90d570..78e14ca4e3 100644
--- a/ui/pages/MarketplaceApp.tsx
+++ b/ui/pages/MarketplaceApp.tsx
@@ -1,8 +1,8 @@
-import { Box, Center, useColorMode } from '@chakra-ui/react';
+import { Box, Center, useColorMode, Flex } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import { DappscoutIframeProvider, useDappscoutIframe } from 'dappscout-iframe';
 import { useRouter } from 'next/router';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState, useMemo } from 'react';
 
 import type { MarketplaceAppOverview } from 'types/client/marketplace';
 
@@ -10,16 +10,21 @@ import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
+import useApiFetch from 'lib/api/useApiFetch';
+import { useMarketplaceContext } from 'lib/contexts/marketplace';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
-import useApiFetch from 'lib/hooks/useFetch';
+import useFetch from 'lib/hooks/useFetch';
 import * as metadata from 'lib/metadata';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import ContentLoader from 'ui/shared/ContentLoader';
 
+import MarketplaceAppTopBar from '../marketplace/MarketplaceAppTopBar';
+import useAutoConnectWallet from '../marketplace/useAutoConnectWallet';
 import useMarketplaceWallet from '../marketplace/useMarketplaceWallet';
+import useSecurityReports from '../marketplace/useSecurityReports';
+import { getAppUrl } from '../marketplace/utils';
 
 const feature = config.features.marketplace;
-const configUrl = feature.isEnabled ? feature.configUrl : '';
 
 const IFRAME_SANDBOX_ATTRIBUTE = 'allow-forms allow-orientation-lock ' +
 'allow-pointer-lock allow-popups-to-escape-sandbox ' +
@@ -32,9 +37,10 @@ type Props = {
   address: string | undefined;
   data: MarketplaceAppOverview | undefined;
   isPending: boolean;
+  appUrl?: string;
 };
 
-const MarketplaceAppContent = ({ address, data, isPending }: Props) => {
+const MarketplaceAppContent = ({ address, data, isPending, appUrl }: Props) => {
   const { iframeRef, isReady } = useDappscoutIframe();
 
   const [ iframeKey, setIframeKey ] = useState(0);
@@ -68,7 +74,7 @@ const MarketplaceAppContent = ({ address, data, isPending }: Props) => {
 
   return (
     <Center
-      h="100vh"
+      flexGrow={ 1 }
       mx={{ base: -4, lg: -6 }}
     >
       { (isFrameLoading) && (
@@ -85,7 +91,7 @@ const MarketplaceAppContent = ({ address, data, isPending }: Props) => {
           h="100%"
           w="100%"
           display={ isFrameLoading ? 'none' : 'block' }
-          src={ data.url }
+          src={ appUrl }
           title={ data.title }
           onLoad={ handleIframeLoad }
         />
@@ -95,29 +101,40 @@ const MarketplaceAppContent = ({ address, data, isPending }: Props) => {
 };
 
 const MarketplaceApp = () => {
-  const { address, sendTransaction, signMessage, signTypedData } = useMarketplaceWallet();
-
+  const fetch = useFetch();
   const apiFetch = useApiFetch();
   const router = useRouter();
   const id = getQueryParamString(router.query.id);
+  const { address, sendTransaction, signMessage, signTypedData } = useMarketplaceWallet(id);
+  useAutoConnectWallet();
+
+  const { data: securityReports, isLoading: isSecurityReportsLoading } = useSecurityReports();
 
   const query = useQuery<unknown, ResourceError<unknown>, MarketplaceAppOverview>({
-    queryKey: [ 'marketplace-apps', id ],
+    queryKey: [ 'marketplace-dapps', id ],
     queryFn: async() => {
-      const result = await apiFetch<Array<MarketplaceAppOverview>, unknown>(configUrl, undefined, { resource: 'marketplace-apps' });
-      if (!Array.isArray(result)) {
-        throw result;
-      }
-      const item = result.find((app: MarketplaceAppOverview) => app.id === id);
-      if (!item) {
-        throw { status: 404 };
+      if (!feature.isEnabled) {
+        return null;
+      } else if ('configUrl' in feature) {
+        const result = await fetch<Array<MarketplaceAppOverview>, unknown>(feature.configUrl, undefined, { resource: 'marketplace-dapps' });
+        if (!Array.isArray(result)) {
+          throw result;
+        }
+        const item = result.find((app: MarketplaceAppOverview) => app.id === id);
+        if (!item) {
+          throw { status: 404 };
+        }
+        return item;
+      } else {
+        return apiFetch('marketplace_dapp', { pathParams: { chainId: config.chain.id, dappId: id } });
       }
-
-      return item;
     },
     enabled: feature.isEnabled,
   });
   const { data, isPending } = query;
+  const { setIsAutoConnectDisabled } = useMarketplaceContext();
+
+  const appUrl = useMemo(() => getAppUrl(data?.url, router), [ data?.url, router ]);
 
   useEffect(() => {
     if (data) {
@@ -125,22 +142,31 @@ const MarketplaceApp = () => {
         { pathname: '/apps/[id]', query: { id: data.id } },
         { app_name: data.title },
       );
+      setIsAutoConnectDisabled(!data.internalWallet);
     }
-  }, [ data ]);
+  }, [ data, setIsAutoConnectDisabled ]);
 
   throwOnResourceLoadError(query);
 
   return (
-    <DappscoutIframeProvider
-      address={ address }
-      appUrl={ data?.url }
-      rpcUrl={ config.chain.rpcUrl }
-      sendTransaction={ sendTransaction }
-      signMessage={ signMessage }
-      signTypedData={ signTypedData }
-    >
-      <MarketplaceAppContent address={ address } data={ data } isPending={ isPending }/>
-    </DappscoutIframeProvider>
+    <Flex flexDirection="column" h="100%">
+      <MarketplaceAppTopBar
+        appId={ id }
+        data={ data }
+        isLoading={ isPending || isSecurityReportsLoading }
+        securityReport={ securityReports?.[id] }
+      />
+      <DappscoutIframeProvider
+        address={ address }
+        appUrl={ appUrl }
+        rpcUrl={ config.chain.rpcUrl }
+        sendTransaction={ sendTransaction }
+        signMessage={ signMessage }
+        signTypedData={ signTypedData }
+      >
+        <MarketplaceAppContent address={ address } data={ data } isPending={ isPending } appUrl={ appUrl }/>
+      </DappscoutIframeProvider>
+    </Flex>
   );
 };
 
diff --git a/ui/pages/MudWorlds.pw.tsx b/ui/pages/MudWorlds.pw.tsx
new file mode 100644
index 0000000000..f89ac27ef6
--- /dev/null
+++ b/ui/pages/MudWorlds.pw.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { mudWorlds } from 'mocks/mud/mudWorlds';
+import { test, expect } from 'playwright/lib';
+
+import MudWorlds from './MudWorlds';
+
+test('default view +@mobile', async({ mockTextAd, mockApiResponse, render }) => {
+  await mockTextAd();
+  await mockApiResponse('mud_worlds', mudWorlds);
+  const component = await render(<MudWorlds/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/MudWorlds.tsx b/ui/pages/MudWorlds.tsx
new file mode 100644
index 0000000000..4c77534325
--- /dev/null
+++ b/ui/pages/MudWorlds.tsx
@@ -0,0 +1,68 @@
+import { Hide, Show } from '@chakra-ui/react';
+import React from 'react';
+
+import { MUD_WORLD } from 'stubs/mud';
+import { generateListStub } from 'stubs/utils';
+import MudWorldsListItem from 'ui/mudWorlds/MudWorldsListItem';
+import MudWorldsTable from 'ui/mudWorlds/MudWorldsTable';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+
+const MudWorlds = () => {
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'mud_worlds',
+    options: {
+      placeholderData: generateListStub<'mud_worlds'>(
+        MUD_WORLD,
+        50,
+        {
+          next_page_params: {
+            items_count: 50,
+            world: '1',
+          },
+        },
+      ),
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        { data.items.map(((item, index) => (
+          <MudWorldsListItem
+            key={ item.address.hash + (isPlaceholderData ? String(index) : '') }
+            item={ item }
+            isLoading={ isPlaceholderData }
+          />
+        ))) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <MudWorldsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  const actionBar = pagination.isVisible ? (
+    <ActionBar mt={ -6 }>
+      <Pagination ml="auto" { ...pagination }/>
+    </ActionBar>
+  ) : null;
+
+  return (
+    <>
+      <PageTitle title="MUD worlds" withTextAd/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no MUD worlds."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default MudWorlds;
diff --git a/ui/pages/MyProfile.pw.tsx b/ui/pages/MyProfile.pw.tsx
new file mode 100644
index 0000000000..3609dad0f3
--- /dev/null
+++ b/ui/pages/MyProfile.pw.tsx
@@ -0,0 +1,26 @@
+import type { BrowserContext } from '@playwright/test';
+import React from 'react';
+
+import * as profileMock from 'mocks/user/profile';
+import { contextWithAuth } from 'playwright/fixtures/auth';
+import { test as base, expect } from 'playwright/lib';
+
+import MyProfile from './MyProfile';
+
+const test = base.extend<{ context: BrowserContext }>({
+  context: contextWithAuth,
+});
+
+test('without address', async({ render, mockApiResponse }) => {
+  await mockApiResponse('user_info', profileMock.base);
+  const component = await render(<MyProfile/>);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('without email', async({ render, mockApiResponse }) => {
+  await mockApiResponse('user_info', profileMock.withoutEmail);
+  const component = await render(<MyProfile/>);
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/MyProfile.tsx b/ui/pages/MyProfile.tsx
index 91fe658d80..d403dae1d0 100644
--- a/ui/pages/MyProfile.tsx
+++ b/ui/pages/MyProfile.tsx
@@ -1,54 +1,63 @@
-import { VStack, FormControl, FormLabel, Input } from '@chakra-ui/react';
+import { Flex, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 
-import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
-import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
+import type { Screen } from 'ui/snippets/auth/types';
+
+import config from 'configs/app';
+import MyProfileEmail from 'ui/myProfile/MyProfileEmail';
+import MyProfileWallet from 'ui/myProfile/MyProfileWallet';
+import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import PageTitle from 'ui/shared/Page/PageTitle';
-import UserAvatar from 'ui/shared/UserAvatar';
+import AuthModal from 'ui/snippets/auth/AuthModal';
+import useProfileQuery from 'ui/snippets/auth/useProfileQuery';
+import useRedirectForInvalidAuthToken from 'ui/snippets/auth/useRedirectForInvalidAuthToken';
+
+const MIXPANEL_CONFIG = {
+  wallet_connect: {
+    source: 'Profile' as const,
+  },
+  account_link_info: {
+    source: 'Profile' as const,
+  },
+};
 
 const MyProfile = () => {
-  const { data, isPending, isError } = useFetchProfileInfo();
+  const [ authInitialScreen, setAuthInitialScreen ] = React.useState<Screen>();
+  const authModal = useDisclosure();
+
+  const profileQuery = useProfileQuery();
   useRedirectForInvalidAuthToken();
 
+  const handleAddWalletClick = React.useCallback(() => {
+    setAuthInitialScreen({ type: 'connect_wallet', isAuth: true });
+    authModal.onOpen();
+  }, [ authModal ]);
+
   const content = (() => {
-    if (isPending) {
+    if (profileQuery.isPending) {
       return <ContentLoader/>;
     }
 
-    if (isError) {
+    if (profileQuery.isError) {
       return <DataFetchAlert/>;
     }
 
     return (
-      <VStack maxW="412px" mt={ 8 } gap={ 5 } alignItems="stretch">
-        <UserAvatar size={ 64 }/>
-        <FormControl variant="floating" id="name" isRequired size="lg">
-          <Input
-            required
-            disabled
-            value={ data.name || '' }
-          />
-          <FormLabel>Name</FormLabel>
-        </FormControl>
-        <FormControl variant="floating" id="nickname" isRequired size="lg">
-          <Input
-            required
-            disabled
-            value={ data.nickname || '' }
-          />
-          <FormLabel>Nickname</FormLabel>
-        </FormControl>
-        <FormControl variant="floating" id="email" isRequired size="lg">
-          <Input
-            required
-            disabled
-            value={ data.email }
-          />
-          <FormLabel>Email</FormLabel>
-        </FormControl>
-      </VStack>
+      <>
+        <AccountPageDescription>
+          You can add your email to receive watchlist notifications.
+          Additionally, you can manage your wallet address and email, which can be used for logging into your Blockscout account.
+        </AccountPageDescription>
+        <Flex maxW="480px" mt={ 8 } flexDir="column" rowGap={ 12 }>
+          <MyProfileEmail profileQuery={ profileQuery }/>
+          { config.features.blockchainInteraction.isEnabled &&
+            <MyProfileWallet profileQuery={ profileQuery } onAddWallet={ handleAddWalletClick }/> }
+        </Flex>
+        { authModal.isOpen && authInitialScreen &&
+          <AuthModal initialScreen={ authInitialScreen } onClose={ authModal.onClose } mixpanelConfig={ MIXPANEL_CONFIG }/> }
+      </>
     );
   })();
 
diff --git a/ui/pages/NameDomain.pw.tsx b/ui/pages/NameDomain.pw.tsx
index d91b3297b5..31f46ece55 100644
--- a/ui/pages/NameDomain.pw.tsx
+++ b/ui/pages/NameDomain.pw.tsx
@@ -1,41 +1,21 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import config from 'configs/app';
-import * as textAdMock from 'mocks/ad/textAd';
 import * as ensDomainMock from 'mocks/ens/domain';
 import * as ensDomainEventsMock from 'mocks/ens/events';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import NameDomain from './NameDomain';
 
-const DOMAIN_API_URL = buildApiUrl('domain_info', { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name });
-const DOMAIN_EVENTS_API_URL = buildApiUrl('domain_events', { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name });
-
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
+test('details tab', async({ render, mockTextAd, mockApiResponse, mockAssetResponse }) => {
+  await mockTextAd();
+  await mockApiResponse('domain_info', ensDomainMock.ensDomainA, {
+    pathParams: { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name },
   });
-});
+  await mockAssetResponse(ensDomainMock.ensDomainA.protocol?.icon_url as string, './playwright/mocks/image_s.jpg');
 
-test('details tab', async({ mount, page }) => {
-  await page.route(DOMAIN_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(ensDomainMock.ensDomainA),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <NameDomain/>
-    </TestApp>,
+  const component = await render(
+    <NameDomain/>,
     { hooksConfig: {
       router: {
         query: { name: ensDomainMock.ensDomainA.name },
@@ -43,30 +23,25 @@ test('details tab', async({ mount, page }) => {
       },
     } },
   );
-
   await expect(component).toHaveScreenshot();
 });
 
-test('history tab +@mobile', async({ mount, page }) => {
-  await page.route(DOMAIN_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(ensDomainMock.ensDomainA),
-  }));
-  await page.route(DOMAIN_EVENTS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({
-      items: [
-        ensDomainEventsMock.ensDomainEventA,
-        ensDomainEventsMock.ensDomainEventB,
-      ],
-      totalRecords: 2,
-    }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <NameDomain/>
-    </TestApp>,
+test('history tab +@mobile', async({ render, mockTextAd, mockApiResponse, mockAssetResponse }) => {
+  await mockTextAd();
+  await mockApiResponse('domain_info', ensDomainMock.ensDomainA, {
+    pathParams: { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name },
+  });
+  await mockApiResponse('domain_events', {
+    items: [
+      ensDomainEventsMock.ensDomainEventA,
+      ensDomainEventsMock.ensDomainEventB,
+    ],
+  }, {
+    pathParams: { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name },
+  });
+  await mockAssetResponse(ensDomainMock.ensDomainA.protocol?.icon_url as string, './playwright/mocks/image_s.jpg');
+  const component = await render(
+    <NameDomain/>,
     { hooksConfig: {
       router: {
         query: { name: ensDomainMock.ensDomainA.name, tab: 'history' },
@@ -74,6 +49,5 @@ test('history tab +@mobile', async({ mount, page }) => {
       },
     } },
   );
-
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/pages/NameDomain.tsx b/ui/pages/NameDomain.tsx
index 4491ec7ed7..d1ca3a158e 100644
--- a/ui/pages/NameDomain.tsx
+++ b/ui/pages/NameDomain.tsx
@@ -9,7 +9,6 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
-import useIsMobile from 'lib/hooks/useIsMobile';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { ENS_DOMAIN } from 'stubs/ENS';
 import NameDomainDetails from 'ui/nameDomain/NameDomainDetails';
@@ -18,14 +17,13 @@ import TextAd from 'ui/shared/ad/TextAd';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
 import useTabIndexFromQuery from 'ui/shared/Tabs/useTabIndexFromQuery';
 
 const NameDomain = () => {
-  const isMobile = useIsMobile();
   const router = useRouter();
   const domainName = getQueryParamString(router.query.name);
 
@@ -38,7 +36,7 @@ const NameDomain = () => {
 
   const tabs: Array<RoutedTab> = [
     { id: 'details', title: 'Details', component: <NameDomainDetails query={ infoQuery }/> },
-    { id: 'history', title: 'History', component: <NameDomainHistory/> },
+    { id: 'history', title: 'History', component: <NameDomainHistory domain={ infoQuery.data }/> },
   ];
 
   const tabIndex = useTabIndexFromQuery(tabs);
@@ -48,31 +46,39 @@ const NameDomain = () => {
   const isLoading = infoQuery.isPlaceholderData;
 
   const titleSecondRow = (
-    <Flex columnGap={ 3 } rowGap={ 3 } fontFamily="heading" fontSize="lg" fontWeight={ 500 } alignItems="center" w="100%">
+    <Flex
+      columnGap={ 3 }
+      rowGap={ 3 }
+      fontFamily="heading"
+      fontSize="lg"
+      fontWeight={ 500 }
+      alignItems="center"
+      w="100%"
+      flexWrap={{ base: 'wrap', lg: 'nowrap' }}
+    >
       <EnsEntity
-        name={ domainName }
+        domain={ domainName }
+        protocol={ infoQuery.data?.protocol }
         isLoading={ isLoading }
         noLink
-        maxW={ infoQuery.data?.resolved_address ? '300px' : 'min-content' }
+        maxW={{ lg: infoQuery.data?.resolved_address ? '300px' : 'max-content' }}
       />
       { infoQuery.data?.resolved_address && (
-        <AddressEntity
-          address={ infoQuery.data?.resolved_address }
-          isLoading={ isLoading }
-          truncation={ isMobile ? 'constant' : 'dynamic' }
-          flexShrink={ 0 }
-        />
-      ) }
-      { infoQuery.data?.resolved_address && (
-        <Tooltip label="Lookup for related domain names">
-          <LinkInternal
-            flexShrink={ 0 }
-            display="inline-flex"
-            href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', address: infoQuery.data?.resolved_address?.hash } }) }
-          >
-            <IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
-          </LinkInternal>
-        </Tooltip>
+        <Flex alignItems="center" maxW="100%" columnGap={ 3 }>
+          <AddressEntity
+            address={ infoQuery.data?.resolved_address }
+            isLoading={ isLoading }
+          />
+          <Tooltip label="Lookup for related domain names">
+            <LinkInternal
+              flexShrink={ 0 }
+              display="inline-flex"
+              href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', address: infoQuery.data?.resolved_address?.hash } }) }
+            >
+              <IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
+            </LinkInternal>
+          </Tooltip>
+        </Flex>
       ) }
     </Flex>
   );
diff --git a/ui/pages/NameDomains.pw.tsx b/ui/pages/NameDomains.pw.tsx
index 6a522b6faf..4ee5bbf98c 100644
--- a/ui/pages/NameDomains.pw.tsx
+++ b/ui/pages/NameDomains.pw.tsx
@@ -1,50 +1,45 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import config from 'configs/app';
-import * as textAdMock from 'mocks/ad/textAd';
 import * as ensDomainMock from 'mocks/ens/domain';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import NameDomains from './NameDomains';
 
-const DOMAINS_LOOKUP_API_URL = buildApiUrl('domains_lookup', { chainId: config.chain.id }) + '?only_active=true';
-
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
+test.beforeEach(async({ mockApiResponse, mockAssetResponse, mockTextAd }) => {
+  await mockTextAd();
+  await mockAssetResponse(ensDomainMock.protocolA.icon_url as string, './playwright/mocks/image_s.jpg');
+  await mockAssetResponse(ensDomainMock.protocolB.icon_url as string, './playwright/mocks/image_md.jpg');
+  await mockApiResponse('domains_lookup', {
+    items: [
+      ensDomainMock.ensDomainA,
+      ensDomainMock.ensDomainB,
+      ensDomainMock.ensDomainC,
+      ensDomainMock.ensDomainD,
+    ],
+    next_page_params: {
+      page_token: '<token>',
+      page_size: 50,
+    },
+  }, {
+    pathParams: { chainId: config.chain.id },
+    queryParams: { only_active: true },
+  });
+  await mockApiResponse('domain_protocols', {
+    items: [ ensDomainMock.protocolA, ensDomainMock.protocolB ],
+  }, {
+    pathParams: { chainId: config.chain.id },
   });
 });
 
-test('default view +@mobile', async({ mount, page }) => {
-  await page.route(DOMAINS_LOOKUP_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({
-      items: [
-        ensDomainMock.ensDomainA,
-        ensDomainMock.ensDomainB,
-        ensDomainMock.ensDomainC,
-        ensDomainMock.ensDomainD,
-      ],
-      next_page_params: {
-        token_id: '<token-id>',
-      },
-    }),
-  }));
+test('default view +@mobile', async({ render }) => {
+  const component = await render(<NameDomains/>);
+  await expect(component).toHaveScreenshot();
+});
 
-  const component = await mount(
-    <TestApp>
-      <NameDomains/>
-    </TestApp>,
-  );
+test('filters', async({ render, page }) => {
+  const component = await render(<NameDomains/>);
 
-  await expect(component).toHaveScreenshot();
+  await component.getByRole('button', { name: 'Filter' }).click();
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 500 } });
 });
diff --git a/ui/pages/NameDomains.tsx b/ui/pages/NameDomains.tsx
index 4c52c067d7..ae24b7fc79 100644
--- a/ui/pages/NameDomains.tsx
+++ b/ui/pages/NameDomains.tsx
@@ -5,10 +5,10 @@ import React from 'react';
 import type { EnsDomainLookupFiltersOptions, EnsLookupSorting } from 'types/api/ens';
 
 import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
 import useDebounce from 'lib/hooks/useDebounce';
 import { apos } from 'lib/html-entities';
 import getQueryParamString from 'lib/router/getQueryParamString';
-import { ADDRESS_REGEXP } from 'lib/validations/address';
 import { ENS_DOMAIN } from 'stubs/ENS';
 import { generateListStub } from 'stubs/utils';
 import NameDomainsActionBar from 'ui/nameDomains/NameDomainsActionBar';
@@ -17,6 +17,7 @@ import NameDomainsTable from 'ui/nameDomains/NameDomainsTable';
 import type { Sort, SortField } from 'ui/nameDomains/utils';
 import { SORT_OPTIONS, getNextSortValue } from 'ui/nameDomains/utils';
 import DataListDisplay from 'ui/shared/DataListDisplay';
+import { ADDRESS_REGEXP } from 'ui/shared/forms/validators/address';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import getSortParamsFromValue from 'ui/shared/sort/getSortParamsFromValue';
@@ -29,6 +30,7 @@ const NameDomains = () => {
   const ownedBy = getQueryParamString(router.query.owned_by);
   const resolvedTo = getQueryParamString(router.query.resolved_to);
   const onlyActive = getQueryParamString(router.query.only_active);
+  const protocols = Array.isArray(router.query.protocols) ? router.query.protocols : (router.query.protocols ?? '').split(',').filter(Boolean);
 
   const initialFilters: EnsDomainLookupFiltersOptions = [
     ownedBy === 'true' ? 'owned_by' as const : undefined,
@@ -40,6 +42,7 @@ const NameDomains = () => {
   const [ searchTerm, setSearchTerm ] = React.useState<string>(q || '');
   const [ filterValue, setFilterValue ] = React.useState<EnsDomainLookupFiltersOptions>(initialFilters);
   const [ sort, setSort ] = React.useState<Sort | undefined>(initialSort);
+  const [ protocolsFilter, setProtocolsFilter ] = React.useState<Array<string>>(protocols);
 
   const debouncedSearchTerm = useDebounce(searchTerm, 300);
   const isAddressSearch = React.useMemo(() => ADDRESS_REGEXP.test(debouncedSearchTerm), [ debouncedSearchTerm ]);
@@ -53,11 +56,12 @@ const NameDomains = () => {
       resolved_to: filterValue.includes('resolved_to'),
       owned_by: filterValue.includes('owned_by'),
       only_active: !filterValue.includes('with_inactive'),
+      protocols: protocolsFilter.length > 0 ? protocolsFilter : undefined,
     },
     sorting: sortParams,
     options: {
       enabled: isAddressSearch,
-      placeholderData: generateListStub<'addresses_lookup'>(ENS_DOMAIN, 50, { next_page_params: null }),
+      placeholderData: generateListStub<'addresses_lookup'>(ENS_DOMAIN, 50, { next_page_params: undefined }),
     },
   });
 
@@ -67,14 +71,19 @@ const NameDomains = () => {
     filters: {
       name: debouncedSearchTerm,
       only_active: !filterValue.includes('with_inactive'),
+      protocols: protocolsFilter.length > 0 ? protocolsFilter : undefined,
     },
     sorting: sortParams,
     options: {
       enabled: !isAddressSearch,
-      placeholderData: generateListStub<'domains_lookup'>(ENS_DOMAIN, 50, { next_page_params: null }),
+      placeholderData: generateListStub<'domains_lookup'>(ENS_DOMAIN, 50, { next_page_params: undefined }),
     },
   });
 
+  const protocolsQuery = useApiQuery('domain_protocols', {
+    pathParams: { chainId: config.chain.id },
+  });
+
   const query = isAddressSearch ? addressesLookupQuery : domainsLookupQuery;
   const { data, isError, isPlaceholderData: isLoading, onFilterChange, onSortingChange } = query;
 
@@ -87,12 +96,14 @@ const NameDomains = () => {
         resolved_to: true,
         owned_by: true,
         only_active: !hasInactiveFilter,
+        protocols: protocolsFilter,
       });
     } else {
       setFilterValue([ hasInactiveFilter ? 'with_inactive' as const : undefined ].filter(Boolean));
       onFilterChange<'domains_lookup'>({
         name: debouncedSearchTerm,
         only_active: !hasInactiveFilter,
+        protocols: protocolsFilter,
       });
     }
   // should run only the type of search changes
@@ -123,14 +134,16 @@ const NameDomains = () => {
         resolved_to: filterValue.includes('resolved_to'),
         owned_by: filterValue.includes('owned_by'),
         only_active: !filterValue.includes('with_inactive'),
+        protocols: protocolsFilter,
       });
     } else {
       onFilterChange<'domains_lookup'>({
         name: value,
         only_active: !filterValue.includes('with_inactive'),
+        protocols: protocolsFilter,
       });
     }
-  }, [ onFilterChange, filterValue ]);
+  }, [ onFilterChange, filterValue, protocolsFilter ]);
 
   const handleFilterValueChange = React.useCallback((value: EnsDomainLookupFiltersOptions) => {
     setFilterValue(value);
@@ -142,16 +155,40 @@ const NameDomains = () => {
         resolved_to: value.includes('resolved_to'),
         owned_by: value.includes('owned_by'),
         only_active: !value.includes('with_inactive'),
+        protocols: protocolsFilter,
       });
     } else {
       onFilterChange<'domains_lookup'>({
         name: debouncedSearchTerm,
         only_active: !value.includes('with_inactive'),
+        protocols: protocolsFilter,
+      });
+    }
+  }, [ debouncedSearchTerm, onFilterChange, protocolsFilter ]);
+
+  const handleProtocolsFilterChange = React.useCallback((nextValue: Array<string>) => {
+    setProtocolsFilter(nextValue);
+
+    const isAddressSearch = ADDRESS_REGEXP.test(debouncedSearchTerm);
+    if (isAddressSearch) {
+      onFilterChange<'addresses_lookup'>({
+        address: debouncedSearchTerm,
+        resolved_to: filterValue.includes('resolved_to'),
+        owned_by: filterValue.includes('owned_by'),
+        only_active: !filterValue.includes('with_inactive'),
+        protocols: nextValue,
+      });
+    } else {
+      onFilterChange<'domains_lookup'>({
+        name: debouncedSearchTerm,
+        only_active: !filterValue.includes('with_inactive'),
+        protocols: nextValue,
       });
     }
-  }, [ debouncedSearchTerm, onFilterChange ]);
+  }, [ debouncedSearchTerm, filterValue, onFilterChange ]);
 
-  const hasActiveFilters = Boolean(debouncedSearchTerm) || filterValue.length > 0;
+  const hasActiveFilters = Boolean(debouncedSearchTerm) || filterValue.length > 0 ||
+    (protocolsQuery.data && protocolsQuery.data.items.length > 1 ? protocolsFilter.length > 0 : false);
 
   const content = (
     <>
@@ -184,6 +221,9 @@ const NameDomains = () => {
       onSearchChange={ handleSearchTermChange }
       filterValue={ filterValue }
       onFilterValueChange={ handleFilterValueChange }
+      protocolsData={ protocolsQuery.data?.items }
+      protocolsFilterValue={ protocolsFilter }
+      onProtocolsFilterChange={ handleProtocolsFilterChange }
       sort={ sort }
       onSortChange={ setSort }
       isAddressSearch={ isAddressSearch }
@@ -193,7 +233,10 @@ const NameDomains = () => {
 
   return (
     <>
-      <PageTitle title="Name services lookup" withTextAd/>
+      <PageTitle
+        title={ config.meta.seo.enhancedDataEnabled ? `${ config.chain.name } name domains` : 'Name services lookup' }
+        withTextAd
+      />
       <DataListDisplay
         isError={ isError }
         items={ data?.items }
diff --git a/ui/pages/OptimisticL2Deposits.pw.tsx b/ui/pages/OptimisticL2Deposits.pw.tsx
new file mode 100644
index 0000000000..8095e66b2f
--- /dev/null
+++ b/ui/pages/OptimisticL2Deposits.pw.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { data as depositsData } from 'mocks/optimism/deposits';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import OptimisticL2Deposits from './OptimisticL2Deposits';
+
+test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
+  // test on mobile is flaky
+  // my assumption is there is not enough time to calculate hashes truncation so component is unstable
+  // so I raised the test timeout to check if it helps
+  test.slow();
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  await mockTextAd();
+  await mockApiResponse('optimistic_l2_deposits', depositsData);
+  await mockApiResponse('optimistic_l2_deposits_count', 3971111);
+
+  const component = await render(<OptimisticL2Deposits/>);
+
+  await expect(component).toHaveScreenshot({ timeout: 10_000 });
+});
diff --git a/ui/pages/OptimisticL2Deposits.tsx b/ui/pages/OptimisticL2Deposits.tsx
new file mode 100644
index 0000000000..0ee9c993e3
--- /dev/null
+++ b/ui/pages/OptimisticL2Deposits.tsx
@@ -0,0 +1,88 @@
+import { Hide, Show, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { rightLineArrow, nbsp } from 'lib/html-entities';
+import { L2_DEPOSIT_ITEM } from 'stubs/L2';
+import { generateListStub } from 'stubs/utils';
+import OptimisticDepositsListItem from 'ui/deposits/optimisticL2/OptimisticDepositsListItem';
+import OptimisticDepositsTable from 'ui/deposits/optimisticL2/OptimisticDepositsTable';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+
+const OptimisticL2Deposits = () => {
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'optimistic_l2_deposits',
+    options: {
+      placeholderData: generateListStub<'optimistic_l2_deposits'>(
+        L2_DEPOSIT_ITEM,
+        50,
+        {
+          next_page_params: {
+            items_count: 50,
+            l1_block_number: 9045200,
+            transaction_hash: '',
+          },
+        },
+      ),
+    },
+  });
+
+  const countersQuery = useApiQuery('optimistic_l2_deposits_count', {
+    queryOptions: {
+      placeholderData: 1927029,
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        { data.items.map(((item, index) => (
+          <OptimisticDepositsListItem
+            key={ item.l2_transaction_hash + (isPlaceholderData ? index : '') }
+            isLoading={ isPlaceholderData }
+            item={ item }
+          />
+        ))) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <OptimisticDepositsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (countersQuery.isError) {
+      return null;
+    }
+
+    return (
+      <Skeleton
+        isLoaded={ !countersQuery.isPlaceholderData }
+        display="inline-block"
+      >
+        A total of { countersQuery.data?.toLocaleString() } deposits found
+      </Skeleton>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle title={ `Deposits (L1${ nbsp }${ rightLineArrow }${ nbsp }L2)` } withTextAd/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no deposits."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default OptimisticL2Deposits;
diff --git a/ui/pages/OptimisticL2DisputeGames.pw.tsx b/ui/pages/OptimisticL2DisputeGames.pw.tsx
new file mode 100644
index 0000000000..7426983ccb
--- /dev/null
+++ b/ui/pages/OptimisticL2DisputeGames.pw.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { data as disputeGamesData } from 'mocks/optimism/disputeGames';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import OptimisticL2DisputeGames from './OptimisticL2DisputeGames';
+
+test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
+  test.slow();
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  await mockTextAd();
+  await mockApiResponse('optimistic_l2_dispute_games', disputeGamesData);
+  await mockApiResponse('optimistic_l2_dispute_games_count', 3971111);
+
+  const component = await render(<OptimisticL2DisputeGames/>);
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/OptimisticL2DisputeGames.tsx b/ui/pages/OptimisticL2DisputeGames.tsx
new file mode 100644
index 0000000000..a21f5061e4
--- /dev/null
+++ b/ui/pages/OptimisticL2DisputeGames.tsx
@@ -0,0 +1,86 @@
+import { Hide, Show, Skeleton, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { L2_DISPUTE_GAMES_ITEM } from 'stubs/L2';
+import { generateListStub } from 'stubs/utils';
+import OptimisticL2DisputeGamesListItem from 'ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesListItem';
+import OptimisticL2DisputeGamesTable from 'ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTable';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+
+const OptimisticL2DisputeGames = () => {
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'optimistic_l2_dispute_games',
+    options: {
+      placeholderData: generateListStub<'optimistic_l2_dispute_games'>(
+        L2_DISPUTE_GAMES_ITEM,
+        50,
+        {
+          next_page_params: {
+            items_count: 50,
+            index: 9045200,
+          },
+        },
+      ),
+    },
+  });
+
+  const countersQuery = useApiQuery('optimistic_l2_dispute_games_count', {
+    queryOptions: {
+      placeholderData: 50617,
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        { data.items.map(((item, index) => (
+          <OptimisticL2DisputeGamesListItem
+            key={ item.index + (isPlaceholderData ? String(index) : '') }
+            item={ item }
+            isLoading={ isPlaceholderData }
+          />
+        ))) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <OptimisticL2DisputeGamesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (countersQuery.isError || isError || !data?.items.length) {
+      return null;
+    }
+
+    return (
+      <Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap">
+        Dispute game index
+        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].index } </Text>to
+        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].index } </Text>
+        (total of { countersQuery.data?.toLocaleString() } games)
+      </Skeleton>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle title="Dispute games" withTextAd/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no dispute games."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default OptimisticL2DisputeGames;
diff --git a/ui/pages/OptimisticL2OutputRoots.pw.tsx b/ui/pages/OptimisticL2OutputRoots.pw.tsx
new file mode 100644
index 0000000000..0ee7c23158
--- /dev/null
+++ b/ui/pages/OptimisticL2OutputRoots.pw.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { outputRootsData } from 'mocks/optimism/outputRoots';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import OptimisticL2OutputRoots from './OptimisticL2OutputRoots';
+
+test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
+  // test on mobile is flaky
+  // my assumption is there is not enough time to calculate hashes truncation so component is unstable
+  // so I raised the test timeout to check if it helps
+  test.slow();
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  await mockTextAd();
+  await mockApiResponse('optimistic_l2_output_roots', outputRootsData);
+  await mockApiResponse('optimistic_l2_output_roots_count', 9927);
+  const component = await render(<OptimisticL2OutputRoots/>);
+  await expect(component).toHaveScreenshot({ timeout: 10_000 });
+});
diff --git a/ui/pages/OptimisticL2OutputRoots.tsx b/ui/pages/OptimisticL2OutputRoots.tsx
new file mode 100644
index 0000000000..b68ee7f7d2
--- /dev/null
+++ b/ui/pages/OptimisticL2OutputRoots.tsx
@@ -0,0 +1,86 @@
+import { Hide, Show, Skeleton, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { L2_OUTPUT_ROOTS_ITEM } from 'stubs/L2';
+import { generateListStub } from 'stubs/utils';
+import OptimisticL2OutputRootsListItem from 'ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem';
+import OptimisticL2OutputRootsTable from 'ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTable';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+
+const OptimisticL2OutputRoots = () => {
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'optimistic_l2_output_roots',
+    options: {
+      placeholderData: generateListStub<'optimistic_l2_output_roots'>(
+        L2_OUTPUT_ROOTS_ITEM,
+        50,
+        {
+          next_page_params: {
+            items_count: 50,
+            index: 9045200,
+          },
+        },
+      ),
+    },
+  });
+
+  const countersQuery = useApiQuery('optimistic_l2_output_roots_count', {
+    queryOptions: {
+      placeholderData: 50617,
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        { data.items.map(((item, index) => (
+          <OptimisticL2OutputRootsListItem
+            key={ item.l2_output_index + (isPlaceholderData ? String(index) : '') }
+            item={ item }
+            isLoading={ isPlaceholderData }
+          />
+        ))) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <OptimisticL2OutputRootsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (countersQuery.isError || isError || !data?.items.length) {
+      return null;
+    }
+
+    return (
+      <Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap">
+        L2 output index
+        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].l2_output_index } </Text>to
+        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].l2_output_index } </Text>
+        (total of { countersQuery.data?.toLocaleString() } roots)
+      </Skeleton>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle title="Output roots" withTextAd/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no output roots."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default OptimisticL2OutputRoots;
diff --git a/ui/pages/OptimisticL2TxnBatch.tsx b/ui/pages/OptimisticL2TxnBatch.tsx
new file mode 100644
index 0000000000..0fc369a716
--- /dev/null
+++ b/ui/pages/OptimisticL2TxnBatch.tsx
@@ -0,0 +1,134 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { RoutedTab } from 'ui/shared/Tabs/types';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { useAppContext } from 'lib/contexts/app';
+import throwOnAbsentParamError from 'lib/errors/throwOnAbsentParamError';
+import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { BLOCK } from 'stubs/block';
+import { L2_TXN_BATCH } from 'stubs/L2';
+import { TX } from 'stubs/tx';
+import { generateListStub } from 'stubs/utils';
+import BlocksContent from 'ui/blocks/BlocksContent';
+import TextAd from 'ui/shared/ad/TextAd';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
+import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
+import OptimisticL2TxnBatchDetails from 'ui/txnBatches/optimisticL2/OptimisticL2TxnBatchDetails';
+import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
+
+const TAB_LIST_PROPS = {
+  marginBottom: 0,
+  py: 5,
+  marginTop: -5,
+};
+
+const TABS_HEIGHT = 80;
+
+const OptimisticL2TxnBatch = () => {
+  const router = useRouter();
+  const appProps = useAppContext();
+  const number = getQueryParamString(router.query.number);
+  const tab = getQueryParamString(router.query.tab);
+  const isMobile = useIsMobile();
+
+  const batchQuery = useApiQuery('optimistic_l2_txn_batch', {
+    pathParams: { number },
+    queryOptions: {
+      enabled: Boolean(number),
+      placeholderData: L2_TXN_BATCH,
+    },
+  });
+
+  const batchTxsQuery = useQueryWithPages({
+    resourceName: 'optimistic_l2_txn_batch_txs',
+    pathParams: { number },
+    options: {
+      enabled: Boolean(!batchQuery.isPlaceholderData && batchQuery.data?.internal_id && tab === 'txs'),
+      placeholderData: generateListStub<'optimistic_l2_txn_batch_txs'>(TX, 50, { next_page_params: {
+        block_number: 1338932,
+        index: 1,
+        items_count: 50,
+      } }),
+    },
+  });
+
+  const batchBlocksQuery = useQueryWithPages({
+    resourceName: 'optimistic_l2_txn_batch_blocks',
+    pathParams: { number },
+    options: {
+      enabled: Boolean(!batchQuery.isPlaceholderData && batchQuery.data?.internal_id && tab === 'blocks'),
+      placeholderData: generateListStub<'optimistic_l2_txn_batch_blocks'>(BLOCK, 50, { next_page_params: {
+        batch_number: 1338932,
+        items_count: 50,
+      } }),
+    },
+  });
+
+  throwOnAbsentParamError(number);
+  throwOnResourceLoadError(batchQuery);
+
+  let pagination;
+  if (tab === 'txs') {
+    pagination = batchTxsQuery.pagination;
+  }
+  if (tab === 'blocks') {
+    pagination = batchBlocksQuery.pagination;
+  }
+
+  const hasPagination = !isMobile && pagination?.isVisible;
+
+  const tabs: Array<RoutedTab> = React.useMemo(() => ([
+    { id: 'index', title: 'Details', component: <OptimisticL2TxnBatchDetails query={ batchQuery }/> },
+    {
+      id: 'txs',
+      title: 'Transactions',
+      component: <TxsWithFrontendSorting query={ batchTxsQuery } showSocketInfo={ false } top={ hasPagination ? TABS_HEIGHT : 0 }/>,
+    },
+    {
+      id: 'blocks',
+      title: 'Blocks',
+      component: <BlocksContent type="block" query={ batchBlocksQuery } enableSocket={ false } top={ hasPagination ? TABS_HEIGHT : 0 }/>,
+    },
+  ].filter(Boolean)), [ batchQuery, batchTxsQuery, batchBlocksQuery, hasPagination ]);
+
+  const backLink = React.useMemo(() => {
+    const hasGoBackLink = appProps.referrer && appProps.referrer.endsWith('/batches');
+
+    if (!hasGoBackLink) {
+      return;
+    }
+
+    return {
+      label: 'Back to txn batches list',
+      url: appProps.referrer,
+    };
+  }, [ appProps.referrer ]);
+
+  return (
+    <>
+      <TextAd mb={ 6 }/>
+      <PageTitle
+        title={ `Batch #${ number }` }
+        backLink={ backLink }
+      />
+      { batchQuery.isPlaceholderData ?
+        <TabsSkeleton tabs={ tabs }/> : (
+          <RoutedTabs
+            tabs={ tabs }
+            tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
+            rightSlot={ hasPagination && pagination ? <Pagination { ...(pagination) }/> : null }
+            stickyEnabled={ hasPagination }
+          />
+        ) }
+    </>
+  );
+};
+
+export default OptimisticL2TxnBatch;
diff --git a/ui/pages/OptimisticL2TxnBatches.pw.tsx b/ui/pages/OptimisticL2TxnBatches.pw.tsx
new file mode 100644
index 0000000000..ddf5075269
--- /dev/null
+++ b/ui/pages/OptimisticL2TxnBatches.pw.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { txnBatchesData } from 'mocks/optimism/txnBatches';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import OptimisticL2TxnBatches from './OptimisticL2TxnBatches';
+
+test('base view +@mobile', async({ render, mockTextAd, mockEnvs, mockApiResponse }) => {
+  // test on mobile is flaky
+  // my assumption is there is not enough time to calculate hashes truncation so component is unstable
+  // so I raised the test timeout to check if it helps
+  test.slow();
+  await mockTextAd();
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  await mockApiResponse('optimistic_l2_txn_batches', txnBatchesData);
+  await mockApiResponse('optimistic_l2_txn_batches_count', 1235016);
+  const component = await render(<OptimisticL2TxnBatches/>);
+  await expect(component).toHaveScreenshot({ timeout: 10_000 });
+});
diff --git a/ui/pages/OptimisticL2TxnBatches.tsx b/ui/pages/OptimisticL2TxnBatches.tsx
new file mode 100644
index 0000000000..28820cf487
--- /dev/null
+++ b/ui/pages/OptimisticL2TxnBatches.tsx
@@ -0,0 +1,86 @@
+import { Hide, Show, Skeleton, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { L2_TXN_BATCHES_ITEM } from 'stubs/L2';
+import { generateListStub } from 'stubs/utils';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+import OptimisticL2TxnBatchesListItem from 'ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesListItem';
+import OptimisticL2TxnBatchesTable from 'ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTable';
+
+const OptimisticL2TxnBatches = () => {
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'optimistic_l2_txn_batches',
+    options: {
+      placeholderData: generateListStub<'optimistic_l2_txn_batches'>(
+        L2_TXN_BATCHES_ITEM,
+        50,
+        {
+          next_page_params: {
+            items_count: 50,
+            id: 9045200,
+          },
+        },
+      ),
+    },
+  });
+
+  const countersQuery = useApiQuery('optimistic_l2_txn_batches_count', {
+    queryOptions: {
+      placeholderData: 5231746,
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        { data.items.map(((item, index) => (
+          <OptimisticL2TxnBatchesListItem
+            key={ item.internal_id + (isPlaceholderData ? String(index) : '') }
+            item={ item }
+            isLoading={ isPlaceholderData }
+          />
+        ))) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <OptimisticL2TxnBatchesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (countersQuery.isError || isError || !data?.items.length) {
+      return null;
+    }
+
+    return (
+      <Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap">
+        Txn batch
+        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].internal_id } </Text>to
+        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].internal_id } </Text>
+        (total of { countersQuery.data?.toLocaleString() } batches)
+      </Skeleton>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle title="Txn batches" withTextAd/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no txn batches."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default OptimisticL2TxnBatches;
diff --git a/ui/pages/OptimisticL2Withdrawals.pw.tsx b/ui/pages/OptimisticL2Withdrawals.pw.tsx
new file mode 100644
index 0000000000..e2bfe0a57d
--- /dev/null
+++ b/ui/pages/OptimisticL2Withdrawals.pw.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { data as withdrawalsData } from 'mocks/optimism/withdrawals';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import OptimisticL2Withdrawals from './OptimisticL2Withdrawals';
+
+test('base view +@mobile', async({ render, mockTextAd, mockEnvs, mockApiResponse }) => {
+  // test on mobile is flaky
+  // my assumption is there is not enough time to calculate hashes truncation so component is unstable
+  // so I raised the test timeout to check if it helps
+  test.slow();
+  await mockTextAd();
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  await mockApiResponse('optimistic_l2_withdrawals', withdrawalsData);
+  await mockApiResponse('optimistic_l2_withdrawals_count', 397);
+  const component = await render(<OptimisticL2Withdrawals/>);
+  await expect(component).toHaveScreenshot({ timeout: 10_000 });
+});
diff --git a/ui/pages/OptimisticL2Withdrawals.tsx b/ui/pages/OptimisticL2Withdrawals.tsx
new file mode 100644
index 0000000000..27d2ed56cf
--- /dev/null
+++ b/ui/pages/OptimisticL2Withdrawals.tsx
@@ -0,0 +1,85 @@
+import { Hide, Show, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { rightLineArrow, nbsp } from 'lib/html-entities';
+import { L2_WITHDRAWAL_ITEM } from 'stubs/L2';
+import { generateListStub } from 'stubs/utils';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+import OptimisticL2WithdrawalsListItem from 'ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem';
+import OptimisticL2WithdrawalsTable from 'ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTable';
+
+const OptimisticL2Withdrawals = () => {
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'optimistic_l2_withdrawals',
+    options: {
+      placeholderData: generateListStub<'optimistic_l2_withdrawals'>(
+        L2_WITHDRAWAL_ITEM,
+        50,
+        {
+          next_page_params: {
+            items_count: 50,
+            nonce: '',
+          },
+        },
+      ),
+    },
+  });
+
+  const countersQuery = useApiQuery('optimistic_l2_withdrawals_count', {
+    queryOptions: {
+      placeholderData: 23700,
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>{ data.items.map(((item, index) => (
+        <OptimisticL2WithdrawalsListItem
+          key={ String(item.msg_nonce_version) + item.msg_nonce + (isPlaceholderData ? index : '') }
+          item={ item }
+          isLoading={ isPlaceholderData }
+        />
+      ))) }</Show>
+      <Hide below="lg" ssr={ false }>
+        <OptimisticL2WithdrawalsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (countersQuery.isError) {
+      return null;
+    }
+
+    return (
+      <Skeleton
+        isLoaded={ !countersQuery.isPlaceholderData }
+        display="inline-block"
+      >
+        A total of { countersQuery.data?.toLocaleString() } withdrawals found
+      </Skeleton>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle title={ `Withdrawals (L2${ nbsp }${ rightLineArrow }${ nbsp }L1)` } withTextAd/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no withdrawals."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default OptimisticL2Withdrawals;
diff --git a/ui/pages/Pool.pw.tsx b/ui/pages/Pool.pw.tsx
new file mode 100644
index 0000000000..ea5d553232
--- /dev/null
+++ b/ui/pages/Pool.pw.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import config from 'configs/app';
+import * as addressMock from 'mocks/address/address';
+import * as poolMock from 'mocks/pools/pool';
+import { test, expect } from 'playwright/lib';
+
+import Pool from './Pool';
+
+const addressHash = '0x1234';
+const hooksConfig = {
+  router: {
+    query: { hash: addressHash },
+  },
+};
+
+test('base view +@mobile +@dark-mode', async({ render, mockApiResponse, mockTextAd, mockAssetResponse }) => {
+  await mockTextAd();
+  await mockApiResponse('pool', poolMock.base, { pathParams: { chainId: config.chain.id, hash: addressHash } });
+  await mockApiResponse('address', addressMock.contract, { pathParams: { hash: poolMock.base.contract_address } });
+  await mockAssetResponse(poolMock.base.quote_token_icon_url as string, './playwright/mocks/image_s.jpg');
+  await mockAssetResponse(poolMock.base.base_token_icon_url as string, './playwright/mocks/image_md.jpg');
+  const component = await render(<Pool/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/Pool.tsx b/ui/pages/Pool.tsx
new file mode 100644
index 0000000000..d88877857d
--- /dev/null
+++ b/ui/pages/Pool.tsx
@@ -0,0 +1,137 @@
+import { Tag, Box, Flex, Image, Skeleton } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+import { useAppContext } from 'lib/contexts/app';
+import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import getPoolLinks from 'lib/pools/getPoolLinks';
+import { getPoolTitle } from 'lib/pools/getPoolTitle';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import * as addressStubs from 'stubs/address';
+import { POOL } from 'stubs/pools';
+import PoolInfo from 'ui/pool/PoolInfo';
+import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import * as PoolEntity from 'ui/shared/entities/pool/PoolEntity';
+import InfoButton from 'ui/shared/InfoButton';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import VerifyWith from 'ui/shared/VerifyWith';
+
+const Pool = () => {
+  const router = useRouter();
+  const appProps = useAppContext();
+  const hash = getQueryParamString(router.query.hash);
+
+  const { data, isPlaceholderData, isError, error } = useApiQuery('pool', {
+    pathParams: { hash, chainId: config.chain.id },
+    queryOptions: {
+      placeholderData: POOL,
+      refetchOnMount: false,
+    },
+  });
+
+  const addressQuery = useApiQuery('address', {
+    pathParams: { hash: data?.contract_address },
+    queryOptions: {
+      enabled: Boolean(data?.contract_address),
+      placeholderData: addressStubs.ADDRESS_INFO,
+    },
+  });
+
+  const content = (() => {
+    if (isError) {
+      if (isCustomAppError(error)) {
+        throwOnResourceLoadError({ resource: 'pool', error, isError: true });
+      }
+
+      return <DataFetchAlert/>;
+    }
+
+    if (!data) {
+      return null;
+    }
+
+    return (
+      <PoolInfo
+        data={ data }
+        isPlaceholderData={ isPlaceholderData }
+      />
+    );
+  })();
+
+  const externalLinks = getPoolLinks(data);
+  const hasLinks = externalLinks.length > 0;
+
+  const externalLinksComponents = React.useMemo(() => {
+    return externalLinks
+      .map((link) => {
+        return (
+          <LinkExternal h="34px" key={ link.url } href={ link.url } alignItems="center" display="inline-flex" minW="120px">
+            <Image boxSize={ 5 } mr={ 2 } src={ link.image } alt={ `${ link.title } icon` }/>
+            { link.title }
+          </LinkExternal>
+        );
+      });
+  }, [ externalLinks ]);
+
+  const titleSecondRow = (
+    <Flex alignItems="center" justifyContent="space-between" w="100%">
+      { addressQuery.data ? <AddressEntity address={ addressQuery.data } isLoading={ addressQuery.isPlaceholderData }/> : <Box/> }
+      <Flex gap={ 2 }>
+        <InfoButton>
+          { `This Liquidity Provider (LP) token represents ${ data?.base_token_symbol }/${ data?.quote_token_symbol } pairing.` }
+        </InfoButton>
+        { hasLinks && (
+          <VerifyWith
+            links={ externalLinksComponents }
+            label="Verify with"
+            longText="View in"
+            shortText=""
+          />
+        ) }
+      </Flex>
+    </Flex>
+  );
+
+  const backLink = React.useMemo(() => {
+    const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/pools');
+
+    if (!hasGoBackLink) {
+      return;
+    }
+
+    return {
+      label: 'Back to pools list',
+      url: appProps.referrer,
+    };
+  }, [ appProps.referrer ]);
+
+  const poolTitle = data ? getPoolTitle(data) : '';
+
+  return (
+    <>
+      <PageTitle
+        title={ poolTitle }
+        backLink={ backLink }
+        beforeTitle={ data ? (
+          <PoolEntity.Icon
+            pool={ data }
+            isLoading={ isPlaceholderData }
+            size="lg"
+          />
+        ) : null }
+        contentAfter={ <Skeleton isLoaded={ !isPlaceholderData }><Tag>Pool</Tag></Skeleton> }
+        secondRow={ titleSecondRow }
+        isLoading={ isPlaceholderData }
+        withTextAd
+      />
+      { content }
+    </>
+  );
+};
+
+export default Pool;
diff --git a/ui/pages/Pools.pw.tsx b/ui/pages/Pools.pw.tsx
new file mode 100644
index 0000000000..3af9cc8080
--- /dev/null
+++ b/ui/pages/Pools.pw.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import config from 'configs/app';
+import * as poolMock from 'mocks/pools/pool';
+import { test, expect, devices } from 'playwright/lib';
+
+import Pools from './Pools';
+
+test('base view +@dark-mode', async({ render, mockApiResponse, mockTextAd, mockAssetResponse }) => {
+  await mockTextAd();
+  await mockApiResponse(
+    'pools',
+    { items: [ poolMock.base, poolMock.noIcons, poolMock.base ], next_page_params: null },
+    { pathParams: { chainId: config.chain.id } },
+  );
+  await mockAssetResponse(poolMock.base.quote_token_icon_url as string, './playwright/mocks/image_s.jpg');
+  await mockAssetResponse(poolMock.base.base_token_icon_url as string, './playwright/mocks/image_s.jpg');
+  const component = await render(<Pools/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('base view', async({ render, mockApiResponse, mockTextAd, mockAssetResponse }) => {
+    await mockTextAd();
+    await mockApiResponse(
+      'pools',
+      { items: [ poolMock.base, poolMock.noIcons, poolMock.base ], next_page_params: null },
+      { pathParams: { chainId: config.chain.id } },
+    );
+    await mockAssetResponse(poolMock.base.quote_token_icon_url as string, './playwright/mocks/image_s.jpg');
+    await mockAssetResponse(poolMock.base.base_token_icon_url as string, './playwright/mocks/image_s.jpg');
+    const component = await render(<Pools/>);
+    await expect(component).toHaveScreenshot();
+  });
+});
diff --git a/ui/pages/Pools.tsx b/ui/pages/Pools.tsx
new file mode 100644
index 0000000000..7879092ef6
--- /dev/null
+++ b/ui/pages/Pools.tsx
@@ -0,0 +1,110 @@
+import { Show, Hide, Flex } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import config from 'configs/app';
+import useDebounce from 'lib/hooks/useDebounce';
+import { apos } from 'lib/html-entities';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { POOL } from 'stubs/pools';
+import PoolsListItem from 'ui/pools/PoolsListItem';
+import PoolsTable from 'ui/pools/PoolsTable';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import FilterInput from 'ui/shared/filters/FilterInput';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+
+const Pools = () => {
+  const router = useRouter();
+  const q = getQueryParamString(router.query.query);
+
+  const [ searchTerm, setSearchTerm ] = React.useState<string>(q ?? '');
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+
+  const poolsQuery = useQueryWithPages({
+    resourceName: 'pools',
+    pathParams: { chainId: config.chain.id },
+    filters: { query: debouncedSearchTerm },
+    options: {
+      placeholderData: { items: Array(50).fill(POOL), next_page_params: { page_token: 'a', page_size: 50 } },
+    },
+  });
+
+  const handleSearchTermChange = React.useCallback((value: string) => {
+    poolsQuery.onFilterChange({ query: value });
+    setSearchTerm(value);
+  }, [ poolsQuery ]);
+
+  const content = (
+    <>
+      <Show below="lg" ssr={ false }>
+        { poolsQuery.data?.items.map((item, index) => (
+          <PoolsListItem
+            key={ item.contract_address + (poolsQuery.isPlaceholderData ? index : '') }
+            isLoading={ poolsQuery.isPlaceholderData }
+            item={ item }
+          />
+        )) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <PoolsTable
+          items={ poolsQuery.data?.items ?? [] }
+          top={ poolsQuery.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+          isLoading={ poolsQuery.isPlaceholderData }
+          page={ poolsQuery.pagination.page }
+        />
+      </Hide>
+    </>
+  );
+
+  const filter = (
+    <FilterInput
+      w={{ base: '100%', lg: '360px' }}
+      size="xs"
+      onChange={ handleSearchTermChange }
+      placeholder="Pair, token symbol or token address"
+      initialValue={ searchTerm }
+    />
+  );
+
+  const actionBar = (
+    <>
+      <Flex mb={ 6 } display={{ base: 'flex', lg: 'none' }}>
+        { filter }
+      </Flex>
+      <ActionBar
+        mt={ -6 }
+        display={{ base: poolsQuery.pagination.isVisible ? 'flex' : 'none', lg: 'flex' }}
+      >
+        <Hide below="lg">
+          { filter }
+        </Hide>
+        <Pagination { ...poolsQuery.pagination } ml="auto"/>
+      </ActionBar>
+    </>
+  );
+
+  return (
+    <>
+      <PageTitle
+        title="DEX tracker"
+        withTextAd
+      />
+      <DataListDisplay
+        isError={ poolsQuery.isError }
+        items={ poolsQuery.data?.items }
+        emptyText="There are no pools."
+        content={ content }
+        actionBar={ actionBar }
+        filterProps={{
+          emptyFilteredText: `Couldn${ apos }t find pools that matches your filter query.`,
+          hasActiveFilters: Boolean(debouncedSearchTerm),
+        }}
+      />
+    </>
+  );
+};
+
+export default Pools;
diff --git a/ui/pages/PrivateTags.tsx b/ui/pages/PrivateTags.tsx
index 392ac419ea..7b7138c2a9 100644
--- a/ui/pages/PrivateTags.tsx
+++ b/ui/pages/PrivateTags.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 
 import type { RoutedTab } from 'ui/shared/Tabs/types';
 
-import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
 import PrivateAddressTags from 'ui/privateTags/PrivateAddressTags';
 import PrivateTransactionTags from 'ui/privateTags/PrivateTransactionTags';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
+import useRedirectForInvalidAuthToken from 'ui/snippets/auth/useRedirectForInvalidAuthToken';
 
 const TABS: Array<RoutedTab> = [
   { id: 'address', title: 'Address', component: <PrivateAddressTags/> },
diff --git a/ui/pages/PublicTags.tsx b/ui/pages/PublicTags.tsx
deleted file mode 100644
index fa4ea2609d..0000000000
--- a/ui/pages/PublicTags.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { useRouter } from 'next/router';
-import React, { useCallback, useState } from 'react';
-import { animateScroll } from 'react-scroll';
-
-import type { PublicTag } from 'types/api/account';
-
-import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
-import useToast from 'lib/hooks/useToast';
-import getQueryParamString from 'lib/router/getQueryParamString';
-import PublicTagsData from 'ui/publicTags/PublicTagsData';
-import PublicTagsForm from 'ui/publicTags/PublicTagsForm/PublicTagsForm';
-import PageTitle from 'ui/shared/Page/PageTitle';
-
-type TScreen = 'data' | 'form';
-
-type TToastAction = 'added' | 'removed';
-
-const toastDescriptions = {
-  added: 'Your request sent to moderator. Waiting for...',
-  removed: 'Tags have been removed.',
-} as Record<TToastAction, string>;
-
-const PublicTagsComponent: React.FC = () => {
-  const router = useRouter();
-  const addressHash = getQueryParamString(router.query.address);
-
-  const [ screen, setScreen ] = useState<TScreen>(addressHash ? 'form' : 'data');
-  const [ formData, setFormData ] = useState<Partial<PublicTag> | undefined>(addressHash ? { addresses: [ addressHash ] } : undefined);
-
-  const toast = useToast();
-  useRedirectForInvalidAuthToken();
-
-  React.useEffect(() => {
-    addressHash && router.replace({ pathname: '/account/public-tags-request' });
-  // componentDidMount
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ ]);
-
-  const showToast = useCallback((action: TToastAction) => {
-    toast({
-      position: 'top-right',
-      title: 'Success',
-      description: toastDescriptions[action],
-      colorScheme: 'green',
-      status: 'success',
-      variant: 'subtle',
-      isClosable: true,
-      icon: null,
-    });
-  }, [ toast ]);
-
-  const changeToFormScreen = useCallback((data?: PublicTag) => {
-    setFormData(data);
-    setScreen('form');
-    animateScroll.scrollToTop({
-      duration: 500,
-      delay: 100,
-    });
-  }, []);
-
-  const changeToDataScreen = useCallback((success?: boolean) => {
-    if (success) {
-      showToast('added');
-    }
-    setScreen('data');
-    animateScroll.scrollToTop({
-      duration: 500,
-      delay: 100,
-    });
-  }, [ showToast ]);
-
-  const onTagDelete = useCallback(() => showToast('removed'), [ showToast ]);
-  const onGoBack = useCallback(() => setScreen('data'), [ ]);
-
-  let content;
-  let header;
-
-  if (screen === 'data') {
-    content = <PublicTagsData changeToFormScreen={ changeToFormScreen } onTagDelete={ onTagDelete }/>;
-    header = 'Public tags';
-  } else {
-    content = <PublicTagsForm changeToDataScreen={ changeToDataScreen } data={ formData }/>;
-    header = formData ? 'Request to edit a public tag/label' : 'Request a public tag/label';
-  }
-
-  const backLink = {
-    label: 'Public tags',
-    onClick: onGoBack,
-  };
-
-  return (
-    <>
-      <PageTitle
-        title={ header }
-        backLink={ screen === 'form' ? backLink : undefined }
-        display={{ base: 'block', lg: 'inline-flex' }}
-      />
-      { content }
-    </>
-  );
-};
-
-export default PublicTagsComponent;
diff --git a/ui/pages/PublicTagsSubmit.tsx b/ui/pages/PublicTagsSubmit.tsx
new file mode 100644
index 0000000000..ef995dc0f0
--- /dev/null
+++ b/ui/pages/PublicTagsSubmit.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import type { FormSubmitResult } from 'ui/publicTags/submit/types';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import PublicTagsSubmitForm from 'ui/publicTags/submit/PublicTagsSubmitForm';
+import PublicTagsSubmitResult from 'ui/publicTags/submit/PublicTagsSubmitResult';
+import ContentLoader from 'ui/shared/ContentLoader';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useProfileQuery from 'ui/snippets/auth/useProfileQuery';
+
+type Screen = 'form' | 'result' | 'initializing' | 'error';
+
+const PublicTagsSubmit = () => {
+
+  const [ screen, setScreen ] = React.useState<Screen>('initializing');
+  const [ submitResult, setSubmitResult ] = React.useState<FormSubmitResult>();
+
+  const profileQuery = useProfileQuery();
+  const configQuery = useApiQuery('address_metadata_tag_types', { queryOptions: { enabled: !profileQuery.isLoading } });
+
+  React.useEffect(() => {
+    if (!configQuery.isPending) {
+      setScreen(configQuery.isError ? 'error' : 'form');
+    }
+  }, [ configQuery.isError, configQuery.isPending ]);
+
+  const handleFormSubmitResult = React.useCallback((result: FormSubmitResult) => {
+    setSubmitResult(result);
+    setScreen('result');
+  }, []);
+
+  const content = (() => {
+    switch (screen) {
+      case 'initializing':
+        return <ContentLoader/>;
+      case 'error':
+        return <DataFetchAlert/>;
+      case 'form':
+        return <PublicTagsSubmitForm config={ configQuery.data } onSubmitResult={ handleFormSubmitResult } userInfo={ profileQuery.data }/>;
+      case 'result':
+        return <PublicTagsSubmitResult data={ submitResult }/>;
+      default:
+        return null;
+    }
+  })();
+
+  return (
+    <>
+      <PageTitle title="Request a public tag/label"/>
+      { content }
+    </>
+  );
+};
+
+export default PublicTagsSubmit;
diff --git a/ui/pages/RewardsDashboard.pw.tsx b/ui/pages/RewardsDashboard.pw.tsx
new file mode 100644
index 0000000000..d848bc0655
--- /dev/null
+++ b/ui/pages/RewardsDashboard.pw.tsx
@@ -0,0 +1,40 @@
+import type { BrowserContext } from '@playwright/test';
+import React from 'react';
+
+import * as rewardsBalanceMock from 'mocks/rewards/balance';
+import * as dailyRewardMock from 'mocks/rewards/dailyReward';
+import * as referralsMock from 'mocks/rewards/referrals';
+import * as rewardsConfigMock from 'mocks/rewards/rewardsConfig';
+import * as profileMock from 'mocks/user/profile';
+import { contextWithAuth } from 'playwright/fixtures/auth';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { contextWithRewards } from 'playwright/fixtures/rewards';
+import { test, expect } from 'playwright/lib';
+
+import RewardsDashboard from './RewardsDashboard';
+
+const testWithAuth = test.extend<{ context: BrowserContext }>({
+  context: contextWithAuth,
+}).extend<{ context: BrowserContext }>({
+  context: contextWithRewards,
+});
+
+testWithAuth.beforeEach(async({ mockEnvs, mockApiResponse }) => {
+  await mockEnvs([ ...ENVS_MAP.rewardsService ]);
+  await mockApiResponse('user_info', profileMock.withEmailAndWallet);
+});
+
+testWithAuth('base view +@dark-mode +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('rewards_user_balances', rewardsBalanceMock.base);
+  await mockApiResponse('rewards_user_daily_check', dailyRewardMock.base);
+  await mockApiResponse('rewards_user_referrals', referralsMock.base);
+  await mockApiResponse('rewards_config', rewardsConfigMock.base);
+
+  const component = await render(<RewardsDashboard/>);
+  await expect(component).toHaveScreenshot();
+});
+
+testWithAuth('with error', async({ render }) => {
+  const component = await render(<RewardsDashboard/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/RewardsDashboard.tsx b/ui/pages/RewardsDashboard.tsx
new file mode 100644
index 0000000000..f68103280f
--- /dev/null
+++ b/ui/pages/RewardsDashboard.tsx
@@ -0,0 +1,234 @@
+import { Flex, Skeleton, Image, Alert } from '@chakra-ui/react';
+import React, { useEffect, useState } from 'react';
+
+import config from 'configs/app';
+import { useRewardsContext } from 'lib/contexts/rewards';
+import { apos } from 'lib/html-entities';
+import DailyRewardClaimButton from 'ui/rewards/dashboard/DailyRewardClaimButton';
+import RewardsDashboardCard from 'ui/rewards/dashboard/RewardsDashboardCard';
+import RewardsDashboardCardValue from 'ui/rewards/dashboard/RewardsDashboardCardValue';
+import RewardsReadOnlyInputWithCopy from 'ui/rewards/RewardsReadOnlyInputWithCopy';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useRedirectForInvalidAuthToken from 'ui/snippets/auth/useRedirectForInvalidAuthToken';
+
+const RewardsDashboard = () => {
+  const { balancesQuery, apiToken, referralsQuery, rewardsConfigQuery, dailyRewardQuery, isInitialized } = useRewardsContext();
+
+  const [ isError, setIsError ] = useState(false);
+
+  useRedirectForInvalidAuthToken();
+
+  useEffect(() => {
+    if (!config.features.rewards.isEnabled || (isInitialized && !apiToken)) {
+      window.location.assign('/');
+    }
+  }, [ isInitialized, apiToken ]);
+
+  useEffect(() => {
+    setIsError(balancesQuery.isError || referralsQuery.isError || rewardsConfigQuery.isError || dailyRewardQuery.isError);
+  }, [ balancesQuery.isError, referralsQuery.isError, rewardsConfigQuery.isError, dailyRewardQuery.isError ]);
+
+  if (!config.features.rewards.isEnabled) {
+    return null;
+  }
+
+  let shareText = `Claim your free @blockscoutcom #Merits and start building your daily streak today! #Blockscout #Merits #IYKYK\n\nBoost your rewards instantly by using my referral code: ${ referralsQuery.data?.link }`; // eslint-disable-line max-len
+
+  if (dailyRewardQuery.data?.streak && Number(dailyRewardQuery.data.streak) > 0) {
+    const days = `day${ Number(dailyRewardQuery.data.streak) === 1 ? '' : 's' }`;
+    shareText = `I${ apos }ve claimed Merits ${ dailyRewardQuery.data.streak } ${ days } in a row!\n\n` + shareText;
+  }
+
+  return (
+    <>
+      <PageTitle
+        title="Dashboard"
+        secondRow={ (
+          <span>
+            The Blockscout Merits Program is just getting started! Learn more about the details,
+            features, and future plans in our{ ' ' }
+            <LinkExternal href="https://www.blog.blockscout.com/blockscout-merits-rewarding-block-explorer-skills">
+              blog post
+            </LinkExternal>.
+          </span>
+        ) }
+      />
+      <Flex flexDirection="column" alignItems="flex-start" w="full" gap={ 6 }>
+        { isError && <Alert status="error">Failed to load some data. Please try again later.</Alert> }
+        <Flex gap={ 6 } flexDirection={{ base: 'column', md: 'row' }} w="full">
+          <RewardsDashboardCard
+            title="All Merits"
+            description="Claim your daily Merits and any Merits received from referrals."
+            direction="column-reverse"
+            contentAfter={ <DailyRewardClaimButton/> }
+          >
+            <RewardsDashboardCardValue
+              label="Total balance"
+              value={ balancesQuery.data?.total || 'N/A' }
+              isLoading={ balancesQuery.isPending }
+              withIcon
+              hint={ (
+                <>
+                  Total number of Merits earned from all activities.{ ' ' }
+                  <LinkExternal href="https://docs.blockscout.com/using-blockscout/merits">
+                    More info on Merits
+                  </LinkExternal>
+                </>
+              ) }
+            />
+          </RewardsDashboardCard>
+          <RewardsDashboardCard
+            title="Referrals"
+            description="Total number of users who have joined the program using your code or referral link."
+            direction="column-reverse"
+          >
+            <RewardsDashboardCardValue
+              label="Referrals"
+              value={ referralsQuery.data?.referrals ?
+                `${ referralsQuery.data?.referrals } user${ Number(referralsQuery.data?.referrals) === 1 ? '' : 's' }` :
+                'N/A'
+              }
+              isLoading={ referralsQuery.isPending }
+            />
+          </RewardsDashboardCard>
+          <RewardsDashboardCard
+            title="Streak"
+            description={ (
+              <>
+                Current number of consecutive days you{ apos }ve claimed your daily Merits.{ ' ' }
+                The longer your streak, the more daily Merits you can earn.{ ' ' }
+                <LinkExternal
+                  href={ `https://x.com/intent/tweet?text=${ encodeURIComponent(shareText) }` }
+                  fontWeight="500"
+                >
+                  Share on X
+                </LinkExternal>
+              </>
+            ) }
+            direction="column-reverse"
+          >
+            <RewardsDashboardCardValue
+              label="Streak"
+              value={
+                dailyRewardQuery.data?.streak ?
+                  `${ dailyRewardQuery.data?.streak } day${ Number(dailyRewardQuery.data?.streak) === 1 ? '' : 's' }` :
+                  'N/A'
+              }
+              isLoading={ dailyRewardQuery.isPending }
+              hint={ (
+                <>
+                  See the{ ' ' }
+                  <LinkExternal
+                    href="https://docs.blockscout.com/using-blockscout/merits/streak-number-and-daily-rewards"
+                    isExternal
+                  >
+                    docs
+                  </LinkExternal>{ ' ' }
+                  to learn how your streak number affects daily rewards
+                </>
+              ) }
+            />
+          </RewardsDashboardCard>
+        </Flex>
+        <Flex gap={ 6 } flexDirection={{ base: 'column', md: 'row' }}>
+          <RewardsDashboardCard
+            title="Referral program"
+            description={ (
+              <>
+                Refer friends and boost your Merits! You receive a{ ' ' }
+                <Skeleton as="span" isLoaded={ !rewardsConfigQuery.isPending }>
+                  { rewardsConfigQuery.data?.rewards.referral_share ?
+                    `${ Number(rewardsConfigQuery.data?.rewards.referral_share) * 100 }%` :
+                    'N/A'
+                  }
+                </Skeleton>
+                { ' ' }bonus on all Merits earned by your referrals.
+              </>
+            ) }
+          >
+            <Flex
+              flex={ 1 }
+              gap={{ base: 2, lg: 6 }}
+              px={{ base: 4, lg: 6 }}
+              py={{ base: 4, lg: 0 }}
+              flexDirection={{ base: 'column', lg: 'row' }}
+            >
+              <RewardsReadOnlyInputWithCopy
+                label="Referral link"
+                value={ referralsQuery.data?.link || 'N/A' }
+                isLoading={ referralsQuery.isPending }
+                flex={ 2 }
+              />
+              <RewardsReadOnlyInputWithCopy
+                label="Referral code"
+                value={ referralsQuery.data?.code || 'N/A' }
+                isLoading={ referralsQuery.isPending }
+                flex={ 1 }
+              />
+            </Flex>
+          </RewardsDashboardCard>
+          <RewardsDashboardCard
+            title="Badges"
+            description={ (
+              <Flex flexDir="column" gap={ 2 }>
+                <span>
+                  Collect limited and legendary badges by completing different Blockscout related tasks.
+                  Go to the badges website to see what{ apos }s available and start your collection today.
+                </span>
+              </Flex>
+            ) }
+          >
+            <Flex
+              flex={ 1 }
+              gap={ 4 }
+              pl={ 10 }
+              pr={ 7 }
+              py={{ base: 4, lg: 0 }}
+              flexDirection={{ base: 'column', lg: 'row' }}
+              justifyContent="space-between"
+              alignItems="center"
+            >
+              <Image
+                src="/static/badges.svg"
+                alt="Badges"
+                w="260px"
+                h="86px"
+                fallback={ <Skeleton w="260px" h="86px"/> }
+              />
+              <LinkExternal
+                href="https://merits.blockscout.com/?tab=badges&utm_source=blockscout&utm_medium=dashboard"
+                fontSize="md"
+                fontWeight="500"
+              >
+                View badges
+              </LinkExternal>
+            </Flex>
+          </RewardsDashboardCard>
+        </Flex>
+        <Flex gap={ 6 } flexDirection={{ base: 'column', md: 'row' }}>
+          <RewardsDashboardCard
+            title="Activity"
+            description="Earn Merits for your everyday Blockscout activities. You deserve to be rewarded for choosing open-source public goods!"
+            availableSoon
+            blurFilter
+          >
+            <RewardsDashboardCardValue label="Activity" value="0%"/>
+            <RewardsDashboardCardValue label="Received" value="0" withIcon/>
+          </RewardsDashboardCard>
+          <RewardsDashboardCard
+            title="Verify contracts"
+            description="Verified contracts are so important for transparency and interaction. Verify your contracts on Blockscout and receive Merits for your efforts." // eslint-disable-line max-len
+            availableSoon
+            blurFilter
+          >
+            <RewardsDashboardCardValue label="Activity" value="0%"/>
+            <RewardsDashboardCardValue label="Received" value="0" withIcon/>
+          </RewardsDashboardCard>
+        </Flex>
+      </Flex>
+    </>
+  );
+};
+
+export default RewardsDashboard;
diff --git a/ui/pages/ScrollL2Deposits.pw.tsx b/ui/pages/ScrollL2Deposits.pw.tsx
new file mode 100644
index 0000000000..82f0e00e5d
--- /dev/null
+++ b/ui/pages/ScrollL2Deposits.pw.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import * as messagesMock from 'mocks/scroll/messages';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect, devices } from 'playwright/lib';
+
+import ScrollL2Deposits from './ScrollL2Deposits';
+
+test('base view', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => {
+  await mockTextAd();
+  await mockEnvs(ENVS_MAP.scrollRollup);
+  await mockApiResponse('scroll_l2_deposits', messagesMock.baseResponse);
+  await mockApiResponse('scroll_l2_deposits_count', 3971111);
+
+  const component = await render(<ScrollL2Deposits/>);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('base view', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => {
+    await mockTextAd();
+    await mockEnvs(ENVS_MAP.scrollRollup);
+    await mockApiResponse('scroll_l2_deposits', messagesMock.baseResponse);
+    await mockApiResponse('scroll_l2_deposits_count', 3971111);
+
+    const component = await render(<ScrollL2Deposits/>);
+
+    await expect(component).toHaveScreenshot();
+  });
+});
diff --git a/ui/pages/ScrollL2Deposits.tsx b/ui/pages/ScrollL2Deposits.tsx
new file mode 100644
index 0000000000..8274e8caf9
--- /dev/null
+++ b/ui/pages/ScrollL2Deposits.tsx
@@ -0,0 +1,82 @@
+import { Hide, Show, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { rightLineArrow, nbsp } from 'lib/html-entities';
+import { SCROLL_L2_MESSAGE_ITEM } from 'stubs/scrollL2';
+import { generateListStub } from 'stubs/utils';
+import ScrollL2DepositsListItem from 'ui/deposits/scrollL2/ScrollL2DepositsListItem';
+import ScrollL2DepositsTable from 'ui/deposits/scrollL2/ScrollL2DepositsTable';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+
+const ScrollL2Deposits = () => {
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'scroll_l2_deposits',
+    options: {
+      placeholderData: generateListStub<'scroll_l2_deposits'>(
+        SCROLL_L2_MESSAGE_ITEM,
+        50,
+        { next_page_params: { items_count: 50, id: 1 } },
+      ),
+    },
+  });
+
+  const countersQuery = useApiQuery('scroll_l2_deposits_count', {
+    queryOptions: {
+      placeholderData: 1927029,
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        { data.items.map(((item, index) => (
+          <ScrollL2DepositsListItem
+            key={ String(item.id) + (isPlaceholderData ? index : '') }
+            isLoading={ isPlaceholderData }
+            item={ item }
+          />
+        ))) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <ScrollL2DepositsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (countersQuery.isError) {
+      return null;
+    }
+
+    return (
+      <Skeleton
+        isLoaded={ !countersQuery.isPlaceholderData }
+        display="inline-block"
+      >
+        A total of { countersQuery.data?.toLocaleString() } deposits found
+      </Skeleton>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle title={ `Deposits (L1${ nbsp }${ rightLineArrow }${ nbsp }L2)` } withTextAd/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no deposits."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default ScrollL2Deposits;
diff --git a/ui/pages/ScrollL2TxnBatch.pw.tsx b/ui/pages/ScrollL2TxnBatch.pw.tsx
new file mode 100644
index 0000000000..c8a4f4f524
--- /dev/null
+++ b/ui/pages/ScrollL2TxnBatch.pw.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { batchData } from 'mocks/scroll/txnBatches';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect, devices } from 'playwright/lib';
+
+import ScrollL2TxnBatch from './ScrollL2TxnBatch';
+
+const batchNumber = '5';
+const hooksConfig = {
+  router: {
+    query: { number: batchNumber },
+  },
+};
+
+test.beforeEach(async({ mockTextAd, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.scrollRollup);
+  await mockTextAd();
+});
+
+test('base view', async({ render, mockApiResponse }) => {
+  await mockApiResponse('scroll_l2_txn_batch', batchData, { pathParams: { number: batchNumber } });
+  const component = await render(<ScrollL2TxnBatch/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('base view', async({ render, mockApiResponse }) => {
+    await mockApiResponse('scroll_l2_txn_batch', batchData, { pathParams: { number: batchNumber } });
+    const component = await render(<ScrollL2TxnBatch/>, { hooksConfig });
+    await expect(component).toHaveScreenshot();
+  });
+});
diff --git a/ui/pages/ScrollL2TxnBatch.tsx b/ui/pages/ScrollL2TxnBatch.tsx
new file mode 100644
index 0000000000..3deee8cd94
--- /dev/null
+++ b/ui/pages/ScrollL2TxnBatch.tsx
@@ -0,0 +1,136 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { RoutedTab } from 'ui/shared/Tabs/types';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { useAppContext } from 'lib/contexts/app';
+import throwOnAbsentParamError from 'lib/errors/throwOnAbsentParamError';
+import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { BLOCK } from 'stubs/block';
+import { SCROLL_L2_TXN_BATCH } from 'stubs/scrollL2';
+import { TX } from 'stubs/tx';
+import { generateListStub } from 'stubs/utils';
+import BlocksContent from 'ui/blocks/BlocksContent';
+import TextAd from 'ui/shared/ad/TextAd';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
+import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
+import ScrollL2TxnBatchDetails from 'ui/txnBatches/scrollL2/ScrollL2TxnBatchDetails';
+import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
+
+const TAB_LIST_PROPS = {
+  marginBottom: 0,
+  py: 5,
+  marginTop: -5,
+};
+
+const TABS_HEIGHT = 80;
+
+const ScrollL2TxnBatch = () => {
+  const router = useRouter();
+  const appProps = useAppContext();
+  const number = getQueryParamString(router.query.number);
+  const tab = getQueryParamString(router.query.tab);
+  const isMobile = useIsMobile();
+
+  const batchQuery = useApiQuery('scroll_l2_txn_batch', {
+    pathParams: { number },
+    queryOptions: {
+      enabled: Boolean(number),
+      placeholderData: SCROLL_L2_TXN_BATCH,
+    },
+  });
+
+  const batchTxsQuery = useQueryWithPages({
+    resourceName: 'scroll_l2_txn_batch_txs',
+    pathParams: { number },
+    options: {
+      enabled: Boolean(!batchQuery.isPlaceholderData && batchQuery.data?.number && tab === 'txs'),
+      placeholderData: generateListStub<'scroll_l2_txn_batch_txs'>(TX, 50, { next_page_params: {
+        batch_number: 8122,
+        block_number: 1338932,
+        index: 0,
+        items_count: 50,
+      } }),
+    },
+  });
+
+  const batchBlocksQuery = useQueryWithPages({
+    resourceName: 'scroll_l2_txn_batch_blocks',
+    pathParams: { number },
+    options: {
+      enabled: Boolean(!batchQuery.isPlaceholderData && batchQuery.data?.number && tab === 'blocks'),
+      placeholderData: generateListStub<'scroll_l2_txn_batch_blocks'>(BLOCK, 50, { next_page_params: {
+        batch_number: 8122,
+        block_number: 1338932,
+        items_count: 50,
+      } }),
+    },
+  });
+
+  throwOnAbsentParamError(number);
+  throwOnResourceLoadError(batchQuery);
+
+  let pagination;
+  if (tab === 'txs') {
+    pagination = batchTxsQuery.pagination;
+  }
+  if (tab === 'blocks') {
+    pagination = batchBlocksQuery.pagination;
+  }
+
+  const hasPagination = !isMobile && pagination?.isVisible;
+
+  const tabs: Array<RoutedTab> = React.useMemo(() => ([
+    { id: 'index', title: 'Details', component: <ScrollL2TxnBatchDetails query={ batchQuery }/> },
+    {
+      id: 'txs',
+      title: 'Transactions',
+      component: <TxsWithFrontendSorting query={ batchTxsQuery } showSocketInfo={ false } top={ hasPagination ? TABS_HEIGHT : 0 }/>,
+    },
+    {
+      id: 'blocks',
+      title: 'Blocks',
+      component: <BlocksContent type="block" query={ batchBlocksQuery } enableSocket={ false } top={ hasPagination ? TABS_HEIGHT : 0 }/>,
+    },
+  ].filter(Boolean)), [ batchQuery, batchTxsQuery, batchBlocksQuery, hasPagination ]);
+
+  const backLink = React.useMemo(() => {
+    const hasGoBackLink = appProps.referrer && appProps.referrer.endsWith('/batches');
+
+    if (!hasGoBackLink) {
+      return;
+    }
+
+    return {
+      label: 'Back to txn batches list',
+      url: appProps.referrer,
+    };
+  }, [ appProps.referrer ]);
+
+  return (
+    <>
+      <TextAd mb={ 6 }/>
+      <PageTitle
+        title={ `Txn batch #${ number }` }
+        backLink={ backLink }
+      />
+      { batchQuery.isPlaceholderData ?
+        <TabsSkeleton tabs={ tabs }/> : (
+          <RoutedTabs
+            tabs={ tabs }
+            tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
+            rightSlot={ hasPagination && pagination ? <Pagination { ...(pagination) }/> : null }
+            stickyEnabled={ hasPagination }
+          />
+        ) }
+    </>
+  );
+};
+
+export default ScrollL2TxnBatch;
diff --git a/ui/pages/ScrollL2TxnBatches.pw.tsx b/ui/pages/ScrollL2TxnBatches.pw.tsx
new file mode 100644
index 0000000000..907464d1a9
--- /dev/null
+++ b/ui/pages/ScrollL2TxnBatches.pw.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import * as scrollTxnBatchesMock from 'mocks/scroll/txnBatches';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect, devices } from 'playwright/lib';
+
+import ScrollL2TxnBatches from './ScrollL2TxnBatches';
+
+test('base view', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
+  test.slow();
+  await mockEnvs(ENVS_MAP.scrollRollup);
+  await mockTextAd();
+  await mockApiResponse('scroll_l2_txn_batches', scrollTxnBatchesMock.baseResponse);
+  await mockApiResponse('scroll_l2_txn_batches_count', 9927);
+
+  const component = await render(<ScrollL2TxnBatches/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('base view', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
+    test.slow();
+    await mockEnvs(ENVS_MAP.scrollRollup);
+    await mockTextAd();
+    await mockApiResponse('scroll_l2_txn_batches', scrollTxnBatchesMock.baseResponse);
+    await mockApiResponse('scroll_l2_txn_batches_count', 9927);
+
+    const component = await render(<ScrollL2TxnBatches/>);
+    await expect(component).toHaveScreenshot();
+  });
+});
diff --git a/ui/pages/ScrollL2TxnBatches.tsx b/ui/pages/ScrollL2TxnBatches.tsx
new file mode 100644
index 0000000000..60cf2f4fb8
--- /dev/null
+++ b/ui/pages/ScrollL2TxnBatches.tsx
@@ -0,0 +1,86 @@
+import { Hide, Show, Skeleton, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { SCROLL_L2_TXN_BATCH } from 'stubs/scrollL2';
+import { generateListStub } from 'stubs/utils';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+import ScrollL2TxnBatchesListItem from 'ui/txnBatches/scrollL2/ScrollL2TxnBatchesListItem';
+import ScrollL2TxnBatchesTable from 'ui/txnBatches/scrollL2/ScrollL2TxnBatchesTable';
+
+const ScrollL2TxnBatches = () => {
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'scroll_l2_txn_batches',
+    options: {
+      placeholderData: generateListStub<'scroll_l2_txn_batches'>(
+        SCROLL_L2_TXN_BATCH,
+        50,
+        {
+          next_page_params: {
+            items_count: 50,
+            number: 224,
+          },
+        },
+      ),
+    },
+  });
+
+  const countersQuery = useApiQuery('scroll_l2_txn_batches_count', {
+    queryOptions: {
+      placeholderData: 123456,
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        { data.items.map(((item, index) => (
+          <ScrollL2TxnBatchesListItem
+            key={ item.number + (isPlaceholderData ? String(index) : '') }
+            item={ item }
+            isLoading={ isPlaceholderData }
+          />
+        ))) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <ScrollL2TxnBatchesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (countersQuery.isError || isError || !data?.items.length) {
+      return null;
+    }
+
+    return (
+      <Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap">
+        Txn batch
+        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].number } </Text>to
+        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].number } </Text>
+        (total of { countersQuery.data?.toLocaleString() } batches)
+      </Skeleton>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle title="Txn batches" withTextAd/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no txn batches."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default ScrollL2TxnBatches;
diff --git a/ui/pages/ScrollL2Withdrawals.pw.tsx b/ui/pages/ScrollL2Withdrawals.pw.tsx
new file mode 100644
index 0000000000..9c1c2e5b06
--- /dev/null
+++ b/ui/pages/ScrollL2Withdrawals.pw.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import * as messagesMock from 'mocks/scroll/messages';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect, devices } from 'playwright/lib';
+
+import ScrollL2Withdrawals from './ScrollL2Withdrawals';
+
+test('base view', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => {
+  await mockTextAd();
+  await mockEnvs(ENVS_MAP.scrollRollup);
+  await mockApiResponse('scroll_l2_withdrawals', messagesMock.baseResponse);
+  await mockApiResponse('scroll_l2_withdrawals_count', 3971111);
+
+  const component = await render(<ScrollL2Withdrawals/>);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('base view', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => {
+    await mockTextAd();
+    await mockEnvs(ENVS_MAP.scrollRollup);
+    await mockApiResponse('scroll_l2_withdrawals', messagesMock.baseResponse);
+    await mockApiResponse('scroll_l2_withdrawals_count', 3971111);
+
+    const component = await render(<ScrollL2Withdrawals/>);
+
+    await expect(component).toHaveScreenshot();
+  });
+});
diff --git a/ui/pages/ScrollL2Withdrawals.tsx b/ui/pages/ScrollL2Withdrawals.tsx
new file mode 100644
index 0000000000..abba1ff9d2
--- /dev/null
+++ b/ui/pages/ScrollL2Withdrawals.tsx
@@ -0,0 +1,82 @@
+import { Hide, Show, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { rightLineArrow, nbsp } from 'lib/html-entities';
+import { SCROLL_L2_MESSAGE_ITEM } from 'stubs/scrollL2';
+import { generateListStub } from 'stubs/utils';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+import ScrollL2WithdrawalsListItem from 'ui/withdrawals/scrollL2/ScrollL2WithdrawalsListItem';
+import ScrollL2WithdrawalsTable from 'ui/withdrawals/scrollL2/ScrollL2WithdrawalsTable';
+
+const ScrollL2Withdrawals = () => {
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'scroll_l2_withdrawals',
+    options: {
+      placeholderData: generateListStub<'scroll_l2_withdrawals'>(
+        SCROLL_L2_MESSAGE_ITEM,
+        50,
+        { next_page_params: { items_count: 50, id: 1 } },
+      ),
+    },
+  });
+
+  const countersQuery = useApiQuery('scroll_l2_withdrawals_count', {
+    queryOptions: {
+      placeholderData: 1927029,
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        { data.items.map(((item, index) => (
+          <ScrollL2WithdrawalsListItem
+            key={ String(item.id) + (isPlaceholderData ? index : '') }
+            isLoading={ isPlaceholderData }
+            item={ item }
+          />
+        ))) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <ScrollL2WithdrawalsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (countersQuery.isError) {
+      return null;
+    }
+
+    return (
+      <Skeleton
+        isLoaded={ !countersQuery.isPlaceholderData }
+        display="inline-block"
+      >
+        A total of { countersQuery.data?.toLocaleString() } withdrawals found
+      </Skeleton>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle title={ `Withdrawals (L2${ nbsp }${ rightLineArrow }${ nbsp }L1)` } withTextAd/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no withdrawals."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default ScrollL2Withdrawals;
diff --git a/ui/pages/SearchResults.pw.tsx b/ui/pages/SearchResults.pw.tsx
index f66ed35bf2..f4724a1748 100644
--- a/ui/pages/SearchResults.pw.tsx
+++ b/ui/pages/SearchResults.pw.tsx
@@ -1,243 +1,213 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import { buildExternalAssetFilePath } from 'configs/app/utils';
 import { apps as appsMock } from 'mocks/apps/apps';
 import * as searchMock from 'mocks/search/index';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import * as app from 'playwright/utils/app';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import SearchResults from './SearchResults';
 
-test.describe('search by name ', () => {
-  const extendedTest = test.extend({
-    context: contextWithEnvs([
-      { name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: '' },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ]) as any,
-  });
-
-  extendedTest('+@mobile +@dark-mode', async({ mount, page }) => {
+test.describe('search by name', () => {
+  test('+@mobile +@dark-mode', async({ render, mockApiResponse, mockAssetResponse, mockEnvs }) => {
     const hooksConfig = {
       router: {
         query: { q: 'o' },
       },
     };
-    await page.route(buildApiUrl('search') + '?q=o', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({
-        items: [
-          searchMock.token1,
-          searchMock.token2,
-          searchMock.contract1,
-          searchMock.address2,
-          searchMock.label1,
-        ],
-      }),
-    }));
-    await page.route(searchMock.token1.icon_url as string, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-
-    const component = await mount(
-      <TestApp>
-        <SearchResults/>
-      </TestApp>,
-      { hooksConfig },
-    );
+    const data = {
+      items: [
+        searchMock.token1,
+        searchMock.token2,
+        searchMock.contract1,
+        searchMock.address2,
+        searchMock.label1,
+      ],
+      next_page_params: null,
+    };
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_MARKETPLACE_ENABLED', 'false' ],
+    ]);
+    await mockApiResponse('search', data, { queryParams: { q: 'o' } });
+    await mockAssetResponse(searchMock.token1.icon_url as string, './playwright/mocks/image_s.jpg');
+    const component = await render(<SearchResults/>, { hooksConfig });
 
     await expect(component.locator('main')).toHaveScreenshot();
   });
 });
 
-test('search by address hash +@mobile', async({ mount, page }) => {
+test('search by address hash +@mobile', async({ render, mockApiResponse }) => {
   const hooksConfig = {
     router: {
       query: { q: searchMock.address1.address },
     },
   };
-  await page.route(buildApiUrl('search') + `?q=${ searchMock.address1.address }`, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({
-      items: [
-        searchMock.address1,
-      ],
-    }),
-  }));
+  const data = {
+    items: [ searchMock.address1, searchMock.contract2 ],
+    next_page_params: null,
+  };
+  await mockApiResponse('search', data, { queryParams: { q: searchMock.address1.address } });
 
-  const component = await mount(
-    <TestApp>
-      <SearchResults/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const component = await render(<SearchResults/>, { hooksConfig });
 
   await expect(component.locator('main')).toHaveScreenshot();
 });
 
-test('search by block number +@mobile', async({ mount, page }) => {
+test('search by block number +@mobile', async({ render, mockApiResponse }) => {
   const hooksConfig = {
     router: {
       query: { q: String(searchMock.block1.block_number) },
     },
   };
-  await page.route(buildApiUrl('search') + `?q=${ searchMock.block1.block_number }`, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({
-      items: [
-        searchMock.block1,
-        searchMock.block2,
-        searchMock.block3,
-      ],
-    }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <SearchResults/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const data = {
+    items: [ searchMock.block1, searchMock.block2, searchMock.block3 ],
+    next_page_params: null,
+  };
+  await mockApiResponse('search', data, { queryParams: { q: searchMock.block1.block_number } });
+  const component = await render(<SearchResults/>, { hooksConfig });
 
   await expect(component.locator('main')).toHaveScreenshot();
 });
 
-test('search by block hash +@mobile', async({ mount, page }) => {
+test('search by block hash +@mobile', async({ render, mockApiResponse }) => {
   const hooksConfig = {
     router: {
       query: { q: searchMock.block1.block_hash },
     },
   };
-  await page.route(buildApiUrl('search') + `?q=${ searchMock.block1.block_hash }`, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({
-      items: [
-        searchMock.block1,
-      ],
-    }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <SearchResults/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const data = {
+    items: [ searchMock.block1 ],
+    next_page_params: null,
+  };
+  await mockApiResponse('search', data, { queryParams: { q: searchMock.block1.block_hash } });
+  const component = await render(<SearchResults/>, { hooksConfig });
 
   await expect(component.locator('main')).toHaveScreenshot();
 });
 
-test('search by tx hash +@mobile', async({ mount, page }) => {
+test('search by tx hash +@mobile', async({ render, mockApiResponse }) => {
   const hooksConfig = {
     router: {
-      query: { q: searchMock.tx1.tx_hash },
+      query: { q: searchMock.tx1.transaction_hash },
     },
   };
-  await page.route(buildApiUrl('search') + `?q=${ searchMock.tx1.tx_hash }`, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({
-      items: [
-        searchMock.tx1,
-      ],
-    }),
-  }));
+  const data = {
+    items: [ searchMock.tx1 ],
+    next_page_params: null,
+  };
+  await mockApiResponse('search', data, { queryParams: { q: searchMock.tx1.transaction_hash } });
+  const component = await render(<SearchResults/>, { hooksConfig });
+
+  await expect(component.locator('main')).toHaveScreenshot();
+});
 
-  const component = await mount(
-    <TestApp>
-      <SearchResults/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('search by blob hash +@mobile', async({ render, mockApiResponse, mockEnvs }) => {
+  const hooksConfig = {
+    router: {
+      query: { q: searchMock.blob1.blob_hash },
+    },
+  };
+  const data = {
+    items: [ searchMock.blob1 ],
+    next_page_params: null,
+  };
+  await mockEnvs(ENVS_MAP.dataAvailability);
+  await mockApiResponse('search', data, { queryParams: { q: searchMock.blob1.blob_hash } });
+  const component = await render(<SearchResults/>, { hooksConfig });
 
   await expect(component.locator('main')).toHaveScreenshot();
 });
 
-const testWithUserOps = test.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.userOps) as any,
+test('search by domain name +@mobile', async({ render, mockApiResponse, mockEnvs }) => {
+  const hooksConfig = {
+    router: {
+      query: { q: searchMock.domain1.ens_info.name },
+    },
+  };
+  const data = {
+    items: [ searchMock.domain1 ],
+    next_page_params: null,
+  };
+  await mockEnvs(ENVS_MAP.nameService);
+  await mockApiResponse('search', data, { queryParams: { q: searchMock.domain1.ens_info.name } });
+  const component = await render(<SearchResults/>, { hooksConfig });
+  await expect(component.locator('main')).toHaveScreenshot();
 });
 
-testWithUserOps('search by user op hash +@mobile', async({ mount, page }) => {
+test('search by user op hash +@mobile', async({ render, mockApiResponse, mockEnvs }) => {
   const hooksConfig = {
     router: {
       query: { q: searchMock.userOp1.user_operation_hash },
     },
   };
-  await page.route(buildApiUrl('search') + `?q=${ searchMock.userOp1.user_operation_hash }`, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({
-      items: [
-        searchMock.userOp1,
-      ],
-    }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <SearchResults/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const data = {
+    items: [ searchMock.userOp1 ],
+    next_page_params: null,
+  };
+  await mockEnvs(ENVS_MAP.userOps);
+  await mockApiResponse('search', data, { queryParams: { q: searchMock.userOp1.user_operation_hash } });
+  const component = await render(<SearchResults/>, { hooksConfig });
 
   await expect(component.locator('main')).toHaveScreenshot();
 });
 
 test.describe('with apps', () => {
-  const MARKETPLACE_CONFIG_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', 'https://marketplace-config.json') || '';
-  const extendedTest = test.extend({
-    context: contextWithEnvs([
-      { name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: MARKETPLACE_CONFIG_URL },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ]) as any,
-  });
-
-  extendedTest('default view +@mobile', async({ mount, page }) => {
+  test('default view +@mobile', async({ render, mockApiResponse, mockConfigResponse, mockAssetResponse, mockEnvs }) => {
+    const MARKETPLACE_CONFIG_URL = 'https://localhost:4000/marketplace-config.json';
     const hooksConfig = {
       router: {
         query: { q: 'o' },
       },
     };
-    const API_URL = buildApiUrl('search') + '?q=o';
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({
-        items: [
-          searchMock.token1,
-        ],
-        next_page_params: { foo: 'bar' },
-      }),
-    }));
-
-    await page.route(MARKETPLACE_CONFIG_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(appsMock),
-    }));
-
-    await page.route(appsMock[0].logo, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-    await page.route(appsMock[1].logo as string, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-
-    const component = await mount(
-      <TestApp>
-        <SearchResults/>
-      </TestApp>,
-      { hooksConfig },
+    const data = {
+      items: [ searchMock.token1 ],
+      next_page_params: {
+        address_hash: null,
+        block_hash: null,
+        holder_count: null,
+        inserted_at: null,
+        item_type: 'token' as const,
+        items_count: 1,
+        name: 'foo',
+        q: 'o',
+        transaction_hash: null,
+      },
+    };
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_MARKETPLACE_ENABLED', 'true' ],
+      [ 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL ],
+    ]);
+    await mockApiResponse('search', data, { queryParams: { q: 'o' } });
+    await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL, appsMock);
+    await mockAssetResponse(appsMock[0].logo, './playwright/mocks/image_s.jpg');
+    await mockAssetResponse(appsMock[1].logo, './playwright/mocks/image_s.jpg');
+    const component = await render(<SearchResults/>, { hooksConfig });
+
+    await expect(component.locator('main')).toHaveScreenshot();
+  });
+});
+
+test.describe('block countdown', () => {
+  const blockHeight = '1234567890';
+  const hooksConfig = {
+    router: {
+      query: { q: blockHeight },
+    },
+  };
+
+  test('no results', async({ render, mockApiResponse }) => {
+    await mockApiResponse('search', { items: [], next_page_params: null }, { queryParams: { q: blockHeight } });
+    const component = await render(<SearchResults/>, { hooksConfig });
+
+    await expect(component.locator('main')).toHaveScreenshot();
+  });
+
+  test('with results +@mobile', async({ render, mockApiResponse }) => {
+    await mockApiResponse(
+      'search',
+      { items: [ { ...searchMock.token1, name: '1234567890123456789' } ], next_page_params: null },
+      { queryParams: { q: blockHeight } },
     );
+    const component = await render(<SearchResults/>, { hooksConfig });
 
     await expect(component.locator('main')).toHaveScreenshot();
   });
diff --git a/ui/pages/SearchResults.tsx b/ui/pages/SearchResults.tsx
index 872d20f607..b25b40d827 100644
--- a/ui/pages/SearchResults.tsx
+++ b/ui/pages/SearchResults.tsx
@@ -3,31 +3,41 @@ import { useRouter } from 'next/router';
 import type { FormEvent } from 'react';
 import React from 'react';
 
+import type { SearchResultItem } from 'types/client/search';
+
 import config from 'configs/app';
+import { useSettingsContext } from 'lib/contexts/settings';
+import * as regexp from 'lib/regexp';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import removeQueryParam from 'lib/router/removeQueryParam';
 import useMarketplaceApps from 'ui/marketplace/useMarketplaceApps';
 import SearchResultListItem from 'ui/searchResults/SearchResultListItem';
 import SearchResultsInput from 'ui/searchResults/SearchResultsInput';
 import SearchResultTableItem from 'ui/searchResults/SearchResultTableItem';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
 import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import * as Layout from 'ui/shared/layout/components';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
+import type { SearchResultAppItem } from 'ui/shared/search/utils';
 import Thead from 'ui/shared/TheadSticky';
 import HeaderAlert from 'ui/snippets/header/HeaderAlert';
 import HeaderDesktop from 'ui/snippets/header/HeaderDesktop';
 import HeaderMobile from 'ui/snippets/header/HeaderMobile';
+import SearchBarSuggestBlockCountdown from 'ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlockCountdown';
 import useSearchQuery from 'ui/snippets/searchBar/useSearchQuery';
 
 const SearchResultsPageContent = () => {
   const router = useRouter();
-  const { query, redirectCheckQuery, searchTerm, debouncedSearchTerm, handleSearchTermChange } = useSearchQuery();
+  const withRedirectCheck = getQueryParamString(router.query.redirect) === 'true';
+  const { query, redirectCheckQuery, searchTerm, debouncedSearchTerm, handleSearchTermChange } = useSearchQuery(withRedirectCheck);
   const { data, isError, isPlaceholderData, pagination } = query;
-  const [ showContent, setShowContent ] = React.useState(false);
+  const [ showContent, setShowContent ] = React.useState(!withRedirectCheck);
 
   const marketplaceApps = useMarketplaceApps(debouncedSearchTerm);
+  const settingsContext = useSettingsContext();
 
   React.useEffect(() => {
     if (showContent) {
@@ -58,57 +68,91 @@ const SearchResultsPageContent = () => {
             router.replace({ pathname: '/op/[hash]', query: { hash: redirectCheckQuery.data.parameter } });
             return;
           }
+          break;
+        }
+        case 'blob': {
+          if (config.features.dataAvailability.isEnabled) {
+            router.replace({ pathname: '/blobs/[hash]', query: { hash: redirectCheckQuery.data.parameter } });
+            return;
+          }
+          break;
         }
       }
     }
 
-    !redirectCheckQuery.isPending && setShowContent(true);
+    if (!redirectCheckQuery.isPending) {
+      setShowContent(true);
+      removeQueryParam(router, 'redirect');
+    }
   }, [ redirectCheckQuery, router, debouncedSearchTerm, showContent ]);
 
   const handleSubmit = React.useCallback((event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
   }, [ ]);
 
-  const displayedItems = (data?.items || []).filter((item) => {
-    if (!config.features.userOps.isEnabled && item.type === 'user_operation') {
-      return false;
-    }
-    return true;
-  });
+  const isLoading = marketplaceApps.isPlaceholderData || isPlaceholderData;
+
+  const displayedItems: Array<SearchResultItem | SearchResultAppItem> = React.useMemo(() => {
+    const apiData = (data?.items || []).filter((item) => {
+      if (!config.features.userOps.isEnabled && item.type === 'user_operation') {
+        return false;
+      }
+      if (!config.features.dataAvailability.isEnabled && item.type === 'blob') {
+        return false;
+      }
+      if (!config.features.nameService.isEnabled && item.type === 'ens_domain') {
+        return false;
+      }
+      return true;
+    });
+
+    const futureBlockItem = !isPlaceholderData &&
+      pagination.page === 1 &&
+      !data?.next_page_params &&
+      apiData.length > 0 &&
+      !apiData.some(({ type }) => type === 'block') &&
+      regexp.BLOCK_HEIGHT.test(debouncedSearchTerm) ?
+      {
+        type: 'block' as const,
+        block_type: 'block' as const,
+        block_number: debouncedSearchTerm,
+        block_hash: '',
+        timestamp: undefined,
+      } : undefined;
+
+    return [
+      ...(pagination.page === 1 && !isLoading ? marketplaceApps.displayedApps.map((item) => ({ type: 'app' as const, app: item })) : []),
+      futureBlockItem,
+      ...apiData,
+    ].filter(Boolean);
+
+  }, [ data?.items, data?.next_page_params, isPlaceholderData, pagination.page, debouncedSearchTerm, marketplaceApps.displayedApps, isLoading ]);
 
   const content = (() => {
     if (isError) {
       return <DataFetchAlert/>;
     }
 
-    const hasData = displayedItems.length || (pagination.page === 1 && marketplaceApps.displayedApps.length);
-
-    if (!hasData) {
+    if (!displayedItems.length) {
       return null;
     }
 
     return (
       <>
         <Show below="lg" ssr={ false }>
-          { pagination.page === 1 && marketplaceApps.displayedApps.map((item, index) => (
-            <SearchResultListItem
-              key={ 'actual_' + index }
-              data={{ type: 'app', app: item }}
-              searchTerm={ debouncedSearchTerm }
-            />
-          )) }
           { displayedItems.map((item, index) => (
             <SearchResultListItem
-              key={ (isPlaceholderData ? 'placeholder_' : 'actual_') + index }
+              key={ (isLoading ? 'placeholder_' : 'actual_') + index }
               data={ item }
               searchTerm={ debouncedSearchTerm }
-              isLoading={ isPlaceholderData }
+              isLoading={ isLoading }
+              addressFormat={ settingsContext?.addressFormat }
             />
           )) }
         </Show>
         <Hide below="lg" ssr={ false }>
-          <Table variant="simple" size="md" fontWeight={ 500 }>
-            <Thead top={ pagination.isVisible ? 80 : 0 }>
+          <Table fontWeight={ 500 }>
+            <Thead top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }>
               <Tr>
                 <Th width="30%">Search result</Th>
                 <Th width="35%"/>
@@ -117,19 +161,13 @@ const SearchResultsPageContent = () => {
               </Tr>
             </Thead>
             <Tbody>
-              { pagination.page === 1 && marketplaceApps.displayedApps.map((item, index) => (
-                <SearchResultTableItem
-                  key={ 'actual_' + index }
-                  data={{ type: 'app', app: item }}
-                  searchTerm={ debouncedSearchTerm }
-                />
-              )) }
               { displayedItems.map((item, index) => (
                 <SearchResultTableItem
-                  key={ (isPlaceholderData ? 'placeholder_' : 'actual_') + index }
+                  key={ (isLoading ? 'placeholder_' : 'actual_') + index }
                   data={ item }
                   searchTerm={ debouncedSearchTerm }
-                  isLoading={ isPlaceholderData }
+                  isLoading={ isLoading }
+                  addressFormat={ settingsContext?.addressFormat }
                 />
               )) }
             </Tbody>
@@ -144,20 +182,24 @@ const SearchResultsPageContent = () => {
       return null;
     }
 
-    const resultsCount = pagination.page === 1 && !data?.next_page_params ? (displayedItems.length || 0) + marketplaceApps.displayedApps.length : '50+';
+    const resultsCount = pagination.page === 1 && !data?.next_page_params ? displayedItems.length : '50+';
 
-    const text = isPlaceholderData && pagination.page === 1 ? (
+    const text = isLoading && pagination.page === 1 ? (
       <Skeleton h={ 6 } w="280px" borderRadius="full" mb={ pagination.isVisible ? 0 : 6 }/>
     ) : (
       (
-        <Box mb={ pagination.isVisible ? 0 : 6 } lineHeight="32px">
-          <span>Found </span>
-          <chakra.span fontWeight={ 700 }>
-            { resultsCount }
-          </chakra.span>
-          <span> matching result{ (((displayedItems.length || 0) + marketplaceApps.displayedApps.length) > 1) || pagination.page > 1 ? 's' : '' } for </span>
-          “<chakra.span fontWeight={ 700 }>{ debouncedSearchTerm }</chakra.span>”
-        </Box>
+        <>
+          <Box mb={ pagination.isVisible ? 0 : 6 } lineHeight="32px">
+            <span>Found </span>
+            <chakra.span fontWeight={ 700 }>
+              { resultsCount }
+            </chakra.span>
+            <span> matching result{ (((displayedItems.length || 0) + marketplaceApps.displayedApps.length) > 1) || pagination.page > 1 ? 's' : '' } for </span>
+            “<chakra.span fontWeight={ 700 }>{ debouncedSearchTerm }</chakra.span>”
+          </Box>
+          { resultsCount === 0 && regexp.BLOCK_HEIGHT.test(debouncedSearchTerm) &&
+            <SearchBarSuggestBlockCountdown blockHeight={ debouncedSearchTerm } mt={ -4 }/> }
+        </>
       )
     );
 
@@ -203,7 +245,7 @@ const SearchResultsPageContent = () => {
           <HeaderAlert/>
           <HeaderDesktop renderSearchBar={ renderSearchBar }/>
           <AppErrorBoundary>
-            <Layout.Content>
+            <Layout.Content flexGrow={ 0 }>
               { pageContent }
             </Layout.Content>
           </AppErrorBoundary>
diff --git a/ui/pages/ShibariumDeposits.pw.tsx b/ui/pages/ShibariumDeposits.pw.tsx
new file mode 100644
index 0000000000..a52dfb557e
--- /dev/null
+++ b/ui/pages/ShibariumDeposits.pw.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { data as depositsData } from 'mocks/shibarium/deposits';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import ShibariumDeposits from './ShibariumDeposits';
+
+test('base view +@mobile', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => {
+  await mockTextAd();
+  await mockEnvs(ENVS_MAP.shibariumRollup);
+  await mockApiResponse('shibarium_deposits', depositsData);
+  await mockApiResponse('shibarium_deposits_count', 3971111);
+
+  const component = await render(<ShibariumDeposits/>);
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/ShibariumDeposits.tsx b/ui/pages/ShibariumDeposits.tsx
new file mode 100644
index 0000000000..81a95861f2
--- /dev/null
+++ b/ui/pages/ShibariumDeposits.tsx
@@ -0,0 +1,87 @@
+import { Hide, Show, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { rightLineArrow, nbsp } from 'lib/html-entities';
+import { SHIBARIUM_DEPOSIT_ITEM } from 'stubs/shibarium';
+import { generateListStub } from 'stubs/utils';
+import DepositsListItem from 'ui/deposits/shibarium/DepositsListItem';
+import DepositsTable from 'ui/deposits/shibarium/DepositsTable';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+
+const L2Deposits = () => {
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'shibarium_deposits',
+    options: {
+      placeholderData: generateListStub<'shibarium_deposits'>(
+        SHIBARIUM_DEPOSIT_ITEM,
+        50,
+        {
+          next_page_params: {
+            items_count: 50,
+            block_number: 9045200,
+          },
+        },
+      ),
+    },
+  });
+
+  const countersQuery = useApiQuery('shibarium_deposits_count', {
+    queryOptions: {
+      placeholderData: 1927029,
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        { data.items.map(((item, index) => (
+          <DepositsListItem
+            key={ item.l2_transaction_hash + (isPlaceholderData ? index : '') }
+            isLoading={ isPlaceholderData }
+            item={ item }
+          />
+        ))) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <DepositsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (countersQuery.isError) {
+      return null;
+    }
+
+    return (
+      <Skeleton
+        isLoaded={ !countersQuery.isPlaceholderData }
+        display="inline-block"
+      >
+        A total of { countersQuery.data?.toLocaleString() } deposits found
+      </Skeleton>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle title={ `Deposits (L1${ nbsp }${ rightLineArrow }${ nbsp }L2)` } withTextAd/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no deposits."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default L2Deposits;
diff --git a/ui/pages/ShibariumWithdrawals.pw.tsx b/ui/pages/ShibariumWithdrawals.pw.tsx
new file mode 100644
index 0000000000..9310892bd8
--- /dev/null
+++ b/ui/pages/ShibariumWithdrawals.pw.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { data as withdrawalsData } from 'mocks/shibarium/withdrawals';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import ShibariumWithdrawals from './ShibariumWithdrawals';
+
+test('base view +@mobile', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => {
+  // test on mobile is flaky
+  // my assumption is there is not enough time to calculate hashes truncation so component is unstable
+  // so I raised the test timeout to check if it helps
+  test.slow();
+
+  await mockTextAd();
+  await mockEnvs(ENVS_MAP.shibariumRollup);
+  await mockApiResponse('shibarium_withdrawals', withdrawalsData);
+  await mockApiResponse('shibarium_withdrawals_count', 397);
+
+  const component = await render(<ShibariumWithdrawals/>);
+
+  await expect(component).toHaveScreenshot({ timeout: 10_000 });
+});
diff --git a/ui/pages/ShibariumWithdrawals.tsx b/ui/pages/ShibariumWithdrawals.tsx
new file mode 100644
index 0000000000..0e946965b1
--- /dev/null
+++ b/ui/pages/ShibariumWithdrawals.tsx
@@ -0,0 +1,85 @@
+import { Hide, Show, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { rightLineArrow, nbsp } from 'lib/html-entities';
+import { SHIBARIUM_WITHDRAWAL_ITEM } from 'stubs/shibarium';
+import { generateListStub } from 'stubs/utils';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+import WithdrawalsListItem from 'ui/withdrawals/shibarium/WithdrawalsListItem';
+import WithdrawalsTable from 'ui/withdrawals/shibarium/WithdrawalsTable';
+
+const L2Withdrawals = () => {
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'shibarium_withdrawals',
+    options: {
+      placeholderData: generateListStub<'shibarium_withdrawals'>(
+        SHIBARIUM_WITHDRAWAL_ITEM,
+        50,
+        {
+          next_page_params: {
+            items_count: 50,
+            block_number: 123,
+          },
+        },
+      ),
+    },
+  });
+
+  const countersQuery = useApiQuery('shibarium_withdrawals_count', {
+    queryOptions: {
+      placeholderData: 23700,
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>{ data.items.map(((item, index) => (
+        <WithdrawalsListItem
+          key={ item.l2_transaction_hash + (isPlaceholderData ? index : '') }
+          item={ item }
+          isLoading={ isPlaceholderData }
+        />
+      ))) }</Show>
+      <Hide below="lg" ssr={ false }>
+        <WithdrawalsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (countersQuery.isError) {
+      return null;
+    }
+
+    return (
+      <Skeleton
+        isLoaded={ !countersQuery.isPlaceholderData }
+        display="inline-block"
+      >
+        A total of { countersQuery.data?.toLocaleString() } withdrawals found
+      </Skeleton>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle title={ `Withdrawals (L2${ nbsp }${ rightLineArrow }${ nbsp }L1)` } withTextAd/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no withdrawals."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default L2Withdrawals;
diff --git a/ui/pages/Sol2Uml.tsx b/ui/pages/Sol2Uml.tsx
index 9bf3ebcc61..bf8f4fd90c 100644
--- a/ui/pages/Sol2Uml.tsx
+++ b/ui/pages/Sol2Uml.tsx
@@ -35,7 +35,7 @@ const Sol2Uml = () => {
       <Flex mb={ 10 } flexWrap="wrap" columnGap={ 3 }>
         <span>For contract</span>
         <AddressEntity
-          address={{ hash: addressHash, is_contract: true, implementation_name: null }}
+          address={{ hash: addressHash, is_contract: true }}
         />
       </Flex>
       <Sol2UmlDiagram addressHash={ addressHash }/>
diff --git a/ui/pages/Sprite.tsx b/ui/pages/Sprite.tsx
new file mode 100644
index 0000000000..ed0156d86d
--- /dev/null
+++ b/ui/pages/Sprite.tsx
@@ -0,0 +1,120 @@
+import { Flex, Box, Tooltip, useClipboard, useColorModeValue } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import React from 'react';
+
+import type { StaticRoute } from 'nextjs-routes';
+import { route } from 'nextjs-routes';
+
+import useFetch from 'lib/hooks/useFetch';
+import ContentLoader from 'ui/shared/ContentLoader';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import EmptySearchResult from 'ui/shared/EmptySearchResult';
+import FilterInput from 'ui/shared/filters/FilterInput';
+import type { IconName } from 'ui/shared/IconSvg';
+import IconSvg from 'ui/shared/IconSvg';
+import PageTitle from 'ui/shared/Page/PageTitle';
+
+const formatFileSize = (fileSizeInBytes: number) => `${ (fileSizeInBytes / 1_024).toFixed(2) } Kb`;
+
+interface IconInfo {
+  name: string;
+  fileSize: number;
+}
+
+const Item = ({ name, fileSize, bgColor }: IconInfo & { bgColor: string }) => {
+  const { hasCopied, onCopy } = useClipboard(name, 1000);
+  const [ copied, setCopied ] = React.useState(false);
+
+  React.useEffect(() => {
+    if (hasCopied) {
+      setCopied(true);
+    } else {
+      setCopied(false);
+    }
+  }, [ hasCopied ]);
+
+  return (
+    <Flex
+      flexDir="column"
+      alignItems="center"
+      whiteSpace="pre-wrap"
+      wordBreak="break-word"
+      maxW="100px"
+      textAlign="center"
+      onClick={ onCopy }
+      cursor="pointer"
+    >
+      <IconSvg name={ name as IconName } boxSize="100px" bgColor={ bgColor } borderRadius="base"/>
+      <Tooltip label={ copied ? 'Copied' : 'Copy to clipboard' } isOpen={ copied }>
+        <Box fontWeight={ 500 } mt={ 2 }>{ name }</Box>
+      </Tooltip>
+      <Box color="text_secondary">{ formatFileSize(fileSize) }</Box>
+    </Flex>
+  );
+};
+
+const Sprite = () => {
+  const [ searchTerm, setSearchTerm ] = React.useState('');
+  const bgColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.100');
+
+  const fetch = useFetch();
+  const { data, isFetching, isError } = useQuery({
+    queryKey: [ 'sprite' ],
+    queryFn: () => {
+      const url = route({ pathname: '/node-api/sprite' as StaticRoute<'/api/sprite'>['pathname'] });
+      return fetch<{ icons: Array<IconInfo> }, unknown>(url);
+    },
+  });
+
+  const content = (() => {
+    if (isFetching) {
+      return <ContentLoader/>;
+    }
+
+    if (isError || !data || !('icons' in data)) {
+      return <DataFetchAlert/>;
+    }
+
+    const items = data.icons.filter((icon) => icon.name.includes(searchTerm));
+
+    if (items.length === 0) {
+      return <EmptySearchResult text="No icons found"/>;
+    }
+
+    return (
+      <Flex flexWrap="wrap" fontSize="sm" columnGap={ 5 } rowGap={ 5 } justifyContent="flex-start">
+        { items.map((item) => <Item key={ item.name } { ...item } bgColor={ bgColor }/>) }
+      </Flex>
+    );
+  })();
+
+  const total = React.useMemo(() => {
+    if (!data || !('icons' in data)) {
+      return;
+    }
+    return data?.icons.reduce((result, item) => {
+      result.num++;
+      result.fileSize += item.fileSize;
+      return result;
+    }, { num: 0, fileSize: 0 });
+  }, [ data ]);
+
+  const searchInput = <FilterInput placeholder="Search by name..." onChange={ setSearchTerm } isLoading={ isFetching } minW={{ base: '100%', lg: '300px' }}/>;
+  const totalEl = total ? <Box ml="auto">Items: { total.num } / Size: { formatFileSize(total.fileSize) }</Box> : null;
+
+  const contentAfter = (
+    <>
+      { totalEl }
+      { searchInput }
+    </>
+  );
+
+  return (
+    <div>
+      <PageTitle title="SVG sprite 🥤" contentAfter={ contentAfter }/>
+      { content }
+    </div>
+  );
+};
+
+export default React.memo(Sprite);
diff --git a/ui/pages/Stats.tsx b/ui/pages/Stats.tsx
index 228226df27..9b8e8ec869 100644
--- a/ui/pages/Stats.tsx
+++ b/ui/pages/Stats.tsx
@@ -21,11 +21,14 @@ const Stats = () => {
     handleFilterChange,
     displayedCharts,
     filterQuery,
+    initialFilterQuery,
   } = useStats();
 
   return (
     <>
-      <PageTitle title={ `${ config.chain.name } stats` }/>
+      <PageTitle
+        title={ config.meta.seo.enhancedDataEnabled ? `${ config.chain.name } statistic & data` : `${ config.chain.name } stats` }
+      />
 
       <Box mb={{ base: 6, sm: 8 }}>
         <NumberWidgetsList/>
@@ -33,6 +36,8 @@ const Stats = () => {
 
       <Box mb={{ base: 6, sm: 8 }}>
         <StatsFilters
+          isLoading={ isPlaceholderData }
+          initialFilterValue={ initialFilterQuery }
           sections={ sections }
           currentSection={ currentSection }
           onSectionChange={ handleSectionChange }
@@ -44,6 +49,7 @@ const Stats = () => {
 
       <ChartsWidgetsList
         filterQuery={ filterQuery }
+        initialFilterQuery={ initialFilterQuery }
         isError={ isError }
         isPlaceholderData={ isPlaceholderData }
         charts={ displayedCharts }
diff --git a/ui/pages/Token.pw.tsx b/ui/pages/Token.pw.tsx
index 16db22015a..4f1aa483ab 100644
--- a/ui/pages/Token.pw.tsx
+++ b/ui/pages/Token.pw.tsx
@@ -1,214 +1,123 @@
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import config from 'configs/app';
 import * as verifiedAddressesMocks from 'mocks/account/verifiedAddresses';
 import { token as contract } from 'mocks/address/address';
 import { tokenInfo, tokenCounters, bridgedTokenA } from 'mocks/tokens/tokenInfo';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
 import * as socketServer from 'playwright/fixtures/socketServer';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { test, expect, devices } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import Token from './Token';
 
-const TOKEN_API_URL = buildApiUrl('token', { hash: '1' });
-const TOKEN_COUNTERS_API_URL = buildApiUrl('token_counters', { hash: '1' });
-const TOKEN_TRANSFERS_API_URL = buildApiUrl('token_transfers', { hash: '1' });
-const ADDRESS_API_URL = buildApiUrl('address', { hash: '1' });
+const hash = tokenInfo.address;
+const chainId = config.chain.id;
+
 const hooksConfig = {
   router: {
-    query: { hash: '1', tab: 'token_transfers' },
+    query: { hash, tab: 'token_transfers' },
     isReady: true,
   },
 };
 
-const test = base.extend<socketServer.SocketServerFixture>({
-  createSocket: socketServer.createSocket,
-});
-
 // FIXME
 // test cases which use socket cannot run in parallel since the socket server always run on the same port
 test.describe.configure({ mode: 'serial' });
 
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(TOKEN_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(tokenInfo),
-  }));
-  await page.route(ADDRESS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contract),
-  }));
-  await page.route(TOKEN_COUNTERS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(tokenCounters),
-  }));
-  await page.route(TOKEN_TRANSFERS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({}),
-  }));
+test.beforeEach(async({ mockApiResponse, mockTextAd }) => {
+  await mockApiResponse('token', tokenInfo, { pathParams: { hash } });
+  await mockApiResponse('address', contract, { pathParams: { hash } });
+  await mockApiResponse('token_counters', tokenCounters, { pathParams: { hash } });
+  await mockApiResponse('token_transfers', { items: [], next_page_params: null }, { pathParams: { hash } });
+  await mockTextAd();
 });
 
-test('base view', async({ mount, page, createSocket }) => {
-  const component = await mount(
-    <TestApp withSocket>
-      <Token/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('base view', async({ render, page, createSocket }) => {
+  const component = await render(<Token/>, { hooksConfig }, { withSocket: true });
 
   const socket = await createSocket();
-  const channel = await socketServer.joinChannel(socket, 'tokens:1');
+  const channel = await socketServer.joinChannel(socket, `tokens:${ hash }`);
   socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-test('with verified info', async({ mount, page, createSocket }) => {
-  const VERIFIED_INFO_URL = buildApiUrl('token_verified_info', { chainId: '1', hash: '1' });
-  await page.route(VERIFIED_INFO_URL, (route) => route.fulfill({
-    body: JSON.stringify(verifiedAddressesMocks.TOKEN_INFO_APPLICATION.APPROVED),
-  }));
-  await page.route(tokenInfo.icon_url as string, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
+test('with verified info', async({ render, page, createSocket, mockApiResponse, mockAssetResponse }) => {
+  await mockApiResponse('token_verified_info', verifiedAddressesMocks.TOKEN_INFO_APPLICATION.APPROVED, { pathParams: { chainId, hash } });
+  await mockAssetResponse(tokenInfo.icon_url as string, './playwright/mocks/image_s.jpg');
 
-  const component = await mount(
-    <TestApp withSocket>
-      <Token/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const component = await render(<Token/>, { hooksConfig }, { withSocket: true });
 
   const socket = await createSocket();
-  const channel = await socketServer.joinChannel(socket, 'tokens:1');
+  const channel = await socketServer.joinChannel(socket, `tokens:${ hash }`);
   socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
 
-  await page.getByRole('button', { name: /project info/i }).click();
+  await page.getByLabel('Show info').click();
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-const bridgedTokenTest = base.extend<socketServer.SocketServerFixture>({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.bridgedTokens) as any,
-  createSocket: socketServer.createSocket,
-});
-
-bridgedTokenTest('bridged token', async({ mount, page, createSocket }) => {
-
-  const VERIFIED_INFO_URL = buildApiUrl('token_verified_info', { chainId: '1', hash: '1' });
-
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(TOKEN_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(bridgedTokenA),
-  }));
-  await page.route(ADDRESS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contract),
-  }));
-  await page.route(TOKEN_COUNTERS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(tokenCounters),
-  }));
-  await page.route(TOKEN_TRANSFERS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({}),
-  }));
-  await page.route(VERIFIED_INFO_URL, (route) => route.fulfill({
-    body: JSON.stringify(verifiedAddressesMocks.TOKEN_INFO_APPLICATION.APPROVED),
-  }));
-
-  await page.route(tokenInfo.icon_url as string, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
-
-  const component = await mount(
-    <TestApp withSocket>
-      <Token/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+test('bridged token', async({ render, page, createSocket, mockApiResponse, mockAssetResponse, mockEnvs }) => {
+  const hash = bridgedTokenA.address;
+  const hooksConfig = {
+    router: {
+      query: { hash, tab: 'token_transfers' },
+    },
+  };
+
+  await mockEnvs(ENVS_MAP.bridgedTokens);
+  await mockApiResponse('token', bridgedTokenA, { pathParams: { hash } });
+  await mockApiResponse('address', contract, { pathParams: { hash } });
+  await mockApiResponse('token_counters', tokenCounters, { pathParams: { hash } });
+  await mockApiResponse('token_transfers', { items: [], next_page_params: null }, { pathParams: { hash } });
+  await mockApiResponse('token_verified_info', verifiedAddressesMocks.TOKEN_INFO_APPLICATION.APPROVED, { pathParams: { chainId, hash } });
+  await mockAssetResponse(tokenInfo.icon_url as string, './playwright/mocks/image_s.jpg');
+
+  const component = await render(<Token/>, { hooksConfig }, { withSocket: true });
   const socket = await createSocket();
-  const channel = await socketServer.joinChannel(socket, 'tokens:1');
+  const channel = await socketServer.joinChannel(socket, `tokens:${ hash.toLowerCase() }`);
   socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
-  test('base view', async({ mount, page, createSocket }) => {
-    const component = await mount(
-      <TestApp withSocket>
-        <Token/>
-      </TestApp>,
-      { hooksConfig },
-    );
 
+  test('base view', async({ render, page, createSocket }) => {
+    const component = await render(<Token/>, { hooksConfig }, { withSocket: true });
     const socket = await createSocket();
-    const channel = await socketServer.joinChannel(socket, 'tokens:1');
+    const channel = await socketServer.joinChannel(socket, `tokens:${ hash }`);
     socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
 
     await expect(component).toHaveScreenshot({
-      mask: [ page.locator(configs.adsBannerSelector) ],
-      maskColor: configs.maskColor,
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
     });
   });
 
-  test('with verified info', async({ mount, page, createSocket }) => {
-    const VERIFIED_INFO_URL = buildApiUrl('token_verified_info', { chainId: '1', hash: '1' });
-    await page.route(VERIFIED_INFO_URL, (route) => route.fulfill({
-      body: JSON.stringify(verifiedAddressesMocks.TOKEN_INFO_APPLICATION.APPROVED),
-    }));
-    await page.route(tokenInfo.icon_url as string, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-
-    const component = await mount(
-      <TestApp withSocket>
-        <Token/>
-      </TestApp>,
-      { hooksConfig },
-    );
+  test('with verified info', async({ render, page, createSocket, mockApiResponse, mockAssetResponse }) => {
+    await mockApiResponse('token_verified_info', verifiedAddressesMocks.TOKEN_INFO_APPLICATION.APPROVED, { pathParams: { chainId, hash } });
+    await mockAssetResponse(tokenInfo.icon_url as string, './playwright/mocks/image_s.jpg');
 
+    const component = await render(<Token/>, { hooksConfig }, { withSocket: true });
     const socket = await createSocket();
-    const channel = await socketServer.joinChannel(socket, 'tokens:1');
+    const channel = await socketServer.joinChannel(socket, `tokens:${ hash }`);
     socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
 
     await expect(component).toHaveScreenshot({
-      mask: [ page.locator(configs.adsBannerSelector) ],
-      maskColor: configs.maskColor,
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
     });
   });
 });
diff --git a/ui/pages/Token.tsx b/ui/pages/Token.tsx
index aedc8ce28e..8b2685bc04 100644
--- a/ui/pages/Token.tsx
+++ b/ui/pages/Token.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Tooltip } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React, { useEffect } from 'react';
@@ -10,47 +10,46 @@ import type { RoutedTab } from 'ui/shared/Tabs/types';
 
 import config from 'configs/app';
 import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
-import { useAppContext } from 'lib/contexts/app';
-import useContractTabs from 'lib/hooks/useContractTabs';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import * as metadata from 'lib/metadata';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
+import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
 import * as addressStubs from 'stubs/address';
 import * as tokenStubs from 'stubs/token';
+import { getTokenHoldersStub } from 'stubs/token';
 import { generateListStub } from 'stubs/utils';
 import AddressContract from 'ui/address/AddressContract';
-import AddressQrCode from 'ui/address/details/AddressQrCode';
-import AccountActionsMenu from 'ui/shared/AccountActionsMenu/AccountActionsMenu';
+import AddressCsvExportLink from 'ui/address/AddressCsvExportLink';
+import useContractTabs from 'ui/address/contract/useContractTabs';
+import { CONTRACT_TAB_IDS } from 'ui/address/contract/utils';
 import TextAd from 'ui/shared/ad/TextAd';
-import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
-import EntityTags from 'ui/shared/EntityTags';
 import IconSvg from 'ui/shared/IconSvg';
-import NetworkExplorers from 'ui/shared/NetworkExplorers';
-import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
-import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
 import TokenDetails from 'ui/token/TokenDetails';
 import TokenHolders from 'ui/token/TokenHolders/TokenHolders';
 import TokenInventory from 'ui/token/TokenInventory';
+import TokenPageTitle from 'ui/token/TokenPageTitle';
 import TokenTransfer from 'ui/token/TokenTransfer/TokenTransfer';
-import TokenVerifiedInfo from 'ui/token/TokenVerifiedInfo';
+import useTokenQuery from 'ui/token/useTokenQuery';
 
 export type TokenTabs = 'token_transfers' | 'holders' | 'inventory';
 
+const TABS_RIGHT_SLOT_PROPS = {
+  display: 'flex',
+  alignItems: 'center',
+  columnGap: 4,
+};
+
 const TokenPageContent = () => {
   const [ isQueryEnabled, setIsQueryEnabled ] = React.useState(false);
   const [ totalSupplySocket, setTotalSupplySocket ] = React.useState<number>();
   const router = useRouter();
   const isMobile = useIsMobile();
 
-  const appProps = useAppContext();
-
   const scrollRef = React.useRef<HTMLDivElement>(null);
 
   const hashString = getQueryParamString(router.query.hash);
@@ -59,15 +58,9 @@ const TokenPageContent = () => {
 
   const queryClient = useQueryClient();
 
-  const tokenQuery = useApiQuery('token', {
-    pathParams: { hash: hashString },
-    queryOptions: {
-      enabled: Boolean(router.query.hash),
-      placeholderData: tokenStubs.TOKEN_INFO_ERC_20,
-    },
-  });
+  const tokenQuery = useTokenQuery(hashString);
 
-  const contractQuery = useApiQuery('address', {
+  const addressQuery = useApiQuery('address', {
     pathParams: { hash: hashString },
     queryOptions: {
       enabled: isQueryEnabled && Boolean(router.query.hash),
@@ -112,13 +105,13 @@ const TokenPageContent = () => {
   });
 
   useEffect(() => {
-    if (tokenQuery.data && !tokenQuery.isPlaceholderData) {
-      metadata.update({ pathname: '/token/[hash]', query: { hash: tokenQuery.data.address } }, { symbol: tokenQuery.data.symbol ?? '' });
+    if (tokenQuery.data && !tokenQuery.isPlaceholderData && !config.meta.seo.enhancedDataEnabled) {
+      metadata.update({ pathname: '/token/[hash]', query: { hash: tokenQuery.data.address } }, tokenQuery.data);
     }
   }, [ tokenQuery.data, tokenQuery.isPlaceholderData ]);
 
-  const hasData = (tokenQuery.data && !tokenQuery.isPlaceholderData) && (contractQuery.data && !contractQuery.isPlaceholderData);
-  const hasInventoryTab = tokenQuery.data?.type === 'ERC-1155' || tokenQuery.data?.type === 'ERC-721';
+  const hasData = (tokenQuery.data && !tokenQuery.isPlaceholderData) && (addressQuery.data && !addressQuery.isPlaceholderData);
+  const hasInventoryTab = tokenQuery.data?.type && NFT_TOKEN_TYPE_IDS.includes(tokenQuery.data.type);
 
   const transfersQuery = useQueryWithPages({
     resourceName: 'token_transfers',
@@ -161,30 +154,33 @@ const TokenPageContent = () => {
     scrollRef,
     options: {
       enabled: Boolean(hashString && tab === 'holders' && hasData),
-      placeholderData: generateListStub<'token_holders'>(
-        tokenQuery.data?.type === 'ERC-1155' ? tokenStubs.TOKEN_HOLDER_ERC_1155 : tokenStubs.TOKEN_HOLDER_ERC_20, 50, { next_page_params: null }),
+      placeholderData: getTokenHoldersStub(tokenQuery.data?.type, null),
     },
   });
 
-  const verifiedInfoQuery = useApiQuery('token_verified_info', {
-    pathParams: { hash: hashString, chainId: config.chain.id },
-    queryOptions: { enabled: Boolean(tokenQuery.data) && config.features.verifiedTokens.isEnabled },
-  });
-
-  const contractTabs = useContractTabs(contractQuery.data);
+  const isLoading = tokenQuery.isPlaceholderData || addressQuery.isPlaceholderData;
+  const contractTabs = useContractTabs(addressQuery.data, addressQuery.isPlaceholderData);
 
   const tabs: Array<RoutedTab> = [
-    (tokenQuery.data?.type === 'ERC-1155' || tokenQuery.data?.type === 'ERC-721') ? {
+    hasInventoryTab ? {
       id: 'inventory',
       title: 'Inventory',
-      component: <TokenInventory inventoryQuery={ inventoryQuery } tokenQuery={ tokenQuery } ownerFilter={ ownerFilter }/>,
+      component: <TokenInventory inventoryQuery={ inventoryQuery } tokenQuery={ tokenQuery } ownerFilter={ ownerFilter } shouldRender={ !isLoading }/>,
     } : undefined,
-    { id: 'token_transfers', title: 'Token transfers', component: <TokenTransfer transfersQuery={ transfersQuery } token={ tokenQuery.data }/> },
-    { id: 'holders', title: 'Holders', component: <TokenHolders token={ tokenQuery.data } holdersQuery={ holdersQuery }/> },
-    contractQuery.data?.is_contract ? {
+    {
+      id: 'token_transfers',
+      title: 'Token transfers',
+      component: <TokenTransfer transfersQuery={ transfersQuery } tokenQuery={ tokenQuery } shouldRender={ !isLoading }/>,
+    },
+    {
+      id: 'holders',
+      title: 'Holders',
+      component: <TokenHolders token={ tokenQuery.data } holdersQuery={ holdersQuery } shouldRender={ !isLoading }/>,
+    },
+    addressQuery.data?.is_contract ? {
       id: 'contract',
       title: () => {
-        if (contractQuery.data?.is_verified) {
+        if (addressQuery.data?.is_verified) {
           return (
             <>
               <span>Contract</span>
@@ -195,8 +191,8 @@ const TokenPageContent = () => {
 
         return 'Contract';
       },
-      component: <AddressContract tabs={ contractTabs }/>,
-      subTabs: contractTabs.map(tab => tab.id),
+      component: <AddressContract tabs={ contractTabs.tabs } isLoading={ contractTabs.isLoading } shouldRender={ !isLoading }/>,
+      subTabs: CONTRACT_TAB_IDS,
     } : undefined,
   ].filter(Boolean);
 
@@ -212,120 +208,61 @@ const TokenPageContent = () => {
   }
 
   // default tab for nfts is token inventory
-  if (((tokenQuery.data?.type === 'ERC-1155' || tokenQuery.data?.type === 'ERC-721') && !tab) || tab === 'inventory') {
+  if ((hasInventoryTab && !tab) || tab === 'inventory') {
     pagination = inventoryQuery.pagination;
   }
 
-  const tokenSymbolText = tokenQuery.data?.symbol ? ` (${ tokenQuery.data.symbol })` : '';
-
   const tabListProps = React.useCallback(({ isSticky, activeTabIndex }: { isSticky: boolean; activeTabIndex: number }) => {
     if (isMobile) {
       return { mt: 8 };
     }
 
     return {
-      mt: 3,
-      py: 5,
+      pt: 6,
+      pb: 6,
       marginBottom: 0,
       boxShadow: activeTabIndex === 2 && isSticky ? 'action_bar' : 'none',
     };
   }, [ isMobile ]);
 
-  const backLink = React.useMemo(() => {
-    const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/tokens');
-
-    if (!hasGoBackLink) {
-      return;
+  const tabsRightSlot = React.useMemo(() => {
+    if (isMobile) {
+      return null;
     }
 
-    return {
-      label: 'Back to tokens list',
-      url: appProps.referrer,
-    };
-  }, [ appProps.referrer ]);
-
-  const titleContentAfter = (
-    <>
-      { verifiedInfoQuery.data?.tokenAddress && (
-        <Tooltip label={ `Information on this token has been verified by ${ config.chain.name }` }>
-          <Box boxSize={ 6 }>
-            <IconSvg name="verified_token" color="green.500" boxSize={ 6 } cursor="pointer"/>
-          </Box>
-        </Tooltip>
-      ) }
-      <EntityTags
-        data={ contractQuery.data }
-        isLoading={ tokenQuery.isPlaceholderData || contractQuery.isPlaceholderData }
-        tagsBefore={ [
-          tokenQuery.data ? { label: tokenQuery.data?.type, display_name: tokenQuery.data?.type } : undefined,
-          config.features.bridgedTokens.isEnabled && tokenQuery.data?.is_bridged ?
-            { label: 'bridged', display_name: 'Bridged', colorScheme: 'blue', variant: 'solid' } :
-            undefined,
-        ] }
-        tagsAfter={
-          verifiedInfoQuery.data?.projectSector ?
-            [ { label: verifiedInfoQuery.data.projectSector, display_name: verifiedInfoQuery.data.projectSector } ] :
-            undefined
-        }
-        flexGrow={ 1 }
-      />
-    </>
-  );
-
-  const isLoading = tokenQuery.isPlaceholderData || contractQuery.isPlaceholderData;
-
-  const titleSecondRow = (
-    <Flex alignItems="center" w="100%" minW={ 0 } columnGap={ 2 } rowGap={ 2 } flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
-      <AddressEntity
-        address={{ ...contractQuery.data, name: '' }}
-        isLoading={ isLoading }
-        fontFamily="heading"
-        fontSize="lg"
-        fontWeight={ 500 }
-      />
-      { !isLoading && tokenQuery.data && <AddressAddToWallet token={ tokenQuery.data } variant="button"/> }
-      <AddressQrCode address={ contractQuery.data } isLoading={ isLoading }/>
-      <AccountActionsMenu isLoading={ isLoading }/>
-      <Flex ml={{ base: 0, lg: 'auto' }} columnGap={ 2 } flexGrow={{ base: 1, lg: 0 }}>
-        <TokenVerifiedInfo verifiedInfoQuery={ verifiedInfoQuery }/>
-        <NetworkExplorers type="token" pathParam={ hashString } ml={{ base: 'auto', lg: 0 }}/>
-      </Flex>
-    </Flex>
-  );
+    return (
+      <>
+        { tab === 'holders' && (
+          <AddressCsvExportLink
+            address={ hashString }
+            params={{ type: 'holders' }}
+            isLoading={ pagination?.isLoading }
+          />
+        ) }
+        { pagination?.isVisible && <Pagination { ...pagination }/> }
+      </>
+    );
+  }, [ hashString, isMobile, pagination, tab ]);
 
   return (
     <>
       <TextAd mb={ 6 }/>
-      <PageTitle
-        title={ `${ tokenQuery.data?.name || 'Unnamed token' }${ tokenSymbolText }` }
-        isLoading={ isLoading }
-        backLink={ backLink }
-        beforeTitle={ tokenQuery.data ? (
-          <TokenEntity.Icon
-            token={ tokenQuery.data }
-            isLoading={ isLoading }
-            iconSize="lg"
-          />
-        ) : null }
-        contentAfter={ titleContentAfter }
-        secondRow={ titleSecondRow }
-      />
+
+      <TokenPageTitle tokenQuery={ tokenQuery } addressQuery={ addressQuery } hash={ hashString }/>
 
       <TokenDetails tokenQuery={ tokenQuery }/>
 
       { /* should stay before tabs to scroll up with pagination */ }
       <Box ref={ scrollRef }></Box>
 
-      { isLoading ?
-        <TabsSkeleton tabs={ tabs }/> :
-        (
-          <RoutedTabs
-            tabs={ tabs }
-            tabListProps={ tabListProps }
-            rightSlot={ !isMobile && pagination?.isVisible ? <Pagination { ...pagination }/> : null }
-            stickyEnabled={ !isMobile }
-          />
-        ) }
+      <RoutedTabs
+        tabs={ tabs }
+        tabListProps={ tabListProps }
+        rightSlot={ tabsRightSlot }
+        rightSlotProps={ TABS_RIGHT_SLOT_PROPS }
+        stickyEnabled={ !isMobile }
+        isLoading={ isLoading }
+      />
     </>
   );
 };
diff --git a/ui/pages/TokenInstance.pw.tsx b/ui/pages/TokenInstance.pw.tsx
new file mode 100644
index 0000000000..b960dcdb30
--- /dev/null
+++ b/ui/pages/TokenInstance.pw.tsx
@@ -0,0 +1,124 @@
+import React from 'react';
+
+import config from 'configs/app';
+import * as addressMock from 'mocks/address/address';
+import * as tokenMock from 'mocks/tokens/tokenInfo';
+import * as tokenInstanceMock from 'mocks/tokens/tokenInstance';
+import * as socketServer from 'playwright/fixtures/socketServer';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
+
+import TokenInstance from './TokenInstance';
+
+const hash = tokenMock.tokenInfo.address;
+const id = '42';
+
+test.describe.configure({ mode: 'serial' });
+
+test.beforeEach(async({ mockApiResponse, mockAssetResponse, mockTextAd }) => {
+  await mockApiResponse('token', tokenMock.tokenInfo, { pathParams: { hash } });
+  await mockApiResponse('address', addressMock.token, { pathParams: { hash } });
+  await mockApiResponse('token_instance', tokenInstanceMock.unique, { pathParams: { hash, id } });
+  await mockApiResponse('token_instance_transfers', { items: [], next_page_params: null }, { pathParams: { hash, id } });
+  await mockApiResponse('token_instance_transfers_count', { transfers_count: 420 }, { pathParams: { hash, id } });
+  await mockTextAd();
+  for (const marketplace of config.UI.views.nft.marketplaces) {
+    await mockAssetResponse(marketplace.logo_url, './playwright/mocks/image_svg.svg');
+  }
+  await mockAssetResponse(tokenInstanceMock.base.image_url as string, './playwright/mocks/image_md.jpg');
+});
+
+test('metadata update', async({ render, page, createSocket, mockApiResponse, mockAssetResponse }) => {
+  const hooksConfig = {
+    router: {
+      query: { hash, id, tab: 'metadata' },
+      pathname: '/token/[hash]/instance/[id]',
+    },
+  };
+  const newMetadata = {
+    attributes: [
+      { value: 'yellow', trait_type: 'Color' },
+      { value: 'Mrs. Duckie', trait_type: 'Name' },
+    ],
+    external_url: 'https://yellow-duck.nft',
+    image_url: 'https://yellow-duck.nft/duck.jpg',
+    animation_url: null,
+    status: 'FRESH!!!',
+    name: 'Carmelo Anthony',
+    description: 'Updated description',
+  };
+  await mockApiResponse('token_instance_refresh_metadata', {} as never, { pathParams: { hash, id } });
+  await mockAssetResponse(newMetadata.image_url, './playwright/mocks/image_long.jpg');
+
+  const component = await render(<TokenInstance/>, { hooksConfig }, { withSocket: true });
+  const socket = await createSocket();
+
+  // take a screenshot of initial state
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
+
+  // open the menu, click the button and submit form
+  await page.getByLabel('Address menu').click();
+  await page.getByRole('menuitem', { name: 'Refresh metadata' }).click();
+
+  // join socket channel
+  const channel = await socketServer.joinChannel(socket, `token_instances:${ hash.toLowerCase() }`);
+
+  // check that button is disabled
+  await page.getByLabel('Address menu').click();
+  await expect(page.getByRole('menuitem', { name: 'Refresh metadata' })).toBeDisabled();
+  await page.getByLabel('Address menu').click();
+
+  // take a screenshot of loading state
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
+
+  // send message in socket but with wrong token id
+  socketServer.sendMessage(socket, channel, 'fetched_token_instance_metadata', {
+    token_id: Number(id) + 1,
+    fetched_metadata: newMetadata,
+  });
+  await expect(page.getByText(newMetadata.description)).toBeHidden();
+
+  // send message in socket with correct token id
+  socketServer.sendMessage(socket, channel, 'fetched_token_instance_metadata', {
+    token_id: Number(id),
+    fetched_metadata: newMetadata,
+  });
+
+  // take a screenshot of updated state
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
+});
+
+test('metadata update failed', async({ render, page }) => {
+  const hooksConfig = {
+    router: {
+      query: { hash, id, tab: 'metadata' },
+      pathname: '/token/[hash]/instance/[id]',
+    },
+  };
+
+  const component = await render(<TokenInstance/>, { hooksConfig }, { withSocket: true });
+
+  // open the menu, click the button and submit form
+  await page.getByLabel('Address menu').click();
+  await page.getByRole('menuitem', { name: 'Refresh metadata' }).click();
+
+  // check that button is not disabled
+  await page.getByLabel('Address menu').click();
+  await expect(page.getByRole('menuitem', { name: 'Refresh metadata' })).toBeEnabled();
+  await page.getByLabel('Address menu').click();
+
+  // take a screenshot of error state
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
+});
diff --git a/ui/pages/TokenInstance.tsx b/ui/pages/TokenInstance.tsx
index dba5eed48f..6391bff737 100644
--- a/ui/pages/TokenInstance.tsx
+++ b/ui/pages/TokenInstance.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -6,41 +6,37 @@ import type { PaginationParams } from 'ui/shared/pagination/types';
 import type { RoutedTab } from 'ui/shared/Tabs/types';
 
 import useApiQuery from 'lib/api/useApiQuery';
-import { useAppContext } from 'lib/contexts/app';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import * as metadata from 'lib/metadata';
-import * as regexp from 'lib/regexp';
-import { TOKEN_INSTANCE, TOKEN_INFO_ERC_1155 } from 'stubs/token';
-import * as tokenStubs from 'stubs/token';
-import { generateListStub } from 'stubs/utils';
-import AddressQrCode from 'ui/address/details/AddressQrCode';
-import AccountActionsMenu from 'ui/shared/AccountActionsMenu/AccountActionsMenu';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import {
+  TOKEN_INSTANCE,
+  TOKEN_INFO_ERC_1155,
+  getTokenInstanceTransfersStub,
+  getTokenInstanceHoldersStub,
+} from 'stubs/token';
 import TextAd from 'ui/shared/ad/TextAd';
-import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
-import Tag from 'ui/shared/chakra/Tag';
-import TokenEntity from 'ui/shared/entities/token/TokenEntity';
-import LinkExternal from 'ui/shared/LinkExternal';
-import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
-import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
 import TokenHolders from 'ui/token/TokenHolders/TokenHolders';
 import TokenTransfer from 'ui/token/TokenTransfer/TokenTransfer';
+import { MetadataUpdateProvider } from 'ui/tokenInstance/contexts/metadataUpdate';
 import TokenInstanceDetails from 'ui/tokenInstance/TokenInstanceDetails';
 import TokenInstanceMetadata from 'ui/tokenInstance/TokenInstanceMetadata';
+import TokenInstanceMetadataFetcher from 'ui/tokenInstance/TokenInstanceMetadataFetcher';
+import TokenInstancePageTitle from 'ui/tokenInstance/TokenInstancePageTitle';
 
-export type TokenTabs = 'token_transfers' | 'holders'
+export type TokenTabs = 'token_transfers' | 'holders';
 
 const TokenInstanceContent = () => {
   const router = useRouter();
   const isMobile = useIsMobile();
-  const appProps = useAppContext();
 
-  const hash = router.query.hash?.toString();
-  const id = router.query.id?.toString();
-  const tab = router.query.tab?.toString();
+  const hash = getQueryParamString(router.query.hash);
+  const id = getQueryParamString(router.query.id);
+  const tab = getQueryParamString(router.query.tab);
 
   const scrollRef = React.useRef<HTMLDivElement>(null);
 
@@ -65,12 +61,8 @@ const TokenInstanceContent = () => {
     pathParams: { hash, id },
     scrollRef,
     options: {
-      enabled: Boolean(hash && id && (!tab || tab === 'token_transfers') && !tokenInstanceQuery.isPlaceholderData && tokenInstanceQuery.data),
-      placeholderData: generateListStub<'token_instance_transfers'>(
-        tokenQuery.data?.type === 'ERC-1155' ? tokenStubs.TOKEN_TRANSFER_ERC_1155 : tokenStubs.TOKEN_TRANSFER_ERC_721,
-        10,
-        { next_page_params: null },
-      ),
+      enabled: Boolean(hash && id && (!tab || tab === 'token_transfers')),
+      placeholderData: getTokenInstanceTransfersStub(tokenQuery.data?.type, null),
     },
   });
 
@@ -86,11 +78,12 @@ const TokenInstanceContent = () => {
     scrollRef,
     options: {
       enabled: Boolean(hash && tab === 'holders' && shouldFetchHolders),
-      placeholderData: generateListStub<'token_instance_holders'>(
-        tokenQuery.data?.type === 'ERC-1155' ? tokenStubs.TOKEN_HOLDER_ERC_1155 : tokenStubs.TOKEN_HOLDER_ERC_20, 10, { next_page_params: null }),
+      placeholderData: getTokenInstanceHoldersStub(tokenQuery.data?.type, null),
     },
   });
 
+  const isLoading = tokenInstanceQuery.isPlaceholderData || tokenQuery.isPlaceholderData;
+
   React.useEffect(() => {
     if (tokenInstanceQuery.data && !tokenInstanceQuery.isPlaceholderData && tokenQuery.data && !tokenQuery.isPlaceholderData) {
       metadata.update(
@@ -100,74 +93,25 @@ const TokenInstanceContent = () => {
     }
   }, [ tokenInstanceQuery.data, tokenInstanceQuery.isPlaceholderData, tokenQuery.data, tokenQuery.isPlaceholderData ]);
 
-  const backLink = React.useMemo(() => {
-    const hasGoBackLink = appProps.referrer && appProps.referrer.includes(`/token/${ hash }`) && !appProps.referrer.includes('instance');
-
-    if (!hasGoBackLink) {
-      return;
-    }
-
-    return {
-      label: 'Back to token page',
-      url: appProps.referrer,
-    };
-  }, [ appProps.referrer, hash ]);
-
   const tabs: Array<RoutedTab> = [
     {
       id: 'token_transfers',
       title: 'Token transfers',
-      component: <TokenTransfer transfersQuery={ transfersQuery } tokenId={ id } token={ tokenQuery.data }/>,
+      component: <TokenTransfer transfersQuery={ transfersQuery } tokenId={ id } tokenQuery={ tokenQuery } shouldRender={ !isLoading }/>,
     },
     shouldFetchHolders ?
-      { id: 'holders', title: 'Holders', component: <TokenHolders holdersQuery={ holdersQuery } token={ tokenQuery.data }/> } :
+      { id: 'holders', title: 'Holders', component: <TokenHolders holdersQuery={ holdersQuery } token={ tokenQuery.data } shouldRender={ !isLoading }/> } :
       undefined,
     { id: 'metadata', title: 'Metadata', component: (
       <TokenInstanceMetadata
         data={ tokenInstanceQuery.data?.metadata }
-        isPlaceholderData={ tokenInstanceQuery.isPlaceholderData }
+        isPlaceholderData={ isLoading }
       />
     ) },
   ].filter(Boolean);
 
   throwOnResourceLoadError(tokenInstanceQuery);
 
-  const tokenTag = <Tag isLoading={ tokenInstanceQuery.isPlaceholderData }>{ tokenQuery.data?.type }</Tag>;
-
-  const address = {
-    hash: hash || '',
-    is_contract: true,
-    implementation_name: null,
-    watchlist_names: [],
-    watchlist_address_id: null,
-  };
-
-  const isLoading = tokenInstanceQuery.isPlaceholderData || tokenQuery.isPlaceholderData;
-
-  const appLink = (() => {
-    if (!tokenInstanceQuery.data?.external_app_url) {
-      return null;
-    }
-
-    try {
-      const url = regexp.URL_PREFIX.test(tokenInstanceQuery.data.external_app_url) ?
-        new URL(tokenInstanceQuery.data.external_app_url) :
-        new URL('https://' + tokenInstanceQuery.data.external_app_url);
-
-      return (
-        <LinkExternal href={ url.toString() } variant="subtle" isLoading={ isLoading } ml={{ base: 0, lg: 'auto' }}>
-          { url.hostname || tokenInstanceQuery.data.external_app_url }
-        </LinkExternal>
-      );
-    } catch (error) {
-      return (
-        <LinkExternal href={ tokenInstanceQuery.data.external_app_url } isLoading={ isLoading } ml={{ base: 0, lg: 'auto' }}>
-            View in app
-        </LinkExternal>
-      );
-    }
-  })();
-
   let pagination: PaginationParams | undefined;
 
   if (tab === 'token_transfers') {
@@ -176,36 +120,15 @@ const TokenInstanceContent = () => {
     pagination = holdersQuery.pagination;
   }
 
-  const titleSecondRow = (
-    <Flex alignItems="center" w="100%" minW={ 0 } columnGap={ 2 } rowGap={ 2 } flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
-      <TokenEntity
-        token={ tokenQuery.data }
-        isLoading={ isLoading }
-        noSymbol
-        noCopy
-        jointSymbol
-        fontFamily="heading"
-        fontSize="lg"
-        fontWeight={ 500 }
-        w="auto"
-        maxW="700px"
-      />
-      { !isLoading && tokenInstanceQuery.data && <AddressAddToWallet token={ tokenQuery.data } variant="button"/> }
-      <AddressQrCode address={ address } isLoading={ isLoading }/>
-      <AccountActionsMenu isLoading={ isLoading }/>
-      { appLink }
-    </Flex>
-  );
-
   return (
-    <>
+    <MetadataUpdateProvider>
       <TextAd mb={ 6 }/>
-      <PageTitle
-        title={ `ID ${ tokenInstanceQuery.data?.id }` }
-        backLink={ backLink }
-        contentAfter={ tokenTag }
-        secondRow={ titleSecondRow }
+
+      <TokenInstancePageTitle
         isLoading={ isLoading }
+        token={ tokenQuery.data }
+        instance={ tokenInstanceQuery.data }
+        hash={ hash }
       />
 
       <TokenInstanceDetails data={ tokenInstanceQuery?.data } isLoading={ isLoading } scrollRef={ scrollRef } token={ tokenQuery.data }/>
@@ -213,15 +136,16 @@ const TokenInstanceContent = () => {
       { /* should stay before tabs to scroll up with pagination */ }
       <Box ref={ scrollRef }></Box>
 
-      { isLoading ? <TabsSkeleton tabs={ tabs }/> : (
-        <RoutedTabs
-          tabs={ tabs }
-          tabListProps={ isMobile ? { mt: 8 } : { mt: 3, py: 5, marginBottom: 0 } }
-          rightSlot={ !isMobile && pagination?.isVisible ? <Pagination { ...pagination }/> : null }
-          stickyEnabled={ !isMobile }
-        />
-      ) }
-    </>
+      <RoutedTabs
+        tabs={ tabs }
+        tabListProps={ isMobile ? { mt: 8 } : { mt: 3, py: 5, marginBottom: 0 } }
+        isLoading={ isLoading }
+        rightSlot={ !isMobile && pagination?.isVisible ? <Pagination { ...pagination }/> : null }
+        stickyEnabled={ !isMobile }
+      />
+
+      <TokenInstanceMetadataFetcher hash={ hash } id={ id }/>
+    </MetadataUpdateProvider>
   );
 };
 
diff --git a/ui/pages/TokenTransfers.pw.tsx b/ui/pages/TokenTransfers.pw.tsx
new file mode 100644
index 0000000000..b8378a3664
--- /dev/null
+++ b/ui/pages/TokenTransfers.pw.tsx
@@ -0,0 +1,14 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { mixTokens } from 'mocks/tokens/tokenTransfer';
+import { test, expect } from 'playwright/lib';
+
+import TokenTransfers from './TokenTransfers';
+
+test('base view +@mobile', async({ render, mockTextAd, mockApiResponse }) => {
+  await mockTextAd();
+  await mockApiResponse('token_transfers_all', mixTokens, { queryParams: { type: [] } });
+  const component = await render(<Box pt={{ base: '106px', lg: 0 }}> <TokenTransfers/> </Box>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/TokenTransfers.tsx b/ui/pages/TokenTransfers.tsx
new file mode 100644
index 0000000000..e321181afb
--- /dev/null
+++ b/ui/pages/TokenTransfers.tsx
@@ -0,0 +1,86 @@
+import { Show, Hide } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { TokenType } from 'types/api/token';
+
+import { getTokenTransfersStub } from 'stubs/token';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PopoverFilter from 'ui/shared/filters/PopoverFilter';
+import TokenTypeFilter from 'ui/shared/filters/TokenTypeFilter';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import { getTokenFilterValue } from 'ui/tokens/utils';
+import TokenTransfersListItem from 'ui/tokenTransfers/TokenTransfersListItem';
+import TokenTransfersTable from 'ui/tokenTransfers/TokenTransfersTable';
+const TokenTransfers = () => {
+  const router = useRouter();
+  const [ typeFilter, setTypeFilter ] = React.useState<Array<TokenType>>(getTokenFilterValue(router.query.type) || []);
+
+  const tokenTransfersQuery = useQueryWithPages({
+    resourceName: 'token_transfers_all',
+    filters: { type: typeFilter },
+    options: {
+      placeholderData: getTokenTransfersStub(),
+    },
+  });
+
+  const handleTokenTypesChange = React.useCallback((value: Array<TokenType>) => {
+    tokenTransfersQuery.onFilterChange({ type: value });
+    setTypeFilter(value);
+  }, [ tokenTransfersQuery ]);
+
+  const content = (
+    <>
+      <Show below="lg" ssr={ false }>
+        { tokenTransfersQuery.data?.items.map((item, index) => (
+          <TokenTransfersListItem
+            key={ item.transaction_hash + item.log_index + (tokenTransfersQuery.isPlaceholderData ? index : '') }
+            isLoading={ tokenTransfersQuery.isPlaceholderData }
+            item={ item }
+          />
+        )) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <TokenTransfersTable
+          items={ tokenTransfersQuery.data?.items }
+          top={ tokenTransfersQuery.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+          isLoading={ tokenTransfersQuery.isPlaceholderData }
+        />
+      </Hide>
+    </>
+  );
+
+  const filter = (
+    <PopoverFilter contentProps={{ w: '200px' }} appliedFiltersNum={ typeFilter.length }>
+      <TokenTypeFilter<TokenType> onChange={ handleTokenTypesChange } defaultValue={ typeFilter } nftOnly={ false }/>
+    </PopoverFilter>
+  );
+
+  const actionBar = (
+    <ActionBar mt={ -6 }>
+      { filter }
+      <Pagination { ...tokenTransfersQuery.pagination }/>
+    </ActionBar>
+  );
+
+  return (
+    <>
+      <PageTitle
+        title="Token Transfers"
+        withTextAd
+      />
+      <DataListDisplay
+        isError={ tokenTransfersQuery.isError }
+        items={ tokenTransfersQuery.data?.items }
+        emptyText="There are no token transfers."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default TokenTransfers;
diff --git a/ui/pages/Tokens.pw.tsx b/ui/pages/Tokens.pw.tsx
index ce714a2fee..58c3fe6cd4 100644
--- a/ui/pages/Tokens.pw.tsx
+++ b/ui/pages/Tokens.pw.tsx
@@ -1,30 +1,17 @@
 import { Box } from '@chakra-ui/react';
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import * as textAdMock from 'mocks/ad/textAd';
 import * as tokens from 'mocks/tokens/tokenInfo';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import Tokens from './Tokens';
 
-base.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
+test.beforeEach(async({ mockTextAd }) => {
+  await mockTextAd();
 });
 
-base('base view +@mobile +@dark-mode', async({ mount, page }) => {
+test('base view +@mobile +@dark-mode', async({ render, mockApiResponse }) => {
   const allTokens = {
     items: [
       tokens.tokenInfoERC20a, tokens.tokenInfoERC20b, tokens.tokenInfoERC20c, tokens.tokenInfoERC20d,
@@ -35,6 +22,7 @@ base('base view +@mobile +@dark-mode', async({ mount, page }) => {
       holder_count: 1,
       items_count: 1,
       name: 'a',
+      market_cap: '0',
     },
   };
   const filteredTokens = {
@@ -44,40 +32,25 @@ base('base view +@mobile +@dark-mode', async({ mount, page }) => {
     next_page_params: null,
   };
 
-  const ALL_TOKENS_API_URL = buildApiUrl('tokens');
-  const FILTERED_TOKENS_API_URL = buildApiUrl('tokens') + '?q=foo';
-
-  await page.route(ALL_TOKENS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(allTokens),
-  }));
+  await mockApiResponse('tokens', allTokens);
+  await mockApiResponse('tokens', filteredTokens, { queryParams: { q: 'foo' } });
 
-  await page.route(FILTERED_TOKENS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(filteredTokens),
-  }));
-
-  const component = await mount(
-    <TestApp>
+  const component = await render(
+    <div>
       <Box h={{ base: '134px', lg: 6 }}/>
       <Tokens/>
-    </TestApp>,
+    </div>,
   );
 
   await expect(component).toHaveScreenshot();
 
   await component.getByRole('textbox', { name: 'Token name or symbol' }).focus();
-  await component.getByRole('textbox', { name: 'Token name or symbol' }).type('foo');
+  await component.getByRole('textbox', { name: 'Token name or symbol' }).fill('foo');
 
   await expect(component).toHaveScreenshot();
 });
 
-base.describe('bridged tokens', async() => {
-  const test = base.extend({
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    context: contextWithEnvs(configs.featureEnvs.bridgedTokens) as any,
-  });
-
+test.describe('bridged tokens', () => {
   const bridgedTokens = {
     items: [
       tokens.bridgedTokenA,
@@ -88,6 +61,7 @@ base.describe('bridged tokens', async() => {
       holder_count: 1,
       items_count: 1,
       name: 'a',
+      market_cap: null,
     },
   };
   const bridgedFilteredTokens = {
@@ -101,26 +75,17 @@ base.describe('bridged tokens', async() => {
       query: { tab: 'bridged' },
     },
   };
-  const BRIDGED_TOKENS_API_URL = buildApiUrl('tokens_bridged');
-
-  test.beforeEach(async({ page }) => {
-    await page.route(BRIDGED_TOKENS_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(bridgedTokens),
-    }));
-  });
 
-  test('base view', async({ mount, page }) => {
-    await page.route(BRIDGED_TOKENS_API_URL + '?chain_ids=99', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(bridgedFilteredTokens),
-    }));
+  test('base view', async({ render, page, mockApiResponse, mockEnvs }) => {
+    await mockEnvs(ENVS_MAP.bridgedTokens);
+    await mockApiResponse('tokens_bridged', bridgedTokens);
+    await mockApiResponse('tokens_bridged', bridgedFilteredTokens, { queryParams: { chain_ids: '99' } });
 
-    const component = await mount(
-      <TestApp>
+    const component = await render(
+      <div>
         <Box h={{ base: '134px', lg: 6 }}/>
         <Tokens/>
-      </TestApp>,
+      </div>,
       { hooksConfig },
     );
 
diff --git a/ui/pages/Tokens.tsx b/ui/pages/Tokens.tsx
index 2db3e0d8c7..910eac6e0a 100644
--- a/ui/pages/Tokens.tsx
+++ b/ui/pages/Tokens.tsx
@@ -26,10 +26,12 @@ import { SORT_OPTIONS, getTokenFilterValue, getBridgedChainsFilterValue } from '
 
 const TAB_LIST_PROPS = {
   marginBottom: 0,
-  py: 5,
+  pt: 6,
+  pb: 6,
   marginTop: -5,
   alignItems: 'center',
 };
+const TABS_HEIGHT = 88;
 
 const TABS_RIGHT_SLOT_PROPS = {
   ml: 8,
@@ -101,12 +103,14 @@ const Tokens = () => {
     setBridgeChains(undefined);
   }, []);
 
+  const hasMultipleTabs = bridgedTokensFeature.isEnabled;
+
   const filter = tab === 'bridged' ? (
-    <PopoverFilter isActive={ bridgeChains && bridgeChains.length > 0 } contentProps={{ maxW: '350px' }} appliedFiltersNum={ bridgeChains?.length }>
+    <PopoverFilter contentProps={{ maxW: '350px' }} appliedFiltersNum={ bridgeChains?.length }>
       <TokensBridgedChainsFilter onChange={ handleBridgeChainsChange } defaultValue={ bridgeChains }/>
     </PopoverFilter>
   ) : (
-    <PopoverFilter isActive={ tokenTypes && tokenTypes.length > 0 } contentProps={{ w: '200px' }} appliedFiltersNum={ tokenTypes?.length }>
+    <PopoverFilter contentProps={{ w: '200px' }} appliedFiltersNum={ tokenTypes?.length }>
       <TokenTypeFilter<TokenType> onChange={ handleTokenTypesChange } defaultValue={ tokenTypes } nftOnly={ false }/>
     </PopoverFilter>
   );
@@ -120,7 +124,7 @@ const Tokens = () => {
       onSearchChange={ handleSearchTermChange }
       sort={ sort }
       onSortChange={ handleSortChange }
-      inTabsSlot={ !isMobile && bridgedTokensFeature.isEnabled }
+      inTabsSlot={ !isMobile && hasMultipleTabs }
     />
   );
 
@@ -151,6 +155,7 @@ const Tokens = () => {
           onSortChange={ handleSortChange }
           actionBar={ isMobile ? actionBar : null }
           hasActiveFilters={ Boolean(searchTerm || tokenTypes) }
+          tableTop={ hasMultipleTabs ? TABS_HEIGHT : undefined }
         />
       ),
     },
@@ -165,6 +170,7 @@ const Tokens = () => {
           actionBar={ isMobile ? actionBar : null }
           hasActiveFilters={ Boolean(searchTerm || bridgeChains) }
           description={ description }
+          tableTop={ hasMultipleTabs ? TABS_HEIGHT : undefined }
         />
       ),
     } : undefined,
@@ -172,12 +178,15 @@ const Tokens = () => {
 
   return (
     <>
-      <PageTitle title="Tokens" withTextAd/>
-      { tabs.length === 1 && !isMobile && actionBar }
+      <PageTitle
+        title={ config.meta.seo.enhancedDataEnabled ? `Tokens on ${ config.chain.name }` : 'Tokens' }
+        withTextAd
+      />
+      { !hasMultipleTabs && !isMobile && actionBar }
       <RoutedTabs
         tabs={ tabs }
         tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
-        rightSlot={ !isMobile ? actionBar : null }
+        rightSlot={ hasMultipleTabs && !isMobile ? actionBar : null }
         rightSlotProps={ !isMobile ? TABS_RIGHT_SLOT_PROPS : undefined }
         stickyEnabled={ !isMobile }
         onTabChange={ handleTabChange }
diff --git a/ui/pages/Transaction.tsx b/ui/pages/Transaction.tsx
index 3078a74e2b..28d64ca3fd 100644
--- a/ui/pages/Transaction.tsx
+++ b/ui/pages/Transaction.tsx
@@ -7,12 +7,16 @@ import config from 'configs/app';
 import { useAppContext } from 'lib/contexts/app';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
 import getQueryParamString from 'lib/router/getQueryParamString';
+import { publicClient } from 'lib/web3/client';
 import TextAd from 'ui/shared/ad/TextAd';
-import EntityTags from 'ui/shared/EntityTags';
+import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
+import EntityTags from 'ui/shared/EntityTags/EntityTags';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
 import useTabIndexFromQuery from 'ui/shared/Tabs/useTabIndexFromQuery';
+import TxAssetFlows from 'ui/tx/TxAssetFlows';
+import TxBlobs from 'ui/tx/TxBlobs';
 import TxDetails from 'ui/tx/TxDetails';
 import TxDetailsDegraded from 'ui/tx/TxDetailsDegraded';
 import TxDetailsWrapped from 'ui/tx/TxDetailsWrapped';
@@ -25,6 +29,8 @@ import TxTokenTransfer from 'ui/tx/TxTokenTransfer';
 import TxUserOps from 'ui/tx/TxUserOps';
 import useTxQuery from 'ui/tx/useTxQuery';
 
+const txInterpretation = config.features.txInterpretation;
+
 const TransactionPageContent = () => {
   const router = useRouter();
   const appProps = useAppContext();
@@ -33,7 +39,7 @@ const TransactionPageContent = () => {
   const txQuery = useTxQuery();
   const { data, isPlaceholderData, isError, error, errorUpdateCount } = txQuery;
 
-  const showDegradedView = (isError || isPlaceholderData) && errorUpdateCount > 0;
+  const showDegradedView = publicClient && ((isError && error.status !== 422) || isPlaceholderData) && errorUpdateCount > 0;
 
   const tabs: Array<RoutedTab> = (() => {
     const detailsComponent = showDegradedView ?
@@ -46,6 +52,9 @@ const TransactionPageContent = () => {
         title: config.features.suave.isEnabled && data?.wrapped ? 'Confidential compute tx details' : 'Details',
         component: detailsComponent,
       },
+      txInterpretation.isEnabled && txInterpretation.provider === 'noves' ?
+        { id: 'asset_flows', title: 'Asset Flows', component: <TxAssetFlows hash={ hash }/> } :
+        undefined,
       config.features.suave.isEnabled && data?.wrapped ?
         { id: 'wrapped', title: 'Regular tx details', component: <TxDetailsWrapped data={ data.wrapped }/> } :
         undefined,
@@ -54,6 +63,9 @@ const TransactionPageContent = () => {
         { id: 'user_ops', title: 'User operations', component: <TxUserOps txQuery={ txQuery }/> } :
         undefined,
       { id: 'internal', title: 'Internal txns', component: <TxInternals txQuery={ txQuery }/> },
+      config.features.dataAvailability.isEnabled && txQuery.data?.blob_versioned_hashes?.length ?
+        { id: 'blobs', title: 'Blobs', component: <TxBlobs txQuery={ txQuery }/> } :
+        undefined,
       { id: 'logs', title: 'Logs', component: <TxLogs txQuery={ txQuery }/> },
       { id: 'state', title: 'State', component: <TxState txQuery={ txQuery }/> },
       { id: 'raw_trace', title: 'Raw trace', component: <TxRawTrace txQuery={ txQuery }/> },
@@ -65,7 +77,7 @@ const TransactionPageContent = () => {
   const tags = (
     <EntityTags
       isLoading={ isPlaceholderData }
-      tagsBefore={ [ data?.tx_tag ? { label: data.tx_tag, display_name: data.tx_tag } : undefined ] }
+      tags={ data?.transaction_tag ? [ { slug: data.transaction_tag, name: data.transaction_tag, tagType: 'private_tag' as const } ] : [] }
     />
   );
 
@@ -82,7 +94,7 @@ const TransactionPageContent = () => {
     };
   }, [ appProps.referrer ]);
 
-  const titleSecondRow = <TxSubHeading hash={ hash } hasTag={ Boolean(data?.tx_tag) }/>;
+  const titleSecondRow = <TxSubHeading hash={ hash } hasTag={ Boolean(data?.transaction_tag) } txQuery={ txQuery }/>;
 
   const content = (() => {
     if (isPlaceholderData && !showDegradedView) {
@@ -97,8 +109,10 @@ const TransactionPageContent = () => {
     return <RoutedTabs tabs={ tabs }/>;
   })();
 
-  if (error?.status === 422) {
-    throwOnResourceLoadError({ resource: 'tx', error, isError: true });
+  if (isError && !showDegradedView) {
+    if (isCustomAppError(error)) {
+      throwOnResourceLoadError({ resource: 'tx', error, isError: true });
+    }
   }
 
   return (
diff --git a/ui/pages/Transactions.tsx b/ui/pages/Transactions.tsx
index 2d7027aa47..c3b5146b38 100644
--- a/ui/pages/Transactions.tsx
+++ b/ui/pages/Transactions.tsx
@@ -1,36 +1,47 @@
+import { Flex } from '@chakra-ui/react';
+import capitalize from 'lodash/capitalize';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { RoutedTab } from 'ui/shared/Tabs/types';
 
 import config from 'configs/app';
-import useHasAccount from 'lib/hooks/useHasAccount';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useNewTxsSocket from 'lib/hooks/useNewTxsSocket';
+import getNetworkValidationActionText from 'lib/networks/getNetworkValidationActionText';
+import getQueryParamString from 'lib/router/getQueryParamString';
 import { TX } from 'stubs/tx';
 import { generateListStub } from 'stubs/utils';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
+import useIsAuth from 'ui/snippets/auth/useIsAuth';
+import TxsStats from 'ui/txs/TxsStats';
 import TxsWatchlist from 'ui/txs/TxsWatchlist';
 import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
 
 const TAB_LIST_PROPS = {
   marginBottom: 0,
-  py: 5,
+  pt: 6,
+  pb: 6,
   marginTop: -5,
 };
+const TABS_HEIGHT = 88;
 
 const Transactions = () => {
-  const verifiedTitle = config.chain.verificationType === 'validation' ? 'Validated' : 'Mined';
+  const verifiedTitle = capitalize(getNetworkValidationActionText());
   const router = useRouter();
   const isMobile = useIsMobile();
-  const txsQuery = useQueryWithPages({
-    resourceName: router.query.tab === 'pending' ? 'txs_pending' : 'txs_validated',
-    filters: { filter: router.query.tab === 'pending' ? 'pending' : 'validated' },
+  const tab = getQueryParamString(router.query.tab);
+
+  const txsValidatedQuery = useQueryWithPages({
+    resourceName: 'txs_validated',
+    filters: { filter: 'validated' },
     options: {
-      enabled: !router.query.tab || router.query.tab === 'validated' || router.query.tab === 'pending',
+      enabled: !tab || tab === 'validated',
       placeholderData: generateListStub<'txs_validated'>(TX, 50, { next_page_params: {
         block_number: 9005713,
         index: 5,
@@ -40,10 +51,36 @@ const Transactions = () => {
     },
   });
 
+  const txsPendingQuery = useQueryWithPages({
+    resourceName: 'txs_pending',
+    filters: { filter: 'pending' },
+    options: {
+      enabled: tab === 'pending',
+      placeholderData: generateListStub<'txs_pending'>(TX, 50, { next_page_params: {
+        inserted_at: '2024-02-05T07:04:47.749818Z',
+        hash: '0x00',
+        filter: 'pending',
+      } }),
+    },
+  });
+
+  const txsWithBlobsQuery = useQueryWithPages({
+    resourceName: 'txs_with_blobs',
+    filters: { type: 'blob_transaction' },
+    options: {
+      enabled: config.features.dataAvailability.isEnabled && tab === 'blob_txs',
+      placeholderData: generateListStub<'txs_with_blobs'>(TX, 50, { next_page_params: {
+        block_number: 10602877,
+        index: 8,
+        items_count: 50,
+      } }),
+    },
+  });
+
   const txsWatchlistQuery = useQueryWithPages({
     resourceName: 'txs_watchlist',
     options: {
-      enabled: router.query.tab === 'watchlist',
+      enabled: tab === 'watchlist',
       placeholderData: generateListStub<'txs_watchlist'>(TX, 50, { next_page_params: {
         block_number: 9005713,
         index: 5,
@@ -54,45 +91,103 @@ const Transactions = () => {
 
   const { num, socketAlert } = useNewTxsSocket();
 
-  const hasAccount = useHasAccount();
+  const isAuth = useIsAuth();
 
   const tabs: Array<RoutedTab> = [
     {
       id: 'validated',
       title: verifiedTitle,
       component:
-        <TxsWithFrontendSorting query={ txsQuery } showSocketInfo={ txsQuery.pagination.page === 1 } socketInfoNum={ num } socketInfoAlert={ socketAlert }/> },
+        <TxsWithFrontendSorting
+          query={ txsValidatedQuery }
+          showSocketInfo={ txsValidatedQuery.pagination.page === 1 }
+          socketInfoNum={ num }
+          socketInfoAlert={ socketAlert }
+          top={ TABS_HEIGHT }
+        /> },
     {
       id: 'pending',
       title: 'Pending',
       component: (
         <TxsWithFrontendSorting
-          query={ txsQuery }
+          query={ txsPendingQuery }
           showBlockInfo={ false }
-          showSocketInfo={ txsQuery.pagination.page === 1 }
+          showSocketInfo={ txsPendingQuery.pagination.page === 1 }
           socketInfoNum={ num }
           socketInfoAlert={ socketAlert }
+          top={ TABS_HEIGHT }
         />
       ),
     },
-    hasAccount ? {
+    config.features.dataAvailability.isEnabled && {
+      id: 'blob_txs',
+      title: 'Blob txns',
+      component: (
+        <TxsWithFrontendSorting
+          query={ txsWithBlobsQuery }
+          showSocketInfo={ txsWithBlobsQuery.pagination.page === 1 }
+          socketInfoNum={ num }
+          socketInfoAlert={ socketAlert }
+          top={ TABS_HEIGHT }
+        />
+      ),
+    },
+    isAuth ? {
       id: 'watchlist',
       title: 'Watch list',
       component: <TxsWatchlist query={ txsWatchlistQuery }/>,
     } : undefined,
   ].filter(Boolean);
 
-  const pagination = router.query.tab === 'watchlist' ? txsWatchlistQuery.pagination : txsQuery.pagination;
+  const pagination = (() => {
+    switch (tab) {
+      case 'pending': return txsPendingQuery.pagination;
+      case 'watchlist': return txsWatchlistQuery.pagination;
+      case 'blob_txs': return txsWithBlobsQuery.pagination;
+      default: return txsValidatedQuery.pagination;
+    }
+  })();
+
+  const rightSlot = (() => {
+    if (isMobile) {
+      return null;
+    }
+
+    const isAdvancedFilterEnabled = config.features.advancedFilter.isEnabled;
+
+    if (!isAdvancedFilterEnabled && !pagination.isVisible) {
+      return null;
+    }
+
+    return (
+      <Flex alignItems="center" gap={ 6 }>
+        { isAdvancedFilterEnabled && (
+          <LinkInternal
+            href="/advanced-filter"
+            alignItems="center"
+            display="flex"
+            gap={ 1 }
+          >
+            <IconSvg name="filter" boxSize={ 5 }/>
+            Advanced filter
+          </LinkInternal>
+        ) }
+        { pagination.isVisible && <Pagination my={ 1 } { ...pagination }/> }
+      </Flex>
+    );
+  })();
 
   return (
     <>
-      <PageTitle title="Transactions" withTextAd/>
+      <PageTitle
+        title={ config.meta.seo.enhancedDataEnabled ? `${ config.chain.name } transactions` : 'Transactions' }
+        withTextAd
+      />
+      <TxsStats/>
       <RoutedTabs
         tabs={ tabs }
         tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
-        rightSlot={ (
-          pagination.isVisible && !isMobile ? <Pagination my={ 1 } { ...pagination }/> : null
-        ) }
+        rightSlot={ rightSlot }
         stickyEnabled={ !isMobile }
       />
     </>
diff --git a/ui/pages/UnverifiedEmail.tsx b/ui/pages/UnverifiedEmail.tsx
deleted file mode 100644
index 125715b732..0000000000
--- a/ui/pages/UnverifiedEmail.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { Box, Text, Button, Heading, chakra } from '@chakra-ui/react';
-import React from 'react';
-
-import useApiFetch from 'lib/api/useApiFetch';
-import dayjs from 'lib/date/dayjs';
-import getErrorObjPayload from 'lib/errors/getErrorObjPayload';
-import getErrorObjStatusCode from 'lib/errors/getErrorObjStatusCode';
-import useToast from 'lib/hooks/useToast';
-import * as mixpanel from 'lib/mixpanel/index';
-import IconSvg from 'ui/shared/IconSvg';
-
-interface Props {
-  email?: string; // TODO: obtain email from API
-}
-
-const UnverifiedEmail = ({ email }: Props) => {
-  const apiFetch = useApiFetch();
-  const [ isLoading, setIsLoading ] = React.useState(false);
-  const toast = useToast();
-
-  const handleButtonClick = React.useCallback(async() => {
-    const toastId = 'resend-email-error';
-
-    setIsLoading(true);
-
-    mixpanel.logEvent(
-      mixpanel.EventTypes.ACCOUNT_ACCESS,
-      { Action: 'Verification email resent' },
-    );
-
-    try {
-      await apiFetch('email_resend');
-
-      toast({
-        id: toastId,
-        position: 'top-right',
-        title: 'Success',
-        description: 'Email successfully resent.',
-        status: 'success',
-        variant: 'subtle',
-        isClosable: true,
-      });
-    } catch (error) {
-      const statusCode = getErrorObjStatusCode(error);
-
-      const message = (() => {
-        if (statusCode !== 429) {
-          return;
-        }
-
-        const payload = getErrorObjPayload<{ seconds_before_next_resend: number }>(error);
-        if (!payload) {
-          return;
-        }
-
-        if (!payload.seconds_before_next_resend) {
-          return;
-        }
-
-        const timeUntilNextResend = dayjs().add(payload.seconds_before_next_resend, 'seconds').fromNow();
-        return `Email resend is available ${ timeUntilNextResend }.`;
-      })();
-
-      !toast.isActive(toastId) && toast({
-        id: toastId,
-        position: 'top-right',
-        title: 'Error',
-        description: message || 'Something went wrong. Try again later.',
-        status: 'error',
-        variant: 'subtle',
-        isClosable: true,
-      });
-    }
-
-    setIsLoading(false);
-  }, [ apiFetch, toast ]);
-
-  return (
-    <Box>
-      <IconSvg name="email-sent" width="180px" height="auto" mt="52px"/>
-      <Heading mt={ 6 } size="2xl">Verify your email address</Heading>
-      <Text variant="secondary" mt={ 3 }>
-        <span>Please confirm your email address to use the My Account feature. A confirmation email was sent to </span>
-        <span>{ email || 'your email address' }</span>
-        <span> on signup. { `Didn't receive?` }</span>
-      </Text>
-      <Button
-        mt={ 8 }
-        size="lg"
-        variant="outline"
-        isLoading={ isLoading }
-        loadingText="Resending..."
-        onClick={ handleButtonClick }
-      >
-        Resend verification email
-      </Button>
-    </Box>
-  );
-};
-
-export default chakra(UnverifiedEmail);
diff --git a/ui/pages/UserOp.pw.tsx b/ui/pages/UserOp.pw.tsx
index 8b7b114c8c..31afb90040 100644
--- a/ui/pages/UserOp.pw.tsx
+++ b/ui/pages/UserOp.pw.tsx
@@ -1,73 +1,38 @@
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { userOpData } from 'mocks/userOps/userOp';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect, devices } from 'playwright/lib';
 
 import UserOp from './UserOp';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.userOps) as any,
-});
-
-const USER_OP_API_URL = buildApiUrl('user_op', { hash: userOpData.hash });
-
-test('base view', async({ mount, page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(USER_OP_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(userOpData),
-  }));
+const hooksConfig = {
+  router: {
+    query: { hash: userOpData.hash },
+    isReady: true,
+  },
+};
 
-  const component = await mount(
-    <TestApp>
-      <UserOp/>
-    </TestApp>,
-    { hooksConfig: {
-      router: {
-        query: { hash: userOpData.hash },
-        isReady: true,
-      },
-    } },
-  );
+test.beforeEach(async({ mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.userOps);
+});
 
+test('base view', async({ render, mockTextAd, mockApiResponse }) => {
+  await mockTextAd();
+  await mockApiResponse('user_op', userOpData, { pathParams: { hash: userOpData.hash } });
+  const component = await render(<UserOp/>, { hooksConfig });
+  await component.getByText('View details').click();
   await expect(component).toHaveScreenshot();
 });
 
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  test('base view', async({ mount, page }) => {
-    await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-      status: 200,
-      body: '',
-    }));
-
-    await page.route(USER_OP_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(userOpData),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <UserOp/>
-      </TestApp>,
-      { hooksConfig: {
-        router: {
-          query: { hash: userOpData.hash },
-          isReady: true,
-        },
-      } },
-    );
-
+  test('base view', async({ render, mockTextAd, mockApiResponse }) => {
+    await mockTextAd();
+    await mockApiResponse('user_op', userOpData, { pathParams: { hash: userOpData.hash } });
+    const component = await render(<UserOp/>, { hooksConfig });
+    await component.getByText('View details').click();
     await expect(component).toHaveScreenshot();
   });
 });
diff --git a/ui/pages/UserOp.tsx b/ui/pages/UserOp.tsx
index 60b59ac99d..92eebad927 100644
--- a/ui/pages/UserOp.tsx
+++ b/ui/pages/UserOp.tsx
@@ -1,4 +1,4 @@
-import { inRange } from 'lodash';
+import _inRange from 'lodash/inRange';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -13,7 +13,6 @@ import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { USER_OP } from 'stubs/userOps';
 import TextAd from 'ui/shared/ad/TextAd';
-import UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
@@ -23,6 +22,7 @@ import TxTokenTransfer from 'ui/tx/TxTokenTransfer';
 import useTxQuery from 'ui/tx/useTxQuery';
 import UserOpDetails from 'ui/userOp/UserOpDetails';
 import UserOpRaw from 'ui/userOp/UserOpRaw';
+import UserOpSubHeading from 'ui/userOp/UserOpSubHeading';
 
 const UserOp = () => {
   const router = useRouter();
@@ -43,7 +43,11 @@ const UserOp = () => {
     if (!userOpQuery.data) {
       return true;
     } else {
-      if (inRange(Number(tt.log_index), userOpQuery.data?.user_logs_start_index, userOpQuery.data?.user_logs_start_index + userOpQuery.data?.user_logs_count)) {
+      if (_inRange(
+        Number(tt.log_index),
+        userOpQuery.data?.user_logs_start_index,
+        userOpQuery.data?.user_logs_start_index + userOpQuery.data?.user_logs_count,
+      )) {
         return true;
       }
       return false;
@@ -54,7 +58,7 @@ const UserOp = () => {
     if (!userOpQuery.data) {
       return true;
     } else {
-      if (inRange(log.index, userOpQuery.data?.user_logs_start_index, userOpQuery.data?.user_logs_start_index + userOpQuery.data?.user_logs_count)) {
+      if (_inRange(log.index, userOpQuery.data?.user_logs_start_index, userOpQuery.data?.user_logs_start_index + userOpQuery.data?.user_logs_count)) {
         return true;
       }
       return false;
@@ -90,7 +94,7 @@ const UserOp = () => {
   throwOnAbsentParamError(hash);
   throwOnResourceLoadError(userOpQuery);
 
-  const titleSecondRow = <UserOpEntity hash={ hash } noLink noCopy={ false } fontWeight={ 500 } fontFamily="heading"/>;
+  const titleSecondRow = <UserOpSubHeading hash={ hash }/>;
 
   return (
     <>
diff --git a/ui/pages/UserOps.pw.tsx b/ui/pages/UserOps.pw.tsx
index 4d0cb8fe1d..2a241f1d52 100644
--- a/ui/pages/UserOps.pw.tsx
+++ b/ui/pages/UserOps.pw.tsx
@@ -1,40 +1,16 @@
 import { Box } from '@chakra-ui/react';
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { userOpsData } from 'mocks/userOps/userOps';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import UserOps from './UserOps';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.userOps) as any,
-});
-
-const USER_OPS_API_URL = buildApiUrl('user_ops');
-
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(USER_OPS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(userOpsData),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Box pt={{ base: '106px', lg: 0 }}>
-        <UserOps/>
-      </Box>
-    </TestApp>,
-  );
-
+test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
+  await mockEnvs(ENVS_MAP.userOps);
+  await mockTextAd();
+  await mockApiResponse('user_ops', userOpsData);
+  const component = await render(<Box pt={{ base: '106px', lg: 0 }}> <UserOps/> </Box>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/pages/UserOps.tsx b/ui/pages/UserOps.tsx
index 189421d712..c91eaeff26 100644
--- a/ui/pages/UserOps.tsx
+++ b/ui/pages/UserOps.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import config from 'configs/app';
 import { USER_OPS_ITEM } from 'stubs/userOps';
 import { generateListStub } from 'stubs/utils';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -19,7 +20,10 @@ const UserOps = () => {
 
   return (
     <>
-      <PageTitle title="User operations" withTextAd/>
+      <PageTitle
+        title={ config.meta.seo.enhancedDataEnabled ? `${ config.chain.name } user operations` : 'User operations' }
+        withTextAd
+      />
       <UserOpsContent query={ query }/>
     </>
   );
diff --git a/ui/pages/ValidatorsBlackfort.pw.tsx b/ui/pages/ValidatorsBlackfort.pw.tsx
new file mode 100644
index 0000000000..05df5a40a3
--- /dev/null
+++ b/ui/pages/ValidatorsBlackfort.pw.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import * as validatorsMock from 'mocks/validators/blackfort';
+import { test, expect } from 'playwright/lib';
+
+import Validators from './ValidatorsBlackfort';
+
+const chainType = 'blackfort';
+
+test('base view +@mobile', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE', chainType ],
+  ]);
+  await mockApiResponse('validators_blackfort', validatorsMock.validatorsResponse);
+  await mockApiResponse('validators_blackfort_counters', validatorsMock.validatorsCountersResponse);
+  await mockTextAd();
+
+  const component = await render(<Validators/>);
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/ValidatorsBlackfort.tsx b/ui/pages/ValidatorsBlackfort.tsx
new file mode 100644
index 0000000000..32b45aa872
--- /dev/null
+++ b/ui/pages/ValidatorsBlackfort.tsx
@@ -0,0 +1,106 @@
+import { Box, Hide, HStack, Show } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type {
+  ValidatorsBlackfortSorting,
+  ValidatorsBlackfortSortingField,
+  ValidatorsBlackfortSortingValue,
+} from 'types/api/validators';
+
+import config from 'configs/app';
+import { generateListStub } from 'stubs/utils';
+import { VALIDATOR_BLACKFORT } from 'stubs/validators';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import getSortParamsFromValue from 'ui/shared/sort/getSortParamsFromValue';
+import getSortValueFromQuery from 'ui/shared/sort/getSortValueFromQuery';
+import Sort from 'ui/shared/sort/Sort';
+import { VALIDATORS_BLACKFORT_SORT_OPTIONS } from 'ui/validatorsBlackfort/utils';
+import ValidatorsCounters from 'ui/validatorsBlackfort/ValidatorsCounters';
+import ValidatorsList from 'ui/validatorsBlackfort/ValidatorsList';
+import ValidatorsTable from 'ui/validatorsBlackfort/ValidatorsTable';
+
+const ValidatorsBlackfort = () => {
+  const router = useRouter();
+  const [ sort, setSort ] =
+    React.useState<ValidatorsBlackfortSortingValue | undefined>(
+      getSortValueFromQuery<ValidatorsBlackfortSortingValue>(router.query, VALIDATORS_BLACKFORT_SORT_OPTIONS),
+    );
+
+  const { isError, isPlaceholderData, data, pagination, onSortingChange } = useQueryWithPages({
+    resourceName: 'validators_blackfort',
+    sorting: getSortParamsFromValue<ValidatorsBlackfortSortingValue, ValidatorsBlackfortSortingField, ValidatorsBlackfortSorting['order']>(sort),
+    options: {
+      enabled: config.features.validators.isEnabled,
+      placeholderData: generateListStub<'validators_blackfort'>(
+        VALIDATOR_BLACKFORT,
+        50,
+        { next_page_params: null },
+      ),
+    },
+  });
+
+  const handleSortChange = React.useCallback((value?: ValidatorsBlackfortSortingValue) => {
+    setSort(value);
+    onSortingChange(getSortParamsFromValue(value));
+  }, [ onSortingChange ]);
+
+  const sortButton = (
+    <Sort
+      name="validators_sorting"
+      defaultValue={ sort }
+      options={ VALIDATORS_BLACKFORT_SORT_OPTIONS }
+      onChange={ handleSortChange }
+    />
+  );
+
+  const actionBar = (
+    <>
+      <HStack spacing={ 3 } mb={ 6 } display={{ base: 'flex', lg: 'none' }}>
+        { sortButton }
+      </HStack>
+      { pagination.isVisible && (
+        <ActionBar mt={ -6 }>
+          <Pagination ml="auto" { ...pagination }/>
+        </ActionBar>
+      ) }
+    </>
+  );
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        <ValidatorsList data={ data.items } isLoading={ isPlaceholderData }/>
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <ValidatorsTable
+          data={ data.items }
+          sort={ sort }
+          setSorting={ handleSortChange }
+          isLoading={ isPlaceholderData }
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+        />
+      </Hide>
+    </>
+  ) : null;
+
+  return (
+    <Box>
+      <PageTitle title="Validators" withTextAd/>
+      <ValidatorsCounters/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no validators."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </Box>
+  );
+};
+
+export default ValidatorsBlackfort;
diff --git a/ui/pages/ValidatorsStability.pw.tsx b/ui/pages/ValidatorsStability.pw.tsx
new file mode 100644
index 0000000000..fcd3467754
--- /dev/null
+++ b/ui/pages/ValidatorsStability.pw.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import * as validatorsMock from 'mocks/validators/stability';
+import { test, expect } from 'playwright/lib';
+
+import Validators from './ValidatorsStability';
+
+const chainType = 'stability';
+
+test('base view +@mobile', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE', chainType ],
+  ]);
+  await mockApiResponse('validators_stability', validatorsMock.validatorsResponse);
+  await mockApiResponse('validators_stability_counters', validatorsMock.validatorsCountersResponse);
+  await mockTextAd();
+
+  const component = await render(<Validators/>);
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/ValidatorsStability.tsx b/ui/pages/ValidatorsStability.tsx
new file mode 100644
index 0000000000..8b518b4356
--- /dev/null
+++ b/ui/pages/ValidatorsStability.tsx
@@ -0,0 +1,165 @@
+import { Box, Hide, HStack, Show } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type {
+  ValidatorsStabilityFilters,
+  ValidatorsStabilitySorting,
+  ValidatorsStabilitySortingField,
+  ValidatorsStabilitySortingValue,
+} from 'types/api/validators';
+
+import config from 'configs/app';
+// import useDebounce from 'lib/hooks/useDebounce';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import { apos } from 'lib/html-entities';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { generateListStub } from 'stubs/utils';
+import { VALIDATOR_STABILITY } from 'stubs/validators';
+import ActionBar from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+// import FilterInput from 'ui/shared/filters/FilterInput';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import getSortParamsFromValue from 'ui/shared/sort/getSortParamsFromValue';
+import getSortValueFromQuery from 'ui/shared/sort/getSortValueFromQuery';
+import Sort from 'ui/shared/sort/Sort';
+import { VALIDATORS_STABILITY_SORT_OPTIONS } from 'ui/validatorsStability/utils';
+import ValidatorsCounters from 'ui/validatorsStability/ValidatorsCounters';
+import ValidatorsFilter from 'ui/validatorsStability/ValidatorsFilter';
+import ValidatorsList from 'ui/validatorsStability/ValidatorsList';
+import ValidatorsTable from 'ui/validatorsStability/ValidatorsTable';
+
+const ValidatorsStability = () => {
+  const router = useRouter();
+  // const [ searchTerm, setSearchTerm ] = React.useState(getQueryParamString(router.query.address_hash) || undefined);
+  const [ statusFilter, setStatusFilter ] =
+    React.useState(getQueryParamString(router.query.state_filter) as ValidatorsStabilityFilters['state_filter'] || undefined);
+  const [ sort, setSort ] = React.useState<ValidatorsStabilitySortingValue | undefined>(
+    getSortValueFromQuery<ValidatorsStabilitySortingValue>(router.query, VALIDATORS_STABILITY_SORT_OPTIONS),
+  );
+
+  // const debouncedSearchTerm = useDebounce(searchTerm || '', 300);
+
+  const isMobile = useIsMobile();
+
+  const { isError, isPlaceholderData, data, pagination, onFilterChange, onSortingChange } = useQueryWithPages({
+    resourceName: 'validators_stability',
+    filters: {
+      // address_hash: debouncedSearchTerm,
+      state_filter: statusFilter,
+    },
+    sorting: getSortParamsFromValue<ValidatorsStabilitySortingValue, ValidatorsStabilitySortingField, ValidatorsStabilitySorting['order']>(sort),
+    options: {
+      enabled: config.features.validators.isEnabled,
+      placeholderData: generateListStub<'validators_stability'>(
+        VALIDATOR_STABILITY,
+        50,
+        { next_page_params: null },
+      ),
+    },
+  });
+
+  // const handleSearchTermChange = React.useCallback((value: string) => {
+  //   onFilterChange({
+  //     address_hash: value,
+  //     state_filter: statusFilter
+  //   });
+  //   setSearchTerm(value);
+  // }, [ statusFilter, onFilterChange ]);
+
+  const handleStateFilterChange = React.useCallback((value: string | Array<string>) => {
+    if (Array.isArray(value)) {
+      return;
+    }
+
+    const state = value === 'all' ? undefined : value as ValidatorsStabilityFilters['state_filter'];
+
+    onFilterChange({
+      // address_hash: debouncedSearchTerm,
+      state_filter: state,
+    });
+    setStatusFilter(state);
+  }, [ onFilterChange ]);
+
+  const handleSortChange = React.useCallback((value?: ValidatorsStabilitySortingValue) => {
+    setSort(value);
+    onSortingChange(getSortParamsFromValue(value));
+  }, [ onSortingChange ]);
+
+  const filterMenu =
+    <ValidatorsFilter onChange={ handleStateFilterChange } defaultValue={ statusFilter } hasActiveFilter={ Boolean(statusFilter) }/>;
+
+  // const filterInput = (
+  //   <FilterInput
+  //     w={{ base: '100%', lg: '350px' }}
+  //     size="xs"
+  //     onChange={ handleSearchTermChange }
+  //     placeholder="Search by validator's address hash"
+  //     initialValue={ searchTerm }
+  //   />
+  // );
+
+  const sortButton = (
+    <Sort
+      name="validators_sorting"
+      defaultValue={ sort }
+      options={ VALIDATORS_STABILITY_SORT_OPTIONS }
+      onChange={ handleSortChange }
+    />
+  );
+
+  const actionBar = (
+    <>
+      <HStack spacing={ 3 } mb={ 6 } display={{ base: 'flex', lg: 'none' }}>
+        { filterMenu }
+        { sortButton }
+        { /* { filterInput } */ }
+      </HStack>
+      { (!isMobile || pagination.isVisible) && (
+        <ActionBar mt={ -6 }>
+          <HStack spacing={ 3 } display={{ base: 'none', lg: 'flex' }}>
+            { filterMenu }
+            { /* { filterInput } */ }
+          </HStack>
+          <Pagination ml="auto" { ...pagination }/>
+        </ActionBar>
+      ) }
+    </>
+  );
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        <ValidatorsList data={ data.items } isLoading={ isPlaceholderData }/>
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <ValidatorsTable data={ data.items } sort={ sort } setSorting={ handleSortChange } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  return (
+    <Box>
+      <PageTitle title="Validators" withTextAd/>
+      <ValidatorsCounters/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no validators."
+        filterProps={{
+          emptyFilteredText: `Couldn${ apos }t find any validator that matches your query.`,
+          hasActiveFilters: Boolean(
+            // searchTerm ||
+            statusFilter,
+          ),
+        }}
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </Box>
+  );
+};
+
+export default ValidatorsStability;
diff --git a/ui/pages/VerifiedAddresses.pw.tsx b/ui/pages/VerifiedAddresses.pw.tsx
index 3c881b21d6..6a147c6cc0 100644
--- a/ui/pages/VerifiedAddresses.pw.tsx
+++ b/ui/pages/VerifiedAddresses.pw.tsx
@@ -1,69 +1,48 @@
-import { test, expect } from '@playwright/experimental-ct-react';
+import type { BrowserContext } from '@playwright/test';
 import React from 'react';
 
 import * as mocks from 'mocks/account/verifiedAddresses';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import * as profileMock from 'mocks/user/profile';
+import { contextWithAuth } from 'playwright/fixtures/auth';
+import { test as base, expect } from 'playwright/lib';
 
 import VerifiedAddresses from './VerifiedAddresses';
 
-const VERIFIED_ADDRESS_URL = buildApiUrl('verified_addresses', { chainId: '1' });
-const TOKEN_INFO_APPLICATIONS_URL = buildApiUrl('token_info_applications', { chainId: '1', id: undefined });
-
-test.beforeEach(async({ context }) => {
-  await context.route(mocks.TOKEN_INFO_APPLICATION_BASE.iconUrl, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
+const test = base.extend<{ context: BrowserContext }>({
+  context: contextWithAuth,
 });
 
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(VERIFIED_ADDRESS_URL, (route) => route.fulfill({
-    body: JSON.stringify(mocks.VERIFIED_ADDRESS_RESPONSE.DEFAULT),
-  }));
-
-  await page.route(TOKEN_INFO_APPLICATIONS_URL, (route) => route.fulfill({
-    body: JSON.stringify(mocks.TOKEN_INFO_APPLICATIONS_RESPONSE.DEFAULT),
-  }));
+test.beforeEach(async({ mockAssetResponse }) => {
+  await mockAssetResponse(mocks.TOKEN_INFO_APPLICATION_BASE.iconUrl, './playwright/mocks/image_s.jpg');
+});
 
-  const component = await mount(
-    <TestApp>
-      <VerifiedAddresses/>
-    </TestApp>,
-  );
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('verified_addresses', mocks.VERIFIED_ADDRESS_RESPONSE.DEFAULT, { pathParams: { chainId: '1' } });
+  await mockApiResponse('token_info_applications', mocks.TOKEN_INFO_APPLICATIONS_RESPONSE.DEFAULT, { pathParams: { chainId: '1', id: undefined } });
+  await mockApiResponse('user_info', profileMock.base);
 
+  const component = await render(<VerifiedAddresses/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('address verification flow', async({ mount, page }) => {
-  const CHECK_ADDRESS_URL = buildApiUrl('address_verification', { chainId: '1', type: ':prepare' });
-  const VERIFY_ADDRESS_URL = buildApiUrl('address_verification', { chainId: '1', type: ':verify' });
+test('user without email', async({ render, mockApiResponse }) => {
+  await mockApiResponse('verified_addresses', mocks.VERIFIED_ADDRESS_RESPONSE.DEFAULT, { pathParams: { chainId: '1' } });
+  await mockApiResponse('token_info_applications', mocks.TOKEN_INFO_APPLICATIONS_RESPONSE.DEFAULT, { pathParams: { chainId: '1', id: undefined } });
+  await mockApiResponse('user_info', profileMock.withoutEmail);
 
-  await page.route(VERIFIED_ADDRESS_URL, (route) => route.fulfill({
-    body: JSON.stringify(mocks.VERIFIED_ADDRESS_RESPONSE.DEFAULT),
-  }));
+  const component = await render(<VerifiedAddresses/>);
 
-  await page.route(TOKEN_INFO_APPLICATIONS_URL, (route) => route.fulfill({
-    body: JSON.stringify(mocks.TOKEN_INFO_APPLICATIONS_RESPONSE.DEFAULT),
-  }));
+  await expect(component).toHaveScreenshot();
+});
 
-  await page.route(CHECK_ADDRESS_URL, (route) => route.fulfill({
-    body: JSON.stringify(mocks.ADDRESS_CHECK_RESPONSE.SUCCESS),
-  }));
+test('address verification flow', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse('verified_addresses', mocks.VERIFIED_ADDRESS_RESPONSE.DEFAULT, { pathParams: { chainId: '1' } });
+  await mockApiResponse('token_info_applications', mocks.TOKEN_INFO_APPLICATIONS_RESPONSE.DEFAULT, { pathParams: { chainId: '1', id: undefined } });
+  await mockApiResponse('address_verification', mocks.ADDRESS_CHECK_RESPONSE.SUCCESS as never, { pathParams: { chainId: '1', type: ':prepare' } });
+  await mockApiResponse('address_verification', mocks.ADDRESS_VERIFY_RESPONSE.SUCCESS as never, { pathParams: { chainId: '1', type: ':verify' } });
+  await mockApiResponse('user_info', profileMock.base);
 
-  await page.route(VERIFY_ADDRESS_URL, (route) => {
-    return route.fulfill({
-      body: JSON.stringify(mocks.ADDRESS_VERIFY_RESPONSE.SUCCESS),
-    });
-  });
-
-  await mount(
-    <TestApp>
-      <VerifiedAddresses/>
-    </TestApp>,
-  );
+  await render(<VerifiedAddresses/>);
 
   // open modal
   await page.getByRole('button', { name: /add address/i }).click();
@@ -74,6 +53,7 @@ test('address verification flow', async({ mount, page }) => {
   await page.getByRole('button', { name: /continue/i }).click();
 
   // fill second step
+  await page.getByText('Sign manually').click();
   const signatureInput = page.getByLabel(/signature hash/i);
   await signatureInput.fill(mocks.SIGNATURE);
   await page.getByRole('button', { name: /verify/i }).click();
@@ -84,33 +64,20 @@ test('address verification flow', async({ mount, page }) => {
   await expect(page).toHaveScreenshot();
 });
 
-test('application update flow', async({ mount, page }) => {
-  const TOKEN_INFO_APPLICATION_URL = buildApiUrl('token_info_applications', { chainId: '1', id: mocks.TOKEN_INFO_APPLICATION.UPDATED_ITEM.id });
-  const FORM_CONFIG_URL = buildApiUrl('token_info_applications_config', { chainId: '1' });
-
-  await page.route(VERIFIED_ADDRESS_URL, (route) => route.fulfill({
-    body: JSON.stringify(mocks.VERIFIED_ADDRESS_RESPONSE.DEFAULT),
-  }));
-
-  await page.route(TOKEN_INFO_APPLICATIONS_URL, (route) => route.fulfill({
-    body: JSON.stringify(mocks.TOKEN_INFO_APPLICATIONS_RESPONSE.FOR_UPDATE),
-  }));
+test('application update flow', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse('verified_addresses', mocks.VERIFIED_ADDRESS_RESPONSE.DEFAULT, { pathParams: { chainId: '1' } });
+  await mockApiResponse('token_info_applications', mocks.TOKEN_INFO_APPLICATIONS_RESPONSE.FOR_UPDATE, { pathParams: { chainId: '1', id: undefined } });
+  await mockApiResponse('user_info', profileMock.base);
+  await mockApiResponse('token_info_applications_config', mocks.TOKEN_INFO_FORM_CONFIG, { pathParams: { chainId: '1' } });
 
-  await page.route(FORM_CONFIG_URL, (route) => route.fulfill({
-    body: JSON.stringify(mocks.TOKEN_INFO_FORM_CONFIG),
-  }));
-
-  // PUT request
-  await page.route(TOKEN_INFO_APPLICATION_URL, (route) => route.fulfill({
-    body: JSON.stringify(mocks.TOKEN_INFO_APPLICATION.UPDATED_ITEM),
-  }));
-
-  await mount(
-    <TestApp>
-      <VerifiedAddresses/>
-    </TestApp>,
+  await mockApiResponse(
+    'token_info_applications',
+    mocks.TOKEN_INFO_APPLICATION.UPDATED_ITEM as never, // this mock is for PUT request
+    { pathParams: { chainId: '1', id: mocks.TOKEN_INFO_APPLICATION.UPDATED_ITEM.id } },
   );
 
+  await render(<VerifiedAddresses/>);
+
   // open form
   await page.locator('tr').filter({ hasText: 'waiting for update' }).locator('button[aria-label="edit"]').click();
 
diff --git a/ui/pages/VerifiedAddresses.tsx b/ui/pages/VerifiedAddresses.tsx
index 76a2134829..9cbc994d9e 100644
--- a/ui/pages/VerifiedAddresses.tsx
+++ b/ui/pages/VerifiedAddresses.tsx
@@ -7,7 +7,6 @@ import type { VerifiedAddress, TokenInfoApplication, TokenInfoApplications, Veri
 
 import config from 'configs/app';
 import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
-import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
 import { PAGE_TYPE_DICT } from 'lib/mixpanel/getPageType';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { TOKEN_INFO_APPLICATION, VERIFIED_ADDRESS } from 'stubs/account';
@@ -16,7 +15,10 @@ import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import AdminSupportText from 'ui/shared/texts/AdminSupportText';
+import useProfileQuery from 'ui/snippets/auth/useProfileQuery';
+import useRedirectForInvalidAuthToken from 'ui/snippets/auth/useRedirectForInvalidAuthToken';
 import TokenInfoForm from 'ui/tokenInfo/TokenInfoForm';
+import VerifiedAddressesEmailAlert from 'ui/verifiedAddresses/VerifiedAddressesEmailAlert';
 import VerifiedAddressesListItem from 'ui/verifiedAddresses/VerifiedAddressesListItem';
 import VerifiedAddressesTable from 'ui/verifiedAddresses/VerifiedAddressesTable';
 
@@ -37,16 +39,20 @@ const VerifiedAddresses = () => {
   const modalProps = useDisclosure();
   const queryClient = useQueryClient();
 
+  const profileQuery = useProfileQuery();
+
   const addressesQuery = useApiQuery('verified_addresses', {
     pathParams: { chainId: config.chain.id },
     queryOptions: {
       placeholderData: { verifiedAddresses: Array(3).fill(VERIFIED_ADDRESS) },
+      enabled: Boolean(profileQuery.data?.email),
     },
   });
   const applicationsQuery = useApiQuery('token_info_applications', {
     pathParams: { chainId: config.chain.id, id: undefined },
     queryOptions: {
       placeholderData: { submissions: Array(3).fill(TOKEN_INFO_APPLICATION) },
+      enabled: Boolean(profileQuery.data?.email),
       select: (data) => {
         return {
           ...data,
@@ -57,6 +63,7 @@ const VerifiedAddresses = () => {
   });
 
   const isLoading = addressesQuery.isPlaceholderData || applicationsQuery.isPlaceholderData;
+  const userWithoutEmail = profileQuery.data && !profileQuery.data.email;
 
   const handleGoBack = React.useCallback(() => {
     setSelectedAddress(undefined);
@@ -100,13 +107,23 @@ const VerifiedAddresses = () => {
       });
   }, [ queryClient ]);
 
-  const addButton = (
-    <Skeleton mt={ 8 } isLoaded={ !isLoading } display="inline-block">
-      <Button size="lg" onClick={ modalProps.onOpen }>
+  const addButton = (() => {
+    if (userWithoutEmail) {
+      return (
+        <Button size="lg" isDisabled mt={ 8 }>
           Add address
-      </Button>
-    </Skeleton>
-  );
+        </Button>
+      );
+    }
+
+    return (
+      <Skeleton mt={ 8 } isLoaded={ !isLoading } display="inline-block">
+        <Button size="lg" onClick={ modalProps.onOpen }>
+          Add address
+        </Button>
+      </Skeleton>
+    );
+  })();
 
   const backLink = React.useMemo(() => {
     if (!selectedAddress) {
@@ -135,35 +152,49 @@ const VerifiedAddresses = () => {
     );
   }
 
-  const content = addressesQuery.data?.verifiedAddresses ? (
-    <>
-      <Show below="lg" key="content-mobile" ssr={ false }>
-        { addressesQuery.data.verifiedAddresses.map((item, index) => (
-          <VerifiedAddressesListItem
-            key={ item.contractAddress + (isLoading ? index : '') }
-            item={ item }
-            application={ applicationsQuery.data?.submissions?.find(({ tokenAddress }) => tokenAddress.toLowerCase() === item.contractAddress.toLowerCase()) }
-            onAdd={ handleItemAdd }
-            onEdit={ handleItemEdit }
-            isLoading={ isLoading }
-          />
-        )) }
-      </Show>
-      <Hide below="lg" key="content-desktop" ssr={ false }>
-        <VerifiedAddressesTable
-          data={ addressesQuery.data.verifiedAddresses }
-          applications={ applicationsQuery.data?.submissions }
-          onItemEdit={ handleItemEdit }
-          onItemAdd={ handleItemAdd }
-          isLoading={ isLoading }
-        />
-      </Hide>
-    </>
-  ) : null;
+  const content = (() => {
+    if (userWithoutEmail) {
+      return null;
+    }
+
+    if (addressesQuery.data?.verifiedAddresses) {
+      return (
+        <>
+          <Show below="lg" key="content-mobile" ssr={ false }>
+            { addressesQuery.data.verifiedAddresses.map((item, index) => (
+              <VerifiedAddressesListItem
+                key={ item.contractAddress + (isLoading ? index : '') }
+                item={ item }
+                application={
+                  applicationsQuery.data?.submissions
+                    ?.find(({ tokenAddress }) => tokenAddress.toLowerCase() === item.contractAddress.toLowerCase())
+                }
+                onAdd={ handleItemAdd }
+                onEdit={ handleItemEdit }
+                isLoading={ isLoading }
+              />
+            )) }
+          </Show>
+          <Hide below="lg" key="content-desktop" ssr={ false }>
+            <VerifiedAddressesTable
+              data={ addressesQuery.data.verifiedAddresses }
+              applications={ applicationsQuery.data?.submissions }
+              onItemEdit={ handleItemEdit }
+              onItemAdd={ handleItemAdd }
+              isLoading={ isLoading }
+            />
+          </Hide>
+        </>
+      );
+    }
+
+    return null;
+  })();
 
   return (
     <>
       <PageTitle title="My verified addresses"/>
+      { userWithoutEmail && <VerifiedAddressesEmailAlert/> }
       <AccountPageDescription allowCut={ false }>
         <span>
           Verify ownership of a smart contract address to easily update information in Blockscout.
@@ -188,7 +219,7 @@ const VerifiedAddresses = () => {
         <AdminSupportText mt={ 5 }/>
       </AccountPageDescription>
       <DataListDisplay
-        isError={ addressesQuery.isError || applicationsQuery.isError }
+        isError={ profileQuery.isError || addressesQuery.isError || applicationsQuery.isError }
         items={ addressesQuery.data?.verifiedAddresses }
         content={ content }
         emptyText=""
diff --git a/ui/pages/VerifiedContracts.pw.tsx b/ui/pages/VerifiedContracts.pw.tsx
index ad0553eacd..7a07731b5c 100644
--- a/ui/pages/VerifiedContracts.pw.tsx
+++ b/ui/pages/VerifiedContracts.pw.tsx
@@ -1,45 +1,15 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import * as textAdMock from 'mocks/ad/textAd';
 import { verifiedContractsCountersMock } from 'mocks/contracts/counters';
 import * as verifiedContractsMock from 'mocks/contracts/index';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import VerifiedContracts from './VerifiedContracts';
 
-const VERIFIED_CONTRACTS_API_URL = buildApiUrl('verified_contracts');
-const VERIFIED_CONTRACTS_COUNTERS_API_URL = buildApiUrl('verified_contracts_counters');
-
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
-});
-
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(VERIFIED_CONTRACTS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(verifiedContractsMock.baseResponse),
-  }));
-  await page.route(VERIFIED_CONTRACTS_COUNTERS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(verifiedContractsCountersMock),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <VerifiedContracts/>
-    </TestApp>,
-  );
-
+test('base view +@mobile', async({ render, mockTextAd, mockApiResponse }) => {
+  await mockTextAd();
+  await mockApiResponse('verified_contracts', verifiedContractsMock.baseResponse);
+  await mockApiResponse('verified_contracts_counters', verifiedContractsCountersMock);
+  const component = await render(<VerifiedContracts/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/pages/VerifiedContracts.tsx b/ui/pages/VerifiedContracts.tsx
index 9003c9a181..31b16d244b 100644
--- a/ui/pages/VerifiedContracts.tsx
+++ b/ui/pages/VerifiedContracts.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import type { VerifiedContractsFilters } from 'types/api/contracts';
 import type { VerifiedContractsSorting, VerifiedContractsSortingField, VerifiedContractsSortingValue } from 'types/api/verifiedContracts';
 
+import config from 'configs/app';
 import useDebounce from 'lib/hooks/useDebounce';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { apos } from 'lib/html-entities';
@@ -76,7 +77,13 @@ const VerifiedContracts = () => {
     onSortingChange(getSortParamsFromValue(value));
   }, [ onSortingChange ]);
 
-  const typeFilter = <VerifiedContractsFilter onChange={ handleTypeChange } defaultValue={ type } isActive={ Boolean(type) }/>;
+  const typeFilter = (
+    <VerifiedContractsFilter
+      onChange={ handleTypeChange }
+      defaultValue={ type }
+      hasActiveFilter={ Boolean(type) }
+    />
+  );
 
   const filterInput = (
     <FilterInput
@@ -90,9 +97,11 @@ const VerifiedContracts = () => {
 
   const sortButton = (
     <Sort
+      name="verified_contracts_sorting"
+      defaultValue={ sort }
       options={ SORT_OPTIONS }
-      sort={ sort }
-      setSort={ handleSortChange }
+      onChange={ handleSortChange }
+      isLoading={ isPlaceholderData }
     />
   );
 
@@ -128,7 +137,10 @@ const VerifiedContracts = () => {
 
   return (
     <Box>
-      <PageTitle title="Verified contracts" withTextAd/>
+      <PageTitle
+        title={ config.meta.seo.enhancedDataEnabled ? `Verified ${ config.chain.name } contracts` : 'Verified contracts' }
+        withTextAd
+      />
       <VerifiedContractsCounters/>
       <DataListDisplay
         isError={ isError }
diff --git a/ui/pages/Watchlist.tsx b/ui/pages/Watchlist.tsx
index 7b2d79da5c..a01800fa78 100644
--- a/ui/pages/Watchlist.tsx
+++ b/ui/pages/Watchlist.tsx
@@ -6,14 +6,15 @@ import type { WatchlistAddress, WatchlistResponse } from 'types/api/account';
 
 import { resourceKey } from 'lib/api/resources';
 import { getResourceKey } from 'lib/api/useApiQuery';
-import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
 import { WATCH_LIST_ITEM_WITH_TOKEN_INFO } from 'stubs/account';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import useProfileQuery from 'ui/snippets/auth/useProfileQuery';
+import useRedirectForInvalidAuthToken from 'ui/snippets/auth/useRedirectForInvalidAuthToken';
 import AddressModal from 'ui/watchlist/AddressModal/AddressModal';
 import DeleteAddressModal from 'ui/watchlist/DeleteAddressModal';
 import WatchListItem from 'ui/watchlist/WatchlistTable/WatchListItem';
@@ -28,6 +29,7 @@ const WatchList: React.FC = () => {
     },
   });
   const queryClient = useQueryClient();
+  const profileQuery = useProfileQuery();
 
   const addressModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();
@@ -93,6 +95,7 @@ const WatchList: React.FC = () => {
               isLoading={ isPlaceholderData }
               onDeleteClick={ onDeleteClick }
               onEditClick={ onEditClick }
+              hasEmail={ Boolean(profileQuery.data?.email) }
             />
           )) }
         </Box>
@@ -102,7 +105,8 @@ const WatchList: React.FC = () => {
             isLoading={ isPlaceholderData }
             onDeleteClick={ onDeleteClick }
             onEditClick={ onEditClick }
-            top={ pagination.isVisible ? 80 : 0 }
+            top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+            hasEmail={ Boolean(profileQuery.data?.email) }
           />
         </Box>
       </>
diff --git a/ui/pages/Withdrawals.pw.tsx b/ui/pages/Withdrawals.pw.tsx
deleted file mode 100644
index 15dd8bfbdc..0000000000
--- a/ui/pages/Withdrawals.pw.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
-import React from 'react';
-
-import { data as withdrawalsData } from 'mocks/withdrawals/withdrawals';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
-
-import Withdrawals from './Withdrawals';
-
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.beaconChain) as any,
-});
-
-const WITHDRAWALS_API_URL = buildApiUrl('withdrawals');
-const WITHDRAWALS_COUNTERS_API_URL = buildApiUrl('withdrawals_counters');
-
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(WITHDRAWALS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(withdrawalsData),
-  }));
-
-  await page.route(WITHDRAWALS_COUNTERS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ withdrawal_count: '111111', withdrawal_sum: '1010101010110101001101010' }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Withdrawals/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
diff --git a/ui/pages/Withdrawals.tsx b/ui/pages/Withdrawals.tsx
deleted file mode 100644
index d060e8bb05..0000000000
--- a/ui/pages/Withdrawals.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Hide, Show, Skeleton, Text } from '@chakra-ui/react';
-import BigNumber from 'bignumber.js';
-import React from 'react';
-
-import config from 'configs/app';
-import useApiQuery from 'lib/api/useApiQuery';
-import getCurrencyValue from 'lib/getCurrencyValue';
-import { currencyUnits } from 'lib/units';
-import { generateListStub } from 'stubs/utils';
-import { WITHDRAWAL } from 'stubs/withdrawals';
-import DataListDisplay from 'ui/shared/DataListDisplay';
-import PageTitle from 'ui/shared/Page/PageTitle';
-import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
-import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
-import WithdrawalsListItem from 'ui/withdrawals/WithdrawalsListItem';
-import WithdrawalsTable from 'ui/withdrawals/WithdrawalsTable';
-
-const feature = config.features.beaconChain;
-
-const Withdrawals = () => {
-  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
-    resourceName: 'withdrawals',
-    options: {
-      placeholderData: generateListStub<'withdrawals'>(WITHDRAWAL, 50, { next_page_params: {
-        index: 5,
-        items_count: 50,
-      } }),
-    },
-  });
-
-  const countersQuery = useApiQuery('withdrawals_counters', {
-    queryOptions: {
-      placeholderData: {
-        withdrawal_count: '19091878',
-        withdrawal_sum: '4630710684332438',
-      },
-    },
-  });
-
-  const content = data?.items ? (
-    <>
-      <Show below="lg" ssr={ false }>
-        { data.items.map(((item, index) => (
-          <WithdrawalsListItem
-            key={ item.index + (isPlaceholderData ? String(index) : '') }
-            item={ item }
-            view="list"
-            isLoading={ isPlaceholderData }
-          />
-        ))) }
-      </Show>
-      <Hide below="lg" ssr={ false }>
-        <WithdrawalsTable items={ data.items } view="list" top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
-      </Hide>
-    </>
-  ) : null;
-
-  const text = (() => {
-    if (countersQuery.isError || !feature.isEnabled) {
-      return null;
-    }
-
-    return (
-      <Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap">
-        { countersQuery.data && (
-          <Text lineHeight={{ base: '24px', lg: '32px' }}>
-            { BigNumber(countersQuery.data.withdrawal_count).toFormat() } withdrawals processed
-        and { getCurrencyValue({ value: countersQuery.data.withdrawal_sum }).valueStr } { currencyUnits.ether } withdrawn
-          </Text>
-        ) }
-      </Skeleton>
-    );
-  })();
-
-  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
-
-  return (
-    <>
-      <PageTitle title="Withdrawals" withTextAd/>
-      <DataListDisplay
-        isError={ isError }
-        items={ data?.items }
-        emptyText="There are no withdrawals."
-        content={ content }
-        actionBar={ actionBar }
-      />
-    </>
-  );
-};
-
-export default Withdrawals;
diff --git a/ui/pages/ZkEvmL2Deposits.pw.tsx b/ui/pages/ZkEvmL2Deposits.pw.tsx
new file mode 100644
index 0000000000..b1ae7c8f93
--- /dev/null
+++ b/ui/pages/ZkEvmL2Deposits.pw.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import * as depositsMock from 'mocks/zkEvm/deposits';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import ZkEvmL2Deposits from './ZkEvmL2Deposits';
+
+test('base view +@mobile', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => {
+  await mockTextAd();
+  await mockEnvs(ENVS_MAP.zkEvmRollup);
+  await mockApiResponse('zkevm_l2_deposits', depositsMock.baseResponse);
+  await mockApiResponse('zkevm_l2_deposits_count', 3971111);
+
+  const component = await render(<ZkEvmL2Deposits/>);
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/ZkEvmL2Deposits.tsx b/ui/pages/ZkEvmL2Deposits.tsx
new file mode 100644
index 0000000000..dd9d363140
--- /dev/null
+++ b/ui/pages/ZkEvmL2Deposits.tsx
@@ -0,0 +1,82 @@
+import { Hide, Show, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { rightLineArrow, nbsp } from 'lib/html-entities';
+import { generateListStub } from 'stubs/utils';
+import { ZKEVM_DEPOSITS_ITEM } from 'stubs/zkEvmL2';
+import ZkEvmL2DepositsListItem from 'ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem';
+import ZkEvmL2DepositsTable from 'ui/deposits/zkEvmL2/ZkEvmL2DepositsTable';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+
+const ZkEvmL2Deposits = () => {
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'zkevm_l2_deposits',
+    options: {
+      placeholderData: generateListStub<'zkevm_l2_deposits'>(
+        ZKEVM_DEPOSITS_ITEM,
+        50,
+        { next_page_params: { items_count: 50, index: 1 } },
+      ),
+    },
+  });
+
+  const countersQuery = useApiQuery('zkevm_l2_deposits_count', {
+    queryOptions: {
+      placeholderData: 1927029,
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        { data.items.map(((item, index) => (
+          <ZkEvmL2DepositsListItem
+            key={ String(item.index) + (isPlaceholderData ? index : '') }
+            isLoading={ isPlaceholderData }
+            item={ item }
+          />
+        ))) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <ZkEvmL2DepositsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (countersQuery.isError) {
+      return null;
+    }
+
+    return (
+      <Skeleton
+        isLoaded={ !countersQuery.isPlaceholderData }
+        display="inline-block"
+      >
+        A total of { countersQuery.data?.toLocaleString() } deposits found
+      </Skeleton>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle title={ `Deposits (L1${ nbsp }${ rightLineArrow }${ nbsp }L2)` } withTextAd/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no deposits."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default ZkEvmL2Deposits;
diff --git a/ui/pages/ZkEvmL2TxnBatch.pw.tsx b/ui/pages/ZkEvmL2TxnBatch.pw.tsx
index 852ecc3afb..9c717759b5 100644
--- a/ui/pages/ZkEvmL2TxnBatch.pw.tsx
+++ b/ui/pages/ZkEvmL2TxnBatch.pw.tsx
@@ -1,70 +1,35 @@
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import { txnBatchData } from 'mocks/zkevmL2txnBatches/zkevmL2txnBatch';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { txnBatchData } from 'mocks/zkEvm/txnBatches';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect, devices } from 'playwright/lib';
 
 import ZkEvmL2TxnBatch from './ZkEvmL2TxnBatch';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.zkRollup) as any,
-});
-
+const batchNumber = '5';
 const hooksConfig = {
   router: {
-    query: { number: '5' },
+    query: { number: batchNumber },
   },
 };
 
-const BATCH_API_URL = buildApiUrl('zkevm_l2_txn_batch', { number: '5' });
+test.beforeEach(async({ mockTextAd, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.zkEvmRollup);
+  await mockTextAd();
+  await mockApiResponse('zkevm_l2_txn_batch', txnBatchData, { pathParams: { number: batchNumber } });
+});
 
-test('base view', async({ mount, page }) => {
+test('base view', async({ render }) => {
   test.slow();
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(BATCH_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(txnBatchData),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <ZkEvmL2TxnBatch/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+  const component = await render(<ZkEvmL2TxnBatch/>, { hooksConfig });
   await expect(component).toHaveScreenshot();
 });
 
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
-  test('base view', async({ mount, page }) => {
+  test('base view', async({ render }) => {
     test.slow();
-    await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-      status: 200,
-      body: '',
-    }));
-
-    await page.route(BATCH_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(txnBatchData),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <ZkEvmL2TxnBatch/>
-      </TestApp>,
-      { hooksConfig },
-    );
-
+    const component = await render(<ZkEvmL2TxnBatch/>, { hooksConfig });
     await expect(component).toHaveScreenshot();
   });
 });
diff --git a/ui/pages/ZkEvmL2TxnBatch.tsx b/ui/pages/ZkEvmL2TxnBatch.tsx
index 5241cb8369..2aebba8d91 100644
--- a/ui/pages/ZkEvmL2TxnBatch.tsx
+++ b/ui/pages/ZkEvmL2TxnBatch.tsx
@@ -16,8 +16,8 @@ import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
+import ZkEvmL2TxnBatchDetails from 'ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails';
 import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
-import ZkEvmL2TxnBatchDetails from 'ui/zkEvmL2TxnBatches/ZkEvmL2TxnBatchDetails';
 
 const ZkEvmL2TxnBatch = () => {
   const router = useRouter();
@@ -59,7 +59,7 @@ const ZkEvmL2TxnBatch = () => {
     }
 
     return {
-      label: 'Back to tx batches list',
+      label: 'Back to txn batches list',
       url: appProps.referrer,
     };
   }, [ appProps.referrer ]);
@@ -68,7 +68,7 @@ const ZkEvmL2TxnBatch = () => {
     <>
       <TextAd mb={ 6 }/>
       <PageTitle
-        title={ `Tx batch #${ number }` }
+        title={ `Txn batch #${ number }` }
         backLink={ backLink }
       />
       { batchQuery.isPlaceholderData ? <TabsSkeleton tabs={ tabs }/> : (
diff --git a/ui/pages/ZkEvmL2TxnBatches.pw.tsx b/ui/pages/ZkEvmL2TxnBatches.pw.tsx
index 8c403a4620..61a3af145d 100644
--- a/ui/pages/ZkEvmL2TxnBatches.pw.tsx
+++ b/ui/pages/ZkEvmL2TxnBatches.pw.tsx
@@ -1,43 +1,16 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import { txnBatchesData } from 'mocks/zkevmL2txnBatches/zkevmL2txnBatches';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { txnBatchesData } from 'mocks/zkEvm/txnBatches';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import ZkEvmL2TxnBatches from './ZkEvmL2TxnBatches';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.zkRollup) as any,
-});
-
-const BATCHES_API_URL = buildApiUrl('zkevm_l2_txn_batches');
-const BATCHES_COUNTERS_API_URL = buildApiUrl('zkevm_l2_txn_batches_count');
-
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(BATCHES_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(txnBatchesData),
-  }));
-
-  await page.route(BATCHES_COUNTERS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: '9927',
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <ZkEvmL2TxnBatches/>
-    </TestApp>,
-  );
-
+test('base view +@mobile', async({ render, mockTextAd, mockEnvs, mockApiResponse }) => {
+  await mockEnvs(ENVS_MAP.zkEvmRollup);
+  await mockTextAd();
+  await mockApiResponse('zkevm_l2_txn_batches', txnBatchesData);
+  await mockApiResponse('zkevm_l2_txn_batches_count', 9927);
+  const component = await render(<ZkEvmL2TxnBatches/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/pages/ZkEvmL2TxnBatches.tsx b/ui/pages/ZkEvmL2TxnBatches.tsx
index 562be180c9..ab2b79d3e0 100644
--- a/ui/pages/ZkEvmL2TxnBatches.tsx
+++ b/ui/pages/ZkEvmL2TxnBatches.tsx
@@ -4,12 +4,13 @@ import React from 'react';
 import useApiQuery from 'lib/api/useApiQuery';
 import { generateListStub } from 'stubs/utils';
 import { ZKEVM_L2_TXN_BATCHES_ITEM } from 'stubs/zkEvmL2';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
-import ZkEvmTxnBatchesListItem from 'ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesListItem';
-import ZkEvmTxnBatchesTable from 'ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesTable';
+import ZkEvmTxnBatchesListItem from 'ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem';
+import ZkEvmTxnBatchesTable from 'ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTable';
 
 const ZkEvmL2TxnBatches = () => {
   const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
@@ -45,7 +46,9 @@ const ZkEvmL2TxnBatches = () => {
           />
         ))) }
       </Show>
-      <Hide below="lg" ssr={ false }><ZkEvmTxnBatchesTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/></Hide>
+      <Hide below="lg" ssr={ false }>
+        <ZkEvmTxnBatchesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
     </>
   ) : null;
 
@@ -56,7 +59,7 @@ const ZkEvmL2TxnBatches = () => {
 
     return (
       <Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap">
-        Tx batch
+        Txn batch
         <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].number } </Text>to
         <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].number } </Text>
         (total of { countersQuery.data?.toLocaleString() } batches)
@@ -68,11 +71,11 @@ const ZkEvmL2TxnBatches = () => {
 
   return (
     <>
-      <PageTitle title="Tx batches" withTextAd/>
+      <PageTitle title="Txn batches" withTextAd/>
       <DataListDisplay
         isError={ isError }
         items={ data?.items }
-        emptyText="There are no tx batches."
+        emptyText="There are no txn batches."
         content={ content }
         actionBar={ actionBar }
       />
diff --git a/ui/pages/ZkEvmL2Withdrawals.pw.tsx b/ui/pages/ZkEvmL2Withdrawals.pw.tsx
new file mode 100644
index 0000000000..92a9fbf88a
--- /dev/null
+++ b/ui/pages/ZkEvmL2Withdrawals.pw.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import * as withdrawalsMock from 'mocks/zkEvm/withdrawals';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import ZkEvmL2Withdrawals from './ZkEvmL2Withdrawals';
+
+test('base view +@mobile', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => {
+  await mockTextAd();
+  await mockEnvs(ENVS_MAP.zkEvmRollup);
+  await mockApiResponse('zkevm_l2_withdrawals', withdrawalsMock.baseResponse);
+  await mockApiResponse('zkevm_l2_withdrawals_count', 3971111);
+
+  const component = await render(<ZkEvmL2Withdrawals/>);
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/ZkEvmL2Withdrawals.tsx b/ui/pages/ZkEvmL2Withdrawals.tsx
new file mode 100644
index 0000000000..430936c335
--- /dev/null
+++ b/ui/pages/ZkEvmL2Withdrawals.tsx
@@ -0,0 +1,82 @@
+import { Hide, Show, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { rightLineArrow, nbsp } from 'lib/html-entities';
+import { generateListStub } from 'stubs/utils';
+import { ZKEVM_WITHDRAWALS_ITEM } from 'stubs/zkEvmL2';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+import ZkEvmL2WithdrawalsListItem from 'ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem';
+import ZkEvmL2WithdrawalsTable from 'ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTable';
+
+const ZkEvmL2Withdrawals = () => {
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'zkevm_l2_withdrawals',
+    options: {
+      placeholderData: generateListStub<'zkevm_l2_withdrawals'>(
+        ZKEVM_WITHDRAWALS_ITEM,
+        50,
+        { next_page_params: { items_count: 50, index: 1 } },
+      ),
+    },
+  });
+
+  const countersQuery = useApiQuery('zkevm_l2_withdrawals_count', {
+    queryOptions: {
+      placeholderData: 1927029,
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        { data.items.map(((item, index) => (
+          <ZkEvmL2WithdrawalsListItem
+            key={ String(item.index) + (isPlaceholderData ? index : '') }
+            isLoading={ isPlaceholderData }
+            item={ item }
+          />
+        ))) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <ZkEvmL2WithdrawalsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (countersQuery.isError) {
+      return null;
+    }
+
+    return (
+      <Skeleton
+        isLoaded={ !countersQuery.isPlaceholderData }
+        display="inline-block"
+      >
+        A total of { countersQuery.data?.toLocaleString() } withdrawals found
+      </Skeleton>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle title={ `Withdrawals (L2${ nbsp }${ rightLineArrow }${ nbsp }L1)` } withTextAd/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no withdrawals."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default ZkEvmL2Withdrawals;
diff --git a/ui/pages/ZkSyncL2TxnBatch.pw.tsx b/ui/pages/ZkSyncL2TxnBatch.pw.tsx
new file mode 100644
index 0000000000..b7bc910f19
--- /dev/null
+++ b/ui/pages/ZkSyncL2TxnBatch.pw.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import * as zkSyncTxnBatchMock from 'mocks/zkSync/zkSyncTxnBatch';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect, devices } from 'playwright/lib';
+
+import ZkSyncL2TxnBatch from './ZkSyncL2TxnBatch';
+
+const batchNumber = String(zkSyncTxnBatchMock.base.number);
+const hooksConfig = {
+  router: {
+    query: { number: batchNumber },
+  },
+};
+
+test.beforeEach(async({ mockTextAd, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.zkSyncRollup);
+  await mockTextAd();
+  await mockApiResponse('zksync_l2_txn_batch', zkSyncTxnBatchMock.base, { pathParams: { number: batchNumber } });
+});
+
+test('base view', async({ render }) => {
+  const component = await render(<ZkSyncL2TxnBatch/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+  test('base view', async({ render }) => {
+    const component = await render(<ZkSyncL2TxnBatch/>, { hooksConfig });
+    await expect(component).toHaveScreenshot();
+  });
+});
diff --git a/ui/pages/ZkSyncL2TxnBatch.tsx b/ui/pages/ZkSyncL2TxnBatch.tsx
new file mode 100644
index 0000000000..53021ad50a
--- /dev/null
+++ b/ui/pages/ZkSyncL2TxnBatch.tsx
@@ -0,0 +1,108 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { RoutedTab } from 'ui/shared/Tabs/types';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { useAppContext } from 'lib/contexts/app';
+import throwOnAbsentParamError from 'lib/errors/throwOnAbsentParamError';
+import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { TX } from 'stubs/tx';
+import { generateListStub } from 'stubs/utils';
+import { ZKSYNC_L2_TXN_BATCH } from 'stubs/zkSyncL2';
+import TextAd from 'ui/shared/ad/TextAd';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
+import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
+import ZkSyncL2TxnBatchDetails from 'ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails';
+import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
+
+const TAB_LIST_PROPS = {
+  marginBottom: 0,
+  py: 5,
+  marginTop: -5,
+};
+
+const TABS_HEIGHT = 80;
+
+const ZkSyncL2TxnBatch = () => {
+  const router = useRouter();
+  const appProps = useAppContext();
+  const number = getQueryParamString(router.query.number);
+  const tab = getQueryParamString(router.query.tab);
+  const isMobile = useIsMobile();
+
+  const batchQuery = useApiQuery('zksync_l2_txn_batch', {
+    pathParams: { number },
+    queryOptions: {
+      enabled: Boolean(number),
+      placeholderData: ZKSYNC_L2_TXN_BATCH,
+    },
+  });
+
+  const batchTxsQuery = useQueryWithPages({
+    resourceName: 'zksync_l2_txn_batch_txs',
+    pathParams: { number },
+    options: {
+      enabled: Boolean(!batchQuery.isPlaceholderData && batchQuery.data?.number && tab === 'txs'),
+      placeholderData: generateListStub<'zksync_l2_txn_batch_txs'>(TX, 50, { next_page_params: {
+        batch_number: '8122',
+        block_number: 1338932,
+        index: 0,
+        items_count: 50,
+      } }),
+    },
+  });
+
+  throwOnAbsentParamError(number);
+  throwOnResourceLoadError(batchQuery);
+
+  const hasPagination = !isMobile && batchTxsQuery.pagination.isVisible && tab === 'txs';
+
+  const tabs: Array<RoutedTab> = React.useMemo(() => ([
+    { id: 'index', title: 'Details', component: <ZkSyncL2TxnBatchDetails query={ batchQuery }/> },
+    {
+      id: 'txs',
+      title: 'Transactions',
+      component: <TxsWithFrontendSorting query={ batchTxsQuery } showSocketInfo={ false } top={ hasPagination ? TABS_HEIGHT : 0 }/>,
+    },
+  ].filter(Boolean)), [ batchQuery, batchTxsQuery, hasPagination ]);
+
+  const backLink = React.useMemo(() => {
+    const hasGoBackLink = appProps.referrer && appProps.referrer.endsWith('/batches');
+
+    if (!hasGoBackLink) {
+      return;
+    }
+
+    return {
+      label: 'Back to txn batches list',
+      url: appProps.referrer,
+    };
+  }, [ appProps.referrer ]);
+
+  return (
+    <>
+      <TextAd mb={ 6 }/>
+      <PageTitle
+        title={ `Txn batch #${ number }` }
+        backLink={ backLink }
+      />
+      { batchQuery.isPlaceholderData ?
+        <TabsSkeleton tabs={ tabs }/> : (
+          <RoutedTabs
+            tabs={ tabs }
+            tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
+            rightSlot={ hasPagination ? <Pagination { ...(batchTxsQuery.pagination) }/> : null }
+            stickyEnabled={ hasPagination }
+          />
+        ) }
+    </>
+  );
+};
+
+export default ZkSyncL2TxnBatch;
diff --git a/ui/pages/ZkSyncL2TxnBatches.pw.tsx b/ui/pages/ZkSyncL2TxnBatches.pw.tsx
new file mode 100644
index 0000000000..9530e0a569
--- /dev/null
+++ b/ui/pages/ZkSyncL2TxnBatches.pw.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import * as zkSyncTxnBatchesMock from 'mocks/zkSync/zkSyncTxnBatches';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import ZkSyncL2TxnBatches from './ZkSyncL2TxnBatches';
+
+test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
+  test.slow();
+  await mockEnvs(ENVS_MAP.zkSyncRollup);
+  await mockTextAd();
+  await mockApiResponse('zksync_l2_txn_batches', zkSyncTxnBatchesMock.baseResponse);
+  await mockApiResponse('zksync_l2_txn_batches_count', 9927);
+
+  const component = await render(<ZkSyncL2TxnBatches/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/ZkSyncL2TxnBatches.tsx b/ui/pages/ZkSyncL2TxnBatches.tsx
new file mode 100644
index 0000000000..bd0164fb50
--- /dev/null
+++ b/ui/pages/ZkSyncL2TxnBatches.tsx
@@ -0,0 +1,86 @@
+import { Hide, Show, Skeleton, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { generateListStub } from 'stubs/utils';
+import { ZKSYNC_L2_TXN_BATCHES_ITEM } from 'stubs/zkSyncL2';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+import ZkSyncTxnBatchesListItem from 'ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesListItem';
+import ZkSyncTxnBatchesTable from 'ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTable';
+
+const ZkSyncL2TxnBatches = () => {
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'zksync_l2_txn_batches',
+    options: {
+      placeholderData: generateListStub<'zksync_l2_txn_batches'>(
+        ZKSYNC_L2_TXN_BATCHES_ITEM,
+        50,
+        {
+          next_page_params: {
+            items_count: 50,
+            number: 9045200,
+          },
+        },
+      ),
+    },
+  });
+
+  const countersQuery = useApiQuery('zksync_l2_txn_batches_count', {
+    queryOptions: {
+      placeholderData: 5231746,
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        { data.items.map(((item, index) => (
+          <ZkSyncTxnBatchesListItem
+            key={ item.number + (isPlaceholderData ? String(index) : '') }
+            item={ item }
+            isLoading={ isPlaceholderData }
+          />
+        ))) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <ZkSyncTxnBatchesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (countersQuery.isError || isError || !data?.items.length) {
+      return null;
+    }
+
+    return (
+      <Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap">
+        Txn batch
+        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].number } </Text>to
+        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].number } </Text>
+        (total of { countersQuery.data?.toLocaleString() } batches)
+      </Skeleton>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle title="Txn batches" withTextAd/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no txn batches."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default ZkSyncL2TxnBatches;
diff --git a/ui/pages/__screenshots__/Accounts.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Accounts.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png
index 7ebe27f5c0..b37547f26a 100644
Binary files a/ui/pages/__screenshots__/Accounts.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Accounts.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Accounts.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Accounts.pw.tsx_default_base-view-mobile-dark-mode-1.png
index 8e494c5f56..ed36c30ea5 100644
Binary files a/ui/pages/__screenshots__/Accounts.pw.tsx_default_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Accounts.pw.tsx_default_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Accounts.pw.tsx_mobile_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Accounts.pw.tsx_mobile_base-view-mobile-dark-mode-1.png
index 7248572c46..c76c716d62 100644
Binary files a/ui/pages/__screenshots__/Accounts.pw.tsx_mobile_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Accounts.pw.tsx_mobile_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/AccountsLabelSearch.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/AccountsLabelSearch.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..46fdfcda91
Binary files /dev/null and b/ui/pages/__screenshots__/AccountsLabelSearch.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/AccountsLabelSearch.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/AccountsLabelSearch.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..6b7a673d8f
Binary files /dev/null and b/ui/pages/__screenshots__/AccountsLabelSearch.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/Address.pw.tsx_default_degradation-view-1.png b/ui/pages/__screenshots__/Address.pw.tsx_default_degradation-view-1.png
new file mode 100644
index 0000000000..5ebd9b86d6
Binary files /dev/null and b/ui/pages/__screenshots__/Address.pw.tsx_default_degradation-view-1.png differ
diff --git a/ui/pages/__screenshots__/AdvancedFilter.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/pages/__screenshots__/AdvancedFilter.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..9bab223648
Binary files /dev/null and b/ui/pages/__screenshots__/AdvancedFilter.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/AdvancedFilter.pw.tsx_default_base-view-dark-mode-1.png b/ui/pages/__screenshots__/AdvancedFilter.pw.tsx_default_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..6a6f6d8381
Binary files /dev/null and b/ui/pages/__screenshots__/AdvancedFilter.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2Deposits.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ArbitrumL2Deposits.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..7047bb6de0
Binary files /dev/null and b/ui/pages/__screenshots__/ArbitrumL2Deposits.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2Deposits.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ArbitrumL2Deposits.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..e1bc6ef7ee
Binary files /dev/null and b/ui/pages/__screenshots__/ArbitrumL2Deposits.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_base-view-1.png
new file mode 100644
index 0000000000..d767e3c628
Binary files /dev/null and b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_base-view-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-base-view-1.png
new file mode 100644
index 0000000000..f4748e9622
Binary files /dev/null and b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-with-anytrust-DA-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-with-anytrust-DA-1.png
new file mode 100644
index 0000000000..ec2e4cc770
Binary files /dev/null and b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-with-anytrust-DA-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_with-anytrust-DA-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_with-anytrust-DA-1.png
new file mode 100644
index 0000000000..acb0a4b1b4
Binary files /dev/null and b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_with-anytrust-DA-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatches.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatches.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..bcef5677d3
Binary files /dev/null and b/ui/pages/__screenshots__/ArbitrumL2TxnBatches.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..d091879280
Binary files /dev/null and b/ui/pages/__screenshots__/ArbitrumL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2Withdrawals.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ArbitrumL2Withdrawals.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..c4159aaf18
Binary files /dev/null and b/ui/pages/__screenshots__/ArbitrumL2Withdrawals.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ArbitrumL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..aa3c5ca481
Binary files /dev/null and b/ui/pages/__screenshots__/ArbitrumL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..e2c65adbfc
Binary files /dev/null and b/ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..966854b447
Binary files /dev/null and b/ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/Blob.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Blob.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..95fe3ad604
Binary files /dev/null and b/ui/pages/__screenshots__/Blob.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Blob.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Blob.pw.tsx_default_base-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..96f052dc69
Binary files /dev/null and b/ui/pages/__screenshots__/Blob.pw.tsx_default_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Blob.pw.tsx_default_without-data-1.png b/ui/pages/__screenshots__/Blob.pw.tsx_default_without-data-1.png
new file mode 100644
index 0000000000..37dc75097a
Binary files /dev/null and b/ui/pages/__screenshots__/Blob.pw.tsx_default_without-data-1.png differ
diff --git a/ui/pages/__screenshots__/Blob.pw.tsx_mobile_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Blob.pw.tsx_mobile_base-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..deb1ab6518
Binary files /dev/null and b/ui/pages/__screenshots__/Blob.pw.tsx_mobile_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-details-tab-1.png b/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-details-tab-1.png
new file mode 100644
index 0000000000..963b74106f
Binary files /dev/null and b/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-details-tab-1.png differ
diff --git a/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-txs-tab-1.png b/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-txs-tab-1.png
new file mode 100644
index 0000000000..3392cb8c78
Binary files /dev/null and b/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-txs-tab-1.png differ
diff --git a/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-withdrawals-tab-1.png b/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-withdrawals-tab-1.png
new file mode 100644
index 0000000000..f2f2b6b895
Binary files /dev/null and b/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-withdrawals-tab-1.png differ
diff --git a/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_long-period-until-the-block-mobile-1.png b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_long-period-until-the-block-mobile-1.png
new file mode 100644
index 0000000000..a51c5c3a19
Binary files /dev/null and b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_long-period-until-the-block-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_short-period-until-the-block-mobile-1.png b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_short-period-until-the-block-mobile-1.png
new file mode 100644
index 0000000000..820a2f622a
Binary files /dev/null and b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_short-period-until-the-block-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/BlockCountdown.pw.tsx_mobile_long-period-until-the-block-mobile-1.png b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_mobile_long-period-until-the-block-mobile-1.png
new file mode 100644
index 0000000000..dd9e46f162
Binary files /dev/null and b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_mobile_long-period-until-the-block-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/BlockCountdown.pw.tsx_mobile_short-period-until-the-block-mobile-1.png b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_mobile_short-period-until-the-block-mobile-1.png
new file mode 100644
index 0000000000..6e14a560a8
Binary files /dev/null and b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_mobile_short-period-until-the-block-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/BlockCountdownIndex.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/BlockCountdownIndex.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..5be419344e
Binary files /dev/null and b/ui/pages/__screenshots__/BlockCountdownIndex.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/BlockCountdownIndex.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/BlockCountdownIndex.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..774615ecf7
Binary files /dev/null and b/ui/pages/__screenshots__/BlockCountdownIndex.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
index 949b2d523a..b28d5d8ac9 100644
Binary files a/ui/pages/__screenshots__/Blocks.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/pages/__screenshots__/Blocks.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_base-view-dark-mode-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_base-view-dark-mode-1.png
index a65d7ae74e..7cf703fa14 100644
Binary files a/ui/pages/__screenshots__/Blocks.pw.tsx_default_base-view-dark-mode-1.png and b/ui/pages/__screenshots__/Blocks.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_hidden-fields-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_hidden-fields-1.png
index 23ed441207..672397577e 100644
Binary files a/ui/pages/__screenshots__/Blocks.pw.tsx_default_hidden-fields-1.png and b/ui/pages/__screenshots__/Blocks.pw.tsx_default_hidden-fields-1.png differ
diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-base-view-1.png
index 4a4ba6bce5..b836a8a845 100644
Binary files a/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-hidden-fields-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-hidden-fields-1.png
index fb202f4ff0..256cc35833 100644
Binary files a/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-hidden-fields-1.png and b/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-hidden-fields-1.png differ
diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_new-item-from-socket-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_new-item-from-socket-1.png
index 4ff5de8055..065468397f 100644
Binary files a/ui/pages/__screenshots__/Blocks.pw.tsx_default_new-item-from-socket-1.png and b/ui/pages/__screenshots__/Blocks.pw.tsx_default_new-item-from-socket-1.png differ
diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_socket-error-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_socket-error-1.png
index 5fa494cfd1..9d2fead5c6 100644
Binary files a/ui/pages/__screenshots__/Blocks.pw.tsx_default_socket-error-1.png and b/ui/pages/__screenshots__/Blocks.pw.tsx_default_socket-error-1.png differ
diff --git a/ui/pages/__screenshots__/Chart.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/Chart.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..eb6884c0a8
Binary files /dev/null and b/ui/pages/__screenshots__/Chart.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/Chart.pw.tsx_default_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/Chart.pw.tsx_default_base-view-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..4f0d0954b5
Binary files /dev/null and b/ui/pages/__screenshots__/Chart.pw.tsx_default_base-view-dark-mode-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/Chart.pw.tsx_mobile_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/Chart.pw.tsx_mobile_base-view-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..031e777d49
Binary files /dev/null and b/ui/pages/__screenshots__/Chart.pw.tsx_mobile_base-view-dark-mode-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/CsvExport.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/CsvExport.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png
index a7e7280953..26780d4589 100644
Binary files a/ui/pages/__screenshots__/CsvExport.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/CsvExport.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/CsvExport.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/CsvExport.pw.tsx_default_base-view-mobile-dark-mode-1.png
index 2003834634..0b6df4c4c4 100644
Binary files a/ui/pages/__screenshots__/CsvExport.pw.tsx_default_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/CsvExport.pw.tsx_default_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/CsvExport.pw.tsx_default_token-holders-1.png b/ui/pages/__screenshots__/CsvExport.pw.tsx_default_token-holders-1.png
new file mode 100644
index 0000000000..86ea5c5ffa
Binary files /dev/null and b/ui/pages/__screenshots__/CsvExport.pw.tsx_default_token-holders-1.png differ
diff --git a/ui/pages/__screenshots__/CsvExport.pw.tsx_mobile_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/CsvExport.pw.tsx_mobile_base-view-mobile-dark-mode-1.png
index d5640e74c9..43cb17aa05 100644
Binary files a/ui/pages/__screenshots__/CsvExport.pw.tsx_mobile_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/CsvExport.pw.tsx_mobile_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/GasTracker.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/GasTracker.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..eb2bff6f1b
Binary files /dev/null and b/ui/pages/__screenshots__/GasTracker.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/GasTracker.pw.tsx_default_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/GasTracker.pw.tsx_default_base-view-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..8298fae2de
Binary files /dev/null and b/ui/pages/__screenshots__/GasTracker.pw.tsx_default_base-view-dark-mode-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/GasTracker.pw.tsx_mobile_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/GasTracker.pw.tsx_mobile_base-view-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..534e56d864
Binary files /dev/null and b/ui/pages/__screenshots__/GasTracker.pw.tsx_mobile_base-view-dark-mode-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/Home.pw.tsx_dark-color-mode_default-view---default-dark-mode-1.png b/ui/pages/__screenshots__/Home.pw.tsx_dark-color-mode_default-view---default-dark-mode-1.png
index a08389442a..c0ef85b8aa 100644
Binary files a/ui/pages/__screenshots__/Home.pw.tsx_dark-color-mode_default-view---default-dark-mode-1.png and b/ui/pages/__screenshots__/Home.pw.tsx_dark-color-mode_default-view---default-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Home.pw.tsx_default_custom-hero-plate-background-default-view-1.png b/ui/pages/__screenshots__/Home.pw.tsx_default_custom-hero-plate-background-default-view-1.png
deleted file mode 100644
index 1851dc3744..0000000000
Binary files a/ui/pages/__screenshots__/Home.pw.tsx_default_custom-hero-plate-background-default-view-1.png and /dev/null differ
diff --git a/ui/pages/__screenshots__/Home.pw.tsx_default_default-view-screen-xl-1.png b/ui/pages/__screenshots__/Home.pw.tsx_default_default-view-screen-xl-1.png
deleted file mode 100644
index db9a61c2ed..0000000000
Binary files a/ui/pages/__screenshots__/Home.pw.tsx_default_default-view-screen-xl-1.png and /dev/null differ
diff --git a/ui/pages/__screenshots__/Home.pw.tsx_default_default-view-screen-xl-base-view-1.png b/ui/pages/__screenshots__/Home.pw.tsx_default_default-view-screen-xl-base-view-1.png
new file mode 100644
index 0000000000..9d4a7547f9
Binary files /dev/null and b/ui/pages/__screenshots__/Home.pw.tsx_default_default-view-screen-xl-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/Home.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/Home.pw.tsx_default_mobile-base-view-1.png
index d5ad955957..6ae75f1176 100644
Binary files a/ui/pages/__screenshots__/Home.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/Home.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/L2Deposits.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/L2Deposits.pw.tsx_default_base-view-mobile-1.png
deleted file mode 100644
index 14dece9ea6..0000000000
Binary files a/ui/pages/__screenshots__/L2Deposits.pw.tsx_default_base-view-mobile-1.png and /dev/null differ
diff --git a/ui/pages/__screenshots__/L2Deposits.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/L2Deposits.pw.tsx_mobile_base-view-mobile-1.png
deleted file mode 100644
index 57f48bfcc4..0000000000
Binary files a/ui/pages/__screenshots__/L2Deposits.pw.tsx_mobile_base-view-mobile-1.png and /dev/null differ
diff --git a/ui/pages/__screenshots__/L2OutputRoots.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/L2OutputRoots.pw.tsx_default_base-view-mobile-1.png
deleted file mode 100644
index 25c3210032..0000000000
Binary files a/ui/pages/__screenshots__/L2OutputRoots.pw.tsx_default_base-view-mobile-1.png and /dev/null differ
diff --git a/ui/pages/__screenshots__/L2OutputRoots.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/L2OutputRoots.pw.tsx_mobile_base-view-mobile-1.png
deleted file mode 100644
index 477bcaaca4..0000000000
Binary files a/ui/pages/__screenshots__/L2OutputRoots.pw.tsx_mobile_base-view-mobile-1.png and /dev/null differ
diff --git a/ui/pages/__screenshots__/L2TxnBatches.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/L2TxnBatches.pw.tsx_default_base-view-mobile-1.png
deleted file mode 100644
index 8409b37609..0000000000
Binary files a/ui/pages/__screenshots__/L2TxnBatches.pw.tsx_default_base-view-mobile-1.png and /dev/null differ
diff --git a/ui/pages/__screenshots__/L2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/L2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png
deleted file mode 100644
index e9b20c4699..0000000000
Binary files a/ui/pages/__screenshots__/L2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png and /dev/null differ
diff --git a/ui/pages/__screenshots__/L2Withdrawals.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/L2Withdrawals.pw.tsx_default_base-view-mobile-1.png
deleted file mode 100644
index 1d1532ab8c..0000000000
Binary files a/ui/pages/__screenshots__/L2Withdrawals.pw.tsx_default_base-view-mobile-1.png and /dev/null differ
diff --git a/ui/pages/__screenshots__/L2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/L2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png
deleted file mode 100644
index 6e12fd8a6e..0000000000
Binary files a/ui/pages/__screenshots__/L2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png and /dev/null differ
diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..c037d61d9b
Binary files /dev/null and b/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-banner-dark-mode-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-banner-dark-mode-1.png
new file mode 100644
index 0000000000..665e48c867
Binary files /dev/null and b/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-banner-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-featured-app-dark-mode-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-featured-app-dark-mode-1.png
new file mode 100644
index 0000000000..a29ba63edb
Binary files /dev/null and b/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-featured-app-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_base-view-dark-mode-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..4574a52246
Binary files /dev/null and b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-base-view-1.png
new file mode 100644
index 0000000000..d6c3102541
Binary files /dev/null and b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-banner-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-banner-1.png
new file mode 100644
index 0000000000..9d05e49f66
Binary files /dev/null and b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-banner-1.png differ
diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-featured-app-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-featured-app-1.png
new file mode 100644
index 0000000000..0f3913120b
Binary files /dev/null and b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-featured-app-1.png differ
diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-banner-dark-mode-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-banner-dark-mode-1.png
new file mode 100644
index 0000000000..3d5e4d6336
Binary files /dev/null and b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-banner-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-featured-app-dark-mode-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-featured-app-dark-mode-1.png
new file mode 100644
index 0000000000..22adcfd775
Binary files /dev/null and b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-featured-app-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/MarketplaceApp.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/pages/__screenshots__/MarketplaceApp.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..c86f9687ba
Binary files /dev/null and b/ui/pages/__screenshots__/MarketplaceApp.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/MarketplaceApp.pw.tsx_default_base-view-dark-mode-1.png b/ui/pages/__screenshots__/MarketplaceApp.pw.tsx_default_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..f6f872df39
Binary files /dev/null and b/ui/pages/__screenshots__/MarketplaceApp.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/MarketplaceApp.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/MarketplaceApp.pw.tsx_default_mobile-base-view-1.png
new file mode 100644
index 0000000000..7f0580f794
Binary files /dev/null and b/ui/pages/__screenshots__/MarketplaceApp.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/MudWorlds.pw.tsx_default_default-view-mobile-1.png b/ui/pages/__screenshots__/MudWorlds.pw.tsx_default_default-view-mobile-1.png
new file mode 100644
index 0000000000..80d66abe5a
Binary files /dev/null and b/ui/pages/__screenshots__/MudWorlds.pw.tsx_default_default-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/MudWorlds.pw.tsx_mobile_default-view-mobile-1.png b/ui/pages/__screenshots__/MudWorlds.pw.tsx_mobile_default-view-mobile-1.png
new file mode 100644
index 0000000000..cd762283cb
Binary files /dev/null and b/ui/pages/__screenshots__/MudWorlds.pw.tsx_mobile_default-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/MyProfile.pw.tsx_default_without-address-1.png b/ui/pages/__screenshots__/MyProfile.pw.tsx_default_without-address-1.png
new file mode 100644
index 0000000000..5bb80bcc67
Binary files /dev/null and b/ui/pages/__screenshots__/MyProfile.pw.tsx_default_without-address-1.png differ
diff --git a/ui/pages/__screenshots__/MyProfile.pw.tsx_default_without-email-1.png b/ui/pages/__screenshots__/MyProfile.pw.tsx_default_without-email-1.png
new file mode 100644
index 0000000000..e3082a13d5
Binary files /dev/null and b/ui/pages/__screenshots__/MyProfile.pw.tsx_default_without-email-1.png differ
diff --git a/ui/pages/__screenshots__/NameDomain.pw.tsx_default_details-tab-1.png b/ui/pages/__screenshots__/NameDomain.pw.tsx_default_details-tab-1.png
index fba7f96f1c..f447676c81 100644
Binary files a/ui/pages/__screenshots__/NameDomain.pw.tsx_default_details-tab-1.png and b/ui/pages/__screenshots__/NameDomain.pw.tsx_default_details-tab-1.png differ
diff --git a/ui/pages/__screenshots__/NameDomain.pw.tsx_default_history-tab-mobile-1.png b/ui/pages/__screenshots__/NameDomain.pw.tsx_default_history-tab-mobile-1.png
index 3dc8d5da0b..4127885a46 100644
Binary files a/ui/pages/__screenshots__/NameDomain.pw.tsx_default_history-tab-mobile-1.png and b/ui/pages/__screenshots__/NameDomain.pw.tsx_default_history-tab-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/NameDomain.pw.tsx_mobile_history-tab-mobile-1.png b/ui/pages/__screenshots__/NameDomain.pw.tsx_mobile_history-tab-mobile-1.png
index 23c4f99ea9..c5a1c7df86 100644
Binary files a/ui/pages/__screenshots__/NameDomain.pw.tsx_mobile_history-tab-mobile-1.png and b/ui/pages/__screenshots__/NameDomain.pw.tsx_mobile_history-tab-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/NameDomains.pw.tsx_default_default-view-mobile-1.png b/ui/pages/__screenshots__/NameDomains.pw.tsx_default_default-view-mobile-1.png
index 81f0f7915c..9b338645ef 100644
Binary files a/ui/pages/__screenshots__/NameDomains.pw.tsx_default_default-view-mobile-1.png and b/ui/pages/__screenshots__/NameDomains.pw.tsx_default_default-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/NameDomains.pw.tsx_default_filters-1.png b/ui/pages/__screenshots__/NameDomains.pw.tsx_default_filters-1.png
new file mode 100644
index 0000000000..d26259d718
Binary files /dev/null and b/ui/pages/__screenshots__/NameDomains.pw.tsx_default_filters-1.png differ
diff --git a/ui/pages/__screenshots__/NameDomains.pw.tsx_mobile_default-view-mobile-1.png b/ui/pages/__screenshots__/NameDomains.pw.tsx_mobile_default-view-mobile-1.png
index f3520334cc..ac843e5d0b 100644
Binary files a/ui/pages/__screenshots__/NameDomains.pw.tsx_mobile_default-view-mobile-1.png and b/ui/pages/__screenshots__/NameDomains.pw.tsx_mobile_default-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/OptimisticL2Deposits.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/OptimisticL2Deposits.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..8b1327859e
Binary files /dev/null and b/ui/pages/__screenshots__/OptimisticL2Deposits.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/OptimisticL2Deposits.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/OptimisticL2Deposits.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..bc5134f3c3
Binary files /dev/null and b/ui/pages/__screenshots__/OptimisticL2Deposits.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/OptimisticL2DisputeGames.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/OptimisticL2DisputeGames.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..144544c2e6
Binary files /dev/null and b/ui/pages/__screenshots__/OptimisticL2DisputeGames.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/OptimisticL2DisputeGames.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/OptimisticL2DisputeGames.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..d3dc078d2d
Binary files /dev/null and b/ui/pages/__screenshots__/OptimisticL2DisputeGames.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/OptimisticL2OutputRoots.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/OptimisticL2OutputRoots.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..28b7856e17
Binary files /dev/null and b/ui/pages/__screenshots__/OptimisticL2OutputRoots.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/OptimisticL2OutputRoots.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/OptimisticL2OutputRoots.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..bfc3ae3dd2
Binary files /dev/null and b/ui/pages/__screenshots__/OptimisticL2OutputRoots.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/OptimisticL2TxnBatches.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/OptimisticL2TxnBatches.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..c665fa3977
Binary files /dev/null and b/ui/pages/__screenshots__/OptimisticL2TxnBatches.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/OptimisticL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/OptimisticL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..11fb5e84a0
Binary files /dev/null and b/ui/pages/__screenshots__/OptimisticL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/OptimisticL2Withdrawals.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/OptimisticL2Withdrawals.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..222bef3450
Binary files /dev/null and b/ui/pages/__screenshots__/OptimisticL2Withdrawals.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/OptimisticL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/OptimisticL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..6003bf795d
Binary files /dev/null and b/ui/pages/__screenshots__/OptimisticL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/Pool.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Pool.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..3f05bb9e09
Binary files /dev/null and b/ui/pages/__screenshots__/Pool.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Pool.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Pool.pw.tsx_default_base-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..9a1d6e1c5a
Binary files /dev/null and b/ui/pages/__screenshots__/Pool.pw.tsx_default_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Pool.pw.tsx_mobile_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Pool.pw.tsx_mobile_base-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..6014df238e
Binary files /dev/null and b/ui/pages/__screenshots__/Pool.pw.tsx_mobile_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Pools.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/pages/__screenshots__/Pools.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..d9bf9df153
Binary files /dev/null and b/ui/pages/__screenshots__/Pools.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Pools.pw.tsx_default_base-view-dark-mode-1.png b/ui/pages/__screenshots__/Pools.pw.tsx_default_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..cd86cf3bcb
Binary files /dev/null and b/ui/pages/__screenshots__/Pools.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Pools.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/Pools.pw.tsx_default_mobile-base-view-1.png
new file mode 100644
index 0000000000..84ed179a77
Binary files /dev/null and b/ui/pages/__screenshots__/Pools.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/RewardsDashboard.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/RewardsDashboard.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..afc97dc5f7
Binary files /dev/null and b/ui/pages/__screenshots__/RewardsDashboard.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/RewardsDashboard.pw.tsx_default_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/RewardsDashboard.pw.tsx_default_base-view-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..b784ffaf2b
Binary files /dev/null and b/ui/pages/__screenshots__/RewardsDashboard.pw.tsx_default_base-view-dark-mode-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/RewardsDashboard.pw.tsx_default_with-error-1.png b/ui/pages/__screenshots__/RewardsDashboard.pw.tsx_default_with-error-1.png
new file mode 100644
index 0000000000..67d98877d3
Binary files /dev/null and b/ui/pages/__screenshots__/RewardsDashboard.pw.tsx_default_with-error-1.png differ
diff --git a/ui/pages/__screenshots__/RewardsDashboard.pw.tsx_mobile_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/RewardsDashboard.pw.tsx_mobile_base-view-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..a80e084ce7
Binary files /dev/null and b/ui/pages/__screenshots__/RewardsDashboard.pw.tsx_mobile_base-view-dark-mode-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ScrollL2Deposits.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/ScrollL2Deposits.pw.tsx_default_base-view-1.png
new file mode 100644
index 0000000000..f06e0b8a83
Binary files /dev/null and b/ui/pages/__screenshots__/ScrollL2Deposits.pw.tsx_default_base-view-1.png differ
diff --git a/ui/pages/__screenshots__/ScrollL2Deposits.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/ScrollL2Deposits.pw.tsx_default_mobile-base-view-1.png
new file mode 100644
index 0000000000..a6c2306b73
Binary files /dev/null and b/ui/pages/__screenshots__/ScrollL2Deposits.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/ScrollL2TxnBatch.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/ScrollL2TxnBatch.pw.tsx_default_base-view-1.png
new file mode 100644
index 0000000000..ff00c4ad96
Binary files /dev/null and b/ui/pages/__screenshots__/ScrollL2TxnBatch.pw.tsx_default_base-view-1.png differ
diff --git a/ui/pages/__screenshots__/ScrollL2TxnBatch.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/ScrollL2TxnBatch.pw.tsx_default_mobile-base-view-1.png
new file mode 100644
index 0000000000..6e5199593b
Binary files /dev/null and b/ui/pages/__screenshots__/ScrollL2TxnBatch.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/ScrollL2TxnBatches.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/ScrollL2TxnBatches.pw.tsx_default_base-view-1.png
new file mode 100644
index 0000000000..1672fa617e
Binary files /dev/null and b/ui/pages/__screenshots__/ScrollL2TxnBatches.pw.tsx_default_base-view-1.png differ
diff --git a/ui/pages/__screenshots__/ScrollL2TxnBatches.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/ScrollL2TxnBatches.pw.tsx_default_mobile-base-view-1.png
new file mode 100644
index 0000000000..a669a1b0b8
Binary files /dev/null and b/ui/pages/__screenshots__/ScrollL2TxnBatches.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/ScrollL2Withdrawals.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/ScrollL2Withdrawals.pw.tsx_default_base-view-1.png
new file mode 100644
index 0000000000..714047e684
Binary files /dev/null and b/ui/pages/__screenshots__/ScrollL2Withdrawals.pw.tsx_default_base-view-1.png differ
diff --git a/ui/pages/__screenshots__/ScrollL2Withdrawals.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/ScrollL2Withdrawals.pw.tsx_default_mobile-base-view-1.png
new file mode 100644
index 0000000000..5be17a762a
Binary files /dev/null and b/ui/pages/__screenshots__/ScrollL2Withdrawals.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_dark-color-mode_search-by-name-mobile-dark-mode-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_dark-color-mode_search-by-name-mobile-dark-mode-1.png
index febacb309f..59842dbc7f 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_dark-color-mode_search-by-name-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_dark-color-mode_search-by-name-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_block-countdown-no-results-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_block-countdown-no-results-1.png
new file mode 100644
index 0000000000..49f7ad2d73
Binary files /dev/null and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_block-countdown-no-results-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_block-countdown-with-results-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_block-countdown-with-results-mobile-1.png
new file mode 100644
index 0000000000..e9279ab1bf
Binary files /dev/null and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_block-countdown-with-results-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-address-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-address-hash-mobile-1.png
index d88025d48d..0c8827ca15 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-address-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-address-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-blob-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-blob-hash-mobile-1.png
new file mode 100644
index 0000000000..02d21f9a05
Binary files /dev/null and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-blob-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-block-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-block-hash-mobile-1.png
index 650e6f77af..576c488d8e 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-block-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-block-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-block-number-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-block-number-mobile-1.png
index aa030d6a62..8389d91c94 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-block-number-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-block-number-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-domain-name-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-domain-name-mobile-1.png
new file mode 100644
index 0000000000..7d3fd3d764
Binary files /dev/null and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-domain-name-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-name-mobile-dark-mode-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-name-mobile-dark-mode-1.png
index 22a47915c5..b5885bfbfb 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-name-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-name-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-tx-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-tx-hash-mobile-1.png
index 77929a19f8..68e947e592 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-tx-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-tx-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-user-op-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-user-op-hash-mobile-1.png
index a23bc41866..1e5894c849 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-user-op-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-user-op-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_with-apps-default-view-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_with-apps-default-view-mobile-1.png
index 70e925a163..b48a1808f9 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_with-apps-default-view-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_with-apps-default-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_block-countdown-with-results-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_block-countdown-with-results-mobile-1.png
new file mode 100644
index 0000000000..3215ca0ee4
Binary files /dev/null and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_block-countdown-with-results-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-address-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-address-hash-mobile-1.png
index 4a4bcc4ec3..4b993f42bf 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-address-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-address-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-blob-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-blob-hash-mobile-1.png
new file mode 100644
index 0000000000..003920503f
Binary files /dev/null and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-blob-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-block-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-block-hash-mobile-1.png
index 9e8c7114c3..dade905a4e 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-block-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-block-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-block-number-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-block-number-mobile-1.png
index 95c8ef3f0a..bc9d897f8b 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-block-number-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-block-number-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-domain-name-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-domain-name-mobile-1.png
new file mode 100644
index 0000000000..ae281c263a
Binary files /dev/null and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-domain-name-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-name-mobile-dark-mode-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-name-mobile-dark-mode-1.png
index d995bb1565..da3a90b01b 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-name-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-name-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-tx-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-tx-hash-mobile-1.png
index 129fef00aa..190d9f3418 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-tx-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-tx-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-user-op-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-user-op-hash-mobile-1.png
index bb081b0e6c..93f8149773 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-user-op-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-user-op-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_with-apps-default-view-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_with-apps-default-view-mobile-1.png
index eb326db091..32901d138a 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_with-apps-default-view-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_with-apps-default-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ShibariumDeposits.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ShibariumDeposits.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..68e3daf659
Binary files /dev/null and b/ui/pages/__screenshots__/ShibariumDeposits.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ShibariumDeposits.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ShibariumDeposits.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..a7622f1d4d
Binary files /dev/null and b/ui/pages/__screenshots__/ShibariumDeposits.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ShibariumWithdrawals.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ShibariumWithdrawals.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..117f121c20
Binary files /dev/null and b/ui/pages/__screenshots__/ShibariumWithdrawals.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ShibariumWithdrawals.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ShibariumWithdrawals.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..1136b55cc1
Binary files /dev/null and b/ui/pages/__screenshots__/ShibariumWithdrawals.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/Token.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/Token.pw.tsx_default_base-view-1.png
index e8e194d881..7e71ba3511 100644
Binary files a/ui/pages/__screenshots__/Token.pw.tsx_default_base-view-1.png and b/ui/pages/__screenshots__/Token.pw.tsx_default_base-view-1.png differ
diff --git a/ui/pages/__screenshots__/Token.pw.tsx_default_bridged-token-1.png b/ui/pages/__screenshots__/Token.pw.tsx_default_bridged-token-1.png
index 6288560904..c6b0ee15fc 100644
Binary files a/ui/pages/__screenshots__/Token.pw.tsx_default_bridged-token-1.png and b/ui/pages/__screenshots__/Token.pw.tsx_default_bridged-token-1.png differ
diff --git a/ui/pages/__screenshots__/Token.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/Token.pw.tsx_default_mobile-base-view-1.png
index bf6ba7e403..50376fedee 100644
Binary files a/ui/pages/__screenshots__/Token.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/Token.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/Token.pw.tsx_default_mobile-with-verified-info-1.png b/ui/pages/__screenshots__/Token.pw.tsx_default_mobile-with-verified-info-1.png
index 39df838aae..ef59ef7cc9 100644
Binary files a/ui/pages/__screenshots__/Token.pw.tsx_default_mobile-with-verified-info-1.png and b/ui/pages/__screenshots__/Token.pw.tsx_default_mobile-with-verified-info-1.png differ
diff --git a/ui/pages/__screenshots__/Token.pw.tsx_default_with-verified-info-1.png b/ui/pages/__screenshots__/Token.pw.tsx_default_with-verified-info-1.png
index 191f0b5a25..0796d85fd2 100644
Binary files a/ui/pages/__screenshots__/Token.pw.tsx_default_with-verified-info-1.png and b/ui/pages/__screenshots__/Token.pw.tsx_default_with-verified-info-1.png differ
diff --git a/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-1.png b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-1.png
new file mode 100644
index 0000000000..f1ac7bc9dc
Binary files /dev/null and b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-1.png differ
diff --git a/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-2.png b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-2.png
new file mode 100644
index 0000000000..87a2fd86a3
Binary files /dev/null and b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-2.png differ
diff --git a/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-3.png b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-3.png
new file mode 100644
index 0000000000..5159364a17
Binary files /dev/null and b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-3.png differ
diff --git a/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-failed-1.png b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-failed-1.png
new file mode 100644
index 0000000000..9954fd029b
Binary files /dev/null and b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-failed-1.png differ
diff --git a/ui/pages/__screenshots__/TokenTransfers.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/TokenTransfers.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..41da7a676b
Binary files /dev/null and b/ui/pages/__screenshots__/TokenTransfers.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/TokenTransfers.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/TokenTransfers.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..47f87a1db0
Binary files /dev/null and b/ui/pages/__screenshots__/TokenTransfers.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/Tokens.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Tokens.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png
index 285d04eb9d..ca396488ac 100644
Binary files a/ui/pages/__screenshots__/Tokens.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Tokens.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Tokens.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-2.png b/ui/pages/__screenshots__/Tokens.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-2.png
index 68fc0464e7..5545d2c47c 100644
Binary files a/ui/pages/__screenshots__/Tokens.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-2.png and b/ui/pages/__screenshots__/Tokens.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-2.png differ
diff --git a/ui/pages/__screenshots__/Tokens.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Tokens.pw.tsx_default_base-view-mobile-dark-mode-1.png
index b4594c098b..359dae45df 100644
Binary files a/ui/pages/__screenshots__/Tokens.pw.tsx_default_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Tokens.pw.tsx_default_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Tokens.pw.tsx_default_base-view-mobile-dark-mode-2.png b/ui/pages/__screenshots__/Tokens.pw.tsx_default_base-view-mobile-dark-mode-2.png
index db9057c17a..5c5a727d96 100644
Binary files a/ui/pages/__screenshots__/Tokens.pw.tsx_default_base-view-mobile-dark-mode-2.png and b/ui/pages/__screenshots__/Tokens.pw.tsx_default_base-view-mobile-dark-mode-2.png differ
diff --git a/ui/pages/__screenshots__/Tokens.pw.tsx_default_bridged-tokens-base-view-1.png b/ui/pages/__screenshots__/Tokens.pw.tsx_default_bridged-tokens-base-view-1.png
index edf354b688..47e895c8dc 100644
Binary files a/ui/pages/__screenshots__/Tokens.pw.tsx_default_bridged-tokens-base-view-1.png and b/ui/pages/__screenshots__/Tokens.pw.tsx_default_bridged-tokens-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/Tokens.pw.tsx_default_bridged-tokens-base-view-2.png b/ui/pages/__screenshots__/Tokens.pw.tsx_default_bridged-tokens-base-view-2.png
index 630e5f8737..a029be2866 100644
Binary files a/ui/pages/__screenshots__/Tokens.pw.tsx_default_bridged-tokens-base-view-2.png and b/ui/pages/__screenshots__/Tokens.pw.tsx_default_bridged-tokens-base-view-2.png differ
diff --git a/ui/pages/__screenshots__/Tokens.pw.tsx_mobile_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Tokens.pw.tsx_mobile_base-view-mobile-dark-mode-1.png
index a5d0f10c5b..70e89b251a 100644
Binary files a/ui/pages/__screenshots__/Tokens.pw.tsx_mobile_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Tokens.pw.tsx_mobile_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Tokens.pw.tsx_mobile_base-view-mobile-dark-mode-2.png b/ui/pages/__screenshots__/Tokens.pw.tsx_mobile_base-view-mobile-dark-mode-2.png
index 5dee58eb04..1af1787cd2 100644
Binary files a/ui/pages/__screenshots__/Tokens.pw.tsx_mobile_base-view-mobile-dark-mode-2.png and b/ui/pages/__screenshots__/Tokens.pw.tsx_mobile_base-view-mobile-dark-mode-2.png differ
diff --git a/ui/pages/__screenshots__/UserOp.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/UserOp.pw.tsx_default_base-view-1.png
index eb4f533595..2aa4b1d620 100644
Binary files a/ui/pages/__screenshots__/UserOp.pw.tsx_default_base-view-1.png and b/ui/pages/__screenshots__/UserOp.pw.tsx_default_base-view-1.png differ
diff --git a/ui/pages/__screenshots__/UserOp.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/UserOp.pw.tsx_default_mobile-base-view-1.png
index fbe5973dc2..ad580e51bd 100644
Binary files a/ui/pages/__screenshots__/UserOp.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/UserOp.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/UserOps.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/UserOps.pw.tsx_default_base-view-mobile-1.png
index 9df2e3e44e..55ebee5eb4 100644
Binary files a/ui/pages/__screenshots__/UserOps.pw.tsx_default_base-view-mobile-1.png and b/ui/pages/__screenshots__/UserOps.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/UserOps.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/UserOps.pw.tsx_mobile_base-view-mobile-1.png
index 8f1b4ce2d9..f9e3f15be5 100644
Binary files a/ui/pages/__screenshots__/UserOps.pw.tsx_mobile_base-view-mobile-1.png and b/ui/pages/__screenshots__/UserOps.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ValidatorsBlackfort.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ValidatorsBlackfort.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..d8519247b3
Binary files /dev/null and b/ui/pages/__screenshots__/ValidatorsBlackfort.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ValidatorsBlackfort.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ValidatorsBlackfort.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..1a3fa59f3f
Binary files /dev/null and b/ui/pages/__screenshots__/ValidatorsBlackfort.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ValidatorsStability.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ValidatorsStability.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..9b3e77904c
Binary files /dev/null and b/ui/pages/__screenshots__/ValidatorsStability.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ValidatorsStability.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ValidatorsStability.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..df5142cc89
Binary files /dev/null and b/ui/pages/__screenshots__/ValidatorsStability.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/VerifiedAddresses.pw.tsx_default_address-verification-flow-1.png b/ui/pages/__screenshots__/VerifiedAddresses.pw.tsx_default_address-verification-flow-1.png
index fb50f6c924..da01a3288c 100644
Binary files a/ui/pages/__screenshots__/VerifiedAddresses.pw.tsx_default_address-verification-flow-1.png and b/ui/pages/__screenshots__/VerifiedAddresses.pw.tsx_default_address-verification-flow-1.png differ
diff --git a/ui/pages/__screenshots__/VerifiedAddresses.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/VerifiedAddresses.pw.tsx_default_base-view-mobile-1.png
index 0ea5398010..aa40640c47 100644
Binary files a/ui/pages/__screenshots__/VerifiedAddresses.pw.tsx_default_base-view-mobile-1.png and b/ui/pages/__screenshots__/VerifiedAddresses.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/VerifiedAddresses.pw.tsx_default_user-without-email-1.png b/ui/pages/__screenshots__/VerifiedAddresses.pw.tsx_default_user-without-email-1.png
new file mode 100644
index 0000000000..46b90fe59e
Binary files /dev/null and b/ui/pages/__screenshots__/VerifiedAddresses.pw.tsx_default_user-without-email-1.png differ
diff --git a/ui/pages/__screenshots__/VerifiedAddresses.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/VerifiedAddresses.pw.tsx_mobile_base-view-mobile-1.png
index 33b6c84d8e..032f8b07cc 100644
Binary files a/ui/pages/__screenshots__/VerifiedAddresses.pw.tsx_mobile_base-view-mobile-1.png and b/ui/pages/__screenshots__/VerifiedAddresses.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_default_base-view-mobile-1.png
index b263c05a63..20d75441c8 100644
Binary files a/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_default_base-view-mobile-1.png and b/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_mobile_base-view-mobile-1.png
index cc307a2cae..e002755167 100644
Binary files a/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_mobile_base-view-mobile-1.png and b/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/Withdrawals.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/Withdrawals.pw.tsx_default_base-view-mobile-1.png
deleted file mode 100644
index 6d40ccf1aa..0000000000
Binary files a/ui/pages/__screenshots__/Withdrawals.pw.tsx_default_base-view-mobile-1.png and /dev/null differ
diff --git a/ui/pages/__screenshots__/Withdrawals.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/Withdrawals.pw.tsx_mobile_base-view-mobile-1.png
deleted file mode 100644
index a74f498008..0000000000
Binary files a/ui/pages/__screenshots__/Withdrawals.pw.tsx_mobile_base-view-mobile-1.png and /dev/null differ
diff --git a/ui/pages/__screenshots__/ZkEvmL2Deposits.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ZkEvmL2Deposits.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..70d10a696c
Binary files /dev/null and b/ui/pages/__screenshots__/ZkEvmL2Deposits.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ZkEvmL2Deposits.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ZkEvmL2Deposits.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..ddbee0149b
Binary files /dev/null and b/ui/pages/__screenshots__/ZkEvmL2Deposits.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_base-view-1.png
index 342942ece0..03bbc13b7e 100644
Binary files a/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_base-view-1.png and b/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_base-view-1.png differ
diff --git a/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_mobile-base-view-1.png
index d978d60f7a..603e1411b5 100644
Binary files a/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/ZkEvmL2TxnBatches.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ZkEvmL2TxnBatches.pw.tsx_default_base-view-mobile-1.png
index 99c8067c46..276455fcff 100644
Binary files a/ui/pages/__screenshots__/ZkEvmL2TxnBatches.pw.tsx_default_base-view-mobile-1.png and b/ui/pages/__screenshots__/ZkEvmL2TxnBatches.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ZkEvmL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ZkEvmL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png
index 8052eb9ef9..37636d8645 100644
Binary files a/ui/pages/__screenshots__/ZkEvmL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png and b/ui/pages/__screenshots__/ZkEvmL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ZkEvmL2Withdrawals.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ZkEvmL2Withdrawals.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..96e9d5d5a5
Binary files /dev/null and b/ui/pages/__screenshots__/ZkEvmL2Withdrawals.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ZkEvmL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ZkEvmL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..aa4d27c6e7
Binary files /dev/null and b/ui/pages/__screenshots__/ZkEvmL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_base-view-1.png
new file mode 100644
index 0000000000..74d4cff247
Binary files /dev/null and b/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_base-view-1.png differ
diff --git a/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_mobile-base-view-1.png
new file mode 100644
index 0000000000..685856043f
Binary files /dev/null and b/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/ZkSyncL2TxnBatches.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ZkSyncL2TxnBatches.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..a3c81bf446
Binary files /dev/null and b/ui/pages/__screenshots__/ZkSyncL2TxnBatches.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ZkSyncL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ZkSyncL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..a4c8f9bd73
Binary files /dev/null and b/ui/pages/__screenshots__/ZkSyncL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pool/PoolInfo.tsx b/ui/pool/PoolInfo.tsx
new file mode 100644
index 0000000000..fed9a75faf
--- /dev/null
+++ b/ui/pool/PoolInfo.tsx
@@ -0,0 +1,114 @@
+import { Grid, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { Pool } from 'types/api/pools';
+
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+
+type Props = {
+  data: Pool;
+  isPlaceholderData: boolean;
+};
+
+const PoolInfo = ({ data, isPlaceholderData }: Props) => {
+  return (
+    <Grid
+      columnGap={ 8 }
+      rowGap={{ base: 1, lg: 3 }}
+      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
+      overflow="hidden"
+    >
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="The base token in a liquidity pool pair"
+      >
+        Base token
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <TokenEntity
+          token={{
+            type: 'ERC-20',
+            address: data.base_token_address,
+            name: data.base_token_symbol,
+            symbol: data.base_token_symbol,
+            icon_url: data.base_token_icon_url,
+          }}
+          isLoading={ isPlaceholderData }
+        />
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="The quote token in a liquidity pool pair"
+      >
+        Quote token
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <TokenEntity
+          token={{
+            type: 'ERC-20',
+            address: data.quote_token_address,
+            name: data.quote_token_symbol,
+            symbol: data.quote_token_symbol,
+            icon_url: data.quote_token_icon_url,
+          }}
+          isLoading={ isPlaceholderData }
+        />
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Fully Diluted Valuation: theoretical market cap if all tokens were in circulation"
+      >
+        FDV
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          ${ Number(data.fully_diluted_valuation_usd).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
+        </Skeleton>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Current market capitalization of the pool"
+      >
+        Market cap
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          ${ Number(data.market_cap_usd).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
+        </Skeleton>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Current liquidity of the pool"
+      >
+        Liquidity
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          ${ Number(data.liquidity).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
+        </Skeleton>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="DEX where the pool is traded"
+      >
+        DEX
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          { data.dex.name }
+        </Skeleton>
+      </DetailsInfoItem.Value>
+
+      <DetailsSponsoredItem isLoading={ isPlaceholderData }/>
+    </Grid>
+  );
+};
+
+export default PoolInfo;
diff --git a/ui/pools/PoolsListItem.tsx b/ui/pools/PoolsListItem.tsx
new file mode 100644
index 0000000000..4c0f92cdca
--- /dev/null
+++ b/ui/pools/PoolsListItem.tsx
@@ -0,0 +1,68 @@
+import { Skeleton, Image } from '@chakra-ui/react';
+import React from 'react';
+
+import type { Pool } from 'types/api/pools';
+
+import getPoolLinks from 'lib/pools/getPoolLinks';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import PoolEntity from 'ui/shared/entities/pool/PoolEntity';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+
+type Props = {
+  item: Pool;
+  isLoading?: boolean;
+};
+
+const UserOpsListItem = ({ item, isLoading }: Props) => {
+  const externalLinks = getPoolLinks(item);
+  return (
+    <ListItemMobileGrid.Container gridTemplateColumns="100px auto">
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Pool</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <PoolEntity pool={ item } fontWeight={ 700 } isLoading={ isLoading }/>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Contract</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <AddressEntity address={{ hash: item.contract_address }} noIcon isLoading={ isLoading }/>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>FDV</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading }>
+          ${ Number(item.fully_diluted_valuation_usd).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Market cap</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading }>
+          ${ Number(item.market_cap_usd).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Liquidity</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading }>
+          ${ Number(item.liquidity).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>View in</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading }>
+          { externalLinks.map((link) => (
+            <LinkExternal href={ link.url } key={ link.url } display="inline-flex">
+              <Image src={ link.image } alt={ link.title } boxSize={ 5 } mr={ 2 }/>
+              { link.title }
+            </LinkExternal>
+          )) }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default UserOpsListItem;
diff --git a/ui/pools/PoolsTable.tsx b/ui/pools/PoolsTable.tsx
new file mode 100644
index 0000000000..167e9ec697
--- /dev/null
+++ b/ui/pools/PoolsTable.tsx
@@ -0,0 +1,50 @@
+import { Table, Tbody, Th, Tr, Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import type { Pool } from 'types/api/pools';
+
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import Hint from 'ui/shared/Hint';
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import PoolsTableItem from './PoolsTableItem';
+
+type Props = {
+  items: Array<Pool>;
+  page: number;
+  isLoading?: boolean;
+  top?: number;
+};
+
+const PoolsTable = ({ items, page, isLoading, top }: Props) => {
+  return (
+    <Table>
+      <Thead top={ top ?? ACTION_BAR_HEIGHT_DESKTOP }>
+        <Tr>
+          <Th width="70%">Pool</Th>
+          <Th width="30%">DEX </Th>
+          <Th width="120px" isNumeric>
+            <Flex alignItems="center" justifyContent="end">
+              FDV
+              <Hint
+                label="Fully Diluted Valuation: theoretical market cap if all tokens were in circulation"
+                boxSize={ 5 }
+                ml={ 1 }
+              />
+            </Flex>
+          </Th>
+          <Th width="120px" isNumeric>Market cap</Th>
+          <Th width="120px" isNumeric>Liquidity</Th>
+          <Th width="75px" isNumeric>View in</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <PoolsTableItem key={ item.contract_address + (isLoading ? index : '') } item={ item } index={ index } page={ page } isLoading={ isLoading }/>
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default PoolsTable;
diff --git a/ui/pools/PoolsTableItem.tsx b/ui/pools/PoolsTableItem.tsx
new file mode 100644
index 0000000000..3f29542136
--- /dev/null
+++ b/ui/pools/PoolsTableItem.tsx
@@ -0,0 +1,75 @@
+import { Flex, Box, Td, Tr, Skeleton, Text, Image, Tooltip } from '@chakra-ui/react';
+import React from 'react';
+
+import type { Pool } from 'types/api/pools';
+
+import getItemIndex from 'lib/getItemIndex';
+import getPoolLinks from 'lib/pools/getPoolLinks';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import PoolEntity from 'ui/shared/entities/pool/PoolEntity';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+
+type Props = {
+  item: Pool;
+  index: number;
+  page: number;
+  isLoading?: boolean;
+};
+
+const PoolsTableItem = ({
+  item,
+  page,
+  index,
+  isLoading,
+}: Props) => {
+  const externalLinks = getPoolLinks(item);
+
+  return (
+    <Tr>
+      <Td>
+        <Flex gap={ 2 } alignItems="start">
+          <Skeleton isLoaded={ !isLoading }>
+            <Text px={ 2 }>{ getItemIndex(index, page) }</Text>
+          </Skeleton>
+          <Box>
+            <PoolEntity pool={ item } fontWeight={ 700 } mb={ 2 } isLoading={ isLoading }/>
+            <AddressEntity address={{ hash: item.contract_address }} noIcon isLoading={ isLoading }/>
+          </Box>
+        </Flex>
+      </Td>
+      <Td>
+        <Skeleton isLoaded={ !isLoading }>{ item.dex.name }</Skeleton>
+      </Td>
+      <Td isNumeric>
+        <Skeleton isLoaded={ !isLoading }>
+          ${ Number(item.fully_diluted_valuation_usd).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
+        </Skeleton>
+      </Td>
+      <Td isNumeric>
+        <Skeleton isLoaded={ !isLoading }>
+          ${ Number(item.market_cap_usd).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
+        </Skeleton>
+      </Td>
+      <Td isNumeric>
+        <Skeleton isLoaded={ !isLoading }>
+          ${ Number(item.liquidity).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
+        </Skeleton>
+      </Td>
+      <Td isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="flex" gap={ 2 } justifyContent="center">
+          { externalLinks.map((link) => (
+            <Tooltip label={ link.title } key={ link.url }>
+              <Box display="inline-block">
+                <LinkExternal href={ link.url } display="inline-flex">
+                  <Image src={ link.image } alt={ link.title } boxSize={ 5 }/>
+                </LinkExternal>
+              </Box>
+            </Tooltip>
+          )) }
+        </Skeleton>
+      </Td>
+    </Tr>
+  );
+};
+
+export default PoolsTableItem;
diff --git a/ui/privateTags/AddressModal/AddressForm.tsx b/ui/privateTags/AddressModal/AddressForm.tsx
index 42884ce01b..b0dca6226a 100644
--- a/ui/privateTags/AddressModal/AddressForm.tsx
+++ b/ui/privateTags/AddressModal/AddressForm.tsx
@@ -1,21 +1,19 @@
 import {
   Box,
   Button,
-  useColorModeValue,
 } from '@chakra-ui/react';
 import { useMutation } from '@tanstack/react-query';
-import React, { useCallback, useState } from 'react';
-import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
-import { useForm, Controller } from 'react-hook-form';
+import React, { useState } from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
 
 import type { AddressTag, AddressTagErrors } from 'types/api/account';
 
 import type { ResourceErrorAccount } from 'lib/api/resources';
 import useApiFetch from 'lib/api/useApiFetch';
 import getErrorMessage from 'lib/getErrorMessage';
-import { ADDRESS_REGEXP } from 'lib/validations/address';
-import AddressInput from 'ui/shared/AddressInput';
-import TagInput from 'ui/shared/TagInput';
+import FormFieldAddress from 'ui/shared/forms/fields/FormFieldAddress';
+import FormFieldText from 'ui/shared/forms/fields/FormFieldText';
 
 const TAG_MAX_LENGTH = 35;
 
@@ -24,17 +22,17 @@ type Props = {
   onClose: () => void;
   onSuccess: () => Promise<void>;
   setAlertVisible: (isAlertVisible: boolean) => void;
-}
+};
 
 type Inputs = {
   address: string;
   tag: string;
-}
+};
 
 const AddressForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVisible }) => {
   const apiFetch = useApiFetch();
   const [ pending, setPending ] = useState(false);
-  const { control, handleSubmit, formState: { errors, isDirty }, setError } = useForm<Inputs>({
+  const formApi = useForm<Inputs>({
     mode: 'onTouched',
     defaultValues: {
       address: data?.address_hash || '',
@@ -42,9 +40,7 @@ const AddressForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVisibl
     },
   });
 
-  const formBackgroundColor = useColorModeValue('white', 'gray.900');
-
-  const { mutate } = useMutation({
+  const { mutateAsync } = useMutation({
     mutationFn: (formData: Inputs) => {
       const body = {
         name: formData?.tag,
@@ -54,7 +50,7 @@ const AddressForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVisibl
       const isEdit = data?.id;
       if (isEdit) {
         return apiFetch('private_tags_address', {
-          pathParams: { id: data.id },
+          pathParams: { id: String(data.id) },
           fetchParams: { method: 'PUT', body },
         });
       }
@@ -65,10 +61,10 @@ const AddressForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVisibl
       setPending(false);
       const errorMap = error.payload?.errors;
       if (errorMap?.address_hash || errorMap?.name) {
-        errorMap?.address_hash && setError('address', { type: 'custom', message: getErrorMessage(errorMap, 'address_hash') });
-        errorMap?.name && setError('tag', { type: 'custom', message: getErrorMessage(errorMap, 'name') });
+        errorMap?.address_hash && formApi.setError('address', { type: 'custom', message: getErrorMessage(errorMap, 'address_hash') });
+        errorMap?.name && formApi.setError('tag', { type: 'custom', message: getErrorMessage(errorMap, 'name') });
       } else if (errorMap?.identity_id) {
-        setError('address', { type: 'custom', message: getErrorMessage(errorMap, 'identity_id') });
+        formApi.setError('address', { type: 'custom', message: getErrorMessage(errorMap, 'identity_id') });
       } else {
         setAlertVisible(true);
       }
@@ -80,55 +76,43 @@ const AddressForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVisibl
     },
   });
 
-  const onSubmit: SubmitHandler<Inputs> = (formData) => {
+  const onSubmit: SubmitHandler<Inputs> = async(formData) => {
     setAlertVisible(false);
     setPending(true);
-    mutate(formData);
+    await mutateAsync(formData);
   };
 
-  const renderAddressInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'address'>}) => {
-    return <AddressInput<Inputs, 'address'> field={ field } error={ errors.address } backgroundColor={ formBackgroundColor }/>;
-  }, [ errors, formBackgroundColor ]);
-
-  const renderTagInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'tag'>}) => {
-    return <TagInput<Inputs, 'tag'> field={ field } error={ errors.tag } backgroundColor={ formBackgroundColor }/>;
-  }, [ errors, formBackgroundColor ]);
-
   return (
-    <form noValidate onSubmit={ handleSubmit(onSubmit) }>
-      <Box marginBottom={ 5 }>
-        <Controller
+    <FormProvider { ...formApi }>
+      <form noValidate onSubmit={ formApi.handleSubmit(onSubmit) }>
+        <FormFieldAddress<Inputs>
           name="address"
-          control={ control }
-          rules={{
-            pattern: ADDRESS_REGEXP,
-            required: true,
-          }}
-          render={ renderAddressInput }
+          isRequired
+          bgColor="dialog_bg"
+          mb={ 5 }
         />
-      </Box>
-      <Box marginBottom={ 8 }>
-        <Controller
+        <FormFieldText<Inputs>
           name="tag"
-          control={ control }
+          placeholder="Private tag (max 35 characters)"
+          isRequired
           rules={{
             maxLength: TAG_MAX_LENGTH,
-            required: true,
           }}
-          render={ renderTagInput }
+          bgColor="dialog_bg"
+          mb={ 8 }
         />
-      </Box>
-      <Box marginTop={ 8 }>
-        <Button
-          size="lg"
-          type="submit"
-          isDisabled={ !isDirty }
-          isLoading={ pending }
-        >
-          { data ? 'Save changes' : 'Add tag' }
-        </Button>
-      </Box>
-    </form>
+        <Box marginTop={ 8 }>
+          <Button
+            size="lg"
+            type="submit"
+            isDisabled={ !formApi.formState.isDirty }
+            isLoading={ pending }
+          >
+            { data ? 'Save changes' : 'Add tag' }
+          </Button>
+        </Box>
+      </form>
+    </FormProvider>
   );
 };
 
diff --git a/ui/privateTags/AddressModal/AddressModal.tsx b/ui/privateTags/AddressModal/AddressModal.tsx
index 2e9f7b1370..2b5d1d31c2 100644
--- a/ui/privateTags/AddressModal/AddressModal.tsx
+++ b/ui/privateTags/AddressModal/AddressModal.tsx
@@ -13,7 +13,7 @@ type Props = {
   onSuccess: () => Promise<void>;
   data?: Partial<AddressTag>;
   pageType: string;
-}
+};
 
 const AddressModal: React.FC<Props> = ({ isOpen, onClose, onSuccess, data, pageType }) => {
   const title = data?.id ? 'Edit address tag' : 'New address tag';
diff --git a/ui/privateTags/AddressTagTable/AddressTagTable.tsx b/ui/privateTags/AddressTagTable/AddressTagTable.tsx
index 2508f3e80f..f470cecb7d 100644
--- a/ui/privateTags/AddressTagTable/AddressTagTable.tsx
+++ b/ui/privateTags/AddressTagTable/AddressTagTable.tsx
@@ -22,7 +22,7 @@ interface Props {
 
 const AddressTagTable = ({ data, onDeleteClick, onEditClick, isLoading, top }: Props) => {
   return (
-    <Table variant="simple" minWidth="600px">
+    <Table minWidth="600px">
       <TheadSticky top={ top }>
         <Tr>
           <Th width="60%">Address</Th>
@@ -34,7 +34,7 @@ const AddressTagTable = ({ data, onDeleteClick, onEditClick, isLoading, top }: P
         { data?.map((item: AddressTag, index: number) => (
           <AddressTagTableItem
             item={ item }
-            key={ item.id + (isLoading ? index : '') }
+            key={ item.id + (isLoading ? String(index) : '') }
             onDeleteClick={ onDeleteClick }
             onEditClick={ onEditClick }
             isLoading={ isLoading }
diff --git a/ui/privateTags/DeletePrivateTagModal.tsx b/ui/privateTags/DeletePrivateTagModal.tsx
index 1211ea231c..be807b2188 100644
--- a/ui/privateTags/DeletePrivateTagModal.tsx
+++ b/ui/privateTags/DeletePrivateTagModal.tsx
@@ -13,7 +13,7 @@ type Props = {
   onClose: () => void;
   data: AddressTag | TransactionTag;
   type: 'address' | 'transaction';
-}
+};
 
 const DeletePrivateTagModal: React.FC<Props> = ({ isOpen, onClose, data, type }) => {
   const tag = data.name;
@@ -25,7 +25,7 @@ const DeletePrivateTagModal: React.FC<Props> = ({ isOpen, onClose, data, type })
   const mutationFn = useCallback(() => {
     const resourceName = type === 'address' ? 'private_tags_address' : 'private_tags_tx';
     return apiFetch(resourceName, {
-      pathParams: { id: data.id },
+      pathParams: { id: String(data.id) },
       fetchParams: { method: 'DELETE' },
     });
   }, [ type, apiFetch, data.id ]);
diff --git a/ui/privateTags/PrivateAddressTags.tsx b/ui/privateTags/PrivateAddressTags.tsx
index 12037d7c17..17498438eb 100644
--- a/ui/privateTags/PrivateAddressTags.tsx
+++ b/ui/privateTags/PrivateAddressTags.tsx
@@ -6,7 +6,7 @@ import type { AddressTag } from 'types/api/account';
 import { PAGE_TYPE_DICT } from 'lib/mixpanel/getPageType';
 import { PRIVATE_TAG_ADDRESS } from 'stubs/account';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -61,7 +61,7 @@ const PrivateAddressTags = () => {
         { addressTagsData?.items.map((item: AddressTag, index: number) => (
           <AddressTagListItem
             item={ item }
-            key={ item.id + (isPlaceholderData ? index : '') }
+            key={ item.id + (isPlaceholderData ? String(index) : '') }
             onDeleteClick={ onDeleteClick }
             onEditClick={ onEditClick }
             isLoading={ isPlaceholderData }
@@ -74,7 +74,7 @@ const PrivateAddressTags = () => {
           data={ addressTagsData?.items }
           onDeleteClick={ onDeleteClick }
           onEditClick={ onEditClick }
-          top={ pagination.isVisible ? 80 : 0 }
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
         />
       </Box>
     </>
@@ -104,7 +104,7 @@ const PrivateAddressTags = () => {
           size="lg"
           onClick={ addressModalProps.onOpen }
         >
-            Add address tag
+          Add address tag
         </Button>
       </Skeleton>
       <AddressModal
diff --git a/ui/privateTags/PrivateTransactionTags.tsx b/ui/privateTags/PrivateTransactionTags.tsx
index ff0c6ee27a..d06c4f3b03 100644
--- a/ui/privateTags/PrivateTransactionTags.tsx
+++ b/ui/privateTags/PrivateTransactionTags.tsx
@@ -5,7 +5,7 @@ import type { TransactionTag } from 'types/api/account';
 
 import { PRIVATE_TAG_TX } from 'stubs/account';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -52,8 +52,8 @@ const PrivateTransactionTags = () => {
 
   const description = (
     <AccountPageDescription>
-        Use private transaction tags to label any transactions of interest.
-        Private tags are saved in your account and are only visible when you are logged in.
+      Use private transaction tags to label any transactions of interest.
+      Private tags are saved in your account and are only visible when you are logged in.
     </AccountPageDescription>
   );
 
@@ -62,7 +62,7 @@ const PrivateTransactionTags = () => {
       <Box display={{ base: 'block', lg: 'none' }}>
         { transactionTagsData?.items.map((item, index) => (
           <TransactionTagListItem
-            key={ item.id + (isPlaceholderData ? index : '') }
+            key={ item.id + (isPlaceholderData ? String(index) : '') }
             item={ item }
             isLoading={ isPlaceholderData }
             onDeleteClick={ onDeleteClick }
@@ -76,7 +76,7 @@ const PrivateTransactionTags = () => {
           isLoading={ isPlaceholderData }
           onDeleteClick={ onDeleteClick }
           onEditClick={ onEditClick }
-          top={ pagination.isVisible ? 80 : 0 }
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
         />
       </Box>
     </>
diff --git a/ui/privateTags/TransactionModal/TransactionForm.tsx b/ui/privateTags/TransactionModal/TransactionForm.tsx
index dc3d11ac41..85413e046e 100644
--- a/ui/privateTags/TransactionModal/TransactionForm.tsx
+++ b/ui/privateTags/TransactionModal/TransactionForm.tsx
@@ -1,12 +1,11 @@
 import {
   Box,
   Button,
-  useColorModeValue,
 } from '@chakra-ui/react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import React, { useCallback, useState } from 'react';
-import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
-import { useForm, Controller } from 'react-hook-form';
+import React, { useState } from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm, FormProvider } from 'react-hook-form';
 
 import type { TransactionTag, TransactionTagErrors } from 'types/api/account';
 
@@ -14,9 +13,8 @@ import type { ResourceErrorAccount } from 'lib/api/resources';
 import { resourceKey } from 'lib/api/resources';
 import useApiFetch from 'lib/api/useApiFetch';
 import getErrorMessage from 'lib/getErrorMessage';
-import { TRANSACTION_HASH_REGEXP } from 'lib/validations/transaction';
-import TagInput from 'ui/shared/TagInput';
-import TransactionInput from 'ui/shared/TransactionInput';
+import FormFieldText from 'ui/shared/forms/fields/FormFieldText';
+import { TRANSACTION_HASH_LENGTH, TRANSACTION_HASH_REGEXP } from 'ui/shared/forms/validators/transaction';
 
 const TAG_MAX_LENGTH = 35;
 
@@ -25,18 +23,17 @@ type Props = {
   onClose: () => void;
   onSuccess: () => Promise<void>;
   setAlertVisible: (isAlertVisible: boolean) => void;
-}
+};
 
 type Inputs = {
   transaction: string;
   tag: string;
-}
+};
 
 const TransactionForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVisible }) => {
   const [ pending, setPending ] = useState(false);
-  const formBackgroundColor = useColorModeValue('white', 'gray.900');
 
-  const { control, handleSubmit, formState: { errors, isDirty }, setError } = useForm<Inputs>({
+  const formApi = useForm<Inputs>({
     mode: 'onTouched',
     defaultValues: {
       transaction: data?.transaction_hash || '',
@@ -47,7 +44,7 @@ const TransactionForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVi
   const queryClient = useQueryClient();
   const apiFetch = useApiFetch();
 
-  const { mutate } = useMutation({
+  const { mutateAsync } = useMutation({
     mutationFn: (formData: Inputs) => {
       const body = {
         name: formData?.tag,
@@ -57,7 +54,7 @@ const TransactionForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVi
 
       if (isEdit) {
         return apiFetch('private_tags_tx', {
-          pathParams: { id: data.id },
+          pathParams: { id: String(data.id) },
           fetchParams: { method: 'PUT', body },
         });
       }
@@ -67,11 +64,11 @@ const TransactionForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVi
     onError: (error: ResourceErrorAccount<TransactionTagErrors>) => {
       setPending(false);
       const errorMap = error.payload?.errors;
-      if (errorMap?.tx_hash || errorMap?.name) {
-        errorMap?.tx_hash && setError('transaction', { type: 'custom', message: getErrorMessage(errorMap, 'tx_hash') });
-        errorMap?.name && setError('tag', { type: 'custom', message: getErrorMessage(errorMap, 'name') });
+      if (errorMap?.transaction_hash || errorMap?.name) {
+        errorMap?.transaction_hash && formApi.setError('transaction', { type: 'custom', message: getErrorMessage(errorMap, 'transaction_hash') });
+        errorMap?.name && formApi.setError('tag', { type: 'custom', message: getErrorMessage(errorMap, 'name') });
       } else if (errorMap?.identity_id) {
-        setError('transaction', { type: 'custom', message: getErrorMessage(errorMap, 'identity_id') });
+        formApi.setError('transaction', { type: 'custom', message: getErrorMessage(errorMap, 'identity_id') });
       } else {
         setAlertVisible(true);
       }
@@ -84,54 +81,47 @@ const TransactionForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVi
     },
   });
 
-  const onSubmit: SubmitHandler<Inputs> = formData => {
+  const onSubmit: SubmitHandler<Inputs> = async(formData) => {
     setPending(true);
-    mutate(formData);
+    await mutateAsync(formData);
   };
 
-  const renderTransactionInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'transaction'>}) => {
-    return <TransactionInput field={ field } error={ errors.transaction } backgroundColor={ formBackgroundColor }/>;
-  }, [ errors, formBackgroundColor ]);
-
-  const renderTagInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'tag'>}) => {
-    return <TagInput<Inputs, 'tag'> field={ field } error={ errors.tag } backgroundColor={ formBackgroundColor }/>;
-  }, [ errors, formBackgroundColor ]);
-
   return (
-    <form noValidate onSubmit={ handleSubmit(onSubmit) }>
-      <Box marginBottom={ 5 }>
-        <Controller
+    <FormProvider { ...formApi }>
+      <form noValidate onSubmit={ formApi.handleSubmit(onSubmit) }>
+        <FormFieldText<Inputs>
           name="transaction"
-          control={ control }
+          placeholder="Transaction hash (0x...)"
+          isRequired
           rules={{
+            maxLength: TRANSACTION_HASH_LENGTH,
             pattern: TRANSACTION_HASH_REGEXP,
-            required: true,
           }}
-          render={ renderTransactionInput }
+          bgColor="dialog_bg"
+          mb={ 5 }
         />
-      </Box>
-      <Box marginBottom={ 8 }>
-        <Controller
+        <FormFieldText<Inputs>
           name="tag"
-          control={ control }
+          placeholder="Private tag (max 35 characters)"
+          isRequired
           rules={{
             maxLength: TAG_MAX_LENGTH,
-            required: true,
           }}
-          render={ renderTagInput }
+          bgColor="dialog_bg"
+          mb={ 8 }
         />
-      </Box>
-      <Box marginTop={ 8 }>
-        <Button
-          size="lg"
-          type="submit"
-          isDisabled={ !isDirty }
-          isLoading={ pending }
-        >
-          { data ? 'Save changes' : 'Add tag' }
-        </Button>
-      </Box>
-    </form>
+        <Box marginTop={ 8 }>
+          <Button
+            size="lg"
+            type="submit"
+            isDisabled={ !formApi.formState.isDirty }
+            isLoading={ pending }
+          >
+            { data ? 'Save changes' : 'Add tag' }
+          </Button>
+        </Box>
+      </form>
+    </FormProvider>
   );
 };
 
diff --git a/ui/privateTags/TransactionModal/TransactionModal.tsx b/ui/privateTags/TransactionModal/TransactionModal.tsx
index 668119e88c..bb6f195038 100644
--- a/ui/privateTags/TransactionModal/TransactionModal.tsx
+++ b/ui/privateTags/TransactionModal/TransactionModal.tsx
@@ -13,7 +13,7 @@ type Props = {
   onClose: () => void;
   onSuccess?: () => Promise<void>;
   data?: Partial<TransactionTag>;
-}
+};
 
 const AddressModal: React.FC<Props> = ({ isOpen, onClose, onSuccess, data }) => {
   const title = data ? 'Edit transaction tag' : 'New transaction tag';
diff --git a/ui/privateTags/TransactionTagTable/TransactionTagTable.tsx b/ui/privateTags/TransactionTagTable/TransactionTagTable.tsx
index a32d746062..63ba813a26 100644
--- a/ui/privateTags/TransactionTagTable/TransactionTagTable.tsx
+++ b/ui/privateTags/TransactionTagTable/TransactionTagTable.tsx
@@ -22,7 +22,7 @@ interface Props {
 
 const AddressTagTable = ({ data, isLoading, onDeleteClick, onEditClick, top }: Props) => {
   return (
-    <Table variant="simple" minWidth="600px">
+    <Table minWidth="600px">
       <TheadSticky top={ top }>
         <Tr>
           <Th width="75%">Transaction</Th>
@@ -33,7 +33,7 @@ const AddressTagTable = ({ data, isLoading, onDeleteClick, onEditClick, top }: P
       <Tbody>
         { data?.map((item, index) => (
           <TransactionTagTableItem
-            key={ item.id + (isLoading ? index : '') }
+            key={ item.id + (isLoading ? String(index) : '') }
             item={ item }
             isLoading={ isLoading }
             onDeleteClick={ onDeleteClick }
diff --git a/ui/publicTags/DeletePublicTagModal.tsx b/ui/publicTags/DeletePublicTagModal.tsx
deleted file mode 100644
index a0a7a9c49c..0000000000
--- a/ui/publicTags/DeletePublicTagModal.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { Box, Text, FormControl, FormLabel, Textarea, useColorModeValue } from '@chakra-ui/react';
-import { useQueryClient } from '@tanstack/react-query';
-import React, { useCallback, useState } from 'react';
-import type { ChangeEvent } from 'react';
-
-import type { PublicTags, PublicTag } from 'types/api/account';
-
-import { resourceKey } from 'lib/api/resources';
-import useApiFetch from 'lib/api/useApiFetch';
-import DeleteModal from 'ui/shared/DeleteModal';
-
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-  data: PublicTag;
-  onDeleteSuccess: () => void;
-}
-
-const DeletePublicTagModal: React.FC<Props> = ({ isOpen, onClose, data, onDeleteSuccess }) => {
-
-  const [ reason, setReason ] = useState<string>('');
-
-  const tags = data.tags.split(';');
-
-  const queryClient = useQueryClient();
-  const apiFetch = useApiFetch();
-  const formBackgroundColor = useColorModeValue('white', 'gray.900');
-
-  const deleteApiKey = useCallback(() => {
-    const body = { remove_reason: reason };
-    return apiFetch('public_tags', {
-      pathParams: { id: String(data.id) },
-      fetchParams: { method: 'DELETE', body },
-    });
-  }, [ data.id, apiFetch, reason ]);
-
-  const onSuccess = useCallback(async() => {
-    onDeleteSuccess();
-    queryClient.setQueryData([ resourceKey('public_tags') ], (prevData: PublicTags | undefined) => {
-      return prevData?.filter((item) => item.id !== data.id);
-    });
-  }, [ queryClient, data, onDeleteSuccess ]);
-
-  const onFieldChange = useCallback((event: ChangeEvent<HTMLTextAreaElement>) => {
-    setReason(event.currentTarget.value);
-  }, []);
-
-  const renderContent = useCallback(() => {
-    let text;
-    if (tags.length === 1) {
-      text = (
-        <>
-          <Text display="inline" as="span">Public tag</Text>
-          <Text fontWeight="700" whiteSpace="pre" as="span">{ ` "${ tags[0] }" ` }</Text>
-          <Text as="span">will be removed.</Text>
-        </>
-      );
-    }
-    if (tags.length > 1) {
-      const tagsText: Array<JSX.Element | string> = [];
-      tags.forEach((tag, index) => {
-        if (index < tags.length - 2) {
-          tagsText.push(<Text fontWeight="700" whiteSpace="pre" as="span">{ ` "${ tag }"` }</Text>);
-          tagsText.push(',');
-        }
-        if (index === tags.length - 2) {
-          tagsText.push(<Text fontWeight="700" whiteSpace="pre" as="span">{ ` "${ tag }" ` }</Text>);
-          tagsText.push('and');
-        }
-        if (index === tags.length - 1) {
-          tagsText.push(<Text fontWeight="700" whiteSpace="pre" as="span">{ ` "${ tag }" ` }</Text>);
-        }
-      });
-      text = (
-        <>
-          <Text as="span">Public tags</Text>{ tagsText }<Text as="span">will be removed.</Text>
-        </>
-      );
-    }
-    return (
-      <>
-        <Box marginBottom={ 8 }>
-          { text }
-        </Box>
-        <FormControl variant="floating" id="tag-delete" backgroundColor={ formBackgroundColor }>
-          <Textarea
-            size="lg"
-            value={ reason }
-            onChange={ onFieldChange }
-          />
-          <FormLabel>Why do you want to remove tags?</FormLabel>
-        </FormControl>
-      </>
-    );
-  }, [ tags, reason, onFieldChange, formBackgroundColor ]);
-
-  return (
-    <DeleteModal
-      isOpen={ isOpen }
-      onClose={ onClose }
-      title="Request to remove a public tag"
-      renderContent={ renderContent }
-      mutationFn={ deleteApiKey }
-      onSuccess={ onSuccess }
-    />
-  );
-};
-
-export default React.memo(DeletePublicTagModal);
diff --git a/ui/publicTags/PublicTagTable/PublicTagListItem.tsx b/ui/publicTags/PublicTagTable/PublicTagListItem.tsx
deleted file mode 100644
index 8c22b9920e..0000000000
--- a/ui/publicTags/PublicTagTable/PublicTagListItem.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { VStack, Text, HStack, Skeleton } from '@chakra-ui/react';
-import React, { useCallback } from 'react';
-
-import type { PublicTag } from 'types/api/account';
-
-import Tag from 'ui/shared/chakra/Tag';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
-import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
-
-interface Props {
-  item: PublicTag;
-  isLoading?: boolean;
-  onEditClick: (data: PublicTag) => void;
-  onDeleteClick: (data: PublicTag) => void;
-}
-
-const PublicTagListItem = ({ item, isLoading, onEditClick, onDeleteClick }: Props) => {
-  const onItemEditClick = useCallback(() => {
-    return onEditClick(item);
-  }, [ item, onEditClick ]);
-
-  const onItemDeleteClick = useCallback(() => {
-    return onDeleteClick(item);
-  }, [ item, onDeleteClick ]);
-
-  return (
-    <ListItemMobile>
-      <VStack spacing={ 3 } alignItems="flex-start" maxW="100%">
-        <VStack spacing={ 4 } alignItems="unset" maxW="100%">
-          { item.addresses_with_info.map((address) => (
-            <AddressEntity
-              key={ address.hash }
-              address={ address }
-              isLoading={ isLoading }
-              fontWeight="600"
-              w="100%"
-            />
-          )) }
-        </VStack>
-        <HStack spacing={ 3 }>
-          <Text fontSize="sm" fontWeight={ 500 }>Public tags</Text>
-          <HStack spacing={ 2 } alignItems="baseline">
-            { item.tags.split(';').map((tag) => <Tag key={ tag } isLoading={ isLoading } isTruncated>{ tag }</Tag>) }
-          </HStack>
-        </HStack>
-        <HStack spacing={ 3 }>
-          <Text fontSize="sm" fontWeight={ 500 }>Status</Text>
-          <Skeleton fontSize="sm" color="text_secondary" isLoaded={ !isLoading } display="inline-block">
-            <span>Submitted</span>
-          </Skeleton>
-        </HStack>
-      </VStack>
-      <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick } isLoading={ isLoading }/>
-    </ListItemMobile>
-  );
-};
-
-export default React.memo(PublicTagListItem);
diff --git a/ui/publicTags/PublicTagTable/PublicTagTable.tsx b/ui/publicTags/PublicTagTable/PublicTagTable.tsx
deleted file mode 100644
index 3123b034d5..0000000000
--- a/ui/publicTags/PublicTagTable/PublicTagTable.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import {
-  Table,
-  Thead,
-  Tbody,
-  Tr,
-  Th,
-} from '@chakra-ui/react';
-import React from 'react';
-
-import type { PublicTags, PublicTag } from 'types/api/account';
-
-import PublicTagTableItem from './PublicTagTableItem';
-
-interface Props {
-  data?: PublicTags;
-  isLoading?: boolean;
-  onEditClick: (data: PublicTag) => void;
-  onDeleteClick: (data: PublicTag) => void;
-}
-
-const PublicTagTable = ({ data, isLoading, onEditClick, onDeleteClick }: Props) => {
-  return (
-    <Table variant="simple" minWidth="600px">
-      <Thead>
-        <Tr>
-          <Th width="50%">Smart contract / Address (0x...)</Th>
-          <Th width="25%">Public tag</Th>
-          <Th width="25%">Request status</Th>
-          <Th width="108px"></Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        { data?.map((item, index) => (
-          <PublicTagTableItem
-            key={ item.id + (isLoading ? String(index) : '') }
-            item={ item }
-            isLoading={ isLoading }
-            onDeleteClick={ onDeleteClick }
-            onEditClick={ onEditClick }
-          />
-        )) }
-      </Tbody>
-    </Table>
-  );
-};
-
-export default PublicTagTable;
diff --git a/ui/publicTags/PublicTagTable/PublicTagTableItem.tsx b/ui/publicTags/PublicTagTable/PublicTagTableItem.tsx
deleted file mode 100644
index 2c370ae029..0000000000
--- a/ui/publicTags/PublicTagTable/PublicTagTableItem.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import {
-  Tr,
-  Td,
-  VStack,
-  Box,
-  Skeleton,
-} from '@chakra-ui/react';
-import React, { useCallback } from 'react';
-
-import type { PublicTag } from 'types/api/account';
-
-import Tag from 'ui/shared/chakra/Tag';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
-
-interface Props {
-  item: PublicTag;
-  isLoading?: boolean;
-  onEditClick: (data: PublicTag) => void;
-  onDeleteClick: (data: PublicTag) => void;
-}
-
-const PublicTagTableItem = ({ item, isLoading, onEditClick, onDeleteClick }: Props) => {
-  const onItemEditClick = useCallback(() => {
-    return onEditClick(item);
-  }, [ item, onEditClick ]);
-
-  const onItemDeleteClick = useCallback(() => {
-    return onDeleteClick(item);
-  }, [ item, onDeleteClick ]);
-
-  return (
-    <Tr alignItems="top" key={ item.id }>
-      <Td>
-        <VStack spacing={ 4 } alignItems="unset">
-          { item.addresses_with_info.map((address) => (
-            <AddressEntity
-              key={ address.hash }
-              address={ address }
-              isLoading={ isLoading }
-              fontWeight="600"
-              py="2px"
-            />
-          )) }
-        </VStack>
-      </Td>
-      <Td>
-        <VStack spacing={ 2 } alignItems="baseline">
-          { item.tags.split(';').map((tag) => <Tag key={ tag } isLoading={ isLoading } isTruncated>{ tag }</Tag>) }
-        </VStack>
-      </Td>
-      <Td>
-        <Skeleton fontSize="sm" fontWeight="500" py="2px" isLoaded={ !isLoading } display="inline-block">
-          Submitted
-        </Skeleton>
-      </Td>
-      <Td>
-        <Box py="2px">
-          <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick } isLoading={ isLoading }/>
-        </Box>
-      </Td>
-    </Tr>
-  );
-};
-
-export default React.memo(PublicTagTableItem);
diff --git a/ui/publicTags/PublicTagsData.tsx b/ui/publicTags/PublicTagsData.tsx
deleted file mode 100644
index a9c42faa9c..0000000000
--- a/ui/publicTags/PublicTagsData.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { Box, Button, Skeleton, useDisclosure } from '@chakra-ui/react';
-import React, { useCallback, useState } from 'react';
-
-import type { PublicTag } from 'types/api/account';
-
-import useApiQuery from 'lib/api/useApiQuery';
-import { PUBLIC_TAG } from 'stubs/account';
-import PublicTagListItem from 'ui/publicTags/PublicTagTable/PublicTagListItem';
-import AccountPageDescription from 'ui/shared/AccountPageDescription';
-import DataFetchAlert from 'ui/shared/DataFetchAlert';
-
-import DeletePublicTagModal from './DeletePublicTagModal';
-import PublicTagTable from './PublicTagTable/PublicTagTable';
-
-type Props = {
-  changeToFormScreen: (data?: PublicTag) => void;
-  onTagDelete: () => void;
-}
-
-const PublicTagsData = ({ changeToFormScreen, onTagDelete }: Props) => {
-  const deleteModalProps = useDisclosure();
-  const [ deleteModalData, setDeleteModalData ] = useState<PublicTag>();
-
-  const { data, isPlaceholderData, isError } = useApiQuery('public_tags', {
-    queryOptions: {
-      placeholderData: Array(3).fill(PUBLIC_TAG),
-    },
-  });
-
-  const onDeleteModalClose = useCallback(() => {
-    setDeleteModalData(undefined);
-    deleteModalProps.onClose();
-  }, [ deleteModalProps ]);
-
-  const changeToForm = useCallback(() => {
-    changeToFormScreen();
-  }, [ changeToFormScreen ]);
-
-  const onItemEditClick = useCallback((item: PublicTag) => {
-    changeToFormScreen(item);
-  }, [ changeToFormScreen ]);
-
-  const onItemDeleteClick = useCallback((item: PublicTag) => {
-    setDeleteModalData(item);
-    deleteModalProps.onOpen();
-  }, [ deleteModalProps ]);
-
-  const description = (
-    <AccountPageDescription>
-      You can request a public category tag which is displayed to all Blockscout users.
-      Public tags may be added to contract or external addresses, and any associated transactions will inherit that tag.
-      Clicking a tag opens a page with related information and helps provide context and data organization.
-      Requests are sent to a moderator for review and approval. This process can take several days.
-    </AccountPageDescription>
-  );
-
-  if (isError) {
-    return <DataFetchAlert/>;
-  }
-
-  const list = (
-    <>
-      <Box display={{ base: 'block', lg: 'none' }}>
-        { data?.map((item, index) => (
-          <PublicTagListItem
-            key={ item.id + (isPlaceholderData ? String(index) : '') }
-            item={ item }
-            isLoading={ isPlaceholderData }
-            onDeleteClick={ onItemDeleteClick }
-            onEditClick={ onItemEditClick }
-          />
-        )) }
-      </Box>
-      <Box display={{ base: 'none', lg: 'block' }}>
-        <PublicTagTable data={ data } isLoading={ isPlaceholderData } onEditClick={ onItemEditClick } onDeleteClick={ onItemDeleteClick }/>
-      </Box>
-    </>
-  );
-
-  return (
-    <>
-      { description }
-      { Boolean(data?.length) && list }
-      <Skeleton mt={ 8 } isLoaded={ !isPlaceholderData } display="inline-block">
-        <Button
-          size="lg"
-          onClick={ changeToForm }
-        >
-            Request to add public tag
-        </Button>
-      </Skeleton>
-      { deleteModalData && (
-        <DeletePublicTagModal
-          { ...deleteModalProps }
-          onClose={ onDeleteModalClose }
-          data={ deleteModalData }
-          onDeleteSuccess={ onTagDelete }
-        />
-      ) }
-    </>
-  );
-};
-
-export default PublicTagsData;
diff --git a/ui/publicTags/PublicTagsForm/PublicTagFormAction.tsx b/ui/publicTags/PublicTagsForm/PublicTagFormAction.tsx
deleted file mode 100644
index 73e0f8a74a..0000000000
--- a/ui/publicTags/PublicTagsForm/PublicTagFormAction.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { RadioGroup, Radio, Stack } from '@chakra-ui/react';
-import React, { useCallback } from 'react';
-import type { ControllerRenderProps, Control } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import type { Inputs } from './PublicTagsForm';
-
-interface Props {
-  control: Control<Inputs>;
-  isDisabled?: boolean;
-}
-
-export default function PublicTagFormAction({ control, isDisabled }: Props) {
-  const renderRadioGroup = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'action'>}) => {
-    return (
-      <RadioGroup defaultValue="add" colorScheme="blue" { ...field }>
-        <Stack spacing={ 5 }>
-          <Radio value="add">
-            I want to add tags for my project
-          </Radio>
-          <Radio value="report" isDisabled={ isDisabled }>
-            I want to report an incorrect public tag
-          </Radio>
-        </Stack>
-      </RadioGroup>
-    );
-  }, [ isDisabled ]);
-
-  return (
-    <Controller
-      name="action"
-      control={ control }
-      render={ renderRadioGroup }
-    />
-  );
-}
diff --git a/ui/publicTags/PublicTagsForm/PublicTagFormAddressInput.tsx b/ui/publicTags/PublicTagsForm/PublicTagFormAddressInput.tsx
deleted file mode 100644
index c6dc9e52d9..0000000000
--- a/ui/publicTags/PublicTagsForm/PublicTagFormAddressInput.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import type { InputProps } from '@chakra-ui/react';
-import { IconButton, Flex } from '@chakra-ui/react';
-import React, { useCallback } from 'react';
-import type { ControllerRenderProps, Control, FieldError } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import { ADDRESS_REGEXP } from 'lib/validations/address';
-import AddressInput from 'ui/shared/AddressInput';
-import IconSvg from 'ui/shared/IconSvg';
-
-import type { Inputs } from './PublicTagsForm';
-
-interface Props {
-  control: Control<Inputs>;
-  index: number;
-  fieldsLength: number;
-  error?: FieldError;
-  onAddFieldClick: (e: React.SyntheticEvent) => void;
-  onRemoveFieldClick: (index: number) => (e: React.SyntheticEvent) => void;
-  size?: InputProps['size'];
-}
-
-const MAX_INPUTS_NUM = 10;
-
-export default function PublicTagFormAction({ control, index, fieldsLength, error, onAddFieldClick, onRemoveFieldClick, size }: Props) {
-  const renderAddressInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, `addresses.${ number }.address`>}) => {
-    return (
-      <AddressInput<Inputs, `addresses.${ number }.address`>
-        field={ field }
-        error={ error }
-        size={ size }
-        placeholder="Smart contract / Address (0x...)"
-      />
-    );
-  }, [ error, size ]);
-
-  return (
-    <Flex flexDir="column" rowGap={ 5 } alignItems="flex-end">
-      <Controller
-        name={ `addresses.${ index }.address` }
-        control={ control }
-        render={ renderAddressInput }
-        rules={{
-          pattern: ADDRESS_REGEXP,
-          required: index === 0,
-        }}
-      />
-      <Flex
-        columnGap={ 5 }
-        position={{ base: 'static', lg: 'absolute' }}
-        left={{ base: 'auto', lg: 'calc(100% + 20px)' }}
-        h="100%"
-        alignItems="center"
-      >
-        { fieldsLength > 1 && (
-          <IconButton
-            aria-label="delete"
-            variant="outline"
-            w="30px"
-            h="30px"
-            onClick={ onRemoveFieldClick(index) }
-            icon={ <IconSvg name="minus" w="20px" h="20px"/> }
-          />
-        ) }
-        { index === fieldsLength - 1 && fieldsLength < MAX_INPUTS_NUM && (
-          <IconButton
-            aria-label="add"
-            variant="outline"
-            w="30px"
-            h="30px"
-            onClick={ onAddFieldClick }
-            icon={ <IconSvg name="plus" w="20px" h="20px"/> }
-          />
-        ) }
-      </Flex>
-    </Flex>
-  );
-}
diff --git a/ui/publicTags/PublicTagsForm/PublicTagFormComment.tsx b/ui/publicTags/PublicTagsForm/PublicTagFormComment.tsx
deleted file mode 100644
index 011a525a76..0000000000
--- a/ui/publicTags/PublicTagsForm/PublicTagFormComment.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import type { InputProps } from '@chakra-ui/react';
-import { FormControl, Textarea } from '@chakra-ui/react';
-import React, { useCallback } from 'react';
-import type { ControllerRenderProps, Control, FieldError } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
-
-import type { Inputs } from './PublicTagsForm';
-
-const TEXT_INPUT_MAX_LENGTH = 255;
-
-interface Props {
-  control: Control<Inputs>;
-  error?: FieldError;
-  size?: InputProps['size'];
-}
-
-export default function PublicTagFormComment({ control, error, size }: Props) {
-  const renderComment = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'comment'>}) => {
-    return (
-      <FormControl variant="floating" id={ field.name } size={ size } isRequired>
-        <Textarea
-          { ...field }
-          isInvalid={ Boolean(error) }
-        />
-        <InputPlaceholder text="Specify the reason for adding tags and color preference(s)" error={ error }/>
-      </FormControl>
-    );
-  }, [ error, size ]);
-
-  return (
-    <Controller
-      name="comment"
-      control={ control }
-      render={ renderComment }
-      rules={{
-        maxLength: TEXT_INPUT_MAX_LENGTH,
-        required: true,
-      }}
-    />
-  );
-}
diff --git a/ui/publicTags/PublicTagsForm/PublicTagsForm.tsx b/ui/publicTags/PublicTagsForm/PublicTagsForm.tsx
deleted file mode 100644
index 07fb7ec2ae..0000000000
--- a/ui/publicTags/PublicTagsForm/PublicTagsForm.tsx
+++ /dev/null
@@ -1,250 +0,0 @@
-import {
-  Button,
-  Box,
-  Grid,
-  GridItem,
-  Text,
-  HStack,
-  chakra,
-} from '@chakra-ui/react';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import React, { useCallback, useState } from 'react';
-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 type { ResourceErrorAccount } from 'lib/api/resources';
-import { resourceKey } from 'lib/api/resources';
-import useApiFetch from 'lib/api/useApiFetch';
-import getErrorMessage from 'lib/getErrorMessage';
-import { EMAIL_REGEXP } from 'lib/validations/email';
-import FormSubmitAlert from 'ui/shared/FormSubmitAlert';
-
-import PublicTagFormAction from './PublicTagFormAction';
-import PublicTagFormAddressInput from './PublicTagFormAddressInput';
-import PublicTagFormComment from './PublicTagFormComment';
-import PublicTagsFormInput from './PublicTagsFormInput';
-
-type Props = {
-  changeToDataScreen: (success?: boolean) => void;
-  data?: Partial<PublicTag>;
-}
-
-export type Inputs = {
-  fullName?: string;
-  email?: string;
-  companyName?: string;
-  companyUrl?: string;
-  action: 'add' | 'report';
-  tags?: string;
-  addresses?: Array<{
-    name: string;
-    address: string;
-  }>;
-  comment?: string;
-}
-
-const placeholders = {
-  fullName: 'Your name',
-  email: 'Email',
-  companyName: 'Company name',
-  companyUrl: 'Company website',
-  tags: 'Public tag (max 35 characters)',
-  comment: 'Specify the reason for adding tags and color preference(s).',
-} as Record<Path<Inputs>, string>;
-
-const ADDRESS_INPUT_BUTTONS_WIDTH = 100;
-
-const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
-  const queryClient = useQueryClient();
-  const apiFetch = useApiFetch();
-  const inputSize = { base: 'md', lg: 'lg' };
-
-  const { control, handleSubmit, formState: { errors, isDirty }, setError } = useForm<Inputs>({
-    defaultValues: {
-      fullName: data?.full_name || '',
-      email: data?.email || '',
-      companyName: data?.company || '',
-      companyUrl: data?.website || '',
-      tags: data?.tags?.split(';').map((tag) => tag).join('; ') || '',
-      addresses: data?.addresses?.map((address, index: number) => ({ name: `address.${ index }.address`, address })) ||
-        [ { name: 'address.0.address', address: '' } ],
-      comment: data?.additional_comment || '',
-      action: data?.is_owner === undefined || data?.is_owner ? 'add' : 'report',
-    },
-    mode: 'onTouched',
-  });
-
-  const { fields, append, remove } = useFieldArray({
-    name: 'addresses',
-    control,
-  });
-
-  const [ isAlertVisible, setAlertVisible ] = useState(false);
-
-  const onAddFieldClick = useCallback(() => append({ address: '', name: '' }), [ append ]);
-
-  const onRemoveFieldClick = useCallback((index: number) => () => remove(index), [ remove ]);
-
-  const updatePublicTag = (formData: Inputs) => {
-    const body: PublicTagNew = {
-      full_name: formData.fullName || '',
-      email: formData.email || '',
-      company: formData.companyName || '',
-      website: formData.companyUrl || '',
-      is_owner: formData.action === 'add',
-      addresses: formData.addresses?.map(({ address }) => address) || [],
-      tags: formData.tags?.split(';').map((s) => s.trim()).join(';') || '',
-      additional_comment: formData.comment || '',
-    };
-
-    if (!data?.id) {
-      return apiFetch('public_tags', { fetchParams: { method: 'POST', body } });
-    }
-
-    return apiFetch('public_tags', {
-      pathParams: { id: String(data.id) },
-      fetchParams: { method: 'PUT', body },
-    });
-  };
-
-  const mutation = useMutation({
-    mutationFn: updatePublicTag,
-    onSuccess: async(data) => {
-      const response = data as unknown as PublicTag;
-
-      queryClient.setQueryData([ resourceKey('public_tags') ], (prevData: PublicTags | undefined) => {
-        const isExisting = prevData && prevData.some((item) => item.id === response.id);
-
-        if (isExisting) {
-          return prevData.map((item) => {
-            if (item.id === response.id) {
-              return response;
-            }
-
-            return item;
-          });
-        }
-
-        return [ response, ...(prevData || []) ];
-      });
-
-      changeToDataScreen(true);
-    },
-    onError: (error: ResourceErrorAccount<PublicTagErrors>) => {
-      const errorMap = error.payload?.errors;
-      if (errorMap?.full_name || errorMap?.email || errorMap?.tags || errorMap?.addresses || errorMap?.additional_comment) {
-        errorMap?.full_name && setError('fullName', { type: 'custom', message: getErrorMessage(errorMap, 'full_name') });
-        errorMap?.email && setError('email', { type: 'custom', message: getErrorMessage(errorMap, 'email') });
-        errorMap?.tags && setError('tags', { type: 'custom', message: getErrorMessage(errorMap, 'tags') });
-        errorMap?.addresses && setError('addresses.0.address', { type: 'custom', message: getErrorMessage(errorMap, 'addresses') });
-        errorMap?.additional_comment && setError('comment', { type: 'custom', message: getErrorMessage(errorMap, 'additional_comment') });
-      } else {
-        setAlertVisible(true);
-      }
-    },
-  });
-
-  const onSubmit: SubmitHandler<Inputs> = useCallback((data) => {
-    setAlertVisible(false);
-    mutation.mutate(data);
-  }, [ mutation ]);
-
-  return (
-    <chakra.form
-      noValidate
-      width={{ base: 'auto', lg: `calc(100% - ${ ADDRESS_INPUT_BUTTONS_WIDTH }px)` }}
-      maxWidth="844px"
-      onSubmit={ handleSubmit(onSubmit) }
-    >
-      { isAlertVisible && <Box mb={ 4 }><FormSubmitAlert/></Box> }
-      <Text size="sm" variant="secondary" paddingBottom={ 5 }>Company info</Text>
-      <Grid templateColumns={{ base: '1fr', lg: '1fr 1fr' }} rowGap={ 4 } columnGap={ 5 }>
-        <GridItem>
-          <PublicTagsFormInput<Inputs>
-            fieldName="fullName"
-            control={ control }
-            label={ placeholders.fullName }
-            error={ errors.fullName }
-            required
-            size={ inputSize }
-          />
-        </GridItem>
-        <GridItem>
-          <PublicTagsFormInput<Inputs>
-            fieldName="companyName"
-            control={ control }
-            label={ placeholders.companyName }
-            error={ errors.companyName }
-            size={ inputSize }
-          />
-        </GridItem>
-        <GridItem>
-          <PublicTagsFormInput<Inputs>
-            fieldName="email"
-            control={ control }
-            label={ placeholders.email }
-            pattern={ EMAIL_REGEXP }
-            error={ errors.email }
-            required
-            size={ inputSize }
-          />
-        </GridItem>
-        <GridItem>
-          <PublicTagsFormInput<Inputs>
-            fieldName="companyUrl"
-            control={ control }
-            label={ placeholders.companyUrl }
-            error={ errors?.companyUrl }
-            size={ inputSize }
-          />
-        </GridItem>
-      </Grid>
-      <Box marginTop={{ base: 5, lg: 8 }} marginBottom={{ base: 5, lg: 8 }}>
-        <PublicTagFormAction control={ control }/>
-      </Box>
-      <Text size="sm" variant="secondary" marginBottom={ 5 }>Public tags (2 tags maximum, please use &quot;;&quot; as a divider)</Text>
-      <Box marginBottom={ 4 }>
-        <PublicTagsFormInput<Inputs>
-          fieldName="tags"
-          control={ control }
-          label={ placeholders.tags }
-          error={ errors.tags }
-          required
-          size={ inputSize }
-        />
-      </Box>
-      { fields.map((field, index) => {
-        return (
-          <Box position="relative" key={ field.id } marginBottom={ 4 }>
-            <PublicTagFormAddressInput
-              control={ control }
-              error={ errors?.addresses?.[index]?.address as FieldError }
-              index={ index }
-              fieldsLength={ fields.length }
-              onAddFieldClick={ onAddFieldClick }
-              onRemoveFieldClick={ onRemoveFieldClick }
-              size={ inputSize }
-            />
-          </Box>
-        );
-      }) }
-      <Box marginBottom={ 8 }>
-        <PublicTagFormComment control={ control } error={ errors.comment } size={ inputSize }/>
-      </Box>
-      <HStack spacing={ 6 }>
-        <Button
-          size="lg"
-          type="submit"
-          isDisabled={ !isDirty }
-          isLoading={ mutation.isPending }
-        >
-          Send request
-        </Button>
-      </HStack>
-    </chakra.form>
-  );
-};
-
-export default React.memo(PublicTagsForm);
diff --git a/ui/publicTags/PublicTagsForm/PublicTagsFormInput.tsx b/ui/publicTags/PublicTagsForm/PublicTagsFormInput.tsx
deleted file mode 100644
index 1d0cfa8c3f..0000000000
--- a/ui/publicTags/PublicTagsForm/PublicTagsFormInput.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { InputProps } from '@chakra-ui/react';
-import { FormControl, Input } from '@chakra-ui/react';
-import React, { useCallback } from 'react';
-import type { ControllerRenderProps, FieldError, FieldValues, Path, Control } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
-
-const TEXT_INPUT_MAX_LENGTH = 255;
-
-interface Props<TInputs extends FieldValues> {
-  fieldName: Path<TInputs>;
-  label: string;
-  required?: boolean;
-  control: Control<TInputs, object>;
-  pattern?: RegExp;
-  error?: FieldError;
-  size?: InputProps['size'];
-}
-
-export default function PublicTagsFormInput<Inputs extends FieldValues>({
-  label,
-  control,
-  required,
-  fieldName,
-  pattern,
-  error,
-  size,
-}: Props<Inputs>) {
-  const renderInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, typeof fieldName>}) => {
-    return (
-      <FormControl variant="floating" id={ field.name } isRequired={ required } size={ size }>
-        <Input
-          { ...field }
-          required={ required }
-          isInvalid={ Boolean(error) }
-          maxLength={ TEXT_INPUT_MAX_LENGTH }
-        />
-        <InputPlaceholder text={ label } error={ error }/>
-      </FormControl>
-    );
-  }, [ label, required, error, size ]);
-  return (
-    <Controller
-      name={ fieldName }
-      control={ control }
-      render={ renderInput }
-      rules={{ pattern, required }}
-    />
-  );
-}
diff --git a/ui/publicTags/submit/PublicTagsSubmitForm.pw.tsx b/ui/publicTags/submit/PublicTagsSubmitForm.pw.tsx
new file mode 100644
index 0000000000..08dada3ad4
--- /dev/null
+++ b/ui/publicTags/submit/PublicTagsSubmitForm.pw.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { publicTagTypes as configMock } from 'mocks/metadata/publicTagTypes';
+import { base as useInfoMock } from 'mocks/user/profile';
+import { expect, test } from 'playwright/lib';
+
+import * as mocks from './mocks';
+import PublicTagsSubmitForm from './PublicTagsSubmitForm';
+
+const onSubmitResult = () => {};
+
+test('base view +@mobile', async({ render }) => {
+  const component = await render(
+    <PublicTagsSubmitForm config={ configMock } onSubmitResult={ onSubmitResult } userInfo={ useInfoMock }/>,
+  );
+
+  await component.getByLabel(/Smart contract \/ Address/i).fill(mocks.address1);
+  await component.getByLabel(/add/i).nth(1).click();
+
+  await component.getByLabel('Tag (max 35 characters)*').fill(mocks.tag1.name);
+  await component.getByLabel(/label url/i).fill(mocks.tag1.meta.tagUrl);
+  await component.getByLabel(/background \(hex\)/i).fill(mocks.tag1.meta.bgColor);
+  await component.getByLabel(/text \(hex\)/i).fill(mocks.tag1.meta.textColor);
+
+  await component.getByLabel(/add/i).nth(3).click();
+  await component.getByLabel(/connection/i).focus();
+  await component.getByLabel(/connection/i).blur();
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/publicTags/submit/PublicTagsSubmitForm.tsx b/ui/publicTags/submit/PublicTagsSubmitForm.tsx
new file mode 100644
index 0000000000..82dfe9f389
--- /dev/null
+++ b/ui/publicTags/submit/PublicTagsSubmitForm.tsx
@@ -0,0 +1,156 @@
+import { Button, chakra, Grid, GridItem } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm, FormProvider } from 'react-hook-form';
+
+import type { FormFields, FormSubmitResult } from './types';
+import type { UserInfo } from 'types/api/account';
+import type { PublicTagTypesResponse } from 'types/api/addressMetadata';
+
+import appConfig from 'configs/app';
+import useApiFetch from 'lib/api/useApiFetch';
+import getErrorObj from 'lib/errors/getErrorObj';
+import getErrorObjPayload from 'lib/errors/getErrorObjPayload';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import FormFieldEmail from 'ui/shared/forms/fields/FormFieldEmail';
+import FormFieldText from 'ui/shared/forms/fields/FormFieldText';
+import FormFieldUrl from 'ui/shared/forms/fields/FormFieldUrl';
+import Hint from 'ui/shared/Hint';
+import ReCaptcha from 'ui/shared/reCaptcha/ReCaptcha';
+import useReCaptcha from 'ui/shared/reCaptcha/useReCaptcha';
+
+import PublicTagsSubmitFieldAddresses from './fields/PublicTagsSubmitFieldAddresses';
+import PublicTagsSubmitFieldTags from './fields/PublicTagsSubmitFieldTags';
+import { convertFormDataToRequestsBody, getFormDefaultValues } from './utils';
+
+interface Props {
+  config?: PublicTagTypesResponse | undefined;
+  userInfo?: UserInfo | undefined;
+  onSubmitResult: (result: FormSubmitResult) => void;
+}
+
+const PublicTagsSubmitForm = ({ config, userInfo, onSubmitResult }: Props) => {
+  const isMobile = useIsMobile();
+  const router = useRouter();
+  const apiFetch = useApiFetch();
+  const recaptcha = useReCaptcha();
+
+  const formApi = useForm<FormFields>({
+    mode: 'onBlur',
+    defaultValues: getFormDefaultValues(router.query, userInfo),
+  });
+
+  React.useEffect(() => {
+    if (
+      router.query.addresses ||
+      router.query.requesterName ||
+      router.query.requesterEmail ||
+      router.query.companyName ||
+      router.query.companyWebsite
+    ) {
+      router.replace({ pathname: '/public-tags/submit' }, undefined, { shallow: true });
+    }
+  }, [ router ]);
+
+  const onFormSubmit: SubmitHandler<FormFields> = React.useCallback(async(data) => {
+    const requestsBody = convertFormDataToRequestsBody(data);
+
+    const result = await Promise.all(requestsBody.map(async(body) => {
+      return recaptcha.executeAsync()
+        .then(() => {
+          return apiFetch<'public_tag_application', unknown, { message: string }>('public_tag_application', {
+            pathParams: { chainId: appConfig.chain.id },
+            fetchParams: {
+              method: 'POST',
+              body: { submission: body },
+            },
+          });
+        })
+        .then(() => ({ error: null, payload: body }))
+        .catch((error: unknown) => {
+          const errorObj = getErrorObj(error);
+          const messageFromPayload = getErrorObjPayload<{ message?: string }>(errorObj)?.message;
+          const messageFromError = errorObj && 'message' in errorObj && typeof errorObj.message === 'string' ? errorObj.message : undefined;
+          const message = messageFromPayload || messageFromError || 'Something went wrong.';
+          return { error: message, payload: body };
+        });
+    }));
+
+    onSubmitResult(result);
+  }, [ apiFetch, onSubmitResult, recaptcha ]);
+
+  if (!appConfig.services.reCaptchaV2.siteKey) {
+    return null;
+  }
+
+  const fieldProps = {
+    size: { base: 'md', lg: 'lg' },
+  };
+
+  return (
+    <FormProvider { ...formApi }>
+      <chakra.form
+        noValidate
+        onSubmit={ formApi.handleSubmit(onFormSubmit) }
+      >
+        <Grid
+          columnGap={ 3 }
+          rowGap={ 3 }
+          templateColumns={{ base: '1fr', lg: '1fr 1fr minmax(0, 200px)', xl: '1fr 1fr minmax(0, 250px)' }}
+        >
+          <GridItem colSpan={{ base: 1, lg: 3 }} as="h2" textStyle="h4">
+            Company info
+          </GridItem>
+          <FormFieldText<FormFields> name="requesterName" isRequired placeholder="Your name" { ...fieldProps }/>
+          <FormFieldEmail<FormFields> name="requesterEmail" isRequired { ...fieldProps }/>
+
+          { !isMobile && <div/> }
+          <FormFieldText<FormFields> name="companyName" placeholder="Company name" { ...fieldProps }/>
+          <FormFieldUrl<FormFields> name="companyWebsite" placeholder="Company website" { ...fieldProps }/>
+          { !isMobile && <div/> }
+
+          <GridItem colSpan={{ base: 1, lg: 3 }} as="h2" textStyle="h4" mt={{ base: 3, lg: 5 }}>
+            Public tags/labels
+            <Hint label="Submit a public tag proposal for our moderation team to review" ml={ 1 } color="link"/>
+          </GridItem>
+          <PublicTagsSubmitFieldAddresses/>
+          <PublicTagsSubmitFieldTags tagTypes={ config?.tagTypes }/>
+          <GridItem colSpan={{ base: 1, lg: 2 }}>
+            <FormFieldText<FormFields>
+              name="description"
+              isRequired
+              placeholder={
+                isMobile ?
+                  'Confirm the connection between addresses and tags.' :
+                  'Provide a comment to confirm the connection between addresses and tags.'
+              }
+              maxH="160px"
+              rules={{ maxLength: 80 }}
+              asComponent="Textarea"
+              { ...fieldProps }
+            />
+          </GridItem>
+
+          <GridItem colSpan={{ base: 1, lg: 3 }}>
+            <ReCaptcha ref={ recaptcha.ref }/>
+          </GridItem>
+
+          <Button
+            variant="solid"
+            size="lg"
+            type="submit"
+            mt={ 3 }
+            isLoading={ formApi.formState.isSubmitting }
+            loadingText="Send request"
+            w="min-content"
+          >
+            Send request
+          </Button>
+        </Grid>
+      </chakra.form>
+    </FormProvider>
+  );
+};
+
+export default React.memo(PublicTagsSubmitForm);
diff --git a/ui/publicTags/submit/PublicTagsSubmitResult.pw.tsx b/ui/publicTags/submit/PublicTagsSubmitResult.pw.tsx
new file mode 100644
index 0000000000..fc853b7278
--- /dev/null
+++ b/ui/publicTags/submit/PublicTagsSubmitResult.pw.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { expect, test, devices } from 'playwright/lib';
+
+import * as mocks from './mocks';
+import PublicTagsSubmitResult from './PublicTagsSubmitResult';
+
+test('all success result view +@mobile', async({ render }) => {
+  const component = await render(<PublicTagsSubmitResult data={ mocks.allSuccessResponses }/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('result with errors view', async({ render }) => {
+  const component = await render(<PublicTagsSubmitResult data={ mocks.mixedResponses }/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('result with errors view', async({ render }) => {
+    const component = await render(<PublicTagsSubmitResult data={ mocks.mixedResponses }/>);
+    await expect(component).toHaveScreenshot();
+  });
+});
diff --git a/ui/publicTags/submit/PublicTagsSubmitResult.tsx b/ui/publicTags/submit/PublicTagsSubmitResult.tsx
new file mode 100644
index 0000000000..f1fd62eb74
--- /dev/null
+++ b/ui/publicTags/submit/PublicTagsSubmitResult.tsx
@@ -0,0 +1,81 @@
+import { Alert, Box, Button, Flex, Grid, GridItem } from '@chakra-ui/react';
+import _pickBy from 'lodash/pickBy';
+import React from 'react';
+
+import type { FormSubmitResult } from './types';
+
+import { route } from 'nextjs-routes';
+
+import makePrettyLink from 'lib/makePrettyLink';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+
+import PublicTagsSubmitResultSuccess from './result/PublicTagsSubmitResultSuccess';
+import PublicTagsSubmitResultWithErrors from './result/PublicTagsSubmitResultWithErrors';
+import { groupSubmitResult } from './utils';
+
+interface Props {
+  data: FormSubmitResult | undefined;
+}
+
+const PublicTagsSubmitResult = ({ data }: Props) => {
+  const groupedData = React.useMemo(() => groupSubmitResult(data), [ data ]);
+
+  if (!groupedData) {
+    return null;
+  }
+
+  const hasErrors = groupedData.items.some((item) => item.error !== null);
+  const companyWebsite = makePrettyLink(groupedData.companyWebsite);
+  const startOverButtonQuery = hasErrors ? _pickBy({
+    requesterName: groupedData.requesterName,
+    requesterEmail: groupedData.requesterEmail,
+    companyName: groupedData.companyName,
+    companyWebsite: groupedData.companyWebsite,
+  }, Boolean) : undefined;
+
+  return (
+    <div>
+      { !hasErrors && (
+        <Alert status="success" mb={ 6 }>
+          Success! All tags went into moderation pipeline and soon will appear in the explorer.
+        </Alert>
+      ) }
+
+      <Box as="h2" textStyle="h4">Company info</Box>
+      <Grid rowGap={ 3 } columnGap={ 6 } gridTemplateColumns="170px 1fr" mt={ 6 }>
+        <GridItem>Your name</GridItem>
+        <GridItem>{ groupedData.requesterName }</GridItem>
+        <GridItem>Email</GridItem>
+        <GridItem>{ groupedData.requesterEmail }</GridItem>
+        { groupedData.companyName && (
+          <>
+            <GridItem>Company name</GridItem>
+            <GridItem>{ groupedData.companyName }</GridItem>
+          </>
+        ) }
+        { companyWebsite && (
+          <>
+            <GridItem>Company website</GridItem>
+            <GridItem>
+              <LinkExternal href={ companyWebsite.url }>{ companyWebsite.domain }</LinkExternal>
+            </GridItem>
+          </>
+        ) }
+      </Grid>
+
+      <Box as="h2" textStyle="h4" mt={ 8 } mb={ 5 }>Public tags/labels</Box>
+      { hasErrors ? <PublicTagsSubmitResultWithErrors data={ groupedData }/> : <PublicTagsSubmitResultSuccess data={ groupedData }/> }
+
+      <Flex flexDir={{ base: 'column', lg: 'row' }} columnGap={ 6 } mt={ 8 } rowGap={ 3 }>
+        { hasErrors && (
+          <Button size="lg" variant="outline" as="a" href={ route({ pathname: '/public-tags/submit', query: startOverButtonQuery }) }>
+            Start over
+          </Button>
+        ) }
+        <Button size="lg" as="a" href={ route({ pathname: '/public-tags/submit' }) }>Add new tag</Button>
+      </Flex>
+    </div>
+  );
+};
+
+export default React.memo(PublicTagsSubmitResult);
diff --git a/ui/publicTags/submit/__screenshots__/PublicTagsSubmitForm.pw.tsx_default_base-view-mobile-1.png b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitForm.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..41b546b486
Binary files /dev/null and b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitForm.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/publicTags/submit/__screenshots__/PublicTagsSubmitForm.pw.tsx_mobile_base-view-mobile-1.png b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitForm.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..1bc0c4dbb1
Binary files /dev/null and b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitForm.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_default_all-success-result-view-mobile-1.png b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_default_all-success-result-view-mobile-1.png
new file mode 100644
index 0000000000..2b673d3a5d
Binary files /dev/null and b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_default_all-success-result-view-mobile-1.png differ
diff --git a/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_default_mobile-result-with-errors-view-1.png b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_default_mobile-result-with-errors-view-1.png
new file mode 100644
index 0000000000..643c0f99ec
Binary files /dev/null and b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_default_mobile-result-with-errors-view-1.png differ
diff --git a/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_default_result-with-errors-view-1.png b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_default_result-with-errors-view-1.png
new file mode 100644
index 0000000000..e5eb6aecfa
Binary files /dev/null and b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_default_result-with-errors-view-1.png differ
diff --git a/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_mobile_all-success-result-view-mobile-1.png b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_mobile_all-success-result-view-mobile-1.png
new file mode 100644
index 0000000000..c96b17898d
Binary files /dev/null and b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_mobile_all-success-result-view-mobile-1.png differ
diff --git a/ui/publicTags/submit/fields/PublicTagsSubmitFieldAddresses.tsx b/ui/publicTags/submit/fields/PublicTagsSubmitFieldAddresses.tsx
new file mode 100644
index 0000000000..cdd5a2f618
--- /dev/null
+++ b/ui/publicTags/submit/fields/PublicTagsSubmitFieldAddresses.tsx
@@ -0,0 +1,79 @@
+import { GridItem, IconButton } from '@chakra-ui/react';
+import React from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import FormFieldAddress from 'ui/shared/forms/fields/FormFieldAddress';
+import IconSvg from 'ui/shared/IconSvg';
+
+const LIMIT = 20;
+
+const PublicTagsSubmitFieldAddresses = () => {
+  const { control, formState } = useFormContext<FormFields>();
+  const { fields, insert, remove } = useFieldArray<FormFields, 'addresses'>({
+    name: 'addresses',
+    control,
+  });
+
+  const isDisabled = formState.isSubmitting;
+
+  const handleAddFieldClick = React.useCallback((event: React.MouseEvent) => {
+    const index = Number(event.currentTarget.getAttribute('data-index'));
+    if (!Object.is(index, NaN)) {
+      insert(index + 1, { hash: '' });
+    }
+  }, [ insert ]);
+
+  const handleRemoveFieldClick = React.useCallback((event: React.MouseEvent) => {
+    const index = Number(event.currentTarget.getAttribute('data-index'));
+    if (!Object.is(index, NaN)) {
+      remove(index);
+    }
+  }, [ remove ]);
+
+  return (
+    <>
+      { fields.map((field, index) => {
+        return (
+          <React.Fragment key={ field.id }>
+            <GridItem colSpan={{ base: 1, lg: 2 }}>
+              <FormFieldAddress<FormFields>
+                name={ `addresses.${ index }.hash` }
+                isRequired
+                placeholder="Smart contract / Address (0x...)"
+                size={{ base: 'md', lg: 'lg' }}
+              />
+            </GridItem>
+            <GridItem display="flex" alignItems="center" columnGap={ 5 } justifyContent={{ base: 'flex-end', lg: 'flex-start' }}>
+              { fields.length < LIMIT && index === fields.length - 1 && (
+                <IconButton
+                  aria-label="add"
+                  data-index={ index }
+                  variant="outline"
+                  boxSize="30px"
+                  onClick={ handleAddFieldClick }
+                  icon={ <IconSvg name="plus" boxSize={ 5 }/> }
+                  isDisabled={ isDisabled }
+                />
+              ) }
+              { fields.length > 1 && (
+                <IconButton
+                  aria-label="delete"
+                  data-index={ index }
+                  variant="outline"
+                  boxSize="30px"
+                  onClick={ handleRemoveFieldClick }
+                  icon={ <IconSvg name="minus" boxSize={ 5 }/> }
+                  isDisabled={ isDisabled }
+                />
+              ) }
+            </GridItem>
+          </React.Fragment>
+        );
+      }) }
+    </>
+  );
+};
+
+export default React.memo(PublicTagsSubmitFieldAddresses);
diff --git a/ui/publicTags/submit/fields/PublicTagsSubmitFieldTag.tsx b/ui/publicTags/submit/fields/PublicTagsSubmitFieldTag.tsx
new file mode 100644
index 0000000000..ede219d1de
--- /dev/null
+++ b/ui/publicTags/submit/fields/PublicTagsSubmitFieldTag.tsx
@@ -0,0 +1,150 @@
+import { chakra, Flex, Grid, GridItem, IconButton, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+import { type FieldError, type FieldErrorsImpl, type Merge } from 'react-hook-form';
+
+import type { FormFields, FormFieldTag } from '../types';
+import type { PublicTagType } from 'types/api/addressMetadata';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import EntityTag from 'ui/shared/EntityTags/EntityTag';
+import FormFieldText from 'ui/shared/forms/fields/FormFieldText';
+import FormFieldUrl from 'ui/shared/forms/fields/FormFieldUrl';
+import { validator as colorValidator } from 'ui/shared/forms/validators/color';
+import IconSvg from 'ui/shared/IconSvg';
+
+import PublicTagsSubmitFieldTagColor from './PublicTagsSubmitFieldTagColor';
+import PublicTagsSubmitFieldTagType from './PublicTagsSubmitFieldTagType';
+
+interface Props {
+  index: number;
+  field: FormFieldTag;
+  tagTypes: Array<PublicTagType> | undefined;
+  errors: Merge<FieldError, FieldErrorsImpl<FormFieldTag>> | undefined;
+  isDisabled: boolean;
+  onAddClick?: (index: number) => void;
+  onRemoveClick?: (index: number) => void;
+}
+
+const PublicTagsSubmitFieldTag = ({ index, isDisabled, errors, onAddClick, onRemoveClick, tagTypes, field }: Props) => {
+  const isMobile = useIsMobile();
+  const bgColorDefault = useColorModeValue('blackAlpha.50', 'whiteAlpha.100');
+  const bgColorError = useColorModeValue('red.50', 'red.900');
+
+  const handleAddClick = React.useCallback(() => {
+    onAddClick?.(index);
+  }, [ index, onAddClick ]);
+
+  const handleRemoveClick = React.useCallback(() => {
+    onRemoveClick?.(index);
+  }, [ index, onRemoveClick ]);
+
+  const fieldProps = {
+    size: { base: 'md', lg: 'lg' },
+  };
+
+  return (
+    <>
+      <GridItem colSpan={{ base: 1, lg: 2 }} p="10px" borderRadius="base" bgColor={ errors ? bgColorError : bgColorDefault }>
+        <Grid
+          rowGap={ 3 }
+          columnGap={ 3 }
+          templateColumns={{ base: '1fr', lg: 'repeat(4, 1fr)' }}
+        >
+          <GridItem colSpan={{ base: 1, lg: 2 }}>
+            <FormFieldText<FormFields>
+              name={ `tags.${ index }.name` }
+              placeholder="Tag (max 35 characters)"
+              isRequired
+              rules={{ maxLength: 35 }}
+              { ...fieldProps }
+            />
+          </GridItem>
+          <GridItem colSpan={{ base: 1, lg: 2 }}>
+            <PublicTagsSubmitFieldTagType index={ index } tagTypes={ tagTypes }/>
+          </GridItem>
+          <GridItem colSpan={{ base: 1, lg: 2 }}>
+            <FormFieldUrl<FormFields>
+              name={ `tags.${ index }.url` }
+              placeholder="Label URL"
+              { ...fieldProps }
+            />
+          </GridItem>
+          <PublicTagsSubmitFieldTagColor
+            fieldType="bgColor"
+            fieldName={ `tags.${ index }.bgColor` }
+            placeholder="Background (Hex)"
+            error={ errors?.bgColor }
+          />
+          <PublicTagsSubmitFieldTagColor
+            fieldType="textColor"
+            fieldName={ `tags.${ index }.textColor` }
+            placeholder="Text (Hex)"
+            error={ errors?.textColor }
+          />
+          <GridItem colSpan={{ base: 1, lg: 4 }}>
+            <FormFieldText<FormFields>
+              name={ `tags.${ index }.tooltipDescription` }
+              placeholder="Label description (max 80 characters)"
+              maxH="160px"
+              rules={{ maxLength: 80 }}
+              asComponent="Textarea"
+              { ...fieldProps }
+            />
+          </GridItem>
+        </Grid>
+      </GridItem>
+      <GridItem py={{ lg: '10px' }}>
+        <Flex
+          alignItems="center"
+          columnGap={ 5 }
+          justifyContent={{ base: 'flex-end', lg: 'flex-start' }}
+          h={{ base: 'auto', lg: '80px' }}
+        >
+          { onAddClick && (
+            <IconButton
+              aria-label="add"
+              data-index={ index }
+              variant="outline"
+              boxSize="30px"
+              onClick={ handleAddClick }
+              icon={ <IconSvg name="plus" boxSize={ 5 }/> }
+              isDisabled={ isDisabled }
+            />
+          ) }
+          { onRemoveClick && (
+            <IconButton
+              aria-label="delete"
+              data-index={ index }
+              variant="outline"
+              boxSize="30px"
+              onClick={ handleRemoveClick }
+              icon={ <IconSvg name="minus" boxSize={ 5 }/> }
+              isDisabled={ isDisabled }
+            />
+          ) }
+        </Flex>
+        { !isMobile && (
+          <Flex flexDir="column" alignItems="flex-start" mt={ 10 } rowGap={ 2 }>
+            <EntityTag data={{
+              name: field.name || 'Tag name',
+              tagType: field.type.value,
+              meta: {
+                tagUrl: field.url,
+                bgColor: field.bgColor && colorValidator(field.bgColor) === true ? field.bgColor : undefined,
+                textColor: field.textColor && colorValidator(field.textColor) === true ? field.textColor : undefined,
+                tooltipDescription: field.tooltipDescription,
+              },
+              slug: 'new',
+              ordinal: 0,
+            }}/>
+            <chakra.span color="text_secondary" fontSize="sm">
+              { tagTypes?.find(({ type }) => type === field.type.value)?.description }
+            </chakra.span>
+          </Flex>
+        ) }
+      </GridItem>
+    </>
+  );
+};
+
+export default PublicTagsSubmitFieldTag;
diff --git a/ui/publicTags/submit/fields/PublicTagsSubmitFieldTagColor.tsx b/ui/publicTags/submit/fields/PublicTagsSubmitFieldTagColor.tsx
new file mode 100644
index 0000000000..77ef8b45d1
--- /dev/null
+++ b/ui/publicTags/submit/fields/PublicTagsSubmitFieldTagColor.tsx
@@ -0,0 +1,73 @@
+import { Circle, FormControl, Input, InputGroup, InputRightElement, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+import { useFormContext, type FieldError } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import FormInputPlaceholder from 'ui/shared/forms/inputs/FormInputPlaceholder';
+import { validator as colorValidator } from 'ui/shared/forms/validators/color';
+
+type ColorFieldTypes = 'bgColor' | 'textColor';
+
+interface Props<Type extends ColorFieldTypes> {
+  fieldType: Type;
+  fieldName: `tags.${ number }.${ Type }`;
+  error: FieldError | undefined;
+  placeholder: string;
+}
+
+const PublicTagsSubmitFieldTagColor = <Type extends ColorFieldTypes>({ error, fieldName, placeholder, fieldType }: Props<Type>) => {
+  const { register, formState } = useFormContext<FormFields>();
+
+  const isDisabled = formState.isSubmitting;
+
+  const circleBgColorDefault = {
+    bgColor: useColorModeValue('gray.100', 'gray.700'),
+    textColor: useColorModeValue('blackAlpha.800', 'whiteAlpha.800'),
+  };
+  const isMobile = useIsMobile();
+  const field = register(fieldName, { validate: colorValidator, maxLength: 7 });
+  const [ value, setValue ] = React.useState('');
+
+  const handleChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const nextValue = (() => {
+      const value = event.target.value;
+      if (value) {
+        if (value.length === 1 && value[0] !== '#') {
+          return `#${ value }`;
+        }
+      }
+      return value;
+    })();
+    setValue(nextValue);
+    field.onChange(event);
+  }, [ field ]);
+
+  return (
+    <FormControl variant="floating" size={{ base: 'md', lg: 'lg' }}>
+      <InputGroup size={ isMobile ? 'md' : 'lg' }>
+        <Input
+          { ...field }
+          onChange={ handleChange }
+          value={ value }
+          isInvalid={ Boolean(error) }
+          isDisabled={ isDisabled }
+          autoComplete="off"
+          maxLength={ 7 }
+        />
+        <FormInputPlaceholder text={ placeholder } error={ error }/>
+        <InputRightElement w="30px" h="auto" right={ 4 } top="50%" transform="translateY(-50%)" zIndex={ 10 }>
+          <Circle
+            size="30px"
+            bgColor={ value && colorValidator(value) === true ? value : circleBgColorDefault[fieldType] }
+            borderColor="gray.300"
+            borderWidth="1px"
+          />
+        </InputRightElement>
+      </InputGroup>
+    </FormControl>
+  );
+};
+
+export default React.memo(PublicTagsSubmitFieldTagColor);
diff --git a/ui/publicTags/submit/fields/PublicTagsSubmitFieldTagType.tsx b/ui/publicTags/submit/fields/PublicTagsSubmitFieldTagType.tsx
new file mode 100644
index 0000000000..23d0c2ec68
--- /dev/null
+++ b/ui/publicTags/submit/fields/PublicTagsSubmitFieldTagType.tsx
@@ -0,0 +1,75 @@
+import { chakra, Flex } from '@chakra-ui/react';
+import type { GroupBase, SelectComponentsConfig, SingleValueProps } from 'chakra-react-select';
+import { chakraComponents } from 'chakra-react-select';
+import _capitalize from 'lodash/capitalize';
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+import type { PublicTagType } from 'types/api/addressMetadata';
+import type { Option } from 'ui/shared/forms/inputs/select/types';
+
+import FormFieldFancySelect from 'ui/shared/forms/fields/FormFieldFancySelect';
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props {
+  index: number;
+  tagTypes: Array<PublicTagType> | undefined;
+}
+
+const PublicTagsSubmitFieldTagType = ({ index, tagTypes }: Props) => {
+  const { watch } = useFormContext<FormFields>();
+
+  const typeOptions = React.useMemo(() => tagTypes?.map((type) => ({
+    value: type.type,
+    label: _capitalize(type.type),
+  })) ?? [], [ tagTypes ]);
+
+  const fieldValue = watch(`tags.${ index }.type`).value;
+
+  const selectComponents: SelectComponentsConfig<Option, boolean, GroupBase<Option>> = React.useMemo(() => {
+    type SingleValueComponentProps = SingleValueProps<Option, boolean, GroupBase<Option>> & { children: React.ReactNode };
+    const SingleValue = ({ children, ...props }: SingleValueComponentProps) => {
+      switch (fieldValue) {
+        case 'name': {
+          return (
+            <chakraComponents.SingleValue { ...props }>
+              <Flex alignItems="center" columnGap={ 1 }>
+                <IconSvg name="publictags_slim" boxSize={ 4 } flexShrink={ 0 } color="gray.400"/>
+                { children }
+              </Flex>
+            </chakraComponents.SingleValue>
+          );
+        }
+        case 'protocol':
+        case 'generic': {
+          return (
+            <chakraComponents.SingleValue { ...props }>
+              <chakra.span color="gray.400">#</chakra.span> { children }
+            </chakraComponents.SingleValue>
+          );
+        }
+
+        default: {
+          return (<chakraComponents.SingleValue { ...props }>{ children }</chakraComponents.SingleValue>);
+        }
+      }
+    };
+
+    return { SingleValue };
+  }, [ fieldValue ]);
+
+  return (
+    <FormFieldFancySelect<FormFields, `tags.${ number }.type`>
+      name={ `tags.${ index }.type` }
+      placeholder="Tag type"
+      options={ typeOptions }
+      isRequired
+      isAsync={ false }
+      isSearchable={ false }
+      components={ selectComponents }
+    />
+  );
+};
+
+export default React.memo(PublicTagsSubmitFieldTagType);
diff --git a/ui/publicTags/submit/fields/PublicTagsSubmitFieldTags.tsx b/ui/publicTags/submit/fields/PublicTagsSubmitFieldTags.tsx
new file mode 100644
index 0000000000..bbfbb11276
--- /dev/null
+++ b/ui/publicTags/submit/fields/PublicTagsSubmitFieldTags.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+import type { PublicTagType } from 'types/api/addressMetadata';
+
+import PublicTagsSubmitFieldTag from './PublicTagsSubmitFieldTag';
+
+const LIMIT = 5;
+
+interface Props {
+  tagTypes: Array<PublicTagType> | undefined;
+}
+
+const PublicTagsSubmitFieldTags = ({ tagTypes }: Props) => {
+  const { control, formState, watch } = useFormContext<FormFields>();
+  const { fields, insert, remove } = useFieldArray<FormFields, 'tags'>({
+    name: 'tags',
+    control,
+  });
+
+  const isDisabled = formState.isSubmitting;
+
+  const handleAddFieldClick = React.useCallback((index: number) => {
+    insert(index + 1, {
+      name: '',
+      type: { label: 'Name', value: 'name' },
+      url: undefined,
+      bgColor: undefined,
+      textColor: undefined,
+      tooltipDescription: undefined,
+    });
+  }, [ insert ]);
+
+  const handleRemoveFieldClick = React.useCallback((index: number) => {
+    remove(index);
+  }, [ remove ]);
+
+  return (
+    <>
+      { fields.map((field, index) => {
+        const errors = formState.errors?.tags?.[ index ];
+
+        return (
+          <PublicTagsSubmitFieldTag
+            key={ field.id }
+            field={ watch(`tags.${ index }`) }
+            index={ index }
+            tagTypes={ tagTypes }
+            errors={ errors }
+            isDisabled={ isDisabled }
+            onAddClick={ fields.length < LIMIT && index === fields.length - 1 ? handleAddFieldClick : undefined }
+            onRemoveClick={ fields.length > 1 ? handleRemoveFieldClick : undefined }
+          />
+        );
+      }) }
+    </>
+  );
+};
+
+export default React.memo(PublicTagsSubmitFieldTags);
diff --git a/ui/publicTags/submit/mocks.ts b/ui/publicTags/submit/mocks.ts
new file mode 100644
index 0000000000..61cfccba30
--- /dev/null
+++ b/ui/publicTags/submit/mocks.ts
@@ -0,0 +1,97 @@
+import type { FormSubmitResultItem } from './types';
+
+export const address1 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5851';
+export const address2 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5852';
+export const address3 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5853';
+export const address4 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5854';
+export const address5 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5855';
+
+export const baseFields = {
+  requesterName: 'John Doe',
+  requesterEmail: 'jonh.doe@duck.me',
+  companyName: 'DuckDuckMe',
+  companyWebsite: 'https://duck.me',
+  description: 'Quack quack',
+};
+
+export const tag1 = {
+  name: 'Unicorn Uproar',
+  tagType: 'name' as const,
+  meta: {
+    tagUrl: 'https://example.com',
+    bgColor: '#ff1493',
+    textColor: '#FFFFFF',
+    tooltipDescription: undefined,
+  },
+};
+
+export const tag2 = {
+  name: 'Hello',
+  tagType: 'generic' as const,
+  meta: {
+    tooltipDescription: 'Hello, it is me... I was wondering if after all these years you would like to meet',
+  },
+};
+
+export const tag3 = {
+  name: 'duck owner 🦆',
+  tagType: 'classifier' as const,
+  meta: {
+    bgColor: '#fff300',
+  },
+};
+
+export const allSuccessResponses: Array<FormSubmitResultItem> = [
+  address1,
+  address2,
+  address3,
+  address4,
+  address5,
+]
+  .map((address) => ([ tag1, tag2, tag3 ].map((tag) => ({
+    error: null,
+    payload: {
+      ...baseFields,
+      ...tag,
+      address,
+    },
+  }))))
+  .flat();
+
+export const mixedResponses: Array<FormSubmitResultItem> = [
+  // address1
+  {
+    error: null,
+    payload: { address: address1, ...tag1 },
+  },
+  {
+    error: 'Some error',
+    payload: { address: address1, ...tag2 },
+  },
+  {
+    error: 'Some error',
+    payload: { address: address1, ...tag3 },
+  },
+  // address2
+  {
+    error: 'Some error',
+    payload: { address: address2, ...tag2 },
+  },
+  {
+    error: 'Some error',
+    payload: { address: address2, ...tag3 },
+  },
+  // address3
+  {
+    error: 'Some error',
+    payload: { address: address3, ...tag1 },
+  },
+  {
+    error: 'Another nasty error',
+    payload: { address: address3, ...tag2 },
+  },
+  {
+    error: null,
+    payload: { address: address3, ...tag3 },
+  },
+].map((item) => ({ ...item, payload: { ...item.payload, ...baseFields } }));
diff --git a/ui/publicTags/submit/result/PublicTagsSubmitResultSuccess.tsx b/ui/publicTags/submit/result/PublicTagsSubmitResultSuccess.tsx
new file mode 100644
index 0000000000..83ab5af1e7
--- /dev/null
+++ b/ui/publicTags/submit/result/PublicTagsSubmitResultSuccess.tsx
@@ -0,0 +1,53 @@
+import { Box, Flex, Grid, GridItem } from '@chakra-ui/react';
+import React from 'react';
+
+import type { FormSubmitResultGrouped } from '../types';
+
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import EntityTag from 'ui/shared/EntityTags/EntityTag';
+
+interface Props {
+  data: FormSubmitResultGrouped;
+}
+
+const PublicTagsSubmitResultSuccess = ({ data }: Props) => {
+  return (
+    <Grid gridTemplateColumns={{ base: '1fr', lg: '1fr 1fr' }} rowGap={ 3 } columnGap={ 3 }>
+      <GridItem overflow="hidden">
+        <Box fontSize="sm" color="text_secondary" fontWeight={ 500 }>Smart contract / Address (0x...)</Box>
+        <Flex flexDir="column" rowGap={ 2 } mt={ 2 }>
+          { data.items
+            .map(({ addresses }) => addresses)
+            .flat()
+            .map((hash) => (
+              <AddressEntity
+                key={ hash }
+                address={{ hash }}
+                noIcon
+              />
+            )) }
+        </Flex>
+      </GridItem>
+      <GridItem>
+        <Box fontSize="sm" color="text_secondary" fontWeight={ 500 }>Tag</Box>
+        <Flex rowGap={ 2 } columnGap={ 2 } mt={ 2 } justifyContent="flex-start" flexWrap="wrap">
+          { data.items
+            .map(({ tags }) => tags)
+            .flat()
+            .map((tag) => (
+              <EntityTag
+                key={ tag.name }
+                maxW={{ base: '100%', lg: '300px' }}
+                data={{
+                  ...tag,
+                  slug: '',
+                  ordinal: 0,
+                }}/>
+            )) }
+        </Flex>
+      </GridItem>
+    </Grid>
+  );
+};
+
+export default React.memo(PublicTagsSubmitResultSuccess);
diff --git a/ui/publicTags/submit/result/PublicTagsSubmitResultWithErrors.tsx b/ui/publicTags/submit/result/PublicTagsSubmitResultWithErrors.tsx
new file mode 100644
index 0000000000..e38492462f
--- /dev/null
+++ b/ui/publicTags/submit/result/PublicTagsSubmitResultWithErrors.tsx
@@ -0,0 +1,92 @@
+import { Box, Button, Flex, Grid, GridItem, useColorModeValue } from '@chakra-ui/react';
+import _pickBy from 'lodash/pickBy';
+import React from 'react';
+
+import type { FormSubmitResultGrouped } from '../types';
+
+import { route } from 'nextjs-routes';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import EntityTag from 'ui/shared/EntityTags/EntityTag';
+
+interface Props {
+  data: FormSubmitResultGrouped;
+}
+
+const PublicTagsSubmitResultWithErrors = ({ data }: Props) => {
+  const isMobile = useIsMobile();
+  const bgColorSuccess = useColorModeValue('green.50', 'green.800');
+  const bgColorError = useColorModeValue('red.50', 'red.800');
+
+  return (
+    <Flex flexDir="column" rowGap={ 3 }>
+      { data.items.map((item, index) => {
+
+        const startOverButtonQuery = _pickBy({
+          addresses: item.addresses,
+          requesterName: data.requesterName,
+          requesterEmail: data.requesterEmail,
+          companyName: data.companyName,
+          companyWebsite: data.companyWebsite,
+        }, Boolean);
+
+        return (
+          <Flex key={ index } flexDir={{ base: 'column', lg: 'row' }}>
+            <Box flexGrow={ 1 }>
+              <Grid
+                gridTemplateColumns={{ base: '1fr', lg: '1fr 1fr' }}
+                bgColor={ item.error ? bgColorError : bgColorSuccess }
+                borderRadius="base"
+                rowGap={ 3 }
+              >
+                <GridItem px={{ base: 4, lg: 6 }} pt={{ base: 2, lg: 4 }} pb={{ base: 0, lg: 4 }} overflow="hidden">
+                  <Box fontSize="sm" color="text_secondary" fontWeight={ 500 }>Smart contract / Address (0x...)</Box>
+                  <Flex flexDir="column" rowGap={ 2 } mt={ 2 }>
+                    { item.addresses.map((hash) => (
+                      <AddressEntity
+                        key={ hash }
+                        address={{ hash }}
+                        noIcon
+                      />
+                    )) }
+                  </Flex>
+                </GridItem>
+                <GridItem px={{ base: 4, lg: 6 }} pb={{ base: 2, lg: 4 }} pt={{ base: 0, lg: 4 }}>
+                  <Box fontSize="sm" color="text_secondary" fontWeight={ 500 }>Tag</Box>
+                  <Flex rowGap={ 2 } columnGap={ 2 } mt={ 2 } justifyContent="flex-start" flexWrap="wrap">
+                    { item.tags.map((tag) => (
+                      <EntityTag
+                        key={ tag.name }
+                        maxW={{ base: '100%', lg: '300px' }}
+                        data={{ ...tag, slug: '', ordinal: 0 }}
+                      />
+                    )) }
+                  </Flex>
+                </GridItem>
+              </Grid>
+              { item.error && <Box color="red.500" mt={ 1 } fontSize="sm">{ item.error }</Box> }
+            </Box>
+            { item.error && (
+              <Button
+                variant="outline"
+                size="sm"
+                flexShrink={ 0 }
+                mt={{ base: 1, lg: 6 }}
+                ml={{ base: 0, lg: 6 }}
+                w="min-content"
+                as="a"
+                href={ route({ pathname: '/public-tags/submit', query: startOverButtonQuery }) }
+              >
+                Start  over
+              </Button>
+            ) }
+            { !item.error && !isMobile && <Box w="95px" ml={ 6 } flexShrink={ 0 }/> }
+          </Flex>
+        );
+      }) }
+    </Flex>
+  );
+};
+
+export default React.memo(PublicTagsSubmitResultWithErrors);
diff --git a/ui/publicTags/submit/types.ts b/ui/publicTags/submit/types.ts
new file mode 100644
index 0000000000..4f55f9043b
--- /dev/null
+++ b/ui/publicTags/submit/types.ts
@@ -0,0 +1,59 @@
+import type { AddressMetadataTagType } from 'types/api/addressMetadata';
+import type { Option } from 'ui/shared/forms/inputs/select/types';
+
+export interface FormFields {
+  requesterName: string;
+  requesterEmail: string;
+  companyName: string | undefined;
+  companyWebsite: string | undefined;
+  addresses: Array<{ hash: string }>;
+  tags: Array<FormFieldTag>;
+  description: string | undefined;
+}
+
+export interface FormFieldTag {
+  name: string;
+  type: Option<AddressMetadataTagType>;
+  url: string | undefined;
+  bgColor: string | undefined;
+  textColor: string | undefined;
+  tooltipDescription: string | undefined;
+}
+
+export interface SubmitRequestBody {
+  requesterName: string;
+  requesterEmail: string;
+  companyName?: string;
+  companyWebsite?: string;
+  address: string;
+  name: string;
+  tagType: AddressMetadataTagType;
+  description?: string;
+  meta: {
+    bgColor?: string;
+    textColor?: string;
+    tagUrl?: string;
+    tooltipDescription?: string;
+  };
+}
+
+export interface FormSubmitResultItem {
+  error: string | null;
+  payload: SubmitRequestBody;
+}
+
+export type FormSubmitResult = Array<FormSubmitResultItem>;
+
+export interface FormSubmitResultGrouped {
+  requesterName: string;
+  requesterEmail: string;
+  companyName?: string;
+  companyWebsite?: string;
+  items: Array<FormSubmitResultItemGrouped>;
+}
+
+export interface FormSubmitResultItemGrouped {
+  error: string | null;
+  addresses: Array<string>;
+  tags: Array<Pick<SubmitRequestBody, 'name' | 'tagType' | 'meta'>>;
+}
diff --git a/ui/publicTags/submit/utils.test.ts b/ui/publicTags/submit/utils.test.ts
new file mode 100644
index 0000000000..a13479db1d
--- /dev/null
+++ b/ui/publicTags/submit/utils.test.ts
@@ -0,0 +1,75 @@
+import * as mocks from './mocks';
+import { convertFormDataToRequestsBody, convertTagApiFieldsToFormFields, groupSubmitResult } from './utils';
+
+describe('function convertFormDataToRequestsBody()', () => {
+  it('should convert form data to requests body', () => {
+    const formData = {
+      ...mocks.baseFields,
+      addresses: [ { hash: mocks.address1 }, { hash: mocks.address2 } ],
+      tags: [ convertTagApiFieldsToFormFields(mocks.tag1), convertTagApiFieldsToFormFields(mocks.tag2) ],
+    };
+    const result = convertFormDataToRequestsBody(formData);
+    expect(result).toMatchObject([
+      { address: mocks.address1, name: mocks.tag1.name, tagType: mocks.tag1.tagType },
+      { address: mocks.address1, name: mocks.tag2.name, tagType: mocks.tag2.tagType },
+      { address: mocks.address2, name: mocks.tag1.name, tagType: mocks.tag1.tagType },
+      { address: mocks.address2, name: mocks.tag2.name, tagType: mocks.tag2.tagType },
+    ]);
+  });
+});
+
+describe('function groupSubmitResult()', () => {
+  it('group success result', () => {
+    const result = groupSubmitResult(mocks.allSuccessResponses);
+    expect(result).toMatchObject({
+      requesterName: mocks.baseFields.requesterName,
+      requesterEmail: mocks.baseFields.requesterEmail,
+      companyName: mocks.baseFields.companyName,
+      companyWebsite: mocks.baseFields.companyWebsite,
+      items: [
+        {
+          error: null,
+          addresses: [ mocks.address1, mocks.address2, mocks.address3, mocks.address4, mocks.address5 ],
+          tags: [ mocks.tag1, mocks.tag2, mocks.tag3 ],
+        },
+      ],
+    });
+  });
+
+  it('group result with error', () => {
+    const result = groupSubmitResult(mocks.mixedResponses);
+    expect(result).toMatchObject({
+      requesterName: mocks.baseFields.requesterName,
+      requesterEmail: mocks.baseFields.requesterEmail,
+      companyName: mocks.baseFields.companyName,
+      companyWebsite: mocks.baseFields.companyWebsite,
+      items: [
+        {
+          error: null,
+          addresses: [ mocks.address1 ],
+          tags: [ mocks.tag1 ],
+        },
+        {
+          error: null,
+          addresses: [ mocks.address3 ],
+          tags: [ mocks.tag3 ],
+        },
+        {
+          error: 'Some error',
+          addresses: [ mocks.address1, mocks.address2 ],
+          tags: [ mocks.tag2, mocks.tag3 ],
+        },
+        {
+          error: 'Some error',
+          addresses: [ mocks.address3 ],
+          tags: [ mocks.tag1 ],
+        },
+        {
+          error: 'Another nasty error',
+          addresses: [ mocks.address3 ],
+          tags: [ mocks.tag2 ],
+        },
+      ],
+    });
+  });
+});
diff --git a/ui/publicTags/submit/utils.ts b/ui/publicTags/submit/utils.ts
new file mode 100644
index 0000000000..6ee6df8c8a
--- /dev/null
+++ b/ui/publicTags/submit/utils.ts
@@ -0,0 +1,122 @@
+import _isEqual from 'lodash/isEqual';
+import _pickBy from 'lodash/pickBy';
+
+import type { FormFieldTag, FormFields, FormSubmitResult, FormSubmitResultGrouped, FormSubmitResultItemGrouped, SubmitRequestBody } from './types';
+import type { UserInfo } from 'types/api/account';
+
+import type { Route } from 'nextjs-routes';
+
+import getQueryParamString from 'lib/router/getQueryParamString';
+
+export function convertFormDataToRequestsBody(data: FormFields): Array<SubmitRequestBody> {
+  const result: Array<SubmitRequestBody> = [];
+
+  for (const address of data.addresses) {
+    for (const tag of data.tags) {
+      result.push({
+        requesterName: data.requesterName,
+        requesterEmail: data.requesterEmail,
+        companyName: data.companyName,
+        companyWebsite: data.companyWebsite,
+        address: address.hash,
+        name: tag.name,
+        tagType: tag.type.value,
+        description: data.description,
+        meta: _pickBy({
+          bgColor: tag.bgColor,
+          textColor: tag.textColor,
+          tagUrl: tag.url,
+          tooltipDescription: tag.tooltipDescription,
+        }, Boolean),
+      });
+    }
+  }
+
+  return result;
+}
+
+export function convertTagApiFieldsToFormFields(tag: Pick<SubmitRequestBody, 'name' | 'tagType' | 'meta'>): FormFieldTag {
+  return {
+    name: tag.name,
+    type: { label: tag.tagType, value: tag.tagType },
+    url: tag.meta.tagUrl,
+    bgColor: tag.meta.bgColor,
+    textColor: tag.meta.textColor,
+    tooltipDescription: tag.meta.tooltipDescription,
+  };
+}
+
+export function groupSubmitResult(data: FormSubmitResult | undefined): FormSubmitResultGrouped | undefined {
+  if (!data) {
+    return;
+  }
+
+  const _items: Array<FormSubmitResultItemGrouped> = [];
+
+  // group by error and address
+  for (const item of data) {
+    const existingItem = _items.find(({ error, addresses }) => error === item.error && addresses.length === 1 && addresses[0] === item.payload.address);
+    if (existingItem) {
+      existingItem.tags.push({ name: item.payload.name, tagType: item.payload.tagType, meta: item.payload.meta });
+      continue;
+    }
+
+    _items.push({
+      error: item.error,
+      addresses: [ item.payload.address ],
+      tags: [ { name: item.payload.name, tagType: item.payload.tagType, meta: item.payload.meta } ],
+    });
+  }
+
+  const items: Array<FormSubmitResultItemGrouped> = [];
+
+  // merge items with the same error and tags
+  for (const item of _items) {
+    const existingItem = items.find(({ error, tags }) => error === item.error && _isEqual(tags, item.tags));
+    if (existingItem) {
+      existingItem.addresses.push(...item.addresses);
+      continue;
+    }
+
+    items.push(item);
+  }
+
+  return {
+    requesterName: data[0].payload.requesterName,
+    requesterEmail: data[0].payload.requesterEmail,
+    companyName: data[0].payload.companyName,
+    companyWebsite: data[0].payload.companyWebsite,
+    items: items.sort((a, b) => {
+      if (a.error && !b.error) {
+        return 1;
+      }
+      if (!a.error && b.error) {
+        return -1;
+      }
+      return 0;
+    }),
+  };
+}
+
+export function getFormDefaultValues(query: Route['query'], userInfo: UserInfo | undefined) {
+  return {
+    addresses: getAddressesFromQuery(query),
+    requesterName: getQueryParamString(query?.requesterName) || userInfo?.nickname || userInfo?.name || undefined,
+    requesterEmail: getQueryParamString(query?.requesterEmail) || userInfo?.email || undefined,
+    companyName: getQueryParamString(query?.companyName),
+    companyWebsite: getQueryParamString(query?.companyWebsite),
+    tags: [ { name: '', type: { label: 'Name', value: 'name' as const } } ],
+  };
+}
+
+function getAddressesFromQuery(query: Route['query']) {
+  if (!query?.addresses) {
+    return [ { hash: '' } ];
+  }
+
+  if (Array.isArray(query.addresses)) {
+    return query.addresses.map((hash) => ({ hash }));
+  }
+
+  return [ { hash: query.addresses } ];
+}
diff --git a/ui/rewards/MeritsIcon.tsx b/ui/rewards/MeritsIcon.tsx
new file mode 100644
index 0000000000..a12d0b62ed
--- /dev/null
+++ b/ui/rewards/MeritsIcon.tsx
@@ -0,0 +1,21 @@
+import { Icon, useColorModeValue, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+// This icon doesn't work properly when it is in the sprite
+// Probably because of the gradient
+// eslint-disable-next-line no-restricted-imports
+import meritsIcon from 'icons/merits_colored.svg';
+
+type Props = {
+  className?: string;
+};
+
+const MeritsIcon = ({ className }: Props) => {
+  const shadow = useColorModeValue('drop-shadow(0px 4px 2px rgba(141, 179, 204, 0.25))', 'none');
+
+  return (
+    <Icon as={ meritsIcon } className={ className } filter={ shadow }/>
+  );
+};
+
+export default chakra(MeritsIcon);
diff --git a/ui/rewards/RewardsButton.tsx b/ui/rewards/RewardsButton.tsx
new file mode 100644
index 0000000000..1120f2f240
--- /dev/null
+++ b/ui/rewards/RewardsButton.tsx
@@ -0,0 +1,68 @@
+import type { ButtonProps } from '@chakra-ui/react';
+import { Button, chakra, Tooltip } from '@chakra-ui/react';
+import React, { useCallback } from 'react';
+
+import { route } from 'nextjs-routes';
+
+import { useRewardsContext } from 'lib/contexts/rewards';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+type Props = {
+  size?: ButtonProps['size'];
+  variant?: ButtonProps['variant'];
+};
+
+const RewardsButton = ({ variant = 'header', size }: Props) => {
+  const { isInitialized, apiToken, openLoginModal, dailyRewardQuery, balancesQuery } = useRewardsContext();
+  const isMobile = useIsMobile();
+  const isLoading = !isInitialized || dailyRewardQuery.isLoading || balancesQuery.isLoading;
+
+  const handleFocus = useCallback((e: React.FocusEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+  }, []);
+
+  return (
+    <Tooltip
+      label="Earn Merits for using Blockscout"
+      textAlign="center"
+      padding={ 2 }
+      openDelay={ 500 }
+      isDisabled={ isMobile || isLoading || Boolean(apiToken) }
+      width="150px"
+    >
+      <Button
+        variant={ variant }
+        data-selected={ !isLoading && Boolean(apiToken) }
+        flexShrink={ 0 }
+        as={ apiToken ? LinkInternal : 'button' }
+        { ...(apiToken ? { href: route({ pathname: '/account/rewards' }) } : {}) }
+        onClick={ apiToken ? undefined : openLoginModal }
+        onFocus={ handleFocus }
+        fontSize="sm"
+        size={ size }
+        px={ !isLoading && Boolean(apiToken) ? 2.5 : 4 }
+        isLoading={ isLoading }
+        _hover={{
+          textDecoration: 'none',
+        }}
+      >
+        <IconSvg
+          name={ dailyRewardQuery.data?.available ? 'merits_with_dot_slim' : 'merits_slim' }
+          boxSize={ variant === 'hero' ? 6 : 5 }
+          flexShrink={ 0 }
+        />
+        <chakra.span
+          display={{ base: 'none', md: 'inline' }}
+          ml={ 2 }
+          fontWeight={ apiToken ? '700' : '600' }
+        >
+          { apiToken ? (balancesQuery.data?.total || 'N/A') : 'Merits' }
+        </chakra.span>
+      </Button>
+    </Tooltip>
+  );
+};
+
+export default RewardsButton;
diff --git a/ui/rewards/RewardsReadOnlyInputWithCopy.tsx b/ui/rewards/RewardsReadOnlyInputWithCopy.tsx
new file mode 100644
index 0000000000..fc8defb958
--- /dev/null
+++ b/ui/rewards/RewardsReadOnlyInputWithCopy.tsx
@@ -0,0 +1,39 @@
+import { FormControl, Input, InputGroup, InputRightElement, Skeleton, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import FormInputPlaceholder from 'ui/shared/forms/inputs/FormInputPlaceholder';
+
+type Props = {
+  label: string;
+  value: string;
+  className?: string;
+  isLoading?: boolean;
+};
+
+const RewardsReadOnlyInputWithCopy = ({ label, value, className, isLoading }: Props) => (
+  <FormControl variant="floating" id={ label } className={ className }>
+    <Skeleton isLoaded={ !isLoading }>
+      <InputGroup>
+        <Input
+          readOnly
+          fontWeight="500"
+          value={ value }
+          overflow="hidden"
+          textOverflow="ellipsis"
+          sx={{
+            '&:not(:placeholder-shown)': {
+              pr: '40px',
+            },
+          }}
+        />
+        <FormInputPlaceholder text={ label }/>
+        <InputRightElement w="40px" display="flex" justifyContent="flex-end" pr={ 2 }>
+          <CopyToClipboard text={ value }/>
+        </InputRightElement>
+      </InputGroup>
+    </Skeleton>
+  </FormControl>
+);
+
+export default chakra(RewardsReadOnlyInputWithCopy);
diff --git a/ui/rewards/dashboard/DailyRewardClaimButton.tsx b/ui/rewards/dashboard/DailyRewardClaimButton.tsx
new file mode 100644
index 0000000000..67e2daceee
--- /dev/null
+++ b/ui/rewards/dashboard/DailyRewardClaimButton.tsx
@@ -0,0 +1,89 @@
+import { Button, useBoolean, Flex, useColorModeValue } from '@chakra-ui/react';
+import React, { useCallback, useEffect, useMemo } from 'react';
+
+import { SECOND } from 'lib/consts';
+import { useRewardsContext } from 'lib/contexts/rewards';
+import splitSecondsInPeriods from 'ui/blockCountdown/splitSecondsInPeriods';
+
+const DailyRewardClaimButton = () => {
+  const { balancesQuery, dailyRewardQuery, claim } = useRewardsContext();
+  const [ isClaiming, setIsClaiming ] = useBoolean(false);
+  const [ timeLeft, setTimeLeft ] = React.useState<string>('');
+
+  const dailyRewardValue = useMemo(() =>
+    dailyRewardQuery.data ?
+      Number(Number(dailyRewardQuery.data.total_reward).toFixed(2)) :
+      0,
+  [ dailyRewardQuery.data ]);
+
+  const handleClaim = useCallback(async() => {
+    setIsClaiming.on();
+    try {
+      await claim();
+      await Promise.all([
+        balancesQuery.refetch(),
+        dailyRewardQuery.refetch(),
+      ]);
+    } catch (error) {}
+    setIsClaiming.off();
+  }, [ claim, setIsClaiming, balancesQuery, dailyRewardQuery ]);
+
+  useEffect(() => {
+    if (!dailyRewardQuery.data?.reset_at) {
+      return;
+    }
+
+    // format the date to be compatible with the Date constructor
+    const formattedDate = dailyRewardQuery.data.reset_at.replace(' ', 'T').replace(' UTC', 'Z');
+    const target = new Date(formattedDate).getTime();
+
+    let interval = 0;
+
+    const updateCountdown = (target: number) => {
+      const now = new Date().getTime();
+      const difference = target - now;
+
+      if (difference > 0) {
+        const { hours, minutes, seconds } = splitSecondsInPeriods(Math.floor(difference / SECOND));
+        setTimeLeft(`${ hours }:${ minutes }:${ seconds }`);
+      } else {
+        setTimeLeft('00:00:00');
+        dailyRewardQuery.refetch();
+        clearInterval(interval);
+      }
+    };
+
+    updateCountdown(target);
+
+    interval = window.setInterval(() => {
+      updateCountdown(target);
+    }, SECOND);
+
+    return () => clearInterval(interval);
+  }, [ dailyRewardQuery ]);
+
+  const isLoading = isClaiming || dailyRewardQuery.isPending || dailyRewardQuery.isFetching;
+  const timerBgColor = useColorModeValue('gray.200', 'gray.800');
+
+  return !isLoading && !dailyRewardQuery.data?.available ? (
+    <Flex
+      h="40px"
+      alignItems="center"
+      justifyContent="center"
+      borderRadius="base"
+      color="gray.500"
+      bgColor={ timerBgColor }
+      fontSize="md"
+      fontWeight="600"
+      cursor="default"
+    >
+      Next claim in { timeLeft || 'N/A' }
+    </Flex>
+  ) : (
+    <Button onClick={ handleClaim } isLoading={ isLoading }>
+      Claim { dailyRewardValue } Merits
+    </Button>
+  );
+};
+
+export default DailyRewardClaimButton;
diff --git a/ui/rewards/dashboard/RewardsDashboardCard.tsx b/ui/rewards/dashboard/RewardsDashboardCard.tsx
new file mode 100644
index 0000000000..54a34b5eba
--- /dev/null
+++ b/ui/rewards/dashboard/RewardsDashboardCard.tsx
@@ -0,0 +1,64 @@
+import { Flex, Text, useColorModeValue, Tag } from '@chakra-ui/react';
+import React from 'react';
+
+type Props = {
+  title?: string;
+  description: string | React.ReactNode;
+  availableSoon?: boolean;
+  blurFilter?: boolean;
+  contentAfter?: React.ReactNode;
+  direction?: 'column' | 'column-reverse' | 'row';
+  reverse?: boolean;
+  children?: React.ReactNode;
+};
+
+const RewardsDashboardCard = ({
+  title, description, availableSoon, contentAfter,
+  direction = 'column', children, blurFilter,
+}: Props) => {
+  return (
+    <Flex
+      flexDirection={{ base: direction === 'row' ? 'column' : direction, md: direction }}
+      justifyContent={ direction === 'column-reverse' ? 'flex-end' : 'flex-start' }
+      p={{ base: 1.5, md: 2 }}
+      border="1px solid"
+      borderColor={ useColorModeValue('gray.200', 'whiteAlpha.200') }
+      borderRadius="lg"
+      gap={{ base: 1, md: direction === 'row' ? 10 : 1 }}
+      w={ direction === 'row' ? 'full' : 'auto' }
+      flex={ direction !== 'row' ? 1 : '0 1 auto' }
+    >
+      <Flex
+        flexDirection="column"
+        gap={ 2 }
+        p={{ base: 1.5, md: 3 }}
+        w={{ base: 'full', md: direction === 'row' ? '340px' : 'full' }}
+      >
+        { title && (
+          <Flex alignItems="center" gap={ 2 }>
+            <Text fontSize={{ base: 'md', md: 'lg' }} fontWeight="500">{ title }</Text>
+            { availableSoon && <Tag colorScheme="blue">Available soon</Tag> }
+          </Flex>
+        ) }
+        <Text as="div" fontSize="sm">
+          { description }
+        </Text>
+        { contentAfter }
+      </Flex>
+      <Flex
+        alignItems="center"
+        justifyContent="space-around"
+        borderRadius={{ base: 'lg', md: '8px' }}
+        backgroundColor={ useColorModeValue('gray.50', 'whiteAlpha.50') }
+        minH={{ base: '80px', md: '128px' }}
+        filter="auto"
+        blur={ blurFilter ? '4px' : '0' }
+        flex={ direction === 'row' ? 1 : '0 1 auto' }
+      >
+        { children }
+      </Flex>
+    </Flex>
+  );
+};
+
+export default RewardsDashboardCard;
diff --git a/ui/rewards/dashboard/RewardsDashboardCardValue.tsx b/ui/rewards/dashboard/RewardsDashboardCardValue.tsx
new file mode 100644
index 0000000000..6e46c1f6a3
--- /dev/null
+++ b/ui/rewards/dashboard/RewardsDashboardCardValue.tsx
@@ -0,0 +1,46 @@
+import { Flex, Text, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import HintPopover from 'ui/shared/HintPopover';
+
+import MeritsIcon from '../MeritsIcon';
+
+type Props = {
+  label: string;
+  value: number | string | undefined;
+  withIcon?: boolean;
+  hint?: string | React.ReactNode;
+  isLoading?: boolean;
+};
+
+const RewardsDashboardCard = ({ label, value, withIcon, hint, isLoading }: Props) => (
+  <Flex key={ label } flexDirection="column" alignItems="center" gap={ 2 }>
+    <Flex alignItems="center" gap={ 1 }>
+      { hint && (
+        <HintPopover
+          label={ hint }
+          popoverContentProps={{ maxW: { base: 'calc(100vw - 8px)', lg: '210px' } }}
+          popoverBodyProps={{ textAlign: 'center' }}
+        />
+      ) }
+      <Text fontSize="xs" fontWeight="500" variant="secondary">
+        { label }
+      </Text>
+    </Flex>
+    <Skeleton
+      isLoaded={ !isLoading }
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      gap={ 2 }
+      minW="100px"
+    >
+      { withIcon && <MeritsIcon boxSize={ 8 }/> }
+      <Text fontSize={{ base: '24px', md: '32px' }} lineHeight={{ base: '24px', md: 1.5 }} fontWeight="500">
+        { value }
+      </Text>
+    </Skeleton>
+  </Flex>
+);
+
+export default RewardsDashboardCard;
diff --git a/ui/rewards/login/RewardsLoginModal.tsx b/ui/rewards/login/RewardsLoginModal.tsx
new file mode 100644
index 0000000000..a98089abdc
--- /dev/null
+++ b/ui/rewards/login/RewardsLoginModal.tsx
@@ -0,0 +1,89 @@
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, useBoolean, useDisclosure } from '@chakra-ui/react';
+import React, { useCallback, useEffect } from 'react';
+
+import { useRewardsContext } from 'lib/contexts/rewards';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import useWallet from 'lib/web3/useWallet';
+import AuthModal from 'ui/snippets/auth/AuthModal';
+
+import CongratsStepContent from './steps/CongratsStepContent';
+import LoginStepContent from './steps/LoginStepContent';
+
+const MIXPANEL_CONFIG = {
+  account_link_info: {
+    source: 'Merits' as const,
+  },
+  wallet_connect: {
+    source: 'Merits' as const,
+  },
+};
+
+const RewardsLoginModal = () => {
+  const { isOpen: isWalletModalOpen } = useWallet({ source: 'Merits' });
+  const isMobile = useIsMobile();
+  const { isLoginModalOpen, closeLoginModal } = useRewardsContext();
+
+  const [ isLoginStep, setIsLoginStep ] = useBoolean(true);
+  const [ isReferral, setIsReferral ] = useBoolean(false);
+  const [ isAuth, setIsAuth ] = useBoolean(false);
+  const authModal = useDisclosure();
+
+  useEffect(() => {
+    if (!isLoginModalOpen) {
+      setIsLoginStep.on();
+      setIsReferral.off();
+    }
+  }, [ isLoginModalOpen, setIsLoginStep, setIsReferral ]);
+
+  const goNext = useCallback((isReferral: boolean) => {
+    if (isReferral) {
+      setIsReferral.on();
+    }
+    setIsLoginStep.off();
+  }, [ setIsLoginStep, setIsReferral ]);
+
+  const handleAuthModalOpen = useCallback((isAuth: boolean) => {
+    setIsAuth[isAuth ? 'on' : 'off']();
+    authModal.onOpen();
+  }, [ authModal, setIsAuth ]);
+
+  const handleAuthModalClose = useCallback(() => {
+    setIsAuth.off();
+    authModal.onClose();
+  }, [ authModal, setIsAuth ]);
+
+  return (
+    <>
+      <Modal
+        isOpen={ isLoginModalOpen && !isWalletModalOpen && !authModal.isOpen }
+        onClose={ closeLoginModal }
+        size={ isMobile ? 'full' : 'sm' }
+        isCentered
+      >
+        <ModalOverlay/>
+        <ModalContent width={ isLoginStep ? '400px' : '560px' } p={ 6 }>
+          <ModalHeader fontWeight="500" textStyle="h3" mb={ 3 }>
+            { isLoginStep ? 'Login' : 'Congratulations' }
+          </ModalHeader>
+          <ModalCloseButton top={ 6 } right={ 6 }/>
+          <ModalBody mb={ 0 }>
+            { isLoginStep ?
+              <LoginStepContent goNext={ goNext } openAuthModal={ handleAuthModalOpen } closeModal={ closeLoginModal }/> :
+              <CongratsStepContent isReferral={ isReferral }/>
+            }
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+      { authModal.isOpen && (
+        <AuthModal
+          onClose={ handleAuthModalClose }
+          initialScreen={{ type: 'connect_wallet', isAuth }}
+          mixpanelConfig={ MIXPANEL_CONFIG }
+          closeOnError
+        />
+      ) }
+    </>
+  );
+};
+
+export default RewardsLoginModal;
diff --git a/ui/rewards/login/steps/CongratsStepContent.tsx b/ui/rewards/login/steps/CongratsStepContent.tsx
new file mode 100644
index 0000000000..1876290c54
--- /dev/null
+++ b/ui/rewards/login/steps/CongratsStepContent.tsx
@@ -0,0 +1,132 @@
+import { Text, Box, Flex, Button, Skeleton, useColorModeValue, Tag } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import { useRewardsContext } from 'lib/contexts/rewards';
+import IconSvg from 'ui/shared/IconSvg';
+
+import MeritsIcon from '../../MeritsIcon';
+import RewardsReadOnlyInputWithCopy from '../../RewardsReadOnlyInputWithCopy';
+
+type Props = {
+  isReferral: boolean;
+};
+
+const CongratsStepContent = ({ isReferral }: Props) => {
+  const { referralsQuery, rewardsConfigQuery } = useRewardsContext();
+
+  const registrationReward = rewardsConfigQuery.data?.rewards.registration;
+  const registrationWithReferralReward = rewardsConfigQuery.data?.rewards.registration_with_referral;
+  const referralReward = Number(registrationWithReferralReward) - Number(registrationReward);
+
+  const refLink = referralsQuery.data?.link || 'N/A';
+  const shareText = `I joined the @blockscoutcom Merits Program and got my first ${ registrationReward || 'N/A' } #Merits! Use this link for a sign-up bonus and start earning rewards with @blockscoutcom block explorer.\n\n${ refLink }`; // eslint-disable-line max-len
+
+  const textColor = useColorModeValue('blue.700', 'blue.100');
+  const dividerColor = useColorModeValue('whiteAlpha.800', 'whiteAlpha.100');
+
+  return (
+    <>
+      <Flex
+        alignItems="center"
+        background={ useColorModeValue('linear-gradient(254.96deg, #9CD8FF 9.09%, #D0EFFF 88.45%)', 'linear-gradient(255deg, #1B253B 9.09%, #222C3F 88.45%)') }
+        borderRadius="md"
+        p={ 2 }
+        pl={{ base: isReferral ? 4 : 8, md: 8 }}
+        mb={ 8 }
+        h="90px"
+      >
+        <MeritsIcon boxSize={{ base: isReferral ? 8 : 12, md: 12 }} mr={{ base: isReferral ? 1 : 2, md: 2 }}/>
+        <Skeleton isLoaded={ !rewardsConfigQuery.isLoading }>
+          <Text fontSize={{ base: isReferral ? '24px' : '30px', md: '30px' }} fontWeight="700" color={ textColor }>
+            +{ rewardsConfigQuery.data?.rewards[ isReferral ? 'registration_with_referral' : 'registration' ] || 'N/A' }
+          </Text>
+        </Skeleton>
+        { isReferral && (
+          <Flex alignItems="center" h="56px">
+            <Box w="1px" h="full" bgColor={ dividerColor } mx={{ base: 3, md: 8 }}/>
+            <Flex flexDirection="column" justifyContent="space-between" gap={ 2 }>
+              { [
+                {
+                  title: 'Registration',
+                  value: registrationReward || 'N/A',
+                },
+                {
+                  title: 'Referral program',
+                  value: referralReward || 'N/A',
+                },
+              ].map(({ title, value }) => (
+                <Flex key={ title } alignItems="center" gap={{ base: 1, md: 2 }}>
+                  <MeritsIcon boxSize={{ base: 5, md: 6 }}/>
+                  <Skeleton isLoaded={ !rewardsConfigQuery.isLoading }>
+                    <Text fontSize="sm" fontWeight="700" color={ textColor }>
+                      +{ value }
+                    </Text>
+                  </Skeleton>
+                  <Text fontSize="sm" color={ textColor }>
+                    { title }
+                  </Text>
+                </Flex>
+              )) }
+            </Flex>
+          </Flex>
+        ) }
+      </Flex>
+      <Flex flexDirection="column" alignItems="flex-start" px={ 3 } mb={ 8 }>
+        <Flex alignItems="center" gap={ 2 }>
+          <Tag colorScheme="blue" w={ 8 } h={ 8 } display="flex" alignItems="center" justifyContent="center" borderRadius="8px">
+            <IconSvg name="profile" boxSize={ 5 }/>
+          </Tag>
+          <Text fontSize="lg" fontWeight="500">
+            Referral program
+          </Text>
+        </Flex>
+        <Text fontSize="md" mt={ 2 }>
+          Receive a{ ' ' }
+          <Skeleton as="span" isLoaded={ !rewardsConfigQuery.isLoading }>
+            { rewardsConfigQuery.data?.rewards.referral_share ?
+              `${ Number(rewardsConfigQuery.data?.rewards.referral_share) * 100 }%` :
+              'N/A'
+            }
+          </Skeleton>
+          { ' ' }bonus on all Merits earned by your referrals
+        </Text>
+        <RewardsReadOnlyInputWithCopy
+          label="Referral link"
+          value={ refLink }
+          isLoading={ referralsQuery.isLoading }
+          mt={ 3 }
+        />
+        <Button
+          as="a"
+          target="_blank"
+          mt={ 6 }
+          isLoading={ referralsQuery.isLoading }
+          href={ `https://x.com/intent/tweet?text=${ encodeURIComponent(shareText) }` }
+        >
+          Share on <IconSvg name="social/twitter" boxSize={ 6 } ml={ 1 }/>
+        </Button>
+      </Flex>
+      <Flex flexDirection="column" alignItems="flex-start" px={ 3 }>
+        <Flex alignItems="center" gap={ 2 }>
+          <Tag colorScheme="blue" w={ 8 } h={ 8 } display="flex" alignItems="center" justifyContent="center" borderRadius="8px">
+            <IconSvg name="stats" boxSize={ 6 }/>
+          </Tag>
+          <Text fontSize="lg" fontWeight="500">
+            Dashboard
+          </Text>
+        </Flex>
+        <Text fontSize="md" mt={ 2 }>
+          Explore your current Merits balance, find activities to boost your Merits,
+          and view your capybara NFT badge collection on the dashboard
+        </Text>
+        <Button mt={ 3 } as="a" href={ route({ pathname: '/account/rewards' }) }>
+          Open
+        </Button>
+      </Flex>
+    </>
+  );
+};
+
+export default CongratsStepContent;
diff --git a/ui/rewards/login/steps/LoginStepContent.tsx b/ui/rewards/login/steps/LoginStepContent.tsx
new file mode 100644
index 0000000000..3b13dd57c4
--- /dev/null
+++ b/ui/rewards/login/steps/LoginStepContent.tsx
@@ -0,0 +1,164 @@
+import { Text, Button, useColorModeValue, Image, Box, Flex, Switch, useBoolean, Input, FormControl, Alert, Skeleton, Divider } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import type { ChangeEvent } from 'react';
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+
+import { useRewardsContext } from 'lib/contexts/rewards';
+import * as cookies from 'lib/cookies';
+import { apos } from 'lib/html-entities';
+import useWallet from 'lib/web3/useWallet';
+import FormInputPlaceholder from 'ui/shared/forms/inputs/FormInputPlaceholder';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import useProfileQuery from 'ui/snippets/auth/useProfileQuery';
+
+type Props = {
+  goNext: (isReferral: boolean) => void;
+  closeModal: () => void;
+  openAuthModal: (isAuth: boolean) => void;
+};
+
+const LoginStepContent = ({ goNext, closeModal, openAuthModal }: Props) => {
+  const router = useRouter();
+  const { connect, isConnected, address } = useWallet({ source: 'Merits' });
+  const savedRefCode = cookies.get(cookies.NAMES.REWARDS_REFERRAL_CODE);
+  const [ isRefCodeUsed, setIsRefCodeUsed ] = useBoolean(Boolean(savedRefCode));
+  const [ isLoading, setIsLoading ] = useBoolean(false);
+  const [ refCode, setRefCode ] = useState(savedRefCode || '');
+  const [ refCodeError, setRefCodeError ] = useBoolean(false);
+  const { login, checkUserQuery } = useRewardsContext();
+  const profileQuery = useProfileQuery();
+
+  const isAddressMismatch = useMemo(() =>
+    Boolean(address) &&
+    Boolean(profileQuery.data?.address_hash) &&
+    profileQuery.data?.address_hash !== address,
+  [ address, profileQuery.data ]);
+
+  const isLoggedIntoAccountWithWallet = useMemo(() =>
+    !profileQuery.isLoading && profileQuery.data?.address_hash,
+  [ profileQuery ]);
+
+  const isSignUp = useMemo(() =>
+    isConnected && !isAddressMismatch && !checkUserQuery.isFetching && !checkUserQuery.data?.exists,
+  [ isConnected, isAddressMismatch, checkUserQuery ]);
+
+  const handleRefCodeChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setRefCode(event.target.value);
+  }, []);
+
+  const loginToRewardsProgram = useCallback(async() => {
+    try {
+      setRefCodeError.off();
+      setIsLoading.on();
+      const { isNewUser, invalidRefCodeError } = await login(isSignUp && isRefCodeUsed ? refCode : '');
+      if (invalidRefCodeError) {
+        setRefCodeError.on();
+      } else {
+        if (isNewUser) {
+          goNext(Boolean(refCode));
+        } else {
+          closeModal();
+          router.push({ pathname: '/account/rewards' }, undefined, { shallow: true });
+        }
+      }
+    } catch (error) {}
+    setIsLoading.off();
+  }, [ login, goNext, setIsLoading, router, closeModal, refCode, setRefCodeError, isRefCodeUsed, isSignUp ]);
+
+  useEffect(() => {
+    if (isSignUp && isRefCodeUsed && refCode.length > 0 && refCode.length !== 6) {
+      setRefCodeError.on();
+    } else {
+      setRefCodeError.off();
+    }
+  }, [ refCode, isRefCodeUsed, isSignUp ]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleLogin = useCallback(async() => {
+    if (isLoggedIntoAccountWithWallet) {
+      loginToRewardsProgram();
+    } else {
+      openAuthModal(Boolean(profileQuery.data?.email));
+    }
+  }, [ loginToRewardsProgram, openAuthModal, isLoggedIntoAccountWithWallet, profileQuery ]);
+
+  const buttonText = useMemo(() => {
+    if (!isConnected) {
+      return 'Connect wallet';
+    }
+    if (isLoggedIntoAccountWithWallet) {
+      return isSignUp ? 'Get started' : 'Continue';
+    }
+    return profileQuery.data?.email ? 'Add wallet to account' : 'Log in to account';
+  }, [ isConnected, isLoggedIntoAccountWithWallet, profileQuery.data, isSignUp ]);
+
+  return (
+    <>
+      <Image
+        src="/static/merits_program.png"
+        alt="Merits program"
+        mb={ 3 }
+        fallback={ <Skeleton w="full" h="120px" mb={ 3 }/> }
+      />
+      <Box mb={ 6 }>
+        Merits are awarded for a variety of different Blockscout activities. Connect a wallet to get started.
+        <LinkExternal href="https://docs.blockscout.com/using-blockscout/merits" ml={ 1 } fontWeight="500">
+          More about Blockscout Merits
+        </LinkExternal>
+      </Box>
+      { isSignUp && isLoggedIntoAccountWithWallet && (
+        <Box mb={ 6 }>
+          <Divider bgColor="divider" mb={ 6 }/>
+          <Flex w="full" alignItems="center" justifyContent="space-between">
+            I have a referral code
+            <Switch
+              colorScheme="blue"
+              size="md"
+              isChecked={ isRefCodeUsed }
+              onChange={ setIsRefCodeUsed.toggle }
+              aria-label="Referral code switch"
+            />
+          </Flex>
+          { isRefCodeUsed && (
+            <>
+              <FormControl variant="floating" id="referral-code" mt={ 3 }>
+                <Input
+                  fontWeight="500"
+                  value={ refCode }
+                  onChange={ handleRefCodeChange }
+                  isInvalid={ refCodeError }
+                />
+                <FormInputPlaceholder text="Code"/>
+              </FormControl>
+              <Text fontSize="sm" variant="secondary" mt={ 1 } color={ refCodeError ? 'red.500' : undefined }>
+                { refCodeError ? 'Incorrect code or format' : 'The code should be in format XXXXXX' }
+              </Text>
+            </>
+          ) }
+        </Box>
+      ) }
+      { isAddressMismatch && (
+        <Alert status="warning" mb={ 4 }>
+          Your wallet address doesn{ apos }t match the one in your Blockscout account. Please connect the correct wallet.
+        </Alert>
+      ) }
+      <Button
+        variant="solid"
+        colorScheme="blue"
+        w="full"
+        whiteSpace="normal"
+        mb={ 4 }
+        onClick={ isConnected ? handleLogin : connect }
+        isLoading={ isLoading || profileQuery.isLoading || checkUserQuery.isFetching }
+        loadingText={ isLoading ? 'Sign message in your wallet' : undefined }
+        isDisabled={ isAddressMismatch || refCodeError }
+      >
+        { buttonText }
+      </Button>
+      <Text fontSize="sm" color={ useColorModeValue('blackAlpha.500', 'whiteAlpha.500') } textAlign="center">
+        Already registered for Blockscout Merits on another network or chain? Connect the same wallet here.
+      </Text>
+    </>
+  );
+};
+
+export default LoginStepContent;
diff --git a/ui/searchResults/SearchResultListItem.tsx b/ui/searchResults/SearchResultListItem.tsx
index 743d378853..9ed5a28ec9 100644
--- a/ui/searchResults/SearchResultListItem.tsx
+++ b/ui/searchResults/SearchResultListItem.tsx
@@ -2,24 +2,29 @@ import { chakra, Flex, Grid, Image, Box, Text, Skeleton, useColorMode, Tag } fro
 import React from 'react';
 import xss from 'xss';
 
-import type { SearchResultItem } from 'types/api/search';
+import type { SearchResultItem } from 'types/client/search';
+import type { AddressFormat } from 'types/views/address';
 
 import { route } from 'nextjs-routes';
 
+import { toBech32Address } from 'lib/address/bech32';
 import dayjs from 'lib/date/dayjs';
 import highlightText from 'lib/highlightText';
 import * as mixpanel from 'lib/mixpanel/index';
 import { saveToRecentKeywords } from 'lib/recentSearchKeywords';
-import { ADDRESS_REGEXP } from 'lib/validations/address';
+import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import * as BlobEntity from 'ui/shared/entities/blob/BlobEntity';
 import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import * as EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import * as TxEntity from 'ui/shared/entities/tx/TxEntity';
 import * as UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
+import { ADDRESS_REGEXP } from 'ui/shared/forms/validators/address';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkExternal from 'ui/shared/LinkExternal';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import type { SearchResultAppItem } from 'ui/shared/search/utils';
 import { getItemCategory, searchItemTitles } from 'ui/shared/search/utils';
@@ -28,9 +33,10 @@ interface Props {
   data: SearchResultItem | SearchResultAppItem;
   searchTerm: string;
   isLoading?: boolean;
+  addressFormat?: AddressFormat;
 }
 
-const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
+const SearchResultListItem = ({ data, searchTerm, isLoading, addressFormat }: Props) => {
 
   const handleLinkClick = React.useCallback((e: React.MouseEvent<HTMLAnchorElement>) => {
     saveToRecentKeywords(searchTerm);
@@ -67,7 +73,8 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
                 textOverflow="ellipsis"
               />
             </LinkInternal>
-            { data.is_verified_via_admin_panel && <IconSvg name="verified_token" boxSize={ 4 } ml={ 1 } color="green.500"/> }
+            { data.certified && <ContractCertifiedLabel iconSize={ 4 } boxSize={ 4 } ml={ 1 }/> }
+            { data.is_verified_via_admin_panel && !data.certified && <IconSvg name="certified" boxSize={ 4 } ml={ 1 } color="green.500"/> }
           </Flex>
         );
       }
@@ -75,12 +82,17 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
       case 'contract':
       case 'address': {
         const shouldHighlightHash = ADDRESS_REGEXP.test(searchTerm);
+        const hash = addressFormat === 'bech32' ? toBech32Address(data.address) : data.address;
+
         const address = {
           hash: data.address,
+          filecoin: {
+            robust: data.filecoin_robust_address,
+          },
           is_contract: data.type === 'contract',
           is_verified: data.is_smart_contract_verified,
           name: null,
-          implementation_name: null,
+          implementations: null,
           ens_domain_name: null,
         };
 
@@ -93,13 +105,13 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
             >
               <AddressEntity.Content
                 asProp={ shouldHighlightHash ? 'mark' : 'span' }
-                address={ address }
+                address={{ ...address, hash }}
                 fontSize="sm"
                 lineHeight={ 5 }
                 fontWeight={ 700 }
               />
             </AddressEntity.Link>
-            <AddressEntity.Copy address={ address }/>
+            <AddressEntity.Copy address={{ ...address, hash }}/>
           </AddressEntity.Container>
         );
       }
@@ -159,23 +171,29 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
 
       case 'block': {
         const shouldHighlightHash = data.block_hash.toLowerCase() === searchTerm.toLowerCase();
+        const isFutureBlock = data.timestamp === undefined;
+        const href = isFutureBlock ?
+          route({ pathname: '/block/countdown/[height]', query: { height: String(data.block_number) } }) :
+          route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: data.block_hash ?? String(data.block_number) } });
+
         return (
           <BlockEntity.Container>
-            <BlockEntity.Icon/>
+            <BlockEntity.Icon isLoading={ isLoading }/>
             <BlockEntity.Link
-              hash={ data.block_hash }
-              number={ Number(data.block_number) }
+              href={ href }
               onClick={ handleLinkClick }
+              isLoading={ isLoading }
             >
               <BlockEntity.Content
                 asProp={ shouldHighlightHash ? 'span' : 'mark' }
                 number={ Number(data.block_number) }
                 fontSize="sm"
                 fontWeight={ 700 }
+                isLoading={ isLoading }
               />
             </BlockEntity.Link>
-            { data.block_type === 'reorg' && <Tag ml={ 2 }>Reorg</Tag> }
-            { data.block_type === 'uncle' && <Tag ml={ 2 }>Uncle</Tag> }
+            { data.block_type === 'reorg' && !isLoading && <Tag ml={ 2 }>Reorg</Tag> }
+            { data.block_type === 'uncle' && !isLoading && <Tag ml={ 2 }>Uncle</Tag> }
           </BlockEntity.Container>
         );
       }
@@ -186,12 +204,12 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
             <TxEntity.Icon/>
             <TxEntity.Link
               isLoading={ isLoading }
-              hash={ data.tx_hash }
+              hash={ data.transaction_hash }
               onClick={ handleLinkClick }
             >
               <TxEntity.Content
                 asProp="mark"
-                hash={ data.tx_hash }
+                hash={ data.transaction_hash }
                 fontSize="sm"
                 lineHeight={ 5 }
                 fontWeight={ 700 }
@@ -200,6 +218,28 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
           </TxEntity.Container>
         );
       }
+
+      case 'blob': {
+        return (
+          <BlobEntity.Container>
+            <BlobEntity.Icon/>
+            <BlobEntity.Link
+              isLoading={ isLoading }
+              hash={ data.blob_hash }
+              onClick={ handleLinkClick }
+            >
+              <BlobEntity.Content
+                asProp="mark"
+                hash={ data.blob_hash }
+                fontSize="sm"
+                lineHeight={ 5 }
+                fontWeight={ 700 }
+              />
+            </BlobEntity.Link>
+          </BlobEntity.Container>
+        );
+      }
+
       case 'user_operation': {
         return (
           <UserOpEntity.Container>
@@ -220,6 +260,30 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
           </UserOpEntity.Container>
         );
       }
+
+      case 'ens_domain': {
+        return (
+          <EnsEntity.Container>
+            <EnsEntity.Icon/>
+            <LinkInternal
+              href={ route({ pathname: '/address/[hash]', query: { hash: data.address } }) }
+              fontWeight={ 700 }
+              wordBreak="break-all"
+              isLoading={ isLoading }
+              onClick={ handleLinkClick }
+              overflow="hidden"
+            >
+              <Skeleton
+                isLoaded={ !isLoading }
+                dangerouslySetInnerHTML={{ __html: highlightText(data.ens_info.name, searchTerm) }}
+                whiteSpace="nowrap"
+                overflow="hidden"
+                textOverflow="ellipsis"
+              />
+            </LinkInternal>
+          </EnsEntity.Container>
+        );
+      }
     }
   })();
 
@@ -228,12 +292,13 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
       case 'token': {
         const templateCols = `1fr
         ${ (data.token_type === 'ERC-20' && data.exchange_rate) || (data.token_type !== 'ERC-20' && data.total_supply) ? ' auto' : '' }`;
+        const hash = data.filecoin_robust_address || (addressFormat === 'bech32' ? toBech32Address(data.address) : data.address);
 
         return (
           <Grid templateColumns={ templateCols } alignItems="center" gap={ 2 }>
             <Skeleton isLoaded={ !isLoading } overflow="hidden" display="flex" alignItems="center">
               <Text whiteSpace="nowrap" overflow="hidden">
-                <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
+                <HashStringShortenDynamic hash={ hash } isTooltipDisabled/>
               </Text>
               { data.is_smart_contract_verified && <IconSvg name="status/success" boxSize="14px" color="green.500" ml={ 1 } flexShrink={ 0 }/> }
             </Skeleton>
@@ -246,12 +311,20 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
       }
       case 'block': {
         const shouldHighlightHash = data.block_hash.toLowerCase() === searchTerm.toLowerCase();
+        const isFutureBlock = data.timestamp === undefined;
+
+        if (isFutureBlock) {
+          return <Skeleton isLoaded={ !isLoading }>Learn estimated time for this block to be created.</Skeleton>;
+        }
+
         return (
           <>
-            <Box as={ shouldHighlightHash ? 'mark' : 'span' } display="block" whiteSpace="nowrap" overflow="hidden" mb={ 1 }>
+            <Skeleton isLoaded={ !isLoading } as={ shouldHighlightHash ? 'mark' : 'span' } display="block" whiteSpace="nowrap" overflow="hidden" mb={ 1 }>
               <HashStringShortenDynamic hash={ data.block_hash }/>
-            </Box>
-            <Text variant="secondary" mr={ 2 }>{ dayjs(data.timestamp).format('llll') }</Text>
+            </Skeleton>
+            <Skeleton isLoaded={ !isLoading } color="text_secondary" mr={ 2 }>
+              <span>{ dayjs(data.timestamp).format('llll') }</span>
+            </Skeleton>
           </>
         );
       }
@@ -267,10 +340,12 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
         );
       }
       case 'label': {
+        const hash = data.filecoin_robust_address || (addressFormat === 'bech32' ? toBech32Address(data.address) : data.address);
+
         return (
           <Flex alignItems="center">
             <Box overflow="hidden">
-              <HashStringShortenDynamic hash={ data.address }/>
+              <HashStringShortenDynamic hash={ hash }/>
             </Box>
             { data.is_smart_contract_verified && <IconSvg name="status/success" boxSize="14px" color="green.500" ml={ 1 } flexShrink={ 0 }/> }
           </Flex>
@@ -281,10 +356,10 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
           <Text
             overflow="hidden"
             textOverflow="ellipsis"
-            sx={{
+            style={{
+              WebkitLineClamp: 3,
+              WebkitBoxOrient: 'vertical',
               display: '-webkit-box',
-              '-webkit-box-orient': 'vertical',
-              '-webkit-line-clamp': '3',
             }}
           >
             { data.app.description }
@@ -298,19 +373,41 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
         const expiresText = data.ens_info?.expiry_date ? ` (expires ${ dayjs(data.ens_info.expiry_date).fromNow() })` : '';
 
         return addressName ? (
-          <>
-            <span dangerouslySetInnerHTML={{ __html: shouldHighlightHash ? xss(addressName) : highlightText(addressName, searchTerm) }}/>
-            { data.ens_info &&
-              (
+          <Flex alignItems="center">
+            <Text
+              overflow="hidden"
+              whiteSpace="nowrap"
+              textOverflow="ellipsis"
+            >
+              <span dangerouslySetInnerHTML={{ __html: shouldHighlightHash ? xss(addressName) : highlightText(addressName, searchTerm) }}/>
+              { data.ens_info && (
                 data.ens_info.names_count > 1 ?
                   <chakra.span color="text_secondary"> ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` })</chakra.span> :
                   <chakra.span color="text_secondary">{ expiresText }</chakra.span>
-              )
-            }
-          </>
+              ) }
+            </Text>
+            { data.certified && <ContractCertifiedLabel iconSize={ 4 } boxSize={ 4 } ml={ 1 }/> }
+          </Flex>
         ) :
           null;
       }
+      case 'ens_domain': {
+        const expiresText = data.ens_info?.expiry_date ? ` expires ${ dayjs(data.ens_info.expiry_date).fromNow() }` : '';
+        const hash = data.filecoin_robust_address || (addressFormat === 'bech32' ? toBech32Address(data.address) : data.address);
+
+        return (
+          <Flex alignItems="center" gap={ 3 }>
+            <Box overflow="hidden">
+              <HashStringShortenDynamic hash={ hash }/>
+            </Box>
+            {
+              data.ens_info.names_count > 1 ?
+                <chakra.span color="text_secondary"> ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` })</chakra.span> :
+                <chakra.span color="text_secondary">{ expiresText }</chakra.span>
+            }
+          </Flex>
+        );
+      }
 
       default:
         return null;
diff --git a/ui/searchResults/SearchResultTableItem.tsx b/ui/searchResults/SearchResultTableItem.tsx
index 6e3ea5140c..1d195b861e 100644
--- a/ui/searchResults/SearchResultTableItem.tsx
+++ b/ui/searchResults/SearchResultTableItem.tsx
@@ -2,33 +2,40 @@ import { chakra, Tr, Td, Text, Flex, Image, Box, Skeleton, useColorMode, Tag } f
 import React from 'react';
 import xss from 'xss';
 
-import type { SearchResultItem } from 'types/api/search';
+import type { SearchResultItem } from 'types/client/search';
+import type { AddressFormat } from 'types/views/address';
 
 import { route } from 'nextjs-routes';
 
+import { toBech32Address } from 'lib/address/bech32';
 import dayjs from 'lib/date/dayjs';
 import highlightText from 'lib/highlightText';
 import * as mixpanel from 'lib/mixpanel/index';
 import { saveToRecentKeywords } from 'lib/recentSearchKeywords';
-import { ADDRESS_REGEXP } from 'lib/validations/address';
+import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import * as BlobEntity from 'ui/shared/entities/blob/BlobEntity';
 import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import * as EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import * as TxEntity from 'ui/shared/entities/tx/TxEntity';
 import * as UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
+import { ADDRESS_REGEXP } from 'ui/shared/forms/validators/address';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkExternal from 'ui/shared/LinkExternal';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import type { SearchResultAppItem } from 'ui/shared/search/utils';
 import { getItemCategory, searchItemTitles } from 'ui/shared/search/utils';
+
 interface Props {
   data: SearchResultItem | SearchResultAppItem;
   searchTerm: string;
   isLoading?: boolean;
+  addressFormat?: AddressFormat;
 }
 
-const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
+const SearchResultTableItem = ({ data, searchTerm, isLoading, addressFormat }: Props) => {
 
   const handleLinkClick = React.useCallback((e: React.MouseEvent<HTMLAnchorElement>) => {
     saveToRecentKeywords(searchTerm);
@@ -45,6 +52,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
     switch (data.type) {
       case 'token': {
         const name = data.name + (data.symbol ? ` (${ data.symbol })` : '');
+        const hash = data.filecoin_robust_address || (addressFormat === 'bech32' ? toBech32Address(data.address) : data.address);
 
         return (
           <>
@@ -67,13 +75,14 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
                     dangerouslySetInnerHTML={{ __html: highlightText(name, searchTerm) }}
                   />
                 </LinkInternal>
-                { data.is_verified_via_admin_panel && <IconSvg name="verified_token" boxSize={ 4 } ml={ 1 } color="green.500"/> }
+                { data.certified && <ContractCertifiedLabel iconSize={ 4 } boxSize={ 4 } ml={ 1 }/> }
+                { data.is_verified_via_admin_panel && !data.certified && <IconSvg name="certified" boxSize={ 4 } ml={ 1 } color="green.500"/> }
               </Flex>
             </Td>
             <Td fontSize="sm" verticalAlign="middle">
               <Skeleton isLoaded={ !isLoading } whiteSpace="nowrap" overflow="hidden" display="flex" alignItems="center">
                 <Box overflow="hidden" whiteSpace="nowrap" w={ data.is_smart_contract_verified ? 'calc(100%-28px)' : 'unset' }>
-                  <HashStringShortenDynamic hash={ data.address }/>
+                  <HashStringShortenDynamic hash={ hash }/>
                 </Box>
                 { data.is_smart_contract_verified && <IconSvg name="status/success" boxSize="14px" color="green.500" ml={ 1 } flexShrink={ 0 }/> }
               </Skeleton>
@@ -96,13 +105,17 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
         const addressName = data.name || data.ens_info?.name;
         const address = {
           hash: data.address,
+          filecoin: {
+            robust: data.filecoin_robust_address,
+          },
           is_contract: data.type === 'contract',
           is_verified: data.is_smart_contract_verified,
           name: null,
-          implementation_name: null,
+          implementations: null,
           ens_domain_name: null,
         };
         const expiresText = data.ens_info?.expiry_date ? ` (expires ${ dayjs(data.ens_info.expiry_date).fromNow() })` : '';
+        const hash = addressFormat === 'bech32' ? toBech32Address(data.address) : data.address;
 
         return (
           <>
@@ -115,25 +128,35 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
                 >
                   <AddressEntity.Content
                     asProp={ shouldHighlightHash ? 'mark' : 'span' }
-                    address={ address }
+                    address={{ ...address, hash }}
                     fontSize="sm"
                     lineHeight={ 5 }
                     fontWeight={ 700 }
                   />
                 </AddressEntity.Link>
-                <AddressEntity.Copy address={ address }/>
+                <AddressEntity.Copy address={{ ...address, hash }}/>
               </AddressEntity.Container>
             </Td>
             { addressName && (
               <Td colSpan={ 2 } fontSize="sm" verticalAlign="middle">
-                <span dangerouslySetInnerHTML={{ __html: shouldHighlightHash ? xss(addressName) : highlightText(addressName, searchTerm) }}/>
-                { data.ens_info &&
-                  (
-                    data.ens_info.names_count > 1 ?
-                      <chakra.span color="text_secondary"> ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` })</chakra.span> :
-                      <chakra.span color="text_secondary">{ expiresText }</chakra.span>
-                  )
-                }
+                <Flex alignItems="center">
+                  <Text
+                    overflow="hidden"
+                    whiteSpace="nowrap"
+                    textOverflow="ellipsis"
+                  >
+                    <span dangerouslySetInnerHTML={{ __html: shouldHighlightHash ? xss(addressName) : highlightText(addressName, searchTerm) }}/>
+                    { data.ens_info && (
+                      data.ens_info.names_count > 1 ? (
+                        <chakra.span color="text_secondary">
+                          { data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` }
+                        </chakra.span>
+                      ) :
+                        <chakra.span color="text_secondary">{ expiresText }</chakra.span>
+                    ) }
+                  </Text>
+                  { data.certified && <ContractCertifiedLabel iconSize={ 4 } boxSize={ 4 } mx={ 1 }/> }
+                </Flex>
               </Td>
             ) }
           </>
@@ -141,6 +164,8 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
       }
 
       case 'label': {
+        const hash = data.filecoin_robust_address || (addressFormat === 'bech32' ? toBech32Address(data.address) : data.address);
+
         return (
           <>
             <Td fontSize="sm">
@@ -160,7 +185,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
             <Td fontSize="sm" verticalAlign="middle">
               <Flex alignItems="center" overflow="hidden">
                 <Box overflow="hidden" whiteSpace="nowrap" w={ data.is_smart_contract_verified ? 'calc(100%-28px)' : 'unset' }>
-                  <HashStringShortenDynamic hash={ data.address }/>
+                  <HashStringShortenDynamic hash={ hash }/>
                 </Box>
                 { data.is_smart_contract_verified && <IconSvg name="status/success" boxSize="14px" color="green.500" ml={ 1 } flexShrink={ 0 }/> }
               </Flex>
@@ -221,16 +246,20 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
 
       case 'block': {
         const shouldHighlightHash = data.block_hash.toLowerCase() === searchTerm.toLowerCase();
+        const isFutureBlock = data.timestamp === undefined && !isLoading;
+        const href = isFutureBlock ?
+          route({ pathname: '/block/countdown/[height]', query: { height: String(data.block_number) } }) :
+          route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: data.block_hash ?? String(data.block_number) } });
 
         return (
           <>
             <Td fontSize="sm">
               <BlockEntity.Container>
-                <BlockEntity.Icon/>
+                <BlockEntity.Icon isLoading={ isLoading }/>
                 <BlockEntity.Link
-                  hash={ data.block_hash }
-                  number={ Number(data.block_number) }
+                  href={ href }
                   onClick={ handleLinkClick }
+                  isLoading={ isLoading }
                 >
                   <BlockEntity.Content
                     asProp={ shouldHighlightHash ? 'span' : 'mark' }
@@ -238,22 +267,31 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
                     fontSize="sm"
                     lineHeight={ 5 }
                     fontWeight={ 700 }
+                    isLoading={ isLoading }
                   />
                 </BlockEntity.Link>
               </BlockEntity.Container>
             </Td>
-            <Td fontSize="sm" verticalAlign="middle">
-              <Flex columnGap={ 2 } alignItems="center">
-                { data.block_type === 'reorg' && <Tag flexShrink={ 0 }>Reorg</Tag> }
-                { data.block_type === 'uncle' && <Tag flexShrink={ 0 }>Uncle</Tag> }
-                <Box overflow="hidden" whiteSpace="nowrap" as={ shouldHighlightHash ? 'mark' : 'span' } display="block">
-                  <HashStringShortenDynamic hash={ data.block_hash }/>
-                </Box>
-              </Flex>
-            </Td>
-            <Td fontSize="sm" verticalAlign="middle" isNumeric>
-              <Text variant="secondary">{ dayjs(data.timestamp).format('llll') }</Text>
+            <Td fontSize="sm" verticalAlign="middle" colSpan={ isFutureBlock ? 2 : 1 }>
+              { isFutureBlock ? (
+                <Skeleton isLoaded={ !isLoading }>Learn estimated time for this block to be created.</Skeleton>
+              ) : (
+                <Flex columnGap={ 2 } alignItems="center">
+                  { data.block_type === 'reorg' && !isLoading && <Tag flexShrink={ 0 }>Reorg</Tag> }
+                  { data.block_type === 'uncle' && !isLoading && <Tag flexShrink={ 0 }>Uncle</Tag> }
+                  <Skeleton isLoaded={ !isLoading } overflow="hidden" whiteSpace="nowrap" as={ shouldHighlightHash ? 'mark' : 'span' } display="block">
+                    <HashStringShortenDynamic hash={ data.block_hash }/>
+                  </Skeleton>
+                </Flex>
+              ) }
             </Td>
+            { !isFutureBlock && (
+              <Td fontSize="sm" verticalAlign="middle" isNumeric>
+                <Skeleton isLoaded={ !isLoading } color="text_secondary">
+                  <span>{ dayjs(data.timestamp).format('llll') }</span>
+                </Skeleton>
+              </Td>
+            ) }
           </>
         );
       }
@@ -266,12 +304,12 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
                 <TxEntity.Icon/>
                 <TxEntity.Link
                   isLoading={ isLoading }
-                  hash={ data.tx_hash }
+                  hash={ data.transaction_hash }
                   onClick={ handleLinkClick }
                 >
                   <TxEntity.Content
                     asProp="mark"
-                    hash={ data.tx_hash }
+                    hash={ data.transaction_hash }
                     fontSize="sm"
                     lineHeight={ 5 }
                     fontWeight={ 700 }
@@ -285,6 +323,30 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
           </>
         );
       }
+
+      case 'blob': {
+        return (
+          <Td colSpan={ 3 } fontSize="sm">
+            <BlobEntity.Container>
+              <BlobEntity.Icon/>
+              <BlobEntity.Link
+                isLoading={ isLoading }
+                hash={ data.blob_hash }
+                onClick={ handleLinkClick }
+              >
+                <BlobEntity.Content
+                  asProp="mark"
+                  hash={ data.blob_hash }
+                  fontSize="sm"
+                  lineHeight={ 5 }
+                  fontWeight={ 700 }
+                />
+              </BlobEntity.Link>
+            </BlobEntity.Container>
+          </Td>
+        );
+      }
+
       case 'user_operation': {
         return (
           <>
@@ -312,6 +374,50 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
           </>
         );
       }
+
+      case 'ens_domain': {
+        const expiresText = data.ens_info?.expiry_date ? ` expires ${ dayjs(data.ens_info.expiry_date).fromNow() }` : '';
+        const hash = data.filecoin_robust_address || (addressFormat === 'bech32' ? toBech32Address(data.address) : data.address);
+
+        return (
+          <>
+            <Td fontSize="sm">
+              <EnsEntity.Container>
+                <EnsEntity.Icon/>
+                <LinkInternal
+                  href={ route({ pathname: '/address/[hash]', query: { hash: data.address } }) }
+                  fontWeight={ 700 }
+                  wordBreak="break-all"
+                  isLoading={ isLoading }
+                  onClick={ handleLinkClick }
+                  overflow="hidden"
+                >
+                  <Skeleton
+                    isLoaded={ !isLoading }
+                    dangerouslySetInnerHTML={{ __html: highlightText(data.ens_info.name, searchTerm) }}
+                    whiteSpace="nowrap"
+                    overflow="hidden"
+                    textOverflow="ellipsis"
+                  />
+                </LinkInternal>
+              </EnsEntity.Container>
+            </Td>
+            <Td>
+              <Flex alignItems="center" overflow="hidden">
+                <Box overflow="hidden" whiteSpace="nowrap" w={ data.is_smart_contract_verified ? 'calc(100%-28px)' : 'unset' }>
+                  <HashStringShortenDynamic hash={ hash }/>
+                </Box>
+                { data.is_smart_contract_verified && <IconSvg name="status/success" boxSize="14px" color="green.500" ml={ 1 } flexShrink={ 0 }/> }
+              </Flex>
+            </Td>
+            <Td>
+              { data.ens_info.names_count > 1 ?
+                <chakra.span color="text_secondary"> ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` })</chakra.span> :
+                <chakra.span color="text_secondary">{ expiresText }</chakra.span> }
+            </Td>
+          </>
+        );
+      }
     }
   })();
 
diff --git a/ui/searchResults/SearchResultsInput.tsx b/ui/searchResults/SearchResultsInput.tsx
index a50b82b4e4..10cc920adb 100644
--- a/ui/searchResults/SearchResultsInput.tsx
+++ b/ui/searchResults/SearchResultsInput.tsx
@@ -1,10 +1,12 @@
-import { Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
+import { PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
 import _debounce from 'lodash/debounce';
 import type { FormEvent, FocusEvent } from 'react';
 import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { getRecentSearchKeywords } from 'lib/recentSearchKeywords';
+import Popover from 'ui/shared/chakra/Popover';
+import SearchBarBackdrop from 'ui/snippets/searchBar/SearchBarBackdrop';
 import SearchBarInput from 'ui/snippets/searchBar/SearchBarInput';
 import SearchBarRecentKeywords from 'ui/snippets/searchBar/SearchBarRecentKeywords';
 
@@ -12,7 +14,7 @@ type Props = {
   searchTerm: string;
   handleSubmit: (event: FormEvent<HTMLFormElement>) => void;
   handleSearchTermChange: (value: string) => void;
-}
+};
 
 const SearchResultsInput = ({ searchTerm, handleSubmit, handleSearchTermChange }: Props) => {
   const { isOpen, onClose, onOpen } = useDisclosure();
@@ -66,33 +68,39 @@ const SearchResultsInput = ({ searchTerm, handleSubmit, handleSearchTermChange }
     };
   }, [ calculateMenuWidth ]);
 
+  const isSuggestOpen = isOpen && recentSearchKeywords.length > 0 && searchTerm.trim().length === 0;
+
   return (
-    <Popover
-      isOpen={ isOpen && recentSearchKeywords.length > 0 && searchTerm.trim().length === 0 }
-      autoFocus={ false }
-      onClose={ onClose }
-      placement="bottom-start"
-      offset={ isMobile ? [ 16, -12 ] : undefined }
-      isLazy
-    >
-      <PopoverTrigger>
-        <SearchBarInput
-          ref={ inputRef }
-          onChange={ handleSearchTermChange }
-          onSubmit={ handleSubmit }
-          onFocus={ handleFocus }
-          onBlur={ handleBlur }
-          onHide={ handelHide }
-          onClear={ handleClear }
-          value={ searchTerm }
-        />
-      </PopoverTrigger>
-      <PopoverContent w={ `${ menuWidth.current }px` } maxH={{ base: '300px', lg: '500px' }} overflowY="scroll" ref={ menuRef }>
-        <PopoverBody py={ 6 }>
-          <SearchBarRecentKeywords onClick={ handleSearchTermChange } onClear={ onClose }/>
-        </PopoverBody>
-      </PopoverContent>
-    </Popover>
+    <>
+      <Popover
+        isOpen={ isSuggestOpen }
+        autoFocus={ false }
+        onClose={ onClose }
+        placement="bottom-start"
+        offset={ isMobile ? [ 16, -12 ] : [ 0, 8 ] }
+        isLazy
+      >
+        <PopoverTrigger>
+          <SearchBarInput
+            ref={ inputRef }
+            onChange={ handleSearchTermChange }
+            onSubmit={ handleSubmit }
+            onFocus={ handleFocus }
+            onBlur={ handleBlur }
+            onHide={ handelHide }
+            onClear={ handleClear }
+            value={ searchTerm }
+            isSuggestOpen={ isSuggestOpen }
+          />
+        </PopoverTrigger>
+        <PopoverContent w={ `${ menuWidth.current }px` } maxH={{ base: '300px', lg: '500px' }} overflowY="scroll" ref={ menuRef }>
+          <PopoverBody py={ 6 }>
+            <SearchBarRecentKeywords onClick={ handleSearchTermChange } onClear={ onClose }/>
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
+      <SearchBarBackdrop isOpen={ isSuggestOpen }/>
+    </>
   );
 };
 
diff --git a/ui/shared/AccountActionsMenu/AccountActionsMenu.pw.tsx b/ui/shared/AccountActionsMenu/AccountActionsMenu.pw.tsx
new file mode 100644
index 0000000000..250be90a15
--- /dev/null
+++ b/ui/shared/AccountActionsMenu/AccountActionsMenu.pw.tsx
@@ -0,0 +1,84 @@
+import type { BrowserContext } from '@playwright/test';
+import React from 'react';
+
+import * as profileMock from 'mocks/user/profile';
+import { contextWithAuth } from 'playwright/fixtures/auth';
+import { test as base, expect } from 'playwright/lib';
+
+import AccountActionsMenu from './AccountActionsMenu';
+
+const test = base.extend<{ context: BrowserContext }>({
+  context: contextWithAuth,
+});
+
+test.use({ viewport: { width: 200, height: 200 } });
+
+test.describe('with multiple items', () => {
+  const hooksConfig = {
+    router: {
+      query: { hash: '<hash>' },
+      pathname: '/token/[hash]',
+      isReady: true,
+    },
+  };
+
+  test.beforeEach(async({ mockApiResponse }) => {
+    mockApiResponse('user_info', profileMock.base);
+  });
+
+  test('base view', async({ render, page }) => {
+    const component = await render(<AccountActionsMenu/>, { hooksConfig });
+    await component.getByRole('button').click();
+
+    await expect(page).toHaveScreenshot();
+  });
+
+  test('base view with styles', async({ render, page }) => {
+    const component = await render(<AccountActionsMenu m={ 2 } outline="1px solid lightpink"/>, { hooksConfig });
+    await component.getByRole('button').click();
+
+    await expect(page).toHaveScreenshot();
+  });
+
+  test('loading', async({ render }) => {
+    const component = await render(<AccountActionsMenu isLoading/>, { hooksConfig });
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('loading with styles', async({ render }) => {
+    const component = await render(<AccountActionsMenu isLoading m={ 2 } outline="1px solid lightpink"/>, { hooksConfig });
+
+    await expect(component).toHaveScreenshot();
+  });
+});
+
+test.describe('with one item', () => {
+  const hooksConfig = {
+    router: {
+      query: { hash: '<hash>' },
+      pathname: '/tx/[hash]',
+      isReady: true,
+    },
+  };
+
+  test('base view', async({ render, page }) => {
+    const component = await render(<AccountActionsMenu/>, { hooksConfig });
+    await component.getByRole('button').hover();
+
+    await expect(page).toHaveScreenshot();
+  });
+
+  test('base view with styles', async({ render, page }) => {
+    const component = await render(<AccountActionsMenu m={ 2 } outline="1px solid lightpink"/>, { hooksConfig });
+    await component.getByRole('button').hover();
+
+    await expect(page).toHaveScreenshot();
+  });
+
+  test('loading', async({ render }) => {
+    const component = await render(<AccountActionsMenu isLoading/>, { hooksConfig });
+
+    await expect(component).toHaveScreenshot();
+  });
+});
diff --git a/ui/shared/AccountActionsMenu/AccountActionsMenu.tsx b/ui/shared/AccountActionsMenu/AccountActionsMenu.tsx
index 60ccd3abf3..de51d2069c 100644
--- a/ui/shared/AccountActionsMenu/AccountActionsMenu.tsx
+++ b/ui/shared/AccountActionsMenu/AccountActionsMenu.tsx
@@ -1,13 +1,17 @@
-import { IconButton, Menu, MenuButton, MenuList, Skeleton, chakra } from '@chakra-ui/react';
+import { Box, IconButton, MenuButton, MenuList, Skeleton, chakra } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import type { ItemProps } from './types';
+
 import config from 'configs/app';
-import useIsAccountActionAllowed from 'lib/hooks/useIsAccountActionAllowed';
 import * as mixpanel from 'lib/mixpanel/index';
 import getQueryParamString from 'lib/router/getQueryParamString';
+import Menu from 'ui/shared/chakra/Menu';
 import IconSvg from 'ui/shared/IconSvg';
+import useProfileQuery from 'ui/snippets/auth/useProfileQuery';
 
+import MetadataUpdateMenuItem from './items/MetadataUpdateMenuItem';
 import PrivateTagMenuItem from './items/PrivateTagMenuItem';
 import PublicTagMenuItem from './items/PublicTagMenuItem';
 import TokenInfoMenuItem from './items/TokenInfoMenuItem';
@@ -15,48 +19,79 @@ import TokenInfoMenuItem from './items/TokenInfoMenuItem';
 interface Props {
   isLoading?: boolean;
   className?: string;
+  showUpdateMetadataItem?: boolean;
 }
 
-const AccountActionsMenu = ({ isLoading, className }: Props) => {
+const AccountActionsMenu = ({ isLoading, className, showUpdateMetadataItem }: Props) => {
   const router = useRouter();
 
   const hash = getQueryParamString(router.query.hash);
   const isTokenPage = router.pathname === '/token/[hash]';
+  const isTokenInstancePage = router.pathname === '/token/[hash]/instance/[id]';
   const isTxPage = router.pathname === '/tx/[hash]';
-  const isAccountActionAllowed = useIsAccountActionAllowed();
+
+  const profileQuery = useProfileQuery();
 
   const handleButtonClick = React.useCallback(() => {
     mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Address actions (more button)' });
   }, []);
 
-  if (!config.features.account.isEnabled) {
+  const userWithoutEmail = profileQuery.data && !profileQuery.data.email;
+
+  const items = [
+    {
+      render: (props: ItemProps) => <MetadataUpdateMenuItem { ...props }/>,
+      enabled: isTokenInstancePage && showUpdateMetadataItem,
+    },
+    {
+      render: (props: ItemProps) => <TokenInfoMenuItem { ...props }/>,
+      enabled: config.features.account.isEnabled && isTokenPage && config.features.addressVerification.isEnabled && !userWithoutEmail,
+    },
+    {
+      render: (props: ItemProps) => <PrivateTagMenuItem { ...props } entityType={ isTxPage ? 'tx' : 'address' }/>,
+      enabled: config.features.account.isEnabled,
+    },
+    {
+      render: (props: ItemProps) => <PublicTagMenuItem { ...props }/>,
+      enabled: config.features.account.isEnabled && !isTxPage && config.features.publicTagsSubmission.isEnabled,
+    },
+  ].filter(({ enabled }) => enabled);
+
+  if (items.length === 0) {
     return null;
   }
 
+  if (isLoading) {
+    return <Skeleton w="36px" h="32px" borderRadius="base" className={ className }/>;
+  }
+
+  if (items.length === 1) {
+    return (
+      <Box className={ className }>
+        { items[0].render({ type: 'button', hash }) }
+      </Box>
+    );
+  }
+
   return (
     <Menu>
-      <Skeleton isLoaded={ !isLoading } borderRadius="base" className={ className }>
-        <MenuButton
-          as={ IconButton }
-          size="sm"
-          variant="outline"
-          colorScheme="gray"
-          px="7px"
-          onClick={ handleButtonClick }
-          icon={ <IconSvg name="dots" boxSize="18px"/> }
-        />
-      </Skeleton>
+      <MenuButton
+        as={ IconButton }
+        className={ className }
+        size="sm"
+        variant="outline"
+        colorScheme="gray"
+        px="7px"
+        onClick={ handleButtonClick }
+        icon={ <IconSvg name="dots" boxSize="18px"/> }
+        aria-label="Show address menu"
+      />
       <MenuList minWidth="180px" zIndex="popover">
-        { isTokenPage && config.features.addressVerification.isEnabled &&
-          <TokenInfoMenuItem py={ 2 } px={ 4 } hash={ hash } onBeforeClick={ isAccountActionAllowed }/> }
-        <PrivateTagMenuItem
-          py={ 2 }
-          px={ 4 }
-          hash={ hash }
-          onBeforeClick={ isAccountActionAllowed }
-          type={ isTxPage ? 'tx' : 'address' }
-        />
-        { !isTxPage && <PublicTagMenuItem py={ 2 } px={ 4 } hash={ hash } onBeforeClick={ isAccountActionAllowed }/> }
+        { items.map(({ render }, index) => (
+          <React.Fragment key={ index }>
+            { render({ type: 'menu_item', hash }) }
+          </React.Fragment>
+        )) }
       </MenuList>
     </Menu>
   );
diff --git a/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-multiple-items-base-view-1.png b/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-multiple-items-base-view-1.png
new file mode 100644
index 0000000000..22b6683ec6
Binary files /dev/null and b/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-multiple-items-base-view-1.png differ
diff --git a/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-multiple-items-base-view-with-styles-1.png b/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-multiple-items-base-view-with-styles-1.png
new file mode 100644
index 0000000000..d95ebb74ae
Binary files /dev/null and b/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-multiple-items-base-view-with-styles-1.png differ
diff --git a/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-multiple-items-loading-1.png b/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-multiple-items-loading-1.png
new file mode 100644
index 0000000000..949f51a159
Binary files /dev/null and b/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-multiple-items-loading-1.png differ
diff --git a/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-multiple-items-loading-with-styles-1.png b/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-multiple-items-loading-with-styles-1.png
new file mode 100644
index 0000000000..71ba1ff684
Binary files /dev/null and b/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-multiple-items-loading-with-styles-1.png differ
diff --git a/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-one-item-base-view-1.png b/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-one-item-base-view-1.png
new file mode 100644
index 0000000000..4c9b716c75
Binary files /dev/null and b/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-one-item-base-view-1.png differ
diff --git a/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-one-item-base-view-with-styles-1.png b/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-one-item-base-view-with-styles-1.png
new file mode 100644
index 0000000000..9f5026b935
Binary files /dev/null and b/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-one-item-base-view-with-styles-1.png differ
diff --git a/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-one-item-loading-1.png b/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-one-item-loading-1.png
new file mode 100644
index 0000000000..949f51a159
Binary files /dev/null and b/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-one-item-loading-1.png differ
diff --git a/ui/shared/AccountActionsMenu/items/MetadataUpdateMenuItem.tsx b/ui/shared/AccountActionsMenu/items/MetadataUpdateMenuItem.tsx
new file mode 100644
index 0000000000..a7602ed029
--- /dev/null
+++ b/ui/shared/AccountActionsMenu/items/MetadataUpdateMenuItem.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import type { ItemProps } from '../types';
+
+import IconSvg from 'ui/shared/IconSvg';
+import { useMetadataUpdateContext } from 'ui/tokenInstance/contexts/metadataUpdate';
+
+import ButtonItem from '../parts/ButtonItem';
+import MenuItem from '../parts/MenuItem';
+
+const MetadataUpdateMenuItem = ({ type, className }: ItemProps) => {
+
+  const { status, setStatus } = useMetadataUpdateContext() || {};
+
+  const handleClick = React.useCallback(() => {
+    setStatus?.('MODAL_OPENED');
+  }, [ setStatus ]);
+
+  const element = (() => {
+    switch (type) {
+      case 'button': {
+        return (
+          <ButtonItem
+            label="Refresh metadata"
+            icon="refresh"
+            onClick={ handleClick }
+            className={ className }
+            isDisabled={ status === 'WAITING_FOR_RESPONSE' }
+          />
+        );
+      }
+      case 'menu_item': {
+        return (
+          <MenuItem className={ className } onClick={ handleClick } isDisabled={ status === 'WAITING_FOR_RESPONSE' }>
+            <IconSvg name="refresh" boxSize={ 5 } mr={ 2 }/>
+            <span>Refresh metadata</span>
+          </MenuItem>
+        );
+      }
+    }
+  })();
+
+  return element;
+};
+
+export default React.memo(MetadataUpdateMenuItem);
diff --git a/ui/shared/AccountActionsMenu/items/PrivateTagMenuItem.tsx b/ui/shared/AccountActionsMenu/items/PrivateTagMenuItem.tsx
index 941434c390..2d72b6a172 100644
--- a/ui/shared/AccountActionsMenu/items/PrivateTagMenuItem.tsx
+++ b/ui/shared/AccountActionsMenu/items/PrivateTagMenuItem.tsx
@@ -1,8 +1,9 @@
-import { MenuItem, chakra, useDisclosure } from '@chakra-ui/react';
+import { useDisclosure } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import type { ItemProps } from '../types';
 import type { Address } from 'types/api/address';
 import type { Transaction } from 'types/api/transaction';
 
@@ -11,30 +12,23 @@ import getPageType from 'lib/mixpanel/getPageType';
 import AddressModal from 'ui/privateTags/AddressModal/AddressModal';
 import TransactionModal from 'ui/privateTags/TransactionModal/TransactionModal';
 import IconSvg from 'ui/shared/IconSvg';
+import AuthGuard from 'ui/snippets/auth/AuthGuard';
 
-interface Props {
-  className?: string;
-  hash: string;
-  onBeforeClick: () => boolean;
-  type?: 'address' | 'tx';
+import ButtonItem from '../parts/ButtonItem';
+import MenuItem from '../parts/MenuItem';
+
+interface Props extends ItemProps {
+  entityType?: 'address' | 'tx';
 }
 
-const PrivateTagMenuItem = ({ className, hash, onBeforeClick, type = 'address' }: Props) => {
+const PrivateTagMenuItem = ({ className, hash, entityType = 'address', type }: Props) => {
   const modal = useDisclosure();
   const queryClient = useQueryClient();
   const router = useRouter();
 
-  const queryKey = getResourceKey(type === 'tx' ? 'tx' : 'address', { pathParams: { hash } });
+  const queryKey = getResourceKey(entityType === 'tx' ? 'tx' : 'address', { pathParams: { hash } });
   const queryData = queryClient.getQueryData<Address | Transaction>(queryKey);
 
-  const handleClick = React.useCallback(() => {
-    if (!onBeforeClick()) {
-      return;
-    }
-
-    modal.onOpen();
-  }, [ modal, onBeforeClick ]);
-
   const handleAddPrivateTag = React.useCallback(async() => {
     await queryClient.refetchQueries({ queryKey });
     modal.onClose();
@@ -44,7 +38,7 @@ const PrivateTagMenuItem = ({ className, hash, onBeforeClick, type = 'address' }
     queryData &&
     (
       ('private_tags' in queryData && queryData.private_tags?.length) ||
-      ('tx_tag' in queryData && queryData.tx_tag)
+      ('transaction_tag' in queryData && queryData.transaction_tag)
     )
   ) {
     return null;
@@ -58,13 +52,36 @@ const PrivateTagMenuItem = ({ className, hash, onBeforeClick, type = 'address' }
     pageType,
   };
 
+  const element = (() => {
+    switch (type) {
+      case 'button': {
+        return (
+          <AuthGuard onAuthSuccess={ modal.onOpen }>
+            { ({ onClick }) => (
+              <ButtonItem label="Add private tag" icon="privattags" onClick={ onClick } className={ className }/>
+            ) }
+          </AuthGuard>
+        );
+      }
+      case 'menu_item': {
+        return (
+          <AuthGuard onAuthSuccess={ modal.onOpen }>
+            { ({ onClick }) => (
+              <MenuItem className={ className } onClick={ onClick }>
+                <IconSvg name="privattags" boxSize={ 6 } mr={ 2 }/>
+                <span>Add private tag</span>
+              </MenuItem>
+            ) }
+          </AuthGuard>
+        );
+      }
+    }
+  })();
+
   return (
     <>
-      <MenuItem className={ className } onClick={ handleClick }>
-        <IconSvg name="privattags" boxSize={ 6 } mr={ 2 }/>
-        <span>Add private tag</span>
-      </MenuItem>
-      { type === 'tx' ?
+      { element }
+      { entityType === 'tx' ?
         <TransactionModal { ...modalProps } data={{ transaction_hash: hash }}/> :
         <AddressModal { ...modalProps } data={{ address_hash: hash }}/>
       }
@@ -72,4 +89,4 @@ const PrivateTagMenuItem = ({ className, hash, onBeforeClick, type = 'address' }
   );
 };
 
-export default React.memo(chakra(PrivateTagMenuItem));
+export default React.memo(PrivateTagMenuItem);
diff --git a/ui/shared/AccountActionsMenu/items/PublicTagMenuItem.tsx b/ui/shared/AccountActionsMenu/items/PublicTagMenuItem.tsx
index 25de85da97..23d0fedc94 100644
--- a/ui/shared/AccountActionsMenu/items/PublicTagMenuItem.tsx
+++ b/ui/shared/AccountActionsMenu/items/PublicTagMenuItem.tsx
@@ -1,32 +1,33 @@
-import { MenuItem, chakra } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import type { ItemProps } from '../types';
+
 import IconSvg from 'ui/shared/IconSvg';
 
-interface Props {
-  className?: string;
-  hash: string;
-  onBeforeClick: () => boolean;
-}
+import ButtonItem from '../parts/ButtonItem';
+import MenuItem from '../parts/MenuItem';
 
-const PublicTagMenuItem = ({ className, hash, onBeforeClick }: Props) => {
+const PublicTagMenuItem = ({ className, hash, type }: ItemProps) => {
   const router = useRouter();
 
   const handleClick = React.useCallback(() => {
-    if (!onBeforeClick()) {
-      return;
-    }
-
-    router.push({ pathname: '/account/public-tags-request', query: { address: hash } });
-  }, [ hash, onBeforeClick, router ]);
+    router.push({ pathname: '/public-tags/submit', query: { addresses: [ hash ] } });
+  }, [ hash, router ]);
 
-  return (
-    <MenuItem className={ className }onClick={ handleClick }>
-      <IconSvg name="publictags" boxSize={ 6 } mr={ 2 }/>
-      <span>Add public tag</span>
-    </MenuItem>
-  );
+  switch (type) {
+    case 'button': {
+      return <ButtonItem label="Add public tag" icon="publictags" onClick={ handleClick } className={ className }/>;
+    }
+    case 'menu_item': {
+      return (
+        <MenuItem className={ className } onClick={ handleClick }>
+          <IconSvg name="publictags" boxSize={ 6 } mr={ 2 }/>
+          <span>Add public tag</span>
+        </MenuItem>
+      );
+    }
+  }
 };
 
-export default React.memo(chakra(PublicTagMenuItem));
+export default React.memo(PublicTagMenuItem);
diff --git a/ui/shared/AccountActionsMenu/items/TokenInfoMenuItem.tsx b/ui/shared/AccountActionsMenu/items/TokenInfoMenuItem.tsx
index b7e5f3d337..3863b69e41 100644
--- a/ui/shared/AccountActionsMenu/items/TokenInfoMenuItem.tsx
+++ b/ui/shared/AccountActionsMenu/items/TokenInfoMenuItem.tsx
@@ -1,26 +1,24 @@
-import { MenuItem, chakra, useDisclosure } from '@chakra-ui/react';
+import { chakra, useDisclosure } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { Route } from 'nextjs-routes';
+import type { ItemProps } from '../types';
 
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
-import useHasAccount from 'lib/hooks/useHasAccount';
 import { PAGE_TYPE_DICT } from 'lib/mixpanel/getPageType';
 import AddressVerificationModal from 'ui/addressVerification/AddressVerificationModal';
 import IconSvg from 'ui/shared/IconSvg';
+import AuthGuard from 'ui/snippets/auth/AuthGuard';
+import useIsAuth from 'ui/snippets/auth/useIsAuth';
 
-interface Props {
-  className?: string;
-  hash: string;
-  onBeforeClick: (route: Route) => boolean;
-}
+import ButtonItem from '../parts/ButtonItem';
+import MenuItem from '../parts/MenuItem';
 
-const TokenInfoMenuItem = ({ className, hash, onBeforeClick }: Props) => {
+const TokenInfoMenuItem = ({ className, hash, type }: ItemProps) => {
   const router = useRouter();
   const modal = useDisclosure();
-  const isAuth = useHasAccount();
+  const isAuth = useIsAuth();
 
   const verifiedAddressesQuery = useApiQuery('verified_addresses', {
     pathParams: { chainId: config.chain.id },
@@ -41,14 +39,6 @@ const TokenInfoMenuItem = ({ className, hash, onBeforeClick }: Props) => {
     },
   });
 
-  const handleAddAddressClick = React.useCallback(() => {
-    if (!onBeforeClick({ pathname: '/account/verified-addresses' })) {
-      return;
-    }
-
-    modal.onOpen();
-  }, [ modal, onBeforeClick ]);
-
   const handleAddApplicationClick = React.useCallback(async() => {
     router.push({ pathname: '/account/verified-addresses', query: { address: hash } });
   }, [ hash, router ]);
@@ -61,37 +51,50 @@ const TokenInfoMenuItem = ({ className, hash, onBeforeClick }: Props) => {
     router.push({ pathname: '/account/verified-addresses' });
   }, [ router ]);
 
-  const icon = <IconSvg name="edit" boxSize={ 6 } mr={ 2 } p={ 1 }/>;
-
-  const content = (() => {
-    if (!verifiedAddressesQuery.data?.verifiedAddresses.find(({ contractAddress }) => contractAddress.toLowerCase() === hash.toLowerCase())) {
-      return (
-        <MenuItem className={ className } onClick={ handleAddAddressClick }>
-          { icon }
-          <span>{ tokenInfoQuery.data?.tokenAddress ? 'Update token info' : 'Add token info' }</span>
-        </MenuItem>
-      );
-    }
-
+  const element = (() => {
+    const icon = <IconSvg name="edit" boxSize={ 6 } p={ 1 }/>;
+    const isVerifiedAddress = verifiedAddressesQuery.data?.verifiedAddresses
+      .find(({ contractAddress }) => contractAddress.toLowerCase() === hash.toLowerCase());
     const hasApplication = applicationsQuery.data?.submissions.some(({ tokenAddress }) => tokenAddress.toLowerCase() === hash.toLowerCase());
 
-    return (
-      <MenuItem className={ className } onClick={ handleAddApplicationClick }>
-        { icon }
-        <span>
-          {
-            hasApplication || tokenInfoQuery.data?.tokenAddress ?
-              'Update token info' :
-              'Add token info'
-          }
-        </span>
-      </MenuItem>
-    );
+    const label = (() => {
+      if (!isVerifiedAddress) {
+        return tokenInfoQuery.data?.tokenAddress ? 'Update token info' : 'Add token info';
+      }
+
+      return hasApplication || tokenInfoQuery.data?.tokenAddress ? 'Update token info' : 'Add token info';
+    })();
+
+    const onAuthSuccess = isVerifiedAddress ? handleAddApplicationClick : modal.onOpen;
+
+    switch (type) {
+      case 'button': {
+        return (
+          <AuthGuard onAuthSuccess={ onAuthSuccess }>
+            { ({ onClick }) => (
+              <ButtonItem label={ label } icon={ icon } onClick={ onClick } className={ className }/>
+            ) }
+          </AuthGuard>
+        );
+      }
+      case 'menu_item': {
+        return (
+          <AuthGuard onAuthSuccess={ onAuthSuccess }>
+            { ({ onClick }) => (
+              <MenuItem className={ className } onClick={ onClick }>
+                { icon }
+                <chakra.span ml={ 2 }>{ label }</chakra.span>
+              </MenuItem>
+            ) }
+          </AuthGuard>
+        );
+      }
+    }
   })();
 
   return (
     <>
-      { content }
+      { element }
       <AddressVerificationModal
         defaultAddress={ hash }
         pageType={ PAGE_TYPE_DICT['/token/[hash]'] }
@@ -105,4 +108,4 @@ const TokenInfoMenuItem = ({ className, hash, onBeforeClick }: Props) => {
   );
 };
 
-export default React.memo(chakra(TokenInfoMenuItem));
+export default React.memo(TokenInfoMenuItem);
diff --git a/ui/shared/AccountActionsMenu/parts/ButtonItem.tsx b/ui/shared/AccountActionsMenu/parts/ButtonItem.tsx
new file mode 100644
index 0000000000..7362741617
--- /dev/null
+++ b/ui/shared/AccountActionsMenu/parts/ButtonItem.tsx
@@ -0,0 +1,32 @@
+import { IconButton, Tooltip } from '@chakra-ui/react';
+import React from 'react';
+
+import type { IconName } from 'ui/shared/IconSvg';
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props {
+  className?: string;
+  onClick: () => void;
+  label: string;
+  icon: IconName | React.ReactElement;
+  isDisabled?: boolean;
+}
+
+const ButtonItem = ({ className, label, onClick, icon, isDisabled }: Props) => {
+  return (
+    <Tooltip label={ label } isDisabled={ isDisabled }>
+      <IconButton
+        aria-label={ label }
+        className={ className }
+        icon={ typeof icon === 'string' ? <IconSvg name={ icon } boxSize={ 6 }/> : icon }
+        onClick={ onClick }
+        isDisabled={ isDisabled }
+        size="sm"
+        variant="outline"
+        px="4px"
+      />
+    </Tooltip>
+  );
+};
+
+export default ButtonItem;
diff --git a/ui/shared/AccountActionsMenu/parts/MenuItem.tsx b/ui/shared/AccountActionsMenu/parts/MenuItem.tsx
new file mode 100644
index 0000000000..13e827edbe
--- /dev/null
+++ b/ui/shared/AccountActionsMenu/parts/MenuItem.tsx
@@ -0,0 +1,19 @@
+import { MenuItem as MenuItemChakra } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  className?: string;
+  children: React.ReactNode;
+  onClick: () => void;
+  isDisabled?: boolean;
+}
+
+const MenuItem = ({ className, children, onClick, isDisabled }: Props) => {
+  return (
+    <MenuItemChakra className={ className } onClick={ onClick } py={ 2 } px={ 4 } isDisabled={ isDisabled }>
+      { children }
+    </MenuItemChakra>
+  );
+};
+
+export default MenuItem;
diff --git a/ui/shared/AccountActionsMenu/types.ts b/ui/shared/AccountActionsMenu/types.ts
new file mode 100644
index 0000000000..679fd3a74b
--- /dev/null
+++ b/ui/shared/AccountActionsMenu/types.ts
@@ -0,0 +1,7 @@
+export type ItemType = 'button' | 'menu_item';
+
+export interface ItemProps {
+  className?: string;
+  type: ItemType;
+  hash: string;
+}
diff --git a/ui/shared/ActionBar.tsx b/ui/shared/ActionBar.tsx
index 3b8d2410ea..8e6e16b2db 100644
--- a/ui/shared/ActionBar.tsx
+++ b/ui/shared/ActionBar.tsx
@@ -8,10 +8,12 @@ type Props = {
   children: React.ReactNode;
   className?: string;
   showShadow?: boolean;
-}
+};
 
 const TOP_UP = 106;
 const TOP_DOWN = 0;
+export const ACTION_BAR_HEIGHT_DESKTOP = 24 + 32 + 12;
+export const ACTION_BAR_HEIGHT_MOBILE = 24 + 32 + 24;
 
 const ActionBar = ({ children, className, showShadow }: Props) => {
   const ref = React.useRef<HTMLDivElement>(null);
@@ -27,9 +29,10 @@ const ActionBar = ({ children, className, showShadow }: Props) => {
     <Flex
       className={ className }
       backgroundColor={ bgColor }
-      py={ 6 }
-      mx={{ base: -4, lg: 0 }}
-      px={{ base: 4, lg: 0 }}
+      pt={ 6 }
+      pb={{ base: 6, lg: 3 }}
+      mx={{ base: -3, lg: 0 }}
+      px={{ base: 3, lg: 0 }}
       justifyContent="space-between"
       width={{ base: '100vw', lg: 'unset' }}
       position="sticky"
diff --git a/ui/shared/AdditionalInfoButton.tsx b/ui/shared/AdditionalInfoButton.tsx
index 5b1002bfeb..144820e89a 100644
--- a/ui/shared/AdditionalInfoButton.tsx
+++ b/ui/shared/AdditionalInfoButton.tsx
@@ -37,11 +37,12 @@ const AdditionalInfoButton = ({ isOpen, onClick, className, isLoading }: Props,
       onClick={ onClick }
       cursor="pointer"
       flexShrink={ 0 }
+      aria-label="Transaction info"
     >
       <IconSvg
         name="info"
         boxSize={ 5 }
-        color="link"
+        color={ isOpen ? 'link_hovered' : 'icon_info' }
         _hover={{ color: 'link_hovered' }}
       />
     </Button>
diff --git a/ui/shared/AddressInput.tsx b/ui/shared/AddressInput.tsx
deleted file mode 100644
index 00468f2e64..0000000000
--- a/ui/shared/AddressInput.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { InputProps } from '@chakra-ui/react';
-import {
-  Input,
-  FormControl,
-} from '@chakra-ui/react';
-import React from 'react';
-import type { ControllerRenderProps, FieldError, FieldValues, Path } from 'react-hook-form';
-
-import { ADDRESS_LENGTH } from 'lib/validations/address';
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
-
-type Props<TInputs extends FieldValues, TInputName extends Path<TInputs>> = {
-  field: ControllerRenderProps<TInputs, TInputName>;
-  size?: InputProps['size'];
-  placeholder?: string;
-  backgroundColor?: string;
-  error?: FieldError;
-}
-
-export default function AddressInput<Inputs extends FieldValues, Name extends Path<Inputs>>(
-  {
-    error,
-    field,
-    size,
-    placeholder = 'Address (0x...)',
-    backgroundColor,
-  }: Props<Inputs, Name>) {
-  return (
-    <FormControl variant="floating" id="address" isRequired backgroundColor={ backgroundColor } size={ size }>
-      <Input
-        { ...field }
-        isInvalid={ Boolean(error) }
-        maxLength={ ADDRESS_LENGTH }
-      />
-      <InputPlaceholder text={ placeholder } error={ error }/>
-    </FormControl>
-  );
-}
diff --git a/ui/shared/AppActionButton/AppActionButton.pw.tsx b/ui/shared/AppActionButton/AppActionButton.pw.tsx
new file mode 100644
index 0000000000..16f9ecb730
--- /dev/null
+++ b/ui/shared/AppActionButton/AppActionButton.pw.tsx
@@ -0,0 +1,61 @@
+import { Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
+
+import * as actionButtonMetadataMock from 'mocks/metadata/appActionButton';
+import { test, expect } from 'playwright/lib';
+
+import AppActionButton from './AppActionButton';
+
+test.beforeEach(async({ mockAssetResponse }) => {
+  await mockAssetResponse(actionButtonMetadataMock.appLogoURL as string, './playwright/mocks/image_s.jpg');
+});
+
+test('button without styles +@dark-mode', async({ render }) => {
+  const component = await render(
+    <Flex w="200px">
+      <AppActionButton
+        data={ actionButtonMetadataMock.buttonWithoutStyles as NonNullable<AddressMetadataTagFormatted['meta']> }
+        source="Txn"
+      />
+    </Flex>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('link without styles +@dark-mode', async({ render }) => {
+  const component = await render(
+    <Flex w="200px">
+      <AppActionButton
+        data={ actionButtonMetadataMock.linkWithoutStyles as NonNullable<AddressMetadataTagFormatted['meta']> }
+        source="Txn"
+      />
+    </Flex>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('button with styles', async({ render }) => {
+  const component = await render(
+    <Flex w="200px">
+      <AppActionButton
+        data={ actionButtonMetadataMock.buttonWithStyles as NonNullable<AddressMetadataTagFormatted['meta']> }
+        source="Txn"
+      />
+    </Flex>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('link with styles', async({ render }) => {
+  const component = await render(
+    <Flex w="200px">
+      <AppActionButton
+        data={ actionButtonMetadataMock.linkWithStyles as NonNullable<AddressMetadataTagFormatted['meta']> }
+        source="Txn"
+      />
+    </Flex>,
+  );
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/shared/AppActionButton/AppActionButton.tsx b/ui/shared/AppActionButton/AppActionButton.tsx
new file mode 100644
index 0000000000..6196da5669
--- /dev/null
+++ b/ui/shared/AppActionButton/AppActionButton.tsx
@@ -0,0 +1,91 @@
+import { Button, Image, Text, useColorModeValue, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import * as mixpanel from 'lib/mixpanel/index';
+
+import LinkExternal from '../links/LinkExternal';
+
+type Props = {
+  data: NonNullable<AddressMetadataTagFormatted['meta']>;
+  className?: string;
+  txHash?: string;
+  source: 'Txn' | 'NFT collection' | 'NFT item';
+};
+
+const AppActionButton = ({ data, className, txHash, source }: Props) => {
+  const defaultTextColor = useColorModeValue('blue.600', 'blue.300');
+  const defaultBg = useColorModeValue('gray.100', 'gray.700');
+
+  const { appID, textColor, bgColor, appActionButtonText, appLogoURL, appMarketplaceURL } = data;
+
+  const actionURL = appMarketplaceURL?.replace('{chainId}', config.chain.id || '').replace('{txHash}', txHash || '');
+
+  const handleClick = React.useCallback(() => {
+    const info = appID || actionURL;
+    if (info) {
+      mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Action button', Info: info, Source: source });
+    }
+  }, [ source, appID, actionURL ]);
+
+  if ((!appID && !appMarketplaceURL) || (!appActionButtonText && !appLogoURL)) {
+    return null;
+  }
+
+  const content = (
+    <>
+      { appLogoURL && (
+        <Image
+          src={ appLogoURL }
+          alt={ `${ appActionButtonText } button` }
+          boxSize={ 5 }
+          borderRadius="sm"
+          mr={ 2 }
+        />
+      ) }
+      <Text fontSize="sm" fontWeight="500" color="currentColor">
+        { appActionButtonText }
+      </Text>
+    </>
+  );
+
+  return appID ? (
+    <Button
+      className={ className }
+      as="a"
+      href={ route({ pathname: '/apps/[id]', query: { id: appID, action: 'connect', ...(actionURL ? { url: actionURL } : {}) } }) }
+      onClick={ handleClick }
+      display="flex"
+      size="sm"
+      px={ 2 }
+      color={ textColor || defaultTextColor }
+      bg={ bgColor || defaultBg }
+      _hover={{ bg: bgColor, opacity: 0.9 }}
+      _active={{ bg: bgColor, opacity: 0.9 }}
+    >
+      { content }
+    </Button>
+  ) : (
+    <LinkExternal
+      className={ className }
+      href={ actionURL }
+      onClick={ handleClick }
+      variant="subtle"
+      display="flex"
+      px={ 2 }
+      iconColor={ textColor }
+      color={ textColor }
+      bg={ bgColor }
+      _hover={{ color: textColor }}
+      _active={{ color: textColor }}
+    >
+      { content }
+    </LinkExternal>
+  );
+};
+
+export default chakra(AppActionButton);
diff --git a/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_dark-color-mode_button-without-styles-dark-mode-1.png b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_dark-color-mode_button-without-styles-dark-mode-1.png
new file mode 100644
index 0000000000..7d71352460
Binary files /dev/null and b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_dark-color-mode_button-without-styles-dark-mode-1.png differ
diff --git a/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_dark-color-mode_link-without-styles-dark-mode-1.png b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_dark-color-mode_link-without-styles-dark-mode-1.png
new file mode 100644
index 0000000000..cefd36bdee
Binary files /dev/null and b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_dark-color-mode_link-without-styles-dark-mode-1.png differ
diff --git a/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_button-with-styles-1.png b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_button-with-styles-1.png
new file mode 100644
index 0000000000..f2eec3d76f
Binary files /dev/null and b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_button-with-styles-1.png differ
diff --git a/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_button-without-styles-dark-mode-1.png b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_button-without-styles-dark-mode-1.png
new file mode 100644
index 0000000000..8b18601d7c
Binary files /dev/null and b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_button-without-styles-dark-mode-1.png differ
diff --git a/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_link-with-styles-1.png b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_link-with-styles-1.png
new file mode 100644
index 0000000000..bce06acdbb
Binary files /dev/null and b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_link-with-styles-1.png differ
diff --git a/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_link-without-styles-dark-mode-1.png b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_link-without-styles-dark-mode-1.png
new file mode 100644
index 0000000000..5885f413b9
Binary files /dev/null and b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_link-without-styles-dark-mode-1.png differ
diff --git a/ui/shared/AppActionButton/useAppActionData.tsx b/ui/shared/AppActionButton/useAppActionData.tsx
new file mode 100644
index 0000000000..de0be18a74
--- /dev/null
+++ b/ui/shared/AppActionButton/useAppActionData.tsx
@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+
+import useAddressMetadataInfoQuery from 'lib/address/useAddressMetadataInfoQuery';
+
+export default function useAppActionData(address: string | undefined = '', isEnabled = true) {
+  const memoizedArray = useMemo(() => address ? [ address ] : [], [ address ]);
+  const { data } = useAddressMetadataInfoQuery(memoizedArray, isEnabled);
+  const metadata = data?.addresses[address?.toLowerCase()];
+  const tag = metadata?.tags?.find(({ tagType }) => tagType === 'protocol');
+  if (tag?.meta?.appMarketplaceURL || tag?.meta?.appID) {
+    return tag.meta;
+  }
+  return null;
+}
diff --git a/ui/shared/AppError/AppError.pw.tsx b/ui/shared/AppError/AppError.pw.tsx
index a3405e2b99..c4ec388e37 100644
--- a/ui/shared/AppError/AppError.pw.tsx
+++ b/ui/shared/AppError/AppError.pw.tsx
@@ -1,79 +1,51 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
-import * as configs from 'playwright/utils/configs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import AppError from './AppError';
 
-test('status code 404', async({ mount }) => {
+test('status code 404', async({ render, page }) => {
   const error = { message: 'Not found', cause: { status: 404 } } as Error;
-  const component = await mount(
-    <TestApp>
-      <AppError error={ error }/>
-    </TestApp>,
-  );
-  await expect(component).toHaveScreenshot();
+  const component = await render(<AppError error={ error }/>);
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
 });
 
-test('status code 422', async({ mount }) => {
+test('status code 422', async({ render }) => {
   const error = { message: 'Unprocessable entry', cause: { status: 422 } } as Error;
-  const component = await mount(
-    <TestApp>
-      <AppError error={ error }/>
-    </TestApp>,
-  );
+  const component = await render(<AppError error={ error }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('status code 500', async({ mount }) => {
+test('status code 500', async({ render }) => {
   const error = { message: 'Unknown error', cause: { status: 500 } } as Error;
-  const component = await mount(
-    <TestApp>
-      <AppError error={ error }/>
-    </TestApp>,
-  );
+  const component = await render(<AppError error={ error }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('invalid tx hash', async({ mount }) => {
-  const error = { message: 'Invalid tx hash', cause: { status: 422, resource: 'tx' } } as Error;
-  const component = await mount(
-    <TestApp>
-      <AppError error={ error }/>
-    </TestApp>,
-  );
+test('tx not found', async({ render }) => {
+  const error = { message: 'Not found', cause: { status: 404, resource: 'tx' } } as Error;
+  const component = await render(<AppError error={ error }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('block lost consensus', async({ mount }) => {
+test('block lost consensus', async({ render }) => {
   const error = {
     message: 'Not found',
     cause: { payload: { message: 'Block lost consensus', hash: 'hash' } },
   } as Error;
-  const component = await mount(
-    <TestApp>
-      <AppError error={ error }/>
-    </TestApp>,
-  );
+  const component = await render(<AppError error={ error }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('too many requests +@mobile', async({ mount, page }) => {
+test('too many requests +@mobile', async({ render }) => {
   const error = {
     message: 'Too many requests',
     cause: { status: 429 },
   } as Error;
-
-  const component = await mount(
-    <TestApp>
-      <AppError error={ error }/>
-    </TestApp>,
-  );
-  await page.waitForResponse('https://www.google.com/recaptcha/api2/**');
-
-  await expect(component).toHaveScreenshot({
-    mask: [ page.locator('.recaptcha') ],
-    maskColor: configs.maskColor,
-  });
+  const component = await render(<AppError error={ error }/>);
+  await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/AppError/AppError.tsx b/ui/shared/AppError/AppError.tsx
index b5199d5e5b..aca50cf4d0 100644
--- a/ui/shared/AppError/AppError.tsx
+++ b/ui/shared/AppError/AppError.tsx
@@ -3,16 +3,20 @@ import React from 'react';
 
 import { route } from 'nextjs-routes';
 
+import config from 'configs/app';
 import getErrorCause from 'lib/errors/getErrorCause';
 import getErrorCauseStatusCode from 'lib/errors/getErrorCauseStatusCode';
 import getErrorObjStatusCode from 'lib/errors/getErrorObjStatusCode';
 import getResourceErrorPayload from 'lib/errors/getResourceErrorPayload';
+import AdBannerContent from 'ui/shared/ad/AdBannerContent';
 
 import AppErrorIcon from './AppErrorIcon';
 import AppErrorTitle from './AppErrorTitle';
 import AppErrorBlockConsensus from './custom/AppErrorBlockConsensus';
-import AppErrorInvalidTxHash from './custom/AppErrorInvalidTxHash';
 import AppErrorTooManyRequests from './custom/AppErrorTooManyRequests';
+import AppErrorTxNotFound from './custom/AppErrorTxNotFound';
+
+const adBannerConfig = config.features.adsBanner;
 
 interface Props {
   className?: string;
@@ -47,11 +51,11 @@ const AppError = ({ error, className }: Props) => {
             undefined;
     const statusCode = getErrorCauseStatusCode(error) || getErrorObjStatusCode(error);
 
-    const isInvalidTxHash = cause && 'resource' in cause && cause.resource === 'tx' && statusCode === 422;
+    const isInvalidTxHash = cause && 'resource' in cause && cause.resource === 'tx' && statusCode === 404;
     const isBlockConsensus = messageInPayload?.includes('Block lost consensus');
 
     if (isInvalidTxHash) {
-      return <AppErrorInvalidTxHash/>;
+      return <AppErrorTxNotFound/>;
     }
 
     if (isBlockConsensus) {
@@ -73,6 +77,8 @@ const AppError = ({ error, className }: Props) => {
       default: {
         const { title, text } = ERROR_TEXTS[String(statusCode)] ?? ERROR_TEXTS[500];
 
+        const adBannerProvider = adBannerConfig.isEnabled ? adBannerConfig.provider : null;
+
         return (
           <>
             <AppErrorIcon statusCode={ statusCode }/>
@@ -85,8 +91,9 @@ const AppError = ({ error, className }: Props) => {
               as="a"
               href={ route({ pathname: '/' }) }
             >
-                Back to home
+              Back to home
             </Button>
+            { statusCode === 404 && adBannerProvider && <AdBannerContent mt={ 12 } provider={ adBannerProvider }/> }
           </>
         );
       }
diff --git a/ui/shared/AppError/AppErrorBoundary.tsx b/ui/shared/AppError/AppErrorBoundary.tsx
index c20981516d..4c666967be 100644
--- a/ui/shared/AppError/AppErrorBoundary.tsx
+++ b/ui/shared/AppError/AppErrorBoundary.tsx
@@ -1,6 +1,8 @@
 import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import getErrorCauseStatusCode from 'lib/errors/getErrorCauseStatusCode';
+import { useRollbar } from 'lib/rollbar';
 import ErrorBoundary from 'ui/shared/ErrorBoundary';
 
 import AppError from './AppError';
@@ -8,17 +10,36 @@ import AppError from './AppError';
 interface Props {
   className?: string;
   children: React.ReactNode;
-  onError?: (error: Error) => void;
+  Container?: React.FC<{ children: React.ReactNode }>;
 }
 
-const AppErrorBoundary = ({ className, children, onError }: Props) => {
+const AppErrorBoundary = ({ className, children, Container }: Props) => {
+
+  const rollbar = useRollbar();
 
   const renderErrorScreen = React.useCallback((error?: Error) => {
-    return <AppError error={ error } className={ className }/>;
-  }, [ className ]);
+    const content = <AppError error={ error } className={ className }/>;
+    if (Container) {
+      return <Container>{ content }</Container>;
+    }
+    return content;
+  }, [ className, Container ]);
+
+  const handleError = React.useCallback((error: Error) => {
+    const statusCode = getErrorCauseStatusCode(error);
+    if (statusCode || !rollbar) {
+      // For now, we are not interested in logging errors from the API.
+      // If an error from a resource should be logged, please consider passing "logError: true" to the useApiQuery or useApiFetch hook.
+      return;
+    }
+
+    // To this point, there can only be errors that lead to a page crash.
+    // Therefore, we set the error level to "critical."
+    rollbar.critical(error);
+  }, [ rollbar ]);
 
   return (
-    <ErrorBoundary renderErrorScreen={ renderErrorScreen } onError={ onError }>
+    <ErrorBoundary renderErrorScreen={ renderErrorScreen } onError={ handleError }>
       { children }
     </ErrorBoundary>
   );
diff --git a/ui/shared/AppError/AppErrorGlobalContainer.tsx b/ui/shared/AppError/AppErrorGlobalContainer.tsx
new file mode 100644
index 0000000000..4345d8a162
--- /dev/null
+++ b/ui/shared/AppError/AppErrorGlobalContainer.tsx
@@ -0,0 +1,14 @@
+import { Box, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const AppErrorGlobalContainer = ({ children }: Props) => {
+  const bgColor = useColorModeValue('white', 'black');
+
+  return <Box bgColor={ bgColor }>{ children }</Box>;
+};
+
+export default React.memo(AppErrorGlobalContainer);
diff --git a/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_block-lost-consensus-1.png b/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_block-lost-consensus-1.png
index 000cb187d2..fd7bf66fff 100644
Binary files a/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_block-lost-consensus-1.png and b/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_block-lost-consensus-1.png differ
diff --git a/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_invalid-tx-hash-1.png b/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_invalid-tx-hash-1.png
deleted file mode 100644
index b06fb92cb9..0000000000
Binary files a/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_invalid-tx-hash-1.png and /dev/null differ
diff --git a/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_status-code-404-1.png b/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_status-code-404-1.png
index 87bb10f31e..b078f6b3f0 100644
Binary files a/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_status-code-404-1.png and b/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_status-code-404-1.png differ
diff --git a/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_status-code-422-1.png b/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_status-code-422-1.png
index 72c986c290..dcf660a426 100644
Binary files a/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_status-code-422-1.png and b/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_status-code-422-1.png differ
diff --git a/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_status-code-500-1.png b/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_status-code-500-1.png
index d2ad3ad613..46e360d4d0 100644
Binary files a/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_status-code-500-1.png and b/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_status-code-500-1.png differ
diff --git a/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_too-many-requests-mobile-1.png b/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_too-many-requests-mobile-1.png
index 26cb7b61cc..c7df966fe2 100644
Binary files a/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_too-many-requests-mobile-1.png and b/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_too-many-requests-mobile-1.png differ
diff --git a/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_tx-not-found-1.png b/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_tx-not-found-1.png
new file mode 100644
index 0000000000..04656fbe41
Binary files /dev/null and b/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_tx-not-found-1.png differ
diff --git a/ui/shared/AppError/__screenshots__/AppError.pw.tsx_mobile_too-many-requests-mobile-1.png b/ui/shared/AppError/__screenshots__/AppError.pw.tsx_mobile_too-many-requests-mobile-1.png
index e272008932..764b960afb 100644
Binary files a/ui/shared/AppError/__screenshots__/AppError.pw.tsx_mobile_too-many-requests-mobile-1.png and b/ui/shared/AppError/__screenshots__/AppError.pw.tsx_mobile_too-many-requests-mobile-1.png differ
diff --git a/ui/shared/AppError/custom/AppErrorInvalidTxHash.tsx b/ui/shared/AppError/custom/AppErrorInvalidTxHash.tsx
deleted file mode 100644
index a6da98596f..0000000000
--- a/ui/shared/AppError/custom/AppErrorInvalidTxHash.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-/* eslint-disable max-len */
-import { Box, OrderedList, ListItem, useColorModeValue, Flex } from '@chakra-ui/react';
-import React from 'react';
-
-import IconSvg from 'ui/shared/IconSvg';
-
-import AppErrorTitle from '../AppErrorTitle';
-
-const AppErrorInvalidTxHash = () => {
-  const textColor = useColorModeValue('gray.500', 'gray.400');
-  const snippet = {
-    borderColor: useColorModeValue('blackAlpha.300', 'whiteAlpha.300'),
-    iconBg: useColorModeValue('blackAlpha.800', 'whiteAlpha.800'),
-    iconColor: useColorModeValue('white', 'black'),
-  };
-
-  return (
-    <>
-      <Box p={ 4 } borderColor={ snippet.borderColor } borderRadius="md" w="230px" borderWidth="1px">
-        <Flex alignItems="center" pb={ 4 } borderBottomWidth="1px" borderColor={ snippet.borderColor }>
-          <IconSvg name="transactions" boxSize={ 8 } color={ snippet.iconColor } bgColor={ snippet.iconBg } p={ 1 } borderRadius="md"/>
-          <Box ml={ 2 }>
-            <Box w="125px" h="8px" borderRadius="full" bgColor={ snippet.iconBg }/>
-            <Box w="30px" h="8px" borderRadius="full" bgColor={ snippet.borderColor } mt={ 1.5 }/>
-          </Box>
-        </Flex>
-        <Flex justifyContent="space-between" alignItems="center" mt={ 3 }>
-          <Flex alignItems="center">
-            <Box boxSize={ 5 } borderRadius="full" bgColor={ snippet.borderColor }/>
-            <Box w="65px" h="8px" borderRadius="full" bgColor={ snippet.borderColor } ml={ 1.5 }/>
-          </Flex>
-          <Flex alignItems="center">
-            <Box boxSize={ 5 } borderRadius="full" bgColor={ snippet.borderColor }/>
-            <Box w="65px" h="8px" borderRadius="full" bgColor={ snippet.borderColor } ml={ 1.5 }/>
-          </Flex>
-        </Flex>
-      </Box>
-      <AppErrorTitle title="Sorry, we are unable to locate this transaction hash"/>
-      <OrderedList color={ textColor } mt={ 3 } spacing={ 3 }>
-        <ListItem>
-            If you have just submitted this transaction please wait for at least 30 seconds before refreshing this page.
-        </ListItem>
-        <ListItem>
-            It could still be in the TX Pool of a different node, waiting to be broadcasted.
-        </ListItem>
-        <ListItem>
-            During times when the network is busy (i.e during ICOs) it can take a while for your transaction to propagate through the network and for us to index it.
-        </ListItem>
-        <ListItem>
-            If it still does not show up after 1 hour, please check with your sender/exchange/wallet/transaction provider for additional information.
-        </ListItem>
-      </OrderedList>
-    </>
-  );
-};
-
-export default AppErrorInvalidTxHash;
diff --git a/ui/shared/AppError/custom/AppErrorTooManyRequests.tsx b/ui/shared/AppError/custom/AppErrorTooManyRequests.tsx
index 6e4f4ba750..87d06ef625 100644
--- a/ui/shared/AppError/custom/AppErrorTooManyRequests.tsx
+++ b/ui/shared/AppError/custom/AppErrorTooManyRequests.tsx
@@ -1,11 +1,12 @@
-import { Box, Text } from '@chakra-ui/react';
+import { Button, Text } from '@chakra-ui/react';
 import React from 'react';
-import ReCaptcha from 'react-google-recaptcha';
 
 import config from 'configs/app';
 import buildUrl from 'lib/api/buildUrl';
 import useFetch from 'lib/hooks/useFetch';
 import useToast from 'lib/hooks/useToast';
+import ReCaptcha from 'ui/shared/reCaptcha/ReCaptcha';
+import useReCaptcha from 'ui/shared/reCaptcha/useReCaptcha';
 
 import AppErrorIcon from '../AppErrorIcon';
 import AppErrorTitle from '../AppErrorTitle';
@@ -13,58 +14,49 @@ import AppErrorTitle from '../AppErrorTitle';
 const AppErrorTooManyRequests = () => {
   const toast = useToast();
   const fetch = useFetch();
-
-  const handleReCaptchaChange = React.useCallback(async(token: string | null) => {
-
-    if (token) {
-      try {
-        const url = buildUrl('api_v2_key');
-
-        await fetch(url, {
-          method: 'POST',
-          body: { recaptcha_response: token },
-          credentials: 'include',
-        }, {
-          resource: 'api_v2_key',
-        });
-
-        window.location.reload();
-
-      } catch (error) {
-        toast({
-          position: 'top-right',
-          title: 'Error',
-          description: 'Unable to get client key.',
-          status: 'error',
-          variant: 'subtle',
-          isClosable: true,
-        });
-      }
+  const recaptcha = useReCaptcha();
+
+  const handleSubmit = React.useCallback(async() => {
+    try {
+      const token = await recaptcha.executeAsync();
+      const url = buildUrl('api_v2_key');
+
+      await fetch(url, {
+        method: 'POST',
+        body: { recaptcha_response: token },
+        credentials: 'include',
+      }, {
+        resource: 'api_v2_key',
+      });
+
+      window.location.reload();
+
+    } catch (error) {
+      toast({
+        position: 'top-right',
+        title: 'Error',
+        description: 'Unable to get client key.',
+        status: 'error',
+        variant: 'subtle',
+        isClosable: true,
+      });
     }
-  }, [ toast, fetch ]);
+  }, [ recaptcha, toast, fetch ]);
+
+  if (!config.services.reCaptchaV2.siteKey) {
+    throw new Error('reCAPTCHA V2 site key is not set');
+  }
 
   return (
-    <Box
-      sx={{
-        '.recaptcha': {
-          mt: 8,
-          h: '78px', // otherwise content will jump after reCaptcha is loaded
-        },
-      }}
-    >
+    <>
       <AppErrorIcon statusCode={ 429 }/>
       <AppErrorTitle title="Too many requests"/>
       <Text variant="secondary" mt={ 3 }>
         You have exceeded the request rate for a given time period. Please reduce the number of requests and try again soon.
       </Text>
-      { config.services.reCaptcha.siteKey && (
-        <ReCaptcha
-          className="recaptcha"
-          sitekey={ config.services.reCaptcha.siteKey }
-          onChange={ handleReCaptchaChange }
-        />
-      ) }
-    </Box>
+      <ReCaptcha ref={ recaptcha.ref }/>
+      <Button onClick={ handleSubmit } mt={ 8 }>Try again</Button>
+    </>
   );
 };
 
diff --git a/ui/shared/AppError/custom/AppErrorTxNotFound.tsx b/ui/shared/AppError/custom/AppErrorTxNotFound.tsx
new file mode 100644
index 0000000000..64db950d20
--- /dev/null
+++ b/ui/shared/AppError/custom/AppErrorTxNotFound.tsx
@@ -0,0 +1,69 @@
+/* eslint-disable max-len */
+import { Box, OrderedList, ListItem, useColorModeValue, Flex, chakra, Button } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+import AppErrorTitle from '../AppErrorTitle';
+
+const AppErrorTxNotFound = () => {
+  const snippet = {
+    borderColor: useColorModeValue('blackAlpha.300', 'whiteAlpha.300'),
+    iconBg: useColorModeValue('blackAlpha.800', 'whiteAlpha.800'),
+    iconColor: useColorModeValue('white', 'black'),
+  };
+
+  return (
+    <>
+      <Box p={ 4 } borderColor={ snippet.borderColor } borderRadius="md" w="230px" borderWidth="1px">
+        <Flex alignItems="center" pb={ 4 } borderBottomWidth="1px" borderColor={ snippet.borderColor }>
+          <IconSvg name="transactions" boxSize={ 8 } color={ snippet.iconColor } bgColor={ snippet.iconBg } p={ 1 } borderRadius="md"/>
+          <Box ml={ 2 }>
+            <Box w="125px" h="8px" borderRadius="full" bgColor={ snippet.iconBg }/>
+            <Box w="30px" h="8px" borderRadius="full" bgColor={ snippet.borderColor } mt={ 1.5 }/>
+          </Box>
+        </Flex>
+        <Flex justifyContent="space-between" alignItems="center" mt={ 3 }>
+          <Flex alignItems="center">
+            <Box boxSize={ 5 } borderRadius="full" bgColor={ snippet.borderColor }/>
+            <Box w="65px" h="8px" borderRadius="full" bgColor={ snippet.borderColor } ml={ 1.5 }/>
+          </Flex>
+          <Flex alignItems="center">
+            <Box boxSize={ 5 } borderRadius="full" bgColor={ snippet.borderColor }/>
+            <Box w="65px" h="8px" borderRadius="full" bgColor={ snippet.borderColor } ml={ 1.5 }/>
+          </Flex>
+        </Flex>
+      </Box>
+      <AppErrorTitle title="Sorry, we are unable to locate this transaction hash"/>
+      <OrderedList mt={ 3 } spacing={ 3 }>
+        <ListItem>
+          If you have just submitted this transaction please wait for at least 30 seconds before refreshing this page.
+        </ListItem>
+        <ListItem>
+          It could still be in the TX Pool of a different node, waiting to be broadcasted.
+        </ListItem>
+        <ListItem>
+          During times when the network is busy (i.e during ICOs) it can take a while for your transaction to propagate through the network and for us to index it.
+        </ListItem>
+        <ListItem>
+          <span>If it still does not show up after 1 hour, please check with your </span>
+          <chakra.span fontWeight={ 600 }>sender/exchange/wallet/transaction provider</chakra.span>
+          <span> for additional information.</span>
+        </ListItem>
+      </OrderedList>
+      <Button
+        mt={ 8 }
+        size="lg"
+        variant="outline"
+        as="a"
+        href={ route({ pathname: '/' }) }
+      >
+        Back to home
+      </Button>
+    </>
+  );
+};
+
+export default AppErrorTxNotFound;
diff --git a/ui/shared/AppError/isCustomAppError.ts b/ui/shared/AppError/isCustomAppError.ts
new file mode 100644
index 0000000000..328368e2ae
--- /dev/null
+++ b/ui/shared/AppError/isCustomAppError.ts
@@ -0,0 +1,8 @@
+import type { ResourceError } from 'lib/api/resources';
+
+// status codes when custom error screen should be shown
+const CUSTOM_STATUS_CODES = [ 404, 422, 429 ];
+
+export default function isCustomAppError(error: ResourceError<unknown>) {
+  return CUSTOM_STATUS_CODES.includes(error.status);
+}
diff --git a/ui/shared/CheckboxInput.tsx b/ui/shared/CheckboxInput.tsx
deleted file mode 100644
index 3cef38263a..0000000000
--- a/ui/shared/CheckboxInput.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import {
-  Checkbox,
-} from '@chakra-ui/react';
-import React from 'react';
-import type { ControllerRenderProps, FieldValues, Path } from 'react-hook-form';
-
-type Props<TInputs extends FieldValues, TInputName extends Path<TInputs>> = {
-  field: ControllerRenderProps<TInputs, TInputName>;
-  text: string;
-  onChange?: () => void;
-  isDisabled?: boolean;
-}
-
-export default function CheckboxInput<Inputs extends FieldValues, Name extends Path<Inputs>>(
-  {
-    field,
-    text,
-    onChange,
-    isDisabled,
-  }: Props<Inputs, Name>) {
-
-  const handleChange: typeof field.onChange = React.useCallback((...args) => {
-    field.onChange(...args);
-    onChange?.();
-  }, [ field, onChange ]);
-
-  return (
-    <Checkbox
-      isChecked={ field.value }
-      onChange={ handleChange }
-      ref={ field.ref }
-      colorScheme="blue"
-      size="lg"
-      isDisabled={ isDisabled }
-    >
-      { text }
-    </Checkbox>
-  );
-}
diff --git a/ui/shared/CodeViewSnippet.tsx b/ui/shared/CodeViewSnippet.tsx
new file mode 100644
index 0000000000..b8374001cc
--- /dev/null
+++ b/ui/shared/CodeViewSnippet.tsx
@@ -0,0 +1,37 @@
+import { Box, chakra, Flex, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import CodeEditor from 'ui/shared/monaco/CodeEditor';
+
+interface Props {
+  data: string;
+  copyData?: string;
+  language: string;
+  title?: string;
+  className?: string;
+  rightSlot?: React.ReactNode;
+  isLoading?: boolean;
+}
+
+const CodeViewSnippet = ({ data, copyData, language, title, className, rightSlot, isLoading }: Props) => {
+
+  const editorData = React.useMemo(() => {
+    return [ { file_path: 'index', source_code: data } ];
+  }, [ data ]);
+
+  return (
+    <Box className={ className } as="section" title={ title }>
+      { (title || rightSlot) && (
+        <Flex justifyContent={ title ? 'space-between' : 'flex-end' } alignItems="center" mb={ 3 }>
+          { title && <Skeleton fontWeight={ 500 } isLoaded={ !isLoading }>{ title }</Skeleton> }
+          { rightSlot }
+          <CopyToClipboard text={ copyData ?? data } isLoading={ isLoading }/>
+        </Flex>
+      ) }
+      { isLoading ? <Skeleton height="500px" w="100%"/> : <CodeEditor data={ editorData } language={ language }/> }
+    </Box>
+  );
+};
+
+export default React.memo(chakra(CodeViewSnippet));
diff --git a/ui/shared/ContainerWithScrollY.tsx b/ui/shared/ContainerWithScrollY.tsx
new file mode 100644
index 0000000000..a6e8f35f8a
--- /dev/null
+++ b/ui/shared/ContainerWithScrollY.tsx
@@ -0,0 +1,50 @@
+import { Flex, useColorModeValue, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+export type Props = {
+  children: React.ReactNode;
+  gradientHeight: number;
+  className?: string;
+  onScrollVisibilityChange?: (isVisible: boolean) => void;
+};
+
+const ContainerWithScrollY = ({ className, gradientHeight, children, onScrollVisibilityChange }: Props) => {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [ hasScroll, setHasScroll ] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const hasScroll = ref.current.scrollHeight >= ref.current.clientHeight + gradientHeight / 2;
+    setHasScroll(hasScroll);
+    onScrollVisibilityChange?.(hasScroll);
+  }, [ gradientHeight, onScrollVisibilityChange ]);
+
+  const gradientEndColor = useColorModeValue('white', 'black');
+
+  return (
+    <Flex
+      flexDirection="column"
+      className={ className }
+      overflowY={ hasScroll ? 'scroll' : 'auto' }
+      ref={ ref }
+      _after={ hasScroll ? {
+        position: 'absolute',
+        content: '""',
+        bottom: 0,
+        left: 0,
+        right: '20px',
+        height: `${ gradientHeight }px`,
+        bgGradient: `linear(to-b, transparent, ${ gradientEndColor })`,
+      } : undefined }
+      pr={ hasScroll ? 5 : 0 }
+      pb={ hasScroll ? `${ gradientHeight }px` : 0 }
+    >
+      { children }
+    </Flex>
+  );
+};
+
+export default chakra(ContainerWithScrollY);
diff --git a/ui/shared/ContractCertifiedLabel.tsx b/ui/shared/ContractCertifiedLabel.tsx
new file mode 100644
index 0000000000..f1b7921d6e
--- /dev/null
+++ b/ui/shared/ContractCertifiedLabel.tsx
@@ -0,0 +1,21 @@
+import { Box, Tooltip, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from './IconSvg';
+
+type Props = {
+  iconSize: number;
+  className?: string;
+};
+
+const ContractCertifiedLabel = ({ iconSize, className }: Props) => {
+  return (
+    <Tooltip label="This contract has been certified by the chain developers">
+      <Box className={ className }>
+        <IconSvg name="certified" color="green.500" boxSize={ iconSize } cursor="pointer"/>
+      </Box>
+    </Tooltip>
+  );
+};
+
+export default chakra(ContractCertifiedLabel);
diff --git a/ui/shared/CopyToClipboard.tsx b/ui/shared/CopyToClipboard.tsx
index 4941909638..be3c1311d7 100644
--- a/ui/shared/CopyToClipboard.tsx
+++ b/ui/shared/CopyToClipboard.tsx
@@ -1,20 +1,29 @@
 import { IconButton, Tooltip, useClipboard, chakra, useDisclosure, Skeleton, useColorModeValue } from '@chakra-ui/react';
 import React, { useEffect, useState } from 'react';
 
+import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
 
 export interface Props {
   text: string;
   className?: string;
   isLoading?: boolean;
+  onClick?: (event: React.MouseEvent) => void;
+  size?: number;
+  type?: 'link';
+  icon?: IconName;
+  variant?: string;
+  colorScheme?: string;
 }
 
-const CopyToClipboard = ({ text, className, isLoading }: Props) => {
+const CopyToClipboard = ({ text, className, isLoading, onClick, size = 5, type, icon, variant = 'simple', colorScheme }: Props) => {
   const { hasCopied, onCopy } = useClipboard(text, 1000);
   const [ copied, setCopied ] = useState(false);
   // have to implement controlled tooltip because of the issue - https://github.com/chakra-ui/chakra-ui/issues/7107
   const { isOpen, onOpen, onClose } = useDisclosure();
   const iconColor = useColorModeValue('gray.400', 'gray.500');
+  const colorProps = colorScheme ? {} : { color: iconColor };
+  const iconName = icon || (type === 'link' ? 'link' : 'copy');
 
   useEffect(() => {
     if (hasCopied) {
@@ -24,22 +33,28 @@ const CopyToClipboard = ({ text, className, isLoading }: Props) => {
     }
   }, [ hasCopied ]);
 
+  const handleClick = React.useCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+    onCopy();
+    onClick?.(event);
+  }, [ onClick, onCopy ]);
+
   if (isLoading) {
-    return <Skeleton boxSize={ 5 } className={ className } borderRadius="sm" flexShrink={ 0 } ml={ 2 }/>;
+    return <Skeleton boxSize={ size } className={ className } borderRadius="sm" flexShrink={ 0 } ml={ 2 } display="inline-block"/>;
   }
 
   return (
-    <Tooltip label={ copied ? 'Copied' : 'Copy to clipboard' } isOpen={ isOpen || copied }>
+    <Tooltip label={ copied ? 'Copied' : `Copy${ type === 'link' ? ' link ' : ' ' }to clipboard` } isOpen={ isOpen || copied }>
       <IconButton
+        { ...colorProps }
         aria-label="copy"
-        icon={ <IconSvg name="copy" boxSize={ 5 }/> }
-        w="20px"
-        h="20px"
-        color={ iconColor }
-        variant="simple"
+        icon={ <IconSvg name={ iconName } boxSize={ size }/> }
+        boxSize={ size }
+        variant={ variant }
+        colorScheme={ colorScheme }
         display="inline-block"
         flexShrink={ 0 }
-        onClick={ onCopy }
+        onClick={ handleClick }
         className={ className }
         onMouseEnter={ onOpen }
         onMouseLeave={ onClose }
diff --git a/ui/shared/CurrencyValue.tsx b/ui/shared/CurrencyValue.tsx
index fa10cd09b3..4b4bf7b3a9 100644
--- a/ui/shared/CurrencyValue.tsx
+++ b/ui/shared/CurrencyValue.tsx
@@ -1,4 +1,4 @@
-import { Box, Text, chakra, Skeleton } from '@chakra-ui/react';
+import { chakra, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
@@ -23,20 +23,20 @@ const CurrencyValue = ({ value, currency = '', decimals, exchangeRate, className
 
   if (value === undefined || value === null) {
     return (
-      <Box as="span" className={ className }>
-        <Text>N/A</Text>
-      </Box>
+      <chakra.span className={ className }>
+        -
+      </chakra.span>
     );
   }
   const { valueStr: valueResult, usd: usdResult } = getCurrencyValue({ value, accuracy, accuracyUsd, exchangeRate, decimals });
 
   return (
-    <Box as="span" className={ className } display="inline-flex" rowGap={ 3 } columnGap={ 1 }>
-      <Text display="inline-block">
+    <chakra.span className={ className } display="inline-flex" rowGap={ 3 } columnGap={ 1 }>
+      <chakra.span display="inline-block">
         { valueResult }{ currency ? ` ${ currency }` : '' }
-      </Text>
-      { usdResult && <Text as="span" variant="secondary" fontWeight={ 400 }>(${ usdResult })</Text> }
-    </Box>
+      </chakra.span>
+      { usdResult && <chakra.span color="text_secondary" fontWeight={ 400 }>(${ usdResult })</chakra.span> }
+    </chakra.span>
   );
 };
 
diff --git a/ui/shared/DataListDisplay.tsx b/ui/shared/DataListDisplay.tsx
index 550ab47912..1094108572 100644
--- a/ui/shared/DataListDisplay.tsx
+++ b/ui/shared/DataListDisplay.tsx
@@ -13,12 +13,13 @@ type FilterProps = {
 type Props = {
   isError: boolean;
   items?: Array<unknown>;
-  emptyText: string;
+  emptyText: React.ReactNode;
   actionBar?: React.ReactNode;
+  showActionBarIfEmpty?: boolean;
   content: React.ReactNode;
   className?: string;
   filterProps?: FilterProps;
-}
+};
 
 const DataListDisplay = (props: Props) => {
   if (props.isError) {
@@ -35,7 +36,12 @@ const DataListDisplay = (props: Props) => {
   }
 
   if (!props.items?.length) {
-    return props.emptyText ? <Text className={ props.className }>{ props.emptyText }</Text> : null;
+    return (
+      <>
+        { props.showActionBarIfEmpty && props.actionBar }
+        { props.emptyText && <Text className={ props.className }>{ props.emptyText }</Text> }
+      </>
+    );
   }
 
   return (
diff --git a/ui/shared/DeleteModal.tsx b/ui/shared/DeleteModal.tsx
index 67f055e2d4..88c6beaa20 100644
--- a/ui/shared/DeleteModal.tsx
+++ b/ui/shared/DeleteModal.tsx
@@ -19,10 +19,10 @@ type Props = {
   isOpen: boolean;
   onClose: () => void;
   title: string;
-  renderContent: () => JSX.Element;
+  renderContent: () => React.JSX.Element;
   mutationFn: () => Promise<unknown>;
   onSuccess: () => Promise<void>;
-}
+};
 
 const DeleteModal: React.FC<Props> = ({
   isOpen,
@@ -39,7 +39,7 @@ const DeleteModal: React.FC<Props> = ({
     onClose();
   }, [ onClose, setAlertVisible ]);
 
-  const mutation = useMutation({
+  const { mutate, isPending } = useMutation({
     mutationFn,
     onSuccess: async() => {
       onSuccess();
@@ -52,8 +52,8 @@ const DeleteModal: React.FC<Props> = ({
 
   const onDeleteClick = useCallback(() => {
     setAlertVisible(false);
-    mutation.mutate();
-  }, [ setAlertVisible, mutation ]);
+    mutate();
+  }, [ setAlertVisible, mutate ]);
 
   const isMobile = useIsMobile();
 
@@ -71,11 +71,11 @@ const DeleteModal: React.FC<Props> = ({
           <Button
             size="lg"
             onClick={ onDeleteClick }
-            isLoading={ mutation.isPending }
+            isLoading={ isPending }
             // FIXME: chackra's button is disabled when isLoading
             isDisabled={ false }
           >
-              Delete
+            Delete
           </Button>
         </ModalFooter>
       </ModalContent>
diff --git a/ui/shared/DetailsActionsWrapper.tsx b/ui/shared/DetailsActionsWrapper.tsx
new file mode 100644
index 0000000000..224c7717c2
--- /dev/null
+++ b/ui/shared/DetailsActionsWrapper.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+
+export const TX_ACTIONS_BLOCK_ID = 'tx-actions';
+
+type Props = {
+  children: React.ReactNode;
+  isLoading?: boolean;
+  type: 'tx' | 'user_op';
+};
+
+const DetailsActionsWrapper = ({ children, isLoading, type }: Props) => {
+  const [ hasScroll, setHasScroll ] = React.useState(false);
+
+  return (
+    <>
+      <DetailsInfoItem.Label
+        id={ TX_ACTIONS_BLOCK_ID }
+        hint={ `Highlighted events of the ${ type === 'tx' ? 'transaction' : 'user operation' }` }
+        isLoading={ isLoading }
+        hasScroll={ hasScroll }
+      >
+        <span>{ `${ type === 'tx' ? 'Transaction' : 'User operation' } action` }</span>
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.ValueWithScroll
+        gradientHeight={ 48 }
+        onScrollVisibilityChange={ setHasScroll }
+        alignItems="stretch"
+        rowGap={ 5 }
+        w="100%"
+        maxH="200px"
+      >
+        { children }
+      </DetailsInfoItem.ValueWithScroll>
+
+    </>
+  );
+};
+
+export default React.memo(DetailsActionsWrapper);
diff --git a/ui/shared/DetailsInfoItem.tsx b/ui/shared/DetailsInfoItem.tsx
index 4c4f3ae8d9..bae00ec3ad 100644
--- a/ui/shared/DetailsInfoItem.tsx
+++ b/ui/shared/DetailsInfoItem.tsx
@@ -1,70 +1,87 @@
-import { GridItem, Flex, Text, Skeleton } from "@chakra-ui/react";
-import type { HTMLChakraProps } from "@chakra-ui/system";
-import React from "react";
+import { chakra, GridItem, Flex, Text, Skeleton } from '@chakra-ui/react';
+import React from 'react';
 
-import Hint from "ui/shared/Hint";
+import * as ContainerWithScrollY from 'ui/shared/ContainerWithScrollY';
+import Hint from 'ui/shared/Hint';
+import HintPopover from 'ui/shared/HintPopover';
 
-interface Props extends Omit<HTMLChakraProps<"div">, "title"> {
-  title: React.ReactNode;
-  hint?: string;
+const LabelScrollText = () => (
+  <Text fontWeight={ 500 } variant="secondary" fontSize="xs" className="note" align="right">
+    Scroll to see more
+  </Text>
+);
+
+interface LabelProps {
+  hint?: React.ReactNode;
   children: React.ReactNode;
-  note?: string;
   isLoading?: boolean;
+  className?: string;
+  id?: string;
+  hasScroll?: boolean;
+  type?: 'tooltip' | 'popover';
 }
 
-const DetailsInfoItem = ({
-  title,
-  hint,
-  note,
-  children,
-  id,
-  isLoading,
-  ...styles
-}: Props) => {
+const Label = chakra(({ hint, children, isLoading, id, className, hasScroll, type }: LabelProps) => {
   return (
-    <>
-      <GridItem
-        py={{ base: 1, lg: 2 }}
-        id={ id }
-        lineHeight={ 5 }
-        { ...styles }
-        _notFirst={{ mt: { base: 3, lg: 0 } }}
-      >
-        <Flex columnGap={ 2 } alignItems="flex-start">
-          { hint && <Hint label={ hint } isLoading={ isLoading }/> }
-          <Skeleton isLoaded={ !isLoading }>
-            <Text fontWeight={{ base: 700, lg: 500 }}>
-              { title }
-              { note && (
-                <Text
-                  fontWeight={ 500 }
-                  variant="secondary"
-                  fontSize="xs"
-                  className="note"
-                  align="right"
-                >
-                  { note }
-                </Text>
-              ) }
-            </Text>
-          </Skeleton>
-        </Flex>
-      </GridItem>
-      <GridItem
-        display="flex"
-        alignItems="center"
-        flexWrap="wrap"
-        rowGap={ 3 }
-        pl={{ base: 7, lg: 0 }}
-        py={{ base: 1, lg: 2 }}
-        lineHeight={ 5 }
-        whiteSpace="nowrap"
-        { ...styles }
+    <GridItem
+      id={ id }
+      className={ className }
+      py={ 1 }
+      lineHeight={{ base: 5, lg: 6 }}
+      _notFirst={{ mt: { base: 3, lg: 0 } }}
+    >
+      <Flex columnGap={ 2 } alignItems="flex-start">
+        { hint && (type === 'popover' ?
+          <HintPopover label={ hint } isLoading={ isLoading } my={{ lg: '2px' }}/> :
+          <Hint label={ hint } isLoading={ isLoading } my={{ lg: '2px' }}/>) }
+        <Skeleton isLoaded={ !isLoading } fontWeight={{ base: 700, lg: 500 }}>
+          { children }
+          { hasScroll && <LabelScrollText/> }
+        </Skeleton>
+      </Flex>
+    </GridItem>
+  );
+});
+
+interface ValueProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const Value = chakra(({ children, className }: ValueProps) => {
+  return (
+    <GridItem
+      className={ className }
+      display="flex"
+      alignItems="center"
+      flexWrap="wrap"
+      rowGap={ 3 }
+      pl={{ base: 7, lg: 0 }}
+      py={ 1 }
+      lineHeight={{ base: 5, lg: 6 }}
+      whiteSpace="nowrap"
+    >
+      { children }
+    </GridItem>
+  );
+});
+
+const ValueWithScroll = chakra(({ children, gradientHeight, onScrollVisibilityChange, className }: ContainerWithScrollY.Props) => {
+  return (
+    <Value position="relative">
+      <ContainerWithScrollY.default
+        className={ className }
+        gradientHeight={ gradientHeight }
+        onScrollVisibilityChange={ onScrollVisibilityChange }
       >
         { children }
-      </GridItem>
-    </>
+      </ContainerWithScrollY.default>
+    </Value>
   );
-};
+});
 
-export default DetailsInfoItem;
+export {
+  Label,
+  Value,
+  ValueWithScroll,
+};
diff --git a/ui/shared/DetailsInfoItemDivider.tsx b/ui/shared/DetailsInfoItemDivider.tsx
index 22c5b456e0..45628eee1b 100644
--- a/ui/shared/DetailsInfoItemDivider.tsx
+++ b/ui/shared/DetailsInfoItemDivider.tsx
@@ -1,10 +1,19 @@
-import { GridItem } from '@chakra-ui/react';
+import type { ResponsiveValue } from '@chakra-ui/react';
+import { GridItem, chakra } from '@chakra-ui/react';
 import React from 'react';
 
-const DetailsInfoItemDivider = () => {
+interface Props {
+  className?: string;
+  id?: string;
+  colSpan?: ResponsiveValue<number | 'auto'>;
+}
+
+const DetailsInfoItemDivider = ({ className, id, colSpan }: Props) => {
   return (
     <GridItem
-      colSpan={{ base: undefined, lg: 2 }}
+      id={ id }
+      className={ className }
+      colSpan={ colSpan || { base: undefined, lg: 2 } }
       mt={{ base: 2, lg: 3 }}
       mb={{ base: 0, lg: 3 }}
       borderBottom="1px solid"
@@ -13,4 +22,4 @@ const DetailsInfoItemDivider = () => {
   );
 };
 
-export default DetailsInfoItemDivider;
+export default chakra(DetailsInfoItemDivider);
diff --git a/ui/shared/DetailsSponsoredItem.tsx b/ui/shared/DetailsSponsoredItem.tsx
index 59fe6bc352..a53273f214 100644
--- a/ui/shared/DetailsSponsoredItem.tsx
+++ b/ui/shared/DetailsSponsoredItem.tsx
@@ -5,7 +5,7 @@ import config from 'configs/app';
 import * as cookies from 'lib/cookies';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AdBanner from 'ui/shared/ad/AdBanner';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 
 const feature = config.features.adsBanner;
 
@@ -17,7 +17,7 @@ const DetailsSponsoredItem = ({ isLoading }: Props) => {
   const isMobile = useIsMobile();
   const hasAdblockCookie = cookies.get(cookies.NAMES.ADBLOCK_DETECTED);
 
-  if (!feature.isEnabled || hasAdblockCookie) {
+  if (!feature.isEnabled || hasAdblockCookie === 'true') {
     return null;
   }
 
@@ -30,13 +30,17 @@ const DetailsSponsoredItem = ({ isLoading }: Props) => {
   }
 
   return (
-    <DetailsInfoItem
-      title="Sponsored"
-      hint="Sponsored banner advertisement"
-      isLoading={ isLoading }
-    >
-      <AdBanner isLoading={ isLoading }/>
-    </DetailsInfoItem>
+    <>
+      <DetailsInfoItem.Label
+        hint="Sponsored banner advertisement"
+        isLoading={ isLoading }
+      >
+        Sponsored
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <AdBanner isLoading={ isLoading }/>
+      </DetailsInfoItem.Value>
+    </>
   );
 };
 
diff --git a/ui/shared/DetailsTimestamp.tsx b/ui/shared/DetailsTimestamp.tsx
index 27e0217e4e..db1ca4e1ef 100644
--- a/ui/shared/DetailsTimestamp.tsx
+++ b/ui/shared/DetailsTimestamp.tsx
@@ -9,7 +9,7 @@ type Props = {
   // should be string, will be fixed on the back-end
   timestamp: string | number;
   isLoading?: boolean;
-}
+};
 
 const DetailsTimestamp = ({ timestamp, isLoading }: Props) => {
   return (
diff --git a/ui/shared/EmptySearchResult.tsx b/ui/shared/EmptySearchResult.tsx
index ed6e71875d..1e404c61cc 100644
--- a/ui/shared/EmptySearchResult.tsx
+++ b/ui/shared/EmptySearchResult.tsx
@@ -1,10 +1,13 @@
-import { Box, Heading, Text } from '@chakra-ui/react';
+import { Box, Heading, Icon } from '@chakra-ui/react';
 import React from 'react';
 
-import IconSvg from 'ui/shared/IconSvg';
+// This icon doesn't work properly when it is in the sprite
+// Probably because of radial gradient
+// eslint-disable-next-line no-restricted-imports
+import emptySearchResultIcon from 'icons/empty_search_result.svg';
 
 interface Props {
-  text: string | JSX.Element;
+  text: string | React.JSX.Element;
 }
 
 const EmptySearchResult = ({ text }: Props) => {
@@ -13,29 +16,23 @@ const EmptySearchResult = ({ text }: Props) => {
       display="flex"
       flexDirection="column"
       alignItems="center"
+      justifyContent="center"
+      mt="50px"
     >
-      <IconSvg
-        name="empty_search_result"
-        boxSize={ 60 }
-        display="block"
+      <Icon
+        as={ emptySearchResultIcon }
+        w={{ base: '160px', sm: '240px' }}
+        h="auto"
+        mb={{ base: 4, sm: 6 }}
       />
 
-      <Heading
-        as="h3"
-        marginBottom={ 2 }
-        fontSize={{ base: '2xl', sm: '3xl' }}
-        fontWeight="semibold"
-      >
+      <Heading as="h4" size="sm" mb={ 2 }>
         No results
       </Heading>
 
-      <Text
-        fontSize={{ base: 'sm' }}
-        variant="secondary"
-        align="center"
-      >
+      <Box fontSize={{ base: 'sm', sm: 'md' }} textAlign="center">
         { text }
-      </Text>
+      </Box>
     </Box>
   );
 };
diff --git a/ui/shared/EntityTags.tsx b/ui/shared/EntityTags.tsx
deleted file mode 100644
index 72da69d3ff..0000000000
--- a/ui/shared/EntityTags.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import type { ThemingProps } from '@chakra-ui/react';
-import { Flex, chakra, useDisclosure, Popover, PopoverTrigger, PopoverContent, PopoverBody } from '@chakra-ui/react';
-import React from 'react';
-
-import type { UserTags } from 'types/api/addressParams';
-
-import useIsMobile from 'lib/hooks/useIsMobile';
-import Tag from 'ui/shared/chakra/Tag';
-
-interface TagData {
-  label: string;
-  display_name: string;
-  colorScheme?: ThemingProps<'Tag'>['colorScheme'];
-  variant?: ThemingProps<'Tag'>['variant'];
-}
-
-interface Props {
-  className?: string;
-  data?: UserTags;
-  isLoading?: boolean;
-  tagsBefore?: Array<TagData | undefined>;
-  tagsAfter?: Array<TagData | undefined>;
-  contentAfter?: React.ReactNode;
-}
-
-const EntityTags = ({ className, data, tagsBefore = [], tagsAfter = [], isLoading, contentAfter }: Props) => {
-  const isMobile = useIsMobile();
-  const { isOpen, onToggle, onClose } = useDisclosure();
-
-  const tags: Array<TagData> = [
-    ...tagsBefore,
-    ...(data?.private_tags || []),
-    ...(data?.public_tags || []),
-    ...(data?.watchlist_names || []),
-    ...tagsAfter,
-  ]
-    .filter(Boolean);
-
-  if (tags.length === 0 && !contentAfter) {
-    return null;
-  }
-
-  const content = (() => {
-    if (isMobile && tags.length > 2) {
-      return (
-        <>
-          {
-            tags
-              .slice(0, 2)
-              .map((tag) => (
-                <Tag
-                  key={ tag.label }
-                  isLoading={ isLoading }
-                  isTruncated
-                  maxW={{ base: '115px', lg: 'initial' }}
-                  colorScheme={ 'colorScheme' in tag ? tag.colorScheme : 'gray' }
-                  variant={ 'variant' in tag ? tag.variant : 'subtle' }
-                >
-                  { tag.display_name }
-                </Tag>
-              ))
-          }
-          <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
-            <PopoverTrigger>
-              <Tag onClick={ onToggle }>+{ tags.length - 1 }</Tag>
-            </PopoverTrigger>
-            <PopoverContent w="240px">
-              <PopoverBody >
-                <Flex columnGap={ 2 } rowGap={ 2 } flexWrap="wrap">
-                  {
-                    tags
-                      .slice(2)
-                      .map((tag) => (
-                        <Tag
-                          key={ tag.label }
-                          colorScheme={ 'colorScheme' in tag ? tag.colorScheme : 'gray' }
-                          variant={ 'variant' in tag ? tag.variant : 'subtle' }
-                        >
-                          { tag.display_name }
-                        </Tag>
-                      ))
-                  }
-                </Flex>
-              </PopoverBody>
-            </PopoverContent>
-          </Popover>
-        </>
-      );
-    }
-
-    return tags.map((tag) => (
-      <Tag
-        key={ tag.label }
-        isLoading={ isLoading }
-        isTruncated
-        maxW={{ base: '115px', lg: 'initial' }}
-        colorScheme={ 'colorScheme' in tag ? tag.colorScheme : 'gray' }
-        variant={ 'variant' in tag ? tag.variant : 'subtle' }
-      >
-        { tag.display_name }
-      </Tag>
-    ));
-  })();
-
-  return (
-    <Flex className={ className } columnGap={ 2 } rowGap={ 2 } flexWrap="wrap" alignItems="center" flexGrow={ 1 }>
-      { content }
-      { contentAfter }
-    </Flex>
-  );
-};
-
-export default React.memo(chakra(EntityTags));
diff --git a/ui/shared/EntityTags/EntityTag.pw.tsx b/ui/shared/EntityTags/EntityTag.pw.tsx
new file mode 100644
index 0000000000..1e4f98a28f
--- /dev/null
+++ b/ui/shared/EntityTags/EntityTag.pw.tsx
@@ -0,0 +1,42 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import * as addressMetadataMock from 'mocks/metadata/address';
+import { test, expect } from 'playwright/lib';
+
+import EntityTag from './EntityTag';
+
+test.use({ viewport: { width: 400, height: 300 } });
+
+test('custom name tag +@dark-mode', async({ render }) => {
+  const component = await render(<Box w="200px"><EntityTag data={ addressMetadataMock.customNameTag }/></Box>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('warpcast tag', async({ render }) => {
+  const component = await render(<Box w="200px"><EntityTag data={ addressMetadataMock.warpcastTag }/></Box>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('generic tag +@dark-mode', async({ render }) => {
+  const component = await render(<Box w="200px"><EntityTag data={ addressMetadataMock.genericTag }/></Box>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('protocol tag +@dark-mode', async({ render }) => {
+  const component = await render(<Box w="200px"><EntityTag data={ addressMetadataMock.protocolTag }/></Box>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('tag with link and long name +@dark-mode', async({ render }) => {
+  const component = await render(<EntityTag data={ addressMetadataMock.infoTagWithLink } maxW="300px"/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('tag with tooltip +@dark-mode', async({ render, page, mockAssetResponse }) => {
+  await mockAssetResponse(addressMetadataMock.tagWithTooltip.meta?.tooltipIcon as string, './playwright/mocks/image_s.jpg');
+  const component = await render(<EntityTag data={ addressMetadataMock.tagWithTooltip }/>);
+  await component.getByText('BlockscoutHeroes').hover();
+  await page.getByText('Blockscout team member').waitFor({ state: 'visible' });
+  await expect(page).toHaveScreenshot();
+});
diff --git a/ui/shared/EntityTags/EntityTag.tsx b/ui/shared/EntityTags/EntityTag.tsx
new file mode 100644
index 0000000000..477acc087d
--- /dev/null
+++ b/ui/shared/EntityTags/EntityTag.tsx
@@ -0,0 +1,76 @@
+import type { ResponsiveValue } from '@chakra-ui/react';
+import { chakra, Image, Skeleton, Tag } from '@chakra-ui/react';
+import React from 'react';
+
+import type { EntityTag as TEntityTag } from './types';
+
+import IconSvg from 'ui/shared/IconSvg';
+import TruncatedValue from 'ui/shared/TruncatedValue';
+
+import EntityTagLink from './EntityTagLink';
+import EntityTagPopover from './EntityTagPopover';
+import { getTagLinkParams } from './utils';
+
+interface Props {
+  data: TEntityTag;
+  isLoading?: boolean;
+  maxW?: ResponsiveValue<string>;
+  noLink?: boolean;
+}
+
+const EntityTag = ({ data, isLoading, maxW, noLink }: Props) => {
+
+  if (isLoading) {
+    return <Skeleton borderRadius="sm" w="100px" h="24px"/>;
+  }
+
+  const hasLink = !noLink && Boolean(getTagLinkParams(data));
+  const iconColor = data.meta?.textColor ?? 'gray.400';
+
+  const name = (() => {
+    if (data.meta?.warpcastHandle) {
+      return `@${ data.meta.warpcastHandle }`;
+    }
+
+    return data.name;
+  })();
+
+  const icon = (() => {
+    if (data.meta?.tagIcon) {
+      return <Image boxSize={ 3 } mr={ 1 } flexShrink={ 0 } src={ data.meta.tagIcon } alt={ `${ data.name } icon` }/>;
+    }
+
+    if (data.tagType === 'name') {
+      return <IconSvg name="publictags_slim" boxSize={ 3 } mr={ 1 } flexShrink={ 0 } color={ iconColor }/>;
+    }
+
+    if (data.tagType === 'protocol' || data.tagType === 'generic') {
+      return <chakra.span color={ iconColor } whiteSpace="pre"># </chakra.span>;
+    }
+
+    return null;
+  })();
+
+  return (
+    <EntityTagPopover data={ data }>
+      <Tag
+        display="flex"
+        alignItems="center"
+        minW={ 0 }
+        w="fit-content"
+        maxW={ maxW }
+        bg={ data.meta?.bgColor }
+        color={ data.meta?.textColor }
+        colorScheme={ hasLink ? 'gray-blue' : 'gray' }
+        _hover={ hasLink ? { opacity: 0.76 } : undefined }
+      >
+        <EntityTagLink data={ data } noLink={ noLink }>
+          { icon }
+          <TruncatedValue value={ name } tooltipPlacement="top"/>
+        </EntityTagLink>
+      </Tag>
+    </EntityTagPopover>
+  );
+};
+
+export default React.memo(EntityTag);
diff --git a/ui/shared/EntityTags/EntityTagLink.tsx b/ui/shared/EntityTags/EntityTagLink.tsx
new file mode 100644
index 0000000000..e061825286
--- /dev/null
+++ b/ui/shared/EntityTags/EntityTagLink.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+
+import type { EntityTag } from './types';
+
+import * as mixpanel from 'lib/mixpanel/index';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+import { getTagLinkParams } from './utils';
+
+interface Props {
+  data: EntityTag;
+  children: React.ReactNode;
+  noLink?: boolean;
+}
+
+const EntityTagLink = ({ data, children, noLink }: Props) => {
+
+  const linkParams = !noLink ? getTagLinkParams(data) : undefined;
+
+  const handleLinkClick = React.useCallback(() => {
+    if (!linkParams?.href) {
+      return;
+    }
+
+    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, {
+      Type: 'Address tag',
+      Info: data.slug,
+      URL: linkParams.href,
+    });
+  }, [ linkParams?.href, data.slug ]);
+
+  const linkProps = {
+    color: 'inherit',
+    display: 'inline-flex',
+    overflow: 'hidden',
+    _hover: { textDecor: 'none', color: 'inherit' },
+    onClick: handleLinkClick,
+  };
+
+  if (linkParams?.type === 'internal') {
+    return (
+      <LinkInternal
+        { ...linkProps }
+        href={ linkParams.href }
+      >
+        { children }
+      </LinkInternal>
+    );
+  }
+
+  if (linkParams?.type === 'external') {
+    return (
+      <LinkExternal
+        { ...linkProps }
+        href={ linkParams.href }
+        iconColor={ data.meta?.textColor }
+      >
+        { children }
+      </LinkExternal>
+    );
+  }
+
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{ children }</>;
+};
+
+export default React.memo(EntityTagLink);
diff --git a/ui/shared/EntityTags/EntityTagPopover.tsx b/ui/shared/EntityTags/EntityTagPopover.tsx
new file mode 100644
index 0000000000..f25531e9e8
--- /dev/null
+++ b/ui/shared/EntityTags/EntityTagPopover.tsx
@@ -0,0 +1,62 @@
+import { chakra, Image, Flex, PopoverArrow, PopoverBody, PopoverContent, PopoverTrigger, useColorModeValue, DarkMode } from '@chakra-ui/react';
+import React from 'react';
+
+import type { EntityTag } from './types';
+
+import makePrettyLink from 'lib/makePrettyLink';
+import * as mixpanel from 'lib/mixpanel/index';
+import Popover from 'ui/shared/chakra/Popover';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+
+interface Props {
+  data: EntityTag;
+  children: React.ReactNode;
+}
+
+const EntityTagPopover = ({ data, children }: Props) => {
+  const bgColor = useColorModeValue('gray.700', 'gray.900');
+  const link = makePrettyLink(data.meta?.tooltipUrl);
+  const hasPopover = Boolean(data.meta?.tooltipIcon || data.meta?.tooltipTitle || data.meta?.tooltipDescription || data.meta?.tooltipUrl);
+
+  const handleLinkClick = React.useCallback(() => {
+    if (!data.meta?.tooltipUrl) {
+      return;
+    }
+
+    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, {
+      Type: 'Address tag',
+      Info: data.slug,
+      URL: data.meta.tooltipUrl,
+    });
+  }, [ data.meta?.tooltipUrl, data.slug ]);
+
+  if (!hasPopover) {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <>{ children }</>;
+  }
+
+  return (
+    <Popover trigger="hover" isLazy gutter={ 8 }>
+      <PopoverTrigger>
+        { children }
+      </PopoverTrigger>
+      <PopoverContent bgColor={ bgColor } borderRadius="sm" maxW="280px" w="fit-content">
+        <PopoverArrow bgColor={ bgColor }/>
+        <DarkMode>
+          <PopoverBody color="white" p={ 2 } fontSize="sm" display="flex" flexDir="column" rowGap={ 2 }>
+            { (data.meta?.tooltipIcon || data.meta?.tooltipTitle) && (
+              <Flex columnGap={ 3 } alignItems="center">
+                { data.meta?.tooltipIcon && <Image src={ data.meta.tooltipIcon } boxSize="30px" alt={ `${ data.name } tag logo` }/> }
+                { data.meta?.tooltipTitle && <chakra.span fontWeight="600">{ data.meta.tooltipTitle }</chakra.span> }
+              </Flex>
+            ) }
+            { data.meta?.tooltipDescription && <chakra.span>{ data.meta.tooltipDescription }</chakra.span> }
+            { link && <LinkExternal href={ link.url } onClick={ handleLinkClick }>{ link.domain }</LinkExternal> }
+          </PopoverBody>
+        </DarkMode>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default React.memo(EntityTagPopover);
diff --git a/ui/shared/EntityTags/EntityTags.pw.tsx b/ui/shared/EntityTags/EntityTags.pw.tsx
new file mode 100644
index 0000000000..a5d3cc138c
--- /dev/null
+++ b/ui/shared/EntityTags/EntityTags.pw.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import * as addressMetadataMock from 'mocks/metadata/address';
+import { test, expect } from 'playwright/lib';
+
+import EntityTags from './EntityTags';
+
+test('mixed name length +@mobile', async({ render }) => {
+  const data = [
+    addressMetadataMock.protocolTagWithMeta,
+    addressMetadataMock.infoTagWithLink,
+    addressMetadataMock.genericTag,
+    addressMetadataMock.tagWithTooltip,
+  ];
+  const component = await render(<EntityTags tags={ data }/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('one tag with long name +@mobile -@default', async({ render }) => {
+  const data = [
+    addressMetadataMock.infoTagWithLink,
+  ];
+  const component = await render(<EntityTags tags={ data }/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/shared/EntityTags/EntityTags.tsx b/ui/shared/EntityTags/EntityTags.tsx
new file mode 100644
index 0000000000..c7f4370c4d
--- /dev/null
+++ b/ui/shared/EntityTags/EntityTags.tsx
@@ -0,0 +1,75 @@
+import { Box, Flex, PopoverBody, PopoverContent, PopoverTrigger, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { EntityTag as TEntityTag } from './types';
+
+import config from 'configs/app';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import Popover from 'ui/shared/chakra/Popover';
+import Tag from 'ui/shared/chakra/Tag';
+
+import EntityTag from './EntityTag';
+
+interface Props {
+  className?: string;
+  tags: Array<TEntityTag>;
+  isLoading?: boolean;
+}
+
+const EntityTags = ({ tags, className, isLoading }: Props) => {
+  const isMobile = useIsMobile();
+  const visibleNum = isMobile ? 2 : 3;
+
+  const metaSuitesPlaceholder = config.features.metasuites.isEnabled ?
+    <Box display="none" id="meta-suites__address-tag" data-ready={ !isLoading }/> :
+    null;
+
+  if (tags.length === 0) {
+    return metaSuitesPlaceholder;
+  }
+
+  const content = (() => {
+    const tagMaxW = {
+      base: tags.length === 1 ? '100%' : '60%',
+      lg: '300px',
+    };
+
+    if (tags.length > visibleNum) {
+      return (
+        <>
+          { tags.slice(0, visibleNum).map((tag) => <EntityTag key={ tag.slug } data={ tag } isLoading={ isLoading } maxW={ tagMaxW }/>) }
+          { metaSuitesPlaceholder }
+          <Popover trigger="click" placement="bottom-start" isLazy>
+            <PopoverTrigger>
+              <Tag isLoading={ isLoading } cursor="pointer" as="button" _hover={{ color: 'link_hovered' }}>
+                +{ tags.length - visibleNum }
+              </Tag>
+            </PopoverTrigger>
+            <PopoverContent maxW="300px" w="auto">
+              <PopoverBody >
+                <Flex columnGap={ 2 } rowGap={ 2 } flexWrap="wrap">
+                  { tags.slice(visibleNum).map((tag) => <EntityTag key={ tag.slug } data={ tag }/>) }
+                </Flex>
+              </PopoverBody>
+            </PopoverContent>
+          </Popover>
+        </>
+      );
+    }
+
+    return (
+      <>
+        { tags.map((tag) => <EntityTag key={ tag.slug } data={ tag } isLoading={ isLoading } maxW={ tagMaxW }/>) }
+        { metaSuitesPlaceholder }
+      </>
+    );
+  })();
+
+  return (
+    <Flex className={ className } columnGap={ 2 } rowGap={ 2 } flexWrap="nowrap" alignItems="center" flexGrow={ 1 } maxW="100%">
+      { content }
+    </Flex>
+  );
+};
+
+export default React.memo(chakra(EntityTags));
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_custom-name-tag-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_custom-name-tag-dark-mode-1.png
new file mode 100644
index 0000000000..71b46c4a6c
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_custom-name-tag-dark-mode-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_generic-tag-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_generic-tag-dark-mode-1.png
new file mode 100644
index 0000000000..b2e1be029d
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_generic-tag-dark-mode-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_protocol-tag-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_protocol-tag-dark-mode-1.png
new file mode 100644
index 0000000000..3c3968cd5f
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_protocol-tag-dark-mode-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_tag-with-link-and-long-name-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_tag-with-link-and-long-name-dark-mode-1.png
new file mode 100644
index 0000000000..6ef28030bc
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_tag-with-link-and-long-name-dark-mode-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_tag-with-tooltip-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_tag-with-tooltip-dark-mode-1.png
new file mode 100644
index 0000000000..1cfc680787
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_tag-with-tooltip-dark-mode-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_custom-name-tag-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_custom-name-tag-dark-mode-1.png
new file mode 100644
index 0000000000..fe87b8fe02
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_custom-name-tag-dark-mode-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_generic-tag-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_generic-tag-dark-mode-1.png
new file mode 100644
index 0000000000..1319106df9
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_generic-tag-dark-mode-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_protocol-tag-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_protocol-tag-dark-mode-1.png
new file mode 100644
index 0000000000..c7b90b0ccb
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_protocol-tag-dark-mode-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_tag-with-link-and-long-name-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_tag-with-link-and-long-name-dark-mode-1.png
new file mode 100644
index 0000000000..f9cd351e90
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_tag-with-link-and-long-name-dark-mode-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_tag-with-tooltip-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_tag-with-tooltip-dark-mode-1.png
new file mode 100644
index 0000000000..c7d1da7839
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_tag-with-tooltip-dark-mode-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_warpcast-tag-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_warpcast-tag-1.png
new file mode 100644
index 0000000000..e1f9c3b44f
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_warpcast-tag-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTags.pw.tsx_default_mixed-name-length-mobile-1.png b/ui/shared/EntityTags/__screenshots__/EntityTags.pw.tsx_default_mixed-name-length-mobile-1.png
new file mode 100644
index 0000000000..252812021a
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTags.pw.tsx_default_mixed-name-length-mobile-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTags.pw.tsx_mobile_mixed-name-length-mobile-1.png b/ui/shared/EntityTags/__screenshots__/EntityTags.pw.tsx_mobile_mixed-name-length-mobile-1.png
new file mode 100644
index 0000000000..fb43de79fa
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTags.pw.tsx_mobile_mixed-name-length-mobile-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTags.pw.tsx_mobile_one-tag-with-long-name-mobile---default-1.png b/ui/shared/EntityTags/__screenshots__/EntityTags.pw.tsx_mobile_one-tag-with-long-name-mobile---default-1.png
new file mode 100644
index 0000000000..eceebfad59
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTags.pw.tsx_mobile_one-tag-with-long-name-mobile---default-1.png differ
diff --git a/ui/shared/EntityTags/formatUserTags.ts b/ui/shared/EntityTags/formatUserTags.ts
new file mode 100644
index 0000000000..f644647ae0
--- /dev/null
+++ b/ui/shared/EntityTags/formatUserTags.ts
@@ -0,0 +1,9 @@
+import type { EntityTag } from './types';
+import type { UserTags } from 'types/api/addressParams';
+
+export default function formatUserTags(data: UserTags | undefined): Array<EntityTag> {
+  return [
+    ...(data?.private_tags || []).map((tag) => ({ slug: tag.label, name: tag.display_name, tagType: 'private_tag' as const, ordinal: 1_000 })),
+    ...(data?.watchlist_names || []).map((tag) => ({ slug: tag.label, name: tag.display_name, tagType: 'watchlist' as const, ordinal: 1_000 })),
+  ];
+}
diff --git a/ui/shared/EntityTags/sortEntityTags.ts b/ui/shared/EntityTags/sortEntityTags.ts
new file mode 100644
index 0000000000..8227829f5d
--- /dev/null
+++ b/ui/shared/EntityTags/sortEntityTags.ts
@@ -0,0 +1,13 @@
+import type { EntityTag } from './types';
+
+export default function sortEntityTags(tagA: EntityTag, tagB: EntityTag): number {
+  if (tagA.ordinal < tagB.ordinal) {
+    return 1;
+  }
+
+  if (tagA.ordinal > tagB.ordinal) {
+    return -1;
+  }
+
+  return 0;
+}
diff --git a/ui/shared/EntityTags/types.ts b/ui/shared/EntityTags/types.ts
new file mode 100644
index 0000000000..47a444f0ad
--- /dev/null
+++ b/ui/shared/EntityTags/types.ts
@@ -0,0 +1,9 @@
+import type { AddressMetadataTagType } from 'types/api/addressMetadata';
+import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
+
+export type EntityTagType = AddressMetadataTagType | 'custom' | 'watchlist' | 'private_tag';
+
+export interface EntityTag extends Pick<AddressMetadataTagFormatted, 'slug' | 'name' | 'ordinal'> {
+  tagType: EntityTagType;
+  meta?: AddressMetadataTagFormatted['meta'];
+}
diff --git a/ui/shared/EntityTags/utils.ts b/ui/shared/EntityTags/utils.ts
new file mode 100644
index 0000000000..4454d87872
--- /dev/null
+++ b/ui/shared/EntityTags/utils.ts
@@ -0,0 +1,26 @@
+import type { EntityTag } from './types';
+
+import { route } from 'nextjs-routes';
+
+export function getTagLinkParams(data: EntityTag): { type: 'external' | 'internal'; href: string } | undefined {
+  if (data.meta?.warpcastHandle) {
+    return {
+      type: 'external',
+      href: `https://warpcast.com/${ data.meta.warpcastHandle }`,
+    };
+  }
+
+  if (data.meta?.tagUrl) {
+    return {
+      type: 'external',
+      href: data.meta.tagUrl,
+    };
+  }
+
+  if (data.tagType === 'generic' || data.tagType === 'protocol') {
+    return {
+      type: 'internal',
+      href: route({ pathname: '/accounts/label/[slug]', query: { slug: data.slug, tagType: data.tagType, tagName: data.name } }),
+    };
+  }
+}
diff --git a/ui/shared/EpochRewardTypeTag.tsx b/ui/shared/EpochRewardTypeTag.tsx
new file mode 100644
index 0000000000..8c639fba23
--- /dev/null
+++ b/ui/shared/EpochRewardTypeTag.tsx
@@ -0,0 +1,50 @@
+import { Tooltip } from '@chakra-ui/react';
+import React from 'react';
+
+import type { EpochRewardsType } from 'types/api/block';
+
+import Tag from 'ui/shared/chakra/Tag';
+
+type Props = {
+  type: EpochRewardsType;
+  isLoading?: boolean;
+};
+
+const TYPE_TAGS: Record<EpochRewardsType, { text: string; label: string; color: string }> = {
+  group: {
+    text: 'Validator group rewards',
+    // eslint-disable-next-line max-len
+    label: 'Reward given to a validator group. The address being viewed is the group\'s address; the associated address is the validator\'s address on whose behalf the reward was paid.',
+    color: 'teal',
+  },
+  validator: {
+    text: 'Validator rewards',
+    label: 'Reward given to a validator. The address being viewed is the validator\'s address; the associated address is the validator group\'s address.',
+    color: 'purple',
+  },
+  delegated_payment: {
+    text: 'Delegated payments',
+    // eslint-disable-next-line max-len
+    label: 'Reward portion delegated by a validator to another address. The address being viewed is the beneficiary receiving the reward; the associated address is the validator who set the delegation.',
+    color: 'blue',
+  },
+  voter: {
+    text: 'Voting rewards',
+    label: 'Reward given to a voter. The address being viewed is the voter\'s address; the associated address is the group address.',
+    color: 'yellow',
+  },
+};
+
+const EpochRewardTypeTag = ({ type, isLoading }: Props) => {
+  const { text, label, color } = TYPE_TAGS[type];
+
+  return (
+    <Tooltip label={ label } maxW="322px" textAlign="center">
+      <Tag colorScheme={ color } isLoading={ isLoading }>
+        { text }
+      </Tag>
+    </Tooltip>
+  );
+};
+
+export default React.memo(EpochRewardTypeTag);
diff --git a/ui/shared/FancySelect/FancySelect.pw.tsx b/ui/shared/FancySelect/FancySelect.pw.tsx
deleted file mode 100644
index 451f7c1431..0000000000
--- a/ui/shared/FancySelect/FancySelect.pw.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { test, expect } from '@playwright/experimental-ct-react';
-import _noop from 'lodash/noop';
-import React from 'react';
-
-import TestApp from 'playwright/TestApp';
-
-import FancySelect from './FancySelect';
-
-const OPTIONS = [
-  { value: 'v0.8.17+commit.8df45f5f', label: 'v0.8.17+commit.8df45f5f' },
-  { value: 'v0.8.16+commit.07a7930e', label: 'v0.8.16+commit.07a7930e' },
-  { value: 'v0.8.15+commit.e14f2714', label: 'v0.8.15+commit.e14f2714' },
-];
-
-test.use({ viewport: { width: 500, height: 300 } });
-
-const defaultProps = {
-  options: OPTIONS,
-  isRequired: true,
-  placeholder: 'Compiler',
-  name: 'compiler',
-  onChange: _noop,
-};
-
-[ 'md' as const, 'lg' as const ].forEach((size) => {
-  test.describe(`size ${ size } +@dark-mode`, () => {
-    test('empty', async({ mount, page }) => {
-      const component = await mount(
-        <TestApp>
-          <FancySelect
-            { ...defaultProps }
-            size={ size }
-            value={ null }
-          />
-        </TestApp>,
-      );
-
-      await expect(component).toHaveScreenshot();
-
-      await component.getByLabel(/compiler/i).focus();
-      await component.getByLabel(/compiler/i).type('1');
-      await expect(page).toHaveScreenshot();
-    });
-
-    test('filled', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <FancySelect
-            { ...defaultProps }
-            size={ size }
-            value={ OPTIONS[0] }
-          />
-        </TestApp>,
-      );
-
-      await expect(component).toHaveScreenshot();
-    });
-
-    test('error', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <FancySelect
-            { ...defaultProps }
-            size={ size }
-            value={ null }
-            error={{
-              type: 'unknown',
-              message: 'cannot be empty',
-            }}
-          />
-        </TestApp>,
-      );
-
-      await expect(component).toHaveScreenshot();
-
-      await component.getByLabel(/compiler/i).focus();
-      await component.getByLabel(/compiler/i).type('1');
-      await expect(component).toHaveScreenshot();
-    });
-
-    test('disabled', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <FancySelect
-            { ...defaultProps }
-            size={ size }
-            value={ OPTIONS[0] }
-            isDisabled
-          />
-        </TestApp>,
-      );
-
-      await expect(component).toHaveScreenshot();
-    });
-  });
-});
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-disabled-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-disabled-1.png
deleted file mode 100644
index 824a246d35..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-disabled-1.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-1.png
deleted file mode 100644
index 4d2f7c9139..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-1.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-2.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-2.png
deleted file mode 100644
index b0af0b7c9d..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-2.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-error-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-error-1.png
deleted file mode 100644
index c41d623c38..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-error-1.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-error-2.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-error-2.png
deleted file mode 100644
index e003c56003..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-error-2.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-filled-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-filled-1.png
deleted file mode 100644
index 07a9d56f47..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-filled-1.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-disabled-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-disabled-1.png
deleted file mode 100644
index bd749c0644..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-disabled-1.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-empty-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-empty-1.png
deleted file mode 100644
index 68128a7543..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-empty-1.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-empty-2.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-empty-2.png
deleted file mode 100644
index bcacccb625..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-empty-2.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-error-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-error-1.png
deleted file mode 100644
index 537ff71be1..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-error-1.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-error-2.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-error-2.png
deleted file mode 100644
index ee950f61b3..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-error-2.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-filled-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-filled-1.png
deleted file mode 100644
index 945a5faafa..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-filled-1.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-disabled-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-disabled-1.png
deleted file mode 100644
index a12ffe5ac0..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-disabled-1.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-empty-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-empty-1.png
deleted file mode 100644
index 7847b9f0f7..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-empty-1.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-empty-2.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-empty-2.png
deleted file mode 100644
index 6a0584e4c3..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-empty-2.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-error-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-error-1.png
deleted file mode 100644
index 1d67180b47..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-error-1.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-error-2.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-error-2.png
deleted file mode 100644
index 5e2301d843..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-error-2.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-filled-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-filled-1.png
deleted file mode 100644
index e1a815c308..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-filled-1.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-disabled-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-disabled-1.png
deleted file mode 100644
index 9371c78e65..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-disabled-1.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-empty-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-empty-1.png
deleted file mode 100644
index 513f1cc17c..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-empty-1.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-empty-2.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-empty-2.png
deleted file mode 100644
index e46b6beb84..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-empty-2.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-error-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-error-1.png
deleted file mode 100644
index 5bd7a31ef8..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-error-1.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-error-2.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-error-2.png
deleted file mode 100644
index 23b324e25b..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-error-2.png and /dev/null differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-filled-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-filled-1.png
deleted file mode 100644
index 5ec9eb9f3b..0000000000
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-filled-1.png and /dev/null differ
diff --git a/ui/shared/FancySelect/types.ts b/ui/shared/FancySelect/types.ts
deleted file mode 100644
index d92ad48c38..0000000000
--- a/ui/shared/FancySelect/types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface Option {
-  label: string;
-  value: string;
-}
diff --git a/ui/shared/FancySelect/utils.ts b/ui/shared/FancySelect/utils.ts
deleted file mode 100644
index ceef11a867..0000000000
--- a/ui/shared/FancySelect/utils.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import type { ColorMode } from '@chakra-ui/react';
-import type { Size, ChakraStylesConfig } from 'chakra-react-select';
-
-import type { Option } from './types';
-
-function getValueContainerStyles(size?: Size) {
-  switch (size) {
-    case 'sm':
-    case 'md': {
-      return {
-        paddingLeft: 4,
-      };
-    }
-    case 'lg': {
-      return {
-        paddingLeft: 6,
-      };
-    }
-    default: {
-      return {};
-    }
-  }
-}
-
-function getSingleValueStyles(size?: Size) {
-  switch (size) {
-    case 'sm':
-    case 'md': {
-      return {
-        top: '26px',
-      };
-    }
-    case 'lg': {
-      return {
-        top: '38px',
-      };
-    }
-    default: {
-      return {};
-    }
-  }
-}
-
-const getChakraStyles: (colorMode: ColorMode) => ChakraStylesConfig<Option> = (colorMode) => {
-  const emptyInputBorderColor = colorMode === 'dark' ? 'gray.700' : 'gray.100';
-  const filledInputBorderColor = colorMode === 'dark' ? 'gray.600' : 'gray.300';
-
-  return {
-    control: (provided, state) => ({
-      ...provided,
-      borderColor: state.hasValue ? filledInputBorderColor : emptyInputBorderColor,
-    }),
-    inputContainer: (provided) => ({
-      ...provided,
-      py: 0,
-      mx: 0,
-    }),
-    valueContainer: (provided, state) => ({
-      ...provided,
-      ...getValueContainerStyles(state.selectProps.size),
-      py: 0,
-    }),
-    singleValue: (provided, state) => ({
-      ...provided,
-      mx: 0,
-      transform: 'none',
-      ...getSingleValueStyles(state.selectProps.size),
-    }),
-  };
-};
-
-export { getChakraStyles };
diff --git a/ui/shared/FormModal.tsx b/ui/shared/FormModal.tsx
index 8ec4131cfb..62106925d9 100644
--- a/ui/shared/FormModal.tsx
+++ b/ui/shared/FormModal.tsx
@@ -18,10 +18,10 @@ interface Props<TData> {
   onClose: () => void;
   data?: TData;
   title: string;
-  text: string;
-  renderForm: () => JSX.Element;
-  isAlertVisible: boolean;
-  setAlertVisible: (isAlertVisible: boolean) => void;
+  text?: string;
+  renderForm: () => React.JSX.Element;
+  isAlertVisible?: boolean;
+  setAlertVisible?: (isAlertVisible: boolean) => void;
 }
 
 export default function FormModal<TData>({
@@ -35,7 +35,7 @@ export default function FormModal<TData>({
 }: Props<TData>) {
 
   const onModalClose = useCallback(() => {
-    setAlertVisible(false);
+    setAlertVisible && setAlertVisible(false);
     onClose();
   }, [ onClose, setAlertVisible ]);
 
diff --git a/ui/shared/GasInfoTooltipContent/GasInfoTooltipContent.tsx b/ui/shared/GasInfoTooltipContent/GasInfoTooltipContent.tsx
deleted file mode 100644
index aa7900fbd9..0000000000
--- a/ui/shared/GasInfoTooltipContent/GasInfoTooltipContent.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { DarkMode, Grid, GridItem } from '@chakra-ui/react';
-import React from 'react';
-
-import type { HomeStats } from 'types/api/stats';
-
-import dayjs from 'lib/date/dayjs';
-
-import GasInfoRow from './GasInfoRow';
-import GasInfoUpdateTimer from './GasInfoUpdateTimer';
-
-interface Props {
-  data: HomeStats;
-  dataUpdatedAt: number;
-}
-
-const GasInfoTooltipContent = ({ data, dataUpdatedAt }: Props) => {
-
-  if (!data.gas_prices) {
-    return null;
-  }
-
-  return (
-    <DarkMode>
-      <Grid templateColumns="repeat(2, max-content)" rowGap={ 2 } columnGap={ 4 } padding={ 4 } fontSize="xs" lineHeight={ 4 }>
-        { data.gas_price_updated_at && (
-          <>
-            <GridItem color="text_secondary">Last update</GridItem>
-            <GridItem color="text_secondary" display="flex" justifyContent="flex-end" columnGap={ 2 }>
-              { dayjs(data.gas_price_updated_at).format('MMM DD, HH:mm:ss') }
-              { data.gas_prices_update_in !== 0 &&
-              <GasInfoUpdateTimer key={ dataUpdatedAt } startTime={ dataUpdatedAt } duration={ data.gas_prices_update_in }/> }
-            </GridItem>
-          </>
-        ) }
-        <GasInfoRow name="Slow" info={ data.gas_prices.slow }/>
-        <GasInfoRow name="Normal" info={ data.gas_prices.average }/>
-        <GasInfoRow name="Fast" info={ data.gas_prices.fast }/>
-      </Grid>
-    </DarkMode>
-  );
-};
-
-export default React.memo(GasInfoTooltipContent);
diff --git a/ui/shared/GasInfoTooltipContent/GasInfoUpdateTimer.tsx b/ui/shared/GasInfoTooltipContent/GasInfoUpdateTimer.tsx
deleted file mode 100644
index ebaf1df753..0000000000
--- a/ui/shared/GasInfoTooltipContent/GasInfoUpdateTimer.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { CircularProgress } from '@chakra-ui/react';
-import React from 'react';
-
-import dayjs from 'lib/date/dayjs';
-
-interface Props {
-  startTime: number;
-  duration: number;
-}
-
-const getValue = (startDate: dayjs.Dayjs, duration: number) => {
-  const now = dayjs();
-  const diff = now.diff(startDate, 'ms');
-  const value = diff / duration * 100;
-
-  if (value >= 99) {
-    return 99;
-  }
-
-  return value;
-};
-
-const GasInfoUpdateTimer = ({ startTime, duration }: Props) => {
-  const [ value, setValue ] = React.useState(getValue(dayjs(startTime), duration));
-
-  React.useEffect(() => {
-    const startDate = dayjs(startTime);
-
-    const intervalId = window.setInterval(() => {
-      const nextValue = getValue(startDate, duration);
-      setValue(nextValue);
-      if (nextValue === 99) {
-        window.clearInterval(intervalId);
-      }
-    }, 100);
-
-    return () => {
-      window.clearInterval(intervalId);
-    };
-  }, [ startTime, duration ]);
-
-  return <CircularProgress value={ value } trackColor="whiteAlpha.100" size={ 4 }/>;
-};
-
-export default React.memo(GasInfoUpdateTimer);
diff --git a/ui/shared/GasUsedToTargetRatio.tsx b/ui/shared/GasUsedToTargetRatio.tsx
index 8bcecdbc35..3b80dd1582 100644
--- a/ui/shared/GasUsedToTargetRatio.tsx
+++ b/ui/shared/GasUsedToTargetRatio.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 type Props = {
   value: number;
   isLoading?: boolean;
-}
+};
 
 const GasUsedToTargetRatio = ({ value, isLoading }: Props) => {
   return (
diff --git a/ui/shared/HashStringShorten.tsx b/ui/shared/HashStringShorten.tsx
index 4084be6579..25e037d30f 100644
--- a/ui/shared/HashStringShorten.tsx
+++ b/ui/shared/HashStringShorten.tsx
@@ -7,17 +7,19 @@ import shortenString from 'lib/shortenString';
 interface Props {
   hash: string;
   isTooltipDisabled?: boolean;
+  type?: 'long' | 'short';
   as?: As;
 }
 
-const HashStringShorten = ({ hash, isTooltipDisabled, as = 'span' }: Props) => {
-  if (hash.length <= 8) {
+const HashStringShorten = ({ hash, isTooltipDisabled, as = 'span', type }: Props) => {
+  const charNumber = type === 'long' ? 16 : 8;
+  if (hash.length <= charNumber) {
     return <chakra.span as={ as }>{ hash }</chakra.span>;
   }
 
   return (
     <Tooltip label={ hash } isDisabled={ isTooltipDisabled }>
-      <chakra.span as={ as }>{ shortenString(hash) }</chakra.span>
+      <chakra.span as={ as }>{ shortenString(hash, charNumber) }</chakra.span>
     </Tooltip>
   );
 };
diff --git a/ui/shared/HashStringShortenDynamic.tsx b/ui/shared/HashStringShortenDynamic.tsx
index e73c512e4d..645b925071 100644
--- a/ui/shared/HashStringShortenDynamic.tsx
+++ b/ui/shared/HashStringShortenDynamic.tsx
@@ -95,7 +95,7 @@ const HashStringShortenDynamic = ({ hash, fontWeight = '400', isTooltipDisabled,
 
   if (isTruncated) {
     return (
-      <Tooltip label={ hash } isDisabled={ isTooltipDisabled } maxW={{ base: '100vw', lg: '400px' }}>{ content }</Tooltip>
+      <Tooltip label={ hash } isDisabled={ isTooltipDisabled } maxW={{ base: 'calc(100vw - 8px)', lg: '400px' }}>{ content }</Tooltip>
     );
   }
 
diff --git a/ui/shared/Hint.tsx b/ui/shared/Hint.tsx
index 1e4da78755..5aac2b52e5 100644
--- a/ui/shared/Hint.tsx
+++ b/ui/shared/Hint.tsx
@@ -28,14 +28,14 @@ const Hint = ({ label, className, tooltipProps, isLoading }: Props) => {
     <Tooltip
       label={ label }
       placement="top"
-      maxW="320px"
+      maxW={{ base: 'calc(100vw - 8px)', lg: '320px' }}
       isOpen={ isOpen }
       { ...tooltipProps }
     >
       <IconButton
         colorScheme="none"
         aria-label="hint"
-        icon={ <IconSvg name="info" w="100%" h="100%"/> }
+        icon={ <IconSvg name="info" w="100%" h="100%" color="icon_info" _hover={{ color: 'link_hovered' }}/> }
         boxSize={ 5 }
         variant="simple"
         display="inline-block"
diff --git a/ui/shared/HintPopover.tsx b/ui/shared/HintPopover.tsx
new file mode 100644
index 0000000000..7dde21f4fa
--- /dev/null
+++ b/ui/shared/HintPopover.tsx
@@ -0,0 +1,57 @@
+import type {
+  PopoverBodyProps,
+  PopoverContentProps,
+  PopoverProps } from '@chakra-ui/react';
+import {
+  Skeleton,
+  DarkMode,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Portal,
+  chakra,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import Popover from 'ui/shared/chakra/Popover';
+
+import IconSvg from './IconSvg';
+
+interface Props {
+  label: React.ReactNode;
+  className?: string;
+  isLoading?: boolean;
+  popoverProps?: Partial<PopoverProps>;
+  popoverContentProps?: Partial<PopoverContentProps>;
+  popoverBodyProps?: Partial<PopoverBodyProps>;
+}
+
+const HintPopover = ({ label, isLoading, className, popoverProps, popoverContentProps, popoverBodyProps }: Props) => {
+  const bgColor = useColorModeValue('gray.700', 'gray.900');
+
+  if (isLoading) {
+    return <Skeleton className={ className } boxSize={ 5 } borderRadius="sm"/>;
+  }
+
+  return (
+    <Popover trigger="hover" isLazy placement="top" { ...popoverProps }>
+      <PopoverTrigger>
+        <IconSvg className={ className } name="info" boxSize={ 5 } color="icon_info" _hover={{ color: 'link_hovered' }} cursor="pointer"/>
+      </PopoverTrigger>
+      <Portal>
+        <PopoverContent bgColor={ bgColor } maxW={{ base: 'calc(100vw - 8px)', lg: '320px' }} borderRadius="sm" { ...popoverContentProps }>
+          <PopoverArrow bgColor={ bgColor }/>
+          <PopoverBody color="white" fontSize="sm" lineHeight="20px" px={ 2 } py="2px" { ...popoverBodyProps }>
+            <DarkMode>
+              { label }
+            </DarkMode>
+          </PopoverBody>
+        </PopoverContent>
+      </Portal>
+    </Popover>
+  );
+};
+
+export default React.memo(chakra(HintPopover));
diff --git a/ui/shared/InfoButton.tsx b/ui/shared/InfoButton.tsx
new file mode 100644
index 0000000000..fde2aea670
--- /dev/null
+++ b/ui/shared/InfoButton.tsx
@@ -0,0 +1,69 @@
+import {
+  PopoverTrigger, PopoverContent, PopoverBody,
+  Modal, ModalContent, ModalCloseButton,
+  useDisclosure,
+  Button,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import Popover from 'ui/shared/chakra/Popover';
+
+import IconSvg from './IconSvg';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const InfoButton = ({ children }: Props) => {
+  const isMobile = useIsMobile();
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  const triggerButton = (
+    <Button
+      size="sm"
+      variant="outline"
+      colorScheme="gray"
+      onClick={ onToggle }
+      isActive={ isOpen }
+      aria-label="Show info"
+      fontWeight={ 500 }
+      lineHeight={ 6 }
+      pl={ 1 }
+      pr={ isMobile ? 1 : 2 }
+      h="32px"
+    >
+      <IconSvg name="info" boxSize={ 6 } mr={ isMobile ? 0 : 1 }/>
+      { !isMobile && <span>Info</span> }
+    </Button>
+  );
+
+  if (isMobile) {
+    return (
+      <>
+        { triggerButton }
+        <Modal isOpen={ isOpen } onClose={ onClose } size="full">
+          <ModalContent>
+            <ModalCloseButton/>
+            { children }
+          </ModalContent>
+        </Modal>
+      </>
+    );
+  }
+
+  return (
+    <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
+      <PopoverTrigger>
+        { triggerButton }
+      </PopoverTrigger>
+      <PopoverContent w="500px">
+        <PopoverBody px={ 6 } py={ 5 }>
+          { children }
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default React.memo(InfoButton);
diff --git a/ui/shared/InputPlaceholder.tsx b/ui/shared/InputPlaceholder.tsx
deleted file mode 100644
index 9285d1124e..0000000000
--- a/ui/shared/InputPlaceholder.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { FormLabel, chakra } from '@chakra-ui/react';
-import React from 'react';
-import type { FieldError } from 'react-hook-form';
-
-interface Props {
-  text: string;
-  icon?: React.ReactNode;
-  error?: Partial<FieldError>;
-  className?: string;
-  isFancy?: boolean;
-  isInModal?: boolean;
-}
-
-const InputPlaceholder = ({ text, icon, error, className, isFancy, isInModal }: Props) => {
-  let errorMessage = error?.message;
-
-  if (!errorMessage && error?.type === 'pattern') {
-    errorMessage = 'Invalid format';
-  }
-
-  return (
-    <FormLabel
-      className={ className }
-      alignItems="center"
-      { ...(isFancy ? { 'data-fancy': true } : {}) }
-      { ...(isInModal ? { 'data-in-modal': true } : {}) }
-    >
-      { icon }
-      <chakra.span>{ text }</chakra.span>
-      { errorMessage && <chakra.span order={ 3 } whiteSpace="pre"> - { errorMessage }</chakra.span> }
-    </FormLabel>
-  );
-};
-
-export default chakra(InputPlaceholder);
diff --git a/ui/shared/LinkExternal.tsx b/ui/shared/LinkExternal.tsx
deleted file mode 100644
index cae2427170..0000000000
--- a/ui/shared/LinkExternal.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import type { ChakraProps } from '@chakra-ui/react';
-import { Link, chakra, Box, Skeleton, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-import IconSvg from 'ui/shared/IconSvg';
-
-interface Props {
-  href: string;
-  className?: string;
-  children: React.ReactNode;
-  isLoading?: boolean;
-  variant?: 'subtle';
-}
-
-const LinkExternal = ({ href, children, className, isLoading, variant }: Props) => {
-  const subtleLinkBg = useColorModeValue('gray.100', 'gray.700');
-
-  const styleProps: ChakraProps = (() => {
-    const commonProps = {
-      display: 'inline-block',
-      alignItems: 'center',
-    };
-
-    switch (variant) {
-      case 'subtle': {
-        return {
-          ...commonProps,
-          px: '10px',
-          py: '6px',
-          bgColor: subtleLinkBg,
-          borderRadius: 'base',
-        };
-      }
-
-      default:{
-        return commonProps;
-      }
-    }
-  })();
-
-  if (isLoading) {
-    if (variant === 'subtle') {
-      return (
-        <Skeleton className={ className } { ...styleProps } bgColor="inherit">
-          { children }
-          <Box boxSize={ 4 } display="inline-block"/>
-        </Skeleton>
-      );
-    }
-
-    return (
-      <Box className={ className } { ...styleProps }>
-        { children }
-        <Skeleton boxSize={ 4 } verticalAlign="middle" display="inline-block"/>
-      </Box>
-    );
-  }
-
-  return (
-    <Link className={ className } { ...styleProps } target="_blank" href={ href }>
-      { children }
-      <IconSvg name="arrows/north-east" boxSize={ 4 } verticalAlign="middle" color="gray.400" flexShrink={ 0 }/>
-    </Link>
-  );
-};
-
-export default React.memo(chakra(LinkExternal));
diff --git a/ui/shared/LinkInternal.tsx b/ui/shared/LinkInternal.tsx
deleted file mode 100644
index b46b369096..0000000000
--- a/ui/shared/LinkInternal.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { LinkProps, FlexProps } from '@chakra-ui/react';
-import { Flex, Link } from '@chakra-ui/react';
-import type { LinkProps as NextLinkProps } from 'next/link';
-import NextLink from 'next/link';
-import type { LegacyRef } from 'react';
-import React from 'react';
-
-const LinkInternal = ({ isLoading, ...props }: LinkProps & { isLoading?: boolean }, ref: LegacyRef<HTMLAnchorElement>) => {
-  if (isLoading) {
-    return <Flex alignItems="center" { ...props as FlexProps }>{ props.children }</Flex>;
-  }
-
-  if (!props.href) {
-    return <Link { ...props } ref={ ref }/>;
-  }
-
-  return (
-    <NextLink href={ props.href as NextLinkProps['href'] } passHref target={ props.target } legacyBehavior>
-      <Link { ...props } ref={ ref }/>
-    </NextLink>
-  );
-};
-
-export default React.memo(React.forwardRef(LinkInternal));
diff --git a/ui/shared/NativeTokenIcon.tsx b/ui/shared/NativeTokenIcon.tsx
new file mode 100644
index 0000000000..92bebeb4aa
--- /dev/null
+++ b/ui/shared/NativeTokenIcon.tsx
@@ -0,0 +1,42 @@
+import { Skeleton, Image, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+import { HOMEPAGE_STATS } from 'stubs/stats';
+
+import TokenLogoPlaceholder from './TokenLogoPlaceholder';
+
+type Props = {
+  isLoading?: boolean;
+  className?: string;
+  type?: 'primary' | 'secondary';
+};
+
+const NativeTokenIcon = ({ isLoading, className, type }: Props) => {
+  const statsQueryResult = useApiQuery('stats', {
+    queryOptions: {
+      refetchOnMount: false,
+      placeholderData: HOMEPAGE_STATS,
+    },
+  });
+
+  if (isLoading || statsQueryResult.isPlaceholderData) {
+    return <Skeleton borderRadius="base" className={ className }/>;
+  }
+
+  const src = type === 'secondary' ? statsQueryResult.data?.secondary_coin_image : statsQueryResult.data?.coin_image;
+
+  return (
+    <Image
+      borderRadius="base"
+      className={ className }
+      src={ src || '' }
+      alt={ `${ config.chain.currency.symbol } logo` }
+      fallback={ <TokenLogoPlaceholder borderRadius="base" className={ className }/> }
+      fallbackStrategy={ src ? 'onError' : 'beforeLoadOrError' }
+    />
+  );
+};
+
+export default chakra(NativeTokenIcon);
diff --git a/ui/shared/NetworkAddToWallet.tsx b/ui/shared/NetworkAddToWallet.tsx
index 732c4342e5..2e852e3095 100644
--- a/ui/shared/NetworkAddToWallet.tsx
+++ b/ui/shared/NetworkAddToWallet.tsx
@@ -57,7 +57,7 @@ const NetworkAddToWallet = () => {
   return (
     <Button variant="outline" colorScheme="orange" size="sm" onClick={ handleClick }>
       <IconSvg name={ WALLETS_INFO[wallet].icon } boxSize={ 5 } mr={ 2 }/>
-        Add { config.chain.name }
+      Add { config.chain.name }
     </Button>
   );
 };
diff --git a/ui/shared/NetworkExplorers.pw.tsx b/ui/shared/NetworkExplorers.pw.tsx
new file mode 100644
index 0000000000..5b9b996b81
--- /dev/null
+++ b/ui/shared/NetworkExplorers.pw.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { test, expect } from 'playwright/lib';
+
+import NetworkExplorers from './NetworkExplorers';
+
+test('base view', async({ render, page }) => {
+  const component = await render(<NetworkExplorers type="tx" pathParam="0x123"/>);
+  await component.getByText('2').click();
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 300, height: 150 } });
+});
diff --git a/ui/shared/NetworkExplorers.tsx b/ui/shared/NetworkExplorers.tsx
index 8f5918fce9..3cf00da3e9 100644
--- a/ui/shared/NetworkExplorers.tsx
+++ b/ui/shared/NetworkExplorers.tsx
@@ -1,4 +1,8 @@
-import { Flex, Button, chakra, Popover, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, Show, Hide } from '@chakra-ui/react';
+import {
+  Image,
+  useColorModeValue,
+  chakra,
+} from '@chakra-ui/react';
 import React from 'react';
 
 import type { NetworkExplorer as TNetworkExplorer } from 'types/networks';
@@ -6,7 +10,8 @@ import type { NetworkExplorer as TNetworkExplorer } from 'types/networks';
 import config from 'configs/app';
 import stripTrailingSlash from 'lib/stripTrailingSlash';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkExternal from 'ui/shared/LinkExternal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import VerifyWith from 'ui/shared/VerifyWith';
 
 interface Props {
   className?: string;
@@ -15,60 +20,37 @@ interface Props {
 }
 
 const NetworkExplorers = ({ className, type, pathParam }: Props) => {
-  const { isOpen, onToggle, onClose } = useDisclosure();
+  const defaultIconColor = useColorModeValue('gray.400', 'gray.500');
 
   const explorersLinks = React.useMemo(() => {
     return config.UI.explorers.items
       .filter((explorer) => typeof explorer.paths[type] === 'string')
       .map((explorer) => {
         const url = new URL(stripTrailingSlash(explorer.paths[type] || '') + '/' + pathParam, explorer.baseUrl);
-        return <LinkExternal key={ explorer.baseUrl } href={ url.toString() }>{ explorer.title }</LinkExternal>;
+        return (
+          <LinkExternal h="34px" key={ explorer.baseUrl } href={ url.toString() } alignItems="center" display="inline-flex" minW="120px">
+            { explorer.logo ?
+              <Image boxSize={ 5 } mr={ 2 } src={ explorer.logo } alt={ `${ explorer.title } icon` }/> :
+              <IconSvg name="explorer" boxSize={ 5 } color={ defaultIconColor } mr={ 2 }/>
+            }
+            { explorer.title }
+          </LinkExternal>
+        );
       });
-  }, [ pathParam, type ]);
+  }, [ pathParam, type, defaultIconColor ]);
 
   if (explorersLinks.length === 0) {
     return null;
   }
 
   return (
-    <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
-      <PopoverTrigger>
-        <Button
-          className={ className }
-          size="sm"
-          variant="outline"
-          colorScheme="gray"
-          onClick={ onToggle }
-          aria-label="Verify in other explorers"
-          fontWeight={ 500 }
-          px={ 2 }
-          h="32px"
-          flexShrink={ 0 }
-        >
-          <IconSvg name="explorer" boxSize={ 5 }/>
-          <Show above="xl">
-            <chakra.span ml={ 1 }>{ explorersLinks.length } Explorer{ explorersLinks.length > 1 ? 's' : '' }</chakra.span>
-          </Show>
-          <Hide above="xl">
-            <chakra.span ml={ 1 }>{ explorersLinks.length }</chakra.span>
-          </Hide>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent w="240px">
-        <PopoverBody >
-          <chakra.span color="text_secondary" fontSize="xs">Verify with other explorers</chakra.span>
-          <Flex
-            alignItems="center"
-            flexWrap="wrap"
-            columnGap={ 6 }
-            rowGap={ 3 }
-            mt={ 3 }
-          >
-            { explorersLinks }
-          </Flex>
-        </PopoverBody>
-      </PopoverContent>
-    </Popover>
+    <VerifyWith
+      className={ className }
+      links={ explorersLinks }
+      label="Verify with other explorers"
+      longText={ `${ explorersLinks.length } Explorer${ explorersLinks.length > 1 ? 's' : '' }` }
+      shortText={ explorersLinks.length.toString() }
+    />
   );
 };
 
diff --git a/ui/shared/Noves/NovesFromTo.tsx b/ui/shared/Noves/NovesFromTo.tsx
new file mode 100644
index 0000000000..db1ea47205
--- /dev/null
+++ b/ui/shared/Noves/NovesFromTo.tsx
@@ -0,0 +1,62 @@
+import { Box, Skeleton } from '@chakra-ui/react';
+import type { FC } from 'react';
+import React from 'react';
+
+import type { NovesResponseData } from 'types/api/noves';
+
+import type { NovesFlowViewItem } from 'ui/tx/assetFlows/utils/generateFlowViewData';
+
+import Tag from '../chakra/Tag';
+import AddressEntity from '../entities/address/AddressEntity';
+import { getActionFromTo, getFromTo } from './utils';
+
+interface Props {
+  isLoaded: boolean;
+  txData?: NovesResponseData;
+  currentAddress?: string;
+  item?: NovesFlowViewItem;
+}
+
+const NovesFromTo: FC<Props> = ({ isLoaded, txData, currentAddress = '', item }) => {
+  const data = React.useMemo(() => {
+    if (txData) {
+      return getFromTo(txData, currentAddress);
+    }
+    if (item) {
+      return getActionFromTo(item);
+    }
+
+    return { text: 'Sent to', address: '' };
+  }, [ currentAddress, item, txData ]);
+
+  const isSent = data.text.startsWith('Sent');
+
+  const address = { hash: data.address || '', name: data.name || '' };
+
+  return (
+    <Skeleton borderRadius="sm" isLoaded={ isLoaded }>
+      <Box display="flex">
+        <Tag
+          colorScheme={ isSent ? 'yellow' : 'green' }
+          px={ 0 }
+          w="113px"
+          textAlign="center"
+        >
+          { data.text }
+        </Tag>
+
+        <AddressEntity
+          address={ address }
+          fontWeight="500"
+          noCopy={ !data.address }
+          noLink={ !data.address }
+          noIcon={ address.name === 'Validators' }
+          ml={ 2 }
+          truncation="dynamic"
+        />
+      </Box>
+    </Skeleton>
+  );
+};
+
+export default NovesFromTo;
diff --git a/ui/shared/Noves/utils.test.ts b/ui/shared/Noves/utils.test.ts
new file mode 100644
index 0000000000..52bdc97a9c
--- /dev/null
+++ b/ui/shared/Noves/utils.test.ts
@@ -0,0 +1,49 @@
+import * as transactionMock from 'mocks/noves/transaction';
+import type { NovesFlowViewItem } from 'ui/tx/assetFlows/utils/generateFlowViewData';
+
+import { getActionFromTo, getFromTo, getFromToValue } from './utils';
+
+it('get data for FromTo component from transaction', async() => {
+  const result = getFromTo(transactionMock.transaction, transactionMock.transaction.accountAddress);
+
+  expect(result).toEqual({
+    text: 'Sent to',
+    address: '0xef6595A423c99f3f2821190A4d96fcE4DcD89a80',
+  });
+});
+
+it('get what type of FromTo component will be', async() => {
+  const result = getFromToValue(transactionMock.transaction, transactionMock.transaction.accountAddress);
+
+  expect(result).toEqual('sent');
+});
+
+it('get data for FromTo component from flow item', async() => {
+  const item: NovesFlowViewItem = {
+    action: {
+      label: 'Sent',
+      amount: '3000',
+      flowDirection: 'toRight',
+      nft: undefined,
+      token: {
+        address: '0x1bfe4298796198f8664b18a98640cec7c89b5baa',
+        decimals: 18,
+        name: 'PQR-Test',
+        symbol: 'PQR',
+      },
+    },
+    rightActor: {
+      address: '0xdD15D2650387Fb6FEDE27ae7392C402a393F8A37',
+      name: null,
+    },
+    accountAddress: '0xef6595a423c99f3f2821190a4d96fce4dcd89a80',
+  };
+
+  const result = getActionFromTo(item);
+
+  expect(result).toEqual({
+    text: 'Sent to',
+    address: '0xdD15D2650387Fb6FEDE27ae7392C402a393F8A37',
+    name: null,
+  });
+});
diff --git a/ui/shared/Noves/utils.ts b/ui/shared/Noves/utils.ts
new file mode 100644
index 0000000000..78c545a06b
--- /dev/null
+++ b/ui/shared/Noves/utils.ts
@@ -0,0 +1,89 @@
+import type { NovesResponseData, NovesSentReceived } from 'types/api/noves';
+
+import type { NovesFlowViewItem } from 'ui/tx/assetFlows/utils/generateFlowViewData';
+
+export interface FromToData {
+  text: string;
+  address: string;
+  name?: string | null;
+}
+
+export const getFromTo = (txData: NovesResponseData, currentAddress: string): FromToData => {
+  const raw = txData.rawTransactionData;
+  const sent = txData.classificationData.sent;
+  let sentFound: Array<NovesSentReceived> = [];
+  if (sent && sent[0]) {
+    sentFound = sent
+      .filter((sent) => sent.from.address.toLocaleLowerCase() === currentAddress)
+      .filter((sent) => sent.to.address);
+  }
+
+  const received = txData.classificationData.received;
+  let receivedFound: Array<NovesSentReceived> = [];
+  if (received && received[0]) {
+    receivedFound = received
+      .filter((received) => received.to.address?.toLocaleLowerCase() === currentAddress)
+      .filter((received) => received.from.address);
+  }
+
+  if (sentFound[0] && receivedFound[0]) {
+    if (sentFound.length === receivedFound.length) {
+      if (raw.toAddress.toLocaleLowerCase() === currentAddress) {
+        return { text: 'Received from', address: raw.fromAddress };
+      }
+
+      if (raw.fromAddress.toLocaleLowerCase() === currentAddress) {
+        return { text: 'Sent to', address: raw.toAddress };
+      }
+    }
+    if (sentFound.length > receivedFound.length) {
+      // already filtered if null
+
+      return { text: 'Sent to', address: sentFound[0].to.address! } ;
+    } else {
+      return { text: 'Received from', address: receivedFound[0].from.address } ;
+    }
+  }
+
+  if (sent && sentFound[0]) {
+    // already filtered if null
+
+    return { text: 'Sent to', address: sentFound[0].to.address! } ;
+  }
+
+  if (received && receivedFound[0]) {
+    return { text: 'Received from', address: receivedFound[0].from.address };
+  }
+
+  if (raw.toAddress && raw.toAddress.toLocaleLowerCase() === currentAddress) {
+    return { text: 'Received from', address: raw.fromAddress };
+  }
+
+  if (raw.fromAddress && raw.fromAddress.toLocaleLowerCase() === currentAddress) {
+    return { text: 'Sent to', address: raw.toAddress };
+  }
+
+  if (!raw.toAddress && raw.fromAddress) {
+    return { text: 'Received from', address: raw.fromAddress };
+  }
+
+  if (!raw.fromAddress && raw.toAddress) {
+    return { text: 'Sent to', address: raw.toAddress };
+  }
+
+  return { text: 'Sent to', address: currentAddress };
+};
+
+export const getFromToValue = (txData: NovesResponseData, currentAddress: string) => {
+  const fromTo = getFromTo(txData, currentAddress);
+
+  return fromTo.text.split(' ').shift()?.toLowerCase();
+};
+
+export const getActionFromTo = (item: NovesFlowViewItem): FromToData => {
+  return {
+    text: item.action.flowDirection === 'toRight' ? 'Sent to' : 'Received from',
+    address: item.rightActor.address,
+    name: item.rightActor.name,
+  };
+};
diff --git a/ui/shared/Page/PageTitle.pw.tsx b/ui/shared/Page/PageTitle.pw.tsx
index 2c06639ecb..2dee9dbd96 100644
--- a/ui/shared/Page/PageTitle.pw.tsx
+++ b/ui/shared/Page/PageTitle.pw.tsx
@@ -1,58 +1,28 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import * as textAdMock from 'mocks/ad/textAd';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import DefaultView from './specs/DefaultView';
 import LongNameAndManyTags from './specs/LongNameAndManyTags';
 import WithTextAd from './specs/WithTextAd';
 
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
-  await page.route('https://example.com/logo.png', (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
+test.beforeEach(async({ mockTextAd, mockAssetResponse }) => {
+  await mockTextAd();
+  await mockAssetResponse('https://example.com/logo.png', './playwright/mocks/image_s.jpg');
 });
 
-test('default view +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <DefaultView/>
-    </TestApp>,
-  );
-
+test('default view +@mobile', async({ render, page }) => {
+  const component = await render(<DefaultView/>);
+  await page.mouse.move(1000, 1000);
   await expect(component).toHaveScreenshot();
 });
 
-test('with text ad +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <WithTextAd/>
-    </TestApp>,
-  );
-
+test('with text ad +@mobile', async({ render }) => {
+  const component = await render(<WithTextAd/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('with long name and many tags +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <LongNameAndManyTags/>
-    </TestApp>,
-  );
-
+test('with long name and many tags +@mobile', async({ render }) => {
+  const component = await render(<LongNameAndManyTags/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/Page/PageTitle.tsx b/ui/shared/Page/PageTitle.tsx
index d531921cc4..4dc0cf12b8 100644
--- a/ui/shared/Page/PageTitle.tsx
+++ b/ui/shared/Page/PageTitle.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import TextAd from 'ui/shared/ad/TextAd';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 
 type BackLinkProp = { label: string; url: string } | { label: string; onClick: () => void };
 
@@ -19,7 +19,7 @@ type Props = {
   secondRow?: React.ReactNode;
   isLoading?: boolean;
   withTextAd?: boolean;
-}
+};
 
 const TEXT_MAX_LINES = 1;
 
@@ -29,10 +29,21 @@ const BackLink = (props: BackLinkProp & { isLoading?: boolean }) => {
   }
 
   if (props.isLoading) {
-    return <Skeleton boxSize={ 6 } display="inline-block" borderRadius="base" mr={ 3 } my={ 2 } verticalAlign="text-bottom" isLoaded={ !props.isLoading }/>;
+    return (
+      <Skeleton
+        boxSize={ 6 }
+        display="inline-block"
+        flexShrink={ 0 }
+        borderRadius="base"
+        mr={ 3 }
+        my={ 2 }
+        verticalAlign="text-bottom"
+        isLoaded={ !props.isLoading }
+      />
+    );
   }
 
-  const icon = <IconSvg name="arrows/east" boxSize={ 6 } transform="rotate(180deg)" margin="auto" color="gray.400"/>;
+  const icon = <IconSvg name="arrows/east" boxSize={ 6 } transform="rotate(180deg)" margin="auto" color="gray.400" flexShrink={ 0 }/>;
 
   if ('url' in props) {
     return (
@@ -143,9 +154,9 @@ const PageTitle = ({ title, contentAfter, withTextAd, backLink, className, isLoa
         { withTextAd && <TextAd order={{ base: -1, lg: 100 }} mb={{ base: 6, lg: 0 }} ml="auto" w={{ base: '100%', lg: 'auto' }}/> }
       </Flex>
       { secondRow && (
-        <Flex alignItems="center" minH={ 10 } overflow="hidden">
+        <Skeleton isLoaded={ !isLoading } alignItems="center" minH={ 10 } overflow="hidden" display="flex" _empty={{ display: 'none' }}>
           { secondRow }
-        </Flex>
+        </Skeleton>
       ) }
     </Flex>
   );
diff --git a/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_default_default-view-mobile-1.png b/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_default_default-view-mobile-1.png
index d633cbb80a..a611ef0d17 100644
Binary files a/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_default_default-view-mobile-1.png and b/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_default_default-view-mobile-1.png differ
diff --git a/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_default_with-long-name-and-many-tags-mobile-1.png b/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_default_with-long-name-and-many-tags-mobile-1.png
index 8d02d7da7c..655e9295ae 100644
Binary files a/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_default_with-long-name-and-many-tags-mobile-1.png and b/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_default_with-long-name-and-many-tags-mobile-1.png differ
diff --git a/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_default_with-text-ad-mobile-1.png b/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_default_with-text-ad-mobile-1.png
index 9a03708d13..c465508c52 100644
Binary files a/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_default_with-text-ad-mobile-1.png and b/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_default_with-text-ad-mobile-1.png differ
diff --git a/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_mobile_default-view-mobile-1.png b/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_mobile_default-view-mobile-1.png
index efabd99eed..b3255bb270 100644
Binary files a/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_mobile_default-view-mobile-1.png and b/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_mobile_default-view-mobile-1.png differ
diff --git a/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_mobile_with-long-name-and-many-tags-mobile-1.png b/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_mobile_with-long-name-and-many-tags-mobile-1.png
index f2b21cc103..0bd66be44c 100644
Binary files a/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_mobile_with-long-name-and-many-tags-mobile-1.png and b/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_mobile_with-long-name-and-many-tags-mobile-1.png differ
diff --git a/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_mobile_with-text-ad-mobile-1.png b/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_mobile_with-text-ad-mobile-1.png
index 01d7d12f52..a6d478bfdf 100644
Binary files a/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_mobile_with-text-ad-mobile-1.png and b/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_mobile_with-text-ad-mobile-1.png differ
diff --git a/ui/shared/Page/specs/DefaultView.tsx b/ui/shared/Page/specs/DefaultView.tsx
index 0c924f55e0..f710c610be 100644
--- a/ui/shared/Page/specs/DefaultView.tsx
+++ b/ui/shared/Page/specs/DefaultView.tsx
@@ -5,7 +5,7 @@ import type { TokenInfo } from 'types/api/token';
 import * as addressMock from 'mocks/address/address';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
-import EntityTags from 'ui/shared/EntityTags';
+import EntityTags from 'ui/shared/EntityTags/EntityTags';
 import IconSvg from 'ui/shared/IconSvg';
 import NetworkExplorers from 'ui/shared/NetworkExplorers';
 
@@ -32,10 +32,10 @@ const DefaultView = () => {
 
   const contentAfter = (
     <>
-      <IconSvg name="verified_token" color="green.500" boxSize={ 6 } cursor="pointer"/>
+      <IconSvg name="certified" color="green.500" boxSize={ 6 } cursor="pointer"/>
       <EntityTags
-        tagsBefore={ [
-          { label: 'example', display_name: 'Example label' },
+        tags={ [
+          { slug: 'example', name: 'Example label', tagType: 'custom' },
         ] }
         flexGrow={ 1 }
       />
@@ -60,7 +60,7 @@ const DefaultView = () => {
       beforeTitle={ (
         <TokenEntity.Icon
           token={ tokenData }
-          iconSize="lg"
+          size="lg"
         />
       ) }
       backLink={ backLink }
diff --git a/ui/shared/Page/specs/LongNameAndManyTags.tsx b/ui/shared/Page/specs/LongNameAndManyTags.tsx
index ae8e190cda..f83878eec2 100644
--- a/ui/shared/Page/specs/LongNameAndManyTags.tsx
+++ b/ui/shared/Page/specs/LongNameAndManyTags.tsx
@@ -5,9 +5,9 @@ import type { TokenInfo } from 'types/api/token';
 
 import { publicTag, privateTag, watchlistName } from 'mocks/address/tag';
 import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
-import EntityTags from 'ui/shared/EntityTags';
+import EntityTags from 'ui/shared/EntityTags/EntityTags';
+import formatUserTags from 'ui/shared/EntityTags/formatUserTags';
 import IconSvg from 'ui/shared/IconSvg';
-import NetworkExplorers from 'ui/shared/NetworkExplorers';
 
 import PageTitle from '../PageTitle';
 
@@ -27,21 +27,18 @@ const LongNameAndManyTags = () => {
 
   const contentAfter = (
     <>
-      <IconSvg name="verified_token" color="green.500" boxSize={ 6 } cursor="pointer" flexShrink={ 0 }/>
+      <IconSvg name="certified" color="green.500" boxSize={ 6 } cursor="pointer" flexShrink={ 0 }/>
       <EntityTags
-        data={{
-          private_tags: [ privateTag ],
-          public_tags: [ publicTag ],
-          watchlist_names: [ watchlistName ],
-        }}
-        tagsBefore={ [
-          { label: 'example', display_name: 'Example with long name' },
+        tags={ [
+          { slug: 'example', name: 'Example with long name', tagType: 'custom' },
+          ...formatUserTags({
+            private_tags: [ privateTag ],
+            public_tags: [ publicTag ],
+            watchlist_names: [ watchlistName ],
+          }),
+          { slug: 'after_1', name: 'Another tag', tagType: 'custom' },
+          { slug: 'after_2', name: 'And yet more', tagType: 'custom' },
         ] }
-        tagsAfter={ [
-          { label: 'after_1', display_name: 'Another tag' },
-          { label: 'after_2', display_name: 'And yet more' },
-        ] }
-        contentAfter={ <NetworkExplorers type="token" pathParam="token-hash" ml="auto"/> }
         flexGrow={ 1 }
       />
     </>
@@ -55,7 +52,7 @@ const LongNameAndManyTags = () => {
       beforeTitle={ (
         <TokenEntity.Icon
           token={ tokenData }
-          iconSize="lg"
+          size="lg"
         />
       ) }
       contentAfter={ contentAfter }
diff --git a/ui/shared/PopoverTriggerTooltip.tsx b/ui/shared/PopoverTriggerTooltip.tsx
new file mode 100644
index 0000000000..c1afd6e022
--- /dev/null
+++ b/ui/shared/PopoverTriggerTooltip.tsx
@@ -0,0 +1,30 @@
+import { Skeleton, Tooltip, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+
+type Props = {
+  label: string;
+  isLoading?: boolean;
+  className?: string;
+  children: React.ReactNode;
+};
+
+const PopoverTriggerTooltip = ({ label, isLoading, className, children }: Props, ref: React.ForwardedRef<HTMLDivElement>) => {
+  const isMobile = useIsMobile();
+  return (
+    // tooltip need to be wrapped in div for proper popover positioning
+    <Skeleton isLoaded={ !isLoading } borderRadius="base" ref={ ref } className={ className }>
+      <Tooltip
+        label={ label }
+        isDisabled={ isMobile }
+        // need a delay to avoid flickering when closing the popover
+        openDelay={ 100 }
+      >
+        { children }
+      </Tooltip>
+    </Skeleton>
+  );
+};
+
+export default chakra(React.forwardRef(PopoverTriggerTooltip));
diff --git a/ui/shared/PrevNext.tsx b/ui/shared/PrevNext.tsx
index 6d477775e2..5593ed9a69 100644
--- a/ui/shared/PrevNext.tsx
+++ b/ui/shared/PrevNext.tsx
@@ -32,7 +32,7 @@ const PrevNext = ({ className, onClick, prevLabel, nextLabel, isPrevDisabled, is
   }
 
   return (
-    <Box className={ className }>
+    <Box className={ className } display="flex">
       <Tooltip label={ prevLabel }>
         <IconButton
           aria-label="prev"
diff --git a/ui/shared/RawDataSnippet.tsx b/ui/shared/RawDataSnippet.tsx
index d7a6789bda..68b23fc407 100644
--- a/ui/shared/RawDataSnippet.tsx
+++ b/ui/shared/RawDataSnippet.tsx
@@ -1,3 +1,4 @@
+import type { ChakraProps } from '@chakra-ui/react';
 import { Box, Flex, chakra, useColorModeValue, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
@@ -10,12 +11,29 @@ interface Props {
   rightSlot?: React.ReactNode;
   beforeSlot?: React.ReactNode;
   textareaMaxHeight?: string;
+  textareaMinHeight?: string;
   showCopy?: boolean;
   isLoading?: boolean;
+  contentProps?: ChakraProps;
 }
 
-const RawDataSnippet = ({ data, className, title, rightSlot, beforeSlot, textareaMaxHeight, showCopy = true, isLoading }: Props) => {
-  // see issue in theme/components/Textarea.ts
+const RawDataSnippet = ({
+  data,
+  className,
+  title,
+  rightSlot,
+  beforeSlot,
+  textareaMaxHeight,
+  textareaMinHeight,
+  showCopy = true,
+  isLoading,
+  contentProps,
+}: Props) => {
+  // https://bugs.chromium.org/p/chromium/issues/detail?id=1362573
+  // there is a problem with scrollbar color in chromium
+  // so blackAlpha.50 here is replaced with #f5f5f6
+  // and whiteAlpha.50 is replaced with #1a1b1b
+  // const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
   const bgColor = useColorModeValue('#f5f5f6', '#1a1b1b');
   return (
     <Box className={ className } as="section" title={ title }>
@@ -31,13 +49,15 @@ const RawDataSnippet = ({ data, className, title, rightSlot, beforeSlot, textare
         p={ 4 }
         bgColor={ isLoading ? 'inherit' : bgColor }
         maxH={ textareaMaxHeight || '400px' }
-        minH={ isLoading ? '200px' : undefined }
+        minH={ textareaMinHeight || (isLoading ? '200px' : undefined) }
         fontSize="sm"
         borderRadius="md"
         wordBreak="break-all"
         whiteSpace="pre-wrap"
+        overflowX="hidden"
         overflowY="auto"
         isLoaded={ !isLoading }
+        { ...contentProps }
       >
         { data }
       </Skeleton>
diff --git a/ui/shared/RawInputData.tsx b/ui/shared/RawInputData.tsx
index d638743cab..3a21afb16c 100644
--- a/ui/shared/RawInputData.tsx
+++ b/ui/shared/RawInputData.tsx
@@ -1,41 +1,51 @@
-import { Box, Flex, Select, Textarea } from '@chakra-ui/react';
 import React from 'react';
 
 import hexToUtf8 from 'lib/hexToUtf8';
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import RawDataSnippet from 'ui/shared/RawDataSnippet';
+import Select from 'ui/shared/select/Select';
 
-type DataType = 'Hex' | 'UTF-8'
-const OPTIONS: Array<DataType> = [ 'Hex', 'UTF-8' ];
+const OPTIONS = [
+  { label: 'Hex', value: 'Hex' as const },
+  { label: 'UTF-8', value: 'UTF-8' as const },
+];
+
+export type DataType = (typeof OPTIONS)[number]['value'];
 
 interface Props {
   hex: string;
+  rightSlot?: React.ReactNode;
+  defaultDataType?: DataType;
+  isLoading?: boolean;
+  minHeight?: string;
 }
 
-const RawInputData = ({ hex }: Props) => {
-  const [ selectedDataType, setSelectedDataType ] = React.useState<DataType>('Hex');
+const RawInputData = ({ hex, rightSlot: rightSlotProp, defaultDataType = 'Hex', isLoading, minHeight }: Props) => {
+  const [ selectedDataType, setSelectedDataType ] = React.useState<DataType>(defaultDataType);
 
-  const handleSelectChange = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelectedDataType(event.target.value as DataType);
-  }, []);
+  const rightSlot = (
+    <>
+      <Select
+        options={ OPTIONS }
+        name="data-type"
+        defaultValue={ defaultDataType }
+        onChange={ setSelectedDataType }
+        isLoading={ isLoading }
+        w="90px"
+        mr="auto"
+      />
+      { rightSlotProp }
+    </>
+  );
 
   return (
-    <Box w="100%">
-      <Flex justifyContent="space-between" alignItems="center">
-        <Select size="xs" borderRadius="base" value={ selectedDataType } onChange={ handleSelectChange } focusBorderColor="none" w="auto">
-          { OPTIONS.map((option) => <option key={ option } value={ option }>{ option }</option>) }
-        </Select>
-        <CopyToClipboard text={ hex }/>
-      </Flex>
-      <Textarea
-        value={ selectedDataType === 'Hex' ? hex : hexToUtf8(hex) }
-        w="100%"
-        maxH="220px"
-        mt={ 2 }
-        p={ 4 }
-        variant="filledInactive"
-        fontSize="sm"
-      />
-    </Box>
+    <RawDataSnippet
+      data={ selectedDataType === 'Hex' ? hex : hexToUtf8(hex) }
+      rightSlot={ rightSlot }
+      isLoading={ isLoading }
+      textareaMaxHeight="220px"
+      textareaMinHeight={ minHeight || '160px' }
+      w="100%"
+    />
   );
 };
 
diff --git a/ui/shared/ResetIconButton.tsx b/ui/shared/ResetIconButton.tsx
index 0b80918219..92c992bf88 100644
--- a/ui/shared/ResetIconButton.tsx
+++ b/ui/shared/ResetIconButton.tsx
@@ -5,7 +5,7 @@ import IconSvg from 'ui/shared/IconSvg';
 
 type Props = {
   onClick: () => void;
-}
+};
 
 const ResetIconButton = ({ onClick }: Props) => {
   const resetTokenIconColor = useColorModeValue('blue.600', 'blue.300');
diff --git a/ui/shared/SocketNewItemsNotice.pw.tsx b/ui/shared/SocketNewItemsNotice.pw.tsx
index 2001f19ccb..f0bfdd6d23 100644
--- a/ui/shared/SocketNewItemsNotice.pw.tsx
+++ b/ui/shared/SocketNewItemsNotice.pw.tsx
@@ -1,7 +1,6 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import SocketNewItemsNotice from './SocketNewItemsNotice';
 
@@ -12,35 +11,17 @@ const hooksConfig = {
   },
 };
 
-test('2 new items in validated txs list +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <SocketNewItemsNotice url="/" num={ 2 }/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+test('2 new items in validated txs list +@dark-mode', async({ render }) => {
+  const component = await render(<SocketNewItemsNotice url="/" num={ 2 }/>, { hooksConfig });
   await expect(component).toHaveScreenshot();
 });
 
-test('connection loss', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <SocketNewItemsNotice url="/" alert="Connection is lost. Please reload the page."/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+test('connection loss', async({ render }) => {
+  const component = await render(<SocketNewItemsNotice url="/" alert="Connection is lost. Please reload the page."/>, { hooksConfig });
   await expect(component).toHaveScreenshot();
 });
 
-test('fetching', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <SocketNewItemsNotice url="/"/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+test('fetching', async({ render }) => {
+  const component = await render(<SocketNewItemsNotice url="/"/>, { hooksConfig });
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/SocketNewItemsNotice.tsx b/ui/shared/SocketNewItemsNotice.tsx
index 5bf2fc6520..4645145003 100644
--- a/ui/shared/SocketNewItemsNotice.tsx
+++ b/ui/shared/SocketNewItemsNotice.tsx
@@ -8,7 +8,7 @@ interface InjectedProps {
 
 interface Props {
   type?: 'transaction' | 'token_transfer' | 'deposit' | 'block';
-  children?: (props: InjectedProps) => JSX.Element;
+  children?: (props: InjectedProps) => React.JSX.Element;
   className?: string;
   url: string;
   alert?: string;
@@ -88,7 +88,7 @@ export const Desktop = ({ ...props }: Props) => {
       my={ props.isLoading ? '6px' : 0 }
       { ...props }
     >
-      { ({ content }) => <Tr><Td colSpan={ 100 } p={ 0 }>{ content }</Td></Tr> }
+      { ({ content }) => <Tr><Td colSpan={ 100 } p={ 0 } _first={{ p: 0 }} _last={{ p: 0 }}>{ content }</Td></Tr> }
     </SocketNewItemsNotice>
   );
 };
diff --git a/ui/shared/StickyPaginationWithText.tsx b/ui/shared/StickyPaginationWithText.tsx
index a51d86956f..efc3735592 100644
--- a/ui/shared/StickyPaginationWithText.tsx
+++ b/ui/shared/StickyPaginationWithText.tsx
@@ -9,7 +9,7 @@ import Pagination from './pagination/Pagination';
 type Props = {
   pagination: PaginationParams;
   text: React.ReactNode;
-}
+};
 
 const TextSeparator = ({ pagination, text }: Props) => {
   if (!pagination.isVisible) {
diff --git a/ui/shared/TableItemActionButtons.tsx b/ui/shared/TableItemActionButtons.tsx
index 76e5c4f327..3c59331ba8 100644
--- a/ui/shared/TableItemActionButtons.tsx
+++ b/ui/shared/TableItemActionButtons.tsx
@@ -8,7 +8,7 @@ type Props = {
   onEditClick: () => void;
   onDeleteClick: () => void;
   isLoading?: boolean;
-}
+};
 
 const TableItemActionButtons = ({ onEditClick, onDeleteClick, isLoading }: Props) => {
   const onFocusCapture = usePreventFocusAfterModalClosing();
diff --git a/ui/shared/Tabs/AdaptiveTabsList.tsx b/ui/shared/Tabs/AdaptiveTabsList.tsx
index 5f5ff81f1f..a249e2800a 100644
--- a/ui/shared/Tabs/AdaptiveTabsList.tsx
+++ b/ui/shared/Tabs/AdaptiveTabsList.tsx
@@ -1,5 +1,5 @@
 import type { StyleProps, ThemingProps } from '@chakra-ui/react';
-import { Box, Tab, TabList, useColorModeValue } from '@chakra-ui/react';
+import { Box, Skeleton, Tab, TabList, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import { useScrollDirection } from 'lib/contexts/scrollDirection';
@@ -24,6 +24,7 @@ interface Props extends TabsProps {
   activeTabIndex: number;
   onItemClick: (index: number) => void;
   themeProps: ThemingProps<'Tabs'>;
+  isLoading?: boolean;
 }
 
 const AdaptiveTabsList = (props: Props) => {
@@ -36,22 +37,24 @@ const AdaptiveTabsList = (props: Props) => {
     return [ ...props.tabs, menuButton ];
   }, [ props.tabs ]);
 
-  const { tabsCut, tabsRefs, listRef, rightSlotRef } = useAdaptiveTabs(tabsList, isMobile);
+  const { tabsCut, tabsRefs, listRef, rightSlotRef, leftSlotRef } = useAdaptiveTabs(tabsList, isMobile);
   const isSticky = useIsSticky(listRef, 5, props.stickyEnabled);
-  useScrollToActiveTab({ activeTabIndex: props.activeTabIndex, listRef, tabsRefs, isMobile });
+  useScrollToActiveTab({ activeTabIndex: props.activeTabIndex, listRef, tabsRefs, isMobile, isLoading: props.isLoading });
 
   return (
     <TabList
-      marginBottom={{ base: 6, lg: 8 }}
-      mx={{ base: '-16px', lg: 'unset' }}
-      px={{ base: '16px', lg: 'unset' }}
+      marginBottom={ 6 }
+      mx={{ base: '-12px', lg: 'unset' }}
+      px={{ base: '12px', lg: 'unset' }}
       flexWrap="nowrap"
+      alignItems="center"
       whiteSpace="nowrap"
       ref={ listRef }
       overflowX={{ base: 'auto', lg: 'initial' }}
       overscrollBehaviorX="contain"
       css={{
         'scroll-snap-type': 'x mandatory',
+        'scroll-padding-inline': '12px', // mobile page padding
         // hide scrollbar
         '&::-webkit-scrollbar': { /* Chromiums */
           display: 'none',
@@ -77,8 +80,13 @@ const AdaptiveTabsList = (props: Props) => {
           props.tabListProps)
       }
     >
-      { tabsList.map((tab, index) => {
+      { props.leftSlot && <Box ref={ leftSlotRef } { ...props.leftSlotProps }> { props.leftSlot } </Box> }
+      { tabsList.slice(0, props.isLoading ? 5 : Infinity).map((tab, index) => {
         if (!tab.id) {
+          if (props.isLoading) {
+            return null;
+          }
+
           return (
             <TabsMenu
               key="menu"
@@ -102,7 +110,7 @@ const AdaptiveTabsList = (props: Props) => {
 
         return (
           <Tab
-            key={ tab.id }
+            key={ tab.id.toString() }
             ref={ tabsRefs[index] }
             { ...(index < tabsCut ? {} : hiddenItemStyles) }
             scrollSnapAlign="start"
@@ -112,9 +120,12 @@ const AdaptiveTabsList = (props: Props) => {
                 color: 'inherit',
               },
             }}
+            { ...(index === props.activeTabIndex ? { 'data-selected': true } : {}) }
           >
-            { typeof tab.title === 'function' ? tab.title() : tab.title }
-            <TabCounter count={ tab.count }/>
+            <Skeleton isLoaded={ !props.isLoading }>
+              { typeof tab.title === 'function' ? tab.title() : tab.title }
+              <TabCounter count={ tab.count }/>
+            </Skeleton>
           </Tab>
         );
       }) }
diff --git a/ui/shared/Tabs/RoutedTabs.tsx b/ui/shared/Tabs/RoutedTabs.tsx
index a57b68f222..227dc81108 100644
--- a/ui/shared/Tabs/RoutedTabs.tsx
+++ b/ui/shared/Tabs/RoutedTabs.tsx
@@ -14,12 +14,27 @@ interface Props extends ThemingProps<'Tabs'> {
   tabListProps?: ChakraProps | (({ isSticky, activeTabIndex }: { isSticky: boolean; activeTabIndex: number }) => ChakraProps);
   rightSlot?: React.ReactNode;
   rightSlotProps?: ChakraProps;
+  leftSlot?: React.ReactNode;
+  leftSlotProps?: ChakraProps;
   stickyEnabled?: boolean;
   className?: string;
   onTabChange?: (index: number) => void;
+  isLoading?: boolean;
 }
 
-const RoutedTabs = ({ tabs, tabListProps, rightSlot, rightSlotProps, stickyEnabled, className, onTabChange, ...themeProps }: Props) => {
+const RoutedTabs = ({
+  tabs,
+  tabListProps,
+  rightSlot,
+  rightSlotProps,
+  leftSlot,
+  leftSlotProps,
+  stickyEnabled,
+  className,
+  onTabChange,
+  isLoading,
+  ...themeProps
+}: Props) => {
   const router = useRouter();
   const tabIndex = useTabIndexFromQuery(tabs);
   const tabsRef = useRef<HTMLDivElement>(null);
@@ -28,8 +43,9 @@ const RoutedTabs = ({ tabs, tabListProps, rightSlot, rightSlotProps, stickyEnabl
     const nextTab = tabs[index];
 
     const queryForPathname = _pickBy(router.query, (value, key) => router.pathname.includes(`[${ key }]`));
+    const tabId = Array.isArray(nextTab.id) ? nextTab.id[0] : nextTab.id;
     router.push(
-      { pathname: router.pathname, query: { ...queryForPathname, tab: nextTab.id } },
+      { pathname: router.pathname, query: { ...queryForPathname, tab: tabId } },
       undefined,
       { shallow: true },
     );
@@ -58,11 +74,14 @@ const RoutedTabs = ({ tabs, tabListProps, rightSlot, rightSlotProps, stickyEnabl
     <TabsWithScroll
       tabs={ tabs }
       tabListProps={ tabListProps }
+      leftSlot={ leftSlot }
+      leftSlotProps={ leftSlotProps }
       rightSlot={ rightSlot }
       rightSlotProps={ rightSlotProps }
       stickyEnabled={ stickyEnabled }
       onTabChange={ handleTabChange }
       defaultTabIndex={ tabIndex }
+      isLoading={ isLoading }
       { ...themeProps }
     />
   );
diff --git a/ui/shared/Tabs/TabCounter.tsx b/ui/shared/Tabs/TabCounter.tsx
index 691af5ba70..c619f2740b 100644
--- a/ui/shared/Tabs/TabCounter.tsx
+++ b/ui/shared/Tabs/TabCounter.tsx
@@ -7,7 +7,7 @@ const COUNTER_OVERLOAD = 50;
 
 type Props = {
   count?: number | null;
-}
+};
 
 const TabCounter = ({ count }: Props) => {
 
diff --git a/ui/shared/Tabs/TabsMenu.tsx b/ui/shared/Tabs/TabsMenu.tsx
index 36fd2fd81a..f125edbe02 100644
--- a/ui/shared/Tabs/TabsMenu.tsx
+++ b/ui/shared/Tabs/TabsMenu.tsx
@@ -1,6 +1,6 @@
 import type {
   ButtonProps } from '@chakra-ui/react';
-import { Popover,
+import {
   PopoverTrigger,
   PopoverContent,
   PopoverBody,
@@ -12,6 +12,8 @@ import React from 'react';
 
 import type { MenuButton, TabItem } from './types';
 
+import Popover from 'ui/shared/chakra/Popover';
+
 import TabCounter from './TabCounter';
 import { menuButton } from './utils';
 
@@ -41,6 +43,8 @@ const TabsMenu = ({ tabs, tabsCut, isActive, styles, onItemClick, buttonRef, act
     <Popover isLazy placement="bottom-end" key="more" isOpen={ isOpen } onClose={ onClose } onOpen={ onOpen } closeDelay={ 0 }>
       <PopoverTrigger>
         <Button
+          as="div"
+          role="button"
           variant="ghost"
           isActive={ isOpen || isActive }
           ref={ buttonRef }
@@ -54,7 +58,7 @@ const TabsMenu = ({ tabs, tabsCut, isActive, styles, onItemClick, buttonRef, act
         <PopoverBody display="flex" flexDir="column">
           { tabs.slice(tabsCut).map((tab, index) => (
             <Button
-              key={ tab.id }
+              key={ tab.id?.toString() }
               variant="ghost"
               onClick={ handleItemClick }
               isActive={ activeTab ? activeTab.id === tab.id : false }
diff --git a/ui/shared/Tabs/TabsSkeleton.tsx b/ui/shared/Tabs/TabsSkeleton.tsx
index 0606ec938e..2185565183 100644
--- a/ui/shared/Tabs/TabsSkeleton.tsx
+++ b/ui/shared/Tabs/TabsSkeleton.tsx
@@ -37,15 +37,15 @@ const TabsSkeleton = ({ className, tabs, size = 'md' }: Props) => {
     <Flex className={ className } my={ 8 } alignItems="center" overflow="hidden">
       { tabs.slice(0, tabIndex).map(({ title, id }) => (
         <SkeletonTabText
-          key={ id }
+          key={ id.toString() }
           title={ title }
           size={ size }
         />
       )) }
       { tabs.slice(tabIndex, tabIndex + 1).map(({ title, id }) => (
-        <Box key={ id } bgColor={ bgColor } py={ size === 'sm' ? 1 : 2 } borderRadius="base" flexShrink={ 0 }>
+        <Box key={ id.toString() } bgColor={ bgColor } py={ size === 'sm' ? 1 : 2 } borderRadius="base" flexShrink={ 0 }>
           <SkeletonTabText
-            key={ id }
+            key={ id.toString() }
             title={ title }
             size={ size }
           />
@@ -53,7 +53,7 @@ const TabsSkeleton = ({ className, tabs, size = 'md' }: Props) => {
       )) }
       { tabs.slice(tabIndex + 1).map(({ title, id }) => (
         <SkeletonTabText
-          key={ id }
+          key={ id.toString() }
           title={ title }
           size={ size }
         />
diff --git a/ui/shared/Tabs/TabsWithScroll.pw.tsx b/ui/shared/Tabs/TabsWithScroll.pw.tsx
index bd23336316..c323392cc1 100644
--- a/ui/shared/Tabs/TabsWithScroll.pw.tsx
+++ b/ui/shared/Tabs/TabsWithScroll.pw.tsx
@@ -1,13 +1,12 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import type { TabItem } from './types';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import TabsWithScroll from './TabsWithScroll';
 
-test('with counters', async({ mount }) => {
+test('with counters', async({ render }) => {
   const tabs: Array<TabItem> = [
     {
       id: 'tab1',
@@ -28,13 +27,7 @@ test('with counters', async({ mount }) => {
       component: null,
     },
   ];
-  const component = await mount(
-    <TestApp>
-      <TabsWithScroll tabs={ tabs }/>
-    </TestApp>,
-  );
-
+  const component = await render(<TabsWithScroll tabs={ tabs }/>);
   await component.getByText('Third tab').hover();
-
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/Tabs/TabsWithScroll.tsx b/ui/shared/Tabs/TabsWithScroll.tsx
index f09644b675..3b4503e0bb 100644
--- a/ui/shared/Tabs/TabsWithScroll.tsx
+++ b/ui/shared/Tabs/TabsWithScroll.tsx
@@ -22,9 +22,12 @@ export interface Props extends ThemingProps<'Tabs'> {
   tabListProps?: ChakraProps | (({ isSticky, activeTabIndex }: { isSticky: boolean; activeTabIndex: number }) => ChakraProps);
   rightSlot?: React.ReactNode;
   rightSlotProps?: ChakraProps;
+  leftSlot?: React.ReactNode;
+  leftSlotProps?: ChakraProps;
   stickyEnabled?: boolean;
   onTabChange?: (index: number) => void;
   defaultTabIndex?: number;
+  isLoading?: boolean;
   className?: string;
 }
 
@@ -34,9 +37,12 @@ const TabsWithScroll = ({
   tabListProps,
   rightSlot,
   rightSlotProps,
+  leftSlot,
+  leftSlotProps,
   stickyEnabled,
   onTabChange,
   defaultTabIndex,
+  isLoading,
   className,
   ...themeProps
 }: Props) => {
@@ -50,8 +56,11 @@ const TabsWithScroll = ({
   }, [ tabs ]);
 
   const handleTabChange = React.useCallback((index: number) => {
+    if (isLoading) {
+      return;
+    }
     onTabChange ? onTabChange(index) : setActiveTabIndex(index);
-  }, [ onTabChange ]);
+  }, [ isLoading, onTabChange ]);
 
   useEffect(() => {
     if (defaultTabIndex !== undefined) {
@@ -89,21 +98,30 @@ const TabsWithScroll = ({
       lazyBehavior={ lazyBehavior }
     >
       <AdaptiveTabsList
-        // the easiest and most readable way to achieve correct tab's cut recalculation when screen is resized
+        // the easiest and most readable way to achieve correct tab's cut recalculation when
+        //    - screen is resized or
+        //    - tabs list is changed when API data is loaded
         // is to do full re-render of the tabs list
-        // so we use screenWidth as a key for the TabsList component
-        key={ screenWidth }
+        // so we use screenWidth + tabIds as a key for the TabsList component
+        key={ isLoading + '_' + screenWidth + '_' + tabsList.map((tab) => tab.id).join(':') }
         tabs={ tabs }
         tabListProps={ tabListProps }
+        leftSlot={ leftSlot }
+        leftSlotProps={ leftSlotProps }
         rightSlot={ rightSlot }
         rightSlotProps={ rightSlotProps }
         stickyEnabled={ stickyEnabled }
         activeTabIndex={ activeTabIndex }
         onItemClick={ handleTabChange }
         themeProps={ themeProps }
+        isLoading={ isLoading }
       />
       <TabPanels>
-        { tabsList.map((tab) => <TabPanel padding={ 0 } key={ tab.id }>{ tab.component }</TabPanel>) }
+        { tabsList.map((tab) => (
+          <TabPanel padding={ 0 } key={ tab.id?.toString() || (typeof tab.title === 'string' ? tab.title : undefined) }>
+            { tab.component }
+          </TabPanel>
+        )) }
       </TabPanels>
     </Tabs>
   );
diff --git a/ui/shared/Tabs/__screenshots__/TabsWithScroll.pw.tsx_default_with-counters-1.png b/ui/shared/Tabs/__screenshots__/TabsWithScroll.pw.tsx_default_with-counters-1.png
index 455ae79077..829083c56a 100644
Binary files a/ui/shared/Tabs/__screenshots__/TabsWithScroll.pw.tsx_default_with-counters-1.png and b/ui/shared/Tabs/__screenshots__/TabsWithScroll.pw.tsx_default_with-counters-1.png differ
diff --git a/ui/shared/Tabs/types.ts b/ui/shared/Tabs/types.ts
index d790d5245e..f15bb79e6f 100644
--- a/ui/shared/Tabs/types.ts
+++ b/ui/shared/Tabs/types.ts
@@ -1,13 +1,15 @@
 import type React from 'react';
 
 export interface TabItem {
-  id: string;
+  // NOTE, in case of array of ids, when switching tabs, the first id will be used
+  // switching between other ids should be handled in the underlying component
+  id: string | Array<string>;
   title: string | (() => React.ReactNode);
   count?: number | null;
   component: React.ReactNode;
 }
 
-export type RoutedTab = TabItem & { subTabs?: Array<string> }
+export type RoutedTab = TabItem & { subTabs?: Array<string> };
 
 export type RoutedSubTab = Omit<TabItem, 'subTabs'>;
 
diff --git a/ui/shared/Tabs/useAdaptiveTabs.tsx b/ui/shared/Tabs/useAdaptiveTabs.tsx
index 4b4deea826..a8c944a39e 100644
--- a/ui/shared/Tabs/useAdaptiveTabs.tsx
+++ b/ui/shared/Tabs/useAdaptiveTabs.tsx
@@ -9,10 +9,12 @@ export default function useAdaptiveTabs(tabs: Array<RoutedTab | MenuButton>, dis
   const [ tabsRefs, setTabsRefs ] = React.useState<Array<React.RefObject<HTMLButtonElement>>>([]);
   const listRef = React.useRef<HTMLDivElement>(null);
   const rightSlotRef = React.useRef<HTMLDivElement>(null);
+  const leftSlotRef = React.useRef<HTMLDivElement>(null);
 
   const calculateCut = React.useCallback(() => {
     const listWidth = listRef.current?.getBoundingClientRect().width;
     const rightSlotWidth = rightSlotRef.current?.getBoundingClientRect().width || 0;
+    const leftSlotWidth = leftSlotRef.current?.getBoundingClientRect().width || 0;
     const tabWidths = tabsRefs.map((tab) => tab.current?.getBoundingClientRect().width);
     const menuWidth = tabWidths[tabWidths.length - 1];
 
@@ -33,11 +35,11 @@ export default function useAdaptiveTabs(tabs: Array<RoutedTab | MenuButton>, dis
 
       if (index === array.length - 1) {
         // last element
-        if (result.accWidth + item < listWidth - rightSlotWidth) {
+        if (result.accWidth + item < listWidth - rightSlotWidth - leftSlotWidth) {
           return { visibleNum: result.visibleNum + 1, accWidth: result.accWidth + item };
         }
       } else {
-        if (result.accWidth + item + menuWidth < listWidth - rightSlotWidth) {
+        if (result.accWidth + item + menuWidth < listWidth - rightSlotWidth - leftSlotWidth) {
           return { visibleNum: result.visibleNum + 1, accWidth: result.accWidth + item };
         }
       }
@@ -67,6 +69,7 @@ export default function useAdaptiveTabs(tabs: Array<RoutedTab | MenuButton>, dis
       tabsRefs,
       listRef,
       rightSlotRef,
+      leftSlotRef,
     };
   }, [ tabsCut, tabsRefs ]);
 }
diff --git a/ui/shared/Tabs/useScrollToActiveTab.tsx b/ui/shared/Tabs/useScrollToActiveTab.tsx
index 39cd0e491b..8d729899d1 100644
--- a/ui/shared/Tabs/useScrollToActiveTab.tsx
+++ b/ui/shared/Tabs/useScrollToActiveTab.tsx
@@ -5,19 +5,36 @@ interface Props {
   tabsRefs: Array<React.RefObject<HTMLButtonElement>>;
   listRef: React.RefObject<HTMLDivElement>;
   isMobile?: boolean;
+  isLoading?: boolean;
 }
 
-export default function useScrollToActiveTab({ activeTabIndex, tabsRefs, listRef, isMobile }: Props) {
+export default function useScrollToActiveTab({ activeTabIndex, tabsRefs, listRef, isMobile, isLoading }: Props) {
   React.useEffect(() => {
+    if (isLoading) {
+      return;
+    }
+
     if (activeTabIndex < tabsRefs.length && isMobile) {
       window.setTimeout(() => {
         const activeTabRef = tabsRefs[activeTabIndex];
 
         if (activeTabRef.current && listRef.current) {
-          const activeTabRect = activeTabRef.current.getBoundingClientRect();
+          const containerWidth = listRef.current.getBoundingClientRect().width;
+          const activeTabWidth = activeTabRef.current.getBoundingClientRect().width;
+          const left = tabsRefs.slice(0, activeTabIndex)
+            .map((tab) => tab.current?.getBoundingClientRect())
+            .filter(Boolean)
+            .map((rect) => rect.width)
+            .reduce((result, item) => result + item, 0);
+
+          const isWithinFirstPage = containerWidth > left + activeTabWidth;
+
+          if (isWithinFirstPage) {
+            return;
+          }
 
           listRef.current.scrollTo({
-            left: activeTabRect.left + listRef.current.scrollLeft - 16,
+            left,
             behavior: 'smooth',
           });
         }
@@ -27,5 +44,5 @@ export default function useScrollToActiveTab({ activeTabIndex, tabsRefs, listRef
     }
   // run only when tab index or device type is changed
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ activeTabIndex, isMobile ]);
+  }, [ activeTabIndex, isMobile, isLoading ]);
 }
diff --git a/ui/shared/Tabs/useTabIndexFromQuery.tsx b/ui/shared/Tabs/useTabIndexFromQuery.tsx
index 158d3ae520..9999ca8dc0 100644
--- a/ui/shared/Tabs/useTabIndexFromQuery.tsx
+++ b/ui/shared/Tabs/useTabIndexFromQuery.tsx
@@ -12,7 +12,13 @@ export default function useTabIndexFromQuery(tabs: Array<RoutedTab>) {
     return 0;
   }
 
-  const tabIndex = tabs.findIndex(({ id, subTabs }) => id === tabFromQuery || subTabs?.some((id) => id === tabFromQuery));
+  const tabIndex = tabs.findIndex(({ id, subTabs }) => {
+    if (Array.isArray(id)) {
+      return id.includes(tabFromQuery);
+    }
+
+    return id === tabFromQuery || subTabs?.some((id) => id === tabFromQuery);
+  });
 
   if (tabIndex < 0) {
     return 0;
diff --git a/ui/shared/TagInput.tsx b/ui/shared/TagInput.tsx
deleted file mode 100644
index c8a107ac25..0000000000
--- a/ui/shared/TagInput.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import {
-  Input,
-  FormControl,
-} from '@chakra-ui/react';
-import React from 'react';
-import type { ControllerRenderProps, FieldError, FieldValues, Path } from 'react-hook-form';
-
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
-
-const TAG_MAX_LENGTH = 35;
-
-type Props<TInputs extends FieldValues, TInputName extends Path<TInputs>> = {
-  field: ControllerRenderProps<TInputs, TInputName>;
-  error?: FieldError;
-  backgroundColor?: string;
-}
-
-function TagInput<Inputs extends FieldValues, Name extends Path<Inputs>>({ field, error, backgroundColor }: Props<Inputs, Name>) {
-  return (
-    <FormControl variant="floating" id="tag" isRequired backgroundColor={ backgroundColor }>
-      <Input
-        { ...field }
-        isInvalid={ Boolean(error) }
-        maxLength={ TAG_MAX_LENGTH }
-      />
-      <InputPlaceholder text="Private tag (max 35 characters)" error={ error }/>
-    </FormControl>
-  );
-}
-
-export default TagInput;
diff --git a/ui/shared/TextSeparator.tsx b/ui/shared/TextSeparator.tsx
index bc386c0ddb..ed929fafdb 100644
--- a/ui/shared/TextSeparator.tsx
+++ b/ui/shared/TextSeparator.tsx
@@ -2,8 +2,8 @@ import { chakra } from '@chakra-ui/react';
 import type { StyleProps } from '@chakra-ui/styled-system';
 import React from 'react';
 
-const TextSeparator = (props: StyleProps) => {
-  return <chakra.span mx={ 3 } { ...props }>|</chakra.span>;
+const TextSeparator = ({ id, ...props }: StyleProps & { id?: string }) => {
+  return <chakra.span mx={ 3 } id={ id } { ...props }>|</chakra.span>;
 };
 
 export default React.memo(TextSeparator);
diff --git a/ui/shared/TheadSticky.tsx b/ui/shared/TheadSticky.tsx
index 23a17e8690..966e870681 100644
--- a/ui/shared/TheadSticky.tsx
+++ b/ui/shared/TheadSticky.tsx
@@ -33,7 +33,7 @@ const TheadSticky = ({ top, children, ...restProps }: Props) => {
   const props = {
     ...restProps,
     position: 'sticky' as PositionProps['position'],
-    top: `${ top }px` || 0,
+    top: top ? `${ top }px` : 0,
     backgroundColor: useColorModeValue('white', 'black'),
     boxShadow: isSticky ? 'md' : 'none',
     zIndex: '1',
diff --git a/ui/shared/TimeAgoWithTooltip.tsx b/ui/shared/TimeAgoWithTooltip.tsx
new file mode 100644
index 0000000000..ca665840a2
--- /dev/null
+++ b/ui/shared/TimeAgoWithTooltip.tsx
@@ -0,0 +1,32 @@
+import { Skeleton, Tooltip, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import dayjs from 'lib/date/dayjs';
+import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+
+type Props = {
+  timestamp?: string | number | null;
+  fallbackText?: string;
+  isLoading?: boolean;
+  enableIncrement?: boolean;
+  className?: string;
+};
+
+const TimeAgoWithTooltip = ({ timestamp, fallbackText, isLoading, enableIncrement, className }: Props) => {
+  const timeAgo = useTimeAgoIncrement(timestamp || '', enableIncrement && !isLoading);
+  if (!timestamp && !fallbackText) {
+    return null;
+  }
+
+  const content = timestamp ?
+    <Tooltip label={ dayjs(timestamp).format('llll') }><span>{ timeAgo }</span></Tooltip> :
+    <span>{ fallbackText }</span>;
+
+  return (
+    <Skeleton isLoaded={ !isLoading } className={ className }>
+      { content }
+    </Skeleton>
+  );
+};
+
+export default chakra(TimeAgoWithTooltip);
diff --git a/ui/shared/TokenTransfer/TokenTransferList.pw.tsx b/ui/shared/TokenTransfer/TokenTransferList.pw.tsx
index d7137d0191..2545f7e924 100644
--- a/ui/shared/TokenTransfer/TokenTransferList.pw.tsx
+++ b/ui/shared/TokenTransfer/TokenTransferList.pw.tsx
@@ -1,9 +1,8 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
-import TestApp from 'playwright/TestApp';
+import { test, expect, devices } from 'playwright/lib';
 
 import TokenTransferList from './TokenTransferList';
 
@@ -24,29 +23,27 @@ const data = [
   tokenTransferMock.erc1155D,
 ];
 
-test('without tx info', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+test('without tx info', async({ render }) => {
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <TokenTransferList
         data={ data }
         showTxInfo={ false }
       />
-    </TestApp>,
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('with tx info', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+test('with tx info', async({ render }) => {
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <TokenTransferList
         data={ data }
         showTxInfo={ true }
       />
-    </TestApp>,
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
diff --git a/ui/shared/TokenTransfer/TokenTransferList.tsx b/ui/shared/TokenTransfer/TokenTransferList.tsx
index 492676f247..e243b3b95d 100644
--- a/ui/shared/TokenTransfer/TokenTransferList.tsx
+++ b/ui/shared/TokenTransfer/TokenTransferList.tsx
@@ -18,7 +18,7 @@ const TokenTransferList = ({ data, baseAddress, showTxInfo, enableTimeIncrement,
     <Box>
       { data.map((item, index) => (
         <TokenTransferListItem
-          key={ item.tx_hash + item.block_hash + item.log_index + (isLoading ? index : '') }
+          key={ item.transaction_hash + item.block_hash + item.log_index + (isLoading ? index : '') }
           { ...item }
           baseAddress={ baseAddress }
           showTxInfo={ showTxInfo }
diff --git a/ui/shared/TokenTransfer/TokenTransferListItem.tsx b/ui/shared/TokenTransfer/TokenTransferListItem.tsx
index 3ad382ea91..2fc519d2df 100644
--- a/ui/shared/TokenTransfer/TokenTransferListItem.tsx
+++ b/ui/shared/TokenTransfer/TokenTransferListItem.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+import { getTokenTypeName } from 'lib/token/tokenTypes';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import Tag from 'ui/shared/chakra/Tag';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
@@ -14,17 +14,19 @@ import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 
+import TimeAgoWithTooltip from '../TimeAgoWithTooltip';
+
 type Props = TokenTransfer & {
   baseAddress?: string;
   showTxInfo?: boolean;
   enableTimeIncrement?: boolean;
   isLoading?: boolean;
-}
+};
 
 const TokenTransferListItem = ({
   token,
   total,
-  tx_hash: txHash,
+  transaction_hash: txHash,
   from,
   to,
   baseAddress,
@@ -34,10 +36,9 @@ const TokenTransferListItem = ({
   enableTimeIncrement,
   isLoading,
 }: Props) => {
-  const timeAgo = useTimeAgoIncrement(timestamp, enableTimeIncrement);
-  const { usd, valueStr } = 'value' in total ? getCurrencyValue({
+  const { usd, valueStr } = total && 'value' in total && total.value !== null ? getCurrencyValue({
     value: total.value,
-    exchangeRate: token.exchange_rate,
+    exchangeRate: token?.exchange_rate,
     accuracy: 8,
     accuracyUsd: 2,
     decimals: total.decimals || '0',
@@ -47,34 +48,43 @@ const TokenTransferListItem = ({
     <ListItemMobile rowGap={ 3 } isAnimated>
       <Flex w="100%" justifyContent="space-between">
         <Flex flexWrap="wrap" rowGap={ 1 } mr={ showTxInfo && txHash ? 2 : 0 } columnGap={ 2 } overflow="hidden">
-          <TokenEntity
-            token={ token }
-            isLoading={ isLoading }
-            noSymbol
-            noCopy
-            w="auto"
-          />
-          <Tag flexShrink={ 0 } isLoading={ isLoading }>{ token.type }</Tag>
+          { token && (
+            <>
+              <TokenEntity
+                token={ token }
+                isLoading={ isLoading }
+                noSymbol
+                noCopy
+                w="auto"
+              />
+              <Tag flexShrink={ 0 } isLoading={ isLoading }>{ getTokenTypeName(token.type) }</Tag>
+            </>
+          ) }
           <Tag colorScheme="orange" isLoading={ isLoading }>{ getTokenTransferTypeText(type) }</Tag>
         </Flex>
         { showTxInfo && txHash && (
           <TxAdditionalInfo hash={ txHash } isMobile isLoading={ isLoading }/>
         ) }
       </Flex>
-      { 'token_id' in total && <NftEntity hash={ token.address } id={ total.token_id } isLoading={ isLoading }/> }
+      { total && 'token_id' in total && total.token_id !== null && token && (
+        <NftEntity hash={ token.address } id={ total.token_id } isLoading={ isLoading }/>
+      ) }
       { showTxInfo && txHash && (
         <Flex justifyContent="space-between" alignItems="center" lineHeight="24px" width="100%">
           <TxEntity
             isLoading={ isLoading }
             hash={ txHash }
-            truncation="constant"
+            truncation="constant_long"
             fontWeight="700"
           />
-          { timestamp && (
-            <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm">
-              <span>{ timeAgo }</span>
-            </Skeleton>
-          ) }
+          <TimeAgoWithTooltip
+            timestamp={ timestamp }
+            enableIncrement={ enableTimeIncrement }
+            isLoading={ isLoading }
+            color="text_secondary"
+            fontWeight="400"
+            fontSize="sm"
+          />
         </Flex>
       ) }
       <AddressFromTo
diff --git a/ui/shared/TokenTransfer/TokenTransferTable.pw.tsx b/ui/shared/TokenTransfer/TokenTransferTable.pw.tsx
index 83d41ce18e..e6df01eaa6 100644
--- a/ui/shared/TokenTransfer/TokenTransferTable.pw.tsx
+++ b/ui/shared/TokenTransfer/TokenTransferTable.pw.tsx
@@ -1,37 +1,34 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import TokenTransferTable from './TokenTransferTable';
 
-test('without tx info', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+test('without tx info', async({ render }) => {
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <TokenTransferTable
         data={ tokenTransferMock.mixTokens.items }
         top={ 0 }
         showTxInfo={ false }
       />
-    </TestApp>,
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('with tx info', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+test('with tx info', async({ render }) => {
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <TokenTransferTable
         data={ tokenTransferMock.mixTokens.items }
         top={ 0 }
         showTxInfo={ true }
       />
-    </TestApp>,
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
diff --git a/ui/shared/TokenTransfer/TokenTransferTable.tsx b/ui/shared/TokenTransfer/TokenTransferTable.tsx
index 3e4ba261c0..9a0261c213 100644
--- a/ui/shared/TokenTransfer/TokenTransferTable.tsx
+++ b/ui/shared/TokenTransfer/TokenTransferTable.tsx
@@ -34,15 +34,15 @@ const TokenTransferTable = ({
 
   return (
     <AddressHighlightProvider>
-      <Table variant="simple" size="sm" minW="950px">
+      <Table minW="950px">
         <Thead top={ top }>
           <Tr>
             { showTxInfo && <Th width="44px"></Th> }
-            <Th width="185px">Token</Th>
+            <Th width="230px">Token</Th>
             <Th width="160px">Token ID</Th>
-            { showTxInfo && <Th width="20%">Txn hash</Th> }
-            <Th width="50%">From/To</Th>
-            <Th width="30%" isNumeric>Value</Th>
+            { showTxInfo && <Th width="200px">Txn hash</Th> }
+            <Th width="60%">From/To</Th>
+            <Th width="40%" isNumeric>Value</Th>
           </Tr>
         </Thead>
         <Tbody>
@@ -57,7 +57,7 @@ const TokenTransferTable = ({
           ) }
           { data.map((item, index) => (
             <TokenTransferTableItem
-              key={ item.tx_hash + item.block_hash + item.log_index + (isLoading ? index : '') }
+              key={ item.transaction_hash + item.block_hash + item.log_index + (isLoading ? index : '') }
               { ...item }
               baseAddress={ baseAddress }
               showTxInfo={ showTxInfo }
diff --git a/ui/shared/TokenTransfer/TokenTransferTableItem.tsx b/ui/shared/TokenTransfer/TokenTransferTableItem.tsx
index 4dcf7e0ce6..9410305732 100644
--- a/ui/shared/TokenTransfer/TokenTransferTableItem.tsx
+++ b/ui/shared/TokenTransfer/TokenTransferTableItem.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+import { getTokenTypeName } from 'lib/token/tokenTypes';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import Tag from 'ui/shared/chakra/Tag';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
@@ -13,17 +13,19 @@ import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 
+import TimeAgoWithTooltip from '../TimeAgoWithTooltip';
+
 type Props = TokenTransfer & {
   baseAddress?: string;
   showTxInfo?: boolean;
   enableTimeIncrement?: boolean;
   isLoading?: boolean;
-}
+};
 
 const TokenTransferTableItem = ({
   token,
   total,
-  tx_hash: txHash,
+  transaction_hash: txHash,
   from,
   to,
   baseAddress,
@@ -33,10 +35,9 @@ const TokenTransferTableItem = ({
   enableTimeIncrement,
   isLoading,
 }: Props) => {
-  const timeAgo = useTimeAgoIncrement(timestamp, enableTimeIncrement);
-  const { usd, valueStr } = 'value' in total ? getCurrencyValue({
+  const { usd, valueStr } = total && 'value' in total && total.value !== null ? getCurrencyValue({
     value: total.value,
-    exchangeRate: token.exchange_rate,
+    exchangeRate: token?.exchange_rate,
     accuracy: 8,
     accuracyUsd: 2,
     decimals: total.decimals || '0',
@@ -52,20 +53,30 @@ const TokenTransferTableItem = ({
         </Td>
       ) }
       <Td>
-        <Flex flexDir="column" alignItems="flex-start" my="3px" rowGap={ 2 }>
-          <TokenEntity
-            token={ token }
-            isLoading={ isLoading }
-            noSymbol
-            noCopy
-            my="2px"
-          />
-          <Tag isLoading={ isLoading }>{ token.type }</Tag>
-          <Tag colorScheme="orange" isLoading={ isLoading }>{ getTokenTransferTypeText(type) }</Tag>
-        </Flex>
+        { token ? (
+          <>
+            <TokenEntity
+              token={ token }
+              isLoading={ isLoading }
+              noSymbol
+              noCopy
+              mt={ 1 }
+            />
+            <Flex columnGap={ 2 } rowGap={ 2 } mt={ 2 } flexWrap="wrap">
+              <Tag isLoading={ isLoading }>{ getTokenTypeName(token.type) }</Tag>
+              <Tag colorScheme="orange" isLoading={ isLoading }>{ getTokenTransferTypeText(type) }</Tag>
+            </Flex>
+          </>
+        ) : 'N/A' }
       </Td>
       <Td>
-        { 'token_id' in total && <NftEntity hash={ token.address } id={ total.token_id } isLoading={ isLoading }/> }
+        { total && 'token_id' in total && total.token_id !== null && token && (
+          <NftEntity
+            hash={ token.address }
+            id={ total.token_id }
+            isLoading={ isLoading }
+          />
+        ) }
       </Td>
       { showTxInfo && txHash && (
         <Td>
@@ -75,12 +86,17 @@ const TokenTransferTableItem = ({
             fontWeight={ 600 }
             noIcon
             mt="7px"
+            truncation="constant_long"
+          />
+          <TimeAgoWithTooltip
+            timestamp={ timestamp }
+            enableIncrement={ enableTimeIncrement }
+            isLoading={ isLoading }
+            color="text_secondary"
+            fontWeight="400"
+            mt="10px"
+            display="inline-block"
           />
-          { timestamp && (
-            <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" mt="10px" display="inline-block">
-              <span>{ timeAgo }</span>
-            </Skeleton>
-          ) }
         </Td>
       ) }
       <Td>
diff --git a/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_with-tx-info-1.png b/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_with-tx-info-1.png
index 8273d458dd..d1388597ad 100644
Binary files a/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_with-tx-info-1.png and b/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_with-tx-info-1.png differ
diff --git a/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_without-tx-info-1.png b/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_without-tx-info-1.png
index febb50852e..e06e5f2fe9 100644
Binary files a/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_without-tx-info-1.png and b/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_without-tx-info-1.png differ
diff --git a/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_with-tx-info-1.png b/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_with-tx-info-1.png
index a49c5a5a51..61c54524e9 100644
Binary files a/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_with-tx-info-1.png and b/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_with-tx-info-1.png differ
diff --git a/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_without-tx-info-1.png b/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_without-tx-info-1.png
index 5f28ff8195..940e69f885 100644
Binary files a/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_without-tx-info-1.png and b/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_without-tx-info-1.png differ
diff --git a/ui/shared/TokenTransferSnippet/TokenTransferSnippet.tsx b/ui/shared/TokenTransferSnippet/TokenTransferSnippet.tsx
new file mode 100644
index 0000000000..f62498d5d5
--- /dev/null
+++ b/ui/shared/TokenTransferSnippet/TokenTransferSnippet.tsx
@@ -0,0 +1,114 @@
+import { Flex, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type {
+  TokenTransfer,
+  Erc20TotalPayload,
+  Erc721TotalPayload,
+  Erc1155TotalPayload,
+  Erc404TotalPayload,
+} from 'types/api/tokenTransfer';
+
+import AddressFromTo from 'ui/shared/address/AddressFromTo';
+
+import TokenTransferSnippetFiat from './TokenTransferSnippetFiat';
+import TokenTransferSnippetNft from './TokenTransferSnippetNft';
+
+interface Props {
+  data: TokenTransfer;
+  noAddressIcons?: boolean;
+  isLoading?: boolean;
+}
+
+const TokenTransferSnippet = ({ data, isLoading, noAddressIcons = true }: Props) => {
+
+  const content = (() => {
+
+    if (isLoading) {
+      return <Skeleton w="250px" h={ 6 }/>;
+    }
+
+    switch (data.token?.type) {
+      case 'ERC-20': {
+        const total = data.total as Erc20TotalPayload | null;
+        if (total === null || total.value === null) {
+          return null;
+        }
+        return <TokenTransferSnippetFiat token={ data.token } value={ total.value } decimals={ total.decimals }/>;
+      }
+
+      case 'ERC-721': {
+        const total = data.total as Erc721TotalPayload;
+        return (
+          <TokenTransferSnippetNft
+            token={ data.token }
+            tokenId={ total.token_id }
+            value="1"
+          />
+        );
+      }
+
+      case 'ERC-1155': {
+        const total = data.total as Erc1155TotalPayload;
+        return (
+          <TokenTransferSnippetNft
+            key={ total.token_id }
+            token={ data.token }
+            tokenId={ total.token_id }
+            value={ total.value }
+          />
+        );
+      }
+
+      case 'ERC-404': {
+        const total = data.total as Erc404TotalPayload | null;
+        if (total === null) {
+          return null;
+        }
+
+        if (total.token_id !== null) {
+          return (
+            <TokenTransferSnippetNft
+              token={ data.token }
+              tokenId={ total.token_id }
+              value="1"
+            />
+          );
+        } else {
+          if (total.value === null) {
+            return null;
+          }
+
+          return <TokenTransferSnippetFiat token={ data.token } value={ total.value } decimals={ total.decimals }/>;
+        }
+      }
+      default: {
+        return null;
+      }
+    }
+  })();
+
+  return (
+    <Flex
+      alignItems="flex-start"
+      flexWrap="wrap"
+      columnGap={ 2 }
+      rowGap={ 3 }
+      flexDir="row"
+      w="100%"
+      fontWeight={ 500 }
+    >
+      <AddressFromTo
+        from={ data.from }
+        to={ data.to }
+        truncation="constant"
+        noIcon={ noAddressIcons }
+        fontWeight="500"
+        isLoading={ isLoading }
+      />
+      { content }
+    </Flex>
+  );
+};
+
+export default React.memo(TokenTransferSnippet);
diff --git a/ui/shared/TokenTransferSnippet/TokenTransferSnippetFiat.tsx b/ui/shared/TokenTransferSnippet/TokenTransferSnippetFiat.tsx
new file mode 100644
index 0000000000..282eb406aa
--- /dev/null
+++ b/ui/shared/TokenTransferSnippet/TokenTransferSnippetFiat.tsx
@@ -0,0 +1,37 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenInfo } from 'types/api/token';
+
+import getCurrencyValue from 'lib/getCurrencyValue';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+
+interface Props {
+  token: TokenInfo;
+  value: string;
+  decimals: string | null;
+}
+const FtTokenTransferSnippet = ({ token, value, decimals }: Props) => {
+  const { valueStr, usd } = getCurrencyValue({
+    value: value,
+    exchangeRate: token.exchange_rate,
+    accuracyUsd: 2,
+    decimals: decimals,
+  });
+
+  return (
+    <>
+      <chakra.span color="text_secondary">for</chakra.span>
+      <span>{ valueStr }</span>
+      <TokenEntity
+        token={{ ...token, name: token.symbol || token.name }}
+        noCopy
+        noSymbol
+        w="auto"
+      />
+      { usd && <chakra.span color="text_secondary">(${ usd })</chakra.span> }
+    </>
+  );
+};
+
+export default React.memo(FtTokenTransferSnippet);
diff --git a/ui/shared/TokenTransferSnippet/TokenTransferSnippetNft.tsx b/ui/shared/TokenTransferSnippet/TokenTransferSnippetNft.tsx
new file mode 100644
index 0000000000..7026f68a2d
--- /dev/null
+++ b/ui/shared/TokenTransferSnippet/TokenTransferSnippetNft.tsx
@@ -0,0 +1,64 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenInfo } from 'types/api/token';
+
+import NftEntity from 'ui/shared/entities/nft/NftEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+
+interface Props {
+  token: TokenInfo;
+  value: string;
+  tokenId: string | null;
+}
+
+const NftTokenTransferSnippet = ({ value, token, tokenId }: Props) => {
+  const num = value === '1' ? '' : value;
+
+  const tokenIdContent = (() => {
+    if (tokenId === null) {
+      // ERC-404 may not have an ID
+      if (token.type === 'ERC-404') {
+        return null;
+      }
+      return <chakra.span color="text_secondary"> N/A </chakra.span>;
+    }
+
+    return (
+      <NftEntity
+        hash={ token.address }
+        id={ tokenId }
+        fontWeight={ 600 }
+        icon={{ size: 'md' }}
+        maxW={{ base: '100%', lg: '150px' }}
+        w="auto"
+        flexShrink={ 0 }
+      />
+    );
+
+  })();
+
+  return (
+    <>
+      { num ? (
+        <>
+          <chakra.span color="text_secondary">for</chakra.span>
+          <span>{ num }</span>
+          <chakra.span color="text_secondary">token ID</chakra.span>
+        </>
+      ) : (
+        <chakra.span color="text_secondary">for token ID</chakra.span>
+      ) }
+      { tokenIdContent }
+      <chakra.span color="text_secondary">of</chakra.span>
+      <TokenEntity
+        token={ token }
+        noCopy
+        w="auto"
+        flexGrow={ 1 }
+      />
+    </>
+  );
+};
+
+export default React.memo(NftTokenTransferSnippet);
diff --git a/ui/shared/TransactionInput.tsx b/ui/shared/TransactionInput.tsx
deleted file mode 100644
index 1bc6642cec..0000000000
--- a/ui/shared/TransactionInput.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import {
-  Input,
-  FormControl,
-} from '@chakra-ui/react';
-import React from 'react';
-import type { ControllerRenderProps, FieldError, FieldValues } from 'react-hook-form';
-
-import { TRANSACTION_HASH_LENGTH } from 'lib/validations/transaction';
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
-
-type Props<Field> = {
-  field: Field;
-  error?: FieldError;
-  backgroundColor?: string;
-}
-
-function TransactionInput<Field extends Partial<ControllerRenderProps<FieldValues, 'transaction'>>>({ field, error, backgroundColor }: Props<Field>) {
-  return (
-    <FormControl variant="floating" id="transaction" isRequired backgroundColor={ backgroundColor }>
-      <Input
-        { ...field }
-        isInvalid={ Boolean(error) }
-        maxLength={ TRANSACTION_HASH_LENGTH }
-      />
-      <InputPlaceholder text="Transaction hash (0x...)" error={ error }/>
-    </FormControl>
-  );
-}
-
-export default TransactionInput;
diff --git a/ui/shared/TruncatedTextTooltip.tsx b/ui/shared/TruncatedTextTooltip.tsx
index 1f24937d7d..eaf7dfdd66 100644
--- a/ui/shared/TruncatedTextTooltip.tsx
+++ b/ui/shared/TruncatedTextTooltip.tsx
@@ -1,4 +1,5 @@
-import { Tooltip } from '@chakra-ui/react';
+import type { PlacementWithLogical } from '@chakra-ui/react';
+import { Tooltip, useDisclosure } from '@chakra-ui/react';
 import debounce from 'lodash/debounce';
 import React from 'react';
 import useFontFaceObserver from 'use-font-face-observer';
@@ -8,11 +9,13 @@ import { BODY_TYPEFACE } from 'theme/foundations/typography';
 interface Props {
   children: React.ReactNode;
   label: string;
+  placement?: PlacementWithLogical;
 }
 
-const TruncatedTextTooltip = ({ children, label }: Props) => {
+const TruncatedTextTooltip = ({ children, label, placement }: Props) => {
   const childRef = React.useRef<HTMLElement>(null);
   const [ isTruncated, setTruncated ] = React.useState(false);
+  const { isOpen, onToggle, onOpen, onClose } = useDisclosure();
 
   const isFontFaceLoaded = useFontFaceObserver([
     { family: BODY_TYPEFACE },
@@ -53,14 +56,36 @@ const TruncatedTextTooltip = ({ children, label }: Props) => {
   // and it is not cleared how to manage case with two or more children
   const child = React.Children.only(children) as React.ReactElement & {
     ref?: React.Ref<React.ReactNode>;
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
   };
+  const handleClick = React.useCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+    onToggle();
+  }, [ onToggle ]);
+
   const modifiedChildren = React.cloneElement(
     child,
-    { ref: childRef },
+    {
+      ref: childRef,
+      onClick: handleClick,
+      onMouseEnter: onOpen,
+      onMouseLeave: onClose,
+    },
   );
 
   if (isTruncated) {
-    return <Tooltip label={ label } maxW={{ base: '100vw', lg: '400px' }}>{ modifiedChildren }</Tooltip>;
+    return (
+      <Tooltip
+        label={ label }
+        maxW={{ base: 'calc(100vw - 8px)', lg: '400px' }}
+        placement={ placement }
+        isOpen={ isOpen }
+      >
+        { modifiedChildren }
+      </Tooltip>
+    );
   }
 
   return modifiedChildren;
diff --git a/ui/shared/TruncatedValue.tsx b/ui/shared/TruncatedValue.tsx
index 626039c5c7..3266df076b 100644
--- a/ui/shared/TruncatedValue.tsx
+++ b/ui/shared/TruncatedValue.tsx
@@ -1,3 +1,4 @@
+import type { PlacementWithLogical } from '@chakra-ui/react';
 import { Skeleton, chakra } from '@chakra-ui/react';
 import React from 'react';
 
@@ -7,11 +8,12 @@ interface Props {
   className?: string;
   isLoading?: boolean;
   value: string;
+  tooltipPlacement?: PlacementWithLogical;
 }
 
-const TruncatedValue = ({ className, isLoading, value }: Props) => {
+const TruncatedValue = ({ className, isLoading, value, tooltipPlacement }: Props) => {
   return (
-    <TruncatedTextTooltip label={ value }>
+    <TruncatedTextTooltip label={ value } placement={ tooltipPlacement }>
       <Skeleton
         className={ className }
         isLoaded={ !isLoading }
@@ -21,7 +23,7 @@ const TruncatedValue = ({ className, isLoading, value }: Props) => {
         textOverflow="ellipsis"
         height="fit-content"
       >
-        { value }
+        <span>{ value }</span>
       </Skeleton>
     </TruncatedTextTooltip>
   );
diff --git a/ui/shared/UserAvatar.tsx b/ui/shared/UserAvatar.tsx
deleted file mode 100644
index 818eaceda7..0000000000
--- a/ui/shared/UserAvatar.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { SkeletonCircle, Image } from '@chakra-ui/react';
-import React from 'react';
-
-import { useAppContext } from 'lib/contexts/app';
-import * as cookies from 'lib/cookies';
-import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
-import IconSvg from 'ui/shared/IconSvg';
-
-interface Props {
-  size: number;
-}
-
-const UserAvatar = ({ size }: Props) => {
-  const appProps = useAppContext();
-  const hasAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN, appProps.cookies));
-  const [ isImageLoadError, setImageLoadError ] = React.useState(false);
-  const { data, isFetched } = useFetchProfileInfo();
-
-  const sizeString = `${ size }px`;
-
-  const handleImageLoadError = React.useCallback(() => {
-    setImageLoadError(true);
-  }, []);
-
-  if (hasAuth && !isFetched) {
-    return <SkeletonCircle h={ sizeString } w={ sizeString }/>;
-  }
-
-  return (
-    <Image
-      flexShrink={ 0 }
-      src={ data?.avatar }
-      alt={ `Profile picture of ${ data?.name || data?.nickname || '' }` }
-      boxSize={ `${ size }px` }
-      borderRadius="full"
-      overflow="hidden"
-      fallback={ isImageLoadError || !data?.avatar ? <IconSvg name="profile" boxSize={ 5 }/> : undefined }
-      onError={ handleImageLoadError }
-    />
-  );
-};
-
-export default React.memo(UserAvatar);
diff --git a/ui/shared/Utilization/Utilization.pw.tsx b/ui/shared/Utilization/Utilization.pw.tsx
index 94d75faddf..f9ebb4e3dc 100644
--- a/ui/shared/Utilization/Utilization.pw.tsx
+++ b/ui/shared/Utilization/Utilization.pw.tsx
@@ -1,26 +1,17 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import Utilization from './Utilization';
 
 test.use({ viewport: { width: 100, height: 50 } });
 
-test('green color scheme +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Utilization value={ 0.423 }/>
-    </TestApp>,
-  );
+test('green color scheme +@dark-mode', async({ render }) => {
+  const component = await render(<Utilization value={ 0.423 }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('gray color scheme +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Utilization value={ 0.423 } colorScheme="gray"/>
-    </TestApp>,
-  );
+test('gray color scheme +@dark-mode', async({ render }) => {
+  const component = await render(<Utilization value={ 0.423 } colorScheme="gray"/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_dark-color-mode_gray-color-scheme-dark-mode-1.png b/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_dark-color-mode_gray-color-scheme-dark-mode-1.png
index 65f3877c09..7af2c3e917 100644
Binary files a/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_dark-color-mode_gray-color-scheme-dark-mode-1.png and b/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_dark-color-mode_gray-color-scheme-dark-mode-1.png differ
diff --git a/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_dark-color-mode_green-color-scheme-dark-mode-1.png b/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_dark-color-mode_green-color-scheme-dark-mode-1.png
index 373ecc63dc..42a7980991 100644
Binary files a/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_dark-color-mode_green-color-scheme-dark-mode-1.png and b/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_dark-color-mode_green-color-scheme-dark-mode-1.png differ
diff --git a/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_default_gray-color-scheme-dark-mode-1.png b/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_default_gray-color-scheme-dark-mode-1.png
index 5e2fbdc587..f415ec0df0 100644
Binary files a/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_default_gray-color-scheme-dark-mode-1.png and b/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_default_gray-color-scheme-dark-mode-1.png differ
diff --git a/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_default_green-color-scheme-dark-mode-1.png b/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_default_green-color-scheme-dark-mode-1.png
index a0f05ef907..d671e93566 100644
Binary files a/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_default_green-color-scheme-dark-mode-1.png and b/ui/shared/Utilization/__screenshots__/Utilization.pw.tsx_default_green-color-scheme-dark-mode-1.png differ
diff --git a/ui/shared/VerifyWith.tsx b/ui/shared/VerifyWith.tsx
new file mode 100644
index 0000000000..2be1e416a6
--- /dev/null
+++ b/ui/shared/VerifyWith.tsx
@@ -0,0 +1,75 @@
+import {
+  Button,
+  PopoverTrigger,
+  PopoverBody,
+  PopoverContent,
+  Show,
+  Hide,
+  chakra,
+  useDisclosure,
+  Grid,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import Popover from 'ui/shared/chakra/Popover';
+import IconSvg from 'ui/shared/IconSvg';
+import PopoverTriggerTooltip from 'ui/shared/PopoverTriggerTooltip';
+
+interface Props {
+  className?: string;
+  links: Array<React.ReactNode>;
+  label: string;
+  longText: string;
+  shortText?: string;
+}
+
+const VerifyWith = ({ className, links, label, longText, shortText }: Props) => {
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  return (
+    <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
+      <PopoverTrigger>
+        <PopoverTriggerTooltip label={ label } className={ className }>
+          <Button
+            size="sm"
+            variant="outline"
+            colorScheme="gray"
+            onClick={ onToggle }
+            isActive={ isOpen }
+            aria-label={ label }
+            fontWeight={ 500 }
+            px={ shortText ? 2 : 1 }
+            h="32px"
+            flexShrink={ 0 }
+          >
+            <IconSvg name="explorer" boxSize={ 5 }/>
+            <Show above="xl">
+              <chakra.span ml={ 1 }>{ longText }</chakra.span>
+            </Show>
+            { shortText && (
+              <Hide above="xl">
+                <chakra.span ml={ 1 }>{ shortText }</chakra.span>
+              </Hide>
+            ) }
+          </Button>
+        </PopoverTriggerTooltip>
+      </PopoverTrigger>
+      <PopoverContent w="auto">
+        <PopoverBody >
+          <chakra.span color="text_secondary" fontSize="xs">{ label }</chakra.span>
+          <Grid
+            alignItems="center"
+            templateColumns={ links.length > 1 ? 'auto auto' : '1fr' }
+            columnGap={ 4 }
+            rowGap={ 2 }
+            mt={ 3 }
+          >
+            { links }
+          </Grid>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default chakra(VerifyWith);
diff --git a/ui/shared/Web3ModalProvider.tsx b/ui/shared/Web3ModalProvider.tsx
index fc2f8553b7..1cf2d3744a 100644
--- a/ui/shared/Web3ModalProvider.tsx
+++ b/ui/shared/Web3ModalProvider.tsx
@@ -1,88 +1,81 @@
 import { useColorMode } from '@chakra-ui/react';
-import { jsonRpcProvider } from '@wagmi/core/providers/jsonRpc';
-import { createWeb3Modal, useWeb3ModalTheme, defaultWagmiConfig } from '@web3modal/wagmi/react';
+import { createAppKit, useAppKitTheme } from '@reown/appkit/react';
 import React from 'react';
-import { configureChains, WagmiConfig } from 'wagmi';
+import { WagmiProvider } from 'wagmi';
 
 import config from 'configs/app';
 import currentChain from 'lib/web3/currentChain';
+import wagmiConfig from 'lib/web3/wagmiConfig';
 import colors from 'theme/foundations/colors';
 import { BODY_TYPEFACE } from 'theme/foundations/typography';
 import zIndices from 'theme/foundations/zIndices';
 
 const feature = config.features.blockchainInteraction;
 
-const getConfig = () => {
+const init = () => {
   try {
-    if (!feature.isEnabled) {
-      throw new Error();
+    if (!feature.isEnabled || !wagmiConfig.adapter) {
+      return;
     }
 
-    const { chains } = configureChains(
-      [ currentChain ],
-      [
-        jsonRpcProvider({
-          rpc: () => ({
-            http: config.chain.rpcUrl || '',
-          }),
-        }),
-      ],
-    );
-
-    const wagmiConfig = defaultWagmiConfig({
-      chains,
-      projectId: feature.walletConnect.projectId,
-    });
-
-    createWeb3Modal({
-      wagmiConfig,
+    createAppKit({
+      adapters: [ wagmiConfig.adapter ],
+      networks: [ currentChain ],
+      metadata: {
+        name: `${ config.chain.name } explorer`,
+        description: `${ config.chain.name } explorer`,
+        url: config.app.baseUrl,
+        icons: [ config.UI.navigation.icon.default ].filter(Boolean),
+      },
       projectId: feature.walletConnect.projectId,
-      chains,
+      features: {
+        analytics: false,
+        email: true,
+        socials: [],
+        onramp: false,
+        swaps: false,
+      },
       themeVariables: {
         '--w3m-font-family': `${ BODY_TYPEFACE }, sans-serif`,
         '--w3m-accent': colors.blue[600],
         '--w3m-border-radius-master': '2px',
-        '--w3m-z-index': zIndices.modal,
+        '--w3m-z-index': zIndices.popover,
       },
+      featuredWalletIds: [],
+      allowUnsupportedChain: true,
     });
-
-    return { wagmiConfig };
-  } catch (error) {
-    return { };
-  }
+  } catch (error) {}
 };
 
-const { wagmiConfig } = getConfig();
+init();
 
 interface Props {
   children: React.ReactNode;
-  fallback?: JSX.Element | (() => JSX.Element);
 }
 
-const Fallback = ({ children, fallback }: Props) => {
-  return typeof fallback === 'function' ? fallback() : (fallback || <>{ children }</>); // eslint-disable-line react/jsx-no-useless-fragment
+const DefaultProvider = ({ children }: Props) => {
+  return (
+    <WagmiProvider config={ wagmiConfig.config }>
+      { children }
+    </WagmiProvider>
+  );
 };
 
-const Provider = ({ children, fallback }: Props) => {
+const Web3ModalProvider = ({ children }: Props) => {
   const { colorMode } = useColorMode();
-  const { setThemeMode } = useWeb3ModalTheme();
+  const { setThemeMode } = useAppKitTheme();
 
   React.useEffect(() => {
     setThemeMode(colorMode);
   }, [ colorMode, setThemeMode ]);
 
-  // not really necessary, but we have to make typescript happy
-  if (!wagmiConfig || !feature.isEnabled) {
-    return <Fallback fallback={ fallback }>{ children }</Fallback>;
-  }
-
   return (
-    <WagmiConfig config={ wagmiConfig }>
+    <DefaultProvider>
       { children }
-    </WagmiConfig>
+    </DefaultProvider>
   );
 };
 
-const Web3ModalProvider = wagmiConfig && feature.isEnabled ? Provider : Fallback;
+const Provider = feature.isEnabled ? Web3ModalProvider : DefaultProvider;
 
-export default Web3ModalProvider;
+export default Provider;
diff --git a/ui/shared/__screenshots__/NetworkExplorers.pw.tsx_default_base-view-1.png b/ui/shared/__screenshots__/NetworkExplorers.pw.tsx_default_base-view-1.png
new file mode 100644
index 0000000000..967d87378c
Binary files /dev/null and b/ui/shared/__screenshots__/NetworkExplorers.pw.tsx_default_base-view-1.png differ
diff --git a/ui/shared/__screenshots__/SocketNewItemsNotice.pw.tsx_dark-color-mode_2-new-items-in-validated-txs-list-dark-mode-1.png b/ui/shared/__screenshots__/SocketNewItemsNotice.pw.tsx_dark-color-mode_2-new-items-in-validated-txs-list-dark-mode-1.png
index 1a1dda6bda..738d50b8f7 100644
Binary files a/ui/shared/__screenshots__/SocketNewItemsNotice.pw.tsx_dark-color-mode_2-new-items-in-validated-txs-list-dark-mode-1.png and b/ui/shared/__screenshots__/SocketNewItemsNotice.pw.tsx_dark-color-mode_2-new-items-in-validated-txs-list-dark-mode-1.png differ
diff --git a/ui/shared/__screenshots__/SocketNewItemsNotice.pw.tsx_default_2-new-items-in-validated-txs-list-dark-mode-1.png b/ui/shared/__screenshots__/SocketNewItemsNotice.pw.tsx_default_2-new-items-in-validated-txs-list-dark-mode-1.png
index bf0d1655dd..f7185e4031 100644
Binary files a/ui/shared/__screenshots__/SocketNewItemsNotice.pw.tsx_default_2-new-items-in-validated-txs-list-dark-mode-1.png and b/ui/shared/__screenshots__/SocketNewItemsNotice.pw.tsx_default_2-new-items-in-validated-txs-list-dark-mode-1.png differ
diff --git a/ui/shared/__screenshots__/SocketNewItemsNotice.pw.tsx_default_connection-loss-1.png b/ui/shared/__screenshots__/SocketNewItemsNotice.pw.tsx_default_connection-loss-1.png
index 7c33fddf32..f874d892b1 100644
Binary files a/ui/shared/__screenshots__/SocketNewItemsNotice.pw.tsx_default_connection-loss-1.png and b/ui/shared/__screenshots__/SocketNewItemsNotice.pw.tsx_default_connection-loss-1.png differ
diff --git a/ui/shared/__screenshots__/SocketNewItemsNotice.pw.tsx_default_fetching-1.png b/ui/shared/__screenshots__/SocketNewItemsNotice.pw.tsx_default_fetching-1.png
index 6f067842d1..5729d66e72 100644
Binary files a/ui/shared/__screenshots__/SocketNewItemsNotice.pw.tsx_default_fetching-1.png and b/ui/shared/__screenshots__/SocketNewItemsNotice.pw.tsx_default_fetching-1.png differ
diff --git a/ui/shared/ad/AdBanner.tsx b/ui/shared/ad/AdBanner.tsx
index dd948cdb77..525866f414 100644
--- a/ui/shared/ad/AdBanner.tsx
+++ b/ui/shared/ad/AdBanner.tsx
@@ -1,44 +1,38 @@
-import { chakra, Skeleton } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import type { BannerPlatform } from './types';
+
 import config from 'configs/app';
 import { useAppContext } from 'lib/contexts/app';
 import * as cookies from 'lib/cookies';
 
-import AdbutlerBanner from './AdbutlerBanner';
-import CoinzillaBanner from './CoinzillaBanner';
-import SliseBanner from './SliseBanner';
+import AdBannerContent from './AdBannerContent';
 
 const feature = config.features.adsBanner;
 
-const AdBanner = ({ className, isLoading }: { className?: string; isLoading?: boolean }) => {
+interface Props {
+  className?: string;
+  isLoading?: boolean;
+  platform?: BannerPlatform;
+}
+
+const AdBanner = ({ className, isLoading, platform }: Props) => {
+  const provider = useAppContext().adBannerProvider;
+
   const hasAdblockCookie = cookies.get(cookies.NAMES.ADBLOCK_DETECTED, useAppContext().cookies);
 
-  if (!feature.isEnabled || hasAdblockCookie) {
+  if (!feature.isEnabled || hasAdblockCookie === 'true' || !provider) {
     return null;
   }
 
-  const content = (() => {
-    switch (feature.provider) {
-      case 'adbutler':
-        return <AdbutlerBanner/>;
-      case 'coinzilla':
-        return <CoinzillaBanner/>;
-      case 'slise':
-        return <SliseBanner/>;
-    }
-  })();
-
   return (
-    <Skeleton
+    <AdBannerContent
       className={ className }
-      isLoaded={ !isLoading }
-      borderRadius="none"
-      maxW={ feature.provider === 'adbutler' ? feature.adButler.config.desktop.width : '728px' }
-      w="100%"
-    >
-      { content }
-    </Skeleton>
+      isLoading={ isLoading }
+      provider={ provider }
+      platform={ platform }
+    />
   );
 };
 
diff --git a/ui/shared/ad/AdBannerContent.tsx b/ui/shared/ad/AdBannerContent.tsx
new file mode 100644
index 0000000000..ba54e20f04
--- /dev/null
+++ b/ui/shared/ad/AdBannerContent.tsx
@@ -0,0 +1,53 @@
+import { chakra, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { BannerPlatform } from './types';
+import type { AdBannerProviders } from 'types/client/adProviders';
+
+import config from 'configs/app';
+
+import AdbutlerBanner from './AdbutlerBanner';
+import CoinzillaBanner from './CoinzillaBanner';
+// import GetitBanner from './GetitBanner';
+import HypeBanner from './HypeBanner';
+import SliseBanner from './SliseBanner';
+
+const feature = config.features.adsBanner;
+
+interface Props {
+  className?: string;
+  isLoading?: boolean;
+  platform?: BannerPlatform;
+  provider: AdBannerProviders;
+}
+
+const AdBannerContent = ({ className, isLoading, provider, platform }: Props) => {
+  const content = (() => {
+    switch (provider) {
+      case 'adbutler':
+        return <AdbutlerBanner platform={ platform }/>;
+      case 'coinzilla':
+        return <CoinzillaBanner platform={ platform }/>;
+      // case 'getit':
+      //   return <GetitBanner platform={ platform }/>;
+      case 'hype':
+        return <HypeBanner platform={ platform }/>;
+      case 'slise':
+        return <SliseBanner platform={ platform }/>;
+    }
+  })();
+
+  return (
+    <Skeleton
+      className={ className }
+      isLoaded={ !isLoading }
+      borderRadius="none"
+      maxW={ ('adButler' in feature && feature.adButler) ? feature.adButler.config.desktop.width : '728px' }
+      w="100%"
+    >
+      { content }
+    </Skeleton>
+  );
+};
+
+export default chakra(AdBannerContent);
diff --git a/ui/shared/ad/AdbutlerBanner.tsx b/ui/shared/ad/AdbutlerBanner.tsx
index b6f5f6e6bd..702f88ffde 100644
--- a/ui/shared/ad/AdbutlerBanner.tsx
+++ b/ui/shared/ad/AdbutlerBanner.tsx
@@ -3,6 +3,8 @@ import { useRouter } from 'next/navigation';
 import Script from 'next/script';
 import React from 'react';
 
+import type { BannerProps } from './types';
+
 import config from 'configs/app';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import isBrowser from 'lib/isBrowser';
@@ -10,11 +12,26 @@ import { connectAdbutler, placeAd, ADBUTLER_ACCOUNT } from 'ui/shared/ad/adbutle
 
 const feature = config.features.adsBanner;
 
-const AdbutlerBanner = ({ className }: { className?: string }) => {
+const AdbutlerBanner = ({ className, platform }: BannerProps) => {
   const router = useRouter();
-  const isMobile = useIsMobile();
+
+  const isMobileViewport = useIsMobile();
+  const isMobile = platform === 'mobile' || isMobileViewport;
+
+  // On the home page there are two ad banners
+  //  - one in the stats section with prop "platform === mobile", should be hidden on mobile devices
+  //  - another - a regular ad banner, should be hidden on desktop devices
+  // The Adbutler provider doesn't work properly with 2 banners with the same id on the page
+  // So we use this flag to skip ad initialization for the first home page banner on mobile devices
+  // For all other pages this is not the case
+  const isHidden = (isMobileViewport && platform === 'mobile');
+
   React.useEffect(() => {
-    if (!feature.isEnabled || feature.provider !== 'adbutler') {
+    if (!('adButler' in feature)) {
+      return;
+    }
+
+    if (isHidden) {
       return;
     }
 
@@ -23,15 +40,15 @@ const AdbutlerBanner = ({ className }: { className?: string }) => {
       if (!window.AdButler.ads) {
         window.AdButler.ads = [];
       }
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore:
-      let plc = window[`plc${ feature.adButler.config.mobile.id }`] || 0;
       const adButlerConfig = isMobile ? feature.adButler.config.mobile : feature.adButler.config.desktop;
+
+      // @ts-ignore:
+      let plc = window[`plc${ adButlerConfig.id }`] || 0;
       const banner = document.getElementById('ad-banner');
       if (banner) {
         banner.innerHTML = '<' + 'div id="placement_' + adButlerConfig?.id + '_' + plc + '"></' + 'div>';
       }
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+
       // @ts-ignore:
       window.AdButler.ads.push({ handler: function(opt) {
         window.AdButler.register(
@@ -43,13 +60,43 @@ const AdbutlerBanner = ({ className }: { className?: string }) => {
         );
       }, opt: { place: plc++, keywords: abkw, domain: 'servedbyadbutler.com', click: 'CLICK_MACRO_PLACEHOLDER' } });
     }
-  }, [ router, isMobile ]);
+  }, [ router, isMobile, isHidden ]);
+
+  if (!('adButler' in feature)) {
+    return null;
+  }
+
+  const { width, height } = (() => {
+    switch (platform) {
+      case 'desktop':
+        return { width: `${ feature.adButler.config.desktop.width }px`, height: `${ feature.adButler.config.desktop.height }px` };
+      case 'mobile':
+        return { width: `${ feature.adButler.config.mobile.width }px`, height: `${ feature.adButler.config.mobile.height }px` };
+      default:
+        return {
+          width: {
+            base: `${ feature.adButler.config.mobile.width }px`,
+            lg: `${ feature.adButler.config.desktop.width }px`,
+          },
+          height: {
+            base: `${ feature.adButler.config.mobile.height }px`,
+            lg: `${ feature.adButler.config.desktop.height }px`,
+          },
+        };
+    }
+  })() ?? { width: '0', height: '0' };
+
+  const getElementId = (id: string) => id + (platform ? `_${ platform }` : '');
 
   return (
-    <Flex className={ className } id="adBanner" h={{ base: '100px', lg: '90px' }}>
-      <Script strategy="lazyOnload" id="ad-butler-1">{ connectAdbutler }</Script>
-      <Script strategy="lazyOnload" id="ad-butler-2">{ placeAd }</Script>
-      <div id="ad-banner"></div>
+    <Flex className={ className } id={ getElementId('adBanner') } h={ height } w={ width }>
+      { !isHidden && (
+        <>
+          <Script strategy="lazyOnload" id="ad-butler-1">{ connectAdbutler }</Script>
+          <Script strategy="lazyOnload" id="ad-butler-2">{ placeAd(platform) }</Script>
+          <div id="ad-banner"></div>
+        </>
+      ) }
     </Flex>
   );
 };
diff --git a/ui/shared/ad/CoinzillaBanner.tsx b/ui/shared/ad/CoinzillaBanner.tsx
index bfdb38fb88..373c777d53 100644
--- a/ui/shared/ad/CoinzillaBanner.tsx
+++ b/ui/shared/ad/CoinzillaBanner.tsx
@@ -2,27 +2,60 @@ import { Flex, chakra } from '@chakra-ui/react';
 import Script from 'next/script';
 import React from 'react';
 
+import type { BannerProps } from './types';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
 import isBrowser from 'lib/isBrowser';
 
-const CoinzillaBanner = ({ className }: { className?: string }) => {
+const CoinzillaBanner = ({ className, platform }: BannerProps) => {
   const isInBrowser = isBrowser();
+  const isMobileViewport = useIsMobile();
+
+  // On the home page there are two ad banners
+  //  - one in the stats section with prop "platform === mobile", should be hidden on mobile devices
+  //  - another - a regular ad banner, should be hidden on desktop devices
+  // The Coinzilla provider doesn't work properly with 2 banners with the same id on the page
+  // So we use this flag to skip ad initialization for the first home page banner on mobile devices
+  // For all other pages this is not the case
+  const isHidden = (isMobileViewport && platform === 'mobile');
+
+  const { width, height } = (() => {
+    switch (platform) {
+      case 'desktop':
+        return { width: 728, height: 90 };
+      case 'mobile':
+        return { width: 320, height: 100 };
+      default:
+        return { width: undefined, height: undefined };
+    }
+
+  })();
 
   React.useEffect(() => {
-    if (isInBrowser) {
+    if (isInBrowser && !isHidden) {
       window.coinzilla_display = window.coinzilla_display || [];
       const cDisplayPreferences = {
         zone: '26660bf627543e46851',
-        width: '728',
-        height: '90',
+        width: width ? String(width) : '728',
+        height: height ? String(height) : '90',
       };
       window.coinzilla_display.push(cDisplayPreferences);
     }
-  }, [ isInBrowser ]);
+  }, [ height, isInBrowser, isHidden, width ]);
 
   return (
-    <Flex className={ className } id="adBanner" h={{ base: '100px', lg: '90px' }}>
-      <Script strategy="lazyOnload" src="https://coinzillatag.com/lib/display.js"/>
-      <div className="coinzilla" data-zone="C-26660bf627543e46851"></div>
+    <Flex
+      className={ className }
+      id={ 'adBanner' + (platform ? `_${ platform }` : '') }
+      h={ height ? `${ height }px` : { base: '100px', lg: '90px' } }
+      w={ width ? `${ width }px` : undefined }
+    >
+      { !isHidden && (
+        <>
+          <Script strategy="lazyOnload" src="https://coinzillatag.com/lib/display.js"/>
+          <div className="coinzilla" data-zone="C-26660bf627543e46851"></div>
+        </>
+      ) }
     </Flex>
   );
 };
diff --git a/ui/shared/ad/CoinzillaTextAd.tsx b/ui/shared/ad/CoinzillaTextAd.tsx
index 91d54d833b..cca2282a0d 100644
--- a/ui/shared/ad/CoinzillaTextAd.tsx
+++ b/ui/shared/ad/CoinzillaTextAd.tsx
@@ -13,7 +13,7 @@ type AdData = {
     cta_button: string;
     impressionUrl?: string;
   };
-}
+};
 
 // const MOCK: AdData = {
 //   ad: {
@@ -25,7 +25,7 @@ type AdData = {
 //   },
 // };
 
-const CoinzillaTextAd = ({ className }: {className?: string}) => {
+const CoinzillaTextAd = ({ className }: { className?: string }) => {
   const [ adData, setAdData ] = React.useState<AdData | null>(null);
   const [ isLoading, setIsLoading ] = React.useState(true);
 
diff --git a/ui/shared/ad/GetitBanner.tsx b/ui/shared/ad/GetitBanner.tsx
new file mode 100644
index 0000000000..9ed8745b16
--- /dev/null
+++ b/ui/shared/ad/GetitBanner.tsx
@@ -0,0 +1,31 @@
+import { Flex, chakra } from '@chakra-ui/react';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import type { BannerProps } from './types';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import useAccount from 'lib/web3/useAccount';
+
+const GetitAdPlugin = dynamic(() => import('getit-sdk').then(module => module.GetitAdPlugin), { ssr: false });
+
+const GETIT_API_KEY = 'ZmGXVvwYUAW4yXL8RzWQHNKmpSyQmt3TDXsXUxqFqXPdoaiSSFyca3BOyunDcWdyOwTkX3UVVQel28qbjoOoWPxYVpPdNzbUNkAHyFyJX7Lk9TVcPDZKTQmwHlSMzO3a';
+
+const GetitBanner = ({ className, platform }: BannerProps) => {
+  const isMobile = Boolean(useIsMobile());
+  const { address } = useAccount();
+
+  return (
+    <Flex className={ className } h="90px" w={{ base: '270px', lg: platform === 'mobile' ? '270px' : undefined }}>
+      <GetitAdPlugin
+        key={ isMobile.toString() }
+        apiKey={ GETIT_API_KEY }
+        walletConnected={ address ? address : '' }
+        isMobile={ platform === 'mobile' || isMobile }
+        slotId="0"
+      />
+    </Flex>
+  );
+};
+
+export default chakra(GetitBanner);
diff --git a/ui/shared/ad/HypeBanner.tsx b/ui/shared/ad/HypeBanner.tsx
new file mode 100644
index 0000000000..132974ccae
--- /dev/null
+++ b/ui/shared/ad/HypeBanner.tsx
@@ -0,0 +1,68 @@
+import { Flex, chakra } from '@chakra-ui/react';
+import { Banner, setWalletAddresses } from '@hypelab/sdk-react';
+import Script from 'next/script';
+import React from 'react';
+
+import type { BannerProps } from './types';
+
+import useAccount from 'lib/web3/useAccount';
+
+import { hypeInit } from './hypeBannerScript';
+
+const DESKTOP_BANNER_SLUG = 'b1559fc3e7';
+const MOBILE_BANNER_SLUG = '668ed80a9e';
+
+const HypeBanner = ({ className, platform }: BannerProps) => {
+  const { address } = useAccount();
+
+  React.useEffect(() => {
+    if (address) {
+      setWalletAddresses([ address ]);
+    }
+  }, [ address ]);
+
+  const banner = (() => {
+    switch (platform) {
+      case 'desktop': {
+        return (
+          <Flex className={ className } w="728px" h="90px">
+            <Banner placement={ DESKTOP_BANNER_SLUG }/>
+          </Flex>
+        );
+      }
+      case 'mobile': {
+        return (
+          <Flex className={ className } w="320px" h="50px">
+            <Banner placement={ MOBILE_BANNER_SLUG }/>
+          </Flex>
+        );
+      }
+      default: {
+        return (
+          <>
+            <Flex className={ className } w="728px" h="90px" display={{ base: 'none', lg: 'flex' }}>
+              <Banner placement={ DESKTOP_BANNER_SLUG }/>
+            </Flex>
+            <Flex className={ className } w="320px" h="50px" display={{ base: 'flex', lg: 'none' }}>
+              <Banner placement={ MOBILE_BANNER_SLUG }/>
+            </Flex>
+          </>
+        );
+      }
+    }
+  })();
+
+  return (
+    <>
+      <Script
+        id="hypelab"
+        strategy="afterInteractive"
+      >
+        { hypeInit }
+      </Script>
+      { banner }
+    </>
+  );
+};
+
+export default chakra(HypeBanner);
diff --git a/ui/shared/ad/SliseBanner.tsx b/ui/shared/ad/SliseBanner.tsx
index 56ae2a7f3a..fda81b6209 100644
--- a/ui/shared/ad/SliseBanner.tsx
+++ b/ui/shared/ad/SliseBanner.tsx
@@ -2,9 +2,35 @@ import { Flex, chakra } from '@chakra-ui/react';
 import { SliseAd } from '@slise/embed-react';
 import React from 'react';
 
+import type { BannerProps } from './types';
+
 import config from 'configs/app';
 
-const SliseBanner = ({ className }: { className?: string }) => {
+const SliseBanner = ({ className, platform }: BannerProps) => {
+
+  if (platform === 'desktop') {
+    return (
+      <Flex className={ className } h="90px">
+        <SliseAd
+          slotId={ config.chain.name || '' }
+          pub="pub-10"
+          format="728x90"
+          style={{ width: '728px', height: '90px' }}/>
+      </Flex>
+    );
+  }
+
+  if (platform === 'mobile') {
+    return (
+      <Flex className={ className } h="90px">
+        <SliseAd
+          slotId={ config.chain.name || '' }
+          pub="pub-10"
+          format="270x90"
+          style={{ width: '270px', height: '90px' }}/>
+      </Flex>
+    );
+  }
 
   return (
     <>
diff --git a/ui/shared/ad/TextAd.tsx b/ui/shared/ad/TextAd.tsx
index 58fca43814..faa4ae90bb 100644
--- a/ui/shared/ad/TextAd.tsx
+++ b/ui/shared/ad/TextAd.tsx
@@ -7,10 +7,10 @@ import * as cookies from 'lib/cookies';
 
 import CoinzillaTextAd from './CoinzillaTextAd';
 
-const TextAd = ({ className }: {className?: string}) => {
+const TextAd = ({ className }: { className?: string }) => {
   const hasAdblockCookie = cookies.get(cookies.NAMES.ADBLOCK_DETECTED, useAppContext().cookies);
 
-  if (!config.features.adsText.isEnabled || hasAdblockCookie) {
+  if (!config.features.adsText.isEnabled || hasAdblockCookie === 'true') {
     return null;
   }
 
diff --git a/ui/shared/ad/adbutlerScript.ts b/ui/shared/ad/adbutlerScript.ts
index 6228a231bf..c2734fb9b0 100644
--- a/ui/shared/ad/adbutlerScript.ts
+++ b/ui/shared/ad/adbutlerScript.ts
@@ -1,17 +1,29 @@
 /* eslint-disable max-len */
+import type { BannerPlatform } from './types';
+
 import config from 'configs/app';
 
 export const ADBUTLER_ACCOUNT = 182226;
 
 export const connectAdbutler = `if (!window.AdButler){(function(){var s = document.createElement("script"); s.async = true; s.type = "text/javascript";s.src = 'https://servedbyadbutler.com/app.js';var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(s, n);}());}`;
 
-export const placeAd = (() => {
+export const placeAd = ((platform: BannerPlatform | undefined) => {
   const feature = config.features.adsBanner;
 
-  if (!feature.isEnabled || feature.provider !== 'adbutler') {
+  if (!('adButler' in feature)) {
     return;
   }
 
+  if (platform === 'mobile') {
+    return `
+      var AdButler = AdButler || {}; AdButler.ads = AdButler.ads || [];
+      var abkw = window.abkw || '';
+      var plc${ feature.adButler.config.mobile.id } = window.plc${ feature.adButler.config.mobile.id } || 0;
+      document.getElementById('ad-banner').innerHTML = '<'+'div id="placement_${ feature.adButler.config.mobile.id }_'+plc${ feature.adButler.config.mobile.id }+'"></'+'div>';
+      AdButler.ads.push({handler: function(opt){ AdButler.register(${ ADBUTLER_ACCOUNT }, ${ feature.adButler.config.mobile.id }, [${ feature.adButler.config.mobile.width },${ feature.adButler.config.mobile.height }], 'placement_${ feature.adButler.config.mobile.id }_'+opt.place, opt); }, opt: { place: plc${ feature.adButler.config.mobile.id }++, keywords: abkw, domain: 'servedbyadbutler.com', click:'CLICK_MACRO_PLACEHOLDER' }});
+    `;
+  }
+
   return `
     var AdButler = AdButler || {}; AdButler.ads = AdButler.ads || [];
     var abkw = window.abkw || '';
@@ -26,4 +38,4 @@ export const placeAd = (() => {
         AdButler.ads.push({handler: function(opt){ AdButler.register(${ ADBUTLER_ACCOUNT }, ${ feature.adButler.config.desktop.id }, [${ feature.adButler.config.desktop.width },${ feature.adButler.config.desktop.height }], 'placement_${ feature.adButler.config.desktop.id }_'+opt.place, opt); }, opt: { place: plc${ feature.adButler.config.desktop.id }++, keywords: abkw, domain: 'servedbyadbutler.com', click:'CLICK_MACRO_PLACEHOLDER' }});
     }
   `;
-})();
+});
diff --git a/ui/shared/ad/hypeBannerScript.ts b/ui/shared/ad/hypeBannerScript.ts
new file mode 100644
index 0000000000..bfe0cb10d8
--- /dev/null
+++ b/ui/shared/ad/hypeBannerScript.ts
@@ -0,0 +1,21 @@
+import config from 'configs/app';
+
+const PRODUCTION_PROPERTY_SLUG = '127fddd522';
+const HYPE_API_URL = 'https://api.hypelab.com';
+
+export const hypeInit = (() => {
+  const feature = config.features.adsBanner;
+
+  if (!feature.isEnabled || feature.provider !== 'hype') {
+    return;
+  }
+
+  return `!(function (h, y, p, e, l, a, b) {
+    ((l = document.createElement(h)).async = !0),
+      (l.src = y),
+      (l.onload = function () {
+        (a = { URL: p, propertySlug: e, environment: 'production' }), HypeLab.initialize(a);
+      }),
+      (b = document.getElementsByTagName(h)[0]).parentNode.insertBefore(l, b);
+  })('script', 'https://api.hypelab.com/v1/scripts/hp-sdk.js?v=0', '${ HYPE_API_URL }', '${ PRODUCTION_PROPERTY_SLUG }');`;
+})();
diff --git a/ui/shared/ad/types.ts b/ui/shared/ad/types.ts
new file mode 100644
index 0000000000..f14b625484
--- /dev/null
+++ b/ui/shared/ad/types.ts
@@ -0,0 +1,6 @@
+export type BannerPlatform = 'mobile' | 'desktop';
+
+export interface BannerProps {
+  className?: string;
+  platform?: BannerPlatform;
+}
diff --git a/ui/shared/address/AddressFromTo.pw.tsx b/ui/shared/address/AddressFromTo.pw.tsx
index 78124f3cd1..d8ca3ed9fa 100644
--- a/ui/shared/address/AddressFromTo.pw.tsx
+++ b/ui/shared/address/AddressFromTo.pw.tsx
@@ -1,62 +1,53 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as addressMock from 'mocks/address/address';
-import TestApp from 'playwright/TestApp';
-import * as configs from 'playwright/utils/configs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import AddressFromTo from './AddressFromTo';
 
-test.use({ viewport: configs.viewport.mobile });
+test.use({ viewport: pwConfig.viewport.mobile });
 
-test('outgoing txn', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressFromTo
-        from={ addressMock.withoutName }
-        to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
-        current={ addressMock.withoutName.hash }
-      />
-    </TestApp>,
+test('outgoing txn', async({ render }) => {
+  const component = await render(
+    <AddressFromTo
+      from={ addressMock.withoutName }
+      to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
+      current={ addressMock.withoutName.hash }
+    />,
   );
   await expect(component).toHaveScreenshot();
 });
 
-test('incoming txn', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressFromTo
-        from={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
-        to={ addressMock.withoutName }
-        current={ addressMock.withoutName.hash }
-      />
-    </TestApp>,
+test('incoming txn', async({ render }) => {
+  const component = await render(
+    <AddressFromTo
+      from={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
+      to={ addressMock.withoutName }
+      current={ addressMock.withoutName.hash }
+    />,
   );
   await expect(component).toHaveScreenshot();
 });
 
-test('compact mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressFromTo
-        from={ addressMock.withoutName }
-        to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
-        mode="compact"
-      />
-    </TestApp>,
+test('compact mode', async({ render }) => {
+  const component = await render(
+    <AddressFromTo
+      from={ addressMock.withoutName }
+      to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
+      mode="compact"
+    />,
   );
   await expect(component).toHaveScreenshot();
 });
 
-test('loading state', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressFromTo
-        from={ addressMock.withoutName }
-        to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
-        isLoading
-      />
-    </TestApp>,
+test('loading state', async({ render }) => {
+  const component = await render(
+    <AddressFromTo
+      from={ addressMock.withoutName }
+      to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
+      isLoading
+    />,
   );
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/address/AddressFromTo.tsx b/ui/shared/address/AddressFromTo.tsx
index e3d2763ee9..6ab0418b7a 100644
--- a/ui/shared/address/AddressFromTo.tsx
+++ b/ui/shared/address/AddressFromTo.tsx
@@ -1,5 +1,5 @@
 import type { ThemeTypings } from '@chakra-ui/react';
-import { Flex, chakra, useBreakpointValue } from '@chakra-ui/react';
+import { Flex, Grid, chakra, useBreakpointValue } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressParam } from 'types/api/addressParams';
@@ -25,7 +25,7 @@ interface Props {
   noIcon?: boolean;
 }
 
-const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading, tokenHash = '', truncation, noIcon }: Props) => {
+const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading, tokenHash = '', noIcon }: Props) => {
   const mode = useBreakpointValue(
     {
       base: (typeof modeProp === 'object' ? modeProp.base : modeProp),
@@ -52,8 +52,8 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
             noCopy={ current === from.hash }
             noIcon={ noIcon }
             tokenHash={ tokenHash }
-            truncation={ truncation }
-            maxW={ truncation === 'constant' ? undefined : 'calc(100% - 28px)' }
+            truncation="constant"
+            maxW="calc(100% - 28px)"
             w="min-content"
           />
         </Flex>
@@ -65,8 +65,8 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
             noCopy={ current === to.hash }
             noIcon={ noIcon }
             tokenHash={ tokenHash }
-            truncation={ truncation }
-            maxW={ truncation === 'constant' ? undefined : 'calc(100% - 28px)' }
+            truncation="constant"
+            maxW="calc(100% - 28px)"
             w="min-content"
             ml="28px"
           />
@@ -76,10 +76,10 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
   }
 
   const isOutgoing = current === from.hash;
-  const iconSizeWithMargins = (5 + (isOutgoing ? 4 : 2) + 3) * 4;
+  const iconSize = 20;
 
   return (
-    <Flex className={ className } alignItems="center">
+    <Grid className={ className } alignItems="center" gridTemplateColumns={ `minmax(auto, min-content) ${ iconSize }px minmax(auto, min-content)` }>
       <Entity
         address={ from }
         isLoading={ isLoading }
@@ -87,8 +87,7 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
         noCopy={ isOutgoing }
         noIcon={ noIcon }
         tokenHash={ tokenHash }
-        truncation={ truncation }
-        maxW={ truncation === 'constant' ? undefined : `calc(50% - ${ iconSizeWithMargins / 2 }px)` }
+        truncation="constant"
         mr={ isOutgoing ? 4 : 2 }
       />
       <AddressFromToIcon
@@ -103,12 +102,11 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
           noCopy={ current === to.hash }
           noIcon={ noIcon }
           tokenHash={ tokenHash }
-          truncation={ truncation }
-          maxW={ truncation === 'constant' ? undefined : `calc(50% - ${ iconSizeWithMargins / 2 }px)` }
+          truncation="constant"
           ml={ 3 }
         />
       ) }
-    </Flex>
+    </Grid>
   );
 };
 
diff --git a/ui/shared/address/AddressFromToIcon.pw.tsx b/ui/shared/address/AddressFromToIcon.pw.tsx
index e65b55479e..c1a6490630 100644
--- a/ui/shared/address/AddressFromToIcon.pw.tsx
+++ b/ui/shared/address/AddressFromToIcon.pw.tsx
@@ -1,21 +1,18 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import AddressFromToIcon from './AddressFromToIcon';
 
 test.use({ viewport: { width: 36, height: 36 } });
 
 [ 'in', 'out', 'self', 'unspecified' ].forEach((type) => {
-  test(`${ type } txn type +@dark-mode`, async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <Box p={ 2 }>
-          <AddressFromToIcon type={ type }/>
-        </Box>
-      </TestApp>,
+  test(`${ type } txn type +@dark-mode`, async({ render }) => {
+    const component = await render(
+      <Box p={ 2 }>
+        <AddressFromToIcon type={ type }/>
+      </Box>,
     );
     await expect(component).toHaveScreenshot();
   });
diff --git a/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_compact-mode-1.png b/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_compact-mode-1.png
index 073c5688d4..40fce705a4 100644
Binary files a/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_compact-mode-1.png and b/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_compact-mode-1.png differ
diff --git a/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_incoming-txn-1.png b/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_incoming-txn-1.png
index 3c3e387f1b..ab596d4026 100644
Binary files a/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_incoming-txn-1.png and b/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_incoming-txn-1.png differ
diff --git a/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_outgoing-txn-1.png b/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_outgoing-txn-1.png
index 1e28068da6..f86332ebf8 100644
Binary files a/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_outgoing-txn-1.png and b/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_outgoing-txn-1.png differ
diff --git a/ui/shared/address/utils.ts b/ui/shared/address/utils.ts
index 0e760aa9ed..38e33eb08a 100644
--- a/ui/shared/address/utils.ts
+++ b/ui/shared/address/utils.ts
@@ -25,7 +25,7 @@ export function getTxCourseType(from: string, to: string | undefined, current?:
 export const unknownAddress: Omit<AddressParam, 'hash'> = {
   is_contract: false,
   is_verified: false,
-  implementation_name: '',
+  implementations: null,
   name: '',
   private_tags: [],
   public_tags: [],
diff --git a/ui/shared/alerts/ServiceDegradationWarning.tsx b/ui/shared/alerts/ServiceDegradationWarning.tsx
index 2e9911b8c4..3dd49467d3 100644
--- a/ui/shared/alerts/ServiceDegradationWarning.tsx
+++ b/ui/shared/alerts/ServiceDegradationWarning.tsx
@@ -11,7 +11,7 @@ const ServiceDegradationWarning = ({ isLoading, className }: Props) => {
     <Skeleton className={ className } isLoaded={ !isLoading }>
       <Alert status="warning" colorScheme="gray" alignItems={{ base: 'flex-start', lg: 'center' }}>
         <Spinner size="sm" mr={ 2 } my={{ base: '3px', lg: 0 }} flexShrink={ 0 }/>
-        Data sync in progress... page will refresh automatically once transaction data is available
+        Data sync in progress... page will refresh automatically once data is available
       </Alert>
     </Skeleton>
   );
diff --git a/ui/shared/batch/ArbitrumL2TxnBatchDA.tsx b/ui/shared/batch/ArbitrumL2TxnBatchDA.tsx
new file mode 100644
index 0000000000..1acbe4ab28
--- /dev/null
+++ b/ui/shared/batch/ArbitrumL2TxnBatchDA.tsx
@@ -0,0 +1,48 @@
+import { Skeleton, Tag } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2';
+
+export interface Props {
+  dataContainer: ArbitrumL2TxnBatchesItem['batch_data_container'];
+  isLoading?: boolean;
+}
+
+const ArbitrumL2TxnBatchDA = ({ dataContainer, isLoading }: Props) => {
+  let text: string;
+
+  if (dataContainer === null) {
+    return null;
+  }
+
+  switch (dataContainer) {
+    case 'in_blob4844':
+      text = 'blob';
+      break;
+    case 'in_anytrust':
+      text = 'anytrust';
+      break;
+    case 'in_calldata':
+      text = 'calldata';
+      break;
+    case 'in_celestia':
+      text = 'celestia';
+      break;
+    default:
+      text = '';
+  }
+
+  if (!text) {
+    return null;
+  }
+
+  return (
+    <Skeleton isLoaded={ !isLoading }>
+      <Tag colorScheme={ dataContainer === 'in_blob4844' ? 'yellow' : 'gray' }>
+        { text }
+      </Tag>
+    </Skeleton>
+  );
+};
+
+export default ArbitrumL2TxnBatchDA;
diff --git a/ui/shared/batch/OptimisticL2TxnBatchDA.tsx b/ui/shared/batch/OptimisticL2TxnBatchDA.tsx
new file mode 100644
index 0000000000..93e6c6395f
--- /dev/null
+++ b/ui/shared/batch/OptimisticL2TxnBatchDA.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import type { OptimisticL2TxnBatchesItem } from 'types/api/optimisticL2';
+import type { ExcludeUndefined } from 'types/utils';
+
+import Tag from 'ui/shared/chakra/Tag';
+
+export interface Props {
+  container: ExcludeUndefined<OptimisticL2TxnBatchesItem['batch_data_container']>;
+  isLoading?: boolean;
+}
+
+const OptimisticL2TxnBatchDA = ({ container, isLoading }: Props) => {
+
+  const text = (() => {
+    switch (container) {
+      case 'in_blob4844':
+        return 'EIP-4844 blob';
+      case 'in_calldata':
+        return 'Calldata';
+      case 'in_celestia':
+        return 'Celestia blob';
+    }
+  })();
+
+  return (
+    <Tag colorScheme="yellow" isLoading={ isLoading }>
+      { text }
+    </Tag>
+  );
+};
+
+export default React.memo(OptimisticL2TxnBatchDA);
diff --git a/ui/shared/batch/ScrollL2TxnBatchDA.tsx b/ui/shared/batch/ScrollL2TxnBatchDA.tsx
new file mode 100644
index 0000000000..5e47a8d290
--- /dev/null
+++ b/ui/shared/batch/ScrollL2TxnBatchDA.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import type { ScrollL2TxnBatch } from 'types/api/scrollL2';
+import type { ExcludeUndefined } from 'types/utils';
+
+import Tag from 'ui/shared/chakra/Tag';
+
+export interface Props {
+  container: ExcludeUndefined<ScrollL2TxnBatch['data_availability']['batch_data_container']>;
+  isLoading?: boolean;
+}
+
+const ScrollL2TxnBatchDA = ({ container, isLoading }: Props) => {
+
+  const text = (() => {
+    switch (container) {
+      case 'in_blob4844':
+        return 'EIP-4844 blob';
+      case 'in_calldata':
+        return 'Calldata';
+    }
+  })();
+
+  return (
+    <Tag colorScheme="yellow" isLoading={ isLoading }>
+      { text }
+    </Tag>
+  );
+};
+
+export default React.memo(ScrollL2TxnBatchDA);
diff --git a/ui/shared/blob/BlobDataType.pw.tsx b/ui/shared/blob/BlobDataType.pw.tsx
new file mode 100644
index 0000000000..69b6a0e6ef
--- /dev/null
+++ b/ui/shared/blob/BlobDataType.pw.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { test, expect } from 'playwright/lib';
+
+import BlobDataType from './BlobDataType';
+
+test.use({ viewport: { width: 100, height: 50 } });
+
+test('image data', async({ render }) => {
+  const component = await render(<BlobDataType data="0x89504E470D0A1A0A0000000D494844520000003C0000003C0403"/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('raw data', async({ render }) => {
+  const component = await render(<BlobDataType data="0x010203040506"/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('text data', async({ render }) => {
+  const component = await render(<BlobDataType data="0x7b226e616d65223a22706963732f"/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/shared/blob/BlobDataType.tsx b/ui/shared/blob/BlobDataType.tsx
new file mode 100644
index 0000000000..6b0b36a3df
--- /dev/null
+++ b/ui/shared/blob/BlobDataType.tsx
@@ -0,0 +1,56 @@
+import { Flex, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import * as blobUtils from 'lib/blob';
+import type { IconName } from 'ui/shared/IconSvg';
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props {
+  data: string;
+  isLoading?: boolean;
+}
+
+const TYPES: Record<string, { iconName: IconName; label: string }> = {
+  image: { iconName: 'blobs/image', label: 'Image' },
+  text: { iconName: 'blobs/text', label: 'Text' },
+  raw: { iconName: 'blobs/raw', label: 'Raw' },
+};
+
+const BlobDataType = ({ data, isLoading }: Props) => {
+  const iconColor = useColorModeValue('gray.500', 'gray.400');
+
+  const guessedType = React.useMemo(() => {
+    if (isLoading) {
+      return;
+    }
+    return blobUtils.guessDataType(data);
+  }, [ data, isLoading ]);
+
+  const { iconName, label } = (() => {
+    if (guessedType?.mime?.startsWith('image/')) {
+      return TYPES.image;
+    }
+
+    if (
+      guessedType?.mime?.startsWith('text/') ||
+      [
+        'application/json',
+        'application/xml',
+        'application/javascript',
+      ].includes(guessedType?.mime || '')
+    ) {
+      return TYPES.text;
+    }
+
+    return TYPES.raw;
+  })();
+
+  return (
+    <Flex alignItems="center" columnGap={ 2 }>
+      <IconSvg name={ iconName } boxSize={ 5 } color={ iconColor } isLoading={ isLoading }/>
+      <Skeleton isLoaded={ !isLoading }>{ label }</Skeleton>
+    </Flex>
+  );
+};
+
+export default React.memo(BlobDataType);
diff --git a/ui/shared/blob/__screenshots__/BlobDataType.pw.tsx_default_image-data-1.png b/ui/shared/blob/__screenshots__/BlobDataType.pw.tsx_default_image-data-1.png
new file mode 100644
index 0000000000..d6f99a60a3
Binary files /dev/null and b/ui/shared/blob/__screenshots__/BlobDataType.pw.tsx_default_image-data-1.png differ
diff --git a/ui/shared/blob/__screenshots__/BlobDataType.pw.tsx_default_raw-data-1.png b/ui/shared/blob/__screenshots__/BlobDataType.pw.tsx_default_raw-data-1.png
new file mode 100644
index 0000000000..a19467a9dc
Binary files /dev/null and b/ui/shared/blob/__screenshots__/BlobDataType.pw.tsx_default_raw-data-1.png differ
diff --git a/ui/shared/blob/__screenshots__/BlobDataType.pw.tsx_default_text-data-1.png b/ui/shared/blob/__screenshots__/BlobDataType.pw.tsx_default_text-data-1.png
new file mode 100644
index 0000000000..91fbf22ca3
Binary files /dev/null and b/ui/shared/blob/__screenshots__/BlobDataType.pw.tsx_default_text-data-1.png differ
diff --git a/ui/shared/block/BlockGasUsed.tsx b/ui/shared/block/BlockGasUsed.tsx
new file mode 100644
index 0000000000..0c1ee6f416
--- /dev/null
+++ b/ui/shared/block/BlockGasUsed.tsx
@@ -0,0 +1,54 @@
+import { chakra, Tooltip, Box, useColorModeValue } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import config from 'configs/app';
+
+import GasUsedToTargetRatio from '../GasUsedToTargetRatio';
+import TextSeparator from '../TextSeparator';
+import Utilization from '../Utilization/Utilization';
+
+const rollupFeature = config.features.rollup;
+
+interface Props {
+  className?: string;
+  gasUsed?: string;
+  gasLimit: string;
+  gasTarget?: number;
+  isLoading?: boolean;
+}
+
+const BlockGasUsed = ({ className, gasUsed, gasLimit, gasTarget, isLoading }: Props) => {
+  const hasGasUtilization =
+    gasUsed && gasUsed !== '0' &&
+    (!rollupFeature.isEnabled || rollupFeature.type === 'optimistic' || rollupFeature.type === 'shibarium');
+
+  const separatorColor = useColorModeValue('gray.200', 'gray.700');
+
+  if (!hasGasUtilization) {
+    return null;
+  }
+
+  return (
+    <>
+      <Tooltip label={ isLoading ? undefined : 'Gas Used %' }>
+        <Box>
+          <Utilization
+            colorScheme="gray"
+            value={ BigNumber(gasUsed).dividedBy(BigNumber(gasLimit)).toNumber() }
+            isLoading={ isLoading }
+            className={ className }
+          />
+        </Box>
+      </Tooltip>
+      { gasTarget && (
+        <>
+          <TextSeparator color={ separatorColor } mx={ 1 }/>
+          <GasUsedToTargetRatio value={ gasTarget } isLoading={ isLoading }/>
+        </>
+      ) }
+    </>
+  );
+};
+
+export default React.memo(chakra(BlockGasUsed));
diff --git a/ui/shared/chakra/Menu.tsx b/ui/shared/chakra/Menu.tsx
new file mode 100644
index 0000000000..9d74cce995
--- /dev/null
+++ b/ui/shared/chakra/Menu.tsx
@@ -0,0 +1,10 @@
+import type { MenuProps } from '@chakra-ui/react';
+// eslint-disable-next-line no-restricted-imports
+import { Menu as MenuBase } from '@chakra-ui/react';
+import React from 'react';
+
+const Menu = (props: MenuProps) => {
+  return <MenuBase gutter={ 4 } { ...props }/>;
+};
+
+export default React.memo(Menu);
diff --git a/ui/shared/chakra/PinInput.tsx b/ui/shared/chakra/PinInput.tsx
new file mode 100644
index 0000000000..0dee1c39bd
--- /dev/null
+++ b/ui/shared/chakra/PinInput.tsx
@@ -0,0 +1,10 @@
+import type { PinInputProps, StyleProps } from '@chakra-ui/react';
+// eslint-disable-next-line no-restricted-imports
+import { PinInput as PinInputBase } from '@chakra-ui/react';
+import React from 'react';
+
+const PinInput = (props: PinInputProps & { bgColor?: StyleProps['bgColor'] }) => {
+  return <PinInputBase { ...props }/>;
+};
+
+export default React.memo(PinInput);
diff --git a/ui/shared/chakra/Popover.tsx b/ui/shared/chakra/Popover.tsx
new file mode 100644
index 0000000000..a5866e841a
--- /dev/null
+++ b/ui/shared/chakra/Popover.tsx
@@ -0,0 +1,10 @@
+import type { PopoverProps } from '@chakra-ui/react';
+// eslint-disable-next-line no-restricted-imports
+import { Popover as PopoverBase } from '@chakra-ui/react';
+import React from 'react';
+
+const Popover = (props: PopoverProps) => {
+  return <PopoverBase gutter={ 4 } { ...props }/>;
+};
+
+export default React.memo(Popover);
diff --git a/ui/shared/chakra/Tag.tsx b/ui/shared/chakra/Tag.tsx
index 08d2d6f130..f8e0cb762f 100644
--- a/ui/shared/chakra/Tag.tsx
+++ b/ui/shared/chakra/Tag.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
-interface Props extends TagProps {
+export interface Props extends TagProps {
   isLoading?: boolean;
 }
 
diff --git a/ui/shared/Toast.tsx b/ui/shared/chakra/Toast.tsx
similarity index 91%
rename from ui/shared/Toast.tsx
rename to ui/shared/chakra/Toast.tsx
index 67451e02f6..c886a67438 100644
--- a/ui/shared/Toast.tsx
+++ b/ui/shared/chakra/Toast.tsx
@@ -20,7 +20,7 @@ function getBgColor(status?: AlertStatus) {
   }
 }
 
-const Toast = ({ onClose, title, description, id, isClosable, status }: ToastProps) => {
+const Toast = ({ onClose, title, description, id, isClosable, status, icon }: ToastProps) => {
 
   const ids = id ?
     {
@@ -48,7 +48,7 @@ const Toast = ({ onClose, title, description, id, isClosable, status }: ToastPro
       maxWidth="400px"
     >
       <chakra.div flex="1" maxWidth="100%">
-        { title && <AlertTitle id={ ids?.title }>{ title }</AlertTitle> }
+        { title && <AlertTitle id={ ids?.title } display="flex" alignItems="center">{ icon }{ title }</AlertTitle> }
         { description && (
           <AlertDescription id={ ids?.description } display="block">
             { description }
diff --git a/ui/shared/chart/ChartArea.tsx b/ui/shared/chart/ChartArea.tsx
index 479e010508..5bb03281a5 100644
--- a/ui/shared/chart/ChartArea.tsx
+++ b/ui/shared/chart/ChartArea.tsx
@@ -11,10 +11,10 @@ interface Props extends React.SVGProps<SVGPathElement> {
   yScale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
   color?: string;
   data: Array<TimeChartItem>;
-  disableAnimation?: boolean;
+  noAnimation?: boolean;
 }
 
-const ChartArea = ({ id, xScale, yScale, color, data, disableAnimation, ...props }: Props) => {
+const ChartArea = ({ id, xScale, yScale, color, data, noAnimation, ...props }: Props) => {
   const ref = React.useRef(null);
   const theme = useTheme();
 
@@ -26,7 +26,7 @@ const ChartArea = ({ id, xScale, yScale, color, data, disableAnimation, ...props
   };
 
   React.useEffect(() => {
-    if (disableAnimation) {
+    if (noAnimation) {
       d3.select(ref.current).attr('opacity', 1);
       return;
     }
@@ -34,10 +34,11 @@ const ChartArea = ({ id, xScale, yScale, color, data, disableAnimation, ...props
       .duration(750)
       .ease(d3.easeBackIn)
       .attr('opacity', 1);
-  }, [ disableAnimation ]);
+  }, [ noAnimation ]);
 
   const d = React.useMemo(() => {
     const area = d3.area<TimeChartItem>()
+      .defined(({ isApproximate }) => !isApproximate)
       .x(({ date }) => xScale(date))
       .y1(({ value }) => yScale(value))
       .y0(() => yScale(yScale.domain()[0]))
diff --git a/ui/shared/chart/ChartAxis.tsx b/ui/shared/chart/ChartAxis.tsx
index 487e3ace61..203ba65ccf 100644
--- a/ui/shared/chart/ChartAxis.tsx
+++ b/ui/shared/chart/ChartAxis.tsx
@@ -5,13 +5,13 @@ import React from 'react';
 interface Props extends Omit<React.SVGProps<SVGGElement>, 'scale'> {
   type: 'left' | 'bottom';
   scale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
-  disableAnimation?: boolean;
+  noAnimation?: boolean;
   ticks: number;
   tickFormatGenerator?: (axis: d3.Axis<d3.NumberValue>) => (domainValue: d3.AxisDomain, index: number) => string;
   anchorEl?: SVGRectElement | null;
 }
 
-const ChartAxis = ({ type, scale, ticks, tickFormatGenerator, disableAnimation, anchorEl, ...props }: Props) => {
+const ChartAxis = ({ type, scale, ticks, tickFormatGenerator, noAnimation, anchorEl, ...props }: Props) => {
   const ref = React.useRef<SVGGElement>(null);
 
   const textColorToken = useColorModeValue('blackAlpha.600', 'whiteAlpha.500');
@@ -31,7 +31,7 @@ const ChartAxis = ({ type, scale, ticks, tickFormatGenerator, disableAnimation,
 
     const axisGroup = d3.select(ref.current);
 
-    if (disableAnimation) {
+    if (noAnimation) {
       axisGroup.call(axis);
     } else {
       axisGroup.transition().duration(750).ease(d3.easeLinear).call(axis);
@@ -42,7 +42,7 @@ const ChartAxis = ({ type, scale, ticks, tickFormatGenerator, disableAnimation,
       .attr('opacity', 1)
       .attr('color', textColor)
       .attr('font-size', '0.75rem');
-  }, [ scale, ticks, tickFormatGenerator, disableAnimation, type, textColor ]);
+  }, [ scale, ticks, tickFormatGenerator, noAnimation, type, textColor ]);
 
   React.useEffect(() => {
     if (!anchorEl) {
diff --git a/ui/shared/chart/ChartGridLine.tsx b/ui/shared/chart/ChartGridLine.tsx
index 2d140f25c1..3756b9239b 100644
--- a/ui/shared/chart/ChartGridLine.tsx
+++ b/ui/shared/chart/ChartGridLine.tsx
@@ -5,12 +5,12 @@ import React from 'react';
 interface Props extends Omit<React.SVGProps<SVGGElement>, 'scale'> {
   type: 'vertical' | 'horizontal';
   scale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
-  disableAnimation?: boolean;
+  noAnimation?: boolean;
   size: number;
   ticks: number;
 }
 
-const ChartGridLine = ({ type, scale, ticks, size, disableAnimation, ...props }: Props) => {
+const ChartGridLine = ({ type, scale, ticks, size, noAnimation, ...props }: Props) => {
   const ref = React.useRef<SVGGElement>(null);
 
   const strokeColor = useToken('colors', 'divider');
@@ -24,7 +24,7 @@ const ChartGridLine = ({ type, scale, ticks, size, disableAnimation, ...props }:
     const axis = axisGenerator(scale).ticks(ticks).tickSize(-size);
 
     const gridGroup = d3.select(ref.current);
-    if (disableAnimation) {
+    if (noAnimation) {
       gridGroup.call(axis);
     } else {
       gridGroup.transition().duration(750).ease(d3.easeLinear).call(axis);
@@ -32,7 +32,7 @@ const ChartGridLine = ({ type, scale, ticks, size, disableAnimation, ...props }:
     gridGroup.select('.domain').remove();
     gridGroup.selectAll('text').remove();
     gridGroup.selectAll('line').attr('stroke', strokeColor);
-  }, [ scale, ticks, size, disableAnimation, type, strokeColor ]);
+  }, [ scale, ticks, size, noAnimation, type, strokeColor ]);
 
   return <g ref={ ref } { ...props }/>;
 };
diff --git a/ui/shared/chart/ChartIntervalSelect.tsx b/ui/shared/chart/ChartIntervalSelect.tsx
new file mode 100644
index 0000000000..dcb9b0a394
--- /dev/null
+++ b/ui/shared/chart/ChartIntervalSelect.tsx
@@ -0,0 +1,49 @@
+import type { TagProps } from '@chakra-ui/react';
+import { Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { StatsInterval, StatsIntervalIds } from 'types/client/stats';
+import type { SelectOption } from 'ui/shared/select/types';
+
+import Select from 'ui/shared/select/Select';
+import TagGroupSelect from 'ui/shared/tagGroupSelect/TagGroupSelect';
+import { STATS_INTERVALS } from 'ui/stats/constants';
+
+const intervalList = Object.keys(STATS_INTERVALS).map((id: string) => ({
+  value: id,
+  label: STATS_INTERVALS[id as StatsIntervalIds].title,
+})) as Array<SelectOption>;
+
+const intervalListShort = Object.keys(STATS_INTERVALS).map((id: string) => ({
+  id: id,
+  title: STATS_INTERVALS[id as StatsIntervalIds].shortTitle,
+})) as Array<StatsInterval>;
+
+type Props = {
+  interval: StatsIntervalIds;
+  onIntervalChange: (newInterval: StatsIntervalIds) => void;
+  isLoading?: boolean;
+  selectTagSize?: TagProps['size'];
+};
+
+const ChartIntervalSelect = ({ interval, onIntervalChange, isLoading, selectTagSize }: Props) => {
+  return (
+    <>
+      <Skeleton display={{ base: 'none', lg: 'flex' }} borderRadius="base" isLoaded={ !isLoading }>
+        <TagGroupSelect<StatsIntervalIds> items={ intervalListShort } onChange={ onIntervalChange } value={ interval } tagSize={ selectTagSize }/>
+      </Skeleton>
+      <Select
+        options={ intervalList }
+        defaultValue={ interval }
+        onChange={ onIntervalChange }
+        isLoading={ isLoading }
+        w={{ base: '100%', lg: '136px' }}
+        display={{ base: 'flex', lg: 'none' }}
+        flexShrink={ 0 }
+        fontWeight={ 600 }
+      />
+    </>
+  );
+};
+
+export default React.memo(ChartIntervalSelect);
diff --git a/ui/shared/chart/ChartLine.tsx b/ui/shared/chart/ChartLine.tsx
index a96b7e84c5..2d34add516 100644
--- a/ui/shared/chart/ChartLine.tsx
+++ b/ui/shared/chart/ChartLine.tsx
@@ -3,56 +3,38 @@ import React from 'react';
 
 import type { TimeChartItem } from 'ui/shared/chart/types';
 
+import type { AnimationType } from './utils/animations';
+import { ANIMATIONS } from './utils/animations';
+import { getIncompleteDataLineSource } from './utils/formatters';
+
 interface Props extends React.SVGProps<SVGPathElement> {
   xScale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
   yScale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
   data: Array<TimeChartItem>;
-  animation: 'left' | 'fadeIn' | 'none';
+  animation: AnimationType;
 }
 
 const ChartLine = ({ xScale, yScale, data, animation, ...props }: Props) => {
-  const ref = React.useRef<SVGPathElement>(null);
-
-  // Define different types of animation that we can use
-  const animateLeft = React.useCallback(() => {
-    const totalLength = ref.current?.getTotalLength() || 0;
-    d3.select(ref.current)
-      .attr('opacity', 1)
-      .attr('stroke-dasharray', `${ totalLength },${ totalLength }`)
-      .attr('stroke-dashoffset', totalLength)
-      .transition()
-      .duration(750)
-      .ease(d3.easeLinear)
-      .attr('stroke-dashoffset', 0);
-  }, []);
-
-  const animateFadeIn = React.useCallback(() => {
-    d3.select(ref.current)
-      .transition()
-      .duration(750)
-      .ease(d3.easeLinear)
-      .attr('opacity', 1);
-  }, []);
-
-  const noneAnimation = React.useCallback(() => {
-    d3.select(ref.current).attr('opacity', 1);
-  }, []);
+  const dataPathRef = React.useRef<SVGPathElement>(null);
+  const incompleteDataPathRef = React.useRef<SVGPathElement>(null);
 
   React.useEffect(() => {
-    const ANIMATIONS = {
-      left: animateLeft,
-      fadeIn: animateFadeIn,
-      none: noneAnimation,
-    };
     const animationFn = ANIMATIONS[animation];
-    window.setTimeout(animationFn, 100);
-  }, [ animateLeft, animateFadeIn, noneAnimation, animation ]);
+    const timeoutId = window.setTimeout(() => {
+      dataPathRef.current && animationFn(dataPathRef.current);
+      incompleteDataPathRef.current && animationFn(incompleteDataPathRef.current);
+    }, 100);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [ animation ]);
 
   // Recalculate line length if scale has changed
   React.useEffect(() => {
     if (animation === 'left') {
-      const totalLength = ref.current?.getTotalLength();
-      d3.select(ref.current).attr(
+      const totalLength = dataPathRef.current?.getTotalLength();
+      d3.select(dataPathRef.current).attr(
         'stroke-dasharray',
         `${ totalLength },${ totalLength }`,
       );
@@ -65,15 +47,27 @@ const ChartLine = ({ xScale, yScale, data, animation, ...props }: Props) => {
     .curve(d3.curveMonotoneX);
 
   return (
-    <path
-      ref={ ref }
-      d={ line(data) || undefined }
-      strokeWidth={ 1 }
-      strokeLinecap="round"
-      fill="none"
-      opacity={ 0 }
-      { ...props }
-    />
+    <>
+      <path
+        ref={ incompleteDataPathRef }
+        d={ line(getIncompleteDataLineSource(data)) || undefined }
+        strokeWidth={ 1 }
+        strokeLinecap="round"
+        fill="none"
+        strokeDasharray="6 6"
+        opacity={ 0 }
+        { ...props }
+      />
+      <path
+        ref={ dataPathRef }
+        d={ line(data.filter(({ isApproximate }) => !isApproximate)) || undefined }
+        strokeWidth={ 1 }
+        strokeLinecap="round"
+        fill="none"
+        opacity={ 0 }
+        { ...props }
+      />
+    </>
   );
 };
 
diff --git a/ui/shared/chart/ChartMenu.tsx b/ui/shared/chart/ChartMenu.tsx
new file mode 100644
index 0000000000..6e2c1b832e
--- /dev/null
+++ b/ui/shared/chart/ChartMenu.tsx
@@ -0,0 +1,197 @@
+import {
+  IconButton,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Skeleton,
+  useClipboard,
+  useColorModeValue,
+  VisuallyHidden,
+} from '@chakra-ui/react';
+import domToImage from 'dom-to-image';
+import React from 'react';
+
+import type { TimeChartItem } from './types';
+import type { Resolution } from '@blockscout/stats-types';
+
+import dayjs from 'lib/date/dayjs';
+import isBrowser from 'lib/isBrowser';
+import saveAsCSV from 'lib/saveAsCSV';
+import Menu from 'ui/shared/chakra/Menu';
+import IconSvg from 'ui/shared/IconSvg';
+
+import FullscreenChartModal from './FullscreenChartModal';
+
+export type Props = {
+  items?: Array<TimeChartItem>;
+  title: string;
+  description?: string;
+  units?: string;
+  isLoading: boolean;
+  chartRef: React.RefObject<HTMLDivElement>;
+  chartUrl?: string;
+  resolution?: Resolution;
+  zoomRange?: [ Date, Date ];
+  handleZoom: (range: [ Date, Date ]) => void;
+  handleZoomReset: () => void;
+};
+
+const DOWNLOAD_IMAGE_SCALE = 5;
+
+const ChartMenu = ({
+  items,
+  title,
+  description,
+  units,
+  isLoading,
+  chartRef,
+  chartUrl,
+  resolution,
+  zoomRange,
+  handleZoom,
+  handleZoomReset,
+}: Props) => {
+  const pngBackgroundColor = useColorModeValue('white', 'black');
+  const [ isFullscreen, setIsFullscreen ] = React.useState(false);
+
+  const { onCopy } = useClipboard(chartUrl ?? '');
+
+  const isInBrowser = isBrowser();
+
+  const showChartFullscreen = React.useCallback(() => {
+    setIsFullscreen(true);
+  }, []);
+
+  const clearFullscreenChart = React.useCallback(() => {
+    setIsFullscreen(false);
+  }, []);
+
+  const handleFileSaveClick = React.useCallback(() => {
+    // wait for context menu to close
+    setTimeout(() => {
+      if (chartRef.current) {
+        domToImage.toPng(chartRef.current,
+          {
+            quality: 100,
+            bgcolor: pngBackgroundColor,
+            width: chartRef.current.offsetWidth * DOWNLOAD_IMAGE_SCALE,
+            height: chartRef.current.offsetHeight * DOWNLOAD_IMAGE_SCALE,
+            filter: (node) => node.nodeName !== 'BUTTON',
+            style: {
+              borderColor: 'transparent',
+              transform: `scale(${ DOWNLOAD_IMAGE_SCALE })`,
+              'transform-origin': 'top left',
+            },
+          })
+          .then((dataUrl) => {
+            const link = document.createElement('a');
+            link.download = `${ title } (Blockscout chart).png`;
+            link.href = dataUrl;
+            link.click();
+            link.remove();
+          });
+      }
+    }, 100);
+  }, [ pngBackgroundColor, title, chartRef ]);
+
+  const handleSVGSavingClick = React.useCallback(() => {
+    if (items) {
+      const headerRows = [
+        'Date', 'Value',
+      ];
+      const dataRows = items.map((item) => [
+        dayjs(item.date).format('YYYY-MM-DD'), String(item.value),
+      ]);
+
+      saveAsCSV(headerRows, dataRows, `${ title } (Blockscout stats)`);
+    }
+  }, [ items, title ]);
+
+  // TS thinks window.navigator.share can't be undefined, but it can
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const hasShare = isInBrowser && (window.navigator.share as any);
+
+  const handleShare = React.useCallback(async() => {
+    try {
+      await window.navigator.share({
+        title: title,
+        text: description,
+        url: chartUrl,
+      });
+    } catch (error) {}
+  }, [ title, description, chartUrl ]);
+
+  return (
+    <>
+      <Menu>
+        <Skeleton isLoaded={ !isLoading } borderRadius="base">
+          <MenuButton
+            w="36px"
+            h="32px"
+            icon={ <IconSvg name="dots" boxSize={ 4 } transform="rotate(-90deg)"/> }
+            colorScheme="gray"
+            variant="simple"
+            as={ IconButton }
+          >
+            <VisuallyHidden>
+              Open chart options menu
+            </VisuallyHidden>
+          </MenuButton>
+        </Skeleton>
+        <MenuList>
+          { chartUrl && (
+            <MenuItem
+              display="flex"
+              alignItems="center"
+              onClick={ hasShare ? handleShare : onCopy }
+              closeOnSelect={ hasShare ? false : true }
+            >
+              <IconSvg name={ hasShare ? 'share' : 'copy' } boxSize={ 5 } mr={ 3 }/>
+              { hasShare ? 'Share' : 'Copy link' }
+            </MenuItem>
+          ) }
+          <MenuItem
+            display="flex"
+            alignItems="center"
+            onClick={ showChartFullscreen }
+          >
+            <IconSvg name="scope" boxSize={ 5 } mr={ 3 }/>
+            View fullscreen
+          </MenuItem>
+          <MenuItem
+            display="flex"
+            alignItems="center"
+            onClick={ handleFileSaveClick }
+          >
+            <IconSvg name="files/image" boxSize={ 5 } mr={ 3 }/>
+            Save as PNG
+          </MenuItem>
+          <MenuItem
+            display="flex"
+            alignItems="center"
+            onClick={ handleSVGSavingClick }
+          >
+            <IconSvg name="files/csv" boxSize={ 5 } mr={ 3 }/>
+            Save as CSV
+          </MenuItem>
+        </MenuList>
+      </Menu>
+      { items && isFullscreen && (
+        <FullscreenChartModal
+          isOpen
+          items={ items }
+          title={ title }
+          description={ description }
+          onClose={ clearFullscreenChart }
+          units={ units }
+          resolution={ resolution }
+          zoomRange={ zoomRange }
+          handleZoom={ handleZoom }
+          handleZoomReset={ handleZoomReset }
+        />
+      ) }
+    </>
+  );
+};
+
+export default ChartMenu;
diff --git a/ui/shared/chart/ChartTooltip.tsx b/ui/shared/chart/ChartTooltip.tsx
index 88fcafa68a..611e58cb9f 100644
--- a/ui/shared/chart/ChartTooltip.tsx
+++ b/ui/shared/chart/ChartTooltip.tsx
@@ -1,12 +1,17 @@
-import { useToken, useColorModeValue } from '@chakra-ui/react';
 import * as d3 from 'd3';
 import React from 'react';
 
-import type { TimeChartItem, TimeChartData } from 'ui/shared/chart/types';
+import { Resolution } from '@blockscout/stats-types';
+import type { TimeChartData } from 'ui/shared/chart/types';
 
-import computeTooltipPosition from 'ui/shared/chart/utils/computeTooltipPosition';
-import type { Pointer } from 'ui/shared/chart/utils/pointerTracker';
-import { trackPointer } from 'ui/shared/chart/utils/pointerTracker';
+import ChartTooltipBackdrop, { useRenderBackdrop } from './tooltip/ChartTooltipBackdrop';
+import ChartTooltipContent, { useRenderContent } from './tooltip/ChartTooltipContent';
+import ChartTooltipLine, { useRenderLine } from './tooltip/ChartTooltipLine';
+import ChartTooltipPoint, { useRenderPoints } from './tooltip/ChartTooltipPoint';
+import ChartTooltipRow, { useRenderRows } from './tooltip/ChartTooltipRow';
+import ChartTooltipTitle, { useRenderTitle } from './tooltip/ChartTooltipTitle';
+import { trackPointer } from './tooltip/pointerTracker';
+import type { Pointer } from './tooltip/pointerTracker';
 
 interface Props {
   width?: number;
@@ -16,151 +21,74 @@ interface Props {
   xScale: d3.ScaleTime<number, number>;
   yScale: d3.ScaleLinear<number, number>;
   anchorEl: SVGRectElement | null;
+  noAnimation?: boolean;
+  resolution?: Resolution;
 }
 
-const TEXT_LINE_HEIGHT = 12;
-const PADDING = 16;
-const LINE_SPACE = 10;
-const POINT_SIZE = 16;
-const LABEL_WIDTH = 80;
-
-const ChartTooltip = ({ xScale, yScale, width, tooltipWidth = 200, height, data, anchorEl, ...props }: Props) => {
-  const lineColor = useToken('colors', 'gray.400');
-  const titleColor = useToken('colors', 'blue.100');
-  const textColor = useToken('colors', 'white');
-  const markerBgColor = useToken('colors', useColorModeValue('black', 'white'));
-  const markerBorderColor = useToken('colors', useColorModeValue('white', 'black'));
-  const bgColor = useToken('colors', 'blackAlpha.900');
-
-  const ref = React.useRef(null);
+const ChartTooltip = ({
+  xScale,
+  yScale,
+  width,
+  tooltipWidth = 200,
+  height,
+  data,
+  anchorEl,
+  noAnimation,
+  resolution,
+  ...props
+}: Props) => {
+  const ref = React.useRef<SVGGElement>(null);
   const trackerId = React.useRef<number>();
   const isVisible = React.useRef(false);
 
-  const drawLine = React.useCallback(
-    (x: number) => {
-      d3.select(ref.current)
-        .select('.ChartTooltip__line')
-        .attr('x1', x)
-        .attr('x2', x)
-        .attr('y1', 0)
-        .attr('y2', height || 0);
-    },
-    [ ref, height ],
-  );
-
-  const drawContent = React.useCallback(
-    (x: number, y: number) => {
-      const tooltipContent = d3.select(ref.current).select('.ChartTooltip__content');
-
-      tooltipContent.attr('transform', (cur, i, nodes) => {
-        const node = nodes[i] as SVGGElement | null;
-        const { width: nodeWidth, height: nodeHeight } = node?.getBoundingClientRect() || { width: 0, height: 0 };
-        const [ translateX, translateY ] = computeTooltipPosition({
-          canvasWidth: width || 0,
-          canvasHeight: height || 0,
-          nodeWidth,
-          nodeHeight,
-          pointX: x,
-          pointY: y,
-          offset: POINT_SIZE,
-        });
-        return `translate(${ translateX }, ${ translateY })`;
-      });
+  const transitionDuration = !noAnimation ? 100 : null;
 
-      const date = xScale.invert(x);
-      const dateLabel = data[0].items.find((item) => item.date.getTime() === date.getTime())?.dateLabel;
-
-      tooltipContent
-        .select('.ChartTooltip__contentDate')
-        .text(dateLabel || d3.timeFormat('%e %b %Y')(xScale.invert(x)));
-    },
-    [ xScale, data, width, height ],
-  );
-
-  const updateDisplayedValue = React.useCallback((d: TimeChartItem, i: number) => {
-    const nodes = d3.select(ref.current)
-      .selectAll<Element, TimeChartData>('.ChartTooltip__value')
-      .filter((td, tIndex) => tIndex === i)
-      .text(
-        (data[i].valueFormatter?.(d.value) || d.value.toLocaleString()) +
-        (data[i].units ? ` ${ data[i].units }` : ''),
-      )
-      .nodes();
-
-    const widthLimit = tooltipWidth - 2 * PADDING - LABEL_WIDTH;
-    const width = nodes.map((node) => node?.getBoundingClientRect?.().width);
-    const maxNodeWidth = Math.max(...width);
-    d3.select(ref.current)
-      .select('.ChartTooltip__contentBg')
-      .attr('width', tooltipWidth + Math.max(0, (maxNodeWidth - widthLimit)));
-
-  }, [ data, tooltipWidth ]);
-
-  const drawPoints = React.useCallback((x: number) => {
-    const xDate = xScale.invert(x);
-    const bisectDate = d3.bisector<TimeChartItem, unknown>((d) => d.date).left;
-    let baseXPos = 0;
-    let baseYPos = 0;
-
-    d3.select(ref.current)
-      .selectAll('.ChartTooltip__point')
-      .attr('transform', (cur, i) => {
-        const index = bisectDate(data[i].items, xDate, 1);
-        const d0 = data[i].items[index - 1] as TimeChartItem | undefined;
-        const d1 = data[i].items[index] as TimeChartItem | undefined;
-        const d = (() => {
-          if (!d0) {
-            return d1;
-          }
-          if (!d1) {
-            return d0;
-          }
-          return xDate.getTime() - d0.date.getTime() > d1.date.getTime() - xDate.getTime() ? d1 : d0;
-        })();
-
-        if (d?.date === undefined && d?.value === undefined) {
-          // move point out of container
-          return 'translate(-100,-100)';
-        }
-
-        const xPos = xScale(d.date);
-        const yPos = yScale(d.value);
-
-        if (i === 0) {
-          baseXPos = xPos;
-          baseYPos = yPos;
-        }
-
-        updateDisplayedValue(d, i);
-
-        return `translate(${ xPos }, ${ yPos })`;
-      });
-
-    return [ baseXPos, baseYPos ];
-  }, [ data, updateDisplayedValue, xScale, yScale ]);
+  const renderLine = useRenderLine(ref, height);
+  const renderContent = useRenderContent(ref, { chart: { width, height }, transitionDuration });
+  const renderPoints = useRenderPoints(ref, { data, xScale, yScale });
+  const renderTitle = useRenderTitle(ref);
+  const renderRows = useRenderRows(ref, { data, xScale, minWidth: tooltipWidth });
+  const renderBackdrop = useRenderBackdrop(ref, { seriesNum: data.length, transitionDuration });
 
   const draw = React.useCallback((pointer: Pointer) => {
     if (pointer.point) {
-      const [ baseXPos, baseYPos ] = drawPoints(pointer.point[0]);
-      drawLine(baseXPos);
-      drawContent(baseXPos, baseYPos);
+      const { x, y, currentPoints } = renderPoints(pointer.point[0]);
+      const isIncompleteData = currentPoints.some(({ item }) => item.isApproximate);
+      renderLine(x);
+      renderContent(x, y);
+      renderTitle(isIncompleteData);
+      const { width } = renderRows(x, currentPoints);
+      renderBackdrop(width, isIncompleteData);
     }
-  }, [ drawPoints, drawLine, drawContent ]);
+  }, [ renderPoints, renderLine, renderContent, renderTitle, renderRows, renderBackdrop ]);
 
   const showContent = React.useCallback(() => {
     if (!isVisible.current) {
-      d3.select(ref.current).attr('opacity', 1);
-      d3.select(ref.current)
-        .selectAll('.ChartTooltip__point')
-        .attr('opacity', 1);
+      if (transitionDuration) {
+        d3.select(ref.current)
+          .transition()
+          .delay(transitionDuration)
+          .attr('opacity', 1);
+      } else {
+        d3.select(ref.current)
+          .attr('opacity', 1);
+      }
       isVisible.current = true;
     }
-  }, []);
+  }, [ transitionDuration ]);
 
   const hideContent = React.useCallback(() => {
-    d3.select(ref.current).attr('opacity', 0);
+    if (transitionDuration) {
+      d3.select(ref.current)
+        .transition()
+        .delay(transitionDuration)
+        .attr('opacity', 0);
+    } else {
+      d3.select(ref.current)
+        .attr('opacity', 0);
+    }
     isVisible.current = false;
-  }, []);
+  }, [ transitionDuration ]);
 
   const createPointerTracker = React.useCallback((event: PointerEvent, isSubsequentCall?: boolean) => {
     let isPressed = event.pointerType === 'mouse' && event.type === 'pointerdown' && !isSubsequentCall;
@@ -224,75 +152,36 @@ const ChartTooltip = ({ xScale, yScale, width, tooltipWidth = 200, height, data,
   }, [ anchorEl, createPointerTracker, draw, hideContent, showContent ]);
 
   return (
-    <g ref={ ref } opacity={ 0 } { ...props }>
-      <line className="ChartTooltip__line" stroke={ lineColor } strokeDasharray="3"/>
-      { data.map(({ name }) => (
-        <circle
-          key={ name }
-          className="ChartTooltip__point"
-          r={ POINT_SIZE / 2 }
-          opacity={ 0 }
-          fill={ markerBgColor }
-          stroke={ markerBorderColor }
-          strokeWidth={ 4 }
-        />
-      )) }
-      <g className="ChartTooltip__content">
-        <rect
-          className="ChartTooltip__contentBg"
-          rx={ 12 }
-          ry={ 12 }
-          fill={ bgColor }
-          width={ tooltipWidth }
-          height={ 2 * PADDING + (data.length + 1) * TEXT_LINE_HEIGHT + data.length * LINE_SPACE }
-        />
-        <g transform={ `translate(${ PADDING },${ PADDING })` }>
-          <text
-            className="ChartTooltip__contentTitle"
-            transform="translate(0,0)"
-            fontSize="12px"
-            fontWeight="500"
-            fill={ titleColor }
-            dominantBaseline="hanging"
-          >
-            Date
-          </text>
-          <text
-            className="ChartTooltip__contentDate"
-            transform={ `translate(${ LABEL_WIDTH },0)` }
-            fontSize="12px"
-            fontWeight="500"
-            fill={ textColor }
-            dominantBaseline="hanging"
-          />
-        </g>
-        { data.map(({ name }, index) => (
-          <g
-            key={ name }
-            transform={ `translate(${ PADDING },${ PADDING + (index + 1) * (LINE_SPACE + TEXT_LINE_HEIGHT) })` }
-          >
-            <text
-              className="ChartTooltip__contentTitle"
-              transform="translate(0,0)"
-              fontSize="12px"
-              fontWeight="500"
-              fill={ titleColor }
-              dominantBaseline="hanging"
-            >
-              { name }
-            </text>
-            <text
-              transform={ `translate(${ LABEL_WIDTH },0)` }
-              className="ChartTooltip__value"
-              fontSize="12px"
-              fill={ textColor }
-              dominantBaseline="hanging"
-            />
-          </g>
-        )) }
-      </g>
+    <g
+      ref={ ref }
+      opacity={ 0 }
+      fontSize="12px"
+      fontWeight="500"
+      { ...props }
+    >
+      <ChartTooltipLine/>
+      { data.map(({ name }) => <ChartTooltipPoint key={ name }/>) }
+      <ChartTooltipContent>
+        <ChartTooltipBackdrop/>
+        <ChartTooltipTitle resolution={ resolution }/>
+        <ChartTooltipRow label={ getDateLabel(resolution) } lineNum={ 1 }/>
+        { data.map(({ name }, index) => <ChartTooltipRow key={ name } label={ name } lineNum={ index + 1 }/>) }
+      </ChartTooltipContent>
     </g>
   );
 };
 
 export default React.memo(ChartTooltip);
+
+function getDateLabel(resolution?: Resolution): string {
+  switch (resolution) {
+    case Resolution.WEEK:
+      return 'Dates';
+    case Resolution.MONTH:
+      return 'Month';
+    case Resolution.YEAR:
+      return 'Year';
+    default:
+      return 'Date';
+  }
+}
diff --git a/ui/shared/chart/ChartWatermarkIcon.tsx b/ui/shared/chart/ChartWatermarkIcon.tsx
new file mode 100644
index 0000000000..347740a27f
--- /dev/null
+++ b/ui/shared/chart/ChartWatermarkIcon.tsx
@@ -0,0 +1,26 @@
+import type { IconProps } from '@chakra-ui/react';
+import { Icon, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+// eslint-disable-next-line no-restricted-imports
+import logoIcon from 'icons/networks/logo-placeholder.svg';
+
+const ChartWatermarkIcon = (props: IconProps) => {
+  const watermarkColor = useColorModeValue('link', 'white');
+  return (
+    <Icon
+      { ...props }
+      as={ logoIcon }
+      position="absolute"
+      opacity={ 0.1 }
+      top="50%"
+      left="50%"
+      transform="translate(-50%, -50%)"
+      pointerEvents="none"
+      viewBox="0 0 114 20"
+      color={ watermarkColor }
+    />
+  );
+};
+
+export default ChartWatermarkIcon;
diff --git a/ui/shared/chart/ChartWidget.pw.tsx b/ui/shared/chart/ChartWidget.pw.tsx
index 4e337a6fd3..21fc07272f 100644
--- a/ui/shared/chart/ChartWidget.pw.tsx
+++ b/ui/shared/chart/ChartWidget.pw.tsx
@@ -1,7 +1,8 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import type { TimeChartItem } from './types';
+
+import { test, expect } from 'playwright/lib';
 
 import type { Props } from './ChartWidget';
 import ChartWidget from './ChartWidget';
@@ -27,14 +28,12 @@ const props: Props = {
   units: 'ETH',
   isLoading: false,
   isError: false,
+  noAnimation: true,
 };
 
-test('base view +@dark-mode', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <ChartWidget { ...props }/>
-    </TestApp>,
-  );
+test('base view +@dark-mode', async({ render, page }) => {
+  const component = await render(<ChartWidget { ...props }/>);
+
   await page.waitForFunction(() => {
     return document.querySelector('path[data-name="chart-Nativecoincirculatingsupply-small"]')?.getAttribute('opacity') === '1';
   });
@@ -45,6 +44,7 @@ test('base view +@dark-mode', async({ mount, page }) => {
 
   await page.mouse.move(0, 0);
   await page.mouse.click(0, 0);
+  await page.mouse.move(80, 150);
   await page.mouse.move(100, 150);
   await expect(component).toHaveScreenshot();
 
@@ -54,22 +54,83 @@ test('base view +@dark-mode', async({ mount, page }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('loading', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <ChartWidget { ...props } isLoading minH="250px"/>
-    </TestApp>,
-  );
+test('loading', async({ render }) => {
+  const component = await render(<ChartWidget { ...props } isLoading minH="250px"/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('error', async({ render }) => {
+  const component = await render(<ChartWidget { ...props } isError/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('small values', async({ render, page }) => {
+  const modifiedProps = {
+    ...props,
+    items: [
+      { date: new Date('2023-02-13'), value: 0.000005041012112611958 },
+      { date: new Date('2023-02-14'), value: 0.000004781545670577531 },
+      { date: new Date('2023-02-15'), value: 0.00000520510604212437 },
+      { date: new Date('2023-02-16'), value: 0.000005274901030625893 },
+      { date: new Date('2023-02-17'), value: 0.00000534325322320271 },
+      { date: new Date('2023-02-18'), value: 0.00000579140116207668 },
+      { date: new Date('2023-02-19'), value: 0.000004878307079043056 },
+      { date: new Date('2023-02-20'), value: 0.0000053454186920910215 },
+      { date: new Date('2023-02-21'), value: 0.000005770588532081243 },
+      { date: new Date('2023-02-22'), value: 0.00000589334810122426 },
+      { date: new Date('2023-02-23'), value: 0.00000547040196358741 },
+    ],
+  };
 
+  const component = await render(<ChartWidget { ...modifiedProps }/>);
+  await page.waitForFunction(() => {
+    return document.querySelector('path[data-name="chart-Nativecoincirculatingsupply-small"]')?.getAttribute('opacity') === '1';
+  });
   await expect(component).toHaveScreenshot();
 });
 
-test('error', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <ChartWidget { ...props } isError/>
-    </TestApp>,
-  );
+test('small variations in big values', async({ render, page }) => {
+  const modifiedProps = {
+    ...props,
+    items: [
+      { date: new Date('2023-02-13'), value: 8886203 },
+      { date: new Date('2023-02-14'), value: 8890184 },
+      { date: new Date('2023-02-15'), value: 8893483 },
+      { date: new Date('2023-02-16'), value: 8897924 },
+      { date: new Date('2023-02-17'), value: 8902268 },
+      { date: new Date('2023-02-18'), value: 8906320 },
+      { date: new Date('2023-02-19'), value: 8910264 },
+      { date: new Date('2023-02-20'), value: 8914827 },
+      { date: new Date('2023-02-21'), value: 8918592 },
+      { date: new Date('2023-02-22'), value: 8921988 },
+      { date: new Date('2023-02-23'), value: 8922206 },
+    ],
+  };
+
+  const component = await render(<ChartWidget { ...modifiedProps }/>);
+  await page.waitForFunction(() => {
+    return document.querySelector('path[data-name="chart-Nativecoincirculatingsupply-small"]')?.getAttribute('opacity') === '1';
+  });
+  await expect(component).toHaveScreenshot();
+});
+
+test('incomplete day', async({ render, page }) => {
+  const modifiedProps = {
+    ...props,
+    items: [
+      ...props.items as Array<TimeChartItem>,
+      { date: new Date('2023-02-24'), value: 25136740.887217894 / 4, isApproximate: true },
+    ],
+  };
+
+  const component = await render(<ChartWidget { ...modifiedProps }/>);
+  await page.waitForFunction(() => {
+    return document.querySelector('path[data-name="chart-Nativecoincirculatingsupply-small"]')?.getAttribute('opacity') === '1';
+  });
+  await expect(component).toHaveScreenshot();
 
+  await page.hover('.ChartOverlay', { position: { x: 120, y: 120 } });
+  await page.hover('.ChartOverlay', { position: { x: 320, y: 120 } });
+  await expect(page.getByText('Incomplete day')).toBeVisible();
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/chart/ChartWidget.tsx b/ui/shared/chart/ChartWidget.tsx
index 86cc601221..748647b384 100644
--- a/ui/shared/chart/ChartWidget.tsx
+++ b/ui/shared/chart/ChartWidget.tsx
@@ -1,31 +1,24 @@
 import {
-  Box,
-  Center,
   chakra,
   Flex,
-  IconButton, Link,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
+  IconButton,
   Skeleton,
-  Text,
   Tooltip,
   useColorModeValue,
-  VisuallyHidden,
 } from '@chakra-ui/react';
-import domToImage from 'dom-to-image';
-import React, { useRef, useCallback, useState } from 'react';
+import NextLink from 'next/link';
+import React, { useRef } from 'react';
 
 import type { TimeChartItem } from './types';
 
-import dayjs from 'lib/date/dayjs';
-import { apos } from 'lib/html-entities';
-import saveAsCSV from 'lib/saveAsCSV';
+import { route, type Route } from 'nextjs-routes';
+
+import config from 'configs/app';
 import IconSvg from 'ui/shared/IconSvg';
 
-import ChartWidgetGraph from './ChartWidgetGraph';
-import FullscreenChartModal from './FullscreenChartModal';
+import ChartMenu from './ChartMenu';
+import ChartWidgetContent from './ChartWidgetContent';
+import useZoom from './useZoom';
 
 export type Props = {
   items?: Array<TimeChartItem>;
@@ -35,235 +28,126 @@ export type Props = {
   isLoading: boolean;
   className?: string;
   isError: boolean;
-}
-
-const DOWNLOAD_IMAGE_SCALE = 5;
+  emptyText?: string;
+  noAnimation?: boolean;
+  href?: Route;
+};
 
-const ChartWidget = ({ items, title, description, isLoading, className, isError, units }: Props) => {
+const ChartWidget = ({
+  items,
+  title,
+  description,
+  isLoading,
+  className,
+  isError,
+  units,
+  emptyText,
+  noAnimation,
+  href,
+}: Props) => {
   const ref = useRef<HTMLDivElement>(null);
-  const [ isFullscreen, setIsFullscreen ] = useState(false);
-  const [ isZoomResetInitial, setIsZoomResetInitial ] = React.useState(true);
+  const { zoomRange, handleZoom, handleZoomReset } = useZoom();
 
-  const pngBackgroundColor = useColorModeValue('white', 'black');
   const borderColor = useColorModeValue('gray.200', 'gray.600');
 
-  const handleZoom = useCallback(() => {
-    setIsZoomResetInitial(false);
-  }, []);
-
-  const handleZoomResetClick = useCallback(() => {
-    setIsZoomResetInitial(true);
-  }, []);
-
-  const showChartFullscreen = useCallback(() => {
-    setIsFullscreen(true);
-  }, []);
-
-  const clearFullscreenChart = useCallback(() => {
-    setIsFullscreen(false);
-  }, []);
-
-  const handleFileSaveClick = useCallback(() => {
-    // wait for context menu to close
-    setTimeout(() => {
-      if (ref.current) {
-        domToImage.toPng(ref.current,
-          {
-            quality: 100,
-            bgcolor: pngBackgroundColor,
-            width: ref.current.offsetWidth * DOWNLOAD_IMAGE_SCALE,
-            height: ref.current.offsetHeight * DOWNLOAD_IMAGE_SCALE,
-            filter: (node) => node.nodeName !== 'BUTTON',
-            style: {
-              borderColor: 'transparent',
-              transform: `scale(${ DOWNLOAD_IMAGE_SCALE })`,
-              'transform-origin': 'top left',
-            },
-          })
-          .then((dataUrl) => {
-            const link = document.createElement('a');
-            link.download = `${ title } (Blockscout chart).png`;
-            link.href = dataUrl;
-            link.click();
-            link.remove();
-          });
-      }
-    }, 100);
-  }, [ pngBackgroundColor, title ]);
-
-  const handleSVGSavingClick = useCallback(() => {
-    if (items) {
-      const headerRows = [
-        'Date', 'Value',
-      ];
-      const dataRows = items.map((item) => [
-        dayjs(item.date).format('YYYY-MM-DD'), String(item.value),
-      ]);
-
-      saveAsCSV(headerRows, dataRows, `${ title } (Blockscout stats)`);
-    }
-  }, [ items, title ]);
-
   const hasItems = items && items.length > 2;
 
-  const content = (() => {
-    if (isError) {
-      return (
-        <Flex
-          alignItems="center"
-          justifyContent="center"
-          flexGrow={ 1 }
-          py={ 4 }
-        >
-          <Text
-            variant="secondary"
-            fontSize="sm"
-            textAlign="center"
-          >
-            { `The data didn${ apos }t load. Please, ` }
-            <Link href={ window.document.location.href }>try to reload the page.</Link>
-          </Text>
-        </Flex>
-      );
-    }
-
-    if (isLoading) {
-      return <Skeleton flexGrow={ 1 } w="100%"/>;
-    }
-
-    if (!hasItems) {
-      return (
-        <Center flexGrow={ 1 }>
-          <Text variant="secondary" fontSize="sm">No data</Text>
-        </Center>
-      );
-    }
-
-    return (
-      <Box flexGrow={ 1 } maxW="100%">
-        <ChartWidgetGraph
-          items={ items }
-          onZoom={ handleZoom }
-          isZoomResetInitial={ isZoomResetInitial }
-          title={ title }
-          units={ units }
-        />
-      </Box>
-    );
-  })();
+  const content = (
+    <ChartWidgetContent
+      items={ items }
+      isError={ isError }
+      isLoading={ isLoading }
+      units={ units }
+      title={ title }
+      emptyText={ emptyText }
+      handleZoom={ handleZoom }
+      zoomRange={ zoomRange }
+      noAnimation={ noAnimation }
+    />
+  );
 
-  return (
-    <>
-      <Flex
-        height="100%"
-        ref={ ref }
-        flexDir="column"
-        padding={{ base: 3, lg: 4 }}
-        borderRadius="md"
-        border="1px"
-        borderColor={ borderColor }
-        className={ className }
+  const chartHeader = (
+    <Flex
+      flexGrow={ 1 }
+      flexDir="column"
+      alignItems="flex-start"
+      cursor={ href ? 'pointer' : 'default' }
+      _hover={ href ? { color: 'link_hovered' } : {} }
+    >
+      <Skeleton
+        isLoaded={ !isLoading }
+        fontWeight={ 600 }
+        size={{ base: 'xs', lg: 'sm' }}
       >
-        <Flex columnGap={ 6 } mb={ 1 } alignItems="flex-start">
-          <Flex flexGrow={ 1 } flexDir="column" alignItems="flex-start">
-            <Skeleton
-              isLoaded={ !isLoading }
-              fontWeight={ 600 }
-              size={{ base: 'xs', lg: 'sm' }}
-            >
-              { title }
-            </Skeleton>
-
-            { description && (
-              <Skeleton
-                isLoaded={ !isLoading }
-                color="text_secondary"
-                fontSize="xs"
-                mt={ 1 }
-              >
-                <span>{ description }</span>
-              </Skeleton>
-            ) }
-          </Flex>
 
-          <Flex ml="auto" columnGap={ 2 }>
-            <Tooltip label="Reset zoom">
-              <IconButton
-                hidden={ isZoomResetInitial }
-                aria-label="Reset zoom"
-                colorScheme="blue"
-                w={ 9 }
-                h={ 8 }
-                size="sm"
-                variant="outline"
-                onClick={ handleZoomResetClick }
-                icon={ <IconSvg name="repeat_arrow" w={ 4 } h={ 4 }/> }
-              />
-            </Tooltip>
+        <span>{ title }</span>
+      </Skeleton>
 
-            { hasItems && (
-              <Menu>
-                <Skeleton isLoaded={ !isLoading } borderRadius="base">
-                  <MenuButton
-                    w="36px"
-                    h="32px"
-                    icon={ <IconSvg name="dots" boxSize={ 4 } transform="rotate(-90deg)"/> }
-                    colorScheme="gray"
-                    variant="ghost"
-                    as={ IconButton }
-                  >
-                    <VisuallyHidden>
-                      Open chart options menu
-                    </VisuallyHidden>
-                  </MenuButton>
-                </Skeleton>
-                <MenuList>
-                  <MenuItem
-                    display="flex"
-                    alignItems="center"
-                    onClick={ showChartFullscreen }
-                  >
-                    <IconSvg name="scope" boxSize={ 5 } mr={ 3 }/>
-                  View fullscreen
-                  </MenuItem>
+      { description && (
+        <Skeleton
+          isLoaded={ !isLoading }
+          color="text_secondary"
+          fontSize="xs"
+          mt={ 1 }
 
-                  <MenuItem
-                    display="flex"
-                    alignItems="center"
-                    onClick={ handleFileSaveClick }
-                  >
-                    <IconSvg name="files/image" boxSize={ 5 } mr={ 3 }/>
-                  Save as PNG
-                  </MenuItem>
+        >
+          <span>{ description }</span>
+        </Skeleton>
+      ) }
+    </Flex>
+  );
 
-                  <MenuItem
-                    display="flex"
-                    alignItems="center"
-                    onClick={ handleSVGSavingClick }
-                  >
-                    <IconSvg name="files/csv" boxSize={ 5 } mr={ 3 }/>
-                  Save as CSV
-                  </MenuItem>
-                </MenuList>
-              </Menu>
-            ) }
-          </Flex>
+  return (
+    <Flex
+      height="100%"
+      ref={ ref }
+      flexDir="column"
+      padding={{ base: 3, lg: 4 }}
+      borderRadius="lg"
+      border="1px"
+      borderColor={ borderColor }
+      className={ className }
+    >
+      <Flex columnGap={ 6 } mb={ 2 } alignItems="flex-start">
+        { href ? (
+          <NextLink href={ href } passHref legacyBehavior >
+            { chartHeader }
+          </NextLink>
+        ) : chartHeader }
+        <Flex ml="auto" columnGap={ 2 }>
+          <Tooltip label="Reset zoom">
+            <IconButton
+              hidden={ !zoomRange }
+              aria-label="Reset zoom"
+              colorScheme="blue"
+              w={ 9 }
+              h={ 8 }
+              size="sm"
+              variant="outline"
+              onClick={ handleZoomReset }
+              icon={ <IconSvg name="repeat" w={ 4 } h={ 4 }/> }
+            />
+          </Tooltip>
+
+          { hasItems && (
+            <ChartMenu
+              items={ items }
+              title={ title }
+              description={ description }
+              chartUrl={ href ? config.app.baseUrl + route(href) : undefined }
+              isLoading={ isLoading }
+              chartRef={ ref }
+              units={ units }
+              handleZoom={ handleZoom }
+              handleZoomReset={ handleZoomReset }
+              zoomRange={ zoomRange }
+            />
+          ) }
         </Flex>
-
-        { content }
       </Flex>
 
-      { hasItems && (
-        <FullscreenChartModal
-          isOpen={ isFullscreen }
-          items={ items }
-          title={ title }
-          description={ description }
-          onClose={ clearFullscreenChart }
-          units={ units }
-        />
-      ) }
-    </>
+      { content }
+    </Flex>
   );
 };
 
diff --git a/ui/shared/chart/ChartWidgetContent.tsx b/ui/shared/chart/ChartWidgetContent.tsx
new file mode 100644
index 0000000000..0c97f207f6
--- /dev/null
+++ b/ui/shared/chart/ChartWidgetContent.tsx
@@ -0,0 +1,90 @@
+import { Box, Center, Flex, Link, Skeleton, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TimeChartItem } from './types';
+import type { Resolution } from '@blockscout/stats-types';
+
+import { apos } from 'lib/html-entities';
+
+import ChartWatermarkIcon from './ChartWatermarkIcon';
+import ChartWidgetGraph from './ChartWidgetGraph';
+
+export type Props = {
+  items?: Array<TimeChartItem>;
+  title: string;
+  units?: string;
+  isLoading?: boolean;
+  isError?: boolean;
+  emptyText?: string;
+  zoomRange?: [ Date, Date ];
+  handleZoom: (range: [ Date, Date ]) => void;
+  isEnlarged?: boolean;
+  noAnimation?: boolean;
+  resolution?: Resolution;
+};
+
+const ChartWidgetContent = ({
+  items,
+  title,
+  isLoading,
+  isError,
+  units,
+  emptyText,
+  zoomRange,
+  handleZoom,
+  isEnlarged,
+  noAnimation,
+  resolution,
+}: Props) => {
+  const hasItems = items && items.length > 2;
+
+  if (isError) {
+    return (
+      <Flex
+        alignItems="center"
+        justifyContent="center"
+        flexGrow={ 1 }
+        py={ 4 }
+      >
+        <Text
+          variant="secondary"
+          fontSize="sm"
+          textAlign="center"
+        >
+          { `The data didn${ apos }t load. Please, ` }
+          <Link href={ window.document.location.href }>try to reload the page.</Link>
+        </Text>
+      </Flex>
+    );
+  }
+
+  if (isLoading) {
+    return <Skeleton flexGrow={ 1 } w="100%"/>;
+  }
+
+  if (!hasItems) {
+    return (
+      <Center flexGrow={ 1 }>
+        <Text variant="secondary" fontSize="sm">{ emptyText || 'No data' }</Text>
+      </Center>
+    );
+  }
+
+  return (
+    <Box flexGrow={ 1 } maxW="100%" position="relative" h="100%">
+      <ChartWidgetGraph
+        items={ items }
+        zoomRange={ zoomRange }
+        onZoom={ handleZoom }
+        title={ title }
+        units={ units }
+        isEnlarged={ isEnlarged }
+        noAnimation={ noAnimation }
+        resolution={ resolution }
+      />
+      <ChartWatermarkIcon w="162px" h="15%"/>
+    </Box>
+  );
+};
+
+export default React.memo(ChartWidgetContent);
diff --git a/ui/shared/chart/ChartWidgetGraph.tsx b/ui/shared/chart/ChartWidgetGraph.tsx
index 38e04693e4..a8826dfc4f 100644
--- a/ui/shared/chart/ChartWidgetGraph.tsx
+++ b/ui/shared/chart/ChartWidgetGraph.tsx
@@ -2,9 +2,9 @@ import { useToken } from '@chakra-ui/react';
 import * as d3 from 'd3';
 import React from 'react';
 
-import type { ChartMargin, TimeChartItem } from 'ui/shared/chart/types';
+import { Resolution } from '@blockscout/stats-types';
+import type { ChartMargin, TimeChartData, TimeChartItem } from 'ui/shared/chart/types';
 
-import dayjs from 'lib/date/dayjs';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import ChartArea from 'ui/shared/chart/ChartArea';
 import ChartAxis from 'ui/shared/chart/ChartAxis';
@@ -20,38 +20,44 @@ interface Props {
   title: string;
   units?: string;
   items: Array<TimeChartItem>;
-  onZoom: () => void;
-  isZoomResetInitial: boolean;
+  zoomRange?: [ Date, Date ];
+  onZoom: (range: [ Date, Date ]) => void;
   margin?: ChartMargin;
+  noAnimation?: boolean;
+  resolution?: Resolution;
 }
 
-// temporarily turn off the data aggregation, we need a better algorithm for that
-const MAX_SHOW_ITEMS = 100_000_000_000;
-const DEFAULT_CHART_MARGIN = { bottom: 20, left: 40, right: 20, top: 10 };
-
-const ChartWidgetGraph = ({ isEnlarged, items, onZoom, isZoomResetInitial, title, margin: marginProps, units }: Props) => {
+const DEFAULT_CHART_MARGIN = { bottom: 20, left: 10, right: 20, top: 10 };
+
+const ChartWidgetGraph = ({
+  isEnlarged,
+  items,
+  onZoom,
+  title,
+  margin: marginProps,
+  units,
+  noAnimation,
+  resolution,
+  zoomRange,
+}: Props) => {
   const isMobile = useIsMobile();
   const color = useToken('colors', 'orange.400');
   const chartId = `chart-${ title.split(' ').join('') }-${ isEnlarged ? 'fullscreen' : 'small' }`;
 
   const overlayRef = React.useRef<SVGRectElement>(null);
 
-  const [ range, setRange ] = React.useState<[ Date, Date ]>([ items[0].date, items[items.length - 1].date ]);
-
-  const rangedItems = React.useMemo(() =>
-    items.filter((item) => item.date >= range[0] && item.date <= range[1]),
-  [ items, range ]);
-  const isGroupedValues = rangedItems.length > MAX_SHOW_ITEMS;
+  const range = React.useMemo(() => zoomRange || [ items[0].date, items[items.length - 1].date ], [ zoomRange, items ]);
 
-  const displayedData = React.useMemo(() => {
-    if (isGroupedValues) {
-      return groupChartItemsByWeekNumber(rangedItems);
-    } else {
-      return rangedItems;
-    }
-  }, [ isGroupedValues, rangedItems ]);
+  const displayedData = React.useMemo(() =>
+    items
+      .filter((item) => item.date >= range[0] && item.date <= range[1])
+      .map((item) => ({
+        ...item,
+        dateLabel: getDateLabel(item.date, item.date_to, resolution),
+      })),
+  [ items, range, resolution ]);
 
-  const chartData = React.useMemo(() => ([ { items: displayedData, name: 'Value', color, units } ]), [ color, displayedData, units ]);
+  const chartData: TimeChartData = React.useMemo(() => ([ { items: displayedData, name: 'Value', color, units } ]), [ color, displayedData, units ]);
 
   const margin: ChartMargin = React.useMemo(() => ({ ...DEFAULT_CHART_MARGIN, ...marginProps }), [ marginProps ]);
   const axesConfig = React.useMemo(() => {
@@ -72,48 +78,38 @@ const ChartWidgetGraph = ({ isEnlarged, items, onZoom, isZoomResetInitial, title
     innerWidth,
     innerHeight,
     chartMargin,
-    axis,
+    axes,
   } = useTimeChartController({
     data: chartData,
     margin,
     axesConfig,
   });
 
-  const handleRangeSelect = React.useCallback((nextRange: [ Date, Date ]) => {
-    setRange([ nextRange[0], nextRange[1] ]);
-    onZoom();
-  }, [ onZoom ]);
-
-  React.useEffect(() => {
-    if (isZoomResetInitial) {
-      setRange([ items[0].date, items[items.length - 1].date ]);
-    }
-  }, [ isZoomResetInitial, items ]);
-
   return (
     <svg width="100%" height="100%" ref={ ref } cursor="pointer" id={ chartId } opacity={ rect ? 1 : 0 }>
 
       <g transform={ `translate(${ chartMargin?.left || 0 },${ chartMargin?.top || 0 })` }>
         <ChartGridLine
           type="horizontal"
-          scale={ axis.y.scale }
+          scale={ axes.y.scale }
           ticks={ axesConfig.y.ticks }
           size={ innerWidth }
-          disableAnimation
+          noAnimation
         />
 
         <ChartArea
           id={ chartId }
           data={ displayedData }
           color={ color }
-          xScale={ axis.x.scale }
-          yScale={ axis.y.scale }
+          xScale={ axes.x.scale }
+          yScale={ axes.y.scale }
+          noAnimation={ noAnimation }
         />
 
         <ChartLine
           data={ displayedData }
-          xScale={ axis.x.scale }
-          yScale={ axis.y.scale }
+          xScale={ axes.x.scale }
+          yScale={ axes.y.scale }
           stroke={ color }
           animation="none"
           strokeWidth={ isMobile ? 1 : 2 }
@@ -121,39 +117,41 @@ const ChartWidgetGraph = ({ isEnlarged, items, onZoom, isZoomResetInitial, title
 
         <ChartAxis
           type="left"
-          scale={ axis.y.scale }
+          scale={ axes.y.scale }
           ticks={ axesConfig.y.ticks }
-          tickFormatGenerator={ axis.y.tickFormatter }
-          disableAnimation
+          tickFormatGenerator={ axes.y.tickFormatter }
+          noAnimation
         />
 
         <ChartAxis
           type="bottom"
-          scale={ axis.x.scale }
+          scale={ axes.x.scale }
           transform={ `translate(0, ${ innerHeight })` }
           ticks={ axesConfig.x.ticks }
           anchorEl={ overlayRef.current }
-          tickFormatGenerator={ axis.x.tickFormatter }
-          disableAnimation
+          tickFormatGenerator={ axes.x.tickFormatter }
+          noAnimation
         />
 
         <ChartOverlay ref={ overlayRef } width={ innerWidth } height={ innerHeight }>
           <ChartTooltip
             anchorEl={ overlayRef.current }
             width={ innerWidth }
-            tooltipWidth={ isGroupedValues ? 280 : 200 }
+            tooltipWidth={ (resolution === Resolution.WEEK) ? 280 : 200 }
             height={ innerHeight }
-            xScale={ axis.x.scale }
-            yScale={ axis.y.scale }
+            xScale={ axes.x.scale }
+            yScale={ axes.y.scale }
             data={ chartData }
+            noAnimation={ noAnimation }
+            resolution={ resolution }
           />
 
           <ChartSelectionX
             anchorEl={ overlayRef.current }
             height={ innerHeight }
-            scale={ axis.x.scale }
+            scale={ axes.x.scale }
             data={ chartData }
-            onSelect={ handleRangeSelect }
+            onSelect={ onZoom }
           />
         </ChartOverlay>
       </g>
@@ -163,13 +161,15 @@ const ChartWidgetGraph = ({ isEnlarged, items, onZoom, isZoomResetInitial, title
 
 export default React.memo(ChartWidgetGraph);
 
-function groupChartItemsByWeekNumber(items: Array<TimeChartItem>): Array<TimeChartItem> {
-  return d3.rollups(items,
-    (group) => ({
-      date: group[0].date,
-      value: d3.sum(group, (d) => d.value),
-      dateLabel: `${ d3.timeFormat('%e %b %Y')(group[0].date) } – ${ d3.timeFormat('%e %b %Y')(group[group.length - 1].date) }`,
-    }),
-    (t) => `${ dayjs(t.date).week() } / ${ dayjs(t.date).year() }`,
-  ).map(([ , v ]) => v);
+function getDateLabel(date: Date, dateTo?: Date, resolution?: Resolution): string {
+  switch (resolution) {
+    case Resolution.WEEK:
+      return d3.timeFormat('%e %b %Y')(date) + (dateTo ? ` – ${ d3.timeFormat('%e %b %Y')(dateTo) }` : '');
+    case Resolution.MONTH:
+      return d3.timeFormat('%b %Y')(date);
+    case Resolution.YEAR:
+      return d3.timeFormat('%Y')(date);
+    default:
+      return d3.timeFormat('%e %b %Y')(date);
+  }
 }
diff --git a/ui/shared/chart/FullscreenChartModal.tsx b/ui/shared/chart/FullscreenChartModal.tsx
index d7a3b1c692..ca1e362e4e 100644
--- a/ui/shared/chart/FullscreenChartModal.tsx
+++ b/ui/shared/chart/FullscreenChartModal.tsx
@@ -1,11 +1,12 @@
 import { Box, Button, Grid, Heading, Modal, ModalBody, ModalCloseButton, ModalContent, ModalOverlay, Text } from '@chakra-ui/react';
-import React, { useCallback } from 'react';
+import React from 'react';
 
 import type { TimeChartItem } from './types';
+import type { Resolution } from '@blockscout/stats-types';
 
 import IconSvg from 'ui/shared/IconSvg';
 
-import ChartWidgetGraph from './ChartWidgetGraph';
+import ChartWidgetContent from './ChartWidgetContent';
 
 type Props = {
   isOpen: boolean;
@@ -14,7 +15,11 @@ type Props = {
   items: Array<TimeChartItem>;
   onClose: () => void;
   units?: string;
-}
+  resolution?: Resolution;
+  zoomRange?: [ Date, Date ];
+  handleZoom: (range: [ Date, Date ]) => void;
+  handleZoomReset: () => void;
+};
 
 const FullscreenChartModal = ({
   isOpen,
@@ -23,17 +28,11 @@ const FullscreenChartModal = ({
   items,
   units,
   onClose,
+  resolution,
+  zoomRange,
+  handleZoom,
+  handleZoomReset,
 }: Props) => {
-  const [ isZoomResetInitial, setIsZoomResetInitial ] = React.useState(true);
-
-  const handleZoom = useCallback(() => {
-    setIsZoomResetInitial(false);
-  }, []);
-
-  const handleZoomResetClick = useCallback(() => {
-    setIsZoomResetInitial(true);
-  }, []);
-
   return (
     <Modal
       isOpen={ isOpen }
@@ -69,9 +68,9 @@ const FullscreenChartModal = ({
               </Text>
             ) }
 
-            { !isZoomResetInitial && (
+            { Boolean(zoomRange) && (
               <Button
-                leftIcon={ <IconSvg name="repeat_arrow" w={ 4 } h={ 4 }/> }
+                leftIcon={ <IconSvg name="repeat" w={ 4 } h={ 4 }/> }
                 colorScheme="blue"
                 gridColumn={ 2 }
                 justifySelf="end"
@@ -79,7 +78,7 @@ const FullscreenChartModal = ({
                 gridRow="1/3"
                 size="sm"
                 variant="outline"
-                onClick={ handleZoomResetClick }
+                onClick={ handleZoomReset }
               >
                 Reset zoom
               </Button>
@@ -91,15 +90,16 @@ const FullscreenChartModal = ({
 
         <ModalBody
           h="100%"
+          margin={{ bottom: 60 }}
         >
-          <ChartWidgetGraph
-            margin={{ bottom: 60 }}
+          <ChartWidgetContent
             isEnlarged
             items={ items }
             units={ units }
-            onZoom={ handleZoom }
-            isZoomResetInitial={ isZoomResetInitial }
+            handleZoom={ handleZoom }
+            zoomRange={ zoomRange }
             title={ title }
+            resolution={ resolution }
           />
         </ModalBody>
       </ModalContent>
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
index c2be16a1fc..5a0c57d466 100644
Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-2.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-2.png
index eb82387968..27aa7acbd7 100644
Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-2.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-2.png differ
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-3.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-3.png
index 4f5c302bc7..882cab7e0d 100644
Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-3.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-3.png differ
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-4.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-4.png
index 1035241702..512d978cfc 100644
Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-4.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-4.png differ
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-1.png
index d2f897864a..810e4f452e 100644
Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-1.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-2.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-2.png
index 0f40650ff4..25c90139fb 100644
Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-2.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-2.png differ
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-3.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-3.png
index 3571a32b4c..dafdd60749 100644
Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-3.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-3.png differ
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-4.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-4.png
index 0197718711..e13f684ff4 100644
Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-4.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-4.png differ
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_error-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_error-1.png
index e054536499..6085a86d7f 100644
Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_error-1.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_error-1.png differ
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-1.png
new file mode 100644
index 0000000000..948b0f76af
Binary files /dev/null and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-1.png differ
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-2.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-2.png
new file mode 100644
index 0000000000..07145a4c85
Binary files /dev/null and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-2.png differ
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_loading-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_loading-1.png
index 4646071b6b..f502de8f6c 100644
Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_loading-1.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_loading-1.png differ
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-values-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-values-1.png
new file mode 100644
index 0000000000..44a38e8095
Binary files /dev/null and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-values-1.png differ
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-variations-in-big-values-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-variations-in-big-values-1.png
new file mode 100644
index 0000000000..caafd476bb
Binary files /dev/null and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-variations-in-big-values-1.png differ
diff --git a/ui/shared/chart/tooltip/ChartTooltipBackdrop.tsx b/ui/shared/chart/tooltip/ChartTooltipBackdrop.tsx
new file mode 100644
index 0000000000..67ddee6bf8
--- /dev/null
+++ b/ui/shared/chart/tooltip/ChartTooltipBackdrop.tsx
@@ -0,0 +1,46 @@
+import { useToken } from '@chakra-ui/react';
+import * as d3 from 'd3';
+import React from 'react';
+
+import { calculateContainerHeight } from './utils';
+
+const ChartTooltipBackdrop = () => {
+  const bgColor = useToken('colors', 'blackAlpha.900');
+
+  return (
+    <rect
+      className="ChartTooltip__backdrop"
+      rx={ 12 }
+      ry={ 12 }
+      fill={ bgColor }
+    />
+  );
+};
+
+export default React.memo(ChartTooltipBackdrop);
+
+interface UseRenderBackdropParams {
+  seriesNum: number;
+  transitionDuration: number | null;
+}
+
+export function useRenderBackdrop(ref: React.RefObject<SVGGElement>, { seriesNum, transitionDuration }: UseRenderBackdropParams) {
+  return React.useCallback((width: number, isIncompleteData: boolean) => {
+    const height = calculateContainerHeight(seriesNum, isIncompleteData);
+
+    if (transitionDuration) {
+      d3.select(ref.current)
+        .select('.ChartTooltip__backdrop')
+        .transition()
+        .duration(transitionDuration)
+        .ease(d3.easeLinear)
+        .attr('width', width)
+        .attr('height', height);
+    } else {
+      d3.select(ref.current)
+        .select('.ChartTooltip__backdrop')
+        .attr('width', width)
+        .attr('height', height);
+    }
+  }, [ ref, seriesNum, transitionDuration ]);
+}
diff --git a/ui/shared/chart/tooltip/ChartTooltipContent.tsx b/ui/shared/chart/tooltip/ChartTooltipContent.tsx
new file mode 100644
index 0000000000..da1a62a5d6
--- /dev/null
+++ b/ui/shared/chart/tooltip/ChartTooltipContent.tsx
@@ -0,0 +1,101 @@
+import * as d3 from 'd3';
+import _clamp from 'lodash/clamp';
+import React from 'react';
+
+import { POINT_SIZE } from './utils';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const ChartTooltipContent = ({ children }: Props) => {
+  return <g className="ChartTooltip__content">{ children }</g>;
+};
+
+export default React.memo(ChartTooltipContent);
+
+interface UseRenderContentParams {
+  chart: {
+    width?: number;
+    height?: number;
+  };
+  transitionDuration: number | null;
+}
+
+export function useRenderContent(ref: React.RefObject<SVGGElement>, { chart, transitionDuration }: UseRenderContentParams) {
+  return React.useCallback((x: number, y: number) => {
+    const tooltipContent = d3.select(ref.current).select('.ChartTooltip__content');
+
+    const transformAttributeFn: d3.ValueFn<d3.BaseType, unknown, string> = (cur, i, nodes) => {
+      const node = nodes[i] as SVGGElement | null;
+      const { width: nodeWidth, height: nodeHeight } = node?.getBoundingClientRect() || { width: 0, height: 0 };
+      const [ translateX, translateY ] = calculatePosition({
+        canvasWidth: chart.width || 0,
+        canvasHeight: chart.height || 0,
+        nodeWidth,
+        nodeHeight,
+        pointX: x,
+        pointY: y,
+        offset: POINT_SIZE,
+      });
+      return `translate(${ translateX }, ${ translateY })`;
+    };
+
+    if (transitionDuration) {
+      tooltipContent
+        .transition()
+        .duration(transitionDuration)
+        .ease(d3.easeLinear)
+        .attr('transform', transformAttributeFn);
+    } else {
+      tooltipContent
+        .attr('transform', transformAttributeFn);
+    }
+
+  }, [ chart.height, chart.width, ref, transitionDuration ]);
+}
+
+interface CalculatePositionParams {
+  pointX: number;
+  pointY: number;
+  offset: number;
+  nodeWidth: number;
+  nodeHeight: number;
+  canvasWidth: number;
+  canvasHeight: number;
+}
+
+function calculatePosition({ pointX, pointY, canvasWidth, canvasHeight, nodeWidth, nodeHeight, offset }: CalculatePositionParams): [ number, number ] {
+  // right
+  if (pointX + offset + nodeWidth <= canvasWidth) {
+    const x = pointX + offset;
+    const y = _clamp(pointY - nodeHeight / 2, 0, canvasHeight - nodeHeight);
+    return [ x, y ];
+  }
+
+  // left
+  if (nodeWidth + offset <= pointX) {
+    const x = pointX - offset - nodeWidth;
+    const y = _clamp(pointY - nodeHeight / 2, 0, canvasHeight - nodeHeight);
+    return [ x, y ];
+  }
+
+  // top
+  if (nodeHeight + offset <= pointY) {
+    const x = _clamp(pointX - nodeWidth / 2, 0, canvasWidth - nodeWidth);
+    const y = pointY - offset - nodeHeight;
+    return [ x, y ];
+  }
+
+  // bottom
+  if (pointY + offset + nodeHeight <= canvasHeight) {
+    const x = _clamp(pointX - nodeWidth / 2, 0, canvasWidth - nodeWidth);
+    const y = pointY + offset;
+    return [ x, y ];
+  }
+
+  const x = _clamp(pointX / 2, 0, canvasWidth - nodeWidth);
+  const y = _clamp(pointY / 2, 0, canvasHeight - nodeHeight);
+
+  return [ x, y ];
+}
diff --git a/ui/shared/chart/tooltip/ChartTooltipLine.tsx b/ui/shared/chart/tooltip/ChartTooltipLine.tsx
new file mode 100644
index 0000000000..7397365945
--- /dev/null
+++ b/ui/shared/chart/tooltip/ChartTooltipLine.tsx
@@ -0,0 +1,21 @@
+import { useToken } from '@chakra-ui/react';
+import * as d3 from 'd3';
+import React from 'react';
+
+const ChartTooltipLine = () => {
+  const lineColor = useToken('colors', 'gray.400');
+  return <line className="ChartTooltip__line" stroke={ lineColor } strokeDasharray="3"/>;
+};
+
+export default React.memo(ChartTooltipLine);
+
+export function useRenderLine(ref: React.RefObject<SVGGElement>, chartHeight: number | undefined) {
+  return React.useCallback((x: number) => {
+    d3.select(ref.current)
+      .select('.ChartTooltip__line')
+      .attr('x1', x)
+      .attr('x2', x)
+      .attr('y1', 0)
+      .attr('y2', chartHeight || 0);
+  }, [ ref, chartHeight ]);
+}
diff --git a/ui/shared/chart/tooltip/ChartTooltipPoint.tsx b/ui/shared/chart/tooltip/ChartTooltipPoint.tsx
new file mode 100644
index 0000000000..058e659b3f
--- /dev/null
+++ b/ui/shared/chart/tooltip/ChartTooltipPoint.tsx
@@ -0,0 +1,93 @@
+import { useColorModeValue, useToken } from '@chakra-ui/react';
+import * as d3 from 'd3';
+import React from 'react';
+
+import type { TimeChartData, TimeChartItem } from 'ui/shared/chart/types';
+
+import { POINT_SIZE } from './utils';
+
+const ChartTooltipPoint = () => {
+  const bgColor = useToken('colors', useColorModeValue('black', 'white'));
+  const borderColor = useToken('colors', useColorModeValue('white', 'black'));
+
+  return (
+    <circle
+      className="ChartTooltip__point"
+      r={ POINT_SIZE / 2 }
+      opacity={ 1 }
+      fill={ bgColor }
+      stroke={ borderColor }
+      strokeWidth={ 4 }
+    />
+  );
+};
+
+export default React.memo(ChartTooltipPoint);
+
+interface UseRenderPointsParams {
+  data: TimeChartData;
+  xScale: d3.ScaleTime<number, number>;
+  yScale: d3.ScaleLinear<number, number>;
+}
+
+export interface CurrentPoint {
+  datumIndex: number;
+  item: TimeChartItem;
+}
+
+interface RenderPointsReturnType {
+  x: number;
+  y: number;
+  currentPoints: Array<CurrentPoint>;
+}
+
+export function useRenderPoints(ref: React.RefObject<SVGGElement>, params: UseRenderPointsParams) {
+  return React.useCallback((x: number): RenderPointsReturnType => {
+    const xDate = params.xScale.invert(x);
+    const bisectDate = d3.bisector<TimeChartItem, unknown>((d) => d.date).left;
+    let baseXPos = 0;
+    let baseYPos = 0;
+    const currentPoints: Array<CurrentPoint> = [];
+
+    d3.select(ref.current)
+      .selectAll('.ChartTooltip__point')
+      .attr('transform', (cur, elementIndex) => {
+        const datum = params.data[elementIndex];
+        const index = bisectDate(datum.items, xDate, 1);
+        const d0 = datum.items[index - 1] as TimeChartItem | undefined;
+        const d1 = datum.items[index] as TimeChartItem | undefined;
+        const d = (() => {
+          if (!d0) {
+            return d1;
+          }
+          if (!d1) {
+            return d0;
+          }
+          return xDate.getTime() - d0.date.getTime() > d1.date.getTime() - xDate.getTime() ? d1 : d0;
+        })();
+
+        if (d?.date === undefined && d?.value === undefined) {
+          // move point out of container
+          return 'translate(-100,-100)';
+        }
+
+        const xPos = params.xScale(d.date);
+        const yPos = params.yScale(d.value);
+
+        if (elementIndex === 0) {
+          baseXPos = xPos;
+          baseYPos = yPos;
+        }
+
+        currentPoints.push({ item: d, datumIndex: elementIndex });
+
+        return `translate(${ xPos }, ${ yPos })`;
+      });
+
+    return {
+      x: baseXPos,
+      y: baseYPos,
+      currentPoints,
+    };
+  }, [ ref, params ]);
+}
diff --git a/ui/shared/chart/tooltip/ChartTooltipRow.tsx b/ui/shared/chart/tooltip/ChartTooltipRow.tsx
new file mode 100644
index 0000000000..c55b1d9423
--- /dev/null
+++ b/ui/shared/chart/tooltip/ChartTooltipRow.tsx
@@ -0,0 +1,96 @@
+import { useToken } from '@chakra-ui/react';
+import * as d3 from 'd3';
+import React from 'react';
+
+import type { TimeChartData } from '../types';
+
+import type { CurrentPoint } from './ChartTooltipPoint';
+import { calculateRowTransformValue, LABEL_WIDTH, PADDING } from './utils';
+
+type Props = {
+  lineNum: number;
+} & ({ label: string; children?: never } | { children: React.ReactNode; label?: never });
+
+const ChartTooltipRow = ({ label, lineNum, children }: Props) => {
+  const labelColor = useToken('colors', 'blue.100');
+  const textColor = useToken('colors', 'white');
+
+  return (
+    <g className="ChartTooltip__row" transform={ calculateRowTransformValue(lineNum) }>
+      { children || (
+        <>
+          <text
+            className="ChartTooltip__label"
+            transform="translate(0,0)"
+            dominantBaseline="hanging"
+            fill={ labelColor }
+          >
+            { label }
+          </text>
+          <text
+            className="ChartTooltip__value"
+            transform={ `translate(${ LABEL_WIDTH },0)` }
+            dominantBaseline="hanging"
+            fill={ textColor }
+          />
+        </>
+      ) }
+    </g>
+  );
+};
+
+export default React.memo(ChartTooltipRow);
+
+interface UseRenderRowsParams {
+  data: TimeChartData;
+  xScale: d3.ScaleTime<number, number>;
+  minWidth: number;
+}
+
+interface UseRenderRowsReturnType {
+  width: number;
+}
+
+export function useRenderRows(ref: React.RefObject<SVGGElement>, { data, xScale, minWidth }: UseRenderRowsParams) {
+  return React.useCallback((x: number, currentPoints: Array<CurrentPoint>): UseRenderRowsReturnType => {
+
+    // update "transform" prop of all rows
+    const isIncompleteData = currentPoints.some(({ item }) => item.isApproximate);
+    d3.select(ref.current)
+      .selectAll<Element, TimeChartData>('.ChartTooltip__row')
+      .attr('transform', (datum, index) => {
+        return calculateRowTransformValue(index - (isIncompleteData ? 0 : 1));
+      });
+
+    // update date and indicators value
+    // here we assume that the first value element contains the date
+    const valueNodes = d3.select(ref.current)
+      .selectAll<Element, TimeChartData>('.ChartTooltip__value')
+      .text((_, index) => {
+        if (index === 0) {
+          const date = xScale.invert(x);
+          const dateValue = data[0].items.find((item) => item.date.getTime() === date.getTime())?.dateLabel;
+          const dateValueFallback = d3.timeFormat('%e %b %Y')(xScale.invert(x));
+          return dateValue || dateValueFallback;
+        }
+
+        const { datumIndex, item } = currentPoints.find(({ datumIndex }) => datumIndex === index - 1) || {};
+        if (datumIndex === undefined || !item) {
+          return null;
+        }
+
+        const value = data[datumIndex]?.valueFormatter?.(item.value) ?? item.value.toLocaleString(undefined, { minimumSignificantDigits: 1 });
+        const units = data[datumIndex]?.units ? ` ${ data[datumIndex]?.units }` : '';
+
+        return value + units;
+      })
+      .nodes();
+
+    const valueWidths = valueNodes.map((node) => node?.getBoundingClientRect?.().width);
+    const maxValueWidth = Math.max(...valueWidths);
+    const maxRowWidth = Math.max(minWidth, 2 * PADDING + LABEL_WIDTH + maxValueWidth);
+
+    return { width: maxRowWidth };
+
+  }, [ data, minWidth, ref, xScale ]);
+}
diff --git a/ui/shared/chart/tooltip/ChartTooltipTitle.tsx b/ui/shared/chart/tooltip/ChartTooltipTitle.tsx
new file mode 100644
index 0000000000..30f6025942
--- /dev/null
+++ b/ui/shared/chart/tooltip/ChartTooltipTitle.tsx
@@ -0,0 +1,38 @@
+import { useToken } from '@chakra-ui/react';
+import * as d3 from 'd3';
+import React from 'react';
+
+import { Resolution } from '@blockscout/stats-types';
+
+import { STATS_RESOLUTIONS } from 'ui/stats/constants';
+
+import ChartTooltipRow from './ChartTooltipRow';
+
+const ChartTooltipTitle = ({ resolution = Resolution.DAY }: { resolution?: Resolution }) => {
+  const titleColor = useToken('colors', 'yellow.300');
+  const resolutionTitle = STATS_RESOLUTIONS.find(r => r.id === resolution)?.title || 'day';
+
+  return (
+    <ChartTooltipRow lineNum={ 0 }>
+      <text
+        className="ChartTooltip__title"
+        transform="translate(0,0)"
+        fill={ titleColor }
+        opacity={ 0 }
+        dominantBaseline="hanging"
+      >
+        { `Incomplete ${ resolutionTitle.toLowerCase() }` }
+      </text>
+    </ChartTooltipRow>
+  );
+};
+
+export default React.memo(ChartTooltipTitle);
+
+export function useRenderTitle(ref: React.RefObject<SVGGElement>) {
+  return React.useCallback((isVisible: boolean) => {
+    d3.select(ref.current)
+      .select('.ChartTooltip__title')
+      .attr('opacity', isVisible ? 1 : 0);
+  }, [ ref ]);
+}
diff --git a/ui/shared/chart/utils/pointerTracker.tsx b/ui/shared/chart/tooltip/pointerTracker.ts
similarity index 100%
rename from ui/shared/chart/utils/pointerTracker.tsx
rename to ui/shared/chart/tooltip/pointerTracker.ts
diff --git a/ui/shared/chart/tooltip/utils.ts b/ui/shared/chart/tooltip/utils.ts
new file mode 100644
index 0000000000..8b11b366a9
--- /dev/null
+++ b/ui/shared/chart/tooltip/utils.ts
@@ -0,0 +1,16 @@
+export const TEXT_LINE_HEIGHT = 12;
+export const PADDING = 16;
+export const LINE_SPACE = 10;
+export const POINT_SIZE = 16;
+export const LABEL_WIDTH = 80;
+
+export const calculateContainerHeight = (seriesNum: number, isIncomplete?: boolean) => {
+  const linesNum = isIncomplete ? seriesNum + 2 : seriesNum + 1;
+
+  return 2 * PADDING + linesNum * TEXT_LINE_HEIGHT + (linesNum - 1) * LINE_SPACE;
+};
+
+export const calculateRowTransformValue = (rowNum: number) => {
+  const top = Math.max(0, PADDING + rowNum * (LINE_SPACE + TEXT_LINE_HEIGHT));
+  return `translate(${ PADDING },${ top })`;
+};
diff --git a/ui/shared/chart/types.tsx b/ui/shared/chart/types.tsx
index 80a023aa51..655be842a5 100644
--- a/ui/shared/chart/types.tsx
+++ b/ui/shared/chart/types.tsx
@@ -1,7 +1,15 @@
+export interface TimeChartItemRaw {
+  date: Date;
+  dateLabel?: string;
+  value: number | string | null;
+}
+
 export interface TimeChartItem {
   date: Date;
+  date_to?: Date;
   dateLabel?: string;
   value: number;
+  isApproximate?: boolean;
 }
 
 export interface ChartMargin {
@@ -29,6 +37,7 @@ export type TimeChartData = Array<TimeChartDataItem>;
 export interface AxisConfig {
   ticks?: number;
   nice?: boolean;
+  noLabel?: boolean;
 }
 
 export interface AxesConfig {
diff --git a/ui/shared/chart/useChartQuery.tsx b/ui/shared/chart/useChartQuery.tsx
new file mode 100644
index 0000000000..7da616d310
--- /dev/null
+++ b/ui/shared/chart/useChartQuery.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import type { LineChart, Resolution } from '@blockscout/stats-types';
+import type { StatsIntervalIds } from 'types/client/stats';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { useAppContext } from 'lib/contexts/app';
+import { STATS_INTERVALS } from 'ui/stats/constants';
+
+import formatDate from './utils/formatIntervalDate';
+
+export default function useChartQuery(id: string, resolution: Resolution, interval: StatsIntervalIds, enabled = true) {
+  const { apiData } = useAppContext<'/stats/[id]'>();
+
+  const selectedInterval = STATS_INTERVALS[interval];
+
+  const endDate = selectedInterval.start ? formatDate(new Date()) : undefined;
+  const startDate = selectedInterval.start ? formatDate(selectedInterval.start) : undefined;
+
+  const [ info, setInfo ] = React.useState<LineChart['info']>(apiData || undefined);
+
+  const lineQuery = useApiQuery('stats_line', {
+    pathParams: { id },
+    queryParams: {
+      from: startDate,
+      to: endDate,
+      resolution,
+    },
+    queryOptions: {
+      enabled: enabled,
+      refetchOnMount: false,
+      placeholderData: {
+        info: {
+          title: 'Chart title placeholder',
+          description: 'Chart placeholder description chart placeholder description',
+          resolutions: [ 'DAY', 'WEEK', 'MONTH', 'YEAR' ],
+          id: 'placeholder',
+          units: undefined,
+        },
+        chart: [],
+      },
+    },
+  });
+
+  React.useEffect(() => {
+    if (!info && lineQuery.data?.info && !lineQuery.isPlaceholderData) {
+      // save info to keep title and description when change query params
+      setInfo(lineQuery.data?.info);
+    }
+  }, [ info, lineQuery.data?.info, lineQuery.isPlaceholderData ]);
+
+  const items = React.useMemo(() => lineQuery.data?.chart?.map((item) => {
+    return { date: new Date(item.date), date_to: new Date(item.date_to), value: Number(item.value), isApproximate: item.is_approximate };
+  }), [ lineQuery ]);
+
+  return {
+    items,
+    info,
+    lineQuery,
+  };
+}
diff --git a/ui/shared/chart/useTimeChartController.tsx b/ui/shared/chart/useTimeChartController.tsx
index a180f96831..763fa6559c 100644
--- a/ui/shared/chart/useTimeChartController.tsx
+++ b/ui/shared/chart/useTimeChartController.tsx
@@ -5,7 +5,7 @@ import type { AxesConfig, ChartMargin, TimeChartData } from 'ui/shared/chart/typ
 import useClientRect from 'lib/hooks/useClientRect';
 
 import calculateInnerSize from './utils/calculateInnerSize';
-import { getAxisParams, DEFAULT_MAXIMUM_SIGNIFICANT_DIGITS } from './utils/timeChartAxis';
+import { getAxesParams } from './utils/timeChartAxis';
 
 interface Props {
   data: TimeChartData;
@@ -19,29 +19,27 @@ export default function useTimeChartController({ data, margin, axesConfig }: Pro
 
   // we need to recalculate the axis scale whenever the rect width changes
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const axisParams = React.useMemo(() => getAxisParams(data, axesConfig), [ data, axesConfig, rect?.width ]);
+  const axesParams = React.useMemo(() => getAxesParams(data, axesConfig), [ data, axesConfig, rect?.width ]);
 
   const chartMargin = React.useMemo(() => {
-    const exceedingDigits = (axisParams.y.labelFormatParams.maximumSignificantDigits ?? DEFAULT_MAXIMUM_SIGNIFICANT_DIGITS) -
-       DEFAULT_MAXIMUM_SIGNIFICANT_DIGITS;
-    const PIXELS_PER_DIGIT = 7;
-    const leftShift = PIXELS_PER_DIGIT * exceedingDigits;
+    const PIXELS_PER_DIGIT = 8;
+    const leftShift = axesConfig?.y?.noLabel ? 0 : PIXELS_PER_DIGIT * axesParams.y.labelFormatParams.maxLabelLength;
 
     return {
       ...margin,
       left: (margin?.left ?? 0) + leftShift,
     };
-  }, [ axisParams.y.labelFormatParams.maximumSignificantDigits, margin ]);
+  }, [ axesParams.y.labelFormatParams.maxLabelLength, margin, axesConfig?.y?.noLabel ]);
 
   const { innerWidth, innerHeight } = calculateInnerSize(rect, chartMargin);
 
   const xScale = React.useMemo(() => {
-    return axisParams.x.scale.range([ 0, innerWidth ]);
-  }, [ axisParams.x.scale, innerWidth ]);
+    return axesParams.x.scale.range([ 0, innerWidth ]);
+  }, [ axesParams.x.scale, innerWidth ]);
 
   const yScale = React.useMemo(() => {
-    return axisParams.y.scale.range([ innerHeight, 0 ]);
-  }, [ axisParams.y.scale, innerHeight ]);
+    return axesParams.y.scale.range([ innerHeight, 0 ]);
+  }, [ axesParams.y.scale, innerHeight ]);
 
   return React.useMemo(() => {
     return {
@@ -50,16 +48,16 @@ export default function useTimeChartController({ data, margin, axesConfig }: Pro
       chartMargin,
       innerWidth,
       innerHeight,
-      axis: {
+      axes: {
         x: {
-          tickFormatter: axisParams.x.tickFormatter,
+          tickFormatter: axesParams.x.tickFormatter,
           scale: xScale,
         },
         y: {
-          tickFormatter: axisParams.y.tickFormatter,
+          tickFormatter: axesParams.y.tickFormatter,
           scale: yScale,
         },
       },
     };
-  }, [ axisParams.x.tickFormatter, axisParams.y.tickFormatter, chartMargin, innerHeight, innerWidth, rect, ref, xScale, yScale ]);
+  }, [ axesParams.x.tickFormatter, axesParams.y.tickFormatter, chartMargin, innerHeight, innerWidth, rect, ref, xScale, yScale ]);
 }
diff --git a/ui/shared/chart/useZoom.tsx b/ui/shared/chart/useZoom.tsx
new file mode 100644
index 0000000000..0baa1613f8
--- /dev/null
+++ b/ui/shared/chart/useZoom.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default function useZoom() {
+  const [ isZoomResetInitial, setIsZoomResetInitial ] = React.useState(true);
+  const [ zoomRange, setZoomRange ] = React.useState<[ Date, Date ] | undefined>();
+
+  const handleZoom = React.useCallback((range: [ Date, Date ]) => {
+    setZoomRange(range);
+    setIsZoomResetInitial(false);
+  }, []);
+
+  const handleZoomReset = React.useCallback(() => {
+    setZoomRange(undefined);
+    setIsZoomResetInitial(true);
+  }, []);
+
+  return {
+    isZoomResetInitial,
+    zoomRange,
+    handleZoom,
+    handleZoomReset,
+  };
+}
diff --git a/ui/shared/chart/utils/animations.ts b/ui/shared/chart/utils/animations.ts
new file mode 100644
index 0000000000..2f873f4a69
--- /dev/null
+++ b/ui/shared/chart/utils/animations.ts
@@ -0,0 +1,33 @@
+import * as d3 from 'd3';
+
+export type AnimationType = 'left' | 'fadeIn' | 'none';
+
+export const animateLeft = (path: SVGPathElement) => {
+  const totalLength = path.getTotalLength() || 0;
+  d3.select(path)
+    .attr('opacity', 1)
+    .attr('stroke-dasharray', `${ totalLength },${ totalLength }`)
+    .attr('stroke-dashoffset', totalLength)
+    .transition()
+    .duration(750)
+    .ease(d3.easeLinear)
+    .attr('stroke-dashoffset', 0);
+};
+
+export const animateFadeIn = (path: SVGPathElement) => {
+  d3.select(path)
+    .transition()
+    .duration(750)
+    .ease(d3.easeLinear)
+    .attr('opacity', 1);
+};
+
+export const noneAnimation = (path: SVGPathElement) => {
+  d3.select(path).attr('opacity', 1);
+};
+
+export const ANIMATIONS: Record<AnimationType, (path: SVGPathElement) => void> = {
+  left: animateLeft,
+  fadeIn: animateFadeIn,
+  none: noneAnimation,
+};
diff --git a/ui/shared/chart/utils/computeTooltipPosition.ts b/ui/shared/chart/utils/computeTooltipPosition.ts
deleted file mode 100644
index 88356d34cd..0000000000
--- a/ui/shared/chart/utils/computeTooltipPosition.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import _clamp from 'lodash/clamp';
-
-interface Params {
-  pointX: number;
-  pointY: number;
-  offset: number;
-  nodeWidth: number;
-  nodeHeight: number;
-  canvasWidth: number;
-  canvasHeight: number;
-}
-
-export default function computeTooltipPosition({ pointX, pointY, canvasWidth, canvasHeight, nodeWidth, nodeHeight, offset }: Params): [ number, number ] {
-  // right
-  if (pointX + offset + nodeWidth <= canvasWidth) {
-    const x = pointX + offset;
-    const y = _clamp(pointY - nodeHeight / 2, 0, canvasHeight - nodeHeight);
-    return [ x, y ];
-  }
-
-  // left
-  if (nodeWidth + offset <= pointX) {
-    const x = pointX - offset - nodeWidth;
-    const y = _clamp(pointY - nodeHeight / 2, 0, canvasHeight - nodeHeight);
-    return [ x, y ];
-  }
-
-  // top
-  if (nodeHeight + offset <= pointY) {
-    const x = _clamp(pointX - nodeWidth / 2, 0, canvasWidth - nodeWidth);
-    const y = pointY - offset - nodeHeight;
-    return [ x, y ];
-  }
-
-  // bottom
-  if (pointY + offset + nodeHeight <= canvasHeight) {
-    const x = _clamp(pointX - nodeWidth / 2, 0, canvasWidth - nodeWidth);
-    const y = pointY + offset;
-    return [ x, y ];
-  }
-
-  const x = _clamp(pointX / 2, 0, canvasWidth - nodeWidth);
-  const y = _clamp(pointY / 2, 0, canvasHeight - nodeHeight);
-
-  return [ x, y ];
-}
diff --git a/ui/shared/chart/utils/formatIntervalDate.ts b/ui/shared/chart/utils/formatIntervalDate.ts
new file mode 100644
index 0000000000..701fa9a829
--- /dev/null
+++ b/ui/shared/chart/utils/formatIntervalDate.ts
@@ -0,0 +1,3 @@
+export default function formatDate(date: Date) {
+  return date.toISOString().substring(0, 10);
+}
diff --git a/ui/shared/chart/utils/formatters.ts b/ui/shared/chart/utils/formatters.ts
new file mode 100644
index 0000000000..9d0d13a7d2
--- /dev/null
+++ b/ui/shared/chart/utils/formatters.ts
@@ -0,0 +1,19 @@
+import type { TimeChartItem } from '../types';
+
+export const getIncompleteDataLineSource = (data: Array<TimeChartItem>): Array<TimeChartItem> => {
+  const result: Array<TimeChartItem> = [];
+
+  for (let index = 0; index < data.length; index++) {
+    const current = data[index];
+    if (current.isApproximate) {
+      const prev = data[index - 1];
+      const next = data[index + 1];
+
+      prev && !prev.isApproximate && result.push(prev);
+      result.push(current);
+      next && !next.isApproximate && result.push(next);
+    }
+  }
+
+  return result;
+};
diff --git a/ui/shared/chart/utils/sorts.tsx b/ui/shared/chart/utils/sorts.tsx
index 521825398b..da290c0ce2 100644
--- a/ui/shared/chart/utils/sorts.tsx
+++ b/ui/shared/chart/utils/sorts.tsx
@@ -1,5 +1,5 @@
 import type { TimeChartItem } from '../types';
 
-export const sortByDateDesc = (a: TimeChartItem, b: TimeChartItem) => {
+export const sortByDateDesc = (a: Pick<TimeChartItem, 'date'>, b: Pick<TimeChartItem, 'date'>) => {
   return a.date.getTime() - b.date.getTime();
 };
diff --git a/ui/shared/chart/utils/timeChartAxis.ts b/ui/shared/chart/utils/timeChartAxis.ts
index c9053fa18d..faeea97378 100644
--- a/ui/shared/chart/utils/timeChartAxis.ts
+++ b/ui/shared/chart/utils/timeChartAxis.ts
@@ -1,4 +1,5 @@
 import * as d3 from 'd3';
+import _maxBy from 'lodash/maxBy';
 import _unique from 'lodash/uniq';
 
 import type { AxesConfig, AxisConfig, TimeChartData } from '../types';
@@ -8,8 +9,15 @@ import { WEEK, MONTH, YEAR } from 'lib/consts';
 export const DEFAULT_MAXIMUM_SIGNIFICANT_DIGITS = 2;
 export const DEFAULT_MAXIMUM_FRACTION_DIGITS = 3;
 export const MAXIMUM_SIGNIFICANT_DIGITS_LIMIT = 8;
+export const DEFAULT_LABEL_LENGTH = 5;
 
-export function getAxisParams(data: TimeChartData, axesConfig?: AxesConfig) {
+export interface LabelFormatParams extends Intl.NumberFormatOptions {
+  maxLabelLength: number;
+}
+
+type Data = TimeChartData;
+
+export function getAxesParams(data: Data, axesConfig?: AxesConfig) {
   const { labelFormatParams: labelFormatParamsY, scale: yScale } = getAxisParamsY(data, axesConfig?.y);
 
   return {
@@ -25,7 +33,7 @@ export function getAxisParams(data: TimeChartData, axesConfig?: AxesConfig) {
   };
 }
 
-function getAxisParamsX(data: TimeChartData) {
+function getAxisParamsX(data: Data) {
   const min = d3.min(data, ({ items }) => d3.min(items, ({ date }) => date)) ?? new Date();
   const max = d3.max(data, ({ items }) => d3.max(items, ({ date }) => date)) ?? new Date();
   const scale = d3.scaleTime().domain([ min, max ]);
@@ -53,7 +61,7 @@ const tickFormatterX = (axis: d3.Axis<d3.NumberValue>) => (d: d3.AxisDomain) =>
   return format(d as Date);
 };
 
-function getAxisParamsY(data: TimeChartData, config?: AxisConfig) {
+function getAxisParamsY(data: Data, config?: AxisConfig) {
   const DEFAULT_TICKS_NUM = 3;
   const min = d3.min(data, ({ items }) => d3.min(items, ({ value }) => value)) ?? 0;
   const max = d3.max(data, ({ items }) => d3.max(items, ({ value }) => value)) ?? 0;
@@ -72,27 +80,21 @@ function getAxisParamsY(data: TimeChartData, config?: AxisConfig) {
 
 const getTickFormatterY = (params: Intl.NumberFormatOptions) => () => (d: d3.AxisDomain) => {
   const num = Number(d);
-
-  if (num < 1) {
-    // for small number there are no algorithm to format label right now
-    // so we set it to 3 digits after dot maximum
-    return num.toLocaleString(undefined, { maximumFractionDigits: 3 });
-  }
-
   return num.toLocaleString(undefined, params);
 };
 
-function getYLabelFormatParams(ticks: Array<number>, maximumSignificantDigits = DEFAULT_MAXIMUM_SIGNIFICANT_DIGITS): Intl.NumberFormatOptions {
+function getYLabelFormatParams(ticks: Array<number>, maximumSignificantDigits = DEFAULT_MAXIMUM_SIGNIFICANT_DIGITS): LabelFormatParams {
   const params = {
-    maximumFractionDigits: 3,
+    maximumFractionDigits: DEFAULT_MAXIMUM_FRACTION_DIGITS,
     maximumSignificantDigits,
     notation: 'compact' as const,
   };
 
   const uniqTicksStr = _unique(ticks.map((tick) => tick.toLocaleString(undefined, params)));
+  const maxLabelLength = _maxBy(uniqTicksStr, (items) => items.length)?.length ?? DEFAULT_LABEL_LENGTH;
 
   if (uniqTicksStr.length === ticks.length || maximumSignificantDigits === MAXIMUM_SIGNIFICANT_DIGITS_LIMIT) {
-    return params;
+    return { ...params, maxLabelLength };
   }
 
   return getYLabelFormatParams(ticks, maximumSignificantDigits + 1);
diff --git a/ui/shared/entities/address/AddressEntity.pw.tsx b/ui/shared/entities/address/AddressEntity.pw.tsx
index 91ffb6d093..066c6e62e4 100644
--- a/ui/shared/entities/address/AddressEntity.pw.tsx
+++ b/ui/shared/entities/address/AddressEntity.pw.tsx
@@ -1,27 +1,30 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
+import type { BrowserContext } from '@playwright/test';
 import React from 'react';
 
+import config from 'configs/app';
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
+import * as cookies from 'lib/cookies';
 import * as addressMock from 'mocks/address/address';
-import TestApp from 'playwright/TestApp';
+import * as implementationsMock from 'mocks/address/implementations';
+import * as metadataMock from 'mocks/metadata/address';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import AddressEntity from './AddressEntity';
 
-const iconSizes = [ 'md', 'lg' ];
+const iconSizes = [ 'md', 'lg' ] as const;
 
 test.use({ viewport: { width: 180, height: 140 } });
 
 test.describe('icon size', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <AddressEntity
-            address={ addressMock.withoutName }
-            iconSize={ size }
-          />
-        </TestApp>,
+    test(`${ size }`, async({ render }) => {
+      const component = await render(
+        <AddressEntity
+          address={ addressMock.withoutName }
+          icon={{ size }}
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -30,54 +33,110 @@ test.describe('icon size', () => {
 });
 
 test.describe('contract', () => {
-  test('unverified', async({ mount, page }) => {
-    const component = await mount(
-      <TestApp>
-        <AddressEntity
-          address={{ ...addressMock.contract, is_verified: false }}
-        />
-      </TestApp>,
+  test('unverified', async({ render, page }) => {
+    const component = await render(
+      <AddressEntity
+        address={{ ...addressMock.contract, is_verified: false, implementations: null }}
+      />,
     );
 
     await component.getByText(/eternal/i).hover();
     await expect(page).toHaveScreenshot();
   });
 
-  test('verified', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <AddressEntity
-          address={{ ...addressMock.contract, is_verified: true }}
-        />
-      </TestApp>,
+  test('verified', async({ render }) => {
+    const component = await render(
+      <AddressEntity
+        address={{ ...addressMock.contract, is_verified: true, implementations: null }}
+      />,
     );
 
     await expect(component).toHaveScreenshot();
   });
 });
 
+test.describe('proxy contract', () => {
+  test.use({ viewport: { width: 500, height: 300 } });
+
+  test('with implementation name', async({ render, page }) => {
+    const component = await render(
+      <AddressEntity
+        address={ addressMock.contract }
+      />,
+    );
+
+    await component.getByText(/home/i).hover();
+    await expect(page.getByText('Proxy contract')).toBeVisible();
+    await expect(page).toHaveScreenshot();
+  });
+
+  test('without implementation name', async({ render, page }) => {
+    const component = await render(
+      <AddressEntity
+        address={{ ...addressMock.contract, implementations: [ { address: addressMock.contract.implementations?.[0].address as string } ] }}
+      />,
+    );
+
+    await component.getByText(/eternal/i).hover();
+    await expect(page.getByText('Proxy contract')).toBeVisible();
+    await expect(page).toHaveScreenshot();
+  });
+
+  test('without any name', async({ render, page }) => {
+    const component = await render(
+      <AddressEntity
+        address={{ ...addressMock.contract, name: undefined, implementations: [ { address: addressMock.contract.implementations?.[0].address as string } ] }}
+      />,
+    );
+
+    await component.getByText(addressMock.contract.hash.slice(0, 4)).hover();
+    await expect(page.getByText('Proxy contract')).toBeVisible();
+    await expect(page).toHaveScreenshot();
+  });
+
+  test('with multiple implementations', async({ render, page }) => {
+    const component = await render(
+      <AddressEntity
+        address={{ ...addressMock.contract, implementations: implementationsMock.multiple }}
+      />,
+    );
+
+    await component.getByText(/eternal/i).hover();
+    await expect(page.getByText('Proxy contract')).toBeVisible();
+    await expect(page).toHaveScreenshot();
+  });
+
+  test('with name tag', async({ render, page }) => {
+    const component = await render(
+      <AddressEntity
+        address={{ ...addressMock.contract, metadata: { reputation: 1, tags: [ metadataMock.nameTag ] } }}
+      />,
+    );
+
+    await component.getByText(/quack/i).hover();
+    await expect(page.getByText('Proxy contract')).toBeVisible();
+    await expect(page).toHaveScreenshot();
+  });
+});
+
 test.describe('loading', () => {
-  test('without alias', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <AddressEntity
-          address={ addressMock.withoutName }
-          isLoading
-        />
-      </TestApp>,
+  test('without alias', async({ render }) => {
+    const component = await render(
+      <AddressEntity
+        address={ addressMock.withoutName }
+        isLoading
+      />,
     );
 
     await expect(component).toHaveScreenshot();
   });
 
-  test('with alias', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <AddressEntity
-          address={ addressMock.withName }
-          isLoading
-        />
-      </TestApp>,
+  test('with alias', async({ render }) => {
+    const component = await render(
+      <AddressEntity
+        address={ addressMock.withName }
+        isLoading
+      />,
     );
 
     await expect(component).toHaveScreenshot();
@@ -85,73 +144,91 @@ test.describe('loading', () => {
 
 });
 
-test('with ENS', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressEntity
-        address={ addressMock.withEns }
-      />
-    </TestApp>,
+test('with ENS', async({ render }) => {
+  const component = await render(
+    <AddressEntity
+      address={ addressMock.withEns }
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('external link', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressEntity
-        address={ addressMock.withoutName }
-        isExternal
-      />
-    </TestApp>,
+test('with name tag', async({ render }) => {
+  const component = await render(
+    <AddressEntity
+      address={ addressMock.withNameTag }
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('no link', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressEntity
-        address={ addressMock.withoutName }
-        noLink
-      />
-    </TestApp>,
+test('external link', async({ render }) => {
+  const component = await render(
+    <AddressEntity
+      address={ addressMock.withoutName }
+      isExternal
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('customization', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressEntity
-        address={ addressMock.withoutName }
-        truncation="constant"
-        p={ 3 }
-        borderWidth="1px"
-        borderColor="blue.700"
-      />
-    </TestApp>,
+test('no link', async({ render }) => {
+  const component = await render(
+    <AddressEntity
+      address={ addressMock.withoutName }
+      noLink
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('hover', async({ page, mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressHighlightProvider>
-        <Box p={ 3 }>
-          <AddressEntity
-            address={ addressMock.withoutName }
-          />
-        </Box>
-      </AddressHighlightProvider>
-    </TestApp>,
+test('customization', async({ render }) => {
+  const component = await render(
+    <AddressEntity
+      address={ addressMock.withoutName }
+      truncation="constant"
+      p={ 3 }
+      borderWidth="1px"
+      borderColor="blue.700"
+    />,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('hover', async({ page, render }) => {
+  const component = await render(
+    <AddressHighlightProvider>
+      <Box p={ 3 }>
+        <AddressEntity
+          address={ addressMock.withoutName }
+        />
+      </Box>
+    </AddressHighlightProvider>,
   );
 
   await component.getByText(addressMock.hash.slice(0, 4)).hover();
   await expect(page).toHaveScreenshot();
 });
+
+const bech32test = test.extend<{ context: BrowserContext }>({
+  context: async({ context }, use) => {
+    context.addCookies([ { name: cookies.NAMES.ADDRESS_FORMAT, value: 'bech32', domain: config.app.host, path: '/' } ]);
+    use(context);
+  },
+});
+
+bech32test('bech32 format', async({ render, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.addressBech32Format);
+  const component = await render(
+    <AddressEntity
+      address={ addressMock.withoutName }
+    />,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/shared/entities/address/AddressEntity.tsx b/ui/shared/entities/address/AddressEntity.tsx
index 94ff1ef7ea..24ff651fac 100644
--- a/ui/shared/entities/address/AddressEntity.tsx
+++ b/ui/shared/entities/address/AddressEntity.tsx
@@ -1,16 +1,18 @@
 import type { As } from '@chakra-ui/react';
-import { Box, Flex, Skeleton, Tooltip, chakra, VStack, useColorModeValue } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
+import { Box, Flex, Skeleton, Tooltip, chakra, VStack } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressParam } from 'types/api/addressParams';
 
 import { route } from 'nextjs-routes';
 
+import { toBech32Address } from 'lib/address/bech32';
 import { useAddressHighlightContext } from 'lib/contexts/addressHighlight';
+import { useSettingsContext } from 'lib/contexts/settings';
 import * as EntityBase from 'ui/shared/entities/base/components';
 
-import { getIconProps } from '../base/utils';
+import { distributeEntityProps, getIconProps } from '../base/utils';
+import AddressEntityContentProxy from './AddressEntityContentProxy';
 import AddressIdenticon from './AddressIdenticon';
 
 type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'address'>;
@@ -28,9 +30,7 @@ const Link = chakra((props: LinkProps) => {
   );
 });
 
-type IconProps = Pick<EntityProps, 'address' | 'isLoading' | 'iconSize' | 'noIcon' | 'isSafeAddress'> & {
-  asProp?: As;
-};
+type IconProps = Pick<EntityProps, 'address' | 'isSafeAddress'> & EntityBase.IconBaseProps;
 
 const Icon = (props: IconProps) => {
   if (props.noIcon) {
@@ -38,8 +38,8 @@ const Icon = (props: IconProps) => {
   }
 
   const styles = {
-    ...getIconProps(props.iconSize),
-    marginRight: 2,
+    ...getIconProps(props.size),
+    marginRight: props.marginRight ?? 2,
   };
 
   if (props.isLoading) {
@@ -56,27 +56,18 @@ const Icon = (props: IconProps) => {
       );
     }
 
-    if (props.address.is_verified) {
-      return (
-        <Tooltip label="Verified contract">
-          <span>
-            <EntityBase.Icon
-              { ...props }
-              name="contract_verified"
-              color="green.500"
-              borderRadius={ 0 }
-            />
-          </span>
-        </Tooltip>
-      );
-    }
+    const isProxy = Boolean(props.address.implementations?.length);
+    const isVerified = isProxy ? props.address.is_verified && props.address.implementations?.every(({ name }) => Boolean(name)) : props.address.is_verified;
+    const contractIconName: EntityBase.IconBaseProps['name'] = props.address.is_verified ? 'contracts/verified' : 'contracts/regular';
+    const label = (isVerified ? 'verified ' : '') + (isProxy ? 'proxy contract' : 'contract');
 
     return (
-      <Tooltip label="Contract">
+      <Tooltip label={ label.slice(0, 1).toUpperCase() + label.slice(1) }>
         <span>
           <EntityBase.Icon
             { ...props }
-            name="contract"
+            name={ isProxy ? 'contracts/proxy' : contractIconName }
+            color={ isVerified ? 'green.500' : undefined }
             borderRadius={ 0 }
           />
         </span>
@@ -85,33 +76,39 @@ const Icon = (props: IconProps) => {
   }
 
   return (
-    <Tooltip label={ props.address.implementation_name }>
-      <Flex marginRight={ styles.marginRight }>
-        <AddressIdenticon
-          size={ props.iconSize === 'lg' ? 30 : 20 }
-          hash={ props.address.hash }
-        />
-      </Flex>
-    </Tooltip>
+    <Flex marginRight={ styles.marginRight }>
+      <AddressIdenticon
+        size={ props.size === 'lg' ? 30 : 20 }
+        hash={ props.address.filecoin?.robust ?? props.address.hash }
+      />
+    </Flex>
   );
 };
 
-type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'address'>;
+export type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'address'> & { altHash?: string };
 
 const Content = chakra((props: ContentProps) => {
-  if (props.address.name || props.address.ens_domain_name) {
-    const text = props.address.ens_domain_name || props.address.name;
+  const nameTag = props.address.metadata?.tags.find(tag => tag.tagType === 'name')?.name;
+  const nameText = nameTag || props.address.ens_domain_name || props.address.name;
+
+  const isProxy = props.address.implementations && props.address.implementations.length > 0;
+
+  if (isProxy) {
+    return <AddressEntityContentProxy { ...props }/>;
+  }
+
+  if (nameText) {
     const label = (
       <VStack gap={ 0 } py={ 1 } color="inherit">
-        <Box fontWeight={ 600 } whiteSpace="pre-wrap" wordBreak="break-word">{ text }</Box>
-        <Box whiteSpace="pre-wrap" wordBreak="break-word">{ props.address.hash }</Box>
+        <Box fontWeight={ 600 } whiteSpace="pre-wrap" wordBreak="break-word">{ nameText }</Box>
+        <Box whiteSpace="pre-wrap" wordBreak="break-word">{ props.address.filecoin?.robust ?? props.altHash ?? props.address.hash }</Box>
       </VStack>
     );
 
     return (
-      <Tooltip label={ label } maxW="100vw">
+      <Tooltip label={ label } maxW={{ base: 'calc(100vw - 8px)', lg: '400px' }}>
         <Skeleton isLoaded={ !props.isLoading } overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" as="span">
-          { text }
+          { nameText }
         </Skeleton>
       </Tooltip>
     );
@@ -120,72 +117,62 @@ const Content = chakra((props: ContentProps) => {
   return (
     <EntityBase.Content
       { ...props }
-      text={ props.address.hash }
+      text={ props.address.filecoin?.robust ?? props.altHash ?? props.address.hash }
     />
   );
 });
 
-type CopyProps = Omit<EntityBase.CopyBaseProps, 'text'> & Pick<EntityProps, 'address'>;
+type CopyProps = Omit<EntityBase.CopyBaseProps, 'text'> & Pick<EntityProps, 'address'> & { altHash?: string };
 
 const Copy = (props: CopyProps) => {
   return (
     <EntityBase.Copy
       { ...props }
-      text={ props.address.hash }
+      text={ props.address.filecoin?.robust ?? props.altHash ?? props.address.hash }
     />
   );
 };
 
 const Container = EntityBase.Container;
 
+interface AddressProp extends Partial<AddressParam> {
+  hash: string;
+}
+
 export interface EntityProps extends EntityBase.EntityBaseProps {
-  address: Pick<AddressParam, 'hash' | 'name' | 'is_contract' | 'is_verified' | 'implementation_name' | 'ens_domain_name'>;
+  address: AddressProp;
   isSafeAddress?: boolean;
+  noHighlight?: boolean;
+  noAltHash?: boolean;
 }
 
 const AddressEntry = (props: EntityProps) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
-
-  const context = useAddressHighlightContext();
-  const highlightedBgColor = useColorModeValue('blue.50', 'blue.900');
-  const highlightedBorderColor = useColorModeValue('blue.200', 'blue.600');
+  const partsProps = distributeEntityProps(props);
+  const highlightContext = useAddressHighlightContext(props.noHighlight);
+  const settingsContext = useSettingsContext();
+  const altHash = !props.noAltHash && settingsContext?.addressFormat === 'bech32' ? toBech32Address(props.address.hash) : undefined;
 
   return (
     <Container
-      className={ props.className }
-      data-hash={ props.address.hash }
-      onMouseEnter={ context?.onMouseEnter }
-      onMouseLeave={ context?.onMouseLeave }
+      // we have to use the global classnames here, see theme/global.ts
+      // otherwise, if we use sx prop, Chakra will generate the same styles for each instance of the component on the page
+      className={ `${ props.className } address-entity ${ props.noCopy ? 'address-entity_no-copy' : '' }` }
+      data-hash={ highlightContext && !props.isLoading ? props.address.hash : undefined }
+      onMouseEnter={ highlightContext?.onMouseEnter }
+      onMouseLeave={ highlightContext?.onMouseLeave }
       position="relative"
-      _before={ !props.isLoading && context?.highlightedAddress === props.address.hash ? {
-        content: `" "`,
-        position: 'absolute',
-        py: 1,
-        pl: 1,
-        pr: props.noCopy ? 2 : 0,
-        top: '-5px',
-        left: '-5px',
-        width: `100%`,
-        height: '100%',
-        borderRadius: 'base',
-        borderColor: highlightedBorderColor,
-        borderWidth: '1px',
-        borderStyle: 'dashed',
-        bgColor: highlightedBgColor,
-        zIndex: -1,
-      } : undefined }
+      zIndex={ 0 }
     >
-      <Icon { ...partsProps }/>
-      <Link { ...linkProps }>
-        <Content { ...partsProps }/>
+      <Icon { ...partsProps.icon }/>
+      <Link { ...partsProps.link }>
+        <Content { ...partsProps.content } altHash={ altHash }/>
       </Link>
-      <Copy { ...partsProps }/>
+      <Copy { ...partsProps.copy } altHash={ altHash }/>
     </Container>
   );
 };
 
-export default React.memo(chakra(AddressEntry));
+export default React.memo(chakra<As, EntityProps>(AddressEntry));
 
 export {
   Container,
diff --git a/ui/shared/entities/address/AddressEntityContentProxy.tsx b/ui/shared/entities/address/AddressEntityContentProxy.tsx
new file mode 100644
index 0000000000..5941a2782d
--- /dev/null
+++ b/ui/shared/entities/address/AddressEntityContentProxy.tsx
@@ -0,0 +1,76 @@
+import { Box, DarkMode, PopoverBody, PopoverContent, PopoverTrigger, Portal, useColorModeValue, Flex, PopoverArrow } from '@chakra-ui/react';
+import React from 'react';
+
+import Popover from 'ui/shared/chakra/Popover';
+import * as EntityBase from 'ui/shared/entities/base/components';
+
+import type { ContentProps } from './AddressEntity';
+import AddressEntity from './AddressEntity';
+
+const AddressEntityContentProxy = (props: ContentProps) => {
+  const bgColor = useColorModeValue('gray.700', 'gray.900');
+
+  const implementations = props.address.implementations;
+
+  const handleClick = React.useCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+  }, []);
+
+  if (!implementations || implementations.length === 0) {
+    return null;
+  }
+
+  const colNum = Math.min(implementations.length, 3);
+  const nameTag = props.address.metadata?.tags.find(tag => tag.tagType === 'name')?.name;
+
+  const implementationName = implementations.length === 1 && implementations[0].name ? implementations[0].name : undefined;
+
+  return (
+    <Popover trigger="hover" isLazy gutter={ 8 }>
+      <PopoverTrigger>
+        <Box display="inline-flex" w="100%">
+          <EntityBase.Content
+            { ...props }
+            truncation={ nameTag || implementationName || props.address.name ? 'tail' : props.truncation }
+            text={ nameTag || implementationName || props.address.name || props.altHash || props.address.hash }
+            isTooltipDisabled
+          />
+        </Box>
+      </PopoverTrigger>
+      <Portal>
+        <DarkMode>
+          <PopoverContent bgColor={ bgColor } w="fit-content" borderRadius="sm" maxW={{ base: '100vw', lg: '410px' }} onClick={ handleClick }>
+            <PopoverArrow bgColor={ bgColor }/>
+            <PopoverBody color="white" p={ 2 } fontSize="sm" lineHeight={ 5 } textAlign="center">
+              <Box fontWeight={ 600 }>
+                Proxy contract
+                { props.address.name ? ` (${ props.address.name })` : '' }
+              </Box>
+              <AddressEntity address={{ hash: props.address.hash, filecoin: props.address.filecoin }} noLink noIcon noHighlight justifyContent="center"/>
+              <Box fontWeight={ 600 } mt={ 2 }>
+                Implementation{ implementations.length > 1 ? 's' : '' }
+                { implementationName ? ` (${ implementationName })` : '' }
+              </Box>
+              <Flex flexWrap="wrap" columnGap={ 3 }>
+                { implementations.map((item) => (
+                  <AddressEntity
+                    key={ item.address }
+                    address={{ hash: item.address, filecoin: { robust: item.filecoin_robust_address } }}
+                    noLink
+                    noIcon
+                    noHighlight
+                    minW={ `calc((100% - ${ colNum - 1 } * 12px) / ${ colNum })` }
+                    flex={ 1 }
+                    justifyContent={ colNum === 1 ? 'center' : undefined }
+                  />
+                )) }
+              </Flex>
+            </PopoverBody>
+          </PopoverContent>
+        </DarkMode>
+      </Portal>
+    </Popover>
+  );
+};
+
+export default React.memo(AddressEntityContentProxy);
diff --git a/ui/shared/entities/address/AddressEntityL1.tsx b/ui/shared/entities/address/AddressEntityL1.tsx
index 5df57f35d7..4732061644 100644
--- a/ui/shared/entities/address/AddressEntityL1.tsx
+++ b/ui/shared/entities/address/AddressEntityL1.tsx
@@ -7,14 +7,14 @@ import config from 'configs/app';
 
 import * as AddressEntity from './AddressEntity';
 
-const feature = config.features.optimisticRollup;
+const rollupFeature = config.features.rollup;
 
 const AddressEntityL1 = (props: AddressEntity.EntityProps) => {
-  if (!feature.isEnabled) {
+  if (!rollupFeature.isEnabled) {
     return null;
   }
 
-  const defaultHref = feature.L1BaseUrl + route({
+  const defaultHref = rollupFeature.L1BaseUrl + route({
     pathname: '/address/[hash]',
     query: {
       ...props.query,
diff --git a/ui/shared/entities/address/AddressIdenticon.tsx b/ui/shared/entities/address/AddressIdenticon.tsx
index 2d2b96fb5a..37004e3cff 100644
--- a/ui/shared/entities/address/AddressIdenticon.tsx
+++ b/ui/shared/entities/address/AddressIdenticon.tsx
@@ -3,6 +3,7 @@ import dynamic from 'next/dynamic';
 import React from 'react';
 
 import config from 'configs/app';
+import * as cookies from 'lib/cookies';
 import IdenticonGithub from 'ui/shared/IdenticonGithub';
 
 interface IconProps {
@@ -12,16 +13,16 @@ interface IconProps {
 
 const Icon = dynamic(
   async() => {
-    switch (config.UI.views.address.identiconType) {
+    const type = cookies.get(cookies.NAMES.ADDRESS_IDENTICON_TYPE) || config.UI.views.address.identiconType;
+    switch (type) {
       case 'github': {
-        // eslint-disable-next-line react/display-name
+
         return (props: IconProps) => <IdenticonGithub size={ props.size } seed={ props.hash }/>;
       }
 
       case 'blockie': {
         const { blo } = (await import('blo'));
 
-        // eslint-disable-next-line react/display-name
         return (props: IconProps) => {
           const data = blo(props.hash as `0x${ string }`, props.size);
           return (
@@ -36,7 +37,6 @@ const Icon = dynamic(
       case 'jazzicon': {
         const Jazzicon = await import('react-jazzicon');
 
-        // eslint-disable-next-line react/display-name
         return (props: IconProps) => {
           return (
             <Jazzicon.default
@@ -50,13 +50,21 @@ const Icon = dynamic(
       case 'gradient_avatar': {
         const GradientAvatar = (await import('gradient-avatar')).default;
 
-        // eslint-disable-next-line react/display-name
         return (props: IconProps) => {
-          const svg = GradientAvatar(props.hash, props.size);
+          const svg = GradientAvatar(props.hash, props.size, 'circle');
           return <div dangerouslySetInnerHTML={{ __html: svg }}/>;
         };
       }
 
+      case 'nouns': {
+        const Noun = (await import('@cloudnouns/kit'));
+
+        return (props: IconProps) => {
+          const noun = Noun.NounFactory.createFromString(props.hash, { size: props.size });
+          return <Image src={ noun.svg } alt={ `Identicon for ${ props.hash }}` }/>;
+        };
+      }
+
       default: {
         return () => null;
       }
diff --git a/ui/shared/entities/address/AddressStringOrParam.tsx b/ui/shared/entities/address/AddressStringOrParam.tsx
new file mode 100644
index 0000000000..6005339e90
--- /dev/null
+++ b/ui/shared/entities/address/AddressStringOrParam.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import type { AddressParamBasic } from 'types/api/addressParams';
+
+import AddressEntity from './AddressEntity';
+import type { EntityProps } from './AddressEntity';
+
+type Props = Omit<EntityProps, 'address'> & {
+  address: string | AddressParamBasic;
+};
+
+const AddressStringOrParam = ({ address, ...props }: Props) => {
+  let addressParam;
+  if (typeof address === 'string') {
+    addressParam = { hash: address };
+  } else {
+    addressParam = address;
+  }
+
+  return <AddressEntity address={ addressParam } { ...props }/>;
+};
+
+export default AddressStringOrParam;
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_bech32-format-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_bech32-format-1.png
new file mode 100644
index 0000000000..8f2d155327
Binary files /dev/null and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_bech32-format-1.png differ
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_contract-unverified-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_contract-unverified-1.png
index 5af8e38ece..925ec10742 100644
Binary files a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_contract-unverified-1.png and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_contract-unverified-1.png differ
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_contract-verified-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_contract-verified-1.png
index 1f2cb0ddab..02491e4497 100644
Binary files a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_contract-verified-1.png and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_contract-verified-1.png differ
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_customization-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_customization-1.png
index b165aa4606..95695985ed 100644
Binary files a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_customization-1.png and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_customization-1.png differ
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_external-link-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_external-link-1.png
index 5d824ab018..8e05724412 100644
Binary files a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_external-link-1.png and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_external-link-1.png differ
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_hover-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_hover-1.png
index 0d77e3eb86..628f1fdcc7 100644
Binary files a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_hover-1.png and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_hover-1.png differ
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_icon-size-lg-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_icon-size-lg-1.png
index 209b01692e..e1fa89e0ac 100644
Binary files a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_icon-size-lg-1.png and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_icon-size-lg-1.png differ
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_icon-size-md-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_icon-size-md-1.png
index 203e7d1e3f..51cfae0d0f 100644
Binary files a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_icon-size-md-1.png and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_icon-size-md-1.png differ
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_no-link-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_no-link-1.png
index 93e3085c5d..7f686ea4c6 100644
Binary files a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_no-link-1.png and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_no-link-1.png differ
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-implementation-name-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-implementation-name-1.png
new file mode 100644
index 0000000000..06a88626ff
Binary files /dev/null and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-implementation-name-1.png differ
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-multiple-implementations-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-multiple-implementations-1.png
new file mode 100644
index 0000000000..741962ca5c
Binary files /dev/null and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-multiple-implementations-1.png differ
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-name-tag-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-name-tag-1.png
new file mode 100644
index 0000000000..5fb52d8463
Binary files /dev/null and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-name-tag-1.png differ
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-without-any-name-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-without-any-name-1.png
new file mode 100644
index 0000000000..fc8598759c
Binary files /dev/null and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-without-any-name-1.png differ
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-without-implementation-name-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-without-implementation-name-1.png
new file mode 100644
index 0000000000..5e32d5113a
Binary files /dev/null and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-without-implementation-name-1.png differ
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_with-ENS-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_with-ENS-1.png
index 102632e226..82b5b6c5f1 100644
Binary files a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_with-ENS-1.png and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_with-ENS-1.png differ
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_with-name-tag-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_with-name-tag-1.png
new file mode 100644
index 0000000000..3096a83046
Binary files /dev/null and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_with-name-tag-1.png differ
diff --git a/ui/shared/entities/base/components.tsx b/ui/shared/entities/base/components.tsx
index 2beee12d0c..7378cff684 100644
--- a/ui/shared/entities/base/components.tsx
+++ b/ui/shared/entities/base/components.tsx
@@ -8,17 +8,17 @@ import HashStringShorten from 'ui/shared/HashStringShorten';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkExternal from 'ui/shared/LinkExternal';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 
 import { getIconProps, type IconSize } from './utils';
 
-export type Truncation = 'constant' | 'dynamic' | 'tail' | 'none';
+export type Truncation = 'constant' | 'constant_long' | 'dynamic' | 'tail' | 'none';
 
 export interface EntityBaseProps {
   className?: string;
   href?: string;
-  iconSize?: IconSize;
+  icon?: EntityIconProps;
   isExternal?: boolean;
   isLoading?: boolean;
   noCopy?: boolean;
@@ -79,28 +79,29 @@ const Link = chakra(({ isLoading, children, isExternal, onClick, href, noLink }:
   );
 });
 
-export interface IconBaseProps extends Pick<EntityBaseProps, 'isLoading' | 'iconSize' | 'noIcon'> {
-  name: IconName;
-  color?: IconProps['color'];
-  borderRadius?: IconProps['borderRadius'];
+interface EntityIconProps extends Pick<IconProps, 'color' | 'borderRadius' | 'marginRight' | 'boxSize'> {
+  name?: IconName;
+  size?: IconSize;
 }
 
-const Icon = ({ isLoading, iconSize, noIcon, name, color, borderRadius }: IconBaseProps) => {
+export interface IconBaseProps extends Pick<EntityBaseProps, 'isLoading' | 'noIcon'>, EntityIconProps {}
+
+const Icon = ({ isLoading, noIcon, size, name, color, borderRadius, marginRight, boxSize }: IconBaseProps) => {
   const defaultColor = useColorModeValue('gray.500', 'gray.400');
 
-  if (noIcon) {
+  if (noIcon || !name) {
     return null;
   }
 
-  const styles = getIconProps(iconSize);
+  const styles = getIconProps(size);
   return (
     <IconSvg
       name={ name }
-      boxSize={ styles.boxSize }
+      boxSize={ boxSize ?? styles.boxSize }
       isLoading={ isLoading }
       borderRadius={ borderRadius ?? 'base' }
       display="block"
-      mr={ 2 }
+      mr={ marginRight ?? 2 }
       color={ color ?? defaultColor }
       minW={ 0 }
       flexShrink={ 0 }
@@ -111,17 +112,28 @@ const Icon = ({ isLoading, iconSize, noIcon, name, color, borderRadius }: IconBa
 export interface ContentBaseProps extends Pick<EntityBaseProps, 'className' | 'isLoading' | 'truncation' | 'tailLength'> {
   asProp?: As;
   text: string;
+  isTooltipDisabled?: boolean;
 }
 
-const Content = chakra(({ className, isLoading, asProp, text, truncation = 'dynamic', tailLength }: ContentBaseProps) => {
+const Content = chakra(({ className, isLoading, asProp, text, truncation = 'dynamic', tailLength, isTooltipDisabled }: ContentBaseProps) => {
 
   const children = (() => {
     switch (truncation) {
+      case 'constant_long':
+        return (
+          <HashStringShorten
+            hash={ text }
+            as={ asProp }
+            type="long"
+            isTooltipDisabled={ isTooltipDisabled }
+          />
+        );
       case 'constant':
         return (
           <HashStringShorten
             hash={ text }
             as={ asProp }
+            isTooltipDisabled={ isTooltipDisabled }
           />
         );
       case 'dynamic':
@@ -130,8 +142,10 @@ const Content = chakra(({ className, isLoading, asProp, text, truncation = 'dyna
             hash={ text }
             as={ asProp }
             tailLength={ tailLength }
+            isTooltipDisabled={ isTooltipDisabled }
           />
         );
+      case 'tail':
       case 'none':
         return <chakra.span as={ asProp }>{ text }</chakra.span>;
     }
@@ -143,6 +157,7 @@ const Content = chakra(({ className, isLoading, asProp, text, truncation = 'dyna
       isLoaded={ !isLoading }
       overflow="hidden"
       whiteSpace="nowrap"
+      textOverflow={ truncation === 'tail' ? 'ellipsis' : undefined }
     >
       { children }
     </Skeleton>
diff --git a/ui/shared/entities/base/utils.ts b/ui/shared/entities/base/utils.ts
index 6763b9dd56..bba8cc3e57 100644
--- a/ui/shared/entities/base/utils.ts
+++ b/ui/shared/entities/base/utils.ts
@@ -1,3 +1,5 @@
+import type { EntityBaseProps } from './components';
+
 export type IconSize = 'md' | 'lg';
 
 export function getIconProps(size: IconSize = 'md') {
@@ -14,3 +16,16 @@ export function getIconProps(size: IconSize = 'md') {
     }
   }
 }
+
+export function distributeEntityProps<Props extends EntityBaseProps>(props: Props) {
+  const { className, onClick, icon, ...restProps } = props;
+
+  return {
+    container: { className },
+    icon: { ...restProps, ...icon },
+    link: { ...restProps, onClick },
+    content: restProps,
+    symbol: restProps,
+    copy: restProps,
+  };
+}
diff --git a/ui/shared/entities/blob/BlobEntity.tsx b/ui/shared/entities/blob/BlobEntity.tsx
new file mode 100644
index 0000000000..7ca61da9e9
--- /dev/null
+++ b/ui/shared/entities/blob/BlobEntity.tsx
@@ -0,0 +1,87 @@
+import type { As } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import * as EntityBase from 'ui/shared/entities/base/components';
+
+import { distributeEntityProps } from '../base/utils';
+
+type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'hash'>;
+
+const Link = chakra((props: LinkProps) => {
+  const defaultHref = route({ pathname: '/blobs/[hash]', query: { hash: props.hash } });
+
+  return (
+    <EntityBase.Link
+      { ...props }
+      href={ props.href ?? defaultHref }
+    >
+      { props.children }
+    </EntityBase.Link>
+  );
+});
+
+const Icon = (props: EntityBase.IconBaseProps) => {
+  return (
+    <EntityBase.Icon
+      { ...props }
+      name={ props.name ?? 'blob' }
+    />
+  );
+};
+
+type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'hash' | 'text'>;
+
+const Content = chakra((props: ContentProps) => {
+  return (
+    <EntityBase.Content
+      { ...props }
+      text={ props.text ?? props.hash }
+    />
+  );
+});
+
+type CopyProps = Omit<EntityBase.CopyBaseProps, 'text'> & Pick<EntityProps, 'hash'>;
+
+const Copy = (props: CopyProps) => {
+  return (
+    <EntityBase.Copy
+      { ...props }
+      text={ props.hash }
+      noCopy={ props.noCopy }
+    />
+  );
+};
+
+const Container = EntityBase.Container;
+
+export interface EntityProps extends EntityBase.EntityBaseProps {
+  hash: string;
+  text?: string;
+}
+
+const BlobEntity = (props: EntityProps) => {
+  const partsProps = distributeEntityProps(props);
+
+  return (
+    <Container { ...partsProps.container }>
+      <Icon { ...partsProps.icon }/>
+      <Link { ...partsProps.link }>
+        <Content { ...partsProps.content }/>
+      </Link>
+      <Copy { ...partsProps.copy }/>
+    </Container>
+  );
+};
+
+export default React.memo(chakra<As, EntityProps>(BlobEntity));
+
+export {
+  Container,
+  Link,
+  Icon,
+  Content,
+  Copy,
+};
diff --git a/ui/shared/entities/blob/BlobEntityL1.tsx b/ui/shared/entities/blob/BlobEntityL1.tsx
new file mode 100644
index 0000000000..3282feeb4d
--- /dev/null
+++ b/ui/shared/entities/blob/BlobEntityL1.tsx
@@ -0,0 +1,27 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+
+import * as BlobEntity from './BlobEntity';
+
+const rollupFeature = config.features.rollup;
+
+const BlobEntityL1 = (props: BlobEntity.EntityProps) => {
+  if (!rollupFeature.isEnabled) {
+    return null;
+  }
+
+  const defaultHref = rollupFeature.L1BaseUrl + route({
+    pathname: '/blobs/[hash]',
+    query: { hash: props.hash },
+  });
+
+  return (
+    <BlobEntity.default { ...props } href={ props.href ?? defaultHref } isExternal/>
+  );
+};
+
+export default chakra(BlobEntityL1);
diff --git a/ui/shared/entities/block/BatchEntityL2.tsx b/ui/shared/entities/block/BatchEntityL2.tsx
new file mode 100644
index 0000000000..dd4032b731
--- /dev/null
+++ b/ui/shared/entities/block/BatchEntityL2.tsx
@@ -0,0 +1,28 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+
+import * as BlockEntity from './BlockEntity';
+
+const rollupFeature = config.features.rollup;
+
+const BatchEntityL2 = (props: BlockEntity.EntityProps) => {
+  if (!rollupFeature.isEnabled) {
+    return null;
+  }
+
+  const defaultHref = route({ pathname: '/batches/[number]', query: { number: props.number.toString() } });
+
+  return (
+    <BlockEntity.default
+      { ...props }
+      href={ props.href ?? defaultHref }
+      icon={{ name: 'txn_batches_slim' }}
+    />
+  );
+};
+
+export default chakra(BatchEntityL2);
diff --git a/ui/shared/entities/block/BlockEntity.pw.tsx b/ui/shared/entities/block/BlockEntity.pw.tsx
index 0098f03b05..4ea850f183 100644
--- a/ui/shared/entities/block/BlockEntity.pw.tsx
+++ b/ui/shared/entities/block/BlockEntity.pw.tsx
@@ -1,24 +1,21 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import BlockEntity from './BlockEntity';
 
-const iconSizes = [ 'md', 'lg' ];
+const iconSizes = [ 'md', 'lg' ] as const;
 
 test.use({ viewport: { width: 180, height: 30 } });
 
 test.describe('icon sizes', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <BlockEntity
-            number={ 17943507 }
-            iconSize={ size }
-          />
-        </TestApp>,
+    test(`${ size }`, async({ render }) => {
+      const component = await render(
+        <BlockEntity
+          number={ 17943507 }
+          icon={{ size }}
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -26,27 +23,23 @@ test.describe('icon sizes', () => {
   });
 });
 
-test('loading', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <BlockEntity
-        number={ 17943507 }
-        isLoading
-      />
-    </TestApp>,
+test('loading', async({ render }) => {
+  const component = await render(
+    <BlockEntity
+      number={ 17943507 }
+      isLoading
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('external link +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <BlockEntity
-        number={ 17943507 }
-        isExternal
-      />
-    </TestApp>,
+test('external link +@dark-mode', async({ render }) => {
+  const component = await render(
+    <BlockEntity
+      number={ 17943507 }
+      isExternal
+    />,
   );
 
   await component.getByText('17943507').hover();
@@ -54,28 +47,24 @@ test('external link +@dark-mode', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('long number', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <BlockEntity
-        number={ 1794350723452223 }
-      />
-    </TestApp>,
+test('long number', async({ render }) => {
+  const component = await render(
+    <BlockEntity
+      number={ 1794350723452223 }
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('customization', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <BlockEntity
-        number={ 17943507 }
-        p={ 3 }
-        borderWidth="1px"
-        borderColor="blue.700"
-      />
-    </TestApp>,
+test('customization', async({ render }) => {
+  const component = await render(
+    <BlockEntity
+      number={ 17943507 }
+      p={ 3 }
+      borderWidth="1px"
+      borderColor="blue.700"
+    />,
   );
 
   await expect(component).toHaveScreenshot();
diff --git a/ui/shared/entities/block/BlockEntity.tsx b/ui/shared/entities/block/BlockEntity.tsx
index 35ca18b72f..6ef37b8290 100644
--- a/ui/shared/entities/block/BlockEntity.tsx
+++ b/ui/shared/entities/block/BlockEntity.tsx
@@ -1,12 +1,14 @@
+import type { As } from '@chakra-ui/react';
 import { chakra } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
 import * as EntityBase from 'ui/shared/entities/base/components';
 
-type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'hash' | 'number'>;
+import { distributeEntityProps } from '../base/utils';
+
+type LinkProps = EntityBase.LinkBaseProps & Partial<Pick<EntityProps, 'hash' | 'number'>>;
 
 const Link = chakra((props: LinkProps) => {
   const heightOrHash = props.hash ?? String(props.number);
@@ -22,11 +24,7 @@ const Link = chakra((props: LinkProps) => {
   );
 });
 
-type IconProps = Omit<EntityBase.IconBaseProps, 'name'> & {
-  name?: EntityBase.IconBaseProps['name'];
-};
-
-const Icon = (props: IconProps) => {
+const Icon = (props: EntityBase.IconBaseProps) => {
   return (
     <EntityBase.Icon
       { ...props }
@@ -50,25 +48,24 @@ const Content = chakra((props: ContentProps) => {
 const Container = EntityBase.Container;
 
 export interface EntityProps extends EntityBase.EntityBaseProps {
-  number: number;
+  number: number | string;
   hash?: string;
 }
 
 const BlockEntity = (props: EntityProps) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
+  const partsProps = distributeEntityProps(props);
 
   return (
-    <Container className={ props.className }>
-      <Icon { ...partsProps }/>
-      <Link { ...linkProps }>
-        <Content { ...partsProps }/>
+    <Container { ...partsProps.container }>
+      <Icon { ...partsProps.icon }/>
+      <Link { ...partsProps.link }>
+        <Content { ...partsProps.content }/>
       </Link>
     </Container>
   );
 };
 
-export default React.memo(chakra(BlockEntity));
+export default React.memo(chakra<As, EntityProps>(BlockEntity));
 
 export {
   Container,
diff --git a/ui/shared/entities/block/BlockEntityL1.tsx b/ui/shared/entities/block/BlockEntityL1.tsx
index 6816ac8e8a..93f4b6a301 100644
--- a/ui/shared/entities/block/BlockEntityL1.tsx
+++ b/ui/shared/entities/block/BlockEntityL1.tsx
@@ -1,5 +1,4 @@
 import { chakra } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
@@ -8,28 +7,19 @@ import config from 'configs/app';
 
 import * as BlockEntity from './BlockEntity';
 
-const feature = config.features.optimisticRollup;
+const rollupFeature = config.features.rollup;
 
 const BlockEntityL1 = (props: BlockEntity.EntityProps) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
-
-  if (!feature.isEnabled) {
+  if (!rollupFeature.isEnabled) {
     return null;
   }
 
-  return (
-    <BlockEntity.Container className={ props.className }>
-      <BlockEntity.Icon { ...partsProps }/>
-      <BlockEntity.Link
-        { ...linkProps }
-        isExternal
-        href={ feature.L1BaseUrl + route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: props.hash ?? String(props.number) } }) }
-      >
-        <BlockEntity.Content { ...partsProps }/>
-      </BlockEntity.Link>
-    </BlockEntity.Container>
-  );
+  const defaultHref = rollupFeature.L1BaseUrl + route({
+    pathname: '/block/[height_or_hash]',
+    query: { height_or_hash: props.hash ?? String(props.number) },
+  });
+
+  return <BlockEntity.default { ...props } href={ props.href ?? defaultHref } isExternal/>;
 };
 
 export default chakra(BlockEntityL1);
diff --git a/ui/shared/entities/block/BlockEntityL2.tsx b/ui/shared/entities/block/BlockEntityL2.tsx
index b1722d53fa..c078495d0e 100644
--- a/ui/shared/entities/block/BlockEntityL2.tsx
+++ b/ui/shared/entities/block/BlockEntityL2.tsx
@@ -1,29 +1,18 @@
 import { chakra } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
 import React from 'react';
 
 import config from 'configs/app';
 
 import * as BlockEntity from './BlockEntity';
 
-const feature = config.features.optimisticRollup;
+const rollupFeature = config.features.rollup;
 
 const BlockEntityL2 = (props: BlockEntity.EntityProps) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
-
-  if (!feature.isEnabled) {
+  if (!rollupFeature.isEnabled) {
     return null;
   }
 
-  return (
-    <BlockEntity.Container className={ props.className }>
-      <BlockEntity.Icon { ...partsProps } name="txn_batches_slim"/>
-      <BlockEntity.Link { ...linkProps }>
-        <BlockEntity.Content { ...partsProps }/>
-      </BlockEntity.Link>
-    </BlockEntity.Container>
-  );
+  return <BlockEntity.default { ...props } icon={{ name: 'txn_batches_slim' }}/>;
 };
 
 export default chakra(BlockEntityL2);
diff --git a/ui/shared/entities/block/ZkEvmBatchEntityL2.tsx b/ui/shared/entities/block/ZkEvmBatchEntityL2.tsx
deleted file mode 100644
index b9edddaeba..0000000000
--- a/ui/shared/entities/block/ZkEvmBatchEntityL2.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { chakra } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
-import React from 'react';
-
-import { route } from 'nextjs-routes';
-
-import config from 'configs/app';
-
-import * as BlockEntity from './BlockEntity';
-
-const feature = config.features.zkEvmRollup;
-
-const ZkEvmBatchEntityL2 = (props: BlockEntity.EntityProps) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
-
-  if (!feature.isEnabled) {
-    return null;
-  }
-
-  return (
-    <BlockEntity.Container className={ props.className }>
-      <BlockEntity.Icon { ...partsProps } name="txn_batches_slim"/>
-      <BlockEntity.Link
-        { ...linkProps }
-        href={ route({ pathname: '/zkevm-l2-txn-batch/[number]', query: { number: props.number.toString() } }) }
-      >
-        <BlockEntity.Content { ...partsProps }/>
-      </BlockEntity.Link>
-    </BlockEntity.Container>
-  );
-};
-
-export default chakra(ZkEvmBatchEntityL2);
diff --git a/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_dark-color-mode_external-link-dark-mode-1.png b/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_dark-color-mode_external-link-dark-mode-1.png
index af7a2cbe1a..dbec57aa34 100644
Binary files a/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_dark-color-mode_external-link-dark-mode-1.png and b/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_dark-color-mode_external-link-dark-mode-1.png differ
diff --git a/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_default_customization-1.png b/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_default_customization-1.png
index b2f174d9ca..8c9b3f3dc3 100644
Binary files a/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_default_customization-1.png and b/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_default_customization-1.png differ
diff --git a/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_default_external-link-dark-mode-1.png b/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_default_external-link-dark-mode-1.png
index 40b249a491..e9a6c879c7 100644
Binary files a/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_default_external-link-dark-mode-1.png and b/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_default_external-link-dark-mode-1.png differ
diff --git a/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_default_icon-sizes-lg-1.png b/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_default_icon-sizes-lg-1.png
index bcd6bca968..c66f6cb4be 100644
Binary files a/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_default_icon-sizes-lg-1.png and b/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_default_icon-sizes-lg-1.png differ
diff --git a/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_default_icon-sizes-md-1.png b/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_default_icon-sizes-md-1.png
index cd8fc4ea3d..52f46ddf14 100644
Binary files a/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_default_icon-sizes-md-1.png and b/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_default_icon-sizes-md-1.png differ
diff --git a/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_default_long-number-1.png b/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_default_long-number-1.png
index 267897a7ac..d9dff2a14c 100644
Binary files a/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_default_long-number-1.png and b/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_default_long-number-1.png differ
diff --git a/ui/shared/entities/ens/EnsEntity.pw.tsx b/ui/shared/entities/ens/EnsEntity.pw.tsx
index fc6d5c01c7..c027066eab 100644
--- a/ui/shared/entities/ens/EnsEntity.pw.tsx
+++ b/ui/shared/entities/ens/EnsEntity.pw.tsx
@@ -1,25 +1,23 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import * as domainMock from 'mocks/ens/domain';
+import { test, expect } from 'playwright/lib';
 
 import EnsEntity from './EnsEntity';
 
 const name = 'cat.eth';
-const iconSizes = [ 'md', 'lg' ];
+const iconSizes = [ 'md', 'lg' ] as const;
 
 test.use({ viewport: { width: 180, height: 30 } });
 
 test.describe('icon size', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <EnsEntity
-            name={ name }
-            iconSize={ size }
-          />
-        </TestApp>,
+    test(`${ size }`, async({ render }) => {
+      const component = await render(
+        <EnsEntity
+          domain={ name }
+          icon={{ size }}
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -27,26 +25,22 @@ test.describe('icon size', () => {
   });
 });
 
-test('loading', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <EnsEntity
-        name={ name }
-        isLoading
-      />
-    </TestApp>,
+test('loading', async({ render }) => {
+  const component = await render(
+    <EnsEntity
+      domain={ name }
+      isLoading
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('with long name', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <EnsEntity
-        name="kitty.kitty.kitty.cat.eth"
-      />
-    </TestApp>,
+test('with long name', async({ render }) => {
+  const component = await render(
+    <EnsEntity
+      domain="kitty.kitty.kitty.cat.eth"
+    />,
   );
 
   await component.getByText(name.slice(0, 4)).hover();
@@ -54,17 +48,35 @@ test('with long name', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('customization', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <EnsEntity
-        name={ name }
-        p={ 3 }
-        borderWidth="1px"
-        borderColor="blue.700"
-      />
-    </TestApp>,
+test('customization', async({ render }) => {
+  const component = await render(
+    <EnsEntity
+      domain={ name }
+      p={ 3 }
+      borderWidth="1px"
+      borderColor="blue.700"
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
+
+test.describe('tooltip test', () => {
+  test.use({ viewport: { width: 300, height: 400 } });
+
+  test('with protocol info', async({ render, page, mockAssetResponse }) => {
+    await mockAssetResponse(domainMock.ensDomainA.protocol?.icon_url as string, './playwright/mocks/image_s.jpg');
+
+    const component = await render(
+      <EnsEntity
+        domain={ name }
+        protocol={ domainMock.protocolA }
+      />,
+    );
+
+    await component.getByAltText(`${ domainMock.protocolA.title } protocol icon`).first().hover();
+
+    await expect(page.getByText(domainMock.protocolA.description)).toBeVisible();
+    await expect(page).toHaveScreenshot();
+  });
+});
diff --git a/ui/shared/entities/ens/EnsEntity.tsx b/ui/shared/entities/ens/EnsEntity.tsx
index c0623426c1..8371f295d5 100644
--- a/ui/shared/entities/ens/EnsEntity.tsx
+++ b/ui/shared/entities/ens/EnsEntity.tsx
@@ -1,16 +1,23 @@
-import { chakra } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
+import type { As } from '@chakra-ui/react';
+import { Box, chakra, Flex, Image, PopoverBody, PopoverContent, PopoverTrigger, Portal, Skeleton, Text } from '@chakra-ui/react';
 import React from 'react';
 
+import type * as bens from '@blockscout/bens-types';
+
 import { route } from 'nextjs-routes';
 
+import Popover from 'ui/shared/chakra/Popover';
 import * as EntityBase from 'ui/shared/entities/base/components';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkExternal from 'ui/shared/links/LinkExternal';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
-type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'name'>;
+import { distributeEntityProps, getIconProps } from '../base/utils';
+
+type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'domain'>;
 
 const Link = chakra((props: LinkProps) => {
-  const defaultHref = route({ pathname: '/name-domains/[name]', query: { name: props.name } });
+  const defaultHref = route({ pathname: '/name-domains/[name]', query: { name: props.domain } });
 
   return (
     <EntityBase.Link
@@ -22,37 +29,91 @@ const Link = chakra((props: LinkProps) => {
   );
 });
 
-type IconProps = Omit<EntityBase.IconBaseProps, 'name'> & {
-  iconName?: EntityBase.IconBaseProps['name'];
-};
+type IconProps = Pick<EntityProps, 'protocol'> & EntityBase.IconBaseProps;
 
 const Icon = (props: IconProps) => {
-  return (
-    <EntityBase.Icon
-      { ...props }
-      name={ props.iconName ?? 'ENS_slim' }
-    />
-  );
+  const icon = <EntityBase.Icon { ...props } name={ props.name ?? 'ENS_slim' }/>;
+
+  if (props.protocol) {
+    const styles = getIconProps(props.size);
+
+    if (props.isLoading) {
+      return <Skeleton boxSize={ styles.boxSize } borderRadius="sm" mr={ 2 }/>;
+    }
+
+    return (
+      <Popover trigger="hover" isLazy placement="bottom-start">
+        <PopoverTrigger>
+          <Box flexShrink={ 0 }>
+            <Image
+              src={ props.protocol.icon_url }
+              boxSize={ styles.boxSize }
+              borderRadius="sm"
+              mr={ 2 }
+              alt={ `${ props.protocol.title } protocol icon` }
+              fallback={ icon }
+              fallbackStrategy={ props.protocol.icon_url ? 'onError' : 'beforeLoadOrError' }
+            />
+          </Box>
+        </PopoverTrigger>
+        <Portal>
+          <PopoverContent maxW={{ base: '100vw', lg: '440px' }} minW="250px" w="fit-content">
+            <PopoverBody display="flex" flexDir="column" rowGap={ 3 }>
+              <Flex alignItems="center">
+                <Image
+                  src={ props.protocol.icon_url }
+                  boxSize={ 5 }
+                  borderRadius="sm"
+                  mr={ 2 }
+                  alt={ `${ props.protocol.title } protocol icon` }
+                  fallback={ icon }
+                  fallbackStrategy={ props.protocol.icon_url ? 'onError' : 'beforeLoadOrError' }
+                />
+                <div>
+                  <span>{ props.protocol.short_name }</span>
+                  <chakra.span color="text_secondary" whiteSpace="pre"> { props.protocol.tld_list.map((tld) => `.${ tld }`).join((' ')) }</chakra.span>
+                </div>
+              </Flex>
+              <Text fontSize="sm">{ props.protocol.description }</Text>
+              { props.protocol.docs_url && (
+                <LinkExternal
+                  href={ props.protocol.docs_url }
+                  display="inline-flex"
+                  alignItems="center"
+                  fontSize="sm"
+                >
+                  <IconSvg name="docs" boxSize={ 5 } color="text_secondary" mr={ 2 }/>
+                  <span>Documentation</span>
+                </LinkExternal>
+              ) }
+            </PopoverBody>
+          </PopoverContent>
+        </Portal>
+      </Popover>
+    );
+  }
+
+  return icon;
 };
 
-type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'name'>;
+type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'domain'>;
 
 const Content = chakra((props: ContentProps) => {
   return (
     <TruncatedValue
       isLoading={ props.isLoading }
-      value={ props.name }
+      value={ props.domain }
     />
   );
 });
 
-type CopyProps = Omit<EntityBase.CopyBaseProps, 'text'> & Pick<EntityProps, 'name'>;
+type CopyProps = Omit<EntityBase.CopyBaseProps, 'text'> & Pick<EntityProps, 'domain'>;
 
 const Copy = (props: CopyProps) => {
   return (
     <EntityBase.Copy
       { ...props }
-      text={ props.name }
+      text={ props.domain }
     />
   );
 };
@@ -60,25 +121,25 @@ const Copy = (props: CopyProps) => {
 const Container = EntityBase.Container;
 
 export interface EntityProps extends EntityBase.EntityBaseProps {
-  name: string;
+  domain: string;
+  protocol?: bens.ProtocolInfo | null;
 }
 
 const EnsEntity = (props: EntityProps) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
+  const partsProps = distributeEntityProps(props);
 
   return (
-    <Container className={ props.className }>
-      <Icon { ...partsProps }/>
-      <Link { ...linkProps }>
-        <Content { ...partsProps }/>
+    <Container { ...partsProps.container }>
+      <Icon { ...partsProps.icon }/>
+      <Link { ...partsProps.link }>
+        <Content { ...partsProps.content }/>
       </Link>
-      <Copy { ...partsProps }/>
+      <Copy { ...partsProps.copy }/>
     </Container>
   );
 };
 
-export default React.memo(chakra(EnsEntity));
+export default React.memo(chakra<As, EntityProps>(EnsEntity));
 
 export {
   Container,
diff --git a/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_tooltip-test-with-protocol-info-1.png b/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_tooltip-test-with-protocol-info-1.png
new file mode 100644
index 0000000000..5a2796d9ae
Binary files /dev/null and b/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_tooltip-test-with-protocol-info-1.png differ
diff --git a/ui/shared/entities/nft/NftEntity.pw.tsx b/ui/shared/entities/nft/NftEntity.pw.tsx
index c426b8b8fa..b1cae70fe4 100644
--- a/ui/shared/entities/nft/NftEntity.pw.tsx
+++ b/ui/shared/entities/nft/NftEntity.pw.tsx
@@ -1,26 +1,23 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import NftEntity from './NftEntity';
 
-const iconSizes = [ 'md', 'lg' ];
+const iconSizes = [ 'md', 'lg' ] as const;
 const hash = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859';
 
 test.use({ viewport: { width: 180, height: 30 } });
 
 test.describe('icon sizes', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <NftEntity
-            hash={ hash }
-            id={ 1042 }
-            iconSize={ size }
-          />
-        </TestApp>,
+    test(`${ size }`, async({ render }) => {
+      const component = await render(
+        <NftEntity
+          hash={ hash }
+          id="1042"
+          icon={{ size }}
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -28,44 +25,38 @@ test.describe('icon sizes', () => {
   });
 });
 
-test('loading', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <NftEntity
-        hash={ hash }
-        id={ 1042 }
-        isLoading
-      />
-    </TestApp>,
+test('loading', async({ render }) => {
+  const component = await render(
+    <NftEntity
+      hash={ hash }
+      id="1042"
+      isLoading
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('long id', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <NftEntity
-        hash={ hash }
-        id={ 1794350723452223 }
-      />
-    </TestApp>,
+test('long id', async({ render }) => {
+  const component = await render(
+    <NftEntity
+      hash={ hash }
+      id="1794350723452223"
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('customization', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <NftEntity
-        hash={ hash }
-        id={ 1042 }
-        p={ 3 }
-        borderWidth="1px"
-        borderColor="blue.700"
-      />
-    </TestApp>,
+test('customization', async({ render }) => {
+  const component = await render(
+    <NftEntity
+      hash={ hash }
+      id="1042"
+      p={ 3 }
+      borderWidth="1px"
+      borderColor="blue.700"
+    />,
   );
 
   await expect(component).toHaveScreenshot();
diff --git a/ui/shared/entities/nft/NftEntity.tsx b/ui/shared/entities/nft/NftEntity.tsx
index a2605e7b94..420353bfa2 100644
--- a/ui/shared/entities/nft/NftEntity.tsx
+++ b/ui/shared/entities/nft/NftEntity.tsx
@@ -1,5 +1,5 @@
+import type { As } from '@chakra-ui/react';
 import { chakra } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
@@ -7,13 +7,11 @@ import { route } from 'nextjs-routes';
 import * as EntityBase from 'ui/shared/entities/base/components';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
-const Container = EntityBase.Container;
+import { distributeEntityProps } from '../base/utils';
 
-type IconProps = Pick<EntityProps, 'isLoading' | 'noIcon' | 'iconSize'> & {
-  name?: EntityBase.IconBaseProps['name'];
-};
+const Container = EntityBase.Container;
 
-const Icon = (props: IconProps) => {
+const Icon = (props: EntityBase.IconBaseProps) => {
   if (props.noIcon) {
     return null;
   }
@@ -21,7 +19,7 @@ const Icon = (props: IconProps) => {
   return (
     <EntityBase.Icon
       { ...props }
-      iconSize={ props.iconSize ?? 'lg' }
+      size={ props.size ?? 'lg' }
       name={ props.name ?? 'nft_shield' }
     />
   );
@@ -59,20 +57,19 @@ export interface EntityProps extends EntityBase.EntityBaseProps {
 }
 
 const NftEntity = (props: EntityProps) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
+  const partsProps = distributeEntityProps(props);
 
   return (
-    <Container className={ props.className } w="100%">
-      <Icon { ...partsProps }/>
-      <Link { ...linkProps }>
-        <Content { ...partsProps }/>
+    <Container w="100%" { ...partsProps.container }>
+      <Icon { ...partsProps.icon }/>
+      <Link { ...partsProps.link }>
+        <Content { ...partsProps.content }/>
       </Link>
     </Container>
   );
 };
 
-export default React.memo(chakra(NftEntity));
+export default React.memo(chakra<As, EntityProps>(NftEntity));
 
 export {
   Container,
diff --git a/ui/shared/entities/nft/__screenshots__/NftEntity.pw.tsx_default_customization-1.png b/ui/shared/entities/nft/__screenshots__/NftEntity.pw.tsx_default_customization-1.png
index 0d1fe6f54a..70a29df486 100644
Binary files a/ui/shared/entities/nft/__screenshots__/NftEntity.pw.tsx_default_customization-1.png and b/ui/shared/entities/nft/__screenshots__/NftEntity.pw.tsx_default_customization-1.png differ
diff --git a/ui/shared/entities/nft/__screenshots__/NftEntity.pw.tsx_default_icon-sizes-lg-1.png b/ui/shared/entities/nft/__screenshots__/NftEntity.pw.tsx_default_icon-sizes-lg-1.png
index c6461d3e90..131aa10289 100644
Binary files a/ui/shared/entities/nft/__screenshots__/NftEntity.pw.tsx_default_icon-sizes-lg-1.png and b/ui/shared/entities/nft/__screenshots__/NftEntity.pw.tsx_default_icon-sizes-lg-1.png differ
diff --git a/ui/shared/entities/nft/__screenshots__/NftEntity.pw.tsx_default_icon-sizes-md-1.png b/ui/shared/entities/nft/__screenshots__/NftEntity.pw.tsx_default_icon-sizes-md-1.png
index 9e572ad277..317c0ade8a 100644
Binary files a/ui/shared/entities/nft/__screenshots__/NftEntity.pw.tsx_default_icon-sizes-md-1.png and b/ui/shared/entities/nft/__screenshots__/NftEntity.pw.tsx_default_icon-sizes-md-1.png differ
diff --git a/ui/shared/entities/nft/__screenshots__/NftEntity.pw.tsx_default_long-id-1.png b/ui/shared/entities/nft/__screenshots__/NftEntity.pw.tsx_default_long-id-1.png
index 90d0dd1922..39e8aaa57a 100644
Binary files a/ui/shared/entities/nft/__screenshots__/NftEntity.pw.tsx_default_long-id-1.png and b/ui/shared/entities/nft/__screenshots__/NftEntity.pw.tsx_default_long-id-1.png differ
diff --git a/ui/shared/entities/pool/PoolEntity.pw.tsx b/ui/shared/entities/pool/PoolEntity.pw.tsx
new file mode 100644
index 0000000000..4a4d5fad2c
--- /dev/null
+++ b/ui/shared/entities/pool/PoolEntity.pw.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import * as poolMock from 'mocks/pools/pool';
+import { test, expect } from 'playwright/lib';
+
+import PoolEntity from './PoolEntity';
+
+test.use({ viewport: { width: 300, height: 100 } });
+
+test('with icons +@dark-mode', async({ render, mockAssetResponse }) => {
+  await mockAssetResponse('https://localhost:3000/utia.jpg', './playwright/mocks/image_s.jpg');
+  await mockAssetResponse('https://localhost:3000/secondary_utia.jpg', './playwright/mocks/image_md.jpg');
+  const component = await render(
+    <PoolEntity
+      pool={ poolMock.base }
+    />,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('no icons +@dark-mode', async({ render }) => {
+  const component = await render(
+    <PoolEntity
+      pool={ poolMock.noIcons }
+    />,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/shared/entities/pool/PoolEntity.tsx b/ui/shared/entities/pool/PoolEntity.tsx
new file mode 100644
index 0000000000..eddbc71401
--- /dev/null
+++ b/ui/shared/entities/pool/PoolEntity.tsx
@@ -0,0 +1,128 @@
+import type { As } from '@chakra-ui/react';
+import { Flex, Skeleton, chakra, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import type { Pool } from 'types/api/pools';
+
+import { route } from 'nextjs-routes';
+
+import { getPoolTitle } from 'lib/pools/getPoolTitle';
+import * as EntityBase from 'ui/shared/entities/base/components';
+import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
+
+import { distributeEntityProps } from '../base/utils';
+import * as TokenEntity from '../token/TokenEntity';
+
+type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'pool'>;
+
+const Link = chakra((props: LinkProps) => {
+  const defaultHref = route({ pathname: '/pools/[hash]', query: { hash: props.pool.contract_address } });
+
+  return (
+    <EntityBase.Link
+      { ...props }
+      href={ props.href ?? defaultHref }
+    >
+      { props.children }
+    </EntityBase.Link>
+  );
+});
+
+type IconProps = Pick<EntityProps, 'pool' | 'className'> & EntityBase.IconBaseProps;
+
+const Icon = (props: IconProps) => {
+  const bgColor = useColorModeValue('white', 'black');
+  const borderColor = useColorModeValue('whiteAlpha.800', 'blackAlpha.800');
+  return (
+    <Flex>
+      <Flex
+        bgColor={ bgColor }
+        borderRadius="full"
+        border="1px solid"
+        borderColor={ borderColor }
+      >
+        <TokenEntity.Icon
+          marginRight={ 0 }
+          size={ props.size }
+          token={{
+            icon_url: props.pool.base_token_icon_url,
+            symbol: props.pool.base_token_symbol,
+            address: props.pool.base_token_address,
+            name: '',
+            type: 'ERC-20',
+          }}
+          isLoading={ props.isLoading }
+        />
+      </Flex>
+      <Flex
+        transform="translateX(-8px)"
+        bgColor={ bgColor }
+        borderRadius="full"
+        border="1px solid"
+        borderColor={ borderColor }
+      >
+        <TokenEntity.Icon
+          marginRight={ 0 }
+          size={ props.size }
+          token={{
+            icon_url: props.pool.quote_token_icon_url,
+            symbol: props.pool.quote_token_symbol,
+            address: props.pool.quote_token_address,
+            name: '',
+            type: 'ERC-20',
+          }}
+          isLoading={ props.isLoading }
+        />
+      </Flex>
+    </Flex>
+  );
+};
+
+type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'pool'>;
+
+const Content = chakra((props: ContentProps) => {
+  const nameString = getPoolTitle(props.pool);
+
+  return (
+    <TruncatedTextTooltip label={ nameString }>
+      <Skeleton
+        isLoaded={ !props.isLoading }
+        display="inline-block"
+        whiteSpace="nowrap"
+        overflow="hidden"
+        textOverflow="ellipsis"
+        height="fit-content"
+      >
+        { nameString }
+      </Skeleton>
+    </TruncatedTextTooltip>
+  );
+});
+
+const Container = EntityBase.Container;
+
+export interface EntityProps extends EntityBase.EntityBaseProps {
+  pool: Pool;
+}
+
+const PoolEntity = (props: EntityProps) => {
+  const partsProps = distributeEntityProps(props);
+
+  return (
+    <Container w="100%" { ...partsProps.container }>
+      <Icon { ...partsProps.icon }/>
+      <Link { ...partsProps.link }>
+        <Content { ...partsProps.content }/>
+      </Link>
+    </Container>
+  );
+};
+
+export default React.memo(chakra<As, EntityProps>(PoolEntity));
+
+export {
+  Container,
+  Link,
+  Icon,
+  Content,
+};
diff --git a/ui/shared/entities/pool/__screenshots__/PoolEntity.pw.tsx_dark-color-mode_no-icons-dark-mode-1.png b/ui/shared/entities/pool/__screenshots__/PoolEntity.pw.tsx_dark-color-mode_no-icons-dark-mode-1.png
new file mode 100644
index 0000000000..5dae996eff
Binary files /dev/null and b/ui/shared/entities/pool/__screenshots__/PoolEntity.pw.tsx_dark-color-mode_no-icons-dark-mode-1.png differ
diff --git a/ui/shared/entities/pool/__screenshots__/PoolEntity.pw.tsx_dark-color-mode_with-icons-dark-mode-1.png b/ui/shared/entities/pool/__screenshots__/PoolEntity.pw.tsx_dark-color-mode_with-icons-dark-mode-1.png
new file mode 100644
index 0000000000..e7390bbe25
Binary files /dev/null and b/ui/shared/entities/pool/__screenshots__/PoolEntity.pw.tsx_dark-color-mode_with-icons-dark-mode-1.png differ
diff --git a/ui/shared/entities/pool/__screenshots__/PoolEntity.pw.tsx_default_no-icons-dark-mode-1.png b/ui/shared/entities/pool/__screenshots__/PoolEntity.pw.tsx_default_no-icons-dark-mode-1.png
new file mode 100644
index 0000000000..50c2f1639d
Binary files /dev/null and b/ui/shared/entities/pool/__screenshots__/PoolEntity.pw.tsx_default_no-icons-dark-mode-1.png differ
diff --git a/ui/shared/entities/pool/__screenshots__/PoolEntity.pw.tsx_default_with-icons-dark-mode-1.png b/ui/shared/entities/pool/__screenshots__/PoolEntity.pw.tsx_default_with-icons-dark-mode-1.png
new file mode 100644
index 0000000000..836ed25bfd
Binary files /dev/null and b/ui/shared/entities/pool/__screenshots__/PoolEntity.pw.tsx_default_with-icons-dark-mode-1.png differ
diff --git a/ui/shared/entities/token/TokenEntity.pw.tsx b/ui/shared/entities/token/TokenEntity.pw.tsx
index 670148d9d2..f9b2379c94 100644
--- a/ui/shared/entities/token/TokenEntity.pw.tsx
+++ b/ui/shared/entities/token/TokenEntity.pw.tsx
@@ -1,26 +1,23 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as tokenMock from 'mocks/tokens/tokenInfo';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import TokenEntity from './TokenEntity';
 
-const iconSizes = [ 'md', 'lg' ];
+const iconSizes = [ 'md', 'lg' ] as const;
 
 test.use({ viewport: { width: 300, height: 100 } });
 
 test.describe('icon size', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <TokenEntity
-            token={ tokenMock.tokenInfo }
-            iconSize={ size }
-          />
-        </TestApp>,
+    test(`${ size }`, async({ render }) => {
+      const component = await render(
+        <TokenEntity
+          token={ tokenMock.tokenInfo }
+          icon={{ size }}
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -28,7 +25,7 @@ test.describe('icon size', () => {
   });
 });
 
-test('with logo, long name and symbol', async({ page, mount }) => {
+test('with logo, long name and symbol', async({ page, render }) => {
   const LOGO_URL = 'https://example.com/logo.png';
   await page.route(LOGO_URL, (route) => {
     return route.fulfill({
@@ -37,17 +34,16 @@ test('with logo, long name and symbol', async({ page, mount }) => {
     });
   });
 
-  await mount(
-    <TestApp>
-      <TokenEntity
-        token={{
-          name: 'This token is the best token ever',
-          symbol: 'DUCK DUCK DUCK',
-          address: tokenMock.tokenInfo.address,
-          icon_url: LOGO_URL,
-        }}
-      />
-    </TestApp>,
+  await render(
+    <TokenEntity
+      token={{
+        type: 'ERC-20',
+        name: 'This token is the best token ever',
+        symbol: 'DUCK DUCK DUCK',
+        address: tokenMock.tokenInfo.address,
+        icon_url: LOGO_URL,
+      }}
+    />,
   );
 
   await page.getByText(/this/i).hover();
@@ -57,35 +53,31 @@ test('with logo, long name and symbol', async({ page, mount }) => {
   await expect(page).toHaveScreenshot();
 });
 
-test('loading', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TokenEntity
-        token={ tokenMock.tokenInfo }
-        isLoading
-      />
-    </TestApp>,
+test('loading', async({ render }) => {
+  const component = await render(
+    <TokenEntity
+      token={ tokenMock.tokenInfo }
+      isLoading
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('customization', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box
+test('customization', async({ render }) => {
+  const component = await render(
+    <Box
+      borderWidth="1px"
+      borderColor="orange.500"
+    >
+      <TokenEntity
+        token={ tokenMock.tokenInfo }
+        p={ 2 }
+        maxW="200px"
         borderWidth="1px"
-        borderColor="orange.500"
-      >
-        <TokenEntity
-          token={ tokenMock.tokenInfo }
-          p={ 2 }
-          maxW="200px"
-          borderWidth="1px"
-          borderColor="blue.700"
-        />
-      </Box>
-    </TestApp>,
+        borderColor="blue.700"
+      />
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
diff --git a/ui/shared/entities/token/TokenEntity.tsx b/ui/shared/entities/token/TokenEntity.tsx
index 99f6abb514..63fce45d65 100644
--- a/ui/shared/entities/token/TokenEntity.tsx
+++ b/ui/shared/entities/token/TokenEntity.tsx
@@ -1,6 +1,5 @@
-import type { ChakraProps } from '@chakra-ui/react';
+import type { As } from '@chakra-ui/react';
 import { Image, Skeleton, chakra } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
 import React from 'react';
 
 import type { TokenInfo } from 'types/api/token';
@@ -11,7 +10,7 @@ import * as EntityBase from 'ui/shared/entities/base/components';
 import TokenLogoPlaceholder from 'ui/shared/TokenLogoPlaceholder';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
-import { getIconProps } from '../base/utils';
+import { distributeEntityProps, getIconProps } from '../base/utils';
 
 type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'token'>;
 
@@ -28,10 +27,7 @@ const Link = chakra((props: LinkProps) => {
   );
 });
 
-type IconProps = Pick<EntityProps, 'token' | 'isLoading' | 'iconSize' | 'noIcon' | 'className'> & {
-  marginRight?: ChakraProps['marginRight'];
-  boxSize?: ChakraProps['boxSize'];
-};
+type IconProps = Pick<EntityProps, 'token' | 'className'> & EntityBase.IconBaseProps;
 
 const Icon = (props: IconProps) => {
   if (props.noIcon) {
@@ -40,8 +36,8 @@ const Icon = (props: IconProps) => {
 
   const styles = {
     marginRight: props.marginRight ?? 2,
-    boxSize: props.boxSize ?? getIconProps(props.iconSize).boxSize,
-    borderRadius: 'base',
+    boxSize: props.boxSize ?? getIconProps(props.size).boxSize,
+    borderRadius: props.token.type === 'ERC-20' ? 'full' : 'base',
     flexShrink: 0,
   };
 
@@ -52,11 +48,11 @@ const Icon = (props: IconProps) => {
   return (
     <Image
       { ...styles }
-      borderRadius={ props.token.type === 'ERC-20' ? 'full' : 'base' }
       className={ props.className }
       src={ props.token.icon_url ?? undefined }
       alt={ `${ props.token.name || 'token' } logo` }
       fallback={ <TokenLogoPlaceholder { ...styles }/> }
+      fallbackStrategy={ props.token.icon_url ? 'onError' : 'beforeLoadOrError' }
     />
   );
 };
@@ -66,7 +62,7 @@ type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps
 const Content = chakra((props: ContentProps) => {
   const nameString = [
     !props.onlySymbol && (props.token.name ?? 'Unnamed token'),
-    props.onlySymbol && (props.token.symbol ?? ''),
+    props.onlySymbol && (props.token.symbol ?? props.token.name ?? 'Unnamed token'),
     props.token.symbol && props.jointSymbol && !props.onlySymbol && `(${ props.token.symbol })`,
   ].filter(Boolean).join(' ');
 
@@ -142,22 +138,21 @@ export interface EntityProps extends EntityBase.EntityBaseProps {
 }
 
 const TokenEntity = (props: EntityProps) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
+  const partsProps = distributeEntityProps(props);
 
   return (
-    <Container className={ props.className } w="100%">
-      <Icon { ...partsProps }/>
-      <Link { ...linkProps }>
-        <Content { ...partsProps }/>
+    <Container w="100%" { ...partsProps.container }>
+      <Icon { ...partsProps.icon }/>
+      <Link { ...partsProps.link }>
+        <Content { ...partsProps.content }/>
       </Link>
-      <Symbol { ...partsProps }/>
-      <Copy { ...partsProps }/>
+      <Symbol { ...partsProps.symbol }/>
+      <Copy { ...partsProps.copy }/>
     </Container>
   );
 };
 
-export default React.memo(chakra(TokenEntity));
+export default React.memo(chakra<As, EntityProps>(TokenEntity));
 
 export {
   Container,
diff --git a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_customization-1.png b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_customization-1.png
index 2dafa1df25..e66f919f66 100644
Binary files a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_customization-1.png and b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_customization-1.png differ
diff --git a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-lg-1.png b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-lg-1.png
index 6fd082b290..7733fcfd39 100644
Binary files a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-lg-1.png and b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-lg-1.png differ
diff --git a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-md-1.png b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-md-1.png
index e6b102f066..526b10cca4 100644
Binary files a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-md-1.png and b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-md-1.png differ
diff --git a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-1.png b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-1.png
index 038508436e..7df69728ef 100644
Binary files a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-1.png and b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-1.png differ
diff --git a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-2.png b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-2.png
index d311239584..67d346fe28 100644
Binary files a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-2.png and b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-2.png differ
diff --git a/ui/shared/entities/tx/TxEntity.pw.tsx b/ui/shared/entities/tx/TxEntity.pw.tsx
index bd971ca18a..2caa02ea68 100644
--- a/ui/shared/entities/tx/TxEntity.pw.tsx
+++ b/ui/shared/entities/tx/TxEntity.pw.tsx
@@ -1,25 +1,22 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import TxEntity from './TxEntity';
 
 const hash = '0x376db52955d5bce114d0ccea2dcf22289b4eae1b86bcae5a59bb5fdbfef48899';
-const iconSizes = [ 'md', 'lg' ];
+const iconSizes = [ 'md', 'lg' ] as const;
 
 test.use({ viewport: { width: 180, height: 30 } });
 
 test.describe('icon size', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <TxEntity
-            hash={ hash }
-            iconSize={ size }
-          />
-        </TestApp>,
+    test(`${ size }`, async({ render }) => {
+      const component = await render(
+        <TxEntity
+          hash={ hash }
+          icon={{ size }}
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -27,40 +24,34 @@ test.describe('icon size', () => {
   });
 });
 
-test('loading', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TxEntity
-        hash={ hash }
-        isLoading
-      />
-    </TestApp>,
+test('loading', async({ render }) => {
+  const component = await render(
+    <TxEntity
+      hash={ hash }
+      isLoading
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('external link', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TxEntity
-        hash={ hash }
-        isExternal
-      />
-    </TestApp>,
+test('external link', async({ render }) => {
+  const component = await render(
+    <TxEntity
+      hash={ hash }
+      isExternal
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('with copy +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TxEntity
-        hash={ hash }
-        noCopy={ false }
-      />
-    </TestApp>,
+test('with copy +@dark-mode', async({ render }) => {
+  const component = await render(
+    <TxEntity
+      hash={ hash }
+      noCopy={ false }
+    />,
   );
 
   await component.getByText(hash.slice(0, 4)).hover();
@@ -68,17 +59,15 @@ test('with copy +@dark-mode', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('customization', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TxEntity
-        hash={ hash }
-        truncation="constant"
-        p={ 3 }
-        borderWidth="1px"
-        borderColor="blue.700"
-      />
-    </TestApp>,
+test('customization', async({ render }) => {
+  const component = await render(
+    <TxEntity
+      hash={ hash }
+      truncation="constant"
+      p={ 3 }
+      borderWidth="1px"
+      borderColor="blue.700"
+    />,
   );
 
   await expect(component).toHaveScreenshot();
diff --git a/ui/shared/entities/tx/TxEntity.tsx b/ui/shared/entities/tx/TxEntity.tsx
index 796d305ded..8cb00de261 100644
--- a/ui/shared/entities/tx/TxEntity.tsx
+++ b/ui/shared/entities/tx/TxEntity.tsx
@@ -1,11 +1,13 @@
+import type { As } from '@chakra-ui/react';
 import { chakra } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
 import * as EntityBase from 'ui/shared/entities/base/components';
 
+import { distributeEntityProps } from '../base/utils';
+
 type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'hash'>;
 
 const Link = chakra((props: LinkProps) => {
@@ -21,11 +23,7 @@ const Link = chakra((props: LinkProps) => {
   );
 });
 
-type IconProps = Omit<EntityBase.IconBaseProps, 'name'> & {
-  name?: EntityBase.IconBaseProps['name'];
-};
-
-const Icon = (props: IconProps) => {
+const Icon = (props: EntityBase.IconBaseProps) => {
   return (
     <EntityBase.Icon
       { ...props }
@@ -66,21 +64,20 @@ export interface EntityProps extends EntityBase.EntityBaseProps {
 }
 
 const TxEntity = (props: EntityProps) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
+  const partsProps = distributeEntityProps(props);
 
   return (
-    <Container className={ props.className }>
-      <Icon { ...partsProps }/>
-      <Link { ...linkProps }>
-        <Content { ...partsProps }/>
+    <Container { ...partsProps.container }>
+      <Icon { ...partsProps.icon }/>
+      <Link { ...partsProps.link }>
+        <Content { ...partsProps.content }/>
       </Link>
-      <Copy { ...partsProps }/>
+      <Copy { ...partsProps.copy }/>
     </Container>
   );
 };
 
-export default React.memo(chakra(TxEntity));
+export default React.memo(chakra<As, EntityProps>(TxEntity));
 
 export {
   Container,
diff --git a/ui/shared/entities/tx/TxEntityL1.tsx b/ui/shared/entities/tx/TxEntityL1.tsx
index 3b72f1894c..cf8baf4dfb 100644
--- a/ui/shared/entities/tx/TxEntityL1.tsx
+++ b/ui/shared/entities/tx/TxEntityL1.tsx
@@ -1,5 +1,4 @@
 import { chakra } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
@@ -8,29 +7,19 @@ import config from 'configs/app';
 
 import * as TxEntity from './TxEntity';
 
-const feature = config.features.optimisticRollup.isEnabled ? config.features.optimisticRollup : config.features.zkEvmRollup;
+const rollupFeature = config.features.rollup;
 
 const TxEntityL1 = (props: TxEntity.EntityProps) => {
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
-  const linkProps = _omit(props, [ 'className' ]);
-
-  if (!feature.isEnabled) {
+  if (!rollupFeature.isEnabled) {
     return null;
   }
 
-  return (
-    <TxEntity.Container className={ props.className }>
-      <TxEntity.Icon { ...partsProps }/>
-      <TxEntity.Link
-        { ...linkProps }
-        isExternal
-        href={ feature.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: props.hash } }) }
-      >
-        <TxEntity.Content { ...partsProps }/>
-      </TxEntity.Link>
-      <TxEntity.Copy { ...partsProps }/>
-    </TxEntity.Container>
-  );
+  const defaultHref = rollupFeature.L1BaseUrl + route({
+    pathname: '/tx/[hash]',
+    query: { hash: props.hash },
+  });
+
+  return <TxEntity.default { ...props } href={ props.href ?? defaultHref } isExternal/>;
 };
 
 export default chakra(TxEntityL1);
diff --git a/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_dark-color-mode_with-copy-dark-mode-1.png b/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_dark-color-mode_with-copy-dark-mode-1.png
index 8f63e93db1..eec4c4da45 100644
Binary files a/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_dark-color-mode_with-copy-dark-mode-1.png and b/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_dark-color-mode_with-copy-dark-mode-1.png differ
diff --git a/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_customization-1.png b/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_customization-1.png
index b21fa1686e..c7d5222420 100644
Binary files a/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_customization-1.png and b/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_customization-1.png differ
diff --git a/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_external-link-1.png b/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_external-link-1.png
index be6e12356d..ecf526ac25 100644
Binary files a/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_external-link-1.png and b/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_external-link-1.png differ
diff --git a/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_icon-size-lg-1.png b/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_icon-size-lg-1.png
index 98fa485f57..aea4b95b5c 100644
Binary files a/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_icon-size-lg-1.png and b/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_icon-size-lg-1.png differ
diff --git a/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_icon-size-md-1.png b/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_icon-size-md-1.png
index e3319f73f2..07d89219b3 100644
Binary files a/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_icon-size-md-1.png and b/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_icon-size-md-1.png differ
diff --git a/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_with-copy-dark-mode-1.png b/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_with-copy-dark-mode-1.png
index dd027e9932..9e6c4810f8 100644
Binary files a/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_with-copy-dark-mode-1.png and b/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_with-copy-dark-mode-1.png differ
diff --git a/ui/shared/entities/userOp/UserOpEntity.pw.tsx b/ui/shared/entities/userOp/UserOpEntity.pw.tsx
index c4a8faa3f0..7b7c408731 100644
--- a/ui/shared/entities/userOp/UserOpEntity.pw.tsx
+++ b/ui/shared/entities/userOp/UserOpEntity.pw.tsx
@@ -1,25 +1,22 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import UserOpEntity from './UserOpEntity';
 
 const hash = '0x376db52955d5bce114d0ccea2dcf22289b4eae1b86bcae5a59bb5fdbfef48899';
-const iconSizes = [ 'md', 'lg' ];
+const iconSizes = [ 'md', 'lg' ] as const;
 
 test.use({ viewport: { width: 180, height: 30 } });
 
 test.describe('icon size', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <UserOpEntity
-            hash={ hash }
-            iconSize={ size }
-          />
-        </TestApp>,
+    test(`${ size }`, async({ render }) => {
+      const component = await render(
+        <UserOpEntity
+          hash={ hash }
+          icon={{ size }}
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -27,27 +24,23 @@ test.describe('icon size', () => {
   });
 });
 
-test('loading', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <UserOpEntity
-        hash={ hash }
-        isLoading
-      />
-    </TestApp>,
+test('loading', async({ render }) => {
+  const component = await render(
+    <UserOpEntity
+      hash={ hash }
+      isLoading
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('with copy +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <UserOpEntity
-        hash={ hash }
-        noCopy={ false }
-      />
-    </TestApp>,
+test('with copy +@dark-mode', async({ render }) => {
+  const component = await render(
+    <UserOpEntity
+      hash={ hash }
+      noCopy={ false }
+    />,
   );
 
   await component.getByText(hash.slice(0, 4)).hover();
@@ -55,17 +48,15 @@ test('with copy +@dark-mode', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('customization', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <UserOpEntity
-        hash={ hash }
-        truncation="constant"
-        p={ 3 }
-        borderWidth="1px"
-        borderColor="blue.700"
-      />
-    </TestApp>,
+test('customization', async({ render }) => {
+  const component = await render(
+    <UserOpEntity
+      hash={ hash }
+      truncation="constant"
+      p={ 3 }
+      borderWidth="1px"
+      borderColor="blue.700"
+    />,
   );
 
   await expect(component).toHaveScreenshot();
diff --git a/ui/shared/entities/userOp/UserOpEntity.tsx b/ui/shared/entities/userOp/UserOpEntity.tsx
index c4a9022d31..718ce7988e 100644
--- a/ui/shared/entities/userOp/UserOpEntity.tsx
+++ b/ui/shared/entities/userOp/UserOpEntity.tsx
@@ -1,11 +1,13 @@
+import type { As } from '@chakra-ui/react';
 import { chakra } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
 import * as EntityBase from 'ui/shared/entities/base/components';
 
+import { distributeEntityProps } from '../base/utils';
+
 type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'hash'>;
 
 const Link = chakra((props: LinkProps) => {
@@ -21,11 +23,7 @@ const Link = chakra((props: LinkProps) => {
   );
 });
 
-type IconProps = Omit<EntityBase.IconBaseProps, 'name'> & {
-  name?: EntityBase.IconBaseProps['name'];
-};
-
-const Icon = (props: IconProps) => {
+const Icon = (props: EntityBase.IconBaseProps) => {
   return (
     <EntityBase.Icon
       { ...props }
@@ -65,21 +63,20 @@ export interface EntityProps extends EntityBase.EntityBaseProps {
 }
 
 const UserOpEntity = (props: EntityProps) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
+  const partsProps = distributeEntityProps(props);
 
   return (
-    <Container className={ props.className }>
-      <Icon { ...partsProps }/>
-      <Link { ...linkProps }>
-        <Content { ...partsProps }/>
+    <Container { ...partsProps.container }>
+      <Icon { ...partsProps.icon }/>
+      <Link { ...partsProps.link }>
+        <Content { ...partsProps.content }/>
       </Link>
-      <Copy { ...partsProps }/>
+      <Copy { ...partsProps.copy }/>
     </Container>
   );
 };
 
-export default React.memo(chakra(UserOpEntity));
+export default React.memo(chakra<As, EntityProps>(UserOpEntity));
 
 export {
   Container,
diff --git a/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_dark-color-mode_with-copy-dark-mode-1.png b/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_dark-color-mode_with-copy-dark-mode-1.png
index 062b6aff57..43a2b9b362 100644
Binary files a/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_dark-color-mode_with-copy-dark-mode-1.png and b/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_dark-color-mode_with-copy-dark-mode-1.png differ
diff --git a/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_customization-1.png b/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_customization-1.png
index fec63db3dc..fc5367a545 100644
Binary files a/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_customization-1.png and b/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_customization-1.png differ
diff --git a/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_icon-size-lg-1.png b/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_icon-size-lg-1.png
index dfe8149bbf..f6d9ac0e9d 100644
Binary files a/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_icon-size-lg-1.png and b/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_icon-size-lg-1.png differ
diff --git a/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_icon-size-md-1.png b/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_icon-size-md-1.png
index 4f855b2ff2..1f8ef539fb 100644
Binary files a/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_icon-size-md-1.png and b/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_icon-size-md-1.png differ
diff --git a/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_with-copy-dark-mode-1.png b/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_with-copy-dark-mode-1.png
index ae8e9976e1..6369c8610e 100644
Binary files a/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_with-copy-dark-mode-1.png and b/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_with-copy-dark-mode-1.png differ
diff --git a/ui/shared/filters/FilterButton.tsx b/ui/shared/filters/FilterButton.tsx
index a61246587c..67bad9989d 100644
--- a/ui/shared/filters/FilterButton.tsx
+++ b/ui/shared/filters/FilterButton.tsx
@@ -22,19 +22,38 @@ const FilterButton = ({ isActive, isLoading, appliedFiltersNum, onClick, as }: P
     return <Skeleton w={{ base: 9, lg: '78px' }} h={ 8 } borderRadius="base" flexShrink={ 0 }/>;
   }
 
+  const num = (
+    <Circle
+      className="AppliedFiltersNum"
+      bg={ isActive ? 'link_hovered' : badgeBgColor }
+      size={ 5 }
+      color={ badgeColor }
+    >
+      { appliedFiltersNum }
+    </Circle>
+  );
+
   return (
     <Button
       ref={ ref }
-      rightIcon={ appliedFiltersNum ? <Circle bg={ badgeBgColor } size={ 5 } color={ badgeColor }>{ appliedFiltersNum }</Circle> : undefined }
+      rightIcon={ appliedFiltersNum ? num : undefined }
       size="sm"
       fontWeight="500"
       variant="outline"
-      colorScheme="gray-dark"
+      colorScheme="gray"
       onClick={ onClick }
       isActive={ isActive }
+      data-selected={ Boolean(appliedFiltersNum) }
       px={ 1.5 }
       flexShrink={ 0 }
       as={ as }
+      pointerEvents="all"
+      _hover={ isActive ? {
+        color: 'link_hovered',
+        '.AppliedFiltersNum': {
+          bg: 'link_hovered',
+        },
+      } : undefined }
     >
       { FilterIcon }
       <Box display={{ base: 'none', lg: 'block' }}>Filter</Box>
diff --git a/ui/shared/filters/FilterInput.tsx b/ui/shared/filters/FilterInput.tsx
index 5c16f65ce6..00fcb05b52 100644
--- a/ui/shared/filters/FilterInput.tsx
+++ b/ui/shared/filters/FilterInput.tsx
@@ -6,15 +6,17 @@ import ClearButton from 'ui/shared/ClearButton';
 import IconSvg from 'ui/shared/IconSvg';
 
 type Props = {
-  onChange: (searchTerm: string) => void;
+  onChange?: (searchTerm: string) => void;
   className?: string;
   size?: 'xs' | 'sm' | 'md' | 'lg';
   placeholder: string;
   initialValue?: string;
   isLoading?: boolean;
-}
+  type?: React.HTMLInputTypeAttribute;
+  name?: string;
+};
 
-const FilterInput = ({ onChange, className, size = 'sm', placeholder, initialValue, isLoading }: Props) => {
+const FilterInput = ({ onChange, className, size = 'sm', placeholder, initialValue, isLoading, type, name }: Props) => {
   const [ filterQuery, setFilterQuery ] = useState(initialValue || '');
   const inputRef = React.useRef<HTMLInputElement>(null);
   const iconColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
@@ -23,12 +25,12 @@ const FilterInput = ({ onChange, className, size = 'sm', placeholder, initialVal
     const { value } = event.target;
 
     setFilterQuery(value);
-    onChange(value);
+    onChange?.(value);
   }, [ onChange ]);
 
   const handleFilterQueryClear = useCallback(() => {
     setFilterQuery('');
-    onChange('');
+    onChange?.('');
     inputRef?.current?.focus();
   }, [ onChange ]);
 
@@ -57,6 +59,8 @@ const FilterInput = ({ onChange, className, size = 'sm', placeholder, initialVal
           borderWidth="2px"
           textOverflow="ellipsis"
           whiteSpace="nowrap"
+          type={ type }
+          name={ name }
         />
 
         { filterQuery ? (
diff --git a/ui/shared/filters/PopoverFilter.tsx b/ui/shared/filters/PopoverFilter.tsx
index bc09a7ad72..f8fb20d9f0 100644
--- a/ui/shared/filters/PopoverFilter.tsx
+++ b/ui/shared/filters/PopoverFilter.tsx
@@ -1,6 +1,5 @@
 import type { PopoverContentProps } from '@chakra-ui/react';
 import {
-  Popover,
   PopoverTrigger,
   PopoverContent,
   PopoverBody,
@@ -8,24 +7,24 @@ import {
 } from '@chakra-ui/react';
 import React from 'react';
 
+import Popover from 'ui/shared/chakra/Popover';
 import FilterButton from 'ui/shared/filters/FilterButton';
 
 interface Props {
   appliedFiltersNum?: number;
-  isActive?: boolean;
   children: React.ReactNode;
   contentProps?: PopoverContentProps;
   isLoading?: boolean;
 }
 
-const PopoverFilter = ({ appliedFiltersNum, children, contentProps, isActive, isLoading }: Props) => {
+const PopoverFilter = ({ appliedFiltersNum, children, contentProps, isLoading }: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
 
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
       <PopoverTrigger>
         <FilterButton
-          isActive={ isOpen || isActive || Number(appliedFiltersNum) > 0 }
+          isActive={ isOpen }
           onClick={ onToggle }
           appliedFiltersNum={ appliedFiltersNum }
           isLoading={ isLoading }
diff --git a/ui/shared/filters/PopoverFilterRadio.tsx b/ui/shared/filters/PopoverFilterRadio.tsx
new file mode 100644
index 0000000000..c1e818a17c
--- /dev/null
+++ b/ui/shared/filters/PopoverFilterRadio.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+import type { SelectOption } from 'ui/shared/select/types';
+
+import FilterButton from 'ui/shared/filters/FilterButton';
+import Select from 'ui/shared/select/Select';
+interface Props {
+  name: string;
+  options: Array<SelectOption>;
+  hasActiveFilter: boolean;
+  defaultValue?: string;
+  isLoading?: boolean;
+  onChange: (nextValue: string) => void;
+}
+
+const PopoverFilterRadio = ({ name, hasActiveFilter, options, isLoading, onChange, defaultValue }: Props) => {
+  return (
+    <Select
+      options={ options }
+      name={ name }
+      defaultValue={ defaultValue }
+      onChange={ onChange }
+    >
+      { ({ isOpen, onToggle }) => (
+        <FilterButton
+          isActive={ isOpen }
+          onClick={ onToggle }
+          appliedFiltersNum={ hasActiveFilter ? 1 : 0 }
+          isLoading={ isLoading }
+        />
+      ) }
+    </Select>
+  );
+};
+
+export default React.memo(PopoverFilterRadio);
diff --git a/ui/shared/filters/TableColumnFilter.tsx b/ui/shared/filters/TableColumnFilter.tsx
new file mode 100644
index 0000000000..92ae533621
--- /dev/null
+++ b/ui/shared/filters/TableColumnFilter.tsx
@@ -0,0 +1,55 @@
+import {
+  chakra,
+  Flex,
+  Text,
+  Link,
+  Button,
+} from '@chakra-ui/react';
+import React from 'react';
+
+type Props = {
+  title: string;
+  isFilled?: boolean;
+  isTouched?: boolean;
+  hasReset?: boolean;
+  onFilter: () => void;
+  onReset?: () => void;
+  onClose?: () => void;
+  children: React.ReactNode;
+};
+
+const TableColumnFilter = ({ title, isFilled, isTouched, hasReset, onFilter, onReset, onClose, children }: Props) => {
+  const onFilterClick = React.useCallback(() => {
+    onClose && onClose();
+    onFilter();
+  }, [ onClose, onFilter ]);
+  return (
+    <>
+      <Flex alignItems="center" justifyContent="space-between">
+        <Text color="text_secondary" fontWeight="600">{ title }</Text>
+        { hasReset && (
+          <Link
+            onClick={ onReset }
+            cursor={ isFilled ? 'pointer' : 'unset' }
+            opacity={ isFilled ? 1 : 0.2 }
+            _hover={{
+              color: isFilled ? 'link_hovered' : 'none',
+            }}
+          >
+            Reset
+          </Link>
+        ) }
+      </Flex>
+      { children }
+      <Button
+        isDisabled={ !isTouched }
+        onClick={ onFilterClick }
+        w="fit-content"
+      >
+        Filter
+      </Button>
+    </>
+  );
+};
+
+export default chakra(TableColumnFilter);
diff --git a/ui/shared/filters/TableColumnFilterWrapper.tsx b/ui/shared/filters/TableColumnFilterWrapper.tsx
new file mode 100644
index 0000000000..0d070665ab
--- /dev/null
+++ b/ui/shared/filters/TableColumnFilterWrapper.tsx
@@ -0,0 +1,75 @@
+import {
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  useDisclosure,
+  chakra,
+  Portal,
+  Button,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import Popover from 'ui/shared/chakra/Popover';
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props {
+  columnName: string;
+  isActive?: boolean;
+  isLoading?: boolean;
+  className?: string;
+  children: React.ReactNode;
+  value?: string;
+}
+
+const TableColumnFilterWrapper = ({ columnName, isActive, className, children, isLoading, value }: Props) => {
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  const content = React.Children.only(children) as React.ReactElement & {
+    ref?: React.Ref<React.ReactNode>;
+  };
+
+  const modifiedContent = React.cloneElement(
+    content,
+    { onClose },
+  );
+
+  return (
+    <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy lazyBehavior="unmount">
+      <PopoverTrigger>
+        <Button
+          onClick={ onToggle }
+          aria-label={ `filter by ${ columnName }` }
+          variant="ghost"
+          h="20px"
+          isActive={ Boolean(value) || isActive }
+          isDisabled={ isLoading }
+          borderRadius="4px"
+          color="text_secondary"
+          fontSize="sm"
+          fontWeight={ 500 }
+          leftIcon={ <IconSvg name="filter" w="19px" h="19px"/> }
+          padding={ 0 }
+          sx={{
+            'span:only-child': {
+              mx: 0,
+            },
+            'span:not(:only-child)': {
+              mr: '2px',
+            },
+          }}
+        >
+          { Boolean(value) && <chakra.span>{ value }</chakra.span> }
+        </Button>
+      </PopoverTrigger>
+      <Portal>
+        <PopoverContent className={ className }>
+          <PopoverBody px={ 4 } py={ 6 } display="flex" flexDir="column" rowGap={ 3 }>
+            { modifiedContent }
+          </PopoverBody>
+        </PopoverContent>
+      </Portal>
+    </Popover>
+  );
+};
+
+export default chakra(TableColumnFilterWrapper);
diff --git a/ui/shared/filters/TokenTypeFilter.tsx b/ui/shared/filters/TokenTypeFilter.tsx
index 9d80814284..9c844a58fa 100644
--- a/ui/shared/filters/TokenTypeFilter.tsx
+++ b/ui/shared/filters/TokenTypeFilter.tsx
@@ -3,13 +3,14 @@ import React from 'react';
 
 import type { NFTTokenType, TokenType } from 'types/api/token';
 
-import { NFT_TOKEN_TYPES, TOKEN_TYPES } from 'lib/token/tokenTypes';
+import {
+  TOKEN_TYPES, TOKEN_TYPE_IDS, NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
 
 type Props<T extends TokenType | NFTTokenType> = {
   onChange: (nextValue: Array<T>) => void;
   defaultValue?: Array<T>;
   nftOnly: T extends NFTTokenType ? true : false;
-}
+};
 const TokenTypeFilter = <T extends TokenType | NFTTokenType>({ nftOnly, onChange, defaultValue }: Props<T>) => {
   const { value, setValue } = useCheckboxGroup({ defaultValue });
 
@@ -42,9 +43,9 @@ const TokenTypeFilter = <T extends TokenType | NFTTokenType>({ nftOnly, onChange
         </Link>
       </Flex>
       <CheckboxGroup size="lg" onChange={ handleChange } value={ value }>
-        { (nftOnly ? NFT_TOKEN_TYPES : TOKEN_TYPES).map(({ title, id }) => (
+        { (nftOnly ? NFT_TOKEN_TYPE_IDS : TOKEN_TYPE_IDS).map((id) => (
           <Checkbox key={ id } value={ id }>
-            <Text fontSize="md">{ title }</Text>
+            <Text fontSize="md">{ TOKEN_TYPES[id] }</Text>
           </Checkbox>
         )) }
       </CheckboxGroup>
diff --git a/ui/shared/forms/FieldError.tsx b/ui/shared/forms/components/FieldError.tsx
similarity index 100%
rename from ui/shared/forms/FieldError.tsx
rename to ui/shared/forms/components/FieldError.tsx
diff --git a/ui/shared/forms/components/ImageUrlPreview.tsx b/ui/shared/forms/components/ImageUrlPreview.tsx
new file mode 100644
index 0000000000..86a368c8b7
--- /dev/null
+++ b/ui/shared/forms/components/ImageUrlPreview.tsx
@@ -0,0 +1,47 @@
+import type { ColorMode } from '@chakra-ui/react';
+import { Image, Skeleton, chakra, DarkMode } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  src: string | undefined;
+  onLoad?: () => void;
+  onError?: () => void;
+  isInvalid: boolean;
+  className?: string;
+  fallback: React.ReactElement;
+  colorMode?: ColorMode;
+}
+
+const ImageUrlPreview = ({
+  src,
+  isInvalid,
+  onError,
+  onLoad,
+  className,
+  fallback: fallbackProp,
+  colorMode,
+}: Props) => {
+  const skeleton = <Skeleton className={ className } w="100%" h="100%"/>;
+
+  const fallback = (() => {
+    if (src && !isInvalid) {
+      return colorMode === 'dark' ? <DarkMode>{ skeleton }</DarkMode> : skeleton;
+    }
+    return fallbackProp;
+  })();
+
+  return (
+    <Image
+      className={ className }
+      src={ src }
+      alt="Image preview"
+      w="auto"
+      h="100%"
+      fallback={ fallback }
+      onError={ onError }
+      onLoad={ onLoad }
+    />
+  );
+};
+
+export default chakra(React.memo(ImageUrlPreview));
diff --git a/ui/shared/forms/fields/FormFieldAddress.tsx b/ui/shared/forms/fields/FormFieldAddress.tsx
new file mode 100644
index 0000000000..3caa01ec34
--- /dev/null
+++ b/ui/shared/forms/fields/FormFieldAddress.tsx
@@ -0,0 +1,39 @@
+import type { ChakraProps } from '@chakra-ui/react';
+import React from 'react';
+import type { FieldValues, Path } from 'react-hook-form';
+
+import type { FormFieldPropsBase } from './types';
+import type { PartialBy } from 'types/utils';
+
+import { addressValidator } from '../validators/address';
+import FormFieldText from './FormFieldText';
+
+const FormFieldAddress = <FormFields extends FieldValues>(
+  props: PartialBy<FormFieldPropsBase<FormFields>, 'placeholder'>,
+) => {
+  const rules = React.useMemo(
+    () => ({
+      ...props.rules,
+      validate: {
+        ...props.rules?.validate,
+        address: addressValidator,
+      },
+    }),
+    [ props.rules ],
+  );
+
+  return (
+    <FormFieldText
+      { ...props }
+      placeholder={ props.placeholder || 'Address (0x...)' }
+      rules={ rules }
+    />
+  );
+};
+
+export type WrappedComponent = <
+  FormFields extends FieldValues,
+  Name extends Path<FormFields> = Path<FormFields>,
+>(props: PartialBy<FormFieldPropsBase<FormFields, Name>, 'placeholder'> & ChakraProps) => React.JSX.Element;
+
+export default React.memo(FormFieldAddress) as WrappedComponent;
diff --git a/ui/shared/forms/fields/FormFieldCheckbox.tsx b/ui/shared/forms/fields/FormFieldCheckbox.tsx
new file mode 100644
index 0000000000..61dce934ac
--- /dev/null
+++ b/ui/shared/forms/fields/FormFieldCheckbox.tsx
@@ -0,0 +1,63 @@
+import type { ChakraProps } from '@chakra-ui/react';
+import { chakra, Checkbox } from '@chakra-ui/react';
+import React from 'react';
+import { useController, useFormContext, type FieldValues, type Path } from 'react-hook-form';
+
+import type { FormFieldPropsBase } from './types';
+
+interface Props<
+  FormFields extends FieldValues,
+  Name extends Path<FormFields> = Path<FormFields>,
+> extends Omit<FormFieldPropsBase<FormFields, Name>, 'size' | 'bgColor' | 'placeholder'> {
+  label: string;
+}
+
+const FormFieldCheckbox = <
+  FormFields extends FieldValues,
+  Name extends Path<FormFields> = Path<FormFields>,
+>({
+  name,
+  label,
+  rules,
+  onChange,
+  isReadOnly,
+  className,
+}: Props<FormFields, Name>) => {
+  const { control } = useFormContext<FormFields>();
+  const { field, formState } = useController<FormFields, typeof name>({
+    control,
+    name,
+    rules,
+  });
+
+  const isDisabled = formState.isSubmitting;
+
+  const handleChange: typeof field.onChange = React.useCallback((...args) => {
+    field.onChange(...args);
+    onChange?.();
+  }, [ field, onChange ]);
+
+  return (
+    <Checkbox
+      ref={ field.ref }
+      isChecked={ field.value }
+      className={ className }
+      onChange={ handleChange }
+      colorScheme="blue"
+      size="lg"
+      isDisabled={ isDisabled }
+      isReadOnly={ isReadOnly }
+    >
+      { label }
+    </Checkbox>
+  );
+};
+
+const WrappedFormFieldCheckbox = chakra(FormFieldCheckbox);
+
+export type WrappedComponent = <
+  FormFields extends FieldValues,
+  Name extends Path<FormFields> = Path<FormFields>,
+>(props: Props<FormFields, Name> & ChakraProps) => React.JSX.Element;
+
+export default React.memo(WrappedFormFieldCheckbox) as WrappedComponent;
diff --git a/ui/shared/forms/fields/FormFieldEmail.tsx b/ui/shared/forms/fields/FormFieldEmail.tsx
new file mode 100644
index 0000000000..bdee970502
--- /dev/null
+++ b/ui/shared/forms/fields/FormFieldEmail.tsx
@@ -0,0 +1,36 @@
+import type { ChakraProps } from '@chakra-ui/react';
+import React from 'react';
+import type { FieldValues, Path } from 'react-hook-form';
+
+import type { FormFieldPropsBase } from './types';
+import type { PartialBy } from 'types/utils';
+
+import { EMAIL_REGEXP } from '../validators/email';
+import FormFieldText from './FormFieldText';
+
+const FormFieldEmail = <FormFields extends FieldValues>(
+  props: PartialBy<FormFieldPropsBase<FormFields>, 'placeholder'>,
+) => {
+  const rules = React.useMemo(
+    () => ({
+      ...props.rules,
+      pattern: EMAIL_REGEXP,
+    }),
+    [ props.rules ],
+  );
+
+  return (
+    <FormFieldText
+      { ...props }
+      placeholder={ props.placeholder || 'Email' }
+      rules={ rules }
+    />
+  );
+};
+
+export type WrappedComponent = <
+  FormFields extends FieldValues,
+  Name extends Path<FormFields> = Path<FormFields>,
+>(props: PartialBy<FormFieldPropsBase<FormFields, Name>, 'placeholder'> & ChakraProps) => React.JSX.Element;
+
+export default React.memo(FormFieldEmail) as WrappedComponent;
diff --git a/ui/shared/forms/fields/FormFieldFancySelect.tsx b/ui/shared/forms/fields/FormFieldFancySelect.tsx
new file mode 100644
index 0000000000..0bb4131608
--- /dev/null
+++ b/ui/shared/forms/fields/FormFieldFancySelect.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import type { Path, FieldValues } from 'react-hook-form';
+import { useController, useFormContext } from 'react-hook-form';
+
+import type { FormFieldPropsBase } from './types';
+
+// import type { Option } from 'ui/shared/forms/inputs/select/types';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import type { Props as FancySelectProps } from 'ui/shared/forms/inputs/select/FancySelect';
+import FancySelect from 'ui/shared/forms/inputs/select/FancySelect';
+
+// FIXME: Try to get this to work to add more constraints to the props type
+// this type only works for plain objects, not for nested objects or arrays (e.g. ui/publicTags/submit/types.ts:FormFields)
+// type SelectField<O> = { [K in keyof O]: NonNullable<O[K]> extends Option ? K : never }[keyof O];
+
+type Props<
+  FormFields extends FieldValues,
+  Name extends Path<FormFields>,
+> = Omit<FormFieldPropsBase<FormFields, Name>, 'bgColor' | 'size'> & Partial<FancySelectProps> & {
+  size?: 'md' | 'lg';
+};
+
+const FormFieldFancySelect = <
+  FormFields extends FieldValues,
+  Name extends Path<FormFields>,
+>(props: Props<FormFields, Name>) => {
+  const isMobile = useIsMobile();
+  const defaultSize = isMobile ? 'md' : 'lg';
+
+  const { control } = useFormContext<FormFields>();
+  const { field, fieldState, formState } = useController<FormFields, typeof props.name>({
+    control,
+    name: props.name,
+    rules: { ...props.rules, required: props.isRequired },
+  });
+
+  const isDisabled = formState.isSubmitting;
+
+  return (
+    <FancySelect
+      { ...field }
+      { ...props }
+      size={ props.size || defaultSize }
+      error={ fieldState.error }
+      isDisabled={ isDisabled }
+    />
+  );
+};
+
+export default React.memo(FormFieldFancySelect) as typeof FormFieldFancySelect;
diff --git a/ui/shared/forms/fields/FormFieldText.tsx b/ui/shared/forms/fields/FormFieldText.tsx
new file mode 100644
index 0000000000..526e0e63a3
--- /dev/null
+++ b/ui/shared/forms/fields/FormFieldText.tsx
@@ -0,0 +1,115 @@
+import type { ChakraProps } from '@chakra-ui/react';
+import { FormControl, Input, InputGroup, InputRightElement, Textarea, chakra, shouldForwardProp } from '@chakra-ui/react';
+import React from 'react';
+import type { FieldValues, Path } from 'react-hook-form';
+import { useController, useFormContext } from 'react-hook-form';
+
+import type { FormFieldPropsBase } from './types';
+
+import FormInputPlaceholder from '../inputs/FormInputPlaceholder';
+
+interface Props<
+  FormFields extends FieldValues,
+  Name extends Path<FormFields> = Path<FormFields>,
+> extends FormFieldPropsBase<FormFields, Name> {
+  asComponent?: 'Input' | 'Textarea';
+}
+
+const FormFieldText = <
+  FormFields extends FieldValues,
+  Name extends Path<FormFields> = Path<FormFields>,
+>({
+  name,
+  placeholder,
+  isReadOnly,
+  isRequired,
+  rules,
+  onBlur,
+  type = 'text',
+  rightElement,
+  asComponent,
+  max,
+
+  className,
+  size = 'md',
+  bgColor,
+  minH,
+  maxH,
+}: Props<FormFields, Name>) => {
+  const { control } = useFormContext<FormFields>();
+  const { field, fieldState, formState } = useController<FormFields, typeof name>({
+    control,
+    name,
+    rules: { ...rules, required: isRequired },
+  });
+
+  const isDisabled = formState.isSubmitting;
+
+  const handleBlur = React.useCallback(() => {
+    field.onBlur();
+    onBlur?.();
+  }, [ field, onBlur ]);
+
+  const Component = asComponent === 'Textarea' ? Textarea : Input;
+  const input = (
+    <Component
+      { ...field }
+      onBlur={ handleBlur }
+      isInvalid={ Boolean(fieldState.error) }
+      isDisabled={ isDisabled }
+      isReadOnly={ isReadOnly }
+      autoComplete="off"
+      type={ type }
+      placeholder=" "
+      max={ max }
+      size={ size }
+      bgColor={ bgColor }
+      minH={ minH }
+      maxH={ maxH }
+    />
+  );
+  const inputPlaceholder = size !== 'xs' && <FormInputPlaceholder text={ placeholder } error={ fieldState.error }/>;
+
+  return (
+    <FormControl
+      className={ className }
+      variant="floating"
+      isDisabled={ isDisabled }
+      isRequired={ isRequired }
+      size={ size }
+      bgColor={ bgColor }
+    >
+      { rightElement ? (
+        <InputGroup>
+          { input }
+          { inputPlaceholder }
+          <InputRightElement h="100%"> { rightElement({ field }) } </InputRightElement>
+        </InputGroup>
+      ) : (
+        <>
+          { input }
+          { inputPlaceholder }
+        </>
+      ) }
+    </FormControl>
+  );
+};
+
+const WrappedFormFieldText = chakra(FormFieldText, {
+  shouldForwardProp: (prop) => {
+    const isChakraProp = !shouldForwardProp(prop);
+
+    if (isChakraProp && ![ 'bgColor', 'size', 'minH', 'maxH' ].includes(prop)) {
+      return false;
+    }
+
+    return true;
+  },
+});
+
+export type WrappedComponent = <
+  FormFields extends FieldValues,
+  Name extends Path<FormFields> = Path<FormFields>,
+>(props: Props<FormFields, Name> & ChakraProps) => React.JSX.Element;
+
+export default React.memo(WrappedFormFieldText) as WrappedComponent;
diff --git a/ui/shared/forms/fields/FormFieldUrl.tsx b/ui/shared/forms/fields/FormFieldUrl.tsx
new file mode 100644
index 0000000000..0ea64a26fd
--- /dev/null
+++ b/ui/shared/forms/fields/FormFieldUrl.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import type { FieldValues } from 'react-hook-form';
+
+import type { FormFieldPropsBase } from './types';
+
+import { urlValidator } from '../validators/url';
+import FormFieldText, { type WrappedComponent } from './FormFieldText';
+
+const FormFieldUrl = <FormFields extends FieldValues>(
+  props: FormFieldPropsBase<FormFields>,
+) => {
+  const rules = React.useMemo(
+    () => ({
+      ...props.rules,
+      validate: {
+        ...props.rules?.validate,
+        url: urlValidator,
+      },
+    }),
+    [ props.rules ],
+  );
+
+  return <FormFieldText { ...props } rules={ rules }/>;
+};
+
+export default React.memo(FormFieldUrl) as WrappedComponent;
diff --git a/ui/shared/forms/fields/types.ts b/ui/shared/forms/fields/types.ts
new file mode 100644
index 0000000000..ccbc3ee2e9
--- /dev/null
+++ b/ui/shared/forms/fields/types.ts
@@ -0,0 +1,26 @@
+import type { FormControlProps } from '@chakra-ui/react';
+import type React from 'react';
+import type { ControllerRenderProps, FieldValues, Path, RegisterOptions } from 'react-hook-form';
+
+export interface FormFieldPropsBase<
+  FormFields extends FieldValues,
+  Name extends Path<FormFields> = Path<FormFields>,
+> {
+  name: Name;
+  placeholder: string;
+  isReadOnly?: boolean;
+  isRequired?: boolean;
+  rules?: Omit<RegisterOptions<FormFields, Name>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
+  onBlur?: () => void;
+  onChange?: () => void;
+  type?: HTMLInputElement['type'];
+  rightElement?: ({ field }: { field: ControllerRenderProps<FormFields, Name> }) => React.ReactNode;
+  max?: HTMLInputElement['max'];
+
+  // styles
+  size?: FormControlProps['size'];
+  bgColor?: FormControlProps['bgColor'];
+  maxH?: FormControlProps['maxH'];
+  minH?: FormControlProps['minH'];
+  className?: string;
+}
diff --git a/ui/shared/forms/inputs/FormInputPlaceholder.tsx b/ui/shared/forms/inputs/FormInputPlaceholder.tsx
new file mode 100644
index 0000000000..94cfe261ba
--- /dev/null
+++ b/ui/shared/forms/inputs/FormInputPlaceholder.tsx
@@ -0,0 +1,37 @@
+import { FormLabel, chakra } from '@chakra-ui/react';
+import React from 'react';
+import type { FieldError } from 'react-hook-form';
+
+interface Props {
+  text: string;
+  icon?: React.ReactNode;
+  error?: Partial<FieldError>;
+  isFancy?: boolean;
+}
+
+const FormInputPlaceholder = ({ text, icon, error, isFancy }: Props) => {
+  let errorMessage = error?.message;
+
+  if (!errorMessage && error?.type === 'pattern') {
+    errorMessage = 'Invalid format';
+  }
+
+  return (
+    <FormLabel
+      alignItems="center"
+      { ...(isFancy ? { 'data-fancy': true } : {}) }
+      variant="floating"
+    >
+      { icon }
+      <chakra.span>{ text }</chakra.span>
+      { errorMessage && (
+        <chakra.span order={ 3 } whiteSpace="pre">
+          { ' ' }
+          - { errorMessage }
+        </chakra.span>
+      ) }
+    </FormLabel>
+  );
+};
+
+export default React.memo(FormInputPlaceholder);
diff --git a/ui/shared/forms/DragAndDropArea.tsx b/ui/shared/forms/inputs/file/DragAndDropArea.tsx
similarity index 90%
rename from ui/shared/forms/DragAndDropArea.tsx
rename to ui/shared/forms/inputs/file/DragAndDropArea.tsx
index 51cab94cec..05299d6dea 100644
--- a/ui/shared/forms/DragAndDropArea.tsx
+++ b/ui/shared/forms/inputs/file/DragAndDropArea.tsx
@@ -2,16 +2,17 @@ import { chakra, Center, useColorModeValue } from '@chakra-ui/react';
 import type { DragEvent } from 'react';
 import React from 'react';
 
-import { getAllFileEntries, convertFileEntryToFile } from './utils/files';
+import { getAllFileEntries, convertFileEntryToFile } from './utils';
 
 interface Props {
   children: React.ReactNode;
   onDrop: (files: Array<File>) => void;
   className?: string;
   isDisabled?: boolean;
+  fullFilePath?: boolean;
 }
 
-const DragAndDropArea = ({ onDrop, children, className, isDisabled }: Props) => {
+const DragAndDropArea = ({ onDrop, children, className, isDisabled, fullFilePath }: Props) => {
   const [ isDragOver, setIsDragOver ] = React.useState(false);
 
   const handleDrop = React.useCallback(async(event: DragEvent<HTMLDivElement>) => {
@@ -22,11 +23,11 @@ const DragAndDropArea = ({ onDrop, children, className, isDisabled }: Props) =>
     }
 
     const fileEntries = await getAllFileEntries(event.dataTransfer.items);
-    const files = await Promise.all(fileEntries.map(convertFileEntryToFile));
+    const files = await Promise.all(fileEntries.map((fileEntry) => convertFileEntryToFile(fileEntry, fullFilePath)));
 
     onDrop(files);
     setIsDragOver(false);
-  }, [ isDisabled, onDrop ]);
+  }, [ isDisabled, onDrop, fullFilePath ]);
 
   const handleDragOver = React.useCallback((event: DragEvent<HTMLDivElement>) => {
     event.preventDefault();
diff --git a/ui/shared/forms/FileInput.tsx b/ui/shared/forms/inputs/file/FileInput.tsx
similarity index 100%
rename from ui/shared/forms/FileInput.tsx
rename to ui/shared/forms/inputs/file/FileInput.tsx
diff --git a/ui/shared/forms/FileSnippet.tsx b/ui/shared/forms/inputs/file/FileSnippet.tsx
similarity index 97%
rename from ui/shared/forms/FileSnippet.tsx
rename to ui/shared/forms/inputs/file/FileSnippet.tsx
index 172c045ed9..73656e46d8 100644
--- a/ui/shared/forms/FileSnippet.tsx
+++ b/ui/shared/forms/inputs/file/FileSnippet.tsx
@@ -76,7 +76,7 @@ const FileSnippet = ({ file, className, index, onRemove, isDisabled, error }: Pr
             <Tooltip
               label={ error }
               placement="top"
-              maxW="320px"
+              maxW={{ base: 'calc(100vw - 8px)', lg: '320px' }}
             >
               <Box cursor="pointer" display="inherit" onClick={ handleErrorHintIconClick } ml={ 1 }>
                 <IconSvg name="info" boxSize={ 5 } color="error"/>
diff --git a/ui/shared/forms/inputs/file/utils.ts b/ui/shared/forms/inputs/file/utils.ts
new file mode 100644
index 0000000000..5990b19ffb
--- /dev/null
+++ b/ui/shared/forms/inputs/file/utils.ts
@@ -0,0 +1,68 @@
+import stripLeadingSlash from 'lib/stripLeadingSlash';
+
+// Function to get all files in drop directory
+export async function getAllFileEntries(dataTransferItemList: DataTransferItemList): Promise<Array<FileSystemFileEntry>> {
+  const fileEntries: Array<FileSystemFileEntry> = [];
+
+  // Use BFS to traverse entire directory/file structure
+  const queue: Array<FileSystemFileEntry | FileSystemDirectoryEntry> = [];
+
+  // Unfortunately dataTransferItemList is not iterable i.e. no forEach
+  for (let i = 0; i < dataTransferItemList.length; i++) {
+    // Note webkitGetAsEntry a non-standard feature and may change
+    // Usage is necessary for handling directories
+    // + typescript types are kinda wrong - https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/webkitGetAsEntry
+    const item = dataTransferItemList[i].webkitGetAsEntry() as FileSystemFileEntry | FileSystemDirectoryEntry | null;
+    item && queue.push(item);
+  }
+
+  while (queue.length > 0) {
+    const entry = queue.shift();
+    if (entry?.isFile) {
+      fileEntries.push(entry as FileSystemFileEntry);
+    } else if (entry?.isDirectory && 'createReader' in entry) {
+      queue.push(...await readAllDirectoryEntries(entry.createReader()));
+    }
+  }
+  return fileEntries;
+}
+
+// Get all the entries (files or sub-directories) in a directory
+// by calling readEntries until it returns empty array
+async function readAllDirectoryEntries(directoryReader: FileSystemDirectoryReader) {
+  const entries: Array<FileSystemFileEntry> = [];
+  let readEntries = await readEntriesPromise(directoryReader);
+
+  while (readEntries && readEntries.length > 0) {
+    entries.push(...readEntries);
+    readEntries = await readEntriesPromise(directoryReader);
+  }
+  return entries;
+}
+
+// Wrap readEntries in a promise to make working with readEntries easier
+// readEntries will return only some of the entries in a directory
+// e.g. Chrome returns at most 100 entries at a time
+async function readEntriesPromise(directoryReader: FileSystemDirectoryReader): Promise<Array<FileSystemFileEntry> | undefined> {
+  try {
+    return await new Promise((resolve, reject) => {
+      directoryReader.readEntries(
+        (fileEntry) => {
+          resolve(fileEntry as Array<FileSystemFileEntry>);
+        },
+        reject,
+      );
+    });
+  } catch (err) {}
+}
+
+export function convertFileEntryToFile(entry: FileSystemFileEntry, fullFilePath?: boolean): Promise<File> {
+  return new Promise((resolve) => {
+    entry.file(async(file: File) => {
+      const newFile = fullFilePath ?
+        new File([ file ], stripLeadingSlash(entry.fullPath), { lastModified: file.lastModified, type: file.type }) :
+        file;
+      resolve(newFile);
+    });
+  });
+}
diff --git a/ui/shared/forms/inputs/select/FancySelect.pw.tsx b/ui/shared/forms/inputs/select/FancySelect.pw.tsx
new file mode 100644
index 0000000000..1c6ebcfcbd
--- /dev/null
+++ b/ui/shared/forms/inputs/select/FancySelect.pw.tsx
@@ -0,0 +1,100 @@
+import _noop from 'lodash/noop';
+import React from 'react';
+
+import { test, expect } from 'playwright/lib';
+
+import FancySelect from './FancySelect';
+
+const OPTIONS = [
+  { value: 'v0.8.17+commit.8df45f5f', label: 'v0.8.17+commit.8df45f5f' },
+  { value: 'v0.8.16+commit.07a7930e', label: 'v0.8.16+commit.07a7930e' },
+  { value: 'v0.8.15+commit.e14f2714', label: 'v0.8.15+commit.e14f2714' },
+];
+
+test.use({ viewport: { width: 500, height: 300 } });
+
+const defaultProps = {
+  options: OPTIONS,
+  isRequired: true,
+  placeholder: 'Compiler',
+  name: 'compiler',
+  onChange: _noop,
+};
+
+[ 'md' as const, 'lg' as const ].forEach((size) => {
+  test.describe(`size ${ size } +@dark-mode`, () => {
+    test('empty', async({ render, page }) => {
+      const component = await render(
+        <FancySelect
+          { ...defaultProps }
+          size={ size }
+          value={ null }
+        />,
+      );
+
+      await expect(component).toHaveScreenshot();
+
+      await component.getByLabel(/compiler/i).focus();
+      await component.getByLabel(/compiler/i).type('1');
+      await expect(page).toHaveScreenshot();
+    });
+
+    test('filled', async({ render }) => {
+      const component = await render(
+        <FancySelect
+          { ...defaultProps }
+          size={ size }
+          value={ OPTIONS[0] }
+        />,
+      );
+
+      await expect(component).toHaveScreenshot();
+    });
+
+    test('error', async({ render }) => {
+      const component = await render(
+        <FancySelect
+          { ...defaultProps }
+          size={ size }
+          value={ null }
+          error={{
+            type: 'unknown',
+            message: 'cannot be empty',
+          }}
+        />,
+      );
+
+      await expect(component).toHaveScreenshot();
+
+      await component.getByLabel(/compiler/i).focus();
+      await component.getByLabel(/compiler/i).type('1');
+      await expect(component).toHaveScreenshot();
+    });
+
+    test('disabled', async({ render }) => {
+      const component = await render(
+        <FancySelect
+          { ...defaultProps }
+          size={ size }
+          value={ OPTIONS[0] }
+          isDisabled
+        />,
+      );
+
+      await expect(component).toHaveScreenshot();
+    });
+
+    test('read-only', async({ render }) => {
+      const component = await render(
+        <FancySelect
+          { ...defaultProps }
+          size={ size }
+          value={ OPTIONS[0] }
+          isReadOnly
+        />,
+      );
+
+      await expect(component).toHaveScreenshot();
+    });
+  });
+});
diff --git a/ui/shared/FancySelect/FancySelect.tsx b/ui/shared/forms/inputs/select/FancySelect.tsx
similarity index 90%
rename from ui/shared/FancySelect/FancySelect.tsx
rename to ui/shared/forms/inputs/select/FancySelect.tsx
index 4f56d7811c..27274f2e79 100644
--- a/ui/shared/FancySelect/FancySelect.tsx
+++ b/ui/shared/forms/inputs/select/FancySelect.tsx
@@ -6,8 +6,8 @@ import type { FieldError, FieldErrorsImpl, Merge } from 'react-hook-form';
 
 import type { Option } from './types';
 
-import { getChakraStyles } from 'ui/shared/FancySelect/utils';
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
+import FormInputPlaceholder from 'ui/shared/forms/inputs/FormInputPlaceholder';
+import { getChakraStyles } from 'ui/shared/forms/inputs/select/utils';
 
 interface CommonProps {
   error?: Merge<FieldError, FieldErrorsImpl<Option>> | undefined;
@@ -24,7 +24,7 @@ interface AsyncSelectProps extends AsyncProps<Option, boolean, GroupBase<Option>
   onChange: (newValue: SingleValue<Option> | MultiValue<Option>) => void;
 }
 
-type Props = RegularSelectProps | AsyncSelectProps;
+export type Props = RegularSelectProps | AsyncSelectProps;
 
 const FancySelect = (props: Props, ref: React.LegacyRef<HTMLDivElement>) => {
   const menuZIndex = useToken('zIndices', 'dropdown');
@@ -58,7 +58,7 @@ const FancySelect = (props: Props, ref: React.LegacyRef<HTMLDivElement>) => {
         isInvalid={ Boolean(props.error) }
         useBasicStyles
       />
-      <InputPlaceholder
+      <FormInputPlaceholder
         text={ typeof props.placeholder === 'string' ? props.placeholder : '' }
         icon={ props.placeholderIcon }
         error={ props.error }
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-disabled-1.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-disabled-1.png
new file mode 100644
index 0000000000..bfda854567
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-disabled-1.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-1.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-1.png
new file mode 100644
index 0000000000..8ebd32edfc
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-1.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-2.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-2.png
new file mode 100644
index 0000000000..6747a3c9ab
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-2.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-error-1.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-error-1.png
new file mode 100644
index 0000000000..5f2e8cd0e0
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-error-1.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-error-2.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-error-2.png
new file mode 100644
index 0000000000..b045c8d9b0
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-error-2.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-filled-1.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-filled-1.png
new file mode 100644
index 0000000000..b2172a6021
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-filled-1.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-read-only-1.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-read-only-1.png
new file mode 100644
index 0000000000..761abee5ab
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-read-only-1.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-disabled-1.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-disabled-1.png
new file mode 100644
index 0000000000..9c8f75de17
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-disabled-1.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-empty-1.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-empty-1.png
new file mode 100644
index 0000000000..f315dbe529
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-empty-1.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-empty-2.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-empty-2.png
new file mode 100644
index 0000000000..6db3a8dadd
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-empty-2.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-error-1.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-error-1.png
new file mode 100644
index 0000000000..4cd98f6225
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-error-1.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-error-2.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-error-2.png
new file mode 100644
index 0000000000..45e5d05f9b
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-error-2.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-filled-1.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-filled-1.png
new file mode 100644
index 0000000000..19d5773e1d
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-filled-1.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-read-only-1.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-read-only-1.png
new file mode 100644
index 0000000000..4962443202
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-read-only-1.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-disabled-1.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-disabled-1.png
new file mode 100644
index 0000000000..4eadc17bcb
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-disabled-1.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-empty-1.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-empty-1.png
new file mode 100644
index 0000000000..a7d23af25b
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-empty-1.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-empty-2.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-empty-2.png
new file mode 100644
index 0000000000..1601d3a0c3
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-empty-2.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-error-1.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-error-1.png
new file mode 100644
index 0000000000..d321cfc9b2
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-error-1.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-error-2.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-error-2.png
new file mode 100644
index 0000000000..f71516722b
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-error-2.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-filled-1.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-filled-1.png
new file mode 100644
index 0000000000..762090226e
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-filled-1.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-read-only-1.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-read-only-1.png
new file mode 100644
index 0000000000..b6b5f97fd2
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-read-only-1.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-disabled-1.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-disabled-1.png
new file mode 100644
index 0000000000..7374a323ae
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-disabled-1.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-empty-1.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-empty-1.png
new file mode 100644
index 0000000000..56070abc1d
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-empty-1.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-empty-2.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-empty-2.png
new file mode 100644
index 0000000000..3efa404595
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-empty-2.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-error-1.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-error-1.png
new file mode 100644
index 0000000000..7592e8802d
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-error-1.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-error-2.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-error-2.png
new file mode 100644
index 0000000000..f0840988e2
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-error-2.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-filled-1.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-filled-1.png
new file mode 100644
index 0000000000..9328dceb67
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-filled-1.png differ
diff --git a/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-read-only-1.png b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-read-only-1.png
new file mode 100644
index 0000000000..6395492c09
Binary files /dev/null and b/ui/shared/forms/inputs/select/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-read-only-1.png differ
diff --git a/ui/shared/forms/inputs/select/types.ts b/ui/shared/forms/inputs/select/types.ts
new file mode 100644
index 0000000000..5488328ba7
--- /dev/null
+++ b/ui/shared/forms/inputs/select/types.ts
@@ -0,0 +1,4 @@
+export interface Option<T extends string = string> {
+  label: string;
+  value: T;
+}
diff --git a/ui/shared/forms/inputs/select/utils.ts b/ui/shared/forms/inputs/select/utils.ts
new file mode 100644
index 0000000000..ac9eb1b830
--- /dev/null
+++ b/ui/shared/forms/inputs/select/utils.ts
@@ -0,0 +1,74 @@
+import type { ColorMode } from '@chakra-ui/react';
+import type { Size, ChakraStylesConfig } from 'chakra-react-select';
+
+import type { Option } from './types';
+
+import theme from 'theme/theme';
+import getFormStyles from 'theme/utils/getFormStyles';
+
+function getValueContainerStyles(size?: Size) {
+  switch (size) {
+    case 'sm':
+    case 'md': {
+      return {
+        paddingLeft: 4,
+      };
+    }
+    case 'lg': {
+      return {
+        paddingLeft: 6,
+      };
+    }
+    default: {
+      return {};
+    }
+  }
+}
+
+function getSingleValueStyles(size?: Size) {
+  switch (size) {
+    case 'sm':
+    case 'md': {
+      return {
+        top: '26px',
+      };
+    }
+    case 'lg': {
+      return {
+        top: '38px',
+      };
+    }
+    default: {
+      return {};
+    }
+  }
+}
+
+const getChakraStyles: (colorMode: ColorMode) => ChakraStylesConfig<Option> = (colorMode) => {
+  const formColor = getFormStyles({ colorMode, colorScheme: 'blue', theme });
+
+  return {
+    control: (provided, state) => ({
+      ...provided,
+      borderColor: state.hasValue ? formColor.input.filled.borderColor : formColor.input.empty.borderColor,
+    }),
+    inputContainer: (provided) => ({
+      ...provided,
+      py: 0,
+      mx: 0,
+    }),
+    valueContainer: (provided, state) => ({
+      ...provided,
+      ...getValueContainerStyles(state.selectProps.size),
+      py: 0,
+    }),
+    singleValue: (provided, state) => ({
+      ...provided,
+      mx: 0,
+      transform: 'none',
+      ...getSingleValueStyles(state.selectProps.size),
+    }),
+  };
+};
+
+export { getChakraStyles };
diff --git a/ui/shared/forms/utils/files.ts b/ui/shared/forms/utils/files.ts
deleted file mode 100644
index 57a52d9800..0000000000
--- a/ui/shared/forms/utils/files.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-// Function to get all files in drop directory
-export async function getAllFileEntries(dataTransferItemList: DataTransferItemList): Promise<Array<FileSystemFileEntry>> {
-  const fileEntries: Array<FileSystemFileEntry> = [];
-
-  // Use BFS to traverse entire directory/file structure
-  const queue: Array<FileSystemFileEntry | FileSystemDirectoryEntry> = [];
-
-  // Unfortunately dataTransferItemList is not iterable i.e. no forEach
-  for (let i = 0; i < dataTransferItemList.length; i++) {
-    // Note webkitGetAsEntry a non-standard feature and may change
-    // Usage is necessary for handling directories
-    // + typescript types are kinda wrong - https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/webkitGetAsEntry
-    const item = dataTransferItemList[i].webkitGetAsEntry() as FileSystemFileEntry | FileSystemDirectoryEntry | null;
-    item && queue.push(item);
-  }
-
-  while (queue.length > 0) {
-    const entry = queue.shift();
-    if (entry?.isFile) {
-      fileEntries.push(entry as FileSystemFileEntry);
-    } else if (entry?.isDirectory && 'createReader' in entry) {
-      queue.push(...await readAllDirectoryEntries(entry.createReader()));
-    }
-  }
-  return fileEntries;
-}
-
-// Get all the entries (files or sub-directories) in a directory
-// by calling readEntries until it returns empty array
-async function readAllDirectoryEntries(directoryReader: DirectoryReader) {
-  const entries: Array<FileSystemFileEntry> = [];
-  let readEntries = await readEntriesPromise(directoryReader);
-
-  while (readEntries && readEntries.length > 0) {
-    entries.push(...readEntries);
-    readEntries = await readEntriesPromise(directoryReader);
-  }
-  return entries;
-}
-
-// Wrap readEntries in a promise to make working with readEntries easier
-// readEntries will return only some of the entries in a directory
-// e.g. Chrome returns at most 100 entries at a time
-async function readEntriesPromise(directoryReader: DirectoryReader): Promise<Array<FileSystemFileEntry> | undefined> {
-  try {
-    return await new Promise((resolve, reject) => {
-      directoryReader.readEntries(
-        (fileEntry) => {
-          resolve(fileEntry as Array<FileSystemFileEntry>);
-        },
-        reject,
-      );
-    });
-  } catch (err) {}
-}
-
-export function convertFileEntryToFile(entry: FileSystemFileEntry): Promise<File> {
-  return new Promise((resolve) => {
-    entry.file(async(file: File) => {
-    //   const newFile = new File([ file ], entry.fullPath, { lastModified: file.lastModified, type: file.type });
-      resolve(file);
-    });
-  });
-}
diff --git a/ui/shared/forms/utils/useFieldWithImagePreview.tsx b/ui/shared/forms/utils/useFieldWithImagePreview.tsx
new file mode 100644
index 0000000000..00cd29e370
--- /dev/null
+++ b/ui/shared/forms/utils/useFieldWithImagePreview.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import type { FieldValues, Path } from 'react-hook-form';
+import { useFormContext, useWatch } from 'react-hook-form';
+
+import { urlValidator } from '../validators/url';
+
+interface Params<
+  FormFields extends FieldValues,
+  Name extends Path<FormFields>,
+> {
+  name: Name;
+  isRequired?: boolean;
+}
+
+interface ReturnType {
+  input: {
+    rules: {
+      required?: boolean;
+      validate: {
+        preview: () => string | true;
+      };
+    };
+    isRequired?: boolean;
+    onBlur: () => void;
+  };
+  preview: {
+    src: string | undefined;
+    isInvalid: boolean;
+    onLoad: () => void;
+    onError: () => void;
+  };
+}
+
+export default function useFieldWithImagePreview<
+  FormFields extends FieldValues,
+  Name extends Path<FormFields>,
+>({
+  name,
+  isRequired,
+}: Params<FormFields, Name>): ReturnType {
+  const { trigger, formState, control } = useFormContext<FormFields>();
+
+  const imageLoadError = React.useRef(false);
+  const fieldValue = useWatch({ name, control, exact: true });
+  const fieldError = formState.errors[name];
+
+  const [ value, setValue ] = React.useState<string | undefined>(fieldValue);
+
+  const validator = React.useCallback(() => {
+    return imageLoadError.current ? 'Unable to load image' : true;
+  }, []);
+
+  const onLoad = React.useCallback(() => {
+    imageLoadError.current = false;
+    trigger(name);
+  }, [ name, trigger ]);
+
+  const onError = React.useCallback(() => {
+    imageLoadError.current = true;
+    trigger(name);
+  }, [ name, trigger ]);
+
+  const onBlur = React.useCallback(() => {
+    if (!isRequired && !fieldValue) {
+      imageLoadError.current = false;
+      trigger(name);
+      setValue(undefined);
+      return;
+    }
+
+    const isValidUrl = urlValidator(fieldValue);
+    isValidUrl === true && setValue(fieldValue);
+  }, [ fieldValue, isRequired, name, trigger ]);
+
+  return React.useMemo(() => {
+    return {
+      input: {
+        isRequired,
+        rules: {
+          required: isRequired,
+          validate: {
+            preview: validator,
+          },
+        },
+        onBlur,
+      },
+      preview: {
+        src: fieldError?.type === 'url' ? undefined : value,
+        isInvalid: fieldError?.type === 'preview',
+        onLoad,
+        onError,
+      },
+    };
+  }, [ fieldError?.type, isRequired, onBlur, onError, onLoad, validator, value ]);
+}
diff --git a/ui/shared/forms/validators/address.ts b/ui/shared/forms/validators/address.ts
new file mode 100644
index 0000000000..d85d1858ae
--- /dev/null
+++ b/ui/shared/forms/validators/address.ts
@@ -0,0 +1,11 @@
+export const ADDRESS_REGEXP = /^0x[a-fA-F\d]{40}$/;
+
+export const ADDRESS_LENGTH = 42;
+
+export function addressValidator(value: string | undefined) {
+  if (!value) {
+    return true;
+  }
+
+  return ADDRESS_REGEXP.test(value) ? true : 'Incorrect address format';
+}
diff --git a/ui/shared/forms/validators/color.ts b/ui/shared/forms/validators/color.ts
new file mode 100644
index 0000000000..6b0175fd36
--- /dev/null
+++ b/ui/shared/forms/validators/color.ts
@@ -0,0 +1,17 @@
+export const COLOR_HEX_REGEXP = /^#[a-f\d]{3,6}$/i;
+
+export const validator = (value: string | undefined) => {
+  if (!value || value.length === 0) {
+    return true;
+  }
+
+  if (value.length !== 4 && value.length !== 7) {
+    return 'Invalid length';
+  }
+
+  if (!COLOR_HEX_REGEXP.test(value)) {
+    return 'Invalid hex code';
+  }
+
+  return true;
+};
diff --git a/ui/shared/forms/validators/email.ts b/ui/shared/forms/validators/email.ts
new file mode 100644
index 0000000000..de63d845de
--- /dev/null
+++ b/ui/shared/forms/validators/email.ts
@@ -0,0 +1,3 @@
+export const EMAIL_REGEXP = /^[\w.%+-]+@[a-z\d-]+(?:\.[a-z\d-]+)+$/i;
+
+export const validator = (value: string) => EMAIL_REGEXP.test(value) ? true : 'Invalid email';
diff --git a/lib/validations/signature.ts b/ui/shared/forms/validators/signature.ts
similarity index 100%
rename from lib/validations/signature.ts
rename to ui/shared/forms/validators/signature.ts
diff --git a/ui/shared/forms/validators/text.ts b/ui/shared/forms/validators/text.ts
new file mode 100644
index 0000000000..50ab20d926
--- /dev/null
+++ b/ui/shared/forms/validators/text.ts
@@ -0,0 +1,13 @@
+export const noWhitespaceValidator = (value: unknown) => {
+  if (typeof value !== 'string') {
+    return true;
+  }
+
+  if (value === '') {
+    return true;
+  }
+
+  const trimmedValue = value.replace(/\s/g, '');
+
+  return trimmedValue !== '' || 'Should contain text';
+};
diff --git a/lib/validations/transaction.ts b/ui/shared/forms/validators/transaction.ts
similarity index 100%
rename from lib/validations/transaction.ts
rename to ui/shared/forms/validators/transaction.ts
diff --git a/ui/shared/forms/validators/url.ts b/ui/shared/forms/validators/url.ts
new file mode 100644
index 0000000000..d71601eda1
--- /dev/null
+++ b/ui/shared/forms/validators/url.ts
@@ -0,0 +1,32 @@
+export function urlValidator(value: string | undefined) {
+  if (!value) {
+    return true;
+  }
+
+  try {
+    new URL(value);
+    return true;
+  } catch (error) {
+    return 'Incorrect URL';
+  }
+}
+
+export const DOMAIN_REGEXP =
+  /(?:[a-z\d](?:[a-z\d-]{0,61}[a-z\d])?\.)+[a-z\d][a-z\d-]{0,61}[a-z\d]/gi;
+
+export function domainValidator(value: string | undefined) {
+  if (!value) {
+    return true;
+  }
+
+  const domain = (() => {
+    try {
+      const url = new URL(`https://${ value }`);
+      return url.hostname;
+    } catch (error) {
+      return;
+    }
+  })();
+
+  return domain === value.toLowerCase() || 'Incorrect domain';
+}
diff --git a/ui/shared/gas/GasInfoTooltip.pw.tsx b/ui/shared/gas/GasInfoTooltip.pw.tsx
new file mode 100644
index 0000000000..0be7c3b3fb
--- /dev/null
+++ b/ui/shared/gas/GasInfoTooltip.pw.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+
+import type { GasPriceInfo } from 'types/api/stats';
+
+import { SECOND } from 'lib/consts';
+import * as statsMock from 'mocks/stats/index';
+import { test, expect } from 'playwright/lib';
+
+import GasInfoTooltip from './GasInfoTooltip';
+import GasPrice from './GasPrice';
+
+const dataUpdatedAt = Date.now() - 30 * SECOND;
+
+test.use({ viewport: { width: 300, height: 300 } });
+
+test('all data', async({ render, page }) => {
+  await render(
+    <GasInfoTooltip data={ statsMock.base } dataUpdatedAt={ dataUpdatedAt } isOpen>
+      <span>Gas <GasPrice data={ statsMock.base.gas_prices?.average as GasPriceInfo }/></span>
+    </GasInfoTooltip>,
+  );
+
+  // await page.getByText(/gas/i).hover();
+  await page.getByText(/last update/i).isVisible();
+  await expect(page).toHaveScreenshot();
+});
+
+test('without primary unit price', async({ render, page }) => {
+  await render(
+    <GasInfoTooltip data={ statsMock.withoutFiatPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
+      <span>Gas: <GasPrice data={ statsMock.withoutFiatPrices.gas_prices?.average as GasPriceInfo }/></span>
+    </GasInfoTooltip>,
+  );
+
+  // await page.getByText(/gas/i).hover();
+  await page.getByText(/last update/i).isVisible();
+  await expect(page).toHaveScreenshot();
+});
+
+test('without secondary unit price', async({ render, page }) => {
+  await render(
+    <GasInfoTooltip data={ statsMock.withoutGweiPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
+      <span>Gas: <GasPrice data={ statsMock.withoutGweiPrices.gas_prices?.average as GasPriceInfo }/></span>
+    </GasInfoTooltip>,
+  );
+
+  // await page.getByText(/gas/i).hover();
+  await page.getByText(/last update/i).isVisible();
+  await expect(page).toHaveScreenshot();
+});
+
+test('no data', async({ render, page }) => {
+  await render(
+    <GasInfoTooltip data={ statsMock.withoutBothPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
+      <span>Gas: <GasPrice data={ statsMock.withoutBothPrices.gas_prices?.average as GasPriceInfo }/></span>
+    </GasInfoTooltip>,
+  );
+
+  // await page.getByText(/gas/i).hover();
+  await page.getByText(/last update/i).isVisible();
+  await expect(page).toHaveScreenshot();
+});
+
+test.describe('one unit', () => {
+  test.beforeEach(async({ mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_GAS_TRACKER_UNITS', '["gwei"]' ],
+    ]);
+  });
+
+  test('with data', async({ render, page }) => {
+    await render(
+      <GasInfoTooltip data={ statsMock.withoutFiatPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
+        <span>Gas: <GasPrice data={ statsMock.withoutFiatPrices.gas_prices?.average as GasPriceInfo }/></span>
+      </GasInfoTooltip>,
+    );
+
+    // await page.getByText(/gas/i).hover();
+    await page.getByText(/last update/i).isVisible();
+    await expect(page).toHaveScreenshot();
+  });
+
+  test('without data', async({ render, page }) => {
+    await render(
+      <GasInfoTooltip data={ statsMock.withoutGweiPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
+        <span>Gas: <GasPrice data={ statsMock.withoutGweiPrices.gas_prices?.average as GasPriceInfo }/></span>
+      </GasInfoTooltip>,
+    );
+
+    // await page.getByText(/gas/i).hover();
+    await page.getByText(/last update/i).isVisible();
+    await expect(page).toHaveScreenshot();
+  });
+});
diff --git a/ui/shared/gas/GasInfoTooltip.tsx b/ui/shared/gas/GasInfoTooltip.tsx
new file mode 100644
index 0000000000..90332c7b95
--- /dev/null
+++ b/ui/shared/gas/GasInfoTooltip.tsx
@@ -0,0 +1,88 @@
+import type {
+  PlacementWithLogical } from '@chakra-ui/react';
+import {
+  Box,
+  DarkMode,
+  Flex,
+  Grid,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Portal,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import type { HomeStats } from 'types/api/stats';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import dayjs from 'lib/date/dayjs';
+import Popover from 'ui/shared/chakra/Popover';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+import GasInfoTooltipRow from './GasInfoTooltipRow';
+import GasInfoUpdateTimer from './GasInfoUpdateTimer';
+
+interface Props {
+  children: React.ReactNode;
+  data: HomeStats;
+  dataUpdatedAt: number;
+  isOpen?: boolean; // for testing purposes only; the tests were flaky, i couldn't find a better way
+  placement?: PlacementWithLogical;
+}
+
+const feature = config.features.gasTracker;
+
+const GasInfoTooltip = ({ children, data, dataUpdatedAt, isOpen, placement }: Props) => {
+  const tooltipBg = useColorModeValue('gray.700', 'gray.900');
+
+  if (!data.gas_prices) {
+    return null;
+  }
+
+  const columnNum =
+    Object.values(data.gas_prices).some((price) => price?.fiat_price) &&
+    Object.values(data.gas_prices).some((price) => price?.price) &&
+    feature.isEnabled && feature.units.length === 2 ?
+      3 : 2;
+
+  return (
+    <Popover trigger="hover" isLazy isOpen={ isOpen } placement={ placement }>
+      <PopoverTrigger>
+        { children }
+      </PopoverTrigger>
+      <Portal>
+        <PopoverContent bgColor={ tooltipBg } w="auto">
+          <PopoverBody color="white">
+            <DarkMode>
+              <Flex flexDir="column" fontSize="xs" lineHeight={ 4 } rowGap={ 3 }>
+                { data.gas_price_updated_at && (
+                  <Flex justifyContent="space-between">
+                    <Box color="text_secondary">Last update</Box>
+                    <Flex color="text_secondary" justifyContent="flex-end" columnGap={ 2 } ml={ 3 }>
+                      { dayjs(data.gas_price_updated_at).format('MMM DD, HH:mm:ss') }
+                      { data.gas_prices_update_in !== 0 &&
+                            <GasInfoUpdateTimer key={ dataUpdatedAt } startTime={ dataUpdatedAt } duration={ data.gas_prices_update_in }/> }
+                    </Flex>
+                  </Flex>
+                ) }
+                <Grid rowGap={ 2 } columnGap="10px" gridTemplateColumns={ `repeat(${ columnNum }, minmax(min-content, auto))` }>
+                  <GasInfoTooltipRow name="Fast" info={ data.gas_prices.fast }/>
+                  <GasInfoTooltipRow name="Normal" info={ data.gas_prices.average }/>
+                  <GasInfoTooltipRow name="Slow" info={ data.gas_prices.slow }/>
+                </Grid>
+                <LinkInternal href={ route({ pathname: '/gas-tracker' }) }>
+                  Gas tracker overview
+                </LinkInternal>
+              </Flex>
+            </DarkMode>
+          </PopoverBody>
+        </PopoverContent>
+      </Portal>
+    </Popover>
+  );
+};
+
+export default React.memo(GasInfoTooltip);
diff --git a/ui/shared/gas/GasInfoTooltipRow.tsx b/ui/shared/gas/GasInfoTooltipRow.tsx
new file mode 100644
index 0000000000..3aae5220fb
--- /dev/null
+++ b/ui/shared/gas/GasInfoTooltipRow.tsx
@@ -0,0 +1,31 @@
+import { Box, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { GasPriceInfo } from 'types/api/stats';
+
+import { space } from 'lib/html-entities';
+import GasPrice from 'ui/shared/gas/GasPrice';
+
+interface Props {
+  name: string;
+  info: GasPriceInfo | null;
+}
+
+const GasInfoTooltipRow = ({ name, info }: Props) => {
+  return (
+    <>
+      <Box>
+        <chakra.span>{ name }</chakra.span>
+        { info && typeof info.time === 'number' && info.time > 0 && (
+          <chakra.span color="text_secondary">
+            { space }{ (info.time / 1000).toLocaleString(undefined, { maximumFractionDigits: 1 }) }s
+          </chakra.span>
+        ) }
+      </Box>
+      <GasPrice data={ info } textAlign="right"/>
+      <GasPrice data={ info } unitMode="secondary" color="text_secondary" textAlign="right"/>
+    </>
+  );
+};
+
+export default React.memo(GasInfoTooltipRow);
diff --git a/ui/shared/gas/GasInfoUpdateTimer.tsx b/ui/shared/gas/GasInfoUpdateTimer.tsx
new file mode 100644
index 0000000000..6357f9c0b8
--- /dev/null
+++ b/ui/shared/gas/GasInfoUpdateTimer.tsx
@@ -0,0 +1,48 @@
+import { CircularProgress, chakra, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import dayjs from 'lib/date/dayjs';
+
+interface Props {
+  startTime: number;
+  duration: number;
+  className?: string;
+  size?: number;
+}
+
+const getValue = (startDate: dayjs.Dayjs, duration: number) => {
+  const now = dayjs();
+  const diff = now.diff(startDate, 'ms');
+  const value = diff / duration * 100;
+
+  if (value >= 99) {
+    return 99;
+  }
+
+  return value;
+};
+
+const GasInfoUpdateTimer = ({ startTime, duration, className, size = 4 }: Props) => {
+  const [ value, setValue ] = React.useState(getValue(dayjs(startTime), duration));
+  const trackColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.100');
+
+  React.useEffect(() => {
+    const startDate = dayjs(startTime);
+
+    const intervalId = window.setInterval(() => {
+      const nextValue = getValue(startDate, duration);
+      setValue(nextValue);
+      if (nextValue === 99) {
+        window.clearInterval(intervalId);
+      }
+    }, 100);
+
+    return () => {
+      window.clearInterval(intervalId);
+    };
+  }, [ startTime, duration ]);
+
+  return <CircularProgress className={ className } value={ value } trackColor={ trackColor } size={ size }/>;
+};
+
+export default React.memo(chakra(GasInfoUpdateTimer));
diff --git a/ui/shared/gas/GasPrice.tsx b/ui/shared/gas/GasPrice.tsx
new file mode 100644
index 0000000000..a42553eb98
--- /dev/null
+++ b/ui/shared/gas/GasPrice.tsx
@@ -0,0 +1,82 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { GasPriceInfo } from 'types/api/stats';
+import type { GasUnit } from 'types/client/gasTracker';
+
+import config from 'configs/app';
+
+import formatGasValue from './formatGasValue';
+
+const feature = config.features.gasTracker;
+
+const UNITS_TO_API_FIELD_MAP: Record<GasUnit, 'price' | 'fiat_price'> = {
+  gwei: 'price',
+  usd: 'fiat_price',
+};
+
+interface Props {
+  data: GasPriceInfo | null;
+  className?: string;
+  unitMode?: 'primary' | 'secondary';
+  prefix?: string;
+}
+
+const GasPrice = ({ data, prefix, className, unitMode = 'primary' }: Props) => {
+  if (!data || !feature.isEnabled) {
+    return null;
+  }
+
+  switch (unitMode) {
+    case 'secondary': {
+      const primaryUnits = feature.units[0];
+      const secondaryUnits = feature.units[1];
+
+      if (!secondaryUnits) {
+        return null;
+      }
+
+      const primaryUnitsValue = data[UNITS_TO_API_FIELD_MAP[primaryUnits]];
+      if (!primaryUnitsValue) {
+        // in this case we display values in secondary untis in primary mode as fallback
+        return null;
+      }
+
+      const secondaryUnitsValue = data[UNITS_TO_API_FIELD_MAP[secondaryUnits]];
+      if (!secondaryUnitsValue) {
+        return null;
+      }
+
+      const formattedValue = formatGasValue(data, secondaryUnits);
+      return <span className={ className }>{ prefix }{ formattedValue }</span>;
+    }
+    case 'primary': {
+      const primaryUnits = feature.units[0];
+      const secondaryUnits = feature.units[1];
+
+      if (!primaryUnits) {
+        // this should never happen since feature will be disabled if there are no units at all
+        return null;
+      }
+
+      const value = data[UNITS_TO_API_FIELD_MAP[primaryUnits]];
+      if (!value) {
+        // in primary mode we want to fallback to secondary units if value in primary units are not available
+        // unless there are no secondary units
+        const valueInSecondaryUnits = data[UNITS_TO_API_FIELD_MAP[secondaryUnits]];
+
+        if (!secondaryUnits || !valueInSecondaryUnits) {
+          // in primary mode we always want to show something
+          // this will return "N/A <units>"
+          return <span className={ className }>{ formatGasValue(data, primaryUnits) }</span>;
+        } else {
+          return <span className={ className }>{ prefix }{ formatGasValue(data, secondaryUnits) }</span>;
+        }
+      }
+
+      return <span className={ className }>{ prefix }{ formatGasValue(data, primaryUnits) }</span>;
+    }
+  }
+};
+
+export default chakra(GasPrice);
diff --git a/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_all-data-1.png b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_all-data-1.png
new file mode 100644
index 0000000000..a89617a52e
Binary files /dev/null and b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_all-data-1.png differ
diff --git a/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_no-data-1.png b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_no-data-1.png
new file mode 100644
index 0000000000..9fa5936e9e
Binary files /dev/null and b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_no-data-1.png differ
diff --git a/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_one-unit-with-data-1.png b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_one-unit-with-data-1.png
new file mode 100644
index 0000000000..516088264a
Binary files /dev/null and b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_one-unit-with-data-1.png differ
diff --git a/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_one-unit-without-data-1.png b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_one-unit-without-data-1.png
new file mode 100644
index 0000000000..bef3181bea
Binary files /dev/null and b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_one-unit-without-data-1.png differ
diff --git a/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_without-primary-unit-price-1.png b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_without-primary-unit-price-1.png
new file mode 100644
index 0000000000..516088264a
Binary files /dev/null and b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_without-primary-unit-price-1.png differ
diff --git a/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_without-secondary-unit-price-1.png b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_without-secondary-unit-price-1.png
new file mode 100644
index 0000000000..5dff6238d4
Binary files /dev/null and b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_without-secondary-unit-price-1.png differ
diff --git a/ui/shared/gas/formatGasValue.ts b/ui/shared/gas/formatGasValue.ts
new file mode 100644
index 0000000000..8c824ca742
--- /dev/null
+++ b/ui/shared/gas/formatGasValue.ts
@@ -0,0 +1,32 @@
+import type { GasPriceInfo } from 'types/api/stats';
+import type { GasUnit } from 'types/client/gasTracker';
+
+import { currencyUnits } from 'lib/units';
+
+export default function formatGasValue(data: GasPriceInfo, unit: GasUnit) {
+  switch (unit) {
+    case 'gwei': {
+      if (!data.price) {
+        return `N/A ${ currencyUnits.gwei }`;
+      }
+
+      if (Number(data.price) < 0.1) {
+        return `< 0.1 ${ currencyUnits.gwei }`;
+      }
+
+      return `${ Number(data.price).toLocaleString(undefined, { maximumFractionDigits: 1 }) } ${ currencyUnits.gwei }`;
+    }
+
+    case 'usd': {
+      if (!data.fiat_price) {
+        return `$N/A`;
+      }
+
+      if (Number(data.fiat_price) < 0.01) {
+        return `< $0.01`;
+      }
+
+      return `$${ Number(data.fiat_price).toLocaleString(undefined, { maximumFractionDigits: 2 }) }`;
+    }
+  }
+}
diff --git a/ui/shared/layout/Layout.pw.tsx b/ui/shared/layout/Layout.pw.tsx
index 3295dccd1c..4f5fa38fe7 100644
--- a/ui/shared/layout/Layout.pw.tsx
+++ b/ui/shared/layout/Layout.pw.tsx
@@ -1,35 +1,36 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { indexingStatus } from 'mocks/stats/index';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import Layout from './Layout';
 
-const API_URL = buildApiUrl('homepage_indexing_status');
-
-const test = base.extend({
-  context: contextWithEnvs([
-    {
-      name: 'NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE',
-      value: 'We are currently lacking pictures of <i>ducks</i>. Please <a href="mailto:duck@blockscout.com">send</a> us one.',
-    },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
+test('base view +@mobile', async({ render, mockEnvs, mockApiResponse }) => {
+  await mockEnvs([
+    [
+      'NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE',
+      'We are currently lacking pictures of <i>ducks</i>. Please <a href="mailto:duck@blockscout.com">send</a> us one.',
+    ],
+  ]);
+  await mockApiResponse('homepage_indexing_status', indexingStatus);
+  const component = await render(<Layout>Page Content</Layout>);
+  await expect(component).toHaveScreenshot();
 });
 
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ finished_indexing_blocks: false, indexed_blocks_ratio: 0.1 }),
-  }));
+test.describe('xxl screen', () => {
+  test.use({ viewport: pwConfig.viewport.xxl });
 
-  const component = await mount(
-    <TestApp>
-      <Layout>Page Content</Layout>
-    </TestApp>,
-  );
+  test('vertical navigation', async({ render }) => {
+    const component = await render(<Layout>Page Content</Layout>);
+    await expect(component).toHaveScreenshot();
+  });
 
-  await expect(component).toHaveScreenshot();
+  test('horizontal navigation', async({ render, mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_NAVIGATION_LAYOUT', 'horizontal' ],
+    ]);
+    const component = await render(<Layout>Page Content</Layout>);
+    await expect(component).toHaveScreenshot();
+  });
 });
diff --git a/ui/shared/layout/Layout.tsx b/ui/shared/layout/Layout.tsx
index 20a853939a..5a37df0047 100644
--- a/ui/shared/layout/Layout.tsx
+++ b/ui/shared/layout/Layout.tsx
@@ -13,6 +13,7 @@ const LayoutDefault = ({ children }: Props) => {
   return (
     <Layout.Container>
       <Layout.TopRow/>
+      <Layout.NavBar/>
       <HeaderMobile/>
       <Layout.MainArea>
         <Layout.SideBar/>
diff --git a/ui/shared/layout/LayoutApp.tsx b/ui/shared/layout/LayoutApp.tsx
index 7f02e34df8..3ac8e463d8 100644
--- a/ui/shared/layout/LayoutApp.tsx
+++ b/ui/shared/layout/LayoutApp.tsx
@@ -3,30 +3,33 @@ import React from 'react';
 import type { Props } from './types';
 
 import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
-import HeaderDesktop from 'ui/snippets/header/HeaderDesktop';
 import HeaderMobile from 'ui/snippets/header/HeaderMobile';
 
 import * as Layout from './components';
 
 const LayoutDefault = ({ children }: Props) => {
   return (
-    <Layout.Container>
+    <Layout.Container
+      overflowY="hidden"
+      height="$100vh"
+      display="flex"
+      flexDirection="column"
+    >
       <Layout.TopRow/>
-      <HeaderMobile/>
-      <Layout.MainArea>
+      <HeaderMobile hideSearchBar/>
+      <Layout.MainArea minH="auto" flex={ 1 }>
         <Layout.MainColumn
-          paddingTop={{ base: 16, lg: 6 }}
+          paddingTop={{ base: 0, lg: 0 }}
+          paddingBottom={ 0 }
           paddingX={{ base: 4, lg: 6 }}
         >
-          <HeaderDesktop isMarketplaceAppPage/>
           <AppErrorBoundary>
-            <Layout.Content pt={{ base: 0, lg: 6 }}>
+            <Layout.Content pt={{ base: 0, lg: 2 }} flexGrow={ 1 }>
               { children }
             </Layout.Content>
           </AppErrorBoundary>
         </Layout.MainColumn>
       </Layout.MainArea>
-      <Layout.Footer/>
     </Layout.Container>
   );
 };
diff --git a/ui/shared/layout/LayoutError.pw.tsx b/ui/shared/layout/LayoutError.pw.tsx
index 6fe13e10bd..b5608d645b 100644
--- a/ui/shared/layout/LayoutError.pw.tsx
+++ b/ui/shared/layout/LayoutError.pw.tsx
@@ -1,27 +1,17 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { indexingStatus } from 'mocks/stats/index';
+import { test, expect } from 'playwright/lib';
 
 import LayoutHome from './LayoutHome';
 
-const API_URL = buildApiUrl('homepage_indexing_status');
-
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ finished_indexing_blocks: false, indexed_blocks_ratio: 0.1 }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LayoutHome>
-        <Box pt={ 10 }>Error</Box>
-      </LayoutHome>
-    </TestApp>,
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('homepage_indexing_status', indexingStatus);
+  const component = await render(
+    <LayoutHome>
+      <Box pt={ 10 }>Error</Box>
+    </LayoutHome>,
   );
-
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/layout/LayoutError.tsx b/ui/shared/layout/LayoutError.tsx
index 626be13d47..b404cfd2ba 100644
--- a/ui/shared/layout/LayoutError.tsx
+++ b/ui/shared/layout/LayoutError.tsx
@@ -13,6 +13,7 @@ const LayoutError = ({ children }: Props) => {
   return (
     <Layout.Container>
       <Layout.TopRow/>
+      <Layout.NavBar/>
       <HeaderMobile/>
       <Layout.MainArea>
         <Layout.SideBar/>
diff --git a/ui/shared/layout/LayoutHome.pw.tsx b/ui/shared/layout/LayoutHome.pw.tsx
index 94b7b0cdcd..aca7c54997 100644
--- a/ui/shared/layout/LayoutHome.pw.tsx
+++ b/ui/shared/layout/LayoutHome.pw.tsx
@@ -1,24 +1,12 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { indexingStatus } from 'mocks/stats/index';
+import { test, expect } from 'playwright/lib';
 
 import LayoutHome from './LayoutHome';
 
-const API_URL = buildApiUrl('homepage_indexing_status');
-
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ finished_indexing_blocks: false, indexed_blocks_ratio: 0.1 }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LayoutHome>Page Content</LayoutHome>
-    </TestApp>,
-  );
-
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('homepage_indexing_status', indexingStatus);
+  const component = await render(<LayoutHome>Page Content</LayoutHome>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/layout/LayoutHome.tsx b/ui/shared/layout/LayoutHome.tsx
index 44562b3dbd..ef2c6c4d07 100644
--- a/ui/shared/layout/LayoutHome.tsx
+++ b/ui/shared/layout/LayoutHome.tsx
@@ -12,11 +12,12 @@ const LayoutHome = ({ children }: Props) => {
   return (
     <Layout.Container>
       <Layout.TopRow/>
-      <HeaderMobile isHomePage/>
+      <Layout.NavBar/>
+      <HeaderMobile hideSearchBar/>
       <Layout.MainArea>
         <Layout.SideBar/>
         <Layout.MainColumn
-          paddingTop={{ base: 6, lg: 9 }}
+          paddingTop={{ base: 3, lg: 6 }}
         >
           <HeaderAlert/>
           <AppErrorBoundary>
diff --git a/ui/shared/layout/LayoutSearchResults.tsx b/ui/shared/layout/LayoutSearchResults.tsx
index 2f9614cb2e..3f3a607026 100644
--- a/ui/shared/layout/LayoutSearchResults.tsx
+++ b/ui/shared/layout/LayoutSearchResults.tsx
@@ -9,6 +9,7 @@ const LayoutSearchResults = ({ children }: Props) => {
   return (
     <Layout.Container>
       <Layout.TopRow/>
+      <Layout.NavBar/>
       { children }
     </Layout.Container>
   );
diff --git a/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_base-view-mobile-1.png b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_base-view-mobile-1.png
index 20b78fb238..b3bb7d5b65 100644
Binary files a/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_base-view-mobile-1.png and b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-horizontal-navigation-1.png b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-horizontal-navigation-1.png
new file mode 100644
index 0000000000..acadfd83c5
Binary files /dev/null and b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-horizontal-navigation-1.png differ
diff --git a/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-vertical-navigation-1.png b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-vertical-navigation-1.png
new file mode 100644
index 0000000000..99318f6b9c
Binary files /dev/null and b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-vertical-navigation-1.png differ
diff --git a/ui/shared/layout/__screenshots__/Layout.pw.tsx_mobile_base-view-mobile-1.png b/ui/shared/layout/__screenshots__/Layout.pw.tsx_mobile_base-view-mobile-1.png
index 7d6a662434..def277edeb 100644
Binary files a/ui/shared/layout/__screenshots__/Layout.pw.tsx_mobile_base-view-mobile-1.png and b/ui/shared/layout/__screenshots__/Layout.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/shared/layout/__screenshots__/LayoutError.pw.tsx_default_base-view-mobile-1.png b/ui/shared/layout/__screenshots__/LayoutError.pw.tsx_default_base-view-mobile-1.png
index f80dcddd6d..179b29d536 100644
Binary files a/ui/shared/layout/__screenshots__/LayoutError.pw.tsx_default_base-view-mobile-1.png and b/ui/shared/layout/__screenshots__/LayoutError.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/shared/layout/__screenshots__/LayoutError.pw.tsx_mobile_base-view-mobile-1.png b/ui/shared/layout/__screenshots__/LayoutError.pw.tsx_mobile_base-view-mobile-1.png
index 0f98a41799..46f3f96442 100644
Binary files a/ui/shared/layout/__screenshots__/LayoutError.pw.tsx_mobile_base-view-mobile-1.png and b/ui/shared/layout/__screenshots__/LayoutError.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/shared/layout/__screenshots__/LayoutHome.pw.tsx_default_base-view-mobile-1.png b/ui/shared/layout/__screenshots__/LayoutHome.pw.tsx_default_base-view-mobile-1.png
index d90af58a2a..923b92e37d 100644
Binary files a/ui/shared/layout/__screenshots__/LayoutHome.pw.tsx_default_base-view-mobile-1.png and b/ui/shared/layout/__screenshots__/LayoutHome.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/shared/layout/__screenshots__/LayoutHome.pw.tsx_mobile_base-view-mobile-1.png b/ui/shared/layout/__screenshots__/LayoutHome.pw.tsx_mobile_base-view-mobile-1.png
index af8c052e3e..121a30044c 100644
Binary files a/ui/shared/layout/__screenshots__/LayoutHome.pw.tsx_mobile_base-view-mobile-1.png and b/ui/shared/layout/__screenshots__/LayoutHome.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/shared/layout/components/Container.tsx b/ui/shared/layout/components/Container.tsx
index 68991b10de..62678c70d0 100644
--- a/ui/shared/layout/components/Container.tsx
+++ b/ui/shared/layout/components/Container.tsx
@@ -1,16 +1,24 @@
-import { Box } from '@chakra-ui/react';
+import { Box, chakra, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 interface Props {
   children: React.ReactNode;
+  className?: string;
 }
 
-const Container = ({ children }: Props) => {
+const Container = ({ children, className }: Props) => {
+  const bgColor = useColorModeValue('white', 'black');
+
   return (
-    <Box minWidth={{ base: '100vw', lg: 'fit-content' }}>
+    <Box
+      className={ className }
+      minWidth={{ base: '100vw', lg: 'fit-content' }}
+      m="0 auto"
+      bgColor={ bgColor }
+    >
       { children }
     </Box>
   );
 };
 
-export default React.memo(Container);
+export default React.memo(chakra(Container));
diff --git a/ui/shared/layout/components/Content.tsx b/ui/shared/layout/components/Content.tsx
index 4f6ddf23c1..ffb215371c 100644
--- a/ui/shared/layout/components/Content.tsx
+++ b/ui/shared/layout/components/Content.tsx
@@ -8,7 +8,7 @@ interface Props {
 
 const Content = ({ children, className }: Props) => {
   return (
-    <Box pt={{ base: 0, lg: '52px' }} as="main" className={ className }>
+    <Box pt={{ base: 0, lg: 6 }} as="main" flexGrow={ 1 } className={ className }>
       { children }
     </Box>
   );
diff --git a/ui/shared/layout/components/MainArea.tsx b/ui/shared/layout/components/MainArea.tsx
index 804577425f..632939e5db 100644
--- a/ui/shared/layout/components/MainArea.tsx
+++ b/ui/shared/layout/components/MainArea.tsx
@@ -1,16 +1,34 @@
-import { Flex } from '@chakra-ui/react';
+import { Flex, chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import config from 'configs/app';
+
+import { CONTENT_MAX_WIDTH } from '../utils';
+
 interface Props {
   children: React.ReactNode;
+  className?: string;
 }
 
-const MainArea = ({ children }: Props) => {
+const TOP_BAR_HEIGHT = 36;
+const HORIZONTAL_NAV_BAR_HEIGHT = config.UI.navigation.layout === 'horizontal' ? 49 : 0;
+
+const MainArea = ({ children, className }: Props) => {
   return (
-    <Flex w="100%" minH="calc(100vh - 36px)" alignItems="stretch">
+    <Flex
+      className={ className }
+      w="100%"
+      maxW={ `${ CONTENT_MAX_WIDTH }px` }
+      m="0 auto"
+      minH={{
+        base: `calc(100vh - ${ TOP_BAR_HEIGHT }px)`,
+        lg: `calc(100vh - ${ TOP_BAR_HEIGHT + HORIZONTAL_NAV_BAR_HEIGHT }px)`,
+      }}
+      alignItems="stretch"
+    >
       { children }
     </Flex>
   );
 };
 
-export default React.memo(MainArea);
+export default React.memo(chakra(MainArea));
diff --git a/ui/shared/layout/components/MainColumn.tsx b/ui/shared/layout/components/MainColumn.tsx
index 4129cd16e9..75133c9651 100644
--- a/ui/shared/layout/components/MainColumn.tsx
+++ b/ui/shared/layout/components/MainColumn.tsx
@@ -1,6 +1,8 @@
 import { Flex, chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import config from 'configs/app';
+
 interface Props {
   className?: string;
   children: React.ReactNode;
@@ -12,10 +14,11 @@ const MainColumn = ({ children, className }: Props) => {
       className={ className }
       flexDir="column"
       flexGrow={ 1 }
-      w={{ base: '100%', lg: 'auto' }}
-      paddingX={{ base: 4, lg: 12 }}
-      paddingTop={{ base: `${ 32 + 60 }px`, lg: 9 }} // 32px is top padding of content area, 60px is search bar height
-      paddingBottom={ 10 }
+      w={{ base: '100%', lg: config.UI.navigation.layout === 'horizontal' ? '100%' : 'auto' }}
+      paddingX={{ base: 3, lg: config.UI.navigation.layout === 'horizontal' ? 6 : 12 }}
+      paddingRight={{ '2xl': 6 }}
+      paddingTop={{ base: `${ 12 + 52 }px`, lg: 6 }} // 12px is top padding of content area, 52px is search bar height
+      paddingBottom={ 8 }
     >
       { children }
     </Flex>
diff --git a/ui/shared/layout/components/NavBar.tsx b/ui/shared/layout/components/NavBar.tsx
new file mode 100644
index 0000000000..62986eae92
--- /dev/null
+++ b/ui/shared/layout/components/NavBar.tsx
@@ -0,0 +1,6 @@
+import config from 'configs/app';
+import NavigationDesktop from 'ui/snippets/navigation/horizontal/NavigationDesktop';
+
+const EmptyComponent = () => null;
+
+export default config.UI.navigation.layout === 'horizontal' ? NavigationDesktop : EmptyComponent;
diff --git a/ui/shared/layout/components/SideBar.tsx b/ui/shared/layout/components/SideBar.tsx
index 577c21bbf7..840d1d6a5a 100644
--- a/ui/shared/layout/components/SideBar.tsx
+++ b/ui/shared/layout/components/SideBar.tsx
@@ -1,3 +1,6 @@
-import NavigationDesktop from 'ui/snippets/navigation/NavigationDesktop';
+import config from 'configs/app';
+import NavigationDesktop from 'ui/snippets/navigation/vertical/NavigationDesktop';
 
-export default NavigationDesktop;
+const EmptyComponent = () => null;
+
+export default config.UI.navigation.layout === 'horizontal' ? EmptyComponent : NavigationDesktop;
diff --git a/ui/shared/layout/components/index.tsx b/ui/shared/layout/components/index.tsx
index 2818e9c5c0..67f2dfaf5e 100644
--- a/ui/shared/layout/components/index.tsx
+++ b/ui/shared/layout/components/index.tsx
@@ -5,6 +5,7 @@ import Container from './Container';
 import Content from './Content';
 import MainArea from './MainArea';
 import MainColumn from './MainColumn';
+import NavBar from './NavBar';
 import SideBar from './SideBar';
 
 export {
@@ -12,6 +13,7 @@ export {
   Content,
   MainArea,
   SideBar,
+  NavBar,
   MainColumn,
   Footer,
   TopRow,
diff --git a/ui/shared/layout/types.ts b/ui/shared/layout/types.ts
index d1fb746a77..57b333008f 100644
--- a/ui/shared/layout/types.ts
+++ b/ui/shared/layout/types.ts
@@ -1,3 +1,5 @@
+import type React from 'react';
+
 export interface Props {
   children: React.ReactNode;
 }
diff --git a/ui/shared/layout/utils.ts b/ui/shared/layout/utils.ts
new file mode 100644
index 0000000000..e0b6e2c1a3
--- /dev/null
+++ b/ui/shared/layout/utils.ts
@@ -0,0 +1,6 @@
+import config from 'configs/app';
+
+const maxWidthVerticalNavigation = config.UI.maxContentWidth ? 1_920 : 10_000;
+const maxWidthHorizontalNavigation = config.UI.maxContentWidth ? 1_440 : 10_000;
+
+export const CONTENT_MAX_WIDTH = config.UI.navigation.layout === 'horizontal' ? maxWidthHorizontalNavigation : maxWidthVerticalNavigation;
diff --git a/ui/shared/links/LinkExternal.tsx b/ui/shared/links/LinkExternal.tsx
new file mode 100644
index 0000000000..7070f81981
--- /dev/null
+++ b/ui/shared/links/LinkExternal.tsx
@@ -0,0 +1,54 @@
+import type { LinkProps } from '@chakra-ui/react';
+import { Link, chakra, Box, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+import type { Variants } from './useLinkStyles';
+import { useLinkStyles } from './useLinkStyles';
+
+interface Props {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+  isLoading?: boolean;
+  variant?: Variants;
+  iconColor?: LinkProps['color'];
+  onClick?: LinkProps['onClick'];
+}
+
+const LinkExternal = ({ href, children, className, isLoading, variant, iconColor, onClick }: Props) => {
+  const commonProps = {
+    display: 'inline-block',
+    alignItems: 'center',
+  };
+
+  const styleProps = useLinkStyles(commonProps, variant);
+
+  if (isLoading) {
+    if (variant === 'subtle') {
+      return (
+        <Skeleton className={ className } { ...styleProps } bgColor="inherit">
+          { children }
+          <Box boxSize={ 3 } display="inline-block"/>
+        </Skeleton>
+      );
+    }
+
+    return (
+      <Box className={ className } { ...styleProps }>
+        { children }
+        <Skeleton boxSize={ 3 } verticalAlign="middle" display="inline-block"/>
+      </Box>
+    );
+  }
+
+  return (
+    <Link className={ className } { ...styleProps } target="_blank" href={ href } onClick={ onClick }>
+      { children }
+      <IconSvg name="link_external" boxSize={ 3 } verticalAlign="middle" color={ iconColor ?? 'icon_link_external' } flexShrink={ 0 }/>
+    </Link>
+  );
+};
+
+export default React.memo(chakra(LinkExternal));
diff --git a/ui/shared/links/LinkInternal.tsx b/ui/shared/links/LinkInternal.tsx
new file mode 100644
index 0000000000..e98214819f
--- /dev/null
+++ b/ui/shared/links/LinkInternal.tsx
@@ -0,0 +1,35 @@
+import type { LinkProps, FlexProps } from '@chakra-ui/react';
+import { Flex, Link } from '@chakra-ui/react';
+import type { LinkProps as NextLinkProps } from 'next/link';
+import NextLink from 'next/link';
+import type { LegacyRef } from 'react';
+import React from 'react';
+
+import type { Variants } from './useLinkStyles';
+import { useLinkStyles } from './useLinkStyles';
+
+type Props = LinkProps & {
+  variant?: Variants;
+  isLoading?: boolean;
+  scroll?: boolean;
+};
+
+const LinkInternal = ({ isLoading, variant, scroll = true, ...props }: Props, ref: LegacyRef<HTMLAnchorElement>) => {
+  const styleProps = useLinkStyles({}, variant);
+
+  if (isLoading) {
+    return <Flex alignItems="center" { ...props as FlexProps } { ...styleProps }>{ props.children }</Flex>;
+  }
+
+  if (!props.href) {
+    return <Link { ...props } ref={ ref } { ...styleProps }/>;
+  }
+
+  return (
+    <NextLink href={ props.href as NextLinkProps['href'] } passHref target={ props.target } legacyBehavior scroll={ scroll }>
+      <Link { ...props } ref={ ref } { ...styleProps }/>
+    </NextLink>
+  );
+};
+
+export default React.memo(React.forwardRef(LinkInternal));
diff --git a/ui/shared/links/LinkNewTab.tsx b/ui/shared/links/LinkNewTab.tsx
new file mode 100644
index 0000000000..7aafc2959a
--- /dev/null
+++ b/ui/shared/links/LinkNewTab.tsx
@@ -0,0 +1,36 @@
+import { chakra, IconButton, Tooltip, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from '../IconSvg';
+
+interface Props {
+  className?: string;
+  label?: string;
+  href: string;
+}
+
+const LinkNewTab = ({ className, label, href }: Props) => {
+  const iconColor = useColorModeValue('gray.400', 'gray.500');
+
+  return (
+    <Tooltip label={ label }>
+      <IconButton
+        aria-label={ label ?? 'Open link' }
+        icon={ <IconSvg name="open-link" boxSize={ 5 }/> }
+        w="20px"
+        h="20px"
+        color={ iconColor }
+        variant="simple"
+        display="inline-block"
+        flexShrink={ 0 }
+        as="a"
+        href={ href }
+        target="_blank"
+        className={ className }
+        borderRadius={ 0 }
+      />
+    </Tooltip>
+  );
+};
+
+export default React.memo(chakra(LinkNewTab));
diff --git a/ui/shared/links/useLinkStyles.ts b/ui/shared/links/useLinkStyles.ts
new file mode 100644
index 0000000000..6f9e895446
--- /dev/null
+++ b/ui/shared/links/useLinkStyles.ts
@@ -0,0 +1,24 @@
+import type { ChakraProps } from '@chakra-ui/react';
+import { useColorModeValue } from '@chakra-ui/react';
+
+export type Variants = 'subtle';
+
+export function useLinkStyles(commonProps: ChakraProps, variant?: Variants) {
+  const subtleLinkBg = useColorModeValue('gray.100', 'gray.700');
+
+  switch (variant) {
+    case 'subtle': {
+      return {
+        ...commonProps,
+        px: '10px',
+        py: '6px',
+        bgColor: subtleLinkBg,
+        borderRadius: 'base',
+      };
+    }
+
+    default:{
+      return commonProps;
+    }
+  }
+}
diff --git a/ui/shared/logs/LogDecodedInputData.pw.tsx b/ui/shared/logs/LogDecodedInputData.pw.tsx
index ea58b4212e..d5cd7b2201 100644
--- a/ui/shared/logs/LogDecodedInputData.pw.tsx
+++ b/ui/shared/logs/LogDecodedInputData.pw.tsx
@@ -1,25 +1,16 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as mocks from 'mocks/txs/decodedInputData';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import LogDecodedInputData from './LogDecodedInputData';
 
-test('with indexed fields +@mobile +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <LogDecodedInputData data={ mocks.withIndexedFields }/>
-    </TestApp>,
-  );
+test('with indexed fields +@mobile +@dark-mode', async({ render }) => {
+  const component = await render(<LogDecodedInputData data={ mocks.withIndexedFields }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('without indexed fields +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <LogDecodedInputData data={ mocks.withoutIndexedFields }/>
-    </TestApp>,
-  );
+test('without indexed fields +@mobile', async({ render }) => {
+  const component = await render(<LogDecodedInputData data={ mocks.withoutIndexedFields }/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/logs/LogDecodedInputData.tsx b/ui/shared/logs/LogDecodedInputData.tsx
index a1022b94a6..a616e16290 100644
--- a/ui/shared/logs/LogDecodedInputData.tsx
+++ b/ui/shared/logs/LogDecodedInputData.tsx
@@ -2,17 +2,27 @@ import React from 'react';
 
 import type { DecodedInput } from 'types/api/decodedInput';
 
+import useIsMobile from 'lib/hooks/useIsMobile';
+
 import LogDecodedInputDataHeader from './LogDecodedInputDataHeader';
 import LogDecodedInputDataTable from './LogDecodedInputDataTable';
 interface Props {
   data: DecodedInput;
   isLoading?: boolean;
+  rightSlot?: React.ReactNode;
 }
 
-const LogDecodedInputData = ({ data, isLoading }: Props) => {
+const LogDecodedInputData = ({ data, isLoading, rightSlot }: Props) => {
+  const isMobile = useIsMobile();
   return (
     <>
-      <LogDecodedInputDataHeader methodId={ data.method_id } methodCall={ data.method_call } isLoading={ isLoading }/>
+      { isMobile ? rightSlot : null }
+      <LogDecodedInputDataHeader
+        methodId={ data.method_id }
+        methodCall={ data.method_call }
+        isLoading={ isLoading }
+        rightSlot={ isMobile ? null : rightSlot }
+      />
       { data.parameters.length > 0 && <LogDecodedInputDataTable data={ data.parameters } isLoading={ isLoading }/> }
     </>
   );
diff --git a/ui/shared/logs/LogDecodedInputDataHeader.tsx b/ui/shared/logs/LogDecodedInputDataHeader.tsx
index 653382b18b..2fe2065b3a 100644
--- a/ui/shared/logs/LogDecodedInputDataHeader.tsx
+++ b/ui/shared/logs/LogDecodedInputDataHeader.tsx
@@ -1,39 +1,52 @@
 import { Divider, Flex, Skeleton, VStack } from '@chakra-ui/react';
 import React from 'react';
 
+import Tag from 'ui/shared/chakra/Tag';
+
 interface Props {
   methodId: string;
   methodCall: string;
   isLoading?: boolean;
+  rightSlot?: React.ReactNode;
 }
 
-const Item = ({ label, text, isLoading }: { label: string; text: string; isLoading?: boolean}) => {
+const Item = ({ label, children, isLoading }: { label: string; children: React.ReactNode; isLoading?: boolean }) => {
   return (
     <Flex
+      w="100%"
       columnGap={ 5 }
       rowGap={ 2 }
       px={{ base: 0, lg: 4 }}
       flexDir={{ base: 'column', lg: 'row' }}
-      alignItems="flex-start"
+      alignItems={{ base: 'flex-start', lg: 'center' }}
     >
       <Skeleton fontWeight={ 600 } w={{ base: 'auto', lg: '80px' }} flexShrink={ 0 } isLoaded={ !isLoading }>
         { label }
       </Skeleton >
-      <Skeleton isLoaded={ !isLoading } whiteSpace="pre-wrap">{ text }</Skeleton>
+      { children }
     </Flex>
   );
 };
 
-const LogDecodedInputDataHeader = ({ methodId, methodCall, isLoading }: Props) => {
+const LogDecodedInputDataHeader = ({ methodId, methodCall, isLoading, rightSlot }: Props) => {
   return (
     <VStack
       align="flex-start"
       divider={ <Divider/> }
       fontSize="sm"
       lineHeight={ 5 }
+      flexGrow={ 1 }
+      w="100%"
     >
-      <Item label="Method id" text={ methodId } isLoading={ isLoading }/>
-      <Item label="Call" text={ methodCall } isLoading={ isLoading }/>
+      <Flex columnGap={ 2 } w="100%">
+        <Item label="Method id" isLoading={ isLoading }>
+          <Tag isLoading={ isLoading }>{ methodId }</Tag>
+        </Item>
+        { rightSlot }
+      </Flex>
+      <Item label="Call" isLoading={ isLoading }>
+        <Skeleton isLoaded={ !isLoading } whiteSpace="pre-wrap" w="100%">{ methodCall }</Skeleton>
+      </Item>
     </VStack>
   );
 };
diff --git a/ui/shared/logs/LogDecodedInputDataTable.tsx b/ui/shared/logs/LogDecodedInputDataTable.tsx
index f712836a50..07505d8803 100644
--- a/ui/shared/logs/LogDecodedInputDataTable.tsx
+++ b/ui/shared/logs/LogDecodedInputDataTable.tsx
@@ -33,7 +33,7 @@ const Row = ({ name, type, indexed, value, isLoading }: ArrayElement<DecodedInpu
     if (type === 'address' && typeof value === 'string') {
       return (
         <AddressEntity
-          address={{ hash: value, name: '', implementation_name: null, is_contract: false, is_verified: false }}
+          address={{ hash: value, name: '' }}
           isLoading={ isLoading }
         />
       );
diff --git a/ui/shared/logs/LogItem.pw.tsx b/ui/shared/logs/LogItem.pw.tsx
index d537307308..2c30eb3b8b 100644
--- a/ui/shared/logs/LogItem.pw.tsx
+++ b/ui/shared/logs/LogItem.pw.tsx
@@ -1,9 +1,8 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as addressMocks from 'mocks/address/address';
 import * as inputDataMocks from 'mocks/txs/decodedInputData';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import LogItem from './LogItem';
 
@@ -15,36 +14,48 @@ const TOPICS = [
 ];
 const DATA = '0x0000000000000000000000000000000000000000000000000070265bf0112cee';
 
-test('with decoded input data +@mobile +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <LogItem
-        index={ 42 }
-        decoded={ inputDataMocks.withIndexedFields }
-        address={{ ...addressMocks.withName, is_verified: true }}
-        topics={ TOPICS }
-        data={ DATA }
-        type="transaction"
-        tx_hash={ null }
-      />
-    </TestApp>,
+test('with decoded input data +@mobile +@dark-mode', async({ render }) => {
+  const component = await render(
+    <LogItem
+      index={ 42 }
+      decoded={ inputDataMocks.withIndexedFields }
+      address={{ ...addressMocks.withName, is_verified: true }}
+      topics={ TOPICS }
+      data={ DATA }
+      type="transaction"
+      transaction_hash={ null }
+    />,
   );
   await expect(component).toHaveScreenshot();
 });
 
-test('without decoded input data +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <LogItem
-        index={ 42 }
-        decoded={ null }
-        address={ addressMocks.withoutName }
-        topics={ TOPICS }
-        data={ DATA }
-        type="transaction"
-        tx_hash={ null }
-      />
-    </TestApp>,
+test('without decoded input data +@mobile', async({ render }) => {
+  const component = await render(
+    <LogItem
+      index={ 42 }
+      decoded={ null }
+      address={ addressMocks.withoutName }
+      topics={ TOPICS }
+      data={ DATA }
+      type="transaction"
+      transaction_hash={ null }
+    />,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('with default data type', async({ render }) => {
+  const component = await render(
+    <LogItem
+      index={ 42 }
+      decoded={ null }
+      address={ addressMocks.withoutName }
+      topics={ TOPICS }
+      data="0x6475636b"
+      type="address"
+      transaction_hash="0x404bd417203769f968aacb1d66211510db86b81303b0c68283b4eb4572e6845c"
+      defaultDataType="UTF-8"
+    />,
   );
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/logs/LogItem.tsx b/ui/shared/logs/LogItem.tsx
index 184c1b8a60..05bc40ba41 100644
--- a/ui/shared/logs/LogItem.tsx
+++ b/ui/shared/logs/LogItem.tsx
@@ -11,10 +11,13 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
 import LogTopic from 'ui/shared/logs/LogTopic';
+import type { DataType } from 'ui/shared/RawInputData';
+import RawInputData from 'ui/shared/RawInputData';
 
 type Props = Log & {
   type: 'address' | 'transaction';
   isLoading?: boolean;
+  defaultDataType?: DataType;
 };
 
 const RowHeader = ({ children, isLoading }: { children: React.ReactNode; isLoading?: boolean }) => (
@@ -23,7 +26,7 @@ const RowHeader = ({ children, isLoading }: { children: React.ReactNode; isLoadi
   </GridItem>
 );
 
-const LogItem = ({ address, index, topics, data, decoded, type, tx_hash: txHash, isLoading }: Props) => {
+const LogItem = ({ address, index, topics, data, decoded, type, transaction_hash: txHash, isLoading, defaultDataType }: Props) => {
 
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const dataBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
@@ -53,7 +56,7 @@ const LogItem = ({ address, index, topics, data, decoded, type, tx_hash: txHash,
       ) }
       { hasTxInfo ? <RowHeader isLoading={ isLoading }>Transaction</RowHeader> : <RowHeader isLoading={ isLoading }>Address</RowHeader> }
       <GridItem display="flex" alignItems="center">
-        { type === 'address' ? (
+        { type === 'address' && txHash ? (
           <TxEntity
             hash={ txHash }
             isLoading={ isLoading }
@@ -74,7 +77,7 @@ const LogItem = ({ address, index, topics, data, decoded, type, tx_hash: txHash,
         </Tooltip> */ }
         <Skeleton isLoaded={ !isLoading } ml="auto" borderRadius="base">
           <Tooltip label="Log index">
-            <Button variant="outline" colorScheme="gray" isActive size="sm" fontWeight={ 400 }>
+            <Button variant="outline" colorScheme="gray" data-selected="true" size="sm" fontWeight={ 400 }>
               { index }
             </Button>
           </Tooltip>
@@ -100,9 +103,13 @@ const LogItem = ({ address, index, topics, data, decoded, type, tx_hash: txHash,
         )) }
       </GridItem>
       <RowHeader isLoading={ isLoading }>Data</RowHeader>
-      <Skeleton isLoaded={ !isLoading } p={ 4 } fontSize="sm" borderRadius="md" bgColor={ isLoading ? undefined : dataBgColor }>
-        { data }
-      </Skeleton>
+      { defaultDataType ? (
+        <RawInputData hex={ data } isLoading={ isLoading } defaultDataType={ defaultDataType } minHeight="53px"/>
+      ) : (
+        <Skeleton isLoaded={ !isLoading } p={ 4 } fontSize="sm" borderRadius="md" bgColor={ isLoading ? undefined : dataBgColor }>
+          { data }
+        </Skeleton>
+      ) }
     </Grid>
   );
 };
diff --git a/ui/shared/logs/LogTopic.pw.tsx b/ui/shared/logs/LogTopic.pw.tsx
index 9664f2671a..5f38d8c44d 100644
--- a/ui/shared/logs/LogTopic.pw.tsx
+++ b/ui/shared/logs/LogTopic.pw.tsx
@@ -1,27 +1,18 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import LogTopic from './LogTopic';
 
-test('address view +@mobile -@default', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <LogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>
-    </TestApp>,
-  );
+test('address view +@mobile -@default', async({ render }) => {
+  const component = await render(<LogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>);
   await component.locator('select[aria-label="Data type"]').selectOption('address');
 
   await expect(component).toHaveScreenshot();
 });
 
-test('hex view +@mobile -@default', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <LogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>
-    </TestApp>,
-  );
+test('hex view +@mobile -@default', async({ render }) => {
+  const component = await render(<LogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>);
   await component.locator('select[aria-label="Data type"]').selectOption('hex');
 
   await expect(component).toHaveScreenshot();
diff --git a/ui/shared/logs/LogTopic.tsx b/ui/shared/logs/LogTopic.tsx
index bb8e7fdc22..971063ec4e 100644
--- a/ui/shared/logs/LogTopic.tsx
+++ b/ui/shared/logs/LogTopic.tsx
@@ -51,7 +51,7 @@ const LogTopic = ({ hex, index, isLoading }: Props) => {
       case 'address': {
         return (
           <AddressEntity
-            address={{ hash: value, name: '', implementation_name: null, is_contract: false, is_verified: false }}
+            address={{ hash: value, name: '' }}
             isLoading={ isLoading }
           />
         );
@@ -62,7 +62,7 @@ const LogTopic = ({ hex, index, isLoading }: Props) => {
   return (
     <Flex alignItems="center" px={{ base: 0, lg: 3 }} _notFirst={{ mt: 3 }} overflow="hidden" maxW="100%">
       <Skeleton isLoaded={ !isLoading } mr={ 3 } borderRadius="base">
-        <Button variant="outline" colorScheme="gray" isActive size="xs" fontWeight={ 400 } w={ 6 }>
+        <Button variant="outline" colorScheme="gray" data-selected size="xs" fontWeight={ 400 } w={ 6 }>
           { index }
         </Button>
       </Skeleton>
diff --git a/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_dark-color-mode_with-indexed-fields-mobile-dark-mode-1.png b/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_dark-color-mode_with-indexed-fields-mobile-dark-mode-1.png
index 98428228b9..a02949ebd2 100644
Binary files a/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_dark-color-mode_with-indexed-fields-mobile-dark-mode-1.png and b/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_dark-color-mode_with-indexed-fields-mobile-dark-mode-1.png differ
diff --git a/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_default_with-indexed-fields-mobile-dark-mode-1.png b/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_default_with-indexed-fields-mobile-dark-mode-1.png
index 0e81521fd8..8d6c2b2182 100644
Binary files a/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_default_with-indexed-fields-mobile-dark-mode-1.png and b/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_default_with-indexed-fields-mobile-dark-mode-1.png differ
diff --git a/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_default_without-indexed-fields-mobile-1.png b/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_default_without-indexed-fields-mobile-1.png
index 5b5efd2b32..cf3c828a61 100644
Binary files a/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_default_without-indexed-fields-mobile-1.png and b/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_default_without-indexed-fields-mobile-1.png differ
diff --git a/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_mobile_with-indexed-fields-mobile-dark-mode-1.png b/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_mobile_with-indexed-fields-mobile-dark-mode-1.png
index 173ef0fc4a..8c86b94073 100644
Binary files a/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_mobile_with-indexed-fields-mobile-dark-mode-1.png and b/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_mobile_with-indexed-fields-mobile-dark-mode-1.png differ
diff --git a/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_mobile_without-indexed-fields-mobile-1.png b/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_mobile_without-indexed-fields-mobile-1.png
index 7bde892cd2..1b044cf88b 100644
Binary files a/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_mobile_without-indexed-fields-mobile-1.png and b/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_mobile_without-indexed-fields-mobile-1.png differ
diff --git a/ui/shared/logs/__screenshots__/LogItem.pw.tsx_dark-color-mode_with-decoded-input-data-mobile-dark-mode-1.png b/ui/shared/logs/__screenshots__/LogItem.pw.tsx_dark-color-mode_with-decoded-input-data-mobile-dark-mode-1.png
index 3902449e9a..abd2439a57 100644
Binary files a/ui/shared/logs/__screenshots__/LogItem.pw.tsx_dark-color-mode_with-decoded-input-data-mobile-dark-mode-1.png and b/ui/shared/logs/__screenshots__/LogItem.pw.tsx_dark-color-mode_with-decoded-input-data-mobile-dark-mode-1.png differ
diff --git a/ui/shared/logs/__screenshots__/LogItem.pw.tsx_default_with-decoded-input-data-mobile-dark-mode-1.png b/ui/shared/logs/__screenshots__/LogItem.pw.tsx_default_with-decoded-input-data-mobile-dark-mode-1.png
index 3063b71f5d..e7eb51dcf9 100644
Binary files a/ui/shared/logs/__screenshots__/LogItem.pw.tsx_default_with-decoded-input-data-mobile-dark-mode-1.png and b/ui/shared/logs/__screenshots__/LogItem.pw.tsx_default_with-decoded-input-data-mobile-dark-mode-1.png differ
diff --git a/ui/shared/logs/__screenshots__/LogItem.pw.tsx_default_with-default-data-type-1.png b/ui/shared/logs/__screenshots__/LogItem.pw.tsx_default_with-default-data-type-1.png
new file mode 100644
index 0000000000..569ee36589
Binary files /dev/null and b/ui/shared/logs/__screenshots__/LogItem.pw.tsx_default_with-default-data-type-1.png differ
diff --git a/ui/shared/logs/__screenshots__/LogItem.pw.tsx_default_without-decoded-input-data-mobile-1.png b/ui/shared/logs/__screenshots__/LogItem.pw.tsx_default_without-decoded-input-data-mobile-1.png
index a3e2fb2f97..3e7b4552ad 100644
Binary files a/ui/shared/logs/__screenshots__/LogItem.pw.tsx_default_without-decoded-input-data-mobile-1.png and b/ui/shared/logs/__screenshots__/LogItem.pw.tsx_default_without-decoded-input-data-mobile-1.png differ
diff --git a/ui/shared/logs/__screenshots__/LogItem.pw.tsx_mobile_with-decoded-input-data-mobile-dark-mode-1.png b/ui/shared/logs/__screenshots__/LogItem.pw.tsx_mobile_with-decoded-input-data-mobile-dark-mode-1.png
index 3834fa7b4f..82d519c4b8 100644
Binary files a/ui/shared/logs/__screenshots__/LogItem.pw.tsx_mobile_with-decoded-input-data-mobile-dark-mode-1.png and b/ui/shared/logs/__screenshots__/LogItem.pw.tsx_mobile_with-decoded-input-data-mobile-dark-mode-1.png differ
diff --git a/ui/shared/logs/__screenshots__/LogItem.pw.tsx_mobile_without-decoded-input-data-mobile-1.png b/ui/shared/logs/__screenshots__/LogItem.pw.tsx_mobile_without-decoded-input-data-mobile-1.png
index 3f6df78bc3..3ebf5eb3a0 100644
Binary files a/ui/shared/logs/__screenshots__/LogItem.pw.tsx_mobile_without-decoded-input-data-mobile-1.png and b/ui/shared/logs/__screenshots__/LogItem.pw.tsx_mobile_without-decoded-input-data-mobile-1.png differ
diff --git a/ui/shared/logs/__screenshots__/LogTopic.pw.tsx_mobile_address-view-mobile---default-1.png b/ui/shared/logs/__screenshots__/LogTopic.pw.tsx_mobile_address-view-mobile---default-1.png
index eb10ff7f75..604f0b71df 100644
Binary files a/ui/shared/logs/__screenshots__/LogTopic.pw.tsx_mobile_address-view-mobile---default-1.png and b/ui/shared/logs/__screenshots__/LogTopic.pw.tsx_mobile_address-view-mobile---default-1.png differ
diff --git a/ui/shared/logs/__screenshots__/LogTopic.pw.tsx_mobile_hex-view-mobile---default-1.png b/ui/shared/logs/__screenshots__/LogTopic.pw.tsx_mobile_hex-view-mobile---default-1.png
index 6a3d2559e7..e766543818 100644
Binary files a/ui/shared/logs/__screenshots__/LogTopic.pw.tsx_mobile_hex-view-mobile---default-1.png and b/ui/shared/logs/__screenshots__/LogTopic.pw.tsx_mobile_hex-view-mobile---default-1.png differ
diff --git a/ui/shared/monaco/CodeEditor.tsx b/ui/shared/monaco/CodeEditor.tsx
index 31182c8a9a..0d2cca32c3 100644
--- a/ui/shared/monaco/CodeEditor.tsx
+++ b/ui/shared/monaco/CodeEditor.tsx
@@ -19,10 +19,11 @@ import CodeEditorSideBar, { CONTAINER_WIDTH as SIDE_BAR_WIDTH } from './CodeEdit
 import CodeEditorTabs from './CodeEditorTabs';
 import addExternalLibraryWarningDecoration from './utils/addExternalLibraryWarningDecoration';
 import addFileImportDecorations from './utils/addFileImportDecorations';
+import addMainContractCodeDecoration from './utils/addMainContractCodeDecoration';
+import { defScilla, configScilla } from './utils/defScilla';
 import getFullPathOfImportedFile from './utils/getFullPathOfImportedFile';
 import * as themes from './utils/themes';
 import useThemeColors from './utils/useThemeColors';
-
 const EDITOR_OPTIONS: EditorProps['options'] = {
   readOnly: true,
   minimap: { enabled: false },
@@ -42,9 +43,10 @@ interface Props {
   libraries?: Array<SmartContractExternalLibrary>;
   language?: string;
   mainFile?: string;
+  contractName?: string;
 }
 
-const CodeEditor = ({ data, remappings, libraries, language, mainFile }: Props) => {
+const CodeEditor = ({ data, remappings, libraries, language, mainFile, contractName }: Props) => {
   const [ instance, setInstance ] = React.useState<Monaco | undefined>();
   const [ editor, setEditor ] = React.useState<monaco.editor.IStandaloneCodeEditor | undefined>();
   const [ index, setIndex ] = React.useState(0);
@@ -60,7 +62,22 @@ const CodeEditor = ({ data, remappings, libraries, language, mainFile }: Props)
 
   const editorWidth = containerRect ? containerRect.width - (isMobile ? 0 : SIDE_BAR_WIDTH) : 0;
 
-  const editorLanguage = language === 'vyper' ? 'elixir' : 'sol';
+  const editorLanguage = (() => {
+    switch (language) {
+      case 'vyper':
+        return 'elixir';
+      case 'json':
+        return 'json';
+      case 'solidity':
+        return 'sol';
+      case 'scilla':
+        return 'scilla';
+      case 'stylus_rust':
+        return 'rust';
+      default:
+        return 'javascript';
+    }
+  })();
 
   React.useEffect(() => {
     instance?.editor.setTheme(colorMode === 'light' ? 'blockscout-light' : 'blockscout-dark');
@@ -74,6 +91,12 @@ const CodeEditor = ({ data, remappings, libraries, language, mainFile }: Props)
     monaco.editor.defineTheme('blockscout-dark', themes.dark);
     monaco.editor.setTheme(colorMode === 'light' ? 'blockscout-light' : 'blockscout-dark');
 
+    if (editorLanguage === 'scilla') {
+      monaco.languages.register({ id: editorLanguage });
+      monaco.languages.setMonarchTokensProvider(editorLanguage, defScilla);
+      monaco.languages.setLanguageConfiguration(editorLanguage, configScilla);
+    }
+
     const loadedModels = monaco.editor.getModels();
     const loadedModelsPaths = loadedModels.map((model) => model.uri.path);
     const newModels = data.slice(1)
@@ -82,9 +105,10 @@ const CodeEditor = ({ data, remappings, libraries, language, mainFile }: Props)
 
     if (language === 'solidity') {
       loadedModels.concat(newModels)
-        .forEach((models) => {
-          addFileImportDecorations(models);
-          libraries?.length && addExternalLibraryWarningDecoration(models, libraries);
+        .forEach((model) => {
+          contractName && mainFile === model.uri.path && addMainContractCodeDecoration(model, contractName, editor);
+          addFileImportDecorations(model);
+          libraries?.length && addExternalLibraryWarningDecoration(model, libraries);
         });
     }
 
@@ -192,6 +216,13 @@ const CodeEditor = ({ data, remappings, libraries, language, mainFile }: Props)
     '.monaco-editor .overflow-guard': {
       'border-bottom-left-radius': borderRadius,
     },
+    '.monaco-editor .core-guide': {
+      zIndex: 1,
+    },
+    // '.monaco-editor .currentFindMatch': // TODO: find a better way to style this
+    '.monaco-editor .findMatch': {
+      backgroundColor: themeColors['custom.findMatchHighlightBackground'],
+    },
     '.highlight': {
       backgroundColor: themeColors['custom.findMatchHighlightBackground'],
     },
@@ -206,6 +237,18 @@ const CodeEditor = ({ data, remappings, libraries, language, mainFile }: Props)
     '.risk-warning': {
       backgroundColor: themeColors['custom.riskWarning.background'],
     },
+    '.main-contract-header': {
+      backgroundColor: themeColors['custom.mainContract.header'],
+    },
+    '.main-contract-body': {
+      backgroundColor: themeColors['custom.mainContract.body'],
+    },
+    '.main-contract-glyph': {
+      zIndex: 1,
+      background: 'url(/static/contract_star.png) no-repeat center center',
+      backgroundSize: '12px',
+      cursor: 'pointer',
+    },
   }), [ editorWidth, themeColors, borderRadius ]);
 
   const renderErrorScreen = React.useCallback(() => {
diff --git a/ui/shared/monaco/CodeEditorFileExplorer.tsx b/ui/shared/monaco/CodeEditorFileExplorer.tsx
index 64c2f05fcb..e836c87c9a 100644
--- a/ui/shared/monaco/CodeEditorFileExplorer.tsx
+++ b/ui/shared/monaco/CodeEditorFileExplorer.tsx
@@ -13,7 +13,7 @@ interface Props {
   selectedFile: string;
   mainFile?: string;
   isActive: boolean;
-  setActionBarRenderer: React.Dispatch<React.SetStateAction<(() => JSX.Element) | undefined>>;
+  setActionBarRenderer: React.Dispatch<React.SetStateAction<(() => React.JSX.Element) | undefined>>;
 }
 
 const CodeEditorFileExplorer = ({ data, onFileSelect, selectedFile, mainFile, isActive, setActionBarRenderer }: Props) => {
diff --git a/ui/shared/monaco/CodeEditorSearch.tsx b/ui/shared/monaco/CodeEditorSearch.tsx
index 6802a505aa..1cc450d9a9 100644
--- a/ui/shared/monaco/CodeEditorSearch.tsx
+++ b/ui/shared/monaco/CodeEditorSearch.tsx
@@ -17,7 +17,7 @@ interface Props {
   onFileSelect: (index: number, lineNumber?: number) => void;
   isInputStuck: boolean;
   isActive: boolean;
-  setActionBarRenderer: React.Dispatch<React.SetStateAction<(() => JSX.Element) | undefined>>;
+  setActionBarRenderer: React.Dispatch<React.SetStateAction<(() => React.JSX.Element) | undefined>>;
   defaultValue: string;
 }
 
diff --git a/ui/shared/monaco/CodeEditorSideBar.tsx b/ui/shared/monaco/CodeEditorSideBar.tsx
index 9091da3134..eccf855d42 100644
--- a/ui/shared/monaco/CodeEditorSideBar.tsx
+++ b/ui/shared/monaco/CodeEditorSideBar.tsx
@@ -29,7 +29,7 @@ const CodeEditorSideBar = ({ onFileSelect, data, monaco, editor, selectedFile, m
   const [ isDrawerOpen, setIsDrawerOpen ] = useBoolean(false);
   const [ tabIndex, setTabIndex ] = React.useState(0);
   const [ searchValue, setSearchValue ] = React.useState('');
-  const [ actionBarRenderer, setActionBarRenderer ] = React.useState<() => JSX.Element>();
+  const [ actionBarRenderer, setActionBarRenderer ] = React.useState<() => React.JSX.Element>();
 
   const themeColors = useThemeColors();
 
diff --git a/ui/shared/monaco/utils/addExternalLibraryWarningDecoration.ts b/ui/shared/monaco/utils/addExternalLibraryWarningDecoration.ts
index 81a490fa5f..9d77966303 100644
--- a/ui/shared/monaco/utils/addExternalLibraryWarningDecoration.ts
+++ b/ui/shared/monaco/utils/addExternalLibraryWarningDecoration.ts
@@ -2,6 +2,8 @@ import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 
 import type { SmartContractExternalLibrary } from 'types/api/contract';
 
+import sortByEndLineNumberAsc from './sortByEndLineNumberAsc';
+
 export default function addExternalLibraryWarningDecoration(model: monaco.editor.ITextModel, libraries: Array<SmartContractExternalLibrary>) {
   const options: monaco.editor.IModelDecorationOptions = {
     isWholeLine: true,
@@ -81,15 +83,3 @@ const getLibraryName = (model: monaco.editor.ITextModel) => (library: SmartContr
 
   return libraryName;
 };
-
-const sortByEndLineNumberAsc = (a: monaco.editor.FindMatch, b: monaco.editor.FindMatch) => {
-  if (a.range.endLineNumber < b.range.endLineNumber) {
-    return -1;
-  }
-
-  if (a.range.endLineNumber > b.range.endLineNumber) {
-    return 1;
-  }
-
-  return 0;
-};
diff --git a/ui/shared/monaco/utils/addMainContractCodeDecoration.ts b/ui/shared/monaco/utils/addMainContractCodeDecoration.ts
new file mode 100644
index 0000000000..7ea7fadf9f
--- /dev/null
+++ b/ui/shared/monaco/utils/addMainContractCodeDecoration.ts
@@ -0,0 +1,66 @@
+import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+
+import sortByEndLineNumberAsc from './sortByEndLineNumberAsc';
+
+export default function addMainContractCodeDecoration(model: monaco.editor.ITextModel, contractName: string, editor: monaco.editor.IStandaloneCodeEditor) {
+  const options: monaco.editor.IModelDecorationOptions = {
+    isWholeLine: true,
+  };
+
+  const contractBlockMatches = model.findMatches(`^contract\\s`, false, true, false, null, true);
+
+  if (contractBlockMatches.length < 2) {
+    return;
+  }
+
+  const [ firstLineMatch ] = model.findMatches(`(^contract ${ contractName })(\\sis\\s.+(\\s?,.+)*)?((\\s?\\{)|\\n)`, false, true, false, null, true);
+
+  if (!firstLineMatch) {
+    return;
+  }
+
+  const firstLineDecoration: monaco.editor.IModelDeltaDecoration = {
+    range: {
+      startColumn: 1,
+      endColumn: 10, // doesn't really matter since isWholeLine is true
+      startLineNumber: firstLineMatch.range.startLineNumber,
+      endLineNumber: firstLineMatch.range.startLineNumber,
+    },
+    options: {
+      ...options,
+      className: '.main-contract-header',
+      marginClassName: '.main-contract-header',
+      glyphMarginClassName: '.main-contract-glyph',
+      glyphMarginHoverMessage: [
+        { value: 'Main contract' },
+      ],
+    },
+  };
+
+  const lastLineRange: monaco.IRange = {
+    startLineNumber: firstLineMatch.range.startLineNumber,
+    startColumn: 1,
+    endColumn: 10,
+    endLineNumber: model.getLineCount(),
+  };
+  const [ lastLineMatch ] = model
+    .findMatches(`^\\}`, lastLineRange, true, false, null, true)
+    .sort(sortByEndLineNumberAsc);
+
+  const restDecoration: monaco.editor.IModelDeltaDecoration = {
+    range: {
+      startLineNumber: firstLineMatch.range.startLineNumber + 1,
+      endLineNumber: lastLineMatch.range.startLineNumber,
+      startColumn: 1,
+      endColumn: 10, // doesn't really matter since isWholeLine is true
+    },
+    options: {
+      ...options,
+      className: '.main-contract-body',
+      marginClassName: '.main-contract-body',
+    },
+  };
+
+  editor.updateOptions({ glyphMargin: true });
+  model.deltaDecorations([], [ firstLineDecoration, restDecoration ]);
+}
diff --git a/ui/shared/monaco/utils/defScilla.ts b/ui/shared/monaco/utils/defScilla.ts
new file mode 100644
index 0000000000..9b81e9b9af
--- /dev/null
+++ b/ui/shared/monaco/utils/defScilla.ts
@@ -0,0 +1,170 @@
+/* eslint-disable max-len */
+import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+
+export const configScilla: monaco.languages.LanguageConfiguration = {
+  comments: {
+    blockComment: [ '(*', '*)' ],
+  },
+  brackets: [
+    [ '{', '}' ],
+    [ '[', ']' ],
+    [ '(', ')' ],
+  ],
+  autoClosingPairs: [
+    { open: '"', close: '"', notIn: [ 'string', 'comment' ] },
+    { open: '{', close: '}', notIn: [ 'string', 'comment' ] },
+    { open: '[', close: ']', notIn: [ 'string', 'comment' ] },
+    { open: '(', close: ')', notIn: [ 'string', 'comment' ] },
+  ],
+};
+
+export const defScilla: monaco.languages.IMonarchLanguage = {
+//   defaultToken: 'invalid',
+
+  brackets: [
+    { token: 'delimiter.curly', open: '{', close: '}' },
+    { token: 'delimiter.parenthesis', open: '(', close: ')' },
+    { token: 'delimiter.square', open: '[', close: ']' },
+  ],
+
+  keywords: [
+    'let',
+    'contains',
+    'delete',
+    'put',
+    'remove',
+    'library',
+    'import',
+    'contract',
+    'event',
+    'field',
+    'send',
+    'fun',
+    'transition',
+    'procedure',
+    'match',
+    'end',
+    'with',
+    'builtin',
+    'Emp',
+    'of',
+    'scilla_version',
+  ],
+
+  builtins: [
+    'eq',
+    'add',
+    'sub',
+    'mul',
+    'div',
+    'rem',
+    'lt',
+    'blt',
+    'in',
+    'substr',
+    'sha256hash',
+    'keccak256hash',
+    'ripemd160hash',
+    'to_byStr',
+    'to_nat',
+    'pow',
+    'to_uint256',
+    'to_uint32',
+    'to_uint64',
+    'to_uint128',
+    'to_int256',
+    'to_int32',
+    'to_int64',
+    'to_int128',
+    'schnorr_verify',
+    'concat',
+    'andb',
+    'orb',
+    'bool_to_string',
+    'negb',
+    'Nil',
+  ],
+
+  operators: [
+    '=',
+    '=>',
+    '<=',
+    '->',
+    '<-',
+  ],
+
+  // we include these common regular expressions
+  symbols: /[=><!~?:&|+\-*/^%]+/,
+  escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
+  integersuffix: /(ll|LL|[uUlL])?(ll|LL|[uUlL])?/,
+  floatsuffix: /[fl]?/i,
+
+  // numbers
+  decpart: /\d(_?\d)*/,
+  decimal: /0|@decpart/,
+
+  tokenizer: {
+    root: [
+      // identifiers and keywords
+      [
+        /[a-z_]\w*[!?=]?/i,
+        {
+          cases: {
+            '@keywords': { token: 'keyword.$0' },
+            '@builtins': 'predefined',
+            '@default': 'identifier',
+          },
+        },
+      ],
+
+      // the rule above does not work for Nil and Emp for some reason
+      // so we have to explicitly define them
+      [ /\b(Nil)\b/, 'predefined' ],
+      [ /\b(Emp)\b/, 'keyword' ],
+
+      // types
+      [ /\b(String|Uint32|Uint64|Uint128|Uint256|Int32|Int64|Int128|Int256|Map|True|False|ByStr|ByStr20|ByStr32|ByStr64|ByStr33|BNum|Option|None|Bool|Some|List|Cons|Pair|type|Zero|Succ|Message)\b/, 'type' ],
+
+      // whitespace
+      { include: '@whitespace' },
+
+      // numbers
+      [ /0x[0-9a-f](_?[0-9a-f])*/i, 'number.hex' ],
+      [ /0[_o][0-7](_?[0-7])*/i, 'number.octal' ],
+      [ /0b[01](_?[01])*/i, 'number.binary' ],
+      [ /0[dD]@decpart/, 'number' ],
+      [
+        /@decimal((\.@decpart)?([eE][-+]?@decpart)?)/,
+        {
+          cases: {
+            $1: 'number.float',
+            '@default': 'number',
+          },
+        },
+      ],
+
+      // strings
+      [ /"([^"\\]|\\.)*$/, 'string.invalid' ], // non-teminated string
+      [ /"/, 'string', '@string' ],
+
+      // characters
+      [ /'[^\\']'/, 'string' ],
+      [ /(')(@escapes)(')/, [ 'string', 'string.escape', 'string' ] ],
+      [ /'/, 'string.invalid' ],
+    ],
+    whitespace: [
+      [ /[ \t\r\n]+/, 'white' ],
+      [ /\(\*.*$/, 'comment' ],
+    ],
+    comment: [
+      [ /[^(*]+/, 'comment' ],
+      [ /[(*]/, 'comment' ],
+    ],
+    string: [
+      [ /[^\\"]+/, 'string' ],
+      [ /@escapes/, 'string.escape' ],
+      [ /\\./, 'string.escape.invalid' ],
+      [ /"/, { token: 'string.quote', bracket: '@close', next: '@pop' } ],
+    ],
+  },
+};
diff --git a/ui/shared/monaco/utils/sortByEndLineNumberAsc.ts b/ui/shared/monaco/utils/sortByEndLineNumberAsc.ts
new file mode 100644
index 0000000000..08fc4536e6
--- /dev/null
+++ b/ui/shared/monaco/utils/sortByEndLineNumberAsc.ts
@@ -0,0 +1,13 @@
+import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+
+export default function sortByEndLineNumberAsc(a: monaco.editor.FindMatch, b: monaco.editor.FindMatch) {
+  if (a.range.endLineNumber < b.range.endLineNumber) {
+    return -1;
+  }
+
+  if (a.range.endLineNumber > b.range.endLineNumber) {
+    return 1;
+  }
+
+  return 0;
+}
diff --git a/ui/shared/monaco/utils/themes.ts b/ui/shared/monaco/utils/themes.ts
index 238504c4eb..3ca6551299 100644
--- a/ui/shared/monaco/utils/themes.ts
+++ b/ui/shared/monaco/utils/themes.ts
@@ -1,7 +1,9 @@
 export const light = {
   base: 'vs' as const,
   inherit: true,
-  rules: [],
+  rules: [
+    { token: 'predefined', foreground: '#cd3131' },
+  ],
   colors: {
     'editor.background': '#f5f5f6',
     'editorWidget.background': '#f5f5f6',
@@ -37,13 +39,17 @@ export const light = {
     'custom.fileLink.hoverForeground': '#4299E1', // blue.400
     'custom.riskWarning.primaryBackground': '#FEEBCB', // orange.100
     'custom.riskWarning.background': '#FFFAF0', // orange.50
+    'custom.mainContract.header': 'rgba(233, 216, 253, 1)', // purple.100
+    'custom.mainContract.body': 'rgba(250, 245, 255, 1)', // purple.50
   } as const,
 };
 
 export const dark = {
   base: 'vs-dark' as const,
   inherit: true,
-  rules: [],
+  rules: [
+    { token: 'predefined', foreground: '#f44747' },
+  ],
   colors: {
     'editor.background': '#1a1b1b',
     'editorWidget.background': '#1a1b1b',
@@ -79,5 +85,7 @@ export const dark = {
     'custom.fileLink.hoverForeground': '#4299E1', // blue.400
     'custom.riskWarning.primaryBackground': 'rgba(246, 173, 85, 0.3)', // orange.300
     'custom.riskWarning.background': 'rgba(246, 173, 85, 0.1)', // orange.300
+    'custom.mainContract.header': 'rgba(183, 148, 244, 0.3)', // purple.300
+    'custom.mainContract.body': 'rgba(214, 188, 250, 0.1)', // purple.200
   } as const,
 };
diff --git a/ui/shared/nft/NftFallback.tsx b/ui/shared/nft/NftFallback.tsx
index 47d5141b72..1a8f460493 100644
--- a/ui/shared/nft/NftFallback.tsx
+++ b/ui/shared/nft/NftFallback.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import IconSvg from 'ui/shared/IconSvg';
 
-const NftFallback = ({ className }: {className?: string}) => {
+const NftFallback = ({ className }: { className?: string }) => {
   return (
     <IconSvg
       className={ className }
diff --git a/ui/shared/nft/NftHtmlFullscreen.tsx b/ui/shared/nft/NftHtmlFullscreen.tsx
index 0e28fab523..80f9bcddfe 100644
--- a/ui/shared/nft/NftHtmlFullscreen.tsx
+++ b/ui/shared/nft/NftHtmlFullscreen.tsx
@@ -9,7 +9,7 @@ interface Props {
   onClose: () => void;
 }
 
-const NftHtmlWithFullscreen = ({ src, isOpen, onClose }: Props) => {
+const NftHtmlFullscreen = ({ src, isOpen, onClose }: Props) => {
   return (
     <NftMediaFullscreenModal isOpen={ isOpen } onClose={ onClose }>
       <chakra.iframe
@@ -22,4 +22,4 @@ const NftHtmlWithFullscreen = ({ src, isOpen, onClose }: Props) => {
   );
 };
 
-export default NftHtmlWithFullscreen;
+export default NftHtmlFullscreen;
diff --git a/ui/shared/nft/NftHtmlWithFullscreen.tsx b/ui/shared/nft/NftHtmlWithFullscreen.tsx
deleted file mode 100644
index eca068fae0..0000000000
--- a/ui/shared/nft/NftHtmlWithFullscreen.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { chakra, useDisclosure } from '@chakra-ui/react';
-import React from 'react';
-
-import NftHtml from './NftHtml';
-import NftMediaFullscreenModal from './NftMediaFullscreenModal';
-
-interface Props {
-  src: string;
-  onLoad: () => void;
-  onError: () => void;
-}
-
-const NftHtmlWithFullscreen = ({ src, onLoad, onError }: Props) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-
-  return (
-    <>
-      <NftHtml src={ src } onLoad={ onLoad } onError={ onError } onClick={ onOpen }/>
-      <NftMediaFullscreenModal isOpen={ isOpen } onClose={ onClose }>
-        <chakra.iframe
-          w="90vw"
-          h="90vh"
-          src={ src }
-          sandbox="allow-scripts"
-          onLoad={ onLoad }
-          onError={ onError }
-        />
-      </NftMediaFullscreenModal>
-    </>
-  );
-};
-
-export default NftHtmlWithFullscreen;
diff --git a/ui/shared/nft/NftImage.tsx b/ui/shared/nft/NftImage.tsx
index a728c93d65..4ec4e9c746 100644
--- a/ui/shared/nft/NftImage.tsx
+++ b/ui/shared/nft/NftImage.tsx
@@ -5,17 +5,19 @@ import { mediaStyleProps } from './utils';
 
 interface Props {
   src: string;
+  srcSet?: string;
   onLoad: () => void;
   onError: () => void;
   onClick?: () => void;
 }
 
-const NftImage = ({ src, onLoad, onError, onClick }: Props) => {
+const NftImage = ({ src, srcSet, onLoad, onError, onClick }: Props) => {
   return (
     <Image
       w="100%"
       h="100%"
       src={ src }
+      srcSet={ srcSet }
       alt="Token instance image"
       onError={ onError }
       onLoad={ onLoad }
diff --git a/ui/shared/nft/NftImageFullscreen.tsx b/ui/shared/nft/NftImageFullscreen.tsx
index 04fad72270..b839b13aa2 100644
--- a/ui/shared/nft/NftImageFullscreen.tsx
+++ b/ui/shared/nft/NftImageFullscreen.tsx
@@ -11,12 +11,29 @@ interface Props {
   onClose: () => void;
 }
 
-const NftImageWithFullscreen = ({ src, isOpen, onClose }: Props) => {
+const NftImageFullscreen = ({ src, isOpen, onClose }: Props) => {
+  const imgRef = React.useRef<HTMLImageElement>(null);
+  const [ hasDimensions, setHasDimensions ] = React.useState<boolean>(true);
+
+  const checkWidth = React.useCallback(() => {
+    if (imgRef.current?.getBoundingClientRect().width === 0) {
+      setHasDimensions(false);
+    }
+  }, [ ]);
+
   return (
     <NftMediaFullscreenModal isOpen={ isOpen } onClose={ onClose }>
-      <Image src={ src } alt="Token instance image" maxH="90vh" maxW="90vw"/>
+      <Image
+        src={ src }
+        alt="Token instance image"
+        maxH="90vh"
+        maxW="90vw"
+        ref={ imgRef }
+        onLoad={ checkWidth }
+        { ...(hasDimensions ? {} : { width: '90vw', height: '90vh' }) }
+      />
     </NftMediaFullscreenModal>
   );
 };
 
-export default NftImageWithFullscreen;
+export default NftImageFullscreen;
diff --git a/ui/shared/nft/NftImageWithFullscreen.tsx b/ui/shared/nft/NftImageWithFullscreen.tsx
deleted file mode 100644
index 374ffbda92..0000000000
--- a/ui/shared/nft/NftImageWithFullscreen.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import {
-  Image,
-  useDisclosure,
-} from '@chakra-ui/react';
-import React from 'react';
-
-import NftImage from './NftImage';
-import NftMediaFullscreenModal from './NftMediaFullscreenModal';
-
-interface Props {
-  src: string;
-  onLoad: () => void;
-  onError: () => void;
-}
-
-const NftImageWithFullscreen = ({ src, onLoad, onError }: Props) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-
-  return (
-    <>
-      <NftImage src={ src } onLoad={ onLoad } onError={ onError } onClick={ onOpen }/>
-      <NftMediaFullscreenModal isOpen={ isOpen } onClose={ onClose }>
-        <Image src={ src } alt="Token instance image" maxH="90vh" maxW="90vw"/>
-      </NftMediaFullscreenModal>
-    </>
-  );
-};
-
-export default NftImageWithFullscreen;
diff --git a/ui/shared/nft/NftMedia.pw.tsx b/ui/shared/nft/NftMedia.pw.tsx
index 71d09de045..37fbf616d9 100644
--- a/ui/shared/nft/NftMedia.pw.tsx
+++ b/ui/shared/nft/NftMedia.pw.tsx
@@ -1,87 +1,114 @@
-import { test, expect } from '@playwright/experimental-ct-react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import type { TokenInstance } from 'types/api/token';
+
+import { test, expect } from 'playwright/lib';
 
 import NftMedia from './NftMedia';
 
 test.describe('no url', () => {
   test.use({ viewport: { width: 250, height: 250 } });
-  test('preview +@dark-mode', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <NftMedia url={ null }/>
-      </TestApp>,
-    );
-
+  test('preview +@dark-mode', async({ render }) => {
+    const data = {
+      image_url: null,
+      animation_url: null,
+    } as TokenInstance;
+    const component = await render(<NftMedia data={ data }/>);
     await expect(component).toHaveScreenshot();
   });
-});
 
-test.describe('image', () => {
-  test.use({ viewport: { width: 250, height: 250 } });
+  test('with fallback', async({ render, mockAssetResponse }) => {
+    const IMAGE_URL = 'https://localhost:3000/my-image.jpg';
+    const data = {
+      image_url: IMAGE_URL,
+      animation_url: null,
+    } as TokenInstance;
 
-  const MEDIA_URL = 'https://localhost:3000/my-image.jpg';
+    await mockAssetResponse(IMAGE_URL, './playwright/mocks/image_long.jpg');
+    const component = await render(<NftMedia data={ data }/>);
+    await expect(component).toHaveScreenshot();
+  });
 
-  test.beforeEach(async({ page }) => {
-    await page.route(MEDIA_URL, (route) => {
+  test('non-media url and fallback', async({ render, page, mockAssetResponse }) => {
+    const ANIMATION_URL = 'https://localhost:3000/my-animation.m3u8';
+    const ANIMATION_MEDIA_TYPE_API_URL = `/node-api/media-type?url=${ encodeURIComponent(ANIMATION_URL) }`;
+    const IMAGE_URL = 'https://localhost:3000/my-image.jpg';
+    const data = {
+      animation_url: ANIMATION_URL,
+      image_url: IMAGE_URL,
+    } as TokenInstance;
+
+    await page.route(ANIMATION_MEDIA_TYPE_API_URL, (route) => {
       return route.fulfill({
         status: 200,
-        path: './playwright/mocks/image_long.jpg',
+        json: { type: undefined },
       });
     });
-  });
-
-  test('preview +@dark-mode', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <NftMedia url={ MEDIA_URL }/>
-      </TestApp>,
-    );
+    await mockAssetResponse(IMAGE_URL, './playwright/mocks/image_long.jpg');
 
+    const component = await render(<NftMedia data={ data }/>);
     await expect(component).toHaveScreenshot();
   });
 });
 
-test('image preview hover', async({ mount, page }) => {
+test.describe('image', () => {
   const MEDIA_URL = 'https://localhost:3000/my-image.jpg';
 
-  await page.route(MEDIA_URL, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_long.jpg',
-    });
+  test.beforeEach(async({ mockAssetResponse }) => {
+    await mockAssetResponse(MEDIA_URL, './playwright/mocks/image_long.jpg');
   });
 
-  const component = await mount(
-    <TestApp>
-      <NftMedia url={ MEDIA_URL } w="250px"/>
-    </TestApp>,
-  );
-
-  await component.getByAltText('Token instance image').hover();
-
-  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 250 } });
-});
-
-test('image fullscreen +@dark-mode +@mobile', async({ mount, page }) => {
-  const MEDIA_URL = 'https://localhost:3000/my-image.jpg';
+  test('preview +@dark-mode', async({ render, page }) => {
+    const data = {
+      animation_url: MEDIA_URL,
+      image_url: null,
+    } as TokenInstance;
+    await render(
+      <Box boxSize="250px">
+        <NftMedia data={ data }/>
+      </Box>,
+    );
+    await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 250 } });
+  });
 
-  await page.route(MEDIA_URL, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_long.jpg',
-    });
+  test('preview with thumbnails', async({ render, page, mockAssetResponse }) => {
+    const THUMBNAIL_URL = 'https://localhost:3000/my-image-250.jpg';
+    const data = {
+      animation_url: MEDIA_URL,
+      image_url: null,
+      thumbnails: {
+        '500x500': THUMBNAIL_URL,
+      },
+    } as TokenInstance;
+    await mockAssetResponse(THUMBNAIL_URL, './playwright/mocks/image_md.jpg');
+    await render(
+      <Box boxSize="250px">
+        <NftMedia data={ data }/>
+      </Box>,
+    );
+    await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 250 } });
   });
-  const component = await mount(
-    <TestApp>
-      <NftMedia url={ MEDIA_URL } withFullscreen w="250px"/>
-    </TestApp>,
-  );
 
-  await component.getByAltText('Token instance image').click();
+  test('preview hover', async({ render, page }) => {
+    const data = {
+      animation_url: MEDIA_URL,
+      image_url: null,
+    } as TokenInstance;
+    const component = await render(<NftMedia data={ data } w="250px"/>);
+    await component.getByAltText('Token instance image').hover();
+    await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 250 } });
+  });
 
-  await expect(page).toHaveScreenshot();
+  test('fullscreen +@dark-mode +@mobile', async({ render, page }) => {
+    const data = {
+      animation_url: MEDIA_URL,
+      image_url: null,
+    } as TokenInstance;
+    const component = await render(<NftMedia data={ data } withFullscreen w="250px"/>);
+    await component.getByAltText('Token instance image').click();
+    await expect(page).toHaveScreenshot();
+  });
 });
 
 test.describe('page', () => {
@@ -90,27 +117,21 @@ test.describe('page', () => {
   const MEDIA_URL = 'https://localhost:3000/page.html';
   const MEDIA_TYPE_API_URL = `/node-api/media-type?url=${ encodeURIComponent(MEDIA_URL) }`;
 
-  test.beforeEach(async({ page }) => {
-
-    await page.route(MEDIA_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/page.html',
-      });
-    });
+  test.beforeEach(async({ page, mockAssetResponse }) => {
+    await mockAssetResponse(MEDIA_URL, './playwright/mocks/page.html');
     await page.route(MEDIA_TYPE_API_URL, (route) => route.fulfill({
       status: 200,
-      body: JSON.stringify({ type: 'html' }),
+      json: { type: 'html' },
     }));
   });
 
-  test('preview +@dark-mode', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <NftMedia url={ MEDIA_URL }/>
-      </TestApp>,
-    );
+  test('preview +@dark-mode', async({ render }) => {
+    const data = {
+      animation_url: MEDIA_URL,
+      image_url: null,
+    } as TokenInstance;
 
+    const component = await render(<NftMedia data={ data }/>);
     await expect(component).toHaveScreenshot();
   });
 });
diff --git a/ui/shared/nft/NftMedia.tsx b/ui/shared/nft/NftMedia.tsx
index e01569c314..23ce3a19fd 100644
--- a/ui/shared/nft/NftMedia.tsx
+++ b/ui/shared/nft/NftMedia.tsx
@@ -2,6 +2,8 @@ import { AspectRatio, chakra, Skeleton, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 import { useInView } from 'react-intersection-observer';
 
+import type { TokenInstance } from 'types/api/token';
+
 import NftFallback from './NftFallback';
 import NftHtml from './NftHtml';
 import NftHtmlFullscreen from './NftHtmlFullscreen';
@@ -9,29 +11,31 @@ import NftImage from './NftImage';
 import NftImageFullscreen from './NftImageFullscreen';
 import NftVideo from './NftVideo';
 import NftVideoFullscreen from './NftVideoFullscreen';
-import useNftMediaType from './useNftMediaType';
+import useNftMediaInfo from './useNftMediaInfo';
 import { mediaStyleProps } from './utils';
 
 interface Props {
-  url: string | null;
+  data: TokenInstance;
   className?: string;
   isLoading?: boolean;
   withFullscreen?: boolean;
+  autoplayVideo?: boolean;
 }
 
-const NftMedia = ({ url, className, isLoading, withFullscreen }: Props) => {
+const NftMedia = ({ data, className, isLoading, withFullscreen, autoplayVideo }: Props) => {
   const [ isMediaLoading, setIsMediaLoading ] = React.useState(true);
   const [ isLoadingError, setIsLoadingError ] = React.useState(false);
 
   const { ref, inView } = useInView({ triggerOnce: true });
 
-  const type = useNftMediaType(url, !isLoading && inView);
+  const mediaInfo = useNftMediaInfo({ data, isEnabled: !isLoading && inView });
 
   React.useEffect(() => {
-    if (!isLoading) {
-      setIsMediaLoading(Boolean(url));
+    if (!isLoading && !mediaInfo) {
+      setIsMediaLoading(false);
+      setIsLoadingError(true);
     }
-  }, [ isLoading, url ]);
+  }, [ isLoading, mediaInfo ]);
 
   const handleMediaLoaded = React.useCallback(() => {
     setIsMediaLoading(false);
@@ -45,48 +49,62 @@ const NftMedia = ({ url, className, isLoading, withFullscreen }: Props) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const content = (() => {
-    if (!url || isLoadingError) {
+    if (isLoading) {
+      return null;
+    }
+
+    if (!mediaInfo || isLoadingError) {
       const styleProps = withFullscreen ? {} : mediaStyleProps;
       return <NftFallback { ...styleProps }/>;
     }
 
     const props = {
-      src: url,
       onLoad: handleMediaLoaded,
       onError: handleMediaLoadError,
       ...(withFullscreen ? { onClick: onOpen } : {}),
     };
 
-    switch (type) {
-      case 'video':
-        return <NftVideo { ...props }/>;
+    switch (mediaInfo.mediaType) {
+      case 'video': {
+        return <NftVideo { ...props } src={ mediaInfo.src } autoPlay={ autoplayVideo } instance={ data }/>;
+      }
       case 'html':
-        return <NftHtml { ...props }/>;
-      case 'image':
-        return <NftImage { ...props }/>;
+        return <NftHtml { ...props } src={ mediaInfo.src }/>;
+      case 'image': {
+        if (mediaInfo.srcType === 'url' && data.thumbnails) {
+          const srcSet = data.thumbnails['250x250'] && data.thumbnails['500x500'] ? `${ data.thumbnails['500x500'] } 2x` : undefined;
+          const src = (srcSet ? data.thumbnails['250x250'] : undefined) || data.thumbnails['500x500'] || data.thumbnails.original;
+          if (src) {
+            return <NftImage { ...props } src={ src } srcSet={ srcSet }/>;
+          }
+        }
+
+        return <NftImage { ...props } src={ mediaInfo.src }/>;
+      }
       default:
         return null;
     }
   })();
 
   const modal = (() => {
-    if (!url || !withFullscreen) {
+    if (!mediaInfo || !withFullscreen || isLoading) {
       return null;
     }
 
     const props = {
-      src: url,
       isOpen,
       onClose,
     };
 
-    switch (type) {
+    switch (mediaInfo.mediaType) {
       case 'video':
-        return <NftVideoFullscreen { ...props }/>;
+        return <NftVideoFullscreen { ...props } src={ mediaInfo.src }/>;
       case 'html':
-        return <NftHtmlFullscreen { ...props }/>;
-      case 'image':
-        return <NftImageFullscreen { ...props }/>;
+        return <NftHtmlFullscreen { ...props } src={ mediaInfo.src }/>;
+      case 'image': {
+        const src = mediaInfo.srcType === 'url' && data.thumbnails?.original ? data.thumbnails.original : mediaInfo.src;
+        return <NftImageFullscreen { ...props } src={ src }/>;
+      }
       default:
         return null;
     }
diff --git a/ui/shared/nft/NftVideo.tsx b/ui/shared/nft/NftVideo.tsx
index a58cefbbda..8b352a9271 100644
--- a/ui/shared/nft/NftVideo.tsx
+++ b/ui/shared/nft/NftVideo.tsx
@@ -1,24 +1,91 @@
 import { chakra } from '@chakra-ui/react';
+import { verifiedFetch } from '@helia/verified-fetch';
 import React from 'react';
 
+import type { TokenInstance } from 'types/api/token';
+
+import config from 'configs/app';
+
 import { mediaStyleProps, videoPlayProps } from './utils';
 
 interface Props {
   src: string;
+  instance: TokenInstance;
+  autoPlay?: boolean;
   onLoad: () => void;
   onError: () => void;
   onClick?: () => void;
 }
 
-const NftVideo = ({ src, onLoad, onError, onClick }: Props) => {
+const NftVideo = ({ src, instance, autoPlay = true, onLoad, onError, onClick }: Props) => {
+  const ref = React.useRef<HTMLVideoElement>(null);
+  const controller = React.useRef<AbortController | null>(null);
+
+  const fetchVideoPoster = React.useCallback(async() => {
+    if (!ref.current) {
+      return;
+    }
+
+    try {
+      if (!config.UI.views.nft.verifiedFetch.isEnabled) {
+        throw new Error('Helia verified fetch is disabled');
+      }
+      const imageUrl = typeof instance.metadata?.image === 'string' ? instance.metadata.image : undefined;
+      if (!imageUrl) {
+        throw new Error('No image URL found');
+      }
+      controller.current = new AbortController();
+      const response = await verifiedFetch(imageUrl, { signal: controller.current.signal });
+      const blob = await response.blob();
+      const src = URL.createObjectURL(blob);
+      ref.current.poster = src;
+
+      // we want to call onLoad right after the poster is loaded
+      // otherwise, the skeleton will be shown underneath the element until the video is loaded
+      onLoad();
+    } catch (error) {
+      const src = instance.thumbnails?.['500x500'] || instance.thumbnails?.original || instance.image_url;
+      if (src) {
+        ref.current.poster = src;
+
+        // we want to call onLoad right after the poster is loaded
+        // otherwise, the skeleton will be shown underneath the element until the video is loaded
+        const poster = new Image();
+        poster.src = ref.current.poster;
+        poster.onload = onLoad;
+      }
+    }
+  }, [ instance.image_url, instance.metadata?.image, instance.thumbnails, onLoad ]);
+
+  React.useEffect(() => {
+    !autoPlay && fetchVideoPoster();
+    return () => {
+      controller.current?.abort();
+    };
+  // run only on mount
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleMouseEnter = React.useCallback(() => {
+    !autoPlay && ref.current?.play();
+  }, [ autoPlay ]);
+
+  const handleMouseLeave = React.useCallback(() => {
+    !autoPlay && ref.current?.pause();
+  }, [ autoPlay ]);
+
   return (
     <chakra.video
+      ref={ ref }
       { ...videoPlayProps }
+      autoPlay={ autoPlay }
       src={ src }
       onCanPlayThrough={ onLoad }
       onError={ onError }
       borderRadius="md"
       onClick={ onClick }
+      onMouseEnter={ handleMouseEnter }
+      onMouseLeave={ handleMouseLeave }
       { ...mediaStyleProps }
     />
   );
diff --git a/ui/shared/nft/NftVideoFullscreen.tsx b/ui/shared/nft/NftVideoFullscreen.tsx
index dc1685c26b..26a7081a41 100644
--- a/ui/shared/nft/NftVideoFullscreen.tsx
+++ b/ui/shared/nft/NftVideoFullscreen.tsx
@@ -10,7 +10,7 @@ interface Props {
   onClose: () => void;
 }
 
-const NftVideoWithFullscreen = ({ src, isOpen, onClose }: Props) => {
+const NftVideoFullscreen = ({ src, isOpen, onClose }: Props) => {
   return (
     <NftMediaFullscreenModal isOpen={ isOpen } onClose={ onClose }>
       <chakra.video
@@ -18,9 +18,10 @@ const NftVideoWithFullscreen = ({ src, isOpen, onClose }: Props) => {
         src={ src }
         maxH="90vh"
         maxW="90vw"
+        autoPlay={ true }
       />
     </NftMediaFullscreenModal>
   );
 };
 
-export default NftVideoWithFullscreen;
+export default NftVideoFullscreen;
diff --git a/ui/shared/nft/NftVideoWithFullscreen.tsx b/ui/shared/nft/NftVideoWithFullscreen.tsx
deleted file mode 100644
index ed676379e7..0000000000
--- a/ui/shared/nft/NftVideoWithFullscreen.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import {
-  chakra,
-  useDisclosure,
-} from '@chakra-ui/react';
-import React from 'react';
-
-import NftMediaFullscreenModal from './NftMediaFullscreenModal';
-import NftVideo from './NftVideo';
-import { videoPlayProps } from './utils';
-
-interface Props {
-  src: string;
-  onLoad: () => void;
-  onError: () => void;
-}
-
-const NftVideoWithFullscreen = ({ src, onLoad, onError }: Props) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-
-  return (
-    <>
-      <NftVideo src={ src } onLoad={ onLoad } onError={ onError } onClick={ onOpen }/>
-      <NftMediaFullscreenModal isOpen={ isOpen } onClose={ onClose }>
-        <chakra.video
-          { ...videoPlayProps }
-          src={ src }
-          onCanPlayThrough={ onLoad }
-          onError={ onError }
-          maxH="90vh"
-          maxW="90vw"
-        />
-      </NftMediaFullscreenModal>
-    </>
-  );
-};
-
-export default NftVideoWithFullscreen;
diff --git a/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_dark-color-mode_image-preview-dark-mode-1.png b/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_dark-color-mode_image-preview-dark-mode-1.png
index b60b305a6c..59ba859811 100644
Binary files a/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_dark-color-mode_image-preview-dark-mode-1.png and b/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_dark-color-mode_image-preview-dark-mode-1.png differ
diff --git a/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_dark-color-mode_page-preview-dark-mode-1.png b/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_dark-color-mode_page-preview-dark-mode-1.png
index 09e22f5338..0526d838b6 100644
Binary files a/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_dark-color-mode_page-preview-dark-mode-1.png and b/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_dark-color-mode_page-preview-dark-mode-1.png differ
diff --git a/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_image-preview-dark-mode-1.png b/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_image-preview-dark-mode-1.png
index 2a4baa8e3a..4273139faf 100644
Binary files a/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_image-preview-dark-mode-1.png and b/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_image-preview-dark-mode-1.png differ
diff --git a/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_image-preview-with-thumbnails-1.png b/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_image-preview-with-thumbnails-1.png
new file mode 100644
index 0000000000..e10f86e0c8
Binary files /dev/null and b/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_image-preview-with-thumbnails-1.png differ
diff --git a/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_no-url-non-media-url-and-fallback-1.png b/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_no-url-non-media-url-and-fallback-1.png
new file mode 100644
index 0000000000..4273139faf
Binary files /dev/null and b/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_no-url-non-media-url-and-fallback-1.png differ
diff --git a/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_no-url-with-fallback-1.png b/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_no-url-with-fallback-1.png
new file mode 100644
index 0000000000..4273139faf
Binary files /dev/null and b/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_no-url-with-fallback-1.png differ
diff --git a/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_page-preview-dark-mode-1.png b/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_page-preview-dark-mode-1.png
index b1b46ce520..ce6c2eb7f7 100644
Binary files a/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_page-preview-dark-mode-1.png and b/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_page-preview-dark-mode-1.png differ
diff --git a/ui/shared/nft/useNftMediaInfo.tsx b/ui/shared/nft/useNftMediaInfo.tsx
new file mode 100644
index 0000000000..d8fd174262
--- /dev/null
+++ b/ui/shared/nft/useNftMediaInfo.tsx
@@ -0,0 +1,158 @@
+import { verifiedFetch } from '@helia/verified-fetch';
+import { useQuery } from '@tanstack/react-query';
+import React from 'react';
+
+import type { TokenInstance } from 'types/api/token';
+
+import type { StaticRoute } from 'nextjs-routes';
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import type { ResourceError } from 'lib/api/resources';
+import useFetch from 'lib/hooks/useFetch';
+
+import type { MediaType, SrcType } from './utils';
+import { getPreliminaryMediaType } from './utils';
+
+interface Params {
+  data: TokenInstance;
+  isEnabled: boolean;
+}
+
+interface AssetsData {
+  imageUrl: string | undefined;
+  animationUrl: string | undefined;
+}
+
+type TransportType = 'http' | 'ipfs';
+
+type ReturnType =
+{
+  src: string;
+  mediaType: MediaType;
+  srcType: SrcType;
+} |
+{
+  mediaType: undefined;
+} |
+null;
+
+export default function useNftMediaInfo({ data, isEnabled }: Params): ReturnType | null {
+
+  const assetsData = composeAssetsData(data);
+  const httpPrimaryQuery = useNftMediaTypeQuery(assetsData.http.animationUrl, isEnabled);
+  const ipfsPrimaryQuery = useFetchAssetViaIpfs(
+    assetsData.ipfs.animationUrl,
+    httpPrimaryQuery.data?.mediaType,
+    isEnabled && (httpPrimaryQuery.data === null || Boolean(httpPrimaryQuery.data?.mediaType)),
+  );
+  const httpSecondaryQuery = useNftMediaTypeQuery(assetsData.http.imageUrl, isEnabled && !httpPrimaryQuery.data && !ipfsPrimaryQuery);
+  const ipfsSecondaryQuery = useFetchAssetViaIpfs(
+    assetsData.ipfs.imageUrl,
+    httpSecondaryQuery.data?.mediaType,
+    isEnabled && (httpSecondaryQuery.data === null || Boolean(httpSecondaryQuery.data?.mediaType)),
+  );
+
+  return React.useMemo(() => {
+    return ipfsPrimaryQuery || httpPrimaryQuery.data || ipfsSecondaryQuery || httpSecondaryQuery.data || null;
+  }, [ httpPrimaryQuery.data, httpSecondaryQuery.data, ipfsPrimaryQuery, ipfsSecondaryQuery ]);
+}
+
+function composeAssetsData(data: TokenInstance): Record<TransportType, AssetsData> {
+  return {
+    http: {
+      imageUrl: data.image_url || undefined,
+      animationUrl: data.animation_url || undefined,
+    },
+    ipfs: {
+      imageUrl: typeof data.metadata?.image === 'string' ? data.metadata.image : undefined,
+      animationUrl: typeof data.metadata?.animation_url === 'string' ? data.metadata.animation_url : undefined,
+    },
+  };
+}
+
+// As of now we fetch only images via IPFS because video streaming has performance issues
+// Also, we don't want to store the entire file content in the ReactQuery cache, so we don't use useQuery hook here
+function useFetchAssetViaIpfs(url: string | undefined, mediaType: MediaType | undefined, isEnabled: boolean): ReturnType | null {
+  const [ result, setResult ] = React.useState<ReturnType | null>({ mediaType: undefined });
+  const controller = React.useRef<AbortController | null>(null);
+
+  const fetchAsset = React.useCallback(async(url: string) => {
+    try {
+      controller.current = new AbortController();
+      const response = await verifiedFetch(url, { signal: controller.current.signal });
+      if (response.status === 200) {
+        const blob = await response.blob();
+        const src = URL.createObjectURL(blob);
+        setResult({ mediaType: 'image', src, srcType: 'blob' });
+        return;
+      }
+    } catch (error) {}
+    setResult(null);
+  }, []);
+
+  React.useEffect(() => {
+    if (isEnabled) {
+      if (config.UI.views.nft.verifiedFetch.isEnabled && mediaType === 'image' && url && url.includes('ipfs')) {
+        fetchAsset(url);
+      } else {
+        setResult(null);
+      }
+    } else {
+      setResult({ mediaType: undefined });
+    }
+  }, [ fetchAsset, url, mediaType, isEnabled ]);
+
+  React.useEffect(() => {
+    return () => {
+      controller.current?.abort();
+    };
+  }, []);
+
+  return result;
+}
+
+function useNftMediaTypeQuery(url: string | undefined, enabled: boolean) {
+  const fetch = useFetch();
+
+  return useQuery<ReturnType | null, ResourceError<unknown>, ReturnType | null>({
+    queryKey: [ 'nft-media-type', url ],
+    queryFn: async() => {
+      if (!url) {
+        return null;
+      }
+
+      // media could be either image, gif, video or html-page
+      // so we pre-fetch the resources in order to get its content type
+      // have to do it via Node.js due to strict CSP for connect-src
+      // but in order not to abuse our server firstly we check file url extension
+      // and if it is valid we will trust it and display corresponding media component
+
+      const preliminaryType = getPreliminaryMediaType(url);
+
+      if (preliminaryType) {
+        return { mediaType: preliminaryType, src: url, srcType: 'url' };
+      }
+
+      const mediaType = await (async() => {
+        try {
+          const mediaTypeResourceUrl = route({ pathname: '/node-api/media-type' as StaticRoute<'/api/media-type'>['pathname'], query: { url } });
+          const response = await fetch<{ type: MediaType | undefined }, ResourceError>(mediaTypeResourceUrl, undefined, { resource: 'media-type' });
+
+          return 'type' in response ? response.type : undefined;
+        } catch (error) {
+          return;
+        }
+      })();
+
+      if (!mediaType) {
+        return null;
+      }
+
+      return { mediaType, src: url, srcType: 'url' };
+    },
+    enabled,
+    placeholderData: { mediaType: undefined },
+    staleTime: Infinity,
+  });
+}
diff --git a/ui/shared/nft/useNftMediaType.tsx b/ui/shared/nft/useNftMediaType.tsx
deleted file mode 100644
index 4444b122e3..0000000000
--- a/ui/shared/nft/useNftMediaType.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-
-import type { StaticRoute } from 'nextjs-routes';
-import { route } from 'nextjs-routes';
-
-import type { ResourceError } from 'lib/api/resources';
-import useFetch from 'lib/hooks/useFetch';
-
-import type { MediaType } from './utils';
-import { getPreliminaryMediaType } from './utils';
-
-export default function useNftMediaType(url: string | null, isEnabled: boolean) {
-
-  const fetch = useFetch();
-
-  const { data } = useQuery<unknown, ResourceError<unknown>, MediaType>({
-    queryKey: [ 'nft-media-type', url ],
-    queryFn: async() => {
-      if (!url) {
-        return 'image';
-      }
-
-      // media could be either image, gif, video or html-page
-      // so we pre-fetch the resources in order to get its content type
-      // have to do it via Node.js due to strict CSP for connect-src
-      // but in order not to abuse our server firstly we check file url extension
-      // and if it is valid we will trust it and display corresponding media component
-
-      const preliminaryType = getPreliminaryMediaType(url);
-
-      if (preliminaryType) {
-        return preliminaryType;
-      }
-
-      try {
-        const mediaTypeResourceUrl = route({ pathname: '/node-api/media-type' as StaticRoute<'/api/media-type'>['pathname'], query: { url } });
-        const response = await fetch<{ type: MediaType | undefined }, ResourceError>(mediaTypeResourceUrl, undefined, { resource: 'media-type' });
-
-        return 'type' in response ? response.type ?? 'image' : 'image';
-      } catch (error) {
-        return 'image';
-      }
-    },
-    enabled: isEnabled && Boolean(url),
-    staleTime: Infinity,
-  });
-
-  return data;
-}
diff --git a/ui/shared/nft/utils.ts b/ui/shared/nft/utils.ts
index 90410798f6..d788cdb757 100644
--- a/ui/shared/nft/utils.ts
+++ b/ui/shared/nft/utils.ts
@@ -1,5 +1,7 @@
 export type MediaType = 'image' | 'video' | 'html';
 
+export type SrcType = 'url' | 'blob';
+
 const IMAGE_EXTENSIONS = [
   '.jpg', 'jpeg',
   '.png',
@@ -41,7 +43,6 @@ export const mediaStyleProps = {
 };
 
 export const videoPlayProps = {
-  autoPlay: true,
   disablePictureInPicture: true,
   loop: true,
   muted: true,
diff --git a/ui/shared/pagination/Pagination.pw.tsx b/ui/shared/pagination/Pagination.pw.tsx
index e962550667..14e8276ded 100644
--- a/ui/shared/pagination/Pagination.pw.tsx
+++ b/ui/shared/pagination/Pagination.pw.tsx
@@ -1,15 +1,14 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import type { PaginationParams } from './types';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import Pagination from './Pagination';
 
 test.use({ viewport: { width: 250, height: 50 } });
 
-test('default view', async({ mount }) => {
+test('default view', async({ render }) => {
   const props: PaginationParams = {
     page: 2,
     isVisible: true,
@@ -21,11 +20,6 @@ test('default view', async({ mount }) => {
     onPrevPageClick: () => {},
     resetPage: () => {},
   };
-  const component = await mount(
-    <TestApp>
-      <Pagination { ...props } w="fit-content"/>
-    </TestApp>,
-  );
-
+  const component = await render(<Pagination { ...props } w="fit-content"/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/pagination/Pagination.tsx b/ui/shared/pagination/Pagination.tsx
index 67c2c0593d..e288f4d6d1 100644
--- a/ui/shared/pagination/Pagination.tsx
+++ b/ui/shared/pagination/Pagination.tsx
@@ -30,7 +30,7 @@ const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasPage
           onClick={ resetPage }
           isDisabled={ page === 1 || isLoading }
         >
-        First
+          First
         </Button>
       </Skeleton>
       <Skeleton isLoaded={ !showSkeleton } display="inline-block" mr={ 3 } borderRadius="base">
@@ -48,7 +48,7 @@ const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasPage
         <Button
           variant="outline"
           size="sm"
-          isActive
+          data-selected={ true }
           borderWidth="1px"
           fontWeight={ 400 }
           h={ 8 }
diff --git a/ui/shared/pagination/__screenshots__/Pagination.pw.tsx_default_default-view-1.png b/ui/shared/pagination/__screenshots__/Pagination.pw.tsx_default_default-view-1.png
index 4336a74145..ae79e2c024 100644
Binary files a/ui/shared/pagination/__screenshots__/Pagination.pw.tsx_default_default-view-1.png and b/ui/shared/pagination/__screenshots__/Pagination.pw.tsx_default_default-view-1.png differ
diff --git a/ui/shared/pagination/useLazyLoadedList.tsx b/ui/shared/pagination/useLazyLoadedList.tsx
new file mode 100644
index 0000000000..f53125c1d6
--- /dev/null
+++ b/ui/shared/pagination/useLazyLoadedList.tsx
@@ -0,0 +1,45 @@
+import type { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query';
+import React from 'react';
+import { useInView } from 'react-intersection-observer';
+
+import type { PaginatedResources, ResourceError, ResourcePayload } from 'lib/api/resources';
+import type { Params as ApiInfiniteQueryParams } from 'lib/api/useApiInfiniteQuery';
+import useApiInfiniteQuery from 'lib/api/useApiInfiniteQuery';
+
+interface Params<Resource extends PaginatedResources> extends ApiInfiniteQueryParams<Resource> {
+  rootRef: React.RefObject<HTMLElement>;
+}
+
+interface ReturnType<Resource extends PaginatedResources> {
+  cutRef: (node?: Element | null) => void;
+  query: UseInfiniteQueryResult<InfiniteData<ResourcePayload<Resource>>, ResourceError<unknown>>;
+}
+
+export default function useLazyLoadedList<Resource extends PaginatedResources>({
+  rootRef,
+  resourceName,
+  queryOptions,
+  pathParams,
+}: Params<Resource>): ReturnType<Resource> {
+  const query = useApiInfiniteQuery({
+    resourceName,
+    pathParams,
+    queryOptions,
+  });
+
+  const { ref, inView } = useInView({
+    root: rootRef.current,
+    triggerOnce: false,
+    skip: queryOptions?.enabled === false || query.isFetchingNextPage || !query.hasNextPage,
+  });
+
+  React.useEffect(() => {
+    if (inView) {
+      query.fetchNextPage();
+    }
+    // should run only on inView state change
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ inView ]);
+
+  return { cutRef: ref, query };
+}
diff --git a/ui/shared/pagination/useQueryWithPages.test.tsx b/ui/shared/pagination/useQueryWithPages.test.tsx
index de720d5799..f0b263d511 100644
--- a/ui/shared/pagination/useQueryWithPages.test.tsx
+++ b/ui/shared/pagination/useQueryWithPages.test.tsx
@@ -1,3 +1,4 @@
+import type React from 'react';
 import { animateScroll } from 'react-scroll';
 
 import fetch from 'jest-fetch-mock';
@@ -55,12 +56,18 @@ beforeEach(() => {
   fetch.resetMocks();
 });
 
+const responseInit = {
+  headers: {
+    'Content-Type': 'application/json',
+  },
+};
+
 it('returns correct data if there is only one page', async() => {
   const params: Params<'address_txs'> = {
     resourceName: 'address_txs',
     pathParams: { hash: addressMock.hash },
   };
-  fetch.mockResponse(JSON.stringify(responses.page_empty));
+  fetch.mockResponse(JSON.stringify(responses.page_empty), responseInit);
 
   const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
   await waitForApiResponse();
@@ -83,7 +90,7 @@ describe('if there are multiple pages', () => {
   };
 
   it('return correct data for the first page', async() => {
-    fetch.mockResponse(JSON.stringify(responses.page_1));
+    fetch.mockResponse(JSON.stringify(responses.page_1), responseInit);
 
     const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
     await waitForApiResponse();
@@ -108,10 +115,10 @@ describe('if there are multiple pages', () => {
       routerPush.mockClear();
       useRouter.mockReturnValue({ ...router, pathname: '/current-route', push: routerPush });
 
-      fetch.once(JSON.stringify(responses.page_1));
-      fetch.once(JSON.stringify(responses.page_2));
-      fetch.once(JSON.stringify(responses.page_3));
-      fetch.once(JSON.stringify(responses.page_1));
+      fetch.once(JSON.stringify(responses.page_1), responseInit);
+      fetch.once(JSON.stringify(responses.page_2), responseInit);
+      fetch.once(JSON.stringify(responses.page_3), responseInit);
+      fetch.once(JSON.stringify(responses.page_1), responseInit);
 
       // INITIAL LOAD
       const { result: r } = renderHook(() => useQueryWithPages(params), { wrapper });
@@ -284,10 +291,10 @@ describe('if there are multiple pages', () => {
     const routerPush = jest.fn(() => Promise.resolve());
     useRouter.mockReturnValue({ ...router, pathname: '/current-route', push: routerPush });
 
-    fetch.once(JSON.stringify(responses.page_1));
-    fetch.once(JSON.stringify(responses.page_2));
-    fetch.once(JSON.stringify(responses.page_3));
-    fetch.once(JSON.stringify(responses.page_1));
+    fetch.once(JSON.stringify(responses.page_1), responseInit);
+    fetch.once(JSON.stringify(responses.page_2), responseInit);
+    fetch.once(JSON.stringify(responses.page_3), responseInit);
+    fetch.once(JSON.stringify(responses.page_1), responseInit);
 
     const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
     await waitForApiResponse();
@@ -342,8 +349,8 @@ describe('if there are multiple pages', () => {
       pathParams: { hash: addressMock.hash },
       scrollRef: scrollRef as unknown as React.RefObject<HTMLDivElement>,
     };
-    fetch.once(JSON.stringify(responses.page_1));
-    fetch.once(JSON.stringify(responses.page_2));
+    fetch.once(JSON.stringify(responses.page_1), responseInit);
+    fetch.once(JSON.stringify(responses.page_2), responseInit);
 
     const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
     await waitForApiResponse();
@@ -366,7 +373,7 @@ describe('if there is page query param in URL', () => {
       resourceName: 'address_txs',
       pathParams: { hash: addressMock.hash },
     };
-    fetch.mockResponse(JSON.stringify(responses.page_empty));
+    fetch.mockResponse(JSON.stringify(responses.page_empty), responseInit);
 
     const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
     await waitForApiResponse();
@@ -390,8 +397,8 @@ describe('if there is page query param in URL', () => {
       resourceName: 'address_txs',
       pathParams: { hash: addressMock.hash },
     };
-    fetch.once(JSON.stringify(responses.page_2));
-    fetch.once(JSON.stringify(responses.page_3));
+    fetch.once(JSON.stringify(responses.page_2), responseInit);
+    fetch.once(JSON.stringify(responses.page_3), responseInit);
 
     const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
     await waitForApiResponse();
@@ -434,13 +441,13 @@ describe('queries with filters', () => {
     const params: Params<'address_txs'> = {
       resourceName: 'address_txs',
       pathParams: { hash: addressMock.hash },
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+
       // @ts-ignore:
       sorting: { sort: 'val-desc' },
     };
-    fetch.once(JSON.stringify(responses.page_1));
-    fetch.once(JSON.stringify(responses.page_2));
-    fetch.once(JSON.stringify(responses.page_filtered));
+    fetch.once(JSON.stringify(responses.page_1), responseInit);
+    fetch.once(JSON.stringify(responses.page_2), responseInit);
+    fetch.once(JSON.stringify(responses.page_filtered), responseInit);
 
     const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
     await waitForApiResponse();
@@ -487,8 +494,8 @@ describe('queries with filters', () => {
       resourceName: 'address_txs',
       pathParams: { hash: addressMock.hash },
     };
-    fetch.once(JSON.stringify(responses.page_1));
-    fetch.once(JSON.stringify(responses.page_2));
+    fetch.once(JSON.stringify(responses.page_1), responseInit);
+    fetch.once(JSON.stringify(responses.page_2), responseInit);
 
     const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
     await waitForApiResponse();
@@ -525,9 +532,9 @@ describe('queries with sorting', () => {
       pathParams: { hash: addressMock.hash },
       filters: { filter: 'from' },
     };
-    fetch.once(JSON.stringify(responses.page_1));
-    fetch.once(JSON.stringify(responses.page_2));
-    fetch.once(JSON.stringify(responses.page_sorted));
+    fetch.once(JSON.stringify(responses.page_1), responseInit);
+    fetch.once(JSON.stringify(responses.page_2), responseInit);
+    fetch.once(JSON.stringify(responses.page_sorted), responseInit);
 
     const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
     await waitForApiResponse();
@@ -538,7 +545,7 @@ describe('queries with sorting', () => {
     await waitForApiResponse();
 
     await act(async() => {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+
       // @ts-ignore:
       result.current.onSortingChange({ sort: 'val-desc' });
     });
@@ -575,12 +582,12 @@ describe('queries with sorting', () => {
     const params: Params<'address_txs'> = {
       resourceName: 'address_txs',
       pathParams: { hash: addressMock.hash },
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+
       // @ts-ignore:
       sorting: { sort: 'val-desc' },
     };
-    fetch.once(JSON.stringify(responses.page_1));
-    fetch.once(JSON.stringify(responses.page_2));
+    fetch.once(JSON.stringify(responses.page_1), responseInit);
+    fetch.once(JSON.stringify(responses.page_2), responseInit);
 
     const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
     await waitForApiResponse();
diff --git a/ui/shared/pagination/useQueryWithPages.ts b/ui/shared/pagination/useQueryWithPages.ts
index fb4cac50e5..5db11aba19 100644
--- a/ui/shared/pagination/useQueryWithPages.ts
+++ b/ui/shared/pagination/useQueryWithPages.ts
@@ -30,9 +30,15 @@ export interface Params<Resource extends PaginatedResources> {
 
 type NextPageParams = Record<string, unknown>;
 
+<<<<<<< HEAD
 function getPaginationParamsFromQuery(
   queryString: string | Array<string> | undefined,
 ) {
+=======
+const INITIAL_PAGE_PARAMS = { '1': {} };
+
+function getPaginationParamsFromQuery(queryString: string | Array<string> | undefined) {
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739
   if (queryString) {
     try {
       return JSON.parse(
@@ -44,7 +50,16 @@ function getPaginationParamsFromQuery(
   return {};
 }
 
+function getNextPageParams<R extends PaginatedResources>(data: ResourcePayload<R> | undefined) {
+  if (!data || typeof data !== 'object' || !('next_page_params' in data)) {
+    return;
+  }
+
+  return data.next_page_params;
+}
+
 export type QueryWithPagesResult<Resource extends PaginatedResources> =
+<<<<<<< HEAD
   UseQueryResult<
   ResourcePayload<Resource>,
   ResourceError<unknown>
@@ -55,6 +70,14 @@ export type QueryWithPagesResult<Resource extends PaginatedResources> =
     onSortingChange: (sorting?: PaginationSorting<Resource>) => void;
     pagination: PaginationParams;
   };
+=======
+UseQueryResult<ResourcePayload<Resource>, ResourceError<unknown>> &
+{
+  onFilterChange: <R extends PaginatedResources = Resource>(filters: PaginationFilters<R>) => void;
+  onSortingChange: (sorting?: PaginationSorting<Resource>) => void;
+  pagination: PaginationParams;
+};
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739
 
 export default function useQueryWithPages<Resource extends PaginatedResources>({
   resourceName,
@@ -98,35 +121,53 @@ export default function useQueryWithPages<Resource extends PaginatedResources>({
     },
   });
   const { data } = queryResult;
+  const nextPageParams = getNextPageParams(data);
 
   const onNextPageClick = useCallback(() => {
+<<<<<<< HEAD
     if (!(data as any)?.next_page_params) {
+=======
+    if (!nextPageParams) {
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739
       // we hide next page button if no next_page_params
       return;
     }
 
     setPageParams((prev) => ({
       ...prev,
+<<<<<<< HEAD
       [page + 1]: (data as any).next_page_params as NextPageParams,
+=======
+      [page + 1]: nextPageParams as NextPageParams,
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739
     }));
     setPage((prev) => prev + 1);
 
     const nextPageQuery = {
       ...router.query,
       page: String(page + 1),
+<<<<<<< HEAD
       next_page_params: encodeURIComponent(
         JSON.stringify((data as any).next_page_params),
       ),
+=======
+      next_page_params: encodeURIComponent(JSON.stringify(nextPageParams)),
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739
     };
 
     setHasPages(true);
     scrollToTop();
+<<<<<<< HEAD
     router.push(
       { pathname: router.pathname, query: nextPageQuery },
       undefined,
       { shallow: true },
     );
   }, [ data, page, router, scrollToTop ]);
+=======
+    router.push({ pathname: router.pathname, query: nextPageQuery }, undefined, { shallow: true });
+  }, [ nextPageParams, page, router, scrollToTop ]);
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739
 
   const onPrevPageClick = useCallback(() => {
     // returning to the first page
@@ -157,6 +198,7 @@ export default function useQueryWithPages<Resource extends PaginatedResources>({
 
     scrollToTop();
     const nextRouterQuery = omit(router.query, [ 'next_page_params', 'page' ]);
+<<<<<<< HEAD
     router
       .push({ pathname: router.pathname, query: nextRouterQuery }, undefined, {
         shallow: true,
@@ -251,6 +293,66 @@ export default function useQueryWithPages<Resource extends PaginatedResources>({
   const hasNextPage = nextPageParams ?
     Object.keys(nextPageParams).length > 0 :
     false;
+=======
+    router.push({ pathname: router.pathname, query: nextRouterQuery }, undefined, { shallow: true }).then(() => {
+      queryClient.removeQueries({ queryKey: [ resourceName ] });
+      setPage(1);
+      setPageParams(INITIAL_PAGE_PARAMS);
+      window.setTimeout(() => {
+        // FIXME after router is updated we still have inactive queries for previously visited page (e.g third), where we came from
+        // so have to remove it but with some delay :)
+        queryClient.removeQueries({ queryKey: [ resourceName ], type: 'inactive' });
+      }, 100);
+    });
+  }, [ queryClient, resourceName, router, scrollToTop ]);
+
+  const onFilterChange = useCallback(<R extends PaginatedResources = Resource>(newFilters: PaginationFilters<R> | undefined) => {
+    const newQuery = omit<typeof router.query>(router.query, 'next_page_params', 'page', 'filterFields' in resource ? resource.filterFields : []);
+    if (newFilters) {
+      Object.entries(newFilters).forEach(([ key, value ]) => {
+        const isValidValue = typeof value === 'boolean' || (value && value.length);
+        if (isValidValue) {
+          newQuery[key] = Array.isArray(value) ? value.join(',') : (String(value) || '');
+        }
+      });
+    }
+    scrollToTop();
+    router.push(
+      {
+        pathname: router.pathname,
+        query: newQuery,
+      },
+      undefined,
+      { shallow: true },
+    ).then(() => {
+      setHasPages(false);
+      setPage(1);
+      setPageParams(INITIAL_PAGE_PARAMS);
+    });
+  }, [ router, resource, scrollToTop ]);
+
+  const onSortingChange = useCallback((newSorting: PaginationSorting<Resource> | undefined) => {
+    const newQuery = {
+      ...omit<typeof router.query>(router.query, 'next_page_params', 'page', SORTING_FIELDS),
+      ...newSorting,
+    };
+    scrollToTop();
+    router.push(
+      {
+        pathname: router.pathname,
+        query: newQuery,
+      },
+      undefined,
+      { shallow: true },
+    ).then(() => {
+      setHasPages(false);
+      setPage(1);
+      setPageParams(INITIAL_PAGE_PARAMS);
+    });
+  }, [ router, scrollToTop ]);
+
+  const hasNextPage = nextPageParams ? Object.keys(nextPageParams).length > 0 : false;
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739
 
   const pagination = {
     page,
diff --git a/ui/shared/radioButtonGroup/RadioButtonGroup.pw.tsx b/ui/shared/radioButtonGroup/RadioButtonGroup.pw.tsx
index 01e60fc43b..a3b7fee236 100644
--- a/ui/shared/radioButtonGroup/RadioButtonGroup.pw.tsx
+++ b/ui/shared/radioButtonGroup/RadioButtonGroup.pw.tsx
@@ -1,19 +1,15 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import RadioButtonGroupTest from './specs/RadioButtonGroupTest';
 
-test('radio button group', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box w="400px" p="10px">
-        <RadioButtonGroupTest/>
-      </Box>
-    </TestApp>,
+test('radio button group', async({ render }) => {
+  const component = await render(
+    <Box w="400px" p="10px">
+      <RadioButtonGroupTest/>
+    </Box>,
   );
-
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/radioButtonGroup/RadioButtonGroup.tsx b/ui/shared/radioButtonGroup/RadioButtonGroup.tsx
index e4eb0b2358..7a3cb25969 100644
--- a/ui/shared/radioButtonGroup/RadioButtonGroup.tsx
+++ b/ui/shared/radioButtonGroup/RadioButtonGroup.tsx
@@ -1,5 +1,5 @@
-import { ButtonGroup, Button, Flex, useRadio, useRadioGroup, useColorModeValue } from '@chakra-ui/react';
-import type { UseRadioProps } from '@chakra-ui/react';
+import { chakra, ButtonGroup, Button, Flex, useRadio, useRadioGroup, Skeleton } from '@chakra-ui/react';
+import type { ChakraProps, UseRadioProps } from '@chakra-ui/react';
 import React from 'react';
 
 import type { IconName } from 'ui/shared/IconSvg';
@@ -8,46 +8,29 @@ import IconSvg from 'ui/shared/IconSvg';
 type RadioItemProps = {
   title: string;
   icon?: IconName;
-  onlyIcon: false | undefined;
+  onlyIcon?: false;
+  contentAfter?: React.ReactNode;
 } | {
   title: string;
   icon: IconName;
   onlyIcon: true;
-}
+};
 
 type RadioButtonProps = UseRadioProps & RadioItemProps;
 
 const RadioButton = (props: RadioButtonProps) => {
   const { getInputProps, getRadioProps } = useRadio(props);
-  const buttonColor = useColorModeValue('blue.50', 'gray.800');
-  const checkedTextColor = useColorModeValue('blue.700', 'gray.50');
 
   const input = getInputProps();
   const checkbox = getRadioProps();
 
-  const styleProps = {
-    flex: 1,
-    variant: 'outline',
-    fontWeight: 500,
-    cursor: props.isChecked ? 'initial' : 'pointer',
-    borderColor: buttonColor,
-    backgroundColor: props.isChecked ? buttonColor : 'none',
-    _hover: {
-      borderColor: buttonColor,
-      ...(props.isChecked ? {} : { color: 'link_hovered' }),
-    },
-    _active: {
-      backgroundColor: 'none',
-    },
-    ...(props.isChecked ? { color: checkedTextColor } : {}),
-  };
-
   if (props.onlyIcon) {
     return (
       <Button
         as="label"
         aria-label={ props.title }
-        { ...styleProps }
+        variant="radio_group"
+        data-selected={ props.isChecked }
       >
         <input { ...input }/>
         <Flex
@@ -63,13 +46,16 @@ const RadioButton = (props: RadioButtonProps) => {
     <Button
       as="label"
       leftIcon={ props.icon ? <IconSvg name={ props.icon } boxSize={ 5 } mr={ -1 }/> : undefined }
-      { ...styleProps }
+      variant="radio_group"
+      data-selected={ props.isChecked }
     >
       <input { ...input }/>
       <Flex
+        alignItems="center"
         { ...checkbox }
       >
         { props.title }
+        { props.contentAfter }
       </Flex>
     </Button>
   );
@@ -80,21 +66,36 @@ type RadioButtonGroupProps<T extends string> = {
   name: string;
   defaultValue: string;
   options: Array<{ value: T } & RadioItemProps>;
-}
+  autoWidth?: boolean;
+  className?: string;
+  isLoading?: boolean;
+};
 
-const RadioButtonGroup = <T extends string>({ onChange, name, defaultValue, options }: RadioButtonGroupProps<T>) => {
+const RadioButtonGroup = <T extends string>({ onChange, name, defaultValue, options, autoWidth = false, className, isLoading }: RadioButtonGroupProps<T>) => {
   const { getRootProps, getRadioProps } = useRadioGroup({ name, defaultValue, onChange });
 
   const group = getRootProps();
 
   return (
-    <ButtonGroup { ...group } isAttached size="sm" display="grid" gridTemplateColumns={ `repeat(${ options.length }, 1fr)` }>
-      { options.map((option) => {
-        const props = getRadioProps({ value: option.value });
-        return <RadioButton { ...props } key={ option.value } { ...option }/>;
-      }) }
-    </ButtonGroup>
+    <Skeleton isLoaded={ !isLoading }>
+      <ButtonGroup
+        { ...group }
+        className={ className }
+        isAttached
+        size="sm"
+        display="grid"
+        gridTemplateColumns={ `repeat(${ options.length }, ${ autoWidth ? 'auto' : '1fr' })` }
+      >
+        { options.map((option) => {
+          const props = getRadioProps({ value: option.value });
+          return <RadioButton { ...props } key={ option.value } { ...option }/>;
+        }) }
+      </ButtonGroup>
+    </Skeleton>
   );
 };
 
-export default RadioButtonGroup;
+const WrappedRadioButtonGroup = chakra(RadioButtonGroup);
+type WrappedComponent = <T extends string>(props: RadioButtonGroupProps<T> & ChakraProps) => React.JSX.Element;
+
+export default React.memo(WrappedRadioButtonGroup) as WrappedComponent;
diff --git a/ui/shared/radioButtonGroup/__screenshots__/RadioButtonGroup.pw.tsx_default_radio-button-group-1.png b/ui/shared/radioButtonGroup/__screenshots__/RadioButtonGroup.pw.tsx_default_radio-button-group-1.png
index 212b0b3e89..97a17fcc54 100644
Binary files a/ui/shared/radioButtonGroup/__screenshots__/RadioButtonGroup.pw.tsx_default_radio-button-group-1.png and b/ui/shared/radioButtonGroup/__screenshots__/RadioButtonGroup.pw.tsx_default_radio-button-group-1.png differ
diff --git a/ui/shared/reCaptcha/ReCaptcha.tsx b/ui/shared/reCaptcha/ReCaptcha.tsx
new file mode 100644
index 0000000000..83152d7266
--- /dev/null
+++ b/ui/shared/reCaptcha/ReCaptcha.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import ReCaptcha from 'react-google-recaptcha';
+
+import config from 'configs/app';
+
+interface Props {
+  disabledFeatureMessage?: React.ReactNode;
+}
+
+const ReCaptchaInvisible = ({ disabledFeatureMessage }: Props, ref: React.Ref<ReCaptcha>) => {
+  if (!config.services.reCaptchaV2.siteKey) {
+    return disabledFeatureMessage ?? null;
+  }
+
+  return (
+    <ReCaptcha
+      ref={ ref }
+      sitekey={ config.services.reCaptchaV2.siteKey }
+      size="invisible"
+    />
+  );
+};
+
+export default React.forwardRef(ReCaptchaInvisible);
diff --git a/ui/shared/reCaptcha/useReCaptcha.tsx b/ui/shared/reCaptcha/useReCaptcha.tsx
new file mode 100644
index 0000000000..f4a5713854
--- /dev/null
+++ b/ui/shared/reCaptcha/useReCaptcha.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import type ReCAPTCHA from 'react-google-recaptcha';
+
+export default function useReCaptcha() {
+  const ref = React.useRef<ReCAPTCHA>(null);
+  const rejectCb = React.useRef<((error: Error) => void) | null>(null);
+
+  const [ isOpen, setIsOpen ] = React.useState(false);
+
+  const executeAsync = React.useCallback(async() => {
+    setIsOpen(true);
+    const tokenPromise = ref.current?.executeAsync() || Promise.reject(new Error('Unable to execute ReCaptcha'));
+    const modalOpenPromise = new Promise<void>((resolve, reject) => {
+      rejectCb.current = reject;
+    });
+
+    return Promise.race([ tokenPromise, modalOpenPromise ]);
+  }, [ ref ]);
+
+  const handleContainerClick = React.useCallback(() => {
+    setIsOpen(false);
+    rejectCb.current?.(new Error('ReCaptcha is not solved'));
+  }, []);
+
+  React.useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const container = window.document.querySelector('div:has(div):has(iframe[title="recaptcha challenge expires in two minutes"])');
+    container?.addEventListener('click', handleContainerClick);
+
+    return () => {
+      container?.removeEventListener('click', handleContainerClick);
+    };
+  }, [ isOpen, handleContainerClick ]);
+
+  return React.useMemo(() => ({ ref, executeAsync }), [ ref, executeAsync ]);
+}
diff --git a/ui/shared/search/utils.ts b/ui/shared/search/utils.ts
index 652c973ebd..31da3bc447 100644
--- a/ui/shared/search/utils.ts
+++ b/ui/shared/search/utils.ts
@@ -1,9 +1,9 @@
-import type { SearchResultItem } from 'types/api/search';
 import type { MarketplaceAppOverview } from 'types/client/marketplace';
+import type { SearchResultItem } from 'types/client/search';
 
 import config from 'configs/app';
 
-export type ApiCategory = 'token' | 'nft' | 'address' | 'public_tag' | 'transaction' | 'block' | 'user_operation';
+export type ApiCategory = 'token' | 'nft' | 'address' | 'public_tag' | 'transaction' | 'block' | 'user_operation' | 'blob' | 'domain';
 export type Category = ApiCategory | 'app';
 
 export type ItemsCategoriesMap =
@@ -13,12 +13,12 @@ Record<'app', Array<MarketplaceAppOverview>>;
 export type SearchResultAppItem = {
   type: 'app';
   app: MarketplaceAppOverview;
-}
+};
 
-export const searchCategories: Array<{id: Category; title: string }> = [
-  { id: 'app', title: 'Apps' },
-  { id: 'token', title: 'Tokens (ERC-20)' },
-  { id: 'nft', title: 'NFTs (ERC-721 & 1155)' },
+export const searchCategories: Array<{ id: Category; title: string }> = [
+  { id: 'app', title: 'DApps' },
+  { id: 'token', title: `Tokens (${ config.chain.tokenStandard }-20)` },
+  { id: 'nft', title: `NFTs (${ config.chain.tokenStandard }-721 & 1155)` },
   { id: 'address', title: 'Addresses' },
   { id: 'public_tag', title: 'Public tags' },
   { id: 'transaction', title: 'Transactions' },
@@ -29,8 +29,17 @@ if (config.features.userOps.isEnabled) {
   searchCategories.push({ id: 'user_operation', title: 'User operations' });
 }
 
+if (config.features.dataAvailability.isEnabled) {
+  searchCategories.push({ id: 'blob', title: 'Blobs' });
+}
+
+if (config.features.nameService.isEnabled) {
+  searchCategories.unshift({ id: 'domain', title: 'Names' });
+}
+
 export const searchItemTitles: Record<Category, { itemTitle: string; itemTitleShort: string }> = {
-  app: { itemTitle: 'App', itemTitleShort: 'App' },
+  app: { itemTitle: 'DApp', itemTitleShort: 'App' },
+  domain: { itemTitle: 'Name', itemTitleShort: 'Name' },
   token: { itemTitle: 'Token', itemTitleShort: 'Token' },
   nft: { itemTitle: 'NFT', itemTitleShort: 'NFT' },
   address: { itemTitle: 'Address', itemTitleShort: 'Address' },
@@ -38,6 +47,7 @@ export const searchItemTitles: Record<Category, { itemTitle: string; itemTitleSh
   transaction: { itemTitle: 'Transaction', itemTitleShort: 'Txn' },
   block: { itemTitle: 'Block', itemTitleShort: 'Block' },
   user_operation: { itemTitle: 'User operation', itemTitleShort: 'User op' },
+  blob: { itemTitle: 'Blob', itemTitleShort: 'Blob' },
 };
 
 export function getItemCategory(item: SearchResultItem | SearchResultAppItem): Category | undefined {
@@ -67,5 +77,11 @@ export function getItemCategory(item: SearchResultItem | SearchResultAppItem): C
     case 'user_operation': {
       return 'user_operation';
     }
+    case 'blob': {
+      return 'blob';
+    }
+    case 'ens_domain': {
+      return 'domain';
+    }
   }
 }
diff --git a/ui/shared/select/Select.tsx b/ui/shared/select/Select.tsx
new file mode 100644
index 0000000000..8ac82a6512
--- /dev/null
+++ b/ui/shared/select/Select.tsx
@@ -0,0 +1,65 @@
+import { PopoverTrigger, chakra, useDisclosure, useRadioGroup } from '@chakra-ui/react';
+import React from 'react';
+
+import type { SelectOption } from './types';
+
+import Popover from 'ui/shared/chakra/Popover';
+
+import SelectButton from './SelectButton';
+import SelectContent from './SelectContent';
+
+interface InjectedProps<Value extends string> {
+  isOpen: boolean;
+  onToggle: () => void;
+  value: Value;
+}
+
+export interface Props<Value extends string> {
+  className?: string;
+  isLoading?: boolean;
+  options: Array<SelectOption<Value>>;
+  name: string;
+  defaultValue?: Value;
+  onChange: (value: Value) => void;
+  children?: (props: InjectedProps<Value>) => React.ReactNode;
+}
+
+const Select = <Value extends string>({ className, isLoading, options, name, defaultValue, onChange, children }: Props<Value>) => {
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  const handleChange = React.useCallback((value: Value) => {
+    onChange(value);
+    onClose();
+  }, [ onChange, onClose ]);
+
+  const { value, getRootProps, getRadioProps, setValue } = useRadioGroup({
+    name,
+    defaultValue,
+    onChange: handleChange,
+  });
+
+  React.useEffect(() => {
+    if (defaultValue) {
+      setValue(defaultValue);
+    }
+  }, [ defaultValue, setValue ]);
+
+  return (
+    <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
+      <PopoverTrigger>
+        { children?.({ isOpen, onToggle, value: value as Value }) || (
+          <SelectButton
+            className={ className }
+            onClick={ onToggle }
+            isOpen={ isOpen }
+            isLoading={ isLoading }
+            label={ options.find((option) => option.value === value)?.label || String(value) }
+          />
+        ) }
+      </PopoverTrigger>
+      <SelectContent options={ options } getRootProps={ getRootProps } getRadioProps={ getRadioProps } value={ value }/>
+    </Popover>
+  );
+};
+
+export default React.memo(chakra(Select));
diff --git a/ui/shared/select/SelectButton.tsx b/ui/shared/select/SelectButton.tsx
new file mode 100644
index 0000000000..0bcbf202c5
--- /dev/null
+++ b/ui/shared/select/SelectButton.tsx
@@ -0,0 +1,46 @@
+import { Box, Button, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props {
+  className?: string;
+  onClick: () => void;
+  isOpen: boolean;
+  isLoading?: boolean;
+  label: string;
+}
+
+const SelectButton = ({ className, onClick, isOpen, isLoading, label }: Props, ref: React.Ref<HTMLButtonElement>) => {
+
+  if (isLoading) {
+    return <Skeleton className={ className } h={ 8 } borderRadius="base" flexShrink={ 0 }/>;
+  }
+
+  return (
+    <Button
+      ref={ ref }
+      className={ className }
+      variant="outline"
+      size="sm"
+      colorScheme="gray"
+      fontWeight="500"
+      lineHeight={ 5 }
+      display="flex"
+      alignItems="center"
+      justifyContent="space-between"
+      columnGap={ 1 }
+      onClick={ onClick }
+      isActive={ isOpen }
+      pl={ 2 }
+      pr={ 1 }
+      py={ 1 }
+      flexShrink={ 0 }
+    >
+      <Box maxW="calc(100% - 20px)" overflow="hidden" textOverflow="ellipsis">{ label }</Box>
+      <IconSvg name="arrows/east-mini" boxSize={ 5 } transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' } flexShrink={ 0 }/>
+    </Button>
+  );
+};
+
+export default React.forwardRef(SelectButton);
diff --git a/ui/shared/select/SelectContent.tsx b/ui/shared/select/SelectContent.tsx
new file mode 100644
index 0000000000..2241a8454d
--- /dev/null
+++ b/ui/shared/select/SelectContent.tsx
@@ -0,0 +1,36 @@
+import type { useRadioGroup } from '@chakra-ui/react';
+import { PopoverBody, PopoverContent } from '@chakra-ui/react';
+import React from 'react';
+
+import type { SelectOption as TSelectOption } from './types';
+
+import SelectOption from './SelectOption';
+
+interface Props {
+  options: Array<TSelectOption>;
+  getRootProps: ReturnType<typeof useRadioGroup>['getRootProps'];
+  getRadioProps: ReturnType<typeof useRadioGroup>['getRadioProps'];
+  value: string | number;
+}
+
+const SelectContent = ({ options, getRootProps, getRadioProps, value }: Props) => {
+
+  const root = getRootProps();
+
+  return (
+    <PopoverContent w="fit-content" minW="150px">
+      <PopoverBody { ...root } py={ 2 } px={ 0 } display="flex" flexDir="column">
+        { options.map((option) => {
+          const radio = getRadioProps({ value: option.value });
+          return (
+            <SelectOption key={ option.value } { ...radio } isChecked={ radio.isChecked || (!option.value && !value) }>
+              { option.label }
+            </SelectOption>
+          );
+        }) }
+      </PopoverBody>
+    </PopoverContent>
+  );
+};
+
+export default React.memo(SelectContent);
diff --git a/ui/shared/select/SelectOption.tsx b/ui/shared/select/SelectOption.tsx
new file mode 100644
index 0000000000..c8fe1ba962
--- /dev/null
+++ b/ui/shared/select/SelectOption.tsx
@@ -0,0 +1,40 @@
+import type { UseRadioProps } from '@chakra-ui/react';
+import { Box, useRadio, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from '../IconSvg';
+
+interface Props extends UseRadioProps {
+  children: React.ReactNode;
+}
+
+const SelectOption = (props: Props) => {
+  const { getInputProps, getRadioProps } = useRadio(props);
+
+  const input = getInputProps();
+  const checkbox = getRadioProps();
+  const bgColorHover = useColorModeValue('blue.50', 'whiteAlpha.100');
+
+  return (
+    <Box
+      as="label"
+      px={ 4 }
+      py={ 2 }
+      cursor="pointer"
+      display="flex"
+      columnGap={ 2 }
+      alignItems="center"
+      _hover={{
+        bgColor: bgColorHover,
+      }}
+    >
+      { props.isChecked ? <IconSvg name="check" boxSize={ 5 }/> : <Box boxSize={ 5 }/> }
+      <input { ...input }/>
+      <Box { ...checkbox }>
+        { props.children }
+      </Box>
+    </Box>
+  );
+};
+
+export default React.memo(SelectOption);
diff --git a/ui/shared/select/types.ts b/ui/shared/select/types.ts
new file mode 100644
index 0000000000..7ec98a9086
--- /dev/null
+++ b/ui/shared/select/types.ts
@@ -0,0 +1,4 @@
+export interface SelectOption<Value extends string = string> {
+  value: Value | undefined;
+  label: string;
+}
diff --git a/ui/shared/solidityscanReport/SolidityscanReportButton.tsx b/ui/shared/solidityscanReport/SolidityscanReportButton.tsx
new file mode 100644
index 0000000000..c099ef70b6
--- /dev/null
+++ b/ui/shared/solidityscanReport/SolidityscanReportButton.tsx
@@ -0,0 +1,62 @@
+import { Button, Spinner, Tooltip, useColorModeValue, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import usePreventFocusAfterModalClosing from 'lib/hooks/usePreventFocusAfterModalClosing';
+import IconSvg from 'ui/shared/IconSvg';
+
+import useScoreLevelAndColor from './useScoreLevelAndColor';
+
+interface Props {
+  score: number;
+  isLoading?: boolean;
+  onlyIcon?: boolean;
+  onClick?: () => void;
+  label?: string | React.ReactElement;
+  isActive: boolean;
+  className?: string;
+}
+
+const SolidityscanReportButton = (
+  { score, isLoading, onlyIcon, onClick, label = 'Security score', isActive, className }: Props,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) => {
+  const { scoreColor } = useScoreLevelAndColor(score);
+  const colorLoading = useColorModeValue('gray.300', 'gray.600');
+  const isMobile = useIsMobile();
+  const onFocusCapture = usePreventFocusAfterModalClosing();
+
+  return (
+    <Tooltip label={ label } isDisabled={ isMobile } openDelay={ 100 } textAlign="center">
+      <Button
+        className={ className }
+        ref={ ref }
+        color={ isLoading ? colorLoading : scoreColor }
+        size="sm"
+        variant="outline"
+        colorScheme="gray"
+        onClick={ onClick }
+        isActive={ isActive }
+        aria-label="SolidityScan score"
+        fontWeight={ 500 }
+        px="6px"
+        flexShrink={ 0 }
+        columnGap={ 1 }
+        isDisabled={ isLoading }
+        _disabled={{
+          opacity: 1,
+          _hover: {
+            color: colorLoading,
+          },
+        }}
+        onFocusCapture={ onFocusCapture }
+      >
+        <IconSvg name={ score < 80 ? 'score/score-not-ok' : 'score/score-ok' } boxSize={ 5 }/>
+        { isLoading && <Spinner size="sm"/> }
+        { !isLoading && (onlyIcon ? null : score) }
+      </Button>
+    </Tooltip>
+  );
+};
+
+export default chakra(React.forwardRef(SolidityscanReportButton));
diff --git a/ui/shared/solidityscanReport/SolidityscanReportDetails.tsx b/ui/shared/solidityscanReport/SolidityscanReportDetails.tsx
new file mode 100644
index 0000000000..210056f514
--- /dev/null
+++ b/ui/shared/solidityscanReport/SolidityscanReportDetails.tsx
@@ -0,0 +1,65 @@
+import { Box, Flex, Text, Grid, useColorModeValue, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { SolidityScanReportSeverityDistribution } from 'lib/solidityScan/schema';
+
+type DistributionItem = {
+  id: keyof SolidityScanReportSeverityDistribution;
+  name: string;
+  color: string;
+};
+
+const DISTRIBUTION_ITEMS: Array<DistributionItem> = [
+  { id: 'critical', name: 'Critical', color: '#891F11' },
+  { id: 'high', name: 'High', color: '#EC672C' },
+  { id: 'medium', name: 'Medium', color: '#FBE74D' },
+  { id: 'low', name: 'Low', color: '#68C88E' },
+  { id: 'informational', name: 'Informational', color: '#A3AEBE' },
+  { id: 'gas', name: 'Gas', color: '#A47585' },
+];
+
+interface Props {
+  vulnerabilities: SolidityScanReportSeverityDistribution;
+  vulnerabilitiesCount: number;
+}
+
+type ItemProps = {
+  item: DistributionItem;
+  vulnerabilities: SolidityScanReportSeverityDistribution;
+  vulnerabilitiesCount: number;
+};
+
+const SolidityScanReportItem = ({ item, vulnerabilities, vulnerabilitiesCount }: ItemProps) => {
+  const bgBar = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+  const yetAnotherGrayColor = useColorModeValue('gray.400', 'gray.500');
+  const vulnerability = vulnerabilities[item.id];
+
+  if (vulnerability === undefined) {
+    return null;
+  }
+
+  return (
+    <>
+      <Box w={ 3 } h={ 3 } bg={ item.color } borderRadius="6px" mr={ 2 }></Box>
+      <Flex justifyContent="space-between" mr={ 3 }>
+        <Text>{ item.name }</Text>
+        <Text color={ vulnerability > 0 ? 'text' : yetAnotherGrayColor }>{ vulnerabilities[item.id] }</Text>
+      </Flex>
+      <Box bg={ bgBar } h="10px" borderRadius="8px">
+        <Box bg={ item.color } w={ vulnerability / vulnerabilitiesCount } h="10px" borderRadius="8px"/>
+      </Box>
+    </>
+  );
+};
+
+const SolidityscanReportDetails = ({ vulnerabilities, vulnerabilitiesCount }: Props) => {
+  return (
+    <Grid templateColumns="20px 1fr 100px" alignItems="center" rowGap={ 2 }>
+      { DISTRIBUTION_ITEMS.map(item => (
+        <SolidityScanReportItem item={ item } key={ item.id } vulnerabilities={ vulnerabilities } vulnerabilitiesCount={ vulnerabilitiesCount }/>
+      )) }
+    </Grid>
+  );
+};
+
+export default chakra(SolidityscanReportDetails);
diff --git a/ui/shared/solidityscanReport/SolidityscanReportScore.tsx b/ui/shared/solidityscanReport/SolidityscanReportScore.tsx
new file mode 100644
index 0000000000..56bd296630
--- /dev/null
+++ b/ui/shared/solidityscanReport/SolidityscanReportScore.tsx
@@ -0,0 +1,45 @@
+import { Box, Flex, Text, chakra, Center, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+import useScoreLevelAndColor from './useScoreLevelAndColor';
+
+interface Props {
+  className?: string;
+  score: number;
+}
+
+const SolidityscanReportScore = ({ className, score }: Props) => {
+  const { scoreLevel, scoreColor } = useScoreLevelAndColor(score);
+
+  const chartGrayColor = useColorModeValue('gray.100', 'gray.700');
+  const yetAnotherGrayColor = useColorModeValue('gray.400', 'gray.500');
+  const popoverBgColor = useColorModeValue('white', 'gray.900');
+
+  return (
+    <Flex className={ className } alignItems="center">
+      <Box
+        w={ 12 }
+        h={ 12 }
+        bgGradient={ `conic-gradient(${ scoreColor } 0, ${ scoreColor } ${ score }%, ${ chartGrayColor } 0, ${ chartGrayColor } 100%)` }
+        borderRadius="24px"
+        position="relative"
+        mr={ 3 }
+      >
+        <Center position="absolute" w="38px" h="38px" top="5px" right="5px" bg={ popoverBgColor } borderRadius="20px">
+          <IconSvg name={ score < 80 ? 'score/score-not-ok' : 'score/score-ok' } boxSize={ 5 } color={ scoreColor }/>
+        </Center>
+      </Box>
+      <Box>
+        <Flex>
+          <Text color={ scoreColor } fontSize="lg" fontWeight={ 500 }>{ score }</Text>
+          <Text color={ yetAnotherGrayColor } fontSize="lg" fontWeight={ 500 } whiteSpace="pre"> / 100</Text>
+        </Flex>
+        <Text color={ scoreColor } fontWeight={ 500 }>Security score is { scoreLevel }</Text>
+      </Box>
+    </Flex>
+  );
+};
+
+export default chakra(SolidityscanReportScore);
diff --git a/ui/shared/solidityscanReport/useScoreLevelAndColor.ts b/ui/shared/solidityscanReport/useScoreLevelAndColor.ts
new file mode 100644
index 0000000000..b61d2a9109
--- /dev/null
+++ b/ui/shared/solidityscanReport/useScoreLevelAndColor.ts
@@ -0,0 +1,21 @@
+import { useColorModeValue } from '@chakra-ui/react';
+
+export default function useScoreLevelAndColor(score: number) {
+  const greatScoreColor = useColorModeValue('green.600', 'green.400');
+  const averageScoreColor = useColorModeValue('purple.600', 'purple.400');
+  const lowScoreColor = useColorModeValue('red.600', 'red.400');
+
+  let scoreColor;
+  let scoreLevel;
+  if (score >= 80) {
+    scoreColor = greatScoreColor;
+    scoreLevel = 'GREAT';
+  } else if (score >= 30) {
+    scoreColor = averageScoreColor;
+    scoreLevel = 'AVERAGE';
+  } else {
+    scoreColor = lowScoreColor;
+    scoreLevel = 'LOW';
+  }
+  return { scoreColor, scoreLevel };
+}
diff --git a/ui/shared/sort/ButtonDesktop.tsx b/ui/shared/sort/ButtonDesktop.tsx
new file mode 100644
index 0000000000..e127a5e9db
--- /dev/null
+++ b/ui/shared/sort/ButtonDesktop.tsx
@@ -0,0 +1,57 @@
+import {
+  Box,
+  useColorModeValue,
+  Button,
+  Skeleton,
+  chakra,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+type ButtonProps = {
+  isActive: boolean;
+  onClick: () => void;
+  isLoading?: boolean;
+  children: React.ReactNode;
+  className?: string;
+};
+
+const ButtonDesktop = ({ children, isActive, onClick, isLoading, className }: ButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {
+  const primaryColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
+  const secondaryColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
+
+  return (
+    <Skeleton isLoaded={ !isLoading }>
+      <Button
+        className={ className }
+        ref={ ref }
+        size="sm"
+        variant="outline"
+        onClick={ onClick }
+        color={ primaryColor }
+        fontWeight="600"
+        borderColor="transparent"
+        px={ 2 }
+        data-selected={ isActive }
+      >
+        <Box
+          as={ isActive ? 'div' : 'span' }
+          color={ isActive ? 'inherit' : secondaryColor }
+          fontWeight="400"
+          mr={ 1 }
+          transition={ isActive ? 'none' : 'inherit' }
+        >Sort by</Box>
+        { children }
+        <IconSvg
+          name="arrows/east-mini"
+          boxSize={ 5 }
+          ml={ 1 }
+          transform={ isActive ? 'rotate(90deg)' : 'rotate(-90deg)' }
+        />
+      </Button>
+    </Skeleton>
+  );
+};
+
+export default chakra(React.forwardRef(ButtonDesktop));
diff --git a/ui/shared/sort/ButtonMobile.tsx b/ui/shared/sort/ButtonMobile.tsx
new file mode 100644
index 0000000000..7a898c9135
--- /dev/null
+++ b/ui/shared/sort/ButtonMobile.tsx
@@ -0,0 +1,35 @@
+import { IconButton, chakra, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+type Props = {
+  onClick: () => void;
+  isActive: boolean;
+  className?: string;
+  isLoading?: boolean;
+};
+
+const ButtonMobile = ({ onClick, isActive, className, isLoading }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+  if (isLoading) {
+    return <Skeleton className={ className } w="36px" h="32px" borderRadius="base"/>;
+  }
+
+  return (
+    <IconButton
+      ref={ ref }
+      icon={ <IconSvg name="arrows/up-down" boxSize={ 5 }/> }
+      aria-label="sort"
+      size="sm"
+      variant="outline"
+      colorScheme="gray"
+      minWidth="36px"
+      onClick={ onClick }
+      isActive={ isActive }
+      display="flex"
+      className={ className }
+    />
+  );
+};
+
+export default chakra(React.forwardRef(ButtonMobile));
diff --git a/ui/shared/sort/Sort.tsx b/ui/shared/sort/Sort.tsx
index 37b378abf4..fb0aba87a6 100644
--- a/ui/shared/sort/Sort.tsx
+++ b/ui/shared/sort/Sort.tsx
@@ -1,58 +1,38 @@
-import {
-  chakra,
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuOptionGroup,
-  MenuItemOption,
-  useDisclosure,
-} from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import SortButton from './SortButton';
+import type { SelectOption } from 'ui/shared/select/types';
 
-export interface Option<Sort extends string> {
-  title: string;
-  id: Sort | undefined;
-}
+import useIsMobile from 'lib/hooks/useIsMobile';
+import Select, { type Props as SelectProps } from 'ui/shared/select/Select';
 
-interface Props<Sort extends string> {
-  options: Array<Option<Sort>>;
-  sort: Sort | undefined;
-  setSort: (value: Sort | undefined) => void;
-  isLoading?: boolean;
-}
+import SortButtonDesktop from './ButtonDesktop';
+import SortButtonMobile from './ButtonMobile';
 
-const Sort = <Sort extends string>({ sort, setSort, options, isLoading }: Props<Sort>) => {
-  const { isOpen, onToggle } = useDisclosure();
+type Props<Value extends string> = Omit<SelectProps<Value>, 'children'>;
 
-  const setSortingFromMenu = React.useCallback((val: string | Array<string>) => {
-    const value = val as Sort | Array<Sort>;
-    setSort(Array.isArray(value) ? value[0] : value);
-  }, [ setSort ]);
+const Sort = <Sort extends string>({ name, options, isLoading, onChange, defaultValue }: Props<Sort>) => {
+  const isMobile = useIsMobile(false);
 
   return (
-    <Menu>
-      <MenuButton as="div">
-        <SortButton
-          isActive={ isOpen || Boolean(sort) }
-          onClick={ onToggle }
-          isLoading={ isLoading }
-        />
-      </MenuButton>
-      <MenuList minWidth="240px" zIndex="popover">
-        <MenuOptionGroup value={ sort } title="Sort by" type="radio" onChange={ setSortingFromMenu }>
-          { options.map((option) => (
-            <MenuItemOption
-              key={ option.id || 'default' }
-              value={ option.id }
-            >
-              { option.title }
-            </MenuItemOption>
-          )) }
-        </MenuOptionGroup>
-      </MenuList>
-    </Menu>
+    <Select
+      options={ options }
+      name={ name }
+      defaultValue={ defaultValue }
+      onChange={ onChange }
+    >
+      { ({ isOpen, onToggle, value }) => {
+        return (
+          isMobile ? (
+            <SortButtonMobile isActive={ isOpen || Boolean(value) } onClick={ onToggle } isLoading={ isLoading }/>
+          ) : (
+            <SortButtonDesktop isActive={ isOpen } isLoading={ isLoading } onClick={ onToggle }>
+              { options.find((option: SelectOption<Sort>) => option.value === value || (!option.value && !value))?.label }
+            </SortButtonDesktop>
+          )
+        );
+      } }
+    </Select>
   );
 };
 
diff --git a/ui/shared/sort/SortButton.tsx b/ui/shared/sort/SortButton.tsx
deleted file mode 100644
index 903bb1fcec..0000000000
--- a/ui/shared/sort/SortButton.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { IconButton, chakra, Skeleton } from '@chakra-ui/react';
-import React from 'react';
-
-import IconSvg from 'ui/shared/IconSvg';
-
-type Props = {
-  onClick: () => void;
-  isActive: boolean;
-  className?: string;
-  isLoading?: boolean;
-}
-
-const SortButton = ({ onClick, isActive, className, isLoading }: Props) => {
-  if (isLoading) {
-    return <Skeleton className={ className } w="36px" h="32px" borderRadius="base"/>;
-  }
-
-  return (
-    <IconButton
-      icon={ <IconSvg name="arrows/up-down" boxSize={ 5 }/> }
-      aria-label="sort"
-      size="sm"
-      variant="outline"
-      colorScheme="gray-dark"
-      minWidth="36px"
-      onClick={ onClick }
-      isActive={ isActive }
-      display="flex"
-      className={ className }
-    />
-  );
-};
-
-export default chakra(SortButton);
diff --git a/ui/shared/sort/getNextSortOrder.tsx b/ui/shared/sort/getNextSortOrder.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/ui/shared/sort/getNextSortValue.ts b/ui/shared/sort/getNextSortValue.ts
index 9e29662971..06b4153fb0 100644
--- a/ui/shared/sort/getNextSortValue.ts
+++ b/ui/shared/sort/getNextSortValue.ts
@@ -1,10 +1,19 @@
 export default function getNextSortValue<SortField extends string, Sort extends string>(
-  sortSequence: Record<SortField, Array<Sort| undefined>>, field: SortField,
+  sortSequence: Record<SortField, Array<Sort | undefined>>, field: SortField,
 ) {
   return (prevValue: Sort | undefined) => {
     const sequence = sortSequence[field];
-    const curIndex = sequence.findIndex((sort) => sort === prevValue);
-    const nextIndex = curIndex + 1 > sequence.length - 1 ? 0 : curIndex + 1;
-    return sequence[nextIndex];
+    return getNextValueFromSequence(sequence, prevValue);
   };
 }
+
+export function getNextValueFromSequence<T>(sequence: Array<T>, prevValue: T) {
+  const curIndex = sequence.findIndex((val) => val === prevValue);
+  const nextIndex = curIndex + 1 > sequence.length - 1 ? 0 : curIndex + 1;
+  return sequence[nextIndex];
+}
+
+// asc desc undefined
+type Order = 'asc' | 'desc' | undefined;
+const sequence: Array<Order> = [ 'desc', 'asc', undefined ];
+export const getNextOrderValue = (getNextValueFromSequence<Order>).bind(undefined, sequence);
diff --git a/ui/shared/sort/getSortParamsFromQuery.ts b/ui/shared/sort/getSortParamsFromQuery.ts
new file mode 100644
index 0000000000..fd094917a9
--- /dev/null
+++ b/ui/shared/sort/getSortParamsFromQuery.ts
@@ -0,0 +1,23 @@
+import type { Query } from 'nextjs-routes';
+
+import getQueryParamString from 'lib/router/getQueryParamString';
+
+export default function getSortParamsFromQuery<T>(query: Query, sortOptions: Record<string, Array<string | undefined>>) {
+  if (!query.sort || !query.order) {
+    return undefined;
+  }
+
+  const sortStr = getQueryParamString(query.sort);
+
+  if (!Object.keys(sortOptions).includes(sortStr)) {
+    return undefined;
+  }
+
+  const orderStr = getQueryParamString(query.order);
+
+  if (!sortOptions[sortStr].includes(orderStr)) {
+    return undefined;
+  }
+
+  return ({ sort: sortStr, order: orderStr } as T);
+}
diff --git a/ui/shared/sort/getSortValueFromQuery.ts b/ui/shared/sort/getSortValueFromQuery.ts
index 9e8f823c60..4bb9fc4a78 100644
--- a/ui/shared/sort/getSortValueFromQuery.ts
+++ b/ui/shared/sort/getSortValueFromQuery.ts
@@ -1,14 +1,14 @@
-import type { Query } from 'nextjs-routes';
+import type { SelectOption } from 'ui/shared/select/types';
 
-import type { Option } from 'ui/shared/sort/Sort';
+import type { Query } from 'nextjs-routes';
 
-export default function getSortValueFromQuery<SortValue extends string>(query: Query, sortOptions: Array<Option<SortValue>>) {
+export default function getSortValueFromQuery<SortValue extends string>(query: Query, sortOptions: Array<SelectOption<SortValue>>) {
   if (!query.sort || !query.order) {
     return undefined;
   }
 
   const str = query.sort + '-' + query.order;
-  if (sortOptions.map(option => option.id).includes(str as SortValue)) {
+  if (sortOptions.map(option => option.value).includes(str as SortValue)) {
     return str as SortValue;
   }
 }
diff --git a/ui/shared/stats/StatsWidget.pw.tsx b/ui/shared/stats/StatsWidget.pw.tsx
new file mode 100644
index 0000000000..cc9fad8da4
--- /dev/null
+++ b/ui/shared/stats/StatsWidget.pw.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { test, expect } from 'playwright/lib';
+
+import StatsWidget from './StatsWidget';
+
+test.use({ viewport: { width: 300, height: 100 } });
+
+test('with positive diff +@dark-mode', async({ render }) => {
+  const component = await render(
+    <StatsWidget
+      label="Verified contracts"
+      hint="Contracts that have been verified"
+      value="1 000 000"
+      diff={ 4200 }
+      diffFormatted="4 200"
+    />,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+// according to current logic we don't show diff if it's negative
+test('with negative diff', async({ render }) => {
+  const component = await render(
+    <StatsWidget
+      label="Verified contracts"
+      hint="Contracts that have been verified"
+      value="1,000,000"
+      diff={ -4200 }
+    />,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('loading state', async({ render }) => {
+  const component = await render(
+    <StatsWidget
+      label="Verified contracts"
+      hint="Contracts that have been verified"
+      value="1,000,000"
+      isLoading
+    />,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('with period only', async({ render }) => {
+  const component = await render(
+    <StatsWidget
+      label="Verified contracts"
+      hint="Contracts that have been verified"
+      value="1,000,000"
+      period="1h"
+    />,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/shared/stats/StatsWidget.tsx b/ui/shared/stats/StatsWidget.tsx
new file mode 100644
index 0000000000..2c52639068
--- /dev/null
+++ b/ui/shared/stats/StatsWidget.tsx
@@ -0,0 +1,130 @@
+import { Box, Flex, Text, Skeleton, useColorModeValue, chakra } from '@chakra-ui/react';
+import NextLink from 'next/link';
+import React from 'react';
+
+import type { Route } from 'nextjs-routes';
+
+import Hint from 'ui/shared/Hint';
+import IconSvg, { type IconName } from 'ui/shared/IconSvg';
+import TruncatedValue from 'ui/shared/TruncatedValue';
+
+export type Props = {
+  className?: string;
+  label: string;
+  value: string | React.ReactNode;
+  valuePrefix?: string;
+  valuePostfix?: string;
+  hint?: string | React.ReactNode;
+  isLoading?: boolean;
+  diff?: string | number;
+  diffFormatted?: string;
+  diffPeriod?: '24h';
+  period?: '1h' | '24h';
+  href?: Route;
+  icon?: IconName;
+};
+
+const Container = ({ href, children }: { href?: Route; children: React.JSX.Element }) => {
+  if (href) {
+    return (
+      <NextLink href={ href } passHref legacyBehavior>
+        { children }
+      </NextLink>
+    );
+  }
+
+  return children;
+};
+
+const StatsWidget = ({
+  className,
+  icon,
+  label,
+  value,
+  valuePrefix,
+  valuePostfix,
+  isLoading,
+  hint,
+  diff,
+  diffPeriod = '24h',
+  diffFormatted,
+  period,
+  href,
+}: Props) => {
+  const bgColor = useColorModeValue('gray.50', 'whiteAlpha.100');
+  const skeletonBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+  const hintColor = useColorModeValue('gray.600', 'gray.400');
+
+  return (
+    <Container href={ !isLoading ? href : undefined }>
+      <Flex
+        className={ className }
+        alignItems="center"
+        bgColor={ isLoading ? skeletonBgColor : bgColor }
+        p={ 3 }
+        borderRadius="base"
+        justifyContent="space-between"
+        columnGap={ 2 }
+        { ...(href && !isLoading ? {
+          as: 'a',
+          href,
+        } : {}) }
+      >
+        { icon && (
+          <IconSvg
+            name={ icon }
+            p={ 2 }
+            boxSize="40px"
+            isLoading={ isLoading }
+            borderRadius="base"
+            display={{ base: 'none', lg: 'block' }}
+            flexShrink={ 0 }
+          />
+        ) }
+        <Box w={{ base: '100%', lg: icon ? 'calc(100% - 48px)' : '100%' }}>
+          <Skeleton
+            isLoaded={ !isLoading }
+            color="text_secondary"
+            fontSize="xs"
+            lineHeight="16px"
+            w="fit-content"
+          >
+            <h2>{ label }</h2>
+          </Skeleton>
+          <Skeleton
+            isLoaded={ !isLoading }
+            display="flex"
+            alignItems="baseline"
+            fontWeight={ 500 }
+            fontSize="lg"
+            lineHeight={ 6 }
+          >
+            { valuePrefix && <chakra.span whiteSpace="pre">{ valuePrefix }</chakra.span> }
+            { typeof value === 'string' ? (
+              <TruncatedValue isLoading={ isLoading } value={ value }/>
+            ) : (
+              value
+            ) }
+            { valuePostfix && <chakra.span whiteSpace="pre">{ valuePostfix }</chakra.span> }
+            { diff && Number(diff) > 0 && (
+              <>
+                <Text ml={ 2 } mr={ 1 } color="green.500">
+                  +{ diffFormatted || Number(diff).toLocaleString() }
+                </Text>
+                <Text variant="secondary" fontSize="sm">({ diffPeriod })</Text>
+              </>
+            ) }
+            { period && <Text variant="secondary" fontSize="xs" fontWeight={ 400 } ml={ 1 }>({ period })</Text> }
+          </Skeleton>
+        </Box>
+        { typeof hint === 'string' ? (
+          <Skeleton isLoaded={ !isLoading } alignSelf="center" borderRadius="base">
+            <Hint label={ hint } boxSize={ 6 } color={ hintColor }/>
+          </Skeleton>
+        ) : hint }
+      </Flex>
+    </Container>
+  );
+};
+
+export default chakra(StatsWidget);
diff --git a/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_dark-color-mode_with-positive-diff-dark-mode-1.png b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_dark-color-mode_with-positive-diff-dark-mode-1.png
new file mode 100644
index 0000000000..b6a31ee043
Binary files /dev/null and b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_dark-color-mode_with-positive-diff-dark-mode-1.png differ
diff --git a/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_loading-state-1.png b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_loading-state-1.png
new file mode 100644
index 0000000000..e1f7bd8279
Binary files /dev/null and b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_loading-state-1.png differ
diff --git a/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-negative-diff-1.png b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-negative-diff-1.png
new file mode 100644
index 0000000000..dfdb9fcf0a
Binary files /dev/null and b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-negative-diff-1.png differ
diff --git a/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-period-only-1.png b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-period-only-1.png
new file mode 100644
index 0000000000..56a4b17ea2
Binary files /dev/null and b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-period-only-1.png differ
diff --git a/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-positive-diff-dark-mode-1.png b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-positive-diff-dark-mode-1.png
new file mode 100644
index 0000000000..46baf19c3c
Binary files /dev/null and b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-positive-diff-dark-mode-1.png differ
diff --git a/ui/shared/statusTag/ArbitrumL2MessageStatus.tsx b/ui/shared/statusTag/ArbitrumL2MessageStatus.tsx
new file mode 100644
index 0000000000..85bc6795ff
--- /dev/null
+++ b/ui/shared/statusTag/ArbitrumL2MessageStatus.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+import type { ArbitrumL2MessagesItem } from 'types/api/arbitrumL2';
+
+import type { StatusTagType } from './StatusTag';
+import StatusTag from './StatusTag';
+
+export interface Props {
+  status: ArbitrumL2MessagesItem['status'];
+  isLoading?: boolean;
+}
+
+const ArbitrumL2MessageStatus = ({ status, isLoading }: Props) => {
+  let type: StatusTagType;
+  let text: string;
+
+  switch (status) {
+    case 'relayed': {
+      type = 'ok';
+      text = 'Relayed';
+      break;
+    }
+    case 'confirmed': {
+      type = 'ok';
+      text = 'Ready for relay';
+      break;
+    }
+    case 'sent': {
+      type = 'pending';
+      text = 'Waiting';
+      break;
+    }
+    case 'initiated': {
+      type = 'pending';
+      text = 'Pending';
+      break;
+    }
+    default:
+      type = 'pending';
+      text = status;
+      break;
+  }
+
+  return <StatusTag type={ type } text={ text } isLoading={ isLoading }/>;
+};
+
+export default ArbitrumL2MessageStatus;
diff --git a/ui/shared/statusTag/ArbitrumL2TxnBatchStatus.tsx b/ui/shared/statusTag/ArbitrumL2TxnBatchStatus.tsx
new file mode 100644
index 0000000000..81536cdf5e
--- /dev/null
+++ b/ui/shared/statusTag/ArbitrumL2TxnBatchStatus.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2';
+
+import type { StatusTagType } from './StatusTag';
+import StatusTag from './StatusTag';
+
+export interface Props {
+  status: ArbitrumL2TxnBatchesItem['commitment_transaction']['status'];
+  isLoading?: boolean;
+}
+
+const ArbitrumL2TxnBatchStatus = ({ status, isLoading }: Props) => {
+  let type: StatusTagType;
+
+  switch (status) {
+    case 'finalized':
+      type = 'ok';
+      break;
+    default:
+      type = 'pending';
+      break;
+  }
+
+  return <StatusTag type={ type } text={ status } isLoading={ isLoading }/>;
+};
+
+export default ArbitrumL2TxnBatchStatus;
diff --git a/ui/shared/statusTag/ScrollL2TxnBatchStatus.tsx b/ui/shared/statusTag/ScrollL2TxnBatchStatus.tsx
new file mode 100644
index 0000000000..ca6ffbd8a5
--- /dev/null
+++ b/ui/shared/statusTag/ScrollL2TxnBatchStatus.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import type { StatusTagType } from './StatusTag';
+import StatusTag from './StatusTag';
+
+export interface Props {
+  status: 'Finalized' | 'Committed';
+  isLoading?: boolean;
+}
+
+const ZkEvmL2TxnBatchStatus = ({ status, isLoading }: Props) => {
+  let type: StatusTagType;
+
+  switch (status) {
+    case 'Finalized':
+      type = 'ok';
+      break;
+    default:
+      type = 'pending';
+      break;
+  }
+
+  return <StatusTag type={ type } text={ status } isLoading={ isLoading }/>;
+};
+
+export default ZkEvmL2TxnBatchStatus;
diff --git a/ui/shared/statusTag/StatusTag.pw.tsx b/ui/shared/statusTag/StatusTag.pw.tsx
index d289c54b5c..0aa9e64356 100644
--- a/ui/shared/statusTag/StatusTag.pw.tsx
+++ b/ui/shared/statusTag/StatusTag.pw.tsx
@@ -1,37 +1,20 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import StatusTag from './StatusTag';
 
-test('ok status', async({ page, mount }) => {
-  await mount(
-    <TestApp>
-      <StatusTag type="ok" text="Test"/>
-    </TestApp>,
-  );
-
+test('ok status', async({ page, render }) => {
+  await render(<StatusTag type="ok" text="Test"/>);
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 75, height: 30 } });
 });
 
-test('error status', async({ page, mount }) => {
-  await mount(
-    <TestApp>
-      <StatusTag type="error" text="Test"/>
-    </TestApp>,
-  );
-
+test('error status', async({ page, render }) => {
+  await render(<StatusTag type="error" text="Test"/>);
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 75, height: 30 } });
-
 });
 
-test('pending status', async({ page, mount }) => {
-  await mount(
-    <TestApp>
-      <StatusTag type="pending" text="Test"/>
-    </TestApp>,
-  );
-
+test('pending status', async({ page, render }) => {
+  await render(<StatusTag type="pending" text="Test"/>);
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 75, height: 30 } });
 });
diff --git a/ui/shared/statusTag/StatusTag.tsx b/ui/shared/statusTag/StatusTag.tsx
index 8a9d8a3519..7a01aa5a5c 100644
--- a/ui/shared/statusTag/StatusTag.tsx
+++ b/ui/shared/statusTag/StatusTag.tsx
@@ -1,6 +1,7 @@
-import { TagLabel, Tooltip } from '@chakra-ui/react';
+import { TagLabel, Tooltip, chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import capitalizeFirstLetter from 'lib/capitalizeFirstLetter';
 import Tag from 'ui/shared/chakra/Tag';
 import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
@@ -12,12 +13,15 @@ export interface Props {
   text: string;
   errorText?: string | null;
   isLoading?: boolean;
+  className?: string;
 }
 
-const StatusTag = ({ type, text, errorText, isLoading }: Props) => {
+const StatusTag = ({ type, text, errorText, isLoading, className }: Props) => {
   let icon: IconName;
   let colorScheme;
 
+  const capitalizedText = capitalizeFirstLetter(text);
+
   switch (type) {
     case 'ok':
       icon = 'status/success';
@@ -29,20 +33,18 @@ const StatusTag = ({ type, text, errorText, isLoading }: Props) => {
       break;
     case 'pending':
       icon = 'status/pending';
-      // FIXME: it's not gray on mockups
-      // need to implement new color scheme or redefine colors here
       colorScheme = 'gray';
       break;
   }
 
   return (
     <Tooltip label={ errorText }>
-      <Tag colorScheme={ colorScheme } display="inline-flex" isLoading={ isLoading }>
-        <IconSvg boxSize={ 2.5 } name={ icon } mr={ 2 }/>
-        <TagLabel>{ text }</TagLabel>
+      <Tag colorScheme={ colorScheme } display="flex" isLoading={ isLoading } className={ className }>
+        <IconSvg boxSize={ 2.5 } name={ icon } mr={ 1 } flexShrink={ 0 }/>
+        <TagLabel display="block">{ capitalizedText }</TagLabel>
       </Tag>
     </Tooltip>
   );
 };
 
-export default StatusTag;
+export default chakra(StatusTag);
diff --git a/ui/shared/statusTag/ValidatorStabilityStatus.tsx b/ui/shared/statusTag/ValidatorStabilityStatus.tsx
new file mode 100644
index 0000000000..93b1bb771f
--- /dev/null
+++ b/ui/shared/statusTag/ValidatorStabilityStatus.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import type { ValidatorStability } from 'types/api/validators';
+
+import StatusTag from './StatusTag';
+
+interface Props {
+  state: ValidatorStability['state'];
+  isLoading?: boolean;
+}
+
+const ValidatorStabilityStatus = ({ state, isLoading }: Props) => {
+  switch (state) {
+    case 'active':
+      return <StatusTag type="ok" text="Active" isLoading={ isLoading }/>;
+    case 'probation':
+      return <StatusTag type="pending" text="Probation" isLoading={ isLoading }/>;
+    case 'inactive':
+      return <StatusTag type="error" text="Inactive" isLoading={ isLoading }/>;
+  }
+};
+
+export default React.memo(ValidatorStabilityStatus);
diff --git a/ui/shared/statusTag/ZkEvmL2TxnBatchStatus.tsx b/ui/shared/statusTag/ZkEvmL2TxnBatchStatus.tsx
index f7601bde46..55d98dd7db 100644
--- a/ui/shared/statusTag/ZkEvmL2TxnBatchStatus.tsx
+++ b/ui/shared/statusTag/ZkEvmL2TxnBatchStatus.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2TxnBatches';
+import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2';
 
 import type { StatusTagType } from './StatusTag';
 import StatusTag from './StatusTag';
diff --git a/ui/shared/statusTag/ZkSyncL2TxnBatchStatus.tsx b/ui/shared/statusTag/ZkSyncL2TxnBatchStatus.tsx
new file mode 100644
index 0000000000..7e0536eff4
--- /dev/null
+++ b/ui/shared/statusTag/ZkSyncL2TxnBatchStatus.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import type { ZkSyncBatchStatus } from 'types/api/zkSyncL2';
+
+import type { StatusTagType } from './StatusTag';
+import StatusTag from './StatusTag';
+
+export interface Props {
+  status: ZkSyncBatchStatus;
+  isLoading?: boolean;
+}
+
+const ZkSyncL2TxnBatchStatus = ({ status, isLoading }: Props) => {
+  let type: StatusTagType;
+
+  switch (status) {
+    case 'Executed on L1':
+      type = 'ok';
+      break;
+    default:
+      type = 'pending';
+      break;
+  }
+
+  return <StatusTag type={ type } text={ status } isLoading={ isLoading }/>;
+};
+
+export default ZkSyncL2TxnBatchStatus;
diff --git a/ui/shared/statusTag/__screenshots__/StatusTag.pw.tsx_default_error-status-1.png b/ui/shared/statusTag/__screenshots__/StatusTag.pw.tsx_default_error-status-1.png
index 456a05197e..9391200038 100644
Binary files a/ui/shared/statusTag/__screenshots__/StatusTag.pw.tsx_default_error-status-1.png and b/ui/shared/statusTag/__screenshots__/StatusTag.pw.tsx_default_error-status-1.png differ
diff --git a/ui/shared/statusTag/__screenshots__/StatusTag.pw.tsx_default_ok-status-1.png b/ui/shared/statusTag/__screenshots__/StatusTag.pw.tsx_default_ok-status-1.png
index 1f91068cef..24dd6061e8 100644
Binary files a/ui/shared/statusTag/__screenshots__/StatusTag.pw.tsx_default_ok-status-1.png and b/ui/shared/statusTag/__screenshots__/StatusTag.pw.tsx_default_ok-status-1.png differ
diff --git a/ui/shared/statusTag/__screenshots__/StatusTag.pw.tsx_default_pending-status-1.png b/ui/shared/statusTag/__screenshots__/StatusTag.pw.tsx_default_pending-status-1.png
index d5d9f0cec1..6651f21e65 100644
Binary files a/ui/shared/statusTag/__screenshots__/StatusTag.pw.tsx_default_pending-status-1.png and b/ui/shared/statusTag/__screenshots__/StatusTag.pw.tsx_default_pending-status-1.png differ
diff --git a/ui/shared/tagGroupSelect/TagGroupSelect.pw.tsx b/ui/shared/tagGroupSelect/TagGroupSelect.pw.tsx
new file mode 100644
index 0000000000..4ccc12110c
--- /dev/null
+++ b/ui/shared/tagGroupSelect/TagGroupSelect.pw.tsx
@@ -0,0 +1,22 @@
+import _noop from 'lodash/noop';
+import React from 'react';
+
+import { test, expect } from 'playwright/lib';
+
+import TagGroupSelect from './TagGroupSelect';
+
+test.use({ viewport: { width: 480, height: 140 } });
+
+test('base view +@dark-mode', async({ render }) => {
+  const component = await render(
+    <TagGroupSelect
+      items={ [ { id: '1', title: 'Option 1' }, { id: '2', title: 'Option 2' }, { id: 'duck', title: 'Cute little duck' } ] }
+      value="duck"
+      onChange={ _noop }
+    />,
+  );
+
+  await component.getByText('Option 2').hover();
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/shared/tagGroupSelect/TagGroupSelect.tsx b/ui/shared/tagGroupSelect/TagGroupSelect.tsx
new file mode 100644
index 0000000000..3d18c26d74
--- /dev/null
+++ b/ui/shared/tagGroupSelect/TagGroupSelect.tsx
@@ -0,0 +1,60 @@
+import type { TagProps } from '@chakra-ui/react';
+import { HStack, Tag } from '@chakra-ui/react';
+import React from 'react';
+
+type Props<T extends string> = {
+  items: Array<{ id: T; title: string }>;
+  tagSize?: TagProps['size'];
+} & (
+  {
+    value?: T;
+    onChange: (value: T) => void;
+    isMulti?: false;
+  } | {
+    value: Array<T>;
+    onChange: (value: Array<T>) => void;
+    isMulti: true;
+  }
+);
+
+const TagGroupSelect = <T extends string>({ items, value, isMulti, onChange, tagSize }: Props<T>) => {
+  const onItemClick = React.useCallback((event: React.SyntheticEvent) => {
+    const itemValue = (event.currentTarget as HTMLDivElement).getAttribute('data-id') as T;
+    if (isMulti) {
+      let newValue;
+      if (value.includes(itemValue)) {
+        newValue = value.filter(i => i !== itemValue);
+      } else {
+        newValue = [ ...value, itemValue ];
+      }
+      onChange(newValue);
+    } else {
+      onChange(itemValue);
+    }
+  }, [ isMulti, onChange, value ]);
+
+  return (
+    <HStack>
+      { items.map(item => {
+        const isSelected = isMulti ? value.includes(item.id) : value === item.id;
+        return (
+          <Tag
+            variant="select"
+            key={ item.id }
+            data-id={ item.id }
+            data-selected={ isSelected }
+            fontWeight={ 500 }
+            onClick={ onItemClick }
+            size={ tagSize }
+            display="inline-flex"
+            justifyContent="center"
+          >
+            { item.title }
+          </Tag>
+        );
+      }) }
+    </HStack>
+  );
+};
+
+export default TagGroupSelect;
diff --git a/ui/shared/tagGroupSelect/__screenshots__/TagGroupSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/shared/tagGroupSelect/__screenshots__/TagGroupSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..5bf6e8edb1
Binary files /dev/null and b/ui/shared/tagGroupSelect/__screenshots__/TagGroupSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/shared/tagGroupSelect/__screenshots__/TagGroupSelect.pw.tsx_default_base-view-dark-mode-1.png b/ui/shared/tagGroupSelect/__screenshots__/TagGroupSelect.pw.tsx_default_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..2a0a13206c
Binary files /dev/null and b/ui/shared/tagGroupSelect/__screenshots__/TagGroupSelect.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/shared/tx/TxFee.pw.tsx b/ui/shared/tx/TxFee.pw.tsx
new file mode 100644
index 0000000000..8ccd98ade6
--- /dev/null
+++ b/ui/shared/tx/TxFee.pw.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import * as txMock from 'mocks/txs/tx';
+import { test, expect } from 'playwright/lib';
+
+import TxFee from './TxFee';
+
+test.use({ viewport: { width: 300, height: 100 } });
+
+test('base view', async({ render }) => {
+  const component = await render(<TxFee tx={ txMock.base } withUsd/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('no usd value', async({ render }) => {
+  const component = await render(<TxFee tx={ txMock.base } accuracy={ 3 }/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('celo gas token', async({ render, mockAssetResponse }) => {
+  await mockAssetResponse(txMock.celoTxn.celo?.gas_token?.icon_url as string, './playwright/mocks/image_svg.svg');
+  const component = await render(<TxFee tx={ txMock.celoTxn } withUsd accuracyUsd={ 3 }/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('stability token', async({ render, mockAssetResponse }) => {
+  await mockAssetResponse(txMock.stabilityTx.stability_fee?.token.icon_url as string, './playwright/mocks/image_svg.svg');
+  const component = await render(<TxFee tx={ txMock.stabilityTx } withUsd accuracyUsd={ 3 }/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/shared/tx/TxFee.tsx b/ui/shared/tx/TxFee.tsx
new file mode 100644
index 0000000000..01fa1eb240
--- /dev/null
+++ b/ui/shared/tx/TxFee.tsx
@@ -0,0 +1,77 @@
+import { chakra, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { Transaction } from 'types/api/transaction';
+
+import config from 'configs/app';
+import getCurrencyValue from 'lib/getCurrencyValue';
+import { currencyUnits } from 'lib/units';
+import CurrencyValue from 'ui/shared/CurrencyValue';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+
+interface Props {
+  className?: string;
+  isLoading?: boolean;
+  tx: Transaction;
+  withCurrency?: boolean;
+  withUsd?: boolean;
+  accuracy?: number;
+  accuracyUsd?: number;
+}
+
+const TxFee = ({ className, tx, accuracy, accuracyUsd, isLoading, withCurrency = true, withUsd }: Props) => {
+
+  if (tx.celo?.gas_token) {
+    const token = tx.celo.gas_token;
+    const { valueStr, usd } = getCurrencyValue({
+      value: tx.fee.value || '0',
+      exchangeRate: token.exchange_rate,
+      decimals: token.decimals,
+      accuracy,
+      accuracyUsd,
+    });
+    return (
+      <Skeleton whiteSpace="pre-wrap" wordBreak="break-word" isLoaded={ !isLoading } display="flex" flexWrap="wrap" className={ className }>
+        <span>{ valueStr } </span>
+        <TokenEntity token={ token } noCopy onlySymbol w="auto" ml={ 1 }/>
+        { usd && withUsd && <chakra.span color="text_secondary"> (${ usd })</chakra.span> }
+      </Skeleton>
+    );
+  }
+
+  if (tx.stability_fee) {
+    const token = tx.stability_fee.token;
+    const { valueStr, usd } = getCurrencyValue({
+      value: tx.stability_fee.total_fee,
+      exchangeRate: token.exchange_rate,
+      decimals: token.decimals,
+      accuracy,
+      accuracyUsd,
+    });
+
+    return (
+      <Skeleton whiteSpace="pre" isLoaded={ !isLoading } display="flex" className={ className }>
+        <span>{ valueStr } </span>
+        { valueStr !== '0' && <TokenEntity token={ token } noCopy onlySymbol w="auto" ml={ 1 }/> }
+        { usd && withUsd && <chakra.span color="text_secondary"> (${ usd })</chakra.span> }
+      </Skeleton>
+    );
+  }
+
+  const showCurrency = withCurrency && !config.UI.views.tx.hiddenFields?.fee_currency;
+
+  return (
+    <CurrencyValue
+      value={ tx.fee.value }
+      currency={ showCurrency ? currencyUnits.ether : '' }
+      exchangeRate={ withUsd ? tx.exchange_rate : null }
+      accuracy={ accuracy }
+      accuracyUsd={ accuracyUsd }
+      flexWrap="wrap"
+      className={ className }
+      isLoading={ isLoading }
+    />
+  );
+};
+
+export default React.memo(chakra(TxFee));
diff --git a/ui/shared/tx/TxFeeStability.tsx b/ui/shared/tx/TxFeeStability.tsx
deleted file mode 100644
index d1c10c0d9a..0000000000
--- a/ui/shared/tx/TxFeeStability.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Skeleton, chakra } from '@chakra-ui/react';
-import React from 'react';
-
-import type { Transaction } from 'types/api/transaction';
-import type { ExcludeUndefined } from 'types/utils';
-
-import getCurrencyValue from 'lib/getCurrencyValue';
-import TokenEntity from 'ui/shared/entities/token/TokenEntity';
-
-interface Props {
-  data: ExcludeUndefined<Transaction['stability_fee']>;
-  isLoading?: boolean;
-  hideUsd?: boolean;
-  accuracy?: number;
-  className?: string;
-}
-
-const TxFeeStability = ({ data, isLoading, hideUsd, accuracy, className }: Props) => {
-
-  const { valueStr, usd } = getCurrencyValue({
-    value: data.total_fee,
-    exchangeRate: data.token.exchange_rate,
-    decimals: data.token.decimals,
-    accuracy,
-  });
-
-  return (
-    <Skeleton whiteSpace="pre" isLoaded={ !isLoading } display="flex" className={ className }>
-      <span>{ valueStr } </span>
-      { valueStr !== '0' && <TokenEntity token={ data.token } noCopy onlySymbol w="auto" ml={ 1 }/> }
-      { usd && !hideUsd && <chakra.span color="text_secondary"> (${ usd })</chakra.span> }
-    </Skeleton>
-  );
-};
-
-export default React.memo(chakra(TxFeeStability));
diff --git a/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_base-view-1.png b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_base-view-1.png
new file mode 100644
index 0000000000..7ac54aea40
Binary files /dev/null and b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_base-view-1.png differ
diff --git a/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_celo-gas-token-1.png b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_celo-gas-token-1.png
new file mode 100644
index 0000000000..7bf968661e
Binary files /dev/null and b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_celo-gas-token-1.png differ
diff --git a/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_no-usd-value-1.png b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_no-usd-value-1.png
new file mode 100644
index 0000000000..c9b10f06fe
Binary files /dev/null and b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_no-usd-value-1.png differ
diff --git a/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_stability-token-1.png b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_stability-token-1.png
new file mode 100644
index 0000000000..82eebabc86
Binary files /dev/null and b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_stability-token-1.png differ
diff --git a/ui/shared/tx/interpretation/TxInterpretation.tsx b/ui/shared/tx/interpretation/TxInterpretation.tsx
new file mode 100644
index 0000000000..7eda2b5992
--- /dev/null
+++ b/ui/shared/tx/interpretation/TxInterpretation.tsx
@@ -0,0 +1,186 @@
+import { Skeleton, Tooltip, chakra } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { AddressParam } from 'types/api/addressParams';
+import type {
+  TxInterpretationSummary,
+  TxInterpretationVariable,
+  TxInterpretationVariableString,
+} from 'types/api/txInterpretation';
+
+import config from 'configs/app';
+import dayjs from 'lib/date/dayjs';
+import * as mixpanel from 'lib/mixpanel/index';
+import { currencyUnits } from 'lib/units';
+import Tag from 'ui/shared/chakra/Tag';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import IconSvg from 'ui/shared/IconSvg';
+
+import {
+  extractVariables,
+  getStringChunks,
+  fillStringVariables,
+  checkSummary,
+  NATIVE_COIN_SYMBOL_VAR_NAME,
+  WEI_VAR_NAME,
+} from './utils';
+
+type Props = {
+  summary?: TxInterpretationSummary;
+  isLoading?: boolean;
+  addressDataMap?: Record<string, AddressParam>;
+  className?: string;
+};
+
+type NonStringTxInterpretationVariable = Exclude<TxInterpretationVariable, TxInterpretationVariableString>;
+
+const TxInterpretationElementByType = (
+  { variable, addressDataMap }: { variable?: NonStringTxInterpretationVariable; addressDataMap?: Record<string, AddressParam> },
+) => {
+  const onAddressClick = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.TX_INTERPRETATION_INTERACTION, { Type: 'Address click' });
+  }, []);
+
+  const onTokenClick = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.TX_INTERPRETATION_INTERACTION, { Type: 'Token click' });
+  }, []);
+
+  const onDomainClick = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.TX_INTERPRETATION_INTERACTION, { Type: 'Domain click' });
+  }, []);
+
+  if (!variable) {
+    return null;
+  }
+
+  const { type, value } = variable;
+  switch (type) {
+    case 'address': {
+      return (
+        <chakra.span display="inline-block" verticalAlign="top" _notFirst={{ marginLeft: 1 }}>
+          <AddressEntity
+            address={ addressDataMap?.[value.hash] || value }
+            icon={{ marginRight: 1 }}
+            truncation="constant"
+            onClick={ onAddressClick }
+            whiteSpace="initial"
+          />
+        </chakra.span>
+      );
+    }
+    case 'token':
+      return (
+        <chakra.span display="inline-block" verticalAlign="top" _notFirst={{ marginLeft: 1 }}>
+          <TokenEntity
+            token={ value }
+            icon={{ marginRight: 1 }}
+            onlySymbol
+            noCopy
+            width="fit-content"
+            _notFirst={{ marginLeft: 1 }}
+            mr={ 2 }
+            whiteSpace="initial"
+            onClick={ onTokenClick }
+          />
+        </chakra.span>
+      );
+    case 'domain': {
+      if (config.features.nameService.isEnabled) {
+        return (
+          <chakra.span display="inline-block" verticalAlign="top" _notFirst={{ marginLeft: 1 }}>
+            <EnsEntity
+              domain={ value }
+              icon={{ marginRight: 1 }}
+              width="fit-content"
+              _notFirst={{ marginLeft: 1 }}
+              whiteSpace="initial"
+              onClick={ onDomainClick }
+            />
+          </chakra.span>
+        );
+      }
+      return <chakra.span color="text_secondary" whiteSpace="pre">{ value + ' ' }</chakra.span>;
+    }
+    case 'currency': {
+      let numberString = '';
+      if (BigNumber(value).isLessThan(0.1)) {
+        numberString = BigNumber(value).toPrecision(2);
+      } else if (BigNumber(value).isLessThan(10000)) {
+        numberString = BigNumber(value).dp(2).toFormat();
+      } else if (BigNumber(value).isLessThan(1000000)) {
+        numberString = BigNumber(value).dividedBy(1000).toFormat(2) + 'K';
+      } else {
+        numberString = BigNumber(value).dividedBy(1000000).toFormat(2) + 'M';
+      }
+      return <chakra.span>{ numberString + ' ' }</chakra.span>;
+    }
+    case 'timestamp': {
+      return <chakra.span color="text_secondary" whiteSpace="pre">{ dayjs(Number(value) * 1000).format('MMM DD YYYY') }</chakra.span>;
+    }
+    case 'method': {
+      return (
+        <Tag
+          colorScheme={ value === 'Multicall' ? 'teal' : 'gray' }
+          isTruncated
+          ml={ 1 }
+          mr={ 2 }
+          verticalAlign="text-top"
+        >
+          { value }
+        </Tag>
+      );
+    }
+  }
+};
+
+const TxInterpretation = ({ summary, isLoading, addressDataMap, className }: Props) => {
+  if (!summary) {
+    return null;
+  }
+
+  const template = summary.summary_template;
+  const variables = summary.summary_template_variables;
+
+  if (!checkSummary(template, variables)) {
+    return null;
+  }
+
+  const intermediateResult = fillStringVariables(template, variables);
+
+  const variablesNames = extractVariables(intermediateResult);
+  const chunks = getStringChunks(intermediateResult);
+
+  return (
+    <Skeleton isLoaded={ !isLoading } className={ className } fontWeight={ 500 } whiteSpace="pre-wrap" >
+      <Tooltip label="Transaction summary">
+        <IconSvg name="lightning" boxSize={ 5 } color="text_secondary" mr={ 1 } verticalAlign="text-top"/>
+      </Tooltip>
+      { chunks.map((chunk, index) => {
+        let content = null;
+        if (variablesNames[index] === NATIVE_COIN_SYMBOL_VAR_NAME) {
+          content = <chakra.span>{ currencyUnits.ether + ' ' }</chakra.span>;
+        } else if (variablesNames[index] === WEI_VAR_NAME) {
+          content = <chakra.span>{ currencyUnits.wei + ' ' }</chakra.span>;
+        } else {
+          content = (
+            <TxInterpretationElementByType
+              variable={ variables[variablesNames[index]] as NonStringTxInterpretationVariable }
+              addressDataMap={ addressDataMap }
+            />
+          );
+        }
+        return (
+          <chakra.span key={ chunk + index }>
+            <chakra.span color="text_secondary">{ chunk.trim() + (chunk.trim() && variablesNames[index] ? ' ' : '') }</chakra.span>
+            { index < variablesNames.length && content }
+          </chakra.span>
+        );
+      }) }
+    </Skeleton>
+  );
+};
+
+export default chakra(TxInterpretation);
diff --git a/ui/shared/tx/interpretation/utils.test.ts b/ui/shared/tx/interpretation/utils.test.ts
new file mode 100644
index 0000000000..9485deaf13
--- /dev/null
+++ b/ui/shared/tx/interpretation/utils.test.ts
@@ -0,0 +1,25 @@
+import { extractVariables, getStringChunks, checkSummary } from './utils';
+
+const template = '{action_type} {source_amount} {native} into {destination_amount} {destination_token}';
+
+it('extracts variables names', () => {
+  const result = extractVariables(template);
+  expect(result).toEqual([ 'action_type', 'source_amount', 'native', 'destination_amount', 'destination_token' ]);
+});
+
+it('split string without capturing variables', () => {
+  const result = getStringChunks(template);
+  expect(result).toEqual([ '', ' ', ' ', ' into ', ' ', '' ]);
+});
+
+it('checks that summary is valid', () => {
+  const result = checkSummary('{foo} {native} {bar} {wei}', { foo: { type: 'string', value: 'foo' }, bar: { type: 'string', value: 'bar' } });
+  expect(result).toBe(true);
+});
+
+it('checks that summary is invalid', () => {
+
+  // @ts-ignore:
+  const result = checkSummary('{foo} {native} {bar}', { foo: { type: 'string', value: null }, bar: { type: 'string', value: 'bar' } });
+  expect(result).toBe(false);
+});
diff --git a/ui/shared/tx/interpretation/utils.ts b/ui/shared/tx/interpretation/utils.ts
new file mode 100644
index 0000000000..28e3d4b71d
--- /dev/null
+++ b/ui/shared/tx/interpretation/utils.ts
@@ -0,0 +1,51 @@
+// we use that regex as a separator when splitting template and dont want to capture variables
+
+import type { TxInterpretationVariable } from 'types/api/txInterpretation';
+
+// eslint-disable-next-line regexp/no-useless-non-capturing-group
+export const VAR_REGEXP = /\{(?:[^}]+)\}/g;
+
+export const NATIVE_COIN_SYMBOL_VAR_NAME = 'native';
+export const WEI_VAR_NAME = 'wei';
+
+export function extractVariables(templateString: string) {
+
+  const matches = templateString.match(VAR_REGEXP);
+
+  const variablesNames = matches ? matches.map(match => match.slice(1, -1)) : [];
+
+  return variablesNames;
+}
+
+export function getStringChunks(template: string) {
+  return template.split(VAR_REGEXP);
+}
+
+export function checkSummary(template: string, variables: Record<string, TxInterpretationVariable>) {
+  const variablesNames = extractVariables(template);
+  let result = true;
+  for (const name of variablesNames) {
+    if (name === NATIVE_COIN_SYMBOL_VAR_NAME || name === WEI_VAR_NAME) {
+      continue;
+    }
+    if (!variables[name] || variables[name].value === undefined || variables[name].value === null) {
+      result = false;
+      break;
+    }
+  }
+
+  return result;
+}
+
+export function fillStringVariables(template: string, variables: Record<string, TxInterpretationVariable>) {
+  const variablesNames = extractVariables(template);
+
+  let result = template;
+  variablesNames.forEach(name => {
+    if (variables[name] && variables[name].type === 'string') {
+      result = result.replace(`{${ name }}`, variables[name].value as string);
+    }
+  });
+
+  return result;
+}
diff --git a/ui/shared/userOps/UserOpSponsorType.tsx b/ui/shared/userOps/UserOpSponsorType.tsx
index cd8d27327d..a1fd63fc64 100644
--- a/ui/shared/userOps/UserOpSponsorType.tsx
+++ b/ui/shared/userOps/UserOpSponsorType.tsx
@@ -1,11 +1,11 @@
 import { Tag } from '@chakra-ui/react';
 import React from 'react';
 
-import { UserOpSponsorType } from 'types/api/userOps';
+import type { UserOpSponsorType as TUserOpSponsorType } from 'types/api/userOps';
 
 type Props = {
-  sponsorType: UserOpSponsorType;
-}
+  sponsorType: TUserOpSponsorType;
+};
 
 const UserOpSponsorType = ({ sponsorType }: Props) => {
   let text: string = sponsorType;
diff --git a/ui/shared/userOps/UserOpStatus.tsx b/ui/shared/userOps/UserOpStatus.tsx
index 6c3a00d40b..ea58a5feba 100644
--- a/ui/shared/userOps/UserOpStatus.tsx
+++ b/ui/shared/userOps/UserOpStatus.tsx
@@ -6,7 +6,7 @@ import StatusTag from 'ui/shared/statusTag/StatusTag';
 type Props = {
   status?: boolean;
   isLoading?: boolean;
-}
+};
 
 const UserOpStatus = ({ status, isLoading }: Props) => {
   if (status === undefined) {
diff --git a/ui/shared/userOps/UserOpsAddress.tsx b/ui/shared/userOps/UserOpsAddress.tsx
deleted file mode 100644
index 73036de756..0000000000
--- a/ui/shared/userOps/UserOpsAddress.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-import type { AddressParamBasic } from 'types/api/addressParams';
-
-import AddressEntity from '../entities/address/AddressEntity';
-import type { EntityProps } from '../entities/address/AddressEntity';
-
-type Props = Omit<EntityProps, 'address'> & {
-  address: string | AddressParamBasic;
-}
-
-const UserOpsAddress = ({ address, ...props }: Props) => {
-  let addressParam;
-  if (typeof address === 'string') {
-    addressParam = { hash: address };
-  } else {
-    addressParam = address;
-  }
-
-  return <AddressEntity address={ addressParam } { ...props }/>;
-};
-
-export default UserOpsAddress;
diff --git a/ui/shared/verificationSteps/VerificationStep.tsx b/ui/shared/verificationSteps/VerificationStep.tsx
index 17a7c98632..5efea2af37 100644
--- a/ui/shared/verificationSteps/VerificationStep.tsx
+++ b/ui/shared/verificationSteps/VerificationStep.tsx
@@ -9,14 +9,20 @@ type Props = {
   step: Step;
   isLast: boolean;
   isPassed: boolean;
-}
+  isPending?: boolean;
+};
 
-const VerificationStep = ({ step, isLast, isPassed }: Props) => {
-  const stepColor = isPassed ? 'green.500' : 'text_secondary';
+const VerificationStep = ({ step, isLast, isPassed, isPending }: Props) => {
+  let stepColor = 'text_secondary';
+  if (isPending) {
+    stepColor = 'yellow.500';
+  } else if (isPassed) {
+    stepColor = 'green.500';
+  }
 
   return (
     <HStack gap={ 2 } color={ stepColor }>
-      <IconSvg name={ isPassed ? 'finalized' : 'unfinalized' } boxSize={ 5 }/>
+      <IconSvg name={ isPassed ? 'verification-steps/finalized' : 'verification-steps/unfinalized' } boxSize={ 5 }/>
       <Box color={ stepColor }>{ typeof step === 'string' ? step : step.content }</Box>
       { !isLast && <IconSvg name="arrows/east" boxSize={ 5 }/> }
     </HStack>
diff --git a/ui/shared/verificationSteps/VerificationSteps.pw.tsx b/ui/shared/verificationSteps/VerificationSteps.pw.tsx
index 9447631099..3c83438f8f 100644
--- a/ui/shared/verificationSteps/VerificationSteps.pw.tsx
+++ b/ui/shared/verificationSteps/VerificationSteps.pw.tsx
@@ -1,33 +1,24 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { ZKEVM_L2_TX_STATUSES } from 'types/api/transaction';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import VerificationSteps from './VerificationSteps';
 
-test('first step +@mobile +@dark-mode', async({ mount }) => {
-
-  const component = await mount(
-    <TestApp>
-      <Box p={ 10 }>
-        <VerificationSteps currentStep={ ZKEVM_L2_TX_STATUSES[0] } steps={ ZKEVM_L2_TX_STATUSES }/>
-      </Box>
-    </TestApp>,
+test('first step +@mobile +@dark-mode', async({ render }) => {
+  const component = await render(
+    <Box p={ 10 }>
+      <VerificationSteps currentStep={ ZKEVM_L2_TX_STATUSES[0] } steps={ ZKEVM_L2_TX_STATUSES }/>
+    </Box>,
   );
-
   await expect(component).toHaveScreenshot();
 });
 
-test('second status', async({ mount }) => {
-
-  const component = await mount(
-    <TestApp>
-      <VerificationSteps currentStep={ ZKEVM_L2_TX_STATUSES[1] } steps={ ZKEVM_L2_TX_STATUSES }/>
-    </TestApp>,
+test('second status', async({ render }) => {
+  const component = await render(
+    <VerificationSteps currentStep={ ZKEVM_L2_TX_STATUSES[1] } steps={ ZKEVM_L2_TX_STATUSES }/>,
   );
-
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/verificationSteps/VerificationSteps.tsx b/ui/shared/verificationSteps/VerificationSteps.tsx
index a7a6c506d8..889a09d370 100644
--- a/ui/shared/verificationSteps/VerificationSteps.tsx
+++ b/ui/shared/verificationSteps/VerificationSteps.tsx
@@ -7,13 +7,14 @@ import VerificationStep from './VerificationStep';
 
 export interface Props {
   currentStep: string;
+  currentStepPending?: boolean;
   steps: Array<Step>;
   isLoading?: boolean;
   rightSlot?: React.ReactNode;
   className?: string;
 }
 
-const VerificationSteps = ({ currentStep, steps, isLoading, rightSlot, className }: Props) => {
+const VerificationSteps = ({ currentStep, currentStepPending, steps, isLoading, rightSlot, className }: Props) => {
   const currentStepIndex = steps.findIndex((step) => {
     const label = typeof step === 'string' ? step : step.label;
     return label === currentStep;
@@ -34,6 +35,7 @@ const VerificationSteps = ({ currentStep, steps, isLoading, rightSlot, className
           step={ step }
           isLast={ index === steps.length - 1 && !rightSlot }
           isPassed={ index <= currentStepIndex }
+          isPending={ index === currentStepIndex && currentStepPending }
         />
       )) }
       { rightSlot }
diff --git a/ui/shared/verificationSteps/__screenshots__/VerificationSteps.pw.tsx_dark-color-mode_first-step-mobile-dark-mode-1.png b/ui/shared/verificationSteps/__screenshots__/VerificationSteps.pw.tsx_dark-color-mode_first-step-mobile-dark-mode-1.png
index 1b723b918c..fb2092510b 100644
Binary files a/ui/shared/verificationSteps/__screenshots__/VerificationSteps.pw.tsx_dark-color-mode_first-step-mobile-dark-mode-1.png and b/ui/shared/verificationSteps/__screenshots__/VerificationSteps.pw.tsx_dark-color-mode_first-step-mobile-dark-mode-1.png differ
diff --git a/ui/shared/verificationSteps/__screenshots__/VerificationSteps.pw.tsx_default_first-step-mobile-dark-mode-1.png b/ui/shared/verificationSteps/__screenshots__/VerificationSteps.pw.tsx_default_first-step-mobile-dark-mode-1.png
index ec5715c72c..7eabdffd00 100644
Binary files a/ui/shared/verificationSteps/__screenshots__/VerificationSteps.pw.tsx_default_first-step-mobile-dark-mode-1.png and b/ui/shared/verificationSteps/__screenshots__/VerificationSteps.pw.tsx_default_first-step-mobile-dark-mode-1.png differ
diff --git a/ui/shared/verificationSteps/__screenshots__/VerificationSteps.pw.tsx_default_second-status-1.png b/ui/shared/verificationSteps/__screenshots__/VerificationSteps.pw.tsx_default_second-status-1.png
index bed6995133..b1f33566da 100644
Binary files a/ui/shared/verificationSteps/__screenshots__/VerificationSteps.pw.tsx_default_second-status-1.png and b/ui/shared/verificationSteps/__screenshots__/VerificationSteps.pw.tsx_default_second-status-1.png differ
diff --git a/ui/shared/verificationSteps/__screenshots__/VerificationSteps.pw.tsx_mobile_first-step-mobile-dark-mode-1.png b/ui/shared/verificationSteps/__screenshots__/VerificationSteps.pw.tsx_mobile_first-step-mobile-dark-mode-1.png
index cf24c70de8..a69cfda93a 100644
Binary files a/ui/shared/verificationSteps/__screenshots__/VerificationSteps.pw.tsx_mobile_first-step-mobile-dark-mode-1.png and b/ui/shared/verificationSteps/__screenshots__/VerificationSteps.pw.tsx_mobile_first-step-mobile-dark-mode-1.png differ
diff --git a/ui/shared/verificationSteps/types.ts b/ui/shared/verificationSteps/types.ts
index 582decfa4e..7dc2ef7f36 100644
--- a/ui/shared/verificationSteps/types.ts
+++ b/ui/shared/verificationSteps/types.ts
@@ -1 +1,3 @@
+import type React from 'react';
+
 export type Step = string | { label: string; content: React.ReactNode };
diff --git a/ui/snippets/auth/AuthGuard.tsx b/ui/snippets/auth/AuthGuard.tsx
new file mode 100644
index 0000000000..b3ef71097d
--- /dev/null
+++ b/ui/snippets/auth/AuthGuard.tsx
@@ -0,0 +1,39 @@
+import { useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+import AuthModal from './AuthModal';
+import useIsAuth from './useIsAuth';
+
+interface InjectedProps {
+  onClick: () => void;
+}
+
+interface Props {
+  children: (props: InjectedProps) => React.ReactNode;
+  onAuthSuccess: () => void;
+}
+
+const AuthGuard = ({ children, onAuthSuccess }: Props) => {
+  const authModal = useDisclosure();
+  const isAuth = useIsAuth();
+
+  const handleClick = React.useCallback(() => {
+    isAuth ? onAuthSuccess() : authModal.onOpen();
+  }, [ authModal, isAuth, onAuthSuccess ]);
+
+  const handleModalClose = React.useCallback((isSuccess?: boolean) => {
+    if (isSuccess) {
+      onAuthSuccess();
+    }
+    authModal.onClose();
+  }, [ authModal, onAuthSuccess ]);
+
+  return (
+    <>
+      { children({ onClick: handleClick }) }
+      { authModal.isOpen && <AuthModal onClose={ handleModalClose } initialScreen={{ type: 'select_method' }}/> }
+    </>
+  );
+};
+
+export default React.memo(AuthGuard);
diff --git a/ui/snippets/auth/AuthModal.pw.tsx b/ui/snippets/auth/AuthModal.pw.tsx
new file mode 100644
index 0000000000..9bd8b49955
--- /dev/null
+++ b/ui/snippets/auth/AuthModal.pw.tsx
@@ -0,0 +1,64 @@
+import type { BrowserContext } from '@playwright/test';
+import React from 'react';
+
+import * as profileMock from 'mocks/user/profile';
+import { contextWithAuth } from 'playwright/fixtures/auth';
+import { test, expect } from 'playwright/lib';
+
+import AuthModalStory from './AuthModal.pwstory';
+
+test('email login', async({ render, page, mockApiResponse }) => {
+
+  await render(<AuthModalStory flow="email_login"/>);
+
+  await expect(page.getByText('Status: Not authenticated')).toBeVisible();
+
+  await page.getByText('Log in').click();
+  await expect(page).toHaveScreenshot();
+
+  // fill email
+  await page.getByText('Continue with email').click();
+  await page.getByLabel(/email/i).getByPlaceholder(' ').fill('john.doe@example.com');
+  await expect(page).toHaveScreenshot();
+
+  // send otp code
+  await mockApiResponse('auth_send_otp', {} as never);
+  await page.getByText('Send a code').click();
+
+  // fill otp code
+  await page.getByLabel(/enter your pin code/i).nth(0).fill('123456');
+  await expect(page).toHaveScreenshot();
+
+  // submit otp code
+  await mockApiResponse('auth_confirm_otp', profileMock.base as never);
+  await page.getByText('Submit').click();
+  await expect(page).toHaveScreenshot();
+
+  await page.getByLabel('Close').click();
+  await expect(page.getByText('Status: Authenticated')).toBeVisible();
+});
+
+const linkEmailTest = test.extend<{ context: BrowserContext }>({
+  context: contextWithAuth,
+});
+
+linkEmailTest('link email to account', async({ render, page, mockApiResponse }) => {
+  await mockApiResponse('user_info', profileMock.base);
+  await render(<AuthModalStory flow="email_link"/>);
+
+  await expect(page.getByText('Status: Authenticated')).toBeVisible();
+
+  // fill email
+  await page.getByText('Link email').click();
+  await page.getByLabel(/email/i).getByPlaceholder(' ').fill('john.doe@example.com');
+  await expect(page).toHaveScreenshot();
+
+  // send and fill otp code
+  await mockApiResponse('auth_send_otp', {} as never);
+  await page.getByText('Send a code').click();
+  await page.getByLabel(/enter your pin code/i).nth(0).fill('123456');
+  await mockApiResponse('auth_link_email', profileMock.base as never);
+  await page.getByText('Submit').click();
+
+  await expect(page).toHaveScreenshot();
+});
diff --git a/ui/snippets/auth/AuthModal.pwstory.tsx b/ui/snippets/auth/AuthModal.pwstory.tsx
new file mode 100644
index 0000000000..37df1e2d8b
--- /dev/null
+++ b/ui/snippets/auth/AuthModal.pwstory.tsx
@@ -0,0 +1,30 @@
+import { Box, Button, useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+import AuthModal from './AuthModal';
+import useIsAuth from './useIsAuth';
+
+interface Props {
+  flow: 'email_login' | 'email_link';
+}
+
+const AuthModalStory = ({ flow }: Props) => {
+  const authModal = useDisclosure();
+  const isAuth = useIsAuth();
+
+  const initialScreen = flow === 'email_login' ? { type: 'select_method' as const } : { type: 'email' as const, isAuth: true };
+
+  const handleClose = React.useCallback(() => {
+    authModal.onClose();
+  }, [ authModal ]);
+
+  return (
+    <>
+      <Button onClick={ authModal.onOpen }>{ flow === 'email_login' ? 'Log in' : 'Link email' }</Button>
+      { authModal.isOpen && <AuthModal initialScreen={ initialScreen } onClose={ handleClose }/> }
+      <Box>Status: { isAuth ? 'Authenticated' : 'Not authenticated' }</Box>
+    </>
+  );
+};
+
+export default AuthModalStory;
diff --git a/ui/snippets/auth/AuthModal.tsx b/ui/snippets/auth/AuthModal.tsx
new file mode 100644
index 0000000000..99ecf0cad9
--- /dev/null
+++ b/ui/snippets/auth/AuthModal.tsx
@@ -0,0 +1,192 @@
+import { Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay } from '@chakra-ui/react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { Screen, ScreenSuccess } from './types';
+
+import config from 'configs/app';
+import { getResourceKey } from 'lib/api/useApiQuery';
+import useGetCsrfToken from 'lib/hooks/useGetCsrfToken';
+import * as mixpanel from 'lib/mixpanel';
+import IconSvg from 'ui/shared/IconSvg';
+
+import AuthModalScreenConnectWallet from './screens/AuthModalScreenConnectWallet';
+import AuthModalScreenEmail from './screens/AuthModalScreenEmail';
+import AuthModalScreenOtpCode from './screens/AuthModalScreenOtpCode';
+import AuthModalScreenSelectMethod from './screens/AuthModalScreenSelectMethod';
+import AuthModalScreenSuccessEmail from './screens/AuthModalScreenSuccessEmail';
+import AuthModalScreenSuccessWallet from './screens/AuthModalScreenSuccessWallet';
+
+const feature = config.features.account;
+
+interface Props {
+  initialScreen: Screen;
+  onClose: (isSuccess?: boolean) => void;
+  mixpanelConfig?: {
+    wallet_connect?: {
+      source: mixpanel.EventPayload<mixpanel.EventTypes.WALLET_CONNECT>['Source'];
+    };
+    account_link_info: {
+      source: mixpanel.EventPayload<mixpanel.EventTypes.ACCOUNT_LINK_INFO>['Source'];
+    };
+  };
+  closeOnError?: boolean;
+}
+
+const AuthModal = ({ initialScreen, onClose, mixpanelConfig, closeOnError }: Props) => {
+  const [ steps, setSteps ] = React.useState<Array<Screen>>([ initialScreen ]);
+  const [ isSuccess, setIsSuccess ] = React.useState(false);
+
+  const router = useRouter();
+  const csrfQuery = useGetCsrfToken();
+  const queryClient = useQueryClient();
+
+  React.useEffect(() => {
+    if ('isAuth' in initialScreen && initialScreen.isAuth) {
+      mixpanel.logEvent(mixpanel.EventTypes.ACCOUNT_LINK_INFO, {
+        Status: 'Started',
+        Type: initialScreen.type === 'connect_wallet' ? 'Wallet' : 'Email',
+        Source: mixpanelConfig?.account_link_info.source ?? 'Profile dropdown',
+      });
+    } else {
+      mixpanel.logEvent(mixpanel.EventTypes.LOGIN, {
+        Action: 'Started',
+        Source: mixpanel.getPageType(router.pathname),
+      });
+    }
+  }, [ initialScreen, mixpanelConfig, router.pathname ]);
+
+  const onNextStep = React.useCallback((screen: Screen) => {
+    setSteps((prev) => [ ...prev, screen ]);
+  }, []);
+
+  const onPrevStep = React.useCallback(() => {
+    setSteps((prev) => prev.length > 1 ? prev.slice(0, -1) : prev);
+  }, []);
+
+  const onReset = React.useCallback((isAuth?: boolean) => {
+    isAuth || closeOnError ? onClose() : setSteps([ initialScreen ]);
+  }, [ initialScreen, onClose, closeOnError ]);
+
+  const onAuthSuccess = React.useCallback(async(screen: ScreenSuccess) => {
+    setIsSuccess(true);
+
+    if ('isAuth' in initialScreen && initialScreen.isAuth) {
+      mixpanel.logEvent(mixpanel.EventTypes.ACCOUNT_LINK_INFO, {
+        Status: 'Finished',
+        Type: screen.type === 'success_wallet' ? 'Wallet' : 'Email',
+        Source: mixpanelConfig?.account_link_info.source ?? 'Profile dropdown',
+      });
+    } else {
+      mixpanel.logEvent(mixpanel.EventTypes.LOGIN, {
+        Action: 'Success',
+        Source: screen.type === 'success_wallet' ? 'Wallet' : 'Email',
+      });
+    }
+
+    queryClient.setQueryData(getResourceKey('user_info'), () => screen.profile);
+    await csrfQuery.refetch();
+    onNextStep(screen);
+  }, [ initialScreen, mixpanelConfig?.account_link_info.source, onNextStep, csrfQuery, queryClient ]);
+
+  const onModalClose = React.useCallback(() => {
+    onClose(isSuccess);
+  }, [ isSuccess, onClose ]);
+
+  const header = (() => {
+    const currentStep = steps[steps.length - 1];
+    switch (currentStep.type) {
+      case 'select_method':
+        return 'Select a way to login';
+      case 'connect_wallet':
+        return currentStep.isAuth ? 'Add wallet' : 'Continue with wallet';
+      case 'email':
+        return currentStep.isAuth ? 'Add email' : 'Continue with email';
+      case 'otp_code':
+        return 'Confirmation code';
+      case 'success_email':
+      case 'success_wallet':
+        return 'Congrats!';
+    }
+  })();
+
+  const content = (() => {
+    const currentStep = steps[steps.length - 1];
+    switch (currentStep.type) {
+      case 'select_method':
+        return <AuthModalScreenSelectMethod onSelectMethod={ onNextStep }/>;
+      case 'connect_wallet':
+        return (
+          <AuthModalScreenConnectWallet
+            onSuccess={ onAuthSuccess }
+            onError={ onReset }
+            isAuth={ currentStep.isAuth }
+            source={ mixpanelConfig?.wallet_connect?.source }
+          />
+        );
+      case 'email':
+        return (
+          <AuthModalScreenEmail
+            onSubmit={ onNextStep }
+            isAuth={ currentStep.isAuth }
+            mixpanelConfig={ mixpanelConfig }
+          />
+        );
+      case 'otp_code':
+        return <AuthModalScreenOtpCode email={ currentStep.email } onSuccess={ onAuthSuccess } isAuth={ currentStep.isAuth }/>;
+      case 'success_email':
+        return (
+          <AuthModalScreenSuccessEmail
+            email={ currentStep.email }
+            onConnectWallet={ onNextStep }
+            onClose={ onModalClose }
+            isAuth={ currentStep.isAuth }
+            profile={ currentStep.profile }
+          />
+        );
+      case 'success_wallet':
+        return (
+          <AuthModalScreenSuccessWallet
+            address={ currentStep.address }
+            onAddEmail={ onNextStep }
+            onClose={ onModalClose }
+            isAuth={ currentStep.isAuth }
+            profile={ currentStep.profile }
+          />
+        );
+    }
+  })();
+
+  if (!feature.isEnabled) {
+    return null;
+  }
+
+  return (
+    <Modal isOpen onClose={ onModalClose } size={{ base: 'full', lg: 'sm' }}>
+      <ModalOverlay/>
+      <ModalContent p={ 6 } maxW={{ lg: '400px' }}>
+        <ModalHeader fontWeight="500" textStyle="h3" mb={ 2 } display="flex" alignItems="center" columnGap={ 2 }>
+          { steps.length > 1 && !steps[steps.length - 1].type.startsWith('success') && (
+            <IconSvg
+              name="arrows/east"
+              boxSize={ 6 }
+              transform="rotate(180deg)"
+              color="gray.400"
+              flexShrink={ 0 }
+              onClick={ onPrevStep }
+              cursor="pointer"
+            />
+          ) }
+          { header }
+        </ModalHeader>
+        <ModalCloseButton top={ 6 } right={ 6 } color="gray.400"/>
+        <ModalBody mb={ 0 }>
+          { content }
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default React.memo(AuthModal);
diff --git a/ui/snippets/auth/__screenshots__/AuthModal.pw.tsx_default_email-login-1.png b/ui/snippets/auth/__screenshots__/AuthModal.pw.tsx_default_email-login-1.png
new file mode 100644
index 0000000000..6305bdd8e8
Binary files /dev/null and b/ui/snippets/auth/__screenshots__/AuthModal.pw.tsx_default_email-login-1.png differ
diff --git a/ui/snippets/auth/__screenshots__/AuthModal.pw.tsx_default_email-login-2.png b/ui/snippets/auth/__screenshots__/AuthModal.pw.tsx_default_email-login-2.png
new file mode 100644
index 0000000000..005b2a0754
Binary files /dev/null and b/ui/snippets/auth/__screenshots__/AuthModal.pw.tsx_default_email-login-2.png differ
diff --git a/ui/snippets/auth/__screenshots__/AuthModal.pw.tsx_default_email-login-3.png b/ui/snippets/auth/__screenshots__/AuthModal.pw.tsx_default_email-login-3.png
new file mode 100644
index 0000000000..6ffd05d3c4
Binary files /dev/null and b/ui/snippets/auth/__screenshots__/AuthModal.pw.tsx_default_email-login-3.png differ
diff --git a/ui/snippets/auth/__screenshots__/AuthModal.pw.tsx_default_email-login-4.png b/ui/snippets/auth/__screenshots__/AuthModal.pw.tsx_default_email-login-4.png
new file mode 100644
index 0000000000..d8807216ed
Binary files /dev/null and b/ui/snippets/auth/__screenshots__/AuthModal.pw.tsx_default_email-login-4.png differ
diff --git a/ui/snippets/auth/__screenshots__/AuthModal.pw.tsx_default_link-email-to-account-1.png b/ui/snippets/auth/__screenshots__/AuthModal.pw.tsx_default_link-email-to-account-1.png
new file mode 100644
index 0000000000..cab2eadcce
Binary files /dev/null and b/ui/snippets/auth/__screenshots__/AuthModal.pw.tsx_default_link-email-to-account-1.png differ
diff --git a/ui/snippets/auth/__screenshots__/AuthModal.pw.tsx_default_link-email-to-account-2.png b/ui/snippets/auth/__screenshots__/AuthModal.pw.tsx_default_link-email-to-account-2.png
new file mode 100644
index 0000000000..4aa441a048
Binary files /dev/null and b/ui/snippets/auth/__screenshots__/AuthModal.pw.tsx_default_link-email-to-account-2.png differ
diff --git a/ui/snippets/auth/fields/AuthModalFieldOtpCode.tsx b/ui/snippets/auth/fields/AuthModalFieldOtpCode.tsx
new file mode 100644
index 0000000000..d59e8a7a22
--- /dev/null
+++ b/ui/snippets/auth/fields/AuthModalFieldOtpCode.tsx
@@ -0,0 +1,39 @@
+import { HStack, PinInputField, Text } from '@chakra-ui/react';
+import React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+
+import type { OtpCodeFormFields } from '../types';
+
+import PinInput from 'ui/shared/chakra/PinInput';
+
+const CODE_LENGTH = 6;
+
+interface Props {
+  isDisabled?: boolean;
+}
+
+const AuthModalFieldOtpCode = ({ isDisabled: isDisabledProp }: Props) => {
+  const { control } = useFormContext<OtpCodeFormFields>();
+  const { field, fieldState, formState } = useController<OtpCodeFormFields, 'code'>({
+    control,
+    name: 'code',
+    rules: { required: true, minLength: CODE_LENGTH, maxLength: CODE_LENGTH },
+  });
+
+  const isDisabled = isDisabledProp || formState.isSubmitting;
+
+  return (
+    <>
+      <HStack>
+        <PinInput otp placeholder="" { ...field } isDisabled={ isDisabled } isInvalid={ Boolean(fieldState.error) } bgColor="dialog_bg">
+          { Array.from({ length: CODE_LENGTH }).map((_, index) => (
+            <PinInputField key={ index } borderRadius="base" borderWidth="2px" bgColor="dialog_bg"/>
+          )) }
+        </PinInput>
+      </HStack>
+      { fieldState.error?.message && <Text color="error" fontSize="xs" mt={ 1 }>{ fieldState.error.message }</Text> }
+    </>
+  );
+};
+
+export default React.memo(AuthModalFieldOtpCode);
diff --git a/ui/snippets/auth/screens/AuthModalScreenConnectWallet.tsx b/ui/snippets/auth/screens/AuthModalScreenConnectWallet.tsx
new file mode 100644
index 0000000000..c05c209bf5
--- /dev/null
+++ b/ui/snippets/auth/screens/AuthModalScreenConnectWallet.tsx
@@ -0,0 +1,41 @@
+import { Center, Spinner } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ScreenSuccess } from '../types';
+import type { UserInfo } from 'types/api/account';
+
+import type * as mixpanel from 'lib/mixpanel';
+
+import useSignInWithWallet from '../useSignInWithWallet';
+
+interface Props {
+  onSuccess: (screen: ScreenSuccess) => void;
+  onError: (isAuth?: boolean) => void;
+  isAuth?: boolean;
+  source?: mixpanel.EventPayload<mixpanel.EventTypes.WALLET_CONNECT>['Source'];
+}
+
+const AuthModalScreenConnectWallet = ({ onSuccess, onError, isAuth, source }: Props) => {
+  const isStartedRef = React.useRef(false);
+
+  const handleSignInSuccess = React.useCallback(({ address, profile }: { address: string; profile: UserInfo }) => {
+    onSuccess({ type: 'success_wallet', address, isAuth, profile });
+  }, [ onSuccess, isAuth ]);
+
+  const handleSignInError = React.useCallback(() => {
+    onError(isAuth);
+  }, [ onError, isAuth ]);
+
+  const { start } = useSignInWithWallet({ onSuccess: handleSignInSuccess, onError: handleSignInError, source, isAuth });
+
+  React.useEffect(() => {
+    if (!isStartedRef.current) {
+      isStartedRef.current = true;
+      start();
+    }
+  }, [ start ]);
+
+  return <Center h="100px"><Spinner/></Center>;
+};
+
+export default React.memo(AuthModalScreenConnectWallet);
diff --git a/ui/snippets/auth/screens/AuthModalScreenEmail.tsx b/ui/snippets/auth/screens/AuthModalScreenEmail.tsx
new file mode 100644
index 0000000000..51c959e289
--- /dev/null
+++ b/ui/snippets/auth/screens/AuthModalScreenEmail.tsx
@@ -0,0 +1,104 @@
+import { chakra, Button, Text } from '@chakra-ui/react';
+import React from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import type { EmailFormFields, Screen } from '../types';
+
+import useApiFetch from 'lib/api/useApiFetch';
+import getErrorMessage from 'lib/errors/getErrorMessage';
+import getErrorObjPayload from 'lib/errors/getErrorObjPayload';
+import useToast from 'lib/hooks/useToast';
+import * as mixpanel from 'lib/mixpanel';
+import FormFieldEmail from 'ui/shared/forms/fields/FormFieldEmail';
+import ReCaptcha from 'ui/shared/reCaptcha/ReCaptcha';
+import useReCaptcha from 'ui/shared/reCaptcha/useReCaptcha';
+
+interface Props {
+  onSubmit: (screen: Screen) => void;
+  isAuth?: boolean;
+  mixpanelConfig?: {
+    account_link_info: {
+      source: mixpanel.EventPayload<mixpanel.EventTypes.ACCOUNT_LINK_INFO>['Source'];
+    };
+  };
+}
+
+const AuthModalScreenEmail = ({ onSubmit, isAuth, mixpanelConfig }: Props) => {
+
+  const apiFetch = useApiFetch();
+  const toast = useToast();
+  const recaptcha = useReCaptcha();
+
+  const formApi = useForm<EmailFormFields>({
+    mode: 'onBlur',
+    defaultValues: {
+      email: '',
+    },
+  });
+
+  const onFormSubmit: SubmitHandler<EmailFormFields> = React.useCallback(async(formData) => {
+    try {
+      const token = await recaptcha.executeAsync();
+
+      await apiFetch('auth_send_otp', {
+        fetchParams: {
+          method: 'POST',
+          body: {
+            email: formData.email,
+            recaptcha_response: token,
+          },
+        },
+      });
+      if (isAuth) {
+        mixpanelConfig?.account_link_info.source !== 'Profile' && mixpanel.logEvent(mixpanel.EventTypes.ACCOUNT_LINK_INFO, {
+          Source: mixpanelConfig?.account_link_info.source ?? 'Profile dropdown',
+          Status: 'OTP sent',
+          Type: 'Email',
+        });
+      } else {
+        mixpanel.logEvent(mixpanel.EventTypes.LOGIN, {
+          Action: 'OTP sent',
+          Source: 'Email',
+        });
+      }
+      onSubmit({ type: 'otp_code', email: formData.email, isAuth });
+    } catch (error) {
+      toast({
+        status: 'error',
+        title: 'Error',
+        description: getErrorObjPayload<{ message: string }>(error)?.message || getErrorMessage(error) || 'Something went wrong',
+      });
+    }
+  }, [ recaptcha, apiFetch, isAuth, onSubmit, mixpanelConfig?.account_link_info.source, toast ]);
+
+  return (
+    <FormProvider { ...formApi }>
+      <chakra.form
+        noValidate
+        onSubmit={ formApi.handleSubmit(onFormSubmit) }
+      >
+        <Text>Account email, used for transaction notifications from your watchlist.</Text>
+        <FormFieldEmail<EmailFormFields>
+          name="email"
+          isRequired
+          placeholder="Email"
+          bgColor="dialog_bg"
+          mt={ 6 }
+        />
+        <Button
+          mt={ 6 }
+          type="submit"
+          isDisabled={ formApi.formState.isSubmitting }
+          isLoading={ formApi.formState.isSubmitting }
+          loadingText="Send a code"
+        >
+          Send a code
+        </Button>
+        <ReCaptcha ref={ recaptcha.ref }/>
+      </chakra.form>
+    </FormProvider>
+  );
+};
+
+export default React.memo(AuthModalScreenEmail);
diff --git a/ui/snippets/auth/screens/AuthModalScreenOtpCode.tsx b/ui/snippets/auth/screens/AuthModalScreenOtpCode.tsx
new file mode 100644
index 0000000000..87cd2ec9fd
--- /dev/null
+++ b/ui/snippets/auth/screens/AuthModalScreenOtpCode.tsx
@@ -0,0 +1,144 @@
+import { chakra, Box, Text, Button } from '@chakra-ui/react';
+import React from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import type { OtpCodeFormFields, ScreenSuccess } from '../types';
+import type { UserInfo } from 'types/api/account';
+
+import useApiFetch from 'lib/api/useApiFetch';
+import getErrorMessage from 'lib/errors/getErrorMessage';
+import getErrorObjPayload from 'lib/errors/getErrorObjPayload';
+import useToast from 'lib/hooks/useToast';
+import IconSvg from 'ui/shared/IconSvg';
+import ReCaptcha from 'ui/shared/reCaptcha/ReCaptcha';
+import useReCaptcha from 'ui/shared/reCaptcha/useReCaptcha';
+
+import AuthModalFieldOtpCode from '../fields/AuthModalFieldOtpCode';
+
+interface Props {
+  email: string;
+  onSuccess: (screen: ScreenSuccess) => void;
+  isAuth?: boolean;
+}
+
+const AuthModalScreenOtpCode = ({ email, onSuccess, isAuth }: Props) => {
+
+  const apiFetch = useApiFetch();
+  const toast = useToast();
+  const recaptcha = useReCaptcha();
+  const [ isCodeSending, setIsCodeSending ] = React.useState(false);
+
+  const formApi = useForm<OtpCodeFormFields>({
+    mode: 'onBlur',
+    defaultValues: {
+      code: '',
+    },
+  });
+
+  const onFormSubmit: SubmitHandler<OtpCodeFormFields> = React.useCallback((formData) => {
+    const resource = isAuth ? 'auth_link_email' : 'auth_confirm_otp';
+    return apiFetch<typeof resource, UserInfo, unknown>(resource, {
+      fetchParams: {
+        method: 'POST',
+        body: {
+          otp: formData.code,
+          email,
+        },
+      },
+    })
+      .then((response) => {
+        if (!('name' in response)) {
+          throw Error('Something went wrong');
+        }
+        onSuccess({ type: 'success_email', email, isAuth, profile: response });
+      })
+      .catch((error) => {
+        const apiError = getErrorObjPayload<{ message: string }>(error);
+
+        if (apiError?.message) {
+          formApi.setError('code', { message: apiError.message });
+          return;
+        }
+
+        toast({
+          status: 'error',
+          title: 'Error',
+          description: getErrorMessage(error) || 'Something went wrong',
+        });
+      });
+  }, [ apiFetch, email, onSuccess, isAuth, toast, formApi ]);
+
+  const handleResendCodeClick = React.useCallback(async() => {
+    try {
+      formApi.clearErrors('code');
+      setIsCodeSending(true);
+      const token = await recaptcha.executeAsync();
+      await apiFetch('auth_send_otp', {
+        fetchParams: {
+          method: 'POST',
+          body: { email, recaptcha_response: token },
+        },
+      });
+
+      toast({
+        status: 'success',
+        title: 'Success',
+        description: 'Code has been sent to your email',
+      });
+    } catch (error) {
+      const apiError = getErrorObjPayload<{ message: string }>(error);
+
+      toast({
+        status: 'error',
+        title: 'Error',
+        description: apiError?.message || getErrorMessage(error) || 'Something went wrong',
+      });
+    } finally {
+      setIsCodeSending(false);
+    }
+  }, [ apiFetch, email, formApi, toast, recaptcha ]);
+
+  return (
+    <FormProvider { ...formApi }>
+      <chakra.form
+        noValidate
+        onSubmit={ formApi.handleSubmit(onFormSubmit) }
+      >
+        <Text mb={ 6 }>
+          Please check{ ' ' }
+          <chakra.span fontWeight="700">{ email }</chakra.span>{ ' ' }
+          and enter your code below.
+        </Text>
+        <AuthModalFieldOtpCode isDisabled={ isCodeSending }/>
+        <ReCaptcha ref={ recaptcha.ref }/>
+        <Button
+          variant="link"
+          display="flex"
+          alignItems="center"
+          columnGap={ 2 }
+          mt={ 3 }
+          fontWeight="400"
+          w="fit-content"
+          isDisabled={ isCodeSending }
+          onClick={ handleResendCodeClick }
+        >
+          <IconSvg name="repeat" boxSize={ 5 }/>
+          <Box fontSize="sm">Resend code</Box>
+        </Button>
+        <Button
+          mt={ 6 }
+          type="submit"
+          isLoading={ formApi.formState.isSubmitting }
+          isDisabled={ formApi.formState.isSubmitting || isCodeSending }
+          loadingText="Submit"
+          onClick={ formApi.handleSubmit(onFormSubmit) }
+        >
+          Submit
+        </Button>
+      </chakra.form>
+    </FormProvider>
+  );
+};
+
+export default React.memo(AuthModalScreenOtpCode);
diff --git a/ui/snippets/auth/screens/AuthModalScreenSelectMethod.tsx b/ui/snippets/auth/screens/AuthModalScreenSelectMethod.tsx
new file mode 100644
index 0000000000..5c03710246
--- /dev/null
+++ b/ui/snippets/auth/screens/AuthModalScreenSelectMethod.tsx
@@ -0,0 +1,38 @@
+import { Button, VStack } from '@chakra-ui/react';
+import React from 'react';
+
+import type { Screen } from '../types';
+
+import * as mixpanel from 'lib/mixpanel';
+
+interface Props {
+  onSelectMethod: (screen: Screen) => void;
+}
+
+const AuthModalScreenSelectMethod = ({ onSelectMethod }: Props) => {
+
+  const handleEmailClick = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.LOGIN, {
+      Action: 'Email',
+      Source: 'Options selector',
+    });
+    onSelectMethod({ type: 'email' });
+  }, [ onSelectMethod ]);
+
+  const handleConnectWalletClick = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.LOGIN, {
+      Action: 'Wallet',
+      Source: 'Options selector',
+    });
+    onSelectMethod({ type: 'connect_wallet' });
+  }, [ onSelectMethod ]);
+
+  return (
+    <VStack spacing={ 3 } mt={ 4 } align="stretch">
+      <Button variant="outline" onClick={ handleConnectWalletClick }>Continue with Web3 wallet</Button>
+      <Button variant="outline" onClick={ handleEmailClick }>Continue with email</Button>
+    </VStack>
+  );
+};
+
+export default React.memo(AuthModalScreenSelectMethod);
diff --git a/ui/snippets/auth/screens/AuthModalScreenSuccessEmail.tsx b/ui/snippets/auth/screens/AuthModalScreenSuccessEmail.tsx
new file mode 100644
index 0000000000..24cd84c3ec
--- /dev/null
+++ b/ui/snippets/auth/screens/AuthModalScreenSuccessEmail.tsx
@@ -0,0 +1,65 @@
+import { chakra, Box, Text, Button } from '@chakra-ui/react';
+import React from 'react';
+
+import type { Screen } from '../types';
+import type { UserInfo } from 'types/api/account';
+
+import config from 'configs/app';
+
+interface Props {
+  email: string;
+  onConnectWallet: (screen: Screen) => void;
+  onClose: () => void;
+  isAuth?: boolean;
+  profile: UserInfo | undefined;
+}
+
+const AuthModalScreenSuccessEmail = ({ email, onConnectWallet, onClose, isAuth, profile }: Props) => {
+  const handleConnectWalletClick = React.useCallback(() => {
+    onConnectWallet({ type: 'connect_wallet', isAuth: true });
+  }, [ onConnectWallet ]);
+
+  if (isAuth) {
+    return (
+      <Box>
+        <Text>
+          Your account was linked to{ ' ' }
+          <chakra.span fontWeight="700">{ email }</chakra.span>{ ' ' }
+          email. Use for the next login.
+        </Text>
+        <Button
+          mt={ 6 }
+          variant="outline"
+          onClick={ onClose }
+        >
+          Got it!
+        </Button>
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      <Text>
+        <chakra.span fontWeight="700">{ email }</chakra.span>{ ' ' }
+        email has been successfully used to log in to your Blockscout account.
+      </Text>
+      { !profile?.address_hash && config.features.blockchainInteraction.isEnabled ? (
+        <>
+          <Text mt={ 6 }>Add your web3 wallet to safely interact with smart contracts and dapps inside Blockscout.</Text>
+          <Button mt={ 6 } onClick={ handleConnectWalletClick }>Connect wallet</Button>
+        </>
+      ) : (
+        <Button
+          variant="outline"
+          mt={ 6 }
+          onClick={ onClose }
+        >
+          Got it!
+        </Button>
+      ) }
+    </Box>
+  );
+};
+
+export default React.memo(AuthModalScreenSuccessEmail);
diff --git a/ui/snippets/auth/screens/AuthModalScreenSuccessWallet.tsx b/ui/snippets/auth/screens/AuthModalScreenSuccessWallet.tsx
new file mode 100644
index 0000000000..2febd91f29
--- /dev/null
+++ b/ui/snippets/auth/screens/AuthModalScreenSuccessWallet.tsx
@@ -0,0 +1,74 @@
+import { chakra, Box, Text, Button, Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import type { Screen } from '../types';
+import type { UserInfo } from 'types/api/account';
+
+import config from 'configs/app';
+import { apos } from 'lib/html-entities';
+import shortenString from 'lib/shortenString';
+
+interface Props {
+  address: string;
+  onAddEmail: (screen: Screen) => void;
+  onClose: () => void;
+  isAuth?: boolean;
+  profile: UserInfo | undefined;
+}
+
+const AuthModalScreenSuccessWallet = ({ address, onAddEmail, onClose, isAuth, profile }: Props) => {
+  const handleAddEmailClick = React.useCallback(() => {
+    onAddEmail({ type: 'email', isAuth: true });
+  }, [ onAddEmail ]);
+
+  if (isAuth) {
+    return (
+      <Box>
+        <Text>
+          Your account was linked to{ ' ' }
+          <chakra.span fontWeight="700">{ shortenString(address) }</chakra.span>{ ' ' }
+          wallet. Use for the next login.
+        </Text>
+        <Button
+          mt={ 6 }
+          variant="outline"
+          onClick={ onClose }
+        >
+          Got it!
+        </Button>
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      <Text>
+        Wallet{ ' ' }
+        <chakra.span fontWeight="700">{ shortenString(address) }</chakra.span>{ ' ' }
+        has been successfully used to log in to your Blockscout account.
+      </Text>
+      { !profile?.email ? (
+        <>
+          <Text mt={ 6 }>
+            Add your email to receive exclusive updates about Blockscout { config.features.rewards.isEnabled ? 'Merits ' : ' ' }
+            and notifications about addresses in your watch list.
+          </Text>
+          <Flex mt={ 6 } gap={ 2 }>
+            <Button onClick={ handleAddEmailClick }>Add email</Button>
+            <Button variant="simple" onClick={ onClose }>I{ apos }ll do it later</Button>
+          </Flex>
+        </>
+      ) : (
+        <Button
+          mt={ 6 }
+          variant="outline"
+          onClick={ onClose }
+        >
+          Got it!
+        </Button>
+      ) }
+    </Box>
+  );
+};
+
+export default React.memo(AuthModalScreenSuccessWallet);
diff --git a/ui/snippets/auth/types.ts b/ui/snippets/auth/types.ts
new file mode 100644
index 0000000000..38aac0c427
--- /dev/null
+++ b/ui/snippets/auth/types.ts
@@ -0,0 +1,34 @@
+import type { UserInfo } from 'types/api/account';
+
+export type ScreenSuccess = {
+  type: 'success_email';
+  email: string;
+  profile: UserInfo;
+  isAuth?: boolean;
+} | {
+  type: 'success_wallet';
+  address: string;
+  profile: UserInfo;
+  isAuth?: boolean;
+};
+export type Screen = {
+  type: 'select_method';
+} | {
+  type: 'connect_wallet';
+  isAuth?: boolean;
+} | {
+  type: 'email';
+  isAuth?: boolean;
+} | {
+  type: 'otp_code';
+  email: string;
+  isAuth?: boolean;
+} | ScreenSuccess;
+
+export interface EmailFormFields {
+  email: string;
+}
+
+export interface OtpCodeFormFields {
+  code: string;
+}
diff --git a/ui/snippets/auth/useIsAuth.ts b/ui/snippets/auth/useIsAuth.ts
new file mode 100644
index 0000000000..c4e5467e1e
--- /dev/null
+++ b/ui/snippets/auth/useIsAuth.ts
@@ -0,0 +1,18 @@
+import config from 'configs/app';
+import { useAppContext } from 'lib/contexts/app';
+import * as cookies from 'lib/cookies';
+
+import useProfileQuery from './useProfileQuery';
+
+export default function useAuth() {
+  const appProps = useAppContext();
+  const profileQuery = useProfileQuery();
+
+  if (!config.features.account.isEnabled) {
+    return false;
+  }
+
+  const cookiesString = appProps.cookies;
+  const hasAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN, cookiesString) || profileQuery.data);
+  return hasAuth;
+}
diff --git a/ui/snippets/auth/useLogout.ts b/ui/snippets/auth/useLogout.ts
new file mode 100644
index 0000000000..be9ac90ee9
--- /dev/null
+++ b/ui/snippets/auth/useLogout.ts
@@ -0,0 +1,69 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { Route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import useApiFetch from 'lib/api/useApiFetch';
+import { getResourceKey } from 'lib/api/useApiQuery';
+import * as cookies from 'lib/cookies';
+import useToast from 'lib/hooks/useToast';
+import * as mixpanel from 'lib/mixpanel';
+
+const PROTECTED_ROUTES: Array<Route['pathname']> = [
+  '/account/api-key',
+  '/account/custom-abi',
+  '/account/rewards',
+  '/account/tag-address',
+  '/account/verified-addresses',
+  '/account/watchlist',
+  '/auth/profile',
+];
+
+export default function useLogout() {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const toast = useToast();
+  const apiFetch = useApiFetch();
+
+  return React.useCallback(async() => {
+    try {
+      await apiFetch('auth_logout');
+      cookies.remove(cookies.NAMES.API_TOKEN);
+
+      if (config.features.rewards.isEnabled) {
+        const rewardsToken = cookies.get(cookies.NAMES.REWARDS_API_TOKEN);
+        await apiFetch('rewards_logout', { fetchParams: {
+          method: 'POST',
+          headers: { Authorization: `Bearer ${ rewardsToken }` },
+        } });
+        cookies.remove(cookies.NAMES.REWARDS_API_TOKEN);
+      }
+
+      queryClient.resetQueries({
+        queryKey: getResourceKey('user_info'),
+        exact: true,
+      });
+      queryClient.resetQueries({
+        queryKey: getResourceKey('custom_abi'),
+        exact: true,
+      });
+
+      mixpanel.logEvent(mixpanel.EventTypes.ACCOUNT_ACCESS, { Action: 'Logged out' }, { send_immediately: true });
+
+      if (
+        PROTECTED_ROUTES.includes(router.pathname) ||
+          (router.pathname === '/txs' && router.query.tab === 'watchlist')
+      ) {
+        router.push({ pathname: '/' }, undefined, { shallow: true });
+      }
+    } catch (error) {
+      toast({
+        status: 'error',
+        title: 'Logout failed',
+        description: 'Please try again later',
+      });
+    }
+  }, [ apiFetch, queryClient, router, toast ]);
+}
diff --git a/ui/snippets/auth/useProfileQuery.ts b/ui/snippets/auth/useProfileQuery.ts
new file mode 100644
index 0000000000..3cacf32044
--- /dev/null
+++ b/ui/snippets/auth/useProfileQuery.ts
@@ -0,0 +1,11 @@
+import useApiQuery from 'lib/api/useApiQuery';
+import * as cookies from 'lib/cookies';
+
+export default function useProfileQuery() {
+  return useApiQuery('user_info', {
+    queryOptions: {
+      refetchOnMount: false,
+      enabled: Boolean(cookies.get(cookies.NAMES.API_TOKEN)),
+    },
+  });
+}
diff --git a/ui/snippets/auth/useRedirectForInvalidAuthToken.ts b/ui/snippets/auth/useRedirectForInvalidAuthToken.ts
new file mode 100644
index 0000000000..96634a138b
--- /dev/null
+++ b/ui/snippets/auth/useRedirectForInvalidAuthToken.ts
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import * as cookies from 'lib/cookies';
+import { useRollbar } from 'lib/rollbar';
+import useProfileQuery from 'ui/snippets/auth/useProfileQuery';
+
+export default function useRedirectForInvalidAuthToken() {
+  const rollbar = useRollbar();
+  const profileQuery = useProfileQuery();
+  const errorStatus = profileQuery.error?.status;
+
+  React.useEffect(() => {
+    if (errorStatus === 401) {
+      const apiToken = cookies.get(cookies.NAMES.API_TOKEN);
+
+      if (apiToken) {
+        cookies.remove(cookies.NAMES.API_TOKEN);
+        window.location.assign('/');
+      }
+    }
+  }, [ errorStatus, rollbar ]);
+}
diff --git a/ui/snippets/auth/useSignInWithWallet.ts b/ui/snippets/auth/useSignInWithWallet.ts
new file mode 100644
index 0000000000..f2af71ff13
--- /dev/null
+++ b/ui/snippets/auth/useSignInWithWallet.ts
@@ -0,0 +1,85 @@
+import React from 'react';
+import { useSignMessage } from 'wagmi';
+
+import type { UserInfo } from 'types/api/account';
+
+import config from 'configs/app';
+import useApiFetch from 'lib/api/useApiFetch';
+import getErrorMessage from 'lib/errors/getErrorMessage';
+import getErrorObj from 'lib/errors/getErrorObj';
+import getErrorObjPayload from 'lib/errors/getErrorObjPayload';
+import useToast from 'lib/hooks/useToast';
+import type * as mixpanel from 'lib/mixpanel';
+import useWeb3Wallet from 'lib/web3/useWallet';
+
+interface Props {
+  onSuccess?: ({ address, profile }: { address: string; profile: UserInfo }) => void;
+  onError?: () => void;
+  source?: mixpanel.EventPayload<mixpanel.EventTypes.WALLET_CONNECT>['Source'];
+  isAuth?: boolean;
+}
+
+function useSignInWithWallet({ onSuccess, onError, source = 'Login', isAuth }: Props) {
+  const [ isPending, setIsPending ] = React.useState(false);
+  const isConnectingWalletRef = React.useRef(false);
+
+  const apiFetch = useApiFetch();
+  const toast = useToast();
+  const web3Wallet = useWeb3Wallet({ source });
+  const { signMessageAsync } = useSignMessage();
+
+  const proceedToAuth = React.useCallback(async(address: string) => {
+    try {
+      const siweMessage = await apiFetch('auth_siwe_message', { queryParams: { address } }) as { siwe_message: string };
+      const signature = await signMessageAsync({ message: siweMessage.siwe_message });
+      const resource = isAuth ? 'auth_link_address' : 'auth_siwe_verify';
+      const response = await apiFetch<typeof resource, UserInfo, unknown>(resource, {
+        fetchParams: {
+          method: 'POST',
+          body: { message: siweMessage.siwe_message, signature },
+        },
+      });
+      if (!('name' in response)) {
+        throw Error('Something went wrong');
+      }
+      onSuccess?.({ address, profile: response });
+    } catch (error) {
+      const errorObj = getErrorObj(error);
+      const apiErrorMessage = getErrorObjPayload<{ message: string }>(error)?.message;
+      const shortMessage = errorObj && 'shortMessage' in errorObj && typeof errorObj.shortMessage === 'string' ? errorObj.shortMessage : undefined;
+      onError?.();
+      toast({
+        status: 'error',
+        title: 'Error',
+        description: apiErrorMessage || shortMessage || getErrorMessage(error) || 'Something went wrong',
+      });
+    } finally {
+      setIsPending(false);
+    }
+  }, [ apiFetch, isAuth, onError, onSuccess, signMessageAsync, toast ]);
+
+  const start = React.useCallback(() => {
+    setIsPending(true);
+    if (web3Wallet.address) {
+      proceedToAuth(web3Wallet.address);
+    } else {
+      isConnectingWalletRef.current = true;
+      web3Wallet.openModal();
+    }
+  }, [ proceedToAuth, web3Wallet ]);
+
+  React.useEffect(() => {
+    if (web3Wallet.address && isConnectingWalletRef.current) {
+      isConnectingWalletRef.current = false;
+      proceedToAuth(web3Wallet.address);
+    }
+  }, [ proceedToAuth, web3Wallet.address ]);
+
+  return React.useMemo(() => ({ start, isPending }), [ start, isPending ]);
+}
+
+function useSignInWithWalletFallback() {
+  return React.useMemo(() => ({ start: () => {}, isPending: false }), [ ]);
+}
+
+export default config.features.blockchainInteraction.isEnabled ? useSignInWithWallet : useSignInWithWalletFallback;
diff --git a/ui/snippets/footer/Footer.pw.tsx b/ui/snippets/footer/Footer.pw.tsx
index 5749ebf485..d0cefccf62 100644
--- a/ui/snippets/footer/Footer.pw.tsx
+++ b/ui/snippets/footer/Footer.pw.tsx
@@ -1,54 +1,28 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
-import type { WindowProvider } from 'wagmi';
 
-import { buildExternalAssetFilePath } from 'configs/app/utils';
 import { FOOTER_LINKS } from 'mocks/config/footerLinks';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import * as app from 'playwright/utils/app';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import Footer from './Footer';
 
-const FOOTER_LINKS_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_FOOTER_LINKS', 'https://localhost:3000/footer-links.json') || '';
-
-const BACKEND_VERSION_API_URL = buildApiUrl('config_backend_version');
-const INDEXING_ALERT_API_URL = buildApiUrl('homepage_indexing_status');
-
-base.describe('with custom links, max cols', () => {
-  const test = base.extend({
-    context: contextWithEnvs([
-      { name: 'NEXT_PUBLIC_FOOTER_LINKS', value: FOOTER_LINKS_URL },
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ]) as any,
-  });
-
-  test.beforeEach(async({ page, mount }) => {
-    await page.route(FOOTER_LINKS_URL, (route) => {
-      return route.fulfill({
-        body: JSON.stringify(FOOTER_LINKS),
-      });
+const FOOTER_LINKS_URL = 'https://localhost:3000/footer-links.json';
+
+test.describe('with custom links, max cols', () => {
+  test.beforeEach(async({ render, mockApiResponse, mockConfigResponse, injectMetaMaskProvider, mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_FOOTER_LINKS', FOOTER_LINKS_URL ],
+    ]);
+    await mockConfigResponse('NEXT_PUBLIC_FOOTER_LINKS', FOOTER_LINKS_URL, FOOTER_LINKS);
+    await injectMetaMaskProvider();
+    await mockApiResponse('homepage_indexing_status', {
+      finished_indexing: false,
+      finished_indexing_blocks: false,
+      indexed_internal_transactions_ratio: '0.1',
+      indexed_blocks_ratio: '0.1',
     });
 
-    await page.evaluate(() => {
-      window.ethereum = {
-        isMetaMask: true,
-        _events: {},
-      } as WindowProvider;
-    });
-
-    await page.route(INDEXING_ALERT_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ finished_indexing: false, indexed_internal_transactions_ratio: 0.1 }),
-    }));
-
-    await mount(
-      <TestApp>
-        <Footer/>
-      </TestApp>,
-    );
+    await render(<Footer/>);
   });
 
   test('+@mobile +@dark-mode', async({ page }) => {
@@ -56,82 +30,43 @@ base.describe('with custom links, max cols', () => {
   });
 
   test.describe('screen xl', () => {
-    test.use({ viewport: configs.viewport.xl });
+    test.use({ viewport: pwConfig.viewport.xl });
 
-    test('', async({ page }) => {
+    test('base view', async({ page }) => {
       await expect(page).toHaveScreenshot();
     });
   });
 });
 
-base.describe('with custom links, min cols', () => {
-  const test = base.extend({
-    context: contextWithEnvs([
-      { name: 'NEXT_PUBLIC_FOOTER_LINKS', value: FOOTER_LINKS_URL },
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ]) as any,
-  });
-
-  test('base view +@dark-mode +@mobile', async({ mount, page }) => {
-    await page.route(FOOTER_LINKS_URL, (route) => {
-      return route.fulfill({
-        body: JSON.stringify([ FOOTER_LINKS[0] ]),
-      });
-    });
-
-    await mount(
-      <TestApp>
-        <Footer/>
-      </TestApp>,
-    );
-
+test.describe('with custom links, min cols', () => {
+  test('base view +@dark-mode +@mobile', async({ render, page, mockConfigResponse, mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_FOOTER_LINKS', FOOTER_LINKS_URL ],
+    ]);
+    await mockConfigResponse('NEXT_PUBLIC_FOOTER_LINKS', FOOTER_LINKS_URL, [ FOOTER_LINKS[0] ]);
+    await render(<Footer/>);
     await expect(page).toHaveScreenshot();
   });
 });
 
-base.describe('without custom links', () => {
-  base('base view +@dark-mode +@mobile', async({ mount, page }) => {
-    await page.evaluate(() => {
-      window.ethereum = {
-        isMetaMask: true,
-        _events: {},
-      } as WindowProvider;
-    });
-    await page.route(BACKEND_VERSION_API_URL, (route) => {
-      return route.fulfill({
-        body: JSON.stringify({
-          backend_version: 'v5.2.0-beta.+commit.1ce1a355',
-        }),
-      });
-    });
-
-    await mount(
-      <TestApp>
-        <Footer/>
-      </TestApp>,
-    );
-
+test.describe('without custom links', () => {
+  test('base view +@dark-mode +@mobile', async({ render, page, injectMetaMaskProvider, mockApiResponse }) => {
+    await injectMetaMaskProvider();
+    await mockApiResponse('config_backend_version', { backend_version: 'v5.2.0-beta.+commit.1ce1a355' });
+    await render(<Footer/>);
     await expect(page).toHaveScreenshot();
   });
 
-  base('with indexing alert +@dark-mode +@mobile', async({ mount, page }) => {
-    await page.evaluate(() => {
-      window.ethereum = {
-        providers: [ { isMetaMask: true, _events: {} } ],
-      } as WindowProvider;
+  test('with indexing alert +@dark-mode +@mobile', async({ render, injectMetaMaskProvider, mockApiResponse }) => {
+    await injectMetaMaskProvider();
+    await mockApiResponse('homepage_indexing_status', {
+      finished_indexing: false,
+      finished_indexing_blocks: false,
+      indexed_internal_transactions_ratio: '0.1',
+      indexed_blocks_ratio: '0.1',
     });
 
-    await page.route(INDEXING_ALERT_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ finished_indexing: false, indexed_internal_transactions_ratio: 0.1 }),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <Footer/>
-      </TestApp>,
-    );
-
+    const component = await render(<Footer/>);
     await expect(component).toHaveScreenshot();
   });
 });
diff --git a/ui/snippets/footer/Footer.tsx b/ui/snippets/footer/Footer.tsx
index 430cd19da4..f1cdda353f 100644
--- a/ui/snippets/footer/Footer.tsx
+++ b/ui/snippets/footer/Footer.tsx
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 import type { GridProps } from '@chakra-ui/react';
 import {
   Box,
@@ -9,6 +10,10 @@ import {
   Skeleton,
   HStack,
 } from '@chakra-ui/react';
+=======
+import type { GridProps, HTMLChakraProps } from '@chakra-ui/react';
+import { Box, Grid, Flex, Text, Link, VStack, Skeleton, useColorModeValue } from '@chakra-ui/react';
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739
 import { useQuery } from '@tanstack/react-query';
 import Image from 'next/image';
 import React from 'react';
@@ -19,6 +24,13 @@ import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
 // import useApiQuery from "lib/api/useApiQuery";
 import useFetch from 'lib/hooks/useFetch';
+<<<<<<< HEAD
+=======
+import useIssueUrl from 'lib/hooks/useIssueUrl';
+import { copy } from 'lib/html-entities';
+import IconSvg from 'ui/shared/IconSvg';
+import { CONTENT_MAX_WIDTH } from 'ui/shared/layout/utils';
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739
 import NetworkAddToWallet from 'ui/shared/NetworkAddToWallet';
 
 import FooterLinkItem from './FooterLinkItem';
@@ -31,6 +43,7 @@ const MAX_LINKS_COLUMNS = 4;
 // const FRONT_COMMIT_URL = `https://github.com/boolnetwork/boolscan/commit/${ config.UI.footer.frontendCommit }`;
 
 const Footer = () => {
+<<<<<<< HEAD
   // const { data: backendVersionData } = useApiQuery("config_backend_version", {
   //   queryOptions: {
   //     staleTime: Infinity,
@@ -40,16 +53,59 @@ const Footer = () => {
   // const issueUrl = useIssueUrl(backendVersionData?.backend_version);
   const BLOCKSCOUT_LINKS = [
     {
+=======
+
+  const { data: backendVersionData } = useApiQuery('config_backend_version', {
+    queryOptions: {
+      staleTime: Infinity,
+    },
+  });
+  const apiVersionUrl = getApiVersionUrl(backendVersionData?.backend_version);
+  const issueUrl = useIssueUrl(backendVersionData?.backend_version);
+  const logoColor = useColorModeValue('blue.600', 'white');
+
+  const BLOCKSCOUT_LINKS = [
+    {
+      icon: 'edit' as const,
+      iconSize: '16px',
+      text: 'Submit an issue',
+      url: issueUrl,
+    },
+    {
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739
       icon: 'social/git' as const,
       iconSize: '18px',
       text: 'GitHub',
       url: 'https://github.com/boolnetwork/boolscan',
     },
     {
-      icon: 'social/tweet' as const,
+      icon: 'social/twitter' as const,
       iconSize: '18px',
+<<<<<<< HEAD
       text: 'Twitter',
       url: 'https://www.twitter.com/bool_official',
+=======
+      text: 'X (ex-Twitter)',
+      url: 'https://www.twitter.com/blockscoutcom',
+    },
+    {
+      icon: 'social/discord' as const,
+      iconSize: '24px',
+      text: 'Discord',
+      url: 'https://discord.gg/blockscout',
+    },
+    {
+      icon: 'brands/blockscout' as const,
+      iconSize: '18px',
+      text: 'All chains',
+      url: 'https://www.blockscout.com/chains-and-projects',
+    },
+    {
+      icon: 'donate' as const,
+      iconSize: '20px',
+      text: 'Donate',
+      url: 'https://github.com/sponsors/blockscout',
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739
     },
   ];
 
@@ -105,6 +161,7 @@ const Footer = () => {
     [],
   );
 
+<<<<<<< HEAD
   const renderProjectInfo = React.useCallback(
     (gridArea?: GridProps['gridArea']) => {
       return (
@@ -129,41 +186,94 @@ const Footer = () => {
             Network.
           </Text>
           { /* <VStack spacing={ 1 } mt={ 6 } alignItems="start">
+=======
+  const renderProjectInfo = React.useCallback((gridArea?: GridProps['gridArea']) => {
+    return (
+      <Box gridArea={ gridArea }>
+        <Flex columnGap={ 2 } fontSize="xs" lineHeight={ 5 } alignItems="center" color="text">
+          <span>Made with</span>
+          <Link href="https://www.blockscout.com" isExternal display="inline-flex" color={ logoColor } _hover={{ color: logoColor }}>
+            <IconSvg
+              name="networks/logo-placeholder"
+              width="80px"
+              height={ 4 }
+            />
+          </Link>
+        </Flex>
+        <Text mt={ 3 } fontSize="xs">
+          Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks.
+        </Text>
+        <Box mt={ 6 } alignItems="start" fontSize="xs" lineHeight={ 5 }>
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739
           { apiVersionUrl && (
-            <Text fontSize="xs">
+            <Text>
               Backend: <Link href={ apiVersionUrl } target="_blank">{ backendVersionData?.backend_version }</Link>
             </Text>
           ) }
           { frontendLink && (
-            <Text fontSize="xs">
+            <Text>
               Frontend: { frontendLink }
             </Text>
           ) }
+<<<<<<< HEAD
         </VStack> */ }
         </Box>
       );
     },
     [],
   );
+=======
+          <Text>
+            Copyright { copy } Blockscout Limited 2023-{ (new Date()).getFullYear() }
+          </Text>
+        </Box>
+      </Box>
+    );
+  }, [ apiVersionUrl, backendVersionData?.backend_version, frontendLink, logoColor ]);
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739
 
-  const containerProps: GridProps = {
+  const containerProps: HTMLChakraProps<'div'> = {
     as: 'footer',
-    px: { base: 4, lg: 12 },
-    py: { base: 4, lg: 9 },
-    borderTop: '1px solid',
-    borderColor: 'divider',
+    borderTopWidth: '1px',
+    borderTopColor: 'solid',
+  };
+
+  const contentProps: GridProps = {
+    px: { base: 4, lg: config.UI.navigation.layout === 'horizontal' ? 6 : 12, '2xl': 6 },
+    py: { base: 4, lg: 8 },
     gridTemplateColumns: { base: '1fr', lg: 'minmax(auto, 470px) 1fr' },
     columnGap: { lg: '32px', xl: '100px' },
+    maxW: `${ CONTENT_MAX_WIDTH }px`,
+    m: '0 auto',
+  };
+
+  const renderRecaptcha = (gridArea?: GridProps['gridArea']) => {
+    if (!config.services.reCaptchaV2.siteKey) {
+      return <Box gridArea={ gridArea }/>;
+    }
+
+    return (
+      <Box gridArea={ gridArea } fontSize="xs" lineHeight={ 5 } mt={ 6 } color="text">
+        <span>This site is protected by reCAPTCHA and the Google </span>
+        <Link href="https://policies.google.com/privacy" isExternal>Privacy Policy</Link>
+        <span> and </span>
+        <Link href="https://policies.google.com/terms" isExternal>Terms of Service</Link>
+        <span> apply.</span>
+      </Box>
+    );
   };
 
   if (config.UI.footer.links) {
     return (
-      <Grid { ...containerProps }>
-        <div>
-          { renderNetworkInfo() }
-          { renderProjectInfo() }
-        </div>
+      <Box { ...containerProps }>
+        <Grid { ...contentProps }>
+          <div>
+            { renderNetworkInfo() }
+            { renderProjectInfo() }
+            { renderRecaptcha() }
+          </div>
 
+<<<<<<< HEAD
         <Grid
           gap={{
             base: 6,
@@ -204,19 +314,50 @@ const Footer = () => {
                 </VStack>
               </Box>
             )) }
+=======
+          <Grid
+            gap={{ base: 6, lg: colNum === MAX_LINKS_COLUMNS + 1 ? 2 : 8, xl: 12 }}
+            gridTemplateColumns={{
+              base: 'repeat(auto-fill, 160px)',
+              lg: `repeat(${ colNum }, 135px)`,
+              xl: `repeat(${ colNum }, 160px)`,
+            }}
+            justifyContent={{ lg: 'flex-end' }}
+            mt={{ base: 8, lg: 0 }}
+          >
+            {
+              ([
+                { title: 'Blockscout', links: BLOCKSCOUT_LINKS },
+                ...(linksData || []),
+              ])
+                .slice(0, colNum)
+                .map(linkGroup => (
+                  <Box key={ linkGroup.title }>
+                    <Skeleton fontWeight={ 500 } mb={ 3 } display="inline-block" isLoaded={ !isPlaceholderData }>{ linkGroup.title }</Skeleton>
+                    <VStack spacing={ 1 } alignItems="start">
+                      { linkGroup.links.map(link => <FooterLinkItem { ...link } key={ link.text } isLoading={ isPlaceholderData }/>) }
+                    </VStack>
+                  </Box>
+                ))
+            }
+          </Grid>
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739
         </Grid>
-      </Grid>
+      </Box>
     );
   }
 
   return (
-    <Grid
-      { ...containerProps }
-      gridTemplateAreas={{
-        lg: `
+    <Box { ...containerProps }>
+      <Grid
+        { ...contentProps }
+        gridTemplateAreas={{
+          lg: `
           "network links-top"
           "info links-bottom"
+          "recaptcha links-bottom"
         `,
+<<<<<<< HEAD
       }}
     >
       { renderNetworkInfo({ lg: 'network' }) }
@@ -229,22 +370,43 @@ const Footer = () => {
           base: 'repeat(auto-fill, 160px)',
           lg: 'repeat(3, 160px)',
           xl: 'repeat(4, 160px)',
+=======
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739
         }}
-        gridTemplateRows={{
-          base: 'auto',
-          lg: 'repeat(3, auto)',
-          xl: 'repeat(2, auto)',
-        }}
-        gridAutoFlow={{ base: 'row', lg: 'column' }}
-        alignContent="start"
-        justifyContent={{ lg: 'flex-end' }}
-        mt={{ base: 8, lg: 0 }}
       >
+<<<<<<< HEAD
         { BLOCKSCOUT_LINKS.map((link) => (
           <FooterLinkItem { ...link } key={ link.text }/>
         )) }
+=======
+
+        { renderNetworkInfo({ lg: 'network' }) }
+        { renderProjectInfo({ lg: 'info' }) }
+        { renderRecaptcha({ lg: 'recaptcha' }) }
+
+        <Grid
+          gridArea={{ lg: 'links-bottom' }}
+          gap={ 1 }
+          gridTemplateColumns={{
+            base: 'repeat(auto-fill, 160px)',
+            lg: 'repeat(2, 160px)',
+            xl: 'repeat(3, 160px)',
+          }}
+          gridTemplateRows={{
+            base: 'auto',
+            lg: 'repeat(3, auto)',
+            xl: 'repeat(2, auto)',
+          }}
+          gridAutoFlow={{ base: 'row', lg: 'column' }}
+          alignContent="start"
+          justifyContent={{ lg: 'flex-end' }}
+          mt={{ base: 8, lg: 0 }}
+        >
+          { BLOCKSCOUT_LINKS.map(link => <FooterLinkItem { ...link } key={ link.text }/>) }
+        </Grid>
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739
       </Grid>
-    </Grid>
+    </Box>
   );
 };
 
diff --git a/ui/snippets/footer/FooterLinkItem.tsx b/ui/snippets/footer/FooterLinkItem.tsx
index 9d334a42d0..2e364a306e 100644
--- a/ui/snippets/footer/FooterLinkItem.tsx
+++ b/ui/snippets/footer/FooterLinkItem.tsx
@@ -10,7 +10,7 @@ type Props = {
   text: string;
   url: string;
   isLoading?: boolean;
-}
+};
 
 const FooterLinkItem = ({ icon, iconSize, text, url, isLoading }: Props) => {
   if (isLoading) {
diff --git a/ui/snippets/footer/IntTxsIndexingStatus.tsx b/ui/snippets/footer/IntTxsIndexingStatus.tsx
index fbf533f968..6e3e9350db 100644
--- a/ui/snippets/footer/IntTxsIndexingStatus.tsx
+++ b/ui/snippets/footer/IntTxsIndexingStatus.tsx
@@ -1,4 +1,4 @@
-import { IconButton, Popover, PopoverTrigger, PopoverContent, PopoverBody, Flex, Text, useColorModeValue } from '@chakra-ui/react';
+import { IconButton, PopoverTrigger, PopoverContent, PopoverBody, Flex, Text, useColorModeValue } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import React from 'react';
 
@@ -9,6 +9,7 @@ import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 import { apos, nbsp, ndash } from 'lib/html-entities';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
+import Popover from 'ui/shared/chakra/Popover';
 import IconSvg from 'ui/shared/IconSvg';
 
 const IntTxsIndexingStatus = () => {
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-max-cols-mobile-dark-mode-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-max-cols-mobile-dark-mode-1.png
index 0fc5ef3bc9..6815b820b1 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-max-cols-mobile-dark-mode-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-max-cols-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png
index ca21b198bd..90848c927d 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_without-custom-links-base-view-dark-mode-mobile-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_without-custom-links-base-view-dark-mode-mobile-1.png
index 8e7ccaa17f..a9fdac7890 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_without-custom-links-base-view-dark-mode-mobile-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_without-custom-links-base-view-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png
index 30756d332a..c8773527d0 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-mobile-dark-mode-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-mobile-dark-mode-1.png
index 4ed0980dbd..48a2c2dc84 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-mobile-dark-mode-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-screen-xl-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-screen-xl-1.png
deleted file mode 100644
index 252ba0ea84..0000000000
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-screen-xl-1.png and /dev/null differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-screen-xl-base-view-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-screen-xl-base-view-1.png
new file mode 100644
index 0000000000..f8a55bfed4
Binary files /dev/null and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-screen-xl-base-view-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png
index a8b838f541..8081c45790 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_without-custom-links-base-view-dark-mode-mobile-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_without-custom-links-base-view-dark-mode-mobile-1.png
index aada6b053a..17deb71f06 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_without-custom-links-base-view-dark-mode-mobile-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_without-custom-links-base-view-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png
index 5681129337..cc06489296 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_with-custom-links-max-cols-mobile-dark-mode-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_with-custom-links-max-cols-mobile-dark-mode-1.png
index edab8c4966..af922dd373 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_with-custom-links-max-cols-mobile-dark-mode-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_with-custom-links-max-cols-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png
index 483b96df6c..dddc9189d6 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_without-custom-links-base-view-dark-mode-mobile-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_without-custom-links-base-view-dark-mode-mobile-1.png
index ba074854d2..2a8011afef 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_without-custom-links-base-view-dark-mode-mobile-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_without-custom-links-base-view-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png
index c519578200..4af1d074ab 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/header/Burger.pw.tsx b/ui/snippets/header/Burger.pw.tsx
index 9f64412b9b..ecd0bef621 100644
--- a/ui/snippets/header/Burger.pw.tsx
+++ b/ui/snippets/header/Burger.pw.tsx
@@ -1,20 +1,16 @@
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
+import type { BrowserContext } from '@playwright/test';
 import React from 'react';
 
-import { buildExternalAssetFilePath } from 'configs/app/utils';
-import { FEATURED_NETWORKS_MOCK } from 'mocks/config/network';
-import authFixture from 'playwright/fixtures/auth';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import createContextWithStorage from 'playwright/fixtures/createContextWithStorage';
-import TestApp from 'playwright/TestApp';
-import * as app from 'playwright/utils/app';
+import { FEATURED_NETWORKS } from 'mocks/config/network';
+import { contextWithAuth } from 'playwright/fixtures/auth';
+import { test, expect, devices } from 'playwright/lib';
 
 import Burger from './Burger';
 
-const FEATURED_NETWORKS_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_FEATURED_NETWORKS', 'https://localhost:3000/featured-networks.json') || '';
+const FEATURED_NETWORKS_URL = 'https://localhost:3000/featured-networks.json';
 const LOGO_URL = 'https://localhost:3000/my-logo.png';
 
-base.use({ viewport: devices['iPhone 13 Pro'].viewport });
+test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
 const hooksConfig = {
   router: {
@@ -24,32 +20,16 @@ const hooksConfig = {
   },
 };
 
-const test = base.extend({
-  context: contextWithEnvs([
-    { name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
+test.beforeEach(async({ mockEnvs, mockConfigResponse, mockAssetResponse }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL ],
+  ]);
+  await mockConfigResponse('NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL, FEATURED_NETWORKS);
+  await mockAssetResponse(LOGO_URL, './playwright/mocks/image_s.jpg');
 });
 
-test('base view', async({ mount, page }) => {
-  await page.route(FEATURED_NETWORKS_URL, (route) => {
-    return route.fulfill({
-      body: FEATURED_NETWORKS_MOCK,
-    });
-  });
-  await page.route(LOGO_URL, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
-
-  const component = await mount(
-    <TestApp>
-      <Burger/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('base view', async({ render, page }) => {
+  const component = await render(<Burger/>, { hooksConfig });
 
   await component.locator('div[aria-label="Menu button"]').click();
   await expect(page.locator('.chakra-modal__content-container')).toHaveScreenshot();
@@ -61,25 +41,8 @@ test('base view', async({ mount, page }) => {
 test.describe('dark mode', () => {
   test.use({ colorScheme: 'dark' });
 
-  test('base view', async({ mount, page }) => {
-    await page.route(FEATURED_NETWORKS_URL, (route) => {
-      return route.fulfill({
-        body: FEATURED_NETWORKS_MOCK,
-      });
-    });
-    await page.route(LOGO_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-
-    const component = await mount(
-      <TestApp>
-        <Burger/>
-      </TestApp>,
-      { hooksConfig },
-    );
+  test('base view', async({ render, page }) => {
+    const component = await render(<Burger/>, { hooksConfig });
 
     await component.locator('div[aria-label="Menu button"]').click();
     await expect(page).toHaveScreenshot();
@@ -89,39 +52,23 @@ test.describe('dark mode', () => {
   });
 });
 
-test('submenu', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <Burger/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('submenu', async({ render, page }) => {
+  const component = await render(<Burger/>, { hooksConfig });
 
   await component.locator('div[aria-label="Menu button"]').click();
   await page.locator('div[aria-label="Blockchain link group"]').click();
   await expect(page).toHaveScreenshot();
 });
 
-test.describe('auth', () => {
-  const extendedTest = base.extend({
-    context: async({ browser }, use) => {
-      const context = await createContextWithStorage(browser, [
-        { name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
-      ]);
-      authFixture(context);
-      use(context);
-    },
-  });
+const authTest = test.extend<{ context: BrowserContext }>({
+  context: contextWithAuth,
+});
 
-  extendedTest.use({ viewport: { width: devices['iPhone 13 Pro'].viewport.width, height: 800 } });
+authTest.describe('auth', () => {
+  authTest.use({ viewport: { width: devices['iPhone 13 Pro'].viewport.width, height: 800 } });
 
-  extendedTest('base view', async({ mount, page }) => {
-    const component = await mount(
-      <TestApp>
-        <Burger/>
-      </TestApp>,
-      { hooksConfig },
-    );
+  authTest('base view', async({ render, page }) => {
+    const component = await render(<Burger/>, { hooksConfig });
 
     await component.locator('div[aria-label="Menu button"]').click();
     await expect(page).toHaveScreenshot();
diff --git a/ui/snippets/header/Burger.tsx b/ui/snippets/header/Burger.tsx
index 8d97220ec5..2a1d4e91a5 100644
--- a/ui/snippets/header/Burger.tsx
+++ b/ui/snippets/header/Burger.tsx
@@ -3,7 +3,8 @@ import React from 'react';
 
 import config from 'configs/app';
 import IconSvg from 'ui/shared/IconSvg';
-import NavigationMobile from 'ui/snippets/navigation/NavigationMobile';
+import NavigationMobile from 'ui/snippets/navigation/mobile/NavigationMobile';
+import TestnetBadge from 'ui/snippets/navigation/TestnetBadge';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import NetworkMenuButton from 'ui/snippets/networkMenu/NetworkMenuButton';
 import NetworkMenuContentMobile from 'ui/snippets/networkMenu/NetworkMenuContentMobile';
@@ -45,12 +46,12 @@ const Burger = ({ isMarketplaceAppPage }: Props) => {
         autoFocus={ false }
       >
         <DrawerOverlay/>
-        <DrawerContent maxWidth="260px">
+        <DrawerContent maxWidth="330px">
           <DrawerBody p={ 6 } display="flex" flexDirection="column">
-            { config.chain.isTestnet && <IconSvg name="testnet" h="14px" w="37px" color="red.400" alignSelf="flex-start"/> }
+            <TestnetBadge alignSelf="flex-start"/>
             <Flex alignItems="center" justifyContent="space-between">
               <NetworkLogo onClick={ handleNetworkLogoClick }/>
-              { config.UI.sidebar.featuredNetworks ? (
+              { config.UI.navigation.featuredNetworks ? (
                 <NetworkMenuButton
                   isMobile
                   isActive={ networkMenu.isOpen }
diff --git a/ui/snippets/header/HeaderAlert.tsx b/ui/snippets/header/HeaderAlert.tsx
index fe861d57d6..8fdb609ed1 100644
--- a/ui/snippets/header/HeaderAlert.tsx
+++ b/ui/snippets/header/HeaderAlert.tsx
@@ -6,7 +6,7 @@ import MaintenanceAlert from './alerts/MaintenanceAlert';
 
 const HeaderAlert = () => {
   return (
-    <Flex flexDir="column" rowGap={ 3 } mb={ 6 } _empty={{ display: 'none' }}>
+    <Flex flexDir="column" rowGap={ 3 } mb={ 3 } _empty={{ display: 'none' }}>
       <MaintenanceAlert/>
       <IndexingBlocksAlert/>
     </Flex>
diff --git a/ui/snippets/header/HeaderDesktop.pw.tsx b/ui/snippets/header/HeaderDesktop.pw.tsx
index cb56f9e4ee..4cd6f0eef7 100644
--- a/ui/snippets/header/HeaderDesktop.pw.tsx
+++ b/ui/snippets/header/HeaderDesktop.pw.tsx
@@ -1,16 +1,17 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import HeaderDesktop from './HeaderDesktop';
 
-test('default view +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <HeaderDesktop/>
-    </TestApp>,
-  );
+test.beforeEach(async({ mockEnvs }) => {
+  await mockEnvs([
+    ...ENVS_MAP.rewardsService,
+  ]);
+});
 
+test('default view +@dark-mode', async({ render }) => {
+  const component = await render(<HeaderDesktop/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/snippets/header/HeaderDesktop.tsx b/ui/snippets/header/HeaderDesktop.tsx
index 5da9566f03..e73f7ea6a8 100644
--- a/ui/snippets/header/HeaderDesktop.tsx
+++ b/ui/snippets/header/HeaderDesktop.tsx
@@ -2,19 +2,16 @@ import { HStack, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
-import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
-import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
+import RewardsButton from 'ui/rewards/RewardsButton';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
-import WalletMenuDesktop from 'ui/snippets/walletMenu/WalletMenuDesktop';
-
-import Burger from './Burger';
+import UserProfileDesktop from 'ui/snippets/user/profile/UserProfileDesktop';
+import UserWalletDesktop from 'ui/snippets/user/wallet/UserWalletDesktop';
 
 type Props = {
   renderSearchBar?: () => React.ReactNode;
-  isMarketplaceAppPage?: boolean;
-}
+};
 
-const HeaderDesktop = ({ renderSearchBar, isMarketplaceAppPage }: Props) => {
+const HeaderDesktop = ({ renderSearchBar }: Props) => {
 
   const searchBar = renderSearchBar ? renderSearchBar() : <SearchBar/>;
 
@@ -25,21 +22,20 @@ const HeaderDesktop = ({ renderSearchBar, isMarketplaceAppPage }: Props) => {
       width="100%"
       alignItems="center"
       justifyContent="center"
-      gap={ 12 }
+      gap={ 6 }
     >
-      { isMarketplaceAppPage && (
-        <Box display="flex" alignItems="center" gap={ 3 }>
-          <Burger isMarketplaceAppPage/>
-          <NetworkLogo isCollapsed/>
-        </Box>
-      ) }
       <Box width="100%">
         { searchBar }
       </Box>
-      <Box display="flex">
-        { config.features.account.isEnabled && <ProfileMenuDesktop/> }
-        { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop/> }
-      </Box>
+      { config.UI.navigation.layout === 'vertical' && (
+        <Box display="flex" gap={ 2 } flexShrink={ 0 }>
+          { config.features.rewards.isEnabled && <RewardsButton/> }
+          {
+            (config.features.account.isEnabled && <UserProfileDesktop/>) ||
+            (config.features.blockchainInteraction.isEnabled && <UserWalletDesktop/>)
+          }
+        </Box>
+      ) }
     </HStack>
   );
 };
diff --git a/ui/snippets/header/HeaderMobile.pw.tsx b/ui/snippets/header/HeaderMobile.pw.tsx
index 90c10640dc..4757dc1e58 100644
--- a/ui/snippets/header/HeaderMobile.pw.tsx
+++ b/ui/snippets/header/HeaderMobile.pw.tsx
@@ -1,18 +1,19 @@
-import { test, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect, devices } from 'playwright/lib';
 
 import HeaderMobile from './HeaderMobile';
 
 test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-test('default view +@dark-mode', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <HeaderMobile/>
-    </TestApp>,
-  );
+test.beforeEach(async({ mockEnvs }) => {
+  await mockEnvs([
+    ...ENVS_MAP.rewardsService,
+  ]);
+});
 
+test('default view +@dark-mode', async({ render, page }) => {
+  await render(<HeaderMobile/>);
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 150 } });
 });
diff --git a/ui/snippets/header/HeaderMobile.tsx b/ui/snippets/header/HeaderMobile.tsx
index 9901d8b9f9..cb7337028f 100644
--- a/ui/snippets/header/HeaderMobile.tsx
+++ b/ui/snippets/header/HeaderMobile.tsx
@@ -4,19 +4,20 @@ import { useInView } from 'react-intersection-observer';
 
 import config from 'configs/app';
 import { useScrollDirection } from 'lib/contexts/scrollDirection';
+import RewardsButton from 'ui/rewards/RewardsButton';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
-import ProfileMenuMobile from 'ui/snippets/profileMenu/ProfileMenuMobile';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
-import WalletMenuMobile from 'ui/snippets/walletMenu/WalletMenuMobile';
+import UserProfileMobile from 'ui/snippets/user/profile/UserProfileMobile';
+import UserWalletMobile from 'ui/snippets/user/wallet/UserWalletMobile';
 
 import Burger from './Burger';
 
 type Props = {
-  isHomePage?: boolean;
+  hideSearchBar?: boolean;
   renderSearchBar?: () => React.ReactNode;
-}
+};
 
-const HeaderMobile = ({ isHomePage, renderSearchBar }: Props) => {
+const HeaderMobile = ({ hideSearchBar, renderSearchBar }: Props) => {
   const bgColor = useColorModeValue('white', 'black');
   const scrollDirection = useScrollDirection();
   const { ref, inView } = useInView({ threshold: 1 });
@@ -36,24 +37,27 @@ const HeaderMobile = ({ isHomePage, renderSearchBar }: Props) => {
     >
       <Flex
         as="header"
-        paddingX={ 4 }
+        paddingX={ 3 }
         paddingY={ 2 }
         bgColor={ bgColor }
         width="100%"
         alignItems="center"
-        justifyContent="space-between"
         transitionProperty="box-shadow"
         transitionDuration="slow"
         boxShadow={ !inView && scrollDirection === 'down' ? 'md' : 'none' }
       >
         <Burger/>
-        <NetworkLogo/>
+        <NetworkLogo ml={ 2 } mr="auto"/>
         <Flex columnGap={ 2 }>
-          { config.features.account.isEnabled ? <ProfileMenuMobile/> : <Box boxSize={ 10 }/> }
-          { config.features.blockchainInteraction.isEnabled && <WalletMenuMobile/> }
+          { config.features.rewards.isEnabled && <RewardsButton/> }
+          {
+            (config.features.account.isEnabled && <UserProfileMobile/>) ||
+            (config.features.blockchainInteraction.isEnabled && <UserWalletMobile/>) ||
+            <Box boxSize={ 10 }/>
+          }
         </Flex>
       </Flex>
-      { !isHomePage && searchBar }
+      { !hideSearchBar && searchBar }
     </Box>
   );
 };
diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_auth-base-view-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_auth-base-view-1.png
index f31e4faf10..f59b67d3ea 100644
Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_auth-base-view-1.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_auth-base-view-1.png differ
diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_base-view-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_base-view-1.png
index e180358c91..318cf38ce9 100644
Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_base-view-1.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_base-view-1.png differ
diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_base-view-2.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_base-view-2.png
index 334d7e66df..07f2dc6a6a 100644
Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_base-view-2.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_base-view-2.png differ
diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_dark-mode-base-view-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_dark-mode-base-view-1.png
index ed951f37b4..98b29e4a8b 100644
Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_dark-mode-base-view-1.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_dark-mode-base-view-1.png differ
diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_dark-mode-base-view-2.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_dark-mode-base-view-2.png
index e63078ebdf..12bcfedf06 100644
Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_dark-mode-base-view-2.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_dark-mode-base-view-2.png differ
diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_submenu-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_submenu-1.png
index 6acf9c1014..9e454fc8e3 100644
Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_submenu-1.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_submenu-1.png differ
diff --git a/ui/snippets/header/__screenshots__/HeaderDesktop.pw.tsx_dark-color-mode_default-view-dark-mode-1.png b/ui/snippets/header/__screenshots__/HeaderDesktop.pw.tsx_dark-color-mode_default-view-dark-mode-1.png
index 20aa839385..9025dba18e 100644
Binary files a/ui/snippets/header/__screenshots__/HeaderDesktop.pw.tsx_dark-color-mode_default-view-dark-mode-1.png and b/ui/snippets/header/__screenshots__/HeaderDesktop.pw.tsx_dark-color-mode_default-view-dark-mode-1.png differ
diff --git a/ui/snippets/header/__screenshots__/HeaderDesktop.pw.tsx_default_default-view-dark-mode-1.png b/ui/snippets/header/__screenshots__/HeaderDesktop.pw.tsx_default_default-view-dark-mode-1.png
index d143733147..972f0c0557 100644
Binary files a/ui/snippets/header/__screenshots__/HeaderDesktop.pw.tsx_default_default-view-dark-mode-1.png and b/ui/snippets/header/__screenshots__/HeaderDesktop.pw.tsx_default_default-view-dark-mode-1.png differ
diff --git a/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_dark-color-mode_default-view-dark-mode-1.png b/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_dark-color-mode_default-view-dark-mode-1.png
index 01dba03498..b4b04f4c14 100644
Binary files a/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_dark-color-mode_default-view-dark-mode-1.png and b/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_dark-color-mode_default-view-dark-mode-1.png differ
diff --git a/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_default_default-view-dark-mode-1.png b/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_default_default-view-dark-mode-1.png
index 803a3f79ec..dfd5720efe 100644
Binary files a/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_default_default-view-dark-mode-1.png and b/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_default_default-view-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/LightningLabel.tsx b/ui/snippets/navigation/LightningLabel.tsx
new file mode 100644
index 0000000000..5fea052597
--- /dev/null
+++ b/ui/snippets/navigation/LightningLabel.tsx
@@ -0,0 +1,44 @@
+import { useColorModeValue, useBreakpointValue, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
+import IconSvg from 'ui/shared/IconSvg';
+
+export const LIGHTNING_LABEL_CLASS_NAME = 'lightning-label';
+
+interface Props {
+  className?: string;
+  iconColor?: string;
+  isCollapsed?: boolean;
+}
+
+const LightningLabel = ({ className, iconColor, isCollapsed }: Props) => {
+  const isLgScreen = useBreakpointValue({ base: false, lg: true, xl: false });
+  const themeBgColor = useColorModeValue('white', 'black');
+  const defaultTransitionProps = getDefaultTransitionProps({ transitionProperty: 'color' });
+
+  const isExpanded = isCollapsed === false;
+
+  const color = React.useMemo(() => {
+    if (isCollapsed || (!isExpanded && isLgScreen)) {
+      return (iconColor && iconColor !== 'transparent') ? iconColor : themeBgColor;
+    }
+    return 'transparent';
+  }, [ iconColor, themeBgColor, isCollapsed, isExpanded, isLgScreen ]);
+
+  return (
+    <IconSvg
+      className={ LIGHTNING_LABEL_CLASS_NAME + (className ? ` ${ className }` : '') }
+      name="lightning_navbar"
+      boxSize={ 4 }
+      ml={{ base: 1, lg: isExpanded ? 1 : 0, xl: isCollapsed ? 0 : 1 }}
+      position={{ lg: isExpanded ? 'relative' : 'absolute', xl: isCollapsed ? 'absolute' : 'relative' }}
+      top={{ lg: isExpanded ? '0' : '10px', xl: isCollapsed ? '10px' : '0' }}
+      right={{ lg: isExpanded ? '0' : '15px', xl: isCollapsed ? '15px' : '0' }}
+      color={ color }
+      { ...defaultTransitionProps }
+    />
+  );
+};
+
+export default chakra(LightningLabel);
diff --git a/ui/snippets/navigation/NavLink.tsx b/ui/snippets/navigation/NavLink.tsx
deleted file mode 100644
index 67dbbe1f6f..0000000000
--- a/ui/snippets/navigation/NavLink.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { Link, Text, HStack, Tooltip, Box, useBreakpointValue, chakra, shouldForwardProp } from '@chakra-ui/react';
-import NextLink from 'next/link';
-import React from 'react';
-
-import type { NavItem } from 'types/client/navigation-items';
-
-import { route } from 'nextjs-routes';
-
-import useIsMobile from 'lib/hooks/useIsMobile';
-import { isInternalItem } from 'lib/hooks/useNavItems';
-import IconSvg from 'ui/shared/IconSvg';
-
-import NavLinkIcon from './NavLinkIcon';
-import useColors from './useColors';
-import useNavLinkStyleProps from './useNavLinkStyleProps';
-
-type Props = {
-  item: NavItem;
-  isCollapsed?: boolean;
-  px?: string | number;
-  className?: string;
-  onClick?: () => void;
-}
-
-const NavLink = ({ item, isCollapsed, px, className, onClick }: Props) => {
-  const isMobile = useIsMobile();
-  const colors = useColors();
-
-  const isExpanded = isCollapsed === false;
-  const isInternalLink = isInternalItem(item);
-
-  const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive: isInternalLink && item.isActive });
-  const isXLScreen = useBreakpointValue({ base: false, xl: true });
-  const href = isInternalLink ? route(item.nextRoute) : item.url;
-
-  const content = (
-    <Link
-      href={ href }
-      target={ isInternalLink ? '_self' : '_blank' }
-      { ...styleProps.itemProps }
-      w={{ base: '100%', lg: isExpanded ? '100%' : '60px', xl: isCollapsed ? '60px' : '100%' }}
-      display="flex"
-      px={ px || { base: 3, lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 } }
-      aria-label={ `${ item.text } link` }
-      whiteSpace="nowrap"
-      onClick={ onClick }
-      _hover={{
-        '& *': {
-          color: 'link_hovered',
-        },
-      }}
-    >
-      <Tooltip
-        label={ item.text }
-        hasArrow={ false }
-        isDisabled={ isMobile || isCollapsed === false || (isCollapsed === undefined && isXLScreen) }
-        placement="right"
-        variant="nav"
-        gutter={ 20 }
-        color={ isInternalLink && item.isActive ? colors.text.active : colors.text.hover }
-      >
-        <HStack spacing={ 3 } overflow="hidden">
-          <NavLinkIcon item={ item }/>
-          <Text { ...styleProps.textProps }>
-            <span>{ item.text }</span>
-            { !isInternalLink && <IconSvg name="arrows/north-east" boxSize={ 4 } color="text_secondary" verticalAlign="middle"/> }
-          </Text>
-        </HStack>
-      </Tooltip>
-    </Link>
-  );
-
-  return (
-    <Box as="li" listStyleType="none" w="100%" className={ className }>
-      { isInternalLink ? (
-        <NextLink href={ item.nextRoute } passHref legacyBehavior>
-          { content }
-        </NextLink>
-      ) : content }
-    </Box>
-  );
-};
-
-const NavLinkChakra = chakra(NavLink, {
-  shouldForwardProp: (prop) => {
-    const isChakraProp = !shouldForwardProp(prop);
-
-    if (isChakraProp && prop !== 'px') {
-      return false;
-    }
-
-    return true;
-  },
-});
-
-export default React.memo(NavLinkChakra);
diff --git a/ui/snippets/navigation/NavLinkGroupDesktop.tsx b/ui/snippets/navigation/NavLinkGroupDesktop.tsx
deleted file mode 100644
index 00677576d9..0000000000
--- a/ui/snippets/navigation/NavLinkGroupDesktop.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import {
-  Text,
-  HStack,
-  Box,
-  Link,
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverBody,
-  VStack,
-} from '@chakra-ui/react';
-import React from 'react';
-
-import type { NavGroupItem } from 'types/client/navigation-items';
-
-import IconSvg from 'ui/shared/IconSvg';
-
-import NavLink from './NavLink';
-import NavLinkIcon from './NavLinkIcon';
-import useNavLinkStyleProps from './useNavLinkStyleProps';
-
-type Props = {
-  item: NavGroupItem;
-  isCollapsed?: boolean;
-}
-
-const NavLinkGroupDesktop = ({ item, isCollapsed }: Props) => {
-  const isExpanded = isCollapsed === false;
-
-  const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive: item.isActive });
-
-  return (
-    <Box as="li" listStyleType="none" w="100%">
-      <Popover
-        trigger="hover"
-        placement="right-start"
-        isLazy
-      >
-        <PopoverTrigger>
-          <Link
-            { ...styleProps.itemProps }
-            w={{ lg: isExpanded ? '180px' : '60px', xl: isCollapsed ? '60px' : '180px' }}
-            pl={{ lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 }}
-            pr={{ lg: isExpanded ? 0 : '15px', xl: isCollapsed ? '15px' : 0 }}
-            aria-label={ `${ item.text } link group` }
-            position="relative"
-          >
-            <HStack spacing={ 3 } overflow="hidden">
-              <NavLinkIcon item={ item }/>
-              <Text
-                { ...styleProps.textProps }
-              >
-                { item.text }
-              </Text>
-              <IconSvg
-                name="arrows/east-mini"
-                position="absolute"
-                right="7px"
-                transform="rotate(180deg)"
-                boxSize={ 6 }
-                opacity={{ lg: isExpanded ? '1' : '0', xl: isCollapsed ? '0' : '1' }}
-                transitionProperty="opacity"
-                transitionDuration="normal"
-                transitionTimingFunction="ease"
-              />
-            </HStack>
-          </Link>
-        </PopoverTrigger>
-        <PopoverContent width="252px" top={{ lg: isExpanded ? '-16px' : 0, xl: isCollapsed ? 0 : '-16px' }}>
-          <PopoverBody p={ 4 }>
-            <Text variant="secondary" fontSize="sm" mb={ 2 } display={{ lg: isExpanded ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}>
-              { item.text }
-            </Text>
-            <VStack spacing={ 1 } alignItems="start">
-              { item.subItems.map((subItem, index) => Array.isArray(subItem) ? (
-                <Box
-                  key={ index }
-                  w="100%"
-                  as="ul"
-                  _notLast={{
-                    mb: 2,
-                    pb: 2,
-                    borderBottomWidth: '1px',
-                    borderColor: 'divider',
-                  }}
-                >
-                  { subItem.map(subSubItem => <NavLink key={ subSubItem.text } item={ subSubItem } isCollapsed={ false }/>) }
-                </Box>
-              ) :
-                <NavLink key={ subItem.text } item={ subItem } isCollapsed={ false }/>,
-              ) }
-            </VStack>
-          </PopoverBody>
-        </PopoverContent>
-      </Popover>
-    </Box>
-  );
-};
-
-export default NavLinkGroupDesktop;
diff --git a/ui/snippets/navigation/NavLinkGroupMobile.tsx b/ui/snippets/navigation/NavLinkGroupMobile.tsx
deleted file mode 100644
index 5adf8dc020..0000000000
--- a/ui/snippets/navigation/NavLinkGroupMobile.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import {
-  Text,
-  HStack,
-  Flex,
-  Box,
-} from '@chakra-ui/react';
-import React from 'react';
-
-import type { NavGroupItem } from 'types/client/navigation-items';
-
-import IconSvg from 'ui/shared/IconSvg';
-
-import NavLinkIcon from './NavLinkIcon';
-import useNavLinkStyleProps from './useNavLinkStyleProps';
-
-type Props = {
-  item: NavGroupItem;
-  onClick: () => void;
-  isExpanded?: boolean;
-}
-
-const NavLinkGroup = ({ item, onClick, isExpanded }: Props) => {
-  const styleProps = useNavLinkStyleProps({ isActive: item.isActive, isExpanded });
-
-  return (
-    <Box as="li" listStyleType="none" w="100%" onClick={ onClick }>
-      <Box
-        { ...styleProps.itemProps }
-        w="100%"
-        px={ 3 }
-        aria-label={ `${ item.text } link group` }
-      >
-        <Flex justifyContent="space-between" width="100%" alignItems="center" pr={ 1 }>
-          <HStack spacing={ 3 } overflow="hidden">
-            <NavLinkIcon item={ item }/>
-            <Text
-              { ...styleProps.textProps }
-            >
-              { item.text }
-            </Text>
-          </HStack>
-          <IconSvg name="arrows/east-mini" transform="rotate(180deg)" boxSize={ 6 }/>
-        </Flex>
-      </Box>
-    </Box>
-  );
-};
-
-export default NavLinkGroup;
diff --git a/ui/snippets/navigation/NavLinkIcon.tsx b/ui/snippets/navigation/NavLinkIcon.tsx
index 6509d92584..21ba3c7c50 100644
--- a/ui/snippets/navigation/NavLinkIcon.tsx
+++ b/ui/snippets/navigation/NavLinkIcon.tsx
@@ -1,19 +1,25 @@
+import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import type { NavItem, NavGroupItem } from 'types/client/navigation-items';
+import type { NavItem, NavGroupItem } from 'types/client/navigation';
 
 import IconSvg from 'ui/shared/IconSvg';
 
-const NavLinkIcon = ({ item }: { item: NavItem | NavGroupItem}) => {
+interface Props {
+  className?: string;
+  item: NavItem | NavGroupItem;
+}
+
+const NavLinkIcon = ({ item, className }: Props) => {
   if ('icon' in item && item.icon) {
-    return <IconSvg name={ item.icon } boxSize="30px" flexShrink={ 0 }/>;
+    return <IconSvg className={ className } name={ item.icon } boxSize="30px" flexShrink={ 0 }/>;
   }
   if ('iconComponent' in item && item.iconComponent) {
     const IconComponent = item.iconComponent;
-    return <IconComponent size={ 30 }/>;
+    return <IconComponent className={ className } size={ 30 }/>;
   }
 
   return null;
 };
 
-export default NavLinkIcon;
+export default chakra(NavLinkIcon);
diff --git a/ui/snippets/navigation/NavigationDesktop.pw.tsx b/ui/snippets/navigation/NavigationDesktop.pw.tsx
deleted file mode 100644
index 9ba7520405..0000000000
--- a/ui/snippets/navigation/NavigationDesktop.pw.tsx
+++ /dev/null
@@ -1,250 +0,0 @@
-import { Box, Flex } from '@chakra-ui/react';
-import { test as base, expect } from '@playwright/experimental-ct-react';
-import type { Locator } from '@playwright/test';
-import React from 'react';
-
-import { buildExternalAssetFilePath } from 'configs/app/utils';
-import * as cookies from 'lib/cookies';
-import authFixture from 'playwright/fixtures/auth';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import createContextWithStorage from 'playwright/fixtures/createContextWithStorage';
-import TestApp from 'playwright/TestApp';
-import * as app from 'playwright/utils/app';
-import * as configs from 'playwright/utils/configs';
-
-import NavigationDesktop from './NavigationDesktop';
-
-const hooksConfig = {
-  router: {
-    route: '/blocks',
-    query: { id: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859' },
-    pathname: '/blocks',
-  },
-};
-
-const FEATURED_NETWORKS_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_FEATURED_NETWORKS', 'https://localhost:3000/config.json') || '';
-
-const test = base.extend({
-  context: contextWithEnvs([
-    { name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
-});
-
-test.describe('no auth', () => {
-  let component: Locator;
-
-  test.beforeEach(async({ mount }) => {
-    component = await mount(
-      <TestApp>
-        <Flex w="100%" minH="100vh" alignItems="stretch">
-          <NavigationDesktop/>
-          <Box bgColor="lightpink" w="100%"/>
-        </Flex>
-      </TestApp>,
-      { hooksConfig },
-    );
-  });
-
-  test('+@dark-mode', async() => {
-    await expect(component).toHaveScreenshot();
-  });
-
-  test.describe('xl screen', () => {
-    test.use({ viewport: configs.viewport.xl });
-
-    test('+@dark-mode', async() => {
-      await expect(component).toHaveScreenshot();
-    });
-  });
-});
-
-base.describe('auth', () => {
-  const test = base.extend({
-    context: async({ browser }, use) => {
-      const context = await createContextWithStorage(browser, [
-        { name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
-      ]);
-      authFixture(context);
-      use(context);
-    },
-  });
-
-  let component: Locator;
-
-  test.beforeEach(async({ mount }) => {
-    component = await mount(
-      <TestApp>
-        <Flex w="100%" minH="100vh" alignItems="stretch">
-          <NavigationDesktop/>
-          <Box bgColor="lightpink" w="100%"/>
-        </Flex>
-      </TestApp>,
-      { hooksConfig },
-    );
-  });
-
-  test('+@dark-mode', async() => {
-    await expect(component).toHaveScreenshot();
-  });
-
-  test.describe('xl screen', () => {
-    test.use({ viewport: configs.viewport.xl });
-
-    test('+@dark-mode', async() => {
-      await expect(component).toHaveScreenshot();
-    });
-  });
-});
-
-test.describe('with tooltips', () => {
-  test.use({ viewport: configs.viewport.xl });
-
-  test('', async({ mount, page }) => {
-    const component = await mount(
-      <TestApp>
-        <Flex w="100%" minH="100vh" alignItems="stretch">
-          <NavigationDesktop/>
-          <Box bgColor="lightpink" w="100%"/>
-        </Flex>
-      </TestApp>,
-      { hooksConfig },
-    );
-
-    await component.locator('header').hover();
-    await page.locator('div[aria-label="Expand/Collapse menu"]').click();
-    await page.locator('a[aria-label="Tokens link"]').hover();
-
-    await expect(component).toHaveScreenshot();
-  });
-});
-
-test.describe('with submenu', () => {
-  let component: Locator;
-
-  test.beforeEach(async({ mount, page }) => {
-    component = await mount(
-      <TestApp>
-        <Flex w="100%" minH="100vh" alignItems="stretch">
-          <NavigationDesktop/>
-          <Box bgColor="lightpink" w="100%"/>
-        </Flex>
-      </TestApp>,
-      { hooksConfig },
-    );
-    await page.locator('a[aria-label="Blockchain link group"]').hover();
-  });
-
-  test('', async() => {
-    await expect(component).toHaveScreenshot();
-  });
-
-  test.describe('xl screen', () => {
-    test.use({ viewport: configs.viewport.xl });
-
-    test('', async() => {
-      await expect(component).toHaveScreenshot();
-    });
-  });
-});
-
-base.describe('cookie set to false', () => {
-  const test = base.extend({
-    context: async({ browser }, use) => {
-      const context = await createContextWithStorage(browser, [
-        { name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
-      ]);
-      context.addCookies([ { name: cookies.NAMES.NAV_BAR_COLLAPSED, value: 'false', domain: app.domain, path: '/' } ]);
-      use(context);
-    },
-  });
-
-  let component: Locator;
-
-  test.beforeEach(async({ mount }) => {
-    component = await mount(
-      <TestApp>
-        <Flex w="100%" minH="100vh" alignItems="stretch">
-          <NavigationDesktop/>
-          <Box bgColor="lightpink" w="100%"/>
-        </Flex>
-      </TestApp>,
-      { hooksConfig },
-    );
-  });
-
-  test('', async() => {
-    const networkMenu = component.locator('button[aria-label="Network menu"]');
-    await expect(networkMenu).toBeVisible();
-  });
-
-  test.describe('xl screen', () => {
-    test.use({ viewport: configs.viewport.xl });
-
-    test('', async() => {
-      const networkMenu = component.locator('button[aria-label="Network menu"]');
-      await expect(networkMenu).toBeVisible();
-    });
-  });
-});
-
-base.describe('cookie set to true', () => {
-  const test = base.extend({
-    context: async({ browser }, use) => {
-      const context = await createContextWithStorage(browser, [
-        { name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
-      ]);
-      context.addCookies([ { name: cookies.NAMES.NAV_BAR_COLLAPSED, value: 'true', domain: 'localhost', path: '/' } ]);
-      use(context);
-    },
-  });
-
-  test('navbar is collapsed', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <Flex w="100%" minH="100vh" alignItems="stretch">
-          <NavigationDesktop/>
-          <Box bgColor="lightpink" w="100%"/>
-        </Flex>
-      </TestApp>,
-      { hooksConfig },
-    );
-
-    const networkMenu = component.locator('button[aria-label="Network menu"]');
-    expect(await networkMenu.isVisible()).toBe(false);
-  });
-});
-
-test('hover +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Flex w="100%" minH="100vh" alignItems="stretch">
-        <NavigationDesktop/>
-        <Box bgColor="lightpink" w="100%"/>
-      </Flex>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  await component.locator('header').hover();
-  await expect(component).toHaveScreenshot();
-});
-
-test.describe('hover xl screen', () => {
-  test.use({ viewport: configs.viewport.xl });
-
-  test('+@dark-mode', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <Flex w="100%" minH="100vh" alignItems="stretch">
-          <NavigationDesktop/>
-          <Box bgColor="lightpink" w="100%"/>
-        </Flex>
-      </TestApp>,
-      { hooksConfig },
-    );
-
-    await component.locator('header').hover();
-    await expect(component).toHaveScreenshot();
-  });
-});
diff --git a/ui/snippets/navigation/NavigationDesktop.tsx b/ui/snippets/navigation/NavigationDesktop.tsx
deleted file mode 100644
index 9ef2345c5b..0000000000
--- a/ui/snippets/navigation/NavigationDesktop.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-import { Flex, Box, VStack, useColorModeValue } from "@chakra-ui/react";
-import React from "react";
-
-import config from "configs/app";
-import { useAppContext } from "lib/contexts/app";
-import * as cookies from "lib/cookies";
-import useHasAccount from "lib/hooks/useHasAccount";
-import useNavItems, { isGroupItem } from "lib/hooks/useNavItems";
-import getDefaultTransitionProps from "theme/utils/getDefaultTransitionProps";
-import IconSvg from "ui/shared/IconSvg";
-import NetworkLogo from "ui/snippets/networkMenu/NetworkLogo";
-import NetworkMenu from "ui/snippets/networkMenu/NetworkMenu";
-
-import NavLink from "./NavLink";
-import NavLinkGroupDesktop from "./NavLinkGroupDesktop";
-
-const NavigationDesktop = () => {
-  const appProps = useAppContext();
-  const cookiesString = appProps.cookies;
-
-  const isNavBarCollapsedCookie = cookies.get(
-    cookies.NAMES.NAV_BAR_COLLAPSED,
-    cookiesString,
-  );
-  let isNavBarCollapsed;
-  if (isNavBarCollapsedCookie === "true") {
-    isNavBarCollapsed = true;
-  }
-  if (isNavBarCollapsedCookie === "false") {
-    isNavBarCollapsed = false;
-  }
-
-  const { mainNavItems, accountNavItems } = useNavItems();
-
-  const hasAccount = useHasAccount();
-
-  const [ isCollapsed, setCollapsedState ] = React.useState<boolean | undefined>(
-    isNavBarCollapsed,
-  );
-
-  const handleTogglerClick = React.useCallback(() => {
-    setCollapsedState((flag) => !flag);
-    cookies.set(
-      cookies.NAMES.NAV_BAR_COLLAPSED,
-      isCollapsed ? "false" : "true",
-    );
-  }, [ isCollapsed ]);
-
-  const chevronIconStyles = {
-    bgColor: useColorModeValue("white", "black"),
-    color: useColorModeValue("blackAlpha.400", "whiteAlpha.400"),
-    borderColor: "divider",
-  };
-
-  const isExpanded = isCollapsed === false;
-
-  return (
-    <Flex
-      display={{ base: "none", lg: "flex" }}
-      position="relative"
-      flexDirection="column"
-      alignItems="stretch"
-      borderRight="1px solid"
-      borderColor="divider"
-      px={{ lg: isExpanded ? 6 : 4, xl: isCollapsed ? 4 : 6 }}
-      py={ 12 }
-      width={{
-        lg: isExpanded ? "229px" : "92px",
-        xl: isCollapsed ? "92px" : "229px",
-      }}
-      { ...getDefaultTransitionProps({ transitionProperty: "width, padding" }) }
-      sx={{
-        "&:hover #expand-icon": {
-          display: "block",
-        },
-      }}
-    >
-      { config.chain.isTestnet && (
-        <IconSvg
-          name="testnet"
-          h="14px"
-          w="49px"
-          color="red.400"
-          position="absolute"
-          pl={ 3 }
-          top="34px"
-        />
-      ) }
-      { config.chain.isDevNet && (
-        <IconSvg
-          name="devnet"
-          h="14px"
-          w="57px"
-          color="red.400"
-          position="absolute"
-          pl={ 3 }
-          top="34px"
-        />
-      ) }
-      <Box
-        as="header"
-        display="flex"
-        justifyContent="flex-start"
-        alignItems="center"
-        flexDirection="row"
-        w="100%"
-        pl={{ lg: isExpanded ? 3 : "15px", xl: isCollapsed ? "15px" : 3 }}
-        pr={{ lg: isExpanded ? 0 : "15px", xl: isCollapsed ? "15px" : 0 }}
-        h={ 10 }
-        transitionProperty="padding"
-        transitionDuration="normal"
-        transitionTimingFunction="ease"
-      >
-        <NetworkLogo isCollapsed={ isCollapsed }/>
-        { Boolean(config.UI.sidebar.featuredNetworks) && (
-          <NetworkMenu isCollapsed={ isCollapsed }/>
-        ) }
-      </Box>
-      <Box as="nav" mt={ 8 } w="100%">
-        <VStack as="ul" spacing="1" alignItems="flex-start">
-          { mainNavItems.map((item) => {
-            if (isGroupItem(item)) {
-              return (
-                <NavLinkGroupDesktop
-                  key={ item.text }
-                  item={ item }
-                  isCollapsed={ isCollapsed }
-                />
-              );
-            } else {
-              return (
-                <NavLink
-                  key={ item.text }
-                  item={ item }
-                  isCollapsed={ isCollapsed }
-                />
-              );
-            }
-          }) }
-        </VStack>
-      </Box>
-      { hasAccount && (
-        <Box
-          as="nav"
-          borderTopWidth="1px"
-          borderColor="divider"
-          w="100%"
-          mt={ 6 }
-          pt={ 6 }
-        >
-          <VStack as="ul" spacing="1" alignItems="flex-start">
-            { accountNavItems.map((item) => (
-              <NavLink key={ item.text } item={ item } isCollapsed={ isCollapsed }/>
-            )) }
-          </VStack>
-        </Box>
-      ) }
-      <IconSvg
-        name="arrows/east-mini"
-        width={ 6 }
-        height={ 6 }
-        border="1px"
-        _hover={{ color: "link_hovered" }}
-        borderRadius="base"
-        { ...chevronIconStyles }
-        transform={{
-          lg: isExpanded ? "rotate(0)" : "rotate(180deg)",
-          xl: isCollapsed ? "rotate(180deg)" : "rotate(0)",
-        }}
-        { ...getDefaultTransitionProps({
-          transitionProperty: "transform, left",
-        }) }
-        transformOrigin="center"
-        position="absolute"
-        top="104px"
-        left={{
-          lg: isExpanded ? "216px" : "80px",
-          xl: isCollapsed ? "80px" : "216px",
-        }}
-        cursor="pointer"
-        onClick={ handleTogglerClick }
-        aria-label="Expand/Collapse menu"
-        id="expand-icon"
-        display="none"
-      />
-    </Flex>
-  );
-};
-
-export default NavigationDesktop;
diff --git a/ui/snippets/navigation/TestnetBadge.tsx b/ui/snippets/navigation/TestnetBadge.tsx
new file mode 100644
index 0000000000..3a3b5b25a2
--- /dev/null
+++ b/ui/snippets/navigation/TestnetBadge.tsx
@@ -0,0 +1,19 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props {
+  className?: string;
+}
+
+const TestnetBadge = ({ className }: Props) => {
+  if (!config.chain.isTestnet) {
+    return null;
+  }
+
+  return <IconSvg className={ className } name="testnet" h="14px" w="37px" color="red.400"/>;
+};
+
+export default React.memo(chakra(TestnetBadge));
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png
deleted file mode 100644
index 97fe896a5f..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-xl-screen-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-xl-screen-dark-mode-1.png
deleted file mode 100644
index 383bfd6258..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-xl-screen-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-dark-mode-1.png
deleted file mode 100644
index f2f27a55fa..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-xl-screen-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-xl-screen-dark-mode-1.png
deleted file mode 100644
index e20824bea5..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-xl-screen-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-dark-mode-1.png
deleted file mode 100644
index e6ad44c5a7..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-xl-screen-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-xl-screen-dark-mode-1.png
deleted file mode 100644
index 3695536739..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-xl-screen-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_auth-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_auth-dark-mode-1.png
deleted file mode 100644
index 5a7fa93bd3..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_auth-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_auth-xl-screen-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_auth-xl-screen-dark-mode-1.png
deleted file mode 100644
index 386efd593b..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_auth-xl-screen-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_hover-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_hover-dark-mode-1.png
deleted file mode 100644
index dda438430f..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_hover-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_hover-xl-screen-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_hover-xl-screen-dark-mode-1.png
deleted file mode 100644
index 9c50682159..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_hover-xl-screen-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-dark-mode-1.png
deleted file mode 100644
index e3e6a366c5..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-xl-screen-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-xl-screen-dark-mode-1.png
deleted file mode 100644
index e02942f1c8..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-xl-screen-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-1.png
deleted file mode 100644
index 19dc92c767..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-1.png
deleted file mode 100644
index e5a02b29ce..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_with-tooltips-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_with-tooltips-1.png
deleted file mode 100644
index 06673a6c6d..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_with-tooltips-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/horizontal/NavLink.tsx b/ui/snippets/navigation/horizontal/NavLink.tsx
new file mode 100644
index 0000000000..2f2dbf002c
--- /dev/null
+++ b/ui/snippets/navigation/horizontal/NavLink.tsx
@@ -0,0 +1,63 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { NavItem } from 'types/client/navigation';
+
+import { route } from 'nextjs-routes';
+
+import { isInternalItem } from 'lib/hooks/useNavItems';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+import LightningLabel from '../LightningLabel';
+import NavLinkIcon from '../NavLinkIcon';
+import useColors from '../useColors';
+import { checkRouteHighlight } from '../utils';
+
+interface Props {
+  className?: string;
+  item: NavItem;
+  noIcon?: boolean;
+}
+
+const NavLink = ({ className, item, noIcon }: Props) => {
+  const isInternalLink = isInternalItem(item);
+
+  const colors = useColors();
+  const color = 'isActive' in item && item.isActive ? colors.text.active : colors.text.default;
+  const bgColor = 'isActive' in item && item.isActive ? colors.bg.active : colors.bg.default;
+
+  const Link = isInternalLink ? LinkInternal : LinkExternal;
+  const href = isInternalLink ? route(item.nextRoute) : item.url;
+
+  const isHighlighted = checkRouteHighlight(item);
+
+  return (
+    <chakra.li
+      listStyleType="none"
+    >
+      <Link
+        className={ className }
+        href={ href }
+        display="flex"
+        alignItems="center"
+        color={ color }
+        bgColor={ bgColor }
+        _hover={{ textDecoration: 'none', color: colors.text.hover }}
+        w="224px"
+        px={ 2 }
+        py="9px"
+        fontSize="sm"
+        lineHeight={ 5 }
+        fontWeight={ 500 }
+        borderRadius="base"
+      >
+        { !noIcon && <NavLinkIcon item={ item } mr={ 3 }/> }
+        <chakra.span>{ item.text }</chakra.span>
+        { isHighlighted && <LightningLabel iconColor={ bgColor } position={{ lg: 'static' }} ml={{ lg: '2px' }} isCollapsed={ false }/> }
+      </Link>
+    </chakra.li>
+  );
+};
+
+export default React.memo(chakra(NavLink));
diff --git a/ui/snippets/navigation/horizontal/NavLinkGroup.tsx b/ui/snippets/navigation/horizontal/NavLinkGroup.tsx
new file mode 100644
index 0000000000..4ba5d77b4c
--- /dev/null
+++ b/ui/snippets/navigation/horizontal/NavLinkGroup.tsx
@@ -0,0 +1,91 @@
+import { HStack, PopoverBody, PopoverContent, PopoverTrigger, chakra, StackDivider } from '@chakra-ui/react';
+import React from 'react';
+
+import type { NavGroupItem } from 'types/client/navigation';
+
+import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
+import Popover from 'ui/shared/chakra/Popover';
+import IconSvg from 'ui/shared/IconSvg';
+
+import LightningLabel from '../LightningLabel';
+import useColors from '../useColors';
+import { checkRouteHighlight } from '../utils';
+import NavLink from './NavLink';
+interface Props {
+  item: NavGroupItem;
+}
+
+const NavLinkGroup = ({ item }: Props) => {
+  const colors = useColors();
+  const bgColor = item.isActive ? colors.bg.active : colors.bg.default;
+  const color = item.isActive ? colors.text.active : colors.text.default;
+
+  const isHighlighted = checkRouteHighlight(item.subItems);
+  const hasGroups = item.subItems.some((subItem) => Array.isArray(subItem));
+
+  return (
+    <Popover
+      trigger="hover"
+      placement="bottom"
+      isLazy
+      gutter={ 8 }
+    >
+      { ({ isOpen }) => (
+        <>
+          <PopoverTrigger>
+            <chakra.li
+              listStyleType="none"
+              display="flex"
+              alignItems="center"
+              px={ 2 }
+              py={ 1.5 }
+              fontSize="sm"
+              lineHeight={ 5 }
+              fontWeight={ 500 }
+              cursor="pointer"
+              color={ isOpen ? colors.text.hover : color }
+              _hover={{ color: colors.text.hover }}
+              bgColor={ bgColor }
+              borderRadius="base"
+              { ...getDefaultTransitionProps() }
+            >
+              { item.text }
+              { isHighlighted && <LightningLabel iconColor={ bgColor } position={{ lg: 'static' }} ml={{ lg: '2px' }}/> }
+              <IconSvg name="arrows/east-mini" boxSize={ 5 } transform="rotate(-90deg)" ml={ 1 }/>
+            </chakra.li>
+          </PopoverTrigger>
+          <PopoverContent w="fit-content">
+            <PopoverBody p={ 4 }>
+              { hasGroups ? (
+                <HStack divider={ <StackDivider borderColor="divider"/> } alignItems="flex-start">
+                  { item.subItems.map((subItem, index) => {
+                    if (!Array.isArray(subItem)) {
+                      return <NavLink key={ subItem.text } item={ subItem }/>;
+                    }
+
+                    return (
+                      <chakra.ul key={ index } display="flex" flexDir="column" rowGap={ 1 }>
+                        { subItem.map((navItem) => <NavLink key={ navItem.text } item={ navItem }/>) }
+                      </chakra.ul>
+                    );
+                  }) }
+                </HStack>
+              ) : (
+                <chakra.ul display="flex" flexDir="column" rowGap={ 1 }>
+                  { item.subItems.map((subItem) => {
+                    if (Array.isArray(subItem)) {
+                      return null;
+                    }
+                    return <NavLink key={ subItem.text } item={ subItem }/>;
+                  }) }
+                </chakra.ul>
+              ) }
+            </PopoverBody>
+          </PopoverContent>
+        </>
+      ) }
+    </Popover>
+  );
+};
+
+export default React.memo(NavLinkGroup);
diff --git a/ui/snippets/navigation/horizontal/NavigationDesktop.pw.tsx b/ui/snippets/navigation/horizontal/NavigationDesktop.pw.tsx
new file mode 100644
index 0000000000..3b6e47c1bc
--- /dev/null
+++ b/ui/snippets/navigation/horizontal/NavigationDesktop.pw.tsx
@@ -0,0 +1,65 @@
+import type { BrowserContext } from '@playwright/test';
+import React from 'react';
+
+import * as rewardsBalanceMock from 'mocks/rewards/balance';
+import * as dailyRewardMock from 'mocks/rewards/dailyReward';
+import * as profileMock from 'mocks/user/profile';
+import { contextWithAuth } from 'playwright/fixtures/auth';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { contextWithRewards } from 'playwright/fixtures/rewards';
+import { test, expect } from 'playwright/lib';
+
+import NavigationDesktop from './NavigationDesktop';
+
+const testWithAuth = test.extend<{ context: BrowserContext }>({
+  context: contextWithAuth,
+}).extend<{ context: BrowserContext }>({
+  context: contextWithRewards,
+});
+
+testWithAuth('base view +@dark-mode', async({ render, mockApiResponse, mockEnvs, page }) => {
+  const hooksConfig = {
+    router: {
+      route: '/blocks',
+      pathname: '/blocks',
+    },
+  };
+
+  await mockApiResponse('user_info', profileMock.withEmailAndWallet);
+  await mockApiResponse('rewards_user_balances', rewardsBalanceMock.base);
+  await mockApiResponse('rewards_user_daily_check', dailyRewardMock.base);
+  await mockEnvs([
+    ...ENVS_MAP.userOps,
+    ...ENVS_MAP.nameService,
+    ...ENVS_MAP.rewardsService,
+    [ 'NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES', '["/blocks","/apps"]' ],
+  ]);
+
+  const component = await render(<NavigationDesktop/>, { hooksConfig });
+  await component.getByText('Blockchain').hover();
+  await expect(page.getByText('Blocks')).toBeVisible();
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 450 } });
+});
+
+test('with groped items', async({ render, mockEnvs, page }) => {
+  const hooksConfig = {
+    router: {
+      route: '/apps',
+      pathname: '/apps',
+    },
+  };
+
+  await mockEnvs([
+    ...ENVS_MAP.optimisticRollup,
+    ...ENVS_MAP.userOps,
+    ...ENVS_MAP.nameService,
+    ...ENVS_MAP.navigationHighlightedRoutes,
+    ...ENVS_MAP.noWalletClient,
+    ...ENVS_MAP.noAccount,
+  ]);
+
+  const component = await render(<NavigationDesktop/>, { hooksConfig });
+  await component.getByText('Blockchain').hover();
+  await expect(page.getByText('Blocks')).toBeVisible();
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 450 } });
+});
diff --git a/ui/snippets/navigation/horizontal/NavigationDesktop.tsx b/ui/snippets/navigation/horizontal/NavigationDesktop.tsx
new file mode 100644
index 0000000000..d5165fc740
--- /dev/null
+++ b/ui/snippets/navigation/horizontal/NavigationDesktop.tsx
@@ -0,0 +1,54 @@
+import { Box, chakra, Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
+import RewardsButton from 'ui/rewards/RewardsButton';
+import { CONTENT_MAX_WIDTH } from 'ui/shared/layout/utils';
+import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
+import UserProfileDesktop from 'ui/snippets/user/profile/UserProfileDesktop';
+import UserWalletDesktop from 'ui/snippets/user/wallet/UserWalletDesktop';
+
+import TestnetBadge from '../TestnetBadge';
+import NavLink from './NavLink';
+import NavLinkGroup from './NavLinkGroup';
+
+const NavigationDesktop = () => {
+  const { mainNavItems } = useNavItems();
+
+  return (
+    <Box borderColor="divider" borderBottomWidth="1px">
+      <Flex
+        display={{ base: 'none', lg: 'flex' }}
+        alignItems="center"
+        px={ 6 }
+        py={ 2 }
+        maxW={ `${ CONTENT_MAX_WIDTH }px` }
+        m="0 auto"
+      >
+        <NetworkLogo isCollapsed={ false } w={{ lg: 'auto' }} maxW="120px"/>
+        <TestnetBadge ml={ 3 }/>
+        <chakra.nav ml="auto" mr={ config.features.account.isEnabled || config.features.blockchainInteraction.isEnabled ? 8 : 0 }>
+          <Flex as="ul" columnGap={ 3 }>
+            { mainNavItems.map((item) => {
+              if (isGroupItem(item)) {
+                return <NavLinkGroup key={ item.text } item={ item }/>;
+              } else {
+                return <NavLink key={ item.text } item={ item } noIcon py={ 1.5 } w="fit-content"/>;
+              }
+            }) }
+          </Flex>
+        </chakra.nav>
+        <Flex gap={ 2 }>
+          { config.features.rewards.isEnabled && <RewardsButton size="sm"/> }
+          {
+            (config.features.account.isEnabled && <UserProfileDesktop buttonSize="sm"/>) ||
+            (config.features.blockchainInteraction.isEnabled && <UserWalletDesktop buttonSize="sm"/>)
+          }
+        </Flex>
+      </Flex>
+    </Box>
+  );
+};
+
+export default React.memo(NavigationDesktop);
diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..f587b69f72
Binary files /dev/null and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_base-view-dark-mode-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..589e35b842
Binary files /dev/null and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-groped-items-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-groped-items-1.png
new file mode 100644
index 0000000000..09622d27ce
Binary files /dev/null and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-groped-items-1.png differ
diff --git a/ui/snippets/navigation/mobile/NavLinkGroup.tsx b/ui/snippets/navigation/mobile/NavLinkGroup.tsx
new file mode 100644
index 0000000000..3dda224fdb
--- /dev/null
+++ b/ui/snippets/navigation/mobile/NavLinkGroup.tsx
@@ -0,0 +1,55 @@
+import {
+  Text,
+  HStack,
+  Flex,
+  Box,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import type { NavGroupItem } from 'types/client/navigation';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+import LightningLabel from '../LightningLabel';
+import NavLinkIcon from '../NavLinkIcon';
+import useNavLinkStyleProps from '../useNavLinkStyleProps';
+import { checkRouteHighlight } from '../utils';
+
+type Props = {
+  item: NavGroupItem;
+  onClick: () => void;
+  isExpanded?: boolean;
+};
+
+const NavLinkGroup = ({ item, onClick, isExpanded }: Props) => {
+  const styleProps = useNavLinkStyleProps({ isActive: item.isActive, isExpanded });
+
+  const isHighlighted = checkRouteHighlight(item.subItems);
+
+  return (
+    <Box as="li" listStyleType="none" w="100%" onClick={ onClick }>
+      <Box
+        { ...styleProps.itemProps }
+        w="100%"
+        px={ 2 }
+        aria-label={ `${ item.text } link group` }
+      >
+        <Flex justifyContent="space-between" width="100%" alignItems="center" pr={ 1 }>
+          <HStack spacing={ 0 } overflow="hidden">
+            <NavLinkIcon item={ item }/>
+            <Text
+              { ...styleProps.textProps }
+              ml={ 3 }
+            >
+              { item.text }
+            </Text>
+            { isHighlighted && (<LightningLabel iconColor={ styleProps.itemProps.bgColor }/>) }
+          </HStack>
+          <IconSvg name="arrows/east-mini" transform="rotate(180deg)" boxSize={ 6 }/>
+        </Flex>
+      </Box>
+    </Box>
+  );
+};
+
+export default NavLinkGroup;
diff --git a/ui/snippets/navigation/NavigationMobile.tsx b/ui/snippets/navigation/mobile/NavigationMobile.tsx
similarity index 77%
rename from ui/snippets/navigation/NavigationMobile.tsx
rename to ui/snippets/navigation/mobile/NavigationMobile.tsx
index bfa06737b2..3069784f53 100644
--- a/ui/snippets/navigation/NavigationMobile.tsx
+++ b/ui/snippets/navigation/mobile/NavigationMobile.tsx
@@ -2,12 +2,15 @@ import { Box, Flex, Text, VStack, useColorModeValue } from '@chakra-ui/react';
 import { animate, motion, useMotionValue } from 'framer-motion';
 import React, { useCallback } from 'react';
 
-import useHasAccount from 'lib/hooks/useHasAccount';
 import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
 import IconSvg from 'ui/shared/IconSvg';
-import NavLink from 'ui/snippets/navigation/NavLink';
+import useIsAuth from 'ui/snippets/auth/useIsAuth';
 
-import NavLinkGroupMobile from './NavLinkGroupMobile';
+import NavLink from '../vertical/NavLink';
+import NavLinkRewards from '../vertical/NavLinkRewards';
+import NavLinkGroup from './NavLinkGroup';
+
+const DRAWER_WIDTH = 330;
 
 interface Props {
   onNavLinkClick?: () => void;
@@ -20,20 +23,20 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
   const [ openedGroupIndex, setOpenedGroupIndex ] = React.useState(-1);
 
   const mainX = useMotionValue(0);
-  const subX = useMotionValue(250);
+  const subX = useMotionValue(DRAWER_WIDTH);
 
   const onGroupItemOpen = (index: number) => () => {
     setOpenedGroupIndex(index);
-    animate(mainX, -250, { ease: 'easeInOut' });
+    animate(mainX, -DRAWER_WIDTH, { ease: 'easeInOut' });
     animate(subX, 0, { ease: 'easeInOut' });
   };
 
   const onGroupItemClose = useCallback(() => {
     animate(mainX, 0, { ease: 'easeInOut' });
-    animate(subX, 250, { ease: 'easeInOut', onComplete: () => setOpenedGroupIndex(-1) });
+    animate(subX, DRAWER_WIDTH, { ease: 'easeInOut', onComplete: () => setOpenedGroupIndex(-1) });
   }, [ mainX, subX ]);
 
-  const hasAccount = useHasAccount();
+  const isAuth = useIsAuth();
 
   const iconColor = useColorModeValue('blue.600', 'blue.300');
 
@@ -64,22 +67,23 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
           >
             { mainNavItems.map((item, index) => {
               if (isGroupItem(item)) {
-                return <NavLinkGroupMobile key={ item.text } item={ item } onClick={ onGroupItemOpen(index) } isExpanded={ isMarketplaceAppPage }/>;
+                return <NavLinkGroup key={ item.text } item={ item } onClick={ onGroupItemOpen(index) } isExpanded={ isMarketplaceAppPage }/>;
               } else {
                 return <NavLink key={ item.text } item={ item } onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>;
               }
             }) }
           </VStack>
         </Box>
-        { hasAccount && (
+        { isAuth && (
           <Box
             as="nav"
-            mt={ 6 }
-            pt={ 6 }
+            mt={ 3 }
+            pt={ 3 }
             borderTopWidth="1px"
             borderColor="divider"
           >
             <VStack as="ul" spacing="1" alignItems="flex-start">
+              <NavLinkRewards onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>
               { accountNavItems.map((item) => <NavLink key={ item.text } item={ item } onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>) }
             </VStack>
           </Box>
@@ -95,7 +99,7 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
           style={{ x: subX }}
           key="sub"
         >
-          <Flex alignItems="center" px={ 3 } py={ 2.5 } w="100%" h="50px" onClick={ onGroupItemClose } mb={ 1 }>
+          <Flex alignItems="center" px={ 2 } py={ 2.5 } w="100%" h="50px" onClick={ onGroupItemClose } mb={ 1 }>
             <IconSvg name="arrows/east-mini" boxSize={ 6 } mr={ 2 } color={ iconColor }/>
             <Text variant="secondary" fontSize="sm">{ mainNavItems[openedGroupIndex].text }</Text>
           </Flex>
@@ -118,8 +122,11 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
                 >
                   { item.map(subItem => <NavLink key={ subItem.text } item={ subItem } onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>) }
                 </Box>
-              ) :
-                <NavLink key={ item.text } item={ item } mb={ 1 } onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>,
+              ) : (
+                <Box key={ item.text } mb={ 1 }>
+                  <NavLink item={ item } onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>
+                </Box>
+              ),
             ) }
           </Box>
         </Box>
diff --git a/ui/snippets/navigation/useNavLinkStyleProps.tsx b/ui/snippets/navigation/useNavLinkStyleProps.tsx
index 786e5bcc78..5473681f92 100644
--- a/ui/snippets/navigation/useNavLinkStyleProps.tsx
+++ b/ui/snippets/navigation/useNavLinkStyleProps.tsx
@@ -6,15 +6,14 @@ type Props = {
   isExpanded?: boolean;
   isCollapsed?: boolean;
   isActive?: boolean;
-  px?: string | number;
-}
+};
 
 export default function useNavLinkProps({ isExpanded, isCollapsed, isActive }: Props) {
   const colors = useColors();
 
   return {
     itemProps: {
-      py: 2.5,
+      py: '9px',
       display: 'flex',
       color: isActive ? colors.text.active : colors.text.default,
       bgColor: isActive ? colors.bg.active : colors.bg.default,
diff --git a/ui/snippets/navigation/utils.ts b/ui/snippets/navigation/utils.ts
new file mode 100644
index 0000000000..00c9e69ef8
--- /dev/null
+++ b/ui/snippets/navigation/utils.ts
@@ -0,0 +1,11 @@
+import type { NavItem } from 'types/client/navigation';
+
+import config from 'configs/app';
+import { isInternalItem } from 'lib/hooks/useNavItems';
+
+export function checkRouteHighlight(item: NavItem | Array<NavItem> | Array<Array<NavItem>>): boolean {
+  if (Array.isArray(item)) {
+    return item.some((subItem) => checkRouteHighlight(subItem));
+  }
+  return isInternalItem(item) && (config.UI.navigation.highlightedRoutes.includes(item.nextRoute.pathname));
+}
diff --git a/ui/snippets/navigation/vertical/NavLink.tsx b/ui/snippets/navigation/vertical/NavLink.tsx
new file mode 100644
index 0000000000..4cbbdf6ad2
--- /dev/null
+++ b/ui/snippets/navigation/vertical/NavLink.tsx
@@ -0,0 +1,93 @@
+import { Link, Text, HStack, Tooltip, Box, useBreakpointValue } from '@chakra-ui/react';
+import NextLink from 'next/link';
+import React from 'react';
+
+import type { NavItem } from 'types/client/navigation';
+
+import { route } from 'nextjs-routes';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import { isInternalItem } from 'lib/hooks/useNavItems';
+import IconSvg from 'ui/shared/IconSvg';
+
+import LightningLabel, { LIGHTNING_LABEL_CLASS_NAME } from '../LightningLabel';
+import NavLinkIcon from '../NavLinkIcon';
+import useColors from '../useColors';
+import useNavLinkStyleProps from '../useNavLinkStyleProps';
+import { checkRouteHighlight } from '../utils';
+
+type Props = {
+  item: NavItem;
+  onClick?: (e: React.MouseEvent) => void;
+  isCollapsed?: boolean;
+  isDisabled?: boolean;
+};
+
+const NavLink = ({ item, onClick, isCollapsed, isDisabled }: Props) => {
+  const isMobile = useIsMobile();
+  const colors = useColors();
+
+  const isInternalLink = isInternalItem(item);
+  const href = isInternalLink ? route(item.nextRoute) : item.url;
+
+  const isExpanded = isCollapsed === false;
+
+  const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive: isInternalLink && item.isActive });
+  const isXLScreen = useBreakpointValue({ base: false, xl: true });
+
+  const isHighlighted = checkRouteHighlight(item);
+
+  const content = (
+    <Link
+      href={ href }
+      target={ isInternalLink ? '_self' : '_blank' }
+      { ...styleProps.itemProps }
+      w={{ base: '100%', lg: isExpanded ? '100%' : '60px', xl: isCollapsed ? '60px' : '100%' }}
+      display="flex"
+      position="relative"
+      px={{ base: 2, lg: isExpanded ? 2 : '15px', xl: isCollapsed ? '15px' : 2 }}
+      aria-label={ `${ item.text } link` }
+      whiteSpace="nowrap"
+      onClick={ onClick }
+      _hover={{
+        [`& *:not(.${ LIGHTNING_LABEL_CLASS_NAME }, .${ LIGHTNING_LABEL_CLASS_NAME } *)`]: {
+          color: isDisabled ? 'inherit' : 'link_hovered',
+        },
+      }}
+    >
+      <Tooltip
+        label={ item.text }
+        hasArrow={ false }
+        isDisabled={ isMobile || isCollapsed === false || (isCollapsed === undefined && isXLScreen) }
+        placement="right"
+        variant="nav"
+        gutter={ 20 }
+        color={ isInternalLink && item.isActive ? colors.text.active : colors.text.hover }
+        margin={ 0 }
+      >
+        <HStack spacing={ 0 } overflow="hidden">
+          <NavLinkIcon item={ item }/>
+          <Text { ...styleProps.textProps } as="span" ml={ 3 }>
+            <span>{ item.text }</span>
+            { !isInternalLink && <IconSvg name="link_external" boxSize={ 3 } color="icon_link_external" verticalAlign="middle"/> }
+          </Text>
+          { isHighlighted && (
+            <LightningLabel iconColor={ styleProps.itemProps.bgColor } isCollapsed={ isCollapsed }/>
+          ) }
+        </HStack>
+      </Tooltip>
+    </Link>
+  );
+
+  return (
+    <Box as="li" listStyleType="none" w="100%">
+      { isInternalLink ? (
+        <NextLink href={ item.nextRoute } passHref legacyBehavior>
+          { content }
+        </NextLink>
+      ) : content }
+    </Box>
+  );
+};
+
+export default React.memo(NavLink);
diff --git a/ui/snippets/navigation/vertical/NavLinkGroup.tsx b/ui/snippets/navigation/vertical/NavLinkGroup.tsx
new file mode 100644
index 0000000000..bf572b5412
--- /dev/null
+++ b/ui/snippets/navigation/vertical/NavLinkGroup.tsx
@@ -0,0 +1,109 @@
+import {
+  Text,
+  HStack,
+  Box,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  VStack,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import type { NavGroupItem } from 'types/client/navigation';
+
+import Popover from 'ui/shared/chakra/Popover';
+import IconSvg from 'ui/shared/IconSvg';
+
+import LightningLabel from '../LightningLabel';
+import NavLinkIcon from '../NavLinkIcon';
+import useNavLinkStyleProps from '../useNavLinkStyleProps';
+import { checkRouteHighlight } from '../utils';
+import NavLink from './NavLink';
+
+type Props = {
+  item: NavGroupItem;
+  isCollapsed?: boolean;
+};
+
+const NavLinkGroup = ({ item, isCollapsed }: Props) => {
+  const isExpanded = isCollapsed === false;
+
+  const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive: item.isActive });
+
+  const isHighlighted = checkRouteHighlight(item.subItems);
+
+  return (
+    <Box as="li" listStyleType="none" w="100%">
+      <Popover
+        trigger="hover"
+        placement="right-start"
+        // should not be lazy to help google indexing pages
+        isLazy={ false }
+        gutter={ 8 }
+      >
+        <PopoverTrigger>
+          <Box
+            { ...styleProps.itemProps }
+            w={{ lg: isExpanded ? '180px' : '60px', xl: isCollapsed ? '60px' : '180px' }}
+            pl={{ lg: isExpanded ? 2 : '15px', xl: isCollapsed ? '15px' : 2 }}
+            pr={{ lg: isExpanded ? 0 : '15px', xl: isCollapsed ? '15px' : 0 }}
+            aria-label={ `${ item.text } link group` }
+            position="relative"
+          >
+            <HStack spacing={ 0 } overflow="hidden">
+              <NavLinkIcon item={ item }/>
+              <Text
+                { ...styleProps.textProps }
+                ml={ 3 }
+              >
+                { item.text }
+              </Text>
+              { isHighlighted && (
+                <LightningLabel iconColor={ styleProps.itemProps.bgColor } isCollapsed={ isCollapsed }/>
+              ) }
+              <IconSvg
+                name="arrows/east-mini"
+                position="absolute"
+                right="7px"
+                transform="rotate(180deg)"
+                boxSize={ 6 }
+                opacity={{ lg: isExpanded ? '1' : '0', xl: isCollapsed ? '0' : '1' }}
+                transitionProperty="opacity"
+                transitionDuration="normal"
+                transitionTimingFunction="ease"
+              />
+            </HStack>
+          </Box>
+        </PopoverTrigger>
+        <PopoverContent width="252px" top={{ lg: isExpanded ? '-16px' : 0, xl: isCollapsed ? 0 : '-16px' }}>
+          <PopoverBody p={ 4 }>
+            <Text variant="secondary" fontSize="sm" mb={ 1 } display={{ lg: isExpanded ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}>
+              { item.text }
+            </Text>
+            <VStack spacing={ 1 } alignItems="start" as="ul">
+              { item.subItems.map((subItem, index) => Array.isArray(subItem) ? (
+                <Box
+                  key={ index }
+                  w="100%"
+                  as="ul"
+                  _notLast={{
+                    mb: 2,
+                    pb: 2,
+                    borderBottomWidth: '1px',
+                    borderColor: 'divider',
+                  }}
+                >
+                  { subItem.map(subSubItem => <NavLink key={ subSubItem.text } item={ subSubItem } isCollapsed={ false }/>) }
+                </Box>
+              ) :
+                <NavLink key={ subItem.text } item={ subItem } isCollapsed={ false }/>,
+              ) }
+            </VStack>
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
+    </Box>
+  );
+};
+
+export default NavLinkGroup;
diff --git a/ui/snippets/navigation/vertical/NavLinkRewards.tsx b/ui/snippets/navigation/vertical/NavLinkRewards.tsx
new file mode 100644
index 0000000000..eb92ba5a42
--- /dev/null
+++ b/ui/snippets/navigation/vertical/NavLinkRewards.tsx
@@ -0,0 +1,50 @@
+import { useRouter } from 'next/router';
+import React, { useCallback } from 'react';
+
+import type { Route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import { useRewardsContext } from 'lib/contexts/rewards';
+
+import NavLink from './NavLink';
+
+type Props = {
+  isCollapsed?: boolean;
+  onClick?: () => void;
+};
+
+const NavLinkRewards = ({ isCollapsed, onClick }: Props) => {
+  const router = useRouter();
+  const { openLoginModal, dailyRewardQuery, apiToken, isInitialized } = useRewardsContext();
+
+  const pathname = '/account/rewards';
+  const nextRoute = { pathname } as Route;
+
+  const handleClick = useCallback((e: React.MouseEvent) => {
+    if (isInitialized && !apiToken) {
+      e.preventDefault();
+      openLoginModal();
+    }
+    onClick?.();
+  }, [ onClick, isInitialized, apiToken, openLoginModal ]);
+
+  if (!config.features.rewards.isEnabled) {
+    return null;
+  }
+
+  return (
+    <NavLink
+      item={{
+        text: 'Merits',
+        icon: dailyRewardQuery.data?.available ? 'merits_with_dot' : 'merits',
+        nextRoute: nextRoute,
+        isActive: router.pathname === pathname,
+      }}
+      onClick={ handleClick }
+      isCollapsed={ isCollapsed }
+      isDisabled={ !isInitialized }
+    />
+  );
+};
+
+export default React.memo(NavLinkRewards);
diff --git a/ui/snippets/navigation/vertical/NavigationDesktop.pw.tsx b/ui/snippets/navigation/vertical/NavigationDesktop.pw.tsx
new file mode 100644
index 0000000000..d0d6bec637
--- /dev/null
+++ b/ui/snippets/navigation/vertical/NavigationDesktop.pw.tsx
@@ -0,0 +1,254 @@
+import { Box, Flex } from '@chakra-ui/react';
+import type { BrowserContext, Locator } from '@playwright/test';
+import React from 'react';
+
+import config from 'configs/app';
+import * as cookies from 'lib/cookies';
+import { FEATURED_NETWORKS } from 'mocks/config/network';
+import { contextWithAuth } from 'playwright/fixtures/auth';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
+
+import NavigationDesktop from './NavigationDesktop';
+
+const hooksConfig = {
+  router: {
+    route: '/blocks',
+    query: { id: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859' },
+    pathname: '/blocks',
+  },
+};
+
+const FEATURED_NETWORKS_URL = 'https://localhost:3000/featured-networks.json';
+
+test.beforeEach(async({ mockEnvs, mockConfigResponse }) => {
+  await mockEnvs([
+    ...ENVS_MAP.rewardsService,
+    [ 'NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL ],
+  ]);
+  await mockConfigResponse('NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL, FEATURED_NETWORKS);
+});
+
+test.describe('no auth', () => {
+  let component: Locator;
+
+  test.beforeEach(async({ render }) => {
+    component = await render(
+      <Flex w="100%" minH="100vh" alignItems="stretch">
+        <NavigationDesktop/>
+        <Box bgColor="lightpink" w="100%"/>
+      </Flex>,
+      { hooksConfig },
+    );
+  });
+
+  test('+@dark-mode', async() => {
+    await expect(component).toHaveScreenshot();
+  });
+
+  test.describe('xl screen', () => {
+    test.use({ viewport: pwConfig.viewport.xl });
+
+    test('+@dark-mode', async() => {
+      await expect(component).toHaveScreenshot();
+    });
+  });
+});
+
+const authTest = test.extend<{ context: BrowserContext }>({
+  context: contextWithAuth,
+});
+
+authTest.describe('auth', () => {
+  let component: Locator;
+
+  authTest.beforeEach(async({ render }) => {
+    component = await render(
+      <Flex w="100%" minH="100vh" alignItems="stretch">
+        <NavigationDesktop/>
+        <Box bgColor="lightpink" w="100%"/>
+      </Flex>,
+      { hooksConfig },
+    );
+  });
+
+  authTest('+@dark-mode', async() => {
+    await expect(component).toHaveScreenshot();
+  });
+
+  authTest.describe('xl screen', () => {
+    authTest.use({ viewport: pwConfig.viewport.xl });
+
+    authTest('+@dark-mode', async() => {
+      await expect(component).toHaveScreenshot();
+    });
+  });
+});
+
+test.describe('with tooltips', () => {
+  test.use({ viewport: pwConfig.viewport.xl });
+
+  test('base view', async({ render, page }) => {
+    const component = await render(
+      <Flex w="100%" minH="100vh" alignItems="stretch">
+        <NavigationDesktop/>
+        <Box bgColor="lightpink" w="100%"/>
+      </Flex>,
+      { hooksConfig },
+    );
+
+    await component.locator('header').hover();
+    await page.locator('div[aria-label="Expand/Collapse menu"]').click();
+    await page.locator('a[aria-label="DApps link"]').hover();
+
+    await expect(component).toHaveScreenshot();
+  });
+});
+
+test.describe('with submenu', () => {
+  let component: Locator;
+
+  test.beforeEach(async({ render, page }) => {
+    component = await render(
+      <Flex w="100%" minH="100vh" alignItems="stretch">
+        <NavigationDesktop/>
+        <Box bgColor="lightpink" w="100%"/>
+      </Flex>,
+      { hooksConfig },
+    );
+    await page.locator('div[aria-label="Blockchain link group"]').hover();
+  });
+
+  test('base view', async() => {
+    await expect(component).toHaveScreenshot();
+  });
+
+  test.describe('xl screen', () => {
+    test.use({ viewport: pwConfig.viewport.xl });
+
+    test('base view', async() => {
+      await expect(component).toHaveScreenshot();
+    });
+  });
+});
+
+const noSideBarCookieTest = test.extend({
+  context: ({ context }, use) => {
+    context.addCookies([ { name: cookies.NAMES.NAV_BAR_COLLAPSED, value: 'false', domain: config.app.host, path: '/' } ]);
+    use(context);
+  },
+});
+
+noSideBarCookieTest.describe('cookie set to false', () => {
+  let component: Locator;
+
+  noSideBarCookieTest.beforeEach(async({ render }) => {
+    component = await render(
+      <Flex w="100%" minH="100vh" alignItems="stretch">
+        <NavigationDesktop/>
+        <Box bgColor="lightpink" w="100%"/>
+      </Flex>,
+      { hooksConfig },
+    );
+  });
+
+  noSideBarCookieTest('', async() => {
+    const networkMenu = component.locator('button[aria-label="Network menu"]');
+    await expect(networkMenu).toBeVisible();
+  });
+
+  noSideBarCookieTest.describe('xl screen', () => {
+    noSideBarCookieTest.use({ viewport: pwConfig.viewport.xl });
+
+    noSideBarCookieTest('', async() => {
+      const networkMenu = component.locator('button[aria-label="Network menu"]');
+      await expect(networkMenu).toBeVisible();
+    });
+  });
+});
+
+const sideBarCookieTest = test.extend({
+  context: ({ context }, use) => {
+    context.addCookies([ { name: cookies.NAMES.NAV_BAR_COLLAPSED, value: 'true', domain: config.app.host, path: '/' } ]);
+    use(context);
+  },
+});
+
+sideBarCookieTest.describe('cookie set to true', () => {
+  sideBarCookieTest('navbar is collapsed', async({ render }) => {
+    const component = await render(
+      <Flex w="100%" minH="100vh" alignItems="stretch">
+        <NavigationDesktop/>
+        <Box bgColor="lightpink" w="100%"/>
+      </Flex>,
+      { hooksConfig },
+    );
+
+    const networkMenu = component.locator('button[aria-label="Network menu"]');
+    await expect(networkMenu).toBeHidden();
+  });
+});
+
+test('hover +@dark-mode', async({ render }) => {
+  const component = await render(
+    <Flex w="100%" minH="100vh" alignItems="stretch">
+      <NavigationDesktop/>
+      <Box bgColor="lightpink" w="100%"/>
+    </Flex>,
+    { hooksConfig },
+  );
+
+  await component.locator('header').hover();
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('hover xl screen', () => {
+  test.use({ viewport: pwConfig.viewport.xl });
+
+  test('+@dark-mode', async({ render }) => {
+    const component = await render(
+      <Flex w="100%" minH="100vh" alignItems="stretch">
+        <NavigationDesktop/>
+        <Box bgColor="lightpink" w="100%"/>
+      </Flex>,
+      { hooksConfig },
+    );
+
+    await component.locator('header').hover();
+    await expect(component).toHaveScreenshot();
+  });
+});
+
+test.describe('with highlighted routes', () => {
+  let component: Locator;
+
+  test.beforeEach(async({ render, mockEnvs }) => {
+    await mockEnvs(ENVS_MAP.navigationHighlightedRoutes);
+
+    component = await render(
+      <Flex w="100%" minH="100vh" alignItems="stretch">
+        <NavigationDesktop/>
+        <Box bgColor="lightpink" w="100%"/>
+      </Flex>,
+      { hooksConfig },
+    );
+  });
+
+  test('+@dark-mode', async() => {
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('with submenu', async({ page }) => {
+    await page.locator('div[aria-label="Blockchain link group"]').hover();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test.describe('xl screen', () => {
+    test.use({ viewport: pwConfig.viewport.xl });
+
+    test('+@dark-mode', async() => {
+      await expect(component).toHaveScreenshot();
+    });
+  });
+});
diff --git a/ui/snippets/navigation/vertical/NavigationDesktop.tsx b/ui/snippets/navigation/vertical/NavigationDesktop.tsx
new file mode 100644
index 0000000000..bee7b63ff6
--- /dev/null
+++ b/ui/snippets/navigation/vertical/NavigationDesktop.tsx
@@ -0,0 +1,242 @@
+import { Flex, Box, VStack, useColorModeValue } from "@chakra-ui/react";
+import React from "react";
+
+<<<<<<< HEAD:ui/snippets/navigation/NavigationDesktop.tsx
+import config from "configs/app";
+import { useAppContext } from "lib/contexts/app";
+import * as cookies from "lib/cookies";
+import useHasAccount from "lib/hooks/useHasAccount";
+import useNavItems, { isGroupItem } from "lib/hooks/useNavItems";
+import getDefaultTransitionProps from "theme/utils/getDefaultTransitionProps";
+import IconSvg from "ui/shared/IconSvg";
+import NetworkLogo from "ui/snippets/networkMenu/NetworkLogo";
+import NetworkMenu from "ui/snippets/networkMenu/NetworkMenu";
+
+import NavLink from "./NavLink";
+import NavLinkGroupDesktop from "./NavLinkGroupDesktop";
+=======
+import config from 'configs/app';
+import { useAppContext } from 'lib/contexts/app';
+import * as cookies from 'lib/cookies';
+import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
+import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
+import IconSvg from 'ui/shared/IconSvg';
+import useIsAuth from 'ui/snippets/auth/useIsAuth';
+import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
+import NetworkMenu from 'ui/snippets/networkMenu/NetworkMenu';
+
+import TestnetBadge from '../TestnetBadge';
+import NavLink from './NavLink';
+import NavLinkGroup from './NavLinkGroup';
+import NavLinkRewards from './NavLinkRewards';
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739:ui/snippets/navigation/vertical/NavigationDesktop.tsx
+
+const NavigationDesktop = () => {
+  const appProps = useAppContext();
+  const cookiesString = appProps.cookies;
+
+  const isNavBarCollapsedCookie = cookies.get(
+    cookies.NAMES.NAV_BAR_COLLAPSED,
+    cookiesString,
+  );
+  let isNavBarCollapsed;
+  if (isNavBarCollapsedCookie === "true") {
+    isNavBarCollapsed = true;
+  }
+  if (isNavBarCollapsedCookie === "false") {
+    isNavBarCollapsed = false;
+  }
+
+  const { mainNavItems, accountNavItems } = useNavItems();
+
+  const isAuth = useIsAuth();
+
+  const [ isCollapsed, setCollapsedState ] = React.useState<boolean | undefined>(
+    isNavBarCollapsed,
+  );
+
+  const handleTogglerClick = React.useCallback(() => {
+    setCollapsedState((flag) => !flag);
+    cookies.set(
+      cookies.NAMES.NAV_BAR_COLLAPSED,
+      isCollapsed ? "false" : "true",
+    );
+  }, [ isCollapsed ]);
+
+  const handleContainerClick = React.useCallback((event: React.MouseEvent) => {
+    if (event.target === event.currentTarget) {
+      handleTogglerClick();
+    }
+  }, [ handleTogglerClick ]);
+
+  const chevronIconStyles = {
+    bgColor: useColorModeValue("white", "black"),
+    color: useColorModeValue("blackAlpha.400", "whiteAlpha.400"),
+    borderColor: "divider",
+  };
+
+  const isExpanded = isCollapsed === false;
+
+  return (
+    <Flex
+<<<<<<< HEAD:ui/snippets/navigation/NavigationDesktop.tsx
+      display={{ base: "none", lg: "flex" }}
+=======
+      display={{ base: 'none', lg: 'flex' }}
+      role="group"
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739:ui/snippets/navigation/vertical/NavigationDesktop.tsx
+      position="relative"
+      flexDirection="column"
+      alignItems="stretch"
+      borderRight="1px solid"
+      borderColor="divider"
+      px={{ lg: isExpanded ? 6 : 4, xl: isCollapsed ? 4 : 6 }}
+      py={ 12 }
+<<<<<<< HEAD:ui/snippets/navigation/NavigationDesktop.tsx
+      width={{
+        lg: isExpanded ? "229px" : "92px",
+        xl: isCollapsed ? "92px" : "229px",
+      }}
+      { ...getDefaultTransitionProps({ transitionProperty: "width, padding" }) }
+      sx={{
+        "&:hover #expand-icon": {
+          display: "block",
+        },
+      }}
+    >
+      { config.chain.isTestnet && (
+        <IconSvg
+          name="testnet"
+          h="14px"
+          w="49px"
+          color="red.400"
+          position="absolute"
+          pl={ 3 }
+          top="34px"
+        />
+      ) }
+      { config.chain.isDevNet && (
+        <IconSvg
+          name="devnet"
+          h="14px"
+          w="57px"
+          color="red.400"
+          position="absolute"
+          pl={ 3 }
+          top="34px"
+        />
+      ) }
+=======
+      width={{ lg: isExpanded ? '229px' : '92px', xl: isCollapsed ? '92px' : '229px' }}
+      { ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) }
+      onClick={ handleContainerClick }
+    >
+      <TestnetBadge position="absolute" pl={ 3 } w="49px" top="34px"/>
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739:ui/snippets/navigation/vertical/NavigationDesktop.tsx
+      <Box
+        as="header"
+        display="flex"
+        justifyContent="flex-start"
+        alignItems="center"
+        flexDirection="row"
+        w="100%"
+        pl={{ lg: isExpanded ? 3 : "15px", xl: isCollapsed ? "15px" : 3 }}
+        pr={{ lg: isExpanded ? 0 : "15px", xl: isCollapsed ? "15px" : 0 }}
+        h={ 10 }
+        transitionProperty="padding"
+        transitionDuration="normal"
+        transitionTimingFunction="ease"
+      >
+        <NetworkLogo isCollapsed={ isCollapsed }/>
+<<<<<<< HEAD:ui/snippets/navigation/NavigationDesktop.tsx
+        { Boolean(config.UI.sidebar.featuredNetworks) && (
+          <NetworkMenu isCollapsed={ isCollapsed }/>
+        ) }
+=======
+        { Boolean(config.UI.navigation.featuredNetworks) && <NetworkMenu isCollapsed={ isCollapsed }/> }
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739:ui/snippets/navigation/vertical/NavigationDesktop.tsx
+      </Box>
+      <Box as="nav" mt={ 6 } w="100%">
+        <VStack as="ul" spacing="1" alignItems="flex-start">
+          { mainNavItems.map((item) => {
+            if (isGroupItem(item)) {
+<<<<<<< HEAD:ui/snippets/navigation/NavigationDesktop.tsx
+              return (
+                <NavLinkGroupDesktop
+                  key={ item.text }
+                  item={ item }
+                  isCollapsed={ isCollapsed }
+                />
+              );
+=======
+              return <NavLinkGroup key={ item.text } item={ item } isCollapsed={ isCollapsed }/>;
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739:ui/snippets/navigation/vertical/NavigationDesktop.tsx
+            } else {
+              return (
+                <NavLink
+                  key={ item.text }
+                  item={ item }
+                  isCollapsed={ isCollapsed }
+                />
+              );
+            }
+          }) }
+        </VStack>
+      </Box>
+<<<<<<< HEAD:ui/snippets/navigation/NavigationDesktop.tsx
+      { hasAccount && (
+        <Box
+          as="nav"
+          borderTopWidth="1px"
+          borderColor="divider"
+          w="100%"
+          mt={ 6 }
+          pt={ 6 }
+        >
+          <VStack as="ul" spacing="1" alignItems="flex-start">
+            { accountNavItems.map((item) => (
+              <NavLink key={ item.text } item={ item } isCollapsed={ isCollapsed }/>
+            )) }
+=======
+      { isAuth && (
+        <Box as="nav" borderTopWidth="1px" borderColor="divider" w="100%" mt={ 3 } pt={ 3 }>
+          <VStack as="ul" spacing="1" alignItems="flex-start">
+            <NavLinkRewards isCollapsed={ isCollapsed }/>
+            { accountNavItems.map((item) => <NavLink key={ item.text } item={ item } isCollapsed={ isCollapsed }/>) }
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739:ui/snippets/navigation/vertical/NavigationDesktop.tsx
+          </VStack>
+        </Box>
+      ) }
+      <IconSvg
+        name="arrows/east-mini"
+        width={ 6 }
+        height={ 6 }
+        border="1px"
+        _hover={{ color: "link_hovered" }}
+        borderRadius="base"
+        { ...chevronIconStyles }
+        transform={{
+          lg: isExpanded ? "rotate(0)" : "rotate(180deg)",
+          xl: isCollapsed ? "rotate(180deg)" : "rotate(0)",
+        }}
+        { ...getDefaultTransitionProps({
+          transitionProperty: "transform, left",
+        }) }
+        transformOrigin="center"
+        position="absolute"
+        top="104px"
+        left={{
+          lg: isExpanded ? "216px" : "80px",
+          xl: isCollapsed ? "80px" : "216px",
+        }}
+        cursor="pointer"
+        onClick={ handleTogglerClick }
+        aria-label="Expand/Collapse menu"
+        display="none"
+        _groupHover={{ display: 'block' }}
+      />
+    </Flex>
+  );
+};
+
+export default NavigationDesktop;
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png
new file mode 100644
index 0000000000..e6338b1a8c
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-xl-screen-dark-mode-1.png
new file mode 100644
index 0000000000..470b804ae2
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-dark-mode-1.png
new file mode 100644
index 0000000000..8b994663af
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-xl-screen-dark-mode-1.png
new file mode 100644
index 0000000000..3e5a61fad9
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-dark-mode-1.png
new file mode 100644
index 0000000000..69968c1f8b
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-xl-screen-dark-mode-1.png
new file mode 100644
index 0000000000..38bbb933ae
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-dark-mode-1.png
new file mode 100644
index 0000000000..362a358e80
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-xl-screen-dark-mode-1.png
new file mode 100644
index 0000000000..c3c0f27598
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_auth-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_auth-dark-mode-1.png
new file mode 100644
index 0000000000..63d6ce1323
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_auth-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_auth-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_auth-xl-screen-dark-mode-1.png
new file mode 100644
index 0000000000..e6c716b489
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_auth-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-dark-mode-1.png
new file mode 100644
index 0000000000..f3f7619a92
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-xl-screen-dark-mode-1.png
new file mode 100644
index 0000000000..52f7174eaa
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-dark-mode-1.png
new file mode 100644
index 0000000000..7c452c00fc
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-xl-screen-dark-mode-1.png
new file mode 100644
index 0000000000..9a599962b6
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-dark-mode-1.png
new file mode 100644
index 0000000000..d67dcfaa74
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-with-submenu-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-with-submenu-1.png
new file mode 100644
index 0000000000..ec2e9c5191
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-with-submenu-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-xl-screen-dark-mode-1.png
new file mode 100644
index 0000000000..502c3eaddc
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-base-view-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-base-view-1.png
new file mode 100644
index 0000000000..8ddca4126a
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-base-view-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-base-view-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-base-view-1.png
new file mode 100644
index 0000000000..a673748a12
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-base-view-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-tooltips-base-view-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-tooltips-base-view-1.png
new file mode 100644
index 0000000000..b95eafe390
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-tooltips-base-view-1.png differ
diff --git a/ui/snippets/networkMenu/NetworkLogo.pw.tsx b/ui/snippets/networkMenu/NetworkLogo.pw.tsx
index 12c2d8da12..b44974fb11 100644
--- a/ui/snippets/networkMenu/NetworkLogo.pw.tsx
+++ b/ui/snippets/networkMenu/NetworkLogo.pw.tsx
@@ -1,81 +1,50 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import type { Locator } from '@playwright/test';
 import React from 'react';
 
-import { buildExternalAssetFilePath } from 'configs/app/utils';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import * as app from 'playwright/utils/app';
-import * as configs from 'playwright/utils/configs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import NetworkLogo from './NetworkLogo';
 
-base.describe('placeholder logo', () => {
-  const test = base.extend({
-    context: contextWithEnvs([
-      { name: 'NEXT_PUBLIC_NETWORK_LOGO', value: '' },
-      { name: 'NEXT_PUBLIC_NETWORK_ICON', value: '' },
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ]) as any,
+const LOGO_URL = 'https://localhost:3000/my-logo.png';
+const ICON_URL = 'https://localhost:3000/my-icon.png';
+
+test.describe('placeholder logo', () => {
+  test.beforeEach(async({ mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_NETWORK_LOGO', '' ],
+      [ 'NEXT_PUBLIC_NETWORK_ICON', '' ],
+    ]);
   });
 
-  test('+@dark-mode', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <NetworkLogo/>
-      </TestApp>,
-    );
+  test('+@dark-mode', async({ render }) => {
+    const component = await render(<NetworkLogo/>);
 
     await expect(component.locator('a')).toHaveScreenshot();
   });
 
   test.describe('screen xl', () => {
-    test.use({ viewport: configs.viewport.xl });
+    test.use({ viewport: pwConfig.viewport.xl });
 
-    test('+@dark-mode', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <NetworkLogo/>
-        </TestApp>,
-      );
+    test('+@dark-mode', async({ render }) => {
+      const component = await render(<NetworkLogo/>);
 
       await expect(component.locator('a')).toHaveScreenshot();
     });
   });
 });
 
-base.describe('custom logo', () => {
-  const LOGO_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_NETWORK_LOGO', 'https://localhost:3000/my-logo.png') || '';
-  const ICON_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_NETWORK_ICON', 'https://localhost:3000/my-icon.png') || '';
-  const test = base.extend({
-    context: contextWithEnvs([
-      { name: 'NEXT_PUBLIC_NETWORK_LOGO', value: LOGO_URL },
-      { name: 'NEXT_PUBLIC_NETWORK_ICON', value: ICON_URL },
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ]) as any,
-  });
-
+test.describe('custom logo', () => {
   let component: Locator;
 
-  test.beforeEach(async({ page, mount }) => {
-    await page.route(LOGO_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/network-logo.svg',
-      });
-    });
-    await page.route(ICON_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_svg.svg',
-      });
-    });
-
-    component = await mount(
-      <TestApp>
-        <NetworkLogo/>
-      </TestApp>,
-    );
+  test.beforeEach(async({ render, mockConfigResponse, mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_NETWORK_LOGO', LOGO_URL ],
+      [ 'NEXT_PUBLIC_NETWORK_ICON', ICON_URL ],
+    ]);
+    await mockConfigResponse('NEXT_PUBLIC_NETWORK_LOGO', LOGO_URL, './playwright/mocks/network-logo.svg', true);
+    await mockConfigResponse('NEXT_PUBLIC_NETWORK_ICON', ICON_URL, './playwright/mocks/image_svg.svg', true);
+    component = await render(<NetworkLogo/>);
   });
 
   test('+@dark-mode', async() => {
@@ -83,7 +52,7 @@ base.describe('custom logo', () => {
   });
 
   test.describe('screen xl', () => {
-    test.use({ viewport: configs.viewport.xl });
+    test.use({ viewport: pwConfig.viewport.xl });
 
     test('+@dark-mode', async() => {
       await expect(component.locator('a')).toHaveScreenshot();
@@ -91,64 +60,32 @@ base.describe('custom logo', () => {
   });
 });
 
-base.describe('custom logo with dark option -@default +@dark-mode', () => {
-  const LOGO_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_NETWORK_LOGO', 'https://localhost:3000/my-logo.png') || '';
-  const LOGO_URL_DARK = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_NETWORK_LOGO_DARK', 'https://localhost:3000/my-logo.png') || '';
-  const ICON_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_NETWORK_ICON', 'https://localhost:3000/my-icon.png') || '';
-  const ICON_URL_DARK = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_NETWORK_ICON_DARK', 'https://localhost:3000/my-icon.png') || '';
-  const test = base.extend({
-    context: contextWithEnvs([
-      { name: 'NEXT_PUBLIC_NETWORK_LOGO', value: LOGO_URL },
-      { name: 'NEXT_PUBLIC_NETWORK_LOGO_DARK', value: LOGO_URL_DARK },
-      { name: 'NEXT_PUBLIC_NETWORK_ICON', value: ICON_URL },
-      { name: 'NEXT_PUBLIC_NETWORK_ICON_DARK', value: ICON_URL_DARK },
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ]) as any,
-  });
-
+test.describe('custom logo with dark option -@default +@dark-mode', () => {
   let component: Locator;
 
-  test.beforeEach(async({ page, mount }) => {
-    await page.route(LOGO_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_long.jpg',
-      });
-    });
-    await page.route(LOGO_URL_DARK, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_long.jpg',
-      });
-    });
-    await page.route(ICON_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-    await page.route(ICON_URL_DARK, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-
-    component = await mount(
-      <TestApp>
-        <NetworkLogo/>
-      </TestApp>,
-    );
+  test.beforeEach(async({ render, mockConfigResponse, mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_NETWORK_LOGO', LOGO_URL ],
+      [ 'NEXT_PUBLIC_NETWORK_LOGO_DARK', LOGO_URL ],
+      [ 'NEXT_PUBLIC_NETWORK_ICON', ICON_URL ],
+      [ 'NEXT_PUBLIC_NETWORK_ICON_DARK', ICON_URL ],
+    ]);
+    await mockConfigResponse('NEXT_PUBLIC_NETWORK_LOGO', LOGO_URL, './playwright/mocks/image_long.jpg', true);
+    await mockConfigResponse('NEXT_PUBLIC_NETWORK_LOGO_DARK', LOGO_URL, './playwright/mocks/image_long.jpg', true);
+    await mockConfigResponse('NEXT_PUBLIC_NETWORK_ICON', ICON_URL, './playwright/mocks/image_s.jpg', true);
+    await mockConfigResponse('NEXT_PUBLIC_NETWORK_ICON_DARK', ICON_URL, './playwright/mocks/image_s.jpg', true);
+
+    component = await render(<NetworkLogo/>);
   });
 
-  test('', async() => {
+  test('base view', async() => {
     await expect(component.locator('a')).toHaveScreenshot();
   });
 
   test.describe('screen xl', () => {
-    test.use({ viewport: configs.viewport.xl });
+    test.use({ viewport: pwConfig.viewport.xl });
 
-    test('', async() => {
+    test('base view', async() => {
       await expect(component.locator('a')).toHaveScreenshot();
     });
   });
diff --git a/ui/snippets/networkMenu/NetworkLogo.tsx b/ui/snippets/networkMenu/NetworkLogo.tsx
index d2157651d4..7c8a935efa 100644
--- a/ui/snippets/networkMenu/NetworkLogo.tsx
+++ b/ui/snippets/networkMenu/NetworkLogo.tsx
@@ -1,4 +1,4 @@
-import { Box, Image, useColorModeValue, Skeleton } from '@chakra-ui/react';
+import { Box, Image, useColorModeValue, Skeleton, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
@@ -9,6 +9,7 @@ import IconSvg from 'ui/shared/IconSvg';
 interface Props {
   isCollapsed?: boolean;
   onClick?: (event: React.SyntheticEvent) => void;
+  className?: string;
 }
 
 const LogoFallback = ({ isCollapsed, isSmall }: { isCollapsed?: boolean; isSmall?: boolean }) => {
@@ -25,7 +26,7 @@ const LogoFallback = ({ isCollapsed, isSmall }: { isCollapsed?: boolean; isSmall
     xl: isCollapsed ? 'none' : 'block',
   };
 
-  if (config.UI.sidebar[field].default) {
+  if (config.UI.navigation[field].default) {
     return <Skeleton w="100%" borderRadius="sm" display={ display }/>;
   }
 
@@ -40,16 +41,17 @@ const LogoFallback = ({ isCollapsed, isSmall }: { isCollapsed?: boolean; isSmall
   );
 };
 
-const NetworkLogo = ({ isCollapsed, onClick }: Props) => {
+const NetworkLogo = ({ isCollapsed, onClick, className }: Props) => {
 
-  const logoSrc = useColorModeValue(config.UI.sidebar.logo.default, config.UI.sidebar.logo.dark || config.UI.sidebar.logo.default);
-  const iconSrc = useColorModeValue(config.UI.sidebar.icon.default, config.UI.sidebar.icon.dark || config.UI.sidebar.icon.default);
+  const logoSrc = useColorModeValue(config.UI.navigation.logo.default, config.UI.navigation.logo.dark || config.UI.navigation.logo.default);
+  const iconSrc = useColorModeValue(config.UI.navigation.icon.default, config.UI.navigation.icon.dark || config.UI.navigation.icon.default);
   const darkModeFilter = { filter: 'brightness(0) invert(1)' };
-  const logoStyle = useColorModeValue({}, !config.UI.sidebar.logo.dark ? darkModeFilter : {});
-  const iconStyle = useColorModeValue({}, !config.UI.sidebar.icon.dark ? darkModeFilter : {});
+  const logoStyle = useColorModeValue({}, !config.UI.navigation.logo.dark ? darkModeFilter : {});
+  const iconStyle = useColorModeValue({}, !config.UI.navigation.icon.dark ? darkModeFilter : {});
 
   return (
     <Box
+      className={ className }
       as="a"
       href={ route({ pathname: '/' }) }
       width={{ base: '120px', lg: isCollapsed === false ? '120px' : '30px', xl: isCollapsed ? '30px' : '120px' }}
@@ -84,4 +86,4 @@ const NetworkLogo = ({ isCollapsed, onClick }: Props) => {
   );
 };
 
-export default React.memo(NetworkLogo);
+export default React.memo(chakra(NetworkLogo));
diff --git a/ui/snippets/networkMenu/NetworkMenu.pw.tsx b/ui/snippets/networkMenu/NetworkMenu.pw.tsx
index 808f198c2d..21b1922720 100644
--- a/ui/snippets/networkMenu/NetworkMenu.pw.tsx
+++ b/ui/snippets/networkMenu/NetworkMenu.pw.tsx
@@ -1,45 +1,23 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import { buildExternalAssetFilePath } from 'configs/app/utils';
-import { FEATURED_NETWORKS_MOCK } from 'mocks/config/network';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import * as app from 'playwright/utils/app';
+import { FEATURED_NETWORKS } from 'mocks/config/network';
+import { test, expect } from 'playwright/lib';
 
 import NetworkMenu from './NetworkMenu';
 
-const FEATURED_NETWORKS_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_FEATURED_NETWORKS', 'https://localhost:3000/featured-networks.json') || '';
+const FEATURED_NETWORKS_URL = 'https://localhost:3000/featured-networks.json';
+const LOGO_URL = 'https://localhost:3000/my-logo.png';
 
-const extendedTest = test.extend({
-  context: contextWithEnvs([
-    { name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
-});
+test.use({ viewport: { width: 1600, height: 1000 } });
+
+test('base view +@dark-mode', async({ render, page, mockConfigResponse, mockAssetResponse, mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL ],
+  ]);
+  await mockConfigResponse('NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL, FEATURED_NETWORKS);
+  await mockAssetResponse(LOGO_URL, './playwright/mocks/image_s.jpg');
 
-extendedTest.use({ viewport: { width: 1600, height: 1000 } });
-
-extendedTest('base view +@dark-mode', async({ mount, page }) => {
-  const LOGO_URL = 'https://localhost:3000/my-logo.png';
-  await page.route(LOGO_URL, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
-  await page.route(FEATURED_NETWORKS_URL, (route) => {
-    return route.fulfill({
-      status: 200,
-      body: FEATURED_NETWORKS_MOCK,
-    });
-  });
-
-  const component = await mount(
-    <TestApp>
-      <NetworkMenu/>
-    </TestApp>,
-  );
+  const component = await render(<NetworkMenu/>);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 36, height: 36 } });
 
diff --git a/ui/snippets/networkMenu/NetworkMenu.tsx b/ui/snippets/networkMenu/NetworkMenu.tsx
index 01888e0b6a..4fd11a2965 100644
--- a/ui/snippets/networkMenu/NetworkMenu.tsx
+++ b/ui/snippets/networkMenu/NetworkMenu.tsx
@@ -1,6 +1,8 @@
-import { Popover, PopoverTrigger } from '@chakra-ui/react';
+import { PopoverTrigger } from '@chakra-ui/react';
 import React from 'react';
 
+import Popover from 'ui/shared/chakra/Popover';
+
 import NetworkMenuButton from './NetworkMenuButton';
 import NetworkMenuContentDesktop from './NetworkMenuContentDesktop';
 import useNetworkMenu from './useNetworkMenu';
@@ -13,7 +15,7 @@ const NetworkMenu = ({ isCollapsed }: Props) => {
   const menu = useNetworkMenu();
 
   return (
-    <Popover openDelay={ 300 } placement="right-start" gutter={ 8 } isLazy isOpen={ menu.isOpen } onClose={ menu.onClose }>
+    <Popover openDelay={ 300 } placement="right-start" isLazy isOpen={ menu.isOpen } onClose={ menu.onClose }>
       <PopoverTrigger>
         <NetworkMenuButton
           marginLeft="auto"
diff --git a/ui/snippets/networkMenu/NetworkMenuContentDesktop.tsx b/ui/snippets/networkMenu/NetworkMenuContentDesktop.tsx
index 89db170903..bb640fd1bc 100644
--- a/ui/snippets/networkMenu/NetworkMenuContentDesktop.tsx
+++ b/ui/snippets/networkMenu/NetworkMenuContentDesktop.tsx
@@ -1,4 +1,4 @@
-import { PopoverContent, PopoverBody, Text, Tabs, TabList, TabPanels, TabPanel, Tab, VStack, Skeleton, Flex, useColorModeValue } from '@chakra-ui/react';
+import { PopoverContent, PopoverBody, Tabs, TabList, TabPanels, TabPanel, Tab, VStack, Skeleton, Flex, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import type { FeaturedNetwork, NetworkGroup } from 'types/networks';
@@ -12,65 +12,79 @@ interface Props {
 
 const NetworkMenuPopup = ({ items, tabs }: Props) => {
   const selectedNetwork = items?.find(({ isActive }) => isActive);
-  const selectedTab = tabs.findIndex((tab) => selectedNetwork?.group === tab);
+  const defaultTab = tabs.findIndex((tab) => selectedNetwork?.group === tab);
+
+  const [ tabIndex, setTabIndex ] = React.useState(defaultTab > -1 ? defaultTab : 0);
+
   const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
+  const handleTabChange = React.useCallback((index: number) => {
+    setTabIndex(index);
+  }, []);
+
   const content = !items || items.length === 0 ? (
     <>
-      <Skeleton h="30px" w="120px"/>
-      <Flex mt={ 4 } alignItems="center">
-        <Flex h="40px" w="105px" bgColor={ bgColor } borderRadius="base" px={ 4 } py={ 2 }>
-          <Skeleton h="24px" w="100%"/>
+      <Flex alignItems="center">
+        <Flex h="32px" w="105px" bgColor={ bgColor } borderRadius="base" px={ 4 } py={ 2 }>
+          <Skeleton h="16px" w="100%"/>
         </Flex>
-        <Skeleton h="24px" w="68px" mx={ 4 }/>
-        <Skeleton h="24px" w="45px" mx={ 4 }/>
+        <Skeleton h="16px" w="68px" mx={ 4 }/>
+        <Skeleton h="16px" w="45px" mx={ 4 }/>
       </Flex>
-      <Flex mt={ 8 } flexDir="column" rowGap={ 2 }>
-        <Flex mx={ 4 } my={ 2 } alignItems="center">
+      <Flex mt={ 3 } flexDir="column" rowGap={ 2 }>
+        <Flex mx={ 3 } my={ 2 } alignItems="center">
           <Skeleton h="30px" w="30px" borderRadius="full"/>
-          <Skeleton h="24px" w="120px" ml={ 3 }/>
+          <Skeleton h="16px" w="120px" ml={ 3 }/>
         </Flex>
-        <Flex mx={ 4 } my={ 2 } alignItems="center">
+        <Flex mx={ 3 } my={ 2 } alignItems="center">
           <Skeleton h="30px" w="30px" borderRadius="full"/>
-          <Skeleton h="24px" w="180px" ml={ 3 }/>
+          <Skeleton h="16px" w="180px" ml={ 3 }/>
         </Flex>
-        <Flex mx={ 4 } my={ 2 } alignItems="center">
+        <Flex mx={ 3 } my={ 2 } alignItems="center">
           <Skeleton h="30px" w="30px" borderRadius="full"/>
-          <Skeleton h="24px" w="150px" ml={ 3 }/>
+          <Skeleton h="16px" w="150px" ml={ 3 }/>
         </Flex>
       </Flex>
     </>
   ) : (
-    <>
-      <Text as="h4" fontSize="18px" lineHeight="30px" fontWeight="500">Networks</Text>
-      <Tabs variant="soft-rounded" mt={ 4 } isLazy defaultIndex={ selectedTab !== -1 ? selectedTab : undefined }>
-        { tabs.length > 1 && (
-          <TabList>
-            { tabs.map((tab) => <Tab key={ tab } textTransform="capitalize">{ tab }</Tab>) }
-          </TabList>
-        ) }
-        <TabPanels mt={ 8 }>
-          { tabs.map((tab) => (
-            <TabPanel key={ tab } p={ 0 }>
-              <VStack as="ul" spacing={ 2 } alignItems="stretch" mt={ 4 }>
-                { items
-                  .filter((network) => network.group === tab)
-                  .map((network) => (
-                    <NetworkMenuLink
-                      key={ network.title }
-                      { ...network }
-                    />
-                  )) }
-              </VStack>
-            </TabPanel>
+    <Tabs
+      variant="outline"
+      colorScheme="gray"
+      size="sm"
+      isLazy
+      index={ tabIndex }
+      onChange={ handleTabChange }
+    >
+      { tabs.length > 1 && (
+        <TabList columnGap={ 2 }>
+          { tabs.map((tab, index) => (
+            <Tab key={ tab } textTransform="capitalize" { ...(tabIndex === index ? { 'data-selected': 'true' } : {}) }>
+              { tab }
+            </Tab>
           )) }
-        </TabPanels>
-      </Tabs>
-    </>
+        </TabList>
+      ) }
+      <TabPanels mt={ 3 }>
+        { tabs.map((tab) => (
+          <TabPanel key={ tab } p={ 0 }>
+            <VStack as="ul" spacing={ 1 } alignItems="stretch" mt={ 4 } maxH="516px" overflowY="scroll">
+              { items
+                .filter((network) => network.group === tab)
+                .map((network) => (
+                  <NetworkMenuLink
+                    key={ network.title }
+                    { ...network }
+                  />
+                )) }
+            </VStack>
+          </TabPanel>
+        )) }
+      </TabPanels>
+    </Tabs>
   );
 
   return (
-    <PopoverContent w="382px">
+    <PopoverContent w="330px">
       <PopoverBody>
         { content }
       </PopoverBody>
diff --git a/ui/snippets/networkMenu/NetworkMenuContentMobile.tsx b/ui/snippets/networkMenu/NetworkMenuContentMobile.tsx
index aa56ba83f6..357830f831 100644
--- a/ui/snippets/networkMenu/NetworkMenuContentMobile.tsx
+++ b/ui/snippets/networkMenu/NetworkMenuContentMobile.tsx
@@ -26,29 +26,28 @@ const NetworkMenuContentMobile = ({ items, tabs }: Props) => {
   }, []);
 
   const content = !items || items.length === 0 ? (
-    <>
-      <Skeleton h="32px" w="100%"/>
-      <Flex mt={ 6 } flexDir="column" rowGap={ 2 }>
-        <Flex mx={ 3 } my={ 2 } alignItems="center">
-          <Skeleton h="30px" w="30px" borderRadius="full"/>
-          <Skeleton h="20px" w="60px" ml={ 3 }/>
-        </Flex>
-        <Flex mx={ 3 } my={ 2 } alignItems="center">
-          <Skeleton h="30px" w="30px" borderRadius="full"/>
-          <Skeleton h="20px" w="120px" ml={ 3 }/>
-        </Flex>
-        <Flex mx={ 3 } my={ 2 } alignItems="center">
-          <Skeleton h="30px" w="30px" borderRadius="full"/>
-          <Skeleton h="20px" w="80px" ml={ 3 }/>
-        </Flex>
+    <Flex mt={ 6 } flexDir="column" rowGap={ 2 }>
+      <Flex mx={ 3 } my={ 2 } alignItems="center">
+        <Skeleton h="30px" w="30px" borderRadius="full"/>
+        <Skeleton h="20px" w="60px" ml={ 3 }/>
       </Flex>
-    </>
+      <Flex mx={ 3 } my={ 2 } alignItems="center">
+        <Skeleton h="30px" w="30px" borderRadius="full"/>
+        <Skeleton h="20px" w="120px" ml={ 3 }/>
+      </Flex>
+      <Flex mx={ 3 } my={ 2 } alignItems="center">
+        <Skeleton h="30px" w="30px" borderRadius="full"/>
+        <Skeleton h="20px" w="80px" ml={ 3 }/>
+      </Flex>
+    </Flex>
   ) : (
     <>
-      <Select size="xs" borderRadius="base" value={ selectedTab } onChange={ handleSelectChange } focusBorderColor="none">
-        { tabs.map((tab) => <option key={ tab } value={ tab }>{ capitalize(tab) }</option>) }
-      </Select>
-      <VStack as="ul" spacing={ 2 } alignItems="stretch" mt={ 6 }>
+      { tabs.length > 1 && (
+        <Select size="xs" borderRadius="base" value={ selectedTab } onChange={ handleSelectChange } mb={ 3 }>
+          { tabs.map((tab) => <option key={ tab } value={ tab }>{ capitalize(tab) }</option>) }
+        </Select>
+      ) }
+      <VStack as="ul" spacing={ 2 } alignItems="stretch">
         { items
           .filter(({ group }) => group === selectedTab)
           .map((network) => (
diff --git a/ui/snippets/networkMenu/NetworkMenuLink.tsx b/ui/snippets/networkMenu/NetworkMenuLink.tsx
index c629cd7460..b6fdc86a6f 100644
--- a/ui/snippets/networkMenu/NetworkMenuLink.tsx
+++ b/ui/snippets/networkMenu/NetworkMenuLink.tsx
@@ -32,8 +32,8 @@ const NetworkMenuLink = ({ title, icon, isActive, isMobile, url, invertIconInDar
       <Flex
         as="a"
         href={ url }
-        px={ isMobile ? 3 : 4 }
-        py={ 2 }
+        px={ 3 }
+        py="9px"
         alignItems="center"
         cursor="pointer"
         pointerEvents={ isActive ? 'none' : 'initial' }
diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-with-dark-option---default-dark-mode-1.png b/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-with-dark-option---default-dark-mode-1.png
deleted file mode 100644
index 50f218644c..0000000000
Binary files a/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-with-dark-option---default-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-with-dark-option---default-dark-mode-base-view-1.png b/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-with-dark-option---default-dark-mode-base-view-1.png
new file mode 100644
index 0000000000..60cd1e4701
Binary files /dev/null and b/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-with-dark-option---default-dark-mode-base-view-1.png differ
diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-with-dark-option---default-dark-mode-screen-xl-1.png b/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-with-dark-option---default-dark-mode-screen-xl-1.png
deleted file mode 100644
index 2384e9e9bd..0000000000
Binary files a/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-with-dark-option---default-dark-mode-screen-xl-1.png and /dev/null differ
diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-with-dark-option---default-dark-mode-screen-xl-base-view-1.png b/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-with-dark-option---default-dark-mode-screen-xl-base-view-1.png
new file mode 100644
index 0000000000..ded8463019
Binary files /dev/null and b/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-with-dark-option---default-dark-mode-screen-xl-base-view-1.png differ
diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-3.png b/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-3.png
index 5e7dc4a120..33ff841243 100644
Binary files a/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-3.png and b/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-3.png differ
diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-4.png b/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-4.png
index 9da53d9357..9018b0d3f0 100644
Binary files a/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-4.png and b/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-4.png differ
diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_default_base-view-dark-mode-3.png b/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_default_base-view-dark-mode-3.png
index 60836ceb3a..aead474029 100644
Binary files a/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_default_base-view-dark-mode-3.png and b/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_default_base-view-dark-mode-3.png differ
diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_default_base-view-dark-mode-4.png b/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_default_base-view-dark-mode-4.png
index 0cccc6f2b0..0a72f1e2c5 100644
Binary files a/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_default_base-view-dark-mode-4.png and b/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_default_base-view-dark-mode-4.png differ
diff --git a/ui/snippets/networkMenu/useColors.ts b/ui/snippets/networkMenu/useColors.ts
index 06efe4f87f..40044366fd 100644
--- a/ui/snippets/networkMenu/useColors.ts
+++ b/ui/snippets/networkMenu/useColors.ts
@@ -5,18 +5,18 @@ export default function useColors() {
     text: {
       'default': useColorModeValue('gray.600', 'gray.400'),
       active: useColorModeValue('blackAlpha.900', 'whiteAlpha.900'),
-      hover: useColorModeValue('blue.600', 'link_hovered'),
+      hover: 'link_hovered',
     },
     iconPlaceholder: {
       'default': useColorModeValue('blackAlpha.100', 'whiteAlpha.300'),
     },
     bg: {
       'default': 'transparent',
-      active: useColorModeValue('blue.50', 'gray.800'),
+      active: useColorModeValue('blue.50', 'whiteAlpha.100'),
     },
     border: {
       'default': 'divider',
-      active: useColorModeValue('blue.50', 'gray.800'),
+      active: useColorModeValue('blue.50', 'whiteAlpha.100'),
     },
   };
 }
diff --git a/ui/snippets/networkMenu/useNetworkMenu.tsx b/ui/snippets/networkMenu/useNetworkMenu.tsx
index c6a75b7554..2ac2b8af55 100644
--- a/ui/snippets/networkMenu/useNetworkMenu.tsx
+++ b/ui/snippets/networkMenu/useNetworkMenu.tsx
@@ -15,8 +15,8 @@ export default function useNetworkMenu() {
   const fetch = useFetch();
   const { isPending, data } = useQuery<unknown, ResourceError<unknown>, Array<FeaturedNetwork>>({
     queryKey: [ 'featured-network' ],
-    queryFn: async() => fetch(config.UI.sidebar.featuredNetworks || '', undefined, { resource: 'featured-network' }),
-    enabled: Boolean(config.UI.sidebar.featuredNetworks) && isOpen,
+    queryFn: async() => fetch(config.UI.navigation.featuredNetworks || '', undefined, { resource: 'featured-network' }),
+    enabled: Boolean(config.UI.navigation.featuredNetworks) && isOpen,
     staleTime: Infinity,
   });
 
diff --git a/ui/snippets/profileMenu/ProfileMenuContent.tsx b/ui/snippets/profileMenu/ProfileMenuContent.tsx
deleted file mode 100644
index 602fe2ed07..0000000000
--- a/ui/snippets/profileMenu/ProfileMenuContent.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Box, Button, Text, VStack, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-import type { UserInfo } from 'types/api/account';
-
-import config from 'configs/app';
-import useNavItems from 'lib/hooks/useNavItems';
-import * as mixpanel from 'lib/mixpanel/index';
-import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
-import NavLink from 'ui/snippets/navigation/NavLink';
-
-const feature = config.features.account;
-
-type Props = {
-  data?: UserInfo;
-  onNavLinkClick?: () => void;
-};
-
-const ProfileMenuContent = ({ data, onNavLinkClick }: Props) => {
-  const { accountNavItems, profileItem } = useNavItems();
-  const primaryTextColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
-
-  const handleSingOutClick = React.useCallback(() => {
-    mixpanel.logEvent(
-      mixpanel.EventTypes.ACCOUNT_ACCESS,
-      { Action: 'Logged out' },
-      { send_immediately: true },
-    );
-  }, []);
-
-  if (!feature.isEnabled) {
-    return null;
-  }
-
-  return (
-    <Box>
-      { (data?.name || data?.nickname) && (
-        <Text
-          fontSize="sm"
-          fontWeight={ 500 }
-          color={ primaryTextColor }
-          { ...getDefaultTransitionProps() }
-        >
-        Signed in as { data.name || data.nickname }
-        </Text>
-      ) }
-      { data?.email && (
-        <Text
-          fontSize="sm"
-          mb={ 1 }
-          fontWeight={ 500 }
-          color="gray.500"
-          { ...getDefaultTransitionProps() }
-        >
-          { data.email }
-        </Text>
-      ) }
-      <NavLink item={ profileItem } isActive={ undefined } px="0px" isCollapsed={ false } onClick={ onNavLinkClick }/>
-      <Box as="nav" mt={ 2 } pt={ 2 } borderTopColor="divider" borderTopWidth="1px" { ...getDefaultTransitionProps() }>
-        <VStack as="ul" spacing="0" alignItems="flex-start" overflow="hidden">
-          { accountNavItems.map((item) => (
-            <NavLink
-              key={ item.text }
-              item={ item }
-              isActive={ undefined }
-              isCollapsed={ false }
-              px="0px"
-              onClick={ onNavLinkClick }
-            />
-          )) }
-        </VStack>
-      </Box>
-      <Box mt={ 2 } pt={ 3 } borderTopColor="divider" borderTopWidth="1px" { ...getDefaultTransitionProps() }>
-        <Button size="sm" width="full" variant="outline" as="a" href={ feature.logoutUrl } onClick={ handleSingOutClick }>
-          Sign Out
-        </Button>
-      </Box>
-    </Box>
-  );
-};
-
-export default ProfileMenuContent;
diff --git a/ui/snippets/profileMenu/ProfileMenuDesktop.pw.tsx b/ui/snippets/profileMenu/ProfileMenuDesktop.pw.tsx
deleted file mode 100644
index 858c26f729..0000000000
--- a/ui/snippets/profileMenu/ProfileMenuDesktop.pw.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { test, expect } from '@playwright/experimental-ct-react';
-import React from 'react';
-
-import * as profileMock from 'mocks/user/profile';
-import authFixture from 'playwright/fixtures/auth';
-import TestApp from 'playwright/TestApp';
-import * as app from 'playwright/utils/app';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-
-import ProfileMenuDesktop from './ProfileMenuDesktop';
-
-test('no auth', async({ mount, page }) => {
-  const hooksConfig = {
-    router: {
-      asPath: '/',
-      pathname: '/',
-    },
-  };
-  const component = await mount(
-    <TestApp>
-      <ProfileMenuDesktop/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  await component.locator('a').click();
-  expect(page.url()).toBe(`${ app.url }/auth/auth0?path=%2F`);
-});
-
-test.describe('auth', () => {
-  const extendedTest = test.extend({
-    context: ({ context }, use) => {
-      authFixture(context);
-      use(context);
-    },
-  });
-
-  extendedTest('+@dark-mode', async({ mount, page }) => {
-    await page.route(buildApiUrl('user_info'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(profileMock.base),
-    }));
-    await page.route(profileMock.base.avatar, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-
-    const component = await mount(
-      <TestApp>
-        <ProfileMenuDesktop/>
-      </TestApp>,
-    );
-
-    await component.getByAltText(/Profile picture/i).click();
-    await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 600 } });
-  });
-});
diff --git a/ui/snippets/profileMenu/ProfileMenuDesktop.tsx b/ui/snippets/profileMenu/ProfileMenuDesktop.tsx
deleted file mode 100644
index 90e445ec47..0000000000
--- a/ui/snippets/profileMenu/ProfileMenuDesktop.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import type { IconButtonProps } from '@chakra-ui/react';
-import { Popover, PopoverContent, PopoverBody, PopoverTrigger, IconButton, Tooltip, Box } from '@chakra-ui/react';
-import React from 'react';
-
-import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
-import useLoginUrl from 'lib/hooks/useLoginUrl';
-import * as mixpanel from 'lib/mixpanel/index';
-import UserAvatar from 'ui/shared/UserAvatar';
-import ProfileMenuContent from 'ui/snippets/profileMenu/ProfileMenuContent';
-
-import useMenuButtonColors from '../useMenuButtonColors';
-
-type Props = {
-  isHomePage?: boolean;
-};
-
-const ProfileMenuDesktop = ({ isHomePage }: Props) => {
-  const { data, error, isPending } = useFetchProfileInfo();
-  const loginUrl = useLoginUrl();
-  const { themedBackground, themedBorderColor, themedColor } = useMenuButtonColors();
-  const [ hasMenu, setHasMenu ] = React.useState(false);
-
-  React.useEffect(() => {
-    if (!isPending) {
-      setHasMenu(Boolean(data));
-    }
-  }, [ data, error?.status, isPending ]);
-
-  const handleSignInClick = React.useCallback(() => {
-    mixpanel.logEvent(
-      mixpanel.EventTypes.ACCOUNT_ACCESS,
-      { Action: 'Auth0 init' },
-      { send_immediately: true },
-    );
-  }, []);
-
-  const iconButtonProps: Partial<IconButtonProps> = (() => {
-    if (hasMenu || !loginUrl) {
-      return {};
-    }
-
-    return {
-      as: 'a',
-      href: loginUrl,
-      onClick: handleSignInClick,
-    };
-  })();
-
-  const variant = React.useMemo(() => {
-    if (hasMenu) {
-      return 'subtle';
-    }
-    return isHomePage ? 'solid' : 'outline';
-  }, [ hasMenu, isHomePage ]);
-
-  let iconButtonStyles: Partial<IconButtonProps> = {};
-  if (hasMenu) {
-    iconButtonStyles = {
-      bg: isHomePage ? 'blue.50' : themedBackground,
-    };
-  } else if (isHomePage) {
-    iconButtonStyles = {
-      color: 'white',
-    };
-  } else {
-    iconButtonStyles = {
-      borderColor: themedBorderColor,
-      color: themedColor,
-    };
-  }
-
-  return (
-    <Popover openDelay={ 300 } placement="bottom-end" gutter={ 10 } isLazy>
-      <Tooltip
-        label={ <span>Sign in to My Account to add tags,<br/>create watchlists, access API keys and more</span> }
-        textAlign="center"
-        padding={ 2 }
-        isDisabled={ hasMenu }
-        openDelay={ 500 }
-      >
-        <Box>
-          <PopoverTrigger>
-            <IconButton
-              aria-label="profile menu"
-              icon={ <UserAvatar size={ 20 }/> }
-              variant={ variant }
-              colorScheme="blue"
-              boxSize="40px"
-              flexShrink={ 0 }
-              { ...iconButtonProps }
-              { ...iconButtonStyles }
-            />
-          </PopoverTrigger>
-        </Box>
-      </Tooltip>
-      { hasMenu && (
-        <PopoverContent w="212px">
-          <PopoverBody padding="24px 16px 16px 16px">
-            <ProfileMenuContent data={ data }/>
-          </PopoverBody>
-        </PopoverContent>
-      ) }
-    </Popover>
-  );
-};
-
-export default ProfileMenuDesktop;
diff --git a/ui/snippets/profileMenu/ProfileMenuMobile.pw.tsx b/ui/snippets/profileMenu/ProfileMenuMobile.pw.tsx
deleted file mode 100644
index b5d3fcc373..0000000000
--- a/ui/snippets/profileMenu/ProfileMenuMobile.pw.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { test, expect, devices } from '@playwright/experimental-ct-react';
-import React from 'react';
-
-import * as profileMock from 'mocks/user/profile';
-import authFixture from 'playwright/fixtures/auth';
-import TestApp from 'playwright/TestApp';
-import * as app from 'playwright/utils/app';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-
-import ProfileMenuMobile from './ProfileMenuMobile';
-
-test('no auth', async({ mount, page }) => {
-  const hooksConfig = {
-    router: {
-      asPath: '/',
-      pathname: '/',
-    },
-  };
-  const component = await mount(
-    <TestApp>
-      <ProfileMenuMobile/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  await component.locator('a').click();
-  expect(page.url()).toBe(`${ app.url }/auth/auth0?path=%2F`);
-});
-
-test.use({ viewport: devices['iPhone 13 Pro'].viewport });
-
-test.describe('auth', () => {
-  const extendedTest = test.extend({
-    context: ({ context }, use) => {
-      authFixture(context);
-      use(context);
-    },
-  });
-
-  extendedTest('base view', async({ mount, page }) => {
-    await page.route(buildApiUrl('user_info'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(profileMock.base),
-    }));
-    await page.route(profileMock.base.avatar, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-
-    const component = await mount(
-      <TestApp>
-        <ProfileMenuMobile/>
-      </TestApp>,
-    );
-
-    await component.getByAltText(/Profile picture/i).click();
-    await expect(page).toHaveScreenshot();
-  });
-});
diff --git a/ui/snippets/profileMenu/ProfileMenuMobile.tsx b/ui/snippets/profileMenu/ProfileMenuMobile.tsx
deleted file mode 100644
index 0a1b97eda6..0000000000
--- a/ui/snippets/profileMenu/ProfileMenuMobile.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, IconButton } from '@chakra-ui/react';
-import type { IconButtonProps } from '@chakra-ui/react';
-import React from 'react';
-
-import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
-import useLoginUrl from 'lib/hooks/useLoginUrl';
-import * as mixpanel from 'lib/mixpanel/index';
-import UserAvatar from 'ui/shared/UserAvatar';
-import ProfileMenuContent from 'ui/snippets/profileMenu/ProfileMenuContent';
-
-import useMenuButtonColors from '../useMenuButtonColors';
-
-const ProfileMenuMobile = () => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const { data, error, isPending } = useFetchProfileInfo();
-  const loginUrl = useLoginUrl();
-  const { themedBackground, themedBorderColor, themedColor } = useMenuButtonColors();
-  const [ hasMenu, setHasMenu ] = React.useState(false);
-
-  const handleSignInClick = React.useCallback(() => {
-    mixpanel.logEvent(
-      mixpanel.EventTypes.ACCOUNT_ACCESS,
-      { Action: 'Auth0 init' },
-      { send_immediately: true },
-    );
-  }, []);
-
-  React.useEffect(() => {
-    if (!isPending) {
-      setHasMenu(Boolean(data));
-    }
-  }, [ data, error?.status, isPending ]);
-
-  const iconButtonProps: Partial<IconButtonProps> = (() => {
-    if (hasMenu || !loginUrl) {
-      return {};
-    }
-
-    return {
-      as: 'a',
-      href: loginUrl,
-      onClick: handleSignInClick,
-    };
-  })();
-
-  return (
-    <>
-      <IconButton
-        aria-label="profile menu"
-        icon={ <UserAvatar size={ 20 }/> }
-        variant={ data?.avatar ? 'subtle' : 'outline' }
-        colorScheme="gray"
-        boxSize="40px"
-        flexShrink={ 0 }
-        bg={ data?.avatar ? themedBackground : undefined }
-        color={ themedColor }
-        borderColor={ !data?.avatar ? themedBorderColor : undefined }
-        onClick={ hasMenu ? onOpen : undefined }
-        { ...iconButtonProps }
-      />
-      { hasMenu && (
-        <Drawer
-          isOpen={ isOpen }
-          placement="right"
-          onClose={ onClose }
-          autoFocus={ false }
-        >
-          <DrawerOverlay/>
-          <DrawerContent maxWidth="260px">
-            <DrawerBody p={ 6 }>
-              <ProfileMenuContent data={ data } onNavLinkClick={ onClose }/>
-            </DrawerBody>
-          </DrawerContent>
-        </Drawer>
-      ) }
-    </>
-  );
-};
-
-export default ProfileMenuMobile;
diff --git a/ui/snippets/profileMenu/__screenshots__/ProfileMenuDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png b/ui/snippets/profileMenu/__screenshots__/ProfileMenuDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png
deleted file mode 100644
index 430e738c37..0000000000
Binary files a/ui/snippets/profileMenu/__screenshots__/ProfileMenuDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/profileMenu/__screenshots__/ProfileMenuDesktop.pw.tsx_default_auth-dark-mode-1.png b/ui/snippets/profileMenu/__screenshots__/ProfileMenuDesktop.pw.tsx_default_auth-dark-mode-1.png
deleted file mode 100644
index b4ae10b93c..0000000000
Binary files a/ui/snippets/profileMenu/__screenshots__/ProfileMenuDesktop.pw.tsx_default_auth-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/profileMenu/__screenshots__/ProfileMenuMobile.pw.tsx_default_auth-base-view-1.png b/ui/snippets/profileMenu/__screenshots__/ProfileMenuMobile.pw.tsx_default_auth-base-view-1.png
deleted file mode 100644
index b5ad715272..0000000000
Binary files a/ui/snippets/profileMenu/__screenshots__/ProfileMenuMobile.pw.tsx_default_auth-base-view-1.png and /dev/null differ
diff --git a/ui/snippets/profileMenu/__screenshots__/ProfileMenuMobile.pw.tsx_default_no-auth-1.png b/ui/snippets/profileMenu/__screenshots__/ProfileMenuMobile.pw.tsx_default_no-auth-1.png
deleted file mode 100644
index ae2853f1a0..0000000000
Binary files a/ui/snippets/profileMenu/__screenshots__/ProfileMenuMobile.pw.tsx_default_no-auth-1.png and /dev/null differ
diff --git a/ui/snippets/searchBar/SearchBar.pw.tsx b/ui/snippets/searchBar/SearchBar.pw.tsx
index 36d78ba514..2fe9e3208b 100644
--- a/ui/snippets/searchBar/SearchBar.pw.tsx
+++ b/ui/snippets/searchBar/SearchBar.pw.tsx
@@ -1,353 +1,240 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import { buildExternalAssetFilePath } from 'configs/app/utils';
-import * as textAdMock from 'mocks/ad/textAd';
 import { apps as appsMock } from 'mocks/apps/apps';
 import * as searchMock from 'mocks/search/index';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import * as app from 'playwright/utils/app';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import SearchBar from './SearchBar';
 
-const test = base.extend({
-  context: contextWithEnvs([
-    { name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: '' },
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
+test.beforeEach(async({ mockAssetResponse, mockEnvs, mockTextAd }) => {
+  await mockTextAd();
+  await mockAssetResponse(searchMock.token1.icon_url as string, './playwright/mocks/image_s.jpg');
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_MARKETPLACE_ENABLED', 'false' ],
+  ]);
 });
 
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
-  await page.route(searchMock.token1.icon_url as string, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
-});
-
-test('search by token name  +@mobile +@dark-mode', async({ mount, page }) => {
-  const API_URL = buildApiUrl('quick_search') + '?q=o';
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.token1,
-      searchMock.token2,
-    ]),
-  }));
-
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
-  await page.getByPlaceholder(/search/i).type('o');
-  await page.waitForResponse(API_URL);
+test('search by token name  +@mobile +@dark-mode', async({ render, page, mockApiResponse }) => {
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.token1,
+    searchMock.token2,
+  ], { queryParams: { q: 'o' } });
+  await render(<SearchBar/>);
+  await page.getByPlaceholder(/search/i).fill('o');
+  await page.waitForResponse(apiUrl);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
 });
 
-test('search by contract name  +@mobile +@dark-mode', async({ mount, page }) => {
-  const API_URL = buildApiUrl('quick_search') + '?q=o';
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.contract1,
-      searchMock.address2,
-    ]),
-  }));
-
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
-  await page.getByPlaceholder(/search/i).type('o');
-  await page.waitForResponse(API_URL);
+test('search by contract name  +@mobile +@dark-mode', async({ render, page, mockApiResponse }) => {
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.contract1,
+    searchMock.contract2,
+    searchMock.address2,
+  ], { queryParams: { q: 'o' } });
+
+  await render(<SearchBar/>);
+  await page.getByPlaceholder(/search/i).fill('o');
+  await page.waitForResponse(apiUrl);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
 });
 
-test('search by name homepage +@dark-mode', async({ mount, page }) => {
-  const API_URL = buildApiUrl('quick_search') + '?q=o';
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.token1,
-      searchMock.token2,
-      searchMock.contract1,
-    ]),
-  }));
-
-  await mount(
-    <TestApp>
-      <SearchBar isHomepage/>
-    </TestApp>,
-  );
-  await page.getByPlaceholder(/search/i).type('o');
-  await page.waitForResponse(API_URL);
+test('search by name homepage +@dark-mode', async({ render, page, mockApiResponse }) => {
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.token1,
+    searchMock.token2,
+    searchMock.contract1,
+  ], { queryParams: { q: 'o' } });
+  await render(<SearchBar isHomepage/>);
+  await page.getByPlaceholder(/search/i).fill('o');
+  await page.waitForResponse(apiUrl);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
 });
 
-test('search by tag  +@mobile +@dark-mode', async({ mount, page }) => {
-  const API_URL = buildApiUrl('quick_search') + '?q=o';
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.label1,
-    ]),
-  }));
-
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
-  await page.getByPlaceholder(/search/i).type('o');
-  await page.waitForResponse(API_URL);
+test('search by tag  +@mobile +@dark-mode', async({ render, page, mockApiResponse }) => {
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.label1,
+  ], { queryParams: { q: 'o' } });
+  await render(<SearchBar/>);
+  await page.getByPlaceholder(/search/i).fill('o');
+  await page.waitForResponse(apiUrl);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
 });
 
-test('search by address hash +@mobile', async({ mount, page }) => {
-  const API_URL = buildApiUrl('quick_search') + `?q=${ searchMock.address1.address }`;
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.address1,
-    ]),
-  }));
-
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
-  await page.getByPlaceholder(/search/i).type(searchMock.address1.address);
-  await page.waitForResponse(API_URL);
+test('search by address hash +@mobile', async({ render, page, mockApiResponse }) => {
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.address1,
+  ], { queryParams: { q: searchMock.address1.address } });
+  await render(<SearchBar/>);
+  await page.getByPlaceholder(/search/i).fill(searchMock.address1.address);
+  await page.waitForResponse(apiUrl);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
 });
 
-test('search by block number +@mobile', async({ mount, page }) => {
-  const API_URL = buildApiUrl('quick_search') + `?q=${ searchMock.block1.block_number }`;
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.block1,
-      searchMock.block2,
-      searchMock.block3,
-    ]),
-  }));
-
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
-  await page.getByPlaceholder(/search/i).type(String(searchMock.block1.block_number));
-  await page.waitForResponse(API_URL);
+test('search by block number +@mobile', async({ render, page, mockApiResponse }) => {
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.block1,
+    searchMock.block2,
+    searchMock.block3,
+  ], { queryParams: { q: searchMock.block1.block_number } });
+  await render(<SearchBar/>);
+  await page.getByPlaceholder(/search/i).fill(String(searchMock.block1.block_number));
+  await page.waitForResponse(apiUrl);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 600 } });
 });
 
-test('search by block hash +@mobile', async({ mount, page }) => {
-  const API_URL = buildApiUrl('quick_search') + `?q=${ searchMock.block1.block_hash }`;
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.block1,
-    ]),
-  }));
-
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
-  await page.getByPlaceholder(/search/i).type(searchMock.block1.block_hash);
-  await page.waitForResponse(API_URL);
+test('search by block hash +@mobile', async({ render, page, mockApiResponse }) => {
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.block1,
+  ], { queryParams: { q: searchMock.block1.block_hash } });
+  await render(<SearchBar/>);
+  await page.getByPlaceholder(/search/i).fill(searchMock.block1.block_hash);
+  await page.waitForResponse(apiUrl);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
 });
 
-test('search by tx hash +@mobile', async({ mount, page }) => {
-  const API_URL = buildApiUrl('quick_search') + `?q=${ searchMock.tx1.tx_hash }`;
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.tx1,
-    ]),
-  }));
-
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
-  await page.getByPlaceholder(/search/i).type(searchMock.tx1.tx_hash);
-  await page.waitForResponse(API_URL);
+test('search by tx hash +@mobile', async({ render, page, mockApiResponse }) => {
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.tx1,
+  ], { queryParams: { q: searchMock.tx1.transaction_hash } });
+  await render(<SearchBar/>);
+  await page.getByPlaceholder(/search/i).fill(searchMock.tx1.transaction_hash);
+  await page.waitForResponse(apiUrl);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
 });
 
-const testWithUserOps = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.userOps) as any,
+test('search by blob hash +@mobile', async({ render, page, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.dataAvailability);
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.blob1,
+  ], { queryParams: { q: searchMock.blob1.blob_hash } });
+  await render(<SearchBar/>);
+  await page.getByPlaceholder(/search/i).fill(searchMock.blob1.blob_hash);
+  await page.waitForResponse(apiUrl);
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
 });
 
-testWithUserOps('search by user op hash +@mobile', async({ mount, page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  const API_URL = buildApiUrl('quick_search') + `?q=${ searchMock.tx1.tx_hash }`;
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.userOp1,
-    ]),
-  }));
-
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
-  await page.getByPlaceholder(/search/i).type(searchMock.tx1.tx_hash);
-  await page.waitForResponse(API_URL);
+test('search by domain name +@mobile', async({ render, page, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.nameService);
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.domain1,
+  ], { queryParams: { q: searchMock.domain1.ens_info.name } });
+
+  await render(<SearchBar/>);
+  await page.getByPlaceholder(/search/i).fill(searchMock.domain1.ens_info.name);
+  await page.waitForResponse(apiUrl);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
 });
 
-test('search with view all link', async({ mount, page }) => {
-  const API_URL = buildApiUrl('quick_search') + '?q=o';
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.token1,
-      searchMock.token2,
-      searchMock.contract1,
-      ...Array(47).fill(searchMock.contract1),
-    ]),
-  }));
+test('search by user op hash +@mobile', async({ render, page, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.userOps);
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.userOp1,
+  ], { queryParams: { q: searchMock.tx1.transaction_hash } });
+  await render(<SearchBar/>);
+  await page.getByPlaceholder(/search/i).fill(searchMock.tx1.transaction_hash);
+  await page.waitForResponse(apiUrl);
 
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
-  await page.getByPlaceholder(/search/i).type('o');
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
+});
 
-  await page.waitForResponse(API_URL);
+test('search with view all link', async({ render, page, mockApiResponse }) => {
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.token1,
+    searchMock.token2,
+    searchMock.contract1,
+    ...Array(47).fill(searchMock.contract1),
+  ], { queryParams: { q: 'o' } });
+  await render(<SearchBar/>);
+  await page.getByPlaceholder(/search/i).fill('o');
+  await page.waitForResponse(apiUrl);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
 });
 
-test('scroll suggest to category', async({ mount, page }) => {
-  const API_URL = buildApiUrl('quick_search') + '?q=o';
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.token1,
-      searchMock.token2,
-      searchMock.contract1,
-      searchMock.token1,
-      searchMock.token2,
-      searchMock.contract1,
-      searchMock.token1,
-      searchMock.token2,
-      searchMock.contract1,
-      searchMock.token1,
-      searchMock.token2,
-      searchMock.contract1,
-    ]),
-  }));
-
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
-  await page.getByPlaceholder(/search/i).type('o');
-  await page.waitForResponse(API_URL);
+test('scroll suggest to category', async({ render, page, mockApiResponse }) => {
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.token1,
+    searchMock.token2,
+    searchMock.contract1,
+    searchMock.token1,
+    searchMock.token2,
+    searchMock.contract1,
+    searchMock.token1,
+    searchMock.token2,
+    searchMock.contract1,
+    searchMock.token1,
+    searchMock.token2,
+    searchMock.contract1,
+  ], { queryParams: { q: 'o' } });
+  await render(<SearchBar/>);
+  await page.getByPlaceholder(/search/i).fill('o');
+  await page.waitForResponse(apiUrl);
 
   await page.getByRole('tab', { name: 'Addresses' }).click();
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
 });
 
-test('recent keywords suggest +@mobile', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
+test('recent keywords suggest +@mobile', async({ render, page }, { project }) => {
+  await render(<SearchBar/>);
   // eslint-disable-next-line max-len
   await page.evaluate(() => window.localStorage.setItem('recent_search_keywords', '["10x2d311959270e0bbdc1fc7bc6dbd8ad645c4dd8d6aa32f5f89d54629a924f112b","0x1d311959270e0bbdc1fc7bc6dbd8ad645c4dd8d6aa32f5f89d54629a924f112b","usd","bob"]'));
   await page.getByPlaceholder(/search/i).click();
-  await page.getByText('0x1d311959270e0bbdc1fc7bc6db').isVisible();
+  await page.getByText(project.name === 'mobile' ? '0x1d311959270e0bbdc1fc7bc6dbd...112b' : '0x1d311959270e0bbdc1fc7bc6dbd').isVisible();
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
 });
 
-base.describe('with apps', () => {
-  const MARKETPLACE_CONFIG_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', 'https://marketplace-config.json') || '';
-  const test = base.extend({
-    context: contextWithEnvs([
-      { name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: MARKETPLACE_CONFIG_URL },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ]) as any,
+test.describe('with apps', () => {
+  const MARKETPLACE_CONFIG_URL = 'http://localhost:4000/marketplace-config.json';
+
+  test('default view +@mobile', async({ render, page, mockApiResponse, mockConfigResponse, mockAssetResponse, mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_MARKETPLACE_ENABLED', 'true' ],
+      [ 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL ],
+    ]);
+    const apiUrl = await mockApiResponse('quick_search', [
+      searchMock.token1,
+    ], { queryParams: { q: 'o' } });
+    await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL, appsMock);
+    await mockAssetResponse(appsMock[0].logo, './playwright/mocks/image_s.jpg');
+    await mockAssetResponse(appsMock[1].logo, './playwright/mocks/image_s.jpg');
+
+    await render(<SearchBar/>);
+    await page.getByPlaceholder(/search/i).fill('o');
+    await page.waitForResponse(apiUrl);
+
+    await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
+  });
+});
+
+test.describe('block countdown', () => {
+  test('no results +@mobile', async({ render, page, mockApiResponse }) => {
+    const apiUrl = await mockApiResponse('quick_search', [], { queryParams: { q: '1234567890' } });
+    await render(<SearchBar/>);
+    await page.getByPlaceholder(/search/i).fill('1234567890');
+    await page.waitForResponse(apiUrl);
+
+    await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
   });
 
-  test('default view +@mobile', async({ mount, page }) => {
-    const API_URL = buildApiUrl('quick_search') + '?q=o';
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify([
-        searchMock.token1,
-      ]),
-    }));
-
-    await page.route(MARKETPLACE_CONFIG_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(appsMock),
-    }));
-
-    await page.route(appsMock[0].logo, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-    await page.route(appsMock[1].logo as string, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-
-    await mount(
-      <TestApp>
-        <SearchBar/>
-      </TestApp>,
-    );
-    await page.getByPlaceholder(/search/i).type('o');
-
-    await page.waitForResponse(API_URL);
+  test('with results +@mobile', async({ render, page, mockApiResponse }) => {
+    const apiUrl = await mockApiResponse('quick_search', [
+      { ...searchMock.token1, name: '1234567890123456789' },
+    ], { queryParams: { q: '1234567890' } });
+    await render(<SearchBar/>);
+    await page.getByPlaceholder(/search/i).fill('1234567890');
+    await page.waitForResponse(apiUrl);
 
     await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
   });
diff --git a/ui/snippets/searchBar/SearchBar.tsx b/ui/snippets/searchBar/SearchBar.tsx
index f8b07afe1e..07de33d020 100644
--- a/ui/snippets/searchBar/SearchBar.tsx
+++ b/ui/snippets/searchBar/SearchBar.tsx
@@ -1,17 +1,29 @@
-import { Box, Portal, Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure, PopoverFooter, useOutsideClick } from '@chakra-ui/react';
+import {
+  Box,
+  Portal,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  PopoverFooter,
+  useDisclosure,
+  useOutsideClick,
+} from '@chakra-ui/react';
 import _debounce from 'lodash/debounce';
 import { useRouter } from 'next/router';
 import type { FormEvent } from 'react';
 import React from 'react';
 import { Element } from 'react-scroll';
 
+import type { Route } from 'nextjs-routes';
 import { route } from 'nextjs-routes';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import * as mixpanel from 'lib/mixpanel/index';
 import { getRecentSearchKeywords, saveToRecentKeywords } from 'lib/recentSearchKeywords';
-import LinkInternal from 'ui/shared/LinkInternal';
+import Popover from 'ui/shared/chakra/Popover';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 
+import SearchBarBackdrop from './SearchBarBackdrop';
 import SearchBarInput from './SearchBarInput';
 import SearchBarRecentKeywords from './SearchBarRecentKeywords';
 import SearchBarSuggest from './SearchBarSuggest/SearchBarSuggest';
@@ -19,7 +31,7 @@ import useQuickSearchQuery from './useQuickSearchQuery';
 
 type Props = {
   isHomepage?: boolean;
-}
+};
 
 const SCROLL_CONTAINER_ID = 'search_bar_popover_content';
 
@@ -34,21 +46,22 @@ const SearchBar = ({ isHomepage }: Props) => {
 
   const recentSearchKeywords = getRecentSearchKeywords();
 
-  const { searchTerm, debouncedSearchTerm, handleSearchTermChange, query, pathname } = useQuickSearchQuery();
+  const { searchTerm, debouncedSearchTerm, handleSearchTermChange, query } = useQuickSearchQuery();
 
   const handleSubmit = React.useCallback((event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (searchTerm) {
-      const url = route({ pathname: '/search-results', query: { q: searchTerm } });
+      const resultRoute: Route = { pathname: '/search-results', query: { q: searchTerm, redirect: 'true' } };
+      const url = route(resultRoute);
       mixpanel.logEvent(mixpanel.EventTypes.SEARCH_QUERY, {
         'Search query': searchTerm,
-        'Source page type': mixpanel.getPageType(pathname),
+        'Source page type': mixpanel.getPageType(router.pathname),
         'Result URL': url,
       });
       saveToRecentKeywords(searchTerm);
-      router.push({ pathname: '/search-results', query: { q: searchTerm } }, undefined, { shallow: true });
+      router.push(resultRoute, undefined, { shallow: true });
     }
-  }, [ searchTerm, pathname, router ]);
+  }, [ searchTerm, router ]);
 
   const handleFocus = React.useCallback(() => {
     onOpen();
@@ -77,18 +90,24 @@ const SearchBar = ({ isHomepage }: Props) => {
   const handleItemClick = React.useCallback((event: React.MouseEvent<HTMLAnchorElement>) => {
     mixpanel.logEvent(mixpanel.EventTypes.SEARCH_QUERY, {
       'Search query': searchTerm,
-      'Source page type': mixpanel.getPageType(pathname),
+      'Source page type': mixpanel.getPageType(router.pathname),
       'Result URL': event.currentTarget.href,
     });
     saveToRecentKeywords(searchTerm);
     onClose();
-  }, [ pathname, searchTerm, onClose ]);
+  }, [ router.pathname, searchTerm, onClose ]);
 
-  const menuPaddingX = isMobile && !isHomepage ? 32 : 0;
+  const menuPaddingX = isMobile && !isHomepage ? 24 : 0;
   const calculateMenuWidth = React.useCallback(() => {
     menuWidth.current = (inputRef.current?.getBoundingClientRect().width || 0) - menuPaddingX;
   }, [ menuPaddingX ]);
 
+  // clear input on page change
+  React.useEffect(() => {
+    handleSearchTermChange('');
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ router.asPath?.split('?')?.[0] ]);
+
   React.useEffect(() => {
     const inputEl = inputRef.current;
     if (!inputEl) {
@@ -106,69 +125,74 @@ const SearchBar = ({ isHomepage }: Props) => {
   }, [ calculateMenuWidth ]);
 
   return (
-    <Popover
-      isOpen={ isOpen && (searchTerm.trim().length > 0 || recentSearchKeywords.length > 0) }
-      autoFocus={ false }
-      onClose={ onClose }
-      placement="bottom-start"
-      offset={ isMobile && !isHomepage ? [ 16, -12 ] : undefined }
-      isLazy
-    >
-      <PopoverTrigger>
-        <SearchBarInput
-          ref={ inputRef }
-          onChange={ handleSearchTermChange }
-          onSubmit={ handleSubmit }
-          onFocus={ handleFocus }
-          onHide={ handelHide }
-          onClear={ handleClear }
-          isHomepage={ isHomepage }
-          value={ searchTerm }
-        />
-      </PopoverTrigger>
-      <Portal>
-        <PopoverContent
-          w={ `${ menuWidth.current }px` }
-          ref={ menuRef }
-        >
-          <PopoverBody
-            p={ 0 }
-            color="chakra-body-text"
+    <>
+      <Popover
+        isOpen={ isOpen && (searchTerm.trim().length > 0 || recentSearchKeywords.length > 0) }
+        autoFocus={ false }
+        onClose={ onClose }
+        placement="bottom-start"
+        offset={ isMobile && !isHomepage ? [ 12, -4 ] : [ 0, 8 ] }
+        isLazy
+      >
+        <PopoverTrigger>
+          <SearchBarInput
+            ref={ inputRef }
+            onChange={ handleSearchTermChange }
+            onSubmit={ handleSubmit }
+            onFocus={ handleFocus }
+            onHide={ handelHide }
+            onClear={ handleClear }
+            isHomepage={ isHomepage }
+            value={ searchTerm }
+            isSuggestOpen={ isOpen }
+          />
+        </PopoverTrigger>
+        <Portal>
+          <PopoverContent
+            w={ `${ menuWidth.current }px` }
+            ref={ menuRef }
+            overflow="hidden"
           >
-            <Box
-              maxH="50vh"
-              overflowY="auto"
-              id={ SCROLL_CONTAINER_ID }
-              ref={ scrollRef }
-              as={ Element }
-              px={ 4 }
+            <PopoverBody
+              p={ 0 }
+              color="chakra-body-text"
             >
-              { searchTerm.trim().length === 0 && recentSearchKeywords.length > 0 && (
-                <SearchBarRecentKeywords onClick={ handleSearchTermChange } onClear={ onClose }/>
-              ) }
-              { searchTerm.trim().length > 0 && (
-                <SearchBarSuggest
-                  query={ query }
-                  searchTerm={ debouncedSearchTerm }
-                  onItemClick={ handleItemClick }
-                  containerId={ SCROLL_CONTAINER_ID }
-                />
-              ) }
-            </Box>
-          </PopoverBody>
-          { searchTerm.trim().length > 0 && query.data && query.data.length >= 50 && (
-            <PopoverFooter>
-              <LinkInternal
-                href={ route({ pathname: '/search-results', query: { q: searchTerm } }) }
-                fontSize="sm"
+              <Box
+                maxH="50vh"
+                overflowY="auto"
+                id={ SCROLL_CONTAINER_ID }
+                ref={ scrollRef }
+                as={ Element }
+                px={ 4 }
               >
-              View all results
-              </LinkInternal>
-            </PopoverFooter>
-          ) }
-        </PopoverContent>
-      </Portal>
-    </Popover>
+                { searchTerm.trim().length === 0 && recentSearchKeywords.length > 0 && (
+                  <SearchBarRecentKeywords onClick={ handleSearchTermChange } onClear={ onClose }/>
+                ) }
+                { searchTerm.trim().length > 0 && (
+                  <SearchBarSuggest
+                    query={ query }
+                    searchTerm={ debouncedSearchTerm }
+                    onItemClick={ handleItemClick }
+                    containerId={ SCROLL_CONTAINER_ID }
+                  />
+                ) }
+              </Box>
+            </PopoverBody>
+            { searchTerm.trim().length > 0 && query.data && query.data.length >= 50 && (
+              <PopoverFooter>
+                <LinkInternal
+                  href={ route({ pathname: '/search-results', query: { q: searchTerm } }) }
+                  fontSize="sm"
+                >
+                  View all results
+                </LinkInternal>
+              </PopoverFooter>
+            ) }
+          </PopoverContent>
+        </Portal>
+      </Popover>
+      <SearchBarBackdrop isOpen={ isOpen }/>
+    </>
   );
 };
 
diff --git a/ui/snippets/searchBar/SearchBarBackdrop.tsx b/ui/snippets/searchBar/SearchBarBackdrop.tsx
new file mode 100644
index 0000000000..05d2702fe8
--- /dev/null
+++ b/ui/snippets/searchBar/SearchBarBackdrop.tsx
@@ -0,0 +1,25 @@
+import { Box, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  isOpen: boolean;
+}
+
+const SearchBarBackdrop = ({ isOpen }: Props) => {
+  const backdropBgColor = useColorModeValue('blackAlpha.400', 'blackAlpha.600');
+
+  return (
+    <Box
+      position="fixed"
+      top={ 0 }
+      left={ 0 }
+      w="100vw"
+      h="100vh"
+      bgColor={ backdropBgColor }
+      zIndex="overlay"
+      display={{ base: 'none', lg: isOpen ? 'block' : 'none' }}
+    />
+  );
+};
+
+export default React.memo(SearchBarBackdrop);
diff --git a/ui/snippets/searchBar/SearchBarInput.pw.tsx b/ui/snippets/searchBar/SearchBarInput.pw.tsx
index 8e6bd9b059..d365034acf 100644
--- a/ui/snippets/searchBar/SearchBarInput.pw.tsx
+++ b/ui/snippets/searchBar/SearchBarInput.pw.tsx
@@ -1,8 +1,7 @@
 import { LightMode } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import SearchBarInput from './SearchBarInput';
 
@@ -13,26 +12,18 @@ const props = {
   value: 'duck duck',
 };
 
-test('input on regular page +@mobile +@dark-mode', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <SearchBarInput { ...props }/>
-    </TestApp>,
-  );
+test('input on regular page +@mobile +@dark-mode', async({ render, page }) => {
+  await render(<SearchBarInput { ...props }/>);
   const input = page.getByPlaceholder(/search by/i);
-
   await expect(input).toHaveScreenshot();
 });
 
-test('input on home page +@mobile +@dark-mode', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <LightMode>
-        <SearchBarInput { ...props } isHomepage/>
-      </LightMode>
-    </TestApp>,
+test('input on home page +@mobile +@dark-mode', async({ render, page }) => {
+  await render(
+    <LightMode>
+      <SearchBarInput { ...props } isHomepage/>
+    </LightMode>,
   );
   const input = page.getByPlaceholder(/search by/i);
-
   await expect(input).toHaveScreenshot();
 });
diff --git a/ui/snippets/searchBar/SearchBarInput.tsx b/ui/snippets/searchBar/SearchBarInput.tsx
index 5460172cee..4a8a0e8952 100644
--- a/ui/snippets/searchBar/SearchBarInput.tsx
+++ b/ui/snippets/searchBar/SearchBarInput.tsx
@@ -1,4 +1,4 @@
-import { InputGroup, Input, InputLeftElement, chakra, useColorModeValue, forwardRef, InputRightElement } from '@chakra-ui/react';
+import { InputGroup, Input, InputLeftElement, chakra, useColorModeValue, forwardRef, InputRightElement, Center } from '@chakra-ui/react';
 import throttle from 'lodash/throttle';
 import React from 'react';
 import type { ChangeEvent, FormEvent, FocusEvent } from 'react';
@@ -16,29 +16,34 @@ interface Props {
   onHide?: () => void;
   onClear: () => void;
   isHomepage?: boolean;
+  isSuggestOpen?: boolean;
   value: string;
 }
 
-const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHide, onClear, value }: Props, ref: React.ForwardedRef<HTMLFormElement>) => {
+const SearchBarInput = (
+  { onChange, onSubmit, isHomepage, isSuggestOpen, onFocus, onBlur, onHide, onClear, value }: Props,
+  ref: React.ForwardedRef<HTMLFormElement>,
+) => {
   const innerRef = React.useRef<HTMLFormElement>(null);
   React.useImperativeHandle(ref, () => innerRef.current as HTMLFormElement, []);
+  const [ isSticky, setIsSticky ] = React.useState(false);
   const scrollDirection = useScrollDirection();
   const isMobile = useIsMobile();
 
   const handleScroll = React.useCallback(() => {
     const TOP_BAR_HEIGHT = 36;
-    // if (!isHomepage) {
-    //   if (window.scrollY >= TOP_BAR_HEIGHT) {
-    //     setIsSticky(true);
-    //   } else {
-    //     setIsSticky(false);
-    //   }
-    // }
+    if (!isHomepage) {
+      if (window.scrollY >= TOP_BAR_HEIGHT) {
+        setIsSticky(true);
+      } else {
+        setIsSticky(false);
+      }
+    }
     const clientRect = isMobile && innerRef?.current?.getBoundingClientRect();
     if (clientRect && clientRect.y < TOP_BAR_HEIGHT) {
       onHide?.();
     }
-  }, [ isMobile, onHide ]);
+  }, [ isMobile, onHide, isHomepage ]);
 
   const handleChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
     onChange(event.target.value);
@@ -57,9 +62,69 @@ const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHid
     };
   }, [ isMobile, handleScroll ]);
 
-  const bgColor = useColorModeValue('orange.50', 'black');
+  const handleKeyPress = React.useCallback((event: KeyboardEvent) => {
+    if (isMobile) {
+      return;
+    }
+
+    switch (event.key) {
+      case '/': {
+        if ([ 'INPUT', 'TEXTAREA' ].includes((event.target as HTMLElement).tagName)) {
+          break;
+        }
+
+        if (!isSuggestOpen) {
+          event.preventDefault();
+          innerRef.current?.querySelector('input')?.focus();
+          onFocus?.();
+        }
+        break;
+      }
+      case 'Escape': {
+        if (isSuggestOpen) {
+          innerRef.current?.querySelector('input')?.blur();
+          onHide?.();
+        }
+        break;
+      }
+    }
+  }, [ isMobile, isSuggestOpen, onFocus, onHide ]);
+
+  React.useEffect(() => {
+    window.addEventListener('keydown', handleKeyPress);
+    return () => {
+      window.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [ handleKeyPress ]);
+
+  const bgColor = useColorModeValue('white', 'black');
   const transformMobile = scrollDirection !== 'down' ? 'translateY(0)' : 'translateY(-100%)';
 
+  const rightElement = (() => {
+    if (value) {
+      return <ClearButton onClick={ onClear }/>;
+    }
+
+    if (isMobile) {
+      return null;
+    }
+
+    return (
+      <Center
+        boxSize="20px"
+        my="2px"
+        mr={{ base: 1, lg: isHomepage ? 2 : 1 }}
+        borderRadius="sm"
+        borderWidth="1px"
+        borderColor="gray.400"
+        color="gray.400"
+        display={{ base: 'none', lg: 'flex' }}
+      >
+        /
+      </Center>
+    );
+  })();
+
   return (
     <chakra.form
       ref={ innerRef }
@@ -70,19 +135,20 @@ const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHid
       w="100%"
       backgroundColor={ bgColor }
       borderRadius={{ base: isHomepage ? 'base' : 'none', lg: 'base' }}
-      position={{ base: isHomepage ? 'static' : 'absolute', lg: 'static' }}
+      position={{ base: isHomepage ? 'static' : 'absolute', lg: 'relative' }}
       top={{ base: isHomepage ? 0 : 55, lg: 0 }}
       left="0"
-      zIndex={{ base: isHomepage ? 'auto' : '-1', lg: 'auto' }}
-      paddingX={{ base: isHomepage ? 0 : 4, lg: 0 }}
+      zIndex={{ base: isHomepage ? 'auto' : '-1', lg: isSuggestOpen ? 'popover' : 'auto' }}
+      paddingX={{ base: isHomepage ? 0 : 3, lg: 0 }}
       paddingTop={{ base: isHomepage ? 0 : 1, lg: 0 }}
-      paddingBottom={{ base: isHomepage ? 0 : 4, lg: 0 }}
+      paddingBottom={{ base: isHomepage ? 0 : 2, lg: 0 }}
+      boxShadow={ scrollDirection !== 'down' && isSticky ? 'md' : 'none' }
       transform={{ base: isHomepage ? 'none' : transformMobile, lg: 'none' }}
       transitionProperty="transform,box-shadow,background-color,color,border-color"
       transitionDuration="normal"
       transitionTimingFunction="ease"
     >
-      <InputGroup size={{ base: isHomepage ? 'md' : 'sm', lg: 'md' }}>
+      <InputGroup size={{ base: 'sm', lg: isHomepage ? 'sm_md' : 'sm' }}>
         <InputLeftElement w={{ base: isHomepage ? 6 : 4, lg: 6 }} ml={{ base: isHomepage ? 4 : 3, lg: 4 }} h="100%">
           <IconSvg name="search" boxSize={{ base: isHomepage ? 6 : 4, lg: 6 }} color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/>
         </InputLeftElement>
@@ -99,17 +165,15 @@ const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHid
           }}
           placeholder={ isMobile ? 'Search by address / ... ' : 'Search by address / txn hash / block / token... ' }
           onChange={ handleChange }
-          border="none"
-          boxShadow="none"
-          _focusWithin={{ _placeholder: { color: 'gray.300' }, boxShadow: 'none' }}
+          border={ isHomepage ? 'none' : '2px solid' }
+          borderColor={ useColorModeValue('blackAlpha.100', 'whiteAlpha.200') }
+          _focusWithin={{ _placeholder: { color: 'gray.300' } }}
           color={ useColorModeValue('black', 'white') }
           value={ value }
         />
-        { value && (
-          <InputRightElement top={{ base: isHomepage ? '18px' : 2, lg: '18px' }} right={ 2 }>
-            <ClearButton onClick={ onClear }/>
-          </InputRightElement>
-        ) }
+        <InputRightElement top={{ base: 2, lg: isHomepage ? 3 : 2 }} right={ 2 }>
+          { rightElement }
+        </InputRightElement>
       </InputGroup>
     </chakra.form>
   );
diff --git a/ui/snippets/searchBar/SearchBarRecentKeywords.tsx b/ui/snippets/searchBar/SearchBarRecentKeywords.tsx
index 20b5ccbacc..fbc114cf2c 100644
--- a/ui/snippets/searchBar/SearchBarRecentKeywords.tsx
+++ b/ui/snippets/searchBar/SearchBarRecentKeywords.tsx
@@ -10,7 +10,7 @@ import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 type Props = {
   onClick: (kw: string) => void;
   onClear: () => void;
-}
+};
 
 const SearchBarSuggest = ({ onClick, onClear }: Props) => {
   const isMobile = useIsMobile();
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx
index 48f998ccd1..a3a01f0a50 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx
@@ -7,7 +7,9 @@ import { scroller, Element } from 'react-scroll';
 import type { SearchResultItem } from 'types/api/search';
 
 import type { ResourceError } from 'lib/api/resources';
+import { useSettingsContext } from 'lib/contexts/settings';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import * as regexp from 'lib/regexp';
 import useMarketplaceApps from 'ui/marketplace/useMarketplaceApps';
 import TextAd from 'ui/shared/ad/TextAd';
 import ContentLoader from 'ui/shared/ContentLoader';
@@ -15,6 +17,7 @@ import type { ApiCategory, ItemsCategoriesMap } from 'ui/shared/search/utils';
 import { getItemCategory, searchCategories } from 'ui/shared/search/utils';
 
 import SearchBarSuggestApp from './SearchBarSuggestApp';
+import SearchBarSuggestBlockCountdown from './SearchBarSuggestBlockCountdown';
 import SearchBarSuggestItem from './SearchBarSuggestItem';
 
 interface Props {
@@ -28,6 +31,7 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
   const isMobile = useIsMobile();
 
   const marketplaceApps = useMarketplaceApps(searchTerm);
+  const settingsContext = useSettingsContext();
 
   const categoriesRefs = React.useRef<Array<HTMLParagraphElement>>([]);
   const tabsRef = React.useRef<HTMLDivElement>(null);
@@ -69,7 +73,9 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
     if (!query.data && !marketplaceApps.displayedApps) {
       return {};
     }
+
     const map: Partial<ItemsCategoriesMap> = {};
+
     query.data?.forEach(item => {
       const cat = getItemCategory(item) as ApiCategory;
       if (cat) {
@@ -80,11 +86,23 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
         }
       }
     });
+
     if (marketplaceApps.displayedApps.length) {
       map.app = marketplaceApps.displayedApps;
     }
+
+    if (Object.keys(map).length > 0 && !map.block && regexp.BLOCK_HEIGHT.test(searchTerm)) {
+      map['block'] = [ {
+        type: 'block',
+        block_type: 'block',
+        block_number: searchTerm,
+        block_hash: '',
+        timestamp: undefined,
+      } ];
+    }
+
     return map;
-  }, [ query.data, marketplaceApps.displayedApps ]);
+  }, [ query.data, marketplaceApps.displayedApps, searchTerm ]);
 
   React.useEffect(() => {
     categoriesRefs.current = Array(Object.keys(itemsGroups).length).fill('').map((_, i) => categoriesRefs.current[i] || React.createRef());
@@ -114,6 +132,10 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
     const resultCategories = searchCategories.filter(cat => itemsGroups[cat.id]);
 
     if (resultCategories.length === 0) {
+      if (regexp.BLOCK_HEIGHT.test(searchTerm)) {
+        return <SearchBarSuggestBlockCountdown blockHeight={ searchTerm } onClick={ onItemClick }/>;
+      }
+
       return <Text>No results found.</Text>;
     }
 
@@ -123,7 +145,11 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
           <Box position="sticky" top="0" width="100%" background={ bgColor } py={ 5 } my={ -5 } ref={ tabsRef }>
             <Tabs variant="outline" colorScheme="gray" size="sm" index={ tabIndex }>
               <TabList columnGap={ 3 } rowGap={ 2 } flexWrap="wrap">
-                { resultCategories.map((cat, index) => <Tab key={ cat.id } onClick={ scrollToCategory(index) }>{ cat.title }</Tab>) }
+                { resultCategories.map((cat, index) => (
+                  <Tab key={ cat.id } onClick={ scrollToCategory(index) } { ...(tabIndex === index ? { 'data-selected': 'true' } : {}) }>
+                    { cat.title }
+                  </Tab>
+                )) }
               </TabList>
             </Tabs>
           </Box>
@@ -137,13 +163,22 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
                 variant="secondary"
                 mt={ 6 }
                 mb={ 3 }
-                ref={ (el: HTMLParagraphElement) => categoriesRefs.current[indx] = el }
+                ref={ (el: HTMLParagraphElement) => {
+                  categoriesRefs.current[indx] = el;
+                } }
               >
                 { cat.title }
               </Text>
-              { cat.id !== 'app' && itemsGroups[cat.id]?.map((item, index) =>
-                <SearchBarSuggestItem key={ index } data={ item } isMobile={ isMobile } searchTerm={ searchTerm } onClick={ onItemClick }/>,
-              ) }
+              { cat.id !== 'app' && itemsGroups[cat.id]?.map((item, index) => (
+                <SearchBarSuggestItem
+                  key={ index }
+                  data={ item }
+                  isMobile={ isMobile }
+                  searchTerm={ searchTerm }
+                  onClick={ onItemClick }
+                  addressFormat={ settingsContext?.addressFormat }
+                />
+              )) }
               { cat.id === 'app' && itemsGroups[cat.id]?.map((item, index) =>
                 <SearchBarSuggestApp key={ index } data={ item } isMobile={ isMobile } searchTerm={ searchTerm } onClick={ onItemClick }/>,
               ) }
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx
index 0a69e99525..079dae8011 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx
@@ -1,22 +1,20 @@
 import { chakra, Box, Text, Flex } from '@chakra-ui/react';
 import React from 'react';
 
+import type { ItemsProps } from './types';
 import type { SearchResultAddressOrContract } from 'types/api/search';
 
+import { toBech32Address } from 'lib/address/bech32';
 import dayjs from 'lib/date/dayjs';
 import highlightText from 'lib/highlightText';
-import { ADDRESS_REGEXP } from 'lib/validations/address';
+import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import { ADDRESS_REGEXP } from 'ui/shared/forms/validators/address';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
-interface Props {
-  data: SearchResultAddressOrContract;
-  isMobile: boolean | undefined;
-  searchTerm: string;
-}
-
-const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
+const SearchBarSuggestAddress = ({ data, isMobile, searchTerm, addressFormat }: ItemsProps<SearchResultAddressOrContract>) => {
   const shouldHighlightHash = ADDRESS_REGEXP.test(searchTerm);
+  const hash = data.filecoin_robust_address || (addressFormat === 'bech32' ? toBech32Address(data.address) : data.address);
 
   const icon = (
     <AddressEntity.Icon
@@ -25,8 +23,8 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
         is_contract: data.type === 'contract',
         name: '',
         is_verified: data.is_smart_contract_verified,
-        implementation_name: null,
         ens_domain_name: null,
+        implementations: null,
       }}
     />
   );
@@ -34,23 +32,24 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
   const expiresText = data.ens_info?.expiry_date ? ` (expires ${ dayjs(data.ens_info.expiry_date).fromNow() })` : '';
 
   const nameEl = addressName && (
-    <Text
-      variant="secondary"
-      overflow="hidden"
-      whiteSpace="nowrap"
-      textOverflow="ellipsis"
-    >
-      <chakra.span fontWeight={ 500 } dangerouslySetInnerHTML={{ __html: highlightText(addressName, searchTerm) }}/>
-      { data.ens_info &&
-        (
+    <Flex alignItems="center">
+      <Text
+        variant="secondary"
+        overflow="hidden"
+        whiteSpace="nowrap"
+        textOverflow="ellipsis"
+      >
+        <chakra.span fontWeight={ 500 } dangerouslySetInnerHTML={{ __html: highlightText(addressName, searchTerm) }}/>
+        { data.ens_info && (
           data.ens_info.names_count > 1 ?
             <span> ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` })</span> :
             <span>{ expiresText }</span>
-        )
-      }
-    </Text>
+        ) }
+      </Text>
+      { data.certified && <ContractCertifiedLabel boxSize={ 4 } iconSize={ 4 } ml={ 1 }/> }
+    </Flex>
   );
-  const addressEl = <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>;
+  const addressEl = <HashStringShortenDynamic hash={ hash } isTooltipDisabled/>;
 
   if (isMobile) {
     return (
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx
index 85554bc427..f945d372ca 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx
@@ -42,16 +42,16 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
             >
               <span dangerouslySetInnerHTML={{ __html: highlightText(data.title, searchTerm) }}/>
             </Text>
-            { data.external && <IconSvg name="arrows/north-east" boxSize={ 4 } verticalAlign="middle" flexShrink={ 0 }/> }
+            { data.external && <IconSvg name="link_external" color="icon_link_external" boxSize={ 3 } verticalAlign="middle" flexShrink={ 0 }/> }
           </Flex>
           <Text
             variant="secondary"
             overflow="hidden"
             textOverflow="ellipsis"
-            sx={{
+            style={{
+              WebkitLineClamp: 3,
+              WebkitBoxOrient: 'vertical',
               display: '-webkit-box',
-              '-webkit-box-orient': 'vertical',
-              '-webkit-line-clamp': '3',
             }}
           >
             { data.description }
@@ -81,7 +81,15 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
         >
           { data.description }
         </Text>
-        { data.external && <IconSvg name="arrows/north-east" boxSize={ 4 } verticalAlign="middle" color="text_secondary" flexShrink={ 0 }/> }
+        { data.external && (
+          <IconSvg
+            name="link_external"
+            color="icon_link_external"
+            boxSize={ 3 }
+            verticalAlign="middle"
+            flexShrink={ 0 }
+          />
+        ) }
       </Flex>
     );
   })();
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlob.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlob.tsx
new file mode 100644
index 0000000000..9b635350be
--- /dev/null
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlob.tsx
@@ -0,0 +1,21 @@
+import { chakra, Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ItemsProps } from './types';
+import type { SearchResultBlob } from 'types/api/search';
+
+import * as BlobEntity from 'ui/shared/entities/blob/BlobEntity';
+import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+
+const SearchBarSuggestBlob = ({ data }: ItemsProps<SearchResultBlob>) => {
+  return (
+    <Flex alignItems="center" minW={ 0 }>
+      <BlobEntity.Icon/>
+      <chakra.mark overflow="hidden" whiteSpace="nowrap" fontWeight={ 700 }>
+        <HashStringShortenDynamic hash={ data.blob_hash } isTooltipDisabled/>
+      </chakra.mark>
+    </Flex>
+  );
+};
+
+export default React.memo(SearchBarSuggestBlob);
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx
index 8bdc7239ac..3b9d8f2fee 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx
@@ -1,22 +1,19 @@
 import { Text, Flex, Grid, Tag } from '@chakra-ui/react';
 import React from 'react';
 
-import type { SearchResultBlock } from 'types/api/search';
+import type { ItemsProps } from './types';
+import type { SearchResultBlock } from 'types/client/search';
 
 import dayjs from 'lib/date/dayjs';
 import highlightText from 'lib/highlightText';
 import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
-interface Props {
-  data: SearchResultBlock;
-  isMobile: boolean | undefined;
-  searchTerm: string;
-}
-
-const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
+const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: ItemsProps<SearchResultBlock>) => {
   const icon = <BlockEntity.Icon/>;
   const shouldHighlightHash = data.block_hash.toLowerCase() === searchTerm.toLowerCase();
+  const isFutureBlock = data.timestamp === undefined;
+
   const blockNumber = (
     <Text
       fontWeight={ 700 }
@@ -27,7 +24,7 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
       <span dangerouslySetInnerHTML={{ __html: highlightText(data.block_number.toString(), searchTerm) }}/>
     </Text>
   );
-  const hash = (
+  const hash = !isFutureBlock ? (
     <Text
       variant="secondary"
       overflow="hidden"
@@ -37,8 +34,9 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
     >
       <HashStringShortenDynamic hash={ data.block_hash } isTooltipDisabled/>
     </Text>
-  );
-  const date = dayjs(data.timestamp).format('llll');
+  ) : null;
+  const date = !isFutureBlock ? dayjs(data.timestamp).format('llll') : undefined;
+  const futureBlockText = <Text variant="secondary">Learn estimated time for this block to be created.</Text>;
 
   if (isMobile) {
     return (
@@ -50,7 +48,7 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
           { data.block_type === 'uncle' && <Tag ml="auto">Uncle</Tag> }
         </Flex>
         { hash }
-        <Text variant="secondary">{ date }</Text>
+        { isFutureBlock ? futureBlockText : <Text variant="secondary">{ date }</Text> }
       </>
     );
   }
@@ -64,9 +62,9 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
       <Flex columnGap={ 3 } minW={ 0 } alignItems="center">
         { data.block_type === 'reorg' && <Tag flexShrink={ 0 }>Reorg</Tag> }
         { data.block_type === 'uncle' && <Tag flexShrink={ 0 }>Uncle</Tag> }
-        { hash }
+        { isFutureBlock ? futureBlockText : hash }
       </Flex>
-      <Text variant="secondary" textAlign="end">{ date }</Text>
+      { date && <Text variant="secondary" textAlign="end">{ date }</Text> }
     </Grid>
   );
 };
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlockCountdown.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlockCountdown.tsx
new file mode 100644
index 0000000000..222e55a150
--- /dev/null
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlockCountdown.tsx
@@ -0,0 +1,26 @@
+import { chakra, Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+interface Props {
+  blockHeight: string;
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+  className?: string;
+}
+
+const SearchBarSuggestBlockCountdown = ({ blockHeight, onClick, className }: Props) => {
+  return (
+    <Box className={ className }>
+      <span>Learn </span>
+      <LinkInternal href={ route({ pathname: '/block/countdown/[height]', query: { height: blockHeight } }) } onClick={ onClick }>
+        estimated time for this block
+      </LinkInternal>
+      <span> to be created.</span>
+    </Box>
+  );
+};
+
+export default React.memo(chakra(SearchBarSuggestBlockCountdown));
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestDomain.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestDomain.tsx
new file mode 100644
index 0000000000..421aecdce9
--- /dev/null
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestDomain.tsx
@@ -0,0 +1,79 @@
+import { Grid, Text, Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ItemsProps } from './types';
+import type { SearchResultDomain } from 'types/api/search';
+
+import { toBech32Address } from 'lib/address/bech32';
+import dayjs from 'lib/date/dayjs';
+import highlightText from 'lib/highlightText';
+import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+import IconSvg from 'ui/shared/IconSvg';
+
+const SearchBarSuggestDomain = ({ data, isMobile, searchTerm, addressFormat }: ItemsProps<SearchResultDomain>) => {
+  const icon = <IconSvg name="ENS_slim" boxSize={ 5 } color="gray.500"/>;
+  const hash = data.filecoin_robust_address || (addressFormat === 'bech32' ? toBech32Address(data.address) : data.address);
+
+  const name = (
+    <Text
+      fontWeight={ 700 }
+      overflow="hidden"
+      whiteSpace="nowrap"
+      textOverflow="ellipsis"
+    >
+      <span dangerouslySetInnerHTML={{ __html: highlightText(data.ens_info.name, searchTerm) }}/>
+    </Text>
+  );
+
+  const address = (
+    <Text
+      overflow="hidden"
+      whiteSpace="nowrap"
+      variant="secondary"
+    >
+      <HashStringShortenDynamic hash={ hash } isTooltipDisabled/>
+    </Text>
+  );
+
+  const isContractVerified = data.is_smart_contract_verified && <IconSvg name="status/success" boxSize="14px" color="green.500" flexShrink={ 0 }/>;
+
+  const expiresText = data.ens_info?.expiry_date ? ` expires ${ dayjs(data.ens_info.expiry_date).fromNow() }` : '';
+  const ensNamesCount = data?.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }`;
+  const additionalInfo = (
+    <Text variant="secondary" textAlign={ isMobile ? 'start' : 'end' }>
+      { data?.ens_info.names_count > 1 ? ensNamesCount : expiresText }
+    </Text>
+  );
+
+  if (isMobile) {
+    return (
+      <>
+        <Flex alignItems="center" overflow="hidden" gap={ 2 }>
+          { icon }
+          { name }
+        </Flex>
+        <Flex alignItems="center" overflow="hidden" gap={ 1 }>
+          { address }
+          { isContractVerified }
+        </Flex>
+        { additionalInfo }
+      </>
+    );
+  }
+
+  return (
+    <Grid alignItems="center" gridTemplateColumns="228px minmax(auto, max-content) auto" gap={ 2 }>
+      <Flex alignItems="center" gap={ 2 }>
+        { icon }
+        { name }
+      </Flex>
+      <Flex alignItems="center" overflow="hidden" gap={ 1 }>
+        { address }
+        { isContractVerified }
+      </Flex>
+      { additionalInfo }
+    </Grid>
+  );
+};
+
+export default React.memo(SearchBarSuggestDomain);
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItem.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItem.tsx
index e6dde430ab..9ca6c35fb8 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItem.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItem.tsx
@@ -2,12 +2,15 @@ import type { LinkProps as NextLinkProps } from 'next/link';
 import NextLink from 'next/link';
 import React from 'react';
 
-import type { SearchResultItem } from 'types/api/search';
+import type { SearchResultItem } from 'types/client/search';
+import type { AddressFormat } from 'types/views/address';
 
 import { route } from 'nextjs-routes';
 
 import SearchBarSuggestAddress from './SearchBarSuggestAddress';
+import SearchBarSuggestBlob from './SearchBarSuggestBlob';
 import SearchBarSuggestBlock from './SearchBarSuggestBlock';
+import SearchBarSuggestDomain from './SearchBarSuggestDomain';
 import SearchBarSuggestItemLink from './SearchBarSuggestItemLink';
 import SearchBarSuggestLabel from './SearchBarSuggestLabel';
 import SearchBarSuggestToken from './SearchBarSuggestToken';
@@ -19,9 +22,10 @@ interface Props {
   isMobile: boolean | undefined;
   searchTerm: string;
   onClick: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+  addressFormat?: AddressFormat;
 }
 
-const SearchBarSuggestItem = ({ data, isMobile, searchTerm, onClick }: Props) => {
+const SearchBarSuggestItem = ({ data, isMobile, searchTerm, onClick, addressFormat }: Props) => {
 
   const url = (() => {
     switch (data.type) {
@@ -34,29 +38,60 @@ const SearchBarSuggestItem = ({ data, isMobile, searchTerm, onClick }: Props) =>
         return route({ pathname: '/address/[hash]', query: { hash: data.address } });
       }
       case 'transaction': {
-        return route({ pathname: '/tx/[hash]', query: { hash: data.tx_hash } });
+        return route({ pathname: '/tx/[hash]', query: { hash: data.transaction_hash } });
       }
       case 'block': {
+        const isFutureBlock = data.timestamp === undefined;
+        if (isFutureBlock) {
+          return route({ pathname: '/block/countdown/[height]', query: { height: String(data.block_number) } });
+        }
+
         return route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.block_hash) } });
       }
       case 'user_operation': {
         return route({ pathname: '/op/[hash]', query: { hash: data.user_operation_hash } });
       }
+      case 'blob': {
+        return route({ pathname: '/blobs/[hash]', query: { hash: data.blob_hash } });
+      }
+      case 'ens_domain': {
+        return route({ pathname: '/address/[hash]', query: { hash: data.address } });
+      }
     }
   })();
 
   const content = (() => {
     switch (data.type) {
       case 'token': {
-        return <SearchBarSuggestToken data={ data } searchTerm={ searchTerm } isMobile={ isMobile }/>;
+        return (
+          <SearchBarSuggestToken
+            data={ data }
+            searchTerm={ searchTerm }
+            isMobile={ isMobile }
+            addressFormat={ addressFormat }
+          />
+        );
       }
       case 'contract':
       case 'address': {
-        return <SearchBarSuggestAddress data={ data } searchTerm={ searchTerm } isMobile={ isMobile }/>;
+        return (
+          <SearchBarSuggestAddress
+            data={ data }
+            searchTerm={ searchTerm }
+            isMobile={ isMobile }
+            addressFormat={ addressFormat }
+          />
+        );
       }
       case 'label': {
-        return <SearchBarSuggestLabel data={ data } searchTerm={ searchTerm } isMobile={ isMobile }/>;
-
+        return (
+          <SearchBarSuggestLabel
+            data={ data }
+            searchTerm={ searchTerm }
+            isMobile={ isMobile }
+            addressFormat={ addressFormat }
+          />
+        );
       }
       case 'block': {
         return <SearchBarSuggestBlock data={ data } searchTerm={ searchTerm } isMobile={ isMobile }/>;
@@ -67,6 +102,12 @@ const SearchBarSuggestItem = ({ data, isMobile, searchTerm, onClick }: Props) =>
       case 'user_operation': {
         return <SearchBarSuggestUserOp data={ data } searchTerm={ searchTerm } isMobile={ isMobile }/>;
       }
+      case 'blob': {
+        return <SearchBarSuggestBlob data={ data } searchTerm={ searchTerm }/>;
+      }
+      case 'ens_domain': {
+        return <SearchBarSuggestDomain data={ data } searchTerm={ searchTerm } isMobile={ isMobile } addressFormat={ addressFormat }/>;
+      }
     }
   })();
 
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItemLink.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItemLink.tsx
index 63f90402ea..092351ce10 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItemLink.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItemLink.tsx
@@ -6,7 +6,7 @@ type Props = {
   href?: string;
   target?: string;
   children: React.ReactNode;
-}
+};
 
 const SearchBarSuggestItemLink = ({ onClick, href, target, children }: Props) => {
   return (
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestLabel.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestLabel.tsx
index 1e1ffcadb9..20e1a58a94 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestLabel.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestLabel.tsx
@@ -1,20 +1,17 @@
 import { Grid, Text, Flex } from '@chakra-ui/react';
 import React from 'react';
 
+import type { ItemsProps } from './types';
 import type { SearchResultLabel } from 'types/api/search';
 
+import { toBech32Address } from 'lib/address/bech32';
 import highlightText from 'lib/highlightText';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import IconSvg from 'ui/shared/IconSvg';
 
-interface Props {
-  data: SearchResultLabel;
-  isMobile: boolean | undefined;
-  searchTerm: string;
-}
-
-const SearchBarSuggestLabel = ({ data, isMobile, searchTerm }: Props) => {
+const SearchBarSuggestLabel = ({ data, isMobile, searchTerm, addressFormat }: ItemsProps<SearchResultLabel>) => {
   const icon = <IconSvg name="publictags_slim" boxSize={ 5 } color="gray.500"/>;
+  const hash = data.filecoin_robust_address || (addressFormat === 'bech32' ? toBech32Address(data.address) : data.address);
 
   const name = (
     <Text
@@ -33,7 +30,7 @@ const SearchBarSuggestLabel = ({ data, isMobile, searchTerm }: Props) => {
       whiteSpace="nowrap"
       variant="secondary"
     >
-      <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
+      <HashStringShortenDynamic hash={ hash } isTooltipDisabled/>
     </Text>
   );
 
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx
index 7635e40ddd..a7c2142d0c 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx
@@ -1,22 +1,22 @@
 import { Grid, Text, Flex } from '@chakra-ui/react';
 import React from 'react';
 
+import type { ItemsProps } from './types';
 import type { SearchResultToken } from 'types/api/search';
 
+import { toBech32Address } from 'lib/address/bech32';
 import highlightText from 'lib/highlightText';
+import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import IconSvg from 'ui/shared/IconSvg';
 
-interface Props {
-  data: SearchResultToken;
-  isMobile: boolean | undefined;
-  searchTerm: string;
-}
-
-const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
+const SearchBarSuggestToken = ({ data, isMobile, searchTerm, addressFormat }: ItemsProps<SearchResultToken>) => {
   const icon = <TokenEntity.Icon token={{ ...data, type: data.token_type }}/>;
-  const verifiedIcon = <IconSvg name="verified_token" boxSize={ 4 } color="green.500" ml={ 1 }/>;
+  const verifiedIcon = <IconSvg name="certified" boxSize={ 4 } color="green.500" ml={ 1 }/>;
+  const certifiedIcon = <ContractCertifiedLabel iconSize={ 4 } boxSize={ 4 } ml={ 1 }/>;
+  const hash = data.filecoin_robust_address || (addressFormat === 'bech32' ? toBech32Address(data.address) : data.address);
+
   const name = (
     <Text
       fontWeight={ 700 }
@@ -30,7 +30,7 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
 
   const address = (
     <Text variant="secondary" whiteSpace="nowrap" overflow="hidden">
-      <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
+      <HashStringShortenDynamic hash={ hash } isTooltipDisabled/>
     </Text>
   );
 
@@ -51,7 +51,8 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
         <Flex alignItems="center">
           { icon }
           { name }
-          { data.is_verified_via_admin_panel && verifiedIcon }
+          { data.certified && certifiedIcon }
+          { data.is_verified_via_admin_panel && !data.certified && verifiedIcon }
         </Flex>
         <Grid templateColumns={ templateCols } alignItems="center" gap={ 2 }>
           <Flex alignItems="center" overflow="hidden">
@@ -69,7 +70,8 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
       <Flex alignItems="center">
         { icon }
         { name }
-        { data.is_verified_via_admin_panel && verifiedIcon }
+        { data.certified && certifiedIcon }
+        { data.is_verified_via_admin_panel && !data.certified && verifiedIcon }
       </Flex>
       <Flex alignItems="center" overflow="hidden">
         { address }
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTx.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTx.tsx
index 3c9c74375f..4488d9da34 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTx.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTx.tsx
@@ -1,23 +1,18 @@
 import { chakra, Text, Flex } from '@chakra-ui/react';
 import React from 'react';
 
+import type { ItemsProps } from './types';
 import type { SearchResultTx } from 'types/api/search';
 
 import dayjs from 'lib/date/dayjs';
 import * as TxEntity from 'ui/shared/entities/tx/TxEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
-interface Props {
-  data: SearchResultTx;
-  isMobile: boolean | undefined;
-  searchTerm: string;
-}
-
-const SearchBarSuggestTx = ({ data, isMobile }: Props) => {
+const SearchBarSuggestTx = ({ data, isMobile }: ItemsProps<SearchResultTx>) => {
   const icon = <TxEntity.Icon/>;
   const hash = (
     <chakra.mark overflow="hidden" whiteSpace="nowrap" fontWeight={ 700 }>
-      <HashStringShortenDynamic hash={ data.tx_hash } isTooltipDisabled/>
+      <HashStringShortenDynamic hash={ data.transaction_hash } isTooltipDisabled/>
     </chakra.mark>
   );
   const date = dayjs(data.timestamp).format('llll');
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestUserOp.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestUserOp.tsx
index 21e0701822..c65e43de07 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestUserOp.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestUserOp.tsx
@@ -1,19 +1,14 @@
 import { chakra, Text, Flex } from '@chakra-ui/react';
 import React from 'react';
 
+import type { ItemsProps } from './types';
 import type { SearchResultUserOp } from 'types/api/search';
 
 import dayjs from 'lib/date/dayjs';
 import * as UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
-interface Props {
-  data: SearchResultUserOp;
-  isMobile: boolean | undefined;
-  searchTerm: string;
-}
-
-const SearchBarSuggestTx = ({ data, isMobile }: Props) => {
+const SearchBarSuggestUserOp = ({ data, isMobile }: ItemsProps<SearchResultUserOp>) => {
   const icon = <UserOpEntity.Icon/>;
   const hash = (
     <chakra.mark overflow="hidden" whiteSpace="nowrap" fontWeight={ 700 }>
@@ -45,4 +40,4 @@ const SearchBarSuggestTx = ({ data, isMobile }: Props) => {
   );
 };
 
-export default React.memo(SearchBarSuggestTx);
+export default React.memo(SearchBarSuggestUserOp);
diff --git a/ui/snippets/searchBar/SearchBarSuggest/types.ts b/ui/snippets/searchBar/SearchBarSuggest/types.ts
new file mode 100644
index 0000000000..f69f857e76
--- /dev/null
+++ b/ui/snippets/searchBar/SearchBarSuggest/types.ts
@@ -0,0 +1,8 @@
+import type { AddressFormat } from 'types/views/address';
+
+export interface ItemsProps<Data> {
+  data: Data;
+  searchTerm: string;
+  isMobile?: boolean | undefined;
+  addressFormat?: AddressFormat;
+}
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-contract-name-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-contract-name-mobile-dark-mode-1.png
index 6b1c79a62f..ac86dd52f9 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-contract-name-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-contract-name-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-name-homepage-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-name-homepage-dark-mode-1.png
index a9ee87486e..ccc4a6bb7b 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-name-homepage-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-name-homepage-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-tag-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-tag-mobile-dark-mode-1.png
index 252b4efc8d..0a9c9b4b5b 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-tag-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-tag-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-token-name-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-token-name-mobile-dark-mode-1.png
index 05f4094a28..829ce15e0c 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-token-name-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-token-name-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_block-countdown-no-results-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_block-countdown-no-results-mobile-1.png
new file mode 100644
index 0000000000..7bfc9a83ca
Binary files /dev/null and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_block-countdown-no-results-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_block-countdown-with-results-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_block-countdown-with-results-mobile-1.png
new file mode 100644
index 0000000000..80b83d586b
Binary files /dev/null and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_block-countdown-with-results-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_recent-keywords-suggest-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_recent-keywords-suggest-mobile-1.png
index 9cfc914b85..97c4373ec5 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_recent-keywords-suggest-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_recent-keywords-suggest-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_scroll-suggest-to-category-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_scroll-suggest-to-category-1.png
index 9017b6762c..ca47f6fdd9 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_scroll-suggest-to-category-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_scroll-suggest-to-category-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-address-hash-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-address-hash-mobile-1.png
index 5943a7308a..95b5ab3c97 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-address-hash-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-address-hash-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-blob-hash-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-blob-hash-mobile-1.png
new file mode 100644
index 0000000000..e847992459
Binary files /dev/null and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-blob-hash-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-block-hash-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-block-hash-mobile-1.png
index 4814677c87..0a14d29e82 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-block-hash-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-block-hash-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-block-number-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-block-number-mobile-1.png
index dae3d9949c..23a039a1bc 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-block-number-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-block-number-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-contract-name-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-contract-name-mobile-dark-mode-1.png
index 89a811c836..70b94b6670 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-contract-name-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-contract-name-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-domain-name-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-domain-name-mobile-1.png
new file mode 100644
index 0000000000..0b6f02c948
Binary files /dev/null and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-domain-name-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-name-homepage-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-name-homepage-dark-mode-1.png
index 548c9271b4..f2a424d426 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-name-homepage-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-name-homepage-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-tag-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-tag-mobile-dark-mode-1.png
index 486edadb4f..d5686eae8a 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-tag-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-tag-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-token-name-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-token-name-mobile-dark-mode-1.png
index 2bc3b994c7..84720bafe2 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-token-name-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-token-name-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-tx-hash-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-tx-hash-mobile-1.png
index b14c0278b9..97279cedc1 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-tx-hash-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-tx-hash-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-user-op-hash-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-user-op-hash-mobile-1.png
index 73f86b73a5..af37edba9f 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-user-op-hash-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-user-op-hash-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-with-view-all-link-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-with-view-all-link-1.png
index bcee42809f..8480cc5b75 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-with-view-all-link-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-with-view-all-link-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_with-apps-default-view-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_with-apps-default-view-mobile-1.png
index c35b3abb2d..5c5e3953d1 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_with-apps-default-view-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_with-apps-default-view-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_block-countdown-no-results-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_block-countdown-no-results-mobile-1.png
new file mode 100644
index 0000000000..72f6c6e53d
Binary files /dev/null and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_block-countdown-no-results-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_block-countdown-with-results-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_block-countdown-with-results-mobile-1.png
new file mode 100644
index 0000000000..aeb2a83898
Binary files /dev/null and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_block-countdown-with-results-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_recent-keywords-suggest-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_recent-keywords-suggest-mobile-1.png
index a7c2b5af44..50d3e71595 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_recent-keywords-suggest-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_recent-keywords-suggest-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-address-hash-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-address-hash-mobile-1.png
index 708f222e24..5c396068c9 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-address-hash-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-address-hash-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-blob-hash-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-blob-hash-mobile-1.png
new file mode 100644
index 0000000000..74264eae54
Binary files /dev/null and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-blob-hash-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-block-hash-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-block-hash-mobile-1.png
index 40bcacf30b..3f12ad8b95 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-block-hash-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-block-hash-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-block-number-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-block-number-mobile-1.png
index e0fbd6a953..5458fadb0e 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-block-number-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-block-number-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-contract-name-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-contract-name-mobile-dark-mode-1.png
index 4b21e36376..5188697778 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-contract-name-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-contract-name-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-domain-name-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-domain-name-mobile-1.png
new file mode 100644
index 0000000000..8d393048eb
Binary files /dev/null and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-domain-name-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-tag-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-tag-mobile-dark-mode-1.png
index ac05354a7c..979c77e1f9 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-tag-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-tag-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-token-name-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-token-name-mobile-dark-mode-1.png
index 8fe800b4e2..d174b5b691 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-token-name-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-token-name-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-tx-hash-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-tx-hash-mobile-1.png
index 583e0ca7dd..f531de068a 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-tx-hash-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-tx-hash-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-user-op-hash-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-user-op-hash-mobile-1.png
index 065edb5197..8c205f6c96 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-user-op-hash-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-user-op-hash-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_with-apps-default-view-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_with-apps-default-view-mobile-1.png
index 8aa04689dc..a78eeb14b1 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_with-apps-default-view-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_with-apps-default-view-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_dark-color-mode_input-on-home-page-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_dark-color-mode_input-on-home-page-mobile-dark-mode-1.png
index 97c623ea75..47fded2901 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_dark-color-mode_input-on-home-page-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_dark-color-mode_input-on-home-page-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_dark-color-mode_input-on-regular-page-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_dark-color-mode_input-on-regular-page-mobile-dark-mode-1.png
index 4bda13963c..9b6b5fa084 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_dark-color-mode_input-on-regular-page-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_dark-color-mode_input-on-regular-page-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_default_input-on-home-page-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_default_input-on-home-page-mobile-dark-mode-1.png
index 57a0d913fb..1e4666ce8b 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_default_input-on-home-page-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_default_input-on-home-page-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_default_input-on-regular-page-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_default_input-on-regular-page-mobile-dark-mode-1.png
index 71553c6c9a..a3d59ba6a8 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_default_input-on-regular-page-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_default_input-on-regular-page-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_mobile_input-on-home-page-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_mobile_input-on-home-page-mobile-dark-mode-1.png
index 6665d682f5..642882a174 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_mobile_input-on-home-page-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_mobile_input-on-home-page-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_mobile_input-on-regular-page-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_mobile_input-on-regular-page-mobile-dark-mode-1.png
index 31668d1a3a..0d8f38662c 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_mobile_input-on-regular-page-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_mobile_input-on-regular-page-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/useQuickSearchQuery.tsx b/ui/snippets/searchBar/useQuickSearchQuery.tsx
index e39953b9ff..8ef224ff85 100644
--- a/ui/snippets/searchBar/useQuickSearchQuery.tsx
+++ b/ui/snippets/searchBar/useQuickSearchQuery.tsx
@@ -1,19 +1,16 @@
-import { useRouter } from 'next/router';
 import React from 'react';
 
+import { isBech32Address, fromBech32Address } from 'lib/address/bech32';
 import useApiQuery from 'lib/api/useApiQuery';
 import useDebounce from 'lib/hooks/useDebounce';
 
 export default function useQuickSearchQuery() {
-  const router = useRouter();
-
   const [ searchTerm, setSearchTerm ] = React.useState('');
 
   const debouncedSearchTerm = useDebounce(searchTerm, 300);
-  const pathname = router.pathname;
 
   const query = useApiQuery('quick_search', {
-    queryParams: { q: debouncedSearchTerm },
+    queryParams: { q: isBech32Address(debouncedSearchTerm) ? fromBech32Address(debouncedSearchTerm) : debouncedSearchTerm },
     queryOptions: { enabled: debouncedSearchTerm.trim().length > 0 },
   });
 
@@ -30,6 +27,5 @@ export default function useQuickSearchQuery() {
     handleSearchTermChange: setSearchTerm,
     query,
     redirectCheckQuery,
-    pathname,
-  }), [ debouncedSearchTerm, pathname, query, redirectCheckQuery, searchTerm ]);
+  }), [ debouncedSearchTerm, query, redirectCheckQuery, searchTerm ]);
 }
diff --git a/ui/snippets/searchBar/useSearchQuery.tsx b/ui/snippets/searchBar/useSearchQuery.tsx
index 57cca96faa..5f87fabf15 100644
--- a/ui/snippets/searchBar/useSearchQuery.tsx
+++ b/ui/snippets/searchBar/useSearchQuery.tsx
@@ -1,6 +1,7 @@
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import { fromBech32Address, isBech32Address } from 'lib/address/bech32';
 import useApiQuery from 'lib/api/useApiQuery';
 import useDebounce from 'lib/hooks/useDebounce';
 import useUpdateValueEffect from 'lib/hooks/useUpdateValueEffect';
@@ -9,7 +10,7 @@ import { SEARCH_RESULT_ITEM, SEARCH_RESULT_NEXT_PAGE_PARAMS } from 'stubs/search
 import { generateListStub } from 'stubs/utils';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
-export default function useSearchQuery() {
+export default function useSearchQuery(withRedirectCheck?: boolean) {
   const router = useRouter();
   const q = React.useRef(getQueryParamString(router.query.q));
   const initialValue = q.current;
@@ -21,7 +22,7 @@ export default function useSearchQuery() {
 
   const query = useQueryWithPages({
     resourceName: 'search',
-    filters: { q: debouncedSearchTerm },
+    filters: { q: isBech32Address(debouncedSearchTerm) ? fromBech32Address(debouncedSearchTerm) : debouncedSearchTerm },
     options: {
       enabled: debouncedSearchTerm.trim().length > 0,
       placeholderData: generateListStub<'search'>(SEARCH_RESULT_ITEM, 50, { next_page_params: SEARCH_RESULT_NEXT_PAGE_PARAMS }),
@@ -31,7 +32,7 @@ export default function useSearchQuery() {
   const redirectCheckQuery = useApiQuery('search_check_redirect', {
     // on search result page we check redirect only once on mount
     queryParams: { q: q.current },
-    queryOptions: { enabled: Boolean(q.current) },
+    queryOptions: { enabled: Boolean(q.current) && withRedirectCheck },
   });
 
   useUpdateValueEffect(() => {
diff --git a/ui/snippets/topBar/ColorModeSwitchSample.tsx b/ui/snippets/topBar/ColorModeSwitchSample.tsx
deleted file mode 100644
index a1a8a5b4e4..0000000000
--- a/ui/snippets/topBar/ColorModeSwitchSample.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import {
-  Box,
-  useColorModeValue,
-  useToken,
-} from '@chakra-ui/react';
-import React from 'react';
-
-import type { ColorThemeColor } from './utils';
-
-interface Props extends ColorThemeColor {
-  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-  isActive: boolean;
-}
-
-const ColorModeSwitchSample = ({ hex, sampleBg, onClick, isActive }: Props) => {
-  const bgColor = useColorModeValue('white', 'gray.900');
-  const activeBgColor = useColorModeValue('blue.50', 'blackAlpha.800');
-
-  const activeBorderColor = useToken('colors', useColorModeValue('blackAlpha.800', 'gray.50'));
-  const hoverBorderColor = useToken('colors', 'link_hovered');
-
-  return (
-    <Box
-      bg={ sampleBg }
-      boxSize={ 5 }
-      borderRadius="full"
-      borderWidth="1px"
-      borderColor={ isActive ? activeBgColor : bgColor }
-      position="relative"
-      _before={{
-        position: 'absolute',
-        display: 'block',
-        content: '""',
-        top: '-3px',
-        left: '-3px',
-        width: 'calc(100% + 2px)',
-        height: 'calc(100% + 2px)',
-        borderStyle: 'solid',
-        borderRadius: 'full',
-        borderWidth: '2px',
-        borderColor: isActive ? activeBorderColor : 'transparent',
-      }}
-      _hover={{
-        _before: {
-          borderColor: isActive ? activeBorderColor : hoverBorderColor,
-        },
-      }}
-      data-hex={ hex }
-      onClick={ onClick }
-    />
-  );
-};
-
-export default ColorModeSwitchSample;
diff --git a/ui/snippets/topBar/DeFiDropdown.tsx b/ui/snippets/topBar/DeFiDropdown.tsx
new file mode 100644
index 0000000000..01e4fff269
--- /dev/null
+++ b/ui/snippets/topBar/DeFiDropdown.tsx
@@ -0,0 +1,85 @@
+import { Button, Box, Flex, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure, chakra } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import getPageType from 'lib/mixpanel/getPageType';
+import * as mixpanel from 'lib/mixpanel/index';
+import Popover from 'ui/shared/chakra/Popover';
+import IconSvg from 'ui/shared/IconSvg';
+
+import DeFiDropdownItem from './DeFiDropdownItem';
+
+const feature = config.features.deFiDropdown;
+
+const DeFiDropdown = () => {
+  const router = useRouter();
+  const source = getPageType(router.pathname);
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  const handleClick = React.useCallback((content: string) => {
+    mixpanel.logEvent(mixpanel.EventTypes.BUTTON_CLICK, { Content: content, Source: source });
+  }, [ source ]);
+
+  if (!feature.isEnabled) {
+    return null;
+  }
+
+  const buttonStyles = {
+    variant: 'solid',
+    size: 'xs',
+    borderRadius: 'sm',
+    height: 5,
+    px: 1.5,
+    fontWeight: '500',
+  };
+
+  const items = feature.items.map((item) => ({
+    ...item,
+    onClick: () => handleClick(item.text),
+  }));
+
+  return items.length > 1 ? (
+    <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
+      <PopoverTrigger>
+        <Button
+          onClick={ onToggle }
+          isActive={ isOpen }
+          { ...buttonStyles }
+        >
+          <chakra.span display={{ base: 'none', lg: 'inline' }} mr={ 1 }>
+            Blockscout
+          </chakra.span>
+          DeFi
+          <IconSvg name="arrows/east-mini" boxSize={ 4 } ml={ 1 } transform="rotate(-90deg)"/>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent w="auto">
+        <PopoverBody >
+          <Flex flexDirection="column" gap={ 1 }>
+            { items.map((item, index) => (
+              <DeFiDropdownItem key={ index } item={ item }/>
+            )) }
+          </Flex>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  ) : (
+    <Button
+      as="a"
+      href={ items[0].dappId ? route({ pathname: '/apps/[id]', query: { id: items[0].dappId, action: 'connect' } }) : items[0].url }
+      target={ items[0].dappId ? '_self' : '_blank' }
+      onClick={ items[0].onClick }
+      { ...buttonStyles }
+    >
+      <IconSvg name={ items[0].icon } boxSize={ 3 } mr={{ base: 0, sm: 1 }}/>
+      <Box display={{ base: 'none', sm: 'inline' }}>
+        { items[0].text }
+      </Box>
+    </Button>
+  );
+};
+
+export default chakra(React.memo(DeFiDropdown));
diff --git a/ui/snippets/topBar/DeFiDropdownItem.tsx b/ui/snippets/topBar/DeFiDropdownItem.tsx
new file mode 100644
index 0000000000..4a4b12112e
--- /dev/null
+++ b/ui/snippets/topBar/DeFiDropdownItem.tsx
@@ -0,0 +1,53 @@
+import { Text, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import type { DeFiDropdownItem as TDeFiDropdownItem } from 'types/client/deFiDropdown';
+
+import { route } from 'nextjs-routes';
+
+import IconSvg from 'ui/shared/IconSvg';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+type Props = {
+  item: TDeFiDropdownItem & { onClick: () => void };
+};
+
+const DeFiDropdownItem = ({ item }: Props) => {
+  const styles = {
+    width: '100%',
+    height: '34px',
+    display: 'inline-flex',
+    alignItems: 'center',
+    color: useColorModeValue('blackAlpha.800', 'gray.400'),
+    _hover: {
+      textDecoration: 'none',
+      '& *': {
+        color: 'link_hovered',
+      },
+    },
+  };
+
+  const content = (
+    <>
+      <IconSvg name={ item.icon } boxSize={ 5 } mr={ 2 }/>
+      <Text as="span" fontSize="sm">{ item.text }</Text>
+    </>
+  );
+
+  return item.dappId ? (
+    <LinkInternal
+      href={ route({ pathname: '/apps/[id]', query: { id: item.dappId, action: 'connect' } }) }
+      target="_self"
+      { ...styles }
+    >
+      { content }
+    </LinkInternal>
+  ) : (
+    <LinkExternal href={ item.url } { ...styles }>
+      { content }
+    </LinkExternal>
+  );
+};
+
+export default React.memo(DeFiDropdownItem);
diff --git a/ui/snippets/topBar/GetGasButton.tsx b/ui/snippets/topBar/GetGasButton.tsx
new file mode 100644
index 0000000000..8025a29ae4
--- /dev/null
+++ b/ui/snippets/topBar/GetGasButton.tsx
@@ -0,0 +1,64 @@
+import { Image, Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import * as mixpanel from 'lib/mixpanel/index';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+const getGasFeature = config.features.getGasButton;
+
+const GetGasButton = () => {
+  const isMobile = useIsMobile(false);
+
+  const onGetGasClick = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.BUTTON_CLICK, { Content: 'Get gas', Source: 'address' });
+  }, []);
+
+  if (getGasFeature.isEnabled && !isMobile) {
+    try {
+      const dappId = getGasFeature.dappId;
+      const urlObj = new URL(getGasFeature.url);
+
+      urlObj.searchParams.append('utm_source', 'blockscout');
+      urlObj.searchParams.append('utm_medium', 'address');
+
+      const url = urlObj.toString();
+      const isInternal = typeof dappId === 'string';
+
+      const Link = isInternal ? LinkInternal : LinkExternal;
+      const href = isInternal ? route({ pathname: '/apps/[id]', query: { id: dappId, url } }) : url;
+
+      return (
+        <>
+          <Box h="1px" w="8px" bg="divider" mx={ 1 }/>
+          <Link
+            href={ href }
+            display="flex"
+            alignItems="center"
+            fontSize="xs"
+            lineHeight={ 5 }
+            onClick={ onGetGasClick }
+          >
+            { getGasFeature.logoUrl && (
+              <Image
+                src={ getGasFeature.logoUrl }
+                alt={ getGasFeature.name }
+                boxSize="14px"
+                mr={ 1 }
+              />
+            ) }
+            { getGasFeature.name }
+          </Link>
+        </>
+      );
+    } catch (error) {}
+  }
+
+  return null;
+};
+
+export default GetGasButton;
diff --git a/ui/snippets/topBar/NetworkMenu.tsx b/ui/snippets/topBar/NetworkMenu.tsx
new file mode 100644
index 0000000000..c56191457c
--- /dev/null
+++ b/ui/snippets/topBar/NetworkMenu.tsx
@@ -0,0 +1,31 @@
+import { IconButton, PopoverTrigger } from '@chakra-ui/react';
+import React from 'react';
+
+import Popover from 'ui/shared/chakra/Popover';
+import IconSvg from 'ui/shared/IconSvg';
+import NetworkMenuContentDesktop from 'ui/snippets/networkMenu/NetworkMenuContentDesktop';
+import useNetworkMenu from 'ui/snippets/networkMenu/useNetworkMenu';
+
+const NetworkMenu = () => {
+  const menu = useNetworkMenu();
+
+  return (
+    <Popover placement="bottom-start" trigger="click" isLazy isOpen={ menu.isOpen } onClose={ menu.onClose }>
+      <PopoverTrigger>
+        <IconButton
+          variant="simple"
+          colorScheme="blue"
+          aria-label="Network menu"
+          icon={ <IconSvg name="networks" boxSize={ 4 }/> }
+          p="1px"
+          boxSize={ 4 }
+          borderRadius="none"
+          onClick={ menu.onToggle }
+        />
+      </PopoverTrigger>
+      <NetworkMenuContentDesktop items={ menu.data } tabs={ menu.availableTabs }/>
+    </Popover>
+  );
+};
+
+export default React.memo(NetworkMenu);
diff --git a/ui/snippets/topBar/TopBar.pw.tsx b/ui/snippets/topBar/TopBar.pw.tsx
index 1db858e23d..ac33468115 100644
--- a/ui/snippets/topBar/TopBar.pw.tsx
+++ b/ui/snippets/topBar/TopBar.pw.tsx
@@ -1,27 +1,79 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import { FEATURED_NETWORKS } from 'mocks/config/network';
 import * as statsMock from 'mocks/stats/index';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import TopBar from './TopBar';
 
-test('default view +@dark-mode +@mobile', async({ mount, page }) => {
-  await page.route(buildApiUrl('homepage_stats'), (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
+test.beforeEach(async({ mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS', '[{"text":"Swap","icon":"swap","dappId":"uniswap"}]' ],
+    [ 'NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL', 'DUCK' ],
+  ]);
+});
 
-  const component = await mount(
-    <TestApp>
-      <TopBar/>
-    </TestApp>,
-  );
+test('default view +@dark-mode +@mobile', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse('stats', statsMock.base);
+  const component = await render(<TopBar/>);
 
-  await component.getByText(/\$1\.01/).hover();
+  await component.getByText(/\$1\.39/).click();
+  await expect(page.getByText(/last update/i)).toBeVisible();
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 220 } });
 
-  await component.getByLabel('color mode switch').click();
+  await component.getByLabel('User settings').click();
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 400 } });
+});
+
+test('with secondary coin price +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('stats', statsMock.withSecondaryCoin);
+  const component = await render(<TopBar/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('with horizontal nav bar layout', async({ render, mockApiResponse, mockEnvs, mockConfigResponse, mockAssetResponse, page }) => {
+  const FEATURED_NETWORKS_URL = 'https://localhost:3000/featured-networks.json';
+
+  await mockApiResponse('stats', statsMock.base);
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_NAVIGATION_LAYOUT', 'horizontal' ],
+    [ 'NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL ],
+  ]);
+  await mockConfigResponse('NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL, FEATURED_NETWORKS);
+  await mockAssetResponse('https://localhost:3000/my-logo.png', './playwright/mocks/image_s.jpg');
+
+  const component = await render(<TopBar/>);
+  await component.getByLabel('Network menu').click();
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 500 } });
+});
+
+test('with DeFi dropdown +@dark-mode +@mobile', async({ render, page, mockApiResponse, mockEnvs }) => {
+  await mockEnvs([
+    [
+      'NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS',
+      '[{"text":"Swap","icon":"swap","dappId":"uniswap"},{"text":"Payment link","icon":"payment_link","url":"https://example.com"}]',
+    ],
+  ]);
+  await mockApiResponse('stats', statsMock.base);
+
+  const component = await render(<TopBar/>);
+
+  await component.getByText(/DeFi/i).click();
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 220 } });
 });
+
+test('with Get gas button', async({ render, mockApiResponse, mockEnvs, mockAssetResponse }) => {
+  const ICON_URL = 'https://localhost:3000/my-icon.png';
+
+  await mockEnvs([
+    [
+      'NEXT_PUBLIC_GAS_REFUEL_PROVIDER_CONFIG',
+      `{"name": "Need gas?", "dapp_id": "duck", "url_template": "https://duck.url/{chainId}", "logo": "${ ICON_URL }"}`,
+    ],
+  ]);
+  await mockApiResponse('stats', statsMock.base);
+  await mockAssetResponse(ICON_URL, './playwright/mocks/image_svg.svg');
+
+  const component = await render(<TopBar/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/snippets/topBar/TopBar.tsx b/ui/snippets/topBar/TopBar.tsx
index 23976769a5..80e261dbef 100644
--- a/ui/snippets/topBar/TopBar.tsx
+++ b/ui/snippets/topBar/TopBar.tsx
@@ -1,22 +1,45 @@
-import { Flex, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Divider, useColorModeValue, Box } from '@chakra-ui/react';
 import React from 'react';
 
-import ColorModeSwitch from './ColorModeSwitch';
+import config from 'configs/app';
+import { CONTENT_MAX_WIDTH } from 'ui/shared/layout/utils';
+
+import DeFiDropdown from './DeFiDropdown';
+import NetworkMenu from './NetworkMenu';
+import Settings from './settings/Settings';
 import TopBarStats from './TopBarStats';
 
 const TopBar = () => {
   const bgColor = useColorModeValue('gray.50', 'whiteAlpha.100');
 
   return (
-    <Flex
-      py={ 2 }
-      px={ 6 }
-      bgColor={ bgColor }
-      justifyContent="space-between"
-    >
-      <TopBarStats/>
-      <ColorModeSwitch/>
-    </Flex>
+    <Box bgColor={ bgColor }>
+      <Flex
+        py={ 2 }
+        px={{ base: 3, lg: 6 }}
+        maxW={ `${ CONTENT_MAX_WIDTH }px` }
+        m="0 auto"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <TopBarStats/>
+        <Flex alignItems="center">
+          { config.features.deFiDropdown.isEnabled && (
+            <>
+              <DeFiDropdown/>
+              <Divider mr={ 3 } ml={{ base: 2, sm: 3 }} height={ 4 } orientation="vertical"/>
+            </>
+          ) }
+          <Settings/>
+          { config.UI.navigation.layout === 'horizontal' && Boolean(config.UI.navigation.featuredNetworks) && (
+            <Box display={{ base: 'none', lg: 'flex' }}>
+              <Divider mx={ 3 } height={ 4 } orientation="vertical"/>
+              <NetworkMenu/>
+            </Box>
+          ) }
+        </Flex>
+      </Flex>
+    </Box>
   );
 };
 
diff --git a/ui/snippets/topBar/TopBarStats.tsx b/ui/snippets/topBar/TopBarStats.tsx
index 1638b7ef5a..a5a39e79fc 100644
--- a/ui/snippets/topBar/TopBarStats.tsx
+++ b/ui/snippets/topBar/TopBarStats.tsx
@@ -1,29 +1,21 @@
-import { Flex, Link, Skeleton, Tooltip, chakra, useDisclosure } from '@chakra-ui/react';
+import { Flex, Link, Skeleton, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import dayjs from 'lib/date/dayjs';
-import { currencyUnits } from 'lib/units';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import { HOMEPAGE_STATS } from 'stubs/stats';
-import GasInfoTooltipContent from 'ui/shared/GasInfoTooltipContent/GasInfoTooltipContent';
+import GasInfoTooltip from 'ui/shared/gas/GasInfoTooltip';
+import GasPrice from 'ui/shared/gas/GasPrice';
 import TextSeparator from 'ui/shared/TextSeparator';
 
-const TopBarStats = () => {
-  // have to implement controlled tooltip because of the issue - https://github.com/chakra-ui/chakra-ui/issues/7107
-  const { isOpen, onOpen, onToggle, onClose } = useDisclosure();
+import GetGasButton from './GetGasButton';
 
-  const handleClick = React.useCallback((event: React.MouseEvent) => {
-    event.stopPropagation();
-    onToggle();
-  }, [ onToggle ]);
+const TopBarStats = () => {
+  const isMobile = useIsMobile();
 
-  const { data, isPlaceholderData, isError, refetch, dataUpdatedAt } = useApiQuery('homepage_stats', {
-    fetchParams: {
-      headers: {
-        'updated-gas-oracle': 'true',
-      },
-    },
+  const { data, isPlaceholderData, isError, refetch, dataUpdatedAt } = useApiQuery('stats', {
     queryOptions: {
       placeholderData: HOMEPAGE_STATS,
       refetchOnMount: false,
@@ -64,7 +56,7 @@ const TopBarStats = () => {
       { data?.coin_price && (
         <Flex columnGap={ 1 }>
           <Skeleton isLoaded={ !isPlaceholderData }>
-            <chakra.span color="text_secondary">{ config.chain.governanceToken.symbol || config.chain.currency.symbol } </chakra.span>
+            <chakra.span color="text_secondary">{ config.chain.currency.symbol } </chakra.span>
             <span>${ Number(data.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }) }</span>
           </Skeleton>
           { data.coin_price_change_percentage && (
@@ -76,6 +68,7 @@ const TopBarStats = () => {
           ) }
         </Flex>
       ) }
+<<<<<<< HEAD
       { data?.coin_price && config.UI.homepage.showGasTracker && <TextSeparator color="divider"/> }
       { data?.gas_prices && data.gas_prices.average !== null && config.UI.homepage.showGasTracker && (
         <Skeleton isLoaded={ !isPlaceholderData }>
@@ -100,6 +93,29 @@ const TopBarStats = () => {
             </Link>
           </Tooltip>
         </Skeleton>
+=======
+      { !isMobile && data?.secondary_coin_price && config.chain.secondaryCoin.symbol && (
+        <Flex columnGap={ 1 } ml={ data?.coin_price ? 3 : 0 }>
+          <Skeleton isLoaded={ !isPlaceholderData }>
+            <chakra.span color="text_secondary">{ config.chain.secondaryCoin.symbol } </chakra.span>
+            <span>${ Number(data.secondary_coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }) }</span>
+          </Skeleton>
+        </Flex>
+      ) }
+      { data?.coin_price && config.features.gasTracker.isEnabled && <TextSeparator color="divider"/> }
+      { data?.gas_prices && data.gas_prices.average !== null && config.features.gasTracker.isEnabled && (
+        <>
+          <Skeleton isLoaded={ !isPlaceholderData }>
+            <chakra.span color="text_secondary">Gas </chakra.span>
+            <GasInfoTooltip data={ data } dataUpdatedAt={ dataUpdatedAt } placement={ !data?.coin_price ? 'bottom-start' : undefined }>
+              <Link>
+                <GasPrice data={ data.gas_prices.average }/>
+              </Link>
+            </GasInfoTooltip>
+          </Skeleton>
+          { !isPlaceholderData && <GetGasButton/> }
+        </>
+>>>>>>> 3a400a12e9079490a50fd4e8a885f663e0a26739
       ) }
     </Flex>
   );
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-1.png
index 0f144edc3f..e6caf047e9 100644
Binary files a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-1.png and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-2.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-2.png
index b4e5c3d150..8a4112da0c 100644
Binary files a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-2.png and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-2.png differ
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_with-DeFi-dropdown-dark-mode-mobile-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_with-DeFi-dropdown-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..f669fc83d4
Binary files /dev/null and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_with-DeFi-dropdown-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_default-view-dark-mode-mobile-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_default-view-dark-mode-mobile-1.png
index 5965acd2f5..e674d4527c 100644
Binary files a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_default-view-dark-mode-mobile-1.png and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_default-view-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_default-view-dark-mode-mobile-2.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_default-view-dark-mode-mobile-2.png
index c2e225c5e1..9a90077cf9 100644
Binary files a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_default-view-dark-mode-mobile-2.png and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_default-view-dark-mode-mobile-2.png differ
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-DeFi-dropdown-dark-mode-mobile-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-DeFi-dropdown-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..7293a4e3c8
Binary files /dev/null and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-DeFi-dropdown-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-Get-gas-button-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-Get-gas-button-1.png
new file mode 100644
index 0000000000..d599d465e1
Binary files /dev/null and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-Get-gas-button-1.png differ
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-horizontal-nav-bar-layout-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-horizontal-nav-bar-layout-1.png
new file mode 100644
index 0000000000..08fbda28f1
Binary files /dev/null and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-horizontal-nav-bar-layout-1.png differ
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-secondary-coin-price-mobile-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-secondary-coin-price-mobile-1.png
new file mode 100644
index 0000000000..6b68816e51
Binary files /dev/null and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-secondary-coin-price-mobile-1.png differ
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_default-view-dark-mode-mobile-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_default-view-dark-mode-mobile-1.png
index 11edf10362..f3b9f1a64f 100644
Binary files a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_default-view-dark-mode-mobile-1.png and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_default-view-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_default-view-dark-mode-mobile-2.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_default-view-dark-mode-mobile-2.png
index 85e58717ec..2989109bd6 100644
Binary files a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_default-view-dark-mode-mobile-2.png and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_default-view-dark-mode-mobile-2.png differ
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_with-DeFi-dropdown-dark-mode-mobile-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_with-DeFi-dropdown-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..d162aed524
Binary files /dev/null and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_with-DeFi-dropdown-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_with-secondary-coin-price-mobile-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_with-secondary-coin-price-mobile-1.png
new file mode 100644
index 0000000000..b863eedbdf
Binary files /dev/null and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_with-secondary-coin-price-mobile-1.png differ
diff --git a/ui/snippets/topBar/settings/Settings.tsx b/ui/snippets/topBar/settings/Settings.tsx
new file mode 100644
index 0000000000..065a992230
--- /dev/null
+++ b/ui/snippets/topBar/settings/Settings.tsx
@@ -0,0 +1,39 @@
+import { Box, IconButton, PopoverBody, PopoverContent, PopoverTrigger, useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+import Popover from 'ui/shared/chakra/Popover';
+import IconSvg from 'ui/shared/IconSvg';
+
+import SettingsAddressFormat from './SettingsAddressFormat';
+import SettingsColorTheme from './SettingsColorTheme';
+import SettingsIdentIcon from './SettingsIdentIcon';
+
+const Settings = () => {
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  return (
+    <Popover placement="bottom-start" trigger="click" isOpen={ isOpen } onClose={ onClose }>
+      <PopoverTrigger>
+        <IconButton
+          variant="simple"
+          colorScheme="blue"
+          aria-label="User settings"
+          icon={ <IconSvg name="gear_slim" boxSize={ 5 }/> }
+          p="1px"
+          boxSize={ 5 }
+          onClick={ onToggle }
+        />
+      </PopoverTrigger>
+      <PopoverContent overflowY="hidden" w="auto" fontSize="sm">
+        <PopoverBody boxShadow="2xl" p={ 4 }>
+          <SettingsColorTheme onSelect={ onClose }/>
+          <Box borderColor="divider" borderWidth="1px" my={ 3 }/>
+          <SettingsIdentIcon/>
+          <SettingsAddressFormat/>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default React.memo(Settings);
diff --git a/ui/snippets/topBar/settings/SettingsAddressFormat.tsx b/ui/snippets/topBar/settings/SettingsAddressFormat.tsx
new file mode 100644
index 0000000000..a8ae61a861
--- /dev/null
+++ b/ui/snippets/topBar/settings/SettingsAddressFormat.tsx
@@ -0,0 +1,27 @@
+import { FormLabel, FormControl, Switch } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import { BECH_32_SEPARATOR } from 'lib/address/bech32';
+import { useSettingsContext } from 'lib/contexts/settings';
+
+const SettingsAddressFormat = () => {
+  const settingsContext = useSettingsContext();
+
+  if (!settingsContext || config.UI.views.address.hashFormat.availableFormats.length < 2) {
+    return null;
+  }
+
+  const { addressFormat, toggleAddressFormat } = settingsContext;
+
+  return (
+    <FormControl display="flex" alignItems="center" columnGap={ 2 } mt={ 4 }>
+      <FormLabel htmlFor="address-format" m="0" fontWeight={ 400 } fontSize="sm" lineHeight={ 5 }>
+        Show { config.UI.views.address.hashFormat.bech32Prefix }{ BECH_32_SEPARATOR } format
+      </FormLabel>
+      <Switch id="address-format" defaultChecked={ addressFormat === 'bech32' } onChange={ toggleAddressFormat }/>
+    </FormControl>
+  );
+};
+
+export default React.memo(SettingsAddressFormat);
diff --git a/ui/snippets/topBar/settings/SettingsColorTheme.tsx b/ui/snippets/topBar/settings/SettingsColorTheme.tsx
new file mode 100644
index 0000000000..b6b115fd8f
--- /dev/null
+++ b/ui/snippets/topBar/settings/SettingsColorTheme.tsx
@@ -0,0 +1,90 @@
+import { Box, Flex, useColorMode } from '@chakra-ui/react';
+import React from 'react';
+
+import * as cookies from 'lib/cookies';
+import { COLOR_THEMES } from 'lib/settings/colorTheme';
+
+import SettingsSample from './SettingsSample';
+
+interface Props {
+  onSelect?: () => void;
+}
+
+const SettingsColorTheme = ({ onSelect }: Props) => {
+  const { setColorMode } = useColorMode();
+
+  const [ activeHex, setActiveHex ] = React.useState<string>();
+
+  const setTheme = React.useCallback((hex: string) => {
+    const nextTheme = COLOR_THEMES.find((theme) => theme.hex === hex);
+
+    if (!nextTheme) {
+      return;
+    }
+
+    setColorMode(nextTheme.colorMode);
+
+    const varName = nextTheme.colorMode === 'light' ? '--chakra-colors-white' : '--chakra-colors-black';
+    window.document.documentElement.style.setProperty(varName, hex);
+
+    cookies.set(cookies.NAMES.COLOR_MODE_HEX, hex);
+    window.localStorage.setItem(cookies.NAMES.COLOR_MODE, nextTheme.colorMode);
+  }, [ setColorMode ]);
+
+  React.useEffect(() => {
+    const cookieColorMode = cookies.get(cookies.NAMES.COLOR_MODE);
+
+    const nextColorMode = (() => {
+      if (!cookieColorMode) {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      }
+
+      return cookieColorMode;
+    })();
+
+    const colorModeThemes = COLOR_THEMES.filter(theme => theme.colorMode === nextColorMode);
+    const fallbackHex = colorModeThemes[colorModeThemes.length - 1].hex;
+    const cookieHex = cookies.get(cookies.NAMES.COLOR_MODE_HEX) ?? fallbackHex;
+    setTheme(cookieHex);
+    setActiveHex(cookieHex);
+  // should run only on mount
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ ]);
+
+  const handleSelect = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+
+    const hex = event.currentTarget.getAttribute('data-value');
+
+    if (!hex) {
+      return;
+    }
+
+    setTheme(hex);
+    setActiveHex(hex);
+    onSelect?.();
+  }, [ setTheme, onSelect ]);
+
+  const activeTheme = COLOR_THEMES.find((theme) => theme.hex === activeHex);
+
+  return (
+    <div>
+      <Box fontWeight={ 600 }>Color theme</Box>
+      <Box color="text_secondary" mt={ 1 } mb={ 2 }>{ activeTheme?.label }</Box>
+      <Flex>
+        { COLOR_THEMES.map((theme) => (
+          <SettingsSample
+            key={ theme.label }
+            label={ theme.label }
+            value={ theme.hex }
+            bg={ theme.sampleBg }
+            isActive={ theme.hex === activeHex }
+            onClick={ handleSelect }
+          />
+        )) }
+      </Flex>
+    </div>
+  );
+};
+
+export default React.memo(SettingsColorTheme);
diff --git a/ui/snippets/topBar/settings/SettingsIdentIcon.tsx b/ui/snippets/topBar/settings/SettingsIdentIcon.tsx
new file mode 100644
index 0000000000..16924ddc5f
--- /dev/null
+++ b/ui/snippets/topBar/settings/SettingsIdentIcon.tsx
@@ -0,0 +1,53 @@
+import { Box, Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import * as cookies from 'lib/cookies';
+import { IDENTICONS } from 'lib/settings/identIcon';
+
+import SettingsSample from './SettingsSample';
+
+const SettingsIdentIcon = () => {
+  const [ activeId, setActiveId ] = React.useState<string>();
+
+  React.useEffect(() => {
+    const initialId = cookies.get(cookies.NAMES.ADDRESS_IDENTICON_TYPE) || config.UI.views.address.identiconType;
+    setActiveId(initialId);
+  }, []);
+
+  const handleSelect = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+
+    const id = event.currentTarget.getAttribute('data-value');
+
+    if (!id) {
+      return;
+    }
+
+    cookies.set(cookies.NAMES.ADDRESS_IDENTICON_TYPE, id);
+    window.location.reload();
+  }, []);
+
+  const activeIdenticon = IDENTICONS.find((identicon) => identicon.id === activeId);
+
+  return (
+    <div>
+      <Box fontWeight={ 600 }>Address settings</Box>
+      <Box color="text_secondary" mt={ 1 } mb={ 2 }>{ activeIdenticon?.label }</Box>
+      <Flex>
+        { IDENTICONS.map((identicon) => (
+          <SettingsSample
+            key={ identicon.id }
+            label={ identicon.label }
+            value={ identicon.id }
+            bg={ identicon.sampleBg }
+            isActive={ identicon.id === activeId }
+            onClick={ handleSelect }
+          />
+        )) }
+      </Flex>
+    </div>
+  );
+};
+
+export default React.memo(SettingsIdentIcon);
diff --git a/ui/snippets/topBar/settings/SettingsSample.tsx b/ui/snippets/topBar/settings/SettingsSample.tsx
new file mode 100644
index 0000000000..b6986b1862
--- /dev/null
+++ b/ui/snippets/topBar/settings/SettingsSample.tsx
@@ -0,0 +1,63 @@
+import {
+  Box,
+  Tooltip,
+  useColorModeValue,
+  useToken,
+} from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  isActive: boolean;
+  bg: string;
+  value: string;
+  label: string;
+}
+
+const TOOLTIP_OFFSET: [ number, number ] = [ 0, 10 ];
+
+const SettingsSample = ({ label, value, bg, onClick, isActive }: Props) => {
+  const bgColor = useColorModeValue('white', 'gray.900');
+  const activeBgColor = useColorModeValue('blue.50', 'whiteAlpha.100');
+
+  const activeBorderColor = useToken('colors', useColorModeValue('blackAlpha.800', 'gray.50'));
+  const hoverBorderColor = useToken('colors', 'link_hovered');
+
+  return (
+    <Box p="9px" bgColor={ isActive ? activeBgColor : 'transparent' } borderRadius="base">
+      <Tooltip label={ label } offset={ TOOLTIP_OFFSET }>
+        <Box
+          bg={ bg }
+          boxSize="22px"
+          borderRadius="full"
+          borderWidth="1px"
+          borderColor={ isActive ? activeBgColor : bgColor }
+          position="relative"
+          cursor="pointer"
+          _before={{
+            position: 'absolute',
+            display: 'block',
+            content: '""',
+            top: '-3px',
+            left: '-3px',
+            width: 'calc(100% + 2px)',
+            height: 'calc(100% + 2px)',
+            borderStyle: 'solid',
+            borderRadius: 'full',
+            borderWidth: '2px',
+            borderColor: isActive ? activeBorderColor : 'transparent',
+          }}
+          _hover={{
+            _before: {
+              borderColor: isActive ? activeBorderColor : hoverBorderColor,
+            },
+          }}
+          data-value={ value }
+          onClick={ onClick }
+        />
+      </Tooltip>
+    </Box>
+  );
+};
+
+export default React.memo(SettingsSample);
diff --git a/ui/snippets/topBar/utils.ts b/ui/snippets/topBar/utils.ts
deleted file mode 100644
index 0644fcc9b2..0000000000
--- a/ui/snippets/topBar/utils.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { IconName } from 'ui/shared/IconSvg';
-
-export const COLOR_THEMES = [
-  {
-    name: 'Light',
-    colorMode: 'light',
-    icon: 'sun' as IconName,
-    colors: [
-      { hex: '#FFFFFF', sampleBg: 'linear-gradient(154deg, #EFEFEF 50%, rgba(255, 255, 255, 0.00) 330.86%)' },
-    ],
-  },
-  {
-    name: 'Dim',
-    colorMode: 'dark',
-    icon: 'moon-with-star' as IconName,
-    colors: [
-      { hex: '#232B37', sampleBg: 'linear-gradient(152deg, #232B37 50%, rgba(255, 255, 255, 0.00) 290.71%)' },
-      { hex: '#1B2E48', sampleBg: 'linear-gradient(150deg, #1B2E48 50%, rgba(255, 255, 255, 0.00) 312.75%)' },
-    ],
-  },
-  {
-    name: 'Dark',
-    colorMode: 'dark',
-    icon: 'moon' as IconName,
-    colors: [
-      { hex: '#101112', sampleBg: 'linear-gradient(161deg, #000 9.37%, #383838 92.52%)' },
-    ],
-  },
-];
-
-export type ColorTheme = typeof COLOR_THEMES[number];
-
-export type ColorThemeColor = ColorTheme['colors'][number];
diff --git a/ui/snippets/useMenuButtonColors.tsx b/ui/snippets/useMenuButtonColors.tsx
deleted file mode 100644
index 1583e18fb5..0000000000
--- a/ui/snippets/useMenuButtonColors.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useColorModeValue } from '@chakra-ui/react';
-
-export default function useMenuColors() {
-  const themedBackground = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
-  const themedBorderColor = useColorModeValue('gray.300', 'gray.700');
-  const themedColor = useColorModeValue('blackAlpha.800', 'gray.400');
-
-  return { themedBackground, themedBorderColor, themedColor };
-}
diff --git a/ui/snippets/user/README.md b/ui/snippets/user/README.md
new file mode 100644
index 0000000000..262923e500
--- /dev/null
+++ b/ui/snippets/user/README.md
@@ -0,0 +1,2 @@
+Component in `/profile` directory are used when Account and WalletConnect features are enabled.
+Component in `/wallet` directory are used when only WalletConnect features is enabled.
\ No newline at end of file
diff --git a/ui/snippets/user/UserIdenticon.tsx b/ui/snippets/user/UserIdenticon.tsx
new file mode 100644
index 0000000000..788befed22
--- /dev/null
+++ b/ui/snippets/user/UserIdenticon.tsx
@@ -0,0 +1,40 @@
+import { Box, Center, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import AddressIdenticon from 'ui/shared/entities/address/AddressIdenticon';
+import IconSvg from 'ui/shared/IconSvg';
+
+type Props = {
+  address: string;
+  isAutoConnectDisabled?: boolean;
+};
+
+const UserIdenticon = ({ address, isAutoConnectDisabled }: Props) => {
+  const borderColor = useColorModeValue('orange.100', 'orange.900');
+
+  return (
+    <Box position="relative">
+      <AddressIdenticon size={ 20 } hash={ address }/>
+      { isAutoConnectDisabled && (
+        <Center
+          boxSize="14px"
+          position="absolute"
+          bottom="-1px"
+          right="-3px"
+          backgroundColor="rgba(16, 17, 18, 0.80)"
+          borderRadius="full"
+          border="1px solid"
+          borderColor={ borderColor }
+        >
+          <IconSvg
+            name="integration/partial"
+            color="white"
+            boxSize={ 2 }
+          />
+        </Center>
+      ) }
+    </Box>
+  );
+};
+
+export default React.memo(UserIdenticon);
diff --git a/ui/snippets/user/UserWalletAutoConnectAlert.tsx b/ui/snippets/user/UserWalletAutoConnectAlert.tsx
new file mode 100644
index 0000000000..6b6583b7cf
--- /dev/null
+++ b/ui/snippets/user/UserWalletAutoConnectAlert.tsx
@@ -0,0 +1,31 @@
+import { Text, Flex, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+const UserWalletAutoConnectAlert = () => {
+  const bgColor = useColorModeValue('orange.100', 'orange.900');
+
+  return (
+    <Flex
+      borderRadius="base"
+      p={ 3 }
+      mb={ 3 }
+      alignItems="center"
+      bgColor={ bgColor }
+    >
+      <IconSvg
+        name="integration/partial"
+        color="text"
+        boxSize={ 5 }
+        flexShrink={ 0 }
+        mr={ 2 }
+      />
+      <Text fontSize="xs" lineHeight="16px">
+        Connect your wallet in the app below
+      </Text>
+    </Flex>
+  );
+};
+
+export default React.memo(UserWalletAutoConnectAlert);
diff --git a/ui/snippets/user/profile/UserProfileButton.tsx b/ui/snippets/user/profile/UserProfileButton.tsx
new file mode 100644
index 0000000000..cc6fdb3193
--- /dev/null
+++ b/ui/snippets/user/profile/UserProfileButton.tsx
@@ -0,0 +1,98 @@
+import type { ButtonProps } from '@chakra-ui/react';
+import { Button, Tooltip, Box, HStack } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import React, { useCallback, useState } from 'react';
+
+import type { UserInfo } from 'types/api/account';
+
+import { useMarketplaceContext } from 'lib/contexts/marketplace';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import shortenString from 'lib/shortenString';
+import useWeb3AccountWithDomain from 'lib/web3/useAccountWithDomain';
+import IconSvg from 'ui/shared/IconSvg';
+
+import UserIdenticon from '../UserIdenticon';
+import { getUserHandle } from './utils';
+
+interface Props {
+  profileQuery: UseQueryResult<UserInfo, unknown>;
+  size?: ButtonProps['size'];
+  variant?: ButtonProps['variant'];
+  onClick: () => void;
+  isPending?: boolean;
+}
+
+const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+  const [ isFetched, setIsFetched ] = useState(false);
+  const isMobile = useIsMobile();
+
+  const { data, isLoading } = profileQuery;
+  const web3AccountWithDomain = useWeb3AccountWithDomain(true);
+  const { isAutoConnectDisabled } = useMarketplaceContext();
+
+  React.useEffect(() => {
+    if (!isLoading) {
+      setIsFetched(true);
+    }
+  }, [ isLoading ]);
+
+  const handleFocus = useCallback((e: React.FocusEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+  }, []);
+
+  const content = (() => {
+    if (web3AccountWithDomain.address) {
+      return (
+        <HStack gap={ 2 }>
+          <UserIdenticon address={ web3AccountWithDomain.address } isAutoConnectDisabled={ isAutoConnectDisabled }/>
+          <Box display={{ base: 'none', md: 'block' }}>
+            { web3AccountWithDomain.domain || shortenString(web3AccountWithDomain.address) }
+          </Box>
+        </HStack>
+      );
+    }
+
+    if (!data) {
+      return 'Log in';
+    }
+
+    return (
+      <HStack gap={ 2 }>
+        <IconSvg name="profile" boxSize={ 5 }/>
+        <Box display={{ base: 'none', md: 'block' }}>{ data.email ? getUserHandle(data.email) : 'My profile' }</Box>
+      </HStack>
+    );
+  })();
+
+  const isButtonLoading = isPending || !isFetched;
+  const dataExists = !isButtonLoading && (Boolean(data) || Boolean(web3AccountWithDomain.address));
+
+  return (
+    <Tooltip
+      label={ <span>Sign in to My Account to add tags,<br/>create watchlists, access API keys and more</span> }
+      textAlign="center"
+      padding={ 2 }
+      isDisabled={ isMobile || isLoading || Boolean(data) }
+      openDelay={ 500 }
+    >
+      <Button
+        ref={ ref }
+        size={ size }
+        variant={ variant }
+        onClick={ onClick }
+        onFocus={ handleFocus }
+        data-selected={ dataExists }
+        data-warning={ isAutoConnectDisabled }
+        fontSize="sm"
+        lineHeight={ 5 }
+        px={ dataExists ? 2.5 : 4 }
+        fontWeight={ dataExists ? 700 : 600 }
+        isLoading={ isButtonLoading }
+      >
+        { content }
+      </Button>
+    </Tooltip>
+  );
+};
+
+export default React.memo(React.forwardRef(UserProfileButton));
diff --git a/ui/snippets/user/profile/UserProfileContent.tsx b/ui/snippets/user/profile/UserProfileContent.tsx
new file mode 100644
index 0000000000..7fb618a630
--- /dev/null
+++ b/ui/snippets/user/profile/UserProfileContent.tsx
@@ -0,0 +1,138 @@
+import { Box, Button, Divider, Flex, Link, VStack, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import type { NavLink } from './types';
+import type { UserInfo } from 'types/api/account';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import { useMarketplaceContext } from 'lib/contexts/marketplace';
+import shortenString from 'lib/shortenString';
+import Hint from 'ui/shared/Hint';
+import TruncatedValue from 'ui/shared/TruncatedValue';
+import useLogout from 'ui/snippets/auth/useLogout';
+
+import UserWalletAutoConnectAlert from '../UserWalletAutoConnectAlert';
+import UserProfileContentNavLink from './UserProfileContentNavLink';
+import UserProfileContentWallet from './UserProfileContentWallet';
+
+const navLinks: Array<NavLink> = [
+  {
+    text: 'My profile',
+    href: route({ pathname: '/auth/profile' }),
+    icon: 'profile' as const,
+  },
+  {
+    text: 'Watch list',
+    href: route({ pathname: '/account/watchlist' }),
+    icon: 'star_outline' as const,
+  },
+  {
+    text: 'Private tags',
+    href: route({ pathname: '/account/tag-address' }),
+    icon: 'private_tags_slim' as const,
+  },
+  {
+    text: 'API keys',
+    href: route({ pathname: '/account/api-key' }),
+    icon: 'API_slim' as const,
+  },
+  {
+    text: 'Custom ABI',
+    href: route({ pathname: '/account/custom-abi' }),
+    icon: 'ABI_slim' as const,
+  },
+  config.features.addressVerification.isEnabled && {
+    text: 'Verified addrs',
+    href: route({ pathname: '/account/verified-addresses' }),
+    icon: 'verified_slim' as const,
+  },
+].filter(Boolean);
+
+interface Props {
+  data: UserInfo | undefined;
+  onClose: () => void;
+  onLogin: () => void;
+  onAddEmail: () => void;
+  onAddAddress: () => void;
+}
+
+const UserProfileContent = ({ data, onClose, onLogin, onAddEmail, onAddAddress }: Props) => {
+  const { isAutoConnectDisabled } = useMarketplaceContext();
+  const logout = useLogout();
+
+  const accountTextColor = useColorModeValue('gray.500', 'gray.300');
+
+  if (!data) {
+    return (
+      <Box>
+        { isAutoConnectDisabled && <UserWalletAutoConnectAlert/> }
+        { config.features.blockchainInteraction.isEnabled && <UserProfileContentWallet onClose={ onClose }/> }
+        <Button mt={ 3 } onClick={ onLogin } size="sm" w="100%">Log in</Button>
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      { isAutoConnectDisabled && <UserWalletAutoConnectAlert/> }
+
+      <Box fontSize="xs" lineHeight={ 6 } fontWeight="500" px={ 1 } mb="2px">Account</Box>
+      <Box
+        fontSize="xs"
+        lineHeight={ 4 }
+        fontWeight="500"
+        borderColor="divider"
+        borderWidth="1px"
+        borderRadius="base"
+        color={ accountTextColor }
+      >
+        { config.features.blockchainInteraction.isEnabled && (
+          <Flex p={ 2 } borderColor="divider" borderBottomWidth="1px">
+            <Box>Address</Box>
+            <Hint
+              label={ `This wallet address is linked to your Blockscout account. It can be used to login ${ config.features.rewards.isEnabled ? 'and is used for Merits Program participation' : '' }` } // eslint-disable-line max-len
+              boxSize={ 4 }
+              ml={ 1 }
+              mr="auto"
+            />
+            { data?.address_hash ?
+              <Box>{ shortenString(data?.address_hash) }</Box> :
+              <Link onClick={ onAddAddress } _hover={{ color: 'link_hovered', textDecoration: 'none' }}>Add address</Link>
+            }
+          </Flex>
+        ) }
+        <Flex p={ 2 } columnGap={ 4 }>
+          <Box mr="auto">Email</Box>
+          { data?.email ?
+            <TruncatedValue value={ data.email }/> :
+            <Link onClick={ onAddEmail } _hover={{ color: 'link_hovered', textDecoration: 'none' }}>Add email</Link>
+          }
+        </Flex>
+      </Box>
+
+      { config.features.blockchainInteraction.isEnabled && <UserProfileContentWallet onClose={ onClose } mt={ 3 }/> }
+
+      <VStack as="ul" spacing="0" alignItems="flex-start" overflow="hidden" mt={ 4 }>
+        { navLinks.map((item) => (
+          <UserProfileContentNavLink
+            key={ item.text }
+            { ...item }
+            onClick={ onClose }
+          />
+        )) }
+      </VStack>
+
+      <Divider my={ 1 }/>
+
+      <UserProfileContentNavLink
+        text="Sign out"
+        icon="sign_out"
+        onClick={ logout }
+      />
+    </Box>
+  );
+};
+
+export default React.memo(UserProfileContent);
diff --git a/ui/snippets/user/profile/UserProfileContentNavLink.tsx b/ui/snippets/user/profile/UserProfileContentNavLink.tsx
new file mode 100644
index 0000000000..a3128e819f
--- /dev/null
+++ b/ui/snippets/user/profile/UserProfileContentNavLink.tsx
@@ -0,0 +1,28 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import type { NavLink } from './types';
+
+import IconSvg from 'ui/shared/IconSvg';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+const UserProfileContentNavLink = ({ href, icon, text, onClick }: NavLink) => {
+
+  return (
+    <LinkInternal
+      href={ href }
+      display="flex"
+      alignItems="center"
+      columnGap={ 3 }
+      py="14px"
+      color="inherit"
+      _hover={{ textDecoration: 'none', color: 'link_hovered' }}
+      onClick={ onClick }
+    >
+      <IconSvg name={ icon } boxSize={ 5 } flexShrink={ 0 }/>
+      <Box fontSize="14px" fontWeight="500" lineHeight={ 5 }>{ text }</Box>
+    </LinkInternal>
+  );
+};
+
+export default React.memo(UserProfileContentNavLink);
diff --git a/ui/snippets/user/profile/UserProfileContentWallet.tsx b/ui/snippets/user/profile/UserProfileContentWallet.tsx
new file mode 100644
index 0000000000..5177a978f1
--- /dev/null
+++ b/ui/snippets/user/profile/UserProfileContentWallet.tsx
@@ -0,0 +1,95 @@
+import { chakra, Box, Button, Flex, IconButton, useColorModeValue, Spinner } from '@chakra-ui/react';
+import React from 'react';
+
+import delay from 'lib/delay';
+import useWeb3AccountWithDomain from 'lib/web3/useAccountWithDomain';
+import useWeb3Wallet from 'lib/web3/useWallet';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import Hint from 'ui/shared/Hint';
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props {
+  onClose?: () => void;
+  className?: string;
+}
+
+const UserProfileContentWallet = ({ onClose, className }: Props) => {
+  const walletSnippetBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+  const web3Wallet = useWeb3Wallet({ source: 'Profile dropdown' });
+
+  const web3AccountWithDomain = useWeb3AccountWithDomain(true);
+
+  const handleConnectWalletClick = React.useCallback(async() => {
+    web3Wallet.openModal();
+    await delay(300);
+    onClose?.();
+  }, [ web3Wallet, onClose ]);
+
+  const handleOpenWalletClick = React.useCallback(async() => {
+    web3Wallet.openModal();
+    await delay(300);
+    onClose?.();
+  }, [ web3Wallet, onClose ]);
+
+  const content = (() => {
+    if (web3Wallet.isConnected && web3AccountWithDomain.address) {
+      return (
+        <Flex alignItems="center" columnGap={ 2 } bgColor={ walletSnippetBgColor } px={ 2 } py="10px" borderRadius="base" justifyContent="space-between">
+          <AddressEntity
+            address={{ hash: web3AccountWithDomain.address, ens_domain_name: web3AccountWithDomain.domain }}
+            isLoading={ web3AccountWithDomain.isLoading }
+            isTooltipDisabled
+            truncation="dynamic"
+            fontSize="sm"
+            fontWeight={ 500 }
+            noAltHash
+          />
+          { web3Wallet.isReconnecting ? <Spinner size="sm" m="2px" flexShrink={ 0 }/> : (
+            <IconButton
+              aria-label="Open wallet"
+              icon={ <IconSvg name="gear_slim" boxSize={ 5 }/> }
+              variant="simple"
+              color="icon_info"
+              boxSize={ 5 }
+              onClick={ handleOpenWalletClick }
+              isLoading={ web3Wallet.isOpen }
+              flexShrink={ 0 }
+            />
+          ) }
+        </Flex>
+      );
+    }
+
+    return (
+      <Button
+        size="sm"
+        onClick={ handleConnectWalletClick }
+        isLoading={ web3Wallet.isOpen }
+        loadingText="Connect Wallet"
+        w="100%"
+      >
+        Connect
+      </Button>
+    );
+  })();
+
+  return (
+    <Box className={ className }>
+      <Flex px={ 1 } mb="2px" fontSize="xs" alignItems="center" lineHeight={ 6 } fontWeight="500">
+        <span>Connected wallet</span>
+        <Hint
+          label={
+            web3Wallet.isConnected ?
+              'This wallet is currently connected to Blockscout and used for interacting with apps and smart contracts' :
+              'This wallet is used for interacting with apps and smart contracts'
+          }
+          boxSize={ 4 }
+          ml={ 1 }
+        />
+      </Flex>
+      { content }
+    </Box>
+  );
+};
+
+export default React.memo(chakra(UserProfileContentWallet));
diff --git a/ui/snippets/user/profile/UserProfileDesktop.pw.tsx b/ui/snippets/user/profile/UserProfileDesktop.pw.tsx
new file mode 100644
index 0000000000..67c6fb0fc3
--- /dev/null
+++ b/ui/snippets/user/profile/UserProfileDesktop.pw.tsx
@@ -0,0 +1,32 @@
+import type { BrowserContext } from '@playwright/test';
+import React from 'react';
+
+import * as profileMock from 'mocks/user/profile';
+import { contextWithAuth } from 'playwright/fixtures/auth';
+import { test as base, expect } from 'playwright/lib';
+
+import UserProfileDesktop from './UserProfileDesktop';
+
+const test = base.extend<{ context: BrowserContext }>({
+  context: contextWithAuth,
+});
+
+test('without address', async({ render, page, mockApiResponse }) => {
+  await mockApiResponse('user_info', profileMock.base);
+  await render(<UserProfileDesktop/>, undefined, { marketplaceContext: { isAutoConnectDisabled: true, setIsAutoConnectDisabled: () => {} } });
+  await page.getByText(/tom/i).click();
+
+  await expect(page).toHaveScreenshot({
+    clip: { x: 0, y: 0, width: 300, height: 700 },
+  });
+});
+
+test('without email', async({ render, page, mockApiResponse }) => {
+  await mockApiResponse('user_info', profileMock.withoutEmail);
+  await render(<UserProfileDesktop/>);
+  await page.getByText(/my profile/i).click();
+
+  await expect(page).toHaveScreenshot({
+    clip: { x: 0, y: 0, width: 300, height: 600 },
+  });
+});
diff --git a/ui/snippets/user/profile/UserProfileDesktop.tsx b/ui/snippets/user/profile/UserProfileDesktop.tsx
new file mode 100644
index 0000000000..067f74c7d7
--- /dev/null
+++ b/ui/snippets/user/profile/UserProfileDesktop.tsx
@@ -0,0 +1,100 @@
+import { PopoverBody, PopoverContent, PopoverTrigger, useDisclosure, type ButtonProps } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { Screen } from 'ui/snippets/auth/types';
+
+import config from 'configs/app';
+import * as mixpanel from 'lib/mixpanel';
+import useAccount from 'lib/web3/useAccount';
+import Popover from 'ui/shared/chakra/Popover';
+import AuthModal from 'ui/snippets/auth/AuthModal';
+import useProfileQuery from 'ui/snippets/auth/useProfileQuery';
+
+import UserProfileButton from './UserProfileButton';
+import UserProfileContent from './UserProfileContent';
+
+interface Props {
+  buttonSize?: ButtonProps['size'];
+  buttonVariant?: ButtonProps['variant'];
+}
+
+const initialScreen = {
+  type: config.features.blockchainInteraction.isEnabled ? 'select_method' as const : 'email' as const,
+};
+
+const UserProfileDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) => {
+  const [ authInitialScreen, setAuthInitialScreen ] = React.useState<Screen>(initialScreen);
+  const router = useRouter();
+
+  const authModal = useDisclosure();
+  const profileMenu = useDisclosure();
+
+  const profileQuery = useProfileQuery();
+  const { address: web3Address } = useAccount();
+
+  const handleProfileButtonClick = React.useCallback(() => {
+    if (profileQuery.data || web3Address) {
+      mixpanel.logEvent(mixpanel.EventTypes.ACCOUNT_ACCESS, { Action: 'Dropdown open' });
+      profileMenu.onOpen();
+      return;
+    }
+
+    if (router.pathname === '/apps/[id]' && config.features.blockchainInteraction.isEnabled) {
+      setAuthInitialScreen({ type: 'connect_wallet' });
+    }
+
+    authModal.onOpen();
+  }, [ profileQuery.data, router.pathname, authModal, profileMenu, web3Address ]);
+
+  const handleAddEmailClick = React.useCallback(() => {
+    setAuthInitialScreen({ type: 'email', isAuth: true });
+    authModal.onOpen();
+  }, [ authModal ]);
+
+  const handleAddAddressClick = React.useCallback(() => {
+    setAuthInitialScreen({ type: 'connect_wallet', isAuth: true });
+    authModal.onOpen();
+  }, [ authModal ]);
+
+  const handleAuthModalClose = React.useCallback(() => {
+    setAuthInitialScreen(initialScreen);
+    authModal.onClose();
+  }, [ authModal ]);
+
+  return (
+    <>
+      <Popover openDelay={ 300 } placement="bottom-end" isLazy isOpen={ profileMenu.isOpen } onClose={ profileMenu.onClose }>
+        <PopoverTrigger>
+          <UserProfileButton
+            profileQuery={ profileQuery }
+            size={ buttonSize }
+            variant={ buttonVariant }
+            onClick={ handleProfileButtonClick }
+          />
+        </PopoverTrigger>
+        { (profileQuery.data || web3Address) && (
+          <PopoverContent w="280px">
+            <PopoverBody>
+              <UserProfileContent
+                data={ profileQuery.data }
+                onClose={ profileMenu.onClose }
+                onLogin={ authModal.onOpen }
+                onAddEmail={ handleAddEmailClick }
+                onAddAddress={ handleAddAddressClick }
+              />
+            </PopoverBody>
+          </PopoverContent>
+        ) }
+      </Popover>
+      { authModal.isOpen && (
+        <AuthModal
+          onClose={ handleAuthModalClose }
+          initialScreen={ authInitialScreen }
+        />
+      ) }
+    </>
+  );
+};
+
+export default React.memo(UserProfileDesktop);
diff --git a/ui/snippets/user/profile/UserProfileMobile.tsx b/ui/snippets/user/profile/UserProfileMobile.tsx
new file mode 100644
index 0000000000..fa561cc510
--- /dev/null
+++ b/ui/snippets/user/profile/UserProfileMobile.tsx
@@ -0,0 +1,97 @@
+import { Drawer, DrawerBody, DrawerContent, DrawerOverlay, useDisclosure } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { Screen } from 'ui/snippets/auth/types';
+
+import config from 'configs/app';
+import * as mixpanel from 'lib/mixpanel';
+import useAccount from 'lib/web3/useAccount';
+import AuthModal from 'ui/snippets/auth/AuthModal';
+import useProfileQuery from 'ui/snippets/auth/useProfileQuery';
+
+import UserProfileButton from './UserProfileButton';
+import UserProfileContent from './UserProfileContent';
+
+const initialScreen = {
+  type: config.features.blockchainInteraction.isEnabled ? 'select_method' as const : 'email' as const,
+};
+
+const UserProfileMobile = () => {
+  const [ authInitialScreen, setAuthInitialScreen ] = React.useState<Screen>(initialScreen);
+  const router = useRouter();
+
+  const authModal = useDisclosure();
+  const profileMenu = useDisclosure();
+
+  const profileQuery = useProfileQuery();
+  const { address: web3Address } = useAccount();
+
+  const handleProfileButtonClick = React.useCallback(() => {
+    if (profileQuery.data || web3Address) {
+      mixpanel.logEvent(mixpanel.EventTypes.ACCOUNT_ACCESS, { Action: 'Dropdown open' });
+      profileMenu.onOpen();
+      return;
+    }
+
+    if (router.pathname === '/apps/[id]' && config.features.blockchainInteraction.isEnabled) {
+      setAuthInitialScreen({ type: 'connect_wallet' });
+    }
+
+    authModal.onOpen();
+  }, [ profileQuery.data, web3Address, router.pathname, authModal, profileMenu ]);
+
+  const handleAddEmailClick = React.useCallback(() => {
+    setAuthInitialScreen({ type: 'email', isAuth: true });
+    authModal.onOpen();
+  }, [ authModal ]);
+
+  const handleAddAddressClick = React.useCallback(() => {
+    setAuthInitialScreen({ type: 'connect_wallet', isAuth: true });
+    authModal.onOpen();
+  }, [ authModal ]);
+
+  const handleAuthModalClose = React.useCallback(() => {
+    setAuthInitialScreen(initialScreen);
+    authModal.onClose();
+  }, [ authModal ]);
+
+  return (
+    <>
+      <UserProfileButton
+        profileQuery={ profileQuery }
+        variant="header"
+        onClick={ handleProfileButtonClick }
+      />
+      { (profileQuery.data || web3Address) && (
+        <Drawer
+          isOpen={ profileMenu.isOpen }
+          placement="right"
+          onClose={ profileMenu.onClose }
+          autoFocus={ false }
+        >
+          <DrawerOverlay/>
+          <DrawerContent maxWidth="300px">
+            <DrawerBody p={ 6 }>
+              <UserProfileContent
+                data={ profileQuery.data }
+                onClose={ profileMenu.onClose }
+                onLogin={ authModal.onOpen }
+                onAddEmail={ handleAddEmailClick }
+                onAddAddress={ handleAddAddressClick }
+              />
+            </DrawerBody>
+          </DrawerContent>
+        </Drawer>
+      ) }
+      { authModal.isOpen && (
+        <AuthModal
+          onClose={ handleAuthModalClose }
+          initialScreen={ authInitialScreen }
+        />
+      ) }
+    </>
+  );
+};
+
+export default React.memo(UserProfileMobile);
diff --git a/ui/snippets/user/profile/__screenshots__/UserProfileDesktop.pw.tsx_default_without-address-1.png b/ui/snippets/user/profile/__screenshots__/UserProfileDesktop.pw.tsx_default_without-address-1.png
new file mode 100644
index 0000000000..5f4b742839
Binary files /dev/null and b/ui/snippets/user/profile/__screenshots__/UserProfileDesktop.pw.tsx_default_without-address-1.png differ
diff --git a/ui/snippets/user/profile/__screenshots__/UserProfileDesktop.pw.tsx_default_without-email-1.png b/ui/snippets/user/profile/__screenshots__/UserProfileDesktop.pw.tsx_default_without-email-1.png
new file mode 100644
index 0000000000..699c7e28e3
Binary files /dev/null and b/ui/snippets/user/profile/__screenshots__/UserProfileDesktop.pw.tsx_default_without-email-1.png differ
diff --git a/ui/snippets/user/profile/types.ts b/ui/snippets/user/profile/types.ts
new file mode 100644
index 0000000000..79c035f79c
--- /dev/null
+++ b/ui/snippets/user/profile/types.ts
@@ -0,0 +1,8 @@
+import type { IconName } from 'public/icons/name';
+
+export interface NavLink {
+  text: string;
+  href?: string;
+  onClick?: () => void;
+  icon: IconName;
+}
diff --git a/ui/snippets/user/profile/utils.ts b/ui/snippets/user/profile/utils.ts
new file mode 100644
index 0000000000..6d1b3ea446
--- /dev/null
+++ b/ui/snippets/user/profile/utils.ts
@@ -0,0 +1,3 @@
+export function getUserHandle(email: string) {
+  return email.split('@')[0];
+}
diff --git a/ui/snippets/user/wallet/UserWalletButton.tsx b/ui/snippets/user/wallet/UserWalletButton.tsx
new file mode 100644
index 0000000000..b1f1ee9755
--- /dev/null
+++ b/ui/snippets/user/wallet/UserWalletButton.tsx
@@ -0,0 +1,67 @@
+import type { ButtonProps } from '@chakra-ui/react';
+import { Button, Box, HStack, Tooltip } from '@chakra-ui/react';
+import React from 'react';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import shortenString from 'lib/shortenString';
+
+import UserIdenticon from '../UserIdenticon';
+
+interface Props {
+  size?: ButtonProps['size'];
+  variant?: ButtonProps['variant'];
+  onClick?: () => void;
+  isPending?: boolean;
+  isAutoConnectDisabled?: boolean;
+  address?: string;
+  domain?: string;
+}
+
+const UserWalletButton = ({ size, variant, onClick, isPending, isAutoConnectDisabled, address, domain }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+
+  const isMobile = useIsMobile();
+
+  const content = (() => {
+    if (!address) {
+      return 'Connect';
+    }
+
+    const text = domain || shortenString(address);
+
+    return (
+      <HStack gap={ 2 }>
+        <UserIdenticon address={ address } isAutoConnectDisabled={ isAutoConnectDisabled }/>
+        <Box display={{ base: 'none', md: 'block' }}>{ text }</Box>
+      </HStack>
+    );
+  })();
+
+  return (
+    <Tooltip
+      label={ <span>Connect your wallet<br/>to Blockscout for<br/>full-featured access</span> }
+      textAlign="center"
+      padding={ 2 }
+      isDisabled={ isMobile || Boolean(address) }
+      openDelay={ 500 }
+    >
+      <Button
+        ref={ ref }
+        size={ size }
+        variant={ variant }
+        onClick={ onClick }
+        data-selected={ Boolean(address) }
+        data-warning={ isAutoConnectDisabled }
+        fontSize="sm"
+        lineHeight={ 5 }
+        px={ address ? 2.5 : 4 }
+        fontWeight={ address ? 700 : 600 }
+        isLoading={ isPending }
+        loadingText={ isMobile ? undefined : 'Connecting' }
+      >
+        { content }
+      </Button>
+    </Tooltip>
+  );
+};
+
+export default React.memo(React.forwardRef(UserWalletButton));
diff --git a/ui/snippets/user/wallet/UserWalletDesktop.tsx b/ui/snippets/user/wallet/UserWalletDesktop.tsx
new file mode 100644
index 0000000000..78e2e9018c
--- /dev/null
+++ b/ui/snippets/user/wallet/UserWalletDesktop.tsx
@@ -0,0 +1,69 @@
+import { PopoverBody, PopoverContent, PopoverTrigger, useDisclosure, type ButtonProps } from '@chakra-ui/react';
+import React from 'react';
+
+import { useMarketplaceContext } from 'lib/contexts/marketplace';
+import useWeb3AccountWithDomain from 'lib/web3/useAccountWithDomain';
+import useWeb3Wallet from 'lib/web3/useWallet';
+import Popover from 'ui/shared/chakra/Popover';
+
+import UserWalletButton from './UserWalletButton';
+import UserWalletMenuContent from './UserWalletMenuContent';
+
+interface Props {
+  buttonSize?: ButtonProps['size'];
+  buttonVariant?: ButtonProps['variant'];
+}
+
+const UserWalletDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) => {
+  const walletMenu = useDisclosure();
+
+  const web3Wallet = useWeb3Wallet({ source: 'Header' });
+  const web3AccountWithDomain = useWeb3AccountWithDomain(web3Wallet.isConnected);
+  const { isAutoConnectDisabled } = useMarketplaceContext();
+
+  const isPending =
+    (web3Wallet.isConnected && web3AccountWithDomain.isLoading) ||
+    (!web3Wallet.isConnected && web3Wallet.isOpen);
+
+  const handleOpenWalletClick = React.useCallback(() => {
+    web3Wallet.openModal();
+    walletMenu.onClose();
+  }, [ web3Wallet, walletMenu ]);
+
+  const handleDisconnectClick = React.useCallback(() => {
+    web3Wallet.disconnect();
+    walletMenu.onClose();
+  }, [ web3Wallet, walletMenu ]);
+
+  return (
+    <Popover openDelay={ 300 } placement="bottom-end" isLazy isOpen={ walletMenu.isOpen } onClose={ walletMenu.onClose }>
+      <PopoverTrigger>
+        <UserWalletButton
+          size={ buttonSize }
+          variant={ buttonVariant }
+          onClick={ web3Wallet.isConnected ? walletMenu.onOpen : web3Wallet.openModal }
+          address={ web3AccountWithDomain.address }
+          domain={ web3AccountWithDomain.domain }
+          isPending={ isPending }
+          isAutoConnectDisabled={ isAutoConnectDisabled }
+        />
+      </PopoverTrigger>
+      { web3AccountWithDomain.address && (
+        <PopoverContent w="235px">
+          <PopoverBody>
+            <UserWalletMenuContent
+              address={ web3AccountWithDomain.address }
+              domain={ web3AccountWithDomain.domain }
+              isAutoConnectDisabled={ isAutoConnectDisabled }
+              isReconnecting={ web3Wallet.isReconnecting }
+              onOpenWallet={ handleOpenWalletClick }
+              onDisconnect={ handleDisconnectClick }
+            />
+          </PopoverBody>
+        </PopoverContent>
+      ) }
+    </Popover>
+  );
+};
+
+export default React.memo(UserWalletDesktop);
diff --git a/ui/snippets/user/wallet/UserWalletMenuContent.tsx b/ui/snippets/user/wallet/UserWalletMenuContent.tsx
new file mode 100644
index 0000000000..7de21a2ed8
--- /dev/null
+++ b/ui/snippets/user/wallet/UserWalletMenuContent.tsx
@@ -0,0 +1,60 @@
+import { Box, Button, Flex, IconButton, Spinner, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import delay from 'lib/delay';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import IconSvg from 'ui/shared/IconSvg';
+
+import UserWalletAutoConnectAlert from '../UserWalletAutoConnectAlert';
+
+interface Props {
+  address: string;
+  domain?: string;
+  isAutoConnectDisabled?: boolean;
+  isReconnecting?: boolean;
+  onDisconnect: () => void;
+  onOpenWallet: () => void;
+}
+
+const UserWalletMenuContent = ({ isAutoConnectDisabled, address, domain, isReconnecting, onDisconnect, onOpenWallet }: Props) => {
+
+  const handleOpenWalletClick = React.useCallback(async() => {
+    await delay(100);
+    onOpenWallet();
+  }, [ onOpenWallet ]);
+
+  return (
+    <Box>
+      { isAutoConnectDisabled && <UserWalletAutoConnectAlert/> }
+      <Text fontSize="sm" fontWeight={ 600 } mb={ 1 }>My wallet</Text>
+      <Text fontSize="sm" mb={ 5 } fontWeight={ 400 } color="text_secondary">
+        Your wallet is used to interact with apps and contracts in the explorer.
+      </Text>
+      <Flex alignItems="center" columnGap={ 2 } justifyContent="space-between">
+        <AddressEntity
+          address={{ hash: address, ens_domain_name: domain }}
+          isTooltipDisabled
+          truncation="dynamic"
+          fontSize="sm"
+          fontWeight={ 700 }
+        />
+        { isReconnecting ? <Spinner size="sm" m="2px" flexShrink={ 0 }/> : (
+          <IconButton
+            aria-label="Open wallet"
+            icon={ <IconSvg name="gear_slim" boxSize={ 5 }/> }
+            variant="simple"
+            color="icon_info"
+            boxSize={ 5 }
+            onClick={ handleOpenWalletClick }
+            flexShrink={ 0 }
+          />
+        ) }
+      </Flex>
+      <Button size="sm" width="full" variant="outline" onClick={ onDisconnect } mt={ 6 }>
+        Disconnect
+      </Button>
+    </Box>
+  );
+};
+
+export default React.memo(UserWalletMenuContent);
diff --git a/ui/snippets/user/wallet/UserWalletMobile.tsx b/ui/snippets/user/wallet/UserWalletMobile.tsx
new file mode 100644
index 0000000000..da3b787fe7
--- /dev/null
+++ b/ui/snippets/user/wallet/UserWalletMobile.tsx
@@ -0,0 +1,67 @@
+import { Drawer, DrawerBody, DrawerContent, DrawerOverlay, useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+import { useMarketplaceContext } from 'lib/contexts/marketplace';
+import useWeb3AccountWithDomain from 'lib/web3/useAccountWithDomain';
+import useWeb3Wallet from 'lib/web3/useWallet';
+
+import UserWalletButton from './UserWalletButton';
+import UserWalletMenuContent from './UserWalletMenuContent';
+
+const UserWalletMobile = () => {
+  const walletMenu = useDisclosure();
+
+  const web3Wallet = useWeb3Wallet({ source: 'Header' });
+  const web3AccountWithDomain = useWeb3AccountWithDomain(web3Wallet.isConnected);
+  const { isAutoConnectDisabled } = useMarketplaceContext();
+
+  const isPending =
+    (web3Wallet.isConnected && web3AccountWithDomain.isLoading) ||
+    (!web3Wallet.isConnected && web3Wallet.isOpen);
+
+  const handleOpenWalletClick = React.useCallback(() => {
+    web3Wallet.openModal();
+    walletMenu.onClose();
+  }, [ web3Wallet, walletMenu ]);
+
+  const handleDisconnectClick = React.useCallback(() => {
+    web3Wallet.disconnect();
+    walletMenu.onClose();
+  }, [ web3Wallet, walletMenu ]);
+
+  return (
+    <>
+      <UserWalletButton
+        variant="header"
+        onClick={ web3Wallet.isConnected ? walletMenu.onOpen : web3Wallet.openModal }
+        address={ web3AccountWithDomain.address }
+        domain={ web3AccountWithDomain.domain }
+        isPending={ isPending }
+      />
+      { web3AccountWithDomain.address && (
+        <Drawer
+          isOpen={ walletMenu.isOpen }
+          placement="right"
+          onClose={ walletMenu.onClose }
+          autoFocus={ false }
+        >
+          <DrawerOverlay/>
+          <DrawerContent maxWidth="300px">
+            <DrawerBody p={ 6 }>
+              <UserWalletMenuContent
+                address={ web3AccountWithDomain.address }
+                domain={ web3AccountWithDomain.domain }
+                isAutoConnectDisabled={ isAutoConnectDisabled }
+                isReconnecting={ web3Wallet.isReconnecting }
+                onOpenWallet={ handleOpenWalletClick }
+                onDisconnect={ handleDisconnectClick }
+              />
+            </DrawerBody>
+          </DrawerContent>
+        </Drawer>
+      ) }
+    </>
+  );
+};
+
+export default React.memo(UserWalletMobile);
diff --git a/ui/snippets/walletMenu/WalletMenuContent.tsx b/ui/snippets/walletMenu/WalletMenuContent.tsx
deleted file mode 100644
index 0578d3c6c5..0000000000
--- a/ui/snippets/walletMenu/WalletMenuContent.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Box, Button, Text } from '@chakra-ui/react';
-import React from 'react';
-
-import * as mixpanel from 'lib/mixpanel/index';
-import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-
-type Props = {
-  address?: string;
-  disconnect?: () => void;
-};
-
-const WalletMenuContent = ({ address, disconnect }: Props) => {
-  const onAddressClick = React.useCallback(() => {
-    mixpanel.logEvent(mixpanel.EventTypes.WALLET_ACTION, { Action: 'Address click' });
-  }, []);
-
-  return (
-    <Box>
-      <Text
-        fontSize="sm"
-        fontWeight={ 600 }
-        mb={ 1 }
-        { ...getDefaultTransitionProps() }
-      >
-        My wallet
-      </Text>
-      <Text
-        fontSize="sm"
-        mb={ 5 }
-        fontWeight={ 400 }
-        color="text_secondary"
-        { ...getDefaultTransitionProps() }
-      >
-        Your wallet is used to interact with apps and contracts in the explorer.
-      </Text>
-      <AddressEntity
-        address={{ hash: address }}
-        noTooltip
-        truncation="dynamic"
-        fontSize="sm"
-        fontWeight={ 700 }
-        color="text"
-        mb={ 6 }
-        onClick={ onAddressClick }
-      />
-      <Button size="sm" width="full" variant="outline" onClick={ disconnect }>
-        Disconnect
-      </Button>
-    </Box>
-  );
-};
-
-export default WalletMenuContent;
diff --git a/ui/snippets/walletMenu/WalletMenuMobile.tsx b/ui/snippets/walletMenu/WalletMenuMobile.tsx
deleted file mode 100644
index e8e6bcb48a..0000000000
--- a/ui/snippets/walletMenu/WalletMenuMobile.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, IconButton } from '@chakra-ui/react';
-import React from 'react';
-
-import useIsMobile from 'lib/hooks/useIsMobile';
-import * as mixpanel from 'lib/mixpanel/index';
-import AddressIdenticon from 'ui/shared/entities/address/AddressIdenticon';
-import IconSvg from 'ui/shared/IconSvg';
-import useWallet from 'ui/snippets/walletMenu/useWallet';
-import WalletMenuContent from 'ui/snippets/walletMenu/WalletMenuContent';
-
-import useMenuButtonColors from '../useMenuButtonColors';
-import WalletTooltip from './WalletTooltip';
-
-const WalletMenuMobile = () => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen } = useWallet({ source: 'Header' });
-  const { themedBackground, themedBorderColor, themedColor } = useMenuButtonColors();
-  const isMobile = useIsMobile();
-
-  const openPopover = React.useCallback(() => {
-    mixpanel.logEvent(mixpanel.EventTypes.WALLET_ACTION, { Action: 'Open' });
-    onOpen();
-  }, [ onOpen ]);
-
-  return (
-    <>
-      <WalletTooltip isDisabled={ isWalletConnected || isMobile === undefined || !isMobile } isMobile>
-        <IconButton
-          aria-label="wallet menu"
-          icon={ isWalletConnected ?
-            <AddressIdenticon size={ 20 } hash={ address }/> :
-            <IconSvg name="wallet" boxSize={ 6 }/>
-          }
-          variant={ isWalletConnected ? 'subtle' : 'outline' }
-          colorScheme="gray"
-          boxSize="40px"
-          flexShrink={ 0 }
-          bg={ isWalletConnected ? themedBackground : undefined }
-          color={ themedColor }
-          borderColor={ !isWalletConnected ? themedBorderColor : undefined }
-          onClick={ isWalletConnected ? openPopover : connect }
-          isLoading={ isModalOpening || isModalOpen }
-        />
-      </WalletTooltip>
-      { isWalletConnected && (
-        <Drawer
-          isOpen={ isOpen }
-          placement="right"
-          onClose={ onClose }
-          autoFocus={ false }
-        >
-          <DrawerOverlay/>
-          <DrawerContent maxWidth="260px">
-            <DrawerBody p={ 6 }>
-              <WalletMenuContent address={ address } disconnect={ disconnect }/>
-            </DrawerBody>
-          </DrawerContent>
-        </Drawer>
-      ) }
-    </>
-  );
-};
-
-export default WalletMenuMobile;
diff --git a/ui/snippets/walletMenu/WalletTooltip.tsx b/ui/snippets/walletMenu/WalletTooltip.tsx
deleted file mode 100644
index ba1ae85535..0000000000
--- a/ui/snippets/walletMenu/WalletTooltip.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Tooltip, useBoolean, useOutsideClick } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
-import React from 'react';
-
-import { SECOND } from 'lib/consts';
-
-type Props = {
-  children: React.ReactNode;
-  isDisabled?: boolean;
-  isMobile?: boolean;
-};
-
-const WalletTooltip = ({ children, isDisabled, isMobile }: Props) => {
-  const router = useRouter();
-  const [ isTooltipShown, setIsTooltipShown ] = useBoolean(false);
-  const ref = React.useRef(null);
-  useOutsideClick({ ref, handler: setIsTooltipShown.off });
-
-  const { defaultLabel, label, localStorageKey } = React.useMemo(() => {
-    const isAppPage = router.pathname === '/apps/[id]';
-    const defaultLabel = <span>Your wallet is used to interact with<br/>apps and contracts in the explorer</span>;
-    const label = isAppPage ?
-      <span>Connect once to use your wallet with<br/>all apps in the DAppscout marketplace!</span> :
-      defaultLabel;
-    const localStorageKey = `${ isAppPage ? 'dapp-' : '' }wallet-connect-tooltip-shown`;
-    return { defaultLabel, label, localStorageKey };
-  }, [ router.pathname ]);
-
-  React.useEffect(() => {
-    const wasShown = window.localStorage.getItem(localStorageKey);
-    const isMarketplacePage = [ '/apps', '/apps/[id]' ].includes(router.pathname);
-    if (!isDisabled && !wasShown && isMarketplacePage) {
-      setTimeout(() => {
-        setIsTooltipShown.on();
-        window.localStorage.setItem(localStorageKey, 'true');
-        setTimeout(() => setIsTooltipShown.off(), 5 * SECOND);
-      }, SECOND);
-    }
-  }, [ setIsTooltipShown, localStorageKey, isDisabled, router.pathname ]);
-
-  return (
-    <Tooltip
-      label={ isTooltipShown ? label : defaultLabel }
-      textAlign="center"
-      padding={ 2 }
-      isDisabled={ isDisabled }
-      openDelay={ 500 }
-      isOpen={ isTooltipShown || (isMobile ? false : undefined) }
-      onClose={ setIsTooltipShown.off }
-      display={ isMobile ? { base: 'flex', lg: 'none' } : { base: 'none', lg: 'flex' } }
-      ref={ ref }
-    >
-      { children }
-    </Tooltip>
-  );
-};
-
-export default WalletTooltip;
diff --git a/ui/snippets/walletMenu/useWallet.tsx b/ui/snippets/walletMenu/useWallet.tsx
deleted file mode 100644
index cccdaa166b..0000000000
--- a/ui/snippets/walletMenu/useWallet.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useWeb3Modal, useWeb3ModalState } from '@web3modal/wagmi/react';
-import React from 'react';
-import { useAccount, useDisconnect } from 'wagmi';
-
-import * as mixpanel from 'lib/mixpanel/index';
-
-interface Params {
-  source: mixpanel.EventPayload<mixpanel.EventTypes.WALLET_CONNECT>['Source'];
-}
-
-export default function useWallet({ source }: Params) {
-  const { open } = useWeb3Modal();
-  const { open: isOpen } = useWeb3ModalState();
-  const { disconnect } = useDisconnect();
-  const [ isModalOpening, setIsModalOpening ] = React.useState(false);
-  const [ isClientLoaded, setIsClientLoaded ] = React.useState(false);
-  const isConnectionStarted = React.useRef(false);
-
-  React.useEffect(() => {
-    setIsClientLoaded(true);
-  }, []);
-
-  const handleConnect = React.useCallback(async() => {
-    setIsModalOpening(true);
-    await open();
-    setIsModalOpening(false);
-    mixpanel.logEvent(mixpanel.EventTypes.WALLET_CONNECT, { Source: source, Status: 'Started' });
-    isConnectionStarted.current = true;
-  }, [ open, source ]);
-
-  const handleAccountConnected = React.useCallback(({ isReconnected }: { isReconnected: boolean }) => {
-    !isReconnected && isConnectionStarted.current &&
-      mixpanel.logEvent(mixpanel.EventTypes.WALLET_CONNECT, { Source: source, Status: 'Connected' });
-    isConnectionStarted.current = false;
-  }, [ source ]);
-
-  const handleDisconnect = React.useCallback(() => {
-    disconnect();
-  }, [ disconnect ]);
-
-  const { address, isDisconnected } = useAccount({ onConnect: handleAccountConnected });
-
-  const isWalletConnected = isClientLoaded && !isDisconnected && address !== undefined;
-
-  return {
-    isWalletConnected,
-    address: address || '',
-    connect: handleConnect,
-    disconnect: handleDisconnect,
-    isModalOpening,
-    isModalOpen: isOpen,
-  };
-}
diff --git a/ui/sol2uml/Sol2UmlDiagram.tsx b/ui/sol2uml/Sol2UmlDiagram.tsx
index eaebf9c3c1..8af184211f 100644
--- a/ui/sol2uml/Sol2UmlDiagram.tsx
+++ b/ui/sol2uml/Sol2UmlDiagram.tsx
@@ -1,6 +1,7 @@
 import { chakra, Tooltip, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
+import type * as visualizer from '@blockscout/visualizer-types';
 import type { SmartContract } from 'types/api/contract';
 
 import type { ResourceError } from 'lib/api/resources';
@@ -13,7 +14,7 @@ interface Props {
   addressHash: string;
 }
 
-function composeSources(contract: SmartContract | undefined) {
+function composeSources(contract: SmartContract | undefined): visualizer.VisualizeStorageRequest['sources'] {
   if (!contract) {
     return {};
   }
@@ -23,7 +24,7 @@ function composeSources(contract: SmartContract | undefined) {
   }, {});
 
   return {
-    [contract.file_path || 'index.sol']: contract.source_code,
+    [contract.file_path || 'index.sol']: contract.source_code || '',
     ...additionalSources,
   };
 }
@@ -45,6 +46,7 @@ const Sol2UmlDiagram = ({ addressHash }: Props) => {
       },
     },
     queryOptions: {
+      queryKey: [ 'visualize_sol2uml', addressHash ],
       enabled: Boolean(contractQuery.data),
       refetchOnMount: false,
     },
@@ -76,7 +78,7 @@ const Sol2UmlDiagram = ({ addressHash }: Props) => {
   return (
     <Tooltip label="Click on image to zoom" placement="top">
       <chakra.img
-        src={ `data:image/svg+xml;base64,${ umlQuery.data.svg }` }
+        src={ imgUrl }
         alt={ `Contract ${ contractQuery.data.name } UML diagram` }
         onClick={ handleClick }
         cursor="pointer"
diff --git a/ui/stats/ChartWidgetContainer.tsx b/ui/stats/ChartWidgetContainer.tsx
index 3c577813b1..c3896fae4a 100644
--- a/ui/stats/ChartWidgetContainer.tsx
+++ b/ui/stats/ChartWidgetContainer.tsx
@@ -1,11 +1,14 @@
-import React, { useEffect, useMemo } from 'react';
+import { chakra } from '@chakra-ui/react';
+import React, { useEffect } from 'react';
 
+import { Resolution } from '@blockscout/stats-types';
 import type { StatsIntervalIds } from 'types/client/stats';
 
-import useApiQuery from 'lib/api/useApiQuery';
+import type { Route } from 'nextjs-routes';
+
+import useChartQuery from 'ui/shared/chart/useChartQuery';
 
 import ChartWidget from '../shared/chart/ChartWidget';
-import { STATS_INTERVALS } from './constants';
 
 type Props = {
   id: string;
@@ -15,51 +18,42 @@ type Props = {
   interval: StatsIntervalIds;
   onLoadingError: () => void;
   isPlaceholderData: boolean;
-}
-
-function formatDate(date: Date) {
-  return date.toISOString().substring(0, 10);
-}
-
-const ChartWidgetContainer = ({ id, title, description, interval, onLoadingError, units, isPlaceholderData }: Props) => {
-  const selectedInterval = STATS_INTERVALS[interval];
-
-  const endDate = selectedInterval.start ? formatDate(new Date()) : undefined;
-  const startDate = selectedInterval.start ? formatDate(selectedInterval.start) : undefined;
-
-  const { data, isPending, isError } = useApiQuery('stats_line', {
-    pathParams: { id },
-    queryParams: {
-      from: startDate,
-      to: endDate,
-    },
-    queryOptions: {
-      enabled: !isPlaceholderData,
-      refetchOnMount: false,
-    },
-  });
+  className?: string;
+  href?: Route;
+};
 
-  const items = useMemo(() => data?.chart?.map((item) => {
-    return { date: new Date(item.date), value: Number(item.value) };
-  }), [ data ]);
+const ChartWidgetContainer = ({
+  id,
+  title,
+  description,
+  interval,
+  onLoadingError,
+  units,
+  isPlaceholderData,
+  className,
+  href,
+}: Props) => {
+  const { items, lineQuery } = useChartQuery(id, Resolution.DAY, interval, !isPlaceholderData);
 
   useEffect(() => {
-    if (isError) {
+    if (lineQuery.isError) {
       onLoadingError();
     }
-  }, [ isError, onLoadingError ]);
+  }, [ lineQuery.isError, onLoadingError ]);
 
   return (
     <ChartWidget
-      isError={ isError }
+      isError={ lineQuery.isError }
       items={ items }
       title={ title }
       units={ units }
       description={ description }
-      isLoading={ isPending }
+      isLoading={ lineQuery.isPlaceholderData }
       minH="230px"
+      className={ className }
+      href={ href }
     />
   );
 };
 
-export default ChartWidgetContainer;
+export default chakra(ChartWidgetContainer);
diff --git a/ui/stats/ChartsWidgetsList.tsx b/ui/stats/ChartsWidgetsList.tsx
index e15423fcd4..308d87972a 100644
--- a/ui/stats/ChartsWidgetsList.tsx
+++ b/ui/stats/ChartsWidgetsList.tsx
@@ -1,44 +1,42 @@
-import type { TooltipProps } from '@chakra-ui/react';
 import { Box, Grid, Heading, List, ListItem, Skeleton } from '@chakra-ui/react';
 import React, { useCallback, useState } from 'react';
 
-import type { StatsChartsSection } from 'types/api/stats';
+import type * as stats from '@blockscout/stats-types';
 import type { StatsIntervalIds } from 'types/client/stats';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import { apos } from 'lib/html-entities';
 import EmptySearchResult from 'ui/shared/EmptySearchResult';
-import GasInfoTooltipContent from 'ui/shared/GasInfoTooltipContent/GasInfoTooltipContent';
-import Hint from 'ui/shared/Hint';
+import GasInfoTooltip from 'ui/shared/gas/GasInfoTooltip';
+import IconSvg from 'ui/shared/IconSvg';
 
 import ChartsLoadingErrorAlert from './ChartsLoadingErrorAlert';
 import ChartWidgetContainer from './ChartWidgetContainer';
 
-const GAS_TOOLTIP_PROPS: Partial<TooltipProps> = {
-  borderRadius: 'md',
-  hasArrow: false,
-  padding: 0,
-};
-
 type Props = {
   filterQuery: string;
+  initialFilterQuery: string;
   isError: boolean;
   isPlaceholderData: boolean;
-  charts?: Array<StatsChartsSection>;
+  charts?: Array<stats.LineChartSection>;
   interval: StatsIntervalIds;
-}
+};
 
-const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, interval }: Props) => {
+const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, interval, initialFilterQuery }: Props) => {
   const [ isSomeChartLoadingError, setIsSomeChartLoadingError ] = useState(false);
   const isAnyChartDisplayed = charts?.some((section) => section.charts.length > 0);
   const isEmptyChartList = Boolean(filterQuery) && !isAnyChartDisplayed;
+  const sectionRef = React.useRef<HTMLUListElement | null>(null);
 
-  const homeStatsQuery = useApiQuery('homepage_stats', {
-    fetchParams: {
-      headers: {
-        'updated-gas-oracle': 'true',
-      },
-    },
+  const shouldScrollToSection = Boolean(initialFilterQuery);
+
+  React.useEffect(() => {
+    if (shouldScrollToSection) {
+      sectionRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [ shouldScrollToSection ]);
+
+  const homeStatsQuery = useApiQuery('stats', {
     queryOptions: {
       refetchOnMount: false,
     },
@@ -62,7 +60,7 @@ const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, in
         <ChartsLoadingErrorAlert/>
       ) }
 
-      <List>
+      <List ref={ sectionRef }>
         {
           charts?.map((section) => (
             <ListItem
@@ -72,15 +70,14 @@ const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, in
                 marginBottom: 0,
               }}
             >
-              <Skeleton isLoaded={ !isPlaceholderData } mb={ 4 } display="inline-flex" alignItems="center" columnGap={ 2 }>
-                <Heading size="md" >
+              <Skeleton isLoaded={ !isPlaceholderData } mb={ 4 } display="inline-flex" alignItems="center" columnGap={ 2 } id={ section.id }>
+                <Heading size="md" id={ section.id }>
                   { section.title }
                 </Heading>
                 { section.id === 'gas' && homeStatsQuery.data && homeStatsQuery.data.gas_prices && (
-                  <Hint
-                    label={ <GasInfoTooltipContent data={ homeStatsQuery.data } dataUpdatedAt={ homeStatsQuery.dataUpdatedAt }/> }
-                    tooltipProps={ GAS_TOOLTIP_PROPS }
-                  />
+                  <GasInfoTooltip data={ homeStatsQuery.data } dataUpdatedAt={ homeStatsQuery.dataUpdatedAt }>
+                    <IconSvg name="info" boxSize={ 5 } display="block" cursor="pointer" color="icon_info" _hover={{ color: 'link_hovered' }}/>
+                  </GasInfoTooltip>
                 ) }
               </Skeleton>
 
@@ -98,6 +95,7 @@ const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, in
                     units={ chart.units || undefined }
                     isPlaceholderData={ isPlaceholderData }
                     onLoadingError={ handleChartLoadingError }
+                    href={{ pathname: '/stats/[id]', query: { id: chart.id } }}
                   />
                 )) }
               </Grid>
diff --git a/ui/stats/NumberWidgetsList.tsx b/ui/stats/NumberWidgetsList.tsx
index 6f7a9c7dab..ad222401b5 100644
--- a/ui/stats/NumberWidgetsList.tsx
+++ b/ui/stats/NumberWidgetsList.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import { STATS_COUNTER } from 'stubs/stats';
-import StatsItem from 'ui/home/StatsItem';
+import StatsWidget from 'ui/shared/stats/StatsWidget';
 
 import DataFetchAlert from '../shared/DataFetchAlert';
 
@@ -25,29 +25,27 @@ const NumberWidgetsList = () => {
       gridTemplateColumns={{ base: 'repeat(2, 1fr)', lg: 'repeat(4, 1fr)' }}
       gridGap={ 4 }
     >
-      { data?.counters?.map(
-        ({ id, title, value, units, description }, index) => {
+      {
+        data?.counters?.map(({ id, title, value, units, description }, index) => {
+
           let unitsStr = '';
-          if (UNITS_WITHOUT_SPACE.includes(units)) {
+          if (units && UNITS_WITHOUT_SPACE.includes(units)) {
             unitsStr = units;
           } else if (units) {
             unitsStr = ' ' + units;
           }
 
           return (
-            <StatsItem
+            <StatsWidget
               key={ id + (isPlaceholderData ? index : '') }
-              title={ title }
-              value={ `${ Number(value).toLocaleString(undefined, {
-                maximumFractionDigits: 3,
-                notation: 'compact',
-              }) }${ unitsStr }` }
+              label={ title }
+              value={ `${ Number(value).toLocaleString(undefined, { maximumFractionDigits: 3, notation: 'compact' }) }${ unitsStr }` }
               isLoading={ isPlaceholderData }
-              tooltipLabel={ description }
+              hint={ description }
             />
           );
-        },
-      ) }
+        })
+      }
     </Grid>
   );
 };
diff --git a/ui/stats/StatsFilters.tsx b/ui/stats/StatsFilters.tsx
index 23f1bfce47..5721877b13 100644
--- a/ui/stats/StatsFilters.tsx
+++ b/ui/stats/StatsFilters.tsx
@@ -1,27 +1,23 @@
 import { Grid, GridItem } from '@chakra-ui/react';
 import React from 'react';
 
-import type { StatsChartsSection } from 'types/api/stats';
-import type { StatsInterval, StatsIntervalIds } from 'types/client/stats';
+import type * as stats from '@blockscout/stats-types';
+import type { StatsIntervalIds } from 'types/client/stats';
 
+import ChartIntervalSelect from 'ui/shared/chart/ChartIntervalSelect';
 import FilterInput from 'ui/shared/filters/FilterInput';
-
-import { STATS_INTERVALS } from './constants';
-import StatsDropdownMenu from './StatsDropdownMenu';
-
-const intervalList = Object.keys(STATS_INTERVALS).map((id: string) => ({
-  id: id,
-  title: STATS_INTERVALS[id as StatsIntervalIds].title,
-})) as Array<StatsInterval>;
+import Select from 'ui/shared/select/Select';
 
 type Props = {
-  sections?: Array<StatsChartsSection>;
+  sections?: Array<stats.LineChartSection>;
   currentSection: string;
   onSectionChange: (newSection: string) => void;
   interval: StatsIntervalIds;
   onIntervalChange: (newInterval: StatsIntervalIds) => void;
   onFilterInputChange: (q: string) => void;
-}
+  isLoading: boolean;
+  initialFilterValue: string;
+};
 
 const StatsFilters = ({
   sections,
@@ -30,31 +26,39 @@ const StatsFilters = ({
   interval,
   onIntervalChange,
   onFilterInputChange,
+  isLoading,
+  initialFilterValue,
 }: Props) => {
 
-  const sectionsList = [ {
-    id: 'all',
-    title: 'All',
-  }, ... (sections || []) ];
+  const options = React.useMemo(() => {
+    return [
+      { value: 'all', label: 'All stats' },
+      ...(sections || []).map((section) => ({ value: section.id, label: section.title })),
+    ];
+  }, [ sections ]);
 
   return (
     <Grid
-      gap={ 2 }
+      gap={{ base: 2, lg: 6 }}
       templateAreas={{
         base: `"section interval"
                 "input input"`,
         lg: `"section interval input"`,
       }}
       gridTemplateColumns={{ base: 'repeat(2, minmax(0, 1fr))', lg: 'auto auto 1fr' }}
+      alignItems="center"
     >
       <GridItem
         w={{ base: '100%', lg: 'auto' }}
         area="section"
       >
-        <StatsDropdownMenu
-          items={ sectionsList }
-          selectedId={ currentSection }
-          onSelect={ onSectionChange }
+        <Select
+          options={ options }
+          defaultValue={ currentSection }
+          onChange={ onSectionChange }
+          isLoading={ isLoading }
+          w={{ base: '100%', lg: '136px' }}
+          fontWeight={ 600 }
         />
       </GridItem>
 
@@ -62,11 +66,7 @@ const StatsFilters = ({
         w={{ base: '100%', lg: 'auto' }}
         area="interval"
       >
-        <StatsDropdownMenu
-          items={ intervalList }
-          selectedId={ interval }
-          onSelect={ onIntervalChange }
-        />
+        <ChartIntervalSelect interval={ interval } onIntervalChange={ onIntervalChange } isLoading={ isLoading } selectTagSize="md"/>
       </GridItem>
 
       <GridItem
@@ -74,8 +74,13 @@ const StatsFilters = ({
         area="input"
       >
         <FilterInput
+          key={ initialFilterValue }
+          isLoading={ isLoading }
           onChange={ onFilterInputChange }
-          placeholder="Find chart, metric..."/>
+          placeholder="Find chart, metric..."
+          initialValue={ initialFilterValue }
+          size="xs"
+        />
       </GridItem>
     </Grid>
   );
diff --git a/ui/stats/constants/index.ts b/ui/stats/constants/index.ts
index bf77117c4c..e048f9b214 100644
--- a/ui/stats/constants/index.ts
+++ b/ui/stats/constants/index.ts
@@ -1,23 +1,48 @@
+import { Resolution } from '@blockscout/stats-types';
 import type { StatsIntervalIds } from 'types/client/stats';
 
-export const STATS_INTERVALS: { [key in StatsIntervalIds]: { title: string; start?: Date } } = {
+export const STATS_RESOLUTIONS: Array<{ id: Resolution; title: string }> = [
+  {
+    id: Resolution.DAY,
+    title: 'Day',
+  },
+  {
+    id: Resolution.WEEK,
+    title: 'Week',
+  },
+  {
+    id: Resolution.MONTH,
+    title: 'Month',
+  },
+  {
+    id: Resolution.YEAR,
+    title: 'Year',
+  },
+];
+
+export const STATS_INTERVALS: { [key in StatsIntervalIds]: { title: string; shortTitle: string; start?: Date } } = {
   all: {
     title: 'All time',
+    shortTitle: 'All time',
   },
   oneMonth: {
     title: '1 month',
+    shortTitle: '1M',
     start: getStartDateInPast(1),
   },
   threeMonths: {
     title: '3 months',
+    shortTitle: '3M',
     start: getStartDateInPast(3),
   },
   sixMonths: {
     title: '6 months',
+    shortTitle: '6M',
     start: getStartDateInPast(6),
   },
   oneYear: {
     title: '1 year',
+    shortTitle: '1Y',
     start: getStartDateInPast(12),
   },
 };
diff --git a/ui/stats/useStats.tsx b/ui/stats/useStats.tsx
index 565c413b11..f4a15dc110 100644
--- a/ui/stats/useStats.tsx
+++ b/ui/stats/useStats.tsx
@@ -1,21 +1,24 @@
+import { useRouter } from 'next/router';
 import React, { useCallback, useMemo, useState } from 'react';
 
-import type { StatsChartInfo, StatsChartsSection } from 'types/api/stats';
+import type * as stats from '@blockscout/stats-types';
 import type { StatsIntervalIds } from 'types/client/stats';
 
 import useApiQuery from 'lib/api/useApiQuery';
-import useDebounce from 'lib/hooks/useDebounce';
+import getQueryParamString from 'lib/router/getQueryParamString';
 import { STATS_CHARTS } from 'stubs/stats';
 
-function isSectionMatches(section: StatsChartsSection, currentSection: string): boolean {
+function isSectionMatches(section: stats.LineChartSection, currentSection: string): boolean {
   return currentSection === 'all' || section.id === currentSection;
 }
 
-function isChartNameMatches(q: string, chart: StatsChartInfo) {
+function isChartNameMatches(q: string, chart: stats.LineChartInfo) {
   return chart.title.toLowerCase().includes(q.toLowerCase());
 }
 
 export default function useStats() {
+  const router = useRouter();
+
   const { data, isPlaceholderData, isError } = useApiQuery('stats_lines', {
     queryOptions: {
       placeholderData: STATS_CHARTS,
@@ -24,22 +27,35 @@ export default function useStats() {
 
   const [ currentSection, setCurrentSection ] = useState('all');
   const [ filterQuery, setFilterQuery ] = useState('');
+  const [ initialFilterQuery, setInitialFilterQuery ] = React.useState('');
   const [ interval, setInterval ] = useState<StatsIntervalIds>('oneMonth');
   const sectionIds = useMemo(() => data?.sections?.map(({ id }) => id), [ data ]);
 
-  const debouncedFilterQuery = useDebounce(filterQuery, 500);
+  React.useEffect(() => {
+    if (!isPlaceholderData && !isError) {
+      const chartId = getQueryParamString(router.query.chartId);
+      const chartName = data?.sections.map((section) => section.charts.find((chart) => chart.id === chartId)).filter(Boolean)[0]?.title;
+      if (chartName) {
+        setInitialFilterQuery(chartName);
+        setFilterQuery(chartName);
+        router.replace({ pathname: '/stats' }, undefined, { scroll: false });
+      }
+    }
+  // run only when data is loaded
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ isPlaceholderData ]);
 
   const displayedCharts = React.useMemo(() => {
     return data?.sections
       ?.map((section) => {
-        const charts = section.charts.filter((chart) => isSectionMatches(section, currentSection) && isChartNameMatches(debouncedFilterQuery, chart));
+        const charts = section.charts.filter((chart) => isSectionMatches(section, currentSection) && isChartNameMatches(filterQuery, chart));
 
         return {
           ...section,
           charts,
         };
       }).filter((section) => section.charts.length > 0);
-  }, [ currentSection, data?.sections, debouncedFilterQuery ]);
+  }, [ currentSection, data?.sections, filterQuery ]);
 
   const handleSectionChange = useCallback((newSection: string) => {
     setCurrentSection(newSection);
@@ -58,6 +74,7 @@ export default function useStats() {
     sectionIds,
     isPlaceholderData,
     isError,
+    initialFilterQuery,
     filterQuery,
     currentSection,
     handleSectionChange,
@@ -70,6 +87,7 @@ export default function useStats() {
     sectionIds,
     isPlaceholderData,
     isError,
+    initialFilterQuery,
     filterQuery,
     currentSection,
     handleSectionChange,
diff --git a/ui/token/TokenDetails.tsx b/ui/token/TokenDetails.tsx
index 2a3e41e23d..d3e5152eb9 100644
--- a/ui/token/TokenDetails.tsx
+++ b/ui/token/TokenDetails.tsx
@@ -7,13 +7,17 @@ import { scroller } from 'react-scroll';
 
 import type { TokenInfo } from 'types/api/token';
 
+import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
 import useApiQuery from 'lib/api/useApiQuery';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
 import getCurrencyValue from 'lib/getCurrencyValue';
+import useIsMounted from 'lib/hooks/useIsMounted';
 import { TOKEN_COUNTERS } from 'stubs/token';
 import type { TokenTabs } from 'ui/pages/Token';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import AppActionButton from 'ui/shared/AppActionButton/AppActionButton';
+import useAppActionData from 'ui/shared/AppActionButton/useAppActionData';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
@@ -25,6 +29,8 @@ interface Props {
 
 const TokenDetails = ({ tokenQuery }: Props) => {
   const router = useRouter();
+  const isMounted = useIsMounted();
+
   const hash = router.query.hash?.toString();
 
   const tokenCountersQuery = useApiQuery('token_counters', {
@@ -32,6 +38,8 @@ const TokenDetails = ({ tokenQuery }: Props) => {
     queryOptions: { enabled: Boolean(router.query.hash), placeholderData: TOKEN_COUNTERS },
   });
 
+  const appActionData = useAppActionData(hash);
+
   const changeUrlAndScroll = useCallback((tab: TokenTabs) => () => {
     router.push(
       { pathname: '/token/[hash]', query: { hash: hash || '', tab } },
@@ -66,6 +74,10 @@ const TokenDetails = ({ tokenQuery }: Props) => {
 
   throwOnResourceLoadError(tokenQuery);
 
+  if (!isMounted) {
+    return null;
+  }
+
   const {
     exchange_rate: exchangeRate,
     total_supply: totalSupply,
@@ -77,7 +89,7 @@ const TokenDetails = ({ tokenQuery }: Props) => {
 
   let totalSupplyValue;
 
-  if (type === 'ERC-20') {
+  if (decimals) {
     const totalValue = totalSupply ? getCurrencyValue({ value: totalSupply, accuracy: 3, accuracyUsd: 2, exchangeRate, decimals }) : undefined;
     totalSupplyValue = totalValue?.valueStr;
   } else {
@@ -91,77 +103,118 @@ const TokenDetails = ({ tokenQuery }: Props) => {
       templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden"
     >
       { exchangeRate && (
-        <DetailsInfoItem
-          title="Price"
-          hint="Price per token on the exchanges"
-          alignSelf="center"
-          isLoading={ tokenQuery.isPlaceholderData }
-        >
-          <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } display="inline-block">
-            <span>{ `$${ Number(exchangeRate).toLocaleString(undefined, { minimumSignificantDigits: 4 }) }` }</span>
-          </Skeleton>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Price per token on the exchanges"
+            isLoading={ tokenQuery.isPlaceholderData }
+          >
+            Price
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } display="inline-block">
+              <span>{ `$${ Number(exchangeRate).toLocaleString(undefined, { minimumSignificantDigits: 4 }) }` }</span>
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       { marketCap && (
-        <DetailsInfoItem
-          title="Fully diluted market cap"
-          hint="Total supply * Price"
-          alignSelf="center"
-          isLoading={ tokenQuery.isPlaceholderData }
-        >
-          <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } display="inline-block">
-            <span>{ `$${ BigNumber(marketCap).toFormat() }` }</span>
-          </Skeleton>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Total supply * Price"
+            isLoading={ tokenQuery.isPlaceholderData }
+          >
+            Fully diluted market cap
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } display="inline-block">
+              <span>{ `$${ BigNumber(marketCap).toFormat() }` }</span>
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
       ) }
-      <DetailsInfoItem
-        title="Max total supply"
+
+      <DetailsInfoItem.Label
         hint="The total amount of tokens issued"
+        isLoading={ tokenQuery.isPlaceholderData }
+      >
+        Max total supply
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value
         alignSelf="center"
         wordBreak="break-word"
         whiteSpace="pre-wrap"
-        isLoading={ tokenQuery.isPlaceholderData }
       >
         <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } w="100%" display="flex">
           <TruncatedValue value={ totalSupplyValue || '0' } maxW="80%" flexShrink={ 0 }/>
           <Box flexShrink={ 0 }> </Box>
           <TruncatedValue value={ symbol || '' }/>
         </Skeleton>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Holders"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Number of accounts holding the token"
-        alignSelf="center"
         isLoading={ tokenQuery.isPlaceholderData }
       >
+        Holders
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !tokenCountersQuery.isPlaceholderData }>
           { countersItem('token_holders_count') }
         </Skeleton>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Transfers"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Number of transfer for the token"
-        alignSelf="center"
         isLoading={ tokenQuery.isPlaceholderData }
       >
+        Transfers
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !tokenCountersQuery.isPlaceholderData }>
           { countersItem('transfers_count') }
         </Skeleton>
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
+
       { decimals && (
-        <DetailsInfoItem
-          title="Decimals"
-          hint="Number of digits that come after the decimal place when displaying token value"
-          alignSelf="center"
+        <>
+          <DetailsInfoItem.Label
+            hint="Number of digits that come after the decimal place when displaying token value"
+            isLoading={ tokenQuery.isPlaceholderData }
+          >
+            Decimals
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } minW={ 6 }>
+              { decimals }
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { type !== 'ERC-20' && (
+        <TokenNftMarketplaces
+          hash={ hash }
           isLoading={ tokenQuery.isPlaceholderData }
-        >
-          <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } minW={ 6 }>
-            { decimals }
-          </Skeleton>
-        </DetailsInfoItem>
+          appActionData={ appActionData }
+          source="NFT collection"
+        />
       ) }
 
-      { type !== 'ERC-20' && <TokenNftMarketplaces hash={ hash } isLoading={ tokenQuery.isPlaceholderData }/> }
+      { (type !== 'ERC-20' && config.UI.views.nft.marketplaces.length === 0 && appActionData) && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Link to the dapp"
+          >
+            Dapp
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value
+            py="1px"
+          >
+            <AppActionButton data={ appActionData } height="30px" source="NFT collection"/>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
 
       <DetailsSponsoredItem isLoading={ tokenQuery.isPlaceholderData }/>
     </Grid>
diff --git a/ui/token/TokenHolders/TokenHolders.tsx b/ui/token/TokenHolders/TokenHolders.tsx
index 5b912d5aa8..0b06b70866 100644
--- a/ui/token/TokenHolders/TokenHolders.tsx
+++ b/ui/token/TokenHolders/TokenHolders.tsx
@@ -4,6 +4,8 @@ import React from 'react';
 import type { TokenInfo } from 'types/api/token';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
+import useIsMounted from 'lib/hooks/useIsMounted';
+import AddressCsvExportLink from 'ui/address/AddressCsvExportLink';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DataListDisplay from 'ui/shared/DataListDisplay';
@@ -13,20 +15,33 @@ import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPage
 import TokenHoldersList from './TokenHoldersList';
 import TokenHoldersTable from './TokenHoldersTable';
 
+const TABS_HEIGHT = 88;
+
 type Props = {
   token?: TokenInfo;
   holdersQuery: QueryWithPagesResult<'token_holders'>;
-}
-
-const TokenHoldersContent = ({ holdersQuery, token }: Props) => {
+  shouldRender?: boolean;
+};
 
+const TokenHoldersContent = ({ holdersQuery, token, shouldRender = true }: Props) => {
   const isMobile = useIsMobile();
+  const isMounted = useIsMounted();
+
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
   if (holdersQuery.isError) {
     return <DataFetchAlert/>;
   }
 
   const actionBar = isMobile && holdersQuery.pagination.isVisible && (
     <ActionBar mt={ -6 }>
+      <AddressCsvExportLink
+        address={ token?.address }
+        params={{ type: 'holders' }}
+        isLoading={ holdersQuery.pagination.isLoading }
+      />
       <Pagination ml="auto" { ...holdersQuery.pagination }/>
     </ActionBar>
   );
@@ -39,7 +54,7 @@ const TokenHoldersContent = ({ holdersQuery, token }: Props) => {
         <TokenHoldersTable
           data={ items }
           token={ token }
-          top={ holdersQuery.pagination.isVisible ? 80 : 0 }
+          top={ holdersQuery.pagination.isVisible ? TABS_HEIGHT : 0 }
           isLoading={ holdersQuery.isPlaceholderData }
         />
       </Box>
diff --git a/ui/token/TokenHolders/TokenHoldersList.pw.tsx b/ui/token/TokenHolders/TokenHoldersList.pw.tsx
index 2bd3fd1267..c6b1f4fca9 100644
--- a/ui/token/TokenHolders/TokenHoldersList.pw.tsx
+++ b/ui/token/TokenHolders/TokenHoldersList.pw.tsx
@@ -1,30 +1,19 @@
-import { test, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { tokenHoldersERC20, tokenHoldersERC1155 } from 'mocks/tokens/tokenHolders';
 import { tokenInfo, tokenInfoERC1155a } from 'mocks/tokens/tokenInfo';
-import TestApp from 'playwright/TestApp';
+import { test, expect, devices } from 'playwright/lib';
 
 import TokenHoldersList from './TokenHoldersList';
 
 test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-test('base view without IDs', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TokenHoldersList data={ tokenHoldersERC20.items } token={ tokenInfo }/>
-    </TestApp>,
-  );
-
+test('base view without IDs', async({ render }) => {
+  const component = await render(<TokenHoldersList data={ tokenHoldersERC20.items } token={ tokenInfo }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('base view with IDs', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TokenHoldersList data={ tokenHoldersERC1155.items } token={ tokenInfoERC1155a }/>
-    </TestApp>,
-  );
-
+test('base view with IDs', async({ render }) => {
+  const component = await render(<TokenHoldersList data={ tokenHoldersERC1155.items } token={ tokenInfoERC1155a }/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/token/TokenHolders/TokenHoldersListItem.tsx b/ui/token/TokenHolders/TokenHoldersListItem.tsx
index cfe3b31a76..65dc4b2f3a 100644
--- a/ui/token/TokenHolders/TokenHoldersListItem.tsx
+++ b/ui/token/TokenHolders/TokenHoldersListItem.tsx
@@ -29,7 +29,7 @@ const TokenHoldersListItem = ({ holder, token, isLoading }: Props) => {
         />
       </ListItemMobileGrid.Value>
 
-      { token.type === 'ERC-1155' && 'token_id' in holder && (
+      { (token.type === 'ERC-1155' || token.type === 'ERC-404') && 'token_id' in holder && (
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>ID#</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
@@ -47,7 +47,7 @@ const TokenHoldersListItem = ({ holder, token, isLoading }: Props) => {
         </Skeleton>
       </ListItemMobileGrid.Value>
 
-      { token.total_supply && (
+      { token.total_supply && token.type !== 'ERC-404' && (
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>Percentage</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
diff --git a/ui/token/TokenHolders/TokenHoldersTable.pw.tsx b/ui/token/TokenHolders/TokenHoldersTable.pw.tsx
index 1f81e97af5..de818fc680 100644
--- a/ui/token/TokenHolders/TokenHoldersTable.pw.tsx
+++ b/ui/token/TokenHolders/TokenHoldersTable.pw.tsx
@@ -1,30 +1,27 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { tokenHoldersERC20, tokenHoldersERC1155 } from 'mocks/tokens/tokenHolders';
 import { tokenInfo, tokenInfoERC1155a } from 'mocks/tokens/tokenInfo';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import TokenHoldersTable from './TokenHoldersTable';
 
-test('base view without IDs', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h="128px"/>
-      <TokenHoldersTable data={ tokenHoldersERC20.items } token={ tokenInfo } top={ 80 }/>
-    </TestApp>,
+test('base view without IDs', async({ render }) => {
+  const component = await render(
+    <Box pt="128px">
+      <TokenHoldersTable data={ tokenHoldersERC20.items } token={ tokenInfo } top={ 88 }/>
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('base view with IDs', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h="128px"/>
-      <TokenHoldersTable data={ tokenHoldersERC1155.items } token={ tokenInfoERC1155a } top={ 80 }/>
-    </TestApp>,
+test('base view with IDs', async({ render }) => {
+  const component = await render(
+    <Box pt="128px">
+      <TokenHoldersTable data={ tokenHoldersERC1155.items } token={ tokenInfoERC1155a } top={ 88 }/>
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
diff --git a/ui/token/TokenHolders/TokenHoldersTable.tsx b/ui/token/TokenHolders/TokenHoldersTable.tsx
index e44e981bb6..c4884113c7 100644
--- a/ui/token/TokenHolders/TokenHoldersTable.tsx
+++ b/ui/token/TokenHolders/TokenHoldersTable.tsx
@@ -15,13 +15,13 @@ interface Props {
 
 const TokenHoldersTable = ({ data, token, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" layout="auto">
+    <Table layout="auto">
       <Thead top={ top }>
         <Tr>
           <Th>Holder</Th>
-          { token.type === 'ERC-1155' && <Th>ID#</Th> }
+          { (token.type === 'ERC-1155' || token.type === 'ERC-404') && <Th>ID#</Th> }
           <Th isNumeric>Quantity</Th>
-          { token.total_supply && <Th isNumeric width="175px">Percentage</Th> }
+          { token.total_supply && token.type !== 'ERC-404' && <Th isNumeric width="175px">Percentage</Th> }
         </Tr>
       </Thead>
       <Tbody>
diff --git a/ui/token/TokenHolders/TokenHoldersTableItem.tsx b/ui/token/TokenHolders/TokenHoldersTableItem.tsx
index 8bfc187e0a..dce7db76bf 100644
--- a/ui/token/TokenHolders/TokenHoldersTableItem.tsx
+++ b/ui/token/TokenHolders/TokenHoldersTableItem.tsx
@@ -11,7 +11,7 @@ type Props = {
   holder: TokenHolder;
   token: TokenInfo;
   isLoading?: boolean;
-}
+};
 
 const TokenTransferTableItem = ({ holder, token, isLoading }: Props) => {
   const quantity = BigNumber(holder.value).div(BigNumber(10 ** Number(token.decimals))).toFormat();
@@ -26,7 +26,7 @@ const TokenTransferTableItem = ({ holder, token, isLoading }: Props) => {
           fontWeight="700"
         />
       </Td>
-      { token.type === 'ERC-1155' && 'token_id' in holder && (
+      { (token.type === 'ERC-1155' || token.type === 'ERC-404') && 'token_id' in holder && (
         <Td verticalAlign="middle">
           <Skeleton isLoaded={ !isLoading } display="inline-block">
             { 'token_id' in holder && holder.token_id }
@@ -38,7 +38,7 @@ const TokenTransferTableItem = ({ holder, token, isLoading }: Props) => {
           { quantity }
         </Skeleton>
       </Td>
-      { token.total_supply && (
+      { token.total_supply && token.type !== 'ERC-404' && (
         <Td verticalAlign="middle" isNumeric>
           <Utilization
             value={ BigNumber(holder.value).div(BigNumber(token.total_supply)).dp(4).toNumber() }
diff --git a/ui/token/TokenHolders/__screenshots__/TokenHoldersList.pw.tsx_default_base-view-with-IDs-1.png b/ui/token/TokenHolders/__screenshots__/TokenHoldersList.pw.tsx_default_base-view-with-IDs-1.png
index 1a9d52a433..4535fa0940 100644
Binary files a/ui/token/TokenHolders/__screenshots__/TokenHoldersList.pw.tsx_default_base-view-with-IDs-1.png and b/ui/token/TokenHolders/__screenshots__/TokenHoldersList.pw.tsx_default_base-view-with-IDs-1.png differ
diff --git a/ui/token/TokenHolders/__screenshots__/TokenHoldersList.pw.tsx_default_base-view-without-IDs-1.png b/ui/token/TokenHolders/__screenshots__/TokenHoldersList.pw.tsx_default_base-view-without-IDs-1.png
index 165649e767..6edced59e8 100644
Binary files a/ui/token/TokenHolders/__screenshots__/TokenHoldersList.pw.tsx_default_base-view-without-IDs-1.png and b/ui/token/TokenHolders/__screenshots__/TokenHoldersList.pw.tsx_default_base-view-without-IDs-1.png differ
diff --git a/ui/token/TokenHolders/__screenshots__/TokenHoldersTable.pw.tsx_default_base-view-with-IDs-1.png b/ui/token/TokenHolders/__screenshots__/TokenHoldersTable.pw.tsx_default_base-view-with-IDs-1.png
index 7b6d0fe71b..f8127ab2d7 100644
Binary files a/ui/token/TokenHolders/__screenshots__/TokenHoldersTable.pw.tsx_default_base-view-with-IDs-1.png and b/ui/token/TokenHolders/__screenshots__/TokenHoldersTable.pw.tsx_default_base-view-with-IDs-1.png differ
diff --git a/ui/token/TokenHolders/__screenshots__/TokenHoldersTable.pw.tsx_default_base-view-without-IDs-1.png b/ui/token/TokenHolders/__screenshots__/TokenHoldersTable.pw.tsx_default_base-view-without-IDs-1.png
index 9fad9e20a6..c73837abbd 100644
Binary files a/ui/token/TokenHolders/__screenshots__/TokenHoldersTable.pw.tsx_default_base-view-without-IDs-1.png and b/ui/token/TokenHolders/__screenshots__/TokenHoldersTable.pw.tsx_default_base-view-without-IDs-1.png differ
diff --git a/ui/token/TokenInventory.pw.tsx b/ui/token/TokenInventory.pw.tsx
index d7b75dee28..250a57012f 100644
--- a/ui/token/TokenInventory.pw.tsx
+++ b/ui/token/TokenInventory.pw.tsx
@@ -1,36 +1,39 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { tokenInfoERC721a } from 'mocks/tokens/tokenInfo';
-import { base as tokenInstanse } from 'mocks/tokens/tokenInstance';
-import TestApp from 'playwright/TestApp';
+import { base as tokenInstance } from 'mocks/tokens/tokenInstance';
+import { test, expect } from 'playwright/lib';
 
 import TokenInventory from './TokenInventory';
 
-test('base view +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 0 }}/>
+test('base view +@mobile', async({ render, mockAssetResponse }) => {
+
+  const item = { ...tokenInstance, image_url: null };
+
+  await mockAssetResponse(tokenInstance.image_url as string, './playwright/mocks/image_s.jpg');
+
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 0 }}>
       <TokenInventory
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+
         // @ts-ignore:
         inventoryQuery={{
           data: {
-            items: [ tokenInstanse, tokenInstanse, tokenInstanse ],
+            items: [ tokenInstance, item, item ],
             next_page_params: { unique_token: 1 },
           },
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+
           // @ts-ignore:
           pagination: { page: 1, isVisible: true },
         }}
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+
         // @ts-ignore:
         tokenQuery={{
           data: tokenInfoERC721a,
         }}
       />
-    </TestApp>,
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
diff --git a/ui/token/TokenInventory.tsx b/ui/token/TokenInventory.tsx
index eed0e3fe47..7cd6095fc4 100644
--- a/ui/token/TokenInventory.tsx
+++ b/ui/token/TokenInventory.tsx
@@ -7,6 +7,7 @@ import type { TokenInfo } from 'types/api/token';
 import type { ResourceError } from 'lib/api/resources';
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import useIsMounted from 'lib/hooks/useIsMounted';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
@@ -20,15 +21,21 @@ type Props = {
   inventoryQuery: QueryWithPagesResult<'token_inventory'>;
   tokenQuery: UseQueryResult<TokenInfo, ResourceError<unknown>>;
   ownerFilter?: string;
-}
+  shouldRender?: boolean;
+};
 
-const TokenInventory = ({ inventoryQuery, tokenQuery, ownerFilter }: Props) => {
+const TokenInventory = ({ inventoryQuery, tokenQuery, ownerFilter, shouldRender = true }: Props) => {
   const isMobile = useIsMobile();
+  const isMounted = useIsMounted();
 
   const resetOwnerFilter = React.useCallback(() => {
     inventoryQuery.onFilterChange({});
   }, [ inventoryQuery ]);
 
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
   const isActionBarHidden = !ownerFilter && !inventoryQuery.data?.items.length;
 
   const ownerFilterComponent = ownerFilter && (
@@ -68,7 +75,7 @@ const TokenInventory = ({ inventoryQuery, tokenQuery, ownerFilter }: Props) => {
       >
         { items.map((item, index) => (
           <TokenInventoryItem
-            key={ token.address + '_' + item.id + (inventoryQuery.isPlaceholderData ? '_' + index : '') }
+            key={ item.id + '_' + index + (inventoryQuery.isPlaceholderData ? '_' + 'placeholder' : '') }
             item={ item }
             isLoading={ inventoryQuery.isPlaceholderData || tokenQuery.isPlaceholderData }
             token={ token }
@@ -83,6 +90,10 @@ const TokenInventory = ({ inventoryQuery, tokenQuery, ownerFilter }: Props) => {
       isError={ inventoryQuery.isError }
       items={ items }
       emptyText="There are no tokens."
+      filterProps={{
+        hasActiveFilters: Boolean(ownerFilter),
+        emptyFilteredText: 'No tokens found for the selected owner.',
+      }}
       content={ content }
       actionBar={ actionBar }
     />
diff --git a/ui/token/TokenInventoryItem.tsx b/ui/token/TokenInventoryItem.tsx
index 72f650d2b8..1b9467b0d7 100644
--- a/ui/token/TokenInventoryItem.tsx
+++ b/ui/token/TokenInventoryItem.tsx
@@ -7,7 +7,7 @@ import { route } from 'nextjs-routes';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import NftMedia from 'ui/shared/nft/NftMedia';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
@@ -20,8 +20,9 @@ const TokenInventoryItem = ({ item, token, isLoading }: Props) => {
   const mediaElement = (
     <NftMedia
       mb="18px"
-      url={ item.animation_url || item.image_url }
+      data={ item }
       isLoading={ isLoading }
+      autoplayVideo={ false }
     />
   );
 
diff --git a/ui/token/TokenNftMarketplaces.tsx b/ui/token/TokenNftMarketplaces.tsx
index d2aea7442a..4081c7e209 100644
--- a/ui/token/TokenNftMarketplaces.tsx
+++ b/ui/token/TokenNftMarketplaces.tsx
@@ -1,48 +1,65 @@
 import { Image, Link, Skeleton, Tooltip } from '@chakra-ui/react';
 import React from 'react';
 
+import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
+
 import config from 'configs/app';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import AppActionButton from 'ui/shared/AppActionButton/AppActionButton';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import TextSeparator from 'ui/shared/TextSeparator';
 
 interface Props {
   hash: string | undefined;
   id?: string;
   isLoading?: boolean;
+  appActionData?: AddressMetadataTagFormatted['meta'];
+  source: 'NFT collection' | 'NFT item';
 }
 
-const TokenNftMarketplaces = ({ hash, id, isLoading }: Props) => {
+const TokenNftMarketplaces = ({ hash, id, isLoading, appActionData, source }: Props) => {
   if (!hash || config.UI.views.nft.marketplaces.length === 0) {
     return null;
   }
 
   return (
-    <DetailsInfoItem
-      title="Marketplaces"
-      hint="Marketplaces trading this NFT"
-      alignSelf="center"
-      isLoading={ isLoading }
-    >
-      <Skeleton isLoaded={ !isLoading } display="flex" columnGap={ 3 } flexWrap="wrap">
-        { config.UI.views.nft.marketplaces.map((item) => {
-
-          const hrefTemplate = id ? item.instance_url : item.collection_url;
-          const href = hrefTemplate.replace('{id}', id || '').replace('{hash}', hash || '');
-
-          return (
-            <Tooltip label={ `View on ${ item.name }` } key={ item.name }>
-              <Link href={ href } target="_blank">
-                <Image
-                  src={ item.logo_url }
-                  alt={ `${ item.name } marketplace logo` }
-                  boxSize={ 5 }
-                  borderRadius="full"
-                />
-              </Link>
-            </Tooltip>
-          );
-        }) }
-      </Skeleton>
-    </DetailsInfoItem>
+    <>
+      <DetailsInfoItem.Label
+        hint="Marketplaces trading this NFT"
+        isLoading={ isLoading }
+      >
+        Marketplaces
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value
+        py={ appActionData ? '1px' : '6px' }
+      >
+        <Skeleton isLoaded={ !isLoading } display="flex" columnGap={ 3 } flexWrap="wrap" alignItems="center">
+          { config.UI.views.nft.marketplaces.map((item) => {
+
+            const hrefTemplate = id ? item.instance_url : item.collection_url;
+            const href = hrefTemplate.replace('{id}', id || '').replace('{hash}', hash || '');
+
+            return (
+              <Tooltip label={ `View on ${ item.name }` } key={ item.name }>
+                <Link href={ href } target="_blank">
+                  <Image
+                    src={ item.logo_url }
+                    alt={ `${ item.name } marketplace logo` }
+                    boxSize={ 5 }
+                    borderRadius="full"
+                  />
+                </Link>
+              </Tooltip>
+            );
+          }) }
+          { appActionData && (
+            <>
+              <TextSeparator color="gray.500" margin={ 0 }/>
+              <AppActionButton data={ appActionData } height="30px" source={ source }/>
+            </>
+          ) }
+        </Skeleton>
+      </DetailsInfoItem.Value>
+    </>
   );
 };
 
diff --git a/ui/token/TokenPageTitle.tsx b/ui/token/TokenPageTitle.tsx
new file mode 100644
index 0000000000..544923077d
--- /dev/null
+++ b/ui/token/TokenPageTitle.tsx
@@ -0,0 +1,165 @@
+import { Box, Flex, Tooltip, useToken } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import React from 'react';
+
+import type { Address } from 'types/api/address';
+import type { TokenInfo } from 'types/api/token';
+import type { EntityTag } from 'ui/shared/EntityTags/types';
+
+import config from 'configs/app';
+import useAddressMetadataInfoQuery from 'lib/address/useAddressMetadataInfoQuery';
+import type { ResourceError } from 'lib/api/resources';
+import useApiQuery from 'lib/api/useApiQuery';
+import { useAppContext } from 'lib/contexts/app';
+import { getTokenTypeName } from 'lib/token/tokenTypes';
+import AddressMetadataAlert from 'ui/address/details/AddressMetadataAlert';
+import AddressQrCode from 'ui/address/details/AddressQrCode';
+import AccountActionsMenu from 'ui/shared/AccountActionsMenu/AccountActionsMenu';
+import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import EntityTags from 'ui/shared/EntityTags/EntityTags';
+import formatUserTags from 'ui/shared/EntityTags/formatUserTags';
+import sortEntityTags from 'ui/shared/EntityTags/sortEntityTags';
+import IconSvg from 'ui/shared/IconSvg';
+import NetworkExplorers from 'ui/shared/NetworkExplorers';
+import PageTitle from 'ui/shared/Page/PageTitle';
+
+import TokenVerifiedInfo from './TokenVerifiedInfo';
+
+const PREDEFINED_TAG_PRIORITY = 100;
+
+interface Props {
+  tokenQuery: UseQueryResult<TokenInfo, ResourceError<unknown>>;
+  addressQuery: UseQueryResult<Address, ResourceError<unknown>>;
+  hash: string;
+}
+
+const TokenPageTitle = ({ tokenQuery, addressQuery, hash }: Props) => {
+  const appProps = useAppContext();
+  const addressHash = !tokenQuery.isPlaceholderData ? (tokenQuery.data?.address || '') : '';
+
+  const verifiedInfoQuery = useApiQuery('token_verified_info', {
+    pathParams: { hash: addressHash, chainId: config.chain.id },
+    queryOptions: { enabled: Boolean(tokenQuery.data) && !tokenQuery.isPlaceholderData && config.features.verifiedTokens.isEnabled },
+  });
+
+  const addressesForMetadataQuery = React.useMemo(() => ([ hash ].filter(Boolean)), [ hash ]);
+  const addressMetadataQuery = useAddressMetadataInfoQuery(addressesForMetadataQuery);
+
+  const isLoading = tokenQuery.isPlaceholderData ||
+    addressQuery.isPlaceholderData ||
+    (config.features.verifiedTokens.isEnabled && verifiedInfoQuery.isPending);
+
+  const tokenSymbolText = tokenQuery.data?.symbol ? ` (${ tokenQuery.data.symbol })` : '';
+
+  const backLink = React.useMemo(() => {
+    const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/tokens');
+
+    if (!hasGoBackLink) {
+      return;
+    }
+
+    return {
+      label: 'Back to tokens list',
+      url: appProps.referrer,
+    };
+  }, [ appProps.referrer ]);
+
+  const bridgedTokenTagBgColor = useToken('colors', 'blue.500');
+  const bridgedTokenTagTextColor = useToken('colors', 'white');
+
+  const tags: Array<EntityTag> = React.useMemo(() => {
+    return [
+      tokenQuery.data ? {
+        slug: tokenQuery.data?.type,
+        name: getTokenTypeName(tokenQuery.data.type),
+        tagType: 'custom' as const,
+        ordinal: PREDEFINED_TAG_PRIORITY,
+      } : undefined,
+      config.features.bridgedTokens.isEnabled && tokenQuery.data?.is_bridged ?
+        {
+          slug: 'bridged',
+          name: 'Bridged',
+          tagType: 'custom' as const,
+          ordinal: PREDEFINED_TAG_PRIORITY,
+          meta: { bgColor: bridgedTokenTagBgColor, textColor: bridgedTokenTagTextColor },
+        } :
+        undefined,
+      ...formatUserTags(addressQuery.data),
+      verifiedInfoQuery.data?.projectSector ?
+        { slug: verifiedInfoQuery.data.projectSector, name: verifiedInfoQuery.data.projectSector, tagType: 'custom' as const, ordinal: -30 } :
+        undefined,
+      ...(addressMetadataQuery.data?.addresses?.[hash.toLowerCase()]?.tags.filter(tag => tag.tagType !== 'note') || []),
+    ].filter(Boolean).sort(sortEntityTags);
+  }, [
+    addressMetadataQuery.data?.addresses,
+    addressQuery.data,
+    bridgedTokenTagBgColor,
+    bridgedTokenTagTextColor,
+    tokenQuery.data,
+    verifiedInfoQuery.data?.projectSector,
+    hash,
+  ]);
+
+  const contentAfter = (
+    <>
+      { verifiedInfoQuery.data?.tokenAddress && (
+        <Tooltip label={ `Information on this token has been verified by ${ config.chain.name }` }>
+          <Box boxSize={ 6 }>
+            <IconSvg name="certified" color="green.500" boxSize={ 6 } cursor="pointer"/>
+          </Box>
+        </Tooltip>
+      ) }
+      <EntityTags
+        isLoading={ isLoading || (config.features.addressMetadata.isEnabled && addressMetadataQuery.isPending) }
+        tags={ tags }
+        flexGrow={ 1 }
+      />
+    </>
+  );
+
+  const secondRow = (
+    <Flex alignItems="center" w="100%" minW={ 0 } columnGap={ 2 } rowGap={ 2 } flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
+      { addressQuery.data && (
+        <AddressEntity
+          address={{ ...addressQuery.data, name: '' }}
+          isLoading={ isLoading }
+          fontFamily="heading"
+          fontSize="lg"
+          fontWeight={ 500 }
+        />
+      ) }
+      { !isLoading && tokenQuery.data && <AddressAddToWallet token={ tokenQuery.data } variant="button"/> }
+      <AddressQrCode address={ addressQuery.data } isLoading={ isLoading }/>
+      <AccountActionsMenu isLoading={ isLoading }/>
+      <Flex ml={{ base: 0, lg: 'auto' }} columnGap={ 2 } flexGrow={{ base: 1, lg: 0 }}>
+        <TokenVerifiedInfo verifiedInfoQuery={ verifiedInfoQuery }/>
+        <NetworkExplorers type="token" pathParam={ addressHash } ml={{ base: 'auto', lg: 0 }}/>
+      </Flex>
+    </Flex>
+  );
+
+  return (
+    <>
+      <PageTitle
+        title={ `${ tokenQuery.data?.name || 'Unnamed token' }${ tokenSymbolText }` }
+        isLoading={ tokenQuery.isPlaceholderData }
+        backLink={ backLink }
+        beforeTitle={ tokenQuery.data ? (
+          <TokenEntity.Icon
+            token={ tokenQuery.data }
+            isLoading={ tokenQuery.isPlaceholderData }
+            size="lg"
+          />
+        ) : null }
+        contentAfter={ contentAfter }
+        secondRow={ secondRow }
+      />
+      { !addressMetadataQuery.isPending &&
+        <AddressMetadataAlert tags={ addressMetadataQuery.data?.addresses?.[hash.toLowerCase()]?.tags } mt="-4px" mb={ 6 }/> }
+    </>
+  );
+};
+
+export default TokenPageTitle;
diff --git a/ui/token/TokenProjectInfo.tsx b/ui/token/TokenProjectInfo.tsx
index 4aa71e47f2..92a74503a7 100644
--- a/ui/token/TokenProjectInfo.tsx
+++ b/ui/token/TokenProjectInfo.tsx
@@ -1,54 +1,24 @@
-import {
-  Popover, PopoverTrigger, PopoverContent, PopoverBody,
-  Modal, ModalContent, ModalCloseButton,
-  useDisclosure,
-} from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenVerifiedInfo } from 'types/api/token';
 
-import useIsMobile from 'lib/hooks/useIsMobile';
+import InfoButton from 'ui/shared/InfoButton';
 
 import Content, { hasContent } from './TokenProjectInfo/Content';
-import TriggerButton from './TokenProjectInfo/TriggerButton';
 
 interface Props {
   data: TokenVerifiedInfo;
 }
 
 const TokenProjectInfo = ({ data }: Props) => {
-  const isMobile = useIsMobile();
-  const { isOpen, onToggle, onClose } = useDisclosure();
-
   if (!hasContent(data)) {
     return null;
   }
 
-  if (isMobile) {
-    return (
-      <>
-        <TriggerButton onClick={ onToggle }/>
-        <Modal isOpen={ isOpen } onClose={ onClose } size="full">
-          <ModalContent>
-            <ModalCloseButton/>
-            <Content data={ data }/>
-          </ModalContent>
-        </Modal>
-      </>
-    );
-  }
-
   return (
-    <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
-      <PopoverTrigger>
-        <TriggerButton onClick={ onToggle }/>
-      </PopoverTrigger>
-      <PopoverContent w="500px">
-        <PopoverBody px={ 6 } py={ 5 }>
-          <Content data={ data }/>
-        </PopoverBody>
-      </PopoverContent>
-    </Popover>
+    <InfoButton>
+      <Content data={ data }/>
+    </InfoButton>
   );
 };
 
diff --git a/ui/token/TokenProjectInfo/Content.tsx b/ui/token/TokenProjectInfo/Content.tsx
index 91a7d80704..16cdfb4d79 100644
--- a/ui/token/TokenProjectInfo/Content.tsx
+++ b/ui/token/TokenProjectInfo/Content.tsx
@@ -14,7 +14,7 @@ interface Props {
 
 const SOCIAL_LINKS: Array<Omit<ServiceLinkProps, 'href'>> = [
   { field: 'github', icon: 'social/github_filled', title: 'Github' },
-  { field: 'twitter', icon: 'social/twitter_filled', title: 'Twitter' },
+  { field: 'twitter', icon: 'social/twitter_filled', title: 'X (ex-Twitter)' },
   { field: 'telegram', icon: 'social/telegram_filled', title: 'Telegram' },
   { field: 'openSea', icon: 'social/opensea_filled', title: 'OpenSea' },
   { field: 'linkedin', icon: 'social/linkedin_filled', title: 'LinkedIn' },
diff --git a/ui/token/TokenProjectInfo/TriggerButton.tsx b/ui/token/TokenProjectInfo/TriggerButton.tsx
deleted file mode 100644
index 5398df16e1..0000000000
--- a/ui/token/TokenProjectInfo/TriggerButton.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Button } from '@chakra-ui/react';
-import React from 'react';
-
-import IconSvg from 'ui/shared/IconSvg';
-
-interface Props {
-  onClick: () => void;
-}
-
-const TriggerButton = ({ onClick }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
-  return (
-    <Button
-      ref={ ref }
-      size="sm"
-      variant="outline"
-      colorScheme="gray"
-      onClick={ onClick }
-      aria-label="Show project info"
-      fontWeight={ 500 }
-      px={ 2 }
-      h="32px"
-    >
-      <IconSvg name="rocket" boxSize={ 5 } mr={ 1 }/>
-      <span>Info</span>
-    </Button>
-  );
-};
-
-export default React.forwardRef(TriggerButton);
diff --git a/ui/token/TokenTransfer/TokenTransfer.pw.tsx b/ui/token/TokenTransfer/TokenTransfer.pw.tsx
index 70e6eb4699..421452e3ac 100644
--- a/ui/token/TokenTransfer/TokenTransfer.pw.tsx
+++ b/ui/token/TokenTransfer/TokenTransfer.pw.tsx
@@ -1,64 +1,69 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import { tokenInfoERC20a, tokenInfoERC721a, tokenInfoERC1155a } from 'mocks/tokens/tokenInfo';
 import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import TokenTransfer from './TokenTransfer';
 
-test('erc20 +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: '100px' }}/>
+test('erc20 +@mobile', async({ render }) => {
+  const component = await render(
+    <Box pt={{ base: '134px', lg: '100px' }}>
       <TokenTransfer
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+
         // @ts-ignore:
         transfersQuery={{
           data: {
             items: [ tokenTransferMock.erc20 ],
             next_page_params: null,
           },
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+
           // @ts-ignore:
           pagination: { page: 1, isVisible: true },
         }}
+        // @ts-ignore:
+        tokenQuery={{
+          data: tokenInfoERC20a,
+        }}
       />
-    </TestApp>,
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('erc721 +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: '100px' }}/>
+test('erc721 +@mobile', async({ render }) => {
+  const component = await render(
+    <Box pt={{ base: '134px', lg: '100px' }}>
       <TokenTransfer
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+
         // @ts-ignore:
         transfersQuery={{
           data: {
             items: [ tokenTransferMock.erc721 ],
             next_page_params: null,
           },
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+
           // @ts-ignore:
           pagination: { page: 1, isVisible: true },
         }}
+        // @ts-ignore:
+        tokenQuery={{
+          data: tokenInfoERC721a,
+        }}
       />
-    </TestApp>,
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('erc1155 +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: '100px' }}/>
+test('erc1155 +@mobile', async({ render }) => {
+  const component = await render(
+    <Box pt={{ base: '134px', lg: '100px' }}>
       <TokenTransfer
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+
         // @ts-ignore:
         transfersQuery={{
           data: {
@@ -70,12 +75,16 @@ test('erc1155 +@mobile', async({ mount }) => {
             ],
             next_page_params: null,
           },
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+
           // @ts-ignore:
           pagination: { page: 1, isVisible: true },
         }}
+        // @ts-ignore:
+        tokenQuery={{
+          data: tokenInfoERC1155a,
+        }}
       />
-    </TestApp>,
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
diff --git a/ui/token/TokenTransfer/TokenTransfer.tsx b/ui/token/TokenTransfer/TokenTransfer.tsx
index 5c28a3d129..e85b874118 100644
--- a/ui/token/TokenTransfer/TokenTransfer.tsx
+++ b/ui/token/TokenTransfer/TokenTransfer.tsx
@@ -1,12 +1,15 @@
 import { Box } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
 import type { TokenInfo } from 'types/api/token';
 
+import type { ResourceError } from 'lib/api/resources';
 import useGradualIncrement from 'lib/hooks/useGradualIncrement';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import useIsMounted from 'lib/hooks/useIsMounted';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import ActionBar from 'ui/shared/ActionBar';
@@ -17,16 +20,21 @@ import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 import TokenTransferList from 'ui/token/TokenTransfer/TokenTransferList';
 import TokenTransferTable from 'ui/token/TokenTransfer/TokenTransferTable';
 
+const TABS_HEIGHT = 88;
+
 type Props = {
   transfersQuery: QueryWithPagesResult<'token_transfers'> | QueryWithPagesResult<'token_instance_transfers'>;
   tokenId?: string;
-  token?: TokenInfo;
-}
+  tokenQuery: UseQueryResult<TokenInfo, ResourceError<unknown>>;
+  shouldRender?: boolean;
+};
 
-const TokenTransfer = ({ transfersQuery, tokenId, token }: Props) => {
+const TokenTransfer = ({ transfersQuery, tokenId, tokenQuery, shouldRender = true }: Props) => {
   const isMobile = useIsMobile();
+  const isMounted = useIsMounted();
   const router = useRouter();
   const { isError, isPlaceholderData, data, pagination } = transfersQuery;
+  const { data: token, isPlaceholderData: isTokenPlaceholderData, isError: isTokenError } = tokenQuery;
 
   const [ newItemsCount, setNewItemsCount ] = useGradualIncrement(0);
   const [ socketAlert, setSocketAlert ] = React.useState('');
@@ -55,19 +63,24 @@ const TokenTransfer = ({ transfersQuery, tokenId, token }: Props) => {
     handler: handleNewTransfersMessage,
   });
 
-  const content = data?.items ? (
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
+  const isLoading = isPlaceholderData || isTokenPlaceholderData;
 
+  const content = data?.items && token ? (
     <>
       <Box display={{ base: 'none', lg: 'block' }}>
         <TokenTransferTable
           data={ data?.items }
-          top={ pagination.isVisible ? 80 : 0 }
+          top={ pagination.isVisible ? TABS_HEIGHT : 0 }
           showSocketInfo={ pagination.page === 1 }
           socketInfoAlert={ socketAlert }
           socketInfoNum={ newItemsCount }
           tokenId={ tokenId }
           token={ token }
-          isLoading={ isPlaceholderData }
+          isLoading={ isLoading }
         />
       </Box>
       <Box display={{ base: 'block', lg: 'none' }}>
@@ -77,10 +90,10 @@ const TokenTransfer = ({ transfersQuery, tokenId, token }: Props) => {
             num={ newItemsCount }
             alert={ socketAlert }
             type="token_transfer"
-            isLoading={ isPlaceholderData }
+            isLoading={ isLoading }
           />
         ) }
-        <TokenTransferList data={ data?.items } tokenId={ tokenId } isLoading={ isPlaceholderData }/>
+        <TokenTransferList data={ data?.items } tokenId={ tokenId } isLoading={ isLoading }/>
       </Box>
     </>
   ) : null;
@@ -93,7 +106,7 @@ const TokenTransfer = ({ transfersQuery, tokenId, token }: Props) => {
 
   return (
     <DataListDisplay
-      isError={ isError }
+      isError={ isError || isTokenError }
       items={ data?.items }
       emptyText="There are no token transfers."
       content={ content }
diff --git a/ui/token/TokenTransfer/TokenTransferList.tsx b/ui/token/TokenTransfer/TokenTransferList.tsx
index cbf87e3f54..abd2fd38fe 100644
--- a/ui/token/TokenTransfer/TokenTransferList.tsx
+++ b/ui/token/TokenTransfer/TokenTransferList.tsx
@@ -16,7 +16,7 @@ const TokenTransferList = ({ data, tokenId, isLoading }: Props) => {
     <Box>
       { data.map((item, index) => (
         <TokenTransferListItem
-          key={ item.tx_hash + item.block_hash + item.log_index + '_' + index }
+          key={ item.transaction_hash + item.block_hash + item.log_index + '_' + index }
           { ...item }
           tokenId={ tokenId }
           isLoading={ isLoading }
diff --git a/ui/token/TokenTransfer/TokenTransferListItem.tsx b/ui/token/TokenTransfer/TokenTransferListItem.tsx
index 63342e6d4f..8886a533b8 100644
--- a/ui/token/TokenTransfer/TokenTransferListItem.tsx
+++ b/ui/token/TokenTransfer/TokenTransferListItem.tsx
@@ -4,12 +4,13 @@ import React from 'react';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import Tag from 'ui/shared/chakra/Tag';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
 type Props = TokenTransfer & { tokenId?: string; isLoading?: boolean };
@@ -17,7 +18,7 @@ type Props = TokenTransfer & { tokenId?: string; isLoading?: boolean };
 const TokenTransferListItem = ({
   token,
   total,
-  tx_hash: txHash,
+  transaction_hash: txHash,
   from,
   to,
   method,
@@ -25,10 +26,9 @@ const TokenTransferListItem = ({
   tokenId,
   isLoading,
 }: Props) => {
-  const timeAgo = useTimeAgoIncrement(timestamp, true);
-  const { usd, valueStr } = 'value' in total ? getCurrencyValue({
+  const { usd, valueStr } = total && 'value' in total && total.value !== null ? getCurrencyValue({
     value: total.value,
-    exchangeRate: token.exchange_rate,
+    exchangeRate: token?.exchange_rate,
     accuracy: 8,
     accuracyUsd: 2,
     decimals: total.decimals || '0',
@@ -40,27 +40,29 @@ const TokenTransferListItem = ({
         <TxEntity
           isLoading={ isLoading }
           hash={ txHash }
-          truncation="constant"
+          truncation="constant_long"
           fontWeight="700"
         />
-        { timestamp && (
-          <Skeleton isLoaded={ !isLoading } display="inline-block" fontWeight="400" fontSize="sm" color="text_secondary">
-            <span>
-              { timeAgo }
-            </span>
-          </Skeleton>
-        ) }
+        <TimeAgoWithTooltip
+          timestamp={ timestamp }
+          enableIncrement
+          isLoading={ isLoading }
+          color="text_secondary"
+          fontWeight="400"
+          fontSize="sm"
+          display="inline-block"
+        />
       </Flex>
       { method && <Tag isLoading={ isLoading }>{ method }</Tag> }
       <AddressFromTo
         from={ from }
         to={ to }
         isLoading={ isLoading }
-        tokenHash={ token.address }
+        tokenHash={ token?.address }
         w="100%"
         fontWeight="500"
       />
-      { valueStr && (token.type === 'ERC-20' || token.type === 'ERC-1155') && (
+      { valueStr && token && (token.type === 'ERC-20' || token.type === 'ERC-1155') && (
         <Grid gap={ 2 } templateColumns={ `1fr auto auto${ usd ? ' auto' : '' }` }>
           <Skeleton isLoaded={ !isLoading } flexShrink={ 0 } fontWeight={ 500 }>
             Value
@@ -87,7 +89,7 @@ const TokenTransferListItem = ({
           ) }
         </Grid>
       ) }
-      { 'token_id' in total && (token.type === 'ERC-721' || token.type === 'ERC-1155') && (
+      { total && 'token_id' in total && token && (NFT_TOKEN_TYPE_IDS.includes(token.type)) && total.token_id !== null && (
         <NftEntity
           hash={ token.address }
           id={ total.token_id }
diff --git a/ui/token/TokenTransfer/TokenTransferTable.tsx b/ui/token/TokenTransfer/TokenTransferTable.tsx
index 8ffd5e3912..29f744a1a8 100644
--- a/ui/token/TokenTransfer/TokenTransferTable.tsx
+++ b/ui/token/TokenTransfer/TokenTransferTable.tsx
@@ -5,6 +5,7 @@ import type { TokenInfo } from 'types/api/token';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
+import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 import { default as Thead } from 'ui/shared/TheadSticky';
 import TruncatedValue from 'ui/shared/TruncatedValue';
@@ -18,23 +19,26 @@ interface Props {
   socketInfoNum?: number;
   tokenId?: string;
   isLoading?: boolean;
-  token?: TokenInfo;
+  token: TokenInfo;
 }
 
 const TokenTransferTable = ({ data, top, showSocketInfo, socketInfoAlert, socketInfoNum, tokenId, isLoading, token }: Props) => {
-  const tokenType = data[0].token.type;
+
+  const tokenType = token.type;
 
   return (
     <AddressHighlightProvider>
-      <Table variant="simple" size="sm">
+      <Table minW="950px">
         <Thead top={ top }>
           <Tr>
-            <Th width={ tokenType === 'ERC-1155' ? '50%' : '75%' }>Txn hash</Th>
-            <Th width="164px">Method</Th>
-            <Th width={{ lg: '200px', xl: '420px' }}>From/To</Th>
-            { (tokenType === 'ERC-721' || tokenType === 'ERC-1155') && <Th width="25%" isNumeric={ tokenType === 'ERC-721' }>Token ID</Th> }
-            { (tokenType === 'ERC-20' || tokenType === 'ERC-1155') && (
-              <Th width="25%" isNumeric>
+            <Th width="280px">Txn hash</Th>
+            <Th width="200px">Method</Th>
+            <Th width={{ lg: '224px', xl: '380px' }}>From/To</Th>
+            { (NFT_TOKEN_TYPE_IDS.includes(tokenType)) &&
+              <Th width={ tokenType === 'ERC-1155' || tokenType === 'ERC-404' ? '50%' : '100%' }>Token ID</Th>
+            }
+            { (tokenType === 'ERC-20' || tokenType === 'ERC-1155' || tokenType === 'ERC-404') && (
+              <Th width={ tokenType === 'ERC-20' ? '100%' : '50%' } isNumeric>
                 <TruncatedValue value={ `Value ${ token?.symbol || '' }` } w="100%" verticalAlign="middle"/>
               </Th>
             ) }
@@ -52,7 +56,7 @@ const TokenTransferTable = ({ data, top, showSocketInfo, socketInfoAlert, socket
           ) }
           { data.map((item, index) => (
             <TokenTransferTableItem
-              key={ item.tx_hash + item.block_hash + item.log_index + '_' + index }
+              key={ item.transaction_hash + item.block_hash + item.log_index + '_' + index }
               { ...item }
               tokenId={ tokenId }
               isLoading={ isLoading }
diff --git a/ui/token/TokenTransfer/TokenTransferTableItem.tsx b/ui/token/TokenTransfer/TokenTransferTableItem.tsx
index 5fa807d1ac..216df530c1 100644
--- a/ui/token/TokenTransfer/TokenTransferTableItem.tsx
+++ b/ui/token/TokenTransfer/TokenTransferTableItem.tsx
@@ -1,21 +1,22 @@
-import { Tr, Td, Grid, Skeleton, Box } from '@chakra-ui/react';
+import { Tr, Td, Flex, Skeleton, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import Tag from 'ui/shared/chakra/Tag';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
-type Props = TokenTransfer & { tokenId?: string; isLoading?: boolean }
+type Props = TokenTransfer & { tokenId?: string; isLoading?: boolean };
 
 const TokenTransferTableItem = ({
   token,
   total,
-  tx_hash: txHash,
+  transaction_hash: txHash,
   from,
   to,
   method,
@@ -23,10 +24,9 @@ const TokenTransferTableItem = ({
   tokenId,
   isLoading,
 }: Props) => {
-  const timeAgo = useTimeAgoIncrement(timestamp, true);
-  const { usd, valueStr } = 'value' in total ? getCurrencyValue({
+  const { usd, valueStr } = total && 'value' in total && total.value !== null ? getCurrencyValue({
     value: total.value,
-    exchangeRate: token.exchange_rate,
+    exchangeRate: token?.exchange_rate,
     accuracy: 8,
     accuracyUsd: 2,
     decimals: total.decimals || '0',
@@ -35,21 +35,24 @@ const TokenTransferTableItem = ({
   return (
     <Tr alignItems="top">
       <Td>
-        <Grid alignItems="center" gridTemplateColumns="auto 130px" width="fit-content" py="7px">
+        <Flex alignItems="center" py="7px">
           <TxEntity
             hash={ txHash }
             isLoading={ isLoading }
             fontWeight={ 600 }
             noIcon
+            truncation="constant_long"
           />
-          { timestamp && (
-            <Skeleton isLoaded={ !isLoading } display="inline-block" color="gray.500" fontWeight="400" ml="10px">
-              <span>
-                { timeAgo }
-              </span>
-            </Skeleton>
-          ) }
-        </Grid>
+          <TimeAgoWithTooltip
+            timestamp={ timestamp }
+            enableIncrement
+            isLoading={ isLoading }
+            display="inline-block"
+            color="gray.500"
+            fontWeight="400"
+            ml="10px"
+          />
+        </Flex>
       </Td>
       <Td>
         { method ? (
@@ -65,12 +68,12 @@ const TokenTransferTableItem = ({
           isLoading={ isLoading }
           mt="5px"
           mode={{ lg: 'compact', xl: 'long' }}
-          tokenHash={ token.address }
+          tokenHash={ token?.address }
         />
       </Td>
-      { (token.type === 'ERC-721' || token.type === 'ERC-1155') && (
+      { (token && NFT_TOKEN_TYPE_IDS.includes(token.type)) && (
         <Td>
-          { 'token_id' in total ? (
+          { total && 'token_id' in total && token && total.token_id !== null ? (
             <NftEntity
               hash={ token.address }
               id={ total.token_id }
@@ -81,7 +84,7 @@ const TokenTransferTableItem = ({
           }
         </Td>
       ) }
-      { (token.type === 'ERC-20' || token.type === 'ERC-1155') && (
+      { token && (token.type === 'ERC-20' || token.type === 'ERC-1155' || token.type === 'ERC-404') && (
         <Td isNumeric verticalAlign="top">
           { valueStr && (
             <Skeleton isLoaded={ !isLoading } display="inline-block" mt="7px" wordBreak="break-all">
diff --git a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc1155-mobile-1.png b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc1155-mobile-1.png
index 2d55eec444..391dd402d9 100644
Binary files a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc1155-mobile-1.png and b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc1155-mobile-1.png differ
diff --git a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc20-mobile-1.png b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc20-mobile-1.png
index c8177ab64d..5dfd5308aa 100644
Binary files a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc20-mobile-1.png and b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc20-mobile-1.png differ
diff --git a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc721-mobile-1.png b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc721-mobile-1.png
index 80ea9e8def..d7da5b265a 100644
Binary files a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc721-mobile-1.png and b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc721-mobile-1.png differ
diff --git a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc1155-mobile-1.png b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc1155-mobile-1.png
index 34c6dfcab8..de482652b6 100644
Binary files a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc1155-mobile-1.png and b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc1155-mobile-1.png differ
diff --git a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc20-mobile-1.png b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc20-mobile-1.png
index cd30c50dbb..c90cf5eaed 100644
Binary files a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc20-mobile-1.png and b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc20-mobile-1.png differ
diff --git a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc721-mobile-1.png b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc721-mobile-1.png
index 2b01786d75..4e0fd1e436 100644
Binary files a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc721-mobile-1.png and b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc721-mobile-1.png differ
diff --git a/ui/token/TokenVerifiedInfo.tsx b/ui/token/TokenVerifiedInfo.tsx
index 56af8bda88..28f69bee4e 100644
--- a/ui/token/TokenVerifiedInfo.tsx
+++ b/ui/token/TokenVerifiedInfo.tsx
@@ -6,7 +6,7 @@ import type { TokenVerifiedInfo as TTokenVerifiedInfo } from 'types/api/token';
 
 import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
-import LinkExternal from 'ui/shared/LinkExternal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
 
 import TokenProjectInfo from './TokenProjectInfo';
 
diff --git a/ui/token/__screenshots__/TokenInventory.pw.tsx_default_base-view-mobile-1.png b/ui/token/__screenshots__/TokenInventory.pw.tsx_default_base-view-mobile-1.png
index 8d8eeafa1e..6b8d205580 100644
Binary files a/ui/token/__screenshots__/TokenInventory.pw.tsx_default_base-view-mobile-1.png and b/ui/token/__screenshots__/TokenInventory.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/token/__screenshots__/TokenInventory.pw.tsx_mobile_base-view-mobile-1.png b/ui/token/__screenshots__/TokenInventory.pw.tsx_mobile_base-view-mobile-1.png
index 68c891937f..a4998f2efa 100644
Binary files a/ui/token/__screenshots__/TokenInventory.pw.tsx_mobile_base-view-mobile-1.png and b/ui/token/__screenshots__/TokenInventory.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/token/useTokenQuery.tsx b/ui/token/useTokenQuery.tsx
new file mode 100644
index 0000000000..4359f299b6
--- /dev/null
+++ b/ui/token/useTokenQuery.tsx
@@ -0,0 +1,16 @@
+import useApiQuery from 'lib/api/useApiQuery';
+import { useAppContext } from 'lib/contexts/app';
+import * as tokenStubs from 'stubs/token';
+
+export default function useTokenQuery(hash: string) {
+  const { apiData } = useAppContext<'/token/[hash]'>();
+
+  return useApiQuery('token', {
+    pathParams: { hash },
+    queryOptions: {
+      enabled: Boolean(hash),
+      placeholderData: tokenStubs.TOKEN_INFO_ERC_20,
+      initialData: apiData || undefined,
+    },
+  });
+}
diff --git a/ui/tokenInfo/TokenInfoForm.pw.tsx b/ui/tokenInfo/TokenInfoForm.pw.tsx
index 46ed578c00..ac7ce03bf9 100644
--- a/ui/tokenInfo/TokenInfoForm.pw.tsx
+++ b/ui/tokenInfo/TokenInfoForm.pw.tsx
@@ -1,66 +1,33 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as mocks from 'mocks/account/verifiedAddresses';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import TokenInfoForm from './TokenInfoForm';
 
-const FORM_CONFIG_URL = buildApiUrl('token_info_applications_config', { chainId: '1' });
-
-test('base view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(mocks.TOKEN_INFO_APPLICATION_BASE.iconUrl, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_md.jpg',
-    });
-  });
-
-  await page.route(FORM_CONFIG_URL, (route) => route.fulfill({
-    body: JSON.stringify(mocks.TOKEN_INFO_FORM_CONFIG),
-  }));
+test.beforeEach(async({ mockApiResponse, mockAssetResponse }) => {
+  await mockApiResponse('token_info_applications_config', mocks.TOKEN_INFO_FORM_CONFIG, { pathParams: { chainId: '1' } });
+  await mockAssetResponse(mocks.TOKEN_INFO_APPLICATION_BASE.iconUrl, './playwright/mocks/image_md.jpg');
+});
 
+test('base view +@mobile +@dark-mode', async({ render }) => {
   const props = {
     address: mocks.VERIFIED_ADDRESS.ITEM_1.contractAddress,
     tokenName: 'Test Token (TT)',
     application: mocks.TOKEN_INFO_APPLICATION.APPROVED,
     onSubmit: () => {},
   };
-
-  const component = await mount(
-    <TestApp>
-      <TokenInfoForm { ...props }/>
-    </TestApp>,
-  );
-
+  const component = await render(<TokenInfoForm { ...props }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('status IN_PROCESS', async({ mount, page }) => {
-  await page.route(mocks.TOKEN_INFO_APPLICATION_BASE.iconUrl, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_md.jpg',
-    });
-  });
-
-  await page.route(FORM_CONFIG_URL, (route) => route.fulfill({
-    body: JSON.stringify(mocks.TOKEN_INFO_FORM_CONFIG),
-  }));
-
+test('status IN_PROCESS', async({ render }) => {
   const props = {
     address: mocks.VERIFIED_ADDRESS.ITEM_1.contractAddress,
     tokenName: 'Test Token (TT)',
     application: mocks.TOKEN_INFO_APPLICATION.IN_PROCESS,
     onSubmit: () => {},
   };
-
-  const component = await mount(
-    <TestApp>
-      <TokenInfoForm { ...props }/>
-    </TestApp>,
-  );
-
+  const component = await render(<TokenInfoForm { ...props }/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/tokenInfo/TokenInfoForm.tsx b/ui/tokenInfo/TokenInfoForm.tsx
index 546becbb2a..14c1e71d60 100644
--- a/ui/tokenInfo/TokenInfoForm.tsx
+++ b/ui/tokenInfo/TokenInfoForm.tsx
@@ -1,7 +1,7 @@
-import { Button, Grid, GridItem } from '@chakra-ui/react';
+import { Button, Grid, GridItem, Text } from '@chakra-ui/react';
 import React from 'react';
 import type { SubmitHandler } from 'react-hook-form';
-import { useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
 
 import type { Fields } from './types';
 import type { TokenInfoApplication } from 'types/api/account';
@@ -15,22 +15,16 @@ import useUpdateEffect from 'lib/hooks/useUpdateEffect';
 import * as mixpanel from 'lib/mixpanel/index';
 import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import FormFieldAddress from 'ui/shared/forms/fields/FormFieldAddress';
+import FormFieldEmail from 'ui/shared/forms/fields/FormFieldEmail';
+import FormFieldText from 'ui/shared/forms/fields/FormFieldText';
+import FormFieldUrl from 'ui/shared/forms/fields/FormFieldUrl';
+import { noWhitespaceValidator } from 'ui/shared/forms/validators/text';
 
-import TokenInfoFieldAddress from './fields/TokenInfoFieldAddress';
-import TokenInfoFieldComment from './fields/TokenInfoFieldComment';
-import TokenInfoFieldDocs from './fields/TokenInfoFieldDocs';
 import TokenInfoFieldIconUrl from './fields/TokenInfoFieldIconUrl';
-import TokenInfoFieldPriceTicker from './fields/TokenInfoFieldPriceTicker';
-import TokenInfoFieldProjectDescription from './fields/TokenInfoFieldProjectDescription';
-import TokenInfoFieldProjectEmail from './fields/TokenInfoFieldProjectEmail';
-import TokenInfoFieldProjectName from './fields/TokenInfoFieldProjectName';
 import TokenInfoFieldProjectSector from './fields/TokenInfoFieldProjectSector';
-import TokenInfoFieldProjectWebsite from './fields/TokenInfoFieldProjectWebsite';
-import TokenInfoFieldRequesterEmail from './fields/TokenInfoFieldRequesterEmail';
-import TokenInfoFieldRequesterName from './fields/TokenInfoFieldRequesterName';
 import TokenInfoFieldSocialLink from './fields/TokenInfoFieldSocialLink';
 import TokenInfoFieldSupport from './fields/TokenInfoFieldSupport';
-import TokenInfoFieldTokenName from './fields/TokenInfoFieldTokenName';
 import TokenInfoFormSectionHeader from './TokenInfoFormSectionHeader';
 import TokenInfoFormStatusText from './TokenInfoFormStatusText';
 import { getFormDefaultValues, prepareRequestBody } from './utils';
@@ -58,7 +52,7 @@ const TokenInfoForm = ({ address, tokenName, application, onSubmit }: Props) =>
     mode: 'onBlur',
     defaultValues: getFormDefaultValues(address, tokenName, application),
   });
-  const { handleSubmit, formState, control, trigger } = formApi;
+  const { handleSubmit, formState } = formApi;
 
   React.useEffect(() => {
     if (!application?.id && !openEventSent.current) {
@@ -108,6 +102,14 @@ const TokenInfoForm = ({ address, tokenName, application, onSubmit }: Props) =>
     }
   }, [ formState.isValid, formState.submitCount ]);
 
+  const nonWhitespaceFieldRules = React.useMemo(() => {
+    return {
+      validate: {
+        no_whitespace: noWhitespaceValidator,
+      },
+    };
+  }, []);
+
   if (configQuery.isError) {
     return <DataFetchAlert/>;
   }
@@ -116,66 +118,90 @@ const TokenInfoForm = ({ address, tokenName, application, onSubmit }: Props) =>
     return <ContentLoader/>;
   }
 
-  const fieldProps = { control, isReadOnly: application?.status === 'IN_PROCESS' };
+  const fieldProps = {
+    size: { base: 'md', lg: 'lg' },
+    isReadOnly: application?.status === 'IN_PROCESS',
+  };
 
   return (
-    <form noValidate onSubmit={ handleSubmit(onFormSubmit) } autoComplete="off" ref={ containerRef }>
-      <TokenInfoFormStatusText application={ application }/>
-      <Grid mt={ 8 } gridTemplateColumns={{ base: '1fr', lg: '1fr 1fr' }} columnGap={ 5 } rowGap={ 5 }>
-
-        <TokenInfoFieldTokenName { ...fieldProps }/>
-        <TokenInfoFieldAddress { ...fieldProps }/>
-        <TokenInfoFieldRequesterName { ...fieldProps }/>
-        <TokenInfoFieldRequesterEmail { ...fieldProps }/>
-
-        <TokenInfoFormSectionHeader>Project info</TokenInfoFormSectionHeader>
-        <TokenInfoFieldProjectName { ...fieldProps }/>
-        <TokenInfoFieldProjectSector { ...fieldProps } config={ configQuery.data.projectSectors }/>
-        <TokenInfoFieldProjectEmail { ...fieldProps }/>
-        <TokenInfoFieldProjectWebsite { ...fieldProps }/>
-        <TokenInfoFieldDocs { ...fieldProps }/>
-        <TokenInfoFieldSupport { ...fieldProps }/>
-        <GridItem colSpan={{ base: 1, lg: 2 }}>
-          <TokenInfoFieldIconUrl { ...fieldProps } trigger={ trigger }/>
-        </GridItem>
-        <GridItem colSpan={{ base: 1, lg: 2 }}>
-          <TokenInfoFieldProjectDescription { ...fieldProps }/>
-        </GridItem>
-
-        <TokenInfoFormSectionHeader>Links</TokenInfoFormSectionHeader>
-        <TokenInfoFieldSocialLink { ...fieldProps } name="github"/>
-        <TokenInfoFieldSocialLink { ...fieldProps } name="twitter"/>
-        <TokenInfoFieldSocialLink { ...fieldProps } name="telegram"/>
-        <TokenInfoFieldSocialLink { ...fieldProps } name="opensea"/>
-        <TokenInfoFieldSocialLink { ...fieldProps } name="linkedin"/>
-        <TokenInfoFieldSocialLink { ...fieldProps } name="facebook"/>
-        <TokenInfoFieldSocialLink { ...fieldProps } name="discord"/>
-        <TokenInfoFieldSocialLink { ...fieldProps } name="medium"/>
-        <TokenInfoFieldSocialLink { ...fieldProps } name="slack"/>
-        <TokenInfoFieldSocialLink { ...fieldProps } name="reddit"/>
-
-        <TokenInfoFormSectionHeader>Price data</TokenInfoFormSectionHeader>
-        <TokenInfoFieldPriceTicker { ...fieldProps } name="ticker_coin_market_cap" label="CoinMarketCap URL"/>
-        <TokenInfoFieldPriceTicker { ...fieldProps } name="ticker_coin_gecko" label="CoinGecko URL"/>
-        <GridItem colSpan={{ base: 1, lg: 2 }}>
-          <TokenInfoFieldPriceTicker { ...fieldProps } name="ticker_defi_llama" label="DefiLlama URL "/>
-        </GridItem>
-
-        <GridItem colSpan={{ base: 1, lg: 2 }}>
-          <TokenInfoFieldComment { ...fieldProps }/>
-        </GridItem>
-      </Grid>
-      <Button
-        type="submit"
-        size="lg"
-        mt={ 8 }
-        isLoading={ formState.isSubmitting }
-        loadingText="Send request"
-        isDisabled={ application?.status === 'IN_PROCESS' }
-      >
-        Send request
-      </Button>
-    </form>
+    <FormProvider { ...formApi }>
+      <form noValidate onSubmit={ handleSubmit(onFormSubmit) } autoComplete="off" ref={ containerRef }>
+        <TokenInfoFormStatusText application={ application }/>
+        <Grid mt={ 8 } gridTemplateColumns={{ base: '1fr', lg: '1fr 1fr' }} columnGap={ 5 } rowGap={ 5 }>
+
+          <FormFieldText<Fields> name="token_name" isRequired placeholder="Token name" { ...fieldProps } isReadOnly/>
+          <FormFieldAddress<Fields> name="address" isRequired placeholder="Token contract address" { ...fieldProps } isReadOnly/>
+          <FormFieldText<Fields> name="requester_name" isRequired placeholder="Requester name" { ...fieldProps }/>
+          <FormFieldEmail<Fields> name="requester_email" isRequired placeholder="Requester email" { ...fieldProps }/>
+
+          <TokenInfoFormSectionHeader>Project info</TokenInfoFormSectionHeader>
+          <FormFieldText<Fields> name="project_name" placeholder="Project name" { ...fieldProps } rules={ nonWhitespaceFieldRules }/>
+          <TokenInfoFieldProjectSector { ...fieldProps } config={ configQuery.data.projectSectors }/>
+          <FormFieldEmail<Fields> name="project_email" isRequired placeholder="Official project email address" { ...fieldProps }/>
+          <FormFieldUrl<Fields> name="project_website" isRequired placeholder="Official project website" { ...fieldProps }/>
+          <FormFieldUrl<Fields> name="docs" placeholder="Docs" { ...fieldProps }/>
+          <TokenInfoFieldSupport { ...fieldProps }/>
+          <GridItem colSpan={{ base: 1, lg: 2 }}>
+            <TokenInfoFieldIconUrl { ...fieldProps }/>
+          </GridItem>
+          <GridItem colSpan={{ base: 1, lg: 2 }}>
+            <FormFieldText<Fields>
+              name="project_description"
+              isRequired
+              placeholder="Project description"
+              maxH="160px"
+              rules={{ maxLength: 300, ...nonWhitespaceFieldRules }}
+              asComponent="Textarea"
+              { ...fieldProps }
+            />
+            <Text variant="secondary" fontSize="sm" mt={ 1 }>
+              Introduce or summarize the project’s operation/goals in a maximum of 300 characters.
+              The description should be written in a neutral point of view and must exclude unsubstantiated claims unless proven otherwise.
+            </Text>
+          </GridItem>
+
+          <TokenInfoFormSectionHeader>Links</TokenInfoFormSectionHeader>
+          <TokenInfoFieldSocialLink { ...fieldProps } name="github"/>
+          <TokenInfoFieldSocialLink { ...fieldProps } name="twitter"/>
+          <TokenInfoFieldSocialLink { ...fieldProps } name="telegram"/>
+          <TokenInfoFieldSocialLink { ...fieldProps } name="opensea"/>
+          <TokenInfoFieldSocialLink { ...fieldProps } name="linkedin"/>
+          <TokenInfoFieldSocialLink { ...fieldProps } name="facebook"/>
+          <TokenInfoFieldSocialLink { ...fieldProps } name="discord"/>
+          <TokenInfoFieldSocialLink { ...fieldProps } name="medium"/>
+          <TokenInfoFieldSocialLink { ...fieldProps } name="slack"/>
+          <TokenInfoFieldSocialLink { ...fieldProps } name="reddit"/>
+
+          <TokenInfoFormSectionHeader>Price data</TokenInfoFormSectionHeader>
+          <FormFieldUrl<Fields> name="ticker_coin_market_cap" placeholder="CoinMarketCap URL" { ...fieldProps }/>
+          <FormFieldUrl<Fields> name="ticker_coin_gecko" placeholder="CoinGecko URL" { ...fieldProps }/>
+          <GridItem colSpan={{ base: 1, lg: 2 }}>
+            <FormFieldUrl<Fields> name="ticker_defi_llama" placeholder="DefiLlama URL" { ...fieldProps }/>
+          </GridItem>
+
+          <GridItem colSpan={{ base: 1, lg: 2 }}>
+            <FormFieldText<Fields>
+              name="comment"
+              placeholder="Comment"
+              maxH="160px"
+              rules={{ maxLength: 300 }}
+              asComponent="Textarea"
+              { ...fieldProps }
+            />
+          </GridItem>
+        </Grid>
+        <Button
+          type="submit"
+          size="lg"
+          mt={ 8 }
+          isLoading={ formState.isSubmitting }
+          loadingText="Send request"
+          isDisabled={ application?.status === 'IN_PROCESS' }
+        >
+          Send request
+        </Button>
+      </form>
+    </FormProvider>
   );
 };
 
diff --git a/ui/tokenInfo/TokenInfoIconPreview.tsx b/ui/tokenInfo/TokenInfoIconPreview.tsx
index 68df3dc3ae..d7ded486ed 100644
--- a/ui/tokenInfo/TokenInfoIconPreview.tsx
+++ b/ui/tokenInfo/TokenInfoIconPreview.tsx
@@ -1,20 +1,16 @@
-import { Center, Image, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import { Center, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-import TokenLogoPlaceholder from 'ui/shared/TokenLogoPlaceholder';
-
 interface Props {
   url: string | undefined;
-  onLoad?: () => void;
-  onError?: () => void;
   isInvalid: boolean;
+  children: React.ReactElement;
 }
 
-const TokenInfoIconPreview = ({ url, onError, onLoad, isInvalid }: Props) => {
+const TokenInfoIconPreview = ({ url, isInvalid, children }: Props) => {
   const borderColor = useColorModeValue('gray.100', 'gray.700');
   const borderColorFilled = useColorModeValue('gray.300', 'gray.600');
-  const borderColorError = useColorModeValue('red.400', 'red.300');
-  const borderColorActive = isInvalid ? borderColorError : borderColorFilled;
+  const borderColorActive = isInvalid ? 'error' : borderColorFilled;
 
   return (
     <Center
@@ -24,16 +20,7 @@ const TokenInfoIconPreview = ({ url, onError, onLoad, isInvalid }: Props) => {
       borderColor={ url ? borderColorActive : borderColor }
       borderRadius="base"
     >
-      <Image
-        borderRadius="base"
-        src={ url }
-        alt="Token logo preview"
-        boxSize={{ base: 10, lg: 12 }}
-        objectFit="cover"
-        fallback={ url && !isInvalid ? <Skeleton boxSize={{ base: 10, lg: 12 }}/> : <TokenLogoPlaceholder boxSize={{ base: 10, lg: 12 }}/> }
-        onError={ onError }
-        onLoad={ onLoad }
-      />
+      { children }
     </Center>
   );
 };
diff --git a/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png
index 8eef0d0de8..70a2d7b4cd 100644
Binary files a/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png and b/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_default_base-view-mobile-dark-mode-1.png
index d1737b30ec..c7de9900a5 100644
Binary files a/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_default_base-view-mobile-dark-mode-1.png and b/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_default_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_default_status-IN-PROCESS-1.png b/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_default_status-IN-PROCESS-1.png
index a05db20f6f..c56b699e12 100644
Binary files a/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_default_status-IN-PROCESS-1.png and b/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_default_status-IN-PROCESS-1.png differ
diff --git a/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png b/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png
index b64f67d6ac..ce44f59d24 100644
Binary files a/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png and b/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/tokenInfo/fields/TokenInfoFieldAddress.tsx b/ui/tokenInfo/fields/TokenInfoFieldAddress.tsx
deleted file mode 100644
index ee4fcd5b83..0000000000
--- a/ui/tokenInfo/fields/TokenInfoFieldAddress.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { FormControl, Input } from '@chakra-ui/react';
-import React from 'react';
-import type { Control, ControllerRenderProps } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import type { Fields } from '../types';
-
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
-
-interface Props {
-  control: Control<Fields>;
-}
-
-const TokenInfoFieldAddress = ({ control }: Props) => {
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, 'address'>}) => {
-    return (
-      <FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }}>
-        <Input
-          { ...field }
-          required
-          isDisabled
-        />
-        <InputPlaceholder text="Token contract address"/>
-      </FormControl>
-    );
-  }, []);
-
-  return (
-    <Controller
-      name="address"
-      control={ control }
-      render={ renderControl }
-    />
-  );
-};
-
-export default React.memo(TokenInfoFieldAddress);
diff --git a/ui/tokenInfo/fields/TokenInfoFieldComment.tsx b/ui/tokenInfo/fields/TokenInfoFieldComment.tsx
deleted file mode 100644
index 9782c82d3e..0000000000
--- a/ui/tokenInfo/fields/TokenInfoFieldComment.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { FormControl, Textarea } from '@chakra-ui/react';
-import React from 'react';
-import type { Control, ControllerProps } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import type { Fields } from '../types';
-
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
-
-interface Props {
-  control: Control<Fields>;
-  isReadOnly?: boolean;
-}
-
-const TokenInfoFieldComment = ({ control, isReadOnly }: Props) => {
-  const renderControl: ControllerProps<Fields, 'comment'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
-    return (
-      <FormControl variant="floating" id={ field.name } size={{ base: 'md', lg: 'lg' }}>
-        <Textarea
-          { ...field }
-          isInvalid={ Boolean(fieldState.error) }
-          isDisabled={ formState.isSubmitting || isReadOnly }
-          autoComplete="off"
-          maxH="160px"
-          maxLength={ 300 }
-        />
-        <InputPlaceholder text="Comment" error={ fieldState.error }/>
-      </FormControl>
-    );
-  }, [ isReadOnly ]);
-
-  return (
-    <Controller
-      name="comment"
-      control={ control }
-      render={ renderControl }
-      rules={{ maxLength: 300 }}
-    />
-  );
-};
-
-export default React.memo(TokenInfoFieldComment);
diff --git a/ui/tokenInfo/fields/TokenInfoFieldDocs.tsx b/ui/tokenInfo/fields/TokenInfoFieldDocs.tsx
deleted file mode 100644
index d31a2e2d10..0000000000
--- a/ui/tokenInfo/fields/TokenInfoFieldDocs.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { FormControl, Input } from '@chakra-ui/react';
-import React from 'react';
-import type { Control, ControllerProps } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import type { Fields } from '../types';
-
-import { validator } from 'lib/validations/url';
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
-
-interface Props {
-  control: Control<Fields>;
-  isReadOnly?: boolean;
-}
-
-const TokenInfoFieldDocs = ({ control, isReadOnly }: Props) => {
-  const renderControl: ControllerProps<Fields, 'docs'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
-    return (
-      <FormControl variant="floating" id={ field.name } size={{ base: 'md', lg: 'lg' }}>
-        <Input
-          { ...field }
-          isInvalid={ Boolean(fieldState.error) }
-          isDisabled={ formState.isSubmitting || isReadOnly }
-          autoComplete="off"
-        />
-        <InputPlaceholder text="Docs" error={ fieldState.error }/>
-      </FormControl>
-    );
-  }, [ isReadOnly ]);
-
-  return (
-    <Controller
-      name="docs"
-      control={ control }
-      render={ renderControl }
-      rules={{ validate: validator }}
-    />
-  );
-};
-
-export default React.memo(TokenInfoFieldDocs);
diff --git a/ui/tokenInfo/fields/TokenInfoFieldIconUrl.tsx b/ui/tokenInfo/fields/TokenInfoFieldIconUrl.tsx
index 432117b21d..790e9d84be 100644
--- a/ui/tokenInfo/fields/TokenInfoFieldIconUrl.tsx
+++ b/ui/tokenInfo/fields/TokenInfoFieldIconUrl.tsx
@@ -1,75 +1,43 @@
-import { FormControl, Flex, Input } from '@chakra-ui/react';
+import type { FormControlProps } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import React from 'react';
-import type { Control, UseFormTrigger } from 'react-hook-form';
-import { useController } from 'react-hook-form';
 
 import type { Fields } from '../types';
 
 import { times } from 'lib/html-entities';
-import { validator as validateUrl } from 'lib/validations/url';
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
+import ImageUrlPreview from 'ui/shared/forms/components/ImageUrlPreview';
+import FormFieldUrl from 'ui/shared/forms/fields/FormFieldUrl';
+import useFieldWithImagePreview from 'ui/shared/forms/utils/useFieldWithImagePreview';
+import TokenLogoPlaceholder from 'ui/shared/TokenLogoPlaceholder';
 
 import TokenInfoIconPreview from '../TokenInfoIconPreview';
 
 interface Props {
-  control: Control<Fields>;
   isReadOnly?: boolean;
-  trigger: UseFormTrigger<Fields>;
+  size?: FormControlProps['size'];
 }
 
-const TokenInfoFieldIconUrl = ({ control, isReadOnly, trigger }: Props) => {
+const TokenInfoFieldIconUrl = ({ isReadOnly, size }: Props) => {
 
-  const validatePreview = React.useCallback(() => {
-    return imageLoadError.current ? 'Unable to load image' : true;
-  }, [ ]);
-
-  const { field, formState, fieldState } = useController({
-    name: 'icon_url',
-    control,
-    rules: {
-      required: true,
-      validate: { url: validateUrl, preview: validatePreview },
-    },
-  });
-
-  const [ valueForPreview, setValueForPreview ] = React.useState<string>(field.value);
-  const imageLoadError = React.useRef(false);
-
-  const handleImageLoadSuccess = React.useCallback(() => {
-    imageLoadError.current = false;
-    trigger('icon_url');
-  }, [ trigger ]);
-
-  const handleImageLoadError = React.useCallback(() => {
-    imageLoadError.current = true;
-    trigger('icon_url');
-  }, [ trigger ]);
-
-  const handleBlur = React.useCallback(() => {
-    field.onBlur();
-    const isValidUrl = validateUrl(field.value);
-    isValidUrl === true && setValueForPreview(field.value);
-  }, [ field ]);
+  const previewUtils = useFieldWithImagePreview({ name: 'icon_url', isRequired: true });
 
   return (
     <Flex columnGap={ 5 }>
-      <FormControl variant="floating" id={ field.name } size={{ base: 'md', lg: 'lg' }} isRequired>
-        <Input
-          { ...field }
-          onBlur={ handleBlur }
-          isInvalid={ Boolean(fieldState.error) }
-          isDisabled={ formState.isSubmitting || isReadOnly }
-          autoComplete="off"
-          required
-        />
-        <InputPlaceholder text={ `Link to icon URL, link to download a SVG or 48${ times }48 PNG icon logo` } error={ fieldState.error }/>
-      </FormControl>
-      <TokenInfoIconPreview
-        url={ fieldState.error?.type === 'url' ? undefined : valueForPreview }
-        onLoad={ handleImageLoadSuccess }
-        onError={ !isReadOnly ? handleImageLoadError : undefined }
-        isInvalid={ fieldState.error?.type === 'preview' }
+      <FormFieldUrl<Fields>
+        name="icon_url"
+        placeholder={ `Link to icon URL, link to download a SVG or 48${ times }48 PNG icon logo` }
+        isReadOnly={ isReadOnly }
+        size={ size }
+        { ...previewUtils.input }
       />
+      <TokenInfoIconPreview url={ previewUtils.preview.src } isInvalid={ previewUtils.preview.isInvalid }>
+        <ImageUrlPreview
+          { ...previewUtils.preview }
+          fallback={ <TokenLogoPlaceholder boxSize={{ base: 10, lg: 12 }}/> }
+          boxSize={{ base: 10, lg: 12 }}
+          borderRadius="base"
+        />
+      </TokenInfoIconPreview>
     </Flex>
   );
 };
diff --git a/ui/tokenInfo/fields/TokenInfoFieldPriceTicker.tsx b/ui/tokenInfo/fields/TokenInfoFieldPriceTicker.tsx
deleted file mode 100644
index 68bb040f73..0000000000
--- a/ui/tokenInfo/fields/TokenInfoFieldPriceTicker.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { FormControl, Input } from '@chakra-ui/react';
-import React from 'react';
-import type { Control, ControllerProps } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import type { Fields, TickerUrlFields } from '../types';
-
-import { validator } from 'lib/validations/url';
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
-
-interface Props {
-  control: Control<Fields>;
-  isReadOnly?: boolean;
-  name: keyof TickerUrlFields;
-  label: string;
-}
-
-const TokenInfoFieldPriceTicker = ({ control, isReadOnly, name, label }: Props) => {
-  const renderControl: ControllerProps<Fields, typeof name>['render'] = React.useCallback(({ field, fieldState, formState }) => {
-    return (
-      <FormControl variant="floating" id={ field.name } size={{ base: 'md', lg: 'lg' }}>
-        <Input
-          { ...field }
-          isInvalid={ Boolean(fieldState.error) }
-          isDisabled={ formState.isSubmitting || isReadOnly }
-          autoComplete="off"
-        />
-        <InputPlaceholder text={ label } error={ fieldState.error }/>
-      </FormControl>
-    );
-  }, [ isReadOnly, label ]);
-
-  return (
-    <Controller
-      name={ name }
-      control={ control }
-      render={ renderControl }
-      rules={{ validate: validator }}
-    />
-  );
-};
-
-export default React.memo(TokenInfoFieldPriceTicker);
diff --git a/ui/tokenInfo/fields/TokenInfoFieldProjectDescription.tsx b/ui/tokenInfo/fields/TokenInfoFieldProjectDescription.tsx
deleted file mode 100644
index 7b9ed16767..0000000000
--- a/ui/tokenInfo/fields/TokenInfoFieldProjectDescription.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { FormControl, Text, Textarea } from '@chakra-ui/react';
-import React from 'react';
-import type { Control, ControllerProps } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import type { Fields } from '../types';
-
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
-
-interface Props {
-  control: Control<Fields>;
-  isReadOnly?: boolean;
-}
-
-const TokenInfoFieldProjectDescription = ({ control, isReadOnly }: Props) => {
-  const renderControl: ControllerProps<Fields, 'project_description'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
-    return (
-      <FormControl variant="floating" id={ field.name } size={{ base: 'md', lg: 'lg' }} isRequired>
-        <Textarea
-          { ...field }
-          required
-          isInvalid={ Boolean(fieldState.error) }
-          isDisabled={ formState.isSubmitting || isReadOnly }
-          autoComplete="off"
-          maxH="160px"
-          maxLength={ 300 }
-        />
-        <InputPlaceholder text="Project description" error={ fieldState.error }/>
-        <Text variant="secondary" fontSize="sm" mt={ 1 }>
-          Introduce or summarize the project’s operation/goals in a maximum of 300 characters.
-          The description should be written in a neutral point of view and must exclude unsubstantiated claims unless proven otherwise.
-        </Text>
-      </FormControl>
-    );
-  }, [ isReadOnly ]);
-
-  return (
-    <Controller
-      name="project_description"
-      control={ control }
-      render={ renderControl }
-      rules={{ required: true, maxLength: 300 }}
-    />
-  );
-};
-
-export default React.memo(TokenInfoFieldProjectDescription);
diff --git a/ui/tokenInfo/fields/TokenInfoFieldProjectEmail.tsx b/ui/tokenInfo/fields/TokenInfoFieldProjectEmail.tsx
deleted file mode 100644
index bcd1ff7850..0000000000
--- a/ui/tokenInfo/fields/TokenInfoFieldProjectEmail.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { FormControl, Input } from '@chakra-ui/react';
-import React from 'react';
-import type { Control, ControllerProps } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import type { Fields } from '../types';
-
-import { EMAIL_REGEXP } from 'lib/validations/email';
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
-
-interface Props {
-  control: Control<Fields>;
-  isReadOnly?: boolean;
-}
-
-const TokenInfoFieldProjectEmail = ({ control, isReadOnly }: Props) => {
-  const renderControl: ControllerProps<Fields, 'project_email'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
-    return (
-      <FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }}>
-        <Input
-          { ...field }
-          required
-          isInvalid={ Boolean(fieldState.error) }
-          isDisabled={ formState.isSubmitting || isReadOnly }
-          autoComplete="off"
-        />
-        <InputPlaceholder text="Official project email address" error={ fieldState.error }/>
-      </FormControl>
-    );
-  }, [ isReadOnly ]);
-
-  return (
-    <Controller
-      name="project_email"
-      control={ control }
-      render={ renderControl }
-      rules={{ required: true, pattern: EMAIL_REGEXP }}
-    />
-  );
-};
-
-export default React.memo(TokenInfoFieldProjectEmail);
diff --git a/ui/tokenInfo/fields/TokenInfoFieldProjectName.tsx b/ui/tokenInfo/fields/TokenInfoFieldProjectName.tsx
deleted file mode 100644
index 9048e500ca..0000000000
--- a/ui/tokenInfo/fields/TokenInfoFieldProjectName.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { FormControl, Input } from '@chakra-ui/react';
-import React from 'react';
-import type { Control, ControllerProps } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import type { Fields } from '../types';
-
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
-
-interface Props {
-  control: Control<Fields>;
-  isReadOnly?: boolean;
-}
-
-const TokenInfoFieldProjectName = ({ control, isReadOnly }: Props) => {
-  const renderControl: ControllerProps<Fields, 'project_name'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
-
-    return (
-      <FormControl variant="floating" id={ field.name } size={{ base: 'md', lg: 'lg' }}>
-        <Input
-          { ...field }
-          isInvalid={ Boolean(fieldState.error) }
-          isDisabled={ formState.isSubmitting || isReadOnly }
-          autoComplete="off"
-        />
-        <InputPlaceholder text="Project name" error={ fieldState.error }/>
-      </FormControl>
-    );
-  }, [ isReadOnly ]);
-
-  return (
-    <Controller
-      name="project_name"
-      control={ control }
-      render={ renderControl }
-    />
-  );
-};
-
-export default React.memo(TokenInfoFieldProjectName);
diff --git a/ui/tokenInfo/fields/TokenInfoFieldProjectSector.tsx b/ui/tokenInfo/fields/TokenInfoFieldProjectSector.tsx
index e6a7dd7e02..97f0838410 100644
--- a/ui/tokenInfo/fields/TokenInfoFieldProjectSector.tsx
+++ b/ui/tokenInfo/fields/TokenInfoFieldProjectSector.tsx
@@ -1,45 +1,27 @@
 import React from 'react';
-import type { Control, ControllerProps } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
 
 import type { Fields } from '../types';
 import type { TokenInfoApplicationConfig } from 'types/api/account';
 
-import useIsMobile from 'lib/hooks/useIsMobile';
-import FancySelect from 'ui/shared/FancySelect/FancySelect';
+import FormFieldFancySelect from 'ui/shared/forms/fields/FormFieldFancySelect';
 
 interface Props {
-  control: Control<Fields>;
   isReadOnly?: boolean;
   config: TokenInfoApplicationConfig['projectSectors'];
 }
 
-const TokenInfoFieldProjectSector = ({ control, isReadOnly, config }: Props) => {
-  const isMobile = useIsMobile();
+const TokenInfoFieldProjectSector = ({ isReadOnly, config }: Props) => {
 
   const options = React.useMemo(() => {
     return config.map((option) => ({ label: option, value: option }));
   }, [ config ]);
 
-  const renderControl: ControllerProps<Fields, 'project_sector'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
-
-    return (
-      <FancySelect
-        { ...field }
-        options={ options }
-        size={ isMobile ? 'md' : 'lg' }
-        placeholder="Project industry"
-        isDisabled={ formState.isSubmitting || isReadOnly }
-        error={ fieldState.error }
-      />
-    );
-  }, [ isReadOnly, options, isMobile ]);
-
   return (
-    <Controller
+    <FormFieldFancySelect<Fields, 'project_sector'>
       name="project_sector"
-      control={ control }
-      render={ renderControl }
+      placeholder="Project industry"
+      options={ options }
+      isReadOnly={ isReadOnly }
     />
   );
 };
diff --git a/ui/tokenInfo/fields/TokenInfoFieldProjectWebsite.tsx b/ui/tokenInfo/fields/TokenInfoFieldProjectWebsite.tsx
deleted file mode 100644
index 0336e3b30f..0000000000
--- a/ui/tokenInfo/fields/TokenInfoFieldProjectWebsite.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { FormControl, Input } from '@chakra-ui/react';
-import React from 'react';
-import type { Control, ControllerProps } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import type { Fields } from '../types';
-
-import { validator } from 'lib/validations/url';
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
-
-interface Props {
-  control: Control<Fields>;
-  isReadOnly?: boolean;
-}
-
-const TokenInfoFieldProjectWebsite = ({ control, isReadOnly }: Props) => {
-  const renderControl: ControllerProps<Fields, 'project_website'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
-    return (
-      <FormControl variant="floating" id={ field.name } size={{ base: 'md', lg: 'lg' }} isRequired>
-        <Input
-          { ...field }
-          isInvalid={ Boolean(fieldState.error) }
-          isDisabled={ formState.isSubmitting || isReadOnly }
-          autoComplete="off"
-          required
-        />
-        <InputPlaceholder text="Official project website" error={ fieldState.error }/>
-      </FormControl>
-    );
-  }, [ isReadOnly ]);
-
-  return (
-    <Controller
-      name="project_website"
-      control={ control }
-      render={ renderControl }
-      rules={{ required: true, validate: validator }}
-    />
-  );
-};
-
-export default React.memo(TokenInfoFieldProjectWebsite);
diff --git a/ui/tokenInfo/fields/TokenInfoFieldRequesterEmail.tsx b/ui/tokenInfo/fields/TokenInfoFieldRequesterEmail.tsx
deleted file mode 100644
index 60eba7682a..0000000000
--- a/ui/tokenInfo/fields/TokenInfoFieldRequesterEmail.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { FormControl, Input } from '@chakra-ui/react';
-import React from 'react';
-import type { Control, ControllerProps } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import type { Fields } from '../types';
-
-import { EMAIL_REGEXP } from 'lib/validations/email';
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
-
-interface Props {
-  control: Control<Fields>;
-  isReadOnly?: boolean;
-}
-
-const TokenInfoFieldRequesterEmail = ({ control, isReadOnly }: Props) => {
-  const renderControl: ControllerProps<Fields, 'requester_email'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
-    return (
-      <FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }}>
-        <Input
-          { ...field }
-          required
-          isInvalid={ Boolean(fieldState.error) }
-          isDisabled={ formState.isSubmitting || isReadOnly }
-          autoComplete="off"
-        />
-        <InputPlaceholder text="Requester email" error={ fieldState.error }/>
-      </FormControl>
-    );
-  }, [ isReadOnly ]);
-
-  return (
-    <Controller
-      name="requester_email"
-      control={ control }
-      render={ renderControl }
-      rules={{ required: true, pattern: EMAIL_REGEXP }}
-    />
-  );
-};
-
-export default React.memo(TokenInfoFieldRequesterEmail);
diff --git a/ui/tokenInfo/fields/TokenInfoFieldRequesterName.tsx b/ui/tokenInfo/fields/TokenInfoFieldRequesterName.tsx
deleted file mode 100644
index b346124af6..0000000000
--- a/ui/tokenInfo/fields/TokenInfoFieldRequesterName.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { FormControl, Input } from '@chakra-ui/react';
-import React from 'react';
-import type { Control, ControllerProps } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import type { Fields } from '../types';
-
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
-
-interface Props {
-  control: Control<Fields>;
-  isReadOnly?: boolean;
-}
-
-const TokenInfoFieldRequesterName = ({ control, isReadOnly }: Props) => {
-  const renderControl: ControllerProps<Fields, 'requester_name'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
-    return (
-      <FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }}>
-        <Input
-          { ...field }
-          required
-          isInvalid={ Boolean(fieldState.error) }
-          isDisabled={ formState.isSubmitting || isReadOnly }
-          autoComplete="off"
-        />
-        <InputPlaceholder text="Requester name" error={ fieldState.error }/>
-      </FormControl>
-    );
-  }, [ isReadOnly ]);
-
-  return (
-    <Controller
-      name="requester_name"
-      control={ control }
-      render={ renderControl }
-      rules={{ required: true }}
-    />
-  );
-};
-
-export default React.memo(TokenInfoFieldRequesterName);
diff --git a/ui/tokenInfo/fields/TokenInfoFieldSocialLink.tsx b/ui/tokenInfo/fields/TokenInfoFieldSocialLink.tsx
index c0521edf66..5ad4a78a22 100644
--- a/ui/tokenInfo/fields/TokenInfoFieldSocialLink.tsx
+++ b/ui/tokenInfo/fields/TokenInfoFieldSocialLink.tsx
@@ -1,14 +1,12 @@
-import { FormControl, Input, InputRightElement, InputGroup } from '@chakra-ui/react';
+import type { FormControlProps } from '@chakra-ui/react';
 import React from 'react';
-import type { Control, ControllerProps } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
+import type { ControllerRenderProps } from 'react-hook-form';
 
 import type { Fields, SocialLinkFields } from '../types';
 
-import { validator } from 'lib/validations/url';
+import FormFieldUrl from 'ui/shared/forms/fields/FormFieldUrl';
 import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 interface Item {
   icon: IconName;
@@ -21,7 +19,7 @@ const SETTINGS: Record<keyof SocialLinkFields, Item> = {
   linkedin: { label: 'LinkedIn', icon: 'social/linkedin_filled', color: 'linkedin' },
   discord: { label: 'Discord', icon: 'social/discord_filled', color: 'discord' },
   slack: { label: 'Slack', icon: 'social/slack_filled', color: 'slack' },
-  twitter: { label: 'Twitter', icon: 'social/twitter_filled', color: 'twitter' },
+  twitter: { label: 'X (ex-Twitter)', icon: 'social/twitter_filled', color: 'inherit' },
   opensea: { label: 'OpenSea', icon: 'social/opensea_filled', color: 'opensea' },
   facebook: { label: 'Facebook', icon: 'social/facebook_filled', color: 'facebook' },
   medium: { label: 'Medium', icon: 'social/medium_filled', color: 'inherit' },
@@ -29,37 +27,24 @@ const SETTINGS: Record<keyof SocialLinkFields, Item> = {
 };
 
 interface Props {
-  control: Control<Fields>;
   isReadOnly?: boolean;
+  size?: FormControlProps['size'];
   name: keyof SocialLinkFields;
 }
 
-const TokenInfoFieldSocialLink = ({ control, isReadOnly, name }: Props) => {
-  const renderControl: ControllerProps<Fields, typeof name>['render'] = React.useCallback(({ field, fieldState, formState }) => {
-    return (
-      <FormControl variant="floating" id={ field.name } size={{ base: 'md', lg: 'lg' }} sx={{ '.chakra-input__group input': { pr: '60px' } }}>
-        <InputGroup>
-          <Input
-            { ...field }
-            isInvalid={ Boolean(fieldState.error) }
-            isDisabled={ formState.isSubmitting || isReadOnly }
-            autoComplete="off"
-          />
-          <InputPlaceholder text={ SETTINGS[name].label } error={ fieldState.error }/>
-          <InputRightElement h="100%">
-            <IconSvg name={ SETTINGS[name].icon } boxSize={ 6 } color={ field.value ? SETTINGS[name].color : '#718096' }/>
-          </InputRightElement>
-        </InputGroup>
-      </FormControl>
-    );
-  }, [ isReadOnly, name ]);
+const TokenInfoFieldSocialLink = ({ isReadOnly, size, name }: Props) => {
+
+  const rightElement = React.useCallback(({ field }: { field: ControllerRenderProps<Fields, keyof SocialLinkFields> }) => {
+    return <IconSvg name={ SETTINGS[name].icon } boxSize={ 6 } color={ field.value ? SETTINGS[name].color : '#718096' }/>;
+  }, [ name ]);
 
   return (
-    <Controller
+    <FormFieldUrl<Fields, keyof SocialLinkFields>
       name={ name }
-      control={ control }
-      render={ renderControl }
-      rules={{ validate: validator }}
+      placeholder={ SETTINGS[name].label }
+      rightElement={ rightElement }
+      isReadOnly={ isReadOnly }
+      size={ size }
     />
   );
 };
diff --git a/ui/tokenInfo/fields/TokenInfoFieldSupport.tsx b/ui/tokenInfo/fields/TokenInfoFieldSupport.tsx
index ac69abab40..b9e35a28ea 100644
--- a/ui/tokenInfo/fields/TokenInfoFieldSupport.tsx
+++ b/ui/tokenInfo/fields/TokenInfoFieldSupport.tsx
@@ -1,38 +1,25 @@
-import { FormControl, Input } from '@chakra-ui/react';
+import type { InputProps } from '@chakra-ui/react';
 import React from 'react';
-import type { Control, ControllerProps } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
 
 import type { Fields } from '../types';
 
-import { validator as emailValidator } from 'lib/validations/email';
-import { validator as urlValidator } from 'lib/validations/url';
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
+import FormFieldText from 'ui/shared/forms/fields/FormFieldText';
+import { validator as emailValidator } from 'ui/shared/forms/validators/email';
+import { urlValidator } from 'ui/shared/forms/validators/url';
 
 interface Props {
-  control: Control<Fields>;
   isReadOnly?: boolean;
+  size?: InputProps['size'];
 }
 
-const TokenInfoFieldSupport = ({ control, isReadOnly }: Props) => {
-  const renderControl: ControllerProps<Fields, 'support'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
-
-    return (
-      <FormControl variant="floating" id={ field.name } size={{ base: 'md', lg: 'lg' }}>
-        <Input
-          { ...field }
-          isInvalid={ Boolean(fieldState.error) }
-          isDisabled={ formState.isSubmitting || isReadOnly }
-          autoComplete="off"
-        />
-        <InputPlaceholder text="Support URL or email" error={ fieldState.error }/>
-      </FormControl>
-    );
-  }, [ isReadOnly ]);
-
+const TokenInfoFieldSupport = (props: Props) => {
   const validate = React.useCallback((newValue: string | undefined) => {
+    if (typeof newValue !== 'string') {
+      return true;
+    }
+
     const urlValidationResult = urlValidator(newValue);
-    const emailValidationResult = emailValidator(newValue || '');
+    const emailValidationResult = emailValidator(newValue);
 
     if (urlValidationResult === true || emailValidationResult === true) {
       return true;
@@ -42,11 +29,11 @@ const TokenInfoFieldSupport = ({ control, isReadOnly }: Props) => {
   }, []);
 
   return (
-    <Controller
+    <FormFieldText<Fields, 'support'>
       name="support"
-      control={ control }
-      render={ renderControl }
+      placeholder="Support URL or email"
       rules={{ validate }}
+      { ...props }
     />
   );
 };
diff --git a/ui/tokenInfo/fields/TokenInfoFieldTokenName.tsx b/ui/tokenInfo/fields/TokenInfoFieldTokenName.tsx
deleted file mode 100644
index e186e25c39..0000000000
--- a/ui/tokenInfo/fields/TokenInfoFieldTokenName.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { FormControl, Input } from '@chakra-ui/react';
-import React from 'react';
-import type { Control, ControllerRenderProps } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import type { Fields } from '../types';
-
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
-
-interface Props {
-  control: Control<Fields>;
-}
-
-const TokenInfoFieldTokenName = ({ control }: Props) => {
-  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, 'token_name'>}) => {
-    return (
-      <FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }}>
-        <Input
-          { ...field }
-          required
-          isDisabled
-        />
-        <InputPlaceholder text="Token name"/>
-      </FormControl>
-    );
-  }, []);
-
-  return (
-    <Controller
-      name="token_name"
-      control={ control }
-      render={ renderControl }
-    />
-  );
-};
-
-export default React.memo(TokenInfoFieldTokenName);
diff --git a/ui/tokenInfo/types.ts b/ui/tokenInfo/types.ts
index c2dd965e0e..c498f3b362 100644
--- a/ui/tokenInfo/types.ts
+++ b/ui/tokenInfo/types.ts
@@ -1,4 +1,4 @@
-import type { Option } from 'ui/shared/FancySelect/types';
+import type { Option } from 'ui/shared/forms/inputs/select/types';
 
 export interface Fields extends SocialLinkFields, TickerUrlFields {
   address: string;
diff --git a/ui/tokenInstance/TokenInstanceDetails.pw.tsx b/ui/tokenInstance/TokenInstanceDetails.pw.tsx
index d4d31085e4..438287816a 100644
--- a/ui/tokenInstance/TokenInstanceDetails.pw.tsx
+++ b/ui/tokenInstance/TokenInstanceDetails.pw.tsx
@@ -1,45 +1,104 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import type { AddressMetadataInfo, AddressMetadataTagApi } from 'types/api/addressMetadata';
+
+import config from 'configs/app';
 import * as addressMock from 'mocks/address/address';
+import { protocolTagWithMeta } from 'mocks/metadata/address';
 import { tokenInfoERC721a } from 'mocks/tokens/tokenInfo';
 import * as tokenInstanceMock from 'mocks/tokens/tokenInstance';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect, devices } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
+import { MetadataUpdateProvider } from 'ui/tokenInstance/contexts/metadataUpdate';
 
 import TokenInstanceDetails from './TokenInstanceDetails';
 
 const hash = tokenInfoERC721a.address;
 
-const API_URL_ADDRESS = buildApiUrl('address', { hash });
-const API_URL_TOKEN_TRANSFERS_COUNT = buildApiUrl('token_instance_transfers_count', {
-  id: tokenInstanceMock.unique.id,
-  hash,
+const addressMetadataQueryParams = {
+  addresses: [ hash ],
+  chainId: config.chain.id,
+  tagsLimit: '20',
+};
+
+function generateAddressMetadataResponse(tag: AddressMetadataTagApi) {
+  return {
+    addresses: {
+      [ hash.toLowerCase() as string ]: {
+        tags: [ {
+          ...tag,
+          meta: JSON.stringify(tag.meta),
+        } ],
+      },
+    },
+  } as AddressMetadataInfo;
+}
+
+test.beforeEach(async({ mockApiResponse, mockAssetResponse }) => {
+  await mockApiResponse('address', addressMock.contract, { pathParams: { hash } });
+  await mockApiResponse('token_instance_transfers_count', { transfers_count: 42 }, { pathParams: { id: tokenInstanceMock.unique.id, hash } });
+  await mockAssetResponse('http://localhost:3000/nft-marketplace-logo.png', './playwright/mocks/image_s.jpg');
+  await mockAssetResponse(tokenInstanceMock.unique.image_url as string, './playwright/mocks/image_md.jpg');
 });
 
-test('base view +@dark-mode +@mobile', async({ mount, page }) => {
-  await page.route('http://localhost:3000/nft-marketplace-logo.png', (route) => route.fulfill({
-    status: 200,
-    path: './playwright/mocks/image_s.jpg',
-  }));
-  await page.route(API_URL_ADDRESS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(addressMock.contract),
-  }));
-  await page.route(API_URL_TOKEN_TRANSFERS_COUNT, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ transfers_count: 42 }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <TokenInstanceDetails data={ tokenInstanceMock.unique } token={ tokenInfoERC721a }/>
-    </TestApp>,
+test('base view +@dark-mode', async({ render, page }) => {
+  const component = await render(
+    <MetadataUpdateProvider>
+      <TokenInstanceDetails data={{ ...tokenInstanceMock.unique, image_url: null }} token={ tokenInfoERC721a }/>
+    </MetadataUpdateProvider>,
   );
-
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
+});
+
+test.describe('action button', () => {
+  test.beforeEach(async({ mockApiResponse, mockAssetResponse }) => {
+    const metadataResponse = generateAddressMetadataResponse(protocolTagWithMeta);
+    await mockApiResponse('address_metadata_info', metadataResponse, { queryParams: addressMetadataQueryParams });
+    await mockAssetResponse(protocolTagWithMeta?.meta?.appLogoURL as string, './playwright/mocks/image_s.jpg');
+  });
+
+  test('base view +@dark-mode', async({ render, page }) => {
+    const component = await render(
+      <MetadataUpdateProvider>
+        <TokenInstanceDetails data={ tokenInstanceMock.unique } token={ tokenInfoERC721a }/>
+      </MetadataUpdateProvider>,
+    );
+    await expect(component).toHaveScreenshot({
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
+    });
+  });
+
+  test('without marketplaces +@dark-mode', async({ render, page, mockEnvs }) => {
+    mockEnvs(ENVS_MAP.noNftMarketplaces);
+    const component = await render(
+      <MetadataUpdateProvider>
+        <TokenInstanceDetails data={ tokenInstanceMock.unique } token={ tokenInfoERC721a }/>
+      </MetadataUpdateProvider>,
+    );
+    await expect(component).toHaveScreenshot({
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
+    });
+  });
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('base view', async({ render, page }) => {
+    const component = await render(
+      <MetadataUpdateProvider>
+        <TokenInstanceDetails data={{ ...tokenInstanceMock.unique, image_url: null }} token={ tokenInfoERC721a }/>
+      </MetadataUpdateProvider>,
+    );
+    await expect(component).toHaveScreenshot({
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
+    });
   });
 });
diff --git a/ui/tokenInstance/TokenInstanceDetails.tsx b/ui/tokenInstance/TokenInstanceDetails.tsx
index 6896f1cc4c..2ad0667361 100644
--- a/ui/tokenInstance/TokenInstanceDetails.tsx
+++ b/ui/tokenInstance/TokenInstanceDetails.tsx
@@ -3,8 +3,12 @@ import React from 'react';
 
 import type { TokenInfo, TokenInstance } from 'types/api/token';
 
+import config from 'configs/app';
+import useIsMounted from 'lib/hooks/useIsMounted';
+import AppActionButton from 'ui/shared/AppActionButton/AppActionButton';
+import useAppActionData from 'ui/shared/AppActionButton/useAppActionData';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
 import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
@@ -24,6 +28,9 @@ interface Props {
 }
 
 const TokenInstanceDetails = ({ data, token, scrollRef, isLoading }: Props) => {
+  const appActionData = useAppActionData(token?.address, !isLoading);
+  const isMounted = useIsMounted();
+
   const handleCounterItemClick = React.useCallback(() => {
     window.setTimeout(() => {
       // cannot do scroll instantly, have to wait a little
@@ -31,7 +38,7 @@ const TokenInstanceDetails = ({ data, token, scrollRef, isLoading }: Props) => {
     }, 500);
   }, [ scrollRef ]);
 
-  if (!data || !token) {
+  if (!data || !token || !isMounted) {
     return null;
   }
 
@@ -46,40 +53,69 @@ const TokenInstanceDetails = ({ data, token, scrollRef, isLoading }: Props) => {
           overflow="hidden"
         >
           { data.is_unique && data.owner && (
-            <DetailsInfoItem
-              title="Owner"
-              hint="Current owner of this token instance"
-              isLoading={ isLoading }
-            >
-              <AddressEntity
-                address={ data.owner }
+            <>
+              <DetailsInfoItem.Label
+                hint="Current owner of this token instance"
                 isLoading={ isLoading }
-              />
-            </DetailsInfoItem>
+              >
+                Owner
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <AddressEntity
+                  address={ data.owner }
+                  isLoading={ isLoading }
+                />
+              </DetailsInfoItem.Value>
+            </>
           ) }
+
           <TokenInstanceCreatorAddress hash={ isLoading ? '' : token.address }/>
-          <DetailsInfoItem
-            title="Token ID"
+
+          <DetailsInfoItem.Label
             hint="This token instance unique token ID"
             isLoading={ isLoading }
           >
+            Token ID
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
             <Flex alignItems="center" overflow="hidden">
               <Skeleton isLoaded={ !isLoading } overflow="hidden" display="inline-block" w="100%">
                 <HashStringShortenDynamic hash={ data.id }/>
               </Skeleton>
               <CopyToClipboard text={ data.id } isLoading={ isLoading }/>
             </Flex>
-          </DetailsInfoItem>
+          </DetailsInfoItem.Value>
+
           <TokenInstanceTransfersCount hash={ isLoading ? '' : token.address } id={ isLoading ? '' : data.id } onClick={ handleCounterItemClick }/>
-          <TokenNftMarketplaces isLoading={ isLoading } hash={ token.address } id={ data.id }/>
+
+          <TokenNftMarketplaces
+            isLoading={ isLoading }
+            hash={ token.address }
+            id={ data.id }
+            appActionData={ appActionData }
+            source="NFT item"
+          />
+
+          { (config.UI.views.nft.marketplaces.length === 0 && appActionData) && (
+            <>
+              <DetailsInfoItem.Label
+                hint="Link to the dapp"
+              >
+                Dapp
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value py="1px">
+                <AppActionButton data={ appActionData } height="30px" source="NFT item"/>
+              </DetailsInfoItem.Value>
+            </>
+          ) }
         </Grid>
         <NftMedia
-          url={ data.animation_url || data.image_url }
+          data={ data }
+          isLoading={ isLoading }
+          withFullscreen
           w="250px"
           flexShrink={ 0 }
           alignSelf={{ base: 'center', lg: 'flex-start' }}
-          isLoading={ isLoading }
-          withFullscreen
         />
       </Flex>
       <Grid
diff --git a/ui/tokenInstance/TokenInstanceMetadata.pw.tsx b/ui/tokenInstance/TokenInstanceMetadata.pw.tsx
index b27f7f46b6..e5f24aa339 100644
--- a/ui/tokenInstance/TokenInstanceMetadata.pw.tsx
+++ b/ui/tokenInstance/TokenInstanceMetadata.pw.tsx
@@ -1,17 +1,12 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as tokenInstanceMock from 'mocks/tokens/tokenInstance';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import TokenInstanceMetadata from './TokenInstanceMetadata';
 
-test('base view +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TokenInstanceMetadata data={ tokenInstanceMock.withRichMetadata.metadata }/>
-    </TestApp>,
-  );
+test('base view +@mobile', async({ render }) => {
+  const component = await render(<TokenInstanceMetadata data={ tokenInstanceMock.withRichMetadata.metadata }/>);
 
   await component.getByRole('button', { name: /png/i }).click();
   await component.getByRole('button', { name: /primary/i }).click();
@@ -26,14 +21,9 @@ test('base view +@mobile', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('raw view', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TokenInstanceMetadata data={ tokenInstanceMock.withRichMetadata.metadata }/>
-    </TestApp>,
-  );
-
-  await component.locator('select').selectOption('JSON');
-
+test('raw view', async({ render }) => {
+  const component = await render(<TokenInstanceMetadata data={ tokenInstanceMock.withRichMetadata.metadata }/>);
+  await component.getByRole('button', { name: 'Table' }).click();
+  await component.getByText('JSON').click();
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/tokenInstance/TokenInstanceMetadata.tsx b/ui/tokenInstance/TokenInstanceMetadata.tsx
index fa045be1a1..d9841ef134 100644
--- a/ui/tokenInstance/TokenInstanceMetadata.tsx
+++ b/ui/tokenInstance/TokenInstanceMetadata.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Select, chakra } from '@chakra-ui/react';
+import { Alert, Box, Flex, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenInstance } from 'types/api/token';
@@ -6,10 +6,17 @@ import type { TokenInstance } from 'types/api/token';
 import ContentLoader from 'ui/shared/ContentLoader';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
+import Select from 'ui/shared/select/Select';
 
+import { useMetadataUpdateContext } from './contexts/metadataUpdate';
 import MetadataAccordion from './metadata/MetadataAccordion';
 
-type Format = 'JSON' | 'Table'
+const OPTIONS = [
+  { label: 'Table', value: 'Table' as const },
+  { label: 'JSON', value: 'JSON' as const },
+];
+
+type Format = (typeof OPTIONS)[number]['value'];
 
 interface Props {
   data: TokenInstance['metadata'] | undefined;
@@ -19,11 +26,9 @@ interface Props {
 const TokenInstanceMetadata = ({ data, isPlaceholderData }: Props) => {
   const [ format, setFormat ] = React.useState<Format>('Table');
 
-  const handleSelectChange = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
-    setFormat(event.target.value as Format);
-  }, []);
+  const { status: refetchStatus } = useMetadataUpdateContext() || {};
 
-  if (isPlaceholderData) {
+  if (isPlaceholderData || refetchStatus === 'WAITING_FOR_RESPONSE') {
     return <ContentLoader/>;
   }
 
@@ -37,12 +42,22 @@ const TokenInstanceMetadata = ({ data, isPlaceholderData }: Props) => {
 
   return (
     <Box>
+      { refetchStatus === 'ERROR' && (
+        <Alert status="warning" display="flow" mb={ 6 }>
+          <chakra.span fontWeight={ 600 }>Ooops! </chakra.span>
+          <span>We { `couldn't` } refresh metadata. Please try again now or later.</span>
+        </Alert>
+      ) }
       <Flex alignItems="center" mb={ 6 }>
         <chakra.span fontWeight={ 500 }>Metadata</chakra.span>
-        <Select size="xs" borderRadius="base" value={ format } onChange={ handleSelectChange } focusBorderColor="none" w="auto" ml={ 5 }>
-          <option value="Table">Table</option>
-          <option value="JSON">JSON</option>
-        </Select>
+        <Select
+          options={ OPTIONS }
+          name="metadata-format"
+          defaultValue="Table"
+          onChange={ setFormat }
+          w="85px"
+          ml={ 5 }
+        />
         { format === 'JSON' && <CopyToClipboard text={ JSON.stringify(data) } ml="auto"/> }
       </Flex>
       { content }
diff --git a/ui/tokenInstance/TokenInstanceMetadataFetcher.tsx b/ui/tokenInstance/TokenInstanceMetadataFetcher.tsx
new file mode 100644
index 0000000000..9be9b59c01
--- /dev/null
+++ b/ui/tokenInstance/TokenInstanceMetadataFetcher.tsx
@@ -0,0 +1,183 @@
+import type { ToastId } from '@chakra-ui/react';
+import { Alert, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Spinner, Center } from '@chakra-ui/react';
+import { useQueryClient } from '@tanstack/react-query';
+import React from 'react';
+
+import type { SocketMessage } from 'lib/socket/types';
+import type { TokenInstance } from 'types/api/token';
+
+import config from 'configs/app';
+import useApiFetch from 'lib/api/useApiFetch';
+import { getResourceKey } from 'lib/api/useApiQuery';
+import { MINUTE, SECOND } from 'lib/consts';
+import getErrorMessage from 'lib/errors/getErrorMessage';
+import useToast from 'lib/hooks/useToast';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
+import ReCaptcha from 'ui/shared/reCaptcha/ReCaptcha';
+import useReCaptcha from 'ui/shared/reCaptcha/useReCaptcha';
+
+import { useMetadataUpdateContext } from './contexts/metadataUpdate';
+
+interface Props {
+  hash: string;
+  id: string;
+}
+
+const TokenInstanceMetadataFetcher = ({ hash, id }: Props) => {
+  const timeoutId = React.useRef<number>();
+  const toastId = React.useRef<ToastId>();
+
+  const { status, setStatus } = useMetadataUpdateContext() || {};
+  const apiFetch = useApiFetch();
+  const toast = useToast();
+  const queryClient = useQueryClient();
+  const recaptcha = useReCaptcha();
+
+  const handleRefreshError = React.useCallback(() => {
+    setStatus?.('ERROR');
+    toastId.current && toast.update(toastId.current, {
+      title: 'Error',
+      description: 'The refreshing process has failed. Please try again.',
+      status: 'warning',
+      duration: 5 * SECOND,
+      isClosable: true,
+    });
+  }, [ setStatus, toast ]);
+
+  const initializeUpdate = React.useCallback(async(tokenProp?: string) => {
+    try {
+      const token = tokenProp || await recaptcha.executeAsync();
+      await apiFetch<'token_instance_refresh_metadata', unknown, unknown>('token_instance_refresh_metadata', {
+        pathParams: { hash, id },
+        fetchParams: {
+          method: 'PATCH',
+          body: { recaptcha_response: token },
+        },
+      });
+      setStatus?.('WAITING_FOR_RESPONSE');
+      toastId.current = toast({
+        title: 'Please wait',
+        description: 'Refetching metadata request sent',
+        icon: <Spinner size="sm" mr={ 2 }/>,
+        status: 'warning',
+        duration: null,
+        isClosable: false,
+      });
+      timeoutId.current = window.setTimeout(handleRefreshError, 2 * MINUTE);
+    } catch (error) {
+      toast({
+        title: 'Error',
+        description: getErrorMessage(error) || 'Unable to initialize metadata update',
+        status: 'warning',
+      });
+      setStatus?.('ERROR');
+    }
+
+  }, [ apiFetch, handleRefreshError, hash, id, recaptcha, setStatus, toast ]);
+
+  const handleModalClose = React.useCallback(() => {
+    setStatus?.('INITIAL');
+  }, [ setStatus ]);
+
+  const handleSocketMessage: SocketMessage.TokenInstanceMetadataFetched['handler'] = React.useCallback((payload) => {
+    if (String(payload.token_id) !== id) {
+      return;
+    }
+
+    const queryKey = getResourceKey('token_instance', { queryParams: { hash, id } });
+    queryClient.setQueryData(queryKey, (prevData: TokenInstance | undefined): TokenInstance | undefined => {
+      if (!prevData) {
+        return;
+      }
+
+      const castToString = (value: unknown) => typeof value === 'string' ? value : undefined;
+
+      return {
+        ...prevData,
+        external_app_url: castToString(payload.fetched_metadata?.external_url) ?? null,
+        animation_url: castToString(payload.fetched_metadata?.animation_url) ?? null,
+        image_url: castToString(
+          payload.fetched_metadata?.image ||
+            payload.fetched_metadata?.image_url ||
+            payload.fetched_metadata?.animation_url,
+        ) ?? null,
+        metadata: payload.fetched_metadata,
+      };
+    });
+
+    toastId.current && toast.update(toastId.current, {
+      title: 'Success!',
+      description: 'Metadata has been refreshed',
+      status: 'success',
+      duration: 5 * SECOND,
+      isClosable: true,
+    });
+
+    setStatus?.('SUCCESS');
+
+    window.clearTimeout(timeoutId.current);
+  }, [ hash, id, queryClient, setStatus, toast ]);
+
+  const channel = useSocketChannel({
+    topic: `token_instances:${ hash.toLowerCase() }`,
+    onSocketClose: handleRefreshError,
+    onSocketError: handleRefreshError,
+    isDisabled: status !== 'WAITING_FOR_RESPONSE',
+  });
+
+  useSocketMessage({
+    channel,
+    event: 'fetched_token_instance_metadata',
+    handler: handleSocketMessage,
+  });
+
+  React.useEffect(() => {
+    if (status !== 'MODAL_OPENED') {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(initializeUpdate, 100);
+    return () => window.clearTimeout(timeoutId);
+  }, [ status, initializeUpdate ]);
+
+  React.useEffect(() => {
+    return () => {
+      timeoutId.current && window.clearTimeout(timeoutId.current);
+      toastId.current && toast.close(toastId.current);
+    };
+  // run only on mount/unmount
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (status !== 'MODAL_OPENED') {
+    return null;
+  }
+
+  return (
+    <Modal isOpen={ status === 'MODAL_OPENED' } onClose={ handleModalClose } size={{ base: 'full', lg: 'sm' }}>
+      <ModalOverlay/>
+      <ModalContent>
+        <ModalHeader fontWeight="500" textStyle="h3" mb={ 4 }>Sending request</ModalHeader>
+        <ModalCloseButton/>
+        <ModalBody mb={ 0 } minH="78px">
+          { config.services.reCaptchaV2.siteKey ? (
+            <>
+              <Center h="80px">
+                <Spinner size="lg"/>
+              </Center>
+              <ReCaptcha ref={ recaptcha.ref }/>
+            </>
+          ) : (
+            <Alert status="error">
+              Metadata refresh is not available at the moment since reCaptcha is not configured for this application.
+              Please contact the service maintainer to make necessary changes in the service configuration.
+            </Alert>
+          ) }
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default React.memo(TokenInstanceMetadataFetcher);
diff --git a/ui/tokenInstance/TokenInstancePageTitle.tsx b/ui/tokenInstance/TokenInstancePageTitle.tsx
new file mode 100644
index 0000000000..775dcd428f
--- /dev/null
+++ b/ui/tokenInstance/TokenInstancePageTitle.tsx
@@ -0,0 +1,124 @@
+import { Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenInfo, TokenInstance } from 'types/api/token';
+
+import { useAppContext } from 'lib/contexts/app';
+import * as regexp from 'lib/regexp';
+import { getTokenTypeName } from 'lib/token/tokenTypes';
+import AddressQrCode from 'ui/address/details/AddressQrCode';
+import AccountActionsMenu from 'ui/shared/AccountActionsMenu/AccountActionsMenu';
+import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
+import Tag from 'ui/shared/chakra/Tag';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import PageTitle from 'ui/shared/Page/PageTitle';
+
+interface Props {
+  isLoading: boolean;
+  token: TokenInfo | undefined;
+  instance: TokenInstance | undefined;
+  hash: string | undefined;
+}
+
+const TokenInstancePageTitle = ({ isLoading, token, instance, hash }: Props) => {
+  const appProps = useAppContext();
+
+  const title = (() => {
+    if (typeof instance?.metadata?.name === 'string') {
+      return instance.metadata.name;
+    }
+
+    if (!instance) {
+      return `Unknown token instance`;
+    }
+
+    if (token?.name || token?.symbol) {
+      return (token.name || token.symbol) + ' #' + instance.id;
+    }
+
+    return `ID ${ instance.id }`;
+  })();
+
+  const backLink = React.useMemo(() => {
+    const hasGoBackLink = appProps.referrer && appProps.referrer.includes(`/token/${ hash }`) && !appProps.referrer.includes('instance');
+
+    if (!hasGoBackLink) {
+      return;
+    }
+
+    return {
+      label: 'Back to token page',
+      url: appProps.referrer,
+    };
+  }, [ appProps.referrer, hash ]);
+
+  const tokenTag = token ? <Tag isLoading={ isLoading }>{ getTokenTypeName(token.type) }</Tag> : null;
+
+  const appLink = (() => {
+    if (!instance?.external_app_url) {
+      return null;
+    }
+
+    try {
+      const url = regexp.URL_PREFIX.test(instance.external_app_url) ?
+        new URL(instance.external_app_url) :
+        new URL('https://' + instance.external_app_url);
+
+      return (
+        <LinkExternal href={ url.toString() } variant="subtle" isLoading={ isLoading } ml={{ base: 0, lg: 'auto' }}>
+          { url.hostname || instance.external_app_url }
+        </LinkExternal>
+      );
+    } catch (error) {
+      return (
+        <LinkExternal href={ instance.external_app_url } isLoading={ isLoading } ml={{ base: 0, lg: 'auto' }}>
+          View in app
+        </LinkExternal>
+      );
+    }
+  })();
+
+  const address = {
+    hash: hash || '',
+    is_contract: true,
+    implementations: null,
+    watchlist_names: [],
+    watchlist_address_id: null,
+  };
+
+  const titleSecondRow = (
+    <Flex alignItems="center" w="100%" minW={ 0 } columnGap={ 2 } rowGap={ 2 } flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
+      { token && (
+        <TokenEntity
+          token={ token }
+          isLoading={ isLoading }
+          noSymbol
+          noCopy
+          jointSymbol
+          fontFamily="heading"
+          fontSize="lg"
+          fontWeight={ 500 }
+          w="auto"
+          maxW="700px"
+        />
+      ) }
+      { !isLoading && <AddressAddToWallet token={ token } variant="button"/> }
+      <AddressQrCode address={ address } isLoading={ isLoading }/>
+      <AccountActionsMenu isLoading={ isLoading } showUpdateMetadataItem/>
+      { appLink }
+    </Flex>
+  );
+
+  return (
+    <PageTitle
+      title={ title }
+      backLink={ backLink }
+      contentAfter={ tokenTag }
+      secondRow={ titleSecondRow }
+      isLoading={ isLoading }
+    />
+  );
+};
+
+export default React.memo(TokenInstancePageTitle);
diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_action-button-base-view-dark-mode-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_action-button-base-view-dark-mode-1.png
new file mode 100644
index 0000000000..75624c57e7
Binary files /dev/null and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_action-button-base-view-dark-mode-1.png differ
diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_action-button-without-marketplaces-dark-mode-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_action-button-without-marketplaces-dark-mode-1.png
new file mode 100644
index 0000000000..5aabf6d8ab
Binary files /dev/null and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_action-button-without-marketplaces-dark-mode-1.png differ
diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..c40c1e3fac
Binary files /dev/null and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png
deleted file mode 100644
index 9927f5e081..0000000000
Binary files a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png and /dev/null differ
diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_action-button-base-view-dark-mode-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_action-button-base-view-dark-mode-1.png
new file mode 100644
index 0000000000..e4c771757f
Binary files /dev/null and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_action-button-base-view-dark-mode-1.png differ
diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_action-button-without-marketplaces-dark-mode-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_action-button-without-marketplaces-dark-mode-1.png
new file mode 100644
index 0000000000..10daabec90
Binary files /dev/null and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_action-button-without-marketplaces-dark-mode-1.png differ
diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_base-view-dark-mode-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..8367c1106f
Binary files /dev/null and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_base-view-dark-mode-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_base-view-dark-mode-mobile-1.png
deleted file mode 100644
index 36eb9cb6e2..0000000000
Binary files a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_base-view-dark-mode-mobile-1.png and /dev/null differ
diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_mobile-base-view-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_mobile-base-view-1.png
new file mode 100644
index 0000000000..ea0fc67321
Binary files /dev/null and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_base-view-dark-mode-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_base-view-dark-mode-mobile-1.png
deleted file mode 100644
index 19af76236f..0000000000
Binary files a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_base-view-dark-mode-mobile-1.png and /dev/null differ
diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceMetadata.pw.tsx_default_base-view-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceMetadata.pw.tsx_default_base-view-mobile-1.png
index e8099dc08a..4d1588c598 100644
Binary files a/ui/tokenInstance/__screenshots__/TokenInstanceMetadata.pw.tsx_default_base-view-mobile-1.png and b/ui/tokenInstance/__screenshots__/TokenInstanceMetadata.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceMetadata.pw.tsx_default_raw-view-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceMetadata.pw.tsx_default_raw-view-1.png
index 634f5a637e..5840b2454e 100644
Binary files a/ui/tokenInstance/__screenshots__/TokenInstanceMetadata.pw.tsx_default_raw-view-1.png and b/ui/tokenInstance/__screenshots__/TokenInstanceMetadata.pw.tsx_default_raw-view-1.png differ
diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceMetadata.pw.tsx_mobile_base-view-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceMetadata.pw.tsx_mobile_base-view-mobile-1.png
index e614d8c119..51ed0e6ed4 100644
Binary files a/ui/tokenInstance/__screenshots__/TokenInstanceMetadata.pw.tsx_mobile_base-view-mobile-1.png and b/ui/tokenInstance/__screenshots__/TokenInstanceMetadata.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/tokenInstance/contexts/metadataUpdate.tsx b/ui/tokenInstance/contexts/metadataUpdate.tsx
new file mode 100644
index 0000000000..3dcd2eb464
--- /dev/null
+++ b/ui/tokenInstance/contexts/metadataUpdate.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+interface MetadataUpdateProviderProps {
+  children: React.ReactNode;
+}
+
+interface TMetadataUpdateContext {
+  status: Status;
+  setStatus: (status: Status) => void;
+}
+
+export const MetadataUpdateContext = React.createContext<TMetadataUpdateContext | null>(null);
+
+type Status = 'INITIAL' | 'MODAL_OPENED' | 'WAITING_FOR_RESPONSE' | 'SUCCESS' | 'ERROR';
+
+export function MetadataUpdateProvider({ children }: MetadataUpdateProviderProps) {
+
+  const [ status, setStatus ] = React.useState<Status>('INITIAL');
+
+  const value = React.useMemo(() => {
+    return {
+      status,
+      setStatus,
+    };
+  }, [ status ]);
+
+  return (
+    <MetadataUpdateContext.Provider value={ value }>
+      { children }
+    </MetadataUpdateContext.Provider>
+  );
+}
+
+export function useMetadataUpdateContext() {
+  const context = React.useContext(MetadataUpdateContext);
+  if (context === undefined) {
+    return null;
+  }
+  return context;
+}
diff --git a/ui/tokenInstance/details/TokenInstanceCreatorAddress.tsx b/ui/tokenInstance/details/TokenInstanceCreatorAddress.tsx
index 2f60ae2772..276fe95010 100644
--- a/ui/tokenInstance/details/TokenInstanceCreatorAddress.tsx
+++ b/ui/tokenInstance/details/TokenInstanceCreatorAddress.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import { ADDRESS_INFO } from 'stubs/address';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 
 interface Props {
@@ -28,21 +28,28 @@ const TokenInstanceCreatorAddress = ({ hash }: Props) => {
 
   const creatorAddress = {
     hash: addressQuery.data.creator_address_hash,
+    filecoin: {
+      robust: addressQuery.data.creator_filecoin_robust_address,
+    },
     is_contract: false,
-    implementation_name: null,
+    implementations: null,
   };
 
   return (
-    <DetailsInfoItem
-      title="Creator"
-      hint="Address that deployed this token contract"
-      isLoading={ addressQuery.isPlaceholderData }
-    >
-      <AddressEntity
-        address={ creatorAddress }
+    <>
+      <DetailsInfoItem.Label
+        hint="Address that deployed this token contract"
         isLoading={ addressQuery.isPlaceholderData }
-      />
-    </DetailsInfoItem>
+      >
+        Creator
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <AddressEntity
+          address={ creatorAddress }
+          isLoading={ addressQuery.isPlaceholderData }
+        />
+      </DetailsInfoItem.Value>
+    </>
   );
 };
 
diff --git a/ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx b/ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx
index 85dd53856c..ffaf5cd188 100644
--- a/ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx
+++ b/ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx
@@ -5,11 +5,13 @@ import type { TokenInstance } from 'types/api/token';
 import type { MetadataAttributes } from 'types/client/token';
 
 import parseMetadata from 'lib/token/parseMetadata';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
-import LinkExternal from 'ui/shared/LinkExternal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
+import { useMetadataUpdateContext } from '../contexts/metadataUpdate';
+
 interface Props {
   data?: TokenInstance;
   isLoading?: boolean;
@@ -35,8 +37,9 @@ const Item = ({ data, isLoading }: ItemProps) => {
           href={ data.value }
           fontSize="sm"
           lineHeight={ 5 }
+          isLoading={ isLoading }
         >
-          <TruncatedValue value={ data.value } w="calc(100% - 16px)"/>
+          <TruncatedValue value={ data.value } w="calc(100% - 16px)" isLoading={ isLoading }/>
         </LinkExternal>
       );
     }
@@ -54,62 +57,88 @@ const Item = ({ data, isLoading }: ItemProps) => {
       flexDir="column"
       alignItems="flex-start"
     >
-      <Skeleton isLoaded={ !isLoading } fontSize="xs" lineHeight={ 4 } color="text_secondary" fontWeight={ 500 } mb={ 1 }>
-        <span>{ data.trait_type }</span>
-      </Skeleton>
+      <TruncatedValue
+        value={ data.trait_type }
+        fontSize="xs"
+        w="100%"
+        lineHeight={ 4 }
+        color="text_secondary"
+        fontWeight={ 500 }
+        mb={ 1 }
+        isLoading={ isLoading }
+      />
       { value }
     </GridItem>
   );
 };
 
-const TokenInstanceMetadataInfo = ({ data, isLoading }: Props) => {
+const TokenInstanceMetadataInfo = ({ data, isLoading: isLoadingProp }: Props) => {
+  const { status: refetchStatus } = useMetadataUpdateContext() || {};
+
   const metadata = React.useMemo(() => parseMetadata(data?.metadata), [ data ]);
-  const hasMetadata = metadata && Boolean((metadata.name || metadata.description || metadata.attributes));
 
+  const hasMetadata = metadata && Boolean((metadata.name || metadata.description || metadata.attributes));
   if (!hasMetadata) {
     return null;
   }
 
+  const isLoading = isLoadingProp || refetchStatus === 'WAITING_FOR_RESPONSE';
+
   return (
     <>
       <DetailsInfoItemDivider/>
       { metadata?.name && (
-        <DetailsInfoItem
-          title="Name"
-          hint="NFT name"
-          whiteSpace="normal"
-          wordBreak="break-word"
-          isLoading={ isLoading }
-        >
-          <Skeleton isLoaded={ !isLoading }>
-            { metadata.name }
-          </Skeleton>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="NFT name"
+            isLoading={ isLoading }
+          >
+            Name
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value
+            whiteSpace="normal"
+            wordBreak="break-word"
+          >
+            <Skeleton isLoaded={ !isLoading }>
+              { metadata.name }
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
       ) }
       { metadata?.description && (
-        <DetailsInfoItem
-          title="Description"
-          hint="NFT description"
-          whiteSpace="normal"
-          wordBreak="break-word"
-          isLoading={ isLoading }
-        >
-          <Skeleton isLoaded={ !isLoading }>
-            { metadata.description }
-          </Skeleton>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="NFT description"
+            isLoading={ isLoading }
+          >
+            Description
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value
+            whiteSpace="normal"
+            wordBreak="break-word"
+          >
+            <Skeleton isLoaded={ !isLoading }>
+              { metadata.description }
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
       ) }
-      { metadata?.attributes && (
-        <DetailsInfoItem
-          title="Attributes"
-          hint="NFT attributes"
-          whiteSpace="normal"
-          isLoading={ isLoading }
-        >
-          <Grid gap={ 2 } templateColumns="repeat(auto-fill,minmax(160px, 1fr))" w="100%">
-            { metadata.attributes.map((attribute, index) => <Item key={ index } data={ attribute } isLoading={ isLoading }/>) }
-          </Grid>
-        </DetailsInfoItem>
+      { metadata?.attributes && metadata.attributes.length > 0 && (
+        <>
+          <DetailsInfoItem.Label
+            hint="NFT attributes"
+            isLoading={ isLoading }
+          >
+            Attributes
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Grid gap={ 2 } templateColumns="repeat(auto-fill,minmax(160px, 1fr))" w="100%" whiteSpace="normal">
+              { metadata.attributes
+                .filter((attribute) => attribute.value)
+                .map((attribute, index) => <Item key={ index } data={ attribute } isLoading={ isLoading }/>) }
+            </Grid>
+          </DetailsInfoItem.Value>
+        </>
       ) }
     </>
   );
diff --git a/ui/tokenInstance/details/TokenInstanceTransfersCount.tsx b/ui/tokenInstance/details/TokenInstanceTransfersCount.tsx
index 0635df72d3..5bb07ff37a 100644
--- a/ui/tokenInstance/details/TokenInstanceTransfersCount.tsx
+++ b/ui/tokenInstance/details/TokenInstanceTransfersCount.tsx
@@ -4,8 +4,8 @@ import React from 'react';
 import { route } from 'nextjs-routes';
 
 import useApiQuery from 'lib/api/useApiQuery';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
-import LinkInternal from 'ui/shared/LinkInternal';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 
 interface Props {
   hash: string;
@@ -37,20 +37,24 @@ const TokenInstanceTransfersCount = ({ hash, id, onClick }: Props) => {
     undefined;
 
   return (
-    <DetailsInfoItem
-      title="Transfers"
-      hint="Number of transfer for the token instance"
-      isLoading={ transfersCountQuery.isPlaceholderData }
-    >
-      <Skeleton isLoaded={ !transfersCountQuery.isPlaceholderData } display="inline-block">
-        <LinkInternal
-          href={ url }
-          onClick={ transfersCountQuery.data.transfers_count > 0 ? onClick : undefined }
-        >
-          { transfersCountQuery.data.transfers_count.toLocaleString() }
-        </LinkInternal>
-      </Skeleton>
-    </DetailsInfoItem>
+    <>
+      <DetailsInfoItem.Label
+        hint="Number of transfer for the token instance"
+        isLoading={ transfersCountQuery.isPlaceholderData }
+      >
+        Transfers
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !transfersCountQuery.isPlaceholderData } display="inline-block">
+          <LinkInternal
+            href={ url }
+            onClick={ transfersCountQuery.data.transfers_count > 0 ? onClick : undefined }
+          >
+            { transfersCountQuery.data.transfers_count.toLocaleString() }
+          </LinkInternal>
+        </Skeleton>
+      </DetailsInfoItem.Value>
+    </>
   );
 };
 
diff --git a/ui/tokenInstance/metadata/MetadataItemPrimitive.tsx b/ui/tokenInstance/metadata/MetadataItemPrimitive.tsx
index 24a08b47fc..bfbccfe011 100644
--- a/ui/tokenInstance/metadata/MetadataItemPrimitive.tsx
+++ b/ui/tokenInstance/metadata/MetadataItemPrimitive.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import type { Primitive } from 'react-hook-form';
 
 import urlParser from 'lib/token/metadata/urlParser';
-import LinkExternal from 'ui/shared/LinkExternal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
 
 import MetadataAccordionItem from './MetadataAccordionItem';
 import MetadataAccordionItemTitle from './MetadataAccordionItemTitle';
@@ -27,6 +27,9 @@ const MetadataItemPrimitive = ({ name, value, isItem = true, isFlat, level }: Pr
         if (url) {
           return <LinkExternal href={ url.toString() }>{ value }</LinkExternal>;
         }
+        if (value === '') {
+          return <div>&quot;&quot;</div>;
+        }
       }
       // eslint-disable-next-line no-fallthrough
       default: {
@@ -36,7 +39,7 @@ const MetadataItemPrimitive = ({ name, value, isItem = true, isFlat, level }: Pr
   })();
 
   return (
-    <Component level={ level } isFlat={ isFlat }>
+    <Component level={ level } { ...(isItem ? { isFlat } : {}) }>
       { name && <MetadataAccordionItemTitle name={ name }/> }
       { content }
     </Component>
diff --git a/ui/tokenTransfers/TokenTransfersListItem.tsx b/ui/tokenTransfers/TokenTransfersListItem.tsx
new file mode 100644
index 0000000000..64a7814f95
--- /dev/null
+++ b/ui/tokenTransfers/TokenTransfersListItem.tsx
@@ -0,0 +1,110 @@
+import { Flex, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenTransfer } from 'types/api/tokenTransfer';
+
+import getCurrencyValue from 'lib/getCurrencyValue';
+import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
+import Tag from 'ui/shared/chakra/Tag';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import NftEntity from 'ui/shared/entities/nft/NftEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+type Props = {
+  item: TokenTransfer;
+  isLoading: boolean;
+};
+
+const TokenTransfersListItem = ({ item, isLoading }: Props) => {
+
+  const { valueStr } = item.total && 'value' in item.total && item.total.value !== null ? getCurrencyValue({
+    value: item.total.value,
+    exchangeRate: item.token?.exchange_rate,
+    accuracy: 8,
+    accuracyUsd: 2,
+    decimals: item.total.decimals || '0',
+  }) : { valueStr: null };
+
+  return (
+    <ListItemMobileGrid.Container>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TxEntity hash={ item.transaction_hash } isLoading={ isLoading } truncation="constant_long" noIcon/>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          enableIncrement
+          isLoading={ isLoading }
+        />
+      </ListItemMobileGrid.Value>
+
+      { item.method && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>Method</ListItemMobileGrid.Label><ListItemMobileGrid.Value>
+            <Tag isLoading={ isLoading }>{ item.method }</Tag>
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Block</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BlockEntity number={ item.block_number } isLoading={ isLoading } noIcon/>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>From</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <AddressEntity address={ item.from } isLoading={ isLoading } truncation="constant"/>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>To</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <AddressEntity address={ item.to } isLoading={ isLoading } truncation="constant"/>
+      </ListItemMobileGrid.Value>
+
+      { item.total && 'token_id' in item.total && item.token && (NFT_TOKEN_TYPE_IDS.includes(item.token.type)) && item.total.token_id !== null && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>Token ID</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value overflow="hidden">
+            <NftEntity
+              hash={ item.token.address }
+              id={ item.total.token_id }
+              isLoading={ isLoading }
+              noIcon
+            />
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+
+      { valueStr && item.token && (item.token.type === 'ERC-20' || item.token.type === 'ERC-1155') && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>Amount</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value>
+            <Flex gap={ 2 } overflow="hidden">
+              <Skeleton isLoaded={ !isLoading } wordBreak="break-all">
+                { valueStr }
+              </Skeleton>
+              <TokenEntity
+                token={ item.token }
+                isLoading={ isLoading }
+                onlySymbol
+                noCopy
+                width="auto"
+                minW="auto"
+                maxW="100px"
+              />
+            </Flex>
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default TokenTransfersListItem;
diff --git a/ui/tokenTransfers/TokenTransfersTable.tsx b/ui/tokenTransfers/TokenTransfersTable.tsx
new file mode 100644
index 0000000000..4e812d0f41
--- /dev/null
+++ b/ui/tokenTransfers/TokenTransfersTable.tsx
@@ -0,0 +1,44 @@
+import { Table, Tbody, Tr, Th } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenTransfer } from 'types/api/tokenTransfer';
+
+import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
+import { default as Thead } from 'ui/shared/TheadSticky';
+import TokenTransferTableItem from 'ui/tokenTransfers/TokenTransfersTableItem';
+
+interface Props {
+  items?: Array<TokenTransfer>;
+  top: number;
+  isLoading?: boolean;
+}
+
+const TokenTransferTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <AddressHighlightProvider>
+      <Table variant="simple" size="sm" minW="950px" style={{ tableLayout: 'auto' }}>
+        <Thead top={ top }>
+          <Tr>
+            <Th>Txn hash</Th>
+            <Th>Method</Th>
+            <Th>Block</Th>
+            <Th>From/To</Th>
+            <Th>Token ID</Th>
+            <Th isNumeric>Amount</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          { items?.map((item, index) => (
+            <TokenTransferTableItem
+              key={ item.transaction_hash + item.log_index + (isLoading ? index : '') }
+              item={ item }
+              isLoading={ isLoading }
+            />
+          )) }
+        </Tbody>
+      </Table>
+    </AddressHighlightProvider>
+  );
+};
+
+export default React.memo(TokenTransferTable);
diff --git a/ui/tokenTransfers/TokenTransfersTableItem.tsx b/ui/tokenTransfers/TokenTransfersTableItem.tsx
new file mode 100644
index 0000000000..7a1251329f
--- /dev/null
+++ b/ui/tokenTransfers/TokenTransfersTableItem.tsx
@@ -0,0 +1,97 @@
+import { Tr, Td, Flex, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenTransfer } from 'types/api/tokenTransfer';
+
+import getCurrencyValue from 'lib/getCurrencyValue';
+import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
+import AddressFromTo from 'ui/shared/address/AddressFromTo';
+import Tag from 'ui/shared/chakra/Tag';
+import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import NftEntity from 'ui/shared/entities/nft/NftEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+type Props = {
+  item: TokenTransfer;
+  isLoading?: boolean;
+};
+
+const TokenTransferTableItem = ({ item, isLoading }: Props) => {
+  const { valueStr } = item.total && 'value' in item.total && item.total.value !== null ? getCurrencyValue({
+    value: item.total.value,
+    exchangeRate: item.token?.exchange_rate,
+    accuracy: 8,
+    accuracyUsd: 2,
+    decimals: item.total.decimals || '0',
+  }) : { valueStr: null };
+
+  return (
+    <Tr>
+      <Td>
+        <TxEntity
+          hash={ item.transaction_hash }
+          isLoading={ isLoading }
+          fontWeight={ 600 }
+          noIcon
+          truncation="constant_long"
+        />
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          enableIncrement
+          isLoading={ isLoading }
+          color="text_secondary"
+          fontWeight="400"
+          display="inline-block"
+        />
+      </Td>
+      <Td maxW="120px">
+        { item.method && <Tag isLoading={ isLoading }>{ item.method }</Tag> }
+      </Td>
+      <Td>
+        <BlockEntity number={ item.block_number } isLoading={ isLoading } noIcon/>
+      </Td>
+      <Td>
+        <AddressFromTo
+          maxW={{ lg: '220px', xl: '320px' }}
+          from={ item.from }
+          to={ item.to }
+          isLoading={ isLoading }
+          mode={{ lg: 'compact', xl: 'long' }}
+        />
+      </Td>
+      <Td>
+        { item.total && 'token_id' in item.total && item.token && (NFT_TOKEN_TYPE_IDS.includes(item.token.type)) && item.total.token_id !== null ? (
+          <NftEntity
+            hash={ item.token.address }
+            id={ item.total.token_id }
+            isLoading={ isLoading }
+            maxW="140px"
+          />
+        ) : '-' }
+      </Td>
+      <Td isNumeric verticalAlign="top">
+        { (item.token && valueStr) ? (
+          <Flex gap={ 2 } overflow="hidden" justifyContent="flex-end">
+            <Skeleton isLoaded={ !isLoading } wordBreak="break-all">
+              { valueStr }
+            </Skeleton>
+            <TokenEntity
+              token={ item.token }
+              isLoading={ isLoading }
+              onlySymbol
+              noCopy
+              width="auto"
+              minW="auto"
+              maxW="100px"
+            />
+          </Flex>
+        ) : '-'
+        }
+      </Td>
+    </Tr>
+  );
+};
+
+export default React.memo(TokenTransferTableItem);
diff --git a/ui/tokens/Tokens.tsx b/ui/tokens/Tokens.tsx
index e0d66b2ac7..442bc2272f 100644
--- a/ui/tokens/Tokens.tsx
+++ b/ui/tokens/Tokens.tsx
@@ -18,9 +18,10 @@ interface Props {
   actionBar?: React.ReactNode;
   hasActiveFilters: boolean;
   description?: React.ReactNode;
+  tableTop?: number;
 }
 
-const Tokens = ({ query, onSortChange, sort, actionBar, description, hasActiveFilters }: Props) => {
+const Tokens = ({ query, onSortChange, sort, actionBar, description, hasActiveFilters, tableTop }: Props) => {
 
   const { isError, isPlaceholderData, data, pagination } = query;
 
@@ -50,6 +51,7 @@ const Tokens = ({ query, onSortChange, sort, actionBar, description, hasActiveFi
           isLoading={ isPlaceholderData }
           setSorting={ onSortChange }
           sorting={ sort }
+          top={ tableTop }
         />
       </Hide>
     </>
diff --git a/ui/tokens/TokensActionBar.tsx b/ui/tokens/TokensActionBar.tsx
index 497dcc9ca4..bca2d05112 100644
--- a/ui/tokens/TokensActionBar.tsx
+++ b/ui/tokens/TokensActionBar.tsx
@@ -45,15 +45,16 @@ const TokensActionBar = ({
       <HStack spacing={ 3 } mb={ 6 } display={{ base: 'flex', lg: 'none' }}>
         { filter }
         <Sort
+          name="tokens_sorting"
+          defaultValue={ sort }
           options={ SORT_OPTIONS }
-          setSort={ onSortChange }
-          sort={ sort }
+          onChange={ onSortChange }
         />
         { searchInput }
       </HStack>
       <ActionBar
         mt={ inTabsSlot ? 0 : -6 }
-        py={ inTabsSlot ? 0 : undefined }
+        py={{ lg: inTabsSlot ? 0 : undefined }}
         justifyContent={ inTabsSlot ? 'space-between' : undefined }
         display={{ base: pagination.isVisible ? 'flex' : 'none', lg: 'flex' }}
       >
diff --git a/ui/tokens/TokensListItem.tsx b/ui/tokens/TokensListItem.tsx
index 0d8570ecd2..45f223c3f9 100644
--- a/ui/tokens/TokensListItem.tsx
+++ b/ui/tokens/TokensListItem.tsx
@@ -5,6 +5,8 @@ import React from 'react';
 import type { TokenInfo } from 'types/api/token';
 
 import config from 'configs/app';
+import getItemIndex from 'lib/getItemIndex';
+import { getTokenTypeName } from 'lib/token/tokenTypes';
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
 import Tag from 'ui/shared/chakra/Tag';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
@@ -16,9 +18,7 @@ type Props = {
   index: number;
   page: number;
   isLoading?: boolean;
-}
-
-const PAGE_SIZE = 50;
+};
 
 const bridgedTokensFeature = config.features.bridgedTokens;
 
@@ -31,6 +31,7 @@ const TokensTableItem = ({
 
   const {
     address,
+    filecoin_robust_address: filecoinRobustAddress,
     exchange_rate: exchangeRate,
     type,
     holders,
@@ -59,17 +60,17 @@ const TokensTableItem = ({
             fontWeight="700"
           />
           <Flex ml={ 3 } flexShrink={ 0 } columnGap={ 1 }>
-            <Tag isLoading={ isLoading }>{ type }</Tag>
+            <Tag isLoading={ isLoading }>{ getTokenTypeName(type) }</Tag>
             { bridgedChainTag && <Tag isLoading={ isLoading }>{ bridgedChainTag }</Tag> }
           </Flex>
           <Skeleton isLoaded={ !isLoading } fontSize="sm" ml="auto" color="text_secondary" minW="24px" textAlign="right" lineHeight={ 6 }>
-            <span>{ (page - 1) * PAGE_SIZE + index + 1 }</span>
+            <span>{ getItemIndex(index, page) }</span>
           </Skeleton>
         </GridItem>
       </Grid>
       <Flex justifyContent="space-between" alignItems="center" width="150px" ml={ 7 } mt={ -2 }>
         <AddressEntity
-          address={{ hash: address }}
+          address={{ hash: address, filecoin: { robust: filecoinRobustAddress } }}
           isLoading={ isLoading }
           truncation="constant"
           noIcon
diff --git a/ui/tokens/TokensTable.tsx b/ui/tokens/TokensTable.tsx
index 0a406175de..25d18f4c9b 100644
--- a/ui/tokens/TokensTable.tsx
+++ b/ui/tokens/TokensTable.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import type { TokenInfo } from 'types/api/token';
 import type { TokensSortingField, TokensSortingValue } from 'types/api/tokens';
 
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import IconSvg from 'ui/shared/IconSvg';
 import { default as getNextSortValueShared } from 'ui/shared/sort/getNextSortValue';
 import { default as Thead } from 'ui/shared/TheadSticky';
@@ -24,9 +25,10 @@ type Props = {
   sorting?: TokensSortingValue;
   setSorting: (val?: TokensSortingValue) => void;
   isLoading?: boolean;
-}
+  top?: number;
+};
 
-const TokensTable = ({ items, page, isLoading, sorting, setSorting }: Props) => {
+const TokensTable = ({ items, page, isLoading, sorting, setSorting, top }: Props) => {
   const sortIconTransform = sorting?.includes('asc') ? 'rotate(-90deg)' : 'rotate(90deg)';
 
   const sort = React.useCallback((field: TokensSortingField) => () => {
@@ -36,7 +38,7 @@ const TokensTable = ({ items, page, isLoading, sorting, setSorting }: Props) =>
 
   return (
     <Table>
-      <Thead top={ 80 }>
+      <Thead top={ top ?? ACTION_BAR_HEIGHT_DESKTOP }>
         <Tr>
           <Th w="50%">Token</Th>
           <Th isNumeric w="15%">
diff --git a/ui/tokens/TokensTableItem.tsx b/ui/tokens/TokensTableItem.tsx
index e8f2916866..9fd6578517 100644
--- a/ui/tokens/TokensTableItem.tsx
+++ b/ui/tokens/TokensTableItem.tsx
@@ -5,6 +5,8 @@ import React from 'react';
 import type { TokenInfo } from 'types/api/token';
 
 import config from 'configs/app';
+import getItemIndex from 'lib/getItemIndex';
+import { getTokenTypeName } from 'lib/token/tokenTypes';
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
 import Tag from 'ui/shared/chakra/Tag';
 import type { EntityProps as AddressEntityProps } from 'ui/shared/entities/address/AddressEntity';
@@ -16,9 +18,7 @@ type Props = {
   index: number;
   page: number;
   isLoading?: boolean;
-}
-
-const PAGE_SIZE = 50;
+};
 
 const bridgedTokensFeature = config.features.bridgedTokens;
 
@@ -31,6 +31,7 @@ const TokensTableItem = ({
 
   const {
     address,
+    filecoin_robust_address: filecoinRobustAddress,
     exchange_rate: exchangeRate,
     type,
     holders,
@@ -44,20 +45,19 @@ const TokensTableItem = ({
 
   const tokenAddress: AddressEntityProps['address'] = {
     hash: address,
+    filecoin: {
+      robust: filecoinRobustAddress,
+    },
     name: '',
-    implementation_name: null,
     is_contract: true,
     is_verified: false,
     ens_domain_name: null,
+    implementations: null,
   };
 
   return (
     <Tr
-      sx={{
-        '&:hover [aria-label="Add token to wallet"]': {
-          opacity: 1,
-        },
-      }}
+      role="group"
     >
       <Td>
         <Flex alignItems="flex-start">
@@ -69,7 +69,7 @@ const TokensTableItem = ({
             mr={ 3 }
             minW="28px"
           >
-            { (page - 1) * PAGE_SIZE + index + 1 }
+            { getItemIndex(index, page) }
           </Skeleton>
           <Flex overflow="hidden" flexDir="column" rowGap={ 2 }>
             <TokenEntity
@@ -93,10 +93,11 @@ const TokensTableItem = ({
                 isLoading={ isLoading }
                 iconSize={ 5 }
                 opacity={ 0 }
+                _groupHover={{ opacity: 1 }}
               />
             </Flex>
             <Flex columnGap={ 1 }>
-              <Tag isLoading={ isLoading }>{ type }</Tag>
+              <Tag isLoading={ isLoading }>{ getTokenTypeName(type) }</Tag>
               { bridgedChainTag && <Tag isLoading={ isLoading }>{ bridgedChainTag }</Tag> }
             </Flex>
           </Flex>
diff --git a/ui/tokens/utils.ts b/ui/tokens/utils.ts
index 804271ccbc..a420453023 100644
--- a/ui/tokens/utils.ts
+++ b/ui/tokens/utils.ts
@@ -1,19 +1,19 @@
 import type { TokenType } from 'types/api/token';
 import type { TokensSortingValue } from 'types/api/tokens';
+import type { SelectOption } from 'ui/shared/select/types';
 
 import config from 'configs/app';
 import getFilterValuesFromQuery from 'lib/getFilterValuesFromQuery';
 import { TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
-import type { Option } from 'ui/shared/sort/Sort';
 
-export const SORT_OPTIONS: Array<Option<TokensSortingValue>> = [
-  { title: 'Default', id: undefined },
-  { title: 'Price ascending', id: 'fiat_value-asc' },
-  { title: 'Price descending', id: 'fiat_value-desc' },
-  { title: 'Holders ascending', id: 'holder_count-asc' },
-  { title: 'Holders descending', id: 'holder_count-desc' },
-  { title: 'On-chain market cap ascending', id: 'circulating_market_cap-asc' },
-  { title: 'On-chain market cap descending', id: 'circulating_market_cap-desc' },
+export const SORT_OPTIONS: Array<SelectOption<TokensSortingValue>> = [
+  { label: 'Default', value: undefined },
+  { label: 'Price ascending', value: 'fiat_value-asc' },
+  { label: 'Price descending', value: 'fiat_value-desc' },
+  { label: 'Holders ascending', value: 'holder_count-asc' },
+  { label: 'Holders descending', value: 'holder_count-desc' },
+  { label: 'On-chain market cap ascending', value: 'circulating_market_cap-asc' },
+  { label: 'On-chain market cap descending', value: 'circulating_market_cap-desc' },
 ];
 
 export const getTokenFilterValue = (getFilterValuesFromQuery<TokenType>).bind(null, TOKEN_TYPE_IDS);
diff --git a/ui/tx/NftTokenTransferSnippet.tsx b/ui/tx/NftTokenTransferSnippet.tsx
deleted file mode 100644
index c9b053c158..0000000000
--- a/ui/tx/NftTokenTransferSnippet.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Flex, chakra } from '@chakra-ui/react';
-import React from 'react';
-
-import type { TokenInfo } from 'types/api/token';
-
-import NftEntity from 'ui/shared/entities/nft/NftEntity';
-import TokenEntity from 'ui/shared/entities/token/TokenEntity';
-
-interface Props {
-  token: TokenInfo;
-  value: string;
-  tokenId: string;
-}
-
-const NftTokenTransferSnippet = ({ value, token, tokenId }: Props) => {
-  const num = value === '1' ? '' : value;
-
-  return (
-    <Flex alignItems="center" columnGap={ 2 } rowGap={ 2 } flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
-      { num ? (
-        <>
-          <chakra.span color="text_secondary">for</chakra.span>
-          <span>{ num }</span>
-          <chakra.span color="text_secondary">token ID</chakra.span>
-        </>
-      ) : (
-        <chakra.span color="text_secondary">for token ID</chakra.span>
-      ) }
-      <NftEntity
-        hash={ token.address }
-        id={ tokenId }
-        fontWeight={ 600 }
-        iconSize="md"
-        maxW={{ base: '100%', lg: '150px' }}
-        w="auto"
-        flexShrink={ 0 }
-      />
-      <chakra.span color="text_secondary">of</chakra.span>
-      <TokenEntity
-        token={ token }
-        noCopy
-        w="auto"
-        flexGrow={ 1 }
-      />
-    </Flex>
-  );
-};
-
-export default React.memo(NftTokenTransferSnippet);
diff --git a/ui/tx/TxAllowedPeekers.tsx b/ui/tx/TxAllowedPeekers.tsx
index 0a3487dcb6..e83a3fe000 100644
--- a/ui/tx/TxAllowedPeekers.tsx
+++ b/ui/tx/TxAllowedPeekers.tsx
@@ -1,7 +1,7 @@
 import { Flex, Link, useBoolean } from '@chakra-ui/react';
 import React from 'react';
 
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 
 interface Props {
@@ -14,27 +14,31 @@ const TxAllowedPeekers = ({ items }: Props) => {
   const [ isExpanded, expand ] = useBoolean(false);
 
   return (
-    <DetailsInfoItem
-      title="Allowed peekers"
-      hint="Smart contracts allowed to interact with confidential data"
-    >
-      <Flex flexDir="column" rowGap={ 3 } w="100%">
-        { items
-          .slice(0, isExpanded ? undefined : CUT_LENGTH)
-          .map((item) => <AddressEntity key={ item } address={{ hash: item, is_contract: true }}/>) }
-      </Flex>
-      { items.length > CUT_LENGTH && (
-        <Link
-          display="inline-block"
-          fontSize="sm"
-          textDecorationLine="underline"
-          textDecorationStyle="dashed"
-          onClick={ expand.toggle }
-        >
-          { isExpanded ? 'Hide' : 'Show all' }
-        </Link>
-      ) }
-    </DetailsInfoItem>
+    <>
+      <DetailsInfoItem.Label
+        hint="Smart contracts allowed to interact with confidential data"
+      >
+        Allowed peekers
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Flex flexDir="column" rowGap={ 3 } w="100%">
+          { items
+            .slice(0, isExpanded ? undefined : CUT_LENGTH)
+            .map((item) => <AddressEntity key={ item } address={{ hash: item, is_contract: true }}/>) }
+        </Flex>
+        { items.length > CUT_LENGTH && (
+          <Link
+            display="inline-block"
+            fontSize="sm"
+            textDecorationLine="underline"
+            textDecorationStyle="dashed"
+            onClick={ expand.toggle }
+          >
+            { isExpanded ? 'Hide' : 'Show all' }
+          </Link>
+        ) }
+      </DetailsInfoItem.Value>
+    </>
   );
 };
 
diff --git a/ui/tx/TxAssetFlows.tsx b/ui/tx/TxAssetFlows.tsx
new file mode 100644
index 0000000000..95f39d9ec5
--- /dev/null
+++ b/ui/tx/TxAssetFlows.tsx
@@ -0,0 +1,119 @@
+import { Table, Tbody, Tr, Th, Box, Skeleton, Text, Show, Hide } from '@chakra-ui/react';
+import _chunk from 'lodash/chunk';
+import React, { useMemo, useState } from 'react';
+
+import type { PaginationParams } from 'ui/shared/pagination/types';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { NOVES_TRANSLATE } from 'stubs/noves/NovesTranslate';
+import ActionBar from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import Pagination from 'ui/shared/pagination/Pagination';
+import TheadSticky from 'ui/shared/TheadSticky';
+
+import TxAssetFlowsListItem from './assetFlows/TxAssetFlowsListItem';
+import TxAssetFlowsTableItem from './assetFlows/TxAssetFlowsTableItem';
+import { generateFlowViewData } from './assetFlows/utils/generateFlowViewData';
+
+interface FlowViewProps {
+  hash: string;
+}
+
+export default function TxAssetFlows(props: FlowViewProps) {
+
+  const { data: queryData, isPlaceholderData, isError } = useApiQuery('noves_transaction', {
+    pathParams: { hash: props.hash },
+    queryOptions: {
+      enabled: Boolean(props.hash),
+      placeholderData: NOVES_TRANSLATE,
+    },
+  });
+
+  const [ page, setPage ] = useState<number>(1);
+
+  const ViewData = useMemo(() => (queryData ? generateFlowViewData(queryData) : []), [ queryData ]);
+  const chunkedViewData = _chunk(ViewData, 50);
+
+  const paginationProps: PaginationParams = useMemo(() => ({
+    onNextPageClick: () => setPage(page + 1),
+    onPrevPageClick: () => setPage(page - 1),
+    resetPage: () => setPage(1),
+    canGoBackwards: page > 1,
+    isLoading: isPlaceholderData,
+    page: page,
+    hasNextPage: Boolean(chunkedViewData[page]),
+    hasPages: Boolean(chunkedViewData[1]),
+    isVisible: Boolean(chunkedViewData[1]),
+  }), [ chunkedViewData, page, isPlaceholderData ]);
+
+  const data = chunkedViewData [page - 1];
+
+  const actionBar = (
+    <ActionBar mt={ -6 } pb={{ base: 6, md: 5 }} flexDir={{ base: 'column', md: 'initial' }} gap={{ base: '2', md: 'initial' }} >
+      <Box display="flex" alignItems="center" gap={ 1 }>
+        <Skeleton borderRadius="sm" isLoaded={ !isPlaceholderData } >
+          <Text fontWeight="400" mr={ 1 }>
+            Wallet
+          </Text>
+        </Skeleton>
+
+        <AddressEntity
+          address={{ hash: queryData?.accountAddress || '' }}
+          fontWeight="400"
+          truncation="dynamic"
+          isLoading={ isPlaceholderData }
+        />
+      </Box>
+      <Pagination ml={{ base: 'auto', lg: 8 }} { ...paginationProps }/>
+    </ActionBar>
+  );
+
+  const content = (
+    <>
+      <Hide above="lg" >
+        { data?.map((item, i) => (
+          <TxAssetFlowsListItem
+            key={ `${ i }-${ item.accountAddress }` }
+            item={ item }
+            isPlaceholderData={ isPlaceholderData }
+          />
+        )) }
+      </Hide>
+
+      <Show above="lg">
+        <Table>
+          <TheadSticky top={ 75 }>
+            <Tr>
+              <Th>
+                Actions
+              </Th>
+              <Th width="450px">
+                From/To
+              </Th>
+            </Tr>
+          </TheadSticky>
+          <Tbody>
+            { data?.map((item, i) => (
+              <TxAssetFlowsTableItem
+                key={ `${ i }-${ item.accountAddress }` }
+                item={ item }
+                isPlaceholderData={ isPlaceholderData }
+              />
+            )) }
+          </Tbody>
+        </Table>
+      </Show>
+    </>
+  );
+
+  return (
+    <DataListDisplay
+      isError={ isError }
+      items={ data }
+      emptyText="There are no transfers."
+      content={ content }
+      actionBar={ actionBar }
+    />
+  );
+}
diff --git a/ui/tx/TxBlobs.pw.tsx b/ui/tx/TxBlobs.pw.tsx
new file mode 100644
index 0000000000..5ec48a6825
--- /dev/null
+++ b/ui/tx/TxBlobs.pw.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import * as blobsMock from 'mocks/blobs/blobs';
+import * as txMock from 'mocks/txs/tx';
+import { test, expect } from 'playwright/lib';
+
+import TxBlobs from './TxBlobs';
+import type { TxQuery } from './useTxQuery';
+
+const hooksConfig = {
+  router: {
+    query: { hash: txMock.base.hash },
+  },
+};
+
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('tx_blobs', blobsMock.txBlobs, { pathParams: { hash: txMock.base.hash } });
+  const txQuery = {
+    data: txMock.base,
+    isPlaceholderData: false,
+    isError: false,
+  } as TxQuery;
+  const component = await render(<TxBlobs txQuery={ txQuery }/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/tx/TxBlobs.tsx b/ui/tx/TxBlobs.tsx
new file mode 100644
index 0000000000..994d5f4853
--- /dev/null
+++ b/ui/tx/TxBlobs.tsx
@@ -0,0 +1,63 @@
+import { Hide, Show } from '@chakra-ui/react';
+import React from 'react';
+
+import { TX_BLOB } from 'stubs/blobs';
+import { generateListStub } from 'stubs/utils';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+
+import TxBlobsList from './blobs/TxBlobsList';
+import TxBlobsTable from './blobs/TxBlobsTable';
+import TxPendingAlert from './TxPendingAlert';
+import TxSocketAlert from './TxSocketAlert';
+import type { TxQuery } from './useTxQuery';
+
+interface Props {
+  txQuery: TxQuery;
+}
+
+const TxBlobs = ({ txQuery }: Props) => {
+  const { data, isPlaceholderData, isError, pagination } = useQueryWithPages({
+    resourceName: 'tx_blobs',
+    pathParams: { hash: txQuery.data?.hash },
+    options: {
+      enabled: !txQuery.isPlaceholderData && Boolean(txQuery.data?.hash) && Boolean(txQuery.data?.status),
+      placeholderData: generateListStub<'tx_blobs'>(TX_BLOB, 3, { next_page_params: null }),
+    },
+  });
+
+  if (!txQuery.isPending && !txQuery.isPlaceholderData && !txQuery.isError && !txQuery.data.status) {
+    return txQuery.socketStatus ? <TxSocketAlert status={ txQuery.socketStatus }/> : <TxPendingAlert/>;
+  }
+
+  const content = data ? (
+    <>
+      <Hide below="lg" ssr={ false }>
+        <TxBlobsTable data={ data.items } isLoading={ isPlaceholderData } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }/>
+      </Hide>
+      <Show below="lg" ssr={ false }>
+        <TxBlobsList data={ data.items } isLoading={ isPlaceholderData }/>
+      </Show>
+    </>
+  ) : null;
+
+  const actionBar = pagination.isVisible ? (
+    <ActionBar mt={ -6 } showShadow>
+      <Pagination ml="auto" { ...pagination }/>
+    </ActionBar>
+  ) : null;
+
+  return (
+    <DataListDisplay
+      isError={ isError || txQuery.isError }
+      items={ data?.items }
+      emptyText="There are no blobs for this transaction."
+      content={ content }
+      actionBar={ actionBar }
+    />
+  );
+};
+
+export default TxBlobs;
diff --git a/ui/tx/TxDetails.tsx b/ui/tx/TxDetails.tsx
index 61ee2196ea..f72012a234 100644
--- a/ui/tx/TxDetails.tsx
+++ b/ui/tx/TxDetails.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import TestnetWarning from 'ui/shared/alerts/TestnetWarning';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
 
 import TxInfo from './details/TxInfo';
 import type { TxQuery } from './useTxQuery';
@@ -10,6 +11,10 @@ interface Props {
 }
 
 const TxDetails = ({ txQuery }: Props) => {
+  if (txQuery.isError) {
+    return <DataFetchAlert/>;
+  }
+
   return (
     <>
       <TestnetWarning mb={ 6 } isLoading={ txQuery.isPlaceholderData }/>
diff --git a/ui/tx/TxDetailsDegraded.tsx b/ui/tx/TxDetailsDegraded.tsx
index a486de3400..316f90dade 100644
--- a/ui/tx/TxDetailsDegraded.tsx
+++ b/ui/tx/TxDetailsDegraded.tsx
@@ -7,11 +7,14 @@ import type { Transaction } from 'types/api/transaction';
 
 import { SECOND } from 'lib/consts';
 import dayjs from 'lib/date/dayjs';
+import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
 import hexToDecimal from 'lib/hexToDecimal';
 import { publicClient } from 'lib/web3/client';
 import { GET_BLOCK, GET_TRANSACTION, GET_TRANSACTION_RECEIPT, GET_TRANSACTION_CONFIRMATIONS } from 'stubs/RPC';
+import { unknownAddress } from 'ui/shared/address/utils';
 import ServiceDegradationWarning from 'ui/shared/alerts/ServiceDegradationWarning';
 import TestnetWarning from 'ui/shared/alerts/TestnetWarning';
+import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 
 import TxInfo from './details/TxInfo';
@@ -36,6 +39,10 @@ const TxDetailsDegraded = ({ hash, txQuery }: Props) => {
   const query = useQuery<RpcResponseType, unknown, Transaction | null>({
     queryKey: [ 'RPC', 'tx', { hash } ],
     queryFn: async() => {
+      if (!publicClient) {
+        throw new Error('No public RPC client');
+      }
+
       const tx = await publicClient.getTransaction({ hash: hash as `0x${ string }` });
 
       if (!tx) {
@@ -66,16 +73,6 @@ const TxDetailsDegraded = ({ hash, txQuery }: Props) => {
       })();
 
       const gasPrice = txReceipt?.effectiveGasPrice ?? tx.gasPrice;
-      const unknownAddress = {
-        is_contract: false,
-        is_verified: false,
-        implementation_name: '',
-        name: '',
-        private_tags: [],
-        public_tags: [],
-        watchlist_names: [],
-        ens_domain_name: null,
-      };
 
       return {
         from: { ...unknownAddress, hash: tx.from as string },
@@ -84,9 +81,9 @@ const TxDetailsDegraded = ({ hash, txQuery }: Props) => {
         timestamp: block?.timestamp ? dayjs.unix(Number(block.timestamp)).format() : null,
         confirmation_duration: null,
         status,
-        block: tx.blockNumber ? Number(tx.blockNumber) : null,
+        block_number: tx.blockNumber ? Number(tx.blockNumber) : null,
         value: tx.value.toString(),
-        gas_price: txReceipt?.effectiveGasPrice.toString() ?? tx.gasPrice?.toString() ?? null,
+        gas_price: gasPrice?.toString() ?? null,
         base_fee_per_gas: block?.baseFeePerGas?.toString() ?? null,
         max_fee_per_gas: tx.maxFeePerGas?.toString() ?? null,
         max_priority_fee_per_gas: tx.maxPriorityFeePerGas?.toString() ?? null,
@@ -109,13 +106,13 @@ const TxDetailsDegraded = ({ hash, txQuery }: Props) => {
         tx_burnt_fee: null,
         revert_reason: null,
         decoded_input: null,
-        has_error_in_internal_txs: null,
+        has_error_in_internal_transactions: null,
         token_transfers: null,
         token_transfers_overflow: false,
         exchange_rate: null,
         method: null,
-        tx_types: [],
-        tx_tag: null,
+        transaction_types: [],
+        transaction_tag: null,
         actions: [],
       };
     },
@@ -146,8 +143,8 @@ const TxDetailsDegraded = ({ hash, txQuery }: Props) => {
   }, [ txQuery.setRefetchOnError ]);
 
   if (!query.data) {
-    if (originalError?.status === 404) {
-      throw Error('Not found', { cause: { status: 404 } as unknown as Error });
+    if (originalError && isCustomAppError(originalError)) {
+      throwOnResourceLoadError({ resource: 'tx', error: originalError, isError: true });
     }
 
     return <DataFetchAlert/>;
diff --git a/ui/tx/TxDetailsWrapped.tsx b/ui/tx/TxDetailsWrapped.tsx
index d01a740739..29bf0bf9c9 100644
--- a/ui/tx/TxDetailsWrapped.tsx
+++ b/ui/tx/TxDetailsWrapped.tsx
@@ -8,12 +8,13 @@ import type { ExcludeUndefined } from 'types/utils';
 import { currencyUnits } from 'lib/units';
 import Tag from 'ui/shared/chakra/Tag';
 import CurrencyValue from 'ui/shared/CurrencyValue';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
 import RawInputData from 'ui/shared/RawInputData';
+import TxFee from 'ui/shared/tx/TxFee';
 import TxDetailsGasPrice from 'ui/tx/details/TxDetailsGasPrice';
 import TxDetailsOther from 'ui/tx/details/TxDetailsOther';
 
@@ -24,85 +25,110 @@ interface Props {
 const TxDetailsWrapped = ({ data }: Props) => {
   return (
     <Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }}>
-      <DetailsInfoItem
-        title="Transaction hash"
+      <DetailsInfoItem.Label
         hint="Unique character string (TxID) assigned to every verified transaction"
-        flexWrap="nowrap"
       >
+        Transaction hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value flexWrap="nowrap">
         <TxEntity hash={ data.hash } noIcon noLink noCopy={ false }/>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Method"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Transaction method name"
       >
+        Method
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Tag colorScheme="gray">
           { data.method }
         </Tag>
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
 
       <DetailsInfoItemDivider/>
 
-      <DetailsInfoItem
-        title={ data.to?.is_contract ? 'Interacted with contract' : 'To' }
-        hint="Address (external or contract) receiving the transaction"
-        flexWrap={{ base: 'wrap', lg: 'nowrap' }}
-        columnGap={ 3 }
-      >
-        <Flex flexWrap="nowrap" alignItems="center" maxW="100%">
-          <AddressEntity address={ data.to }/>
-        </Flex>
-      </DetailsInfoItem>
+      { data.to && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Address (external or contract) receiving the transaction"
+          >
+            { data.to.is_contract ? 'Interacted with contract' : 'To' }
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Flex flexWrap="nowrap" alignItems="center" maxW="100%">
+              <AddressEntity address={ data.to }/>
+            </Flex>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
 
       <DetailsInfoItemDivider/>
 
-      <DetailsInfoItem
-        title="Value"
+      <DetailsInfoItem.Label
         hint="Value sent in the native token (and USD) if applicable"
       >
+        Value
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <CurrencyValue
           value={ data.value }
           currency={ currencyUnits.ether }
           flexWrap="wrap"
         />
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
+
       { data.fee.value !== null && (
-        <DetailsInfoItem
-          title="Transaction fee"
-          hint="Total transaction fee"
-        >
-          <CurrencyValue
-            value={ data.fee.value }
-            currency={ currencyUnits.ether }
-            flexWrap="wrap"
-          />
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Total transaction fee"
+          >
+            Transaction fee
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <TxFee tx={ data } withUsd/>
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       <TxDetailsGasPrice gasPrice={ data.gas_price }/>
+
       { data.gas_limit && (
-        <DetailsInfoItem
-          title="Gas limit"
-          hint="Maximum amount of gas that can be used by the transaction"
-        >
-          { BigNumber(data.gas_limit).toFormat() }
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Maximum amount of gas that can be used by the transaction"
+          >
+            Gas limit
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            { BigNumber(data.gas_limit).toFormat() }
+          </DetailsInfoItem.Value>
+        </>
       ) }
 
       <DetailsInfoItemDivider/>
 
       <TxDetailsOther type={ data.type } nonce={ data.nonce } position={ null }/>
-      <DetailsInfoItem
-        title="Raw input"
+
+      <DetailsInfoItem.Label
         hint="Binary data included with the transaction. See logs tab for additional info"
       >
+        Raw input
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <RawInputData hex={ data.raw_input }/>
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
+
       { data.decoded_input && (
-        <DetailsInfoItem
-          title="Decoded input data"
-          hint="Decoded input data"
-        >
-          <LogDecodedInputData data={ data.decoded_input }/>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Decoded input data"
+          >
+            Decoded input data
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <LogDecodedInputData data={ data.decoded_input }/>
+          </DetailsInfoItem.Value>
+        </>
       ) }
     </Grid>
   );
diff --git a/ui/tx/TxInternals.pw.tsx b/ui/tx/TxInternals.pw.tsx
index 3e0c2e30be..fbbb15b7d0 100644
--- a/ui/tx/TxInternals.pw.tsx
+++ b/ui/tx/TxInternals.pw.tsx
@@ -1,40 +1,26 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as internalTxsMock from 'mocks/txs/internalTxs';
 import * as txMock from 'mocks/txs/tx';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import TxInternals from './TxInternals';
 import type { TxQuery } from './useTxQuery';
 
 const TX_HASH = txMock.base.hash;
-const API_URL_TX_INTERNALS = buildApiUrl('tx_internal_txs', { hash: TX_HASH });
 const hooksConfig = {
   router: {
     query: { hash: TX_HASH },
   },
 };
 
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(API_URL_TX_INTERNALS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(internalTxsMock.baseResponse),
-  }));
-
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('tx_internal_txs', internalTxsMock.baseResponse, { pathParams: { hash: TX_HASH } });
   const txQuery = {
     data: txMock.base,
     isPlaceholderData: false,
     isError: false,
   } as TxQuery;
-
-  const component = await mount(
-    <TestApp>
-      <TxInternals txQuery={ txQuery }/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+  const component = await render(<TxInternals txQuery={ txQuery }/>, { hooksConfig });
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/tx/TxInternals.tsx b/ui/tx/TxInternals.tsx
index 80c29d54dd..271c984096 100644
--- a/ui/tx/TxInternals.tsx
+++ b/ui/tx/TxInternals.tsx
@@ -1,64 +1,57 @@
-import { Show, Hide } from "@chakra-ui/react";
-import React from "react";
+import { Show, Hide } from '@chakra-ui/react';
+import React from 'react';
 
-import type { InternalTransaction } from "types/api/internalTransaction";
+import type { InternalTransaction } from 'types/api/internalTransaction';
 
+import compareBns from 'lib/bigint/compareBns';
 // import { apos } from 'lib/html-entities';
-import { INTERNAL_TX } from "stubs/internalTx";
-import { generateListStub } from "stubs/utils";
-import ActionBar from "ui/shared/ActionBar";
-import DataListDisplay from "ui/shared/DataListDisplay";
+import { INTERNAL_TX } from 'stubs/internalTx';
+import { generateListStub } from 'stubs/utils';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
 // import FilterInput from 'ui/shared/filters/FilterInput';
 // import TxInternalsFilter from 'ui/tx/internals/TxInternalsFilter';
-import Pagination from "ui/shared/pagination/Pagination";
-import useQueryWithPages from "ui/shared/pagination/useQueryWithPages";
-import { default as getNextSortValueShared } from "ui/shared/sort/getNextSortValue";
-import TxInternalsList from "ui/tx/internals/TxInternalsList";
-import TxInternalsTable from "ui/tx/internals/TxInternalsTable";
-import type { Sort, SortField } from "ui/tx/internals/utils";
-import TxPendingAlert from "ui/tx/TxPendingAlert";
-import TxSocketAlert from "ui/tx/TxSocketAlert";
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import { default as getNextSortValueShared } from 'ui/shared/sort/getNextSortValue';
+import TxInternalsList from 'ui/tx/internals/TxInternalsList';
+import TxInternalsTable from 'ui/tx/internals/TxInternalsTable';
+import type { Sort, SortField } from 'ui/tx/internals/utils';
+import TxPendingAlert from 'ui/tx/TxPendingAlert';
+import TxSocketAlert from 'ui/tx/TxSocketAlert';
 
-import type { TxQuery } from "./useTxQuery";
+import type { TxQuery } from './useTxQuery';
 
 const SORT_SEQUENCE: Record<SortField, Array<Sort | undefined>> = {
-  value: [ "value-desc", "value-asc", undefined ],
-  "gas-limit": [ "gas-limit-desc", "gas-limit-asc", undefined ],
+  value: [ 'value-desc', 'value-asc', undefined ],
+  'gas-limit': [ 'gas-limit-desc', 'gas-limit-asc', undefined ],
 };
 
-const getNextSortValue = (getNextSortValueShared<SortField, Sort>).bind(
-  undefined,
-  SORT_SEQUENCE,
-);
-
-const sortFn =
-  (sort: Sort | undefined) =>
-    (a: InternalTransaction, b: InternalTransaction) => {
-      switch (sort) {
-        case "value-desc": {
-          const result = a.value > b.value ? -1 : 1;
-          return a.value === b.value ? 0 : result;
-        }
-
-        case "value-asc": {
-          const result = a.value > b.value ? 1 : -1;
-          return a.value === b.value ? 0 : result;
-        }
-
-        case "gas-limit-desc": {
-          const result = a.gas_limit > b.gas_limit ? -1 : 1;
-          return a.gas_limit === b.gas_limit ? 0 : result;
-        }
-
-        case "gas-limit-asc": {
-          const result = a.gas_limit > b.gas_limit ? 1 : -1;
-          return a.gas_limit === b.gas_limit ? 0 : result;
-        }
-
-        default:
-          return 0;
-      }
-    };
+const getNextSortValue = (getNextSortValueShared<SortField, Sort>).bind(undefined, SORT_SEQUENCE);
+
+const sortFn = (sort: Sort | undefined) => (a: InternalTransaction, b: InternalTransaction) => {
+  switch (sort) {
+    case 'value-desc': {
+      return compareBns(b.value, a.value);
+    }
+
+    case 'value-asc': {
+      return compareBns(a.value, b.value);
+    }
+
+    case 'gas-limit-desc': {
+      return compareBns(b.gas_limit, a.gas_limit);
+    }
+
+    case 'gas-limit-asc': {
+      return compareBns(a.gas_limit, b.gas_limit);
+
+    }
+
+    default:
+      return 0;
+  }
+};
 
 // const searchFn = (searchTerm: string) => (item: InternalTransaction): boolean => {
 //   const formattedSearchTerm = searchTerm.toLowerCase();
@@ -77,16 +70,11 @@ const TxInternals = ({ txQuery }: Props) => {
   // const [ searchTerm, setSearchTerm ] = React.useState<string>('');
   const [ sort, setSort ] = React.useState<Sort>();
   const { data, isPlaceholderData, isError, pagination } = useQueryWithPages({
-    resourceName: "tx_internal_txs",
+    resourceName: 'tx_internal_txs',
     pathParams: { hash: txQuery.data?.hash },
     options: {
-      enabled:
-        !txQuery.isPlaceholderData &&
-        Boolean(txQuery.data?.hash) &&
-        Boolean(txQuery.data?.status),
-      placeholderData: generateListStub<"tx_internal_txs">(INTERNAL_TX, 3, {
-        next_page_params: null,
-      }),
+      enabled: !txQuery.isPlaceholderData && Boolean(txQuery.data?.hash) && Boolean(txQuery.data?.status),
+      placeholderData: generateListStub<'tx_internal_txs'>(INTERNAL_TX, 3, { next_page_params: null }),
     },
   });
 
@@ -94,41 +82,34 @@ const TxInternals = ({ txQuery }: Props) => {
   //   setFilters(nextValue);
   // }, []);
 
-  const handleSortToggle = React.useCallback(
-    (field: SortField) => {
-      return () => {
-        if (isPlaceholderData) {
-          return;
-        }
-        setSort(getNextSortValue(field));
-      };
-    },
-    [ isPlaceholderData ],
-  );
+  const handleSortToggle = React.useCallback((field: SortField) => {
+    return () => {
+      if (isPlaceholderData) {
+        return;
+      }
+      setSort(getNextSortValue(field));
+    };
+  }, [ isPlaceholderData ]);
 
   if (!txQuery.isPlaceholderData && !txQuery.isError && !txQuery.data?.status) {
-    return txQuery.socketStatus ? (
-      <TxSocketAlert status={ txQuery.socketStatus }/>
-    ) : (
-      <TxPendingAlert/>
-    );
+    return txQuery.socketStatus ? <TxSocketAlert status={ txQuery.socketStatus }/> : <TxPendingAlert/>;
   }
 
-  const filteredData = data?.items.slice().sort(sortFn(sort));
+  const filteredData = data?.items
+    .slice()
   // .filter(({ type }) => filters.length > 0 ? filters.includes(type) : true)
   // .filter(searchFn(searchTerm))
+    .sort(sortFn(sort));
 
   const content = filteredData ? (
     <>
-      <Show below="lg" ssr={ false }>
-        <TxInternalsList data={ filteredData } isLoading={ isPlaceholderData }/>
-      </Show>
+      <Show below="lg" ssr={ false }><TxInternalsList data={ filteredData } isLoading={ isPlaceholderData }/></Show>
       <Hide below="lg" ssr={ false }>
         <TxInternalsTable
           data={ filteredData }
           sort={ sort }
           onSortToggle={ handleSortToggle }
-          top={ pagination.isVisible ? 80 : 0 }
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
           isLoading={ isPlaceholderData }
         />
       </Hide>
diff --git a/ui/tx/TxLogs.tsx b/ui/tx/TxLogs.tsx
index c554069b3c..1fa4c4957c 100644
--- a/ui/tx/TxLogs.tsx
+++ b/ui/tx/TxLogs.tsx
@@ -59,7 +59,15 @@ const TxLogs = ({ txQuery, logsFilter }: Props) => {
           <Pagination ml="auto" { ...pagination }/>
         </ActionBar>
       ) }
-      { items.map((item, index) => <LogItem key={ index } { ...item } type="transaction" isLoading={ isPlaceholderData }/>) }
+      { items.map((item, index) => (
+        <LogItem
+          key={ index }
+          { ...item }
+          type="transaction"
+          isLoading={ isPlaceholderData }
+          defaultDataType={ txQuery.data?.zilliqa?.is_scilla ? 'UTF-8' : undefined }
+        />
+      )) }
     </Box>
   );
 };
diff --git a/ui/tx/TxPendingAlert.tsx b/ui/tx/TxPendingAlert.tsx
index 657d1f85b4..42fb7b2661 100644
--- a/ui/tx/TxPendingAlert.tsx
+++ b/ui/tx/TxPendingAlert.tsx
@@ -5,7 +5,7 @@ const TxPendingAlert = () => {
   return (
     <Alert>
       <Spinner size="sm" mr={ 2 }/>
-        This transaction is pending confirmation.
+      This transaction is pending confirmation.
     </Alert>
   );
 };
diff --git a/ui/tx/TxState.pw.tsx b/ui/tx/TxState.pw.tsx
index 9c65e1cd5d..a07fe8025a 100644
--- a/ui/tx/TxState.pw.tsx
+++ b/ui/tx/TxState.pw.tsx
@@ -1,39 +1,25 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as txStateMock from 'mocks/txs/state';
 import * as txMock from 'mocks/txs/tx';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import TxState from './TxState';
 import type { TxQuery } from './useTxQuery';
 
-const TX_STATE_API_URL = buildApiUrl('tx_state_changes', { hash: txMock.base.hash });
 const hooksConfig = {
   router: {
     query: { hash: txMock.base.hash },
   },
 };
 
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(TX_STATE_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(txStateMock.baseResponse),
-  }));
-
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('tx_state_changes', txStateMock.baseResponse, { pathParams: { hash: txMock.base.hash } });
   const txQuery = {
     data: txMock.base,
     isPlaceholderData: false,
     isError: false,
   } as TxQuery;
-
-  const component = await mount(
-    <TestApp>
-      <TxState txQuery={ txQuery }/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+  const component = await render(<TxState txQuery={ txQuery }/>, { hooksConfig });
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/tx/TxState.tsx b/ui/tx/TxState.tsx
index c20b4e7a7d..2205f24646 100644
--- a/ui/tx/TxState.tsx
+++ b/ui/tx/TxState.tsx
@@ -2,7 +2,7 @@ import { Accordion, Hide, Show, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import { TX_STATE_CHANGES } from 'stubs/txStateChanges';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -40,7 +40,7 @@ const TxState = ({ txQuery }: Props) => {
   const content = data ? (
     <Accordion allowMultiple defaultIndex={ [] }>
       <Hide below="lg" ssr={ false }>
-        <TxStateTable data={ data.items } isLoading={ isPlaceholderData } top={ pagination.isVisible ? 80 : 0 }/>
+        <TxStateTable data={ data.items } isLoading={ isPlaceholderData } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }/>
       </Hide>
       <Show below="lg" ssr={ false }>
         <TxStateList data={ data.items } isLoading={ isPlaceholderData }/>
diff --git a/ui/tx/TxSubHeading.pw.tsx b/ui/tx/TxSubHeading.pw.tsx
index 39b4397b4e..3c7de68c25 100644
--- a/ui/tx/TxSubHeading.pw.tsx
+++ b/ui/tx/TxSubHeading.pw.tsx
@@ -1,59 +1,146 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import type { AddressMetadataInfo, AddressMetadataTagApi } from 'types/api/addressMetadata';
+
+import config from 'configs/app';
+import * as addressMock from 'mocks/address/address';
+import { protocolTagWithMeta } from 'mocks/metadata/address';
+import * as txMock from 'mocks/txs/tx';
 import { txInterpretation } from 'mocks/txs/txInterpretation';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import TxSubHeading from './TxSubHeading';
+import type { TxQuery } from './useTxQuery';
 
 const hash = '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193';
 
-const TX_INTERPRETATION_API_URL = buildApiUrl('tx_interpretation', { hash });
+const txQuery = {
+  data: txMock.base,
+  isPlaceholderData: false,
+  isError: false,
+} as TxQuery;
+
+const addressMetadataQueryParams = {
+  addresses: [ txMock.base.to?.hash as string ],
+  chainId: config.chain.id,
+  tagsLimit: '20',
+};
 
-test('no interpretation +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TxSubHeading hash={ hash } hasTag={ false }/>
-    </TestApp>,
-  );
+function generateAddressMetadataResponse(tag: AddressMetadataTagApi) {
+  return {
+    addresses: {
+      [ txMock.base.to?.hash?.toLowerCase() as string ]: {
+        tags: [ {
+          ...tag,
+          meta: JSON.stringify(tag.meta),
+        } ],
+      },
+    },
+  } as AddressMetadataInfo;
+}
 
+test('no interpretation +@mobile', async({ render }) => {
+  const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
   await expect(component).toHaveScreenshot();
 });
 
-const bsInterpretationTest = test.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.txInterpretation) as any,
-});
+test.describe('blockscout provider', () => {
+  test.beforeEach(async({ mockEnvs }) => {
+    await mockEnvs(ENVS_MAP.txInterpretation);
+  });
 
-bsInterpretationTest('with interpretation +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(TX_INTERPRETATION_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(txInterpretation),
-  }));
+  test('with interpretation +@mobile +@dark-mode', async({ render, mockApiResponse }) => {
+    await mockApiResponse('tx_interpretation', txInterpretation, { pathParams: { hash } });
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
 
-  const component = await mount(
-    <TestApp>
-      <TxSubHeading hash={ hash } hasTag={ false }/>
-    </TestApp>,
-  );
+  test('with interpretation and action button +@mobile +@dark-mode', async({ render, mockApiResponse, mockAssetResponse }) => {
+    const metadataResponse = generateAddressMetadataResponse(protocolTagWithMeta);
+    await mockApiResponse('address_metadata_info', metadataResponse, { queryParams: addressMetadataQueryParams });
+    await mockAssetResponse(protocolTagWithMeta?.meta?.appLogoURL as string, './playwright/mocks/image_s.jpg');
+    await mockApiResponse('tx_interpretation', txInterpretation, { pathParams: { hash } });
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
 
-  await expect(component).toHaveScreenshot();
-});
+  test('with interpretation and recipient name +@mobile', async({ render, mockApiResponse }) => {
+    const newTxQuery = { ...txQuery, data: txMock.withRecipientName } as TxQuery;
+    await mockApiResponse('tx_interpretation', txInterpretation, { pathParams: { hash } });
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ newTxQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
 
-bsInterpretationTest('no interpretation', async({ mount, page }) => {
-  await page.route(TX_INTERPRETATION_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ data: { summaries: [] } }),
-  }));
+  test('with interpretation and recipient ENS domain +@mobile', async({ render, mockApiResponse }) => {
+    const newTxQuery = { ...txQuery, data: txMock.withRecipientEns } as TxQuery;
+    await mockApiResponse('tx_interpretation', txInterpretation, { pathParams: { hash } });
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ newTxQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
 
-  const component = await mount(
-    <TestApp>
-      <TxSubHeading hash={ hash } hasTag={ false }/>
-    </TestApp>,
-  );
+  test('with interpretation and recipient name tag +@mobile', async({ render, mockApiResponse }) => {
+    const newTxQuery = { ...txQuery, data: txMock.withRecipientNameTag } as TxQuery;
+    await mockApiResponse('tx_interpretation', txInterpretation, { pathParams: { hash } });
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ newTxQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
 
-  await expect(component).toHaveScreenshot();
+  test('with interpretation and view all link +@mobile', async({ render, mockApiResponse }) => {
+    await mockApiResponse(
+      'tx_interpretation',
+      { data: { summaries: [ ...txInterpretation.data.summaries, ...txInterpretation.data.summaries ] } },
+      { pathParams: { hash } },
+    );
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('with interpretation and view all link, and action button (external link) +@mobile', async({
+    render, mockApiResponse, mockAssetResponse,
+  }) => {
+    delete protocolTagWithMeta?.meta?.appID;
+    const metadataResponse = generateAddressMetadataResponse(protocolTagWithMeta);
+    await mockApiResponse('address_metadata_info', metadataResponse, { queryParams: addressMetadataQueryParams });
+    await mockAssetResponse(protocolTagWithMeta?.meta?.appLogoURL as string, './playwright/mocks/image_s.jpg');
+    await mockApiResponse(
+      'tx_interpretation',
+      { data: { summaries: [ ...txInterpretation.data.summaries, ...txInterpretation.data.summaries ] } },
+      { pathParams: { hash } },
+    );
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('no interpretation, has method called', async({ render, mockApiResponse, mockAssetResponse }) => {
+    const newTxQuery = { ...txQuery, data: txMock.withRecipientContract } as TxQuery;
+    const metadataResponse = generateAddressMetadataResponse(protocolTagWithMeta);
+    await mockApiResponse('address_metadata_info', metadataResponse, { queryParams: addressMetadataQueryParams });
+    await mockAssetResponse(protocolTagWithMeta?.meta?.appLogoURL as string, './playwright/mocks/image_s.jpg');
+    await mockApiResponse('tx_interpretation', { data: { summaries: [] } }, { pathParams: { hash } });
+
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ newTxQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('no interpretation, with action button', async({ render, mockApiResponse, mockAssetResponse }) => {
+    const metadataResponse = generateAddressMetadataResponse(protocolTagWithMeta);
+    await mockApiResponse('address_metadata_info', metadataResponse, { queryParams: addressMetadataQueryParams });
+    await mockAssetResponse(protocolTagWithMeta?.meta?.appLogoURL as string, './playwright/mocks/image_s.jpg');
+
+    const newTxQuery = { ...txQuery, data: { ...txMock.pending, to: addressMock.contract } } as TxQuery;
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ newTxQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('no interpretation (pending)', async({ render, mockApiResponse }) => {
+    const txPendingQuery = {
+      data: txMock.pending,
+      isPlaceholderData: false,
+      isError: false,
+    } as TxQuery;
+    await mockApiResponse('tx_interpretation', { data: { summaries: [] } }, { pathParams: { hash } });
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txPendingQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
 });
diff --git a/ui/tx/TxSubHeading.tsx b/ui/tx/TxSubHeading.tsx
index 477aeddef6..314e4ba78e 100644
--- a/ui/tx/TxSubHeading.tsx
+++ b/ui/tx/TxSubHeading.tsx
@@ -1,51 +1,145 @@
 import { Box, Flex, Link } from '@chakra-ui/react';
 import React from 'react';
 
+import type { AddressParam } from 'types/api/addressParams';
+
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
+import { NOVES_TRANSLATE } from 'stubs/noves/NovesTranslate';
 import { TX_INTERPRETATION } from 'stubs/txInterpretation';
 import AccountActionsMenu from 'ui/shared/AccountActionsMenu/AccountActionsMenu';
+import AppActionButton from 'ui/shared/AppActionButton/AppActionButton';
+import useAppActionData from 'ui/shared/AppActionButton/useAppActionData';
+import { TX_ACTIONS_BLOCK_ID } from 'ui/shared/DetailsActionsWrapper';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import NetworkExplorers from 'ui/shared/NetworkExplorers';
-import { TX_ACTIONS_BLOCK_ID } from 'ui/tx/details/txDetailsActions/TxDetailsActionsWrapper';
-import TxInterpretation from 'ui/tx/interpretation/TxInterpretation';
+import TxInterpretation from 'ui/shared/tx/interpretation/TxInterpretation';
+
+import { createNovesSummaryObject } from './assetFlows/utils/createNovesSummaryObject';
+import type { TxQuery } from './useTxQuery';
 
 type Props = {
-  hash?: string;
+  hash: string;
   hasTag: boolean;
-}
+  txQuery: TxQuery;
+};
+
+const feature = config.features.txInterpretation;
+
+const TxSubHeading = ({ hash, hasTag, txQuery }: Props) => {
+  const hasInterpretationFeature = feature.isEnabled;
+  const isNovesInterpretation = hasInterpretationFeature && feature.provider === 'noves';
 
-const TxSubHeading = ({ hash, hasTag }: Props) => {
-  const hasInterpretationFeature = config.features.txInterpretation.isEnabled;
+  const appActionData = useAppActionData(txQuery.data?.to?.hash, !txQuery.isPlaceholderData);
 
   const txInterpretationQuery = useApiQuery('tx_interpretation', {
     pathParams: { hash },
     queryOptions: {
-      enabled: Boolean(hash) && hasInterpretationFeature,
+      enabled: Boolean(hash) && (hasInterpretationFeature && !isNovesInterpretation),
       placeholderData: TX_INTERPRETATION,
     },
   });
 
-  const hasInterpretation = hasInterpretationFeature &&
-    (txInterpretationQuery.isPlaceholderData || Boolean(txInterpretationQuery.data?.data.summaries.length));
+  const novesInterpretationQuery = useApiQuery('noves_transaction', {
+    pathParams: { hash },
+    queryOptions: {
+      enabled: Boolean(hash) && isNovesInterpretation,
+      placeholderData: NOVES_TRANSLATE,
+    },
+  });
 
-  return (
-    <Box display={{ base: 'block', lg: 'flex' }} alignItems="center" w="100%">
-      { hasInterpretation && (
+  const hasNovesInterpretation = isNovesInterpretation &&
+    (novesInterpretationQuery.isPlaceholderData || Boolean(novesInterpretationQuery.data?.classificationData.description));
+
+  const hasInternalInterpretation = (hasInterpretationFeature && !isNovesInterpretation) &&
+  (txInterpretationQuery.isPlaceholderData || Boolean(txInterpretationQuery.data?.data.summaries.length));
+
+  const hasViewAllInterpretationsLink =
+    !txInterpretationQuery.isPlaceholderData && txInterpretationQuery.data?.data.summaries && txInterpretationQuery.data?.data.summaries.length > 1;
+
+  const addressDataMap: Record<string, AddressParam> = {};
+  [ txQuery.data?.from, txQuery.data?.to ]
+    .filter((data): data is AddressParam => Boolean(data && data.hash))
+    .forEach(data => {
+      addressDataMap[data.hash] = data;
+    });
+
+  const content = (() => {
+    if (hasNovesInterpretation && novesInterpretationQuery.data) {
+      const novesSummary = createNovesSummaryObject(novesInterpretationQuery.data);
+      return (
+        <TxInterpretation
+          summary={ novesSummary }
+          isLoading={ novesInterpretationQuery.isPlaceholderData || txQuery.isPlaceholderData }
+          addressDataMap={ addressDataMap }
+          fontSize="lg"
+          mr={{ base: 0, lg: 6 }}
+        />
+      );
+    } else if (hasInternalInterpretation) {
+      return (
         <Flex mr={{ base: 0, lg: 6 }} flexWrap="wrap" alignItems="center">
           <TxInterpretation
             summary={ txInterpretationQuery.data?.data.summaries[0] }
-            isLoading={ txInterpretationQuery.isPlaceholderData }
+            isLoading={ txInterpretationQuery.isPlaceholderData || txQuery.isPlaceholderData }
+            addressDataMap={ addressDataMap }
             fontSize="lg"
+            mr={ hasViewAllInterpretationsLink ? 3 : 0 }
           />
-          { !txInterpretationQuery.isPlaceholderData && txInterpretationQuery.data?.data.summaries && txInterpretationQuery.data?.data.summaries.length > 1 &&
-            <Link ml={ 3 } href={ `#${ TX_ACTIONS_BLOCK_ID }` }>all actions</Link> }
+          { hasViewAllInterpretationsLink &&
+          <Link href={ `#${ TX_ACTIONS_BLOCK_ID }` }>View all</Link> }
         </Flex>
-      ) }
-      { !hasInterpretation && <TxEntity hash={ hash } noLink noCopy={ false } fontWeight={ 500 } mr={{ base: 0, lg: 2 }} fontFamily="heading"/> }
-      <Flex alignItems="center" justifyContent={{ base: 'start', lg: 'space-between' }} flexGrow={ 1 }>
-        { !hasTag && <AccountActionsMenu mr={ 3 } mt={{ base: 3, lg: 0 }}/> }
-        <NetworkExplorers type="tx" pathParam={ hash } ml={{ base: 0, lg: 'auto' }} mt={{ base: 3, lg: 0 }}/>
+      );
+    } else if (hasInterpretationFeature && txQuery.data?.method && txQuery.data?.from && txQuery.data?.to) {
+      return (
+        <TxInterpretation
+          summary={{
+            summary_template: `{sender_hash} called {method} on {receiver_hash}`,
+            summary_template_variables: {
+              sender_hash: {
+                type: 'address',
+                value: txQuery.data.from,
+              },
+              method: {
+                type: 'method',
+                value: txQuery.data.method,
+              },
+              receiver_hash: {
+                type: 'address',
+                value: txQuery.data.to,
+              },
+            },
+          }}
+          isLoading={ txQuery.isPlaceholderData }
+          fontSize="lg"
+          mr={{ base: 0, lg: 6 }}
+        />
+      );
+    } else {
+      return <TxEntity hash={ hash } noLink noCopy={ false } fontWeight={ 500 } mr={{ base: 0, lg: 2 }} fontFamily="heading"/>;
+    }
+  })();
+
+  const isLoading =
+    txQuery.isPlaceholderData ||
+    (hasNovesInterpretation && novesInterpretationQuery.isPlaceholderData) ||
+    (hasInternalInterpretation && txInterpretationQuery.isPlaceholderData);
+
+  return (
+    <Box display={{ base: 'block', lg: 'flex' }} alignItems="center" w="100%">
+      { content }
+      <Flex
+        alignItems="center"
+        justifyContent={{ base: 'start', lg: 'space-between' }}
+        flexGrow={ 1 }
+        gap={ 3 }
+        mt={{ base: 3, lg: 0 }}
+      >
+        { !hasTag && <AccountActionsMenu isLoading={ isLoading }/> }
+        { appActionData && (
+          <AppActionButton data={ appActionData } txHash={ hash } source="Txn"/>
+        ) }
+        <NetworkExplorers type="tx" pathParam={ hash } ml={{ base: 0, lg: 'auto' }}/>
       </Flex>
     </Box>
   );
diff --git a/ui/tx/TxTokenTransfer.tsx b/ui/tx/TxTokenTransfer.tsx
index e50ceda1cf..937b8f8d3c 100644
--- a/ui/tx/TxTokenTransfer.tsx
+++ b/ui/tx/TxTokenTransfer.tsx
@@ -9,7 +9,7 @@ import getFilterValuesFromQuery from 'lib/getFilterValuesFromQuery';
 import { apos } from 'lib/html-entities';
 import { TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
 import { getTokenTransfersStub } from 'stubs/token';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
@@ -73,7 +73,7 @@ const TxTokenTransfer = ({ txQuery, tokenTransferFilter }: Props) => {
   const content = tokenTransferQuery.data?.items ? (
     <>
       <Hide below="lg" ssr={ false }>
-        <TokenTransferTable data={ items } top={ isActionBarHidden ? 0 : 80 } isLoading={ tokenTransferQuery.isPlaceholderData }/>
+        <TokenTransferTable data={ items } top={ isActionBarHidden ? 0 : ACTION_BAR_HEIGHT_DESKTOP } isLoading={ tokenTransferQuery.isPlaceholderData }/>
       </Hide>
       <Show below="lg" ssr={ false }>
         <TokenTransferList data={ items } isLoading={ tokenTransferQuery.isPlaceholderData }/>
diff --git a/ui/tx/TxUserOps.tsx b/ui/tx/TxUserOps.tsx
index 8f313650b7..33cc899f7d 100644
--- a/ui/tx/TxUserOps.tsx
+++ b/ui/tx/TxUserOps.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import { USER_OPS_ITEM } from 'stubs/userOps';
 import { generateListStub } from 'stubs/utils';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import TxPendingAlert from 'ui/tx/TxPendingAlert';
 import TxSocketAlert from 'ui/tx/TxSocketAlert';
@@ -28,6 +29,10 @@ const TxUserOps = ({ txQuery }: Props) => {
     return txQuery.socketStatus ? <TxSocketAlert status={ txQuery.socketStatus }/> : <TxPendingAlert/>;
   }
 
+  if (txQuery.isError) {
+    return <DataFetchAlert/>;
+  }
+
   return <UserOpsContent query={ userOpsQuery } showTx={ false }/>;
 };
 
diff --git a/ui/tx/__screenshots__/TxBlobs.pw.tsx_default_base-view-mobile-1.png b/ui/tx/__screenshots__/TxBlobs.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..c02c59411d
Binary files /dev/null and b/ui/tx/__screenshots__/TxBlobs.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxBlobs.pw.tsx_mobile_base-view-mobile-1.png b/ui/tx/__screenshots__/TxBlobs.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..a470fdaf98
Binary files /dev/null and b/ui/tx/__screenshots__/TxBlobs.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxInternals.pw.tsx_default_base-view-mobile-1.png b/ui/tx/__screenshots__/TxInternals.pw.tsx_default_base-view-mobile-1.png
index 6e0f3ec27a..d1309095f6 100644
Binary files a/ui/tx/__screenshots__/TxInternals.pw.tsx_default_base-view-mobile-1.png and b/ui/tx/__screenshots__/TxInternals.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxInternals.pw.tsx_mobile_base-view-mobile-1.png b/ui/tx/__screenshots__/TxInternals.pw.tsx_mobile_base-view-mobile-1.png
index 09af681115..28d6508e9f 100644
Binary files a/ui/tx/__screenshots__/TxInternals.pw.tsx_mobile_base-view-mobile-1.png and b/ui/tx/__screenshots__/TxInternals.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxState.pw.tsx_default_base-view-mobile-1.png b/ui/tx/__screenshots__/TxState.pw.tsx_default_base-view-mobile-1.png
index 722bff88a2..576e3c3026 100644
Binary files a/ui/tx/__screenshots__/TxState.pw.tsx_default_base-view-mobile-1.png and b/ui/tx/__screenshots__/TxState.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxState.pw.tsx_mobile_base-view-mobile-1.png b/ui/tx/__screenshots__/TxState.pw.tsx_mobile_base-view-mobile-1.png
index 08e60b899f..033e4dc2af 100644
Binary files a/ui/tx/__screenshots__/TxState.pw.tsx_mobile_base-view-mobile-1.png and b/ui/tx/__screenshots__/TxState.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..1c20efe2fd
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..ad0eb873f1
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-mobile-dark-mode-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_with-interpretation-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_with-interpretation-mobile-dark-mode-1.png
deleted file mode 100644
index 598aa009c2..0000000000
Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_with-interpretation-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-has-method-called-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-has-method-called-1.png
new file mode 100644
index 0000000000..37bd116beb
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-has-method-called-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-pending-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-pending-1.png
new file mode 100644
index 0000000000..12cec1ac89
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-pending-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-with-action-button-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-with-action-button-1.png
new file mode 100644
index 0000000000..e8b69ccb00
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-with-action-button-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..811ddd2648
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png
new file mode 100644
index 0000000000..47467b35fd
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png
new file mode 100644
index 0000000000..4e3a1cb627
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png
new file mode 100644
index 0000000000..34ad74b807
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png
new file mode 100644
index 0000000000..943d1c1065
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png
new file mode 100644
index 0000000000..96add7cb05
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..b189230c53
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-mobile-dark-mode-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_no-interpretation-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_no-interpretation-1.png
deleted file mode 100644
index 218085ff3e..0000000000
Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_no-interpretation-1.png and /dev/null differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_no-interpretation-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_no-interpretation-mobile-1.png
index 218085ff3e..12cec1ac89 100644
Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_no-interpretation-mobile-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_no-interpretation-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_with-interpretation-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_with-interpretation-mobile-dark-mode-1.png
deleted file mode 100644
index 186b321499..0000000000
Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_with-interpretation-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..ec8d91cb24
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png
new file mode 100644
index 0000000000..4667ebdb7b
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png
new file mode 100644
index 0000000000..486e49887f
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png
new file mode 100644
index 0000000000..41bc8ef74c
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png
new file mode 100644
index 0000000000..ed1f1d1dbb
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png
new file mode 100644
index 0000000000..bd4ce408f7
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..28bf7fd0e2
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-mobile-dark-mode-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_no-interpretation-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_no-interpretation-mobile-1.png
index 469001baf7..3e886891fb 100644
Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_no-interpretation-mobile-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_no-interpretation-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_with-interpretation-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_with-interpretation-mobile-dark-mode-1.png
deleted file mode 100644
index 699656d040..0000000000
Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_with-interpretation-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/tx/assetFlows/TxAssetFlowsListItem.tsx b/ui/tx/assetFlows/TxAssetFlowsListItem.tsx
new file mode 100644
index 0000000000..9a9b491248
--- /dev/null
+++ b/ui/tx/assetFlows/TxAssetFlowsListItem.tsx
@@ -0,0 +1,46 @@
+import { Box, Skeleton, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+import NovesFromTo from 'ui/shared/Noves/NovesFromTo';
+
+import NovesActionSnippet from './components/NovesActionSnippet';
+import type { NovesFlowViewItem } from './utils/generateFlowViewData';
+
+type Props = {
+  isPlaceholderData: boolean;
+  item: NovesFlowViewItem;
+};
+
+const TxAssetFlowsListItem = (props: Props) => {
+
+  return (
+    <ListItemMobile rowGap={ 4 } w="full" >
+      <Skeleton borderRadius="sm" isLoaded={ !props.isPlaceholderData } w="full">
+
+        <Box display="flex" >
+          <IconSvg
+            name="lightning"
+            height="5"
+            width="5"
+            color="text_secondary"
+          />
+
+          <Text fontSize="sm" fontWeight={ 500 }>
+            Action
+          </Text>
+        </Box>
+
+      </Skeleton>
+
+      <NovesActionSnippet item={ props.item } isLoaded={ !props.isPlaceholderData }/>
+
+      <Box maxW="full">
+        <NovesFromTo item={ props.item } isLoaded={ !props.isPlaceholderData }/>
+      </Box>
+    </ListItemMobile>
+  );
+};
+
+export default React.memo(TxAssetFlowsListItem);
diff --git a/ui/tx/assetFlows/TxAssetFlowsTableItem.tsx b/ui/tx/assetFlows/TxAssetFlowsTableItem.tsx
new file mode 100644
index 0000000000..0e2056b038
--- /dev/null
+++ b/ui/tx/assetFlows/TxAssetFlowsTableItem.tsx
@@ -0,0 +1,28 @@
+import { Td, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import NovesFromTo from 'ui/shared/Noves/NovesFromTo';
+
+import NovesActionSnippet from './components/NovesActionSnippet';
+import type { NovesFlowViewItem } from './utils/generateFlowViewData';
+
+type Props = {
+  isPlaceholderData: boolean;
+  item: NovesFlowViewItem;
+};
+
+const TxAssetFlowsTableItem = (props: Props) => {
+
+  return (
+    <Tr >
+      <Td px={ 3 } py={ 5 } fontSize="sm" borderColor="gray.200" _dark={{ borderColor: 'whiteAlpha.200' }}>
+        <NovesActionSnippet item={ props.item } isLoaded={ !props.isPlaceholderData }/>
+      </Td>
+      <Td px={ 3 } py="18px" fontSize="sm" borderColor="gray.200" _dark={{ borderColor: 'whiteAlpha.200' }}>
+        <NovesFromTo item={ props.item } isLoaded={ !props.isPlaceholderData }/>
+      </Td>
+    </Tr>
+  );
+};
+
+export default React.memo(TxAssetFlowsTableItem);
diff --git a/ui/tx/assetFlows/components/NovesActionSnippet.tsx b/ui/tx/assetFlows/components/NovesActionSnippet.tsx
new file mode 100644
index 0000000000..daa05266c5
--- /dev/null
+++ b/ui/tx/assetFlows/components/NovesActionSnippet.tsx
@@ -0,0 +1,119 @@
+import { Box, Hide, PopoverArrow, PopoverContent, PopoverTrigger, Show, Skeleton, Text, useColorModeValue } from '@chakra-ui/react';
+import type { FC } from 'react';
+import React from 'react';
+
+import { HEX_REGEXP } from 'lib/regexp';
+import Popover from 'ui/shared/chakra/Popover';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import IconSvg from 'ui/shared/IconSvg';
+
+import type { NovesFlowViewItem } from '../utils/generateFlowViewData';
+import NovesTokenTooltipContent from './NovesTokenTooltipContent';
+
+interface Props {
+  item: NovesFlowViewItem;
+  isLoaded: boolean;
+}
+
+const NovesActionSnippet: FC<Props> = ({ item, isLoaded }) => {
+  const popoverBg = useColorModeValue('gray.700', 'gray.300');
+
+  const token = React.useMemo(() => {
+    const action = item.action;
+
+    const name = action.nft?.name || action.token?.name;
+    const symbol = action.nft?.symbol || action.token?.symbol;
+
+    const token = {
+      name: name || '',
+      symbol: (symbol?.toLowerCase() === name?.toLowerCase() ? undefined : symbol) || '',
+      address: action.nft?.address || action.token?.address || '',
+      icon_url: '',
+      type: action.nft ? 'ERC-721' as const : 'ERC-20' as const,
+    };
+
+    return token;
+  }, [ item.action ]);
+
+  const validTokenAddress = token.address ? HEX_REGEXP.test(token.address) : false;
+
+  return (
+    <Skeleton borderRadius="sm" isLoaded={ isLoaded }>
+      <Hide above="lg">
+        <Box display="flex" gap={ 2 } cursor="pointer" flexWrap="wrap">
+          <Text fontWeight="700" >
+            { item.action.label }
+          </Text>
+          <Text fontWeight="500">
+            { item.action.amount }
+          </Text>
+          <TokenEntity
+            token={ token }
+            noCopy
+            noSymbol
+            noLink={ !validTokenAddress }
+            fontWeight="500"
+            color="link"
+            w="fit-content"
+          />
+        </Box>
+      </Hide>
+      <Show above="lg">
+
+        <Popover
+          trigger="hover"
+          openDelay={ 50 }
+          closeDelay={ 50 }
+          arrowSize={ 15 }
+          arrowShadowColor="transparent"
+          placement="bottom"
+          flip={ false }
+        >
+          <PopoverTrigger>
+            <Box display="flex" gap={ 2 } cursor="pointer" w="fit-content" maxW="100%" alignItems="center">
+              <IconSvg
+                name="lightning"
+                height="5"
+                width="5"
+                color="gray.500"
+                _dark={{ color: 'gray.400' }}
+              />
+              <Text fontWeight="700" >
+                { item.action.label }
+              </Text>
+              <Text fontWeight="500">
+                { item.action.amount }
+              </Text>
+              <TokenEntity
+                token={ token }
+                noCopy
+                jointSymbol
+                noLink={ !validTokenAddress }
+                fontWeight="500"
+                color="link"
+                w="fit-content"
+              />
+            </Box>
+
+          </PopoverTrigger>
+          <PopoverContent
+            bg={ popoverBg }
+            shadow="lg"
+            width="fit-content"
+            zIndex="modal"
+            padding={ 2 }
+          >
+            <PopoverArrow bg={ popoverBg }/>
+
+            <NovesTokenTooltipContent
+              token={ item.action.token || item.action.nft }
+              amount={ item.action.amount }
+            />
+          </PopoverContent>
+        </Popover>
+      </Show>
+    </Skeleton>
+  );
+};
+
+export default React.memo(NovesActionSnippet);
diff --git a/ui/tx/assetFlows/components/NovesTokenTooltipContent.tsx b/ui/tx/assetFlows/components/NovesTokenTooltipContent.tsx
new file mode 100644
index 0000000000..f2bebb068c
--- /dev/null
+++ b/ui/tx/assetFlows/components/NovesTokenTooltipContent.tsx
@@ -0,0 +1,55 @@
+import { Box, Text, useColorModeValue } from '@chakra-ui/react';
+import type { FC } from 'react';
+import React from 'react';
+
+import type { NovesNft, NovesToken } from 'types/api/noves';
+
+import { HEX_REGEXP } from 'lib/regexp';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+
+interface Props {
+  amount?: string;
+  token: NovesToken | NovesNft | undefined;
+}
+
+const NovesTokenTooltipContent: FC<Props> = ({ token, amount }) => {
+  const textColor = useColorModeValue('white', 'blackAlpha.900');
+
+  if (!token) {
+    return null;
+  }
+
+  const showTokenName = token.symbol !== token.name;
+  const showTokenAddress = HEX_REGEXP.test(token.address);
+
+  return (
+    <Box color={ textColor } display="flex" flexDir="column" alignItems="center" gap={ 1 }>
+      <Text as="p" color="inherit" fontWeight="600">
+        <Text color="inherit" as="span">
+          { amount }
+        </Text>
+        <Text color="inherit" as="span" ml={ 1 }>
+          { token.symbol }
+        </Text>
+      </Text>
+
+      { showTokenName && (
+        <Text as="p" color="inherit" fontWeight="600" mt="6px">
+          { token.name }
+        </Text>
+      ) }
+
+      { showTokenAddress && (
+        <Box display="flex" alignItems="center">
+          <Text color="inherit" fontWeight="400">
+            { token.address }
+          </Text>
+          <CopyToClipboard text={ token.address }/>
+        </Box>
+      ) }
+
+    </Box>
+  );
+};
+
+export default React.memo(NovesTokenTooltipContent);
diff --git a/ui/tx/assetFlows/utils/createNovesSummaryObject.test.ts b/ui/tx/assetFlows/utils/createNovesSummaryObject.test.ts
new file mode 100644
index 0000000000..35275d22bc
--- /dev/null
+++ b/ui/tx/assetFlows/utils/createNovesSummaryObject.test.ts
@@ -0,0 +1,20 @@
+import * as transactionMock from 'mocks/noves/transaction';
+
+import { createNovesSummaryObject } from './createNovesSummaryObject';
+
+it('creates interpretation summary object', async() => {
+  const result = createNovesSummaryObject(transactionMock.transaction);
+
+  expect(result).toEqual({
+    summary_template: ' Called function \'stake\' on contract{0xef326CdAdA59D3A740A76bB5f4F88Fb2}',
+    summary_template_variables: {
+      '0xef326CdAdA59D3A740A76bB5f4F88Fb2': {
+        type: 'address',
+        value: {
+          hash: '0xef326CdAdA59D3A740A76bB5f4F88Fb2f1076164',
+          is_contract: true,
+        },
+      },
+    },
+  });
+});
diff --git a/ui/tx/assetFlows/utils/createNovesSummaryObject.ts b/ui/tx/assetFlows/utils/createNovesSummaryObject.ts
new file mode 100644
index 0000000000..81df1eabea
--- /dev/null
+++ b/ui/tx/assetFlows/utils/createNovesSummaryObject.ts
@@ -0,0 +1,139 @@
+import type { NovesResponseData } from 'types/api/noves';
+import type { TxInterpretationSummary } from 'types/api/txInterpretation';
+
+import { createAddressValues } from './getAddressValues';
+import type { NovesTokenInfo, TokensData } from './getTokensData';
+import { getTokensData } from './getTokensData';
+
+export interface SummaryAddress {
+  hash: string;
+  name?: string | null;
+  is_contract?: boolean;
+}
+
+export interface SummaryValues {
+  match: string;
+  value: NovesTokenInfo | SummaryAddress;
+  type: 'token' | 'address';
+}
+
+interface NovesSummary {
+  summary_template: string;
+  summary_template_variables: { [x: string]: unknown };
+}
+
+export const createNovesSummaryObject = (translateData: NovesResponseData) => {
+
+  // Remove final dot and add space at the start to avoid matching issues
+  const description = translateData.classificationData.description;
+  const removedFinalDot = description.endsWith('.') ? description.slice(0, description.length - 1) : description;
+  let parsedDescription = ' ' + removedFinalDot + ' ';
+  const tokenData = getTokensData(translateData);
+
+  const idsMatched = tokenData.idList.filter(id => parsedDescription.includes(`#${ id }`));
+  const tokensMatchedByName = tokenData.nameList.filter(name => parsedDescription.toUpperCase().includes(` ${ name.toUpperCase() }`));
+  let tokensMatchedBySymbol = tokenData.symbolList.filter(symbol => parsedDescription.toUpperCase().includes(` ${ symbol.toUpperCase() }`));
+
+  // Filter symbols if they're already matched by name
+  tokensMatchedBySymbol = tokensMatchedBySymbol.filter(symbol => !tokensMatchedByName.includes(tokenData.bySymbol[symbol]?.name || ''));
+
+  const summaryValues: Array<SummaryValues> = [];
+
+  if (idsMatched.length) {
+    parsedDescription = removeIds(tokensMatchedByName, tokensMatchedBySymbol, idsMatched, tokenData, parsedDescription);
+  }
+
+  if (tokensMatchedByName.length) {
+    const values = createTokensSummaryValues(tokensMatchedByName, tokenData.byName);
+    summaryValues.push(...values);
+  }
+
+  if (tokensMatchedBySymbol.length) {
+    const values = createTokensSummaryValues(tokensMatchedBySymbol, tokenData.bySymbol);
+    summaryValues.push(...values);
+  }
+
+  const addressSummaryValues = createAddressValues(translateData, parsedDescription);
+  if (addressSummaryValues.length) {
+    summaryValues.push(...addressSummaryValues);
+  }
+
+  return createSummaryTemplate(summaryValues, parsedDescription) as TxInterpretationSummary;
+};
+
+const removeIds = (
+  tokensMatchedByName: Array<string>,
+  tokensMatchedBySymbol: Array<string>,
+  idsMatched: Array<string>,
+  tokenData: TokensData,
+  parsedDescription: string,
+) => {
+  // Remove ids from the description since we already have that info in the token object
+  let description = parsedDescription;
+
+  tokensMatchedByName.forEach(name => {
+    const hasId = idsMatched.includes(tokenData.byName[name].id || '');
+    if (hasId) {
+      description = description.replaceAll(`#${ tokenData.byName[name].id }`, '');
+    }
+  });
+
+  tokensMatchedBySymbol.forEach(name => {
+    const hasId = idsMatched.includes(tokenData.bySymbol[name].id || '');
+    if (hasId) {
+      description = description.replaceAll(`#${ tokenData.bySymbol[name].id }`, '');
+    }
+  });
+
+  return description;
+};
+
+const createTokensSummaryValues = (
+  matchedStrings: Array<string>,
+  tokens: {
+    [x: string]: NovesTokenInfo;
+  },
+) => {
+  const summaryValues: Array<SummaryValues> = matchedStrings.map(match => ({
+    match,
+    type: 'token',
+    value: tokens[match],
+  }));
+
+  return summaryValues;
+};
+
+const createSummaryTemplate = (summaryValues: Array<SummaryValues | undefined>, parsedDescription: string) => {
+  let newDescription = parsedDescription;
+
+  const result: NovesSummary = {
+    summary_template: newDescription,
+    summary_template_variables: {},
+  };
+
+  if (!summaryValues[0]) {
+    return result;
+  }
+
+  const createTemplate = (data: SummaryValues, index = 0) => {
+    newDescription = newDescription.replaceAll(new RegExp(` ${ data.match } `, 'gi'), `{${ data.match }}`);
+
+    const variable = {
+      type: data.type,
+      value: data.value,
+    };
+
+    result.summary_template_variables[data.match] = variable;
+
+    const nextValue = summaryValues[index + 1];
+    if (nextValue) {
+      createTemplate(nextValue, index + 1);
+    }
+  };
+
+  createTemplate(summaryValues[0]);
+
+  result.summary_template = newDescription;
+
+  return result;
+};
diff --git a/ui/tx/assetFlows/utils/generateFlowViewData.test.ts b/ui/tx/assetFlows/utils/generateFlowViewData.test.ts
new file mode 100644
index 0000000000..0cbb2770dd
--- /dev/null
+++ b/ui/tx/assetFlows/utils/generateFlowViewData.test.ts
@@ -0,0 +1,48 @@
+import * as transactionMock from 'mocks/noves/transaction';
+
+import { generateFlowViewData } from './generateFlowViewData';
+
+it('creates asset flows items', async() => {
+  const result = generateFlowViewData(transactionMock.transaction);
+
+  expect(result).toEqual(
+    [
+      {
+        action: {
+          label: 'Sent',
+          amount: '3000',
+          flowDirection: 'toRight',
+          token: {
+            address: '0x1bfe4298796198f8664b18a98640cec7c89b5baa',
+            decimals: 18,
+            name: 'PQR-Test',
+            symbol: 'PQR',
+          },
+        },
+        rightActor: {
+          address: '0xdD15D2650387Fb6FEDE27ae7392C402a393F8A37',
+          name: null,
+        },
+        accountAddress: '0xef6595a423c99f3f2821190a4d96fce4dcd89a80',
+      },
+      {
+        action: {
+          label: 'Paid Gas',
+          amount: '0.000395521502109448',
+          flowDirection: 'toRight',
+          token: {
+            address: 'ETH',
+            decimals: 18,
+            name: 'ETH',
+            symbol: 'ETH',
+          },
+        },
+        rightActor: {
+          address: '',
+          name: 'Validators',
+        },
+        accountAddress: '0xef6595a423c99f3f2821190a4d96fce4dcd89a80',
+      },
+    ],
+  );
+});
diff --git a/ui/tx/assetFlows/utils/generateFlowViewData.ts b/ui/tx/assetFlows/utils/generateFlowViewData.ts
new file mode 100644
index 0000000000..e4adb0d348
--- /dev/null
+++ b/ui/tx/assetFlows/utils/generateFlowViewData.ts
@@ -0,0 +1,76 @@
+import _findIndex from 'lodash/findIndex';
+
+import type { NovesNft, NovesResponseData, NovesSentReceived, NovesToken } from 'types/api/noves';
+
+export interface NovesAction {
+  label: string;
+  amount: string | undefined;
+  flowDirection: 'toLeft' | 'toRight';
+  nft: NovesNft | undefined;
+  token: NovesToken | undefined;
+}
+
+export interface NovesFlowViewItem {
+  action: NovesAction;
+  rightActor: {
+    address: string ;
+    name: string | null;
+  };
+  accountAddress: string;
+}
+
+export function generateFlowViewData(data: NovesResponseData): Array<NovesFlowViewItem> {
+  const perspectiveAddress = data.accountAddress.toLowerCase();
+
+  const sent = data.classificationData.sent || [];
+  const received = data.classificationData.received || [];
+
+  const txItems = [ ...sent, ...received ];
+
+  const paidGasIndex = _findIndex(txItems, (item) => item.action === 'paidGas');
+  if (paidGasIndex >= 0) {
+    const element = txItems.splice(paidGasIndex, 1)[0];
+    element.to.name = 'Validators';
+    txItems.splice(txItems.length, 0, element);
+  }
+
+  const flowViewData = txItems.map((item) => {
+    const action = {
+      label: item.actionFormatted || item.action,
+      amount: item.amount || undefined,
+      flowDirection: getFlowDirection(item, perspectiveAddress),
+      nft: item.nft || undefined,
+      token: item.token || undefined,
+    };
+
+    if (item.from.name && item.from.name.includes('(this wallet)')) {
+      item.from.name = item.from.name.split('(this wallet)')[0];
+    }
+
+    if (item.to.name && item.to.name.includes('(this wallet)')) {
+      item.to.name = item.to.name.split('(this wallet)')[0];
+    }
+
+    const rightActor = getRightActor(item, perspectiveAddress);
+
+    return { action, rightActor, accountAddress: perspectiveAddress };
+  });
+
+  return flowViewData;
+}
+
+function getRightActor(item: NovesSentReceived, perspectiveAddress: string) {
+  if (!item.to.address || item.to.address.toLowerCase() !== perspectiveAddress) {
+    return { address: item.to.address || '', name: item.to.name };
+  }
+
+  return { address: item.from.address, name: item.from.name };
+}
+
+function getFlowDirection(item: NovesSentReceived, perspectiveAddress: string): 'toLeft' | 'toRight' {
+  if (item.from.address && item.from.address.toLowerCase() === perspectiveAddress) {
+    return 'toRight';
+  }
+
+  return 'toLeft';
+}
diff --git a/ui/tx/assetFlows/utils/getAddressValues.test.ts b/ui/tx/assetFlows/utils/getAddressValues.test.ts
new file mode 100644
index 0000000000..f911253cce
--- /dev/null
+++ b/ui/tx/assetFlows/utils/getAddressValues.test.ts
@@ -0,0 +1,18 @@
+import * as transactionMock from 'mocks/noves/transaction';
+
+import { createAddressValues } from './getAddressValues';
+
+it('creates addresses summary values', async() => {
+  const result = createAddressValues(transactionMock.transaction, transactionMock.transaction.classificationData.description);
+
+  expect(result).toEqual([
+    {
+      match: '0xef326CdAdA59D3A740A76bB5f4F88Fb2',
+      type: 'address',
+      value: {
+        hash: '0xef326CdAdA59D3A740A76bB5f4F88Fb2f1076164',
+        is_contract: true,
+      },
+    },
+  ]);
+});
diff --git a/ui/tx/assetFlows/utils/getAddressValues.ts b/ui/tx/assetFlows/utils/getAddressValues.ts
new file mode 100644
index 0000000000..a680f068ee
--- /dev/null
+++ b/ui/tx/assetFlows/utils/getAddressValues.ts
@@ -0,0 +1,81 @@
+import type { NovesResponseData } from 'types/api/noves';
+
+import type { SummaryAddress, SummaryValues } from './createNovesSummaryObject';
+
+const ADDRESS_REGEXP = /(0x[\da-f]+\b)/gi;
+// eslint-disable-next-line regexp/no-unused-capturing-group
+const CONTRACT_REGEXP = /(contract 0x[\da-f]+\b)/gi;
+
+export const createAddressValues = (translateData: NovesResponseData, description: string) => {
+  const addressMatches = description.match(ADDRESS_REGEXP);
+  const contractMatches = description.match(CONTRACT_REGEXP);
+
+  let descriptionAddresses: Array<string> = addressMatches ? addressMatches : [];
+  let contractAddresses: Array<string> = [];
+
+  if (contractMatches?.length) {
+    contractAddresses = contractMatches.map(text => text.split(ADDRESS_REGEXP)[1]);
+    descriptionAddresses = addressMatches?.filter(address => !contractAddresses.includes(address)) || [];
+  }
+
+  const addresses = extractAddresses(translateData);
+
+  const descriptionSummaryValues = createAddressSummaryValues(descriptionAddresses, addresses);
+  const contractSummaryValues = createAddressSummaryValues(contractAddresses, addresses, true);
+
+  const summaryValues = [ ...descriptionSummaryValues, ...contractSummaryValues ];
+
+  return summaryValues;
+};
+
+const createAddressSummaryValues = (descriptionAddresses: Array<string>, addresses: Array<SummaryAddress>, isContract = false) => {
+  const summaryValues: Array<SummaryValues | undefined> = descriptionAddresses.map(match => {
+    const address = addresses.find(address => address.hash.toUpperCase().startsWith(match.toUpperCase()));
+
+    if (!address) {
+      return undefined;
+    }
+
+    const value: SummaryValues = {
+      match: match,
+      type: 'address',
+      value: isContract ? { ...address, is_contract: true } : address,
+    };
+
+    return value;
+  });
+
+  return summaryValues.filter(value => value !== undefined) as Array<SummaryValues>;
+};
+
+function extractAddresses(data: NovesResponseData) {
+  const addressesSet: Set<{ hash: string | null; name?: string | null }> = new Set(); // Use a Set to store unique addresses
+
+  addressesSet.add({ hash: data.rawTransactionData.fromAddress });
+  addressesSet.add({ hash: data.rawTransactionData.toAddress });
+
+  if (data.classificationData.approved) {
+    addressesSet.add({ hash: data.classificationData.approved.spender });
+  }
+
+  if (data.classificationData.deployedContractAddress) {
+    addressesSet.add({ hash: data.classificationData.deployedContractAddress });
+  }
+
+  if (data.txTypeVersion === 2) {
+    data.classificationData.sent.forEach((transaction) => {
+      addressesSet.add({ hash: transaction.from.address, name: transaction.from.name });
+      addressesSet.add({ hash: transaction.to.address, name: transaction.to.name });
+    });
+
+    data.classificationData.received.forEach((transaction) => {
+      addressesSet.add({ hash: transaction.from.address, name: transaction.from.name });
+      addressesSet.add({ hash: transaction.to.address, name: transaction.to.name });
+    });
+  }
+
+  const addresses = Array.from(addressesSet) as Array<{ hash: string; name?: string }>; // Convert Set to an array
+
+  // Remove empty and null values
+  return addresses.filter(address => address.hash !== null && address.hash !== '' && address.hash !== undefined);
+}
diff --git a/ui/tx/assetFlows/utils/getTokensData.test.ts b/ui/tx/assetFlows/utils/getTokensData.test.ts
new file mode 100644
index 0000000000..37124e000c
--- /dev/null
+++ b/ui/tx/assetFlows/utils/getTokensData.test.ts
@@ -0,0 +1,9 @@
+import * as transactionMock from 'mocks/noves/transaction';
+
+import { getTokensData } from './getTokensData';
+
+it('creates a tokens data object', async() => {
+  const result = getTokensData(transactionMock.transaction);
+
+  expect(result).toEqual(transactionMock.tokenData);
+});
diff --git a/ui/tx/assetFlows/utils/getTokensData.ts b/ui/tx/assetFlows/utils/getTokensData.ts
new file mode 100644
index 0000000000..159dcca11a
--- /dev/null
+++ b/ui/tx/assetFlows/utils/getTokensData.ts
@@ -0,0 +1,82 @@
+import _groupBy from 'lodash/groupBy';
+import _keysIn from 'lodash/keysIn';
+import _mapValues from 'lodash/mapValues';
+
+import type { NovesResponseData } from 'types/api/noves';
+import type { TokenInfo } from 'types/api/token';
+
+import { HEX_REGEXP } from 'lib/regexp';
+
+export interface NovesTokenInfo extends Pick<TokenInfo, 'address' | 'name' | 'symbol'> {
+  id?: string | undefined;
+}
+
+export interface TokensData {
+  nameList: Array<string>;
+  symbolList: Array<string>;
+  idList: Array<string>;
+  byName: {
+    [x: string]: NovesTokenInfo;
+  };
+  bySymbol: {
+    [x: string]: NovesTokenInfo;
+  };
+}
+
+export function getTokensData(data: NovesResponseData): TokensData {
+  const sent = data.classificationData.sent || [];
+  const received = data.classificationData.received || [];
+  const approved = data.classificationData.approved ? [ data.classificationData.approved ] : [];
+
+  const txItems = [ ...sent, ...received, ...approved ];
+
+  // Extract all tokens data
+  const tokens = txItems.map((item) => {
+    const name = item.nft?.name || item.token?.name || null;
+    const symbol = item.nft?.symbol || item.token?.symbol || null;
+    const address = item.nft?.address || item.token?.address || '';
+
+    const validTokenAddress = address ? HEX_REGEXP.test(address) : false;
+
+    const token = {
+      name: name,
+      symbol: symbol?.toLowerCase() === name?.toLowerCase() ? null : symbol,
+      address: validTokenAddress ? address : '',
+      id: item.nft?.id || item.token?.id,
+    };
+
+    return token;
+  });
+
+  // Group tokens by property into arrays
+  const tokensGroupByname = _groupBy(tokens, 'name');
+  const tokensGroupBySymbol = _groupBy(tokens, 'symbol');
+  const tokensGroupById = _groupBy(tokens, 'id');
+
+  // Map properties to an object and remove duplicates
+  const mappedNames = _mapValues(tokensGroupByname, (i) => {
+    return i[0];
+  });
+
+  const mappedSymbols = _mapValues(tokensGroupBySymbol, (i) => {
+    return i[0];
+  });
+
+  const mappedIds = _mapValues(tokensGroupById, (i) => {
+    return i[0];
+  });
+
+  const filters = [ 'undefined', 'null' ];
+  // Array of keys to match in string
+  const nameList = _keysIn(mappedNames).filter(i => !filters.includes(i));
+  const symbolList = _keysIn(mappedSymbols).filter(i => !filters.includes(i));
+  const idList = _keysIn(mappedIds).filter(i => !filters.includes(i));
+
+  return {
+    nameList,
+    symbolList,
+    idList,
+    byName: mappedNames,
+    bySymbol: mappedSymbols,
+  };
+}
diff --git a/ui/tx/blobs/TxBlobListItem.tsx b/ui/tx/blobs/TxBlobListItem.tsx
new file mode 100644
index 0000000000..e246d24b1a
--- /dev/null
+++ b/ui/tx/blobs/TxBlobListItem.tsx
@@ -0,0 +1,40 @@
+import { Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TxBlob } from 'types/api/blobs';
+
+import BlobDataType from 'ui/shared/blob/BlobDataType';
+import BlobEntity from 'ui/shared/entities/blob/BlobEntity';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+
+interface Props {
+  data: TxBlob;
+  isLoading?: boolean;
+}
+
+const TxBlobListItem = ({ data, isLoading }: Props) => {
+  const size = data.blob_data ? data.blob_data.replace('0x', '').length / 2 : '-';
+
+  return (
+    <ListItemMobileGrid.Container>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Blob hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BlobEntity hash={ data.hash } isLoading={ isLoading }/>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Data type</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        { data.blob_data ? <BlobDataType isLoading={ isLoading } data={ data.blob_data }/> : '-' }
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Size, bytes</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading }>
+          { size.toLocaleString() }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default React.memo(TxBlobListItem);
diff --git a/ui/tx/blobs/TxBlobsList.tsx b/ui/tx/blobs/TxBlobsList.tsx
new file mode 100644
index 0000000000..29018039f6
--- /dev/null
+++ b/ui/tx/blobs/TxBlobsList.tsx
@@ -0,0 +1,22 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TxBlob } from 'types/api/blobs';
+
+import TxBlobListItem from './TxBlobListItem';
+
+const TxBlobList = ({ data, isLoading }: { data: Array<TxBlob>; isLoading?: boolean }) => {
+  return (
+    <Box>
+      { data.map((item, index) => (
+        <TxBlobListItem
+          key={ item.hash + (isLoading ? index : '') }
+          data={ item }
+          isLoading={ isLoading }
+        />
+      )) }
+    </Box>
+  );
+};
+
+export default TxBlobList;
diff --git a/ui/tx/blobs/TxBlobsTable.tsx b/ui/tx/blobs/TxBlobsTable.tsx
new file mode 100644
index 0000000000..46a1acd9cf
--- /dev/null
+++ b/ui/tx/blobs/TxBlobsTable.tsx
@@ -0,0 +1,36 @@
+import { Table, Tbody, Tr, Th } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TxBlob } from 'types/api/blobs';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import TxBlobsTableItem from './TxBlobsTableItem';
+
+interface Props {
+  data: Array<TxBlob>;
+  top: number;
+  isLoading?: boolean;
+}
+
+const TxInternalsTable = ({ data, top, isLoading }: Props) => {
+
+  return (
+    <Table>
+      <Thead top={ top }>
+        <Tr>
+          <Th width="60%">Blob hash</Th>
+          <Th width="20%">Data type</Th>
+          <Th width="20%">Size, bytes</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { data.map((item, index) => (
+          <TxBlobsTableItem key={ item.hash + (isLoading ? index : '') } data={ item } isLoading={ isLoading }/>
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default TxInternalsTable;
diff --git a/ui/tx/blobs/TxBlobsTableItem.tsx b/ui/tx/blobs/TxBlobsTableItem.tsx
new file mode 100644
index 0000000000..4c82a784dd
--- /dev/null
+++ b/ui/tx/blobs/TxBlobsTableItem.tsx
@@ -0,0 +1,34 @@
+import { Tr, Td, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TxBlob } from 'types/api/blobs';
+
+import BlobDataType from 'ui/shared/blob/BlobDataType';
+import BlobEntity from 'ui/shared/entities/blob/BlobEntity';
+
+interface Props {
+  data: TxBlob;
+  isLoading?: boolean;
+}
+
+const TxBlobsTableItem = ({ data, isLoading }: Props) => {
+  const size = data.blob_data ? data.blob_data.replace('0x', '').length / 2 : '-';
+
+  return (
+    <Tr alignItems="top">
+      <Td>
+        <BlobEntity hash={ data.hash } noIcon isLoading={ isLoading }/>
+      </Td>
+      <Td verticalAlign="middle">
+        { data.blob_data ? <BlobDataType isLoading={ isLoading } data={ data.blob_data }/> : '-' }
+      </Td>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { size.toLocaleString() }
+        </Skeleton>
+      </Td>
+    </Tr>
+  );
+};
+
+export default React.memo(TxBlobsTableItem);
diff --git a/ui/tx/details/TxDetailsBurntFees.tsx b/ui/tx/details/TxDetailsBurntFees.tsx
new file mode 100644
index 0000000000..9054964c1a
--- /dev/null
+++ b/ui/tx/details/TxDetailsBurntFees.tsx
@@ -0,0 +1,58 @@
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { Transaction } from 'types/api/transaction';
+
+import config from 'configs/app';
+import { ZERO } from 'lib/consts';
+import { currencyUnits } from 'lib/units';
+import CurrencyValue from 'ui/shared/CurrencyValue';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import IconSvg from 'ui/shared/IconSvg';
+
+const rollupFeature = config.features.rollup;
+
+interface Props {
+  data: Transaction;
+  isLoading?: boolean;
+}
+
+const TxDetailsBurntFees = ({ data, isLoading }: Props) => {
+
+  if (config.UI.views.tx.hiddenFields?.burnt_fees || (rollupFeature.isEnabled && rollupFeature.type === 'optimistic')) {
+    return null;
+  }
+
+  const value = BigNumber(data.tx_burnt_fee || 0).plus(BigNumber(data.blob_gas_used || 0).multipliedBy(BigNumber(data.blob_gas_price || 0)));
+
+  if (value.isEqualTo(ZERO)) {
+    return null;
+  }
+
+  return (
+    <>
+      <DetailsInfoItem.Label
+        hint={ `
+            Amount of ${ currencyUnits.ether } burned for this transaction. Equals Block Base Fee per Gas * Gas Used
+            ${ data.blob_gas_price && data.blob_gas_used ? ' + Blob Gas Price * Blob Gas Used' : '' }
+          ` }
+        isLoading={ isLoading }
+      >
+        Burnt fees
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <IconSvg name="flame" boxSize={ 5 } color="gray.500" isLoading={ isLoading }/>
+        <CurrencyValue
+          value={ value.toString() }
+          currency={ currencyUnits.ether }
+          exchangeRate={ data.exchange_rate }
+          flexWrap="wrap"
+          ml={ 2 }
+          isLoading={ isLoading }
+        />
+      </DetailsInfoItem.Value>
+    </>
+  );
+};
+
+export default React.memo(TxDetailsBurntFees);
diff --git a/ui/tx/details/TxDetailsFeePerGas.tsx b/ui/tx/details/TxDetailsFeePerGas.tsx
index 3cbe465e5b..afc7bfb8d4 100644
--- a/ui/tx/details/TxDetailsFeePerGas.tsx
+++ b/ui/tx/details/TxDetailsFeePerGas.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 import config from 'configs/app';
 import { currencyUnits } from 'lib/units';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 
 interface Props {
   txFee: string | null;
@@ -18,16 +18,20 @@ const TxDetailsFeePerGas = ({ txFee, gasUsed, isLoading }: Props) => {
   }
 
   return (
-    <DetailsInfoItem
-      title="Fee per gas"
-      hint="Fee per gas"
-      isLoading={ isLoading }
-    >
-      <Skeleton isLoaded={ !isLoading } mr={ 1 }>
-        { BigNumber(txFee).dividedBy(10 ** config.chain.currency.decimals).dividedBy(gasUsed).toFixed() }
-        { config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ currencyUnits.ether }` }
-      </Skeleton>
-    </DetailsInfoItem>
+    <>
+      <DetailsInfoItem.Label
+        hint="Fee per gas"
+        isLoading={ isLoading }
+      >
+        Fee per gas
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isLoading } mr={ 1 }>
+          { BigNumber(txFee).dividedBy(10 ** config.chain.currency.decimals).dividedBy(gasUsed).toFixed() }
+          { config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ currencyUnits.ether }` }
+        </Skeleton>
+      </DetailsInfoItem.Value>
+    </>
   );
 };
 
diff --git a/ui/tx/details/TxDetailsGasPrice.tsx b/ui/tx/details/TxDetailsGasPrice.tsx
index e27d2880a2..16934da4fa 100644
--- a/ui/tx/details/TxDetailsGasPrice.tsx
+++ b/ui/tx/details/TxDetailsGasPrice.tsx
@@ -2,34 +2,59 @@ import { Skeleton } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
+import type { TokenInfo } from 'types/api/token';
+
 import config from 'configs/app';
 import { WEI, WEI_IN_GWEI } from 'lib/consts';
 import { currencyUnits } from 'lib/units';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 
 interface Props {
+  gasToken?: TokenInfo<'ERC-20'> | null;
   gasPrice: string | null;
   isLoading?: boolean;
 }
 
-const TxDetailsGasPrice = ({ gasPrice, isLoading }: Props) => {
+const TxDetailsGasPrice = ({ gasPrice, gasToken, isLoading }: Props) => {
   if (config.UI.views.tx.hiddenFields?.gas_price || !gasPrice) {
     return null;
   }
 
+  const content = (() => {
+    if (gasToken) {
+      return (
+        <Skeleton isLoaded={ !isLoading } display="flex">
+          <span>{ BigNumber(gasPrice).dividedBy(WEI).toFixed() }</span>
+          <TokenEntity token={ gasToken } noCopy onlySymbol w="auto" ml={ 1 }/>
+        </Skeleton>
+      );
+    }
+
+    return (
+      <>
+        <Skeleton isLoaded={ !isLoading } mr={ 1 }>
+          { BigNumber(gasPrice).dividedBy(WEI).toFixed() } { currencyUnits.ether }
+        </Skeleton>
+        <Skeleton isLoaded={ !isLoading } color="text_secondary">
+          <span>({ BigNumber(gasPrice).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</span>
+        </Skeleton>
+      </>
+    );
+  })();
+
   return (
-    <DetailsInfoItem
-      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"
-      isLoading={ isLoading }
-    >
-      <Skeleton isLoaded={ !isLoading } mr={ 1 }>
-        { BigNumber(gasPrice).dividedBy(WEI).toFixed() } { currencyUnits.ether }
-      </Skeleton>
-      <Skeleton isLoaded={ !isLoading } color="text_secondary">
-        <span>({ BigNumber(gasPrice).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</span>
-      </Skeleton>
-    </DetailsInfoItem>
+    <>
+      <DetailsInfoItem.Label
+        hint="Price per unit of gas specified by the sender. Higher gas prices can prioritize transaction inclusion during times of high usage"
+        isLoading={ isLoading }
+      >
+        Gas price
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        { content }
+      </DetailsInfoItem.Value>
+    </>
   );
 };
 
diff --git a/ui/tx/details/TxDetailsOther.tsx b/ui/tx/details/TxDetailsOther.tsx
index 97f5d4114a..e06265867a 100644
--- a/ui/tx/details/TxDetailsOther.tsx
+++ b/ui/tx/details/TxDetailsOther.tsx
@@ -3,46 +3,58 @@ import React from 'react';
 
 import type { Transaction } from 'types/api/transaction';
 
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import TextSeparator from 'ui/shared/TextSeparator';
 
-type Props = Pick<Transaction, 'nonce' | 'type' | 'position'>
+type Props = Pick<Transaction, 'nonce' | 'type' | 'position'> & { queueIndex?: number };
 
-const TxDetailsOther = ({ nonce, type, position }: Props) => {
+const TxDetailsOther = ({ nonce, type, position, queueIndex }: Props) => {
   return (
-    <DetailsInfoItem
-      title="Other"
-      hint="Other data related to this transaction"
-    >
-      {
-        [
-          typeof type === 'number' && (
-            <Box key="type">
-              <Text as="span" fontWeight="500">Txn type: </Text>
-              <Text fontWeight="600" as="span">{ type }</Text>
-              { type === 2 && <Text fontWeight="400" as="span" ml={ 1 } variant="secondary">(EIP-1559)</Text> }
-            </Box>
-          ),
-          <Box key="nonce">
-            <Text as="span" fontWeight="500">Nonce: </Text>
-            <Text fontWeight="600" as="span">{ nonce }</Text>
-          </Box>,
-          position !== null && position !== undefined && (
-            <Box key="position">
-              <Text as="span" fontWeight="500">Position: </Text>
-              <Text fontWeight="600" as="span">{ position }</Text>
-            </Box>
-          ),
-        ]
-          .filter(Boolean)
-          .map((item, index) => (
-            <>
-              { index !== 0 && <TextSeparator/> }
-              { item }
-            </>
-          ))
-      }
-    </DetailsInfoItem>
+    <>
+      <DetailsInfoItem.Label
+        hint="Other data related to this transaction"
+      >
+        Other
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        {
+          [
+            typeof type === 'number' && (
+              <Box key="type">
+                <Text as="span" fontWeight="500">Txn type: </Text>
+                <Text fontWeight="600" as="span">{ type }</Text>
+                { type === 2 && <Text fontWeight="400" as="span" ml={ 1 } variant="secondary">(EIP-1559)</Text> }
+                { type === 3 && <Text fontWeight="400" as="span" ml={ 1 } variant="secondary">(EIP-4844)</Text> }
+              </Box>
+            ),
+            queueIndex !== undefined ? (
+              <Box key="queueIndex">
+                <Text as="span" fontWeight="500">Queue index: </Text>
+                <Text fontWeight="600" as="span">{ queueIndex }</Text>
+              </Box>
+            ) : (
+              <Box key="nonce">
+                <Text as="span" fontWeight="500">Nonce: </Text>
+                <Text fontWeight="600" as="span">{ nonce }</Text>
+              </Box>
+            ),
+            position !== null && position !== undefined && (
+              <Box key="position">
+                <Text as="span" fontWeight="500">Position: </Text>
+                <Text fontWeight="600" as="span">{ position }</Text>
+              </Box>
+            ),
+          ]
+            .filter(Boolean)
+            .map((item, index) => (
+              <>
+                { index !== 0 && <TextSeparator/> }
+                { item }
+              </>
+            ))
+        }
+      </DetailsInfoItem.Value>
+    </>
   );
 };
 
diff --git a/ui/tx/details/TxDetailsTokenTransfer.tsx b/ui/tx/details/TxDetailsTokenTransfer.tsx
deleted file mode 100644
index c31db5852a..0000000000
--- a/ui/tx/details/TxDetailsTokenTransfer.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Flex, chakra } from '@chakra-ui/react';
-import React from 'react';
-
-import type { TokenTransfer as TTokenTransfer, Erc20TotalPayload, Erc721TotalPayload, Erc1155TotalPayload } from 'types/api/tokenTransfer';
-
-import getCurrencyValue from 'lib/getCurrencyValue';
-import AddressFromTo from 'ui/shared/address/AddressFromTo';
-import TokenEntity from 'ui/shared/entities/token/TokenEntity';
-import NftTokenTransferSnippet from 'ui/tx/NftTokenTransferSnippet';
-
-interface Props {
-  data: TTokenTransfer;
-}
-
-const TxDetailsTokenTransfer = ({ data }: Props) => {
-
-  const content = (() => {
-    switch (data.token.type) {
-      case 'ERC-20': {
-        const total = data.total as Erc20TotalPayload;
-        const { valueStr, usd } = getCurrencyValue({
-          value: total.value,
-          exchangeRate: data.token.exchange_rate,
-          accuracyUsd: 2,
-          decimals: total.decimals,
-        });
-
-        return (
-          <Flex flexWrap="wrap" columnGap={ 2 } rowGap={ 2 }>
-            <chakra.span color="text_secondary">for</chakra.span>
-            <span>{ valueStr }</span>
-            <TokenEntity
-              token={{ ...data.token, name: data.token.symbol || data.token.name }}
-              noCopy
-              noSymbol
-              w="auto"
-            />
-            { usd && <chakra.span color="text_secondary">(${ usd })</chakra.span> }
-          </Flex>
-        );
-      }
-
-      case 'ERC-721': {
-        const total = data.total as Erc721TotalPayload;
-        return (
-          <NftTokenTransferSnippet
-            token={ data.token }
-            tokenId={ total.token_id }
-            value="1"
-          />
-        );
-      }
-
-      case 'ERC-1155': {
-        const total = data.total as Erc1155TotalPayload;
-        return (
-          <NftTokenTransferSnippet
-            key={ total.token_id }
-            token={ data.token }
-            tokenId={ total.token_id }
-            value={ total.value }
-          />
-        );
-      }
-    }
-  })();
-
-  return (
-    <Flex
-      alignItems="flex-start"
-      flexWrap={{ base: 'wrap', lg: 'nowrap' }}
-      columnGap={ 2 }
-      rowGap={ 3 }
-      flexDir="row"
-      w="100%"
-    >
-      <AddressFromTo
-        from={ data.from }
-        to={ data.to }
-        truncation="constant"
-        noIcon
-        fontWeight="500"
-      />
-      <Flex flexDir="column" rowGap={ 5 } w="100%" overflow="hidden" fontWeight={ 500 }>
-        { content }
-      </Flex>
-    </Flex>
-  );
-};
-
-export default React.memo(TxDetailsTokenTransfer);
diff --git a/ui/tx/details/TxDetailsTokenTransfers.tsx b/ui/tx/details/TxDetailsTokenTransfers.tsx
index fb728c3887..d8e57c8450 100644
--- a/ui/tx/details/TxDetailsTokenTransfers.tsx
+++ b/ui/tx/details/TxDetailsTokenTransfers.tsx
@@ -5,11 +5,10 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import { route } from 'nextjs-routes';
 
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkInternal from 'ui/shared/LinkInternal';
-
-import TxDetailsTokenTransfer from './TxDetailsTokenTransfer';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import TokenTransferSnippet from 'ui/shared/TokenTransferSnippet/TokenTransferSnippet';
 
 interface Props {
   data: Array<TokenTransfer>;
@@ -40,22 +39,24 @@ const TxDetailsTokenTransfers = ({ data, txHash, isOverflow }: Props) => {
         }
 
         return (
-          <DetailsInfoItem
-            key={ type }
-            title={ title }
-            hint={ hint }
-            position="relative"
-          >
-            <Flex
-              flexDirection="column"
-              alignItems="flex-start"
-              rowGap={ 5 }
-              w="100%"
-              overflow="hidden"
+          <React.Fragment key={ type }>
+            <DetailsInfoItem.Label
+              hint={ hint }
             >
-              { items.map((item, index) => <TxDetailsTokenTransfer key={ index } data={ item }/>) }
-            </Flex>
-          </DetailsInfoItem>
+              { title }
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value position="relative">
+              <Flex
+                flexDirection="column"
+                alignItems="flex-start"
+                rowGap={ 5 }
+                w="100%"
+                overflow="hidden"
+              >
+                { items.map((item, index) => <TokenTransferSnippet key={ index } data={ item }/>) }
+              </Flex>
+            </DetailsInfoItem.Value>
+          </React.Fragment>
         );
       }) }
       { isOverflow && (
diff --git a/ui/tx/details/TxDetailsWithdrawalStatus.pw.tsx b/ui/tx/details/TxDetailsWithdrawalStatus.pw.tsx
index f7d491999e..4a3e58473f 100644
--- a/ui/tx/details/TxDetailsWithdrawalStatus.pw.tsx
+++ b/ui/tx/details/TxDetailsWithdrawalStatus.pw.tsx
@@ -1,35 +1,26 @@
 import { Box } from '@chakra-ui/react';
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import type { L2WithdrawalStatus } from 'types/api/l2Withdrawals';
+import type { OptimisticL2WithdrawalStatus } from 'types/api/optimisticL2';
 
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import TxDetailsWithdrawalStatus from './TxDetailsWithdrawalStatus';
 
-const statuses: Array<L2WithdrawalStatus> = [
+const statuses: Array<OptimisticL2WithdrawalStatus> = [
   'Waiting for state root',
   'Ready for relay',
   'Relayed',
 ];
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
 statuses.forEach((status) => {
-  test(`status="${ status }"`, async({ mount }) => {
-
-    const component = await mount(
-      <TestApp>
-        <Box p={ 2 }>
-          <TxDetailsWithdrawalStatus status={ status } l1TxHash="0x7d93a59a228e97d084a635181c3053e324237d07566ec12287eae6da2bcf9456"/>
-        </Box>
-      </TestApp>,
+  test(`status="${ status }"`, async({ render, mockEnvs }) => {
+    await mockEnvs(ENVS_MAP.optimisticRollup);
+    const component = await render(
+      <Box p={ 2 }>
+        <TxDetailsWithdrawalStatus status={ status } l1TxHash="0x7d93a59a228e97d084a635181c3053e324237d07566ec12287eae6da2bcf9456"/>
+      </Box>,
     );
 
     await expect(component).toHaveScreenshot();
diff --git a/ui/tx/details/TxDetailsWithdrawalStatus.tsx b/ui/tx/details/TxDetailsWithdrawalStatus.tsx
index fd8564b871..6e30e5a163 100644
--- a/ui/tx/details/TxDetailsWithdrawalStatus.tsx
+++ b/ui/tx/details/TxDetailsWithdrawalStatus.tsx
@@ -1,19 +1,45 @@
 import { Button } from '@chakra-ui/react';
 import React from 'react';
 
-import type { L2WithdrawalStatus } from 'types/api/l2Withdrawals';
-import { WITHDRAWAL_STATUSES } from 'types/api/l2Withdrawals';
+import type { OptimisticL2WithdrawalStatus } from 'types/api/optimisticL2';
 
+import config from 'configs/app';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps';
 
 interface Props {
-  status: L2WithdrawalStatus | undefined;
+  status: OptimisticL2WithdrawalStatus | undefined;
   l1TxHash: string | undefined;
 }
 
+const WITHDRAWAL_STATUS_STEPS: Array<OptimisticL2WithdrawalStatus> = [
+  'Waiting for state root',
+  'Ready to prove',
+  'In challenge period',
+  'Ready for relay',
+  'Relayed',
+];
+
+const WITHDRAWAL_STATUS_ORDER_PROVEN: Array<OptimisticL2WithdrawalStatus> = [
+  'Waiting for state root',
+  'Ready to prove',
+  'Proven',
+  'Relayed',
+];
+
+const WITHDRAWAL_STATUS_ORDER_GAME: Array<OptimisticL2WithdrawalStatus> = [
+  'Waiting for state root',
+  'Ready to prove',
+  'Waiting a game to resolve',
+  'In challenge period',
+  'Ready for relay',
+  'Relayed',
+];
+
+const rollupFeature = config.features.rollup;
+
 const TxDetailsWithdrawalStatus = ({ status, l1TxHash }: Props) => {
-  if (!status || !WITHDRAWAL_STATUSES.includes(status)) {
+  if (!status || !rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') {
     return null;
   }
 
@@ -22,10 +48,14 @@ const TxDetailsWithdrawalStatus = ({ status, l1TxHash }: Props) => {
   const steps = (() => {
     switch (status) {
       case 'Ready for relay':
-        return WITHDRAWAL_STATUSES.slice(0, -1);
+        return WITHDRAWAL_STATUS_STEPS.slice(0, -1);
+      case 'Proven':
+        return WITHDRAWAL_STATUS_ORDER_PROVEN;
+      case 'Waiting a game to resolve':
+        return WITHDRAWAL_STATUS_ORDER_GAME;
       case 'Relayed': {
         if (l1TxHash) {
-          return WITHDRAWAL_STATUSES.map((status) => {
+          return WITHDRAWAL_STATUS_STEPS.map((status) => {
             return status === 'Relayed' ? {
               content: <TxEntityL1 hash={ l1TxHash } truncation="constant" text="Relayed" noIcon/>,
               label: status,
@@ -33,11 +63,11 @@ const TxDetailsWithdrawalStatus = ({ status, l1TxHash }: Props) => {
           });
         }
 
-        return WITHDRAWAL_STATUSES;
+        return WITHDRAWAL_STATUS_STEPS;
       }
 
       default:
-        return WITHDRAWAL_STATUSES;
+        return WITHDRAWAL_STATUS_STEPS;
     }
   })();
 
@@ -46,7 +76,7 @@ const TxDetailsWithdrawalStatus = ({ status, l1TxHash }: Props) => {
       variant="outline"
       size="sm"
       as="a"
-      href="https://app.optimism.io/bridge/withdraw"
+      href={ rollupFeature.L2WithdrawalUrl }
       target="_blank"
     >
       Claim funds
@@ -55,7 +85,7 @@ const TxDetailsWithdrawalStatus = ({ status, l1TxHash }: Props) => {
 
   return (
     <VerificationSteps
-      steps={ steps as unknown as Array<L2WithdrawalStatus> }
+      steps={ steps as unknown as Array<OptimisticL2WithdrawalStatus> }
       currentStep={ status }
       rightSlot={ rightSlot }
       my={ hasClaimButton ? '-6px' : 0 }
diff --git a/ui/tx/details/TxInfo.pw.tsx b/ui/tx/details/TxInfo.pw.tsx
index 262b6189af..e9f8c56497 100644
--- a/ui/tx/details/TxInfo.pw.tsx
+++ b/ui/tx/details/TxInfo.pw.tsx
@@ -1,176 +1,128 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as txMock from 'mocks/txs/tx';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import TxInfo from './TxInfo';
 
-const hooksConfig = {
-  router: {
-    query: { hash: 1 },
-  },
-};
-
-test('between addresses +@mobile +@dark-mode', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.base } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('between addresses +@mobile +@dark-mode', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.base } isLoading={ false }/>);
 
   await page.getByText('View details').click();
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-test('creating contact', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.withContractCreation } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('creating contact', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.withContractCreation } isLoading={ false }/>);
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-test('with token transfer +@mobile', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.withTokenTransfer } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('with token transfer +@mobile', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.withTokenTransfer } isLoading={ false }/>);
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-test('with decoded revert reason', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.withDecodedRevertReason } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('with decoded revert reason', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.withDecodedRevertReason } isLoading={ false }/>);
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-test('with decoded raw reason', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.withRawRevertReason } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('with decoded raw reason', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.withRawRevertReason } isLoading={ false }/>);
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-test('pending', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.pending } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('pending', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.pending } isLoading={ false }/>);
 
   await page.getByText('View details').click();
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-test('with actions uniswap +@mobile +@dark-mode', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.withActionsUniswap } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+// NOTE: On the screenshot from the test for the mobile device, the scroll overlay is not quite right.
+// I checked it manually in the real device, there was not any issue with it
+test('with actions uniswap +@mobile +@dark-mode', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.withActionsUniswap } isLoading={ false }/>);
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-const l2Test = test.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
+test('with blob', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.withBlob } isLoading={ false }/>);
 
-l2Test('l2', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.l2tx } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  await page.getByText('View details').click();
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-const mainnetTest = test.extend({
-  context: contextWithEnvs([
-    { name: 'NEXT_PUBLIC_IS_TESTNET', value: 'false' },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
+test('l2', async({ render, page, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  const component = await render(<TxInfo data={ txMock.l2tx } isLoading={ false }/>);
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
 });
 
-mainnetTest('without testnet warning', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.l2tx } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('without testnet warning', async({ render, page, mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_IS_TESTNET', 'false' ],
+  ]);
+  const component = await render(<TxInfo data={ txMock.l2tx } isLoading={ false }/>);
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-const stabilityTest = test.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.stabilityEnvs) as any,
-});
-
-stabilityTest('stability customization', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.stabilityTx } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('stability customization', async({ render, page, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.stabilityEnvs);
+  const component = await render(<TxInfo data={ txMock.stabilityTx } isLoading={ false }/>);
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
+
+test('arbitrum L1 status', async({ render, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.arbitrumRollup);
+  const component = await render(<TxInfo data={ txMock.arbitrumTxn } isLoading={ false }/>);
+
+  const statusElement = component.locator('div').filter({ hasText: 'Processed on rollup' }).nth(2);
+
+  await expect(statusElement).toHaveScreenshot();
+});
diff --git a/ui/tx/details/TxInfo.tsx b/ui/tx/details/TxInfo.tsx
index 21edbe4e0f..af430c281e 100644
--- a/ui/tx/details/TxInfo.tsx
+++ b/ui/tx/details/TxInfo.tsx
@@ -10,41 +10,50 @@ import {
   chakra,
   useColorModeValue,
   Skeleton,
+  HStack,
 } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 import { scroller, Element } from 'react-scroll';
 
+import { SCROLL_L2_BLOCK_STATUSES } from 'types/api/scrollL2';
 import type { Transaction } from 'types/api/transaction';
 import { ZKEVM_L2_TX_STATUSES } from 'types/api/transaction';
+import { ZKSYNC_L2_TX_BATCH_STATUSES } from 'types/api/zkSyncL2';
 
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import { WEI, WEI_IN_GWEI } from 'lib/consts';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
+import * as arbitrum from 'lib/rollups/arbitrum';
+import { MESSAGE_DESCRIPTIONS } from 'lib/tx/arbitrumMessageStatusDescription';
 import getConfirmationDuration from 'lib/tx/getConfirmationDuration';
 import { currencyUnits } from 'lib/units';
 import Tag from 'ui/shared/chakra/Tag';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import CurrencyValue from 'ui/shared/CurrencyValue';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
 import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
 import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
-import ZkEvmBatchEntityL2 from 'ui/shared/entities/block/ZkEvmBatchEntityL2';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+import Hint from 'ui/shared/Hint';
 import IconSvg from 'ui/shared/IconSvg';
 import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
 import RawInputData from 'ui/shared/RawInputData';
+import StatusTag from 'ui/shared/statusTag/StatusTag';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
 import TextSeparator from 'ui/shared/TextSeparator';
-import TxFeeStability from 'ui/shared/tx/TxFeeStability';
+import TxFee from 'ui/shared/tx/TxFee';
 import Utilization from 'ui/shared/Utilization/Utilization';
 import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps';
 import TxDetailsActions from 'ui/tx/details/txDetailsActions/TxDetailsActions';
+import TxDetailsBurntFees from 'ui/tx/details/TxDetailsBurntFees';
 import TxDetailsFeePerGas from 'ui/tx/details/TxDetailsFeePerGas';
 import TxDetailsGasPrice from 'ui/tx/details/TxDetailsGasPrice';
 import TxDetailsOther from 'ui/tx/details/TxDetailsOther';
@@ -53,6 +62,12 @@ import TxDetailsWithdrawalStatus from 'ui/tx/details/TxDetailsWithdrawalStatus';
 import TxRevertReason from 'ui/tx/details/TxRevertReason';
 import TxAllowedPeekers from 'ui/tx/TxAllowedPeekers';
 import TxSocketAlert from 'ui/tx/TxSocketAlert';
+import ZkSyncL2TxnBatchHashesInfo from 'ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo';
+
+import TxInfoScrollFees from './TxInfoScrollFees';
+
+const rollupFeature = config.features.rollup;
+
 interface Props {
   data: Transaction | undefined;
   isLoading: boolean;
@@ -71,6 +86,14 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
   }, []);
   const executionSuccessIconColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
 
+  const showAssociatedL1Tx = React.useCallback(() => {
+    setIsExpanded(true);
+    scroller.scrollTo('TxInfo__cutLink', {
+      duration: 500,
+      smooth: true,
+    });
+  }, []);
+
   if (!data) {
     return null;
   }
@@ -105,83 +128,168 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
 
   return (
     <Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'max-content minmax(728px, auto)' }}>
+
+      { config.features.metasuites.isEnabled && (
+        <>
+          <Box display="none" id="meta-suites__tx-info-label" data-status={ data.status } data-ready={ !isLoading }/>
+          <Box display="none" id="meta-suites__tx-info-value"/>
+          <DetailsInfoItemDivider display="none" id="meta-suites__details-info-item-divider"/>
+        </>
+      ) }
+
       { socketStatus && (
         <GridItem colSpan={{ base: undefined, lg: 2 }} mb={ 2 }>
           <TxSocketAlert status={ socketStatus }/>
         </GridItem>
       ) }
-      <DetailsInfoItem
-        title="Transaction hash"
+
+      <DetailsInfoItem.Label
         hint="Unique character string (TxID) assigned to every verified transaction"
-        flexWrap="nowrap"
         isLoading={ isLoading }
       >
+        Transaction hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value flexWrap="nowrap">
         { data.status === null && <Spinner mr={ 2 } size="sm" flexShrink={ 0 }/> }
         <Skeleton isLoaded={ !isLoading } overflow="hidden">
           <HashStringShortenDynamic hash={ data.hash }/>
         </Skeleton>
         <CopyToClipboard text={ data.hash } isLoading={ isLoading }/>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title={ config.features.zkEvmRollup.isEnabled ? 'L2 status and method' : 'Status and method' }
+
+        { config.features.metasuites.isEnabled && (
+          <>
+            <TextSeparator color="gray.500" flexShrink={ 0 } display="none" id="meta-suites__tx-explorer-separator"/>
+            <Box display="none" flexShrink={ 0 } id="meta-suites__tx-explorer-link"/>
+          </>
+        ) }
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Current transaction state: Success, Failed (Error), or Pending (In Process)"
         isLoading={ isLoading }
       >
+        {
+          rollupFeature.isEnabled &&
+          (rollupFeature.type === 'zkEvm' || rollupFeature.type === 'zkSync' || rollupFeature.type === 'arbitrum' || rollupFeature.type === 'scroll') ?
+            'L2 status and method' :
+            'Status and method'
+        }
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <TxStatus status={ data.status } errorText={ data.status === 'error' ? data.result : undefined } isLoading={ isLoading }/>
         { data.method && (
           <Tag colorScheme={ data.method === 'Multicall' ? 'teal' : 'gray' } isLoading={ isLoading } isTruncated ml={ 3 }>
             { data.method }
           </Tag>
         ) }
-      </DetailsInfoItem>
-      { config.features.optimisticRollup.isEnabled && data.op_withdrawals && data.op_withdrawals.length > 0 && (
-        <DetailsInfoItem
-          title="Withdrawal status"
-          hint="Detailed status progress of the transaction"
-        >
-          <Flex flexDir="column" rowGap={ 2 }>
-            { data.op_withdrawals.map((withdrawal) => (
-              <Box key={ withdrawal.nonce }>
-                <Box mb={ 2 }>
-                  <span>Nonce: </span>
-                  <chakra.span fontWeight={ 600 }>{ withdrawal.nonce }</chakra.span>
+        { data.arbitrum?.contains_message && (
+          <Skeleton isLoaded={ !isLoading } onClick={ showAssociatedL1Tx }>
+            <Link isTruncated ml={ 3 }>
+              { data.arbitrum?.contains_message === 'incoming' ? 'Incoming message' : 'Outgoing message' }
+            </Link>
+          </Skeleton>
+        ) }
+      </DetailsInfoItem.Value>
+
+      { rollupFeature.isEnabled && rollupFeature.type === 'optimistic' && data.op_withdrawals && data.op_withdrawals.length > 0 &&
+      !config.UI.views.tx.hiddenFields?.L1_status && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Detailed status progress of the transaction"
+          >
+            Withdrawal status
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Flex flexDir="column" rowGap={ 2 }>
+              { data.op_withdrawals.map((withdrawal) => (
+                <Box key={ withdrawal.nonce }>
+                  <Box mb={ 2 }>
+                    <span>Nonce: </span>
+                    <chakra.span fontWeight={ 600 }>{ withdrawal.nonce }</chakra.span>
+                  </Box>
+                  <TxDetailsWithdrawalStatus
+                    status={ withdrawal.status }
+                    l1TxHash={ withdrawal.l1_transaction_hash }
+                  />
                 </Box>
-                <TxDetailsWithdrawalStatus
-                  status={ withdrawal.status }
-                  l1TxHash={ withdrawal.l1_transaction_hash }
-                />
-              </Box>
-            )) }
-          </Flex>
-        </DetailsInfoItem>
+              )) }
+            </Flex>
+          </DetailsInfoItem.Value>
+        </>
       ) }
-      { data.zkevm_status && (
-        <DetailsInfoItem
-          title="Confirmation status"
-          hint="Status of the transaction confirmation path to L1"
-          isLoading={ isLoading }
-        >
-          <VerificationSteps currentStep={ data.zkevm_status } steps={ ZKEVM_L2_TX_STATUSES } isLoading={ isLoading }/>
-        </DetailsInfoItem>
+
+      { data.zkevm_status && !config.UI.views.tx.hiddenFields?.L1_status && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Status of the transaction confirmation path to L1"
+            isLoading={ isLoading }
+          >
+            Confirmation status
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <VerificationSteps currentStep={ data.zkevm_status } steps={ ZKEVM_L2_TX_STATUSES } isLoading={ isLoading }/>
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
+      { data.arbitrum?.status && !config.UI.views.tx.hiddenFields?.L1_status && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Status of the transaction confirmation path to L1"
+            isLoading={ isLoading }
+          >
+            L1 status
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <VerificationSteps
+              currentStep={ arbitrum.VERIFICATION_STEPS_MAP[data.arbitrum.status] }
+              currentStepPending={ arbitrum.getVerificationStepStatus(data.arbitrum) === 'pending' }
+              steps={ arbitrum.verificationSteps }
+              isLoading={ isLoading }
+            />
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
       { data.revert_reason && (
-        <DetailsInfoItem
-          title="Revert reason"
-          hint="The revert reason of the transaction"
-        >
-          <TxRevertReason { ...data.revert_reason }/>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="The revert reason of the transaction"
+          >
+            Revert reason
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <TxRevertReason { ...data.revert_reason }/>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { data.zksync && !config.UI.views.tx.hiddenFields?.L1_status && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Status is the short interpretation of the batch lifecycle"
+            isLoading={ isLoading }
+          >
+            L1 status
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <VerificationSteps steps={ ZKSYNC_L2_TX_BATCH_STATUSES } currentStep={ data.zksync.status } isLoading={ isLoading }/>
+          </DetailsInfoItem.Value>
+        </>
       ) }
-      <DetailsInfoItem
-        title="Block"
+
+      <DetailsInfoItem.Label
         hint="Block number containing the transaction"
         isLoading={ isLoading }
       >
-        { data.block === null ?
+        Block
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        { data.block_number === null ?
           <Text>Pending</Text> : (
             <BlockEntity
               isLoading={ isLoading }
-              number={ data.block }
+              number={ data.block_number }
               noIcon
             />
           ) }
@@ -193,63 +301,122 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
             </Skeleton>
           </>
         ) }
-      </DetailsInfoItem>
-      { data.zkevm_batch_number && (
-        <DetailsInfoItem
-          title="Tx batch"
-          hint="Batch index for this transaction"
-          isLoading={ isLoading }
-        >
-          <ZkEvmBatchEntityL2
+        { data.scroll?.l2_block_status && (
+          <>
+            <TextSeparator color="gray.500"/>
+            <VerificationSteps steps={ SCROLL_L2_BLOCK_STATUSES } currentStep={ data.scroll.l2_block_status } isLoading={ isLoading }/>
+          </>
+        ) }
+      </DetailsInfoItem.Value>
+
+      { data.zkevm_batch_number && !config.UI.views.tx.hiddenFields?.batch && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Batch index for this transaction"
+            isLoading={ isLoading }
+          >
+            Txn batch
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <BatchEntityL2
+              isLoading={ isLoading }
+              number={ data.zkevm_batch_number }
+            />
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { data.zksync && !config.UI.views.tx.hiddenFields?.batch && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Batch number"
+            isLoading={ isLoading }
+          >
+            Batch
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            { data.zksync.batch_number ? (
+              <BatchEntityL2
+                isLoading={ isLoading }
+                number={ data.zksync.batch_number }
+              />
+            ) : <Skeleton isLoaded={ !isLoading }>Pending</Skeleton> }
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { data.arbitrum && !config.UI.views.tx.hiddenFields?.batch && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Index of the batch containing this transaction"
             isLoading={ isLoading }
-            number={ data.zkevm_batch_number }
-          />
-        </DetailsInfoItem>
+          >
+            Batch
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            { data.arbitrum.batch_number ?
+              <BatchEntityL2 isLoading={ isLoading } number={ data.arbitrum.batch_number }/> :
+              <Skeleton isLoaded={ !isLoading }>Pending</Skeleton> }
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       { data.timestamp && (
-        <DetailsInfoItem
-          title="Timestamp"
-          hint="Date & time of transaction inclusion, including length of time for confirmation"
-          isLoading={ isLoading }
-        >
-          <DetailsTimestamp timestamp={ data.timestamp } isLoading={ isLoading }/>
-          { data.confirmation_duration && (
-            <>
-              <TextSeparator color="gray.500"/>
-              <Skeleton isLoaded={ !isLoading } color="text_secondary">
-                <span>{ getConfirmationDuration(data.confirmation_duration) }</span>
-              </Skeleton>
-            </>
-          ) }
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Date & time of transaction inclusion, including length of time for confirmation"
+            isLoading={ isLoading }
+          >
+            Timestamp
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <DetailsTimestamp timestamp={ data.timestamp } isLoading={ isLoading }/>
+            { data.confirmation_duration && (
+              <>
+                <TextSeparator color="gray.500"/>
+                <Skeleton isLoaded={ !isLoading } color="text_secondary">
+                  <span>{ getConfirmationDuration(data.confirmation_duration) }</span>
+                </Skeleton>
+              </>
+            ) }
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       { data.execution_node && (
-        <DetailsInfoItem
-          title="Kettle"
-          hint="Node that carried out the confidential computation"
-          isLoading={ isLoading }
-        >
-          <AddressEntity
-            address={ data.execution_node }
-            href={ route({ pathname: '/txs/kettle/[hash]', query: { hash: data.execution_node.hash } }) }
-          />
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Node that carried out the confidential computation"
+            isLoading={ isLoading }
+          >
+            Kettle
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <AddressEntity
+              address={ data.execution_node }
+              href={ route({ pathname: '/txs/kettle/[hash]', query: { hash: data.execution_node.hash } }) }
+            />
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       { data.allowed_peekers && data.allowed_peekers.length > 0 && (
         <TxAllowedPeekers items={ data.allowed_peekers }/>
       ) }
+
       <DetailsSponsoredItem isLoading={ isLoading }/>
 
       <DetailsInfoItemDivider/>
 
       <TxDetailsActions hash={ data.hash } actions={ data.actions } isTxDataLoading={ isLoading }/>
 
-      <DetailsInfoItem
-        title="From"
+      <DetailsInfoItem.Label
         hint="Address (external or contract) sending the transaction"
         isLoading={ isLoading }
-        columnGap={ 3 }
       >
+        From
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value columnGap={ 3 }>
         <AddressEntity
           address={ data.from }
           isLoading={ isLoading }
@@ -260,11 +427,15 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
             { addressFromTags }
           </Flex>
         ) }
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title={ data.to?.is_contract ? 'Interacted with contract' : 'To' }
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Address (external or contract) receiving the transaction"
         isLoading={ isLoading }
+      >
+        { data.to?.is_contract ? 'Interacted with contract' : 'To' }
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value
         flexWrap={{ base: 'wrap', lg: 'nowrap' }}
         columnGap={ 3 }
       >
@@ -301,186 +472,327 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
         ) : (
           <span>[ Contract creation ]</span>
         ) }
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
+
       { data.token_transfers && <TxDetailsTokenTransfers data={ data.token_transfers } txHash={ data.hash } isOverflow={ data.token_transfers_overflow }/> }
 
       <DetailsInfoItemDivider/>
 
+      { (data.arbitrum?.commitment_transaction.hash || data.arbitrum?.confirmation_transaction.hash) &&
+      (
+        <>
+          { data.arbitrum?.commitment_transaction.hash && (
+            <>
+              <DetailsInfoItem.Label
+                hint="L1 transaction containing this batch commitment"
+                isLoading={ isLoading }
+              >
+                Commitment tx
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <TxEntityL1 hash={ data.arbitrum?.commitment_transaction.hash } isLoading={ isLoading }/>
+                { data.arbitrum?.commitment_transaction.status === 'finalized' && <StatusTag type="ok" text="Finalized" ml={ 2 }/> }
+              </DetailsInfoItem.Value>
+            </>
+          ) }
+          { data.arbitrum?.confirmation_transaction.hash && (
+            <>
+              <DetailsInfoItem.Label
+                hint="L1 transaction containing confirmation of this batch"
+                isLoading={ isLoading }
+              >
+                Confirmation tx
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <TxEntityL1 hash={ data.arbitrum?.confirmation_transaction.hash } isLoading={ isLoading }/>
+                { data.arbitrum?.commitment_transaction.status === 'finalized' && <StatusTag type="ok" text="Finalized" ml={ 2 }/> }
+              </DetailsInfoItem.Value>
+            </>
+          ) }
+          <DetailsInfoItemDivider/>
+        </>
+      ) }
+
       { data.zkevm_sequence_hash && (
-        <DetailsInfoItem
-          title="Sequence tx hash"
-          flexWrap="nowrap"
+        <>
+          <DetailsInfoItem.Label
+            isLoading={ isLoading }
+          >
+            Sequence tx hash
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value flexWrap="nowrap">
+            <Skeleton isLoaded={ !isLoading } overflow="hidden">
+              <HashStringShortenDynamic hash={ data.zkevm_sequence_hash }/>
+            </Skeleton>
+            <CopyToClipboard text={ data.zkevm_sequence_hash } isLoading={ isLoading }/>
+          </DetailsInfoItem.Value>
+        </>
 
-          isLoading={ isLoading }
-        >
-          <Skeleton isLoaded={ !isLoading } overflow="hidden">
-            <HashStringShortenDynamic hash={ data.zkevm_sequence_hash }/>
-          </Skeleton>
-          <CopyToClipboard text={ data.zkevm_sequence_hash } isLoading={ isLoading }/>
-        </DetailsInfoItem>
       ) }
-      { data.zkevm_verify_hash && (
-        <DetailsInfoItem
-          title="Verify tx hash"
-          flexWrap="nowrap"
-          isLoading={ isLoading }
-        >
-          <Skeleton isLoaded={ !isLoading } overflow="hidden">
-
-            <HashStringShortenDynamic hash={ data.zkevm_verify_hash }/>
-          </Skeleton>
-          <CopyToClipboard text={ data.zkevm_verify_hash } isLoading={ isLoading }/>
 
-        </DetailsInfoItem>
+      { data.zkevm_verify_hash && (
+        <>
+          <DetailsInfoItem.Label
+            isLoading={ isLoading }
+          >
+            Verify tx hash
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value flexWrap="nowrap">
+            <Skeleton isLoaded={ !isLoading } overflow="hidden">
+              <HashStringShortenDynamic hash={ data.zkevm_verify_hash }/>
+            </Skeleton>
+            <CopyToClipboard text={ data.zkevm_verify_hash } isLoading={ isLoading }/>
+          </DetailsInfoItem.Value>
+        </>
       ) }
 
       { (data.zkevm_batch_number || data.zkevm_verify_hash) && <DetailsInfoItemDivider/> }
 
       { !config.UI.views.tx.hiddenFields?.value && (
-        <DetailsInfoItem
-          title="Value"
-          hint="Value sent in the native token (and USD) if applicable"
-          isLoading={ isLoading }
-        >
-          <CurrencyValue
-            value={ data.value }
-            currency={ currencyUnits.ether }
-            exchangeRate={ data.exchange_rate }
+        <>
+          <DetailsInfoItem.Label
+            hint="Value sent in the native token (and USD) if applicable"
             isLoading={ isLoading }
-            flexWrap="wrap"
-          />
-        </DetailsInfoItem>
+          >
+            Value
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <CurrencyValue
+              value={ data.value }
+              currency={ currencyUnits.ether }
+              exchangeRate={ data.exchange_rate }
+              isLoading={ isLoading }
+              flexWrap="wrap"
+            />
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       { !config.UI.views.tx.hiddenFields?.tx_fee && (
-        <DetailsInfoItem
-          title="Transaction fee"
-          hint="Total transaction fee"
-          isLoading={ isLoading }
-        >
-          { data.stability_fee ? (
-            <TxFeeStability data={ data.stability_fee } isLoading={ isLoading }/>
-          ) : (
+        <>
+          <DetailsInfoItem.Label
+            hint={ data.blob_gas_used ? 'Transaction fee without blob fee' : 'Total transaction fee' }
+            isLoading={ isLoading }
+          >
+            Transaction fee
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <TxFee tx={ data } isLoading={ isLoading } withUsd/>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Fee paid to the poster for L1 resources"
+            isLoading={ isLoading }
+          >
+            Poster fee
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
             <CurrencyValue
-              value={ data.fee.value }
-              currency={ config.UI.views.tx.hiddenFields?.fee_currency ? '' : currencyUnits.ether }
+              value={ data.arbitrum.poster_fee }
+              currency={ currencyUnits.ether }
               exchangeRate={ data.exchange_rate }
               flexWrap="wrap"
               isLoading={ isLoading }
             />
-          ) }
-        </DetailsInfoItem>
+          </DetailsInfoItem.Value>
+
+          <DetailsInfoItem.Label
+            hint="Fee paid to the network for L2 resources"
+            isLoading={ isLoading }
+          >
+            Network fee
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <CurrencyValue
+              value={ data.arbitrum.network_fee }
+              currency={ currencyUnits.ether }
+              exchangeRate={ data.exchange_rate }
+              flexWrap="wrap"
+              isLoading={ isLoading }
+            />
+          </DetailsInfoItem.Value>
+        </>
       ) }
 
-      <TxDetailsGasPrice gasPrice={ data.gas_price } isLoading={ isLoading }/>
+      <TxDetailsGasPrice gasPrice={ data.gas_price } gasToken={ data.celo?.gas_token } isLoading={ isLoading }/>
 
       <TxDetailsFeePerGas txFee={ data.fee.value } gasUsed={ data.gas_used } isLoading={ isLoading }/>
 
-      <DetailsInfoItem
-        title="Gas usage & limit by txn"
+      <DetailsInfoItem.Label
         hint="Actual gas amount used by the transaction"
         isLoading={ isLoading }
       >
+        Gas usage & limit by txn
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isLoading }>{ BigNumber(data.gas_used || 0).toFormat() }</Skeleton>
         <TextSeparator/>
         <Skeleton isLoaded={ !isLoading }>{ BigNumber(data.gas_limit).toFormat() }</Skeleton>
         <Utilization ml={ 4 } value={ BigNumber(data.gas_used || 0).dividedBy(BigNumber(data.gas_limit)).toNumber() } isLoading={ isLoading }/>
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
+
+      { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && data.gas_used && (
+        <>
+          <DetailsInfoItem.Label
+            hint="L2 gas set aside for L1 data charges"
+            isLoading={ isLoading }
+          >
+            Gas used for L1
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !isLoading }>{ BigNumber(data.arbitrum.gas_used_for_l1 || 0).toFormat() }</Skeleton>
+            <TextSeparator/>
+            <Utilization
+              ml={ 4 }
+              value={ BigNumber(data.arbitrum.gas_used_for_l1 || 0).dividedBy(BigNumber(data.gas_used)).toNumber() }
+              isLoading={ isLoading }
+            />
+          </DetailsInfoItem.Value>
+
+          <DetailsInfoItem.Label
+            hint="L2 gas spent on L2 resources"
+            isLoading={ isLoading }
+          >
+            Gas used for L2
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !isLoading }>{ BigNumber(data.arbitrum.gas_used_for_l2 || 0).toFormat() }</Skeleton>
+            <TextSeparator/>
+            <Utilization
+              ml={ 4 }
+              value={ BigNumber(data.arbitrum.gas_used_for_l2 || 0).dividedBy(BigNumber(data.gas_used)).toNumber() }
+              isLoading={ isLoading }
+            />
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { data.scroll?.l1_gas_used !== undefined && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Total gas used on L1"
+            isLoading={ isLoading }
+          >
+            L1 Gas used
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !isLoading }>{ BigNumber(data.scroll?.l1_gas_used || 0).toFormat() }</Skeleton>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
       { !config.UI.views.tx.hiddenFields?.gas_fees &&
             (data.base_fee_per_gas || data.max_fee_per_gas || data.max_priority_fee_per_gas) && (
-        <DetailsInfoItem
-          title={ `Gas fees (${ currencyUnits.gwei })` }
-          // eslint-disable-next-line max-len
-          hint={ `
-                Base Fee refers to the network Base Fee at the time of the block, 
-                while Max Fee & Max Priority Fee refer to the max amount a user is willing to pay 
-                for their tx & to give to the ${ getNetworkValidatorTitle() } respectively
-              ` }
-          isLoading={ isLoading }
-        >
-          { data.base_fee_per_gas && (
-            <Skeleton isLoaded={ !isLoading }>
-              <Text as="span" fontWeight="500">Base: </Text>
-              <Text fontWeight="600" as="span">{ BigNumber(data.base_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
-              { (data.max_fee_per_gas || data.max_priority_fee_per_gas) && <TextSeparator/> }
-            </Skeleton>
-          ) }
-          { data.max_fee_per_gas && (
-            <Skeleton isLoaded={ !isLoading }>
-              <Text as="span" fontWeight="500">Max: </Text>
-              <Text fontWeight="600" as="span">{ BigNumber(data.max_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
-              { data.max_priority_fee_per_gas && <TextSeparator/> }
-            </Skeleton>
-          ) }
-          { data.max_priority_fee_per_gas && (
-            <Skeleton isLoaded={ !isLoading }>
-              <Text as="span" fontWeight="500">Max priority: </Text>
-              <Text fontWeight="600" as="span">{ BigNumber(data.max_priority_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
-            </Skeleton>
-          ) }
-        </DetailsInfoItem>
-      ) }
-      { data.tx_burnt_fee && !config.UI.views.tx.hiddenFields?.burnt_fees && !config.features.optimisticRollup.isEnabled && (
-        <DetailsInfoItem
-          title="Burnt fees"
-          hint={ `Amount of ${ currencyUnits.ether } burned for this transaction. Equals Block Base Fee per Gas * Gas Used` }
-        >
-          <IconSvg name="flame" boxSize={ 5 } color="gray.500"/>
-          <CurrencyValue
-            value={ String(data.tx_burnt_fee) }
-            currency={ currencyUnits.ether }
-            exchangeRate={ data.exchange_rate }
-            flexWrap="wrap"
-            ml={ 2 }
-          />
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint={ `
+            Base Fee refers to the network Base Fee at the time of the block, 
+            while Max Fee & Max Priority Fee refer to the max amount a user is willing to pay 
+            for their tx & to give to the ${ getNetworkValidatorTitle() } respectively
+          ` }
+            isLoading={ isLoading }
+          >
+            { `Gas fees (${ currencyUnits.gwei })` }
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            { data.base_fee_per_gas && (
+              <Skeleton isLoaded={ !isLoading }>
+                <Text as="span" fontWeight="500">Base: </Text>
+                <Text fontWeight="600" as="span">{ BigNumber(data.base_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
+                { (data.max_fee_per_gas || data.max_priority_fee_per_gas) && <TextSeparator/> }
+              </Skeleton>
+            ) }
+            { data.max_fee_per_gas && (
+              <Skeleton isLoaded={ !isLoading }>
+                <Text as="span" fontWeight="500">Max: </Text>
+                <Text fontWeight="600" as="span">{ BigNumber(data.max_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
+                { data.max_priority_fee_per_gas && <TextSeparator/> }
+              </Skeleton>
+            ) }
+            { data.max_priority_fee_per_gas && (
+              <Skeleton isLoaded={ !isLoading }>
+                <Text as="span" fontWeight="500">Max priority: </Text>
+                <Text fontWeight="600" as="span">{ BigNumber(data.max_priority_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
+              </Skeleton>
+            ) }
+          </DetailsInfoItem.Value>
+        </>
       ) }
-      { config.features.optimisticRollup.isEnabled && (
+
+      <TxDetailsBurntFees data={ data } isLoading={ isLoading }/>
+
+      { rollupFeature.isEnabled && rollupFeature.type === 'optimistic' && (
         <>
           { data.l1_gas_used && (
-            <DetailsInfoItem
-              title="L1 gas used by txn"
-              hint="L1 gas used by transaction"
-              isLoading={ isLoading }
-            >
-              <Text>{ BigNumber(data.l1_gas_used).toFormat() }</Text>
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="L1 gas used by transaction"
+                isLoading={ isLoading }
+              >
+                L1 gas used by txn
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <Text>{ BigNumber(data.l1_gas_used).toFormat() }</Text>
+              </DetailsInfoItem.Value>
+            </>
           ) }
+
           { data.l1_gas_price && (
-            <DetailsInfoItem
-              title="L1 gas price"
-              hint="L1 gas price"
-              isLoading={ isLoading }
-            >
-              <Text mr={ 1 }>{ BigNumber(data.l1_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether }</Text>
-              <Text variant="secondary">({ BigNumber(data.l1_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</Text>
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="L1 gas price"
+                isLoading={ isLoading }
+              >
+                L1 gas price
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <Text mr={ 1 }>{ BigNumber(data.l1_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether }</Text>
+                <Text variant="secondary">({ BigNumber(data.l1_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</Text>
+              </DetailsInfoItem.Value>
+            </>
           ) }
+
           { data.l1_fee && (
-            <DetailsInfoItem
-              title="L1 fee"
-              // eslint-disable-next-line max-len
-              hint={ `L1 Data Fee which is used to cover the L1 "security" cost from the batch submission mechanism. In combination with L2 execution fee, L1 fee makes the total amount of fees that a transaction pays.` }
-              isLoading={ isLoading }
-            >
-              <CurrencyValue
-                value={ data.l1_fee }
-                currency={ currencyUnits.ether }
-                exchangeRate={ data.exchange_rate }
-                flexWrap="wrap"
-              />
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                // eslint-disable-next-line max-len
+                hint={ `L1 Data Fee which is used to cover the L1 "security" cost from the batch submission mechanism. In combination with L2 execution fee, L1 fee makes the total amount of fees that a transaction pays.` }
+                isLoading={ isLoading }
+              >
+                L1 fee
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <CurrencyValue
+                  value={ data.l1_fee }
+                  currency={ currencyUnits.ether }
+                  exchangeRate={ data.exchange_rate }
+                  flexWrap="wrap"
+                />
+              </DetailsInfoItem.Value>
+            </>
           ) }
+
           { data.l1_fee_scalar && (
-            <DetailsInfoItem
-              title="L1 fee scalar"
-              hint="A Dynamic overhead (fee scalar) premium, which serves as a buffer in case L1 prices rapidly increase."
-              isLoading={ isLoading }
-            >
-              <Text>{ data.l1_fee_scalar }</Text>
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="A Dynamic overhead (fee scalar) premium, which serves as a buffer in case L1 prices rapidly increase."
+                isLoading={ isLoading }
+              >
+                L1 fee scalar
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <Text>{ data.l1_fee_scalar }</Text>
+              </DetailsInfoItem.Value>
+            </>
           ) }
         </>
       ) }
+      <TxInfoScrollFees data={ data } isLoading={ isLoading }/>
+
       <GridItem colSpan={{ base: undefined, lg: 2 }}>
         <Element name="TxInfo__cutLink">
           <Skeleton isLoaded={ !isLoading } mt={ 6 } display="inline-block">
@@ -496,24 +808,118 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
           </Skeleton>
         </Element>
       </GridItem>
+
       { isExpanded && (
         <>
           <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
-          <TxDetailsOther nonce={ data.nonce } type={ data.type } position={ data.position }/>
-          <DetailsInfoItem
-            title="Raw input"
+
+          { data.arbitrum?.contains_message && data.arbitrum?.message_related_info && (
+            <>
+              <DetailsInfoItem.Label
+                hint={ data.arbitrum.contains_message === 'incoming' ?
+                  'The hash of the transaction that originated the message from the base layer' :
+                  'The hash of the transaction that completed the message on the base layer'
+                }
+              >
+                { data.arbitrum.contains_message === 'incoming' ? 'Originating L1 txn hash' : 'Completion L1 txn hash' }
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                { data.arbitrum.message_related_info.associated_l1_transaction ?
+                  <TxEntityL1 hash={ data.arbitrum.message_related_info.associated_l1_transaction }/> : (
+                    <HStack gap={ 2 }>
+                      <Text color="text_secondary">{ data.arbitrum.message_related_info.message_status }</Text>
+                      <Hint label={ MESSAGE_DESCRIPTIONS[data.arbitrum.message_related_info.message_status] }/>
+                    </HStack>
+                  )
+                }
+              </DetailsInfoItem.Value>
+            </>
+          ) }
+
+          { (data.blob_gas_used || data.max_fee_per_blob_gas || data.blob_gas_price) && (
+            <>
+              { data.blob_gas_used && data.blob_gas_price && (
+                <>
+                  <DetailsInfoItem.Label
+                    hint="Blob fee for this transaction"
+                  >
+                    Blob fee
+                  </DetailsInfoItem.Label>
+                  <DetailsInfoItem.Value>
+                    <CurrencyValue
+                      value={ BigNumber(data.blob_gas_used).multipliedBy(data.blob_gas_price).toString() }
+                      currency={ config.UI.views.tx.hiddenFields?.fee_currency ? '' : currencyUnits.ether }
+                      exchangeRate={ data.exchange_rate }
+                      flexWrap="wrap"
+                      isLoading={ isLoading }
+                    />
+                  </DetailsInfoItem.Value>
+                </>
+              ) }
+
+              { data.blob_gas_used && (
+                <>
+                  <DetailsInfoItem.Label
+                    hint="Amount of gas used by the blobs in this transaction"
+                  >
+                    Blob gas usage
+                  </DetailsInfoItem.Label>
+                  <DetailsInfoItem.Value>
+                    { BigNumber(data.blob_gas_used).toFormat() }
+                  </DetailsInfoItem.Value>
+                </>
+              ) }
+
+              { (data.max_fee_per_blob_gas || data.blob_gas_price) && (
+                <>
+                  <DetailsInfoItem.Label
+                    hint={ `Amount of ${ currencyUnits.ether } used for blobs in this transaction` }
+                  >
+                    { `Blob gas fees (${ currencyUnits.gwei })` }
+                  </DetailsInfoItem.Label>
+                  <DetailsInfoItem.Value>
+                    { data.blob_gas_price && (
+                      <Text fontWeight="600" as="span">{ BigNumber(data.blob_gas_price).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
+                    ) }
+                    { (data.max_fee_per_blob_gas && data.blob_gas_price) && <TextSeparator/> }
+                    { data.max_fee_per_blob_gas && (
+                      <>
+                        <Text as="span" fontWeight="500" whiteSpace="pre">Max: </Text>
+                        <Text fontWeight="600" as="span">{ BigNumber(data.max_fee_per_blob_gas).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
+                      </>
+                    ) }
+                  </DetailsInfoItem.Value>
+                </>
+              ) }
+              <DetailsInfoItemDivider/>
+            </>
+          ) }
+
+          <TxDetailsOther nonce={ data.nonce } type={ data.type } position={ data.position } queueIndex={ data.scroll?.queue_index }/>
+
+          <DetailsInfoItem.Label
             hint="Binary data included with the transaction. See logs tab for additional info"
           >
-            <RawInputData hex={ data.raw_input }/>
-          </DetailsInfoItem>
+            Raw input
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <RawInputData hex={ data.raw_input } defaultDataType={ data.zilliqa?.is_scilla ? 'UTF-8' : 'Hex' }/>
+          </DetailsInfoItem.Value>
+
           { data.decoded_input && (
-            <DetailsInfoItem
-              title="Decoded input data"
-              hint="Decoded input data"
-            >
-              <LogDecodedInputData data={ data.decoded_input }/>
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="Decoded input data"
+              >
+                Decoded input data
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <LogDecodedInputData data={ data.decoded_input }/>
+              </DetailsInfoItem.Value>
+            </>
           ) }
+
+          { data.zksync && <ZkSyncL2TxnBatchHashesInfo data={ data.zksync } isLoading={ isLoading }/> }
         </>
       ) }
     </Grid>
diff --git a/ui/tx/details/TxInfoScrollFees.tsx b/ui/tx/details/TxInfoScrollFees.tsx
new file mode 100644
index 0000000000..95c792a504
--- /dev/null
+++ b/ui/tx/details/TxInfoScrollFees.tsx
@@ -0,0 +1,153 @@
+import { Skeleton, Text } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { Transaction } from 'types/api/transaction';
+
+import { WEI_IN_GWEI } from 'lib/consts';
+import { currencyUnits } from 'lib/units';
+import CurrencyValue from 'ui/shared/CurrencyValue';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import TextSeparator from 'ui/shared/TextSeparator';
+
+type Props = {
+  data: Transaction;
+  isLoading: boolean;
+};
+
+export const TxInfoScrollFees = ({ data, isLoading }: Props) => {
+  return (
+    <>
+      { data.scroll?.l1_fee !== undefined && (
+        <>
+          <DetailsInfoItem.Label
+
+            hint="L1 fee that pays for rollup costs."
+            isLoading={ isLoading }
+          >
+            L1 data fee
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <CurrencyValue
+              value={ data.scroll?.l1_fee }
+              currency={ currencyUnits.ether }
+              exchangeRate={ data.exchange_rate }
+              flexWrap="wrap"
+            />
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { data.scroll?.l2_fee !== undefined && (
+        <>
+          <DetailsInfoItem.Label
+            hint="L2 execution fee"
+            isLoading={ isLoading }
+          >
+            Execution fee
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <CurrencyValue
+              value={ data.scroll?.l2_fee.value }
+              currency={ currencyUnits.ether }
+              exchangeRate={ data.exchange_rate }
+              flexWrap="wrap"
+            />
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { data.scroll?.l1_fee_commit_scalar !== undefined && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Commitment scalar"
+            isLoading={ isLoading }
+          >
+            L1 commit scalar
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <CurrencyValue
+              value={ data.scroll?.l1_fee_commit_scalar }
+              currency={ currencyUnits.ether }
+              exchangeRate={ data.exchange_rate }
+              flexWrap="wrap"
+            />
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { data.scroll?.l1_fee_overhead !== undefined && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Additional gas overhead of a data commitment transaction"
+            isLoading={ isLoading }
+          >
+            L1 Fee Overhead
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !isLoading }>
+              <CurrencyValue
+                value={ data.scroll?.l1_fee_overhead }
+                currency={ currencyUnits.ether }
+                exchangeRate={ data.exchange_rate }
+                flexWrap="wrap"
+              />
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+      { (data.scroll?.l1_base_fee !== undefined || data.scroll?.l1_fee_scalar !== undefined) && (
+        <>
+          <DetailsInfoItem.Label
+            hint="L1 gas fees"
+            isLoading={ isLoading }
+          >
+            L1 gas fees
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            { data.scroll?.l1_base_fee !== undefined && (
+              <Skeleton isLoaded={ !isLoading }>
+                <Text as="span" fontWeight="500">Base: </Text>
+                <Text fontWeight="600" as="span">{ BigNumber(data.scroll?.l1_base_fee || 0).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
+              </Skeleton>
+            ) }
+            { data.scroll?.l1_fee_scalar !== undefined && (
+              <Skeleton isLoaded={ !isLoading }>
+                <TextSeparator/>
+                <Text as="span" fontWeight="500">Scalar: </Text>
+                <Text fontWeight="600" as="span">{ BigNumber(data.scroll?.l1_fee_scalar || 0).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
+              </Skeleton>
+            ) }
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+      { (data.scroll?.l1_blob_base_fee !== undefined || data.scroll?.l1_fee_blob_scalar !== undefined) && (
+        <>
+          <DetailsInfoItem.Label
+            hint="L1 blob fees"
+            isLoading={ isLoading }
+          >
+            L1 blob fees
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            { data.scroll?.l1_blob_base_fee !== undefined && (
+              <Skeleton isLoaded={ !isLoading }>
+                <Text as="span" fontWeight="500">Base: </Text>
+                <Text fontWeight="600" as="span">{ BigNumber(data.scroll?.l1_blob_base_fee || 0).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
+              </Skeleton>
+            ) }
+            { data.scroll?.l1_fee_blob_scalar !== undefined && (
+              <Skeleton isLoaded={ !isLoading }>
+                <TextSeparator/>
+                <Text as="span" fontWeight="500">Scalar: </Text>
+                <Text fontWeight="600" as="span">{ BigNumber(data.scroll?.l1_fee_blob_scalar || 0).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
+              </Skeleton>
+            ) }
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+    </>
+  );
+};
+
+export default TxInfoScrollFees;
diff --git a/ui/tx/details/__screenshots__/TxDetailsWithdrawalStatus.pw.tsx_default_status-Ready-for-relay-1.png b/ui/tx/details/__screenshots__/TxDetailsWithdrawalStatus.pw.tsx_default_status-Ready-for-relay-1.png
index 32b575c41d..20a5174069 100644
Binary files a/ui/tx/details/__screenshots__/TxDetailsWithdrawalStatus.pw.tsx_default_status-Ready-for-relay-1.png and b/ui/tx/details/__screenshots__/TxDetailsWithdrawalStatus.pw.tsx_default_status-Ready-for-relay-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxDetailsWithdrawalStatus.pw.tsx_default_status-Relayed-1.png b/ui/tx/details/__screenshots__/TxDetailsWithdrawalStatus.pw.tsx_default_status-Relayed-1.png
index b18b962eed..d7cc9bd89c 100644
Binary files a/ui/tx/details/__screenshots__/TxDetailsWithdrawalStatus.pw.tsx_default_status-Relayed-1.png and b/ui/tx/details/__screenshots__/TxDetailsWithdrawalStatus.pw.tsx_default_status-Relayed-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxDetailsWithdrawalStatus.pw.tsx_default_status-Waiting-for-state-root-1.png b/ui/tx/details/__screenshots__/TxDetailsWithdrawalStatus.pw.tsx_default_status-Waiting-for-state-root-1.png
index 3e47297064..025fa3edf4 100644
Binary files a/ui/tx/details/__screenshots__/TxDetailsWithdrawalStatus.pw.tsx_default_status-Waiting-for-state-root-1.png and b/ui/tx/details/__screenshots__/TxDetailsWithdrawalStatus.pw.tsx_default_status-Waiting-for-state-root-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_between-addresses-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_between-addresses-mobile-dark-mode-1.png
index 91953a5e74..038e6e0ac9 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_between-addresses-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_between-addresses-mobile-dark-mode-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_with-actions-uniswap-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_with-actions-uniswap-mobile-dark-mode-1.png
index 8a71ebe581..c4d4ec1594 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_with-actions-uniswap-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_with-actions-uniswap-mobile-dark-mode-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_arbitrum-L1-status-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_arbitrum-L1-status-1.png
new file mode 100644
index 0000000000..01eed5c081
Binary files /dev/null and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_arbitrum-L1-status-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_between-addresses-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_between-addresses-mobile-dark-mode-1.png
index 1e3bee9a6c..d47d50239b 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_between-addresses-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_between-addresses-mobile-dark-mode-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_creating-contact-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_creating-contact-1.png
index 5fb55385df..3cd4151683 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_creating-contact-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_creating-contact-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_l2-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_l2-1.png
index e86df21951..358035323c 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_l2-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_l2-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_pending-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_pending-1.png
index 560ea1cf2e..9999b5a6ec 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_pending-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_pending-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_stability-customization-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_stability-customization-1.png
index 8dffcc2499..a4a31f14ed 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_stability-customization-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_stability-customization-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-actions-uniswap-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-actions-uniswap-mobile-dark-mode-1.png
index cef58d0109..a52eb50697 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-actions-uniswap-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-actions-uniswap-mobile-dark-mode-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-blob-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-blob-1.png
new file mode 100644
index 0000000000..734064b4b2
Binary files /dev/null and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-blob-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-raw-reason-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-raw-reason-1.png
index e95db83c7c..af058da8a9 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-raw-reason-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-raw-reason-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-revert-reason-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-revert-reason-1.png
index 6ad9c3e012..aad6b6a916 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-revert-reason-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-revert-reason-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-token-transfer-mobile-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-token-transfer-mobile-1.png
index 8014b2f1d1..0a92f0f875 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-token-transfer-mobile-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-token-transfer-mobile-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_without-testnet-warning-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_without-testnet-warning-1.png
index 736a3bcad7..d8b4f30004 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_without-testnet-warning-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_without-testnet-warning-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_between-addresses-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_between-addresses-mobile-dark-mode-1.png
index 0aadfa46a6..29113001c5 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_between-addresses-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_between-addresses-mobile-dark-mode-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-actions-uniswap-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-actions-uniswap-mobile-dark-mode-1.png
index 647188a354..15aade0716 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-actions-uniswap-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-actions-uniswap-mobile-dark-mode-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-token-transfer-mobile-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-token-transfer-mobile-1.png
index 33174dcbdb..6571463257 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-token-transfer-mobile-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-token-transfer-mobile-1.png differ
diff --git a/ui/tx/details/txDetailsActions/TxDetailsAction.tsx b/ui/tx/details/txDetailsActions/TxDetailsAction.tsx
index 0c53d1570d..4189133a5a 100644
--- a/ui/tx/details/txDetailsActions/TxDetailsAction.tsx
+++ b/ui/tx/details/txDetailsActions/TxDetailsAction.tsx
@@ -41,14 +41,14 @@ const TxDetailsAction = ({ action }: Props) => {
       const token0 = {
         address: data.symbol0 === 'Ether' ? '' : data.address0,
         name: data.symbol0 === 'Ether' ? config.chain.currency.symbol || null : data.symbol0,
-        type: 'ERC-20',
+        type: 'ERC-20' as const,
         symbol: null,
         icon_url: null,
       };
       const token1 = {
         address: data.symbol1 === 'Ether' ? '' : data.address1,
         name: data.symbol1 === 'Ether' ? config.chain.currency.symbol || null : data.symbol1,
-        type: 'ERC-20',
+        type: 'ERC-20' as const,
         symbol: null,
         icon_url: null,
       };
@@ -99,7 +99,7 @@ const TxDetailsAction = ({ action }: Props) => {
       const token = {
         address: data.address,
         name: data.name,
-        type: 'ERC-20',
+        type: 'ERC-20' as const,
         symbol: null,
         icon_url: null,
       };
@@ -133,7 +133,7 @@ const TxDetailsAction = ({ action }: Props) => {
                   <Flex key={ data.address + id } whiteSpace="pre-wrap" columnGap={ 2 }>
                     <chakra.span flexShrink={ 0 }>1</chakra.span>
                     <chakra.span color="text_secondary" flexShrink={ 0 }>of token ID</chakra.span>
-                    <NftEntity hash={ data.address } id={ id } w="min-content" iconSize="md"/>
+                    <NftEntity hash={ data.address } id={ id } w="min-content" icon={{ size: 'md' }}/>
                   </Flex>
                 );
               })
diff --git a/ui/tx/details/txDetailsActions/TxDetailsActions.tsx b/ui/tx/details/txDetailsActions/TxDetailsActions.tsx
index fc0622e2af..63382d5537 100644
--- a/ui/tx/details/txDetailsActions/TxDetailsActions.tsx
+++ b/ui/tx/details/txDetailsActions/TxDetailsActions.tsx
@@ -10,7 +10,7 @@ type Props = {
   isTxDataLoading: boolean;
   actions?: Array<TxAction>;
   hash?: string;
-}
+};
 
 const TxDetailsActions = ({ isTxDataLoading, actions, hash }: Props) => {
   if (config.features.txInterpretation.isEnabled) {
diff --git a/ui/tx/details/txDetailsActions/TxDetailsActionsInterpretation.tsx b/ui/tx/details/txDetailsActions/TxDetailsActionsInterpretation.tsx
index ade6ac072a..00e7401d84 100644
--- a/ui/tx/details/txDetailsActions/TxDetailsActionsInterpretation.tsx
+++ b/ui/tx/details/txDetailsActions/TxDetailsActionsInterpretation.tsx
@@ -2,10 +2,9 @@ import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import { TX_INTERPRETATION } from 'stubs/txInterpretation';
+import DetailsActionsWrapper from 'ui/shared/DetailsActionsWrapper';
 import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
-import TxInterpretation from 'ui/tx/interpretation/TxInterpretation';
-
-import TxDetailsActionsWrapper from './TxDetailsActionsWrapper';
+import TxInterpretation from 'ui/shared/tx/interpretation/TxInterpretation';
 
 interface Props {
   hash?: string;
@@ -30,7 +29,7 @@ const TxDetailsActionsInterpretation = ({ hash, isTxDataLoading }: Props) => {
 
   return (
     <>
-      <TxDetailsActionsWrapper isLoading={ isTxDataLoading || txInterpretationQuery.isPlaceholderData }>
+      <DetailsActionsWrapper isLoading={ isTxDataLoading || txInterpretationQuery.isPlaceholderData } type="tx">
         { actions.map((action, index: number) => (
           <TxInterpretation
             key={ index }
@@ -39,7 +38,7 @@ const TxDetailsActionsInterpretation = ({ hash, isTxDataLoading }: Props) => {
           />
         ),
         ) }
-      </TxDetailsActionsWrapper>
+      </DetailsActionsWrapper>
       <DetailsInfoItemDivider/>
     </>
   );
diff --git a/ui/tx/details/txDetailsActions/TxDetailsActionsRaw.tsx b/ui/tx/details/txDetailsActions/TxDetailsActionsRaw.tsx
index a024347519..b2afdb2043 100644
--- a/ui/tx/details/txDetailsActions/TxDetailsActionsRaw.tsx
+++ b/ui/tx/details/txDetailsActions/TxDetailsActionsRaw.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 
 import type { TxAction } from 'types/api/txAction';
 
+import DetailsActionsWrapper from 'ui/shared/DetailsActionsWrapper';
 import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
 
 import TxDetailsAction from './TxDetailsAction';
-import TxDetailsActionsWrapper from './TxDetailsActionsWrapper';
 
 interface Props {
   actions: Array<TxAction>;
@@ -15,9 +15,9 @@ interface Props {
 const TxDetailsActionsRaw = ({ actions, isLoading }: Props) => {
   return (
     <>
-      <TxDetailsActionsWrapper isLoading={ isLoading }>
+      <DetailsActionsWrapper isLoading={ isLoading } type="tx">
         { actions.map((action, index: number) => <TxDetailsAction key={ index } action={ action }/>) }
-      </TxDetailsActionsWrapper>
+      </DetailsActionsWrapper>
       <DetailsInfoItemDivider/>
     </>
   );
diff --git a/ui/tx/details/txDetailsActions/TxDetailsActionsWrapper.tsx b/ui/tx/details/txDetailsActions/TxDetailsActionsWrapper.tsx
deleted file mode 100644
index c9e963e803..0000000000
--- a/ui/tx/details/txDetailsActions/TxDetailsActionsWrapper.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Flex, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
-
-const SCROLL_GRADIENT_HEIGHT = 48;
-
-type Props = {
-  children: React.ReactNode;
-  isLoading?: boolean;
-}
-
-export const TX_ACTIONS_BLOCK_ID = 'tx-actions';
-
-const TxDetailsActions = ({ children, isLoading }: Props) => {
-  const containerRef = React.useRef<HTMLDivElement>(null);
-  const [ hasScroll, setHasScroll ] = React.useState(false);
-
-  const gradientStartColor = useColorModeValue('whiteAlpha.600', 'blackAlpha.600');
-  const gradientEndColor = useColorModeValue('whiteAlpha.900', 'blackAlpha.900');
-
-  React.useEffect(() => {
-    if (!containerRef.current) {
-      return;
-    }
-
-    setHasScroll(containerRef.current.scrollHeight >= containerRef.current.clientHeight + SCROLL_GRADIENT_HEIGHT / 2);
-  }, []);
-
-  return (
-    <DetailsInfoItem
-      title="Transaction action"
-      hint="Highlighted events of the transaction"
-      note={ hasScroll ? 'Scroll to see more' : undefined }
-      position="relative"
-      isLoading={ isLoading }
-    >
-      <Flex
-        id={ TX_ACTIONS_BLOCK_ID }
-        flexDirection="column"
-        alignItems="stretch"
-        rowGap={ 5 }
-        w="100%"
-        maxH="200px"
-        overflowY="scroll"
-        ref={ containerRef }
-        _after={ hasScroll ? {
-          position: 'absolute',
-          content: '""',
-          bottom: 0,
-          left: 0,
-          right: '20px',
-          height: `${ SCROLL_GRADIENT_HEIGHT }px`,
-          bgGradient: `linear(to-b, ${ gradientStartColor } 37.5%, ${ gradientEndColor } 77.5%)`,
-        } : undefined }
-        pr={ hasScroll ? 5 : 0 }
-        pb={ hasScroll ? 10 : 0 }
-      >
-        { children }
-      </Flex>
-    </DetailsInfoItem>
-  );
-};
-
-export default React.memo(TxDetailsActions);
diff --git a/ui/tx/internals/TxInternalsList.tsx b/ui/tx/internals/TxInternalsList.tsx
index 089c8bf32b..b057015525 100644
--- a/ui/tx/internals/TxInternalsList.tsx
+++ b/ui/tx/internals/TxInternalsList.tsx
@@ -1,26 +1,14 @@
-import { Box } from "@chakra-ui/react";
-import React from "react";
+import { Box } from '@chakra-ui/react';
+import React from 'react';
 
-import type { InternalTransaction } from "types/api/internalTransaction";
+import type { InternalTransaction } from 'types/api/internalTransaction';
 
-import TxInternalsListItem from "ui/tx/internals/TxInternalsListItem";
+import TxInternalsListItem from 'ui/tx/internals/TxInternalsListItem';
 
-const TxInternalsList = ({
-  data,
-  isLoading,
-}: {
-  data: Array<InternalTransaction>;
-  isLoading?: boolean;
-}) => {
+const TxInternalsList = ({ data, isLoading }: { data: Array<InternalTransaction>; isLoading?: boolean }) => {
   return (
     <Box>
-      { data.map((item, index) => (
-        <TxInternalsListItem
-          key={ item.transaction_hash + index }
-          { ...item }
-          isLoading={ isLoading }
-        />
-      )) }
+      { data.map((item, index) => <TxInternalsListItem key={ item.index.toString() + (isLoading ? index : '') } { ...item } isLoading={ isLoading }/>) }
     </Box>
   );
 };
diff --git a/ui/tx/internals/TxInternalsTable.tsx b/ui/tx/internals/TxInternalsTable.tsx
index b87dc5315e..2125bec898 100644
--- a/ui/tx/internals/TxInternalsTable.tsx
+++ b/ui/tx/internals/TxInternalsTable.tsx
@@ -23,7 +23,7 @@ const TxInternalsTable = ({ data, sort, onSortToggle, top, isLoading }: Props) =
 
   return (
     <AddressHighlightProvider>
-      <Table variant="simple" size="sm">
+      <Table>
         <Thead top={ top }>
           <Tr>
             <Th width="28%">Type</Th>
@@ -44,7 +44,7 @@ const TxInternalsTable = ({ data, sort, onSortToggle, top, isLoading }: Props) =
         </Thead>
         <Tbody>
           { data.map((item, index) => (
-            <TxInternalsTableItem key={ item.transaction_hash + (index) } { ...item } isLoading={ isLoading }/>
+            <TxInternalsTableItem key={ item.index.toString() + (isLoading ? index : '') } { ...item } isLoading={ isLoading }/>
           )) }
         </Tbody>
       </Table>
diff --git a/ui/tx/internals/TxInternalsTableItem.tsx b/ui/tx/internals/TxInternalsTableItem.tsx
index b344b81147..bbf16ebbf9 100644
--- a/ui/tx/internals/TxInternalsTableItem.tsx
+++ b/ui/tx/internals/TxInternalsTableItem.tsx
@@ -12,7 +12,7 @@ import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
 type Props = InternalTransaction & {
   isLoading?: boolean;
-}
+};
 
 const TxInternalTableItem = ({ type, from, to, value, success, error, gas_limit: gasLimit, created_contract: createdContract, isLoading }: Props) => {
   const typeTitle = TX_INTERNALS_ITEMS.find(({ id }) => id === type)?.title;
diff --git a/ui/tx/interpretation/TxInterpretation.tsx b/ui/tx/interpretation/TxInterpretation.tsx
deleted file mode 100644
index 633218323a..0000000000
--- a/ui/tx/interpretation/TxInterpretation.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { Skeleton, Flex, Text, chakra } from '@chakra-ui/react';
-import BigNumber from 'bignumber.js';
-import React from 'react';
-
-import type { TxInterpretationSummary, TxInterpretationVariable } from 'types/api/txInterpretation';
-
-import dayjs from 'lib/date/dayjs';
-import * as mixpanel from 'lib/mixpanel/index';
-import { currencyUnits } from 'lib/units';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import TokenEntity from 'ui/shared/entities/token/TokenEntity';
-import IconSvg from 'ui/shared/IconSvg';
-
-import { extractVariables, getStringChunks, NATIVE_COIN_SYMBOL_VAR_NAME } from './utils';
-
-type Props = {
-  summary?: TxInterpretationSummary;
-  isLoading?: boolean;
-  className?: string;
-}
-
-const TxInterpretationElementByType = ({ variable }: { variable?: TxInterpretationVariable }) => {
-  const onAddressClick = React.useCallback(() => {
-    mixpanel.logEvent(mixpanel.EventTypes.TX_INTERPRETATION_INTERACTION, { Type: 'Address click' });
-  }, []);
-
-  const onTokenClick = React.useCallback(() => {
-    mixpanel.logEvent(mixpanel.EventTypes.TX_INTERPRETATION_INTERACTION, { Type: 'Token click' });
-  }, []);
-
-  if (!variable) {
-    return null;
-  }
-
-  const { type, value } = variable;
-  switch (type) {
-    case 'address': {
-      return (
-        <AddressEntity
-          address={ value }
-          truncation="constant"
-          sx={{ ':not(:first-child)': { marginLeft: 1 } }}
-          whiteSpace="initial"
-          onClick={ onAddressClick }
-        />
-      );
-    }
-    case 'token':
-      return (
-        <TokenEntity
-          token={ value }
-          onlySymbol
-          noCopy
-          width="fit-content"
-          sx={{ ':not(:first-child)': { marginLeft: 1 } }}
-          mr={ 2 }
-          whiteSpace="initial"
-          onClick={ onTokenClick }
-        />
-      );
-    case 'currency': {
-      let numberString = '';
-      if (BigNumber(value).isLessThan(0.1)) {
-        numberString = BigNumber(value).toPrecision(2);
-      } else if (BigNumber(value).isLessThan(10000)) {
-        numberString = BigNumber(value).dp(2).toFormat();
-      } else if (BigNumber(value).isLessThan(1000000)) {
-        numberString = BigNumber(value).dividedBy(1000).toFormat(2) + 'K';
-      } else {
-        numberString = BigNumber(value).dividedBy(1000000).toFormat(2) + 'M';
-      }
-      return <Text>{ numberString + ' ' }</Text>;
-    }
-    case 'timestamp':
-      // timestamp is in unix format
-      return <Text color="text_secondary">{ dayjs(Number(value) * 1000).format('llll') + ' ' }</Text>;
-    case 'string':
-    default: {
-      return <Text color="text_secondary">{ value.toString() + ' ' }</Text>;
-    }
-  }
-};
-
-const TxInterpretation = ({ summary, isLoading, className }: Props) => {
-  if (!summary) {
-    return null;
-  }
-
-  const template = summary.summary_template;
-  const variables = summary.summary_template_variables;
-
-  const variablesNames = extractVariables(template);
-
-  const chunks = getStringChunks(template);
-
-  return (
-    <Skeleton display="flex" flexWrap="wrap" alignItems="center" isLoaded={ !isLoading } className={ className }>
-      <IconSvg name="lightning" boxSize={ 5 } color="text_secondary" mr={ 2 }/>
-      { chunks.map((chunk, index) => {
-        return (
-          <Flex whiteSpace="pre" key={ chunk + index } fontWeight={ 500 }>
-            <Text color="text_secondary">{ chunk.trim() + (chunk.trim() && variablesNames[index] ? ' ' : '') }</Text>
-            { index < variablesNames.length && (
-              variablesNames[index] === NATIVE_COIN_SYMBOL_VAR_NAME ?
-                <Text>{ currencyUnits.ether + ' ' }</Text> :
-                <TxInterpretationElementByType variable={ variables[variablesNames[index]] }/>
-            ) }
-          </Flex>
-        );
-      }) }
-    </Skeleton>
-  );
-};
-
-export default chakra(TxInterpretation);
diff --git a/ui/tx/interpretation/utils.test.ts b/ui/tx/interpretation/utils.test.ts
deleted file mode 100644
index c3089594b7..0000000000
--- a/ui/tx/interpretation/utils.test.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { extractVariables, getStringChunks } from './utils';
-
-const template = '{action_type} {source_amount} {native} into {destination_amount} {destination_token}';
-
-it('extracts variables names', () => {
-  const result = extractVariables(template);
-  expect(result).toEqual([ 'action_type', 'source_amount', 'native', 'destination_amount', 'destination_token' ]);
-});
-
-it('split string without capturing variables', () => {
-  const result = getStringChunks(template);
-  expect(result).toEqual([ '', ' ', ' ', ' into ', ' ', '' ]);
-});
diff --git a/ui/tx/interpretation/utils.ts b/ui/tx/interpretation/utils.ts
deleted file mode 100644
index c6ffbb6e42..0000000000
--- a/ui/tx/interpretation/utils.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// we use that regex as a separator when splitting template and dont want to capture variables
-// eslint-disable-next-line regexp/no-useless-non-capturing-group
-export const VAR_REGEXP = /\{(?:[^}]+)\}/g;
-
-export const NATIVE_COIN_SYMBOL_VAR_NAME = 'native';
-
-export function extractVariables(templateString: string) {
-
-  const matches = templateString.match(VAR_REGEXP);
-
-  const variablesNames = matches ? matches.map(match => match.slice(1, -1)) : [];
-
-  return variablesNames;
-}
-
-export function getStringChunks(template: string) {
-  return template.split(VAR_REGEXP);
-}
diff --git a/ui/tx/state/TxStateListItem.tsx b/ui/tx/state/TxStateListItem.tsx
index c752a2b840..2dbc3c5e23 100644
--- a/ui/tx/state/TxStateListItem.tsx
+++ b/ui/tx/state/TxStateListItem.tsx
@@ -24,6 +24,7 @@ const TxStateListItem = ({ data, isLoading }: Props) => {
         <AddressEntity
           address={ data.address }
           isLoading={ isLoading }
+          truncation="constant"
         />
         { tag }
       </ListItemMobileGrid.Value>
diff --git a/ui/tx/state/TxStateTable.tsx b/ui/tx/state/TxStateTable.tsx
index 216648830c..b21efb10cf 100644
--- a/ui/tx/state/TxStateTable.tsx
+++ b/ui/tx/state/TxStateTable.tsx
@@ -21,7 +21,7 @@ interface Props {
 const TxStateTable = ({ data, isLoading, top }: Props) => {
   return (
     <AddressHighlightProvider>
-      <Table variant="simple" minWidth="1000px" size="sm" w="100%">
+      <Table minWidth="1000px" w="100%">
         <Thead top={ top }>
           <Tr>
             <Th width="140px">Type</Th>
diff --git a/ui/tx/state/TxStateTableItem.tsx b/ui/tx/state/TxStateTableItem.tsx
index 7c885a4f5e..a963242429 100644
--- a/ui/tx/state/TxStateTableItem.tsx
+++ b/ui/tx/state/TxStateTableItem.tsx
@@ -28,7 +28,7 @@ const TxStateTableItem = ({ data, isLoading }: Props) => {
           isLoading={ isLoading }
           truncation="constant"
           my="7px"
-          w="min-content"
+          w="100%"
         />
       </Td>
       <Td isNumeric><Box py="7px">{ before }</Box></Td>
diff --git a/ui/tx/state/TxStateTokenIdList.tsx b/ui/tx/state/TxStateTokenIdList.tsx
index e04d496532..a37a1e1966 100644
--- a/ui/tx/state/TxStateTokenIdList.tsx
+++ b/ui/tx/state/TxStateTokenIdList.tsx
@@ -1,10 +1,10 @@
-import { Flex, Link, useBoolean } from '@chakra-ui/react';
+import { Flex, Text, Link, useBoolean } from '@chakra-ui/react';
 import React from 'react';
 
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 
 interface Props {
-  items: Array<{total: { token_id: string} }>;
+  items: Array<{ total: { token_id: string | null } }>;
   tokenAddress: string;
   isLoading?: boolean;
 }
@@ -14,14 +14,20 @@ const TxStateTokenIdList = ({ items, tokenAddress, isLoading }: Props) => {
 
   return (
     <Flex flexDir="column" rowGap={ 2 }>
-      { items.slice(0, isCut ? 3 : items.length).map((item, index) => (
-        <NftEntity
-          key={ index }
-          hash={ tokenAddress }
-          id={ item.total.token_id }
-          isLoading={ isLoading }
-        />
-      )) }
+      { items.slice(0, isCut ? 3 : items.length).map((item, index) => {
+        if (item.total.token_id !== null) {
+          return (
+            <NftEntity
+              key={ index }
+              hash={ tokenAddress }
+              id={ item.total.token_id }
+              isLoading={ isLoading }
+            />
+          );
+        } else {
+          return <Text key={ index } color="text_secondary">N/A</Text>;
+        }
+      }) }
       { items.length > 3 && (
         <Link
           fontWeight={ 400 }
diff --git a/ui/tx/state/utils.tsx b/ui/tx/state/utils.tsx
index 604574c329..8a3d39e3e6 100644
--- a/ui/tx/state/utils.tsx
+++ b/ui/tx/state/utils.tsx
@@ -105,7 +105,7 @@ export function getStateElements(data: TxStateChange, isLoading?: boolean) {
         const changeSign = differenceBn.isGreaterThanOrEqualTo(0) ? '+' : '-';
 
         return (
-          <Skeleton isLoaded={ !isLoading } display="inline-block" color={ changeColor }>
+          <Skeleton isLoaded={ !isLoading } display="inline-block" color={ changeColor } wordBreak="break-all">
             <span>{ changeSign }{ nbsp }{ differenceBn.abs().toFormat() }</span>
           </Skeleton>
         );
@@ -132,14 +132,14 @@ export function getStateElements(data: TxStateChange, isLoading?: boolean) {
       return {
         before: data.balance_before ? (
           <Flex whiteSpace="pre-wrap" justifyContent={{ base: 'flex-start', lg: 'flex-end' }} flexWrap="wrap">
-            <Skeleton isLoaded={ !isLoading }>{ beforeBn.toFormat() }</Skeleton>
+            <Skeleton isLoaded={ !isLoading } wordBreak="break-all">{ beforeBn.toFormat() }</Skeleton>
             <span>{ space }</span>
             { tokenLink }
           </Flex>
         ) : null,
         after: data.balance_after ? (
           <Flex whiteSpace="pre-wrap" justifyContent={{ base: 'flex-start', lg: 'flex-end' }} flexWrap="wrap">
-            <Skeleton isLoaded={ !isLoading }>{ afterBn.toFormat() }</Skeleton>
+            <Skeleton isLoaded={ !isLoading } wordBreak="break-all">{ afterBn.toFormat() }</Skeleton>
             <span>{ space }</span>
             { tokenLink }
           </Flex>
diff --git a/ui/tx/useTxQuery.tsx b/ui/tx/useTxQuery.tsx
index 108c40e669..3bb4c21f77 100644
--- a/ui/tx/useTxQuery.tsx
+++ b/ui/tx/useTxQuery.tsx
@@ -18,6 +18,8 @@ import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import { TX, TX_ZKEVM_L2 } from 'stubs/tx';
 
+const rollupFeature = config.features.rollup;
+
 export type TxQuery = UseQueryResult<Transaction, ResourceError<{ status: number }>> & {
   socketStatus: 'close' | 'error' | undefined;
   setRefetchOnError: {
@@ -25,7 +27,7 @@ export type TxQuery = UseQueryResult<Transaction, ResourceError<{ status: number
     off: () => void;
     toggle: () => void;
   };
-}
+};
 
 interface Params {
   hash?: string;
@@ -46,7 +48,7 @@ export default function useTxQuery(params?: Params): TxQuery {
     queryOptions: {
       enabled: Boolean(hash) && params?.isEnabled !== false,
       refetchOnMount: false,
-      placeholderData: config.features.zkEvmRollup.isEnabled ? TX_ZKEVM_L2 : TX,
+      placeholderData: rollupFeature.isEnabled && rollupFeature.type === 'zkEvm' ? TX_ZKEVM_L2 : TX,
       retry: (failureCount, error) => {
         if (isRefetchEnabled) {
           return false;
diff --git a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetails.tsx b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetails.tsx
new file mode 100644
index 0000000000..230fe84705
--- /dev/null
+++ b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetails.tsx
@@ -0,0 +1,235 @@
+import { Grid, GridItem, Link, Skeleton } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+import React from 'react';
+import { scroller, Element } from 'react-scroll';
+
+import type { ArbitrumL2TxnBatch } from 'types/api/arbitrumL2';
+
+import { route } from 'nextjs-routes';
+
+import type { ResourceError } from 'lib/api/resources';
+import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
+import ArbitrumL2TxnBatchDA from 'ui/shared/batch/ArbitrumL2TxnBatchDA';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import PrevNext from 'ui/shared/PrevNext';
+
+import ArbitrumL2TxnBatchDetailsDA from './ArbitrumL2TxnBatchDetailsDA';
+interface Props {
+  query: UseQueryResult<ArbitrumL2TxnBatch, ResourceError>;
+}
+
+const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
+  const router = useRouter();
+  const [ isExpanded, setIsExpanded ] = React.useState(false);
+
+  const handleCutClick = React.useCallback(() => {
+    setIsExpanded((flag) => !flag);
+    scroller.scrollTo('BatchDetails__cutLink', {
+      duration: 500,
+      smooth: true,
+    });
+  }, []);
+
+  const { data, isPlaceholderData, isError, error } = query;
+
+  const handlePrevNextClick = React.useCallback((direction: 'prev' | 'next') => {
+    if (!data) {
+      return;
+    }
+
+    const increment = direction === 'next' ? +1 : -1;
+    const nextId = String(data.number + increment);
+
+    router.push({ pathname: '/batches/[number]', query: { number: nextId } }, undefined);
+  }, [ data, router ]);
+
+  if (isError) {
+    if (isCustomAppError(error)) {
+      throwOnResourceLoadError({ isError, error });
+    }
+
+    return <DataFetchAlert/>;
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  const blocksCount = data.end_block - data.start_block + 1;
+
+  return (
+    <Grid
+      columnGap={ 8 }
+      rowGap={{ base: 3, lg: 3 }}
+      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
+      overflow="hidden"
+    >
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Batch number indicates the length of batches produced by grouping L2 blocks to be proven on L1"
+      >
+        Txn batch number
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          { data.number }
+        </Skeleton>
+        <PrevNext
+          ml={ 6 }
+          onClick={ handlePrevNextClick }
+          prevLabel="View previous txn batch"
+          nextLabel="View next txn batch"
+          isPrevDisabled={ data.number === 0 }
+          isLoading={ isPlaceholderData }
+        />
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Date and time at which batch is submitted to L1"
+      >
+        Timestamp
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        { data.commitment_transaction.timestamp ?
+          <DetailsTimestamp timestamp={ data.commitment_transaction.timestamp }isLoading={ isPlaceholderData }/> :
+          'Undefined'
+        }
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Number of transactions in this batch"
+      >
+        Transactions
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
+            { data.transactions_count.toLocaleString() } transaction{ data.transactions_count === 1 ? '' : 's' }
+          </LinkInternal>
+        </Skeleton>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Number of L2 blocks in this batch"
+      >
+        Blocks
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'blocks' } }) }>
+            { blocksCount.toLocaleString() } block{ blocksCount === 1 ? '' : 's' }
+          </LinkInternal>
+        </Skeleton>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Hash of L1 transaction in which transactions was committed"
+      >
+        L1 transaction hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <TxEntityL1
+          isLoading={ isPlaceholderData }
+          hash={ data.commitment_transaction.hash }
+          maxW="100%"
+        />
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Heigh of L1 block which includes L1 transactions"
+      >
+        L1 block
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <BlockEntityL1
+          isLoading={ isPlaceholderData }
+          number={ data.commitment_transaction.block_number }
+        />
+      </DetailsInfoItem.Value>
+
+      { data.data_availability.batch_data_container && (
+        <>
+          <DetailsInfoItem.Label
+            isLoading={ isPlaceholderData }
+            hint="Where the batch data is stored"
+          >
+            Batch data container
+          </DetailsInfoItem.Label><DetailsInfoItem.Value>
+            <ArbitrumL2TxnBatchDA dataContainer={ data.data_availability.batch_data_container } isLoading={ isPlaceholderData }/>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="The hash of the state before the batch"
+      >
+        Before acc
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
+          <HashStringShortenDynamic hash={ data.before_acc }/>
+          <CopyToClipboard text={ data.before_acc }/>
+        </Skeleton>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="The hash of the state after the batch"
+      >
+        After acc
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
+          <HashStringShortenDynamic hash={ data.after_acc }/>
+          <CopyToClipboard text={ data.after_acc }/>
+        </Skeleton>
+      </DetailsInfoItem.Value>
+
+      { data.data_availability.batch_data_container === 'in_anytrust' && (
+        <>
+          { /* CUT */ }
+          <GridItem colSpan={{ base: undefined, lg: 2 }}>
+            <Element name="BatchDetails__cutLink">
+              <Skeleton isLoaded={ !isPlaceholderData } mt={ 6 } display="inline-block">
+                <Link
+                  fontSize="sm"
+                  textDecorationLine="underline"
+                  textDecorationStyle="dashed"
+                  onClick={ handleCutClick }
+                >
+                  { isExpanded ? 'Hide data availability info' : 'Show data availability info' }
+                </Link>
+              </Skeleton>
+            </Element>
+          </GridItem>
+
+          { /* ADDITIONAL INFO */ }
+          { isExpanded && !isPlaceholderData && (
+            <>
+              <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
+
+              <ArbitrumL2TxnBatchDetailsDA dataAvailability={ data.data_availability }/>
+            </>
+          ) }
+        </>
+      ) }
+    </Grid>
+  );
+};
+
+export default ArbitrumL2TxnBatchDetails;
diff --git a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetailsDA.tsx b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetailsDA.tsx
new file mode 100644
index 0000000000..2f1c712c31
--- /dev/null
+++ b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetailsDA.tsx
@@ -0,0 +1,122 @@
+import { Grid, Text, Flex, Box, useColorModeValue, Show, Hide, VStack } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ArbitrumL2TxnBatchDAAnytrust } from 'types/api/arbitrumL2';
+
+import dayjs from 'lib/date/dayjs';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
+import HashStringShorten from 'ui/shared/HashStringShorten';
+import IconSvg from 'ui/shared/IconSvg';
+import TextSeparator from 'ui/shared/TextSeparator';
+
+type Props = {
+  dataAvailability: ArbitrumL2TxnBatchDAAnytrust;
+};
+
+const ArbitrumL2TxnBatchDetailsDA = ({ dataAvailability }: Props) => {
+  const signersBg = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  return (
+    <>
+      <DetailsInfoItem.Label
+        hint="Aggregated BLS signature of AnyTrust committee members"
+      >
+        Signature
+      </DetailsInfoItem.Label><DetailsInfoItem.Value wordBreak="break-all" whiteSpace="break-spaces">
+        { dataAvailability.bls_signature }
+      </DetailsInfoItem.Value><DetailsInfoItem.Label
+        hint="The hash of the data blob stored by the AnyTrust committee"
+      >
+        Data hash
+      </DetailsInfoItem.Label><DetailsInfoItem.Value>
+        { dataAvailability.data_hash }
+        <CopyToClipboard text={ dataAvailability.data_hash } ml={ 2 }/>
+      </DetailsInfoItem.Value><DetailsInfoItem.Label
+        hint="Expiration timeout for the data blob"
+      >
+        Timeout
+      </DetailsInfoItem.Label><DetailsInfoItem.Value>
+        { dayjs(dataAvailability.timeout) < dayjs() ?
+          <DetailsTimestamp timestamp={ dataAvailability.timeout }/> :
+          (
+            <>
+              <Text>{ dayjs(dataAvailability.timeout).format('llll') }</Text>
+              <TextSeparator color="gray.500"/>
+              <Text color="red.500">{ dayjs(dataAvailability.timeout).diff(dayjs(), 'day') } days left</Text>
+            </>
+          ) }
+      </DetailsInfoItem.Value>
+      <DetailsInfoItem.Label
+        hint="Members of AnyTrust committee"
+      >
+        Signers
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value overflowX="scroll" fontSize="sm">
+        <Show above="lg" ssr={ false }>
+          <Grid
+            templateColumns="1fr auto auto"
+            gap={ 5 }
+            backgroundColor={ signersBg }
+            padding={ 4 }
+            borderRadius="md"
+            minW="600px"
+          >
+            <Text fontWeight={ 600 }>Key</Text>
+            <Text fontWeight={ 600 }>Trusted</Text>
+            <Text fontWeight={ 600 }>Proof</Text>
+            { dataAvailability.signers.map(signer => (
+              <>
+                <Flex justifyContent="space-between">
+                  <Text wordBreak="break-all" whiteSpace="break-spaces">{ signer.key }</Text>
+                  <CopyToClipboard text={ signer.key } ml={ 2 }/>
+                </Flex>
+                <Box justifySelf="center">
+                  { signer.trusted ? <IconSvg name="check" boxSize={ 6 }/> : <IconSvg name="cross" boxSize={ 6 }/> }
+                </Box>
+                { signer.proof ? (
+                  <Flex>
+                    <HashStringShorten hash={ signer.proof }/>
+                    <CopyToClipboard text={ signer.proof } ml={ 2 }/>
+                  </Flex>
+                ) : '-' }
+              </>
+            )) }
+          </Grid>
+        </Show>
+
+        <Hide above="lg" ssr={ false }>
+          <Box backgroundColor={ signersBg } borderRadius="md">
+            { dataAvailability.signers.map(signer => (
+              <VStack padding={ 4 } key={ signer.key } gap={ 2 }>
+                <Flex w="100%" justifyContent="space-between">
+                  <Text fontWeight={ 600 }>Key</Text>
+                  <CopyToClipboard text={ signer.key }/>
+                </Flex>
+                <Text wordBreak="break-all" whiteSpace="break-spaces">{ signer.key }</Text>
+                <Flex w="100%" alignItems="center">
+                  <Flex alignItems="center" w="50%">
+                    <Text fontWeight={ 600 } mr={ 2 }>Trusted</Text>
+                    { signer.trusted ? <IconSvg name="check" boxSize={ 6 }/> : <IconSvg name="cross" boxSize={ 6 }/> }
+                  </Flex>
+                  <Flex alignItems="center" w="50%">
+                    <Text fontWeight={ 600 } mr={ 2 }>Proof</Text>
+                    { signer.proof ? (
+                      <Flex>
+                        <HashStringShorten hash={ signer.proof }/>
+                        <CopyToClipboard text={ signer.proof } ml={ 2 }/>
+                      </Flex>
+                    ) : '-' }
+                  </Flex>
+                </Flex>
+              </VStack>
+            )) }
+          </Box>
+        </Hide>
+      </DetailsInfoItem.Value>
+    </>
+  );
+};
+
+export default ArbitrumL2TxnBatchDetailsDA;
diff --git a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesListItem.tsx b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesListItem.tsx
new file mode 100644
index 0000000000..21fc5fe04a
--- /dev/null
+++ b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesListItem.tsx
@@ -0,0 +1,108 @@
+import { Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import ArbitrumL2TxnBatchDA from 'ui/shared/batch/ArbitrumL2TxnBatchDA';
+import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import ArbitrumL2TxnBatchStatus from 'ui/shared/statusTag/ArbitrumL2TxnBatchStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: ArbitrumL2TxnBatchesItem; isLoading?: boolean };
+
+const ArbitrumL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'arbitrum') {
+    return null;
+  }
+
+  return (
+    <ListItemMobileGrid.Container gridTemplateColumns="110px auto">
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Batch #</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BatchEntityL2
+          isLoading={ isLoading }
+          number={ item.number }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 status</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <ArbitrumL2TxnBatchStatus status={ item.commitment_transaction.status } isLoading={ isLoading }/>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 block</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BlockEntityL1
+          number={ item.commitment_transaction.block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+        />
+      </ListItemMobileGrid.Value>
+
+      { item.blocks_count && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>Block count</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value>
+            <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.blocks_count.toLocaleString() }</Skeleton>
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 transaction</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TxEntityL1
+          hash={ item.commitment_transaction.hash }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TimeAgoWithTooltip
+          timestamp={ item.commitment_transaction.timestamp }
+          fallbackText="Undefined"
+          isLoading={ isLoading }
+          display="inline-block"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Txn count</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <LinkInternal
+          href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
+          isLoading={ isLoading }
+          fontWeight={ 600 }
+        >
+          <Skeleton isLoaded={ !isLoading } minW="40px">
+            { item.transactions_count.toLocaleString() }
+          </Skeleton>
+        </LinkInternal>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Data container</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <ArbitrumL2TxnBatchDA dataContainer={ item.batch_data_container } isLoading={ isLoading }/>
+      </ListItemMobileGrid.Value>
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default ArbitrumL2TxnBatchesListItem;
diff --git a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTable.tsx b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTable.tsx
new file mode 100644
index 0000000000..21eca55efa
--- /dev/null
+++ b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTable.tsx
@@ -0,0 +1,43 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import ArbitrumL2TxnBatchesTableItem from './ArbitrumL2TxnBatchesTableItem';
+
+type Props = {
+  items: Array<ArbitrumL2TxnBatchesItem>;
+  top: number;
+  isLoading?: boolean;
+};
+
+const ArbitrumL2TxnBatchesTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table minW="1000px" style={{ tableLayout: 'auto' }}>
+      <Thead top={ top }>
+        <Tr>
+          <Th>Batch #</Th>
+          <Th>L1 status</Th>
+          <Th>L1 block</Th>
+          <Th>Block count</Th>
+          <Th>L1 transaction</Th>
+          <Th>Age</Th>
+          <Th>Txn count</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <ArbitrumL2TxnBatchesTableItem
+            key={ item.number + (isLoading ? String(index) : '') }
+            item={ item }
+            isLoading={ isLoading }
+          />
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default ArbitrumL2TxnBatchesTable;
diff --git a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTableItem.tsx b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTableItem.tsx
new file mode 100644
index 0000000000..f57825e855
--- /dev/null
+++ b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTableItem.tsx
@@ -0,0 +1,86 @@
+import { Td, Tr, Skeleton, HStack } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import ArbitrumL2TxnBatchDA from 'ui/shared/batch/ArbitrumL2TxnBatchDA';
+import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import ArbitrumL2TxnBatchStatus from 'ui/shared/statusTag/ArbitrumL2TxnBatchStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: ArbitrumL2TxnBatchesItem; isLoading?: boolean };
+
+const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'arbitrum') {
+    return null;
+  }
+
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <BatchEntityL2
+          isLoading={ isLoading }
+          number={ item.number }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+          noIcon
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <HStack gap={ 1 }>
+          <ArbitrumL2TxnBatchStatus status={ item.commitment_transaction.status } isLoading={ isLoading }/>
+          <ArbitrumL2TxnBatchDA dataContainer={ item.batch_data_container } isLoading={ isLoading }/>
+        </HStack>
+      </Td>
+      <Td verticalAlign="middle">
+        <BlockEntityL1
+          number={ item.commitment_transaction.block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.blocks_count ? item.blocks_count.toLocaleString() : 'N/A' }</Skeleton>
+      </Td>
+      <Td pr={ 12 } verticalAlign="middle">
+        <TxEntityL1
+          hash={ item.commitment_transaction.hash }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <TimeAgoWithTooltip
+          timestamp={ item.commitment_transaction.timestamp }
+          fallbackText="Undefined"
+          isLoading={ isLoading }
+          color="text_secondary"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <LinkInternal
+          href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
+          isLoading={ isLoading }
+        >
+          <Skeleton isLoaded={ !isLoading } minW="40px">
+            { item.transactions_count.toLocaleString() }
+          </Skeleton>
+        </LinkInternal>
+      </Td>
+    </Tr>
+  );
+};
+
+export default TxnBatchesTableItem;
diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCallData.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCallData.tsx
new file mode 100644
index 0000000000..b5d0c36c0c
--- /dev/null
+++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCallData.tsx
@@ -0,0 +1,31 @@
+import { GridItem } from '@chakra-ui/react';
+import React from 'react';
+
+import dayjs from 'lib/date/dayjs';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+
+import OptimisticL2TxnBatchBlobWrapper from './OptimisticL2TxnBatchBlobWrapper';
+
+interface Props {
+  l1TxHashes: Array<string>;
+  l1Timestamp: string;
+  isLoading: boolean;
+}
+
+const OptimisticL2TxnBatchBlobCallData = ({ l1TxHashes, l1Timestamp, isLoading }: Props) => {
+  return (
+    <OptimisticL2TxnBatchBlobWrapper isLoading={ isLoading }>
+      <GridItem fontWeight={ 600 }>Timestamp</GridItem>
+      <GridItem whiteSpace="normal">
+        { dayjs(l1Timestamp).fromNow() } | { dayjs(l1Timestamp).format('llll') }
+      </GridItem>
+      <GridItem fontWeight={ 600 }>L1 txn hash{ l1TxHashes.length > 1 ? 'es' : '' }</GridItem>
+      <GridItem overflow="hidden" display="flex" flexDir="column" rowGap={ 2 }>
+        { l1TxHashes.map((hash) => <TxEntityL1 key={ hash } hash={ hash } noIcon noCopy={ false }/>) }
+      </GridItem>
+    </OptimisticL2TxnBatchBlobWrapper>
+
+  );
+};
+
+export default React.memo(OptimisticL2TxnBatchBlobCallData);
diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCelestia.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCelestia.tsx
new file mode 100644
index 0000000000..5eb46361bf
--- /dev/null
+++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCelestia.tsx
@@ -0,0 +1,70 @@
+import { Flex, GridItem, Icon, VStack } from '@chakra-ui/react';
+import React from 'react';
+
+import type { OptimisticL2BlobTypeCelestia } from 'types/api/optimisticL2';
+
+// This icon doesn't work properly when it is in the sprite
+// Probably because of the gradient
+// eslint-disable-next-line no-restricted-imports
+import celeniumIcon from 'icons/brands/celenium.svg';
+import dayjs from 'lib/date/dayjs';
+import hexToBase64 from 'lib/hexToBase64';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+
+import OptimisticL2TxnBatchBlobWrapper from './OptimisticL2TxnBatchBlobWrapper';
+
+function getCeleniumUrl(blob: OptimisticL2BlobTypeCelestia) {
+  const url = new URL('https://mocha.celenium.io/blob');
+  url.searchParams.set('commitment', hexToBase64(blob.commitment));
+  url.searchParams.set('hash', hexToBase64(blob.namespace));
+  url.searchParams.set('height', String(blob.height));
+
+  return url.toString();
+}
+
+interface Props {
+  blobs: Array<OptimisticL2BlobTypeCelestia>;
+  isLoading: boolean;
+}
+
+const OptimisticL2TxnBatchBlobCelestia = ({ blobs, isLoading }: Props) => {
+  return (
+    <VStack rowGap={ 2 } w="100%">
+      { blobs.map((blob) => {
+        return (
+          <OptimisticL2TxnBatchBlobWrapper key={ blob.commitment } isLoading={ isLoading } gridTemplateColumns="auto 1fr auto">
+            <GridItem fontWeight={ 600 }>Commitment</GridItem>
+            <GridItem overflow="hidden">
+              <Flex minW="0" w="calc(100% - 20px)">
+                <HashStringShortenDynamic hash={ blob.commitment }/>
+                <CopyToClipboard text={ blob.commitment }/>
+              </Flex>
+            </GridItem>
+            <GridItem display="flex" columnGap={ 2 }>
+              <Icon as={ celeniumIcon } boxSize={ 5 }/>
+              <LinkExternal href={ getCeleniumUrl(blob) }>Blob page</LinkExternal>
+            </GridItem>
+            <GridItem fontWeight={ 600 }>Height</GridItem>
+            <GridItem colSpan={ 2 }>
+              { blob.height }
+            </GridItem>
+            <GridItem fontWeight={ 600 }>Timestamp</GridItem>
+            <GridItem whiteSpace="normal" colSpan={ 2 }>
+              { dayjs(blob.l1_timestamp).fromNow() } | { dayjs(blob.l1_timestamp).format('llll') }
+            </GridItem>
+            <GridItem fontWeight={ 600 }>L1 txn hash</GridItem>
+            <GridItem overflow="hidden" colSpan={ 2 }>
+              <TxEntityL1 hash={ blob.l1_transaction_hash } noIcon noCopy={ false }/>
+            </GridItem>
+          </OptimisticL2TxnBatchBlobWrapper>
+        );
+      }) }
+    </VStack>
+
+  );
+};
+
+export default React.memo(OptimisticL2TxnBatchBlobCelestia);
diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobEip4844.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobEip4844.tsx
new file mode 100644
index 0000000000..8d40574898
--- /dev/null
+++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobEip4844.tsx
@@ -0,0 +1,43 @@
+import { GridItem, VStack } from '@chakra-ui/react';
+import React from 'react';
+
+import type { OptimisticL2BlobTypeEip4844 } from 'types/api/optimisticL2';
+
+import dayjs from 'lib/date/dayjs';
+import BlobEntityL1 from 'ui/shared/entities/blob/BlobEntityL1';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+
+import OptimisticL2TxnBatchBlobWrapper from './OptimisticL2TxnBatchBlobWrapper';
+
+interface Props {
+  blobs: Array<OptimisticL2BlobTypeEip4844>;
+  isLoading: boolean;
+}
+
+const OptimisticL2TxnBatchBlobEip4844 = ({ blobs, isLoading }: Props) => {
+  return (
+    <VStack rowGap={ 2 } w="100%">
+      { blobs.map((blob) => {
+        return (
+          <OptimisticL2TxnBatchBlobWrapper key={ blob.hash } isLoading={ isLoading }>
+            <GridItem fontWeight={ 600 }>Versioned hash</GridItem>
+            <GridItem overflow="hidden">
+              <BlobEntityL1 hash={ blob.hash }/>
+            </GridItem>
+            <GridItem fontWeight={ 600 }>Timestamp</GridItem>
+            <GridItem whiteSpace="normal">
+              { dayjs(blob.l1_timestamp).fromNow() } | { dayjs(blob.l1_timestamp).format('llll') }
+            </GridItem>
+            <GridItem fontWeight={ 600 }>L1 txn hash</GridItem>
+            <GridItem overflow="hidden">
+              <TxEntityL1 hash={ blob.l1_transaction_hash } noIcon noCopy={ false }/>
+            </GridItem>
+          </OptimisticL2TxnBatchBlobWrapper>
+        );
+      }) }
+    </VStack>
+
+  );
+};
+
+export default React.memo(OptimisticL2TxnBatchBlobEip4844);
diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobWrapper.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobWrapper.tsx
new file mode 100644
index 0000000000..63f32e21fb
--- /dev/null
+++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobWrapper.tsx
@@ -0,0 +1,31 @@
+import { chakra, Grid, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  children: React.ReactNode;
+  className?: string;
+  isLoading: boolean;
+}
+
+const OptimisticL2TxnBatchBlobWrapper = ({ children, className, isLoading }: Props) => {
+  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.100');
+  return (
+    <Grid
+      className={ className }
+      columnGap={ 3 }
+      rowGap="10px"
+      p={ 4 }
+      bgColor={ bgColor }
+      gridTemplateColumns="auto 1fr"
+      borderRadius="base"
+      w="100%"
+      h={ isLoading ? '140px' : undefined }
+      fontSize="sm"
+      lineHeight={ 5 }
+    >
+      { isLoading ? null : children }
+    </Grid>
+  );
+};
+
+export default React.memo(chakra(OptimisticL2TxnBatchBlobWrapper));
diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchDetails.pw.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchDetails.pw.tsx
new file mode 100644
index 0000000000..5295faee0a
--- /dev/null
+++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchDetails.pw.tsx
@@ -0,0 +1,45 @@
+import type { UseQueryResult } from '@tanstack/react-query';
+import React from 'react';
+
+import type { OptimismL2TxnBatch } from 'types/api/optimisticL2';
+
+import type { ResourceError } from 'lib/api/resources';
+import * as txnBatchesMock from 'mocks/optimism/txnBatches';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import OptimisticL2TxnBatchDetails from './OptimisticL2TxnBatchDetails';
+
+const hooksConfig = {
+  router: {
+    query: { number: '1' },
+  },
+};
+
+test.beforeEach(async({ mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+});
+
+test('call data blob container +@mobile', async({ render }) => {
+  const query = {
+    data: txnBatchesMock.txnBatchTypeCallData,
+  } as UseQueryResult<OptimismL2TxnBatch, ResourceError>;
+  const component = await render(<OptimisticL2TxnBatchDetails query={ query }/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
+
+test('celestia blob container +@mobile', async({ render }) => {
+  const query = {
+    data: txnBatchesMock.txnBatchTypeCelestia,
+  } as UseQueryResult<OptimismL2TxnBatch, ResourceError>;
+  const component = await render(<OptimisticL2TxnBatchDetails query={ query }/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
+
+test('EIP-4844 blob container +@mobile', async({ render }) => {
+  const query = {
+    data: txnBatchesMock.txnBatchTypeEip4844,
+  } as UseQueryResult<OptimismL2TxnBatch, ResourceError>;
+  const component = await render(<OptimisticL2TxnBatchDetails query={ query }/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchDetails.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchDetails.tsx
new file mode 100644
index 0000000000..17b2910d57
--- /dev/null
+++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchDetails.tsx
@@ -0,0 +1,152 @@
+import { Grid, Skeleton } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { OptimismL2TxnBatch } from 'types/api/optimisticL2';
+
+import { route } from 'nextjs-routes';
+
+import type { ResourceError } from 'lib/api/resources';
+import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
+import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import PrevNext from 'ui/shared/PrevNext';
+
+import OptimisticL2TxnBatchBlobCallData from './OptimisticL2TxnBatchBlobCallData';
+import OptimisticL2TxnBatchBlobCelestia from './OptimisticL2TxnBatchBlobCelestia';
+import OptimisticL2TxnBatchBlobEip4844 from './OptimisticL2TxnBatchBlobEip4844';
+
+interface Props {
+  query: UseQueryResult<OptimismL2TxnBatch, ResourceError>;
+}
+
+const OptimisticL2TxnBatchDetails = ({ query }: Props) => {
+  const router = useRouter();
+
+  const { data, isError, error, isPlaceholderData } = query;
+
+  const handlePrevNextClick = React.useCallback((direction: 'prev' | 'next') => {
+    if (!data) {
+      return;
+    }
+
+    const increment = direction === 'next' ? +1 : -1;
+    const nextId = String(data.internal_id + increment);
+
+    router.push({ pathname: '/batches/[number]', query: { number: nextId } }, undefined);
+  }, [ data, router ]);
+
+  if (isError) {
+    if (isCustomAppError(error)) {
+      throwOnResourceLoadError({ isError, error });
+    }
+
+    return <DataFetchAlert/>;
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  const blocksCount = data.l2_block_end - data.l2_block_start + 1;
+
+  return (
+    <Grid
+      columnGap={ 8 }
+      rowGap={{ base: 3, lg: 3 }}
+      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
+      overflow="hidden"
+    >
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Batch ID indicates the length of batches produced by grouping L2 blocks to be proven on L1"
+      >
+        Batch ID
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          { data.internal_id }
+        </Skeleton>
+        <PrevNext
+          ml={ 6 }
+          onClick={ handlePrevNextClick }
+          prevLabel="View previous txn batch"
+          nextLabel="View next txn batch"
+          isPrevDisabled={ data.internal_id === 0 }
+          isLoading={ isPlaceholderData }
+        />
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Date and time at which batch is submitted to L1"
+      >
+        Timestamp
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        { data.l1_timestamp ?
+          <DetailsTimestamp timestamp={ data.l1_timestamp }isLoading={ isPlaceholderData }/> :
+          'Undefined'
+        }
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Number of transactions in this batch"
+      >
+        Transactions
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.internal_id.toString(), tab: 'txs' } }) }>
+            { data.transaction_count.toLocaleString() } transaction{ data.transaction_count === 1 ? '' : 's' }
+          </LinkInternal>
+          { ' ' }in this batch
+        </Skeleton>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Number of L2 blocks in this batch"
+      >
+        Blocks
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.internal_id.toString(), tab: 'blocks' } }) }>
+            { blocksCount.toLocaleString() } block{ blocksCount === 1 ? '' : 's' }
+          </LinkInternal>
+          { ' ' }in this batch
+        </Skeleton>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Where the batch data is stored"
+      >
+        Batch data container
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value flexDir="column" alignItems="flex-start" rowGap={ 2 }>
+        <OptimisticL2TxnBatchDA container={ data.batch_data_container } isLoading={ isPlaceholderData }/>
+        { data.batch_data_container === 'in_blob4844' && data.blobs &&
+          <OptimisticL2TxnBatchBlobEip4844 blobs={ data.blobs } isLoading={ isPlaceholderData }/> }
+        { data.batch_data_container === 'in_calldata' && (
+          <OptimisticL2TxnBatchBlobCallData
+            l1TxHashes={ data.l1_transaction_hashes }
+            l1Timestamp={ data.l1_timestamp }
+            isLoading={ isPlaceholderData }
+          />
+        ) }
+        { data.batch_data_container === 'in_celestia' && data.blobs &&
+          <OptimisticL2TxnBatchBlobCelestia blobs={ data.blobs } isLoading={ isPlaceholderData }/> }
+      </DetailsInfoItem.Value>
+    </Grid>
+  );
+};
+
+export default OptimisticL2TxnBatchDetails;
diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesListItem.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesListItem.tsx
new file mode 100644
index 0000000000..f98da1de48
--- /dev/null
+++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesListItem.tsx
@@ -0,0 +1,87 @@
+import { Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { OptimisticL2TxnBatchesItem } from 'types/api/optimisticL2';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA';
+import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: OptimisticL2TxnBatchesItem; isLoading?: boolean };
+
+const OptimisticL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') {
+    return null;
+  }
+
+  return (
+    <ListItemMobileGrid.Container gridTemplateColumns="100px auto">
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Batch ID</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BatchEntityL2 number={ item.internal_id } isLoading={ isLoading }/>
+      </ListItemMobileGrid.Value>
+
+      { item.batch_data_container && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>
+            Storage
+          </ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value>
+            <OptimisticL2TxnBatchDA container={ item.batch_data_container } isLoading={ isLoading }/>
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TimeAgoWithTooltip
+          timestamp={ item.l1_timestamp }
+          isLoading={ isLoading }
+          display="inline-block"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn count</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } minW="40px">
+          { item.l1_transaction_hashes.length }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 blocks</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <LinkInternal
+          href={ route({ pathname: '/batches/[number]', query: { number: item.internal_id.toString(), tab: 'blocks' } }) }
+          isLoading={ isLoading }
+        >
+          <Skeleton isLoaded={ !isLoading } minW="40px">
+            { item.l2_block_end - item.l2_block_start + 1 }
+          </Skeleton>
+        </LinkInternal>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Txn</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <LinkInternal
+          href={ route({ pathname: '/batches/[number]', query: { number: item.internal_id.toString(), tab: 'txs' } }) }
+          isLoading={ isLoading }
+        >
+          <Skeleton isLoaded={ !isLoading } minW="40px">
+            { item.transaction_count }
+          </Skeleton>
+        </LinkInternal>
+      </ListItemMobileGrid.Value>
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default OptimisticL2TxnBatchesListItem;
diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTable.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTable.tsx
new file mode 100644
index 0000000000..72e48ed2bf
--- /dev/null
+++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTable.tsx
@@ -0,0 +1,42 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { OptimisticL2TxnBatchesItem } from 'types/api/optimisticL2';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import OptimisticL2TxnBatchesTableItem from './OptimisticL2TxnBatchesTableItem';
+
+type Props = {
+  items: Array<OptimisticL2TxnBatchesItem>;
+  top: number;
+  isLoading?: boolean;
+};
+
+const OptimisticL2TxnBatchesTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table minW="850px" layout="auto">
+      <Thead top={ top }>
+        <Tr>
+          <Th>Batch ID</Th>
+          <Th >Storage</Th>
+          <Th >Age</Th>
+          <Th isNumeric>L1 txn count</Th>
+          <Th isNumeric>L2 blocks</Th>
+          <Th isNumeric>Txn</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <OptimisticL2TxnBatchesTableItem
+            key={ item.internal_id + (isLoading ? String(index) : '') }
+            item={ item }
+            isLoading={ isLoading }
+          />
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default OptimisticL2TxnBatchesTable;
diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx
new file mode 100644
index 0000000000..acc9476006
--- /dev/null
+++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx
@@ -0,0 +1,71 @@
+import { Td, Tr, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { OptimisticL2TxnBatchesItem } from 'types/api/optimisticL2';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA';
+import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: OptimisticL2TxnBatchesItem; isLoading?: boolean };
+
+const OptimisticL2TxnBatchesTableItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') {
+    return null;
+  }
+
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <BatchEntityL2 number={ item.internal_id } isLoading={ isLoading }/>
+      </Td>
+      <Td verticalAlign="middle">
+        { item.batch_data_container ? <OptimisticL2TxnBatchDA container={ item.batch_data_container } isLoading={ isLoading }/> : '-' }
+      </Td>
+      <Td verticalAlign="middle">
+        <TimeAgoWithTooltip
+          timestamp={ item.l1_timestamp }
+          isLoading={ isLoading }
+          display="inline-block"
+          color="text_secondary"
+          my={ 1 }
+        />
+      </Td>
+      <Td verticalAlign="middle" isNumeric>
+        <Skeleton isLoaded={ !isLoading } minW="40px" display="inline-block">
+          { item.l1_transaction_hashes.length }
+        </Skeleton>
+      </Td>
+      <Td verticalAlign="middle" isNumeric>
+        <LinkInternal
+          href={ route({ pathname: '/batches/[number]', query: { number: item.internal_id.toString(), tab: 'blocks' } }) }
+          isLoading={ isLoading }
+          justifyContent="flex-end"
+        >
+          <Skeleton isLoaded={ !isLoading } minW="40px" display="inline-block">
+            { item.l2_block_end - item.l2_block_start + 1 }
+          </Skeleton>
+        </LinkInternal>
+      </Td>
+      <Td verticalAlign="middle" isNumeric>
+        <LinkInternal
+          href={ route({ pathname: '/batches/[number]', query: { number: item.internal_id.toString(), tab: 'txs' } }) }
+          isLoading={ isLoading }
+          justifyContent="flex-end"
+        >
+          <Skeleton isLoaded={ !isLoading } minW="40px" display="inline-block">
+            { item.transaction_count }
+          </Skeleton>
+        </LinkInternal>
+      </Td>
+    </Tr>
+  );
+};
+
+export default OptimisticL2TxnBatchesTableItem;
diff --git a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_EIP-4844-blob-container-mobile-1.png b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_EIP-4844-blob-container-mobile-1.png
new file mode 100644
index 0000000000..98a1717f06
Binary files /dev/null and b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_EIP-4844-blob-container-mobile-1.png differ
diff --git a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_call-data-blob-container-mobile-1.png b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_call-data-blob-container-mobile-1.png
new file mode 100644
index 0000000000..7fc5b77e3e
Binary files /dev/null and b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_call-data-blob-container-mobile-1.png differ
diff --git a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_celestia-blob-container-mobile-1.png b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_celestia-blob-container-mobile-1.png
new file mode 100644
index 0000000000..fce0566cd2
Binary files /dev/null and b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_celestia-blob-container-mobile-1.png differ
diff --git a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_EIP-4844-blob-container-mobile-1.png b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_EIP-4844-blob-container-mobile-1.png
new file mode 100644
index 0000000000..9821f98f7e
Binary files /dev/null and b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_EIP-4844-blob-container-mobile-1.png differ
diff --git a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_call-data-blob-container-mobile-1.png b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_call-data-blob-container-mobile-1.png
new file mode 100644
index 0000000000..0a94b88204
Binary files /dev/null and b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_call-data-blob-container-mobile-1.png differ
diff --git a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_celestia-blob-container-mobile-1.png b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_celestia-blob-container-mobile-1.png
new file mode 100644
index 0000000000..67c90f4c06
Binary files /dev/null and b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_celestia-blob-container-mobile-1.png differ
diff --git a/ui/txnBatches/scrollL2/ScrollL2TxnBatchDetails.tsx b/ui/txnBatches/scrollL2/ScrollL2TxnBatchDetails.tsx
new file mode 100644
index 0000000000..182cf7caa5
--- /dev/null
+++ b/ui/txnBatches/scrollL2/ScrollL2TxnBatchDetails.tsx
@@ -0,0 +1,219 @@
+import { Grid, Skeleton } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { ScrollL2TxnBatch } from 'types/api/scrollL2';
+
+import { route } from 'nextjs-routes';
+
+import type { ResourceError } from 'lib/api/resources';
+import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
+import ScrollL2TxnBatchDA from 'ui/shared/batch/ScrollL2TxnBatchDA';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import PrevNext from 'ui/shared/PrevNext';
+import ScrollL2TxnBatchStatus from 'ui/shared/statusTag/ScrollL2TxnBatchStatus';
+
+interface Props {
+  query: UseQueryResult<ScrollL2TxnBatch, ResourceError>;
+}
+
+const ScrollL2TxnBatchDetails = ({ query }: Props) => {
+  const router = useRouter();
+
+  const { data, isPlaceholderData, isError, error } = query;
+
+  const handlePrevNextClick = React.useCallback((direction: 'prev' | 'next') => {
+    if (!data) {
+      return;
+    }
+
+    const increment = direction === 'next' ? +1 : -1;
+    const nextId = String(data.number + increment);
+
+    router.push({ pathname: '/batches/[number]', query: { number: nextId } }, undefined);
+  }, [ data, router ]);
+
+  if (isError) {
+    if (isCustomAppError(error)) {
+      throwOnResourceLoadError({ isError, error });
+    }
+
+    return <DataFetchAlert/>;
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  const blocksCount = data.end_block - data.start_block + 1;
+
+  return (
+    <Grid
+      columnGap={ 8 }
+      rowGap={{ base: 3, lg: 3 }}
+      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
+      overflow="hidden"
+    >
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Batch number indicates the length of batches produced by grouping L2 blocks to be proven on L1"
+      >
+        Txn batch number
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          { data.number }
+        </Skeleton>
+        <PrevNext
+          ml={ 6 }
+          onClick={ handlePrevNextClick }
+          prevLabel="View previous txn batch"
+          nextLabel="View next txn batch"
+          isPrevDisabled={ data.number === 0 }
+          isLoading={ isPlaceholderData }
+        />
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Data availability container"
+      >
+        Container
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <ScrollL2TxnBatchDA container={ data.data_availability.batch_data_container } isLoading={ isPlaceholderData }/>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Status of this batch"
+      >
+        Status
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <ScrollL2TxnBatchStatus status={ data.confirmation_transaction.hash ? 'Finalized' : 'Committed' } isLoading={ isPlaceholderData }/>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Date and time at which batch is finalized to L1"
+      >
+        Finalized timestamp
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        { data.confirmation_transaction.timestamp ?
+          <DetailsTimestamp timestamp={ data.confirmation_transaction.timestamp }isLoading={ isPlaceholderData }/> :
+          <Skeleton isLoaded={ !isPlaceholderData } display="inline-block">Pending</Skeleton>
+        }
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Number of transactions in this batch"
+      >
+        Transactions
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
+            { data.transaction_count.toLocaleString() } transaction{ data.transaction_count === 1 ? '' : 's' }
+          </LinkInternal>
+        </Skeleton>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Number of L2 blocks in this batch"
+      >
+        Blocks
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'blocks' } }) }>
+            { blocksCount.toLocaleString() } block{ blocksCount === 1 ? '' : 's' }
+          </LinkInternal>
+        </Skeleton>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Date and time at which batch is committed to L1"
+      >
+        Committed timestamp
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        { data.commitment_transaction.timestamp ?
+          <DetailsTimestamp timestamp={ data.commitment_transaction.timestamp }isLoading={ isPlaceholderData }/> :
+          <Skeleton isLoaded={ !isPlaceholderData } display="inline-block">Pending</Skeleton>
+        }
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Hash of L1 transaction this batch was committed in"
+      >
+        Committed transaction hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <TxEntityL1
+          isLoading={ isPlaceholderData }
+          hash={ data.commitment_transaction.hash }
+          maxW="100%"
+        />
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="L1 block that includes transaction with this batch commitment"
+      >
+        Committed block
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <BlockEntityL1
+          isLoading={ isPlaceholderData }
+          number={ data.commitment_transaction.block_number }
+        />
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Hash of L1 transaction this batch was finalized in"
+      >
+        Finalized transaction hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        { data.confirmation_transaction.hash ? (
+          <TxEntityL1
+            isLoading={ isPlaceholderData }
+            hash={ data.confirmation_transaction.hash }
+            maxW="100%"
+          />
+        ) : <Skeleton isLoaded={ !isPlaceholderData } display="inline-block">Pending</Skeleton> }
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="L1 block that includes transaction with this batch finalization data"
+      >
+        Finalized block
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        { data.confirmation_transaction.block_number ? (
+          <BlockEntityL1
+            isLoading={ isPlaceholderData }
+            number={ data.confirmation_transaction.block_number }
+          />
+        ) : <Skeleton isLoaded={ !isPlaceholderData } display="inline-block">Pending</Skeleton> }
+      </DetailsInfoItem.Value>
+    </Grid>
+  );
+};
+
+export default ScrollL2TxnBatchDetails;
diff --git a/ui/txnBatches/scrollL2/ScrollL2TxnBatchesListItem.tsx b/ui/txnBatches/scrollL2/ScrollL2TxnBatchesListItem.tsx
new file mode 100644
index 0000000000..b11a04ede1
--- /dev/null
+++ b/ui/txnBatches/scrollL2/ScrollL2TxnBatchesListItem.tsx
@@ -0,0 +1,135 @@
+import { Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ScrollL2TxnBatch } from 'types/api/scrollL2';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import ScrollL2TxnBatchDA from 'ui/shared/batch/ScrollL2TxnBatchDA';
+import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import ScrollL2TxnBatchStatus from 'ui/shared/statusTag/ScrollL2TxnBatchStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: ScrollL2TxnBatch; isLoading?: boolean };
+
+const ScrollL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'scroll') {
+    return null;
+  }
+
+  return (
+    <ListItemMobileGrid.Container gridTemplateColumns="110px auto">
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Batch #</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BatchEntityL2
+          isLoading={ isLoading }
+          number={ item.number }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Data availability</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <ScrollL2TxnBatchDA container={ item.data_availability.batch_data_container } isLoading={ isLoading }/>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Status</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <ScrollL2TxnBatchStatus status={ item.confirmation_transaction.hash ? 'Finalized' : 'Committed' } isLoading={ isLoading }/>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Committed block</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BlockEntityL1
+          number={ item.commitment_transaction.block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Committed txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TxEntityL1
+          hash={ item.commitment_transaction.hash }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TimeAgoWithTooltip
+          timestamp={ item.commitment_transaction.timestamp }
+          fallbackText="Undefined"
+          isLoading={ isLoading }
+          display="inline-block"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Finalized block</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        { item.confirmation_transaction.block_number ? (
+          <BlockEntityL1
+            number={ item.confirmation_transaction.block_number }
+            isLoading={ isLoading }
+            fontSize="sm"
+            lineHeight={ 5 }
+          />
+        ) : <Skeleton isLoaded={ !isLoading } display="inline-block">Pending</Skeleton> }
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Finalized txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        { item.confirmation_transaction.hash ? (
+          <TxEntityL1
+            hash={ item.confirmation_transaction.hash }
+            isLoading={ isLoading }
+            fontSize="sm"
+            lineHeight={ 5 }
+          />
+        ) : <Skeleton isLoaded={ !isLoading } display="inline-block">Pending</Skeleton> }
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Blocks count</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <LinkInternal
+          href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'blocks' } }) }
+          isLoading={ isLoading }
+          fontWeight={ 600 }
+        >
+          <Skeleton isLoaded={ !isLoading } minW="40px">
+            { (item.end_block - item.start_block + 1).toLocaleString() }
+          </Skeleton>
+        </LinkInternal>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Txn count</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <LinkInternal
+          href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
+          isLoading={ isLoading }
+          fontWeight={ 600 }
+        >
+          <Skeleton isLoaded={ !isLoading } minW="40px">
+            { item.transaction_count.toLocaleString() }
+          </Skeleton>
+        </LinkInternal>
+      </ListItemMobileGrid.Value>
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default ScrollL2TxnBatchesListItem;
diff --git a/ui/txnBatches/scrollL2/ScrollL2TxnBatchesTable.tsx b/ui/txnBatches/scrollL2/ScrollL2TxnBatchesTable.tsx
new file mode 100644
index 0000000000..4dd7a6151c
--- /dev/null
+++ b/ui/txnBatches/scrollL2/ScrollL2TxnBatchesTable.tsx
@@ -0,0 +1,46 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ScrollL2TxnBatch } from 'types/api/scrollL2';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import ScrollL2TxnBatchesTableItem from './ScrollL2TxnBatchesTableItem';
+
+type Props = {
+  items: Array<ScrollL2TxnBatch>;
+  top: number;
+  isLoading?: boolean;
+};
+
+const ScrollL2TxnBatchesTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table minW="1000px" style={{ tableLayout: 'auto' }}>
+      <Thead top={ top }>
+        <Tr>
+          <Th>Batch #</Th>
+          <Th>Container</Th>
+          <Th>Status</Th>
+          <Th>Committed block</Th>
+          <Th>Committed txn hash</Th>
+          <Th>Age</Th>
+          <Th>Finalized block</Th>
+          <Th>Finalized txn hash</Th>
+          <Th isNumeric>Blocks</Th>
+          <Th isNumeric>Txn</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <ScrollL2TxnBatchesTableItem
+            key={ item.number + (isLoading ? String(index) : '') }
+            item={ item }
+            isLoading={ isLoading }
+          />
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default ScrollL2TxnBatchesTable;
diff --git a/ui/txnBatches/scrollL2/ScrollL2TxnBatchesTableItem.tsx b/ui/txnBatches/scrollL2/ScrollL2TxnBatchesTableItem.tsx
new file mode 100644
index 0000000000..8d7d680304
--- /dev/null
+++ b/ui/txnBatches/scrollL2/ScrollL2TxnBatchesTableItem.tsx
@@ -0,0 +1,114 @@
+import { Td, Tr, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ScrollL2TxnBatch } from 'types/api/scrollL2';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import ScrollL2TxnBatchDA from 'ui/shared/batch/ScrollL2TxnBatchDA';
+import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import ScrollL2TxnBatchStatus from 'ui/shared/statusTag/ScrollL2TxnBatchStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: ScrollL2TxnBatch; isLoading?: boolean };
+
+const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'scroll') {
+    return null;
+  }
+
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <BatchEntityL2
+          isLoading={ isLoading }
+          number={ item.number }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+          noIcon
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <ScrollL2TxnBatchDA container={ item.data_availability?.batch_data_container } isLoading={ isLoading }/>
+      </Td>
+      <Td verticalAlign="middle">
+        <ScrollL2TxnBatchStatus status={ item.confirmation_transaction.hash ? 'Finalized' : 'Committed' } isLoading={ isLoading }/>
+      </Td>
+      <Td verticalAlign="middle">
+        <BlockEntityL1
+          number={ item.commitment_transaction.block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <TxEntityL1
+          hash={ item.commitment_transaction.hash }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <TimeAgoWithTooltip
+          timestamp={ item.commitment_transaction.timestamp }
+          fallbackText="Undefined"
+          isLoading={ isLoading }
+          color="text_secondary"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        { item.confirmation_transaction.block_number ? (
+          <BlockEntityL1
+            number={ item.confirmation_transaction.block_number }
+            isLoading={ isLoading }
+            fontSize="sm"
+            lineHeight={ 5 }
+          />
+        ) : <Skeleton isLoaded={ !isLoading } display="inline-block">Pending</Skeleton> }
+      </Td>
+      <Td verticalAlign="middle">
+        { item.confirmation_transaction.hash ? (
+          <TxEntityL1
+            hash={ item.confirmation_transaction.hash }
+            isLoading={ isLoading }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+          />
+        ) : <Skeleton isLoaded={ !isLoading } display="inline-block">Pending</Skeleton> }
+      </Td>
+      <Td verticalAlign="middle" isNumeric>
+        <LinkInternal
+          href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'blocks' } }) }
+          isLoading={ isLoading }
+        >
+          <Skeleton isLoaded={ !isLoading }>
+            { (item.end_block - item.start_block + 1).toLocaleString() }
+          </Skeleton>
+        </LinkInternal>
+      </Td>
+      <Td verticalAlign="middle" isNumeric>
+        <LinkInternal
+          href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
+          isLoading={ isLoading }
+        >
+          <Skeleton isLoaded={ !isLoading }>
+            { item.transaction_count.toLocaleString() }
+          </Skeleton>
+        </LinkInternal>
+      </Td>
+    </Tr>
+  );
+};
+
+export default TxnBatchesTableItem;
diff --git a/ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails.tsx b/ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails.tsx
new file mode 100644
index 0000000000..871d21da7e
--- /dev/null
+++ b/ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails.tsx
@@ -0,0 +1,191 @@
+import { Grid, Text, Skeleton } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import { ZKEVM_L2_TX_BATCH_STATUSES } from 'types/api/zkEvmL2';
+import type { ZkEvmL2TxnBatch } from 'types/api/zkEvmL2';
+
+import { route } from 'nextjs-routes';
+
+import type { ResourceError } from 'lib/api/resources';
+import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
+import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import PrevNext from 'ui/shared/PrevNext';
+import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps';
+
+interface Props {
+  query: UseQueryResult<ZkEvmL2TxnBatch, ResourceError>;
+}
+
+const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
+  const router = useRouter();
+
+  const { data, isPlaceholderData, isError, error } = query;
+
+  const handlePrevNextClick = React.useCallback((direction: 'prev' | 'next') => {
+    if (!data) {
+      return;
+    }
+
+    const increment = direction === 'next' ? +1 : -1;
+    const nextId = String(data.number + increment);
+
+    router.push({ pathname: '/batches/[number]', query: { number: nextId } }, undefined);
+  }, [ data, router ]);
+
+  if (isError) {
+    if (isCustomAppError(error)) {
+      throwOnResourceLoadError({ isError, error });
+    }
+
+    return <DataFetchAlert/>;
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <Grid
+      columnGap={ 8 }
+      rowGap={{ base: 3, lg: 3 }}
+      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
+      overflow="hidden"
+    >
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+      >
+        Txn batch number
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          { data.number }
+        </Skeleton>
+        <PrevNext
+          ml={ 6 }
+          onClick={ handlePrevNextClick }
+          prevLabel="View previous txn batch"
+          nextLabel="View next txn batch"
+          isPrevDisabled={ data.number === 0 }
+          isLoading={ isPlaceholderData }
+        />
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+      >
+        Status
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <VerificationSteps steps={ ZKEVM_L2_TX_BATCH_STATUSES } currentStep={ data.status } isLoading={ isPlaceholderData }/>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+      >
+        Timestamp
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        { data.timestamp ? <DetailsTimestamp timestamp={ data.timestamp } isLoading={ isPlaceholderData }/> : 'Undefined' }
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+      >
+        Verify tx hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        { data.verify_transaction_hash ? (
+          <TxEntityL1
+            isLoading={ isPlaceholderData }
+            hash={ data.verify_transaction_hash }
+            maxW="100%"
+          />
+        ) : <Text>Pending</Text> }
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+      >
+        Transactions
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
+            { data.transactions.length } transaction{ data.transactions.length === 1 ? '' : 's' }
+          </LinkInternal>
+        </Skeleton>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItemDivider/>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+      >
+        Global exit root
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value
+        flexWrap="nowrap"
+      >
+        <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
+          <HashStringShortenDynamic hash={ data.global_exit_root }/>
+        </Skeleton>
+        <CopyToClipboard text={ data.global_exit_root } isLoading={ isPlaceholderData }/>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+      >
+        Acc input hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value
+        flexWrap="nowrap"
+      >
+        <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
+          <HashStringShortenDynamic hash={ data.acc_input_hash }/>
+        </Skeleton>
+        <CopyToClipboard text={ data.acc_input_hash } isLoading={ isPlaceholderData }/>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+      >
+        Sequence tx hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        { data.sequence_transaction_hash ? (
+          <TxEntityL1
+            isLoading={ isPlaceholderData }
+            hash={ data.sequence_transaction_hash }
+            maxW="100%"
+          />
+        ) : <Text>Pending</Text> }
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+      >
+        State root
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value
+        flexWrap="nowrap"
+      >
+        <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
+          <HashStringShortenDynamic hash={ data.state_root }/>
+        </Skeleton>
+        <CopyToClipboard text={ data.state_root } isLoading={ isPlaceholderData }/>
+      </DetailsInfoItem.Value>
+    </Grid>
+  );
+};
+
+export default ZkEvmL2TxnBatchDetails;
diff --git a/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx b/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx
new file mode 100644
index 0000000000..3804175b1b
--- /dev/null
+++ b/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx
@@ -0,0 +1,97 @@
+import { Skeleton, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: ZkEvmL2TxnBatchesItem; isLoading?: boolean };
+
+const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'zkEvm') {
+    return null;
+  }
+
+  return (
+    <ListItemMobileGrid.Container gridTemplateColumns="110px auto">
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Batch #</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BatchEntityL2
+          isLoading={ isLoading }
+          number={ item.number }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Status</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <ZkEvmL2TxnBatchStatus status={ item.status } isLoading={ isLoading }/>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          fallbackText="Undefined"
+          isLoading={ isLoading }
+          display="inline-block"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Txn count</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <LinkInternal
+          href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
+          isLoading={ isLoading }
+          fontWeight={ 600 }
+        >
+          <Skeleton isLoaded={ !isLoading } minW="40px">
+            { item.transaction_count }
+          </Skeleton>
+        </LinkInternal>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Verify tx hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        { item.verify_transaction_hash ? (
+          <TxEntityL1
+            isLoading={ isLoading }
+            hash={ item.verify_transaction_hash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+          />
+        ) : <Text>Pending</Text> }
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Sequence hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        { item.sequence_transaction_hash ? (
+          <TxEntityL1
+            isLoading={ isLoading }
+            hash={ item.sequence_transaction_hash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+          />
+        ) : <Text>Pending</Text> }
+      </ListItemMobileGrid.Value>
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default ZkEvmTxnBatchesListItem;
diff --git a/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTable.tsx b/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTable.tsx
new file mode 100644
index 0000000000..a186874536
--- /dev/null
+++ b/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTable.tsx
@@ -0,0 +1,42 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import ZkEvmTxnBatchesTableItem from './ZkEvmTxnBatchesTableItem';
+
+type Props = {
+  items: Array<ZkEvmL2TxnBatchesItem>;
+  top: number;
+  isLoading?: boolean;
+};
+
+const TxnBatchesTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table minW="1000px">
+      <Thead top={ top }>
+        <Tr>
+          <Th width="33%">Batch #</Th>
+          <Th width="33%">Status</Th>
+          <Th width="150px">Age</Th>
+          <Th width="150px">Txn count</Th>
+          <Th width="230px">Verify tx hash</Th>
+          <Th width="230px">Sequence hash</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <ZkEvmTxnBatchesTableItem
+            key={ item.number + (isLoading ? String(index) : '') }
+            item={ item }
+            isLoading={ isLoading }
+          />
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default TxnBatchesTable;
diff --git a/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTableItem.tsx b/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTableItem.tsx
new file mode 100644
index 0000000000..b7727700d4
--- /dev/null
+++ b/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTableItem.tsx
@@ -0,0 +1,85 @@
+import { Td, Tr, Text, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: ZkEvmL2TxnBatchesItem; isLoading?: boolean };
+
+const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'zkEvm') {
+    return null;
+  }
+
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <BatchEntityL2
+          isLoading={ isLoading }
+          number={ item.number }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+          noIcon
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <ZkEvmL2TxnBatchStatus status={ item.status } isLoading={ isLoading }/>
+      </Td>
+      <Td verticalAlign="middle">
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          fallbackText="Undefined"
+          isLoading={ isLoading }
+          color="text_secondary"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <LinkInternal
+          href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
+          isLoading={ isLoading }
+        >
+          <Skeleton isLoaded={ !isLoading } minW="40px" my={ 1 }>
+            { item.transaction_count }
+          </Skeleton>
+        </LinkInternal>
+      </Td>
+      <Td pr={ 12 } verticalAlign="middle">
+        { item.verify_transaction_hash ? (
+          <TxEntityL1
+            isLoading={ isLoading }
+            hash={ item.verify_transaction_hash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+            noIcon
+          />
+        ) : <Text>Pending</Text> }
+      </Td>
+      <Td pr={ 12 } verticalAlign="middle">
+        { item.sequence_transaction_hash ? (
+          <TxEntityL1
+            isLoading={ isLoading }
+            hash={ item.sequence_transaction_hash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+            noIcon
+          />
+        ) : <Text>Pending</Text> }
+      </Td>
+    </Tr>
+  );
+};
+
+export default TxnBatchesTableItem;
diff --git a/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails.tsx b/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails.tsx
new file mode 100644
index 0000000000..1da0333567
--- /dev/null
+++ b/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails.tsx
@@ -0,0 +1,195 @@
+import { Grid, GridItem, Link, Skeleton, Text } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import BigNumber from 'bignumber.js';
+import { useRouter } from 'next/router';
+import React from 'react';
+import { scroller, Element } from 'react-scroll';
+
+import { ZKSYNC_L2_TX_BATCH_STATUSES, type ZkSyncBatch } from 'types/api/zkSyncL2';
+
+import { route } from 'nextjs-routes';
+
+import type { ResourceError } from 'lib/api/resources';
+import { WEI, WEI_IN_GWEI } from 'lib/consts';
+import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import { currencyUnits } from 'lib/units';
+import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
+import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import PrevNext from 'ui/shared/PrevNext';
+import TruncatedValue from 'ui/shared/TruncatedValue';
+import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps';
+
+import ZkSyncL2TxnBatchHashesInfo from './ZkSyncL2TxnBatchHashesInfo';
+
+interface Props {
+  query: UseQueryResult<ZkSyncBatch, ResourceError>;
+}
+
+const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
+  const router = useRouter();
+  const [ isExpanded, setIsExpanded ] = React.useState(false);
+
+  const { data, isPlaceholderData, isError, error } = query;
+
+  const handlePrevNextClick = React.useCallback((direction: 'prev' | 'next') => {
+    if (!data) {
+      return;
+    }
+
+    const increment = direction === 'next' ? +1 : -1;
+    const nextId = String(data.number + increment);
+
+    router.push({ pathname: '/batches/[number]', query: { number: nextId } }, undefined);
+  }, [ data, router ]);
+
+  const handleCutClick = React.useCallback(() => {
+    setIsExpanded((flag) => !flag);
+    scroller.scrollTo('ZkSyncL2TxnBatchDetails__cutLink', {
+      duration: 500,
+      smooth: true,
+    });
+  }, []);
+
+  if (isError) {
+    if (isCustomAppError(error)) {
+      throwOnResourceLoadError({ isError, error });
+    }
+
+    return <DataFetchAlert/>;
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  const txNum = data.l2_transaction_count + data.l1_transaction_count;
+
+  return (
+    <Grid
+      columnGap={ 8 }
+      rowGap={{ base: 3, lg: 3 }}
+      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
+      overflow="hidden"
+    >
+      <DetailsInfoItem.Label
+        hint="Batch number indicates the length of batches produced by grouping L2 blocks to be proven on Ethereum."
+        isLoading={ isPlaceholderData }
+      >
+        Txn batch number
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          { data.number }
+        </Skeleton>
+        <PrevNext
+          ml={ 6 }
+          onClick={ handlePrevNextClick }
+          prevLabel="View previous txn batch"
+          nextLabel="View next txn batch"
+          isPrevDisabled={ data.number === 0 }
+          isLoading={ isPlaceholderData }
+        />
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        hint="Status is the short interpretation of the batch lifecycle"
+        isLoading={ isPlaceholderData }
+      >
+        Status
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <VerificationSteps steps={ ZKSYNC_L2_TX_BATCH_STATUSES.slice(1) } currentStep={ data.status } isLoading={ isPlaceholderData }/>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        hint="Date and time at which batch is produced"
+        isLoading={ isPlaceholderData }
+      >
+        Timestamp
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        { data.timestamp ? <DetailsTimestamp timestamp={ data.timestamp } isLoading={ isPlaceholderData }/> : 'Undefined' }
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        hint="Number of transactions inside the batch."
+        isLoading={ isPlaceholderData }
+      >
+        Transactions
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
+            { txNum } transaction{ txNum === 1 ? '' : 's' }
+          </LinkInternal>
+        </Skeleton>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItemDivider/>
+
+      <ZkSyncL2TxnBatchHashesInfo isLoading={ isPlaceholderData } data={ data }/>
+
+      <GridItem colSpan={{ base: undefined, lg: 2 }}>
+        <Element name="ZkSyncL2TxnBatchDetails__cutLink">
+          <Skeleton isLoaded={ !isPlaceholderData } mt={ 6 } display="inline-block">
+            <Link
+              display="inline-block"
+              fontSize="sm"
+              textDecorationLine="underline"
+              textDecorationStyle="dashed"
+              onClick={ handleCutClick }
+            >
+              { isExpanded ? 'Hide details' : 'View details' }
+            </Link>
+          </Skeleton>
+        </Element>
+      </GridItem>
+
+      { isExpanded && (
+        <>
+          <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
+
+          <DetailsInfoItem.Label
+            hint="L1 batch root is a hash that summarizes batch data and submitted to the L1"
+          >
+            Root hash
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value
+            flexWrap="nowrap"
+            alignSelf="flex-start"
+          >
+            <TruncatedValue value={ data.root_hash }/>
+            <CopyToClipboard text={ data.root_hash }/>
+          </DetailsInfoItem.Value>
+
+          <DetailsInfoItem.Label
+            hint="Gas price for the batch settlement transaction on L1"
+          >
+            L1 gas price
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Text mr={ 1 }>{ BigNumber(data.l1_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether }</Text>
+            <Text variant="secondary">({ BigNumber(data.l1_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</Text>
+          </DetailsInfoItem.Value>
+
+          <DetailsInfoItem.Label
+            hint='The gas price below which the "baseFee" of the batch should not fall'
+          >
+            L2 fair gas price
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Text mr={ 1 }>{ BigNumber(data.l2_fair_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether }</Text>
+            <Text variant="secondary">({ BigNumber(data.l2_fair_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</Text>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+    </Grid>
+  );
+};
+
+export default ZkSyncL2TxnBatchDetails;
diff --git a/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo.tsx b/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo.tsx
new file mode 100644
index 0000000000..3f735818db
--- /dev/null
+++ b/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo.tsx
@@ -0,0 +1,110 @@
+import { Flex, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ZkSyncBatch } from 'types/api/zkSyncL2';
+
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+
+interface Props {
+  isLoading: boolean;
+  data: Pick<
+    ZkSyncBatch,
+  'commit_transaction_hash' |
+  'commit_transaction_timestamp' |
+  'prove_transaction_hash' |
+  'prove_transaction_timestamp' |
+  'execute_transaction_hash' |
+  'execute_transaction_timestamp'
+  >;
+}
+
+const ZkSyncL2TxnBatchHashesInfo = ({ isLoading, data }: Props) => {
+  return (
+    <>
+      <DetailsInfoItem.Label
+        hint="Hash of L1 tx on which the batch was committed"
+        isLoading={ isLoading }
+      >
+        Commit tx hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value
+        flexDir="column"
+        alignItems="flex-start"
+      >
+        { data.commit_transaction_hash ? (
+          <>
+            <TxEntityL1
+              isLoading={ isLoading }
+              hash={ data.commit_transaction_hash }
+              maxW="100%"
+              noCopy={ false }
+            />
+            { data.commit_transaction_timestamp && (
+              <Flex alignItems="center" flexWrap="wrap" rowGap={ 3 }>
+                <DetailsTimestamp timestamp={ data.commit_transaction_timestamp } isLoading={ isLoading }/>
+              </Flex>
+            ) }
+          </>
+        ) : <Skeleton isLoaded={ !isLoading }>Pending</Skeleton> }
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        hint="Hash of L1 tx on which the batch was proven"
+        isLoading={ isLoading }
+      >
+        Prove tx hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value
+        flexDir="column"
+        alignItems="flex-start"
+      >
+        { data.prove_transaction_hash ? (
+          <>
+            <TxEntityL1
+              isLoading={ isLoading }
+              hash={ data.prove_transaction_hash }
+              maxW="100%"
+              noCopy={ false }
+            />
+            { data.prove_transaction_timestamp && (
+              <Flex alignItems="center" flexWrap="wrap" rowGap={ 3 }>
+                <DetailsTimestamp timestamp={ data.prove_transaction_timestamp } isLoading={ isLoading }/>
+              </Flex>
+            ) }
+          </>
+        ) : <Skeleton isLoaded={ !isLoading }>Pending</Skeleton> }
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        hint="Hash of L1 tx on which the batch was executed and finalized"
+        isLoading={ isLoading }
+      >
+        Execute tx hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value
+        flexDir="column"
+        alignItems="flex-start"
+      >
+        { data.execute_transaction_hash ? (
+          <>
+            <TxEntityL1
+              isLoading={ isLoading }
+              hash={ data.execute_transaction_hash }
+              maxW="100%"
+              noCopy={ false }
+            />
+            { data.execute_transaction_timestamp && (
+              <Flex alignItems="center" flexWrap="wrap" rowGap={ 3 }>
+                <DetailsTimestamp timestamp={ data.execute_transaction_timestamp } isLoading={ isLoading }/>
+              </Flex>
+            ) }
+          </>
+        ) : <Skeleton isLoaded={ !isLoading }>Pending</Skeleton> }
+      </DetailsInfoItem.Value>
+    </>
+  );
+};
+
+export default React.memo(ZkSyncL2TxnBatchHashesInfo);
diff --git a/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesListItem.tsx b/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesListItem.tsx
new file mode 100644
index 0000000000..5beb37b49c
--- /dev/null
+++ b/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesListItem.tsx
@@ -0,0 +1,97 @@
+import { Skeleton, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import ZkSyncL2TxnBatchStatus from 'ui/shared/statusTag/ZkSyncL2TxnBatchStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: ZkSyncBatchesItem; isLoading?: boolean };
+
+const ZkSyncTxnBatchesListItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'zkSync') {
+    return null;
+  }
+
+  return (
+    <ListItemMobileGrid.Container gridTemplateColumns="110px auto">
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Batch #</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BatchEntityL2
+          isLoading={ isLoading }
+          number={ item.number }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Status</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <ZkSyncL2TxnBatchStatus status={ item.status } isLoading={ isLoading }/>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          fallbackText="Undefined"
+          isLoading={ isLoading }
+          display="inline-block"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Txn count</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <LinkInternal
+          href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
+          isLoading={ isLoading }
+          fontWeight={ 600 }
+        >
+          <Skeleton isLoaded={ !isLoading } minW="40px">
+            { item.transaction_count }
+          </Skeleton>
+        </LinkInternal>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Commit tx</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        { item.commit_transaction_hash ? (
+          <TxEntityL1
+            isLoading={ isLoading }
+            hash={ item.commit_transaction_hash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+          />
+        ) : <Text>Pending</Text> }
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Prove tx</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        { item.prove_transaction_hash ? (
+          <TxEntityL1
+            isLoading={ isLoading }
+            hash={ item.prove_transaction_hash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+          />
+        ) : <Text>Pending</Text> }
+      </ListItemMobileGrid.Value>
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default ZkSyncTxnBatchesListItem;
diff --git a/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTable.tsx b/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTable.tsx
new file mode 100644
index 0000000000..30eeec3ad0
--- /dev/null
+++ b/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTable.tsx
@@ -0,0 +1,42 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import ZkSyncTxnBatchesTableItem from './ZkSyncTxnBatchesTableItem';
+
+type Props = {
+  items: Array<ZkSyncBatchesItem>;
+  top: number;
+  isLoading?: boolean;
+};
+
+const ZkSyncTxnBatchesTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table minW="1000px">
+      <Thead top={ top }>
+        <Tr>
+          <Th width="40%">Batch #</Th>
+          <Th width="60%">Status</Th>
+          <Th width="150px">Age</Th>
+          <Th width="150px">Txn count</Th>
+          <Th width="210px">Commit tx</Th>
+          <Th width="210px">Prove tx</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <ZkSyncTxnBatchesTableItem
+            key={ item.number + (isLoading ? String(index) : '') }
+            item={ item }
+            isLoading={ isLoading }
+          />
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default ZkSyncTxnBatchesTable;
diff --git a/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTableItem.tsx b/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTableItem.tsx
new file mode 100644
index 0000000000..faabe873a6
--- /dev/null
+++ b/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTableItem.tsx
@@ -0,0 +1,85 @@
+import { Td, Tr, Text, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import ZkSyncL2TxnBatchStatus from 'ui/shared/statusTag/ZkSyncL2TxnBatchStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: ZkSyncBatchesItem; isLoading?: boolean };
+
+const ZkSyncTxnBatchesTableItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'zkSync') {
+    return null;
+  }
+
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <BatchEntityL2
+          isLoading={ isLoading }
+          number={ item.number }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+          noIcon
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <ZkSyncL2TxnBatchStatus status={ item.status } isLoading={ isLoading }/>
+      </Td>
+      <Td verticalAlign="middle">
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          fallbackText="Undefined"
+          isLoading={ isLoading }
+          color="text_secondary"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <LinkInternal
+          href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
+          isLoading={ isLoading }
+        >
+          <Skeleton isLoaded={ !isLoading } minW="40px" my={ 1 }>
+            { item.transaction_count }
+          </Skeleton>
+        </LinkInternal>
+      </Td>
+      <Td verticalAlign="middle">
+        { item.commit_transaction_hash ? (
+          <TxEntityL1
+            isLoading={ isLoading }
+            hash={ item.commit_transaction_hash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+            noIcon
+          />
+        ) : <Text>Pending</Text> }
+      </Td>
+      <Td verticalAlign="middle">
+        { item.prove_transaction_hash ? (
+          <TxEntityL1
+            isLoading={ isLoading }
+            hash={ item.prove_transaction_hash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+            noIcon
+          />
+        ) : <Text>Pending</Text> }
+      </Td>
+    </Tr>
+  );
+};
+
+export default ZkSyncTxnBatchesTableItem;
diff --git a/ui/txs/TxAdditionalInfo.pw.tsx b/ui/txs/TxAdditionalInfo.pw.tsx
new file mode 100644
index 0000000000..d6f5f612c7
--- /dev/null
+++ b/ui/txs/TxAdditionalInfo.pw.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import * as txMock from 'mocks/txs/tx';
+import { test, expect } from 'playwright/lib';
+
+import TxAdditionalInfo from './TxAdditionalInfo';
+
+test('regular transaction +@dark-mode', async({ render, page }) => {
+  const component = await render(<TxAdditionalInfo tx={ txMock.base }/>);
+  await component.getByLabel('Transaction info').click();
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 600 } });
+});
+
+test('regular transaction +@mobile -@default', async({ render, page }) => {
+  const component = await render(<TxAdditionalInfo tx={ txMock.base } isMobile/>);
+  await component.getByLabel('Transaction info').click();
+  await expect(page).toHaveScreenshot();
+});
+
+test('blob transaction', async({ render, page }) => {
+  const component = await render(<TxAdditionalInfo tx={ txMock.withBlob }/>);
+  await component.getByLabel('Transaction info').click();
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 600 } });
+});
diff --git a/ui/txs/TxAdditionalInfo.tsx b/ui/txs/TxAdditionalInfo.tsx
index 356bdc8867..0b0f222e3c 100644
--- a/ui/txs/TxAdditionalInfo.tsx
+++ b/ui/txs/TxAdditionalInfo.tsx
@@ -3,7 +3,6 @@ import {
   Modal,
   ModalContent,
   ModalCloseButton,
-  Popover,
   PopoverTrigger,
   PopoverContent,
   PopoverBody,
@@ -14,6 +13,7 @@ import React from 'react';
 import type { Transaction } from 'types/api/transaction';
 
 import AdditionalInfoButton from 'ui/shared/AdditionalInfoButton';
+import Popover from 'ui/shared/chakra/Popover';
 
 import TxAdditionalInfoContainer from './TxAdditionalInfoContainer';
 import TxAdditionalInfoContent from './TxAdditionalInfoContent';
@@ -30,7 +30,7 @@ type Props =
     isMobile?: boolean;
     isLoading?: boolean;
     className?: string;
-  }
+  };
 
 const TxAdditionalInfo = ({ hash, tx, isMobile, isLoading, className }: Props) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -58,7 +58,7 @@ const TxAdditionalInfo = ({ hash, tx, isMobile, isLoading, className }: Props) =
             <AdditionalInfoButton isOpen={ isOpen } isLoading={ isLoading } className={ className }/>
           </PopoverTrigger>
           <PopoverContent border="1px solid" borderColor="divider">
-            <PopoverBody>
+            <PopoverBody fontWeight={ 400 } fontSize="sm">
               { content }
             </PopoverBody>
           </PopoverContent>
diff --git a/ui/txs/TxAdditionalInfoContent.tsx b/ui/txs/TxAdditionalInfoContent.tsx
index 9e582f1b82..92b5d9fbfa 100644
--- a/ui/txs/TxAdditionalInfoContent.tsx
+++ b/ui/txs/TxAdditionalInfoContent.tsx
@@ -9,10 +9,10 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import getValueWithUnit from 'lib/getValueWithUnit';
 import { currencyUnits } from 'lib/units';
-import CurrencyValue from 'ui/shared/CurrencyValue';
-import LinkInternal from 'ui/shared/LinkInternal';
+import BlobEntity from 'ui/shared/entities/blob/BlobEntity';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import TextSeparator from 'ui/shared/TextSeparator';
-import TxFeeStability from 'ui/shared/tx/TxFeeStability';
+import TxFee from 'ui/shared/tx/TxFee';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => {
@@ -26,31 +26,40 @@ const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => {
     color: 'gray.500',
     fontWeight: 600,
     marginBottom: 3,
-    fontSize: 'sm',
   };
 
   return (
     <>
       <Heading as="h4" size="sm" mb={ 6 }>Additional info </Heading>
+      { tx.blob_versioned_hashes && tx.blob_versioned_hashes.length > 0 && (
+        <Box { ...sectionProps } mb={ 4 }>
+          <Flex alignItems="center" justifyContent="space-between">
+            <Text { ...sectionTitleProps }>Blobs: { tx.blob_versioned_hashes.length }</Text>
+            { tx.blob_versioned_hashes.length > 3 && (
+              <LinkInternal
+                href={ route({ pathname: '/tx/[hash]', query: { hash: tx.hash, tab: 'blobs' } }) }
+                mb={ 3 }
+              >
+                view all
+              </LinkInternal>
+            ) }
+          </Flex>
+          <Flex flexDir="column" rowGap={ 3 }>
+            { tx.blob_versioned_hashes.slice(0, 3).map((hash, index) => (
+              <Flex key={ hash } columnGap={ 2 }>
+                <Box fontWeight={ 500 }>{ index + 1 }</Box>
+                <BlobEntity hash={ hash } noIcon/>
+              </Flex>
+            )) }
+          </Flex>
+        </Box>
+      ) }
       { !config.UI.views.tx.hiddenFields?.tx_fee && (
         <Box { ...sectionProps } mb={ 4 }>
           { (tx.stability_fee !== undefined || tx.fee.value !== null) && (
             <>
               <Text { ...sectionTitleProps }>Transaction fee</Text>
-              { tx.stability_fee ? (
-                <TxFeeStability data={ tx.stability_fee }/>
-              ) : (
-                <Flex>
-                  <CurrencyValue
-                    value={ tx.fee.value }
-                    currency={ config.UI.views.tx.hiddenFields?.fee_currency ? '' : currencyUnits.ether }
-                    exchangeRate={ tx.exchange_rate }
-                    accuracyUsd={ 2 }
-                    flexWrap="wrap"
-                    rowGap={ 0 }
-                  />
-                </Flex>
-              ) }
+              <TxFee tx={ tx } withUsd accuracyUsd={ 2 } rowGap={ 0 }/>
             </>
           ) }
         </Box>
@@ -73,40 +82,42 @@ const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => {
           { tx.base_fee_per_gas !== null && (
             <Box>
               <Text as="span" fontWeight="500">Base: </Text>
-              <Text fontWeight="600" as="span">{ getValueWithUnit(tx.base_fee_per_gas, 'gwei').toFormat() }</Text>
+              <Text fontWeight="700" as="span">{ getValueWithUnit(tx.base_fee_per_gas, 'gwei').toFormat() }</Text>
             </Box>
           ) }
           { tx.max_fee_per_gas !== null && (
             <Box mt={ 1 }>
               <Text as="span" fontWeight="500">Max: </Text>
-              <Text fontWeight="600" as="span">{ getValueWithUnit(tx.max_fee_per_gas, 'gwei').toFormat() }</Text>
+              <Text fontWeight="700" as="span">{ getValueWithUnit(tx.max_fee_per_gas, 'gwei').toFormat() }</Text>
             </Box>
           ) }
           { tx.max_priority_fee_per_gas !== null && (
             <Box mt={ 1 }>
               <Text as="span" fontWeight="500">Max priority: </Text>
-              <Text fontWeight="600" as="span">{ getValueWithUnit(tx.max_priority_fee_per_gas, 'gwei').toFormat() }</Text>
+              <Text fontWeight="700" as="span">{ getValueWithUnit(tx.max_priority_fee_per_gas, 'gwei').toFormat() }</Text>
             </Box>
           ) }
         </Box>
       ) }
-      <Box { ...sectionProps } mb={ 4 }>
-        <Text { ...sectionTitleProps }>Others</Text>
-        <Box>
-          <Text as="span" fontWeight="500">Txn type: </Text>
-          <Text fontWeight="600" as="span">{ tx.type }</Text>
-          { tx.type === 2 && <Text fontWeight="400" as="span" ml={ 1 } color="gray.500">(EIP-1559)</Text> }
-        </Box>
-        <Box mt={ 1 }>
-          <Text as="span" fontWeight="500">Nonce: </Text>
-          <Text fontWeight="600" as="span">{ tx.nonce }</Text>
-        </Box>
-        <Box mt={ 1 }>
-          <Text as="span" fontWeight="500">Position: </Text>
-          <Text fontWeight="600" as="span">{ tx.position }</Text>
+      { !(tx.blob_versioned_hashes && tx.blob_versioned_hashes.length > 0) && (
+        <Box { ...sectionProps } mb={ 4 }>
+          <Text { ...sectionTitleProps }>Others</Text>
+          <Box>
+            <Text as="span" fontWeight="500">Txn type: </Text>
+            <Text fontWeight="600" as="span">{ tx.type }</Text>
+            { tx.type === 2 && <Text fontWeight="400" as="span" ml={ 1 } color="gray.500">(EIP-1559)</Text> }
+          </Box>
+          <Box mt={ 1 }>
+            <Text as="span" fontWeight="500">Nonce: </Text>
+            <Text fontWeight="600" as="span">{ tx.nonce }</Text>
+          </Box>
+          <Box mt={ 1 }>
+            <Text as="span" fontWeight="500">Position: </Text>
+            <Text fontWeight="600" as="span">{ tx.position }</Text>
+          </Box>
         </Box>
-      </Box>
-      <LinkInternal fontSize="sm" href={ route({ pathname: '/tx/[hash]', query: { hash: tx.hash } }) }>More details</LinkInternal>
+      ) }
+      <LinkInternal href={ route({ pathname: '/tx/[hash]', query: { hash: tx.hash } }) }>More details</LinkInternal>
     </>
   );
 };
diff --git a/ui/txs/TxTranslationType.tsx b/ui/txs/TxTranslationType.tsx
new file mode 100644
index 0000000000..4086efb80f
--- /dev/null
+++ b/ui/txs/TxTranslationType.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import type { TransactionType } from 'types/api/transaction';
+
+import Tag from 'ui/shared/chakra/Tag';
+
+import { camelCaseToSentence } from './noves/utils';
+import TxType from './TxType';
+
+export interface Props {
+  types: Array<TransactionType>;
+  isLoading?: boolean;
+  translatationType: string | undefined;
+}
+
+const TxTranslationType = ({ types, isLoading, translatationType }: Props) => {
+
+  const filteredTypes = [ 'unclassified' ];
+
+  if (!translatationType || filteredTypes.includes(translatationType)) {
+    return <TxType types={ types } isLoading={ isLoading }/>;
+  }
+
+  return (
+    <Tag colorScheme="purple" isLoading={ isLoading }>
+      { camelCaseToSentence(translatationType) }
+    </Tag>
+  );
+
+};
+
+export default TxTranslationType;
diff --git a/ui/txs/TxType.tsx b/ui/txs/TxType.tsx
index 571a442600..fb772a9584 100644
--- a/ui/txs/TxType.tsx
+++ b/ui/txs/TxType.tsx
@@ -1,128 +1,68 @@
-import React from "react";
+import React from 'react';
 
-import type { TransactionType } from "types/api/transaction";
+import type { TransactionType } from 'types/api/transaction';
 
-import Tag from "ui/shared/chakra/Tag";
+import Tag from 'ui/shared/chakra/Tag';
 
 export interface Props {
   types: Array<TransactionType>;
   isLoading?: boolean;
 }
 
-const TYPES_ORDER = [
-  "rootstock_remasc",
-  "rootstock_bridge",
-  "token_creation",
-  "contract_creation",
-  "token_transfer",
-  "contract_call",
-  "coin_transfer",
-  "100",
-  "101",
-  "102",
-  "103",
-  "104",
-  "105",
-  "106",
-  "107",
-  "108",
-  "109",
-  "110",
-  "110",
-  "111",
-  "112",
-  "113",
-  "114",
-  "115",
-  "116",
-  "117",
-  "118",
-  "119",
-  "120",
-  "121",
-  "122",
-  "123",
+const TYPES_ORDER: Array<TransactionType> = [
+  'blob_transaction',
+  'rootstock_remasc',
+  'rootstock_bridge',
+  'token_creation',
+  'contract_creation',
+  'token_transfer',
+  'contract_call',
+  'coin_transfer',
 ];
 
 const TxType = ({ types, isLoading }: Props) => {
-  const typeToShow = types.sort(
-    (t1, t2) => TYPES_ORDER.indexOf(t1) - TYPES_ORDER.indexOf(t2),
-  )[0];
+  const typeToShow = types.sort((t1, t2) => TYPES_ORDER.indexOf(t1) - TYPES_ORDER.indexOf(t2))[0];
 
   let label;
   let colorScheme;
 
   switch (typeToShow) {
-    case "contract_call":
-      label = "Contract call";
-      colorScheme = "blue";
+    case 'contract_call':
+      label = 'Contract call';
+      colorScheme = 'blue';
       break;
-    case "contract_creation":
-      label = "Contract creation";
-      colorScheme = "blue";
+    case 'blob_transaction':
+      label = 'Blob txn';
+      colorScheme = 'yellow';
       break;
-    case "token_transfer":
-      label = "Token transfer";
-      colorScheme = "orange";
+    case 'contract_creation':
+      label = 'Contract creation';
+      colorScheme = 'blue';
       break;
-    case "token_creation":
-      label = "Token creation";
-      colorScheme = "orange";
+    case 'token_transfer':
+      label = 'Token transfer';
+      colorScheme = 'orange';
       break;
-    case "coin_transfer":
-      label = "Transfer";
-      colorScheme = "orange";
+    case 'token_creation':
+      label = 'Token creation';
+      colorScheme = 'orange';
       break;
-    case "rootstock_remasc":
-      label = "REMASC";
-      colorScheme = "blue";
+    case 'coin_transfer':
+      label = 'Coin transfer';
+      colorScheme = 'orange';
       break;
-    case "rootstock_bridge":
-      label = "Bridge";
-      colorScheme = "blue";
+    case 'rootstock_remasc':
+      label = 'REMASC';
+      colorScheme = 'blue';
       break;
-    case "100":
-    case "101":
-    case "110":
-      label = "Claim";
-      colorScheme = "orange";
-      break;
-    case "102":
-    case "111":
-    case "112":
-    case "113":
-    case "114":
-      label = "Stake";
-      colorScheme = "orange";
-      break;
-    case "103":
-    case "115":
-      label = "Unstake";
-      colorScheme = "orange";
-      break;
-    case "105":
-    case "106":
-    case "107":
-    case "108":
-    case "109":
-    case "116":
-    case "117":
-    case "119":
-    case "120":
-    case "121":
-    case "122":
-      label = "Config";
-      colorScheme = "orange";
-      break;
-    case "104":
-    case "118":
-    case "123":
-      label = "Delegate";
-      colorScheme = "orange";
+    case 'rootstock_bridge':
+      label = 'Bridge';
+      colorScheme = 'blue';
       break;
     default:
-      label = "Transaction";
-      colorScheme = "purple";
+      label = 'Transaction';
+      colorScheme = 'purple';
+
   }
 
   return (
diff --git a/ui/txs/TxsContent.tsx b/ui/txs/TxsContent.tsx
index a7011e033c..be4fddac97 100644
--- a/ui/txs/TxsContent.tsx
+++ b/ui/txs/TxsContent.tsx
@@ -6,10 +6,12 @@ import type { Transaction, TransactionsSortingField, TransactionsSortingValue }
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AddressCsvExportLink from 'ui/address/AddressCsvExportLink';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
 import getNextSortValue from 'ui/shared/sort/getNextSortValue';
 
+import useDescribeTxs from './noves/useDescribeTxs';
 import TxsHeaderMobile from './TxsHeaderMobile';
 import TxsList from './TxsList';
 import TxsTable from './TxsTable';
@@ -17,6 +19,7 @@ import TxsTable from './TxsTable';
 const SORT_SEQUENCE: Record<TransactionsSortingField, Array<TransactionsSortingValue | undefined>> = {
   value: [ 'value-desc', 'value-asc', undefined ],
   fee: [ 'fee-desc', 'fee-asc', undefined ],
+  block_number: [ 'block_number-asc', undefined ],
 };
 
 type Props = {
@@ -36,7 +39,7 @@ type Props = {
   isError: boolean;
   setSorting: (value: TransactionsSortingValue | undefined) => void;
   sort: TransactionsSortingValue | undefined;
-}
+};
 
 const TxsContent = ({
   query,
@@ -62,7 +65,9 @@ const TxsContent = ({
     setSorting(value);
   }, [ sort, setSorting ]);
 
-  const content = items ? (
+  const itemsWithTranslation = useDescribeTxs(items, currentAddress, query.isPlaceholderData);
+
+  const content = itemsWithTranslation ? (
     <>
       <Show below="lg" ssr={ false }>
         <TxsList
@@ -73,19 +78,19 @@ const TxsContent = ({
           isLoading={ isPlaceholderData }
           enableTimeIncrement={ enableTimeIncrement }
           currentAddress={ currentAddress }
-          items={ items }
+          items={ itemsWithTranslation }
         />
       </Show>
       <Hide below="lg" ssr={ false }>
         <TxsTable
-          txs={ items }
+          txs={ itemsWithTranslation }
           sort={ onSortToggle }
           sorting={ sort }
           showBlockInfo={ showBlockInfo }
           showSocketInfo={ showSocketInfo }
           socketInfoAlert={ socketInfoAlert }
           socketInfoNum={ socketInfoNum }
-          top={ top || query.pagination.isVisible ? 80 : 0 }
+          top={ top || (query.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0) }
           currentAddress={ currentAddress }
           enableTimeIncrement={ enableTimeIncrement }
           isLoading={ isPlaceholderData }
@@ -116,7 +121,7 @@ const TxsContent = ({
   return (
     <DataListDisplay
       isError={ isError }
-      items={ items }
+      items={ itemsWithTranslation }
       emptyText="There are no transactions."
       content={ content }
       actionBar={ actionBar }
diff --git a/ui/txs/TxsHeaderMobile.tsx b/ui/txs/TxsHeaderMobile.tsx
index 9efde1de84..295096ebe8 100644
--- a/ui/txs/TxsHeaderMobile.tsx
+++ b/ui/txs/TxsHeaderMobile.tsx
@@ -22,7 +22,7 @@ type Props = {
   showPagination?: boolean;
   filterComponent?: React.ReactNode;
   linkSlot?: React.ReactNode;
-}
+};
 
 const TxsHeaderMobile = ({ filterComponent, sorting, setSorting, paginationProps, className, showPagination = true, linkSlot }: Props) => {
   return (
@@ -30,9 +30,10 @@ const TxsHeaderMobile = ({ filterComponent, sorting, setSorting, paginationProps
       <HStack>
         { filterComponent }
         <Sort
+          name="transactions_sorting"
+          defaultValue={ sorting }
           options={ SORT_OPTIONS }
-          setSort={ setSorting }
-          sort={ sorting }
+          onChange={ setSorting }
           isLoading={ paginationProps.isLoading }
         />
         { /* api is not implemented */ }
diff --git a/ui/txs/TxsListItem.pw.tsx b/ui/txs/TxsListItem.pw.tsx
index 945ce74011..d078e85b51 100644
--- a/ui/txs/TxsListItem.pw.tsx
+++ b/ui/txs/TxsListItem.pw.tsx
@@ -1,29 +1,18 @@
-import { test, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as txMock from 'mocks/txs/tx';
-import TestApp from 'playwright/TestApp';
+import { test, expect, devices } from 'playwright/lib';
 
 import TxsListItem from './TxsListItem';
 
 test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-test('base view +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TxsListItem tx={ txMock.withWatchListNames } showBlockInfo/>
-    </TestApp>,
-  );
-
+test('base view +@dark-mode', async({ render }) => {
+  const component = await render(<TxsListItem tx={ txMock.withWatchListNames } showBlockInfo/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('with base address', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TxsListItem tx={ txMock.withWatchListNames } showBlockInfo currentAddress={ txMock.base.from.hash }/>
-    </TestApp>,
-  );
-
+test('with base address', async({ render }) => {
+  const component = await render(<TxsListItem tx={ txMock.withWatchListNames } showBlockInfo currentAddress={ txMock.base.from.hash }/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/txs/TxsListItem.tsx b/ui/txs/TxsListItem.tsx
index 7beb0c0859..5483c22011 100644
--- a/ui/txs/TxsListItem.tsx
+++ b/ui/txs/TxsListItem.tsx
@@ -9,7 +9,6 @@ import type { Transaction } from 'types/api/transaction';
 
 import config from 'configs/app';
 import getValueWithUnit from 'lib/getValueWithUnit';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import { space } from 'lib/html-entities';
 import { currencyUnits } from 'lib/units';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
@@ -17,29 +16,38 @@ import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
-import TxFeeStability from 'ui/shared/tx/TxFeeStability';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TxFee from 'ui/shared/tx/TxFee';
 import TxWatchListTags from 'ui/shared/tx/TxWatchListTags';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 import TxType from 'ui/txs/TxType';
 
+import TxTranslationType from './TxTranslationType';
+
 type Props = {
   tx: Transaction;
   showBlockInfo: boolean;
   currentAddress?: string;
   enableTimeIncrement?: boolean;
   isLoading?: boolean;
-}
+};
 
 const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeIncrement }: Props) => {
   const dataTo = tx.to ? tx.to : tx.created_contract;
 
-  const timeAgo = useTimeAgoIncrement(tx.timestamp, enableTimeIncrement);
-
   return (
     <ListItemMobile display="block" width="100%" isAnimated key={ tx.hash }>
       <Flex justifyContent="space-between" mt={ 4 }>
         <HStack flexWrap="wrap">
-          <TxType types={ tx.tx_types } isLoading={ isLoading }/>
+          { tx.translation ? (
+            <TxTranslationType
+              types={ tx.transaction_types }
+              isLoading={ isLoading || tx.translation.isLoading }
+              translatationType={ tx.translation.data?.type }
+            />
+          ) :
+            <TxType types={ tx.transaction_types } isLoading={ isLoading }/>
+          }
           <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/>
           <TxWatchListTags tx={ tx } isLoading={ isLoading }/>
         </HStack>
@@ -49,14 +57,20 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
         <TxEntity
           isLoading={ isLoading }
           hash={ tx.hash }
-          truncation="constant"
+          truncation="constant_long"
           fontWeight="700"
+          icon={{
+            name: tx.transaction_types.includes('blob_transaction') ? 'blob' : undefined,
+          }}
+        />
+        <TimeAgoWithTooltip
+          timestamp={ tx.timestamp }
+          enableIncrement={ enableTimeIncrement }
+          isLoading={ isLoading }
+          color="text_secondary"
+          fontWeight="400"
+          fontSize="sm"
         />
-        { tx.timestamp && (
-          <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm">
-            <span>{ timeAgo }</span>
-          </Skeleton>
-        ) }
       </Flex>
       { tx.method && (
         <Flex mt={ 3 }>
@@ -72,12 +86,12 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
           </Skeleton>
         </Flex>
       ) }
-      { showBlockInfo && tx.block !== null && (
+      { showBlockInfo && tx.block_number !== null && (
         <Flex mt={ 2 }>
           <Skeleton isLoaded={ !isLoading } display="inline-block" whiteSpace="pre">Block </Skeleton>
           <BlockEntity
             isLoading={ isLoading }
-            number={ tx.block }
+            number={ tx.block_number }
             noIcon
           />
         </Flex>
@@ -105,14 +119,7 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
           { (tx.stability_fee !== undefined || tx.fee.value !== null) && (
             <>
               <Skeleton isLoaded={ !isLoading } display="inline-block" whiteSpace="pre">Fee</Skeleton>
-              { tx.stability_fee ? (
-                <TxFeeStability data={ tx.stability_fee } isLoading={ isLoading } hideUsd/>
-              ) : (
-                <Skeleton isLoaded={ !isLoading } display="inline-block" variant="text_secondary" whiteSpace="pre">
-                  { getValueWithUnit(tx.fee.value || 0).toFormat() }
-                  { config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ currencyUnits.ether }` }
-                </Skeleton>
-              ) }
+              <TxFee tx={ tx } isLoading={ isLoading }/>
             </>
           ) }
         </Flex>
diff --git a/ui/txs/TxsStats.pw.tsx b/ui/txs/TxsStats.pw.tsx
new file mode 100644
index 0000000000..88d11e3552
--- /dev/null
+++ b/ui/txs/TxsStats.pw.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import * as statsMock from 'mocks/stats';
+import * as txsStatsMock from 'mocks/txs/stats';
+import { test, expect } from 'playwright/lib';
+
+import TxsStats from './TxsStats';
+
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('stats', statsMock.base);
+  await mockApiResponse('txs_stats', txsStatsMock.base);
+  const component = await render(<TxsStats/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/txs/TxsStats.tsx b/ui/txs/TxsStats.tsx
new file mode 100644
index 0000000000..763d6eada7
--- /dev/null
+++ b/ui/txs/TxsStats.tsx
@@ -0,0 +1,81 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+import getCurrencyValue from 'lib/getCurrencyValue';
+import { thinsp } from 'lib/html-entities';
+import { HOMEPAGE_STATS } from 'stubs/stats';
+import { TXS_STATS } from 'stubs/tx';
+import StatsWidget from 'ui/shared/stats/StatsWidget';
+
+const TxsStats = () => {
+  const txsStatsQuery = useApiQuery('txs_stats', {
+    queryOptions: {
+      placeholderData: TXS_STATS,
+    },
+  });
+
+  const statsQuery = useApiQuery('stats', {
+    queryOptions: {
+      placeholderData: HOMEPAGE_STATS,
+    },
+  });
+
+  if (!txsStatsQuery.data) {
+    return null;
+  }
+
+  const txFeeAvg = getCurrencyValue({
+    value: txsStatsQuery.data.transaction_fees_avg_24h,
+    exchangeRate: statsQuery.data?.coin_price,
+    decimals: String(config.chain.currency.decimals),
+    accuracyUsd: 2,
+  });
+
+  return (
+    <Box
+      display="grid"
+      gridTemplateColumns={{ base: '1fr', lg: 'repeat(4, calc(25% - 9px))' }}
+      rowGap={ 3 }
+      columnGap={ 3 }
+      mb={ 6 }
+    >
+      <StatsWidget
+        label="Transactions"
+        value={ Number(txsStatsQuery.data?.transactions_count_24h).toLocaleString() }
+        period="24h"
+        isLoading={ txsStatsQuery.isPlaceholderData }
+        href={ config.features.stats.isEnabled ? { pathname: '/stats/[id]', query: { id: 'newTxns' } } : undefined }
+      />
+      <StatsWidget
+        label="Pending transactions"
+        value={ Number(txsStatsQuery.data?.pending_transactions_count).toLocaleString() }
+        period="1h"
+        isLoading={ txsStatsQuery.isPlaceholderData }
+      />
+      <StatsWidget
+        label="Transactions fees"
+        value={
+          (Number(txsStatsQuery.data?.transaction_fees_sum_24h) / (10 ** config.chain.currency.decimals))
+            .toLocaleString(undefined, { maximumFractionDigits: 2 })
+        }
+        valuePostfix={ thinsp + config.chain.currency.symbol }
+        period="24h"
+        isLoading={ txsStatsQuery.isPlaceholderData }
+        href={ config.features.stats.isEnabled ? { pathname: '/stats/[id]', query: { id: 'txnsFee' } } : undefined }
+      />
+      <StatsWidget
+        label="Avg. transaction fee"
+        value={ txFeeAvg.usd ? txFeeAvg.usd : txFeeAvg.valueStr }
+        valuePrefix={ txFeeAvg.usd ? '$' : undefined }
+        valuePostfix={ txFeeAvg.usd ? undefined : thinsp + config.chain.currency.symbol }
+        period="24h"
+        isLoading={ txsStatsQuery.isPlaceholderData }
+        href={ config.features.stats.isEnabled ? { pathname: '/stats/[id]', query: { id: 'averageTxnFee' } } : undefined }
+      />
+    </Box>
+  );
+};
+
+export default React.memo(TxsStats);
diff --git a/ui/txs/TxsTable.pw.tsx b/ui/txs/TxsTable.pw.tsx
index 7cd4d86eb6..0cd290b62c 100644
--- a/ui/txs/TxsTable.pw.tsx
+++ b/ui/txs/TxsTable.pw.tsx
@@ -1,41 +1,45 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as txMock from 'mocks/txs/tx';
-import TestApp from 'playwright/TestApp';
-import * as configs from 'playwright/utils/configs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import TxsTable from './TxsTable';
 
-test.describe('base view', () => {
+test('base view +@dark-mode', async({ render }) => {
+  const component = await render(
+    <TxsTable
+      txs={ [ txMock.base, txMock.withWatchListNames ] }
+      // eslint-disable-next-line react/jsx-no-bind
+      sort={ () => () => {} }
+      top={ 0 }
+      showBlockInfo
+      showSocketInfo={ false }
+    />,
+  );
+
+  await component.getByText('kitty').first().hover();
+
+  await expect(component).toHaveScreenshot();
+});
 
-  test('+@dark-mode', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        { /* eslint-disable-next-line react/jsx-no-bind */ }
-        <TxsTable txs={ [ txMock.base, txMock.withWatchListNames ] } sort={ () => () => {} } top={ 0 } showBlockInfo showSocketInfo={ false }/>
-      </TestApp>,
+test.describe('screen xl', () => {
+  test.use({ viewport: pwConfig.viewport.xl });
+
+  test('base view', async({ render }) => {
+    const component = await render(
+      <TxsTable
+        txs={ [ txMock.base, txMock.withWatchListNames ] }
+        // eslint-disable-next-line react/jsx-no-bind
+        sort={ () => () => {} }
+        top={ 0 }
+        showBlockInfo
+        showSocketInfo={ false }
+      />,
     );
 
     await component.getByText('kitty').first().hover();
 
     await expect(component).toHaveScreenshot();
   });
-
-  test.describe('screen xl', () => {
-    test.use({ viewport: configs.viewport.xl });
-
-    test('', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          { /* eslint-disable-next-line react/jsx-no-bind */ }
-          <TxsTable txs={ [ txMock.base, txMock.withWatchListNames ] } sort={ () => () => {} } top={ 0 } showBlockInfo showSocketInfo={ false }/>
-        </TestApp>,
-      );
-
-      await component.getByText('kitty').first().hover();
-
-      await expect(component).toHaveScreenshot();
-    });
-  });
 });
diff --git a/ui/txs/TxsTable.tsx b/ui/txs/TxsTable.tsx
index f0ec839c14..447006835a 100644
--- a/ui/txs/TxsTable.tsx
+++ b/ui/txs/TxsTable.tsx
@@ -26,7 +26,7 @@ type Props = {
   currentAddress?: string;
   enableTimeIncrement?: boolean;
   isLoading?: boolean;
-}
+};
 
 const TxsTable = ({
   txs,
@@ -43,20 +43,32 @@ const TxsTable = ({
 }: Props) => {
   const { cutRef, renderedItemsNum } = useLazyRenderedList(txs, !isLoading);
 
+  const feeCurrency = config.UI.views.tx.hiddenFields?.fee_currency || config.chain.hasMultipleGasCurrencies ?
+    '' :
+    ' ' + currencyUnits.ether;
+
   return (
     <AddressHighlightProvider>
-      <Table variant="simple" minWidth="950px" size="xs">
+      <Table minWidth="950px">
         <TheadSticky top={ top }>
           <Tr>
             <Th width="54px"></Th>
-            <Th width="22%">Txn hash</Th>
+            <Th width="180px">Txn hash</Th>
             <Th width="160px">Type</Th>
             <Th width="20%">Method</Th>
-            { showBlockInfo && <Th width="18%">Block</Th> }
-            <Th width={{ base: '224px', xl: '360px' }}>From/To</Th>
+            { showBlockInfo && (
+              <Th width="18%">
+                <Link onClick={ isLoading ? undefined : sort('block_number') } display="flex" alignItems="center">
+                  { sorting === 'block_number-asc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(-90deg)"/> }
+                  { sorting === 'block_number-desc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(90deg)"/> }
+                  Block
+                </Link>
+              </Th>
+            ) }
+            <Th width="224px">From/To</Th>
             { !config.UI.views.tx.hiddenFields?.value && (
               <Th width="20%" isNumeric>
-                <Link onClick={ sort('value') } display="flex" justifyContent="end">
+                <Link onClick={ isLoading ? undefined : sort('value') } display="flex" alignItems="center" justifyContent="end">
                   { sorting === 'value-asc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(-90deg)"/> }
                   { sorting === 'value-desc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(90deg)"/> }
                   { `Value ${ currencyUnits.ether }` }
@@ -65,10 +77,10 @@ const TxsTable = ({
             ) }
             { !config.UI.views.tx.hiddenFields?.tx_fee && (
               <Th width="20%" isNumeric pr={ 5 }>
-                <Link onClick={ sort('fee') } display="flex" justifyContent="end">
+                <Link onClick={ isLoading ? undefined : sort('fee') } display="flex" alignItems="center" justifyContent="end">
                   { sorting === 'fee-asc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(-90deg)"/> }
                   { sorting === 'fee-desc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(90deg)"/> }
-                  { `Fee${ config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ currencyUnits.ether }` }` }
+                  { `Fee${ feeCurrency }` }
                 </Link>
               </Th>
             ) }
diff --git a/ui/txs/TxsTableItem.tsx b/ui/txs/TxsTableItem.tsx
index a42632e4ba..0d95b76abb 100644
--- a/ui/txs/TxsTableItem.tsx
+++ b/ui/txs/TxsTableItem.tsx
@@ -1,22 +1,27 @@
-import { Tr, Td, VStack, Skeleton } from "@chakra-ui/react";
-import { motion } from "framer-motion";
-import React from "react";
+import {
+  Tr,
+  Td,
+  VStack,
+} from '@chakra-ui/react';
+import { motion } from 'framer-motion';
+import React from 'react';
 
-import type { Transaction } from "types/api/transaction";
+import type { Transaction } from 'types/api/transaction';
 
-import config from "configs/app";
-import useTimeAgoIncrement from "lib/hooks/useTimeAgoIncrement";
-import AddressFromTo from "ui/shared/address/AddressFromTo";
-import Tag from "ui/shared/chakra/Tag";
-import CurrencyValue from "ui/shared/CurrencyValue";
-import BlockEntity from "ui/shared/entities/block/BlockEntity";
-import TxEntity from "ui/shared/entities/tx/TxEntity";
-import TxStatus from "ui/shared/statusTag/TxStatus";
-import TxFeeStability from "ui/shared/tx/TxFeeStability";
-import TxWatchListTags from "ui/shared/tx/TxWatchListTags";
-import TxAdditionalInfo from "ui/txs/TxAdditionalInfo";
+import config from 'configs/app';
+import AddressFromTo from 'ui/shared/address/AddressFromTo';
+import Tag from 'ui/shared/chakra/Tag';
+import CurrencyValue from 'ui/shared/CurrencyValue';
+import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxStatus from 'ui/shared/statusTag/TxStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TxFee from 'ui/shared/tx/TxFee';
+import TxWatchListTags from 'ui/shared/tx/TxWatchListTags';
+import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 
-import TxType from "./TxType";
+import TxTranslationType from './TxTranslationType';
+import TxType from './TxType';
 
 type Props = {
   tx: Transaction;
@@ -26,15 +31,8 @@ type Props = {
   isLoading?: boolean;
 };
 
-const TxsTableItem = ({
-  tx,
-  showBlockInfo,
-  currentAddress,
-  isLoading,
-  enableTimeIncrement,
-}: Props) => {
+const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement, isLoading }: Props) => {
   const dataTo = tx.to ? tx.to : tx.created_contract;
-  const timeAgo = useTimeAgoIncrement(tx.timestamp, enableTimeIncrement);
 
   return (
     <Tr
@@ -56,46 +54,45 @@ const TxsTableItem = ({
             fontWeight={ 700 }
             noIcon
             maxW="100%"
+            truncation="constant_long"
+          />
+          <TimeAgoWithTooltip
+            timestamp={ tx.timestamp }
+            enableIncrement={ enableTimeIncrement }
+            isLoading={ isLoading }
+            color="text_secondary"
+            fontWeight="400"
           />
-          { tx.timestamp && (
-            <Skeleton
-              color="text_secondary"
-              fontWeight="400"
-              isLoaded={ !isLoading }
-            >
-              <span>{ timeAgo }</span>
-            </Skeleton>
-          ) }
         </VStack>
       </Td>
       <Td>
         <VStack alignItems="start">
-          <TxType types={ tx.tx_types } isLoading={ isLoading }/>
-          <TxStatus
-            status={ tx.status }
-            errorText={ tx.status === "error" ? tx.result : undefined }
-            isLoading={ isLoading }
-          />
+          { tx.translation ? (
+            <TxTranslationType
+              types={ tx.transaction_types }
+              isLoading={ isLoading || tx.translation.isLoading }
+              translatationType={ tx.translation.data?.type }
+            />
+          ) :
+            <TxType types={ tx.transaction_types } isLoading={ isLoading }/>
+          }
+          <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/>
           <TxWatchListTags tx={ tx } isLoading={ isLoading }/>
         </VStack>
       </Td>
       <Td whiteSpace="nowrap">
         { tx.method && (
-          <Tag
-            colorScheme={ tx.method === "Multicall" ? "teal" : "gray" }
-            isLoading={ isLoading }
-            isTruncated
-          >
+          <Tag colorScheme={ tx.method === 'Multicall' ? 'teal' : 'gray' } isLoading={ isLoading } isTruncated>
             { tx.method }
           </Tag>
         ) }
       </Td>
       { showBlockInfo && (
         <Td>
-          { tx.block && (
+          { tx.block_number && (
             <BlockEntity
               isLoading={ isLoading }
-              number={ tx.block }
+              number={ tx.block_number }
               noIcon
               fontSize="sm"
               lineHeight={ 6 }
@@ -111,7 +108,7 @@ const TxsTableItem = ({
           current={ currentAddress }
           isLoading={ isLoading }
           mt="2px"
-          mode={{ lg: "compact", xl: "long" }}
+          mode="compact"
         />
       </Td>
       { !config.UI.views.tx.hiddenFields?.value && (
@@ -120,25 +117,14 @@ const TxsTableItem = ({
         </Td>
       ) }
       { !config.UI.views.tx.hiddenFields?.tx_fee && (
-        <Td isNumeric>
-          { /* eslint-disable-next-line no-nested-ternary */ }
-          { tx.stability_fee ? (
-            <TxFeeStability
-              data={ tx.stability_fee }
-              isLoading={ isLoading }
-              accuracy={ 8 }
-              justifyContent="end"
-              hideUsd
-            />
-          ) : tx.fee.value ? (
-            <CurrencyValue
-              value={ tx.fee.value }
-              accuracy={ 8 }
-              isLoading={ isLoading }
-            />
-          ) : (
-            "-"
-          ) }
+        <Td isNumeric maxW="220px">
+          <TxFee
+            tx={ tx }
+            accuracy={ 8 }
+            isLoading={ isLoading }
+            withCurrency={ Boolean(tx.celo || tx.stability_fee) }
+            justifyContent="end"
+          />
         </Td>
       ) }
     </Tr>
diff --git a/ui/txs/TxsWatchlist.tsx b/ui/txs/TxsWatchlist.tsx
index 67edde53d2..80d8365cda 100644
--- a/ui/txs/TxsWatchlist.tsx
+++ b/ui/txs/TxsWatchlist.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 
-import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
 import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
+import useRedirectForInvalidAuthToken from 'ui/snippets/auth/useRedirectForInvalidAuthToken';
 import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
 
 type Props = {
   query: QueryWithPagesResult<'txs_watchlist'>;
-}
+};
 
 const TxsWatchlist = ({ query }: Props) => {
   useRedirectForInvalidAuthToken();
-  return <TxsWithFrontendSorting query={ query } showSocketInfo={ false }/>;
+  return <TxsWithFrontendSorting query={ query } showSocketInfo={ false } top={ 88 }/>;
 };
 
 export default TxsWatchlist;
diff --git a/ui/txs/TxsWithAPISorting.tsx b/ui/txs/TxsWithAPISorting.tsx
index 140c8f0a99..de1184c63a 100644
--- a/ui/txs/TxsWithAPISorting.tsx
+++ b/ui/txs/TxsWithAPISorting.tsx
@@ -9,7 +9,7 @@ import getSortParamsFromValue from 'ui/shared/sort/getSortParamsFromValue';
 import TxsContent from './TxsContent';
 
 type Props = {
-  // eslint-disable-next-line max-len
+
   query: QueryWithPagesResult<'address_txs'>;
   showBlockInfo?: boolean;
   showSocketInfo?: boolean;
@@ -22,7 +22,7 @@ type Props = {
   top?: number;
   sorting: TransactionsSortingValue | undefined;
   setSort: (value?: TransactionsSortingValue) => void;
-}
+};
 
 const TxsWithAPISorting = ({
   filter,
diff --git a/ui/txs/TxsWithFrontendSorting.tsx b/ui/txs/TxsWithFrontendSorting.tsx
index 913a7fb8a4..0f7c75dbb4 100644
--- a/ui/txs/TxsWithFrontendSorting.tsx
+++ b/ui/txs/TxsWithFrontendSorting.tsx
@@ -19,7 +19,7 @@ type Props = {
   filterValue?: AddressFromToFilter;
   enableTimeIncrement?: boolean;
   top?: number;
-}
+};
 
 const TxsWithFrontendSorting = ({
   filter,
diff --git a/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_dark-color-mode_regular-transaction-dark-mode-1.png b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_dark-color-mode_regular-transaction-dark-mode-1.png
new file mode 100644
index 0000000000..c459a91b23
Binary files /dev/null and b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_dark-color-mode_regular-transaction-dark-mode-1.png differ
diff --git a/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_default_blob-transaction-1.png b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_default_blob-transaction-1.png
new file mode 100644
index 0000000000..ef2c7bdc3a
Binary files /dev/null and b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_default_blob-transaction-1.png differ
diff --git a/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_default_regular-transaction-dark-mode-1.png b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_default_regular-transaction-dark-mode-1.png
new file mode 100644
index 0000000000..65a51da6a2
Binary files /dev/null and b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_default_regular-transaction-dark-mode-1.png differ
diff --git a/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_mobile_regular-transaction-mobile---default-1.png b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_mobile_regular-transaction-mobile---default-1.png
new file mode 100644
index 0000000000..0d25a8e318
Binary files /dev/null and b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_mobile_regular-transaction-mobile---default-1.png differ
diff --git a/ui/txs/__screenshots__/TxsListItem.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/txs/__screenshots__/TxsListItem.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
index 407b23ea67..efc05d9a88 100644
Binary files a/ui/txs/__screenshots__/TxsListItem.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/txs/__screenshots__/TxsListItem.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_base-view-dark-mode-1.png b/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_base-view-dark-mode-1.png
index f05b6f2ebc..bf8834a826 100644
Binary files a/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_base-view-dark-mode-1.png and b/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-base-address-1.png b/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-base-address-1.png
index 664af3b022..85e1983589 100644
Binary files a/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-base-address-1.png and b/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-base-address-1.png differ
diff --git a/ui/txs/__screenshots__/TxsStats.pw.tsx_default_base-view-mobile-1.png b/ui/txs/__screenshots__/TxsStats.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..cbd0c9fa51
Binary files /dev/null and b/ui/txs/__screenshots__/TxsStats.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/txs/__screenshots__/TxsStats.pw.tsx_mobile_base-view-mobile-1.png b/ui/txs/__screenshots__/TxsStats.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..65bc5274ab
Binary files /dev/null and b/ui/txs/__screenshots__/TxsStats.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/txs/__screenshots__/TxsTable.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/txs/__screenshots__/TxsTable.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
index 7c7587256b..13ba96d487 100644
Binary files a/ui/txs/__screenshots__/TxsTable.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/txs/__screenshots__/TxsTable.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-dark-mode-1.png b/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-dark-mode-1.png
index 97a42a009c..db0fa1b82e 100644
Binary files a/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-dark-mode-1.png and b/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-screen-xl-1.png b/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-screen-xl-1.png
deleted file mode 100644
index 59a897206e..0000000000
Binary files a/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-screen-xl-1.png and /dev/null differ
diff --git a/ui/txs/__screenshots__/TxsTable.pw.tsx_default_screen-xl-base-view-1.png b/ui/txs/__screenshots__/TxsTable.pw.tsx_default_screen-xl-base-view-1.png
new file mode 100644
index 0000000000..e8e0f4ba43
Binary files /dev/null and b/ui/txs/__screenshots__/TxsTable.pw.tsx_default_screen-xl-base-view-1.png differ
diff --git a/ui/txs/noves/useDescribeTxs.tsx b/ui/txs/noves/useDescribeTxs.tsx
new file mode 100644
index 0000000000..1d2f611da4
--- /dev/null
+++ b/ui/txs/noves/useDescribeTxs.tsx
@@ -0,0 +1,90 @@
+import { useQuery } from '@tanstack/react-query';
+import _chunk from 'lodash/chunk';
+import _uniq from 'lodash/uniq';
+import React from 'react';
+
+import type { NovesDescribeTxsResponse } from 'types/api/noves';
+import type { Transaction } from 'types/api/transaction';
+
+import config from 'configs/app';
+import useApiFetch from 'lib/api/useApiFetch';
+
+const feature = config.features.txInterpretation;
+
+const translateEnabled = feature.isEnabled && feature.provider === 'noves';
+
+export default function useDescribeTxs(items: Array<Transaction> | undefined, viewAsAccountAddress: string | undefined, isPlaceholderData: boolean) {
+  const apiFetch = useApiFetch();
+
+  const txsHash = _uniq(items?.map(i => i.hash));
+  const txChunks = _chunk(txsHash, 10);
+
+  const queryKey = {
+    viewAsAccountAddress,
+    firstHash: txsHash[0] || '',
+    lastHash: txsHash[txsHash.length - 1] || '',
+  };
+
+  const describeQuery = useQuery({
+    queryKey: [ 'noves_describe_txs', queryKey ],
+    queryFn: async() => {
+      const queries = txChunks.map((hashes) => {
+        if (hashes.length === 0) {
+          return Promise.resolve([]);
+        }
+
+        return apiFetch('noves_describe_txs', {
+          queryParams: {
+            viewAsAccountAddress,
+            hashes,
+          },
+        }) as Promise<NovesDescribeTxsResponse>;
+      });
+
+      return Promise.all(queries);
+    },
+    select: (data) => {
+      return data.flat();
+    },
+    enabled: translateEnabled && !isPlaceholderData,
+  });
+
+  const itemsWithTranslation = React.useMemo(() => items?.map(tx => {
+    const queryData = describeQuery.data;
+    const isLoading = describeQuery.isLoading;
+
+    if (isLoading) {
+      return {
+        ...tx,
+        translation: {
+          isLoading,
+        },
+      };
+    }
+
+    if (!queryData || !translateEnabled) {
+      return tx;
+    }
+
+    const query = queryData.find(data => data.txHash.toLowerCase() === tx.hash.toLowerCase());
+
+    if (query) {
+      return {
+        ...tx,
+        translation: {
+          data: query,
+          isLoading: false,
+        },
+      };
+    }
+
+    return tx;
+  }), [ items, describeQuery.data, describeQuery.isLoading ]);
+
+  if (!translateEnabled || isPlaceholderData) {
+    return items;
+  }
+
+  // return same "items" array of Transaction with a new "translation" field.
+  return itemsWithTranslation;
+}
diff --git a/ui/txs/noves/utils.ts b/ui/txs/noves/utils.ts
new file mode 100644
index 0000000000..0197b38e7c
--- /dev/null
+++ b/ui/txs/noves/utils.ts
@@ -0,0 +1,13 @@
+import capitalizeFirstLetter from 'lib/capitalizeFirstLetter';
+
+export function camelCaseToSentence(camelCaseString: string | undefined) {
+  if (!camelCaseString) {
+    return '';
+  }
+
+  let sentence = camelCaseString.replace(/([a-z])([A-Z])/g, '$1 $2');
+  sentence = sentence.replace(/([A-Z])([A-Z][a-z])/g, '$1 $2');
+  sentence = capitalizeFirstLetter(sentence);
+
+  return sentence;
+}
diff --git a/ui/txs/sortTxs.test.ts b/ui/txs/sortTxs.test.ts
new file mode 100644
index 0000000000..d4d33e5b92
--- /dev/null
+++ b/ui/txs/sortTxs.test.ts
@@ -0,0 +1,79 @@
+import type { Transaction } from 'types/api/transaction';
+
+import sortTxs, { sortTxsFromSocket } from './sortTxs';
+
+describe('sortTxs', () => {
+  it('should sort transactions by value in descending order', () => {
+    const txs = [
+      { value: '42' },
+      { value: '11' },
+      { value: '24' },
+    ] as Array<Transaction>;
+    const result = txs.sort(sortTxs('value-desc'));
+    expect(result).toEqual([
+      { value: '42' },
+      { value: '24' },
+      { value: '11' },
+    ]);
+  });
+
+  it('should sort transactions by value in ascending order', () => {
+    const txs = [
+      { value: '42' },
+      { value: '11' },
+      { value: '24' },
+    ] as Array<Transaction>;
+    const result = txs.sort(sortTxs('value-asc'));
+    expect(result).toEqual([
+      { value: '11' },
+      { value: '24' },
+      { value: '42' },
+    ]);
+  });
+
+  it('should sort transactions by fee in descending order', () => {
+    const txs = [
+      { fee: { value: '42' } },
+      { fee: { value: '11' } },
+      { fee: { value: '24' } },
+    ] as Array<Transaction>;
+    const result = txs.sort(sortTxs('fee-desc'));
+    expect(result).toEqual([
+      { fee: { value: '42' } },
+      { fee: { value: '24' } },
+      { fee: { value: '11' } },
+    ]);
+  });
+
+  it('should sort transactions by fee in ascending order', () => {
+    const txs = [
+      { fee: { value: '42' } },
+      { fee: { value: '11' } },
+      { fee: { value: '24' } },
+    ] as Array<Transaction>;
+    const result = txs.sort(sortTxs('fee-asc'));
+    expect(result).toEqual([
+      { fee: { value: '11' } },
+      { fee: { value: '24' } },
+      { fee: { value: '42' } },
+    ]);
+  });
+});
+
+describe('sortTxsFromSocket', () => {
+  it('should sort transaction by age in ascending order if sorting is not provided', () => {
+    const txs = [
+      { timestamp: '2022-11-01T12:33:00Z' },
+      { timestamp: '2022-11-01T12:00:00Z' },
+      { timestamp: null },
+      { timestamp: '2022-11-03T03:03:00Z' },
+    ] as Array<Transaction>;
+    const result = txs.sort(sortTxsFromSocket(undefined));
+    expect(result).toEqual([
+      { timestamp: null },
+      { timestamp: '2022-11-03T03:03:00Z' },
+      { timestamp: '2022-11-01T12:33:00Z' },
+      { timestamp: '2022-11-01T12:00:00Z' },
+    ]);
+  });
+});
diff --git a/ui/txs/sortTxs.ts b/ui/txs/sortTxs.ts
new file mode 100644
index 0000000000..3993612e4c
--- /dev/null
+++ b/ui/txs/sortTxs.ts
@@ -0,0 +1,38 @@
+import type { Transaction, TransactionsSortingValue } from 'types/api/transaction';
+
+import compareBns from 'lib/bigint/compareBns';
+
+export default function sortTxs(sorting: TransactionsSortingValue | undefined) {
+  return function sortingFn(tx1: Transaction, tx2: Transaction) {
+    switch (sorting) {
+      case 'value-desc':
+        return compareBns(tx2.value, tx1.value);
+      case 'value-asc':
+        return compareBns(tx1.value, tx2.value);
+      case 'fee-desc':
+        return compareBns(tx2.fee.value || 0, tx1.fee.value || 0);
+      case 'fee-asc':
+        return compareBns(tx1.fee.value || 0, tx2.fee.value || 0);
+      default:
+        return 0;
+    }
+  };
+}
+
+export function sortTxsFromSocket(sorting: TransactionsSortingValue | undefined) {
+  if (sorting) {
+    return sortTxs(sorting);
+  }
+
+  return function sortingFn(tx1: Transaction, tx2: Transaction) {
+    if (!tx1.timestamp) {
+      return -1;
+    }
+
+    if (!tx2.timestamp) {
+      return 1;
+    }
+
+    return tx2.timestamp.localeCompare(tx1.timestamp);
+  };
+}
diff --git a/ui/txs/useTxsSort.tsx b/ui/txs/useTxsSort.tsx
index bee6eefddd..b3a77e5514 100644
--- a/ui/txs/useTxsSort.tsx
+++ b/ui/txs/useTxsSort.tsx
@@ -1,19 +1,20 @@
 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
-import type { Transaction, TransactionsSortingValue, TxsResponse } from 'types/api/transaction';
+import type { TransactionsSortingValue, TxsResponse } from 'types/api/transaction';
+import type { SelectOption } from 'ui/shared/select/types';
 
 import type { ResourceError } from 'lib/api/resources';
-import compareBns from 'lib/bigint/compareBns';
 import * as cookies from 'lib/cookies';
-import type { Option } from 'ui/shared/sort/Sort';
 
-export const SORT_OPTIONS: Array<Option<TransactionsSortingValue>> = [
-  { title: 'Default', id: undefined },
-  { title: 'Value ascending', id: 'value-asc' },
-  { title: 'Value descending', id: 'value-desc' },
-  { title: 'Fee ascending', id: 'fee-asc' },
-  { title: 'Fee descending', id: 'fee-desc' },
+import sortTxs from './sortTxs';
+
+export const SORT_OPTIONS: Array<SelectOption<TransactionsSortingValue>> = [
+  { label: 'Default', value: undefined },
+  { label: 'Value ascending', value: 'value-asc' },
+  { label: 'Value descending', value: 'value-desc' },
+  { label: 'Fee ascending', value: 'fee-asc' },
+  { label: 'Fee descending', value: 'fee-desc' },
 ];
 
 type SortingValue = TransactionsSortingValue | undefined;
@@ -21,21 +22,6 @@ type SortingValue = TransactionsSortingValue | undefined;
 type HookResult = UseQueryResult<TxsResponse, ResourceError<unknown>> & {
   sorting: SortingValue;
   setSortByValue: (value: SortingValue) => void;
-}
-
-const sortTxs = (sorting: SortingValue) => (tx1: Transaction, tx2: Transaction) => {
-  switch (sorting) {
-    case 'value-desc':
-      return compareBns(tx1.value, tx2.value);
-    case 'value-asc':
-      return compareBns(tx2.value, tx1.value);
-    case 'fee-desc':
-      return compareBns(tx1.fee.value || 0, tx2.fee.value || 0);
-    case 'fee-asc':
-      return compareBns(tx2.fee.value || 0, tx1.fee.value || 0);
-    default:
-      return 0;
-  }
 };
 
 export default function useTxsSort(
diff --git a/ui/userOp/UserOpCallData.tsx b/ui/userOp/UserOpCallData.tsx
new file mode 100644
index 0000000000..08e962f696
--- /dev/null
+++ b/ui/userOp/UserOpCallData.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+import type { UserOp } from 'types/api/userOps';
+
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import RawInputData from 'ui/shared/RawInputData';
+
+import UserOpCallDataSwitch from './UserOpCallDataSwitch';
+
+interface Props {
+  data: UserOp;
+}
+
+const UserOpDecodedCallData = ({ data }: Props) => {
+
+  const [ callData, setCallData ] = React.useState<string | null>(data.execute_call_data || data.call_data);
+
+  const handleSwitchChange = React.useCallback((isChecked: boolean) => {
+    setCallData(isChecked ? data.call_data : data.execute_call_data);
+  }, [ data ]);
+
+  if (!callData) {
+    return null;
+  }
+
+  const toggler = data.call_data && data.execute_call_data ? (
+    <UserOpCallDataSwitch
+      onChange={ handleSwitchChange }
+      initialValue={ false }
+      ml={{ base: 3, lg: 'auto' }}
+    />
+  ) : null;
+
+  const labelText = data.call_data && !data.execute_call_data ? 'External call data' : 'Call data';
+
+  return (
+    <>
+      <DetailsInfoItem.Label
+        hint="Data that’s passed to the sender for execution"
+      >
+        { labelText }
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <RawInputData hex={ callData } rightSlot={ toggler }/>
+      </DetailsInfoItem.Value>
+    </>
+  );
+};
+
+export default React.memo(UserOpDecodedCallData);
diff --git a/ui/userOp/UserOpCallDataSwitch.tsx b/ui/userOp/UserOpCallDataSwitch.tsx
new file mode 100644
index 0000000000..17b54f7864
--- /dev/null
+++ b/ui/userOp/UserOpCallDataSwitch.tsx
@@ -0,0 +1,35 @@
+import { chakra, FormLabel, FormControl, Switch } from '@chakra-ui/react';
+import React from 'react';
+
+import Hint from 'ui/shared/Hint';
+
+interface Props {
+  onChange: (isChecked: boolean) => void;
+  initialValue?: boolean;
+  isDisabled?: boolean;
+  className?: string;
+}
+
+const UserOpCallDataSwitch = ({ className, initialValue, isDisabled, onChange }: Props) => {
+  const [ isChecked, setIsChecked ] = React.useState(initialValue ?? false);
+
+  const handleChange = React.useCallback(() => {
+    setIsChecked((prevValue) => {
+      const nextValue = !prevValue;
+      onChange(nextValue);
+      return nextValue;
+    });
+  }, [ onChange ]);
+
+  return (
+    <FormControl className={ className } display="flex" columnGap={ 2 } ml="auto" w="fit-content">
+      <FormLabel htmlFor="isExternal" fontSize="sm" lineHeight={ 5 } fontWeight={ 600 } m={ 0 }>
+        Show external call data
+      </FormLabel>
+      <Switch id="isExternal" isChecked={ isChecked } isDisabled={ isDisabled } onChange={ handleChange }/>
+      <Hint label="Inner call data is a predicted decoded call from this user operation"/>
+    </FormControl>
+  );
+};
+
+export default React.memo(chakra(UserOpCallDataSwitch));
diff --git a/ui/userOp/UserOpDecodedCallData.tsx b/ui/userOp/UserOpDecodedCallData.tsx
new file mode 100644
index 0000000000..c896a23836
--- /dev/null
+++ b/ui/userOp/UserOpDecodedCallData.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+
+import type { UserOp } from 'types/api/userOps';
+
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
+
+import UserOpCallDataSwitch from './UserOpCallDataSwitch';
+
+interface Props {
+  data: UserOp;
+}
+
+const UserOpDecodedCallData = ({ data }: Props) => {
+
+  const [ callData, setCallData ] = React.useState(data.decoded_execute_call_data || data.decoded_call_data);
+
+  const handleSwitchChange = React.useCallback((isChecked: boolean) => {
+    setCallData(isChecked ? data.decoded_call_data : data.decoded_execute_call_data);
+  }, [ data ]);
+
+  if (!callData) {
+    return null;
+  }
+
+  const toggler = data.decoded_call_data && data.decoded_execute_call_data ? (
+    <UserOpCallDataSwitch
+      onChange={ handleSwitchChange }
+      initialValue={ false }
+      ml={{ base: 0, lg: 'auto' }}
+    />
+  ) : null;
+
+  const labelText = data.call_data && !data.execute_call_data ? 'Decoded external call data' : 'Decoded call data';
+
+  return (
+    <>
+      <DetailsInfoItem.Label
+        hint={ labelText }
+      >
+        { labelText }
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value
+        flexDir={{ base: 'column', lg: 'row' }}
+        alignItems={{ base: 'flex-start', lg: 'center' }}
+      >
+        <LogDecodedInputData data={ callData } rightSlot={ toggler }/>
+      </DetailsInfoItem.Value>
+    </>
+  );
+};
+
+export default React.memo(UserOpDecodedCallData);
diff --git a/ui/userOp/UserOpDetails.tsx b/ui/userOp/UserOpDetails.tsx
index 31e0e9295f..9aad7a9bb3 100644
--- a/ui/userOp/UserOpDetails.tsx
+++ b/ui/userOp/UserOpDetails.tsx
@@ -12,20 +12,24 @@ import { WEI, WEI_IN_GWEI } from 'lib/consts';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
 import { space } from 'lib/html-entities';
 import { currencyUnits } from 'lib/units';
+import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
 import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
+import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
-import RawInputData from 'ui/shared/RawInputData';
-import UserOpsAddress from 'ui/shared/userOps/UserOpsAddress';
 import UserOpSponsorType from 'ui/shared/userOps/UserOpSponsorType';
 import UserOpStatus from 'ui/shared/userOps/UserOpStatus';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
+import UserOpCallData from './UserOpCallData';
+import UserOpDecodedCallData from './UserOpDecodedCallData';
+import UserOpDetailsActions from './UserOpDetailsActions';
+
 interface Props {
   query: UseQueryResult<UserOp, ResourceError>;
 }
@@ -46,7 +50,7 @@ const UserOpDetails = ({ query }: Props) => {
   }, []);
 
   if (isError) {
-    if (error?.status === 400 || error?.status === 404 || error?.status === 422) {
+    if (error?.status === 400 || isCustomAppError(error)) {
       throwOnResourceLoadError({ isError, error });
     }
 
@@ -64,78 +68,108 @@ const UserOpDetails = ({ query }: Props) => {
       templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 220px) minmax(0, 1fr)' }}
       overflow="hidden"
     >
-      <DetailsInfoItem
-        title="User operation hash"
+      <DetailsInfoItem.Label
         hint="Unique character string assigned to every User operation"
         isLoading={ isPlaceholderData }
       >
+        User operation hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
           <UserOpEntity hash={ data.hash } noIcon noLink noCopy={ false }/>
         </Skeleton>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Sender"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="The address of the smart contract account"
         isLoading={ isPlaceholderData }
       >
-        <UserOpsAddress address={ data.sender } isLoading={ isPlaceholderData }/>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Status"
+        Sender
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <AddressStringOrParam address={ data.sender } isLoading={ isPlaceholderData }/>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Current User operation state"
         isLoading={ isPlaceholderData }
       >
+        Status
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <UserOpStatus status={ data.status } isLoading={ isPlaceholderData }/>
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
+
       { data.revert_reason && (
-        <DetailsInfoItem
-          title="Revert reason"
-          hint="The revert reason of the User operation"
-          isLoading={ isPlaceholderData }
-          wordBreak="break-all"
-          whiteSpace="normal"
-        >
-          <Skeleton isLoaded={ !isPlaceholderData }>
-            { data.revert_reason }
-          </Skeleton>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="The revert reason of the User operation"
+            isLoading={ isPlaceholderData }
+          >
+            Revert reason
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value
+            wordBreak="break-all"
+            whiteSpace="normal"
+          >
+            <Skeleton isLoaded={ !isPlaceholderData }>
+              { data.revert_reason }
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       { data.timestamp && (
-        <DetailsInfoItem
-          title="Timestamp"
-          hint="Date and time of User operation"
-          isLoading={ isPlaceholderData }
-        >
-          <DetailsTimestamp timestamp={ data.timestamp } isLoading={ isPlaceholderData }/>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Date and time of User operation"
+            isLoading={ isPlaceholderData }
+          >
+            Timestamp
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <DetailsTimestamp timestamp={ data.timestamp } isLoading={ isPlaceholderData }/>
+          </DetailsInfoItem.Value>
+        </>
+
       ) }
       { !config.UI.views.tx.hiddenFields?.tx_fee && (
-        <DetailsInfoItem
-          title="Fee"
-          hint="Total User operation fee"
-          isLoading={ isPlaceholderData }
-        >
-          <CurrencyValue
-            value={ data.fee }
-            currency={ currencyUnits.ether }
+        <>
+          <DetailsInfoItem.Label
+            hint="Total User operation fee"
             isLoading={ isPlaceholderData }
-          />
-        </DetailsInfoItem>
+          >
+            Fee
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <CurrencyValue
+              value={ data.fee }
+              currency={ currencyUnits.ether }
+              isLoading={ isPlaceholderData }
+            />
+          </DetailsInfoItem.Value>
+        </>
       ) }
-      <DetailsInfoItem
-        title="Gas limit"
+
+      <DetailsInfoItem.Label
         hint="Gas limit for the User operation"
         isLoading={ isPlaceholderData }
       >
+        Gas limit
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData }>
           { BigNumber(data.gas).toFormat() }
         </Skeleton>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Gas used"
-        hint="Actual gas amount used by the the User operation"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        hint="Actual gas amount used by the User operation"
         isLoading={ isPlaceholderData }
       >
+        Gas used
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData }>
           { BigNumber(data.gas_used).toFormat() }
         </Skeleton>
@@ -145,28 +179,39 @@ const UserOpDetails = ({ query }: Props) => {
           value={ BigNumber(data.gas_used).dividedBy(BigNumber(data.gas)).toNumber() }
           isLoading={ isPlaceholderData }
         />
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Transaction hash"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Hash of the transaction this User operation belongs to"
         isLoading={ isPlaceholderData }
       >
+        Transaction hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <TxEntity hash={ data.transaction_hash } isLoading={ isPlaceholderData } noCopy={ false }/>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Block"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Block number containing this User operation"
         isLoading={ isPlaceholderData }
       >
-        <BlockEntity number={ data.block_number } isLoading={ isPlaceholderData }/>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Entry point"
+        Block
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <BlockEntity number={ Number(data.block_number) } isLoading={ isPlaceholderData }/>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Contract that executes bundles of User operations"
         isLoading={ isPlaceholderData }
       >
-        <UserOpsAddress address={ data.entry_point } isLoading={ isPlaceholderData }/>
-      </DetailsInfoItem>
+        Entry point
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <AddressStringOrParam address={ data.entry_point } isLoading={ isPlaceholderData }/>
+      </DetailsInfoItem.Value>
+
+      { config.features.txInterpretation.isEnabled && <UserOpDetailsActions hash={ data.hash } isUserOpDataLoading={ isPlaceholderData }/> }
 
       { /* CUT */ }
       <GridItem colSpan={{ base: undefined, lg: 2 }}>
@@ -189,118 +234,162 @@ const UserOpDetails = ({ query }: Props) => {
         <>
           <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
 
-          <DetailsInfoItem
-            title="Call gas limit"
+          <DetailsInfoItem.Label
             hint="Gas limit for execution phase"
           >
+            Call gas limit
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
             { BigNumber(data.call_gas_limit).toFormat() }
-          </DetailsInfoItem>
-          <DetailsInfoItem
-            title="Verification gas limit"
+          </DetailsInfoItem.Value>
+
+          <DetailsInfoItem.Label
             hint="Gas limit for verification phase"
           >
+            Verification gas limit
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
             { BigNumber(data.verification_gas_limit).toFormat() }
-          </DetailsInfoItem>
-          <DetailsInfoItem
-            title="Pre-verification gas"
+          </DetailsInfoItem.Value>
+
+          <DetailsInfoItem.Label
             hint="Gas to compensate the bundler"
           >
+            Pre-verification gas
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
             { BigNumber(data.pre_verification_gas).toFormat() }
-          </DetailsInfoItem>
+          </DetailsInfoItem.Value>
+
           { !config.UI.views.tx.hiddenFields?.gas_fees && (
             <>
-              <DetailsInfoItem
-                title="Max fee per gas"
+              <DetailsInfoItem.Label
                 hint="Maximum fee per gas "
               >
+                Max fee per gas
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
                 <Text>{ BigNumber(data.max_fee_per_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text>
                 <Text variant="secondary" whiteSpace="pre">
                   { space }({ BigNumber(data.max_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })
                 </Text>
-              </DetailsInfoItem><DetailsInfoItem
-                title="Max priority fee per gas"
+              </DetailsInfoItem.Value>
+
+              <DetailsInfoItem.Label
                 hint="Maximum priority fee per gas"
               >
+                Max priority fee per gas
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
                 <Text>{ BigNumber(data.max_priority_fee_per_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text>
                 <Text variant="secondary" whiteSpace="pre">
                   { space }({ BigNumber(data.max_priority_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })
                 </Text>
-              </DetailsInfoItem>
+              </DetailsInfoItem.Value>
             </>
           ) }
 
           <DetailsInfoItemDivider/>
 
           { data.aggregator && (
-            <DetailsInfoItem
-              title="Aggregator"
-              hint="Helper contract to validate an aggregated signature"
-            >
-              <UserOpsAddress address={ data.aggregator }/>
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="Helper contract to validate an aggregated signature"
+              >
+                Aggregator
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <AddressStringOrParam address={ data.aggregator }/>
+              </DetailsInfoItem.Value>
+            </>
           ) }
+
           { data.aggregator_signature && (
-            <DetailsInfoItem
-              title="Aggregator signature"
-              hint="Aggregator signature"
-            >
-              { data.aggregator_signature }
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="Aggregator signature"
+              >
+                Aggregator signature
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                { data.aggregator_signature }
+              </DetailsInfoItem.Value>
+            </>
           ) }
-          <DetailsInfoItem
-            title="Bundler"
+
+          <DetailsInfoItem.Label
             hint="A node (block builder) that handles User operations"
           >
-            <UserOpsAddress address={ data.bundler }/>
-          </DetailsInfoItem>
+            Bundler
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <AddressStringOrParam address={ data.bundler }/>
+          </DetailsInfoItem.Value>
+
           { data.factory && (
-            <DetailsInfoItem
-              title="Factory"
-              hint="Smart contract that deploys new smart contract wallets for users"
-            >
-              <UserOpsAddress address={ data.factory }/>
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="Smart contract that deploys new smart contract wallets for users"
+              >
+                Factory
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <AddressStringOrParam address={ data.factory }/>
+              </DetailsInfoItem.Value>
+            </>
           ) }
+
           { data.paymaster && (
-            <DetailsInfoItem
-              title="Paymaster"
-              hint="Contract to sponsor the gas fees for User operations"
-            >
-              <UserOpsAddress address={ data.paymaster }/>
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="Contract to sponsor the gas fees for User operations"
+              >
+                Paymaster
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <AddressStringOrParam address={ data.paymaster }/>
+              </DetailsInfoItem.Value>
+            </>
           ) }
-          <DetailsInfoItem
-            title="Sponsor type"
+
+          <DetailsInfoItem.Label
             hint="Type of the gas fees sponsor"
           >
+            Sponsor type
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
             <UserOpSponsorType sponsorType={ data.sponsor_type }/>
-          </DetailsInfoItem>
+          </DetailsInfoItem.Value>
 
           <DetailsInfoItemDivider/>
 
-          <DetailsInfoItem
-            title="Signature"
+          <DetailsInfoItem.Label
             hint="Used to validate a User operation along with the nonce during verification"
+          >
+            Signature
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value
             wordBreak="break-all"
             whiteSpace="normal"
-
           >
             { data.signature }
-          </DetailsInfoItem>
-          <DetailsInfoItem
-            title="Nonce"
+          </DetailsInfoItem.Value>
+
+          <DetailsInfoItem.Label
             hint="Anti-replay protection; also used as the salt for first-time account creation"
+          >
+            Nonce
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value
             wordBreak="break-all"
             whiteSpace="normal"
           >
             { data.nonce }
-          </DetailsInfoItem>
-          <DetailsInfoItem
-            title="Call data"
-            hint="Data that’s passed to the sender for execution"
-          >
-            <RawInputData hex={ data.call_data }/>
-          </DetailsInfoItem>
+          </DetailsInfoItem.Value>
+
+          <UserOpCallData data={ data }/>
+
+          <UserOpDecodedCallData data={ data }/>
         </>
       ) }
     </Grid>
diff --git a/ui/userOp/UserOpDetailsActions.tsx b/ui/userOp/UserOpDetailsActions.tsx
new file mode 100644
index 0000000000..8a08e8f1c7
--- /dev/null
+++ b/ui/userOp/UserOpDetailsActions.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { TX_INTERPRETATION } from 'stubs/txInterpretation';
+import DetailsActionsWrapper from 'ui/shared/DetailsActionsWrapper';
+import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
+import TxInterpretation from 'ui/shared/tx/interpretation/TxInterpretation';
+
+interface Props {
+  hash?: string;
+  isUserOpDataLoading: boolean;
+}
+
+const TxDetailsActionsInterpretation = ({ hash, isUserOpDataLoading }: Props) => {
+  const interpretationQuery = useApiQuery('user_op_interpretation', {
+    pathParams: { hash },
+    queryOptions: {
+      enabled: Boolean(hash) && !isUserOpDataLoading,
+      placeholderData: TX_INTERPRETATION,
+      refetchOnMount: false,
+    },
+  });
+
+  const actions = interpretationQuery.data?.data.summaries;
+
+  if (!actions || actions.length < 2) {
+    return null;
+  }
+
+  return (
+    <>
+      <DetailsActionsWrapper isLoading={ isUserOpDataLoading || interpretationQuery.isPlaceholderData } type="user_op">
+        { actions.map((action, index: number) => (
+          <TxInterpretation
+            key={ index }
+            summary={ action }
+            isLoading={ isUserOpDataLoading || interpretationQuery.isPlaceholderData }
+          />
+        ),
+        ) }
+      </DetailsActionsWrapper>
+      <DetailsInfoItemDivider/>
+    </>
+  );
+};
+
+export default TxDetailsActionsInterpretation;
diff --git a/ui/userOp/UserOpRaw.tsx b/ui/userOp/UserOpRaw.tsx
index 66febf055d..b47b6c05f7 100644
--- a/ui/userOp/UserOpRaw.tsx
+++ b/ui/userOp/UserOpRaw.tsx
@@ -7,7 +7,7 @@ import RawDataSnippet from 'ui/shared/RawDataSnippet';
 
 // order is taken from the ERC-4337 standard
 // eslint-disable-next-line max-len
-const KEYS_ORDER: Array<keyof UserOp['raw']> = [ 'sender', 'nonce', 'init_code', 'call_data', 'call_gas_limit', 'verification_gas_limit', 'pre_verification_gas', 'max_fee_per_gas', 'max_priority_fee_per_gas', 'paymaster_and_data', 'signature' ];
+const KEYS_ORDER: Array<keyof UserOp['raw']> = [ 'sender', 'nonce', 'init_code', 'call_data', 'account_gas_limits', 'call_gas_limit', 'verification_gas_limit', 'pre_verification_gas', 'gas_fees', 'max_fee_per_gas', 'max_priority_fee_per_gas', 'paymaster_and_data', 'signature' ];
 
 interface Props {
   rawData?: UserOp['raw'];
@@ -20,7 +20,10 @@ const UserOpRaw = ({ rawData, isLoading }: Props) => {
   }
 
   const text = JSON.stringify(KEYS_ORDER.reduce((res: UserOp['raw'], key: keyof UserOp['raw']) => {
-    res[key] = rawData[key];
+    const value = rawData[key];
+    if (value !== undefined) {
+      res[key] = value;
+    }
     return res;
   }, {} as UserOp['raw']), undefined, 4);
 
diff --git a/ui/userOp/UserOpSubHeading.tsx b/ui/userOp/UserOpSubHeading.tsx
new file mode 100644
index 0000000000..bb1932eaf9
--- /dev/null
+++ b/ui/userOp/UserOpSubHeading.tsx
@@ -0,0 +1,81 @@
+import { Flex, Link } from '@chakra-ui/react';
+// import type { UseQueryResult } from '@tanstack/react-query';
+import React from 'react';
+
+// import type { UserOp } from 'types/api/userOps';
+
+import config from 'configs/app';
+// import type { ResourceError } from 'lib/api/resources';
+import useApiQuery from 'lib/api/useApiQuery';
+import { TX_INTERPRETATION } from 'stubs/txInterpretation';
+import { TX_ACTIONS_BLOCK_ID } from 'ui/shared/DetailsActionsWrapper';
+import UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
+import TxInterpretation from 'ui/shared/tx/interpretation/TxInterpretation';
+
+type Props = {
+  hash: string;
+  // userOpQuery: UseQueryResult<UserOp, ResourceError<unknown>>;
+};
+
+const UserOpSubHeading = ({ hash }: Props) => {
+  const hasInterpretationFeature = config.features.txInterpretation.isEnabled;
+
+  const txInterpretationQuery = useApiQuery('user_op_interpretation', {
+    pathParams: { hash },
+    queryOptions: {
+      enabled: Boolean(hash) && hasInterpretationFeature,
+      placeholderData: TX_INTERPRETATION,
+    },
+  });
+
+  const hasInterpretation = hasInterpretationFeature &&
+    (txInterpretationQuery.isPlaceholderData || Boolean(txInterpretationQuery.data?.data.summaries.length));
+
+  const hasViewAllInterpretationsLink =
+      !txInterpretationQuery.isPlaceholderData && txInterpretationQuery.data?.data.summaries && txInterpretationQuery.data?.data.summaries.length > 1;
+
+  if (hasInterpretation) {
+    return (
+      <Flex mr={{ base: 0, lg: 6 }} flexWrap="wrap" alignItems="center">
+        <TxInterpretation
+          summary={ txInterpretationQuery.data?.data.summaries[0] }
+          isLoading={ txInterpretationQuery.isPlaceholderData }
+          fontSize="lg"
+          mr={ hasViewAllInterpretationsLink ? 3 : 0 }
+        />
+        { hasViewAllInterpretationsLink &&
+          <Link href={ `#${ TX_ACTIONS_BLOCK_ID }` }>View all</Link> }
+      </Flex>
+    );
+    // fallback will be added later
+
+    // } else if (hasInterpretationFeature && userOpQuery.data?.decoded_call_data.method_call && userOpQuery.data?.sender && userOpQuery.data?.to) {
+    //   return (
+    //     <TxInterpretation
+    //       summary={{
+    //         summary_template: `{sender_hash} called {method} on {receiver_hash}`,
+    //         summary_template_variables: {
+    //           sender_hash: {
+    //             type: 'address',
+    //             value: txQuery.data.from,
+    //           },
+    //           method: {
+    //             type: 'method',
+    //             value: txQuery.data.method,
+    //           },
+    //           receiver_hash: {
+    //             type: 'address',
+    //             value: txQuery.data.to,
+    //           },
+    //         },
+    //       }}
+    //       isLoading={ txQuery.isPlaceholderData }
+    //       fontSize="lg"
+    //     />
+    //   );
+  } else {
+    return <UserOpEntity hash={ hash } noLink noCopy={ false } fontWeight={ 500 } fontFamily="heading"/>;
+  }
+};
+
+export default UserOpSubHeading;
diff --git a/ui/userOps/UserOpsContent.tsx b/ui/userOps/UserOpsContent.tsx
index 8d2b8c756c..829ad5b948 100644
--- a/ui/userOps/UserOpsContent.tsx
+++ b/ui/userOps/UserOpsContent.tsx
@@ -1,7 +1,7 @@
 import { Hide, Show } from '@chakra-ui/react';
 import React from 'react';
 
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
@@ -26,7 +26,7 @@ const UserOpsContent = ({ query, showTx = true, showSender = true }: Props) => {
       <Hide below="lg" ssr={ false }>
         <UserOpsTable
           items={ query.data.items }
-          top={ query.pagination.isVisible ? 80 : 0 }
+          top={ query.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
           isLoading={ query.isPlaceholderData }
           showTx={ showTx }
           showSender={ showSender }
diff --git a/ui/userOps/UserOpsListItem.tsx b/ui/userOps/UserOpsListItem.tsx
index e3eb68b5bc..df9a97660a 100644
--- a/ui/userOps/UserOpsListItem.tsx
+++ b/ui/userOps/UserOpsListItem.tsx
@@ -4,13 +4,13 @@ import React from 'react';
 import type { UserOpsItem } from 'types/api/userOps';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
 import CurrencyValue from 'ui/shared/CurrencyValue';
+import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
-import UserOpsAddress from 'ui/shared/userOps/UserOpsAddress';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import UserOpStatus from 'ui/shared/userOps/UserOpStatus';
 
 type Props = {
@@ -21,19 +21,22 @@ type Props = {
 };
 
 const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => {
-  const timeAgo = dayjs(item.timestamp).fromNow();
-
   return (
     <ListItemMobileGrid.Container gridTemplateColumns="100px auto">
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>User op hash</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <UserOpEntity hash={ item.hash } isLoading={ isLoading } fontWeight="700" noIcon/>
+        <UserOpEntity hash={ item.hash } isLoading={ isLoading } fontWeight="700" noIcon truncation="constant_long"/>
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block"><span>{ timeAgo }</span></Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Status</ListItemMobileGrid.Label>
@@ -45,9 +48,10 @@ const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => {
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>Sender</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
-            <UserOpsAddress
+            <AddressStringOrParam
               address={ item.address }
               isLoading={ isLoading }
+              truncation="constant"
             />
           </ListItemMobileGrid.Value>
         </>
@@ -61,6 +65,7 @@ const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => {
               hash={ item.transaction_hash }
               isLoading={ isLoading }
               noIcon
+              truncation="constant_long"
             />
           </ListItemMobileGrid.Value>
         </>
@@ -69,7 +74,7 @@ const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => {
       <ListItemMobileGrid.Label isLoading={ isLoading }>Block</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <BlockEntity
-          number={ item.block_number }
+          number={ Number(item.block_number) }
           isLoading={ isLoading }
           fontSize="sm"
           lineHeight={ 5 }
diff --git a/ui/userOps/UserOpsTable.tsx b/ui/userOps/UserOpsTable.tsx
index 0478a283e4..4b218812d0 100644
--- a/ui/userOps/UserOpsTable.tsx
+++ b/ui/userOps/UserOpsTable.tsx
@@ -18,7 +18,7 @@ import UserOpsTableItem from './UserOpsTableItem';
 
 const UserOpsTable = ({ items, isLoading, top, showTx, showSender }: Props) => {
   return (
-    <Table variant="simple" size="sm">
+    <Table minW="1000px">
       <Thead top={ top }>
         <Tr>
           <Th w="60%">User op hash</Th>
diff --git a/ui/userOps/UserOpsTableItem.tsx b/ui/userOps/UserOpsTableItem.tsx
index cdd0a74609..926a165457 100644
--- a/ui/userOps/UserOpsTableItem.tsx
+++ b/ui/userOps/UserOpsTableItem.tsx
@@ -1,15 +1,15 @@
-import { Td, Tr, Skeleton } from '@chakra-ui/react';
+import { Td, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { UserOpsItem } from 'types/api/userOps';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
 import CurrencyValue from 'ui/shared/CurrencyValue';
+import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
-import UserOpsAddress from 'ui/shared/userOps/UserOpsAddress';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import UserOpStatus from 'ui/shared/userOps/UserOpStatus';
 
  type Props = {
@@ -20,22 +20,25 @@ import UserOpStatus from 'ui/shared/userOps/UserOpStatus';
  };
 
 const UserOpsTableItem = ({ item, isLoading, showTx, showSender }: Props) => {
-  const timeAgo = dayjs(item.timestamp).fromNow();
-
   return (
     <Tr>
       <Td verticalAlign="middle">
-        <UserOpEntity hash={ item.hash } isLoading={ isLoading } noIcon fontWeight={ 700 }/>
+        <UserOpEntity hash={ item.hash } isLoading={ isLoading } noIcon fontWeight={ 700 } truncation="constant_long"/>
       </Td>
       <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block"><span>{ timeAgo }</span></Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
       </Td>
       <Td verticalAlign="middle">
         <UserOpStatus status={ item.status } isLoading={ isLoading }/>
       </Td>
       { showSender && (
         <Td verticalAlign="middle">
-          <UserOpsAddress
+          <AddressStringOrParam
             address={ item.address }
             isLoading={ isLoading }
             truncation="constant"
@@ -54,7 +57,7 @@ const UserOpsTableItem = ({ item, isLoading, showTx, showSender }: Props) => {
       ) }
       <Td verticalAlign="middle">
         <BlockEntity
-          number={ item.block_number }
+          number={ Number(item.block_number) }
           isLoading={ isLoading }
           fontSize="sm"
           lineHeight={ 5 }
diff --git a/ui/validatorsBlackfort/ValidatorsCounters.tsx b/ui/validatorsBlackfort/ValidatorsCounters.tsx
new file mode 100644
index 0000000000..0901e57688
--- /dev/null
+++ b/ui/validatorsBlackfort/ValidatorsCounters.tsx
@@ -0,0 +1,33 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+import { VALIDATORS_BLACKFORT_COUNTERS } from 'stubs/validators';
+import StatsWidget from 'ui/shared/stats/StatsWidget';
+
+const ValidatorsCounters = () => {
+  const countersQuery = useApiQuery('validators_blackfort_counters', {
+    queryOptions: {
+      enabled: config.features.validators.isEnabled,
+      placeholderData: VALIDATORS_BLACKFORT_COUNTERS,
+    },
+  });
+
+  if (!countersQuery.data) {
+    return null;
+  }
+
+  return (
+    <Box columnGap={ 3 } rowGap={ 3 } mb={ 6 } display="grid" gridTemplateColumns={{ base: '1fr', lg: 'repeat(2, 1fr)' }}>
+      <StatsWidget
+        label="Total validators"
+        value={ Number(countersQuery.data.validators_counter).toLocaleString() }
+        diff={ Number(countersQuery.data.new_validators_counter_24h).toLocaleString() }
+        isLoading={ countersQuery.isPlaceholderData }
+      />
+    </Box>
+  );
+};
+
+export default React.memo(ValidatorsCounters);
diff --git a/ui/validatorsBlackfort/ValidatorsList.tsx b/ui/validatorsBlackfort/ValidatorsList.tsx
new file mode 100644
index 0000000000..90c24fea7e
--- /dev/null
+++ b/ui/validatorsBlackfort/ValidatorsList.tsx
@@ -0,0 +1,22 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ValidatorBlackfort } from 'types/api/validators';
+
+import ValidatorsListItem from './ValidatorsListItem';
+
+const ValidatorsList = ({ data, isLoading }: { data: Array<ValidatorBlackfort>; isLoading: boolean }) => {
+  return (
+    <Box>
+      { data.map((item, index) => (
+        <ValidatorsListItem
+          key={ item.address.hash + (isLoading ? index : '') }
+          data={ item }
+          isLoading={ isLoading }
+        />
+      )) }
+    </Box>
+  );
+};
+
+export default React.memo(ValidatorsList);
diff --git a/ui/validatorsBlackfort/ValidatorsListItem.tsx b/ui/validatorsBlackfort/ValidatorsListItem.tsx
new file mode 100644
index 0000000000..a01a144378
--- /dev/null
+++ b/ui/validatorsBlackfort/ValidatorsListItem.tsx
@@ -0,0 +1,62 @@
+import { Flex, Skeleton } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { ValidatorBlackfort } from 'types/api/validators';
+
+import config from 'configs/app';
+import { currencyUnits } from 'lib/units';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TruncatedValue from 'ui/shared/TruncatedValue';
+
+interface Props {
+  data: ValidatorBlackfort;
+  isLoading?: boolean;
+}
+
+const ValidatorsListItem = ({ data, isLoading }: Props) => {
+
+  return (
+    <ListItemMobileGrid.Container gridTemplateColumns="130px auto">
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Address</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <AddressEntity
+          isLoading={ isLoading }
+          address={ data.address }
+          truncation="constant"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Name</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Flex><TruncatedValue value={ data.name } isLoading={ isLoading }/></Flex>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Commission</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { `${ data.commission / 100 }%` }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Self bonded</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { `${ BigNumber(data.self_bonded_amount).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() } ${ currencyUnits.ether }` }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Delegated amount</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { `${ BigNumber(data.delegated_amount).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() } ${ currencyUnits.ether }` }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default React.memo(ValidatorsListItem);
diff --git a/ui/validatorsBlackfort/ValidatorsTable.tsx b/ui/validatorsBlackfort/ValidatorsTable.tsx
new file mode 100644
index 0000000000..b697eeb86b
--- /dev/null
+++ b/ui/validatorsBlackfort/ValidatorsTable.tsx
@@ -0,0 +1,68 @@
+import { Table, Tbody, Tr, Th, Link } from '@chakra-ui/react';
+import React from 'react';
+
+import type {
+  ValidatorBlackfort,
+  ValidatorsBlackfortSorting,
+  ValidatorsBlackfortSortingField,
+  ValidatorsBlackfortSortingValue,
+} from 'types/api/validators';
+
+import { currencyUnits } from 'lib/units';
+import IconSvg from 'ui/shared/IconSvg';
+import getNextSortValue from 'ui/shared/sort/getNextSortValue';
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import { VALIDATORS_BLACKFORT_SORT_SEQUENCE } from './utils';
+import ValidatorsTableItem from './ValidatorsTableItem';
+
+interface Props {
+  data: Array<ValidatorBlackfort>;
+  sort: ValidatorsBlackfortSortingValue | undefined;
+  setSorting: (val: ValidatorsBlackfortSortingValue | undefined) => void;
+  isLoading?: boolean;
+  top: number;
+}
+
+const ValidatorsTable = ({ data, sort, setSorting, isLoading, top }: Props) => {
+  const sortIconTransform = sort?.includes('asc' as ValidatorsBlackfortSorting['order']) ? 'rotate(-90deg)' : 'rotate(90deg)';
+
+  const onSortToggle = React.useCallback((field: ValidatorsBlackfortSortingField) => () => {
+    const value = getNextSortValue<ValidatorsBlackfortSortingField, ValidatorsBlackfortSortingValue>(VALIDATORS_BLACKFORT_SORT_SEQUENCE, field)(sort);
+    setSorting(value);
+  }, [ sort, setSorting ]);
+
+  return (
+    <Table>
+      <Thead top={ top }>
+        <Tr>
+          <Th>
+            <Link
+              display="flex"
+              alignItems="center"
+              onClick={ isLoading ? undefined : onSortToggle('address_hash') }
+              columnGap={ 1 }
+            >
+              { sort?.includes('address') && <IconSvg name="arrows/east" boxSize={ 4 } transform={ sortIconTransform }/> }
+              Validator’s address
+            </Link>
+          </Th>
+          <Th>Name</Th>
+          <Th isNumeric>Commission</Th>
+          <Th isNumeric>{ `Self bonded ${ currencyUnits.ether }` }</Th>
+          <Th isNumeric>{ `Delegated amount ${ currencyUnits.ether }` }</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { data.map((item, index) => (
+          <ValidatorsTableItem
+            key={ item.address.hash + (isLoading ? index : '') }
+            data={ item }
+            isLoading={ isLoading }/>
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default React.memo(ValidatorsTable);
diff --git a/ui/validatorsBlackfort/ValidatorsTableItem.tsx b/ui/validatorsBlackfort/ValidatorsTableItem.tsx
new file mode 100644
index 0000000000..35e7cd0cbc
--- /dev/null
+++ b/ui/validatorsBlackfort/ValidatorsTableItem.tsx
@@ -0,0 +1,50 @@
+import { Tr, Td, Skeleton, Flex } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { ValidatorBlackfort } from 'types/api/validators';
+
+import config from 'configs/app';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TruncatedValue from 'ui/shared/TruncatedValue';
+
+interface Props {
+  data: ValidatorBlackfort;
+  isLoading?: boolean;
+}
+
+const ValidatorsTableItem = ({ data, isLoading }: Props) => {
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <AddressEntity
+          address={ data.address }
+          isLoading={ isLoading }
+          truncation="constant"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <Flex>
+          <TruncatedValue value={ data.name } isLoading={ isLoading }/>
+        </Flex>
+      </Td>
+      <Td verticalAlign="middle" isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { `${ data.commission / 100 }%` }
+        </Skeleton>
+      </Td>
+      <Td verticalAlign="middle" isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { BigNumber(data.self_bonded_amount).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() }
+        </Skeleton>
+      </Td>
+      <Td verticalAlign="middle" isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { BigNumber(data.delegated_amount).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() }
+        </Skeleton>
+      </Td>
+    </Tr>
+  );
+};
+
+export default React.memo(ValidatorsTableItem);
diff --git a/ui/validatorsBlackfort/utils.ts b/ui/validatorsBlackfort/utils.ts
new file mode 100644
index 0000000000..5a4f4550e2
--- /dev/null
+++ b/ui/validatorsBlackfort/utils.ts
@@ -0,0 +1,15 @@
+import type {
+  ValidatorsBlackfortSortingValue,
+  ValidatorsBlackfortSortingField,
+} from 'types/api/validators';
+import type { SelectOption } from 'ui/shared/select/types';
+
+export const VALIDATORS_BLACKFORT_SORT_OPTIONS: Array<SelectOption<ValidatorsBlackfortSortingValue>> = [
+  { label: 'Default', value: undefined },
+  { label: 'Address descending', value: 'address_hash-desc' },
+  { label: 'Address ascending', value: 'address_hash-asc' },
+];
+
+export const VALIDATORS_BLACKFORT_SORT_SEQUENCE: Record<ValidatorsBlackfortSortingField, Array<ValidatorsBlackfortSortingValue | undefined>> = {
+  address_hash: [ 'address_hash-desc', 'address_hash-asc', undefined ],
+};
diff --git a/ui/validatorsStability/ValidatorsCounters.tsx b/ui/validatorsStability/ValidatorsCounters.tsx
new file mode 100644
index 0000000000..3e76e81312
--- /dev/null
+++ b/ui/validatorsStability/ValidatorsCounters.tsx
@@ -0,0 +1,38 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+import { VALIDATORS_STABILITY_COUNTERS } from 'stubs/validators';
+import StatsWidget from 'ui/shared/stats/StatsWidget';
+
+const ValidatorsCounters = () => {
+  const countersQuery = useApiQuery('validators_stability_counters', {
+    queryOptions: {
+      enabled: config.features.validators.isEnabled,
+      placeholderData: VALIDATORS_STABILITY_COUNTERS,
+    },
+  });
+
+  if (!countersQuery.data) {
+    return null;
+  }
+
+  return (
+    <Box columnGap={ 3 } rowGap={ 3 } mb={ 6 } display="grid" gridTemplateColumns={{ base: '1fr', lg: 'repeat(2, 1fr)' }}>
+      <StatsWidget
+        label="Total validators"
+        value={ Number(countersQuery.data.validators_counter).toLocaleString() }
+        diff={ Number(countersQuery.data.new_validators_counter_24h).toLocaleString() }
+        isLoading={ countersQuery.isPlaceholderData }
+      />
+      <StatsWidget
+        label="Active validators"
+        value={ `${ Number(countersQuery.data.active_validators_percentage).toLocaleString() }%` }
+        isLoading={ countersQuery.isPlaceholderData }
+      />
+    </Box>
+  );
+};
+
+export default React.memo(ValidatorsCounters);
diff --git a/ui/validatorsStability/ValidatorsFilter.tsx b/ui/validatorsStability/ValidatorsFilter.tsx
new file mode 100644
index 0000000000..bcda1b5984
--- /dev/null
+++ b/ui/validatorsStability/ValidatorsFilter.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import type { ValidatorsStabilityFilters } from 'types/api/validators';
+
+import PopoverFilterRadio from 'ui/shared/filters/PopoverFilterRadio';
+
+const OPTIONS = [
+  { value: 'all', label: 'All' },
+  { value: 'active', label: 'Active' },
+  { value: 'probation', label: 'Probation' },
+  { value: 'inactive', label: 'Inactive' },
+];
+
+interface Props {
+  hasActiveFilter: boolean;
+  defaultValue: ValidatorsStabilityFilters['state_filter'] | undefined;
+  onChange: (nextValue: string | Array<string>) => void;
+}
+
+const ValidatorsFilter = ({ onChange, defaultValue, hasActiveFilter }: Props) => {
+  return (
+    <PopoverFilterRadio
+      name="validators_filter"
+      options={ OPTIONS }
+      onChange={ onChange }
+      hasActiveFilter={ hasActiveFilter }
+      defaultValue={ defaultValue || OPTIONS[0].value }
+    />
+  );
+};
+
+export default React.memo(ValidatorsFilter);
diff --git a/ui/validatorsStability/ValidatorsList.tsx b/ui/validatorsStability/ValidatorsList.tsx
new file mode 100644
index 0000000000..1193a908c3
--- /dev/null
+++ b/ui/validatorsStability/ValidatorsList.tsx
@@ -0,0 +1,22 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ValidatorStability } from 'types/api/validators';
+
+import ValidatorsListItem from './ValidatorsListItem';
+
+const ValidatorsList = ({ data, isLoading }: { data: Array<ValidatorStability>; isLoading: boolean }) => {
+  return (
+    <Box>
+      { data.map((item, index) => (
+        <ValidatorsListItem
+          key={ item.address.hash + (isLoading ? index : '') }
+          data={ item }
+          isLoading={ isLoading }
+        />
+      )) }
+    </Box>
+  );
+};
+
+export default React.memo(ValidatorsList);
diff --git a/ui/validatorsStability/ValidatorsListItem.tsx b/ui/validatorsStability/ValidatorsListItem.tsx
new file mode 100644
index 0000000000..668bad3e86
--- /dev/null
+++ b/ui/validatorsStability/ValidatorsListItem.tsx
@@ -0,0 +1,44 @@
+import { Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ValidatorStability } from 'types/api/validators';
+
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import ValidatorStatus from 'ui/shared/statusTag/ValidatorStabilityStatus';
+
+interface Props {
+  data: ValidatorStability;
+  isLoading?: boolean;
+}
+
+const ValidatorsListItem = ({ data, isLoading }: Props) => {
+
+  return (
+    <ListItemMobileGrid.Container>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Address</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <AddressEntity
+          isLoading={ isLoading }
+          address={ data.address }
+          truncation="constant"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Status</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <ValidatorStatus state={ data.state } isLoading={ isLoading }/>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Blocks</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { data.blocks_validated_count.toLocaleString() }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default React.memo(ValidatorsListItem);
diff --git a/ui/validatorsStability/ValidatorsTable.tsx b/ui/validatorsStability/ValidatorsTable.tsx
new file mode 100644
index 0000000000..fb9e61769e
--- /dev/null
+++ b/ui/validatorsStability/ValidatorsTable.tsx
@@ -0,0 +1,76 @@
+import { Table, Tbody, Tr, Th, Link } from '@chakra-ui/react';
+import React from 'react';
+
+import type {
+  ValidatorStability,
+  ValidatorsStabilitySorting,
+  ValidatorsStabilitySortingField,
+  ValidatorsStabilitySortingValue,
+} from 'types/api/validators';
+
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import IconSvg from 'ui/shared/IconSvg';
+import getNextSortValue from 'ui/shared/sort/getNextSortValue';
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import { VALIDATORS_STABILITY_SORT_SEQUENCE } from './utils';
+import ValidatorsTableItem from './ValidatorsTableItem';
+
+interface Props {
+  data: Array<ValidatorStability>;
+  sort: ValidatorsStabilitySortingValue | undefined;
+  setSorting: (val: ValidatorsStabilitySortingValue | undefined) => void;
+  isLoading?: boolean;
+}
+
+const ValidatorsTable = ({ data, sort, setSorting, isLoading }: Props) => {
+  const sortIconTransform = sort?.includes('asc' as ValidatorsStabilitySorting['order']) ? 'rotate(-90deg)' : 'rotate(90deg)';
+
+  const onSortToggle = React.useCallback((field: ValidatorsStabilitySortingField) => () => {
+    const value = getNextSortValue<ValidatorsStabilitySortingField, ValidatorsStabilitySortingValue>(VALIDATORS_STABILITY_SORT_SEQUENCE, field)(sort);
+    setSorting(value);
+  }, [ sort, setSorting ]);
+
+  return (
+    <Table>
+      <Thead top={ ACTION_BAR_HEIGHT_DESKTOP }>
+        <Tr>
+          <Th width="50%">Validator’s address</Th>
+          <Th width="25%">
+            <Link
+              display="flex"
+              alignItems="center"
+              onClick={ isLoading ? undefined : onSortToggle('state') }
+              columnGap={ 1 }
+            >
+              { sort?.includes('state') && <IconSvg name="arrows/east" boxSize={ 4 } transform={ sortIconTransform }/> }
+              Status
+            </Link>
+          </Th>
+          <Th width="25%" isNumeric>
+            <Link
+              display="flex"
+              alignItems="center"
+              justifyContent="flex-end"
+              onClick={ isLoading ? undefined : onSortToggle('blocks_validated') }
+              columnGap={ 1 }
+            >
+              { sort?.includes('blocks_validated') && <IconSvg name="arrows/east" boxSize={ 4 } transform={ sortIconTransform }/> }
+              Blocks
+            </Link>
+          </Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { data.map((item, index) => (
+          <ValidatorsTableItem
+            key={ item.address.hash + (isLoading ? index : '') }
+            data={ item }
+            isLoading={ isLoading }/>
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default React.memo(ValidatorsTable);
diff --git a/ui/validatorsStability/ValidatorsTableItem.tsx b/ui/validatorsStability/ValidatorsTableItem.tsx
new file mode 100644
index 0000000000..7a1231b796
--- /dev/null
+++ b/ui/validatorsStability/ValidatorsTableItem.tsx
@@ -0,0 +1,36 @@
+import { Tr, Td, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ValidatorStability } from 'types/api/validators';
+
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import ValidatorStatus from 'ui/shared/statusTag/ValidatorStabilityStatus';
+
+interface Props {
+  data: ValidatorStability;
+  isLoading?: boolean;
+}
+
+const ValidatorsTableItem = ({ data, isLoading }: Props) => {
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <AddressEntity
+          address={ data.address }
+          isLoading={ isLoading }
+          truncation="constant"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <ValidatorStatus state={ data.state } isLoading={ isLoading }/>
+      </Td>
+      <Td verticalAlign="middle" isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { data.blocks_validated_count.toLocaleString() }
+        </Skeleton>
+      </Td>
+    </Tr>
+  );
+};
+
+export default React.memo(ValidatorsTableItem);
diff --git a/ui/validatorsStability/utils.ts b/ui/validatorsStability/utils.ts
new file mode 100644
index 0000000000..ee62c7ac83
--- /dev/null
+++ b/ui/validatorsStability/utils.ts
@@ -0,0 +1,18 @@
+import type {
+  ValidatorsStabilitySortingValue,
+  ValidatorsStabilitySortingField,
+} from 'types/api/validators';
+import type { SelectOption } from 'ui/shared/select/types';
+
+export const VALIDATORS_STABILITY_SORT_OPTIONS: Array<SelectOption<ValidatorsStabilitySortingValue>> = [
+  { label: 'Default', value: undefined },
+  { label: 'Status descending', value: 'state-desc' },
+  { label: 'Status ascending', value: 'state-asc' },
+  { label: 'Blocks validated descending', value: 'blocks_validated-desc' },
+  { label: 'Blocks validated ascending', value: 'blocks_validated-asc' },
+];
+
+export const VALIDATORS_STABILITY_SORT_SEQUENCE: Record<ValidatorsStabilitySortingField, Array<ValidatorsStabilitySortingValue | undefined>> = {
+  state: [ 'state-desc', 'state-asc', undefined ],
+  blocks_validated: [ 'blocks_validated-desc', 'blocks_validated-asc', undefined ],
+};
diff --git a/ui/verifiedAddresses/VerifiedAddressesEmailAlert.tsx b/ui/verifiedAddresses/VerifiedAddressesEmailAlert.tsx
new file mode 100644
index 0000000000..7720a4dd89
--- /dev/null
+++ b/ui/verifiedAddresses/VerifiedAddressesEmailAlert.tsx
@@ -0,0 +1,28 @@
+import { Alert, Button, useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+import AuthModal from 'ui/snippets/auth/AuthModal';
+
+const VerifiedAddressesEmailAlert = () => {
+  const authModal = useDisclosure();
+
+  return (
+    <>
+      <Alert
+        status="warning"
+        mb={ 6 }
+        display="flex"
+        flexDirection={{ base: 'column', md: 'row' }}
+        alignItems={{ base: 'flex-start', lg: 'center' }}
+        columnGap={ 2 }
+        rowGap={ 2 }
+      >
+        You need a valid email address to verify contracts. Please add your email to your account.
+        <Button variant="outline" size="sm" onClick={ authModal.onOpen }>Add email</Button>
+      </Alert>
+      { authModal.isOpen && <AuthModal initialScreen={{ type: 'email', isAuth: true }} onClose={ authModal.onClose }/> }
+    </>
+  );
+};
+
+export default React.memo(VerifiedAddressesEmailAlert);
diff --git a/ui/verifiedAddresses/VerifiedAddressesListItem.tsx b/ui/verifiedAddresses/VerifiedAddressesListItem.tsx
index c87e885c91..45b19a661f 100644
--- a/ui/verifiedAddresses/VerifiedAddressesListItem.tsx
+++ b/ui/verifiedAddresses/VerifiedAddressesListItem.tsx
@@ -48,6 +48,7 @@ const VerifiedAddressesListItem = ({ item, application, onAdd, onEdit, isLoading
     }
 
     const token = {
+      type: 'ERC-20' as const,
       icon_url: application.iconUrl,
       address: application.tokenAddress,
       name: item.metadata.tokenName,
@@ -82,7 +83,7 @@ const VerifiedAddressesListItem = ({ item, application, onAdd, onEdit, isLoading
       <ListItemMobileGrid.Label isLoading={ isLoading }>Address</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <AddressEntity
-          address={{ hash: item.contractAddress, is_contract: true, implementation_name: null }}
+          address={{ hash: item.contractAddress, is_contract: true }}
           isLoading={ isLoading }
           w="100%"
         />
diff --git a/ui/verifiedAddresses/VerifiedAddressesTable.tsx b/ui/verifiedAddresses/VerifiedAddressesTable.tsx
index 13bb4f4c7d..d3f819ad83 100644
--- a/ui/verifiedAddresses/VerifiedAddressesTable.tsx
+++ b/ui/verifiedAddresses/VerifiedAddressesTable.tsx
@@ -15,7 +15,7 @@ interface Props {
 
 const VerifiedAddressesTable = ({ data, applications, onItemEdit, onItemAdd, isLoading }: Props) => {
   return (
-    <Table variant="simple">
+    <Table>
       <Thead>
         <Tr>
           <Th>Address</Th>
diff --git a/ui/verifiedAddresses/VerifiedAddressesTableItem.tsx b/ui/verifiedAddresses/VerifiedAddressesTableItem.tsx
index 7efcaa2e91..640f944ca5 100644
--- a/ui/verifiedAddresses/VerifiedAddressesTableItem.tsx
+++ b/ui/verifiedAddresses/VerifiedAddressesTableItem.tsx
@@ -48,6 +48,7 @@ const VerifiedAddressesTableItem = ({ item, application, onAdd, onEdit, isLoadin
     }
 
     const token = {
+      type: 'ERC-20' as const,
       icon_url: application.iconUrl,
       address: application.tokenAddress,
       name: item.metadata.tokenName,
@@ -68,7 +69,7 @@ const VerifiedAddressesTableItem = ({ item, application, onAdd, onEdit, isLoadin
     <Tr>
       <Td>
         <AddressEntity
-          address={{ hash: item.contractAddress, is_contract: true, implementation_name: null }}
+          address={{ hash: item.contractAddress, is_contract: true }}
           isLoading={ isLoading }
           fontWeight="600"
         />
diff --git a/ui/verifiedContracts/VerifiedContractsCounters.tsx b/ui/verifiedContracts/VerifiedContractsCounters.tsx
index 474d568a25..ba0c5e8a26 100644
--- a/ui/verifiedContracts/VerifiedContractsCounters.tsx
+++ b/ui/verifiedContracts/VerifiedContractsCounters.tsx
@@ -1,48 +1,42 @@
-import { Flex, Skeleton } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
+import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
-
-import VerifiedContractsCountersItem from './VerifiedContractsCountersItem';
+import { VERIFIED_CONTRACTS_COUNTERS } from 'stubs/contract';
+import StatsWidget from 'ui/shared/stats/StatsWidget';
 
 const VerifiedContractsCounters = () => {
-  const countersQuery = useApiQuery('verified_contracts_counters');
+  const countersQuery = useApiQuery('verified_contracts_counters', {
+    queryOptions: {
+      placeholderData: VERIFIED_CONTRACTS_COUNTERS,
+    },
+  });
 
-  if (countersQuery.isError) {
+  if (!countersQuery.data) {
     return null;
   }
 
-  const content = (() => {
-    if (countersQuery.isPending) {
-      const item = <Skeleton w={{ base: '100%', lg: 'calc((100% - 12px)/2)' }} h="69px" borderRadius="12px"/>;
-      return (
-        <>
-          { item }
-          { item }
-        </>
-      );
-    }
-
-    return (
-      <>
-        <VerifiedContractsCountersItem
-          name="Total contracts"
-          total={ countersQuery.data.smart_contracts }
-          new24={ countersQuery.data.new_smart_contracts_24h }
-        />
-        <VerifiedContractsCountersItem
-          name="Verified contracts"
-          total={ countersQuery.data.verified_smart_contracts }
-          new24={ countersQuery.data.new_verified_smart_contracts_24h }
-        />
-      </>
-    );
-  })();
-
   return (
-    <Flex columnGap={ 3 } rowGap={ 3 } flexDirection={{ base: 'column', lg: 'row' }} mb={ 6 }>
-      { content }
-    </Flex>
+    <Box columnGap={ 3 } rowGap={ 3 } mb={ 6 } display="grid" gridTemplateColumns={{ base: '1fr', lg: 'repeat(2, 1fr)' }}>
+      <StatsWidget
+        label="Total contracts"
+        value={ Number(countersQuery.data.smart_contracts).toLocaleString() }
+        diff={ countersQuery.data.new_smart_contracts_24h }
+        diffFormatted={ Number(countersQuery.data.new_smart_contracts_24h).toLocaleString() }
+        isLoading={ countersQuery.isPlaceholderData }
+        // there is no stats for contracts growth for now
+        // href={ config.features.stats.isEnabled ? { pathname: '/stats/[id]', query: { id: 'contractsGrowth' } } : undefined }
+      />
+      <StatsWidget
+        label="Verified contracts"
+        value={ Number(countersQuery.data.verified_smart_contracts).toLocaleString() }
+        diff={ countersQuery.data.new_verified_smart_contracts_24h }
+        diffFormatted={ Number(countersQuery.data.new_verified_smart_contracts_24h).toLocaleString() }
+        isLoading={ countersQuery.isPlaceholderData }
+        href={ config.features.stats.isEnabled ? { pathname: '/stats/[id]', query: { id: 'verifiedContractsGrowth' } } : undefined }
+      />
+    </Box>
   );
 };
 
diff --git a/ui/verifiedContracts/VerifiedContractsCountersItem.tsx b/ui/verifiedContracts/VerifiedContractsCountersItem.tsx
deleted file mode 100644
index 5f64f511da..0000000000
--- a/ui/verifiedContracts/VerifiedContractsCountersItem.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Box, Flex, Text, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-type Props = {
-  name: string;
-  total: string;
-  new24: string;
-}
-
-const VerifiedContractsCountersItem = ({ name, total, new24 }: Props) => {
-  const itemBgColor = useColorModeValue('blue.50', 'blue.800');
-  return (
-    <Box
-      w={{ base: '100%', lg: 'calc((100% - 12px)/2)' }}
-      borderRadius="12px"
-      backgroundColor={ itemBgColor }
-      p={ 3 }
-    >
-      <Text variant="secondary" fontSize="xs">{ name }</Text>
-      <Flex alignItems="baseline">
-        <Text fontWeight={ 600 } mr={ 2 } fontSize="lg">{ Number(total).toLocaleString() }</Text>
-        { Number(new24) > 0 && (
-          <>
-            <Text fontWeight={ 600 } mr={ 1 } fontSize="lg" color="green.500">+{ Number(new24).toLocaleString() }</Text>
-            <Text variant="secondary" fontSize="sm">(24h)</Text>
-          </>
-        ) }
-      </Flex>
-    </Box>
-  );
-};
-
-export default VerifiedContractsCountersItem;
diff --git a/ui/verifiedContracts/VerifiedContractsFilter.tsx b/ui/verifiedContracts/VerifiedContractsFilter.tsx
index 36790c5260..9b8afd5f63 100644
--- a/ui/verifiedContracts/VerifiedContractsFilter.tsx
+++ b/ui/verifiedContracts/VerifiedContractsFilter.tsx
@@ -1,45 +1,35 @@
-import {
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuOptionGroup,
-  MenuItemOption,
-  useDisclosure,
-} from '@chakra-ui/react';
 import React from 'react';
 
-import type { VerifiedContractsFilters } from 'types/api/contracts';
+import type { VerifiedContractsFilter as TVerifiedContractsFilter } from 'types/api/contracts';
 
-import FilterButton from 'ui/shared/filters/FilterButton';
+import config from 'configs/app';
+import PopoverFilterRadio from 'ui/shared/filters/PopoverFilterRadio';
+
+type OptionValue = TVerifiedContractsFilter | 'all';
+
+const OPTIONS = [
+  { value: 'all', label: 'All' },
+  { value: 'solidity', label: 'Solidity' },
+  { value: 'vyper', label: 'Vyper' },
+  { value: 'yul', label: 'Yul' },
+  { value: 'scilla', label: 'Scilla' },
+].filter(({ value }) => value === 'all' || config.UI.views.address.languageFilters.includes(value)) as Array<{ value: OptionValue; label: string }>;
 
 interface Props {
-  isActive: boolean;
-  defaultValue: VerifiedContractsFilters['filter'] | undefined;
+  hasActiveFilter: boolean;
+  defaultValue: TVerifiedContractsFilter | undefined;
   onChange: (nextValue: string | Array<string>) => void;
 }
 
-const VerifiedContractsFilter = ({ onChange, defaultValue, isActive }: Props) => {
-  const { isOpen, onToggle } = useDisclosure();
-
+const VerifiedContractsFilter = ({ onChange, defaultValue, hasActiveFilter }: Props) => {
   return (
-    <Menu>
-      <MenuButton>
-        <FilterButton
-          isActive={ isOpen || isActive }
-          appliedFiltersNum={ isActive ? 1 : 0 }
-          onClick={ onToggle }
-          as="div"
-        />
-      </MenuButton>
-      <MenuList zIndex="popover">
-        <MenuOptionGroup defaultValue={ defaultValue || 'all' } title="Filter" type="radio" onChange={ onChange }>
-          <MenuItemOption value="all">All</MenuItemOption>
-          <MenuItemOption value="solidity">Solidity</MenuItemOption>
-          <MenuItemOption value="vyper">Vyper</MenuItemOption>
-          <MenuItemOption value="yul">Yul</MenuItemOption>
-        </MenuOptionGroup>
-      </MenuList>
-    </Menu>
+    <PopoverFilterRadio
+      name="verified_contracts_filter"
+      options={ OPTIONS }
+      onChange={ onChange }
+      hasActiveFilter={ hasActiveFilter }
+      defaultValue={ defaultValue || OPTIONS[0].value }
+    />
   );
 };
 
diff --git a/ui/verifiedContracts/VerifiedContractsListItem.tsx b/ui/verifiedContracts/VerifiedContractsListItem.tsx
index 8b12f86fd7..86d11a262f 100644
--- a/ui/verifiedContracts/VerifiedContractsListItem.tsx
+++ b/ui/verifiedContracts/VerifiedContractsListItem.tsx
@@ -5,13 +5,14 @@ import React from 'react';
 import type { VerifiedContract } from 'types/api/contracts';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
+import formatLanguageName from 'lib/contracts/formatLanguageName';
+import { CONTRACT_LICENSES } from 'lib/contracts/licenses';
 import { currencyUnits } from 'lib/units';
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import HashStringShorten from 'ui/shared/HashStringShorten';
 import IconSvg from 'ui/shared/IconSvg';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 interface Props {
   data: VerifiedContract;
@@ -23,19 +24,37 @@ const VerifiedContractsListItem = ({ data, isLoading }: Props) => {
     BigNumber(data.coin_balance).div(10 ** config.chain.currency.decimals).dp(6).toFormat() :
     '0';
 
+  const license = (() => {
+    const license = CONTRACT_LICENSES.find((license) => license.type === data.license_type);
+    if (!license || license.type === 'none') {
+      return '-';
+    }
+
+    return license.label;
+  })();
+
   return (
     <ListItemMobile rowGap={ 3 }>
       <Flex w="100%">
+        <Flex alignItems="center" overflow="hidden">
+          <AddressEntity
+            isLoading={ isLoading }
+            address={ data.address }
+            query={{ tab: 'contract' }}
+            noCopy
+          />
+          { data.certified && <ContractCertifiedLabel iconSize={ 5 } boxSize={ 5 } mx={ 2 }/> }
+        </Flex>
         <AddressEntity
+          address={{ hash: data.address.filecoin?.robust ?? data.address.hash }}
           isLoading={ isLoading }
-          address={ data.address }
-          query={{ tab: 'contract' }}
-          noCopy
+          noLink
+          noIcon
+          truncation="constant"
+          ml="auto"
+          color="text_secondary"
+          flexShrink={ 0 }
         />
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" ml="auto">
-          <HashStringShorten hash={ data.address.hash } isTooltipDisabled/>
-        </Skeleton>
-        <CopyToClipboard text={ data.address.hash } isLoading={ isLoading }/>
       </Flex>
       <Flex columnGap={ 3 }>
         <Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>Balance { currencyUnits.ether }</Skeleton>
@@ -46,16 +65,24 @@ const VerifiedContractsListItem = ({ data, isLoading }: Props) => {
       <Flex columnGap={ 3 }>
         <Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>Txs count</Skeleton>
         <Skeleton isLoaded={ !isLoading } color="text_secondary">
-          <span>{ data.tx_count ? data.tx_count.toLocaleString() : '0' }</span>
+          <span>{ data.transaction_count ? data.transaction_count.toLocaleString() : '0' }</span>
         </Skeleton>
       </Flex>
       <Flex columnGap={ 3 }>
-        <Skeleton isLoaded={ !isLoading } fontWeight={ 500 } flexShrink="0">Compiler</Skeleton>
+        <Skeleton isLoaded={ !isLoading } fontWeight={ 500 } flexShrink="0">Language</Skeleton>
         <Skeleton isLoaded={ !isLoading } display="flex" flexWrap="wrap">
-          <Box textTransform="capitalize">{ data.language }</Box>
+          <Box>{ formatLanguageName(data.language) }</Box>
           <Box color="text_secondary" wordBreak="break-all" whiteSpace="pre-wrap"> ({ data.compiler_version })</Box>
         </Skeleton>
       </Flex>
+      { data.zk_compiler_version && (
+        <Flex columnGap={ 3 }>
+          <Skeleton isLoaded={ !isLoading } fontWeight={ 500 } flexShrink="0">ZK compiler</Skeleton>
+          <Skeleton isLoaded={ !isLoading } color="text_secondary" wordBreak="break-all" whiteSpace="pre-wrap">
+            { data.zk_compiler_version }
+          </Skeleton>
+        </Flex>
+      ) }
       <Flex columnGap={ 3 }>
         <Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>Optimization</Skeleton>
         { data.optimization_enabled ?
@@ -72,17 +99,19 @@ const VerifiedContractsListItem = ({ data, isLoading }: Props) => {
         <Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>Verified</Skeleton>
         <Flex alignItems="center" columnGap={ 2 }>
           <IconSvg name="status/success" boxSize={ 4 } color="green.500" isLoading={ isLoading }/>
-          <Skeleton isLoaded={ !isLoading } color="text_secondary">
-            <span>{ dayjs(data.verified_at).fromNow() }</span>
-          </Skeleton>
+          <TimeAgoWithTooltip
+            timestamp={ data.verified_at }
+            isLoading={ isLoading }
+            color="text_secondary"
+          />
         </Flex>
       </Flex>
-      { /* <Flex columnGap={ 3 }>
-        <Box fontWeight={ 500 }>Market cap</Box>
-        <Box color="text_secondary">
-          N/A
-        </Box>
-      </Flex> */ }
+      <Flex columnGap={ 3 }>
+        <Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>License</Skeleton>
+        <Skeleton isLoaded={ !isLoading } color="text_secondary">
+          <span>{ license }</span>
+        </Skeleton>
+      </Flex>
     </ListItemMobile>
   );
 };
diff --git a/ui/verifiedContracts/VerifiedContractsTable.tsx b/ui/verifiedContracts/VerifiedContractsTable.tsx
index d05da11b37..dd08f964c3 100644
--- a/ui/verifiedContracts/VerifiedContractsTable.tsx
+++ b/ui/verifiedContracts/VerifiedContractsTable.tsx
@@ -5,6 +5,7 @@ import type { VerifiedContract } from 'types/api/contracts';
 import type { VerifiedContractsSorting, VerifiedContractsSortingField, VerifiedContractsSortingValue } from 'types/api/verifiedContracts';
 
 import { currencyUnits } from 'lib/units';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import IconSvg from 'ui/shared/IconSvg';
 import getNextSortValue from 'ui/shared/sort/getNextSortValue';
 import { default as Thead } from 'ui/shared/TheadSticky';
@@ -28,26 +29,26 @@ const VerifiedContractsTable = ({ data, sort, setSorting, isLoading }: Props) =>
   }, [ sort, setSorting ]);
 
   return (
-    <Table variant="simple" size="sm">
-      <Thead top={ 80 }>
+    <Table minW="915px">
+      <Thead top={ ACTION_BAR_HEIGHT_DESKTOP }>
         <Tr>
           <Th width="50%">Contract</Th>
           <Th width="130px" isNumeric>
             <Link display="flex" alignItems="center" justifyContent="flex-end" onClick={ isLoading ? undefined : onSortToggle('balance') } columnGap={ 1 }>
               { sort?.includes('balance') && <IconSvg name="arrows/east" boxSize={ 4 } transform={ sortIconTransform }/> }
-                Balance { currencyUnits.ether }
+              Balance { currencyUnits.ether }
             </Link>
           </Th>
           <Th width="130px" isNumeric>
             <Link display="flex" alignItems="center" justifyContent="flex-end" onClick={ isLoading ? undefined : onSortToggle('txs_count') } columnGap={ 1 }>
               { sort?.includes('txs_count') && <IconSvg name="arrows/east" boxSize={ 4 } transform={ sortIconTransform }/> }
-                Txs
+              Txs
             </Link>
           </Th>
-          <Th width="50%">Compiler / version</Th>
+          <Th width="50%">Language / Compiler version</Th>
           <Th width="80px">Settings</Th>
           <Th width="150px">Verified</Th>
-          { /* <Th width="120px">Market cap</Th> */ }
+          <Th width="130px">License</Th>
         </Tr>
       </Thead>
       <Tbody>
diff --git a/ui/verifiedContracts/VerifiedContractsTableItem.tsx b/ui/verifiedContracts/VerifiedContractsTableItem.tsx
index 3a528dd6b9..26edbde386 100644
--- a/ui/verifiedContracts/VerifiedContractsTableItem.tsx
+++ b/ui/verifiedContracts/VerifiedContractsTableItem.tsx
@@ -5,11 +5,12 @@ import React from 'react';
 import type { VerifiedContract } from 'types/api/contracts';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import formatLanguageName from 'lib/contracts/formatLanguageName';
+import { CONTRACT_LICENSES } from 'lib/contracts/licenses';
+import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import HashStringShorten from 'ui/shared/HashStringShorten';
 import IconSvg from 'ui/shared/IconSvg';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 interface Props {
   data: VerifiedContract;
@@ -21,22 +22,37 @@ const VerifiedContractsTableItem = ({ data, isLoading }: Props) => {
     BigNumber(data.coin_balance).div(10 ** config.chain.currency.decimals).dp(6).toFormat() :
     '0';
 
+  const license = (() => {
+    const license = CONTRACT_LICENSES.find((license) => license.type === data.license_type);
+    if (!license || license.type === 'none') {
+      return '-';
+    }
+
+    return license.label;
+  })();
+
   return (
     <Tr>
       <Td>
+        <Flex alignItems="center" mt={ 1 }>
+          <AddressEntity
+            address={ data.address }
+            isLoading={ isLoading }
+            query={{ tab: 'contract' }}
+            noCopy
+          />
+          { data.certified && <ContractCertifiedLabel iconSize={ 5 } boxSize={ 5 } ml={ 2 }/> }
+        </Flex>
         <AddressEntity
-          address={ data.address }
+          address={{ hash: data.address.filecoin?.robust ?? data.address.hash }}
           isLoading={ isLoading }
-          query={{ tab: 'contract' }}
-          noCopy
-          mt={ 1 }
+          noLink
+          noIcon
+          truncation="constant"
+          my={ 1 }
+          ml={ 7 }
+          color="text_secondary"
         />
-        <Flex alignItems="center" ml={ 7 }>
-          <Skeleton isLoaded={ !isLoading } color="text_secondary" my={ 1 }>
-            <HashStringShorten hash={ data.address.hash } isTooltipDisabled/>
-          </Skeleton>
-          <CopyToClipboard text={ data.address.hash } isLoading={ isLoading }/>
-        </Flex>
       </Td>
       <Td isNumeric>
         <Skeleton isLoaded={ !isLoading } display="inline-block" my={ 1 }>
@@ -45,16 +61,28 @@ const VerifiedContractsTableItem = ({ data, isLoading }: Props) => {
       </Td>
       <Td isNumeric>
         <Skeleton isLoaded={ !isLoading } display="inline-block" my={ 1 }>
-          { data.tx_count ? data.tx_count.toLocaleString() : '0' }
+          { data.transaction_count ? data.transaction_count.toLocaleString() : '0' }
         </Skeleton>
       </Td>
       <Td>
         <Flex flexWrap="wrap" columnGap={ 2 }>
-          <Skeleton isLoaded={ !isLoading } textTransform="capitalize" my={ 1 }>{ data.language }</Skeleton>
-          <Skeleton isLoaded={ !isLoading } color="text_secondary" wordBreak="break-all" my={ 1 }>
-            <span>{ data.compiler_version }</span>
-          </Skeleton>
+          <Skeleton isLoaded={ !isLoading } my={ 1 }>{ formatLanguageName(data.language) }</Skeleton>
+          { data.compiler_version && (
+            <Skeleton isLoaded={ !isLoading } color="text_secondary" wordBreak="break-all" my={ 1 } cursor="pointer">
+              <Tooltip label={ data.compiler_version }>
+                <span>{ data.compiler_version.split('+')[0] }</span>
+              </Tooltip>
+            </Skeleton>
+          ) }
         </Flex>
+        { data.zk_compiler_version && (
+          <Flex flexWrap="wrap" columnGap={ 2 } my={ 1 }>
+            <Skeleton isLoaded={ !isLoading } >ZK compiler</Skeleton>
+            <Skeleton isLoaded={ !isLoading } color="text_secondary" wordBreak="break-all">
+              <span>{ data.zk_compiler_version }</span>
+            </Skeleton>
+          </Flex>
+        ) }
       </Td>
       <Td>
         <Tooltip label={ isLoading ? undefined : 'Optimization' }>
@@ -75,14 +103,18 @@ const VerifiedContractsTableItem = ({ data, isLoading }: Props) => {
       <Td>
         <Flex alignItems="center" columnGap={ 2 } my={ 1 }>
           <IconSvg name="status/success" boxSize={ 4 } color="green.500" isLoading={ isLoading }/>
-          <Skeleton isLoaded={ !isLoading } color="text_secondary">
-            <span>{ dayjs(data.verified_at).fromNow() }</span>
-          </Skeleton>
+          <TimeAgoWithTooltip
+            timestamp={ data.verified_at }
+            isLoading={ isLoading }
+            color="text_secondary"
+          />
         </Flex>
       </Td>
-      { /* <Td>
-        N/A
-      </Td> */ }
+      <Td>
+        <Skeleton isLoaded={ !isLoading } my={ 1 } display="inline-block">
+          { license }
+        </Skeleton>
+      </Td>
     </Tr>
   );
 };
diff --git a/ui/verifiedContracts/utils.ts b/ui/verifiedContracts/utils.ts
index caf609899f..c8bb5a5e35 100644
--- a/ui/verifiedContracts/utils.ts
+++ b/ui/verifiedContracts/utils.ts
@@ -1,13 +1,12 @@
 import type { VerifiedContractsSortingValue, VerifiedContractsSortingField } from 'types/api/verifiedContracts';
+import type { SelectOption } from 'ui/shared/select/types';
 
-import type { Option } from 'ui/shared/sort/Sort';
-
-export const SORT_OPTIONS: Array<Option<VerifiedContractsSortingValue>> = [
-  { title: 'Default', id: undefined },
-  { title: 'Balance descending', id: 'balance-desc' },
-  { title: 'Balance ascending', id: 'balance-asc' },
-  { title: 'Txs count descending', id: 'txs_count-desc' },
-  { title: 'Txs count ascending', id: 'txs_count-asc' },
+export const SORT_OPTIONS: Array<SelectOption<VerifiedContractsSortingValue>> = [
+  { label: 'Default', value: undefined },
+  { label: 'Balance descending', value: 'balance-desc' },
+  { label: 'Balance ascending', value: 'balance-asc' },
+  { label: 'Txs count descending', value: 'txs_count-desc' },
+  { label: 'Txs count ascending', value: 'txs_count-asc' },
 ];
 
 export const SORT_SEQUENCE: Record<VerifiedContractsSortingField, Array<VerifiedContractsSortingValue | undefined>> = {
diff --git a/ui/watchlist/AddressModal/AddressForm.tsx b/ui/watchlist/AddressModal/AddressForm.tsx
index 613d4029ae..f7192be368 100644
--- a/ui/watchlist/AddressModal/AddressForm.tsx
+++ b/ui/watchlist/AddressModal/AddressForm.tsx
@@ -1,28 +1,30 @@
 import {
+  Alert,
   Box,
   Button,
   Text,
-  useColorModeValue,
+  useDisclosure,
 } from '@chakra-ui/react';
 import { useMutation } from '@tanstack/react-query';
-import React, { useCallback, useState } from 'react';
-import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
-import { useForm, Controller } from 'react-hook-form';
+import React, { useState } from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm, FormProvider } from 'react-hook-form';
 
 import type { WatchlistAddress, WatchlistErrors } from 'types/api/account';
 
 import type { ResourceErrorAccount } from 'lib/api/resources';
 import useApiFetch from 'lib/api/useApiFetch';
 import getErrorMessage from 'lib/getErrorMessage';
-import { ADDRESS_REGEXP } from 'lib/validations/address';
-import AddressInput from 'ui/shared/AddressInput';
-import CheckboxInput from 'ui/shared/CheckboxInput';
-import TagInput from 'ui/shared/TagInput';
+import FormFieldAddress from 'ui/shared/forms/fields/FormFieldAddress';
+import FormFieldCheckbox from 'ui/shared/forms/fields/FormFieldCheckbox';
+import FormFieldText from 'ui/shared/forms/fields/FormFieldText';
+import AuthModal from 'ui/snippets/auth/AuthModal';
+import useProfileQuery from 'ui/snippets/auth/useProfileQuery';
 
 import AddressFormNotifications from './AddressFormNotifications';
 
 // does it depend on the network?
-const NOTIFICATIONS = [ 'native', 'ERC-20', 'ERC-721' ] as const;
+const NOTIFICATIONS = [ 'native', 'ERC-20', 'ERC-721', 'ERC-404' ] as const;
 
 const TAG_MAX_LENGTH = 35;
 
@@ -31,9 +33,9 @@ type Props = {
   onSuccess: () => Promise<void>;
   setAlertVisible: (isAlertVisible: boolean) => void;
   isAdd: boolean;
-}
+};
 
-type Inputs = {
+export type Inputs = {
   address: string;
   tag: string;
   notification: boolean;
@@ -50,33 +52,32 @@ type Inputs = {
       outcoming: boolean;
       incoming: boolean;
     };
+    'ERC-404': {
+      outcoming: boolean;
+      incoming: boolean;
+    };
   };
-}
-
-type Checkboxes = 'notification' |
-'notification_settings.native.outcoming' |
-'notification_settings.native.incoming' |
-'notification_settings.ERC-20.outcoming' |
-'notification_settings.ERC-20.incoming' |
-'notification_settings.ERC-721.outcoming' |
-'notification_settings.ERC-721.incoming';
+};
 
 const AddressForm: React.FC<Props> = ({ data, onSuccess, setAlertVisible, isAdd }) => {
   const [ pending, setPending ] = useState(false);
-  const formBackgroundColor = useColorModeValue('white', 'gray.900');
+
+  const profileQuery = useProfileQuery();
+  const userWithoutEmail = profileQuery.data && !profileQuery.data.email;
+  const authModal = useDisclosure();
 
   let notificationsDefault = {} as Inputs['notification_settings'];
   if (!data?.notification_settings) {
-    NOTIFICATIONS.forEach(n => notificationsDefault[n] = { incoming: true, outcoming: true });
+    NOTIFICATIONS.forEach(n => notificationsDefault[n] = { incoming: !userWithoutEmail, outcoming: !userWithoutEmail });
   } else {
     notificationsDefault = data.notification_settings;
   }
 
-  const { control, handleSubmit, formState: { errors, isDirty }, setError } = useForm<Inputs>({
+  const formApi = useForm<Inputs>({
     defaultValues: {
       address: data?.address_hash || '',
       tag: data?.name || '',
-      notification: data?.notification_methods ? data.notification_methods.email : true,
+      notification: data?.notification_methods ? data.notification_methods.email : !userWithoutEmail,
       notification_settings: notificationsDefault,
     },
     mode: 'onTouched',
@@ -96,7 +97,7 @@ const AddressForm: React.FC<Props> = ({ data, onSuccess, setAlertVisible, isAdd
     if (!isAdd && data) {
       // edit address
       return apiFetch('watchlist', {
-        pathParams: { id: data?.id || '' },
+        pathParams: { id: data?.id ? String(data.id) : '' },
         fetchParams: { method: 'PUT', body },
       });
 
@@ -106,7 +107,7 @@ const AddressForm: React.FC<Props> = ({ data, onSuccess, setAlertVisible, isAdd
     }
   }
 
-  const { mutate } = useMutation({
+  const { mutateAsync } = useMutation({
     mutationFn: updateWatchlist,
     onSuccess: async() => {
       await onSuccess();
@@ -116,88 +117,85 @@ const AddressForm: React.FC<Props> = ({ data, onSuccess, setAlertVisible, isAdd
       setPending(false);
       const errorMap = error.payload?.errors;
       if (errorMap?.address_hash || errorMap?.name) {
-        errorMap?.address_hash && setError('address', { type: 'custom', message: getErrorMessage(errorMap, 'address_hash') });
-        errorMap?.name && setError('tag', { type: 'custom', message: getErrorMessage(errorMap, 'name') });
+        errorMap?.address_hash && formApi.setError('address', { type: 'custom', message: getErrorMessage(errorMap, 'address_hash') });
+        errorMap?.name && formApi.setError('tag', { type: 'custom', message: getErrorMessage(errorMap, 'name') });
       } else if (errorMap?.watchlist_id) {
-        setError('address', { type: 'custom', message: getErrorMessage(errorMap, 'watchlist_id') });
+        formApi.setError('address', { type: 'custom', message: getErrorMessage(errorMap, 'watchlist_id') });
       } else {
         setAlertVisible(true);
       }
     },
   });
 
-  const onSubmit: SubmitHandler<Inputs> = (formData) => {
+  const onSubmit: SubmitHandler<Inputs> = async(formData) => {
     setAlertVisible(false);
     setPending(true);
-    mutate(formData);
+    await mutateAsync(formData);
   };
 
-  const renderAddressInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'address'>}) => {
-    return (
-      <AddressInput<Inputs, 'address'>
-        field={ field }
-        backgroundColor={ formBackgroundColor }
-        error={ errors.address }
-      />
-    );
-  }, [ errors, formBackgroundColor ]);
-
-  const renderTagInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'tag'>}) => {
-    return <TagInput<Inputs, 'tag'> field={ field } error={ errors.tag } backgroundColor={ formBackgroundColor }/>;
-  }, [ errors, formBackgroundColor ]);
-
-  // eslint-disable-next-line react/display-name
-  const renderCheckbox = useCallback((text: string) => ({ field }: {field: ControllerRenderProps<Inputs, Checkboxes>}) => (
-    <CheckboxInput<Inputs, Checkboxes> text={ text } field={ field }/>
-  ), []);
-
   return (
-    <form noValidate onSubmit={ handleSubmit(onSubmit) }>
-      <Box marginBottom={ 5 }>
-        <Controller
+    <FormProvider { ...formApi }>
+      <form noValidate onSubmit={ formApi.handleSubmit(onSubmit) }>
+        <FormFieldAddress<Inputs>
           name="address"
-          control={ control }
-          rules={{
-            pattern: ADDRESS_REGEXP,
-            required: true,
-          }}
-          render={ renderAddressInput }
+          isRequired
+          bgColor="dialog_bg"
+          mb={ 5 }
         />
-      </Box>
-      <Box marginBottom={ 8 }>
-        <Controller
+        <FormFieldText<Inputs>
           name="tag"
-          control={ control }
+          placeholder="Private tag (max 35 characters)"
+          isRequired
           rules={{
             maxLength: TAG_MAX_LENGTH,
-            required: true,
           }}
-          render={ renderTagInput }
+          bgColor="dialog_bg"
+          mb={ 8 }
         />
-      </Box>
-      <Text variant="secondary" fontSize="sm" marginBottom={ 5 }>
-        Please select what types of notifications you will receive
-      </Text>
-      <Box marginBottom={ 8 }>
-        <AddressFormNotifications control={ control }/>
-      </Box>
-      <Text variant="secondary" fontSize="sm" marginBottom={{ base: '10px', lg: 5 }}>Notification methods</Text>
-      <Controller
-        name={ 'notification' as Checkboxes }
-        control={ control }
-        render={ renderCheckbox('Email notifications') }
-      />
-      <Box marginTop={ 8 }>
-        <Button
-          size="lg"
-          type="submit"
-          isLoading={ pending }
-          isDisabled={ !isDirty }
-        >
-          { !isAdd ? 'Save changes' : 'Add address' }
-        </Button>
-      </Box>
-    </form>
+        { userWithoutEmail ? (
+          <>
+            <Alert
+              status="info"
+              colorScheme="gray"
+              display="flex"
+              flexDirection={{ base: 'column', md: 'row' }}
+              alignItems={{ base: 'flex-start', lg: 'center' }}
+              columnGap={ 2 }
+              rowGap={ 2 }
+              w="fit-content"
+            >
+              To receive notifications you need to add an email to your profile.
+              <Button variant="outline" size="sm" onClick={ authModal.onOpen }>Add email</Button>
+            </Alert>
+            { authModal.isOpen && <AuthModal initialScreen={{ type: 'email', isAuth: true }} onClose={ authModal.onClose }/> }
+          </>
+        ) : (
+          <>
+            <Text variant="secondary" fontSize="sm" marginBottom={ 5 }>
+              Please select what types of notifications you will receive
+            </Text>
+            <Box marginBottom={ 8 }>
+              <AddressFormNotifications/>
+            </Box>
+            <Text variant="secondary" fontSize="sm" marginBottom={{ base: '10px', lg: 5 }}>Notification methods</Text>
+            <FormFieldCheckbox<Inputs, 'notification'>
+              name="notification"
+              label="Email notifications"
+            />
+          </>
+        ) }
+        <Box marginTop={ 8 }>
+          <Button
+            size="lg"
+            type="submit"
+            isLoading={ pending }
+            isDisabled={ !formApi.formState.isDirty }
+          >
+            { !isAdd ? 'Save changes' : 'Add address' }
+          </Button>
+        </Box>
+      </form>
+    </FormProvider>
   );
 };
 
diff --git a/ui/watchlist/AddressModal/AddressFormNotifications.tsx b/ui/watchlist/AddressModal/AddressFormNotifications.tsx
index 6b3b94d329..2021f4d464 100644
--- a/ui/watchlist/AddressModal/AddressFormNotifications.tsx
+++ b/ui/watchlist/AddressModal/AddressFormNotifications.tsx
@@ -1,30 +1,26 @@
 import { Grid, GridItem } from '@chakra-ui/react';
-import React, { useCallback } from 'react';
-import { Controller } from 'react-hook-form';
-import type { Path, ControllerRenderProps, FieldValues, Control } from 'react-hook-form';
+import React from 'react';
 
 import config from 'configs/app';
-import CheckboxInput from 'ui/shared/CheckboxInput';
+import FormFieldCheckbox from 'ui/shared/forms/fields/FormFieldCheckbox';
 
-// does it depend on the network?
-const NOTIFICATIONS = [ 'native', 'ERC-20', 'ERC-721' ] as const;
-const NOTIFICATIONS_NAMES = [ config.chain.currency.symbol, 'ERC-20', 'ERC-721, ERC-1155 (NFT)' ];
+import type { Inputs as FormFields } from './AddressForm';
 
-type Props<Inputs extends FieldValues> = {
-  control: Control<Inputs>;
-}
+const tokenStandardName = config.chain.tokenStandard;
 
-export default function AddressFormNotifications<Inputs extends FieldValues, Checkboxes extends Path<Inputs>>({ control }: Props<Inputs>) {
-  // eslint-disable-next-line react/display-name
-  const renderCheckbox = useCallback((text: string) => ({ field }: {field: ControllerRenderProps<Inputs, Checkboxes>}) => (
-    <CheckboxInput<Inputs, Checkboxes> text={ text } field={ field }/>
-  ), []);
+const NOTIFICATIONS = [ 'native', 'ERC-20', 'ERC-721', 'ERC-404' ] as const;
+const NOTIFICATIONS_NAMES = [
+  config.chain.currency.symbol,
+  `${ tokenStandardName }-20`,
+  `${ tokenStandardName }-721, ${ tokenStandardName }-1155 (NFT)`,
+  `${ tokenStandardName }-404` ];
 
+export default function AddressFormNotifications() {
   return (
     <Grid templateColumns={{ base: 'repeat(2, max-content)', lg: 'repeat(3, max-content)' }} gap={{ base: '10px 24px', lg: '20px 24px' }}>
-      { NOTIFICATIONS.map((notification: string, index: number) => {
-        const incomingFieldName = `notification_settings.${ notification }.incoming` as Checkboxes;
-        const outgoingFieldName = `notification_settings.${ notification }.outcoming` as Checkboxes;
+      { NOTIFICATIONS.map((notification, index: number) => {
+        const incomingFieldName = `notification_settings.${ notification }.incoming` as const;
+        const outgoingFieldName = `notification_settings.${ notification }.outcoming` as const;
         return (
           <React.Fragment key={ notification }>
             <GridItem
@@ -37,19 +33,15 @@ export default function AddressFormNotifications<Inputs extends FieldValues, Che
               { NOTIFICATIONS_NAMES[index] }
             </GridItem>
             <GridItem>
-              <Controller
+              <FormFieldCheckbox<FormFields, typeof incomingFieldName>
                 name={ incomingFieldName }
-                control={ control }
-
-                render={ renderCheckbox('Incoming') }
+                label="Incoming"
               />
             </GridItem>
             <GridItem>
-              <Controller
+              <FormFieldCheckbox<FormFields, typeof outgoingFieldName>
                 name={ outgoingFieldName }
-                control={ control }
-
-                render={ renderCheckbox('Outgoing') }
+                label="Outgoing"
               />
             </GridItem>
           </React.Fragment>
diff --git a/ui/watchlist/AddressModal/AddressModal.tsx b/ui/watchlist/AddressModal/AddressModal.tsx
index f143e799a3..9f09067e54 100644
--- a/ui/watchlist/AddressModal/AddressModal.tsx
+++ b/ui/watchlist/AddressModal/AddressModal.tsx
@@ -12,7 +12,7 @@ type Props = {
   onClose: () => void;
   onSuccess: () => Promise<void>;
   data?: Partial<WatchlistAddress>;
-}
+};
 
 const AddressModal: React.FC<Props> = ({ isOpen, onClose, onSuccess, data, isAdd }) => {
   const title = !isAdd ? 'Edit watch list address' : 'New address to watch list';
diff --git a/ui/watchlist/DeleteAddressModal.tsx b/ui/watchlist/DeleteAddressModal.tsx
index b231a6a0d2..284da2f64c 100644
--- a/ui/watchlist/DeleteAddressModal.tsx
+++ b/ui/watchlist/DeleteAddressModal.tsx
@@ -12,7 +12,7 @@ type Props = {
   onClose: () => void;
   onSuccess: () => Promise<void>;
   data: Pick<WatchlistAddress, 'address_hash' | 'id'>;
-}
+};
 
 const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, onSuccess, data }) => {
   const isMobile = useIsMobile();
@@ -20,7 +20,7 @@ const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, onSuccess, data
 
   const mutationFn = useCallback(() => {
     return apiFetch('watchlist', {
-      pathParams: { id: data.id },
+      pathParams: { id: String(data.id) },
       fetchParams: { method: 'DELETE' },
     });
   }, [ data?.id, apiFetch ]);
diff --git a/ui/watchlist/WatchlistTable/WatchListItem.tsx b/ui/watchlist/WatchlistTable/WatchListItem.tsx
index 571306dae2..8f56ccec11 100644
--- a/ui/watchlist/WatchlistTable/WatchListItem.tsx
+++ b/ui/watchlist/WatchlistTable/WatchListItem.tsx
@@ -17,9 +17,10 @@ interface Props {
   isLoading?: boolean;
   onEditClick: (data: WatchlistAddress) => void;
   onDeleteClick: (data: WatchlistAddress) => void;
+  hasEmail: boolean;
 }
 
-const WatchListItem = ({ item, isLoading, onEditClick, onDeleteClick }: Props) => {
+const WatchListItem = ({ item, isLoading, onEditClick, onDeleteClick, hasEmail }: Props) => {
   const [ notificationEnabled, setNotificationEnabled ] = useState(item.notification_methods.email);
   const [ switchDisabled, setSwitchDisabled ] = useState(false);
   const onItemEditClick = useCallback(() => {
@@ -49,7 +50,7 @@ const WatchListItem = ({ item, isLoading, onEditClick, onDeleteClick }: Props) =
   const showNotificationToast = useCallback((isOn: boolean) => {
     notificationToast({
       position: 'top-right',
-      description: isOn ? 'Email notification is ON' : 'Email notification is OFF',
+      description: !isOn ? 'Email notification is ON' : 'Email notification is OFF',
       colorScheme: 'green',
       status: 'success',
       variant: 'subtle',
@@ -65,7 +66,7 @@ const WatchListItem = ({ item, isLoading, onEditClick, onDeleteClick }: Props) =
       const body = { ...item, notification_methods: { email: !notificationEnabled } };
       setNotificationEnabled(prevState => !prevState);
       return apiFetch('watchlist', {
-        pathParams: { id: item.id },
+        pathParams: { id: String(item.id) },
         fetchParams: { method: 'PUT', body },
       });
     },
@@ -103,7 +104,7 @@ const WatchListItem = ({ item, isLoading, onEditClick, onDeleteClick }: Props) =
               isChecked={ notificationEnabled }
               onChange={ onSwitch }
               aria-label="Email notification"
-              isDisabled={ switchDisabled }
+              isDisabled={ !hasEmail || switchDisabled }
             />
           </Skeleton>
         </HStack>
diff --git a/ui/watchlist/WatchlistTable/WatchListTableItem.tsx b/ui/watchlist/WatchlistTable/WatchListTableItem.tsx
index 5c33383f30..4b8065b9be 100644
--- a/ui/watchlist/WatchlistTable/WatchListTableItem.tsx
+++ b/ui/watchlist/WatchlistTable/WatchListTableItem.tsx
@@ -21,9 +21,10 @@ interface Props {
   isLoading?: boolean;
   onEditClick: (data: WatchlistAddress) => void;
   onDeleteClick: (data: WatchlistAddress) => void;
+  hasEmail: boolean;
 }
 
-const WatchlistTableItem = ({ item, isLoading, onEditClick, onDeleteClick }: Props) => {
+const WatchlistTableItem = ({ item, isLoading, onEditClick, onDeleteClick, hasEmail }: Props) => {
   const [ notificationEnabled, setNotificationEnabled ] = useState(item.notification_methods.email);
   const [ switchDisabled, setSwitchDisabled ] = useState(false);
   const onItemEditClick = useCallback(() => {
@@ -53,7 +54,7 @@ const WatchlistTableItem = ({ item, isLoading, onEditClick, onDeleteClick }: Pro
   const showNotificationToast = useCallback((isOn: boolean) => {
     notificationToast({
       position: 'top-right',
-      description: isOn ? 'Email notification is ON' : 'Email notification is OFF',
+      description: !isOn ? 'Email notification is ON' : 'Email notification is OFF',
       colorScheme: 'green',
       status: 'success',
       variant: 'subtle',
@@ -69,7 +70,7 @@ const WatchlistTableItem = ({ item, isLoading, onEditClick, onDeleteClick }: Pro
       const body = { ...item, notification_methods: { email: !notificationEnabled } };
       setNotificationEnabled(prevState => !prevState);
       return apiFetch('watchlist', {
-        pathParams: { id: item.id },
+        pathParams: { id: String(item.id) },
         fetchParams: { method: 'PUT', body },
       });
     },
@@ -101,7 +102,7 @@ const WatchlistTableItem = ({ item, isLoading, onEditClick, onDeleteClick }: Pro
             size="md"
             isChecked={ notificationEnabled }
             onChange={ onSwitch }
-            isDisabled={ switchDisabled }
+            isDisabled={ !hasEmail || switchDisabled }
             aria-label="Email notification"
           />
         </Skeleton>
diff --git a/ui/watchlist/WatchlistTable/WatchlistTable.tsx b/ui/watchlist/WatchlistTable/WatchlistTable.tsx
index ca7cfed409..3f8aea45d5 100644
--- a/ui/watchlist/WatchlistTable/WatchlistTable.tsx
+++ b/ui/watchlist/WatchlistTable/WatchlistTable.tsx
@@ -18,11 +18,12 @@ interface Props {
   onEditClick: (data: WatchlistAddress) => void;
   onDeleteClick: (data: WatchlistAddress) => void;
   top: number;
+  hasEmail: boolean;
 }
 
-const WatchlistTable = ({ data, isLoading, onDeleteClick, onEditClick, top }: Props) => {
+const WatchlistTable = ({ data, isLoading, onDeleteClick, onEditClick, top, hasEmail }: Props) => {
   return (
-    <Table variant="simple" minWidth="600px">
+    <Table minWidth="600px">
       <TheadSticky top={ top }>
         <Tr>
           <Th width="70%">Address</Th>
@@ -39,6 +40,7 @@ const WatchlistTable = ({ data, isLoading, onDeleteClick, onEditClick, top }: Pr
             isLoading={ isLoading }
             onDeleteClick={ onDeleteClick }
             onEditClick={ onEditClick }
+            hasEmail={ hasEmail }
           />
         )) }
       </Tbody>
diff --git a/ui/withdrawals/WithdrawalsList.tsx b/ui/withdrawals/WithdrawalsList.tsx
deleted file mode 100644
index 7349dc2ba4..0000000000
--- a/ui/withdrawals/WithdrawalsList.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Box } from '@chakra-ui/react';
-import React from 'react';
-
-import type { AddressWithdrawalsItem } from 'types/api/address';
-import type { BlockWithdrawalsItem } from 'types/api/block';
-import type { WithdrawalsItem } from 'types/api/withdrawals';
-
-import useLazyRenderedList from 'lib/hooks/useLazyRenderedList';
-
-import WithdrawalsListItem from './WithdrawalsListItem';
-
-type Props = {
-  isLoading?: boolean;
-} & ({
-  items: Array<WithdrawalsItem>;
-  view: 'list';
-} | {
-  items: Array<AddressWithdrawalsItem>;
-  view: 'address';
-} | {
-  items: Array<BlockWithdrawalsItem>;
-  view: 'block';
-});
-
-const WithdrawalsList = ({ items, view, isLoading }: Props) => {
-  const { cutRef, renderedItemsNum } = useLazyRenderedList(items, !isLoading);
-
-  return (
-    <Box>
-      { items.slice(0, renderedItemsNum).map((item, index) => {
-
-        const key = item.index + (isLoading ? String(index) : '');
-
-        switch (view) {
-          case 'address': {
-            return (
-              <WithdrawalsListItem
-                key={ key }
-                item={ item as AddressWithdrawalsItem }
-                view={ view }
-                isLoading={ isLoading }
-              />
-            );
-          }
-          case 'block': {
-            return (
-              <WithdrawalsListItem
-                key={ key }
-                item={ item as BlockWithdrawalsItem }
-                view={ view }
-                isLoading={ isLoading }
-              />
-            );
-          }
-          case 'list': {
-            return (
-              <WithdrawalsListItem
-                key={ key }
-                item={ item as WithdrawalsItem }
-                view={ view }
-                isLoading={ isLoading }
-              />
-            );
-          }
-        }
-      }) }
-      <div ref={ cutRef }/>
-    </Box>
-  );
-};
-
-export default React.memo(WithdrawalsList);
diff --git a/ui/withdrawals/WithdrawalsListItem.tsx b/ui/withdrawals/WithdrawalsListItem.tsx
deleted file mode 100644
index 24d1879c21..0000000000
--- a/ui/withdrawals/WithdrawalsListItem.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { Skeleton } from '@chakra-ui/react';
-import React from 'react';
-
-import type { AddressWithdrawalsItem } from 'types/api/address';
-import type { BlockWithdrawalsItem } from 'types/api/block';
-import type { WithdrawalsItem } from 'types/api/withdrawals';
-
-import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
-import { currencyUnits } from 'lib/units';
-import CurrencyValue from 'ui/shared/CurrencyValue';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import BlockEntity from 'ui/shared/entities/block/BlockEntity';
-import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
-
-const feature = config.features.beaconChain;
-
-type Props = ({
-  item: WithdrawalsItem;
-  view: 'list';
-} | {
-  item: AddressWithdrawalsItem;
-  view: 'address';
-} | {
-  item: BlockWithdrawalsItem;
-  view: 'block';
-}) & { isLoading?: boolean };
-
-const WithdrawalsListItem = ({ item, isLoading, view }: Props) => {
-  if (!feature.isEnabled) {
-    return null;
-  }
-
-  return (
-    <ListItemMobileGrid.Container gridTemplateColumns="100px auto">
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Index</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.index }</Skeleton>
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Validator index</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.validator_index }</Skeleton>
-      </ListItemMobileGrid.Value>
-
-      { view !== 'block' && (
-        <>
-          <ListItemMobileGrid.Label isLoading={ isLoading }>Block</ListItemMobileGrid.Label>
-          <ListItemMobileGrid.Value>
-            <BlockEntity
-              number={ item.block_number }
-              isLoading={ isLoading }
-              fontSize="sm"
-              lineHeight={ 5 }
-            />
-          </ListItemMobileGrid.Value>
-        </>
-      ) }
-
-      { view !== 'address' && (
-        <>
-          <ListItemMobileGrid.Label isLoading={ isLoading }>To</ListItemMobileGrid.Label><ListItemMobileGrid.Value>
-            <AddressEntity
-              address={ item.receiver }
-              isLoading={ isLoading }
-            />
-          </ListItemMobileGrid.Value>
-        </>
-      ) }
-
-      { view !== 'block' && (
-        <>
-          <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
-          <ListItemMobileGrid.Value>
-            <Skeleton isLoaded={ !isLoading } display="inline-block">{ dayjs(item.timestamp).fromNow() }</Skeleton>
-          </ListItemMobileGrid.Value>
-
-          <ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label>
-          <ListItemMobileGrid.Value>
-            <CurrencyValue value={ item.amount } currency={ currencyUnits.ether } isLoading={ isLoading }/>
-          </ListItemMobileGrid.Value>
-        </>
-      ) }
-
-    </ListItemMobileGrid.Container>
-  );
-};
-
-export default WithdrawalsListItem;
diff --git a/ui/withdrawals/WithdrawalsTable.tsx b/ui/withdrawals/WithdrawalsTable.tsx
deleted file mode 100644
index c5248ec092..0000000000
--- a/ui/withdrawals/WithdrawalsTable.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
-import React from 'react';
-
-import type { AddressWithdrawalsItem } from 'types/api/address';
-import type { BlockWithdrawalsItem } from 'types/api/block';
-import type { WithdrawalsItem } from 'types/api/withdrawals';
-
-import config from 'configs/app';
-import useLazyRenderedList from 'lib/hooks/useLazyRenderedList';
-import { default as Thead } from 'ui/shared/TheadSticky';
-
-import WithdrawalsTableItem from './WithdrawalsTableItem';
-
-const feature = config.features.beaconChain;
-
- type Props = {
-   top: number;
-   isLoading?: boolean;
- } & ({
-   items: Array<WithdrawalsItem>;
-   view: 'list';
- } | {
-   items: Array<AddressWithdrawalsItem>;
-   view: 'address';
- } | {
-   items: Array<BlockWithdrawalsItem>;
-   view: 'block';
- });
-
-const WithdrawalsTable = ({ items, isLoading, top, view }: Props) => {
-  const { cutRef, renderedItemsNum } = useLazyRenderedList(items, !isLoading);
-
-  if (!feature.isEnabled) {
-    return null;
-  }
-
-  return (
-    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px">
-      <Thead top={ top }>
-        <Tr>
-          <Th minW="140px">Index</Th>
-          <Th minW="200px">Validator index</Th>
-          { view !== 'block' && <Th w="25%">Block</Th> }
-          { view !== 'address' && <Th w="25%">To</Th> }
-          { view !== 'block' && <Th w="25%">Age</Th> }
-          <Th w="25%">{ `Value ${ feature.currency.symbol }` }</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        { view === 'list' && (items as Array<WithdrawalsItem>).slice(0, renderedItemsNum).map((item, index) => (
-          <WithdrawalsTableItem key={ item.index + (isLoading ? String(index) : '') } item={ item } view="list" isLoading={ isLoading }/>
-        )) }
-        { view === 'address' && (items as Array<AddressWithdrawalsItem>).slice(0, renderedItemsNum).map((item, index) => (
-          <WithdrawalsTableItem key={ item.index + (isLoading ? String(index) : '') } item={ item } view="address" isLoading={ isLoading }/>
-        )) }
-        { view === 'block' && (items as Array<BlockWithdrawalsItem>).slice(0, renderedItemsNum).map((item, index) => (
-          <WithdrawalsTableItem key={ item.index + (isLoading ? String(index) : '') } item={ item } view="block" isLoading={ isLoading }/>
-        )) }
-        <tr ref={ cutRef }/>
-      </Tbody>
-    </Table>
-  );
-};
-
-export default WithdrawalsTable;
diff --git a/ui/withdrawals/WithdrawalsTableItem.tsx b/ui/withdrawals/WithdrawalsTableItem.tsx
deleted file mode 100644
index 2cc0ed0fb8..0000000000
--- a/ui/withdrawals/WithdrawalsTableItem.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Td, Tr, Skeleton } from '@chakra-ui/react';
-import React from 'react';
-
-import type { AddressWithdrawalsItem } from 'types/api/address';
-import type { BlockWithdrawalsItem } from 'types/api/block';
-import type { WithdrawalsItem } from 'types/api/withdrawals';
-
-import dayjs from 'lib/date/dayjs';
-import CurrencyValue from 'ui/shared/CurrencyValue';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import BlockEntity from 'ui/shared/entities/block/BlockEntity';
-
-type Props = ({
-  item: WithdrawalsItem;
-  view: 'list';
-} | {
-  item: AddressWithdrawalsItem;
-  view: 'address';
-} | {
-  item: BlockWithdrawalsItem;
-  view: 'block';
-}) & { isLoading?: boolean };
-
-const WithdrawalsTableItem = ({ item, view, isLoading }: Props) => {
-  return (
-    <Tr>
-      <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.index }</Skeleton>
-      </Td>
-      <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.validator_index }</Skeleton>
-      </Td>
-      { view !== 'block' && (
-        <Td verticalAlign="middle">
-          <BlockEntity
-            number={ item.block_number }
-            isLoading={ isLoading }
-            fontSize="sm"
-            lineHeight={ 5 }
-          />
-        </Td>
-      ) }
-      { view !== 'address' && (
-        <Td verticalAlign="middle">
-          <AddressEntity
-            address={ item.receiver }
-            isLoading={ isLoading }
-            truncation="constant"
-          />
-        </Td>
-      ) }
-      { view !== 'block' && (
-        <Td verticalAlign="middle" pr={ 12 }>
-          <Skeleton isLoaded={ !isLoading } display="inline-block" color="text_secondary">
-            <span>{ dayjs(item.timestamp).fromNow() }</span>
-          </Skeleton>
-        </Td>
-      ) }
-      <Td verticalAlign="middle">
-        <CurrencyValue value={ item.amount } isLoading={ isLoading }/>
-      </Td>
-    </Tr>
-  );
-};
-
-export default WithdrawalsTableItem;
diff --git a/ui/withdrawals/beaconChain/BeaconChainWithdrawalsList.tsx b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsList.tsx
new file mode 100644
index 0000000000..0a262b18fe
--- /dev/null
+++ b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsList.tsx
@@ -0,0 +1,72 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressWithdrawalsItem } from 'types/api/address';
+import type { BlockWithdrawalsItem } from 'types/api/block';
+import type { WithdrawalsItem } from 'types/api/withdrawals';
+
+import useLazyRenderedList from 'lib/hooks/useLazyRenderedList';
+
+import BeaconChainWithdrawalsListItem from './BeaconChainWithdrawalsListItem';
+
+type Props = {
+  isLoading?: boolean;
+} & ({
+  items: Array<WithdrawalsItem>;
+  view: 'list';
+} | {
+  items: Array<AddressWithdrawalsItem>;
+  view: 'address';
+} | {
+  items: Array<BlockWithdrawalsItem>;
+  view: 'block';
+});
+
+const WithdrawalsList = ({ items, view, isLoading }: Props) => {
+  const { cutRef, renderedItemsNum } = useLazyRenderedList(items, !isLoading);
+
+  return (
+    <Box>
+      { items.slice(0, renderedItemsNum).map((item, index) => {
+
+        const key = item.index + (isLoading ? String(index) : '');
+
+        switch (view) {
+          case 'address': {
+            return (
+              <BeaconChainWithdrawalsListItem
+                key={ key }
+                item={ item as AddressWithdrawalsItem }
+                view={ view }
+                isLoading={ isLoading }
+              />
+            );
+          }
+          case 'block': {
+            return (
+              <BeaconChainWithdrawalsListItem
+                key={ key }
+                item={ item as BlockWithdrawalsItem }
+                view={ view }
+                isLoading={ isLoading }
+              />
+            );
+          }
+          case 'list': {
+            return (
+              <BeaconChainWithdrawalsListItem
+                key={ key }
+                item={ item as WithdrawalsItem }
+                view={ view }
+                isLoading={ isLoading }
+              />
+            );
+          }
+        }
+      }) }
+      <div ref={ cutRef }/>
+    </Box>
+  );
+};
+
+export default React.memo(WithdrawalsList);
diff --git a/ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx
new file mode 100644
index 0000000000..0d1c362b97
--- /dev/null
+++ b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx
@@ -0,0 +1,95 @@
+import { Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressWithdrawalsItem } from 'types/api/address';
+import type { BlockWithdrawalsItem } from 'types/api/block';
+import type { WithdrawalsItem } from 'types/api/withdrawals';
+
+import config from 'configs/app';
+import { currencyUnits } from 'lib/units';
+import CurrencyValue from 'ui/shared/CurrencyValue';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const feature = config.features.beaconChain;
+
+type Props = ({
+  item: WithdrawalsItem;
+  view: 'list';
+} | {
+  item: AddressWithdrawalsItem;
+  view: 'address';
+} | {
+  item: BlockWithdrawalsItem;
+  view: 'block';
+}) & { isLoading?: boolean };
+
+const BeaconChainWithdrawalsListItem = ({ item, isLoading, view }: Props) => {
+  if (!feature.isEnabled) {
+    return null;
+  }
+
+  return (
+    <ListItemMobileGrid.Container gridTemplateColumns="100px auto">
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Index</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.index }</Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Validator index</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.validator_index }</Skeleton>
+      </ListItemMobileGrid.Value>
+
+      { view !== 'block' && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>Block</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value>
+            <BlockEntity
+              number={ item.block_number }
+              isLoading={ isLoading }
+              fontSize="sm"
+              lineHeight={ 5 }
+            />
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+
+      { view !== 'address' && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>To</ListItemMobileGrid.Label><ListItemMobileGrid.Value>
+            <AddressEntity
+              address={ item.receiver }
+              isLoading={ isLoading }
+              truncation="constant"
+            />
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+
+      { view !== 'block' && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value>
+            <TimeAgoWithTooltip
+              timestamp={ item.timestamp }
+              isLoading={ isLoading }
+              display="inline-block"
+            />
+          </ListItemMobileGrid.Value>
+
+          <ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value>
+            <CurrencyValue value={ item.amount } currency={ currencyUnits.ether } isLoading={ isLoading }/>
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default BeaconChainWithdrawalsListItem;
diff --git a/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTable.tsx b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTable.tsx
new file mode 100644
index 0000000000..3d908383f5
--- /dev/null
+++ b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTable.tsx
@@ -0,0 +1,65 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressWithdrawalsItem } from 'types/api/address';
+import type { BlockWithdrawalsItem } from 'types/api/block';
+import type { WithdrawalsItem } from 'types/api/withdrawals';
+
+import config from 'configs/app';
+import useLazyRenderedList from 'lib/hooks/useLazyRenderedList';
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import BeaconChainWithdrawalsTableItem from './BeaconChainWithdrawalsTableItem';
+
+const feature = config.features.beaconChain;
+
+ type Props = {
+   top: number;
+   isLoading?: boolean;
+ } & ({
+   items: Array<WithdrawalsItem>;
+   view: 'list';
+ } | {
+   items: Array<AddressWithdrawalsItem>;
+   view: 'address';
+ } | {
+   items: Array<BlockWithdrawalsItem>;
+   view: 'block';
+ });
+
+const BeaconChainWithdrawalsTable = ({ items, isLoading, top, view }: Props) => {
+  const { cutRef, renderedItemsNum } = useLazyRenderedList(items, !isLoading);
+
+  if (!feature.isEnabled) {
+    return null;
+  }
+
+  return (
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
+      <Thead top={ top }>
+        <Tr>
+          <Th minW="140px">Index</Th>
+          <Th minW="200px">Validator index</Th>
+          { view !== 'block' && <Th w="25%">Block</Th> }
+          { view !== 'address' && <Th w="25%">To</Th> }
+          { view !== 'block' && <Th w="25%">Age</Th> }
+          <Th w="25%">{ `Value ${ feature.currency.symbol }` }</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { view === 'list' && (items as Array<WithdrawalsItem>).slice(0, renderedItemsNum).map((item, index) => (
+          <BeaconChainWithdrawalsTableItem key={ item.index + (isLoading ? String(index) : '') } item={ item } view="list" isLoading={ isLoading }/>
+        )) }
+        { view === 'address' && (items as Array<AddressWithdrawalsItem>).slice(0, renderedItemsNum).map((item, index) => (
+          <BeaconChainWithdrawalsTableItem key={ item.index + (isLoading ? String(index) : '') } item={ item } view="address" isLoading={ isLoading }/>
+        )) }
+        { view === 'block' && (items as Array<BlockWithdrawalsItem>).slice(0, renderedItemsNum).map((item, index) => (
+          <BeaconChainWithdrawalsTableItem key={ item.index + (isLoading ? String(index) : '') } item={ item } view="block" isLoading={ isLoading }/>
+        )) }
+        <tr ref={ cutRef }/>
+      </Tbody>
+    </Table>
+  );
+};
+
+export default BeaconChainWithdrawalsTable;
diff --git a/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx
new file mode 100644
index 0000000000..a4e4b37a82
--- /dev/null
+++ b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx
@@ -0,0 +1,70 @@
+import { Td, Tr, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressWithdrawalsItem } from 'types/api/address';
+import type { BlockWithdrawalsItem } from 'types/api/block';
+import type { WithdrawalsItem } from 'types/api/withdrawals';
+
+import CurrencyValue from 'ui/shared/CurrencyValue';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+type Props = ({
+  item: WithdrawalsItem;
+  view: 'list';
+} | {
+  item: AddressWithdrawalsItem;
+  view: 'address';
+} | {
+  item: BlockWithdrawalsItem;
+  view: 'block';
+}) & { isLoading?: boolean };
+
+const BeaconChainWithdrawalsTableItem = ({ item, view, isLoading }: Props) => {
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.index }</Skeleton>
+      </Td>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.validator_index }</Skeleton>
+      </Td>
+      { view !== 'block' && (
+        <Td verticalAlign="middle">
+          <BlockEntity
+            number={ item.block_number }
+            isLoading={ isLoading }
+            fontSize="sm"
+            lineHeight={ 5 }
+            noIcon
+          />
+        </Td>
+      ) }
+      { view !== 'address' && (
+        <Td verticalAlign="middle">
+          <AddressEntity
+            address={ item.receiver }
+            isLoading={ isLoading }
+            truncation="constant"
+          />
+        </Td>
+      ) }
+      { view !== 'block' && (
+        <Td verticalAlign="middle" pr={ 12 }>
+          <TimeAgoWithTooltip
+            timestamp={ item.timestamp }
+            isLoading={ isLoading }
+            color="text_secondary"
+            display="inline-block"
+          />
+        </Td>
+      ) }
+      <Td verticalAlign="middle">
+        <CurrencyValue value={ item.amount } isLoading={ isLoading }/>
+      </Td>
+    </Tr>
+  );
+};
+
+export default BeaconChainWithdrawalsTableItem;
diff --git a/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx
new file mode 100644
index 0000000000..39b13bcee5
--- /dev/null
+++ b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx
@@ -0,0 +1,106 @@
+import { Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { OptimisticL2WithdrawalsItem } from 'types/api/optimisticL2';
+
+import config from 'configs/app';
+import dayjs from 'lib/date/dayjs';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: OptimisticL2WithdrawalsItem; isLoading?: boolean };
+
+const OptimisticL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
+  const timeToEnd = item.challenge_period_end ? dayjs(item.challenge_period_end).fromNow(true) + ' left' : null;
+
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') {
+    return null;
+  }
+
+  return (
+    <ListItemMobileGrid.Container>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Msg nonce</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { item.msg_nonce_version + '-' + item.msg_nonce }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      { item.from && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>From</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value>
+            <AddressEntity
+              address={ item.from }
+              isLoading={ isLoading }
+              truncation="constant"
+            />
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TxEntity
+          isLoading={ isLoading }
+          hash={ item.l2_transaction_hash }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+        />
+      </ListItemMobileGrid.Value>
+
+      { item.l2_timestamp && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value>
+            <TimeAgoWithTooltip
+              timestamp={ item.l2_timestamp }
+              isLoading={ isLoading }
+              display="inline-block"
+            />
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Status</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        { item.status === 'Ready for relay' && rollupFeature.L2WithdrawalUrl ?
+          <LinkExternal href={ rollupFeature.L2WithdrawalUrl }>{ item.status }</LinkExternal> :
+          <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.status }</Skeleton> }
+      </ListItemMobileGrid.Value>
+
+      { item.l1_transaction_hash && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn hash</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value>
+            <TxEntityL1
+              isLoading={ isLoading }
+              hash={ item.l1_transaction_hash }
+              fontSize="sm"
+              lineHeight={ 5 }
+              truncation="constant_long"
+            />
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+
+      { timeToEnd && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>Time left</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value>{ timeToEnd }</ListItemMobileGrid.Value>
+        </>
+      ) }
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default OptimisticL2WithdrawalsListItem;
diff --git a/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTable.tsx b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTable.tsx
new file mode 100644
index 0000000000..68f3c398b6
--- /dev/null
+++ b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTable.tsx
@@ -0,0 +1,43 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { OptimisticL2WithdrawalsItem } from 'types/api/optimisticL2';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import OptimisticL2WithdrawalsTableItem from './OptimisticL2WithdrawalsTableItem';
+
+ type Props = {
+   items: Array<OptimisticL2WithdrawalsItem>;
+   top: number;
+   isLoading?: boolean;
+ };
+
+const OptimisticL2WithdrawalsTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
+      <Thead top={ top }>
+        <Tr>
+          <Th>Msg nonce</Th>
+          <Th>From</Th>
+          <Th>L2 txn hash</Th>
+          <Th>Age</Th>
+          <Th>Status</Th>
+          <Th>L1 txn hash</Th>
+          <Th>Time left</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <OptimisticL2WithdrawalsTableItem
+            key={ String(item.msg_nonce_version) + item.msg_nonce + (isLoading ? index : '') }
+            item={ item }
+            isLoading={ isLoading }
+          />
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default OptimisticL2WithdrawalsTable;
diff --git a/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx
new file mode 100644
index 0000000000..2510cdf485
--- /dev/null
+++ b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx
@@ -0,0 +1,85 @@
+import { Td, Tr, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { OptimisticL2WithdrawalsItem } from 'types/api/optimisticL2';
+
+import config from 'configs/app';
+import dayjs from 'lib/date/dayjs';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+ type Props = { item: OptimisticL2WithdrawalsItem; isLoading?: boolean };
+
+const OptimisticL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
+  const timeToEnd = item.challenge_period_end ? dayjs(item.challenge_period_end).fromNow(true) + ' left' : '';
+
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') {
+    return null;
+  }
+
+  return (
+    <Tr>
+      <Td verticalAlign="middle" fontWeight={ 600 }>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.msg_nonce_version + '-' + item.msg_nonce }</Skeleton>
+      </Td>
+      <Td verticalAlign="middle">
+        { item.from ? (
+          <AddressEntity
+            address={ item.from }
+            isLoading={ isLoading }
+            truncation="constant"
+          />
+        ) : 'N/A' }
+      </Td>
+      <Td verticalAlign="middle">
+        <TxEntity
+          isLoading={ isLoading }
+          hash={ item.l2_transaction_hash }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+          noIcon
+        />
+      </Td>
+      <Td verticalAlign="middle" pr={ 12 }>
+        <TimeAgoWithTooltip
+          timestamp={ item.l2_timestamp }
+          fallbackText="N/A"
+          isLoading={ isLoading }
+          display="inline-block"
+          color="text_secondary"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        { item.status === 'Ready for relay' && rollupFeature.L2WithdrawalUrl ?
+          <LinkExternal href={ rollupFeature.L2WithdrawalUrl }>{ item.status }</LinkExternal> :
+          <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.status }</Skeleton>
+        }
+      </Td>
+      <Td verticalAlign="middle">
+        { item.l1_transaction_hash ? (
+          <TxEntityL1
+            isLoading={ isLoading }
+            hash={ item.l1_transaction_hash }
+            truncation="constant_long"
+            noIcon
+            fontSize="sm"
+            lineHeight={ 5 }
+          />
+        ) :
+          'N/A'
+        }
+      </Td>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading } color="text_secondary" minW="50px" minH="20px" display="inline-block">{ timeToEnd }</Skeleton>
+      </Td>
+    </Tr>
+  );
+};
+
+export default OptimisticL2WithdrawalsTableItem;
diff --git a/ui/withdrawals/scrollL2/ScrollL2WithdrawalsListItem.tsx b/ui/withdrawals/scrollL2/ScrollL2WithdrawalsListItem.tsx
new file mode 100644
index 0000000000..a9b6508f5b
--- /dev/null
+++ b/ui/withdrawals/scrollL2/ScrollL2WithdrawalsListItem.tsx
@@ -0,0 +1,94 @@
+import { Skeleton, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ScrollL2MessageItem } from 'types/api/scrollL2';
+
+import config from 'configs/app';
+import getCurrencyValue from 'lib/getCurrencyValue';
+import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: ScrollL2MessageItem; isLoading?: boolean };
+
+const ScrollL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'scroll') {
+    return null;
+  }
+
+  const { valueStr } = getCurrencyValue({ value: item.value, decimals: String(config.chain.currency.decimals) });
+
+  return (
+    <ListItemMobileGrid.Container>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 block</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BlockEntity
+          number={ item.origination_transaction_block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Index</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { item.id }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TxEntity
+          isLoading={ isLoading }
+          hash={ item.origination_transaction_hash }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TimeAgoWithTooltip
+          timestamp={ item.origination_timestamp }
+          isLoading={ isLoading }
+          display="inline-block"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        { item.completion_transaction_hash ? (
+          <TxEntityL1
+            isLoading={ isLoading }
+            hash={ item.completion_transaction_hash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+          />
+        ) : (
+          <chakra.span>
+            Pending Claim
+          </chakra.span>
+        ) }
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { `${ valueStr } ${ config.chain.currency.symbol }` }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default ScrollL2WithdrawalsListItem;
diff --git a/ui/withdrawals/scrollL2/ScrollL2WithdrawalsTable.tsx b/ui/withdrawals/scrollL2/ScrollL2WithdrawalsTable.tsx
new file mode 100644
index 0000000000..c52140aa50
--- /dev/null
+++ b/ui/withdrawals/scrollL2/ScrollL2WithdrawalsTable.tsx
@@ -0,0 +1,39 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ScrollL2MessageItem } from 'types/api/scrollL2';
+
+import config from 'configs/app';
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import ScrollL2WithdrawalsTableItem from './ScrollL2WithdrawalsTableItem';
+
+ type Props = {
+   items: Array<ScrollL2MessageItem>;
+   top: number;
+   isLoading?: boolean;
+ };
+
+const ScrollL2WithdrawalsTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
+      <Thead top={ top }>
+        <Tr>
+          <Th>L2 block</Th>
+          <Th>Index</Th>
+          <Th>L2 txn hash</Th>
+          <Th>Age</Th>
+          <Th>L1 txn hash</Th>
+          <Th isNumeric>{ `Value ${ config.chain.currency.symbol }` }</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <ScrollL2WithdrawalsTableItem key={ String(item.id) + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default ScrollL2WithdrawalsTable;
diff --git a/ui/withdrawals/scrollL2/ScrollL2WithdrawalsTableItem.tsx b/ui/withdrawals/scrollL2/ScrollL2WithdrawalsTableItem.tsx
new file mode 100644
index 0000000000..c70a3c3857
--- /dev/null
+++ b/ui/withdrawals/scrollL2/ScrollL2WithdrawalsTableItem.tsx
@@ -0,0 +1,82 @@
+import { Td, Tr, Skeleton, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ScrollL2MessageItem } from 'types/api/scrollL2';
+
+import config from 'configs/app';
+import getCurrencyValue from 'lib/getCurrencyValue';
+import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+ type Props = { item: ScrollL2MessageItem; isLoading?: boolean };
+
+const ScrollL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'scroll') {
+    return null;
+  }
+
+  const { valueStr } = getCurrencyValue({ value: item.value, decimals: String(config.chain.currency.decimals) });
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <BlockEntity
+          number={ item.origination_transaction_block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+          noIcon
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading }>
+          <span>{ item.id }</span>
+        </Skeleton>
+      </Td>
+      <Td verticalAlign="middle">
+        <TxEntity
+          isLoading={ isLoading }
+          hash={ item.origination_transaction_hash }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+          noIcon
+        />
+      </Td>
+      <Td verticalAlign="middle" pr={ 12 }>
+        <TimeAgoWithTooltip
+          timestamp={ item.origination_timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        { item.completion_transaction_hash ? (
+          <TxEntityL1
+            isLoading={ isLoading }
+            hash={ item.completion_transaction_hash }
+            truncation="constant_long"
+            noIcon
+            fontSize="sm"
+            lineHeight={ 5 }
+          />
+        ) : (
+          <chakra.span color="text_secondary">
+            Pending Claim
+          </chakra.span>
+        ) }
+      </Td>
+      <Td verticalAlign="middle" isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          <span>{ valueStr }</span>
+        </Skeleton>
+      </Td>
+    </Tr>
+  );
+};
+
+export default ScrollL2WithdrawalsTableItem;
diff --git a/ui/withdrawals/shibarium/WithdrawalsListItem.tsx b/ui/withdrawals/shibarium/WithdrawalsListItem.tsx
new file mode 100644
index 0000000000..fe1f456e56
--- /dev/null
+++ b/ui/withdrawals/shibarium/WithdrawalsListItem.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+
+import type { ShibariumWithdrawalsItem } from 'types/api/shibarium';
+
+import config from 'configs/app';
+import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
+import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const feature = config.features.rollup;
+
+type Props = { item: ShibariumWithdrawalsItem; isLoading?: boolean };
+
+const WithdrawalsListItem = ({ item, isLoading }: Props) => {
+  if (!(feature.isEnabled && feature.type === 'shibarium')) {
+    return null;
+  }
+
+  return (
+    <ListItemMobileGrid.Container>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 block No</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BlockEntity
+          number={ item.l2_block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TxEntity
+          isLoading={ isLoading }
+          hash={ item.l2_transaction_hash }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TxEntityL1
+          isLoading={ isLoading }
+          hash={ item.l1_transaction_hash }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>User</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <AddressStringOrParam
+          address={ item.user }
+          isLoading={ isLoading }
+          noCopy
+          truncation="constant"
+        />
+      </ListItemMobileGrid.Value>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          isLoading={ isLoading }
+          display="inline-block"
+        />
+      </ListItemMobileGrid.Value>
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default WithdrawalsListItem;
diff --git a/ui/withdrawals/shibarium/WithdrawalsTable.tsx b/ui/withdrawals/shibarium/WithdrawalsTable.tsx
new file mode 100644
index 0000000000..4ae4d45484
--- /dev/null
+++ b/ui/withdrawals/shibarium/WithdrawalsTable.tsx
@@ -0,0 +1,37 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ShibariumWithdrawalsItem } from 'types/api/shibarium';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import WithdrawalsTableItem from './WithdrawalsTableItem';
+
+ type Props = {
+   items: Array<ShibariumWithdrawalsItem>;
+   top: number;
+   isLoading?: boolean;
+ };
+
+const WithdrawalsTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
+      <Thead top={ top }>
+        <Tr>
+          <Th>L2 block No</Th>
+          <Th>L2 txn hash</Th>
+          <Th>L1 txn hash</Th>
+          <Th>User</Th>
+          <Th>Age</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <WithdrawalsTableItem key={ item.l2_transaction_hash + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default WithdrawalsTable;
diff --git a/ui/withdrawals/shibarium/WithdrawalsTableItem.tsx b/ui/withdrawals/shibarium/WithdrawalsTableItem.tsx
new file mode 100644
index 0000000000..479dcfec05
--- /dev/null
+++ b/ui/withdrawals/shibarium/WithdrawalsTableItem.tsx
@@ -0,0 +1,71 @@
+import { Td, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ShibariumWithdrawalsItem } from 'types/api/shibarium';
+
+import config from 'configs/app';
+import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
+import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const feature = config.features.rollup;
+
+ type Props = { item: ShibariumWithdrawalsItem; isLoading?: boolean };
+
+const WithdrawalsTableItem = ({ item, isLoading }: Props) => {
+  if (!(feature.isEnabled && feature.type === 'shibarium')) {
+    return null;
+  }
+
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <BlockEntity
+          number={ item.l2_block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <TxEntity
+          isLoading={ isLoading }
+          hash={ item.l2_transaction_hash }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <TxEntityL1
+          isLoading={ isLoading }
+          hash={ item.l1_transaction_hash }
+          truncation="constant_long"
+          fontSize="sm"
+          lineHeight={ 5 }
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <AddressStringOrParam
+          address={ item.user }
+          isLoading={ isLoading }
+          truncation="constant"
+          noCopy
+        />
+      </Td>
+      <Td verticalAlign="middle" pr={ 12 }>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          isLoading={ isLoading }
+          display="inline-block"
+          color="text_secondary"
+        />
+      </Td>
+    </Tr>
+  );
+};
+
+export default WithdrawalsTableItem;
diff --git a/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx
new file mode 100644
index 0000000000..7ff895f10e
--- /dev/null
+++ b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx
@@ -0,0 +1,99 @@
+import { Skeleton, chakra } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2';
+
+import config from 'configs/app';
+import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: ZkEvmL2WithdrawalsItem; isLoading?: boolean };
+
+const ZkEvmL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'zkEvm') {
+    return null;
+  }
+
+  return (
+    <ListItemMobileGrid.Container>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Block</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BlockEntity
+          number={ item.block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Index</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { item.index }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TxEntity
+          isLoading={ isLoading }
+          hash={ item.l2_transaction_hash }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          isLoading={ isLoading }
+          display="inline-block"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        { item.l1_transaction_hash ? (
+          <TxEntityL1
+            isLoading={ isLoading }
+            hash={ item.l1_transaction_hash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+          />
+        ) : (
+          <chakra.span>
+            Pending Claim
+          </chakra.span>
+        ) }
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { BigNumber(item.value).toFormat() }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Token</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { item.symbol }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default ZkEvmL2WithdrawalsListItem;
diff --git a/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTable.tsx b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTable.tsx
new file mode 100644
index 0000000000..2cfce3117e
--- /dev/null
+++ b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTable.tsx
@@ -0,0 +1,39 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import ZkEvmL2WithdrawalsTableItem from './ZkEvmL2WithdrawalsTableItem';
+
+ type Props = {
+   items: Array<ZkEvmL2WithdrawalsItem>;
+   top: number;
+   isLoading?: boolean;
+ };
+
+const ZkEvmL2DepositsTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
+      <Thead top={ top }>
+        <Tr>
+          <Th>Block</Th>
+          <Th>Index</Th>
+          <Th>L2 txn hash</Th>
+          <Th>Age</Th>
+          <Th>L1 txn hash</Th>
+          <Th isNumeric>Value</Th>
+          <Th>Token</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <ZkEvmL2WithdrawalsTableItem key={ String(item.index) + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default ZkEvmL2DepositsTable;
diff --git a/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx
new file mode 100644
index 0000000000..698d54be1b
--- /dev/null
+++ b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx
@@ -0,0 +1,86 @@
+import { Td, Tr, Skeleton, chakra } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2';
+
+import config from 'configs/app';
+import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+ type Props = { item: ZkEvmL2WithdrawalsItem; isLoading?: boolean };
+
+const ZkEvmL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'zkEvm') {
+    return null;
+  }
+
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <BlockEntity
+          number={ item.block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+          noIcon
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading }>
+          <span>{ item.index }</span>
+        </Skeleton>
+      </Td>
+      <Td verticalAlign="middle">
+        <TxEntity
+          isLoading={ isLoading }
+          hash={ item.l2_transaction_hash }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+          noIcon
+        />
+      </Td>
+      <Td verticalAlign="middle" pr={ 12 }>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        { item.l1_transaction_hash ? (
+          <TxEntityL1
+            isLoading={ isLoading }
+            hash={ item.l1_transaction_hash }
+            truncation="constant_long"
+            noIcon
+            fontSize="sm"
+            lineHeight={ 5 }
+          />
+        ) : (
+          <chakra.span color="text_secondary">
+            Pending Claim
+          </chakra.span>
+        ) }
+      </Td>
+      <Td verticalAlign="middle" isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          <span>{ BigNumber(item.value).toFormat() }</span>
+        </Skeleton>
+      </Td>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          <span>{ item.symbol }</span>
+        </Skeleton>
+      </Td>
+    </Tr>
+  );
+};
+
+export default ZkEvmL2WithdrawalsTableItem;
diff --git a/ui/zkEvmL2TxnBatches/ZkEvmL2TxnBatchDetails.tsx b/ui/zkEvmL2TxnBatches/ZkEvmL2TxnBatchDetails.tsx
deleted file mode 100644
index d30951ba42..0000000000
--- a/ui/zkEvmL2TxnBatches/ZkEvmL2TxnBatchDetails.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import { Grid, Text, Skeleton } from '@chakra-ui/react';
-import type { UseQueryResult } from '@tanstack/react-query';
-import { useRouter } from 'next/router';
-import React from 'react';
-
-import { ZKEVM_L2_TX_BATCH_STATUSES } from 'types/api/zkEvmL2TxnBatches';
-import type { ZkEvmL2TxnBatch } from 'types/api/zkEvmL2TxnBatches';
-
-import { route } from 'nextjs-routes';
-
-import type { ResourceError } from 'lib/api/resources';
-import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
-import DataFetchAlert from 'ui/shared/DataFetchAlert';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
-import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
-import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
-import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
-import LinkInternal from 'ui/shared/LinkInternal';
-import PrevNext from 'ui/shared/PrevNext';
-import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps';
-
-interface Props {
-  query: UseQueryResult<ZkEvmL2TxnBatch, ResourceError>;
-}
-
-const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
-  const router = useRouter();
-
-  const { data, isPlaceholderData, isError, error } = query;
-
-  const handlePrevNextClick = React.useCallback((direction: 'prev' | 'next') => {
-    if (!data) {
-      return;
-    }
-
-    const increment = direction === 'next' ? +1 : -1;
-    const nextId = String(data.number + increment);
-
-    router.push({ pathname: '/zkevm-l2-txn-batch/[number]', query: { number: nextId } }, undefined);
-  }, [ data, router ]);
-
-  if (isError) {
-    if (error?.status === 404 || error?.status === 422) {
-      throwOnResourceLoadError({ isError, error });
-    }
-
-    return <DataFetchAlert/>;
-  }
-
-  if (!data) {
-    return null;
-  }
-
-  return (
-    <Grid
-      columnGap={ 8 }
-      rowGap={{ base: 3, lg: 3 }}
-      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
-      overflow="hidden"
-    >
-      <DetailsInfoItem
-        title="Tx batch number"
-        isLoading={ isPlaceholderData }
-      >
-        <Skeleton isLoaded={ !isPlaceholderData }>
-          { data.number }
-        </Skeleton>
-        <PrevNext
-          ml={ 6 }
-          onClick={ handlePrevNextClick }
-          prevLabel="View previous tx batch"
-          nextLabel="View next tx batch"
-          isPrevDisabled={ data.number === 0 }
-          isLoading={ isPlaceholderData }
-        />
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Status"
-        isLoading={ isPlaceholderData }
-      >
-        <VerificationSteps steps={ ZKEVM_L2_TX_BATCH_STATUSES } currentStep={ data.status } isLoading={ isPlaceholderData }/>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Timestamp"
-        isLoading={ isPlaceholderData }
-      >
-        <DetailsTimestamp timestamp={ data.timestamp } isLoading={ isPlaceholderData }/>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Verify tx hash"
-        isLoading={ isPlaceholderData }
-      >
-        { data.verify_tx_hash ? (
-          <TxEntityL1
-            isLoading={ isPlaceholderData }
-            hash={ data.verify_tx_hash }
-            maxW="100%"
-          />
-        ) : <Text>pending</Text> }
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Transactions"
-        isLoading={ isPlaceholderData }
-      >
-        <Skeleton isLoaded={ !isPlaceholderData }>
-          <LinkInternal href={ route({ pathname: '/zkevm-l2-txn-batch/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
-            { data.transactions.length } transaction{ data.transactions.length === 1 ? '' : 's' }
-          </LinkInternal>
-        </Skeleton>
-      </DetailsInfoItem>
-
-      <DetailsInfoItemDivider/>
-
-      <DetailsInfoItem
-        title="Global exit root"
-        isLoading={ isPlaceholderData }
-        flexWrap="nowrap"
-      >
-        <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
-          <HashStringShortenDynamic hash={ data.global_exit_root }/>
-        </Skeleton>
-        <CopyToClipboard text={ data.global_exit_root } isLoading={ isPlaceholderData }/>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Acc input hash"
-        isLoading={ isPlaceholderData }
-        flexWrap="nowrap"
-      >
-        <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
-          <HashStringShortenDynamic hash={ data.acc_input_hash }/>
-        </Skeleton>
-        <CopyToClipboard text={ data.acc_input_hash } isLoading={ isPlaceholderData }/>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Sequence tx hash"
-        isLoading={ isPlaceholderData }
-      >
-        { data.sequence_tx_hash ? (
-          <TxEntityL1
-            isLoading={ isPlaceholderData }
-            hash={ data.sequence_tx_hash }
-            maxW="100%"
-          />
-        ) : <Text>Pending</Text> }
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="State root"
-        isLoading={ isPlaceholderData }
-        flexWrap="nowrap"
-      >
-        <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
-          <HashStringShortenDynamic hash={ data.state_root }/>
-        </Skeleton>
-        <CopyToClipboard text={ data.state_root } isLoading={ isPlaceholderData }/>
-      </DetailsInfoItem>
-    </Grid>
-  );
-};
-
-export default ZkEvmL2TxnBatchDetails;
diff --git a/ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesListItem.tsx b/ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesListItem.tsx
deleted file mode 100644
index 4b99a2e6c3..0000000000
--- a/ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesListItem.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Skeleton, Text } from '@chakra-ui/react';
-import React from 'react';
-
-import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2TxnBatches';
-
-import { route } from 'nextjs-routes';
-
-import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
-import ZkEvmBatchEntityL2 from 'ui/shared/entities/block/ZkEvmBatchEntityL2';
-import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkInternal from 'ui/shared/LinkInternal';
-import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
-import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus';
-
-const feature = config.features.zkEvmRollup;
-
-type Props = { item: ZkEvmL2TxnBatchesItem; isLoading?: boolean };
-
-const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => {
-  const timeAgo = dayjs(item.timestamp).fromNow();
-
-  if (!feature.isEnabled) {
-    return null;
-  }
-
-  return (
-    <ListItemMobileGrid.Container gridTemplateColumns="110px auto">
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Batch #</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <ZkEvmBatchEntityL2
-          isLoading={ isLoading }
-          number={ item.number }
-          fontSize="sm"
-          lineHeight={ 5 }
-          fontWeight={ 600 }
-        />
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Status</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <ZkEvmL2TxnBatchStatus status={ item.status } isLoading={ isLoading }/>
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ timeAgo }</Skeleton>
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Txn count</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <LinkInternal
-          href={ route({ pathname: '/zkevm-l2-txn-batch/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
-          isLoading={ isLoading }
-          fontWeight={ 600 }
-        >
-          <Skeleton isLoaded={ !isLoading } minW="40px">
-            { item.tx_count }
-          </Skeleton>
-        </LinkInternal>
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Verify Tx Has</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        { item.verify_tx_hash ? (
-          <TxEntityL1
-            isLoading={ isLoading }
-            hash={ item.verify_tx_hash }
-            fontSize="sm"
-            lineHeight={ 5 }
-            maxW="100%"
-          />
-        ) : <Text>Pending</Text> }
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Sequence hash</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        { item.sequence_tx_hash ? (
-          <TxEntityL1
-            isLoading={ isLoading }
-            hash={ item.sequence_tx_hash }
-            fontSize="sm"
-            lineHeight={ 5 }
-            maxW="100%"
-          />
-        ) : <Text>Pending</Text> }
-      </ListItemMobileGrid.Value>
-
-    </ListItemMobileGrid.Container>
-  );
-};
-
-export default ZkEvmTxnBatchesListItem;
diff --git a/ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesTable.tsx b/ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesTable.tsx
deleted file mode 100644
index fabbc0ae70..0000000000
--- a/ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesTable.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
-import React from 'react';
-
-import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2TxnBatches';
-
-import { default as Thead } from 'ui/shared/TheadSticky';
-
-import ZkEvmTxnBatchesTableItem from './ZkEvmTxnBatchesTableItem';
-
-type Props = {
-  items: Array<ZkEvmL2TxnBatchesItem>;
-  top: number;
-  isLoading?: boolean;
-}
-
-const TxnBatchesTable = ({ items, top, isLoading }: Props) => {
-  return (
-    <Table variant="simple" size="sm" minW="850px">
-      <Thead top={ top }>
-        <Tr>
-          <Th width="170px">Batch #</Th>
-          <Th width="150px">Status</Th>
-          <Th width="150px">Age</Th>
-          <Th width="170px">Txn count</Th>
-          <Th width="50%">Verify Tx Has</Th>
-          <Th width="50%">Sequence hash</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        { items.map((item, index) => (
-          <ZkEvmTxnBatchesTableItem
-            key={ item.number + (isLoading ? String(index) : '') }
-            item={ item }
-            isLoading={ isLoading }
-          />
-        )) }
-      </Tbody>
-    </Table>
-  );
-};
-
-export default TxnBatchesTable;
diff --git a/ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesTableItem.tsx b/ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesTableItem.tsx
deleted file mode 100644
index 3485414e71..0000000000
--- a/ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesTableItem.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Td, Tr, Text, Skeleton } from '@chakra-ui/react';
-import React from 'react';
-
-import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2TxnBatches';
-
-import { route } from 'nextjs-routes';
-
-import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
-import ZkEvmBatchEntityL2 from 'ui/shared/entities/block/ZkEvmBatchEntityL2';
-import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkInternal from 'ui/shared/LinkInternal';
-import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus';
-
-const feature = config.features.zkEvmRollup;
-
-type Props = { item: ZkEvmL2TxnBatchesItem; isLoading?: boolean };
-
-const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
-  const timeAgo = dayjs(item.timestamp).fromNow();
-
-  if (!feature.isEnabled) {
-    return null;
-  }
-
-  return (
-    <Tr>
-      <Td verticalAlign="middle">
-        <ZkEvmBatchEntityL2
-          isLoading={ isLoading }
-          number={ item.number }
-          fontSize="sm"
-          lineHeight={ 5 }
-          fontWeight={ 600 }
-        />
-      </Td>
-      <Td verticalAlign="middle">
-        <ZkEvmL2TxnBatchStatus status={ item.status } isLoading={ isLoading }/>
-      </Td>
-      <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } color="text_secondary">
-          <span>{ timeAgo }</span>
-        </Skeleton>
-      </Td>
-      <Td verticalAlign="middle">
-        <LinkInternal
-          href={ route({ pathname: '/zkevm-l2-txn-batch/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
-          isLoading={ isLoading }
-        >
-          <Skeleton isLoaded={ !isLoading } minW="40px" my={ 1 }>
-            { item.tx_count }
-          </Skeleton>
-        </LinkInternal>
-      </Td>
-      <Td pr={ 12 } verticalAlign="middle">
-        { item.verify_tx_hash ? (
-          <TxEntityL1
-            isLoading={ isLoading }
-            hash={ item.verify_tx_hash }
-            fontSize="sm"
-            lineHeight={ 5 }
-            maxW="100%"
-          />
-        ) : <Text>Pending</Text> }
-      </Td>
-      <Td pr={ 12 } verticalAlign="middle">
-        { item.sequence_tx_hash ? (
-          <TxEntityL1
-            isLoading={ isLoading }
-            hash={ item.sequence_tx_hash }
-            fontSize="sm"
-            lineHeight={ 5 }
-            maxW="100%"
-          />
-        ) : <Text>Pending</Text> }
-      </Td>
-    </Tr>
-  );
-};
-
-export default TxnBatchesTableItem;
diff --git a/yarn.lock b/yarn.lock
index c5e2efbb07..43d11d99f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,10 +7,10 @@
   resolved "https://registry.yarnpkg.com/@adraffy/ens-normalize/-/ens-normalize-1.10.0.tgz#d2a39395c587e092d77cbbc80acf956a54f38bf7"
   integrity sha512-nA9XHtlAkYfJxY7bce8DcN7eKxWWCWkU+1GR9d+U6MbNpfwQp8TI7vqOsBsMcHoT4mBu2kypKoSKnghEzOOq5Q==
 
-"@adraffy/ens-normalize@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@adraffy/ens-normalize/-/ens-normalize-1.9.0.tgz#223572538f6bea336750039bb43a4016dcc8182d"
-  integrity sha512-iowxq3U30sghZotgl4s/oJRci6WPBfNO5YYgk2cIOMCHr3LeGPcsZjCEr+33Q4N+oV3OABDAtA+pyvWjbvBifQ==
+"@adraffy/ens-normalize@1.11.0", "@adraffy/ens-normalize@^1.10.1":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@adraffy/ens-normalize/-/ens-normalize-1.11.0.tgz#42cc67c5baa407ac25059fcd7d405cc5ecdb0c33"
+  integrity sha512-/3DDPKHqqIqxUULp8yP4zODUY1i+2xvVWsv8A79xGWdCAG+8sb0hRh0Rk2QyOJUnnbyPUAZYcpBuRe3nS2OIUg==
 
 "@ampproject/remapping@^2.1.0", "@ampproject/remapping@^2.2.0":
   version "2.2.0"
@@ -20,6 +20,11 @@
     "@jridgewell/gen-mapping" "^0.1.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@assemblyscript/loader@^0.9.4":
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/@assemblyscript/loader/-/loader-0.9.4.tgz#a483c54c1253656bb33babd464e3154a173e1577"
+  integrity sha512-HazVq9zwTVwGmqdwYzu7WyQ6FQVZ7SwET0KKQuKm55jD0IfUpZgN0OPIiZG3zV1iSrVYcN0bdwLRXI/VNCYsUA==
+
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
@@ -42,6 +47,14 @@
     "@babel/highlight" "^7.23.4"
     chalk "^2.4.2"
 
+"@babel/code-frame@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.24.7.tgz#882fd9e09e8ee324e496bd040401c6f046ef4465"
+  integrity sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==
+  dependencies:
+    "@babel/highlight" "^7.24.7"
+    picocolors "^1.0.0"
+
 "@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.0", "@babel/compat-data@^7.20.1":
   version "7.20.1"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.1.tgz#f2e6ef7790d8c8dbf03d379502dcc246dcce0b30"
@@ -52,6 +65,11 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.22.3.tgz#cd502a6a0b6e37d7ad72ce7e71a7160a3ae36f7e"
   integrity sha512-aNtko9OPOwVESUFp3MZfD8Uzxl7JzSeJpd7npIoxCasU37PFbAQRpKglkaKwlHOyeJdrREpo8TW8ldrkYWwvIQ==
 
+"@babel/compat-data@^7.25.2":
+  version "7.25.4"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.25.4.tgz#7d2a80ce229890edcf4cc259d4d696cb4dae2fcb"
+  integrity sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==
+
 "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.19.6":
   version "7.20.2"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.20.2.tgz#8dc9b1620a673f92d3624bd926dc49a52cf25b92"
@@ -94,6 +112,27 @@
     json5 "^2.2.2"
     semver "^6.3.0"
 
+"@babel/core@^7.24.5":
+  version "7.25.2"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.25.2.tgz#ed8eec275118d7613e77a352894cd12ded8eba77"
+  integrity sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.24.7"
+    "@babel/generator" "^7.25.0"
+    "@babel/helper-compilation-targets" "^7.25.2"
+    "@babel/helper-module-transforms" "^7.25.2"
+    "@babel/helpers" "^7.25.0"
+    "@babel/parser" "^7.25.0"
+    "@babel/template" "^7.25.0"
+    "@babel/traverse" "^7.25.2"
+    "@babel/types" "^7.25.2"
+    convert-source-map "^2.0.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.3"
+    semver "^6.3.1"
+
 "@babel/generator@^7.20.2", "@babel/generator@^7.7.2":
   version "7.20.4"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.20.4.tgz#4d9f8f0c30be75fd90a0562099a26e5839602ab8"
@@ -123,6 +162,16 @@
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.25.0", "@babel/generator@^7.25.6":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.6.tgz#0df1ad8cb32fe4d2b01d8bf437f153d19342a87c"
+  integrity sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==
+  dependencies:
+    "@babel/types" "^7.25.6"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
@@ -159,6 +208,17 @@
     lru-cache "^5.1.1"
     semver "^6.3.0"
 
+"@babel/helper-compilation-targets@^7.25.2":
+  version "7.25.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.2.tgz#e1d9410a90974a3a5a66e84ff55ef62e3c02d06c"
+  integrity sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==
+  dependencies:
+    "@babel/compat-data" "^7.25.2"
+    "@babel/helper-validator-option" "^7.24.8"
+    browserslist "^4.23.1"
+    lru-cache "^5.1.1"
+    semver "^6.3.1"
+
 "@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.20.2":
   version "7.20.2"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.20.2.tgz#3c08a5b5417c7f07b5cf3dfb6dc79cbec682e8c2"
@@ -265,6 +325,14 @@
   dependencies:
     "@babel/types" "^7.21.4"
 
+"@babel/helper-module-imports@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz#f2f980392de5b84c3328fc71d38bd81bbb83042b"
+  integrity sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==
+  dependencies:
+    "@babel/traverse" "^7.24.7"
+    "@babel/types" "^7.24.7"
+
 "@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.19.6", "@babel/helper-module-transforms@^7.20.2":
   version "7.20.2"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.20.2.tgz#ac53da669501edd37e658602a21ba14c08748712"
@@ -293,6 +361,16 @@
     "@babel/traverse" "^7.22.1"
     "@babel/types" "^7.22.0"
 
+"@babel/helper-module-transforms@^7.25.2":
+  version "7.25.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.25.2.tgz#ee713c29768100f2776edf04d4eb23b8d27a66e6"
+  integrity sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.24.7"
+    "@babel/helper-simple-access" "^7.24.7"
+    "@babel/helper-validator-identifier" "^7.24.7"
+    "@babel/traverse" "^7.25.2"
+
 "@babel/helper-optimise-call-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe"
@@ -310,6 +388,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.19.0.tgz#4796bb14961521f0f8715990bee2fb6e51ce21bf"
   integrity sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw==
 
+"@babel/helper-plugin-utils@^7.24.7":
+  version "7.24.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz#94ee67e8ec0e5d44ea7baeb51e571bd26af07878"
+  integrity sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==
+
 "@babel/helper-remap-async-to-generator@^7.18.6", "@babel/helper-remap-async-to-generator@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz#997458a0e3357080e54e1d79ec347f8a8cd28519"
@@ -345,6 +428,14 @@
   dependencies:
     "@babel/types" "^7.21.5"
 
+"@babel/helper-simple-access@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz#bcade8da3aec8ed16b9c4953b74e506b51b5edb3"
+  integrity sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==
+  dependencies:
+    "@babel/traverse" "^7.24.7"
+    "@babel/types" "^7.24.7"
+
 "@babel/helper-skip-transparent-expression-wrappers@^7.18.9":
   version "7.20.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz#fbe4c52f60518cab8140d77101f0e63a8a230684"
@@ -381,6 +472,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz#9478c707febcbbe1ddb38a3d91a2e054ae622d83"
   integrity sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==
 
+"@babel/helper-string-parser@^7.24.8":
+  version "7.24.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz#5b3329c9a58803d5df425e5785865881a81ca48d"
+  integrity sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==
+
 "@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1":
   version "7.19.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
@@ -391,6 +487,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
   integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
 
+"@babel/helper-validator-identifier@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db"
+  integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==
+
 "@babel/helper-validator-option@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
@@ -401,6 +502,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz#8224c7e13ace4bafdc4004da2cf064ef42673180"
   integrity sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==
 
+"@babel/helper-validator-option@^7.24.8":
+  version "7.24.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz#3725cdeea8b480e86d34df15304806a06975e33d"
+  integrity sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==
+
 "@babel/helper-wrap-function@^7.18.9":
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.19.0.tgz#89f18335cff1152373222f76a4b37799636ae8b1"
@@ -429,6 +535,14 @@
     "@babel/traverse" "^7.22.1"
     "@babel/types" "^7.22.3"
 
+"@babel/helpers@^7.25.0":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.25.6.tgz#57ee60141829ba2e102f30711ffe3afab357cc60"
+  integrity sha512-Xg0tn4HcfTijTwfDwYlvVCl43V6h4KyVVX2aEm4qdO/PC6L2YvzLHFdmxhoeSA3eslcE6+ZVXHgWwopXYLNq4Q==
+  dependencies:
+    "@babel/template" "^7.25.0"
+    "@babel/types" "^7.25.6"
+
 "@babel/highlight@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
@@ -447,6 +561,16 @@
     chalk "^2.4.2"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.24.7.tgz#a05ab1df134b286558aae0ed41e6c5f731bf409d"
+  integrity sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.24.7"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
 "@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.2":
   version "7.20.3"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.3.tgz#5358cf62e380cf69efcb87a7bb922ff88bfac6e2"
@@ -457,12 +581,19 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.19.4.tgz#03c4339d2b8971eb3beca5252bafd9b9f79db3dc"
   integrity sha512-qpVT7gtuOLjWeDTKLkJ6sryqLliBaFpAtGeqw5cs5giLldvh+Ch0plqnUMKoVAUS6ZEueQQiZV+p5pxtPitEsA==
 
+"@babel/parser@^7.20.7", "@babel/parser@^7.25.0", "@babel/parser@^7.25.6":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.6.tgz#85660c5ef388cbbf6e3d2a694ee97a38f18afe2f"
+  integrity sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==
+  dependencies:
+    "@babel/types" "^7.25.6"
+
 "@babel/parser@^7.21.9", "@babel/parser@^7.22.0":
   version "7.22.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.4.tgz#a770e98fd785c231af9d93f6459d36770993fb32"
   integrity sha512-VLLsx06XkEYqBtE5YGPwfSGwfrjnyPP5oiGty3S8pQLFDFLaS8VwWSIxkTXpcvr5zeYLE6+MBNl2npl/YnfofA==
 
-"@babel/parser@^7.22.15", "@babel/parser@^7.23.5", "@babel/parser@^7.23.6":
+"@babel/parser@^7.22.15", "@babel/parser@^7.23.6":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.6.tgz#ba1c9e512bda72a47e285ae42aff9d2a635a9e3b"
   integrity sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==
@@ -957,6 +1088,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.20.2"
 
+"@babel/plugin-transform-react-jsx-self@^7.24.5":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.24.7.tgz#66bff0248ea0b549972e733516ffad577477bdab"
+  integrity sha512-fOPQYbGSgH0HUp4UJO4sMBFjY6DuWq+2i8rixyUMb3CdGixs/gccURvYOAhajBdKDoGajFr3mUq5rH3phtkGzw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.7"
+
 "@babel/plugin-transform-react-jsx-source@^7.19.6":
   version "7.19.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.19.6.tgz#88578ae8331e5887e8ce28e4c9dc83fb29da0b86"
@@ -964,6 +1102,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.19.0"
 
+"@babel/plugin-transform-react-jsx-source@^7.24.1":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.24.7.tgz#1198aab2548ad19582013815c938d3ebd8291ee3"
+  integrity sha512-J2z+MWzZHVOemyLweMqngXrgGC42jQ//R0KdxqkIz/OrbVIIlhFI3WigZ5fO+nwFvBlncr4MGapd8vTyc7RPNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.7"
+
 "@babel/plugin-transform-react-jsx@^7.18.6":
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.19.0.tgz#b3cbb7c3a00b92ec8ae1027910e331ba5c500eb9"
@@ -1171,14 +1316,6 @@
     "@babel/helper-validator-option" "^7.18.6"
     "@babel/plugin-transform-typescript" "^7.18.6"
 
-"@babel/runtime-corejs3@^7.10.2":
-  version "7.19.4"
-  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.19.4.tgz#870dbfd9685b3dad5aeb2d00841bb8b6192e3095"
-  integrity sha512-HzjQ8+dzdx7dmZy4DQ8KV8aHi/74AjEbBGTFutBmg/pd3dY5/q1sfuOGPTFGEytlQhWoeVXqcK5BwMgIkRkNDQ==
-  dependencies:
-    core-js-pure "^3.25.1"
-    regenerator-runtime "^0.13.4"
-
 "@babel/runtime-corejs3@^7.20.7":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.21.0.tgz#6e4939d9d9789ff63e2dc58e88f13a3913a24eba"
@@ -1195,7 +1332,7 @@
     core-js-pure "^3.30.2"
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3":
   version "7.19.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.4.tgz#a42f814502ee467d55b38dd1c256f53a7b885c78"
   integrity sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA==
@@ -1216,17 +1353,10 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
-  integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==
-  dependencies:
-    regenerator-runtime "^0.13.11"
-
-"@babel/runtime@^7.21.0", "@babel/runtime@^7.6.2":
-  version "7.24.1"
-  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz#431f9a794d173b53720e69a6464abc6f0e2a5c57"
-  integrity sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==
+"@babel/runtime@^7.21.0":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e"
+  integrity sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==
   dependencies:
     regenerator-runtime "^0.14.0"
 
@@ -1237,6 +1367,20 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1"
+  integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
+"@babel/runtime@^7.5.5":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
+  integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/runtime@^7.8.4":
   version "7.20.1"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.1.tgz#1148bb33ab252b165a06698fde7576092a78b4a9"
@@ -1271,6 +1415,15 @@
     "@babel/parser" "^7.22.15"
     "@babel/types" "^7.22.15"
 
+"@babel/template@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.0.tgz#e733dc3134b4fede528c15bc95e89cb98c52592a"
+  integrity sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==
+  dependencies:
+    "@babel/code-frame" "^7.24.7"
+    "@babel/parser" "^7.25.0"
+    "@babel/types" "^7.25.0"
+
 "@babel/traverse@^7.19.0", "@babel/traverse@^7.19.1", "@babel/traverse@^7.20.1", "@babel/traverse@^7.22.1", "@babel/traverse@^7.7.2":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.6.tgz#b53526a2367a0dd6edc423637f3d2d0f2521abc5"
@@ -1287,6 +1440,19 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
+"@babel/traverse@^7.24.7", "@babel/traverse@^7.25.2":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.6.tgz#04fad980e444f182ecf1520504941940a90fea41"
+  integrity sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==
+  dependencies:
+    "@babel/code-frame" "^7.24.7"
+    "@babel/generator" "^7.25.6"
+    "@babel/parser" "^7.25.6"
+    "@babel/template" "^7.25.0"
+    "@babel/types" "^7.25.6"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.18.9", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
   version "7.20.2"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.2.tgz#67ac09266606190f496322dbaff360fdaa5e7842"
@@ -1305,6 +1471,15 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.20.7", "@babel/types@^7.24.7", "@babel/types@^7.25.0", "@babel/types@^7.25.2", "@babel/types@^7.25.6":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.6.tgz#893942ddb858f32ae7a004ec9d3a76b3463ef8e6"
+  integrity sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==
+  dependencies:
+    "@babel/helper-string-parser" "^7.24.8"
+    "@babel/helper-validator-identifier" "^7.24.7"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.21.4", "@babel/types@^7.21.5", "@babel/types@^7.22.0", "@babel/types@^7.22.3":
   version "7.22.4"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.4.tgz#56a2653ae7e7591365dabf20b76295410684c071"
@@ -1328,11 +1503,38 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@blockscout/bens-types@1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@blockscout/bens-types/-/bens-types-1.4.1.tgz#9182a79d9015b7fa2339edf0bfa3cd0c32045e66"
+  integrity sha512-TlZ1HVdZ2Cswm/CcvNoxS+Ydiht/YGaLo//PJR/UmkmihlEFoY4HfVJvVcUnOQXi+Si7FwJ486DPii889nTJsQ==
+
+"@blockscout/stats-types@2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@blockscout/stats-types/-/stats-types-2.0.0.tgz#3805f8379b75377cde8a9ab76306af37bb735846"
+  integrity sha512-icYDsOHsDACjG/7VZhlV+1QRKSJOycblpswQ5Si0dqeWdOpbtmxSqolAS/z6C77d8p+uxZUCMjNa9otUCqn18A==
+
+"@blockscout/visualizer-types@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@blockscout/visualizer-types/-/visualizer-types-0.2.0.tgz#a8ef326d69e29417db124c78f868d68aca959ad1"
+  integrity sha512-gasqbEL89iH8YnH/TIEk0MBSG9SwhEJegY9tnQ1c/jFZOCYjiVkgNwm4oH0ncwCKoNX1GoKAregbkEUwDDw7FQ==
+
 "@braintree/sanitize-url@=6.0.4":
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz#923ca57e173c6b232bbbb07347b1be982f03e783"
   integrity sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==
 
+"@chainsafe/is-ip@^2.0.1", "@chainsafe/is-ip@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@chainsafe/is-ip/-/is-ip-2.0.2.tgz#7311e7403f11d8c5cfa48111f56fcecaac37c9f6"
+  integrity sha512-ndGqEMG1W5WkGagaqOZHpPU172AGdxr+LD15sv3WIUvT5oCFUrG1Y0CW/v2Egwj4JXEvSibaIIIqImsm98y1nA==
+
+"@chainsafe/netmask@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@chainsafe/netmask/-/netmask-2.0.0.tgz#0d4a75f47919f65011da4327a3845c9661f1038a"
+  integrity sha512-I3Z+6SWUoaljh3TBzCnCxjlUyN8tA+NAk5L6m9IxvCf1BENQTePzPMis97CoN/iMW1St3WN+AWCCRp+TTBRiDg==
+  dependencies:
+    "@chainsafe/is-ip" "^2.0.1"
+
 "@chakra-ui/accordion@2.2.0":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@chakra-ui/accordion/-/accordion-2.2.0.tgz#a38ed8e7d0a7ccc6910282f913c42cf6deea7215"
@@ -2156,28 +2358,24 @@
     picocolors "^1.0.0"
     sisteransi "^1.0.5"
 
-"@coinbase/wallet-sdk@^3.6.6":
-  version "3.6.6"
-  resolved "https://registry.yarnpkg.com/@coinbase/wallet-sdk/-/wallet-sdk-3.6.6.tgz#4a0758fe0fe0ba3ed7e33b5bb6eb094ff8bd6c98"
-  integrity sha512-vX+epj/Ttjo7XRwlr3TFUUfW5GTRMvORpERPwiu7z2jl3DSVL4rXLmHt5y6LDPlUVreas2gumdcFbu0fLRG9Jg==
+"@cloudnouns/kit@1.1.6":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@cloudnouns/kit/-/kit-1.1.6.tgz#1d6f6f86f7b9729b816f1404fd050171a1e5a743"
+  integrity sha512-4Burtt19tpoJ4dpNdE2UjQA3BjbizUzyidgM89JqEo+JO10E/5fvkQUrfNiNUQloyAXys2Iakq4N4p/+/9O+tw==
   dependencies:
-    "@metamask/safe-event-emitter" "2.0.0"
-    "@solana/web3.js" "^1.70.1"
-    bind-decorator "^1.0.11"
-    bn.js "^5.1.1"
-    buffer "^6.0.3"
-    clsx "^1.1.0"
-    eth-block-tracker "6.1.0"
-    eth-json-rpc-filters "5.1.0"
-    eth-rpc-errors "4.0.2"
-    json-rpc-engine "6.1.0"
-    keccak "^3.0.1"
-    preact "^10.5.9"
-    qs "^6.10.3"
-    rxjs "^6.6.3"
-    sha.js "^2.4.11"
-    stream-browserify "^3.0.0"
-    util "^0.12.4"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/solidity" "^5.7.0"
+    jshashes "^1.0.8"
+
+"@coinbase/wallet-sdk@4.2.3":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/@coinbase/wallet-sdk/-/wallet-sdk-4.2.3.tgz#a30fa0605b24bc42c37f52a62d2442bcbb7734af"
+  integrity sha512-BcyHZ/Ec84z0emORzqdXDv4P0oV+tV3a0OirfA8Ko1JGBIAVvB+hzLvZzCDvnuZx7MTK+Dd8Y9Tjlo446BpCIg==
+  dependencies:
+    "@noble/hashes" "^1.4.0"
+    clsx "^1.2.1"
+    eventemitter3 "^5.0.1"
+    preact "^10.24.2"
 
 "@cspotcode/source-map-support@^0.8.0":
   version "0.8.1"
@@ -2186,10 +2384,22 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@cush/relative@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@cush/relative/-/relative-1.0.0.tgz#8cd1769bf9bde3bb27dac356b1bc94af40f6cc16"
-  integrity sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==
+"@discoveryjs/json-ext@0.5.7":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
+  integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
+
+"@ecies/ciphers@^0.2.1":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@ecies/ciphers/-/ciphers-0.2.2.tgz#82a15b10a6e502b63fb30915d944b2eaf3ff17ff"
+  integrity sha512-ylfGR7PyTd+Rm2PqQowG08BCKA22QuX8NzrL+LxAAvazN10DMwdJ2fWwAzRj05FI/M8vNFGm3cv9Wq/GFWCBLg==
+
+"@emnapi/runtime@^1.2.0":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.3.1.tgz#0fcaa575afc31f455fd33534c19381cfce6c6f60"
+  integrity sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==
+  dependencies:
+    tslib "^2.4.0"
 
 "@emotion/babel-plugin@^11.10.5":
   version "11.10.5"
@@ -2311,115 +2521,120 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb"
   integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==
 
-"@esbuild/android-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
-  integrity sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==
-
-"@esbuild/android-arm@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz#fedb265bc3a589c84cc11f810804f234947c3682"
-  integrity sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==
-
-"@esbuild/android-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz#35cf419c4cfc8babe8893d296cd990e9e9f756f2"
-  integrity sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==
-
-"@esbuild/darwin-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz#08172cbeccf95fbc383399a7f39cfbddaeb0d7c1"
-  integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==
-
-"@esbuild/darwin-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz#d70d5790d8bf475556b67d0f8b7c5bdff053d85d"
-  integrity sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==
-
-"@esbuild/freebsd-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz#98755cd12707f93f210e2494d6a4b51b96977f54"
-  integrity sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==
-
-"@esbuild/freebsd-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz#c1eb2bff03915f87c29cece4c1a7fa1f423b066e"
-  integrity sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==
-
-"@esbuild/linux-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz#bad4238bd8f4fc25b5a021280c770ab5fc3a02a0"
-  integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==
-
-"@esbuild/linux-arm@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz#3e617c61f33508a27150ee417543c8ab5acc73b0"
-  integrity sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==
-
-"@esbuild/linux-ia32@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz#699391cccba9aee6019b7f9892eb99219f1570a7"
-  integrity sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==
-
-"@esbuild/linux-loong64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d"
-  integrity sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==
-
-"@esbuild/linux-mips64el@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz#eeff3a937de9c2310de30622a957ad1bd9183231"
-  integrity sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==
-
-"@esbuild/linux-ppc64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz#2f7156bde20b01527993e6881435ad79ba9599fb"
-  integrity sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==
-
-"@esbuild/linux-riscv64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz#6628389f210123d8b4743045af8caa7d4ddfc7a6"
-  integrity sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==
-
-"@esbuild/linux-s390x@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz#255e81fb289b101026131858ab99fba63dcf0071"
-  integrity sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==
-
-"@esbuild/linux-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz#c7690b3417af318a9b6f96df3031a8865176d338"
-  integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==
-
-"@esbuild/netbsd-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz#30e8cd8a3dded63975e2df2438ca109601ebe0d1"
-  integrity sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==
-
-"@esbuild/openbsd-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz#7812af31b205055874c8082ea9cf9ab0da6217ae"
-  integrity sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==
-
-"@esbuild/sunos-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz#d5c275c3b4e73c9b0ecd38d1ca62c020f887ab9d"
-  integrity sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==
-
-"@esbuild/win32-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz#73bc7f5a9f8a77805f357fab97f290d0e4820ac9"
-  integrity sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==
-
-"@esbuild/win32-ia32@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102"
-  integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==
-
-"@esbuild/win32-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz#786c5f41f043b07afb1af37683d7c33668858f6d"
-  integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==
+"@esbuild/aix-ppc64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz#c7184a326533fcdf1b8ee0733e21c713b975575f"
+  integrity sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==
+
+"@esbuild/android-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz#09d9b4357780da9ea3a7dfb833a1f1ff439b4052"
+  integrity sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==
+
+"@esbuild/android-arm@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.21.5.tgz#9b04384fb771926dfa6d7ad04324ecb2ab9b2e28"
+  integrity sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==
+
+"@esbuild/android-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.21.5.tgz#29918ec2db754cedcb6c1b04de8cd6547af6461e"
+  integrity sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==
+
+"@esbuild/darwin-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz#e495b539660e51690f3928af50a76fb0a6ccff2a"
+  integrity sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==
+
+"@esbuild/darwin-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz#c13838fa57372839abdddc91d71542ceea2e1e22"
+  integrity sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==
+
+"@esbuild/freebsd-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz#646b989aa20bf89fd071dd5dbfad69a3542e550e"
+  integrity sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==
+
+"@esbuild/freebsd-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz#aa615cfc80af954d3458906e38ca22c18cf5c261"
+  integrity sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==
+
+"@esbuild/linux-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz#70ac6fa14f5cb7e1f7f887bcffb680ad09922b5b"
+  integrity sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==
+
+"@esbuild/linux-arm@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz#fc6fd11a8aca56c1f6f3894f2bea0479f8f626b9"
+  integrity sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==
+
+"@esbuild/linux-ia32@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz#3271f53b3f93e3d093d518d1649d6d68d346ede2"
+  integrity sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==
+
+"@esbuild/linux-loong64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz#ed62e04238c57026aea831c5a130b73c0f9f26df"
+  integrity sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==
+
+"@esbuild/linux-mips64el@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz#e79b8eb48bf3b106fadec1ac8240fb97b4e64cbe"
+  integrity sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==
+
+"@esbuild/linux-ppc64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz#5f2203860a143b9919d383ef7573521fb154c3e4"
+  integrity sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==
+
+"@esbuild/linux-riscv64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz#07bcafd99322d5af62f618cb9e6a9b7f4bb825dc"
+  integrity sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==
+
+"@esbuild/linux-s390x@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz#b7ccf686751d6a3e44b8627ababc8be3ef62d8de"
+  integrity sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==
+
+"@esbuild/linux-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz#6d8f0c768e070e64309af8004bb94e68ab2bb3b0"
+  integrity sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==
+
+"@esbuild/netbsd-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz#bbe430f60d378ecb88decb219c602667387a6047"
+  integrity sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==
+
+"@esbuild/openbsd-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz#99d1cf2937279560d2104821f5ccce220cb2af70"
+  integrity sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==
+
+"@esbuild/sunos-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz#08741512c10d529566baba837b4fe052c8f3487b"
+  integrity sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==
+
+"@esbuild/win32-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz#675b7385398411240735016144ab2e99a60fc75d"
+  integrity sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==
+
+"@esbuild/win32-ia32@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz#1bfc3ce98aa6ca9a0969e4d2af72144c59c1193b"
+  integrity sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==
+
+"@esbuild/win32-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz#acad351d582d157bb145535db2a6ff53dd514b5c"
+  integrity sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==
 
 "@eslint-community/eslint-utils@^4.2.0":
   version "4.4.0"
@@ -2428,26 +2643,74 @@
   dependencies:
     eslint-visitor-keys "^3.3.0"
 
+"@eslint-community/eslint-utils@^4.4.0":
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz#d1145bf2c20132d6400495d6df4bf59362fd9d56"
+  integrity sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==
+  dependencies:
+    eslint-visitor-keys "^3.4.3"
+
+"@eslint-community/regexpp@^4.10.0", "@eslint-community/regexpp@^4.12.1", "@eslint-community/regexpp@^4.8.0", "@eslint-community/regexpp@^4.9.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.12.1.tgz#cfc6cffe39df390a3841cde2abccf92eaa7ae0e0"
+  integrity sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==
+
 "@eslint-community/regexpp@^4.4.0":
-  version "4.5.1"
-  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.5.1.tgz#cdd35dce4fa1a89a4fd42b1599eb35b3af408884"
-  integrity sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.0.tgz#548f6de556857c8bb73bbee70c35dc82a2e74d63"
+  integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
 
-"@eslint/eslintrc@^1.4.1":
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.4.1.tgz#af58772019a2d271b7e2d4c23ff4ddcba3ccfb3e"
-  integrity sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==
+"@eslint/compat@1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@eslint/compat/-/compat-1.2.2.tgz#46d02898df7e32ccc04166b6ea2689c52dee10da"
+  integrity sha512-jhgiIrsw+tRfcBQ4BFl2C3vCrIUw2trCY0cnDvGZpwTtKCEDmZhAtMfrEUP/KpnwM6PrO0T+Ltm+ccW74olG3Q==
+
+"@eslint/config-array@^0.18.0":
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/@eslint/config-array/-/config-array-0.18.0.tgz#37d8fe656e0d5e3dbaea7758ea56540867fd074d"
+  integrity sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==
+  dependencies:
+    "@eslint/object-schema" "^2.1.4"
+    debug "^4.3.1"
+    minimatch "^3.1.2"
+
+"@eslint/core@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@eslint/core/-/core-0.7.0.tgz#a1bb4b6a4e742a5ff1894b7ee76fbf884ec72bd3"
+  integrity sha512-xp5Jirz5DyPYlPiKat8jaq0EmYvDXKKpzTbxXMpT9eqlRJkRKIz9AGMdlvYjih+im+QlhWrpvVjl8IPC/lHlUw==
+
+"@eslint/eslintrc@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-3.1.0.tgz#dbd3482bfd91efa663cbe7aa1f506839868207b6"
+  integrity sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
-    espree "^9.4.0"
-    globals "^13.19.0"
+    espree "^10.0.1"
+    globals "^14.0.0"
     ignore "^5.2.0"
     import-fresh "^3.2.1"
     js-yaml "^4.1.0"
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@eslint/js@9.14.0":
+  version "9.14.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-9.14.0.tgz#2347a871042ebd11a00fd8c2d3d56a265ee6857e"
+  integrity sha512-pFoEtFWCPyDOl+C6Ift+wC7Ro89otjigCf5vcuWqWgqNSQbRrpjSvdeE6ofLz4dHmyxD5f7gIdGT4+p36L6Twg==
+
+"@eslint/object-schema@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@eslint/object-schema/-/object-schema-2.1.4.tgz#9e69f8bb4031e11df79e03db09f9dbbae1740843"
+  integrity sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==
+
+"@eslint/plugin-kit@^0.2.0":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@eslint/plugin-kit/-/plugin-kit-0.2.2.tgz#5eff371953bc13e3f4d88150e2c53959f64f74f6"
+  integrity sha512-CXtq5nR4Su+2I47WPOlWud98Y5Lv8Kyxp2ukhgFx/eW6Blm18VXJO5WuQylPugRo8nbluoi6GvvxBLqHcvqUUw==
+  dependencies:
+    levn "^0.4.1"
+
 "@ethereumjs/common@^3.2.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@ethereumjs/common/-/common-3.2.0.tgz#b71df25845caf5456449163012074a55f048e0a0"
@@ -2461,7 +2724,7 @@
   resolved "https://registry.yarnpkg.com/@ethereumjs/rlp/-/rlp-4.0.1.tgz#626fabfd9081baab3d0a3074b0c7ecaf674aaa41"
   integrity sha512-tqsQiBQDQdmPWE1xkkBq4rlSW5QZpLOUJ5RJh2/9fug+q9tnUhuZoVLk7s0scUIKTOzEtR72DFBXI4WiZcMpvw==
 
-"@ethereumjs/tx@^4.1.2":
+"@ethereumjs/tx@^4.1.2", "@ethereumjs/tx@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@ethereumjs/tx/-/tx-4.2.0.tgz#5988ae15daf5a3b3c815493bc6b495e76009e853"
   integrity sha512-1nc6VO4jtFd172BbSnTnDQVr9IYBFl1y4xPzZdtkrkKIncBCkdbgfdRV+MiTkJYAtTxvV12GRZLqBFT1PNK6Yw==
@@ -2480,72 +2743,7 @@
     ethereum-cryptography "^2.0.0"
     micro-ftch "^0.3.1"
 
-"@ethersproject/abi@5.7.0", "@ethersproject/abi@^5.7.0":
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/@ethersproject/abi/-/abi-5.7.0.tgz#b3f3e045bbbeed1af3947335c247ad625a44e449"
-  integrity sha512-351ktp42TiRcYB3H1OP8yajPeAQstMW/yCFokj/AthP9bLHzQFPlOrxOcwYEDkUAICmOHljvN4K39OMTMUa9RA==
-  dependencies:
-    "@ethersproject/address" "^5.7.0"
-    "@ethersproject/bignumber" "^5.7.0"
-    "@ethersproject/bytes" "^5.7.0"
-    "@ethersproject/constants" "^5.7.0"
-    "@ethersproject/hash" "^5.7.0"
-    "@ethersproject/keccak256" "^5.7.0"
-    "@ethersproject/logger" "^5.7.0"
-    "@ethersproject/properties" "^5.7.0"
-    "@ethersproject/strings" "^5.7.0"
-
-"@ethersproject/abstract-provider@5.7.0", "@ethersproject/abstract-provider@^5.7.0":
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/@ethersproject/abstract-provider/-/abstract-provider-5.7.0.tgz#b0a8550f88b6bf9d51f90e4795d48294630cb9ef"
-  integrity sha512-R41c9UkchKCpAqStMYUpdunjo3pkEvZC3FAwZn5S5MGbXoMQOHIdHItezTETxAO5bevtMApSyEhn9+CHcDsWBw==
-  dependencies:
-    "@ethersproject/bignumber" "^5.7.0"
-    "@ethersproject/bytes" "^5.7.0"
-    "@ethersproject/logger" "^5.7.0"
-    "@ethersproject/networks" "^5.7.0"
-    "@ethersproject/properties" "^5.7.0"
-    "@ethersproject/transactions" "^5.7.0"
-    "@ethersproject/web" "^5.7.0"
-
-"@ethersproject/abstract-signer@5.7.0", "@ethersproject/abstract-signer@^5.7.0":
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/@ethersproject/abstract-signer/-/abstract-signer-5.7.0.tgz#13f4f32117868452191a4649723cb086d2b596b2"
-  integrity sha512-a16V8bq1/Cz+TGCkE2OPMTOUDLS3grCpdjoJCYNnVBbdYEMSgKrU0+B90s8b6H+ByYTBZN7a3g76jdIJi7UfKQ==
-  dependencies:
-    "@ethersproject/abstract-provider" "^5.7.0"
-    "@ethersproject/bignumber" "^5.7.0"
-    "@ethersproject/bytes" "^5.7.0"
-    "@ethersproject/logger" "^5.7.0"
-    "@ethersproject/properties" "^5.7.0"
-
-"@ethersproject/address@5.7.0", "@ethersproject/address@^5.7.0":
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/@ethersproject/address/-/address-5.7.0.tgz#19b56c4d74a3b0a46bfdbb6cfcc0a153fc697f37"
-  integrity sha512-9wYhYt7aghVGo758POM5nqcOMaE168Q6aRLJZwUmiqSrAungkG74gSSeKEIR7ukixesdRZGPgVqme6vmxs1fkA==
-  dependencies:
-    "@ethersproject/bignumber" "^5.7.0"
-    "@ethersproject/bytes" "^5.7.0"
-    "@ethersproject/keccak256" "^5.7.0"
-    "@ethersproject/logger" "^5.7.0"
-    "@ethersproject/rlp" "^5.7.0"
-
-"@ethersproject/base64@5.7.0", "@ethersproject/base64@^5.7.0":
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/@ethersproject/base64/-/base64-5.7.0.tgz#ac4ee92aa36c1628173e221d0d01f53692059e1c"
-  integrity sha512-Dr8tcHt2mEbsZr/mwTPIQAf3Ai0Bks/7gTw9dSqk1mQvhW3XvRlmDJr/4n+wg1JmCl16NZue17CDh8xb/vZ0sQ==
-  dependencies:
-    "@ethersproject/bytes" "^5.7.0"
-
-"@ethersproject/basex@5.7.0", "@ethersproject/basex@^5.7.0":
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/@ethersproject/basex/-/basex-5.7.0.tgz#97034dc7e8938a8ca943ab20f8a5e492ece4020b"
-  integrity sha512-ywlh43GwZLv2Voc2gQVTKBoVQ1mti3d8HK5aMxsfu/nRDnMmNqaSJ3r3n85HBByT8OpoY96SXM1FogC533T4zw==
-  dependencies:
-    "@ethersproject/bytes" "^5.7.0"
-    "@ethersproject/properties" "^5.7.0"
-
-"@ethersproject/bignumber@5.7.0", "@ethersproject/bignumber@^5.7.0":
+"@ethersproject/bignumber@^5.7.0":
   version "5.7.0"
   resolved "https://registry.yarnpkg.com/@ethersproject/bignumber/-/bignumber-5.7.0.tgz#e2f03837f268ba655ffba03a57853e18a18dc9c2"
   integrity sha512-n1CAdIHRWjSucQO3MC1zPSVgV/6dy/fjL9pMrPP9peL+QxEg9wOsVqwD4+818B6LUEtaXzVHQiuivzRoxPxUGw==
@@ -2554,89 +2752,21 @@
     "@ethersproject/logger" "^5.7.0"
     bn.js "^5.2.1"
 
-"@ethersproject/bytes@5.7.0", "@ethersproject/bytes@^5.7.0":
+"@ethersproject/bytes@^5.7.0":
   version "5.7.0"
   resolved "https://registry.yarnpkg.com/@ethersproject/bytes/-/bytes-5.7.0.tgz#a00f6ea8d7e7534d6d87f47188af1148d71f155d"
   integrity sha512-nsbxwgFXWh9NyYWo+U8atvmMsSdKJprTcICAkvbBffT75qDocbuggBU0SJiVK2MuTrp0q+xvLkTnGMPK1+uA9A==
   dependencies:
     "@ethersproject/logger" "^5.7.0"
 
-"@ethersproject/constants@5.7.0", "@ethersproject/constants@^5.7.0":
+"@ethersproject/constants@^5.7.0":
   version "5.7.0"
   resolved "https://registry.yarnpkg.com/@ethersproject/constants/-/constants-5.7.0.tgz#df80a9705a7e08984161f09014ea012d1c75295e"
   integrity sha512-DHI+y5dBNvkpYUMiRQyxRBYBefZkJfo70VUkUAsRjcPs47muV9evftfZ0PJVCXYbAiCgght0DtcF9srFQmIgWA==
   dependencies:
     "@ethersproject/bignumber" "^5.7.0"
 
-"@ethersproject/contracts@5.7.0":
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/@ethersproject/contracts/-/contracts-5.7.0.tgz#c305e775abd07e48aa590e1a877ed5c316f8bd1e"
-  integrity sha512-5GJbzEU3X+d33CdfPhcyS+z8MzsTrBGk/sc+G+59+tPa9yFkl6HQ9D6L0QMgNTA9q8dT0XKxxkyp883XsQvbbg==
-  dependencies:
-    "@ethersproject/abi" "^5.7.0"
-    "@ethersproject/abstract-provider" "^5.7.0"
-    "@ethersproject/abstract-signer" "^5.7.0"
-    "@ethersproject/address" "^5.7.0"
-    "@ethersproject/bignumber" "^5.7.0"
-    "@ethersproject/bytes" "^5.7.0"
-    "@ethersproject/constants" "^5.7.0"
-    "@ethersproject/logger" "^5.7.0"
-    "@ethersproject/properties" "^5.7.0"
-    "@ethersproject/transactions" "^5.7.0"
-
-"@ethersproject/hash@5.7.0", "@ethersproject/hash@^5.7.0":
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/@ethersproject/hash/-/hash-5.7.0.tgz#eb7aca84a588508369562e16e514b539ba5240a7"
-  integrity sha512-qX5WrQfnah1EFnO5zJv1v46a8HW0+E5xuBBDTwMFZLuVTx0tbU2kkx15NqdjxecrLGatQN9FGQKpb1FKdHCt+g==
-  dependencies:
-    "@ethersproject/abstract-signer" "^5.7.0"
-    "@ethersproject/address" "^5.7.0"
-    "@ethersproject/base64" "^5.7.0"
-    "@ethersproject/bignumber" "^5.7.0"
-    "@ethersproject/bytes" "^5.7.0"
-    "@ethersproject/keccak256" "^5.7.0"
-    "@ethersproject/logger" "^5.7.0"
-    "@ethersproject/properties" "^5.7.0"
-    "@ethersproject/strings" "^5.7.0"
-
-"@ethersproject/hdnode@5.7.0", "@ethersproject/hdnode@^5.7.0":
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/@ethersproject/hdnode/-/hdnode-5.7.0.tgz#e627ddc6b466bc77aebf1a6b9e47405ca5aef9cf"
-  integrity sha512-OmyYo9EENBPPf4ERhR7oj6uAtUAhYGqOnIS+jE5pTXvdKBS99ikzq1E7Iv0ZQZ5V36Lqx1qZLeak0Ra16qpeOg==
-  dependencies:
-    "@ethersproject/abstract-signer" "^5.7.0"
-    "@ethersproject/basex" "^5.7.0"
-    "@ethersproject/bignumber" "^5.7.0"
-    "@ethersproject/bytes" "^5.7.0"
-    "@ethersproject/logger" "^5.7.0"
-    "@ethersproject/pbkdf2" "^5.7.0"
-    "@ethersproject/properties" "^5.7.0"
-    "@ethersproject/sha2" "^5.7.0"
-    "@ethersproject/signing-key" "^5.7.0"
-    "@ethersproject/strings" "^5.7.0"
-    "@ethersproject/transactions" "^5.7.0"
-    "@ethersproject/wordlists" "^5.7.0"
-
-"@ethersproject/json-wallets@5.7.0", "@ethersproject/json-wallets@^5.7.0":
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/@ethersproject/json-wallets/-/json-wallets-5.7.0.tgz#5e3355287b548c32b368d91014919ebebddd5360"
-  integrity sha512-8oee5Xgu6+RKgJTkvEMl2wDgSPSAQ9MB/3JYjFV9jlKvcYHUXZC+cQp0njgmxdHkYWn8s6/IqIZYm0YWCjO/0g==
-  dependencies:
-    "@ethersproject/abstract-signer" "^5.7.0"
-    "@ethersproject/address" "^5.7.0"
-    "@ethersproject/bytes" "^5.7.0"
-    "@ethersproject/hdnode" "^5.7.0"
-    "@ethersproject/keccak256" "^5.7.0"
-    "@ethersproject/logger" "^5.7.0"
-    "@ethersproject/pbkdf2" "^5.7.0"
-    "@ethersproject/properties" "^5.7.0"
-    "@ethersproject/random" "^5.7.0"
-    "@ethersproject/strings" "^5.7.0"
-    "@ethersproject/transactions" "^5.7.0"
-    aes-js "3.0.0"
-    scrypt-js "3.0.1"
-
-"@ethersproject/keccak256@5.7.0", "@ethersproject/keccak256@^5.7.0":
+"@ethersproject/keccak256@^5.7.0":
   version "5.7.0"
   resolved "https://registry.yarnpkg.com/@ethersproject/keccak256/-/keccak256-5.7.0.tgz#3186350c6e1cd6aba7940384ec7d6d9db01f335a"
   integrity sha512-2UcPboeL/iW+pSg6vZ6ydF8tCnv3Iu/8tUmLLzWWGzxWKFFqOBQFLo6uLUv6BDrLgCDfN28RJ/wtByx+jZ4KBg==
@@ -2644,76 +2774,12 @@
     "@ethersproject/bytes" "^5.7.0"
     js-sha3 "0.8.0"
 
-"@ethersproject/logger@5.7.0", "@ethersproject/logger@^5.7.0":
+"@ethersproject/logger@^5.7.0":
   version "5.7.0"
   resolved "https://registry.yarnpkg.com/@ethersproject/logger/-/logger-5.7.0.tgz#6ce9ae168e74fecf287be17062b590852c311892"
   integrity sha512-0odtFdXu/XHtjQXJYA3u9G0G8btm0ND5Cu8M7i5vhEcE8/HmF4Lbdqanwyv4uQTr2tx6b7fQRmgLrsnpQlmnig==
 
-"@ethersproject/networks@5.7.1", "@ethersproject/networks@^5.7.0":
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/@ethersproject/networks/-/networks-5.7.1.tgz#118e1a981d757d45ccea6bb58d9fd3d9db14ead6"
-  integrity sha512-n/MufjFYv3yFcUyfhnXotyDlNdFb7onmkSy8aQERi2PjNcnWQ66xXxa3XlS8nCcA8aJKJjIIMNJTC7tu80GwpQ==
-  dependencies:
-    "@ethersproject/logger" "^5.7.0"
-
-"@ethersproject/pbkdf2@5.7.0", "@ethersproject/pbkdf2@^5.7.0":
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/@ethersproject/pbkdf2/-/pbkdf2-5.7.0.tgz#d2267d0a1f6e123f3771007338c47cccd83d3102"
-  integrity sha512-oR/dBRZR6GTyaofd86DehG72hY6NpAjhabkhxgr3X2FpJtJuodEl2auADWBZfhDHgVCbu3/H/Ocq2uC6dpNjjw==
-  dependencies:
-    "@ethersproject/bytes" "^5.7.0"
-    "@ethersproject/sha2" "^5.7.0"
-
-"@ethersproject/properties@5.7.0", "@ethersproject/properties@^5.7.0":
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/@ethersproject/properties/-/properties-5.7.0.tgz#a6e12cb0439b878aaf470f1902a176033067ed30"
-  integrity sha512-J87jy8suntrAkIZtecpxEPxY//szqr1mlBaYlQ0r4RCaiD2hjheqF9s1LVE8vVuJCXisjIP+JgtK/Do54ej4Sw==
-  dependencies:
-    "@ethersproject/logger" "^5.7.0"
-
-"@ethersproject/providers@5.7.2":
-  version "5.7.2"
-  resolved "https://registry.yarnpkg.com/@ethersproject/providers/-/providers-5.7.2.tgz#f8b1a4f275d7ce58cf0a2eec222269a08beb18cb"
-  integrity sha512-g34EWZ1WWAVgr4aptGlVBF8mhl3VWjv+8hoAnzStu8Ah22VHBsuGzP17eb6xDVRzw895G4W7vvx60lFFur/1Rg==
-  dependencies:
-    "@ethersproject/abstract-provider" "^5.7.0"
-    "@ethersproject/abstract-signer" "^5.7.0"
-    "@ethersproject/address" "^5.7.0"
-    "@ethersproject/base64" "^5.7.0"
-    "@ethersproject/basex" "^5.7.0"
-    "@ethersproject/bignumber" "^5.7.0"
-    "@ethersproject/bytes" "^5.7.0"
-    "@ethersproject/constants" "^5.7.0"
-    "@ethersproject/hash" "^5.7.0"
-    "@ethersproject/logger" "^5.7.0"
-    "@ethersproject/networks" "^5.7.0"
-    "@ethersproject/properties" "^5.7.0"
-    "@ethersproject/random" "^5.7.0"
-    "@ethersproject/rlp" "^5.7.0"
-    "@ethersproject/sha2" "^5.7.0"
-    "@ethersproject/strings" "^5.7.0"
-    "@ethersproject/transactions" "^5.7.0"
-    "@ethersproject/web" "^5.7.0"
-    bech32 "1.1.4"
-    ws "7.4.6"
-
-"@ethersproject/random@5.7.0", "@ethersproject/random@^5.7.0":
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/@ethersproject/random/-/random-5.7.0.tgz#af19dcbc2484aae078bb03656ec05df66253280c"
-  integrity sha512-19WjScqRA8IIeWclFme75VMXSBvi4e6InrUNuaR4s5pTF2qNhcGdCUwdxUVGtDDqC00sDLCO93jPQoDUH4HVmQ==
-  dependencies:
-    "@ethersproject/bytes" "^5.7.0"
-    "@ethersproject/logger" "^5.7.0"
-
-"@ethersproject/rlp@5.7.0", "@ethersproject/rlp@^5.7.0":
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/@ethersproject/rlp/-/rlp-5.7.0.tgz#de39e4d5918b9d74d46de93af80b7685a9c21304"
-  integrity sha512-rBxzX2vK8mVF7b0Tol44t5Tb8gomOHkj5guL+HhzQ1yBh/ydjGnpw6at+X6Iw0Kp3OzzzkcKp8N9r0W4kYSs9w==
-  dependencies:
-    "@ethersproject/bytes" "^5.7.0"
-    "@ethersproject/logger" "^5.7.0"
-
-"@ethersproject/sha2@5.7.0", "@ethersproject/sha2@^5.7.0":
+"@ethersproject/sha2@^5.7.0":
   version "5.7.0"
   resolved "https://registry.yarnpkg.com/@ethersproject/sha2/-/sha2-5.7.0.tgz#9a5f7a7824ef784f7f7680984e593a800480c9fb"
   integrity sha512-gKlH42riwb3KYp0reLsFTokByAKoJdgFCwI+CCiX/k+Jm2mbNs6oOaCjYQSlI1+XBVejwH2KrmCbMAT/GnRDQw==
@@ -2722,19 +2788,7 @@
     "@ethersproject/logger" "^5.7.0"
     hash.js "1.1.7"
 
-"@ethersproject/signing-key@5.7.0", "@ethersproject/signing-key@^5.7.0":
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/@ethersproject/signing-key/-/signing-key-5.7.0.tgz#06b2df39411b00bc57c7c09b01d1e41cf1b16ab3"
-  integrity sha512-MZdy2nL3wO0u7gkB4nA/pEf8lu1TlFswPNmy8AiYkfKTdO6eXBJyUdmHO/ehm/htHw9K/qF8ujnTyUAD+Ry54Q==
-  dependencies:
-    "@ethersproject/bytes" "^5.7.0"
-    "@ethersproject/logger" "^5.7.0"
-    "@ethersproject/properties" "^5.7.0"
-    bn.js "^5.2.1"
-    elliptic "6.5.4"
-    hash.js "1.1.7"
-
-"@ethersproject/solidity@5.7.0":
+"@ethersproject/solidity@^5.7.0":
   version "5.7.0"
   resolved "https://registry.yarnpkg.com/@ethersproject/solidity/-/solidity-5.7.0.tgz#5e9c911d8a2acce2a5ebb48a5e2e0af20b631cb8"
   integrity sha512-HmabMd2Dt/raavyaGukF4XxizWKhKQ24DoLtdNbBmNKUOPqwjsKQSdV9GQtj9CBEea9DlzETlVER1gYeXXBGaA==
@@ -2746,7 +2800,7 @@
     "@ethersproject/sha2" "^5.7.0"
     "@ethersproject/strings" "^5.7.0"
 
-"@ethersproject/strings@5.7.0", "@ethersproject/strings@^5.7.0":
+"@ethersproject/strings@^5.7.0":
   version "5.7.0"
   resolved "https://registry.yarnpkg.com/@ethersproject/strings/-/strings-5.7.0.tgz#54c9d2a7c57ae8f1205c88a9d3a56471e14d5ed2"
   integrity sha512-/9nu+lj0YswRNSH0NXYqrh8775XNyEdUQAuf3f+SmOrnVewcJ5SBNAjF7lpgehKi4abvNNXyf+HX86czCdJ8Mg==
@@ -2755,73 +2809,6 @@
     "@ethersproject/constants" "^5.7.0"
     "@ethersproject/logger" "^5.7.0"
 
-"@ethersproject/transactions@5.7.0", "@ethersproject/transactions@^5.7.0":
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/@ethersproject/transactions/-/transactions-5.7.0.tgz#91318fc24063e057885a6af13fdb703e1f993d3b"
-  integrity sha512-kmcNicCp1lp8qanMTC3RIikGgoJ80ztTyvtsFvCYpSCfkjhD0jZ2LOrnbcuxuToLIUYYf+4XwD1rP+B/erDIhQ==
-  dependencies:
-    "@ethersproject/address" "^5.7.0"
-    "@ethersproject/bignumber" "^5.7.0"
-    "@ethersproject/bytes" "^5.7.0"
-    "@ethersproject/constants" "^5.7.0"
-    "@ethersproject/keccak256" "^5.7.0"
-    "@ethersproject/logger" "^5.7.0"
-    "@ethersproject/properties" "^5.7.0"
-    "@ethersproject/rlp" "^5.7.0"
-    "@ethersproject/signing-key" "^5.7.0"
-
-"@ethersproject/units@5.7.0":
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/@ethersproject/units/-/units-5.7.0.tgz#637b563d7e14f42deeee39245275d477aae1d8b1"
-  integrity sha512-pD3xLMy3SJu9kG5xDGI7+xhTEmGXlEqXU4OfNapmfnxLVY4EMSSRp7j1k7eezutBPH7RBN/7QPnwR7hzNlEFeg==
-  dependencies:
-    "@ethersproject/bignumber" "^5.7.0"
-    "@ethersproject/constants" "^5.7.0"
-    "@ethersproject/logger" "^5.7.0"
-
-"@ethersproject/wallet@5.7.0":
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/@ethersproject/wallet/-/wallet-5.7.0.tgz#4e5d0790d96fe21d61d38fb40324e6c7ef350b2d"
-  integrity sha512-MhmXlJXEJFBFVKrDLB4ZdDzxcBxQ3rLyCkhNqVu3CDYvR97E+8r01UgrI+TI99Le+aYm/in/0vp86guJuM7FCA==
-  dependencies:
-    "@ethersproject/abstract-provider" "^5.7.0"
-    "@ethersproject/abstract-signer" "^5.7.0"
-    "@ethersproject/address" "^5.7.0"
-    "@ethersproject/bignumber" "^5.7.0"
-    "@ethersproject/bytes" "^5.7.0"
-    "@ethersproject/hash" "^5.7.0"
-    "@ethersproject/hdnode" "^5.7.0"
-    "@ethersproject/json-wallets" "^5.7.0"
-    "@ethersproject/keccak256" "^5.7.0"
-    "@ethersproject/logger" "^5.7.0"
-    "@ethersproject/properties" "^5.7.0"
-    "@ethersproject/random" "^5.7.0"
-    "@ethersproject/signing-key" "^5.7.0"
-    "@ethersproject/transactions" "^5.7.0"
-    "@ethersproject/wordlists" "^5.7.0"
-
-"@ethersproject/web@5.7.1", "@ethersproject/web@^5.7.0":
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/@ethersproject/web/-/web-5.7.1.tgz#de1f285b373149bee5928f4eb7bcb87ee5fbb4ae"
-  integrity sha512-Gueu8lSvyjBWL4cYsWsjh6MtMwM0+H4HvqFPZfB6dV8ctbP9zFAO73VG1cMWae0FLPCtz0peKPpZY8/ugJJX2w==
-  dependencies:
-    "@ethersproject/base64" "^5.7.0"
-    "@ethersproject/bytes" "^5.7.0"
-    "@ethersproject/logger" "^5.7.0"
-    "@ethersproject/properties" "^5.7.0"
-    "@ethersproject/strings" "^5.7.0"
-
-"@ethersproject/wordlists@5.7.0", "@ethersproject/wordlists@^5.7.0":
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/@ethersproject/wordlists/-/wordlists-5.7.0.tgz#8fb2c07185d68c3e09eb3bfd6e779ba2774627f5"
-  integrity sha512-S2TFNJNfHWVHNE6cNDjbVlZ6MgE17MIxMbMg2zv3wn+3XSJGosL1m9ZVv3GXCf/2ymSsQ+hRI5IzoMJTG6aoVA==
-  dependencies:
-    "@ethersproject/bytes" "^5.7.0"
-    "@ethersproject/hash" "^5.7.0"
-    "@ethersproject/logger" "^5.7.0"
-    "@ethersproject/properties" "^5.7.0"
-    "@ethersproject/strings" "^5.7.0"
-
 "@fastify/busboy@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@fastify/busboy/-/busboy-2.0.0.tgz#f22824caff3ae506b18207bad4126dbc6ccdb6b8"
@@ -2881,21 +2868,21 @@
     dom-mutator "^0.6.0"
 
 "@grpc/grpc-js@^1.7.1":
-  version "1.9.9"
-  resolved "https://registry.yarnpkg.com/@grpc/grpc-js/-/grpc-js-1.9.9.tgz#ce3a05439b1c957ec64c2ecdc6f1e4f54e8af797"
-  integrity sha512-vQ1qwi/Kiyprt+uhb1+rHMpyk4CVRMTGNUGGPRGS7pLNfWkdCHrGEnT6T3/JyC2VZgoOX/X1KwdoU0WYQAeYcQ==
+  version "1.10.10"
+  resolved "https://registry.yarnpkg.com/@grpc/grpc-js/-/grpc-js-1.10.10.tgz#476d315feeb9dbb0f2d6560008c92688c30f13e0"
+  integrity sha512-HPa/K5NX6ahMoeBv15njAc/sfF4/jmiXLar9UlC2UfHFKZzsCVLc3wbe7+7qua7w9VPh2/L6EBxyAV7/E8Wftg==
   dependencies:
-    "@grpc/proto-loader" "^0.7.8"
-    "@types/node" ">=12.12.47"
+    "@grpc/proto-loader" "^0.7.13"
+    "@js-sdsl/ordered-map" "^4.4.2"
 
-"@grpc/proto-loader@^0.7.8":
-  version "0.7.10"
-  resolved "https://registry.yarnpkg.com/@grpc/proto-loader/-/proto-loader-0.7.10.tgz#6bf26742b1b54d0a473067743da5d3189d06d720"
-  integrity sha512-CAqDfoaQ8ykFd9zqBDn4k6iWT9loLAlc2ETmDFS9JCD70gDcnA4L3AFEo2iV7KyAtAAHFW9ftq1Fz+Vsgq80RQ==
+"@grpc/proto-loader@^0.7.13":
+  version "0.7.13"
+  resolved "https://registry.yarnpkg.com/@grpc/proto-loader/-/proto-loader-0.7.13.tgz#f6a44b2b7c9f7b609f5748c6eac2d420e37670cf"
+  integrity sha512-AiXO/bfe9bmxBjxxtYxFAXGZvMaN5s8kO+jBHAJCON8rJoB5YS/D6X7ZNc6XQkuHNmyl4CYaMI1fJ/Gn27RGGw==
   dependencies:
     lodash.camelcase "^4.3.0"
     long "^5.0.0"
-    protobufjs "^7.2.4"
+    protobufjs "^7.2.5"
     yargs "^17.7.2"
 
 "@hapi/b64@5.x.x":
@@ -2969,30 +2956,420 @@
     "@hapi/hoek" "^9.0.0"
     "@hapi/topo" "^5.0.0"
 
-"@humanwhocodes/config-array@^0.11.8":
-  version "0.11.8"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"
-  integrity sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==
+"@helia/bitswap@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@helia/bitswap/-/bitswap-2.0.1.tgz#a7315dbc8887310504caa899ba2c87e16f4ec819"
+  integrity sha512-9bwjwdgW3LfraDfIlfJ4g1WrO96IKW3hjrc63jXxlKHU8JPwMdd5a//XoNIQfQ5vx6DV0w+w2AM1aHHt+nHBGA==
+  dependencies:
+    "@helia/interface" "^5.0.0"
+    "@helia/utils" "^1.0.1"
+    "@libp2p/interface" "^2.0.0"
+    "@libp2p/logger" "^5.0.0"
+    "@libp2p/peer-collections" "^6.0.0"
+    "@libp2p/utils" "^6.0.0"
+    "@multiformats/multiaddr" "^12.1.14"
+    any-signal "^4.1.1"
+    interface-blockstore "^5.2.9"
+    interface-store "^6.0.0"
+    it-drain "^3.0.5"
+    it-length-prefixed "^9.0.0"
+    it-length-prefixed-stream "^1.1.6"
+    it-map "^3.0.5"
+    it-pipe "^3.0.1"
+    it-take "^3.0.1"
+    multiformats "^13.0.1"
+    p-defer "^4.0.0"
+    progress-events "^1.0.0"
+    protons-runtime "^5.0.0"
+    race-event "^1.2.0"
+    uint8-varint "^2.0.3"
+    uint8arraylist "^2.4.3"
+    uint8arrays "^5.0.1"
+
+"@helia/block-brokers@^4.0.0", "@helia/block-brokers@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@helia/block-brokers/-/block-brokers-4.0.1.tgz#7d0efd308c5437c92f1facbed0dbc6725c1ab2e4"
+  integrity sha512-djYp4bmC15SBP1/ra9SrOAATr432hDcA2hnHWewkz1l84hCi+gSol7AcdAfW233pZ2ivZcI2Jc1Nyf7Vg6uFeg==
+  dependencies:
+    "@helia/bitswap" "^2.0.1"
+    "@helia/interface" "^5.0.0"
+    "@helia/utils" "^1.0.1"
+    "@libp2p/interface" "^2.0.0"
+    "@libp2p/utils" "^6.0.0"
+    "@multiformats/multiaddr" "^12.2.1"
+    "@multiformats/multiaddr-matcher" "^1.2.0"
+    "@multiformats/multiaddr-to-uri" "^10.0.1"
+    interface-blockstore "^5.2.10"
+    interface-store "^6.0.0"
+    multiformats "^13.1.0"
+    progress-events "^1.0.0"
+
+"@helia/car@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@helia/car/-/car-4.0.0.tgz#e3532bc90fa7e3ed8889cf30d50c00853a1315c1"
+  integrity sha512-QcGF2n1NBqlRbibEa+JOCU62y7RildJHrWKayM2OS81/GbOQvw4DxLd8Nyk/N9eubJjzejuc3Xor8xH1a0tQcw==
+  dependencies:
+    "@helia/interface" "^5.0.0"
+    "@ipld/car" "^5.3.0"
+    "@libp2p/interface" "^2.0.0"
+    "@libp2p/utils" "^6.0.0"
+    interface-blockstore "^5.2.10"
+    it-drain "^3.0.5"
+    it-map "^3.0.5"
+    multiformats "^13.1.0"
+    p-defer "^4.0.0"
+    p-queue "^8.0.1"
+    progress-events "^1.0.0"
+
+"@helia/delegated-routing-v1-http-api-client@^4.1.0":
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/@helia/delegated-routing-v1-http-api-client/-/delegated-routing-v1-http-api-client-4.1.2.tgz#56ae6ac86b51ab2a48a6bb8de072b7ce2da85ede"
+  integrity sha512-EPrsgPLiDsZY0HjVL8ifj8j8Os/PD7Fo4GnJZZ3zQPlqclzIiKELDEsaKg0G1rIuVi2n37tLuX85Wiia1YTMoQ==
+  dependencies:
+    "@libp2p/interface" "^2.2.0"
+    "@libp2p/logger" "^5.0.1"
+    "@libp2p/peer-id" "^5.0.1"
+    "@multiformats/multiaddr" "^12.3.1"
+    any-signal "^4.1.1"
+    browser-readablestream-to-it "^2.0.7"
+    ipns "^10.0.0"
+    it-first "^3.0.6"
+    it-map "^3.1.1"
+    it-ndjson "^1.0.7"
+    multiformats "^13.3.0"
+    p-defer "^4.0.1"
+    p-queue "^8.0.1"
+    uint8arrays "^5.1.0"
+
+"@helia/http@^2.0.0":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@helia/http/-/http-2.0.1.tgz#8f90450875063c3f3ee572e01439ae1a98b4eafe"
+  integrity sha512-8fqyD1Or11Ts1k3dwaz5jwRGGgMLP1VQulOUBNqDKWmQOgJm2Bf49p+EDLU1p0HjulIyAIJPSURIpUtO1V0rdQ==
   dependencies:
-    "@humanwhocodes/object-schema" "^1.2.1"
-    debug "^4.1.1"
-    minimatch "^3.0.5"
+    "@helia/block-brokers" "^4.0.1"
+    "@helia/interface" "^5.0.0"
+    "@helia/routers" "^2.1.0"
+    "@helia/utils" "^1.0.1"
+    blockstore-core "^5.0.0"
+    datastore-core "^10.0.0"
+
+"@helia/interface@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@helia/interface/-/interface-5.0.0.tgz#1f2ca0cd9655436f004fc094954adec01a46a1b1"
+  integrity sha512-B95cP8RBl7cqSu1VELeRWPUsTNxu2bJ2Y/ihsdYfUCcxHKUUQdDDLTHQzhZe9iC9TYADkfkjIM7gqgmhqYtY6A==
+  dependencies:
+    "@libp2p/interface" "^2.0.0"
+    "@multiformats/dns" "^1.0.1"
+    interface-blockstore "^5.2.10"
+    interface-datastore "^8.2.11"
+    interface-store "^6.0.0"
+    multiformats "^13.1.0"
+    progress-events "^1.0.0"
+
+"@helia/ipns@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@helia/ipns/-/ipns-8.0.0.tgz#696c59acb9f43f7237f325d23338f5f435e8a69c"
+  integrity sha512-2cY+GzhRCyuoh59wuViNAGV6n7VIIFiWOW1m8g2mUf7QJLxG/kaNWvk7UHsR914xaqI64Mhlcmdr6Fbd33rUKQ==
+  dependencies:
+    "@helia/interface" "^5.0.0"
+    "@libp2p/interface" "^2.0.0"
+    "@libp2p/kad-dht" "^14.0.0"
+    "@libp2p/logger" "^5.0.0"
+    "@libp2p/peer-id" "^5.0.0"
+    "@multiformats/dns" "^1.0.1"
+    interface-datastore "^8.2.11"
+    ipns "^10.0.0"
+    multiformats "^13.1.0"
+    progress-events "^1.0.0"
+    uint8arrays "^5.0.2"
+
+"@helia/routers@^2.0.0", "@helia/routers@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@helia/routers/-/routers-2.1.0.tgz#2478b9e6c4c5fcf1897b9455176499ed97ebf47a"
+  integrity sha512-JOvM+EfVd9c999gSz4tHLJWpwexU1kc82ujwoFRaRvKxT5pD77t9h0gwnfnsGbe9Br6iUPFXquNC+g0p8Xll3g==
+  dependencies:
+    "@helia/delegated-routing-v1-http-api-client" "^4.1.0"
+    "@helia/interface" "^5.0.0"
+    "@libp2p/interface" "^2.0.0"
+    "@libp2p/peer-id" "^5.0.0"
+    "@multiformats/uri-to-multiaddr" "^8.0.0"
+    ipns "^10.0.0"
+    it-first "^3.0.4"
+    it-map "^3.0.5"
+    multiformats "^13.1.0"
+    uint8arrays "^5.0.2"
+
+"@helia/unixfs@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@helia/unixfs/-/unixfs-4.0.0.tgz#2643836bf71d22b7cabce49c21bc39f12d5e274d"
+  integrity sha512-e6tiXB7d3VL5suYm4e2cNEt+R8HLRmIkZkfOhB+WMcsCA7c3wtFNuN1ASKBQvCopp6+TdTfYafvCz40QnWgP+Q==
+  dependencies:
+    "@helia/interface" "^5.0.0"
+    "@ipld/dag-pb" "^4.1.0"
+    "@libp2p/interface" "^2.0.0"
+    "@libp2p/logger" "^5.0.0"
+    "@multiformats/murmur3" "^2.1.8"
+    hamt-sharding "^3.0.6"
+    interface-blockstore "^5.2.10"
+    ipfs-unixfs "^11.1.3"
+    ipfs-unixfs-exporter "^13.5.0"
+    ipfs-unixfs-importer "^15.2.4"
+    it-all "^3.0.4"
+    it-glob "^3.0.0"
+    it-last "^3.0.4"
+    it-pipe "^3.0.1"
+    merge-options "^3.0.4"
+    multiformats "^13.1.0"
+    progress-events "^1.0.0"
+    sparse-array "^1.3.2"
+    uint8arrays "^5.0.2"
+
+"@helia/utils@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@helia/utils/-/utils-1.0.1.tgz#2c27c79ac9df76f44b470773a1358b304696b7eb"
+  integrity sha512-S1qLDiHNdBxQxtgonqPQHl8Rn7gs4HEQSrVF+ok//T/ZQPItNGnhKudV8qWhoOdpzCDaObx2ryqip+K9FK8VCQ==
+  dependencies:
+    "@helia/interface" "^5.0.0"
+    "@ipld/dag-cbor" "^9.2.0"
+    "@ipld/dag-json" "^10.2.0"
+    "@ipld/dag-pb" "^4.1.0"
+    "@libp2p/interface" "^2.0.0"
+    "@libp2p/logger" "^5.0.0"
+    "@libp2p/utils" "^6.0.0"
+    "@multiformats/dns" "^1.0.1"
+    any-signal "^4.1.1"
+    blockstore-core "^5.0.0"
+    cborg "^4.0.9"
+    interface-blockstore "^5.2.10"
+    interface-datastore "^8.2.11"
+    interface-store "^6.0.0"
+    it-drain "^3.0.5"
+    it-filter "^3.0.4"
+    it-foreach "^2.0.6"
+    it-merge "^3.0.3"
+    mortice "^3.0.4"
+    multiformats "^13.1.0"
+    p-defer "^4.0.1"
+    progress-events "^1.0.0"
+    uint8arrays "^5.0.2"
+
+"@helia/verified-fetch@2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@helia/verified-fetch/-/verified-fetch-2.0.1.tgz#622846b6f0025c301e5df2103c73f312e86c3d21"
+  integrity sha512-co9CR6vbFWFM9yQ3OB+r0t9SW1bxdCc8uB8myV+vIn1ch0BtzXA40FRHOOyjgDheITFaPttP8/3hI6MH2VrdvA==
+  dependencies:
+    "@helia/block-brokers" "^4.0.0"
+    "@helia/car" "^4.0.0"
+    "@helia/http" "^2.0.0"
+    "@helia/interface" "^5.0.0"
+    "@helia/ipns" "^8.0.0"
+    "@helia/routers" "^2.0.0"
+    "@helia/unixfs" "^4.0.0"
+    "@ipld/dag-cbor" "^9.2.1"
+    "@ipld/dag-json" "^10.2.2"
+    "@ipld/dag-pb" "^4.1.2"
+    "@libp2p/interface" "^2.1.3"
+    "@libp2p/kad-dht" "^14.0.1"
+    "@libp2p/peer-id" "^5.0.5"
+    "@multiformats/dns" "^1.0.6"
+    cborg "^4.2.4"
+    hashlru "^2.3.0"
+    interface-blockstore "^5.3.1"
+    interface-datastore "^8.3.1"
+    ipfs-unixfs-exporter "^13.6.1"
+    it-map "^3.1.1"
+    it-pipe "^3.0.1"
+    it-tar "^6.0.5"
+    it-to-browser-readablestream "^2.0.9"
+    lru-cache "^10.2.2"
+    multiformats "^13.3.0"
+    progress-events "^1.0.1"
+    uint8arrays "^5.1.0"
+
+"@humanfs/core@^0.19.1":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@humanfs/core/-/core-0.19.1.tgz#17c55ca7d426733fe3c561906b8173c336b40a77"
+  integrity sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==
+
+"@humanfs/node@^0.16.6":
+  version "0.16.6"
+  resolved "https://registry.yarnpkg.com/@humanfs/node/-/node-0.16.6.tgz#ee2a10eaabd1131987bf0488fd9b820174cd765e"
+  integrity sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==
+  dependencies:
+    "@humanfs/core" "^0.19.1"
+    "@humanwhocodes/retry" "^0.3.0"
 
 "@humanwhocodes/module-importer@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
   integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
-"@humanwhocodes/object-schema@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
-  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+"@humanwhocodes/retry@^0.3.0":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/retry/-/retry-0.3.1.tgz#c72a5c76a9fbaf3488e231b13dc52c0da7bab42a"
+  integrity sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==
+
+"@humanwhocodes/retry@^0.4.0":
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/retry/-/retry-0.4.1.tgz#9a96ce501bc62df46c4031fbd970e3cc6b10f07b"
+  integrity sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==
+
+"@hypelab/sdk-react@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@hypelab/sdk-react/-/sdk-react-1.0.0.tgz#399058576422a7a715edfd6c55b946950a26ba39"
+  integrity sha512-d8eJOqgocXvfMae/JbFXZdK/Q79oYYXScto1wJ7uTDHxrPZTIpgVNhuJM7UKmVJAKRSHnniRcZCjh2+pZCW5ww==
+
+"@img/sharp-darwin-arm64@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz#ef5b5a07862805f1e8145a377c8ba6e98813ca08"
+  integrity sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==
+  optionalDependencies:
+    "@img/sharp-libvips-darwin-arm64" "1.0.4"
+
+"@img/sharp-darwin-x64@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz#e03d3451cd9e664faa72948cc70a403ea4063d61"
+  integrity sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==
+  optionalDependencies:
+    "@img/sharp-libvips-darwin-x64" "1.0.4"
+
+"@img/sharp-libvips-darwin-arm64@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz#447c5026700c01a993c7804eb8af5f6e9868c07f"
+  integrity sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==
+
+"@img/sharp-libvips-darwin-x64@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz#e0456f8f7c623f9dbfbdc77383caa72281d86062"
+  integrity sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==
+
+"@img/sharp-libvips-linux-arm64@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz#979b1c66c9a91f7ff2893556ef267f90ebe51704"
+  integrity sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==
+
+"@img/sharp-libvips-linux-arm@1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz#99f922d4e15216ec205dcb6891b721bfd2884197"
+  integrity sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==
+
+"@img/sharp-libvips-linux-s390x@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz#f8a5eb1f374a082f72b3f45e2fb25b8118a8a5ce"
+  integrity sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==
+
+"@img/sharp-libvips-linux-x64@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz#d4c4619cdd157774906e15770ee119931c7ef5e0"
+  integrity sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==
+
+"@img/sharp-libvips-linuxmusl-arm64@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz#166778da0f48dd2bded1fa3033cee6b588f0d5d5"
+  integrity sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==
+
+"@img/sharp-libvips-linuxmusl-x64@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz#93794e4d7720b077fcad3e02982f2f1c246751ff"
+  integrity sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==
+
+"@img/sharp-linux-arm64@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz#edb0697e7a8279c9fc829a60fc35644c4839bb22"
+  integrity sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-arm64" "1.0.4"
+
+"@img/sharp-linux-arm@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz#422c1a352e7b5832842577dc51602bcd5b6f5eff"
+  integrity sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-arm" "1.0.5"
+
+"@img/sharp-linux-s390x@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz#f5c077926b48e97e4a04d004dfaf175972059667"
+  integrity sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-s390x" "1.0.4"
+
+"@img/sharp-linux-x64@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz#d806e0afd71ae6775cc87f0da8f2d03a7c2209cb"
+  integrity sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-x64" "1.0.4"
+
+"@img/sharp-linuxmusl-arm64@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz#252975b915894fb315af5deea174651e208d3d6b"
+  integrity sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==
+  optionalDependencies:
+    "@img/sharp-libvips-linuxmusl-arm64" "1.0.4"
+
+"@img/sharp-linuxmusl-x64@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz#3f4609ac5d8ef8ec7dadee80b560961a60fd4f48"
+  integrity sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==
+  optionalDependencies:
+    "@img/sharp-libvips-linuxmusl-x64" "1.0.4"
+
+"@img/sharp-wasm32@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz#6f44f3283069d935bb5ca5813153572f3e6f61a1"
+  integrity sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==
+  dependencies:
+    "@emnapi/runtime" "^1.2.0"
+
+"@img/sharp-win32-ia32@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz#1a0c839a40c5351e9885628c85f2e5dfd02b52a9"
+  integrity sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==
+
+"@img/sharp-win32-x64@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz#56f00962ff0c4e0eb93d34a047d29fa995e3e342"
+  integrity sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==
 
 "@ioredis/commands@^1.1.1":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@ioredis/commands/-/commands-1.2.0.tgz#6d61b3097470af1fdbbe622795b8921d42018e11"
   integrity sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg==
 
+"@ipld/car@^5.3.0":
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/@ipld/car/-/car-5.3.3.tgz#8e37ccd40af4cc9070399f5874920a0d57985497"
+  integrity sha512-4vgV5Ml4HCJ2iTx7vYhu0ui+Xxo1HQTtVeYgD+JKd5Wij8TlOFZnxOSickqpLcuf1fdGEStgqVItx15UWfzDYA==
+  dependencies:
+    "@ipld/dag-cbor" "^9.0.7"
+    cborg "^4.0.5"
+    multiformats "^13.0.0"
+    varint "^6.0.0"
+
+"@ipld/dag-cbor@^9.0.7", "@ipld/dag-cbor@^9.2.0", "@ipld/dag-cbor@^9.2.1":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@ipld/dag-cbor/-/dag-cbor-9.2.2.tgz#e6f5f5bd1e4f290f2285b51fc969ef806484603a"
+  integrity sha512-uIEOuruCqKTP50OBWwgz4Js2+LhiBQaxc57cnP71f45b1mHEAo1OCR1Zn/TbvSW/mV1x+JqhacIktkKyaYqhCw==
+  dependencies:
+    cborg "^4.0.0"
+    multiformats "^13.1.0"
+
+"@ipld/dag-json@^10.2.0", "@ipld/dag-json@^10.2.2":
+  version "10.2.3"
+  resolved "https://registry.yarnpkg.com/@ipld/dag-json/-/dag-json-10.2.3.tgz#bb9de2e869f1c523104c52adc89e1e8bb0db7253"
+  integrity sha512-itacv1j1hvYgLox2B42Msn70QLzcr0MEo5yGIENuw2SM/lQzq9bmBiMky+kDsIrsqqblKTXcHBZnnmK7D4a6ZQ==
+  dependencies:
+    cborg "^4.0.0"
+    multiformats "^13.1.0"
+
+"@ipld/dag-pb@^4.1.0", "@ipld/dag-pb@^4.1.2":
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/@ipld/dag-pb/-/dag-pb-4.1.3.tgz#b572d7978fa548a3a9219f566a80884189261858"
+  integrity sha512-ueULCaaSCcD+dQga6nKiRr+RSeVgdiYiEPKVUu5iQMNYDN+9osd0KpR3UDd9uQQ+6RWuv9L34SchfEwj7YIbOA==
+  dependencies:
+    multiformats "^13.1.0"
+
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
@@ -3230,25 +3607,44 @@
     "@jridgewell/sourcemap-codec" "^1.4.10"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36"
+  integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
 "@jridgewell/resolve-uri@3.1.0", "@jridgewell/resolve-uri@^3.0.3":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
   integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
 
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
 "@jridgewell/set-array@^1.0.0", "@jridgewell/set-array@^1.0.1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
   integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
 
+"@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
+
 "@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.10":
   version "1.4.14"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 
-"@jridgewell/sourcemap-codec@^1.4.15":
-  version "1.4.15"
-  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
-  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+"@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
 
 "@jridgewell/trace-mapping@0.3.9":
   version "0.3.9"
@@ -3266,6 +3662,14 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+  version "0.3.25"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
 "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.16"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.16.tgz#a7982f16c18cae02be36274365433e5b49d7b23f"
@@ -3274,6 +3678,156 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@js-sdsl/ordered-map@^4.4.2":
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/@js-sdsl/ordered-map/-/ordered-map-4.4.2.tgz#9299f82874bab9e4c7f9c48d865becbfe8d6907c"
+  integrity sha512-iUKgm52T8HOE/makSxjqoWhe95ZJA1/G1sYsGev2JDKUSS14KAgg1LHb+Ba+IPow0xflbnSkOsZcO08C7w1gYw==
+
+"@leichtgewicht/ip-codec@^2.0.1":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz#4fc56c15c580b9adb7dc3c333a134e540b44bfb1"
+  integrity sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==
+
+"@libp2p/crypto@^5.0.0", "@libp2p/crypto@^5.0.6":
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/@libp2p/crypto/-/crypto-5.0.6.tgz#3141bec0e59eea51c729e7bcc6f06d09118f5e6b"
+  integrity sha512-5mD/riNxUuSOerk3aPXUUMN96lwZsrU33lp97ySfffloh2WhLZcjVJszibBgIP7DP5nqmSOWY9++rqrBuYHvnQ==
+  dependencies:
+    "@libp2p/interface" "^2.2.0"
+    "@noble/curves" "^1.4.0"
+    "@noble/hashes" "^1.4.0"
+    asn1js "^3.0.5"
+    multiformats "^13.1.0"
+    protons-runtime "^5.4.0"
+    uint8arraylist "^2.4.8"
+    uint8arrays "^5.1.0"
+
+"@libp2p/interface-internal@^2.0.10":
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/@libp2p/interface-internal/-/interface-internal-2.0.10.tgz#d91854304324d467ab10e785a735a543bf822efc"
+  integrity sha512-LRnn6w5rtvMQlEukihDI5NhSZXZj7ITFT1Hbo3Dn3HGo1oxZe7oWh7ERc5LwZw835QHGzFKZYerBFKdqxoWsFQ==
+  dependencies:
+    "@libp2p/interface" "^2.2.0"
+    "@libp2p/peer-collections" "^6.0.10"
+    "@multiformats/multiaddr" "^12.2.3"
+    progress-events "^1.0.0"
+    uint8arraylist "^2.4.8"
+
+"@libp2p/interface@^2.0.0", "@libp2p/interface@^2.1.3", "@libp2p/interface@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@libp2p/interface/-/interface-2.2.0.tgz#8718c29a0cf8c82b00d2ff9b140bcec9185578a2"
+  integrity sha512-Pn3P5ixDggBjDyuULT0GvwdgD3JA426OqZ0e521mI7ysS+/M9Z9fp4Qcy8JrkJ45bLmIi9cgrNrefuU/Zu+bAQ==
+  dependencies:
+    "@multiformats/multiaddr" "^12.2.3"
+    it-pushable "^3.2.3"
+    it-stream-types "^2.0.1"
+    multiformats "^13.1.0"
+    progress-events "^1.0.0"
+    uint8arraylist "^2.4.8"
+
+"@libp2p/kad-dht@^14.0.0", "@libp2p/kad-dht@^14.0.1":
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/@libp2p/kad-dht/-/kad-dht-14.1.0.tgz#5bb9e63d5f63e9a45c980ef67d099ef05b9bc9ab"
+  integrity sha512-baP0nOKobK93SHVxWmLxsqMQFRPZsa8n0ZlHdqhPfhlp1KT9fcmPZNLDTqYVytQvq/GSkn2i/eM7PyLsP8RKyg==
+  dependencies:
+    "@libp2p/crypto" "^5.0.6"
+    "@libp2p/interface" "^2.2.0"
+    "@libp2p/interface-internal" "^2.0.10"
+    "@libp2p/peer-collections" "^6.0.10"
+    "@libp2p/peer-id" "^5.0.7"
+    "@libp2p/record" "^4.0.4"
+    "@libp2p/utils" "^6.1.3"
+    "@multiformats/multiaddr" "^12.2.3"
+    any-signal "^4.1.1"
+    interface-datastore "^8.3.0"
+    it-drain "^3.0.7"
+    it-length "^3.0.6"
+    it-length-prefixed "^9.0.4"
+    it-map "^3.1.0"
+    it-merge "^3.0.5"
+    it-parallel "^3.0.7"
+    it-pipe "^3.0.1"
+    it-protobuf-stream "^1.1.3"
+    it-take "^3.0.5"
+    mortice "^3.0.4"
+    multiformats "^13.1.0"
+    p-defer "^4.0.1"
+    p-event "^6.0.1"
+    progress-events "^1.0.0"
+    protons-runtime "^5.4.0"
+    race-signal "^1.0.2"
+    uint8-varint "^2.0.4"
+    uint8arraylist "^2.4.8"
+    uint8arrays "^5.1.0"
+
+"@libp2p/logger@^5.0.0", "@libp2p/logger@^5.0.1", "@libp2p/logger@^5.1.3":
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/@libp2p/logger/-/logger-5.1.3.tgz#fca69a5de0b3a80cfc1ec039bb76f30e9e26eab7"
+  integrity sha512-NUVWEWGbXlBDgDE5ntdm51+ZICmaKYI8mor6KrlPeB1WXDyIFxRWIBw6uzt+HgprQJWzLTojeUEGv6OPsj95Dg==
+  dependencies:
+    "@libp2p/interface" "^2.2.0"
+    "@multiformats/multiaddr" "^12.2.3"
+    interface-datastore "^8.3.0"
+    multiformats "^13.1.0"
+    weald "^1.0.2"
+
+"@libp2p/peer-collections@^6.0.0", "@libp2p/peer-collections@^6.0.10":
+  version "6.0.10"
+  resolved "https://registry.yarnpkg.com/@libp2p/peer-collections/-/peer-collections-6.0.10.tgz#93f42d21c0e273d3270f7df49dad2fe566e4fd5d"
+  integrity sha512-KQQiBZ2Y3+wvxjfIWbUCL0suCRVn5ylLuQ2r+OGXLA7LtgRw1RLQnUHHFVoY+CE9pvfIfamwTFlkZhWtvi271w==
+  dependencies:
+    "@libp2p/interface" "^2.2.0"
+    "@libp2p/peer-id" "^5.0.7"
+    "@libp2p/utils" "^6.1.3"
+    multiformats "^13.2.2"
+
+"@libp2p/peer-id@^5.0.0", "@libp2p/peer-id@^5.0.1", "@libp2p/peer-id@^5.0.5", "@libp2p/peer-id@^5.0.7":
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/@libp2p/peer-id/-/peer-id-5.0.7.tgz#bcde5224ec3bc97b826efadebd52489f518bb326"
+  integrity sha512-ecF0Mu4Nxy8IHUMBYVNIEihjUlx52DM+X3CIfBItvGqvnhrUSkJJjkska2dJX3yf2J8wufzCT3jCg4NZWmndYg==
+  dependencies:
+    "@libp2p/crypto" "^5.0.6"
+    "@libp2p/interface" "^2.2.0"
+    multiformats "^13.1.0"
+    uint8arrays "^5.1.0"
+
+"@libp2p/record@^4.0.4":
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/@libp2p/record/-/record-4.0.4.tgz#9300e5a10ebc543f1d8df0b95a7181d633f039f1"
+  integrity sha512-wEEeHXGNIcc8HtGbgGMuSHbboUWMxKG7OxALFwkE+KACgfRJZTESOp6XIdZnyC0r9lfEFsjF01pFKBTzoBmWEQ==
+  dependencies:
+    protons-runtime "^5.4.0"
+    uint8arraylist "^2.4.8"
+    uint8arrays "^5.1.0"
+
+"@libp2p/utils@^6.0.0", "@libp2p/utils@^6.1.3":
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/@libp2p/utils/-/utils-6.1.3.tgz#cd9c56d02ad7284c4ba58f1902cca2566d789bf7"
+  integrity sha512-n1D6phOXGkqE3tuvmZwm5gaHKcGanlKwCWEBlrZqx9SSCyd5U5C58BcyQ8YH5/nb4kYMI7HyjomfQAVs2S2R9Q==
+  dependencies:
+    "@chainsafe/is-ip" "^2.0.2"
+    "@libp2p/crypto" "^5.0.6"
+    "@libp2p/interface" "^2.2.0"
+    "@libp2p/logger" "^5.1.3"
+    "@multiformats/multiaddr" "^12.2.3"
+    "@sindresorhus/fnv1a" "^3.1.0"
+    "@types/murmurhash3js-revisited" "^3.0.3"
+    any-signal "^4.1.1"
+    delay "^6.0.0"
+    get-iterator "^2.0.1"
+    is-loopback-addr "^2.0.2"
+    it-foreach "^2.1.1"
+    it-pipe "^3.0.1"
+    it-pushable "^3.2.3"
+    it-stream-types "^2.0.1"
+    murmurhash3js-revisited "^3.0.0"
+    netmask "^2.0.2"
+    p-defer "^4.0.1"
+    race-event "^1.3.0"
+    race-signal "^1.0.2"
+    uint8arraylist "^2.4.8"
+    uint8arrays "^5.1.0"
+
 "@lit-labs/ssr-dom-shim@^1.0.0", "@lit-labs/ssr-dom-shim@^1.1.0":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz#64df34e2f12e68e78ac57e571d25ec07fa460ca9"
@@ -3303,6 +3857,43 @@
   dependencies:
     "@lit-labs/ssr-dom-shim" "^1.1.2"
 
+"@metamask/eth-json-rpc-provider@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@metamask/eth-json-rpc-provider/-/eth-json-rpc-provider-1.0.1.tgz#3fd5316c767847f4ca107518b611b15396a5a32c"
+  integrity sha512-whiUMPlAOrVGmX8aKYVPvlKyG4CpQXiNNyt74vE1xb5sPvmx5oA7B/kOi/JdBvhGQq97U1/AVdXEdk2zkP8qyA==
+  dependencies:
+    "@metamask/json-rpc-engine" "^7.0.0"
+    "@metamask/safe-event-emitter" "^3.0.0"
+    "@metamask/utils" "^5.0.1"
+
+"@metamask/json-rpc-engine@^7.0.0":
+  version "7.3.3"
+  resolved "https://registry.yarnpkg.com/@metamask/json-rpc-engine/-/json-rpc-engine-7.3.3.tgz#f2b30a2164558014bfcca45db10f5af291d989af"
+  integrity sha512-dwZPq8wx9yV3IX2caLi9q9xZBw2XeIoYqdyihDDDpuHVCEiqadJLwqM3zy+uwf6F1QYQ65A8aOMQg1Uw7LMLNg==
+  dependencies:
+    "@metamask/rpc-errors" "^6.2.1"
+    "@metamask/safe-event-emitter" "^3.0.0"
+    "@metamask/utils" "^8.3.0"
+
+"@metamask/json-rpc-engine@^8.0.1", "@metamask/json-rpc-engine@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@metamask/json-rpc-engine/-/json-rpc-engine-8.0.2.tgz#29510a871a8edef892f838ee854db18de0bf0d14"
+  integrity sha512-IoQPmql8q7ABLruW7i4EYVHWUbF74yrp63bRuXV5Zf9BQwcn5H9Ww1eLtROYvI1bUXwOiHZ6qT5CWTrDc/t/AA==
+  dependencies:
+    "@metamask/rpc-errors" "^6.2.1"
+    "@metamask/safe-event-emitter" "^3.0.0"
+    "@metamask/utils" "^8.3.0"
+
+"@metamask/json-rpc-middleware-stream@^7.0.1":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@metamask/json-rpc-middleware-stream/-/json-rpc-middleware-stream-7.0.2.tgz#2e8b2cbc38968e3c6239a9144c35bbb08a8fb57d"
+  integrity sha512-yUdzsJK04Ev98Ck4D7lmRNQ8FPioXYhEUZOMS01LXW8qTvPGiRVXmVltj2p4wrLkh0vW7u6nv0mNl5xzC5Qmfg==
+  dependencies:
+    "@metamask/json-rpc-engine" "^8.0.2"
+    "@metamask/safe-event-emitter" "^3.0.0"
+    "@metamask/utils" "^8.3.0"
+    readable-stream "^3.6.2"
+
 "@metamask/object-multiplex@^1.1.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@metamask/object-multiplex/-/object-multiplex-1.2.0.tgz#38fc15c142f61939391e1b9a8eed679696c7e4f4"
@@ -3312,6 +3903,21 @@
     once "^1.4.0"
     readable-stream "^2.3.3"
 
+"@metamask/object-multiplex@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@metamask/object-multiplex/-/object-multiplex-2.0.0.tgz#aa6e4aa7b4e2f457ea4bb51cd7281d931e0aa35d"
+  integrity sha512-+ItrieVZie3j2LfYE0QkdW3dsEMfMEp419IGx1zyeLqjRZ14iQUPRO0H6CGgfAAoC0x6k2PfCAGRwJUA9BMrqA==
+  dependencies:
+    once "^1.4.0"
+    readable-stream "^3.6.2"
+
+"@metamask/onboarding@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@metamask/onboarding/-/onboarding-1.0.1.tgz#14a36e1e175e2f69f09598e2008ab6dc1b3297e6"
+  integrity sha512-FqHhAsCI+Vacx2qa5mAFcWNSrTcVGMNjzxVgaX8ECSny/BJ9/vgXP9V7WF/8vb9DltPeQkxr+Fnfmm6GHfmdTQ==
+  dependencies:
+    bowser "^2.9.0"
+
 "@metamask/post-message-stream@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@metamask/post-message-stream/-/post-message-stream-7.0.0.tgz#b7698909ec54923b6a6990b8d46cc15c2810d840"
@@ -3320,6 +3926,24 @@
     "@metamask/utils" "^5.0.0"
     readable-stream "3.6.2"
 
+"@metamask/providers@16.1.0":
+  version "16.1.0"
+  resolved "https://registry.yarnpkg.com/@metamask/providers/-/providers-16.1.0.tgz#7da593d17c541580fa3beab8d9d8a9b9ce19ea07"
+  integrity sha512-znVCvux30+3SaUwcUGaSf+pUckzT5ukPRpcBmy+muBLC0yaWnBcvDqGfcsw6CBIenUdFrVoAFa8B6jsuCY/a+g==
+  dependencies:
+    "@metamask/json-rpc-engine" "^8.0.1"
+    "@metamask/json-rpc-middleware-stream" "^7.0.1"
+    "@metamask/object-multiplex" "^2.0.0"
+    "@metamask/rpc-errors" "^6.2.1"
+    "@metamask/safe-event-emitter" "^3.1.1"
+    "@metamask/utils" "^8.3.0"
+    detect-browser "^5.2.0"
+    extension-port-stream "^3.0.0"
+    fast-deep-equal "^3.1.3"
+    is-stream "^2.0.0"
+    readable-stream "^3.6.2"
+    webextension-polyfill "^0.10.0"
+
 "@metamask/providers@^10.2.1":
   version "10.2.1"
   resolved "https://registry.yarnpkg.com/@metamask/providers/-/providers-10.2.1.tgz#61304940adeccc7421dcda30ffd1d834273cc77b"
@@ -3338,22 +3962,73 @@
     pump "^3.0.0"
     webextension-polyfill-ts "^0.25.0"
 
-"@metamask/safe-event-emitter@2.0.0", "@metamask/safe-event-emitter@^2.0.0":
+"@metamask/rpc-errors@^6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@metamask/rpc-errors/-/rpc-errors-6.2.1.tgz#f5daf429ededa7cb83069dc621bd5738fe2a1d80"
+  integrity sha512-VTgWkjWLzb0nupkFl1duQi9Mk8TGT9rsdnQg6DeRrYEFxtFOh0IF8nAwxM/4GWqDl6uIB06lqUBgUrAVWl62Bw==
+  dependencies:
+    "@metamask/utils" "^8.3.0"
+    fast-safe-stringify "^2.0.6"
+
+"@metamask/safe-event-emitter@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@metamask/safe-event-emitter/-/safe-event-emitter-2.0.0.tgz#af577b477c683fad17c619a78208cede06f9605c"
   integrity sha512-/kSXhY692qiV1MXu6EeOZvg5nECLclxNXcKCxJ3cXQgYuRymRHpdx/t7JXfsK+JLjwA1e1c1/SBrlQYpusC29Q==
 
-"@metamask/utils@^3.0.1":
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/@metamask/utils/-/utils-3.6.0.tgz#b218b969a05ca7a8093b5d1670f6625061de707d"
-  integrity sha512-9cIRrfkWvHblSiNDVXsjivqa9Ak0RYo/1H6tqTqTbAx+oBK2Sva0lWDHxGchOqA7bySGUJKAWSNJvH6gdHZ0gQ==
+"@metamask/safe-event-emitter@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@metamask/safe-event-emitter/-/safe-event-emitter-3.0.0.tgz#8c2b9073fe0722d48693143b0dc8448840daa3bd"
+  integrity sha512-j6Z47VOmVyGMlnKXZmL0fyvWfEYtKWCA9yGZkU3FCsGZUT5lHGmvaV9JA5F2Y+010y7+ROtR3WMXIkvl/nVzqQ==
+
+"@metamask/safe-event-emitter@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@metamask/safe-event-emitter/-/safe-event-emitter-3.1.1.tgz#e89b840a7af8097a8ed4953d8dc8470d1302d3ef"
+  integrity sha512-ihb3B0T/wJm1eUuArYP4lCTSEoZsClHhuWyfo/kMX3m/odpqNcPfsz5O2A3NT7dXCAgWPGDQGPqygCpgeniKMw==
+
+"@metamask/sdk-communication-layer@0.31.0":
+  version "0.31.0"
+  resolved "https://registry.yarnpkg.com/@metamask/sdk-communication-layer/-/sdk-communication-layer-0.31.0.tgz#0acc063b62aa09d044c7aab65801712d760e53b2"
+  integrity sha512-V9CxdzabDPjQVgmKGHsyU3SYt4Af27g+4DbGCx0fLoHqN/i1RBDZqs/LYbJX3ykJCANzE+llz/MolMCMrzM2RA==
   dependencies:
-    "@types/debug" "^4.1.7"
+    bufferutil "^4.0.8"
+    date-fns "^2.29.3"
     debug "^4.3.4"
-    semver "^7.3.8"
-    superstruct "^1.0.3"
+    utf-8-validate "^5.0.2"
+    uuid "^8.3.2"
+
+"@metamask/sdk-install-modal-web@0.31.2":
+  version "0.31.2"
+  resolved "https://registry.yarnpkg.com/@metamask/sdk-install-modal-web/-/sdk-install-modal-web-0.31.2.tgz#bb8c92a6844a632be8525e7bb5a35924a926d6cd"
+  integrity sha512-KPv36kQjmTwErU8g2neuHHSgkD5+1hp4D6ERfk5Kc2r73aOYNCdG9wDGRUmFmcY2MKkeK1EuDyZfJ4FPU30fxQ==
+  dependencies:
+    "@paulmillr/qr" "^0.2.1"
+
+"@metamask/sdk@0.31.2":
+  version "0.31.2"
+  resolved "https://registry.yarnpkg.com/@metamask/sdk/-/sdk-0.31.2.tgz#2ec1c1c7cf6a444e65104862e83814a493047d72"
+  integrity sha512-6MWON2g1j7XwAHWam4trusGxeyhQweNLEHPsfuIxSwcsXoEm08Jj80OglJxQI4KwjcDnjSWBkQGG3mmK6ug/cA==
+  dependencies:
+    "@babel/runtime" "^7.26.0"
+    "@metamask/onboarding" "^1.0.1"
+    "@metamask/providers" "16.1.0"
+    "@metamask/sdk-communication-layer" "0.31.0"
+    "@metamask/sdk-install-modal-web" "0.31.2"
+    "@paulmillr/qr" "^0.2.1"
+    bowser "^2.9.0"
+    cross-fetch "^4.0.0"
+    debug "^4.3.4"
+    eciesjs "^0.4.11"
+    eth-rpc-errors "^4.0.3"
+    eventemitter2 "^6.4.9"
+    obj-multiplex "^1.0.0"
+    pump "^3.0.0"
+    readable-stream "^3.6.2"
+    socket.io-client "^4.5.1"
+    tslib "^2.6.0"
+    util "^0.12.4"
+    uuid "^8.3.2"
 
-"@metamask/utils@^5.0.0":
+"@metamask/utils@^5.0.0", "@metamask/utils@^5.0.1":
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/@metamask/utils/-/utils-5.0.2.tgz#140ba5061d90d9dac0280c19cab101bc18c8857c"
   integrity sha512-yfmE79bRQtnMzarnKfX7AEJBwFTxvTyw3nBQlu/5rmGXrjAeAMltoGxO62TFurxrQAFMNa/fEjIHNvungZp0+g==
@@ -3364,6 +4039,20 @@
     semver "^7.3.8"
     superstruct "^1.0.3"
 
+"@metamask/utils@^8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@metamask/utils/-/utils-8.3.0.tgz#a20de447aeb9ffb75924d822a186a597033984b6"
+  integrity sha512-WFVcMPEkKKRCJ8DDkZUTVbLlpwgRn98F4VM/WzN89HM8PmHMnCyk/oG0AmK/seOxtik7uC7Bbi2YBC5Z5XB2zw==
+  dependencies:
+    "@ethereumjs/tx" "^4.2.0"
+    "@noble/hashes" "^1.3.1"
+    "@scure/base" "^1.1.3"
+    "@types/debug" "^4.1.7"
+    debug "^4.3.4"
+    pony-cause "^2.1.10"
+    semver "^7.5.4"
+    superstruct "^1.0.3"
+
 "@monaco-editor/loader@^1.3.2":
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.3.2.tgz#04effbb87052d19cd7d3c9d81c0635490f9bb6d8"
@@ -3501,81 +4190,131 @@
     "@motionone/dom" "^10.16.2"
     tslib "^2.3.1"
 
+"@multiformats/dns@^1.0.1", "@multiformats/dns@^1.0.3", "@multiformats/dns@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@multiformats/dns/-/dns-1.0.6.tgz#b8c7de11459a02a5f4e609d35d3cdb95cb6ad152"
+  integrity sha512-nt/5UqjMPtyvkG9BQYdJ4GfLK3nMqGpFZOzf4hAmIa0sJh2LlS9YKXZ4FgwBDsaHvzZqR/rUFIywIc7pkHNNuw==
+  dependencies:
+    "@types/dns-packet" "^5.6.5"
+    buffer "^6.0.3"
+    dns-packet "^5.6.1"
+    hashlru "^2.3.0"
+    p-queue "^8.0.1"
+    progress-events "^1.0.0"
+    uint8arrays "^5.0.2"
+
+"@multiformats/multiaddr-matcher@^1.2.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@multiformats/multiaddr-matcher/-/multiaddr-matcher-1.5.0.tgz#784f7f5f53ffb8402843c1fa81da0eee83a3f28c"
+  integrity sha512-nA6lJpzjN1TZ1G9BM5QoVIBspbnPxnlVbJMvvaAR992K0t3G5c5vKCEMuUzanAE5VRrJ1MXHDhHonTeKoT/eTg==
+  dependencies:
+    "@chainsafe/is-ip" "^2.0.1"
+    "@multiformats/multiaddr" "^12.0.0"
+    multiformats "^13.0.0"
+
+"@multiformats/multiaddr-to-uri@^10.0.1":
+  version "10.1.2"
+  resolved "https://registry.yarnpkg.com/@multiformats/multiaddr-to-uri/-/multiaddr-to-uri-10.1.2.tgz#63271c4aaf5e9e275f3a48aeb8282435e938c1b0"
+  integrity sha512-6sicfYRjJlHJn4bwsQancs8kXncWU4dDN/+V9sMVTYp9hi8ovWgVkK75AbAv4SfhztmmI+oufVUncQ1n+SukKQ==
+  dependencies:
+    "@multiformats/multiaddr" "^12.3.0"
+
+"@multiformats/multiaddr@^12.0.0", "@multiformats/multiaddr@^12.1.14", "@multiformats/multiaddr@^12.2.1", "@multiformats/multiaddr@^12.2.3", "@multiformats/multiaddr@^12.3.0", "@multiformats/multiaddr@^12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@multiformats/multiaddr/-/multiaddr-12.3.1.tgz#953ceb4ae3b39125b7b2c721230ea7b398cf49fe"
+  integrity sha512-yoGODQY4nIj41ENJClucS8FtBoe8w682bzbKldEQr9lSlfdHqAsRC+vpJAOBpiMwPps1tHua4kxrDmvprdhoDQ==
+  dependencies:
+    "@chainsafe/is-ip" "^2.0.1"
+    "@chainsafe/netmask" "^2.0.0"
+    "@multiformats/dns" "^1.0.3"
+    multiformats "^13.0.0"
+    uint8-varint "^2.0.1"
+    uint8arrays "^5.0.0"
+
+"@multiformats/murmur3@^2.1.8":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@multiformats/murmur3/-/murmur3-2.1.8.tgz#81c1c15b6391109f3febfca4b3205196615a04e9"
+  integrity sha512-6vId1C46ra3R1sbJUOFCZnsUIveR9oF20yhPmAFxPm0JfrX3/ZRCgP3YDrBzlGoEppOXnA9czHeYc0T9mB6hbA==
+  dependencies:
+    multiformats "^13.0.0"
+    murmurhash3js-revisited "^3.0.0"
+
+"@multiformats/uri-to-multiaddr@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@multiformats/uri-to-multiaddr/-/uri-to-multiaddr-8.0.0.tgz#cd4c3248c0039731504b69ae74ae732e954119f7"
+  integrity sha512-86O+gY6JTnCv0O/IxTKV+1+GACoEBTr5Cfyh+FdzStWneviz2AZwLK8Hsys5dbfMgT//Vs7FolMiEHURlCel8w==
+  dependencies:
+    "@multiformats/multiaddr" "^12.1.14"
+    is-ip "^5.0.0"
+
 "@n1ru4l/push-pull-async-iterable-iterator@^3.1.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@n1ru4l/push-pull-async-iterable-iterator/-/push-pull-async-iterable-iterator-3.2.0.tgz#c15791112db68dd9315d329d652b7e797f737655"
   integrity sha512-3fkKj25kEjsfObL6IlKPAlHYPq/oYwUkkQ03zsTTiDjD7vg/RxjdiLeCydqtxHZP0JgsXL3D/X5oAkMGzuUp/Q==
 
-"@next/bundle-analyzer@^14.0.1":
-  version "14.0.1"
-  resolved "https://registry.yarnpkg.com/@next/bundle-analyzer/-/bundle-analyzer-14.0.1.tgz#0b371a00a4c252596669319e2fdda2d3cff4b52b"
-  integrity sha512-AbZZnj4gZ1ZQFppZxAC9e8+skj0rFiSvY6E6Ut+ydS1r6oizR7PMu/7o02psIm4ekAsmp2O1Eq8IowHQgPWPCQ==
-  dependencies:
-    webpack-bundle-analyzer "4.7.0"
-
-"@next/env@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-13.5.4.tgz#777c3af16de2cf2f611b6c8126910062d13d222c"
-  integrity sha512-LGegJkMvRNw90WWphGJ3RMHMVplYcOfRWf2Be3td3sUa+1AaxmsYyANsA+znrGCBjXJNi4XAQlSoEfUxs/4kIQ==
-
-"@next/eslint-plugin-next@13.3.0":
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-13.3.0.tgz#3a4742b0817575cc0dd4d152cb10363584c215ac"
-  integrity sha512-wuGN5qSEjSgcq9fVkH0Y/qIPFjnZtW3ZPwfjJOn7l/rrf6y8J24h/lo61kwqunTyzZJm/ETGfGVU9PUs8cnzEA==
-  dependencies:
-    glob "7.1.7"
-
-"@next/swc-darwin-arm64@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.4.tgz#241957774fef3f876dc714cfc0ca6f00f561737e"
-  integrity sha512-Df8SHuXgF1p+aonBMcDPEsaahNo2TCwuie7VXED4FVyECvdXfRT9unapm54NssV9tF3OQFKBFOdlje4T43VO0w==
-
-"@next/swc-darwin-x64@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.4.tgz#fa11bb97bf06cd45cbd554354b46bf93e22c025b"
-  integrity sha512-siPuUwO45PnNRMeZnSa8n/Lye5ZX93IJom9wQRB5DEOdFrw0JjOMu1GINB8jAEdwa7Vdyn1oJ2xGNaQpdQQ9Pw==
-
-"@next/swc-linux-arm64-gnu@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.4.tgz#dd3a482cd6871ed23b049066a0f3c4c2f955dc88"
-  integrity sha512-l/k/fvRP/zmB2jkFMfefmFkyZbDkYW0mRM/LB+tH5u9pB98WsHXC0WvDHlGCYp3CH/jlkJPL7gN8nkTQVrQ/2w==
-
-"@next/swc-linux-arm64-musl@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.4.tgz#ed6d7abaf5712cff2752ce5300d6bacc6aff1b18"
-  integrity sha512-YYGb7SlLkI+XqfQa8VPErljb7k9nUnhhRrVaOdfJNCaQnHBcvbT7cx/UjDQLdleJcfyg1Hkn5YSSIeVfjgmkTg==
-
-"@next/swc-linux-x64-gnu@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.4.tgz#977a040388e8a685a3a85e0dbdff90a4ee2a7189"
-  integrity sha512-uE61vyUSClnCH18YHjA8tE1prr/PBFlBFhxBZis4XBRJoR+txAky5d7gGNUIbQ8sZZ7LVkSVgm/5Fc7mwXmRAg==
-
-"@next/swc-linux-x64-musl@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.4.tgz#3e29a0ad8efc016196c3a120da04397eea328b2a"
-  integrity sha512-qVEKFYML/GvJSy9CfYqAdUexA6M5AklYcQCW+8JECmkQHGoPxCf04iMh7CPR7wkHyWWK+XLt4Ja7hhsPJtSnhg==
-
-"@next/swc-win32-arm64-msvc@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.4.tgz#18a236c3fe5a48d24b56d939e6a05488bb682b7e"
-  integrity sha512-mDSQfqxAlfpeZOLPxLymZkX0hYF3juN57W6vFHTvwKlnHfmh12Pt7hPIRLYIShk8uYRsKPtMTth/EzpwRI+u8w==
-
-"@next/swc-win32-ia32-msvc@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.4.tgz#255132243ab6fb20d3c7c92a585e2c4fa50368fe"
-  integrity sha512-aoqAT2XIekIWoriwzOmGFAvTtVY5O7JjV21giozBTP5c6uZhpvTWRbmHXbmsjZqY4HnEZQRXWkSAppsIBweKqw==
-
-"@next/swc-win32-x64-msvc@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.4.tgz#cc542907b55247c5634d9a8298e1c143a1847e25"
-  integrity sha512-cyRvlAxwlddlqeB9xtPSfNSCRy8BOa4wtMo0IuI9P7Y0XT2qpDrpFKRyZ7kUngZis59mPVla5k8X1oOJ8RxDYg==
-
-"@noble/curves@1.0.0", "@noble/curves@~1.0.0":
+"@next/bundle-analyzer@15.0.3":
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/@next/bundle-analyzer/-/bundle-analyzer-15.0.3.tgz#58615521d2ae649687d0c7592b9d11a2aa92c19b"
+  integrity sha512-x7ZNvpoQPO0C5ZG//qVp21Qs3v6+C8LBJmdu9DKj4/NmjlnwoQ7dqRZ/nKZcwVhkFT7BHf+Qd5FaeHq9IDJvDQ==
+  dependencies:
+    webpack-bundle-analyzer "4.10.1"
+
+"@next/env@15.0.3":
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-15.0.3.tgz#a2e9bf274743c52b74d30f415f3eba750d51313a"
+  integrity sha512-t9Xy32pjNOvVn2AS+Utt6VmyrshbpfUMhIjFO60gI58deSo/KgLOp31XZ4O+kY/Is8WAGYwA5gR7kOb1eORDBA==
+
+"@next/eslint-plugin-next@15.0.3":
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-15.0.3.tgz#ce953098036d462f6901e423cc6445fc165b78c4"
+  integrity sha512-3Ln/nHq2V+v8uIaxCR6YfYo7ceRgZNXfTd3yW1ukTaFbO+/I8jNakrjYWODvG9BuR2v5kgVtH/C8r0i11quOgw==
+  dependencies:
+    fast-glob "3.3.1"
+
+"@next/swc-darwin-arm64@15.0.3":
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.0.3.tgz#4c40c506cf3d4d87da0204f4cccf39e6bdc46a71"
+  integrity sha512-s3Q/NOorCsLYdCKvQlWU+a+GeAd3C8Rb3L1YnetsgwXzhc3UTWrtQpB/3eCjFOdGUj5QmXfRak12uocd1ZiiQw==
+
+"@next/swc-darwin-x64@15.0.3":
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-15.0.3.tgz#8e06cacae3dae279744f9fbe88dea679ec2c1ca3"
+  integrity sha512-Zxl/TwyXVZPCFSf0u2BNj5sE0F2uR6iSKxWpq4Wlk/Sv9Ob6YCKByQTkV2y6BCic+fkabp9190hyrDdPA/dNrw==
+
+"@next/swc-linux-arm64-gnu@15.0.3":
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.0.3.tgz#c144ad1f21091b9c6e1e330ecc2d56188763191d"
+  integrity sha512-T5+gg2EwpsY3OoaLxUIofmMb7ohAUlcNZW0fPQ6YAutaWJaxt1Z1h+8zdl4FRIOr5ABAAhXtBcpkZNwUcKI2fw==
+
+"@next/swc-linux-arm64-musl@15.0.3":
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.0.3.tgz#3ccb71c6703bf421332f177d1bb0e10528bc73a2"
+  integrity sha512-WkAk6R60mwDjH4lG/JBpb2xHl2/0Vj0ZRu1TIzWuOYfQ9tt9NFsIinI1Epma77JVgy81F32X/AeD+B2cBu/YQA==
+
+"@next/swc-linux-x64-gnu@15.0.3":
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.0.3.tgz#b90aa9b07001b4000427c35ab347a9273cbeebb3"
+  integrity sha512-gWL/Cta1aPVqIGgDb6nxkqy06DkwJ9gAnKORdHWX1QBbSZZB+biFYPFti8aKIQL7otCE1pjyPaXpFzGeG2OS2w==
+
+"@next/swc-linux-x64-musl@15.0.3":
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.0.3.tgz#0ac9724fb44718fc97bfea971ac3fe17e486590e"
+  integrity sha512-QQEMwFd8r7C0GxQS62Zcdy6GKx999I/rTO2ubdXEe+MlZk9ZiinsrjwoiBL5/57tfyjikgh6GOU2WRQVUej3UA==
+
+"@next/swc-win32-arm64-msvc@15.0.3":
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.0.3.tgz#932437d4cf27814e963ba8ae5f033b4421fab9ca"
+  integrity sha512-9TEp47AAd/ms9fPNgtgnT7F3M1Hf7koIYYWCMQ9neOwjbVWJsHZxrFbI3iEDJ8rf1TDGpmHbKxXf2IFpAvheIQ==
+
+"@next/swc-win32-x64-msvc@15.0.3":
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.0.3.tgz#940a6f7b370cdde0cc67eabe945d9e6d97e0be9f"
+  integrity sha512-VNAz+HN4OGgvZs6MOoVfnn41kBzT+M+tB+OK4cww6DNyWS6wKaDpaAm/qLeOUbnMh0oVx1+mg0uoYARF69dJyA==
+
+"@noble/ciphers@^1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.0.0.tgz#e40be8c7daf088aaf291887cbc73f43464a92932"
-  integrity sha512-2upgEu0iLiDVDZkNLeFV2+ht0BAVgQnEmCk6JsOch9Rp8xfkMCbvbAZlA2pBHQc73dbl+vFOXfqkf4uemdn0bw==
-  dependencies:
-    "@noble/hashes" "1.3.0"
+  resolved "https://registry.yarnpkg.com/@noble/ciphers/-/ciphers-1.0.0.tgz#34758a1cbfcd4126880f83e6b1cdeb88785b7970"
+  integrity sha512-wH5EHOmLi0rEazphPbecAzmjd12I6/Yv/SiHdkA9LSycsQk7RuuTp7am5/o62qYr0RScE7Pc9icXGBbsr6cesA==
 
 "@noble/curves@1.1.0", "@noble/curves@~1.1.0":
   version "1.1.0"
@@ -3591,15 +4330,33 @@
   dependencies:
     "@noble/hashes" "1.3.2"
 
-"@noble/ed25519@^1.7.0":
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/@noble/ed25519/-/ed25519-1.7.1.tgz#6899660f6fbb97798a6fbd227227c4589a454724"
-  integrity sha512-Rk4SkJFaXZiznFyC/t77Q0NKS4FL7TLJJsVG2V2oiEq3kJVeTdxysEe/yRWSpnWMe808XRDJ+VFh5pt/FN5plw==
+"@noble/curves@1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.4.0.tgz#f05771ef64da724997f69ee1261b2417a49522d6"
+  integrity sha512-p+4cb332SFCrReJkCYe8Xzm0OWi4Jji5jVdIZRL/PmacmDkFNw6MrrV+gGpiPxLHbV+zKFRywUWbaseT+tZRXg==
+  dependencies:
+    "@noble/hashes" "1.4.0"
 
-"@noble/hashes@1.3.0", "@noble/hashes@~1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.0.tgz#085fd70f6d7d9d109671090ccae1d3bec62554a1"
-  integrity sha512-ilHEACi9DwqJB0pw7kv+Apvh50jiiSyR/cQ3y4W7lOR5mhvn/50FLUfsnfJz0BDZtl/RR16kXvptiv6q1msYZg==
+"@noble/curves@1.6.0", "@noble/curves@^1.4.0", "@noble/curves@^1.6.0", "@noble/curves@~1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.6.0.tgz#be5296ebcd5a1730fccea4786d420f87abfeb40b"
+  integrity sha512-TlaHRXDehJuRNR9TfZDNQ45mMEd5dwUwmicsafcIX4SsNiqnCHKjE/1alYPd/lDRVhxdhUAlv8uEhMCI5zjIJQ==
+  dependencies:
+    "@noble/hashes" "1.5.0"
+
+"@noble/curves@1.7.0", "@noble/curves@~1.7.0":
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.7.0.tgz#0512360622439256df892f21d25b388f52505e45"
+  integrity sha512-UTMhXK9SeDhFJVrHeUJ5uZlI6ajXg10O6Ddocf9S6GjbSBVZsJo88HzKwXznNfGpMTRDyJkqMjNDPYgf0qFWnw==
+  dependencies:
+    "@noble/hashes" "1.6.0"
+
+"@noble/curves@~1.4.0":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.4.2.tgz#40309198c76ed71bc6dbf7ba24e81ceb4d0d1fe9"
+  integrity sha512-TavHr8qycMChk8UwMld0ZDRvatedkzWfH8IiaeGCfymOP5i0hSCozz9vHOL0nkwk7HRMlFnAiKpS2jrUmSybcw==
+  dependencies:
+    "@noble/hashes" "1.4.0"
 
 "@noble/hashes@1.3.1":
   version "1.3.1"
@@ -3611,20 +4368,35 @@
   resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.2.tgz#6f26dbc8fbc7205873ce3cee2f690eba0d421b39"
   integrity sha512-MVC8EAQp7MvEcm30KWENFjgR+Mkmf+D189XJTkFIlwohU5hcBbn1ZkKq7KVTi2Hme3PMGF390DaL52beVrIihQ==
 
-"@noble/hashes@^1.1.2":
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.1.5.tgz#1a0377f3b9020efe2fae03290bd2a12140c95c11"
-  integrity sha512-LTMZiiLc+V4v1Yi16TD6aX2gmtKszNye0pQgbaLqkvhIqP7nVsSaJsWloGQjJfJ8offaoP5GtX3yY5swbcJxxQ==
+"@noble/hashes@1.4.0", "@noble/hashes@~1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.4.0.tgz#45814aa329f30e4fe0ba49426f49dfccdd066426"
+  integrity sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==
+
+"@noble/hashes@1.5.0", "@noble/hashes@^1.4.0", "@noble/hashes@^1.5.0", "@noble/hashes@~1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.5.0.tgz#abadc5ca20332db2b1b2aa3e496e9af1213570b0"
+  integrity sha512-1j6kQFb7QRru7eKN3ZDvRcP13rugwdxZqCjbiAVZfIJwgj2A65UmT4TgARXGlXgnRkORLTDTrO19ZErt7+QXgA==
+
+"@noble/hashes@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.6.0.tgz#d4bfb516ad6e7b5111c216a5cc7075f4cf19e6c5"
+  integrity sha512-YUULf0Uk4/mAA89w+k3+yUYh6NrEvxZa5T6SY3wlMvE2chHkxFUUIDI8/XW1QSC357iA5pSnqt7XEhvFOqmDyQ==
+
+"@noble/hashes@1.6.1", "@noble/hashes@~1.6.0":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.6.1.tgz#df6e5943edcea504bac61395926d6fd67869a0d5"
+  integrity sha512-pq5D8h10hHBjyqX+cfBm0i8JUXJ0UhczFc4r74zbuT9XgewFo2E3J1cOaGtdZynILNmQ685YWGzGE1Zv6io50w==
 
-"@noble/hashes@~1.3.2":
+"@noble/hashes@^1.3.1", "@noble/hashes@~1.3.2":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.3.tgz#39908da56a4adc270147bb07968bf3b16cfe1699"
   integrity sha512-V7/fPHgl+jsVPXqqeOzT8egNj2iBIVt+ECeMMG8TdcnTikP3oaBtUVqpT/gYCR68aEBJSF+XbYUxStjbFMqIIA==
 
-"@noble/secp256k1@^1.6.3":
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/@noble/secp256k1/-/secp256k1-1.7.1.tgz#b251c70f824ce3ca7f8dc3df08d58f005cc0507c"
-  integrity sha512-hOUk6AyBFmqVrv7k5WAw/LpszxVbj9gGN4JRkIX52fdFAj1UA61KXmZDvqVEm+pOyec3+fIeZB02LYa/pWOArw==
+"@noble/hashes@~1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.0.tgz#085fd70f6d7d9d109671090ccae1d3bec62554a1"
+  integrity sha512-ilHEACi9DwqJB0pw7kv+Apvh50jiiSyR/cQ3y4W7lOR5mhvn/50FLUfsnfJz0BDZtl/RR16kXvptiv6q1msYZg==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -3639,7 +4411,7 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
 
-"@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
+"@nodelib/fs.walk@^1.2.3":
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
   integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
@@ -3647,24 +4419,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@opentelemetry/api-logs@0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/api-logs/-/api-logs-0.44.0.tgz#4bbb04e9043234c240b3a9129732281f1ceae759"
-  integrity sha512-OctojdKGmXHKAJa4/Ml+Nf7MD9jtYXvZyP64xTh0pNTmtgaTdWW3FURri2DdB/+l7YxRy0tYYZS3/tYEM1pj3w==
-  dependencies:
-    "@opentelemetry/api" "^1.0.0"
-
-"@opentelemetry/api-logs@0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/api-logs/-/api-logs-0.45.0.tgz#d18ba361bbab77244cf3ec7bb14a5dfcb7a990f2"
-  integrity sha512-swhLdhH/nftC/bNhc3bQ7cn4XJvVO1n8aidDJ7fSw+5ostDLSurDdHS2bY8dxVmb+oHndgBlYOvrx7Jx4OPO6A==
-  dependencies:
-    "@opentelemetry/api" "^1.0.0"
-
-"@opentelemetry/api-logs@0.45.1":
-  version "0.45.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/api-logs/-/api-logs-0.45.1.tgz#9e4f2c652dcce798c5627939b22304c2b5ce19c5"
-  integrity sha512-zVGq/k70l+kB/Wuv3O/zhptP2hvDhEbhDu9EtHde1iWZJf3FedeYS/nWVcMBkkyPAjS/JKNk86WN4CBQLGUuOw==
+"@opentelemetry/api-logs@0.49.1", "@opentelemetry/api-logs@^0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/api-logs/-/api-logs-0.49.1.tgz#51a66ed5eb5eeeafffbd36c1713aa91cbfdd5259"
+  integrity sha512-kaNl/T7WzyMUQHQlVq7q0oV4Kev6+0xFwqzofryC66jgGMacd0QH5TwfpbUwSTby+SdAdprAe5UKMvBw4tKS5Q==
   dependencies:
     "@opentelemetry/api" "^1.0.0"
 
@@ -3673,72 +4431,65 @@
   resolved "https://registry.yarnpkg.com/@opentelemetry/api/-/api-1.7.0.tgz#b139c81999c23e3c8d3c0a7234480e945920fc40"
   integrity sha512-AdY5wvN0P2vXBi3b29hxZgSFvdhdxPB9+f0B6s//P9Q8nibRWeA3cHm8UmLpio9ABigkVHJ5NMPk+Mz8VCCyrw==
 
-"@opentelemetry/auto-instrumentations-node@^0.39.4":
-  version "0.39.4"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/auto-instrumentations-node/-/auto-instrumentations-node-0.39.4.tgz#c772201ba224e6ebffaaf17c9f2234e6e8343328"
-  integrity sha512-1bOMl+7qPe0RJeNaCo9UwNftl/cE0N81EEfxL0BJhPY4dHfCwQLMVoGpXrW8TxRy8ccjS1l1rwYIMnRHJseFqA==
-  dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
-    "@opentelemetry/instrumentation-amqplib" "^0.33.2"
-    "@opentelemetry/instrumentation-aws-lambda" "^0.37.1"
-    "@opentelemetry/instrumentation-aws-sdk" "^0.36.1"
-    "@opentelemetry/instrumentation-bunyan" "^0.32.2"
-    "@opentelemetry/instrumentation-cassandra-driver" "^0.33.2"
-    "@opentelemetry/instrumentation-connect" "^0.32.2"
-    "@opentelemetry/instrumentation-cucumber" "^0.1.1"
-    "@opentelemetry/instrumentation-dataloader" "^0.5.2"
-    "@opentelemetry/instrumentation-dns" "^0.32.3"
-    "@opentelemetry/instrumentation-express" "^0.33.2"
-    "@opentelemetry/instrumentation-fastify" "^0.32.3"
-    "@opentelemetry/instrumentation-fs" "^0.8.2"
-    "@opentelemetry/instrumentation-generic-pool" "^0.32.3"
-    "@opentelemetry/instrumentation-graphql" "^0.35.2"
-    "@opentelemetry/instrumentation-grpc" "^0.44.0"
-    "@opentelemetry/instrumentation-hapi" "^0.33.1"
-    "@opentelemetry/instrumentation-http" "^0.44.0"
-    "@opentelemetry/instrumentation-ioredis" "^0.35.2"
-    "@opentelemetry/instrumentation-knex" "^0.32.2"
-    "@opentelemetry/instrumentation-koa" "^0.36.1"
-    "@opentelemetry/instrumentation-lru-memoizer" "^0.33.2"
-    "@opentelemetry/instrumentation-memcached" "^0.32.2"
-    "@opentelemetry/instrumentation-mongodb" "^0.37.1"
-    "@opentelemetry/instrumentation-mongoose" "^0.33.2"
-    "@opentelemetry/instrumentation-mysql" "^0.34.2"
-    "@opentelemetry/instrumentation-mysql2" "^0.34.2"
-    "@opentelemetry/instrumentation-nestjs-core" "^0.33.2"
-    "@opentelemetry/instrumentation-net" "^0.32.2"
-    "@opentelemetry/instrumentation-pg" "^0.36.2"
-    "@opentelemetry/instrumentation-pino" "^0.34.2"
-    "@opentelemetry/instrumentation-redis" "^0.35.2"
-    "@opentelemetry/instrumentation-redis-4" "^0.35.3"
-    "@opentelemetry/instrumentation-restify" "^0.34.1"
-    "@opentelemetry/instrumentation-router" "^0.33.2"
-    "@opentelemetry/instrumentation-socket.io" "^0.34.2"
-    "@opentelemetry/instrumentation-tedious" "^0.6.2"
-    "@opentelemetry/instrumentation-winston" "^0.32.2"
-    "@opentelemetry/resource-detector-alibaba-cloud" "^0.28.2"
-    "@opentelemetry/resource-detector-aws" "^1.3.2"
-    "@opentelemetry/resource-detector-container" "^0.3.2"
-    "@opentelemetry/resource-detector-gcp" "^0.29.2"
+"@opentelemetry/api@^1.4.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/api/-/api-1.8.0.tgz#5aa7abb48f23f693068ed2999ae627d2f7d902ec"
+  integrity sha512-I/s6F7yKUDdtMsoBWXJe8Qz40Tui5vsuKCWJEWVL+5q9sSWRzzx6v2KeNsOBEwd94j0eWkpWCH4yB6rZg9Mf0w==
+
+"@opentelemetry/auto-instrumentations-node@0.43.0":
+  version "0.43.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/auto-instrumentations-node/-/auto-instrumentations-node-0.43.0.tgz#1833f4bd3975dd125f278685054c30c158ad211c"
+  integrity sha512-2WvHUSi/QVeVG8ObPD0Ls6WevfIbQjspxIQRuHaQFWXhmEwy/MsEcoQUjbNKXwO5516aS04GTydKEoRKsMwhdA==
+  dependencies:
+    "@opentelemetry/instrumentation" "^0.49.1"
+    "@opentelemetry/instrumentation-amqplib" "^0.35.0"
+    "@opentelemetry/instrumentation-aws-lambda" "^0.39.0"
+    "@opentelemetry/instrumentation-aws-sdk" "^0.39.1"
+    "@opentelemetry/instrumentation-bunyan" "^0.36.0"
+    "@opentelemetry/instrumentation-cassandra-driver" "^0.36.0"
+    "@opentelemetry/instrumentation-connect" "^0.34.0"
+    "@opentelemetry/instrumentation-cucumber" "^0.4.0"
+    "@opentelemetry/instrumentation-dataloader" "^0.7.0"
+    "@opentelemetry/instrumentation-dns" "^0.34.0"
+    "@opentelemetry/instrumentation-express" "^0.36.1"
+    "@opentelemetry/instrumentation-fastify" "^0.34.0"
+    "@opentelemetry/instrumentation-fs" "^0.10.0"
+    "@opentelemetry/instrumentation-generic-pool" "^0.34.0"
+    "@opentelemetry/instrumentation-graphql" "^0.38.1"
+    "@opentelemetry/instrumentation-grpc" "^0.49.1"
+    "@opentelemetry/instrumentation-hapi" "^0.35.0"
+    "@opentelemetry/instrumentation-http" "^0.49.1"
+    "@opentelemetry/instrumentation-ioredis" "^0.38.0"
+    "@opentelemetry/instrumentation-knex" "^0.34.0"
+    "@opentelemetry/instrumentation-koa" "^0.38.0"
+    "@opentelemetry/instrumentation-lru-memoizer" "^0.35.0"
+    "@opentelemetry/instrumentation-memcached" "^0.34.0"
+    "@opentelemetry/instrumentation-mongodb" "^0.41.0"
+    "@opentelemetry/instrumentation-mongoose" "^0.36.0"
+    "@opentelemetry/instrumentation-mysql" "^0.36.0"
+    "@opentelemetry/instrumentation-mysql2" "^0.36.0"
+    "@opentelemetry/instrumentation-nestjs-core" "^0.35.0"
+    "@opentelemetry/instrumentation-net" "^0.34.0"
+    "@opentelemetry/instrumentation-pg" "^0.39.1"
+    "@opentelemetry/instrumentation-pino" "^0.36.0"
+    "@opentelemetry/instrumentation-redis" "^0.37.0"
+    "@opentelemetry/instrumentation-redis-4" "^0.37.0"
+    "@opentelemetry/instrumentation-restify" "^0.36.0"
+    "@opentelemetry/instrumentation-router" "^0.35.0"
+    "@opentelemetry/instrumentation-socket.io" "^0.37.0"
+    "@opentelemetry/instrumentation-tedious" "^0.8.0"
+    "@opentelemetry/instrumentation-winston" "^0.35.0"
+    "@opentelemetry/resource-detector-alibaba-cloud" "^0.28.7"
+    "@opentelemetry/resource-detector-aws" "^1.4.0"
+    "@opentelemetry/resource-detector-container" "^0.3.7"
+    "@opentelemetry/resource-detector-gcp" "^0.29.7"
     "@opentelemetry/resources" "^1.12.0"
-    "@opentelemetry/sdk-node" "^0.44.0"
-
-"@opentelemetry/context-async-hooks@1.17.1":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/context-async-hooks/-/context-async-hooks-1.17.1.tgz#4eba80bd66f8cd367e9ba94b5fec5f5acf5d7b25"
-  integrity sha512-up5I+RiQEkGrVEHtbAtmRgS+ZOnFh3shaDNHqZPBlGy+O92auL6yMmjzYpSKmJOGWowvs3fhVHePa8Exb5iHUg==
+    "@opentelemetry/sdk-node" "^0.49.1"
 
-"@opentelemetry/context-async-hooks@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/context-async-hooks/-/context-async-hooks-1.18.0.tgz#9263ed61789219ca4722c92bbf67bbf1cdd836e2"
-  integrity sha512-pWAtTz5a2KQvTsezH/K+6sCxk7O/pOmGUq61I0m65FRRQW5Ahszo+OZHyKfIrEz3blm/WGQLCgpmWme5liCMLw==
-
-"@opentelemetry/core@1.17.1":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/core/-/core-1.17.1.tgz#10c5e09c63aeb1836b34d80baf7113760fb19d96"
-  integrity sha512-I6LrZvl1FF97FQXPR0iieWQmKnGxYtMbWA1GrAXnLUR+B1Hn2m8KqQNEIlZAucyv00GBgpWkpllmULmZfG8P3g==
-  dependencies:
-    "@opentelemetry/semantic-conventions" "1.17.1"
+"@opentelemetry/context-async-hooks@1.22.0":
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/context-async-hooks/-/context-async-hooks-1.22.0.tgz#80c8037b0dc4ab0b0e9c27e8cc13aa563c35699f"
+  integrity sha512-Nfdxyg8YtWqVWkyrCukkundAjPhUXi93JtVQmqDT1mZRVKqA7e2r7eJCrI+F651XUBMp0hsOJSGiFk3QSpaIJw==
 
 "@opentelemetry/core@1.18.0", "@opentelemetry/core@^1.0.0", "@opentelemetry/core@^1.1.0", "@opentelemetry/core@^1.8.0":
   version "1.18.0"
@@ -3747,593 +4498,485 @@
   dependencies:
     "@opentelemetry/semantic-conventions" "1.18.0"
 
-"@opentelemetry/core@1.18.1":
-  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/core/-/core-1.18.1.tgz#d2e45f6bd6be4f00d20d18d4f1b230ec33805ae9"
-  integrity sha512-kvnUqezHMhsQvdsnhnqTNfAJs3ox/isB0SVrM1dhVFw7SsB7TstuVa6fgWnN2GdPyilIFLUvvbTZoVRmx6eiRg==
-  dependencies:
-    "@opentelemetry/semantic-conventions" "1.18.1"
-
-"@opentelemetry/exporter-jaeger@1.17.1":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-jaeger/-/exporter-jaeger-1.17.1.tgz#efc44284b22b0ed0c4a5ba646c13902b980e52ee"
-  integrity sha512-NW4qm04q4bSmhU6es1AXBWt3itJ2gkrXbKLfwDleC+ZMp3bVV47stByDqhuJzic2f47Im+C733N9RMeBkyqKMQ==
-  dependencies:
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/sdk-trace-base" "1.17.1"
-    "@opentelemetry/semantic-conventions" "1.17.1"
-    jaeger-client "^3.15.0"
-
-"@opentelemetry/exporter-metrics-otlp-http@0.45.1":
-  version "0.45.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-metrics-otlp-http/-/exporter-metrics-otlp-http-0.45.1.tgz#322b66a7c17657e1d2c69b42535063bfcc2d992d"
-  integrity sha512-DvyXkjHIrnQ9ESj8tDrGFzRtVIGOzZpmi80YZdTlwr6TMQzvg4UgHQcGo6wj7ZGzdwAJ7057OgAcDUd+/O/Erg==
-  dependencies:
-    "@opentelemetry/core" "1.18.1"
-    "@opentelemetry/otlp-exporter-base" "0.45.1"
-    "@opentelemetry/otlp-transformer" "0.45.1"
-    "@opentelemetry/resources" "1.18.1"
-    "@opentelemetry/sdk-metrics" "1.18.1"
-
-"@opentelemetry/exporter-metrics-otlp-proto@^0.45.1":
-  version "0.45.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-metrics-otlp-proto/-/exporter-metrics-otlp-proto-0.45.1.tgz#7093926ba8ee41f8d9ed1debf55f12dd1ff05ee8"
-  integrity sha512-JLB8hwzc1dK/NpvyivgCAK0CKq1Q+71RmMCGWxa09zekateM1wCulf1jnXwSmdB6hrh4E9foRLOWrcjtFH7B8w==
-  dependencies:
-    "@opentelemetry/core" "1.18.1"
-    "@opentelemetry/exporter-metrics-otlp-http" "0.45.1"
-    "@opentelemetry/otlp-exporter-base" "0.45.1"
-    "@opentelemetry/otlp-proto-exporter-base" "0.45.1"
-    "@opentelemetry/otlp-transformer" "0.45.1"
-    "@opentelemetry/resources" "1.18.1"
-    "@opentelemetry/sdk-metrics" "1.18.1"
-
-"@opentelemetry/exporter-trace-otlp-grpc@0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-trace-otlp-grpc/-/exporter-trace-otlp-grpc-0.44.0.tgz#67a2ea03ddfe1ef70384780eea1479bec0ee5e18"
-  integrity sha512-S1kT/9tVlgZDRYyVfCLYyWZoQTplPD9WcyX+qUPbhJTETORxzJVW9HN8mHwQsXaN7ngqwRLy5GW/nXHL8aqA0w==
-  dependencies:
-    "@grpc/grpc-js" "^1.7.1"
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/otlp-grpc-exporter-base" "0.44.0"
-    "@opentelemetry/otlp-transformer" "0.44.0"
-    "@opentelemetry/resources" "1.17.1"
-    "@opentelemetry/sdk-trace-base" "1.17.1"
-
-"@opentelemetry/exporter-trace-otlp-grpc@0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-trace-otlp-grpc/-/exporter-trace-otlp-grpc-0.45.0.tgz#af48172eb5956ba58309fb82586c89c123fd5294"
-  integrity sha512-LHtu6lDSDTlYWZC0bVRQAK8HlZgjS0G3ZJEjgr6cJvTeSiGqygGEo3N60X/h3FxbqTz4yOTLg+mSZ9UbGCNVmw==
-  dependencies:
-    "@grpc/grpc-js" "^1.7.1"
-    "@opentelemetry/core" "1.18.0"
-    "@opentelemetry/otlp-grpc-exporter-base" "0.45.0"
-    "@opentelemetry/otlp-transformer" "0.45.0"
-    "@opentelemetry/resources" "1.18.0"
-    "@opentelemetry/sdk-trace-base" "1.18.0"
-
-"@opentelemetry/exporter-trace-otlp-http@0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-trace-otlp-http/-/exporter-trace-otlp-http-0.44.0.tgz#1dfe24b87fa3e1f5edd2109da28d489029f90171"
-  integrity sha512-RkorGE6wf6PF5OjMUGBnbUDyaVgmN+vL7OgClJJUTxqbE7WqgbW8dkU04O+1mcB1znXZ1Aej1uDm0pS+eW/upA==
+"@opentelemetry/core@1.22.0":
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/core/-/core-1.22.0.tgz#a9f33689acd4703ac780c6595497374e2113c7e5"
+  integrity sha512-0VoAlT6x+Xzik1v9goJ3pZ2ppi6+xd3aUfg4brfrLkDBHRIVjMP0eBHrKrhB+NKcDyMAg8fAbGL3Npg/F6AwWA==
   dependencies:
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/otlp-exporter-base" "0.44.0"
-    "@opentelemetry/otlp-transformer" "0.44.0"
-    "@opentelemetry/resources" "1.17.1"
-    "@opentelemetry/sdk-trace-base" "1.17.1"
-
-"@opentelemetry/exporter-trace-otlp-http@0.45.0", "@opentelemetry/exporter-trace-otlp-http@^0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-trace-otlp-http/-/exporter-trace-otlp-http-0.45.0.tgz#f783aa24b7ed9c5c1bb1b3091d43ec6394784b7e"
-  integrity sha512-wmnuyKZAMoJdNpdiUYuLLa8kUMVRTl4BQJ6zEb9HUkiusSQ8+h2q0s7rVtY2urvg2HxDjMrDdUgjFnRPmoyBkg==
-  dependencies:
-    "@opentelemetry/core" "1.18.0"
-    "@opentelemetry/otlp-exporter-base" "0.45.0"
-    "@opentelemetry/otlp-transformer" "0.45.0"
-    "@opentelemetry/resources" "1.18.0"
-    "@opentelemetry/sdk-trace-base" "1.18.0"
+    "@opentelemetry/semantic-conventions" "1.22.0"
 
-"@opentelemetry/exporter-trace-otlp-proto@0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-trace-otlp-proto/-/exporter-trace-otlp-proto-0.44.0.tgz#5726749e76def507475ec47cfb67a2099d3a2ae7"
-  integrity sha512-yVW0FXxiLaQOyE3MGr6BtK7ml0DaJH4Qx3yvQYUd/hsJUSZBhYYw2TRaMsaW7XMpe1AvU81qt0l8uLYmcmcLJA==
+"@opentelemetry/core@1.26.0":
+  version "1.26.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/core/-/core-1.26.0.tgz#7d84265aaa850ed0ca5813f97d831155be42b328"
+  integrity sha512-1iKxXXE8415Cdv0yjG3G6hQnB5eVEsJce3QaawX8SjDn0mAS0ZM8fAbZZJD4ajvhC15cePvosSCut404KrIIvQ==
   dependencies:
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/otlp-exporter-base" "0.44.0"
-    "@opentelemetry/otlp-proto-exporter-base" "0.44.0"
-    "@opentelemetry/otlp-transformer" "0.44.0"
-    "@opentelemetry/resources" "1.17.1"
-    "@opentelemetry/sdk-trace-base" "1.17.1"
+    "@opentelemetry/semantic-conventions" "1.27.0"
 
-"@opentelemetry/exporter-trace-otlp-proto@0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-trace-otlp-proto/-/exporter-trace-otlp-proto-0.45.0.tgz#035d627628573e28d0d9210cbb79523a2c91af68"
-  integrity sha512-t66KZrgoUwBCzAA9v0wJ3GJN8xSZ4TlhetFGhh2fVRwLcIWmp1FGCzm5KKgjgRyAZQIJjWUJ2tBNFyDVFShvcw==
+"@opentelemetry/core@1.27.0":
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/core/-/core-1.27.0.tgz#9f1701a654ab01abcebb12931b418f3393b94b75"
+  integrity sha512-yQPKnK5e+76XuiqUH/gKyS8wv/7qITd5ln56QkBTf3uggr0VkXOXfcaAuG330UfdYu83wsyoBwqwxigpIG+Jkg==
   dependencies:
-    "@opentelemetry/core" "1.18.0"
-    "@opentelemetry/otlp-exporter-base" "0.45.0"
-    "@opentelemetry/otlp-proto-exporter-base" "0.45.0"
-    "@opentelemetry/otlp-transformer" "0.45.0"
-    "@opentelemetry/resources" "1.18.0"
-    "@opentelemetry/sdk-trace-base" "1.18.0"
+    "@opentelemetry/semantic-conventions" "1.27.0"
 
-"@opentelemetry/exporter-zipkin@1.17.1":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-zipkin/-/exporter-zipkin-1.17.1.tgz#6d7537c0bc40ece73f8661420ef0c7322c0945cd"
-  integrity sha512-FaLZlIhdpxlZiKu/G8OvA+so4xoCL1hCo/JgNdeSxzI4GnJrmFFbZT6DXgUzXJO7F9Qw3KDE1cBFUHawLVz58g==
+"@opentelemetry/exporter-jaeger@1.27.0":
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-jaeger/-/exporter-jaeger-1.27.0.tgz#c11c756c377253ad0db77bd00d72e73931e292f6"
+  integrity sha512-ULWBtyNQDQQBWTkoCPfpGZTXZ9gLOFHeLZ3BoeZAkxYOgqqTH83IDRbtH8sHt6j84OPQfAcd18uHOb/lc9q0Bw==
   dependencies:
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/resources" "1.17.1"
-    "@opentelemetry/sdk-trace-base" "1.17.1"
-    "@opentelemetry/semantic-conventions" "1.17.1"
+    "@opentelemetry/core" "1.27.0"
+    "@opentelemetry/sdk-trace-base" "1.27.0"
+    "@opentelemetry/semantic-conventions" "1.27.0"
+    jaeger-client "^3.15.0"
 
-"@opentelemetry/exporter-zipkin@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-zipkin/-/exporter-zipkin-1.18.0.tgz#314053941d866454e51312798a25eea2a228b8b0"
-  integrity sha512-YEyaRnl0HQHkJZEoFJMqiTEw/QpXjgv5w/+k7O7UOBoZ6vmOEFxgjtg6oAsIVTQhMzxh7eILtoKC97s49YR7lg==
+"@opentelemetry/exporter-metrics-otlp-http@0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-metrics-otlp-http/-/exporter-metrics-otlp-http-0.49.1.tgz#e38a84f771468a13850d22bcb9a1cee09a95e835"
+  integrity sha512-t/sWYqfcwn81SvYHIyYJDlJD2CjFz3/h2t4j+XCtdoHAfu+WVJQmwLsGYJPlCDp3UXQfFpMJMWvLlvtD2SL+rg==
+  dependencies:
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/otlp-exporter-base" "0.49.1"
+    "@opentelemetry/otlp-transformer" "0.49.1"
+    "@opentelemetry/resources" "1.22.0"
+    "@opentelemetry/sdk-metrics" "1.22.0"
+
+"@opentelemetry/exporter-metrics-otlp-proto@0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-metrics-otlp-proto/-/exporter-metrics-otlp-proto-0.49.1.tgz#18713e35a38dfc03f365b125c4f2b813eb9a748d"
+  integrity sha512-xKI6aCRY+STxbF7PA+6YNNYWFf6IS065rZZeqlqvqQsp0HaFUqpPEzMJn0OmQMGuy40o7wWtmZ9/bSu4jlhfYw==
+  dependencies:
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/exporter-metrics-otlp-http" "0.49.1"
+    "@opentelemetry/otlp-exporter-base" "0.49.1"
+    "@opentelemetry/otlp-proto-exporter-base" "0.49.1"
+    "@opentelemetry/otlp-transformer" "0.49.1"
+    "@opentelemetry/resources" "1.22.0"
+    "@opentelemetry/sdk-metrics" "1.22.0"
+
+"@opentelemetry/exporter-trace-otlp-grpc@0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-trace-otlp-grpc/-/exporter-trace-otlp-grpc-0.49.1.tgz#97f9c14d5eaa01e8e18f5d7bfc9a0f5a409b5471"
+  integrity sha512-Zbd7f3zF7fI2587MVhBizaW21cO/SordyrZGtMtvhoxU6n4Qb02Gx71X4+PzXH620e0+JX+Pcr9bYb1HTeVyJA==
   dependencies:
-    "@opentelemetry/core" "1.18.0"
-    "@opentelemetry/resources" "1.18.0"
-    "@opentelemetry/sdk-trace-base" "1.18.0"
-    "@opentelemetry/semantic-conventions" "1.18.0"
-
-"@opentelemetry/instrumentation-amqplib@^0.33.2":
-  version "0.33.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-amqplib/-/instrumentation-amqplib-0.33.2.tgz#427ad7f417bb3f89d1b051a945c442387d1c6469"
-  integrity sha512-qAc9DMkyStlc45LgM+krSckYL4O5zi3uu1rk1QQL7Nn6q3LNNZV2c+fUPMf7hDf2OuK6VyVF0rqWYDSu/JDJ6Q==
+    "@grpc/grpc-js" "^1.7.1"
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/otlp-grpc-exporter-base" "0.49.1"
+    "@opentelemetry/otlp-transformer" "0.49.1"
+    "@opentelemetry/resources" "1.22.0"
+    "@opentelemetry/sdk-trace-base" "1.22.0"
+
+"@opentelemetry/exporter-trace-otlp-http@0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-trace-otlp-http/-/exporter-trace-otlp-http-0.49.1.tgz#032967960815d46bed32e5b231efe5114ab2a73b"
+  integrity sha512-KOLtZfZvIrpGZLVvblKsiVQT7gQUZNKcUUH24Zz6Xbi7LJb9Vt6xtUZFYdR5IIjvt47PIqBKDWUQlU0o1wAsRw==
+  dependencies:
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/otlp-exporter-base" "0.49.1"
+    "@opentelemetry/otlp-transformer" "0.49.1"
+    "@opentelemetry/resources" "1.22.0"
+    "@opentelemetry/sdk-trace-base" "1.22.0"
+
+"@opentelemetry/exporter-trace-otlp-proto@0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-trace-otlp-proto/-/exporter-trace-otlp-proto-0.49.1.tgz#4d262423eb47a9877aca88e8f90cf49dbfeb6733"
+  integrity sha512-n8ON/c9pdMyYAfSFWKkgsPwjYoxnki+6Olzo+klKfW7KqLWoyEkryNkbcMIYnGGNXwdkMIrjoaP0VxXB26Oxcg==
+  dependencies:
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/otlp-exporter-base" "0.49.1"
+    "@opentelemetry/otlp-proto-exporter-base" "0.49.1"
+    "@opentelemetry/otlp-transformer" "0.49.1"
+    "@opentelemetry/resources" "1.22.0"
+    "@opentelemetry/sdk-trace-base" "1.22.0"
+
+"@opentelemetry/exporter-zipkin@1.22.0":
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-zipkin/-/exporter-zipkin-1.22.0.tgz#dd81ca82a8933d106a3a980623d2f6e34494e77c"
+  integrity sha512-XcFs6rGvcTz0qW5uY7JZDYD0yNEXdekXAb6sFtnZgY/cHY6BQ09HMzOjv9SX+iaXplRDcHr1Gta7VQKM1XXM6g==
+  dependencies:
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/resources" "1.22.0"
+    "@opentelemetry/sdk-trace-base" "1.22.0"
+    "@opentelemetry/semantic-conventions" "1.22.0"
+
+"@opentelemetry/instrumentation-amqplib@^0.35.0":
+  version "0.35.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-amqplib/-/instrumentation-amqplib-0.35.0.tgz#d99486e1d292d9bd851719d198f62dbcc370db42"
+  integrity sha512-rb3hIWA7f0HXpXpfElnGC6CukRxy58/OJ6XYlTzpZJtNJPao7BuobZjkQEscaRYhUzgi7X7R1aKkIUOTV5JFrg==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-aws-lambda@^0.37.1":
-  version "0.37.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-aws-lambda/-/instrumentation-aws-lambda-0.37.1.tgz#991b747259536f1486c6f9367a0d2577192e77d1"
-  integrity sha512-tIz6SnvKXEjRId0yXcYNJL8CX5uY4Ou3yIkBeb1WSADLjNCp0NW1VaUM2pm8ksW3Nr3/0PY9S5T2yUBVr3yBIg==
+"@opentelemetry/instrumentation-aws-lambda@^0.39.0":
+  version "0.39.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-aws-lambda/-/instrumentation-aws-lambda-0.39.0.tgz#d022e29272c43f8e58e044e8286c553836a8af86"
+  integrity sha512-D+oG/hIBDdwCNq7Y6BEuddjcwDVD0C8NhBE7A85mRZ9RLG0bKoWrhIdVvbpqEoa0U5AWe9Y98RX4itNg7WTy4w==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/propagator-aws-xray" "^1.3.1"
     "@opentelemetry/resources" "^1.8.0"
     "@opentelemetry/semantic-conventions" "^1.0.0"
     "@types/aws-lambda" "8.10.122"
 
-"@opentelemetry/instrumentation-aws-sdk@^0.36.1":
-  version "0.36.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-aws-sdk/-/instrumentation-aws-sdk-0.36.1.tgz#e29dc3b8f00182cf200b8d787662d67969a21128"
-  integrity sha512-OpWI7erB1f3ncaLqyqhXrrR4bF2rK4la0z63WvX4SRlFBxOpLnVKj0RLdEbxnp7i+0zfEeC+Z4Sqt99MkKcDJA==
+"@opentelemetry/instrumentation-aws-sdk@^0.39.1":
+  version "0.39.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-aws-sdk/-/instrumentation-aws-sdk-0.39.1.tgz#fb65f7e5db18343ef9c850fa5c6a65267af557b6"
+  integrity sha512-QnvIMVpzRYqQHSXydGUksbhBjPbMyHSUBwi6ocN7gEXoI711+tIY3R1cfRutl0u3M67A/fAvPI3IgACfJaFORg==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.44.0"
-    "@opentelemetry/propagation-utils" "^0.30.2"
+    "@opentelemetry/instrumentation" "^0.49.1"
+    "@opentelemetry/propagation-utils" "^0.30.7"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-bunyan@^0.32.2":
-  version "0.32.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-bunyan/-/instrumentation-bunyan-0.32.2.tgz#24d2b1e574f71182a8a2286fb15cbf89bcca03cf"
-  integrity sha512-/sLChixYxFas7c5SbLLGUq2yKmU8c58IPlYNNqRSiT0epouqeBjxNUwQeizXl6Ba5+T/Yq7cwCVjh72CRb3tlA==
+"@opentelemetry/instrumentation-bunyan@^0.36.0":
+  version "0.36.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-bunyan/-/instrumentation-bunyan-0.36.0.tgz#89364e94b56351ed5f7ed5d77bcd21bfc863abcd"
+  integrity sha512-sHD5BSiqSrgWow7VmugEFzV8vGdsz5m+w1v9tK6YwRzuAD7vbo57chluq+UBzIqStoCH+0yOzRzSALH7hrfffg==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/api-logs" "^0.49.1"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@types/bunyan" "1.8.9"
 
-"@opentelemetry/instrumentation-cassandra-driver@^0.33.2":
-  version "0.33.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-cassandra-driver/-/instrumentation-cassandra-driver-0.33.2.tgz#848566fe2c6602408a733ed254d62f272499babb"
-  integrity sha512-0tgIdRJk6tw8PIuRKM/pSQRwF1YGEaG+KxfT09Fxw0DBaxyoTgxgNzOHiYLx8zmoCzGTaLd79tHlrYWZRfXEGQ==
+"@opentelemetry/instrumentation-cassandra-driver@^0.36.0":
+  version "0.36.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-cassandra-driver/-/instrumentation-cassandra-driver-0.36.0.tgz#fc6bf191e4c54457c585a090e0f4f6922fc286df"
+  integrity sha512-gMfxzryOIP/mvSLXBJp/QxSr2NvS+cC1dkIXn+aSOzYoU1U3apeF3nAyuikmY9dRCQDV7wHPslqbi+pCmd4pAQ==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-connect@^0.32.2":
-  version "0.32.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-connect/-/instrumentation-connect-0.32.2.tgz#c81cacba090bca62c841b6536a7c05bb37b340a7"
-  integrity sha512-wNbExeTGoDTvMfraByTy7GaX+6Dc5DmQ49lZoWO5EBmrpsKBaL8l9XYCPNKOa3dEp28d9oJWyx+ixHQ2OhDLcA==
+"@opentelemetry/instrumentation-connect@^0.34.0":
+  version "0.34.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-connect/-/instrumentation-connect-0.34.0.tgz#2bee8a1105924ec94dd2b050f0d381705393edcb"
+  integrity sha512-PJO99nfyUp3JSoBMhwZsOQDm/XKfkb/QQ8YTsNX4ZJ28phoRcNLqe36mqIMp80DKmKAX4xkxCAyrSYtW8QqZxA==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
     "@types/connect" "3.4.36"
 
-"@opentelemetry/instrumentation-cucumber@^0.1.1":
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-cucumber/-/instrumentation-cucumber-0.1.1.tgz#4e16c7fc7b5bb5f9c2dd1290c1a19cc91b309c37"
-  integrity sha512-0yAymTJ84BlhMmE1tBs/PmA6MWpVMtjui+OwYxrYgF5rTTLu5QRcYe91KDDsSBDzaZ6MWtD/+Sgq5JWJysNfZQ==
+"@opentelemetry/instrumentation-cucumber@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-cucumber/-/instrumentation-cucumber-0.4.0.tgz#6cf7e131c173d20e637347320ae636a25984d607"
+  integrity sha512-n53QvozzgMS9imEclow2nBYJ/jtZlZqiKIqDUi2/g0nDi08F555JhDS03d/Z+4NJxbu7bDLAg12giCV9KZN/Jw==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-dataloader@^0.5.2":
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-dataloader/-/instrumentation-dataloader-0.5.2.tgz#c6807afd7115e6e038cc6e54aac225934d9236b6"
-  integrity sha512-OYzh714M8szDayFP21eSGUZqQQjgLr7d1skjtbhzT4TIBYe2X7EpPM+4Rmkef+eZsBkCmUk/ecfwAQC+nfAJGg==
+"@opentelemetry/instrumentation-dataloader@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-dataloader/-/instrumentation-dataloader-0.7.0.tgz#8461132ed57231d87f5174753a774bf93727759a"
+  integrity sha512-sIaevxATJV5YaZzBTTcTaDEnI+/1vxYs+lVk1honnvrEAaP0FA9C/cFrQEN0kP2BDHkHRE/t6y5lGUqusi/h3A==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
 
-"@opentelemetry/instrumentation-dns@^0.32.3":
-  version "0.32.3"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-dns/-/instrumentation-dns-0.32.3.tgz#62a31fa0201fbe83d5e3277e72bae6c7247d56ee"
-  integrity sha512-bBZW58MhfoIVCxKSeJexkbt1iclf0mgReJzKtldbU+pvD4OwSNLYmQ20OE+3YUKEX442CrjXI92Yg6ZF+EqKJQ==
+"@opentelemetry/instrumentation-dns@^0.34.0":
+  version "0.34.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-dns/-/instrumentation-dns-0.34.0.tgz#242992b76976a7287cfef2039c3b6360a05e7e87"
+  integrity sha512-3tmXdvrzHQ7S3v82Cm36PTYLtgg2+hVm00K1xB3uzP08GEo9w/F8DW4me9z6rDroVGiLIg621RZ6dzjBcmmFCg==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
     semver "^7.5.4"
 
-"@opentelemetry/instrumentation-express@^0.33.2":
-  version "0.33.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-express/-/instrumentation-express-0.33.2.tgz#e5bd14be5814e24b257cd093220d32d5e9261c5a"
-  integrity sha512-FR05iNosZL42haYang6vpmcuLfXLngJs/0gAgqXk8vwqGGwilOFak1PjoRdO4PAoso0FI+3zhV3Tz7jyDOmSyA==
+"@opentelemetry/instrumentation-express@^0.36.1":
+  version "0.36.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-express/-/instrumentation-express-0.36.1.tgz#1a5a3b976e0a3283649cedcbd8ad94f8da20206d"
+  integrity sha512-ltIE4kIMa+83QjW/p7oe7XCESF29w3FQ9/T1VgShdX7fzm56K2a0xfEX1vF8lnHRGERYxIWX9D086C6gJOjVGA==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
-    "@types/express" "4.17.18"
 
-"@opentelemetry/instrumentation-fastify@^0.32.3":
-  version "0.32.3"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-fastify/-/instrumentation-fastify-0.32.3.tgz#2c0640c986018d1a41dfff3d9c3bfe3b5b1cf62d"
-  integrity sha512-vRFVoEJXcu6nNpJ61H5syDb84PirOd4b3u8yl8Bcorrr6firGYBQH4pEIVB4PkQWlmi3sLOifqS3VAO2VRloEQ==
+"@opentelemetry/instrumentation-fastify@^0.34.0":
+  version "0.34.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-fastify/-/instrumentation-fastify-0.34.0.tgz#d008ce1e2b8d58acdfc5e9586a111df41db57ed9"
+  integrity sha512-2Qu66XBkfJ8tr6H+RHBTyw/EX73N9U7pvNa49aonDnT9/mK58k7AKOscpRnKXOvHqc2YIdEPRcBIWxhksPFZVA==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-fs@^0.8.2":
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-fs/-/instrumentation-fs-0.8.2.tgz#32ce79fc1afd415131318730b4ea3710ad56c9cf"
-  integrity sha512-LTIBkttNoycbo9EVgegnSCXU0V7mu3X7EzJNmceiaibMqcxZ6G3/ZE5uRIUVkqY+FTWOTXY5a7dJ9OTsSrMjag==
+"@opentelemetry/instrumentation-fs@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-fs/-/instrumentation-fs-0.10.0.tgz#1b9d04aa4b09c0f178baa9ad183a466e606492bc"
+  integrity sha512-XtMoNINVsIQTQHjtxe7A0Lng96wxA5DSD5CYVVvpquG6HJRdZ4xNe9DTU03YtoEFqlN9qTfvGb/6ILzhKhiG8g==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-generic-pool@^0.32.3":
-  version "0.32.3"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-generic-pool/-/instrumentation-generic-pool-0.32.3.tgz#4a5055927d1fac776eccf4204218086e4c070458"
-  integrity sha512-pJmmyKQzeROBtl0W+Gv1BHeVXixq8xdXtPy2IokEj33/sr++RfElixWMXRkar7suBkj9/c09a4fOj3fUrJJaYQ==
+"@opentelemetry/instrumentation-generic-pool@^0.34.0":
+  version "0.34.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-generic-pool/-/instrumentation-generic-pool-0.34.0.tgz#8d671c8d3a4b0987ab71367b15e07b45985c8edb"
+  integrity sha512-jdI7tfVVwZJuTu4j2kAvJtx4wlEQKIXSZnZG4RdqRHc56KqQQDuVTBLvUgmDXvnSVclH9ayf4oaAV08R9fICtw==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-graphql@^0.35.2":
-  version "0.35.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-graphql/-/instrumentation-graphql-0.35.2.tgz#67b0c173cff1191cfa66aa26f67c6752c365edf2"
-  integrity sha512-lJv7BbHFK0ExwogdQMtVHfnWhCBMDQEz8KYvhShXfRPiSStU5aVwa3TmT0O00KiJFpATSKJNZMv1iZNHbF6z1g==
+"@opentelemetry/instrumentation-graphql@^0.38.1":
+  version "0.38.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-graphql/-/instrumentation-graphql-0.38.1.tgz#4c1c68de36fb5b5356c32d0ad509858348bd41f0"
+  integrity sha512-mSt4ztn3EVlLtZJ+tDEqq5GUEYdY8cbTT9SeVJFmXSfdSQkPZn0ovo/dRe6dUcplM60gg4w+llw8SZuQN0iZfQ==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
 
-"@opentelemetry/instrumentation-grpc@^0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-grpc/-/instrumentation-grpc-0.44.0.tgz#5305f015cfb58a413476620ebc9a189691dc6355"
-  integrity sha512-ddj0cmC9mdyOTF2dieslRWsXvCeamGM3KGpYyFwdXBKwPnVCD5Y8zSCSplqIgqIU7B8avPHaHlPU9Li2OxMQjw==
+"@opentelemetry/instrumentation-grpc@^0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-grpc/-/instrumentation-grpc-0.49.1.tgz#0e84daec5eeec54e2baf9b65df4b6072415e7d02"
+  integrity sha512-f8mQjFi5/PiP4SK3VDU1/3sUUgs6exMtBgcnNycgCKgN40htiPT+MuDRwdRnRMNI/4vNQ7p1/5r4Q5oN0GuRBw==
   dependencies:
-    "@opentelemetry/instrumentation" "0.44.0"
-    "@opentelemetry/semantic-conventions" "1.17.1"
+    "@opentelemetry/instrumentation" "0.49.1"
+    "@opentelemetry/semantic-conventions" "1.22.0"
 
-"@opentelemetry/instrumentation-hapi@^0.33.1":
-  version "0.33.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-hapi/-/instrumentation-hapi-0.33.1.tgz#9327f15a0d075153f61d338400b3db618dd3902e"
-  integrity sha512-8gwPrIgppbj/prCTK31mGmcBvYESE5J2El6badbCvcUHg6ZSA/i8zo80NrJ6812imtD06Dvm6kfnK5UzlC+smQ==
+"@opentelemetry/instrumentation-hapi@^0.35.0":
+  version "0.35.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-hapi/-/instrumentation-hapi-0.35.0.tgz#b3e8a634082db1e5fd1916676e82488644c43b24"
+  integrity sha512-j7q99aTLHfjNKW94qJnEaDatgz+q2psTKs7lxZO4QHRnoDltDk39a44/+AkI1qBJNw5xyLjrApqkglfbWJ2abg==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
     "@types/hapi__hapi" "20.0.13"
 
-"@opentelemetry/instrumentation-http@^0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-http/-/instrumentation-http-0.44.0.tgz#5a3e4b91073f737f054fe42ef591c39c5b3e6394"
-  integrity sha512-Nlvj3Y2n9q6uIcQq9f33HbcB4Dr62erSwYA37+vkorYnzI2j9PhxKitocRTZnbYsrymYmQJW9mdq/IAfbtVnNg==
+"@opentelemetry/instrumentation-http@^0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-http/-/instrumentation-http-0.49.1.tgz#0dad96347299742d85d32f26d5dccc0d4ae8c416"
+  integrity sha512-Yib5zrW2s0V8wTeUK/B3ZtpyP4ldgXj9L3Ws/axXrW1dW0/mEFKifK50MxMQK9g5NNJQS9dWH7rvcEGZdWdQDA==
   dependencies:
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/instrumentation" "0.44.0"
-    "@opentelemetry/semantic-conventions" "1.17.1"
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/instrumentation" "0.49.1"
+    "@opentelemetry/semantic-conventions" "1.22.0"
     semver "^7.5.2"
 
-"@opentelemetry/instrumentation-ioredis@^0.35.2":
-  version "0.35.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-ioredis/-/instrumentation-ioredis-0.35.2.tgz#4873f2e69fa337d9ce010a03548d21f6d210c258"
-  integrity sha512-D+KODK3ZzS9Be6zAzcoOyVd4Taf87CQ34jAX+FgrjtRlCxTuY6+p1eFhWNHWYS0EOcmdOcFcXxhszwp3/K1B4A==
+"@opentelemetry/instrumentation-ioredis@^0.38.0":
+  version "0.38.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-ioredis/-/instrumentation-ioredis-0.38.0.tgz#0b48a478c7f6a7c2c663a1dd27d481ae800b8bfa"
+  integrity sha512-c9nQFhRjFAtpInTks7z5v9CiOCiR8U9GbIhIv0TLEJ/r0wqdKNLfLZzCrr9XQ9WasxeOmziLlPFhpRBAd9Q4oA==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/redis-common" "^0.36.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
     "@types/ioredis4" "npm:@types/ioredis@^4.28.10"
 
-"@opentelemetry/instrumentation-knex@^0.32.2":
-  version "0.32.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-knex/-/instrumentation-knex-0.32.2.tgz#f85aea7dc077c2453bd30d2c7baf9422e63fb001"
-  integrity sha512-mEapkK4efIsCIGyuLcPpzA+dfPfw7w/kzS0zpm0Zm+tw1zjEGYoVubE0HzjmmexE4TOL6PzBSvF5FXOUXYH9XQ==
+"@opentelemetry/instrumentation-knex@^0.34.0":
+  version "0.34.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-knex/-/instrumentation-knex-0.34.0.tgz#4c733e3c5b65f96b9958f874c9cf5c591a42da86"
+  integrity sha512-6kZOEvNJOylTQunU5zSSi4iTuCkwIL9nwFnZg7719p61u3d6Qj3X4xi9su46VE3M0dH7vEoxUW+nb/0ilm+aZg==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-koa@^0.36.1":
-  version "0.36.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-koa/-/instrumentation-koa-0.36.1.tgz#08186ac7759bcccf13e789445b6f16646c9a2e3f"
-  integrity sha512-wMbDk8qdU9MuOdz5GkHxxNCKPpiAu3RAU6Gf7Gj2ZmnDhxn1mCinaDm3Y2XyniRDzQu4+lFQszYTEdg84XcFYg==
+"@opentelemetry/instrumentation-koa@^0.38.0":
+  version "0.38.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-koa/-/instrumentation-koa-0.38.0.tgz#d639614d0fca073e7ea427820a047d39f14be59f"
+  integrity sha512-lQujF4I3wdcrOF14miCV2pC72H+OJKb2LrrmTvTDAhELQDN/95v0doWgT9aHybUGkaAeB3QG4d09sved548TlA==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
-    "@types/koa" "2.13.9"
-    "@types/koa__router" "12.0.1"
+    "@types/koa" "2.14.0"
+    "@types/koa__router" "12.0.3"
 
-"@opentelemetry/instrumentation-lru-memoizer@^0.33.2":
-  version "0.33.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-lru-memoizer/-/instrumentation-lru-memoizer-0.33.2.tgz#355bd161aa37a0aafb98f9abc1d998017c7c98e7"
-  integrity sha512-+IUW0QaB1mHrhXSMJfGgRVal0RgqW6CJ+J9uZJHhcQc2bCNnM2V2N4/pyDL2F7/6gb8bS0ku7dc8PF6LGlGCng==
+"@opentelemetry/instrumentation-lru-memoizer@^0.35.0":
+  version "0.35.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-lru-memoizer/-/instrumentation-lru-memoizer-0.35.0.tgz#aed567cbfebee843c4d24e712373cbde080d2c5e"
+  integrity sha512-wCXe+iCF7JweMgY3blLM2Y1G0GSwLEeSA61z/y1UwzvBLEEXt7vL6qOl2mkNcUL9ZbLDS+EABatBH+vFO6DV5Q==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
 
-"@opentelemetry/instrumentation-memcached@^0.32.2":
-  version "0.32.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-memcached/-/instrumentation-memcached-0.32.2.tgz#c90b0436f8c109e097255e2bc334e30f0661f1b9"
-  integrity sha512-g3BsNXvxQr1Vz4ZqIboJK2QOow+t9bNdn8NXyaqI1uZFxVhaIYQJmK0Wt76ueHJ48SVzC1gbqNsGFIak5KhQEg==
+"@opentelemetry/instrumentation-memcached@^0.34.0":
+  version "0.34.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-memcached/-/instrumentation-memcached-0.34.0.tgz#2c02d277b2a322ad972698f2aadb9f0e34a05eee"
+  integrity sha512-RleFfaag3Evg4pTzHwDBwo1KiFgnCtiT4V6MQRRHadytNGdpcL+Ynz32ydDdiOXeadt7xpRI7HSvBy0quGTXSw==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
     "@types/memcached" "^2.2.6"
 
-"@opentelemetry/instrumentation-mongodb@^0.37.1":
-  version "0.37.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-mongodb/-/instrumentation-mongodb-0.37.1.tgz#5957565a74a4fe39fb72ab29f3b72a20223ef3df"
-  integrity sha512-UE+5B/MDfB5MUlJfjj8uo/fMnJPpqeUesJZ/loAWuCLCTDDyEJM7wnAvtH+2c4QoukkkIT1lDe5q9aiXwLEr5g==
+"@opentelemetry/instrumentation-mongodb@^0.41.0":
+  version "0.41.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-mongodb/-/instrumentation-mongodb-0.41.0.tgz#71a7328d6609c34e936f6b468a5ac8237e8db170"
+  integrity sha512-DlSH0oyEuTW5gprCUppb0Qe3pK3cpUUFW5eTmayWNyICI1LFunwtcrULTNv6UiThD/V5ykAf/GGGEa7KFAmkog==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/sdk-metrics" "^1.9.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-mongoose@^0.33.2":
-  version "0.33.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-mongoose/-/instrumentation-mongoose-0.33.2.tgz#99f235df66009e0b73953a58f3f6b9f28e6a31b1"
-  integrity sha512-JXhhn8vkGKbev6aBPkQ6dL5rDImQfucrub8mU7dknPPpCL850fSQ2qt2qLvyDXfawF5my6KWW0fkKJCeRA+ECw==
+"@opentelemetry/instrumentation-mongoose@^0.36.0":
+  version "0.36.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-mongoose/-/instrumentation-mongoose-0.36.0.tgz#ecc7b9c04fb35f9855274311dc2dd5415a6527d3"
+  integrity sha512-UelQ8dLQRLTdck3tPJdZ17b+Hk9usLf1cY2ou5THAaZpulUdpg62Q9Hx2RHRU71Rp2/YMDk25og7GJhuWScfEA==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-mysql2@^0.34.2":
-  version "0.34.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-mysql2/-/instrumentation-mysql2-0.34.2.tgz#f59f03c3135a8b50bad9cb3d5b55403008a8d0ba"
-  integrity sha512-Ac/KAHHtTz087P7I6JapBs+ofNOM+RPTDGwSe1ddnTj0xTAO0F6ITmRC1firnMdzDidI/wI+vmgnWclCB81xKQ==
+"@opentelemetry/instrumentation-mysql2@^0.36.0":
+  version "0.36.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-mysql2/-/instrumentation-mysql2-0.36.0.tgz#74919a905f309f60b0aa35df62fe869bf692313b"
+  integrity sha512-F63lKcl/R+if2j5Vz66c2/SLXQEtLlFkWTmYb8NQSgmcCaEKjML4RRRjZISIT4IBwdpanJ2qmNuXVM6MYqhBXw==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
     "@opentelemetry/sql-common" "^0.40.0"
 
-"@opentelemetry/instrumentation-mysql@^0.34.2":
-  version "0.34.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-mysql/-/instrumentation-mysql-0.34.2.tgz#3372dc11010dce2f357a89a1e3f32359c4d34079"
-  integrity sha512-3OEhW1CB7b93PHIbQ5t8Aoj/dCqNWQBDBbyUXGy2zFbhEcJBVcLeBpy3w8VEjzNTfRC6cVwASuHRP0aLBIPNjQ==
+"@opentelemetry/instrumentation-mysql@^0.36.0":
+  version "0.36.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-mysql/-/instrumentation-mysql-0.36.0.tgz#35c47f4bebafe42994899929b34c8fb8e1e00cf3"
+  integrity sha512-2mt/032SLkiuddzMrq3YwM0bHksXRep69EzGRnBfF+bCbwYvKLpqmSFqJZ9T3yY/mBWj+tvdvc1+klXGrh2QnQ==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
     "@types/mysql" "2.15.22"
 
-"@opentelemetry/instrumentation-nestjs-core@^0.33.2":
-  version "0.33.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-nestjs-core/-/instrumentation-nestjs-core-0.33.2.tgz#fb87031097a96c761db0823c2eff8deba452abbf"
-  integrity sha512-jrX/355K+myc5V/EQFouqQzBfy5qj+SyVMHIKqVymOx/zWFCvz1p9ChNiPOKzl2il3o/P/aOqBUN/qnRaGowlw==
+"@opentelemetry/instrumentation-nestjs-core@^0.35.0":
+  version "0.35.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-nestjs-core/-/instrumentation-nestjs-core-0.35.0.tgz#c6a1136bae38a2a3fabfe65008d53b62f096a4a8"
+  integrity sha512-INKA7CIOteTSRVxP7SQaFby11AYU3uezI93xDaDRGY4TloXNVoyw5n6UmcVJU4yDn6xY2r7zZ2SVHvblUc21/g==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-net@^0.32.2":
-  version "0.32.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-net/-/instrumentation-net-0.32.2.tgz#bfc5d99d7e6805675079347d811e484d5e45eb83"
-  integrity sha512-dkm5tZ2NP4Pn3LLs8IfizEQfFBJ7qrqvwoHQA20Z4ZjjjfrPd1aHANCYGs0axh/VBT0IACdX6IZZq/0Lb3Ocfw==
+"@opentelemetry/instrumentation-net@^0.34.0":
+  version "0.34.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-net/-/instrumentation-net-0.34.0.tgz#3df4d30bbb473357b8dfd5ea92074151658ededf"
+  integrity sha512-gjybNOQQqbXmD1qVHNO2qBJI4V6p3QQ7xKg3pnC/x7wRdxn+siLQj7QIVxW85C3mymngoJJdRs6BwI3qPUfsPQ==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-pg@^0.36.2":
-  version "0.36.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-pg/-/instrumentation-pg-0.36.2.tgz#45947d19bbafabf5b350a76350ef4523deac13a5"
-  integrity sha512-KUjI8OGi7kicml2Sd/PR/M8otZoZEdPArMfhznS6OQKit+RxFo0p5x6RVeka/cLQlmoc3eeGBizDeZetssbHgw==
+"@opentelemetry/instrumentation-pg@^0.39.1":
+  version "0.39.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-pg/-/instrumentation-pg-0.39.1.tgz#77d7c2a1035290444155f8ccab28ad2d5bf76504"
+  integrity sha512-pX5ujDOyGpPcrZlzaD3LJzmyaSMMMKAP+ffTHJp9vasvZJr+LifCk53TMPVUafcXKV/xX/IIkvADO+67M1Z25g==
   dependencies:
-    "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
     "@opentelemetry/sql-common" "^0.40.0"
     "@types/pg" "8.6.1"
     "@types/pg-pool" "2.0.4"
 
-"@opentelemetry/instrumentation-pino@^0.34.2":
-  version "0.34.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-pino/-/instrumentation-pino-0.34.2.tgz#f0cd996935430e4750c8aa83d23d8f56523e0edd"
-  integrity sha512-gGGeM2sRSulAtV2nAPMrRBm+nenyrKO3kyrORN+q2V4S8hx+6yze35+QQkU5uWk6N5/s5Y9bxqPcaNUt3jwprw==
+"@opentelemetry/instrumentation-pino@^0.36.0":
+  version "0.36.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-pino/-/instrumentation-pino-0.36.0.tgz#70c7e30b5e9dac004cb62635bf677ae59fba1818"
+  integrity sha512-oEz+BJEYRBMAUu7MVJFJhhlsBuwLaUGjbJciKZRIeGX+fUtgcbQGV+a2Ris9jR3yFzWZrYg0aNBSCbGqvPCtMQ==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
 
-"@opentelemetry/instrumentation-redis-4@^0.35.3":
-  version "0.35.3"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-redis-4/-/instrumentation-redis-4-0.35.3.tgz#6862cb3542c22b151b38d259d13225e3f442bc26"
-  integrity sha512-fWMqJpEGLcE1Z76CTwhZPaFU7EGBZ/pNFKCLdHALddvud/9AxKbxLIn73QGh7sLU8MwhCBkTbuipj5UAy8g8TA==
+"@opentelemetry/instrumentation-redis-4@^0.37.0":
+  version "0.37.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-redis-4/-/instrumentation-redis-4-0.37.0.tgz#46d48f854323bf347002c30484bfd49bbe380252"
+  integrity sha512-WNO+HALvPPvjbh7UEEIuay0Z0d2mIfSCkBZbPRwZttDGX6LYGc2WnRgJh3TnYqjp7/y9IryWIbajAFIebj1OBA==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/redis-common" "^0.36.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-redis@^0.35.2":
-  version "0.35.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-redis/-/instrumentation-redis-0.35.2.tgz#1630f48ab90dc22c8bfd1ec3a7050bc9fea24b5b"
-  integrity sha512-KBwVMsoiMc2kAffnmG64rJDMEbmK3VT991s7kedipJsBT9jrcx4tXT/fdIwFk+helawXHbiI0ILlxzA8dVYz3g==
+"@opentelemetry/instrumentation-redis@^0.37.0":
+  version "0.37.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-redis/-/instrumentation-redis-0.37.0.tgz#f962d33e31d58106837ba6f1b17d6ff8033cbf5f"
+  integrity sha512-9G0T74kheu37k+UvyBnAcieB5iowxska3z2rhUcSTL8Cl0y/CvMn7sZ7txkUbXt0rdX6qeEUdMLmbsY2fPUM7Q==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/redis-common" "^0.36.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-restify@^0.34.1":
-  version "0.34.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-restify/-/instrumentation-restify-0.34.1.tgz#a9fe79f714a9f26801ceb06a9b6745e24ce91719"
-  integrity sha512-lQwEieqPAnpKcNtINzsApmtj9Odvhu6bW5fZvSldSF2pzLOUb5Z9ZDjPnYlZyoWpwqlL8FLc9/LJ1BD4lSaGdA==
+"@opentelemetry/instrumentation-restify@^0.36.0":
+  version "0.36.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-restify/-/instrumentation-restify-0.36.0.tgz#0b5d21bfaae048484073ad68c34857129f52c775"
+  integrity sha512-QbOh8HpnnRn4xxFXX77Gdww6M78yx7dRiIKR6+H3j5LH5u6sYckTXw3TGPSsXsaM4DQHy0fOw15sAcJoWkC+aQ==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-router@^0.33.2":
-  version "0.33.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-router/-/instrumentation-router-0.33.2.tgz#4914808c5baf1e47bc655649921de1e79ab1ab58"
-  integrity sha512-GNQMLkz24vc0ND/Su3/ytyAfVPtBYnbLbM2dscj8h3VHebUZPWcOGk/M6wsqDCpEbP5xUA56afEkWsbGzWtMxA==
+"@opentelemetry/instrumentation-router@^0.35.0":
+  version "0.35.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-router/-/instrumentation-router-0.35.0.tgz#7d4b252042c76a006687135d8bbaef3e3d0219f9"
+  integrity sha512-MdxGJuNTIy/2qDI8yow6cRBQ87m6O//VuHIlawe8v0x1NsTOSwS72xm+BzTuY9D0iMqiJUiTlE3dBs8DA91MTw==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-socket.io@^0.34.2":
-  version "0.34.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-socket.io/-/instrumentation-socket.io-0.34.2.tgz#a7f65a008fbd0af275c5934289238ef0955002b4"
-  integrity sha512-uway54Mx/MtZajA5jsq8TPhRpMK9QBTzjhyIdMGS2XV+gykL/JTFbeis6ewmRnLUAcBrmPcaxQnavEAkJ787AA==
+"@opentelemetry/instrumentation-socket.io@^0.37.0":
+  version "0.37.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-socket.io/-/instrumentation-socket.io-0.37.0.tgz#8b6c0fb51e57b966309900b346c06efb693adcca"
+  integrity sha512-aIztxmx/yis/goEndnoITrZvDDr1GdCtlsWo9ex7MhUIjqq5nJbTuyigf3GmU86XFFhSThxfQuJ9DpJyPxfBfA==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-tedious@^0.6.2":
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-tedious/-/instrumentation-tedious-0.6.2.tgz#fe08c0a2e3966bc9c2a47d6c24b53dc596592698"
-  integrity sha512-8/WwifQNuB/1bRWyqSCJPow/Gd6EubFpKbZJgOEIL1jk0Lk/ikpjI5zxqWbLIT2pUOi0Ihwvu5sTqgdY4oPz9Q==
+"@opentelemetry/instrumentation-tedious@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-tedious/-/instrumentation-tedious-0.8.0.tgz#dfd881d0ad5ac97d760fd62a41e7dfa5e1a87b42"
+  integrity sha512-BBRW8+Qm2PLNkVMynr3Q7L4xCAOCOs0J9BJIJ8ZGoatW42b2H4qhMhq35jfPDvEL5u5azxHDapmUVYrDJDjAfA==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
     "@types/tedious" "^4.0.10"
 
-"@opentelemetry/instrumentation-winston@^0.32.2":
-  version "0.32.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-winston/-/instrumentation-winston-0.32.2.tgz#3e10fabbf7ab5496fec3fc8bcfc0227a5ba0a5ca"
-  integrity sha512-6+BMhSWaGxgezwOUuMH389V16fMgwFNmXAwh8zk0mjYHmWpyLzoJ+QV8AQ9WZFBQQnkpbbxfiFdiyO+NCvwBCg==
+"@opentelemetry/instrumentation-winston@^0.35.0":
+  version "0.35.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-winston/-/instrumentation-winston-0.35.0.tgz#db8b20f6ef54c85b4eb891911573c5051192ea4a"
+  integrity sha512-ymcuA3S2flnLmH1GS0105H91iDLap8cizOCaLMCp7Xz7r4L+wFf1zfix9M+iSkxcPFshHRt8LFA/ELXw51nk0g==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
-
-"@opentelemetry/instrumentation@0.44.0", "@opentelemetry/instrumentation@^0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation/-/instrumentation-0.44.0.tgz#194f16fc96671575b6bd73d3fadffb5aa4497e67"
-  integrity sha512-B6OxJTRRCceAhhnPDBshyQO7K07/ltX3quOLu0icEvPK9QZ7r9P1y0RQX8O5DxB4vTv4URRkxkg+aFU/plNtQw==
-  dependencies:
-    "@types/shimmer" "^1.0.2"
-    import-in-the-middle "1.4.2"
-    require-in-the-middle "^7.1.1"
-    semver "^7.5.2"
-    shimmer "^1.2.1"
+    "@opentelemetry/instrumentation" "^0.49.1"
 
-"@opentelemetry/instrumentation@0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation/-/instrumentation-0.45.0.tgz#ad9c47b64b54c6e624409eb9fc2987873c28898f"
-  integrity sha512-U+69WBjG4olh6oyB6ZRdX6qwWeUul+Ulw9OwCA54Ph5yPTMYUUkB3O9OACEbN/Ls1suwpLjAN2DkLPrwkDy1Ww==
+"@opentelemetry/instrumentation@0.49.1", "@opentelemetry/instrumentation@^0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation/-/instrumentation-0.49.1.tgz#1b95e5f9448a96e7af97e03846772829439a9a91"
+  integrity sha512-0DLtWtaIppuNNRRllSD4bjU8ZIiLp1cDXvJEbp752/Zf+y3gaLNaoGRGIlX4UHhcsrmtL+P2qxi3Hodi8VuKiQ==
   dependencies:
+    "@opentelemetry/api-logs" "0.49.1"
     "@types/shimmer" "^1.0.2"
-    import-in-the-middle "1.4.2"
+    import-in-the-middle "1.7.1"
     require-in-the-middle "^7.1.1"
     semver "^7.5.2"
     shimmer "^1.2.1"
 
-"@opentelemetry/otlp-exporter-base@0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-exporter-base/-/otlp-exporter-base-0.44.0.tgz#10563cbe3ed89d7c8d422b513b819026f00ba038"
-  integrity sha512-DKQqRrfVMe96aSLZiCgIesLcMLfnWH8d4bTpLB1JbU+SAQJ7nVCAfS9U36mjFCVhvNDD7gwfCNrxqFMCHq6FUw==
-  dependencies:
-    "@opentelemetry/core" "1.17.1"
-
-"@opentelemetry/otlp-exporter-base@0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-exporter-base/-/otlp-exporter-base-0.45.0.tgz#7cd0c88d5b2253dd91c6f1a5e2cbfd778de83d2f"
-  integrity sha512-K+zr7juzDCyokUfneI2ufr7HAUL+YaF1bQ5at+SkCIt9LGnIGMDJSAq/LBbd/DBl4Rlfi2dwcjzP7/+ycN5a9Q==
-  dependencies:
-    "@opentelemetry/core" "1.18.0"
-
-"@opentelemetry/otlp-exporter-base@0.45.1":
-  version "0.45.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-exporter-base/-/otlp-exporter-base-0.45.1.tgz#7170ec200152f89d74b2cf82fcf21fd32deebf03"
-  integrity sha512-Jvd6x8EwWGKEPWF4tkP4LpTPXiIkkafMNMvMJUfJd5DyNAftL1vAz+48jmi3URL2LMPkGryrvWPz8Tdu917gQw==
-  dependencies:
-    "@opentelemetry/core" "1.18.1"
-
-"@opentelemetry/otlp-grpc-exporter-base@0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-grpc-exporter-base/-/otlp-grpc-exporter-base-0.44.0.tgz#bbdd2bce685a2ac27234a76dd795e051dcd11d02"
-  integrity sha512-RsYW2+ikNDDXM9rY4gCA3lJOu53o4CzCsUJ9DV6r78k/Y0ckWw2GM7R4I6yOmMe4jilxEaHorI3oTJFLD8KYug==
+"@opentelemetry/otlp-exporter-base@0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-exporter-base/-/otlp-exporter-base-0.49.1.tgz#a99d527e5fd7f02f3cb50f27a97a0ba6d72af2e9"
+  integrity sha512-z6sHliPqDgJU45kQatAettY9/eVF58qVPaTuejw9YWfSRqid9pXPYeegDCSdyS47KAUgAtm+nC28K3pfF27HWg==
   dependencies:
-    "@grpc/grpc-js" "^1.7.1"
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/otlp-exporter-base" "0.44.0"
-    protobufjs "^7.2.3"
+    "@opentelemetry/core" "1.22.0"
 
-"@opentelemetry/otlp-grpc-exporter-base@0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-grpc-exporter-base/-/otlp-grpc-exporter-base-0.45.0.tgz#014bfb2db3026909a30b9faf01587fda717780c9"
-  integrity sha512-RuOdGafot3s4nLbkT8iLuPiiZ+CrdvCJDh6gstgGlFYUVbxWSyG+7bb55UB7itLm8reQ96lzy4GL51qu9lOM/A==
+"@opentelemetry/otlp-grpc-exporter-base@0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-grpc-exporter-base/-/otlp-grpc-exporter-base-0.49.1.tgz#57361ce173bcab701a8c85237acdde2fa9fce6c1"
+  integrity sha512-DNDNUWmOqtKTFJAyOyHHKotVox0NQ/09ETX8fUOeEtyNVHoGekAVtBbvIA3AtK+JflP7LC0PTjlLfruPM3Wy6w==
   dependencies:
     "@grpc/grpc-js" "^1.7.1"
-    "@opentelemetry/core" "1.18.0"
-    "@opentelemetry/otlp-exporter-base" "0.45.0"
-    protobufjs "^7.2.3"
-
-"@opentelemetry/otlp-proto-exporter-base@0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-proto-exporter-base/-/otlp-proto-exporter-base-0.44.0.tgz#10caa329223a0b1f19c29d950bce6576aa84fe5c"
-  integrity sha512-vgQvWEkXNk8X4BW93+j054TZBVs1ryguXQjeoLeHV/dzopdGuAypI0xC5OtSr+eRftuyPqPl2DVp4tjRq4z4dw==
-  dependencies:
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/otlp-exporter-base" "0.44.0"
-    protobufjs "^7.2.3"
-
-"@opentelemetry/otlp-proto-exporter-base@0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-proto-exporter-base/-/otlp-proto-exporter-base-0.45.0.tgz#bf268f411a7800489d240a31dfeb6a03674c3900"
-  integrity sha512-rHcQvhRHYGnappZ/m277PPvjYINfQQcd/JCfgC/oPOjA/c9MIn2J0TIBqovPHYTIoQeWUnnv046prT6/KKJDaA==
-  dependencies:
-    "@opentelemetry/core" "1.18.0"
-    "@opentelemetry/otlp-exporter-base" "0.45.0"
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/otlp-exporter-base" "0.49.1"
     protobufjs "^7.2.3"
 
-"@opentelemetry/otlp-proto-exporter-base@0.45.1":
-  version "0.45.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-proto-exporter-base/-/otlp-proto-exporter-base-0.45.1.tgz#791129f256f6c3ae298e0cd96020eaa65d7a0689"
-  integrity sha512-jtDkly6EW8TZHpbPpwJV9YT5PgbtL5B2UU8zcyGDiLT1wkIAYjFJZ1AqWmROIpydu8ohMq0dRwe4u0izNMdHpA==
+"@opentelemetry/otlp-proto-exporter-base@0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-proto-exporter-base/-/otlp-proto-exporter-base-0.49.1.tgz#ad1f979f94c5a2d114a72dd4813dfc6635b9f4b1"
+  integrity sha512-x1qB4EUC7KikUl2iNuxCkV8yRzrSXSyj4itfpIO674H7dhI7Zv37SFaOJTDN+8Z/F50gF2ISFH9CWQ4KCtGm2A==
   dependencies:
-    "@opentelemetry/core" "1.18.1"
-    "@opentelemetry/otlp-exporter-base" "0.45.1"
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/otlp-exporter-base" "0.49.1"
     protobufjs "^7.2.3"
 
-"@opentelemetry/otlp-transformer@0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-transformer/-/otlp-transformer-0.44.0.tgz#4f7eb2f6e4624b2110dfb3a5dda8cfebbd80225a"
-  integrity sha512-1/KC+aHM1oGEsXyNy7QoxpvErxGdzt26bg9VHyNb4TDILkUFdwrnywnxPc6lXZ6h/8T8Mt718UWOKjNHC514kQ==
+"@opentelemetry/otlp-transformer@0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-transformer/-/otlp-transformer-0.49.1.tgz#ede99939c85ae246f211ca0051cdac802cdcdb3a"
+  integrity sha512-Z+koA4wp9L9e3jkFacyXTGphSWTbOKjwwXMpb0CxNb0kjTHGUxhYRN8GnkLFsFo5NbZPjP07hwAqeEG/uCratQ==
   dependencies:
-    "@opentelemetry/api-logs" "0.44.0"
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/resources" "1.17.1"
-    "@opentelemetry/sdk-logs" "0.44.0"
-    "@opentelemetry/sdk-metrics" "1.17.1"
-    "@opentelemetry/sdk-trace-base" "1.17.1"
+    "@opentelemetry/api-logs" "0.49.1"
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/resources" "1.22.0"
+    "@opentelemetry/sdk-logs" "0.49.1"
+    "@opentelemetry/sdk-metrics" "1.22.0"
+    "@opentelemetry/sdk-trace-base" "1.22.0"
 
-"@opentelemetry/otlp-transformer@0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-transformer/-/otlp-transformer-0.45.0.tgz#8c0563eaf15a7390d4f3349d067ee29cc31bd25f"
-  integrity sha512-8nlKKDWB2Sp6GI+wZLlDhMl8leSJho1T59zFddyH3H9Mvqg3dycQnSrIzUVY7X0IiZaxAtZG2VJxMmuXwo49eg==
-  dependencies:
-    "@opentelemetry/api-logs" "0.45.0"
-    "@opentelemetry/core" "1.18.0"
-    "@opentelemetry/resources" "1.18.0"
-    "@opentelemetry/sdk-logs" "0.45.0"
-    "@opentelemetry/sdk-metrics" "1.18.0"
-    "@opentelemetry/sdk-trace-base" "1.18.0"
-
-"@opentelemetry/otlp-transformer@0.45.1":
-  version "0.45.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-transformer/-/otlp-transformer-0.45.1.tgz#8f6590b93f177510983bea3055e5a3f3d30faad2"
-  integrity sha512-FhIHgfC0b0XtoBrS5ISfva939yWffNl47ypXR8I7Ru+dunlySpmf2TLocKHYLHGcWiuoeSNO5O4dZCmSKOtpXw==
-  dependencies:
-    "@opentelemetry/api-logs" "0.45.1"
-    "@opentelemetry/core" "1.18.1"
-    "@opentelemetry/resources" "1.18.1"
-    "@opentelemetry/sdk-logs" "0.45.1"
-    "@opentelemetry/sdk-metrics" "1.18.1"
-    "@opentelemetry/sdk-trace-base" "1.18.1"
-
-"@opentelemetry/propagation-utils@^0.30.2":
-  version "0.30.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/propagation-utils/-/propagation-utils-0.30.2.tgz#9a1d2491af3251d6dcd75ee6e90a510142af1f12"
-  integrity sha512-HMn33DQbehFvPW7PBzIajkRuoCGaSaa/vb8IyaXtRsX4aY8K9XqOiRwunN4bPo7rnh+KnRdKx0tO0In1zvdQ4w==
+"@opentelemetry/propagation-utils@^0.30.7":
+  version "0.30.11"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/propagation-utils/-/propagation-utils-0.30.11.tgz#0a1c51cb4a2724fa41c41be07024bbb6f0aade46"
+  integrity sha512-rY4L/2LWNk5p/22zdunpqVmgz6uN419DsRTw5KFMa6u21tWhXS8devlMy4h8m8nnS20wM7r6yYweCNNKjgLYJw==
 
 "@opentelemetry/propagator-aws-xray@^1.3.1":
   version "1.3.1"
@@ -4342,83 +4985,61 @@
   dependencies:
     "@opentelemetry/core" "^1.0.0"
 
-"@opentelemetry/propagator-b3@1.17.1":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/propagator-b3/-/propagator-b3-1.17.1.tgz#65dbddf3763db82632ddd7ad1735e597ab7b2dc4"
-  integrity sha512-XEbXYb81AM3ayJLlbJqITPIgKBQCuby45ZHiB9mchnmQOffh6ZJOmXONdtZAV7TWzmzwvAd28vGSUk57Aw/5ZA==
+"@opentelemetry/propagator-b3@1.22.0":
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/propagator-b3/-/propagator-b3-1.22.0.tgz#f249ce985556b9229680a2e17558ab5714325f7b"
+  integrity sha512-qBItJm9ygg/jCB5rmivyGz1qmKZPsL/sX715JqPMFgq++Idm0x+N9sLQvWFHFt2+ZINnCSojw7FVBgFW6izcXA==
   dependencies:
-    "@opentelemetry/core" "1.17.1"
+    "@opentelemetry/core" "1.22.0"
 
-"@opentelemetry/propagator-b3@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/propagator-b3/-/propagator-b3-1.18.0.tgz#20939e675c05b08539c5fcb09844dfbc1c42f66c"
-  integrity sha512-Ebja96k7n0ll4XJZ51oEYPMqLf1pvJwfeEpUEpMcEwKt0F/tx/JfHBpisNke5/fCpTYgWWN22jviI53HJ4HyDg==
+"@opentelemetry/propagator-jaeger@1.22.0":
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/propagator-jaeger/-/propagator-jaeger-1.22.0.tgz#a8b34e97e1563e289887ba0071b4123121d22a31"
+  integrity sha512-pMLgst3QIwrUfepraH5WG7xfpJ8J3CrPKrtINK0t7kBkuu96rn+HDYQ8kt3+0FXvrZI8YJE77MCQwnJWXIrgpA==
   dependencies:
-    "@opentelemetry/core" "1.18.0"
-
-"@opentelemetry/propagator-jaeger@1.17.1":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/propagator-jaeger/-/propagator-jaeger-1.17.1.tgz#31cc43045a059d1ed3651b9f21d0fd6db817b02f"
-  integrity sha512-p+P4lf2pbqd3YMfZO15QCGsDwR2m1ke2q5+dq6YBLa/q0qiC2eq4cD/qhYBBed5/X4PtdamaVGHGsp+u3GXHDA==
-  dependencies:
-    "@opentelemetry/core" "1.17.1"
-
-"@opentelemetry/propagator-jaeger@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/propagator-jaeger/-/propagator-jaeger-1.18.0.tgz#283187ebd011110bf6e5ee1691b17992397ff02a"
-  integrity sha512-9Zsx9KSNH/D07RgI9H/drr96r2+w6rdAejSPh7ZOjL7qNsMfoYuchqLL6avBk2aSuwKCfKOithsbA05aZRR2xQ==
-  dependencies:
-    "@opentelemetry/core" "1.18.0"
+    "@opentelemetry/core" "1.22.0"
 
 "@opentelemetry/redis-common@^0.36.1":
   version "0.36.1"
   resolved "https://registry.yarnpkg.com/@opentelemetry/redis-common/-/redis-common-0.36.1.tgz#79bca902603dd27862223a751be0f4bb0be54c2b"
   integrity sha512-YjfNEr7DK1Ymc5H0bzhmqVvMcCs+PUEUerzrpTFdHfZxj3HpnnjZTIFKx/gxiL/sajQ8dxycjlreoYTVYKBXlw==
 
-"@opentelemetry/resource-detector-alibaba-cloud@^0.28.2":
-  version "0.28.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/resource-detector-alibaba-cloud/-/resource-detector-alibaba-cloud-0.28.2.tgz#108a92ccef9220a11d4fe921b1039847913cd0e9"
-  integrity sha512-huG07F7Nu2gPTAkb4tSuA/KrNrJ8TfjmyOIPOL/CqXwZh5QD2876YvqM1tqh7gAhSPTSSpfH0ozxcQNmzzeo7g==
+"@opentelemetry/resource-detector-alibaba-cloud@^0.28.7":
+  version "0.28.10"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/resource-detector-alibaba-cloud/-/resource-detector-alibaba-cloud-0.28.10.tgz#6d4f262a5d91c7aa0b1bbf6da342b3330d1ed47d"
+  integrity sha512-TZv/1Y2QCL6sJ+X9SsPPBXe4786bc/Qsw0hQXFsNTbJzDTGGUmOAlSZ2qPiuqAd4ZheUYfD+QA20IvAjUz9Hhg==
   dependencies:
     "@opentelemetry/resources" "^1.0.0"
-    "@opentelemetry/semantic-conventions" "^1.0.0"
+    "@opentelemetry/semantic-conventions" "^1.22.0"
 
-"@opentelemetry/resource-detector-aws@^1.3.2":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/resource-detector-aws/-/resource-detector-aws-1.3.2.tgz#0e1cf985cf75e2325e93eb4ce4b708995766c73b"
-  integrity sha512-RaBOD3mV69ukI43FZwrnOywAJe7M4405/dqdFRHv65rDLmYMBEUOLdrhqDk8uKJwaHAob2jyDBDCv48RnTZi5g==
+"@opentelemetry/resource-detector-aws@^1.4.0":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/resource-detector-aws/-/resource-detector-aws-1.6.1.tgz#980e896c7b438e9dca7dc6c93af395127304d7b8"
+  integrity sha512-A/3lqx9xoew7sFi+AVUUVr6VgB7UJ5qqddkKR3gQk9hWLm1R7HUXVJG09cLcZ7DMNpX13DohPRGmHE/vp1vafw==
   dependencies:
     "@opentelemetry/core" "^1.0.0"
-    "@opentelemetry/resources" "^1.0.0"
-    "@opentelemetry/semantic-conventions" "^1.0.0"
+    "@opentelemetry/resources" "^1.10.0"
+    "@opentelemetry/semantic-conventions" "^1.27.0"
 
-"@opentelemetry/resource-detector-container@^0.3.2":
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/resource-detector-container/-/resource-detector-container-0.3.2.tgz#3d3121b83a1974c246ee940645e39465e57269b5"
-  integrity sha512-pJXm9RXtQSq6PzXpLFC44sG2VhB/BDd7CRxGLS4ytdweBfdl6h2pIDL4CDQQSBc278JXmfslEFQ9K/fT/piXZw==
+"@opentelemetry/resource-detector-container@^0.3.7":
+  version "0.3.11"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/resource-detector-container/-/resource-detector-container-0.3.11.tgz#c1038af850063e9bf1418d73b7024912da03fe5b"
+  integrity sha512-22ndMDakxX+nuhAYwqsciexV8/w26JozRUV0FN9kJiqSWtA1b5dCVtlp3J6JivG5t8kDN9UF5efatNnVbqRT9Q==
   dependencies:
     "@opentelemetry/resources" "^1.0.0"
-    "@opentelemetry/semantic-conventions" "^1.0.0"
+    "@opentelemetry/semantic-conventions" "^1.22.0"
 
-"@opentelemetry/resource-detector-gcp@^0.29.2":
-  version "0.29.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/resource-detector-gcp/-/resource-detector-gcp-0.29.2.tgz#f2c24e788ebae2f41e9acee0630674352f72798a"
-  integrity sha512-BdboAJA3RMRMs6wdGXMvyTCS/72S72Xs+QtdEqMeHViOoMgHidjQIkbj4cFlteUh5GrWM7aQeWgahd9vGZx3Pw==
+"@opentelemetry/resource-detector-gcp@^0.29.7":
+  version "0.29.11"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/resource-detector-gcp/-/resource-detector-gcp-0.29.11.tgz#2f8e1bc0c760742aad1a7ccc7c03fce021cdc4ea"
+  integrity sha512-07wJx4nyxD/c2z3n70OQOg8fmoO/baTsq8uU+f7tZaehRNQx76MPkRbV2L902N40Z21SPIG8biUZ30OXE9tOIg==
   dependencies:
     "@opentelemetry/core" "^1.0.0"
     "@opentelemetry/resources" "^1.0.0"
-    "@opentelemetry/semantic-conventions" "^1.0.0"
-    gcp-metadata "^5.0.0"
-
-"@opentelemetry/resources@1.17.1":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/resources/-/resources-1.17.1.tgz#932f70f58c0e03fb1d38f0cba12672fd70804d99"
-  integrity sha512-M2e5emqg5I7qRKqlzKx0ROkcPyF8PbcSaWEdsm72od9txP7Z/Pl8PDYOyu80xWvbHAWk5mDxOF6v3vNdifzclA==
-  dependencies:
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/semantic-conventions" "1.17.1"
+    "@opentelemetry/semantic-conventions" "^1.27.0"
+    gcp-metadata "^6.0.0"
 
-"@opentelemetry/resources@1.18.0", "@opentelemetry/resources@^1.0.0", "@opentelemetry/resources@^1.12.0", "@opentelemetry/resources@^1.18.0", "@opentelemetry/resources@^1.8.0":
+"@opentelemetry/resources@1.18.0", "@opentelemetry/resources@^1.0.0", "@opentelemetry/resources@^1.12.0", "@opentelemetry/resources@^1.8.0":
   version "1.18.0"
   resolved "https://registry.yarnpkg.com/@opentelemetry/resources/-/resources-1.18.0.tgz#49c02edfd3d16524ead448288e5ed3bb8fa11391"
   integrity sha512-QXdqtTQRl3fVAMu5PSxIev73iaukww/7fW4656pF607ZMAXueRHfdxOBIpGrTvfnv9mcKC3ZwGsIb366JZ2LSQ==
@@ -4426,48 +5047,48 @@
     "@opentelemetry/core" "1.18.0"
     "@opentelemetry/semantic-conventions" "1.18.0"
 
-"@opentelemetry/resources@1.18.1":
-  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/resources/-/resources-1.18.1.tgz#e27bdc4715bccc8cd4a72d4aca3995ad0a496fe7"
-  integrity sha512-JjbcQLYMttXcIabflLRuaw5oof5gToYV9fuXbcsoOeQ0BlbwUn6DAZi++PNsSz2jjPeASfDls10iaO/8BRIPRA==
+"@opentelemetry/resources@1.22.0":
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/resources/-/resources-1.22.0.tgz#5b597cdf9fb6e1cd22d7891bd8e72e487929a813"
+  integrity sha512-+vNeIFPH2hfcNL0AJk/ykJXoUCtR1YaDUZM+p3wZNU4Hq98gzq+7b43xbkXjadD9VhWIUQqEwXyY64q6msPj6A==
   dependencies:
-    "@opentelemetry/core" "1.18.1"
-    "@opentelemetry/semantic-conventions" "1.18.1"
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/semantic-conventions" "1.22.0"
 
-"@opentelemetry/sdk-logs@0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-logs/-/sdk-logs-0.44.0.tgz#a46e0a013432f266fb7ef16d703c968898ae89c5"
-  integrity sha512-UN3ofh9Jj54gIgrSXNRWAoaH6iPvrrjed5YAtqO9cW65U+5QPzk1Rv95vjAcY9VTrmMWvuqgEK1CYObG6Hu4OQ==
+"@opentelemetry/resources@1.27.0":
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/resources/-/resources-1.27.0.tgz#1f91c270eb95be32f3511e9e6624c1c0f993c4ac"
+  integrity sha512-jOwt2VJ/lUD5BLc+PMNymDrUCpm5PKi1E9oSVYAvz01U/VdndGmrtV3DU1pG4AwlYhJRHbHfOUIlpBeXCPw6QQ==
   dependencies:
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/resources" "1.17.1"
+    "@opentelemetry/core" "1.27.0"
+    "@opentelemetry/semantic-conventions" "1.27.0"
 
-"@opentelemetry/sdk-logs@0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-logs/-/sdk-logs-0.45.0.tgz#9b4505199917eaf88b5c0fcaff9d046abe839162"
-  integrity sha512-t9RA1hEa4NxYrL2VWL+f3EU8Gvdkv1aqPNmk27/vVHVfVFt2ym8hu4lqTf2hynWbzxmV1+bSMDq8Ar3LTrt0pA==
+"@opentelemetry/resources@^1.10.0":
+  version "1.26.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/resources/-/resources-1.26.0.tgz#da4c7366018bd8add1f3aa9c91c6ac59fd503cef"
+  integrity sha512-CPNYchBE7MBecCSVy0HKpUISEeJOniWqcHaAHpmasZ3j9o6V3AyBzhRc90jdmemq0HOxDr6ylhUbDhBqqPpeNw==
   dependencies:
-    "@opentelemetry/core" "1.18.0"
-    "@opentelemetry/resources" "1.18.0"
+    "@opentelemetry/core" "1.26.0"
+    "@opentelemetry/semantic-conventions" "1.27.0"
 
-"@opentelemetry/sdk-logs@0.45.1":
-  version "0.45.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-logs/-/sdk-logs-0.45.1.tgz#d59a99147ab15eb36757932517dfc9a10e1645e9"
-  integrity sha512-z0RRgW4LeKEKnhXS4F/HnqB6+7gsy63YK47F4XAJYHs4s1KKg8XnQ2RkbuL31i/a9nXkylttYtvsT50CGr487g==
+"@opentelemetry/sdk-logs@0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-logs/-/sdk-logs-0.49.1.tgz#dd30d1b05951a0d6bc017d99aaa0965792b357f9"
+  integrity sha512-gCzYWsJE0h+3cuh3/cK+9UwlVFyHvj3PReIOCDOmdeXOp90ZjKRoDOJBc3mvk1LL6wyl1RWIivR8Rg9OToyesw==
   dependencies:
-    "@opentelemetry/core" "1.18.1"
-    "@opentelemetry/resources" "1.18.1"
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/resources" "1.22.0"
 
-"@opentelemetry/sdk-metrics@1.17.1":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-metrics/-/sdk-metrics-1.17.1.tgz#9c4d13d845bcc82be8684050d9db7cce10f61580"
-  integrity sha512-eHdpsMCKhKhwznxvEfls8Wv3y4ZBWkkXlD3m7vtHIiWBqsMHspWSfie1s07mM45i/bBCf6YBMgz17FUxIXwmZA==
+"@opentelemetry/sdk-metrics@1.22.0":
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-metrics/-/sdk-metrics-1.22.0.tgz#b94c62403013e4c72b96dc747d71d786073efafc"
+  integrity sha512-k6iIx6H3TZ+BVMr2z8M16ri2OxWaljg5h8ihGJxi/KQWcjign6FEaEzuigXt5bK9wVEhqAcWLCfarSftaNWkkg==
   dependencies:
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/resources" "1.17.1"
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/resources" "1.22.0"
     lodash.merge "^4.6.2"
 
-"@opentelemetry/sdk-metrics@1.18.0", "@opentelemetry/sdk-metrics@^1.9.1":
+"@opentelemetry/sdk-metrics@^1.9.1":
   version "1.18.0"
   resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-metrics/-/sdk-metrics-1.18.0.tgz#f84fffcabdb0e9504e3b219635c1099aabc9e207"
   integrity sha512-wK5zdNCo5cJvZog/lsqXCg9/Dt9UeNXQsskgqX8Yz+40t13Kb5CKFFkAMU8tNUxkvidHnD6G6sT6xeVCHQYe4A==
@@ -4476,119 +5097,69 @@
     "@opentelemetry/resources" "1.18.0"
     lodash.merge "^4.6.2"
 
-"@opentelemetry/sdk-metrics@1.18.1":
-  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-metrics/-/sdk-metrics-1.18.1.tgz#1dd334744a1e5d2eec27e9e9765c73cd2f43aef3"
-  integrity sha512-TEFgeNFhdULBYiCoHbz31Y4PDsfjjxRp8Wmdp6ybLQZPqMNEb+dRq+XN8Xw3ivIgTaf9gYsomgV5ensX99RuEQ==
-  dependencies:
-    "@opentelemetry/core" "1.18.1"
-    "@opentelemetry/resources" "1.18.1"
-    lodash.merge "^4.6.2"
-
-"@opentelemetry/sdk-node@^0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-node/-/sdk-node-0.44.0.tgz#a256c9a0658969273aaf25ab2b8daab149e4954f"
-  integrity sha512-MkMJcUcqjNV/A5/y6quedSO3CIDXY17jM8sxQa0Hwmx77+/QiXJkSe4Zv0ysf37mV5+8QEt4rsq7adKg+LtaEg==
-  dependencies:
-    "@opentelemetry/api-logs" "0.44.0"
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/exporter-jaeger" "1.17.1"
-    "@opentelemetry/exporter-trace-otlp-grpc" "0.44.0"
-    "@opentelemetry/exporter-trace-otlp-http" "0.44.0"
-    "@opentelemetry/exporter-trace-otlp-proto" "0.44.0"
-    "@opentelemetry/exporter-zipkin" "1.17.1"
-    "@opentelemetry/instrumentation" "0.44.0"
-    "@opentelemetry/resources" "1.17.1"
-    "@opentelemetry/sdk-logs" "0.44.0"
-    "@opentelemetry/sdk-metrics" "1.17.1"
-    "@opentelemetry/sdk-trace-base" "1.17.1"
-    "@opentelemetry/sdk-trace-node" "1.17.1"
-    "@opentelemetry/semantic-conventions" "1.17.1"
-
-"@opentelemetry/sdk-node@^0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-node/-/sdk-node-0.45.0.tgz#50dd15a80a4ada8a6d202082fc7ae1d20a7d1cec"
-  integrity sha512-azlORyAoFQc/fwU1zyCmsg9Bvz+xvwIlewdl51Rd3QlAtw2cXtFOVPkKTrdkYi73zB9qaqzKyyByddBBaJDj/A==
-  dependencies:
-    "@opentelemetry/api-logs" "0.45.0"
-    "@opentelemetry/core" "1.18.0"
-    "@opentelemetry/exporter-trace-otlp-grpc" "0.45.0"
-    "@opentelemetry/exporter-trace-otlp-http" "0.45.0"
-    "@opentelemetry/exporter-trace-otlp-proto" "0.45.0"
-    "@opentelemetry/exporter-zipkin" "1.18.0"
-    "@opentelemetry/instrumentation" "0.45.0"
-    "@opentelemetry/resources" "1.18.0"
-    "@opentelemetry/sdk-logs" "0.45.0"
-    "@opentelemetry/sdk-metrics" "1.18.0"
-    "@opentelemetry/sdk-trace-base" "1.18.0"
-    "@opentelemetry/sdk-trace-node" "1.18.0"
-    "@opentelemetry/semantic-conventions" "1.18.0"
-
-"@opentelemetry/sdk-trace-base@1.17.1":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-trace-base/-/sdk-trace-base-1.17.1.tgz#8ede213df8b0c957028a869c66964e535193a4fd"
-  integrity sha512-pfSJJSjZj5jkCJUQZicSpzN8Iz9UKMryPWikZRGObPnJo6cUSoKkjZh6BM3j+D47G4olMBN+YZKYqkFM1L6zNA==
-  dependencies:
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/resources" "1.17.1"
-    "@opentelemetry/semantic-conventions" "1.17.1"
-
-"@opentelemetry/sdk-trace-base@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-trace-base/-/sdk-trace-base-1.18.0.tgz#09e420d24465aaee8e21a8a9a3c4fa2e6f0fd08e"
-  integrity sha512-OThpwn8JeU4q7exo0e8kQqs5BZGKQ9NNkes66RCs7yhUKShHEKQIYl/A3+xnGzMrbrtgogcf84brH8XD4ahjMg==
-  dependencies:
-    "@opentelemetry/core" "1.18.0"
-    "@opentelemetry/resources" "1.18.0"
-    "@opentelemetry/semantic-conventions" "1.18.0"
-
-"@opentelemetry/sdk-trace-base@1.18.1":
-  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-trace-base/-/sdk-trace-base-1.18.1.tgz#256605d90b202002d5672305c66dbcf377132379"
-  integrity sha512-tRHfDxN5dO+nop78EWJpzZwHsN1ewrZRVVwo03VJa3JQZxToRDH29/+MB24+yoa+IArerdr7INFJiX/iN4gjqg==
-  dependencies:
-    "@opentelemetry/core" "1.18.1"
-    "@opentelemetry/resources" "1.18.1"
-    "@opentelemetry/semantic-conventions" "1.18.1"
-
-"@opentelemetry/sdk-trace-node@1.17.1":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-trace-node/-/sdk-trace-node-1.17.1.tgz#746c197ad54a8e0cdb24a4b257d33dc3a04493c1"
-  integrity sha512-J56DaG4cusjw5crpI7x9rv4bxDF27DtKYGxXJF56KIvopbNKpdck5ZWXBttEyqgAVPDwHMAXWDL1KchHzF0a3A==
-  dependencies:
-    "@opentelemetry/context-async-hooks" "1.17.1"
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/propagator-b3" "1.17.1"
-    "@opentelemetry/propagator-jaeger" "1.17.1"
-    "@opentelemetry/sdk-trace-base" "1.17.1"
-    semver "^7.5.2"
-
-"@opentelemetry/sdk-trace-node@1.18.0", "@opentelemetry/sdk-trace-node@^1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-trace-node/-/sdk-trace-node-1.18.0.tgz#f78ed78543190fd291a4806c2c7b3dc352bfc9fb"
-  integrity sha512-ekjeNAALNQrtcg25AhjKirhY+5SYywmybJlmLIz9PS7O68x2XqQS4yIMEM2V4d+Flz44KRMupcnB5GAHR3m9Ig==
-  dependencies:
-    "@opentelemetry/context-async-hooks" "1.18.0"
-    "@opentelemetry/core" "1.18.0"
-    "@opentelemetry/propagator-b3" "1.18.0"
-    "@opentelemetry/propagator-jaeger" "1.18.0"
-    "@opentelemetry/sdk-trace-base" "1.18.0"
+"@opentelemetry/sdk-node@0.49.1", "@opentelemetry/sdk-node@^0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-node/-/sdk-node-0.49.1.tgz#40e618f22ba645e73c5a66eccec18a621734ccc3"
+  integrity sha512-feBIT85ndiSHXsQ2gfGpXC/sNeX4GCHLksC4A9s/bfpUbbgbCSl0RvzZlmEpCHarNrkZMwFRi4H0xFfgvJEjrg==
+  dependencies:
+    "@opentelemetry/api-logs" "0.49.1"
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/exporter-trace-otlp-grpc" "0.49.1"
+    "@opentelemetry/exporter-trace-otlp-http" "0.49.1"
+    "@opentelemetry/exporter-trace-otlp-proto" "0.49.1"
+    "@opentelemetry/exporter-zipkin" "1.22.0"
+    "@opentelemetry/instrumentation" "0.49.1"
+    "@opentelemetry/resources" "1.22.0"
+    "@opentelemetry/sdk-logs" "0.49.1"
+    "@opentelemetry/sdk-metrics" "1.22.0"
+    "@opentelemetry/sdk-trace-base" "1.22.0"
+    "@opentelemetry/sdk-trace-node" "1.22.0"
+    "@opentelemetry/semantic-conventions" "1.22.0"
+
+"@opentelemetry/sdk-trace-base@1.22.0":
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-trace-base/-/sdk-trace-base-1.22.0.tgz#7833bf2493a7b49461915ca32aa2884c87afd78c"
+  integrity sha512-pfTuSIpCKONC6vkTpv6VmACxD+P1woZf4q0K46nSUvXFvOFqjBYKFaAMkKD3M1mlKUUh0Oajwj35qNjMl80m1Q==
+  dependencies:
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/resources" "1.22.0"
+    "@opentelemetry/semantic-conventions" "1.22.0"
+
+"@opentelemetry/sdk-trace-base@1.27.0":
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-trace-base/-/sdk-trace-base-1.27.0.tgz#2276e4cd0d701a8faba77382b2938853a0907b54"
+  integrity sha512-btz6XTQzwsyJjombpeqCX6LhiMQYpzt2pIYNPnw0IPO/3AhT6yjnf8Mnv3ZC2A4eRYOjqrg+bfaXg9XHDRJDWQ==
+  dependencies:
+    "@opentelemetry/core" "1.27.0"
+    "@opentelemetry/resources" "1.27.0"
+    "@opentelemetry/semantic-conventions" "1.27.0"
+
+"@opentelemetry/sdk-trace-node@1.22.0":
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-trace-node/-/sdk-trace-node-1.22.0.tgz#fa9b2063cc39aabc4efe342495c80ed522b4d5cb"
+  integrity sha512-gTGquNz7ue8uMeiWPwp3CU321OstQ84r7PCDtOaCicjbJxzvO8RZMlEC4geOipTeiF88kss5n6w+//A0MhP1lQ==
+  dependencies:
+    "@opentelemetry/context-async-hooks" "1.22.0"
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/propagator-b3" "1.22.0"
+    "@opentelemetry/propagator-jaeger" "1.22.0"
+    "@opentelemetry/sdk-trace-base" "1.22.0"
     semver "^7.5.2"
 
-"@opentelemetry/semantic-conventions@1.17.1":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/semantic-conventions/-/semantic-conventions-1.17.1.tgz#93d219935e967fbb9aa0592cc96b2c0ec817a56f"
-  integrity sha512-xbR2U+2YjauIuo42qmE8XyJK6dYeRMLJuOlUP5SO4auET4VtOHOzgkRVOq+Ik18N+Xf3YPcqJs9dZMiDddz1eQ==
-
-"@opentelemetry/semantic-conventions@1.18.0", "@opentelemetry/semantic-conventions@^1.0.0", "@opentelemetry/semantic-conventions@^1.18.0":
+"@opentelemetry/semantic-conventions@1.18.0", "@opentelemetry/semantic-conventions@^1.0.0":
   version "1.18.0"
   resolved "https://registry.yarnpkg.com/@opentelemetry/semantic-conventions/-/semantic-conventions-1.18.0.tgz#f38f457922f6e112569561c4515797a70eb5f9dd"
   integrity sha512-Bxtd+h2+rBv3XBHZaoXq133/hzgAQvbl2Kg5a9cG4ozfiUJHC9Xkblt7PrLc9CbzwWQpSxUxWoZJHXT3lUlkOw==
 
-"@opentelemetry/semantic-conventions@1.18.1":
-  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/semantic-conventions/-/semantic-conventions-1.18.1.tgz#8e47caf57a84b1dcc1722b2025693348cdf443b4"
-  integrity sha512-+NLGHr6VZwcgE/2lw8zDIufOCGnzsA5CbQIMleXZTrgkBd0TanCX+MiDYJ1TOS4KL/Tqk0nFRxawnaYr6pkZkA==
+"@opentelemetry/semantic-conventions@1.22.0":
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/semantic-conventions/-/semantic-conventions-1.22.0.tgz#d7502533a7c96e25baab86bac965468e0703a8b4"
+  integrity sha512-CAOgFOKLybd02uj/GhCdEeeBjOS0yeoDeo/CA7ASBSmenpZHAKGB3iDm/rv3BQLcabb/OprDEsSQ1y0P8A7Siw==
+
+"@opentelemetry/semantic-conventions@1.27.0", "@opentelemetry/semantic-conventions@^1.22.0", "@opentelemetry/semantic-conventions@^1.27.0":
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/semantic-conventions/-/semantic-conventions-1.27.0.tgz#1a857dcc95a5ab30122e04417148211e6f945e6c"
+  integrity sha512-sAay1RrB+ONOem0OZanAR1ZI/k7yDpnOQSQmTMuGImUQb2y8EbSaCJ94FQluM74xoU03vlb2d2U90hZluL6nQg==
 
 "@opentelemetry/sql-common@^0.40.0":
   version "0.40.0"
@@ -4689,6 +5260,11 @@
     "@parcel/watcher-win32-ia32" "2.3.0"
     "@parcel/watcher-win32-x64" "2.3.0"
 
+"@paulmillr/qr@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@paulmillr/qr/-/qr-0.2.1.tgz#76ade7080be4ac4824f638146fd8b6db1805eeca"
+  integrity sha512-IHnV6A+zxU7XwmKFinmYjUcwlyK9+xkG3/s9KcQhI9BjQKycrJ1JRO+FbNYPwZiPKW3je/DR0k7w8/gLa5eaxQ==
+
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
@@ -4706,34 +5282,34 @@
     tiny-glob "^0.2.9"
     tslib "^2.4.0"
 
-"@playwright/experimental-ct-core@1.41.1":
-  version "1.41.1"
-  resolved "https://registry.yarnpkg.com/@playwright/experimental-ct-core/-/experimental-ct-core-1.41.1.tgz#9bad5adb0a048c687a596bd832a258c8ced24ec8"
-  integrity sha512-d7PxESV29x6W9RYs0mhkXmxr+6FfTbg2Tm/WJZlhgbIP+OLv79uJ8hl8ERsiBBFtH88sR+WmxHBMiZRpfpa6Fw==
+"@playwright/experimental-ct-core@1.49.0":
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/@playwright/experimental-ct-core/-/experimental-ct-core-1.49.0.tgz#e827ec8ad38f5fb049b2a19158489dd2a2eaba07"
+  integrity sha512-Tl/JekIQOyHIctFvzmHaSB8SuBTbOYcIdrb5HMwMc70i86XbPnQfDp65zgzAuvUiDN1u1k+aIpygJ8ZqnRYgVw==
   dependencies:
-    playwright "1.41.1"
-    playwright-core "1.41.1"
-    vite "^4.4.12"
+    playwright "1.49.0"
+    playwright-core "1.49.0"
+    vite "^5.2.8"
 
-"@playwright/experimental-ct-react@1.41.1":
-  version "1.41.1"
-  resolved "https://registry.yarnpkg.com/@playwright/experimental-ct-react/-/experimental-ct-react-1.41.1.tgz#4711881caf1ab47acbc3f7c121b87e17f165a46c"
-  integrity sha512-Ht04RKD/4J69EPHOR4iAWtsOkkqswxonkcEEhniTNflGn30SoPyNww72LJECDrls+7AJayflJf4qe/cK1Ao/ug==
+"@playwright/experimental-ct-react@1.49.0":
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/@playwright/experimental-ct-react/-/experimental-ct-react-1.49.0.tgz#14899cab22f48b59e4ebbf340011b596d3babe19"
+  integrity sha512-zkCKItOwMHJsyqXagYmpv/iVCjnjpT+NWvLS8HFec1HuU28kI3AhzcIhKJvZbQLiJV+fL99wFhcJnOjHZm5VAA==
   dependencies:
-    "@playwright/experimental-ct-core" "1.41.1"
-    "@vitejs/plugin-react" "^4.0.0"
+    "@playwright/experimental-ct-core" "1.49.0"
+    "@vitejs/plugin-react" "^4.2.1"
 
-"@playwright/test@1.41.1":
-  version "1.41.1"
-  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.41.1.tgz#6954139ed4a67999f1b17460aa3d184f4b334f18"
-  integrity sha512-9g8EWTjiQ9yFBXc6HjCWe41msLpxEX0KhmfmPl9RPLJdfzL4F0lg2BdJ91O9azFdl11y1pmpwdjBiSxvqc+btw==
+"@playwright/test@1.49.0":
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.49.0.tgz#74227385b58317ee076b86b56d0e1e1b25cff01e"
+  integrity sha512-DMulbwQURa8rNIQrf94+jPJQ4FmOVdpE5ZppRNvWVjvhC+6sOeo28r8MgIpQRYouXRtt/FCCXU7zn20jnHR4Qw==
   dependencies:
-    playwright "1.41.1"
+    playwright "1.49.0"
 
-"@polka/url@^1.0.0-next.20":
-  version "1.0.0-next.23"
-  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.23.tgz#498e41218ab3b6a1419c735e5c6ae2c5ed609b6c"
-  integrity sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==
+"@polka/url@^1.0.0-next.24":
+  version "1.0.0-next.25"
+  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.25.tgz#f077fdc0b5d0078d30893396ff4827a13f99e817"
+  integrity sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==
 
 "@popperjs/core@^2.9.3":
   version "2.11.6"
@@ -4945,6 +5521,135 @@
     prop-types "^15.7.2"
     tslib "^2.3.0"
 
+"@reown/appkit-adapter-wagmi@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@reown/appkit-adapter-wagmi/-/appkit-adapter-wagmi-1.6.0.tgz#8374d28b7d1ed2d75f5b47d430d19024e26eb928"
+  integrity sha512-Haog7P0BcJKch1lJHlESauZqJlW+zNkzBHGjiXAjokwyryDuGFjyhRtUDNEEaDlofA+fB6Y1cbYbEWdqoxvNVw==
+  dependencies:
+    "@reown/appkit" "1.6.0"
+    "@reown/appkit-common" "1.6.0"
+    "@reown/appkit-core" "1.6.0"
+    "@reown/appkit-polyfills" "1.6.0"
+    "@reown/appkit-scaffold-ui" "1.6.0"
+    "@reown/appkit-ui" "1.6.0"
+    "@reown/appkit-utils" "1.6.0"
+    "@reown/appkit-wallet" "1.6.0"
+    "@walletconnect/universal-provider" "2.17.0"
+    "@walletconnect/utils" "2.17.0"
+    valtio "1.11.2"
+
+"@reown/appkit-common@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@reown/appkit-common/-/appkit-common-1.6.0.tgz#079846f0bff9b8366c3d1a3941ef2c956dc0d335"
+  integrity sha512-X86nN/Ojj7kCbumc1srbvdU1u2M+yq5IpKoFSOEtTZCCmogLZ2m4aBPodSBGTBha3FJbTBf2DSAQd8YaTj0fsA==
+  dependencies:
+    bignumber.js "9.1.2"
+    dayjs "1.11.10"
+    viem "2.x"
+
+"@reown/appkit-core@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@reown/appkit-core/-/appkit-core-1.6.0.tgz#d43818163121fda287a5236090e8b66cfcdacca0"
+  integrity sha512-XsmOYowvfehcgVYt+AYo0BNrq3yiGbkgLt/p0F88FxE8104lw4DKwCvIgDsfjqW/5Xx7p8opTiqa9jR8MkX4Gg==
+  dependencies:
+    "@reown/appkit-common" "1.6.0"
+    "@reown/appkit-wallet" "1.6.0"
+    "@walletconnect/universal-provider" "2.17.0"
+    valtio "1.11.2"
+    viem "2.x"
+
+"@reown/appkit-polyfills@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@reown/appkit-polyfills/-/appkit-polyfills-1.6.0.tgz#1be68ac4b35999c65c160b8a99c44d8423582883"
+  integrity sha512-IdOJXEprc1RTjQtyRmO82g48R1gJcgYtyeZqEcpTmgwzP/tXdj+IS5vsVa9pf9NS4DVveaWD/HJaHi1w2P/h+Q==
+  dependencies:
+    buffer "6.0.3"
+
+"@reown/appkit-scaffold-ui@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@reown/appkit-scaffold-ui/-/appkit-scaffold-ui-1.6.0.tgz#77c26c2badd5ce48727b9e421e2f26b8eb4a5842"
+  integrity sha512-Ik4Gh7pNd3GK26ZKdPnkV4OA5FXpydQfEr2PR2CaUkCCmcn0o+4fCiQCiFXVIkMTugcKvWu4iphwcITHBlvJXQ==
+  dependencies:
+    "@reown/appkit-common" "1.6.0"
+    "@reown/appkit-core" "1.6.0"
+    "@reown/appkit-ui" "1.6.0"
+    "@reown/appkit-utils" "1.6.0"
+    "@reown/appkit-wallet" "1.6.0"
+    lit "3.1.0"
+
+"@reown/appkit-siwe@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@reown/appkit-siwe/-/appkit-siwe-1.6.0.tgz#e404d2f7d1fee6d6b549ee6f941726518883e58f"
+  integrity sha512-H6JT3nRoikSmeZjVUNSaVGtDR2PY2PLbpXYnDaJOioMaXIOqGL79YWOPKlisWc98bgye+Wc6YJityKvW5dCcpw==
+  dependencies:
+    "@reown/appkit-common" "1.6.0"
+    "@reown/appkit-core" "1.6.0"
+    "@reown/appkit-ui" "1.6.0"
+    "@reown/appkit-utils" "1.6.0"
+    "@reown/appkit-wallet" "1.6.0"
+    "@walletconnect/utils" "2.17.0"
+    lit "3.1.0"
+    valtio "1.11.2"
+
+"@reown/appkit-ui@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@reown/appkit-ui/-/appkit-ui-1.6.0.tgz#73debefec5a1506d37aa9a5ef37fd5c13fa1df46"
+  integrity sha512-5uKb2Jis7HcoFq9XbHKaQM94hNaLjd87ynffzvrB6vJEw3pB+XPlGVnMLo6kct6YcdVQiUJNaGJGkOnaSELS4A==
+  dependencies:
+    lit "3.1.0"
+    qrcode "1.5.3"
+
+"@reown/appkit-utils@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@reown/appkit-utils/-/appkit-utils-1.6.0.tgz#3710420c1053fce39fcd759d5d9d95132ed917ab"
+  integrity sha512-hZeDKqK1o+jvugbOL15bKACnXMZsfAHssk52R26WwPUhvGBdZ08TVIoA+74C1zTOkuy5wWKJqE3cpe0qHl7J0Q==
+  dependencies:
+    "@reown/appkit-common" "1.6.0"
+    "@reown/appkit-core" "1.6.0"
+    "@reown/appkit-polyfills" "1.6.0"
+    "@reown/appkit-wallet" "1.6.0"
+    "@walletconnect/logger" "2.1.2"
+    "@walletconnect/universal-provider" "2.17.0"
+    valtio "1.11.2"
+    viem "2.x"
+
+"@reown/appkit-wallet@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@reown/appkit-wallet/-/appkit-wallet-1.6.0.tgz#635449c3b84d35c1119915060a6ee8f6badf45fe"
+  integrity sha512-VXp2Fl8iumlQyi18fsSxpXQNj4EMlJVo9fO8+mampM2BqKNb3hTv2uc9Ix1l7a0rAwl5G78rxoGUoRtTw5QfgA==
+  dependencies:
+    "@reown/appkit-common" "1.6.0"
+    "@reown/appkit-polyfills" "1.6.0"
+    "@walletconnect/logger" "2.1.2"
+    zod "3.22.4"
+
+"@reown/appkit@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@reown/appkit/-/appkit-1.6.0.tgz#1b9fe103d09d3cc75f02039aa8a15b2a85364eed"
+  integrity sha512-v8HH/5l8agc7f5JVMsFAnAHXl/5tJ4lFWnMZn67L9i2g5ZbsR5nGwybZGQSc/zLv3cPjHmm1xgAdeFDHnM/HHw==
+  dependencies:
+    "@reown/appkit-common" "1.6.0"
+    "@reown/appkit-core" "1.6.0"
+    "@reown/appkit-polyfills" "1.6.0"
+    "@reown/appkit-scaffold-ui" "1.6.0"
+    "@reown/appkit-siwe" "1.6.0"
+    "@reown/appkit-ui" "1.6.0"
+    "@reown/appkit-utils" "1.6.0"
+    "@reown/appkit-wallet" "1.6.0"
+    "@walletconnect/types" "2.17.0"
+    "@walletconnect/universal-provider" "2.17.0"
+    "@walletconnect/utils" "2.17.0"
+    bs58 "6.0.0"
+    valtio "1.11.2"
+    viem "2.x"
+
+"@rollbar/react@0.12.0-beta":
+  version "0.12.0-beta"
+  resolved "https://registry.yarnpkg.com/@rollbar/react/-/react-0.12.0-beta.tgz#b80dfab1535ece358a0e98a4f26aadee8b54edda"
+  integrity sha512-8udBX0lJwdBBq+O/jqDXpg/giHt8bo/Us1IlTkHEdCBO18Cjj7sxWJ80OPFxiPRNwZgZnhf2HbxQxvLN+4FeJA==
+  dependencies:
+    tiny-invariant "^1.1.0"
+
 "@rollup/pluginutils@^5.0.0":
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.2.tgz#012b8f53c71e4f6f9cb317e311df1404f56e7a33"
@@ -4954,26 +5659,111 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
-"@rushstack/eslint-patch@^1.1.3":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz#8be36a1f66f3265389e90b5f9c9962146758f728"
-  integrity sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==
+"@rollup/rollup-android-arm-eabi@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz#8b613b9725e8f9479d142970b106b6ae878610d5"
+  integrity sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w==
+
+"@rollup/rollup-android-arm64@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.4.tgz#654ca1049189132ff602bfcf8df14c18da1f15fb"
+  integrity sha512-VXoK5UMrgECLYaMuGuVTOx5kcuap1Jm8g/M83RnCHBKOqvPPmROFJGQaZhGccnsFtfXQ3XYa4/jMCJvZnbJBdA==
+
+"@rollup/rollup-darwin-arm64@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.4.tgz#6d241d099d1518ef0c2205d96b3fa52e0fe1954b"
+  integrity sha512-xMM9ORBqu81jyMKCDP+SZDhnX2QEVQzTcC6G18KlTQEzWK8r/oNZtKuZaCcHhnsa6fEeOBionoyl5JsAbE/36Q==
+
+"@rollup/rollup-darwin-x64@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.4.tgz#42bd19d292a57ee11734c980c4650de26b457791"
+  integrity sha512-aJJyYKQwbHuhTUrjWjxEvGnNNBCnmpHDvrb8JFDbeSH3m2XdHcxDd3jthAzvmoI8w/kSjd2y0udT+4okADsZIw==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.4.tgz#f23555ee3d8fe941c5c5fd458cd22b65eb1c2232"
+  integrity sha512-j63YtCIRAzbO+gC2L9dWXRh5BFetsv0j0va0Wi9epXDgU/XUi5dJKo4USTttVyK7fGw2nPWK0PbAvyliz50SCQ==
+
+"@rollup/rollup-linux-arm-musleabihf@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.4.tgz#f3bbd1ae2420f5539d40ac1fde2b38da67779baa"
+  integrity sha512-dJnWUgwWBX1YBRsuKKMOlXCzh2Wu1mlHzv20TpqEsfdZLb3WoJW2kIEsGwLkroYf24IrPAvOT/ZQ2OYMV6vlrg==
+
+"@rollup/rollup-linux-arm64-gnu@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.4.tgz#7abe900120113e08a1f90afb84c7c28774054d15"
+  integrity sha512-AdPRoNi3NKVLolCN/Sp4F4N1d98c4SBnHMKoLuiG6RXgoZ4sllseuGioszumnPGmPM2O7qaAX/IJdeDU8f26Aw==
+
+"@rollup/rollup-linux-arm64-musl@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.4.tgz#9e655285c8175cd44f57d6a1e8e5dedfbba1d820"
+  integrity sha512-Gl0AxBtDg8uoAn5CCqQDMqAx22Wx22pjDOjBdmG0VIWX3qUBHzYmOKh8KXHL4UpogfJ14G4wk16EQogF+v8hmA==
+
+"@rollup/rollup-linux-powerpc64le-gnu@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.4.tgz#9a79ae6c9e9d8fe83d49e2712ecf4302db5bef5e"
+  integrity sha512-3aVCK9xfWW1oGQpTsYJJPF6bfpWfhbRnhdlyhak2ZiyFLDaayz0EP5j9V1RVLAAxlmWKTDfS9wyRyY3hvhPoOg==
+
+"@rollup/rollup-linux-riscv64-gnu@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.4.tgz#67ac70eca4ace8e2942fabca95164e8874ab8128"
+  integrity sha512-ePYIir6VYnhgv2C5Xe9u+ico4t8sZWXschR6fMgoPUK31yQu7hTEJb7bCqivHECwIClJfKgE7zYsh1qTP3WHUA==
+
+"@rollup/rollup-linux-s390x-gnu@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.4.tgz#9f883a7440f51a22ed7f99e1d070bd84ea5005fc"
+  integrity sha512-GqFJ9wLlbB9daxhVlrTe61vJtEY99/xB3C8e4ULVsVfflcpmR6c8UZXjtkMA6FhNONhj2eA5Tk9uAVw5orEs4Q==
+
+"@rollup/rollup-linux-x64-gnu@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.4.tgz#70116ae6c577fe367f58559e2cffb5641a1dd9d0"
+  integrity sha512-87v0ol2sH9GE3cLQLNEy0K/R0pz1nvg76o8M5nhMR0+Q+BBGLnb35P0fVz4CQxHYXaAOhE8HhlkaZfsdUOlHwg==
+
+"@rollup/rollup-linux-x64-musl@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.4.tgz#f473f88219feb07b0b98b53a7923be716d1d182f"
+  integrity sha512-UV6FZMUgePDZrFjrNGIWzDo/vABebuXBhJEqrHxrGiU6HikPy0Z3LfdtciIttEUQfuDdCn8fqh7wiFJjCNwO+g==
+
+"@rollup/rollup-win32-arm64-msvc@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.4.tgz#4349482d17f5d1c58604d1c8900540d676f420e0"
+  integrity sha512-BjI+NVVEGAXjGWYHz/vv0pBqfGoUH0IGZ0cICTn7kB9PyjrATSkX+8WkguNjWoj2qSr1im/+tTGRaY+4/PdcQw==
+
+"@rollup/rollup-win32-ia32-msvc@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.4.tgz#a6fc39a15db618040ec3c2a24c1e26cb5f4d7422"
+  integrity sha512-SiWG/1TuUdPvYmzmYnmd3IEifzR61Tragkbx9D3+R8mzQqDBz8v+BvZNDlkiTtI9T15KYZhP0ehn3Dld4n9J5g==
+
+"@rollup/rollup-win32-x64-msvc@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.4.tgz#3dd5d53e900df2a40841882c02e56f866c04d202"
+  integrity sha512-j8pPKp53/lq9lMXN57S8cFz0MynJk8OWNuUnXct/9KCpKU7DgU3bYMJhwWmcqC0UU29p8Lr0/7KEVcaM6bf47Q==
+
+"@rtsao/scc@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
+  integrity sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==
 
-"@safe-global/safe-apps-provider@^0.18.1":
-  version "0.18.1"
-  resolved "https://registry.yarnpkg.com/@safe-global/safe-apps-provider/-/safe-apps-provider-0.18.1.tgz#287b5a1e2ef3be630dacde54279409df3ced8202"
-  integrity sha512-V4a05A3EgJcriqtDoJklDz1BOinWhC6P0hjUSxshA4KOZM7rGPCTto/usXs09zr1vvL28evl/NldSTv97j2bmg==
+"@rushstack/eslint-patch@^1.10.3":
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.4.tgz#427d5549943a9c6fce808e39ea64dbe60d4047f1"
+  integrity sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==
+
+"@safe-global/safe-apps-provider@0.18.4":
+  version "0.18.4"
+  resolved "https://registry.yarnpkg.com/@safe-global/safe-apps-provider/-/safe-apps-provider-0.18.4.tgz#53df912aa20d933f6b14c5bcb0737a8cd47def57"
+  integrity sha512-SWYeG3gyTO6wGHMSokfHakZ9isByn2mHsM0VohIorYFFEyGGmJ89btnTm+DqDUSoQtvWAatZB7XNy6CaYMvqtg==
   dependencies:
-    "@safe-global/safe-apps-sdk" "^8.1.0"
+    "@safe-global/safe-apps-sdk" "^9.1.0"
     events "^3.3.0"
 
-"@safe-global/safe-apps-sdk@^8.1.0":
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/@safe-global/safe-apps-sdk/-/safe-apps-sdk-8.1.0.tgz#d1d0c69cd2bf4eef8a79c5d677d16971926aa64a"
-  integrity sha512-XJbEPuaVc7b9n23MqlF6c+ToYIS3f7P2Sel8f3cSBQ9WORE4xrSuvhMpK9fDSFqJ7by/brc+rmJR/5HViRr0/w==
+"@safe-global/safe-apps-sdk@9.1.0", "@safe-global/safe-apps-sdk@^9.1.0":
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/@safe-global/safe-apps-sdk/-/safe-apps-sdk-9.1.0.tgz#0e65913e0f202e529ed3c846e0f5a98c2d35aa98"
+  integrity sha512-N5p/ulfnnA2Pi2M3YeWjULeWbjo7ei22JwU/IXnhoHzKq3pYCN6ynL9mJBOlvDVv892EgLPCWCOwQk/uBT2v0Q==
   dependencies:
     "@safe-global/safe-gateway-typescript-sdk" "^3.5.3"
-    viem "^1.0.0"
+    viem "^2.1.1"
 
 "@safe-global/safe-gateway-typescript-sdk@^3.5.3":
   version "3.7.3"
@@ -4982,24 +5772,30 @@
   dependencies:
     cross-fetch "^3.1.5"
 
+"@scure/base@1.1.9", "@scure/base@~1.1.7":
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.9.tgz#e5e142fbbfe251091f9c5f1dd4c834ac04c3dbd1"
+  integrity sha512-8YKhl8GHiNI/pU2VMaofa2Tor7PJRAjwQLBBuilkJ9L5+13yVbC7JO/wS7piioAvPSwR3JKM1IJ/u4xQzbcXKg==
+
+"@scure/base@^1.1.3", "@scure/base@~1.1.2":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.5.tgz#1d85d17269fe97694b9c592552dd9e5e33552157"
+  integrity sha512-Brj9FiG2W1MRQSTB212YVPRrcbjkv48FoZi/u4l/zds/ieRrqsh7aUf6CLwkAq61oKXr/ZlTzlY66gLIj3TFTQ==
+
 "@scure/base@~1.1.0":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.1.tgz#ebb651ee52ff84f420097055f4bf46cfba403938"
   integrity sha512-ZxOhsSyxYwLJj3pLZCefNitxsj093tb2vq90mp2txoYeBqbcjDjqFhyM8eUjq/uFm6zJ+mUuqxlS2FkuSY1MTA==
 
-"@scure/base@~1.1.2":
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.5.tgz#1d85d17269fe97694b9c592552dd9e5e33552157"
-  integrity sha512-Brj9FiG2W1MRQSTB212YVPRrcbjkv48FoZi/u4l/zds/ieRrqsh7aUf6CLwkAq61oKXr/ZlTzlY66gLIj3TFTQ==
+"@scure/base@~1.1.6", "@scure/base@~1.1.8":
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.8.tgz#8f23646c352f020c83bca750a82789e246d42b50"
+  integrity sha512-6CyAclxj3Nb0XT7GHK6K4zK6k2xJm6E4Ft0Ohjt4WgegiFUHEtFb2CGzmPmGBwoIhrLsqNLYfLr04Y1GePrzZg==
 
-"@scure/bip32@1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@scure/bip32/-/bip32-1.3.0.tgz#6c8d980ef3f290987736acd0ee2e0f0d50068d87"
-  integrity sha512-bcKpo1oj54hGholplGLpqPHRbIsnbixFtc06nwuNM5/dwSXOq/AAYoIBRsBmnZJSdfeNW5rnff7NTAz3ZCqR9Q==
-  dependencies:
-    "@noble/curves" "~1.0.0"
-    "@noble/hashes" "~1.3.0"
-    "@scure/base" "~1.1.0"
+"@scure/base@~1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.2.1.tgz#dd0b2a533063ca612c17aa9ad26424a2ff5aa865"
+  integrity sha512-DGmGtC8Tt63J5GfHgfl5CuAXh96VF/LD8K9Hr/Gv0J2lAoRGlPOMpqMpMbCTOoOJMZCk2Xt+DskdDyn6dEFdzQ==
 
 "@scure/bip32@1.3.1":
   version "1.3.1"
@@ -5019,13 +5815,32 @@
     "@noble/hashes" "~1.3.2"
     "@scure/base" "~1.1.2"
 
-"@scure/bip39@1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@scure/bip39/-/bip39-1.2.0.tgz#a207e2ef96de354de7d0002292ba1503538fc77b"
-  integrity sha512-SX/uKq52cuxm4YFXWFaVByaSHJh2w3BnokVSeUJVCv6K7WulT9u2BuNRBhuFl8vAuYnzx9bEu9WgpcNYTrYieg==
+"@scure/bip32@1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@scure/bip32/-/bip32-1.4.0.tgz#4e1f1e196abedcef395b33b9674a042524e20d67"
+  integrity sha512-sVUpc0Vq3tXCkDGYVWGIZTRfnvu8LoTDaev7vbwh0omSvVORONr960MQWdKqJDCReIEmTj3PAr73O3aoxz7OPg==
   dependencies:
-    "@noble/hashes" "~1.3.0"
-    "@scure/base" "~1.1.0"
+    "@noble/curves" "~1.4.0"
+    "@noble/hashes" "~1.4.0"
+    "@scure/base" "~1.1.6"
+
+"@scure/bip32@1.5.0", "@scure/bip32@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@scure/bip32/-/bip32-1.5.0.tgz#dd4a2e1b8a9da60e012e776d954c4186db6328e6"
+  integrity sha512-8EnFYkqEQdnkuGBVpCzKxyIwDCBLDVj3oiX0EKUFre/tOjL/Hqba1D6n/8RcmaQy4f95qQFrO2A8Sr6ybh4NRw==
+  dependencies:
+    "@noble/curves" "~1.6.0"
+    "@noble/hashes" "~1.5.0"
+    "@scure/base" "~1.1.7"
+
+"@scure/bip32@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@scure/bip32/-/bip32-1.6.0.tgz#6dbc6b4af7c9101b351f41231a879d8da47e0891"
+  integrity sha512-82q1QfklrUUdXJzjuRU7iG7D7XiFx5PHYVS0+oeNKhyDLT7WPqs6pBcM2W5ZdwOwKCwoE1Vy1se+DHjcXwCYnA==
+  dependencies:
+    "@noble/curves" "~1.7.0"
+    "@noble/hashes" "~1.6.0"
+    "@scure/base" "~1.2.1"
 
 "@scure/bip39@1.2.1":
   version "1.2.1"
@@ -5035,69 +5850,21 @@
     "@noble/hashes" "~1.3.0"
     "@scure/base" "~1.1.0"
 
-"@sentry/browser@7.24.0":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.24.0.tgz#3e657f8032322d07f98486f44e048fcdbc3aaff7"
-  integrity sha512-G2eeYWF7rIz1Dm8PCQiuuTzctrrJSWqD5MCWOICqHr8FrxOPVsVO3Qa/B7/+BSpHd+V7sSUU17oFu41SAWZCOg==
-  dependencies:
-    "@sentry/core" "7.24.0"
-    "@sentry/types" "7.24.0"
-    "@sentry/utils" "7.24.0"
-    tslib "^1.9.3"
-
-"@sentry/cli@^2.21.2":
-  version "2.21.2"
-  resolved "https://registry.yarnpkg.com/@sentry/cli/-/cli-2.21.2.tgz#89e5633ff48a83d078c76c6997fffd4b68b2da1c"
-  integrity sha512-X1nye89zl+QV3FSuQDGItfM51tW9PQ7ce0TtV/12DgGgTVEgnVp5uvO3wX5XauHvulQzRPzwUL3ZK+yS5bAwCw==
-  dependencies:
-    https-proxy-agent "^5.0.0"
-    node-fetch "^2.6.7"
-    progress "^2.0.3"
-    proxy-from-env "^1.1.0"
-    which "^2.0.2"
-
-"@sentry/core@7.24.0":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.24.0.tgz#e856a071c702279854d6e5221957d61cd48036cc"
-  integrity sha512-QVRtmnaWEI0/MHIfBozgsMfh+7WU6OfpvUd72x1Dpk3Zk6Zs7Hqq0YfxfeBd7ApjNjGogPl1beaHcHAHlr3IyA==
-  dependencies:
-    "@sentry/types" "7.24.0"
-    "@sentry/utils" "7.24.0"
-    tslib "^1.9.3"
-
-"@sentry/react@7.24.0":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.24.0.tgz#aa51b09bad8c5d7af163a28a4718abb1e68ea232"
-  integrity sha512-uW6j7wrPxg7UillUVdsjrsIPqqPEAN/PdotR2O75Qh7s0aR7+Le8i29C4VeW/iubXhlxF/qFvnXwqG5Ji4GwBg==
-  dependencies:
-    "@sentry/browser" "7.24.0"
-    "@sentry/types" "7.24.0"
-    "@sentry/utils" "7.24.0"
-    hoist-non-react-statics "^3.3.2"
-    tslib "^1.9.3"
-
-"@sentry/tracing@7.24.0":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-7.24.0.tgz#d9477a2da9c902ca9663cd4cd87ba279f73f212c"
-  integrity sha512-O/4hE/lYM6+hM4K5O06pWNuHzZb2ex5f2497bxkwxq17wpJhVp1oDuz8hbWNL7BUNeIbeDpqunBHQzzmVRbL1Q==
+"@scure/bip39@1.4.0", "@scure/bip39@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@scure/bip39/-/bip39-1.4.0.tgz#664d4f851564e2e1d4bffa0339f9546ea55960a6"
+  integrity sha512-BEEm6p8IueV/ZTfQLp/0vhw4NPnT9oWf5+28nvmeUICjP99f4vr2d+qc7AVGDDtwRep6ifR43Yed9ERVmiITzw==
   dependencies:
-    "@sentry/core" "7.24.0"
-    "@sentry/types" "7.24.0"
-    "@sentry/utils" "7.24.0"
-    tslib "^1.9.3"
-
-"@sentry/types@7.24.0":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.24.0.tgz#1acc841efe7bd56fc3eb647a613dba92631e8413"
-  integrity sha512-Xs4r9esBPieJUA6cGmMqfSQiinILdlhScjM+NqDSzxOo8+LRCJzckTLhUttBGVlaAoa4hjCEsfkHA1tVV1DycA==
+    "@noble/hashes" "~1.5.0"
+    "@scure/base" "~1.1.8"
 
-"@sentry/utils@7.24.0":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.24.0.tgz#73f100dc8942e73353473eaf3168e5052e2f45be"
-  integrity sha512-baaRDhHWHTyhmR6V8YKSo0NvN+D17pIKRDmb2vpWHVpTjobKCivNBLRoy3VhnIMS/24XyZnL028QLwkUNLg1Ug==
+"@scure/bip39@1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@scure/bip39/-/bip39-1.5.0.tgz#c8f9533dbd787641b047984356531d84485f19be"
+  integrity sha512-Dop+ASYhnrwm9+HA/HwXg7j2ZqM6yk2fyLWb5znexjctFY3+E+eU8cIWI0Pql0Qx4hPZCijlGq4OL71g+Uz30A==
   dependencies:
-    "@sentry/types" "7.24.0"
-    tslib "^1.9.3"
+    "@noble/hashes" "~1.6.0"
+    "@scure/base" "~1.2.1"
 
 "@sideway/address@^4.1.3":
   version "4.1.4"
@@ -5121,6 +5888,11 @@
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.51.tgz#645f33fe4e02defe26f2f5c0410e1c094eac7f5f"
   integrity sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA==
 
+"@sindresorhus/fnv1a@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@sindresorhus/fnv1a/-/fnv1a-3.1.0.tgz#f8e46597298f6fd4c12dc901cdd4e73beb4d24fa"
+  integrity sha512-KV321z5m/0nuAg83W1dPLy85HpHDk7Sdi4fJbwvacWsEhAh+rZUW4ZfGcXmUIvjZg4ss2bcwNlRhJ7GBEUG08w==
+
 "@sinonjs/commons@^1.7.0":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.5.tgz#e280c94c95f206dcfd5aca00a43f2156b758c764"
@@ -5142,34 +5914,10 @@
   dependencies:
     react-script-hook "^1.7.2"
 
-"@solana/buffer-layout@^4.0.0":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@solana/buffer-layout/-/buffer-layout-4.0.1.tgz#b996235eaec15b1e0b5092a8ed6028df77fa6c15"
-  integrity sha512-E1ImOIAD1tBZFRdjeM4/pzTiTApC0AOBGwyAMS4fwIodCWArzJ3DWdoh8cKxeFM2fElkxBh2Aqts1BPC373rHA==
-  dependencies:
-    buffer "~6.0.3"
-
-"@solana/web3.js@^1.70.1":
-  version "1.73.0"
-  resolved "https://registry.yarnpkg.com/@solana/web3.js/-/web3.js-1.73.0.tgz#c65f9f954ac80fca6952765c931dd72e57e1b572"
-  integrity sha512-YrgX3Py7ylh8NYkbanoINUPCj//bWUjYZ5/WPy9nQ9SK3Cl7QWCR+NmbDjmC/fTspZGR+VO9LTQslM++jr5PRw==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    "@noble/ed25519" "^1.7.0"
-    "@noble/hashes" "^1.1.2"
-    "@noble/secp256k1" "^1.6.3"
-    "@solana/buffer-layout" "^4.0.0"
-    agentkeepalive "^4.2.1"
-    bigint-buffer "^1.1.5"
-    bn.js "^5.0.0"
-    borsh "^0.7.0"
-    bs58 "^4.0.1"
-    buffer "6.0.1"
-    fast-stable-stringify "^1.0.0"
-    jayson "^3.4.4"
-    node-fetch "2"
-    rpc-websockets "^7.5.0"
-    superstruct "^0.14.2"
+"@socket.io/component-emitter@~3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
+  integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
 
 "@stablelib/aead@^1.0.1":
   version "1.0.1"
@@ -5265,7 +6013,7 @@
     "@stablelib/constant-time" "^1.0.1"
     "@stablelib/wipe" "^1.0.1"
 
-"@stablelib/random@^1.0.1", "@stablelib/random@^1.0.2":
+"@stablelib/random@1.0.2", "@stablelib/random@^1.0.1", "@stablelib/random@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@stablelib/random/-/random-1.0.2.tgz#2dece393636489bf7e19c51229dd7900eddf742c"
   integrity sha512-rIsE83Xpb7clHPVRlBj8qNe5L8ISQOzjghYQm/dZ7VaM2KHYwMW5adjQjrzTZCchFnNCNhkwtnOBa9HTMJCI8w==
@@ -5296,7 +6044,7 @@
   resolved "https://registry.yarnpkg.com/@stablelib/wipe/-/wipe-1.0.1.tgz#d21401f1d59ade56a62e139462a97f104ed19a36"
   integrity sha512-WfqfX/eXGiAd3RJe4VU2snh/ZPwtSjLG4ynQ/vYzvghTh7dHFcI1wl+nrkWG6lGhukOxOsUHfv8dUXr58D0ayg==
 
-"@stablelib/x25519@^1.0.3":
+"@stablelib/x25519@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@stablelib/x25519/-/x25519-1.0.3.tgz#13c8174f774ea9f3e5e42213cbf9fc68a3c7b7fd"
   integrity sha512-KnTbKmUhPhHavzobclVJQG5kuivH+qDLpe84iRqX3CLrKp881cF160JvXJ+hjn1aMyCwYOKeIZefIH/P5cJoRw==
@@ -5305,6 +6053,17 @@
     "@stablelib/random" "^1.0.2"
     "@stablelib/wipe" "^1.0.1"
 
+"@stylistic/eslint-plugin@2.10.1":
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/@stylistic/eslint-plugin/-/eslint-plugin-2.10.1.tgz#809924752a1a13ebff2b0b6d7884fd61d389a907"
+  integrity sha512-U+4yzNXElTf9q0kEfnloI9XbOyD4cnEQCxjUI94q0+W++0GAEQvJ/slwEj9lwjDHfGADRSr+Tco/z0XJvmDfCQ==
+  dependencies:
+    "@typescript-eslint/utils" "^8.12.2"
+    eslint-visitor-keys "^4.2.0"
+    espree "^10.3.0"
+    estraverse "^5.3.0"
+    picomatch "^4.0.2"
+
 "@svgr/babel-plugin-add-jsx-attribute@^6.5.1":
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.5.1.tgz#74a5d648bd0347bda99d82409d87b8ca80b9a1ba"
@@ -5725,77 +6484,48 @@
     "@swagger-api/apidom-parser-adapter-openapi-yaml-3-1" "^0.77.0"
     "@swagger-api/apidom-parser-adapter-yaml-1-2" "^0.77.0"
 
-"@swc/helpers@0.5.2":
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.2.tgz#85ea0c76450b61ad7d10a37050289eded783c27d"
-  integrity sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==
-  dependencies:
-    tslib "^2.4.0"
-
-"@tanstack/eslint-plugin-query@^5.0.5":
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/@tanstack/eslint-plugin-query/-/eslint-plugin-query-5.0.5.tgz#3f1fc0ad472462c3ca0a8a99601206049dfa7211"
-  integrity sha512-kYbh5Cboz1BzN6LeUWnI1B0BCikXMYQjxaEO7cV+0rycllU0qZqSEkd2LdgWIZhuLTc4WBt0li1s+O6RhM5Cog==
-  dependencies:
-    "@typescript-eslint/utils" "^5.54.0"
-
-"@tanstack/query-core@4.29.11":
-  version "4.29.11"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.29.11.tgz#fa338f7d6897c6be5de6d8dabd603d9b78ee48c7"
-  integrity sha512-8C+hF6SFAb/TlFZyS9FItgNwrw4PMa7YeX+KQYe2ZAiEz6uzg6yIr+QBzPkUwZ/L0bXvGd1sufTm3wotoz+GwQ==
-
-"@tanstack/query-core@5.4.3":
-  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.4.3.tgz#fbdd36ccf1acf70579980f2e7cf16d2c2aa2a5e9"
-  integrity sha512-fnI9ORjcuLGm1sNrKatKIosRQUpuqcD4SV7RqRSVmj8JSicX2aoMyKryHEBpVQvf6N4PaBVgBxQomjsbsGPssQ==
-
-"@tanstack/query-devtools@5.4.2":
-  version "5.4.2"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.4.2.tgz#1687645ba1b9ffc76c55ac7759461d331d0776bf"
-  integrity sha512-EXdaMXi8CxZuMp97J5mq6wy1RduOfoWFv5vtA1U+hyqb8Wst6M8kkkjDSdFvGZIRpYY4K8mKLlEFHNUZDG5dtw==
+"@swc/counter@0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@swc/counter/-/counter-0.1.3.tgz#cc7463bd02949611c6329596fccd2b0ec782b0e9"
+  integrity sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==
 
-"@tanstack/query-persist-client-core@4.29.11":
-  version "4.29.11"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-persist-client-core/-/query-persist-client-core-4.29.11.tgz#96b4b83bead480eb37e024a59fd59bfd84b0545e"
-  integrity sha512-CSmMZchr+446r79NJ/pjD2yfjqNqFV7k8BnqOq4yTZvXsaQLEIn3tsaU45IsPgs4N7g9OBfPUPDdapSQvck2WQ==
+"@swc/helpers@0.5.13":
+  version "0.5.13"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.13.tgz#33e63ff3cd0cade557672bd7888a39ce7d115a8c"
+  integrity sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==
   dependencies:
-    "@tanstack/query-core" "4.29.11"
+    tslib "^2.4.0"
 
-"@tanstack/query-sync-storage-persister@^4.27.1":
-  version "4.29.11"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-4.29.11.tgz#577ead9d08588a420a24ff0a8b77de427a2e6ca8"
-  integrity sha512-JP9U3m9YPkUelcE9+7D6fAEsNEp2ysKsH6qrd0WJtqsuhe5Zwr407NxaQ5uB2ow/MmhPOm8bxzMZw00Y7RagoQ==
+"@tanstack/eslint-plugin-query@5.60.1":
+  version "5.60.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/eslint-plugin-query/-/eslint-plugin-query-5.60.1.tgz#ce4d1307d5801834949607d8f60b2ff835ccf1fe"
+  integrity sha512-oCaWtFKa6WwX14fm/Sp486eTFXXgadiDzEYxhM/tiAlM+xzvPwp6ZHgR6sndmvYK+s/jbksDCTLIPS0PCH8L2g==
   dependencies:
-    "@tanstack/query-persist-client-core" "4.29.11"
+    "@typescript-eslint/utils" "^8.3.0"
 
-"@tanstack/react-query-devtools@^5.4.3":
-  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.4.3.tgz#7df56de0454104c229f25393cf57a957f6245186"
-  integrity sha512-J9EB50vpK5yvQ5W+AOp9jIQa+1mld+Wwc2GF3VLr2SEDhOyiTiHOjrFGKKL1Cal5Wg8UuS3vexf8trElrtg05A==
-  dependencies:
-    "@tanstack/query-devtools" "5.4.2"
+"@tanstack/query-core@5.55.4":
+  version "5.55.4"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.55.4.tgz#21ef6c6505bf108570f1c18f5f3b90efc8b1c2d6"
+  integrity sha512-uoRqNnRfzOH4OMIoxj8E2+Us89UIGXfau981qYJWsNMkFS1GXR4UIyzUTVGq4N7SDLHgFPpo6IOazqUV5gkMZA==
 
-"@tanstack/react-query-persist-client@^4.28.0":
-  version "4.29.12"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query-persist-client/-/react-query-persist-client-4.29.12.tgz#a3d3dc8dc4318689b275f7329db3619b710401e1"
-  integrity sha512-rh6zZJB+3j8lr+YsEkVadnqmUELmqNFZQzGGsHS5col/YOjYsMe9ppqaUjIMJ2aXnFXye50sbe4KxHhSGoaNVw==
-  dependencies:
-    "@tanstack/query-persist-client-core" "4.29.11"
+"@tanstack/query-devtools@5.55.1":
+  version "5.55.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.55.1.tgz#fa83c40e77d21f894ca447a62424cf62a6d75706"
+  integrity sha512-2g0TWQGlkyHs9maHIU5A7lRunG4Rj3Y5lOEenE+fydE4zk7GqRs7rKJBp7F74iqRo/cA9V6t1YYQWqd6YRBmcQ==
 
-"@tanstack/react-query@^4.28.0":
-  version "4.29.12"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.29.12.tgz#de111cf1d6c389b86acacfaf972302914cfa1208"
-  integrity sha512-zhcN6+zF6cxprxhTHQajHGlvxgK8npnp9uLe9yaWhGc6sYcPWXzyO4raL4HomUzQOPzu3jLvkriJQ7BOrDM8vA==
+"@tanstack/react-query-devtools@5.55.4":
+  version "5.55.4"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.55.4.tgz#4db46ac41e095180d75e33332ca34517f29e373c"
+  integrity sha512-4uXcG95JV6TrlefF6n0NDckgY9QVwNPKVcn81a+MmJyKkZ704otBjtuSgXNznx5zNFnGrWlgH1luoD+bZPASuQ==
   dependencies:
-    "@tanstack/query-core" "4.29.11"
-    use-sync-external-store "^1.2.0"
+    "@tanstack/query-devtools" "5.55.1"
 
-"@tanstack/react-query@^5.4.3":
-  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.4.3.tgz#cf59120690032e44b8c1c4c463cfb43aaad2fc5f"
-  integrity sha512-4aSOrRNa6yEmf7mws5QPTVMn8Lp7L38tFoTZ0c1ZmhIvbr8GIA0WT7X5N3yz/nuK8hUtjw9cAzBr4BPDZZ+tzA==
+"@tanstack/react-query@5.55.4":
+  version "5.55.4"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.55.4.tgz#4c8f54a05704e9f9a9ffc77a6dfa79b5a33f9905"
+  integrity sha512-e3uX5XkLD9oTV66/VsVpkYz3Ds/ps/Yk+V5d89xthAbtNIKKBEm4FdNb9yISFzGEGezUzVO68qmfmiSrtScvsg==
   dependencies:
-    "@tanstack/query-core" "5.4.3"
+    "@tanstack/query-core" "5.55.4"
 
 "@testing-library/dom@^9.0.0":
   version "9.3.0"
@@ -5883,6 +6613,17 @@
     "@types/babel__template" "*"
     "@types/babel__traverse" "*"
 
+"@types/babel__core@^7.20.5":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.5.tgz#3df15f27ba85319caa07ba08d0721889bb39c017"
+  integrity sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==
+  dependencies:
+    "@babel/parser" "^7.20.7"
+    "@babel/types" "^7.20.7"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
+
 "@types/babel__generator@*":
   version "7.6.4"
   resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.4.tgz#1f20ce4c5b1990b37900b63f050182d28c2439b7"
@@ -5942,13 +6683,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/connect@^3.4.33":
-  version "3.4.35"
-  resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.35.tgz#5fcf6ae445e4021d1fc2219a4873cc73a3bb2ad1"
-  integrity sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==
-  dependencies:
-    "@types/node" "*"
-
 "@types/content-disposition@*":
   version "0.5.8"
   resolved "https://registry.yarnpkg.com/@types/content-disposition/-/content-disposition-0.5.8.tgz#6742a5971f490dc41e59d277eee71361fea0b537"
@@ -6191,16 +6925,33 @@
   dependencies:
     "@types/ms" "*"
 
+"@types/dns-packet@^5.6.5":
+  version "5.6.5"
+  resolved "https://registry.yarnpkg.com/@types/dns-packet/-/dns-packet-5.6.5.tgz#49fc29a40f5d30227ed028fa1ee82601d3745e15"
+  integrity sha512-qXOC7XLOEe43ehtWJCMnQXvgcIpv6rPmQ1jXT98Ad8A3TB1Ue50jsCbSSSyuazScEuZ/Q026vHbrOTVkmwA+7Q==
+  dependencies:
+    "@types/node" "*"
+
 "@types/dom-to-image@^2.6.4":
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/@types/dom-to-image/-/dom-to-image-2.6.4.tgz#008411e23903cb0ee9e51a42ab8358c609541ee8"
   integrity sha512-UddUdGF1qulrSDulkz3K2Ypq527MR6ixlgAzqLbxSiQ0icx0XDlIV+h4+edmjq/1dqn0KgN0xGSe1kI9t+vGuw==
 
+"@types/estree@1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
+  integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
+
 "@types/estree@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.0.tgz#5fb2e536c1ae9bf35366eed879e827fa59ca41c2"
   integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==
 
+"@types/estree@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
+  integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
+
 "@types/express-serve-static-core@^4.17.33":
   version "4.17.41"
   resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.41.tgz#5077defa630c2e8d28aa9ffc2c01c157c305bef6"
@@ -6221,16 +6972,6 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
-"@types/express@4.17.18":
-  version "4.17.18"
-  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.18.tgz#efabf5c4495c1880df1bdffee604b143b29c4a95"
-  integrity sha512-Sxv8BSLLgsBYmcnGdGjjEjqET2U+AKAdCRODmMiq02FgjwuV75Ut85DRpvFjyw/Mk0vgUOliGRU0UUmuuZHByQ==
-  dependencies:
-    "@types/body-parser" "*"
-    "@types/express-serve-static-core" "^4.17.33"
-    "@types/qs" "*"
-    "@types/serve-static" "*"
-
 "@types/filesystem@*":
   version "0.0.32"
   resolved "https://registry.yarnpkg.com/@types/filesystem/-/filesystem-0.0.32.tgz#307df7cc084a2293c3c1a31151b178063e0a8edf"
@@ -6366,6 +7107,11 @@
     "@types/tough-cookie" "*"
     parse5 "^7.0.0"
 
+"@types/json-schema@^7.0.15":
+  version "7.0.15"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
+  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
+
 "@types/json-schema@^7.0.9":
   version "7.0.11"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
@@ -6402,10 +7148,10 @@
     "@types/koa-compose" "*"
     "@types/node" "*"
 
-"@types/koa@2.13.9":
-  version "2.13.9"
-  resolved "https://registry.yarnpkg.com/@types/koa/-/koa-2.13.9.tgz#8d989ac17d7f033475fbe34c4f906c9287c2041a"
-  integrity sha512-tPX3cN1dGrMn+sjCDEiQqXH2AqlPoPd594S/8zxwUm/ZbPsQXKqHPUypr2gjCPhHUc+nDJLduhh5lXI/1olnGQ==
+"@types/koa@2.14.0":
+  version "2.14.0"
+  resolved "https://registry.yarnpkg.com/@types/koa/-/koa-2.14.0.tgz#8939e8c3b695defc12f2ef9f38064509e564be18"
+  integrity sha512-DTDUyznHGNHAl+wd1n0z1jxNajduyTh8R53xoewuerdBzGo6Ogj6F2299BFtrexJw4NtgjsI5SMPCmV9gZwGXA==
   dependencies:
     "@types/accepts" "*"
     "@types/content-disposition" "*"
@@ -6416,10 +7162,10 @@
     "@types/koa-compose" "*"
     "@types/node" "*"
 
-"@types/koa__router@12.0.1":
-  version "12.0.1"
-  resolved "https://registry.yarnpkg.com/@types/koa__router/-/koa__router-12.0.1.tgz#e77b0c4081b1c56b004baf92afdd31766d5701f3"
-  integrity sha512-uqV+v6pCsfLZwK+Ar6XavKSZ6Cbsgw12bCEX9L0IKHj81LTWXcrayxJWkLtez5vOMQlq+ax+lZcuCyh9CgxYGw==
+"@types/koa__router@12.0.3":
+  version "12.0.3"
+  resolved "https://registry.yarnpkg.com/@types/koa__router/-/koa__router-12.0.3.tgz#3fb74ea1991cadd6c6712b6106657aa6e64afca4"
+  integrity sha512-5YUJVv6NwM1z7m6FuYpKfNLTZ932Z6EF6xy2BbtpJSyn13DKNQEkXVffFVSnJHxvwwWh2SAeumpjAYUELqgjyw==
   dependencies:
     "@types/koa" "*"
 
@@ -6467,6 +7213,11 @@
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
   integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
 
+"@types/murmurhash3js-revisited@^3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/murmurhash3js-revisited/-/murmurhash3js-revisited-3.0.3.tgz#94e247168a18342477639126da8f01353437e8d0"
+  integrity sha512-QvlqvYtGBYIDeO8dFdY4djkRubcrc+yTJtBc7n8VZPlJDUS/00A+PssbvERM8f9bYRmcaSEHPZgZojeQj7kzAA==
+
 "@types/mysql@2.15.22":
   version "2.15.22"
   resolved "https://registry.yarnpkg.com/@types/mysql/-/mysql-2.15.22.tgz#8705edb9872bf4aa9dbc004cd494e00334e5cdb4"
@@ -6479,24 +7230,24 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.8.4.tgz#54be907698f40de8a45770b48486aa3cbd3adff7"
   integrity sha512-WdlVphvfR/GJCLEMbNA8lJ0lhFNBj4SW3O+O5/cEGw9oYrv0al9zTwuQsq+myDUXgNx2jgBynoVgZ2MMJ6pbow==
 
-"@types/node@20.11.0":
-  version "20.11.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.0.tgz#8e0b99e70c0c1ade1a86c4a282f7b7ef87c9552f"
-  integrity sha512-o9bjXmDNcF7GbM4CNQpmi+TutCgap/K3w1JyKgxAjqx41zp9qlIAVFi0IhCNsJcXolEqLWhbFbEeL0PvYm4pcQ==
+"@types/node@20.16.7":
+  version "20.16.7"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.16.7.tgz#0a245bf5805add998a22b8b5adac612ee70190bc"
+  integrity sha512-QkDQjAY3gkvJNcZOWwzy3BN34RweT0OQ9zJyvLCU0kSK22dO2QYh/NHGfbEAYylPYzRB1/iXcojS79wOg5gFSw==
   dependencies:
-    undici-types "~5.26.4"
+    undici-types "~6.19.2"
 
-"@types/node@>=12.12.47", "@types/node@>=13.7.0":
+"@types/node@>=13.7.0":
   version "20.9.0"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.9.0.tgz#bfcdc230583aeb891cf51e73cfdaacdd8deae298"
   integrity sha512-nekiGu2NDb1BcVofVcEKMIwzlx4NjHlcjhoxxKBNLtz15Y1z7MYf549DFvkHSId02Ax6kGwWntIBPC3l/JZcmw==
   dependencies:
     undici-types "~5.26.4"
 
-"@types/node@^12.12.54":
-  version "12.20.55"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.55.tgz#c329cbd434c42164f846b909bd6f85b5537f6240"
-  integrity sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==
+"@types/node@>=8.0.0 <15":
+  version "14.18.63"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.63.tgz#1788fa8da838dbb5f9ea994b834278205db6ca2b"
+  integrity sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==
 
 "@types/papaparse@^5.3.5":
   version "5.3.5"
@@ -6574,17 +7325,10 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
-"@types/react-dom@18.0.5":
-  version "18.0.5"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.5.tgz#330b2d472c22f796e5531446939eacef8378444a"
-  integrity sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react-dom@^18.0.0":
-  version "18.0.9"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.9.tgz#ffee5e4bfc2a2f8774b15496474f8e7fe8d0b504"
-  integrity sha512-qnVvHxASt/H7i+XG1U1xMiY5t+IHcPGUK7TDMDzom08xa7e86eCeKOiLZezwCKVxJn6NEiiy2ekgX8aQssjIKg==
+"@types/react-dom@18.3.1", "@types/react-dom@^18.0.0":
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.1.tgz#1e4654c08a9cdcfb6594c780ac59b55aad42fe07"
+  integrity sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==
   dependencies:
     "@types/react" "*"
 
@@ -6609,29 +7353,14 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*":
-  version "18.0.37"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.37.tgz#7a784e2a8b8f83abb04dc6b9ed9c9b4c0aee9be7"
-  integrity sha512-4yaZZtkRN3ZIQD3KSEwkfcik8s0SWV+82dlJot1AbGYHCzJkWP3ENBY6wYeDRmKZ6HkrgoGAmR2HqdwYGp6OEw==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@18.0.9":
-  version "18.0.9"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.9.tgz#d6712a38bd6cd83469603e7359511126f122e878"
-  integrity sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==
+"@types/react@*", "@types/react@18.3.12":
+  version "18.3.12"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.12.tgz#99419f182ccd69151813b7ee24b792fe08774f60"
+  integrity sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==
   dependencies:
     "@types/prop-types" "*"
-    "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/scheduler@*":
-  version "0.16.3"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"
-  integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==
-
 "@types/semver@^7.3.12":
   version "7.3.13"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.13.tgz#da4bfd73f49bd541d28920ab0e2bf0ee80f71c91"
@@ -6698,13 +7427,6 @@
   resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
   integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
 
-"@types/ws@^7.4.4":
-  version "7.4.7"
-  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-7.4.7.tgz#f7c390a36f7a0679aa69de2d501319f4f8d9b702"
-  integrity sha512-JQbbmxZTZehdc2iszGKs5oC3NFnjeay7mtAWrdt7qNtAVK0g19muApzAy4bm9byz79xa2ZnO/BOBC2R8RC5Lww==
-  dependencies:
-    "@types/node" "*"
-
 "@types/ws@^8.5.3":
   version "8.5.3"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"
@@ -6724,56 +7446,48 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@typescript-eslint/eslint-plugin@8.14.0", "@typescript-eslint/eslint-plugin@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.14.0.tgz#7dc0e419c87beadc8f554bf5a42e5009ed3748dc"
+  integrity sha512-tqp8H7UWFaZj0yNO6bycd5YjMwxa6wIHOLZvWPkidwbgLCsBMetQoGj7DPuAlWa2yGO3H48xmPwjhsSPPCGU5w==
+  dependencies:
+    "@eslint-community/regexpp" "^4.10.0"
+    "@typescript-eslint/scope-manager" "8.14.0"
+    "@typescript-eslint/type-utils" "8.14.0"
+    "@typescript-eslint/utils" "8.14.0"
+    "@typescript-eslint/visitor-keys" "8.14.0"
+    graphemer "^1.4.0"
+    ignore "^5.3.1"
+    natural-compare "^1.4.0"
+    ts-api-utils "^1.3.0"
+
 "@typescript-eslint/eslint-plugin@^5.60.0":
-  version "5.60.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.60.1.tgz#81382d6ecb92b8dda70e91f9035611cb2fecd1c3"
-  integrity sha512-KSWsVvsJsLJv3c4e73y/Bzt7OpqMCADUO846bHcuWYSYM19bldbAeDv7dYyV0jwkbMfJ2XdlzwjhXtuD7OY6bw==
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz#aeef0328d172b9e37d9bab6dbc13b87ed88977db"
+  integrity sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==
   dependencies:
     "@eslint-community/regexpp" "^4.4.0"
-    "@typescript-eslint/scope-manager" "5.60.1"
-    "@typescript-eslint/type-utils" "5.60.1"
-    "@typescript-eslint/utils" "5.60.1"
+    "@typescript-eslint/scope-manager" "5.62.0"
+    "@typescript-eslint/type-utils" "5.62.0"
+    "@typescript-eslint/utils" "5.62.0"
     debug "^4.3.4"
-    grapheme-splitter "^1.0.4"
+    graphemer "^1.4.0"
     ignore "^5.2.0"
     natural-compare-lite "^1.4.0"
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/parser@^5.42.0":
-  version "5.59.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.59.0.tgz#0ad7cd019346cc5d150363f64869eca10ca9977c"
-  integrity sha512-qK9TZ70eJtjojSUMrrEwA9ZDQ4N0e/AuoOIgXuNBorXYcBDk397D2r5MIe1B3cok/oCtdNC5j+lUUpVB+Dpb+w==
+"@typescript-eslint/parser@8.14.0", "@typescript-eslint/parser@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.14.0.tgz#0a7e9dbc11bc07716ab2d7b1226217e9f6b51fc8"
+  integrity sha512-2p82Yn9juUJq0XynBXtFCyrBDb6/dJombnz6vbo6mgQEtWHfvHbQuEa9kAOVIt1c9YFwi7H6WxtPj1kg+80+RA==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.59.0"
-    "@typescript-eslint/types" "5.59.0"
-    "@typescript-eslint/typescript-estree" "5.59.0"
+    "@typescript-eslint/scope-manager" "8.14.0"
+    "@typescript-eslint/types" "8.14.0"
+    "@typescript-eslint/typescript-estree" "8.14.0"
+    "@typescript-eslint/visitor-keys" "8.14.0"
     debug "^4.3.4"
 
-"@typescript-eslint/scope-manager@5.45.0":
-  version "5.45.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.45.0.tgz#7a4ac1bfa9544bff3f620ab85947945938319a96"
-  integrity sha512-noDMjr87Arp/PuVrtvN3dXiJstQR1+XlQ4R1EvzG+NMgXi8CuMCXpb8JqNtFHKceVSQ985BZhfRdowJzbv4yKw==
-  dependencies:
-    "@typescript-eslint/types" "5.45.0"
-    "@typescript-eslint/visitor-keys" "5.45.0"
-
-"@typescript-eslint/scope-manager@5.59.0":
-  version "5.59.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.59.0.tgz#86501d7a17885710b6716a23be2e93fc54a4fe8c"
-  integrity sha512-tsoldKaMh7izN6BvkK6zRMINj4Z2d6gGhO2UsI8zGZY3XhLq1DndP3Ycjhi1JwdwPRwtLMW4EFPgpuKhbCGOvQ==
-  dependencies:
-    "@typescript-eslint/types" "5.59.0"
-    "@typescript-eslint/visitor-keys" "5.59.0"
-
-"@typescript-eslint/scope-manager@5.60.1":
-  version "5.60.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.60.1.tgz#35abdb47f500c68c08f2f2b4f22c7c79472854bb"
-  integrity sha512-Dn/LnN7fEoRD+KspEOV0xDMynEmR3iSHdgNsarlXNLGGtcUok8L4N71dxUgt3YvlO8si7E+BJ5Fe3wb5yUw7DQ==
-  dependencies:
-    "@typescript-eslint/types" "5.60.1"
-    "@typescript-eslint/visitor-keys" "5.60.1"
-
 "@typescript-eslint/scope-manager@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz#d9457ccc6a0b8d6b37d0eb252a23022478c5460c"
@@ -6782,74 +7496,43 @@
     "@typescript-eslint/types" "5.62.0"
     "@typescript-eslint/visitor-keys" "5.62.0"
 
-"@typescript-eslint/type-utils@5.60.1":
-  version "5.60.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.60.1.tgz#17770540e98d65ab4730c7aac618003f702893f4"
-  integrity sha512-vN6UztYqIu05nu7JqwQGzQKUJctzs3/Hg7E2Yx8rz9J+4LgtIDFWjjl1gm3pycH0P3mHAcEUBd23LVgfrsTR8A==
+"@typescript-eslint/scope-manager@8.14.0":
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.14.0.tgz#01f37c147a735cd78f0ff355e033b9457da1f373"
+  integrity sha512-aBbBrnW9ARIDn92Zbo7rguLnqQ/pOrUguVpbUwzOhkFg2npFDwTgPGqFqE0H5feXcOoJOfX3SxlJaKEVtq54dw==
   dependencies:
-    "@typescript-eslint/typescript-estree" "5.60.1"
-    "@typescript-eslint/utils" "5.60.1"
-    debug "^4.3.4"
-    tsutils "^3.21.0"
-
-"@typescript-eslint/types@5.45.0":
-  version "5.45.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.45.0.tgz#794760b9037ee4154c09549ef5a96599621109c5"
-  integrity sha512-QQij+u/vgskA66azc9dCmx+rev79PzX8uDHpsqSjEFtfF2gBUTRCpvYMh2gw2ghkJabNkPlSUCimsyBEQZd1DA==
-
-"@typescript-eslint/types@5.59.0":
-  version "5.59.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.59.0.tgz#3fcdac7dbf923ec5251545acdd9f1d42d7c4fe32"
-  integrity sha512-yR2h1NotF23xFFYKHZs17QJnB51J/s+ud4PYU4MqdZbzeNxpgUr05+dNeCN/bb6raslHvGdd6BFCkVhpPk/ZeA==
+    "@typescript-eslint/types" "8.14.0"
+    "@typescript-eslint/visitor-keys" "8.14.0"
 
-"@typescript-eslint/types@5.60.1":
-  version "5.60.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.60.1.tgz#a17473910f6b8d388ea83c9d7051af89c4eb7561"
-  integrity sha512-zDcDx5fccU8BA0IDZc71bAtYIcG9PowaOwaD8rjYbqwK7dpe/UMQl3inJ4UtUK42nOCT41jTSCwg76E62JpMcg==
-
-"@typescript-eslint/types@5.62.0":
+"@typescript-eslint/type-utils@5.62.0":
   version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
-  integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
-
-"@typescript-eslint/typescript-estree@5.45.0":
-  version "5.45.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.45.0.tgz#f70a0d646d7f38c0dfd6936a5e171a77f1e5291d"
-  integrity sha512-maRhLGSzqUpFcZgXxg1qc/+H0bT36lHK4APhp0AEUVrpSwXiRAomm/JGjSG+kNUio5kAa3uekCYu/47cnGn5EQ==
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz#286f0389c41681376cdad96b309cedd17d70346a"
+  integrity sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==
   dependencies:
-    "@typescript-eslint/types" "5.45.0"
-    "@typescript-eslint/visitor-keys" "5.45.0"
+    "@typescript-eslint/typescript-estree" "5.62.0"
+    "@typescript-eslint/utils" "5.62.0"
     debug "^4.3.4"
-    globby "^11.1.0"
-    is-glob "^4.0.3"
-    semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/typescript-estree@5.59.0":
-  version "5.59.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.0.tgz#8869156ee1dcfc5a95be3ed0e2809969ea28e965"
-  integrity sha512-sUNnktjmI8DyGzPdZ8dRwW741zopGxltGs/SAPgGL/AAgDpiLsCFLcMNSpbfXfmnNeHmK9h3wGmCkGRGAoUZAg==
+"@typescript-eslint/type-utils@8.14.0":
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-8.14.0.tgz#455c6af30c336b24a1af28bc4f81b8dd5d74d94d"
+  integrity sha512-Xcz9qOtZuGusVOH5Uk07NGs39wrKkf3AxlkK79RBK6aJC1l03CobXjJbwBPSidetAOV+5rEVuiT1VSBUOAsanQ==
   dependencies:
-    "@typescript-eslint/types" "5.59.0"
-    "@typescript-eslint/visitor-keys" "5.59.0"
+    "@typescript-eslint/typescript-estree" "8.14.0"
+    "@typescript-eslint/utils" "8.14.0"
     debug "^4.3.4"
-    globby "^11.1.0"
-    is-glob "^4.0.3"
-    semver "^7.3.7"
-    tsutils "^3.21.0"
+    ts-api-utils "^1.3.0"
 
-"@typescript-eslint/typescript-estree@5.60.1":
-  version "5.60.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.60.1.tgz#8c71824b7165b64d5ebd7aa42968899525959834"
-  integrity sha512-hkX70J9+2M2ZT6fhti5Q2FoU9zb+GeZK2SLP1WZlvUDqdMbEKhexZODD1WodNRyO8eS+4nScvT0dts8IdaBzfw==
-  dependencies:
-    "@typescript-eslint/types" "5.60.1"
-    "@typescript-eslint/visitor-keys" "5.60.1"
-    debug "^4.3.4"
-    globby "^11.1.0"
-    is-glob "^4.0.3"
-    semver "^7.3.7"
-    tsutils "^3.21.0"
+"@typescript-eslint/types@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
+  integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
+
+"@typescript-eslint/types@8.14.0":
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.14.0.tgz#0d33d8d0b08479c424e7d654855fddf2c71e4021"
+  integrity sha512-yjeB9fnO/opvLJFAsPNYlKPnEM8+z4og09Pk504dkqonT02AyL5Z9SSqlE0XqezS93v6CXn49VHvB2G7XSsl0g==
 
 "@typescript-eslint/typescript-estree@5.62.0":
   version "5.62.0"
@@ -6864,35 +7547,21 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/utils@5.60.1":
-  version "5.60.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.60.1.tgz#6861ebedbefba1ac85482d2bdef6f2ff1eb65b80"
-  integrity sha512-tiJ7FFdFQOWssFa3gqb94Ilexyw0JVxj6vBzaSpfN/8IhoKkDuSAenUKvsSHw2A/TMpJb26izIszTXaqygkvpQ==
-  dependencies:
-    "@eslint-community/eslint-utils" "^4.2.0"
-    "@types/json-schema" "^7.0.9"
-    "@types/semver" "^7.3.12"
-    "@typescript-eslint/scope-manager" "5.60.1"
-    "@typescript-eslint/types" "5.60.1"
-    "@typescript-eslint/typescript-estree" "5.60.1"
-    eslint-scope "^5.1.1"
-    semver "^7.3.7"
-
-"@typescript-eslint/utils@^5.10.0":
-  version "5.45.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.45.0.tgz#9cca2996eee1b8615485a6918a5c763629c7acf5"
-  integrity sha512-OUg2JvsVI1oIee/SwiejTot2OxwU8a7UfTFMOdlhD2y+Hl6memUSL4s98bpUTo8EpVEr0lmwlU7JSu/p2QpSvA==
+"@typescript-eslint/typescript-estree@8.14.0":
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.14.0.tgz#a7a3a5a53a6c09313e12fb4531d4ff582ee3c312"
+  integrity sha512-OPXPLYKGZi9XS/49rdaCbR5j/S14HazviBlUQFvSKz3npr3NikF+mrgK7CFVur6XEt95DZp/cmke9d5i3vtVnQ==
   dependencies:
-    "@types/json-schema" "^7.0.9"
-    "@types/semver" "^7.3.12"
-    "@typescript-eslint/scope-manager" "5.45.0"
-    "@typescript-eslint/types" "5.45.0"
-    "@typescript-eslint/typescript-estree" "5.45.0"
-    eslint-scope "^5.1.1"
-    eslint-utils "^3.0.0"
-    semver "^7.3.7"
+    "@typescript-eslint/types" "8.14.0"
+    "@typescript-eslint/visitor-keys" "8.14.0"
+    debug "^4.3.4"
+    fast-glob "^3.3.2"
+    is-glob "^4.0.3"
+    minimatch "^9.0.4"
+    semver "^7.6.0"
+    ts-api-utils "^1.3.0"
 
-"@typescript-eslint/utils@^5.54.0":
+"@typescript-eslint/utils@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86"
   integrity sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==
@@ -6906,29 +7575,15 @@
     eslint-scope "^5.1.1"
     semver "^7.3.7"
 
-"@typescript-eslint/visitor-keys@5.45.0":
-  version "5.45.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.45.0.tgz#e0d160e9e7fdb7f8da697a5b78e7a14a22a70528"
-  integrity sha512-jc6Eccbn2RtQPr1s7th6jJWQHBHI6GBVQkCHoJFQ5UreaKm59Vxw+ynQUPPY2u2Amquc+7tmEoC2G52ApsGNNg==
+"@typescript-eslint/utils@8.14.0", "@typescript-eslint/utils@^6.0.0 || ^7.0.0 || ^8.0.0", "@typescript-eslint/utils@^8.12.2", "@typescript-eslint/utils@^8.3.0":
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.14.0.tgz#ac2506875e03aba24e602364e43b2dfa45529dbd"
+  integrity sha512-OGqj6uB8THhrHj0Fk27DcHPojW7zKwKkPmHXHvQ58pLYp4hy8CSUdTKykKeh+5vFqTTVmjz0zCOOPKRovdsgHA==
   dependencies:
-    "@typescript-eslint/types" "5.45.0"
-    eslint-visitor-keys "^3.3.0"
-
-"@typescript-eslint/visitor-keys@5.59.0":
-  version "5.59.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.0.tgz#a59913f2bf0baeb61b5cfcb6135d3926c3854365"
-  integrity sha512-qZ3iXxQhanchCeaExlKPV3gDQFxMUmU35xfd5eCXB6+kUw1TUAbIy2n7QIrwz9s98DQLzNWyHp61fY0da4ZcbA==
-  dependencies:
-    "@typescript-eslint/types" "5.59.0"
-    eslint-visitor-keys "^3.3.0"
-
-"@typescript-eslint/visitor-keys@5.60.1":
-  version "5.60.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.60.1.tgz#19a877358bf96318ec35d90bfe6bd1445cce9434"
-  integrity sha512-xEYIxKcultP6E/RMKqube11pGjXH1DCo60mQoWhVYyKfLkwbIVVjYxmOenNMxILx0TjCujPTjjnTIVzm09TXIw==
-  dependencies:
-    "@typescript-eslint/types" "5.60.1"
-    eslint-visitor-keys "^3.3.0"
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@typescript-eslint/scope-manager" "8.14.0"
+    "@typescript-eslint/types" "8.14.0"
+    "@typescript-eslint/typescript-estree" "8.14.0"
 
 "@typescript-eslint/visitor-keys@5.62.0":
   version "5.62.0"
@@ -6938,6 +7593,14 @@
     "@typescript-eslint/types" "5.62.0"
     eslint-visitor-keys "^3.3.0"
 
+"@typescript-eslint/visitor-keys@8.14.0":
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.14.0.tgz#2418d5a54669af9658986ade4e6cfb7767d815ad"
+  integrity sha512-vG0XZo8AdTH9OE6VFRwAZldNc7qtJ/6NLGWak+BtENuEUXGZgFpihILPiBvKXvJ2nFu27XNGC6rKiwuaoMbYzQ==
+  dependencies:
+    "@typescript-eslint/types" "8.14.0"
+    eslint-visitor-keys "^3.4.3"
+
 "@vitejs/plugin-react@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-4.0.0.tgz#46d1c37c507447d10467be1c111595174555ef28"
@@ -6948,168 +7611,59 @@
     "@babel/plugin-transform-react-jsx-source" "^7.19.6"
     react-refresh "^0.14.0"
 
-"@vue/compiler-core@3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.3.11.tgz#9fa26f8c81b9b34365f94ce1ed4d0e6e6f94a2ac"
-  integrity sha512-h97/TGWBilnLuRaj58sxNrsUU66fwdRKLOLQ9N/5iNDfp+DZhYH9Obhe0bXxhedl8fjAgpRANpiZfbgWyruQ0w==
-  dependencies:
-    "@babel/parser" "^7.23.5"
-    "@vue/shared" "3.3.11"
-    estree-walker "^2.0.2"
-    source-map-js "^1.0.2"
-
-"@vue/compiler-dom@3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.3.11.tgz#36a76ea3a296d41bad133a6912cb0a847d969e4f"
-  integrity sha512-zoAiUIqSKqAJ81WhfPXYmFGwDRuO+loqLxvXmfUdR5fOitPoUiIeFI9cTTyv9MU5O1+ZZglJVTusWzy+wfk5hw==
-  dependencies:
-    "@vue/compiler-core" "3.3.11"
-    "@vue/shared" "3.3.11"
-
-"@vue/compiler-sfc@3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.3.11.tgz#acfae240c875d067e0e2c9a4e2d910074408c73b"
-  integrity sha512-U4iqPlHO0KQeK1mrsxCN0vZzw43/lL8POxgpzcJweopmqtoYy9nljJzWDIQS3EfjiYhfdtdk9Gtgz7MRXnz3GA==
-  dependencies:
-    "@babel/parser" "^7.23.5"
-    "@vue/compiler-core" "3.3.11"
-    "@vue/compiler-dom" "3.3.11"
-    "@vue/compiler-ssr" "3.3.11"
-    "@vue/reactivity-transform" "3.3.11"
-    "@vue/shared" "3.3.11"
-    estree-walker "^2.0.2"
-    magic-string "^0.30.5"
-    postcss "^8.4.32"
-    source-map-js "^1.0.2"
-
-"@vue/compiler-ssr@3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.3.11.tgz#598942a73b64f2bd3f95908b104a7fbb55fc41a2"
-  integrity sha512-Zd66ZwMvndxRTgVPdo+muV4Rv9n9DwQ4SSgWWKWkPFebHQfVYRrVjeygmmDmPewsHyznCNvJ2P2d6iOOhdv8Qg==
-  dependencies:
-    "@vue/compiler-dom" "3.3.11"
-    "@vue/shared" "3.3.11"
-
-"@vue/reactivity-transform@3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.3.11.tgz#2bd486f4eff60c8724309925618891e722fcfadc"
-  integrity sha512-fPGjH0wqJo68A0wQ1k158utDq/cRyZNlFoxGwNScE28aUFOKFEnCBsvyD8jHn+0kd0UKVpuGuaZEQ6r9FJRqCg==
-  dependencies:
-    "@babel/parser" "^7.23.5"
-    "@vue/compiler-core" "3.3.11"
-    "@vue/shared" "3.3.11"
-    estree-walker "^2.0.2"
-    magic-string "^0.30.5"
-
-"@vue/reactivity@3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.3.11.tgz#91f8e6c9ac60a595a5278c836b197628fd947a0d"
-  integrity sha512-D5tcw091f0nuu+hXq5XANofD0OXnBmaRqMYl5B3fCR+mX+cXJIGNw/VNawBqkjLNWETrFW0i+xH9NvDbTPVh7g==
-  dependencies:
-    "@vue/shared" "3.3.11"
-
-"@vue/runtime-core@3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.3.11.tgz#63defba57bc54c1dac68a95b56c2633b1419193d"
-  integrity sha512-g9ztHGwEbS5RyWaOpXuyIVFTschclnwhqEbdy5AwGhYOgc7m/q3NFwr50MirZwTTzX55JY8pSkeib9BX04NIpw==
-  dependencies:
-    "@vue/reactivity" "3.3.11"
-    "@vue/shared" "3.3.11"
-
-"@vue/runtime-dom@3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.3.11.tgz#1146d8d280b0fec4d2e18c4a4c8f8121d0cecc09"
-  integrity sha512-OlhtV1PVpbgk+I2zl+Y5rQtDNcCDs12rsRg71XwaA2/Rbllw6mBLMi57VOn8G0AjOJ4Mdb4k56V37+g8ukShpQ==
+"@vitejs/plugin-react@^4.2.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-4.3.1.tgz#d0be6594051ded8957df555ff07a991fb618b48e"
+  integrity sha512-m/V2syj5CuVnaxcUJOQRel/Wr31FFXRFlnOoq1TVtkCxsY5veGMTEmpWHndrhB2U8ScHtCQB1e+4hWYExQc6Lg==
   dependencies:
-    "@vue/runtime-core" "3.3.11"
-    "@vue/shared" "3.3.11"
-    csstype "^3.1.2"
+    "@babel/core" "^7.24.5"
+    "@babel/plugin-transform-react-jsx-self" "^7.24.5"
+    "@babel/plugin-transform-react-jsx-source" "^7.24.1"
+    "@types/babel__core" "^7.20.5"
+    react-refresh "^0.14.2"
 
-"@vue/server-renderer@3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.3.11.tgz#409aed8031a125791e2143552975ecd1958ad601"
-  integrity sha512-AIWk0VwwxCAm4wqtJyxBylRTXSy1wCLOKbWxHaHiu14wjsNYtiRCSgVuqEPVuDpErOlRdNnuRgipQfXRLjLN5A==
+"@wagmi/connectors@5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@wagmi/connectors/-/connectors-5.6.0.tgz#5c9f3aae2eb423efb4e3fbc471e0cf259cb2e7e3"
+  integrity sha512-yFVzJ0k/tj/QFvoBkU3phYPE3FhpdaSwWPruYBgCANGoL2bV9pDoeOIVvHRTJraldGw4X6I2zvIVZtSapKHaUw==
+  dependencies:
+    "@coinbase/wallet-sdk" "4.2.3"
+    "@metamask/sdk" "0.31.2"
+    "@safe-global/safe-apps-provider" "0.18.4"
+    "@safe-global/safe-apps-sdk" "9.1.0"
+    "@walletconnect/ethereum-provider" "2.17.0"
+    cbw-sdk "npm:@coinbase/wallet-sdk@3.9.3"
+
+"@wagmi/core@2.16.0":
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/@wagmi/core/-/core-2.16.0.tgz#b997b2544cd80b4aac4df25ccb2436bf77f9fbe1"
+  integrity sha512-sy4n7Jv6YCbT2jp4zQ/9H6l0A8StsN7P8mm2BRuODgW2w6Fj4j6h2xgYJD2tIjJHkLU/nvPJ7audZ55X7XQU/g==
+  dependencies:
+    eventemitter3 "5.0.1"
+    mipd "0.0.7"
+    zustand "5.0.0"
+
+"@walletconnect/core@2.17.0":
+  version "2.17.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/core/-/core-2.17.0.tgz#bf490e85a4702eff0f7cf81ba0d3c1016dffff33"
+  integrity sha512-On+uSaCfWdsMIQsECwWHZBmUXfrnqmv6B8SXRRuTJgd8tUpEvBkLQH4X7XkSm3zW6ozEkQTCagZ2ox2YPn3kbw==
   dependencies:
-    "@vue/compiler-ssr" "3.3.11"
-    "@vue/shared" "3.3.11"
-
-"@vue/shared@3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.3.11.tgz#f6a038e15237edefcc90dbfe7edb806dd355c7bd"
-  integrity sha512-u2G8ZQ9IhMWTMXaWqZycnK4UthG1fA238CD+DP4Dm4WJi5hdUKKLg0RMRaRpDPNMdkTwIDkp7WtD0Rd9BH9fLw==
-
-"@wagmi/chains@1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@wagmi/chains/-/chains-1.2.0.tgz#d59eaa70ec51a5fdcd113975926992acfb17ab12"
-  integrity sha512-dmDRipsE54JfyudOBkuhEexqQWcrZqxn/qiujG8SBzMh/az/AH5xlJSA+j1CPWTx9+QofSMF3B7A4gb6XRmSaQ==
-
-"@wagmi/connectors@3.1.10":
-  version "3.1.10"
-  resolved "https://registry.yarnpkg.com/@wagmi/connectors/-/connectors-3.1.10.tgz#830cd788579ef56a2526574914481f2d3aabc9f7"
-  integrity sha512-ZLJC1QaeiZarkF07Cr9mOlVjPO1Lf5TBx+JKBms2y5fUIXlKrxCfQgO/gDCureboI+Us2X3IRI659+XacSGpbA==
-  dependencies:
-    "@coinbase/wallet-sdk" "^3.6.6"
-    "@safe-global/safe-apps-provider" "^0.18.1"
-    "@safe-global/safe-apps-sdk" "^8.1.0"
-    "@walletconnect/ethereum-provider" "2.10.6"
-    "@walletconnect/legacy-provider" "^2.0.0"
-    "@walletconnect/modal" "2.6.2"
-    "@walletconnect/utils" "2.10.2"
-    abitype "0.8.7"
-    eventemitter3 "^4.0.7"
-
-"@wagmi/core@1.4.12":
-  version "1.4.12"
-  resolved "https://registry.yarnpkg.com/@wagmi/core/-/core-1.4.12.tgz#84558d1af746b2bcef02337dc3c46108242b1dd7"
-  integrity sha512-bLcYmmGgjtl3jAGo8X3Sm6oUwsdjbVxFMu9SWnwHdE4S9JdYeWM57dEhQgq8SYul2yQ7yY2/gimBf1Or0Ky3dQ==
-  dependencies:
-    "@wagmi/connectors" "3.1.10"
-    abitype "0.8.7"
-    eventemitter3 "^4.0.7"
-    zustand "^4.3.1"
-
-"@walletconnect/core@2.10.6":
-  version "2.10.6"
-  resolved "https://registry.yarnpkg.com/@walletconnect/core/-/core-2.10.6.tgz#786b0d2e2045c210c917e29bfa0498bbc210be20"
-  integrity sha512-Z4vh4ZdfcoQjgPEOxeuF9HUZCVLtV3MgRbS/awLIj/omDrFnOwlBhxi5Syr4Y8muVGC0ocRetQYHae0/gX5crQ==
-  dependencies:
-    "@walletconnect/heartbeat" "1.2.1"
-    "@walletconnect/jsonrpc-provider" "1.0.13"
-    "@walletconnect/jsonrpc-types" "1.0.3"
+    "@walletconnect/heartbeat" "1.2.2"
+    "@walletconnect/jsonrpc-provider" "1.0.14"
+    "@walletconnect/jsonrpc-types" "1.0.4"
     "@walletconnect/jsonrpc-utils" "1.0.8"
     "@walletconnect/jsonrpc-ws-connection" "1.0.14"
-    "@walletconnect/keyvaluestorage" "^1.1.1"
-    "@walletconnect/logger" "^2.0.1"
-    "@walletconnect/relay-api" "^1.0.9"
-    "@walletconnect/relay-auth" "^1.0.4"
-    "@walletconnect/safe-json" "^1.0.2"
-    "@walletconnect/time" "^1.0.2"
-    "@walletconnect/types" "2.10.6"
-    "@walletconnect/utils" "2.10.6"
-    events "^3.3.0"
+    "@walletconnect/keyvaluestorage" "1.1.1"
+    "@walletconnect/logger" "2.1.2"
+    "@walletconnect/relay-api" "1.0.11"
+    "@walletconnect/relay-auth" "1.0.4"
+    "@walletconnect/safe-json" "1.0.2"
+    "@walletconnect/time" "1.0.2"
+    "@walletconnect/types" "2.17.0"
+    "@walletconnect/utils" "2.17.0"
+    events "3.3.0"
     lodash.isequal "4.5.0"
-    uint8arrays "^3.1.0"
-
-"@walletconnect/crypto@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@walletconnect/crypto/-/crypto-1.0.3.tgz#7b8dd4d7e2884fe3543c7c07aea425eef5ef9dd4"
-  integrity sha512-+2jdORD7XQs76I2Odgr3wwrtyuLUXD/kprNVsjWRhhhdO9Mt6WqVzOPu0/t7OHSmgal8k7SoBQzUc5hu/8zL/g==
-  dependencies:
-    "@walletconnect/encoding" "^1.0.2"
-    "@walletconnect/environment" "^1.0.1"
-    "@walletconnect/randombytes" "^1.0.3"
-    aes-js "^3.1.2"
-    hash.js "^1.1.7"
-    tslib "1.14.1"
-
-"@walletconnect/encoding@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/encoding/-/encoding-1.0.2.tgz#cb3942ad038d6a6bf01158f66773062dd25724da"
-  integrity sha512-CrwSBrjqJ7rpGQcTL3kU+Ief+Bcuu9PH6JLOb+wM6NITX1GTxR/MfNwnQfhLKK6xpRAyj2/nM04OOH6wS8Imag==
-  dependencies:
-    is-typedarray "1.0.0"
-    tslib "1.14.1"
-    typedarray-to-buffer "3.1.5"
+    uint8arrays "3.1.0"
 
 "@walletconnect/environment@^1.0.1":
   version "1.0.1"
@@ -7118,23 +7672,23 @@
   dependencies:
     tslib "1.14.1"
 
-"@walletconnect/ethereum-provider@2.10.6":
-  version "2.10.6"
-  resolved "https://registry.yarnpkg.com/@walletconnect/ethereum-provider/-/ethereum-provider-2.10.6.tgz#53720771cc2d6accd452916a853ac927f26acbaa"
-  integrity sha512-bBQ+yUfxLv8VxNttgNKY7nED35gSVayO/BnLHbNKvyV1gpvSCla5mWB9MsXuQs70MK0g+/qtgRVSrOtdSubaNQ==
+"@walletconnect/ethereum-provider@2.17.0":
+  version "2.17.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/ethereum-provider/-/ethereum-provider-2.17.0.tgz#d74feaaed6180a6799e96760d7ee867ff3a083d2"
+  integrity sha512-b+KTAXOb6JjoxkwpgYQQKPUcTwENGmdEdZoIDLeRicUmZTn/IQKfkMoC2frClB4YxkyoVMtj1oMV2JAax+yu9A==
   dependencies:
-    "@walletconnect/jsonrpc-http-connection" "^1.0.7"
-    "@walletconnect/jsonrpc-provider" "^1.0.13"
-    "@walletconnect/jsonrpc-types" "^1.0.3"
-    "@walletconnect/jsonrpc-utils" "^1.0.8"
-    "@walletconnect/modal" "^2.4.3"
-    "@walletconnect/sign-client" "2.10.6"
-    "@walletconnect/types" "2.10.6"
-    "@walletconnect/universal-provider" "2.10.6"
-    "@walletconnect/utils" "2.10.6"
-    events "^3.3.0"
-
-"@walletconnect/events@^1.0.1":
+    "@walletconnect/jsonrpc-http-connection" "1.0.8"
+    "@walletconnect/jsonrpc-provider" "1.0.14"
+    "@walletconnect/jsonrpc-types" "1.0.4"
+    "@walletconnect/jsonrpc-utils" "1.0.8"
+    "@walletconnect/modal" "2.7.0"
+    "@walletconnect/sign-client" "2.17.0"
+    "@walletconnect/types" "2.17.0"
+    "@walletconnect/universal-provider" "2.17.0"
+    "@walletconnect/utils" "2.17.0"
+    events "3.3.0"
+
+"@walletconnect/events@1.0.1", "@walletconnect/events@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@walletconnect/events/-/events-1.0.1.tgz#2b5f9c7202019e229d7ccae1369a9e86bda7816c"
   integrity sha512-NPTqaoi0oPBVNuLv7qPaJazmGHs5JGyO8eEAk5VGKmJzDR7AHzD4k6ilox5kxk1iwiOnFopBOOMLs86Oa76HpQ==
@@ -7142,60 +7696,41 @@
     keyvaluestorage-interface "^1.0.0"
     tslib "1.14.1"
 
-"@walletconnect/heartbeat@1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@walletconnect/heartbeat/-/heartbeat-1.2.1.tgz#afaa3a53232ae182d7c9cff41c1084472d8f32e9"
-  integrity sha512-yVzws616xsDLJxuG/28FqtZ5rzrTA4gUjdEMTbWB5Y8V1XHRmqq4efAxCw5ie7WjbXFSUyBHaWlMR+2/CpQC5Q==
+"@walletconnect/heartbeat@1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/heartbeat/-/heartbeat-1.2.2.tgz#e8dc5179db7769950c6f9cf59b23516d9b95227d"
+  integrity sha512-uASiRmC5MwhuRuf05vq4AT48Pq8RMi876zV8rr8cV969uTOzWdB/k+Lj5yI2PBtB1bGQisGen7MM1GcZlQTBXw==
   dependencies:
     "@walletconnect/events" "^1.0.1"
     "@walletconnect/time" "^1.0.2"
-    tslib "1.14.1"
-
-"@walletconnect/jsonrpc-http-connection@^1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-http-connection/-/jsonrpc-http-connection-1.0.4.tgz#aeb0f7eae6565dd031f01d650ee73d358d760ee2"
-  integrity sha512-ji79pspdBhmIbTwve383tMaDu5Le9plW+oj5GE2aqzxIl3ib8JvRBZRn5lGEBGqVCvqB3MBJL7gBlEwpyRtoxQ==
-  dependencies:
-    "@walletconnect/jsonrpc-utils" "^1.0.4"
-    "@walletconnect/safe-json" "^1.0.1"
-    cross-fetch "^3.1.4"
-    tslib "1.14.1"
+    events "^3.3.0"
 
-"@walletconnect/jsonrpc-http-connection@^1.0.7":
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-http-connection/-/jsonrpc-http-connection-1.0.7.tgz#a6973569b8854c22da707a759d241e4f5c2d5a98"
-  integrity sha512-qlfh8fCfu8LOM9JRR9KE0s0wxP6ZG9/Jom8M0qsoIQeKF3Ni0FyV4V1qy/cc7nfI46SLQLSl4tgWSfLiE1swyQ==
+"@walletconnect/jsonrpc-http-connection@1.0.8":
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-http-connection/-/jsonrpc-http-connection-1.0.8.tgz#2f4c3948f074960a3edd07909560f3be13e2c7ae"
+  integrity sha512-+B7cRuaxijLeFDJUq5hAzNyef3e3tBDIxyaCNmFtjwnod5AGis3RToNqzFU33vpVcxFhofkpE7Cx+5MYejbMGw==
   dependencies:
     "@walletconnect/jsonrpc-utils" "^1.0.6"
     "@walletconnect/safe-json" "^1.0.1"
     cross-fetch "^3.1.4"
-    tslib "1.14.1"
+    events "^3.3.0"
 
-"@walletconnect/jsonrpc-provider@1.0.13", "@walletconnect/jsonrpc-provider@^1.0.13":
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-provider/-/jsonrpc-provider-1.0.13.tgz#9a74da648d015e1fffc745f0c7d629457f53648b"
-  integrity sha512-K73EpThqHnSR26gOyNEL+acEex3P7VWZe6KE12ZwKzAt2H4e5gldZHbjsu2QR9cLeJ8AXuO7kEMOIcRv1QEc7g==
+"@walletconnect/jsonrpc-provider@1.0.14":
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-provider/-/jsonrpc-provider-1.0.14.tgz#696f3e3b6d728b361f2e8b853cfc6afbdf2e4e3e"
+  integrity sha512-rtsNY1XqHvWj0EtITNeuf8PHMvlCLiS3EjQL+WOkxEOA4KPxsohFnBDeyPYiNm4ZvkQdLnece36opYidmtbmow==
   dependencies:
     "@walletconnect/jsonrpc-utils" "^1.0.8"
     "@walletconnect/safe-json" "^1.0.2"
-    tslib "1.14.1"
-
-"@walletconnect/jsonrpc-provider@^1.0.6":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-provider/-/jsonrpc-provider-1.0.6.tgz#e91321ef523f1904e6634e7866a0f3c6f056d2cd"
-  integrity sha512-f5vQxr53vUVQ51/9mRLb1OiNciT/546XZ68Byn9OYnDBGeGJXK2kQWDHp8sPWZbN5x0p7B6asdCWMVFJ6danlw==
-  dependencies:
-    "@walletconnect/jsonrpc-utils" "^1.0.4"
-    "@walletconnect/safe-json" "^1.0.1"
-    tslib "1.14.1"
+    events "^3.3.0"
 
-"@walletconnect/jsonrpc-types@1.0.3", "@walletconnect/jsonrpc-types@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-types/-/jsonrpc-types-1.0.3.tgz#65e3b77046f1a7fa8347ae02bc1b841abe6f290c"
-  integrity sha512-iIQ8hboBl3o5ufmJ8cuduGad0CQm3ZlsHtujv9Eu16xq89q+BG7Nh5VLxxUgmtpnrePgFkTwXirCTkwJH1v+Yw==
+"@walletconnect/jsonrpc-types@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-types/-/jsonrpc-types-1.0.4.tgz#ce1a667d79eadf2a2d9d002c152ceb68739c230c"
+  integrity sha512-P6679fG/M+wuWg9TY8mh6xFSdYnFyFjwFelxyISxMDrlbXokorEVXYOxiqEbrU3x1BmBoCAJJ+vtEaEoMlpCBQ==
   dependencies:
+    events "^3.3.0"
     keyvaluestorage-interface "^1.0.0"
-    tslib "1.14.1"
 
 "@walletconnect/jsonrpc-types@^1.0.2":
   version "1.0.2"
@@ -7205,7 +7740,15 @@
     keyvaluestorage-interface "^1.0.0"
     tslib "1.14.1"
 
-"@walletconnect/jsonrpc-utils@1.0.8", "@walletconnect/jsonrpc-utils@^1.0.6", "@walletconnect/jsonrpc-utils@^1.0.7", "@walletconnect/jsonrpc-utils@^1.0.8":
+"@walletconnect/jsonrpc-types@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-types/-/jsonrpc-types-1.0.3.tgz#65e3b77046f1a7fa8347ae02bc1b841abe6f290c"
+  integrity sha512-iIQ8hboBl3o5ufmJ8cuduGad0CQm3ZlsHtujv9Eu16xq89q+BG7Nh5VLxxUgmtpnrePgFkTwXirCTkwJH1v+Yw==
+  dependencies:
+    keyvaluestorage-interface "^1.0.0"
+    tslib "1.14.1"
+
+"@walletconnect/jsonrpc-utils@1.0.8", "@walletconnect/jsonrpc-utils@^1.0.6", "@walletconnect/jsonrpc-utils@^1.0.8":
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-utils/-/jsonrpc-utils-1.0.8.tgz#82d0cc6a5d6ff0ecc277cb35f71402c91ad48d72"
   integrity sha512-vdeb03bD8VzJUL6ZtzRYsFMq1eZQcM3EAzT0a3st59dyLfJ0wq+tKMpmGH7HlB7waD858UWgfIcudbPFsbzVdw==
@@ -7214,15 +7757,6 @@
     "@walletconnect/jsonrpc-types" "^1.0.3"
     tslib "1.14.1"
 
-"@walletconnect/jsonrpc-utils@^1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-utils/-/jsonrpc-utils-1.0.4.tgz#2009ba3907b02516f2caacd2fb871ff0d472b2cb"
-  integrity sha512-y0+tDxcTZ9BHBBKBJbjZxLUXb+zQZCylf7y/jTvDPNx76J0hYYc+F9zHzyqBLeorSKepLTk6yI8hw3NXbAQB3g==
-  dependencies:
-    "@walletconnect/environment" "^1.0.1"
-    "@walletconnect/jsonrpc-types" "^1.0.2"
-    tslib "1.14.1"
-
 "@walletconnect/jsonrpc-ws-connection@1.0.14":
   version "1.0.14"
   resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-ws-connection/-/jsonrpc-ws-connection-1.0.14.tgz#eec700e74766c7887de2bd76c91a0206628732aa"
@@ -7233,15 +7767,7 @@
     events "^3.3.0"
     ws "^7.5.1"
 
-"@walletconnect/keyvaluestorage@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/keyvaluestorage/-/keyvaluestorage-1.0.2.tgz#92f5ca0f54c1a88a093778842ce0c874d86369c8"
-  integrity sha512-U/nNG+VLWoPFdwwKx0oliT4ziKQCEoQ27L5Hhw8YOFGA2Po9A9pULUYNWhDgHkrb0gYDNt//X7wABcEWWBd3FQ==
-  dependencies:
-    safe-json-utils "^1.1.1"
-    tslib "1.14.1"
-
-"@walletconnect/keyvaluestorage@^1.1.1":
+"@walletconnect/keyvaluestorage@1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@walletconnect/keyvaluestorage/-/keyvaluestorage-1.1.1.tgz#dd2caddabfbaf80f6b8993a0704d8b83115a1842"
   integrity sha512-V7ZQq2+mSxAq7MrRqDxanTzu2RcElfK1PfNYiaVnJgJ7Q7G7hTVwF8voIBx92qsRyGHZihrwNPHuZd1aKkd0rA==
@@ -7250,118 +7776,47 @@
     idb-keyval "^6.2.1"
     unstorage "^1.9.0"
 
-"@walletconnect/legacy-client@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/legacy-client/-/legacy-client-2.0.0.tgz#9f2c09694789fd4b6c5d68d6423b44bac55aed30"
-  integrity sha512-v5L7rYk9loVnfvUf0mF+76bUPFaU5/Vh7mzL6/950CD/yoGdzYZ3Kj+L7mkC6HPMEGeQsBP1+sqBuiVGZ/aODA==
-  dependencies:
-    "@walletconnect/crypto" "^1.0.3"
-    "@walletconnect/encoding" "^1.0.2"
-    "@walletconnect/jsonrpc-utils" "^1.0.4"
-    "@walletconnect/legacy-types" "^2.0.0"
-    "@walletconnect/legacy-utils" "^2.0.0"
-    "@walletconnect/safe-json" "^1.0.1"
-    "@walletconnect/window-getters" "^1.0.1"
-    "@walletconnect/window-metadata" "^1.0.1"
-    detect-browser "^5.3.0"
-    query-string "^6.13.5"
-
-"@walletconnect/legacy-modal@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/legacy-modal/-/legacy-modal-2.0.0.tgz#d0fab01a1337a8f5d88cdb1430cbef2d46072bbf"
-  integrity sha512-jckNd8lMhm4X7dX9TDdxM3bXKJnaqkRs6K2Mo5j6GmbIF9Eyx40jZ5+q457RVxvM6ciZEDT5s1wBHWdWoOo+9Q==
-  dependencies:
-    "@walletconnect/legacy-types" "^2.0.0"
-    "@walletconnect/legacy-utils" "^2.0.0"
-    copy-to-clipboard "^3.3.3"
-    preact "^10.12.0"
-    qrcode "^1.5.1"
-
-"@walletconnect/legacy-provider@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/legacy-provider/-/legacy-provider-2.0.0.tgz#08e2db1e4c234743b2f30422bc8100bc42e8fc44"
-  integrity sha512-A8xPebMI1A+50HbWwTpFCbwP7G+1NGKdTKyg8BUUg3h3Y9JucpC1W6w/x0v1Xw7qFEqQnz74LoIN/A3ytH9xrQ==
-  dependencies:
-    "@walletconnect/jsonrpc-http-connection" "^1.0.4"
-    "@walletconnect/jsonrpc-provider" "^1.0.6"
-    "@walletconnect/legacy-client" "^2.0.0"
-    "@walletconnect/legacy-modal" "^2.0.0"
-    "@walletconnect/legacy-types" "^2.0.0"
-    "@walletconnect/legacy-utils" "^2.0.0"
-
-"@walletconnect/legacy-types@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/legacy-types/-/legacy-types-2.0.0.tgz#224278ae2874c6a2ca805c2d1d062a511dcf7227"
-  integrity sha512-sOVrA7HUdbI1OwKyPOQU0/DdvTSVFlsXWpAk2K2WvP2erTkBWPMTJq6cv2BmKdoJ3p6gLApT7sd+jHi3OF71uw==
-  dependencies:
-    "@walletconnect/jsonrpc-types" "^1.0.2"
-
-"@walletconnect/legacy-utils@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/legacy-utils/-/legacy-utils-2.0.0.tgz#e3a637c00783f9cd2ae139b640f82223ab78ed9d"
-  integrity sha512-CPWxSVVXw0kgNCxvU126g4GiV3mzXmC8IPJ15twE46aJ1FX+RHEIfAzFMFz2F2+fEhBxL63A7dwNQKDXorRPcQ==
-  dependencies:
-    "@walletconnect/encoding" "^1.0.2"
-    "@walletconnect/jsonrpc-utils" "^1.0.4"
-    "@walletconnect/legacy-types" "^2.0.0"
-    "@walletconnect/safe-json" "^1.0.1"
-    "@walletconnect/window-getters" "^1.0.1"
-    "@walletconnect/window-metadata" "^1.0.1"
-    detect-browser "^5.3.0"
-    query-string "^6.13.5"
-
-"@walletconnect/logger@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@walletconnect/logger/-/logger-2.0.1.tgz#7f489b96e9a1ff6bf3e58f0fbd6d69718bf844a8"
-  integrity sha512-SsTKdsgWm+oDTBeNE/zHxxr5eJfZmE9/5yp/Ku+zJtcTAjELb3DXueWkDXmE9h8uHIbJzIb5wj5lPdzyrjT6hQ==
+"@walletconnect/logger@2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/logger/-/logger-2.1.2.tgz#813c9af61b96323a99f16c10089bfeb525e2a272"
+  integrity sha512-aAb28I3S6pYXZHQm5ESB+V6rDqIYfsnHaQyzFbwUUBFY4H0OXx/YtTl8lvhUNhMMfb9UxbwEBS253TlXUYJWSw==
   dependencies:
+    "@walletconnect/safe-json" "^1.0.2"
     pino "7.11.0"
-    tslib "1.14.1"
 
-"@walletconnect/modal-core@2.6.2":
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/modal-core/-/modal-core-2.6.2.tgz#d73e45d96668764e0c8668ea07a45bb8b81119e9"
-  integrity sha512-cv8ibvdOJQv2B+nyxP9IIFdxvQznMz8OOr/oR/AaUZym4hjXNL/l1a2UlSQBXrVjo3xxbouMxLb3kBsHoYP2CA==
+"@walletconnect/modal-core@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/modal-core/-/modal-core-2.7.0.tgz#73c13c3b7b0abf9ccdbac9b242254a86327ce0a4"
+  integrity sha512-oyMIfdlNdpyKF2kTJowTixZSo0PGlCJRdssUN/EZdA6H6v03hZnf09JnwpljZNfir2M65Dvjm/15nGrDQnlxSA==
   dependencies:
     valtio "1.11.2"
 
-"@walletconnect/modal-ui@2.6.2":
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/modal-ui/-/modal-ui-2.6.2.tgz#fa57c087c57b7f76aaae93deab0f84bb68b59cf9"
-  integrity sha512-rbdstM1HPGvr7jprQkyPggX7rP4XiCG85ZA+zWBEX0dVQg8PpAgRUqpeub4xQKDgY7pY/xLRXSiCVdWGqvG2HA==
+"@walletconnect/modal-ui@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/modal-ui/-/modal-ui-2.7.0.tgz#dbbb7ee46a5a25f7d39db622706f2d197b268cbb"
+  integrity sha512-gERYvU7D7K1ANCN/8vUgsE0d2hnRemfAFZ2novm9aZBg7TEd/4EgB+AqbJ+1dc7GhOL6dazckVq78TgccHb7mQ==
   dependencies:
-    "@walletconnect/modal-core" "2.6.2"
+    "@walletconnect/modal-core" "2.7.0"
     lit "2.8.0"
     motion "10.16.2"
     qrcode "1.5.3"
 
-"@walletconnect/modal@2.6.2", "@walletconnect/modal@^2.4.3":
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/modal/-/modal-2.6.2.tgz#4b534a836f5039eeb3268b80be7217a94dd12651"
-  integrity sha512-eFopgKi8AjKf/0U4SemvcYw9zlLpx9njVN8sf6DAkowC2Md0gPU/UNEbH1Wwj407pEKnEds98pKWib1NN1ACoA==
+"@walletconnect/modal@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/modal/-/modal-2.7.0.tgz#55f969796d104cce1205f5f844d8f8438b79723a"
+  integrity sha512-RQVt58oJ+rwqnPcIvRFeMGKuXb9qkgSmwz4noF8JZGUym3gUAzVs+uW2NQ1Owm9XOJAV+sANrtJ+VoVq1ftElw==
   dependencies:
-    "@walletconnect/modal-core" "2.6.2"
-    "@walletconnect/modal-ui" "2.6.2"
+    "@walletconnect/modal-core" "2.7.0"
+    "@walletconnect/modal-ui" "2.7.0"
 
-"@walletconnect/randombytes@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@walletconnect/randombytes/-/randombytes-1.0.3.tgz#e795e4918367fd1e6a2215e075e64ab93e23985b"
-  integrity sha512-35lpzxcHFbTN3ABefC9W+uBpNZl1GC4Wpx0ed30gibfO/y9oLdy1NznbV96HARQKSBV9J9M/rrtIvf6a23jfYw==
-  dependencies:
-    "@walletconnect/encoding" "^1.0.2"
-    "@walletconnect/environment" "^1.0.1"
-    randombytes "^2.1.0"
-    tslib "1.14.1"
-
-"@walletconnect/relay-api@^1.0.9":
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/@walletconnect/relay-api/-/relay-api-1.0.9.tgz#f8c2c3993dddaa9f33ed42197fc9bfebd790ecaf"
-  integrity sha512-Q3+rylJOqRkO1D9Su0DPE3mmznbAalYapJ9qmzDgK28mYF9alcP3UwG/og5V7l7CFOqzCLi7B8BvcBUrpDj0Rg==
+"@walletconnect/relay-api@1.0.11":
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@walletconnect/relay-api/-/relay-api-1.0.11.tgz#80ab7ef2e83c6c173be1a59756f95e515fb63224"
+  integrity sha512-tLPErkze/HmC9aCmdZOhtVmYZq1wKfWTJtygQHoWtgg722Jd4homo54Cs4ak2RUFUZIGO2RsOpIcWipaua5D5Q==
   dependencies:
     "@walletconnect/jsonrpc-types" "^1.0.2"
-    tslib "1.14.1"
 
-"@walletconnect/relay-auth@^1.0.4":
+"@walletconnect/relay-auth@1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@walletconnect/relay-auth/-/relay-auth-1.0.4.tgz#0b5c55c9aa3b0ef61f526ce679f3ff8a5c4c2c7c"
   integrity sha512-kKJcS6+WxYq5kshpPaxGHdwf5y98ZwbfuS4EE/NkQzqrDFm5Cj+dP8LofzWvjrrLkZq7Afy7WrQMXdLy8Sx7HQ==
@@ -7373,6 +7828,13 @@
     tslib "1.14.1"
     uint8arrays "^3.0.0"
 
+"@walletconnect/safe-json@1.0.2", "@walletconnect/safe-json@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/safe-json/-/safe-json-1.0.2.tgz#7237e5ca48046e4476154e503c6d3c914126fa77"
+  integrity sha512-Ogb7I27kZ3LPC3ibn8ldyUr5544t3/STow9+lzz7Sfo808YD7SBWk7SAsdBFlYgP2zDRy2hS3sKRcuSRM0OTmA==
+  dependencies:
+    tslib "1.14.1"
+
 "@walletconnect/safe-json@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@walletconnect/safe-json/-/safe-json-1.0.1.tgz#9813fa0a7a544b16468730c2d7bed046ed160957"
@@ -7380,122 +7842,85 @@
   dependencies:
     tslib "1.14.1"
 
-"@walletconnect/safe-json@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/safe-json/-/safe-json-1.0.2.tgz#7237e5ca48046e4476154e503c6d3c914126fa77"
-  integrity sha512-Ogb7I27kZ3LPC3ibn8ldyUr5544t3/STow9+lzz7Sfo808YD7SBWk7SAsdBFlYgP2zDRy2hS3sKRcuSRM0OTmA==
-  dependencies:
-    tslib "1.14.1"
-
-"@walletconnect/sign-client@2.10.6":
-  version "2.10.6"
-  resolved "https://registry.yarnpkg.com/@walletconnect/sign-client/-/sign-client-2.10.6.tgz#722d2c2844565e2826dce6a6d3a36c9b3ca1ea91"
-  integrity sha512-EvUWjaZBQu2yKnH5/5F2qzbuiIuUN9ZgrNKgvXkw5z1Dq5RJCks0S9/MFlKH/ZSGqXnLl7uAzBXtoX4sMgbCMA==
+"@walletconnect/sign-client@2.17.0":
+  version "2.17.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/sign-client/-/sign-client-2.17.0.tgz#efe811b1bb10082d964e2f0378aaa1b40f424503"
+  integrity sha512-sErYwvSSHQolNXni47L3Bm10ptJc1s1YoJvJd34s5E9h9+d3rj7PrhbiW9X82deN+Dm5oA8X9tC4xty1yIBrVg==
   dependencies:
-    "@walletconnect/core" "2.10.6"
-    "@walletconnect/events" "^1.0.1"
-    "@walletconnect/heartbeat" "1.2.1"
+    "@walletconnect/core" "2.17.0"
+    "@walletconnect/events" "1.0.1"
+    "@walletconnect/heartbeat" "1.2.2"
     "@walletconnect/jsonrpc-utils" "1.0.8"
-    "@walletconnect/logger" "^2.0.1"
-    "@walletconnect/time" "^1.0.2"
-    "@walletconnect/types" "2.10.6"
-    "@walletconnect/utils" "2.10.6"
-    events "^3.3.0"
+    "@walletconnect/logger" "2.1.2"
+    "@walletconnect/time" "1.0.2"
+    "@walletconnect/types" "2.17.0"
+    "@walletconnect/utils" "2.17.0"
+    events "3.3.0"
 
-"@walletconnect/time@^1.0.2":
+"@walletconnect/time@1.0.2", "@walletconnect/time@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@walletconnect/time/-/time-1.0.2.tgz#6c5888b835750ecb4299d28eecc5e72c6d336523"
   integrity sha512-uzdd9woDcJ1AaBZRhqy5rNC9laqWGErfc4dxA9a87mPdKOgWMD85mcFo9dIYIts/Jwocfwn07EC6EzclKubk/g==
   dependencies:
     tslib "1.14.1"
 
-"@walletconnect/types@2.10.2":
-  version "2.10.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-2.10.2.tgz#68e433a29ec2cf42d79d8b50c77bd5c1d91db721"
-  integrity sha512-luNV+07Wdla4STi9AejseCQY31tzWKQ5a7C3zZZaRK/di+rFaAAb7YW04OP4klE7tw/mJRGPTlekZElmHxO8kQ==
-  dependencies:
-    "@walletconnect/events" "^1.0.1"
-    "@walletconnect/heartbeat" "1.2.1"
-    "@walletconnect/jsonrpc-types" "1.0.3"
-    "@walletconnect/keyvaluestorage" "^1.0.2"
-    "@walletconnect/logger" "^2.0.1"
-    events "^3.3.0"
-
-"@walletconnect/types@2.10.6":
-  version "2.10.6"
-  resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-2.10.6.tgz#d9920ed4fd0113e0addbda8e7e73a5176a3163fd"
-  integrity sha512-WgHfiTG1yakmxheaBRiXhUdEmgxwrvsAdOIWaMf/spvrzVKYh6sHI3oyEEky5qj5jjiMiyQBeB57QamzCotbcQ==
-  dependencies:
-    "@walletconnect/events" "^1.0.1"
-    "@walletconnect/heartbeat" "1.2.1"
-    "@walletconnect/jsonrpc-types" "1.0.3"
-    "@walletconnect/keyvaluestorage" "^1.1.1"
-    "@walletconnect/logger" "^2.0.1"
-    events "^3.3.0"
-
-"@walletconnect/universal-provider@2.10.6":
-  version "2.10.6"
-  resolved "https://registry.yarnpkg.com/@walletconnect/universal-provider/-/universal-provider-2.10.6.tgz#1a6c42517581f11ce275474bc70d0eb4f1044525"
-  integrity sha512-CEivusqqoD31BhCTKp08DnrccfGjwD9MFjZs5BNRorDteRFE8zVm9LmP6DSiNJCw82ZajGlZThggLQ/BAATfwA==
+"@walletconnect/types@2.17.0":
+  version "2.17.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-2.17.0.tgz#20eda5791e3172f8ab9146caa3f317701d4b3232"
+  integrity sha512-i1pn9URpvt9bcjRDkabuAmpA9K7mzyKoLJlbsAujRVX7pfaG7wur7u9Jz0bk1HxvuABL5LHNncTnVKSXKQ5jZA==
   dependencies:
-    "@walletconnect/jsonrpc-http-connection" "^1.0.7"
-    "@walletconnect/jsonrpc-provider" "1.0.13"
-    "@walletconnect/jsonrpc-types" "^1.0.2"
-    "@walletconnect/jsonrpc-utils" "^1.0.7"
-    "@walletconnect/logger" "^2.0.1"
-    "@walletconnect/sign-client" "2.10.6"
-    "@walletconnect/types" "2.10.6"
-    "@walletconnect/utils" "2.10.6"
-    events "^3.3.0"
+    "@walletconnect/events" "1.0.1"
+    "@walletconnect/heartbeat" "1.2.2"
+    "@walletconnect/jsonrpc-types" "1.0.4"
+    "@walletconnect/keyvaluestorage" "1.1.1"
+    "@walletconnect/logger" "2.1.2"
+    events "3.3.0"
 
-"@walletconnect/utils@2.10.2":
-  version "2.10.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-2.10.2.tgz#1f2c6a2f1bb95bcc4517b1e94aa7164c9286eb46"
-  integrity sha512-syxXRpc2yhSknMu3IfiBGobxOY7fLfLTJuw+ppKaeO6WUdZpIit3wfuGOcc0Ms3ZPFCrGfyGOoZsCvgdXtptRg==
+"@walletconnect/universal-provider@2.17.0":
+  version "2.17.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/universal-provider/-/universal-provider-2.17.0.tgz#c9d4bbd9b8f0e41b500b2488ccbc207dc5f7a170"
+  integrity sha512-d3V5Be7AqLrvzcdMZSBS8DmGDRdqnyLk1DWmRKAGgR6ieUWykhhUKlvfeoZtvJrIXrY7rUGYpH1X41UtFkW5Pw==
   dependencies:
-    "@stablelib/chacha20poly1305" "1.0.1"
-    "@stablelib/hkdf" "1.0.1"
-    "@stablelib/random" "^1.0.2"
-    "@stablelib/sha256" "1.0.1"
-    "@stablelib/x25519" "^1.0.3"
-    "@walletconnect/relay-api" "^1.0.9"
-    "@walletconnect/safe-json" "^1.0.2"
-    "@walletconnect/time" "^1.0.2"
-    "@walletconnect/types" "2.10.2"
-    "@walletconnect/window-getters" "^1.0.1"
-    "@walletconnect/window-metadata" "^1.0.1"
-    detect-browser "5.3.0"
-    query-string "7.1.3"
-    uint8arrays "^3.1.0"
+    "@walletconnect/jsonrpc-http-connection" "1.0.8"
+    "@walletconnect/jsonrpc-provider" "1.0.14"
+    "@walletconnect/jsonrpc-types" "1.0.4"
+    "@walletconnect/jsonrpc-utils" "1.0.8"
+    "@walletconnect/logger" "2.1.2"
+    "@walletconnect/sign-client" "2.17.0"
+    "@walletconnect/types" "2.17.0"
+    "@walletconnect/utils" "2.17.0"
+    events "3.3.0"
 
-"@walletconnect/utils@2.10.6":
-  version "2.10.6"
-  resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-2.10.6.tgz#749b37d14e291e346862e7027ec7548463350226"
-  integrity sha512-oRsWWhN2+hi3aiDXrQEOfysz6FHQJGXLsNQPVt+WIBJplO6Szmdau9dbleD88u1iiT4GKPqE0R9FOYvvPm1H/w==
+"@walletconnect/utils@2.17.0":
+  version "2.17.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-2.17.0.tgz#02b3af0b80d0c1a994d692d829d066271b04d071"
+  integrity sha512-1aeQvjwsXy4Yh9G6g2eGmXrEl+BzkNjHRdCrGdMYqFTFa8ROEJfTGsSH3pLsNDlOY94CoBUvJvM55q/PMoN/FQ==
   dependencies:
     "@stablelib/chacha20poly1305" "1.0.1"
     "@stablelib/hkdf" "1.0.1"
-    "@stablelib/random" "^1.0.2"
+    "@stablelib/random" "1.0.2"
     "@stablelib/sha256" "1.0.1"
-    "@stablelib/x25519" "^1.0.3"
-    "@walletconnect/relay-api" "^1.0.9"
-    "@walletconnect/safe-json" "^1.0.2"
-    "@walletconnect/time" "^1.0.2"
-    "@walletconnect/types" "2.10.6"
-    "@walletconnect/window-getters" "^1.0.1"
-    "@walletconnect/window-metadata" "^1.0.1"
+    "@stablelib/x25519" "1.0.3"
+    "@walletconnect/relay-api" "1.0.11"
+    "@walletconnect/relay-auth" "1.0.4"
+    "@walletconnect/safe-json" "1.0.2"
+    "@walletconnect/time" "1.0.2"
+    "@walletconnect/types" "2.17.0"
+    "@walletconnect/window-getters" "1.0.1"
+    "@walletconnect/window-metadata" "1.0.1"
     detect-browser "5.3.0"
+    elliptic "^6.5.7"
     query-string "7.1.3"
-    uint8arrays "^3.1.0"
+    uint8arrays "3.1.0"
 
-"@walletconnect/window-getters@^1.0.1":
+"@walletconnect/window-getters@1.0.1", "@walletconnect/window-getters@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@walletconnect/window-getters/-/window-getters-1.0.1.tgz#f36d1c72558a7f6b87ecc4451fc8bd44f63cbbdc"
   integrity sha512-vHp+HqzGxORPAN8gY03qnbTMnhqIwjeRJNOMOAzePRg4xVEEE2WvYsI9G2NMjOknA8hnuYbU3/hwLcKbjhc8+Q==
   dependencies:
     tslib "1.14.1"
 
-"@walletconnect/window-metadata@^1.0.1":
+"@walletconnect/window-metadata@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@walletconnect/window-metadata/-/window-metadata-1.0.1.tgz#2124f75447b7e989e4e4e1581d55d25bc75f7be5"
   integrity sha512-9koTqyGrM2cqFRW517BPY/iEtUDx2r1+Pwwu5m7sJ7ka79wi3EyqhqcICk/yDmv6jAS1rjKgTKXlEhanYjijcA==
@@ -7503,103 +7928,6 @@
     "@walletconnect/window-getters" "^1.0.1"
     tslib "1.14.1"
 
-"@web3modal/common@3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@web3modal/common/-/common-3.5.0.tgz#010f24c7170c70fbad15fae9500ede8a18b43e0d"
-  integrity sha512-cpNFf6TiPYXEozYtIzLH9PcWSlFeoeDM6hTiXEVNutJeFRppFICLOAsyFoa7MszexFJaZ21cAxj/PzI2GIKGjA==
-  dependencies:
-    dayjs "1.11.10"
-
-"@web3modal/core@3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@web3modal/core/-/core-3.5.0.tgz#089c47c8dc9a41f1f3c50374d682860b7c34e81c"
-  integrity sha512-yZFk4YZDcmOhRyKkQYP0xdxK3JfdVwayive6UyBRY1bOxl4V4PAs+vRNLNY/3LulMMpqaHZGuD1zty1GXJ7INA==
-  dependencies:
-    "@web3modal/common" "3.5.0"
-    valtio "1.12.1"
-
-"@web3modal/polyfills@3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@web3modal/polyfills/-/polyfills-3.5.0.tgz#e3ee329a14de924ba796dccaa58dfafe42ac5819"
-  integrity sha512-QxVgUd+GKENGLo84bNTXjHk78l61Yr65LLvq5GPQWwrIPWFDqP2Nf7ixtaI36tTx29VN2SVyzBXGMhtrL73ZTg==
-  dependencies:
-    buffer "6.0.3"
-
-"@web3modal/scaffold-react@3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@web3modal/scaffold-react/-/scaffold-react-3.5.0.tgz#3054b1a9d95a69dbf32d91c539b9bb475bf7e8db"
-  integrity sha512-4F4QkUMa3VFcmbP2gYOQ+h4x23EFa13BcWEZepQ47q9HbW/sL3zLmS7k44EpyhLMSEX4HrPHXiUlGTr9rK038g==
-  dependencies:
-    "@web3modal/scaffold" "3.5.0"
-
-"@web3modal/scaffold-utils@3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@web3modal/scaffold-utils/-/scaffold-utils-3.5.0.tgz#c05d136538277899d4c6deb76993a5e4ade94767"
-  integrity sha512-RpNp5N+c8oaPyy48u9pOj65uuZDmMAluj2ZUWRoh3FqoN+gshpQsCbbPwtuTug4MsGc84i8RJorTEargzrKthg==
-  dependencies:
-    "@web3modal/polyfills" "3.5.0"
-    "@web3modal/scaffold" "3.5.0"
-
-"@web3modal/scaffold-vue@3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@web3modal/scaffold-vue/-/scaffold-vue-3.5.0.tgz#04222fd36a4421a860c9662f73accb3bd51b6f94"
-  integrity sha512-babm6SpuOeYxyTfdg9v603lYCrOFbFg1Y8KHTCAISu3Tk4GEnJ99wQVUE1ujX2CHoLU8GvAeyVKszJniKyPaJQ==
-  dependencies:
-    "@web3modal/scaffold" "3.5.0"
-
-"@web3modal/scaffold@3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@web3modal/scaffold/-/scaffold-3.5.0.tgz#808def7fe15c729e85a7f7ff59689eebd4ba5b52"
-  integrity sha512-wBiOeFdpANOiXqf2o0bi1cd+P427oBf5p3hb5nRJ4abBOPtjr6g0rEQgdLwtalBRt4K4qLAElOwem6toRVViig==
-  dependencies:
-    "@web3modal/core" "3.5.0"
-    "@web3modal/ui" "3.5.0"
-    lit "3.1.0"
-
-"@web3modal/siwe@*":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@web3modal/siwe/-/siwe-3.5.0.tgz#5f7fa6a7209c6ddddcd008ad47bb4dc3815d4a37"
-  integrity sha512-i9AvSH3uA93lu7z79d90aMaHx3Kn/EhblRJa2NOykADuAZX3UeXkX9KX7pkLVEYD1TkQN4mOHTFRQ6LeXq9EcA==
-  dependencies:
-    "@web3modal/core" "3.5.0"
-    "@web3modal/scaffold-utils" "3.5.0"
-  optionalDependencies:
-    react ">=17"
-    react-dom ">=17"
-    vue ">=3"
-
-"@web3modal/ui@3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@web3modal/ui/-/ui-3.5.0.tgz#e925cf829d5b0904c5693094db1c3a95c4ee5c1a"
-  integrity sha512-1H8pHCxcMDPxx1jKYMycSqilVGKDnKEGqVUa+NBhu9YeebIqB9WB5wWhyROLADsX/XzKwXUqhQndHDpcLyMyFw==
-  dependencies:
-    lit "3.1.0"
-    qrcode "1.5.3"
-
-"@web3modal/wagmi@3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@web3modal/wagmi/-/wagmi-3.5.0.tgz#c0f6e92ff4c5e16febac74eddc180333bb039a98"
-  integrity sha512-bQoytNkcVbjWfZsePKAv+XF9KDtDx1iqitoC4RPold9oB5RukEgGNHFQ7AcDKTwjkmiE3JqwyubQyvupZ2Z/Yg==
-  dependencies:
-    "@web3modal/polyfills" "3.5.0"
-    "@web3modal/scaffold" "3.5.0"
-    "@web3modal/scaffold-react" "3.5.0"
-    "@web3modal/scaffold-utils" "3.5.0"
-    "@web3modal/scaffold-vue" "3.5.0"
-    "@web3modal/wallet" "3.5.0"
-  optionalDependencies:
-    "@web3modal/siwe" "*"
-    react ">=17"
-    react-dom ">=17"
-    vue ">=3"
-
-"@web3modal/wallet@3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@web3modal/wallet/-/wallet-3.5.0.tgz#1123e84d6dad20957de2223eeab5bb70a9d27fc4"
-  integrity sha512-uNAOZS94Dfzp1ha3X1MztFS4R6XuOZ/Nfe0oiSvLAbeXb2pbV/JDJR1g0LjYiNU/XsDWYEW9WYeRUyg9ZLdUdg==
-  dependencies:
-    zod "3.22.4"
-
 "@xstate/fsm@1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@xstate/fsm/-/fsm-1.4.0.tgz#6fd082336fde4d026e9e448576189ee5265fa51a"
@@ -7620,34 +7948,31 @@
   resolved "https://registry.yarnpkg.com/@zag-js/focus-visible/-/focus-visible-0.2.2.tgz#56233480ca1275d3218fb2e10696a33d1a6b9e64"
   integrity sha512-0j2gZq8HiZ51z4zNnSkF1iSkqlwRDvdH+son3wHdoz+7IUdMN/5Exd4TxMJ+gq2Of1DiXReYLL9qqh2PdQ4wgA==
 
-JSONStream@^1.3.5:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
-  integrity sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==
-  dependencies:
-    jsonparse "^1.2.0"
-    through ">=2.2.7 <3"
-
 abab@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
   integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
 
-abitype@0.8.11:
-  version "0.8.11"
-  resolved "https://registry.yarnpkg.com/abitype/-/abitype-0.8.11.tgz#66e1cf2cbf46f48d0e57132d7c1c392447536cc1"
-  integrity sha512-bM4v2dKvX08sZ9IU38IN5BKmN+ZkOSd2oI4a9f0ejHYZQYV6cDr7j+d95ga0z2XHG36Y4jzoG5Z7qDqxp7fi/A==
-
-abitype@0.8.7:
-  version "0.8.7"
-  resolved "https://registry.yarnpkg.com/abitype/-/abitype-0.8.7.tgz#e4b3f051febd08111f486c0cc6a98fa72d033622"
-  integrity sha512-wQ7hV8Yg/yKmGyFpqrNZufCxbszDe5es4AZGYPBitocfSqXtjrTG9JMWFcc4N30ukl2ve48aBTwt7NJxVQdU3w==
-
 abitype@0.9.8:
   version "0.9.8"
   resolved "https://registry.yarnpkg.com/abitype/-/abitype-0.9.8.tgz#1f120b6b717459deafd213dfbf3a3dd1bf10ae8c"
   integrity sha512-puLifILdm+8sjyss4S+fsUN09obiT1g2YW6CtcQF+QDzxR0euzgEB29MZujC6zMk2a6SVmtttq1fc6+YFA7WYQ==
 
+abitype@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/abitype/-/abitype-1.0.5.tgz#29d0daa3eea867ca90f7e4123144c1d1270774b6"
+  integrity sha512-YzDhti7cjlfaBhHutMaboYB21Ha3rXR9QTkNJFzYC4kC8YclaiwPBBBJY8ejFdu2wnJeZCVZSMlQJ7fi8S6hsw==
+
+abitype@1.0.6, abitype@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/abitype/-/abitype-1.0.6.tgz#76410903e1d88e34f1362746e2d407513c38565b"
+  integrity sha512-MMSqYh4+C/aVqI2RQaWqbvI4Kxo5cQV40WQ4QFtDnNzCkqChm8MuENhElmynZlO0qUy/ObkEUaXtKqYnx1Kp3A==
+
+abitype@1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/abitype/-/abitype-1.0.7.tgz#876a0005d211e1c9132825d45bcee7b46416b284"
+  integrity sha512-ZfYYSktDQUwc2eduYu8C4wOs+RDPmnRYMh7zNfzeMtGGgb0U+6tLGjixUic6mXf5xKKCcgT5Qp6cv39tOARVFw==
+
 abort-controller@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
@@ -7655,6 +7980,11 @@ abort-controller@^3.0.0:
   dependencies:
     event-target-shim "^5.0.0"
 
+abortcontroller-polyfill@^1.4.0:
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.5.tgz#6738495f4e901fbb57b6c0611d0c75f76c485bed"
+  integrity sha512-JMJ5soJWP18htbbxJjG7bG6yuI6pRhgJ0scHHTfkUjf6wjP912xZWvM+A4sJK3gqd9E8fcPbDnOefbA9Th/FIQ==
+
 acorn-globals@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-7.0.1.tgz#0dbf05c44fa7c94332914c02066d5beff62c40c3"
@@ -7693,21 +8023,16 @@ acorn@^8.1.0, acorn@^8.4.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.1.tgz#0a3f9cbecc4ec3bea6f0a80b66ae8dd2da250b73"
   integrity sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==
 
+acorn@^8.14.0:
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0"
+  integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
+
 acorn@^8.8.0:
   version "8.8.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
   integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
 
-aes-js@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.0.0.tgz#e21df10ad6c2053295bcbb8dab40b09dbea87e4d"
-  integrity sha512-H7wUZRn8WpTq9jocdxQ2c8x2sKo9ZVmzfRE13GiNJXfp7NcKYEdvl3vspKjXox6RIG2VtaRe4JFvxG4rqp2Zuw==
-
-aes-js@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.1.2.tgz#db9aabde85d5caabbfc0d4f2a4446960f627146a"
-  integrity sha512-e5pEa2kBnBOgR4Y/p20pskXI74UEz7de8ZGVo58asOtvSVG5YAbJeELPZxOmt+Bnz3rX753YKhfIn4X4l1PPRQ==
-
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -7715,14 +8040,12 @@ agent-base@6:
   dependencies:
     debug "4"
 
-agentkeepalive@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/agentkeepalive/-/agentkeepalive-4.2.1.tgz#a7975cbb9f83b367f06c90cc51ff28fe7d499717"
-  integrity sha512-Zn4cw2NEqd+9fiSVWMscnjyQ1a8Yfoc5oBajLeo5w+YBHgDUcEBY2hS4YpTz6iN5f/2zQiktcuM6tS8x1p9dpA==
+agent-base@^7.0.2:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-7.1.1.tgz#bdbded7dfb096b751a2a087eeeb9664725b2e317"
+  integrity sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==
   dependencies:
-    debug "^4.1.0"
-    depd "^1.1.2"
-    humanize-ms "^1.2.1"
+    debug "^4.3.4"
 
 aggregate-error@^3.0.0:
   version "3.1.0"
@@ -7732,7 +8055,18 @@ aggregate-error@^3.0.0:
     clean-stack "^2.0.0"
     indent-string "^4.0.0"
 
-ajv@^6.10.0, ajv@^6.12.4:
+airtable@^0.12.2:
+  version "0.12.2"
+  resolved "https://registry.yarnpkg.com/airtable/-/airtable-0.12.2.tgz#e53e66db86744f9bc684faa58881d6c9c12f0e6f"
+  integrity sha512-HS3VytUBTKj8A0vPl7DDr5p/w3IOGv6RXL0fv7eczOWAtj9Xe8ri4TAiZRXoOyo+Z/COADCj+oARFenbxhmkIg==
+  dependencies:
+    "@types/node" ">=8.0.0 <15"
+    abort-controller "^3.0.0"
+    abortcontroller-polyfill "^1.4.0"
+    lodash "^4.17.21"
+    node-fetch "^2.6.7"
+
+ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -7793,10 +8127,10 @@ ansi-styles@^6.1.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
   integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
 
-any-promise@^1.0.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
-  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+any-signal@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/any-signal/-/any-signal-4.1.1.tgz#928416c355c66899e6b2a91cad4488f0324bae03"
+  integrity sha512-iADenERppdC+A2YKbOXXB2WUeABLaM6qnpZ70kZbPZ1cZMMJ7eF+3CaYm+/PhBizgkzlvssC7QuHS30oOiQYWA==
 
 anymatch@^3.0.3:
   version "3.1.2"
@@ -7843,14 +8177,6 @@ aria-hidden@^1.2.2:
   dependencies:
     tslib "^2.0.0"
 
-aria-query@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
-  integrity sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==
-  dependencies:
-    "@babel/runtime" "^7.10.2"
-    "@babel/runtime-corejs3" "^7.10.2"
-
 aria-query@^5.0.0:
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
@@ -7858,7 +8184,20 @@ aria-query@^5.0.0:
   dependencies:
     deep-equal "^2.0.5"
 
-array-includes@^3.1.4, array-includes@^3.1.5:
+aria-query@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.2.tgz#93f81a43480e33a338f19163a3d10a50c01dcd59"
+  integrity sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==
+
+array-buffer-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz#1e5583ec16763540a27ae52eed99ff899223568f"
+  integrity sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==
+  dependencies:
+    call-bind "^1.0.5"
+    is-array-buffer "^3.0.4"
+
+array-includes@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.5.tgz#2c320010db8d31031fd2a5f6b3bbd4b1aad31bdb"
   integrity sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==
@@ -7880,29 +8219,55 @@ array-includes@^3.1.6:
     get-intrinsic "^1.1.3"
     is-string "^1.0.7"
 
+array-includes@^3.1.8:
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.8.tgz#5e370cbe172fdd5dd6530c1d4aadda25281ba97d"
+  integrity sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.4"
+    is-string "^1.0.7"
+
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
-array.prototype.flat@^1.2.5:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz#0b0c1567bf57b38b56b4c97b8aa72ab45e4adc7b"
-  integrity sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==
+array.prototype.findlast@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz#3e4fbcb30a15a7f5bf64cf2faae22d139c2e4904"
+  integrity sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.2"
-    es-shim-unscopables "^1.0.0"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-shim-unscopables "^1.0.2"
 
-array.prototype.flatmap@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz#a7e8ed4225f4788a70cd910abcf0791e76a5534f"
-  integrity sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==
+array.prototype.findlastindex@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz#8c35a755c72908719453f87145ca011e39334d0d"
+  integrity sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-shim-unscopables "^1.0.2"
+
+array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz#1476217df8cff17d72ee8f3ba06738db5b387d18"
+  integrity sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
 
 array.prototype.flatmap@^1.3.1:
@@ -7915,6 +8280,16 @@ array.prototype.flatmap@^1.3.1:
     es-abstract "^1.20.4"
     es-shim-unscopables "^1.0.0"
 
+array.prototype.flatmap@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz#c9a7c6831db8e719d6ce639190146c24bbd3e527"
+  integrity sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    es-shim-unscopables "^1.0.0"
+
 array.prototype.tosorted@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.1.tgz#ccf44738aa2b5ac56578ffda97c03fd3e23dd532"
@@ -7926,10 +8301,44 @@ array.prototype.tosorted@^1.1.1:
     es-shim-unscopables "^1.0.0"
     get-intrinsic "^1.1.3"
 
-ast-types-flow@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
-  integrity sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==
+array.prototype.tosorted@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz#fe954678ff53034e717ea3352a03f0b0b86f7ffc"
+  integrity sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.3"
+    es-errors "^1.3.0"
+    es-shim-unscopables "^1.0.2"
+
+arraybuffer.prototype.slice@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz#097972f4255e41bc3425e37dc3f6421cf9aefde6"
+  integrity sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    es-abstract "^1.22.3"
+    es-errors "^1.2.1"
+    get-intrinsic "^1.2.3"
+    is-array-buffer "^3.0.4"
+    is-shared-array-buffer "^1.0.2"
+
+asn1js@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/asn1js/-/asn1js-3.0.5.tgz#5ea36820443dbefb51cc7f88a2ebb5b462114f38"
+  integrity sha512-FVnvrKJwpt9LP2lAMl8qZswRNm3T4q9CON+bxldk2iwk3FFpuwhx2FfinyitizWHsVYyaY+y5JzDR0rCMV5yTQ==
+  dependencies:
+    pvtsutils "^1.3.2"
+    pvutils "^1.1.3"
+    tslib "^2.4.0"
+
+ast-types-flow@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.8.tgz#0a85e1c92695769ac13a428bb653e7538bea27d6"
+  integrity sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==
 
 astral-regex@^2.0.0:
   version "2.0.0"
@@ -7943,6 +8352,11 @@ async-mutex@^0.2.6:
   dependencies:
     tslib "^2.0.0"
 
+async@~3.2.3:
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.6.tgz#1b0728e14929d51b85b449b7f06e27c1145e38ce"
+  integrity sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -7970,24 +8384,31 @@ available-typed-arrays@^1.0.5:
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
   integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
 
-axe-core@^4.4.3:
-  version "4.4.3"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.3.tgz#11c74d23d5013c0fa5d183796729bc3482bd2f6f"
-  integrity sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w==
+available-typed-arrays@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
+  integrity sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==
+  dependencies:
+    possible-typed-array-names "^1.0.0"
 
-axios@^1.4.0:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.2.tgz#de67d42c755b571d3e698df1b6504cde9b0ee9f2"
-  integrity sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==
+axe-core@^4.10.0:
+  version "4.10.2"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.10.2.tgz#85228e3e1d8b8532a27659b332e39b7fa0e022df"
+  integrity sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==
+
+axios@^1.4.0, axios@^1.6.2:
+  version "1.7.7"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.7.tgz#2f554296f9892a72ac8d8e4c5b79c14a91d0a47f"
+  integrity sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==
   dependencies:
-    follow-redirects "^1.15.0"
+    follow-redirects "^1.15.6"
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
-axobject-query@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
-  integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
+axobject-query@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-4.1.0.tgz#28768c76d0e3cff21bc62a9e2d0b6ac30042a1ee"
+  integrity sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==
 
 babel-jest@^29.3.1:
   version "29.3.1"
@@ -8087,31 +8508,17 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
-base-x@^3.0.2:
-  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/base-x/-/base-x-3.0.9.tgz#6349aaabb58526332de9f60995e548a53fe21320"
-  integrity sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==
-  dependencies:
-    safe-buffer "^5.0.1"
+base-x@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/base-x/-/base-x-5.0.0.tgz#6d835ceae379130e1a4cb846a70ac4746f28ea9b"
+  integrity sha512-sMW3VGSX1QWVFA6l8U62MLKz29rRfpTlYdCqLdpLo1/Yd4zZwSbnUaDfciIAowAqvq7YFnWq9hrhdg1KYgc1lQ==
 
 base64-js@^1.3.1, base64-js@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
-  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
-
-bech32@1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/bech32/-/bech32-1.1.4.tgz#e38c9f37bf179b8eb16ae3a772b40c356d4832e9"
-  integrity sha512-s0IrSOzLlbvX7yp4WBfPITzpAU8sqQcpsmwXDiKwrG4r491vwCO/XpejasRNl0piBMe/DvP4Tz0mIS/X1DPJBQ==
-
-bigint-buffer@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/bigint-buffer/-/bigint-buffer-1.1.5.tgz#d038f31c8e4534c1f8d0015209bf34b4fa6dd442"
-  integrity sha512-trfYco6AoZ+rKhKnxA0hgX0HAbVP/s808/EuDSe2JDzUnCp/xAsli35Orvk67UrTEcwuxZqYZDmfA2RXJgxVvA==
-  dependencies:
-    bindings "^1.3.0"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
-bignumber.js@^9.0.0:
+bignumber.js@9.1.2, bignumber.js@^9.0.0:
   version "9.1.2"
   resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.1.2.tgz#b7c4242259c008903b13707983b5f4bbd31eda0c"
   integrity sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug==
@@ -8126,17 +8533,10 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
-bind-decorator@^1.0.11:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/bind-decorator/-/bind-decorator-1.0.11.tgz#e41bc06a1f65dd9cec476c91c5daf3978488252f"
-  integrity sha512-yzkH0uog6Vv/vQ9+rhSKxecnqGUZHYncg7qS7voz3Q76+TAi1SGiOKk2mlOvusQnFz9Dc4BC/NMkeXu11YgjJg==
-
-bindings@^1.3.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
-  integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
-  dependencies:
-    file-uri-to-path "1.0.0"
+bintrees@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bintrees/-/bintrees-1.0.2.tgz#49f896d6e858a4a499df85c38fb399b9aff840f8"
+  integrity sha512-VOMgTMwjAaUG580SXn3LacVgjurrbMme7ZZNYGSSV7mmtY6QQRh0Eg3pwIcntQ77DErK1L0NxkbetjcoXzVwKw==
 
 bl@^4.0.3:
   version "4.1.0"
@@ -8147,17 +8547,40 @@ bl@^4.0.3:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
+bl@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-5.1.0.tgz#183715f678c7188ecef9fe475d90209400624273"
+  integrity sha512-tv1ZJHLfTDnXE6tMHv73YgSJaWR2AFuPwMntBe7XL/GBFHnT0CLnsHMogfk5+GzCDC5ZWarSCYaIGATZt9dNsQ==
+  dependencies:
+    buffer "^6.0.3"
+    inherits "^2.0.4"
+    readable-stream "^3.4.0"
+
 blo@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/blo/-/blo-1.1.1.tgz#ed781c5c516fba484ec8ec86105dc27f6c553209"
   integrity sha512-1uGZInlRD4X1WQP2G1QjDGwGZ8HdGgFKqnzyRdA2TYYc0MOQCmCi37RTQ8oJuI0UF6DYFKXHwV/t1kZkO/fTaA==
 
+blockstore-core@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/blockstore-core/-/blockstore-core-5.0.2.tgz#c29e00bdbae121d31b5fed50e64afa549237ec9a"
+  integrity sha512-y7/BHdYLO3YCpJMg6Ue7b4Oz4FT1HWSZoHHdlsaJTsvoE8XieXb6kUCB9UkkUBDw2x4neRDwlgYBpyK77+Ro2Q==
+  dependencies:
+    "@libp2p/logger" "^5.0.1"
+    interface-blockstore "^5.0.0"
+    interface-store "^6.0.0"
+    it-drain "^3.0.7"
+    it-filter "^3.1.1"
+    it-merge "^3.0.5"
+    it-pushable "^3.2.3"
+    multiformats "^13.2.3"
+
 bn.js@^4.11.9:
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
   integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
 
-bn.js@^5.0.0, bn.js@^5.1.1, bn.js@^5.2.0, bn.js@^5.2.1:
+bn.js@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
   integrity sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==
@@ -8167,14 +8590,10 @@ boolbase@^1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
-borsh@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/borsh/-/borsh-0.7.0.tgz#6e9560d719d86d90dc589bca60ffc8a6c51fec2a"
-  integrity sha512-CLCsZGIBCFnPtkNnieW/a8wmreDmfUtjU2m9yHrzPXIlNbqVs0AQrSatSG6vdNYUqdc83tkQi2eHfF98ubzQLA==
-  dependencies:
-    bn.js "^5.2.0"
-    bs58 "^4.0.0"
-    text-encoding-utf-8 "^1.0.2"
+bowser@^2.9.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f"
+  integrity sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==
 
 brace-expansion@^1.1.7:
   version "1.1.11"
@@ -8191,18 +8610,23 @@ brace-expansion@^2.0.1:
   dependencies:
     balanced-match "^1.0.0"
 
-braces@^3.0.2, braces@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
-  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+braces@^3.0.3, braces@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
   dependencies:
-    fill-range "^7.0.1"
+    fill-range "^7.1.1"
 
 brorand@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
   integrity sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w==
 
+browser-readablestream-to-it@^2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/browser-readablestream-to-it/-/browser-readablestream-to-it-2.0.7.tgz#ddcc4b34a4b08ef415f89eb215297acea3e05fd0"
+  integrity sha512-g1Aznml3HmqTLSXylZhGwdfnAa67+vlNAYhT9ROJZkAxY7yYmWusND10olvCMPe4sVhZyVwn5tPkRzOg85kBEg==
+
 browserslist@^4.21.3, browserslist@^4.21.4:
   version "4.21.4"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.4.tgz#e7496bbc67b9e39dd0f98565feccdcb0d4ff6987"
@@ -8213,6 +8637,16 @@ browserslist@^4.21.3, browserslist@^4.21.4:
     node-releases "^2.0.6"
     update-browserslist-db "^1.0.9"
 
+browserslist@^4.23.1:
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.0.tgz#a1325fe4bc80b64fda169629fc01b3d6cecd38d4"
+  integrity sha512-Rmb62sR1Zpjql25eSanFGEhAxcFwfA1K0GuQcLoaJBAcENegrQut3hYdhXFF1obQfiDyqIW/cLM5HSJ/9k884A==
+  dependencies:
+    caniuse-lite "^1.0.30001663"
+    electron-to-chromium "^1.5.28"
+    node-releases "^2.0.18"
+    update-browserslist-db "^1.1.0"
+
 bs-logger@0.x:
   version "0.2.6"
   resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
@@ -8220,12 +8654,12 @@ bs-logger@0.x:
   dependencies:
     fast-json-stable-stringify "2.x"
 
-bs58@^4.0.0, bs58@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a"
-  integrity sha512-Ok3Wdf5vOIlBrgCvTq96gBkJw+JUEzdBgyaza5HLtPm7yTHkjRy8+JzNyHF7BHa0bNWOQIp3m5YF0nnFcOIKLw==
+bs58@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/bs58/-/bs58-6.0.0.tgz#a2cda0130558535dd281a2f8697df79caaf425d8"
+  integrity sha512-PD0wEnEYg6ijszw/u8s+iI3H17cTymlrwkKhDhPZq+Sokl3AU4htyBFTjAeNAlCCmg0f53g6ih3jATyCKftTfw==
   dependencies:
-    base-x "^3.0.2"
+    base-x "^5.0.0"
 
 bser@2.1.1:
   version "2.1.1"
@@ -8239,15 +8673,7 @@ buffer-from@^1.0.0:
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
-buffer@6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.1.tgz#3cbea8c1463e5a0779e30b66d4c88c6ffa182ac2"
-  integrity sha512-rVAXBwEcEoYtxnHSO5iWyhzV/O1WMtkUYWlfdLS7FjU4PnSJJHEfHXi/uHPI5EwltmOA794gN3bm3/pzuctWjQ==
-  dependencies:
-    base64-js "^1.3.1"
-    ieee754 "^1.2.1"
-
-buffer@6.0.3, buffer@^6.0.3, buffer@~6.0.3:
+buffer@6.0.3, buffer@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
   integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
@@ -8263,10 +8689,10 @@ buffer@^5.5.0:
     base64-js "^1.3.1"
     ieee754 "^1.1.13"
 
-bufferutil@^4.0.1:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/bufferutil/-/bufferutil-4.0.7.tgz#60c0d19ba2c992dd8273d3f73772ffc894c153ad"
-  integrity sha512-kukuqc39WOHtdxtw4UScxF/WVnMFVSQVKhtx3AjZJzhd0RGZZldcrfSEbVsWWe6KNH253574cq5F+wpv0G9pJw==
+bufferutil@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/bufferutil/-/bufferutil-4.0.8.tgz#1de6a71092d65d7766c4d8a522b261a6e787e8ea"
+  integrity sha512-4T53u4PdgsXqKaIctwF8ifXlRTTmEPJ8iEPWFdGZvcf7sbwYo6FKFEX9eNNAnzFZ7EzJAQ3CJeOtCRA4rDp7Pw==
   dependencies:
     node-gyp-build "^4.3.0"
 
@@ -8295,6 +8721,17 @@ call-bind@^1.0.0, call-bind@^1.0.2:
     function-bind "^1.1.1"
     get-intrinsic "^1.0.2"
 
+call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
+  integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.1"
+
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -8315,17 +8752,30 @@ caniuse-lite@^1.0.30001400:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001418.tgz#5f459215192a024c99e3e3a53aac310fc7cf24e6"
   integrity sha512-oIs7+JL3K9JRQ3jPZjlH6qyYDp+nBTCais7hjh0s+fuBwufc7uZ7hPYMXrDOJhV360KGMTcczMRObk0/iMqZRg==
 
-caniuse-lite@^1.0.30001406:
-  version "1.0.30001480"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz#9bbd35ee44c2480a1e3a3b9f4496f5066817164a"
-  integrity sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==
+caniuse-lite@^1.0.30001579, caniuse-lite@^1.0.30001663:
+  version "1.0.30001663"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001663.tgz#1529a723505e429fdfd49532e9fc42273ba7fed7"
+  integrity sha512-o9C3X27GLKbLeTYZ6HBOLU1tsAcBZsLis28wrVzddShCS16RujjHp9GDHKZqrB3meE0YjhawvMFsGb/igqiPzA==
+
+cborg@^4.0.0, cborg@^4.0.5, cborg@^4.0.9, cborg@^4.2.3, cborg@^4.2.4:
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/cborg/-/cborg-4.2.6.tgz#7491c29986a87c647d6e2c232e64c82214ca660e"
+  integrity sha512-77vo4KlSwfjCIXcyZUVei4l2gdjesSCeYSx4U/Upwix7pcWZq8uw21sVRpjwn7mjEi//ieJPTj1MRWDHmud1Rg==
 
-chakra-dayzed-datepicker@^0.2.10:
-  version "0.2.10"
-  resolved "https://registry.npmjs.org/chakra-dayzed-datepicker/-/chakra-dayzed-datepicker-0.2.10.tgz#3f84a56de3263eb705a0dbdf6513247ff3147be3"
-  integrity sha512-4nzDSNAO4311uAvKhBMNrbuR34A/a4HnfrHvExMNS3W0maVrcoj3y6n9Z+yhCFXjESPKl1NqBvfmXzPNDn92TQ==
+"cbw-sdk@npm:@coinbase/wallet-sdk@3.9.3":
+  version "3.9.3"
+  resolved "https://registry.yarnpkg.com/@coinbase/wallet-sdk/-/wallet-sdk-3.9.3.tgz#daf10cb0c85d0363315b7270cb3f02bedc408aab"
+  integrity sha512-N/A2DRIf0Y3PHc1XAMvbBUu4zisna6qAdqABMZwBMNEfWrXpAwx16pZGkYCLGE+Rvv1edbcB2LYDRnACNcmCiw==
   dependencies:
-    react-focus-lock "^2.9.5"
+    bn.js "^5.2.1"
+    buffer "^6.0.3"
+    clsx "^1.2.1"
+    eth-block-tracker "^7.1.0"
+    eth-json-rpc-filters "^6.0.0"
+    eventemitter3 "^5.0.1"
+    keccak "^3.0.3"
+    preact "^10.16.0"
+    sha.js "^2.4.11"
 
 chakra-react-select@^4.4.3:
   version "4.4.3"
@@ -8483,7 +8933,14 @@ cliui@^8.0.1:
     strip-ansi "^6.0.1"
     wrap-ansi "^7.0.0"
 
-clsx@^1.1.0:
+clone-regexp@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/clone-regexp/-/clone-regexp-3.0.0.tgz#c6dd5c6b85482306778f3dc4ac2bb967079069c2"
+  integrity sha512-ujdnoq2Kxb8s3ItNBtnYeXdm07FcU0u8ARAT1lQ2YdMwQC+cdiXX8KoqMVuglztILivceTtp4ivqGSmEmhBUJw==
+  dependencies:
+    is-regexp "^3.0.0"
+
+clsx@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
@@ -8539,16 +8996,32 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
-color-name@~1.1.4:
+color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+color-string@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
+  integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
 color2k@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/color2k/-/color2k-2.0.0.tgz#86992c82e248c29f524023ed0822bc152c4fa670"
   integrity sha512-DWX9eXOC4fbJNiuvdH4QSHvvfLWyFo9TuFp7V9OzdsbPAdrWAuYc8qvFP2bIQ/LKh4LrAVnJ6vhiQYPvAHdtTg==
 
+color@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
+  integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
+  dependencies:
+    color-convert "^2.0.1"
+    color-string "^1.9.0"
+
 colorette@^2.0.16, colorette@^2.0.17, colorette@^2.0.7:
   version "2.0.19"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798"
@@ -8576,20 +9049,20 @@ commander@^2.20.3:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
-commander@^4.0.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
-  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
-
 commander@^9.3.0:
   version "9.4.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-9.4.1.tgz#d1dd8f2ce6faf93147295c0df13c7c21141cfbdd"
   integrity sha512-5EEkTNyHNGFPD2H+c/dXXfQZYa/scCKasxWcXJaWnNJ99pnQN9Vnmqow+p+PlFPE63Q6mThaZws1T+HxfpgtPw==
 
-comment-parser@^1.1.2:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-1.3.1.tgz#3d7ea3adaf9345594aedee6563f422348f165c1b"
-  integrity sha512-B52sN2VNghyq5ofvUsqZjmk6YkihBX5vMSChmSK9v4ShjKf3Vk5Xcmgpw4o+iIgtrnM/u5FiMpz9VKb8lpBveA==
+comment-parser@^1.4.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-1.4.1.tgz#bdafead37961ac079be11eb7ec65c4d021eaf9cc"
+  integrity sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==
+
+common-tags@1.8.2:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6"
+  integrity sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==
 
 compute-scroll-into-view@1.0.20:
   version "1.0.20"
@@ -8606,6 +9079,16 @@ consola@^3.2.3:
   resolved "https://registry.yarnpkg.com/consola/-/consola-3.2.3.tgz#0741857aa88cfa0d6fd53f1cff0375136e98502f"
   integrity sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==
 
+console-polyfill@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/console-polyfill/-/console-polyfill-0.3.0.tgz#84900902a18c47a5eba932be75fa44d23e8af861"
+  integrity sha512-w+JSDZS7XML43Xnwo2x5O5vxB0ID7T5BdqDtyqT6uiCAX2kZAgcWxNaGqT97tZfSHzfOcvrfsDAodKcJ3UvnXQ==
+
+convert-hrtime@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/convert-hrtime/-/convert-hrtime-5.0.0.tgz#f2131236d4598b95de856926a67100a0a97e9fa3"
+  integrity sha512-lOETlkIeYSJWcbbcvjRKGxVMXJR+8+OQb/mTPbA4ObPMytYIsUbuOE0Jzy60hjARYszq1id0j8KgVhC+WGZVTg==
+
 convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
@@ -8626,7 +9109,7 @@ cookie@~0.5.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
-copy-to-clipboard@3.3.3, copy-to-clipboard@^3.2.0, copy-to-clipboard@^3.3.1, copy-to-clipboard@^3.3.3:
+copy-to-clipboard@3.3.3, copy-to-clipboard@^3.2.0, copy-to-clipboard@^3.3.1:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
   integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
@@ -8690,7 +9173,14 @@ cross-fetch@^3.1.4, cross-fetch@^3.1.5:
   dependencies:
     node-fetch "2.6.7"
 
-cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+cross-fetch@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-4.0.0.tgz#f037aef1580bb3a1a35164ea2a848ba81b445983"
+  integrity sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==
+  dependencies:
+    node-fetch "^2.6.12"
+
+cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -8832,11 +9322,6 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
-csstype@^3.1.2:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
-  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
-
 "d3-array@2 - 3", "d3-array@2.10.0 - 3", "d3-array@2.5.0 - 3", d3-array@3, d3-array@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.0.tgz#15bf96cd9b7333e02eb8de8053d78962eafcff14"
@@ -9086,14 +9571,14 @@ damerau-levenshtein@^1.0.8:
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
   integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
 
-dappscout-iframe@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/dappscout-iframe/-/dappscout-iframe-0.1.0.tgz#c971d8a8aa4fb3d64ca357700d3ac809dcdecb0d"
-  integrity sha512-nL65Uuv2+r2ujELyBtw+VL6PYkUtleCvKi2XaeMiroZz6tieeUw338PEOc6cZaIfwXk59rFwNR0FZki2HnOrIA==
+dappscout-iframe@0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/dappscout-iframe/-/dappscout-iframe-0.2.5.tgz#675738a570a5d1f9037ebc87ebf3c07443080bd6"
+  integrity sha512-MY2WKyU1sF11YlyM5HPEbJXZB5NR4P2QMh9Ilcab1T1vioLcab9uIu8bXU9elVa904U8pyfTeRMhYWW4TzG5wg==
   dependencies:
-    ethers "^5.7.2"
-    react "^18.2.0"
-    react-dom "^18.2.0"
+    react "18.3.1"
+    react-dom "18.3.1"
+    viem "^1.20.3"
 
 data-uri-to-buffer@^4.0.0:
   version "4.0.0"
@@ -9109,18 +9594,57 @@ data-urls@^3.0.2:
     whatwg-mimetype "^3.0.0"
     whatwg-url "^11.0.0"
 
-date-fns@^2.0.0:
+data-view-buffer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.1.tgz#8ea6326efec17a2e42620696e671d7d5a8bc66b2"
+  integrity sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+data-view-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz#90721ca95ff280677eb793749fce1011347669e2"
+  integrity sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+data-view-byte-offset@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz#5e0bbfb4828ed2d1b9b400cd8a7d119bca0ff18a"
+  integrity sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+datastore-core@^10.0.0:
+  version "10.0.2"
+  resolved "https://registry.yarnpkg.com/datastore-core/-/datastore-core-10.0.2.tgz#f7d03e775caa970bac7da22b68ca82ac6dc74fce"
+  integrity sha512-B3WXxI54VxJkpXxnYibiF17si3bLXE1XOjrJB7wM5co9fx2KOEkiePDGiCCEtnapFHTnmAnYCPdA7WZTIpdn/A==
+  dependencies:
+    "@libp2p/logger" "^5.0.1"
+    interface-datastore "^8.0.0"
+    interface-store "^6.0.0"
+    it-drain "^3.0.7"
+    it-filter "^3.1.1"
+    it-map "^3.1.1"
+    it-merge "^3.0.5"
+    it-pipe "^3.0.1"
+    it-pushable "^3.2.3"
+    it-sort "^3.0.6"
+    it-take "^3.0.6"
+
+date-fns@^2.29.3:
   version "2.30.0"
-  resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
   integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
   dependencies:
     "@babel/runtime" "^7.21.0"
 
-date-fns@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf"
-  integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
-
 dateformat@^4.6.3:
   version "4.6.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-4.6.3.tgz#556fa6497e5217fedb78821424f8a1c22fa3f4b5"
@@ -9136,28 +9660,18 @@ dayjs@^1.11.5:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.5.tgz#00e8cc627f231f9499c19b38af49f56dc0ac5e93"
   integrity sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA==
 
-dayzed@^3.2.3:
-  version "3.2.3"
-  resolved "https://registry.npmjs.org/dayzed/-/dayzed-3.2.3.tgz#78c5ab7e28579cd3c0f9f848b744ac5c768e9a22"
-  integrity sha512-qXTIKs+R6ydWwNo+X1wu3lUptyRSGoyY+ZzRcQSM0zUlaG+/Ei+bFjqbQm1T2oJ+WKNkTHURBcGsxnx9N+9kfA==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    date-fns "^2.0.0"
+debounce@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
+  integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
 
-debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
+debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
   dependencies:
     ms "2.1.2"
 
-debug@^2.6.9:
-  version "2.6.9"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
-  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
-  dependencies:
-    ms "2.0.0"
-
 debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
@@ -9165,6 +9679,13 @@ debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
+decache@^3.0.5:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/decache/-/decache-3.1.0.tgz#4f5036fbd6581fcc97237ac3954a244b9536c2da"
+  integrity sha512-p7D6wJ5EJFFq1CcF2lu1XeqKFLBob8jRQGNAvFLTsV3CbSKBl3VtliAVlUIGz2i9H6kEFnI2Amaft5ZopIG2Fw==
+  dependencies:
+    find "^0.2.4"
+
 decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -9175,7 +9696,7 @@ decimal.js@^10.4.1:
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.2.tgz#0341651d1d997d86065a2ce3a441fbd0d8e8b98e"
   integrity sha512-ic1yEvwT6GuvaYwBLLY6/aFFgjZdySKTE8en/fkU3QICTmRtgtSlFn0u0BXN06InZwtfCelR7j8LRiDI/02iGA==
 
-decode-uri-component@^0.2.0, decode-uri-component@^0.2.2:
+decode-uri-component@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
   integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==
@@ -9233,6 +9754,15 @@ deepmerge@~4.3.0:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
 
+define-data-property@^1.0.1, define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
 define-lazy-prop@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
@@ -9246,6 +9776,15 @@ define-properties@^1.1.3, define-properties@^1.1.4:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+define-properties@^1.2.0, define-properties@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
+  integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
+  dependencies:
+    define-data-property "^1.0.1"
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
 defu@^6.1.2, defu@^6.1.3:
   version "6.1.3"
   resolved "https://registry.yarnpkg.com/defu/-/defu-6.1.3.tgz#6d7f56bc61668e844f9f593ace66fd67ef1205fd"
@@ -9258,10 +9797,10 @@ delaunator@5:
   dependencies:
     robust-predicates "^3.0.0"
 
-delay@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/delay/-/delay-5.0.0.tgz#137045ef1b96e5071060dd5be60bf9334436bd1d"
-  integrity sha512-ReEBKkIfe4ya47wlPYf/gu5ib6yUG0/Aez0JQZQz94kiWtRQvZIQbTiehsnwHvLSWJnQdhVeqYue7Id1dKr0qw==
+delay@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/delay/-/delay-6.0.0.tgz#43749aefdf6cabd9e17b0d00bd3904525137e607"
+  integrity sha512-2NJozoOHQ4NuZuVIr5CWd0iiLVIRSDepakaovIN+9eIDHEhdCAEvSy2cuf1DCrPPQLvHmbqTHODlhHg8UCy4zw==
 
 delayed-stream@~1.0.0:
   version "1.0.0"
@@ -9273,22 +9812,12 @@ denque@^2.1.0:
   resolved "https://registry.yarnpkg.com/denque/-/denque-2.1.0.tgz#e93e1a6569fb5e66f16a3c2a2964617d349d6ab1"
   integrity sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==
 
-depd@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
-  integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
-
-derive-valtio@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/derive-valtio/-/derive-valtio-0.1.0.tgz#4b9fb393dfefccfef15fcbbddd745dd22d5d63d7"
-  integrity sha512-OCg2UsLbXK7GmmpzMXhYkdO64vhJ1ROUUGaTFyHjVwEdMEcTTRj7W1TxLbSBxdY8QLBPCcp66MTyaSy0RpO17A==
-
 destr@^2.0.1, destr@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/destr/-/destr-2.0.2.tgz#8d3c0ee4ec0a76df54bc8b819bca215592a8c218"
   integrity sha512-65AlobnZMiCET00KaFFjUefxDX0khFA/E4myqZ7a6Sq1yZtR8+FVIvilVX66vF2uobSumxooYZChiRPCKNqhmg==
 
-detect-browser@5.3.0, detect-browser@^5.2.0, detect-browser@^5.3.0:
+detect-browser@5.3.0, detect-browser@^5.2.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/detect-browser/-/detect-browser-5.3.0.tgz#9705ef2bddf46072d0f7265a1fe300e36fe7ceca"
   integrity sha512-53rsFbGdwMwlF7qvCt0ypLM5V5/Mbl0szB7GPN8y9NCcbknYOeVVXdrXEq+90IwAfrrzt6Hd+u2E2ntakICU8w==
@@ -9303,6 +9832,11 @@ detect-libc@^2.0.0:
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.1.tgz#e1897aa88fa6ad197862937fbc0441ef352ee0cd"
   integrity sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==
 
+detect-libc@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.3.tgz#f0cd503b40f9939b894697d19ad50895e30cf700"
+  integrity sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==
+
 detect-newline@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
@@ -9335,6 +9869,13 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
+dns-packet@^5.6.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-5.6.1.tgz#ae888ad425a9d1478a0674256ab866de1012cf2f"
+  integrity sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==
+  dependencies:
+    "@leichtgewicht/ip-codec" "^2.0.1"
+
 doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
@@ -9342,13 +9883,6 @@ doctrine@^2.1.0:
   dependencies:
     esutils "^2.0.2"
 
-doctrine@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
-  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
-  dependencies:
-    esutils "^2.0.2"
-
 dom-accessibility-api@^0.5.9:
   version "0.5.14"
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz#56082f71b1dc7aac69d83c4285eef39c15d93f56"
@@ -9484,15 +10018,30 @@ eastasianwidth@^0.2.0:
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
+eciesjs@^0.4.11:
+  version "0.4.12"
+  resolved "https://registry.yarnpkg.com/eciesjs/-/eciesjs-0.4.12.tgz#0ce482454953592e07b79b4824751f3b5c508b56"
+  integrity sha512-DGejvMCihsRAmKRFQiL6KZDE34vWVd0gvXlykFq1aEzJy/rD65AVyAIUZKZOvgvaP9ATQRcHGEZV5DfgrgjA4w==
+  dependencies:
+    "@ecies/ciphers" "^0.2.1"
+    "@noble/ciphers" "^1.0.0"
+    "@noble/curves" "^1.6.0"
+    "@noble/hashes" "^1.5.0"
+
 electron-to-chromium@^1.4.251:
   version "1.4.276"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.276.tgz#17837b19dafcc43aba885c4689358b298c19b520"
   integrity sha512-EpuHPqu8YhonqLBXHoU6hDJCD98FCe6KDoet3/gY1qsQ6usjJoHqBH2YIVs8FXaAtHwVL8Uqa/fsYao/vq9VWQ==
 
-elliptic@6.5.4:
-  version "6.5.4"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
-  integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
+electron-to-chromium@^1.5.28:
+  version "1.5.28"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.28.tgz#aee074e202c6ee8a0030a9c2ef0b3fe9f967d576"
+  integrity sha512-VufdJl+rzaKZoYVUijN13QcXVF5dWPZANeFTLNy+OSpHdDL5ynXTF35+60RSBbaQYB1ae723lQXHCrf4pyLsMw==
+
+elliptic@^6.5.7:
+  version "6.5.7"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.7.tgz#8ec4da2cb2939926a1b9a73619d768207e647c8b"
+  integrity sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q==
   dependencies:
     bn.js "^4.11.9"
     brorand "^1.1.0"
@@ -9522,13 +10071,29 @@ encode-utf8@^1.0.3:
   resolved "https://registry.yarnpkg.com/encode-utf8/-/encode-utf8-1.0.3.tgz#f30fdd31da07fb596f281beb2f6b027851994cda"
   integrity sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw==
 
-end-of-stream@^1.1.0, end-of-stream@^1.4.1, end-of-stream@^1.4.4:
+end-of-stream@^1.1.0, end-of-stream@^1.4.0, end-of-stream@^1.4.1, end-of-stream@^1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
   integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
   dependencies:
     once "^1.4.0"
 
+engine.io-client@~6.5.2:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.5.3.tgz#4cf6fa24845029b238f83c628916d9149c399bc5"
+  integrity sha512-9Z0qLB0NIisTRt1DZ/8U2k12RJn8yls/nXMZLn+/N8hANT3TcYjKFKcwbw5zFQiN4NTde3TSY9zb79e1ij6j9Q==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+    engine.io-parser "~5.2.1"
+    ws "~8.11.0"
+    xmlhttprequest-ssl "~2.0.0"
+
+engine.io-parser@~5.2.1:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.2.2.tgz#37b48e2d23116919a3453738c5720455e64e1c49"
+  integrity sha512-RcyUFKA93/CXH20l4SoVvzZfrSDMOTUS3bWVpTt2FuFP+XYrL8i8oonHP7WInRyVHXh0n/ORtoeiE1os+8qkSw==
+
 enhanced-resolve@^5.12.0:
   version "5.12.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz#300e1c90228f5b570c4d35babf263f6da7155634"
@@ -9564,6 +10129,13 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
+error-stack-parser@^2.0.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.1.4.tgz#229cb01cdbfa84440bfa91876285b94680188286"
+  integrity sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==
+  dependencies:
+    stackframe "^1.3.4"
+
 error@7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/error/-/error-7.0.2.tgz#a5f75fff4d9926126ddac0ea5dc38e689153cb02"
@@ -9579,7 +10151,59 @@ error@^7.0.0:
   dependencies:
     string-template "~0.2.1"
 
-es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.2, es-abstract@^1.19.5:
+es-abstract@^1.17.5, es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.0, es-abstract@^1.23.1, es-abstract@^1.23.2, es-abstract@^1.23.3:
+  version "1.23.3"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.3.tgz#8f0c5a35cd215312573c5a27c87dfd6c881a0aa0"
+  integrity sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    arraybuffer.prototype.slice "^1.0.3"
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    data-view-buffer "^1.0.1"
+    data-view-byte-length "^1.0.1"
+    data-view-byte-offset "^1.0.0"
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-set-tostringtag "^2.0.3"
+    es-to-primitive "^1.2.1"
+    function.prototype.name "^1.1.6"
+    get-intrinsic "^1.2.4"
+    get-symbol-description "^1.0.2"
+    globalthis "^1.0.3"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.0.3"
+    has-symbols "^1.0.3"
+    hasown "^2.0.2"
+    internal-slot "^1.0.7"
+    is-array-buffer "^3.0.4"
+    is-callable "^1.2.7"
+    is-data-view "^1.0.1"
+    is-negative-zero "^2.0.3"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.3"
+    is-string "^1.0.7"
+    is-typed-array "^1.1.13"
+    is-weakref "^1.0.2"
+    object-inspect "^1.13.1"
+    object-keys "^1.1.1"
+    object.assign "^4.1.5"
+    regexp.prototype.flags "^1.5.2"
+    safe-array-concat "^1.1.2"
+    safe-regex-test "^1.0.3"
+    string.prototype.trim "^1.2.9"
+    string.prototype.trimend "^1.0.8"
+    string.prototype.trimstart "^1.0.8"
+    typed-array-buffer "^1.0.2"
+    typed-array-byte-length "^1.0.1"
+    typed-array-byte-offset "^1.0.2"
+    typed-array-length "^1.0.6"
+    unbox-primitive "^1.0.2"
+    which-typed-array "^1.1.15"
+
+es-abstract@^1.19.0, es-abstract@^1.19.5:
   version "1.20.4"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.20.4.tgz#1d103f9f8d78d4cf0713edcd6d0ed1a46eed5861"
   integrity sha512-0UtvRN79eMe2L+UNEF1BwRe364sj/DXhQ/k5FmivgoSdpM90b8Jc0mDzKMGo7QS0BVbOP/bTwBKNnDc9rNzaPA==
@@ -9648,6 +10272,18 @@ es-abstract@^1.20.4:
     unbox-primitive "^1.0.2"
     which-typed-array "^1.1.9"
 
+es-define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
+  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+
+es-errors@^1.2.1, es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
 es-get-iterator@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.2.tgz#9234c54aba713486d7ebde0220864af5e2b283f7"
@@ -9662,6 +10298,34 @@ es-get-iterator@^1.1.2:
     is-string "^1.0.5"
     isarray "^2.0.5"
 
+es-iterator-helpers@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.2.0.tgz#2f1a3ab998b30cb2d10b195b587c6d9ebdebf152"
+  integrity sha512-tpxqxncxnpw3c93u8n3VOzACmRFoVmWJqbWXvX/JfKbkhBw1oslgPrUfeSt2psuqyEJFD6N/9lg5i7bsKpoq+Q==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.3"
+    es-errors "^1.3.0"
+    es-set-tostringtag "^2.0.3"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    globalthis "^1.0.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.0.3"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.7"
+    iterator.prototype "^1.1.3"
+    safe-array-concat "^1.1.2"
+
+es-object-atoms@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.0.0.tgz#ddb55cd47ac2e240701260bc2a8e31ecb643d941"
+  integrity sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==
+  dependencies:
+    es-errors "^1.3.0"
+
 es-set-tostringtag@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz#338d502f6f674301d710b80c8592de8a15f09cd8"
@@ -9671,6 +10335,15 @@ es-set-tostringtag@^2.0.1:
     has "^1.0.3"
     has-tostringtag "^1.0.0"
 
+es-set-tostringtag@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz#8bb60f0a440c2e4281962428438d58545af39777"
+  integrity sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.1"
+
 es-shim-unscopables@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz#702e632193201e3edf8713635d083d378e510241"
@@ -9678,6 +10351,13 @@ es-shim-unscopables@^1.0.0:
   dependencies:
     has "^1.0.3"
 
+es-shim-unscopables@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz#1f6942e71ecc7835ed1c8a83006d8771a63a3763"
+  integrity sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==
+  dependencies:
+    hasown "^2.0.0"
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -9687,51 +10367,45 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-es6-promise@^4.0.3:
-  version "4.2.8"
-  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
-  integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
-
-es6-promisify@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
-  integrity sha512-C+d6UdsYDk0lMebHNR4S2NybQMMngAOnOwYBQjTOiv0MkoJMP0Myw2mgpDLBcpfCmRLxyFqYhS/CfOENq4SJhQ==
-  dependencies:
-    es6-promise "^4.0.3"
-
-esbuild@^0.18.10:
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6"
-  integrity sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==
+esbuild@^0.21.3:
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.21.5.tgz#9ca301b120922959b766360d8ac830da0d02997d"
+  integrity sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==
   optionalDependencies:
-    "@esbuild/android-arm" "0.18.20"
-    "@esbuild/android-arm64" "0.18.20"
-    "@esbuild/android-x64" "0.18.20"
-    "@esbuild/darwin-arm64" "0.18.20"
-    "@esbuild/darwin-x64" "0.18.20"
-    "@esbuild/freebsd-arm64" "0.18.20"
-    "@esbuild/freebsd-x64" "0.18.20"
-    "@esbuild/linux-arm" "0.18.20"
-    "@esbuild/linux-arm64" "0.18.20"
-    "@esbuild/linux-ia32" "0.18.20"
-    "@esbuild/linux-loong64" "0.18.20"
-    "@esbuild/linux-mips64el" "0.18.20"
-    "@esbuild/linux-ppc64" "0.18.20"
-    "@esbuild/linux-riscv64" "0.18.20"
-    "@esbuild/linux-s390x" "0.18.20"
-    "@esbuild/linux-x64" "0.18.20"
-    "@esbuild/netbsd-x64" "0.18.20"
-    "@esbuild/openbsd-x64" "0.18.20"
-    "@esbuild/sunos-x64" "0.18.20"
-    "@esbuild/win32-arm64" "0.18.20"
-    "@esbuild/win32-ia32" "0.18.20"
-    "@esbuild/win32-x64" "0.18.20"
+    "@esbuild/aix-ppc64" "0.21.5"
+    "@esbuild/android-arm" "0.21.5"
+    "@esbuild/android-arm64" "0.21.5"
+    "@esbuild/android-x64" "0.21.5"
+    "@esbuild/darwin-arm64" "0.21.5"
+    "@esbuild/darwin-x64" "0.21.5"
+    "@esbuild/freebsd-arm64" "0.21.5"
+    "@esbuild/freebsd-x64" "0.21.5"
+    "@esbuild/linux-arm" "0.21.5"
+    "@esbuild/linux-arm64" "0.21.5"
+    "@esbuild/linux-ia32" "0.21.5"
+    "@esbuild/linux-loong64" "0.21.5"
+    "@esbuild/linux-mips64el" "0.21.5"
+    "@esbuild/linux-ppc64" "0.21.5"
+    "@esbuild/linux-riscv64" "0.21.5"
+    "@esbuild/linux-s390x" "0.21.5"
+    "@esbuild/linux-x64" "0.21.5"
+    "@esbuild/netbsd-x64" "0.21.5"
+    "@esbuild/openbsd-x64" "0.21.5"
+    "@esbuild/sunos-x64" "0.21.5"
+    "@esbuild/win32-arm64" "0.21.5"
+    "@esbuild/win32-ia32" "0.21.5"
+    "@esbuild/win32-x64" "0.21.5"
 
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
+escalade@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
+  integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
+
 escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
@@ -9759,20 +10433,21 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-next@13.3.0:
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-13.3.0.tgz#c302fbecfe2b976ea306f7622af637ef9d9e3802"
-  integrity sha512-6YEwmFBX0VjBd3ODGW9df0Is0FLaRFdMN8eAahQG9CN6LjQ28J8AFr19ngxqMSg7Qv6Uca/3VeeBosJh1bzu0w==
+eslint-config-next@15.0.3:
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-15.0.3.tgz#b483585260d5e55050d4ab87e053c88089ae12ee"
+  integrity sha512-IGP2DdQQrgjcr4mwFPve4DrCqo7CVVez1WoYY47XwKSrYO4hC0Dlb+iJA60i0YfICOzgNADIb8r28BpQ5Zs0wg==
   dependencies:
-    "@next/eslint-plugin-next" "13.3.0"
-    "@rushstack/eslint-patch" "^1.1.3"
-    "@typescript-eslint/parser" "^5.42.0"
+    "@next/eslint-plugin-next" "15.0.3"
+    "@rushstack/eslint-patch" "^1.10.3"
+    "@typescript-eslint/eslint-plugin" "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0"
+    "@typescript-eslint/parser" "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0"
     eslint-import-resolver-node "^0.3.6"
     eslint-import-resolver-typescript "^3.5.2"
-    eslint-plugin-import "^2.26.0"
-    eslint-plugin-jsx-a11y "^6.5.1"
-    eslint-plugin-react "^7.31.7"
-    eslint-plugin-react-hooks "^4.5.0"
+    eslint-plugin-import "^2.31.0"
+    eslint-plugin-jsx-a11y "^6.10.0"
+    eslint-plugin-react "^7.35.0"
+    eslint-plugin-react-hooks "^5.0.0"
 
 eslint-import-resolver-node@^0.3.6:
   version "0.3.6"
@@ -9782,6 +10457,15 @@ eslint-import-resolver-node@^0.3.6:
     debug "^3.2.7"
     resolve "^1.20.0"
 
+eslint-import-resolver-node@^0.3.9:
+  version "0.3.9"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
+  integrity sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==
+  dependencies:
+    debug "^3.2.7"
+    is-core-module "^2.13.0"
+    resolve "^1.22.4"
+
 eslint-import-resolver-typescript@^3.5.2:
   version "3.5.5"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.5.5.tgz#0a9034ae7ed94b254a360fbea89187b60ea7456d"
@@ -9796,10 +10480,10 @@ eslint-import-resolver-typescript@^3.5.2:
     is-glob "^4.0.3"
     synckit "^0.8.5"
 
-eslint-module-utils@^2.7.3:
-  version "2.7.4"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz#4f3e41116aaf13a20792261e61d3a2e7e0583974"
-  integrity sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==
+eslint-module-utils@^2.12.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz#fe4cfb948d61f49203d7b08871982b65b9af0b0b"
+  integrity sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==
   dependencies:
     debug "^3.2.7"
 
@@ -9810,60 +10494,63 @@ eslint-module-utils@^2.7.4:
   dependencies:
     debug "^3.2.7"
 
-eslint-plugin-es5@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-es5/-/eslint-plugin-es5-1.5.0.tgz#aab19af3d4798f7924bba309bc4f87087280fbba"
-  integrity sha512-Qxmfo7v2B7SGAEURJo0dpBweFf+JU15kSyALfiB2rXWcBuJ96r6X9kFHXFnhdopPHCaHjoQs1xQPUJVbGMb1AA==
-
-eslint-plugin-import-helpers@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import-helpers/-/eslint-plugin-import-helpers-1.2.1.tgz#22c7ac66c964e8257b2a6fb4aff8a51b35cbdc6d"
-  integrity sha512-BSqLlCnyX4tWGlvPUTpBgUoaFiWxXSztpk9SozZVW4TZU1ygZuF0Lrfn9CO5xx1XT+PVAR9yroP9JPRyB4rAjQ==
-
-eslint-plugin-import@^2.26.0:
-  version "2.26.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz#f812dc47be4f2b72b478a021605a59fc6fe8b88b"
-  integrity sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==
-  dependencies:
-    array-includes "^3.1.4"
-    array.prototype.flat "^1.2.5"
-    debug "^2.6.9"
+eslint-plugin-import-helpers@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import-helpers/-/eslint-plugin-import-helpers-2.0.1.tgz#3a5c451b0fe303987931b369cb89d6a3b7eca2d5"
+  integrity sha512-MSiQZV0k+bQlt7RnHZrJxDBE948urZthusQt78FKmQ5/WLm5PpS8L16+2JVGBiSffneOAe4fud8RdYmqPveo8A==
+
+eslint-plugin-import@2.31.0, eslint-plugin-import@^2.31.0:
+  version "2.31.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz#310ce7e720ca1d9c0bb3f69adfd1c6bdd7d9e0e7"
+  integrity sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==
+  dependencies:
+    "@rtsao/scc" "^1.1.0"
+    array-includes "^3.1.8"
+    array.prototype.findlastindex "^1.2.5"
+    array.prototype.flat "^1.3.2"
+    array.prototype.flatmap "^1.3.2"
+    debug "^3.2.7"
     doctrine "^2.1.0"
-    eslint-import-resolver-node "^0.3.6"
-    eslint-module-utils "^2.7.3"
-    has "^1.0.3"
-    is-core-module "^2.8.1"
+    eslint-import-resolver-node "^0.3.9"
+    eslint-module-utils "^2.12.0"
+    hasown "^2.0.2"
+    is-core-module "^2.15.1"
     is-glob "^4.0.3"
     minimatch "^3.1.2"
-    object.values "^1.1.5"
-    resolve "^1.22.0"
-    tsconfig-paths "^3.14.1"
-
-eslint-plugin-jest@^27.1.6:
-  version "27.1.6"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-27.1.6.tgz#361d943f07d1978838e6b852c44a579f3879e332"
-  integrity sha512-XA7RFLSrlQF9IGtAmhddkUkBuICCTuryfOTfCSWcZHiHb69OilIH05oozH2XA6CEOtztnOd0vgXyvxZodkxGjg==
-  dependencies:
-    "@typescript-eslint/utils" "^5.10.0"
-
-eslint-plugin-jsx-a11y@^6.5.1:
-  version "6.6.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.6.1.tgz#93736fc91b83fdc38cc8d115deedfc3091aef1ff"
-  integrity sha512-sXgFVNHiWffBq23uiS/JaP6eVR622DqwB4yTzKvGZGcPq6/yZ3WmOZfuBks/vHWo9GaFOqC2ZK4i6+C35knx7Q==
-  dependencies:
-    "@babel/runtime" "^7.18.9"
-    aria-query "^4.2.2"
-    array-includes "^3.1.5"
-    ast-types-flow "^0.0.7"
-    axe-core "^4.4.3"
-    axobject-query "^2.2.0"
+    object.fromentries "^2.0.8"
+    object.groupby "^1.0.3"
+    object.values "^1.2.0"
+    semver "^6.3.1"
+    string.prototype.trimend "^1.0.8"
+    tsconfig-paths "^3.15.0"
+
+eslint-plugin-jest@28.9.0:
+  version "28.9.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-28.9.0.tgz#19168dfaed124339cd2252c4c4d1ac3688aeb243"
+  integrity sha512-rLu1s1Wf96TgUUxSw6loVIkNtUjq1Re7A9QdCCHSohnvXEBAjuL420h0T/fMmkQlNsQP2GhQzEUpYHPfxBkvYQ==
+  dependencies:
+    "@typescript-eslint/utils" "^6.0.0 || ^7.0.0 || ^8.0.0"
+
+eslint-plugin-jsx-a11y@6.10.2, eslint-plugin-jsx-a11y@^6.10.0:
+  version "6.10.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz#d2812bb23bf1ab4665f1718ea442e8372e638483"
+  integrity sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==
+  dependencies:
+    aria-query "^5.3.2"
+    array-includes "^3.1.8"
+    array.prototype.flatmap "^1.3.2"
+    ast-types-flow "^0.0.8"
+    axe-core "^4.10.0"
+    axobject-query "^4.1.0"
     damerau-levenshtein "^1.0.8"
     emoji-regex "^9.2.2"
-    has "^1.0.3"
-    jsx-ast-utils "^3.3.2"
-    language-tags "^1.0.5"
+    hasown "^2.0.2"
+    jsx-ast-utils "^3.3.5"
+    language-tags "^1.0.9"
     minimatch "^3.1.2"
-    semver "^6.3.0"
+    object.fromentries "^2.0.8"
+    safe-regex-test "^1.0.3"
+    string.prototype.includes "^2.0.1"
 
 eslint-plugin-no-cyrillic-string@^1.0.5:
   version "1.0.5"
@@ -9872,15 +10559,41 @@ eslint-plugin-no-cyrillic-string@^1.0.5:
   dependencies:
     eslint-plugin-react "^7.21.0"
 
-eslint-plugin-playwright@^0.11.2:
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-playwright/-/eslint-plugin-playwright-0.11.2.tgz#876057d4ab19d00b44bf004e27d5ace2c8bffada"
-  integrity sha512-uRLRLk7uTzc8NE6t4wBU8dijQwHvC66R/h7xwdM779jsJjMUtSmeaB8ayRkkpfwi+UU5BEfwvDANwmE+ccMVDw==
+eslint-plugin-playwright@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-playwright/-/eslint-plugin-playwright-2.0.1.tgz#16b228398703007b86f72eb00e176322636491d9"
+  integrity sha512-f4a73xgCOK5Ug/5dtC82BVvND62lLqlMqgGkZn42teyvk6ccSyybHZXRHkpE7vKZSCjV57bnbR+3ucwItOhXlA==
+  dependencies:
+    globals "^13.23.0"
 
-eslint-plugin-react-hooks@^4.5.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
-  integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
+eslint-plugin-react-hooks@5.0.0, eslint-plugin-react-hooks@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.0.0.tgz#72e2eefbac4b694f5324154619fee44f5f60f101"
+  integrity sha512-hIOwI+5hYGpJEc4uPRmz2ulCjAGD/N13Lukkh8cLV0i2IRk/bdZDYjgLVHj+U9Z704kLIdIO6iueGvxNur0sgw==
+
+eslint-plugin-react@7.37.2, eslint-plugin-react@^7.35.0:
+  version "7.37.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.37.2.tgz#cd0935987876ba2900df2f58339f6d92305acc7a"
+  integrity sha512-EsTAnj9fLVr/GZleBLFbj/sSuXeWmp1eXIN60ceYnZveqEaUCyW4X+Vh4WTdUhCkW4xutXYqTXCUSyqD4rB75w==
+  dependencies:
+    array-includes "^3.1.8"
+    array.prototype.findlast "^1.2.5"
+    array.prototype.flatmap "^1.3.2"
+    array.prototype.tosorted "^1.1.4"
+    doctrine "^2.1.0"
+    es-iterator-helpers "^1.1.0"
+    estraverse "^5.3.0"
+    hasown "^2.0.2"
+    jsx-ast-utils "^2.4.1 || ^3.0.0"
+    minimatch "^3.1.2"
+    object.entries "^1.1.8"
+    object.fromentries "^2.0.8"
+    object.values "^1.2.0"
+    prop-types "^15.8.1"
+    resolve "^2.0.0-next.5"
+    semver "^6.3.1"
+    string.prototype.matchall "^4.0.11"
+    string.prototype.repeat "^1.0.0"
 
 eslint-plugin-react@^7.21.0:
   version "7.32.2"
@@ -9903,39 +10616,18 @@ eslint-plugin-react@^7.21.0:
     semver "^6.3.0"
     string.prototype.matchall "^4.0.8"
 
-eslint-plugin-react@^7.31.7:
-  version "7.31.10"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.31.10.tgz#6782c2c7fe91c09e715d536067644bbb9491419a"
-  integrity sha512-e4N/nc6AAlg4UKW/mXeYWd3R++qUano5/o+t+wnWxIf+bLsOaH3a4q74kX3nDjYym3VBN4HyO9nEn1GcAqgQOA==
+eslint-plugin-regexp@2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-regexp/-/eslint-plugin-regexp-2.6.0.tgz#54b9ca535662ca2c59ca211b7723ef22e2b6681b"
+  integrity sha512-FCL851+kislsTEQEMioAlpDuK5+E5vs0hi1bF8cFlPlHcEjeRhuAzEsGikXRreE+0j4WhW2uO54MqTjXtYOi3A==
   dependencies:
-    array-includes "^3.1.5"
-    array.prototype.flatmap "^1.3.0"
-    doctrine "^2.1.0"
-    estraverse "^5.3.0"
-    jsx-ast-utils "^2.4.1 || ^3.0.0"
-    minimatch "^3.1.2"
-    object.entries "^1.1.5"
-    object.fromentries "^2.0.5"
-    object.hasown "^1.1.1"
-    object.values "^1.1.5"
-    prop-types "^15.8.1"
-    resolve "^2.0.0-next.3"
-    semver "^6.3.0"
-    string.prototype.matchall "^4.0.7"
-
-eslint-plugin-regexp@^1.7.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-regexp/-/eslint-plugin-regexp-1.9.0.tgz#692476a4f620e16634f747bf5c4bfbcd480ff6d9"
-  integrity sha512-Che49IZ07w9KcKvrMiqfwBYv44VBunA4NqUo+UTLluYbCos9Du3+pnhkPTLTAx6ZoZ1Rmz7u7o2iC6g6qCuvxw==
-  dependencies:
-    comment-parser "^1.1.2"
-    eslint-utils "^3.0.0"
-    grapheme-splitter "^1.0.4"
-    jsdoctypeparser "^9.0.0"
-    refa "^0.9.0"
-    regexp-ast-analysis "^0.5.1"
-    regexpp "^3.2.0"
-    scslre "^0.1.6"
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.9.1"
+    comment-parser "^1.4.0"
+    jsdoc-type-pratt-parser "^4.0.0"
+    refa "^0.12.1"
+    regexp-ast-analysis "^0.7.1"
+    scslre "^0.3.0"
 
 eslint-scope@^5.1.1:
   version "5.1.1"
@@ -9945,94 +10637,88 @@ eslint-scope@^5.1.1:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
-eslint-scope@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.1.1.tgz#fff34894c2f65e5226d3041ac480b4513a163642"
-  integrity sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==
+eslint-scope@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-8.2.0.tgz#377aa6f1cb5dc7592cfd0b7f892fd0cf352ce442"
+  integrity sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==
   dependencies:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
 
-eslint-utils@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672"
-  integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
-  dependencies:
-    eslint-visitor-keys "^2.0.0"
-
-eslint-visitor-keys@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
-  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
-
 eslint-visitor-keys@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
   integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
 
-eslint@^8.32.0:
-  version "8.32.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.32.0.tgz#d9690056bb6f1a302bd991e7090f5b68fbaea861"
-  integrity sha512-nETVXpnthqKPFyuY2FNjz/bEd6nbosRgKbkgS/y1C7LJop96gYHWpiguLecMHQ2XCPxn77DS0P+68WzG6vkZSQ==
+eslint-visitor-keys@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
+eslint-visitor-keys@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz#687bacb2af884fcdda8a6e7d65c606f46a14cd45"
+  integrity sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==
+
+eslint@9.14.0:
+  version "9.14.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-9.14.0.tgz#534180a97c00af08bcf2b60b0ebf0c4d6c1b2c95"
+  integrity sha512-c2FHsVBr87lnUtjP4Yhvk4yEhKrQavGafRA/Se1ouse8PfbfC/Qh9Mxa00yWsZRlqeUB9raXip0aiiUZkgnr9g==
   dependencies:
-    "@eslint/eslintrc" "^1.4.1"
-    "@humanwhocodes/config-array" "^0.11.8"
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.12.1"
+    "@eslint/config-array" "^0.18.0"
+    "@eslint/core" "^0.7.0"
+    "@eslint/eslintrc" "^3.1.0"
+    "@eslint/js" "9.14.0"
+    "@eslint/plugin-kit" "^0.2.0"
+    "@humanfs/node" "^0.16.6"
     "@humanwhocodes/module-importer" "^1.0.1"
-    "@nodelib/fs.walk" "^1.2.8"
-    ajv "^6.10.0"
+    "@humanwhocodes/retry" "^0.4.0"
+    "@types/estree" "^1.0.6"
+    "@types/json-schema" "^7.0.15"
+    ajv "^6.12.4"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
     debug "^4.3.2"
-    doctrine "^3.0.0"
     escape-string-regexp "^4.0.0"
-    eslint-scope "^7.1.1"
-    eslint-utils "^3.0.0"
-    eslint-visitor-keys "^3.3.0"
-    espree "^9.4.0"
-    esquery "^1.4.0"
+    eslint-scope "^8.2.0"
+    eslint-visitor-keys "^4.2.0"
+    espree "^10.3.0"
+    esquery "^1.5.0"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
-    file-entry-cache "^6.0.1"
+    file-entry-cache "^8.0.0"
     find-up "^5.0.0"
     glob-parent "^6.0.2"
-    globals "^13.19.0"
-    grapheme-splitter "^1.0.4"
     ignore "^5.2.0"
-    import-fresh "^3.0.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
-    is-path-inside "^3.0.3"
-    js-sdsl "^4.1.4"
-    js-yaml "^4.1.0"
     json-stable-stringify-without-jsonify "^1.0.1"
-    levn "^0.4.1"
     lodash.merge "^4.6.2"
     minimatch "^3.1.2"
     natural-compare "^1.4.0"
-    optionator "^0.9.1"
-    regexpp "^3.2.0"
-    strip-ansi "^6.0.1"
-    strip-json-comments "^3.1.0"
+    optionator "^0.9.3"
     text-table "^0.2.0"
 
-espree@^9.4.0:
-  version "9.4.0"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-9.4.0.tgz#cd4bc3d6e9336c433265fc0aa016fc1aaf182f8a"
-  integrity sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==
+espree@^10.0.1, espree@^10.3.0:
+  version "10.3.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-10.3.0.tgz#29267cf5b0cb98735b65e64ba07e0ed49d1eed8a"
+  integrity sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==
   dependencies:
-    acorn "^8.8.0"
+    acorn "^8.14.0"
     acorn-jsx "^5.3.2"
-    eslint-visitor-keys "^3.3.0"
+    eslint-visitor-keys "^4.2.0"
 
 esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
-  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
+esquery@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
+  integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
   dependencies:
     estraverse "^5.1.0"
 
@@ -10063,22 +10749,23 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
-eth-block-tracker@6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/eth-block-tracker/-/eth-block-tracker-6.1.0.tgz#0481f97bbb88a100b9d45806fe7e37af741cbefc"
-  integrity sha512-K9SY8+/xMBi4M5HHTDdxnpEqEEGjbNpzHFqvxyjMZej8InV/B+CkFRKM6W+uvrFJ7m8Zd1E0qUkseU3vdIDFYQ==
+eth-block-tracker@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/eth-block-tracker/-/eth-block-tracker-7.1.0.tgz#dfc16085c6817cc30caabba381deb8d204c1c766"
+  integrity sha512-8YdplnuE1IK4xfqpf4iU7oBxnOYAc35934o083G8ao+8WM8QQtt/mVlAY6yIAdY1eMeLqg4Z//PZjJGmWGPMRg==
   dependencies:
-    "@metamask/safe-event-emitter" "^2.0.0"
-    "@metamask/utils" "^3.0.1"
+    "@metamask/eth-json-rpc-provider" "^1.0.0"
+    "@metamask/safe-event-emitter" "^3.0.0"
+    "@metamask/utils" "^5.0.1"
     json-rpc-random-id "^1.0.1"
     pify "^3.0.0"
 
-eth-json-rpc-filters@5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/eth-json-rpc-filters/-/eth-json-rpc-filters-5.1.0.tgz#f0c2aeaec2a45e2dc6ca1b9843d8e85447821427"
-  integrity sha512-fos+9xmoa1A2Ytsc9eYof17r81BjdJOUcGcgZn4K/tKdCCTb+a8ytEtwlu1op5qsXFDlgGmstTELFrDEc89qEQ==
+eth-json-rpc-filters@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/eth-json-rpc-filters/-/eth-json-rpc-filters-6.0.1.tgz#0b3e370f017f5c6f58d3e7bd0756d8099ed85c56"
+  integrity sha512-ITJTvqoCw6OVMLs7pI8f4gG92n/St6x80ACtHodeS+IXmO0w+t1T5OOzfSt7KLSMLRkVUoexV7tztLgDxg+iig==
   dependencies:
-    "@metamask/safe-event-emitter" "^2.0.0"
+    "@metamask/safe-event-emitter" "^3.0.0"
     async-mutex "^0.2.6"
     eth-query "^2.1.2"
     json-rpc-engine "^6.1.0"
@@ -10092,14 +10779,7 @@ eth-query@^2.1.2:
     json-rpc-random-id "^1.0.0"
     xtend "^4.0.1"
 
-eth-rpc-errors@4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/eth-rpc-errors/-/eth-rpc-errors-4.0.2.tgz#11bc164e25237a679061ac05b7da7537b673d3b7"
-  integrity sha512-n+Re6Gu8XGyfFy1it0AwbD1x0MUzspQs0D5UiPs1fFPCr6WAwZM+vbIhXheBFrpgosqN9bs5PqlB4Q61U/QytQ==
-  dependencies:
-    fast-safe-stringify "^2.0.6"
-
-eth-rpc-errors@^4.0.2:
+eth-rpc-errors@^4.0.2, eth-rpc-errors@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/eth-rpc-errors/-/eth-rpc-errors-4.0.3.tgz#6ddb6190a4bf360afda82790bb7d9d5e724f423a"
   integrity sha512-Z3ymjopaoft7JDoxZcEb3pwdGh7yiYMhOwm2doUt6ASXlMavpNlK6Cre0+IMl2VSGyEU9rkiperQhp5iRxn5Pg==
@@ -10116,53 +10796,22 @@ ethereum-cryptography@^2.0.0:
     "@scure/bip32" "1.3.1"
     "@scure/bip39" "1.2.1"
 
-ethers@^5.7.2:
-  version "5.7.2"
-  resolved "https://registry.yarnpkg.com/ethers/-/ethers-5.7.2.tgz#3a7deeabbb8c030d4126b24f84e525466145872e"
-  integrity sha512-wswUsmWo1aOK8rR7DIKiWSw9DbLWe6x98Jrn8wcTflTVvaXhAMaB5zGAXy0GYQEQp9iO1iSHWVyARQm11zUtyg==
-  dependencies:
-    "@ethersproject/abi" "5.7.0"
-    "@ethersproject/abstract-provider" "5.7.0"
-    "@ethersproject/abstract-signer" "5.7.0"
-    "@ethersproject/address" "5.7.0"
-    "@ethersproject/base64" "5.7.0"
-    "@ethersproject/basex" "5.7.0"
-    "@ethersproject/bignumber" "5.7.0"
-    "@ethersproject/bytes" "5.7.0"
-    "@ethersproject/constants" "5.7.0"
-    "@ethersproject/contracts" "5.7.0"
-    "@ethersproject/hash" "5.7.0"
-    "@ethersproject/hdnode" "5.7.0"
-    "@ethersproject/json-wallets" "5.7.0"
-    "@ethersproject/keccak256" "5.7.0"
-    "@ethersproject/logger" "5.7.0"
-    "@ethersproject/networks" "5.7.1"
-    "@ethersproject/pbkdf2" "5.7.0"
-    "@ethersproject/properties" "5.7.0"
-    "@ethersproject/providers" "5.7.2"
-    "@ethersproject/random" "5.7.0"
-    "@ethersproject/rlp" "5.7.0"
-    "@ethersproject/sha2" "5.7.0"
-    "@ethersproject/signing-key" "5.7.0"
-    "@ethersproject/solidity" "5.7.0"
-    "@ethersproject/strings" "5.7.0"
-    "@ethersproject/transactions" "5.7.0"
-    "@ethersproject/units" "5.7.0"
-    "@ethersproject/wallet" "5.7.0"
-    "@ethersproject/web" "5.7.1"
-    "@ethersproject/wordlists" "5.7.0"
-
 event-target-shim@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
   integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
 
-eventemitter3@^4.0.7:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
-  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
+eventemitter2@^6.4.9:
+  version "6.4.9"
+  resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.9.tgz#41f2750781b4230ed58827bc119d293471ecb125"
+  integrity sha512-JEPTiaOt9f04oa6NOkc4aH+nVp5I3wEjpHbIPqfgCdD5v5bUzy7xQqwcVO2aDQgOWhI28da57HksMrzK9HlRxg==
 
-events@^3.3.0:
+eventemitter3@5.0.1, eventemitter3@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4"
+  integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==
+
+events@3.3.0, events@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
@@ -10230,10 +10879,13 @@ extension-port-stream@^2.0.1:
   dependencies:
     webextension-polyfill-ts "^0.22.0"
 
-eyes@^0.1.8:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/eyes/-/eyes-0.1.8.tgz#62cf120234c683785d902348a800ef3e0cc20bc0"
-  integrity sha512-GipyPsXO1anza0AOZdy69Im7hGFCNB7Y/NGjDlZGJ3GJJLtwNSb2vrzYrTYJRrRloVx7pl+bhUaTB8yiccPvFQ==
+extension-port-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/extension-port-stream/-/extension-port-stream-3.0.0.tgz#00a7185fe2322708a36ed24843c81bd754925fef"
+  integrity sha512-an2S5quJMiy5bnZKEf6AkfH/7r8CzHvhchU40gxN+OM6HPhe7Z9T1FUychcf2M9PpPOO0Hf7BAEfJkw2TDIBDw==
+  dependencies:
+    readable-stream "^3.6.2 || ^4.4.2"
+    webextension-polyfill ">=0.10.0 <1.0"
 
 fast-copy@^3.0.0:
   version "3.0.0"
@@ -10250,6 +10902,17 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-glob@3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
+  integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-glob@^3.2.11, fast-glob@^3.2.9:
   version "3.2.12"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
@@ -10261,6 +10924,17 @@ fast-glob@^3.2.11, fast-glob@^3.2.9:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
+fast-glob@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-patch@^3.0.0-1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/fast-json-patch/-/fast-json-patch-3.1.1.tgz#85064ea1b1ebf97a3f7ad01e23f9337e72c66947"
@@ -10286,11 +10960,6 @@ fast-safe-stringify@^2.0.6, fast-safe-stringify@^2.1.1:
   resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz#c406a83b6e70d9e35ce3b30a81141df30aeba884"
   integrity sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==
 
-fast-stable-stringify@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fast-stable-stringify/-/fast-stable-stringify-1.0.0.tgz#5c5543462b22aeeefd36d05b34e51c78cb86d313"
-  integrity sha512-wpYMUmFu5f00Sm0cj2pfivpmawLZ0NKdviQ4w9zJeR8JVtOpOxHmLaJuj0vxvGqMJQWyP/COUkF75/57OKyRag==
-
 fast-url-parser@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/fast-url-parser/-/fast-url-parser-1.1.3.tgz#f4af3ea9f34d8a271cf58ad2b3759f431f0b318d"
@@ -10327,22 +10996,17 @@ fetch-blob@^3.1.2, fetch-blob@^3.1.4:
     node-domexception "^1.0.0"
     web-streams-polyfill "^3.0.3"
 
-file-entry-cache@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
-  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+file-entry-cache@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-8.0.0.tgz#7787bddcf1131bffb92636c69457bbc0edd6d81f"
+  integrity sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==
   dependencies:
-    flat-cache "^3.0.4"
-
-file-uri-to-path@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
-  integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
+    flat-cache "^4.0.0"
 
-fill-range@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
-  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
   dependencies:
     to-regex-range "^5.0.1"
 
@@ -10377,20 +11041,27 @@ find-yarn-workspace-root@^2.0.0:
   resolved "https://registry.yarnpkg.com/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz#f47fb8d239c900eb78179aa81b66673eac88f7bd"
   integrity sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==
   dependencies:
-    micromatch "^4.0.2"
+    micromatch "^4.0.2"
+
+find@^0.2.4:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/find/-/find-0.2.9.tgz#4b73f1ff9e56ad91b76e716407fe5ffe6554bb8c"
+  integrity sha512-7a4/LCiInB9xYMnAUEjLilL9FKclwbwK7VlXw+h5jMvT2TDFeYFCHM24O1XdnC/on/hx8mxVO3FTQkyHZnOghQ==
+  dependencies:
+    traverse-chain "~0.1.0"
 
-flat-cache@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
-  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+flat-cache@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-4.0.1.tgz#0ece39fcb14ee012f4b0410bd33dd9c1f011127c"
+  integrity sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==
   dependencies:
-    flatted "^3.1.0"
-    rimraf "^3.0.2"
+    flatted "^3.2.9"
+    keyv "^4.5.4"
 
-flatted@^3.1.0:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
-  integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
+flatted@^3.2.9:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
+  integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
 
 focus-lock@^0.11.6:
   version "0.11.6"
@@ -10399,17 +11070,15 @@ focus-lock@^0.11.6:
   dependencies:
     tslib "^2.0.3"
 
-focus-lock@^1.3.2:
-  version "1.3.4"
-  resolved "https://registry.npmjs.org/focus-lock/-/focus-lock-1.3.4.tgz#a143aa327224df2e83414f87e8a3328cb5a62156"
-  integrity sha512-Gv0N3mvej3pD+HWkNryrF8sExzEHqhQ6OSFxD4DPxm9n5HGCaHme98ZMBZroNEAJcsdtHxk+skvThGKyUeoEGA==
-  dependencies:
-    tslib "^2.0.3"
+focus-visible@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/focus-visible/-/focus-visible-5.2.0.tgz#3a9e41fccf587bd25dcc2ef045508284f0a4d6b3"
+  integrity sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ==
 
-follow-redirects@^1.15.0:
-  version "1.15.2"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
-  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+follow-redirects@^1.15.6:
+  version "1.15.9"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
+  integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
 
 fontfaceobserver@2.1.0:
   version "2.1.0"
@@ -10505,6 +11174,11 @@ fsevents@2.3.2, fsevents@^2.3.2, fsevents@~2.3.2:
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
 
+fsevents@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@@ -10515,6 +11189,11 @@ function-bind@^1.1.2:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
   integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
 
+function-timeout@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/function-timeout/-/function-timeout-0.1.1.tgz#6bf71d3d24c894d43b2bec312cabb8c5add2e9da"
+  integrity sha512-0NVVC0TaP7dSTvn1yMiy6d6Q8gifzbvQafO46RtLG/kHJUBNd+pVRGOBoK44wNBvtSPUJRfdVvkFdD3p0xvyZg==
+
 function.prototype.name@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
@@ -10525,29 +11204,47 @@ function.prototype.name@^1.1.5:
     es-abstract "^1.19.0"
     functions-have-names "^1.2.2"
 
-functions-have-names@^1.2.2:
+function.prototype.name@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz#cdf315b7d90ee77a4c6ee216c3c3362da07533fd"
+  integrity sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    functions-have-names "^1.2.3"
+
+functions-have-names@^1.2.2, functions-have-names@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
-gaxios@^5.0.0:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/gaxios/-/gaxios-5.1.3.tgz#f7fa92da0fe197c846441e5ead2573d4979e9013"
-  integrity sha512-95hVgBRgEIRQQQHIbnxBXeHbW4TqFk4ZDJW7wmVtvYar72FdhRIo1UGOLS2eRAKCPEdPBWu+M7+A33D9CdX9rA==
+gaxios@^6.0.0:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/gaxios/-/gaxios-6.7.1.tgz#ebd9f7093ede3ba502685e73390248bb5b7f71fb"
+  integrity sha512-LDODD4TMYx7XXdpwxAVRAIAuB0bzv0s+ywFonY46k126qzQHT9ygyoa9tncmOiQmmDrik65UYsEkv3lbfqQ3yQ==
   dependencies:
     extend "^3.0.2"
-    https-proxy-agent "^5.0.0"
+    https-proxy-agent "^7.0.1"
     is-stream "^2.0.0"
     node-fetch "^2.6.9"
+    uuid "^9.0.1"
 
-gcp-metadata@^5.0.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/gcp-metadata/-/gcp-metadata-5.3.0.tgz#6f45eb473d0cb47d15001476b48b663744d25408"
-  integrity sha512-FNTkdNEnBdlqF2oatizolQqNANMrcqJt6AAYt99B3y1aLLC8Hc5IOBb+ZnnzllodEEf6xMBp6wRcBbc16fa65w==
+gcp-metadata@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/gcp-metadata/-/gcp-metadata-6.1.0.tgz#9b0dd2b2445258e7597f2024332d20611cbd6b8c"
+  integrity sha512-Jh/AIwwgaxan+7ZUUmRLCjtchyDiqh4KjBJ5tW3plBZb5iL/BPcso8A5DlzeD9qlw0duCamnNdpFjxwaT0KyKg==
   dependencies:
-    gaxios "^5.0.0"
+    gaxios "^6.0.0"
     json-bigint "^1.0.0"
 
+generic-names@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-4.0.0.tgz#0bd8a2fd23fe8ea16cbd0a279acd69c06933d9a3"
+  integrity sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==
+  dependencies:
+    loader-utils "^3.2.0"
+
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
@@ -10576,6 +11273,22 @@ get-intrinsic@^1.1.0, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3:
     has "^1.0.3"
     has-symbols "^1.0.3"
 
+get-intrinsic@^1.2.1, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
+  integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    hasown "^2.0.0"
+
+get-iterator@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/get-iterator/-/get-iterator-2.0.1.tgz#a904829f61bace789e0d64bd1a504c511a015c3f"
+  integrity sha512-7HuY/hebu4gryTDT7O/XY/fvY9wRByEGdK6QOa4of8npTcv0+NS6frFKABcf6S9EBAsveTuKTsZQQBFMMNILIg==
+
 get-nonce@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
@@ -10604,11 +11317,29 @@ get-symbol-description@^1.0.0:
     call-bind "^1.0.2"
     get-intrinsic "^1.1.1"
 
+get-symbol-description@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.2.tgz#533744d5aa20aca4e079c8e5daf7fd44202821f5"
+  integrity sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==
+  dependencies:
+    call-bind "^1.0.5"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+
 get-tsconfig@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.5.0.tgz#6d52d1c7b299bd3ee9cd7638561653399ac77b0f"
   integrity sha512-MjhiaIWCJ1sAU4pIQ5i5OfOuHHxVo1oYeNsWTON7jxYkod8pHocXeh+SSbmu5OZZZK73B6cbJ2XADzXehLyovQ==
 
+getit-sdk@^1.0.4:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/getit-sdk/-/getit-sdk-1.0.13.tgz#702cd2e8dfeb42884deed6d8d7fbac9af413c73a"
+  integrity sha512-gWDJZNMoy7Uw9S3qOvQ+gVFdmrHuI17ePGhJYbP25DGOzgCwD5n7KDy9JWxGpLqEnf+V3v3aoyTvP8TtZheEaA==
+  dependencies:
+    axios "^1.6.2"
+    jest-transform-css "^6.0.1"
+    tslib "^2.6.2"
+
 github-from-package@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce"
@@ -10628,40 +11359,6 @@ glob-parent@^6.0.2:
   dependencies:
     is-glob "^4.0.3"
 
-glob-regex@^0.3.0:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/glob-regex/-/glob-regex-0.3.2.tgz#27348f2f60648ec32a4a53137090b9fb934f3425"
-  integrity sha512-m5blUd3/OqDTWwzBBtWBPrGlAzatRywHameHeekAZyZrskYouOGdNB8T/q6JucucvJXtOuyHIn0/Yia7iDasDw==
-
-glob-to-regexp@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
-  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
-
-glob@7.1.6:
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
-  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-glob@7.1.7:
-  version "7.1.7"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
-  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
 glob@^10.3.10:
   version "10.3.10"
   resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.10.tgz#0351ebb809fd187fe421ab96af83d3a70715df4b"
@@ -10696,18 +11393,28 @@ glob@^8.0.0:
     minimatch "^5.0.1"
     once "^1.3.0"
 
+globals@15.12.0:
+  version "15.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-15.12.0.tgz#1811872883ad8f41055b61457a130221297de5b5"
+  integrity sha512-1+gLErljJFhbOVyaetcwJiJ4+eLe45S2E7P5UiZ9xGfeq3ATQf5DOv9G7MH3gGbKQLkzmNh2DxfZwLdw+j6oTQ==
+
 globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
-globals@^13.19.0:
-  version "13.19.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.19.0.tgz#7a42de8e6ad4f7242fbcca27ea5b23aca367b5c8"
-  integrity sha512-dkQ957uSRWHw7CFXLUtUHQI3g3aWApYhfNR2O6jn/907riyTYKVBmxYVROkBcY614FSSeSJh7Xm7SrUWCxvJMQ==
+globals@^13.23.0:
+  version "13.24.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
+  integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
   dependencies:
     type-fest "^0.20.2"
 
+globals@^14.0.0:
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-14.0.0.tgz#898d7413c29babcf6bafe56fcadded858ada724e"
+  integrity sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==
+
 globalthis@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.3.tgz#5852882a52b80dc301b0660273e1ed082f0b6ccf"
@@ -10715,6 +11422,14 @@ globalthis@^1.0.3:
   dependencies:
     define-properties "^1.1.3"
 
+globalthis@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.4.tgz#7430ed3a975d97bfb59bcce41f5cabbafa651236"
+  integrity sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==
+  dependencies:
+    define-properties "^1.2.1"
+    gopd "^1.0.1"
+
 globalyzer@0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/globalyzer/-/globalyzer-0.1.0.tgz#cb76da79555669a1519d5a8edf093afaa0bf1465"
@@ -10755,7 +11470,7 @@ gopd@^1.0.1:
   dependencies:
     get-intrinsic "^1.1.3"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+graceful-fs@^4.1.11, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -10765,19 +11480,18 @@ graceful-fs@^4.2.4, graceful-fs@^4.2.9:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
-gradient-avatar@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/gradient-avatar/-/gradient-avatar-1.0.2.tgz#42bb408e402b1f21aafba3878858721055515224"
-  integrity sha512-Od9KI2YImV60wnsvU/u6GEyBm2fiHUUHgiLySE243GYl/T/tiJMJ5QYey8o7tepugmlnUGQRaCItHv19UnUjUg==
+"gradient-avatar@git+https://github.com/blockscout/gradient-avatar.git":
+  version "1.0.3"
+  resolved "git+https://github.com/blockscout/gradient-avatar.git#86810368c2581d2dc3aca089dc648336c8e17045"
   dependencies:
     hsl-rgb "^1.0.0"
     hsl-triad "^1.0.0"
     string-hash "^1.1.3"
 
-grapheme-splitter@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
-  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
+graphemer@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
+  integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
 graphiql@^2.2.0:
   version "2.2.0"
@@ -10829,6 +11543,14 @@ h3@^1.8.1, h3@^1.8.2:
     uncrypto "^0.1.3"
     unenv "^1.7.4"
 
+hamt-sharding@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/hamt-sharding/-/hamt-sharding-3.0.6.tgz#3643107a3021af66ac95684aec87b196add5ba57"
+  integrity sha512-nZeamxfymIWLpVcAN0CRrb7uVq3hCOGj9IcL6NMA6VVCVWqj+h9Jo/SmaWuS92AEDf1thmHsM5D5c70hM3j2Tg==
+  dependencies:
+    sparse-array "^1.3.1"
+    uint8arrays "^5.0.1"
+
 has-bigints@^1.0.1, has-bigints@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
@@ -10851,11 +11573,23 @@ has-property-descriptors@^1.0.0:
   dependencies:
     get-intrinsic "^1.1.1"
 
+has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
+
 has-proto@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.1.tgz#1885c1305538958aff469fef37937c22795408e0"
   integrity sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==
 
+has-proto@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd"
+  integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
+
 has-symbols@^1.0.1, has-symbols@^1.0.2, has-symbols@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
@@ -10868,6 +11602,13 @@ has-tostringtag@^1.0.0:
   dependencies:
     has-symbols "^1.0.2"
 
+has-tostringtag@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
+  integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
+  dependencies:
+    has-symbols "^1.0.3"
+
 has@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
@@ -10875,7 +11616,7 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hash.js@1.1.7, hash.js@^1.0.0, hash.js@^1.0.3, hash.js@^1.1.7:
+hash.js@1.1.7, hash.js@^1.0.0, hash.js@^1.0.3:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
   integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
@@ -10883,6 +11624,11 @@ hash.js@1.1.7, hash.js@^1.0.0, hash.js@^1.0.3, hash.js@^1.1.7:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
+hashlru@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/hashlru/-/hashlru-2.3.0.tgz#5dc15928b3f6961a2056416bb3a4910216fdfb51"
+  integrity sha512-0cMsjjIC8I+D3M44pOQdsy0OHXGLVz6Z0beRuufhKa0KfaD2wGwAev6jILzXsd3/vpnNQJmWyZtIILqM1N+n5A==
+
 hasown@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.0.tgz#f4c513d454a57b7c7e1650778de226b11700546c"
@@ -10890,6 +11636,13 @@ hasown@^2.0.0:
   dependencies:
     function-bind "^1.1.2"
 
+hasown@^2.0.1, hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
 hast-util-parse-selector@^2.0.0:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz#d57c23f4da16ae3c63b3b6ca4616683313499c3a"
@@ -10972,7 +11725,7 @@ html-encoding-sniffer@^3.0.0:
   dependencies:
     whatwg-encoding "^2.0.0"
 
-html-escaper@^2.0.0:
+html-escaper@^2.0.0, html-escaper@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
@@ -10991,7 +11744,7 @@ http-shutdown@^1.2.2:
   resolved "https://registry.yarnpkg.com/http-shutdown/-/http-shutdown-1.2.2.tgz#41bc78fc767637c4c95179bc492f312c0ae64c5f"
   integrity sha512-S9wWkJ/VSY9/k4qcjG318bqJNruzE4HySUhFYknwmu6LBP97KLLfwNf+n4V1BHurvFNkSKLFnK/RsuUnRTf9Vw==
 
-https-proxy-agent@^5.0.0, https-proxy-agent@^5.0.1:
+https-proxy-agent@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
   integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
@@ -10999,6 +11752,14 @@ https-proxy-agent@^5.0.0, https-proxy-agent@^5.0.1:
     agent-base "6"
     debug "4"
 
+https-proxy-agent@^7.0.1:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz#9e8b5013873299e11fab6fd548405da2d6c602b2"
+  integrity sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==
+  dependencies:
+    agent-base "^7.0.2"
+    debug "4"
+
 human-signals@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
@@ -11009,13 +11770,6 @@ human-signals@^3.0.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-3.0.1.tgz#c740920859dafa50e5a3222da9d3bf4bb0e5eef5"
   integrity sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ==
 
-humanize-ms@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/humanize-ms/-/humanize-ms-1.2.1.tgz#c46e3159a293f6b896da29316d8b6fe8bb79bbed"
-  integrity sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==
-  dependencies:
-    ms "^2.0.0"
-
 husky@^8.0.0:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/husky/-/husky-8.0.1.tgz#511cb3e57de3e3190514ae49ed50f6bc3f50b3e9"
@@ -11028,6 +11782,11 @@ iconv-lite@0.6, iconv-lite@0.6.3:
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
+icss-replace-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
+  integrity sha512-chIaY3Vh2mh2Q3RGXttaDIzeiPvaVXJ+C4DAh/w3c37SKZ/U6PGMmuicR2EQQp9bKG8zLMCl7I+PtIoOOPp8Gg==
+
 icss-utils@^5.0.0, icss-utils@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
@@ -11048,12 +11807,17 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
 
+ignore@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
+  integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
+
 immutable@^3.x.x:
   version "3.8.2"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
   integrity sha512-15gZoQ38eYjEjxkorfbcgBKBL6R7T459OuK+CpcWt7O3KF4uPCx2tD0uFETlUDIyo+1789crbMhTvQBSR5yBMg==
 
-import-fresh@^3.0.0, import-fresh@^3.2.1:
+import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
@@ -11061,10 +11825,10 @@ import-fresh@^3.0.0, import-fresh@^3.2.1:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
-import-in-the-middle@1.4.2:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/import-in-the-middle/-/import-in-the-middle-1.4.2.tgz#2a266676e3495e72c04bbaa5ec14756ba168391b"
-  integrity sha512-9WOz1Yh/cvO/p69sxRmhyQwrIGGSp7EIdcb+fFNVi7CzQGQB8U1/1XrKVSbEd/GNOAeM0peJtmi7+qphe7NvAw==
+import-in-the-middle@1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/import-in-the-middle/-/import-in-the-middle-1.7.1.tgz#3e111ff79c639d0bde459bd7ba29dd9fdf357364"
+  integrity sha512-1LrZPDtW+atAxH42S6288qyDFNQ2YCty+2mxEPRtfazH6Z5QwkaBSTS2ods7hnVJioF6rkRfNoA6A/MstpFXLg==
   dependencies:
     acorn "^8.8.2"
     acorn-import-assertions "^1.9.0"
@@ -11097,7 +11861,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3, inherits@~2.0.4:
+inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -11107,6 +11871,27 @@ ini@~1.3.0:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
+interface-blockstore@^5.0.0, interface-blockstore@^5.2.10, interface-blockstore@^5.2.9, interface-blockstore@^5.3.0, interface-blockstore@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/interface-blockstore/-/interface-blockstore-5.3.1.tgz#03f511431be2b8b04a536eaae8effe4565ea6536"
+  integrity sha512-nhgrQnz6yUQEqxTFLhlOBurQOy5lWlwCpgFmZ3GTObTVTQS9RZjK/JTozY6ty9uz2lZs7VFJSqwjWAltorJ4Vw==
+  dependencies:
+    interface-store "^6.0.0"
+    multiformats "^13.2.3"
+
+interface-datastore@^8.0.0, interface-datastore@^8.2.11, interface-datastore@^8.3.0, interface-datastore@^8.3.1:
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/interface-datastore/-/interface-datastore-8.3.1.tgz#c793f990c5cf078a24a8a2ded13f7e2099a2a282"
+  integrity sha512-3r0ETmHIi6HmvM5sc09QQiCD3gUfwtEM/AAChOyAd/UAKT69uk8LXfTSUBufbUIO/dU65Vj8nb9O6QjwW8vDSQ==
+  dependencies:
+    interface-store "^6.0.0"
+    uint8arrays "^5.1.0"
+
+interface-store@^6.0.0:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/interface-store/-/interface-store-6.0.2.tgz#1746a1ee07634f7678b3aa778738b79e3f75c909"
+  integrity sha512-KSFCXtBlNoG0hzwNa0RmhHtrdhzexp+S+UY2s0rWTBJyfdEIgn6i6Zl9otVqrcFYbYrneBT7hbmHQ8gE0C3umA==
+
 internal-slot@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
@@ -11125,6 +11910,15 @@ internal-slot@^1.0.4:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+internal-slot@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802"
+  integrity sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==
+  dependencies:
+    es-errors "^1.3.0"
+    hasown "^2.0.0"
+    side-channel "^1.0.4"
+
 "internmap@1 - 2":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
@@ -11152,6 +11946,78 @@ ioredis@^5.3.2:
     redis-parser "^3.0.0"
     standard-as-callback "^2.1.0"
 
+ip-regex@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-5.0.0.tgz#cd313b2ae9c80c07bd3851e12bf4fa4dc5480632"
+  integrity sha512-fOCG6lhoKKakwv+C6KdsOnGvgXnmgfmp0myi3bcNwj3qfwPAxRKWEuFhvEFF7ceYIz6+1jRZ+yguLFAmUNPEfw==
+
+ipfs-unixfs-exporter@^13.5.0, ipfs-unixfs-exporter@^13.6.1:
+  version "13.6.1"
+  resolved "https://registry.yarnpkg.com/ipfs-unixfs-exporter/-/ipfs-unixfs-exporter-13.6.1.tgz#0e66908c7dcc80c8b4c0b97fc0432c8ac09bcade"
+  integrity sha512-pYPI4oBTWao2//sFzAL0pURyojn79q/u5BuK6L5/nVbVUQVw6DcVP5uB1ySdWlTM2H+0Zlhp9+OL9aJBRIICpg==
+  dependencies:
+    "@ipld/dag-cbor" "^9.2.1"
+    "@ipld/dag-json" "^10.2.2"
+    "@ipld/dag-pb" "^4.1.2"
+    "@multiformats/murmur3" "^2.1.8"
+    hamt-sharding "^3.0.6"
+    interface-blockstore "^5.3.0"
+    ipfs-unixfs "^11.0.0"
+    it-filter "^3.1.1"
+    it-last "^3.0.6"
+    it-map "^3.1.1"
+    it-parallel "^3.0.8"
+    it-pipe "^3.0.1"
+    it-pushable "^3.2.3"
+    multiformats "^13.2.3"
+    p-queue "^8.0.1"
+    progress-events "^1.0.1"
+
+ipfs-unixfs-importer@^15.2.4:
+  version "15.3.1"
+  resolved "https://registry.yarnpkg.com/ipfs-unixfs-importer/-/ipfs-unixfs-importer-15.3.1.tgz#93cf3bad77e3fff7ee25b4ba822c1a0d2fd56b6e"
+  integrity sha512-wHCTBqNsZXLJZ9/GSr7Msb3FDXD5yXF20Y9sKyUbbqNjbvaXs3n3h1+NM/5+WrgESHfwRcJIlJtaOKafL8Ymdg==
+  dependencies:
+    "@ipld/dag-pb" "^4.1.2"
+    "@multiformats/murmur3" "^2.1.8"
+    hamt-sharding "^3.0.6"
+    interface-blockstore "^5.3.0"
+    interface-store "^6.0.0"
+    ipfs-unixfs "^11.0.0"
+    it-all "^3.0.6"
+    it-batch "^3.0.6"
+    it-first "^3.0.6"
+    it-parallel-batch "^3.0.6"
+    multiformats "^13.2.3"
+    progress-events "^1.0.1"
+    rabin-wasm "^0.1.5"
+    uint8arraylist "^2.4.8"
+    uint8arrays "^5.1.0"
+
+ipfs-unixfs@^11.0.0, ipfs-unixfs@^11.1.3:
+  version "11.2.0"
+  resolved "https://registry.yarnpkg.com/ipfs-unixfs/-/ipfs-unixfs-11.2.0.tgz#a7f3d1f9bce29033f273bda124a0eb8bc0c752f6"
+  integrity sha512-J8FN1qM5nfrDo8sQKQwfj0+brTg1uBfZK2vY9hxci33lcl3BFrsELS9+1+4q/8tO1ASKfxZO8W3Pi2O4sVX2Lg==
+  dependencies:
+    protons-runtime "^5.5.0"
+    uint8arraylist "^2.4.8"
+
+ipns@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/ipns/-/ipns-10.0.0.tgz#639b6b2d939a5eac2f01e25670dd5952211f0a20"
+  integrity sha512-f0jnIr5apdKPYElbfupR3mpYgKf+/qhWNtD8aZxoryB+aZXV0Xk4vgpM5ZPDIr9mdu99ccBnxR+ILBVlP515uQ==
+  dependencies:
+    "@libp2p/crypto" "^5.0.0"
+    "@libp2p/interface" "^2.0.0"
+    "@libp2p/logger" "^5.0.0"
+    cborg "^4.2.3"
+    interface-datastore "^8.3.0"
+    multiformats "^13.2.2"
+    protons-runtime "^5.5.0"
+    timestamp-nano "^1.0.1"
+    uint8arraylist "^2.4.8"
+    uint8arrays "^5.1.0"
+
 iron-webcrypto@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/iron-webcrypto/-/iron-webcrypto-1.0.0.tgz#e3b689c0c61b434a0a4cb82d0aeabbc8b672a867"
@@ -11187,11 +12053,31 @@ is-array-buffer@^3.0.1:
     get-intrinsic "^1.1.3"
     is-typed-array "^1.1.10"
 
+is-array-buffer@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.4.tgz#7a1f92b3d61edd2bc65d24f130530ea93d7fae98"
+  integrity sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.2.1"
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
 
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
+is-async-function@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.0.0.tgz#8e4418efd3e5d3a6ebb0164c05ef5afb69aa9646"
+  integrity sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
 is-bigint@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
@@ -11233,13 +12119,27 @@ is-core-module@^2.13.0:
   dependencies:
     hasown "^2.0.0"
 
-is-core-module@^2.8.1, is-core-module@^2.9.0:
+is-core-module@^2.15.1:
+  version "2.15.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.15.1.tgz#a7363a25bee942fefab0de13bf6aa372c82dcc37"
+  integrity sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==
+  dependencies:
+    hasown "^2.0.2"
+
+is-core-module@^2.9.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.10.0.tgz#9012ede0a91c69587e647514e1d5277019e728ed"
   integrity sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==
   dependencies:
     has "^1.0.3"
 
+is-data-view@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-data-view/-/is-data-view-1.0.1.tgz#4b4d3a511b70f3dc26d42c03ca9ca515d847759f"
+  integrity sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==
+  dependencies:
+    is-typed-array "^1.1.13"
+
 is-date-object@^1.0.1, is-date-object@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
@@ -11262,6 +12162,13 @@ is-extglob@^2.1.1:
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
 
+is-finalizationregistry@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz#c8749b65f17c133313e661b1289b95ad3dbd62e6"
+  integrity sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==
+  dependencies:
+    call-bind "^1.0.2"
+
 is-fullwidth-code-point@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
@@ -11277,7 +12184,7 @@ is-generator-fn@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
   integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
 
-is-generator-function@^1.0.7:
+is-generator-function@^1.0.10, is-generator-function@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.10.tgz#f1558baf1ac17e0deea7c0415c438351ff2b3c72"
   integrity sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==
@@ -11296,6 +12203,19 @@ is-hexadecimal@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
   integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
 
+is-ip@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/is-ip/-/is-ip-5.0.1.tgz#bec44442c823e591aa6f4d6fb9081d6a9be17e44"
+  integrity sha512-FCsGHdlrOnZQcp0+XT5a+pYowf33itBalCl+7ovNXC/7o5BhIpG14M3OrpPPdBSIQJCm+0M5+9mO7S9VVTTCFw==
+  dependencies:
+    ip-regex "^5.0.0"
+    super-regex "^0.2.0"
+
+is-loopback-addr@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-loopback-addr/-/is-loopback-addr-2.0.2.tgz#70a6668fa3555d47caebdcee045745ab80adf5e4"
+  integrity sha512-26POf2KRCno/KTNL5Q0b/9TYnL00xEsSaLfiFRmjM7m7Lw7ZMmFybzzuX4CcsLAluZGd+niLUiMRxEooVE3aqg==
+
 is-map@^2.0.1, is-map@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
@@ -11306,6 +12226,11 @@ is-negative-zero@^2.0.2:
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
   integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
 
+is-negative-zero@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.3.tgz#ced903a027aca6381b777a5743069d7376a49747"
+  integrity sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==
+
 is-number-object@^1.0.4:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.7.tgz#59d50ada4c45251784e9904f5246c742f07a42fc"
@@ -11318,10 +12243,10 @@ is-number@^7.0.0:
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
-is-path-inside@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
-  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
+is-plain-obj@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
+  integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
 
 is-plain-object@^2.0.4:
   version "2.0.4"
@@ -11353,6 +12278,11 @@ is-regex@^1.1.4:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
+is-regexp@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-3.1.0.tgz#0235eab9cda5b83f96ac4a263d8c32c9d5ad7422"
+  integrity sha512-rbku49cWloU5bSMI+zaRaXdQHXnthP6DZ/vLnfdSKyL4zUzuWnomtOEiZZOd+ioQ+avFo/qau3KPTc7Fjy1uPA==
+
 is-set@^2.0.1, is-set@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
@@ -11365,6 +12295,13 @@ is-shared-array-buffer@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-shared-array-buffer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz#1237f1cba059cdb62431d378dcc37d9680181688"
+  integrity sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==
+  dependencies:
+    call-bind "^1.0.7"
+
 is-stream@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
@@ -11400,10 +12337,12 @@ is-typed-array@^1.1.10, is-typed-array@^1.1.3, is-typed-array@^1.1.9:
     gopd "^1.0.1"
     has-tostringtag "^1.0.0"
 
-is-typedarray@1.0.0, is-typedarray@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
-  integrity sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==
+is-typed-array@^1.1.13:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.13.tgz#d6c5ca56df62334959322d7d7dd1cca50debe229"
+  integrity sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==
+  dependencies:
+    which-typed-array "^1.1.14"
 
 is-weakmap@^2.0.1:
   version "2.0.1"
@@ -11447,67 +12386,287 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
+iso-constants@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/iso-constants/-/iso-constants-0.1.2.tgz#3d2456ed5aeaa55d18564f285ba02a47a0d885b4"
+  integrity sha512-OTCM5ZCQsHBCI4Wdu4tSxvDIkmDHd5EwJDps5mKqnQnWJSKlnwMs3EDZ4n3Fh1tmkWkDlyd2vCDbEYuPbyrUNQ==
+
 isobject@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
 
-isomorphic-ws@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz#e5529148912ecb9b451b46ed44d53dae1ce04bbf"
-  integrity sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==
-
-isomorphic-ws@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz#55fd4cd6c5e6491e76dc125938dd863f5cd4f2dc"
-  integrity sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==
-
 isows@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/isows/-/isows-1.0.3.tgz#93c1cf0575daf56e7120bab5c8c448b0809d0d74"
   integrity sha512-2cKei4vlmg2cxEjm3wVSqn8pcoRF/LX/wpifuuNquFO4SQmPwarClT+SUCA2lt+l581tTeZIPIZuIDo2jWN1fg==
 
+isows@1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/isows/-/isows-1.0.4.tgz#810cd0d90cc4995c26395d2aa4cfa4037ebdf061"
+  integrity sha512-hEzjY+x9u9hPmBom9IIAqdJCwNLax+xrPb51vEPpERoFlIxgmZcHzsT5jKG06nvInKOBGvReAVz80Umed5CczQ==
+
+isows@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/isows/-/isows-1.0.6.tgz#0da29d706fa51551c663c627ace42769850f86e7"
+  integrity sha512-lPHCayd40oW98/I0uvgaHKWCSvkzY27LjWLbtzOm64yQ+G3Q5npjjbdppU65iZXkK1Zt+kH9pfegli0AYfwYYw==
+
 istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz#189e7909d0a39fa5a3dfad5b03f71947770191d3"
   integrity sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==
 
-istanbul-lib-instrument@^5.0.4, istanbul-lib-instrument@^5.1.0:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz#d10c8885c2125574e1c231cacadf955675e1ce3d"
-  integrity sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==
+istanbul-lib-instrument@^5.0.4, istanbul-lib-instrument@^5.1.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz#d10c8885c2125574e1c231cacadf955675e1ce3d"
+  integrity sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==
+  dependencies:
+    "@babel/core" "^7.12.3"
+    "@babel/parser" "^7.14.7"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.2.0"
+    semver "^6.3.0"
+
+istanbul-lib-report@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#7518fe52ea44de372f460a76b5ecda9ffb73d8a6"
+  integrity sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==
+  dependencies:
+    istanbul-lib-coverage "^3.0.0"
+    make-dir "^3.0.0"
+    supports-color "^7.1.0"
+
+istanbul-lib-source-maps@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz#895f3a709fcfba34c6de5a42939022f3e4358551"
+  integrity sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==
+  dependencies:
+    debug "^4.1.1"
+    istanbul-lib-coverage "^3.0.0"
+    source-map "^0.6.1"
+
+istanbul-reports@^3.1.3:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.5.tgz#cc9a6ab25cb25659810e4785ed9d9fb742578bae"
+  integrity sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==
+  dependencies:
+    html-escaper "^2.0.0"
+    istanbul-lib-report "^3.0.0"
+
+it-all@^3.0.0, it-all@^3.0.4, it-all@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/it-all/-/it-all-3.0.6.tgz#30a4f922ae9ca0945b0f720d3478ae6f5b6707ab"
+  integrity sha512-HXZWbxCgQZJfrv5rXvaVeaayXED8nTKx9tj9fpBhmcUJcedVZshMMMqTj0RG2+scGypb9Ut1zd1ifbf3lA8L+Q==
+
+it-batch@^3.0.0, it-batch@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/it-batch/-/it-batch-3.0.6.tgz#0bcda35bf1c600e821c6d5f4d2446fe85a26ab1d"
+  integrity sha512-pQAAlSvJ4aV6xM/6LRvkPdKSKXxS4my2fGzNUxJyAQ8ccFdxPmK1bUuF5OoeUDkcdrbs8jtsmc4DypCMrGY6sg==
+
+it-byte-stream@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/it-byte-stream/-/it-byte-stream-1.1.0.tgz#f5b80b713fb71a34cbff2390b7232b103cf625bb"
+  integrity sha512-WWponBWdKEa6o2U3NX+wGMY8X1EkWXcQvpC+3CUqKb4ZzK30q3EPqiTjFxLf9tNVgdF/MNAtx/XclpVfgaz9KQ==
+  dependencies:
+    it-queueless-pushable "^1.0.0"
+    it-stream-types "^2.0.1"
+    uint8arraylist "^2.4.8"
+
+it-drain@^3.0.5, it-drain@^3.0.7:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/it-drain/-/it-drain-3.0.7.tgz#671a5d0220802c5bce9e68fc2b07088540fbc674"
+  integrity sha512-vy6S1JKjjHSIFHgBpLpD1zhkCRl3z1zYWUxE14+kAYf+BL9ssWSFImJfhl361IIcwr0ofw8etzg11VqqB+ntUA==
+
+it-filter@^3.0.4, it-filter@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/it-filter/-/it-filter-3.1.1.tgz#d9f55ecb26200baca41e5e330e5808b3afdfa7b7"
+  integrity sha512-TOXmVuaSkxlLp2hXKoMTra0WMZMKVFxE3vSsbIA+PbADNCBAHhjJ/lM31vBOUTddHMO34Ku++vU8T9PLlBxQtg==
+  dependencies:
+    it-peekable "^3.0.0"
+
+it-first@^3.0.4, it-first@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/it-first/-/it-first-3.0.6.tgz#f532f0f36fe9bf0c291e0162b9d3375d59fe8f05"
+  integrity sha512-ExIewyK9kXKNAplg2GMeWfgjUcfC1FnUXz/RPfAvIXby+w7U4b3//5Lic0NV03gXT8O/isj5Nmp6KiY0d45pIQ==
+
+it-foreach@^2.0.6, it-foreach@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/it-foreach/-/it-foreach-2.1.1.tgz#93e311a1057dd0ff7631f914dc9c2c963f27a4b8"
+  integrity sha512-ID4Gxnavk/LVQLQESAQ9hR6dR63Ih6X+8VdxEktX8rpz2dCGAbZpey/eljTNbMfV2UKXHiu6UsneoNBZuac97g==
+  dependencies:
+    it-peekable "^3.0.0"
+
+it-glob@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/it-glob/-/it-glob-3.0.1.tgz#b30723a365e5564273ded2d030d61e15578ba5e2"
+  integrity sha512-IUWE9f6XVUJLugK7pQmQPqTWj4BiQJhufnvxfsCmNIGEDQEkKVs3Ld9gFZq/Vude6g/OpndhsiuFrA730Bc59A==
+  dependencies:
+    fast-glob "^3.3.2"
+
+it-last@^3.0.4, it-last@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/it-last/-/it-last-3.0.6.tgz#53b1463e47fcaa950375968002598686101de6ab"
+  integrity sha512-M4/get95O85u2vWvWQinF8SJUc/RPC5bWTveBTYXvlP2q5TF9Y+QhT3nz+CRCyS2YEc66VJkyl/da6WrJ0wKhw==
+
+it-length-prefixed-stream@^1.0.0, it-length-prefixed-stream@^1.1.6:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/it-length-prefixed-stream/-/it-length-prefixed-stream-1.2.0.tgz#1f6ad78c60dea3b16364f86a0b78058f4d66a04e"
+  integrity sha512-vX7dzSl/2UMYYsAr0FQdPNVR5xYEETaeboZ+eXxNBjgARuvxnWA6OedW8lC5/J3ebMTC98JhA3eH76eTijUOsA==
+  dependencies:
+    it-byte-stream "^1.0.0"
+    it-stream-types "^2.0.1"
+    uint8-varint "^2.0.4"
+    uint8arraylist "^2.4.8"
+
+it-length-prefixed@^9.0.0, it-length-prefixed@^9.0.4:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/it-length-prefixed/-/it-length-prefixed-9.1.0.tgz#19d5d336068fdcbbadfafb1eb33331a9370d4cac"
+  integrity sha512-kx2UTJuy7/lsT3QUzf50NjfxU1Z4P4wlvYp6YnR5Nc61P8XKfy+QtiJi1VLojA+Kea7vMbB4002rIij1Ol9hcw==
+  dependencies:
+    it-reader "^6.0.1"
+    it-stream-types "^2.0.1"
+    uint8-varint "^2.0.1"
+    uint8arraylist "^2.0.0"
+    uint8arrays "^5.0.1"
+
+it-length@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/it-length/-/it-length-3.0.6.tgz#4105934e10b4d5e158e11cbd7da4073fc441fcd3"
+  integrity sha512-R7bxHAzpRzYz7vghc2DDH7x4KXvEkeLfN/h316++jzbkEHIRXbEPLbE20p5yrqqBdOeK6/FRUDuHlTJ0H1hysw==
+
+it-map@^3.0.5, it-map@^3.1.0, it-map@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/it-map/-/it-map-3.1.1.tgz#637877e93be93a7aa7d7fc103b70a5939fc6f7a1"
+  integrity sha512-9bCSwKD1yN1wCOgJ9UOl+46NQtdatosPWzxxUk2NdTLwRPXLh+L7iwCC9QKsbgM60RQxT/nH8bKMqm3H/o8IHQ==
+  dependencies:
+    it-peekable "^3.0.0"
+
+it-merge@^3.0.0, it-merge@^3.0.3, it-merge@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/it-merge/-/it-merge-3.0.5.tgz#2b0d1d07c825b9d20c4c2889aab8e07322fd803e"
+  integrity sha512-2l7+mPf85pyRF5pqi0dKcA54E5Jm/2FyY5GsOaN51Ta0ipC7YZ3szuAsH8wOoB6eKY4XsU4k2X+mzPmFBMayEA==
+  dependencies:
+    it-pushable "^3.2.3"
+
+it-ndjson@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/it-ndjson/-/it-ndjson-1.0.7.tgz#017e5e3e1b5fa8c10b8d9a0771bcc9b55baaa6b3"
+  integrity sha512-V3IskT5RCVtov1u6sC9gkg0uD02qe8yPoVzBZVaRx+YkuMdpFd6opiAwfYovNd/NEbqo9mBN8wJLtw6vD0Xiqg==
+
+it-parallel-batch@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/it-parallel-batch/-/it-parallel-batch-3.0.6.tgz#61487fdaca03cc34c648b3432f59e82e0c805172"
+  integrity sha512-3wgiQGvMMHy65OXScrtrtmY+bJSF7P6St1AP+BU+SK83fEr8NNk/MrmJKrtB1+MahYX2a8I+pOGKDj8qVtuV0Q==
+  dependencies:
+    it-batch "^3.0.0"
+
+it-parallel@^3.0.7, it-parallel@^3.0.8:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/it-parallel/-/it-parallel-3.0.8.tgz#fb4a5344732ddae9eff7c7b21908aa1f223638d4"
+  integrity sha512-URLhs6eG4Hdr4OdvgBBPDzOjBeSSmI+Kqex2rv/aAyYClME26RYHirLVhZsZP5M+ZP6M34iRlXk8Wlqtezuqpg==
+  dependencies:
+    p-defer "^4.0.1"
+
+it-peekable@^3.0.0:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/it-peekable/-/it-peekable-3.0.5.tgz#63b0c750e27e2ba0c1db6d6a3496b7ef51a6547d"
+  integrity sha512-JWQOGMt6rKiPcY30zUVMR4g6YxkpueTwHVE7CMs/aGqCf4OydM6w+7ZM3PvmO1e0TocjuR4aL8xyZWR46cTqCQ==
+
+it-pipe@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/it-pipe/-/it-pipe-3.0.1.tgz#b25720df82f4c558a8532602b5fbc37bbe4e7ba5"
+  integrity sha512-sIoNrQl1qSRg2seYSBH/3QxWhJFn9PKYvOf/bHdtCBF0bnghey44VyASsWzn5dAx0DCDDABq1hZIuzKmtBZmKA==
+  dependencies:
+    it-merge "^3.0.0"
+    it-pushable "^3.1.2"
+    it-stream-types "^2.0.1"
+
+it-protobuf-stream@^1.1.3:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/it-protobuf-stream/-/it-protobuf-stream-1.1.5.tgz#70da43abfb6beaaf7c53262d8cfd176d463b08f0"
+  integrity sha512-H70idW45As3cEbU4uSoZ9IYHUIV3YM69/2mmXYR7gOlPabWjuyNi3/abK11geiiq3la27Sos/mXr68JljjKtEQ==
+  dependencies:
+    it-length-prefixed-stream "^1.0.0"
+    it-stream-types "^2.0.1"
+    uint8arraylist "^2.4.8"
+
+it-pushable@^3.1.2, it-pushable@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/it-pushable/-/it-pushable-3.2.3.tgz#e2b80aed90cfbcd54b620c0a0785e546d4e5f334"
+  integrity sha512-gzYnXYK8Y5t5b/BnJUr7glfQLO4U5vyb05gPx/TyTw+4Bv1zM9gFk4YsOrnulWefMewlphCjKkakFvj1y99Tcg==
+  dependencies:
+    p-defer "^4.0.0"
+
+it-queueless-pushable@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/it-queueless-pushable/-/it-queueless-pushable-1.0.0.tgz#917b52964cd6465d6436f923552c407c5ee3d11c"
+  integrity sha512-HbcAbcuQj7a9EBxiRCZ+77FxWutgs/pY5ZvEyQnylWPGNFojCLAUwhcZjf5OuEQ9+y+vSa7w1GQBe8xJdmIn5A==
+  dependencies:
+    p-defer "^4.0.1"
+    race-signal "^1.0.2"
+
+it-reader@^6.0.1:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/it-reader/-/it-reader-6.0.4.tgz#439cb88225dcd15116be0ffde9e846a928c3871a"
+  integrity sha512-XCWifEcNFFjjBHtor4Sfaj8rcpt+FkY0L6WdhD578SCDhV4VUm7fCkF3dv5a+fTcfQqvN9BsxBTvWbYO6iCjTg==
+  dependencies:
+    it-stream-types "^2.0.1"
+    uint8arraylist "^2.0.0"
+
+it-sort@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/it-sort/-/it-sort-3.0.6.tgz#58af5dec478c411ae5adf30f90078a6fc286484d"
+  integrity sha512-aNrlZAXB8vWBd42tCpaXGL6CJVJNDW3OLczmdt6g0k/s9Z6evkTdgU2LjwW5SNNeX41sF+C8MjV+OcVf93PsPw==
   dependencies:
-    "@babel/core" "^7.12.3"
-    "@babel/parser" "^7.14.7"
-    "@istanbuljs/schema" "^0.1.2"
-    istanbul-lib-coverage "^3.2.0"
-    semver "^6.3.0"
+    it-all "^3.0.0"
 
-istanbul-lib-report@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#7518fe52ea44de372f460a76b5ecda9ffb73d8a6"
-  integrity sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==
+it-stream-types@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/it-stream-types/-/it-stream-types-2.0.2.tgz#60bbace90096796b4e6cc3bfab99cf9f2b86c152"
+  integrity sha512-Rz/DEZ6Byn/r9+/SBCuJhpPATDF9D+dz5pbgSUyBsCDtza6wtNATrz/jz1gDyNanC3XdLboriHnOC925bZRBww==
+
+it-take@^3.0.1, it-take@^3.0.5, it-take@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/it-take/-/it-take-3.0.6.tgz#509283b69b88f823350b256392525267609f1925"
+  integrity sha512-uqw3MRzf9to1SOLxaureGa73lK8k8ZB/asOApTAkvrzUqCznGtKNgPFH7uYIWlt4UuWq/hU6I+U4Fm5xpjN8Vg==
+
+it-tar@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/it-tar/-/it-tar-6.0.5.tgz#46bf290415aef92bb6ad831f5883a75e2f187ed0"
+  integrity sha512-GxKBamsX2EZA6jrNh6xoeKmRpbOELgYhCk1ojhN0TFSBdxwkRBqBRc3sI43vTHRpI7i2o6ptrSxK3LLKWNvudg==
+  dependencies:
+    iso-constants "^0.1.2"
+    it-reader "^6.0.1"
+    it-stream-types "^2.0.1"
+    it-to-buffer "^4.0.5"
+    p-defer "^4.0.0"
+    uint8arraylist "^2.3.2"
+    uint8arrays "^5.0.2"
+
+it-to-browser-readablestream@^2.0.9:
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/it-to-browser-readablestream/-/it-to-browser-readablestream-2.0.9.tgz#6ec4e3fb2fa090580e94d6f4dbedc6a02a6f8498"
+  integrity sha512-Q/0OXLOMgZ4Fk62Mrqp3x9QqN/UH9fotftr3dEfqr74Bt8ceClLOTmhkMyrk53R/gRcxdM6tBjzHGBeSjhmPeQ==
   dependencies:
-    istanbul-lib-coverage "^3.0.0"
-    make-dir "^3.0.0"
-    supports-color "^7.1.0"
+    get-iterator "^2.0.1"
 
-istanbul-lib-source-maps@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz#895f3a709fcfba34c6de5a42939022f3e4358551"
-  integrity sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==
+it-to-buffer@^4.0.5:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/it-to-buffer/-/it-to-buffer-4.0.7.tgz#f3b10ebb4f5a146acdbd73225e8c8e0a308709c8"
+  integrity sha512-c7JXrFg8xntJTPzhg7Dg6WJYm+XW0wBUebvEBrc6zrL/QukGRXclw1OBz6M9Qmqkiorgb3qpsRwKlI/4Q3tmkQ==
   dependencies:
-    debug "^4.1.1"
-    istanbul-lib-coverage "^3.0.0"
-    source-map "^0.6.1"
+    uint8arrays "^5.0.3"
 
-istanbul-reports@^3.1.3:
-  version "3.1.5"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.5.tgz#cc9a6ab25cb25659810e4785ed9d9fb742578bae"
-  integrity sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==
+iterator.prototype@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.3.tgz#016c2abe0be3bbdb8319852884f60908ac62bf9c"
+  integrity sha512-FW5iMbeQ6rBGm/oKgzq2aW4KvAGpxPzYES8N4g4xNXUKpL1mclMvOe+76AcLDTvD+Ze+sOpVhgdAQEKF4L9iGQ==
   dependencies:
-    html-escaper "^2.0.0"
-    istanbul-lib-report "^3.0.0"
+    define-properties "^1.2.1"
+    get-intrinsic "^1.2.1"
+    has-symbols "^1.0.3"
+    reflect.getprototypeof "^1.0.4"
+    set-function-name "^2.0.1"
 
 jackspeak@^2.3.5:
   version "2.3.6"
@@ -11529,25 +12688,6 @@ jaeger-client@^3.15.0:
     uuid "^8.3.2"
     xorshift "^1.1.1"
 
-jayson@^3.4.4:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/jayson/-/jayson-3.7.0.tgz#b735b12d06d348639ae8230d7a1e2916cb078f25"
-  integrity sha512-tfy39KJMrrXJ+mFcMpxwBvFDetS8LAID93+rycFglIQM4kl3uNR3W4lBLE/FFhsoUCEox5Dt2adVpDm/XtebbQ==
-  dependencies:
-    "@types/connect" "^3.4.33"
-    "@types/node" "^12.12.54"
-    "@types/ws" "^7.4.4"
-    JSONStream "^1.3.5"
-    commander "^2.20.3"
-    delay "^5.0.0"
-    es6-promisify "^5.0.0"
-    eyes "^0.1.8"
-    isomorphic-ws "^4.0.1"
-    json-stringify-safe "^5.0.1"
-    lodash "^4.17.20"
-    uuid "^8.3.2"
-    ws "^7.4.5"
-
 jest-changed-files@^29.2.0:
   version "29.2.0"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-29.2.0.tgz#b6598daa9803ea6a4dce7968e20ab380ddbee289"
@@ -11873,6 +13013,17 @@ jest-snapshot@^29.3.1:
     pretty-format "^29.3.1"
     semver "^7.3.5"
 
+jest-transform-css@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/jest-transform-css/-/jest-transform-css-6.0.1.tgz#95c579c98945734439c1f243b9843d5f477a9c60"
+  integrity sha512-i78Pi2MW6vcdsUFSRx1kPbjbEIO0pBWwh1Y+PcDrLwTv/6e5p7fzsV/gxFW/SYMHS8DUvMdRVTwVCkA/y+t0iQ==
+  dependencies:
+    common-tags "1.8.2"
+    cross-spawn "7.0.3"
+    postcss-load-config "4.0.1"
+    postcss-modules "4.3.1"
+    style-inject "0.3.0"
+
 jest-util@^29.0.0, jest-util@^29.3.1:
   version "29.3.1"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.3.1.tgz#1dda51e378bbcb7e3bc9d8ab651445591ed373e1"
@@ -11962,11 +13113,6 @@ js-file-download@^0.4.12:
   resolved "https://registry.yarnpkg.com/js-file-download/-/js-file-download-0.4.12.tgz#10c70ef362559a5b23cdbdc3bd6f399c3d91d821"
   integrity sha512-rML+NkoD08p5Dllpjo0ffy4jRHeY6Zsapvr/W86N7E0yuzAO6qa5X9+xog6zQNlH102J7IXljNY2FtS6Lj3ucg==
 
-js-sdsl@^4.1.4:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.2.0.tgz#278e98b7bea589b8baaf048c20aeb19eb7ad09d0"
-  integrity sha512-dyBIzQBDkCqCu+0upx25Y2jGdbTGxE9fshMsCdK0ViOongpV+n5tXRcZY9v7CaVQ79AGS9KA1KHtojxiM7aXSQ==
-
 js-sha3@0.8.0:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
@@ -11992,10 +13138,10 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
-jsdoctypeparser@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/jsdoctypeparser/-/jsdoctypeparser-9.0.0.tgz#8c97e2fb69315eb274b0f01377eaa5c940bd7b26"
-  integrity sha512-jrTA2jJIL6/DAEILBEh2/w9QxCuwmvNXIry39Ay/HVfhE3o2yVV0U44blYkqdHA/OKloJEqvJy0xU+GSdE2SIw==
+jsdoc-type-pratt-parser@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.1.0.tgz#ff6b4a3f339c34a6c188cbf50a16087858d22113"
+  integrity sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==
 
 jsdom@^20.0.0:
   version "20.0.2"
@@ -12039,6 +13185,11 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==
 
+jshashes@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/jshashes/-/jshashes-1.0.8.tgz#f60d837428383abf73ab022e1542e6614bd75514"
+  integrity sha512-btmQZ/w1rj8Lb6nEwvhjM7nBYoj54yaEFo2PWh3RkxZ8qNwuvOxvQYN/JxVuwoMmdIluL+XwYVJ+pEEZoSYybQ==
+
 json-bigint@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/json-bigint/-/json-bigint-1.0.0.tgz#ae547823ac0cad8398667f8cd9ef4730f5b01ff1"
@@ -12046,12 +13197,17 @@ json-bigint@^1.0.0:
   dependencies:
     bignumber.js "^9.0.0"
 
+json-buffer@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
+  integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
+
 json-parse-even-better-errors@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
   integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
 
-json-rpc-engine@6.1.0, json-rpc-engine@^6.1.0:
+json-rpc-engine@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/json-rpc-engine/-/json-rpc-engine-6.1.0.tgz#bf5ff7d029e1c1bf20cb6c0e9f348dcd8be5a393"
   integrity sha512-NEdLrtrq1jUZyfjkr9OCz9EzCNhnRyWtt1PAnvnhwy6e8XETS0Dtc+ZNCO2gvuAoKsIn2+vCSowXTYE4CkgnAQ==
@@ -12089,24 +13245,19 @@ json-stable-stringify@^1.0.2:
   dependencies:
     jsonify "^0.0.1"
 
-json-stringify-safe@^5.0.1:
+json-stringify-safe@~5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==
 
-json5@^1.0.1:
+json5@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
   integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
-  integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
-
-json5@^2.2.2:
+json5@^2.2.1, json5@^2.2.2, json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
@@ -12130,12 +13281,7 @@ jsonify@^0.0.1:
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.1.tgz#2aa3111dae3d34a0f151c63f3a45d995d9420978"
   integrity sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==
 
-jsonparse@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
-  integrity sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==
-
-"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.2:
+"jsx-ast-utils@^2.4.1 || ^3.0.0":
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz#76b3e6e6cece5c69d49a5792c3d01bd1a0cdc7ea"
   integrity sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==
@@ -12143,15 +13289,32 @@ jsonparse@^1.2.0:
     array-includes "^3.1.5"
     object.assign "^4.1.3"
 
-keccak@^3.0.1:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/keccak/-/keccak-3.0.3.tgz#4bc35ad917be1ef54ff246f904c2bbbf9ac61276"
-  integrity sha512-JZrLIAJWuZxKbCilMpNz5Vj7Vtb4scDG3dMXLOsbzBmQGyjwE61BbW7bJkfKKCShXiQZt3T6sBgALRtmd+nZaQ==
+jsx-ast-utils@^3.3.5:
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a"
+  integrity sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==
+  dependencies:
+    array-includes "^3.1.6"
+    array.prototype.flat "^1.3.1"
+    object.assign "^4.1.4"
+    object.values "^1.1.6"
+
+keccak@^3.0.3:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/keccak/-/keccak-3.0.4.tgz#edc09b89e633c0549da444432ecf062ffadee86d"
+  integrity sha512-3vKuW0jV8J3XNTzvfyicFR5qvxrSAGl7KIhvgOu5cmWwM7tZRj3fMbj/pfIf4be7aznbc+prBWGjywox/g2Y6Q==
   dependencies:
     node-addon-api "^2.0.0"
     node-gyp-build "^4.2.0"
     readable-stream "^3.6.0"
 
+keyv@^4.5.4:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
+  integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
+  dependencies:
+    json-buffer "3.0.1"
+
 keyvaluestorage-interface@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/keyvaluestorage-interface/-/keyvaluestorage-interface-1.0.0.tgz#13ebdf71f5284ad54be94bd1ad9ed79adad515ff"
@@ -12169,17 +13332,17 @@ kleur@^3.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
-language-subtag-registry@~0.3.2:
+language-subtag-registry@^0.3.20:
   version "0.3.22"
   resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz#2e1500861b2e457eba7e7ae86877cbd08fa1fd1d"
   integrity sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==
 
-language-tags@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.5.tgz#d321dbc4da30ba8bf3024e040fa5c14661f9193a"
-  integrity sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==
+language-tags@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.9.tgz#1ffdcd0ec0fafb4b1be7f8b11f306ad0f9c08777"
+  integrity sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==
   dependencies:
-    language-subtag-registry "~0.3.2"
+    language-subtag-registry "^0.3.20"
 
 leven@^3.1.0:
   version "3.1.0"
@@ -12207,6 +13370,11 @@ lilconfig@2.0.5:
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.5.tgz#19e57fd06ccc3848fd1891655b5a447092225b25"
   integrity sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==
 
+lilconfig@^2.0.5:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
+  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
+
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
@@ -12332,6 +13500,11 @@ lit@3.1.0:
     lit-element "^4.0.0"
     lit-html "^3.1.0"
 
+loader-utils@^3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-3.2.1.tgz#4fb104b599daafd82ef3e1a41fb9265f87e1f576"
+  integrity sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==
+
 locate-path@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
@@ -12391,7 +13564,7 @@ lodash.throttle@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
   integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
 
-lodash@^4.0.0, lodash@^4.15.0, lodash@^4.17.20, lodash@^4.17.21:
+lodash@^4.0.0, lodash@^4.15.0, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -12436,6 +13609,11 @@ lru-cache@^10.0.2, "lru-cache@^9.1.1 || ^10.0.0":
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.1.0.tgz#2098d41c2dc56500e6c88584aa656c84de7d0484"
   integrity sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag==
 
+lru-cache@^10.2.2:
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119"
+  integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -12450,17 +13628,20 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+lru-cache@~2.2.1:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.2.4.tgz#6c658619becf14031d0d0b594b16042ce4dc063d"
+  integrity sha512-Q5pAgXs+WEAfoEdw2qKQhNFFhMoFMTYqRVKKUMnzuiR7oKFHS7fWo848cPcTKw+4j/IdN17NyzdhVKgabFV0EA==
+
 lz-string@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
   integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
 
-magic-string@^0.30.5:
-  version "0.30.5"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.5.tgz#1994d980bd1c8835dc6e78db7cbd4ae4f24746f9"
-  integrity sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==
-  dependencies:
-    "@jridgewell/sourcemap-codec" "^1.4.15"
+magic-bytes.js@1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/magic-bytes.js/-/magic-bytes.js-1.8.0.tgz#8362793c60cd77c2dd77db6420be727192df68e2"
+  integrity sha512-lyWpfvNGVb5lu8YUAbER0+UMBTdR63w2mcSUlhhBTyVbxJvjgqwyAf3AZD6MprgK0uHuBoWXSDAMWLupX83o3Q==
 
 make-dir@^3.0.0:
   version "3.1.0"
@@ -12517,6 +13698,13 @@ memoize-one@^6.0.0:
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
   integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
 
+merge-options@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/merge-options/-/merge-options-3.0.4.tgz#84709c2aa2a4b24c1981f66c179fe5565cc6dbb7"
+  integrity sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==
+  dependencies:
+    is-plain-obj "^2.1.0"
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -12543,11 +13731,11 @@ micro-ftch@^0.3.1:
   integrity sha512-/0LLxhzP0tfiR5hcQebtudP56gUurs2CLkGarnCiB/OqEyUFQ6U3paQi/tgLv0hBJYt2rnr9MNpxz4fiiugstg==
 
 micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
-  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
   dependencies:
-    braces "^3.0.2"
+    braces "^3.0.3"
     picomatch "^2.3.1"
 
 mime-db@1.52.0:
@@ -12599,7 +13787,7 @@ minimalistic-crypto-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg==
 
-minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
+minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -12627,6 +13815,13 @@ minimatch@^9.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
+minimatch@^9.0.4:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist@^1.1.0, minimist@^1.2.3, minimist@^1.2.6:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
@@ -12642,6 +13837,11 @@ minimist@^1.2.0, minimist@^1.2.5:
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.0.4.tgz#dbce03740f50a4786ba994c1fb908844d27b038c"
   integrity sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==
 
+mipd@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/mipd/-/mipd-0.0.7.tgz#bb5559e21fa18dc3d9fe1c08902ef14b7ce32fd9"
+  integrity sha512-aAPZPNDQ3uMTdKbuO2YmAw2TxLHO0moa4YKAyETM/DTj5FloZo+a+8tU+iv4GmW+sOxKLSRwcSFuczk+Cpt6fg==
+
 mixpanel-browser@^2.47.0:
   version "2.47.0"
   resolved "https://registry.yarnpkg.com/mixpanel-browser/-/mixpanel-browser-2.47.0.tgz#4e7fd3bb660c6f63443efbd169d1cd327db71ed4"
@@ -12677,6 +13877,15 @@ monaco-editor@^0.34.1:
   resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.34.1.tgz#1b75c4ad6bc4c1f9da656d740d98e0b850a22f87"
   integrity sha512-FKc80TyiMaruhJKKPz5SpJPIjL+dflGvz4CpuThaPMc94AyN7SeC9HQ8hrvaxX7EyHdJcUY5i4D0gNyJj1vSZQ==
 
+mortice@^3.0.4:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/mortice/-/mortice-3.0.6.tgz#4df77b948ee282339111ba500eaa045ba765c8d5"
+  integrity sha512-xUjsTQreX8rO3pHuGYDZ3PY/sEiONIzqzjLeog5akdY4bz9TlDDuvYlU8fm+6qnm4rnpa6AFxLhsfSBThLijdA==
+  dependencies:
+    observable-webworkers "^2.0.1"
+    p-queue "^8.0.1"
+    p-timeout "^6.0.0"
+
 motion@10.16.2:
   version "10.16.2"
   resolved "https://registry.yarnpkg.com/motion/-/motion-10.16.2.tgz#7dc173c6ad62210a7e9916caeeaf22c51e598d21"
@@ -12694,51 +13903,47 @@ mri@^1.2.0:
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
   integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
 
-mrmime@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.1.tgz#5f90c825fad4bdd41dc914eff5d1a8cfdaf24f27"
-  integrity sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==
-
-ms@2.0.0:
+mrmime@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
-  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
+  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-2.0.0.tgz#151082a6e06e59a9a39b46b3e14d5cfe92b3abb4"
+  integrity sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==
 
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@^2.0.0, ms@^2.1.1:
+ms@^2.1.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+ms@^3.0.0-canary.1:
+  version "3.0.0-canary.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-3.0.0-canary.1.tgz#c7b34fbce381492fd0b345d1cf56e14d67b77b80"
+  integrity sha512-kh8ARjh8rMN7Du2igDRO9QJnqCb2xYTJxyQYK7vJJS4TvLLmsbyhiKpSW+t+y26gyOyMd0riphX0GeWKU3ky5g==
+
+multiformats@^13.0.0, multiformats@^13.0.1, multiformats@^13.1.0, multiformats@^13.2.2, multiformats@^13.2.3, multiformats@^13.3.0:
+  version "13.3.1"
+  resolved "https://registry.yarnpkg.com/multiformats/-/multiformats-13.3.1.tgz#ea30d134b5697dcf2036ac819a17948f8a1775be"
+  integrity sha512-QxowxTNwJ3r5RMctoGA5p13w5RbRT2QDkoM+yFlqfLiioBp78nhDjnRLvmSBI9+KAqN4VdgOVWM9c0CHd86m3g==
+
 multiformats@^9.4.2:
   version "9.9.0"
   resolved "https://registry.yarnpkg.com/multiformats/-/multiformats-9.9.0.tgz#c68354e7d21037a8f1f8833c8ccd68618e8f1d37"
   integrity sha512-HoMUjhH9T8DDBNT+6xzkrd9ga/XiBI4xLr58LJACwK6G3HTOPeMz4nB4KJs33L2BelrIJa7P0VuNaVF3hMYfjg==
 
-mz@^2.7.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
-  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
-  dependencies:
-    any-promise "^1.0.0"
-    object-assign "^4.0.1"
-    thenify-all "^1.0.0"
+murmurhash3js-revisited@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/murmurhash3js-revisited/-/murmurhash3js-revisited-3.0.0.tgz#6bd36e25de8f73394222adc6e41fa3fac08a5869"
+  integrity sha512-/sF3ee6zvScXMb1XFJ8gDsSnY+X8PbOyjIuBhtgis10W2Jx4ZjIhikUCIF9c4gpJxVnQIsPAFrSwTCuAjicP6g==
 
 nan@^2.14.0, nan@^2.14.1, nan@^2.17.0:
   version "2.17.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.17.0.tgz#c0150a2368a182f033e9aa5195ec76ea41a199cb"
   integrity sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==
 
-nanoid@^3.3.6:
-  version "3.3.6"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
-  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
-
-nanoid@^3.3.7:
+nanoid@^3.3.6, nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
@@ -12763,28 +13968,33 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-next@13.5.4:
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/next/-/next-13.5.4.tgz#7e6a93c9c2b9a2c78bf6906a6c5cc73ae02d5b4d"
-  integrity sha512-+93un5S779gho8y9ASQhb/bTkQF17FNQOtXLKAj3lsNgltEcF0C5PMLLncDmH+8X1EnJH1kbqAERa29nRXqhjA==
+netmask@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/netmask/-/netmask-2.0.2.tgz#8b01a07644065d536383835823bc52004ebac5e7"
+  integrity sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==
+
+next@15.0.3:
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/next/-/next-15.0.3.tgz#804f5b772e7570ef1f088542a59860914d3288e9"
+  integrity sha512-ontCbCRKJUIoivAdGB34yCaOcPgYXr9AAkV/IwqFfWWTXEPUgLYkSkqBhIk9KK7gGmgjc64B+RdoeIDM13Irnw==
   dependencies:
-    "@next/env" "13.5.4"
-    "@swc/helpers" "0.5.2"
+    "@next/env" "15.0.3"
+    "@swc/counter" "0.1.3"
+    "@swc/helpers" "0.5.13"
     busboy "1.6.0"
-    caniuse-lite "^1.0.30001406"
+    caniuse-lite "^1.0.30001579"
     postcss "8.4.31"
-    styled-jsx "5.1.1"
-    watchpack "2.4.0"
+    styled-jsx "5.1.6"
   optionalDependencies:
-    "@next/swc-darwin-arm64" "13.5.4"
-    "@next/swc-darwin-x64" "13.5.4"
-    "@next/swc-linux-arm64-gnu" "13.5.4"
-    "@next/swc-linux-arm64-musl" "13.5.4"
-    "@next/swc-linux-x64-gnu" "13.5.4"
-    "@next/swc-linux-x64-musl" "13.5.4"
-    "@next/swc-win32-arm64-msvc" "13.5.4"
-    "@next/swc-win32-ia32-msvc" "13.5.4"
-    "@next/swc-win32-x64-msvc" "13.5.4"
+    "@next/swc-darwin-arm64" "15.0.3"
+    "@next/swc-darwin-x64" "15.0.3"
+    "@next/swc-linux-arm64-gnu" "15.0.3"
+    "@next/swc-linux-arm64-musl" "15.0.3"
+    "@next/swc-linux-x64-gnu" "15.0.3"
+    "@next/swc-linux-x64-musl" "15.0.3"
+    "@next/swc-win32-arm64-msvc" "15.0.3"
+    "@next/swc-win32-x64-msvc" "15.0.3"
+    sharp "^0.33.5"
 
 nextjs-routes@^1.0.8:
   version "1.0.8"
@@ -12833,13 +14043,20 @@ node-fetch-native@^1.4.0, node-fetch-native@^1.4.1:
   resolved "https://registry.yarnpkg.com/node-fetch-native/-/node-fetch-native-1.4.1.tgz#5a336e55b4e1b1e72b9927da09fecd2b374c9be5"
   integrity sha512-NsXBU0UgBxo2rQLOeWNZqS3fvflWePMECr8CoSWoSTqCqGbVVsvl9vZu1HfQicYN0g5piV9Gh8RTEvo/uP752w==
 
-node-fetch@2, node-fetch@2.6.7:
+node-fetch@2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
   integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
   dependencies:
     whatwg-url "^5.0.0"
 
+node-fetch@^2.6.1, node-fetch@^2.6.12, node-fetch@^2.6.7, node-fetch@^2.6.9:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
+  integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
+  dependencies:
+    whatwg-url "^5.0.0"
+
 node-fetch@^2.6.11:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.11.tgz#cde7fc71deef3131ef80a738919f999e6edfff25"
@@ -12847,13 +14064,6 @@ node-fetch@^2.6.11:
   dependencies:
     whatwg-url "^5.0.0"
 
-node-fetch@^2.6.7, node-fetch@^2.6.9:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
-  integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
-  dependencies:
-    whatwg-url "^5.0.0"
-
 node-fetch@^3.2.9:
   version "3.2.10"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.2.10.tgz#e8347f94b54ae18b57c9c049ef641cef398a85c8"
@@ -12886,6 +14096,11 @@ node-int64@^0.4.0:
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
   integrity sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==
 
+node-releases@^2.0.18:
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.18.tgz#f010e8d35e2fe8d6b2944f03f70213ecedc4ca3f"
+  integrity sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==
+
 node-releases@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
@@ -12927,7 +14142,16 @@ nwsapi@^2.2.2:
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.2.tgz#e5418863e7905df67d51ec95938d67bf801f0bb0"
   integrity sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw==
 
-object-assign@^4.0.1, object-assign@^4.1.1:
+obj-multiplex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/obj-multiplex/-/obj-multiplex-1.0.0.tgz#2f2ae6bfd4ae11befe742ea9ea5b36636eabffc1"
+  integrity sha512-0GNJAOsHoBHeNTvl5Vt6IWnpUEcc3uSRxzBri7EDyIcMgYvnY2JL2qdeV5zTMjWQX5OHcD5amcW2HFfDh0gjIA==
+  dependencies:
+    end-of-stream "^1.4.0"
+    once "^1.4.0"
+    readable-stream "^2.3.3"
+
+object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -12937,6 +14161,11 @@ object-inspect@^1.12.2:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
   integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
 
+object-inspect@^1.13.1:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.1.tgz#b96c6109324ccfef6b12216a956ca4dc2ff94bc2"
+  integrity sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==
+
 object-inspect@^1.9.0:
   version "1.12.3"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
@@ -12965,14 +14194,15 @@ object.assign@^4.1.3, object.assign@^4.1.4:
     has-symbols "^1.0.3"
     object-keys "^1.1.1"
 
-object.entries@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.5.tgz#e1acdd17c4de2cd96d5a08487cfb9db84d881861"
-  integrity sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==
+object.assign@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.5.tgz#3a833f9ab7fdb80fc9e8d2300c803d216d8fdbb0"
+  integrity sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    has-symbols "^1.0.3"
+    object-keys "^1.1.1"
 
 object.entries@^1.1.6:
   version "1.1.6"
@@ -12983,14 +14213,14 @@ object.entries@^1.1.6:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
-object.fromentries@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.5.tgz#7b37b205109c21e741e605727fe8b0ad5fa08251"
-  integrity sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==
+object.entries@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.8.tgz#bffe6f282e01f4d17807204a24f8edd823599c41"
+  integrity sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
 
 object.fromentries@^2.0.6:
   version "2.0.6"
@@ -13001,13 +14231,24 @@ object.fromentries@^2.0.6:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
-object.hasown@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.1.tgz#ad1eecc60d03f49460600430d97f23882cf592a3"
-  integrity sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==
+object.fromentries@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.8.tgz#f7195d8a9b97bd95cbc1999ea939ecd1a2b00c65"
+  integrity sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==
   dependencies:
-    define-properties "^1.1.4"
-    es-abstract "^1.19.5"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+
+object.groupby@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.3.tgz#9b125c36238129f6f7b61954a1e7176148d5002e"
+  integrity sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
 
 object.hasown@^1.1.2:
   version "1.1.2"
@@ -13017,15 +14258,6 @@ object.hasown@^1.1.2:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
-object.values@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.5.tgz#959f63e3ce9ef108720333082131e4a459b716ac"
-  integrity sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
-
 object.values@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.6.tgz#4abbaa71eba47d63589d402856f908243eea9b1d"
@@ -13035,6 +14267,20 @@ object.values@^1.1.6:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
+object.values@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.2.0.tgz#65405a9d92cee68ac2d303002e0b8470a4d9ab1b"
+  integrity sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+observable-webworkers@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/observable-webworkers/-/observable-webworkers-2.0.1.tgz#7d9086ebc567bd318b46ba0506b10cedf3813878"
+  integrity sha512-JI1vB0u3pZjoQKOK1ROWzp0ygxSi7Yb0iR+7UNsw4/Zn4cQ0P3R7XL38zac/Dy2tEA7Lg88/wIJTjF8vYXZ0uw==
+
 obuf@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
@@ -13119,23 +14365,48 @@ optionator@^0.8.1:
     type-check "~0.3.2"
     word-wrap "~1.2.3"
 
-optionator@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
-  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+optionator@^0.9.3:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734"
+  integrity sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==
   dependencies:
     deep-is "^0.1.3"
     fast-levenshtein "^2.0.6"
     levn "^0.4.1"
     prelude-ls "^1.2.1"
     type-check "^0.4.0"
-    word-wrap "^1.2.3"
+    word-wrap "^1.2.5"
 
 os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==
 
+ox@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/ox/-/ox-0.1.2.tgz#0f791be2ccabeaf4928e6d423498fe1c8094e560"
+  integrity sha512-ak/8K0Rtphg9vnRJlbOdaX9R7cmxD2MiSthjWGaQdMk3D7hrAlDoM+6Lxn7hN52Za3vrXfZ7enfke/5WjolDww==
+  dependencies:
+    "@adraffy/ens-normalize" "^1.10.1"
+    "@noble/curves" "^1.6.0"
+    "@noble/hashes" "^1.5.0"
+    "@scure/bip32" "^1.5.0"
+    "@scure/bip39" "^1.4.0"
+    abitype "^1.0.6"
+    eventemitter3 "5.0.1"
+
+p-defer@^4.0.0, p-defer@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-4.0.1.tgz#d12c6d41420785ed0d162dbd86b71ba490f7f99e"
+  integrity sha512-Mr5KC5efvAK5VUptYEIopP1bakB85k2IWXaRC0rsh1uwn1L6M0LVml8OIQ4Gudg4oyZakf7FmeRLkMMtZW1i5A==
+
+p-event@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/p-event/-/p-event-6.0.1.tgz#8f62a1e3616d4bc01fce3abda127e0383ef4715b"
+  integrity sha512-Q6Bekk5wpzW5qIyUP4gdMEujObYstZl6DMMOSenwBvV0BlE5LkDwkjs5yHbZmdCEq2o4RJx4tE1vwxFVf2FG1w==
+  dependencies:
+    p-timeout "^6.1.2"
+
 p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
@@ -13171,6 +14442,19 @@ p-map@^4.0.0:
   dependencies:
     aggregate-error "^3.0.0"
 
+p-queue@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/p-queue/-/p-queue-8.0.1.tgz#718b7f83836922ef213ddec263ff4223ce70bef8"
+  integrity sha512-NXzu9aQJTAzbBqOt2hwsR63ea7yvxJc0PwN/zobNAudYfb1B7R08SzB4TsLeSbUCuG467NhnoT0oO6w1qRO+BA==
+  dependencies:
+    eventemitter3 "^5.0.1"
+    p-timeout "^6.1.2"
+
+p-timeout@^6.0.0, p-timeout@^6.1.2:
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-6.1.3.tgz#9635160c4e10c7b4c3db45b7d5d26f911d9fd853"
+  integrity sha512-UJUyfKbwvr/uZSV6btANfb+0t/mOhKV/KXcCUTp8FcQI+v/0d+wXqH4htrW0E4rR6WiEO/EPvUFiV9D5OI4vlw==
+
 p-try@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
@@ -13271,10 +14555,10 @@ path-scurry@^1.10.1:
     lru-cache "^9.1.1 || ^10.0.0"
     minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
 
-path-to-regexp@^6.2.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-6.2.1.tgz#d54934d6798eb9e5ef14e7af7962c945906918e5"
-  integrity sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==
+path-to-regexp@8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-8.1.0.tgz#4d687606ed0be8ed512ba802eb94d620cb1a86f0"
+  integrity sha512-Bqn3vc8CMHty6zuD+tG23s6v2kwxslHEhTj4eYaVKGIEB+YX/2wd0/rgXLFD9G9id9KCtbVy/3ZgmvZjpa0UdQ==
 
 path-type@^4.0.0:
   version "4.0.0"
@@ -13330,16 +14614,21 @@ phoenix@^1.6.15:
   resolved "https://registry.yarnpkg.com/phoenix/-/phoenix-1.6.15.tgz#efb2088a310cde333b3762002831b79dedf76002"
   integrity sha512-O6AG5jTkZOOkdd/GOSCsM4v3bzBoyRnC5bEi57KhX/Daba6FvnBRzt0nhEeRRiVQGLSxDlyb0dUe9CkYWMZd8g==
 
-picocolors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
-  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.0.tgz#5358b76a78cde483ba5cef6a9dc9671440b27d59"
+  integrity sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==
 
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+picomatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab"
+  integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
+
 pidtree@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.6.0.tgz#90ad7b6d42d5841e69e0a2419ef38f8883aa057c"
@@ -13446,7 +14735,7 @@ pino@^8.0.0:
     sonic-boom "^3.1.0"
     thread-stream "^2.0.0"
 
-pirates@^4.0.1, pirates@^4.0.4:
+pirates@^4.0.4:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
   integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==
@@ -13467,17 +14756,17 @@ pkg-types@^1.0.3:
     mlly "^1.2.0"
     pathe "^1.1.0"
 
-playwright-core@1.41.1:
-  version "1.41.1"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.41.1.tgz#9c152670010d9d6f970f34b68e3e935d3c487431"
-  integrity sha512-/KPO5DzXSMlxSX77wy+HihKGOunh3hqndhqeo/nMxfigiKzogn8kfL0ZBDu0L1RKgan5XHCPmn6zXd2NUJgjhg==
+playwright-core@1.49.0:
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.49.0.tgz#8e69ffed3f41855b854982f3632f2922c890afcb"
+  integrity sha512-R+3KKTQF3npy5GTiKH/T+kdhoJfJojjHESR1YEWhYuEKRVfVaxH3+4+GvXE5xyCngCxhxnykk0Vlah9v8fs3jA==
 
-playwright@1.41.1:
-  version "1.41.1"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.41.1.tgz#83325f34165840d019355c2a78a50f21ed9b9c85"
-  integrity sha512-gdZAWG97oUnbBdRL3GuBvX3nDDmUOuqzV/D24dytqlKt+eI5KbwusluZRGljx1YoJKZ2NRPaeWiFTeGZO7SosQ==
+playwright@1.49.0:
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.49.0.tgz#df6b9e05423377a99658202844a294a8afb95d0a"
+  integrity sha512-eKpmys0UFDnfNb3vfsf8Vx2LEOtflgRebl0Im2eQQnYMA4Aqd+Zw8bEOB+7ZKvN76901mRnqdsiOGKxzVTbi7A==
   dependencies:
-    playwright-core "1.41.1"
+    playwright-core "1.49.0"
   optionalDependencies:
     fsevents "2.3.2"
 
@@ -13486,6 +14775,11 @@ pngjs@^5.0.0:
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-5.0.0.tgz#e79dd2b215767fd9c04561c01236df960bce7fbb"
   integrity sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==
 
+pony-cause@^2.1.10:
+  version "2.1.10"
+  resolved "https://registry.yarnpkg.com/pony-cause/-/pony-cause-2.1.10.tgz#828457ad6f13be401a075dbf14107a9057945174"
+  integrity sha512-3IKLNXclQgkU++2fSi93sQ6BznFuxSLB11HdvZQ6JW/spahf/P1pAHBQEahr20rs0htZW0UDkM1HmA+nZkXKsw==
+
 popmotion@11.0.3:
   version "11.0.3"
   resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9"
@@ -13496,24 +14790,37 @@ popmotion@11.0.3:
     style-value-types "5.0.0"
     tslib "^2.1.0"
 
+possible-typed-array-names@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
+  integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
+
+postcss-load-config@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.1.tgz#152383f481c2758274404e4962743191d73875bd"
+  integrity sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==
+  dependencies:
+    lilconfig "^2.0.5"
+    yaml "^2.1.1"
+
 postcss-modules-extract-imports@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
   integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
 
 postcss-modules-local-by-default@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c"
-  integrity sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.4.tgz#7cbed92abd312b94aaea85b68226d3dec39a14e6"
+  integrity sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q==
   dependencies:
     icss-utils "^5.0.0"
     postcss-selector-parser "^6.0.2"
     postcss-value-parser "^4.1.0"
 
 postcss-modules-scope@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06"
-  integrity sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.1.1.tgz#32cfab55e84887c079a19bbb215e721d683ef134"
+  integrity sha512-uZgqzdTleelWjzJY+Fhti6F3C9iF1JR/dODLs/JDefozYcKTBCdD8BIl6nNPbTbcLnGrk56hzwZC2DaGNvYjzA==
   dependencies:
     postcss-selector-parser "^6.0.4"
 
@@ -13524,10 +14831,24 @@ postcss-modules-values@^4.0.0:
   dependencies:
     icss-utils "^5.0.0"
 
+postcss-modules@4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules/-/postcss-modules-4.3.1.tgz#517c06c09eab07d133ae0effca2c510abba18048"
+  integrity sha512-ItUhSUxBBdNamkT3KzIZwYNNRFKmkJrofvC2nWab3CPKhYBQ1f27XXh1PAPE27Psx58jeelPsxWB/+og+KEH0Q==
+  dependencies:
+    generic-names "^4.0.0"
+    icss-replace-symbols "^1.1.0"
+    lodash.camelcase "^4.3.0"
+    postcss-modules-extract-imports "^3.0.0"
+    postcss-modules-local-by-default "^4.0.0"
+    postcss-modules-scope "^3.0.0"
+    postcss-modules-values "^4.0.0"
+    string-hash "^1.1.1"
+
 postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
-  version "6.0.11"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"
-  integrity sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==
+  version "6.0.15"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz#11cc2b21eebc0b99ea374ffb9887174855a01535"
+  integrity sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==
   dependencies:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
@@ -13546,7 +14867,7 @@ postcss@8.4.31:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.4.19, postcss@^8.4.27, postcss@^8.4.32:
+postcss@^8.4.19:
   version "8.4.32"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.32.tgz#1dac6ac51ab19adb21b8b34fd2d93a86440ef6c9"
   integrity sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==
@@ -13555,6 +14876,15 @@ postcss@^8.4.19, postcss@^8.4.27, postcss@^8.4.32:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.43:
+  version "8.4.47"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.47.tgz#5bf6c9a010f3e724c503bf03ef7947dcb0fea365"
+  integrity sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.1.0"
+    source-map-js "^1.2.1"
+
 postgres-array@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postgres-array/-/postgres-array-2.0.0.tgz#48f8fce054fbc69671999329b8834b772652d82e"
@@ -13604,15 +14934,15 @@ postgres-range@^1.1.1:
   resolved "https://registry.yarnpkg.com/postgres-range/-/postgres-range-1.1.3.tgz#9ccd7b01ca2789eb3c2e0888b3184225fa859f76"
   integrity sha512-VdlZoocy5lCP0c/t66xAfclglEapXPCIVhqqJRncYpvbCgImF0w67aPKfbqUMr72tO2k5q0TdTZwCLjPTI6C9g==
 
-preact@^10.12.0:
-  version "10.15.1"
-  resolved "https://registry.yarnpkg.com/preact/-/preact-10.15.1.tgz#a1de60c9fc0c79a522d969c65dcaddc5d994eede"
-  integrity sha512-qs2ansoQEwzNiV5eAcRT1p1EC/dmEzaATVDJNiB3g2sRDWdA7b7MurXdJjB2+/WQktGWZwxvDrnuRFbWuIr64g==
+preact@^10.16.0:
+  version "10.19.6"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.19.6.tgz#66007b67aad4d11899f583df1b0116d94a89b8f5"
+  integrity sha512-gympg+T2Z1fG1unB8NH29yHJwnEaCH37Z32diPDku316OTnRPeMbiRV9kTrfZpocXjdfnWuFUl/Mj4BHaf6gnw==
 
-preact@^10.5.9:
-  version "10.11.3"
-  resolved "https://registry.yarnpkg.com/preact/-/preact-10.11.3.tgz#8a7e4ba19d3992c488b0785afcc0f8aa13c78d19"
-  integrity sha512-eY93IVpod/zG3uMF22Unl8h9KkrcKIRs2EGar8hwLZZDU1lkjph303V9HZBwufh2s736U6VXuhD109LYqPoffg==
+preact@^10.24.2:
+  version "10.24.3"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.24.3.tgz#086386bd47071e3b45410ef20844c21e23828f64"
+  integrity sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA==
 
 prebuild-install@^7.1.1:
   version "7.1.1"
@@ -13695,10 +15025,18 @@ process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
 
-progress@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
-  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
+progress-events@^1.0.0, progress-events@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/progress-events/-/progress-events-1.0.1.tgz#693b6d4153f08c1418ae3cd5fcad8596c91db7e8"
+  integrity sha512-MOzLIwhpt64KIVN64h1MwdKWiyKFNc/S6BoYKPIVUHFg0/eIEyBulhWCgn678v/4c0ri3FdGuzXymNCv02MUIw==
+
+prom-client@15.1.1:
+  version "15.1.1"
+  resolved "https://registry.yarnpkg.com/prom-client/-/prom-client-15.1.1.tgz#71ba84371241acd173181b04a436782c246f3652"
+  integrity sha512-GVA2H96QCg2q71rjc3VYvSrVG7OpnJxyryC7dMzvfJfpJJHzQVwF3TJLfHzKORcwJpElWs1TwXLthlJAFJxq2A==
+  dependencies:
+    "@opentelemetry/api" "^1.4.0"
+    tdigest "^0.1.1"
 
 promise-polyfill@^8.1.3:
   version "8.3.0"
@@ -13729,7 +15067,7 @@ property-information@^5.0.0:
   dependencies:
     xtend "^4.0.0"
 
-protobufjs@^7.2.3, protobufjs@^7.2.4:
+protobufjs@^7.2.3:
   version "7.2.5"
   resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-7.2.5.tgz#45d5c57387a6d29a17aab6846dcc283f9b8e7f2d"
   integrity sha512-gGXRSXvxQ7UiPgfw8gevrfRWcTlSbOFg+p/N+JVJEK5VhueL2miT6qTymqAmjr1Q5WbOCyJbyrk6JfWKwlFn6A==
@@ -13747,6 +15085,33 @@ protobufjs@^7.2.3, protobufjs@^7.2.4:
     "@types/node" ">=13.7.0"
     long "^5.0.0"
 
+protobufjs@^7.2.5:
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-7.3.2.tgz#60f3b7624968868f6f739430cfbc8c9370e26df4"
+  integrity sha512-RXyHaACeqXeqAKGLDl68rQKbmObRsTIn4TYVUUug1KfS47YWCo5MacGITEryugIgZqORCvJWEk4l449POg5Txg==
+  dependencies:
+    "@protobufjs/aspromise" "^1.1.2"
+    "@protobufjs/base64" "^1.1.2"
+    "@protobufjs/codegen" "^2.0.4"
+    "@protobufjs/eventemitter" "^1.1.0"
+    "@protobufjs/fetch" "^1.1.0"
+    "@protobufjs/float" "^1.0.2"
+    "@protobufjs/inquire" "^1.1.0"
+    "@protobufjs/path" "^1.1.2"
+    "@protobufjs/pool" "^1.1.0"
+    "@protobufjs/utf8" "^1.1.0"
+    "@types/node" ">=13.7.0"
+    long "^5.0.0"
+
+protons-runtime@^5.0.0, protons-runtime@^5.4.0, protons-runtime@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/protons-runtime/-/protons-runtime-5.5.0.tgz#ea06d9ef843aad77ea5de3e1ebafa81b58c24570"
+  integrity sha512-EsALjF9QsrEk6gbCx3lmfHxVN0ah7nG3cY7GySD4xf4g8cr7g543zB88Foh897Sr1RQJ9yDCUsoT1i1H/cVUFA==
+  dependencies:
+    uint8-varint "^2.0.2"
+    uint8arraylist "^2.4.3"
+    uint8arrays "^5.0.1"
+
 proxy-compare@2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/proxy-compare/-/proxy-compare-2.5.1.tgz#17818e33d1653fbac8c2ec31406bce8a2966f600"
@@ -13780,6 +15145,18 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+pvtsutils@^1.3.2:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/pvtsutils/-/pvtsutils-1.3.5.tgz#b8705b437b7b134cd7fd858f025a23456f1ce910"
+  integrity sha512-ARvb14YB9Nm2Xi6nBq1ZX6dAM0FsJnuk+31aUp4TrcZEdKUlSqOqsxJHUPJDNE3qiIp+iUPEIeR6Je/tgV7zsA==
+  dependencies:
+    tslib "^2.6.1"
+
+pvutils@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/pvutils/-/pvutils-1.1.3.tgz#f35fc1d27e7cd3dfbd39c0826d173e806a03f5a3"
+  integrity sha512-pMpnA0qRdFp32b1sJl1wOJNxZLQ2cbQx+k6tjNtZ8CpvVhNqEPRgivZ2WOUev2YMajecdH7ctUPDvEe87nariQ==
+
 qrcode@1.5.3:
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.5.3.tgz#03afa80912c0dccf12bc93f615a535aad1066170"
@@ -13807,13 +15184,6 @@ qs@^6.10.2:
   dependencies:
     side-channel "^1.0.4"
 
-qs@^6.10.3:
-  version "6.11.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
-  integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
-  dependencies:
-    side-channel "^1.0.4"
-
 query-string@7.1.3:
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.1.3.tgz#a1cf90e994abb113a325804a972d98276fe02328"
@@ -13824,16 +15194,6 @@ query-string@7.1.3:
     split-on-first "^1.0.0"
     strict-uri-encode "^2.0.0"
 
-query-string@^6.13.5:
-  version "6.14.1"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.14.1.tgz#7ac2dca46da7f309449ba0f86b1fd28255b0c86a"
-  integrity sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==
-  dependencies:
-    decode-uri-component "^0.2.0"
-    filter-obj "^1.1.0"
-    split-on-first "^1.0.0"
-    strict-uri-encode "^2.0.0"
-
 querystringify@^2.1.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
@@ -13849,6 +15209,28 @@ quick-format-unescaped@^4.0.3:
   resolved "https://registry.yarnpkg.com/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz#93ef6dd8d3453cbc7970dd614fad4c5954d6b5a7"
   integrity sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==
 
+rabin-wasm@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/rabin-wasm/-/rabin-wasm-0.1.5.tgz#5b625ca007d6a2cbc1456c78ae71d550addbc9c9"
+  integrity sha512-uWgQTo7pim1Rnj5TuWcCewRDTf0PEFTSlaUjWP4eY9EbLV9em08v89oCz/WO+wRxpYuO36XEHp4wgYQnAgOHzA==
+  dependencies:
+    "@assemblyscript/loader" "^0.9.4"
+    bl "^5.0.0"
+    debug "^4.3.1"
+    minimist "^1.2.5"
+    node-fetch "^2.6.1"
+    readable-stream "^3.6.0"
+
+race-event@^1.2.0, race-event@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/race-event/-/race-event-1.3.0.tgz#854f34118c31addf877898bd9f8e4dcfac9de7a2"
+  integrity sha512-kaLm7axfOnahIqD3jQ4l1e471FIFcEGebXEnhxyLscuUzV8C94xVHtWEqDDXxll7+yu/6lW0w1Ff4HbtvHvOHg==
+
+race-signal@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/race-signal/-/race-signal-1.1.0.tgz#8bfc0740e7dedb9488f90f98858135c7cfe51bd4"
+  integrity sha512-VqsW1uzCXfKBd2DhA3K3NhQlqQr04+5WQ7+kHpf1HzT01Q+ePSFWZdQHXKZPuLmm2eXTZM1XLO76cq15ZRAaEA==
+
 radix3@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/radix3/-/radix3-1.1.0.tgz#9745df67a49c522e94a33d0a93cf743f104b6e0d"
@@ -13894,7 +15276,7 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-async-script@^1.1.1:
+react-async-script@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/react-async-script/-/react-async-script-1.2.0.tgz#ab9412a26f0b83f5e2e00de1d2befc9400834b21"
   integrity sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==
@@ -13932,13 +15314,13 @@ react-device-detect@^2.2.3:
   dependencies:
     ua-parser-js "^1.0.33"
 
-react-dom@18.2.0, react-dom@>=17, react-dom@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
-  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+react-dom@18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
+  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
   dependencies:
     loose-envify "^1.1.0"
-    scheduler "^0.23.0"
+    scheduler "^0.23.2"
 
 react-fast-compare@3.2.1:
   version "3.2.1"
@@ -13957,30 +15339,18 @@ react-focus-lock@^2.5.2, react-focus-lock@^2.9.4:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
-react-focus-lock@^2.9.5:
-  version "2.11.2"
-  resolved "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.11.2.tgz#dcc9a0dde630f0b9c694b823066f1b954c024422"
-  integrity sha512-DDTbEiov0+RthESPVSTIdAWPPKic+op3sCcP+icbMRobvQNt7LuAlJ3KoarqQv5sCgKArru3kXmlmFTa27/CdQ==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    focus-lock "^1.3.2"
-    prop-types "^15.6.2"
-    react-clientside-effect "^1.2.6"
-    use-callback-ref "^1.3.0"
-    use-sidecar "^1.1.2"
-
-react-google-recaptcha@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/react-google-recaptcha/-/react-google-recaptcha-2.1.0.tgz#9f6f4954ce49c1dedabc2c532347321d892d0a16"
-  integrity sha512-K9jr7e0CWFigi8KxC3WPvNqZZ47df2RrMAta6KmRoE4RUi7Ys6NmNjytpXpg4HI/svmQJLKR+PncEPaNJ98DqQ==
+react-google-recaptcha@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz#44aaab834495d922b9d93d7d7a7fb2326315b4ab"
+  integrity sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==
   dependencies:
     prop-types "^15.5.0"
-    react-async-script "^1.1.1"
+    react-async-script "^1.2.0"
 
-react-hook-form@^7.33.1:
-  version "7.37.0"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.37.0.tgz#4d1738f092d3d8a3ade34ee892d97350b1032b19"
-  integrity sha512-6NFTxsnw+EXSpNNvLr5nFMjPdYKRryQcelTHg7zwBB6vAzfPIcZq4AExP4heVlwdzntepQgwiOQW4z7Mr99Lsg==
+react-hook-form@7.52.1:
+  version "7.52.1"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.52.1.tgz#ec2c96437b977f8b89ae2d541a70736c66284852"
+  integrity sha512-uNKIhaoICJ5KQALYZ4TOaOLElyM+xipord+Ha3crEFhTntdLvWZqVY49Wqd/0GiVCA/f9NjemLeiNPjG7Hpurg==
 
 react-identicons@^1.2.5:
   version "1.2.5"
@@ -14055,6 +15425,11 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
+react-refresh@^0.14.2:
+  version "0.14.2"
+  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9"
+  integrity sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==
+
 react-remove-scroll-bar@^2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.3.tgz#e291f71b1bb30f5f67f023765b7435f4b2b2cd94"
@@ -14140,14 +15515,14 @@ react@17.0.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-react@18.2.0, react@>=17, react@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
-  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+react@18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
+  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
   dependencies:
     loose-envify "^1.1.0"
 
-readable-stream@3.6.2, readable-stream@^3.4.0:
+readable-stream@3.6.2, readable-stream@^3.4.0, readable-stream@^3.6.2:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
   integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
@@ -14169,7 +15544,7 @@ readable-stream@^2.3.3:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-readable-stream@^3.1.1, readable-stream@^3.5.0, readable-stream@^3.6.0:
+readable-stream@^3.1.1, readable-stream@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
   integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
@@ -14178,6 +15553,17 @@ readable-stream@^3.1.1, readable-stream@^3.5.0, readable-stream@^3.6.0:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
+"readable-stream@^3.6.2 || ^4.4.2":
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-4.5.2.tgz#9e7fc4c45099baeed934bff6eb97ba6cf2729e09"
+  integrity sha512-yjavECdqeZ3GLXNgRXgeQEdz9fvDDkNKyHnbHRFtOr7/LcfgBcmct7t/ET+HaCTqfh06OzoAxrkN/IfjJBVe+g==
+  dependencies:
+    abort-controller "^3.0.0"
+    buffer "^6.0.3"
+    events "^3.3.0"
+    process "^0.11.10"
+    string_decoder "^1.3.0"
+
 readable-stream@^4.0.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-4.2.0.tgz#a7ef523d3b39e4962b0db1a1af22777b10eeca46"
@@ -14205,17 +15591,6 @@ real-require@^0.2.0:
   resolved "https://registry.yarnpkg.com/real-require/-/real-require-0.2.0.tgz#209632dea1810be2ae063a6ac084fee7e33fba78"
   integrity sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==
 
-recrawl-sync@^2.0.3:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/recrawl-sync/-/recrawl-sync-2.2.3.tgz#757adcdaae4799466dde5b8ee52122ff9636dfb1"
-  integrity sha512-vSaTR9t+cpxlskkdUFrsEpnf67kSmPk66yAGT1fZPrDudxQjoMzPgQhSMImQ0pAw5k0NPirefQfhopSjhdUtpQ==
-  dependencies:
-    "@cush/relative" "^1.0.0"
-    glob-regex "^0.3.0"
-    slash "^3.0.0"
-    sucrase "^3.20.3"
-    tslib "^1.9.3"
-
 redis-errors@^1.0.0, redis-errors@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/redis-errors/-/redis-errors-1.2.0.tgz#eb62d2adb15e4eaf4610c04afe1529384250abad"
@@ -14240,12 +15615,25 @@ redux@^4.1.2:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
-refa@^0.9.0:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/refa/-/refa-0.9.1.tgz#12731fce378d235731b1f73182b20083c8a75ca8"
-  integrity sha512-egU8LgFq2VXlAfUi8Jcbr5X38wEOadMFf8tCbshgcpVCYlE7k84pJOSlnvXF+muDB4igkdVMq7Z/kiNPqDT9TA==
+refa@^0.12.0, refa@^0.12.1:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/refa/-/refa-0.12.1.tgz#dac13c4782dc22b6bae6cce81a2b863888ea39c6"
+  integrity sha512-J8rn6v4DBb2nnFqkqwy6/NnTYMcgLA+sLr0iIO41qpv0n+ngb7ksag2tMRl0inb1bbO/esUwzW1vbJi7K0sI0g==
   dependencies:
-    regexpp "^3.2.0"
+    "@eslint-community/regexpp" "^4.8.0"
+
+reflect.getprototypeof@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz#3ab04c32a8390b770712b7a8633972702d278859"
+  integrity sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.1"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+    globalthis "^1.0.3"
+    which-builtin-type "^1.1.3"
 
 refractor@^3.6.0:
   version "3.6.0"
@@ -14295,23 +15683,15 @@ regenerator-transform@^0.15.0:
   dependencies:
     "@babel/runtime" "^7.8.4"
 
-regexp-ast-analysis@^0.2.3:
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/regexp-ast-analysis/-/regexp-ast-analysis-0.2.4.tgz#a497a7c8bfbba51438693821e4b0e3ed43e20f1b"
-  integrity sha512-8L7kOZQaKPxKKAwGuUZxTQtlO3WZ+tiXy4s6G6PKL6trbOXcZoumwC3AOHHFtI/xoSbNxt7jgLvCnP1UADLWqg==
-  dependencies:
-    refa "^0.9.0"
-    regexpp "^3.2.0"
-
-regexp-ast-analysis@^0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/regexp-ast-analysis/-/regexp-ast-analysis-0.5.1.tgz#f7c94e6199d6752f3430ae7a1d7a5978114197fb"
-  integrity sha512-Ca/g9gaTNuMewLuu+mBIq4vCrGRSO8AE9bP32NMQjJ/wBTdWq0g96qLkBb0NbGwEbp7S/q+NQF3o7veeuRfg0g==
+regexp-ast-analysis@^0.7.0, regexp-ast-analysis@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/regexp-ast-analysis/-/regexp-ast-analysis-0.7.1.tgz#c0e24cb2a90f6eadd4cbaaba129317e29d29c482"
+  integrity sha512-sZuz1dYW/ZsfG17WSAG7eS85r5a0dDsvg+7BiiYR5o6lKCAtUrEwdmRmaGF6rwVj3LcmAeYkOWKEPlbPzN3Y3A==
   dependencies:
-    refa "^0.9.0"
-    regexpp "^3.2.0"
+    "@eslint-community/regexpp" "^4.8.0"
+    refa "^0.12.1"
 
-regexp.prototype.flags@^1.4.1, regexp.prototype.flags@^1.4.3:
+regexp.prototype.flags@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz#87cab30f80f66660181a3bb7bf5981a872b367ac"
   integrity sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==
@@ -14320,10 +15700,15 @@ regexp.prototype.flags@^1.4.1, regexp.prototype.flags@^1.4.3:
     define-properties "^1.1.3"
     functions-have-names "^1.2.2"
 
-regexpp@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
-  integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
+regexp.prototype.flags@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz#138f644a3350f981a858c44f6bb1a61ff59be334"
+  integrity sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==
+  dependencies:
+    call-bind "^1.0.6"
+    define-properties "^1.2.1"
+    es-errors "^1.3.0"
+    set-function-name "^2.0.1"
 
 regexpu-core@^5.1.0:
   version "5.2.1"
@@ -14362,6 +15747,11 @@ repeat-string@^1.5.2:
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==
 
+request-ip@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/request-ip/-/request-ip-3.3.0.tgz#863451e8fec03847d44f223e30a5d63e369fa611"
+  integrity sha512-cA6Xh6e0fDBBBwH77SLJaJPBmD3nWVAcF9/XAcsrIHdjhFzFiB5aNQFytdjCGPezU3ROwrR11IddKAM08vohxA==
+
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -14413,7 +15803,7 @@ resolve.exports@^1.1.0:
   resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.0.tgz#5ce842b94b05146c0e03076985d1d0e7e48c90c9"
   integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==
 
-resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0:
+resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0:
   version "1.22.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
   integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
@@ -14422,7 +15812,7 @@ resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^1.22.1:
+resolve@^1.22.1, resolve@^1.22.4:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -14431,7 +15821,7 @@ resolve@^1.22.1:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^2.0.0-next.3, resolve@^2.0.0-next.4:
+resolve@^2.0.0-next.4:
   version "2.0.0-next.4"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"
   integrity sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==
@@ -14440,6 +15830,15 @@ resolve@^2.0.0-next.3, resolve@^2.0.0-next.4:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^2.0.0-next.5:
+  version "2.0.0-next.5"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.5.tgz#6b0ec3107e671e52b68cd068ef327173b90dc03c"
+  integrity sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 restore-cursor@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
@@ -14470,37 +15869,50 @@ rimraf@^2.6.3:
   dependencies:
     glob "^7.1.3"
 
-rimraf@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
-  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
-  dependencies:
-    glob "^7.1.3"
-
 robust-predicates@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.1.tgz#ecde075044f7f30118682bd9fb3f123109577f9a"
   integrity sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g==
 
-rollup@^3.27.1:
-  version "3.29.4"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.29.4.tgz#4d70c0f9834146df8705bfb69a9a19c9e1109981"
-  integrity sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==
+rollbar@2.26.4:
+  version "2.26.4"
+  resolved "https://registry.yarnpkg.com/rollbar/-/rollbar-2.26.4.tgz#05e47d3b1f52ab6da9f88710ec66371a76cdc3c9"
+  integrity sha512-JKmrj6riYm9ZPJisgxljgH4uCsvjMHDHXrinDF7aAFaP+eoF51HomVPtLcDTYLsrJ568aKVNLUhedFajONBwSg==
+  dependencies:
+    async "~3.2.3"
+    console-polyfill "0.3.0"
+    error-stack-parser "^2.0.4"
+    json-stringify-safe "~5.0.0"
+    lru-cache "~2.2.1"
+    request-ip "~3.3.0"
+    source-map "^0.5.7"
   optionalDependencies:
-    fsevents "~2.3.2"
+    decache "^3.0.5"
 
-rpc-websockets@^7.5.0:
-  version "7.5.0"
-  resolved "https://registry.yarnpkg.com/rpc-websockets/-/rpc-websockets-7.5.0.tgz#bbeb87572e66703ff151e50af1658f98098e2748"
-  integrity sha512-9tIRi1uZGy7YmDjErf1Ax3wtqdSSLIlnmL5OtOzgd5eqPKbsPpwDP5whUDO2LQay3Xp0CcHlcNSGzacNRluBaQ==
+rollup@^4.20.0:
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.22.4.tgz#4135a6446671cd2a2453e1ad42a45d5973ec3a0f"
+  integrity sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==
   dependencies:
-    "@babel/runtime" "^7.17.2"
-    eventemitter3 "^4.0.7"
-    uuid "^8.3.2"
-    ws "^8.5.0"
+    "@types/estree" "1.0.5"
   optionalDependencies:
-    bufferutil "^4.0.1"
-    utf-8-validate "^5.0.2"
+    "@rollup/rollup-android-arm-eabi" "4.22.4"
+    "@rollup/rollup-android-arm64" "4.22.4"
+    "@rollup/rollup-darwin-arm64" "4.22.4"
+    "@rollup/rollup-darwin-x64" "4.22.4"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.22.4"
+    "@rollup/rollup-linux-arm-musleabihf" "4.22.4"
+    "@rollup/rollup-linux-arm64-gnu" "4.22.4"
+    "@rollup/rollup-linux-arm64-musl" "4.22.4"
+    "@rollup/rollup-linux-powerpc64le-gnu" "4.22.4"
+    "@rollup/rollup-linux-riscv64-gnu" "4.22.4"
+    "@rollup/rollup-linux-s390x-gnu" "4.22.4"
+    "@rollup/rollup-linux-x64-gnu" "4.22.4"
+    "@rollup/rollup-linux-x64-musl" "4.22.4"
+    "@rollup/rollup-win32-arm64-msvc" "4.22.4"
+    "@rollup/rollup-win32-ia32-msvc" "4.22.4"
+    "@rollup/rollup-win32-x64-msvc" "4.22.4"
+    fsevents "~2.3.2"
 
 run-parallel@^1.1.9:
   version "1.2.0"
@@ -14514,13 +15926,6 @@ rw@1:
   resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
   integrity sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==
 
-rxjs@^6.6.3:
-  version "6.6.7"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
-  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
-  dependencies:
-    tslib "^1.9.0"
-
 rxjs@^7.5.5:
   version "7.5.7"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.7.tgz#2ec0d57fdc89ece220d2e702730ae8f1e49def39"
@@ -14528,6 +15933,16 @@ rxjs@^7.5.5:
   dependencies:
     tslib "^2.1.0"
 
+safe-array-concat@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.2.tgz#81d77ee0c4e8b863635227c721278dd524c20edb"
+  integrity sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==
+  dependencies:
+    call-bind "^1.0.7"
+    get-intrinsic "^1.2.4"
+    has-symbols "^1.0.3"
+    isarray "^2.0.5"
+
 safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
@@ -14538,11 +15953,6 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-safe-json-utils@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/safe-json-utils/-/safe-json-utils-1.1.1.tgz#0e883874467d95ab914c3f511096b89bfb3e63b1"
-  integrity sha512-SAJWGKDs50tAbiDXLf89PDwt9XYkWyANFWVzn4dTXl5QyI8t2o/bW5/OJl3lvc2WVU4MEpTo9Yz5NVFNsp+OJQ==
-
 safe-regex-test@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz#793b874d524eb3640d1873aad03596db2d4f2295"
@@ -14552,6 +15962,15 @@ safe-regex-test@^1.0.0:
     get-intrinsic "^1.1.3"
     is-regex "^1.1.4"
 
+safe-regex-test@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.3.tgz#a5b4c0f06e0ab50ea2c395c14d8371232924c377"
+  integrity sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-regex "^1.1.4"
+
 safe-stable-stringify@^2.1.0:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/safe-stable-stringify/-/safe-stable-stringify-2.4.2.tgz#ec7b037768098bf65310d1d64370de0dc02353aa"
@@ -14574,26 +15993,21 @@ saxes@^6.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.23.0:
-  version "0.23.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
-  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+scheduler@^0.23.2:
+  version "0.23.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
+  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
   dependencies:
     loose-envify "^1.1.0"
 
-scrypt-js@3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/scrypt-js/-/scrypt-js-3.0.1.tgz#d314a57c2aef69d1ad98a138a21fe9eafa9ee312"
-  integrity sha512-cdwTTnqPu0Hyvf5in5asVdZocVDTNRmR7XEcJuIzMjJeSHybHl7vpB66AzwTaIg6CLSbtjcxc8fqcySfnTkccA==
-
-scslre@^0.1.6:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/scslre/-/scslre-0.1.6.tgz#71a2832e4bf3a9254973a04fbed90aec94f75757"
-  integrity sha512-JORxVRlQTfjvlOAaiQKebgFElyAm5/W8b50lgaZ0OkEnKnagJW2ufDh3xRfU75UD9z3FGIu1gL1IyR3Poa6Qmw==
+scslre@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/scslre/-/scslre-0.3.0.tgz#c3211e9bfc5547fc86b1eabaa34ed1a657060155"
+  integrity sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==
   dependencies:
-    refa "^0.9.0"
-    regexp-ast-analysis "^0.2.3"
-    regexpp "^3.2.0"
+    "@eslint-community/regexpp" "^4.8.0"
+    refa "^0.12.0"
+    regexp-ast-analysis "^0.7.0"
 
 secure-json-parse@^2.4.0:
   version "2.5.0"
@@ -14607,11 +16021,16 @@ semver@7.x, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@^7.5.2, semver@^
   dependencies:
     lru-cache "^6.0.0"
 
-semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
+semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0, semver@^6.3.1:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
+semver@^7.6.0, semver@^7.6.3:
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
 serialize-error@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/serialize-error/-/serialize-error-8.1.0.tgz#3a069970c712f78634942ddd50fbbc0eaebe2f67"
@@ -14624,6 +16043,28 @@ set-blocking@^2.0.0:
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
 
+set-function-length@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
+set-function-name@^2.0.1, set-function-name@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.2.tgz#16a705c5a0dc2f5e638ca96d8a8cd4e1c2b90985"
+  integrity sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    functions-have-names "^1.2.3"
+    has-property-descriptors "^1.0.2"
+
 set-value@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/set-value/-/set-value-4.1.0.tgz#aa433662d87081b75ad88a4743bd450f044e7d09"
@@ -14640,6 +16081,35 @@ sha.js@^2.4.11:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+sharp@^0.33.5:
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.33.5.tgz#13e0e4130cc309d6a9497596715240b2ec0c594e"
+  integrity sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==
+  dependencies:
+    color "^4.2.3"
+    detect-libc "^2.0.3"
+    semver "^7.6.3"
+  optionalDependencies:
+    "@img/sharp-darwin-arm64" "0.33.5"
+    "@img/sharp-darwin-x64" "0.33.5"
+    "@img/sharp-libvips-darwin-arm64" "1.0.4"
+    "@img/sharp-libvips-darwin-x64" "1.0.4"
+    "@img/sharp-libvips-linux-arm" "1.0.5"
+    "@img/sharp-libvips-linux-arm64" "1.0.4"
+    "@img/sharp-libvips-linux-s390x" "1.0.4"
+    "@img/sharp-libvips-linux-x64" "1.0.4"
+    "@img/sharp-libvips-linuxmusl-arm64" "1.0.4"
+    "@img/sharp-libvips-linuxmusl-x64" "1.0.4"
+    "@img/sharp-linux-arm" "0.33.5"
+    "@img/sharp-linux-arm64" "0.33.5"
+    "@img/sharp-linux-s390x" "0.33.5"
+    "@img/sharp-linux-x64" "0.33.5"
+    "@img/sharp-linuxmusl-arm64" "0.33.5"
+    "@img/sharp-linuxmusl-x64" "0.33.5"
+    "@img/sharp-wasm32" "0.33.5"
+    "@img/sharp-win32-ia32" "0.33.5"
+    "@img/sharp-win32-x64" "0.33.5"
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -14671,6 +16141,16 @@ side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
+side-channel@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
+  integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+    object-inspect "^1.13.1"
+
 signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
@@ -14695,14 +16175,21 @@ simple-get@^4.0.0:
     once "^1.3.1"
     simple-concat "^1.0.0"
 
-sirv@^1.0.7:
-  version "1.0.19"
-  resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.19.tgz#1d73979b38c7fe91fcba49c85280daa9c2363b49"
-  integrity sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
+  dependencies:
+    is-arrayish "^0.3.1"
+
+sirv@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-2.0.4.tgz#5dd9a725c578e34e449f332703eb2a74e46a29b0"
+  integrity sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==
   dependencies:
-    "@polka/url" "^1.0.0-next.20"
-    mrmime "^1.0.0"
-    totalist "^1.0.0"
+    "@polka/url" "^1.0.0-next.24"
+    mrmime "^2.0.0"
+    totalist "^3.0.0"
 
 sisteransi@^1.0.5:
   version "1.0.5"
@@ -14750,6 +16237,24 @@ slice-ansi@^5.0.0:
     ansi-styles "^6.0.0"
     is-fullwidth-code-point "^4.0.0"
 
+socket.io-client@^4.5.1:
+  version "4.7.4"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.7.4.tgz#5f0e060ff34ac0a4b4c5abaaa88e0d1d928c64c8"
+  integrity sha512-wh+OkeF0rAVCrABWQBaEjLfb7DVPotMbu0cgWgyR0v6eA4EoVnAwcIeIbcdTE3GT/H3kbdLl7OoH2+asoDRIIg==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.2"
+    engine.io-client "~6.5.2"
+    socket.io-parser "~4.2.4"
+
+socket.io-parser@~4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.4.tgz#c806966cf7270601e47469ddeec30fbdfda44c83"
+  integrity sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+
 sonic-boom@^2.2.1:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/sonic-boom/-/sonic-boom-2.8.0.tgz#c1def62a77425090e6ad7516aad8eb402e047611"
@@ -14764,11 +16269,16 @@ sonic-boom@^3.0.0, sonic-boom@^3.1.0:
   dependencies:
     atomic-sleep "^1.0.0"
 
-source-map-js@^1.0.1, source-map-js@^1.0.2:
+source-map-js@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
+source-map-js@^1.0.2, source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
 source-map-support@0.5.13:
   version "0.5.13"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"
@@ -14792,6 +16302,11 @@ space-separated-tokens@^1.0.0:
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
   integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
 
+sparse-array@^1.3.1, sparse-array@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/sparse-array/-/sparse-array-1.3.2.tgz#0e1a8b71706d356bc916fe754ff496d450ec20b0"
+  integrity sha512-ZT711fePGn3+kQyLuv1fpd3rNSkNF8vd5Kv2D+qnOANeyKs3fx6bUMGWRPvgTTcYV64QMqZKZwcuaQSP3AZ0tg==
+
 split-on-first@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
@@ -14819,6 +16334,11 @@ stack-utils@^2.0.3:
   dependencies:
     escape-string-regexp "^2.0.0"
 
+stackframe@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.3.4.tgz#b881a004c8c149a5e8efef37d51b16e412943310"
+  integrity sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==
+
 stampit@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/stampit/-/stampit-4.3.2.tgz#cfd3f607dd628a161ce6305621597994b4d56573"
@@ -14839,14 +16359,6 @@ std-env@^3.4.3:
   resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.6.0.tgz#94807562bddc68fa90f2e02c5fd5b6865bb4e98e"
   integrity sha512-aFZ19IgVmhdB2uX599ve2kE6BIE3YMnQ6Gp6BURhW/oIzpXGKr878TQfAQZn1+i0Flcc/UKUy1gOlcfaUBCryg==
 
-stream-browserify@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-3.0.0.tgz#22b0a2850cdf6503e73085da1fc7b7d0c2122f2f"
-  integrity sha512-H73RAHsVBapbim0tU2JwwOiXUj+fikfiaoYAKHF3VJfA0pe2BCzkhAHBlLG6REzE+2WNZcxOXjK7lkso+9euLA==
-  dependencies:
-    inherits "~2.0.4"
-    readable-stream "^3.5.0"
-
 stream-shift@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
@@ -14867,7 +16379,7 @@ string-argv@^0.3.1:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
   integrity sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==
 
-string-hash@^1.1.3:
+string-hash@^1.1.1, string-hash@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
   integrity sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==
@@ -14885,7 +16397,16 @@ string-template@~0.2.1:
   resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"
   integrity sha512-Yptehjogou2xm4UJbxJ4CxgZx12HBfeystp0y3x7s4Dj32ltVVG1Gg8YhKjHZkHicuKpZX/ffilA8505VbUbpw==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -14903,19 +16424,32 @@ string-width@^5.0.0, string-width@^5.0.1, string-width@^5.1.2:
     emoji-regex "^9.2.2"
     strip-ansi "^7.0.1"
 
-string.prototype.matchall@^4.0.7:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz#8e6ecb0d8a1fb1fda470d81acecb2dba057a481d"
-  integrity sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
-    get-intrinsic "^1.1.1"
+string.prototype.includes@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz#eceef21283640761a81dbe16d6c7171a4edf7d92"
+  integrity sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.3"
+
+string.prototype.matchall@^4.0.11:
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz#1092a72c59268d2abaad76582dccc687c0297e0a"
+  integrity sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
     has-symbols "^1.0.3"
-    internal-slot "^1.0.3"
-    regexp.prototype.flags "^1.4.1"
-    side-channel "^1.0.4"
+    internal-slot "^1.0.7"
+    regexp.prototype.flags "^1.5.2"
+    set-function-name "^2.0.2"
+    side-channel "^1.0.6"
 
 string.prototype.matchall@^4.0.8:
   version "4.0.8"
@@ -14931,6 +16465,24 @@ string.prototype.matchall@^4.0.8:
     regexp.prototype.flags "^1.4.3"
     side-channel "^1.0.4"
 
+string.prototype.repeat@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz#e90872ee0308b29435aa26275f6e1b762daee01a"
+  integrity sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
+string.prototype.trim@^1.2.9:
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz#b6fa326d72d2c78b6df02f7759c73f8f6274faa4"
+  integrity sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.0"
+    es-object-atoms "^1.0.0"
+
 string.prototype.trimend@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz#914a65baaab25fbdd4ee291ca7dde57e869cb8d0"
@@ -14949,6 +16501,15 @@ string.prototype.trimend@^1.0.6:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
+string.prototype.trimend@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz#3651b8513719e8a9f48de7f2f77640b26652b229"
+  integrity sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
 string.prototype.trimstart@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz#5466d93ba58cfa2134839f81d7f42437e8c01fef"
@@ -14967,7 +16528,16 @@ string.prototype.trimstart@^1.0.6:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
-string_decoder@^1.1.1:
+string.prototype.trimstart@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
+  integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+string_decoder@^1.1.1, string_decoder@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
   integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
@@ -14981,7 +16551,14 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -15015,7 +16592,7 @@ strip-final-newline@^3.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-3.0.0.tgz#52894c313fbff318835280aed60ff71ebf12b8fd"
   integrity sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==
 
-strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
@@ -15025,6 +16602,11 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==
 
+style-inject@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/style-inject/-/style-inject-0.3.0.tgz#d21c477affec91811cc82355832a700d22bf8dd3"
+  integrity sha512-IezA2qp+vcdlhJaVm5SOdPPTUu0FCEqfNSli2vRuSIBbu5Nq5UvygTk/VzeCqfLz2Atj3dVII5QBKGZRZ0edzw==
+
 style-loader@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
@@ -15038,10 +16620,10 @@ style-value-types@5.0.0:
     hey-listen "^1.0.8"
     tslib "^2.1.0"
 
-styled-jsx@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.1.tgz#839a1c3aaacc4e735fed0781b8619ea5d0009d1f"
-  integrity sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==
+styled-jsx@5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.6.tgz#83b90c077e6c6a80f7f5e8781d0f311b2fe41499"
+  integrity sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==
   dependencies:
     client-only "0.0.1"
 
@@ -15050,22 +16632,14 @@ stylis@4.1.3:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7"
   integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
 
-sucrase@^3.20.3:
-  version "3.29.0"
-  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.29.0.tgz#3207c5bc1b980fdae1e539df3f8a8a518236da7d"
-  integrity sha512-bZPAuGA5SdFHuzqIhTAqt9fvNEo9rESqXIG3oiKdF8K4UmkQxC4KlNL3lVyAErXp+mPvUqZ5l13qx6TrDIGf3A==
+super-regex@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/super-regex/-/super-regex-0.2.0.tgz#dc1e071e55cdcf56930eb6271f73653a655b2642"
+  integrity sha512-WZzIx3rC1CvbMDloLsVw0lkZVKJWbrkJ0k1ghKFmcnPrW1+jWbgTkTEWVtD9lMdmI4jZEz40+naBxl1dCUhXXw==
   dependencies:
-    commander "^4.0.0"
-    glob "7.1.6"
-    lines-and-columns "^1.1.6"
-    mz "^2.7.0"
-    pirates "^4.0.1"
-    ts-interface-checker "^0.1.9"
-
-superstruct@^0.14.2:
-  version "0.14.2"
-  resolved "https://registry.yarnpkg.com/superstruct/-/superstruct-0.14.2.tgz#0dbcdf3d83676588828f1cf5ed35cda02f59025b"
-  integrity sha512-nPewA6m9mR3d6k7WkZ8N8zpTWfenFH3q9pA2PkuiZxINr9DKB2+40wEQf0ixn8VaGuJ78AB6iWOtStI+/4FKZQ==
+    clone-regexp "^3.0.0"
+    function-timeout "^0.1.0"
+    time-span "^5.1.0"
 
 superstruct@^1.0.3:
   version "1.0.3"
@@ -15093,6 +16667,11 @@ supports-color@^8.0.0:
   dependencies:
     has-flag "^4.0.0"
 
+supports-color@^9.4.0:
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-9.4.0.tgz#17bfcf686288f531db3dea3215510621ccb55954"
+  integrity sha512-VL+lNrEoIXww1coLPOmiEmK/0sGigko5COxI09KzHc2VJXJsQ37UaQ+8quuxjDeA7+KnLGTWRyOXSLLR2Wb4jw==
+
 supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
@@ -15255,6 +16834,13 @@ tar-stream@^2.1.4:
     inherits "^2.0.3"
     readable-stream "^3.1.1"
 
+tdigest@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/tdigest/-/tdigest-0.1.2.tgz#96c64bac4ff10746b910b0e23b515794e12faced"
+  integrity sha512-+G0LLgjjo9BZX2MfdvPfH+MKLCrxlXSYec5DaPYP1fe6Iyhf0/fSmJ0bFiZ1F8BT6cGXl2LpltQptzjXKWEkKA==
+  dependencies:
+    bintrees "1.0.2"
+
 test-exclude@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"
@@ -15264,30 +16850,11 @@ test-exclude@^6.0.0:
     glob "^7.1.4"
     minimatch "^3.0.4"
 
-text-encoding-utf-8@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/text-encoding-utf-8/-/text-encoding-utf-8-1.0.2.tgz#585b62197b0ae437e3c7b5d0af27ac1021e10d13"
-  integrity sha512-8bw4MY9WjdsD2aMtO0OzOCY3pXGYNx2d2FfHRVUKkiCPDWjKuOlhLVASS+pD7VkLTVjW268LYJHwsnPFlBpbAg==
-
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
-thenify-all@^1.0.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
-  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
-  dependencies:
-    thenify ">= 3.1.0 < 4"
-
-"thenify@>= 3.1.0 < 4":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
-  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
-  dependencies:
-    any-promise "^1.0.0"
-
 thread-stream@^0.15.1:
   version "0.15.2"
   resolved "https://registry.yarnpkg.com/thread-stream/-/thread-stream-0.15.2.tgz#fb95ad87d2f1e28f07116eb23d85aba3bc0425f4"
@@ -15311,11 +16878,23 @@ thriftrw@^3.5.0:
     error "7.0.2"
     long "^2.4.0"
 
-"through@>=2.2.7 <3", through@^2.3.8:
+through@^2.3.8:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
 
+time-span@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/time-span/-/time-span-5.1.0.tgz#80c76cf5a0ca28e0842d3f10a4e99034ce94b90d"
+  integrity sha512-75voc/9G4rDIJleOo4jPvN4/YC4GRZrY8yy1uU4lwrB3XEQbWve8zXoO5No4eFrGcTAMYyoY67p8jRQdtA1HbA==
+  dependencies:
+    convert-hrtime "^5.0.0"
+
+timestamp-nano@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/timestamp-nano/-/timestamp-nano-1.0.1.tgz#be6eb118719504fcc3c7c732d2c461d3dd87da63"
+  integrity sha512-4oGOVZWTu5sl89PtCDnhQBSt7/vL1zVEwAfxH1p49JhTosxzVQWYBYFRFZ8nJmo0G6f824iyP/44BFAwIoKvIA==
+
 tiny-glob@^0.2.9:
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/tiny-glob/-/tiny-glob-0.2.9.tgz#2212d441ac17928033b110f8b3640683129d31e2"
@@ -15329,6 +16908,11 @@ tiny-invariant@^1.0.6:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642"
   integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==
 
+tiny-invariant@^1.1.0:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
+  integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==
+
 tiny-parse-argv@^2.2.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/tiny-parse-argv/-/tiny-parse-argv-2.4.0.tgz#8612163a88104a5af9a64e4775cd1e091d4fa265"
@@ -15368,10 +16952,10 @@ toggle-selection@^1.0.6:
   resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
   integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
 
-totalist@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
-  integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==
+totalist@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/totalist/-/totalist-3.0.1.tgz#ba3a3d600c915b1a97872348f79c127475f6acf8"
+  integrity sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==
 
 tough-cookie@^4.1.2:
   version "4.1.3"
@@ -15395,6 +16979,11 @@ tr46@~0.0.3:
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
   integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
+traverse-chain@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/traverse-chain/-/traverse-chain-0.1.0.tgz#61dbc2d53b69ff6091a12a168fd7d433107e40f1"
+  integrity sha512-up6Yvai4PYKhpNp5PkYtx50m3KbwQrqDwbuZP/ItyL64YEWHAvH6Md83LFLV/GRSk/BoUVwwgUzX6SOQSbsfAg==
+
 traverse@~0.6.6:
   version "0.6.7"
   resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.7.tgz#46961cd2d57dd8706c36664acde06a248f1173fe"
@@ -15422,10 +17011,10 @@ tree-sitter@=0.20.4:
     nan "^2.17.0"
     prebuild-install "^7.1.1"
 
-ts-interface-checker@^0.1.9:
-  version "0.1.13"
-  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
-  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+ts-api-utils@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.4.0.tgz#709c6f2076e511a81557f3d07a0cbd566ae8195c"
+  integrity sha512-032cPxaEKwM+GT3vA5JXNzIaizx388rhsSW79vGRNGXfRRAdEAn2mvk36PvK5HnOchyWZ7afLEXqYCvPCrzuzQ==
 
 ts-jest@^29.0.3:
   version "29.0.3"
@@ -15465,31 +17054,27 @@ ts-toolbelt@^9.6.0:
   resolved "https://registry.yarnpkg.com/ts-toolbelt/-/ts-toolbelt-9.6.0.tgz#50a25426cfed500d4a09bd1b3afb6f28879edfd5"
   integrity sha512-nsZd8ZeNUzukXPlJmTBwUAuABDe/9qtVDelJeT/qW0ow3ZS3BsQJtNkan1802aM9Uf68/Y8ljw86Hu0h5IUW3w==
 
-tsconfig-paths@^3.14.1:
-  version "3.14.1"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"
-  integrity sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==
-  dependencies:
-    "@types/json5" "^0.0.29"
-    json5 "^1.0.1"
-    minimist "^1.2.6"
-    strip-bom "^3.0.0"
+tsconfck@^3.0.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/tsconfck/-/tsconfck-3.1.3.tgz#a8202f51dab684c426314796cdb0bbd0fe0cdf80"
+  integrity sha512-ulNZP1SVpRDesxeMLON/LtWM8HIgAJEIVpVVhBM6gsmvQ8+Rh+ZG7FWGvHh7Ah3pRABwVJWklWCr/BTZSv0xnQ==
 
-tsconfig-paths@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-4.1.0.tgz#f8ef7d467f08ae3a695335bf1ece088c5538d2c1"
-  integrity sha512-AHx4Euop/dXFC+Vx589alFba8QItjF+8hf8LtmuiCwHyI4rHXQtOOENaM8kvYf5fR0dRChy3wzWIZ9WbB7FWow==
+tsconfig-paths@^3.15.0:
+  version "3.15.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
+  integrity sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==
   dependencies:
-    json5 "^2.2.1"
+    "@types/json5" "^0.0.29"
+    json5 "^1.0.2"
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@1.14.1, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
+tslib@1.14.1, tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@2.4.0, tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.1, tslib@^2.4.0:
+tslib@2.4.0, tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.1:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
@@ -15499,6 +17084,21 @@ tslib@^2.3.0, tslib@^2.5.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
   integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
 
+tslib@^2.4.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.7.0.tgz#d9b40c5c40ab59e8738f297df3087bf1a2690c01"
+  integrity sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==
+
+tslib@^2.6.0, tslib@^2.6.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
+tslib@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
@@ -15542,6 +17142,38 @@ type-fest@^0.21.3:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
   integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
 
+typed-array-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz#1867c5d83b20fcb5ccf32649e5e2fc7424474ff3"
+  integrity sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    is-typed-array "^1.1.13"
+
+typed-array-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz#d92972d3cff99a3fa2e765a28fcdc0f1d89dec67"
+  integrity sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+
+typed-array-byte-offset@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz#f9ec1acb9259f395093e4567eb3c28a580d02063"
+  integrity sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+
 typed-array-length@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.4.tgz#89d83785e5c4098bec72e08b319651f0eac9c1bb"
@@ -15551,12 +17183,17 @@ typed-array-length@^1.0.4:
     for-each "^0.3.3"
     is-typed-array "^1.1.9"
 
-typedarray-to-buffer@3.1.5:
-  version "3.1.5"
-  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
-  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
+typed-array-length@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.6.tgz#57155207c76e64a3457482dfdc1c9d1d3c4c73a3"
+  integrity sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==
   dependencies:
-    is-typedarray "^1.0.0"
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+    possible-typed-array-names "^1.0.0"
 
 types-ramda@^0.29.5:
   version "0.29.5"
@@ -15565,10 +17202,19 @@ types-ramda@^0.29.5:
   dependencies:
     ts-toolbelt "^9.6.0"
 
-typescript@^5.1.0:
-  version "5.1.6"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274"
-  integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==
+typescript-eslint@8.14.0:
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/typescript-eslint/-/typescript-eslint-8.14.0.tgz#2435c0628e90303544fdd63ae311e9bf6d149a5d"
+  integrity sha512-K8fBJHxVL3kxMmwByvz8hNdBJ8a0YqKzKDX6jRlrjMuNXyd5T2V02HIq37+OiWXvUUOXgOOGiSSOh26Mh8pC3w==
+  dependencies:
+    "@typescript-eslint/eslint-plugin" "8.14.0"
+    "@typescript-eslint/parser" "8.14.0"
+    "@typescript-eslint/utils" "8.14.0"
+
+typescript@5.4.2:
+  version "5.4.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.2.tgz#0ae9cebcfae970718474fe0da2c090cad6577372"
+  integrity sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==
 
 typescript@^5.2.2:
   version "5.3.3"
@@ -15590,13 +17236,42 @@ ufo@^1.3.0, ufo@^1.3.1, ufo@^1.3.2:
   resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.3.2.tgz#c7d719d0628a1c80c006d2240e0d169f6e3c0496"
   integrity sha512-o+ORpgGwaYQXgqGDwd+hkS4PuZ3QnmqMMxRuajK/a38L6fTpcE5GPIfrf+L/KemFzfUpeUQc1rRS1iDBozvnFA==
 
-uint8arrays@^3.0.0, uint8arrays@^3.1.0:
+uint8-varint@^2.0.1, uint8-varint@^2.0.2, uint8-varint@^2.0.3, uint8-varint@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/uint8-varint/-/uint8-varint-2.0.4.tgz#85be52b3849eb30f2c3640a2df8a14364180affb"
+  integrity sha512-FwpTa7ZGA/f/EssWAb5/YV6pHgVF1fViKdW8cWaEarjB8t7NyofSWBdOTyFPaGuUG4gx3v1O3PQ8etsiOs3lcw==
+  dependencies:
+    uint8arraylist "^2.0.0"
+    uint8arrays "^5.0.0"
+
+uint8arraylist@^2.0.0, uint8arraylist@^2.3.2, uint8arraylist@^2.4.3, uint8arraylist@^2.4.8:
+  version "2.4.8"
+  resolved "https://registry.yarnpkg.com/uint8arraylist/-/uint8arraylist-2.4.8.tgz#5a4d17f4defd77799cb38e93fd5db0f0dceddc12"
+  integrity sha512-vc1PlGOzglLF0eae1M8mLRTBivsvrGsdmJ5RbK3e+QRvRLOZfZhQROTwH/OfyF3+ZVUg9/8hE8bmKP2CvP9quQ==
+  dependencies:
+    uint8arrays "^5.0.1"
+
+uint8arrays@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/uint8arrays/-/uint8arrays-3.1.0.tgz#8186b8eafce68f28bd29bd29d683a311778901e2"
+  integrity sha512-ei5rfKtoRO8OyOIor2Rz5fhzjThwIHJZ3uyDPnDHTXbP0aMQ1RN/6AI5B5d9dBxJOU+BvOAk7ZQ1xphsX8Lrog==
+  dependencies:
+    multiformats "^9.4.2"
+
+uint8arrays@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/uint8arrays/-/uint8arrays-3.1.1.tgz#2d8762acce159ccd9936057572dade9459f65ae0"
   integrity sha512-+QJa8QRnbdXVpHYjLoTpJIdCTiw9Ir62nocClWuXIq2JIh4Uta0cQsTSpFL678p2CN8B+XSApwcU+pQEqVpKWg==
   dependencies:
     multiformats "^9.4.2"
 
+uint8arrays@^5.0.0, uint8arrays@^5.0.1, uint8arrays@^5.0.2, uint8arrays@^5.0.3, uint8arrays@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/uint8arrays/-/uint8arrays-5.1.0.tgz#14047c9bdf825d025b7391299436e5e50e7270f1"
+  integrity sha512-vA6nFepEmlSKkMBnLBaUMVvAC4G3CTmO58C12y4sq6WPDOR7mOFYOi7GlrQ4djeSbP6JG9Pv9tJDM97PedRSww==
+  dependencies:
+    multiformats "^13.0.0"
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
@@ -15617,10 +17292,15 @@ undici-types@~5.26.4:
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
   integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
 
+undici-types@~6.19.2:
+  version "6.19.8"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
+  integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
+
 undici@^5.24.0:
-  version "5.26.3"
-  resolved "https://registry.yarnpkg.com/undici/-/undici-5.26.3.tgz#ab3527b3d5bb25b12f898dfd22165d472dd71b79"
-  integrity sha512-H7n2zmKEWgOllKkIUkLvFmsJQj062lSm3uA4EYApG8gLuiOM0/go9bIoC3HVaSnfg4xunowDE2i9p8drkXuvDw==
+  version "5.28.4"
+  resolved "https://registry.yarnpkg.com/undici/-/undici-5.28.4.tgz#6b280408edb6a1a604a9b20340f45b422e373068"
+  integrity sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==
   dependencies:
     "@fastify/busboy" "^2.0.0"
 
@@ -15707,6 +17387,14 @@ update-browserslist-db@^1.0.9:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
+update-browserslist-db@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz#7ca61c0d8650766090728046e416a8cde682859e"
+  integrity sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==
+  dependencies:
+    escalade "^3.1.2"
+    picocolors "^1.0.1"
+
 uqr@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/uqr/-/uqr-0.1.2.tgz#5c6cd5dcff9581f9bb35b982cb89e2c483a41d7d"
@@ -15755,7 +17443,7 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
-use-sync-external-store@1.2.0, use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0:
+use-sync-external-store@1.2.0, use-sync-external-store@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
@@ -15788,6 +17476,11 @@ uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+uuid@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
+  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
+
 v8-compile-cache-lib@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
@@ -15802,6 +17495,11 @@ v8-to-istanbul@^9.0.1:
     "@types/istanbul-lib-coverage" "^2.0.1"
     convert-source-map "^1.6.0"
 
+valibot@0.38.0:
+  version "0.38.0"
+  resolved "https://registry.yarnpkg.com/valibot/-/valibot-0.38.0.tgz#2d035d2a5bd36e8ea8b48b56d44552ace1a7616f"
+  integrity sha512-RCJa0fetnzp+h+KN9BdgYOgtsMAG9bfoJ9JSjIhFHobKWVWyzM3jjaeNTdpFK9tQtf3q1sguXeERJ/LcmdFE7w==
+
 valtio@1.11.2:
   version "1.11.2"
   resolved "https://registry.yarnpkg.com/valtio/-/valtio-1.11.2.tgz#b8049c02dfe65620635d23ebae9121a741bb6530"
@@ -15810,19 +17508,45 @@ valtio@1.11.2:
     proxy-compare "2.5.1"
     use-sync-external-store "1.2.0"
 
-valtio@1.12.1:
-  version "1.12.1"
-  resolved "https://registry.yarnpkg.com/valtio/-/valtio-1.12.1.tgz#741f8bd46586f8c4b1a7639b1348252a052b746e"
-  integrity sha512-R0V4H86Xi2Pp7pmxN/EtV4Q6jr6PMN3t1IwxEvKUp6160r8FimvPh941oWyeK1iec/DTsh9Jb3Q+GputMS8SYg==
-  dependencies:
-    derive-valtio "0.1.0"
-    proxy-compare "2.5.1"
-    use-sync-external-store "1.2.0"
-
-viem@1.20.1:
-  version "1.20.1"
-  resolved "https://registry.yarnpkg.com/viem/-/viem-1.20.1.tgz#ea92f9bab2fded4be556be4d4be724805d11780e"
-  integrity sha512-PaYyfuCVkNFzdaVoV8HefMIt5YtjIG6UPqxOz0rYchN52cD05YcRJlO0h/XrehQfo8ib2RSOkZ0ChJ6Adlh1Jg==
+varint@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/varint/-/varint-6.0.0.tgz#9881eb0ce8feaea6512439d19ddf84bf551661d0"
+  integrity sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==
+
+viem@2.21.54:
+  version "2.21.54"
+  resolved "https://registry.yarnpkg.com/viem/-/viem-2.21.54.tgz#76d6f86ab8809078f1ac140ac1a2beadbc86b9f6"
+  integrity sha512-G9mmtbua3UtnVY9BqAtWdNp+3AO+oWhD0B9KaEsZb6gcrOWgmA4rz02yqEMg+qW9m6KgKGie7q3zcHqJIw6AqA==
+  dependencies:
+    "@noble/curves" "1.7.0"
+    "@noble/hashes" "1.6.1"
+    "@scure/bip32" "1.6.0"
+    "@scure/bip39" "1.5.0"
+    abitype "1.0.7"
+    isows "1.0.6"
+    ox "0.1.2"
+    webauthn-p256 "0.0.10"
+    ws "8.18.0"
+
+viem@2.x:
+  version "2.21.32"
+  resolved "https://registry.yarnpkg.com/viem/-/viem-2.21.32.tgz#b7f43b2004967036f83500260290cee45189f62a"
+  integrity sha512-2oXt5JNIb683oy7C8wuIJ/SeL3XtHVMEQpy1U2TA6WMnJQ4ScssRvyPwYLcaP6mKlrGXE/cR/V7ncWpvLUVPYQ==
+  dependencies:
+    "@adraffy/ens-normalize" "1.11.0"
+    "@noble/curves" "1.6.0"
+    "@noble/hashes" "1.5.0"
+    "@scure/bip32" "1.5.0"
+    "@scure/bip39" "1.4.0"
+    abitype "1.0.6"
+    isows "1.0.6"
+    webauthn-p256 "0.0.10"
+    ws "8.18.0"
+
+viem@^1.20.3:
+  version "1.21.4"
+  resolved "https://registry.yarnpkg.com/viem/-/viem-1.21.4.tgz#883760e9222540a5a7e0339809202b45fe6a842d"
+  integrity sha512-BNVYdSaUjeS2zKQgPs+49e5JKocfo60Ib2yiXOWBT6LuVxY1I/6fFX3waEtpXvL1Xn4qu+BVitVtMh9lyThyhQ==
   dependencies:
     "@adraffy/ens-normalize" "1.10.0"
     "@noble/curves" "1.2.0"
@@ -15833,20 +17557,20 @@ viem@1.20.1:
     isows "1.0.3"
     ws "8.13.0"
 
-viem@^1.0.0:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/viem/-/viem-1.2.5.tgz#e9f80a57b80d8749624b4b31a98041549a25c5ad"
-  integrity sha512-AeQ1hiyPKXnWb/KTsxRLt7KZUmLgd6NTCe/GyQf+8TZO7ndXmSZf88swE+60v1bLT+FDUWXufKGJ2oNT129wXw==
-  dependencies:
-    "@adraffy/ens-normalize" "1.9.0"
-    "@noble/curves" "1.0.0"
-    "@noble/hashes" "1.3.0"
-    "@scure/bip32" "1.3.0"
-    "@scure/bip39" "1.2.0"
-    "@wagmi/chains" "1.2.0"
-    abitype "0.8.11"
-    isomorphic-ws "5.0.0"
-    ws "8.12.0"
+viem@^2.1.1:
+  version "2.21.5"
+  resolved "https://registry.yarnpkg.com/viem/-/viem-2.21.5.tgz#07db65f047f2c24732ccf92bb96933ea8e8048b9"
+  integrity sha512-MFuoeGA8hRJJ0CknSuKYZjVaxSy5hyzu9MCArOANz3Iq5RITBJNIhM+m6TNvO9I2AxCSF3+PZObjbrLVg7cX2w==
+  dependencies:
+    "@adraffy/ens-normalize" "1.10.0"
+    "@noble/curves" "1.4.0"
+    "@noble/hashes" "1.4.0"
+    "@scure/bip32" "1.4.0"
+    "@scure/bip39" "1.4.0"
+    abitype "1.0.5"
+    isows "1.0.4"
+    webauthn-p256 "0.0.5"
+    ws "8.17.1"
 
 vite-plugin-svgr@^2.2.2:
   version "2.2.2"
@@ -15856,43 +17580,31 @@ vite-plugin-svgr@^2.2.2:
     "@rollup/pluginutils" "^5.0.0"
     "@svgr/core" "^6.4.0"
 
-vite-tsconfig-paths@^3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/vite-tsconfig-paths/-/vite-tsconfig-paths-3.5.2.tgz#fd3232f93c426311d7e0d581187d8b63fff55fbc"
-  integrity sha512-xJMgHA2oJ28QCG2f+hXrcqzo7IttrSRK4A//Tp94CfuX5eetOx33qiwXHUdi3FwkHP2ocpxHuvE45Ix67gwEmQ==
+vite-tsconfig-paths@4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/vite-tsconfig-paths/-/vite-tsconfig-paths-4.3.2.tgz#321f02e4b736a90ff62f9086467faf4e2da857a9"
+  integrity sha512-0Vd/a6po6Q+86rPlntHye7F31zA2URZMbH8M3saAZ/xR9QoGN/L21bxEGfXdWmFdNkqPpRdxFT7nmNe12e9/uA==
   dependencies:
     debug "^4.1.1"
     globrex "^0.1.2"
-    recrawl-sync "^2.0.3"
-    tsconfig-paths "^4.0.0"
+    tsconfck "^3.0.3"
 
-vite@^4.4.12:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.2.tgz#d6ea8610e099851dad8c7371599969e0f8b97e82"
-  integrity sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==
+vite@^5.2.8:
+  version "5.4.8"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.8.tgz#af548ce1c211b2785478d3ba3e8da51e39a287e8"
+  integrity sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==
   dependencies:
-    esbuild "^0.18.10"
-    postcss "^8.4.27"
-    rollup "^3.27.1"
+    esbuild "^0.21.3"
+    postcss "^8.4.43"
+    rollup "^4.20.0"
   optionalDependencies:
-    fsevents "~2.3.2"
+    fsevents "~2.3.3"
 
 vscode-languageserver-types@^3.17.1:
   version "3.17.3"
   resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.17.3.tgz#72d05e47b73be93acb84d6e311b5786390f13f64"
   integrity sha512-SYU4z1dL0PyIMd4Vj8YOqFvHu7Hz/enbWtpfnVbJHU4Nd1YNYx8u0ennumc6h48GQNeOLxmwySmnADouT/AuZA==
 
-vue@>=3:
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.11.tgz#898d97025f73cdb5fc4e3ae3fd07a54615232140"
-  integrity sha512-d4oBctG92CRO1cQfVBZp6WJAs0n8AK4Xf5fNjQCBeKCvMI1efGQ5E3Alt1slFJS9fZuPcFoiAiqFvQlv1X7t/w==
-  dependencies:
-    "@vue/compiler-dom" "3.3.11"
-    "@vue/compiler-sfc" "3.3.11"
-    "@vue/runtime-dom" "3.3.11"
-    "@vue/server-renderer" "3.3.11"
-    "@vue/shared" "3.3.11"
-
 w3c-xmlserializer@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-3.0.0.tgz#06cdc3eefb7e4d0b20a560a5a3aeb0d2d9a65923"
@@ -15900,17 +17612,14 @@ w3c-xmlserializer@^3.0.0:
   dependencies:
     xml-name-validator "^4.0.0"
 
-wagmi@1.4.12:
-  version "1.4.12"
-  resolved "https://registry.yarnpkg.com/wagmi/-/wagmi-1.4.12.tgz#e5d31c6d7621ecd9e32eded6c7b1041201223127"
-  integrity sha512-QRxpjhdMlZmbYTfn9VQkQMKq+l3kwA1O7tF10vaykPrjbGX+IIlyn72ib9oqW9BfQO7n/Sf/mnVz1zbxRhGPWA==
+wagmi@2.14.0:
+  version "2.14.0"
+  resolved "https://registry.yarnpkg.com/wagmi/-/wagmi-2.14.0.tgz#f2d7358b7f29a8a8e012b779d51bf83da269299e"
+  integrity sha512-IO/jPEqHTMAg4/SV4Dg3UR4AeACATyrNprwSpI0FlKEhAjmmNz8N+fa9vI24TUqJ3svLFdA32rjXJvNazeZv9g==
   dependencies:
-    "@tanstack/query-sync-storage-persister" "^4.27.1"
-    "@tanstack/react-query" "^4.28.0"
-    "@tanstack/react-query-persist-client" "^4.28.0"
-    "@wagmi/core" "1.4.12"
-    abitype "0.8.7"
-    use-sync-external-store "^1.2.0"
+    "@wagmi/connectors" "5.6.0"
+    "@wagmi/core" "2.16.0"
+    use-sync-external-store "1.2.0"
 
 walker@^1.0.8:
   version "1.0.8"
@@ -15919,13 +17628,13 @@ walker@^1.0.8:
   dependencies:
     makeerror "1.0.12"
 
-watchpack@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
-  integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==
+weald@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/weald/-/weald-1.0.4.tgz#8858cf9186869deba58357ae10cf26eaada80bb0"
+  integrity sha512-+kYTuHonJBwmFhP1Z4YQK/dGi3jAnJGCYhyODFpHK73rbxnp9lnZQj7a2m+WVgn8fXr5bJaxUpF6l8qZpPeNWQ==
   dependencies:
-    glob-to-regexp "^0.4.1"
-    graceful-fs "^4.1.2"
+    ms "^3.0.0-canary.1"
+    supports-color "^9.4.0"
 
 web-streams-polyfill@^3.0.3:
   version "3.2.1"
@@ -15937,6 +17646,22 @@ web-tree-sitter@=0.20.3:
   resolved "https://registry.yarnpkg.com/web-tree-sitter/-/web-tree-sitter-0.20.3.tgz#3dd17b283ad63b1d8c07c5ea814f0fefb2b1f776"
   integrity sha512-zKGJW9r23y3BcJusbgvnOH2OYAW40MXAOi9bi3Gcc7T4Gms9WWgXF8m6adsJWpGJEhgOzCrfiz1IzKowJWrtYw==
 
+webauthn-p256@0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/webauthn-p256/-/webauthn-p256-0.0.10.tgz#877e75abe8348d3e14485932968edf3325fd2fdd"
+  integrity sha512-EeYD+gmIT80YkSIDb2iWq0lq2zbHo1CxHlQTeJ+KkCILWpVy3zASH3ByD4bopzfk0uCwXxLqKGLqp2W4O28VFA==
+  dependencies:
+    "@noble/curves" "^1.4.0"
+    "@noble/hashes" "^1.4.0"
+
+webauthn-p256@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/webauthn-p256/-/webauthn-p256-0.0.5.tgz#0baebd2ba8a414b21cc09c0d40f9dd0be96a06bd"
+  integrity sha512-drMGNWKdaixZNobeORVIqq7k5DsRC9FnG201K2QjeOoQLmtSDaSsVZdkg6n5jUALJKcAG++zBPJXmv6hy0nWFg==
+  dependencies:
+    "@noble/curves" "^1.4.0"
+    "@noble/hashes" "^1.4.0"
+
 webextension-polyfill-ts@^0.22.0:
   version "0.22.0"
   resolved "https://registry.yarnpkg.com/webextension-polyfill-ts/-/webextension-polyfill-ts-0.22.0.tgz#86cfd7bab4d9d779d98c8340983f4b691b2343f3"
@@ -15951,6 +17676,16 @@ webextension-polyfill-ts@^0.25.0:
   dependencies:
     webextension-polyfill "^0.7.0"
 
+"webextension-polyfill@>=0.10.0 <1.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/webextension-polyfill/-/webextension-polyfill-0.12.0.tgz#f62c57d2cd42524e9fbdcee494c034cae34a3d69"
+  integrity sha512-97TBmpoWJEE+3nFBQ4VocyCdLKfw54rFaJ6EVQYLBCXqCIpLSZkwGgASpv4oPt9gdKCJ80RJlcmNzNn008Ag6Q==
+
+webextension-polyfill@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/webextension-polyfill/-/webextension-polyfill-0.10.0.tgz#ccb28101c910ba8cf955f7e6a263e662d744dbb8"
+  integrity sha512-c5s35LgVa5tFaHhrZDnr3FpQpjj1BB+RXhLTYUxGqBVN460HkbM8TBtEqdXWbpTKfzwCcjAZVF7zXCYSKtcp9g==
+
 webextension-polyfill@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/webextension-polyfill/-/webextension-polyfill-0.7.0.tgz#0df1120ff0266056319ce1a622b09ad8d4a56505"
@@ -15966,19 +17701,23 @@ webidl-conversions@^7.0.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
   integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
 
-webpack-bundle-analyzer@4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.7.0.tgz#33c1c485a7fcae8627c547b5c3328b46de733c66"
-  integrity sha512-j9b8ynpJS4K+zfO5GGwsAcQX4ZHpWV+yRiHDiL+bE0XHJ8NiPYLTNVQdlFYWxtpg9lfAQNlwJg16J9AJtFSXRg==
+webpack-bundle-analyzer@4.10.1:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.1.tgz#84b7473b630a7b8c21c741f81d8fe4593208b454"
+  integrity sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==
   dependencies:
+    "@discoveryjs/json-ext" "0.5.7"
     acorn "^8.0.4"
     acorn-walk "^8.0.0"
-    chalk "^4.1.0"
     commander "^7.2.0"
+    debounce "^1.2.1"
+    escape-string-regexp "^4.0.0"
     gzip-size "^6.0.0"
-    lodash "^4.17.20"
+    html-escaper "^2.0.2"
+    is-plain-object "^5.0.0"
     opener "^1.5.2"
-    sirv "^1.0.7"
+    picocolors "^1.0.0"
+    sirv "^2.0.3"
     ws "^7.3.1"
 
 whatwg-encoding@^2.0.0:
@@ -16020,6 +17759,24 @@ which-boxed-primitive@^1.0.2:
     is-string "^1.0.5"
     is-symbol "^1.0.3"
 
+which-builtin-type@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.1.3.tgz#b1b8443707cc58b6e9bf98d32110ff0c2cbd029b"
+  integrity sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==
+  dependencies:
+    function.prototype.name "^1.1.5"
+    has-tostringtag "^1.0.0"
+    is-async-function "^2.0.0"
+    is-date-object "^1.0.5"
+    is-finalizationregistry "^1.0.2"
+    is-generator-function "^1.0.10"
+    is-regex "^1.1.4"
+    is-weakref "^1.0.2"
+    isarray "^2.0.5"
+    which-boxed-primitive "^1.0.2"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.9"
+
 which-collection@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
@@ -16035,6 +17792,17 @@ which-module@^2.0.0:
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q==
 
+which-typed-array@^1.1.14, which-typed-array@^1.1.15:
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.15.tgz#264859e9b11a649b388bfaaf4f767df1f779b38d"
+  integrity sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-tostringtag "^1.0.2"
+
 which-typed-array@^1.1.2, which-typed-array@^1.1.8, which-typed-array@^1.1.9:
   version "1.1.9"
   resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.9.tgz#307cf898025848cf995e795e8423c7f337efbde6"
@@ -16047,19 +17815,19 @@ which-typed-array@^1.1.2, which-typed-array@^1.1.8, which-typed-array@^1.1.9:
     has-tostringtag "^1.0.0"
     is-typed-array "^1.1.10"
 
-which@^2.0.1, which@^2.0.2:
+which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
   integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
   dependencies:
     isexe "^2.0.0"
 
-word-wrap@^1.2.3, word-wrap@~1.2.3:
+word-wrap@^1.2.5, word-wrap@~1.2.3:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -16077,6 +17845,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
@@ -16099,27 +17876,27 @@ write-file-atomic@^4.0.1:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.7"
 
-ws@7.4.6:
-  version "7.4.6"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
-  integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==
-
-ws@8.12.0, ws@^8.5.0:
-  version "8.12.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.12.0.tgz#485074cc392689da78e1828a9ff23585e06cddd8"
-  integrity sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==
-
 ws@8.13.0:
   version "8.13.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"
   integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==
 
-ws@^7.3.1, ws@^7.4.5, ws@^7.5.1:
-  version "7.5.9"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
-  integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
+ws@8.17.1:
+  version "8.17.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.1.tgz#9293da530bb548febc95371d90f9c878727d919b"
+  integrity sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==
 
-ws@^8.11.0, ws@^8.9.0:
+ws@8.18.0, ws@^8.17.1, ws@^8.9.0:
+  version "8.18.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.0.tgz#0d7505a6eafe2b0e712d232b42279f53bc289bbc"
+  integrity sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==
+
+ws@^7.3.1, ws@^7.5.1:
+  version "7.5.10"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.10.tgz#58b5c20dc281633f6c19113f39b349bd8bd558d9"
+  integrity sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==
+
+ws@~8.11.0:
   version "8.11.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"
   integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==
@@ -16146,6 +17923,11 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
+xmlhttprequest-ssl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"
+  integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
+
 xorshift@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/xorshift/-/xorshift-1.2.0.tgz#30a4cdd8e9f8d09d959ed2a88c42a09c660e8148"
@@ -16190,9 +17972,9 @@ yaml@^1.10.0:
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
 yaml@^2.1.1:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.1.3.tgz#9b3a4c8aff9821b696275c79a8bee8399d945207"
-  integrity sha512-AacA8nRULjKMX2DvWvOAdBZMOfQlypSFkjcOcu9FalllIDJ1kvlREzcdIZmidQUqqeMv7jorHjq2HlLv/+c2lg==
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.4.1.tgz#2e57e0b5e995292c25c75d2658f0664765210eed"
+  integrity sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==
 
 yaml@^2.2.2:
   version "2.3.1"
@@ -16275,9 +18057,7 @@ zod@3.22.4:
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.4.tgz#f31c3a9386f61b1f228af56faa9255e845cf3fff"
   integrity sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==
 
-zustand@^4.3.1:
-  version "4.3.8"
-  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.3.8.tgz#37113df8e9e1421b0be1b2dca02b49b76210e7c4"
-  integrity sha512-4h28KCkHg5ii/wcFFJ5Fp+k1J3gJoasaIbppdgZFO4BPJnsNxL0mQXBSFgOgAdCdBj35aDTPvdAJReTMntFPGg==
-  dependencies:
-    use-sync-external-store "1.2.0"
+zustand@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-5.0.0.tgz#71f8aaecf185592a3ba2743d7516607361899da9"
+  integrity sha512-LE+VcmbartOPM+auOjCCLQOsQ05zUTp8RkgwRzefUk+2jISdMMFnxvyTjA4YNWr5ZGXYbVsEMZosttuxUBkojQ==