Merge pull request #12200 from brave/network-icon-select-network-button

feat(wallet): Network Icon in Select Network Button
brave · Feb 10, 2022 · 46ba743 · 46ba743
2 parents 77ccfa8 + dc66c83
commit 46ba743
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 104 deletions.
diff --git a/components/brave_wallet_ui/components/buy-send-swap/header/index.tsx b/components/brave_wallet_ui/components/buy-send-swap/header/index.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react'
 import { UserAccountType, BuySendSwapViewTypes, BraveWallet } from '../../../constants/types'
 import { reduceAddress } from '../../../utils/reduce-address'
-import { reduceNetworkDisplayName } from '../../../utils/network-utils'
 import { reduceAccountDisplayName } from '../../../utils/reduce-account-name'
 import { create } from 'ethereum-blockies'
 import { copyToClipboard } from '../../../utils/copy-to-clipboard'
-import { Tooltip } from '../../shared'
+import { Tooltip, SelectNetworkButton } from '../../shared'
 import { getLocale } from '../../../../common/locale'
 // Styled Components
 import {
@@ -15,9 +14,6 @@ import {
   AccountCircle,
   AccountName,
   NameAndIcon,
-  OvalButton,
-  OvalButtonText,
-  CaratDownIcon,
   SwitchIcon
 } from './style'
 
@@ -60,10 +56,10 @@ function SwapHeader (props: Props) {
         </Tooltip>
       </NameAndIcon>
       <Tooltip text={selectedNetwork.chainName}>
-        <OvalButton onClick={onShowNetworks}>
-          <OvalButtonText>{reduceNetworkDisplayName(selectedNetwork.chainName)}</OvalButtonText>
-          <CaratDownIcon />
-        </OvalButton>
+        <SelectNetworkButton
+          selectedNetwork={selectedNetwork}
+          onClick={onShowNetworks}
+        />
       </Tooltip>
     </StyledWrapper >
   )

diff --git a/components/brave_wallet_ui/components/buy-send-swap/header/style.ts b/components/brave_wallet_ui/components/buy-send-swap/header/style.ts
@@ -1,9 +1,6 @@
 import styled from 'styled-components'
 import SwitchDown from '../../../assets/svg-icons/switch-icon.svg'
 import { WalletButton } from '../../shared/style'
-import {
-  CaratCircleODownIcon
-} from 'brave-ui/components/icons'
 
 interface StyleProps {
   orb: string
@@ -68,37 +65,6 @@ export const AccountCircle = styled(WalletButton) <StyleProps>`
   position: relative;
 `
 
-export const CaratDownIcon = styled(CaratCircleODownIcon)`
-  width: 14px;
-  height: 14px;
-  margin-left: 8px;
-  color: ${(p) => p.theme.color.interactive07};
-`
-
-// Will use brave-ui button comp in the future!
-// Currently is missing "tiny" variant
-export const OvalButton = styled(WalletButton)`
-  display: flex;;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  outline: none;
-  background: none;
-  border-radius: 48px;
-  padding: 3px 14px;
-  border: ${(p) => `1px solid ${p.theme.color.interactive08}`};
-  fontSize: 14px;
-`
-
-export const OvalButtonText = styled.span`
-  font-family: Poppins;
-  font-size: 12px;
-  line-height: 18px;
-  letter-spacing: 0.01em;
-  color: ${(p) => p.theme.color.text02};
-  font-weight: 600;
-`
-
 export const SwitchIcon = styled.div`
   width: 14px;
   height: 14px;

diff --git a/components/brave_wallet_ui/components/desktop/select-network-dropdown/index.tsx b/components/brave_wallet_ui/components/desktop/select-network-dropdown/index.tsx
@@ -1,13 +1,9 @@
 import * as React from 'react'
 import { BraveWallet } from '../../../constants/types'
-import { SelectNetwork, Tooltip } from '../../shared'
-import { reduceNetworkDisplayName } from '../../../utils/network-utils'
+import { SelectNetwork, Tooltip, SelectNetworkButton } from '../../shared'
 // Styled Components
 import {
   StyledWrapper,
-  OvalButton,
-  OvalButtonText,
-  CaratDownIcon,
   DropDown
 } from './style'
 
@@ -27,10 +23,10 @@ function SelectNetworkDropdown (props: Props) {
       <Tooltip
         text={selectedNetwork.chainName}
       >
-        <OvalButton onClick={onClick}>
-          <OvalButtonText>{reduceNetworkDisplayName(selectedNetwork.chainName)}</OvalButtonText>
-          <CaratDownIcon />
-        </OvalButton>
+        <SelectNetworkButton
+          onClick={onClick}
+          selectedNetwork={selectedNetwork}
+        />
       </Tooltip>
       {showNetworkDropDown &&
         <DropDown>

diff --git a/components/brave_wallet_ui/components/desktop/select-network-dropdown/style.ts b/components/brave_wallet_ui/components/desktop/select-network-dropdown/style.ts
@@ -1,8 +1,4 @@
 import styled from 'styled-components'
-import {
-  CaratCircleODownIcon
-} from 'brave-ui/components/icons'
-import { WalletButton } from '../../shared/style'
 
 export const StyledWrapper = styled.div`
   display: flex;
@@ -14,37 +10,6 @@ export const StyledWrapper = styled.div`
   position: relative;
 `
 
-export const CaratDownIcon = styled(CaratCircleODownIcon)`
-  width: 14px;
-  height: 14px;
-  margin-left: 8px;
-  color: ${(p) => p.theme.color.interactive07};
-`
-
-// Will use brave-ui button comp in the future!
-// Currently is missing "tiny" variant
-export const OvalButton = styled(WalletButton)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  outline: none;
-  background: none;
-  border-radius: 48px;
-  padding: 3px 14px;
-  border: ${(p) => `1px solid ${p.theme.color.interactive08}`};
-  fontSize: 14px;
-`
-
-export const OvalButtonText = styled.span`
-  font-family: Poppins;
-  font-size: 12px;
-  line-height: 18px;
-  letter-spacing: 0.01em;
-  color: ${(p) => p.theme.color.text02};
-  font-weight: 600;
-`
-
 export const DropDown = styled.div`
   display: flex;
   flex-direction: column;

diff --git a/components/brave_wallet_ui/components/extension/connected-panel/index.tsx b/components/brave_wallet_ui/components/extension/connected-panel/index.tsx
@@ -5,7 +5,7 @@ import {
   ConnectedBottomNav,
   ConnectedHeader
 } from '../'
-import { Tooltip } from '../../shared'
+import { Tooltip, SelectNetworkButton } from '../../shared'
 import {
   formatFiatAmountWithCommasAndDecimals,
   formatTokenAmountWithCommasAndDecimals
@@ -25,7 +25,6 @@ import {
   OvalButton,
   OvalButtonText,
   BigCheckMark,
-  CaratDownIcon,
   StatusRow,
   BalanceColumn,
   SwitchIcon,
@@ -34,7 +33,6 @@ import {
 
 // Utils
 import { reduceAddress } from '../../../utils/reduce-address'
-import { reduceNetworkDisplayName } from '../../../utils/network-utils'
 import { copyToClipboard } from '../../../utils/copy-to-clipboard'
 
 // Hooks
@@ -154,10 +152,11 @@ const ConnectedPanel = (props: Props) => {
             text={selectedNetwork.chainName}
             positionRight={true}
           >
-            <OvalButton onClick={navigate('networks')}>
-              <OvalButtonText>{reduceNetworkDisplayName(selectedNetwork.chainName)}</OvalButtonText>
-              <CaratDownIcon />
-            </OvalButton>
+            <SelectNetworkButton
+              onClick={navigate('networks')}
+              selectedNetwork={selectedNetwork}
+              isPanel={true}
+            />
           </Tooltip>
         </StatusRow>
         <BalanceColumn>

diff --git a/components/brave_wallet_ui/components/extension/connected-panel/style.ts b/components/brave_wallet_ui/components/extension/connected-panel/style.ts
@@ -1,7 +1,6 @@
 import styled from 'styled-components'
 import CheckMark from '../../../assets/svg-icons/big-checkmark.svg'
 import SwitchDown from '../../../assets/svg-icons/switch-icon.svg'
-import { CaratCircleODownIcon } from 'brave-ui/components/icons'
 import { WalletButton } from '../../shared/style'
 
 interface StyleProps {
@@ -102,12 +101,6 @@ export const NotConnectedIcon = styled.div`
   border: 1px solid rgba(255,255,255,0.5);
 `
 
-export const CaratDownIcon = styled(CaratCircleODownIcon)`
-  width: 14px;
-  height: 14px;
-  margin-left: 8px;
-`
-
 export const OvalButton = styled(WalletButton)`
   display: flex;
   align-items: center;
@@ -116,9 +109,8 @@ export const OvalButton = styled(WalletButton)`
   outline: none;
   background: none;
   border-radius: 48px;
-  padding: 3px 14px;
+  padding: 3px 10px;
   border: 1px solid rgba(255,255,255,0.5);
-  fontSize: 14px;
   color: ${(p) => p.theme.palette.white};
   &:disabled {
     cursor: default;

diff --git a/components/brave_wallet_ui/components/shared/index.ts b/components/brave_wallet_ui/components/shared/index.ts
@@ -8,6 +8,7 @@ import SelectNetwork from './select-network'
 import SelectAccount from './select-account'
 import withPlaceholderIcon from './create-placeholder-icon'
 import CreateNetworkIcon from './create-network-icon'
+import SelectNetworkButton from './select-network-button'
 
 export {
   AppListItem,
@@ -19,5 +20,6 @@ export {
   SelectNetwork,
   SelectAccount,
   withPlaceholderIcon,
-  CreateNetworkIcon
+  CreateNetworkIcon,
+  SelectNetworkButton
 }
diff --git a/components/brave_wallet_ui/components/shared/select-network-button/index.tsx b/components/brave_wallet_ui/components/shared/select-network-button/index.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react'
+
+// Types
+import { BraveWallet } from '../../../constants/types'
+
+// Utils
+import { reduceNetworkDisplayName } from '../../../utils/network-utils'
+
+// Components
+import { CreateNetworkIcon } from '../'
+
+// Styled Components
+import {
+  OvalButton,
+  OvalButtonText,
+  CaratDownIcon
+} from './style'
+
+export interface Props {
+  onClick: () => void
+  selectedNetwork: BraveWallet.EthereumChain
+  isPanel?: boolean
+}
+
+const SelectNetworkButton = (props: Props) => {
+  const {
+    onClick,
+    selectedNetwork,
+    isPanel
+  } = props
+  return (
+    <OvalButton isPanel={isPanel} onClick={onClick}>
+      <CreateNetworkIcon network={selectedNetwork} marginRight={4} />
+      <OvalButtonText isPanel={isPanel}>{reduceNetworkDisplayName(selectedNetwork.chainName)}</OvalButtonText>
+      <CaratDownIcon isPanel={isPanel} />
+    </OvalButton>
+  )
+}
+export default SelectNetworkButton
diff --git a/components/brave_wallet_ui/components/shared/select-network-button/style.ts b/components/brave_wallet_ui/components/shared/select-network-button/style.ts
@@ -0,0 +1,35 @@
+import styled from 'styled-components'
+import { CaratCircleODownIcon } from 'brave-ui/components/icons'
+import { WalletButton } from '../../shared/style'
+
+interface StyleProps {
+  isPanel?: boolean
+}
+
+export const CaratDownIcon = styled(CaratCircleODownIcon) <StyleProps>`
+  width: 14px;
+  height: 14px;
+  margin-left: 4px;
+  color: ${(p) => p.isPanel ? p.theme.palette.white : p.theme.color.interactive07};
+`
+
+export const OvalButton = styled(WalletButton) <StyleProps>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  outline: none;
+  background: none;
+  border-radius: 48px;
+  padding: 3px 10px;
+  border: 1px solid ${(p) => p.isPanel ? 'rgba(255,255,255,0.5)' : p.theme.color.interactive08};
+`
+
+export const OvalButtonText = styled.span<StyleProps>`
+  font-family: Poppins;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0.01em;
+  color: ${(p) => p.isPanel ? p.theme.palette.white : p.theme.color.text02};
+  font-weight: 600;
+`