Optimise error messages (claim)

src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx

@@ -10,6 +10,7 @@ import {
   InvestInput,
   InvestAvailableBar,
   UnderlineButton,
+  UserMessage,
   WarningWrapper,
 } from '../styled'
 import { formatMax, formatSmartLocaleAware } from 'utils/format'
@@ -35,24 +36,27 @@ import { EnhancedUserClaimData } from '../types'
 import { OperationType } from 'components/TransactionConfirmationModal'
 import { ONE_HUNDRED_PERCENT } from 'constants/misc'
 import { IS_TESTING_ENV } from '../const'
+import ImportantIcon from 'assets/cow-swap/important.svg'
+import SVG from 'react-inlinesvg'
 
 const ErrorMessages = {
-  NoBalance: (symbol = '') => `You don't have ${symbol} balance to invest`,
+  NoBalance: (symbol = '') =>
+    `You don't have ${symbol} balance to invest. Add sufficient ${symbol} balance or go back and uncheck ${symbol} as an investment option.`,
 
   InsufficientBalanceSelf: (symbol = '') => `Insufficient ${symbol} balance to cover investment amount`,
   InsufficientBalanceBehalf: (symbol = '') =>
     `Your ${symbol} balance is not enough to cover 100% of the investment amount.`,
 
-  OverMaxInvestment: `Your investment amount can't be above the maximum investment allowed`,
-  InvestmentIsZero: `Your investment amount can't be zero`,
+  OverMaxInvestment: `Your investment amount can not be above the maximum investment allowed`,
+  InvestmentIsZero: `Your investment amount can not be zero`,
   NotApproved: (symbol = '') => `Please approve ${symbol} token`,
-  WaitForApproval: (symbol = '') => `Approving ${symbol}. Please wait until the transaction is mined`,
+  WaitForApproval: (symbol = '') => `Approving ${symbol}. Please wait until the transaction is mined.`,
 }
 
 const WarningMessages = {
   InsufficientNativeBalance: (symbol = '', amount = '') =>
     `You might not have enough ${symbol} to pay for the network transaction fee (estimated ${amount} ${symbol})`,
-  NotMaxInvested: `Beware you won't be able to increase this amount after executing your transaction`,
+  NotMaxInvested: `Please note: after executing the transaction in the last step, you will not be able to invest anymore.`,
 }
 
 type InvestOptionProps = {
@@ -430,13 +434,19 @@ export default function InvestOption({ claim, optionIndex, openModal, closeModal
               Receive: {formatSmartLocaleAware(vCowAmount, AMOUNT_PRECISION) || 0} vCOW
             </i>
             {/* Insufficient balance validation error */}
-            {inputError && <small>{inputError}</small>}
+            {inputError && (
+              <UserMessage variant="danger">
+                <SVG src={ImportantIcon} description="Warning" />
+                <span>{inputError}</span>
+              </UserMessage>
+            )}
             {inputWarnings.length ? (
               <WarningWrapper>
                 {inputWarnings.map((warning) => (
-                  <small key={warning} className="warn">
-                    {warning}
-                  </small>
+                  <UserMessage key={warning} variant="info">
+                    <SVG src={ImportantIcon} description="Information" />
+                    <span>{warning}</span>
+                  </UserMessage>
                 ))}
               </WarningWrapper>
             ) : null}

src/custom/pages/Claim/InvestmentFlow/InvestSummaryRow.tsx

@@ -1,11 +1,13 @@
 import { ClaimType } from 'state/claim/hooks'
 import { calculatePercentage } from 'state/claim/hooks/utils'
-import { TokenLogo, InvestAvailableBar } from 'pages/Claim/styled'
+import { TokenLogo, InvestAvailableBar, UserMessage } from 'pages/Claim/styled'
 import { ClaimWithInvestmentData } from 'pages/Claim/types'
 import CowProtocolLogo from 'components/CowProtocolLogo'
 import { formatMax, formatSmartLocaleAware } from 'utils/format'
 import { ONE_HUNDRED_PERCENT } from 'constants/misc'
 import { AMOUNT_PRECISION } from 'constants/index'
+import ImportantIcon from 'assets/cow-swap/important.svg'
+import SVG from 'react-inlinesvg'
 
 export type Props = { claim: ClaimWithInvestmentData }
 
@@ -58,9 +60,12 @@ export function InvestSummaryRow(props: Props): JSX.Element | null {
             </i>
             <InvestAvailableBar percentage={Number(percentage?.toFixed(2))} />
             {percentage?.lessThan(ONE_HUNDRED_PERCENT) && (
-              <small>
-                Note: You will <b>not be able</b> to invest anymore after claiming.
-              </small>
+              <UserMessage variant="info">
+                <SVG src={ImportantIcon} description="Information" />
+                <span>
+                  Note: You will <b>not be able</b> to invest anymore after claiming.
+                </span>
+              </UserMessage>
             )}
           </span>
         )}

src/custom/pages/Claim/InvestmentFlow/index.tsx

@@ -4,7 +4,6 @@ import { CurrencyAmount } from '@uniswap/sdk-core'
 import {
   InvestFlow,
   InvestContent,
-  InvestFlowValidation,
   InvestSummaryTable,
   ClaimTable,
   AccountClaimSummary,
@@ -252,9 +251,17 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, modalCbs }: I
             <InvestOption key={claim.index} optionIndex={index} claim={claim} {...modalCbs} />
           ))}
 
-          {hasError && <InvestFlowValidation>Fix the errors before continuing</InvestFlowValidation>}
+          {hasError && (
+            <UserMessage variant={'danger'}>
+              <SVG src={ImportantIcon} description="Important!" />
+              <span>Please first resolve all errors shown above to continue.</span>
+            </UserMessage>
+          )}
           {!hasError && someNotTouched && (
-            <InvestFlowValidation>Investment Amount is required to continue</InvestFlowValidation>
+            <UserMessage variant={'danger'}>
+              <SVG src={ImportantIcon} description="Important!" />
+              <span>Investment Amount is required to continue.</span>
+            </UserMessage>
           )}
         </InvestContent>
       ) : null}
@@ -286,8 +293,8 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, modalCbs }: I
 
           <h4>Ready to claim your vCOW?</h4>
           <FaqDrawer items={FAQ_DATA} />
-          <UserMessage>
-            <SVG src={ImportantIcon} description="Important!" />
+          <UserMessage variant={'info'}>
+            <SVG src={ImportantIcon} description="Information" />
             <span>
               <b>Important!</b> Please make sure you intend to claim and send vCOW to the above mentioned receiving
               account.

src/custom/pages/Claim/styled.ts

@@ -531,6 +531,50 @@ export const ClaimRow = styled.tr<{ isPending?: boolean }>`
   }
 `
 
+export const UserMessage = styled.div<{ variant?: string }>`
+  width: 100%;
+  border-radius: var(--border-radius);
+  padding: 12px 16px;
+  text-align: left;
+  display: flex;
+  background: ${({ variant, theme }) =>
+    variant === 'danger'
+      ? transparentize(0.9, theme.danger)
+      : variant === 'info'
+      ? transparentize(0.9, theme.blue2)
+      : transparentize(0.9, theme.attention)};
+  color: ${({ variant, theme }) =>
+    variant === 'danger' ? theme.danger : variant === 'info' ? theme.blue2 : darken(0.1, theme.attention)};
+  margin: 0 auto;
+  align-items: center;
+  font-size: 15px;
+  line-height: 1.3;
+  font-weight: 500;
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    padding: 24px;
+  `}
+
+  > svg {
+    height: 36px;
+    width: auto;
+    margin: 0 12px 0 0;
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      height: 28px;
+    `}
+  }
+
+  > svg > path {
+    fill: ${({ variant, theme }) =>
+      variant === 'danger' ? theme.danger : variant === 'info' ? theme.blue2 : darken(0.1, theme.attention)};
+  }
+
+  > span {
+    flex: 1 1 100%;
+  }
+`
+
 export const ClaimAccount = styled.div`
   display: flex;
   flex-flow: row nowrap;
@@ -1166,6 +1210,10 @@ export const InvestInput = styled.span<{ disabled: boolean }>`
   font-size: 15px;
   width: 100%;
 
+  ${UserMessage} {
+    margin: 12px 0 0;
+  }
+
   > div {
     display: flex;
     flex-flow: column wrap;
@@ -1376,19 +1424,6 @@ export const InvestSummary = styled.div`
   }
 `
 
-export const InvestFlowValidation = styled.div`
-  width: 100%;
-  border-radius: var(--border-radius);
-  padding: 12px;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: rgb(255 0 0 / 25%);
-  color: red;
-  margin: 0 auto 16px;
-`
-
 export const ClaimAccountButtons = styled.div`
   display: flex;
   flex-direction: column;
@@ -1697,40 +1732,6 @@ export const StepExplainer = styled.div`
   }
 `
 
-export const UserMessage = styled.div`
-  width: 100%;
-  border-radius: var(--border-radius);
-  padding: 24px 40px;
-  text-align: left;
-  display: flex;
-  background: ${({ theme }) => transparentize(0.9, theme.attention)};
-  color: ${({ theme }) => darken(0.1, theme.attention)};
-  margin: 0 auto;
-  align-items: center;
-
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    padding: 24px;
-  `}
-
-  > svg {
-    height: 36px;
-    width: auto;
-    margin: 0 12px 0 0;
-
-    ${({ theme }) => theme.mediaWidth.upToSmall`
-      height: 28px;
-    `}
-  }
-
-  > svg > path {
-    fill: ${({ theme }) => darken(0.1, theme.attention)};
-  }
-
-  > span {
-    flex: 1 1 100%;
-  }
-`
-
 export const BannerExplainer = styled.div`
   display: flex;
   justify-content: space-between;

src/custom/theme/baseTheme.tsx

@@ -63,6 +63,7 @@ export function colors(darkMode: boolean): Colors {
 
     // ****** other ******
     blue1: '#3F77FF',
+    blue2: darkMode ? '#a3beff' : '#0c40bf',
     purple: '#8958FF',
     yellow: '#fff6dc',
     greenShade: '#376c57',
@@ -72,7 +73,7 @@ export function colors(darkMode: boolean): Colors {
 
     // states
     success: darkMode ? '#00d897' : '#00815a',
-    danger: '#f1356e',
+    danger: darkMode ? '#f7a7a7' : '#8f0000',
     pending: '#43758C',
     attention: '#ff5722',
 

src/custom/theme/styled.d.ts

@@ -12,6 +12,7 @@ export interface Colors extends ColorsUniswap {
   blueShade: Color
   blueShade2: Color
   blueShade3: Color
+  blue2: Color
   success: Color
   danger: Color
   pending: Color