aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-10 07:08:01 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-11-10 07:08:01 +0800
commit7249cc7b495f370f7ec5672ca36456dd4b6779de (patch)
tree52c5e52210a584bd00235253f9f9ef05d418e7ad
parentb5988277087f0ee39109972d73ca94368d6dd4b9 (diff)
downloaddexon-sol-tools-7249cc7b495f370f7ec5672ca36456dd4b6779de.tar
dexon-sol-tools-7249cc7b495f370f7ec5672ca36456dd4b6779de.tar.gz
dexon-sol-tools-7249cc7b495f370f7ec5672ca36456dd4b6779de.tar.bz2
dexon-sol-tools-7249cc7b495f370f7ec5672ca36456dd4b6779de.tar.lz
dexon-sol-tools-7249cc7b495f370f7ec5672ca36456dd4b6779de.tar.xz
dexon-sol-tools-7249cc7b495f370f7ec5672ca36456dd4b6779de.tar.zst
dexon-sol-tools-7249cc7b495f370f7ec5672ca36456dd4b6779de.zip
feat: allow href prop on button
-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
-rw-r--r--packages/instant/src/constants.ts2
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/',