frontend: refactor conversion amount into its own componnet

With that the ConversionAmount can be used in other places, for
instance in send success.

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

@@ -150,29 +150,68 @@ const Status = ({
   );
 };
 
-type TAmountsProps = {
+type TConversionAmountProps = {
   amount: IAmount;
-  fee: IAmount;
   type: TTransactionType;
 }
-
-const Amounts = ({
+/**
+ * Renders a formattted conversion amount optionally with send-to-self icon or estimate symbol 
+ */
+export const ConversionAmount = ({
   amount,
-  fee,
   type,
-}: TAmountsProps) => {
+}: TConversionAmountProps) => {
   const { defaultCurrency } = useContext(RatesContext);
   const conversion = amount?.conversions && amount?.conversions[defaultCurrency];
   const sign = getTxSign(type);
-  const txTypeClass = `txAmount-${type}`;
   const conversionPrefix = amount.estimated ? '\u2248' : null; // ≈
   const sendToSelf = type === 'send_to_self';
   const conversionUnit = sendToSelf ? amount.unit : defaultCurrency;
   const currencyNotBitcoin = defaultCurrency !== 'BTC' && defaultCurrency !== 'sat';
   const conversionIsFiat = conversionUnit !== 'BTC' && conversionUnit !== 'sat';
-
   const withConversionSymbol = currencyNotBitcoin && conversionIsFiat && !sendToSelf && conversionPrefix;
 
+  return (
+    <span className={styles.txConversionAmount}>
+      {sendToSelf && (
+        <span className={styles.txSmallInlineIcon}>
+          <Arrow type="send_to_self" />
+        </span>
+      )}
+      {withConversionSymbol && (
+        <span className={styles.txPrefix}>
+          {conversionPrefix}
+          {' '}
+        </span>
+      )}
+      {conversion && !sendToSelf ? sign : null}
+      <Amount
+        amount={sendToSelf ? amount.amount : conversion || ''}
+        unit={conversionUnit}
+      />
+      <span className={styles.txUnit}>
+        {' '}
+        {conversionUnit}
+      </span>
+    </span>
+  );
+};
+
+type TAmountsProps = {
+  amount: IAmount;
+  fee: IAmount;
+  type: TTransactionType;
+}
+
+const Amounts = ({
+  amount,
+  fee,
+  type,
+}: TAmountsProps) => {
+  const txTypeClass = `txAmount-${type}`;
+  const sendToSelf = type === 'send_to_self';
+  const sign = getTxSign(type);
+
   return (
     <span className={`${styles.txAmountsColumn} ${styles[txTypeClass]}`}>
       {/* <data value={amount.amount}> */}
@@ -188,28 +227,7 @@ const Amounts = ({
         </span>
       </span>
       {/* </data> */}
-      <span className={styles.txConversionAmount}>
-        {sendToSelf && (
-          <span className={styles.txSmallInlineIcon}>
-            <Arrow type="send_to_self" />
-          </span>
-        )}
-        {withConversionSymbol && (
-          <span className={styles.txPrefix}>
-            {conversionPrefix}
-            {' '}
-          </span>
-        )}
-        {conversion && !sendToSelf ? sign : null}
-        <Amount
-          amount={sendToSelf ? amount.amount : conversion || ''}
-          unit={conversionUnit}
-        />
-        <span className={styles.txUnit}>
-          {' '}
-          {conversionUnit}
-        </span>
-      </span>
+      <ConversionAmount amount={amount} type={type} />
     </span>
   );
 };