diff options
Diffstat (limited to 'packages/website/ts')
11 files changed, 196 insertions, 71 deletions
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/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/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<PortalOnboardingFlowPr { target: '.wallet', title: '0x Ecosystem Setup', - content: ( - <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> - ), + content: <InstallWalletOnboardingStep />, placement: 'right', shouldHideBackButton: true, shouldHideNextButton: true, @@ -73,14 +61,7 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr { target: '.wallet', title: '0x Ecosystem Setup', - content: ( - <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> - ), + content: <UnlockWalletOnboardingStep />, placement: 'right', shouldHideBackButton: true, shouldHideNextButton: true, @@ -88,24 +69,7 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr { target: '.wallet', title: '0x Ecosystem Account Setup', - content: ( - <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> - ), + content: <IntroOnboardingStep />, placement: 'right', shouldHideBackButton: true, continueButtonDisplay: 'enabled', @@ -113,27 +77,22 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr { target: '.eth-row', title: 'Add ETH', - content: ( - <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> - ), + content: <AddEthOnboardingStep />, 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: ( + <WrapEthOnboardingStep + formattedEthBalanceIfExists={ + this._userHasVisibleWeth() ? this._getFormattedWethBalance() : undefined + } + /> + ), 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<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/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/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<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/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 4523b0ac9..3a6d9942d 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -124,7 +124,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'; @@ -438,10 +437,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/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}`; + }, }; |