fix(instant): Autofocus text amount input

3 files changed, 8 insertions, 1 deletions

diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index 520ac33d5..8b4494022 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -62,6 +62,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
                         maxFontSizePx={this.props.startingFontSizePx}
                         onAmountChange={this._handleChange}
                         onFontSizeChange={this._handleFontSizeChange}
+                        autofocus={true}
                     />
                 </Container>
                 <Container
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 5dc719293..3395cded1 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -18,6 +18,7 @@ export interface ScalingAmountInputProps {
     value?: BigNumber;
     onAmountChange: (value?: BigNumber) => void;
     onFontSizeChange: (fontSizePx: number) => void;
+    autofocus: boolean;
 }
 interface ScalingAmountInputState {
     stringValue: string;
@@ -29,6 +30,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps,
         onAmountChange: util.boundNoop,
         onFontSizeChange: util.boundNoop,
         isDisabled: false,
+        autofocus: false,
     };
     public constructor(props: ScalingAmountInputProps) {
         super(props);
@@ -64,6 +66,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps,
                 placeholder="0.00"
                 emptyInputWidthCh={3.5}
                 isDisabled={this.props.isDisabled}
+                autofocus={this.props.autofocus}
             />
         );
     }
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index e1599a316..c379b76cd 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -28,6 +28,7 @@ export interface ScalingInputProps {
     maxLength?: number;
     scalingSettings: ScalingSettings;
     isDisabled: boolean;
+    autofocus: boolean;
 }
 
 export interface ScalingInputState {
@@ -51,6 +52,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         maxLength: 7,
         scalingSettings: defaultScalingSettings,
         isDisabled: false,
+        autofocus: false,
     };
     public state: ScalingInputState = {
         inputWidthPxAtPhaseChange: undefined,
@@ -123,7 +125,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         }
     }
     public render(): React.ReactNode {
-        const { isDisabled, fontColor, onChange, placeholder, value, maxLength } = this.props;
+        const { autofocus, isDisabled, fontColor, onChange, placeholder, value, maxLength } = this.props;
         const phase = ScalingInput.getPhaseFromProps(this.props);
         return (
             <Input
@@ -136,6 +138,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
                 width={this._calculateWidth(phase)}
                 maxLength={maxLength}
                 disabled={isDisabled}
+                autoFocus={autofocus}
             />
         );
     }