diff options
Diffstat (limited to 'packages/website/ts/components')
| -rw-r--r-- | packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx | 47 | ||||
| -rw-r--r-- | packages/website/ts/components/wallet/body_overlay.tsx | 35 |
2 files changed, 37 insertions, 45 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 |