feat: allow href prop on button

4 files changed, 33 insertions, 8 deletions

diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx
index 41b8ec74b..07e56ed70 100644
--- a/packages/instant/src/components/install_wallet_panel_content.tsx
+++ b/packages/instant/src/components/install_wallet_panel_content.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { METAMASK_CHROME_STORE_URL } from '../constants';
 import { ColorOption } from '../style/theme';
 
 import { MetaMaskLogo } from './meta_mask_logo';
@@ -14,7 +15,13 @@ export const InstallWalletPanelContent: React.StatelessComponent<InstallWalletPa
         title="Install MetaMask"
         description="Please install the MetaMask wallet extension from the Chrome Store."
         action={
-            <Button width="100%" fontSize="16px" fontColor={ColorOption.white} backgroundColor={ColorOption.darkOrange}>
+            <Button
+                href={METAMASK_CHROME_STORE_URL}
+                width="100%"
+                fontSize="16px"
+                fontColor={ColorOption.white}
+                backgroundColor={ColorOption.darkOrange}
+            >
                 Get Chrome Extension
             </Button>
         }
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index 9bd1f8104..ca646880d 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -1,4 +1,3 @@
-import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 
diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx
index d0b1bb508..479ef6c77 100644
--- a/packages/instant/src/components/ui/button.tsx
+++ b/packages/instant/src/components/ui/button.tsx
@@ -3,6 +3,8 @@ import * as React from 'react';
 
 import { ColorOption, styled } from '../../style/theme';
 
+export type ButtonOnClickHandler = (event: React.MouseEvent<HTMLElement>) => void;
+
 export interface ButtonProps {
     backgroundColor?: ColorOption;
     borderColor?: ColorOption;
@@ -12,15 +14,30 @@ export interface ButtonProps {
     padding?: string;
     type?: string;
     isDisabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    href?: string;
+    onClick?: ButtonOnClickHandler;
     className?: string;
 }
 
-const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
-    <button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}>
-        {children}
-    </button>
-);
+const createHrefOnClick = (href: string) => () => {
+    window.open(href, '_blank');
+};
+
+const PlainButton: React.StatelessComponent<ButtonProps> = ({
+    children,
+    isDisabled,
+    onClick,
+    href,
+    type,
+    className,
+}) => {
+    const computedOnClick = isDisabled ? undefined : href ? createHrefOnClick(href) : onClick;
+    return (
+        <button type={type} className={className} onClick={computedOnClick} disabled={isDisabled}>
+            {children}
+        </button>
+    );
+};
 
 const darkenOnHoverAmount = 0.1;
 const darkenOnActiveAmount = 0.2;
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index b5c4f96e4..7888e0ccb 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -17,6 +17,8 @@ export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
 export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2';
 export const PROGRESS_STALL_AT_WIDTH = '95%';
 export const PROGRESS_FINISH_ANIMATION_TIME_MS = 200;
+export const METAMASK_CHROME_STORE_URL =
+    'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en';
 export const ETHEREUM_NODE_URL_BY_NETWORK = {
     [Network.Mainnet]: 'https://mainnet.infura.io/',
     [Network.Kovan]: 'https://kovan.infura.io/',