Merge pull request #12697 from brave/add-custom-asset-network-selector

feat(wallet): Add Custom Asset Network Selector

components/brave_wallet_ui/components/desktop/popup-modals/edit-visible-assets-modal/index.tsx

@@ -2,7 +2,8 @@ import * as React from 'react'
 import { BraveWallet } from '../../../../constants/types'
 import {
   PopupModal,
-  AssetWatchlistItem
+  AssetWatchlistItem,
+  SelectNetworkDropdown
 } from '../..'
 import { NavButton } from '../../../extension'
 import { SearchBar } from '../../../shared'
@@ -28,7 +29,9 @@ import {
   SubDivider,
   DividerRow,
   AdvancedButton,
-  AdvancedIcon
+  AdvancedIcon,
+  FormRow,
+  FormColumn
 } from './style'
 
 // Utils
@@ -71,6 +74,7 @@ const EditVisibleAssetsModal = (props: Props) => {
   const [isLoading, setIsLoading] = React.useState<boolean>(false)
   const [hasError, setHasError] = React.useState<boolean>(false)
   const [showTokenIDRequired, setShowTokenIDRequired] = React.useState<boolean>(false)
+  const [showNetworkDropDown, setShowNetworkDropDown] = React.useState<boolean>(false)
 
   // Form States
   const [searchValue, setSearchValue] = React.useState<string>('')
@@ -81,6 +85,7 @@ const EditVisibleAssetsModal = (props: Props) => {
   const [tokenDecimals, setTokenDecimals] = React.useState<string>('')
   const [coingeckoID, setCoingeckoID] = React.useState<string>('')
   const [iconURL, setIconURL] = React.useState<string>('')
+  const [customAssetsNetwork, setCustomAssetsNetwork] = React.useState<BraveWallet.NetworkInfo>(networkList[0])
 
   // If a user removes all of their assets from the userVisibleTokenInfo list,
   // there is a check in the async/lib.ts folder that will still return the networks
@@ -234,16 +239,16 @@ const EditVisibleAssetsModal = (props: Props) => {
       if (foundTokenInfoByContractAddress.isErc721) {
         let token = foundTokenInfoByContractAddress
         token.tokenId = tokenID ? new Amount(tokenID).toHex() : ''
-        token.logo = iconURL
-        token.chainId = selectedNetwork.chainId
+        token.logo = token.logo ? token.logo : iconURL
+        token.chainId = customAssetsNetwork.chainId
         setIsLoading(true)
         onAddCustomAsset(token)
         return
       }
       let foundToken = foundTokenInfoByContractAddress
       foundToken.coingeckoId = coingeckoID !== '' ? coingeckoID : foundTokenInfoByContractAddress.coingeckoId
-      foundToken.logo = iconURL
-      foundToken.chainId = selectedNetwork.chainId
+      foundToken.logo = foundToken.logo ? foundToken.logo : iconURL
+      foundToken.chainId = customAssetsNetwork.chainId
       onAddCustomAsset(foundToken)
     } else {
       const newToken: BraveWallet.BlockchainToken = {
@@ -257,7 +262,7 @@ const EditVisibleAssetsModal = (props: Props) => {
         logo: iconURL,
         visible: true,
         coingeckoId: coingeckoID,
-        chainId: selectedNetwork.chainId
+        chainId: customAssetsNetwork.chainId
       }
       onAddCustomAsset(newToken)
     }
@@ -385,6 +390,21 @@ const EditVisibleAssetsModal = (props: Props) => {
     setShowAdvancedFields(!showAdvancedFields)
   }
 
+  const onShowNetworkDropDown = () => {
+    setShowNetworkDropDown(true)
+  }
+
+  const onHideNetworkDropDown = React.useCallback(() => {
+    if (showNetworkDropDown) {
+      setShowNetworkDropDown(false)
+    }
+  }, [showNetworkDropDown])
+
+  const onSelectNetwork = (network: BraveWallet.NetworkInfo) => () => {
+    setCustomAssetsNetwork(network)
+    onHideNetworkDropDown()
+  }
+
   return (
     <PopupModal
       title={showAddCustomToken
@@ -396,7 +416,7 @@ const EditVisibleAssetsModal = (props: Props) => {
       {showAddCustomToken &&
         <Divider />
       }
-      <StyledWrapper>
+      <StyledWrapper onClick={onHideNetworkDropDown}>
         {(filteredTokenList.length === 0 && searchValue === '') || isLoading ? (
           <LoadingWrapper>
             <LoadIcon />
@@ -405,28 +425,48 @@ const EditVisibleAssetsModal = (props: Props) => {
           <>
             {showAddCustomToken ? (
               <FormWrapper>
-                <InputLabel>{getLocale('braveWalletWatchListTokenName')}</InputLabel>
-                <Input
-                  value={tokenName}
-                  onChange={handleTokenNameChanged}
-                />
-                <InputLabel>{getLocale('braveWalletWatchListTokenAddress')}</InputLabel>
-                <Input
-                  value={tokenContractAddress}
-                  onChange={handleTokenAddressChanged}
-                />
-                <InputLabel>{getLocale('braveWalletWatchListTokenSymbol')}</InputLabel>
-                <Input
-                  value={tokenSymbol}
-                  onChange={handleTokenSymbolChanged}
-                />
-                <InputLabel>{getLocale('braveWalletWatchListTokenDecimals')}</InputLabel>
-                <Input
-                  value={tokenDecimals}
-                  onChange={handleTokenDecimalsChanged}
-                  disabled={isDecimalDisabled}
-                  type='number'
+                <InputLabel>{getLocale('braveWalletSelectNetwork')}</InputLabel>
+                <SelectNetworkDropdown
+                  networkList={networkList}
+                  selectedNetwork={customAssetsNetwork}
+                  onClick={onShowNetworkDropDown}
+                  onSelectNetwork={onSelectNetwork}
+                  showNetworkDropDown={showNetworkDropDown}
                 />
+                <FormRow>
+                  <FormColumn>
+                    <InputLabel>{getLocale('braveWalletWatchListTokenName')}</InputLabel>
+                    <Input
+                      value={tokenName}
+                      onChange={handleTokenNameChanged}
+                    />
+                  </FormColumn>
+                  <FormColumn>
+                    <InputLabel>{getLocale('braveWalletWatchListTokenAddress')}</InputLabel>
+                    <Input
+                      value={tokenContractAddress}
+                      onChange={handleTokenAddressChanged}
+                    />
+                  </FormColumn>
+                </FormRow>
+                <FormRow>
+                  <FormColumn>
+                    <InputLabel>{getLocale('braveWalletWatchListTokenSymbol')}</InputLabel>
+                    <Input
+                      value={tokenSymbol}
+                      onChange={handleTokenSymbolChanged}
+                    />
+                  </FormColumn>
+                  <FormColumn>
+                    <InputLabel>{getLocale('braveWalletWatchListTokenDecimals')}</InputLabel>
+                    <Input
+                      value={tokenDecimals}
+                      onChange={handleTokenDecimalsChanged}
+                      disabled={isDecimalDisabled}
+                      type='number'
+                    />
+                  </FormColumn>
+                </FormRow>
                 <DividerRow>
                   <AdvancedButton onClick={onToggleShowAdvancedFields}>
                     <DividerText>{getLocale('braveWalletWatchListAdvanced')}</DividerText>

components/brave_wallet_ui/components/desktop/popup-modals/edit-visible-assets-modal/style.ts

@@ -97,6 +97,22 @@ export const FormWrapper = styled.div`
   margin-top: 10px;
 `
 
+export const FormRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`
+
+export const FormColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  width: 49%;
+`
+
 export const InputLabel = styled.span`
   font-family: Poppins;
   font-size: 14px;
@@ -108,7 +124,7 @@ export const InputLabel = styled.span`
 
 export const Input = styled.input`
   outline: none;
-  width: 250px;
+  width: 265px;
   background-image: none;
   background-color: ${(p) => p.theme.color.background02};
   box-shadow: none;

components/brave_wallet_ui/components/desktop/select-network-dropdown/index.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react'
 import { BraveWallet } from '../../../constants/types'
-import { SelectNetwork, Tooltip, SelectNetworkButton } from '../../shared'
+import { SelectNetwork } from '../../shared'
 // Styled Components
 import {
   StyledWrapper,
-  DropDown
+  DropDown,
+  NetworkButton,
+  DropDownIcon
 } from './style'
 
 export interface Props {
@@ -20,14 +22,7 @@ function SelectNetworkDropdown (props: Props) {
 
   return (
     <StyledWrapper>
-      <Tooltip
-        text={selectedNetwork.chainName}
-      >
-        <SelectNetworkButton
-          onClick={onClick}
-          selectedNetwork={selectedNetwork}
-        />
-      </Tooltip>
+      <NetworkButton onClick={onClick}>{selectedNetwork.chainName} <DropDownIcon /></NetworkButton>
       {showNetworkDropDown &&
         <DropDown>
           <SelectNetwork

components/brave_wallet_ui/components/desktop/select-network-dropdown/style.ts

@@ -1,31 +1,63 @@
 import styled from 'styled-components'
+import { WalletButton } from '../../shared/style'
+import { CaratStrongDownIcon } from 'brave-ui/components/icons'
 
 export const StyledWrapper = styled.div`
   display: flex;
   width: 100%;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  margin-left: 8px;
   position: relative;
 `
 
+export const NetworkButton = styled(WalletButton)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  background-color: ${(p) => p.theme.color.background02};
+  width: 265px;
+  cursor: pointer;
+  outline: none;
+  background: none;
+  border: ${(p) => `1px solid ${p.theme.color.interactive08}`};
+  border-radius: 4px;
+  font-family: Poppins;
+  font-style: normal;
+  font-size: 13px;
+  line-height: 20px;
+  letter-spacing: 0.01em;
+  padding: 10px;
+  margin-bottom: 8px;
+  color: ${(p) => p.theme.color.text01};
+`
+
+export const DropDownIcon = styled(CaratStrongDownIcon)`
+  width: 18px;
+  height: 18px;
+  color: ${(p) => p.theme.color.interactive07};
+`
+
 export const DropDown = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-conent: center;
   min-width: 275px;
+  max-height: 262px;
   padding: 10px 10px 10px 20px;
   background-color: ${(p) => p.theme.color.background02};
+  border: 1px solid ${(p) => p.theme.color.divider01};
   border-radius: 8px;
   box-shadow: 0px 0px 16px rgba(99, 105, 110, 0.18);
   @media (prefers-color-scheme: dark) {
     box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.36);
   }
-  border: 1px solid ${(p) => p.theme.color.divider01};
   position: absolute;
-  top: 30px;
+  top: 44px;
   left: 0px;
   z-index: 12;
+  overflow-y: scroll;
+  overflow-x: hidden;
  `