diff options
Diffstat (limited to 'packages/website/ts')
17 files changed, 289 insertions, 81 deletions
diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx index 48c7f9f57..d61dfa87d 100644 --- a/packages/website/ts/components/inputs/allowance_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_toggle.tsx @@ -1,4 +1,4 @@ -import { colors, constants as sharedConstants, Styles } from '@0xproject/react-shared'; +import { constants as sharedConstants, Styles } from '@0xproject/react-shared'; import { BigNumber, logUtils } from '@0xproject/utils'; import * as _ from 'lodash'; import Toggle from 'material-ui/Toggle'; @@ -7,6 +7,7 @@ import { Blockchain } from 'ts/blockchain'; import { Dispatcher } from 'ts/redux/dispatcher'; import { BalanceErrs, Token, TokenState } from 'ts/types'; import { analytics } from 'ts/utils/analytics'; +import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; import { errorReporter } from 'ts/utils/error_reporter'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx index 68934f88e..48858613c 100644 --- a/packages/website/ts/components/portal/back_button.tsx +++ b/packages/website/ts/components/portal/back_button.tsx @@ -1,7 +1,9 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { Styles } from '@0xproject/react-shared'; import * as React from 'react'; import { Link } from 'react-router-dom'; +import { colors } from 'ts/utils/colors'; + export interface BackButtonProps { to: string; labelText: string; diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx new file mode 100644 index 000000000..75c8ac6c2 --- /dev/null +++ b/packages/website/ts/components/portal/drawer_menu.tsx @@ -0,0 +1,68 @@ +import { Styles } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +import { defaultMenuItemEntries, Menu } from 'ts/components/portal/menu'; +import { Identicon } from 'ts/components/ui/identicon'; +import { WebsitePaths } from 'ts/types'; +import { colors } from 'ts/utils/colors'; +import { utils } from 'ts/utils/utils'; + +const IDENTICON_DIAMETER = 45; +const BORDER_RADIUS = '50%'; + +const styles: Styles = { + root: { + backgroundColor: colors.drawerMenuBackground, + width: '100%', + height: '100%', + }, + identicon: { + borderWidth: 3, + borderStyle: 'solid', + borderColor: colors.white, + borderRadius: BORDER_RADIUS, + MozBorderRadius: BORDER_RADIUS, + WebkitBorderRadius: BORDER_RADIUS, + }, + userAddress: { + color: colors.white, + }, +}; + +export interface DrawerMenuProps { + selectedPath?: string; + userAddress?: string; +} +export const DrawerMenu = (props: DrawerMenuProps) => { + const relayerItemEntry = { + to: `${WebsitePaths.Portal}/`, + labelText: 'Relayer ecosystem', + iconName: 'zmdi-portable-wifi', + }; + const menuItemEntries = _.concat(relayerItemEntry, defaultMenuItemEntries); + return ( + <div style={styles.root}> + <Header userAddress={props.userAddress} /> + <Menu selectedPath={props.selectedPath} menuItemEntries={menuItemEntries} /> + </div> + ); +}; + +interface HeaderProps { + userAddress?: string; +} +const Header = (props: HeaderProps) => { + return ( + <div className="flex flex-center py4"> + <div className="flex flex-column mx-auto"> + <Identicon address={props.userAddress} diameter={IDENTICON_DIAMETER} style={styles.identicon} /> + {!_.isUndefined(props.userAddress) && ( + <div className="pt2" style={styles.userAddress}> + {utils.getAddressBeginAndEnd(props.userAddress)} + </div> + )} + </div> + </div> + ); +}; diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx index 9014d8d42..e8353a3b0 100644 --- a/packages/website/ts/components/portal/menu.tsx +++ b/packages/website/ts/components/portal/menu.tsx @@ -1,21 +1,32 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { MenuItem } from 'ts/components/ui/menu_item'; import { Environments, WebsitePaths } from 'ts/types'; +import { colors } from 'ts/utils/colors'; import { configs } from 'ts/utils/configs'; -export interface MenuProps { - selectedPath?: string; +export interface MenuTheme { + paddingLeft: number; + textColor: string; + iconColor: string; + selectedIconColor: string; + selectedBackgroundColor: string; } -interface MenuItemEntry { +export interface MenuItemEntry { to: string; labelText: string; iconName: string; } -const menuItemEntries: MenuItemEntry[] = [ +export interface MenuProps { + selectedPath?: string; + theme?: MenuTheme; + menuItemEntries?: MenuItemEntry[]; +} + +export const defaultMenuItemEntries: MenuItemEntry[] = [ { to: `${WebsitePaths.Portal}/account`, labelText: 'Account overview', @@ -38,49 +49,66 @@ const menuItemEntries: MenuItemEntry[] = [ }, ]; -const DEFAULT_LABEL_COLOR = colors.darkerGrey; -const DEFAULT_ICON_COLOR = colors.darkerGrey; -const SELECTED_ICON_COLOR = colors.yellow900; - -const LEFT_PADDING = 185; +const DEFAULT_MENU_THEME: MenuTheme = { + paddingLeft: 30, + textColor: colors.white, + iconColor: colors.white, + selectedIconColor: colors.white, + selectedBackgroundColor: colors.menuItemDefaultSelectedBackground, +}; export const Menu: React.StatelessComponent<MenuProps> = (props: MenuProps) => { return ( - <div style={{ paddingLeft: LEFT_PADDING }}> - {_.map(menuItemEntries, entry => { + <div> + {_.map(props.menuItemEntries, entry => { const selected = entry.to === props.selectedPath; return ( - <MenuItem key={entry.to} className="py2" to={entry.to}> - <MenuItemLabel title={entry.labelText} iconName={entry.iconName} selected={selected} /> + <MenuItem key={entry.to} to={entry.to}> + <MenuItemLabel + title={entry.labelText} + iconName={entry.iconName} + selected={selected} + theme={props.theme} + /> </MenuItem> ); })} </div> ); }; +Menu.defaultProps = { + theme: DEFAULT_MENU_THEME, + menuItemEntries: defaultMenuItemEntries, +}; interface MenuItemLabelProps { title: string; iconName: string; selected: boolean; + theme: MenuTheme; } const MenuItemLabel: React.StatelessComponent<MenuItemLabelProps> = (props: MenuItemLabelProps) => { const styles: Styles = { - iconStyle: { - color: props.selected ? SELECTED_ICON_COLOR : DEFAULT_ICON_COLOR, + root: { + backgroundColor: props.selected ? props.theme.selectedBackgroundColor : undefined, + paddingLeft: props.theme.paddingLeft, + }, + icon: { + color: props.selected ? props.theme.selectedIconColor : props.theme.iconColor, fontSize: 20, }, - textStyle: { - color: DEFAULT_LABEL_COLOR, + text: { + color: props.theme.textColor, fontWeight: props.selected ? 'bold' : 'normal', + fontSize: 16, }, }; return ( - <div className="flex"> + <div className="flex py2" style={styles.root}> <div className="pr1"> - <i style={styles.iconStyle} className={`zmdi ${props.iconName}`} /> + <i style={styles.icon} className={`zmdi ${props.iconName}`} /> </div> - <div className="pl1" style={styles.textStyle}> + <div className="pl1" style={styles.text}> {props.title} </div> </div> diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index d9d50c5ab..b992204a7 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -13,7 +13,7 @@ import { EthWrappers } from 'ts/components/eth_wrappers'; import { AssetPicker } from 'ts/components/generate_order/asset_picker'; import { BackButton } from 'ts/components/portal/back_button'; import { Loading } from 'ts/components/portal/loading'; -import { Menu } from 'ts/components/portal/menu'; +import { Menu, MenuTheme } from 'ts/components/portal/menu'; import { Section } from 'ts/components/portal/section'; import { TextHeader } from 'ts/components/portal/text_header'; import { RelayerIndex } from 'ts/components/relayer_index/relayer_index'; @@ -89,6 +89,7 @@ enum TokenManagementState { const THROTTLE_TIMEOUT = 100; const TOP_BAR_HEIGHT = TopBar.heightForDisplayType(TopBarDisplayType.Expanded); const LEFT_COLUMN_WIDTH = 346; +const MENU_PADDING_LEFT = 185; const styles: Styles = { root: { @@ -199,14 +200,11 @@ export class Portal extends React.Component<PortalProps, PortalState> { /> <div id="portal" style={styles.body}> <Switch> - <Route - path={`${WebsitePaths.Portal}/:route`} - render={this._renderMenuAndAccountManagement.bind(this)} - /> + <Route path={`${WebsitePaths.Portal}/:route`} render={this._renderOtherRoutes.bind(this)} /> <Route exact={true} path={`${WebsitePaths.Portal}/`} - render={this._renderWalletAndRelayerIndex.bind(this)} + render={this._renderMainRoute.bind(this)} /> </Switch> <BlockchainErrDialog @@ -247,17 +245,32 @@ export class Portal extends React.Component<PortalProps, PortalState> { </div> ); } - private _renderWalletAndRelayerIndex(): React.ReactNode { - return <PortalLayout left={this._renderWallet()} right={this._renderRelayerIndexSection()} />; + private _renderMainRoute(): React.ReactNode { + if (this._isSmallScreen()) { + return <SmallLayout content={this._renderRelayerIndexSection()} />; + } else { + return <LargeLayout left={this._renderWalletSection()} right={this._renderRelayerIndexSection()} />; + } } - private _renderMenuAndAccountManagement(routeComponentProps: RouteComponentProps<any>): React.ReactNode { - return <PortalLayout left={this._renderMenu(routeComponentProps)} right={this._renderAccountManagement()} />; + private _renderOtherRoutes(routeComponentProps: RouteComponentProps<any>): React.ReactNode { + if (this._isSmallScreen()) { + return <SmallLayout content={this._renderAccountManagement()} />; + } else { + return <LargeLayout left={this._renderMenu(routeComponentProps)} right={this._renderAccountManagement()} />; + } } private _renderMenu(routeComponentProps: RouteComponentProps<any>): React.ReactNode { + const menuTheme: MenuTheme = { + paddingLeft: MENU_PADDING_LEFT, + textColor: colors.darkerGrey, + iconColor: colors.darkerGrey, + selectedIconColor: colors.yellow800, + selectedBackgroundColor: 'transparent', + }; return ( <Section header={<BackButton to={`${WebsitePaths.Portal}`} labelText="back to Relayers" />} - body={<Menu selectedPath={routeComponentProps.location.pathname} />} + body={<Menu selectedPath={routeComponentProps.location.pathname} theme={menuTheme} />} /> ); } @@ -265,30 +278,28 @@ export class Portal extends React.Component<PortalProps, PortalState> { const allTokens = _.values(this.props.tokenByAddress); const trackedTokens = _.filter(allTokens, t => t.isTracked); return ( - <Section - header={<TextHeader labelText="Your Account" />} - body={ - <Wallet - userAddress={this.props.userAddress} - networkId={this.props.networkId} - blockchain={this._blockchain} - blockchainIsLoaded={this.props.blockchainIsLoaded} - blockchainErr={this.props.blockchainErr} - dispatcher={this.props.dispatcher} - tokenByAddress={this.props.tokenByAddress} - trackedTokens={trackedTokens} - userEtherBalanceInWei={this.props.userEtherBalanceInWei} - lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} - injectedProviderName={this.props.injectedProviderName} - providerType={this.props.providerType} - onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)} - onAddToken={this._onAddToken.bind(this)} - onRemoveToken={this._onRemoveToken.bind(this)} - /> - } + <Wallet + userAddress={this.props.userAddress} + networkId={this.props.networkId} + blockchain={this._blockchain} + blockchainIsLoaded={this.props.blockchainIsLoaded} + blockchainErr={this.props.blockchainErr} + dispatcher={this.props.dispatcher} + tokenByAddress={this.props.tokenByAddress} + trackedTokens={trackedTokens} + userEtherBalanceInWei={this.props.userEtherBalanceInWei} + lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} + injectedProviderName={this.props.injectedProviderName} + providerType={this.props.providerType} + onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)} + onAddToken={this._onAddToken.bind(this)} + onRemoveToken={this._onRemoveToken.bind(this)} /> ); } + private _renderWalletSection(): React.ReactNode { + return <Section header={<TextHeader labelText="Your Account" />} body={this._renderWallet()} />; + } private _renderAccountManagement(): React.ReactNode { const accountManagementItems: AccountManagementItem[] = [ { @@ -299,7 +310,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { { pathName: `${WebsitePaths.Portal}/account`, headerText: 'Your Account', - render: this._renderTokenBalances.bind(this), + render: this._isSmallScreen() ? this._renderWallet.bind(this) : this._renderTokenBalances.bind(this), }, { pathName: `${WebsitePaths.Portal}/trades`, @@ -315,7 +326,13 @@ export class Portal extends React.Component<PortalProps, PortalState> { return ( <Switch> {_.map(accountManagementItems, item => { - return <Route path={item.pathName} render={this._renderAccountManagementItem.bind(this, item)} />; + return ( + <Route + key={item.pathName} + path={item.pathName} + render={this._renderAccountManagementItem.bind(this, item)} + /> + ); })}} <Route render={this._renderNotFoundMessage.bind(this)} /> </Switch> @@ -383,7 +400,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { return ( <Section header={<TextHeader labelText="Explore 0x Relayers" />} - body={<RelayerIndex networkId={this.props.networkId} />} + body={<RelayerIndex networkId={this.props.networkId} screenWidth={this.props.screenWidth} />} /> ); } @@ -448,13 +465,17 @@ export class Portal extends React.Component<PortalProps, PortalState> { const newScreenWidth = utils.getScreenWidth(); this.props.dispatcher.updateScreenWidth(newScreenWidth); } + private _isSmallScreen(): boolean { + const result = this.props.screenWidth === ScreenWidths.Sm; + return result; + } } -interface PortalLayoutProps { +interface LargeLayoutProps { left: React.ReactNode; right: React.ReactNode; } -const PortalLayout = (props: PortalLayoutProps) => { +const LargeLayout = (props: LargeLayoutProps) => { return ( <div className="sm-flex flex-center"> <div className="flex-last px3"> @@ -465,4 +486,17 @@ const PortalLayout = (props: PortalLayoutProps) => { </div> </div> ); +}; + +interface SmallLayoutProps { + content: React.ReactNode; +} +const SmallLayout = (props: SmallLayoutProps) => { + return ( + <div className="sm-flex flex-center"> + <div className="flex-auto px3" style={styles.scrollContainer}> + {props.content} + </div> + </div> + ); }; // tslint:disable:max-file-line-count diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx index 5964dcd56..dc9eeb29d 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -1,4 +1,4 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import { GridTile } from 'material-ui/GridList'; import * as React from 'react'; @@ -6,6 +6,7 @@ import * as React from 'react'; import { TopTokens } from 'ts/components/relayer_index/relayer_top_tokens'; import { TokenIcon } from 'ts/components/ui/token_icon'; import { Token, WebsiteBackendRelayerInfo } from 'ts/types'; +import { colors } from 'ts/utils/colors'; export interface RelayerGridTileProps { relayerInfo: WebsiteBackendRelayerInfo; diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index b327c9817..8da4e0e10 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -1,4 +1,4 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import FlatButton from 'material-ui/FlatButton'; @@ -6,11 +6,13 @@ import { GridList } from 'material-ui/GridList'; import * as React from 'react'; import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile'; -import { WebsiteBackendRelayerInfo } from 'ts/types'; +import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; +import { colors } from 'ts/utils/colors'; export interface RelayerIndexProps { networkId: number; + screenWidth: ScreenWidths; } interface RelayerIndexState { @@ -35,7 +37,9 @@ const styles: Styles = { }; const CELL_HEIGHT = 290; -const NUMBER_OF_COLUMNS = 4; +const NUMBER_OF_COLUMNS_LARGE = 4; +const NUMBER_OF_COLUMNS_MEDIUM = 3; +const NUMBER_OF_COLUMNS_SMALL = 1; const GRID_PADDING = 20; export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerIndexState> { @@ -69,11 +73,12 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde </div> ); } else { + const numberOfColumns = this._numberOfColumnsForScreenWidth(this.props.screenWidth); return ( <div style={styles.root}> <GridList cellHeight={CELL_HEIGHT} - cols={NUMBER_OF_COLUMNS} + cols={numberOfColumns} padding={GRID_PADDING} style={styles.gridList} > @@ -107,6 +112,17 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde } } } + private _numberOfColumnsForScreenWidth(screenWidth: ScreenWidths): number { + switch (screenWidth) { + case ScreenWidths.Md: + return NUMBER_OF_COLUMNS_MEDIUM; + case ScreenWidths.Sm: + return NUMBER_OF_COLUMNS_SMALL; + case ScreenWidths.Lg: + default: + return NUMBER_OF_COLUMNS_LARGE; + } + } } interface RetryProps { diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx index 03c70c9dd..40ab7bd03 100644 --- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx +++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx @@ -26,7 +26,14 @@ export const TopTokens: React.StatelessComponent<TopTokensProps> = (props: TopTo {_.map(props.tokens, (tokenInfo: WebsiteBackendTokenInfo, index: number) => { const firstItemStyle = { ...styles.tokenLabel, ...styles.followingTokenLabel }; const style = index !== 0 ? firstItemStyle : styles.tokenLabel; - return <TokenLink tokenInfo={tokenInfo} style={style} networkId={props.networkId} />; + return ( + <TokenLink + key={tokenInfo.address} + tokenInfo={tokenInfo} + style={style} + networkId={props.networkId} + /> + ); })} </div> ); @@ -56,7 +63,6 @@ class TokenLink extends React.Component<TokenLinkProps, TokenLinkState> { }; return ( <a - key={this.props.tokenInfo.address} href={tokenLinkFromToken(this.props.tokenInfo, this.props.networkId)} target="_blank" style={style} diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index bebaa5341..fc516882a 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -1,13 +1,15 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; + import { Blockchain } from 'ts/blockchain'; import { ProviderPicker } from 'ts/components/top_bar/provider_picker'; import { DropDown } from 'ts/components/ui/drop_down'; import { Identicon } from 'ts/components/ui/identicon'; import { Dispatcher } from 'ts/redux/dispatcher'; import { ProviderType } from 'ts/types'; +import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 5fde007d6..2c3273dee 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -9,6 +9,7 @@ import { Link } from 'react-router-dom'; import ReactTooltip = require('react-tooltip'); import { Blockchain } from 'ts/blockchain'; import { LegacyPortalMenu } from 'ts/components/legacy_portal/legacy_portal_menu'; +import { DrawerMenu } from 'ts/components/portal/drawer_menu'; import { SidebarHeader } from 'ts/components/sidebar_header'; import { ProviderDisplay } from 'ts/components/top_bar/provider_display'; import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item'; @@ -18,6 +19,7 @@ import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; +import { utils } from 'ts/utils/utils'; export enum TopBarDisplayType { Default, @@ -93,6 +95,13 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { isDrawerOpen: false, }; } + public componentWillReceiveProps(nextProps: TopBarProps): void { + if (nextProps.location.pathname !== this.props.location.pathname) { + this.setState({ + isDrawerOpen: false, + }); + } + } public render(): React.ReactNode { const isNightVersion = this.props.isNightVersion; const isExpandedDisplayType = this.props.displayType === TopBarDisplayType.Expanded; @@ -202,6 +211,8 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { </div> ); const popoverContent = <Menu style={{ color: colors.darkGrey }}>{developerSectionMenuItems}</Menu>; + // TODO : Remove this once we ship portal v2 + const shouldShowPortalV2Drawer = this._isViewingPortal() && utils.shouldShowPortalV2(); return ( <div style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style, ...{ height } }} className="pb1"> <div className={parentClassNames}> @@ -274,10 +285,22 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { </div> </div> </div> - {this._renderDrawer()} + {shouldShowPortalV2Drawer ? this._renderPortalV2Drawer() : this._renderDrawer()} </div> ); } + private _renderPortalV2Drawer(): React.ReactNode { + return ( + <Drawer + open={this.state.isDrawerOpen} + docked={false} + openSecondary={true} + onRequestChange={this._onMenuButtonClick.bind(this)} + > + <DrawerMenu selectedPath={this.props.location.pathname} userAddress={this.props.userAddress} /> + </Drawer> + ); + } private _renderDrawer(): React.ReactNode { return ( <Drawer diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 75dbd12e9..dab8b7d2f 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -1,6 +1,5 @@ import { ZeroEx } from '0x.js'; import { - colors, constants as sharedConstants, EtherscanLinkSuffixes, Styles, @@ -42,6 +41,7 @@ import { WebsitePaths, } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; +import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles'; diff --git a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx index 89e32f7be..d334f1748 100644 --- a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx +++ b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx @@ -1,9 +1,10 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { Styles } from '@0xproject/react-shared'; import FlatButton from 'material-ui/FlatButton'; import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; import * as React from 'react'; import { ProviderType } from 'ts/types'; +import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; export interface WalletDisconnectedItemProps { diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx index db0983407..98b28b3ad 100644 --- a/packages/website/ts/components/wallet/wrap_ether_item.tsx +++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx @@ -1,5 +1,5 @@ import { ZeroEx } from '0x.js'; -import { colors, Styles } from '@0xproject/react-shared'; +import { Styles } from '@0xproject/react-shared'; import { BigNumber, logUtils } from '@0xproject/utils'; import * as _ from 'lodash'; import FlatButton from 'material-ui/FlatButton'; @@ -11,6 +11,7 @@ import { EthAmountInput } from 'ts/components/inputs/eth_amount_input'; import { TokenAmountInput } from 'ts/components/inputs/token_amount_input'; import { Dispatcher } from 'ts/redux/dispatcher'; import { BlockchainCallErrs, Side, Token } from 'ts/types'; +import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; import { errorReporter } from 'ts/utils/error_reporter'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index f255f81e7..7fc180449 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -34,14 +34,15 @@ import 'less/all.less'; // cause we only want to import the module when the user navigates to the page. // At the same time webpack statically parses for System.import() to determine bundle chunk split points // so each lazy import needs it's own `System.import()` declaration. -const LazyPortal = - utils.isDevelopment() || utils.isStaging() || utils.isDogfood() - ? createLazyComponent('Portal', async () => - System.import<any>(/* webpackChunkName: "portal" */ 'ts/containers/portal'), - ) - : createLazyComponent('LegacyPortal', async () => - System.import<any>(/* webpackChunkName: "legacyPortal" */ 'ts/containers/legacy_portal'), - ); + +// TODO: Remove this once we ship V2 +const LazyPortal = utils.shouldShowPortalV2() + ? createLazyComponent('Portal', async () => + System.import<any>(/* webpackChunkName: "portal" */ 'ts/containers/portal'), + ) + : createLazyComponent('LegacyPortal', async () => + System.import<any>(/* webpackChunkName: "legacyPortal" */ 'ts/containers/legacy_portal'), + ); const LazyZeroExJSDocumentation = createLazyComponent('Documentation', async () => System.import<any>(/* webpackChunkName: "zeroExDocs" */ 'ts/containers/zero_ex_js_documentation'), ); diff --git a/packages/website/ts/utils/colors.ts b/packages/website/ts/utils/colors.ts new file mode 100644 index 000000000..5ffdd6ba7 --- /dev/null +++ b/packages/website/ts/utils/colors.ts @@ -0,0 +1,19 @@ +import { colors as sharedColors } from '@0xproject/react-shared'; + +const appColors = { + walletBoxShadow: 'rgba(56, 59, 137, 0.2)', + walletBorder: '#ededee', + walletDefaultItemBackground: '#fbfbfc', + walletFocusedItemBackground: '#f0f1f4', + allowanceToggleShadow: 'rgba(0, 0, 0, 0)', + allowanceToggleOffTrack: '#adadad', + allowanceToggleOnTrack: sharedColors.mediumBlue, + wrapEtherConfirmationButton: sharedColors.mediumBlue, + drawerMenuBackground: '#4a4a4a', + menuItemDefaultSelectedBackground: '#424242', +}; + +export const colors = { + ...sharedColors, + ...appColors, +}; diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 3c99bd2fe..c370ac90c 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -314,4 +314,7 @@ export const utils = { return _.includes(window.location.href, configs.DOMAIN_STAGING); }, isDogfood, + shouldShowPortalV2(): boolean { + return this.isDevelopment() || this.isStaging() || this.isDogfood(); + }, }; diff --git a/packages/website/ts/utils/wallet_item_styles.ts b/packages/website/ts/utils/wallet_item_styles.ts index 1ad304ce1..6b038efd2 100644 --- a/packages/website/ts/utils/wallet_item_styles.ts +++ b/packages/website/ts/utils/wallet_item_styles.ts @@ -1,4 +1,6 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { Styles } from '@0xproject/react-shared'; + +import { colors } from 'ts/utils/colors'; export const styles: Styles = { focusedItem: { |