diff options
author | Francesco Agosti <francesco.agosti93@gmail.com> | 2018-11-15 07:20:49 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-11-15 07:20:49 +0800 |
commit | 8afcba7ba16382fd656518e8de3b55267e0f7722 (patch) | |
tree | 80456455c6e2a72956c481fb5e02898f556337a8 /packages/instant/src/components/install_wallet_panel_content.tsx | |
parent | 2eef766aff1d0d1b13af9a28f28d38bb722996d1 (diff) | |
parent | fe23bf9e51dab87ee8c8995a9d53438daff19ea0 (diff) | |
download | dexon-sol-tools-8afcba7ba16382fd656518e8de3b55267e0f7722.tar dexon-sol-tools-8afcba7ba16382fd656518e8de3b55267e0f7722.tar.gz dexon-sol-tools-8afcba7ba16382fd656518e8de3b55267e0f7722.tar.bz2 dexon-sol-tools-8afcba7ba16382fd656518e8de3b55267e0f7722.tar.lz dexon-sol-tools-8afcba7ba16382fd656518e8de3b55267e0f7722.tar.xz dexon-sol-tools-8afcba7ba16382fd656518e8de3b55267e0f7722.tar.zst dexon-sol-tools-8afcba7ba16382fd656518e8de3b55267e0f7722.zip |
Merge pull request #1257 from 0xProject/feature/instant/different-install-wallet-copy-for-mobile
[instant] Adapt content to operating system, browser and provider type
Diffstat (limited to 'packages/instant/src/components/install_wallet_panel_content.tsx')
-rw-r--r-- | packages/instant/src/components/install_wallet_panel_content.tsx | 125 |
1 files changed, 103 insertions, 22 deletions
diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx index 546874212..5cba8d996 100644 --- a/packages/instant/src/components/install_wallet_panel_content.tsx +++ b/packages/instant/src/components/install_wallet_panel_content.tsx @@ -1,32 +1,113 @@ import * as React from 'react'; -import { META_MASK_CHROME_STORE_URL, META_MASK_SITE_URL } from '../constants'; +import { + COINBASE_WALLET_ANDROID_APP_STORE_URL, + COINBASE_WALLET_IOS_APP_STORE_URL, + COINBASE_WALLET_SITE_URL, + META_MASK_CHROME_STORE_URL, + META_MASK_FIREFOX_STORE_URL, + META_MASK_OPERA_STORE_URL, + META_MASK_SITE_URL, +} from '../constants'; import { ColorOption } from '../style/theme'; +import { Browser, OperatingSystem } from '../types'; +import { envUtil } from '../util/env'; +import { CoinbaseWalletLogo } from './coinbase_wallet_logo'; import { MetaMaskLogo } from './meta_mask_logo'; -import { StandardPanelContent } from './standard_panel_content'; +import { StandardPanelContent, StandardPanelContentProps } from './standard_panel_content'; import { Button } from './ui/button'; export interface InstallWalletPanelContentProps {} -export const InstallWalletPanelContent: React.StatelessComponent<InstallWalletPanelContentProps> = () => ( - <StandardPanelContent - image={<MetaMaskLogo width={85} height={80} />} - title="Install MetaMask" - description="Please install the MetaMask wallet extension from the Chrome Store." - moreInfoSettings={{ - href: META_MASK_SITE_URL, - text: 'What is MetaMask?', - }} - action={ - <Button - href={META_MASK_CHROME_STORE_URL} - width="100%" - fontColor={ColorOption.white} - backgroundColor={ColorOption.darkOrange} - > - Get Chrome Extension - </Button> +export class InstallWalletPanelContent extends React.Component<InstallWalletPanelContentProps> { + public render(): React.ReactNode { + const panelProps = this._getStandardPanelContentProps(); + return <StandardPanelContent {...panelProps} />; + } + private readonly _getStandardPanelContentProps = (): StandardPanelContentProps => { + const isMobileOS = envUtil.isMobileOperatingSystem(); + if (isMobileOS) { + return this._getMobilePanelContentProps(); + } else { + return this._getDesktopPanelContentProps(); } - /> -); + }; + private readonly _getDesktopPanelContentProps = (): StandardPanelContentProps => { + const browser = envUtil.getBrowser(); + let description = 'Please install the MetaMask wallet browser extension.'; + let actionText = 'Learn More'; + let actionUrl = META_MASK_SITE_URL; + switch (browser) { + case Browser.Chrome: + description = 'Please install the MetaMask wallet browser extension from the Chrome Store.'; + actionText = 'Get Chrome Extension'; + actionUrl = META_MASK_CHROME_STORE_URL; + break; + case Browser.Firefox: + description = 'Please install the MetaMask wallet browser extension from the Firefox Store.'; + actionText = 'Get Firefox Extension'; + actionUrl = META_MASK_FIREFOX_STORE_URL; + break; + case Browser.Opera: + description = 'Please install the MetaMask wallet browser extension from the Opera Store.'; + actionText = 'Get Opera Add-on'; + actionUrl = META_MASK_OPERA_STORE_URL; + break; + default: + break; + } + return { + image: <MetaMaskLogo width={85} height={80} />, + title: 'Install MetaMask', + description, + moreInfoSettings: { + href: META_MASK_SITE_URL, + text: 'What is MetaMask?', + }, + action: ( + <Button + href={actionUrl} + width="100%" + fontColor={ColorOption.white} + backgroundColor={ColorOption.darkOrange} + > + {actionText} + </Button> + ), + }; + }; + private readonly _getMobilePanelContentProps = (): StandardPanelContentProps => { + const operatingSystem = envUtil.getOperatingSystem(); + let description = 'Please install the Coinbase Wallet app.'; + let actionText = 'Learn More'; + let actionUrl = COINBASE_WALLET_SITE_URL; + switch (operatingSystem) { + case OperatingSystem.Android: + description = 'Please install the Coinbase Wallet app from the Google Play Store.'; + actionText = 'Get Coinbase Wallet'; + actionUrl = COINBASE_WALLET_ANDROID_APP_STORE_URL; + break; + case OperatingSystem.iOS: + description = 'Please install the Coinbase Wallet app from the iOS App Store.'; + actionText = 'Get Coinbase Wallet'; + actionUrl = COINBASE_WALLET_IOS_APP_STORE_URL; + break; + default: + break; + } + return { + image: <CoinbaseWalletLogo width={246} />, + description, + moreInfoSettings: { + href: COINBASE_WALLET_SITE_URL, + text: 'What is Coinbase Wallet?', + }, + action: ( + <Button href={actionUrl} width="100%" fontColor={ColorOption.white} backgroundColor={ColorOption.blue}> + {actionText} + </Button> + ), + }; + }; +} |