feat: allow href prop on button

3 files changed, 31 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;