From 6ba6be4baa2f8015f1edcd7c7871f9216555e816 Mon Sep 17 00:00:00 2001
From: Anton Paymyshev <anton.paymyshev@gmail.com>
Date: Thu, 15 Dec 2022 11:51:13 +0700
Subject: [PATCH] Web3 settings section (#16290)

---
 app/brave_generated_resources.grd             |  6 ++
 app/brave_settings_strings.grdp               |  2 +-
 .../brave_default_extensions_browser_proxy.ts | 22 +-----
 .../brave_default_extensions_page.html        | 34 ----------
 .../brave_default_extensions_page.ts          | 29 +-------
 browser/resources/settings/brave_icons.html   |  9 ---
 .../brave_ipfs_page/brave_ipfs_page.html      |  4 +-
 .../brave_ipfs_page/brave_ipfs_page.ts        |  2 +-
 .../settings/brave_overrides/basic_page.ts    | 68 ++++++++++++-------
 .../brave_overrides/page_visibility.ts        |  3 +-
 .../settings/brave_overrides/settings_menu.ts | 28 ++------
 browser/resources/settings/brave_routes.ts    | 10 ++-
 .../brave_web3_domains_browser_proxy.ts       | 40 +++++++++++
 .../brave_web3_domains_page.html              | 45 ++++++++++++
 .../brave_web3_domains_page.ts                | 63 +++++++++++++++++
 browser/resources/settings/sources.gni        | 18 ++---
 ...ave_settings_localized_strings_provider.cc |  2 +
 ...esources-settings-settings_routes.ts.patch |  2 +-
 18 files changed, 233 insertions(+), 154 deletions(-)
 create mode 100644 browser/resources/settings/brave_web3_domains_page/brave_web3_domains_browser_proxy.ts
 create mode 100644 browser/resources/settings/brave_web3_domains_page/brave_web3_domains_page.html
 create mode 100644 browser/resources/settings/brave_web3_domains_page/brave_web3_domains_page.ts

diff --git a/app/brave_generated_resources.grd b/app/brave_generated_resources.grd
index d824f8cc942..40f6ca896d6 100644
--- a/app/brave_generated_resources.grd
+++ b/app/brave_generated_resources.grd
@@ -811,6 +811,12 @@ Or change later at <ph name="SETTINGS_EXTENIONS_LINK">$2<ex>brave://settings/ext
       <message name="IDS_BRAVE_IPFS_SETTINGS_SECTION" desc="Open IPFS settings section">
         IPFS
       </message>
+      <message name="IDS_BRAVE_WEB3_SETTINGS_SECTION" desc="Open Web3 settings section">
+        Web3
+      </message>
+      <message name="IDS_BRAVE_WEB3_DOMAINS_SETTINGS_SECTION" desc="Open Web3 Domains settings section">
+        Web3 Domains
+      </message>
       <message name="IDS_BRAVE_IPFS_LEARN_MORE">
         Learn more about IPFS and privacy
       </message>
diff --git a/app/brave_settings_strings.grdp b/app/brave_settings_strings.grdp
index bb1a74f5b23..82921e371eb 100644
--- a/app/brave_settings_strings.grdp
+++ b/app/brave_settings_strings.grdp
@@ -876,7 +876,7 @@
     The number of minutes to wait until the Brave Wallet is automatically locked
   </message>
   <message name="IDS_SETTINGS_WALLET_NETWORKS_ITEM" desc="The label for opening wallet networks list">
-    Networks
+    Wallet Networks
   </message>
   <message name="IDS_SETTINGS_WALLET_RESET_TRANSACTION_INFO" desc="Reset wallet transactions">
     Clear wallet transaction and nonce information
diff --git a/browser/resources/settings/brave_default_extensions_page/brave_default_extensions_browser_proxy.ts b/browser/resources/settings/brave_default_extensions_page/brave_default_extensions_browser_proxy.ts
index e510d087e8d..c0ca5a1d0e7 100644
--- a/browser/resources/settings/brave_default_extensions_page/brave_default_extensions_browser_proxy.ts
+++ b/browser/resources/settings/brave_default_extensions_page/brave_default_extensions_browser_proxy.ts
@@ -1,7 +1,7 @@
 // Copyright (c) 2022 The Brave Authors. All rights reserved.
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v. 2.0. If a copy of the MPL was not distributed with this file,
-// you can obtain one at https://mozilla.org/MPL/2.0/.
+// You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import {sendWithPromise} from 'chrome://resources/js/cr.m.js'
 import {loadTimeData} from '../i18n_setup.js';
@@ -15,10 +15,6 @@ export interface BraveDefaultExtensionsBrowserProxy  {
   getRestartNeeded(): Promise<boolean>
   wasSignInEnabledAtStartup(): boolean
   isMediaRouterEnabled(): boolean
-  getDecentralizedDnsResolveMethodList(): Promise<any[]> // TODO(petemill): Define type
-  getEnsOffchainResolveMethodList(): Promise<any[]> // TODO(petemill): Define type
-  isENSL2Enabled(): boolean
-  isSnsEnabled(): boolean
 }
 
 export class BraveDefaultExtensionsBrowserProxyImpl implements BraveDefaultExtensionsBrowserProxy {
@@ -54,22 +50,6 @@ export class BraveDefaultExtensionsBrowserProxyImpl implements BraveDefaultExten
     return loadTimeData.getBoolean('isMediaRouterEnabled')
   }
 
-  getDecentralizedDnsResolveMethodList() {
-    return sendWithPromise('getDecentralizedDnsResolveMethodList')
-  }
-
-  getEnsOffchainResolveMethodList() {
-    return sendWithPromise('getEnsOffchainResolveMethodList')
-  }
-
-  isENSL2Enabled() {
-    return loadTimeData.getBoolean('isENSL2Enabled')
-  }
-
-  isSnsEnabled() {
-    return loadTimeData.getBoolean('isSnsEnabled')
-  }
-
   static getInstance(): BraveDefaultExtensionsBrowserProxy {
     return instance || (instance = new BraveDefaultExtensionsBrowserProxyImpl())
   }
diff --git a/browser/resources/settings/brave_default_extensions_page/brave_default_extensions_page.html b/browser/resources/settings/brave_default_extensions_page/brave_default_extensions_page.html
index 2ab37329190..36da14df890 100644
--- a/browser/resources/settings/brave_default_extensions_page/brave_default_extensions_page.html
+++ b/browser/resources/settings/brave_default_extensions_page/brave_default_extensions_page.html
@@ -84,40 +84,6 @@
       </cr-button>
     </template>
 </settings-toggle-button>
-<div class="settings-box">
-  <div class="flex cr-padded-text">
-    <div class="start">$i18n{resolveUnstoppableDomainsDesc}</div>
-    <div class="secondary">$i18nRaw{resolveUnstoppableDomainsSubDesc}</div>
-  </div>
-  <settings-dropdown-menu id="unstoppableDomainsResolveMethodType"
-                          pref="{{prefs.brave.unstoppable_domains.resolve_method}}"
-                          menu-options="[[resolveMethod_]]">
-</div>
-<div class="settings-box">
-  <div class="start">$i18n{resolveENSDesc}</div>
-  <settings-dropdown-menu id="ensResolveMethodType"
-                          pref="{{prefs.brave.ens.resolve_method}}"
-                          on-settings-control-change="updateShowENSOffchainLookupRow_"
-                          menu-options="[[resolveMethod_]]">
-</div>
-<template is="dom-if" if="[[showEnsOffchainLookupRow_]]">
-  <div class="settings-box">
-    <div class="flex cr-padded-text">
-      <div class="start">$i18n{ensOffchainLookupTitle}</div>
-      <div class="secondary">$i18nRaw{ensOffchainLookupDesc}</div>
-    </div>
-    <settings-dropdown-menu id="ensOffchainLookupMethod"
-      pref="{{prefs.brave.ens.offchain_resolve_method}}" menu-options="[[ensOffchainResolveMethod_]]">
-  </div>
-</template>
-<template is="dom-if" if="[[showSnsRow_]]">
-  <div class="settings-box">
-    <div class="start">$i18n{resolveSnsDesc}</div>
-    <settings-dropdown-menu id="snsResolveMethodType"
-                            pref="{{prefs.brave.sns.resolve_method}}"
-                            menu-options="[[resolveMethod_]]">
-  </div>
-</template>
 <settings-toggle-button id="webTorrentEnabled"
     class="cr-row"
     pref="{{prefs.brave.webtorrent_enabled}}"
diff --git a/browser/resources/settings/brave_default_extensions_page/brave_default_extensions_page.ts b/browser/resources/settings/brave_default_extensions_page/brave_default_extensions_page.ts
index 9fd713476c6..b251d1de838 100644
--- a/browser/resources/settings/brave_default_extensions_page/brave_default_extensions_page.ts
+++ b/browser/resources/settings/brave_default_extensions_page/brave_default_extensions_page.ts
@@ -1,12 +1,11 @@
 // Copyright (c) 2022 The Brave Authors. All rights reserved.
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v. 2.0. If a copy of the MPL was not distributed with this file,
-// you can obtain one at https://mozilla.org/MPL/2.0/.
+// You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import { PolymerElement } from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'
 import { WebUIListenerMixin, WebUIListenerMixinInterface } from 'chrome://resources/cr_elements/web_ui_listener_mixin.js'
 import { SettingsCheckboxElement } from '../controls/settings_checkbox.js';
-import { DropdownMenuOptionList } from '../controls/settings_dropdown_menu.js';
 import { loadTimeData } from '../i18n_setup.js';
 import { PrefsMixin, PrefsMixinInterface } from '../prefs/prefs_mixin.js'
 import { BraveDefaultExtensionsBrowserProxyImpl } from './brave_default_extensions_browser_proxy.js'
@@ -24,7 +23,6 @@ export interface SettingBraveDefaultExtensionsPageElement {
   }
 }
 
-
 /**
  * 'settings-brave-default-extensions-page' is the settings page containing
  * brave's default extensions.
@@ -41,13 +39,6 @@ export class SettingBraveDefaultExtensionsPageElement extends SettingBraveDefaul
   static get properties() {
     return {
       showRestartToast_: Boolean,
-      showSnsRow_: Boolean,
-      resolveMethod_: Array,
-      ensOffchainResolveMethod_: Array,
-      showEnsOffchainLookupRow_: {
-        type: Boolean,
-        computed: 'computeShowEnsOffchainLookupRow_(prefs.*)',
-      },
       widevineEnabledPref_: {
         type: Object,
         value() {
@@ -61,29 +52,17 @@ export class SettingBraveDefaultExtensionsPageElement extends SettingBraveDefaul
 
   private browserProxy_ = BraveDefaultExtensionsBrowserProxyImpl.getInstance()
   showRestartToast_: boolean
-  showSnsRow_: boolean
-  resolveMethod_: DropdownMenuOptionList
-  ensOffchainResolveMethod_: DropdownMenuOptionList
   widevineEnabledPref_: chrome.settingsPrivate.PrefObject
 
   override ready() {
     super.ready()
 
-    this.showSnsRow_ = this.browserProxy_.isSnsEnabled()
-
     this.addWebUIListener('brave-needs-restart-changed', (needsRestart: boolean) => {
       this.showRestartToast_ = needsRestart
     })
-
     this.browserProxy_.getRestartNeeded().then(show => {
       this.showRestartToast_ = show
     })
-    this.browserProxy_.getDecentralizedDnsResolveMethodList().then(list => {
-      this.resolveMethod_ = list
-    })
-    this.browserProxy_.getEnsOffchainResolveMethodList().then(list => {
-      this.ensOffchainResolveMethod_ = list
-    })
 
     // PrefControlMixin checks for a pref being valid, so have to fake it,
     // same as upstream.
@@ -137,12 +116,6 @@ export class SettingBraveDefaultExtensionsPageElement extends SettingBraveDefaul
   shouldShowRestartForMediaRouter_(value: boolean) {
     return this.browserProxy_.isMediaRouterEnabled() != value
   }
-
-  computeShowEnsOffchainLookupRow_() {
-    if (!this.browserProxy_.isENSL2Enabled())
-      return false
-    return !!this.prefs && this.getPref('brave.ens.resolve_method').value === 3
-  }
 }
 
 customElements.define(
diff --git a/browser/resources/settings/brave_icons.html b/browser/resources/settings/brave_icons.html
index e7441f720c1..a0b6ee225a4 100644
--- a/browser/resources/settings/brave_icons.html
+++ b/browser/resources/settings/brave_icons.html
@@ -113,15 +113,6 @@ them to chrome://resources and having a common "icons" html
         <path fill-rule="evenodd" clip-rule="evenodd"
           d="M2 5.09032C2 3.93587 2.93587 3 4.09032 3H17.0621C18.3876 3 19.4621 4.07452 19.4621 5.4V5.58065H19.6C20.9255 5.58065 22 6.65516 22 7.98065V18.2C22 19.5255 20.9255 20.6 19.6 20.6H4.4C3.07452 20.6 2 19.5255 2 18.2V5.09032ZM3.6 7.12282V18.2C3.6 18.6418 3.95817 19 4.4 19H19.6C20.0418 19 20.4 18.6418 20.4 18.2V16.6868H14.5517C13.2262 16.6868 12.1517 15.6122 12.1517 14.2868V12.0158C12.1517 10.6903 13.2262 9.61579 14.5517 9.61579H20.4V7.98065C20.4 7.53882 20.0418 7.18064 19.6 7.18064H4.09032C3.92146 7.18064 3.75727 7.16062 3.6 7.12282ZM20.4 11.2158H14.5517C14.1099 11.2158 13.7517 11.574 13.7517 12.0158V14.2868C13.7517 14.7286 14.1099 15.0868 14.5517 15.0868H20.4V11.2158ZM3.6 5.09032C3.6 5.36112 3.81952 5.58065 4.09032 5.58065H17.8621V5.4C17.8621 4.95817 17.5039 4.6 17.0621 4.6H4.09032C3.81953 4.6 3.6 4.81953 3.6 5.09032Z" />
       </g>
-      <g id="ipfs" viewBox="0 0 24 24">
-        <lineargradient id="selectedGradient" gradientTransform="rotate(314.2)">
-          <stop offset="8.49%" stop-color="var(--selected-gradient-color1, currentColor)"></stop>
-          <stop offset="43.72%" stop-color="var(--selected-gradient-color2, currentColor)"></stop>
-          <stop offset="99.51%" stop-color="var(--selected-gradient-color3, currentColor)"></stop>
-        </lineargradient>
-        <path
-          d="M20.5434 7.40622C20.5434 7.38907 20.5348 7.36334 20.5348 7.3462C20.5263 7.26045 20.5005 7.17471 20.4662 7.09754C20.4577 7.08039 20.4662 7.07181 20.4577 7.05466C20.4577 7.04609 20.4491 7.04609 20.4405 7.03751C20.3976 6.95177 20.3376 6.8746 20.2605 6.806C20.2433 6.78885 20.2262 6.78028 20.209 6.76313C20.1747 6.73741 20.149 6.71168 20.1147 6.68596L12.2004 2.11576C11.9346 1.96141 11.6088 1.96141 11.343 2.11576L3.42872 6.69453C3.39443 6.71168 3.36013 6.73741 3.33441 6.76313C3.31726 6.78028 3.30011 6.78885 3.28296 6.806C3.20579 6.8746 3.14577 6.95177 3.10289 7.03751C3.10289 7.04609 3.09432 7.04609 3.08574 7.05466C3.07717 7.07181 3.08574 7.08039 3.07717 7.09754C3.04287 7.17471 3.01715 7.26045 3.00857 7.3462C3.00857 7.36334 3.00857 7.38049 3 7.40622C3 7.41479 3 7.42337 3 7.43194V16.5723C3 16.881 3.16292 17.164 3.42872 17.3183L11.343 21.8885C11.3601 21.8971 11.3859 21.9057 11.403 21.9143C11.4287 21.9228 11.4459 21.9314 11.4716 21.94C11.5659 21.9743 11.6688 22 11.7631 22C11.8574 22 11.9603 21.9743 12.0547 21.94C12.0804 21.9314 12.1061 21.9228 12.1233 21.9143C12.1404 21.9057 12.1661 21.8971 12.1833 21.8885L20.0975 17.3183C20.3633 17.164 20.5263 16.881 20.5263 16.5723V7.43194C20.552 7.42337 20.5434 7.41479 20.5434 7.40622ZM11.7717 3.85638L17.8682 7.37192L11.7717 10.3473L5.68382 7.37192L11.7717 3.85638ZM4.7149 8.80386L10.9143 11.8392V19.6592L4.7149 16.0836V8.80386ZM12.6292 19.6592V11.8392L18.8285 8.80386V16.075L12.6292 19.6592Z" />
-      </g>
       <g id="autofill" viewBox="0 0 24 24">
         <lineargradient id="selectedGradient" gradientTransform="rotate(314.2)">
           <stop offset="8.49%" stop-color="var(--selected-gradient-color1, currentColor)"></stop>
diff --git a/browser/resources/settings/brave_ipfs_page/brave_ipfs_page.html b/browser/resources/settings/brave_ipfs_page/brave_ipfs_page.html
index 7ed39fa312f..04b6ab24264 100644
--- a/browser/resources/settings/brave_ipfs_page/brave_ipfs_page.html
+++ b/browser/resources/settings/brave_ipfs_page/brave_ipfs_page.html
@@ -110,7 +110,7 @@
         role-description="$i18n{subpageArrowRoleDescription}">
       </cr-link-row>
     </div>
-    <template  is="dom-if" route-path="/ipfs/keys">
+    <template is="dom-if" route-path="/ipfs/keys">
       <settings-subpage
         associated-control="[[$$('#p2pKeysLinkRow')]]"
         page-title="$i18n{ipfsIpnsKeysLinkTitle}">
@@ -129,7 +129,7 @@
         role-description="$i18n{subpageArrowRoleDescription}">
       </cr-link-row>
     </div>
-    <template  is="dom-if" route-path="/ipfs/peers">
+    <template is="dom-if" route-path="/ipfs/peers">
       <settings-subpage
         associated-control="[[$$('#ipfsPeersLinkRow')]]"
         page-title="$i18n{ipfsPeersLinkTitle}">
diff --git a/browser/resources/settings/brave_ipfs_page/brave_ipfs_page.ts b/browser/resources/settings/brave_ipfs_page/brave_ipfs_page.ts
index 621eab86dd4..035b237a2e0 100644
--- a/browser/resources/settings/brave_ipfs_page/brave_ipfs_page.ts
+++ b/browser/resources/settings/brave_ipfs_page/brave_ipfs_page.ts
@@ -102,7 +102,7 @@ class SettingsBraveIpfsPageElement extends SettingBraveIpfsPageElementBase {
     this.setupOptionsVisibility()
     if (this.isKeysEditorRoute() && !this.isLocalNodeEnabled_) {
       const router = Router.getInstance()
-      router.navigateTo(router.getRoutes().BRAVE_IPFS)
+      router.navigateTo(router.getRoutes().BRAVE_WEB3)
     }
   }
 
diff --git a/browser/resources/settings/brave_overrides/basic_page.ts b/browser/resources/settings/brave_overrides/basic_page.ts
index 644851447d4..4c8e39fb2c1 100644
--- a/browser/resources/settings/brave_overrides/basic_page.ts
+++ b/browser/resources/settings/brave_overrides/basic_page.ts
@@ -17,6 +17,7 @@ import '../brave_search_engines_page/brave_search_engines_page.js'
 import '../brave_sync_page/brave_sync_page.js'
 import '../brave_tor_page/brave_tor_subpage.js'
 import '../brave_wallet_page/brave_wallet_page.js'
+import '../brave_web3_domains_page/brave_web3_domains_page.js'
 import '../default_brave_shields_page/default_brave_shields_page.js'
 import '../getting_started_page/getting_started.js'
 import '../social_blocking_page/social_blocking_page.js'
@@ -146,8 +147,9 @@ RegisterPolymerTemplateModifications({
       sectionIPFS.setAttribute('is', 'dom-if')
       sectionIPFS.setAttribute('restamp', true)
       sectionIPFS.setAttribute('if', '[[showPage_(pageVisibility.braveIPFS)]]')
-      sectionIPFS.content.appendChild(createSectionElement(
+      sectionIPFS.content.appendChild(createNestedSectionElement(
         'ipfs',
+        'web3',
         'braveIPFS',
         'settings-brave-ipfs-page',
         {
@@ -174,8 +176,9 @@ RegisterPolymerTemplateModifications({
         sectionWallet.setAttribute('is', 'dom-if')
         sectionWallet.setAttribute('restamp', true)
         sectionWallet.setAttribute('if', '[[showPage_(pageVisibility.braveWallet)]]')
-        sectionWallet.content.appendChild(createSectionElement(
+        sectionWallet.content.appendChild(createNestedSectionElement(
           'wallet',
+          'web3',
           'braveWallet',
           'settings-brave-wallet-page',
           {
@@ -183,6 +186,20 @@ RegisterPolymerTemplateModifications({
           }
         ))
       }
+      const sectionWeb3Domains = document.createElement('template')
+      sectionWeb3Domains.setAttribute('is', 'dom-if')
+      sectionWeb3Domains.setAttribute('restamp', true)
+      sectionWeb3Domains.setAttribute('if',
+        '[[showPage_(pageVisibility.braveWeb3Domains)]]')
+      sectionWeb3Domains.content.appendChild(createNestedSectionElement(
+        'web3Domains',
+        'web3',
+        'braveWeb3Domains',
+        'settings-brave-web3-domains-page',
+        {
+          prefs: '{{prefs}}'
+        }
+      ))
       const sectionSync = document.createElement('template')
       sectionSync.setAttribute('is', 'dom-if')
       sectionSync.setAttribute('restamp', true)
@@ -258,40 +275,43 @@ RegisterPolymerTemplateModifications({
         }
       ))
       // Get Started at top
-      basicPageEl.insertAdjacentElement('afterbegin', sectionGetStarted)
+      let last = basicPageEl.insertAdjacentElement('afterbegin',
+        sectionGetStarted)
       // Move Appearance item
-      const sectionAppearance = getSectionElement(actualTemplate.content, 'appearance')
-      sectionGetStarted.insertAdjacentElement('afterend', sectionAppearance)
+      const sectionAppearance = getSectionElement(actualTemplate.content,
+        'appearance')
+      last = last.insertAdjacentElement('afterend', sectionAppearance)
       // Insert New Tab
-      sectionAppearance.insertAdjacentElement('afterend', sectionNewTab)
+      last = last.insertAdjacentElement('afterend', sectionNewTab)
       // Insert shields
-      sectionNewTab.insertAdjacentElement('afterend', sectionShields)
-      // Insert Rewards and Social Blocking
-      if (isBraveRewardsSupported) {
-        sectionShields.insertAdjacentElement('afterend', sectionRewards)
-        sectionRewards.insertAdjacentElement('afterend', sectionSocialBlocking)
-      } else {
-        sectionShields.insertAdjacentElement('afterend', sectionSocialBlocking)
+      last = last.insertAdjacentElement('afterend', sectionShields)
+      // Insert Rewards
+      if (sectionRewards) {
+        last = last.insertAdjacentElement('afterend', sectionRewards)
       }
+      // Insert Social Blocking
+      last = last.insertAdjacentElement('afterend', sectionSocialBlocking)
       // Move privacy section to after social blocking
       const sectionPrivacy = getSectionElement(actualTemplate.content, 'privacy')
-      sectionSocialBlocking.insertAdjacentElement('afterend', sectionPrivacy)
+      last = last.insertAdjacentElement('afterend', sectionPrivacy)
       // Insert sync
-      sectionPrivacy.insertAdjacentElement('afterend', sectionSync)
+      last = last.insertAdjacentElement('afterend', sectionSync)
       // Move search
       const sectionSearch = getSectionElement(actualTemplate.content, 'search')
-      sectionSync.insertAdjacentElement('afterend', sectionSearch)
+      last = last.insertAdjacentElement('afterend', sectionSearch)
       // Insert extensions
-      sectionSearch.insertAdjacentElement('afterend', sectionExtensions)
-      // Insert Wallet and IPFS
-      if (isBraveWalletAllowed) {
-        sectionExtensions.insertAdjacentElement('afterend', sectionWallet)
-        sectionWallet.insertAdjacentElement('afterend', sectionIPFS)
-      } else {
-        sectionExtensions.insertAdjacentElement('afterend', sectionIPFS)
+      last = last.insertAdjacentElement('afterend', sectionExtensions)
+      // Insert Wallet
+      if (sectionWallet) {
+        last = last.insertAdjacentElement('afterend', sectionWallet)
       }
+      // Insert IPFS
+      last = last.insertAdjacentElement('afterend', sectionIPFS)
+      // Insert Web3 Domains
+      last = last.insertAdjacentElement('afterend', sectionWeb3Domains)
       // Insert Tor
-      sectionIPFS.insertAdjacentElement('afterend', sectionTor)
+      last = last.insertAdjacentElement('afterend', sectionTor)
+
       // Advanced
       const advancedTemplate = templateContent.querySelector('template[if="[[showAdvancedSettings_(pageVisibility.advancedSettings)]]"]')
       if (!advancedTemplate) {
diff --git a/browser/resources/settings/brave_overrides/page_visibility.ts b/browser/resources/settings/brave_overrides/page_visibility.ts
index 80614f1f733..aa62e37c925 100644
--- a/browser/resources/settings/brave_overrides/page_visibility.ts
+++ b/browser/resources/settings/brave_overrides/page_visibility.ts
@@ -28,7 +28,8 @@ function getPageVisibility () {
       getStarted: false,
       newTab: false,
       braveIPFS: false,
-      braveWallet: false
+      braveWallet: false,
+      braveWeb3: false
     }
   }
   // We need to specify values for every attribute in pageVisibility instead of
diff --git a/browser/resources/settings/brave_overrides/settings_menu.ts b/browser/resources/settings/brave_overrides/settings_menu.ts
index 69dcd055104..16a30b260a2 100644
--- a/browser/resources/settings/brave_overrides/settings_menu.ts
+++ b/browser/resources/settings/brave_overrides/settings_menu.ts
@@ -297,29 +297,15 @@ RegisterPolymerTemplateModifications({
     )
     searchEl.insertAdjacentElement('afterend', extensionEl)
 
-    const isBraveWalletAllowed = loadTimeData.getBoolean('isBraveWalletAllowed')
-    let walletEl = undefined
-    if (isBraveWalletAllowed) {
-      walletEl = createMenuElement(
-        loadTimeData.getString('braveWallet'),
-        '/wallet',
-        'brave_settings:wallet',
-        'wallet',
-      )
-      extensionEl.insertAdjacentElement('afterend', walletEl)
-    }
 
-    const ipfsEl = createMenuElement(
-      loadTimeData.getString('braveIPFS'),
-      '/ipfs',
-      'brave_settings:ipfs',
-      'ipfs',
+    const web3El = createMenuElement(
+      loadTimeData.getString('braveWeb3'),
+      '/web3',
+      'brave_settings:wallet',
+      'wallet',
     )
-    if (isBraveWalletAllowed) {
-      walletEl.insertAdjacentElement('afterend', ipfsEl)
-    } else {
-      extensionEl.insertAdjacentElement('afterend', ipfsEl)
-    }
+
+    extensionEl.insertAdjacentElement('afterend', web3El)
 
     // Move autofill to advanced
     const autofillEl = getMenuElement(templateContent, '/autofill')
diff --git a/browser/resources/settings/brave_routes.ts b/browser/resources/settings/brave_routes.ts
index 182df4e4bd4..ad896cc6535 100644
--- a/browser/resources/settings/brave_routes.ts
+++ b/browser/resources/settings/brave_routes.ts
@@ -7,8 +7,9 @@
 
 import {pageVisibility} from './brave_overrides/page_visibility.js'
 import {loadTimeData} from './i18n_setup.js'
+import {SettingsRoutes} from './settings_routes.js';
 
-export default function addBraveRoutes(r) {
+export default function addBraveRoutes(r: Partial<SettingsRoutes>) {
   const isGuest = loadTimeData.getBoolean('isGuest')
   if (!r.BASIC) {
     console.error('[Brave Settings Overrides] Routes: could not find BASIC page')
@@ -35,13 +36,16 @@ export default function addBraveRoutes(r) {
     r.BRAVE_SYNC = r.BASIC.createSection('/braveSync', 'braveSync')
     r.BRAVE_SYNC_SETUP = r.BRAVE_SYNC.createChild('/braveSync/setup');
   }
+  if (pageVisibility.braveWeb3) {
+    r.BRAVE_WEB3 = r.BASIC.createSection('/web3', 'web3')
+  }
   if (pageVisibility.braveIPFS) {
-    r.BRAVE_IPFS = r.BASIC.createSection('/ipfs', 'ipfs')
+    r.BRAVE_IPFS = r.BRAVE_WEB3.createSection('/ipfs', 'ipfs')
     r.BRAVE_IPFS_KEYS = r.BRAVE_IPFS.createChild('/ipfs/keys');
     r.BRAVE_IPFS_PEERS = r.BRAVE_IPFS.createChild('/ipfs/peers');
   }
   if (pageVisibility.braveWallet) {
-    r.BRAVE_WALLET = r.BASIC.createSection('/wallet', 'wallet')
+    r.BRAVE_WALLET = r.BRAVE_WEB3.createSection('/wallet', 'wallet')
     r.BRAVE_WALLET_NETWORKS = r.BRAVE_WALLET.createChild('/wallet/networks');
   }
   if (r.ADVANCED) {
diff --git a/browser/resources/settings/brave_web3_domains_page/brave_web3_domains_browser_proxy.ts b/browser/resources/settings/brave_web3_domains_page/brave_web3_domains_browser_proxy.ts
new file mode 100644
index 00000000000..3ac755106d3
--- /dev/null
+++ b/browser/resources/settings/brave_web3_domains_page/brave_web3_domains_browser_proxy.ts
@@ -0,0 +1,40 @@
+// Copyright (c) 2022 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import { sendWithPromise } from 'chrome://resources/js/cr.m.js'
+import { DropdownMenuOptionList } from '../controls/settings_dropdown_menu.js';
+import { loadTimeData } from '../i18n_setup.js';
+
+export interface BraveWeb3DomainsBrowserProxy {
+  getDecentralizedDnsResolveMethodList(): Promise<DropdownMenuOptionList>
+  getEnsOffchainResolveMethodList(): Promise<DropdownMenuOptionList>
+  isENSL2Enabled(): boolean
+  isSnsEnabled(): boolean
+}
+
+export class BraveWeb3DomainsBrowserProxyImpl
+  implements BraveWeb3DomainsBrowserProxy {
+  getDecentralizedDnsResolveMethodList() {
+    return sendWithPromise('getDecentralizedDnsResolveMethodList')
+  }
+
+  getEnsOffchainResolveMethodList() {
+    return sendWithPromise('getEnsOffchainResolveMethodList')
+  }
+
+  isENSL2Enabled() {
+    return loadTimeData.getBoolean('isENSL2Enabled')
+  }
+
+  isSnsEnabled() {
+    return loadTimeData.getBoolean('isSnsEnabled')
+  }
+
+  static getInstance(): BraveWeb3DomainsBrowserProxy {
+    return instance || (instance = new BraveWeb3DomainsBrowserProxyImpl())
+  }
+}
+
+let instance: BraveWeb3DomainsBrowserProxy|null = null
diff --git a/browser/resources/settings/brave_web3_domains_page/brave_web3_domains_page.html b/browser/resources/settings/brave_web3_domains_page/brave_web3_domains_page.html
new file mode 100644
index 00000000000..7a4500c43db
--- /dev/null
+++ b/browser/resources/settings/brave_web3_domains_page/brave_web3_domains_page.html
@@ -0,0 +1,45 @@
+<style include="settings-shared md-select iron-flex">
+  .settings-row:not(:first-child) {
+    border-top: var(--cr-separator-line);
+  }
+
+  .flex {
+    align-self: center;
+    flex: 1 1 auto;
+  }
+</style>
+
+<div class="settings-box">
+  <div class="flex cr-padded-text">
+    <div class="start">$i18n{resolveUnstoppableDomainsDesc}</div>
+    <div class="secondary">$i18nRaw{resolveUnstoppableDomainsSubDesc}</div>
+  </div>
+  <settings-dropdown-menu id="unstoppableDomainsResolveMethodType"
+                          pref="{{prefs.brave.unstoppable_domains.resolve_method}}"
+                          menu-options="[[resolveMethod_]]">
+</div>
+<div class="settings-box">
+  <div class="start">$i18n{resolveENSDesc}</div>
+  <settings-dropdown-menu id="ensResolveMethodType"
+                          pref="{{prefs.brave.ens.resolve_method}}"
+                          on-settings-control-change="updateShowENSOffchainLookupRow_"
+                          menu-options="[[resolveMethod_]]">
+</div>
+<template is="dom-if" if="[[showEnsOffchainLookupRow_]]">
+  <div class="settings-box">
+    <div class="flex cr-padded-text">
+      <div class="start">$i18n{ensOffchainLookupTitle}</div>
+      <div class="secondary">$i18nRaw{ensOffchainLookupDesc}</div>
+    </div>
+    <settings-dropdown-menu id="ensOffchainLookupMethod"
+      pref="{{prefs.brave.ens.offchain_resolve_method}}" menu-options="[[ensOffchainResolveMethod_]]">
+  </div>
+</template>
+<template is="dom-if" if="[[showSnsRow_]]">
+  <div class="settings-box">
+    <div class="start">$i18n{resolveSnsDesc}</div>
+    <settings-dropdown-menu id="snsResolveMethodType"
+                            pref="{{prefs.brave.sns.resolve_method}}"
+                            menu-options="[[resolveMethod_]]">
+  </div>
+</template>
diff --git a/browser/resources/settings/brave_web3_domains_page/brave_web3_domains_page.ts b/browser/resources/settings/brave_web3_domains_page/brave_web3_domains_page.ts
new file mode 100644
index 00000000000..7ef88bc69d7
--- /dev/null
+++ b/browser/resources/settings/brave_web3_domains_page/brave_web3_domains_page.ts
@@ -0,0 +1,63 @@
+// Copyright (c) 2022 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import { PolymerElement } from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'
+import { DropdownMenuOptionList } from '../controls/settings_dropdown_menu.js';
+import { PrefsMixin, PrefsMixinInterface } from '../prefs/prefs_mixin.js'
+import { BraveWeb3DomainsBrowserProxyImpl } from './brave_web3_domains_browser_proxy.js'
+import { getTemplate } from './brave_web3_domains_page.html.js'
+
+const SettingBraveWeb3DomainsPageElementBase = PrefsMixin(PolymerElement) as {
+  new (): PolymerElement & PrefsMixinInterface
+}
+
+export class SettingBraveWeb3DomainsPageElement
+  extends SettingBraveWeb3DomainsPageElementBase {
+  static get is() {
+    return 'settings-brave-web3-domains-page'
+  }
+
+  static get template() {
+    return getTemplate()
+  }
+
+  static get properties() {
+    return {
+      showSnsRow_: Boolean,
+      resolveMethod_: Array,
+      ensOffchainResolveMethod_: Array,
+      showEnsOffchainLookupRow_: {
+        type: Boolean,
+        computed: 'computeShowEnsOffchainLookupRow_(prefs.*)',
+      },
+    }
+  }
+
+  private browserProxy_ = BraveWeb3DomainsBrowserProxyImpl.getInstance()
+  showSnsRow_: boolean
+  resolveMethod_: DropdownMenuOptionList
+  ensOffchainResolveMethod_: DropdownMenuOptionList
+
+  override ready() {
+    super.ready()
+
+    this.showSnsRow_ = this.browserProxy_.isSnsEnabled()
+    this.browserProxy_.getDecentralizedDnsResolveMethodList().then(list => {
+      this.resolveMethod_ = list
+    })
+    this.browserProxy_.getEnsOffchainResolveMethodList().then(list => {
+      this.ensOffchainResolveMethod_ = list
+    })
+  }
+
+  computeShowEnsOffchainLookupRow_() {
+    if (!this.browserProxy_.isENSL2Enabled())
+      return false
+    return !!this.prefs && this.getPref('brave.ens.resolve_method').value === 3
+  }
+}
+
+customElements.define(
+  SettingBraveWeb3DomainsPageElement.is, SettingBraveWeb3DomainsPageElement)
diff --git a/browser/resources/settings/sources.gni b/browser/resources/settings/sources.gni
index d0d5b084a98..af9bef08561 100644
--- a/browser/resources/settings/sources.gni
+++ b/browser/resources/settings/sources.gni
@@ -19,13 +19,13 @@ brave_settings_web_component_files = [
   "brave_clear_browsing_data_dialog/brave_clear_browsing_data_on_exit_page.ts",
   "brave_default_extensions_page/brave_default_extensions_page.ts",
   "brave_help_tips_page/brave_help_tips_page.ts",
+  "brave_ipfs_page/add_ipfs_peer_dialog.ts",
+  "brave_ipfs_page/add_p2p_key_dialog.ts",
   "brave_ipfs_page/brave_ipfs_page.ts",
   "brave_ipfs_page/change_ipfs_gateway_dialog.ts",
-  "brave_ipfs_page/add_p2p_key_dialog.ts",
-  "brave_ipfs_page/rotate_p2p_key_dialog.ts",
-  "brave_ipfs_page/p2p_keys_subpage.ts",
   "brave_ipfs_page/ipfs_peers_subpage.ts",
-  "brave_ipfs_page/add_ipfs_peer_dialog.ts",
+  "brave_ipfs_page/p2p_keys_subpage.ts",
+  "brave_ipfs_page/rotate_p2p_key_dialog.ts",
   "brave_new_tab_page/brave_new_tab_page.ts",
   "brave_privacy_page/brave_personalization_options.ts",
   "brave_rewards_page/brave_rewards_page.ts",
@@ -42,10 +42,11 @@ brave_settings_web_component_files = [
   "brave_wallet_page/brave_wallet_page.ts",
   "brave_wallet_page/wallet_networks_list.ts",
   "brave_wallet_page/wallet_networks_subpage.ts",
-  "default_brave_shields_page/default_brave_shields_page.ts",
+  "brave_web3_domains_page/brave_web3_domains_page.ts",
   "default_brave_shields_page/brave_adblock_subpage.ts",
-  "default_brave_shields_page/components/brave_adblock_subscribe_dropdown.ts",
   "default_brave_shields_page/components/brave_adblock_editor.ts",
+  "default_brave_shields_page/components/brave_adblock_subscribe_dropdown.ts",
+  "default_brave_shields_page/default_brave_shields_page.ts",
   "getting_started_page/getting_started.ts",
   "social_blocking_page/social_blocking_page.ts",
 ]
@@ -74,8 +75,8 @@ brave_settings_non_web_component_files = [
   "brave_overrides/printing_page.ts",
   "brave_overrides/privacy_page.ts",
   "brave_overrides/reset_profile_dialog.ts",
-  "brave_overrides/safety_check.ts",
   "brave_overrides/safety_check_passwords_child.ts",
+  "brave_overrides/safety_check.ts",
   "brave_overrides/search_page.ts",
   "brave_overrides/security_page.ts",
   "brave_overrides/settings_menu.ts",
@@ -89,13 +90,14 @@ brave_settings_non_web_component_files = [
   "brave_privacy_page/brave_privacy_page_browser_proxy.ts",
   "brave_reset_page/brave_reset_profile_dialog_behavior.ts",
   "brave_rewards_page/brave_rewards_browser_proxy.ts",
+  "brave_routes.ts",
   "brave_search_engines_page/brave_search_engines_page_browser_proxy.ts",
   "brave_sync_page/brave_sync_browser_proxy.ts",
   "brave_tor_page/brave_tor_browser_proxy.ts",
   "brave_wallet_page/brave_wallet_browser_proxy.ts",
+  "brave_web3_domains_page/brave_web3_domains_browser_proxy.ts",
   "default_brave_shields_page/brave_adblock_browser_proxy.ts",
   "default_brave_shields_page/default_brave_shields_browser_proxy.ts",
-  "brave_routes.ts",
 ]
 
 if (enable_pin_shortcut) {
diff --git a/browser/ui/webui/settings/brave_settings_localized_strings_provider.cc b/browser/ui/webui/settings/brave_settings_localized_strings_provider.cc
index 7d112ba3492..ab730c8dd92 100644
--- a/browser/ui/webui/settings/brave_settings_localized_strings_provider.cc
+++ b/browser/ui/webui/settings/brave_settings_localized_strings_provider.cc
@@ -272,6 +272,8 @@ void BraveAddCommonStrings(content::WebUIDataSource* html_source,
     {"braveSyncLeaveAndRejoinTheChainButton",
      IDS_BRAVE_SYNC_LEAVE_AND_REJOIN_THE_CHAIN_BUTTON},
     {"braveIPFS", IDS_BRAVE_IPFS_SETTINGS_SECTION},
+    {"braveWeb3", IDS_BRAVE_WEB3_SETTINGS_SECTION},
+    {"braveWeb3Domains", IDS_BRAVE_WEB3_DOMAINS_SETTINGS_SECTION},
     {"braveTor", IDS_BRAVE_TOR_SETTINGS_SECTION},
     {"braveWallet", IDS_BRAVE_WALLET_SETTINGS_SECTION},
     {"braveHelpTips", IDS_SETTINGS_HELP_TIPS},
diff --git a/patches/chrome-browser-resources-settings-settings_routes.ts.patch b/patches/chrome-browser-resources-settings-settings_routes.ts.patch
index 9070486f17d..aae820ef261 100644
--- a/patches/chrome-browser-resources-settings-settings_routes.ts.patch
+++ b/patches/chrome-browser-resources-settings-settings_routes.ts.patch
@@ -6,5 +6,5 @@ index 2bace34bfad3d4b592a15514f6a0075bd611ac72..9db96e5a2e7ec7f8014b4652d190e3d0
    SYNC_ADVANCED: Route;
    SYSTEM: Route;
    TRIGGERED_RESET_DIALOG: Route;
-+  GET_STARTED: Route; SHIELDS: Route; SOCIAL_BLOCKING: Route; REWARDS: Route; EXTENSIONS: Route; BRAVE_SYNC: Route; BRAVE_IPFS: Route; BRAVE_WALLET: Route; BRAVE_HELP_TIPS: Route; BRAVE_NEW_TAB: Route; THEMES: Route;
++  GET_STARTED: Route; SHIELDS: Route; SOCIAL_BLOCKING: Route; REWARDS: Route; EXTENSIONS: Route; BRAVE_SYNC: Route; BRAVE_IPFS: Route; BRAVE_WALLET: Route; BRAVE_WEB3: Route; BRAVE_HELP_TIPS: Route; BRAVE_NEW_TAB: Route; THEMES: Route;
  }