aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx31
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx29
-rw-r--r--packages/website/ts/components/portal/portal.tsx50
-rw-r--r--packages/website/ts/components/relayer_index/relayer_grid_tile.tsx12
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx3
-rw-r--r--packages/website/ts/components/ui/container.tsx16
-rw-r--r--packages/website/ts/components/ui/island.tsx33
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx12
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<{}> {