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') 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