Merge pull request #1803 from 0xProject/instant-callback-done

Added performedCallback attribute for Redux state, and added a hook f…

packages/instant/public/index.html

@@ -203,6 +203,9 @@
                     onClose: () => {
                         console.log('0x Instant Closed');
                     },
+                    onSuccess: (txHash) => {
+                        console.log(`Success! Transaction hash is: ${txHash}`)
+                    }
                 };
                 const renderOptions = Object.assign({}, renderOptionsDefaults, removeUndefined(renderOptionsOverrides));
                 zeroExInstant.render(renderOptions);

packages/instant/src/components/zero_ex_instant_provider.tsx

@@ -85,6 +85,7 @@ export class ZeroExInstantProvider extends React.PureComponent<ZeroExInstantProv
                       ),
             assetMetaDataMap: completeAssetMetaDataMap,
             affiliateInfo: props.affiliateInfo,
+            onSuccess: props.onSuccess,
         };
         return storeStateFromProps;
     }

packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts

@@ -2,7 +2,6 @@ import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
 import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
-import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
 
@@ -24,6 +23,7 @@ interface ConnectedState {
     affiliateInfo?: AffiliateInfo;
     selectedAsset?: Asset;
     onViewTransaction: () => void;
+    onSuccess?: (txHash: string) => void;
 }
 
 interface ConnectedDispatch {
@@ -52,6 +52,7 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyOrderStateButt
         buyQuote: state.latestBuyQuote,
         affiliateInfo: state.affiliateInfo,
         selectedAsset,
+        onSuccess: state.onSuccess,
         onViewTransaction: () => {
             if (
                 state.buyOrderState.processState === OrderProcessState.Processing ||
@@ -107,7 +108,26 @@ const mapDispatchToProps = (
     },
 });
 
-export const SelectedAssetBuyOrderStateButtons: React.ComponentClass<SelectedAssetBuyOrderStateButtons> = connect(
+const mergeProps = (
+    connectedState: ConnectedState,
+    connectedDispatch: ConnectedDispatch,
+    ownProps: SelectedAssetBuyOrderStateButtons,
+) => {
+    return {
+        ...ownProps,
+        ...connectedState,
+        ...connectedDispatch,
+        onBuySuccess: (buyQuote: BuyQuote, txHash: string) => {
+            connectedDispatch.onBuySuccess(buyQuote, txHash);
+            if (connectedState.onSuccess) {
+                connectedState.onSuccess(txHash);
+            }
+        },
+    };
+};
+
+export const SelectedAssetBuyOrderStateButtons = connect(
     mapStateToProps,
     mapDispatchToProps,
+    mergeProps,
 )(BuyOrderStateButtons);

packages/instant/src/redux/reducer.ts

@@ -52,6 +52,7 @@ interface OptionalState {
     latestErrorMessage: string;
     affiliateInfo: AffiliateInfo;
     walletDisplayName: string;
+    onSuccess: (txHash: string) => void;
 }
 
 export type State = DefaultState & PropsDerivedState & Partial<OptionalState>;

packages/instant/src/types.ts

@@ -201,6 +201,7 @@ export interface ZeroExInstantOptionalBaseConfig {
     networkId: Network;
     affiliateInfo: AffiliateInfo;
     shouldDisableAnalyticsTracking: boolean;
+    onSuccess?: (txHash: string) => void;
 }
 
 export type ZeroExInstantBaseConfig = ZeroExInstantRequiredBaseConfig & Partial<ZeroExInstantOptionalBaseConfig>;