diff --git a/components/brave_wallet/browser/brave_wallet_constants.h b/components/brave_wallet/browser/brave_wallet_constants.h index 2beef68fe962..0dab69fb9109 100644 --- a/components/brave_wallet/browser/brave_wallet_constants.h +++ b/components/brave_wallet/browser/brave_wallet_constants.h @@ -550,6 +550,9 @@ constexpr webui::LocalizedString kLocalizedStrings[] = { IDS_BRAVE_WALLET_NOT_VALID_CHECKSUM_ADDRESS_ERROR}, {"braveWalletMissingGasLimitError", IDS_BRAVE_WALLET_MISSING_GAS_LIMIT_ERROR}, + {"braveWalletZeroBalanceError", IDS_BRAVE_WALLET_ZERO_BALANCE_ERROR}, + {"braveWalletAddressRequiredError", + IDS_BRAVE_WALLET_ADDRESS_REQUIRED_ERROR}, {"braveWalletQueueOf", IDS_BRAVE_WALLET_QUEUE_OF}, {"braveWalletQueueNext", IDS_BRAVE_WALLET_QUEUE_NEXT}, {"braveWalletQueueFirst", IDS_BRAVE_WALLET_QUEUE_FIRST}, diff --git a/components/brave_wallet_ui/components/buy-send-swap/send/index.tsx b/components/brave_wallet_ui/components/buy-send-swap/send/index.tsx index a73f5ea5e679..4bccaf23e344 100644 --- a/components/brave_wallet_ui/components/buy-send-swap/send/index.tsx +++ b/components/brave_wallet_ui/components/buy-send-swap/send/index.tsx @@ -11,6 +11,7 @@ import { NavButton } from '../../extension' import SwapInputComponent from '../swap-input-component' import { getLocale } from '../../../../common/locale' import { ErrorText, ResetButton } from '../shared-styles' +import { Tooltip } from '../../shared' // Utils import Amount from '../../../utils/amount' @@ -83,6 +84,17 @@ function Send (props: Props) { return amountWei.gt(selectedAssetBalance) }, [selectedAssetBalance, selectedAssetAmount, selectedAsset]) + const tooltipMessage = React.useMemo((): string => { + const amountWrapped = new Amount(selectedAssetAmount) + if (amountWrapped.isUndefined() || amountWrapped.isZero()) { + return getLocale('braveWalletZeroBalanceError') + } + if (toAddressOrUrl === '') { + return getLocale('braveWalletAddressRequiredError') + } + return '' + }, [toAddressOrUrl, selectedAssetAmount]) + return ( {getLocale('braveWalletSwapInsufficientBalance')} } - - + > + + diff --git a/components/brave_wallet_ui/components/buy-send-swap/swap-input-component/index.tsx b/components/brave_wallet_ui/components/buy-send-swap/swap-input-component/index.tsx index 4ad7043270aa..552aaf420bad 100644 --- a/components/brave_wallet_ui/components/buy-send-swap/swap-input-component/index.tsx +++ b/components/brave_wallet_ui/components/buy-send-swap/swap-input-component/index.tsx @@ -39,7 +39,9 @@ import { SlippageInput, WarningText, AddressConfirmationText, - ButtonLeftSide + ButtonLeftSide, + LearnMoreButton, + WarningRow } from './style' import { BubbleContainer } from '../shared-styles' @@ -230,6 +232,14 @@ function SwapInputComponent (props: Props) { .format(6, true) : '' + const onClickLearnMore = () => { + chrome.tabs.create({ url: 'https://support.brave.com/hc/en-us/articles/4441999049101' }, () => { + if (chrome.runtime.lastError) { + console.error('tabs.create failed: ' + chrome.runtime.lastError.message) + } + }) + } + return ( {componentType !== 'selector' && @@ -372,13 +382,23 @@ function SwapInputComponent (props: Props) { {getLocale('braveWalletSlippageToleranceWarning')} } {componentType === 'toAddress' && addressError && - {addressError} + + {addressError} + {addressError === getLocale('braveWalletNotValidChecksumAddressError') && + + {getLocale('braveWalletAllowAddNetworkLearnMoreButton')} + + } + } - {componentType === 'toAddress' && addressWarning && - {addressWarning} + + {addressWarning} + + {getLocale('braveWalletAllowAddNetworkLearnMoreButton')} + + } - {componentType === 'toAddress' && toAddress !== toAddressOrUrl && !addressError && {reduceAddress(toAddress ?? '')} } diff --git a/components/brave_wallet_ui/components/buy-send-swap/swap-input-component/style.ts b/components/brave_wallet_ui/components/buy-send-swap/swap-input-component/style.ts index 47d2335bb858..743085171ee4 100644 --- a/components/brave_wallet_ui/components/buy-send-swap/swap-input-component/style.ts +++ b/components/brave_wallet_ui/components/buy-send-swap/swap-input-component/style.ts @@ -12,6 +12,7 @@ interface StyleProps { isSelected: boolean isSlippage: boolean isERC721: boolean + isWarning: boolean } export const Row = styled.div>` @@ -275,11 +276,11 @@ export const PasteIcon = styled.div` mask-size: 100%; ` -export const WarningText = styled.span` +export const WarningText = styled.span>` font-family: Poppins; letter-spacing: 0.01em; font-size: 12px; - color: ${(p) => p.theme.color.errorText}; + color: ${(p) => p.isWarning ? p.theme.color.warningBorder : p.theme.color.errorText}; word-break: break-word; ` @@ -289,3 +290,26 @@ export const AddressConfirmationText = styled.span` font-size: 12px; color: ${(p) => p.theme.color.text02}; ` + +export const LearnMoreButton = styled(WalletButton)` + cursor: pointer; + outline: none; + background: none; + border: none; + font-family: Poppins; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.01em; + color: ${(p) => p.theme.color.interactive05}; + margin: 0px; + padding: 0px; +` + +export const WarningRow = styled.div>` + display: flex; + width: 100%; + flex-direction: row; + align-items: flex-start; + justify-content: flex-start; + flex-wrap: wrap; +` diff --git a/components/brave_wallet_ui/components/extension/buttons/nav-button/style.ts b/components/brave_wallet_ui/components/extension/buttons/nav-button/style.ts index 83531b3027be..e0976d2be11e 100644 --- a/components/brave_wallet_ui/components/extension/buttons/nav-button/style.ts +++ b/components/brave_wallet_ui/components/extension/buttons/nav-button/style.ts @@ -34,6 +34,7 @@ export const StyledButton = styled(WalletButton) >` p.buttonType === 'primary' || p.buttonType === 'confirm' || p.buttonType === 'sign' ? '0px' : '8px'}; + pointer-events: ${(p) => p.disabled ? 'none' : 'auto'}; ` export const ButtonText = styled.span>` diff --git a/components/brave_wallet_ui/stories/locale.ts b/components/brave_wallet_ui/stories/locale.ts index c5aa5decf288..4431a4a9d84f 100644 --- a/components/brave_wallet_ui/stories/locale.ts +++ b/components/brave_wallet_ui/stories/locale.ts @@ -424,9 +424,11 @@ provideStrings({ braveWalletNotDomain: 'Domain is not registered', braveWalletSameAddressError: 'The receiving address is your own address', braveWalletContractAddressError: 'The receiving address is a tokens contract address', - braveWalletAddressMissingChecksumInfoWarning: 'Missing checksum information', - braveWalletNotValidChecksumAddressError: 'Invalid checksum information', + braveWalletAddressMissingChecksumInfoWarning: 'This address cannot be verified (missing checksum). Proceed?', + braveWalletNotValidChecksumAddressError: 'Address did not pass verification (invalid checksum). Please try again, replacing lowercase letters with uppercase.', braveWalletMissingGasLimitError: 'Missing gas limit', + braveWalletZeroBalanceError: 'Amount must be greater than 0', + braveWalletAddressRequiredError: 'To address is required', // Transaction Queue Strings braveWalletQueueOf: 'of', diff --git a/components/resources/wallet_strings.grdp b/components/resources/wallet_strings.grdp index a5e874ff1ace..9f89c4ebf781 100644 --- a/components/resources/wallet_strings.grdp +++ b/components/resources/wallet_strings.grdp @@ -361,9 +361,11 @@ Domain doug.wallet$1 is not registered The receiving address is your own address The receiving address is a token's contract address - Missing checksum information - Invalid checksum information + This address cannot be verified (missing checksum). Proceed? + Address did not pass verification (invalid checksum). Please try again, replacing lowercase letters with uppercase. Missing gas limit + Amount must be greater than 0 + To address is required of next first