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 From 35bfd493e87b5d6c76f5bb2176b0992891a4a555 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 13 Nov 2018 17:07:38 -0800 Subject: feat: display the correct provider type and change unlock / install prompt content --- packages/instant/package.json | 1 + .../src/components/coinbase_wallet_logo.tsx | 6 +-- .../components/install_wallet_panel_content.tsx | 2 +- packages/instant/src/components/payment_method.tsx | 43 ++++----------- packages/instant/src/components/wallet_prompt.tsx | 32 ++++++++++++ .../containers/connected_account_payment_method.ts | 1 + packages/instant/src/types.ts | 9 ++++ packages/instant/src/util/env.ts | 61 +++++++++++++++------- .../instant/src/util/provider_state_factory.ts | 4 ++ 9 files changed, 104 insertions(+), 55 deletions(-) create mode 100644 packages/instant/src/components/wallet_prompt.tsx (limited to 'packages/instant') diff --git a/packages/instant/package.json b/packages/instant/package.json index f71fe45ef..aa9157bcc 100644 --- a/packages/instant/package.json +++ b/packages/instant/package.json @@ -54,6 +54,7 @@ "@0x/typescript-typings": "^3.0.4", "@0x/utils": "^2.0.4", "@0x/web3-wrapper": "^3.1.3", + "bowser": "^2.0.0-beta.3", "copy-to-clipboard": "^3.0.8", "ethereum-types": "^1.1.2", "lodash": "^4.17.10", diff --git a/packages/instant/src/components/coinbase_wallet_logo.tsx b/packages/instant/src/components/coinbase_wallet_logo.tsx index 1fe8df807..f5a7be81c 100644 --- a/packages/instant/src/components/coinbase_wallet_logo.tsx +++ b/packages/instant/src/components/coinbase_wallet_logo.tsx @@ -2,11 +2,10 @@ import * as React from 'react'; export interface CoinbaseWalletLogoProps { width?: number; - height?: number; } -export const CoinbaseWalletLogo: React.StatelessComponent = ({ width, height }) => ( - +export const CoinbaseWalletLogo: React.StatelessComponent = ({ width }) => ( + , + image: , description, moreInfoSettings: { href: COINBASE_WALLET_SITE_URL, diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index 49ec22164..0f9f3ebfa 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -3,7 +3,9 @@ import * as React from 'react'; import { ColorOption } from '../style/theme'; import { Account, AccountState, Network } from '../types'; +import { envUtil } from '../util/env'; +import { CoinbaseWalletLogo } from './coinbase_wallet_logo'; import { MetaMaskLogo } from './meta_mask_logo'; import { PaymentMethodDropdown } from './payment_method_dropdown'; import { Circle } from './ui/circle'; @@ -11,10 +13,12 @@ import { Container } from './ui/container'; import { Flex } from './ui/flex'; import { Icon } from './ui/icon'; import { Text } from './ui/text'; +import { WalletPrompt } from './wallet_prompt'; export interface PaymentMethodProps { account: Account; network: Network; + walletName: string; onInstallWalletClick: () => void; onUnlockWalletClick: () => void; } @@ -62,7 +66,7 @@ export class PaymentMethod extends React.Component { - MetaMask + {this.props.walletName} @@ -72,6 +76,9 @@ export class PaymentMethod extends React.Component { }; private readonly _renderMainContent = (): React.ReactNode => { const { account, network } = this.props; + const isMobile = envUtil.isMobileOperatingSystem(); + // TODO: Use Toshi logo + const logo = isMobile ? undefined : ; switch (account.state) { case AccountState.Loading: // Just take up the same amount of space as the other states. @@ -82,16 +89,13 @@ export class PaymentMethod extends React.Component { onClick={this.props.onUnlockWalletClick} image={} > - Please Unlock MetaMask + Please Unlock {this.props.walletName} ); case AccountState.None: return ( - } - > - Install MetaMask + + {isMobile ? 'Install Coinbase Wallet' : 'Install MetaMask'} ); case AccountState.Ready: @@ -105,28 +109,3 @@ export class PaymentMethod extends React.Component { } }; } - -interface WalletPromptProps { - image: React.ReactNode; - onClick?: () => void; -} - -const WalletPrompt: React.StatelessComponent = ({ onClick, image, children }) => ( - - - {image} - - {children} - - - -); diff --git a/packages/instant/src/components/wallet_prompt.tsx b/packages/instant/src/components/wallet_prompt.tsx new file mode 100644 index 000000000..cd0a7828b --- /dev/null +++ b/packages/instant/src/components/wallet_prompt.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { Container } from './ui/container'; +import { Flex } from './ui/flex'; +import { Text } from './ui/text'; + +export interface WalletPromptProps { + image: React.ReactNode; + onClick?: () => void; +} + +export const WalletPrompt: React.StatelessComponent = ({ onClick, image, children }) => ( + + + {image} + + {children} + + + +); diff --git a/packages/instant/src/containers/connected_account_payment_method.ts b/packages/instant/src/containers/connected_account_payment_method.ts index 65b3710a6..69c2ddf19 100644 --- a/packages/instant/src/containers/connected_account_payment_method.ts +++ b/packages/instant/src/containers/connected_account_payment_method.ts @@ -47,6 +47,7 @@ const mergeProps = ( network: connectedState.network, account: connectedState.providerState.account, onInstallWalletClick: connectedDispatch.onInstallWalletClick, + walletName: connectedState.providerState.name, onUnlockWalletClick: () => { connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState); }, diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts index e2ba9238a..cbb1e2caf 100644 --- a/packages/instant/src/types.ts +++ b/packages/instant/src/types.ts @@ -95,6 +95,7 @@ export interface AffiliateInfo { } export interface ProviderState { + name: string; provider: Provider; assetBuyer: AssetBuyer; web3Wrapper: Web3Wrapper; @@ -156,3 +157,11 @@ export enum OperatingSystem { Linux = 'Linux', Other = 'Other', } + +export enum ProviderType { + Parity = 'Parity', + MetaMask = 'MetaMask', + Mist = 'Mist', + CoinbaseWallet = 'Coinbase Wallet', + Cipher = 'Cipher', +} diff --git a/packages/instant/src/util/env.ts b/packages/instant/src/util/env.ts index 038ec6c88..448ad5262 100644 --- a/packages/instant/src/util/env.ts +++ b/packages/instant/src/util/env.ts @@ -1,6 +1,8 @@ import * as bowser from 'bowser'; +import { Provider } from 'ethereum-types'; +import * as _ from 'lodash'; -import { Browser, OperatingSystem } from '../types'; +import { Browser, OperatingSystem, ProviderType } from '../types'; export const envUtil = { getBrowser(): Browser { @@ -19,24 +21,47 @@ export const envUtil = { } }, isMobileOperatingSystem(): boolean { - return true; + return bowser.mobile; }, 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; - // } + 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; + } + }, + getProviderName(provider: Provider): ProviderType | string { + const constructorName = provider.constructor.name; + let parsedProviderName = constructorName; + // https://ethereum.stackexchange.com/questions/24266/elegant-way-to-detect-current-provider-int-web3-js + switch (constructorName) { + case 'EthereumProvider': + parsedProviderName = ProviderType.Mist; + break; + + default: + parsedProviderName = constructorName; + break; + } + if ((provider as any).isParity) { + parsedProviderName = ProviderType.Parity; + } else if ((provider as any).isMetaMask) { + parsedProviderName = ProviderType.MetaMask; + } else if (!_.isUndefined(_.get(window, 'SOFA'))) { + parsedProviderName = ProviderType.CoinbaseWallet; + } else if (!_.isUndefined(_.get(window, '__CIPHER__'))) { + parsedProviderName = ProviderType.Cipher; + } + return parsedProviderName; }, }; diff --git a/packages/instant/src/util/provider_state_factory.ts b/packages/instant/src/util/provider_state_factory.ts index 3281f6bfb..452a71460 100644 --- a/packages/instant/src/util/provider_state_factory.ts +++ b/packages/instant/src/util/provider_state_factory.ts @@ -4,6 +4,7 @@ import * as _ from 'lodash'; import { LOADING_ACCOUNT, NO_ACCOUNT } from '../constants'; import { Maybe, Network, OrderSource, ProviderState } from '../types'; +import { envUtil } from '../util/env'; import { assetBuyerFactory } from './asset_buyer_factory'; import { providerFactory } from './provider_factory'; @@ -29,6 +30,7 @@ export const providerStateFactory = { provider: Provider, ): ProviderState => { const providerState: ProviderState = { + name: envUtil.getProviderName(provider), provider, web3Wrapper: new Web3Wrapper(provider), assetBuyer: assetBuyerFactory.getAssetBuyer(provider, orderSource, network), @@ -40,6 +42,7 @@ export const providerStateFactory = { const injectedProviderIfExists = providerFactory.getInjectedProviderIfExists(); if (!_.isUndefined(injectedProviderIfExists)) { const providerState: ProviderState = { + name: envUtil.getProviderName(injectedProviderIfExists), provider: injectedProviderIfExists, web3Wrapper: new Web3Wrapper(injectedProviderIfExists), assetBuyer: assetBuyerFactory.getAssetBuyer(injectedProviderIfExists, orderSource, network), @@ -53,6 +56,7 @@ export const providerStateFactory = { getInitialProviderStateFallback: (orderSource: OrderSource, network: Network): ProviderState => { const provider = providerFactory.getFallbackNoSigningProvider(network); const providerState: ProviderState = { + name: envUtil.getProviderName(provider), provider, web3Wrapper: new Web3Wrapper(provider), assetBuyer: assetBuyerFactory.getAssetBuyer(provider, orderSource, network), -- cgit v1.2.3 From d19c8ae9b1469ae4f3bd5b4cb76c3ad679e9d641 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 13 Nov 2018 17:46:58 -0800 Subject: feat: add coinbase wallet app logo to wallet prompt --- packages/instant/src/components/coinbase_wallet_logo.tsx | 16 ++++++++++++++++ packages/instant/src/components/payment_method.tsx | 5 ++--- packages/instant/src/components/wallet_prompt.tsx | 10 ++++++---- 3 files changed, 24 insertions(+), 7 deletions(-) (limited to 'packages/instant') diff --git a/packages/instant/src/components/coinbase_wallet_logo.tsx b/packages/instant/src/components/coinbase_wallet_logo.tsx index f5a7be81c..f3c9ccdc2 100644 --- a/packages/instant/src/components/coinbase_wallet_logo.tsx +++ b/packages/instant/src/components/coinbase_wallet_logo.tsx @@ -30,3 +30,19 @@ CoinbaseWalletLogo.displayName = 'CoinbaseWalletLogo'; CoinbaseWalletLogo.defaultProps = { width: 164, }; + +export interface CoinbaseWalletAppLogoProps { + width?: number; +} + +export const CoinbaseWalletAppLogo: React.StatelessComponent = ({ width }) => ( + + + + +); diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index 0f9f3ebfa..02c2b12bf 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -5,7 +5,7 @@ import { ColorOption } from '../style/theme'; import { Account, AccountState, Network } from '../types'; import { envUtil } from '../util/env'; -import { CoinbaseWalletLogo } from './coinbase_wallet_logo'; +import { CoinbaseWalletAppLogo, CoinbaseWalletLogo } from './coinbase_wallet_logo'; import { MetaMaskLogo } from './meta_mask_logo'; import { PaymentMethodDropdown } from './payment_method_dropdown'; import { Circle } from './ui/circle'; @@ -77,8 +77,7 @@ export class PaymentMethod extends React.Component { private readonly _renderMainContent = (): React.ReactNode => { const { account, network } = this.props; const isMobile = envUtil.isMobileOperatingSystem(); - // TODO: Use Toshi logo - const logo = isMobile ? undefined : ; + const logo = isMobile ? : ; switch (account.state) { case AccountState.Loading: // Just take up the same amount of space as the other states. diff --git a/packages/instant/src/components/wallet_prompt.tsx b/packages/instant/src/components/wallet_prompt.tsx index cd0a7828b..bcf66ee81 100644 --- a/packages/instant/src/components/wallet_prompt.tsx +++ b/packages/instant/src/components/wallet_prompt.tsx @@ -23,10 +23,12 @@ export const WalletPrompt: React.StatelessComponent = ({ onCl boxShadowOnHover={!!onClick} > - {image} - - {children} - + {image} + + + {children} + + ); -- cgit v1.2.3 From fe1746c7ac90efada77cb204414d2fca377f8a65 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 13 Nov 2018 17:50:15 -0800 Subject: chore: remove unused import --- packages/instant/src/components/payment_method.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/instant') diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index 02c2b12bf..0897045ce 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -5,7 +5,7 @@ import { ColorOption } from '../style/theme'; import { Account, AccountState, Network } from '../types'; import { envUtil } from '../util/env'; -import { CoinbaseWalletAppLogo, CoinbaseWalletLogo } from './coinbase_wallet_logo'; +import { CoinbaseWalletAppLogo } from './coinbase_wallet_logo'; import { MetaMaskLogo } from './meta_mask_logo'; import { PaymentMethodDropdown } from './payment_method_dropdown'; import { Circle } from './ui/circle'; -- cgit v1.2.3 From 1a1caa1ca21f3e86985bb18be233c3efcade52d1 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 13 Nov 2018 18:04:44 -0800 Subject: feat: center title label with circle --- packages/instant/src/components/payment_method.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'packages/instant') diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index 0897045ce..f9d02ec5b 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -38,7 +38,7 @@ export class PaymentMethod extends React.Component { > {this._renderTitleText()} - {this._renderTitleLabel()} + {this._renderTitleLabel()} {this._renderMainContent()} @@ -62,14 +62,14 @@ export class PaymentMethod extends React.Component { if (account.state === AccountState.Ready || account.state === AccountState.Locked) { const circleColor: ColorOption = account.state === AccountState.Ready ? ColorOption.green : ColorOption.red; return ( - + {this.props.walletName} - + ); } return null; -- cgit v1.2.3 From 921ef90a14003ff72f8a11d00519806251e85778 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 13 Nov 2018 19:34:34 -0800 Subject: feat: dont show payment dropdown content on mobile --- packages/instant/src/components/payment_method_dropdown.tsx | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'packages/instant') diff --git a/packages/instant/src/components/payment_method_dropdown.tsx b/packages/instant/src/components/payment_method_dropdown.tsx index 58f1cc044..b330dbcd6 100644 --- a/packages/instant/src/components/payment_method_dropdown.tsx +++ b/packages/instant/src/components/payment_method_dropdown.tsx @@ -3,6 +3,7 @@ import copy from 'copy-to-clipboard'; import * as React from 'react'; import { Network } from '../types'; +import { envUtil } from '../util/env'; import { etherscanUtil } from '../util/etherscan'; import { format } from '../util/format'; @@ -22,6 +23,9 @@ export class PaymentMethodDropdown extends React.Component; } private readonly _getDropdownItemConfigs = (): DropdownItemConfig[] => { + if (envUtil.isMobileOperatingSystem()) { + return []; + } const viewOnEtherscan = { text: 'View on Etherscan', onClick: this._handleEtherscanClick, -- cgit v1.2.3 From 15105cde0f69bd6faaa0d35a32797f77b7b163b5 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 13 Nov 2018 19:44:31 -0800 Subject: refactor: move wallet panel content os switching logic into two methods --- .../components/install_wallet_panel_content.tsx | 157 +++++++++++---------- 1 file changed, 79 insertions(+), 78 deletions(-) (limited to 'packages/instant') diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx index 0700e9051..5cba8d996 100644 --- a/packages/instant/src/components/install_wallet_panel_content.tsx +++ b/packages/instant/src/components/install_wallet_panel_content.tsx @@ -27,86 +27,87 @@ export class InstallWalletPanelContent extends React.Component { 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: ( - - ), - }; + return this._getMobilePanelContentProps(); } 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: ( - - ), - }; + 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: , + title: 'Install MetaMask', + description, + moreInfoSettings: { + href: META_MASK_SITE_URL, + text: 'What is MetaMask?', + }, + action: ( + + ), + }; + }; + 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: , + description, + moreInfoSettings: { + href: COINBASE_WALLET_SITE_URL, + text: 'What is Coinbase Wallet?', + }, + action: ( + + ), + }; }; } -- cgit v1.2.3 From 80e7e84a06319a79a757406b58df318cce3dfa08 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 13 Nov 2018 19:49:06 -0800 Subject: fix: do not remove payment dropdown when confirmation pending --- .../src/containers/connected_buy_order_progress_or_payment_method.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'packages/instant') diff --git a/packages/instant/src/containers/connected_buy_order_progress_or_payment_method.tsx b/packages/instant/src/containers/connected_buy_order_progress_or_payment_method.tsx index 05071c8c3..cace18e7e 100644 --- a/packages/instant/src/containers/connected_buy_order_progress_or_payment_method.tsx +++ b/packages/instant/src/containers/connected_buy_order_progress_or_payment_method.tsx @@ -18,8 +18,7 @@ export const BuyOrderProgressOrPaymentMethod = (props: BuyOrderProgressOrPayment orderProcessState === OrderProcessState.Failure ) { return ; - } - if (orderProcessState === OrderProcessState.None) { + } else { return ; } return null; -- cgit v1.2.3 From fe23bf9e51dab87ee8c8995a9d53438daff19ea0 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 14 Nov 2018 14:54:41 -0800 Subject: feat: use capital values for enums --- packages/instant/src/constants.ts | 9 ++++++++- packages/instant/src/types.ts | 36 ++++++++++++++++++------------------ packages/instant/src/util/env.ts | 36 +++++++++++++++++------------------- 3 files changed, 43 insertions(+), 38 deletions(-) (limited to 'packages/instant') diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts index 8170ae354..5bd2349b3 100644 --- a/packages/instant/src/constants.ts +++ b/packages/instant/src/constants.ts @@ -1,6 +1,6 @@ import { BigNumber } from '@0x/utils'; -import { AccountNotReady, AccountState, Network } from './types'; +import { AccountNotReady, AccountState, Network, ProviderType } from './types'; export const BIG_NUMBER_ZERO = new BigNumber(0); export const ETH_DECIMALS = 18; @@ -41,3 +41,10 @@ export const LOADING_ACCOUNT: AccountNotReady = { export const LOCKED_ACCOUNT: AccountNotReady = { state: AccountState.Locked, }; +export const PROVIDER_TYPE_TO_NAME: { [key in ProviderType]: string } = { + [ProviderType.Cipher]: 'Cipher', + [ProviderType.MetaMask]: 'MetaMask', + [ProviderType.Mist]: 'Mist', + [ProviderType.CoinbaseWallet]: 'Coinbase Wallet', + [ProviderType.Parity]: 'Parity', +}; diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts index cbb1e2caf..67f21a396 100644 --- a/packages/instant/src/types.ts +++ b/packages/instant/src/types.ts @@ -140,28 +140,28 @@ export interface StandardSlidingPanelSettings { } export enum Browser { - Chrome = 'Chrome', - Firefox = 'Firefox', - Opera = 'Opera', - Safari = 'Safari', - Edge = 'Edge', - Other = 'Other', + 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', + Android = 'ANDROID', + iOS = 'IOS', + Mac = 'MAC', + Windows = 'WINDOWS', + WindowsPhone = 'WINDOWS_PHONE', + Linux = 'LINUX', + Other = 'OTHER', } export enum ProviderType { - Parity = 'Parity', - MetaMask = 'MetaMask', - Mist = 'Mist', - CoinbaseWallet = 'Coinbase Wallet', - Cipher = 'Cipher', + Parity = 'PARITY', + MetaMask = 'META_MASK', + Mist = 'MIST', + CoinbaseWallet = 'COINBASE_WALLET', + Cipher = 'CIPHER', } diff --git a/packages/instant/src/util/env.ts b/packages/instant/src/util/env.ts index 448ad5262..4a32f9cb1 100644 --- a/packages/instant/src/util/env.ts +++ b/packages/instant/src/util/env.ts @@ -2,6 +2,7 @@ import * as bowser from 'bowser'; import { Provider } from 'ethereum-types'; import * as _ from 'lodash'; +import { PROVIDER_TYPE_TO_NAME } from '../constants'; import { Browser, OperatingSystem, ProviderType } from '../types'; export const envUtil = { @@ -40,28 +41,25 @@ export const envUtil = { return OperatingSystem.Other; } }, - getProviderName(provider: Provider): ProviderType | string { - const constructorName = provider.constructor.name; - let parsedProviderName = constructorName; - // https://ethereum.stackexchange.com/questions/24266/elegant-way-to-detect-current-provider-int-web3-js - switch (constructorName) { - case 'EthereumProvider': - parsedProviderName = ProviderType.Mist; - break; - - default: - parsedProviderName = constructorName; - break; - } - if ((provider as any).isParity) { - parsedProviderName = ProviderType.Parity; + getProviderType(provider: Provider): ProviderType | undefined { + if (provider.constructor.name === 'EthereumProvider') { + return ProviderType.Mist; + } else if ((provider as any).isParity) { + return ProviderType.Parity; } else if ((provider as any).isMetaMask) { - parsedProviderName = ProviderType.MetaMask; + return ProviderType.MetaMask; } else if (!_.isUndefined(_.get(window, 'SOFA'))) { - parsedProviderName = ProviderType.CoinbaseWallet; + return ProviderType.CoinbaseWallet; } else if (!_.isUndefined(_.get(window, '__CIPHER__'))) { - parsedProviderName = ProviderType.Cipher; + return ProviderType.Cipher; + } + return; + }, + getProviderName(provider: Provider): string { + const providerTypeIfExists = envUtil.getProviderType(provider); + if (_.isUndefined(providerTypeIfExists)) { + return provider.constructor.name; } - return parsedProviderName; + return PROVIDER_TYPE_TO_NAME[providerTypeIfExists]; }, }; -- cgit v1.2.3