2 files changed, 31 insertions, 14 deletions

diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 78c83115a..00aea37da 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -1,3 +1,4 @@
+import { ObjectMap } from '@0x/types';
 import * as _ from 'lodash';
 import * as React from 'react';
 
@@ -13,6 +14,11 @@ export enum ScalingInputPhase {
 
 export interface ScalingSettings {
     percentageToReduceFontSizePerCharacter: number;
+    // 1ch = the width of the 0 chararacter.
+    // Allow to customize 'char' length for different characters.
+    characterWidthOverrides: ObjectMap<number>;
+    // How much room to leave to the right of the scaling input.
+    additionalInputSpaceInCh: number;
 }
 
 export interface ScalingInputProps {
@@ -38,13 +44,18 @@ export interface ScalingInputSnapshot {
 // These are magic numbers that were determined experimentally.
 const defaultScalingSettings: ScalingSettings = {
     percentageToReduceFontSizePerCharacter: 0.1,
+    characterWidthOverrides: {
+        '1': 0.7,
+        '.': 0.4,
+    },
+    additionalInputSpaceInCh: 0.4,
 };
 
 export class ScalingInput extends React.Component<ScalingInputProps> {
     public static defaultProps = {
         onChange: util.boundNoop,
         onFontSizeChange: util.boundNoop,
-        maxLength: 7,
+        maxLength: 9,
         scalingSettings: defaultScalingSettings,
         isDisabled: false,
         hasAutofocus: false,
@@ -102,7 +113,7 @@ export class ScalingInput extends React.Component<ScalingInputProps> {
         }
     }
     public render(): React.ReactNode {
-        const { type, hasAutofocus, isDisabled, fontColor, onChange, placeholder, value, maxLength } = this.props;
+        const { type, hasAutofocus, isDisabled, fontColor, placeholder, value, maxLength } = this.props;
         const phase = ScalingInput.getPhaseFromProps(this.props);
         return (
             <Input
@@ -121,22 +132,28 @@ export class ScalingInput extends React.Component<ScalingInputProps> {
         );
     }
     private readonly _calculateWidth = (phase: ScalingInputPhase): string => {
-        const { value, textLengthThreshold, scalingSettings } = this.props;
+        const { value, scalingSettings } = this.props;
         if (_.isEmpty(value)) {
             return `${this.props.emptyInputWidthCh}ch`;
         }
-        return `${value.length}ch`;
+        const lengthInCh = _.reduce(
+            value.split(''),
+            (sum, char) => {
+                const widthOverride = scalingSettings.characterWidthOverrides[char];
+                if (!_.isUndefined(widthOverride)) {
+                    // tslint is confused
+                    // tslint:disable-next-line:restrict-plus-operands
+                    return sum + widthOverride;
+                }
+                return sum + 1;
+            },
+            scalingSettings.additionalInputSpaceInCh,
+        );
+        return `${lengthInCh}ch`;
     };
     private readonly _calculateFontSize = (phase: ScalingInputPhase): number => {
         return ScalingInput.calculateFontSizeFromProps(this.props, phase);
     };
-    private readonly _getInputWidthInPx = (): number => {
-        const ref = this._inputRef.current;
-        if (!ref) {
-            return 0;
-        }
-        return ref.getBoundingClientRect().width;
-    };
     private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
         const value = event.target.value;
         const { maxLength } = this.props;
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index 697bfaf0f..53c43ea0b 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -32,9 +32,9 @@ export const Input =
             color: ${props => props.theme[props.fontColor || 'white']} !important;
             opacity: 0.5 !important;
         }
-        &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { 
-            -webkit-appearance: none; 
-            margin: 0; 
+        &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
           }
     }
 `;