diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-03-24 07:29:10 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-03-30 07:57:23 +0800 |
commit | 870da2ab225f37ae5b566e16ef2ae83834b3abf2 (patch) | |
tree | e5b601c63d859cb2cad44f0965a4d23edc28baf1 /packages/website/ts/components/wallet | |
parent | 6122840241a47119b046b639e326cfead1ea3e10 (diff) | |
download | dexon-0x-contracts-870da2ab225f37ae5b566e16ef2ae83834b3abf2.tar dexon-0x-contracts-870da2ab225f37ae5b566e16ef2ae83834b3abf2.tar.gz dexon-0x-contracts-870da2ab225f37ae5b566e16ef2ae83834b3abf2.tar.bz2 dexon-0x-contracts-870da2ab225f37ae5b566e16ef2ae83834b3abf2.tar.lz dexon-0x-contracts-870da2ab225f37ae5b566e16ef2ae83834b3abf2.tar.xz dexon-0x-contracts-870da2ab225f37ae5b566e16ef2ae83834b3abf2.tar.zst dexon-0x-contracts-870da2ab225f37ae5b566e16ef2ae83834b3abf2.zip |
Implement wallet locked and uninstalled states
Diffstat (limited to 'packages/website/ts/components/wallet')
-rw-r--r-- | packages/website/ts/components/wallet/wallet.tsx | 54 | ||||
-rw-r--r-- | packages/website/ts/components/wallet/wallet_disconnected_item.tsx | 79 |
2 files changed, 125 insertions, 8 deletions
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<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 ( 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<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"> + <img src="/images/ledger_icon.png" style={{ width: LEDGER_ICON_WIDTH }} /> + <a + className="px1" + href="javascript:;" + onClick={props.onToggleLedgerDialog} + style={{ fontSize: 14, color: colors.grey500 }} + > + use other wallet + </a> + </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} + /> +); |