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 --- packages/website/ts/components/wallet/wallet.tsx | 101 +++++++++++++++++------ 1 file changed, 77 insertions(+), 24 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 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/wallet') 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 --- 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 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/wallet') 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/wallet') 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 --- .../website/ts/components/wallet/body_overlay.tsx | 147 +++++++++++++++++++++ packages/website/ts/components/wallet/wallet.tsx | 20 +++ 2 files changed, 167 insertions(+) create mode 100644 packages/website/ts/components/wallet/body_overlay.tsx (limited to 'packages/website/ts/components/wallet') 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/wallet') 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 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/wallet') 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/wallet') 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/wallet') 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 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/wallet') 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 --- packages/website/ts/components/wallet/wallet.tsx | 26 +++++++++++++++--------- 1 file changed, 16 insertions(+), 10 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 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/wallet') 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/wallet') 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/wallet/placeholder.tsx | 1 - packages/website/ts/components/wallet/wallet.tsx | 16 +--------------- 2 files changed, 1 insertion(+), 16 deletions(-) (limited to 'packages/website/ts/components/wallet') diff --git a/packages/website/ts/components/wallet/placeholder.tsx b/packages/website/ts/components/wallet/placeholder.tsx index aca46014b..bf40d2ea8 100644 --- a/packages/website/ts/components/wallet/placeholder.tsx +++ b/packages/website/ts/components/wallet/placeholder.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; export interface PlaceHolderProps { diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index ee8ca8aeb..ad6faff8d 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -2,20 +2,14 @@ import { constants as sharedConstants, EtherscanLinkSuffixes, utils as sharedUti import { BigNumber, errorUtils } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; -import CircularProgress from 'material-ui/CircularProgress'; -import FloatingActionButton from 'material-ui/FloatingActionButton'; -import { ListItem } from 'material-ui/List'; import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; -import ContentAdd from 'material-ui/svg-icons/content/add'; -import ContentRemove from 'material-ui/svg-icons/content/remove'; import * as React from 'react'; 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'; import { Identicon } from 'ts/components/ui/identicon'; @@ -30,7 +24,6 @@ import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; -import { styled } from 'ts/style/theme'; import { AccountState, BlockchainErrs, @@ -96,12 +89,6 @@ const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`; const PLACEHOLDER_COLOR = colors.grey300; const LOADING_ROWS_COUNT = 6; -const ActionButton = styled(FloatingActionButton)` - button { - position: static !important; - } -`; - export class Wallet extends React.Component { 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/wallet') 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