aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/components/ui/image.tsx4
-rw-r--r--packages/website/ts/components/wallet/body_overlay.tsx61
-rw-r--r--packages/website/ts/utils/constants.ts2
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<ImageProps, ImageState> {
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 (
<div className="flex flex-column items-center">
- <GetMetaMask />
- <UseDifferentWallet fontColor={colors.mediumBlue} onClick={props.onUseDifferentWalletClicked} />
+ <GetWalletCallToAction />
+ {!utils.isMobileOperatingSystem() && (
+ <UseDifferentWallet fontColor={colors.mediumBlue} onClick={props.onUseDifferentWalletClicked} />
+ )}
</div>
);
};
@@ -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 (
- <a href={extensionLink} target="_blank" style={{ textDecoration: 'none' }}>
+ <a href={downloadLink} target="_blank" style={{ textDecoration: 'none' }}>
<Island
className="flex items-center py1 px2"
style={{ height: 28, borderRadius: 28, backgroundColor: colors.mediumBlue }}
>
- <Image src={METAMASK_IMG_SRC} width="28px" />
+ <Image src={imageUrl} width="28px" borderRadius="22%" />
<Container marginLeft="8px" marginRight="12px">
<Text fontColor={colors.white} fontSize="16px" fontWeight={500}>
- Get MetaMask Wallet
+ {text}
</Text>
</Container>
</Island>
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',