Merge pull request #487 from 0xProject/feature/website/wallet-setup

Implement wallet locked and uninstalled states

packages/website/ts/components/portal.tsx

@@ -305,6 +305,9 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
                         trackedTokens={trackedTokens}
                         userEtherBalanceInWei={this.props.userEtherBalanceInWei}
                         lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
+                        injectedProviderName={this.props.injectedProviderName}
+                        providerType={this.props.providerType}
+                        onToggleLedgerDialog={this.onToggleLedgerDialog.bind(this)}
                     />
                 </div>
             </div>

packages/website/ts/components/top_bar/provider_display.tsx

@@ -28,7 +28,8 @@ interface ProviderDisplayState {}
 export class ProviderDisplay extends React.Component<ProviderDisplayProps, ProviderDisplayState> {
     public render() {
         const isAddressAvailable = !_.isEmpty(this.props.userAddress);
-        const isExternallyInjectedProvider = ProviderType.Injected && this.props.injectedProviderName !== '0x Public';
+        const isExternallyInjectedProvider =
+            this.props.providerType === ProviderType.Injected && this.props.injectedProviderName !== '0x Public';
         const displayAddress = isAddressAvailable
             ? utils.getAddressBeginAndEnd(this.props.userAddress)
             : isExternallyInjectedProvider ? 'Account locked' : '0x0000...0000';

packages/website/ts/components/wallet/wallet.tsx

@@ -10,6 +10,7 @@ import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import FlatButton from 'material-ui/FlatButton';
 import { List, ListItem } from 'material-ui/List';
+import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
 import NavigationArrowDownward from 'material-ui/svg-icons/navigation/arrow-downward';
 import NavigationArrowUpward from 'material-ui/svg-icons/navigation/arrow-upward';
 import Close from 'material-ui/svg-icons/navigation/close';
@@ -21,9 +22,19 @@ import { Blockchain } from 'ts/blockchain';
 import { AllowanceToggle } from 'ts/components/inputs/allowance_toggle';
 import { Identicon } from 'ts/components/ui/identicon';
 import { TokenIcon } from 'ts/components/ui/token_icon';
+import { WalletDisconnectedItem } from 'ts/components/wallet/wallet_disconnected_item';
 import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { BalanceErrs, BlockchainErrs, Side, Token, TokenByAddress, TokenState, TokenStateByAddress } from 'ts/types';
+import {
+    BalanceErrs,
+    BlockchainErrs,
+    ProviderType,
+    Side,
+    Token,
+    TokenByAddress,
+    TokenState,
+    TokenStateByAddress,
+} from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
 import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles';
@@ -39,6 +50,9 @@ export interface WalletProps {
     trackedTokens: Token[];
     userEtherBalanceInWei: BigNumber;
     lastForceTokenStateRefetch: number;
+    injectedProviderName: string;
+    providerType: ProviderType;
+    onToggleLedgerDialog: () => void;
 }
 
 interface WalletState {
@@ -163,18 +177,42 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         return <div style={styles.wallet}>{isReadyToRender && this._renderRows()}</div>;
     }
     private _renderRows() {
+        const isAddressAvailable = !_.isEmpty(this.props.userAddress);
         return (
             <List style={styles.list}>
-                {_.concat(
-                    this._renderHeaderRows(),
-                    this._renderEthRows(),
-                    this._renderTokenRows(),
-                    this._renderFooterRows(),
-                )}
+                {isAddressAvailable
+                    ? _.concat(
+                          this._renderConnectedHeaderRows(),
+                          this._renderEthRows(),
+                          this._renderTokenRows(),
+                          this._renderFooterRows(),
+                      )
+                    : _.concat(this._renderDisconnectedHeaderRows(), this._renderDisconnectedRows())}
             </List>
         );
     }
-    private _renderHeaderRows() {
+    private _renderDisconnectedHeaderRows() {
+        const userAddress = this.props.userAddress;
+        const primaryText = 'wallet';
+        return (
+            <ListItem
+                primaryText={primaryText.toUpperCase()}
+                leftIcon={<ActionAccountBalanceWallet color={colors.mediumBlue} />}
+                style={styles.paddedItem}
+                innerDivStyle={styles.headerItemInnerDiv}
+            />
+        );
+    }
+    private _renderDisconnectedRows() {
+        return (
+            <WalletDisconnectedItem
+                providerType={this.props.providerType}
+                injectedProviderName={this.props.injectedProviderName}
+                onToggleLedgerDialog={this.props.onToggleLedgerDialog}
+            />
+        );
+    }
+    private _renderConnectedHeaderRows() {
         const userAddress = this.props.userAddress;
         const primaryText = utils.getAddressBeginAndEnd(userAddress);
         return (

packages/website/ts/components/wallet/wallet_disconnected_item.tsx

@@ -0,0 +1,81 @@
+import { colors, Styles } from '@0xproject/react-shared';
+import FlatButton from 'material-ui/FlatButton';
+import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
+import * as React from 'react';
+
+import { ProviderType } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+
+export interface WalletDisconnectedItemProps {
+    providerType: ProviderType;
+    injectedProviderName: string;
+    onToggleLedgerDialog: () => void;
+}
+
+const styles: Styles = {
+    button: {
+        border: colors.walletBorder,
+        borderStyle: 'solid',
+        borderWidth: 1,
+        height: 80,
+    },
+    hrefAdjustment: {
+        paddingTop: 20, // HACK: For some reason when we set the href prop of a FlatButton material-ui reduces the top padding
+    },
+    otherWalletText: {
+        fontSize: 14,
+        color: colors.grey500,
+        textDecoration: 'underline',
+    },
+};
+
+const ITEM_HEIGHT = 292;
+const METAMASK_ICON_WIDTH = 35;
+const LEDGER_ICON_WIDTH = 30;
+const BUTTON_BOTTOM_PADDING = 80;
+
+export const WalletDisconnectedItem: React.StatelessComponent<WalletDisconnectedItemProps> = (
+    props: WalletDisconnectedItemProps,
+) => {
+    const isExternallyInjectedProvider =
+        props.providerType === ProviderType.Injected && props.injectedProviderName !== '0x Public';
+    return (
+        <div className="flex flex-center">
+            <div className="mx-auto">
+                <div className="table" style={{ height: ITEM_HEIGHT }}>
+                    <div className="table-cell align-middle">
+                        <ProviderButton isExternallyInjectedProvider={isExternallyInjectedProvider} />
+                        <div className="flex flex-center py2" style={{ paddingBottom: BUTTON_BOTTOM_PADDING }}>
+                            <div className="mx-auto">
+                                <div onClick={props.onToggleLedgerDialog} style={{ cursor: 'pointer' }}>
+                                    <img src="/images/ledger_icon.png" style={{ width: LEDGER_ICON_WIDTH }} />
+                                    <span className="px1" style={styles.otherWalletText}>
+                                        user other wallet
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+interface ProviderButtonProps {
+    isExternallyInjectedProvider: boolean;
+}
+
+const ProviderButton: React.StatelessComponent<ProviderButtonProps> = (props: ProviderButtonProps) => (
+    <FlatButton
+        label={props.isExternallyInjectedProvider ? 'Please unlock account' : 'Get Metamask Wallet Extension'}
+        labelStyle={{ color: colors.black }}
+        labelPosition="after"
+        primary={true}
+        icon={<img src="/images/metamask_icon.png" width={METAMASK_ICON_WIDTH.toString()} />}
+        style={props.isExternallyInjectedProvider ? styles.button : { ...styles.button, ...styles.hrefAdjustment }}
+        href={props.isExternallyInjectedProvider ? undefined : constants.URL_METAMASK_CHROME_STORE}
+        target={props.isExternallyInjectedProvider ? undefined : '_blank'}
+        disabled={props.isExternallyInjectedProvider}
+    />
+);