From 43ad2fe23bec01b077f5c55a23736fdcb24781a3 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 19 Oct 2018 13:34:42 -0700
Subject: feat: upgrade to styled-components v4

---
 .../instant/src/components/animations/slide_animations.tsx     | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx
index 1f10a2ed6..84280372b 100644
--- a/packages/instant/src/components/animations/slide_animations.tsx
+++ b/packages/instant/src/components/animations/slide_animations.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { Keyframes } from 'styled-components';
 
-import { keyframes, styled } from '../../style/theme';
+import { css, keyframes, styled } from '../../style/theme';
 
 const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes`
     from {
@@ -15,7 +16,7 @@ const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes`
 `;
 
 export interface SlideAnimationProps {
-    keyframes: string;
+    keyframes: Keyframes;
     animationType: string;
     animationDirection?: string;
 }
@@ -24,7 +25,10 @@ export const SlideAnimation =
     styled.div <
     SlideAnimationProps >
     `
-    animation-name: ${props => props.keyframes};
+    animation-name: ${props =>
+        css`
+            ${props.keyframes};
+        `};
     animation-duration: 0.3s;
     animation-timing-function: ${props => props.animationType};
     animation-delay: 0s;
-- 
cgit v1.2.3


From d5105b5c9f74a4f52e4952b845a37692bb824fd4 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 19 Oct 2018 13:45:12 -0700
Subject: feat: user better syntax for defining ui components

---
 packages/instant/src/components/ui/container.tsx | 6 +-----
 packages/instant/src/components/ui/flex.tsx      | 2 +-
 packages/instant/src/components/ui/input.tsx     | 6 +-----
 packages/instant/src/components/ui/text.tsx      | 8 +-------
 4 files changed, 4 insertions(+), 18 deletions(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 02b16e39f..b7e17d807 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -29,11 +29,7 @@ export interface ContainerProps {
     zIndex?: number;
 }
 
-const PlainContainer: React.StatelessComponent<ContainerProps> = ({ children, className }) => (
-    <div className={className}>{children}</div>
-);
-
-export const Container = styled(PlainContainer)`
+export const Container = styled<ContainerProps, 'div'>('div')`
     box-sizing: border-box;
     ${props => cssRuleIfExists(props, 'display')}
     ${props => cssRuleIfExists(props, 'position')}
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index 327e91926..f2013f60f 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -17,7 +17,7 @@ const PlainFlex: React.StatelessComponent<FlexProps> = ({ children, className })
     <div className={className}>{children}</div>
 );
 
-export const Flex = styled(PlainFlex)`
+export const Flex = styled<FlexProps, 'div'>('div')`
     display: flex;
     flex-direction: ${props => props.direction};
     flex-wrap: ${props => props.flexWrap};
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index f8c6b6ef6..9db7d1c4c 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -12,11 +12,7 @@ export interface InputProps {
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const PlainInput: React.StatelessComponent<InputProps> = ({ value, className, placeholder, onChange }) => (
-    <input className={className} value={value} onChange={onChange} placeholder={placeholder} />
-);
-
-export const Input = styled(PlainInput)`
+export const Input = styled<InputProps, 'input'>('input')`
     font-size: ${props => props.fontSize};
     width: ${props => props.width};
     padding: 0.1em 0em;
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index 9fb8ea26f..d23b0034d 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -23,14 +23,8 @@ export interface TextProps {
     display?: string;
 }
 
-const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick }) => (
-    <div className={className} onClick={onClick}>
-        {children}
-    </div>
-);
-
 const darkenOnHoverAmount = 0.3;
-export const Text = styled(PlainText)`
+export const Text = styled<TextProps, 'div'>('div')`
     font-family: ${props => props.fontFamily};
     font-style: ${props => props.fontStyle};
     font-weight: ${props => props.fontWeight};
-- 
cgit v1.2.3


From f06541ec94c2f3b8d1924da376178a5fc3f442e6 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 19 Oct 2018 13:46:31 -0700
Subject: fix: animation component typing

---
 packages/instant/src/components/animations/slide_animations.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx
index 84280372b..7c8666861 100644
--- a/packages/instant/src/components/animations/slide_animations.tsx
+++ b/packages/instant/src/components/animations/slide_animations.tsx
@@ -21,10 +21,7 @@ export interface SlideAnimationProps {
     animationDirection?: string;
 }
 
-export const SlideAnimation =
-    styled.div <
-    SlideAnimationProps >
-    `
+export const SlideAnimation = styled<SlideAnimationProps, 'div'>('div')`
     animation-name: ${props =>
         css`
             ${props.keyframes};
-- 
cgit v1.2.3


From 6510454337dd5add86522c0eb5621a3f55ac062d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 19 Oct 2018 14:58:12 -0700
Subject: feat: add scaling input component

---
 packages/instant/src/components/amount_input.tsx  | 10 +--
 packages/instant/src/components/scaling_input.tsx | 82 +++++++++++++++++++++++
 2 files changed, 88 insertions(+), 4 deletions(-)
 create mode 100644 packages/instant/src/components/scaling_input.tsx

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/amount_input.tsx b/packages/instant/src/components/amount_input.tsx
index c89fb05ad..f6f562be8 100644
--- a/packages/instant/src/components/amount_input.tsx
+++ b/packages/instant/src/components/amount_input.tsx
@@ -5,7 +5,8 @@ import * as React from 'react';
 import { ColorOption } from '../style/theme';
 import { util } from '../util/util';
 
-import { Container, Input } from './ui';
+import { ScalingInput } from './scaling_input';
+import { Container, Text } from './ui';
 
 export interface AmountInputProps {
     fontColor?: ColorOption;
@@ -22,13 +23,14 @@ export class AmountInput extends React.Component<AmountInputProps> {
         const { fontColor, fontSize, value } = this.props;
         return (
             <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block">
-                <Input
+                <ScalingInput
+                    startWidthCh={3.5}
+                    endWidthCh={6}
+                    startFontSizePx={45}
                     fontColor={fontColor}
-                    fontSize={fontSize}
                     onChange={this._handleChange}
                     value={!_.isUndefined(value) ? value.toString() : ''}
                     placeholder="0.00"
-                    width="2.2em"
                 />
             </Container>
         );
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
new file mode 100644
index 000000000..ea0a925d2
--- /dev/null
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -0,0 +1,82 @@
+import { BigNumber } from '@0x/utils';
+import * as _ from 'lodash';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { ColorOption } from '../style/theme';
+import { util } from '../util/util';
+
+import { Container, Input } from './ui';
+
+export enum ScalingInputPhase {
+    Start,
+    Scaling,
+    End,
+}
+
+export interface ScalingInputProps {
+    startWidthCh: number;
+    endWidthCh: number;
+    startFontSizePx: number;
+    value?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    fontColor?: ColorOption;
+    placeholder?: string;
+}
+// Magic value obtained via trial-and-error
+const scalingRateToMaintainSameWidth = 0.1;
+export class ScalingInput extends React.Component<ScalingInputProps> {
+    public static defaultProps = {
+        onChange: util.boundNoop,
+    };
+    public render(): React.ReactNode {
+        const { fontColor, onChange, placeholder, value } = this.props;
+        const phase = this._getPhase();
+        return (
+            <Input
+                fontColor={fontColor}
+                onChange={onChange}
+                value={value}
+                placeholder={placeholder}
+                fontSize={this._calculateFontSize(phase)}
+                width={this._calculateWidth(phase)}
+            />
+        );
+    }
+    private readonly _calculateFontSize = (phase: ScalingInputPhase): string => {
+        const { value, endWidthCh, startFontSizePx } = this.props;
+        if (_.isUndefined(value) || phase !== ScalingInputPhase.End) {
+            return `${startFontSizePx}px`;
+        }
+        const charactersOverMax = value.length - endWidthCh;
+        const pixelsToReduceFontSizeBy = charactersOverMax * 2;
+        const newFontSizePx = startFontSizePx - pixelsToReduceFontSizeBy;
+        return `${newFontSizePx}px`;
+    };
+    private readonly _calculateWidth = (phase: ScalingInputPhase): string => {
+        const { value, startWidthCh, endWidthCh } = this.props;
+        if (_.isUndefined(value)) {
+            return `${startWidthCh}ch`;
+        }
+        switch (phase) {
+            case ScalingInputPhase.Start:
+                return `${startWidthCh}ch`;
+            case ScalingInputPhase.Scaling:
+                return `${value.length}ch`;
+            case ScalingInputPhase.End:
+                return `${endWidthCh}ch`;
+            default:
+                return `${startWidthCh}ch`;
+        }
+    };
+    private readonly _getPhase = (): ScalingInputPhase => {
+        const { value, startWidthCh, endWidthCh } = this.props;
+        if (_.isUndefined(value) || value.length <= this.props.startWidthCh) {
+            return ScalingInputPhase.Start;
+        }
+        if (value.length > startWidthCh && value.length <= endWidthCh) {
+            return ScalingInputPhase.Scaling;
+        }
+        return ScalingInputPhase.End;
+    };
+}
-- 
cgit v1.2.3


From 77a4d7e2b76a1808c37ed9f0a97cbd3b34a0ebe9 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 22 Oct 2018 10:50:25 -0700
Subject: feat: have basic scaling amount input working

---
 packages/instant/src/components/amount_input.tsx   |  51 -----------
 .../instant/src/components/asset_amount_input.tsx  |  41 +++++++--
 .../instant/src/components/instant_heading.tsx     |   2 +-
 .../src/components/scaling_amount_input.tsx        |  52 +++++++++++
 packages/instant/src/components/scaling_input.tsx  | 101 +++++++++++++++------
 5 files changed, 163 insertions(+), 84 deletions(-)
 delete mode 100644 packages/instant/src/components/amount_input.tsx
 create mode 100644 packages/instant/src/components/scaling_amount_input.tsx

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/amount_input.tsx b/packages/instant/src/components/amount_input.tsx
deleted file mode 100644
index f6f562be8..000000000
--- a/packages/instant/src/components/amount_input.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { BigNumber } from '@0x/utils';
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { ColorOption } from '../style/theme';
-import { util } from '../util/util';
-
-import { ScalingInput } from './scaling_input';
-import { Container, Text } from './ui';
-
-export interface AmountInputProps {
-    fontColor?: ColorOption;
-    fontSize?: string;
-    value?: BigNumber;
-    onChange: (value?: BigNumber) => void;
-}
-
-export class AmountInput extends React.Component<AmountInputProps> {
-    public static defaultProps = {
-        onChange: util.boundNoop,
-    };
-    public render(): React.ReactNode {
-        const { fontColor, fontSize, value } = this.props;
-        return (
-            <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block">
-                <ScalingInput
-                    startWidthCh={3.5}
-                    endWidthCh={6}
-                    startFontSizePx={45}
-                    fontColor={fontColor}
-                    onChange={this._handleChange}
-                    value={!_.isUndefined(value) ? value.toString() : ''}
-                    placeholder="0.00"
-                />
-            </Container>
-        );
-    }
-    private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-        const value = event.target.value;
-        let bigNumberValue;
-        if (!_.isEmpty(value)) {
-            try {
-                bigNumberValue = new BigNumber(event.target.value);
-            } catch {
-                // We don't want to allow values that can't be a BigNumber, so don't even call onChange.
-                return;
-            }
-        }
-        this.props.onChange(bigNumberValue);
-    };
-}
diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
index c03ef1cf3..0b22c889c 100644
--- a/packages/instant/src/components/asset_amount_input.tsx
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -7,33 +7,62 @@ import { ERC20Asset } from '../types';
 import { assetUtils } from '../util/asset';
 import { util } from '../util/util';
 
-import { AmountInput, AmountInputProps } from './amount_input';
+import { ScalingAmountInput } from './scaling_amount_input';
 import { Container, Text } from './ui';
 
 // Asset amounts only apply to ERC20 assets
-export interface AssetAmountInputProps extends AmountInputProps {
+export interface AssetAmountInputProps {
     asset?: ERC20Asset;
     onChange: (value?: BigNumber, asset?: ERC20Asset) => void;
+    startingFontSizePx: number;
+    fontColor?: ColorOption;
 }
 
-export class AssetAmountInput extends React.Component<AssetAmountInputProps> {
+export interface AssetAmountInputState {
+    currentFontSizePx: number;
+}
+
+export class AssetAmountInput extends React.Component<AssetAmountInputProps, AssetAmountInputState> {
     public static defaultProps = {
         onChange: util.boundNoop,
     };
+    constructor(props: AssetAmountInputProps) {
+        super(props);
+        this.state = {
+            currentFontSizePx: props.startingFontSizePx,
+        };
+    }
     public render(): React.ReactNode {
         const { asset, onChange, ...rest } = this.props;
         return (
             <Container>
-                <AmountInput {...rest} onChange={this._handleChange} />
+                <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block">
+                    <ScalingAmountInput
+                        {...rest}
+                        startWidthCh={3.5}
+                        endWidthCh={5}
+                        fontSizePx={this.state.currentFontSizePx}
+                        onChange={this._handleChange}
+                    />
+                </Container>
                 <Container display="inline-block" marginLeft="10px">
-                    <Text fontSize={rest.fontSize} fontColor={ColorOption.white} textTransform="uppercase">
+                    <Text
+                        fontSize={`${this.state.currentFontSizePx}px`}
+                        fontColor={ColorOption.white}
+                        textTransform="uppercase"
+                    >
                         {assetUtils.bestNameForAsset(asset)}
                     </Text>
                 </Container>
             </Container>
         );
     }
-    private readonly _handleChange = (value?: BigNumber): void => {
+    private readonly _handleChange = (value?: BigNumber, fontSize?: number): void => {
         this.props.onChange(value, this.props.asset);
+        if (!_.isUndefined(fontSize)) {
+            this.setState({
+                currentFontSizePx: fontSize,
+            });
+        }
     };
 }
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index a36d35a93..defe3b8b1 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -69,7 +69,7 @@ export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = pro
             </Text>
         </Container>
         <Flex direction="row" justify="space-between">
-            <SelectedAssetAmountInput fontSize="45px" />
+            <SelectedAssetAmountInput startingFontSizePx={45} />
             <Flex direction="column" justify="space-between">
                 <Container marginBottom="5px">
                     <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
new file mode 100644
index 000000000..a0b7b74af
--- /dev/null
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -0,0 +1,52 @@
+import { BigNumber } from '@0x/utils';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+import { util } from '../util/util';
+
+import { ScalingInput } from './scaling_input';
+import { Container, Text } from './ui';
+
+export interface ScalingAmountInputProps {
+    fontSizePx: number;
+    startWidthCh: number;
+    endWidthCh: number;
+    fontColor?: ColorOption;
+    value?: BigNumber;
+    onChange: (value?: BigNumber, fontSize?: number) => void;
+}
+
+export class ScalingAmountInput extends React.Component<ScalingAmountInputProps> {
+    public static defaultProps = {
+        onChange: util.boundNoop,
+        onFontSizeChange: util.boundNoop,
+    };
+    public render(): React.ReactNode {
+        const { startWidthCh, endWidthCh, fontColor, fontSizePx, value } = this.props;
+        return (
+            <ScalingInput
+                startWidthCh={startWidthCh}
+                endWidthCh={endWidthCh}
+                fontSizePx={fontSizePx}
+                fontColor={fontColor}
+                onChange={this._handleChange}
+                value={!_.isUndefined(value) ? value.toString() : ''}
+                placeholder="0.00"
+            />
+        );
+    }
+    private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>, fontSize?: number): void => {
+        const value = event.target.value;
+        let bigNumberValue;
+        if (!_.isEmpty(value)) {
+            try {
+                bigNumberValue = new BigNumber(event.target.value);
+            } catch {
+                // We don't want to allow values that can't be a BigNumber, so don't even call onChange.
+                return;
+            }
+        }
+        this.props.onChange(bigNumberValue, fontSize);
+    };
+}
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index ea0a925d2..a2c4ba342 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -17,47 +17,79 @@ export enum ScalingInputPhase {
 export interface ScalingInputProps {
     startWidthCh: number;
     endWidthCh: number;
-    startFontSizePx: number;
+    fontSizePx: number;
     value?: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>, fontSize: number) => void;
     fontColor?: ColorOption;
     placeholder?: string;
 }
-// Magic value obtained via trial-and-error
-const scalingRateToMaintainSameWidth = 0.1;
+
+export interface ScalingInputProps {
+    fixedWidthInPxIfExists?: number;
+}
+
 export class ScalingInput extends React.Component<ScalingInputProps> {
     public static defaultProps = {
         onChange: util.boundNoop,
+        onFontSizeChange: util.boundNoop,
     };
+    public state = {
+        fixedWidthInPxIfExists: undefined,
+    };
+    private _inputRef = React.createRef();
+    public static getPhase(startWidthCh: number, endWidthCh: number, value?: string): ScalingInputPhase {
+        if (_.isUndefined(value) || value.length <= startWidthCh) {
+            return ScalingInputPhase.Start;
+        }
+        if (value.length > startWidthCh && value.length <= endWidthCh) {
+            return ScalingInputPhase.Scaling;
+        }
+        return ScalingInputPhase.End;
+    }
+    public static getPhaseFromProps(props: ScalingInputProps): ScalingInputPhase {
+        const { value, startWidthCh, endWidthCh } = props;
+        return ScalingInput.getPhase(startWidthCh, endWidthCh, value);
+    }
+    public componentDidUpdate(prevProps: ScalingInputProps): void {
+        const prevPhase = ScalingInput.getPhaseFromProps(prevProps);
+        const curPhase = ScalingInput.getPhaseFromProps(this.props);
+        // if we went from anything else to end, fix to the current width as it shouldn't change as we grow
+        if (prevPhase !== ScalingInputPhase.End && curPhase === ScalingInputPhase.End) {
+            this.setState({
+                fixedWidthInPxIfExists: this._getInputWidthInPx(),
+            });
+        }
+        // if we end from end to to anything else, un-fix the width
+        if (prevPhase === ScalingInputPhase.End && curPhase !== ScalingInputPhase.End) {
+            this.setState({
+                fixedWidthInPxIfExists: undefined,
+            });
+        }
+    }
     public render(): React.ReactNode {
         const { fontColor, onChange, placeholder, value } = this.props;
-        const phase = this._getPhase();
+        const phase = ScalingInput.getPhaseFromProps(this.props);
         return (
             <Input
+                ref={this._inputRef as any}
                 fontColor={fontColor}
-                onChange={onChange}
+                onChange={this._handleChange}
                 value={value}
                 placeholder={placeholder}
-                fontSize={this._calculateFontSize(phase)}
-                width={this._calculateWidth(phase)}
+                fontSize={`${this.props.fontSizePx}px`}
+                width={this._calculateWidth()}
             />
         );
     }
-    private readonly _calculateFontSize = (phase: ScalingInputPhase): string => {
-        const { value, endWidthCh, startFontSizePx } = this.props;
-        if (_.isUndefined(value) || phase !== ScalingInputPhase.End) {
-            return `${startFontSizePx}px`;
-        }
-        const charactersOverMax = value.length - endWidthCh;
-        const pixelsToReduceFontSizeBy = charactersOverMax * 2;
-        const newFontSizePx = startFontSizePx - pixelsToReduceFontSizeBy;
-        return `${newFontSizePx}px`;
-    };
-    private readonly _calculateWidth = (phase: ScalingInputPhase): string => {
+    private readonly _calculateWidth = (): string => {
+        const phase = ScalingInput.getPhaseFromProps(this.props);
         const { value, startWidthCh, endWidthCh } = this.props;
         if (_.isUndefined(value)) {
             return `${startWidthCh}ch`;
         }
+        if (!_.isUndefined(this.state.fixedWidthInPxIfExists)) {
+            return `${this.state.fixedWidthInPxIfExists}px`;
+        }
         switch (phase) {
             case ScalingInputPhase.Start:
                 return `${startWidthCh}ch`;
@@ -69,14 +101,31 @@ export class ScalingInput extends React.Component<ScalingInputProps> {
                 return `${startWidthCh}ch`;
         }
     };
-    private readonly _getPhase = (): ScalingInputPhase => {
-        const { value, startWidthCh, endWidthCh } = this.props;
-        if (_.isUndefined(value) || value.length <= this.props.startWidthCh) {
-            return ScalingInputPhase.Start;
+    private readonly _getInputWidthInPx = (): number => {
+        const ref = this._inputRef.current;
+        if (!ref) {
+            return 0;
         }
-        if (value.length > startWidthCh && value.length <= endWidthCh) {
-            return ScalingInputPhase.Scaling;
+        return (ref as any).getBoundingClientRect().width;
+    };
+    private readonly _calculateNextFontSize = (
+        currentFontSizePx: number,
+        value: string,
+        startWidthCh: number,
+        endWidthCh: number,
+    ): number => {
+        const phase = ScalingInput.getPhase(startWidthCh, endWidthCh, value);
+        if (_.isUndefined(value) || phase !== ScalingInputPhase.End) {
+            return currentFontSizePx;
         }
-        return ScalingInputPhase.End;
+        const charactersOverMax = value.length - endWidthCh;
+        const pixelsToReduceFontSizeBy = charactersOverMax * 5;
+        const fontSize = currentFontSizePx - pixelsToReduceFontSizeBy;
+        return fontSize;
+    };
+    private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value = event.target.value;
+        const { fontSizePx, startWidthCh, endWidthCh } = this.props;
+        this.props.onChange(event, this._calculateNextFontSize(fontSizePx, value, startWidthCh, endWidthCh));
     };
 }
-- 
cgit v1.2.3


From 921492e8186697e477c27d76bd7eb58ce2454765 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 22 Oct 2018 16:45:48 -0700
Subject: feature: reduce font size by a percentage instead of a constant

---
 .../instant/src/components/asset_amount_input.tsx  | 15 ++---
 .../src/components/scaling_amount_input.tsx        |  8 ++-
 packages/instant/src/components/scaling_input.tsx  | 73 +++++++++++++---------
 3 files changed, 57 insertions(+), 39 deletions(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
index 0b22c889c..beb21a4cf 100644
--- a/packages/instant/src/components/asset_amount_input.tsx
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -41,8 +41,9 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps, Ass
                         {...rest}
                         startWidthCh={3.5}
                         endWidthCh={5}
-                        fontSizePx={this.state.currentFontSizePx}
+                        maxFontSizePx={this.props.startingFontSizePx}
                         onChange={this._handleChange}
+                        onFontSizeChange={this._handleFontSizeChange}
                     />
                 </Container>
                 <Container display="inline-block" marginLeft="10px">
@@ -57,12 +58,12 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps, Ass
             </Container>
         );
     }
-    private readonly _handleChange = (value?: BigNumber, fontSize?: number): void => {
+    private readonly _handleChange = (value?: BigNumber): void => {
         this.props.onChange(value, this.props.asset);
-        if (!_.isUndefined(fontSize)) {
-            this.setState({
-                currentFontSizePx: fontSize,
-            });
-        }
+    };
+    private readonly _handleFontSizeChange = (fontSizePx: number): void => {
+        this.setState({
+            currentFontSizePx: fontSizePx,
+        });
     };
 }
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index a0b7b74af..83375af00 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -9,12 +9,13 @@ import { ScalingInput } from './scaling_input';
 import { Container, Text } from './ui';
 
 export interface ScalingAmountInputProps {
-    fontSizePx: number;
+    maxFontSizePx: number;
     startWidthCh: number;
     endWidthCh: number;
     fontColor?: ColorOption;
     value?: BigNumber;
     onChange: (value?: BigNumber, fontSize?: number) => void;
+    onFontSizeChange: (fontSizePx: number) => void;
 }
 
 export class ScalingAmountInput extends React.Component<ScalingAmountInputProps> {
@@ -23,12 +24,13 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
         onFontSizeChange: util.boundNoop,
     };
     public render(): React.ReactNode {
-        const { startWidthCh, endWidthCh, fontColor, fontSizePx, value } = this.props;
+        const { startWidthCh, endWidthCh, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props;
         return (
             <ScalingInput
                 startWidthCh={startWidthCh}
                 endWidthCh={endWidthCh}
-                fontSizePx={fontSizePx}
+                maxFontSizePx={maxFontSizePx}
+                onFontSizeChange={onFontSizeChange}
                 fontColor={fontColor}
                 onChange={this._handleChange}
                 value={!_.isUndefined(value) ? value.toString() : ''}
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index a2c4ba342..7824c10f9 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -17,21 +17,29 @@ export enum ScalingInputPhase {
 export interface ScalingInputProps {
     startWidthCh: number;
     endWidthCh: number;
-    fontSizePx: number;
+    maxFontSizePx: number;
     value?: string;
-    onChange: (event: React.ChangeEvent<HTMLInputElement>, fontSize: number) => void;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onFontSizeChange: (fontSizePx: number) => void;
     fontColor?: ColorOption;
     placeholder?: string;
+    maxLength?: number;
 }
 
-export interface ScalingInputProps {
+export interface ScalingInputState {
     fixedWidthInPxIfExists?: number;
 }
 
-export class ScalingInput extends React.Component<ScalingInputProps> {
+export interface ScalingInputSnapshot {
+    inputWidthPx: number;
+}
+// This is a magic number that was determined experimentally.
+const percentageToReduceByPerCharacter = 0.15;
+export class ScalingInput extends React.Component<ScalingInputProps, ScalingInputState> {
     public static defaultProps = {
         onChange: util.boundNoop,
         onFontSizeChange: util.boundNoop,
+        maxLength: 10,
     };
     public state = {
         fixedWidthInPxIfExists: undefined,
@@ -50,13 +58,35 @@ export class ScalingInput extends React.Component<ScalingInputProps> {
         const { value, startWidthCh, endWidthCh } = props;
         return ScalingInput.getPhase(startWidthCh, endWidthCh, value);
     }
-    public componentDidUpdate(prevProps: ScalingInputProps): void {
+    public static calculateFontSize(props: ScalingInputProps): number {
+        const { startWidthCh, endWidthCh, value, maxFontSizePx } = props;
+        const phase = ScalingInput.getPhase(startWidthCh, endWidthCh, value);
+        if (_.isUndefined(value) || phase !== ScalingInputPhase.End) {
+            return maxFontSizePx;
+        }
+        const charactersOverMax = value.length - endWidthCh;
+        const scalingFactor = (1 - percentageToReduceByPerCharacter) ** charactersOverMax;
+        const fontSize = scalingFactor * maxFontSizePx;
+        return fontSize;
+    }
+    public getSnapshotBeforeUpdate(): ScalingInputSnapshot {
+        return {
+            inputWidthPx: this._getInputWidthInPx(),
+        };
+    }
+    public componentDidUpdate(
+        prevProps: ScalingInputProps,
+        prevState: ScalingInputState,
+        snapshot: ScalingInputSnapshot,
+    ): void {
         const prevPhase = ScalingInput.getPhaseFromProps(prevProps);
         const curPhase = ScalingInput.getPhaseFromProps(this.props);
+        const prevFontSize = ScalingInput.calculateFontSize(prevProps);
+        const curFontSize = ScalingInput.calculateFontSize(this.props);
         // if we went from anything else to end, fix to the current width as it shouldn't change as we grow
         if (prevPhase !== ScalingInputPhase.End && curPhase === ScalingInputPhase.End) {
             this.setState({
-                fixedWidthInPxIfExists: this._getInputWidthInPx(),
+                fixedWidthInPxIfExists: snapshot.inputWidthPx,
             });
         }
         // if we end from end to to anything else, un-fix the width
@@ -65,19 +95,24 @@ export class ScalingInput extends React.Component<ScalingInputProps> {
                 fixedWidthInPxIfExists: undefined,
             });
         }
+        // If font size has changed, notify.
+        if (prevFontSize !== curFontSize) {
+            this.props.onFontSizeChange(curFontSize);
+        }
     }
     public render(): React.ReactNode {
-        const { fontColor, onChange, placeholder, value } = this.props;
+        const { fontColor, onChange, placeholder, value, maxLength } = this.props;
         const phase = ScalingInput.getPhaseFromProps(this.props);
         return (
             <Input
                 ref={this._inputRef as any}
                 fontColor={fontColor}
-                onChange={this._handleChange}
+                onChange={onChange}
                 value={value}
                 placeholder={placeholder}
-                fontSize={`${this.props.fontSizePx}px`}
+                fontSize={`${ScalingInput.calculateFontSize(this.props)}px`}
                 width={this._calculateWidth()}
+                maxLength={maxLength}
             />
         );
     }
@@ -108,24 +143,4 @@ export class ScalingInput extends React.Component<ScalingInputProps> {
         }
         return (ref as any).getBoundingClientRect().width;
     };
-    private readonly _calculateNextFontSize = (
-        currentFontSizePx: number,
-        value: string,
-        startWidthCh: number,
-        endWidthCh: number,
-    ): number => {
-        const phase = ScalingInput.getPhase(startWidthCh, endWidthCh, value);
-        if (_.isUndefined(value) || phase !== ScalingInputPhase.End) {
-            return currentFontSizePx;
-        }
-        const charactersOverMax = value.length - endWidthCh;
-        const pixelsToReduceFontSizeBy = charactersOverMax * 5;
-        const fontSize = currentFontSizePx - pixelsToReduceFontSizeBy;
-        return fontSize;
-    };
-    private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const value = event.target.value;
-        const { fontSizePx, startWidthCh, endWidthCh } = this.props;
-        this.props.onChange(event, this._calculateNextFontSize(fontSizePx, value, startWidthCh, endWidthCh));
-    };
 }
-- 
cgit v1.2.3


From bdf623dab54132f257057a6949d0a1e245d0b468 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 22 Oct 2018 16:54:08 -0700
Subject: chore: refactor ScalingInput

---
 packages/instant/src/components/scaling_input.tsx | 27 +++++++++++++++--------
 1 file changed, 18 insertions(+), 9 deletions(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 7824c10f9..c1111cea9 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -58,9 +58,12 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         const { value, startWidthCh, endWidthCh } = props;
         return ScalingInput.getPhase(startWidthCh, endWidthCh, value);
     }
-    public static calculateFontSize(props: ScalingInputProps): number {
-        const { startWidthCh, endWidthCh, value, maxFontSizePx } = props;
-        const phase = ScalingInput.getPhase(startWidthCh, endWidthCh, value);
+    public static calculateFontSize(
+        endWidthCh: number,
+        maxFontSizePx: number,
+        phase: ScalingInputPhase,
+        value?: string,
+    ): number {
         if (_.isUndefined(value) || phase !== ScalingInputPhase.End) {
             return maxFontSizePx;
         }
@@ -69,6 +72,10 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         const fontSize = scalingFactor * maxFontSizePx;
         return fontSize;
     }
+    public static calculateFontSizeFromProps(props: ScalingInputProps, phase: ScalingInputPhase): number {
+        const { endWidthCh, value, maxFontSizePx } = props;
+        return ScalingInput.calculateFontSize(endWidthCh, maxFontSizePx, phase, value);
+    }
     public getSnapshotBeforeUpdate(): ScalingInputSnapshot {
         return {
             inputWidthPx: this._getInputWidthInPx(),
@@ -81,8 +88,8 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
     ): void {
         const prevPhase = ScalingInput.getPhaseFromProps(prevProps);
         const curPhase = ScalingInput.getPhaseFromProps(this.props);
-        const prevFontSize = ScalingInput.calculateFontSize(prevProps);
-        const curFontSize = ScalingInput.calculateFontSize(this.props);
+        const prevFontSize = ScalingInput.calculateFontSizeFromProps(prevProps, prevPhase);
+        const curFontSize = ScalingInput.calculateFontSizeFromProps(this.props, curPhase);
         // if we went from anything else to end, fix to the current width as it shouldn't change as we grow
         if (prevPhase !== ScalingInputPhase.End && curPhase === ScalingInputPhase.End) {
             this.setState({
@@ -110,14 +117,13 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
                 onChange={onChange}
                 value={value}
                 placeholder={placeholder}
-                fontSize={`${ScalingInput.calculateFontSize(this.props)}px`}
-                width={this._calculateWidth()}
+                fontSize={`${this._calculateFontSize(phase)}px`}
+                width={this._calculateWidth(phase)}
                 maxLength={maxLength}
             />
         );
     }
-    private readonly _calculateWidth = (): string => {
-        const phase = ScalingInput.getPhaseFromProps(this.props);
+    private readonly _calculateWidth = (phase: ScalingInputPhase): string => {
         const { value, startWidthCh, endWidthCh } = this.props;
         if (_.isUndefined(value)) {
             return `${startWidthCh}ch`;
@@ -136,6 +142,9 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
                 return `${startWidthCh}ch`;
         }
     };
+    private readonly _calculateFontSize = (phase: ScalingInputPhase): number => {
+        return ScalingInput.calculateFontSizeFromProps(this.props, phase);
+    };
     private readonly _getInputWidthInPx = (): number => {
         const ref = this._inputRef.current;
         if (!ref) {
-- 
cgit v1.2.3


From 28f0deb3ebe2f78f98e79d59b8b2a3eacb1c6fef Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 22 Oct 2018 17:42:28 -0700
Subject: chore: final adjustments

---
 packages/instant/src/components/asset_amount_input.tsx | 2 +-
 packages/instant/src/components/scaling_input.tsx      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
index beb21a4cf..bfa857f0e 100644
--- a/packages/instant/src/components/asset_amount_input.tsx
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -40,7 +40,7 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps, Ass
                     <ScalingAmountInput
                         {...rest}
                         startWidthCh={3.5}
-                        endWidthCh={5}
+                        endWidthCh={4}
                         maxFontSizePx={this.props.startingFontSizePx}
                         onChange={this._handleChange}
                         onFontSizeChange={this._handleFontSizeChange}
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index c1111cea9..57ebf93ac 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -34,12 +34,12 @@ export interface ScalingInputSnapshot {
     inputWidthPx: number;
 }
 // This is a magic number that was determined experimentally.
-const percentageToReduceByPerCharacter = 0.15;
+const percentageToReduceByPerCharacter = 0.18;
 export class ScalingInput extends React.Component<ScalingInputProps, ScalingInputState> {
     public static defaultProps = {
         onChange: util.boundNoop,
         onFontSizeChange: util.boundNoop,
-        maxLength: 10,
+        maxLength: 9,
     };
     public state = {
         fixedWidthInPxIfExists: undefined,
-- 
cgit v1.2.3


From b7a5e40c62adfbd8732b3cd98d2c989a6a021c54 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 22 Oct 2018 17:56:50 -0700
Subject: chore: run linter

---
 packages/instant/src/components/scaling_amount_input.tsx | 1 -
 packages/instant/src/components/scaling_input.tsx        | 6 ++----
 packages/instant/src/components/ui/container.tsx         | 1 -
 packages/instant/src/components/ui/flex.tsx              | 5 -----
 4 files changed, 2 insertions(+), 11 deletions(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 83375af00..9539bfd94 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -6,7 +6,6 @@ import { ColorOption } from '../style/theme';
 import { util } from '../util/util';
 
 import { ScalingInput } from './scaling_input';
-import { Container, Text } from './ui';
 
 export interface ScalingAmountInputProps {
     maxFontSizePx: number;
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 57ebf93ac..10243787a 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -1,12 +1,10 @@
-import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 
 import { ColorOption } from '../style/theme';
 import { util } from '../util/util';
 
-import { Container, Input } from './ui';
+import { Input } from './ui';
 
 export enum ScalingInputPhase {
     Start,
@@ -44,7 +42,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
     public state = {
         fixedWidthInPxIfExists: undefined,
     };
-    private _inputRef = React.createRef();
+    private readonly _inputRef = React.createRef();
     public static getPhase(startWidthCh: number, endWidthCh: number, value?: string): ScalingInputPhase {
         if (_.isUndefined(value) || value.length <= startWidthCh) {
             return ScalingInputPhase.Start;
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index b7e17d807..8b204826d 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 
 import { ColorOption, styled } from '../../style/theme';
 import { cssRuleIfExists } from '../../style/util';
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index f2013f60f..2b430129d 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 
 import { ColorOption, styled } from '../../style/theme';
 import { cssRuleIfExists } from '../../style/util';
@@ -13,10 +12,6 @@ export interface FlexProps {
     className?: string;
 }
 
-const PlainFlex: React.StatelessComponent<FlexProps> = ({ children, className }) => (
-    <div className={className}>{children}</div>
-);
-
 export const Flex = styled<FlexProps, 'div'>('div')`
     display: flex;
     flex-direction: ${props => props.direction};
-- 
cgit v1.2.3


From f0c79473bdaeb87f49a9eb59fc88336f02e81546 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 23 Oct 2018 15:01:22 -0700
Subject: fix: dont allow heading to change height when input size changes

---
 packages/instant/src/components/instant_heading.tsx | 4 +++-
 packages/instant/src/components/ui/container.tsx    | 3 ++-
 packages/instant/src/components/ui/flex.tsx         | 3 ++-
 3 files changed, 7 insertions(+), 3 deletions(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index defe3b8b1..7664d31ae 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -69,7 +69,9 @@ export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = pro
             </Text>
         </Container>
         <Flex direction="row" justify="space-between">
-            <SelectedAssetAmountInput startingFontSizePx={45} />
+            <Flex height="65px">
+                <SelectedAssetAmountInput startingFontSizePx={45} />
+            </Flex>
             <Flex direction="column" justify="space-between">
                 <Container marginBottom="5px">
                     <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 8b204826d..293042120 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -1,4 +1,3 @@
-
 import { ColorOption, styled } from '../../style/theme';
 import { cssRuleIfExists } from '../../style/util';
 
@@ -10,6 +9,7 @@ export interface ContainerProps {
     bottom?: string;
     left?: string;
     width?: string;
+    height?: string;
     maxWidth?: string;
     margin?: string;
     marginTop?: string;
@@ -37,6 +37,7 @@ export const Container = styled<ContainerProps, 'div'>('div')`
     ${props => cssRuleIfExists(props, 'bottom')}
     ${props => cssRuleIfExists(props, 'left')}
     ${props => cssRuleIfExists(props, 'width')}
+    ${props => cssRuleIfExists(props, 'height')}
     ${props => cssRuleIfExists(props, 'max-width')}
     ${props => cssRuleIfExists(props, 'margin')}
     ${props => cssRuleIfExists(props, 'margin-top')}
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index 2b430129d..d4e14d979 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -1,4 +1,3 @@
-
 import { ColorOption, styled } from '../../style/theme';
 import { cssRuleIfExists } from '../../style/util';
 
@@ -8,6 +7,7 @@ export interface FlexProps {
     justify?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
     align?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
     width?: string;
+    height?: string;
     backgroundColor?: ColorOption;
     className?: string;
 }
@@ -19,6 +19,7 @@ export const Flex = styled<FlexProps, 'div'>('div')`
     justify-content: ${props => props.justify};
     align-items: ${props => props.align};
     ${props => cssRuleIfExists(props, 'width')}
+    ${props => cssRuleIfExists(props, 'height')}
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
 `;
 
-- 
cgit v1.2.3


From 053e147afc1b8471c480a8612cb6bae4c363b21b Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 23 Oct 2018 15:19:01 -0700
Subject: fix: remove the concept of initial with from scaling input and remove
 phase

---
 .../src/components/scaling_amount_input.tsx        |  2 +-
 packages/instant/src/components/scaling_input.tsx  | 46 ++++++++++------------
 2 files changed, 21 insertions(+), 27 deletions(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 9539bfd94..2baff5621 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -26,7 +26,6 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
         const { startWidthCh, endWidthCh, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props;
         return (
             <ScalingInput
-                startWidthCh={startWidthCh}
                 endWidthCh={endWidthCh}
                 maxFontSizePx={maxFontSizePx}
                 onFontSizeChange={onFontSizeChange}
@@ -34,6 +33,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
                 onChange={this._handleChange}
                 value={!_.isUndefined(value) ? value.toString() : ''}
                 placeholder="0.00"
+                emptyInputWidthCh={3.5}
             />
         );
     }
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 10243787a..5db878c52 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -7,16 +7,15 @@ import { util } from '../util/util';
 import { Input } from './ui';
 
 export enum ScalingInputPhase {
-    Start,
-    Scaling,
-    End,
+    FixedFontSize,
+    ScalingFontSize,
 }
 
 export interface ScalingInputProps {
-    startWidthCh: number;
     endWidthCh: number;
     maxFontSizePx: number;
-    value?: string;
+    value: string;
+    emptyInputWidthCh: number;
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onFontSizeChange: (fontSizePx: number) => void;
     fontColor?: ColorOption;
@@ -43,26 +42,23 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         fixedWidthInPxIfExists: undefined,
     };
     private readonly _inputRef = React.createRef();
-    public static getPhase(startWidthCh: number, endWidthCh: number, value?: string): ScalingInputPhase {
-        if (_.isUndefined(value) || value.length <= startWidthCh) {
-            return ScalingInputPhase.Start;
+    public static getPhase(endWidthCh: number, value: string): ScalingInputPhase {
+        if (value.length <= endWidthCh) {
+            return ScalingInputPhase.FixedFontSize;
         }
-        if (value.length > startWidthCh && value.length <= endWidthCh) {
-            return ScalingInputPhase.Scaling;
-        }
-        return ScalingInputPhase.End;
+        return ScalingInputPhase.ScalingFontSize;
     }
     public static getPhaseFromProps(props: ScalingInputProps): ScalingInputPhase {
-        const { value, startWidthCh, endWidthCh } = props;
-        return ScalingInput.getPhase(startWidthCh, endWidthCh, value);
+        const { value, endWidthCh } = props;
+        return ScalingInput.getPhase(endWidthCh, value);
     }
     public static calculateFontSize(
         endWidthCh: number,
         maxFontSizePx: number,
         phase: ScalingInputPhase,
-        value?: string,
+        value: string,
     ): number {
-        if (_.isUndefined(value) || phase !== ScalingInputPhase.End) {
+        if (phase !== ScalingInputPhase.ScalingFontSize) {
             return maxFontSizePx;
         }
         const charactersOverMax = value.length - endWidthCh;
@@ -89,13 +85,13 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         const prevFontSize = ScalingInput.calculateFontSizeFromProps(prevProps, prevPhase);
         const curFontSize = ScalingInput.calculateFontSizeFromProps(this.props, curPhase);
         // if we went from anything else to end, fix to the current width as it shouldn't change as we grow
-        if (prevPhase !== ScalingInputPhase.End && curPhase === ScalingInputPhase.End) {
+        if (prevPhase !== ScalingInputPhase.ScalingFontSize && curPhase === ScalingInputPhase.ScalingFontSize) {
             this.setState({
                 fixedWidthInPxIfExists: snapshot.inputWidthPx,
             });
         }
         // if we end from end to to anything else, un-fix the width
-        if (prevPhase === ScalingInputPhase.End && curPhase !== ScalingInputPhase.End) {
+        if (prevPhase === ScalingInputPhase.ScalingFontSize && curPhase !== ScalingInputPhase.ScalingFontSize) {
             this.setState({
                 fixedWidthInPxIfExists: undefined,
             });
@@ -122,22 +118,20 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         );
     }
     private readonly _calculateWidth = (phase: ScalingInputPhase): string => {
-        const { value, startWidthCh, endWidthCh } = this.props;
-        if (_.isUndefined(value)) {
-            return `${startWidthCh}ch`;
+        const { value, endWidthCh } = this.props;
+        if (_.isEmpty(value)) {
+            return `${this.props.emptyInputWidthCh}ch`;
         }
         if (!_.isUndefined(this.state.fixedWidthInPxIfExists)) {
             return `${this.state.fixedWidthInPxIfExists}px`;
         }
         switch (phase) {
-            case ScalingInputPhase.Start:
-                return `${startWidthCh}ch`;
-            case ScalingInputPhase.Scaling:
+            case ScalingInputPhase.FixedFontSize:
                 return `${value.length}ch`;
-            case ScalingInputPhase.End:
+            case ScalingInputPhase.ScalingFontSize:
                 return `${endWidthCh}ch`;
             default:
-                return `${startWidthCh}ch`;
+                return '1ch';
         }
     };
     private readonly _calculateFontSize = (phase: ScalingInputPhase): number => {
-- 
cgit v1.2.3


From a5edb0b421afaaa34290dc3ada73da6bca3c556a Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 23 Oct 2018 15:54:18 -0700
Subject: polish: improve scaling significantly

---
 .../instant/src/components/asset_amount_input.tsx  |  3 +-
 .../src/components/scaling_amount_input.tsx        |  7 +--
 packages/instant/src/components/scaling_input.tsx  | 68 +++++++++++++++-------
 3 files changed, 50 insertions(+), 28 deletions(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
index bfa857f0e..8cbf2b37a 100644
--- a/packages/instant/src/components/asset_amount_input.tsx
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -39,8 +39,7 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps, Ass
                 <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block">
                     <ScalingAmountInput
                         {...rest}
-                        startWidthCh={3.5}
-                        endWidthCh={4}
+                        textLengthThreshold={4}
                         maxFontSizePx={this.props.startingFontSizePx}
                         onChange={this._handleChange}
                         onFontSizeChange={this._handleFontSizeChange}
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 2baff5621..db3062b57 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -9,8 +9,7 @@ import { ScalingInput } from './scaling_input';
 
 export interface ScalingAmountInputProps {
     maxFontSizePx: number;
-    startWidthCh: number;
-    endWidthCh: number;
+    textLengthThreshold: number;
     fontColor?: ColorOption;
     value?: BigNumber;
     onChange: (value?: BigNumber, fontSize?: number) => void;
@@ -23,11 +22,11 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
         onFontSizeChange: util.boundNoop,
     };
     public render(): React.ReactNode {
-        const { startWidthCh, endWidthCh, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props;
+        const { textLengthThreshold, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props;
         return (
             <ScalingInput
-                endWidthCh={endWidthCh}
                 maxFontSizePx={maxFontSizePx}
+                textLengthThreshold={textLengthThreshold}
                 onFontSizeChange={onFontSizeChange}
                 fontColor={fontColor}
                 onChange={this._handleChange}
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 5db878c52..7f8e505de 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -11,8 +11,13 @@ export enum ScalingInputPhase {
     ScalingFontSize,
 }
 
+export interface ScalingSettings {
+    percentageToReduceFontSizePerCharacter: number;
+    percentageToIncreaseWidthPerCharacter: number;
+}
+
 export interface ScalingInputProps {
-    endWidthCh: number;
+    textLengthThreshold: number;
     maxFontSizePx: number;
     value: string;
     emptyInputWidthCh: number;
@@ -21,54 +26,68 @@ export interface ScalingInputProps {
     fontColor?: ColorOption;
     placeholder?: string;
     maxLength?: number;
+    scalingSettings: ScalingSettings;
 }
 
 export interface ScalingInputState {
-    fixedWidthInPxIfExists?: number;
+    inputWidthPxAtPhaseChange?: number;
 }
 
 export interface ScalingInputSnapshot {
     inputWidthPx: number;
 }
-// This is a magic number that was determined experimentally.
-const percentageToReduceByPerCharacter = 0.18;
+
+// These are magic numbers that were determined experimentally.
+const defaultScalingSettings: ScalingSettings = {
+    percentageToReduceFontSizePerCharacter: 0.125,
+    percentageToIncreaseWidthPerCharacter: 0.06,
+};
+
 export class ScalingInput extends React.Component<ScalingInputProps, ScalingInputState> {
     public static defaultProps = {
         onChange: util.boundNoop,
         onFontSizeChange: util.boundNoop,
-        maxLength: 9,
+        maxLength: 8,
+        scalingSettings: defaultScalingSettings,
     };
     public state = {
-        fixedWidthInPxIfExists: undefined,
+        inputWidthPxAtPhaseChange: undefined,
     };
     private readonly _inputRef = React.createRef();
-    public static getPhase(endWidthCh: number, value: string): ScalingInputPhase {
-        if (value.length <= endWidthCh) {
+    public static getPhase(textLengthThreshold: number, value: string): ScalingInputPhase {
+        if (value.length <= textLengthThreshold) {
             return ScalingInputPhase.FixedFontSize;
         }
         return ScalingInputPhase.ScalingFontSize;
     }
     public static getPhaseFromProps(props: ScalingInputProps): ScalingInputPhase {
-        const { value, endWidthCh } = props;
-        return ScalingInput.getPhase(endWidthCh, value);
+        const { value, textLengthThreshold } = props;
+        return ScalingInput.getPhase(textLengthThreshold, value);
     }
     public static calculateFontSize(
-        endWidthCh: number,
+        textLengthThreshold: number,
         maxFontSizePx: number,
         phase: ScalingInputPhase,
         value: string,
+        percentageToReduceFontSizePerCharacter: number,
     ): number {
         if (phase !== ScalingInputPhase.ScalingFontSize) {
             return maxFontSizePx;
         }
-        const charactersOverMax = value.length - endWidthCh;
-        const scalingFactor = (1 - percentageToReduceByPerCharacter) ** charactersOverMax;
+        const charactersOverMax = value.length - textLengthThreshold;
+        const scalingFactor = (1 - percentageToReduceFontSizePerCharacter) ** charactersOverMax;
         const fontSize = scalingFactor * maxFontSizePx;
         return fontSize;
     }
     public static calculateFontSizeFromProps(props: ScalingInputProps, phase: ScalingInputPhase): number {
-        const { endWidthCh, value, maxFontSizePx } = props;
-        return ScalingInput.calculateFontSize(endWidthCh, maxFontSizePx, phase, value);
+        const { textLengthThreshold, value, maxFontSizePx, scalingSettings } = props;
+        return ScalingInput.calculateFontSize(
+            textLengthThreshold,
+            maxFontSizePx,
+            phase,
+            value,
+            scalingSettings.percentageToReduceFontSizePerCharacter,
+        );
     }
     public getSnapshotBeforeUpdate(): ScalingInputSnapshot {
         return {
@@ -87,13 +106,13 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         // if we went from anything else to end, fix to the current width as it shouldn't change as we grow
         if (prevPhase !== ScalingInputPhase.ScalingFontSize && curPhase === ScalingInputPhase.ScalingFontSize) {
             this.setState({
-                fixedWidthInPxIfExists: snapshot.inputWidthPx,
+                inputWidthPxAtPhaseChange: snapshot.inputWidthPx,
             });
         }
         // if we end from end to to anything else, un-fix the width
         if (prevPhase === ScalingInputPhase.ScalingFontSize && curPhase !== ScalingInputPhase.ScalingFontSize) {
             this.setState({
-                fixedWidthInPxIfExists: undefined,
+                inputWidthPxAtPhaseChange: undefined,
             });
         }
         // If font size has changed, notify.
@@ -118,18 +137,23 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         );
     }
     private readonly _calculateWidth = (phase: ScalingInputPhase): string => {
-        const { value, endWidthCh } = this.props;
+        const { value, textLengthThreshold, scalingSettings } = this.props;
         if (_.isEmpty(value)) {
             return `${this.props.emptyInputWidthCh}ch`;
         }
-        if (!_.isUndefined(this.state.fixedWidthInPxIfExists)) {
-            return `${this.state.fixedWidthInPxIfExists}px`;
-        }
         switch (phase) {
             case ScalingInputPhase.FixedFontSize:
                 return `${value.length}ch`;
             case ScalingInputPhase.ScalingFontSize:
-                return `${endWidthCh}ch`;
+                const { inputWidthPxAtPhaseChange } = this.state;
+                if (!_.isUndefined(inputWidthPxAtPhaseChange)) {
+                    const charactersOverMax = value.length - textLengthThreshold;
+                    const scalingFactor =
+                        (scalingSettings.percentageToIncreaseWidthPerCharacter + 1) ** charactersOverMax;
+                    const width = scalingFactor * inputWidthPxAtPhaseChange;
+                    return `${width}px`;
+                }
+                return `${textLengthThreshold}ch`;
             default:
                 return '1ch';
         }
-- 
cgit v1.2.3


From 751b87af962d5b1f9f65514c10de2f7cb0b13c34 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 23 Oct 2018 16:28:08 -0700
Subject: fix: remove unused callback info

---
 packages/instant/src/components/scaling_amount_input.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index db3062b57..233e29cff 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -12,7 +12,7 @@ export interface ScalingAmountInputProps {
     textLengthThreshold: number;
     fontColor?: ColorOption;
     value?: BigNumber;
-    onChange: (value?: BigNumber, fontSize?: number) => void;
+    onChange: (value?: BigNumber) => void;
     onFontSizeChange: (fontSizePx: number) => void;
 }
 
@@ -36,7 +36,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
             />
         );
     }
-    private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>, fontSize?: number): void => {
+    private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
         const value = event.target.value;
         let bigNumberValue;
         if (!_.isEmpty(value)) {
@@ -47,6 +47,6 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
                 return;
             }
         }
-        this.props.onChange(bigNumberValue, fontSize);
+        this.props.onChange(bigNumberValue);
     };
 }
-- 
cgit v1.2.3


From 7ccfa8a8afe103e1cc2920724b6f17644fe5629d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 23 Oct 2018 16:59:31 -0700
Subject: feat: support half-written decimal numbers in BigNumberInput

---
 packages/instant/src/components/scaling_amount_input.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 233e29cff..23a15305a 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -3,6 +3,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
+import { BigNumberInput } from '../util/big_number';
 import { util } from '../util/util';
 
 import { ScalingInput } from './scaling_input';
@@ -41,7 +42,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
         let bigNumberValue;
         if (!_.isEmpty(value)) {
             try {
-                bigNumberValue = new BigNumber(event.target.value);
+                bigNumberValue = new BigNumberInput(event.target.value);
             } catch {
                 // We don't want to allow values that can't be a BigNumber, so don't even call onChange.
                 return;
-- 
cgit v1.2.3


From 2e184f081e546acbc8ed3e5e05de5a9e5b56a3d8 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 23 Oct 2018 17:17:10 -0700
Subject: feat: add title attribute to label

---
 packages/instant/src/components/asset_amount_input.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
index 8cbf2b37a..368ef10c2 100644
--- a/packages/instant/src/components/asset_amount_input.tsx
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -45,13 +45,13 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps, Ass
                         onFontSizeChange={this._handleFontSizeChange}
                     />
                 </Container>
-                <Container display="inline-block" marginLeft="10px">
+                <Container display="inline-block" marginLeft="10px" title={assetUtils.bestNameForAsset(asset)}>
                     <Text
                         fontSize={`${this.state.currentFontSizePx}px`}
                         fontColor={ColorOption.white}
                         textTransform="uppercase"
                     >
-                        {assetUtils.bestNameForAsset(asset)}
+                        {assetUtils.formattedSymbolForAsset(asset)}
                     </Text>
                 </Container>
             </Container>
-- 
cgit v1.2.3


From 47737d4d0fce56454c9ee2b43782b824b88cb942 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 23 Oct 2018 20:02:50 -0700
Subject: feat: cover more token symbol edge cases

---
 .../instant/src/components/asset_amount_input.tsx   | 21 +++++++++++++++++----
 packages/instant/src/components/instant_heading.tsx |  4 ++--
 packages/instant/src/components/scaling_input.tsx   |  2 +-
 packages/instant/src/components/ui/container.tsx    |  2 ++
 4 files changed, 22 insertions(+), 7 deletions(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
index 368ef10c2..960b8bc95 100644
--- a/packages/instant/src/components/asset_amount_input.tsx
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -8,7 +8,7 @@ import { assetUtils } from '../util/asset';
 import { util } from '../util/util';
 
 import { ScalingAmountInput } from './scaling_amount_input';
-import { Container, Text } from './ui';
+import { Container, Flex, Text } from './ui';
 
 // Asset amounts only apply to ERC20 assets
 export interface AssetAmountInputProps {
@@ -35,17 +35,17 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps, Ass
     public render(): React.ReactNode {
         const { asset, onChange, ...rest } = this.props;
         return (
-            <Container>
+            <Container whiteSpace="nowrap">
                 <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block">
                     <ScalingAmountInput
                         {...rest}
-                        textLengthThreshold={4}
+                        textLengthThreshold={this._textLengthThresholdForAsset(asset)}
                         maxFontSizePx={this.props.startingFontSizePx}
                         onChange={this._handleChange}
                         onFontSizeChange={this._handleFontSizeChange}
                     />
                 </Container>
-                <Container display="inline-block" marginLeft="10px" title={assetUtils.bestNameForAsset(asset)}>
+                <Container display="inline-flex" marginLeft="10px" title={assetUtils.bestNameForAsset(asset)}>
                     <Text
                         fontSize={`${this.state.currentFontSizePx}px`}
                         fontColor={ColorOption.white}
@@ -65,4 +65,17 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps, Ass
             currentFontSizePx: fontSizePx,
         });
     };
+    private readonly _textLengthThresholdForAsset = (asset?: ERC20Asset): number => {
+        if (_.isUndefined(asset)) {
+            return 3;
+        }
+        const symbol = asset.metaData.symbol;
+        if (symbol.length <= 3) {
+            return 5;
+        }
+        if (symbol.length === 5) {
+            return 3;
+        }
+        return 4;
+    };
 }
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 7664d31ae..c9f0ea95a 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -70,10 +70,10 @@ export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = pro
         </Container>
         <Flex direction="row" justify="space-between">
             <Flex height="65px">
-                <SelectedAssetAmountInput startingFontSizePx={45} />
+                <SelectedAssetAmountInput startingFontSizePx={38} />
             </Flex>
             <Flex direction="column" justify="space-between">
-                <Container marginBottom="5px">
+                <Container marginBottom="5px" whiteSpace="nowrap">
                     <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
                         {loadingOrAmount(props.quoteState, displaytotalEthBaseAmount(props))}
                     </Text>
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 7f8e505de..fadb3466b 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -47,7 +47,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
     public static defaultProps = {
         onChange: util.boundNoop,
         onFontSizeChange: util.boundNoop,
-        maxLength: 8,
+        maxLength: 7,
         scalingSettings: defaultScalingSettings,
     };
     public state = {
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 293042120..e44cfff1e 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -26,6 +26,7 @@ export interface ContainerProps {
     backgroundColor?: ColorOption;
     hasBoxShadow?: boolean;
     zIndex?: number;
+    whiteSpace?: string;
 }
 
 export const Container = styled<ContainerProps, 'div'>('div')`
@@ -50,6 +51,7 @@ export const Container = styled<ContainerProps, 'div'>('div')`
     ${props => cssRuleIfExists(props, 'border-top')}
     ${props => cssRuleIfExists(props, 'border-bottom')}
     ${props => cssRuleIfExists(props, 'z-index')}
+    ${props => cssRuleIfExists(props, 'white-space')}
     ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
     border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
-- 
cgit v1.2.3


From f89b314a94f867fa905a1ce18eba9336ee4d1634 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 24 Oct 2018 12:52:32 -0700
Subject: fix: address PR feedback

---
 packages/instant/src/components/scaling_input.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index fadb3466b..6948c86c1 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -53,7 +53,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
     public state = {
         inputWidthPxAtPhaseChange: undefined,
     };
-    private readonly _inputRef = React.createRef();
+    private readonly _inputRef = React.createRef<HTMLInputElement>();
     public static getPhase(textLengthThreshold: number, value: string): ScalingInputPhase {
         if (value.length <= textLengthThreshold) {
             return ScalingInputPhase.FixedFontSize;
@@ -101,8 +101,6 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
     ): void {
         const prevPhase = ScalingInput.getPhaseFromProps(prevProps);
         const curPhase = ScalingInput.getPhaseFromProps(this.props);
-        const prevFontSize = ScalingInput.calculateFontSizeFromProps(prevProps, prevPhase);
-        const curFontSize = ScalingInput.calculateFontSizeFromProps(this.props, curPhase);
         // if we went from anything else to end, fix to the current width as it shouldn't change as we grow
         if (prevPhase !== ScalingInputPhase.ScalingFontSize && curPhase === ScalingInputPhase.ScalingFontSize) {
             this.setState({
@@ -115,6 +113,8 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
                 inputWidthPxAtPhaseChange: undefined,
             });
         }
+        const prevFontSize = ScalingInput.calculateFontSizeFromProps(prevProps, prevPhase);
+        const curFontSize = ScalingInput.calculateFontSizeFromProps(this.props, curPhase);
         // If font size has changed, notify.
         if (prevFontSize !== curFontSize) {
             this.props.onFontSizeChange(curFontSize);
@@ -166,6 +166,6 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         if (!ref) {
             return 0;
         }
-        return (ref as any).getBoundingClientRect().width;
+        return ref.getBoundingClientRect().width;
     };
 }
-- 
cgit v1.2.3


From c5554fe30c199155d4e020028aa4aa1f808918b9 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 24 Oct 2018 12:57:20 -0700
Subject: chore: run linter

---
 packages/instant/src/components/asset_amount_input.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
index 960b8bc95..4d2dc0bd8 100644
--- a/packages/instant/src/components/asset_amount_input.tsx
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -8,7 +8,7 @@ import { assetUtils } from '../util/asset';
 import { util } from '../util/util';
 
 import { ScalingAmountInput } from './scaling_amount_input';
-import { Container, Flex, Text } from './ui';
+import { Container, Text } from './ui';
 
 // Asset amounts only apply to ERC20 assets
 export interface AssetAmountInputProps {
-- 
cgit v1.2.3


From 2d9c961d4f0d03cfd2f3c15dd306fad47ad1f259 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 24 Oct 2018 13:05:52 -0700
Subject: feat: change to increasing input width by a constant amount per
 additional character

---
 packages/instant/src/components/scaling_input.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 6948c86c1..fd517def8 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -13,7 +13,7 @@ export enum ScalingInputPhase {
 
 export interface ScalingSettings {
     percentageToReduceFontSizePerCharacter: number;
-    percentageToIncreaseWidthPerCharacter: number;
+    constantPxToIncreaseWidthPerCharacter: number;
 }
 
 export interface ScalingInputProps {
@@ -40,7 +40,7 @@ export interface ScalingInputSnapshot {
 // These are magic numbers that were determined experimentally.
 const defaultScalingSettings: ScalingSettings = {
     percentageToReduceFontSizePerCharacter: 0.125,
-    percentageToIncreaseWidthPerCharacter: 0.06,
+    constantPxToIncreaseWidthPerCharacter: 4,
 };
 
 export class ScalingInput extends React.Component<ScalingInputProps, ScalingInputState> {
@@ -148,9 +148,8 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
                 const { inputWidthPxAtPhaseChange } = this.state;
                 if (!_.isUndefined(inputWidthPxAtPhaseChange)) {
                     const charactersOverMax = value.length - textLengthThreshold;
-                    const scalingFactor =
-                        (scalingSettings.percentageToIncreaseWidthPerCharacter + 1) ** charactersOverMax;
-                    const width = scalingFactor * inputWidthPxAtPhaseChange;
+                    const scalingAmount = scalingSettings.constantPxToIncreaseWidthPerCharacter * charactersOverMax;
+                    const width = inputWidthPxAtPhaseChange + scalingAmount;
                     return `${width}px`;
                 }
                 return `${textLengthThreshold}ch`;
-- 
cgit v1.2.3


From c7a063ca47c3a5b62fe070ba10055b575c1707de Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 24 Oct 2018 13:38:28 -0700
Subject: fix: weird linting error that depends on types

---
 packages/instant/src/components/scaling_input.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index fd517def8..c927f9419 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -50,7 +50,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         maxLength: 7,
         scalingSettings: defaultScalingSettings,
     };
-    public state = {
+    public state: ScalingInputState = {
         inputWidthPxAtPhaseChange: undefined,
     };
     private readonly _inputRef = React.createRef<HTMLInputElement>();
-- 
cgit v1.2.3


From 379f7c788385cfc15fea8d0bb0a2a39f0c709b8d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 24 Oct 2018 13:44:00 -0700
Subject: chore: use alternate syntax for styled

---
 packages/instant/src/components/ui/container.tsx | 5 ++++-
 packages/instant/src/components/ui/flex.tsx      | 5 ++++-
 packages/instant/src/components/ui/input.tsx     | 5 ++++-
 packages/instant/src/components/ui/text.tsx      | 5 ++++-
 4 files changed, 16 insertions(+), 4 deletions(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 7077d0aa3..76b570de7 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -30,7 +30,10 @@ export interface ContainerProps {
     opacity?: number;
 }
 
-export const Container = styled<ContainerProps, 'div'>('div')`
+export const Container =
+    styled.div <
+    ContainerProps >
+    `
     box-sizing: border-box;
     ${props => cssRuleIfExists(props, 'display')}
     ${props => cssRuleIfExists(props, 'position')}
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index d4e14d979..5fa3fc95b 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -12,7 +12,10 @@ export interface FlexProps {
     className?: string;
 }
 
-export const Flex = styled<FlexProps, 'div'>('div')`
+export const Flex =
+    styled.div <
+    FlexProps >
+    `
     display: flex;
     flex-direction: ${props => props.direction};
     flex-wrap: ${props => props.flexWrap};
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index 9db7d1c4c..a884ff7cb 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -12,7 +12,10 @@ export interface InputProps {
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const Input = styled<InputProps, 'input'>('input')`
+export const Input =
+    styled.input <
+    InputProps >
+    `
     font-size: ${props => props.fontSize};
     width: ${props => props.width};
     padding: 0.1em 0em;
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index d23b0034d..fd72f6cc8 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -24,7 +24,10 @@ export interface TextProps {
 }
 
 const darkenOnHoverAmount = 0.3;
-export const Text = styled<TextProps, 'div'>('div')`
+export const Text =
+    styled.div <
+    TextProps >
+    `
     font-family: ${props => props.fontFamily};
     font-style: ${props => props.fontStyle};
     font-weight: ${props => props.fontWeight};
-- 
cgit v1.2.3


From ab2759f43105c0f2d441790e138840706c6759f8 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 24 Oct 2018 13:47:00 -0700
Subject: chore: update comments

---
 packages/instant/src/components/scaling_input.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index c927f9419..34cb0b5fd 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -101,13 +101,13 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
     ): void {
         const prevPhase = ScalingInput.getPhaseFromProps(prevProps);
         const curPhase = ScalingInput.getPhaseFromProps(this.props);
-        // if we went from anything else to end, fix to the current width as it shouldn't change as we grow
+        // if we went from fixed to scaling, save the width from the transition
         if (prevPhase !== ScalingInputPhase.ScalingFontSize && curPhase === ScalingInputPhase.ScalingFontSize) {
             this.setState({
                 inputWidthPxAtPhaseChange: snapshot.inputWidthPx,
             });
         }
-        // if we end from end to to anything else, un-fix the width
+        // if we went from scaling to fixed, revert back to scaling using `ch`
         if (prevPhase === ScalingInputPhase.ScalingFontSize && curPhase !== ScalingInputPhase.ScalingFontSize) {
             this.setState({
                 inputWidthPxAtPhaseChange: undefined,
-- 
cgit v1.2.3


From d5d99b9d2e3c793a95c68c1035246644b3ae80c6 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 25 Oct 2018 18:35:06 -0700
Subject: chore: dont override toString of BigNumber and other PR feedback

---
 .../src/components/animations/slide_animations.tsx |  5 +-
 .../instant/src/components/asset_amount_input.tsx  | 81 ---------------------
 .../src/components/erc20_asset_amount_input.tsx    | 84 ++++++++++++++++++++++
 .../instant/src/components/instant_heading.tsx     |  4 +-
 .../src/components/scaling_amount_input.tsx        | 11 ++-
 5 files changed, 95 insertions(+), 90 deletions(-)
 delete mode 100644 packages/instant/src/components/asset_amount_input.tsx
 create mode 100644 packages/instant/src/components/erc20_asset_amount_input.tsx

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx
index 7c8666861..84280372b 100644
--- a/packages/instant/src/components/animations/slide_animations.tsx
+++ b/packages/instant/src/components/animations/slide_animations.tsx
@@ -21,7 +21,10 @@ export interface SlideAnimationProps {
     animationDirection?: string;
 }
 
-export const SlideAnimation = styled<SlideAnimationProps, 'div'>('div')`
+export const SlideAnimation =
+    styled.div <
+    SlideAnimationProps >
+    `
     animation-name: ${props =>
         css`
             ${props.keyframes};
diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
deleted file mode 100644
index 4d2dc0bd8..000000000
--- a/packages/instant/src/components/asset_amount_input.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { BigNumber } from '@0x/utils';
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { ColorOption } from '../style/theme';
-import { ERC20Asset } from '../types';
-import { assetUtils } from '../util/asset';
-import { util } from '../util/util';
-
-import { ScalingAmountInput } from './scaling_amount_input';
-import { Container, Text } from './ui';
-
-// Asset amounts only apply to ERC20 assets
-export interface AssetAmountInputProps {
-    asset?: ERC20Asset;
-    onChange: (value?: BigNumber, asset?: ERC20Asset) => void;
-    startingFontSizePx: number;
-    fontColor?: ColorOption;
-}
-
-export interface AssetAmountInputState {
-    currentFontSizePx: number;
-}
-
-export class AssetAmountInput extends React.Component<AssetAmountInputProps, AssetAmountInputState> {
-    public static defaultProps = {
-        onChange: util.boundNoop,
-    };
-    constructor(props: AssetAmountInputProps) {
-        super(props);
-        this.state = {
-            currentFontSizePx: props.startingFontSizePx,
-        };
-    }
-    public render(): React.ReactNode {
-        const { asset, onChange, ...rest } = this.props;
-        return (
-            <Container whiteSpace="nowrap">
-                <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block">
-                    <ScalingAmountInput
-                        {...rest}
-                        textLengthThreshold={this._textLengthThresholdForAsset(asset)}
-                        maxFontSizePx={this.props.startingFontSizePx}
-                        onChange={this._handleChange}
-                        onFontSizeChange={this._handleFontSizeChange}
-                    />
-                </Container>
-                <Container display="inline-flex" marginLeft="10px" title={assetUtils.bestNameForAsset(asset)}>
-                    <Text
-                        fontSize={`${this.state.currentFontSizePx}px`}
-                        fontColor={ColorOption.white}
-                        textTransform="uppercase"
-                    >
-                        {assetUtils.formattedSymbolForAsset(asset)}
-                    </Text>
-                </Container>
-            </Container>
-        );
-    }
-    private readonly _handleChange = (value?: BigNumber): void => {
-        this.props.onChange(value, this.props.asset);
-    };
-    private readonly _handleFontSizeChange = (fontSizePx: number): void => {
-        this.setState({
-            currentFontSizePx: fontSizePx,
-        });
-    };
-    private readonly _textLengthThresholdForAsset = (asset?: ERC20Asset): number => {
-        if (_.isUndefined(asset)) {
-            return 3;
-        }
-        const symbol = asset.metaData.symbol;
-        if (symbol.length <= 3) {
-            return 5;
-        }
-        if (symbol.length === 5) {
-            return 3;
-        }
-        return 4;
-    };
-}
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
new file mode 100644
index 000000000..583fad28b
--- /dev/null
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -0,0 +1,84 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { ColorOption, transparentWhite } from '../style/theme';
+import { ERC20Asset } from '../types';
+import { assetUtils } from '../util/asset';
+import { BigNumberInput } from '../util/big_number_input';
+import { util } from '../util/util';
+
+import { ScalingAmountInput } from './scaling_amount_input';
+import { Container, Text } from './ui';
+
+// Asset amounts only apply to ERC20 assets
+export interface ERC20AssetAmountInputProps {
+    asset?: ERC20Asset;
+    value?: BigNumberInput;
+    onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
+    startingFontSizePx: number;
+    fontColor?: ColorOption;
+}
+
+export interface ERC20AssetAmountInputState {
+    currentFontSizePx: number;
+}
+
+export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInputProps, ERC20AssetAmountInputState> {
+    public static defaultProps = {
+        onChange: util.boundNoop,
+    };
+    constructor(props: ERC20AssetAmountInputProps) {
+        super(props);
+        this.state = {
+            currentFontSizePx: props.startingFontSizePx,
+        };
+    }
+    public render(): React.ReactNode {
+        const { asset, onChange, ...rest } = this.props;
+        return (
+            <Container whiteSpace="nowrap">
+                <Container borderBottom={`1px solid ${transparentWhite}`} display="inline-block">
+                    <ScalingAmountInput
+                        {...rest}
+                        textLengthThreshold={this._textLengthThresholdForAsset(asset)}
+                        maxFontSizePx={this.props.startingFontSizePx}
+                        onChange={this._handleChange}
+                        onFontSizeChange={this._handleFontSizeChange}
+                    />
+                </Container>
+                <Container display="inline-flex" marginLeft="10px" title={assetUtils.bestNameForAsset(asset)}>
+                    <Text
+                        fontSize={`${this.state.currentFontSizePx}px`}
+                        fontColor={ColorOption.white}
+                        textTransform="uppercase"
+                    >
+                        {assetUtils.formattedSymbolForAsset(asset)}
+                    </Text>
+                </Container>
+            </Container>
+        );
+    }
+    private readonly _handleChange = (value?: BigNumberInput): void => {
+        this.props.onChange(value, this.props.asset);
+    };
+    private readonly _handleFontSizeChange = (fontSizePx: number): void => {
+        this.setState({
+            currentFontSizePx: fontSizePx,
+        });
+    };
+    // For assets with symbols of different length,
+    // start scaling the input at different character lengths
+    private readonly _textLengthThresholdForAsset = (asset?: ERC20Asset): number => {
+        if (_.isUndefined(asset)) {
+            return 3;
+        }
+        const symbol = asset.metaData.symbol;
+        if (symbol.length <= 3) {
+            return 5;
+        }
+        if (symbol.length === 5) {
+            return 3;
+        }
+        return 4;
+    };
+}
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index f0a22bccb..df9856277 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -2,7 +2,7 @@ import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input';
+import { SelectedERC20AssetAmountInput } from '../containers/selected_erc20_asset_amount_input';
 import { ColorOption } from '../style/theme';
 import { AsyncProcessState, OrderState } from '../types';
 import { format } from '../util/format';
@@ -48,7 +48,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
                 </Container>
                 <Flex direction="row" justify="space-between">
                     <Flex height="60px">
-                        <SelectedAssetAmountInput startingFontSizePx={38} />
+                        <SelectedERC20AssetAmountInput startingFontSizePx={38} />
                     </Flex>
                     <Flex direction="column" justify="space-between">
                         {iconOrAmounts}
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 23a15305a..655ae2b74 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -1,9 +1,8 @@
-import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
-import { BigNumberInput } from '../util/big_number';
+import { BigNumberInput } from '../util/big_number_input';
 import { util } from '../util/util';
 
 import { ScalingInput } from './scaling_input';
@@ -12,8 +11,8 @@ export interface ScalingAmountInputProps {
     maxFontSizePx: number;
     textLengthThreshold: number;
     fontColor?: ColorOption;
-    value?: BigNumber;
-    onChange: (value?: BigNumber) => void;
+    value?: BigNumberInput;
+    onChange: (value?: BigNumberInput) => void;
     onFontSizeChange: (fontSizePx: number) => void;
 }
 
@@ -31,7 +30,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
                 onFontSizeChange={onFontSizeChange}
                 fontColor={fontColor}
                 onChange={this._handleChange}
-                value={!_.isUndefined(value) ? value.toString() : ''}
+                value={!_.isUndefined(value) ? value.toDisplayString() : ''}
                 placeholder="0.00"
                 emptyInputWidthCh={3.5}
             />
@@ -42,7 +41,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
         let bigNumberValue;
         if (!_.isEmpty(value)) {
             try {
-                bigNumberValue = new BigNumberInput(event.target.value);
+                bigNumberValue = new BigNumberInput(value);
             } catch {
                 // We don't want to allow values that can't be a BigNumber, so don't even call onChange.
                 return;
-- 
cgit v1.2.3