From 01b98c3ed09429dac92a46446bb73c8596116d18 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Wed, 17 Oct 2018 16:46:01 -0700
Subject: ReactNode as default for formatters, and show bold dash

---
 packages/instant/src/components/instant_heading.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 848056800..73a419019 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -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 => {
-- 
cgit v1.2.3