From c8b2a975f47bdacd1cc255c92ffbe3906b36e7be Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 13 Nov 2018 14:30:27 -0800 Subject: feat: change install wallet panel content based on browser and os --- .../src/components/coinbase_wallet_logo.tsx | 34 ++++++ .../components/install_wallet_panel_content.tsx | 124 +++++++++++++++++---- packages/instant/src/components/meta_mask_logo.tsx | 2 + .../src/components/standard_panel_content.tsx | 14 ++- packages/instant/src/constants.ts | 5 + packages/instant/src/style/theme.ts | 2 + packages/instant/src/types.ts | 19 ++++ packages/instant/src/util/env.ts | 42 +++++++ 8 files changed, 214 insertions(+), 28 deletions(-) create mode 100644 packages/instant/src/components/coinbase_wallet_logo.tsx create mode 100644 packages/instant/src/util/env.ts (limited to 'packages/instant') diff --git a/packages/instant/src/components/coinbase_wallet_logo.tsx b/packages/instant/src/components/coinbase_wallet_logo.tsx new file mode 100644 index 000000000..1fe8df807 --- /dev/null +++ b/packages/instant/src/components/coinbase_wallet_logo.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; + +export interface CoinbaseWalletLogoProps { + width?: number; + height?: number; +} + +export const CoinbaseWalletLogo: React.StatelessComponent = ({ width, height }) => ( + + + + + +); + +CoinbaseWalletLogo.displayName = 'CoinbaseWalletLogo'; + +CoinbaseWalletLogo.defaultProps = { + width: 164, + height: 28, +}; 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 = () => ( - } - 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={ - +export class InstallWalletPanelContent extends React.Component { + public render(): React.ReactNode { + const panelProps = this._getStandardPanelContentProps(); + return ; + } + 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: , + description, + moreInfoSettings: { + href: COINBASE_WALLET_SITE_URL, + text: 'What is Coinbase Wallet?', + }, + action: ( + + ), + }; + } 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: , + title: 'Install MetaMask', + description, + moreInfoSettings: { + href: META_MASK_SITE_URL, + text: 'What is MetaMask?', + }, + action: ( + + ), + }; } - /> -); + }; +} diff --git a/packages/instant/src/components/meta_mask_logo.tsx b/packages/instant/src/components/meta_mask_logo.tsx index d1ad10c23..bfbc67270 100644 --- a/packages/instant/src/components/meta_mask_logo.tsx +++ b/packages/instant/src/components/meta_mask_logo.tsx @@ -72,6 +72,8 @@ export const MetaMaskLogo: React.StatelessComponent = ({ widt ); +MetaMaskLogo.displayName = 'MetaMaskLogo'; + MetaMaskLogo.defaultProps = { width: 85, height: 80, diff --git a/packages/instant/src/components/standard_panel_content.tsx b/packages/instant/src/components/standard_panel_content.tsx index 89e4da70c..582b3318e 100644 --- a/packages/instant/src/components/standard_panel_content.tsx +++ b/packages/instant/src/components/standard_panel_content.tsx @@ -13,7 +13,7 @@ export interface MoreInfoSettings { export interface StandardPanelContentProps { image: React.ReactNode; - title: string; + title?: string; description: string; moreInfoSettings?: MoreInfoSettings; action: React.ReactNode; @@ -31,11 +31,13 @@ export const StandardPanelContent: React.StatelessComponent {image} - - - {title} - - + {title && ( + + + {title} + + + )} {description} diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts index 2bf7849ec..8170ae354 100644 --- a/packages/instant/src/constants.ts +++ b/packages/instant/src/constants.ts @@ -19,8 +19,13 @@ 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 COINBASE_WALLET_IOS_APP_STORE_URL = 'https://itunes.apple.com/us/app/coinbase-wallet/id1278383455?mt=8'; +export const COINBASE_WALLET_ANDROID_APP_STORE_URL = 'https://play.google.com/store/apps/details?id=org.toshi&hl=en'; +export const COINBASE_WALLET_SITE_URL = 'https://wallet.coinbase.com/'; +export const META_MASK_FIREFOX_STORE_URL = 'https://addons.mozilla.org/en-US/firefox/addon/ether-metamask/'; export const META_MASK_CHROME_STORE_URL = 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en'; +export const META_MASK_OPERA_STORE_URL = 'https://addons.opera.com/en/extensions/details/metamask/'; export const META_MASK_SITE_URL = 'https://metamask.io/'; export const ETHEREUM_NODE_URL_BY_NETWORK = { [Network.Mainnet]: 'https://mainnet.infura.io/', diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts index 1e9f55e00..489f11dc3 100644 --- a/packages/instant/src/style/theme.ts +++ b/packages/instant/src/style/theme.ts @@ -17,6 +17,7 @@ export enum ColorOption { darkOrange = 'darkOrange', green = 'green', red = 'red', + blue = 'blue', } export const theme: Theme = { @@ -32,6 +33,7 @@ export const theme: Theme = { darkOrange: '#F2994C', green: '#3CB34F', red: '#D00000', + blue: '#135df6', }; export const transparentWhite = 'rgba(255,255,255,0.3)'; diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts index b6f449f38..e2ba9238a 100644 --- a/packages/instant/src/types.ts +++ b/packages/instant/src/types.ts @@ -137,3 +137,22 @@ export interface StandardSlidingPanelSettings { animationState: SlideAnimationState; content: StandardSlidingPanelContent; } + +export enum Browser { + Chrome = 'Chrome', + Firefox = 'Firefox', + Opera = 'Opera', + Safari = 'Safari', + Edge = 'Edge', + Other = 'Other', +} + +export enum OperatingSystem { + Android = 'Android', + iOS = 'iOS', + Mac = 'Mac', + Windows = 'Windows', + WindowsPhone = 'WindowsPhone', + Linux = 'Linux', + Other = 'Other', +} diff --git a/packages/instant/src/util/env.ts b/packages/instant/src/util/env.ts new file mode 100644 index 000000000..038ec6c88 --- /dev/null +++ b/packages/instant/src/util/env.ts @@ -0,0 +1,42 @@ +import * as bowser from 'bowser'; + +import { Browser, OperatingSystem } from '../types'; + +export const envUtil = { + getBrowser(): Browser { + if (bowser.chrome) { + return Browser.Chrome; + } else if (bowser.firefox) { + return Browser.Firefox; + } else if (bowser.opera) { + return Browser.Opera; + } else if (bowser.msedge) { + return Browser.Edge; + } else if (bowser.safari) { + return Browser.Safari; + } else { + return Browser.Other; + } + }, + isMobileOperatingSystem(): boolean { + return true; + }, + getOperatingSystem(): OperatingSystem { + return OperatingSystem.iOS; + // if (bowser.android) { + // return OperatingSystem.Android; + // } else if (bowser.ios) { + // return OperatingSystem.iOS; + // } else if (bowser.mac) { + // return OperatingSystem.Mac; + // } else if (bowser.windows) { + // return OperatingSystem.Windows; + // } else if (bowser.windowsphone) { + // return OperatingSystem.WindowsPhone; + // } else if (bowser.linux) { + // return OperatingSystem.Linux; + // } else { + // return OperatingSystem.Other; + // } + }, +}; -- cgit v1.2.3