Merge pull request #1180 from 0xProject/feature/instant/metamask-denial

[instant]Message when signature denied

3 files changed, 16 insertions, 2 deletions

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 9c42f3d87..0d35d36ca 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -1,4 +1,4 @@
-import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
+import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
 import * as _ from 'lodash';
 import * as React from 'react';
 
@@ -14,6 +14,7 @@ export interface BuyButtonProps {
     onClick: (buyQuote: BuyQuote) => void;
     onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void;
     onBuyFailure: (buyQuote: BuyQuote, tnxHash?: string) => void;
+    onBuyPrevented: (buyQuote: BuyQuote, preventedError: Error) => void;
 }
 
 export class BuyButton extends React.Component<BuyButtonProps> {
@@ -43,7 +44,11 @@ export class BuyButton extends React.Component<BuyButtonProps> {
             txnHash = await this.props.assetBuyer.executeBuyQuoteAsync(this.props.buyQuote);
             const txnReceipt = await web3Wrapper.awaitTransactionSuccessAsync(txnHash);
             this.props.onBuySuccess(this.props.buyQuote, txnReceipt.transactionHash);
-        } catch {
+        } catch (e) {
+            if (e instanceof Error && e.message === AssetBuyerError.SignatureRequestDenied) {
+                this.props.onBuyPrevented(this.props.buyQuote, e);
+                return;
+            }
             this.props.onBuyFailure(this.props.buyQuote, txnHash);
         }
     };
diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts
index 71d2b8cf0..428939e79 100644
--- a/packages/instant/src/containers/selected_asset_buy_button.ts
+++ b/packages/instant/src/containers/selected_asset_buy_button.ts
@@ -21,6 +21,7 @@ interface ConnectedDispatch {
     onClick: (buyQuote: BuyQuote) => void;
     onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void;
     onBuyFailure: (buyQuote: BuyQuote) => void;
+    onBuyPrevented: (buyQuote: BuyQuote, error: Error) => void;
 }
 
 const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): ConnectedState => ({
@@ -33,6 +34,10 @@ const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetB
     onBuySuccess: (buyQuote: BuyQuote, txnHash: string) =>
         dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.SUCCESS, txnHash })),
     onBuyFailure: buyQuote => dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.FAILURE })),
+    onBuyPrevented: (buyQuote, error) => {
+        dispatch(actions.resetAmount());
+        dispatch(actions.setError(error));
+    },
 });
 
 export const SelectedAssetBuyButton: React.ComponentClass<SelectedAssetBuyButtonProps> = connect(
diff --git a/packages/instant/src/util/error.ts b/packages/instant/src/util/error.ts
index 40fd24c7e..64c1f4885 100644
--- a/packages/instant/src/util/error.ts
+++ b/packages/instant/src/util/error.ts
@@ -46,6 +46,10 @@ const humanReadableMessageForError = (error: Error, asset?: Asset): string | und
         return `${assetName} is currently unavailable`;
     }
 
+    if (error.message === AssetBuyerError.SignatureRequestDenied) {
+        return 'You denied this transaction';
+    }
+
     return undefined;
 };