aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/package.json1
-rw-r--r--packages/instant/src/components/coinbase_wallet_logo.tsx6
-rw-r--r--packages/instant/src/components/install_wallet_panel_content.tsx2
-rw-r--r--packages/instant/src/components/payment_method.tsx43
-rw-r--r--packages/instant/src/components/wallet_prompt.tsx32
-rw-r--r--packages/instant/src/containers/connected_account_payment_method.ts1
-rw-r--r--packages/instant/src/types.ts9
-rw-r--r--packages/instant/src/util/env.ts61
-rw-r--r--packages/instant/src/util/provider_state_factory.ts4
9 files changed, 104 insertions, 55 deletions
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<CoinbaseWalletLogoProps> = ({ width, height }) => (
- <svg width={width} height={height} viewBox="0 0 164 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+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"
@@ -30,5 +29,4 @@ CoinbaseWalletLogo.displayName = 'CoinbaseWalletLogo';
CoinbaseWalletLogo.defaultProps = {
width: 164,
- height: 28,
};
diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx
index 6cddb81f5..0700e9051 100644
--- a/packages/instant/src/components/install_wallet_panel_content.tsx
+++ b/packages/instant/src/components/install_wallet_panel_content.tsx
@@ -48,7 +48,7 @@ export class InstallWalletPanelContent extends React.Component<InstallWalletPane
break;
}
return {
- image: <CoinbaseWalletLogo width={246} height={42} />,
+ image: <CoinbaseWalletLogo width={246} />,
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<PaymentMethodProps> {
<Circle diameter={8} color={circleColor} />
<Container marginLeft="3px">
<Text fontColor={ColorOption.darkGrey} fontSize="12px">
- MetaMask
+ {this.props.walletName}
</Text>
</Container>
</React.Fragment>
@@ -72,6 +76,9 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
};
private readonly _renderMainContent = (): React.ReactNode => {
const { account, network } = this.props;
+ const isMobile = envUtil.isMobileOperatingSystem();
+ // TODO: Use Toshi logo
+ const logo = isMobile ? undefined : <MetaMaskLogo width={19} height={18} />;
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<PaymentMethodProps> {
onClick={this.props.onUnlockWalletClick}
image={<Icon width={13} icon="lock" color={ColorOption.black} />}
>
- Please Unlock MetaMask
+ Please Unlock {this.props.walletName}
</WalletPrompt>
);
case AccountState.None:
return (
- <WalletPrompt
- onClick={this.props.onInstallWalletClick}
- image={<MetaMaskLogo width={19} height={18} />}
- >
- Install MetaMask
+ <WalletPrompt onClick={this.props.onInstallWalletClick} image={logo}>
+ {isMobile ? 'Install Coinbase Wallet' : 'Install MetaMask'}
</WalletPrompt>
);
case AccountState.Ready:
@@ -105,28 +109,3 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
}
};
}
-
-interface WalletPromptProps {
- image: React.ReactNode;
- onClick?: () => void;
-}
-
-const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({ onClick, image, children }) => (
- <Container
- padding="14.5px"
- border={`1px solid ${ColorOption.darkOrange}`}
- backgroundColor={ColorOption.lightOrange}
- width="100%"
- borderRadius="4px"
- onClick={onClick}
- cursor={onClick ? 'pointer' : undefined}
- boxShadowOnHover={!!onClick}
- >
- <Flex>
- <Container marginRight="10px">{image}</Container>
- <Text fontSize="16px" fontColor={ColorOption.darkOrange}>
- {children}
- </Text>
- </Flex>
- </Container>
-);
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<WalletPromptProps> = ({ onClick, image, children }) => (
+ <Container
+ padding="14.5px"
+ border={`1px solid ${ColorOption.darkOrange}`}
+ backgroundColor={ColorOption.lightOrange}
+ width="100%"
+ borderRadius="4px"
+ onClick={onClick}
+ cursor={onClick ? 'pointer' : undefined}
+ boxShadowOnHover={!!onClick}
+ >
+ <Flex>
+ <Container marginRight="10px">{image}</Container>
+ <Text fontSize="16px" fontColor={ColorOption.darkOrange}>
+ {children}
+ </Text>
+ </Flex>
+ </Container>
+);
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),
generated by cgit (git 2.34.1) at 2024-11-20 18:18:37 +0800