1 files changed, 50 insertions, 8 deletions
diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
index c03ef1cf3..4d2dc0bd8 100644
--- a/packages/instant/src/components/asset_amount_input.tsx
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -7,27 +7,51 @@ 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 display="inline-block" marginLeft="10px">
-                    <Text fontSize={rest.fontSize} fontColor={ColorOption.white} textTransform="uppercase">
-                        {assetUtils.bestNameForAsset(asset)}
+            <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>
@@ -36,4 +60,22 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps> {
     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;
+    };
 }