Merge pull request #10832 from brave/pr10823_switch-evm-networks-ui_1.32.x

Built Out Switch EVM Network Panel UI (uplift to 1.32.x)

Author: kjozwiak

components/brave_wallet/browser/brave_wallet_constants.h

@@ -322,6 +322,12 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
      IDS_BRAVE_WALLET_ALLOW_SPEND_PROPOSED_ALLOWANCE},
     {"braveWalletAllowAddNetworkTitle",
      IDS_BRAVE_WALLET_ALLOW_ADD_NETWORK_TITLE},
+    {"braveWalletAllowChangeNetworkTitle",
+     IDS_BRAVE_WALLET_ALLOW_CHANGE_NETWORK_TITLE},
+    {"braveWalletAllowChangeNetworkDescription",
+     IDS_BRAVE_WALLET_ALLOW_CHANGE_NETWORK_DESCRIPTION},
+    {"braveWalletAllowChangeNetworkButton",
+     IDS_BRAVE_WALLET_ALLOW_CHANGE_NETWORK_BUTTON},
     {"braveWalletAllowAddNetworkDescription",
      IDS_BRAVE_WALLET_ALLOW_ADD_NETWORK_DESCRIPTION},
     {"braveWalletAllowAddNetworkLearnMoreButton",
@@ -330,8 +336,8 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
     {"braveWalletAllowAddNetworkUrl", IDS_BRAVE_WALLET_ALLOW_ADD_NETWORK_URL},
     {"braveWalletAllowAddNetworkDetailsButton",
      IDS_BRAVE_WALLET_ALLOW_ADD_NETWORK_DETAILS_BUTTON},
-    {"braveWalletAllowAddNetworkApproveButton",
-     IDS_BRAVE_WALLET_ALLOW_ADD_NETWORK_APPROVE_BUTTON},
+    {"braveWalletAllowAddNetworkButton",
+     IDS_BRAVE_WALLET_ALLOW_ADD_NETWORK_BUTTON},
     {"braveWalletAllowAddNetworkChainID",
      IDS_BRAVE_WALLET_ALLOW_ADD_NETWORK_CHAIN_I_D},
     {"braveWalletAllowAddNetworkCurrencySymbol",

components/brave_wallet_ui/components/extension/allow-add-network-panel/index.tsx renamed to components/brave_wallet_ui/components/extension/allow-add-change-network-panel/index.tsx

@@ -2,8 +2,9 @@ import * as React from 'react'
 import { create } from 'ethereum-blockies'
 import { EthereumChain } from '../../../constants/types'
 import { reduceAddress } from '../../../utils/reduce-address'
+import { reduceNetworkDisplayName } from '../../../utils/network-utils'
 import { getLocale } from '../../../../common/locale'
-import { NavButton, PanelTab } from '../'
+import { NavButton, PanelTab } from '..'
 
 // Styled Components
 import {
@@ -33,17 +34,23 @@ import {
 export type tabs = 'network' | 'details'
 
 export interface Props {
+  siteOrigin: string
   networkPayload: EthereumChain
+  panelType: 'add' | 'change'
   onCancel: () => void
-  onApprove: () => void
+  onApproveAddNetwork: () => void
+  onApproveChangeNetwork: () => void
   onLearnMore: () => void
 }
 
-function AllowAddNetworkPanel (props: Props) {
+function AllowAddChangeNetworkPanel (props: Props) {
   const {
+    siteOrigin,
     networkPayload,
+    panelType,
     onCancel,
-    onApprove,
+    onApproveAddNetwork,
+    onApproveChangeNetwork,
     onLearnMore
   } = props
   const rpcUrl = networkPayload.rpcUrls ? (new URL(networkPayload.rpcUrls[0])).hostname : ''
@@ -61,17 +68,33 @@ function AllowAddNetworkPanel (props: Props) {
   return (
     <StyledWrapper>
       <TopRow>
-        <NetworkText>{networkPayload.chainName}</NetworkText>
+        <NetworkText>{reduceNetworkDisplayName(networkPayload.chainName)}</NetworkText>
         <AddressAndOrb>
           <AddressText>{reduceAddress(rpcUrl)}</AddressText>
           <AccountCircle orb={orb} />
         </AddressAndOrb>
       </TopRow>
       <CenterColumn>
-        <FavIcon src='' />
-        <URLText>{rpcUrl}</URLText>
-        <PanelTitle>{getLocale('braveWalletAllowAddNetworkTitle')}</PanelTitle>
-        <Description>{getLocale('braveWalletAllowAddNetworkDescription')} <DetailsButton onClick={onLearnMore}>{getLocale('braveWalletAllowAddNetworkLearnMoreButton')}</DetailsButton></Description>
+        <FavIcon src={`chrome://favicon/size/64@1x/${siteOrigin}`} />
+        <URLText>{siteOrigin}</URLText>
+        <PanelTitle>
+          {panelType === 'change'
+            ? getLocale('braveWalletAllowChangeNetworkTitle')
+            : getLocale('braveWalletAllowAddNetworkTitle')
+          }
+        </PanelTitle>
+        <Description>
+          {panelType === 'change'
+            ? getLocale('braveWalletAllowChangeNetworkDescription')
+            : getLocale('braveWalletAllowAddNetworkDescription')}{' '}
+          {panelType === 'add' &&
+            <DetailsButton
+              onClick={onLearnMore}
+            >
+              {getLocale('braveWalletAllowAddNetworkLearnMoreButton')}
+            </DetailsButton>
+          }
+        </Description>
         <TabRow>
           <PanelTab
             isSelected={selectedTab === 'network'}
@@ -119,12 +142,20 @@ function AllowAddNetworkPanel (props: Props) {
         />
         <NavButton
           buttonType='confirm'
-          text={getLocale('braveWalletAllowAddNetworkApproveButton')}
-          onSubmit={onApprove}
+          text={
+            panelType === 'change'
+              ? getLocale('braveWalletAllowChangeNetworkButton')
+              : getLocale('braveWalletAllowAddNetworkButton')
+          }
+          onSubmit={
+            panelType === 'add'
+              ? onApproveAddNetwork
+              : onApproveChangeNetwork
+          }
         />
       </ButtonRow>
     </StyledWrapper>
   )
 }
 
-export default AllowAddNetworkPanel
+export default AllowAddChangeNetworkPanel

components/brave_wallet_ui/components/extension/allow-add-network-panel/style.ts renamed to components/brave_wallet_ui/components/extension/allow-add-change-network-panel/style.ts

@@ -10,7 +10,7 @@ import WelcomePanel from './welcome-panel'
 import Panel from './panel'
 import PanelHeader from './panel-header'
 import SignPanel from './sign-panel'
-import AllowAddNetworkPanel from './allow-add-network-panel'
+import AllowAddChangeNetworkPanel from './allow-add-change-network-panel'
 import ConfirmTransactionPanel from './confirm-transaction-panel'
 import PanelTab from './panel-tab'
 import ConnectHardwareWalletPanel from './connect-hardware-wallet-panel'
@@ -34,7 +34,7 @@ export {
   PanelHeader,
   WelcomePanel,
   SignPanel,
-  AllowAddNetworkPanel,
+  AllowAddChangeNetworkPanel,
   ConfirmTransactionPanel,
   PanelTab,
   TransactionDetailBox,

components/brave_wallet_ui/components/extension/index.ts

@@ -70,6 +70,7 @@ export const PanelTitle = styled.span`
   line-height: 20px;
   letter-spacing: 0.04em;
   text-align: center;
+  width: 90%;
   color: ${(p) => p.theme.color.text01};
   font-weight: 600;
   margin-bottom: 6px;

components/brave_wallet_ui/components/extension/shared-panel-styles.ts

@@ -12,7 +12,7 @@ import {
   Panel,
   WelcomePanel,
   SignPanel,
-  AllowAddNetworkPanel,
+  AllowAddChangeNetworkPanel,
   ConfirmTransactionPanel,
   ConnectHardwareWalletPanel,
   SitePermissions
@@ -396,6 +396,10 @@ function Container (props: Props) {
     props.walletPanelActions.addEthereumChainRequestCompleted({ chainId: networkPayload.chainId, approved: true })
   }
 
+  const onApproveChangeNetwork = () => {
+    // Logic here to approve changing networks
+  }
+
   const onCancelAddNetwork = () => {
     props.walletPanelActions.addEthereumChainRequestCompleted({ chainId: networkPayload.chainId, approved: false })
   }
@@ -527,11 +531,14 @@ function Container (props: Props) {
     return (
       <PanelWrapper isLonger={true}>
         <LongWrapper>
-          <AllowAddNetworkPanel
-            onApprove={onApproveAddNetwork}
+          <AllowAddChangeNetworkPanel
+            siteOrigin={activeOrigin}
+            onApproveAddNetwork={onApproveAddNetwork}
+            onApproveChangeNetwork={onApproveChangeNetwork}
             onCancel={onCancelAddNetwork}
             onLearnMore={onNetworkLearnMore}
             networkPayload={networkPayload}
+            panelType='add'
           />
         </LongWrapper>
       </PanelWrapper>

components/brave_wallet_ui/panel/container.tsx

@@ -270,17 +270,20 @@ provideStrings({
   braveWalletAllowSpendRejectButton: 'Reject',
   braveWalletAllowSpendConfirmButton: 'Confirm',
 
-  // Allow Add Network Panel
+  // Allow Add or Change Network Panel
   braveWalletAllowAddNetworkTitle: 'Allow this site to add a network?',
   braveWalletAllowAddNetworkDescription: 'This will allow this network to be used within Brave Wallet.',
   braveWalletAllowAddNetworkLearnMoreButton: 'Learn more.',
   braveWalletAllowAddNetworkName: 'Network name',
   braveWalletAllowAddNetworkUrl: 'Network URL',
   braveWalletAllowAddNetworkDetailsButton: 'View all details',
-  braveWalletAllowAddNetworkApproveButton: 'Approve',
+  braveWalletAllowAddNetworkButton: 'Approve',
   braveWalletAllowAddNetworkChainID: 'Chain ID',
   braveWalletAllowAddNetworkCurrencySymbol: 'Currency symbol',
   braveWalletAllowAddNetworkExplorer: 'Block explorer URL',
+  braveWalletAllowChangeNetworkTitle: 'Allow this site to switch the network?',
+  braveWalletAllowChangeNetworkDescription: 'This will switch the network to a previously added network.',
+  braveWalletAllowChangeNetworkButton: 'Switch network',
 
   // Confirm Transaction Panel
   braveWalletConfirmTransactionTotal: 'Total',

components/brave_wallet_ui/stories/locale.ts

@@ -7,7 +7,7 @@ import {
   Panel,
   WelcomePanel,
   SignPanel,
-  AllowAddNetworkPanel,
+  AllowAddChangeNetworkPanel,
   ConfirmTransactionPanel,
   ConnectHardwareWalletPanel,
   SitePermissions
@@ -194,10 +194,10 @@ _ConfirmTransaction.story = {
   name: 'Confirm Transaction'
 }
 
-export const _AllowAddNetwork = () => {
+export const _AllowAddChangeNetwork = () => {
 
   const onApprove = () => {
-    alert('Approved Adding Network')
+    alert('Will Approve adding or chainging networks')
   }
 
   const onCancel = () => {
@@ -210,8 +210,11 @@ export const _AllowAddNetwork = () => {
 
   return (
     <StyledExtensionWrapperLonger>
-      <AllowAddNetworkPanel
-        onApprove={onApprove}
+      <AllowAddChangeNetworkPanel
+        siteOrigin='https://app.uniswap.org'
+        panelType='change'
+        onApproveAddNetwork={onApprove}
+        onApproveChangeNetwork={onApprove}
         onCancel={onCancel}
         networkPayload={mockNetworks[0]}
         onLearnMore={onLearnMore}
@@ -220,8 +223,8 @@ export const _AllowAddNetwork = () => {
   )
 }
 
-_AllowAddNetwork.story = {
-  name: 'Allow Add Network'
+_AllowAddChangeNetwork.story = {
+  name: 'Allow Add or Change Network'
 }
 
 export const _SignData = () => {

components/brave_wallet_ui/stories/wallet-extension-panels.tsx

@@ -226,10 +226,13 @@
     <message name="IDS_BRAVE_WALLET_ALLOW_ADD_NETWORK_NAME" desc="Add network panel name label">Network name</message>
     <message name="IDS_BRAVE_WALLET_ALLOW_ADD_NETWORK_URL" desc="Add network panel url label">Network URL</message>
     <message name="IDS_BRAVE_WALLET_ALLOW_ADD_NETWORK_DETAILS_BUTTON" desc="Add network panel all details button">View all details</message>
-    <message name="IDS_BRAVE_WALLET_ALLOW_ADD_NETWORK_APPROVE_BUTTON" desc="Add network panel approve button">Approve</message>
+    <message name="IDS_BRAVE_WALLET_ALLOW_ADD_NETWORK_BUTTON" desc="Add network panel button">Approve</message>
     <message name="IDS_BRAVE_WALLET_ALLOW_ADD_NETWORK_CHAIN_I_D" desc="Add network panel chain id label">Chain ID</message>
     <message name="IDS_BRAVE_WALLET_ALLOW_ADD_NETWORK_CURRENCY_SYMBOL" desc="Add network panel symbol label">Currency symbol</message>
     <message name="IDS_BRAVE_WALLET_ALLOW_ADD_NETWORK_EXPLORER" desc="Add network explorer label">Block explorer URL</message>
+    <message name="IDS_BRAVE_WALLET_ALLOW_CHANGE_NETWORK_TITLE" desc="Change network panel title">Allow this site to switch the network?</message>
+    <message name="IDS_BRAVE_WALLET_ALLOW_CHANGE_NETWORK_DESCRIPTION" desc="Change network panel description">This will switch the network to a previously added network.</message>
+    <message name="IDS_BRAVE_WALLET_ALLOW_CHANGE_NETWORK_BUTTON" desc="Change network panel button">Switch network</message> 
     <message name="IDS_BRAVE_WALLET_CONFIRM_TRANSACTION_TOTAL" desc="Confirm transaction panel total label">Total</message>
     <message name="IDS_BRAVE_WALLET_CONFIRM_TRANSACTION_GAS_FEE" desc="Confirm transaction panel label">Gas fee</message>
     <message name="IDS_BRAVE_WALLET_CONFIRM_TRANSACTION_BID" desc="Confirm transaction panel bid label">Bid</message>