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)
.toString(10);
export const TOKEN_ALLOWANCE_VALUE_REGEX = /^[0-9]{1,}([,.][0-9]{1,})?$/u;
export const DECIMAL_REGEX = /\.(\d*)/u;

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

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

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

@ -6,6 +6,10 @@
&__max {
position: relative;
margin-top: -30px;
&--with-error-message {
margin-top: -66px;
}
}
&__input {
@ -14,6 +18,10 @@
&__description {
word-break: break-word;
&--with-error-message {
margin-top: 30px;
}
}
#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 Typography from '../typography/typography';
import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
const DECIMAL_REGEX = /\.(\d*)/u;
import { DECIMAL_REGEX } from '../../../../shared/constants/tokens';
export default function NumericInput({
detailText = '',