Skip to content

Commit

Permalink
feat(wallet): Add Custom Asset Network Selector
Browse files Browse the repository at this point in the history
  • Loading branch information
Douglashdaniel committed Mar 22, 2022
1 parent 3ca77f6 commit cf0c6d0
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 43 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -28,7 +29,9 @@ import {
SubDivider,
DividerRow,
AdvancedButton,
AdvancedIcon
AdvancedIcon,
FormRow,
FormColumn
} from './style'

// Utils
Expand Down Expand Up @@ -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>('')
Expand All @@ -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
Expand Down Expand Up @@ -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 = {
Expand All @@ -257,7 +262,7 @@ const EditVisibleAssetsModal = (props: Props) => {
logo: iconURL,
visible: true,
coingeckoId: coingeckoID,
chainId: selectedNetwork.chainId
chainId: customAssetsNetwork.chainId
}
onAddCustomAsset(newToken)
}
Expand Down Expand Up @@ -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
Expand All @@ -396,7 +416,7 @@ const EditVisibleAssetsModal = (props: Props) => {
{showAddCustomToken &&
<Divider />
}
<StyledWrapper>
<StyledWrapper onClick={onHideNetworkDropDown}>
{(filteredTokenList.length === 0 && searchValue === '') || isLoading ? (
<LoadingWrapper>
<LoadIcon />
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
`

0 comments on commit cf0c6d0

Please sign in to comment.