From d0a3779091661cfa099ec84f12e5d944287d1e3f Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 14 Jun 2018 18:19:07 -0700 Subject: Add Pointer component --- .../components/onboarding/onboarding_tooltip.tsx | 35 ++++++----- packages/website/ts/components/ui/pointer.tsx | 68 ++++++++++++++++++++++ 2 files changed, 87 insertions(+), 16 deletions(-) create mode 100644 packages/website/ts/components/ui/pointer.tsx (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx index 155c70c5f..9e0744dcb 100644 --- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx +++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { Island } from 'ts/components/ui/island'; +import { Pointer } from 'ts/components/ui/pointer'; export type ContinueButtonDisplay = 'enabled' | 'disabled'; @@ -34,22 +35,24 @@ export const ContinueButton: React.StatelessComponent = (pr }; export const OnboardingTooltip: React.StatelessComponent = (props: OnboardingTooltipProps) => ( - - -
- {props.title} - {props.content} - {props.continueButtonDisplay && ( - - Continue - - )} - {!props.hideBackButton && } - {!props.hideNextButton && } - -
- - + + + +
+ {props.title} + {props.content} + {props.continueButtonDisplay && ( + + Continue + + )} + {!props.hideBackButton && } + {!props.hideNextButton && } + +
+ + + ); OnboardingTooltip.displayName = 'OnboardingTooltip'; diff --git a/packages/website/ts/components/ui/pointer.tsx b/packages/website/ts/components/ui/pointer.tsx new file mode 100644 index 000000000..dcd1b8e54 --- /dev/null +++ b/packages/website/ts/components/ui/pointer.tsx @@ -0,0 +1,68 @@ +import { colors } from '@0xproject/react-shared'; +import { Island } from 'ts/components/ui/island'; +import * as React from 'react'; +import { styled } from 'ts/style/theme'; + +export type PointerDirection = 'top' | 'right' | 'bottom' | 'left'; + +export interface PointerProps { + className?: string; + color?: string; + size?: number; + direction: PointerDirection; +} + +const PlainPointer: React.StatelessComponent = props =>
; + +const positionToCss = (props: PointerProps) => { + const position = { + top: `bottom: 100%; left: 50%;`, + right: `left: 100%; top: 50%;`, + bottom: `top: 100%; left: 50%;`, + left: `right: 100%; top: 50%;`, + }[props.direction]; + + const borderColorSide = { + top: 'border-bottom-color', + right: 'border-left-color', + bottom: 'border-top-color', + left: 'border-right-color', + }[props.direction]; + const border = `${borderColorSide}: ${props.color};`; + const marginSide = { + top: 'margin-left', + right: 'margin-top', + bottom: 'margin-left', + left: 'margin-top', + }[props.direction]; + const margin = `${marginSide}: -${props.size}px`; + return { + position, + border, + margin, + }; +}; + +export const Pointer = styled(PlainPointer)` + position: relative; + &:after { + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: rgba(136, 183, 213, 0); + border-width: ${props => `${props.size}px`}; + ${props => positionToCss(props).position} + ${props => positionToCss(props).border} + ${props => positionToCss(props).margin} + } +`; + +Pointer.defaultProps = { + color: colors.white, + size: 16, +}; + +Pointer.displayName = 'Pointer'; -- cgit From 54f79c2798c095344b003139144b77fc1024d8c3 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 15 Jun 2018 13:17:02 -0700 Subject: Improve styles of onboarding tooltip --- .../ts/components/onboarding/onboarding_flow.tsx | 10 +-- .../components/onboarding/onboarding_tooltip.tsx | 87 ++++++++++++++-------- .../onboarding/portal_onboarding_flow.tsx | 20 +++-- packages/website/ts/components/ui/button.tsx | 17 +++-- packages/website/ts/components/ui/container.tsx | 5 ++ packages/website/ts/components/ui/pointer.tsx | 3 +- packages/website/ts/components/ui/text.tsx | 28 ++++++- 7 files changed, 117 insertions(+), 53 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 9879cd387..7a5a6e40f 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -10,8 +10,8 @@ export interface Step { title?: string; content: React.ReactNode; placement?: Placement; - hideBackButton?: boolean; - hideNextButton?: boolean; + shouldHideBackButton?: boolean; + shouldHideNextButton?: boolean; continueButtonDisplay?: ContinueButtonDisplay; } @@ -54,13 +54,13 @@ export class OnboardingFlow extends React.Component { const step = steps[stepIndex]; const isLastStep = steps.length - 1 === stepIndex; return ( - + void; onClickBack: () => void; continueButtonDisplay?: ContinueButtonDisplay; - hideBackButton?: boolean; - hideNextButton?: boolean; + shouldHideBackButton?: boolean; + shouldHideNextButton?: boolean; + pointerDirection?: PointerDirection; + className?: string; } -// TODO: Make this more general button. -export interface ContinueButtonProps { - display: ContinueButtonDisplay; - children?: string; - onClick: () => void; -} - -export const ContinueButton: React.StatelessComponent = (props: ContinueButtonProps) => { - const isDisabled = props.display === 'disabled'; - return ( - - ); -}; - -export const OnboardingTooltip: React.StatelessComponent = (props: OnboardingTooltipProps) => ( - +export const OnboardingTooltip: React.StatelessComponent = ({ + title, + content, + continueButtonDisplay, + onClickNext, + onClickBack, + onClose, + shouldHideBackButton, + shouldHideNextButton, + pointerDirection, + className, +}) => ( +
- {props.title} - {props.content} - {props.continueButtonDisplay && ( - +
+ {title} + + + Close + + +
+ + {content} + + {continueButtonDisplay && ( + )} - {!props.hideBackButton && } - {!props.hideNextButton && } - + + {!shouldHideBackButton && ( + + Back + + )} + {!shouldHideNextButton && ( + + Skip + + )} +
); +OnboardingTooltip.defaultProps = { + pointerDirection: 'left', +}; + OnboardingTooltip.displayName = 'OnboardingTooltip'; diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index efb844cb5..3deefec3c 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -47,41 +47,47 @@ export class PortalOnboardingFlow extends React.Component Unlock your tokens for trading. You only need to do this once for each token. @@ -94,9 +100,11 @@ export class PortalOnboardingFlow extends React.Component) => void; } -const PlainButton: React.StatelessComponent = ({ children, onClick, type, className }) => ( - ); export const Button = styled(PlainButton)` - cursor: pointer; + cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}; font-size: ${props => props.fontSize}; color: ${props => props.fontColor}; + transition: background-color 0.5s ease; padding: 0.8em 2.2em; border-radius: 6px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25); font-weight: 500; font-family: ${props => props.fontFamily}; width: ${props => props.width}; - background-color: ${props => props.backgroundColor}; + background-color: ${props => (props.isDisabled ? grayscale(props.backgroundColor) : props.backgroundColor)}; border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')}; &:hover { - background-color: ${props => darken(0.1, props.backgroundColor)}; + background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')}; } &:active { - background-color: ${props => darken(0.2, props.backgroundColor)}; + background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')}; } `; @@ -46,6 +48,7 @@ Button.defaultProps = { backgroundColor: colors.white, width: 'auto', fontFamily: 'Roboto', + isDisabled: false, }; Button.displayName = 'Button'; diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index c6a78e181..3b55a18ce 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -16,6 +16,11 @@ export interface ContainerProps { maxWidth?: StringOrNum; isHidden?: boolean; className?: string; + position?: 'absolute' | 'fixed' | 'relative' | 'unset'; + top?: string; + left?: string; + right?: string; + bottom?: string; } export const Container: React.StatelessComponent = ({ children, className, isHidden, ...style }) => { diff --git a/packages/website/ts/components/ui/pointer.tsx b/packages/website/ts/components/ui/pointer.tsx index dcd1b8e54..448786bb4 100644 --- a/packages/website/ts/components/ui/pointer.tsx +++ b/packages/website/ts/components/ui/pointer.tsx @@ -1,5 +1,4 @@ import { colors } from '@0xproject/react-shared'; -import { Island } from 'ts/components/ui/island'; import * as React from 'react'; import { styled } from 'ts/style/theme'; @@ -12,7 +11,7 @@ export interface PointerProps { direction: PointerDirection; } -const PlainPointer: React.StatelessComponent = props =>
; +const PlainPointer: React.StatelessComponent = props =>
; const positionToCss = (props: PointerProps) => { const position = { diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 7e47f1d09..073bfc2d2 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -1,8 +1,9 @@ import { colors } from '@0xproject/react-shared'; +import { darken } from 'polished'; import * as React from 'react'; import { styled } from 'ts/style/theme'; -export type TextTag = 'p' | 'div' | 'span' | 'label'; +export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4'; export interface TextProps { className?: string; @@ -14,10 +15,13 @@ export interface TextProps { minHeight?: string; center?: boolean; fontWeight?: number | string; + onClick?: () => void; } -const PlainText: React.StatelessComponent = ({ children, className, Tag }) => ( - {children} +const PlainText: React.StatelessComponent = ({ children, className, onClick, Tag }) => ( + + {children} + ); export const Text = styled(PlainText)` @@ -28,14 +32,30 @@ export const Text = styled(PlainText)` ${props => (props.center ? 'text-align: center' : '')}; color: ${props => props.fontColor}; ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')}; + ${props => (props.onClick ? 'cursor: pointer' : '')}; + transition: color 0.5s ease; + &:hover { + ${props => (props.onClick ? `color: ${darken(0.1, props.fontColor)}` : '')}; + } `; Text.defaultProps = { fontFamily: 'Roboto', fontWeight: 400, - fontColor: colors.white, + fontColor: colors.black, fontSize: '14px', Tag: 'div', }; Text.displayName = 'Text'; + +export const Title: React.StatelessComponent = props => ; + +Title.defaultProps = { + Tag: 'h2', + fontSize: '20px', + fontWeight: 600, + fontColor: colors.black, +}; + +Title.displayName = 'Title'; -- cgit From 3d6ce0fb7618ff7531f234929ead39fafecb1d11 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 15 Jun 2018 13:55:37 -0700 Subject: Make start onboarding button pretty --- packages/website/ts/components/portal/portal.tsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 48486939b..aca04969d 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -4,6 +4,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; import { Route, RouteComponentProps, Switch } from 'react-router-dom'; +import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; import { Blockchain } from 'ts/blockchain'; import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog'; @@ -22,6 +23,7 @@ import { TokenBalances } from 'ts/components/token_balances'; import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar'; import { TradeHistory } from 'ts/components/trade_history/trade_history'; import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; import { FlashMessage } from 'ts/components/ui/flash_message'; import { Island } from 'ts/components/ui/island'; import { Wallet } from 'ts/components/wallet/wallet'; @@ -353,8 +355,21 @@ export class Portal extends React.Component { /> - {/** TODO: Implement real styles. */} -

Start onboarding flow.

+ + + + Learn how to set up your account + +
-- cgit From 0c3430913332c9f082c4278d8d999dd749d13513 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 15 Jun 2018 14:49:01 -0700 Subject: Make metamask part of the fow pretty --- .../onboarding/portal_onboarding_flow.tsx | 29 +++++++++++++++++++--- packages/website/ts/components/portal/portal.tsx | 11 +++++--- packages/website/ts/components/ui/text.tsx | 2 +- 3 files changed, 35 insertions(+), 7 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 3deefec3c..7e6ce6d02 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -1,9 +1,13 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { BigNumber } from '@0xproject/utils'; +import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; import { Blockchain } from 'ts/blockchain'; import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/types'; import { utils } from 'ts/utils/utils'; @@ -48,8 +52,20 @@ export class PortalOnboardingFlow extends React.Component + + + + + Before you begin, you need to connect to a wallet. This will be used across all 0x relayers + and dApps. + +
+ ), placement: 'right', shouldHideBackButton: true, shouldHideNextButton: true, @@ -57,7 +73,14 @@ export class PortalOnboardingFlow extends React.Component + + + + Unlock your metamask extension to begin. +
+ ), placement: 'right', shouldHideBackButton: true, shouldHideNextButton: true, diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index aca04969d..d1d499314 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -1,10 +1,10 @@ import { colors, Styles } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; +import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; import { Route, RouteComponentProps, Switch } from 'react-router-dom'; -import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; import { Blockchain } from 'ts/blockchain'; import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog'; @@ -23,9 +23,9 @@ import { TokenBalances } from 'ts/components/token_balances'; import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar'; import { TradeHistory } from 'ts/components/trade_history/trade_history'; import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; import { FlashMessage } from 'ts/components/ui/flash_message'; import { Island } from 'ts/components/ui/island'; +import { Text } from 'ts/components/ui/text'; import { Wallet } from 'ts/components/wallet/wallet'; import { GenerateOrderForm } from 'ts/containers/generate_order_form'; import { PortalOnboardingFlow } from 'ts/containers/portal_onboarding_flow'; @@ -366,7 +366,12 @@ export class Portal extends React.Component { style={{ width: '30px', height: '30px' }} color={colors.orange} /> - + Learn how to set up your account diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 073bfc2d2..2bc4a1974 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -43,7 +43,7 @@ Text.defaultProps = { fontFamily: 'Roboto', fontWeight: 400, fontColor: colors.black, - fontSize: '14px', + fontSize: '15px', Tag: 'div', }; -- cgit From 5993125cc7d5129aead37a06663741d42ff0189e Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 15 Jun 2018 15:17:20 -0700 Subject: Prettify account setup and add eth steps of onboarding --- .../onboarding/portal_onboarding_flow.tsx | 33 ++++++++++++++++++++-- packages/website/ts/components/ui/container.tsx | 1 + packages/website/ts/components/ui/text.tsx | 1 + 3 files changed, 32 insertions(+), 3 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 7e6ce6d02..11f1becfe 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -88,8 +88,24 @@ export class PortalOnboardingFlow extends React.Component + + In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two + simple steps. + + +
+ + Wrap ETH +
+
+ + Unlock tokens +
+ + + ), placement: 'right', shouldHideBackButton: true, continueButtonDisplay: 'enabled', @@ -97,7 +113,18 @@ export class PortalOnboardingFlow extends React.Component + Before you begin you will need to send some ETH to your metamask wallet. + + + + + Click on the metamask + extension in your browser and click either BUY or DEPOSIT. + + + ), placement: 'right', continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled', }, diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index 3b55a18ce..d5665ec5d 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -14,6 +14,7 @@ export interface ContainerProps { backgroundColor?: string; borderRadius?: StringOrNum; maxWidth?: StringOrNum; + width?: StringOrNum; isHidden?: boolean; className?: string; position?: 'absolute' | 'fixed' | 'relative' | 'unset'; diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 2bc4a1974..1e2a123b7 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -44,6 +44,7 @@ Text.defaultProps = { fontWeight: 400, fontColor: colors.black, fontSize: '15px', + lineHeight: '1.5em', Tag: 'div', }; -- cgit From 0cf99271328a0bee0730a33659fe30aa426c59da Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 15 Jun 2018 18:02:33 -0700 Subject: Add all steps to their own file --- .../onboarding/add_eth_onboarding_step.tsx | 18 +++++ .../onboarding/install_wallet_onboarding_step.tsx | 18 +++++ .../onboarding/intro_onboarding_step.tsx | 23 ++++++ .../onboarding/portal_onboarding_flow.tsx | 91 +++++++--------------- .../onboarding/unlock_wallet_onboarding_step.tsx | 16 ++++ .../onboarding/wrap_eth_onboarding_step.tsx | 73 +++++++++++++++++ packages/website/ts/components/ui/container.tsx | 1 + packages/website/ts/components/ui/icon_button.tsx | 9 ++- packages/website/ts/components/wallet/wallet.tsx | 6 +- 9 files changed, 184 insertions(+), 71 deletions(-) create mode 100644 packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx create mode 100644 packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx create mode 100644 packages/website/ts/components/onboarding/intro_onboarding_step.tsx create mode 100644 packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx create mode 100644 packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx new file mode 100644 index 000000000..31ce99d31 --- /dev/null +++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; + +export interface AddEthOnboardingStepProps {} + +export const AddEthOnboardingStep: React.StatelessComponent = () => ( +
+ Before you begin you will need to send some ETH to your metamask wallet. + + + + + Click on the metamask extension in your + browser and click either BUY or DEPOSIT. + +
+); diff --git a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx new file mode 100644 index 000000000..a54496186 --- /dev/null +++ b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx @@ -0,0 +1,18 @@ +import { colors } from '@0xproject/react-shared'; +import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; + +export interface InstallWalletOnboardingStepProps {} + +export const InstallWalletOnboardingStep: React.StatelessComponent = () => ( +
+ + + + + Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps. + +
+); diff --git a/packages/website/ts/components/onboarding/intro_onboarding_step.tsx b/packages/website/ts/components/onboarding/intro_onboarding_step.tsx new file mode 100644 index 000000000..548839218 --- /dev/null +++ b/packages/website/ts/components/onboarding/intro_onboarding_step.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; + +export interface IntroOnboardingStepProps {} + +export const IntroOnboardingStep: React.StatelessComponent = () => ( +
+ + In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps. + + +
+ + Wrap ETH +
+
+ + Unlock tokens +
+ +
+); diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 11f1becfe..11ad88a1f 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -1,13 +1,14 @@ -import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { BigNumber } from '@0xproject/utils'; -import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; import { Blockchain } from 'ts/blockchain'; +import { AddEthOnboardingStep } from 'ts/components/onboarding/add_eth_onboarding_step'; +import { InstallWalletOnboardingStep } from 'ts/components/onboarding/install_wallet_onboarding_step'; +import { IntroOnboardingStep } from 'ts/components/onboarding/intro_onboarding_step'; import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; -import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; +import { UnlockWalletOnboardingStep } from 'ts/components/onboarding/unlock_wallet_onboarding_step'; +import { WrapEthOnboardingStep } from 'ts/components/onboarding/wrap_eth_onboarding_step'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/types'; import { utils } from 'ts/utils/utils'; @@ -52,20 +53,7 @@ export class PortalOnboardingFlow extends React.Component - - - - - Before you begin, you need to connect to a wallet. This will be used across all 0x relayers - and dApps. - - - ), + content: , placement: 'right', shouldHideBackButton: true, shouldHideNextButton: true, @@ -73,14 +61,7 @@ export class PortalOnboardingFlow extends React.Component - - - - Unlock your metamask extension to begin. - - ), + content: , placement: 'right', shouldHideBackButton: true, shouldHideNextButton: true, @@ -88,24 +69,7 @@ export class PortalOnboardingFlow extends React.Component - - In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two - simple steps. - - -
- - Wrap ETH -
-
- - Unlock tokens -
- - - ), + content: , placement: 'right', shouldHideBackButton: true, continueButtonDisplay: 'enabled', @@ -113,27 +77,22 @@ export class PortalOnboardingFlow extends React.Component - Before you begin you will need to send some ETH to your metamask wallet. - - - - - Click on the metamask - extension in your browser and click either BUY or DEPOSIT. - - - ), + content: , placement: 'right', continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled', }, { target: '.weth-row', title: 'Step 1/2', - content: 'You need to convert some of your ETH into tradeable Wrapped ETH (WETH)', + content: ( + + ), placement: 'right', - continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled', + continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined, }, { target: '.weth-row', @@ -165,13 +124,21 @@ export class PortalOnboardingFlow extends React.Component new BigNumber(0); } - private _userHasVisibleWeth(): boolean { + private _getWethBalance(): BigNumber { const ethToken = utils.getEthToken(this.props.tokenByAddress); if (!ethToken) { - return false; + return new BigNumber(0); } - const wethTokenState = this.props.trackedTokenStateByAddress[ethToken.address]; - return wethTokenState.balance > new BigNumber(0); + const ethTokenState = this.props.trackedTokenStateByAddress[ethToken.address]; + return ethTokenState.balance; + } + private _getFormattedWethBalance(): string { + const ethToken = utils.getEthToken(this.props.tokenByAddress); + const ethTokenState = this.props.trackedTokenStateByAddress[ethToken.address]; + return utils.getFormattedAmountFromToken(ethToken, ethTokenState); + } + private _userHasVisibleWeth(): boolean { + return this._getWethBalance() > new BigNumber(0); } private _userHasAllowancesForWethAndZrx(): boolean { const ethToken = utils.getEthToken(this.props.tokenByAddress); diff --git a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx new file mode 100644 index 000000000..6e6a74a06 --- /dev/null +++ b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; + +export interface UnlockWalletOnboardingStepProps {} + +export const UnlockWalletOnboardingStep: React.StatelessComponent = () => ( +
+
+ + + + Unlock your metamask extension to begin. +
+
+); diff --git a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx new file mode 100644 index 000000000..b21b39341 --- /dev/null +++ b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx @@ -0,0 +1,73 @@ +import { colors } from '@0xproject/react-shared'; +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { IconButton } from 'ts/components/ui/icon_button'; +import { Text } from 'ts/components/ui/text'; + +export interface WrapEthOnboardingStepProps { + formattedEthBalanceIfExists?: string; +} + +export const WrapEthOnboardingStep: React.StatelessComponent = ({ + formattedEthBalanceIfExists, +}) => { + if (formattedEthBalanceIfExists) { + return ( +
+ Congrats you now have {formattedEthBalanceIfExists} in your wallet. + +
+ 1 ETH + +
+ + + + + +
+ 1 WETH + +
+ +
+ ); + } else { + return ( +
+ + You need to convert some of your ETH into tradeable Wrapped ETH (WETH). + + +
+ 1 ETH + +
+ + = + +
+ 1 WETH + +
+ + + Think of it like the coin version of a paper note. It has the same value, but some machines only + take coins. + + + Click + + + + to wrap your ETH. + +
+ ); + } +}; diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index d5665ec5d..1776345da 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -18,6 +18,7 @@ export interface ContainerProps { isHidden?: boolean; className?: string; position?: 'absolute' | 'fixed' | 'relative' | 'unset'; + display?: 'inline-block' | 'block' | 'inline-flex' | 'inline'; top?: string; left?: string; right?: string; diff --git a/packages/website/ts/components/ui/icon_button.tsx b/packages/website/ts/components/ui/icon_button.tsx index 2f5172f05..13cd239da 100644 --- a/packages/website/ts/components/ui/icon_button.tsx +++ b/packages/website/ts/components/ui/icon_button.tsx @@ -5,15 +5,15 @@ import * as React from 'react'; export interface IconButtonProps { iconName: string; labelText?: string; - onClick: () => void; + onClick?: () => void; color?: string; + display?: string; } interface IconButtonState { isHovering: boolean; } export class IconButton extends React.Component { public static defaultProps: Partial = { - onClick: _.noop, labelText: '', color: colors.mediumBlue, }; @@ -26,8 +26,9 @@ export class IconButton extends React.Component { ); } 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}`; + const result = utils.getFormattedAmount(amount, decimals, symbol); return
{result}
; } } -- cgit From 433f830cf33f6383e83cca5e08b1f58bc18a0828 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 15 Jun 2018 18:15:03 -0700 Subject: Finish set allowance step --- .../onboarding/portal_onboarding_flow.tsx | 10 ++++---- .../onboarding/set_allowances_onboarding_step.tsx | 27 ++++++++++++++++++++++ 2 files changed, 32 insertions(+), 5 deletions(-) create mode 100644 packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 11ad88a1f..ad2ada93b 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -7,6 +7,7 @@ import { AddEthOnboardingStep } from 'ts/components/onboarding/add_eth_onboardin import { InstallWalletOnboardingStep } from 'ts/components/onboarding/install_wallet_onboarding_step'; import { IntroOnboardingStep } from 'ts/components/onboarding/intro_onboarding_step'; import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; +import { SetAllowancesOnboardingStep } from 'ts/components/onboarding/set_allowances_onboarding_step'; import { UnlockWalletOnboardingStep } from 'ts/components/onboarding/unlock_wallet_onboarding_step'; import { WrapEthOnboardingStep } from 'ts/components/onboarding/wrap_eth_onboarding_step'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; @@ -98,11 +99,10 @@ export class PortalOnboardingFlow extends React.Component - Unlock your tokens for trading. You only need to do this once for each token. -
ETH: {this._renderEthAllowanceToggle()}
-
ZRX: {this._renderZrxAllowanceToggle()}
- + ), placement: 'right', continueButtonDisplay: this._userHasAllowancesForWethAndZrx() ? 'enabled' : 'disabled', diff --git a/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx b/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx new file mode 100644 index 000000000..1ff248c40 --- /dev/null +++ b/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; + +export interface SetAllowancesOnboardingStepProps { + zrxAllowanceToggle: React.ReactNode; + ethAllowanceToggle: React.ReactNode; +} + +export const SetAllowancesOnboardingStep: React.StatelessComponent = ({ + ethAllowanceToggle, + zrxAllowanceToggle, +}) => ( +
+ Unlock your tokens for trading. You only need to do this once for each token. + +
+ Enable WETH + {ethAllowanceToggle} +
+
+ Enable ZRX + {zrxAllowanceToggle} +
+ +
+); -- cgit From 8a76fdc126c4e8d8b388d9e50bbc7fb8c7862186 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 15 Jun 2018 18:27:23 -0700 Subject: Finish last onboarding step --- .../ts/components/onboarding/congrats_onboarding_step.tsx | 15 +++++++++++++++ .../website/ts/components/onboarding/onboarding_flow.tsx | 2 ++ .../ts/components/onboarding/onboarding_tooltip.tsx | 5 ++++- .../ts/components/onboarding/portal_onboarding_flow.tsx | 4 +++- 4 files changed, 24 insertions(+), 2 deletions(-) create mode 100644 packages/website/ts/components/onboarding/congrats_onboarding_step.tsx (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx b/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx new file mode 100644 index 000000000..3a8db8c36 --- /dev/null +++ b/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; + +export interface CongratsOnboardingStepProps {} + +export const CongratsOnboardingStep: React.StatelessComponent = () => ( +
+ Your wallet is now set up for trading. Use it on any relayer in the 0x ecosystem. + + + + No need to log in. Each relayer automatically detects and connects to your metamask wallet. +
+); diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 7a5a6e40f..34aeace82 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -13,6 +13,7 @@ export interface Step { shouldHideBackButton?: boolean; shouldHideNextButton?: boolean; continueButtonDisplay?: ContinueButtonDisplay; + continueButtonText?: string; } export interface OnboardingFlowProps { @@ -65,6 +66,7 @@ export class OnboardingFlow extends React.Component { onClickNext={this._goToNextStep.bind(this)} onClickBack={this._goToPrevStep.bind(this)} continueButtonDisplay={step.continueButtonDisplay} + continueButtonText={step.continueButtonText} /> ); diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx index 0858ad326..45851b4de 100644 --- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx +++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx @@ -21,6 +21,7 @@ export interface OnboardingTooltipProps { shouldHideBackButton?: boolean; shouldHideNextButton?: boolean; pointerDirection?: PointerDirection; + continueButtonText?: string; className?: string; } @@ -28,6 +29,7 @@ export const OnboardingTooltip: React.StatelessComponent title, content, continueButtonDisplay, + continueButtonText, onClickNext, onClickBack, onClose, @@ -59,7 +61,7 @@ export const OnboardingTooltip: React.StatelessComponent fontSize="15px" backgroundColor={colors.mediumBlue} > - Continue + {continueButtonText} )} @@ -82,6 +84,7 @@ export const OnboardingTooltip: React.StatelessComponent OnboardingTooltip.defaultProps = { pointerDirection: 'left', + continueButtonText: 'Continue', }; OnboardingTooltip.displayName = 'OnboardingTooltip'; diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index ad2ada93b..4283022e2 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -4,6 +4,7 @@ import * as React from 'react'; import { BigNumber } from '@0xproject/utils'; import { Blockchain } from 'ts/blockchain'; import { AddEthOnboardingStep } from 'ts/components/onboarding/add_eth_onboarding_step'; +import { CongratsOnboardingStep } from 'ts/components/onboarding/congrats_onboarding_step'; import { InstallWalletOnboardingStep } from 'ts/components/onboarding/install_wallet_onboarding_step'; import { IntroOnboardingStep } from 'ts/components/onboarding/intro_onboarding_step'; import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; @@ -110,10 +111,11 @@ export class PortalOnboardingFlow extends React.Component, placement: 'right', continueButtonDisplay: 'enabled', shouldHideNextButton: true, + continueButtonText: 'Enter the 0x Ecosystem', }, ]; return steps; -- cgit From 888086010579566aca57e63daa5bacc9c6802830 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 14 Jun 2018 13:51:02 -0700 Subject: Set max-width for LargeLayout --- packages/website/ts/components/portal/portal.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 48486939b..d51e40216 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -100,6 +100,7 @@ const THROTTLE_TIMEOUT = 100; const TOP_BAR_HEIGHT = TopBar.heightForDisplayType(TopBarDisplayType.Expanded); const LEFT_COLUMN_WIDTH = 346; const MENU_PADDING_LEFT = 185; +const LARGE_LAYOUT_MAX_WIDTH = 1200; const styles: Styles = { root: { @@ -660,11 +661,11 @@ interface LargeLayoutProps { } const LargeLayout = (props: LargeLayoutProps) => { return ( -
-
+
+
{props.left}
-
+
{props.right}
@@ -676,7 +677,7 @@ interface SmallLayoutProps { } const SmallLayout = (props: SmallLayoutProps) => { return ( -
+
{props.content}
-- cgit From 55cbcd728d9b0611e604a389443f94de58726d92 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 14 Jun 2018 14:12:05 -0700 Subject: Add max width to top bar --- packages/website/ts/components/portal/portal.tsx | 1 + packages/website/ts/components/top_bar/top_bar.tsx | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index d51e40216..ee8c90c2f 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -255,6 +255,7 @@ export class Portal extends React.Component { translate={this.props.translate} displayType={TopBarDisplayType.Expanded} style={{ backgroundColor: colors.lightestGrey }} + maxWidth={LARGE_LAYOUT_MAX_WIDTH} />
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 05cc6e3ad..1a69827a4 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -45,6 +45,7 @@ export interface TopBarProps { isNightVersion?: boolean; onVersionSelected?: (semver: string) => void; sidebarHeader?: React.ReactNode; + maxWidth?: number; } interface TopBarState { @@ -213,7 +214,7 @@ export class TopBar extends React.Component { const shouldShowPortalV2Drawer = this._isViewingPortal() && utils.shouldShowPortalV2(); return (
-
+
-- cgit From 2ad411ea290697fc33786f9a0daa32116d51bd09 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 14 Jun 2018 15:04:31 -0700 Subject: Update RelayerGridTile render logic to incorportate colors and logos --- .../components/relayer_index/relayer_grid_tile.tsx | 32 ++++++++++++++-------- .../ts/components/relayer_index/relayer_index.tsx | 4 +-- 2 files changed, 22 insertions(+), 14 deletions(-) (limited to 'packages/website/ts/components') 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 fbb634164..0b0e75312 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -26,7 +26,6 @@ const styles: Styles = { header: { height: '50%', width: '100%', - objectFit: 'cover', borderBottomRightRadius: 4, borderBottomLeftRadius: 4, borderTopRightRadius: 4, @@ -58,21 +57,26 @@ const styles: Styles = { }; const FALLBACK_IMG_SRC = '/images/landing/hero_chip_image.png'; +const FALLBACK_PRIMARY_COLOR = colors.grey200; const NO_CONTENT_MESSAGE = '--'; +const RELAYER_ICON_HEIGHT = '110px'; export const RelayerGridTile: React.StatelessComponent = (props: RelayerGridTileProps) => { const link = props.relayerInfo.appUrl || props.relayerInfo.url; const topTokens = props.relayerInfo.topTokens; const weeklyTxnVolume = props.relayerInfo.weeklyTxnVolume; + const headerImageUrl = props.relayerInfo.logoImgUrl; + const headerBackgroundColor = + !_.isUndefined(headerImageUrl) && !_.isUndefined(props.relayerInfo.primaryColor) + ? props.relayerInfo.primaryColor + : FALLBACK_PRIMARY_COLOR; return (
- +
+ +
@@ -112,7 +116,6 @@ const NoContent = () =>
{NO_CONTENT_MESSAGE}
; interface ImgWithFallbackProps { src?: string; fallbackSrc: string; - style: React.CSSProperties; } interface ImgWithFallbackState { imageLoadFailed: boolean; @@ -125,11 +128,16 @@ class ImgWithFallback extends React.Component; - } else { - return ; - } + return ( +
+ {this._renderImg()} +
+ ); + } + private _renderImg(): React.ReactNode { + const src = + this.state.imageLoadFailed || _.isUndefined(this.props.src) ? this.props.fallbackSrc : this.props.src; + return ; } private _onError(): void { this.setState({ diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index 3c5761bcd..8dd4f0fbf 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -37,8 +37,8 @@ const styles: Styles = { }; const CELL_HEIGHT = 290; -const NUMBER_OF_COLUMNS_LARGE = 4; -const NUMBER_OF_COLUMNS_MEDIUM = 3; +const NUMBER_OF_COLUMNS_LARGE = 3; +const NUMBER_OF_COLUMNS_MEDIUM = 2; const NUMBER_OF_COLUMNS_SMALL = 1; const GRID_PADDING = 20; -- cgit From da46eefe2eea9507ae12ed678b15047f1c74366f Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Mon, 18 Jun 2018 12:09:31 -0700 Subject: Create a shared Image component --- .../components/relayer_index/relayer_grid_tile.tsx | 46 ++++++---------------- packages/website/ts/components/ui/image.tsx | 37 +++++++++++++++++ 2 files changed, 48 insertions(+), 35 deletions(-) create mode 100644 packages/website/ts/components/ui/image.tsx (limited to 'packages/website/ts/components') 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 0b0e75312..98d6dc0b3 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -5,6 +5,7 @@ import * as React from 'react'; import { TopTokens } from 'ts/components/relayer_index/relayer_top_tokens'; import { Container } from 'ts/components/ui/container'; +import { Image } from 'ts/components/ui/image'; import { Island } from 'ts/components/ui/island'; import { colors } from 'ts/style/colors'; import { WebsiteBackendRelayerInfo } from 'ts/types'; @@ -74,8 +75,16 @@ export const RelayerGridTile: React.StatelessComponent = (
-
- +
+
@@ -112,36 +121,3 @@ const Section = (props: SectionProps) => { }; const NoContent = () =>
{NO_CONTENT_MESSAGE}
; - -interface ImgWithFallbackProps { - src?: string; - fallbackSrc: string; -} -interface ImgWithFallbackState { - imageLoadFailed: boolean; -} -class ImgWithFallback extends React.Component { - constructor(props: ImgWithFallbackProps) { - super(props); - this.state = { - imageLoadFailed: false, - }; - } - public render(): React.ReactNode { - return ( -
- {this._renderImg()} -
- ); - } - private _renderImg(): React.ReactNode { - const src = - this.state.imageLoadFailed || _.isUndefined(this.props.src) ? this.props.fallbackSrc : this.props.src; - return ; - } - private _onError(): void { - this.setState({ - imageLoadFailed: true, - }); - } -} diff --git a/packages/website/ts/components/ui/image.tsx b/packages/website/ts/components/ui/image.tsx new file mode 100644 index 000000000..0958d2e5e --- /dev/null +++ b/packages/website/ts/components/ui/image.tsx @@ -0,0 +1,37 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +export interface ImageProps { + className?: string; + src?: string; + fallbackSrc?: string; + height?: string; +} +interface ImageState { + imageLoadFailed: boolean; +} +export class Image extends React.Component { + constructor(props: ImageProps) { + super(props); + this.state = { + imageLoadFailed: false, + }; + } + public render(): React.ReactNode { + const src = + this.state.imageLoadFailed || _.isUndefined(this.props.src) ? this.props.fallbackSrc : this.props.src; + return ( + + ); + } + private _onError(): void { + this.setState({ + imageLoadFailed: true, + }); + } +} -- cgit From 0bfcf79e79b762a9fb98e90b8e6310c781cfae97 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Mon, 18 Jun 2018 17:44:09 -0700 Subject: Increase number of columns in relayer grid for small screens --- packages/website/ts/components/relayer_index/relayer_index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index 8dd4f0fbf..d565eb608 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -39,7 +39,7 @@ const styles: Styles = { const CELL_HEIGHT = 290; const NUMBER_OF_COLUMNS_LARGE = 3; const NUMBER_OF_COLUMNS_MEDIUM = 2; -const NUMBER_OF_COLUMNS_SMALL = 1; +const NUMBER_OF_COLUMNS_SMALL = 2; const GRID_PADDING = 20; export class RelayerIndex extends React.Component { -- cgit