aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/blockchain.ts7
-rw-r--r--packages/website/ts/blockchain_watcher.ts89
-rw-r--r--packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx18
-rw-r--r--packages/website/ts/components/onboarding/congrats_onboarding_step.tsx15
-rw-r--r--packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx18
-rw-r--r--packages/website/ts/components/onboarding/intro_onboarding_step.tsx23
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx12
-rw-r--r--packages/website/ts/components/onboarding/onboarding_tooltip.tsx103
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx73
-rw-r--r--packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx27
-rw-r--r--packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx16
-rw-r--r--packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx73
-rw-r--r--packages/website/ts/components/portal/portal.tsx34
-rw-r--r--packages/website/ts/components/relayer_index/relayer_grid_tile.tsx57
-rw-r--r--packages/website/ts/components/relayer_index/relayer_index.tsx6
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx3
-rw-r--r--packages/website/ts/components/ui/button.tsx17
-rw-r--r--packages/website/ts/components/ui/container.tsx7
-rw-r--r--packages/website/ts/components/ui/icon_button.tsx9
-rw-r--r--packages/website/ts/components/ui/image.tsx37
-rw-r--r--packages/website/ts/components/ui/pointer.tsx67
-rw-r--r--packages/website/ts/components/ui/text.tsx31
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx6
-rw-r--r--packages/website/ts/containers/zero_ex_js_documentation.ts1
-rw-r--r--packages/website/ts/types.ts2
-rw-r--r--packages/website/ts/utils/constants.ts1
-rw-r--r--packages/website/ts/utils/utils.ts11
27 files changed, 586 insertions, 177 deletions
diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts
index c955e1033..46a4d6629 100644
--- a/packages/website/ts/blockchain.ts
+++ b/packages/website/ts/blockchain.ts
@@ -229,7 +229,7 @@ export class Blockchain {
shouldPollUserAddress,
);
this._contractWrappers.setProvider(provider, this.networkId);
- this._blockchainWatcher.startEmittingNetworkConnectionAndUserBalanceState();
+ await this._blockchainWatcher.startEmittingNetworkConnectionAndUserBalanceStateAsync();
this._dispatcher.updateProviderType(ProviderType.Ledger);
}
public async updateProviderToInjectedAsync(): Promise<void> {
@@ -259,7 +259,7 @@ export class Blockchain {
this._contractWrappers.setProvider(provider, this.networkId);
await this.fetchTokenInformationAsync();
- this._blockchainWatcher.startEmittingNetworkConnectionAndUserBalanceState();
+ await this._blockchainWatcher.startEmittingNetworkConnectionAndUserBalanceStateAsync();
this._dispatcher.updateProviderType(ProviderType.Injected);
delete this._ledgerSubprovider;
delete this._cachedProvider;
@@ -625,6 +625,7 @@ export class Blockchain {
);
const provider = this._contractWrappers.getProvider();
const web3Wrapper = new Web3Wrapper(provider);
+ web3Wrapper.abiDecoder.addABI(this._contractWrappers.exchange.abi);
const receipt = await web3Wrapper.awaitTransactionSuccessAsync(txHash);
return receipt;
}
@@ -815,7 +816,7 @@ export class Blockchain {
this._userAddressIfExists = userAddresses[0];
this._dispatcher.updateUserAddress(this._userAddressIfExists);
await this.fetchTokenInformationAsync();
- this._blockchainWatcher.startEmittingNetworkConnectionAndUserBalanceState();
+ await this._blockchainWatcher.startEmittingNetworkConnectionAndUserBalanceStateAsync();
await this._rehydrateStoreWithContractEventsAsync();
}
private _updateProviderName(injectedWeb3: Web3): void {
diff --git a/packages/website/ts/blockchain_watcher.ts b/packages/website/ts/blockchain_watcher.ts
index 3890a9e57..c576db6ac 100644
--- a/packages/website/ts/blockchain_watcher.ts
+++ b/packages/website/ts/blockchain_watcher.ts
@@ -34,56 +34,15 @@ export class BlockchainWatcher {
public updatePrevUserAddress(userAddress: string): void {
this._prevUserAddressIfExists = userAddress;
}
- public startEmittingNetworkConnectionAndUserBalanceState(): void {
+ public async startEmittingNetworkConnectionAndUserBalanceStateAsync(): Promise<void> {
if (!_.isUndefined(this._watchNetworkAndBalanceIntervalId)) {
return; // we are already emitting the state
}
-
- let prevNodeVersion: string;
this._prevUserEtherBalanceInWei = undefined;
this._dispatcher.updateNetworkId(this._prevNetworkId);
+ await this._updateNetworkAndBalanceAsync();
this._watchNetworkAndBalanceIntervalId = intervalUtils.setAsyncExcludingInterval(
- async () => {
- // Check for network state changes
- let currentNetworkId;
- try {
- currentNetworkId = await this._web3Wrapper.getNetworkIdAsync();
- } catch (err) {
- // Noop
- }
- if (currentNetworkId !== this._prevNetworkId) {
- this._prevNetworkId = currentNetworkId;
- this._dispatcher.updateNetworkId(currentNetworkId);
- }
-
- // Check for node version changes
- const currentNodeVersion = await this._web3Wrapper.getNodeVersionAsync();
- if (currentNodeVersion !== prevNodeVersion) {
- prevNodeVersion = currentNodeVersion;
- this._dispatcher.updateNodeVersion(currentNodeVersion);
- }
-
- if (this._shouldPollUserAddress) {
- const addresses = await this._web3Wrapper.getAvailableAddressesAsync();
- const userAddressIfExists = addresses[0];
- // Update makerAddress on network change
- if (this._prevUserAddressIfExists !== userAddressIfExists) {
- this._prevUserAddressIfExists = userAddressIfExists;
- this._dispatcher.updateUserAddress(userAddressIfExists);
- }
-
- // Check for user ether balance changes
- if (!_.isUndefined(userAddressIfExists)) {
- await this._updateUserWeiBalanceAsync(userAddressIfExists);
- }
- } else {
- // This logic is primarily for the Ledger, since we don't regularly poll for the address
- // we simply update the balance for the last fetched address.
- if (!_.isUndefined(this._prevUserAddressIfExists)) {
- await this._updateUserWeiBalanceAsync(this._prevUserAddressIfExists);
- }
- }
- },
+ this._updateNetworkAndBalanceAsync.bind(this),
5000,
(err: Error) => {
logUtils.log(`Watching network and balances failed: ${err.stack}`);
@@ -91,6 +50,48 @@ export class BlockchainWatcher {
},
);
}
+ private async _updateNetworkAndBalanceAsync(): Promise<void> {
+ // Check for network state changes
+ let prevNodeVersion: string;
+ let currentNetworkId;
+ try {
+ currentNetworkId = await this._web3Wrapper.getNetworkIdAsync();
+ } catch (err) {
+ // Noop
+ }
+ if (currentNetworkId !== this._prevNetworkId) {
+ this._prevNetworkId = currentNetworkId;
+ this._dispatcher.updateNetworkId(currentNetworkId);
+ }
+
+ // Check for node version changes
+ const currentNodeVersion = await this._web3Wrapper.getNodeVersionAsync();
+ if (currentNodeVersion !== prevNodeVersion) {
+ prevNodeVersion = currentNodeVersion;
+ this._dispatcher.updateNodeVersion(currentNodeVersion);
+ }
+
+ if (this._shouldPollUserAddress) {
+ const addresses = await this._web3Wrapper.getAvailableAddressesAsync();
+ const userAddressIfExists = addresses[0];
+ // Update makerAddress on network change
+ if (this._prevUserAddressIfExists !== userAddressIfExists) {
+ this._prevUserAddressIfExists = userAddressIfExists;
+ this._dispatcher.updateUserAddress(userAddressIfExists);
+ }
+
+ // Check for user ether balance changes
+ if (!_.isUndefined(userAddressIfExists)) {
+ await this._updateUserWeiBalanceAsync(userAddressIfExists);
+ }
+ } else {
+ // This logic is primarily for the Ledger, since we don't regularly poll for the address
+ // we simply update the balance for the last fetched address.
+ if (!_.isUndefined(this._prevUserAddressIfExists)) {
+ await this._updateUserWeiBalanceAsync(this._prevUserAddressIfExists);
+ }
+ }
+ }
private async _updateUserWeiBalanceAsync(userAddress: string): Promise<void> {
const balanceInWei = await this._web3Wrapper.getBalanceInWeiAsync(userAddress);
if (_.isUndefined(this._prevUserEtherBalanceInWei) || !balanceInWei.eq(this._prevUserEtherBalanceInWei)) {
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<AddEthOnboardingStepProps> = () => (
+ <div className="flex items-center flex-column">
+ <Text> Before you begin you will need to send some ETH to your metamask wallet.</Text>
+ <Container marginTop="15px" marginBottom="15px">
+ <img src="/images/ether_alt.svg" height="50px" width="50px" />
+ </Container>
+ <Text>
+ Click on the <img src="/images/metamask_icon.png" height="20px" width="20px" /> metamask extension in your
+ browser and click either <b>BUY</b> or <b>DEPOSIT</b>.
+ </Text>
+ </div>
+);
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<CongratsOnboardingStepProps> = () => (
+ <div className="flex items-center flex-column">
+ <Text>Your wallet is now set up for trading. Use it on any relayer in the 0x ecosystem.</Text>
+ <Container marginTop="25px" marginBottom="15px" className="flex justify-center">
+ <img src="/images/zrx_ecosystem.svg" height="150px" />
+ </Container>
+ <Text>No need to log in. Each relayer automatically detects and connects to your metamask wallet.</Text>
+ </div>
+);
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<InstallWalletOnboardingStepProps> = () => (
+ <div className="flex items-center flex-column">
+ <Container marginTop="15px" marginBottom="15px">
+ <ActionAccountBalanceWallet style={{ width: '30px', height: '30px' }} color={colors.orange} />
+ </Container>
+ <Text>
+ Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps.
+ </Text>
+ </div>
+);
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<IntroOnboardingStepProps> = () => (
+ <div className="flex items-center flex-column">
+ <Text>
+ In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps.
+ </Text>
+ <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-around">
+ <div className="flex flex-column items-center">
+ <img src="/images/eth_token.svg" height="50px" width="50x" />
+ <Text> Wrap ETH </Text>
+ </div>
+ <div className="flex flex-column items-center">
+ <img src="/images/fake_toggle.svg" height="50px" width="50px" />
+ <Text> Unlock tokens </Text>
+ </div>
+ </Container>
+ </div>
+);
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 9879cd387..34aeace82 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -10,9 +10,10 @@ export interface Step {
title?: string;
content: React.ReactNode;
placement?: Placement;
- hideBackButton?: boolean;
- hideNextButton?: boolean;
+ shouldHideBackButton?: boolean;
+ shouldHideNextButton?: boolean;
continueButtonDisplay?: ContinueButtonDisplay;
+ continueButtonText?: string;
}
export interface OnboardingFlowProps {
@@ -54,17 +55,18 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
const step = steps[stepIndex];
const isLastStep = steps.length - 1 === stepIndex;
return (
- <Container marginLeft="15px">
+ <Container marginLeft="30px">
<OnboardingTooltip
title={step.title}
content={step.content}
isLastStep={isLastStep}
- hideBackButton={step.hideBackButton}
- hideNextButton={step.hideNextButton}
+ shouldHideBackButton={step.shouldHideBackButton}
+ shouldHideNextButton={step.shouldHideNextButton}
onClose={this.props.onClose}
onClickNext={this._goToNextStep.bind(this)}
onClickBack={this._goToPrevStep.bind(this)}
continueButtonDisplay={step.continueButtonDisplay}
+ continueButtonText={step.continueButtonText}
/>
</Container>
);
diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
index 155c70c5f..45851b4de 100644
--- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
@@ -1,7 +1,12 @@
+import { colors } from '@0xproject/react-shared';
import * as React from 'react';
+import { Button } from 'ts/components/ui/button';
import { Container } from 'ts/components/ui/container';
+import { IconButton } from 'ts/components/ui/icon_button';
import { Island } from 'ts/components/ui/island';
+import { Pointer, PointerDirection } from 'ts/components/ui/pointer';
+import { Text, Title } from 'ts/components/ui/text';
export type ContinueButtonDisplay = 'enabled' | 'disabled';
@@ -13,43 +18,73 @@ export interface OnboardingTooltipProps {
onClickNext: () => void;
onClickBack: () => void;
continueButtonDisplay?: ContinueButtonDisplay;
- hideBackButton?: boolean;
- hideNextButton?: boolean;
+ shouldHideBackButton?: boolean;
+ shouldHideNextButton?: boolean;
+ pointerDirection?: PointerDirection;
+ continueButtonText?: string;
+ className?: string;
}
-// TODO: Make this more general button.
-export interface ContinueButtonProps {
- display: ContinueButtonDisplay;
- children?: string;
- onClick: () => void;
-}
+export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = ({
+ title,
+ content,
+ continueButtonDisplay,
+ continueButtonText,
+ onClickNext,
+ onClickBack,
+ onClose,
+ shouldHideBackButton,
+ shouldHideNextButton,
+ pointerDirection,
+ className,
+}) => (
+ <Pointer className={className} direction={pointerDirection}>
+ <Island>
+ <Container paddingRight="30px" paddingLeft="30px" maxWidth={350} paddingTop="15px" paddingBottom="15px">
+ <div className="flex flex-column">
+ <div className="flex justify-between">
+ <Title>{title}</Title>
+ <Container position="relative" bottom="20px" left="15px">
+ <IconButton color={colors.grey} iconName="zmdi-close" onClick={onClose}>
+ Close
+ </IconButton>
+ </Container>
+ </div>
+ <Container marginBottom="15px">
+ <Text>{content}</Text>
+ </Container>
+ {continueButtonDisplay && (
+ <Button
+ isDisabled={continueButtonDisplay === 'disabled'}
+ onClick={onClickNext}
+ fontColor={colors.white}
+ fontSize="15px"
+ backgroundColor={colors.mediumBlue}
+ >
+ {continueButtonText}
+ </Button>
+ )}
+ <Container className="flex justify-between" marginTop="15px">
+ {!shouldHideBackButton && (
+ <Text fontColor={colors.grey} onClick={onClickBack}>
+ Back
+ </Text>
+ )}
+ {!shouldHideNextButton && (
+ <Text fontColor={colors.grey} onClick={onClickNext}>
+ Skip
+ </Text>
+ )}
+ </Container>
+ </div>
+ </Container>
+ </Island>
+ </Pointer>
+);
-export const ContinueButton: React.StatelessComponent<ContinueButtonProps> = (props: ContinueButtonProps) => {
- const isDisabled = props.display === 'disabled';
- return (
- <button disabled={isDisabled} onClick={isDisabled ? undefined : props.onClick}>
- {props.children}
- </button>
- );
+OnboardingTooltip.defaultProps = {
+ pointerDirection: 'left',
+ continueButtonText: 'Continue',
};
-export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = (props: OnboardingTooltipProps) => (
- <Island>
- <Container paddingRight="30px" paddingLeft="30px" maxWidth={350} paddingTop="15px" paddingBottom="15px">
- <div className="flex flex-column">
- {props.title}
- {props.content}
- {props.continueButtonDisplay && (
- <ContinueButton onClick={props.onClickNext} display={props.continueButtonDisplay}>
- Continue
- </ContinueButton>
- )}
- {!props.hideBackButton && <button onClick={props.onClickBack}>Back</button>}
- {!props.hideNextButton && <button onClick={props.onClickNext}>Skip</button>}
- <button onClick={props.onClose}>Close</button>
- </div>
- </Container>
- </Island>
-);
-
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 ec2365c11..3880e018a 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -4,7 +4,14 @@ 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';
+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';
import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/types';
import { analytics } from 'ts/utils/analytics';
@@ -50,56 +57,68 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
const steps: Step[] = [
{
target: '.wallet',
- content:
- 'Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps',
+ title: '0x Ecosystem Setup',
+ content: <InstallWalletOnboardingStep />,
placement: 'right',
- hideBackButton: true,
- hideNextButton: true,
+ shouldHideBackButton: true,
+ shouldHideNextButton: true,
},
{
target: '.wallet',
- content: 'Unlock your metamask extension to begin',
+ title: '0x Ecosystem Setup',
+ content: <UnlockWalletOnboardingStep />,
placement: 'right',
- hideBackButton: true,
- hideNextButton: true,
+ shouldHideBackButton: true,
+ shouldHideNextButton: true,
},
{
target: '.wallet',
- content:
- 'In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps',
+ title: '0x Ecosystem Account Setup',
+ content: <IntroOnboardingStep />,
placement: 'right',
- hideBackButton: true,
+ shouldHideBackButton: true,
continueButtonDisplay: 'enabled',
},
{
target: '.eth-row',
- content: 'Before you begin you will need to send some ETH to your metamask wallet',
+ title: 'Add ETH',
+ content: <AddEthOnboardingStep />,
placement: 'right',
continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled',
},
{
target: '.weth-row',
- content: 'You need to convert some of your ETH into tradeable Wrapped ETH (WETH)',
+ title: 'Step 1/2',
+ content: (
+ <WrapEthOnboardingStep
+ formattedEthBalanceIfExists={
+ this._userHasVisibleWeth() ? this._getFormattedWethBalance() : undefined
+ }
+ />
+ ),
placement: 'right',
- continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
+ continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined,
},
{
target: '.weth-row',
+ title: 'Step 2/2',
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>
+ <SetAllowancesOnboardingStep
+ zrxAllowanceToggle={this._renderZrxAllowanceToggle()}
+ ethAllowanceToggle={this._renderEthAllowanceToggle()}
+ />
),
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.',
+ title: '🎉 Congrats! The ecosystem awaits.',
+ content: <CongratsOnboardingStep />,
placement: 'right',
continueButtonDisplay: 'enabled',
+ shouldHideNextButton: true,
+ continueButtonText: 'Enter the 0x Ecosystem',
},
];
return steps;
@@ -110,13 +129,21 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
private _userHasVisibleEth(): boolean {
return this.props.userEtherBalanceInWei > 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/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<SetAllowancesOnboardingStepProps> = ({
+ ethAllowanceToggle,
+ zrxAllowanceToggle,
+}) => (
+ <div className="flex items-center flex-column">
+ <Text>Unlock your tokens for trading. You only need to do this once for each token.</Text>
+ <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-around">
+ <div className="flex flex-column items-center">
+ <Text fontWeight={700}> Enable WETH </Text>
+ <Container marginTop="10px">{ethAllowanceToggle}</Container>
+ </div>
+ <div className="flex flex-column items-center">
+ <Text fontWeight={700}> Enable ZRX </Text>
+ <Container marginTop="10px">{zrxAllowanceToggle}</Container>
+ </div>
+ </Container>
+ </div>
+);
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<UnlockWalletOnboardingStepProps> = () => (
+ <div className="flex items-center flex-column">
+ <div className="flex items-center flex-column">
+ <Container marginTop="15px" marginBottom="15px">
+ <img src="/images/metamask_icon.png" height="50px" width="50px" />
+ </Container>
+ <Text>Unlock your metamask extension to begin.</Text>
+ </div>
+ </div>
+);
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<WrapEthOnboardingStepProps> = ({
+ formattedEthBalanceIfExists,
+}) => {
+ if (formattedEthBalanceIfExists) {
+ return (
+ <div className="flex items-center flex-column">
+ <Text>Congrats you now have {formattedEthBalanceIfExists} in your wallet.</Text>
+ <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-center">
+ <div className="flex flex-column items-center">
+ <Text fontWeight={700}> 1 ETH </Text>
+ <img src="/images/eth_dollar.svg" height="75px" width="75x" />
+ </div>
+ <Container marginRight="25px" marginLeft="25px" position="relative" top="20px">
+ <Text fontSize="25px">
+ <i className="zmdi zmdi-long-arrow-right" />
+ </Text>
+ </Container>
+ <div className="flex flex-column items-center">
+ <Text fontWeight={700}> 1 WETH </Text>
+ <img src="/images/eth_token_erc20.svg" height="75px" width="75px" />
+ </div>
+ </Container>
+ </div>
+ );
+ } else {
+ return (
+ <div className="flex items-center flex-column">
+ <Text>
+ You need to convert some of your ETH into tradeable <b>Wrapped ETH (WETH)</b>.
+ </Text>
+ <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-center">
+ <div className="flex flex-column items-center">
+ <Text fontWeight={700}> 1 ETH </Text>
+ <img src="/images/eth_dollar.svg" height="75px" width="75x" />
+ </div>
+ <Container marginRight="25px" marginLeft="25px" position="relative" top="20px">
+ <Text fontSize="36px">=</Text>
+ </Container>
+ <div className="flex flex-column items-center">
+ <Text fontWeight={700}> 1 WETH </Text>
+ <img src="/images/eth_token_erc20.svg" height="75px" width="75px" />
+ </div>
+ </Container>
+ <Text>
+ Think of it like the coin version of a paper note. It has the same value, but some machines only
+ take coins.
+ </Text>
+ <Text>
+ Click
+ <Container display="inline-block" marginLeft="10px" marginRight="10px">
+ <IconButton
+ iconName="zmdi-long-arrow-down"
+ color={colors.mediumBlue}
+ labelText="wrap"
+ display="inline-flex"
+ />
+ </Container>
+ to wrap your ETH.
+ </Text>
+ </div>
+ );
+ }
+};
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 5170bf1e1..debebb47c 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -1,6 +1,7 @@
import { colors, constants as sharedConstants, 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';
@@ -24,6 +25,7 @@ import { TradeHistory } from 'ts/components/trade_history/trade_history';
import { Container } from 'ts/components/ui/container';
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';
@@ -102,6 +104,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: {
@@ -256,6 +259,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
translate={this.props.translate}
displayType={TopBarDisplayType.Expanded}
style={{ backgroundColor: colors.lightestGrey }}
+ maxWidth={LARGE_LAYOUT_MAX_WIDTH}
/>
<div id="portal" style={styles.body}>
<Switch>
@@ -355,8 +359,26 @@ export class Portal extends React.Component<PortalProps, PortalState> {
/>
<Container marginTop="15px">
<Island>
- {/** TODO: Implement real styles. */}
- <p onClick={this._startOnboarding.bind(this)}>Start onboarding flow.</p>
+ <Container
+ marginTop="30px"
+ marginBottom="30px"
+ marginLeft="30px"
+ marginRight="30px"
+ className="flex justify-around items-center"
+ >
+ <ActionAccountBalanceWallet
+ style={{ width: '30px', height: '30px' }}
+ color={colors.orange}
+ />
+ <Text
+ fontColor={colors.grey}
+ fontSize="16px"
+ center={true}
+ onClick={this._startOnboarding.bind(this)}
+ >
+ Learn how to set up your account
+ </Text>
+ </Container>
</Island>
</Container>
</div>
@@ -664,11 +686,11 @@ interface LargeLayoutProps {
}
const LargeLayout = (props: LargeLayoutProps) => {
return (
- <div className="sm-flex flex-center">
- <div className="flex-last px3">
+ <div className="mx-auto flex flex-center" style={{ maxWidth: LARGE_LAYOUT_MAX_WIDTH }}>
+ <div className="flex-last px2">
<div style={styles.leftColumn}>{props.left}</div>
</div>
- <div className="flex-auto px3" style={styles.scrollContainer}>
+ <div className="flex-auto px2" style={styles.scrollContainer}>
{props.right}
</div>
</div>
@@ -680,7 +702,7 @@ interface SmallLayoutProps {
}
const SmallLayout = (props: SmallLayoutProps) => {
return (
- <div className="sm-flex flex-center">
+ <div className="flex flex-center">
<div className="flex-auto px3" style={styles.scrollContainer}>
{props.content}
</div>
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 7ff8208b0..23860856b 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -6,6 +6,7 @@ import { analytics } from 'ts/utils/analytics';
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';
@@ -27,7 +28,6 @@ const styles: Styles = {
header: {
height: '50%',
width: '100%',
- objectFit: 'cover',
borderBottomRightRadius: 4,
borderBottomLeftRadius: 4,
borderTopRightRadius: 4,
@@ -59,25 +59,37 @@ 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<RelayerGridTileProps> = (props: RelayerGridTileProps) => {
const link = props.relayerInfo.appUrl || props.relayerInfo.url;
const topTokens = props.relayerInfo.topTokens;
const weeklyTxnVolume = props.relayerInfo.weeklyTxnVolume;
- let trackRelayerClick = (): void => undefined;
const networkName = sharedConstants.NETWORK_NAME_BY_ID[props.networkId];
const eventLabel = `${props.relayerInfo.name}-${networkName}`;
- trackRelayerClick = () => analytics.logEvent('Portal', 'Relayer Click', eventLabel);
+ const trackRelayerClick = () => analytics.logEvent('Portal', 'Relayer Click', eventLabel);
+ const headerImageUrl = props.relayerInfo.logoImgUrl;
+ const headerBackgroundColor =
+ !_.isUndefined(headerImageUrl) && !_.isUndefined(props.relayerInfo.primaryColor)
+ ? props.relayerInfo.primaryColor
+ : FALLBACK_PRIMARY_COLOR;
return (
<Island style={styles.root} Component={GridTile}>
<div style={styles.innerDiv}>
<a href={link} target="_blank" style={{ textDecoration: 'none' }} onClick={trackRelayerClick}>
- <ImgWithFallback
- src={props.relayerInfo.headerImgUrl}
- fallbackSrc={FALLBACK_IMG_SRC}
- style={styles.header}
- />
+ <div
+ className="flex items-center"
+ style={{ ...styles.header, backgroundColor: headerBackgroundColor }}
+ >
+ <Image
+ className="mx-auto"
+ src={props.relayerInfo.logoImgUrl}
+ fallbackSrc={FALLBACK_IMG_SRC}
+ height={RELAYER_ICON_HEIGHT}
+ />
+ </div>
</a>
<div style={styles.body}>
<div className="py1" style={styles.relayerNameLabel}>
@@ -113,32 +125,3 @@ const Section = (props: SectionProps) => {
};
const NoContent = () => <div style={styles.subLabel}>{NO_CONTENT_MESSAGE}</div>;
-
-interface ImgWithFallbackProps {
- src?: string;
- fallbackSrc: string;
- style: React.CSSProperties;
-}
-interface ImgWithFallbackState {
- imageLoadFailed: boolean;
-}
-class ImgWithFallback extends React.Component<ImgWithFallbackProps, ImgWithFallbackState> {
- constructor(props: ImgWithFallbackProps) {
- super(props);
- this.state = {
- imageLoadFailed: false,
- };
- }
- public render(): React.ReactNode {
- if (this.state.imageLoadFailed || _.isUndefined(this.props.src)) {
- return <img src={this.props.fallbackSrc} style={this.props.style} />;
- } else {
- return <img src={this.props.src} onError={this._onError.bind(this)} style={this.props.style} />;
- }
- }
- private _onError(): void {
- this.setState({
- imageLoadFailed: true,
- });
- }
-}
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index 3c5761bcd..d565eb608 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -37,9 +37,9 @@ const styles: Styles = {
};
const CELL_HEIGHT = 290;
-const NUMBER_OF_COLUMNS_LARGE = 4;
-const NUMBER_OF_COLUMNS_MEDIUM = 3;
-const NUMBER_OF_COLUMNS_SMALL = 1;
+const NUMBER_OF_COLUMNS_LARGE = 3;
+const NUMBER_OF_COLUMNS_MEDIUM = 2;
+const NUMBER_OF_COLUMNS_SMALL = 2;
const GRID_PADDING = 20;
export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerIndexState> {
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<TopBarProps, TopBarState> {
const shouldShowPortalV2Drawer = this._isViewingPortal() && utils.shouldShowPortalV2();
return (
<div style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style, ...{ height } }} className="pb1">
- <div className={parentClassNames}>
+ <div className={parentClassNames} style={{ maxWidth: this.props.maxWidth }}>
<div className="col col-2 sm-pl1 md-pl2 lg-pl0" style={{ paddingTop: 15 }}>
<Link to={`${WebsitePaths.Home}`} className="text-decoration-none">
<img src={logoUrl} height="30" />
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index 1f88297de..cb542a386 100644
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -1,5 +1,5 @@
import { colors } from '@0xproject/react-shared';
-import { darken } from 'polished';
+import { darken, grayscale } from 'polished';
import * as React from 'react';
import { styled } from 'ts/style/theme';
@@ -12,32 +12,34 @@ export interface ButtonProps {
borderColor?: string;
width?: string;
type?: string;
+ isDisabled?: boolean;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
}
-const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, onClick, type, className }) => (
- <button type={type} className={className} onClick={onClick}>
+const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
+ <button type={type} className={className} onClick={isDisabled ? undefined : onClick}>
{children}
</button>
);
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..1776345da 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -14,8 +14,15 @@ export interface ContainerProps {
backgroundColor?: string;
borderRadius?: StringOrNum;
maxWidth?: StringOrNum;
+ width?: StringOrNum;
isHidden?: boolean;
className?: string;
+ position?: 'absolute' | 'fixed' | 'relative' | 'unset';
+ display?: 'inline-block' | 'block' | 'inline-flex' | 'inline';
+ top?: string;
+ left?: string;
+ right?: string;
+ bottom?: string;
}
export const Container: React.StatelessComponent<ContainerProps> = ({ children, className, isHidden, ...style }) => {
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<IconButtonProps, IconButtonState> {
public static defaultProps: Partial<IconButtonProps> = {
- onClick: _.noop,
labelText: '',
color: colors.mediumBlue,
};
@@ -26,8 +26,9 @@ export class IconButton extends React.Component<IconButtonProps, IconButtonState
public render(): React.ReactNode {
const styles: Styles = {
root: {
- cursor: 'pointer',
- opacity: this.state.isHovering ? 0.5 : 1,
+ cursor: this.props.onClick ? 'pointer' : 'undefined',
+ opacity: this.state.isHovering && this.props.onClick ? 0.5 : 1,
+ display: this.props.display,
},
icon: {
color: this.props.color,
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<ImageProps, ImageState> {
+ 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 (
+ <img
+ className={this.props.className}
+ onError={this._onError.bind(this)}
+ src={src}
+ height={this.props.height}
+ />
+ );
+ }
+ private _onError(): void {
+ this.setState({
+ imageLoadFailed: true,
+ });
+ }
+}
diff --git a/packages/website/ts/components/ui/pointer.tsx b/packages/website/ts/components/ui/pointer.tsx
new file mode 100644
index 000000000..448786bb4
--- /dev/null
+++ b/packages/website/ts/components/ui/pointer.tsx
@@ -0,0 +1,67 @@
+import { colors } from '@0xproject/react-shared';
+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<PointerProps> = props => <div {...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';
diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index 7e47f1d09..1e2a123b7 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<TextProps> = ({ children, className, Tag }) => (
- <Tag className={className}>{children}</Tag>
+const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => (
+ <Tag className={className} onClick={onClick}>
+ {children}
+ </Tag>
);
export const Text = styled(PlainText)`
@@ -28,14 +32,31 @@ 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,
- fontSize: '14px',
+ fontColor: colors.black,
+ fontSize: '15px',
+ lineHeight: '1.5em',
Tag: 'div',
};
Text.displayName = 'Text';
+
+export const Title: React.StatelessComponent<TextProps> = props => <Text {...props} />;
+
+Title.defaultProps = {
+ Tag: 'h2',
+ fontSize: '20px',
+ fontWeight: 600,
+ fontColor: colors.black,
+};
+
+Title.displayName = 'Title';
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index fc5e45248..8c8d74e58 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -131,7 +131,6 @@ const styles: Styles = {
const ETHER_ICON_PATH = '/images/ether.png';
const ICON_DIMENSION = 28;
-const TOKEN_AMOUNT_DISPLAY_PRECISION = 5;
const BODY_ITEM_KEY = 'BODY';
const HEADER_ITEM_KEY = 'HEADER';
const FOOTER_ITEM_KEY = 'FOOTER';
@@ -445,10 +444,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
</PlaceHolder>
);
} 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 <div style={styles.amountLabel}>{result}</div>;
}
}
diff --git a/packages/website/ts/containers/zero_ex_js_documentation.ts b/packages/website/ts/containers/zero_ex_js_documentation.ts
index a8890a07a..bd0d1732a 100644
--- a/packages/website/ts/containers/zero_ex_js_documentation.ts
+++ b/packages/website/ts/containers/zero_ex_js_documentation.ts
@@ -173,6 +173,7 @@ const docsInfoConfig: DocsInfoConfig = {
'OrderStateInvalid',
'OrderState',
'OrderStateWatcherConfig',
+ 'OrderWatcherConfig',
'FilterObject',
'OrderRelevantState',
'JSONRPCRequestPayload',
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 24e86a901..d00154652 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -519,6 +519,8 @@ export interface WebsiteBackendRelayerInfo {
url: string;
appUrl?: string;
headerImgUrl?: string;
+ logoImgUrl?: string;
+ primaryColor?: string;
topTokens: WebsiteBackendTokenInfo[];
}
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index d281c5738..25670ef27 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -6,6 +6,7 @@ export const constants = {
ETHER_TOKEN_SYMBOL: 'WETH',
ZRX_TOKEN_SYMBOL: 'ZRX',
ETHER_SYMBOL: 'ETH',
+ TOKEN_AMOUNT_DISPLAY_PRECISION: 5,
GENESIS_ORDER_BLOCK_BY_NETWORK_ID: {
1: 4145578,
42: 3117574,
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index fdee264b2..414361c1b 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -3,6 +3,7 @@ import { OrderError } from '@0xproject/order-utils';
import { constants as sharedConstants, Networks } from '@0xproject/react-shared';
import { ECSignature, Provider } from '@0xproject/types';
import { BigNumber } from '@0xproject/utils';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
import deepEqual = require('deep-equal');
import * as _ from 'lodash';
import * as moment from 'moment';
@@ -17,6 +18,7 @@ import {
SideToAssetToken,
Token,
TokenByAddress,
+ TokenState,
} from 'ts/types';
import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
@@ -332,4 +334,13 @@ export const utils = {
const token = _.find(tokens, { symbol });
return token;
},
+ getFormattedAmountFromToken(token: Token, tokenState: TokenState): string {
+ return utils.getFormattedAmount(tokenState.balance, token.decimals, token.symbol);
+ },
+ getFormattedAmount(amount: BigNumber, decimals: number, symbol: string): string {
+ const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
+ const precision = Math.min(constants.TOKEN_AMOUNT_DISPLAY_PRECISION, unitAmount.decimalPlaces());
+ const formattedAmount = unitAmount.toFixed(precision);
+ return `${formattedAmount} ${symbol}`;
+ },
};