From 3a7f26f6200bd3796a5207f62c0bdd18858db0e1 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 1 Jun 2018 11:04:56 -0700 Subject: Have basic newsletter subscribe form working --- .../website/ts/components/forms/subscribe_form.tsx | 68 ++++++++++++++++++++++ packages/website/ts/components/token_balances.tsx | 2 +- packages/website/ts/pages/landing/landing.tsx | 2 + packages/website/ts/utils/backend_client.ts | 8 +++ packages/website/ts/utils/fetch_utils.ts | 12 ++++ packages/website/ts/utils/utils.ts | 3 +- 6 files changed, 93 insertions(+), 2 deletions(-) create mode 100644 packages/website/ts/components/forms/subscribe_form.tsx (limited to 'packages/website') diff --git a/packages/website/ts/components/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx new file mode 100644 index 000000000..8bb0f4fc7 --- /dev/null +++ b/packages/website/ts/components/forms/subscribe_form.tsx @@ -0,0 +1,68 @@ +import { colors } from '@0xproject/react-shared'; +import * as React from 'react'; + +import RaisedButton from 'material-ui/RaisedButton'; +import { backendClient } from 'ts/utils/backend_client'; + +export interface SubscribeFormProps {} + +export enum SubscribeFormStatus { + None, + Error, + Success, + Loading, +} + +export interface SubscribeFormState { + emailText: string; + status: SubscribeFormStatus; +} + +export class SubscribeForm extends React.Component { + public state = { + emailText: '', + status: SubscribeFormStatus.None, + }; + public render(): React.ReactNode { + return ( +
+ Subscribe to our newsletter for 0x relayer and dApp updates +
+ + +
+
+ ); + } + private _handleEmailInputChange(event: React.ChangeEvent): void { + this.setState({ emailText: event.target.value }); + } + private async _handleSubscribeClickAsync(): Promise { + this._setStatus(SubscribeFormStatus.Loading); + const success = await backendClient.subscribeToNewsletterAsync(this.state.emailText); + const status = success ? SubscribeFormStatus.Success : SubscribeFormStatus.Error; + this._setStatus(status); + } + private _setStatus(status: SubscribeFormStatus): void { + this.setState({ status }); + } +} diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index f5a51dabb..022968941 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -77,11 +77,11 @@ interface TokenBalancesProps { interface TokenBalancesState { errorType: BalanceErrs; + trackedTokenStateByAddress: TokenStateByAddress; isBalanceSpinnerVisible: boolean; isZRXSpinnerVisible: boolean; isTokenPickerOpen: boolean; isAddingToken: boolean; - trackedTokenStateByAddress: TokenStateByAddress; } export class TokenBalances extends React.Component { diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 02ecfa117..016c62a30 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -5,6 +5,7 @@ import * as React from 'react'; import DocumentTitle = require('react-document-title'); import { Link } from 'react-router-dom'; import { Footer } from 'ts/components/footer'; +import { SubscribeForm } from 'ts/components/forms/subscribe_form'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types'; @@ -298,6 +299,7 @@ export class Landing extends React.Component { + diff --git a/packages/website/ts/utils/backend_client.ts b/packages/website/ts/utils/backend_client.ts index c440b1604..fb7c21c59 100644 --- a/packages/website/ts/utils/backend_client.ts +++ b/packages/website/ts/utils/backend_client.ts @@ -8,6 +8,7 @@ const ETH_GAS_STATION_ENDPOINT = '/eth_gas_station'; const PRICES_ENDPOINT = '/prices'; const RELAYERS_ENDPOINT = '/relayers'; const WIKI_ENDPOINT = '/wiki'; +const SUBSCRIBE_SUBSTACK_NEWSLETTER_ENDPOINT = '/newsletter_subscriber/substack'; export const backendClient = { async getGasInfoAsync(): Promise { @@ -33,4 +34,11 @@ export const backendClient = { const result = await fetchUtils.requestAsync(utils.getBackendBaseUrl(), WIKI_ENDPOINT); return result; }, + async subscribeToNewsletterAsync(email: string): Promise { + const result = await fetchUtils.postAsync(utils.getBackendBaseUrl(), SUBSCRIBE_SUBSTACK_NEWSLETTER_ENDPOINT, { + email, + referrer: window.location.href, + }); + return result.status === 200; + }, }; diff --git a/packages/website/ts/utils/fetch_utils.ts b/packages/website/ts/utils/fetch_utils.ts index d2e902db5..e65ac64e1 100644 --- a/packages/website/ts/utils/fetch_utils.ts +++ b/packages/website/ts/utils/fetch_utils.ts @@ -20,6 +20,18 @@ export const fetchUtils = { const result = await response.json(); return result; }, + + async postAsync(baseUrl: string, path: string, body: object): Promise { + const url = `${baseUrl}${path}`; + const response = await fetch(url, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(body), + }); + return response; + }, }; function queryStringFromQueryParams(queryParams?: object): string { diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index b9d962b75..10381845b 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -306,7 +306,8 @@ export const utils = { return parsedProviderName; }, getBackendBaseUrl(): string { - return isDogfood() ? configs.BACKEND_BASE_STAGING_URL : configs.BACKEND_BASE_PROD_URL; + return 'http://localhost:3000'; + // return isDogfood() ? configs.BACKEND_BASE_STAGING_URL : configs.BACKEND_BASE_PROD_URL; }, isDevelopment(): boolean { return configs.ENVIRONMENT === Environments.DEVELOPMENT; -- cgit v1.2.3 From 817d9b0d3e1becdb2e8dbf51caa09edab8d14ab0 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 1 Jun 2018 11:40:06 -0700 Subject: Add styled-components and polished --- packages/website/package.json | 2 ++ .../website/ts/components/forms/subscribe_form.tsx | 4 ++-- .../website/ts/components/inputs/allowance_toggle.tsx | 2 +- .../ts/components/onboarding/onboarding_flow.tsx | 2 +- packages/website/ts/components/portal/back_button.tsx | 2 +- packages/website/ts/components/portal/drawer_menu.tsx | 2 +- packages/website/ts/components/portal/menu.tsx | 2 +- .../ts/components/relayer_index/relayer_grid_tile.tsx | 2 +- .../ts/components/relayer_index/relayer_index.tsx | 2 +- .../ts/components/top_bar/provider_display.tsx | 4 ++-- packages/website/ts/components/top_bar/top_bar.tsx | 2 +- packages/website/ts/components/ui/island.tsx | 2 +- packages/website/ts/components/ui/overlay.tsx | 2 +- packages/website/ts/components/wallet/wallet.tsx | 4 ++-- .../ts/components/wallet/wallet_disconnected_item.tsx | 2 +- .../website/ts/components/wallet/wrap_ether_item.tsx | 2 +- packages/website/ts/style/colors.ts | 19 +++++++++++++++++++ packages/website/ts/style/theme.ts | 15 +++++++++++++++ packages/website/ts/style/z_index.ts | 5 +++++ packages/website/ts/utils/colors.ts | 19 ------------------- packages/website/ts/utils/style.ts | 5 ----- packages/website/ts/utils/wallet_item_styles.ts | 2 +- 22 files changed, 60 insertions(+), 43 deletions(-) create mode 100644 packages/website/ts/style/colors.ts create mode 100644 packages/website/ts/style/theme.ts create mode 100644 packages/website/ts/style/z_index.ts delete mode 100644 packages/website/ts/utils/colors.ts delete mode 100644 packages/website/ts/utils/style.ts (limited to 'packages/website') diff --git a/packages/website/package.json b/packages/website/package.json index a17964f2b..54780f600 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -37,6 +37,7 @@ "lodash": "^4.17.4", "material-ui": "^0.17.1", "moment": "2.21.0", + "polished": "^1.9.2", "query-string": "^6.0.0", "react": "15.6.1", "react-copy-to-clipboard": "^4.2.3", @@ -52,6 +53,7 @@ "redux": "^3.6.0", "redux-devtools-extension": "^2.13.2", "semver-sort": "0.0.4", + "styled-components": "^3.3.0", "thenby": "^1.2.3", "truffle-contract": "2.0.1", "web3": "^0.20.0", diff --git a/packages/website/ts/components/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx index 8bb0f4fc7..3a6d0901f 100644 --- a/packages/website/ts/components/forms/subscribe_form.tsx +++ b/packages/website/ts/components/forms/subscribe_form.tsx @@ -58,8 +58,8 @@ export class SubscribeForm extends React.Component { this._setStatus(SubscribeFormStatus.Loading); - const success = await backendClient.subscribeToNewsletterAsync(this.state.emailText); - const status = success ? SubscribeFormStatus.Success : SubscribeFormStatus.Error; + const isSuccess = await backendClient.subscribeToNewsletterAsync(this.state.emailText); + const status = isSuccess ? SubscribeFormStatus.Success : SubscribeFormStatus.Error; this._setStatus(status); } private _setStatus(status: SubscribeFormStatus): void { diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx index d61dfa87d..a8df4935a 100644 --- a/packages/website/ts/components/inputs/allowance_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_toggle.tsx @@ -5,9 +5,9 @@ import Toggle from 'material-ui/Toggle'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; import { Dispatcher } from 'ts/redux/dispatcher'; +import { colors } from 'ts/style/colors'; 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/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 4066babaf..158ac23ec 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -5,7 +5,7 @@ import { Placement, Popper, PopperChildrenProps } from 'react-popper'; import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip'; import { Container } from 'ts/components/ui/container'; import { Overlay } from 'ts/components/ui/overlay'; -import { zIndex } from 'ts/utils/style'; +import { zIndex } from 'ts/style/z_index'; export interface Step { target: string; diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx index 48858613c..2d0bbefc3 100644 --- a/packages/website/ts/components/portal/back_button.tsx +++ b/packages/website/ts/components/portal/back_button.tsx @@ -2,7 +2,7 @@ import { Styles } from '@0xproject/react-shared'; import * as React from 'react'; import { Link } from 'react-router-dom'; -import { colors } from 'ts/utils/colors'; +import { colors } from 'ts/style/colors'; export interface BackButtonProps { to: string; diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx index ace11639a..8ac2b9091 100644 --- a/packages/website/ts/components/portal/drawer_menu.tsx +++ b/packages/website/ts/components/portal/drawer_menu.tsx @@ -4,8 +4,8 @@ import * as React from 'react'; import { defaultMenuItemEntries, Menu } from 'ts/components/portal/menu'; import { Identicon } from 'ts/components/ui/identicon'; +import { colors } from 'ts/style/colors'; import { WebsitePaths } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { utils } from 'ts/utils/utils'; const IDENTICON_DIAMETER = 45; diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx index 6a3301549..7d4bc38d2 100644 --- a/packages/website/ts/components/portal/menu.tsx +++ b/packages/website/ts/components/portal/menu.tsx @@ -2,8 +2,8 @@ import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { MenuItem } from 'ts/components/ui/menu_item'; +import { colors } from 'ts/style/colors'; import { Environments, WebsitePaths } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { configs } from 'ts/utils/configs'; export interface MenuTheme { 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 ad6ab3de1..41febebe9 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -7,8 +7,8 @@ import { TopTokens } from 'ts/components/relayer_index/relayer_top_tokens'; import { Container } from 'ts/components/ui/container'; import { Island } from 'ts/components/ui/island'; import { TokenIcon } from 'ts/components/ui/token_icon'; +import { colors } from 'ts/style/colors'; 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 9ef6eaf59..683f7084b 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -6,9 +6,9 @@ import { GridList } from 'material-ui/GridList'; import * as React from 'react'; import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile'; +import { colors } from 'ts/style/colors'; import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; -import { colors } from 'ts/utils/colors'; export interface RelayerIndexProps { networkId: number; diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 679ec07dc..3edf11e19 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -8,10 +8,10 @@ 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 { colors } from 'ts/style/colors'; +import { zIndex } from 'ts/style/z_index'; import { ProviderType } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; -import { zIndex } from 'ts/utils/style'; import { utils } from 'ts/utils/utils'; const ROOT_HEIGHT = 24; diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index db8e3cb82..ac1dd7d99 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -16,9 +16,9 @@ import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item'; import { DropDown } from 'ts/components/ui/drop_down'; import { Identicon } from 'ts/components/ui/identicon'; import { Dispatcher } from 'ts/redux/dispatcher'; +import { zIndex } from 'ts/style/z_index'; import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; -import { zIndex } from 'ts/utils/style'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/components/ui/island.tsx b/packages/website/ts/components/ui/island.tsx index f5480c9c9..802a7830a 100644 --- a/packages/website/ts/components/ui/island.tsx +++ b/packages/website/ts/components/ui/island.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; +import { colors } from 'ts/style/colors'; import { Styleable } from 'ts/types'; -import { colors } from 'ts/utils/colors'; export interface IslandProps { style?: React.CSSProperties; diff --git a/packages/website/ts/components/ui/overlay.tsx b/packages/website/ts/components/ui/overlay.tsx index bb2ed8e59..acca8194f 100644 --- a/packages/website/ts/components/ui/overlay.tsx +++ b/packages/website/ts/components/ui/overlay.tsx @@ -2,7 +2,7 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { zIndex } from 'ts/utils/style'; +import { zIndex } from 'ts/style/z_index'; export interface OverlayProps { children?: React.ReactNode; diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 30d1285f4..62d3e5af7 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -30,6 +30,8 @@ import { TokenIcon } from 'ts/components/ui/token_icon'; import { WalletDisconnectedItem } from 'ts/components/wallet/wallet_disconnected_item'; import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item'; import { Dispatcher } from 'ts/redux/dispatcher'; +import { colors } from 'ts/style/colors'; +import { zIndex } from 'ts/style/z_index'; import { BalanceErrs, BlockchainErrs, @@ -44,9 +46,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 { zIndex } from 'ts/utils/style'; 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 39a62e1fb..9207d7ff2 100644 --- a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx +++ b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx @@ -3,8 +3,8 @@ import FlatButton from 'material-ui/FlatButton'; import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; import * as React from 'react'; +import { colors } from 'ts/style/colors'; 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/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx index 1dfcffadf..50b64d05c 100644 --- a/packages/website/ts/components/wallet/wrap_ether_item.tsx +++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx @@ -10,8 +10,8 @@ import { Blockchain } from 'ts/blockchain'; 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 { colors } from 'ts/style/colors'; 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/style/colors.ts b/packages/website/ts/style/colors.ts new file mode 100644 index 000000000..5ffdd6ba7 --- /dev/null +++ b/packages/website/ts/style/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/style/theme.ts b/packages/website/ts/style/theme.ts new file mode 100644 index 000000000..9e447e7ee --- /dev/null +++ b/packages/website/ts/style/theme.ts @@ -0,0 +1,15 @@ +import * as styledComponents from 'styled-components'; + +const { + default: styled, + css, + injectGlobal, + keyframes, + ThemeProvider, +} = styledComponents as styledComponents.ThemedStyledComponentsModule; + +export interface IThemeInterface {} + +export const theme = {}; + +export { styled, css, injectGlobal, keyframes, ThemeProvider }; diff --git a/packages/website/ts/style/z_index.ts b/packages/website/ts/style/z_index.ts new file mode 100644 index 000000000..0411cdd91 --- /dev/null +++ b/packages/website/ts/style/z_index.ts @@ -0,0 +1,5 @@ +export const zIndex = { + topBar: 1100, + overlay: 1105, + aboveOverlay: 1106, +}; diff --git a/packages/website/ts/utils/colors.ts b/packages/website/ts/utils/colors.ts deleted file mode 100644 index 5ffdd6ba7..000000000 --- a/packages/website/ts/utils/colors.ts +++ /dev/null @@ -1,19 +0,0 @@ -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/style.ts b/packages/website/ts/utils/style.ts deleted file mode 100644 index 0411cdd91..000000000 --- a/packages/website/ts/utils/style.ts +++ /dev/null @@ -1,5 +0,0 @@ -export const zIndex = { - topBar: 1100, - overlay: 1105, - aboveOverlay: 1106, -}; diff --git a/packages/website/ts/utils/wallet_item_styles.ts b/packages/website/ts/utils/wallet_item_styles.ts index 6b038efd2..9d6033d74 100644 --- a/packages/website/ts/utils/wallet_item_styles.ts +++ b/packages/website/ts/utils/wallet_item_styles.ts @@ -1,6 +1,6 @@ import { Styles } from '@0xproject/react-shared'; -import { colors } from 'ts/utils/colors'; +import { colors } from 'ts/style/colors'; export const styles: Styles = { focusedItem: { -- cgit v1.2.3 From 073a96cf63a8b2e5639d15133d09545f7bde1388 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 1 Jun 2018 17:25:50 -0700 Subject: Implement subscription form --- .../website/ts/components/forms/subscribe_form.tsx | 121 +++++++++++++++------ packages/website/ts/components/ui/button.tsx | 79 ++++++++++++++ packages/website/ts/components/ui/container.tsx | 15 ++- packages/website/ts/components/ui/input.tsx | 43 ++++++++ packages/website/ts/components/ui/text.tsx | 56 ++++++++++ packages/website/ts/pages/landing/landing.tsx | 38 ++----- packages/website/ts/utils/backend_client.ts | 4 +- 7 files changed, 288 insertions(+), 68 deletions(-) create mode 100644 packages/website/ts/components/ui/button.tsx create mode 100644 packages/website/ts/components/ui/input.tsx create mode 100644 packages/website/ts/components/ui/text.tsx (limited to 'packages/website') diff --git a/packages/website/ts/components/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx index 3a6d0901f..99686efce 100644 --- a/packages/website/ts/components/forms/subscribe_form.tsx +++ b/packages/website/ts/components/forms/subscribe_form.tsx @@ -1,7 +1,12 @@ import { colors } from '@0xproject/react-shared'; import * as React from 'react'; -import RaisedButton from 'material-ui/RaisedButton'; +import { Button } from 'ts/components/ui/button'; +import { Input } from 'ts/components/ui/input'; +import { Text } from 'ts/components/ui/text'; +import { logUtils } from '@0xproject/utils'; +import { Container } from 'ts/components/ui/container'; +import { styled } from 'ts/style/theme'; import { backendClient } from 'ts/utils/backend_client'; export interface SubscribeFormProps {} @@ -15,54 +20,102 @@ export enum SubscribeFormStatus { export interface SubscribeFormState { emailText: string; + lastSubmittedEmail: string; status: SubscribeFormStatus; } export class SubscribeForm extends React.Component { public state = { emailText: '', + lastSubmittedEmail: '', status: SubscribeFormStatus.None, }; public render(): React.ReactNode { + const formFontSize = '15px'; return ( -
- Subscribe to our newsletter for 0x relayer and dApp updates -
- - -
-
+ + + + Subscribe to our newsletter for 0x relayer and dApp updates + + +
+ + + + + + + + +
+ {this._renderMessage()} + ); } + private _renderMessage(): React.ReactNode { + let message = null; + switch (this.state.status) { + case SubscribeFormStatus.Error: + message = 'Sorry, something went wrong. Try again later.'; + break; + case SubscribeFormStatus.Loading: + message = 'One second...'; + break; + case SubscribeFormStatus.Success: + message = `Thanks! ${this.state.lastSubmittedEmail} is now on the mailing list.`; + break; + case SubscribeFormStatus.None: + break; + } + return ( + + + {message || 'spacer text'} + + + ); + } + private _handleEmailInputChange(event: React.ChangeEvent): void { this.setState({ emailText: event.target.value }); } - private async _handleSubscribeClickAsync(): Promise { - this._setStatus(SubscribeFormStatus.Loading); - const isSuccess = await backendClient.subscribeToNewsletterAsync(this.state.emailText); - const status = isSuccess ? SubscribeFormStatus.Success : SubscribeFormStatus.Error; - this._setStatus(status); + private async _handleFormSubmitAsync(event: React.FormEvent): Promise { + event.preventDefault(); + if (!this.state.emailText) { + return; + } + this.setState({ + status: SubscribeFormStatus.Loading, + lastSubmittedEmail: this.state.emailText, + }); + try { + const response = await backendClient.subscribeToNewsletterAsync(this.state.emailText); + const status = response.status === 200 ? SubscribeFormStatus.Success : SubscribeFormStatus.Error; + this._setStatus(status); + } catch (error) { + logUtils.log(error); + this._setStatus(SubscribeFormStatus.Error); + } finally { + this.setState({ emailText: '' }); + } } - private _setStatus(status: SubscribeFormStatus): void { - this.setState({ status }); + private _setStatus(status: SubscribeFormStatus, then?: () => void): void { + this.setState({ status }, then); } } diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx new file mode 100644 index 000000000..e6e31374f --- /dev/null +++ b/packages/website/ts/components/ui/button.tsx @@ -0,0 +1,79 @@ +import { colors } from '@0xproject/react-shared'; +import { darken } from 'polished'; +import * as React from 'react'; +import { styled } from 'ts/style/theme'; + +export interface ButtonProps { + className?: string; + fontSize?: string; + fontColor?: string; + backgroundColor?: string; + borderColor?: string; + width?: string; + type?: string; + onClick?: (event: React.MouseEvent) => void; +} + +const PlainButton: React.StatelessComponent = ({ children, onClick, type, className }) => ( + +); + +export const Button = styled(PlainButton)` + cursor: pointer; + font-size: ${props => props.fontSize}; + color: ${props => props.fontColor}; + padding: 0.8em 2.2em; + border-radius: 6px; + box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25); + font-weight: 500; + font-family: 'Roboto'; + width: ${props => props.width}; + background-color: ${props => props.backgroundColor}; + border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')}; + &:hover { + background-color: ${props => darken(0.1, props.backgroundColor)}; + } + &:active { + background-color: ${props => darken(0.2, props.backgroundColor)}; + } +`; + +Button.defaultProps = { + fontSize: '12px', + backgroundColor: colors.white, + width: 'auto', +}; + +Button.displayName = 'Button'; + +type CTAType = 'light' | 'dark'; + +export interface CTAProps { + type?: CTAType; + fontSize?: string; + width?: string; +} + +export const CTA: React.StatelessComponent = ({ children, type, fontSize, width }) => { + const isLight = type === 'light'; + const backgroundColor = isLight ? colors.white : colors.heroGrey; + const fontColor = isLight ? colors.heroGrey : colors.white; + const borderColor = isLight ? undefined : colors.white; + return ( + + ); +}; + +CTA.defaultProps = { + type: 'dark', +}; diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index d577447b0..c6a78e181 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -11,13 +11,20 @@ export interface ContainerProps { paddingBottom?: StringOrNum; paddingRight?: StringOrNum; paddingLeft?: StringOrNum; + backgroundColor?: string; + borderRadius?: StringOrNum; maxWidth?: StringOrNum; - children?: React.ReactNode; + isHidden?: boolean; + className?: string; } -export const Container: React.StatelessComponent = (props: ContainerProps) => { - const { children, ...style } = props; - return
{children}
; +export const Container: React.StatelessComponent = ({ children, className, isHidden, ...style }) => { + const visibility = isHidden ? 'hidden' : undefined; + return ( +
+ {children} +
+ ); }; Container.displayName = 'Container'; diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx new file mode 100644 index 000000000..75a453eae --- /dev/null +++ b/packages/website/ts/components/ui/input.tsx @@ -0,0 +1,43 @@ +import { colors } from '@0xproject/react-shared'; +import * as React from 'react'; +import { styled } from 'ts/style/theme'; + +export interface InputProps { + className?: string; + value?: string; + width?: string; + fontSize?: string; + fontColor?: string; + placeholderColor?: string; + placeholder?: string; + backgroundColor?: string; + onChange?: (event: React.ChangeEvent) => void; +} + +const PlainInput: React.StatelessComponent = ({ value, className, placeholder, onChange }) => ( + +); + +export const Input = styled(PlainInput)` + font-size: ${props => props.fontSize}; + width: ${props => props.width}; + padding: 0.8em 1.2em; + border-radius: 3px; + font-family: 'Roboto Mono'; + color: ${props => props.fontColor}; + border: none; + background-color: ${props => props.backgroundColor}; + &::placeholder { + color: ${props => props.placeholder}; + } +`; + +Input.defaultProps = { + width: 'auto', + backgroundColor: colors.white, + fontColor: colors.darkestGrey, + placeholderColor: colors.grey500, + fontSize: '12px', +}; + +Input.displayName = 'Input'; diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx new file mode 100644 index 000000000..259365618 --- /dev/null +++ b/packages/website/ts/components/ui/text.tsx @@ -0,0 +1,56 @@ +import { colors } from '@0xproject/react-shared'; +import * as React from 'react'; +import { styled } from 'ts/style/theme'; +import { Deco, Key } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +export type TextTag = 'p' | 'div' | 'span' | 'label'; + +export interface TextProps { + className?: string; + Tag?: TextTag; + fontSize?: string; + fontFamily?: string; + fontColor?: string; + lineHeight?: string; + center?: boolean; + fontWeight?: number; +} + +const PlainText: React.StatelessComponent = ({ children, className, Tag }) => ( + {children} +); + +export const Text = styled(PlainText)` + font-family: ${props => props.fontFamily}; + font-weight: ${props => props.fontWeight}; + font-size: ${props => props.fontSize}; + ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; + ${props => (props.center ? 'text-align: center' : '')}; + color: ${props => props.fontColor}; +`; + +Text.defaultProps = { + fontFamily: 'Roboto', + fontWeight: 400, + fontColor: colors.white, + fontSize: '14px', + Tag: 'div', +}; + +Text.displayName = 'Text'; + +interface TranslatedProps { + children: Key; + translate: Translate; + deco?: Deco; +} + +export type TranslatedTextProps = TextProps & TranslatedProps; + +export const TranslatedText: React.StatelessComponent = ({ + translate, + children, + deco, + ...textProps +}) => {translate.get(children, deco)}; diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 016c62a30..0911bb2cf 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -1,7 +1,7 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; -import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; +import { CTA } from 'ts/components/ui/button'; import DocumentTitle = require('react-document-title'); import { Link } from 'react-router-dom'; import { Footer } from 'ts/components/footer'; @@ -237,7 +237,7 @@ export class Landing extends React.Component {
{this._renderWhatsNew()} -
+
@@ -272,13 +272,9 @@ export class Landing extends React.Component {
- + + {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} +
@@ -287,23 +283,17 @@ export class Landing extends React.Component { target="_blank" className="text-decoration-none" > - + + {this.props.translate.get(Key.CommunityCallToAction, Deco.Cap)} +
-
+ ); } @@ -784,15 +774,7 @@ export class Landing extends React.Component {
- + {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)}
diff --git a/packages/website/ts/utils/backend_client.ts b/packages/website/ts/utils/backend_client.ts index fb7c21c59..6b16aea6b 100644 --- a/packages/website/ts/utils/backend_client.ts +++ b/packages/website/ts/utils/backend_client.ts @@ -34,11 +34,11 @@ export const backendClient = { const result = await fetchUtils.requestAsync(utils.getBackendBaseUrl(), WIKI_ENDPOINT); return result; }, - async subscribeToNewsletterAsync(email: string): Promise { + async subscribeToNewsletterAsync(email: string): Promise { const result = await fetchUtils.postAsync(utils.getBackendBaseUrl(), SUBSCRIBE_SUBSTACK_NEWSLETTER_ENDPOINT, { email, referrer: window.location.href, }); - return result.status === 200; + return result; }, }; -- cgit v1.2.3 From a74597c7cd44d3138de39ec05079e9b9e005d03d Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 1 Jun 2018 17:37:32 -0700 Subject: Lint and cleanup --- packages/website/ts/components/forms/subscribe_form.tsx | 8 ++++---- packages/website/ts/components/ui/text.tsx | 2 +- packages/website/ts/pages/landing/landing.tsx | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx index 99686efce..b83a9c346 100644 --- a/packages/website/ts/components/forms/subscribe_form.tsx +++ b/packages/website/ts/components/forms/subscribe_form.tsx @@ -1,11 +1,11 @@ import { colors } from '@0xproject/react-shared'; import * as React from 'react'; +import { logUtils } from '@0xproject/utils'; import { Button } from 'ts/components/ui/button'; +import { Container } from 'ts/components/ui/container'; import { Input } from 'ts/components/ui/input'; import { Text } from 'ts/components/ui/text'; -import { logUtils } from '@0xproject/utils'; -import { Container } from 'ts/components/ui/container'; import { styled } from 'ts/style/theme'; import { backendClient } from 'ts/utils/backend_client'; @@ -47,7 +47,7 @@ export class SubscribeForm extends React.Component @@ -55,7 +55,7 @@ export class SubscribeForm extends React.Component @@ -82,16 +84,19 @@ export class SubscribeForm extends React.Component - {message || 'spacer text'} + {message || 'spacer text (never shown to user)'} ); } - private _handleEmailInputChange(event: React.ChangeEvent): void { this.setState({ emailText: event.target.value }); } @@ -107,15 +112,12 @@ export class SubscribeForm extends React.Component void): void { - this.setState({ status }, then); + private _setStatus(status: SubscribeFormStatus): void { + this.setState({ status }); } } diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index e6e31374f..4c7d59839 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -48,15 +48,15 @@ Button.defaultProps = { Button.displayName = 'Button'; -type CTAType = 'light' | 'dark'; +type CallToActionType = 'light' | 'dark'; -export interface CTAProps { - type?: CTAType; +export interface CallToActionProps { + type?: CallToActionType; fontSize?: string; width?: string; } -export const CTA: React.StatelessComponent = ({ children, type, fontSize, width }) => { +export const CallToAction: React.StatelessComponent = ({ children, type, fontSize, width }) => { const isLight = type === 'light'; const backgroundColor = isLight ? colors.white : colors.heroGrey; const fontColor = isLight ? colors.heroGrey : colors.white; @@ -74,6 +74,6 @@ export const CTA: React.StatelessComponent = ({ children, type, fontSi ); }; -CTA.defaultProps = { +CallToAction.defaultProps = { type: 'dark', }; diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx index 75a453eae..e01a71a53 100644 --- a/packages/website/ts/components/ui/input.tsx +++ b/packages/website/ts/components/ui/input.tsx @@ -28,7 +28,7 @@ export const Input = styled(PlainInput)` border: none; background-color: ${props => props.backgroundColor}; &::placeholder { - color: ${props => props.placeholder}; + color: ${props => props.placeholderColor}; } `; @@ -36,7 +36,7 @@ Input.defaultProps = { width: 'auto', backgroundColor: colors.white, fontColor: colors.darkestGrey, - placeholderColor: colors.grey500, + placeholderColor: colors.darkGrey, fontSize: '12px', }; diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index d3e205d12..259365618 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -52,5 +52,5 @@ export const TranslatedText: React.StatelessComponent = ({ translate, children, deco, - ...textProps, + ...textProps }) => {translate.get(children, deco)}; diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 1a1772a23..db3eb83b0 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -6,7 +6,7 @@ import { Link } from 'react-router-dom'; import { Footer } from 'ts/components/footer'; import { SubscribeForm } from 'ts/components/forms/subscribe_form'; import { TopBar } from 'ts/components/top_bar/top_bar'; -import { CTA } from 'ts/components/ui/button'; +import { CallToAction } from 'ts/components/ui/button'; import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; @@ -272,9 +272,9 @@ export class Landing extends React.Component { @@ -774,7 +774,9 @@ export class Landing extends React.Component {
- {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} + + {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} +
diff --git a/packages/website/ts/utils/fetch_utils.ts b/packages/website/ts/utils/fetch_utils.ts index e65ac64e1..513f7e479 100644 --- a/packages/website/ts/utils/fetch_utils.ts +++ b/packages/website/ts/utils/fetch_utils.ts @@ -4,23 +4,26 @@ import * as queryString from 'query-string'; import { errorReporter } from 'ts/utils/error_reporter'; +const logErrorIfPresent = (response: Response, requestedURL: string) => { + if (response.status !== 200) { + const errorText = `Error requesting url: ${requestedURL}, ${response.status}: ${response.statusText}`; + logUtils.log(errorText); + const error = Error(errorText); + // tslint:disable-next-line:no-floating-promises + errorReporter.reportAsync(error); + throw error; + } +}; + export const fetchUtils = { async requestAsync(baseUrl: string, path: string, queryParams?: object): Promise { const query = queryStringFromQueryParams(queryParams); const url = `${baseUrl}${path}${query}`; const response = await fetch(url); - if (response.status !== 200) { - const errorText = `Error requesting url: ${url}, ${response.status}: ${response.statusText}`; - logUtils.log(errorText); - const error = Error(errorText); - // tslint:disable-next-line:no-floating-promises - errorReporter.reportAsync(error); - throw error; - } + logErrorIfPresent(response, url); const result = await response.json(); return result; }, - async postAsync(baseUrl: string, path: string, body: object): Promise { const url = `${baseUrl}${path}`; const response = await fetch(url, { @@ -30,6 +33,7 @@ export const fetchUtils = { }, body: JSON.stringify(body), }); + logErrorIfPresent(response, url); return response; }, }; diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 10381845b..b9d962b75 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -306,8 +306,7 @@ export const utils = { return parsedProviderName; }, getBackendBaseUrl(): string { - return 'http://localhost:3000'; - // return isDogfood() ? configs.BACKEND_BASE_STAGING_URL : configs.BACKEND_BASE_PROD_URL; + return isDogfood() ? configs.BACKEND_BASE_STAGING_URL : configs.BACKEND_BASE_PROD_URL; }, isDevelopment(): boolean { return configs.ENVIRONMENT === Environments.DEVELOPMENT; -- cgit v1.2.3 From 3c508c1d271ffba4eead6f0c145d57330804697c Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 4 Jun 2018 17:06:23 -0700 Subject: Do not show subscribe form if language is not english --- packages/website/ts/pages/landing/landing.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index db3eb83b0..aa639c10e 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -293,7 +293,7 @@ export class Landing extends React.Component { - + {this.props.translate.getLanguage() === Language.English && } ); } -- cgit v1.2.3 From 1e0522fe8f9c8b5c3918ef2c51ef3621895eebc0 Mon Sep 17 00:00:00 2001 From: Leonid Logvinov Date: Mon, 4 Jun 2018 17:31:30 -0700 Subject: Add a TODO comment on StructLog type in the docs --- packages/website/ts/containers/ethereum_types_documentation.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/containers/ethereum_types_documentation.ts b/packages/website/ts/containers/ethereum_types_documentation.ts index ab0c88316..28d3d92dc 100644 --- a/packages/website/ts/containers/ethereum_types_documentation.ts +++ b/packages/website/ts/containers/ethereum_types_documentation.ts @@ -61,7 +61,7 @@ const docsInfoConfig: DocsInfoConfig = { 'EventAbi', 'DataItem', 'OpCode', - // 'StructLog', + // 'StructLog', // TODO: This type breaks the docs so we don't render it for now 'TransactionTrace', 'Unit', 'JSONRPCRequestPayload', -- cgit v1.2.3 From ea2d5b9d4a7c3e59645a0b302dc6979e6b9b285f Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 4 Jun 2018 17:51:48 -0700 Subject: Make buttons stack on mobile --- packages/website/ts/components/ui/text.tsx | 2 +- packages/website/ts/pages/landing/landing.tsx | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 259365618..d3e205d12 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -52,5 +52,5 @@ export const TranslatedText: React.StatelessComponent = ({ translate, children, deco, - ...textProps + ...textProps, }) => {translate.get(children, deco)}; diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index aa639c10e..f3428d475 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -7,6 +7,7 @@ import { Footer } from 'ts/components/footer'; import { SubscribeForm } from 'ts/components/forms/subscribe_form'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { CallToAction } from 'ts/components/ui/button'; +import { Container } from 'ts/components/ui/container'; import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; @@ -269,15 +270,15 @@ export class Landing extends React.Component { > {this.props.translate.get(Key.TopTagline)} -
-
+ +
{this.props.translate.get(Key.BuildCallToAction, Deco.Cap)}
-
+ -
+
-- cgit v1.2.3 From 9778695b4ad1fd999eb79b01c768a2f2b9938917 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 4 Jun 2018 19:48:21 -0700 Subject: Try enabling no-unused-variable... --- packages/website/ts/blockchain_watcher.ts | 3 +- .../components/dialogs/blockchain_err_dialog.tsx | 1 - .../dialogs/track_token_confirmation_dialog.tsx | 1 - packages/website/ts/components/eth_wrappers.tsx | 1 - .../ts/components/inputs/allowance_toggle.tsx | 2 - .../components/inputs/identicon_address_input.tsx | 1 - .../website/ts/components/inputs/token_input.tsx | 1 - .../ts/components/legacy_portal/legacy_portal.tsx | 7 +-- .../legacy_portal/legacy_portal_menu.tsx | 3 +- .../ts/components/onboarding/onboarding_flow.tsx | 2 - .../components/onboarding/onboarding_tooltip.tsx | 1 - packages/website/ts/components/portal/menu.tsx | 3 +- packages/website/ts/components/portal/portal.tsx | 2 +- packages/website/ts/components/portal/section.tsx | 1 - packages/website/ts/components/redirecter.tsx | 1 - .../components/relayer_index/relayer_grid_tile.tsx | 3 +- .../relayer_index/relayer_top_tokens.tsx | 1 - packages/website/ts/components/sidebar_header.tsx | 3 -- packages/website/ts/components/token_balances.tsx | 2 - .../ts/components/top_bar/provider_display.tsx | 1 - .../ts/components/top_bar/provider_picker.tsx | 2 - packages/website/ts/components/top_bar/top_bar.tsx | 5 -- packages/website/ts/components/ui/copy_icon.tsx | 1 - packages/website/ts/components/ui/drop_down.tsx | 1 - .../website/ts/components/ui/etherscan_icon.tsx | 1 - packages/website/ts/components/ui/island.tsx | 1 - .../ts/components/ui/lifecycle_raised_button.tsx | 1 - packages/website/ts/components/ui/overlay.tsx | 1 - packages/website/ts/components/ui/party.tsx | 1 - packages/website/ts/components/ui/swap_icon.tsx | 1 - packages/website/ts/components/wallet/wallet.tsx | 57 +--------------------- .../components/wallet/wallet_disconnected_item.tsx | 1 - .../ts/components/wallet/wrap_ether_item.tsx | 1 - packages/website/ts/containers/about.ts | 1 - .../website/ts/containers/connect_documentation.ts | 4 +- packages/website/ts/containers/faq.ts | 1 - .../website/ts/containers/generate_order_form.ts | 1 - .../ts/containers/json_schemas_documentation.ts | 7 +-- packages/website/ts/containers/landing.ts | 1 - packages/website/ts/containers/not_found.ts | 1 - .../ts/containers/order_utils_documentation.ts | 6 +-- .../ts/containers/smart_contracts_documentation.ts | 3 +- .../ts/containers/sol_compiler_documentation.ts | 5 +- .../website/ts/containers/sol_cov_documentation.ts | 5 +- .../ts/containers/subproviders_documentation.ts | 4 +- .../ts/containers/web3_wrapper_documentation.ts | 4 +- packages/website/ts/containers/wiki.ts | 1 - .../ts/containers/zero_ex_js_documentation.ts | 4 +- packages/website/ts/pages/about/about.tsx | 1 - .../website/ts/pages/documentation/doc_page.tsx | 4 +- packages/website/ts/pages/faq/question.tsx | 1 - packages/website/ts/pages/landing/landing.tsx | 5 +- packages/website/ts/pages/not_found.tsx | 2 - packages/website/ts/pages/wiki/wiki.tsx | 6 +-- packages/website/ts/schemas/validator.ts | 1 - packages/website/ts/types.ts | 1 - packages/website/ts/utils/configs.ts | 1 - packages/website/ts/utils/constants.ts | 1 - packages/website/ts/utils/doc_utils.ts | 1 - packages/website/ts/utils/error_reporter.ts | 1 - packages/website/ts/utils/utils.ts | 2 +- 61 files changed, 22 insertions(+), 167 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/blockchain_watcher.ts b/packages/website/ts/blockchain_watcher.ts index 0d376bc74..3890a9e57 100644 --- a/packages/website/ts/blockchain_watcher.ts +++ b/packages/website/ts/blockchain_watcher.ts @@ -1,8 +1,7 @@ -import { BigNumber, intervalUtils, logUtils, promisify } from '@0xproject/utils'; +import { BigNumber, intervalUtils, logUtils } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { utils } from 'ts/utils/utils'; export class BlockchainWatcher { private _dispatcher: Dispatcher; diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx index 7156e700b..b968a3147 100644 --- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx +++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx @@ -1,5 +1,4 @@ import { colors, Networks } from '@0xproject/react-shared'; -import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; diff --git a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx index ac0b27cdc..f6594b9d5 100644 --- a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx +++ b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx @@ -1,4 +1,3 @@ -import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index 1db5ff77f..2fba6849d 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -20,7 +20,6 @@ import { } from 'ts/types'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; -import { utils } from 'ts/utils/utils'; const DATE_FORMAT = 'D/M/YY'; const ICON_DIMENSION = 40; diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx index d61dfa87d..1e76b37fb 100644 --- a/packages/website/ts/components/inputs/allowance_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_toggle.tsx @@ -1,6 +1,5 @@ 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'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; @@ -8,7 +7,6 @@ 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/inputs/identicon_address_input.tsx b/packages/website/ts/components/inputs/identicon_address_input.tsx index a4dc01ba8..6ba7584a7 100644 --- a/packages/website/ts/components/inputs/identicon_address_input.tsx +++ b/packages/website/ts/components/inputs/identicon_address_input.tsx @@ -1,4 +1,3 @@ -import * as _ from 'lodash'; import * as React from 'react'; import { AddressInput } from 'ts/components/inputs/address_input'; import { Identicon } from 'ts/components/ui/identicon'; diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx index c2c4dd63b..0bd36781e 100644 --- a/packages/website/ts/components/inputs/token_input.tsx +++ b/packages/website/ts/components/inputs/token_input.tsx @@ -1,5 +1,4 @@ import { colors } from '@0xproject/react-shared'; -import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; diff --git a/packages/website/ts/components/legacy_portal/legacy_portal.tsx b/packages/website/ts/components/legacy_portal/legacy_portal.tsx index e5d152e3e..baca1b334 100644 --- a/packages/website/ts/components/legacy_portal/legacy_portal.tsx +++ b/packages/website/ts/components/legacy_portal/legacy_portal.tsx @@ -1,5 +1,5 @@ import { colors } from '@0xproject/react-shared'; -import { BigNumber, logUtils } from '@0xproject/utils'; +import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import Paper from 'material-ui/Paper'; @@ -15,20 +15,15 @@ import { EthWrappers } from 'ts/components/eth_wrappers'; import { FillOrder } from 'ts/components/fill_order'; import { Footer } from 'ts/components/footer'; import { LegacyPortalMenu } from 'ts/components/legacy_portal/legacy_portal_menu'; -import { RelayerIndex } from 'ts/components/relayer_index/relayer_index'; import { TokenBalances } from 'ts/components/token_balances'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { TradeHistory } from 'ts/components/trade_history/trade_history'; import { FlashMessage } from 'ts/components/ui/flash_message'; -import { Wallet } from 'ts/components/wallet/wallet'; import { GenerateOrderForm } from 'ts/containers/generate_order_form'; import { localStorage } from 'ts/local_storage/local_storage'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { portalOrderSchema } from 'ts/schemas/portal_order_schema'; -import { validator } from 'ts/schemas/validator'; import { BlockchainErrs, - Environments, HashData, Order, ProviderType, diff --git a/packages/website/ts/components/legacy_portal/legacy_portal_menu.tsx b/packages/website/ts/components/legacy_portal/legacy_portal_menu.tsx index 7469ca14e..1dd164f8b 100644 --- a/packages/website/ts/components/legacy_portal/legacy_portal_menu.tsx +++ b/packages/website/ts/components/legacy_portal/legacy_portal_menu.tsx @@ -1,8 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import { MenuItem } from 'ts/components/ui/menu_item'; -import { Environments, WebsitePaths } from 'ts/types'; -import { configs } from 'ts/utils/configs'; +import { WebsitePaths } from 'ts/types'; export interface LegacyPortalMenuProps { menuItemStyle: React.CSSProperties; diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 4066babaf..9879cd387 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -1,11 +1,9 @@ -import * as _ from 'lodash'; import * as React from 'react'; import { Placement, Popper, PopperChildrenProps } from 'react-popper'; import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip'; import { Container } from 'ts/components/ui/container'; import { Overlay } from 'ts/components/ui/overlay'; -import { zIndex } from 'ts/utils/style'; export interface Step { target: string; diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx index eb34a87f2..155c70c5f 100644 --- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx +++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { colors } from '@0xproject/react-shared'; import { Container } from 'ts/components/ui/container'; import { Island } from 'ts/components/ui/island'; diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx index 6e97ee37e..b0710de60 100644 --- a/packages/website/ts/components/portal/menu.tsx +++ b/packages/website/ts/components/portal/menu.tsx @@ -2,9 +2,8 @@ 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 { WebsitePaths } from 'ts/types'; import { colors } from 'ts/utils/colors'; -import { configs } from 'ts/utils/configs'; export interface MenuTheme { paddingLeft: number; diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 9aa83546a..088b33c90 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -3,7 +3,7 @@ import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; -import { Link, Route, RouteComponentProps, Switch } from 'react-router-dom'; +import { Route, RouteComponentProps, Switch } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog'; diff --git a/packages/website/ts/components/portal/section.tsx b/packages/website/ts/components/portal/section.tsx index 9b172aae0..455ed07c9 100644 --- a/packages/website/ts/components/portal/section.tsx +++ b/packages/website/ts/components/portal/section.tsx @@ -1,4 +1,3 @@ -import { Styles } from '@0xproject/react-shared'; import * as React from 'react'; export interface SectionProps { diff --git a/packages/website/ts/components/redirecter.tsx b/packages/website/ts/components/redirecter.tsx index 629522bbb..07432a926 100644 --- a/packages/website/ts/components/redirecter.tsx +++ b/packages/website/ts/components/redirecter.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { constants } from 'ts/utils/constants'; interface RedirecterProps { 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 ad6ab3de1..62f251e89 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -6,8 +6,7 @@ import * as React from 'react'; import { TopTokens } from 'ts/components/relayer_index/relayer_top_tokens'; import { Container } from 'ts/components/ui/container'; import { Island } from 'ts/components/ui/island'; -import { TokenIcon } from 'ts/components/ui/token_icon'; -import { Token, WebsiteBackendRelayerInfo } from 'ts/types'; +import { WebsiteBackendRelayerInfo } from 'ts/types'; import { colors } from 'ts/utils/colors'; export interface RelayerGridTileProps { 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 e42f8a81a..a5754180b 100644 --- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx +++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx @@ -2,7 +2,6 @@ import { colors, EtherscanLinkSuffixes, Styles, utils as sharedUtils } from '@0x import * as _ from 'lodash'; import * as React from 'react'; -import { TokenIcon } from 'ts/components/ui/token_icon'; import { WebsiteBackendTokenInfo } from 'ts/types'; export interface TopTokensProps { diff --git a/packages/website/ts/components/sidebar_header.tsx b/packages/website/ts/components/sidebar_header.tsx index bf46caad9..a14ab54f5 100644 --- a/packages/website/ts/components/sidebar_header.tsx +++ b/packages/website/ts/components/sidebar_header.tsx @@ -1,9 +1,6 @@ import { colors } from '@0xproject/react-shared'; -import * as _ from 'lodash'; import * as React from 'react'; -const SHOW_DURATION_MS = 4000; - interface SidebarHeaderProps { title: string; iconUrl: string; diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 7a0742bbe..00c45961e 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -13,7 +13,6 @@ import Dialog from 'material-ui/Dialog'; import Divider from 'material-ui/Divider'; import FlatButton from 'material-ui/FlatButton'; import FloatingActionButton from 'material-ui/FloatingActionButton'; -import RaisedButton from 'material-ui/RaisedButton'; import ContentAdd from 'material-ui/svg-icons/content/add'; import ContentRemove from 'material-ui/svg-icons/content/remove'; import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table'; @@ -169,7 +168,6 @@ export class TokenBalances extends React.Component, ]; const isTestNetwork = utils.isTestNetwork(this.props.networkId); - const isKovanTestNetwork = this.props.networkId === constants.NETWORK_ID_KOVAN; const stubColumnStyle = { display: isTestNetwork ? 'none' : 'table-cell', }; diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 8a337119a..b48d6b70b 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -12,7 +12,6 @@ import { Dispatcher } from 'ts/redux/dispatcher'; import { ProviderType } from 'ts/types'; import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; -import { zIndex } from 'ts/utils/style'; import { utils } from 'ts/utils/utils'; const ROOT_HEIGHT = 24; diff --git a/packages/website/ts/components/top_bar/provider_picker.tsx b/packages/website/ts/components/top_bar/provider_picker.tsx index 1ecb8389c..7937f2e9d 100644 --- a/packages/website/ts/components/top_bar/provider_picker.tsx +++ b/packages/website/ts/components/top_bar/provider_picker.tsx @@ -1,11 +1,9 @@ import { colors, constants as sharedConstants } from '@0xproject/react-shared'; -import * as _ from 'lodash'; import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; import { Dispatcher } from 'ts/redux/dispatcher'; import { ProviderType } from 'ts/types'; -import { constants } from 'ts/utils/constants'; interface ProviderPickerProps { networkId: number; diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index e2d791ae3..fc9553a07 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -6,15 +6,12 @@ import Menu from 'material-ui/Menu'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; 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'; import { DropDown } from 'ts/components/ui/drop_down'; -import { Identicon } from 'ts/components/ui/identicon'; import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; @@ -418,8 +415,6 @@ export class TopBar extends React.Component { ) { return undefined; } - - const sectionTitle = `${this.props.docsInfo.displayName} Docs`; return (
{ - private _isUnmounted: boolean; constructor(props: WalletProps) { super(props); - this._isUnmounted = false; this.state = { wrappedEtherDirection: undefined, isHoveringSidebar: false, @@ -185,7 +170,6 @@ export class Wallet extends React.Component { ); } private _renderDisconnectedHeaderRows(): React.ReactElement<{}> { - const userAddress = this.props.userAddress; const primaryText = 'wallet'; return ( { ); } - private _getInitialTrackedTokenStateByAddress(tokenAddresses: string[]): TokenStateByAddress { - const trackedTokenStateByAddress: TokenStateByAddress = {}; - _.each(tokenAddresses, tokenAddress => { - trackedTokenStateByAddress[tokenAddress] = { - balance: new BigNumber(0), - allowance: new BigNumber(0), - isLoaded: false, - }; - }); - return trackedTokenStateByAddress; - } - - private async _getPriceByAddressAsync(tokenAddresses: string[]): Promise> { - if (_.isEmpty(tokenAddresses)) { - return {}; - } - // for each input token address, search for the corresponding symbol in this.props.tokenByAddress, if it exists - // create a mapping from existing symbols -> address - const tokenAddressBySymbol: { [symbol: string]: string } = {}; - _.each(tokenAddresses, address => { - const tokenIfExists = _.get(this.props.tokenByAddress, address); - if (!_.isUndefined(tokenIfExists)) { - const symbol = tokenIfExists.symbol; - tokenAddressBySymbol[symbol] = address; - } - }); - const tokenSymbols = _.keys(tokenAddressBySymbol); - try { - const priceBySymbol = await backendClient.getPriceInfoAsync(tokenSymbols); - const priceByAddress = _.mapKeys(priceBySymbol, (value, symbol) => _.get(tokenAddressBySymbol, symbol)); - const result = _.mapValues(priceByAddress, price => { - const priceBigNumber = new BigNumber(price); - return priceBigNumber; - }); - return result; - } catch (err) { - return {}; - } - } private _openWrappedEtherActionRow(wrappedEtherDirection: Side): void { this.setState({ wrappedEtherDirection, diff --git a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx index 17fd8a19e..b719dd504 100644 --- a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx +++ b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx @@ -1,6 +1,5 @@ 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'; diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx index 1dfcffadf..376829f4e 100644 --- a/packages/website/ts/components/wallet/wrap_ether_item.tsx +++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx @@ -3,7 +3,6 @@ import { BigNumber, logUtils } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import FlatButton from 'material-ui/FlatButton'; -import { ListItem } from 'material-ui/List'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; diff --git a/packages/website/ts/containers/about.ts b/packages/website/ts/containers/about.ts index ce8fd3afb..3dbdcd16b 100644 --- a/packages/website/ts/containers/about.ts +++ b/packages/website/ts/containers/about.ts @@ -1,4 +1,3 @@ -import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; diff --git a/packages/website/ts/containers/connect_documentation.ts b/packages/website/ts/containers/connect_documentation.ts index 698d605c9..2ecd8107a 100644 --- a/packages/website/ts/containers/connect_documentation.ts +++ b/packages/website/ts/containers/connect_documentation.ts @@ -1,13 +1,11 @@ import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; -import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages, Environments, WebsitePaths } from 'ts/types'; -import { configs } from 'ts/utils/configs'; +import { DocPackages } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; diff --git a/packages/website/ts/containers/faq.ts b/packages/website/ts/containers/faq.ts index b539e33c9..b91c47889 100644 --- a/packages/website/ts/containers/faq.ts +++ b/packages/website/ts/containers/faq.ts @@ -1,4 +1,3 @@ -import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; diff --git a/packages/website/ts/containers/generate_order_form.ts b/packages/website/ts/containers/generate_order_form.ts index 98c9b8cd6..b4c6cc0d4 100644 --- a/packages/website/ts/containers/generate_order_form.ts +++ b/packages/website/ts/containers/generate_order_form.ts @@ -1,6 +1,5 @@ import { ECSignature } from '@0xproject/types'; import { BigNumber } from '@0xproject/utils'; -import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; import { Blockchain } from 'ts/blockchain'; diff --git a/packages/website/ts/containers/json_schemas_documentation.ts b/packages/website/ts/containers/json_schemas_documentation.ts index 154c65ffc..4df7ddecb 100644 --- a/packages/website/ts/containers/json_schemas_documentation.ts +++ b/packages/website/ts/containers/json_schemas_documentation.ts @@ -1,14 +1,11 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; -import * as _ from 'lodash'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages, Environments, WebsitePaths } from 'ts/types'; -import { configs } from 'ts/utils/configs'; -import { constants } from 'ts/utils/constants'; +import { DocPackages } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ diff --git a/packages/website/ts/containers/landing.ts b/packages/website/ts/containers/landing.ts index a620bb12e..a9fc1d9d1 100644 --- a/packages/website/ts/containers/landing.ts +++ b/packages/website/ts/containers/landing.ts @@ -1,4 +1,3 @@ -import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; diff --git a/packages/website/ts/containers/not_found.ts b/packages/website/ts/containers/not_found.ts index dd151e2c8..4fdc325ea 100644 --- a/packages/website/ts/containers/not_found.ts +++ b/packages/website/ts/containers/not_found.ts @@ -1,4 +1,3 @@ -import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; diff --git a/packages/website/ts/containers/order_utils_documentation.ts b/packages/website/ts/containers/order_utils_documentation.ts index 64aa7300f..cdf97e5c8 100644 --- a/packages/website/ts/containers/order_utils_documentation.ts +++ b/packages/website/ts/containers/order_utils_documentation.ts @@ -1,13 +1,11 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; -import * as _ from 'lodash'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages, Environments, WebsitePaths } from 'ts/types'; -import { configs } from 'ts/utils/configs'; +import { DocPackages } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; diff --git a/packages/website/ts/containers/smart_contracts_documentation.ts b/packages/website/ts/containers/smart_contracts_documentation.ts index b1b2ea922..27328909c 100644 --- a/packages/website/ts/containers/smart_contracts_documentation.ts +++ b/packages/website/ts/containers/smart_contracts_documentation.ts @@ -1,13 +1,12 @@ import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; import { Networks } from '@0xproject/react-shared'; -import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages, SmartContractDocSections as Sections, WebsitePaths } from 'ts/types'; +import { DocPackages, SmartContractDocSections as Sections } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ diff --git a/packages/website/ts/containers/sol_compiler_documentation.ts b/packages/website/ts/containers/sol_compiler_documentation.ts index 2f6486146..4ccc1850f 100644 --- a/packages/website/ts/containers/sol_compiler_documentation.ts +++ b/packages/website/ts/containers/sol_compiler_documentation.ts @@ -1,14 +1,11 @@ import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; -import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages, Environments, WebsitePaths } from 'ts/types'; -import { configs } from 'ts/utils/configs'; -import { constants } from 'ts/utils/constants'; +import { DocPackages } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ diff --git a/packages/website/ts/containers/sol_cov_documentation.ts b/packages/website/ts/containers/sol_cov_documentation.ts index bc05b6854..73cc99a8c 100644 --- a/packages/website/ts/containers/sol_cov_documentation.ts +++ b/packages/website/ts/containers/sol_cov_documentation.ts @@ -1,14 +1,11 @@ import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; -import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages, Environments, WebsitePaths } from 'ts/types'; -import { configs } from 'ts/utils/configs'; -import { constants } from 'ts/utils/constants'; +import { DocPackages } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ diff --git a/packages/website/ts/containers/subproviders_documentation.ts b/packages/website/ts/containers/subproviders_documentation.ts index 2178baea8..0c7e73f38 100644 --- a/packages/website/ts/containers/subproviders_documentation.ts +++ b/packages/website/ts/containers/subproviders_documentation.ts @@ -1,13 +1,11 @@ import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; -import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages, Environments, WebsitePaths } from 'ts/types'; -import { configs } from 'ts/utils/configs'; +import { DocPackages } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; diff --git a/packages/website/ts/containers/web3_wrapper_documentation.ts b/packages/website/ts/containers/web3_wrapper_documentation.ts index 17754ca66..34633f14d 100644 --- a/packages/website/ts/containers/web3_wrapper_documentation.ts +++ b/packages/website/ts/containers/web3_wrapper_documentation.ts @@ -1,13 +1,11 @@ import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; -import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages, Environments, WebsitePaths } from 'ts/types'; -import { configs } from 'ts/utils/configs'; +import { DocPackages } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; diff --git a/packages/website/ts/containers/wiki.ts b/packages/website/ts/containers/wiki.ts index 2cb87d0a1..af7228dbe 100644 --- a/packages/website/ts/containers/wiki.ts +++ b/packages/website/ts/containers/wiki.ts @@ -1,4 +1,3 @@ -import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; diff --git a/packages/website/ts/containers/zero_ex_js_documentation.ts b/packages/website/ts/containers/zero_ex_js_documentation.ts index f68e2335f..94efd1cf7 100644 --- a/packages/website/ts/containers/zero_ex_js_documentation.ts +++ b/packages/website/ts/containers/zero_ex_js_documentation.ts @@ -1,13 +1,11 @@ import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; -import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages, Environments, WebsitePaths } from 'ts/types'; -import { configs } from 'ts/utils/configs'; +import { DocPackages } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index ac67ca968..3136dbca3 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -8,7 +8,6 @@ import { TopBar } from 'ts/components/top_bar/top_bar'; import { Profile } from 'ts/pages/about/profile'; import { Dispatcher } from 'ts/redux/dispatcher'; import { ProfileInfo, WebsitePaths } from 'ts/types'; -import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 17efc56ed..4dffa13f1 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -1,5 +1,4 @@ -import { DocAgnosticFormat, DocsInfo, Documentation, DoxityDocObj } from '@0xproject/react-docs'; -import { MenuSubsectionsBySection } from '@0xproject/react-shared'; +import { DocAgnosticFormat, DocsInfo, Documentation } from '@0xproject/react-docs'; import findVersions = require('find-versions'); import * as _ from 'lodash'; import * as React from 'react'; @@ -9,7 +8,6 @@ import { SidebarHeader } from 'ts/components/sidebar_header'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { Dispatcher } from 'ts/redux/dispatcher'; import { DocPackages } from 'ts/types'; -import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { docUtils } from 'ts/utils/doc_utils'; import { Translate } from 'ts/utils/translate'; diff --git a/packages/website/ts/pages/faq/question.tsx b/packages/website/ts/pages/faq/question.tsx index 28ea6881a..f80985257 100644 --- a/packages/website/ts/pages/faq/question.tsx +++ b/packages/website/ts/pages/faq/question.tsx @@ -1,5 +1,4 @@ import { colors } from '@0xproject/react-shared'; -import * as _ from 'lodash'; import { Card, CardHeader, CardText } from 'material-ui/Card'; import * as React from 'react'; diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 02ecfa117..f751e31f3 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -7,7 +7,7 @@ import { Link } from 'react-router-dom'; import { Footer } from 'ts/components/footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types'; +import { Deco, Key, ScreenWidths, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; @@ -806,7 +806,4 @@ export class Landing extends React.Component { }); } } - private _onLanguageSelected(language: Language): void { - this.props.dispatcher.updateSelectedLanguage(language); - } } // tslint:disable:max-file-line-count diff --git a/packages/website/ts/pages/not_found.tsx b/packages/website/ts/pages/not_found.tsx index 674271636..a94ba5863 100644 --- a/packages/website/ts/pages/not_found.tsx +++ b/packages/website/ts/pages/not_found.tsx @@ -1,5 +1,3 @@ -import { Styles } from '@0xproject/react-shared'; -import * as _ from 'lodash'; import * as React from 'react'; import { Footer } from 'ts/components/footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 720c1cc37..bdefe0fda 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -4,23 +4,19 @@ import { HeaderSizes, MarkdownSection, NestedSidebarMenu, - SectionHeader, Styles, utils as sharedUtils, } from '@0xproject/react-shared'; -import { logUtils } from '@0xproject/utils'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); -import { scroller } from 'react-scroll'; import { SidebarHeader } from 'ts/components/sidebar_header'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Article, ArticlesBySection, WebsitePaths } from 'ts/types'; +import { Article, ArticlesBySection } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; -import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/schemas/validator.ts b/packages/website/ts/schemas/validator.ts index dac0f0098..3fd013002 100644 --- a/packages/website/ts/schemas/validator.ts +++ b/packages/website/ts/schemas/validator.ts @@ -1,5 +1,4 @@ import { SchemaValidator } from '@0xproject/json-schemas'; -import { Schema as JSONSchema, Validator } from 'jsonschema'; import { orderMetadataSchema } from 'ts/schemas/metadata_schema'; import { portalOrderSchema } from 'ts/schemas/portal_order_schema'; import { portalTokenMetadataSchema } from 'ts/schemas/portal_token_metadata'; diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 9567e129b..5481e90be 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -1,6 +1,5 @@ import { ECSignature } from '@0xproject/types'; import { BigNumber } from '@0xproject/utils'; -import * as _ from 'lodash'; import * as React from 'react'; export enum Side { diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts index e72a7f201..ace8a5ba0 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -1,6 +1,5 @@ import * as _ from 'lodash'; import { Environments, OutdatedWrappedEtherByNetworkId, PublicNodeUrlsByNetworkId } from 'ts/types'; -import { utils } from 'ts/utils/utils'; const BASE_URL = window.location.origin; const isDevelopment = _.includes( diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index 9dc1d492c..d281c5738 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -1,4 +1,3 @@ -import { Networks } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; export const constants = { diff --git a/packages/website/ts/utils/doc_utils.ts b/packages/website/ts/utils/doc_utils.ts index 2a599bcbe..019a29f5c 100644 --- a/packages/website/ts/utils/doc_utils.ts +++ b/packages/website/ts/utils/doc_utils.ts @@ -3,7 +3,6 @@ import { logUtils } from '@0xproject/utils'; import findVersions = require('find-versions'); import * as _ from 'lodash'; import { S3FileObject, VersionToFilePath } from 'ts/types'; -import { utils } from 'ts/utils/utils'; import convert = require('xml-js'); export const docUtils = { diff --git a/packages/website/ts/utils/error_reporter.ts b/packages/website/ts/utils/error_reporter.ts index 19f563880..548d4d41d 100644 --- a/packages/website/ts/utils/error_reporter.ts +++ b/packages/website/ts/utils/error_reporter.ts @@ -2,7 +2,6 @@ import { logUtils } from '@0xproject/utils'; import { Environments } from 'ts/types'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; -import { utils } from 'ts/utils/utils'; // Suggested way to include Rollbar with Webpack // https://github.com/rollbar/rollbar.js/tree/master/examples/webpack diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index b9d962b75..2c8c06c01 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -1,6 +1,6 @@ import { ContractWrappersError, ExchangeContractErrs } from '@0xproject/contract-wrappers'; import { OrderError } from '@0xproject/order-utils'; -import { constants as sharedConstants, EtherscanLinkSuffixes, Networks } from '@0xproject/react-shared'; +import { constants as sharedConstants, Networks } from '@0xproject/react-shared'; import { ECSignature, Provider } from '@0xproject/types'; import { BigNumber } from '@0xproject/utils'; import deepEqual = require('deep-equal'); -- cgit v1.2.3 From cc6338d0482abd2db253b8755109d4aec801e88d Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 5 Jun 2018 12:19:28 +0200 Subject: Add `switch-default` tslint rule and add missing default statement --- packages/website/ts/pages/landing/landing.tsx | 3 +++ 1 file changed, 3 insertions(+) (limited to 'packages/website') diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 02ecfa117..9d5e54c22 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -349,6 +349,9 @@ export class Landing extends React.Component { case ScreenWidths.Lg: colWidth = isRelayersOnly ? 2 : 2 - i % 2; break; + + default: + throw new Error(`Encountered unknown ScreenWidths value: ${this.state.screenWidth}`); } return (
-- cgit v1.2.3 From 25f62daf146895a1e0e0c966166f08f28467ae2e Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 5 Jun 2018 15:38:40 +0200 Subject: - Rename watch to watch_without_deps in sub-packages, so dev's don't confuse running watch from root dir, with sub-package dir - stop using special prebuild script name and run pre_build steps for `watch` and `build` commands - Remove `clean` step from `build`/`watch` --- packages/website/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/package.json b/packages/website/package.json index a17964f2b..77d761d6d 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -10,7 +10,7 @@ "build": "NODE_ENV=production webpack; exit 0;", "clean": "shx rm -f public/bundle*", "lint": "tslint --project . 'ts/**/*.ts' 'ts/**/*.tsx'", - "watch": "webpack-dev-server --content-base public --https", + "watch_without_deps": "webpack-dev-server --content-base public --https", "deploy_dogfood": "npm run build; aws s3 sync ./public/. s3://dogfood.0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers", "deploy_staging": "npm run build; aws s3 sync ./public/. s3://staging-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers", "deploy_live": "npm run build; aws s3 sync ./public/. s3://0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers" -- cgit v1.2.3 From 8de3f03b4982f14459b10a0ef1d60ab713d5c7be Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 5 Jun 2018 12:59:10 -0700 Subject: Use stricter check for subscribe input text --- packages/website/ts/components/forms/subscribe_form.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx index 4bef3a7b6..04ef28e70 100644 --- a/packages/website/ts/components/forms/subscribe_form.tsx +++ b/packages/website/ts/components/forms/subscribe_form.tsx @@ -1,4 +1,5 @@ import { colors } from '@0xproject/react-shared'; +import * as _ from 'lodash'; import * as React from 'react'; import { Button } from 'ts/components/ui/button'; @@ -102,7 +103,7 @@ export class SubscribeForm extends React.Component): Promise { event.preventDefault(); - if (!this.state.emailText) { + if (_.isUndefined(this.state.emailText) || _.isEmpty(this.state.emailText)) { return; } this.setState({ -- cgit v1.2.3 From afcb7f00da247f03782624e4694061325d53bb55 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 5 Jun 2018 15:37:51 -0700 Subject: Move prices into portal --- packages/website/ts/components/portal/portal.tsx | 32 ++++++++++++++++++++++++ packages/website/ts/components/wallet/wallet.tsx | 30 ---------------------- 2 files changed, 32 insertions(+), 30 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 9aa83546a..90d45208f 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -34,6 +34,7 @@ import { Dispatcher } from 'ts/redux/dispatcher'; import { BlockchainErrs, HashData, + ItemByAddress, Order, ProviderType, ScreenWidths, @@ -43,6 +44,7 @@ import { TokenVisibility, WebsitePaths, } from 'ts/types'; +import { backendClient } from 'ts/utils/backend_client'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { orderParser } from 'ts/utils/order_parser'; @@ -587,6 +589,7 @@ export class Portal extends React.Component { return this._blockchain.getTokenBalanceAndAllowanceAsync(userAddressIfExists, tokenAddress); }), ); + const priceByAddress = await this._getPriceByAddressAsync(tokenAddresses); for (let i = 0; i < tokenAddresses.length; i++) { // Order is preserved in Promise.all const [balance, allowance] = balancesAndAllowances[i]; @@ -595,6 +598,7 @@ export class Portal extends React.Component { balance, allowance, isLoaded: true, + price: priceByAddress[tokenAddress], }; } this.setState({ @@ -602,6 +606,34 @@ export class Portal extends React.Component { }); } + private async _getPriceByAddressAsync(tokenAddresses: string[]): Promise> { + if (_.isEmpty(tokenAddresses)) { + return {}; + } + // for each input token address, search for the corresponding symbol in this.props.tokenByAddress, if it exists + // create a mapping from existing symbols -> address + const tokenAddressBySymbol: { [symbol: string]: string } = {}; + _.each(tokenAddresses, address => { + const tokenIfExists = _.get(this.props.tokenByAddress, address); + if (!_.isUndefined(tokenIfExists)) { + const symbol = tokenIfExists.symbol; + tokenAddressBySymbol[symbol] = address; + } + }); + const tokenSymbols = _.keys(tokenAddressBySymbol); + try { + const priceBySymbol = await backendClient.getPriceInfoAsync(tokenSymbols); + const priceByAddress = _.mapKeys(priceBySymbol, (value, symbol) => _.get(tokenAddressBySymbol, symbol)); + const result = _.mapValues(priceByAddress, price => { + const priceBigNumber = new BigNumber(price); + return priceBigNumber; + }); + return result; + } catch (err) { + return {}; + } + } + private async _refetchTokenStateAsync(tokenAddress: string): Promise { await this._fetchBalancesAndAllowancesAsync([tokenAddress]); } diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 4383179a1..37233930e 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -37,7 +37,6 @@ import { zIndex } from 'ts/style/z_index'; import { BalanceErrs, BlockchainErrs, - ItemByAddress, ProviderType, ScreenWidths, Side, @@ -47,7 +46,6 @@ import { TokenStateByAddress, WebsitePaths, } from 'ts/types'; -import { backendClient } from 'ts/utils/backend_client'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles'; @@ -523,34 +521,6 @@ export class Wallet extends React.Component { }); return trackedTokenStateByAddress; } - - private async _getPriceByAddressAsync(tokenAddresses: string[]): Promise> { - if (_.isEmpty(tokenAddresses)) { - return {}; - } - // for each input token address, search for the corresponding symbol in this.props.tokenByAddress, if it exists - // create a mapping from existing symbols -> address - const tokenAddressBySymbol: { [symbol: string]: string } = {}; - _.each(tokenAddresses, address => { - const tokenIfExists = _.get(this.props.tokenByAddress, address); - if (!_.isUndefined(tokenIfExists)) { - const symbol = tokenIfExists.symbol; - tokenAddressBySymbol[symbol] = address; - } - }); - const tokenSymbols = _.keys(tokenAddressBySymbol); - try { - const priceBySymbol = await backendClient.getPriceInfoAsync(tokenSymbols); - const priceByAddress = _.mapKeys(priceBySymbol, (value, symbol) => _.get(tokenAddressBySymbol, symbol)); - const result = _.mapValues(priceByAddress, price => { - const priceBigNumber = new BigNumber(price); - return priceBigNumber; - }); - return result; - } catch (err) { - return {}; - } - } private _openWrappedEtherActionRow(wrappedEtherDirection: Side): void { this.setState({ wrappedEtherDirection, -- cgit v1.2.3 From e0af60d8a7e50227ea842e268c5c2712a975f573 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 5 Jun 2018 16:10:15 -0700 Subject: Move portal disclaimer to the account management section --- packages/website/ts/components/portal/portal.tsx | 34 +++++++++++++----------- 1 file changed, 18 insertions(+), 16 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 9aa83546a..e9f82047e 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -266,10 +266,6 @@ export class Portal extends React.Component { toggleDialogFn={updateShouldBlockchainErrDialogBeOpen} networkId={this.props.networkId} /> - {this.props.blockchainIsLoaded && ( { }, ]; return ( - - {_.map(accountManagementItems, item => { - return ( - - ); - })}} - - +
+ + {_.map(accountManagementItems, item => { + return ( + + ); + })}} + + + +
); } private _renderAccountManagementItem(item: AccountManagementItem): React.ReactNode { -- cgit v1.2.3 From 479c18e21f86870072abca46167b0fca4cf72dac Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 5 Jun 2018 16:41:17 -0700 Subject: Fix prettier --- packages/website/ts/components/ui/text.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index d3e205d12..259365618 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -52,5 +52,5 @@ export const TranslatedText: React.StatelessComponent = ({ translate, children, deco, - ...textProps, + ...textProps }) => {translate.get(children, deco)}; -- cgit v1.2.3 From 39570a9663abae56b0220745306386197fae65c1 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 5 Jun 2018 21:49:14 -0700 Subject: Remove TranslatedText --- packages/website/ts/components/ui/text.tsx | 15 --------------- 1 file changed, 15 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 259365618..99bf89966 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -39,18 +39,3 @@ Text.defaultProps = { }; Text.displayName = 'Text'; - -interface TranslatedProps { - children: Key; - translate: Translate; - deco?: Deco; -} - -export type TranslatedTextProps = TextProps & TranslatedProps; - -export const TranslatedText: React.StatelessComponent = ({ - translate, - children, - deco, - ...textProps -}) => {translate.get(children, deco)}; -- cgit v1.2.3 From d75fec0ceeb420763aa8ec9fb645ba6f286f8672 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 5 Jun 2018 22:03:26 -0700 Subject: Update balance amount rendering logic --- packages/website/ts/components/wallet/wallet.tsx | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 37233930e..43603bd75 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -135,7 +135,7 @@ const styles: Styles = { const ETHER_ICON_PATH = '/images/ether.png'; const ICON_DIMENSION = 28; -const TOKEN_AMOUNT_DISPLAY_PRECISION = 3; +const TOKEN_AMOUNT_DISPLAY_PRECISION = 5; const BODY_ITEM_KEY = 'BODY'; const HEADER_ITEM_KEY = 'HEADER'; const FOOTER_ITEM_KEY = 'FOOTER'; @@ -448,14 +448,19 @@ export class Wallet extends React.Component { symbol: string, isLoading: boolean = false, ): React.ReactNode { - const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); - const formattedAmount = unitAmount.toPrecision(TOKEN_AMOUNT_DISPLAY_PRECISION); - const result = `${formattedAmount} ${symbol}`; - return ( - -
{result}
- - ); + if (isLoading) { + return ( + +
0.00 XXX
+ + ); + } else { + const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); + const precision = Math.min(TOKEN_AMOUNT_DISPLAY_PRECISION, unitAmount.decimalPlaces()); + const formattedAmount = unitAmount.toFixed(precision); + const result = `${formattedAmount} ${symbol}`; + return
{result}
; + } } private _renderValue( amount: BigNumber, -- cgit v1.2.3 From 3f19ab1a87b3015923688669d1068f5619485da2 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 5 Jun 2018 22:48:13 -0700 Subject: Add isFullWidth prop to TokenBalances component --- packages/website/ts/components/portal/portal.tsx | 1 + packages/website/ts/components/token_balances.tsx | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 9420395cf..28fcf10df 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -484,6 +484,7 @@ export class Portal extends React.Component { userEtherBalanceInWei={this.props.userEtherBalanceInWei} networkId={this.props.networkId} lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} + isFullWidth={true} /> ); } diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 2bc065b0f..f313cd27e 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -73,6 +73,7 @@ interface TokenBalancesProps { userEtherBalanceInWei: BigNumber; networkId: number; lastForceTokenStateRefetch: number; + isFullWidth?: boolean; } interface TokenBalancesState { @@ -87,6 +88,7 @@ interface TokenBalancesState { export class TokenBalances extends React.Component { public static defaultProps: Partial = { userEtherBalanceInWei: new BigNumber(0), + isFullWidth: false, }; private _isUnmounted: boolean; public constructor(props: TokenBalancesProps) { @@ -187,8 +189,9 @@ export class TokenBalances extends React.Component +

{isTestNetwork ? 'Test ether' : 'Ether'}

-- cgit v1.2.3 From 2865f63c5d5a669011228f7e9050c3d8e456ae68 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 5 Jun 2018 22:52:22 -0700 Subject: Fix TokenBalances background color --- packages/website/ts/components/token_balances.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index f313cd27e..40cb4daa2 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -57,7 +57,7 @@ const TOKEN_COL_SPAN_SM = 1; const styles: Styles = { bgColor: { - backgroundColor: colors.grey50, + backgroundColor: 'transparent', }, }; -- cgit v1.2.3 From a0e8f410d196cff4c5e25c05f085c1818496168b Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 5 Jun 2018 23:02:48 -0700 Subject: Hide action column on mainnet --- packages/website/ts/components/token_balances.tsx | 27 ++++++++++++----------- 1 file changed, 14 insertions(+), 13 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 40cb4daa2..06da7f79a 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -271,7 +271,7 @@ export class TokenBalances extends React.ComponentAllowance
- Action + {isTestNetwork && Action} {this.props.screenWidth !== ScreenWidths.Sm && Send} @@ -376,17 +376,17 @@ export class TokenBalances extends React.Component - - {isMintable && ( - Minting...} - labelComplete="Minted!" - onClickAsyncFn={this._onMintTestTokensAsync.bind(this, token)} - /> - )} - {token.symbol === ZRX_TOKEN_SYMBOL && - utils.isTestNetwork(this.props.networkId) && ( + {utils.isTestNetwork(this.props.networkId) && ( + + {isMintable && ( + Minting...} + labelComplete="Minted!" + onClickAsyncFn={this._onMintTestTokensAsync.bind(this, token)} + /> + )} + {token.symbol === ZRX_TOKEN_SYMBOL && ( )} - + + )} {this.props.screenWidth !== ScreenWidths.Sm && ( Date: Tue, 5 Jun 2018 23:10:26 -0700 Subject: Update TradeHistory component --- packages/website/ts/components/portal/portal.tsx | 2 ++ .../ts/components/trade_history/trade_history.tsx | 17 ++++++++++++++--- 2 files changed, 16 insertions(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 28fcf10df..fb818056d 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -439,6 +439,8 @@ export class Portal extends React.Component { tokenByAddress={this.props.tokenByAddress} userAddress={this.props.userAddress} networkId={this.props.networkId} + isFullWidth={true} + shouldRenderHeader={false} /> ); } diff --git a/packages/website/ts/components/trade_history/trade_history.tsx b/packages/website/ts/components/trade_history/trade_history.tsx index 1ca9d866f..1c47d4ecd 100644 --- a/packages/website/ts/components/trade_history/trade_history.tsx +++ b/packages/website/ts/components/trade_history/trade_history.tsx @@ -13,6 +13,8 @@ interface TradeHistoryProps { tokenByAddress: TokenByAddress; userAddress: string; networkId: number; + isFullWidth?: boolean; + shouldRenderHeader?: boolean; } interface TradeHistoryState { @@ -20,6 +22,10 @@ interface TradeHistoryState { } export class TradeHistory extends React.Component { + public static defaultProps: Partial = { + isFullWidth: false, + shouldRenderHeader: true, + }; private _fillPollingIntervalId: number; public constructor(props: TradeHistoryProps) { super(props); @@ -38,10 +44,15 @@ export class TradeHistory extends React.Component -

Trade history

- +
+ {this.props.shouldRenderHeader && ( +
+

Trade history

+ +
+ )}
{this._renderTrades()}
-- cgit v1.2.3 From 03854baf53c5767db7130b8f6d7e91aae015e867 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 5 Jun 2018 23:18:26 -0700 Subject: Update EthWrappers component --- packages/website/ts/components/eth_wrappers.tsx | 7 ++++++- packages/website/ts/components/portal/portal.tsx | 1 + 2 files changed, 7 insertions(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index 1db5ff77f..984c2a1d2 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -35,6 +35,7 @@ interface EthWrappersProps { userAddress: string; userEtherBalanceInWei?: BigNumber; lastForceTokenStateRefetch: number; + isFullWidth?: boolean; } interface EthWrappersState { @@ -43,6 +44,9 @@ interface EthWrappersState { } export class EthWrappers extends React.Component { + public static defaultProps: Partial = { + isFullWidth: false, + }; private _isUnmounted: boolean; constructor(props: EthWrappersProps) { super(props); @@ -97,8 +101,9 @@ export class EthWrappers extends React.Component +

ETH Wrapper

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index fb818056d..33f39a468 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -430,6 +430,7 @@ export class Portal extends React.Component { userAddress={this.props.userAddress} userEtherBalanceInWei={this.props.userEtherBalanceInWei} lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} + isFullWidth={true} /> ); } -- cgit v1.2.3 From 1677817d9fb31d47080705fc4336555f74cbe687 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 5 Jun 2018 23:34:20 -0700 Subject: Update GenerateOrderForm and FillOrder components --- packages/website/ts/components/fill_order.tsx | 17 ++++++++++++++--- .../components/generate_order/generate_order_form.tsx | 17 ++++++++++++++--- packages/website/ts/components/portal/portal.tsx | 4 ++++ packages/website/ts/containers/generate_order_form.ts | 2 ++ 4 files changed, 34 insertions(+), 6 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index 0168ec8f6..e313a43fe 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -39,6 +39,8 @@ interface FillOrderProps { initialOrder: Order; dispatcher: Dispatcher; lastForceTokenStateRefetch: number; + isFullWidth?: boolean; + shouldRenderHeader?: boolean; } interface FillOrderState { @@ -61,6 +63,10 @@ interface FillOrderState { } export class FillOrder extends React.Component { + public static defaultProps: Partial = { + isFullWidth: false, + shouldRenderHeader: true, + }; private _isUnmounted: boolean; constructor(props: FillOrderProps) { super(props); @@ -97,10 +103,15 @@ export class FillOrder extends React.Component { this._isUnmounted = true; } public render(): React.ReactNode { + const rootClassName = this.props.isFullWidth ? 'clearfix' : 'lg-px4 md-px4 sm-px2'; return ( -
-

Fill an order

- +
+ {this.props.shouldRenderHeader && ( +
+

Fill an order

+ +
+ )}
{!this.props.isOrderInUrl && (
diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx index 5f968a5e4..e786719b0 100644 --- a/packages/website/ts/components/generate_order/generate_order_form.tsx +++ b/packages/website/ts/components/generate_order/generate_order_form.tsx @@ -47,6 +47,8 @@ interface GenerateOrderFormProps { sideToAssetToken: SideToAssetToken; tokenByAddress: TokenByAddress; lastForceTokenStateRefetch: number; + isFullWidth?: boolean; + shouldRenderHeader?: boolean; } interface GenerateOrderFormState { @@ -56,6 +58,10 @@ interface GenerateOrderFormState { } export class GenerateOrderForm extends React.Component { + public static defaultProps: Partial = { + isFullWidth: false, + shouldRenderHeader: true, + }; constructor(props: GenerateOrderFormProps) { super(props); this.state = { @@ -80,10 +86,15 @@ export class GenerateOrderForm extends React.Component -

Generate an order

- +
+ {this.props.shouldRenderHeader && ( +
+

Generate an order

+ +
+ )}
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 33f39a468..f0d26aeb0 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -451,6 +451,8 @@ export class Portal extends React.Component { blockchain={this._blockchain} hashData={this.props.hashData} dispatcher={this.props.dispatcher} + isFullWidth={true} + shouldRenderHeader={false} /> ); } @@ -470,6 +472,8 @@ export class Portal extends React.Component { tokenByAddress={this.props.tokenByAddress} dispatcher={this.props.dispatcher} lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} + isFullWidth={true} + shouldRenderHeader={false} /> ); } diff --git a/packages/website/ts/containers/generate_order_form.ts b/packages/website/ts/containers/generate_order_form.ts index 98c9b8cd6..23c869a1e 100644 --- a/packages/website/ts/containers/generate_order_form.ts +++ b/packages/website/ts/containers/generate_order_form.ts @@ -13,6 +13,8 @@ interface GenerateOrderFormProps { blockchain: Blockchain; hashData: HashData; dispatcher: Dispatcher; + isFullWidth?: boolean; + shouldRenderHeader?: boolean; } interface ConnectedState { -- cgit v1.2.3 From ab4d2faea3aadfcf75c31f5c02b6f772a07280fb Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 6 Jun 2018 00:09:28 -0700 Subject: Fix EthWrappers background color --- packages/website/ts/components/eth_wrappers.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index 984c2a1d2..80929113b 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -121,7 +121,7 @@ export class EthWrappers extends React.Component
Wrap ETH into an ERC20-compliant Ether token. 1 ETH = 1 WETH.
- +
ETH Token @@ -208,7 +208,7 @@ export class EthWrappers extends React.Component
-
+
WETH Version -- cgit v1.2.3 From b5dc72b126bc9b9572e5837ff10ee1e3d6b8916f Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 6 Jun 2018 00:19:41 -0700 Subject: Make scrollability a prop on TradeHistory --- packages/website/ts/components/portal/portal.tsx | 1 + .../website/ts/components/trade_history/trade_history.tsx | 12 +++++++++--- 2 files changed, 10 insertions(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index f0d26aeb0..009ef06f3 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -442,6 +442,7 @@ export class Portal extends React.Component { networkId={this.props.networkId} isFullWidth={true} shouldRenderHeader={false} + isScrollable={false} /> ); } diff --git a/packages/website/ts/components/trade_history/trade_history.tsx b/packages/website/ts/components/trade_history/trade_history.tsx index 1c47d4ecd..1e92cdb90 100644 --- a/packages/website/ts/components/trade_history/trade_history.tsx +++ b/packages/website/ts/components/trade_history/trade_history.tsx @@ -15,6 +15,7 @@ interface TradeHistoryProps { networkId: number; isFullWidth?: boolean; shouldRenderHeader?: boolean; + isScrollable?: boolean; } interface TradeHistoryState { @@ -25,6 +26,7 @@ export class TradeHistory extends React.Component = { isFullWidth: false, shouldRenderHeader: true, + isScrollable: true, }; private _fillPollingIntervalId: number; public constructor(props: TradeHistoryProps) { @@ -53,9 +55,13 @@ export class TradeHistory extends React.Component )} -
- {this._renderTrades()} -
+ {this.props.isScrollable ? ( +
+ {this._renderTrades()} +
+ ) : ( + this._renderTrades() + )} ); } -- cgit v1.2.3 From 2b4cd8b2ec5801786cd317870717260b503784dc Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 6 Jun 2018 01:33:21 -0700 Subject: Fix undefined ether balance --- .../ts/components/dialogs/eth_weth_conversion_dialog.tsx | 6 +++--- .../website/ts/components/eth_weth_conversion_button.tsx | 2 +- packages/website/ts/components/eth_wrappers.tsx | 14 +++++++++----- 3 files changed, 13 insertions(+), 9 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx index d647bba80..9ac78e80e 100644 --- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx +++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx @@ -20,7 +20,7 @@ interface EthWethConversionDialogProps { onCancelled: () => void; isOpen: boolean; token: Token; - etherBalanceInWei: BigNumber; + etherBalanceInWei?: BigNumber; lastForceTokenStateRefetch: number; } @@ -60,7 +60,7 @@ export class EthWethConversionDialog extends React.Component< , ]; const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH'; - return ( + return !_.isUndefined(this.props.etherBalanceInWei) ? ( {this._renderConversionDialogBody()} - ); + ) : null; } private _renderConversionDialogBody(): React.ReactNode { const explanation = diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx index 2fb35cc1c..4b91a2ebd 100644 --- a/packages/website/ts/components/eth_weth_conversion_button.tsx +++ b/packages/website/ts/components/eth_weth_conversion_button.tsx @@ -18,7 +18,7 @@ interface EthWethConversionButtonProps { ethToken: Token; dispatcher: Dispatcher; blockchain: Blockchain; - userEtherBalanceInWei?: BigNumber; + userEtherBalanceInWei: BigNumber; isOutdatedWrappedEther: boolean; onConversionSuccessful?: () => void; isDisabled?: boolean; diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index 80929113b..b84e15857 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -97,10 +97,9 @@ export class EthWrappers extends React.Component @@ -148,7 +147,11 @@ export class EthWrappers extends React.Component - {userEtherBalanceInEth.toFixed(configs.AMOUNT_DISPLAY_PRECSION)} ETH + {!_.isUndefined(userEtherBalanceInEth) ? ( + `${userEtherBalanceInEth.toFixed(configs.AMOUNT_DISPLAY_PRECSION)} ETH` + ) : ( + + )} -- cgit v1.2.3 From 2f2724dff50ccf4bc897b5ef6dbc4685a1e8352d Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 6 Jun 2018 12:39:15 +0200 Subject: Fix remaining tslint issues --- .../website/ts/components/forms/subscribe_form.tsx | 1 - .../ts/components/top_bar/provider_display.tsx | 1 - packages/website/ts/components/ui/text.tsx | 2 -- packages/website/ts/pages/landing/landing.tsx | 22 ---------------------- packages/website/ts/style/theme.ts | 2 ++ 5 files changed, 2 insertions(+), 26 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx index 04ef28e70..8ef58328e 100644 --- a/packages/website/ts/components/forms/subscribe_form.tsx +++ b/packages/website/ts/components/forms/subscribe_form.tsx @@ -6,7 +6,6 @@ import { Button } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { Input } from 'ts/components/ui/input'; import { Text } from 'ts/components/ui/text'; -import { styled } from 'ts/style/theme'; import { backendClient } from 'ts/utils/backend_client'; export interface SubscribeFormProps {} diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index dba08f85c..cb7c9b483 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -10,7 +10,6 @@ import { DropDown } from 'ts/components/ui/drop_down'; import { Identicon } from 'ts/components/ui/identicon'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; -import { zIndex } from 'ts/style/z_index'; import { ProviderType } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 99bf89966..e90c1707d 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -1,8 +1,6 @@ import { colors } from '@0xproject/react-shared'; import * as React from 'react'; import { styled } from 'ts/style/theme'; -import { Deco, Key } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; export type TextTag = 'p' | 'div' | 'span' | 'label'; diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 053310b0e..68c300454 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -222,17 +222,6 @@ export class Landing extends React.Component { } private _renderHero(): React.ReactNode { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - const buttonLabelStyle: React.CSSProperties = { - textTransform: 'none', - fontSize: isSmallScreen ? 12 : 14, - fontWeight: 400, - }; - const lightButtonStyle: React.CSSProperties = { - borderRadius: 6, - border: '1px solid #D8D8D8', - lineHeight: '33px', - height: 38, - }; const left = 'col lg-col-7 md-col-7 col-12 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center'; return (
@@ -749,17 +738,6 @@ export class Landing extends React.Component { } private _renderCallToAction(): React.ReactNode { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - const buttonLabelStyle: React.CSSProperties = { - textTransform: 'none', - fontSize: 15, - fontWeight: 400, - }; - const lightButtonStyle: React.CSSProperties = { - borderRadius: 6, - border: `1px solid ${colors.grey500}`, - lineHeight: '33px', - height: 49, - }; const callToActionClassNames = 'lg-pr3 md-pr3 lg-right-align md-right-align sm-center sm-px3 h4 lg-table-cell md-table-cell'; return ( diff --git a/packages/website/ts/style/theme.ts b/packages/website/ts/style/theme.ts index 9e447e7ee..ce7d6975d 100644 --- a/packages/website/ts/style/theme.ts +++ b/packages/website/ts/style/theme.ts @@ -1,5 +1,6 @@ import * as styledComponents from 'styled-components'; +// tslint:disable:no-unnecessary-type-assertion const { default: styled, css, @@ -7,6 +8,7 @@ const { keyframes, ThemeProvider, } = styledComponents as styledComponents.ThemedStyledComponentsModule; +// tslint:enable:no-unnecessary-type-assertion export interface IThemeInterface {} -- cgit v1.2.3 From cb754ee1253622974e751e4a8d723a424250c878 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 6 Jun 2018 15:39:38 +0200 Subject: move generated contract wrappers from `contract_wrappers/generated/` to `generated_contract_wrappers` in package with no non-generated contract wrappers --- packages/website/ts/containers/zero_ex_js_documentation.ts | 3 +++ 1 file changed, 3 insertions(+) (limited to 'packages/website') diff --git a/packages/website/ts/containers/zero_ex_js_documentation.ts b/packages/website/ts/containers/zero_ex_js_documentation.ts index f68e2335f..59f532b62 100644 --- a/packages/website/ts/containers/zero_ex_js_documentation.ts +++ b/packages/website/ts/containers/zero_ex_js_documentation.ts @@ -103,6 +103,9 @@ const docsInfoConfig: DocsInfoConfig = { '"0x.js/src/contract_wrappers/generated/ether_token"', '"0x.js/src/contract_wrappers/generated/token"', '"0x.js/src/contract_wrappers/generated/exchange"', + '"0x.js/src/generated_contract_wrappers/ether_token"', + '"0x.js/src/generated_contract_wrappers/token"', + '"0x.js/src/generated_contract_wrappers/exchange"', ], }, menuSubsectionToVersionWhenIntroduced: { -- cgit v1.2.3 From cf8fdd3a701f21bfc3b2ec8397fa65948f5cdc78 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 6 Jun 2018 16:26:04 +0200 Subject: Move spawnSwitchErr to @0xproject/utils --- packages/website/ts/components/token_balances.tsx | 4 ++-- packages/website/ts/components/ui/lifecycle_raised_button.tsx | 3 ++- packages/website/ts/components/wallet/wallet.tsx | 4 ++-- packages/website/ts/utils/utils.ts | 3 --- 4 files changed, 6 insertions(+), 8 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 2bc065b0f..ed12cd85a 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -6,7 +6,7 @@ import { Styles, utils as sharedUtils, } from '@0xproject/react-shared'; -import { BigNumber, logUtils } from '@0xproject/utils'; +import { BigNumber, errorUtils, logUtils } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; @@ -499,7 +499,7 @@ export class TokenBalances extends React.Component { buttonIconName = 'zmdi-long-arrow-up'; break; default: - throw utils.spawnSwitchErr('wrappedEtherDirection', wrappedEtherDirection); + throw errorUtils.spawnSwitchErr('wrappedEtherDirection', wrappedEtherDirection); } } const onClick = isWrappedEtherDirectionOpen diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index b9d962b75..a802e16d7 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -33,9 +33,6 @@ export const utils = { throw new Error(message); } }, - spawnSwitchErr(name: string, value: any): Error { - return new Error(`Unexpected switch value: ${value} encountered for ${name}`); - }, isNumeric(n: string): boolean { return !isNaN(parseFloat(n)) && isFinite(Number(n)); }, -- cgit v1.2.3 From 3898b8e8ab083689221e39de6b18fe31e6699d38 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 5 Jun 2018 21:36:05 -0700 Subject: Wrap AllowanceToggle in redux container --- .../ts/components/inputs/allowance_toggle.tsx | 8 +++-- .../onboarding/portal_onboarding_flow.tsx | 15 ++++++++ packages/website/ts/components/token_balances.tsx | 5 +-- packages/website/ts/components/wallet/wallet.tsx | 7 ++-- .../ts/containers/inputs/allowance_toggle.ts | 42 ++++++++++++++++++++++ 5 files changed, 66 insertions(+), 11 deletions(-) create mode 100644 packages/website/ts/containers/inputs/allowance_toggle.ts (limited to 'packages/website') diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx index a8df4935a..ca4b89f77 100644 --- a/packages/website/ts/components/inputs/allowance_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_toggle.tsx @@ -18,11 +18,11 @@ interface AllowanceToggleProps { networkId: number; blockchain: Blockchain; dispatcher: Dispatcher; - onErrorOccurred: (errType: BalanceErrs) => void; token: Token; tokenState: TokenState; userAddress: string; - isDisabled: boolean; + isDisabled?: boolean; + onErrorOccurred?: (errType: BalanceErrs) => void; refetchTokenStateAsync: () => Promise; } @@ -57,6 +57,10 @@ const styles: Styles = { }; export class AllowanceToggle extends React.Component { + public static defaultProps = { + onErrorOccurred: _.noop, + isDisabled: false, + }; constructor(props: AllowanceToggleProps) { super(props); this.state = { diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index bf52684d7..65cb20733 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -5,6 +5,7 @@ import { BigNumber } from '@0xproject/utils'; import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; import { ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types'; import { utils } from 'ts/utils/utils'; +import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; export interface PortalOnboardingFlowProps { stepIndex: number; @@ -77,6 +78,12 @@ export class PortalOnboardingFlow extends React.Component + ); + } } diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 2bc065b0f..f95bfb39d 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -22,7 +22,7 @@ import ReactTooltip = require('react-tooltip'); import firstBy = require('thenby'); import { Blockchain } from 'ts/blockchain'; import { AssetPicker } from 'ts/components/generate_order/asset_picker'; -import { AllowanceToggle } from 'ts/components/inputs/allowance_toggle'; +import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { SendButton } from 'ts/components/send_button'; import { HelpTooltip } from 'ts/components/ui/help_tooltip'; import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button'; @@ -362,13 +362,10 @@ export class TokenBalances extends React.Component diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 37233930e..f8ec05790 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -23,7 +23,7 @@ import ReactTooltip = require('react-tooltip'); import firstBy = require('thenby'); import { Blockchain } from 'ts/blockchain'; -import { AllowanceToggle } from 'ts/components/inputs/allowance_toggle'; +import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { Container } from 'ts/components/ui/container'; import { IconButton } from 'ts/components/ui/icon_button'; import { Identicon } from 'ts/components/ui/identicon'; @@ -428,15 +428,12 @@ export class Wallet extends React.Component { ); } private _renderAllowanceToggle(config: AllowanceToggleConfig): React.ReactNode { + // TODO: Error handling return ( this.props.refetchTokenStateAsync(config.token.address)} /> diff --git a/packages/website/ts/containers/inputs/allowance_toggle.ts b/packages/website/ts/containers/inputs/allowance_toggle.ts new file mode 100644 index 000000000..1dd7b2101 --- /dev/null +++ b/packages/website/ts/containers/inputs/allowance_toggle.ts @@ -0,0 +1,42 @@ +import * as React from 'react'; +import { BalanceErrs, Token, TokenState } from 'ts/types'; +import { ActionTypes, ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; +import { Blockchain } from 'ts/blockchain'; +import { State } from 'ts/redux/reducer'; + +import { AllowanceToggle as AllowanceToggleComponent } from 'ts/components/inputs/allowance_toggle'; +import { Dispatcher } from 'ts/redux/dispatcher'; + +interface AllowanceToggleProps { + blockchain: Blockchain; + onErrorOccurred?: (errType: BalanceErrs) => void; + token: Token; + tokenState: TokenState; + isDisabled: boolean; + refetchTokenStateAsync: () => Promise; +} + +interface ConnectedState { + networkId: number; + userAddress: string; +} + +interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +const mapStateToProps = (state: State, ownProps: AllowanceToggleProps): ConnectedState => ({ + networkId: state.networkId, + userAddress: state.userAddress, +}); + +const mapDispatchTopProps = (dispatch: Dispatch): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const AllowanceToggle: React.ComponentClass = connect( + mapStateToProps, + mapDispatchTopProps, +)(AllowanceToggleComponent); -- cgit v1.2.3 From 625f40cfa6fdccd82392c02c1d785fac37d966eb Mon Sep 17 00:00:00 2001 From: Leonid Logvinov Date: Wed, 6 Jun 2018 10:31:38 -0700 Subject: Add EthereumTypes to _renderDrawer --- packages/website/ts/components/top_bar/top_bar.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'packages/website') diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 3e97dc741..2561da4e6 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -385,6 +385,14 @@ export class TopBar extends React.Component { )} + {!this._isViewingEthereumTypesDocs() && ( + + + {this.props.translate.get(Key.EthereumTypes, Deco.Cap)}{' '} + {this.props.translate.get(Key.Docs, Deco.Cap)} + + + )} {!this._isViewingPortal() && ( @@ -513,6 +521,9 @@ export class TopBar extends React.Component { private _isViewingSubprovidersDocs(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.Subproviders); } + private _isViewingEthereumTypesDocs(): boolean { + return _.includes(this.props.location.pathname, WebsitePaths.EthereumTypes); + } private _isViewingWiki(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.Wiki); } -- cgit v1.2.3 From 6a2da6dc06c616ba50930bbe04a6fa200885ecfd Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 6 Jun 2018 11:23:57 -0700 Subject: Fix merge conflict --- packages/website/ts/components/wallet/wallet.tsx | 14 -------------- 1 file changed, 14 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 34e40dfb0..4f099d636 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -496,20 +496,6 @@ export class Wallet extends React.Component { ); } -<<<<<<< HEAD -======= - private _getInitialTrackedTokenStateByAddress(tokenAddresses: string[]): TokenStateByAddress { - const trackedTokenStateByAddress: TokenStateByAddress = {}; - _.each(tokenAddresses, tokenAddress => { - trackedTokenStateByAddress[tokenAddress] = { - balance: new BigNumber(0), - allowance: new BigNumber(0), - isLoaded: false, - }; - }); - return trackedTokenStateByAddress; - } ->>>>>>> v2-prototype private _openWrappedEtherActionRow(wrappedEtherDirection: Side): void { this.setState({ wrappedEtherDirection, -- cgit v1.2.3 From 612cc96e417c1397e1874be22208864f12acbda3 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 6 Jun 2018 11:47:11 -0700 Subject: Add utilities for getting tokens from tokensByAddress --- .../ts/components/onboarding/portal_onboarding_flow.tsx | 3 +++ packages/website/ts/components/portal/portal.tsx | 6 +++++- packages/website/ts/containers/portal_onboarding_flow.ts | 3 +++ packages/website/ts/utils/utils.ts | 11 +++++++++-- 4 files changed, 20 insertions(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 65cb20733..55d89d61e 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -2,12 +2,14 @@ import * as _ from 'lodash'; import * as React from 'react'; import { BigNumber } from '@0xproject/utils'; +import { Blockchain } from 'ts/blockchain'; import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; import { ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types'; import { utils } from 'ts/utils/utils'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; export interface PortalOnboardingFlowProps { + blockchain: Blockchain; stepIndex: number; isRunning: boolean; userAddress: string; @@ -20,6 +22,7 @@ export interface PortalOnboardingFlowProps { trackedTokenStateByAddress: TokenStateByAddress; updateIsRunning: (isRunning: boolean) => void; updateOnboardingStep: (stepIndex: number) => void; + refetchTokenStateAsync: (tokenAddress: string) => Promise; } export class PortalOnboardingFlow extends React.Component { diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 90d45208f..02a58cbf3 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -235,7 +235,11 @@ export class Portal extends React.Component { : TokenVisibility.TRACKED; return (
- + Promise; } interface ConnectedState { diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index b9d962b75..9c564ebc5 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -21,6 +21,7 @@ import { import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import * as u2f from 'ts/vendor/u2f_api'; +import { Container } from '../components/ui/container'; const LG_MIN_EM = 64; const MD_MIN_EM = 52; @@ -322,8 +323,14 @@ export const utils = { return this.isDevelopment() || this.isStaging() || this.isDogfood(); }, getEthToken(tokenByAddress: TokenByAddress): Token { + return utils.getTokenBySymbol(constants.ETHER_TOKEN_SYMBOL, tokenByAddress); + }, + getZrxToken(tokenByAddress: TokenByAddress): Token { + return utils.getTokenBySymbol(constants.ZRX_TOKEN_SYMBOL, tokenByAddress); + }, + getTokenBySymbol(symbol: string, tokenByAddress: TokenByAddress): Token { const tokens = _.values(tokenByAddress); - const etherToken = _.find(tokens, { symbol: constants.ETHER_TOKEN_SYMBOL }); - return etherToken; + const token = _.find(tokens, { symbol }); + return token; }, }; -- cgit v1.2.3 From a97d77064aacda3de74b04894f110b05298c5ca8 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 6 Jun 2018 15:26:40 -0700 Subject: Get build and tests to pass --- packages/website/ts/pages/landing/landing.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 68c300454..f091778f4 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -9,7 +9,7 @@ import { TopBar } from 'ts/components/top_bar/top_bar'; import { CallToAction } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Deco, Key, ScreenWidths, WebsitePaths } from 'ts/types'; +import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; -- cgit v1.2.3 From 14e3f413a23f9ee41d880539f98e2957708b035f Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 6 Jun 2018 16:11:23 -0700 Subject: Change shouldRenderHeader prop to shouldHideHeader --- packages/website/ts/components/fill_order.tsx | 6 +++--- .../website/ts/components/generate_order/generate_order_form.tsx | 6 +++--- packages/website/ts/components/portal/portal.tsx | 6 +++--- packages/website/ts/components/trade_history/trade_history.tsx | 6 +++--- packages/website/ts/containers/generate_order_form.ts | 2 +- 5 files changed, 13 insertions(+), 13 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index e313a43fe..b6b52993e 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -40,7 +40,7 @@ interface FillOrderProps { dispatcher: Dispatcher; lastForceTokenStateRefetch: number; isFullWidth?: boolean; - shouldRenderHeader?: boolean; + shouldHideHeader?: boolean; } interface FillOrderState { @@ -65,7 +65,7 @@ interface FillOrderState { export class FillOrder extends React.Component { public static defaultProps: Partial = { isFullWidth: false, - shouldRenderHeader: true, + shouldHideHeader: false, }; private _isUnmounted: boolean; constructor(props: FillOrderProps) { @@ -106,7 +106,7 @@ export class FillOrder extends React.Component { const rootClassName = this.props.isFullWidth ? 'clearfix' : 'lg-px4 md-px4 sm-px2'; return (
- {this.props.shouldRenderHeader && ( + {!this.props.shouldHideHeader && (

Fill an order

diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx index e786719b0..52e3b73cd 100644 --- a/packages/website/ts/components/generate_order/generate_order_form.tsx +++ b/packages/website/ts/components/generate_order/generate_order_form.tsx @@ -48,7 +48,7 @@ interface GenerateOrderFormProps { tokenByAddress: TokenByAddress; lastForceTokenStateRefetch: number; isFullWidth?: boolean; - shouldRenderHeader?: boolean; + shouldHideHeader?: boolean; } interface GenerateOrderFormState { @@ -60,7 +60,7 @@ interface GenerateOrderFormState { export class GenerateOrderForm extends React.Component { public static defaultProps: Partial = { isFullWidth: false, - shouldRenderHeader: true, + shouldHideHeader: false, }; constructor(props: GenerateOrderFormProps) { super(props); @@ -89,7 +89,7 @@ export class GenerateOrderForm extends React.Component - {this.props.shouldRenderHeader && ( + {!this.props.shouldHideHeader && (

Generate an order

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 009ef06f3..8affcfb26 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -441,7 +441,7 @@ export class Portal extends React.Component { userAddress={this.props.userAddress} networkId={this.props.networkId} isFullWidth={true} - shouldRenderHeader={false} + shouldHideHeader={true} isScrollable={false} /> ); @@ -453,7 +453,7 @@ export class Portal extends React.Component { hashData={this.props.hashData} dispatcher={this.props.dispatcher} isFullWidth={true} - shouldRenderHeader={false} + shouldHideHeader={true} /> ); } @@ -474,7 +474,7 @@ export class Portal extends React.Component { dispatcher={this.props.dispatcher} lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} isFullWidth={true} - shouldRenderHeader={false} + shouldHideHeader={true} /> ); } diff --git a/packages/website/ts/components/trade_history/trade_history.tsx b/packages/website/ts/components/trade_history/trade_history.tsx index 1e92cdb90..84c0f70a8 100644 --- a/packages/website/ts/components/trade_history/trade_history.tsx +++ b/packages/website/ts/components/trade_history/trade_history.tsx @@ -14,7 +14,7 @@ interface TradeHistoryProps { userAddress: string; networkId: number; isFullWidth?: boolean; - shouldRenderHeader?: boolean; + shouldHideHeader?: boolean; isScrollable?: boolean; } @@ -25,7 +25,7 @@ interface TradeHistoryState { export class TradeHistory extends React.Component { public static defaultProps: Partial = { isFullWidth: false, - shouldRenderHeader: true, + shouldHideHeader: false, isScrollable: true, }; private _fillPollingIntervalId: number; @@ -49,7 +49,7 @@ export class TradeHistory extends React.Component - {this.props.shouldRenderHeader && ( + {!this.props.shouldHideHeader && (

Trade history

diff --git a/packages/website/ts/containers/generate_order_form.ts b/packages/website/ts/containers/generate_order_form.ts index 23c869a1e..afbac58e2 100644 --- a/packages/website/ts/containers/generate_order_form.ts +++ b/packages/website/ts/containers/generate_order_form.ts @@ -14,7 +14,7 @@ interface GenerateOrderFormProps { hashData: HashData; dispatcher: Dispatcher; isFullWidth?: boolean; - shouldRenderHeader?: boolean; + shouldHideHeader?: boolean; } interface ConnectedState { -- cgit v1.2.3 From e75721016e35a07b52d2f164d860c3e18b1d4261 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 6 Jun 2018 16:43:05 -0700 Subject: Fix linting issues --- packages/website/ts/containers/ethereum_types_documentation.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/containers/ethereum_types_documentation.ts b/packages/website/ts/containers/ethereum_types_documentation.ts index 28d3d92dc..f6d614779 100644 --- a/packages/website/ts/containers/ethereum_types_documentation.ts +++ b/packages/website/ts/containers/ethereum_types_documentation.ts @@ -1,13 +1,11 @@ import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; -import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages, Environments, WebsitePaths } from 'ts/types'; -import { configs } from 'ts/utils/configs'; +import { DocPackages } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; -- cgit v1.2.3 From e0cf68f1d5e007d054c348f7a7a628feaf25e400 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 6 Jun 2018 16:45:26 -0700 Subject: Remove unused variable --- packages/website/ts/components/token_balances.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index b8544cb20..6f5aa756e 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -1,5 +1,4 @@ import { - colors, constants as sharedConstants, EtherscanLinkSuffixes, Networks, -- cgit v1.2.3 From 870eca0d9f875f784c1847993246db3097f68405 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 6 Jun 2018 16:59:28 -0700 Subject: Run prettier --- packages/website/ts/components/legacy_portal/legacy_portal.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/legacy_portal/legacy_portal.tsx b/packages/website/ts/components/legacy_portal/legacy_portal.tsx index baca1b334..35e917eec 100644 --- a/packages/website/ts/components/legacy_portal/legacy_portal.tsx +++ b/packages/website/ts/components/legacy_portal/legacy_portal.tsx @@ -22,15 +22,7 @@ import { FlashMessage } from 'ts/components/ui/flash_message'; import { GenerateOrderForm } from 'ts/containers/generate_order_form'; import { localStorage } from 'ts/local_storage/local_storage'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { - BlockchainErrs, - HashData, - Order, - ProviderType, - ScreenWidths, - TokenByAddress, - WebsitePaths, -} from 'ts/types'; +import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, TokenByAddress, WebsitePaths } from 'ts/types'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { orderParser } from 'ts/utils/order_parser'; -- cgit v1.2.3 From cbe5438a31a54a92a198b2cc5ad8a5d5feb033b4 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 6 Jun 2018 18:06:03 -0700 Subject: Render TokenAllowance --- .../onboarding/portal_onboarding_flow.tsx | 21 ++++++++++++++++++--- .../ts/containers/inputs/allowance_toggle.ts | 4 ++-- 2 files changed, 20 insertions(+), 5 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 55d89d61e..78592c67f 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { BigNumber } from '@0xproject/utils'; import { Blockchain } from 'ts/blockchain'; import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; -import { ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types'; +import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/types'; import { utils } from 'ts/utils/utils'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; @@ -83,7 +83,8 @@ export class PortalOnboardingFlow extends React.Component Unlock your tokens for trading. You only need to do this once for each token. {this._renderEthAllowanceToggle()}
, + content: 'blah', placement: 'right', continueButtonDisplay: 'disabled', }, @@ -135,9 +136,23 @@ export class PortalOnboardingFlow extends React.Component diff --git a/packages/website/ts/containers/inputs/allowance_toggle.ts b/packages/website/ts/containers/inputs/allowance_toggle.ts index 1dd7b2101..6f50072ca 100644 --- a/packages/website/ts/containers/inputs/allowance_toggle.ts +++ b/packages/website/ts/containers/inputs/allowance_toggle.ts @@ -14,8 +14,8 @@ interface AllowanceToggleProps { onErrorOccurred?: (errType: BalanceErrs) => void; token: Token; tokenState: TokenState; - isDisabled: boolean; - refetchTokenStateAsync: () => Promise; + isDisabled?: boolean; + refetchTokenStateAsync: (tokenAddress: string) => Promise; } interface ConnectedState { -- cgit v1.2.3 From 011f14d1155fd3f61e53aaa16681afd5c9c9f892 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 7 Jun 2018 21:24:27 +0200 Subject: Fix linter issue --- packages/website/ts/components/ui/lifecycle_raised_button.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx index a24de56b7..380fbc77d 100644 --- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx +++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx @@ -2,7 +2,6 @@ import { colors } from '@0xproject/react-shared'; import { errorUtils } from '@0xproject/utils'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; -import { utils } from 'ts/utils/utils'; const COMPLETE_STATE_SHOW_LENGTH_MS = 2000; -- cgit v1.2.3 From e1879ef4d91fc58203d9748eca38695b79c43674 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 11 Jun 2018 23:42:30 +0200 Subject: Fix no-unused-variable tslint rule to include parameters and fix issues --- packages/website/ts/blockchain.ts | 8 ++++---- packages/website/ts/components/dialogs/ledger_config_dialog.tsx | 4 ++-- packages/website/ts/components/eth_wrappers.tsx | 6 ++---- packages/website/ts/components/fill_order.tsx | 2 +- packages/website/ts/components/footer.tsx | 2 +- .../website/ts/components/generate_order/generate_order_form.tsx | 2 +- packages/website/ts/components/generate_order/new_token_form.tsx | 6 +++--- packages/website/ts/components/inputs/balance_bounded_input.tsx | 2 +- packages/website/ts/components/inputs/expiration_input.tsx | 4 ++-- packages/website/ts/components/legacy_portal/legacy_portal.tsx | 4 ++-- packages/website/ts/components/portal/portal.tsx | 2 +- packages/website/ts/components/redirecter.tsx | 2 +- packages/website/ts/components/token_balances.tsx | 2 +- packages/website/ts/components/ui/drop_down.tsx | 2 +- packages/website/ts/components/wallet/wallet.tsx | 4 ++-- packages/website/ts/components/wallet/wrap_ether_item.tsx | 2 +- packages/website/ts/containers/about.ts | 2 +- packages/website/ts/containers/connect_documentation.ts | 2 +- packages/website/ts/containers/ethereum_types_documentation.ts | 2 +- packages/website/ts/containers/faq.ts | 2 +- packages/website/ts/containers/generate_order_form.ts | 2 +- packages/website/ts/containers/json_schemas_documentation.ts | 2 +- packages/website/ts/containers/landing.ts | 2 +- packages/website/ts/containers/legacy_portal.ts | 2 +- packages/website/ts/containers/not_found.ts | 2 +- packages/website/ts/containers/order_utils_documentation.ts | 2 +- packages/website/ts/containers/portal.ts | 2 +- packages/website/ts/containers/portal_onboarding_flow.ts | 2 +- packages/website/ts/containers/smart_contracts_documentation.ts | 2 +- packages/website/ts/containers/sol_compiler_documentation.ts | 2 +- packages/website/ts/containers/sol_cov_documentation.ts | 2 +- packages/website/ts/containers/subproviders_documentation.ts | 2 +- packages/website/ts/containers/web3_wrapper_documentation.ts | 2 +- packages/website/ts/containers/wiki.ts | 2 +- packages/website/ts/containers/zero_ex_js_documentation.ts | 2 +- packages/website/ts/local_storage/trade_history_storage.tsx | 2 +- packages/website/ts/pages/not_found.tsx | 2 +- packages/website/ts/pages/wiki/wiki.tsx | 4 ++-- packages/website/ts/utils/error_reporter.ts | 2 +- packages/website/ts/utils/utils.ts | 4 ++-- 40 files changed, 52 insertions(+), 54 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 6e4d03e27..c955e1033 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -132,7 +132,7 @@ export class Blockchain { return provider; } - constructor(dispatcher: Dispatcher, isSalePage: boolean = false) { + constructor(dispatcher: Dispatcher) { this._dispatcher = dispatcher; const defaultGasPrice = GWEI_IN_WEI * 30; this._defaultGasPrice = new BigNumber(defaultGasPrice); @@ -577,13 +577,13 @@ export class Blockchain { trackedTokensByAddress[token.address] = token; }); if (!_.isUndefined(this._userAddressIfExists)) { - _.each(trackedTokensByAddress, (token: Token, address: string) => { + _.each(trackedTokensByAddress, (token: Token) => { trackedTokenStorage.addTrackedTokenToUser(this._userAddressIfExists, this.networkId, token); }); } } else { // Properly set all tokenRegistry tokens `isTracked` to true if they are in the existing trackedTokens array - _.each(trackedTokensByAddress, (trackedToken: Token, address: string) => { + _.each(trackedTokensByAddress, (_trackedToken: Token, address: string) => { if (!_.isUndefined(tokenRegistryTokensByAddress[address])) { tokenRegistryTokensByAddress[address].isTracked = true; } @@ -754,7 +754,7 @@ export class Blockchain { const tokenRegistryTokens = await this._contractWrappers.tokenRegistry.getTokensAsync(); const tokenByAddress: TokenByAddress = {}; - _.each(tokenRegistryTokens, (t: ZeroExToken, i: number) => { + _.each(tokenRegistryTokens, (t: ZeroExToken) => { // HACK: For now we have a hard-coded list of iconUrls for the dummyTokens // TODO: Refactor this out and pull the iconUrl directly from the TokenRegistry const iconUrl = configs.ICON_URL_BY_SYMBOL[t.symbol]; diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx index 196414407..c9727b553 100644 --- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx +++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx @@ -250,7 +250,7 @@ export class LedgerConfigDialog extends React.Component - - {this._renderOutdatedWeths(etherToken, this.state.ethTokenState)} - + {this._renderOutdatedWeths(etherToken)}
@@ -249,7 +247,7 @@ export class EthWrappers extends React.Component ); } - private _renderOutdatedWeths(etherToken: Token, etherTokenState: TokenState): React.ReactNode { + private _renderOutdatedWeths(etherToken: Token): React.ReactNode { const rows = _.map( configs.OUTDATED_WRAPPED_ETHERS, (outdatedWETHByNetworkId: OutdatedWrappedEtherByNetworkId) => { diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index b6b52993e..f3ea44286 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -351,7 +351,7 @@ export class FillOrder extends React.Component { this._onFillOrderClickFireAndForgetAsync(); } } - private _onFillAmountChange(isValid: boolean, amount?: BigNumber): void { + private _onFillAmountChange(_isValid: boolean, amount?: BigNumber): void { this.props.dispatcher.updateOrderFillAmount(amount); } private _onFillOrderJSONChanged(event: any): void { diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index c44e41084..9fb332a98 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -235,7 +235,7 @@ export class Footer extends React.Component {
); } - private _updateLanguage(e: any, index: number, value: Language): void { + private _updateLanguage(_event: any, _index: number, value: Language): void { this.setState({ selectedLanguage: value, }); diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx index 52e3b73cd..d26b5c3fa 100644 --- a/packages/website/ts/components/generate_order/generate_order_form.tsx +++ b/packages/website/ts/components/generate_order/generate_order_form.tsx @@ -226,7 +226,7 @@ export class GenerateOrderForm extends React.Component ); } - private _onTokenAmountChange(token: Token, side: Side, isValid: boolean, amount?: BigNumber): void { + private _onTokenAmountChange(token: Token, side: Side, _isValid: boolean, amount?: BigNumber): void { this.props.dispatcher.updateChosenAssetToken(side, { address: token.address, amount, diff --git a/packages/website/ts/components/generate_order/new_token_form.tsx b/packages/website/ts/components/generate_order/new_token_form.tsx index a9b8e9589..176a0807b 100644 --- a/packages/website/ts/components/generate_order/new_token_form.tsx +++ b/packages/website/ts/components/generate_order/new_token_form.tsx @@ -152,7 +152,7 @@ export class NewTokenForm extends React.Component ); } - private _onValueChange(e: any, amountString: string): void { + private _onValueChange(_event: any, amountString: string): void { this._setAmountState(amountString, this.props.balance, () => { const isValid = _.isUndefined(this._validate(amountString, this.props.balance)); const isPositiveNumber = utils.isNumeric(amountString) && !_.includes(amountString, '-'); diff --git a/packages/website/ts/components/inputs/expiration_input.tsx b/packages/website/ts/components/inputs/expiration_input.tsx index 5c68080fe..79dd2f568 100644 --- a/packages/website/ts/components/inputs/expiration_input.tsx +++ b/packages/website/ts/components/inputs/expiration_input.tsx @@ -80,7 +80,7 @@ export class ExpirationInput extends React.Component ); } - private _renderFillOrder(match: any, location: Location, history: History): React.ReactNode { + private _renderFillOrder(_match: any, _location: Location, _history: History): React.ReactNode { const initialFillOrder = !_.isUndefined(this.props.userSuppliedOrderCache) ? this.props.userSuppliedOrderCache : this._sharedOrderIfExists; @@ -329,7 +329,7 @@ export class LegacyPortal extends React.Component ); } - private _renderGenerateOrderForm(match: any, location: Location, history: History): React.ReactNode { + private _renderGenerateOrderForm(_match: any, _location: Location, _history: History): React.ReactNode { return ( { const tokenSymbols = _.keys(tokenAddressBySymbol); try { const priceBySymbol = await backendClient.getPriceInfoAsync(tokenSymbols); - const priceByAddress = _.mapKeys(priceBySymbol, (value, symbol) => _.get(tokenAddressBySymbol, symbol)); + const priceByAddress = _.mapKeys(priceBySymbol, (_value, symbol) => _.get(tokenAddressBySymbol, symbol)); const result = _.mapValues(priceByAddress, price => { const priceBigNumber = new BigNumber(price); return priceBigNumber; diff --git a/packages/website/ts/components/redirecter.tsx b/packages/website/ts/components/redirecter.tsx index 07432a926..477aecb77 100644 --- a/packages/website/ts/components/redirecter.tsx +++ b/packages/website/ts/components/redirecter.tsx @@ -4,6 +4,6 @@ interface RedirecterProps { location: string; } -export function Redirecter(props: RedirecterProps): void { +export function Redirecter(_props: RedirecterProps): void { window.location.href = constants.URL_ANGELLIST; } diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 555a59830..2a051651d 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -581,7 +581,7 @@ export class TokenBalances extends React.Component { public componentWillUnmount(): void { window.clearInterval(this._popoverCloseCheckIntervalId); } - public componentWillReceiveProps(nextProps: DropDownProps): void { + public componentWillReceiveProps(_nextProps: DropDownProps): void { // HACK: If the popoverContent is updated to a different dimension and the users // mouse is no longer above it, the dropdown can enter an inconsistent state where // it believes the user is still hovering over it. In order to remedy this, we diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index bc2ee227d..f80be6313 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -222,7 +222,7 @@ export class Wallet extends React.Component {
); } - private _onSidebarHover(event: React.FormEvent): void { + private _onSidebarHover(_event: React.FormEvent): void { this.setState({ isHoveringSidebar: true, }); @@ -314,7 +314,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, _index: number): React.ReactNode { const tokenState = this.props.trackedTokenStateByAddress[token.address]; const tokenLink = sharedUtils.getEtherScanLinkIfExists( token.address, diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx index a5052735b..f65257142 100644 --- a/packages/website/ts/components/wallet/wrap_ether_item.tsx +++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx @@ -145,7 +145,7 @@ export class WrapEtherItem extends React.Component ); } - private _onValueChange(isValid: boolean, amount?: BigNumber): void { + private _onValueChange(_isValid: boolean, amount?: BigNumber): void { this.setState({ currentInputAmount: amount, }); diff --git a/packages/website/ts/containers/about.ts b/packages/website/ts/containers/about.ts index 3dbdcd16b..3b1c99d79 100644 --- a/packages/website/ts/containers/about.ts +++ b/packages/website/ts/containers/about.ts @@ -14,7 +14,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, ownProps: AboutProps): ConnectedState => ({ +const mapStateToProps = (state: State, _ownProps: AboutProps): ConnectedState => ({ translate: state.translate, }); diff --git a/packages/website/ts/containers/connect_documentation.ts b/packages/website/ts/containers/connect_documentation.ts index 2ecd8107a..f939ef0df 100644 --- a/packages/website/ts/containers/connect_documentation.ts +++ b/packages/website/ts/containers/connect_documentation.ts @@ -89,7 +89,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, ownProps: DocPageProps): ConnectedState => ({ +const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ docsVersion: state.docsVersion, availableDocVersions: state.availableDocVersions, translate: state.translate, diff --git a/packages/website/ts/containers/ethereum_types_documentation.ts b/packages/website/ts/containers/ethereum_types_documentation.ts index f6d614779..285438835 100644 --- a/packages/website/ts/containers/ethereum_types_documentation.ts +++ b/packages/website/ts/containers/ethereum_types_documentation.ts @@ -106,7 +106,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, ownProps: DocPageProps): ConnectedState => ({ +const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ docsVersion: state.docsVersion, availableDocVersions: state.availableDocVersions, translate: state.translate, diff --git a/packages/website/ts/containers/faq.ts b/packages/website/ts/containers/faq.ts index b91c47889..a2b5735f6 100644 --- a/packages/website/ts/containers/faq.ts +++ b/packages/website/ts/containers/faq.ts @@ -14,7 +14,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, ownProps: FAQProps): ConnectedState => ({ +const mapStateToProps = (state: State, _ownProps: FAQProps): ConnectedState => ({ translate: state.translate, }); diff --git a/packages/website/ts/containers/generate_order_form.ts b/packages/website/ts/containers/generate_order_form.ts index 44979b104..92296dbab 100644 --- a/packages/website/ts/containers/generate_order_form.ts +++ b/packages/website/ts/containers/generate_order_form.ts @@ -30,7 +30,7 @@ interface ConnectedState { lastForceTokenStateRefetch: number; } -const mapStateToProps = (state: State, ownProps: GenerateOrderFormProps): ConnectedState => ({ +const mapStateToProps = (state: State, _ownProps: GenerateOrderFormProps): ConnectedState => ({ blockchainErr: state.blockchainErr, blockchainIsLoaded: state.blockchainIsLoaded, orderExpiryTimestamp: state.orderExpiryTimestamp, diff --git a/packages/website/ts/containers/json_schemas_documentation.ts b/packages/website/ts/containers/json_schemas_documentation.ts index 4df7ddecb..67740d4c6 100644 --- a/packages/website/ts/containers/json_schemas_documentation.ts +++ b/packages/website/ts/containers/json_schemas_documentation.ts @@ -70,7 +70,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, ownProps: DocPageProps): ConnectedState => ({ +const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ docsVersion: state.docsVersion, availableDocVersions: state.availableDocVersions, translate: state.translate, diff --git a/packages/website/ts/containers/landing.ts b/packages/website/ts/containers/landing.ts index a9fc1d9d1..972ed4c23 100644 --- a/packages/website/ts/containers/landing.ts +++ b/packages/website/ts/containers/landing.ts @@ -14,7 +14,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, ownProps: LandingProps): ConnectedState => ({ +const mapStateToProps = (state: State, _ownProps: LandingProps): ConnectedState => ({ translate: state.translate, }); diff --git a/packages/website/ts/containers/legacy_portal.ts b/packages/website/ts/containers/legacy_portal.ts index eae450c21..e99f47fb7 100644 --- a/packages/website/ts/containers/legacy_portal.ts +++ b/packages/website/ts/containers/legacy_portal.ts @@ -37,7 +37,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, ownProps: LegacyPortalComponentProps): ConnectedState => { +const mapStateToProps = (state: State, _ownProps: LegacyPortalComponentProps): ConnectedState => { const receiveAssetToken = state.sideToAssetToken[Side.Receive]; const depositAssetToken = state.sideToAssetToken[Side.Deposit]; const receiveAddress = !_.isUndefined(receiveAssetToken.address) diff --git a/packages/website/ts/containers/not_found.ts b/packages/website/ts/containers/not_found.ts index 4fdc325ea..f384dab89 100644 --- a/packages/website/ts/containers/not_found.ts +++ b/packages/website/ts/containers/not_found.ts @@ -14,7 +14,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, ownProps: NotFoundProps): ConnectedState => ({ +const mapStateToProps = (state: State, _ownProps: NotFoundProps): ConnectedState => ({ translate: state.translate, }); diff --git a/packages/website/ts/containers/order_utils_documentation.ts b/packages/website/ts/containers/order_utils_documentation.ts index cdf97e5c8..37b7f2273 100644 --- a/packages/website/ts/containers/order_utils_documentation.ts +++ b/packages/website/ts/containers/order_utils_documentation.ts @@ -81,7 +81,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, ownProps: DocPageProps): ConnectedState => ({ +const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ docsVersion: state.docsVersion, availableDocVersions: state.availableDocVersions, translate: state.translate, diff --git a/packages/website/ts/containers/portal.ts b/packages/website/ts/containers/portal.ts index b8c8fb999..5876e65f5 100644 --- a/packages/website/ts/containers/portal.ts +++ b/packages/website/ts/containers/portal.ts @@ -34,7 +34,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, ownProps: PortalComponentProps): ConnectedState => { +const mapStateToProps = (state: State, _ownProps: PortalComponentProps): ConnectedState => { const receiveAssetToken = state.sideToAssetToken[Side.Receive]; const depositAssetToken = state.sideToAssetToken[Side.Deposit]; const receiveAddress = !_.isUndefined(receiveAssetToken.address) diff --git a/packages/website/ts/containers/portal_onboarding_flow.ts b/packages/website/ts/containers/portal_onboarding_flow.ts index 0ad9aef13..4298ab275 100644 --- a/packages/website/ts/containers/portal_onboarding_flow.ts +++ b/packages/website/ts/containers/portal_onboarding_flow.ts @@ -28,7 +28,7 @@ interface ConnectedDispatch { updateOnboardingStep: (stepIndex: number) => void; } -const mapStateToProps = (state: State, ownProps: PortalOnboardingFlowProps): ConnectedState => ({ +const mapStateToProps = (state: State, _ownProps: PortalOnboardingFlowProps): ConnectedState => ({ stepIndex: state.portalOnboardingStep, isRunning: state.isPortalOnboardingShowing, userAddress: state.userAddress, diff --git a/packages/website/ts/containers/smart_contracts_documentation.ts b/packages/website/ts/containers/smart_contracts_documentation.ts index 27328909c..c88c3b365 100644 --- a/packages/website/ts/containers/smart_contracts_documentation.ts +++ b/packages/website/ts/containers/smart_contracts_documentation.ts @@ -75,7 +75,7 @@ interface ConnectedDispatch { docsInfo: DocsInfo; } -const mapStateToProps = (state: State, ownProps: DocPageProps): ConnectedState => ({ +const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ docsVersion: state.docsVersion, availableDocVersions: state.availableDocVersions, translate: state.translate, diff --git a/packages/website/ts/containers/sol_compiler_documentation.ts b/packages/website/ts/containers/sol_compiler_documentation.ts index 4ccc1850f..8720e2c1d 100644 --- a/packages/website/ts/containers/sol_compiler_documentation.ts +++ b/packages/website/ts/containers/sol_compiler_documentation.ts @@ -67,7 +67,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, ownProps: DocPageProps): ConnectedState => ({ +const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ docsVersion: state.docsVersion, availableDocVersions: state.availableDocVersions, translate: state.translate, diff --git a/packages/website/ts/containers/sol_cov_documentation.ts b/packages/website/ts/containers/sol_cov_documentation.ts index 73cc99a8c..a8009071f 100644 --- a/packages/website/ts/containers/sol_cov_documentation.ts +++ b/packages/website/ts/containers/sol_cov_documentation.ts @@ -96,7 +96,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, ownProps: DocPageProps): ConnectedState => ({ +const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ docsVersion: state.docsVersion, availableDocVersions: state.availableDocVersions, translate: state.translate, diff --git a/packages/website/ts/containers/subproviders_documentation.ts b/packages/website/ts/containers/subproviders_documentation.ts index 0c7e73f38..6d4230e53 100644 --- a/packages/website/ts/containers/subproviders_documentation.ts +++ b/packages/website/ts/containers/subproviders_documentation.ts @@ -128,7 +128,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, ownProps: DocPageProps): ConnectedState => ({ +const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ docsVersion: state.docsVersion, availableDocVersions: state.availableDocVersions, translate: state.translate, diff --git a/packages/website/ts/containers/web3_wrapper_documentation.ts b/packages/website/ts/containers/web3_wrapper_documentation.ts index 34633f14d..b04a83ac4 100644 --- a/packages/website/ts/containers/web3_wrapper_documentation.ts +++ b/packages/website/ts/containers/web3_wrapper_documentation.ts @@ -105,7 +105,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, ownProps: DocPageProps): ConnectedState => ({ +const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ docsVersion: state.docsVersion, availableDocVersions: state.availableDocVersions, translate: state.translate, diff --git a/packages/website/ts/containers/wiki.ts b/packages/website/ts/containers/wiki.ts index af7228dbe..357f8bbf4 100644 --- a/packages/website/ts/containers/wiki.ts +++ b/packages/website/ts/containers/wiki.ts @@ -14,7 +14,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, ownProps: WikiProps): ConnectedState => ({ +const mapStateToProps = (state: State, _ownProps: WikiProps): ConnectedState => ({ translate: state.translate, }); diff --git a/packages/website/ts/containers/zero_ex_js_documentation.ts b/packages/website/ts/containers/zero_ex_js_documentation.ts index 9c3f447fb..a8890a07a 100644 --- a/packages/website/ts/containers/zero_ex_js_documentation.ts +++ b/packages/website/ts/containers/zero_ex_js_documentation.ts @@ -209,7 +209,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, ownProps: DocPageProps): ConnectedState => ({ +const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ docsVersion: state.docsVersion, availableDocVersions: state.availableDocVersions, docsInfo, diff --git a/packages/website/ts/local_storage/trade_history_storage.tsx b/packages/website/ts/local_storage/trade_history_storage.tsx index cc764d98e..2e2f4e64e 100644 --- a/packages/website/ts/local_storage/trade_history_storage.tsx +++ b/packages/website/ts/local_storage/trade_history_storage.tsx @@ -57,7 +57,7 @@ export const tradeHistoryStorage = { return {}; } const userFillsByHash = JSON.parse(userFillsJSONString); - _.each(userFillsByHash, (fill, hash) => { + _.each(userFillsByHash, fill => { fill.paidMakerFee = new BigNumber(fill.paidMakerFee); fill.paidTakerFee = new BigNumber(fill.paidTakerFee); fill.filledTakerTokenAmount = new BigNumber(fill.filledTakerTokenAmount); diff --git a/packages/website/ts/pages/not_found.tsx b/packages/website/ts/pages/not_found.tsx index a94ba5863..2fe3b1f45 100644 --- a/packages/website/ts/pages/not_found.tsx +++ b/packages/website/ts/pages/not_found.tsx @@ -11,7 +11,7 @@ export interface NotFoundProps { dispatcher: Dispatcher; } -export const NotFound = (props: NotFoundProps) => { +export const NotFound = (_props: NotFoundProps) => { return (
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index bdefe0fda..9659900be 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -233,7 +233,7 @@ export class Wiki extends React.Component { } return menuSubsectionsBySection; } - private _onSidebarHover(event: React.FormEvent): void { + private _onSidebarHover(_event: React.FormEvent): void { this.setState({ isHoveringSidebar: true, }); @@ -243,7 +243,7 @@ export class Wiki extends React.Component { isHoveringSidebar: false, }); } - private _onHashChanged(event: any): void { + private _onHashChanged(_event: any): void { const hash = window.location.hash.slice(1); sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID); } diff --git a/packages/website/ts/utils/error_reporter.ts b/packages/website/ts/utils/error_reporter.ts index 548d4d41d..f875141fe 100644 --- a/packages/website/ts/utils/error_reporter.ts +++ b/packages/website/ts/utils/error_reporter.ts @@ -37,7 +37,7 @@ export const errorReporter = { return; // Let's not log development errors to rollbar } - return new Promise((resolve, reject) => { + return new Promise((resolve, _reject) => { rollbar.error(err, (rollbarErr: Error) => { if (rollbarErr) { logUtils.log(`Error reporting to rollbar, ignoring: ${rollbarErr}`); diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 6961784c6..651a4212a 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -152,7 +152,7 @@ export const utils = { const intervalId = setTimeout(() => { resolve(false); }, getApiVersionTimeoutMs); - u2f.getApiVersion((version: number) => { + u2f.getApiVersion((_version: number) => { clearTimeout(intervalId); resolve(true); }); @@ -279,7 +279,7 @@ export const utils = { if (document.readyState === 'complete') { return; // Already loaded } - return new Promise((resolve, reject) => { + return new Promise((resolve, _reject) => { window.onload = () => resolve(); }); }, -- cgit v1.2.3 From 3d76d83a39ca61641f3efd7ed5cc6f7a214835ca Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 1 May 2018 10:17:27 -0700 Subject: Skeleton for jobs page and initial implementation --- packages/website/public/images/jobs/location1.png | Bin 0 -> 659608 bytes packages/website/public/images/jobs/location2.png | Bin 0 -> 223872 bytes packages/website/public/images/jobs/location3.png | Bin 0 -> 288733 bytes packages/website/public/images/jobs/map.png | Bin 0 -> 271102 bytes packages/website/public/images/jobs/office1.png | Bin 0 -> 482657 bytes packages/website/public/images/jobs/office2.png | Bin 0 -> 479918 bytes packages/website/public/images/jobs/office3.png | Bin 0 -> 480055 bytes packages/website/ts/components/redirecter.tsx | 9 --- packages/website/ts/containers/jobs.ts | 26 ++++++++ packages/website/ts/index.tsx | 6 +- packages/website/ts/pages/jobs/benefits.tsx | 22 ++++++ packages/website/ts/pages/jobs/bulleted_item.tsx | 22 ++++++ packages/website/ts/pages/jobs/filled_image.tsx | 18 +++++ packages/website/ts/pages/jobs/jobs.tsx | 44 ++++++++++++ packages/website/ts/pages/jobs/join_0x.tsx | 35 ++++++++++ packages/website/ts/pages/jobs/mission.tsx | 43 ++++++++++++ packages/website/ts/pages/jobs/open_positions.tsx | 76 +++++++++++++++++++++ packages/website/ts/pages/jobs/photo_rail.tsx | 19 ++++++ packages/website/ts/pages/jobs/teams.tsx | 69 +++++++++++++++++++ packages/website/ts/pages/jobs/values.tsx | 78 ++++++++++++++++++++++ 20 files changed, 455 insertions(+), 12 deletions(-) create mode 100644 packages/website/public/images/jobs/location1.png create mode 100644 packages/website/public/images/jobs/location2.png create mode 100644 packages/website/public/images/jobs/location3.png create mode 100644 packages/website/public/images/jobs/map.png create mode 100644 packages/website/public/images/jobs/office1.png create mode 100644 packages/website/public/images/jobs/office2.png create mode 100644 packages/website/public/images/jobs/office3.png delete mode 100644 packages/website/ts/components/redirecter.tsx create mode 100644 packages/website/ts/containers/jobs.ts create mode 100644 packages/website/ts/pages/jobs/benefits.tsx create mode 100644 packages/website/ts/pages/jobs/bulleted_item.tsx create mode 100644 packages/website/ts/pages/jobs/filled_image.tsx create mode 100644 packages/website/ts/pages/jobs/jobs.tsx create mode 100644 packages/website/ts/pages/jobs/join_0x.tsx create mode 100644 packages/website/ts/pages/jobs/mission.tsx create mode 100644 packages/website/ts/pages/jobs/open_positions.tsx create mode 100644 packages/website/ts/pages/jobs/photo_rail.tsx create mode 100644 packages/website/ts/pages/jobs/teams.tsx create mode 100644 packages/website/ts/pages/jobs/values.tsx (limited to 'packages/website') diff --git a/packages/website/public/images/jobs/location1.png b/packages/website/public/images/jobs/location1.png new file mode 100644 index 000000000..bfda47576 Binary files /dev/null and b/packages/website/public/images/jobs/location1.png differ diff --git a/packages/website/public/images/jobs/location2.png b/packages/website/public/images/jobs/location2.png new file mode 100644 index 000000000..c05f9403f Binary files /dev/null and b/packages/website/public/images/jobs/location2.png differ diff --git a/packages/website/public/images/jobs/location3.png b/packages/website/public/images/jobs/location3.png new file mode 100644 index 000000000..34b2e5380 Binary files /dev/null and b/packages/website/public/images/jobs/location3.png differ diff --git a/packages/website/public/images/jobs/map.png b/packages/website/public/images/jobs/map.png new file mode 100644 index 000000000..7b85ff66e Binary files /dev/null and b/packages/website/public/images/jobs/map.png differ diff --git a/packages/website/public/images/jobs/office1.png b/packages/website/public/images/jobs/office1.png new file mode 100644 index 000000000..f6e6d9163 Binary files /dev/null and b/packages/website/public/images/jobs/office1.png differ diff --git a/packages/website/public/images/jobs/office2.png b/packages/website/public/images/jobs/office2.png new file mode 100644 index 000000000..65f97dcad Binary files /dev/null and b/packages/website/public/images/jobs/office2.png differ diff --git a/packages/website/public/images/jobs/office3.png b/packages/website/public/images/jobs/office3.png new file mode 100644 index 000000000..1dfcb9c58 Binary files /dev/null and b/packages/website/public/images/jobs/office3.png differ diff --git a/packages/website/ts/components/redirecter.tsx b/packages/website/ts/components/redirecter.tsx deleted file mode 100644 index 477aecb77..000000000 --- a/packages/website/ts/components/redirecter.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { constants } from 'ts/utils/constants'; - -interface RedirecterProps { - location: string; -} - -export function Redirecter(_props: RedirecterProps): void { - window.location.href = constants.URL_ANGELLIST; -} diff --git a/packages/website/ts/containers/jobs.ts b/packages/website/ts/containers/jobs.ts new file mode 100644 index 000000000..0f57c431d --- /dev/null +++ b/packages/website/ts/containers/jobs.ts @@ -0,0 +1,26 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; +import { Jobs as JobsComponent, JobsProps } from 'ts/pages/jobs/jobs'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { State } from 'ts/redux/reducer'; +import { Translate } from 'ts/utils/translate'; + +interface ConnectedState { + translate: Translate; +} + +interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +const mapStateToProps = (state: State, ownProps: JobsProps): ConnectedState => ({ + translate: state.translate, +}); + +const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const Jobs: React.ComponentClass = connect(mapStateToProps, mapDispatchToProps)(JobsComponent); diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index 719604c02..a8749d8bf 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -4,9 +4,10 @@ import { render } from 'react-dom'; import { Provider } from 'react-redux'; import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom'; import * as injectTapEventPlugin from 'react-tap-event-plugin'; -import { Redirecter } from 'ts/components/redirecter'; +import { createStore, Store as ReduxStore } from 'redux'; import { About } from 'ts/containers/about'; import { FAQ } from 'ts/containers/faq'; +import { Jobs } from 'ts/containers/jobs'; import { Landing } from 'ts/containers/landing'; import { NotFound } from 'ts/containers/not_found'; import { Wiki } from 'ts/containers/wiki'; @@ -86,8 +87,7 @@ render( - - + diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx new file mode 100644 index 000000000..fa4edb240 --- /dev/null +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; + +import { FilledImage } from 'ts/pages/jobs/filled_image'; + +export const Benefits = () => ( +
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+
+); diff --git a/packages/website/ts/pages/jobs/bulleted_item.tsx b/packages/website/ts/pages/jobs/bulleted_item.tsx new file mode 100644 index 000000000..ae7385b90 --- /dev/null +++ b/packages/website/ts/pages/jobs/bulleted_item.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; + +export interface BulletedItemProps { + bulletColor: string; + title: string; + description: string; + height?: number; +} +export const BulletedItem = (props: BulletedItemProps) => { + const height = props.height || 150; + return ( +
+ + + +
+
{props.title}
+
{props.description}
+
+
+ ); +}; diff --git a/packages/website/ts/pages/jobs/filled_image.tsx b/packages/website/ts/pages/jobs/filled_image.tsx new file mode 100644 index 000000000..7f58ee5b9 --- /dev/null +++ b/packages/website/ts/pages/jobs/filled_image.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; + +export interface FilledImageProps { + src: string; +} +export const FilledImage = (props: FilledImageProps) => ( +
+); diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx new file mode 100644 index 000000000..e49b40a2f --- /dev/null +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -0,0 +1,44 @@ +import { colors } from '@0xproject/react-shared'; +import * as React from 'react'; +import * as DocumentTitle from 'react-document-title'; + +import { Footer } from 'ts/components/footer'; +import { TopBar } from 'ts/components/top_bar/top_bar'; +import { Benefits } from 'ts/pages/jobs/benefits'; +import { Join0x } from 'ts/pages/jobs/join_0x'; +import { Mission } from 'ts/pages/jobs/mission'; +import { OpenPositions } from 'ts/pages/jobs/open_positions'; +import { PhotoRail } from 'ts/pages/jobs/photo_rail'; +import { Teams } from 'ts/pages/jobs/teams'; +import { Values } from 'ts/pages/jobs/values'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +export interface JobsProps { + location: Location; + translate: Translate; + dispatcher: Dispatcher; +} + +export const Jobs: React.StatelessComponent = props => { + return ( +
+ + + + + + + + + +
+
+ ); +}; diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx new file mode 100644 index 000000000..f4dbf31a3 --- /dev/null +++ b/packages/website/ts/pages/jobs/join_0x.tsx @@ -0,0 +1,35 @@ +import { colors } from '@0xproject/react-shared'; + +import FlatButton from 'material-ui/FlatButton'; +import * as React from 'react'; + +export const Join0x = () => ( +
+
+
+ Join 0x +
+
+ 0x is transforming the way that value is exchanged on a global scale. Come join us in San Francisco or + work remotely anywhere in the world to help create the infrastructure of a new tokenized economy. +
+
+ +
+
+
+); diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx new file mode 100644 index 000000000..a1d0dc927 --- /dev/null +++ b/packages/website/ts/pages/jobs/mission.tsx @@ -0,0 +1,43 @@ +import { colors } from '@0xproject/react-shared'; + +import * as React from 'react'; + +export const Mission = () => { + const isSmallScreen = false; + return ( +
+
+ {!isSmallScreen && } +
+
+
+ Our Mission +
+
+ We believe a system can exist in which all world value is accessible to anyone, anywhere, + regardless of where you happen to be born. +
+
+
+
+
+ ); +}; + +const WorldImage = () => { + const isSmallScreen = false; + return ( +
+ +
+ ); +}; diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx new file mode 100644 index 000000000..e79bc920b --- /dev/null +++ b/packages/website/ts/pages/jobs/open_positions.tsx @@ -0,0 +1,76 @@ +import * as _ from 'lodash'; +import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table'; +import * as React from 'react'; + +const POSITIONS = [ + { + name: 'Community Director', + department: 'Marketing', + office: 'Remote / San Francisco', + }, + { + name: 'Data Scientist / Data Engineer', + department: 'Engineering', + office: 'Remote / San Francisco', + }, + { + name: 'Executive Assitant / Office Manager', + department: 'Operations', + office: 'Remote / San Francisco', + }, + { + name: 'Research Fellow - Economics / Governance', + department: 'Engineering', + office: 'Remote / San Francisco', + }, + { + name: 'Software Engineer - Blockchain', + department: 'Engineer', + office: 'Remote / San Francisco', + }, + { + name: 'Software Engineer - Full-stack', + department: 'Marketing', + office: 'Remote / San Francisco', + }, +]; + +export const OpenPositions = () => { + const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 }; + return ( +
+ + + + + Position + + + Department + + + Office + + + + + {_.map(POSITIONS, position => { + return ( + + + {position.name} + + + {position.department} + + + {position.office} + + + ); + })} + +
+
+ ); +}; diff --git a/packages/website/ts/pages/jobs/photo_rail.tsx b/packages/website/ts/pages/jobs/photo_rail.tsx new file mode 100644 index 000000000..a5ccfb25f --- /dev/null +++ b/packages/website/ts/pages/jobs/photo_rail.tsx @@ -0,0 +1,19 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { FilledImage } from 'ts/pages/jobs/filled_image'; + +export const PhotoRail = () => { + const images = ['/images/jobs/office1.png', '/images/jobs/office2.png', '/images/jobs/office3.png']; + return ( +
+ {_.map(images, (image: string) => { + return ( +
+ +
+ ); + })} +
+ ); +}; diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx new file mode 100644 index 000000000..b00170877 --- /dev/null +++ b/packages/website/ts/pages/jobs/teams.tsx @@ -0,0 +1,69 @@ +import { colors } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; + +const ITEMS_COLUMN1: BulletedItemProps[] = [ + { + bulletColor: '#EB5757', + title: 'User Growth', + description: + 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', + }, + { + bulletColor: '#EB5757', + title: 'Governance', + description: + 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', + }, +]; +const ITEMS_COLUMN2: BulletedItemProps[] = [ + { + bulletColor: '#EB5757', + title: 'Developer Tools', + description: + 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', + }, + { + bulletColor: '#EB5757', + title: 'Marketing', + description: + 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', + }, +]; + +export const Teams = () => { + const isSmallScreen = false; + const teamHeight = 220; + return ( +
+
+
+ {_.map(ITEMS_COLUMN1, bulletedItemProps => { + return ( + + ); + })} +
+
+ {_.map(ITEMS_COLUMN2, bulletedItemProps => { + return ( + + ); + })} +
+
+
+ ); +}; diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx new file mode 100644 index 000000000..805400583 --- /dev/null +++ b/packages/website/ts/pages/jobs/values.tsx @@ -0,0 +1,78 @@ +import { colors } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; + +const ITEMS_COLUMN1: BulletedItemProps[] = [ + { + bulletColor: '#6FCF97', + title: 'Ethics/Doing the right thing', + description: + 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + }, + { + bulletColor: '#56CCF2', + title: 'Clear communication', + description: + 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + }, + { + bulletColor: '#EB5757', + title: 'Grow the whole pie', + description: + 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + }, +]; +const ITEMS_COLUMN2: BulletedItemProps[] = [ + { + bulletColor: '#F2994A', + title: 'Crypto-Economic Technology', + description: + 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + }, + { + bulletColor: '#E0E0E0', + title: 'Transparency', + description: + 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + }, + { + bulletColor: '#F2C94C', + title: 'Positive Energy', + description: + 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + }, +]; + +export const Values = () => { + const isSmallScreen = false; + return ( +
+
+
+ {_.map(ITEMS_COLUMN1, bulletedItemProps => { + return ( + + ); + })} +
+
+ {_.map(ITEMS_COLUMN2, bulletedItemProps => { + return ( + + ); + })} +
+
+
+ ); +}; -- cgit v1.2.3 From 0c2f002a7d854026f1710ab92255f73e17597e2d Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 8 Jun 2018 11:29:56 -0700 Subject: Add scroll to top for jobs page --- packages/website/ts/pages/jobs/jobs.tsx | 49 +++++++++++++++++++-------------- 1 file changed, 28 insertions(+), 21 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx index e49b40a2f..c7c667da1 100644 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -21,24 +21,31 @@ export interface JobsProps { dispatcher: Dispatcher; } -export const Jobs: React.StatelessComponent = props => { - return ( -
- - - - - - - - - -
-
- ); -}; +export interface JobsState {} + +export class Jobs extends React.Component { + public componentDidMount(): void { + window.scrollTo(0, 0); + } + public render(): React.ReactNode { + return ( +
+ + + + + + + + + +
+
+ ); + } +} -- cgit v1.2.3 From 474b93a22f9545fe9bcabe5a80e6a057e66ab286 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 8 Jun 2018 13:27:41 -0700 Subject: Add link to open positions section --- packages/website/ts/pages/jobs/jobs.tsx | 11 ++++++++--- packages/website/ts/pages/jobs/join_0x.tsx | 7 ++++++- packages/website/ts/pages/jobs/open_positions.tsx | 8 ++++++-- 3 files changed, 20 insertions(+), 6 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx index c7c667da1..466926af0 100644 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, utils as sharedUtils } from '@0xproject/react-shared'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; @@ -23,6 +23,8 @@ export interface JobsProps { export interface JobsState {} +const OPEN_POSITIONS_HASH = 'positions'; + export class Jobs extends React.Component { public componentDidMount(): void { window.scrollTo(0, 0); @@ -37,15 +39,18 @@ export class Jobs extends React.Component { style={{ backgroundColor: colors.white, position: 'relative' }} translate={this.props.translate} /> - + - +
); } + private _onJoin0xCallToActionClick(): void { + sharedUtils.setUrlHash(OPEN_POSITIONS_HASH); + } } diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx index f4dbf31a3..fb811cbc4 100644 --- a/packages/website/ts/pages/jobs/join_0x.tsx +++ b/packages/website/ts/pages/jobs/join_0x.tsx @@ -3,7 +3,11 @@ import { colors } from '@0xproject/react-shared'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; -export const Join0x = () => ( +export interface Join0xProps { + onCallToActionClick: () => void; +} + +export const Join0x = (props: Join0xProps) => (
@@ -28,6 +32,7 @@ export const Join0x = () => ( textTransform: 'lowercase', }} style={{ width: 280, height: 62, borderRadius: 5 }} + onClick={props.onCallToActionClick} />
diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx index e79bc920b..f9c37d36f 100644 --- a/packages/website/ts/pages/jobs/open_positions.tsx +++ b/packages/website/ts/pages/jobs/open_positions.tsx @@ -35,10 +35,14 @@ const POSITIONS = [ }, ]; -export const OpenPositions = () => { +export interface OpenPositionsProps { + hash: string; +} + +export const OpenPositions = (props: OpenPositionsProps) => { const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 }; return ( -
+
-- cgit v1.2.3 From 087aaa2f948391da70a4d5b53b8e7e301288ab5f Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 8 Jun 2018 15:27:11 -0700 Subject: Polish mission section and photo section --- packages/website/ts/containers/jobs.ts | 3 + packages/website/ts/pages/jobs/floating_image.tsx | 8 +++ packages/website/ts/pages/jobs/jobs.tsx | 34 +++++++++-- packages/website/ts/pages/jobs/join_0x.tsx | 2 +- packages/website/ts/pages/jobs/mission.tsx | 73 +++++++++++++---------- packages/website/ts/pages/jobs/photo_rail.tsx | 14 +++-- packages/website/ts/style/colors.ts | 1 + 7 files changed, 95 insertions(+), 40 deletions(-) create mode 100644 packages/website/ts/pages/jobs/floating_image.tsx (limited to 'packages/website') diff --git a/packages/website/ts/containers/jobs.ts b/packages/website/ts/containers/jobs.ts index 0f57c431d..63ef59221 100644 --- a/packages/website/ts/containers/jobs.ts +++ b/packages/website/ts/containers/jobs.ts @@ -5,10 +5,12 @@ import { Dispatch } from 'redux'; import { Jobs as JobsComponent, JobsProps } from 'ts/pages/jobs/jobs'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; +import { ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; interface ConnectedState { translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -17,6 +19,7 @@ interface ConnectedDispatch { const mapStateToProps = (state: State, ownProps: JobsProps): ConnectedState => ({ translate: state.translate, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ diff --git a/packages/website/ts/pages/jobs/floating_image.tsx b/packages/website/ts/pages/jobs/floating_image.tsx new file mode 100644 index 000000000..4719a9596 --- /dev/null +++ b/packages/website/ts/pages/jobs/floating_image.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; + +export interface FloatingImageProps { + src: string; +} +export const FloatingImage = (props: FloatingImageProps) => { + return ; +}; diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx index 466926af0..70a11c8a4 100644 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -1,10 +1,12 @@ import { colors, utils as sharedUtils } from '@0xproject/react-shared'; +import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; import { Footer } from 'ts/components/footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { Benefits } from 'ts/pages/jobs/benefits'; +import { FloatingImage } from 'ts/pages/jobs/floating_image'; import { Join0x } from 'ts/pages/jobs/join_0x'; import { Mission } from 'ts/pages/jobs/mission'; import { OpenPositions } from 'ts/pages/jobs/open_positions'; @@ -12,21 +14,33 @@ import { PhotoRail } from 'ts/pages/jobs/photo_rail'; import { Teams } from 'ts/pages/jobs/teams'; import { Values } from 'ts/pages/jobs/values'; import { Dispatcher } from 'ts/redux/dispatcher'; +import { ScreenWidths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; +import { utils } from 'ts/utils/utils'; + +const OPEN_POSITIONS_HASH = 'positions'; +const THROTTLE_TIMEOUT = 100; +const PHOTO_RAIL_IMAGES = ['/images/jobs/office1.png', '/images/jobs/office2.png', '/images/jobs/office3.png']; export interface JobsProps { location: Location; translate: Translate; dispatcher: Dispatcher; + screenWidth: ScreenWidths; } export interface JobsState {} -const OPEN_POSITIONS_HASH = 'positions'; - export class Jobs extends React.Component { + // TODO: consolidate this small screen scaffolding into one place (its being used in portal and docs as well) + private _throttledScreenWidthUpdate: () => void; + public constructor(props: JobsProps) { + super(props); + this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); + } public componentDidMount(): void { + window.addEventListener('resize', this._throttledScreenWidthUpdate); window.scrollTo(0, 0); } public render(): React.ReactNode { @@ -40,8 +54,12 @@ export class Jobs extends React.Component { translate={this.props.translate} /> - - + + {this._isSmallScreen() ? ( + + ) : ( + + )} @@ -53,4 +71,12 @@ export class Jobs extends React.Component { private _onJoin0xCallToActionClick(): void { sharedUtils.setUrlHash(OPEN_POSITIONS_HASH); } + private _updateScreenWidth(): void { + const newScreenWidth = utils.getScreenWidth(); + this.props.dispatcher.updateScreenWidth(newScreenWidth); + } + private _isSmallScreen(): boolean { + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; + return isSmallScreen; + } } diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx index fb811cbc4..e7fdf3ce1 100644 --- a/packages/website/ts/pages/jobs/join_0x.tsx +++ b/packages/website/ts/pages/jobs/join_0x.tsx @@ -8,7 +8,7 @@ export interface Join0xProps { } export const Join0x = (props: Join0xProps) => ( -
+
Join 0x diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx index a1d0dc927..a3584e5f6 100644 --- a/packages/website/ts/pages/jobs/mission.tsx +++ b/packages/website/ts/pages/jobs/mission.tsx @@ -1,43 +1,54 @@ -import { colors } from '@0xproject/react-shared'; - import * as React from 'react'; -export const Mission = () => { - const isSmallScreen = false; - return ( -
-
- {!isSmallScreen && } +import { FilledImage } from 'ts/pages/jobs/filled_image'; +import { colors } from 'ts/style/colors'; +import { ScreenWidths } from 'ts/types'; + +export interface MissionProps { + screenWidth: ScreenWidths; +} +export const Mission = (props: MissionProps) => { + const isSmallScreen = props.screenWidth === ScreenWidths.Sm; + const image = ( +
+ +
+ ); + const missionStatementStyle = !isSmallScreen ? { height: 364, lineHeight: '364px' } : undefined; + const missionStatement = ( +
+
+
+ Our Mission +
-
-
- Our Mission -
-
- We believe a system can exist in which all world value is accessible to anyone, anywhere, - regardless of where you happen to be born. -
-
+ We believe a system can exist in which all world value is accessible to anyone, anywhere, regardless + of where you happen to be born.
); -}; - -const WorldImage = () => { - const isSmallScreen = false; return ( -
- +
+
+ {isSmallScreen ? ( +
+ {missionStatement} + {image} +
+ ) : ( +
+ {image} + {missionStatement} +
+ )} +
); }; diff --git a/packages/website/ts/pages/jobs/photo_rail.tsx b/packages/website/ts/pages/jobs/photo_rail.tsx index a5ccfb25f..bcc3444ec 100644 --- a/packages/website/ts/pages/jobs/photo_rail.tsx +++ b/packages/website/ts/pages/jobs/photo_rail.tsx @@ -2,12 +2,18 @@ import * as _ from 'lodash'; import * as React from 'react'; import { FilledImage } from 'ts/pages/jobs/filled_image'; +import { ScreenWidths } from 'ts/types'; -export const PhotoRail = () => { - const images = ['/images/jobs/office1.png', '/images/jobs/office2.png', '/images/jobs/office3.png']; +const IMAGE_PATHS = ['/images/jobs/office1.png', '/images/jobs/office2.png', '/images/jobs/office3.png']; + +export interface PhotoRailProps { + images: string[]; +} + +export const PhotoRail = (props: PhotoRailProps) => { return ( -
- {_.map(images, (image: string) => { +
+ {_.map(props.images, (image: string) => { return (
diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts index 5ffdd6ba7..002318e14 100644 --- a/packages/website/ts/style/colors.ts +++ b/packages/website/ts/style/colors.ts @@ -11,6 +11,7 @@ const appColors = { wrapEtherConfirmationButton: sharedColors.mediumBlue, drawerMenuBackground: '#4a4a4a', menuItemDefaultSelectedBackground: '#424242', + jobsPageGrey: '#fafafa', }; export const colors = { -- cgit v1.2.3 From b7bb27fa2135aa87a91667639920eb0c2db4cb85 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Sun, 10 Jun 2018 19:35:30 -0700 Subject: Rework values section --- packages/website/ts/pages/jobs/bulleted_item.tsx | 4 +- packages/website/ts/pages/jobs/values.tsx | 53 +++++------------------- 2 files changed, 13 insertions(+), 44 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/jobs/bulleted_item.tsx b/packages/website/ts/pages/jobs/bulleted_item.tsx index ae7385b90..9dc4fe4a3 100644 --- a/packages/website/ts/pages/jobs/bulleted_item.tsx +++ b/packages/website/ts/pages/jobs/bulleted_item.tsx @@ -7,9 +7,9 @@ export interface BulletedItemProps { height?: number; } export const BulletedItem = (props: BulletedItemProps) => { - const height = props.height || 150; + const minHeight = props.height || 150; return ( -
+
diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx index 805400583..9bb98d016 100644 --- a/packages/website/ts/pages/jobs/values.tsx +++ b/packages/website/ts/pages/jobs/values.tsx @@ -4,65 +4,34 @@ import * as React from 'react'; import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; -const ITEMS_COLUMN1: BulletedItemProps[] = [ +const BULLETED_ITEMS: BulletedItemProps[] = [ { bulletColor: '#6FCF97', title: 'Ethics/Doing the right thing', - description: - 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', }, { bulletColor: '#56CCF2', - title: 'Clear communication', - description: - 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + title: 'Consistently ship', + description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', }, { bulletColor: '#EB5757', - title: 'Grow the whole pie', - description: - 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', - }, -]; -const ITEMS_COLUMN2: BulletedItemProps[] = [ - { - bulletColor: '#F2994A', - title: 'Crypto-Economic Technology', - description: - 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', - }, - { - bulletColor: '#E0E0E0', - title: 'Transparency', - description: - 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', - }, - { - bulletColor: '#F2C94C', - title: 'Positive Energy', - description: - 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + title: 'Focus on long term impact', + description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', }, ]; export const Values = () => { const isSmallScreen = false; return ( -
+
-
- {_.map(ITEMS_COLUMN1, bulletedItemProps => { - return ( - - ); - })} +
+ Our Values
-
- {_.map(ITEMS_COLUMN2, bulletedItemProps => { +
+ {_.map(BULLETED_ITEMS, bulletedItemProps => { return ( Date: Sun, 10 Jun 2018 19:49:40 -0700 Subject: Refactor into BulletedItemList component --- .../website/ts/pages/jobs/bulleted_item_list.tsx | 30 ++++++++++++++++++++++ packages/website/ts/pages/jobs/values.tsx | 27 +++---------------- 2 files changed, 33 insertions(+), 24 deletions(-) create mode 100644 packages/website/ts/pages/jobs/bulleted_item_list.tsx (limited to 'packages/website') diff --git a/packages/website/ts/pages/jobs/bulleted_item_list.tsx b/packages/website/ts/pages/jobs/bulleted_item_list.tsx new file mode 100644 index 000000000..108f31e00 --- /dev/null +++ b/packages/website/ts/pages/jobs/bulleted_item_list.tsx @@ -0,0 +1,30 @@ +import { colors } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; + +export interface BulletedItemListProps { + headerText: string; + bulletedItems: BulletedItemProps[]; +} +export const BulletedItemList = (props: BulletedItemListProps) => { + return ( +
+
+ {props.headerText} +
+
+ {_.map(props.bulletedItems, bulletedItemProps => { + return ( + + ); + })} +
+
+ ); +}; diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx index 9bb98d016..37e62d23b 100644 --- a/packages/website/ts/pages/jobs/values.tsx +++ b/packages/website/ts/pages/jobs/values.tsx @@ -2,7 +2,8 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; +import { BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; +import { BulletedItemList } from 'ts/pages/jobs/bulleted_item_list'; const BULLETED_ITEMS: BulletedItemProps[] = [ { @@ -22,26 +23,4 @@ const BULLETED_ITEMS: BulletedItemProps[] = [ }, ]; -export const Values = () => { - const isSmallScreen = false; - return ( -
-
-
- Our Values -
-
- {_.map(BULLETED_ITEMS, bulletedItemProps => { - return ( - - ); - })} -
-
-
- ); -}; +export const Values = () => ; -- cgit v1.2.3 From 3c073bc360f88129bd59e7e3d0d7fbcf69828da4 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Sun, 10 Jun 2018 20:45:18 -0700 Subject: Benefits section --- packages/website/ts/pages/jobs/benefits.tsx | 84 +++++++++++++++++++--- .../website/ts/pages/jobs/bulleted_item_list.tsx | 1 + packages/website/ts/pages/jobs/jobs.tsx | 2 +- 3 files changed, 75 insertions(+), 12 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx index fa4edb240..03a906a10 100644 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -1,22 +1,84 @@ +import * as _ from 'lodash'; import * as React from 'react'; +import { BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; +import { BulletedItemList } from 'ts/pages/jobs/bulleted_item_list'; import { FilledImage } from 'ts/pages/jobs/filled_image'; +import { FloatingImage } from 'ts/pages/jobs/floating_image'; +import { colors } from 'ts/style/colors'; +import { ScreenWidths } from 'ts/types'; -export const Benefits = () => ( +const IMAGE_PATHS = ['/images/jobs/location1.png', '/images/jobs/location2.png', '/images/jobs/location3.png']; +const BULLETED_ITEMS: BulletedItemProps[] = [ + { + bulletColor: '#6FCF97', + title: 'Ethics/Doing the right thing', + description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + }, + { + bulletColor: '#56CCF2', + title: 'Consistently ship', + description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + }, + { + bulletColor: '#EB5757', + title: 'Focus on long term impact', + description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + }, + { + bulletColor: '#6FCF97', + title: 'Test test yo', + description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + }, + { + bulletColor: '#56CCF2', + title: 'Waddle Waddle', + description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + }, +]; + +export interface BenefitsProps { + screenWidth: ScreenWidths; +} + +export const Benefits = (props: BenefitsProps) => ( +
+ {props.screenWidth === ScreenWidths.Sm ? : } +
+); + +const LargeLayout = () => (
-
- + +
+
+ +
+
+); + +const SmallLayout = () => ( +
+ + +
+); + +const BenefitsList = () => ; + +const ImageGrid = () => ( +
+
+ +
+
+
+
-
-
- -
-
- -
+
+
-
); diff --git a/packages/website/ts/pages/jobs/bulleted_item_list.tsx b/packages/website/ts/pages/jobs/bulleted_item_list.tsx index 108f31e00..30dd126d1 100644 --- a/packages/website/ts/pages/jobs/bulleted_item_list.tsx +++ b/packages/website/ts/pages/jobs/bulleted_item_list.tsx @@ -18,6 +18,7 @@ export const BulletedItemList = (props: BulletedItemListProps) => { {_.map(props.bulletedItems, bulletedItemProps => { return ( { )} - +
-- cgit v1.2.3 From bc36c0faed11d61164027efad5b2ad9d07f0573f Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Sun, 10 Jun 2018 21:29:15 -0700 Subject: Teams section --- packages/website/ts/pages/jobs/benefits.tsx | 7 ++- packages/website/ts/pages/jobs/bulleted_item.tsx | 22 -------- .../website/ts/pages/jobs/bulleted_item_list.tsx | 47 ++++++++++++++--- packages/website/ts/pages/jobs/jobs.tsx | 2 +- packages/website/ts/pages/jobs/teams.tsx | 60 +++++++++------------- packages/website/ts/pages/jobs/values.tsx | 7 ++- 6 files changed, 70 insertions(+), 75 deletions(-) delete mode 100644 packages/website/ts/pages/jobs/bulleted_item.tsx (limited to 'packages/website') diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx index 03a906a10..ce261592f 100644 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -1,15 +1,14 @@ import * as _ from 'lodash'; import * as React from 'react'; -import { BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; -import { BulletedItemList } from 'ts/pages/jobs/bulleted_item_list'; +import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list'; import { FilledImage } from 'ts/pages/jobs/filled_image'; import { FloatingImage } from 'ts/pages/jobs/floating_image'; import { colors } from 'ts/style/colors'; import { ScreenWidths } from 'ts/types'; const IMAGE_PATHS = ['/images/jobs/location1.png', '/images/jobs/location2.png', '/images/jobs/location3.png']; -const BULLETED_ITEMS: BulletedItemProps[] = [ +const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [ { bulletColor: '#6FCF97', title: 'Ethics/Doing the right thing', @@ -65,7 +64,7 @@ const SmallLayout = () => (
); -const BenefitsList = () => ; +const BenefitsList = () => ; const ImageGrid = () => (
diff --git a/packages/website/ts/pages/jobs/bulleted_item.tsx b/packages/website/ts/pages/jobs/bulleted_item.tsx deleted file mode 100644 index 9dc4fe4a3..000000000 --- a/packages/website/ts/pages/jobs/bulleted_item.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from 'react'; - -export interface BulletedItemProps { - bulletColor: string; - title: string; - description: string; - height?: number; -} -export const BulletedItem = (props: BulletedItemProps) => { - const minHeight = props.height || 150; - return ( -
- - - -
-
{props.title}
-
{props.description}
-
-
- ); -}; diff --git a/packages/website/ts/pages/jobs/bulleted_item_list.tsx b/packages/website/ts/pages/jobs/bulleted_item_list.tsx index 30dd126d1..a00290418 100644 --- a/packages/website/ts/pages/jobs/bulleted_item_list.tsx +++ b/packages/website/ts/pages/jobs/bulleted_item_list.tsx @@ -2,20 +2,30 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; - +export type BulletedItemInfo = BulletedItemProps; export interface BulletedItemListProps { - headerText: string; - bulletedItems: BulletedItemProps[]; + headerText?: string; + bulletedItemInfos: BulletedItemInfo[]; } export const BulletedItemList = (props: BulletedItemListProps) => { return (
-
- {props.headerText} -
+ {!_.isUndefined(props.headerText) && ( +
+ {props.headerText} +
+ )} +
- {_.map(props.bulletedItems, bulletedItemProps => { + {_.map(props.bulletedItemInfos, bulletedItemProps => { return ( {
); }; + +interface BulletedItemProps { + bulletColor: string; + title: string; + description: string; + height?: number; +} +const BulletedItem = (props: BulletedItemProps) => { + const minHeight = props.height || 150; + return ( +
+ + + +
+
{props.title}
+
{props.description}
+
+
+ ); +}; diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx index 9cce594fc..f3b455379 100644 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -62,7 +62,7 @@ export class Jobs extends React.Component { )} - +
diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx index b00170877..3d953c993 100644 --- a/packages/website/ts/pages/jobs/teams.tsx +++ b/packages/website/ts/pages/jobs/teams.tsx @@ -2,9 +2,10 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; +import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list'; +import { ScreenWidths } from 'ts/types'; -const ITEMS_COLUMN1: BulletedItemProps[] = [ +const ITEMS_COLUMN1: BulletedItemInfo[] = [ { bulletColor: '#EB5757', title: 'User Growth', @@ -18,7 +19,7 @@ const ITEMS_COLUMN1: BulletedItemProps[] = [ 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', }, ]; -const ITEMS_COLUMN2: BulletedItemProps[] = [ +const ITEMS_COLUMN2: BulletedItemInfo[] = [ { bulletColor: '#EB5757', title: 'Developer Tools', @@ -32,38 +33,25 @@ const ITEMS_COLUMN2: BulletedItemProps[] = [ 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', }, ]; +const HEADER_TEXT = 'Our Teams'; -export const Teams = () => { - const isSmallScreen = false; - const teamHeight = 220; - return ( -
-
-
- {_.map(ITEMS_COLUMN1, bulletedItemProps => { - return ( - - ); - })} -
-
- {_.map(ITEMS_COLUMN2, bulletedItemProps => { - return ( - - ); - })} -
-
+export interface TeamsProps { + screenWidth: ScreenWidths; +} + +export const Teams = (props: TeamsProps) => (props.screenWidth === ScreenWidths.Sm ? : ); + +const LargeLayout = () => ( +
+
+
- ); -}; +
+ +
+
+); + +const SmallLayout = () => ( + +); diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx index 37e62d23b..45bbf950f 100644 --- a/packages/website/ts/pages/jobs/values.tsx +++ b/packages/website/ts/pages/jobs/values.tsx @@ -2,10 +2,9 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; -import { BulletedItemList } from 'ts/pages/jobs/bulleted_item_list'; +import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list'; -const BULLETED_ITEMS: BulletedItemProps[] = [ +const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [ { bulletColor: '#6FCF97', title: 'Ethics/Doing the right thing', @@ -23,4 +22,4 @@ const BULLETED_ITEMS: BulletedItemProps[] = [ }, ]; -export const Values = () => ; +export const Values = () => ; -- cgit v1.2.3 From 679d60cd5a5debcacff42c38967c1f8b7d972882 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Mon, 11 Jun 2018 12:38:25 -0700 Subject: Implement large screen open positions --- .../ts/components/relayer_index/relayer_index.tsx | 32 +--- packages/website/ts/components/ui/retry.tsx | 33 ++++ packages/website/ts/pages/jobs/benefits.tsx | 2 +- packages/website/ts/pages/jobs/mission.tsx | 2 +- packages/website/ts/pages/jobs/open_positions.tsx | 196 +++++++++++++-------- packages/website/ts/pages/jobs/teams.tsx | 2 +- packages/website/ts/style/colors.ts | 3 +- packages/website/ts/types.ts | 8 + packages/website/ts/utils/backend_client.ts | 13 +- 9 files changed, 187 insertions(+), 104 deletions(-) create mode 100644 packages/website/ts/components/ui/retry.tsx (limited to 'packages/website') diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index 683f7084b..69a7cada1 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -6,6 +6,7 @@ import { GridList } from 'material-ui/GridList'; import * as React from 'react'; import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile'; +import { Retry } from 'ts/components/ui/retry'; import { colors } from 'ts/style/colors'; import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; @@ -63,7 +64,8 @@ export class RelayerIndex extends React.Component {_.isUndefined(this.state.error) ? ( @@ -124,31 +126,3 @@ export class RelayerIndex extends React.Component void; -} -const Retry = (props: RetryProps) => ( -
-
-
- Something went wrong. -
-
- -
-
-
-); diff --git a/packages/website/ts/components/ui/retry.tsx b/packages/website/ts/components/ui/retry.tsx new file mode 100644 index 000000000..f18b5abac --- /dev/null +++ b/packages/website/ts/components/ui/retry.tsx @@ -0,0 +1,33 @@ +import FlatButton from 'material-ui/FlatButton'; +import { GridList } from 'material-ui/GridList'; +import * as React from 'react'; + +import { colors } from 'ts/style/colors'; + +export interface RetryProps { + onRetry: () => void; +} +export const Retry = (props: RetryProps) => ( +
+
+
+ Something went wrong. +
+
+ +
+
+
+); diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx index ce261592f..a7cc23503 100644 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -41,7 +41,7 @@ export interface BenefitsProps { } export const Benefits = (props: BenefitsProps) => ( -
+
{props.screenWidth === ScreenWidths.Sm ? : }
); diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx index a3584e5f6..b4d294623 100644 --- a/packages/website/ts/pages/jobs/mission.tsx +++ b/packages/website/ts/pages/jobs/mission.tsx @@ -35,7 +35,7 @@ export const Mission = (props: MissionProps) => {
); return ( -
+
{isSmallScreen ? (
diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx index f9c37d36f..5eb8e429d 100644 --- a/packages/website/ts/pages/jobs/open_positions.tsx +++ b/packages/website/ts/pages/jobs/open_positions.tsx @@ -1,80 +1,136 @@ import * as _ from 'lodash'; +import CircularProgress from 'material-ui/CircularProgress'; import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table'; import * as React from 'react'; -const POSITIONS = [ - { - name: 'Community Director', - department: 'Marketing', - office: 'Remote / San Francisco', - }, - { - name: 'Data Scientist / Data Engineer', - department: 'Engineering', - office: 'Remote / San Francisco', - }, - { - name: 'Executive Assitant / Office Manager', - department: 'Operations', - office: 'Remote / San Francisco', - }, - { - name: 'Research Fellow - Economics / Governance', - department: 'Engineering', - office: 'Remote / San Francisco', - }, - { - name: 'Software Engineer - Blockchain', - department: 'Engineer', - office: 'Remote / San Francisco', - }, - { - name: 'Software Engineer - Full-stack', - department: 'Marketing', - office: 'Remote / San Francisco', - }, -]; +import { Retry } from 'ts/components/ui/retry'; +import { colors } from 'ts/style/colors'; +import { WebsiteBackendJobInfo } from 'ts/types'; +import { backendClient } from 'ts/utils/backend_client'; + +const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 }; export interface OpenPositionsProps { hash: string; } +export interface OpenPositionsState { + jobInfos?: WebsiteBackendJobInfo[]; + error?: Error; +} -export const OpenPositions = (props: OpenPositionsProps) => { - const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 }; - return ( -
-
- - - - Position - - - Department - - - Office - - - - - {_.map(POSITIONS, position => { - return ( - - - {position.name} - - - {position.department} - - - {position.office} - +export class OpenPositions extends React.Component { + private _isUnmounted: boolean; + constructor(props: OpenPositionsProps) { + super(props); + this._isUnmounted = false; + this.state = { + jobInfos: undefined, + error: undefined, + }; + } + public componentWillMount(): void { + // tslint:disable-next-line:no-floating-promises + this._fetchJobInfosAsync(); + } + public componentWillUnmount(): void { + this._isUnmounted = true; + } + public render(): React.ReactNode { + const isReadyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.jobInfos); + if (!isReadyToRender) { + return ( + // TODO: consolidate this loading component with the one in portal and RelayerIndex + // TODO: possibly refactor into a generic loading container with spinner and retry UI +
+ {_.isUndefined(this.state.error) ? ( + + ) : ( + + )} +
+ ); + } else { + return ( +
+ + <Table selectable={false} onCellClick={this._onCellClick.bind(this)}> + <TableHeader displaySelectAll={false} adjustForCheckbox={false}> + <TableRow> + <TableHeaderColumn colSpan={5} style={labelStyle}> + Position + </TableHeaderColumn> + <TableHeaderColumn colSpan={3} style={labelStyle}> + Department + </TableHeaderColumn> + <TableHeaderColumn colSpan={4} style={labelStyle}> + Office + </TableHeaderColumn> </TableRow> - ); - })} - </TableBody> - </Table> - </div> - ); -}; + </TableHeader> + <TableBody displayRowCheckbox={false} showRowHover={true}> + {_.map(this.state.jobInfos, jobInfo => { + return this._renderJobInfo(jobInfo); + })} + </TableBody> + </Table> + </div> + ); + } + } + private _renderJobInfo(jobInfo: WebsiteBackendJobInfo): React.ReactNode { + return ( + <TableRow key={jobInfo.id} hoverable={true} displayBorder={false} style={{ height: 100, border: 2 }}> + <TableRowColumn colSpan={5} style={labelStyle}> + {jobInfo.title} + </TableRowColumn> + <TableRowColumn colSpan={3} style={labelStyle}> + {jobInfo.department} + </TableRowColumn> + <TableRowColumn colSpan={4} style={labelStyle}> + {jobInfo.office} + </TableRowColumn> + </TableRow> + ); + } + private async _fetchJobInfosAsync(): Promise<void> { + try { + if (!this._isUnmounted) { + this.setState({ + jobInfos: undefined, + error: undefined, + }); + } + const jobInfos = await backendClient.getJobInfosAsync(); + if (!this._isUnmounted) { + this.setState({ + jobInfos, + }); + } + } catch (error) { + if (!this._isUnmounted) { + this.setState({ + error, + }); + } + } + } + private _onCellClick(rowNumber: number): void { + if (_.isUndefined(this.state.jobInfos)) { + return; + } + const url = this.state.jobInfos[rowNumber].url; + window.open(url, '_blank'); + } +} + +const Title = () => ( + <div + className="h2 lg-py4 md-py4 sm-py3" + style={{ + paddingLeft: 90, + fontFamily: 'Roboto Mono', + }} + > + {'Open Positions'} + </div> +); diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx index 3d953c993..465bae7f4 100644 --- a/packages/website/ts/pages/jobs/teams.tsx +++ b/packages/website/ts/pages/jobs/teams.tsx @@ -42,7 +42,7 @@ export interface TeamsProps { export const Teams = (props: TeamsProps) => (props.screenWidth === ScreenWidths.Sm ? <SmallLayout /> : <LargeLayout />); const LargeLayout = () => ( - <div className="mx-auto max-width-4 clearfix"> + <div className="mx-auto max-width-4 clearfix pb4"> <div className="col lg-col-6 md-col-6 col-12"> <BulletedItemList headerText={HEADER_TEXT} bulletedItemInfos={ITEMS_COLUMN1} /> </div> diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts index 002318e14..539f3e125 100644 --- a/packages/website/ts/style/colors.ts +++ b/packages/website/ts/style/colors.ts @@ -11,7 +11,8 @@ const appColors = { wrapEtherConfirmationButton: sharedColors.mediumBlue, drawerMenuBackground: '#4a4a4a', menuItemDefaultSelectedBackground: '#424242', - jobsPageGrey: '#fafafa', + jobsPageBackground: '#fafafa', + jobsPageOpenPositionRow: '#f5f5f5', }; export const colors = { diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 15444e517..24e86a901 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -536,4 +536,12 @@ export interface WebsiteBackendTokenInfo { export interface WebsiteBackendGasInfo { average: number; } + +export interface WebsiteBackendJobInfo { + id: number; + title: string; + department: string; + office: string; + url: string; +} // tslint:disable:max-file-line-count diff --git a/packages/website/ts/utils/backend_client.ts b/packages/website/ts/utils/backend_client.ts index 6b16aea6b..835a6ef4d 100644 --- a/packages/website/ts/utils/backend_client.ts +++ b/packages/website/ts/utils/backend_client.ts @@ -1,10 +1,17 @@ import * as _ from 'lodash'; -import { ArticlesBySection, WebsiteBackendGasInfo, WebsiteBackendPriceInfo, WebsiteBackendRelayerInfo } from 'ts/types'; +import { + ArticlesBySection, + WebsiteBackendGasInfo, + WebsiteBackendJobInfo, + WebsiteBackendPriceInfo, + WebsiteBackendRelayerInfo, +} from 'ts/types'; import { fetchUtils } from 'ts/utils/fetch_utils'; import { utils } from 'ts/utils/utils'; const ETH_GAS_STATION_ENDPOINT = '/eth_gas_station'; +const JOBS_ENDPOINT = '/jobs'; const PRICES_ENDPOINT = '/prices'; const RELAYERS_ENDPOINT = '/relayers'; const WIKI_ENDPOINT = '/wiki'; @@ -15,6 +22,10 @@ export const backendClient = { const result = await fetchUtils.requestAsync(utils.getBackendBaseUrl(), ETH_GAS_STATION_ENDPOINT); return result; }, + async getJobInfosAsync(): Promise<WebsiteBackendJobInfo[]> { + const result = await fetchUtils.requestAsync(utils.getBackendBaseUrl(), JOBS_ENDPOINT); + return result; + }, async getPriceInfoAsync(tokenSymbols: string[]): Promise<WebsiteBackendPriceInfo> { if (_.isEmpty(tokenSymbols)) { return {}; -- cgit v1.2.3 From 7080f0c35a3e5c84fa2907c6feb0610c699c2823 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 10:38:41 -0700 Subject: Implement small open positions --- packages/website/ts/pages/jobs/benefits.tsx | 57 ++++++++--- .../website/ts/pages/jobs/bulleted_item_list.tsx | 62 ------------ packages/website/ts/pages/jobs/jobs.tsx | 2 +- .../website/ts/pages/jobs/list/header_item.tsx | 24 +++++ packages/website/ts/pages/jobs/list/list_item.tsx | 15 +++ packages/website/ts/pages/jobs/open_positions.tsx | 112 +++++++++++++++------ packages/website/ts/pages/jobs/teams.tsx | 42 ++++++-- packages/website/ts/pages/jobs/values.tsx | 38 ++++++- 8 files changed, 232 insertions(+), 120 deletions(-) delete mode 100644 packages/website/ts/pages/jobs/bulleted_item_list.tsx create mode 100644 packages/website/ts/pages/jobs/list/header_item.tsx create mode 100644 packages/website/ts/pages/jobs/list/list_item.tsx (limited to 'packages/website') diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx index a7cc23503..b27c68a5b 100644 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -1,40 +1,45 @@ import * as _ from 'lodash'; import * as React from 'react'; -import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list'; import { FilledImage } from 'ts/pages/jobs/filled_image'; import { FloatingImage } from 'ts/pages/jobs/floating_image'; +import { HeaderItem } from 'ts/pages/jobs/list/header_item'; +import { ListItem } from 'ts/pages/jobs/list/list_item'; import { colors } from 'ts/style/colors'; import { ScreenWidths } from 'ts/types'; const IMAGE_PATHS = ['/images/jobs/location1.png', '/images/jobs/location2.png', '/images/jobs/location3.png']; -const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [ +const BENEFIT_ITEM_PROPS_LIST: BenefitItemProps[] = [ { bulletColor: '#6FCF97', - title: 'Ethics/Doing the right thing', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + description: + 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', }, { bulletColor: '#56CCF2', - title: 'Consistently ship', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + description: + 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', }, { bulletColor: '#EB5757', - title: 'Focus on long term impact', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + description: + 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', }, { bulletColor: '#6FCF97', - title: 'Test test yo', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + description: + 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', }, { bulletColor: '#56CCF2', - title: 'Waddle Waddle', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + description: + 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', }, ]; +const LARGE_LAYOUT_HEIGHT = 937; +const LARGE_LAYOUT_BENEFITS_LIST_PADDING_LEFT = 205; +const HEADER_TEXT = 'Benefits'; +const BENEFIT_ITEM_MIN_HEIGHT = 150; export interface BenefitsProps { screenWidth: ScreenWidths; @@ -47,11 +52,14 @@ export const Benefits = (props: BenefitsProps) => ( ); const LargeLayout = () => ( - <div className="flex" style={{ height: 937 }}> + <div className="flex" style={{ height: LARGE_LAYOUT_HEIGHT }}> <div style={{ width: '43%', height: '100%' }}> <ImageGrid /> </div> - <div style={{ paddingLeft: 205, width: '57%', height: '100%' }}> + <div + className="pr4" + style={{ paddingLeft: LARGE_LAYOUT_BENEFITS_LIST_PADDING_LEFT, width: '57%', height: '100%' }} + > <BenefitsList /> </div> </div> @@ -64,7 +72,26 @@ const SmallLayout = () => ( </div> ); -const BenefitsList = () => <BulletedItemList headerText="Benefits" bulletedItemInfos={BULLETED_ITEM_INFOS} />; +export const BenefitsList = () => { + return ( + <div> + <HeaderItem headerText={HEADER_TEXT} /> + {_.map(BENEFIT_ITEM_PROPS_LIST, valueItemProps => React.createElement(BenefitItem, valueItemProps))} + </div> + ); +}; +interface BenefitItemProps { + bulletColor: string; + description: string; +} + +const BenefitItem: React.StatelessComponent<BenefitItemProps> = ({ bulletColor, description }) => ( + <div style={{ minHeight: BENEFIT_ITEM_MIN_HEIGHT }}> + <ListItem bulletColor={bulletColor}> + <div style={{ fontSize: 16, lineHeight: 1.5 }}>{description}</div> + </ListItem> + </div> +); const ImageGrid = () => ( <div style={{ width: '100%', height: '100%' }}> diff --git a/packages/website/ts/pages/jobs/bulleted_item_list.tsx b/packages/website/ts/pages/jobs/bulleted_item_list.tsx deleted file mode 100644 index a00290418..000000000 --- a/packages/website/ts/pages/jobs/bulleted_item_list.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { colors } from '@0xproject/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; - -export type BulletedItemInfo = BulletedItemProps; -export interface BulletedItemListProps { - headerText?: string; - bulletedItemInfos: BulletedItemInfo[]; -} -export const BulletedItemList = (props: BulletedItemListProps) => { - return ( - <div className="mx-auto max-width-4"> - {!_.isUndefined(props.headerText) && ( - <div - className="h2 lg-py4 md-py4 sm-py3" - style={{ - paddingLeft: 90, - fontFamily: 'Roboto Mono', - minHeight: '1.25em', - lineHeight: 1.25, - }} - > - {props.headerText} - </div> - )} - - <div className="px2"> - {_.map(props.bulletedItemInfos, bulletedItemProps => { - return ( - <BulletedItem - key={bulletedItemProps.title} - bulletColor={bulletedItemProps.bulletColor} - title={bulletedItemProps.title} - description={bulletedItemProps.description} - /> - ); - })} - </div> - </div> - ); -}; - -interface BulletedItemProps { - bulletColor: string; - title: string; - description: string; - height?: number; -} -const BulletedItem = (props: BulletedItemProps) => { - const minHeight = props.height || 150; - return ( - <div className="flex" style={{ minHeight }}> - <svg className="flex-none px2" height="26" width="26"> - <circle cx="13" cy="13" r="13" fill={props.bulletColor} /> - </svg> - <div className="flex-auto px2"> - <div style={{ paddingTop: 3, fontWeight: 'bold', fontSize: 16 }}>{props.title}</div> - <div style={{ paddingTop: 12, fontSize: 16, lineHeight: 2 }}>{props.description}</div> - </div> - </div> - ); -}; diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx index f3b455379..9fd305972 100644 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -63,7 +63,7 @@ export class Jobs extends React.Component<JobsProps, JobsState> { <Values /> <Benefits screenWidth={this.props.screenWidth} /> <Teams screenWidth={this.props.screenWidth} /> - <OpenPositions hash={OPEN_POSITIONS_HASH} /> + <OpenPositions hash={OPEN_POSITIONS_HASH} screenWidth={this.props.screenWidth} /> <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} /> </div> ); diff --git a/packages/website/ts/pages/jobs/list/header_item.tsx b/packages/website/ts/pages/jobs/list/header_item.tsx new file mode 100644 index 000000000..b130cb0c4 --- /dev/null +++ b/packages/website/ts/pages/jobs/list/header_item.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; + +import { ListItem } from 'ts/pages/jobs/list/list_item'; + +export interface HeaderItemProps { + headerText?: string; +} +export const HeaderItem: React.StatelessComponent<HeaderItemProps> = ({ headerText }) => { + return ( + <div className="h2 lg-py4 md-py4 sm-py3"> + <ListItem> + <div + style={{ + fontFamily: 'Roboto Mono', + minHeight: '1.25em', + lineHeight: 1.25, + }} + > + {headerText} + </div> + </ListItem> + </div> + ); +}; diff --git a/packages/website/ts/pages/jobs/list/list_item.tsx b/packages/website/ts/pages/jobs/list/list_item.tsx new file mode 100644 index 000000000..d7838bc01 --- /dev/null +++ b/packages/website/ts/pages/jobs/list/list_item.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; + +export interface ListItemProps { + bulletColor?: string; +} +export const ListItem: React.StatelessComponent<ListItemProps> = ({ bulletColor, children }) => { + return ( + <div className="flex items-center"> + <svg className="flex-none lg-px2 md-px2 sm-pl2" height="26" width="26"> + <circle cx="13" cy="13" r="13" fill={bulletColor || 'transparent'} /> + </svg> + <div className="flex-auto px2">{children}</div> + </div> + ); +}; diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx index 5eb8e429d..f6dbc38a0 100644 --- a/packages/website/ts/pages/jobs/open_positions.tsx +++ b/packages/website/ts/pages/jobs/open_positions.tsx @@ -4,14 +4,20 @@ import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowCol import * as React from 'react'; import { Retry } from 'ts/components/ui/retry'; +import { HeaderItem } from 'ts/pages/jobs/list/header_item'; +import { ListItem } from 'ts/pages/jobs/list/list_item'; import { colors } from 'ts/style/colors'; -import { WebsiteBackendJobInfo } from 'ts/types'; +import { styled } from 'ts/style/theme'; +import { ScreenWidths, WebsiteBackendJobInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 }; +const HEADER_TEXT = 'Open Positions'; +const LIST_ITEM_MIN_HEIGHT = 80; export interface OpenPositionsProps { hash: string; + screenWidth: ScreenWidths; } export interface OpenPositionsState { jobInfos?: WebsiteBackendJobInfo[]; @@ -37,6 +43,7 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit } public render(): React.ReactNode { const isReadyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.jobInfos); + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; if (!isReadyToRender) { return ( // TODO: consolidate this loading component with the one in portal and RelayerIndex @@ -52,32 +59,54 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit } else { return ( <div id={this.props.hash} className="mx-auto max-width-4"> - <Title /> - <Table selectable={false} onCellClick={this._onCellClick.bind(this)}> - <TableHeader displaySelectAll={false} adjustForCheckbox={false}> - <TableRow> - <TableHeaderColumn colSpan={5} style={labelStyle}> - Position - </TableHeaderColumn> - <TableHeaderColumn colSpan={3} style={labelStyle}> - Department - </TableHeaderColumn> - <TableHeaderColumn colSpan={4} style={labelStyle}> - Office - </TableHeaderColumn> - </TableRow> - </TableHeader> - <TableBody displayRowCheckbox={false} showRowHover={true}> - {_.map(this.state.jobInfos, jobInfo => { - return this._renderJobInfo(jobInfo); - })} - </TableBody> - </Table> + {isSmallScreen ? this._renderList() : this._renderTable()} </div> ); } } - private _renderJobInfo(jobInfo: WebsiteBackendJobInfo): React.ReactNode { + private _renderList(): React.ReactNode { + return ( + <div style={{ backgroundColor: colors.jobsPageBackground }}> + <HeaderItem headerText={HEADER_TEXT} /> + {_.map(this.state.jobInfos, jobInfo => ( + <JobInfoListItem + key={jobInfo.id} + title={jobInfo.title} + description={jobInfo.department} + onClick={this._openJobInfoUrl.bind(this, jobInfo)} + /> + ))} + </div> + ); + } + private _renderTable(): React.ReactNode { + return ( + <div> + <HeaderItem headerText={HEADER_TEXT} /> + <Table selectable={false} onCellClick={this._onCellClick.bind(this)}> + <TableHeader displaySelectAll={false} adjustForCheckbox={false}> + <TableRow> + <TableHeaderColumn colSpan={5} style={labelStyle}> + Position + </TableHeaderColumn> + <TableHeaderColumn colSpan={3} style={labelStyle}> + Department + </TableHeaderColumn> + <TableHeaderColumn colSpan={4} style={labelStyle}> + Office + </TableHeaderColumn> + </TableRow> + </TableHeader> + <TableBody displayRowCheckbox={false} showRowHover={true}> + {_.map(this.state.jobInfos, jobInfo => { + return this._renderJobInfoTableRow(jobInfo); + })} + </TableBody> + </Table> + </div> + ); + } + private _renderJobInfoTableRow(jobInfo: WebsiteBackendJobInfo): React.ReactNode { return ( <TableRow key={jobInfo.id} hoverable={true} displayBorder={false} style={{ height: 100, border: 2 }}> <TableRowColumn colSpan={5} style={labelStyle}> @@ -118,19 +147,36 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit if (_.isUndefined(this.state.jobInfos)) { return; } - const url = this.state.jobInfos[rowNumber].url; + const jobInfo = this.state.jobInfos[rowNumber]; + this._openJobInfoUrl(jobInfo); + } + + private _openJobInfoUrl(jobInfo: WebsiteBackendJobInfo): void { + const url = jobInfo.url; window.open(url, '_blank'); } } -const Title = () => ( - <div - className="h2 lg-py4 md-py4 sm-py3" - style={{ - paddingLeft: 90, - fontFamily: 'Roboto Mono', - }} - > - {'Open Positions'} +export interface JobInfoListItemProps { + title?: string; + description?: string; + onClick?: (event: React.MouseEvent<HTMLElement>) => void; +} + +const PlainJobInfoListItem: React.StatelessComponent<JobInfoListItemProps> = ({ title, description, onClick }) => ( + <div className="mb3" onClick={onClick}> + <ListItem> + <div style={{ fontWeight: 'bold', fontSize: 16, color: colors.mediumBlue }}>{title + ' ›'}</div> + <div className="pt1" style={{ fontSize: 16, color: colors.darkGrey }}> + {description} + </div> + </ListItem> </div> ); + +export const JobInfoListItem = styled(PlainJobInfoListItem)` + cursor: pointer; + &:hover { + opacity: 0.5; + } +`; diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx index 465bae7f4..dcb457d06 100644 --- a/packages/website/ts/pages/jobs/teams.tsx +++ b/packages/website/ts/pages/jobs/teams.tsx @@ -2,10 +2,11 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list'; +import { HeaderItem } from 'ts/pages/jobs/list/header_item'; +import { ListItem } from 'ts/pages/jobs/list/list_item'; import { ScreenWidths } from 'ts/types'; -const ITEMS_COLUMN1: BulletedItemInfo[] = [ +const TEAM_ITEM_PROPS_COLUMN1: TeamItemProps[] = [ { bulletColor: '#EB5757', title: 'User Growth', @@ -19,7 +20,7 @@ const ITEMS_COLUMN1: BulletedItemInfo[] = [ 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', }, ]; -const ITEMS_COLUMN2: BulletedItemInfo[] = [ +const TEAM_ITEM_PROPS_COLUMN2: TeamItemProps[] = [ { bulletColor: '#EB5757', title: 'Developer Tools', @@ -34,6 +35,7 @@ const ITEMS_COLUMN2: BulletedItemInfo[] = [ }, ]; const HEADER_TEXT = 'Our Teams'; +const MINIMUM_ITEM_HEIGHT = 240; export interface TeamsProps { screenWidth: ScreenWidths; @@ -44,14 +46,42 @@ export const Teams = (props: TeamsProps) => (props.screenWidth === ScreenWidths. const LargeLayout = () => ( <div className="mx-auto max-width-4 clearfix pb4"> <div className="col lg-col-6 md-col-6 col-12"> - <BulletedItemList headerText={HEADER_TEXT} bulletedItemInfos={ITEMS_COLUMN1} /> + <HeaderItem headerText={HEADER_TEXT} /> + {_.map(TEAM_ITEM_PROPS_COLUMN1, teamItemProps => React.createElement(TeamItem, teamItemProps))} </div> <div className="col lg-col-6 md-col-6 col-12"> - <BulletedItemList headerText=" " bulletedItemInfos={ITEMS_COLUMN2} /> + <HeaderItem headerText=" " /> + {_.map(TEAM_ITEM_PROPS_COLUMN2, teamItemProps => React.createElement(TeamItem, teamItemProps))} </div> </div> ); const SmallLayout = () => ( - <BulletedItemList headerText={HEADER_TEXT} bulletedItemInfos={_.concat(ITEMS_COLUMN1, ITEMS_COLUMN2)} /> + <div> + <HeaderItem headerText={HEADER_TEXT} /> + {_.map(_.concat(TEAM_ITEM_PROPS_COLUMN1, TEAM_ITEM_PROPS_COLUMN2), teamItemProps => + React.createElement(TeamItem, teamItemProps), + )} + </div> ); + +interface TeamItemProps { + bulletColor: string; + title: string; + description: string; +} + +export const TeamItem: React.StatelessComponent<TeamItemProps> = ({ bulletColor, title, description }) => { + return ( + <div style={{ minHeight: MINIMUM_ITEM_HEIGHT }}> + <ListItem bulletColor={bulletColor}> + <div style={{ fontWeight: 'bold', fontSize: 16 }}>{title}</div> + </ListItem> + <ListItem> + <div className="pt1" style={{ fontSize: 16, lineHeight: 2 }}> + {description} + </div> + </ListItem> + </div> + ); +}; diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx index 45bbf950f..abacafdba 100644 --- a/packages/website/ts/pages/jobs/values.tsx +++ b/packages/website/ts/pages/jobs/values.tsx @@ -2,9 +2,10 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list'; +import { HeaderItem } from 'ts/pages/jobs/list/header_item'; +import { ListItem } from 'ts/pages/jobs/list/list_item'; -const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [ +const VALUE_ITEM_PROPS_LIST: ValueItemProps[] = [ { bulletColor: '#6FCF97', title: 'Ethics/Doing the right thing', @@ -22,4 +23,35 @@ const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [ }, ]; -export const Values = () => <BulletedItemList headerText="Our Values" bulletedItemInfos={BULLETED_ITEM_INFOS} />; +const HEADER_TEXT = 'Our Values'; +const VALUE_ITEM_MIN_HEIGHT = 150; + +export const Values = () => { + return ( + <div className="mx-auto max-width-4"> + <HeaderItem headerText={HEADER_TEXT} /> + {_.map(VALUE_ITEM_PROPS_LIST, valueItemProps => React.createElement(ValueItem, valueItemProps))} + </div> + ); +}; + +interface ValueItemProps { + bulletColor: string; + title: string; + description: string; +} + +export const ValueItem: React.StatelessComponent<ValueItemProps> = ({ bulletColor, title, description }) => { + return ( + <div style={{ minHeight: VALUE_ITEM_MIN_HEIGHT }}> + <ListItem bulletColor={bulletColor}> + <div style={{ fontWeight: 'bold', fontSize: 16 }}>{title}</div> + </ListItem> + <ListItem> + <div className="pt1" style={{ fontSize: 16, lineHeight: 2 }}> + {description} + </div> + </ListItem> + </div> + ); +}; -- cgit v1.2.3 From f1496656607bc2b382b8f378652a2e334f4a5908 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 13:40:15 -0700 Subject: Fix lint errors --- packages/website/ts/components/relayer_index/relayer_index.tsx | 1 - packages/website/ts/components/ui/retry.tsx | 1 - packages/website/ts/containers/jobs.ts | 3 +-- packages/website/ts/index.tsx | 1 - packages/website/ts/pages/jobs/jobs.tsx | 1 - packages/website/ts/pages/jobs/mission.tsx | 6 ++++-- packages/website/ts/pages/jobs/open_positions.tsx | 9 +++++++-- packages/website/ts/pages/jobs/photo_rail.tsx | 3 --- packages/website/ts/pages/jobs/teams.tsx | 1 - packages/website/ts/pages/jobs/values.tsx | 1 - 10 files changed, 12 insertions(+), 15 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index 69a7cada1..3c5761bcd 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -1,7 +1,6 @@ import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; -import FlatButton from 'material-ui/FlatButton'; import { GridList } from 'material-ui/GridList'; import * as React from 'react'; diff --git a/packages/website/ts/components/ui/retry.tsx b/packages/website/ts/components/ui/retry.tsx index f18b5abac..accdbfe9c 100644 --- a/packages/website/ts/components/ui/retry.tsx +++ b/packages/website/ts/components/ui/retry.tsx @@ -1,5 +1,4 @@ import FlatButton from 'material-ui/FlatButton'; -import { GridList } from 'material-ui/GridList'; import * as React from 'react'; import { colors } from 'ts/style/colors'; diff --git a/packages/website/ts/containers/jobs.ts b/packages/website/ts/containers/jobs.ts index 63ef59221..b18485882 100644 --- a/packages/website/ts/containers/jobs.ts +++ b/packages/website/ts/containers/jobs.ts @@ -1,4 +1,3 @@ -import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; @@ -17,7 +16,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, ownProps: JobsProps): ConnectedState => ({ +const mapStateToProps = (state: State, _ownProps: JobsProps): ConnectedState => ({ translate: state.translate, screenWidth: state.screenWidth, }); diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index a8749d8bf..5501f5972 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -4,7 +4,6 @@ import { render } from 'react-dom'; import { Provider } from 'react-redux'; import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom'; import * as injectTapEventPlugin from 'react-tap-event-plugin'; -import { createStore, Store as ReduxStore } from 'redux'; import { About } from 'ts/containers/about'; import { FAQ } from 'ts/containers/faq'; import { Jobs } from 'ts/containers/jobs'; diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx index 9fd305972..c23b4a976 100644 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -15,7 +15,6 @@ import { Teams } from 'ts/pages/jobs/teams'; import { Values } from 'ts/pages/jobs/values'; import { Dispatcher } from 'ts/redux/dispatcher'; import { ScreenWidths } from 'ts/types'; -import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx index b4d294623..f7f874e04 100644 --- a/packages/website/ts/pages/jobs/mission.tsx +++ b/packages/website/ts/pages/jobs/mission.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { FilledImage } from 'ts/pages/jobs/filled_image'; import { colors } from 'ts/style/colors'; import { ScreenWidths } from 'ts/types'; @@ -35,7 +34,10 @@ export const Mission = (props: MissionProps) => { </div> ); return ( - <div className="container lg-py4 md-py4" style={{ backgroundColor: colors.jobsPageBackground, color: colors.black }}> + <div + className="container lg-py4 md-py4" + style={{ backgroundColor: colors.jobsPageBackground, color: colors.black }} + > <div className="mx-auto clearfix sm-py4"> {isSmallScreen ? ( <div> diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx index f6dbc38a0..c43cc43fe 100644 --- a/packages/website/ts/pages/jobs/open_positions.tsx +++ b/packages/website/ts/pages/jobs/open_positions.tsx @@ -13,7 +13,7 @@ import { backendClient } from 'ts/utils/backend_client'; const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 }; const HEADER_TEXT = 'Open Positions'; -const LIST_ITEM_MIN_HEIGHT = 80; +const TABLE_ROW_MIN_HEIGHT = 100; export interface OpenPositionsProps { hash: string; @@ -108,7 +108,12 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit } private _renderJobInfoTableRow(jobInfo: WebsiteBackendJobInfo): React.ReactNode { return ( - <TableRow key={jobInfo.id} hoverable={true} displayBorder={false} style={{ height: 100, border: 2 }}> + <TableRow + key={jobInfo.id} + hoverable={true} + displayBorder={false} + style={{ height: TABLE_ROW_MIN_HEIGHT, border: 2 }} + > <TableRowColumn colSpan={5} style={labelStyle}> {jobInfo.title} </TableRowColumn> diff --git a/packages/website/ts/pages/jobs/photo_rail.tsx b/packages/website/ts/pages/jobs/photo_rail.tsx index bcc3444ec..4db4bc31b 100644 --- a/packages/website/ts/pages/jobs/photo_rail.tsx +++ b/packages/website/ts/pages/jobs/photo_rail.tsx @@ -2,9 +2,6 @@ import * as _ from 'lodash'; import * as React from 'react'; import { FilledImage } from 'ts/pages/jobs/filled_image'; -import { ScreenWidths } from 'ts/types'; - -const IMAGE_PATHS = ['/images/jobs/office1.png', '/images/jobs/office2.png', '/images/jobs/office3.png']; export interface PhotoRailProps { images: string[]; diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx index dcb457d06..d5960949a 100644 --- a/packages/website/ts/pages/jobs/teams.tsx +++ b/packages/website/ts/pages/jobs/teams.tsx @@ -1,4 +1,3 @@ -import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx index abacafdba..799db3d67 100644 --- a/packages/website/ts/pages/jobs/values.tsx +++ b/packages/website/ts/pages/jobs/values.tsx @@ -1,4 +1,3 @@ -import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -- cgit v1.2.3 From eba8b4bf00f6e1794a8642a8972585f062c58d3b Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 13:45:56 -0700 Subject: Consolidate jobs page grey colors with shared colors --- packages/website/ts/style/colors.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts index 539f3e125..bfec3ea41 100644 --- a/packages/website/ts/style/colors.ts +++ b/packages/website/ts/style/colors.ts @@ -11,8 +11,8 @@ const appColors = { wrapEtherConfirmationButton: sharedColors.mediumBlue, drawerMenuBackground: '#4a4a4a', menuItemDefaultSelectedBackground: '#424242', - jobsPageBackground: '#fafafa', - jobsPageOpenPositionRow: '#f5f5f5', + jobsPageBackground: sharedColors.green50, + jobsPageOpenPositionRow: sharedColors.green100, }; export const colors = { -- cgit v1.2.3 From d206d0a3aea86612a274427bcf2eaa590f46c6e7 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 14:23:03 -0700 Subject: Add font family to Button component and use in Join0x component --- packages/website/ts/components/ui/button.tsx | 4 +++- packages/website/ts/pages/jobs/join_0x.tsx | 25 +++++++++++++------------ 2 files changed, 16 insertions(+), 13 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index 4c7d59839..1f88297de 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -7,6 +7,7 @@ export interface ButtonProps { className?: string; fontSize?: string; fontColor?: string; + fontFamily?: string; backgroundColor?: string; borderColor?: string; width?: string; @@ -28,7 +29,7 @@ export const Button = styled(PlainButton)` border-radius: 6px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25); font-weight: 500; - font-family: 'Roboto'; + font-family: ${props => props.fontFamily}; width: ${props => props.width}; background-color: ${props => props.backgroundColor}; border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')}; @@ -44,6 +45,7 @@ Button.defaultProps = { fontSize: '12px', backgroundColor: colors.white, width: 'auto', + fontFamily: 'Roboto', }; Button.displayName = 'Button'; diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx index e7fdf3ce1..72cce3b89 100644 --- a/packages/website/ts/pages/jobs/join_0x.tsx +++ b/packages/website/ts/pages/jobs/join_0x.tsx @@ -1,8 +1,11 @@ import { colors } from '@0xproject/react-shared'; -import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; +import { Button } from 'ts/components/ui/button'; + +const BUTTON_TEXT = 'view open positions'; + export interface Join0xProps { onCallToActionClick: () => void; } @@ -21,19 +24,17 @@ export const Join0x = (props: Join0xProps) => ( work remotely anywhere in the world to help create the infrastructure of a new tokenized economy. </div> <div className="py3"> - <FlatButton - label={'view open positions'} + <Button + type="button" backgroundColor={colors.black} - labelStyle={{ - fontSize: 18, - fontFamily: 'Roboto Mono', - fontWeight: 'lighter', - color: colors.white, - textTransform: 'lowercase', - }} - style={{ width: 280, height: 62, borderRadius: 5 }} + width="290px" + fontColor={colors.white} + fontSize="18px" + fontFamily="Roboto Mono" onClick={props.onCallToActionClick} - /> + > + {BUTTON_TEXT} + </Button> </div> </div> </div> -- cgit v1.2.3 From 982391cd7cc9fbcd5da26cd671a2b656fc48772d Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 14:23:47 -0700 Subject: Fix incorrect colors --- packages/website/ts/style/colors.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts index bfec3ea41..b15000d7a 100644 --- a/packages/website/ts/style/colors.ts +++ b/packages/website/ts/style/colors.ts @@ -11,8 +11,8 @@ const appColors = { wrapEtherConfirmationButton: sharedColors.mediumBlue, drawerMenuBackground: '#4a4a4a', menuItemDefaultSelectedBackground: '#424242', - jobsPageBackground: sharedColors.green50, - jobsPageOpenPositionRow: sharedColors.green100, + jobsPageBackground: sharedColors.grey50, + jobsPageOpenPositionRow: sharedColors.grey100, }; export const colors = { -- cgit v1.2.3 From 084285a76002bc1659797ee9a1aabc5bfae9e7d2 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 14:26:48 -0700 Subject: Replace FlatButton with Button in Retry --- packages/website/ts/components/ui/retry.tsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/retry.tsx b/packages/website/ts/components/ui/retry.tsx index accdbfe9c..543b7df4b 100644 --- a/packages/website/ts/components/ui/retry.tsx +++ b/packages/website/ts/components/ui/retry.tsx @@ -1,8 +1,10 @@ -import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; +import { Button } from 'ts/components/ui/button'; import { colors } from 'ts/style/colors'; +const BUTTON_TEXT = 'reload'; + export interface RetryProps { onRetry: () => void; } @@ -13,19 +15,17 @@ export const Retry = (props: RetryProps) => ( Something went wrong. </div> <div className="py3"> - <FlatButton - label={'reload'} + <Button + type="button" backgroundColor={colors.black} - labelStyle={{ - fontSize: 18, - fontFamily: 'Roboto Mono', - fontWeight: 'lighter', - color: colors.white, - textTransform: 'lowercase', - }} - style={{ width: 280, height: 62, borderRadius: 5 }} + width="290px" + fontColor={colors.white} + fontSize="18px" + fontFamily="Roboto Mono" onClick={props.onRetry} - /> + > + {BUTTON_TEXT} + </Button> </div> </div> </div> -- cgit v1.2.3 From ca41f100ab9187b32b61ef83f8affed5ae3670b8 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 14:49:42 -0700 Subject: Move FilledImage into components/ui --- packages/website/ts/components/ui/filled_image.tsx | 18 ++++++++++++++++++ packages/website/ts/pages/jobs/benefits.tsx | 2 +- packages/website/ts/pages/jobs/filled_image.tsx | 18 ------------------ packages/website/ts/pages/jobs/photo_rail.tsx | 2 +- 4 files changed, 20 insertions(+), 20 deletions(-) create mode 100644 packages/website/ts/components/ui/filled_image.tsx delete mode 100644 packages/website/ts/pages/jobs/filled_image.tsx (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/filled_image.tsx b/packages/website/ts/components/ui/filled_image.tsx new file mode 100644 index 000000000..7f58ee5b9 --- /dev/null +++ b/packages/website/ts/components/ui/filled_image.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; + +export interface FilledImageProps { + src: string; +} +export const FilledImage = (props: FilledImageProps) => ( + <div + style={{ + width: '100%', + height: '100%', + objectFit: 'cover', + backgroundImage: `url(${props.src})`, + backgroundRepeat: 'no-repeat', + backgroundPosition: 'center', + backgroundSize: 'cover', + }} + /> +); diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx index b27c68a5b..4ec09b129 100644 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; -import { FilledImage } from 'ts/pages/jobs/filled_image'; +import { FilledImage } from 'ts/components/ui/filled_image'; import { FloatingImage } from 'ts/pages/jobs/floating_image'; import { HeaderItem } from 'ts/pages/jobs/list/header_item'; import { ListItem } from 'ts/pages/jobs/list/list_item'; diff --git a/packages/website/ts/pages/jobs/filled_image.tsx b/packages/website/ts/pages/jobs/filled_image.tsx deleted file mode 100644 index 7f58ee5b9..000000000 --- a/packages/website/ts/pages/jobs/filled_image.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react'; - -export interface FilledImageProps { - src: string; -} -export const FilledImage = (props: FilledImageProps) => ( - <div - style={{ - width: '100%', - height: '100%', - objectFit: 'cover', - backgroundImage: `url(${props.src})`, - backgroundRepeat: 'no-repeat', - backgroundPosition: 'center', - backgroundSize: 'cover', - }} - /> -); diff --git a/packages/website/ts/pages/jobs/photo_rail.tsx b/packages/website/ts/pages/jobs/photo_rail.tsx index 4db4bc31b..acc9dcb91 100644 --- a/packages/website/ts/pages/jobs/photo_rail.tsx +++ b/packages/website/ts/pages/jobs/photo_rail.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; -import { FilledImage } from 'ts/pages/jobs/filled_image'; +import { FilledImage } from 'ts/components/ui/filled_image'; export interface PhotoRailProps { images: string[]; -- cgit v1.2.3 From 155e3d225d3255d6728e1c986de46416f5685e7f Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 15:03:16 -0700 Subject: Remove FloatingImage --- packages/website/ts/pages/jobs/benefits.tsx | 3 +-- packages/website/ts/pages/jobs/floating_image.tsx | 8 -------- packages/website/ts/pages/jobs/jobs.tsx | 4 ++-- 3 files changed, 3 insertions(+), 12 deletions(-) delete mode 100644 packages/website/ts/pages/jobs/floating_image.tsx (limited to 'packages/website') diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx index 4ec09b129..8a44eb596 100644 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -2,7 +2,6 @@ import * as _ from 'lodash'; import * as React from 'react'; import { FilledImage } from 'ts/components/ui/filled_image'; -import { FloatingImage } from 'ts/pages/jobs/floating_image'; import { HeaderItem } from 'ts/pages/jobs/list/header_item'; import { ListItem } from 'ts/pages/jobs/list/list_item'; import { colors } from 'ts/style/colors'; @@ -67,7 +66,7 @@ const LargeLayout = () => ( const SmallLayout = () => ( <div> - <FloatingImage src={_.head(IMAGE_PATHS)} /> + <FilledImage src={_.head(IMAGE_PATHS)} /> <BenefitsList /> </div> ); diff --git a/packages/website/ts/pages/jobs/floating_image.tsx b/packages/website/ts/pages/jobs/floating_image.tsx deleted file mode 100644 index 4719a9596..000000000 --- a/packages/website/ts/pages/jobs/floating_image.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; - -export interface FloatingImageProps { - src: string; -} -export const FloatingImage = (props: FloatingImageProps) => { - return <img src={props.src} style={{ width: '100%' }} />; -}; diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx index c23b4a976..314669ee9 100644 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -5,8 +5,8 @@ import * as DocumentTitle from 'react-document-title'; import { Footer } from 'ts/components/footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; +import { FilledImage } from 'ts/components/ui/filled_image'; import { Benefits } from 'ts/pages/jobs/benefits'; -import { FloatingImage } from 'ts/pages/jobs/floating_image'; import { Join0x } from 'ts/pages/jobs/join_0x'; import { Mission } from 'ts/pages/jobs/mission'; import { OpenPositions } from 'ts/pages/jobs/open_positions'; @@ -55,7 +55,7 @@ export class Jobs extends React.Component<JobsProps, JobsState> { <Join0x onCallToActionClick={this._onJoin0xCallToActionClick.bind(this)} /> <Mission screenWidth={this.props.screenWidth} /> {this._isSmallScreen() ? ( - <FloatingImage src={_.head(PHOTO_RAIL_IMAGES)} /> + <FilledImage src={_.head(PHOTO_RAIL_IMAGES)} /> ) : ( <PhotoRail images={PHOTO_RAIL_IMAGES} /> )} -- cgit v1.2.3 From 9d9341901f2b5b14e3a29a6bdc18a505d9b361aa Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 15:25:47 -0700 Subject: Use Text component for HeaderItem --- packages/website/ts/components/ui/text.tsx | 2 ++ packages/website/ts/pages/jobs/list/header_item.tsx | 16 +++++++++------- 2 files changed, 11 insertions(+), 7 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index e90c1707d..2b80869d1 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -11,6 +11,7 @@ export interface TextProps { fontFamily?: string; fontColor?: string; lineHeight?: string; + minHeight?: string; center?: boolean; fontWeight?: number; } @@ -26,6 +27,7 @@ export const Text = styled(PlainText)` ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; ${props => (props.center ? 'text-align: center' : '')}; color: ${props => props.fontColor}; + min-height: ${props => props.minHeight}; `; Text.defaultProps = { diff --git a/packages/website/ts/pages/jobs/list/header_item.tsx b/packages/website/ts/pages/jobs/list/header_item.tsx index b130cb0c4..ac214904c 100644 --- a/packages/website/ts/pages/jobs/list/header_item.tsx +++ b/packages/website/ts/pages/jobs/list/header_item.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; +import { Text } from 'ts/components/ui/text'; import { ListItem } from 'ts/pages/jobs/list/list_item'; +import { colors } from 'ts/style/colors'; export interface HeaderItemProps { headerText?: string; @@ -9,15 +11,15 @@ export const HeaderItem: React.StatelessComponent<HeaderItemProps> = ({ headerTe return ( <div className="h2 lg-py4 md-py4 sm-py3"> <ListItem> - <div - style={{ - fontFamily: 'Roboto Mono', - minHeight: '1.25em', - lineHeight: 1.25, - }} + <Text + fontFamily="Roboto Mono" + fontSize="24px" + lineHeight="1.25" + minHeight="1.25em" + fontColor={colors.black} > {headerText} - </div> + </Text> </ListItem> </div> ); -- cgit v1.2.3 From 2794d64d3e920cd30ed0603becffc74b17c22218 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 15:54:27 -0700 Subject: Use Text in OpenPositions --- packages/website/ts/components/ui/text.tsx | 2 +- packages/website/ts/pages/jobs/open_positions.tsx | 9 ++++++--- packages/website/ts/utils/configs.ts | 2 +- 3 files changed, 8 insertions(+), 5 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 2b80869d1..0fa79bc7c 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -13,7 +13,7 @@ export interface TextProps { lineHeight?: string; minHeight?: string; center?: boolean; - fontWeight?: number; + fontWeight?: number | string; } const PlainText: React.StatelessComponent<TextProps> = ({ children, className, Tag }) => ( diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx index c43cc43fe..79b51c0d1 100644 --- a/packages/website/ts/pages/jobs/open_positions.tsx +++ b/packages/website/ts/pages/jobs/open_positions.tsx @@ -4,6 +4,7 @@ import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowCol import * as React from 'react'; import { Retry } from 'ts/components/ui/retry'; +import { Text } from 'ts/components/ui/text'; import { HeaderItem } from 'ts/pages/jobs/list/header_item'; import { ListItem } from 'ts/pages/jobs/list/list_item'; import { colors } from 'ts/style/colors'; @@ -171,10 +172,12 @@ export interface JobInfoListItemProps { const PlainJobInfoListItem: React.StatelessComponent<JobInfoListItemProps> = ({ title, description, onClick }) => ( <div className="mb3" onClick={onClick}> <ListItem> - <div style={{ fontWeight: 'bold', fontSize: 16, color: colors.mediumBlue }}>{title + ' ›'}</div> - <div className="pt1" style={{ fontSize: 16, color: colors.darkGrey }}> + <Text fontWeight="bold" fontSize="16px" fontColor={colors.mediumBlue}> + {title + ' ›'} + </Text> + <Text className="pt1" fontSize="16px" fontColor={colors.darkGrey}> {description} - </div> + </Text> </ListItem> </div> ); diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts index ace8a5ba0..2fdc7f031 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -10,7 +10,7 @@ const INFURA_API_KEY = 'T5WSC8cautR4KXyYgsRs'; export const configs = { AMOUNT_DISPLAY_PRECSION: 5, - BACKEND_BASE_PROD_URL: 'https://website-api.0xproject.com', + BACKEND_BASE_PROD_URL: 'http://localhost:3000', BACKEND_BASE_STAGING_URL: 'http://ec2-52-91-181-85.compute-1.amazonaws.com', BASE_URL, BITLY_ACCESS_TOKEN: 'ffc4c1a31e5143848fb7c523b39f91b9b213d208', -- cgit v1.2.3 From f1a98693d0c9b7855838b8c4aaaca243839614b4 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 15:58:24 -0700 Subject: Use Text in Teams --- packages/website/ts/pages/jobs/teams.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx index d5960949a..8112351db 100644 --- a/packages/website/ts/pages/jobs/teams.tsx +++ b/packages/website/ts/pages/jobs/teams.tsx @@ -1,8 +1,10 @@ import * as _ from 'lodash'; import * as React from 'react'; +import { Text } from 'ts/components/ui/text'; import { HeaderItem } from 'ts/pages/jobs/list/header_item'; import { ListItem } from 'ts/pages/jobs/list/list_item'; +import { colors } from 'ts/style/colors'; import { ScreenWidths } from 'ts/types'; const TEAM_ITEM_PROPS_COLUMN1: TeamItemProps[] = [ @@ -74,12 +76,14 @@ export const TeamItem: React.StatelessComponent<TeamItemProps> = ({ bulletColor, return ( <div style={{ minHeight: MINIMUM_ITEM_HEIGHT }}> <ListItem bulletColor={bulletColor}> - <div style={{ fontWeight: 'bold', fontSize: 16 }}>{title}</div> + <Text fontWeight="bold" fontSize="16px" fontColor={colors.black}> + {title} + </Text> </ListItem> <ListItem> - <div className="pt1" style={{ fontSize: 16, lineHeight: 2 }}> + <Text className="pt1" fontSize="16px" lineHeight="2em" fontColor={colors.black}> {description} - </div> + </Text> </ListItem> </div> ); -- cgit v1.2.3 From 76405639913b28c86f8cf9db65905215288e6032 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 16:09:23 -0700 Subject: Revert localhost config --- packages/website/ts/utils/configs.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts index 2fdc7f031..ace8a5ba0 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -10,7 +10,7 @@ const INFURA_API_KEY = 'T5WSC8cautR4KXyYgsRs'; export const configs = { AMOUNT_DISPLAY_PRECSION: 5, - BACKEND_BASE_PROD_URL: 'http://localhost:3000', + BACKEND_BASE_PROD_URL: 'https://website-api.0xproject.com', BACKEND_BASE_STAGING_URL: 'http://ec2-52-91-181-85.compute-1.amazonaws.com', BASE_URL, BITLY_ACCESS_TOKEN: 'ffc4c1a31e5143848fb7c523b39f91b9b213d208', -- cgit v1.2.3 From d0bbee7e8c3eaac1f727a9f40a2213d041938c3b Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 16:11:31 -0700 Subject: Fix issue with positions hash --- packages/website/ts/pages/jobs/open_positions.tsx | 40 ++++++++++++----------- 1 file changed, 21 insertions(+), 19 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx index 79b51c0d1..f3d980315 100644 --- a/packages/website/ts/pages/jobs/open_positions.tsx +++ b/packages/website/ts/pages/jobs/open_positions.tsx @@ -44,26 +44,28 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit } public render(): React.ReactNode { const isReadyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.jobInfos); + return ( + <div id={this.props.hash} className="mx-auto max-width-4"> + {isReadyToRender ? this._renderBody() : this._renderLoading()} + </div> + ); + } + private _renderBody(): React.ReactNode { const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; - if (!isReadyToRender) { - return ( - // TODO: consolidate this loading component with the one in portal and RelayerIndex - // TODO: possibly refactor into a generic loading container with spinner and retry UI - <div className="center"> - {_.isUndefined(this.state.error) ? ( - <CircularProgress size={40} thickness={5} /> - ) : ( - <Retry onRetry={this._fetchJobInfosAsync.bind(this)} /> - )} - </div> - ); - } else { - return ( - <div id={this.props.hash} className="mx-auto max-width-4"> - {isSmallScreen ? this._renderList() : this._renderTable()} - </div> - ); - } + return isSmallScreen ? this._renderList() : this._renderTable(); + } + private _renderLoading(): React.ReactNode { + return ( + // TODO: consolidate this loading component with the one in portal and RelayerIndex + // TODO: possibly refactor into a generic loading container with spinner and retry UI + <div className="center"> + {_.isUndefined(this.state.error) ? ( + <CircularProgress size={40} thickness={5} /> + ) : ( + <Retry onRetry={this._fetchJobInfosAsync.bind(this)} /> + )} + </div> + ); } private _renderList(): React.ReactNode { return ( -- cgit v1.2.3 From 421e5682329d6047703be926d20a906f6fe2529e Mon Sep 17 00:00:00 2001 From: fragosti <francesco.agosti93@gmail.com> Date: Tue, 12 Jun 2018 16:54:37 -0700 Subject: Implement allowance and final flow step --- .../ts/components/inputs/allowance_toggle.tsx | 1 + .../onboarding/portal_onboarding_flow.tsx | 50 ++++++++++++++++------ packages/website/ts/components/token_balances.tsx | 2 +- packages/website/ts/components/wallet/wallet.tsx | 2 +- .../ts/containers/inputs/allowance_toggle.ts | 7 ++- packages/website/ts/utils/utils.ts | 1 - 6 files changed, 42 insertions(+), 21 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx index 3e61e1b8b..0dd2a5aa5 100644 --- a/packages/website/ts/components/inputs/allowance_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_toggle.tsx @@ -1,5 +1,6 @@ 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'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 78592c67f..0809f5e9c 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -4,9 +4,9 @@ import * as React from 'react'; import { BigNumber } from '@0xproject/utils'; import { Blockchain } from 'ts/blockchain'; import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; +import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/types'; import { utils } from 'ts/utils/utils'; -import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; export interface PortalOnboardingFlowProps { blockchain: Blockchain; @@ -43,7 +43,6 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr /> ); } - private _getSteps(): Step[] { const steps: Step[] = [ { @@ -83,23 +82,30 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr }, { target: '.weth-row', - // content: <div> Unlock your tokens for trading. You only need to do this once for each token. {this._renderEthAllowanceToggle()}</div>, - content: 'blah', + content: <div> + Unlock your tokens for trading. You only need to do this once for each token. + <div> ETH: {this._renderEthAllowanceToggle()}</div> + <div> ZRX: {this._renderZrxAllowanceToggle()}</div> + </div>, placement: 'right', - continueButtonDisplay: 'disabled', + continueButtonDisplay: this._userHasAllowancesForWethAndZrx() ? 'enabled' : 'disabled', + }, + { + target: '.wallet', + content: + 'Congrats! Your wallet is now set up for trading. Use it on any relayer in the 0x ecosystem.', + placement: 'right', + continueButtonDisplay: 'enabled', }, ]; return steps; } - private _isAddressAvailable(): boolean { return !_.isEmpty(this.props.userAddress); } - private _userHasVisibleEth(): boolean { return this.props.userEtherBalanceInWei > new BigNumber(0); } - private _userHasVisibleWeth(): boolean { const ethToken = utils.getEthToken(this.props.tokenByAddress); if (!ethToken) { @@ -108,15 +114,25 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr const wethTokenState = this.props.trackedTokenStateByAddress[ethToken.address]; return wethTokenState.balance > new BigNumber(0); } - + private _userHasAllowancesForWethAndZrx(): boolean { + const ethToken = utils.getEthToken(this.props.tokenByAddress); + const zrxToken = utils.getZrxToken(this.props.tokenByAddress); + if (ethToken && zrxToken) { + const ethTokenAllowance = this.props.trackedTokenStateByAddress[ethToken.address].allowance; + const zrxTokenAllowance = this.props.trackedTokenStateByAddress[zrxToken.address].allowance; + return ethTokenAllowance > new BigNumber(0) && zrxTokenAllowance > new BigNumber(0); + } + return false; + } private _overrideOnboardingStateIfShould(): void { this._autoStartOnboardingIfShould(); this._adjustStepIfShould(); } private _adjustStepIfShould(): void { + const stepIndex = this.props.stepIndex; if (this._isAddressAvailable()) { - if (this.props.stepIndex < 2) { + if (stepIndex < 2) { this.props.updateOnboardingStep(2); } return; @@ -126,10 +142,14 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr this.props.injectedProviderName, ); if (isExternallyInjected) { - this.props.updateOnboardingStep(1); + if (stepIndex !== 1) { + this.props.updateOnboardingStep(1); + } return; } - this.props.updateOnboardingStep(0); + if (stepIndex !== 0) { + this.props.updateOnboardingStep(0); + } } private _autoStartOnboardingIfShould(): void { if (!this.props.isRunning && !this.props.hasBeenSeen && this.props.blockchainIsLoaded) { @@ -137,7 +157,7 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr } } private _renderZrxAllowanceToggle(): React.ReactNode { - const zrxToken = utils.getZrxToken(this.props.tokenByAddress) + const zrxToken = utils.getZrxToken(this.props.tokenByAddress); return this._renderAllowanceToggle(zrxToken); } private _renderEthAllowanceToggle(): React.ReactNode { @@ -153,8 +173,10 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr <AllowanceToggle token={token} tokenState={tokenState} + isDisabled={!tokenState.isLoaded} blockchain={this.props.blockchain} - refetchTokenStateAsync={this.props.refetchTokenStateAsync} + // tslint:disable-next-line:jsx-no-lambda + refetchTokenStateAsync={async () => this.props.refetchTokenStateAsync(token.address)} /> ); } diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 5edd8377a..7af80745c 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -20,11 +20,11 @@ import ReactTooltip = require('react-tooltip'); import firstBy = require('thenby'); import { Blockchain } from 'ts/blockchain'; import { AssetPicker } from 'ts/components/generate_order/asset_picker'; -import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { SendButton } from 'ts/components/send_button'; import { HelpTooltip } from 'ts/components/ui/help_tooltip'; import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button'; import { TokenIcon } from 'ts/components/ui/token_icon'; +import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage'; import { Dispatcher } from 'ts/redux/dispatcher'; import { diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 819f75ac4..4523b0ac9 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -13,7 +13,6 @@ import { Link } from 'react-router-dom'; import firstBy = require('thenby'); import { Blockchain } from 'ts/blockchain'; -import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { Container } from 'ts/components/ui/container'; import { IconButton } from 'ts/components/ui/icon_button'; import { Identicon } from 'ts/components/ui/identicon'; @@ -21,6 +20,7 @@ import { Island } from 'ts/components/ui/island'; import { TokenIcon } from 'ts/components/ui/token_icon'; import { WalletDisconnectedItem } from 'ts/components/wallet/wallet_disconnected_item'; import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item'; +import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; import { zIndex } from 'ts/style/z_index'; diff --git a/packages/website/ts/containers/inputs/allowance_toggle.ts b/packages/website/ts/containers/inputs/allowance_toggle.ts index 6f50072ca..545708f92 100644 --- a/packages/website/ts/containers/inputs/allowance_toggle.ts +++ b/packages/website/ts/containers/inputs/allowance_toggle.ts @@ -1,10 +1,9 @@ import * as React from 'react'; -import { BalanceErrs, Token, TokenState } from 'ts/types'; -import { ActionTypes, ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { Blockchain } from 'ts/blockchain'; import { State } from 'ts/redux/reducer'; +import { BalanceErrs, Token, TokenState } from 'ts/types'; import { AllowanceToggle as AllowanceToggleComponent } from 'ts/components/inputs/allowance_toggle'; import { Dispatcher } from 'ts/redux/dispatcher'; @@ -15,7 +14,7 @@ interface AllowanceToggleProps { token: Token; tokenState: TokenState; isDisabled?: boolean; - refetchTokenStateAsync: (tokenAddress: string) => Promise<void>; + refetchTokenStateAsync: () => Promise<void>; } interface ConnectedState { @@ -27,7 +26,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, ownProps: AllowanceToggleProps): ConnectedState => ({ +const mapStateToProps = (state: State, _ownProps: AllowanceToggleProps): ConnectedState => ({ networkId: state.networkId, userAddress: state.userAddress, }); diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index b2153321d..aaf7cf2a7 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -21,7 +21,6 @@ import { import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import * as u2f from 'ts/vendor/u2f_api'; -import { Container } from '../components/ui/container'; const LG_MIN_EM = 64; const MD_MIN_EM = 52; -- cgit v1.2.3 From 14071ea11917c8a50f6817866cecdb0d41915fb8 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Wed, 13 Jun 2018 12:01:08 -0700 Subject: Use spread operator instead of React.createElement --- packages/website/ts/pages/jobs/benefits.tsx | 2 +- packages/website/ts/pages/jobs/teams.tsx | 10 +++++----- packages/website/ts/pages/jobs/values.tsx | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx index 8a44eb596..006facc83 100644 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -75,7 +75,7 @@ export const BenefitsList = () => { return ( <div> <HeaderItem headerText={HEADER_TEXT} /> - {_.map(BENEFIT_ITEM_PROPS_LIST, valueItemProps => React.createElement(BenefitItem, valueItemProps))} + {_.map(BENEFIT_ITEM_PROPS_LIST, valueItemProps => <BenefitItem {...valueItemProps} />)} </div> ); }; diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx index 8112351db..80b036396 100644 --- a/packages/website/ts/pages/jobs/teams.tsx +++ b/packages/website/ts/pages/jobs/teams.tsx @@ -48,11 +48,11 @@ const LargeLayout = () => ( <div className="mx-auto max-width-4 clearfix pb4"> <div className="col lg-col-6 md-col-6 col-12"> <HeaderItem headerText={HEADER_TEXT} /> - {_.map(TEAM_ITEM_PROPS_COLUMN1, teamItemProps => React.createElement(TeamItem, teamItemProps))} + {_.map(TEAM_ITEM_PROPS_COLUMN1, teamItemProps => <TeamItem {...teamItemProps} />)} </div> <div className="col lg-col-6 md-col-6 col-12"> <HeaderItem headerText=" " /> - {_.map(TEAM_ITEM_PROPS_COLUMN2, teamItemProps => React.createElement(TeamItem, teamItemProps))} + {_.map(TEAM_ITEM_PROPS_COLUMN2, teamItemProps => <TeamItem {...teamItemProps} />)} </div> </div> ); @@ -60,9 +60,9 @@ const LargeLayout = () => ( const SmallLayout = () => ( <div> <HeaderItem headerText={HEADER_TEXT} /> - {_.map(_.concat(TEAM_ITEM_PROPS_COLUMN1, TEAM_ITEM_PROPS_COLUMN2), teamItemProps => - React.createElement(TeamItem, teamItemProps), - )} + {_.map(_.concat(TEAM_ITEM_PROPS_COLUMN1, TEAM_ITEM_PROPS_COLUMN2), teamItemProps => ( + <TeamItem {...teamItemProps} /> + ))} </div> ); diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx index 799db3d67..ad62754ce 100644 --- a/packages/website/ts/pages/jobs/values.tsx +++ b/packages/website/ts/pages/jobs/values.tsx @@ -29,7 +29,7 @@ export const Values = () => { return ( <div className="mx-auto max-width-4"> <HeaderItem headerText={HEADER_TEXT} /> - {_.map(VALUE_ITEM_PROPS_LIST, valueItemProps => React.createElement(ValueItem, valueItemProps))} + {_.map(VALUE_ITEM_PROPS_LIST, valueItemProps => <ValueItem {...valueItemProps} />)} </div> ); }; -- cgit v1.2.3 From eafcbabaa28fc4176bae4351231fd295ebdcddff Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Wed, 13 Jun 2018 12:10:21 -0700 Subject: Use Text components in Values --- packages/website/ts/pages/jobs/values.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx index ad62754ce..c7c4d5726 100644 --- a/packages/website/ts/pages/jobs/values.tsx +++ b/packages/website/ts/pages/jobs/values.tsx @@ -1,8 +1,10 @@ import * as _ from 'lodash'; import * as React from 'react'; +import { Text } from 'ts/components/ui/text'; import { HeaderItem } from 'ts/pages/jobs/list/header_item'; import { ListItem } from 'ts/pages/jobs/list/list_item'; +import { colors } from 'ts/style/colors'; const VALUE_ITEM_PROPS_LIST: ValueItemProps[] = [ { @@ -44,12 +46,14 @@ export const ValueItem: React.StatelessComponent<ValueItemProps> = ({ bulletColo return ( <div style={{ minHeight: VALUE_ITEM_MIN_HEIGHT }}> <ListItem bulletColor={bulletColor}> - <div style={{ fontWeight: 'bold', fontSize: 16 }}>{title}</div> + <Text fontWeight="bold" fontSize="16x" fontColor={colors.black}> + {title} + </Text> </ListItem> <ListItem> - <div className="pt1" style={{ fontSize: 16, lineHeight: 2 }}> + <Text className="pt1" fontSize="16x" lineHeight="2em" fontColor={colors.black}> {description} - </div> + </Text> </ListItem> </div> ); -- cgit v1.2.3 From 8a3df7e434c98d75e0a8ccaec8c16122d5a2952b Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Wed, 13 Jun 2018 12:19:14 -0700 Subject: Update minHeight in Text --- packages/website/ts/components/ui/text.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 0fa79bc7c..7e47f1d09 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -27,7 +27,7 @@ export const Text = styled(PlainText)` ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; ${props => (props.center ? 'text-align: center' : '')}; color: ${props => props.fontColor}; - min-height: ${props => props.minHeight}; + ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')}; `; Text.defaultProps = { -- cgit v1.2.3 From d172a97247f133a5340c5df263fe0f23019db956 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Wed, 13 Jun 2018 12:29:36 -0700 Subject: Add back redirector behind feature flag --- packages/website/ts/components/redirector.tsx | 9 +++++++++ packages/website/ts/index.tsx | 8 +++++++- packages/website/ts/utils/utils.ts | 3 +++ 3 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 packages/website/ts/components/redirector.tsx (limited to 'packages/website') diff --git a/packages/website/ts/components/redirector.tsx b/packages/website/ts/components/redirector.tsx new file mode 100644 index 000000000..a02693003 --- /dev/null +++ b/packages/website/ts/components/redirector.tsx @@ -0,0 +1,9 @@ +import { constants } from 'ts/utils/constants'; + +interface RedirectorProps { + location: string; +} + +export function Redirector(_props: RedirectorProps): void { + window.location.href = constants.URL_ANGELLIST; +} diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index 5501f5972..249b4fdc9 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -4,6 +4,7 @@ import { render } from 'react-dom'; import { Provider } from 'react-redux'; import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom'; import * as injectTapEventPlugin from 'react-tap-event-plugin'; +import { Redirector } from 'ts/components/redirector'; import { About } from 'ts/containers/about'; import { FAQ } from 'ts/containers/faq'; import { Jobs } from 'ts/containers/jobs'; @@ -86,7 +87,12 @@ render( <Switch> <Route exact={true} path="/" component={Landing as any} /> <Redirect from="/otc" to={`${WebsitePaths.Portal}`} /> - <Route path={WebsitePaths.Jobs} component={Jobs as any} /> + {/* TODO: Remove this once we ship the jobs page*/} + {utils.shouldShowJobsPage() ? ( + <Route path={WebsitePaths.Jobs} component={Jobs as any} /> + ) : ( + <Route path={WebsitePaths.Jobs} component={Redirector as any} /> + )} <Route path={WebsitePaths.Portal} component={LazyPortal} /> <Route path={WebsitePaths.FAQ} component={FAQ as any} /> <Route path={WebsitePaths.About} component={About as any} /> diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 651a4212a..eb384fbb4 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -318,6 +318,9 @@ export const utils = { shouldShowPortalV2(): boolean { return this.isDevelopment() || this.isStaging() || this.isDogfood(); }, + shouldShowJobsPage(): boolean { + return this.isDevelopment() || this.isStaging() || this.isDogfood(); + }, getEthToken(tokenByAddress: TokenByAddress): Token { const tokens = _.values(tokenByAddress); const etherToken = _.find(tokens, { symbol: constants.ETHER_TOKEN_SYMBOL }); -- cgit v1.2.3 From 7d6700582006d201f8757107b4cf286bb0ee5661 Mon Sep 17 00:00:00 2001 From: fragosti <francesco.agosti93@gmail.com> Date: Thu, 14 Jun 2018 14:26:17 -0700 Subject: Run prettify --- .../ts/components/onboarding/portal_onboarding_flow.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 0809f5e9c..efb844cb5 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -82,18 +82,19 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr }, { target: '.weth-row', - content: <div> - Unlock your tokens for trading. You only need to do this once for each token. - <div> ETH: {this._renderEthAllowanceToggle()}</div> - <div> ZRX: {this._renderZrxAllowanceToggle()}</div> - </div>, + content: ( + <div> + Unlock your tokens for trading. You only need to do this once for each token. + <div> ETH: {this._renderEthAllowanceToggle()}</div> + <div> ZRX: {this._renderZrxAllowanceToggle()}</div> + </div> + ), placement: 'right', continueButtonDisplay: this._userHasAllowancesForWethAndZrx() ? 'enabled' : 'disabled', }, { target: '.wallet', - content: - 'Congrats! Your wallet is now set up for trading. Use it on any relayer in the 0x ecosystem.', + content: 'Congrats! Your wallet is now set up for trading. Use it on any relayer in the 0x ecosystem.', placement: 'right', continueButtonDisplay: 'enabled', }, -- cgit v1.2.3