diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-07-04 05:28:49 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-07-04 05:28:49 +0800 |
commit | 931e7e7d71be4ec18081a2501dee0254b511f388 (patch) | |
tree | 05aea28a30ba1597e7f3437593fe57701ddd4640 /packages/website | |
parent | 3b78188fec8654ff9338afb22708279bf2335c70 (diff) | |
download | dexon-0x-contracts-931e7e7d71be4ec18081a2501dee0254b511f388.tar dexon-0x-contracts-931e7e7d71be4ec18081a2501dee0254b511f388.tar.gz dexon-0x-contracts-931e7e7d71be4ec18081a2501dee0254b511f388.tar.bz2 dexon-0x-contracts-931e7e7d71be4ec18081a2501dee0254b511f388.tar.lz dexon-0x-contracts-931e7e7d71be4ec18081a2501dee0254b511f388.tar.xz dexon-0x-contracts-931e7e7d71be4ec18081a2501dee0254b511f388.tar.zst dexon-0x-contracts-931e7e7d71be4ec18081a2501dee0254b511f388.zip |
Prompt user to download Toshi or MetaMask in install wallet onboarding step
Diffstat (limited to 'packages/website')
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]; + }, }; |