crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement new locked and uninstalled states

Browse Source
This commit is contained in:
Brandon Millman
2018-06-27 14:17:58 -07:00
parent 2970e103db
commit 7ee37fb62a
7 changed files with 178 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/website/ts/components/top_bar/provider_display.tsx
View File

@@ -156,7 +156,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
return <CircularProgress size={ROOT_HEIGHT} thickness={2} />;
case AccountState.Locked:
return <Lock color={colors.black} />;
case AccountState.Unconnected:
case AccountState.Disconnected:
return <ActionAccountBalanceWallet color={colors.mediumBlue} />;
default:
return null;
@@ -179,7 +179,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
return colors.darkGrey;
case AccountState.Ready:
case AccountState.Locked:
case AccountState.Unconnected:
case AccountState.Disconnected:
default:
return colors.black;
}
@@ -200,7 +200,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
</Container>
</Container>
);
case AccountState.Unconnected:
case AccountState.Disconnected:
case AccountState.Loading:
default:
return null;
@@ -213,7 +213,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
return colors.green;
case AccountState.Locked:
case AccountState.Loading:
case AccountState.Unconnected:
case AccountState.Disconnected:
default:
return colors.red;
}

1
packages/website/ts/components/ui/container.tsx
View File

@@ -14,6 +14,7 @@ export interface ContainerProps {
backgroundColor?: string;
borderRadius?: StringOrNum;
maxWidth?: StringOrNum;
maxHeight?: StringOrNum;
width?: StringOrNum;
height?: StringOrNum;
minHeight?: StringOrNum;

3
packages/website/ts/components/ui/text.tsx
View File

@@ -15,6 +15,7 @@ export interface TextProps {
minHeight?: string;
center?: boolean;
fontWeight?: number | string;
textDecorationLine?: string;
onClick?: () => 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',
};

147
packages/website/ts/components/wallet/body_overlay.tsx Normal file
View File

@@ -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<BodyOverlayProps, BodyOverlayState> {
public render(): React.ReactNode {
const accountState = this._getAccountState();
switch (accountState) {
case AccountState.Locked:
return <LockedOverlay onUseDifferentWalletClicked={this.props.onToggleLedgerDialog} />;
case AccountState.Disconnected:
return <DisconnectedOverlay onUseDifferentWalletClicked={this.props.onToggleLedgerDialog} />;
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<LockedOverlayProps> = ({
className,
onUseDifferentWalletClicked,
}) => (
<div className={className}>
<Container
className="flex flex-column items-center"
marginBottom="24px"
marginTop="24px"
marginLeft="48px"
marginRight="48px"
>
<Image src={METAMASK_IMG_SRC} height="70px" />
<Container marginTop="12px">
<Text fontColor="#F68C24" fontSize="16px" fontWeight="bold">
Please Unlock MetaMask
</Text>
</Container>
<UseDifferentWallet fontColor={colors.darkGrey} onClick={onUseDifferentWalletClicked} />
</Container>
</div>
);
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 (
<div className="flex flex-column items-center">
<GetMetaMask />
<UseDifferentWallet fontColor={colors.mediumBlue} onClick={props.onUseDifferentWalletClicked} />
</div>
);
};
interface UseDifferentWallet {
fontColor: string;
onClick?: () => void;
}
const UseDifferentWallet = (props: UseDifferentWallet) => {
return (
<Container marginTop="12px">
<Text fontColor={props.fontColor} fontSize="16px" textDecorationLine="underline" onClick={props.onClick}>
Use a different wallet
</Text>
</Container>
);
};
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 (
<a href={extensionLink} 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" />
<Container marginLeft="8px" marginRight="12px">
<Text fontColor={colors.white} fontSize="16px" fontWeight={500}>
Get Metamask Wallet
</Text>
</Container>
</Island>
</a>
);
};

20
packages/website/ts/components/wallet/wallet.tsx
View File

@@ -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<WalletProps, WalletState> {
{_.map(loadingRowsRange, index => {
return <NullTokenRow />;
})}
<Container
className="flex items-center"
position="absolute"
width="100%"
height="100%"
maxHeight={bodyStyle.maxHeight}
>
<div className="mx-auto">
<BodyOverlay
dispatcher={this.props.dispatcher}
userAddress={this.props.userAddress}
injectedProviderName={this.props.injectedProviderName}
providerType={this.props.providerType}
onToggleLedgerDialog={this.props.onToggleLedgerDialog}
blockchain={this.props.blockchain}
blockchainIsLoaded={this.props.blockchainIsLoaded}
/>
</div>
</Container>
</div>
);
}

2
packages/website/ts/types.ts
View File

@@ -565,7 +565,7 @@ export enum BrowserType {
}
export enum AccountState {
Unconnected = 'Unconnected',
Disconnected = 'Disconnected',
Ready = 'Ready',
Loading = 'Loading',
Locked = 'Locked',

4
packages/website/ts/utils/utils.ts
View File

@@ -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 {