feat(wallet): Enable Panel V2 by Default

browser/ui/webui/brave_wallet/wallet_panel_ui_browsertest.cc

@@ -75,6 +75,10 @@ std::string NeonEVMNetworkChainName() {
   return NeonEVMNetwork() + " .chainName";
 }
 
+std::string DAppSettingsButton() {
+  return R"([data-test-id='dapp-settings-button'])";
+}
+
 std::string NetworksButton() {
   return R"([data-test-id='select-network-button'])";
 }
@@ -108,11 +112,16 @@ bool WaitFor(content::WebContents* web_contents, const std::string& selector) {
 
 bool WaitAndClickElement(content::WebContents* web_contents,
                          const std::string& selector) {
-  if (!WaitFor(web_contents, selector)) {
-    return false;
+  for (int i = 0; i < 10; ++i) {
+    if (!WaitFor(web_contents, selector)) {
+      return false;
+    }
+    auto result = EvalJs(web_contents, selector + ".click()");
+    if (result.value.is_none() && result.error.empty()) {
+      return true;
+    }
   }
-
-  return EvalJs(web_contents, selector + ".click()").value.is_none();
+  return false;
 }
 
 }  // namespace
@@ -248,6 +257,9 @@ IN_PROC_BROWSER_TEST_F(WalletPanelUIBrowserTest, InitialUIRendered) {
 #endif
 IN_PROC_BROWSER_TEST_F(WalletPanelUIBrowserTest, MAYBE_HideNetworkInSettings) {
   ActivateWalletTab();
+  // Wait and click on DApp settings button.
+  ASSERT_TRUE(
+      WaitAndClickElement(wallet(), QuerySelectorJS(DAppSettingsButton())));
   // Wait and click on select network button.
   ASSERT_TRUE(WaitAndClickElement(wallet(), QuerySelectorJS(NetworksButton())));
 
@@ -266,6 +278,9 @@ IN_PROC_BROWSER_TEST_F(WalletPanelUIBrowserTest, MAYBE_HideNetworkInSettings) {
 
   ActivateWalletTab();
   wallet()->GetController().Reload(content::ReloadType::NORMAL, true);
+  // Wait and click on DApp settings button.
+  ASSERT_TRUE(
+      WaitAndClickElement(wallet(), QuerySelectorJS(DAppSettingsButton())));
   // Wait and click on select network button.
   ASSERT_TRUE(WaitAndClickElement(wallet(), QuerySelectorJS(NetworksButton())));
 
@@ -281,6 +296,9 @@ IN_PROC_BROWSER_TEST_F(WalletPanelUIBrowserTest, CustomNetworkInSettings) {
   CreateSettingsTab();
 
   ActivateWalletTab();
+  // Wait and click on DApp settings button.
+  ASSERT_TRUE(
+      WaitAndClickElement(wallet(), QuerySelectorJS(DAppSettingsButton())));
   // Wait and click on select network button.
   ASSERT_TRUE(WaitAndClickElement(wallet(), QuerySelectorJS(NetworksButton())));
 

components/brave_wallet/common/features.cc

@@ -54,7 +54,7 @@ BASE_FEATURE(kBraveWalletNftPinningFeature,
 
 BASE_FEATURE(kBraveWalletPanelV2Feature,
              "BraveWalletPanelV2",
-             base::FEATURE_DISABLED_BY_DEFAULT);
+             base::FEATURE_ENABLED_BY_DEFAULT);
 
 BASE_FEATURE(kBraveWalletBitcoinFeature,
              "BraveWalletBitcoin",

components/brave_wallet_ui/components/extension/dapp-connection-settings/change-network-button.tsx

@@ -26,7 +26,7 @@ import {
 // Styled Components
 import {
   NetworkButton,
-  NameText,
+  NetworkName,
   ActiveIndicator
 } from './dapp-connection-settings.style'
 import {
@@ -55,6 +55,7 @@ export const ChangeNetworkButton = (props: Props) => {
   return (
     <NetworkButton
       onClick={onClick}
+      data-test-chain-id={'chain-' + network.chainId}
     >
       <Row
         width='unset'
@@ -64,12 +65,9 @@ export const ChangeNetworkButton = (props: Props) => {
           marginRight={8}
           size='big'
         />
-        <NameText
-          textSize='14px'
-          isBold={false}
-        >
+        <NetworkName>
           {network.chainName}
-        </NameText>
+        </NetworkName>
       </Row>
       {selectedNetwork?.chainId === network.chainId &&
         <ActiveIndicator>

components/brave_wallet_ui/components/extension/dapp-connection-settings/dapp-connection-main.tsx

@@ -287,6 +287,7 @@ export const DAppConnectionMain = (props: Props) => {
       <VerticalSpace space='8px' />
       <SectionButton
         onClick={() => onSelectOption('networks')}
+        data-test-id='select-network-button'
       >
         <Row
           width='unset'

components/brave_wallet_ui/components/extension/dapp-connection-settings/dapp-connection-settings.style.ts

@@ -22,6 +22,7 @@ export const SettingsButton = styled(WalletButton)`
   margin-right: 16px;
   background-color: transparent;
   position: relative;
+  z-index: 10;
 `
 
 export const ConnectedIcon = styled(Icon) <{
@@ -47,6 +48,16 @@ export const ConnectedText = styled(Text) <{
   line-height: 24px;
 `
 
+export const OverlapForClick = styled.div`
+  display: flex;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  z-index: 11;
+`
+
 export const SettingsBubbleWrapper = styled.div`
   display: flex;
   align-items: flex-end;
@@ -152,6 +163,18 @@ export const NameText = styled(Text)`
   text-align: left;
 `
 
+export const NetworkName = styled.span`
+  font-family: 'Poppins';
+  color: ${leo.color.text.primary};
+  line-height: 24px;
+  word-wrap: wrap;
+  word-break: break-all;
+  text-align: left;
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0.02em;
+`
+
 export const DescriptionText = styled(Text)`
   color: ${leo.color.text.secondary};
   line-height: 18px;

components/brave_wallet_ui/components/extension/dapp-connection-settings/dapp-connection-settings.tsx

@@ -86,7 +86,8 @@ import {
   PointerShadow,
   BackgroundBlur,
   FavIcon,
-  NetworkIconWrapper
+  NetworkIconWrapper,
+  OverlapForClick
 } from './dapp-connection-settings.style'
 
 export type DAppConnectionOptionsType =
@@ -295,7 +296,8 @@ export const DAppConnectionSettings = () => {
   return (
     <>
       <SettingsButton
-        onMouseDown={() => setShowSettings(prev => !prev)}
+        onClick={() => setShowSettings(prev => !prev)}
+        data-test-id='dapp-settings-button'
       >
         <ConnectedIcon
           name={
@@ -321,6 +323,7 @@ export const DAppConnectionSettings = () => {
       </SettingsButton>
       {showSettings &&
         <>
+          <OverlapForClick />
           <SettingsBubbleWrapper>
             <Pointer />
             <PointerShadow />