From 7ee37fb62af7014f8a2aae435458302887781be0 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 27 Jun 2018 14:17:58 -0700 Subject: Implement new locked and uninstalled states --- .../ts/components/top_bar/provider_display.tsx | 8 +- packages/website/ts/components/ui/container.tsx | 1 + packages/website/ts/components/ui/text.tsx | 3 + .../website/ts/components/wallet/body_overlay.tsx | 147 +++++++++++++++++++++ packages/website/ts/components/wallet/wallet.tsx | 20 +++ packages/website/ts/types.ts | 2 +- packages/website/ts/utils/utils.ts | 4 +- 7 files changed, 178 insertions(+), 7 deletions(-) create mode 100644 packages/website/ts/components/wallet/body_overlay.tsx (limited to 'packages') diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index cbbd39c70..24fbb45ec 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -156,7 +156,7 @@ export class ProviderDisplay extends React.Component; case AccountState.Locked: return ; - case AccountState.Unconnected: + case AccountState.Disconnected: return ; default: return null; @@ -179,7 +179,7 @@ export class ProviderDisplay extends React.Component ); - case AccountState.Unconnected: + case AccountState.Disconnected: case AccountState.Loading: default: return null; @@ -213,7 +213,7 @@ export class ProviderDisplay extends React.Component void; } @@ -28,6 +29,7 @@ export const Text = styled(PlainText)` font-family: ${props => props.fontFamily}; font-weight: ${props => props.fontWeight}; font-size: ${props => props.fontSize}; + text-decoration-line: ${props => props.textDecorationLine}; ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; ${props => (props.center ? 'text-align: center' : '')}; color: ${props => props.fontColor}; @@ -45,6 +47,7 @@ Text.defaultProps = { fontColor: colors.black, fontSize: '15px', lineHeight: '1.5em', + textDecorationLine: 'none', Tag: 'div', }; diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx new file mode 100644 index 000000000..8f8899a92 --- /dev/null +++ b/packages/website/ts/components/wallet/body_overlay.tsx @@ -0,0 +1,147 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { Blockchain } from 'ts/blockchain'; +import { Container } from 'ts/components/ui/container'; +import { Image } from 'ts/components/ui/image'; +import { Island } from 'ts/components/ui/island'; +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 { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; + +const METAMASK_IMG_SRC = '/images/metamask_icon.png'; + +export interface BodyOverlayProps { + dispatcher: Dispatcher; + userAddress: string; + injectedProviderName: string; + providerType: ProviderType; + onToggleLedgerDialog: () => void; + blockchain?: Blockchain; + blockchainIsLoaded: boolean; +} + +interface BodyOverlayState {} + +export class BodyOverlay extends React.Component { + public render(): React.ReactNode { + const accountState = this._getAccountState(); + switch (accountState) { + case AccountState.Locked: + return ; + case AccountState.Disconnected: + return ; + case AccountState.Ready: + case AccountState.Loading: + default: + return null; + } + } + private _isBlockchainReady(): boolean { + return this.props.blockchainIsLoaded && !_.isUndefined(this.props.blockchain); + } + private _getAccountState(): AccountState { + return utils.getAccountState( + this._isBlockchainReady(), + this.props.providerType, + this.props.injectedProviderName, + this.props.userAddress, + ); + } +} + +interface LockedOverlayProps { + className?: string; + onUseDifferentWalletClicked?: () => void; +} +const PlainLockedOverlay: React.StatelessComponent = ({ + className, + onUseDifferentWalletClicked, +}) => ( +
+ + + + + Please Unlock MetaMask + + + + +
+); +const LockedOverlay = styled(PlainLockedOverlay)` + background: rgba(255, 248, 242, 0.8); + border: 1px solid #f68c24; + box-sizing: border-box; + border-radius: 10px; +`; + +interface DisconnectedOverlayProps { + onUseDifferentWalletClicked?: () => void; +} +const DisconnectedOverlay = (props: DisconnectedOverlayProps) => { + return ( +
+ + +
+ ); +}; + +interface UseDifferentWallet { + fontColor: string; + onClick?: () => void; +} +const UseDifferentWallet = (props: UseDifferentWallet) => { + return ( + + + Use a different wallet + + + ); +}; + +const GetMetaMask = () => { + 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; + } + return ( + + + + + + Get Metamask Wallet + + + + + ); +}; diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 4c1d27598..9e9bb2e97 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -26,6 +26,7 @@ import { Identicon } from 'ts/components/ui/identicon'; import { Island } from 'ts/components/ui/island'; import { Text } from 'ts/components/ui/text'; import { TokenIcon } from 'ts/components/ui/token_icon'; +import { BodyOverlay } from 'ts/components/wallet/body_overlay'; import { WalletDisconnectedItem } from 'ts/components/wallet/wallet_disconnected_item'; import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; @@ -196,6 +197,25 @@ export class Wallet extends React.Component { {_.map(loadingRowsRange, index => { return ; })} + +
+ +
+ ); } diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index cd1f3d7bb..5c44395a3 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -565,7 +565,7 @@ export enum BrowserType { } export enum AccountState { - Unconnected = 'Unconnected', + Disconnected = 'Disconnected', Ready = 'Ready', Loading = 'Loading', Locked = 'Locked', diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 5a180fdca..726e1815f 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -201,7 +201,7 @@ export const utils = { return utils.getAddressBeginAndEnd(userAddress); case AccountState.Locked: return 'Please Unlock'; - case AccountState.Unconnected: + case AccountState.Disconnected: return 'Connect a Wallet'; default: return ''; @@ -223,7 +223,7 @@ export const utils = { } else if (isExternallyInjectedProvider) { return AccountState.Locked; } else { - return AccountState.Unconnected; + return AccountState.Disconnected; } }, hasUniqueNameAndSymbol(tokens: Token[], token: Token): boolean { -- cgit v1.2.3