Skip to content

Commit

Permalink
fix: token input decimals handling
Browse files Browse the repository at this point in the history
  • Loading branch information
danielsimao committed May 2, 2024
1 parent 525d4d4 commit 01272fe
Show file tree
Hide file tree
Showing 8 changed files with 158 additions and 40 deletions.
21 changes: 17 additions & 4 deletions packages/components/src/TokenInput/BaseTokenInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,12 @@ const escapeRegExp = (string: string): string => {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
};

const hasCorrectDecimals = (value: string, decimals: number) => {
const decimalGroups = value.split('.');

return decimalGroups.length > 1 ? decimalGroups[1].length <= decimals : true;
};

type Props = {
valueUSD?: number;
balance?: ReactNode;
Expand All @@ -33,8 +39,10 @@ type Props = {
size?: TokenInputSize;
isInvalid?: boolean;
minHeight?: Spacing;
value?: string | number;
defaultValue?: string | number;
value?: string;
defaultValue?: string;
// TODO: use Currency from bob-ui
currency: { decimals: number };
onValueChange?: (value: string | number) => void;
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
onFocus?: (e: FocusEvent<Element>) => void;
Expand Down Expand Up @@ -69,6 +77,7 @@ const BaseTokenInput = forwardRef<HTMLInputElement, BaseTokenInputProps>(
inputMode,
value: valueProp,
endAdornment,
currency,
onChange,
onValueChange,
...props
Expand All @@ -84,9 +93,13 @@ const BaseTokenInput = forwardRef<HTMLInputElement, BaseTokenInputProps>(
(e) => {
const value = e.target.value;

const isValid = value === '' || RegExp(`^\\d*(?:\\\\[.])?\\d*$`).test(escapeRegExp(value));
const isEmpty = value === '';
const hasValidDecimalFormat = RegExp(`^\\d*(?:\\\\[.])?\\d*$`).test(escapeRegExp(value));
const hasValidDecimalsAmount = hasCorrectDecimals(value, currency.decimals);

const isValid = hasValidDecimalFormat && hasValidDecimalsAmount;

if (isValid) {
if (isEmpty || isValid) {
onChange?.(e);
onValueChange?.(value);
setValue(value);
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/TokenInput/FixedTokenInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { BaseTokenInput, BaseTokenInputProps } from './BaseTokenInput';
import { TokenInputBalance } from './TokenInputBalance';

type Props = {
balance?: string | number;
balance?: string;
humanBalance?: string | number;
balanceLabel?: ReactNode;
onClickBalance?: (balance: string | number) => void;
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/TokenInput/SelectableTokenInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ import { TokenInputBalance } from './TokenInputBalance';
import { TokenSelect, TokenSelectProps } from './TokenSelect';

type Props = {
balance?: string | number;
balance?: string;
humanBalance?: string | number;
balanceLabel?: ReactNode;
onClickBalance?: (balance: string | number) => void;
onClickBalance?: (balance: string) => void;
selectProps: Omit<TokenSelectProps, 'label' | 'helperTextId'>;
};

Expand Down Expand Up @@ -75,7 +75,7 @@ const SelectableTokenInput = forwardRef<HTMLInputElement, SelectableTokenInputPr

const balance = balanceProp !== undefined && (
<TokenInputBalance
balance={ticker ? balanceProp : 0}
balance={ticker ? balanceProp : '0'}
balanceHuman={humanBalance}
inputId={id}
isDisabled={isDisabled || !ticker}
Expand Down
4 changes: 3 additions & 1 deletion packages/components/src/TokenInput/TokenInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { SelectableTokenInput, SelectableTokenInputProps } from './SelectableTok

type Props = {
onValueChange?: (value?: string | number) => void;
// TODO: define type when repo moved to bob-ui
currency: any;
};

type FixedAttrs = Omit<FixedTokenInputProps, keyof Props>;
Expand Down Expand Up @@ -38,7 +40,7 @@ const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
setValue(value);
};

const handleClickBalance = (balance: string | number) => {
const handleClickBalance = (balance: string) => {
inputRef.current?.focus();
setValue(balance);
onValueChange?.(balance);
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/TokenInput/TokenInputBalance.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import { StyledBalance, StyledMaxButton } from './TokenInput.style';

type TokenInputBalanceProps = {
inputId?: string;
balance: string | number;
balance: string;
balanceHuman?: string | number;
onClickBalance?: (balance: string | number) => void;
onClickBalance?: (balance: string) => void;
isDisabled?: boolean;
label?: ReactNode;
};
Expand All @@ -21,7 +21,7 @@ const TokenInputBalance = ({
isDisabled: isDisabledProp,
label = 'Balance'
}: TokenInputBalanceProps): JSX.Element => {
const isDisabled = isDisabledProp || balanceProp === 0;
const isDisabled = isDisabledProp || Number(balanceProp) === 0;

const ariaLabel = typeof label === 'string' ? `apply max ${label}` : 'apply max';

Expand Down
Loading

0 comments on commit 01272fe

Please sign in to comment.