From 870da2ab225f37ae5b566e16ef2ae83834b3abf2 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 23 Mar 2018 16:29:10 -0700 Subject: Implement wallet locked and uninstalled states --- packages/website/public/images/metamask_icon.png | Bin 0 -> 5728 bytes packages/website/ts/components/portal.tsx | 3 + .../ts/components/top_bar/provider_display.tsx | 3 +- packages/website/ts/components/wallet/wallet.tsx | 54 +++++++++++--- .../components/wallet/wallet_disconnected_item.tsx | 79 +++++++++++++++++++++ 5 files changed, 130 insertions(+), 9 deletions(-) create mode 100644 packages/website/public/images/metamask_icon.png create mode 100644 packages/website/ts/components/wallet/wallet_disconnected_item.tsx (limited to 'packages/website') diff --git a/packages/website/public/images/metamask_icon.png b/packages/website/public/images/metamask_icon.png new file mode 100644 index 000000000..ab497ecb7 Binary files /dev/null and b/packages/website/public/images/metamask_icon.png differ diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx index 55013e105..ceb0ecc72 100644 --- a/packages/website/ts/components/portal.tsx +++ b/packages/website/ts/components/portal.tsx @@ -305,6 +305,9 @@ export class Portal extends React.Component { trackedTokens={trackedTokens} userEtherBalanceInWei={this.props.userEtherBalanceInWei} lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} + injectedProviderName={this.props.injectedProviderName} + providerType={this.props.providerType} + onToggleLedgerDialog={this.onToggleLedgerDialog.bind(this)} /> diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 89c506d0e..221c34f8c 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -28,7 +28,8 @@ interface ProviderDisplayState {} export class ProviderDisplay extends React.Component { 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'; diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 670dc07dd..39c95d31c 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/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 { return
{isReadyToRender && this._renderRows()}
; } private _renderRows() { + const isAddressAvailable = !_.isEmpty(this.props.userAddress); return ( - {_.concat( - this._renderHeaderRows(), - this._renderEthRows(), - this._renderTokenRows(), - this._renderFooterRows(), - )} + {isAddressAvailable + ? _.concat( + this._renderConnectedHeaderRows(), + this._renderEthRows(), + this._renderTokenRows(), + this._renderFooterRows(), + ) + : _.concat(this._renderDisconnectedHeaderRows(), this._renderDisconnectedRows())} ); } - private _renderHeaderRows() { + private _renderDisconnectedHeaderRows() { + const userAddress = this.props.userAddress; + const primaryText = 'wallet'; + return ( + } + style={styles.paddedItem} + innerDivStyle={styles.headerItemInnerDiv} + /> + ); + } + private _renderDisconnectedRows() { + return ( + + ); + } + private _renderConnectedHeaderRows() { const userAddress = this.props.userAddress; const primaryText = utils.getAddressBeginAndEnd(userAddress); return ( diff --git a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx new file mode 100644 index 000000000..d74ca23f6 --- /dev/null +++ b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx @@ -0,0 +1,79 @@ +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, // For some reason when we set the href prop of a FlatButton material-ui reduces the top padding + }, +}; + +const ITEM_HEIGHT = 292; +const METAMASK_ICON_WIDTH = 35; +const LEDGER_ICON_WIDTH = 30; +const BUTTON_BOTTOM_PADDING = 80; + +export const WalletDisconnectedItem: React.StatelessComponent = ( + props: WalletDisconnectedItemProps, +) => { + const isExternallyInjectedProvider = + props.providerType === ProviderType.Injected && props.injectedProviderName !== '0x Public'; + return ( +
+
+
+
+ + +
+
+
+
+ ); +}; + +interface ProviderButtonProps { + isExternallyInjectedProvider: boolean; +} + +const ProviderButton: React.StatelessComponent = (props: ProviderButtonProps) => ( + } + 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} + /> +); -- cgit v1.2.3 From cdbb3a015fec03f84524fd9072e8e73f6e6fbc53 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 30 Mar 2018 15:00:02 -0700 Subject: Add HACK comment and reorganize use other wallet button --- .../components/wallet/wallet_disconnected_item.tsx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx index d74ca23f6..89e32f7be 100644 --- a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx +++ b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx @@ -20,7 +20,12 @@ const styles: Styles = { height: 80, }, hrefAdjustment: { - paddingTop: 20, // For some reason when we set the href prop of a FlatButton material-ui reduces the top padding + 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', }, }; @@ -42,15 +47,12 @@ export const WalletDisconnectedItem: React.StatelessComponent
- - - use other wallet - +
+ + + user other wallet + +
-- cgit v1.2.3