diff options
Diffstat (limited to 'packages/instant/src/components/install_wallet_panel_content.tsx')
-rw-r--r-- | packages/instant/src/components/install_wallet_panel_content.tsx | 124 |
1 files changed, 102 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..6cddb81f5 100644 --- a/packages/instant/src/components/install_wallet_panel_content.tsx +++ b/packages/instant/src/components/install_wallet_panel_content.tsx @@ -1,32 +1,112 @@ 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(); + const browser = envUtil.getBrowser(); + const operatingSystem = envUtil.getOperatingSystem(); + if (isMobileOS) { + 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} height={42} />, + 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> + ), + }; + } else { + 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> + ), + }; } - /> -); + }; +} |