diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index 0c7bf035c5..31f4d4513f 100644 --- a/i18n/locales/en/common.json +++ b/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", diff --git a/src/app/variables.css b/src/app/variables.css index 5ef550e31b..240cc844a7 100644 --- a/src/app/variables.css +++ b/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 diff --git a/src/components/screens/send/form/form.test.js b/src/components/screens/send/form/form.test.js index 62bf86b846..38964f0005 100644 --- a/src/components/screens/send/form/form.test.js +++ b/src/components/screens/send/form/form.test.js @@ -278,6 +278,22 @@ describe('Form', () => { expect(wrapper.find('.amount Feedback')).toHaveText(''); expect(wrapper.find('button.btn-submit')).not.toBeDisabled(); }); + + it('Should display send entire balance warning', () => { + const wrapper = mount(
); + const { address } = accounts.genesis.summary; + wrapper.find('input.recipient').simulate('change', { target: { name: 'recipient', value: address } }); + wrapper.find('.send-entire-balance-button').at(1).simulate('click'); + act(() => { jest.advanceTimersByTime(300); }); + wrapper.update(); + + expect(wrapper.find('.entire-balance-warning')).toHaveText('You are about to send your entire balance'); + wrapper.find('.close-entire-balance-warning').at(0).simulate('click'); + act(() => { jest.advanceTimersByTime(300); }); + wrapper.update(); + + expect(wrapper.find('.entire-balance-warning')); + }); }); describe('Reference field', () => { diff --git a/src/components/screens/send/form/formBase.js b/src/components/screens/send/form/formBase.js index e832b9bfcd..841a8778fd 100644 --- a/src/components/screens/send/form/formBase.js +++ b/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 } diff --git a/src/components/shared/amountField/amountField.css b/src/components/shared/amountField/amountField.css index 0fa22abb14..27bf31b37a 100644 --- a/src/components/shared/amountField/amountField.css +++ b/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); + } + } +} diff --git a/src/components/shared/amountField/index.js b/src/components/shared/amountField/index.js index e3e4ea7ebe..0e6ccf0063 100644 --- a/src/components/shared/amountField/index.js +++ b/src/components/shared/amountField/index.js @@ -1,28 +1,41 @@ -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 }) => { setAmountField(target, maxAmount); + if (showEntireBalanceWarning && target.value < maxAmount.value) { + setShowEntireBalanceWarning(false); + } }; const ignoreClicks = (e) => { @@ -69,6 +82,16 @@ const AmountField = ({ /> )} + {showEntireBalanceWarning && ( +
+ + {t('You are about to send your entire balance')} +
+
+ )} ); };