diff options
Diffstat (limited to 'packages/website/ts/components')
8 files changed, 150 insertions, 36 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx new file mode 100644 index 000000000..5bbf84e1b --- /dev/null +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -0,0 +1,31 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import Joyride, { Step, StyleOptions } from 'react-joyride'; + +import { zIndex } from 'ts/utils/style'; + +interface OnboardingFlowProps { + steps: Step[]; + stepIndex?: number; + isRunning: boolean; +} + +const style: StyleOptions = { + zIndex: zIndex.overlay, +}; + +// Wrapper around Joyride with defaults and styles set +export class OnboardingFlow extends React.Component<OnboardingFlowProps> { + public render(): React.ReactNode { + const { steps, stepIndex, isRunning } = this.props; + return ( + <Joyride + run={isRunning} + debug={true} + steps={steps} + stepIndex={stepIndex} + styles={{ options: style }} + /> + ); + } +}; diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx new file mode 100644 index 000000000..57b209fac --- /dev/null +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; + +import { OnboardingFlow } from 'ts/components/onboarding/onboarding_flow'; + +export interface PortalOnboardingFlowProps { + stepIndex: number; + isRunning: boolean; +} + +const steps = [ + { + target: '.wallet', + content: 'Hey!', + placement: 'right', + disableBeacon: true, + }, +]; + +export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlow> { + public render(): React.ReactNode { + return ( + <OnboardingFlow + steps={steps} + stepIndex={this.props.stepIndex} + isRunning={this.props.isRunning} + /> + ) + } +}; diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 1bd318c28..a4e3a006e 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -19,8 +19,11 @@ import { TextHeader } from 'ts/components/portal/text_header'; import { RelayerIndex } from 'ts/components/relayer_index/relayer_index'; import { TokenBalances } from 'ts/components/token_balances'; import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar'; +import { PortalOnboardingFlow } from 'ts/containers/portal_onboarding_flow'; +import { Island } from 'ts/components/ui/island'; import { TradeHistory } from 'ts/components/trade_history/trade_history'; import { FlashMessage } from 'ts/components/ui/flash_message'; +import { Container } from 'ts/components/ui/container'; import { Wallet } from 'ts/components/wallet/wallet'; import { GenerateOrderForm } from 'ts/containers/generate_order_form'; import { localStorage } from 'ts/local_storage/local_storage'; @@ -183,6 +186,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { : TokenVisibility.TRACKED; return ( <div style={styles.root}> + <PortalOnboardingFlow /> <DocumentTitle title="0x Portal DApp" /> <TopBar userAddress={this.props.userAddress} @@ -278,25 +282,37 @@ export class Portal extends React.Component<PortalProps, PortalState> { const allTokens = _.values(this.props.tokenByAddress); const trackedTokens = _.filter(allTokens, t => t.isTracked); return ( - <Wallet - userAddress={this.props.userAddress} - networkId={this.props.networkId} - blockchain={this._blockchain} - blockchainIsLoaded={this.props.blockchainIsLoaded} - blockchainErr={this.props.blockchainErr} - dispatcher={this.props.dispatcher} - tokenByAddress={this.props.tokenByAddress} - trackedTokens={trackedTokens} - userEtherBalanceInWei={this.props.userEtherBalanceInWei} - lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} - injectedProviderName={this.props.injectedProviderName} - providerType={this.props.providerType} - onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)} - onAddToken={this._onAddToken.bind(this)} - onRemoveToken={this._onRemoveToken.bind(this)} - /> + <div> + <Wallet + userAddress={this.props.userAddress} + networkId={this.props.networkId} + blockchain={this._blockchain} + blockchainIsLoaded={this.props.blockchainIsLoaded} + blockchainErr={this.props.blockchainErr} + dispatcher={this.props.dispatcher} + tokenByAddress={this.props.tokenByAddress} + trackedTokens={trackedTokens} + userEtherBalanceInWei={this.props.userEtherBalanceInWei} + lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} + injectedProviderName={this.props.injectedProviderName} + providerType={this.props.providerType} + onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)} + onAddToken={this._onAddToken.bind(this)} + onRemoveToken={this._onRemoveToken.bind(this)} + /> + <Container marginTop="15px"> + <Island> + {/** TODO: Implement real styles. */} + <p onClick={this._startOnboarding.bind(this)}>Start onboarding flow.</p> + </Island> + </Container> + </div> ); } + + private _startOnboarding(): void { + this.props.dispatcher.updatePortalOnboardingShowing(true); + } private _renderWalletSection(): React.ReactNode { return <Section header={<TextHeader labelText="Your Account" />} body={this._renderWallet()} />; } 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 dc9eeb29d..23c2f0b56 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -4,6 +4,7 @@ import { GridTile } from 'material-ui/GridList'; import * as React from 'react'; import { TopTokens } from 'ts/components/relayer_index/relayer_top_tokens'; +import { Island } from 'ts/components/ui/island'; import { TokenIcon } from 'ts/components/ui/token_icon'; import { Token, WebsiteBackendRelayerInfo } from 'ts/types'; import { colors } from 'ts/utils/colors'; @@ -15,13 +16,6 @@ export interface RelayerGridTileProps { const styles: Styles = { root: { - backgroundColor: colors.white, - borderBottomRightRadius: 10, - borderBottomLeftRadius: 10, - borderTopRightRadius: 10, - borderTopLeftRadius: 10, - boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`, - overflow: 'hidden', boxSizing: 'border-box', }, innerDiv: { @@ -68,7 +62,7 @@ const FALLBACK_IMG_SRC = '/images/landing/hero_chip_image.png'; export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (props: RelayerGridTileProps) => { const link = props.relayerInfo.appUrl || props.relayerInfo.url; return ( - <GridTile style={styles.root}> + <Island style={styles.root} Component={GridTile}> <div style={styles.innerDiv}> <a href={link} target="_blank" style={{ textDecoration: 'none' }}> <ImgWithFallback @@ -91,7 +85,7 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = ( </div> </div> </div> - </GridTile> + </Island> ); }; diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index f2d0c6177..3f11f9779 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -20,6 +20,7 @@ import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/ty import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; +import { zIndex } from 'ts/utils/style'; export enum TopBarDisplayType { Default, @@ -59,7 +60,7 @@ const styles: Styles = { width: '100%', position: 'relative', top: 0, - zIndex: 1100, + zIndex: zIndex.topBar, paddingBottom: 1, }, bottomBar: { diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx new file mode 100644 index 000000000..7565dd1ae --- /dev/null +++ b/packages/website/ts/components/ui/container.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; + +interface ContainerProps { + marginTop?: string | number; + marginBottom?: string | number; + marginRight?: string | number; + marginLeft?: string | number; + children?: React.ReactNode; +} + +export const Container: React.StatelessComponent<ContainerProps> = (props: ContainerProps) => { + const { children, ...style } = props; + return <div style={style}>{children}</div>; +}; + +Container.displayName = 'Container'; diff --git a/packages/website/ts/components/ui/island.tsx b/packages/website/ts/components/ui/island.tsx new file mode 100644 index 000000000..da3602c3e --- /dev/null +++ b/packages/website/ts/components/ui/island.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import { Styleable } from 'ts/types'; +import { colors } from 'ts/utils/colors'; + +export interface IslandProps { + style?: React.CSSProperties; + children?: React.ReactNode; + className?: string; + Component?: string | React.ComponentClass<any> | React.StatelessComponent<any>; +} + +const defaultStyle: React.CSSProperties = { + backgroundColor: colors.white, + borderBottomRightRadius: 10, + borderBottomLeftRadius: 10, + borderTopRightRadius: 10, + borderTopLeftRadius: 10, + boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`, + overflow: 'hidden', +}; + +export const Island: React.StatelessComponent<IslandProps> = (props: IslandProps) => ( + <props.Component style={{...defaultStyle, ...props.style}} className={props.className}> + {props.children} + </props.Component> +); + +Island.defaultProps = { + Component: 'div', + style: {}, +}; + +Island.displayName = 'Island'; diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index d0354580d..1790f7258 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -25,6 +25,7 @@ import { Blockchain } from 'ts/blockchain'; import { AllowanceToggle } from 'ts/components/inputs/allowance_toggle'; import { IconButton } from 'ts/components/ui/icon_button'; import { Identicon } from 'ts/components/ui/identicon'; +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'; @@ -84,13 +85,6 @@ interface AccessoryItemConfig { const styles: Styles = { root: { width: '100%', - backgroundColor: colors.white, - borderBottomRightRadius: 10, - borderBottomLeftRadius: 10, - borderTopRightRadius: 10, - borderTopLeftRadius: 10, - boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`, - overflow: 'hidden', }, headerItemInnerDiv: { paddingLeft: 65, @@ -198,11 +192,11 @@ export class Wallet extends React.Component<WalletProps, WalletState> { const isReadyToRender = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError; const isAddressAvailable = !_.isEmpty(this.props.userAddress); return ( - <div className="flex flex-column" style={styles.root}> + <Island className="flex flex-column" style={styles.root}> {isReadyToRender && isAddressAvailable ? _.concat(this._renderConnectedHeaderRows(), this._renderBody(), this._renderFooterRows()) : _.concat(this._renderDisconnectedHeaderRows(), this._renderDisconnectedRows())} - </div> + </Island> ); } private _renderDisconnectedHeaderRows(): React.ReactElement<{}> { |