feat: show deposits and reclaims when present in transaction

Shows Deposit or Deposit Reclaim in the TransactionInfo when present in
transaction

Closes #353

source/features/i18n/translations/de.json

@@ -152,6 +152,8 @@
   "transaction": {
     "block": "Block",
     "confirmations": "Konfirmationen",
+    "deposit": "Anzahlung",
+    "depositReclaim": "Einzahlungsrückforderung",
     "epoch": "Epoche",
     "fee": "Transaktionsgebühr",
     "from": "Input-Adressen",

source/features/i18n/translations/en.json

@@ -153,6 +153,8 @@
   "transaction": {
     "block": "Block",
     "confirmations": "Confirmations",
+    "deposit": "Deposit",
+    "depositReclaim": "Deposit Reclaim",
     "epoch": "Epoch",
     "fee": "Transaction Fee",
     "from": "From addresses",

source/features/i18n/translations/ja.json

@@ -152,6 +152,8 @@
   "transaction": {
     "block": "ブロック",
     "confirmations": "確認",
+    "deposit": "預り金",
+    "depositReclaim": "預金の回収",
     "epoch": "エポック",
     "fee": "トランザクション手数料",
     "from": "送信元",

source/features/transactions/api/TransactionDetails.graphql

@@ -5,6 +5,7 @@ fragment TransactionDetails on Transaction {
     number,
     slotNo,
   }
+  deposit,
   fee,
   hash,
   includedAt,

source/features/transactions/api/transformers.ts

@@ -11,6 +11,7 @@ export const transactionDetailsTransformer = (
     id: tx.block?.hash,
     number: tx.block?.number,
   },
+  deposit: Currency.Util.lovelacesToAda(tx.deposit),
   fee: Currency.Util.lovelacesToAda(tx.fee),
   id: tx.hash,
   includedAt: new Date(tx.includedAt),

source/features/transactions/components/TransactionInfo.tsx

@@ -119,7 +119,7 @@ const TransactionInfo = (props: ITransactionInfoProps) => {
     });
   };
   const epoch = props.block.epoch === '-' ? 0 : props.block.epoch;
-
+  const depositLabel = parseInt(props.deposit) >= 0 ? 'transaction.deposit' : 'transaction.depositReclaim'
   return (
     <div className={styles.root}>
       {props.title && (
@@ -227,6 +227,16 @@ const TransactionInfo = (props: ITransactionInfoProps) => {
         </div>
       </div>
 
+      {/* ===== DEPOSIT ===== */}
+      {props.deposit !== '0' && (
+        <div className={styles.row}>
+          <div className={styles.label}>
+            {translate(depositLabel)}
+          </div>
+          <div className={styles.value}>{props.deposit} ADA</div>
+        </div>
+      )}
+
       {/* ===== TOTAL OUTPUT ===== */}
 
       <div className={styles.row}>

source/features/transactions/types.ts

@@ -20,6 +20,7 @@ export interface ITransactionDetails {
     number?: number | null;
     slot?: number | null;
   };
+  deposit: string;
   fee: string;
   id: string;
   includedAt: Date;