Merge pull request #11500 from brave/remove-header-from-add-and-switch-network-panels-to-match-design

Removed header to match design

Author: muliswilliam

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

@@ -1,8 +1,5 @@
 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 '..'
 
@@ -21,21 +18,15 @@ import {
 
 import {
   StyledWrapper,
-  AccountCircle,
-  AddressAndOrb,
-  AddressText,
   CenterColumn,
   Description,
-  NetworkText,
-  PanelTitle,
-  TopRow
+  PanelTitle
 } from '../shared-panel-styles'
 
 export type tabs = 'network' | 'details'
 
 export interface Props {
   siteOrigin: string
-  selectedNetwork: EthereumChain
   networkPayload: EthereumChain
   panelType: 'add' | 'change'
   onCancel: () => void
@@ -47,36 +38,23 @@ export interface Props {
 function AllowAddChangeNetworkPanel (props: Props) {
   const {
     siteOrigin,
-    selectedNetwork,
     networkPayload,
     panelType,
     onCancel,
     onApproveAddNetwork,
     onApproveChangeNetwork,
     onLearnMore
   } = props
-  const selectedNetworkUrl = selectedNetwork.rpcUrls.length ? (new URL(selectedNetwork.rpcUrls[0])).hostname : ''
   const rpcUrl = networkPayload.rpcUrls.length ? (new URL(networkPayload.rpcUrls[0])).hostname : ''
   const blockUrl = networkPayload.blockExplorerUrls.length ? networkPayload.blockExplorerUrls[0] : ''
 
   const [selectedTab, setSelectedTab] = React.useState<tabs>('network')
-  const orb = React.useMemo(() => {
-    return create({ seed: rpcUrl, size: 8, scale: 16 }).toDataURL()
-  }, [rpcUrl])
-
   const onSelectTab = (tab: tabs) => () => {
     setSelectedTab(tab)
   }
 
   return (
     <StyledWrapper>
-      <TopRow>
-        <NetworkText>{reduceNetworkDisplayName(selectedNetwork.chainName)}</NetworkText>
-        <AddressAndOrb>
-          <AddressText>{reduceAddress(selectedNetworkUrl)}</AddressText>
-          <AccountCircle orb={orb} />
-        </AddressAndOrb>
-      </TopRow>
       <CenterColumn>
         <FavIcon src={`chrome://favicon/size/64@1x/${siteOrigin}`} />
         <URLText>{siteOrigin}</URLText>

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

@@ -54,6 +54,7 @@ export const FavIcon = styled.img`
   border-radius: 5px;
   background-color: ${(p) => p.theme.palette.grey200};
   margin-bottom: 7px;
+  margin-top: 38px;
 `
 
 export const MessageBoxColumn = styled.div`

components/brave_wallet_ui/panel/container.tsx

@@ -574,7 +574,6 @@ function Container (props: Props) {
             onApproveChangeNetwork={onApproveChangeNetwork}
             onCancel={onCancelAddNetwork}
             onLearnMore={onNetworkLearnMore}
-            selectedNetwork={GetNetworkInfo(selectedNetwork.chainId, networkList)}
             networkPayload={networkPayload}
             panelType='add'
           />
@@ -593,7 +592,6 @@ function Container (props: Props) {
             onApproveChangeNetwork={onApproveChangeNetwork}
             onCancel={onCancelChangeNetwork}
             onLearnMore={onNetworkLearnMore}
-            selectedNetwork={GetNetworkInfo(selectedNetwork.chainId, networkList)}
             networkPayload={GetNetworkInfo(switchChainRequest.chainId, networkList)}
             panelType='change'
           />

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

@@ -221,7 +221,6 @@ export const _AllowAddChangeNetwork = () => {
       <AllowAddChangeNetworkPanel
         siteOrigin='https://app.uniswap.org'
         panelType='change'
-        selectedNetwork={mockNetworks[0]}
         onApproveAddNetwork={onApprove}
         onApproveChangeNetwork={onApprove}
         onCancel={onCancel}