ReactNode as default for formatters, and show bold dash

1 files changed, 16 insertions, 4 deletions

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