diff options
| -rw-r--r-- | packages/website/ts/components/ui/image.tsx | 4 | ||||
| -rw-r--r-- | packages/website/ts/components/wallet/body_overlay.tsx | 61 | ||||
| -rw-r--r-- | packages/website/ts/utils/constants.ts | 2 |
3 files changed, 47 insertions, 20 deletions
diff --git a/packages/website/ts/components/ui/image.tsx b/packages/website/ts/components/ui/image.tsx index 369dc8b7e..c4ff93531 100644 --- a/packages/website/ts/components/ui/image.tsx +++ b/packages/website/ts/components/ui/image.tsx @@ -6,6 +6,7 @@ export interface ImageProps { src?: string; fallbackSrc?: string; height?: string | number; + borderRadius?: string; width?: string | number; } interface ImageState { @@ -26,6 +27,9 @@ export class Image extends React.Component<ImageProps, ImageState> { className={this.props.className} onError={this._onError.bind(this)} src={src} + style={{ + borderRadius: this.props.borderRadius, + }} height={this.props.height} width={this.props.width} /> diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx index 5ced704f9..6995b5065 100644 --- a/packages/website/ts/components/wallet/body_overlay.tsx +++ b/packages/website/ts/components/wallet/body_overlay.tsx @@ -9,11 +9,12 @@ import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; -import { AccountState, BrowserType, ProviderType } from 'ts/types'; +import { AccountState, BrowserType, ProviderType, OperatingSystemType } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; const METAMASK_IMG_SRC = '/images/metamask_icon.png'; +const TOSHI_IMG_SRC = '/images/toshi_logo.jpg'; export interface BodyOverlayProps { dispatcher: Dispatcher; @@ -92,8 +93,10 @@ interface DisconnectedOverlayProps { const DisconnectedOverlay = (props: DisconnectedOverlayProps) => { return ( <div className="flex flex-column items-center"> - <GetMetaMask /> - <UseDifferentWallet fontColor={colors.mediumBlue} onClick={props.onUseDifferentWalletClicked} /> + <GetWalletCallToAction /> + {!utils.isMobileOperatingSystem() && ( + <UseDifferentWallet fontColor={colors.mediumBlue} onClick={props.onUseDifferentWalletClicked} /> + )} </div> ); }; @@ -112,32 +115,50 @@ const UseDifferentWallet = (props: UseDifferentWallet) => { ); }; -const GetMetaMask = () => { +const GetWalletCallToAction = () => { const browserType = utils.getBrowserType(); - let extensionLink; - 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; + const isOnMobile = utils.isMobileOperatingSystem(); + const operatingSystem = utils.getOperatingSystem(); + const imageUrl = isOnMobile ? TOSHI_IMG_SRC : METAMASK_IMG_SRC; + const text = isOnMobile ? 'Get Toshi Wallet' : 'Get MetaMask Wallet'; + let downloadLink; + if (isOnMobile) { + switch (operatingSystem) { + case OperatingSystemType.Android: + downloadLink = constants.URL_TOSHI_ANDROID_APP_STORE; + break; + case OperatingSystemType.iOS: + downloadLink = constants.URL_TOSHI_IOS_APP_STORE; + break; + default: + // Toshi is only supported on these mobile OSes - just default to iOS + downloadLink = constants.URL_TOSHI_IOS_APP_STORE; + } + } else { + switch (browserType) { + case BrowserType.Chrome: + downloadLink = constants.URL_METAMASK_CHROME_STORE; + break; + case BrowserType.Firefox: + downloadLink = constants.URL_METAMASK_FIREFOX_STORE; + break; + case BrowserType.Opera: + downloadLink = constants.URL_METAMASK_OPERA_STORE; + break; + default: + downloadLink = constants.URL_METAMASK_HOMEPAGE; + } } return ( - <a href={extensionLink} target="_blank" style={{ textDecoration: 'none' }}> + <a href={downloadLink} target="_blank" style={{ textDecoration: 'none' }}> <Island className="flex items-center py1 px2" style={{ height: 28, borderRadius: 28, backgroundColor: colors.mediumBlue }} > - <Image src={METAMASK_IMG_SRC} width="28px" /> + <Image src={imageUrl} width="28px" borderRadius="22%" /> <Container marginLeft="8px" marginRight="12px"> <Text fontColor={colors.white} fontSize="16px" fontWeight={500}> - Get MetaMask Wallet + {text} </Text> </Container> </Island> diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index 0c4b88780..4b3443d21 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -74,6 +74,8 @@ export const constants = { URL_GITHUB_WIKI: 'https://github.com/0xProject/wiki', URL_METAMASK_CHROME_STORE: 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn', URL_METAMASK_FIREFOX_STORE: 'https://addons.mozilla.org/en-US/firefox/addon/ether-metamask/', + URL_TOSHI_IOS_APP_STORE: 'https://itunes.apple.com/us/app/toshi-ethereum-wallet/id1278383455?mt=8', + URL_TOSHI_ANDROID_APP_STORE: 'https://play.google.com/store/apps/details?id=org.toshi&hl=en_US', URL_METAMASK_HOMEPAGE: 'https://metamask.io/', URL_METAMASK_OPERA_STORE: 'https://addons.opera.com/en/extensions/details/metamask/', URL_MIST_DOWNLOAD: 'https://github.com/ethereum/mist/releases', |