From daf447361f911acf19a0f0489039244695945218 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 22 Oct 2018 13:11:29 -0700
Subject: WIP: spinner

---
 .../src/components/animations/full_rotation.tsx    | 15 +++++++++++
 packages/instant/src/components/ui/spinner.tsx     | 30 ++++++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 packages/instant/src/components/animations/full_rotation.tsx
 create mode 100644 packages/instant/src/components/ui/spinner.tsx

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..0b36fd21f
--- /dev/null
+++ b/packages/instant/src/components/animations/full_rotation.tsx
@@ -0,0 +1,15 @@
+import { keyframes, styled } from '../../style/theme';
+
+const rotatingKeyframes = keyframes`
+from {
+  transform: rotate(0deg);
+}
+
+to {
+  transform: rotate(360deg);
+}
+`;
+
+export const FullRotation = styled.div`
+    animation: ${rotatingKeyframes} 2s linear infinite;
+`;
diff --git a/packages/instant/src/components/ui/spinner.tsx b/packages/instant/src/components/ui/spinner.tsx
new file mode 100644
index 000000000..e5d2808f3
--- /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 {
+    width: number;
+    height: number;
+}
+export const Spinner: React.StatelessComponent<SpinnerProps> = props => {
+    return (
+        <FullRotation>
+            <svg
+                width={props.width}
+                height={props.height}
+                viewBox="0 0 34 34"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <circle cx="17" cy="17" r="15" stroke="white" stroke-opacity="0.2" stroke-width="4" />
+                <path
+                    d="M17 32C25.2843 32 32 25.2843 32 17C32 8.71573 25.2843 2 17 2"
+                    stroke="white"
+                    stroke-width="4"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                />
+            </svg>
+        </FullRotation>
+    );
+};
-- 
cgit v1.2.3


From d52a04e725afce3c2d563bcc52bd3273002af318 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 22 Oct 2018 13:18:37 -0700
Subject: Spinner no longer wobbly

---
 packages/instant/src/components/animations/full_rotation.tsx | 11 ++++++++++-
 packages/instant/src/components/ui/spinner.tsx               | 10 +++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/instant/src/components/animations/full_rotation.tsx b/packages/instant/src/components/animations/full_rotation.tsx
index 0b36fd21f..9adb565f9 100644
--- a/packages/instant/src/components/animations/full_rotation.tsx
+++ b/packages/instant/src/components/animations/full_rotation.tsx
@@ -1,5 +1,9 @@
 import { keyframes, styled } from '../../style/theme';
 
+interface FullRotationProps {
+    height: string;
+    width: string;
+}
 const rotatingKeyframes = keyframes`
 from {
   transform: rotate(0deg);
@@ -10,6 +14,11 @@ to {
 }
 `;
 
-export const FullRotation = styled.div`
+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/ui/spinner.tsx b/packages/instant/src/components/ui/spinner.tsx
index e5d2808f3..7abf24256 100644
--- a/packages/instant/src/components/ui/spinner.tsx
+++ b/packages/instant/src/components/ui/spinner.tsx
@@ -3,15 +3,15 @@ import * as React from 'react';
 import { FullRotation } from '../animations/full_rotation';
 
 export interface SpinnerProps {
-    width: number;
-    height: number;
+    pxWidth: number;
+    pxHeight: number;
 }
 export const Spinner: React.StatelessComponent<SpinnerProps> = props => {
     return (
-        <FullRotation>
+        <FullRotation width={`${props.pxWidth}px`} height={`${props.pxHeight}px`}>
             <svg
-                width={props.width}
-                height={props.height}
+                width={props.pxWidth}
+                height={props.pxHeight}
                 viewBox="0 0 34 34"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
-- 
cgit v1.2.3


From 4bf1ca0d1777d56126b3c5113a129738ba3c8d0d Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 22 Oct 2018 14:27:38 -0700
Subject: Making SecondaryButton accept children instead of text prop

---
 .../instant/src/components/placing_order_button.tsx   | 19 +++++++++++++++++++
 packages/instant/src/components/retry_button.tsx      |  2 +-
 packages/instant/src/components/secondary_button.tsx  |  6 ++----
 3 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 packages/instant/src/components/placing_order_button.tsx

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..8dc05c445
--- /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="2px" marginRight="5px">
+            <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>
     );
-- 
cgit v1.2.3


From 071f9a5a73eef54b657adce66d938ee444bd1d72 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 22 Oct 2018 14:28:02 -0700
Subject: Spinner: change prop names and fix svg props

---
 packages/instant/src/components/ui/spinner.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/instant/src/components/ui/spinner.tsx b/packages/instant/src/components/ui/spinner.tsx
index 7abf24256..28ebc2598 100644
--- a/packages/instant/src/components/ui/spinner.tsx
+++ b/packages/instant/src/components/ui/spinner.tsx
@@ -3,26 +3,26 @@ import * as React from 'react';
 import { FullRotation } from '../animations/full_rotation';
 
 export interface SpinnerProps {
-    pxWidth: number;
-    pxHeight: number;
+    widthPx: number;
+    heightPx: number;
 }
 export const Spinner: React.StatelessComponent<SpinnerProps> = props => {
     return (
-        <FullRotation width={`${props.pxWidth}px`} height={`${props.pxHeight}px`}>
+        <FullRotation width={`${props.widthPx}px`} height={`${props.heightPx}px`}>
             <svg
-                width={props.pxWidth}
-                height={props.pxHeight}
+                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" stroke-opacity="0.2" stroke-width="4" />
+                <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"
-                    stroke-width="4"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
+                    strokeWidth="4"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
                 />
             </svg>
         </FullRotation>
-- 
cgit v1.2.3


From 579a49ba918ef3c10f3eee0c63ff8d8f8be61fdf Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 22 Oct 2018 14:28:22 -0700
Subject: Placing order button

---
 packages/instant/src/containers/selected_asset_button.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/instant/src/containers/selected_asset_button.tsx b/packages/instant/src/containers/selected_asset_button.tsx
index 8c617804e..6fad365fa 100644
--- a/packages/instant/src/containers/selected_asset_button.tsx
+++ b/packages/instant/src/containers/selected_asset_button.tsx
@@ -6,6 +6,8 @@ import { SecondaryButton } from '../components/secondary_button';
 import { State } from '../redux/reducer';
 import { AsyncProcessState } from '../types';
 
+import { PlacingOrderButton } from '../components/placing_order_button';
+
 import { SelectedAssetBuyButton } from './selected_asset_buy_button';
 import { SelectedAssetRetryButton } from './selected_asset_retry_button';
 
@@ -23,9 +25,9 @@ const SelectedAssetButtonPresentationComponent: React.StatelessComponent<{
     if (props.buyOrderState === AsyncProcessState.FAILURE) {
         return <SelectedAssetRetryButton />;
     } else if (props.buyOrderState === AsyncProcessState.SUCCESS) {
-        return <SecondaryButton text="Success" isDisabled={true} />;
+        return <SecondaryButton isDisabled={true}>Success</SecondaryButton>;
     } else if (props.buyOrderState === AsyncProcessState.PENDING) {
-        return <SecondaryButton text="Processing" isDisabled={true} />;
+        return <PlacingOrderButton />;
     }
 
     return <SelectedAssetBuyButton />;
-- 
cgit v1.2.3


From 194cbc3ba941023a0b6c1845a867ccfd619b754f Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 22 Oct 2018 15:57:16 -0700
Subject: Make icon a bit better

---
 packages/instant/src/components/placing_order_button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/instant/src/components/placing_order_button.tsx b/packages/instant/src/components/placing_order_button.tsx
index 8dc05c445..4232e6c22 100644
--- a/packages/instant/src/components/placing_order_button.tsx
+++ b/packages/instant/src/components/placing_order_button.tsx
@@ -9,7 +9,7 @@ import { Text } from './ui/text';
 
 export const PlacingOrderButton: React.StatelessComponent<{}> = props => (
     <Button isDisabled={true} width="100%">
-        <Container display="inline-block" position="relative" top="2px" marginRight="5px">
+        <Container display="inline-block" position="relative" top="3px" marginRight="8px">
             <Spinner widthPx={20} heightPx={20} />
         </Container>
         <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
-- 
cgit v1.2.3


From 4c4286ac662d3dba928bf16b83ade5e5476f4614 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 23 Oct 2018 17:06:45 -0700
Subject: feat(instant): Procesing and Success states

---
 packages/instant/package.json                      |  3 +-
 packages/instant/src/components/buy_button.tsx     |  4 +--
 .../instant/src/components/instant_heading.tsx     | 29 ++++++++++++------
 .../src/components/view_transaction_button.tsx     | 11 +++++++
 .../src/containers/selected_asset_amount_input.ts  |  2 +-
 .../src/containers/selected_asset_button.tsx       | 15 +++++-----
 .../src/containers/selected_asset_buy_button.ts    |  9 +++---
 .../containers/selected_asset_instant_heading.ts   |  4 +--
 .../selected_asset_view_transaction_button.tsx     | 35 ++++++++++++++++++++++
 packages/instant/src/redux/actions.ts              |  7 ++---
 packages/instant/src/redux/reducer.ts              | 10 +++----
 packages/instant/src/types.ts                      | 14 +++++++++
 yarn.lock                                          |  9 +++++-
 13 files changed, 116 insertions(+), 36 deletions(-)
 create mode 100644 packages/instant/src/components/view_transaction_button.tsx
 create mode 100644 packages/instant/src/containers/selected_asset_view_transaction_button.tsx

diff --git a/packages/instant/package.json b/packages/instant/package.json
index 1a6e9d2e9..a7aa25f1b 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -46,6 +46,7 @@
     "dependencies": {
         "@0x/asset-buyer": "^2.1.0",
         "@0x/order-utils": "^2.0.0",
+        "@0x/react-shared": "^1.0.17",
         "@0x/types": "^1.2.0",
         "@0x/typescript-typings": "^3.0.3",
         "@0x/utils": "^2.0.3",
@@ -62,8 +63,8 @@
         "ts-optchain": "^0.1.1"
     },
     "devDependencies": {
-        "@static/discharge": "^1.2.2",
         "@0x/tslint-config": "^1.0.9",
+        "@static/discharge": "^1.2.2",
         "@types/enzyme": "^3.1.14",
         "@types/enzyme-adapter-react-16": "^1.0.3",
         "@types/jest": "^23.3.5",
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 2def34fd7..1afd216d8 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/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 856e4d43e..ed753a3bd 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();
@@ -62,15 +66,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';
@@ -78,10 +89,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();
     }
@@ -92,7 +103,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/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>;
+};
diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts
index 0d847cf02..f23b2010e 100644
--- a/packages/instant/src/containers/selected_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_asset_amount_input.ts
@@ -90,7 +90,7 @@ const mapDispatchToProps = (
         // invalidate the last buy quote.
         dispatch(actions.updateLatestBuyQuote(undefined));
         // reset our buy state
-        dispatch(actions.updateBuyOrderState(AsyncProcessState.NONE));
+        dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.NONE }));
 
         if (!_.isUndefined(value) && !_.isUndefined(asset) && !_.isUndefined(assetBuyer)) {
             // even if it's debounced, give them the illusion it's loading
diff --git a/packages/instant/src/containers/selected_asset_button.tsx b/packages/instant/src/containers/selected_asset_button.tsx
index 6fad365fa..d368d05e1 100644
--- a/packages/instant/src/containers/selected_asset_button.tsx
+++ b/packages/instant/src/containers/selected_asset_button.tsx
@@ -4,15 +4,16 @@ import { connect } from 'react-redux';
 
 import { SecondaryButton } from '../components/secondary_button';
 import { State } from '../redux/reducer';
-import { AsyncProcessState } from '../types';
+import { AsyncProcessState, OrderState } from '../types';
 
 import { PlacingOrderButton } from '../components/placing_order_button';
 
 import { SelectedAssetBuyButton } from './selected_asset_buy_button';
 import { SelectedAssetRetryButton } from './selected_asset_retry_button';
+import { SelectedAssetViewTransactionButton } from './selected_asset_view_transaction_button';
 
 interface ConnectedState {
-    buyOrderState: AsyncProcessState;
+    buyOrderState: OrderState;
 }
 export interface SelectedAssetButtonProps {}
 const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({
@@ -20,13 +21,13 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): Con
 });
 
 const SelectedAssetButtonPresentationComponent: React.StatelessComponent<{
-    buyOrderState: AsyncProcessState;
+    buyOrderState: OrderState;
 }> = props => {
-    if (props.buyOrderState === AsyncProcessState.FAILURE) {
+    if (props.buyOrderState.processState === AsyncProcessState.FAILURE) {
         return <SelectedAssetRetryButton />;
-    } else if (props.buyOrderState === AsyncProcessState.SUCCESS) {
-        return <SecondaryButton isDisabled={true}>Success</SecondaryButton>;
-    } else if (props.buyOrderState === AsyncProcessState.PENDING) {
+    } else if (props.buyOrderState.processState === AsyncProcessState.SUCCESS) {
+        return <SelectedAssetViewTransactionButton />;
+    } else if (props.buyOrderState.processState === AsyncProcessState.PENDING) {
         return <PlacingOrderButton />;
     }
 
diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts
index 208bb2582..71d2b8cf0 100644
--- a/packages/instant/src/containers/selected_asset_buy_button.ts
+++ b/packages/instant/src/containers/selected_asset_buy_button.ts
@@ -19,7 +19,7 @@ interface ConnectedState {
 
 interface ConnectedDispatch {
     onClick: (buyQuote: BuyQuote) => void;
-    onBuySuccess: (buyQuote: BuyQuote) => void;
+    onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void;
     onBuyFailure: (buyQuote: BuyQuote) => void;
 }
 
@@ -29,9 +29,10 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps):
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({
-    onClick: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.PENDING)),
-    onBuySuccess: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.SUCCESS)),
-    onBuyFailure: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.FAILURE)),
+    onClick: buyQuote => dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.PENDING })),
+    onBuySuccess: (buyQuote: BuyQuote, txnHash: string) =>
+        dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.SUCCESS, txnHash })),
+    onBuyFailure: buyQuote => dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.FAILURE })),
 });
 
 export const SelectedAssetBuyButton: React.ComponentClass<SelectedAssetBuyButtonProps> = connect(
diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts
index 24efed32e..6b2a29b07 100644
--- a/packages/instant/src/containers/selected_asset_instant_heading.ts
+++ b/packages/instant/src/containers/selected_asset_instant_heading.ts
@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import { oc } from 'ts-optchain';
 
 import { State } from '../redux/reducer';
-import { AsyncProcessState } from '../types';
+import { AsyncProcessState, OrderState } from '../types';
 
 import { InstantHeading } from '../components/instant_heading';
 
@@ -16,7 +16,7 @@ interface ConnectedState {
     totalEthBaseAmount?: BigNumber;
     ethUsdPrice?: BigNumber;
     quoteRequestState: AsyncProcessState;
-    buyOrderState: AsyncProcessState;
+    buyOrderState: OrderState;
 }
 
 const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): ConnectedState => ({
diff --git a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
new file mode 100644
index 000000000..44de16c4a
--- /dev/null
+++ b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
@@ -0,0 +1,35 @@
+import { EtherscanLinkSuffixes, utils } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+import { State } from '../redux/reducer';
+
+import { ViewTransactionButton } from '../components/view_transaction_button';
+import { AsyncProcessState } from '../types';
+
+export interface SelectedAssetViewTransactionButtonProps {}
+
+interface ConnectedState {
+    onClick: () => void;
+}
+
+const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
+    onClick: () => {
+        if (state.assetBuyer && state.buyOrderState.processState === AsyncProcessState.SUCCESS) {
+            const etherscanUrl = utils.getEtherScanLinkIfExists(
+                state.buyOrderState.txnHash,
+                state.assetBuyer.networkId,
+                EtherscanLinkSuffixes.Tx,
+            );
+            if (etherscanUrl) {
+                window.open(etherscanUrl, '_blank');
+                return;
+            }
+        }
+    },
+});
+
+export const SelectedAssetViewTransactionButton: React.ComponentClass<
+    SelectedAssetViewTransactionButtonProps
+> = connect(mapStateToProps)(ViewTransactionButton);
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index bdb53a395..1360634d7 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, AsyncProcessState } from '../types';
+import { ActionsUnion, AsyncProcessState, OrderState } from '../types';
 
 export interface PlainAction<T extends string> {
     type: T;
@@ -23,7 +23,7 @@ function createAction<T extends string, P>(type: T, data?: P): PlainAction<T> |
 export enum ActionTypes {
     UPDATE_ETH_USD_PRICE = 'UPDATE_ETH_USD_PRICE',
     UPDATE_SELECTED_ASSET_AMOUNT = 'UPDATE_SELECTED_ASSET_AMOUNT',
-    UPDATE_SELECTED_ASSET_BUY_STATE = 'UPDATE_SELECTED_ASSET_BUY_STATE',
+    UPDATE_BUY_ORDER_STATE = 'UPDATE_BUY_ORDER_STATE',
     UPDATE_LATEST_BUY_QUOTE = 'UPDATE_LATEST_BUY_QUOTE',
     UPDATE_SELECTED_ASSET = 'UPDATE_SELECTED_ASSET',
     SET_QUOTE_REQUEST_STATE_PENDING = 'SET_QUOTE_REQUEST_STATE_PENDING',
@@ -37,8 +37,7 @@ export enum ActionTypes {
 export const actions = {
     updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price),
     updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount),
-    updateBuyOrderState: (buyState: AsyncProcessState) =>
-        createAction(ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE, buyState),
+    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),
     setQuoteRequestStatePending: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING),
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index 260039e3d..1aedcbcc4 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -4,7 +4,7 @@ import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 
 import { assetMetaDataMap } from '../data/asset_meta_data_map';
-import { Asset, AssetMetaData, AsyncProcessState, DisplayStatus, Network } from '../types';
+import { Asset, AssetMetaData, AsyncProcessState, DisplayStatus, Network, OrderState } from '../types';
 import { assetUtils } from '../util/asset';
 
 import { Action, ActionTypes } from './actions';
@@ -15,7 +15,7 @@ export interface State {
     assetMetaDataMap: ObjectMap<AssetMetaData>;
     selectedAsset?: Asset;
     selectedAssetAmount?: BigNumber;
-    buyOrderState: AsyncProcessState;
+    buyOrderState: OrderState;
     ethUsdPrice?: BigNumber;
     latestBuyQuote?: BuyQuote;
     quoteRequestState: AsyncProcessState;
@@ -27,7 +27,7 @@ export const INITIAL_STATE: State = {
     network: Network.Mainnet,
     selectedAssetAmount: undefined,
     assetMetaDataMap,
-    buyOrderState: AsyncProcessState.NONE,
+    buyOrderState: { processState: AsyncProcessState.NONE },
     ethUsdPrice: undefined,
     latestBuyQuote: undefined,
     latestError: undefined,
@@ -65,7 +65,7 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 latestBuyQuote: undefined,
                 quoteRequestState: AsyncProcessState.FAILURE,
             };
-        case ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE:
+        case ActionTypes.UPDATE_BUY_ORDER_STATE:
             return {
                 ...state,
                 buyOrderState: action.data,
@@ -106,7 +106,7 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 ...state,
                 latestBuyQuote: undefined,
                 quoteRequestState: AsyncProcessState.NONE,
-                buyOrderState: AsyncProcessState.NONE,
+                buyOrderState: { processState: AsyncProcessState.NONE },
                 selectedAssetAmount: undefined,
             };
         default:
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 7323123c3..b7b16f4d7 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -7,6 +7,20 @@ export enum AsyncProcessState {
     SUCCESS = 'Success',
     FAILURE = 'Failure',
 }
+
+interface RegularOrderState {
+    processState: AsyncProcessState.NONE | AsyncProcessState.PENDING;
+}
+interface SuccessfulOrderState {
+    processState: AsyncProcessState.SUCCESS;
+    txnHash: string;
+}
+interface FailureOrderState {
+    processState: AsyncProcessState.FAILURE;
+    txnHash?: string;
+}
+export type OrderState = RegularOrderState | SuccessfulOrderState | FailureOrderState;
+
 export enum DisplayStatus {
     Present,
     Hidden,
diff --git a/yarn.lock b/yarn.lock
index f0064bff1..95650a2d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6730,7 +6730,7 @@ ganache-core@0xProject/ganache-core#monorepo-dep:
     ethereumjs-tx "0xProject/ethereumjs-tx#fake-tx-include-signature-by-default"
     ethereumjs-util "^5.2.0"
     ethereumjs-vm "2.3.5"
-    ethereumjs-wallet "~0.6.0"
+    ethereumjs-wallet "0.6.0"
     fake-merkle-patricia-tree "~1.0.1"
     heap "~0.2.6"
     js-scrypt "^0.2.0"
@@ -12533,6 +12533,13 @@ react-scroll@0xproject/react-scroll#pr-330-and-replace-state:
     lodash.throttle "^4.1.1"
     prop-types "^15.5.8"
 
+react-scroll@0xproject/react-scroll#similar-to-pr-330-but-with-replace-state:
+  version "1.7.10"
+  resolved "https://codeload.github.com/0xproject/react-scroll/tar.gz/0f625b270d7e966313cac8b811c0ae807b37e170"
+  dependencies:
+    lodash.throttle "^4.1.1"
+    prop-types "^15.5.8"
+
 react-side-effect@^1.0.2, react-side-effect@^1.1.0:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.1.5.tgz#f26059e50ed9c626d91d661b9f3c8bb38cd0ff2d"
-- 
cgit v1.2.3


From c1f9f2e8d9dc97d9ac6fcb865c46e5a74118a75c Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Wed, 24 Oct 2018 08:47:39 -0700
Subject: commiting addtl changes to yarn.lock from running yarn

---
 yarn.lock | 46 +---------------------------------------------
 1 file changed, 1 insertion(+), 45 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 95650a2d7..8b9fd53cb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1869,10 +1869,6 @@ aes-js@^0.2.3:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-0.2.4.tgz#94b881ab717286d015fa219e08fb66709dda5a3d"
 
-aes-js@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/aes-js/-/aes-js-3.1.1.tgz#89fd1f94ae51b4c72d62466adc1a7323ff52f072"
-
 agent-base@4, agent-base@^4.1.0, agent-base@~4.2.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9"
@@ -3303,7 +3299,7 @@ bs-logger@0.x:
   dependencies:
     fast-json-stable-stringify "^2.0.0"
 
-bs58@=4.0.1, bs58@^4.0.0:
+bs58@=4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a"
   dependencies:
@@ -3326,14 +3322,6 @@ bs58check@^1.0.8:
     bs58 "^3.1.0"
     create-hash "^1.1.0"
 
-bs58check@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.npmjs.org/bs58check/-/bs58check-2.1.2.tgz#53b018291228d82a5aa08e7d796fdafda54aebfc"
-  dependencies:
-    bs58 "^4.0.0"
-    create-hash "^1.1.0"
-    safe-buffer "^5.1.2"
-
 bser@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719"
@@ -5913,19 +5901,6 @@ ethereumjs-wallet@0.6.0:
     utf8 "^2.1.1"
     uuid "^2.0.1"
 
-ethereumjs-wallet@~0.6.0:
-  version "0.6.2"
-  resolved "https://registry.npmjs.org/ethereumjs-wallet/-/ethereumjs-wallet-0.6.2.tgz#67244b6af3e8113b53d709124b25477b64aeccda"
-  dependencies:
-    aes-js "^3.1.1"
-    bs58check "^2.1.2"
-    ethereumjs-util "^5.2.0"
-    hdkey "^1.0.0"
-    safe-buffer "^5.1.2"
-    scrypt.js "^0.2.0"
-    utf8 "^3.0.0"
-    uuid "^3.3.2"
-
 ethers@~4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/ethers/-/ethers-4.0.4.tgz#d3f85e8b27f4b59537e06526439b0fb15b44dc65"
@@ -7455,14 +7430,6 @@ hdkey@^0.7.0, hdkey@^0.7.1:
     coinstring "^2.0.0"
     secp256k1 "^3.0.1"
 
-hdkey@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/hdkey/-/hdkey-1.1.0.tgz#e74e7b01d2c47f797fa65d1d839adb7a44639f29"
-  dependencies:
-    coinstring "^2.0.0"
-    safe-buffer "^5.1.1"
-    secp256k1 "^3.0.1"
-
 he@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
@@ -12533,13 +12500,6 @@ react-scroll@0xproject/react-scroll#pr-330-and-replace-state:
     lodash.throttle "^4.1.1"
     prop-types "^15.5.8"
 
-react-scroll@0xproject/react-scroll#similar-to-pr-330-but-with-replace-state:
-  version "1.7.10"
-  resolved "https://codeload.github.com/0xproject/react-scroll/tar.gz/0f625b270d7e966313cac8b811c0ae807b37e170"
-  dependencies:
-    lodash.throttle "^4.1.1"
-    prop-types "^15.5.8"
-
 react-side-effect@^1.0.2, react-side-effect@^1.1.0:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.1.5.tgz#f26059e50ed9c626d91d661b9f3c8bb38cd0ff2d"
@@ -15553,10 +15513,6 @@ utf8@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/utf8/-/utf8-2.1.2.tgz#1fa0d9270e9be850d9b05027f63519bf46457d96"
 
-utf8@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/utf8/-/utf8-3.0.0.tgz#f052eed1364d696e769ef058b183df88c87f69d1"
-
 util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
-- 
cgit v1.2.3


From 119c4e2dc65cfa8fff75875162b87c378c16cd4a Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Wed, 24 Oct 2018 08:48:19 -0700
Subject: Revert "commiting addtl changes to yarn.lock from running yarn"

This reverts commit c1f9f2e8d9dc97d9ac6fcb865c46e5a74118a75c.
---
 yarn.lock | 46 +++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index 8b9fd53cb..95650a2d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1869,6 +1869,10 @@ aes-js@^0.2.3:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-0.2.4.tgz#94b881ab717286d015fa219e08fb66709dda5a3d"
 
+aes-js@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/aes-js/-/aes-js-3.1.1.tgz#89fd1f94ae51b4c72d62466adc1a7323ff52f072"
+
 agent-base@4, agent-base@^4.1.0, agent-base@~4.2.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9"
@@ -3299,7 +3303,7 @@ bs-logger@0.x:
   dependencies:
     fast-json-stable-stringify "^2.0.0"
 
-bs58@=4.0.1:
+bs58@=4.0.1, bs58@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a"
   dependencies:
@@ -3322,6 +3326,14 @@ bs58check@^1.0.8:
     bs58 "^3.1.0"
     create-hash "^1.1.0"
 
+bs58check@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/bs58check/-/bs58check-2.1.2.tgz#53b018291228d82a5aa08e7d796fdafda54aebfc"
+  dependencies:
+    bs58 "^4.0.0"
+    create-hash "^1.1.0"
+    safe-buffer "^5.1.2"
+
 bser@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719"
@@ -5901,6 +5913,19 @@ ethereumjs-wallet@0.6.0:
     utf8 "^2.1.1"
     uuid "^2.0.1"
 
+ethereumjs-wallet@~0.6.0:
+  version "0.6.2"
+  resolved "https://registry.npmjs.org/ethereumjs-wallet/-/ethereumjs-wallet-0.6.2.tgz#67244b6af3e8113b53d709124b25477b64aeccda"
+  dependencies:
+    aes-js "^3.1.1"
+    bs58check "^2.1.2"
+    ethereumjs-util "^5.2.0"
+    hdkey "^1.0.0"
+    safe-buffer "^5.1.2"
+    scrypt.js "^0.2.0"
+    utf8 "^3.0.0"
+    uuid "^3.3.2"
+
 ethers@~4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/ethers/-/ethers-4.0.4.tgz#d3f85e8b27f4b59537e06526439b0fb15b44dc65"
@@ -7430,6 +7455,14 @@ hdkey@^0.7.0, hdkey@^0.7.1:
     coinstring "^2.0.0"
     secp256k1 "^3.0.1"
 
+hdkey@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/hdkey/-/hdkey-1.1.0.tgz#e74e7b01d2c47f797fa65d1d839adb7a44639f29"
+  dependencies:
+    coinstring "^2.0.0"
+    safe-buffer "^5.1.1"
+    secp256k1 "^3.0.1"
+
 he@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
@@ -12500,6 +12533,13 @@ react-scroll@0xproject/react-scroll#pr-330-and-replace-state:
     lodash.throttle "^4.1.1"
     prop-types "^15.5.8"
 
+react-scroll@0xproject/react-scroll#similar-to-pr-330-but-with-replace-state:
+  version "1.7.10"
+  resolved "https://codeload.github.com/0xproject/react-scroll/tar.gz/0f625b270d7e966313cac8b811c0ae807b37e170"
+  dependencies:
+    lodash.throttle "^4.1.1"
+    prop-types "^15.5.8"
+
 react-side-effect@^1.0.2, react-side-effect@^1.1.0:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.1.5.tgz#f26059e50ed9c626d91d661b9f3c8bb38cd0ff2d"
@@ -15513,6 +15553,10 @@ utf8@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/utf8/-/utf8-2.1.2.tgz#1fa0d9270e9be850d9b05027f63519bf46457d96"
 
+utf8@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/utf8/-/utf8-3.0.0.tgz#f052eed1364d696e769ef058b183df88c87f69d1"
+
 util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
-- 
cgit v1.2.3


From fefb64442a5b288020c6523de4093fc3f7e43f37 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Wed, 24 Oct 2018 09:04:10 -0700
Subject: Get rid of unused import

---
 packages/instant/src/redux/actions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index 9c084ab3c..5a4099f15 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, AsyncProcessState, OrderState } from '../types';
+import { ActionsUnion, OrderState } from '../types';
 
 export interface PlainAction<T extends string> {
     type: T;
-- 
cgit v1.2.3


From 33d8044f028b16e3e48ee963790aa840f3191803 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Wed, 24 Oct 2018 09:55:13 -0700
Subject: bumping up max bundle size for now (introducing react-shared added a
 lot), will optimize later

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c786e7f19..51757b451 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
             },
             {
                 "path": "packages/instant/public/main.bundle.js",
-                "maxSize": "500kB"
+                "maxSize": "800kB"
             }
         ],
         "ci": {
-- 
cgit v1.2.3


From 09f0bf7f0062bba51380ae904bff96baddf5f0f2 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Wed, 24 Oct 2018 11:50:05 -0700
Subject: Get rid of react-shared as a dependency, write own etherscanUtil

---
 package.json                                       |  2 +-
 packages/instant/package.json                      |  1 -
 .../selected_asset_view_transaction_button.tsx     |  5 ++---
 packages/instant/src/util/etherscan.ts             | 24 ++++++++++++++++++++++
 4 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 packages/instant/src/util/etherscan.ts

diff --git a/package.json b/package.json
index 51757b451..c786e7f19 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
             },
             {
                 "path": "packages/instant/public/main.bundle.js",
-                "maxSize": "800kB"
+                "maxSize": "500kB"
             }
         ],
         "ci": {
diff --git a/packages/instant/package.json b/packages/instant/package.json
index a7aa25f1b..421802530 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -46,7 +46,6 @@
     "dependencies": {
         "@0x/asset-buyer": "^2.1.0",
         "@0x/order-utils": "^2.0.0",
-        "@0x/react-shared": "^1.0.17",
         "@0x/types": "^1.2.0",
         "@0x/typescript-typings": "^3.0.3",
         "@0x/utils": "^2.0.3",
diff --git a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
index 44de16c4a..6f42b9f85 100644
--- a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
+++ b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
@@ -1,4 +1,3 @@
-import { EtherscanLinkSuffixes, utils } from '@0x/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { connect } from 'react-redux';
@@ -7,6 +6,7 @@ import { State } from '../redux/reducer';
 
 import { ViewTransactionButton } from '../components/view_transaction_button';
 import { AsyncProcessState } from '../types';
+import { etherscanUtil } from '../util/etherscan';
 
 export interface SelectedAssetViewTransactionButtonProps {}
 
@@ -17,10 +17,9 @@ interface ConnectedState {
 const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
     onClick: () => {
         if (state.assetBuyer && state.buyOrderState.processState === AsyncProcessState.SUCCESS) {
-            const etherscanUrl = utils.getEtherScanLinkIfExists(
+            const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists(
                 state.buyOrderState.txnHash,
                 state.assetBuyer.networkId,
-                EtherscanLinkSuffixes.Tx,
             );
             if (etherscanUrl) {
                 window.open(etherscanUrl, '_blank');
diff --git a/packages/instant/src/util/etherscan.ts b/packages/instant/src/util/etherscan.ts
new file mode 100644
index 000000000..ffb08a382
--- /dev/null
+++ b/packages/instant/src/util/etherscan.ts
@@ -0,0 +1,24 @@
+import * as _ from 'lodash';
+
+import { Network } from '../types';
+
+const etherscanPrefix = (networkId: number): string | undefined => {
+    switch (networkId) {
+        case Network.Kovan:
+            return 'kovan.';
+        case Network.Mainnet:
+            return '';
+        default:
+            return undefined;
+    }
+};
+
+export const etherscanUtil = {
+    getEtherScanTxnAddressIfExists: (txnHash: string, networkId: number) => {
+        const prefix = etherscanPrefix(networkId);
+        if (_.isUndefined(prefix)) {
+            return;
+        }
+        return `https://${prefix}etherscan.io/tx/${txnHash}`;
+    },
+};
-- 
cgit v1.2.3