From 29747a04874579d194f7f039b77bfcbcf33ed0c6 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 +++++++++++++++++---- 3 files changed, 28 insertions(+), 6 deletions(-) (limited to 'packages/instant/src/components') 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, +}; -- cgit v1.2.3 From f4cc152cfb6da5c13d2d95ccd2f1a022af9b91a0 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(-) (limited to 'packages/instant/src/components') 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 v1.2.3 From f9e012398606a85d286087f3e94bf8b95a52df55 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 +++++++++++++++++++--- 2 files changed, 33 insertions(+), 33 deletions(-) (limited to 'packages/instant/src/components') 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'); + }; } -- cgit v1.2.3 From 4da574560d50f661227ec4d91acf20917c26b17b Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 15 Nov 2018 12:40:28 -0800 Subject: fix: remove redundant handler --- packages/instant/src/components/payment_method.tsx | 22 +--------------------- 1 file changed, 1 insertion(+), 21 deletions(-) (limited to 'packages/instant/src/components') diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index 21bb2902b..66ebe1f20 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -102,7 +102,7 @@ export class PaymentMethod extends React.Component { ); case AccountState.None: return ( - + {isMobile ? 'Install Coinbase Wallet' : 'Install MetaMask'} ); @@ -116,24 +116,4 @@ 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'); - }; } -- cgit v1.2.3 From 447b0f91f9bdc200d14897be94796873c95490c7 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 15 Nov 2018 14:20:19 -0800 Subject: Have heartbeat update not trigger errors --- packages/instant/src/components/zero_ex_instant_provider.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'packages/instant/src/components') diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx index 18e71edb6..f6dadf3e4 100644 --- a/packages/instant/src/components/zero_ex_instant_provider.tsx +++ b/packages/instant/src/components/zero_ex_instant_provider.tsx @@ -113,7 +113,8 @@ export class ZeroExInstantProvider extends React.Component Date: Thu, 15 Nov 2018 16:43:53 -0800 Subject: fix: remove unused vars --- packages/instant/src/components/payment_method.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) (limited to 'packages/instant/src/components') diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index 66ebe1f20..ebcd62f35 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -1,13 +1,8 @@ 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, OperatingSystem } from '../types'; +import { Account, AccountState, Network } from '../types'; import { envUtil } from '../util/env'; import { CoinbaseWalletLogo } from './coinbase_wallet_logo'; -- cgit v1.2.3 From ae1fb97794f0bc3609deaf9872f53768c3059880 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 15 Nov 2018 18:00:59 -0800 Subject: chore(instant): fix lint error --- packages/instant/src/components/zero_ex_instant_provider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/instant/src/components') diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx index f6dadf3e4..8be53ee20 100644 --- a/packages/instant/src/components/zero_ex_instant_provider.tsx +++ b/packages/instant/src/components/zero_ex_instant_provider.tsx @@ -112,8 +112,8 @@ export class ZeroExInstantProvider extends React.Component