Merge pull request #1266 from 0xProject/feature/instant/fix-mobile-specific-content

[instant] Fix mobile specific content
2018-11-15 14:35:13 -08:00
parent 34d86647bf 587739f8e1
commit 312dfb9572
8 changed files with 75 additions and 102 deletions
--- 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",
--- a/packages/instant/src/components/coinbase_wallet_logo.tsx
+++ b/packages/instant/src/components/coinbase_wallet_logo.tsx
@@ -5,37 +5,6 @@ export interface CoinbaseWalletLogoProps {
 }

 export const CoinbaseWalletLogo: React.StatelessComponent<CoinbaseWalletLogoProps> = ({ width }) => (
-    <svg width={width} viewBox="0 0 164 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M49.576172.545441h-2.9453v19.595c1.3398.4742 3.0058.8594 4.9101.8594 4.8809 0 7.7071-2.8458 7.7071-7.0846 0-4.20983-2.8555-6.64028-6.666-6.64028-1.1602 0-2.3809.32621-3.0059.65241V.545441zm-21.0176 1.18585c-.9824 0-1.8457.80039-1.8457 1.80802 0 1.03784.8633 1.8684 1.8457 1.8684.9824 0 1.8457-.83056 1.8457-1.8684 0-1.00763-.8633-1.80802-1.8457-1.80802zm-18.2324 16.30675c-.64258.251-1.32031.3832-2.05273.3832-2.56055 0-4.34766-1.6602-4.34766-4.2689 0-2.7568 1.8457-4.26886 4.22656-4.26886.70117 0 1.38086.11985 2.04102.38318.31836-.77942.74023-1.48746 1.25001-2.11145-1.09376-.58255-2.1797-.88037-3.55665-.88037-3.8711 0-6.93555 2.6377-6.93555 6.8775 0 4.2099 2.91602 6.8476 6.93555 6.8476 1.35156 0 2.58984-.2827 3.77345-.9166-.5371-.6008-.98634-1.2863-1.334-2.0453zm8.084-10.76317c3.957 0 6.8144 2.78684 6.8144 6.87757 0 4.0616-2.8574 6.8475-6.8144 6.8475-3.9278 0-6.7852-2.7859-6.7852-6.8475 0-4.09073 2.8574-6.87757 6.7852-6.87757zm-3.8125 6.87757c0-2.6677 1.6074-4.35792 3.8086-4.35792 2.2637 0 3.8398 1.69022 3.8398 4.35792 0 2.6388-1.5761 4.3279-3.8398 4.3279-2.2012 0-3.8086-1.6891-3.8086-4.3279zm12.5 6.5512h2.9453V7.571011h-2.9453v13.13263zm5.5176-12.302c1.8457-.71139 4.1074-1.1268 6.041-1.1268 3.3633 0 5.5058 1.27481 5.5058 4.9803v8.4486h-2.916v-8.1814c0-1.8973-1.1894-2.57984-2.8281-2.57984-1.041 0-2.082.14823-2.8555.38544v10.3758h-2.9472v-12.3021zm16.9609 9.8125c.5664.1771 1.3105.2661 2.0527.2661 2.709 0 4.6446-1.4819 4.6446-4.5059 0-2.5498-1.8164-4.06165-4.0489-4.06165-1.1601 0-2.0527.29712-2.6484.62332v7.67813zm15.6523-8.38946c1.459 0 2.5293.65127 2.5293 2.07426v1.0978h-1.457c-3.8105 0-6.1016 1.3039-6.1016 3.9715 0 2.965 2.5 4.0026 5.9239 4.0026 1.4863 0 3.2715-.2081 4.5215-.5343v-8.6858c0-3.29008-2.0528-4.4759-4.9395-4.4759-1.6367 0-3.125.41541-4.2851 1.06665v2.54985c1.1015-.62242 2.291-1.06666 3.8085-1.06666zm2.5313 5.12836h-1.25c-2.0527 0-3.3926.5922-3.3926 1.9263 0 1.3638 1.25 1.8972 3.0352 1.8972.4472 0 1.0722-.059 1.6074-.1482v-3.6753zm9.0449 3.6754c-1.3379 0-2.7949-.5634-4.0156-1.482v2.7868c.9824.6524 2.5293 1.0667 4.0762 1.0667 2.8574 0 4.9707-1.2449 4.9707-4.0015 0-2.3717-1.3086-3.4985-4.3164-4.1509-1.5176-.4143-2.0821-.8596-2.0821-1.719 0-.85965.6836-1.48209 1.9649-1.48209 1.3965 0 2.5293.5044 3.6894 1.33379v-2.69759c-1.1015-.68142-2.2929-1.00763-3.7793-1.00763-2.6797 0-4.7031 1.30365-4.7031 3.97242 0 2.2827 1.1621 3.3793 3.8984 4.0017 1.6973.4443 2.4707.8295 2.4707 1.8973 0 1.0376-.8632 1.482-2.1738 1.482zm9.0625-3.8236v.0591c.1778 2.3414 2.2012 3.6163 4.2559 3.6163 1.8144 0 3.125-.4152 4.4336-1.2749v2.5798c-1.1914.8295-2.9473 1.2147-4.6426 1.2147-4.1074 0-6.9043-2.6086-6.9043-6.7584 0-4.17964 2.7383-6.96648 6.3691-6.96648 3.8379 0 5.6543 2.46064 5.6543 6.04698v1.4829h-9.166zm3.4238-5.06921c1.9043 0 2.9161 1.12571 2.9747 3.17201h-6.3086c.3867-1.9862 1.6367-3.17201 3.3339-3.17201z"
-            fill="#1452F5"
-        />
-        <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M105.543.479151c0-.264628.214523-.479151.479151-.479151s.479151.214523.479151.479151V27.0663c0 .2646-.214523.4792-.479151.4792s-.479151-.2146-.479151-.4792V.479151z"
-            fill="#AAB4C0"
-        />
-        <path
-            d="M123.76075 7.60523l-2.94965 11.86278-3.08272-11.86278H116.309l3.57063 13.12198h1.81859l2.83876-11.55353 2.83872 11.55353h1.8186l3.5707-13.12198h-1.3529l-3.1049 11.86278-2.92746-11.86278h-1.61899zM138.3712 15.16032h-1.0867c-2.9496 0-4.7017.99409-4.7017 2.89389 0 2.0324 1.7521 2.8497 4.3691 2.8497.8205 0 1.8629-.1104 2.75-.3534v-6.64937c0-2.16491-1.2641-3.02646-3.2158-3.02646-1.131 0-2.1734.30928-2.994.75109v1.25919c.8871-.46391 1.7299-.77319 2.8388-.77319 1.2419 0 2.0403.64064 2.0403 1.87773v1.17082zm0 4.50659c-.4657.0883-.9536.1325-1.3528.1325-1.7742 0-3.1049-.4639-3.1049-1.7452s1.4637-1.8114 3.4597-1.8114h.998v3.4241zM143.1294 5.70541h-1.3307v15.0218h1.3307V5.70541zM146.7177 5.70541h-1.3307v15.0218h1.3307V5.70541zM156.8928 15.97771v-.90575c0-2.73928-1.619-4.19728-4.0586-4.19728-2.5948 0-4.5908 2.14282-4.5908 5.03673 0 3.1369 2.1291 5.0367 4.9235 5.0367 1.1976 0 2.4396-.2872 3.3045-.9278v-1.3254c-.9758.729-1.9295 1.0824-3.3045 1.0824-1.8851 0-3.5928-1.3917-3.5928-3.7554v-.0442h7.3187zm-7.23-1.10457c.377-1.81146 1.5968-2.82764 3.1049-2.82764 1.619 0 2.7057.81737 2.7944 2.82764h-5.8993zM157.1456 12.22223h1.4859v6.00868c0 1.9882 1.0423 2.7172 2.4395 2.7172.8428 0 1.5081-.1988 2.0848-.486v-1.1708c-.6654.3314-1.1755.5302-1.7965.5302-.9092 0-1.3972-.486-1.3972-1.7231v-5.87618h2.7279v-1.12664h-2.7279V8.75395h-1.3306v2.34164h-1.4859v1.12664z"
-            fill="#202A36"
-        />
-    </svg>
-);
-
-CoinbaseWalletLogo.displayName = 'CoinbaseWalletLogo';
-
-CoinbaseWalletLogo.defaultProps = {
-    width: 164,
-};
-
-export interface CoinbaseWalletAppLogoProps {
-    width?: number;
-}
-
-export const CoinbaseWalletAppLogo: React.StatelessComponent<CoinbaseWalletAppLogoProps> = ({ width }) => (
    <svg width={width} viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="25.5" cy="25.5" r="25.5" fill="#3263E9" />
        <path
@@ -46,3 +15,9 @@ export const CoinbaseWalletAppLogo: React.StatelessComponent<CoinbaseWalletAppLo
        />
    </svg>
 );
+
+CoinbaseWalletLogo.displayName = 'CoinbaseWalletLogo';
+
+CoinbaseWalletLogo.defaultProps = {
+    width: 164,
+};
--- 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<InstallWalletPane
        return <StandardPanelContent {...panelProps} />;
    }
    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,37 +65,4 @@ export class InstallWalletPanelContent extends React.Component<InstallWalletPane
            ),
        };
    };
-    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: <CoinbaseWalletLogo width={246} />,
-            description,
-            moreInfoSettings: {
-                href: COINBASE_WALLET_SITE_URL,
-                text: 'What is Coinbase Wallet?',
-            },
-            action: (
-                <Button href={actionUrl} width="100%" fontColor={ColorOption.white} backgroundColor={ColorOption.blue}>
-                    {actionText}
-                </Button>
-            ),
-        };
-    };
 }
--- 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,10 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
    private readonly _renderMainContent = (): React.ReactNode => {
        const { account, network } = this.props;
        const isMobile = envUtil.isMobileOperatingSystem();
-        const logo = isMobile ? <CoinbaseWalletAppLogo width={22} /> : <MetaMaskLogo width={19} height={18} />;
+        const logo = isMobile ? <CoinbaseWalletLogo width={22} /> : <MetaMaskLogo width={19} height={18} />;
+        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 +95,14 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
                    <WalletPrompt
                        onClick={this.props.onUnlockWalletClick}
                        image={<Icon width={13} icon="lock" color={ColorOption.black} />}
+                        {...colors}
                    >
                        Please Unlock {this.props.walletName}
                    </WalletPrompt>
                );
            case AccountState.None:
                return (
-                    <WalletPrompt onClick={this.props.onInstallWalletClick} image={logo}>
+                    <WalletPrompt onClick={this.props.onInstallWalletClick} image={logo} {...colors}>
                        {isMobile ? 'Install Coinbase Wallet' : 'Install MetaMask'}
                    </WalletPrompt>
                );
--- 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<WalletPromptProps> = ({ onClick, image, children }) => (
+export const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({
+    onClick,
+    image,
+    children,
+    secondaryColor,
+    primaryColor,
+}) => (
    <Container
        padding="14.5px"
-        border={`1px solid ${ColorOption.darkOrange}`}
-        backgroundColor={ColorOption.lightOrange}
+        border={`1px solid ${primaryColor}`}
+        backgroundColor={secondaryColor}
        width="100%"
        borderRadius="4px"
        onClick={onClick}
@@ -25,10 +33,15 @@ export const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({ onCl
        <Flex>
            {image}
            <Container marginLeft="10px">
-                <Text fontSize="16px" fontColor={ColorOption.darkOrange}>
+                <Text fontSize="16px" fontColor={primaryColor}>
                    {children}
                </Text>
            </Container>
        </Flex>
    </Container>
 );
+
+WalletPrompt.defaultProps = {
+    primaryColor: ColorOption.darkOrange,
+    secondaryColor: ColorOption.lightOrange,
+};
--- 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 {}

@@ -16,7 +22,7 @@ interface ConnectedState {
 }

 interface ConnectedDispatch {
-    onInstallWalletClick: () => void;
+    openInstallWalletPanel: () => void;
    unlockWalletAndDispatchToStore: (providerState: ProviderState) => void;
 }

@@ -33,7 +39,7 @@ const mapDispatchToProps = (
    dispatch: Dispatch<Action>,
    ownProps: ConnectedAccountPaymentMethodProps,
 ): ConnectedDispatch => ({
-    onInstallWalletClick: () => dispatch(actions.openStandardSlidingPanel(StandardSlidingPanelContent.InstallWallet)),
+    openInstallWalletPanel: () => dispatch(actions.openStandardSlidingPanel(StandardSlidingPanelContent.InstallWallet)),
    unlockWalletAndDispatchToStore: async (providerState: ProviderState) =>
        asyncData.fetchAccountInfoAndDispatchToStore(providerState, dispatch, true),
 });
@@ -46,10 +52,27 @@ const mergeProps = (
    ...ownProps,
    network: connectedState.network,
    account: connectedState.providerState.account,
-    onInstallWalletClick: connectedDispatch.onInstallWalletClick,
    walletName: connectedState.providerState.name,
-    onUnlockWalletClick: () => {
-        connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState);
+    onUnlockWalletClick: () => connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState),
+    onInstallWalletClick: () => {
+        const isMobile = envUtil.isMobileOperatingSystem();
+        if (!isMobile) {
+            connectedDispatch.openInstallWalletPanel();
+            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');
    },
 });

--- 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)';
--- a/yarn.lock
+++ b/yarn.lock
@@ -3197,9 +3197,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"
@@ -7968,11 +7968,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"