From b45167422b4b9167cb075cfbad9cff3260e7c80c Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 14 Nov 2018 16:00:03 -0800 Subject: feat: use stable version of bowser --- packages/instant/package.json | 2 +- yarn.lock | 12 ++++-------- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/instant/package.json b/packages/instant/package.json index 23e1d57fe..6caa3902b 100644 --- a/packages/instant/package.json +++ b/packages/instant/package.json @@ -54,7 +54,7 @@ "@0x/typescript-typings": "^3.0.4", "@0x/utils": "^2.0.5", "@0x/web3-wrapper": "^3.1.4", - "bowser": "^2.0.0-beta.3", + "bowser": "^1.9.4", "copy-to-clipboard": "^3.0.8", "ethereum-types": "^1.1.2", "lodash": "^4.17.10", diff --git a/yarn.lock b/yarn.lock index 3ea8ad3f4..fc2297a57 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3201,9 +3201,9 @@ 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" +bowser@^1.9.4: + version "1.9.4" + resolved "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz#890c58a2813a9d3243704334fa81b96a5c150c9a" boxen@^1.2.1: version "1.3.0" @@ -8001,11 +8001,7 @@ ip-regex@^2.1.0: version "2.1.0" resolved "https://registry.npmjs.org/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9" -ip@^1.1.0: - version "1.1.5" - resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a" - -ip@^1.1.5: +ip@^1.1.0, ip@^1.1.5: version "1.1.5" resolved "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a" -- cgit From d895b0296f2143452bfa3aa0c94fd0de34209435 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 14 Nov 2018 16:15:29 -0800 Subject: feat: use blue for wallet prompt on mobile --- .../src/components/install_wallet_panel_content.tsx | 7 ++++++- packages/instant/src/components/payment_method.tsx | 6 +++++- packages/instant/src/components/wallet_prompt.tsx | 21 +++++++++++++++++---- packages/instant/src/style/theme.ts | 6 ++++-- 4 files changed, 32 insertions(+), 8 deletions(-) diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx index 5cba8d996..3cc5ccc6b 100644 --- a/packages/instant/src/components/install_wallet_panel_content.tsx +++ b/packages/instant/src/components/install_wallet_panel_content.tsx @@ -104,7 +104,12 @@ export class InstallWalletPanelContent extends React.Component + ), diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index f9d02ec5b..662dd9d22 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -78,6 +78,9 @@ export class PaymentMethod extends React.Component { const { account, network } = this.props; const isMobile = envUtil.isMobileOperatingSystem(); const logo = isMobile ? : ; + const primaryColor = isMobile ? ColorOption.darkBlue : ColorOption.darkOrange; + const secondaryColor = isMobile ? ColorOption.lightBlue : ColorOption.lightOrange; + const colors = { primaryColor, secondaryColor }; switch (account.state) { case AccountState.Loading: // Just take up the same amount of space as the other states. @@ -87,13 +90,14 @@ export class PaymentMethod extends React.Component { } + {...colors} > Please Unlock {this.props.walletName} ); case AccountState.None: return ( - + {isMobile ? 'Install Coinbase Wallet' : 'Install MetaMask'} ); diff --git a/packages/instant/src/components/wallet_prompt.tsx b/packages/instant/src/components/wallet_prompt.tsx index bcf66ee81..a0b3ae457 100644 --- a/packages/instant/src/components/wallet_prompt.tsx +++ b/packages/instant/src/components/wallet_prompt.tsx @@ -9,13 +9,21 @@ import { Text } from './ui/text'; export interface WalletPromptProps { image: React.ReactNode; onClick?: () => void; + primaryColor: ColorOption; + secondaryColor: ColorOption; } -export const WalletPrompt: React.StatelessComponent = ({ onClick, image, children }) => ( +export const WalletPrompt: React.StatelessComponent = ({ + onClick, + image, + children, + secondaryColor, + primaryColor, +}) => ( = ({ onCl {image} - + {children} ); + +WalletPrompt.defaultProps = { + primaryColor: ColorOption.darkOrange, + secondaryColor: ColorOption.lightOrange, +}; diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts index 489f11dc3..a0751286b 100644 --- a/packages/instant/src/style/theme.ts +++ b/packages/instant/src/style/theme.ts @@ -17,7 +17,8 @@ export enum ColorOption { darkOrange = 'darkOrange', green = 'green', red = 'red', - blue = 'blue', + darkBlue = 'darkBlue', + lightBlue = 'lightBlue', } export const theme: Theme = { @@ -33,7 +34,8 @@ export const theme: Theme = { darkOrange: '#F2994C', green: '#3CB34F', red: '#D00000', - blue: '#135df6', + darkBlue: '#135df6', + lightBlue: '#F2F7FF', }; export const transparentWhite = 'rgba(255,255,255,0.3)'; -- cgit From b2a26ef21a3fef2cbb4373a2896f552033af046c Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 14 Nov 2018 16:18:16 -0800 Subject: chore: remove wallet panel content for mobile --- .../components/install_wallet_panel_content.tsx | 52 +--------------------- 1 file changed, 1 insertion(+), 51 deletions(-) diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx index 3cc5ccc6b..88c26f59c 100644 --- a/packages/instant/src/components/install_wallet_panel_content.tsx +++ b/packages/instant/src/components/install_wallet_panel_content.tsx @@ -1,19 +1,15 @@ import * as React from 'react'; 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 { Browser } from '../types'; import { envUtil } from '../util/env'; -import { CoinbaseWalletLogo } from './coinbase_wallet_logo'; import { MetaMaskLogo } from './meta_mask_logo'; import { StandardPanelContent, StandardPanelContentProps } from './standard_panel_content'; import { Button } from './ui/button'; @@ -26,14 +22,6 @@ export class InstallWalletPanelContent extends React.Component; } private readonly _getStandardPanelContentProps = (): StandardPanelContentProps => { - const isMobileOS = envUtil.isMobileOperatingSystem(); - if (isMobileOS) { - return this._getMobilePanelContentProps(); - } else { - return this._getDesktopPanelContentProps(); - } - }; - private readonly _getDesktopPanelContentProps = (): StandardPanelContentProps => { const browser = envUtil.getBrowser(); let description = 'Please install the MetaMask wallet browser extension.'; let actionText = 'Learn More'; @@ -77,42 +65,4 @@ export class InstallWalletPanelContent extends React.Component { - 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 From 39bb855a9c5e0c95601bf26effb0317a627d2e12 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 14 Nov 2018 16:27:27 -0800 Subject: feat: make onUnlockWalletClick different based on ON --- .../src/components/coinbase_wallet_logo.tsx | 33 +++------------------- packages/instant/src/components/payment_method.tsx | 33 +++++++++++++++++++--- .../containers/connected_account_payment_method.ts | 27 ++++++++++++++++-- 3 files changed, 58 insertions(+), 35 deletions(-) diff --git a/packages/instant/src/components/coinbase_wallet_logo.tsx b/packages/instant/src/components/coinbase_wallet_logo.tsx index f3c9ccdc2..845b96d73 100644 --- a/packages/instant/src/components/coinbase_wallet_logo.tsx +++ b/packages/instant/src/components/coinbase_wallet_logo.tsx @@ -5,22 +5,13 @@ export interface CoinbaseWalletLogoProps { } export const CoinbaseWalletLogo: React.StatelessComponent = ({ width }) => ( - - + + - ); @@ -30,19 +21,3 @@ 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 662dd9d22..21bb2902b 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -1,11 +1,16 @@ import * as _ from 'lodash'; import * as React from 'react'; +import { + COINBASE_WALLET_ANDROID_APP_STORE_URL, + COINBASE_WALLET_IOS_APP_STORE_URL, + COINBASE_WALLET_SITE_URL, +} from '../constants'; import { ColorOption } from '../style/theme'; -import { Account, AccountState, Network } from '../types'; +import { Account, AccountState, Network, OperatingSystem } from '../types'; import { envUtil } from '../util/env'; -import { CoinbaseWalletAppLogo } from './coinbase_wallet_logo'; +import { CoinbaseWalletLogo } from './coinbase_wallet_logo'; import { MetaMaskLogo } from './meta_mask_logo'; import { PaymentMethodDropdown } from './payment_method_dropdown'; import { Circle } from './ui/circle'; @@ -77,7 +82,7 @@ export class PaymentMethod extends React.Component { private readonly _renderMainContent = (): React.ReactNode => { const { account, network } = this.props; const isMobile = envUtil.isMobileOperatingSystem(); - const logo = isMobile ? : ; + const logo = isMobile ? : ; const primaryColor = isMobile ? ColorOption.darkBlue : ColorOption.darkOrange; const secondaryColor = isMobile ? ColorOption.lightBlue : ColorOption.lightOrange; const colors = { primaryColor, secondaryColor }; @@ -97,7 +102,7 @@ export class PaymentMethod extends React.Component { ); case AccountState.None: return ( - + {isMobile ? 'Install Coinbase Wallet' : 'Install MetaMask'} ); @@ -111,4 +116,24 @@ export class PaymentMethod extends React.Component { ); } }; + private readonly _handleInstallWalletClick = (): void => { + const isMobile = envUtil.isMobileOperatingSystem(); + if (!isMobile) { + this.props.onInstallWalletClick(); + return; + } + const operatingSystem = envUtil.getOperatingSystem(); + let url = COINBASE_WALLET_SITE_URL; + switch (operatingSystem) { + case OperatingSystem.Android: + url = COINBASE_WALLET_ANDROID_APP_STORE_URL; + break; + case OperatingSystem.iOS: + url = COINBASE_WALLET_IOS_APP_STORE_URL; + break; + default: + break; + } + window.open(url, '_blank'); + }; } diff --git a/packages/instant/src/containers/connected_account_payment_method.ts b/packages/instant/src/containers/connected_account_payment_method.ts index 69c2ddf19..beaaccf2f 100644 --- a/packages/instant/src/containers/connected_account_payment_method.ts +++ b/packages/instant/src/containers/connected_account_payment_method.ts @@ -3,10 +3,16 @@ import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { PaymentMethod, PaymentMethodProps } from '../components/payment_method'; +import { + COINBASE_WALLET_ANDROID_APP_STORE_URL, + COINBASE_WALLET_IOS_APP_STORE_URL, + COINBASE_WALLET_SITE_URL, +} from '../constants'; import { Action, actions } from '../redux/actions'; import { asyncData } from '../redux/async_data'; import { State } from '../redux/reducer'; -import { Network, Omit, ProviderState, StandardSlidingPanelContent } from '../types'; +import { Network, Omit, OperatingSystem, ProviderState, StandardSlidingPanelContent } from '../types'; +import { envUtil } from '../util/env'; export interface ConnectedAccountPaymentMethodProps {} @@ -49,7 +55,24 @@ const mergeProps = ( onInstallWalletClick: connectedDispatch.onInstallWalletClick, walletName: connectedState.providerState.name, onUnlockWalletClick: () => { - connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState); + const isMobile = envUtil.isMobileOperatingSystem(); + if (!isMobile) { + connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState); + return; + } + const operatingSystem = envUtil.getOperatingSystem(); + let url = COINBASE_WALLET_SITE_URL; + switch (operatingSystem) { + case OperatingSystem.Android: + url = COINBASE_WALLET_ANDROID_APP_STORE_URL; + break; + case OperatingSystem.iOS: + url = COINBASE_WALLET_IOS_APP_STORE_URL; + break; + default: + break; + } + window.open(url, '_blank'); }, }); -- cgit