Discharge7443/brave-core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #17282 from brave/sell-ui-improvements

Browse Source 
fix(wallet): Sell UI Improvements
This commit is contained in:
Douglas Daniel
2023-02-21 22:07:46 -06:00
committed by GitHub
parent 1f7f5fb947 a71d0a6dcd
commit deff50db9e
9 changed files with 36 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/brave_wallet/browser/brave_wallet_constants.cc
+1 -7
View File
@@ -575,13 +575,7 @@ const std::vector<mojom::BlockchainToken>& GetRampSellTokens() {
{"", "Fantom", "", false, false, false, "FTM", 18, true, "", "",
mojom::kFantomMainnetChainId, mojom::CoinType::ETH},
{"", "Solana", "", false, false, false, "SOL", 9, true, "", "",
mojom::kSolanaMainnet, mojom::CoinType::SOL},
{"Es9vMFrzaCERmJfrF4H2FYD4KCoNkY11McCe8BenwNYB", "Tether", "usdt.png",
true, false, false, "USDT", 6, true, "", "", mojom::kSolanaMainnet,
mojom::CoinType::SOL},
{"EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v", "USD Coin", "usdc.png",
true, false, false, "USDC", 6, true, "", "", mojom::kSolanaMainnet,
mojom::CoinType::SOL}});
mojom::kSolanaMainnet, mojom::CoinType::SOL}});
return *tokens;
}
components/brave_wallet/browser/brave_wallet_constants.h
+1
View File
@@ -768,6 +768,7 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
{"braveWalletBuyWithWyre", IDS_BRAVE_WALLET_BUY_WITH_WYRE},
{"braveWalletBuyWithRamp", IDS_BRAVE_WALLET_BUY_WITH_RAMP},
{"braveWalletSellWithProvider", IDS_BRAVE_WALLET_SELL_WITH_PROVIDER},
{"braveWalletSellMinimumAmount", IDS_BRAVE_WALLET_SELL_MINIMUM_AMOUNT},
{"braveWalletBuyWithSardine", IDS_BRAVE_WALLET_BUY_WITH_SARDINE},
{"braveWalletBuyWithTransak", IDS_BRAVE_WALLET_BUY_WITH_TRANSAK},
{"braveWalletBuyRampNetworkName", IDS_BRAVE_WALLET_BUY_RAMP_NETWORK_NAME},
components/brave_wallet_ui/common/hooks/use-multi-chain-sell-assets.ts
+1 -4
View File
@@ -35,7 +35,6 @@ export const useMultiChainSellAssets = () => {
// State
const [sellAmount, setSellAmount] = React.useState<string>('')
const [selectedSellAsset, setSelectedSellAsset] = React.useState<BraveWallet.BlockchainToken>()
const [showSellModal, setShowSellModal] = React.useState<boolean>(false)
const [options, setOptions] = React.useState<
{
rampAssetOptions: BraveWallet.BlockchainToken[]
@@ -122,8 +121,6 @@ export const useMultiChainSellAssets = () => {
sellAmount,
setSellAmount,
openSellAssetLink,
checkIsAssetSellSupported,
showSellModal,
setShowSellModal
checkIsAssetSellSupported
}
}
components/brave_wallet_ui/components/desktop/popup-modals/sell-asset-modal/sell-asset-modal.tsx
+25 -7
View File
@@ -39,6 +39,8 @@ import {
import { VerticalSpacer, Row } from '../../../shared/style'
const MINIMUM_SELL_THRESHOLD = 50
interface Props {
selectedAsset: BraveWallet.BlockchainToken
selectedAssetsNetwork: BraveWallet.NetworkInfo | undefined
@@ -107,9 +109,20 @@ export const SellAssetModal = (props: Props) => {
return Number(sellAmount) > new Amount(fiatBalance.format(2)).toNumber()
}, [sellAmount, fiatBalance])
const isSellButtonDisabled = React.useMemo(() => {
return sellAmount === '' || insufficientBalance || hasTooManyDecimals
}, [sellAmount, insufficientBalance, hasTooManyDecimals])
// Computed
const meetsMinimumSellThreshold = Number(sellAmount) >= MINIMUM_SELL_THRESHOLD
const isSellButtonDisabled = sellAmount === '' || insufficientBalance || hasTooManyDecimals || !meetsMinimumSellThreshold
const errorMessage = React.useMemo(() => {
if (!meetsMinimumSellThreshold && sellAmount !== '') {
return getLocale('braveWalletSellMinimumAmount').replace('$1', new Amount(MINIMUM_SELL_THRESHOLD).formatAsFiat(defaultCurrencies.fiat))
}
if (insufficientBalance) {
return getLocale('braveWalletNotEnoughBalance').replace('$1', selectedAsset.symbol)
}
return ''
}, [selectedAsset.symbol, meetsMinimumSellThreshold, sellAmount, defaultCurrencies.fiat, insufficientBalance])
// Methods
const handleInputAmountChange = React.useCallback(
@@ -127,17 +140,22 @@ export const SellAssetModal = (props: Props) => {
setSellAmount(fiatBalance.format(2))
}, [fiatBalance])
const onCloseSellModal = React.useCallback(() => {
setSellAmount('')
onClose()
}, [setSellAmount, onClose])
// Hooks
useOnClickOutside(
sellAssetModalRef,
onClose,
onCloseSellModal,
showSellModal
)
return (
<PopupModal
title={`${getLocale('braveWalletSell')} ${selectedAsset.name}`}
onClose={onClose}
onClose={onCloseSellModal}
width='512px'
borderRadius={16}
ref={sellAssetModalRef}
@@ -233,7 +251,7 @@ export const SellAssetModal = (props: Props) => {
</Text>
</Row>
</InputSection>
{insufficientBalance &&
{errorMessage !== '' &&
<ErrorBox>
<ErrorIcon />
<Text
@@ -241,7 +259,7 @@ export const SellAssetModal = (props: Props) => {
isBold={false}
textColor='text01'
>
{getLocale('braveWalletNotEnoughBalance').replace('$1', selectedAsset.symbol)}
{errorMessage}
</Text>
</ErrorBox>
}
components/brave_wallet_ui/components/desktop/views/accounts/account.tsx
+3 -2
View File
@@ -109,14 +109,15 @@ export const Account = ({
// safe selectors
const assetAutoDiscoveryCompleted = useSafeWalletSelector(WalletSelectors.assetAutoDiscoveryCompleted)
// state
const [showSellModal, setShowSellModal] = React.useState<boolean>(false)
// custom hooks
const scrollIntoView = useScrollIntoView()
const {
allSellAssetOptions,
getAllSellAssetOptions,
showSellModal,
setShowSellModal,
selectedSellAsset,
setSelectedSellAsset,
sellAmount,
components/brave_wallet_ui/components/desktop/views/portfolio/components/accounts-and-transctions-list/index.tsx
+1 -2
View File
@@ -76,8 +76,6 @@ export const AccountsAndTransactionsList = ({
// hooks
const {
showSellModal,
setShowSellModal,
allSellAssetOptions,
getAllSellAssetOptions,
checkIsAssetSellSupported,
@@ -89,6 +87,7 @@ export const AccountsAndTransactionsList = ({
// state
const [hideBalances, setHideBalances] = React.useState<boolean>(false)
const [selectedSellAccount, setSelectedSellAccount] = React.useState<WalletAccountType>()
const [showSellModal, setShowSellModal] = React.useState<boolean>(false)
const isNonFungibleToken = React.useMemo(() => {
return selectedAsset?.isErc721 || selectedAsset?.isNft
components/brave_wallet_ui/components/shared/style.tsx
+2
View File
@@ -105,6 +105,7 @@ export const Row = styled.div<FlexProps & {
width?: '100%' | 'unset'
marginBottom?: number
}>`
font-family: 'Poppins';
display: flex;
flex-direction: row;
flex: ${(p) => p.flex ?? 'unset'};
@@ -126,6 +127,7 @@ export const Column = styled.div<FlexProps & {
padding?: number | string
margin?: number | string
}>`
font-family: 'Poppins';
height: ${(p) => p.fullHeight ? '100%' : 'unset'};
width: ${(p) => p.fullWidth ? '100%' : 'unset'};
flex: ${(p) => p.flex ?? 'unset'};
components/brave_wallet_ui/stories/locale.ts
+1
View File
@@ -443,6 +443,7 @@ provideStrings({
braveWalletBuyWithSardine: 'Buy with Sardine',
braveWalletBuyWithTransak: 'Buy with Transak',
braveWalletSellWithProvider: 'Sell with $1',
braveWalletSellMinimumAmount: 'The minimum amount must be $1 or more.',
// Fund Wallet Screen
braveWalletFundWalletTitle: 'To finish your $1 purchase, select one of our partners',
components/resources/wallet_strings.grdp
+1
View File
@@ -522,6 +522,7 @@
<message name="IDS_BRAVE_WALLET_BUY_WITH_WYRE" desc="Buy with Wyre option label">Buy with Wyre</message>
<message name="IDS_BRAVE_WALLET_BUY_WITH_RAMP" desc="Buy with Ramp option label">Buy with Ramp</message>
<message name="IDS_BRAVE_WALLET_SELL_WITH_PROVIDER" desc="Sell with Provider option label">Sell with <ph name="OFFRAMP_PROVIDER">$1<ex>Ramp</ex></ph></message>
<message name="IDS_BRAVE_WALLET_SELL_MINIMUM_AMOUNT" desc="Sell minimum amount alert">The minimum amount must be <ph name="FIAT_AMOUNT">$1<ex>$50</ex></ph> or more.</message>
<message name="IDS_BRAVE_WALLET_BUY_WITH_SARDINE" desc="Buy with Sardine option label">Buy with Sardine</message>
<message name="IDS_BRAVE_WALLET_BUY_WITH_TRANSAK" desc="Buy with Transak option label">Buy with Transak</message>
<message name="IDS_BRAVE_WALLET_BUY_RAMP_NETWORK_NAME" desc="Ramp.Network onramp provider name">Ramp.Network</message>