Merge branch 'development' of https://github.com/0xProject/0x-monorepo into feature/instant/input-fees-rounding

9 files changed, 117 insertions, 25 deletions

diff --git a/packages/instant/src/components/animations/full_rotation.tsx b/packages/instant/src/components/animations/full_rotation.tsx
new file mode 100644
index 000000000..9adb565f9
--- /dev/null
+++ b/packages/instant/src/components/animations/full_rotation.tsx
@@ -0,0 +1,24 @@
+import { keyframes, styled } from '../../style/theme';
+
+interface FullRotationProps {
+    height: string;
+    width: string;
+}
+const rotatingKeyframes = keyframes`
+from {
+  transform: rotate(0deg);
+}
+
+to {
+  transform: rotate(360deg);
+}
+`;
+
+export const FullRotation =
+    styled.div <
+    FullRotationProps >
+    `
+    animation: ${rotatingKeyframes} 2s linear infinite;
+    height: ${props => props.height};
+    width: ${props => props.width};
+`;
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index f999d59a8..9c42f3d87 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -41,8 +41,8 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         let txnHash;
         try {
             txnHash = await this.props.assetBuyer.executeBuyQuoteAsync(this.props.buyQuote);
-            await web3Wrapper.awaitTransactionSuccessAsync(txnHash);
-            this.props.onBuySuccess(this.props.buyQuote, txnHash);
+            const txnReceipt = await web3Wrapper.awaitTransactionSuccessAsync(txnHash);
+            this.props.onBuySuccess(this.props.buyQuote, txnReceipt.transactionHash);
         } catch {
             this.props.onBuyFailure(this.props.buyQuote, txnHash);
         }
diff --git a/packages/instant/src/components/buy_order_state_button.tsx b/packages/instant/src/components/buy_order_state_button.tsx
index e7641e7e7..5bc965c7d 100644
--- a/packages/instant/src/components/buy_order_state_button.tsx
+++ b/packages/instant/src/components/buy_order_state_button.tsx
@@ -1,23 +1,22 @@
 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 { AsyncProcessState } from '../types';
 
-import { SecondaryButton } from './secondary_button';
-
 export interface BuyOrderStateButtonProps {
-    buyOrderState: AsyncProcessState;
+    buyOrderProcessingState: AsyncProcessState;
 }
 
 export const BuyOrderStateButton: React.StatelessComponent<BuyOrderStateButtonProps> = props => {
-    if (props.buyOrderState === AsyncProcessState.FAILURE) {
+    if (props.buyOrderProcessingState === AsyncProcessState.FAILURE) {
         return <SelectedAssetRetryButton />;
-    } else if (props.buyOrderState === AsyncProcessState.SUCCESS) {
-        return <SecondaryButton text="Success" isDisabled={true} />;
-    } else if (props.buyOrderState === AsyncProcessState.PENDING) {
-        return <SecondaryButton text="Processing" isDisabled={true} />;
+    } else if (props.buyOrderProcessingState === AsyncProcessState.SUCCESS) {
+        return <SelectedAssetViewTransactionButton />;
+    } else if (props.buyOrderProcessingState === AsyncProcessState.PENDING) {
+        return <PlacingOrderButton />;
     }
 
     return <SelectedAssetBuyButton />;
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 0efb58360..f0a22bccb 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input';
 import { ColorOption } from '../style/theme';
-import { AsyncProcessState } from '../types';
+import { AsyncProcessState, OrderState } from '../types';
 import { format } from '../util/format';
 
 import { AmountPlaceholder } from './amount_placeholder';
@@ -16,10 +16,14 @@ export interface InstantHeadingProps {
     totalEthBaseAmount?: BigNumber;
     ethUsdPrice?: BigNumber;
     quoteRequestState: AsyncProcessState;
-    buyOrderState: AsyncProcessState;
+    buyOrderState: OrderState;
 }
 
-const placeholderColor = ColorOption.white;
+const PLACEHOLDER_COLOR = ColorOption.white;
+const ICON_WIDTH = 34;
+const ICON_HEIGHT = 34;
+const ICON_COLOR = ColorOption.white;
+
 export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     public render(): React.ReactNode {
         const iconOrAmounts = this._renderIcon() || this._renderAmountsSection();
@@ -64,15 +68,22 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     }
 
     private _renderIcon(): React.ReactNode {
-        if (this.props.buyOrderState === AsyncProcessState.FAILURE) {
-            return <Icon icon={'failed'} width={34} height={34} color={ColorOption.white} />;
+        const processState = this.props.buyOrderState.processState;
+
+        if (processState === AsyncProcessState.FAILURE) {
+            return <Icon icon={'failed'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />;
+        } else if (processState === AsyncProcessState.SUCCESS) {
+            return <Icon icon={'success'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />;
         }
         return undefined;
     }
 
     private _renderTopText(): React.ReactNode {
-        if (this.props.buyOrderState === AsyncProcessState.FAILURE) {
+        const processState = this.props.buyOrderState.processState;
+        if (processState === AsyncProcessState.FAILURE) {
             return 'Order failed';
+        } else if (processState === AsyncProcessState.SUCCESS) {
+            return 'Tokens received!';
         }
 
         return 'I want to buy';
@@ -80,10 +91,10 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
 
     private _placeholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode {
         if (this.props.quoteRequestState === AsyncProcessState.PENDING) {
-            return <AmountPlaceholder isPulsating={true} color={placeholderColor} />;
+            return <AmountPlaceholder isPulsating={true} color={PLACEHOLDER_COLOR} />;
         }
         if (_.isUndefined(this.props.selectedAssetAmount)) {
-            return <AmountPlaceholder isPulsating={false} color={placeholderColor} />;
+            return <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />;
         }
         return amountFunction();
     }
@@ -94,7 +105,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
                 {format.ethBaseAmount(
                     this.props.totalEthBaseAmount,
                     4,
-                    <AmountPlaceholder isPulsating={false} color={placeholderColor} />,
+                    <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />,
                 )}
             </Text>
         );
diff --git a/packages/instant/src/components/placing_order_button.tsx b/packages/instant/src/components/placing_order_button.tsx
new file mode 100644
index 000000000..4232e6c22
--- /dev/null
+++ b/packages/instant/src/components/placing_order_button.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Button } from './ui/button';
+import { Container } from './ui/container';
+import { Spinner } from './ui/spinner';
+import { Text } from './ui/text';
+
+export const PlacingOrderButton: React.StatelessComponent<{}> = props => (
+    <Button isDisabled={true} width="100%">
+        <Container display="inline-block" position="relative" top="3px" marginRight="8px">
+            <Spinner widthPx={20} heightPx={20} />
+        </Container>
+        <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
+            Placing Order&hellip;
+        </Text>
+    </Button>
+);
diff --git a/packages/instant/src/components/retry_button.tsx b/packages/instant/src/components/retry_button.tsx
index 28547ce54..0d6188e6a 100644
--- a/packages/instant/src/components/retry_button.tsx
+++ b/packages/instant/src/components/retry_button.tsx
@@ -7,5 +7,5 @@ export interface RetryButtonProps {
 }
 
 export const RetryButton: React.StatelessComponent<RetryButtonProps> = props => {
-    return <SecondaryButton text="Try Again" onClick={props.onClick} />;
+    return <SecondaryButton onClick={props.onClick}>Try Again</SecondaryButton>;
 };
diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx
index e073f6061..3c139a233 100644
--- a/packages/instant/src/components/secondary_button.tsx
+++ b/packages/instant/src/components/secondary_button.tsx
@@ -6,9 +6,7 @@ import { ColorOption } from '../style/theme';
 import { Button, ButtonProps } from './ui/button';
 import { Text } from './ui/text';
 
-export interface SecondaryButtonProps extends ButtonProps {
-    text: string;
-}
+export interface SecondaryButtonProps extends ButtonProps {}
 
 export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = props => {
     const buttonProps = _.omit(props, 'text');
@@ -21,7 +19,7 @@ export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = p
             {...buttonProps}
         >
             <Text fontColor={ColorOption.primaryColor} fontWeight={600} fontSize="16px">
-                {props.text}
+                {props.children}
             </Text>
         </Button>
     );
diff --git a/packages/instant/src/components/ui/spinner.tsx b/packages/instant/src/components/ui/spinner.tsx
new file mode 100644
index 000000000..28ebc2598
--- /dev/null
+++ b/packages/instant/src/components/ui/spinner.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+import { FullRotation } from '../animations/full_rotation';
+
+export interface SpinnerProps {
+    widthPx: number;
+    heightPx: number;
+}
+export const Spinner: React.StatelessComponent<SpinnerProps> = props => {
+    return (
+        <FullRotation width={`${props.widthPx}px`} height={`${props.heightPx}px`}>
+            <svg
+                width={props.widthPx}
+                height={props.heightPx}
+                viewBox="0 0 34 34"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <circle cx="17" cy="17" r="15" stroke="white" strokeOpacity="0.2" strokeWidth="4" />
+                <path
+                    d="M17 32C25.2843 32 32 25.2843 32 17C32 8.71573 25.2843 2 17 2"
+                    stroke="white"
+                    strokeWidth="4"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+            </svg>
+        </FullRotation>
+    );
+};
diff --git a/packages/instant/src/components/view_transaction_button.tsx b/packages/instant/src/components/view_transaction_button.tsx
new file mode 100644
index 000000000..7aa44e657
--- /dev/null
+++ b/packages/instant/src/components/view_transaction_button.tsx
@@ -0,0 +1,11 @@
+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>;
+};