feat(wallet): Send Error Improvements with Tooltip

brave · Feb 18, 2022 · d2627ac · d2627ac
1 parent 9a5e4ae
commit d2627ac
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 21 deletions.
diff --git 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
@@ -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 => {
+    if (parseFloat(selectedAssetAmount) === 0 ||
+      selectedAssetAmount === '') {
+      return getLocale('braveWalletZeroBalanceError')
+    }
+    if (toAddressOrUrl === '') {
+      return getLocale('braveWalletAddressRequiredError')
+    }
+    return ''
+  }, [toAddressOrUrl, selectedAssetAmount])
+
   return (
     <StyledWrapper>
       <SwapInputComponent
@@ -111,19 +123,27 @@ function Send (props: Props) {
       {insufficientFundsError &&
         <ErrorText>{getLocale('braveWalletSwapInsufficientBalance')}</ErrorText>
       }
-      <NavButton
-        disabled={addressError !== '' ||
-          toAddressOrUrl === '' ||
+      <Tooltip
+        text={tooltipMessage}
+        isVisible={
           parseFloat(selectedAssetAmount) === 0 ||
           selectedAssetAmount === '' ||
-          insufficientFundsError ||
-          amountValidationError !== undefined
+          toAddressOrUrl === ''
         }
-        buttonType='primary'
-        text={getLocale('braveWalletSend')}
-        onSubmit={onSubmit}
-      />
-
+      >
+        <NavButton
+          disabled={addressError !== '' ||
+            toAddressOrUrl === '' ||
+            parseFloat(selectedAssetAmount) === 0 ||
+            selectedAssetAmount === '' ||
+            insufficientFundsError ||
+            amountValidationError !== undefined
+          }
+          buttonType='primary'
+          text={getLocale('braveWalletSend')}
+          onSubmit={onSubmit}
+        />
+      </Tooltip>
       <ResetButton
         onClick={onReset}
       >

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
@@ -39,7 +39,9 @@ import {
   SlippageInput,
   WarningText,
   AddressConfirmationText,
-  ButtonLeftSide
+  ButtonLeftSide,
+  LearnMoreButton,
+  WarningRow
 } from './style'
 
 import { BubbleContainer } from '../shared-styles'
@@ -230,6 +232,10 @@ function SwapInputComponent (props: Props) {
       .format(6, true)
     : ''
 
+  const onClickLearnMore = () => {
+    window.open('https://support.brave.com/hc/en-us/articles/4441999049101', '_blank')
+  }
+
   return (
     <BubbleContainer>
       {componentType !== 'selector' &&
@@ -372,13 +378,23 @@ function SwapInputComponent (props: Props) {
         <WarningText>{getLocale('braveWalletSlippageToleranceWarning')}</WarningText>
       }
       {componentType === 'toAddress' && addressError &&
-        <WarningText>{addressError}</WarningText>
+        <WarningRow>
+          <WarningText>{addressError}</WarningText>
+          {addressError === getLocale('braveWalletNotValidChecksumAddressError') &&
+            <LearnMoreButton onClick={onClickLearnMore}>
+              {getLocale('braveWalletAllowAddNetworkLearnMoreButton')}
+            </LearnMoreButton>
+          }
+        </WarningRow>
       }
-
       {componentType === 'toAddress' && addressWarning &&
-        <WarningText>{addressWarning}</WarningText>
+        <WarningRow>
+          <WarningText isWarning={true}>{addressWarning}</WarningText>
+          <LearnMoreButton onClick={onClickLearnMore}>
+            {getLocale('braveWalletAllowAddNetworkLearnMoreButton')}
+          </LearnMoreButton>
+        </WarningRow>
       }
-
       {componentType === 'toAddress' && toAddress !== toAddressOrUrl && !addressError &&
         <AddressConfirmationText>{reduceAddress(toAddress ?? '')}</AddressConfirmationText>
       }

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
@@ -12,6 +12,7 @@ interface StyleProps {
   isSelected: boolean
   isSlippage: boolean
   isERC721: boolean
+  isWarning: boolean
 }
 
 export const Row = styled.div<Partial<StyleProps>>`
@@ -275,11 +276,11 @@ export const PasteIcon = styled.div`
   mask-size: 100%;
 `
 
-export const WarningText = styled.span`
+export const WarningText = styled.span<Partial<StyleProps>>`
   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<Partial<StyleProps>>`
+  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
@@ -34,6 +34,7 @@ export const StyledButton = styled(WalletButton) <Partial<StyleProps>>`
     p.buttonType === 'primary' ||
       p.buttonType === 'confirm' ||
       p.buttonType === 'sign' ? '0px' : '8px'};
+  pointer-events: ${(p) => p.disabled ? 'none' : 'auto'};
 `
 
 export const ButtonText = styled.span<Partial<StyleProps>>`

diff --git 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. Proceed?',
+  braveWalletNotValidChecksumAddressError: 'Address did not pass verification. 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
@@ -361,9 +361,11 @@
   <message name="IDS_BRAVE_WALLET_NOT_DOMAIN" desc="Send input not registered domain error">Domain <ph name="DOMAIN_NAME"><ex>doug.wallet</ex>$1</ph> is not registered</message>
   <message name="IDS_BRAVE_WALLET_SAME_ADDRESS_ERROR" desc="Send input trying to send crypto to their own address">The receiving address is your own address</message>
   <message name="IDS_BRAVE_WALLET_CONTRACT_ADDRESS_ERROR" desc="Send input trying to send crypto to a tokens contract address">The receiving address is a token's contract address</message>
-  <message name="IDS_BRAVE_WALLET_ADDRESS_MISSING_CHECKSUM_INFO_WARNING" desc="Send input address missing checksum information">Missing checksum information</message>
-  <message name="IDS_BRAVE_WALLET_NOT_VALID_CHECKSUM_ADDRESS_ERROR" desc="Send input address has invalid checksum information">Invalid checksum information</message>
+  <message name="IDS_BRAVE_WALLET_ADDRESS_MISSING_CHECKSUM_INFO_WARNING" desc="Send input address missing checksum information">This address cannot be verified. Proceed?</message>
+  <message name="IDS_BRAVE_WALLET_NOT_VALID_CHECKSUM_ADDRESS_ERROR" desc="Send input address has invalid checksum information">Address did not pass verification. Please try again, replacing lowercase letters with uppercase.</message>
   <message name="IDS_BRAVE_WALLET_MISSING_GAS_LIMIT_ERROR" desc="Transaction has missing gas limit information">Missing gas limit</message>
+  <message name="IDS_BRAVE_WALLET_ZERO_BALANCE_ERROR" desc="Send amount must be greater than 0 error">Amount must be greater than 0</message>
+  <message name="IDS_BRAVE_WALLET_ADDRESS_REQUIRED_ERROR" desc="Address field is required error">To address is required</message>
   <message name="IDS_BRAVE_WALLET_QUEUE_OF" desc="Confirm Transaction Queue of">of</message>
   <message name="IDS_BRAVE_WALLET_QUEUE_NEXT" desc="Confirm Transaction Queue next">next</message>
   <message name="IDS_BRAVE_WALLET_QUEUE_FIRST" desc="Confirm Transaction Queue first">first</message>