aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-15 08:27:27 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-11-16 04:41:49 +0800
commitf9e012398606a85d286087f3e94bf8b95a52df55 (patch)
tree48cd81751217bc0877faa73de2174052734dacb5
parentf4cc152cfb6da5c13d2d95ccd2f1a022af9b91a0 (diff)
downloaddexon-sol-tools-f9e012398606a85d286087f3e94bf8b95a52df55.tar.gz
dexon-sol-tools-f9e012398606a85d286087f3e94bf8b95a52df55.tar.zst
dexon-sol-tools-f9e012398606a85d286087f3e94bf8b95a52df55.zip
feat: make onUnlockWalletClick different based on ON
-rw-r--r--packages/instant/src/components/coinbase_wallet_logo.tsx33
-rw-r--r--packages/instant/src/components/payment_method.tsx33
-rw-r--r--packages/instant/src/containers/connected_account_payment_method.ts27
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<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"
- />
+ <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
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"
+ d="M25.5 41C34.0604 41 41 34.0604 41 25.5C41 16.9396 34.0604 10 25.5 10C16.9396 10 10 16.9396 10 25.5C10 34.0604 16.9396 41 25.5 41ZM21.5108 20.5107C20.9586 20.5107 20.5108 20.9584 20.5108 21.5107V29.6223C20.5108 30.1746 20.9586 30.6223 21.5108 30.6223H29.6224C30.1747 30.6223 30.6224 30.1746 30.6224 29.6223V21.5107C30.6224 20.9584 30.1747 20.5107 29.6224 20.5107H21.5108Z"
+ fill="white"
/>
</svg>
);
@@ -30,19 +21,3 @@ 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
- fillRule="evenodd"
- clipRule="evenodd"
- d="M25.5 41C34.0604 41 41 34.0604 41 25.5C41 16.9396 34.0604 10 25.5 10C16.9396 10 10 16.9396 10 25.5C10 34.0604 16.9396 41 25.5 41ZM21.5108 20.5107C20.9586 20.5107 20.5108 20.9584 20.5108 21.5107V29.6223C20.5108 30.1746 20.9586 30.6223 21.5108 30.6223H29.6224C30.1747 30.6223 30.6224 30.1746 30.6224 29.6223V21.5107C30.6224 20.9584 30.1747 20.5107 29.6224 20.5107H21.5108Z"
- fill="white"
- />
- </svg>
-);
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<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 };
@@ -97,7 +102,7 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
);
case AccountState.None:
return (
- <WalletPrompt onClick={this.props.onInstallWalletClick} image={logo} {...colors}>
+ <WalletPrompt onClick={this._handleInstallWalletClick} image={logo} {...colors}>
{isMobile ? 'Install Coinbase Wallet' : 'Install MetaMask'}
</WalletPrompt>
);
@@ -111,4 +116,24 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
);
}
};
+ 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');
},
});