From 6a39a69afeed7b0737cff70b4d3314e668b67308 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 26 Jun 2018 15:01:11 -0700 Subject: Added Circle component --- packages/website/ts/components/ui/circle.tsx | 16 ++++++++++++++++ packages/website/ts/components/ui/identicon.tsx | 5 ++--- 2 files changed, 18 insertions(+), 3 deletions(-) create mode 100644 packages/website/ts/components/ui/circle.tsx (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/ui/circle.tsx b/packages/website/ts/components/ui/circle.tsx new file mode 100644 index 000000000..75103d066 --- /dev/null +++ b/packages/website/ts/components/ui/circle.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; + +export interface CircleProps { + className?: string; + diameter: number; + fillColor: string; +} + +export const Circle: React.StatelessComponent = ({ className, diameter, fillColor }) => { + const radius = diameter / 2; + return ( + + + + ); +}; diff --git a/packages/website/ts/components/ui/identicon.tsx b/packages/website/ts/components/ui/identicon.tsx index cc1655962..d8036f0c1 100644 --- a/packages/website/ts/components/ui/identicon.tsx +++ b/packages/website/ts/components/ui/identicon.tsx @@ -2,6 +2,7 @@ import blockies = require('blockies'); import * as _ from 'lodash'; import * as React from 'react'; +import { Circle } from 'ts/components/ui/circle'; import { Image } from 'ts/components/ui/image'; import { colors } from 'ts/style/colors'; @@ -40,9 +41,7 @@ export class Identicon extends React.Component { width={diameter} /> ) : ( - - - + )} ); -- cgit From f76c9bc2263b81ab895d3ddec1afa2c3f901b32a Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 26 Jun 2018 15:01:20 -0700 Subject: Implement loading body rows --- .../ts/components/inputs/allowance_toggle.tsx | 4 +- packages/website/ts/components/ui/container.tsx | 1 + packages/website/ts/components/wallet/wallet.tsx | 101 ++++++++++++++++----- 3 files changed, 80 insertions(+), 26 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx index 0dd2a5aa5..0d5995696 100644 --- a/packages/website/ts/components/inputs/allowance_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_toggle.tsx @@ -48,10 +48,10 @@ const styles: Styles = { width: 25, }, offTrackStyle: { - backgroundColor: colors.allowanceToggleOffTrack, + backgroundColor: colors.grey300, }, onTrackStyle: { - backgroundColor: colors.allowanceToggleOnTrack, + backgroundColor: colors.mediumBlue, }, }; diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index a747ef01f..2abcc00f6 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -15,6 +15,7 @@ export interface ContainerProps { borderRadius?: StringOrNum; maxWidth?: StringOrNum; width?: StringOrNum; + height?: StringOrNum; minHeight?: StringOrNum; isHidden?: boolean; className?: string; diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 785b2da88..9f3266cc9 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -19,10 +19,12 @@ import { Link } from 'react-router-dom'; import firstBy = require('thenby'); import { Blockchain } from 'ts/blockchain'; +import { Circle } from 'ts/components/ui/circle'; import { Container } from 'ts/components/ui/container'; import { IconButton } from 'ts/components/ui/icon_button'; import { Identicon } from 'ts/components/ui/identicon'; import { Island } from 'ts/components/ui/island'; +import { Text } from 'ts/components/ui/text'; 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'; @@ -123,9 +125,6 @@ const styles: Styles = { color: colors.mediumBlue, fontWeight: 'bold', }, - loadingBody: { - height: 381, - }, }; const ETHER_ICON_PATH = '/images/ether.png'; @@ -138,6 +137,8 @@ const ETHER_ITEM_KEY = 'ETHER'; const USD_DECIMAL_PLACES = 2; const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56; const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`; +const PLACEHOLDER_COLOR = colors.grey300; +const LOADING_ROWS_COUNT = 5; const ActionButton = styled(FloatingActionButton)` button { @@ -178,31 +179,49 @@ export class Wallet extends React.Component { ); } - private _renderLoadedRows(): React.ReactNode { - const isAddressAvailable = !_.isEmpty(this.props.userAddress); - return isAddressAvailable - ? _.concat(this._renderConnectedHeaderRows(), this._renderBody(), this._renderFooterRows()) - : _.concat(this._renderDisconnectedHeaderRows(), this._renderDisconnectedRows()); - } private _renderLoadingRows(): React.ReactNode { - return _.concat(this._renderDisconnectedHeaderRows(), this._renderLoadingBodyRows()); + return _.concat(this._renderLoadingHeaderRows(), this._renderLoadingBodyRows()); + } + private _renderLoadingHeaderRows(): React.ReactElement<{}> { + return this._renderPlainHeaderRow('Loading...'); } private _renderLoadingBodyRows(): React.ReactElement<{}> { + const bodyStyle = this._getBodyStyle(); + const loadingRowsRange = _.range(LOADING_ROWS_COUNT + 1); return ( -
-
- -
+
+ {_.map(loadingRowsRange, index => { + return ; + })}
); } + private _renderLoadedRows(): React.ReactNode { + const isAddressAvailable = !_.isEmpty(this.props.userAddress); + return isAddressAvailable + ? _.concat(this._renderConnectedHeaderRows(), this._renderBody()) + : _.concat(this._renderDisconnectedHeaderRows(), this._renderLoadingBodyRows()); + } private _renderDisconnectedHeaderRows(): React.ReactElement<{}> { - const primaryText = 'wallet'; + const isExternallyInjectedProvider = utils.isExternallyInjected( + this.props.providerType, + this.props.injectedProviderName, + ); + const text = isExternallyInjectedProvider ? 'Please unlock MetaMask...' : 'Please connect a wallet...'; + return this._renderPlainHeaderRow(text); + } + private _renderPlainHeaderRow(text: string): React.ReactElement<{}> { return ( } - main={primaryText.toUpperCase()} + icon={} + main={ + + {text} + + // https://github.com/palantir/tslint-react/issues/140 + // tslint:disable-next-line:jsx-curly-spacing + } style={styles.borderedItem} /> ); @@ -231,12 +250,7 @@ export class Wallet extends React.Component { ); } private _renderBody(): React.ReactElement<{}> { - const bodyStyle: React.CSSProperties = { - ...styles.bodyInnerDiv, - overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', - // TODO: make this completely responsive - maxHeight: this.props.screenWidth !== ScreenWidths.Sm ? 475 : undefined, - }; + const bodyStyle = this._getBodyStyle(); return (
{
); } + private _getBodyStyle(): React.CSSProperties { + return { + ...styles.bodyInnerDiv, + overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', + // TODO: make this completely responsive + maxHeight: this.props.screenWidth !== ScreenWidths.Sm ? 475 : undefined, + }; + } private _onSidebarHover(_event: React.FormEvent): void { this.setState({ isHoveringSidebar: true, @@ -572,7 +594,7 @@ interface PlaceHolderProps { children?: React.ReactNode; } const PlaceHolder = (props: PlaceHolderProps) => { - const rootBackgroundColor = props.hideChildren ? colors.lightGrey : 'transparent'; + const rootBackgroundColor = props.hideChildren ? PLACEHOLDER_COLOR : 'transparent'; const rootStyle: React.CSSProperties = { backgroundColor: rootBackgroundColor, display: 'inline-block', @@ -586,4 +608,35 @@ const PlaceHolder = (props: PlaceHolderProps) => {
); }; + +const NullTokenRow = () => { + const icon = ; + const main = ( +
+ +
0.00 XXX
+ + + +
0.00
+ + +
+ ); + const accessory = ( + + + + + + ); + return ( + + ); +}; // tslint:disable:max-file-line-count -- cgit From 8419db53bb94354280ed4776540386fc271e4589 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 26 Jun 2018 16:13:35 -0700 Subject: Implement provider name in header --- packages/website/ts/components/wallet/wallet.tsx | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 9f3266cc9..75f950513 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -110,7 +110,7 @@ const styles: Styles = { color: colors.black, }, valueLabel: { - color: colors.grey, + color: colors.darkGrey, fontSize: 14, }, paddedItem: { @@ -238,12 +238,26 @@ export class Wallet extends React.Component { } private _renderConnectedHeaderRows(): React.ReactElement<{}> { const userAddress = this.props.userAddress; - const primaryText = utils.getAddressBeginAndEnd(userAddress); + const main = ( +
+ + {utils.getAddressBeginAndEnd(userAddress)} + + + + + + {this.props.injectedProviderName} + + + +
+ ); return ( } - main={primaryText} + main={main} style={styles.borderedItem} /> -- cgit From 1ca182e741fbdff4cd4df5877de18174b83a532b Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 26 Jun 2018 17:28:38 -0700 Subject: Update ProviderDisplay with new design --- .../website/ts/components/portal/drawer_menu.tsx | 3 +- .../ts/components/top_bar/provider_display.tsx | 116 +++++++++++++++------ packages/website/ts/components/wallet/wallet.tsx | 2 +- 3 files changed, 90 insertions(+), 31 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx index 205a60afc..a6707e86c 100644 --- a/packages/website/ts/components/portal/drawer_menu.tsx +++ b/packages/website/ts/components/portal/drawer_menu.tsx @@ -44,12 +44,13 @@ export const DrawerMenu = (props: DrawerMenuProps) => { iconName: 'zmdi-portable-wifi', }; const menuItemEntries = _.concat(relayerItemEntry, defaultMenuItemEntries); - const displayMessage = utils.getReadableAccountState( + const accountState = utils.getAccountState( props.blockchainIsLoaded && !_.isUndefined(props.blockchain), props.providerType, props.injectedProviderName, props.userAddress, ); + const displayMessage = utils.getReadableAccountState(accountState, props.userAddress); return (
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 496e5cae0..cbbd39c70 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -2,10 +2,13 @@ import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import RaisedButton from 'material-ui/RaisedButton'; +import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; +import Lock from 'material-ui/svg-icons/action/lock'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; import { ProviderPicker } from 'ts/components/top_bar/provider_picker'; +import { Circle } from 'ts/components/ui/circle'; import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; import { Identicon } from 'ts/components/ui/identicon'; @@ -14,7 +17,7 @@ import { Island } from 'ts/components/ui/island'; import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; -import { ProviderType } from 'ts/types'; +import { AccountState, ProviderType } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; @@ -46,37 +49,13 @@ export class ProviderDisplay extends React.Component -
- {this._isBlockchainReady() ? ( - - ) : ( - - )} -
+ + {this._renderIcon()} - - {displayMessage} - + {this._renderDisplayMessage()} - {isProviderMetamask && ( - - )} + {this._renderInjectedProvider()} ); const hasLedgerProvider = this.props.providerType === ProviderType.Ledger; @@ -168,7 +147,86 @@ export class ProviderDisplay extends React.Component; + case AccountState.Loading: + return ; + case AccountState.Locked: + return ; + case AccountState.Unconnected: + return ; + default: + return null; + } + } + private _renderDisplayMessage(): React.ReactNode { + const accountState = this._getAccountState(); + const displayMessage = utils.getReadableAccountState(accountState, this.props.userAddress); + const fontColor = this._getDisplayMessageFontColor(); + return ( + + {displayMessage} + + ); + } + private _getDisplayMessageFontColor(): string { + const accountState = this._getAccountState(); + switch (accountState) { + case AccountState.Loading: + return colors.darkGrey; + case AccountState.Ready: + case AccountState.Locked: + case AccountState.Unconnected: + default: + return colors.black; + } + } + private _renderInjectedProvider(): React.ReactNode { + const accountState = this._getAccountState(); + switch (accountState) { + case AccountState.Ready: + case AccountState.Locked: + const circleColor = this._getInjectedProviderColor(); + return ( + + + + + {this.props.injectedProviderName} + + + + ); + case AccountState.Unconnected: + case AccountState.Loading: + default: + return null; + } + } + private _getInjectedProviderColor(): string { + const accountState = this._getAccountState(); + switch (accountState) { + case AccountState.Ready: + return colors.green; + case AccountState.Locked: + case AccountState.Loading: + case AccountState.Unconnected: + default: + return colors.red; + } + } private _isBlockchainReady(): boolean { return this.props.blockchainIsLoaded && !_.isUndefined(this.props.blockchain); } + private _getAccountState(): AccountState { + return utils.getAccountState( + this._isBlockchainReady(), + this.props.providerType, + this.props.injectedProviderName, + this.props.userAddress, + ); + } } diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 75f950513..2474ec3fa 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -240,7 +240,7 @@ export class Wallet extends React.Component { const userAddress = this.props.userAddress; const main = (
- + {utils.getAddressBeginAndEnd(userAddress)} -- cgit From 78333b3026c8e0a13770bfab2341a17d5163592a Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 27 Jun 2018 11:00:39 -0700 Subject: Change wallet margin based on hover to prevent re-layout --- packages/website/ts/components/wallet/wallet.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 2474ec3fa..b20f3ef4b 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -281,6 +281,7 @@ export class Wallet extends React.Component { return { ...styles.bodyInnerDiv, overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', + marginRight: this.state.isHoveringSidebar ? 0 : 4, // TODO: make this completely responsive maxHeight: this.props.screenWidth !== ScreenWidths.Sm ? 475 : undefined, }; -- cgit From 2970e103db963b1ef37924c2724c5b1ca10e14fb Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 27 Jun 2018 11:16:00 -0700 Subject: Fix off center icon in wallet --- packages/website/ts/components/wallet/wallet.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index b20f3ef4b..4c1d27598 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -105,6 +105,9 @@ const styles: Styles = { backgroundColor: colors.walletDefaultItemBackground, minHeight: 85, }, + headerItem: { + minHeight: 60, + }, amountLabel: { fontWeight: 'bold', color: colors.black, @@ -222,7 +225,7 @@ export class Wallet extends React.Component { // https://github.com/palantir/tslint-react/issues/140 // tslint:disable-next-line:jsx-curly-spacing } - style={styles.borderedItem} + style={{ ...styles.borderedItem, ...styles.headerItem }} /> ); } @@ -258,7 +261,7 @@ export class Wallet extends React.Component { } main={main} - style={styles.borderedItem} + style={{ ...styles.borderedItem, ...styles.headerItem }} /> ); @@ -597,8 +600,8 @@ interface StandardIconRowProps { const StandardIconRow = (props: StandardIconRowProps) => { return (
-
{props.icon}
-
{props.main}
+
{props.icon}
+
{props.main}
{props.accessory}
-- cgit From 7ee37fb62af7014f8a2aae435458302887781be0 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 27 Jun 2018 14:17:58 -0700 Subject: Implement new locked and uninstalled states --- .../ts/components/top_bar/provider_display.tsx | 8 +- packages/website/ts/components/ui/container.tsx | 1 + packages/website/ts/components/ui/text.tsx | 3 + .../website/ts/components/wallet/body_overlay.tsx | 147 +++++++++++++++++++++ packages/website/ts/components/wallet/wallet.tsx | 20 +++ 5 files changed, 175 insertions(+), 4 deletions(-) create mode 100644 packages/website/ts/components/wallet/body_overlay.tsx (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index cbbd39c70..24fbb45ec 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -156,7 +156,7 @@ export class ProviderDisplay extends React.Component; case AccountState.Locked: return ; - case AccountState.Unconnected: + case AccountState.Disconnected: return ; default: return null; @@ -179,7 +179,7 @@ export class ProviderDisplay extends React.Component ); - case AccountState.Unconnected: + case AccountState.Disconnected: case AccountState.Loading: default: return null; @@ -213,7 +213,7 @@ export class ProviderDisplay extends React.Component void; } @@ -28,6 +29,7 @@ export const Text = styled(PlainText)` font-family: ${props => props.fontFamily}; font-weight: ${props => props.fontWeight}; font-size: ${props => props.fontSize}; + text-decoration-line: ${props => props.textDecorationLine}; ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; ${props => (props.center ? 'text-align: center' : '')}; color: ${props => props.fontColor}; @@ -45,6 +47,7 @@ Text.defaultProps = { fontColor: colors.black, fontSize: '15px', lineHeight: '1.5em', + textDecorationLine: 'none', Tag: 'div', }; diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx new file mode 100644 index 000000000..8f8899a92 --- /dev/null +++ b/packages/website/ts/components/wallet/body_overlay.tsx @@ -0,0 +1,147 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { Blockchain } from 'ts/blockchain'; +import { Container } from 'ts/components/ui/container'; +import { Image } from 'ts/components/ui/image'; +import { Island } from 'ts/components/ui/island'; +import { Text } from 'ts/components/ui/text'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { colors } from 'ts/style/colors'; +import { styled } from 'ts/style/theme'; +import { AccountState, BrowserType, ProviderType } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; + +const METAMASK_IMG_SRC = '/images/metamask_icon.png'; + +export interface BodyOverlayProps { + dispatcher: Dispatcher; + userAddress: string; + injectedProviderName: string; + providerType: ProviderType; + onToggleLedgerDialog: () => void; + blockchain?: Blockchain; + blockchainIsLoaded: boolean; +} + +interface BodyOverlayState {} + +export class BodyOverlay extends React.Component { + public render(): React.ReactNode { + const accountState = this._getAccountState(); + switch (accountState) { + case AccountState.Locked: + return ; + case AccountState.Disconnected: + return ; + case AccountState.Ready: + case AccountState.Loading: + default: + return null; + } + } + private _isBlockchainReady(): boolean { + return this.props.blockchainIsLoaded && !_.isUndefined(this.props.blockchain); + } + private _getAccountState(): AccountState { + return utils.getAccountState( + this._isBlockchainReady(), + this.props.providerType, + this.props.injectedProviderName, + this.props.userAddress, + ); + } +} + +interface LockedOverlayProps { + className?: string; + onUseDifferentWalletClicked?: () => void; +} +const PlainLockedOverlay: React.StatelessComponent = ({ + className, + onUseDifferentWalletClicked, +}) => ( +
+ + + + + Please Unlock MetaMask + + + + +
+); +const LockedOverlay = styled(PlainLockedOverlay)` + background: rgba(255, 248, 242, 0.8); + border: 1px solid #f68c24; + box-sizing: border-box; + border-radius: 10px; +`; + +interface DisconnectedOverlayProps { + onUseDifferentWalletClicked?: () => void; +} +const DisconnectedOverlay = (props: DisconnectedOverlayProps) => { + return ( +
+ + +
+ ); +}; + +interface UseDifferentWallet { + fontColor: string; + onClick?: () => void; +} +const UseDifferentWallet = (props: UseDifferentWallet) => { + return ( + + + Use a different wallet + + + ); +}; + +const GetMetaMask = () => { + const browserType = utils.getBrowserType(); + let extensionLink; + switch (browserType) { + case BrowserType.Chrome: + extensionLink = constants.URL_METAMASK_CHROME_STORE; + break; + case BrowserType.Firefox: + extensionLink = constants.URL_METAMASK_FIREFOX_STORE; + break; + case BrowserType.Opera: + extensionLink = constants.URL_METAMASK_OPERA_STORE; + break; + default: + extensionLink = constants.URL_METAMASK_HOMEPAGE; + } + return ( + + + + + + Get Metamask Wallet + + + + + ); +}; diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 4c1d27598..9e9bb2e97 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -26,6 +26,7 @@ import { Identicon } from 'ts/components/ui/identicon'; import { Island } from 'ts/components/ui/island'; import { Text } from 'ts/components/ui/text'; import { TokenIcon } from 'ts/components/ui/token_icon'; +import { BodyOverlay } from 'ts/components/wallet/body_overlay'; import { WalletDisconnectedItem } from 'ts/components/wallet/wallet_disconnected_item'; import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; @@ -196,6 +197,25 @@ export class Wallet extends React.Component { {_.map(loadingRowsRange, index => { return ; })} + +
+ +
+
); } -- cgit From a60dd1cbaf118f1d0b38f749807f13dab98da0a5 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 27 Jun 2018 14:24:06 -0700 Subject: Fix key issue and remove WalletDisconnectedItem --- packages/website/ts/components/wallet/wallet.tsx | 13 +-- .../components/wallet/wallet_disconnected_item.tsx | 100 --------------------- 2 files changed, 1 insertion(+), 112 deletions(-) delete mode 100644 packages/website/ts/components/wallet/wallet_disconnected_item.tsx (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 9e9bb2e97..febb526d7 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -27,7 +27,6 @@ import { Island } from 'ts/components/ui/island'; import { Text } from 'ts/components/ui/text'; import { TokenIcon } from 'ts/components/ui/token_icon'; import { BodyOverlay } from 'ts/components/wallet/body_overlay'; -import { WalletDisconnectedItem } from 'ts/components/wallet/wallet_disconnected_item'; import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { Dispatcher } from 'ts/redux/dispatcher'; @@ -195,7 +194,7 @@ export class Wallet extends React.Component { return (
{_.map(loadingRowsRange, index => { - return ; + return ; })} { /> ); } - private _renderDisconnectedRows(): React.ReactElement<{}> { - return ( - - ); - } private _renderConnectedHeaderRows(): React.ReactElement<{}> { const userAddress = this.props.userAddress; const main = ( diff --git a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx deleted file mode 100644 index 024b28544..000000000 --- a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { Styles } from '@0xproject/react-shared'; -import FlatButton from 'material-ui/FlatButton'; -import * as React from 'react'; - -import { colors } from 'ts/style/colors'; -import { BrowserType, ProviderType } from 'ts/types'; -import { constants } from 'ts/utils/constants'; -import { utils } from 'ts/utils/utils'; - -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 = 381; -const METAMASK_ICON_WIDTH = 35; -const LEDGER_ICON_WIDTH = 30; -const BUTTON_BOTTOM_PADDING = 80; - -export const WalletDisconnectedItem: React.StatelessComponent = ( - props: WalletDisconnectedItemProps, -) => { - const isExternallyInjectedProvider = utils.isExternallyInjected(props.providerType, props.injectedProviderName); - return ( -
-
-
-
- -
-
-
- - - user other wallet - -
-
-
-
-
-
-
- ); -}; - -interface ProviderButtonProps { - isExternallyInjectedProvider: boolean; -} - -const ProviderButton: React.StatelessComponent = (props: ProviderButtonProps) => { - const browserType = utils.getBrowserType(); - let extensionLink; - if (!props.isExternallyInjectedProvider) { - switch (browserType) { - case BrowserType.Chrome: - extensionLink = constants.URL_METAMASK_CHROME_STORE; - break; - case BrowserType.Firefox: - extensionLink = constants.URL_METAMASK_FIREFOX_STORE; - break; - case BrowserType.Opera: - extensionLink = constants.URL_METAMASK_OPERA_STORE; - break; - default: - extensionLink = constants.URL_METAMASK_HOMEPAGE; - } - } - return ( - } - style={props.isExternallyInjectedProvider ? styles.button : { ...styles.button, ...styles.hrefAdjustment }} - href={extensionLink} - target={props.isExternallyInjectedProvider ? undefined : '_blank'} - disabled={props.isExternallyInjectedProvider} - /> - ); -}; -- cgit From ed559be47cb70a8a5de4f4eb766e1bfd67bf0141 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 27 Jun 2018 15:19:22 -0700 Subject: Change learn how to update your account styling --- packages/website/ts/components/portal/portal.tsx | 44 +++++++++--------------- 1 file changed, 17 insertions(+), 27 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 438c7b52f..d36ec99b0 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -1,7 +1,7 @@ import { colors, constants as sharedConstants } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; -import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; +import Help from 'material-ui/svg-icons/action/help'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; import { Route, RouteComponentProps, Switch } from 'react-router-dom'; @@ -319,14 +319,13 @@ export class Portal extends React.Component { ); } private _renderWallet(): React.ReactNode { - const startOnboarding = this._renderStartOnboarding(); const isMobile = utils.isMobile(this.props.screenWidth); // We need room to scroll down for mobile onboarding const marginBottom = isMobile ? '200px' : '15px'; return (
- {isMobile && {startOnboarding}} + {isMobile && {this._renderStartOnboarding()}} { refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)} /> - {!isMobile && {startOnboarding}} + {!isMobile && {this._renderStartOnboarding()}} { } private _renderStartOnboarding(): React.ReactNode { return ( - - - - - Learn how to set up your account - - - + + + + Learn how to set up your account + + ); } @@ -535,11 +521,15 @@ export class Portal extends React.Component { ); } private _renderRelayerIndexSection(): React.ReactNode { + return
} body={this._renderRelayerIndex()} />; + } + private _renderRelayerIndex(): React.ReactNode { + const isMobile = utils.isMobile(this.props.screenWidth); return ( -
} - body={} - /> +
+ {isMobile && {this._renderStartOnboarding()}} + +
); } private _renderNotFoundMessage(): React.ReactNode { -- cgit From 1a11283086d0c95e10f40dfe3f826bc04889dbcb Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 27 Jun 2018 16:23:37 -0700 Subject: Fix body overlay on mobile --- packages/website/ts/components/wallet/body_overlay.tsx | 1 - packages/website/ts/components/wallet/wallet.tsx | 5 +++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx index 8f8899a92..38820c840 100644 --- a/packages/website/ts/components/wallet/body_overlay.tsx +++ b/packages/website/ts/components/wallet/body_overlay.tsx @@ -83,7 +83,6 @@ const PlainLockedOverlay: React.StatelessComponent = ({ const LockedOverlay = styled(PlainLockedOverlay)` background: rgba(255, 248, 242, 0.8); border: 1px solid #f68c24; - box-sizing: border-box; border-radius: 10px; `; diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index febb526d7..1c2ce19b0 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -123,6 +123,7 @@ const styles: Styles = { bodyInnerDiv: { overflow: 'auto', WebkitOverflowScrolling: 'touch', + position: 'relative', }, manageYourWalletText: { color: colors.mediumBlue, @@ -141,7 +142,7 @@ const USD_DECIMAL_PLACES = 2; const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56; const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`; const PLACEHOLDER_COLOR = colors.grey300; -const LOADING_ROWS_COUNT = 5; +const LOADING_ROWS_COUNT = 6; const ActionButton = styled(FloatingActionButton)` button { @@ -190,7 +191,7 @@ export class Wallet extends React.Component { } private _renderLoadingBodyRows(): React.ReactElement<{}> { const bodyStyle = this._getBodyStyle(); - const loadingRowsRange = _.range(LOADING_ROWS_COUNT + 1); + const loadingRowsRange = _.range(LOADING_ROWS_COUNT); return (
{_.map(loadingRowsRange, index => { -- cgit From 0ff18058ab495a15f13dbb41903d04a66ebb1467 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 27 Jun 2018 16:28:14 -0700 Subject: Get rid of unused stuff in wallet --- packages/website/ts/components/wallet/wallet.tsx | 66 +----------------------- 1 file changed, 1 insertion(+), 65 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 1c2ce19b0..b316a093c 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -87,15 +87,6 @@ interface AccessoryItemConfig { } const styles: Styles = { - root: { - width: '100%', - }, - footerItemInnerDiv: { - paddingLeft: 24, - borderTopColor: colors.walletBorder, - borderTopStyle: 'solid', - borderWidth: 1, - }, borderedItem: { borderBottomColor: colors.walletBorder, borderBottomStyle: 'solid', @@ -116,27 +107,17 @@ const styles: Styles = { color: colors.darkGrey, fontSize: 14, }, - paddedItem: { - paddingTop: 8, - paddingBottom: 8, - }, bodyInnerDiv: { overflow: 'auto', WebkitOverflowScrolling: 'touch', position: 'relative', }, - manageYourWalletText: { - color: colors.mediumBlue, - fontWeight: 'bold', - }, }; const ETHER_ICON_PATH = '/images/ether.png'; const ICON_DIMENSION = 28; const BODY_ITEM_KEY = 'BODY'; const HEADER_ITEM_KEY = 'HEADER'; -const FOOTER_ITEM_KEY = 'FOOTER'; -const DISCONNECTED_ITEM_KEY = 'DISCONNECTED'; const ETHER_ITEM_KEY = 'ETHER'; const USD_DECIMAL_PLACES = 2; const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56; @@ -178,7 +159,7 @@ export class Wallet extends React.Component { public render(): React.ReactNode { const isBlockchainLoaded = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError; return ( - + {isBlockchainLoaded ? this._renderLoadedRows() : this._renderLoadingRows()} ); @@ -309,51 +290,6 @@ export class Wallet extends React.Component { isHoveringSidebar: false, }); } - private _renderFooterRows(): React.ReactElement<{}> { - return ( -
- - - - - - - -
- add/remove tokens -
-
- } - disabled={true} - innerDivStyle={styles.footerItemInnerDiv} - style={styles.borderedItem} - /> - {this.props.location.pathname !== ACCOUNT_PATH && ( - - - manage your wallet -
- // https://github.com/palantir/tslint-react/issues/140 - // tslint:disable-next-line:jsx-curly-spacing - } - style={{ ...styles.paddedItem, ...styles.borderedItem }} - /> - - )} -
- ); - } private _renderEthRows(): React.ReactNode { const icon = ; const primaryText = this._renderAmount( -- cgit From 67007455851630d05b9c07108a3e545724e07690 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 27 Jun 2018 16:33:09 -0700 Subject: Fix typo --- packages/website/ts/components/wallet/body_overlay.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx index 38820c840..41e64de8b 100644 --- a/packages/website/ts/components/wallet/body_overlay.tsx +++ b/packages/website/ts/components/wallet/body_overlay.tsx @@ -137,7 +137,7 @@ const GetMetaMask = () => { - Get Metamask Wallet + Get MetaMask Wallet -- cgit From 3315006c459d49d5cb412743bf190dbeda4ad5fa Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 27 Jun 2018 17:04:20 -0700 Subject: Fix learn how to set up account layout --- packages/website/ts/components/portal/portal.tsx | 20 +++++++++++--------- packages/website/ts/components/portal/section.tsx | 4 ++-- 2 files changed, 13 insertions(+), 11 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index d36ec99b0..a9396b83f 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -324,9 +324,9 @@ export class Portal extends React.Component { const marginBottom = isMobile ? '200px' : '15px'; return (
- + {isMobile && {this._renderStartOnboarding()}} - + { refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)} /> - {!isMobile && {this._renderStartOnboarding()}} + {!isMobile && {this._renderStartOnboarding()}} { } private _renderStartOnboarding(): React.ReactNode { return ( - + - - Learn how to set up your account - + + + Learn how to set up your account + + ); } @@ -526,10 +528,10 @@ export class Portal extends React.Component { private _renderRelayerIndex(): React.ReactNode { const isMobile = utils.isMobile(this.props.screenWidth); return ( -
+ {isMobile && {this._renderStartOnboarding()}} -
+ ); } private _renderNotFoundMessage(): React.ReactNode { diff --git a/packages/website/ts/components/portal/section.tsx b/packages/website/ts/components/portal/section.tsx index 455ed07c9..b6c9fd098 100644 --- a/packages/website/ts/components/portal/section.tsx +++ b/packages/website/ts/components/portal/section.tsx @@ -6,9 +6,9 @@ export interface SectionProps { } export const Section = (props: SectionProps) => { return ( -
+
{props.header} -
{props.body}
+ {props.body}
); }; -- cgit From 172d2353dd7d2056d925e1a05d037ea8744c47da Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 27 Jun 2018 17:23:21 -0700 Subject: Start onboarding from relayer index --- packages/website/ts/components/portal/portal.tsx | 26 ++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index a9396b83f..ef02a8f71 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -4,7 +4,7 @@ import * as _ from 'lodash'; import Help from 'material-ui/svg-icons/action/help'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; -import { Route, RouteComponentProps, Switch } from 'react-router-dom'; +import { Link, Route, RouteComponentProps, Switch } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog'; @@ -155,6 +155,12 @@ export class Portal extends React.Component { // tslint:disable-next-line:no-floating-promises this._fetchBalancesAndAllowancesAsync(this._getCurrentTrackedTokensAddresses()); } + if (!prevProps.isPortalOnboardingShowing && this.props.isPortalOnboardingShowing) { + // On mobile, make sure the wallet is completely visible. + if (this.props.screenWidth === ScreenWidths.Sm) { + document.querySelector('.wallet').scrollIntoView(); + } + } } public componentWillReceiveProps(nextProps: PortalProps): void { if (nextProps.networkId !== this.state.prevNetworkId) { @@ -365,7 +371,9 @@ export class Portal extends React.Component { ); } private _renderStartOnboarding(): React.ReactNode { - return ( + const isMobile = utils.isMobile(this.props.screenWidth); + const shouldStartOnboarding = !isMobile || this.props.location.pathname === `${WebsitePaths.Portal}/account`; + const startOnboarding = ( @@ -375,16 +383,22 @@ export class Portal extends React.Component { ); + return !shouldStartOnboarding ? ( + + {startOnboarding} + + ) : ( + startOnboarding + ); } private _startOnboarding(): void { const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId]; analytics.logEvent('Portal', 'Onboarding Started - Manual', networkName, this.props.portalOnboardingStep); this.props.dispatcher.updatePortalOnboardingShowing(true); - // On mobile, make sure the wallet is completely visible. - if (this.props.screenWidth === ScreenWidths.Sm) { - document.querySelector('.wallet').scrollIntoView(); - } } private _renderWalletSection(): React.ReactNode { return
} body={this._renderWallet()} />; -- cgit From 81ff99276bec5420fd3822925e63b6ed60510b1c Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 28 Jun 2018 23:03:30 -0700 Subject: Fix scrollbar bug --- packages/website/ts/components/wallet/wallet.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index b316a093c..9c805e62e 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -274,7 +274,7 @@ export class Wallet extends React.Component { private _getBodyStyle(): React.CSSProperties { return { ...styles.bodyInnerDiv, - overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', + overflowY: this.state.isHoveringSidebar ? 'scroll' : 'hidden', marginRight: this.state.isHoveringSidebar ? 0 : 4, // TODO: make this completely responsive maxHeight: this.props.screenWidth !== ScreenWidths.Sm ? 475 : undefined, -- cgit From 08f7666d210317d8caaca72f5a81c860478a2387 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 28 Jun 2018 23:24:57 -0700 Subject: Create AccountConnection component --- .../ts/components/top_bar/provider_display.tsx | 26 +++----------- .../ts/components/ui/account_connection.tsx | 40 ++++++++++++++++++++++ packages/website/ts/components/wallet/wallet.tsx | 26 ++++++++------ 3 files changed, 61 insertions(+), 31 deletions(-) create mode 100644 packages/website/ts/components/ui/account_connection.tsx (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 24fbb45ec..613da4356 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -8,6 +8,7 @@ import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; import { ProviderPicker } from 'ts/components/top_bar/provider_picker'; +import { AccountConnection } from 'ts/components/ui/account_connection'; import { Circle } from 'ts/components/ui/circle'; import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; @@ -189,16 +190,11 @@ export class ProviderDisplay extends React.Component - - - - {this.props.injectedProviderName} - - - + ); case AccountState.Disconnected: case AccountState.Loading: @@ -206,18 +202,6 @@ export class ProviderDisplay extends React.Component = ({ + accountState, + injectedProviderName, +}) => { + return ( + + + + + {injectedProviderName} + + + + ); +}; + +function getInjectedProviderColor(accountState: AccountState): string { + switch (accountState) { + case AccountState.Ready: + return colors.limeGreen; + case AccountState.Locked: + case AccountState.Loading: + case AccountState.Disconnected: + default: + return colors.red; + } +} diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 9c805e62e..348800717 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -19,6 +19,7 @@ import { Link } from 'react-router-dom'; import firstBy = require('thenby'); import { Blockchain } from 'ts/blockchain'; +import { AccountConnection } from 'ts/components/ui/account_connection'; import { Circle } from 'ts/components/ui/circle'; import { Container } from 'ts/components/ui/container'; import { IconButton } from 'ts/components/ui/icon_button'; @@ -33,6 +34,7 @@ import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; import { + AccountState, BlockchainErrs, ProviderType, ScreenWidths, @@ -157,10 +159,9 @@ export class Wallet extends React.Component { } } public render(): React.ReactNode { - const isBlockchainLoaded = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError; return ( - {isBlockchainLoaded ? this._renderLoadedRows() : this._renderLoadingRows()} + {this._isBlockchainReady() ? this._renderLoadedRows() : this._renderLoadingRows()} ); } @@ -232,19 +233,13 @@ export class Wallet extends React.Component { } private _renderConnectedHeaderRows(): React.ReactElement<{}> { const userAddress = this.props.userAddress; + const accountState = this._getAccountState(); const main = (
{utils.getAddressBeginAndEnd(userAddress)} - - - - - {this.props.injectedProviderName} - - - +
); return ( @@ -535,6 +530,17 @@ export class Wallet extends React.Component { private _getEthToken(): Token { return utils.getEthToken(this.props.tokenByAddress); } + private _isBlockchainReady(): boolean { + return this.props.blockchainIsLoaded && !_.isUndefined(this.props.blockchain); + } + private _getAccountState(): AccountState { + return utils.getAccountState( + this._isBlockchainReady(), + this.props.providerType, + this.props.injectedProviderName, + this.props.userAddress, + ); + } } interface StandardIconRowProps { -- cgit From 0b5a49c17dde87130a659e4101bd6e2f5666b9c7 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 28 Jun 2018 23:31:17 -0700 Subject: Remove some hardcoded MetaMask colors --- packages/website/ts/components/wallet/body_overlay.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx index 41e64de8b..5ced704f9 100644 --- a/packages/website/ts/components/wallet/body_overlay.tsx +++ b/packages/website/ts/components/wallet/body_overlay.tsx @@ -72,7 +72,7 @@ const PlainLockedOverlay: React.StatelessComponent = ({ > - + Please Unlock MetaMask @@ -81,8 +81,8 @@ const PlainLockedOverlay: React.StatelessComponent = ({
); const LockedOverlay = styled(PlainLockedOverlay)` - background: rgba(255, 248, 242, 0.8); - border: 1px solid #f68c24; + background: ${colors.metaMaskTransparentOrange}; + border: 1px solid ${colors.metaMaskOrange}; border-radius: 10px; `; -- cgit From aedd51a61bcc9ecef660c1bea1641c0400f3ac45 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 29 Jun 2018 00:59:24 -0700 Subject: Refactor inline styles out of Wallet --- .../ts/components/wallet/null_token_row.tsx | 41 ++++++ .../website/ts/components/wallet/placeholder.tsx | 26 ++++ .../ts/components/wallet/standard_icon_row.tsx | 44 ++++++ packages/website/ts/components/wallet/wallet.tsx | 148 ++++----------------- .../ts/components/wallet/wrap_ether_item.tsx | 3 +- 5 files changed, 139 insertions(+), 123 deletions(-) create mode 100644 packages/website/ts/components/wallet/null_token_row.tsx create mode 100644 packages/website/ts/components/wallet/placeholder.tsx create mode 100644 packages/website/ts/components/wallet/standard_icon_row.tsx (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/wallet/null_token_row.tsx b/packages/website/ts/components/wallet/null_token_row.tsx new file mode 100644 index 000000000..c8b4e67d0 --- /dev/null +++ b/packages/website/ts/components/wallet/null_token_row.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; + +import { Circle } from 'ts/components/ui/circle'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { PlaceHolder } from 'ts/components/wallet/placeholder'; +import { StandardIconRow } from 'ts/components/wallet/standard_icon_row'; +import { colors } from 'ts/style/colors'; + +export interface NullTokenRowProps { + iconDimension: number; + fillColor: string; +} + +export const NullTokenRow: React.StatelessComponent = ({ iconDimension, fillColor }) => { + const icon = ; + const main = ( +
+ + + 0.00 XXX + + + + + + 0.00 + + + +
+ ); + const accessory = ( + + + + + + ); + return ; +}; diff --git a/packages/website/ts/components/wallet/placeholder.tsx b/packages/website/ts/components/wallet/placeholder.tsx new file mode 100644 index 000000000..aca46014b --- /dev/null +++ b/packages/website/ts/components/wallet/placeholder.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; + +import { colors } from 'ts/style/colors'; +import { styled } from 'ts/style/theme'; + +export interface PlaceHolderProps { + className?: string; + hideChildren: React.ReactNode; + fillColor: string; +} + +const PlainPlaceHolder: React.StatelessComponent = ({ className, hideChildren, children }) => { + const childrenVisibility = hideChildren ? 'hidden' : 'visible'; + const childrenStyle: React.CSSProperties = { visibility: childrenVisibility }; + return ( +
+
{children}
+
+ ); +}; + +export const PlaceHolder = styled(PlainPlaceHolder)` + background-color: ${props => (props.hideChildren ? props.fillColor : 'transparent')}; + display: inline-block; + border-radius: 2px; +`; diff --git a/packages/website/ts/components/wallet/standard_icon_row.tsx b/packages/website/ts/components/wallet/standard_icon_row.tsx new file mode 100644 index 000000000..1a2ec021b --- /dev/null +++ b/packages/website/ts/components/wallet/standard_icon_row.tsx @@ -0,0 +1,44 @@ +import * as React from 'react'; + +import { colors } from 'ts/style/colors'; +import { styled } from 'ts/style/theme'; + +export interface StandardIconRowProps { + className?: string; + icon: React.ReactNode; + main: React.ReactNode; + accessory?: React.ReactNode; + minHeight?: string; + borderBottomColor?: string; + borderBottomStyle?: string; + borderWidth?: string; + backgroundColor?: string; +} +const PlainStandardIconRow: React.StatelessComponent = ({ className, icon, main, accessory }) => { + return ( +
+
{icon}
+
{main}
+
+
{accessory}
+
+ ); +}; + +export const StandardIconRow = styled(PlainStandardIconRow)` + min-height: ${props => props.minHeight}; + border-bottom-color: ${props => props.borderBottomColor}; + border-bottom-style: ${props => props.borderBottomStyle}; + border-width: ${props => props.borderWidth}; + background-color: ${props => props.backgroundColor}; +`; + +StandardIconRow.defaultProps = { + minHeight: '85px', + borderBottomColor: colors.walletBorder, + borderBottomStyle: 'solid', + borderWidth: '1px', + backgroundColor: colors.walletDefaultItemBackground, +}; + +StandardIconRow.displayName = 'StandardIconRow'; diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 348800717..ee8ca8aeb 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -1,9 +1,4 @@ -import { - constants as sharedConstants, - EtherscanLinkSuffixes, - Styles, - utils as sharedUtils, -} from '@0xproject/react-shared'; +import { constants as sharedConstants, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; import { BigNumber, errorUtils } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; @@ -28,6 +23,9 @@ import { Island } from 'ts/components/ui/island'; import { Text } from 'ts/components/ui/text'; import { TokenIcon } from 'ts/components/ui/token_icon'; import { BodyOverlay } from 'ts/components/wallet/body_overlay'; +import { NullTokenRow } from 'ts/components/wallet/null_token_row'; +import { PlaceHolder } from 'ts/components/wallet/placeholder'; +import { StandardIconRow } from 'ts/components/wallet/standard_icon_row'; import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { Dispatcher } from 'ts/redux/dispatcher'; @@ -48,7 +46,6 @@ import { import { analytics } from 'ts/utils/analytics'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; -import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles'; export interface WalletProps { userAddress: string; @@ -88,34 +85,6 @@ interface AccessoryItemConfig { allowanceToggleConfig?: AllowanceToggleConfig; } -const styles: Styles = { - borderedItem: { - borderBottomColor: colors.walletBorder, - borderBottomStyle: 'solid', - borderWidth: 1, - }, - tokenItem: { - backgroundColor: colors.walletDefaultItemBackground, - minHeight: 85, - }, - headerItem: { - minHeight: 60, - }, - amountLabel: { - fontWeight: 'bold', - color: colors.black, - }, - valueLabel: { - color: colors.darkGrey, - fontSize: 14, - }, - bodyInnerDiv: { - overflow: 'auto', - WebkitOverflowScrolling: 'touch', - position: 'relative', - }, -}; - const ETHER_ICON_PATH = '/images/ether.png'; const ICON_DIMENSION = 28; const BODY_ITEM_KEY = 'BODY'; @@ -177,7 +146,7 @@ export class Wallet extends React.Component { return (
{_.map(loadingRowsRange, index => { - return ; + return ; })} { // https://github.com/palantir/tslint-react/issues/140 // tslint:disable-next-line:jsx-curly-spacing } - style={{ ...styles.borderedItem, ...styles.headerItem }} + minHeight="60px" + backgroundColor={colors.white} /> ); } @@ -247,7 +217,8 @@ export class Wallet extends React.Component { } main={main} - style={{ ...styles.borderedItem, ...styles.headerItem }} + minHeight="60px" + backgroundColor={colors.white} /> ); @@ -268,7 +239,9 @@ export class Wallet extends React.Component { } private _getBodyStyle(): React.CSSProperties { return { - ...styles.bodyInnerDiv, + overflow: 'auto', + WebkitOverflowScrolling: 'touch', + position: 'relative', overflowY: this.state.isHoveringSidebar ? 'scroll' : 'hidden', marginRight: this.state.isHoveringSidebar ? 0 : 4, // TODO: make this completely responsive @@ -306,7 +279,7 @@ export class Wallet extends React.Component { wrappedEtherDirection: Side.Deposit, }; const key = ETHER_ITEM_KEY; - return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, false, 'eth-row'); + return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, 'eth-row'); } private _renderTokenRows(): React.ReactNode { const trackedTokens = this.props.trackedTokens; @@ -352,7 +325,6 @@ export class Wallet extends React.Component { primaryText, secondaryText, accessoryItemConfig, - isLastRow, isWeth ? 'weth-row' : undefined, ); } @@ -362,20 +334,12 @@ export class Wallet extends React.Component { primaryText: React.ReactNode, secondaryText: React.ReactNode, accessoryItemConfig: AccessoryItemConfig, - isLastRow: boolean, className?: string, ): React.ReactNode { const shouldShowWrapEtherItem = !_.isUndefined(this.state.wrappedEtherDirection) && this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection && !_.isUndefined(this.props.userEtherBalanceInWei); - let additionalStyle; - if (shouldShowWrapEtherItem) { - additionalStyle = walletItemStyles.focusedItem; - } else if (!isLastRow) { - additionalStyle = styles.borderedItem; - } - const style = { ...styles.tokenItem, ...additionalStyle }; const etherToken = this._getEthToken(); return (
@@ -388,7 +352,7 @@ export class Wallet extends React.Component {
} accessory={this._renderAccessoryItems(accessoryItemConfig)} - style={style} + backgroundColor={shouldShowWrapEtherItem ? colors.walletFocusedItemBackground : undefined} /> {shouldShowWrapEtherItem && ( { ): React.ReactNode { if (isLoading) { return ( - -
0.00 XXX
+ + + 0.00 XXX + ); } else { const result = utils.getFormattedAmount(amount, decimals, symbol); - return
{result}
; + return ( + + {result} + + ); } } private _renderValue( @@ -476,8 +446,10 @@ export class Wallet extends React.Component { result = '$0.00'; } return ( - -
{result}
+ + + {result} + ); } @@ -543,70 +515,4 @@ export class Wallet extends React.Component { } } -interface StandardIconRowProps { - icon: React.ReactNode; - main: React.ReactNode; - accessory?: React.ReactNode; - style?: React.CSSProperties; -} -const StandardIconRow = (props: StandardIconRowProps) => { - return ( -
-
{props.icon}
-
{props.main}
-
-
{props.accessory}
-
- ); -}; -interface PlaceHolderProps { - hideChildren: React.ReactNode; - children?: React.ReactNode; -} -const PlaceHolder = (props: PlaceHolderProps) => { - const rootBackgroundColor = props.hideChildren ? PLACEHOLDER_COLOR : 'transparent'; - const rootStyle: React.CSSProperties = { - backgroundColor: rootBackgroundColor, - display: 'inline-block', - borderRadius: 2, - }; - const childrenVisibility = props.hideChildren ? 'hidden' : 'visible'; - const childrenStyle: React.CSSProperties = { visibility: childrenVisibility }; - return ( -
-
{props.children}
-
- ); -}; - -const NullTokenRow = () => { - const icon = ; - const main = ( -
- -
0.00 XXX
- - - -
0.00
- - -
- ); - const accessory = ( - - - - - - ); - return ( - - ); -}; // tslint:disable:max-file-line-count diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx index d6135ce4d..f6d1a9a35 100644 --- a/packages/website/ts/components/wallet/wrap_ether_item.tsx +++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx @@ -15,7 +15,6 @@ import { analytics } from 'ts/utils/analytics'; import { constants } from 'ts/utils/constants'; import { errorReporter } from 'ts/utils/error_reporter'; import { utils } from 'ts/utils/utils'; -import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles'; export interface WrapEtherItemProps { userAddress: string; @@ -95,7 +94,7 @@ export class WrapEtherItem extends React.Component +
{this._renderIsEthConversionHappeningSpinner()}
{topLabelText}
-- cgit From 2b5f45676f4c8e478b9de82a6313eb727d8845ff Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 29 Jun 2018 01:07:50 -0700 Subject: Remove unused imports and variables --- packages/website/ts/components/portal/portal.tsx | 1 - .../website/ts/components/top_bar/provider_display.tsx | 2 -- packages/website/ts/components/ui/identicon.tsx | 1 - packages/website/ts/components/wallet/placeholder.tsx | 1 - packages/website/ts/components/wallet/wallet.tsx | 16 +--------------- 5 files changed, 1 insertion(+), 20 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index ef02a8f71..6da41e64b 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -24,7 +24,6 @@ import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar'; import { TradeHistory } from 'ts/components/trade_history/trade_history'; import { Container } from 'ts/components/ui/container'; import { FlashMessage } from 'ts/components/ui/flash_message'; -import { Island } from 'ts/components/ui/island'; import { Text } from 'ts/components/ui/text'; import { Wallet } from 'ts/components/wallet/wallet'; import { GenerateOrderForm } from 'ts/containers/generate_order_form'; diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 613da4356..8743e4320 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -9,11 +9,9 @@ import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; import { ProviderPicker } from 'ts/components/top_bar/provider_picker'; import { AccountConnection } from 'ts/components/ui/account_connection'; -import { Circle } from 'ts/components/ui/circle'; import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; import { Identicon } from 'ts/components/ui/identicon'; -import { Image } from 'ts/components/ui/image'; import { Island } from 'ts/components/ui/island'; import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; diff --git a/packages/website/ts/components/ui/identicon.tsx b/packages/website/ts/components/ui/identicon.tsx index d8036f0c1..b5b374973 100644 --- a/packages/website/ts/components/ui/identicon.tsx +++ b/packages/website/ts/components/ui/identicon.tsx @@ -21,7 +21,6 @@ export class Identicon extends React.Component { public render(): React.ReactNode { const address = this.props.address; const diameter = this.props.diameter; - const radius = diameter / 2; return (
{ public static defaultProps = { style: {}, @@ -290,7 +277,7 @@ export class Wallet extends React.Component { ); return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this)); } - private _renderTokenRow(token: Token, index: number): React.ReactNode { + private _renderTokenRow(token: Token): React.ReactNode { const tokenState = this.props.trackedTokenStateByAddress[token.address]; if (_.isUndefined(tokenState)) { return null; @@ -318,7 +305,6 @@ export class Wallet extends React.Component { }, }; const key = token.address; - const isLastRow = index === this.props.trackedTokens.length - 1; return this._renderBalanceRow( key, icon, -- cgit From f89acb49be50ad6d9814dafb580b28722d9a161a Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 29 Jun 2018 01:11:02 -0700 Subject: Add dollar sign to NullTokenRow --- packages/website/ts/components/wallet/null_token_row.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/wallet/null_token_row.tsx b/packages/website/ts/components/wallet/null_token_row.tsx index c8b4e67d0..a1ec9871a 100644 --- a/packages/website/ts/components/wallet/null_token_row.tsx +++ b/packages/website/ts/components/wallet/null_token_row.tsx @@ -24,7 +24,7 @@ export const NullTokenRow: React.StatelessComponent = ({ icon - 0.00 + $0.00 -- cgit From 03bc7bb935c71106dd3c5b577d08ca3b12977e5f Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 29 Jun 2018 11:55:00 -0700 Subject: Move wallet scrollIntoView into PortalOnboardingFlow --- .../website/ts/components/onboarding/portal_onboarding_flow.tsx | 8 +++++++- packages/website/ts/components/portal/portal.tsx | 6 ------ 2 files changed, 7 insertions(+), 7 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 296b410fe..ccc8d9e86 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -47,8 +47,14 @@ class PlainPortalOnboardingFlow extends React.Component { // tslint:disable-next-line:no-floating-promises this._fetchBalancesAndAllowancesAsync(this._getCurrentTrackedTokensAddresses()); } - if (!prevProps.isPortalOnboardingShowing && this.props.isPortalOnboardingShowing) { - // On mobile, make sure the wallet is completely visible. - if (this.props.screenWidth === ScreenWidths.Sm) { - document.querySelector('.wallet').scrollIntoView(); - } - } } public componentWillReceiveProps(nextProps: PortalProps): void { if (nextProps.networkId !== this.state.prevNetworkId) { -- cgit From ddec01e6c1d9cfeaf5b01278b1b796644705433b Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 29 Jun 2018 11:56:31 -0700 Subject: Change function to a const --- packages/website/ts/components/ui/account_connection.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/ui/account_connection.tsx b/packages/website/ts/components/ui/account_connection.tsx index 0f61ecde4..6d0b90922 100644 --- a/packages/website/ts/components/ui/account_connection.tsx +++ b/packages/website/ts/components/ui/account_connection.tsx @@ -27,7 +27,7 @@ export const AccountConnection: React.StatelessComponent ); }; -function getInjectedProviderColor(accountState: AccountState): string { +const getInjectedProviderColor = (accountState: AccountState) => { switch (accountState) { case AccountState.Ready: return colors.limeGreen; @@ -37,4 +37,4 @@ function getInjectedProviderColor(accountState: AccountState): string { default: return colors.red; } -} +}; -- cgit