Use mask for native input on send sheet (#628)

rainbow-me · Apr 28, 2020 · 2a58de1 · 2a58de1
1 parent e2700aa
commit 2a58de1
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 17 deletions.
diff --git a/src/components/fields/UnderlineField.js b/src/components/fields/UnderlineField.js
@@ -36,6 +36,7 @@ export default class UnderlineField extends PureComponent {
     buttonText: PropTypes.string,
     format: PropTypes.func,
     keyboardType: Input.propTypes.keyboardType,
+    mask: PropTypes.string,
     maxLength: PropTypes.number,
     onBlur: PropTypes.func,
     onChange: PropTypes.func,
@@ -130,6 +131,7 @@ export default class UnderlineField extends PureComponent {
       autoFocus,
       buttonText,
       keyboardType,
+      mask,
       maxLength,
       placeholder,
       ...props
@@ -147,7 +149,7 @@ export default class UnderlineField extends PureComponent {
             keyboardAppearance="light"
             keyboardType={keyboardType}
             letterSpacing={fonts.letterSpacing.roundedTightest}
-            mask="[099999999999999999].[999999999999999999]"
+            mask={mask}
             maxLength={maxLength}
             onBlur={this.onBlur}
             onChange={this.onChange}

diff --git a/src/components/send/SendAssetFormField.js b/src/components/send/SendAssetFormField.js
@@ -11,6 +11,7 @@ const SendAssetFormField = ({
   format,
   label,
   labelMaxLength,
+  mask,
   onChange,
   onPressButton,
   placeholder,
@@ -29,6 +30,7 @@ const SendAssetFormField = ({
       buttonText="Max"
       format={format}
       keyboardType="decimal-pad"
+      mask={mask}
       onChange={onChange}
       onPressButton={onPressButton}
       placeholder={placeholder}
@@ -48,6 +50,7 @@ SendAssetFormField.propTypes = {
   format: PropTypes.func,
   label: PropTypes.string,
   labelMaxLength: PropTypes.number,
+  mask: PropTypes.string,
   onChange: PropTypes.func,
   onPressButton: PropTypes.func,
   placeholder: PropTypes.string,

diff --git a/src/components/send/SendAssetFormToken.js b/src/components/send/SendAssetFormToken.js
@@ -1,5 +1,7 @@
+import { pick } from 'lodash';
 import PropTypes from 'prop-types';
-import React, { Fragment, useCallback } from 'react';
+import React, { Fragment } from 'react';
+import supportedNativeCurrencies from '../../references/native-currencies.json';
 import { deviceUtils } from '../../utils';
 import { removeLeadingZeros } from '../../utils/formatters';
 import { ColumnWithMargins } from '../layout';
@@ -17,19 +19,10 @@ const SendAssetFormToken = ({
   txSpeedRenderer,
   ...props
 }) => {
-  const formatNativeInput = useCallback(
-    (value = '') => {
-      const nativeCurrencyDecimals = nativeCurrency !== 'ETH' ? 2 : 18;
-      const formattedValue = removeLeadingZeros(value);
-      const parts = formattedValue.split('.');
-      const decimals = parts[1] || '';
-
-      return decimals.length > nativeCurrencyDecimals
-        ? `${parts[0]}.${decimals.substring(0, nativeCurrencyDecimals)}`
-        : formattedValue;
-    },
-    [nativeCurrency]
-  );
+  const {
+    mask: nativeMask,
+    placeholder: nativePlaceholder,
+  } = pick(supportedNativeCurrencies[nativeCurrency], ['mask', 'placeholder']);
 
   return (
     <Fragment>
@@ -44,11 +37,11 @@ const SendAssetFormToken = ({
         />
         <SendAssetFormField
           autoFocus
-          format={formatNativeInput}
           label={nativeCurrency}
+          mask={nativeMask}
           onChange={onChangeNativeAmount}
           onPressButton={sendMaxBalance}
-          placeholder="0.00"
+          placeholder={nativePlaceholder}
           value={nativeAmount}
         />
       </ColumnWithMargins>