aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--packages/website/public/images/metamask_icon.pngbin0 -> 5728 bytes
-rw-r--r--packages/website/ts/components/portal.tsx3
-rw-r--r--packages/website/ts/components/top_bar/provider_display.tsx3
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx54
-rw-r--r--packages/website/ts/components/wallet/wallet_disconnected_item.tsx81
5 files changed, 132 insertions, 9 deletions
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
--- /dev/null
+++ b/packages/website/public/images/metamask_icon.png
Binary files 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<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>
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<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';
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..89e32f7be
--- /dev/null
+++ b/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}
+ />
+);
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-02 21:29:56 +0800