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 ++ yarn.lock | 45 +++------------- 10 files changed, 110 insertions(+), 94 deletions(-) create mode 100644 packages/instant/src/components/wallet_prompt.tsx 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), diff --git a/yarn.lock b/yarn.lock index 928326e00..2a44c7c80 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1906,10 +1906,6 @@ aes-js@^0.2.3: version "0.2.4" resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-0.2.4.tgz#94b881ab717286d015fa219e08fb66709dda5a3d" -aes-js@^3.1.1: - version "3.1.2" - resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.1.2.tgz#db9aabde85d5caabbfc0d4f2a4446960f627146a" - agent-base@4, agent-base@^4.1.0, agent-base@~4.2.0: version "4.2.1" resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9" @@ -3201,6 +3197,10 @@ bowser@^1.7.3, bowser@^1.9.3: version "1.9.3" resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.9.3.tgz#6643ae4d783f31683f6d23156976b74183862162" +bowser@^2.0.0-beta.3: + version "2.0.0-beta.3" + resolved "https://registry.npmjs.org/bowser/-/bowser-2.0.0-beta.3.tgz#1b74d4fd69199aa237bc0f1f4c5e80df711635d8" + boxen@^1.2.1: version "1.3.0" resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b" @@ -3347,7 +3347,7 @@ bs-logger@0.x: dependencies: fast-json-stable-stringify "^2.0.0" -bs58@=4.0.1, bs58@^4.0.0: +bs58@=4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a" dependencies: @@ -3370,14 +3370,6 @@ bs58check@^1.0.8: bs58 "^3.1.0" create-hash "^1.1.0" -bs58check@^2.1.2: - version "2.1.2" - resolved "https://registry.yarnpkg.com/bs58check/-/bs58check-2.1.2.tgz#53b018291228d82a5aa08e7d796fdafda54aebfc" - dependencies: - bs58 "^4.0.0" - create-hash "^1.1.0" - safe-buffer "^5.1.2" - bser@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719" @@ -5965,19 +5957,6 @@ ethereumjs-wallet@0.6.0: utf8 "^2.1.1" uuid "^2.0.1" -ethereumjs-wallet@~0.6.0: - version "0.6.2" - resolved "https://registry.yarnpkg.com/ethereumjs-wallet/-/ethereumjs-wallet-0.6.2.tgz#67244b6af3e8113b53d709124b25477b64aeccda" - dependencies: - aes-js "^3.1.1" - bs58check "^2.1.2" - ethereumjs-util "^5.2.0" - hdkey "^1.0.0" - safe-buffer "^5.1.2" - scrypt.js "^0.2.0" - utf8 "^3.0.0" - uuid "^3.3.2" - ethers@~4.0.4: version "4.0.4" resolved "https://registry.yarnpkg.com/ethers/-/ethers-4.0.4.tgz#d3f85e8b27f4b59537e06526439b0fb15b44dc65" @@ -6786,7 +6765,7 @@ ganache-core@0xProject/ganache-core#monorepo-dep: ethereumjs-tx "0xProject/ethereumjs-tx#fake-tx-include-signature-by-default" ethereumjs-util "^5.2.0" ethereumjs-vm "2.3.5" - ethereumjs-wallet "0.6.0" + ethereumjs-wallet "~0.6.0" fake-merkle-patricia-tree "~1.0.1" heap "~0.2.6" js-scrypt "^0.2.0" @@ -7511,14 +7490,6 @@ hdkey@^0.7.0, hdkey@^0.7.1: coinstring "^2.0.0" secp256k1 "^3.0.1" -hdkey@^1.0.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/hdkey/-/hdkey-1.1.0.tgz#e74e7b01d2c47f797fa65d1d839adb7a44639f29" - dependencies: - coinstring "^2.0.0" - safe-buffer "^5.1.1" - secp256k1 "^3.0.1" - he@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" @@ -15605,10 +15576,6 @@ utf8@^2.1.1: version "2.1.2" resolved "https://registry.yarnpkg.com/utf8/-/utf8-2.1.2.tgz#1fa0d9270e9be850d9b05027f63519bf46457d96" -utf8@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/utf8/-/utf8-3.0.0.tgz#f052eed1364d696e769ef058b183df88c87f69d1" - util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" -- cgit v1.2.3