aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-06-16 09:02:33 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-06-16 09:02:46 +0800
commit0cf99271328a0bee0730a33659fe30aa426c59da (patch)
treeb43aab0830f07095790fa81be52a1ec8f59d24bb /packages/website/ts/components
parent5993125cc7d5129aead37a06663741d42ff0189e (diff)
downloaddexon-sol-tools-0cf99271328a0bee0730a33659fe30aa426c59da.tar
dexon-sol-tools-0cf99271328a0bee0730a33659fe30aa426c59da.tar.gz
dexon-sol-tools-0cf99271328a0bee0730a33659fe30aa426c59da.tar.bz2
dexon-sol-tools-0cf99271328a0bee0730a33659fe30aa426c59da.tar.lz
dexon-sol-tools-0cf99271328a0bee0730a33659fe30aa426c59da.tar.xz
dexon-sol-tools-0cf99271328a0bee0730a33659fe30aa426c59da.tar.zst
dexon-sol-tools-0cf99271328a0bee0730a33659fe30aa426c59da.zip
Add all steps to their own file
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx18
-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/portal_onboarding_flow.tsx91
-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/ui/container.tsx1
-rw-r--r--packages/website/ts/components/ui/icon_button.tsx9
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx6
9 files changed, 184 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>;
}
}