ReactNode as default for formatters, and show bold dash
This commit is contained in:
parent
6cf8d57aee
commit
01b98c3ed0
@ -16,18 +16,30 @@ export interface InstantHeadingProps {
|
|||||||
quoteState: AsyncProcessState;
|
quoteState: AsyncProcessState;
|
||||||
}
|
}
|
||||||
|
|
||||||
const displaytotalEthBaseAmount = ({ selectedAssetAmount, totalEthBaseAmount }: InstantHeadingProps): string => {
|
const Placeholder = () => (
|
||||||
|
<Text fontWeight="bold" fontColor={ColorOption.white}>
|
||||||
|
—
|
||||||
|
</Text>
|
||||||
|
);
|
||||||
|
const displaytotalEthBaseAmount = ({
|
||||||
|
selectedAssetAmount,
|
||||||
|
totalEthBaseAmount,
|
||||||
|
}: InstantHeadingProps): React.ReactNode => {
|
||||||
if (_.isUndefined(selectedAssetAmount)) {
|
if (_.isUndefined(selectedAssetAmount)) {
|
||||||
return '0 ETH';
|
return '0 ETH';
|
||||||
}
|
}
|
||||||
return format.ethBaseAmount(totalEthBaseAmount, 4, '-');
|
return format.ethBaseAmount(totalEthBaseAmount, 4, <Placeholder />);
|
||||||
};
|
};
|
||||||
|
|
||||||
const displayUsdAmount = ({ totalEthBaseAmount, selectedAssetAmount, ethUsdPrice }: InstantHeadingProps): string => {
|
const displayUsdAmount = ({
|
||||||
|
totalEthBaseAmount,
|
||||||
|
selectedAssetAmount,
|
||||||
|
ethUsdPrice,
|
||||||
|
}: InstantHeadingProps): React.ReactNode => {
|
||||||
if (_.isUndefined(selectedAssetAmount)) {
|
if (_.isUndefined(selectedAssetAmount)) {
|
||||||
return '$0.00';
|
return '$0.00';
|
||||||
}
|
}
|
||||||
return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, '-');
|
return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, <Placeholder />);
|
||||||
};
|
};
|
||||||
|
|
||||||
const loadingOrAmount = (quoteState: AsyncProcessState, amount: string): React.ReactNode => {
|
const loadingOrAmount = (quoteState: AsyncProcessState, amount: string): React.ReactNode => {
|
||||||
|
@ -5,14 +5,22 @@ import * as _ from 'lodash';
|
|||||||
import { ethDecimals } from '../constants';
|
import { ethDecimals } from '../constants';
|
||||||
|
|
||||||
export const format = {
|
export const format = {
|
||||||
ethBaseAmount: (ethBaseAmount?: BigNumber, decimalPlaces: number = 4, defaultText: string = '0 ETH'): string => {
|
ethBaseAmount: (
|
||||||
|
ethBaseAmount?: BigNumber,
|
||||||
|
decimalPlaces: number = 4,
|
||||||
|
defaultText: React.ReactNode = '0 ETH',
|
||||||
|
): React.ReactNode => {
|
||||||
if (_.isUndefined(ethBaseAmount)) {
|
if (_.isUndefined(ethBaseAmount)) {
|
||||||
return defaultText;
|
return defaultText;
|
||||||
}
|
}
|
||||||
const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseAmount, ethDecimals);
|
const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseAmount, ethDecimals);
|
||||||
return format.ethUnitAmount(ethUnitAmount, decimalPlaces);
|
return format.ethUnitAmount(ethUnitAmount, decimalPlaces);
|
||||||
},
|
},
|
||||||
ethUnitAmount: (ethUnitAmount?: BigNumber, decimalPlaces: number = 4, defaultText: string = '0 ETH'): string => {
|
ethUnitAmount: (
|
||||||
|
ethUnitAmount?: BigNumber,
|
||||||
|
decimalPlaces: number = 4,
|
||||||
|
defaultText: React.ReactNode = '0 ETH',
|
||||||
|
): React.ReactNode => {
|
||||||
if (_.isUndefined(ethUnitAmount)) {
|
if (_.isUndefined(ethUnitAmount)) {
|
||||||
return defaultText;
|
return defaultText;
|
||||||
}
|
}
|
||||||
@ -23,8 +31,8 @@ export const format = {
|
|||||||
ethBaseAmount?: BigNumber,
|
ethBaseAmount?: BigNumber,
|
||||||
ethUsdPrice?: BigNumber,
|
ethUsdPrice?: BigNumber,
|
||||||
decimalPlaces: number = 2,
|
decimalPlaces: number = 2,
|
||||||
defaultText: string = '$0.00',
|
defaultText: React.ReactNode = '$0.00',
|
||||||
): string => {
|
): React.ReactNode => {
|
||||||
if (_.isUndefined(ethBaseAmount) || _.isUndefined(ethUsdPrice)) {
|
if (_.isUndefined(ethBaseAmount) || _.isUndefined(ethUsdPrice)) {
|
||||||
return defaultText;
|
return defaultText;
|
||||||
}
|
}
|
||||||
@ -35,8 +43,8 @@ export const format = {
|
|||||||
ethUnitAmount?: BigNumber,
|
ethUnitAmount?: BigNumber,
|
||||||
ethUsdPrice?: BigNumber,
|
ethUsdPrice?: BigNumber,
|
||||||
decimalPlaces: number = 2,
|
decimalPlaces: number = 2,
|
||||||
defaultText: string = '$0.00',
|
defaultText: React.ReactNode = '$0.00',
|
||||||
): string => {
|
): React.ReactNode => {
|
||||||
if (_.isUndefined(ethUnitAmount) || _.isUndefined(ethUsdPrice)) {
|
if (_.isUndefined(ethUnitAmount) || _.isUndefined(ethUsdPrice)) {
|
||||||
return defaultText;
|
return defaultText;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user