Display a warning message when user sends the entire balance - Closes #3366

i18n/locales/en/common.json

@@ -579,6 +579,7 @@
   "Write message": "Write message",
   "Written by": "Written by",
   "YYYY": "YYYY",
+  "You are about to send your entire balance": "You are about to send your entire balance",
   "You are disconnected": "You are disconnected",
   "You can also download, print and store safely your passphrase.": "You can also download, print and store safely your passphrase.",
   "You can learn more": "You can learn more",

src/app/variables.css

@@ -168,6 +168,8 @@ or "warn/action" ineastd of "red/green"
   --color-jade-green-transparent: rgba(43, 214, 123, 0.1);
   --color-tooltip-bg: rgb(255, 255, 255, 0.7);
   --color-tooltip-arrow: rgb(255, 255, 255, 0.7);
+  --color-warning-border: #f7e36d;
+  --color-warning-bg: #fffce8;
 
   /*************************
         Box

src/components/screens/send/form/formBase.js

@@ -49,6 +49,7 @@ const FormBase = ({
           maxAmountTitle={t('Send entire balance')}
           inputPlaceHolder={t('Insert transaction amount')}
           name="amount"
+          t={t}
           displayConverter
         />
         { children }

src/components/shared/amountField/amountField.css

@@ -1,3 +1,5 @@
+@import './../../../app/mixins.css';
+
 .amountFieldHeader {
   display: flex;
   justify-content: space-between;
@@ -11,6 +13,7 @@
 .amountField {
   align-items: center;
   display: flex;
+  flex-direction: column;
   position: relative;
   width: 100%;
 
@@ -42,3 +45,54 @@
   display: flex;
   margin-bottom: 8px;
 }
+
+.entireBalanceWarning {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  background-color: var(--color-warning-bg);
+  border: 1px solid var(--color-warning-border);
+  border-radius: 5px;
+  margin-top: 6px;
+  padding: 10px;
+
+  & > img {
+    width: 20px;
+    margin-right: 10px;
+  }
+
+  & > span {
+    @mixin contentSmall normal;
+
+    color: var(--color-maastricht-black);
+  }
+
+  & > .closeBtn {
+    align-items: center;
+    cursor: pointer;
+    height: 12px;
+    right: 22px;
+    position: absolute;
+
+    &::before,
+    &::after {
+      background-color: currentColor;
+      color: var(--color-maastricht-black);
+      content: '';
+      height: 13px;
+      position: absolute;
+      width: 1px;
+    }
+
+    &::before {
+      transform: rotate(45deg);
+    }
+
+    &::after {
+      transform: rotate(-45deg);
+    }
+  }
+}

src/components/shared/amountField/index.js

@@ -1,24 +1,34 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   formatAmountBasedOnLocale,
 } from '@utils/formattedNumber';
 import { fromRawLsk } from '@utils/lsk';
 import { Input } from '@toolbox/inputs';
 import { TertiaryButton } from '@toolbox/buttons';
+import Icon from '@toolbox/icon';
 import Converter from '../converter';
 import styles from './amountField.css';
 
 const AmountField = ({
   amount, maxAmount, setAmountField, className,
   title, maxAmountTitle, inputPlaceHolder, name,
-  displayConverter,
+  displayConverter, t,
 }) => {
-  const setEntireBalance = () => {
+  const [showEntireBalanceWarning, setShowEntireBalanceWarning] = useState(false);
+  const setEntireBalance = (e) => {
+    e.preventDefault();
     const value = formatAmountBasedOnLocale({
       value: fromRawLsk(maxAmount.value),
       format: '0.[00000000]',
     });
     setAmountField({ value }, maxAmount);
+    setShowEntireBalanceWarning(true);
+  };
+
+  const resetInput = (e) => {
+    e.preventDefault();
+    setShowEntireBalanceWarning(false);
+    setAmountField({ value: '' }, maxAmount);
   };
 
   const handleAmountChange = ({ target }) => {
@@ -69,6 +79,16 @@ const AmountField = ({
           />
         )}
       </span>
+      {showEntireBalanceWarning && (
+        <div className={styles.entireBalanceWarning}>
+          <Icon name="warningYellow" />
+          <span>{t('You are about to send your entire balance')}</span>
+          <div
+            className={styles.closeBtn}
+            onClick={resetInput}
+          />
+        </div>
+      )}
     </label>
   );
 };