feat(wallet): Enable Panel V2 by Default

brave · Aug 18, 2023 · a5292f2 · a5292f2
1 parent e474398
commit a5292f2
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 9 deletions.
diff --git a/browser/ui/webui/brave_wallet/wallet_panel_ui_browsertest.cc b/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'])";
 }
@@ -248,6 +252,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 +273,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 +291,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())));
 

diff --git a/components/brave_wallet/common/features.cc b/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",

diff --git a/...s/brave_wallet_ui/components/extension/dapp-connection-settings/change-network-button.tsx b/...s/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>

diff --git a/...ts/brave_wallet_ui/components/extension/dapp-connection-settings/dapp-connection-main.tsx b/...ts/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'

diff --git a/...wallet_ui/components/extension/dapp-connection-settings/dapp-connection-settings.style.ts b/...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;

diff --git a/...rave_wallet_ui/components/extension/dapp-connection-settings/dapp-connection-settings.tsx b/...rave_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 />