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
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; 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)) { 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 => {

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

@@ -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;
} }