diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-11-10 07:08:01 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-11-10 07:08:01 +0800 |
commit | 7249cc7b495f370f7ec5672ca36456dd4b6779de (patch) | |
tree | 52c5e52210a584bd00235253f9f9ef05d418e7ad /packages/instant | |
parent | b5988277087f0ee39109972d73ca94368d6dd4b9 (diff) | |
download | dexon-0x-contracts-7249cc7b495f370f7ec5672ca36456dd4b6779de.tar dexon-0x-contracts-7249cc7b495f370f7ec5672ca36456dd4b6779de.tar.gz dexon-0x-contracts-7249cc7b495f370f7ec5672ca36456dd4b6779de.tar.bz2 dexon-0x-contracts-7249cc7b495f370f7ec5672ca36456dd4b6779de.tar.lz dexon-0x-contracts-7249cc7b495f370f7ec5672ca36456dd4b6779de.tar.xz dexon-0x-contracts-7249cc7b495f370f7ec5672ca36456dd4b6779de.tar.zst dexon-0x-contracts-7249cc7b495f370f7ec5672ca36456dd4b6779de.zip |
feat: allow href prop on button
Diffstat (limited to 'packages/instant')
-rw-r--r-- | packages/instant/src/components/install_wallet_panel_content.tsx | 9 | ||||
-rw-r--r-- | packages/instant/src/components/payment_method.tsx | 1 | ||||
-rw-r--r-- | packages/instant/src/components/ui/button.tsx | 29 | ||||
-rw-r--r-- | packages/instant/src/constants.ts | 2 |
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/', |