diff options
author | Leonid Logvinov <logvinov.leon@gmail.com> | 2018-07-05 21:04:01 +0800 |
---|---|---|
committer | Leonid Logvinov <logvinov.leon@gmail.com> | 2018-07-05 21:04:01 +0800 |
commit | 1ee2d6ed54b6159d1e8952692f4ddba0ebd65012 (patch) | |
tree | 1cebf47acf4fff2352a709035c141ec7ffdb8353 /packages/website/ts/components/wallet/wallet_disconnected_item.tsx | |
parent | 1eba78e20ac468d3b4d6ebe8fd91eb5277577e0a (diff) | |
parent | 5176d929fa6d3c6ce414448ea2441bd450f04e3c (diff) | |
download | dexon-sol-tools-1ee2d6ed54b6159d1e8952692f4ddba0ebd65012.tar dexon-sol-tools-1ee2d6ed54b6159d1e8952692f4ddba0ebd65012.tar.gz dexon-sol-tools-1ee2d6ed54b6159d1e8952692f4ddba0ebd65012.tar.bz2 dexon-sol-tools-1ee2d6ed54b6159d1e8952692f4ddba0ebd65012.tar.lz dexon-sol-tools-1ee2d6ed54b6159d1e8952692f4ddba0ebd65012.tar.xz dexon-sol-tools-1ee2d6ed54b6159d1e8952692f4ddba0ebd65012.tar.zst dexon-sol-tools-1ee2d6ed54b6159d1e8952692f4ddba0ebd65012.zip |
Merge branch 'v2-prototype' into v2-contract-wrappers-WIP
Diffstat (limited to 'packages/website/ts/components/wallet/wallet_disconnected_item.tsx')
-rw-r--r-- | packages/website/ts/components/wallet/wallet_disconnected_item.tsx | 100 |
1 files changed, 0 insertions, 100 deletions
diff --git a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx deleted file mode 100644 index 024b28544..000000000 --- a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { Styles } from '@0xproject/react-shared'; -import FlatButton from 'material-ui/FlatButton'; -import * as React from 'react'; - -import { colors } from 'ts/style/colors'; -import { BrowserType, ProviderType } from 'ts/types'; -import { constants } from 'ts/utils/constants'; -import { utils } from 'ts/utils/utils'; - -export interface WalletDisconnectedItemProps { - providerType: ProviderType; - injectedProviderName: string; - onToggleLedgerDialog: () => void; -} - -const styles: Styles = { - button: { - border: colors.walletBorder, - borderStyle: 'solid', - borderWidth: 1, - height: 80, - }, - hrefAdjustment: { - paddingTop: 20, // HACK: For some reason when we set the href prop of a FlatButton material-ui reduces the top padding - }, - otherWalletText: { - fontSize: 14, - color: colors.grey500, - textDecoration: 'underline', - }, -}; - -const ITEM_HEIGHT = 381; -const METAMASK_ICON_WIDTH = 35; -const LEDGER_ICON_WIDTH = 30; -const BUTTON_BOTTOM_PADDING = 80; - -export const WalletDisconnectedItem: React.StatelessComponent<WalletDisconnectedItemProps> = ( - props: WalletDisconnectedItemProps, -) => { - const isExternallyInjectedProvider = utils.isExternallyInjected(props.providerType, props.injectedProviderName); - return ( - <div className="flex flex-center"> - <div className="mx-auto"> - <div className="table" style={{ height: ITEM_HEIGHT }}> - <div className="table-cell align-middle"> - <ProviderButton isExternallyInjectedProvider={isExternallyInjectedProvider} /> - <div className="flex flex-center py2" style={{ paddingBottom: BUTTON_BOTTOM_PADDING }}> - <div className="mx-auto"> - <div onClick={props.onToggleLedgerDialog} style={{ cursor: 'pointer' }}> - <img src="/images/ledger_icon.png" style={{ width: LEDGER_ICON_WIDTH }} /> - <span className="px1" style={styles.otherWalletText}> - user other wallet - </span> - </div> - </div> - </div> - </div> - </div> - </div> - </div> - ); -}; - -interface ProviderButtonProps { - isExternallyInjectedProvider: boolean; -} - -const ProviderButton: React.StatelessComponent<ProviderButtonProps> = (props: ProviderButtonProps) => { - const browserType = utils.getBrowserType(); - let extensionLink; - if (!props.isExternallyInjectedProvider) { - switch (browserType) { - case BrowserType.Chrome: - extensionLink = constants.URL_METAMASK_CHROME_STORE; - break; - case BrowserType.Firefox: - extensionLink = constants.URL_METAMASK_FIREFOX_STORE; - break; - case BrowserType.Opera: - extensionLink = constants.URL_METAMASK_OPERA_STORE; - break; - default: - extensionLink = constants.URL_METAMASK_HOMEPAGE; - } - } - return ( - <FlatButton - label={props.isExternallyInjectedProvider ? 'Please unlock account' : 'Get Metamask Wallet Extension'} - labelStyle={{ color: colors.black }} - labelPosition="after" - primary={true} - icon={<img src="/images/metamask_icon.png" width={METAMASK_ICON_WIDTH.toString()} />} - style={props.isExternallyInjectedProvider ? styles.button : { ...styles.button, ...styles.hrefAdjustment }} - href={extensionLink} - target={props.isExternallyInjectedProvider ? undefined : '_blank'} - disabled={props.isExternallyInjectedProvider} - /> - ); -}; |