feat: Fixes #308. Change amount font size on Send page to fit in input field

packages/fether-react/src/Send/TxForm/TxForm.js

@@ -24,6 +24,8 @@ import withBalance, { withEthBalance } from '../../utils/withBalance';
 import withTokens from '../../utils/withTokens';
 import TxDetails from './TxDetails';
 
+const DEFAULT_AMOUNT_MAX_CHARS = 9;
+const MEDIUM_AMOUNT_MAX_CHARS = 14;
 const MAX_GAS_PRICE = 40; // In Gwei
 const MIN_GAS_PRICE = 3; // Safelow gas price from GasStation, in Gwei
 
@@ -42,6 +44,13 @@ class Send extends Component {
     showDetails: false
   };
 
+  handleSubmit = values => {
+    const { accountAddress, history, sendStore, token } = this.props;
+
+    sendStore.setTx(values);
+    history.push(`/send/${token.address}/from/${accountAddress}/signer`);
+  };
+
   decorator = createDecorator({
     field: /to|amount/, // when the value of these fields change...
     updates: {
@@ -68,6 +77,19 @@ class Send extends Component {
     }
   });
 
+  changeAmountFontSize = amount => {
+    const amountLen = amount.toString().length;
+    if (amountLen > MEDIUM_AMOUNT_MAX_CHARS) {
+      return '-resize-font-small'; // Resize to fit an amount as small as one Wei
+    } else if (
+      MEDIUM_AMOUNT_MAX_CHARS >= amountLen &&
+      amountLen > DEFAULT_AMOUNT_MAX_CHARS
+    ) {
+      return '-resize-font-medium';
+    }
+    return '-resize-font-default';
+  };
+
   calculateMax = (gas, gasPrice) => {
     const { token, balance } = this.props;
     const gasBn = gas ? new BigNumber(gas) : new BigNumber(21000);
@@ -196,11 +218,15 @@ class Send extends Component {
                           />
 
                           <Field
-                            className='form_field_amount'
+                            className={`form_field_amount ${
+                              !values.amount
+                                ? '-resize-font-default'
+                                : this.changeAmountFontSize(values.amount)
+                            }`}
+                            disabled={this.state.maxSelected}
                             formNoValidate
                             label='Amount'
                             name='amount'
-                            disabled={this.state.maxSelected}
                             placeholder='0.00'
                             render={FetherForm.Field}
                             required

packages/fether-react/src/assets/sass/shared/_form.scss

@@ -139,12 +139,25 @@
 }
 
 input.form_field_amount[type='number'] {
-  font-size: ms(6);
   line-height: ms(6) * 1.1;
   font-weight: 200;
   width: 100%;
   text-align: center;
   -webkit-appearance: none;
+  -webkit-transition: font-size 0.5s;
+  transition: font-size 0.5s;
+
+  &.-resize-font-default {
+    font-size: ms(6);
+  }
+
+  &.-resize-font-medium {
+    font-size: ms(4);
+  }
+
+  &.-resize-font-small {
+    font-size: ms(2);
+  }
 
   &::-webkit-inner-spin-button,
   &::-webkit-outer-spin-button {