From a2e1bf0e6287e86c226b0801311f6f4498c893ed Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 1 Nov 2018 16:32:14 -0700
Subject: Getting rid of BigNumberInput in favor of BigNumber

---
 .../src/components/erc20_asset_amount_input.tsx    |  8 ++---
 .../src/components/scaling_amount_input.tsx        | 10 +++----
 .../src/components/zero_ex_instant_provider.tsx    |  4 +--
 .../selected_erc20_asset_amount_input.ts           |  9 +++---
 packages/instant/src/redux/actions.ts              |  5 +---
 packages/instant/src/redux/reducer.ts              |  3 +-
 packages/instant/src/util/big_number_input.ts      | 34 ----------------------
 7 files changed, 17 insertions(+), 56 deletions(-)
 delete mode 100644 packages/instant/src/util/big_number_input.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index b1fec6405..a67d7d5db 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -1,10 +1,10 @@
+import { BigNumber } from '@0x/utils';
 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';
@@ -13,8 +13,8 @@ import { Container, Flex, Icon, Text } from './ui';
 // Asset amounts only apply to ERC20 assets
 export interface ERC20AssetAmountInputProps {
     asset?: ERC20Asset;
-    value?: BigNumberInput;
-    onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
+    value?: BigNumber;
+    onChange: (value?: BigNumber, asset?: ERC20Asset) => void;
     onSelectAssetClick?: (asset?: ERC20Asset) => void;
     startingFontSizePx: number;
     fontColor?: ColorOption;
@@ -102,7 +102,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
             </Container>
         );
     };
-    private readonly _handleChange = (value?: BigNumberInput): void => {
+    private readonly _handleChange = (value?: BigNumber): void => {
         this.props.onChange(value, this.props.asset);
     };
     private readonly _handleFontSizeChange = (fontSizePx: number): void => {
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index cfbf3b7cc..4b046e8da 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -1,8 +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_input';
 import { util } from '../util/util';
 
 import { ScalingInput } from './scaling_input';
@@ -12,8 +12,8 @@ export interface ScalingAmountInputProps {
     maxFontSizePx: number;
     textLengthThreshold: number;
     fontColor?: ColorOption;
-    value?: BigNumberInput;
-    onChange: (value?: BigNumberInput) => void;
+    value?: BigNumber;
+    onChange: (value?: BigNumber) => void;
     onFontSizeChange: (fontSizePx: number) => void;
 }
 
@@ -32,7 +32,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
                 onFontSizeChange={onFontSizeChange}
                 fontColor={fontColor}
                 onChange={this._handleChange}
-                value={!_.isUndefined(value) ? value.toDisplayString() : ''}
+                value={!_.isUndefined(value) ? value.toString() : ''}
                 placeholder="0.00"
                 emptyInputWidthCh={3.5}
                 isDisabled={this.props.isDisabled}
@@ -44,7 +44,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
         let bigNumberValue;
         if (!_.isEmpty(value)) {
             try {
-                bigNumberValue = new BigNumberInput(value);
+                bigNumberValue = new BigNumber(value);
             } catch {
                 // We don't want to allow values that can't be a BigNumber, so don't even call onChange.
                 return;
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 8c1025723..9391c03f7 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -1,5 +1,6 @@
 import { AssetBuyer } from '@0x/asset-buyer';
 import { ObjectMap, SignedOrder } from '@0x/types';
+import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Provider } from 'react-redux';
@@ -11,7 +12,6 @@ import { store, Store } from '../redux/store';
 import { fonts } from '../style/fonts';
 import { AssetMetaData, Network } from '../types';
 import { assetUtils } from '../util/asset';
-import { BigNumberInput } from '../util/big_number_input';
 import { errorFlasher } from '../util/error_flasher';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
 import { getProvider } from '../util/provider';
@@ -64,7 +64,7 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
             selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap, networkId),
             selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount)
                 ? state.selectedAssetAmount
-                : new BigNumberInput(props.defaultAssetBuyAmount),
+                : new BigNumber(props.defaultAssetBuyAmount),
             assetMetaDataMap: completeAssetMetaDataMap,
         };
         return storeStateFromProps;
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 217d603d2..1a5609b12 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -13,7 +13,6 @@ import { State } from '../redux/reducer';
 import { ColorOption } from '../style/theme';
 import { ERC20Asset, OrderProcessState } from '../types';
 import { assetUtils } from '../util/asset';
-import { BigNumberInput } from '../util/big_number_input';
 import { errorFlasher } from '../util/error_flasher';
 
 export interface SelectedERC20AssetAmountInputProps {
@@ -24,19 +23,19 @@ export interface SelectedERC20AssetAmountInputProps {
 
 interface ConnectedState {
     assetBuyer?: AssetBuyer;
-    value?: BigNumberInput;
+    value?: BigNumber;
     asset?: ERC20Asset;
     isDisabled: boolean;
 }
 
 interface ConnectedDispatch {
-    updateBuyQuote: (assetBuyer?: AssetBuyer, value?: BigNumberInput, asset?: ERC20Asset) => void;
+    updateBuyQuote: (assetBuyer?: AssetBuyer, value?: BigNumber, asset?: ERC20Asset) => void;
 }
 
 interface ConnectedProps {
-    value?: BigNumberInput;
+    value?: BigNumber;
     asset?: ERC20Asset;
-    onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
+    onChange: (value?: BigNumber, asset?: ERC20Asset) => void;
     isDisabled: boolean;
 }
 
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index bfae68e2b..a0781db19 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -2,8 +2,6 @@ import { BuyQuote } from '@0x/asset-buyer';
 import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 
-import { BigNumberInput } from '../util/big_number_input';
-
 import { ActionsUnion, OrderState } from '../types';
 
 export interface PlainAction<T extends string> {
@@ -38,8 +36,7 @@ export enum ActionTypes {
 
 export const actions = {
     updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price),
-    updateSelectedAssetAmount: (amount?: BigNumberInput) =>
-        createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount),
+    updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount),
     updateBuyOrderState: (orderState: OrderState) => createAction(ActionTypes.UPDATE_BUY_ORDER_STATE, orderState),
     updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote),
     updateSelectedAsset: (assetData?: string) => createAction(ActionTypes.UPDATE_SELECTED_ASSET, assetData),
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index dd9403052..20f682787 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -15,7 +15,6 @@ import {
     OrderState,
 } from '../types';
 import { assetUtils } from '../util/asset';
-import { BigNumberInput } from '../util/big_number_input';
 
 import { Action, ActionTypes } from './actions';
 
@@ -24,7 +23,7 @@ export interface State {
     assetBuyer?: AssetBuyer;
     assetMetaDataMap: ObjectMap<AssetMetaData>;
     selectedAsset?: Asset;
-    selectedAssetAmount?: BigNumberInput;
+    selectedAssetAmount?: BigNumber;
     buyOrderState: OrderState;
     ethUsdPrice?: BigNumber;
     latestBuyQuote?: BuyQuote;
diff --git a/packages/instant/src/util/big_number_input.ts b/packages/instant/src/util/big_number_input.ts
deleted file mode 100644
index 370d91a0a..000000000
--- a/packages/instant/src/util/big_number_input.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { BigNumber } from '@0x/utils';
-import * as _ from 'lodash';
-
-/**
- *  A BigNumber extension that is more flexible about decimal strings.
- *  Such as allowing:
- *  new BigNumberInput('0.') => 0
- *  new BigNumberInput('1.') => 1
- *  new BigNumberInput('1..') => still throws
- */
-export class BigNumberInput extends BigNumber {
-    private readonly _isEndingWithDecimal: boolean;
-    constructor(numberOrString: string | number) {
-        if (_.isString(numberOrString)) {
-            const hasDecimalPeriod = _.endsWith(numberOrString, '.');
-            let internalString = numberOrString;
-            if (hasDecimalPeriod) {
-                internalString = numberOrString.slice(0, -1);
-            }
-            super(internalString);
-            this._isEndingWithDecimal = hasDecimalPeriod;
-        } else {
-            super(numberOrString);
-            this._isEndingWithDecimal = false;
-        }
-    }
-    public toDisplayString(): string {
-        const internalString = super.toString();
-        if (this._isEndingWithDecimal) {
-            return `${internalString}.`;
-        }
-        return internalString;
-    }
-}
-- 
cgit v1.2.3


From f5623632d86504b4081ff6d102c2f9468e2dfa0d Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 1 Nov 2018 17:29:59 -0700
Subject: Have ScalingAmountInput trigger onChange with MaybeBigNumber and keep
 string value as state

---
 .../src/components/scaling_amount_input.tsx        | 64 ++++++++++++++++++----
 packages/instant/src/types.ts                      |  2 +
 2 files changed, 54 insertions(+), 12 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 4b046e8da..5d06c5242 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 { MaybeBigNumber } from '../types';
 import { util } from '../util/util';
 
 import { ScalingInput } from './scaling_input';
@@ -16,13 +17,52 @@ export interface ScalingAmountInputProps {
     onChange: (value?: BigNumber) => void;
     onFontSizeChange: (fontSizePx: number) => void;
 }
+interface ScalingAmountInputState {
+    stringValue: string;
+}
+
+const stringToMaybeBigNumber = (stringValue: string): MaybeBigNumber => {
+    let maybeBigNumber: MaybeBigNumber;
+    try {
+        maybeBigNumber = new BigNumber(stringValue);
+    } catch {
+        maybeBigNumber = undefined;
+    }
+    return _.isNaN(maybeBigNumber) ? undefined : maybeBigNumber;
+};
 
-export class ScalingAmountInput extends React.Component<ScalingAmountInputProps> {
+const areMaybeBigNumbersEqual = (val1: MaybeBigNumber, val2: MaybeBigNumber): boolean => {
+    if (!_.isUndefined(val1) && !_.isUndefined(val2)) {
+        return val1.equals(val2);
+    }
+    return _.isUndefined(val1) && _.isUndefined(val2);
+};
+
+export class ScalingAmountInput extends React.Component<ScalingAmountInputProps, ScalingAmountInputState> {
     public static defaultProps = {
         onChange: util.boundNoop,
         onFontSizeChange: util.boundNoop,
         isDisabled: false,
     };
+    public constructor(props: ScalingAmountInputProps) {
+        super(props);
+        this.state = {
+            stringValue: _.isUndefined(props.value) ? '' : props.value.toString(),
+        };
+    }
+    public componentDidUpdate(prevProps: ScalingAmountInputProps): void {
+        const parsedStateValue = stringToMaybeBigNumber(this.state.stringValue);
+        const currentValue = this.props.value;
+
+        if (!areMaybeBigNumbersEqual(parsedStateValue, currentValue)) {
+            // we somehow got into the state in which the value passed in and the string value
+            // in state have differed, reset state
+            this.setState({
+                stringValue: _.isUndefined(currentValue) ? '' : currentValue.toString(),
+            });
+        }
+    }
+
     public render(): React.ReactNode {
         const { textLengthThreshold, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props;
         return (
@@ -32,7 +72,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
                 onFontSizeChange={onFontSizeChange}
                 fontColor={fontColor}
                 onChange={this._handleChange}
-                value={!_.isUndefined(value) ? value.toString() : ''}
+                value={this.state.stringValue}
                 placeholder="0.00"
                 emptyInputWidthCh={3.5}
                 isDisabled={this.props.isDisabled}
@@ -40,16 +80,16 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
         );
     }
     private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-        const value = event.target.value;
-        let bigNumberValue;
-        if (!_.isEmpty(value)) {
-            try {
-                bigNumberValue = new BigNumber(value);
-            } catch {
-                // We don't want to allow values that can't be a BigNumber, so don't even call onChange.
-                return;
-            }
-        }
+        const sanitizedValue = event.target.value.replace(/[^0-9.]/g, ''); // only allow numbers and "."
+        this.setState({
+            stringValue: sanitizedValue,
+        });
+
+        // Trigger onChange with a valid BigNumber, or undefined if the sanitizedValue is invalid or empty
+        const bigNumberValue: MaybeBigNumber = _.isEmpty(sanitizedValue)
+            ? undefined
+            : stringToMaybeBigNumber(sanitizedValue);
+
         this.props.onChange(bigNumberValue);
     };
 }
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 336465e43..e92e96e9a 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -1,6 +1,8 @@
 import { AssetProxyId, ObjectMap } from '@0x/types';
+import { BigNumber } from '@0x/utils';
 
 // Reusable
+export type MaybeBigNumber = BigNumber | undefined;
 export enum AsyncProcessState {
     NONE = 'None',
     PENDING = 'Pending',
-- 
cgit v1.2.3


From 620f439816b8c62edb5f0e2e140647176b8702c8 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 2 Nov 2018 13:22:10 -0700
Subject: Move MaybeBigNumber functions into helper

---
 .../src/components/scaling_amount_input.tsx        | 21 ++++--------------
 packages/instant/src/util/maybe_big_number.ts      | 25 ++++++++++++++++++++++
 2 files changed, 29 insertions(+), 17 deletions(-)
 create mode 100644 packages/instant/src/util/maybe_big_number.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 5d06c5242..a30c64b3a 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 import { MaybeBigNumber } from '../types';
+import { maybeBigNumberUtil } from '../util/maybe_big_number';
 import { util } from '../util/util';
 
 import { ScalingInput } from './scaling_input';
@@ -21,23 +22,7 @@ interface ScalingAmountInputState {
     stringValue: string;
 }
 
-const stringToMaybeBigNumber = (stringValue: string): MaybeBigNumber => {
-    let maybeBigNumber: MaybeBigNumber;
-    try {
-        maybeBigNumber = new BigNumber(stringValue);
-    } catch {
-        maybeBigNumber = undefined;
-    }
-    return _.isNaN(maybeBigNumber) ? undefined : maybeBigNumber;
-};
-
-const areMaybeBigNumbersEqual = (val1: MaybeBigNumber, val2: MaybeBigNumber): boolean => {
-    if (!_.isUndefined(val1) && !_.isUndefined(val2)) {
-        return val1.equals(val2);
-    }
-    return _.isUndefined(val1) && _.isUndefined(val2);
-};
-
+const { stringToMaybeBigNumber, areMaybeBigNumbersEqual } = maybeBigNumberUtil;
 export class ScalingAmountInput extends React.Component<ScalingAmountInputProps, ScalingAmountInputState> {
     public static defaultProps = {
         onChange: util.boundNoop,
@@ -57,6 +42,8 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps,
         if (!areMaybeBigNumbersEqual(parsedStateValue, currentValue)) {
             // we somehow got into the state in which the value passed in and the string value
             // in state have differed, reset state
+            // we dont expect to ever get into this state, but let's make sure
+            // we reset if we do since we're dealing with important numbers
             this.setState({
                 stringValue: _.isUndefined(currentValue) ? '' : currentValue.toString(),
             });
diff --git a/packages/instant/src/util/maybe_big_number.ts b/packages/instant/src/util/maybe_big_number.ts
new file mode 100644
index 000000000..113ba552f
--- /dev/null
+++ b/packages/instant/src/util/maybe_big_number.ts
@@ -0,0 +1,25 @@
+import { BigNumber } from '@0x/utils';
+import * as _ from 'lodash';
+
+import { MaybeBigNumber } from '../types';
+
+export const maybeBigNumberUtil = {
+    // converts a string to a MaybeBigNumber
+    // if string is a NaN, considered undefined
+    stringToMaybeBigNumber: (stringValue: string): MaybeBigNumber => {
+        let validBigNumber: BigNumber;
+        try {
+            validBigNumber = new BigNumber(stringValue);
+        } catch {
+            return undefined;
+        }
+
+        return validBigNumber.isNaN() ? undefined : validBigNumber;
+    },
+    areMaybeBigNumbersEqual: (val1: MaybeBigNumber, val2: MaybeBigNumber): boolean => {
+        if (!_.isUndefined(val1) && !_.isUndefined(val2)) {
+            return val1.equals(val2);
+        }
+        return _.isUndefined(val1) && _.isUndefined(val2);
+    },
+};
-- 
cgit v1.2.3


From b0f2ab45e9761cc760b94d8567df8ba66956388c Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 2 Nov 2018 13:25:59 -0700
Subject: onChange -> onAmountChange

---
 packages/instant/src/components/erc20_asset_amount_input.tsx | 2 +-
 packages/instant/src/components/scaling_amount_input.tsx     | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index a67d7d5db..6fb8f60f0 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -54,7 +54,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
                         {...rest}
                         textLengthThreshold={this._textLengthThresholdForAsset(asset)}
                         maxFontSizePx={this.props.startingFontSizePx}
-                        onChange={this._handleChange}
+                        onAmountChange={this._handleChange}
                         onFontSizeChange={this._handleFontSizeChange}
                     />
                 </Container>
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index a30c64b3a..ff74ccb4d 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -15,7 +15,7 @@ export interface ScalingAmountInputProps {
     textLengthThreshold: number;
     fontColor?: ColorOption;
     value?: BigNumber;
-    onChange: (value?: BigNumber) => void;
+    onAmountChange: (value?: BigNumber) => void;
     onFontSizeChange: (fontSizePx: number) => void;
 }
 interface ScalingAmountInputState {
@@ -25,7 +25,7 @@ interface ScalingAmountInputState {
 const { stringToMaybeBigNumber, areMaybeBigNumbersEqual } = maybeBigNumberUtil;
 export class ScalingAmountInput extends React.Component<ScalingAmountInputProps, ScalingAmountInputState> {
     public static defaultProps = {
-        onChange: util.boundNoop,
+        onAmountChange: util.boundNoop,
         onFontSizeChange: util.boundNoop,
         isDisabled: false,
     };
@@ -72,11 +72,11 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps,
             stringValue: sanitizedValue,
         });
 
-        // Trigger onChange with a valid BigNumber, or undefined if the sanitizedValue is invalid or empty
+        // Trigger onAmountChange with a valid BigNumber, or undefined if the sanitizedValue is invalid or empty
         const bigNumberValue: MaybeBigNumber = _.isEmpty(sanitizedValue)
             ? undefined
             : stringToMaybeBigNumber(sanitizedValue);
 
-        this.props.onChange(bigNumberValue);
+        this.props.onAmountChange(bigNumberValue);
     };
 }
-- 
cgit v1.2.3


From 389665d3a1443abaa90ef5ec97e892c70610cac2 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 2 Nov 2018 13:30:34 -0700
Subject: linting

---
 packages/instant/src/components/scaling_amount_input.tsx | 2 +-
 packages/instant/src/redux/actions.ts                    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index ff74ccb4d..ca8ccbe31 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -51,7 +51,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps,
     }
 
     public render(): React.ReactNode {
-        const { textLengthThreshold, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props;
+        const { textLengthThreshold, fontColor, maxFontSizePx, onFontSizeChange } = this.props;
         return (
             <ScalingInput
                 maxFontSizePx={maxFontSizePx}
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index 16bda0208..9397dcc99 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -2,7 +2,7 @@ import { BuyQuote } from '@0x/asset-buyer';
 import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 
-import { ActionsUnion, OrderState } from '../types';
+import { ActionsUnion } from '../types';
 
 export interface PlainAction<T extends string> {
     type: T;
-- 
cgit v1.2.3


From 5fc2483be776cab90e7ff868b27536a85d6764c9 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 2 Nov 2018 13:48:31 -0700
Subject: feat(instant): pass in provider through props, fallback to injected
 provider

---
 packages/instant/src/components/buy_button.tsx     |  5 ++--
 .../src/components/zero_ex_instant_provider.tsx    | 30 ++++++++++++++--------
 packages/instant/src/index.umd.ts                  |  6 ++++-
 packages/instant/src/util/address.ts               |  4 +--
 packages/instant/src/util/assert.ts                |  2 +-
 packages/instant/src/util/injected_provider.ts     | 16 ++++++++++++
 packages/instant/src/util/provider.ts              | 12 ---------
 packages/instant/src/util/web3_wrapper.ts          |  5 ----
 8 files changed, 46 insertions(+), 34 deletions(-)
 create mode 100644 packages/instant/src/util/injected_provider.ts
 delete mode 100644 packages/instant/src/util/provider.ts
 delete mode 100644 packages/instant/src/util/web3_wrapper.ts

(limited to 'packages')

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 12ac62601..9d9a8540c 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -1,4 +1,5 @@
 import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
+import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { oc } from 'ts-optchain';
@@ -10,7 +11,6 @@ import { getBestAddress } from '../util/address';
 import { balanceUtil } from '../util/balance';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
 import { util } from '../util/util';
-import { web3Wrapper } from '../util/web3_wrapper';
 
 import { Button, Text } from './ui';
 
@@ -50,7 +50,8 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         }
 
         this.props.onValidationPending(buyQuote);
-        const takerAddress = await getBestAddress();
+        const web3Wrapper = new Web3Wrapper(assetBuyer.provider);
+        const takerAddress = await getBestAddress(web3Wrapper);
 
         const hasSufficientEth = await balanceUtil.hasSufficientEth(takerAddress, buyQuote, web3Wrapper);
         if (!hasSufficientEth) {
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index fce03a280..4bc840862 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -1,8 +1,11 @@
 import { AssetBuyer } from '@0x/asset-buyer';
 import { ObjectMap, SignedOrder } from '@0x/types';
+import { Web3Wrapper } from '@0x/web3-wrapper';
+import { Provider } from 'ethereum-types';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Provider } from 'react-redux';
+import { Provider as ReduxProvider } from 'react-redux';
+import { oc } from 'ts-optchain';
 
 import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider';
 import { asyncData } from '../redux/async_data';
@@ -14,8 +17,7 @@ import { assetUtils } from '../util/asset';
 import { BigNumberInput } from '../util/big_number_input';
 import { errorFlasher } from '../util/error_flasher';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
-import { getProvider } from '../util/provider';
-import { web3Wrapper } from '../util/web3_wrapper';
+import { getInjectedProvider } from '../util/injected_provider';
 
 fonts.include();
 
@@ -29,6 +31,7 @@ export interface ZeroExInstantProviderRequiredProps {
 }
 
 export interface ZeroExInstantProviderOptionalProps {
+    provider: Provider;
     defaultAssetBuyAmount: number;
     additionalAssetMetaDataMap: ObjectMap<AssetMetaData>;
     networkId: Network;
@@ -39,8 +42,8 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
     private readonly _store: Store;
     private static _mergeInitialStateWithProps(props: ZeroExInstantProviderProps, state: State = INITIAL_STATE): State {
         const networkId = props.networkId || state.network;
-        // TODO: Provider needs to not be hard-coded to injected web3.
-        const provider = getProvider();
+        // TODO: Proper wallet connect flow
+        const provider = props.provider || getInjectedProvider();
         const assetBuyerOptions = {
             networkId,
         };
@@ -92,19 +95,24 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
 
     public render(): React.ReactNode {
         return (
-            <Provider store={this._store}>
+            <ReduxProvider store={this._store}>
                 <SelectedAssetThemeProvider>{this.props.children}</SelectedAssetThemeProvider>
-            </Provider>
+            </ReduxProvider>
         );
     }
 
     private readonly _flashErrorIfWrongNetwork = async (): Promise<void> => {
         const msToShowError = 30000; // 30 seconds
         const network = this._store.getState().network;
-        const networkOfProvider = await web3Wrapper.getNetworkIdAsync();
-        if (network !== networkOfProvider) {
-            const errorMessage = `Wrong network detected. Try switching to ${Network[network]}.`;
-            errorFlasher.flashNewErrorMessage(this._store.dispatch, errorMessage, msToShowError);
+        const assetBuyerIfExists = this._store.getState().assetBuyer;
+        const providerIfExists = oc(assetBuyerIfExists).provider();
+        if (!_.isUndefined(providerIfExists)) {
+            const web3Wrapper = new Web3Wrapper(providerIfExists);
+            const networkOfProvider = await web3Wrapper.getNetworkIdAsync();
+            if (network !== networkOfProvider) {
+                const errorMessage = `Wrong network detected. Try switching to ${Network[network]}.`;
+                errorFlasher.flashNewErrorMessage(this._store.dispatch, errorMessage, msToShowError);
+            }
         }
     };
 }
diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts
index 806187a16..b269ad741 100644
--- a/packages/instant/src/index.umd.ts
+++ b/packages/instant/src/index.umd.ts
@@ -25,8 +25,12 @@ export const render = (props: ZeroExInstantOverlayProps, selector: string = DEFA
         assert.isNumber('props.zIndex', props.zIndex);
     }
     if (!_.isUndefined(props.affiliateInfo)) {
-        assert.isValidaffiliateInfo('props.affiliateInfo', props.affiliateInfo);
+        assert.isValidAffiliateInfo('props.affiliateInfo', props.affiliateInfo);
     }
+    if (!_.isUndefined(props.provider)) {
+        assert.isWeb3Provider('props.provider', props.provider);
+    }
+    assert.isString('selector', selector);
     const appendToIfExists = document.querySelector(selector);
     assert.assert(!_.isNull(appendToIfExists), `Could not find div with selector: ${selector}`);
     const appendTo = appendToIfExists as Element;
diff --git a/packages/instant/src/util/address.ts b/packages/instant/src/util/address.ts
index 14d42d8c0..b21863a8e 100644
--- a/packages/instant/src/util/address.ts
+++ b/packages/instant/src/util/address.ts
@@ -1,6 +1,6 @@
-import { web3Wrapper } from '../util/web3_wrapper';
+import { Web3Wrapper } from '@0x/web3-wrapper';
 
-export const getBestAddress = async (): Promise<string | undefined> => {
+export const getBestAddress = async (web3Wrapper: Web3Wrapper): Promise<string | undefined> => {
     const addresses = await web3Wrapper.getAvailableAddressesAsync();
     return addresses[0];
 };
diff --git a/packages/instant/src/util/assert.ts b/packages/instant/src/util/assert.ts
index 20f8ddaee..99e177993 100644
--- a/packages/instant/src/util/assert.ts
+++ b/packages/instant/src/util/assert.ts
@@ -41,7 +41,7 @@ export const assert = {
             assert.isUri(`${variableName}.imageUrl`, metaData.imageUrl);
         }
     },
-    isValidaffiliateInfo(variableName: string, affiliateInfo: AffiliateInfo): void {
+    isValidAffiliateInfo(variableName: string, affiliateInfo: AffiliateInfo): void {
         assert.isETHAddressHex(`${variableName}.recipientAddress`, affiliateInfo.feeRecipient);
         assert.isNumber(`${variableName}.percentage`, affiliateInfo.feePercentage);
         assert.assert(
diff --git a/packages/instant/src/util/injected_provider.ts b/packages/instant/src/util/injected_provider.ts
new file mode 100644
index 000000000..40f9e2da5
--- /dev/null
+++ b/packages/instant/src/util/injected_provider.ts
@@ -0,0 +1,16 @@
+import { Provider } from 'ethereum-types';
+import * as _ from 'lodash';
+
+export const getInjectedProvider = (): Provider => {
+    const injectedProviderIfExists = (window as any).ethereum;
+    if (!_.isUndefined(injectedProviderIfExists)) {
+        // TODO: call enable here when implementing wallet connection flow
+        return injectedProviderIfExists;
+    }
+    const injectedWeb3IfExists = (window as any).web3;
+    if (!_.isUndefined(injectedWeb3IfExists.currentProvider)) {
+        return injectedWeb3IfExists.currentProvider;
+    } else {
+        throw new Error(`No injected web3 found`);
+    }
+};
diff --git a/packages/instant/src/util/provider.ts b/packages/instant/src/util/provider.ts
deleted file mode 100644
index 49705fd11..000000000
--- a/packages/instant/src/util/provider.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Provider } from 'ethereum-types';
-
-export const getProvider = (): Provider => {
-    const injectedWeb3 = (window as any).web3 || undefined;
-    try {
-        // Use MetaMask/Mist provider
-        return injectedWeb3.currentProvider;
-    } catch (err) {
-        // Throws when user doesn't have MetaMask/Mist running
-        throw new Error(`No injected web3 found: ${err}`);
-    }
-};
diff --git a/packages/instant/src/util/web3_wrapper.ts b/packages/instant/src/util/web3_wrapper.ts
deleted file mode 100644
index 24dcd9076..000000000
--- a/packages/instant/src/util/web3_wrapper.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Web3Wrapper } from '@0x/web3-wrapper';
-
-import { getProvider } from './provider';
-
-export const web3Wrapper = new Web3Wrapper(getProvider());
-- 
cgit v1.2.3


From 8284f9c2ba80992609149333f8feb70fbe9b1bd1 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 2 Nov 2018 15:33:00 -0700
Subject: Use generic Maybe

---
 packages/instant/src/components/scaling_amount_input.tsx | 7 ++++---
 packages/instant/src/types.ts                            | 2 +-
 packages/instant/src/util/maybe_big_number.ts            | 8 ++++----
 3 files changed, 9 insertions(+), 8 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index ca8ccbe31..5dc719293 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -2,8 +2,9 @@ import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 
+import { Maybe } from '../types';
+
 import { ColorOption } from '../style/theme';
-import { MaybeBigNumber } from '../types';
 import { maybeBigNumberUtil } from '../util/maybe_big_number';
 import { util } from '../util/util';
 
@@ -35,7 +36,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps,
             stringValue: _.isUndefined(props.value) ? '' : props.value.toString(),
         };
     }
-    public componentDidUpdate(prevProps: ScalingAmountInputProps): void {
+    public componentDidUpdate(): void {
         const parsedStateValue = stringToMaybeBigNumber(this.state.stringValue);
         const currentValue = this.props.value;
 
@@ -73,7 +74,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps,
         });
 
         // Trigger onAmountChange with a valid BigNumber, or undefined if the sanitizedValue is invalid or empty
-        const bigNumberValue: MaybeBigNumber = _.isEmpty(sanitizedValue)
+        const bigNumberValue: Maybe<BigNumber> = _.isEmpty(sanitizedValue)
             ? undefined
             : stringToMaybeBigNumber(sanitizedValue);
 
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 739556801..c03d269f5 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -2,7 +2,7 @@ import { AssetProxyId, ObjectMap } from '@0x/types';
 import { BigNumber } from '@0x/utils';
 
 // Reusable
-export type MaybeBigNumber = BigNumber | undefined;
+export type Maybe<T> = T | undefined;
 export enum AsyncProcessState {
     NONE = 'None',
     PENDING = 'Pending',
diff --git a/packages/instant/src/util/maybe_big_number.ts b/packages/instant/src/util/maybe_big_number.ts
index 113ba552f..9d3746e10 100644
--- a/packages/instant/src/util/maybe_big_number.ts
+++ b/packages/instant/src/util/maybe_big_number.ts
@@ -1,12 +1,12 @@
 import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 
-import { MaybeBigNumber } from '../types';
+import { Maybe } from '../types';
 
 export const maybeBigNumberUtil = {
-    // converts a string to a MaybeBigNumber
+    // converts a string to a Maybe<BigNumber>
     // if string is a NaN, considered undefined
-    stringToMaybeBigNumber: (stringValue: string): MaybeBigNumber => {
+    stringToMaybeBigNumber: (stringValue: string): Maybe<BigNumber> => {
         let validBigNumber: BigNumber;
         try {
             validBigNumber = new BigNumber(stringValue);
@@ -16,7 +16,7 @@ export const maybeBigNumberUtil = {
 
         return validBigNumber.isNaN() ? undefined : validBigNumber;
     },
-    areMaybeBigNumbersEqual: (val1: MaybeBigNumber, val2: MaybeBigNumber): boolean => {
+    areMaybeBigNumbersEqual: (val1: Maybe<BigNumber>, val2: Maybe<BigNumber>): boolean => {
         if (!_.isUndefined(val1) && !_.isUndefined(val2)) {
             return val1.equals(val2);
         }
-- 
cgit v1.2.3


From f5c7a3c26a4a1ddb6ba7692cee0d332f2dedb738 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 2 Nov 2018 15:34:44 -0700
Subject: linting

---
 packages/instant/src/types.ts | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index c03d269f5..834127994 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -1,5 +1,4 @@
 import { AssetProxyId, ObjectMap } from '@0x/types';
-import { BigNumber } from '@0x/utils';
 
 // Reusable
 export type Maybe<T> = T | undefined;
-- 
cgit v1.2.3