aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx14
-rw-r--r--packages/website/ts/components/onboarding/onboarding_card.tsx112
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx24
-rw-r--r--packages/website/ts/components/onboarding/onboarding_tooltip.tsx13
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx21
-rw-r--r--packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx12
-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.tsx10
-rw-r--r--packages/website/ts/utils/utils.ts6
11 files changed, 165 insertions, 107 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/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx
index ba5b3d6ea..e1b0f304b 100644
--- a/packages/website/ts/components/onboarding/onboarding_card.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_card.tsx
@@ -12,6 +12,7 @@ export type ContinueButtonDisplay = 'enabled' | 'disabled';
export interface OnboardingCardProps {
title?: string;
+ shouldCenterTitle?: boolean;
content: React.ReactNode;
isLastStep: boolean;
onClose: () => void;
@@ -23,10 +24,13 @@ export interface OnboardingCardProps {
shouldHideNextButton?: boolean;
continueButtonText?: string;
borderRadius?: string;
+ // Used for super-custom content.
+ shouldRemoveExtraSpacing?: boolean;
}
export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
title,
+ shouldCenterTitle,
content,
continueButtonDisplay,
continueButtonText,
@@ -37,55 +41,75 @@ export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
shouldHideBackButton,
shouldHideNextButton,
borderRadius,
-}) => (
- <Island borderRadius={borderRadius}>
- <Container paddingRight="30px" paddingLeft="30px" 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>
+ shouldRemoveExtraSpacing,
+}) => {
+ const padding = shouldRemoveExtraSpacing
+ ? {}
+ : {
+ paddingRight: '30px',
+ paddingLeft: '30px',
+ paddingTop: '15px',
+ paddingBottom: '15px',
+ };
+ const closeIconPositioning = shouldRemoveExtraSpacing
+ ? { right: '15px', bottom: '3px' }
+ : { bottom: '20px', left: '15px' };
+ return (
+ <Island borderRadius={borderRadius}>
+ <Container {...padding}>
+ <div className="flex flex-column">
+ <Container className="flex justify-between">
+ <Container width="100%">
+ <Title center={shouldCenterTitle}>{title}</Title>
+ </Container>
+ <Container position="relative" {...closeIconPositioning}>
+ <IconButton color={colors.grey} iconName="zmdi-close" onClick={onClose}>
+ Close
+ </IconButton>
+ </Container>
</Container>
+ <Container marginBottom={shouldRemoveExtraSpacing ? undefined : '15px'}>
+ <Text>{content}</Text>
+ </Container>
+ {continueButtonDisplay && (
+ <Button
+ isDisabled={continueButtonDisplay === 'disabled'}
+ onClick={!_.isUndefined(onContinueButtonClick) ? onContinueButtonClick : onClickNext}
+ fontColor={colors.white}
+ fontSize="15px"
+ backgroundColor={colors.mediumBlue}
+ >
+ {continueButtonText}
+ </Button>
+ )}
+ {!(shouldHideBackButton && shouldHideNextButton) && (
+ <Container className="clearfix" marginTop="15px">
+ <div className="left">
+ {!shouldHideBackButton && (
+ <Text fontColor={colors.grey} onClick={onClickBack}>
+ Back
+ </Text>
+ )}
+ </div>
+ <div className="right">
+ {!shouldHideNextButton && (
+ <Text fontColor={colors.grey} onClick={onClickNext}>
+ Skip
+ </Text>
+ )}
+ </div>
+ </Container>
+ )}
</div>
- <Container marginBottom="15px">
- <Text>{content}</Text>
- </Container>
- {continueButtonDisplay && (
- <Button
- isDisabled={continueButtonDisplay === 'disabled'}
- onClick={!_.isUndefined(onContinueButtonClick) ? onContinueButtonClick : onClickNext}
- fontColor={colors.white}
- fontSize="15px"
- backgroundColor={colors.mediumBlue}
- >
- {continueButtonText}
- </Button>
- )}
- <Container className="clearfix" marginTop="15px">
- <div className="left">
- {!shouldHideBackButton && (
- <Text fontColor={colors.grey} onClick={onClickBack}>
- Back
- </Text>
- )}
- </div>
- <div className="right">
- {!shouldHideNextButton && (
- <Text fontColor={colors.grey} onClick={onClickNext}>
- Skip
- </Text>
- )}
- </div>
- </Container>
- </div>
- </Container>
- </Island>
-);
+ </Container>
+ </Island>
+ );
+};
OnboardingCard.defaultProps = {
continueButtonText: 'Continue',
+ shouldCenterTitle: false,
+ shouldRemoveExtraSpacing: false,
};
OnboardingCard.displayName = 'OnboardingCard';
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 46dc897bd..91d5f2476 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -2,11 +2,14 @@ import * as React from 'react';
import { Placement, Popper, PopperChildrenProps } from 'react-popper';
import { OnboardingCard } from 'ts/components/onboarding/onboarding_card';
-import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip';
+import {
+ ContinueButtonDisplay,
+ OnboardingTooltip,
+ TooltipPointerDisplay,
+} from 'ts/components/onboarding/onboarding_tooltip';
import { Animation } from 'ts/components/ui/animation';
import { Container } from 'ts/components/ui/container';
import { Overlay } from 'ts/components/ui/overlay';
-import { PointerDirection } from 'ts/components/ui/pointer';
import { zIndex } from 'ts/style/z_index';
export interface FixedPositionSettings {
@@ -15,7 +18,7 @@ export interface FixedPositionSettings {
bottom?: string;
left?: string;
right?: string;
- pointerDirection?: PointerDirection;
+ tooltipPointerDisplay?: TooltipPointerDisplay;
}
export interface TargetPositionSettings {
@@ -28,12 +31,15 @@ export interface Step {
// Provide either a CSS selector, or fixed position settings. Only applies to desktop.
position: TargetPositionSettings | FixedPositionSettings;
title?: string;
+ shouldCenterTitle?: boolean;
content: React.ReactNode;
shouldHideBackButton?: boolean;
shouldHideNextButton?: boolean;
continueButtonDisplay?: ContinueButtonDisplay;
continueButtonText?: string;
onContinueButtonClick?: () => void;
+ // Only used for very custom steps.
+ shouldRemoveExtraSpacing?: boolean;
}
export interface OnboardingFlowProps {
@@ -69,7 +75,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
</Popper>
);
} else if (currentStep.position.type === 'fixed') {
- const { top, right, bottom, left, pointerDirection } = currentStep.position;
+ const { top, right, bottom, left, tooltipPointerDisplay } = currentStep.position;
onboardingElement = (
<Container
position="fixed"
@@ -79,7 +85,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
bottom={bottom}
left={left}
>
- {this._renderToolTip(pointerDirection)}
+ {this._renderToolTip(tooltipPointerDisplay)}
</Container>
);
}
@@ -103,7 +109,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
</div>
);
}
- private _renderToolTip(pointerDirection?: PointerDirection): React.ReactNode {
+ private _renderToolTip(tooltipPointerDisplay?: TooltipPointerDisplay): React.ReactNode {
const { steps, stepIndex } = this.props;
const step = steps[stepIndex];
const isLastStep = steps.length - 1 === stepIndex;
@@ -111,6 +117,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
<Container marginLeft="30px" width="400px">
<OnboardingTooltip
title={step.title}
+ shouldCenterTitle={step.shouldCenterTitle}
content={step.content}
isLastStep={isLastStep}
shouldHideBackButton={step.shouldHideBackButton}
@@ -121,7 +128,8 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
continueButtonDisplay={step.continueButtonDisplay}
continueButtonText={step.continueButtonText}
onContinueButtonClick={step.onContinueButtonClick}
- pointerDirection={pointerDirection}
+ pointerDisplay={tooltipPointerDisplay}
+ shouldRemoveExtraSpacing={step.shouldRemoveExtraSpacing}
/>
</Container>
);
@@ -135,6 +143,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
<Container position="relative" zIndex={1}>
<OnboardingCard
title={step.title}
+ shouldCenterTitle={step.shouldCenterTitle}
content={step.content}
isLastStep={isLastStep}
shouldHideBackButton={step.shouldHideBackButton}
@@ -146,6 +155,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
continueButtonText={step.continueButtonText}
onContinueButtonClick={step.onContinueButtonClick}
borderRadius="10px 10px 0px 0px"
+ shouldRemoveExtraSpacing={step.shouldRemoveExtraSpacing}
/>
</Container>
);
diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
index d8065625d..15d47908d 100644
--- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
@@ -4,22 +4,27 @@ import { OnboardingCard, OnboardingCardProps } from 'ts/components/onboarding/on
import { Pointer, PointerDirection } from 'ts/components/ui/pointer';
export type ContinueButtonDisplay = 'enabled' | 'disabled';
+export type TooltipPointerDisplay = PointerDirection | 'none';
export interface OnboardingTooltipProps extends OnboardingCardProps {
className?: string;
- pointerDirection?: PointerDirection;
+ pointerDisplay?: TooltipPointerDisplay;
}
export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = props => {
- const { pointerDirection, className, ...cardProps } = props;
+ const { pointerDisplay, className, ...cardProps } = props;
+ const card = <OnboardingCard {...cardProps} />;
+ if (pointerDisplay === 'none') {
+ return card;
+ }
return (
- <Pointer className={className} direction={pointerDirection}>
+ <Pointer className={className} direction={pointerDisplay}>
<OnboardingCard {...cardProps} />
</Pointer>
);
};
OnboardingTooltip.defaultProps = {
- pointerDirection: 'left',
+ pointerDisplay: 'left',
};
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 503f2163d..20a8f0a32 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -91,9 +91,9 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
};
const underMetamaskExtension: FixedPositionSettings = {
type: 'fixed',
- top: '30px',
+ top: '10px',
right: '10px',
- pointerDirection: 'top',
+ tooltipPointerDisplay: 'none',
};
const steps: Step[] = [
{
@@ -105,10 +105,12 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
},
{
position: underMetamaskExtension,
- title: '0x Ecosystem Setup',
+ title: 'Please Unlock Metamask...',
content: <UnlockWalletOnboardingStep />,
shouldHideBackButton: true,
shouldHideNextButton: true,
+ shouldCenterTitle: true,
+ shouldRemoveExtraSpacing: true,
},
{
position: nextToWalletPosition,
@@ -140,13 +142,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 +183,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/unlock_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
index 4ed7137d4..358141520 100644
--- a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
@@ -1,16 +1,8 @@
import * as React from 'react';
-import { Container } from 'ts/components/ui/container';
-import { Text } from 'ts/components/ui/text';
+import { Image } from 'ts/components/ui/image';
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 center={true}>Unlock your MetaMask extension to get started.</Text>
- </div>
- </div>
+ <Image src="/images/unlock-mm.png" />
);
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 1c7dafca0..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';
@@ -269,7 +270,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
position: 'relative',
overflowY: this.state.isHoveringSidebar ? 'scroll' : 'hidden',
marginRight: this.state.isHoveringSidebar ? 0 : 4,
- // TODO: make this completely responsive
+ minHeight: '250px',
maxHeight: !utils.isMobileWidth(this.props.screenWidth) ? 'calc(90vh - 300px)' : undefined,
};
}
@@ -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 d50e9c619..6af7f5613 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);