aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r--packages/instant/src/components/install_wallet_panel_content.tsx9
-rw-r--r--packages/instant/src/components/payment_method.tsx1
-rw-r--r--packages/instant/src/components/ui/button.tsx29
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;