From b49148ec54886b11042e42eed9ad4e8793840775 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 24 May 2018 10:11:56 -0700 Subject: Implement metamask installation flow --- packages/website/ts/components/wallet/wallet_disconnected_item.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/components/wallet') diff --git a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx index d334f1748..39a62e1fb 100644 --- a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx +++ b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx @@ -6,6 +6,7 @@ import * as React from 'react'; import { ProviderType } from 'ts/types'; import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; export interface WalletDisconnectedItemProps { providerType: ProviderType; @@ -38,8 +39,7 @@ const BUTTON_BOTTOM_PADDING = 80; export const WalletDisconnectedItem: React.StatelessComponent = ( props: WalletDisconnectedItemProps, ) => { - const isExternallyInjectedProvider = - props.providerType === ProviderType.Injected && props.injectedProviderName !== '0x Public'; + const isExternallyInjectedProvider = utils.isExternallyInjected(props.providerType, props.injectedProviderName); return (
-- cgit From f0bbf2cab0ca7aef47699a3954fb0444d5d6d233 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 29 May 2018 12:53:18 -0700 Subject: Improve tooltip look --- packages/website/ts/components/wallet/wallet.tsx | 3 +++ 1 file changed, 3 insertions(+) (limited to 'packages/website/ts/components/wallet') diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 39e591bac..eab986208 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -47,6 +47,7 @@ import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles'; +import { zIndex } from '../../utils/style'; export interface WalletProps { userAddress: string; @@ -85,6 +86,8 @@ interface AccessoryItemConfig { const styles: Styles = { root: { width: '100%', + zIndex: zIndex.aboveOverlay, + position: 'relative', }, headerItemInnerDiv: { paddingLeft: 65, -- cgit From bc28a08dd0d4db99549122fb4912b4931a3aad78 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 29 May 2018 15:49:13 -0700 Subject: Address PR feedback --- packages/website/ts/components/wallet/wallet.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/components/wallet') diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index eab986208..524dc1952 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -45,9 +45,9 @@ import { import { backendClient } from 'ts/utils/backend_client'; import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; +import { zIndex } from 'ts/utils/style'; import { utils } from 'ts/utils/utils'; import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles'; -import { zIndex } from '../../utils/style'; export interface WalletProps { userAddress: string; -- cgit From b14c3fe48dc8eb5bad6eefceac872754eec34ffe Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 29 May 2018 17:57:22 -0700 Subject: Onboarding: implement add ETH step, and stub for add WETH step --- packages/website/ts/components/wallet/wallet.tsx | 30 ++++++++++++++---------- 1 file changed, 17 insertions(+), 13 deletions(-) (limited to 'packages/website/ts/components/wallet') diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 524dc1952..d72c5458f 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -131,9 +131,6 @@ const styles: Styles = { }; const ETHER_ICON_PATH = '/images/ether.png'; -const ETHER_TOKEN_SYMBOL = 'WETH'; -const ZRX_TOKEN_SYMBOL = 'ZRX'; -const ETHER_SYMBOL = 'ETH'; const ICON_DIMENSION = 24; const TOKEN_AMOUNT_DISPLAY_PRECISION = 3; const BODY_ITEM_KEY = 'BODY'; @@ -319,7 +316,7 @@ export class Wallet extends React.Component { const primaryText = this._renderAmount( this.props.userEtherBalanceInWei, constants.DECIMAL_PLACES_ETH, - ETHER_SYMBOL, + constants.ETHER_SYMBOL, ); const etherToken = this._getEthToken(); const etherPrice = this.state.trackedTokenStateByAddress[etherToken.address].price; @@ -338,13 +335,13 @@ export class Wallet extends React.Component { ? { ...walletItemStyles.focusedItem, ...styles.paddedItem } : { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem }; const key = ETHER_ITEM_KEY; - return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig); + return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, 'eth-row'); } private _renderTokenRows(): React.ReactNode { const trackedTokens = this.props.trackedTokens; const trackedTokensStartingWithEtherToken = trackedTokens.sort( - firstBy((t: Token) => t.symbol !== ETHER_TOKEN_SYMBOL) - .thenBy((t: Token) => t.symbol !== ZRX_TOKEN_SYMBOL) + firstBy((t: Token) => t.symbol !== constants.ETHER_TOKEN_SYMBOL) + .thenBy((t: Token) => t.symbol !== constants.ZRX_TOKEN_SYMBOL) .thenBy('address'), ); return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this)); @@ -359,7 +356,8 @@ export class Wallet extends React.Component { const icon = ; const primaryText = this._renderAmount(tokenState.balance, token.decimals, token.symbol); const secondaryText = this._renderValue(tokenState.balance, token.decimals, tokenState.price); - const wrappedEtherDirection = token.symbol === ETHER_TOKEN_SYMBOL ? Side.Receive : undefined; + const isWeth = token.symbol === constants.ETHER_TOKEN_SYMBOL; + const wrappedEtherDirection = isWeth ? Side.Receive : undefined; const accessoryItemConfig: AccessoryItemConfig = { wrappedEtherDirection, allowanceToggleConfig: { @@ -368,7 +366,14 @@ export class Wallet extends React.Component { }, }; const key = token.address; - return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig); + return this._renderBalanceRow( + key, + icon, + primaryText, + secondaryText, + accessoryItemConfig, + isWeth ? 'weth-row' : undefined, + ); } private _renderBalanceRow( key: string, @@ -376,6 +381,7 @@ export class Wallet extends React.Component { primaryText: React.ReactNode, secondaryText: React.ReactNode, accessoryItemConfig: AccessoryItemConfig, + className?: string, ): React.ReactNode { const shouldShowWrapEtherItem = !_.isUndefined(this.state.wrappedEtherDirection) && @@ -385,7 +391,7 @@ export class Wallet extends React.Component { : { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem }; const etherToken = this._getEthToken(); return ( -
+
{icon}
@@ -575,8 +581,6 @@ export class Wallet extends React.Component { }); } private _getEthToken(): Token { - const tokens = _.values(this.props.tokenByAddress); - const etherToken = _.find(tokens, { symbol: ETHER_TOKEN_SYMBOL }); - return etherToken; + return utils.getEthToken(this.props.tokenByAddress); } } // tslint:disable:max-file-line-count -- cgit