diff --git a/components/brave_wallet/browser/brave_wallet_constants.cc b/components/brave_wallet/browser/brave_wallet_constants.cc index eae47d28324..04aa9445a9a 100644 --- a/components/brave_wallet/browser/brave_wallet_constants.cc +++ b/components/brave_wallet/browser/brave_wallet_constants.cc @@ -575,13 +575,7 @@ const std::vector& 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; } diff --git a/components/brave_wallet/browser/brave_wallet_constants.h b/components/brave_wallet/browser/brave_wallet_constants.h index be1ba6046ab..ec45c7c4a6c 100644 --- a/components/brave_wallet/browser/brave_wallet_constants.h +++ b/components/brave_wallet/browser/brave_wallet_constants.h @@ -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}, diff --git a/components/brave_wallet_ui/common/hooks/use-multi-chain-sell-assets.ts b/components/brave_wallet_ui/common/hooks/use-multi-chain-sell-assets.ts index 0f800004a48..67350a3f0c7 100644 --- a/components/brave_wallet_ui/common/hooks/use-multi-chain-sell-assets.ts +++ b/components/brave_wallet_ui/common/hooks/use-multi-chain-sell-assets.ts @@ -35,7 +35,6 @@ export const useMultiChainSellAssets = () => { // State const [sellAmount, setSellAmount] = React.useState('') const [selectedSellAsset, setSelectedSellAsset] = React.useState() - const [showSellModal, setShowSellModal] = React.useState(false) const [options, setOptions] = React.useState< { rampAssetOptions: BraveWallet.BlockchainToken[] @@ -122,8 +121,6 @@ export const useMultiChainSellAssets = () => { sellAmount, setSellAmount, openSellAssetLink, - checkIsAssetSellSupported, - showSellModal, - setShowSellModal + checkIsAssetSellSupported } } diff --git a/components/brave_wallet_ui/components/desktop/popup-modals/sell-asset-modal/sell-asset-modal.tsx b/components/brave_wallet_ui/components/desktop/popup-modals/sell-asset-modal/sell-asset-modal.tsx index 2952a9ad191..8c2e9d4a216 100644 --- a/components/brave_wallet_ui/components/desktop/popup-modals/sell-asset-modal/sell-asset-modal.tsx +++ b/components/brave_wallet_ui/components/desktop/popup-modals/sell-asset-modal/sell-asset-modal.tsx @@ -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 ( { - {insufficientBalance && + {errorMessage !== '' && { isBold={false} textColor='text01' > - {getLocale('braveWalletNotEnoughBalance').replace('$1', selectedAsset.symbol)} + {errorMessage} } diff --git a/components/brave_wallet_ui/components/desktop/views/accounts/account.tsx b/components/brave_wallet_ui/components/desktop/views/accounts/account.tsx index df8bce6f67d..a378db2a4df 100644 --- a/components/brave_wallet_ui/components/desktop/views/accounts/account.tsx +++ b/components/brave_wallet_ui/components/desktop/views/accounts/account.tsx @@ -109,14 +109,15 @@ export const Account = ({ // safe selectors const assetAutoDiscoveryCompleted = useSafeWalletSelector(WalletSelectors.assetAutoDiscoveryCompleted) + // state + const [showSellModal, setShowSellModal] = React.useState(false) + // custom hooks const scrollIntoView = useScrollIntoView() const { allSellAssetOptions, getAllSellAssetOptions, - showSellModal, - setShowSellModal, selectedSellAsset, setSelectedSellAsset, sellAmount, diff --git a/components/brave_wallet_ui/components/desktop/views/portfolio/components/accounts-and-transctions-list/index.tsx b/components/brave_wallet_ui/components/desktop/views/portfolio/components/accounts-and-transctions-list/index.tsx index 561fdee42f8..cad7eed7023 100644 --- a/components/brave_wallet_ui/components/desktop/views/portfolio/components/accounts-and-transctions-list/index.tsx +++ b/components/brave_wallet_ui/components/desktop/views/portfolio/components/accounts-and-transctions-list/index.tsx @@ -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(false) const [selectedSellAccount, setSelectedSellAccount] = React.useState() + const [showSellModal, setShowSellModal] = React.useState(false) const isNonFungibleToken = React.useMemo(() => { return selectedAsset?.isErc721 || selectedAsset?.isNft diff --git a/components/brave_wallet_ui/components/shared/style.tsx b/components/brave_wallet_ui/components/shared/style.tsx index 58bc77080f0..62ff8a03478 100644 --- a/components/brave_wallet_ui/components/shared/style.tsx +++ b/components/brave_wallet_ui/components/shared/style.tsx @@ -105,6 +105,7 @@ export const Row = styled.div` + font-family: 'Poppins'; display: flex; flex-direction: row; flex: ${(p) => p.flex ?? 'unset'}; @@ -126,6 +127,7 @@ export const Column = styled.div` + font-family: 'Poppins'; height: ${(p) => p.fullHeight ? '100%' : 'unset'}; width: ${(p) => p.fullWidth ? '100%' : 'unset'}; flex: ${(p) => p.flex ?? 'unset'}; diff --git a/components/brave_wallet_ui/stories/locale.ts b/components/brave_wallet_ui/stories/locale.ts index 960b9e1d18b..ba1e98d8688 100644 --- a/components/brave_wallet_ui/stories/locale.ts +++ b/components/brave_wallet_ui/stories/locale.ts @@ -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', diff --git a/components/resources/wallet_strings.grdp b/components/resources/wallet_strings.grdp index 9604e906236..239b0be05be 100644 --- a/components/resources/wallet_strings.grdp +++ b/components/resources/wallet_strings.grdp @@ -522,6 +522,7 @@ Buy with Wyre Buy with Ramp Sell with $1Ramp + The minimum amount must be $1$50 or more. Buy with Sardine Buy with Transak Ramp.Network