crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ReactNode as default for formatters, and show bold dash

Browse Source
This commit is contained in:
Steve Klebanoff 2018-10-17 16:46:01 -07:00
parent 6cf8d57aee
commit 01b98c3ed0
2 changed files with 30 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/instant/src/components/instant_heading.tsx
View File

@ -16,18 +16,30 @@ export interface InstantHeadingProps {
quoteState: AsyncProcessState;
}
const displaytotalEthBaseAmount = ({ selectedAssetAmount, totalEthBaseAmount }: InstantHeadingProps): string => {
const Placeholder = () => (
<Text fontWeight="bold" fontColor={ColorOption.white}>
&mdash;
</Text>
);
const displaytotalEthBaseAmount = ({
selectedAssetAmount,
totalEthBaseAmount,
}: InstantHeadingProps): React.ReactNode => {
if (_.isUndefined(selectedAssetAmount)) {
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)) {
return '$0.00';
}
return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, '-');
return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, <Placeholder />);
};
const loadingOrAmount = (quoteState: AsyncProcessState, amount: string): React.ReactNode => {

20
packages/instant/src/util/format.ts
View File

@ -5,14 +5,22 @@ import * as _ from 'lodash';
import { ethDecimals } from '../constants';
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)) {
return defaultText;
}
const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseAmount, ethDecimals);
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)) {
return defaultText;
}
@ -23,8 +31,8 @@ export const format = {
ethBaseAmount?: BigNumber,
ethUsdPrice?: BigNumber,
decimalPlaces: number = 2,
defaultText: string = '$0.00',
): string => {
defaultText: React.ReactNode = '$0.00',
): React.ReactNode => {
if (_.isUndefined(ethBaseAmount) || _.isUndefined(ethUsdPrice)) {
return defaultText;
}
@ -35,8 +43,8 @@ export const format = {
ethUnitAmount?: BigNumber,
ethUsdPrice?: BigNumber,
decimalPlaces: number = 2,
defaultText: string = '$0.00',
): string => {
defaultText: React.ReactNode = '$0.00',
): React.ReactNode => {
if (_.isUndefined(ethUnitAmount) || _.isUndefined(ethUsdPrice)) {
return defaultText;
}