aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-07-07 05:09:36 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-07-07 05:21:30 +0800
commit9669a4d1216b7d22107580daf3e2bff464eb2ade (patch)
treee408ae8281b8fc09ac253b7547027639e5f2943c
parent7418926ebb156165f328a89cf58ec758737ee999 (diff)
downloaddexon-sol-tools-9669a4d1216b7d22107580daf3e2bff464eb2ade.tar
dexon-sol-tools-9669a4d1216b7d22107580daf3e2bff464eb2ade.tar.gz
dexon-sol-tools-9669a4d1216b7d22107580daf3e2bff464eb2ade.tar.bz2
dexon-sol-tools-9669a4d1216b7d22107580daf3e2bff464eb2ade.tar.lz
dexon-sol-tools-9669a4d1216b7d22107580daf3e2bff464eb2ade.tar.xz
dexon-sol-tools-9669a4d1216b7d22107580daf3e2bff464eb2ade.tar.zst
dexon-sol-tools-9669a4d1216b7d22107580daf3e2bff464eb2ade.zip
Create Balance component and make token symbols smaller than token amounts
-rw-r--r--packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx14
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx13
-rw-r--r--packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx19
-rw-r--r--packages/website/ts/components/ui/balance.tsx27
-rw-r--r--packages/website/ts/components/ui/container.tsx14
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx8
-rw-r--r--packages/website/ts/utils/utils.ts6
7 files changed, 63 insertions, 38 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
index bccdc0c18..ca71fcd50 100644
--- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
@@ -1,10 +1,10 @@
import { BigNumber } from '@0xproject/utils';
import * as React from 'react';
+import { Balance } from 'ts/components/ui/balance';
import { Container } from 'ts/components/ui/container';
import { Image } from 'ts/components/ui/image';
import { Text } from 'ts/components/ui/text';
import { constants } from 'ts/utils/constants';
-import { utils } from 'ts/utils/utils';
export interface AddEthOnboardingStepProps {
userEthBalanceInWei: BigNumber;
@@ -15,13 +15,11 @@ export const AddEthOnboardingStep: React.StatelessComponent<AddEthOnboardingStep
<div className="flex items-center flex-column">
<Text>
Great! Looks like you already have{' '}
- <b>
- {utils.getFormattedAmount(
- props.userEthBalanceInWei,
- constants.DECIMAL_PLACES_ETH,
- constants.ETHER_SYMBOL,
- )}{' '}
- </b>
+ <Balance
+ amount={props.userEthBalanceInWei}
+ decimals={constants.DECIMAL_PLACES_ETH}
+ symbol={constants.ETHER_SYMBOL}
+ />{' '}
in your wallet.
</Text>
<Container marginTop="15px" marginBottom="15px">
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 503f2163d..a79cf1ee1 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -140,13 +140,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
{
position: nextToWalletPosition,
title: 'Step 2: Wrap ETH',
- content: (
- <WrapEthOnboardingStep3
- formattedWethBalanceIfExists={
- this._userHasVisibleWeth() ? this._getFormattedWethBalance() : undefined
- }
- />
- ),
+ content: <WrapEthOnboardingStep3 wethAmount={this._getWethBalance()} />,
continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
},
{
@@ -187,11 +181,6 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
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);
}
diff --git a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
index 4d336c80f..e4332de75 100644
--- a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
@@ -1,8 +1,11 @@
import { colors } from '@0xproject/react-shared';
+import { BigNumber } from '@0xproject/utils';
import * as React from 'react';
+import { Balance } from 'ts/components/ui/balance';
import { Container } from 'ts/components/ui/container';
import { IconButton } from 'ts/components/ui/icon_button';
import { Text } from 'ts/components/ui/text';
+import { constants } from 'ts/utils/constants';
export interface WrapEthOnboardingStep1Props {}
@@ -51,16 +54,20 @@ export const WrapEthOnboardingStep2: React.StatelessComponent<WrapEthOnboardingS
);
export interface WrapEthOnboardingStep3Props {
- formattedWethBalanceIfExists?: string;
+ wethAmount: BigNumber;
}
-export const WrapEthOnboardingStep3: React.StatelessComponent<WrapEthOnboardingStep3Props> = ({
- formattedWethBalanceIfExists,
-}) => (
+export const WrapEthOnboardingStep3: React.StatelessComponent<WrapEthOnboardingStep3Props> = ({ wethAmount }) => (
<div className="flex items-center flex-column">
<Text>
- You have <b>{formattedWethBalanceIfExists || '0 WETH'}</b> in your wallet.
- {formattedWethBalanceIfExists && ' Great!'}
+ You have{' '}
+ <Balance
+ amount={wethAmount}
+ decimals={constants.DECIMAL_PLACES_ETH}
+ symbol={constants.ETHER_TOKEN_SYMBOL}
+ />{' '}
+ in your wallet.
+ {wethAmount.gt(0) && ' Great!'}
</Text>
<Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-center">
<div className="flex flex-column items-center">
diff --git a/packages/website/ts/components/ui/balance.tsx b/packages/website/ts/components/ui/balance.tsx
new file mode 100644
index 000000000..9e5a256b6
--- /dev/null
+++ b/packages/website/ts/components/ui/balance.tsx
@@ -0,0 +1,27 @@
+import { BigNumber } from '@0xproject/utils';
+import * as React from 'react';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { utils } from 'ts/utils/utils';
+
+export interface BalanceProps {
+ amount: BigNumber;
+ decimals: number;
+ symbol: string;
+}
+
+export const Balance: React.StatelessComponent<BalanceProps> = ({ amount, decimals, symbol }) => {
+ const formattedAmout = utils.getFormattedAmount(amount, decimals);
+ return (
+ <span>
+ <Text Tag="span" fontSize="16px" fontWeight="700" lineHeight="1em">
+ {formattedAmout}
+ </Text>
+ <Container marginLeft="0.3em" Tag="span">
+ <Text Tag="span" fontSize="12px" fontWeight="700" lineHeight="1em">
+ {symbol}
+ </Text>
+ </Container>
+ </span>
+ );
+};
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index edbf8814b..427cc6cc7 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
type StringOrNum = string | number;
+export type ContainerTag = 'div' | 'span';
+
export interface ContainerProps {
marginTop?: StringOrNum;
marginBottom?: StringOrNum;
@@ -28,15 +30,21 @@ export interface ContainerProps {
right?: string;
bottom?: string;
zIndex?: number;
+ Tag?: ContainerTag;
}
-export const Container: React.StatelessComponent<ContainerProps> = ({ children, className, isHidden, ...style }) => {
+export const Container: React.StatelessComponent<ContainerProps> = props => {
+ const { children, className, Tag, isHidden, ...style } = props;
const visibility = isHidden ? 'hidden' : undefined;
return (
- <div style={{ ...style, visibility }} className={className}>
+ <Tag style={{ ...style, visibility }} className={className}>
{children}
- </div>
+ </Tag>
);
};
+Container.defaultProps = {
+ Tag: 'div',
+};
+
Container.displayName = 'Container';
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index dca027a8a..6c1c495d7 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -8,6 +8,7 @@ import firstBy = require('thenby');
import { Blockchain } from 'ts/blockchain';
import { AccountConnection } from 'ts/components/ui/account_connection';
+import { Balance } from 'ts/components/ui/balance';
import { Container } from 'ts/components/ui/container';
import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down';
import { IconButton } from 'ts/components/ui/icon_button';
@@ -436,12 +437,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
</PlaceHolder>
);
} else {
- const result = utils.getFormattedAmount(amount, decimals, symbol);
- return (
- <Text fontSize="16px" fontWeight="bold" lineHeight="1em">
- {result}
- </Text>
- );
+ return <Balance amount={amount} decimals={decimals} symbol={symbol} />;
}
}
private _renderValue(
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index 623819fc9..6ab642f53 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -381,9 +381,9 @@ export const utils = {
return trackedTokens;
},
getFormattedAmountFromToken(token: Token, tokenState: TokenState): string {
- return utils.getFormattedAmount(tokenState.balance, token.decimals, token.symbol);
+ return utils.getFormattedAmount(tokenState.balance, token.decimals);
},
- getFormattedAmount(amount: BigNumber, decimals: number, symbol: string): string {
+ getFormattedAmount(amount: BigNumber, decimals: number): string {
const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
// if the unit amount is less than 1, show the natural number of decimal places with a max of 4
// if the unit amount is greater than or equal to 1, show only 2 decimal places
@@ -392,7 +392,7 @@ export const utils = {
: 2;
const format = `0,0.${_.repeat('0', precision)}`;
const formattedAmount = numeral(unitAmount).format(format);
- return `${formattedAmount} ${symbol}`;
+ return formattedAmount;
},
getUsdValueFormattedAmount(amount: BigNumber, decimals: number, price: BigNumber): string {
const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);