m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-26 12:29:06 +01:00
Code

Validating or restricting the number of digits on token allowance flow (#17234)

Browse Source 
* Validating or restricting the number of digits after the decimal point that the user can enter and styles for Max button and description with error message

* Use better solution for validation the number of digits on token allowance flow
This commit is contained in:
Vladimir Saric 2023-01-16 18:41:46 +01:00 committed by PeterYinusa
parent 94b4db7d14
commit 09067601a4
4 changed files with 33 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
shared/constants/tokens.js
View File

@ -45,3 +45,4 @@ export const MAX_TOKEN_ALLOWANCE_AMOUNT = new BigNumber(2)
.minus(1) .minus(1)
.toString(10); .toString(10);
export const TOKEN_ALLOWANCE_VALUE_REGEX = /^[0-9]{1,}([,.][0-9]{1,})?$/u; export const TOKEN_ALLOWANCE_VALUE_REGEX = /^[0-9]{1,}([,.][0-9]{1,})?$/u;
export const DECIMAL_REGEX = /\.(\d*)/u;

33
ui/components/app/custom-spending-cap/custom-spending-cap.js
View File

@ -1,6 +1,7 @@
import React, { useState, useContext, useEffect } from 'react'; import React, { useState, useContext, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import { I18nContext } from '../../../contexts/i18n'; import { I18nContext } from '../../../contexts/i18n';
import Box from '../../ui/box'; import Box from '../../ui/box';
@ -29,6 +30,7 @@ import {
import { import {
MAX_TOKEN_ALLOWANCE_AMOUNT, MAX_TOKEN_ALLOWANCE_AMOUNT,
TOKEN_ALLOWANCE_VALUE_REGEX, TOKEN_ALLOWANCE_VALUE_REGEX,
DECIMAL_REGEX,
} from '../../../../shared/constants/tokens'; } from '../../../../shared/constants/tokens';
import { CustomSpendingCapTooltip } from './custom-spending-cap-tooltip'; import { CustomSpendingCapTooltip } from './custom-spending-cap-tooltip';
@ -105,6 +107,10 @@ export default function CustomSpendingCap({
let spendingCapError = ''; let spendingCapError = '';
const inputTextLogic = getInputTextLogic(valueInput); const inputTextLogic = getInputTextLogic(valueInput);
const inputTextLogicDescription = inputTextLogic.description; const inputTextLogicDescription = inputTextLogic.description;
const match = DECIMAL_REGEX.exec(replaceCommaToDot(valueInput));
if (match?.[1]?.length > decimals) {
return;
}
if (valueInput && !TOKEN_ALLOWANCE_VALUE_REGEX.test(valueInput)) { if (valueInput && !TOKEN_ALLOWANCE_VALUE_REGEX.test(valueInput)) {
spendingCapError = t('spendingCapError'); spendingCapError = t('spendingCapError');
@ -230,7 +236,9 @@ export default function CustomSpendingCap({
paddingRight={4} paddingRight={4}
paddingBottom={2} paddingBottom={2}
textAlign={TEXT_ALIGN.END} textAlign={TEXT_ALIGN.END}
className="custom-spending-cap__max" className={classnames('custom-spending-cap__max', {
'custom-spending-cap__max--with-error-message': error,
})}
> >
<ButtonLink <ButtonLink
size={SIZES.AUTO} size={SIZES.AUTO}
@ -242,16 +250,21 @@ export default function CustomSpendingCap({
{t('max')} {t('max')}
</ButtonLink> </ButtonLink>
</Box> </Box>
<Typography <Box
className="custom-spending-cap__description" className={classnames('custom-spending-cap__description', {
color={COLORS.TEXT_DEFAULT} 'custom-spending-cap__description--with-error-message': error,
variant={TYPOGRAPHY.H7} })}
boxProps={{ paddingTop: 2, paddingBottom: 2 }}
> >
{replaceCommaToDot(value) <Typography
? customSpendingCapText color={COLORS.TEXT_DEFAULT}
: inputLogicEmptyStateText} variant={TYPOGRAPHY.H7}
</Typography> boxProps={{ paddingTop: 2, paddingBottom: 2 }}
>
{replaceCommaToDot(value)
? customSpendingCapText
: inputLogicEmptyStateText}
</Typography>
</Box>
</label> </label>
</Box> </Box>
</Box> </Box>

8
ui/components/app/custom-spending-cap/index.scss
View File

@ -6,6 +6,10 @@
&__max { &__max {
position: relative; position: relative;
margin-top: -30px; margin-top: -30px;
&--with-error-message {
margin-top: -66px;
}
} }
&__input { &__input {
@ -14,6 +18,10 @@
&__description { &__description {
word-break: break-word; word-break: break-word;
&--with-error-message {
margin-top: 30px;
}
} }
#custom-spending-cap-input-value { #custom-spending-cap-input-value {

3
ui/components/ui/numeric-input/numeric-input.component.js
View File

@ -3,8 +3,7 @@ import classNames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Typography from '../typography/typography'; import Typography from '../typography/typography';
import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system'; import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
import { DECIMAL_REGEX } from '../../../../shared/constants/tokens';
const DECIMAL_REGEX = /\.(\d*)/u;
export default function NumericInput({ export default function NumericInput({
detailText = '', detailText = '',