Merge branch 'development' into feature/instant/fixed-orders-in-render-method

* development:
  fix(instant): refactor some props to use isDisabled instead of disabled
  linting imports
  feat(instant): Disable input when processing
  Add back debounce
  Make doesBuyQuoteMatchState in reducer less strict
  fix(instant): prevent outdated quote requests from overriding the correct quote
  selected asset buy order state button -> selected asset buy order state buttons
  buy order state button -> buy order state buttons
  feat(order_utils.py): ERC721 asset data codec (#1186)
  Add note about tslint false positive
  tsx -> ts
  Get BuyOrderState one big connected component, and let user view failure
  Show View Transaction button on failure, and allow setting of width for Try Again button and View Txn button
  Added string to constants
  chore: Update contract-wrappers CHANGELOG.json
  fix(contract-wrappers): Fix tslint errors that were lingering due to misconfiguration
  chore: Add --format stylish to tslint

10 files changed, 81 insertions, 53 deletions

diff --git a/packages/instant/src/components/buy_order_state_button.tsx b/packages/instant/src/components/buy_order_state_button.tsx
deleted file mode 100644
index 44115e5a1..000000000
--- a/packages/instant/src/components/buy_order_state_button.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react';
-
-import { PlacingOrderButton } from '../components/placing_order_button';
-import { SelectedAssetBuyButton } from '../containers/selected_asset_buy_button';
-import { SelectedAssetRetryButton } from '../containers/selected_asset_retry_button';
-import { SelectedAssetViewTransactionButton } from '../containers/selected_asset_view_transaction_button';
-import { OrderProcessState } from '../types';
-
-export interface BuyOrderStateButtonProps {
-    buyOrderProcessingState: OrderProcessState;
-}
-
-export const BuyOrderStateButton: React.StatelessComponent<BuyOrderStateButtonProps> = props => {
-    if (props.buyOrderProcessingState === OrderProcessState.FAILURE) {
-        return <SelectedAssetRetryButton />;
-    } else if (
-        props.buyOrderProcessingState === OrderProcessState.SUCCESS ||
-        props.buyOrderProcessingState === OrderProcessState.PROCESSING
-    ) {
-        return <SelectedAssetViewTransactionButton />;
-    } else if (props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE) {
-        return <PlacingOrderButton />;
-    }
-
-    return <SelectedAssetBuyButton />;
-};
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
new file mode 100644
index 000000000..758eabcb7
--- /dev/null
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -0,0 +1,63 @@
+import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
+import * as React from 'react';
+
+import { BuyButton } from '../components/buy_button';
+import { SecondaryButton } from '../components/secondary_button';
+import { Flex } from '../components/ui/flex';
+
+import { PlacingOrderButton } from '../components/placing_order_button';
+import { ColorOption } from '../style/theme';
+import { OrderProcessState } from '../types';
+
+import { Button } from './ui/button';
+import { Text } from './ui/text';
+
+export interface BuyOrderStateButtonProps {
+    buyQuote?: BuyQuote;
+    buyOrderProcessingState: OrderProcessState;
+    assetBuyer?: AssetBuyer;
+    onViewTransaction: () => void;
+    onAwaitingSignature: (buyQuote: BuyQuote) => void;
+    onSignatureDenied: (buyQuote: BuyQuote) => void;
+    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
+    onRetry: () => void;
+}
+
+// TODO: rename to buttons
+export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonProps> = props => {
+    if (props.buyOrderProcessingState === OrderProcessState.FAILURE) {
+        return (
+            <Flex justify="space-between">
+                <Button width="48%" onClick={props.onRetry}>
+                    <Text fontColor={ColorOption.white} fontWeight={600} fontSize="16px">
+                        Back
+                    </Text>
+                </Button>
+                <SecondaryButton width="48%" onClick={props.onViewTransaction}>
+                    Details
+                </SecondaryButton>
+            </Flex>
+        );
+    } else if (
+        props.buyOrderProcessingState === OrderProcessState.SUCCESS ||
+        props.buyOrderProcessingState === OrderProcessState.PROCESSING
+    ) {
+        return <SecondaryButton onClick={props.onViewTransaction}>View Transaction</SecondaryButton>;
+    } else if (props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE) {
+        return <PlacingOrderButton />;
+    }
+
+    return (
+        <BuyButton
+            buyQuote={props.buyQuote}
+            assetBuyer={props.assetBuyer}
+            onAwaitingSignature={props.onAwaitingSignature}
+            onSignatureDenied={props.onSignatureDenied}
+            onBuyProcessing={props.onBuyProcessing}
+            onBuySuccess={props.onBuySuccess}
+            onBuyFailure={props.onBuyFailure}
+        />
+    );
+};
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index 583fad28b..5abb34c2f 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -17,6 +17,7 @@ export interface ERC20AssetAmountInputProps {
     onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
     startingFontSizePx: number;
     fontColor?: ColorOption;
+    isDisabled: boolean;
 }
 
 export interface ERC20AssetAmountInputState {
@@ -26,6 +27,7 @@ export interface ERC20AssetAmountInputState {
 export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInputProps, ERC20AssetAmountInputState> {
     public static defaultProps = {
         onChange: util.boundNoop,
+        isDisabled: false,
     };
     constructor(props: ERC20AssetAmountInputProps) {
         super(props);
@@ -35,9 +37,10 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
     }
     public render(): React.ReactNode {
         const { asset, onChange, ...rest } = this.props;
+        const amountBorderBottom = this.props.isDisabled ? '' : `1px solid ${transparentWhite}`;
         return (
             <Container whiteSpace="nowrap">
-                <Container borderBottom={`1px solid ${transparentWhite}`} display="inline-block">
+                <Container borderBottom={amountBorderBottom} display="inline-block">
                     <ScalingAmountInput
                         {...rest}
                         textLengthThreshold={this._textLengthThresholdForAsset(asset)}
diff --git a/packages/instant/src/components/retry_button.tsx b/packages/instant/src/components/retry_button.tsx
deleted file mode 100644
index 0d6188e6a..000000000
--- a/packages/instant/src/components/retry_button.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-import { SecondaryButton } from './secondary_button';
-
-export interface RetryButtonProps {
-    onClick: () => void;
-}
-
-export const RetryButton: React.StatelessComponent<RetryButtonProps> = props => {
-    return <SecondaryButton onClick={props.onClick}>Try Again</SecondaryButton>;
-};
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 655ae2b74..cfbf3b7cc 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -8,6 +8,7 @@ import { util } from '../util/util';
 import { ScalingInput } from './scaling_input';
 
 export interface ScalingAmountInputProps {
+    isDisabled: boolean;
     maxFontSizePx: number;
     textLengthThreshold: number;
     fontColor?: ColorOption;
@@ -20,6 +21,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
     public static defaultProps = {
         onChange: util.boundNoop,
         onFontSizeChange: util.boundNoop,
+        isDisabled: false,
     };
     public render(): React.ReactNode {
         const { textLengthThreshold, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props;
@@ -33,6 +35,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
                 value={!_.isUndefined(value) ? value.toDisplayString() : ''}
                 placeholder="0.00"
                 emptyInputWidthCh={3.5}
+                isDisabled={this.props.isDisabled}
             />
         );
     }
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 34cb0b5fd..11748b729 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -27,6 +27,7 @@ export interface ScalingInputProps {
     placeholder?: string;
     maxLength?: number;
     scalingSettings: ScalingSettings;
+    isDisabled: boolean;
 }
 
 export interface ScalingInputState {
@@ -49,6 +50,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         onFontSizeChange: util.boundNoop,
         maxLength: 7,
         scalingSettings: defaultScalingSettings,
+        isDisabled: false,
     };
     public state: ScalingInputState = {
         inputWidthPxAtPhaseChange: undefined,
@@ -121,7 +123,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         }
     }
     public render(): React.ReactNode {
-        const { fontColor, onChange, placeholder, value, maxLength } = this.props;
+        const { isDisabled, fontColor, onChange, placeholder, value, maxLength } = this.props;
         const phase = ScalingInput.getPhaseFromProps(this.props);
         return (
             <Input
@@ -133,6 +135,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
                 fontSize={`${this._calculateFontSize(phase)}px`}
                 width={this._calculateWidth(phase)}
                 maxLength={maxLength}
+                disabled={isDisabled}
             />
         );
     }
diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx
index 3c139a233..583058b5b 100644
--- a/packages/instant/src/components/secondary_button.tsx
+++ b/packages/instant/src/components/secondary_button.tsx
@@ -14,7 +14,7 @@ export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = p
         <Button
             backgroundColor={ColorOption.white}
             borderColor={ColorOption.lightGrey}
-            width="100%"
+            width={props.width}
             onClick={props.onClick}
             {...buttonProps}
         >
@@ -24,3 +24,6 @@ export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = p
         </Button>
     );
 };
+SecondaryButton.defaultProps = {
+    width: '100%',
+};
diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx
index 1fcb2591c..5274d835b 100644
--- a/packages/instant/src/components/ui/button.tsx
+++ b/packages/instant/src/components/ui/button.tsx
@@ -52,6 +52,7 @@ export const Button = styled(PlainButton)`
 
 Button.defaultProps = {
     backgroundColor: ColorOption.primaryColor,
+    borderColor: ColorOption.primaryColor,
     width: 'auto',
     isDisabled: false,
     padding: '1em 2.2em',
diff --git a/packages/instant/src/components/view_transaction_button.tsx b/packages/instant/src/components/view_transaction_button.tsx
deleted file mode 100644
index 7aa44e657..000000000
--- a/packages/instant/src/components/view_transaction_button.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-import { SecondaryButton } from './secondary_button';
-
-export interface ViewTransactionButtonProps {
-    onClick: () => void;
-}
-
-export const ViewTransactionButton: React.StatelessComponent<ViewTransactionButtonProps> = props => {
-    return <SecondaryButton onClick={props.onClick}>View Transaction</SecondaryButton>;
-};
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 1d17ed12a..ff19351ff 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details';
 import { LatestError } from '../containers/latest_error';
-import { SelectedAssetBuyOrderStateButton } from '../containers/selected_asset_buy_order_state_button';
+import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons';
 import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
 
 import { ColorOption } from '../style/theme';
@@ -27,7 +27,7 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta
                 <SelectedAssetInstantHeading />
                 <LatestBuyQuoteOrderDetails />
                 <Container padding="20px" width="100%">
-                    <SelectedAssetBuyOrderStateButton />
+                    <SelectedAssetBuyOrderStateButtons />
                 </Container>
             </Flex>
         </Container>