From ab0055d5c68bea1dec6a4bbbe4a76822783d3a2c Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 3 Jul 2018 12:45:28 -0700 Subject: Add OperatingSystemType and get OS util --- packages/website/ts/types.ts | 10 ++++++++++ packages/website/ts/utils/utils.ts | 18 ++++++++++++++++++ 2 files changed, 28 insertions(+) diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 2e4cf84d0..324ba5b39 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -567,6 +567,16 @@ export enum BrowserType { Other = 'Other', } +export enum OperatingSystemType { + Android = 'Android', + iOS = 'iOS', + Mac = 'Mac', + Windows = 'Windows', + WindowsPhone = 'WindowsPhone', + Linux = 'Linux', + Other = 'Other', +} + export enum AccountState { Disconnected = 'Disconnected', Ready = 'Ready', diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index fc7901463..e0f9d8e42 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -24,6 +24,7 @@ import { Token, TokenByAddress, TokenState, + OperatingSystemType, } from 'ts/types'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; @@ -418,6 +419,23 @@ export const utils = { return BrowserType.Other; } }, + getOperatingSystem(): OperatingSystemType { + if (bowser.android) { + return OperatingSystemType.Android; + } else if (bowser.ios) { + return OperatingSystemType.iOS; + } else if (bowser.mac) { + return OperatingSystemType.Mac; + } else if (bowser.windows) { + return OperatingSystemType.Windows; + } else if (bowser.windowsphone) { + return OperatingSystemType.WindowsPhone; + } else if (bowser.linux) { + return OperatingSystemType.Linux; + } else { + return OperatingSystemType.Other; + } + }, isTokenTracked(token: Token): boolean { return !_.isUndefined(token.trackedTimestamp); }, -- cgit v1.2.3 From a52eb813809448db4957cec5c78317419c98ddba Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 3 Jul 2018 12:48:19 -0700 Subject: Rename isMobile utility fn to be more specific and add isMobileOperatingSystem --- .../website/ts/components/onboarding/portal_onboarding_flow.tsx | 2 +- packages/website/ts/components/portal/portal.tsx | 6 +++--- packages/website/ts/utils/utils.ts | 5 ++++- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 6bfa5c75f..d0955c2dc 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -267,7 +267,7 @@ class PlainPortalOnboardingFlow extends React.Component { ); } private _renderWallet(): React.ReactNode { - const isMobile = utils.isMobile(this.props.screenWidth); + const isMobile = utils.isMobileWidth(this.props.screenWidth); // We need room to scroll down for mobile onboarding const marginBottom = isMobile ? '200px' : '15px'; return ( @@ -364,7 +364,7 @@ export class Portal extends React.Component { ); } private _renderStartOnboarding(): React.ReactNode { - const isMobile = utils.isMobile(this.props.screenWidth); + const isMobile = utils.isMobileWidth(this.props.screenWidth); const shouldStartOnboarding = !isMobile || this.props.location.pathname === `${WebsitePaths.Portal}/account`; const startOnboarding = ( @@ -530,7 +530,7 @@ export class Portal extends React.Component { return
} body={this._renderRelayerIndex()} />; } private _renderRelayerIndex(): React.ReactNode { - const isMobile = utils.isMobile(this.props.screenWidth); + const isMobile = utils.isMobileWidth(this.props.screenWidth); return ( {isMobile && {this._renderStartOnboarding()}} diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index e0f9d8e42..ffbf97f12 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -405,9 +405,12 @@ export const utils = { openUrl(url: string): void { window.open(url, '_blank'); }, - isMobile(screenWidth: ScreenWidths): boolean { + isMobileWidth(screenWidth: ScreenWidths): boolean { return screenWidth === ScreenWidths.Sm; }, + isMobileOperatingSystem(): boolean { + return bowser.mobile; + }, getBrowserType(): BrowserType { if (bowser.chrome) { return BrowserType.Chrome; -- cgit v1.2.3 From 3b78188fec8654ff9338afb22708279bf2335c70 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 3 Jul 2018 13:51:58 -0700 Subject: Show different download links and icons when on mobile --- packages/website/ts/components/ui/image.tsx | 4 ++ .../website/ts/components/wallet/body_overlay.tsx | 61 +++++++++++++++------- packages/website/ts/utils/constants.ts | 2 + 3 files changed, 47 insertions(+), 20 deletions(-) diff --git a/packages/website/ts/components/ui/image.tsx b/packages/website/ts/components/ui/image.tsx index 369dc8b7e..c4ff93531 100644 --- a/packages/website/ts/components/ui/image.tsx +++ b/packages/website/ts/components/ui/image.tsx @@ -6,6 +6,7 @@ export interface ImageProps { src?: string; fallbackSrc?: string; height?: string | number; + borderRadius?: string; width?: string | number; } interface ImageState { @@ -26,6 +27,9 @@ export class Image extends React.Component { className={this.props.className} onError={this._onError.bind(this)} src={src} + style={{ + borderRadius: this.props.borderRadius, + }} height={this.props.height} width={this.props.width} /> diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx index 5ced704f9..6995b5065 100644 --- a/packages/website/ts/components/wallet/body_overlay.tsx +++ b/packages/website/ts/components/wallet/body_overlay.tsx @@ -9,11 +9,12 @@ 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 } from 'ts/types'; +import { AccountState, BrowserType, ProviderType, OperatingSystemType } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; const METAMASK_IMG_SRC = '/images/metamask_icon.png'; +const TOSHI_IMG_SRC = '/images/toshi_logo.jpg'; export interface BodyOverlayProps { dispatcher: Dispatcher; @@ -92,8 +93,10 @@ interface DisconnectedOverlayProps { const DisconnectedOverlay = (props: DisconnectedOverlayProps) => { return (
- - + + {!utils.isMobileOperatingSystem() && ( + + )}
); }; @@ -112,32 +115,50 @@ const UseDifferentWallet = (props: UseDifferentWallet) => { ); }; -const GetMetaMask = () => { +const GetWalletCallToAction = () => { const browserType = utils.getBrowserType(); - let extensionLink; - switch (browserType) { - case BrowserType.Chrome: - extensionLink = constants.URL_METAMASK_CHROME_STORE; - break; - case BrowserType.Firefox: - extensionLink = constants.URL_METAMASK_FIREFOX_STORE; - break; - case BrowserType.Opera: - extensionLink = constants.URL_METAMASK_OPERA_STORE; - break; - default: - extensionLink = constants.URL_METAMASK_HOMEPAGE; + const isOnMobile = utils.isMobileOperatingSystem(); + const operatingSystem = utils.getOperatingSystem(); + 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 ( - + - + - Get MetaMask Wallet + {text} diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index 0c4b88780..4b3443d21 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -74,6 +74,8 @@ export const constants = { URL_GITHUB_WIKI: 'https://github.com/0xProject/wiki', URL_METAMASK_CHROME_STORE: 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn', URL_METAMASK_FIREFOX_STORE: 'https://addons.mozilla.org/en-US/firefox/addon/ether-metamask/', + URL_TOSHI_IOS_APP_STORE: 'https://itunes.apple.com/us/app/toshi-ethereum-wallet/id1278383455?mt=8', + URL_TOSHI_ANDROID_APP_STORE: 'https://play.google.com/store/apps/details?id=org.toshi&hl=en_US', URL_METAMASK_HOMEPAGE: 'https://metamask.io/', URL_METAMASK_OPERA_STORE: 'https://addons.opera.com/en/extensions/details/metamask/', URL_MIST_DOWNLOAD: 'https://github.com/ethereum/mist/releases', -- cgit v1.2.3 From 931e7e7d71be4ec18081a2501dee0254b511f388 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 3 Jul 2018 14:28:49 -0700 Subject: Prompt user to download Toshi or MetaMask in install wallet onboarding step --- .../onboarding/install_wallet_onboarding_step.tsx | 47 ++++++++++++++++------ .../website/ts/components/wallet/body_overlay.tsx | 35 +--------------- packages/website/ts/utils/utils.ts | 37 ++++++++++++++++- 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 = () => ( -
- - Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps. - - - - - Please refresh the page once you've done this to continue! -
-); +export const InstallWalletOnboardingStep: React.StatelessComponent = () => { + 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 ( + + ); +}; 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 ( Date: Tue, 3 Jul 2018 14:32:11 -0700 Subject: Add toshi logo asset --- packages/website/public/images/toshi_logo.jpg | Bin 0 -> 4611 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 packages/website/public/images/toshi_logo.jpg diff --git a/packages/website/public/images/toshi_logo.jpg b/packages/website/public/images/toshi_logo.jpg new file mode 100644 index 000000000..3cf451d24 Binary files /dev/null and b/packages/website/public/images/toshi_logo.jpg differ -- cgit v1.2.3 From 6e87e3e1ac1eb6200b9f6797890b7e42efefae5d Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 3 Jul 2018 18:05:00 -0700 Subject: Fix issue where onboarding doesn't scroll to wallet when starting from relayers page --- .../website/ts/components/onboarding/portal_onboarding_flow.tsx | 9 ++++----- packages/website/ts/components/portal/portal.tsx | 2 +- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index e01da68a7..1c2c92fd1 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -57,13 +57,12 @@ class PlainPortalOnboardingFlow extends React.Component { private _renderWallet(): React.ReactNode { const isMobile = utils.isMobileWidth(this.props.screenWidth); // We need room to scroll down for mobile onboarding - const marginBottom = isMobile ? '200px' : '15px'; + const marginBottom = isMobile ? '250px' : '15px'; return (
-- cgit v1.2.3 From 0f11ae1875aa7e21683953b45e45afb38c00c07a Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 3 Jul 2018 18:22:19 -0700 Subject: No longer elevate relayer grid tile on long press --- packages/website/ts/components/relayer_index/relayer_grid_tile.tsx | 5 +++-- packages/website/ts/style/media.ts | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx index 02bc1b014..431cf145b 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -108,12 +108,13 @@ export const RelayerGridTile: React.StatelessComponent = ( const GridTile = styled(PlainGridTile)` cursor: pointer; - transition: transform 0.2s ease; &:hover { + transition: transform 0.2s ease; transform: translate(0px, -3px); } ${media.small` - transform: none; + transform: none !important; + transition: none !important; `}; `; diff --git a/packages/website/ts/style/media.ts b/packages/website/ts/style/media.ts index 3c992eb9f..870d9a277 100644 --- a/packages/website/ts/style/media.ts +++ b/packages/website/ts/style/media.ts @@ -2,7 +2,7 @@ import { css } from 'ts/style/theme'; import { ScreenWidths } from 'ts/types'; const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) => css` - @media (max-width: ${screenWidth}) { + @media (max-width: ${screenWidth}em) { ${css.apply(css, args)}; } `; -- cgit v1.2.3 From 302b9deef3a7625caa6d49ccc497936d5e4f07e2 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 5 Jul 2018 10:54:13 -0700 Subject: Rename getBestDownloadLink to getBestWalletDownloadLinkAndIsMobile --- .../website/ts/components/onboarding/install_wallet_onboarding_step.tsx | 2 +- packages/website/ts/components/wallet/body_overlay.tsx | 2 +- packages/website/ts/utils/utils.ts | 2 +- 3 files changed, 3 insertions(+), 3 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 d72290025..d618c8318 100644 --- a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx @@ -8,7 +8,7 @@ import { utils } from 'ts/utils/utils'; export interface InstallWalletOnboardingStepProps {} export const InstallWalletOnboardingStep: React.StatelessComponent = () => { - const [downloadLink, isOnMobile] = utils.getBestWalletDownloadLink(); + const [downloadLink, isOnMobile] = utils.getBestWalletDownloadLinkAndIsMobile(); 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!`; diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx index d8fdade7d..26359d0d2 100644 --- a/packages/website/ts/components/wallet/body_overlay.tsx +++ b/packages/website/ts/components/wallet/body_overlay.tsx @@ -115,7 +115,7 @@ const UseDifferentWallet = (props: UseDifferentWallet) => { }; const GetWalletCallToAction = () => { - const [downloadLink, isOnMobile] = utils.getBestWalletDownloadLink(); + const [downloadLink, isOnMobile] = utils.getBestWalletDownloadLinkAndIsMobile(); const imageUrl = isOnMobile ? TOSHI_IMG_SRC : METAMASK_IMG_SRC; const text = isOnMobile ? 'Get Toshi Wallet' : 'Get MetaMask Wallet'; return ( diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index d5e2c82b7..623819fc9 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -440,7 +440,7 @@ export const utils = { return !_.isUndefined(token.trackedTimestamp); }, // Returns a [downloadLink, isOnMobile] tuple. - getBestWalletDownloadLink(): [string, boolean] { + getBestWalletDownloadLinkAndIsMobile(): [string, boolean] { const browserType = utils.getBrowserType(); const isOnMobile = utils.isMobileOperatingSystem(); const operatingSystem = utils.getOperatingSystem(); -- cgit v1.2.3