aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-07-04 05:28:49 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-07-04 05:28:49 +0800
commit931e7e7d71be4ec18081a2501dee0254b511f388 (patch)
tree05aea28a30ba1597e7f3437593fe57701ddd4640
parent3b78188fec8654ff9338afb22708279bf2335c70 (diff)
downloaddexon-sol-tools-931e7e7d71be4ec18081a2501dee0254b511f388.tar
dexon-sol-tools-931e7e7d71be4ec18081a2501dee0254b511f388.tar.gz
dexon-sol-tools-931e7e7d71be4ec18081a2501dee0254b511f388.tar.bz2
dexon-sol-tools-931e7e7d71be4ec18081a2501dee0254b511f388.tar.lz
dexon-sol-tools-931e7e7d71be4ec18081a2501dee0254b511f388.tar.xz
dexon-sol-tools-931e7e7d71be4ec18081a2501dee0254b511f388.tar.zst
dexon-sol-tools-931e7e7d71be4ec18081a2501dee0254b511f388.zip
Prompt user to download Toshi or MetaMask in install wallet onboarding step
-rw-r--r--packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx47
-rw-r--r--packages/website/ts/components/wallet/body_overlay.tsx35
-rw-r--r--packages/website/ts/utils/utils.ts37
3 files changed, 73 insertions, 46 deletions
diff --git a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
index a95c464af..d72290025 100644
--- a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
@@ -1,19 +1,42 @@
import { colors } from '@0xproject/react-shared';
-import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
import * as React from 'react';
import { Container } from 'ts/components/ui/container';
+import { Image } from 'ts/components/ui/image';
import { Text } from 'ts/components/ui/text';
+import { utils } from 'ts/utils/utils';
export interface InstallWalletOnboardingStepProps {}
-export const InstallWalletOnboardingStep: React.StatelessComponent<InstallWalletOnboardingStepProps> = () => (
- <div className="flex items-center flex-column">
- <Text>
- Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps.
- </Text>
- <Container marginTop="15px" marginBottom="15px">
- <ActionAccountBalanceWallet style={{ width: '50px', height: '50px' }} color={colors.orange} />
- </Container>
- <Text>Please refresh the page once you've done this to continue!</Text>
- </div>
-);
+export const InstallWalletOnboardingStep: React.StatelessComponent<InstallWalletOnboardingStepProps> = () => {
+ const [downloadLink, isOnMobile] = utils.getBestWalletDownloadLink();
+ const followupText = isOnMobile
+ ? `Please revisit this site in your mobile dApp browser to continue!`
+ : `Please refresh the page once you've done this to continue!`;
+ const downloadText = isOnMobile ? 'Get the Toshi Wallet' : 'Get the MetaMask extension';
+ return (
+ <div className="flex items-center flex-column">
+ <Text>First, you need to connect to a wallet. This will be used across all 0x relayers and dApps.</Text>
+ <Container className="flex items-center" marginTop="15px" marginBottom="15px">
+ <Image
+ height="50px"
+ width="50px"
+ borderRadius="22%"
+ src={isOnMobile ? '/images/toshi_logo.jpg' : '/images/metamask_icon.png'}
+ />
+ <Container marginLeft="10px">
+ <a href={downloadLink} target="_blank">
+ <Text
+ fontWeight={700}
+ fontSize="18px"
+ fontColor={colors.mediumBlue}
+ textDecorationLine="underline"
+ >
+ {downloadText}
+ </Text>
+ </a>
+ </Container>
+ </Container>
+ <Text>{followupText}</Text>
+ </div>
+ );
+};
diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx
index 6995b5065..d8fdade7d 100644
--- a/packages/website/ts/components/wallet/body_overlay.tsx
+++ b/packages/website/ts/components/wallet/body_overlay.tsx
@@ -9,8 +9,7 @@ import { Text } from 'ts/components/ui/text';
import { Dispatcher } from 'ts/redux/dispatcher';
import { colors } from 'ts/style/colors';
import { styled } from 'ts/style/theme';
-import { AccountState, BrowserType, ProviderType, OperatingSystemType } from 'ts/types';
-import { constants } from 'ts/utils/constants';
+import { AccountState, ProviderType } from 'ts/types';
import { utils } from 'ts/utils/utils';
const METAMASK_IMG_SRC = '/images/metamask_icon.png';
@@ -116,39 +115,9 @@ const UseDifferentWallet = (props: UseDifferentWallet) => {
};
const GetWalletCallToAction = () => {
- const browserType = utils.getBrowserType();
- const isOnMobile = utils.isMobileOperatingSystem();
- const operatingSystem = utils.getOperatingSystem();
+ const [downloadLink, isOnMobile] = utils.getBestWalletDownloadLink();
const imageUrl = isOnMobile ? TOSHI_IMG_SRC : METAMASK_IMG_SRC;
const text = isOnMobile ? 'Get Toshi Wallet' : 'Get MetaMask Wallet';
- let downloadLink;
- if (isOnMobile) {
- switch (operatingSystem) {
- case OperatingSystemType.Android:
- downloadLink = constants.URL_TOSHI_ANDROID_APP_STORE;
- break;
- case OperatingSystemType.iOS:
- downloadLink = constants.URL_TOSHI_IOS_APP_STORE;
- break;
- default:
- // Toshi is only supported on these mobile OSes - just default to iOS
- downloadLink = constants.URL_TOSHI_IOS_APP_STORE;
- }
- } else {
- switch (browserType) {
- case BrowserType.Chrome:
- downloadLink = constants.URL_METAMASK_CHROME_STORE;
- break;
- case BrowserType.Firefox:
- downloadLink = constants.URL_METAMASK_FIREFOX_STORE;
- break;
- case BrowserType.Opera:
- downloadLink = constants.URL_METAMASK_OPERA_STORE;
- break;
- default:
- downloadLink = constants.URL_METAMASK_HOMEPAGE;
- }
- }
return (
<a href={downloadLink} target="_blank" style={{ textDecoration: 'none' }}>
<Island
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index ffbf97f12..c47beb480 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -15,6 +15,7 @@ import {
BlockchainCallErrs,
BrowserType,
Environments,
+ OperatingSystemType,
Order,
Providers,
ProviderType,
@@ -24,7 +25,6 @@ import {
Token,
TokenByAddress,
TokenState,
- OperatingSystemType,
} from 'ts/types';
import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
@@ -442,4 +442,39 @@ export const utils = {
isTokenTracked(token: Token): boolean {
return !_.isUndefined(token.trackedTimestamp);
},
+ // Returns a [downloadLink, isOnMobile] tuple.
+ getBestWalletDownloadLink(): [string, boolean] {
+ const browserType = utils.getBrowserType();
+ const isOnMobile = utils.isMobileOperatingSystem();
+ const operatingSystem = utils.getOperatingSystem();
+ let downloadLink;
+ if (isOnMobile) {
+ switch (operatingSystem) {
+ case OperatingSystemType.Android:
+ downloadLink = constants.URL_TOSHI_ANDROID_APP_STORE;
+ break;
+ case OperatingSystemType.iOS:
+ downloadLink = constants.URL_TOSHI_IOS_APP_STORE;
+ break;
+ default:
+ // Toshi is only supported on these mobile OSes - just default to iOS
+ downloadLink = constants.URL_TOSHI_IOS_APP_STORE;
+ }
+ } else {
+ switch (browserType) {
+ case BrowserType.Chrome:
+ downloadLink = constants.URL_METAMASK_CHROME_STORE;
+ break;
+ case BrowserType.Firefox:
+ downloadLink = constants.URL_METAMASK_FIREFOX_STORE;
+ break;
+ case BrowserType.Opera:
+ downloadLink = constants.URL_METAMASK_OPERA_STORE;
+ break;
+ default:
+ downloadLink = constants.URL_METAMASK_HOMEPAGE;
+ }
+ }
+ return [downloadLink, isOnMobile];
+ },
};