decay calculation is calculated and displayed at the transaction in a more user-friendly way

frontend/src/components/DecayInformation.vue

@@ -10,6 +10,7 @@
     </span>
 
     <div v-if="decaytyp === 'new'">
+   
       <b-list-group style="border: 0px">
         <b-list-group-item style="border: 0px; background-color: #f1f1f1">
           <div class="d-flex" v-if="!decay.decayStartBlock">
@@ -19,6 +20,7 @@
             </div>
           </div>
 
+
           <div class="d-flex">
             <div style="width: 40%" class="text-right pr-3 mr-2">
               <div v-if="!decay.decayStartBlock">{{ $t('decay.last_transaction') }}</div>
@@ -62,6 +64,35 @@
               </span>
             </div>
           </div>
+          <div v-if="decay.balance > 0">
+          <div class="d-flex" >
+            <div style="width: 40%" class="text-right pr-3 mr-2">
+              <div v-if="type === 'send'">{{ $t('form.amount') }} </div>
+              <div v-if="type === 'receive'">{{ $t('form.amount') }} </div>
+            </div>
+            <div style="width: 60%">
+              <div> {{balance}} </div>               
+            </div>
+          </div>
+           <div class="d-flex">
+            <div style="width: 40%" class="text-right pr-3 mr-2">
+              <div>{{ $t('decay.decay') }}</div>
+            </div>
+            <div style="width: 60%">
+              <div> {{ decay.balance }} </div>               
+            </div>
+          </div>
+          <div class="d-flex">
+            <div style="width: 40%" class="text-right pr-3 mr-2">
+              <div  v-if="type === 'send'">{{ $t('decay.sent') }}</div>
+              <div  v-if="type === 'receive'">{{ $t('decay.received') }}</div>
+            </div>
+            <div style="width: 60%">
+              <div v-if="type === 'send'"><b> {{ parseInt(balance) + decay.balance  }} </b></div>               
+              <div v-if="type === 'receive'"><b> {{ parseInt(balance) - decay.balance  }} </b></div>
+            </div>
+          </div>
+          </div>
         </b-list-group-item>
       </b-list-group>
     </div>
@@ -71,6 +102,8 @@
 export default {
   name: 'DecayInformation',
   props: {
+    balance: { type: String, default: '' },
+    type: { type: String, default: '' },
     decay: {
       balance: '',
       decayDuration: '',

frontend/src/locales/de.json

@@ -28,6 +28,9 @@
     "decayStart": " - Startblock für Vergänglichkeit am: ",
     "last_transaction":"Letzte Transaktion",
     "past_time":"Vergangene Zeit",
+    "balanceForTransaction":"Balance vor Transaktion",
+    "balanceAfterTransaction":"Balance nach Transaktion",
+    "amountOfTransaction":"Betrag der Transaktion",
     "since_introduction":"seit Einführung der Vergänglichkeit",
     "year":"Jahre",
     "months":"Monate",

frontend/src/locales/en.json

@@ -28,6 +28,8 @@
     "decayStart": " - Starting block for decay at: ",
     "last_transaction": "Last transaction:",
     "past_time": "Past time",
+    "balanceForTransaction": "Balance before transaction",
+    "amountOfTransaction": "Amount of the transaction",
     "since_introduction": "Since the introduction of Decay",
     "year": "Years",
     "months": "Months",

frontend/src/views/Pages/AccountOverview/GddTransactionList.vue

@@ -23,7 +23,7 @@
             <div class="col-1 gdd-transaction-list-item-icon">
               <b-icon :icon="getProperties(type).icon" :class="getProperties(type).class" />
             </div>
-
+            
             <div class="col col-11">
               <!-- Betrag / Name Email -->
               <b-row>
@@ -76,7 +76,7 @@
 
           <b-collapse v-if="type != 'decay'" class="pb-4" :id="'a' + date + ''">
             <div style="border: 0px; background-color: #f1f1f1" class="p-2 pb-4 mb-4">
-              <decay-information v-if="decay" decaytyp="new" :decay="decay" />
+              <decay-information v-if="decay" decaytyp="new" :balance="balance" :decay="decay" :type="type" />
             </div>
           </b-collapse>