How to use the @0x/web3-wrapper.Web3Wrapper.toUnitAmount function in @0x/web3-wrapper

public render(): React.ReactNode {
        const amount = this.props.amount
            ? Web3Wrapper.toUnitAmount(this.props.amount, this.props.token.decimals)
            : undefined;
        return (
            <div style="{this._getStyle()}">
                </div>

const localizeTokenAmount = (amount, token, rates) => {
  if (!_.isObject(token)) {
    return null;
  }

  const symbol = normalizeSymbol(token.symbol);
  const rate = _.get(rates, [symbol, 'USD']);

  if (!_.isNumber(rate)) {
    return null;
  }

  const bigNumber = new BigNumber(amount.toString());
  const unitAmount = Web3Wrapper.toUnitAmount(bigNumber, token.decimals);

  return unitAmount.times(rate).toNumber();
};

private _renderAmount(amount: BigNumber, decimals: number): React.ReactNode {
        const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
        return unitAmount.toNumber().toFixed(configs.AMOUNT_DISPLAY_PRECSION);
    }
    private _renderTokenName(token: Token): React.ReactNode {

const mapStateToProps = (state: State, _ownProps: EthAmountInputProps): ConnectedState => ({
    balance: Web3Wrapper.toUnitAmount(state.userEtherBalanceInWei, constants.DECIMAL_PLACES_ETH),
});

if (timestampMsRange !== undefined) {
                    const startMoment = moment(timestampMsRange.startTimestampMs);
                    const endMoment = moment(timestampMsRange.endTimestampMs);
                    dateRange = `${startMoment.format(DATE_FORMAT)}-${endMoment.format(DATE_FORMAT)}`;
                } else {
                    dateRange = '-';
                }
                const outdatedEtherToken = {
                    ...etherToken,
                    address: outdatedWETHIfExists.address,
                };
                const outdatedEtherTokenState = this.state.outdatedWETHStateByAddress[outdatedWETHIfExists.address];
                const isStateLoaded = outdatedEtherTokenState.isLoaded;
                const balanceInEthIfExists = isStateLoaded
                    ? Web3Wrapper.toUnitAmount(outdatedEtherTokenState.balance, constants.DECIMAL_PLACES_ETH).toFixed(
                          configs.AMOUNT_DISPLAY_PRECSION,
                      )
                    : undefined;
                const onConversionSuccessful = this._onOutdatedConversionSuccessfulAsync.bind(
                    this,
                    outdatedWETHIfExists.address,
                );
                const etherscanUrl = utils.getEtherScanLinkIfExists(
                    outdatedWETHIfExists.address,
                    this.props.networkId,
                    EtherscanLinkSuffixes.Address,
                );
                const tokenLabel = this._renderToken(dateRange, outdatedEtherToken.address, OUTDATED_WETH_ICON_PATH);
                return (
                    
                        
                            {this._renderTokenLink(tokenLabel, etherscanUrl)}

private _renderAmount(assetToken: AssetToken, token: Token): React.ReactNode {
        const unitAmount = Web3Wrapper.toUnitAmount(assetToken.amount, token.decimals);
        return (
            <div style="{{">
                {unitAmount.toNumber().toFixed(configs.AMOUNT_DISPLAY_PRECSION)} {token.symbol}
            </div>
        );
    }
}

private async _onConversionAmountSelectedAsync(direction: Side, value: BigNumber): Promise {
        this.setState({
            isEthConversionHappening: true,
        });
        this._toggleConversionDialog();
        const token = this.props.ethToken;
        try {
            if (direction === Side.Deposit) {
                await this.props.blockchain.convertEthToWrappedEthTokensAsync(token.address, value);
                const ethAmount = Web3Wrapper.toUnitAmount(value, constants.DECIMAL_PLACES_ETH);
                this.props.dispatcher.showFlashMessage(`Successfully wrapped ${ethAmount.toString()} ETH to WETH`);
            } else {
                await this.props.blockchain.convertWrappedEthTokensToEthAsync(token.address, value);
                const tokenAmount = Web3Wrapper.toUnitAmount(value, token.decimals);
                this.props.dispatcher.showFlashMessage(`Successfully unwrapped ${tokenAmount.toString()} WETH to ETH`);
            }
            if (!this.props.isOutdatedWrappedEther) {
                await this.props.refetchEthTokenStateAsync();
            }
            this.props.onConversionSuccessful();
        } catch (err) {
            const errMsg = `${err}`;
            if (_.includes(errMsg, BlockchainCallErrs.UserHasNoAssociatedAddresses)) {
                this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
            } else if (!utils.didUserDenyWeb3Request(errMsg)) {
                logUtils.log(`Unexpected error encountered: ${err}`);

private async _onMintTestTokensAsync(token: Token): Promise {
        try {
            await this.props.blockchain.mintTestTokensAsync(token);
            await this._refetchTokenStateAsync(token.address);
            const amount = Web3Wrapper.toUnitAmount(constants.MINT_AMOUNT, token.decimals);
            this.props.dispatcher.showFlashMessage(`Successfully minted ${amount.toString(10)} ${token.symbol}`);
            return true;
        } catch (err) {
            const errMsg = `${err}`;
            if (_.includes(errMsg, BlockchainCallErrs.UserHasNoAssociatedAddresses)) {
                this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
                return false;
            }
            if (utils.didUserDenyWeb3Request(errMsg)) {
                return false;
            }
            logUtils.log(`Unexpected error encountered: ${err}`);
            logUtils.log(err.stack);
            this.setState({
                errorType: BalanceErrs.MintingFailed,
            });

public render(): React.ReactNode {
        const etherToken = this._getEthToken();
        const wethBalance = Web3Wrapper.toUnitAmount(this.state.ethTokenState.balance, constants.DECIMAL_PLACES_ETH);
        const isBidirectional = true;
        const etherscanUrl = utils.getEtherScanLinkIfExists(
            etherToken.address,
            this.props.networkId,
            EtherscanLinkSuffixes.Address,
        );
        const tokenLabel = this._renderToken(
            'Wrapped Ether',
            etherToken.address,
            utils.getTokenIconUrl(etherToken.symbol),
        );
        const userEtherBalanceInEth =
            this.props.userEtherBalanceInWei !== undefined
                ? Web3Wrapper.toUnitAmount(this.props.userEtherBalanceInWei, constants.DECIMAL_PLACES_ETH)
                : undefined;
        const rootClassName = this.props.isFullWidth ? 'clearfix' : 'clearfix lg-px4 md-px4 sm-px2';

private _renderAmount(amount: BigNumber, symbol: string, decimals: number): React.ReactNode {
        const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
        return (
            <span>
                {unitAmount.toFixed(configs.AMOUNT_DISPLAY_PRECSION)} {symbol}
            </span>
        );
    }
}