frontend: modify fiat historical value placeholder in tx

Fiat historical value is shown in tx detail. If the transaction is
recent the value could be not available. The placeholder we used was
'---' which led to poorly readable results for incoming/outgoing txs
('+---' or '----'). Now, if the amount is not available the placeholder
is shown without the sign, which should be more readable.

In the future it would be nice to refactor the FiatConversion component
and limit the `sign` prop to '+' | '-'.

frontends/web/src/components/rates/rates.module.css

@@ -41,6 +41,10 @@
     right: 2px;
 }
 
+.notAvailable {
+    color: var(--color-default);
+}
+
 @media (max-width: 880px) {
     .fiatRow {
         bottom: 0;

frontends/web/src/components/rates/rates.tsx

@@ -99,6 +99,8 @@ interface ProvidedProps {
     unstyled?: boolean;
     skipUnit?: boolean;
     noAction?: boolean;
+    sign?: string;
+
 }
 
 type Props = ProvidedProps & SharedProps;
@@ -110,13 +112,15 @@ function Conversion({
   skipUnit,
   active,
   noAction,
-  children,
+  sign,
 }: PropsWithChildren<Props>): JSX.Element | null {
 
   let formattedValue = '---';
+  let isAvailable = false;
 
   // amount.conversions[active] can be empty in recent transactions.
   if (amount && amount.conversions[active] !== '') {
+    isAvailable = true;
     formattedValue = amount.conversions[active];
   }
 
@@ -138,8 +142,8 @@ function Conversion({
     );
   }
   return (
-    <span className={style.rates}>
-      {children}
+    <span className={ `${style.rates} ${!isAvailable ? style.notAvailable : ''}`}>
+      {isAvailable ? sign : ''}
       {formattedValue}
       {' '}
       {

frontends/web/src/components/transactions/transaction.tsx

@@ -142,7 +142,7 @@ class Transaction extends Component<Props, State> {
     ) : (
       <ArrowSelf />
     );
-    const sign = ((type === 'send') && '−') || ((type === 'receive') && '+') || null;
+    const sign = ((type === 'send') && '−') || ((type === 'receive') && '+') || '';
     const typeClassName = (type === 'send' && style.send) || (type === 'receive' && style.receive) || '';
     const sDate = time ? this.parseTimeShort(time) : '---';
     const statusText = {
@@ -204,7 +204,7 @@ class Transaction extends Component<Props, State> {
             </div>
             <div className={parentStyle.fiat}>
               <span className={`${style.fiat} ${typeClassName}`}>
-                <FiatConversion amount={amount} noAction>{sign}</FiatConversion>
+                <FiatConversion amount={amount} sign={sign} noAction />
               </span>
             </div>
             <div className={parentStyle.currency}>
@@ -284,7 +284,7 @@ class Transaction extends Component<Props, State> {
                 <label>{t('transaction.details.fiat')}</label>
                 <p>
                   <span className={`${style.fiat} ${typeClassName}`}>
-                    <FiatConversion amount={amount} noAction>{sign}</FiatConversion>
+                    <FiatConversion amount={amount} sign={sign} noAction />
                   </span>
                 </p>
               </div>
@@ -293,9 +293,9 @@ class Transaction extends Component<Props, State> {
                 <p>
                   <span className={`${style.fiat} ${typeClassName}`}>
                     { transactionInfo.amountAtTime ?
-                      <FiatConversion amount={transactionInfo.amountAtTime} noAction>{sign}</FiatConversion>
+                      <FiatConversion amount={transactionInfo.amountAtTime} sign={sign} noAction />
                       :
-                      <FiatConversion noAction>{sign}</FiatConversion>
+                      <FiatConversion noAction />
                     }
                   </span>
                 </p>