From e81e420100402aecf273f84ffabfbc5996260ae3 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 2 Mar 2022 14:55:52 +0100
Subject: [PATCH] add slots for transaction types, seperate decayinformations
 for evry type

---
 frontend/src/components/DecayInformation.vue  |   2 +-
 .../DecayInformation-BeforeStartblock.vue     |  17 +++
 .../DecayInformation-Decay.vue                |  36 ++++++
 .../DecayInformation-DecayStartblock.vue      |  92 +++++++++++++++
 .../DecayInformation-FirstTransaction.vue     |  20 ++++
 .../DecayInformation-Long.vue                 | 109 ++++++++++++++++++
 .../DecayInformation-Short.vue                |  17 +++
 .../src/components/TransactionListItem.vue    |  16 +++
 .../TransactionCreation.vue                   |  23 ++--
 .../TransactionDecay.vue                      |  30 +----
 .../TransactionReceive.vue                    |  26 ++---
 .../TransactionSend.vue                       |  27 ++---
 frontend/src/locales/de.json                  |   2 +-
 frontend/src/locales/en.json                  |   2 +-
 .../AccountOverview/GddTransactionList.vue    |  72 +++++++-----
 15 files changed, 388 insertions(+), 103 deletions(-)
 create mode 100644 frontend/src/components/DecayInformations/DecayInformation-BeforeStartblock.vue
 create mode 100644 frontend/src/components/DecayInformations/DecayInformation-Decay.vue
 create mode 100644 frontend/src/components/DecayInformations/DecayInformation-DecayStartblock.vue
 create mode 100644 frontend/src/components/DecayInformations/DecayInformation-FirstTransaction.vue
 create mode 100644 frontend/src/components/DecayInformations/DecayInformation-Long.vue
 create mode 100644 frontend/src/components/DecayInformations/DecayInformation-Short.vue
 create mode 100644 frontend/src/components/TransactionListItem.vue
 rename frontend/src/components/{transaction-slots => Transactions}/TransactionCreation.vue (82%)
 rename frontend/src/components/{transaction-slots => Transactions}/TransactionDecay.vue (65%)
 rename frontend/src/components/{transaction-slots => Transactions}/TransactionReceive.vue (82%)
 rename frontend/src/components/{transaction-slots => Transactions}/TransactionSend.vue (82%)

diff --git a/frontend/src/components/DecayInformation.vue b/frontend/src/components/DecayInformation.vue
index 807b9c516..a5b1ee350 100644
--- a/frontend/src/components/DecayInformation.vue
+++ b/frontend/src/components/DecayInformation.vue
@@ -15,7 +15,7 @@
         v-else-if="new Date(balanceDate).getTime() < new Date(decayStartBlock).getTime()"
         class="mt-3 mb-3 text-center"
       >
-        <b>{{ $t('decay.befor_startblock_transaction') }}</b>
+        <b>{{ $t('decay.before_startblock_transaction') }}</b>
       </div>
 
       <div v-else>
diff --git a/frontend/src/components/DecayInformations/DecayInformation-BeforeStartblock.vue b/frontend/src/components/DecayInformations/DecayInformation-BeforeStartblock.vue
new file mode 100644
index 000000000..7429f8f90
--- /dev/null
+++ b/frontend/src/components/DecayInformations/DecayInformation-BeforeStartblock.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="decayinformation-startblock">
+    <!-- if balanceDate <  decayStartBlock - Wenn die transaktion vor dem einführen der dacay function liegt. -->
+    <div class="mt-3 mb-3 text-center">
+      <b>{{ $t('decay.before_startblock_transaction') }}</b>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'DecayInformation-StartBlock',
+  props: {
+    balanceDate: { type: String },
+    decayStartBlock: { type: String },
+  },
+}
+</script>
diff --git a/frontend/src/components/DecayInformations/DecayInformation-Decay.vue b/frontend/src/components/DecayInformations/DecayInformation-Decay.vue
new file mode 100644
index 000000000..e7e20c671
--- /dev/null
+++ b/frontend/src/components/DecayInformations/DecayInformation-Decay.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="decayinformation-decay">
+    <div class="d-flex">
+      <div style="width: 100%" class="text-center pb-3">
+        <b-icon icon="droplet-half" height="12" class="mb-2" />
+        <b>{{ $t('decay.calculation_decay') }}</b>
+      </div>
+    </div>
+
+    <b-row>
+      <b-col cols="6" class="text-right">
+        <div>{{ $t('decay.decay') }}</div>
+      </b-col>
+      <b-col cols="6">
+        <div>
+          {{ $n(Number(balance) - Number(decay.decay), 'decimal') }}
+          GDD - {{ $n(Number(decay.decay) * -1, 'decimal') }} GDD =
+          <b>{{ $n(Number(balance), 'decimal') }} GDD</b>
+        </div>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+<script>
+export default {
+  name: 'DecayInformation-Decay',
+  props: {
+    balance: {
+      type: String,
+    },
+    decay: {
+      type: Object,
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/DecayInformations/DecayInformation-DecayStartblock.vue b/frontend/src/components/DecayInformations/DecayInformation-DecayStartblock.vue
new file mode 100644
index 000000000..aca959534
--- /dev/null
+++ b/frontend/src/components/DecayInformations/DecayInformation-DecayStartblock.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="decayinformation-startblock">
+    <div class="d-flex">
+      <div style="width: 100%" class="text-center pb-3">
+        <b-icon icon="droplet-half" height="12" class="mb-2" />
+        <b>{{ $t('decay.calculation_decay') }}</b>
+      </div>
+    </div>
+
+    <b-row>
+      <b-col cols="6">
+        <div>
+          <div class="display-4">{{ $t('decay.Starting_block_decay') }}</div>
+          <div>{{ $t('decay.decay_introduced') }} :</div>
+        </div>
+        <div>
+          <span v-if="decay.start">
+            {{ $d(new Date(decay.start * 1000), 'long') }}
+            {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
+          </span>
+        </div>
+      </b-col>
+    </b-row>
+
+    <!-- Decay-->
+    <b-row>
+      <b-col cols="6" class="text-right">
+        <div>{{ $t('decay.decay') }}</div>
+      </b-col>
+      <b-col cols="6">
+        <div>- {{ $n(decay.decay, 'decimal') }}</div>
+      </b-col>
+    </b-row>
+    <hr class="mt-2 mb-2" />
+    <b-row>
+      <b-col class="text-center pt-3 pb-2">
+        <b>{{ $t('decay.calculation_total') }}</b>
+      </b-col>
+    </b-row>
+    <!-- Type-->
+    <b-row>
+      <b-col cols="6" class="text-right">
+        <div v-if="typeId === 'SEND'">{{ $t('decay.sent') }}</div>
+        <div v-if="typeId === 'RECEIVE'">{{ $t('decay.received') }}</div>
+      </b-col>
+      <b-col cols="6">
+        <div v-if="typeId === 'SEND'">{{ $n(amount, 'decimal') }}</div>
+        <div v-if="typeId === 'RECEIVE'">{{ $n(amount, 'decimal') }}</div>
+      </b-col>
+    </b-row>
+    <!-- Decay-->
+    <b-row>
+      <b-col cols="5">
+        <div class="text-right">
+          <b-icon icon="droplet-half" height="15" class="mb-1" />
+        </div>
+      </b-col>
+      <b-col cols="7">
+        <div class="gdd-transaction-list-item-decay">
+          <b>{{ $t('decay.Starting_block_decay') }}</b>
+        </div>
+      </b-col>
+    </b-row>
+
+    <!-- Total-->
+    <b-row>
+      <b-col cols="6" class="text-right">
+        <div>{{ $t('decay.total') }}</div>
+      </b-col>
+      <b-col cols="6">
+        <div v-if="typeId === 'SEND'">
+          <b>{{ $n(Number(amount) - Number(decay.decay), 'decimal') }}</b>
+        </div>
+        <div v-if="typeId === 'RECEIVE'">
+          <b>{{ $n(Number(amount) + Number(decay.decay), 'decimal') }}</b>
+        </div>
+        <div v-if="typeId === 'CREATION'">
+          <b>{{ $n(Number(amount) + Number(decay.decay), 'decimal') }}</b>
+        </div>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+<script>
+export default {
+  name: 'DecayInformation-StartBlock',
+  props: {
+    balanceDate: { type: String },
+    decayStartBlock: { type: String },
+  },
+}
+</script>
diff --git a/frontend/src/components/DecayInformations/DecayInformation-FirstTransaction.vue b/frontend/src/components/DecayInformations/DecayInformation-FirstTransaction.vue
new file mode 100644
index 000000000..785a5e86f
--- /dev/null
+++ b/frontend/src/components/DecayInformations/DecayInformation-FirstTransaction.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="decayinformation-first-transaction">
+    <div>
+      <!-- if decay.start === null - Wenn kein decay angegeben dan ist es die erste Transaktion -->
+      <div class="mt-3 mb-3 text-center">
+        <b>{{ $t('decay.first_transaction') }}</b>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'DecayInformation-FirstTransaction',
+  props: {
+    decay: {
+      type: Object,
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/DecayInformations/DecayInformation-Long.vue b/frontend/src/components/DecayInformations/DecayInformation-Long.vue
new file mode 100644
index 000000000..d1f67485a
--- /dev/null
+++ b/frontend/src/components/DecayInformations/DecayInformation-Long.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="decayinformation-long">
+    <div class="d-flex">
+      <div style="width: 100%" class="text-center pb-3">
+        <b-icon icon="droplet-half" height="12" class="mb-2" />
+        <b>{{ $t('decay.calculation_decay') }}</b>
+      </div>
+    </div>
+
+    <b-row>
+      <b-col cols="6" class="text-right">
+        <div>{{ $t('decay.last_transaction') }}</div>
+      </b-col>
+      <b-col cols="6">
+        <div>
+          <span>
+            {{ $d(new Date(decay.start), 'long') }}
+            {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
+          </span>
+        </div>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col cols="6" class="text-right">
+        <div>{{ $t('decay.past_time') }}</div>
+      </b-col>
+      <b-col cols="6">
+        <span v-if="duration">
+          <span v-if="duration.years > 0">{{ duration.years }} {{ $t('decay.year') }},</span>
+          <span v-if="duration.months > 0">{{ duration.months }} {{ $t('decay.months') }},</span>
+          <span v-if="duration.days > 0">{{ duration.days }} {{ $t('decay.days') }},</span>
+          <span v-if="duration.hours > 0">{{ duration.hours }} {{ $t('decay.hours') }},</span>
+          <span v-if="duration.minutes > 0">{{ duration.minutes }} {{ $t('decay.minutes') }},</span>
+          <span v-if="duration.seconds > 0">{{ duration.seconds }} {{ $t('decay.seconds') }}</span>
+        </span>
+      </b-col>
+    </b-row>
+
+    <!-- Decay-->
+    <b-row>
+      <b-col cols="6" class="text-right">
+        <div>{{ $t('decay.decay') }}</div>
+      </b-col>
+      <b-col cols="6">
+        <div>{{ $n(decay.decay, 'decimal') }}</div>
+      </b-col>
+    </b-row>
+    <hr class="mt-2 mb-2" />
+    <b-row>
+      <b-col class="text-center pt-3 pb-2">
+        <b>{{ $t('decay.calculation_total') }}</b>
+      </b-col>
+    </b-row>
+    <!-- Type-->
+    <b-row>
+      <b-col cols="6" class="text-right">
+        <div v-if="typeId === 'SEND'">{{ $t('decay.sent') }}</div>
+        <div v-if="typeId === 'RECEIVE'">{{ $t('decay.received') }}</div>
+      </b-col>
+      <b-col cols="6">
+        <div v-if="typeId === 'SEND'">{{ $n(amount, 'decimal') }}</div>
+        <div v-if="typeId === 'RECEIVE'">{{ $n(amount, 'decimal') }}</div>
+      </b-col>
+    </b-row>
+    <!-- Decay-->
+    <b-row>
+      <b-col cols="6" class="text-right">
+        <div>{{ $t('decay.decay') }}</div>
+      </b-col>
+      <b-col cols="6">
+        <div>{{ $n(decay.decay, 'decimal') }}</div>
+      </b-col>
+    </b-row>
+    <!-- Total-->
+    <b-row>
+      <b-col cols="6" class="text-right">
+        <div>{{ $t('decay.total') }}</div>
+      </b-col>
+      <b-col cols="6">
+        <div v-if="typeId === 'SEND'">
+          <b>{{ $n(Number(amount) - Number(decay.decay), 'decimal') }}</b>
+        </div>
+        <div v-if="typeId === 'RECEIVE'">
+          <b>{{ $n(Number(amount) + Number(decay.decay), 'decimal') }}</b>
+        </div>
+        <div v-if="typeId === 'CREATION'">
+          <b>{{ $n(Number(amount) + Number(decay.decay), 'decimal') }}</b>
+        </div>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+<script>
+export default {
+  name: 'DecayInformation-Long',
+  props: {
+    amount: { type: String, default: '0' },
+    typeId: { type: String, default: '' },
+    decay: {
+      type: Object,
+    },
+  },
+  computed: {
+    duration() {
+      return this.$moment.duration(new Date(this.decay.end) - new Date(this.decay.start))._data
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/DecayInformations/DecayInformation-Short.vue b/frontend/src/components/DecayInformations/DecayInformation-Short.vue
new file mode 100644
index 000000000..2b3356cdf
--- /dev/null
+++ b/frontend/src/components/DecayInformations/DecayInformation-Short.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="decayinformation-short">
+    <span>
+      {{ decay ? $n(decay.decay, 'decimal') : '' }}
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  name: 'DecayInformation-Short',
+  props: {
+    decay: {
+      type: Object,
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/TransactionListItem.vue b/frontend/src/components/TransactionListItem.vue
new file mode 100644
index 000000000..f2f7f3e90
--- /dev/null
+++ b/frontend/src/components/TransactionListItem.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <slot :name="typeId"></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'TransactionList',
+  props: {
+    typeId: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/transaction-slots/TransactionCreation.vue b/frontend/src/components/Transactions/TransactionCreation.vue
similarity index 82%
rename from frontend/src/components/transaction-slots/TransactionCreation.vue
rename to frontend/src/components/Transactions/TransactionCreation.vue
index 8f11bb2a9..74b298ee9 100644
--- a/frontend/src/components/transaction-slots/TransactionCreation.vue
+++ b/frontend/src/components/Transactions/TransactionCreation.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="visible ? 'bg-secondary' : ''">
     <div @click="visible = !visible">
       {{ amount }}, {{ balance }}, {{ balanceDate }}, {{ decay }}, {{ id }}, {{ linkedUser }},
       {{ memo }}, {{ properties }}
@@ -77,7 +77,7 @@
               </b-col>
               <b-col cols="7">
                 <div class="gdd-transaction-list-item-decay">
-                  <decay-information v-if="decay" decaytyp="short" :decay="decay" />
+                  <decay-information-short v-if="decay" decaytyp="short" :decay="decay" />
                 </div>
               </b-col>
             </b-row>
@@ -85,25 +85,24 @@
         </b-row>
       </div>
 
-      <b-collapse class="pb-4" v-model="visible">
-        <decay-information
-          decaytyp="new"
-          :amount="amount"
-          :decay="decay"
-          :typeId="typeId"
-          :balanceDate="balanceDate"
-        />
+      <b-collapse class="pb-4 pt-5" v-model="visible">
+        <decay-information-first-transaction v-if="decay.start === null" :decay="decay" />
+        <decay-information-long v-else :amount="amount" :decay="decay" :typeId="typeId" />
       </b-collapse>
     </div>
   </div>
 </template>
 <script>
-import DecayInformation from '../DecayInformation'
+import DecayInformationShort from '../DecayInformations/DecayInformation-Short'
+import DecayInformationLong from '../DecayInformations/DecayInformation-Long'
+import DecayInformationFirstTransaction from '../DecayInformations/DecayInformation-FirstTransaction'
 
 export default {
   name: 'slot-creation',
   components: {
-    DecayInformation,
+    DecayInformationShort,
+    DecayInformationLong,
+    DecayInformationFirstTransaction,
   },
   props: {
     amount: {
diff --git a/frontend/src/components/transaction-slots/TransactionDecay.vue b/frontend/src/components/Transactions/TransactionDecay.vue
similarity index 65%
rename from frontend/src/components/transaction-slots/TransactionDecay.vue
rename to frontend/src/components/Transactions/TransactionDecay.vue
index 9245a532e..ef5aa92be 100644
--- a/frontend/src/components/transaction-slots/TransactionDecay.vue
+++ b/frontend/src/components/Transactions/TransactionDecay.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="visible ? 'bg-secondary' : ''">
     <div @click="visible = !visible">
       <!-- Collaps Icon  -->
       <div class="text-right" style="width: 95%; position: absolute">
@@ -43,40 +43,18 @@
       </div>
 
       <b-collapse class="pb-4 pt-5" v-model="visible">
-        <div class="d-flex">
-          <div style="width: 100%" class="text-center pb-3">
-            <b-icon icon="droplet-half" height="12" class="mb-2" />
-            <b>{{ $t('decay.calculation_decay') }}</b>
-          </div>
-        </div>
-
-        <b-row>
-          <b-col cols="6" class="text-right">
-            <div>{{ $t('decay.decay') }}</div>
-          </b-col>
-          <b-col cols="6">
-            <div>
-              {{ Number(balance) + Number(decay.decay) * -1 }} :::: {{ Number(decay.decay) }} :::::
-              {{ $n(Number(balance) + Number(decay.decay) * -1, 'decimal') }}
-              GDD - {{ $n(Number(decay.decay) * -1, 'decimal') }} GDD =
-              <b>{{ $n(Number(balance), 'decimal') }} GDD</b>
-            </div>
-          </b-col>
-        </b-row>
-        <hr />
-        {{ amount }}, {{ balance }}, {{ balanceDate }}, {{ decay }}, {{ id }}, {{ linkedUser }},
-        {{ memo }}, {{ properties }},, {{ visible }}
+        <decay-information-decay :balance="balance" :decay="decay" />
       </b-collapse>
     </div>
   </div>
 </template>
 <script>
-// import DecayInformation from '../DecayInformation'
+import DecayInformationDecay from '../DecayInformations/DecayInformation-Decay'
 
 export default {
   name: 'slot-decay',
   components: {
-    // DecayInformation,
+    DecayInformationDecay,
   },
   props: {
     amount: {
diff --git a/frontend/src/components/transaction-slots/TransactionReceive.vue b/frontend/src/components/Transactions/TransactionReceive.vue
similarity index 82%
rename from frontend/src/components/transaction-slots/TransactionReceive.vue
rename to frontend/src/components/Transactions/TransactionReceive.vue
index db6b7e18a..864d69184 100644
--- a/frontend/src/components/transaction-slots/TransactionReceive.vue
+++ b/frontend/src/components/Transactions/TransactionReceive.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="visible ? 'bg-secondary' : ''">
     <div @click="visible = !visible">
       <!-- Collaps Icon  -->
       <div class="text-right" style="width: 95%; position: absolute">
@@ -74,7 +74,7 @@
               </b-col>
               <b-col cols="7">
                 <div class="gdd-transaction-list-item-decay">
-                  <decay-information v-if="decay" decaytyp="short" :decay="decay" />
+                  <decay-information-short decaytyp="short" :decay="decay" />
                 </div>
               </b-col>
             </b-row>
@@ -82,28 +82,24 @@
         </b-row>
       </div>
 
-      <b-collapse class="pb-4" v-model="visible">
-        <decay-information
-          decaytyp="new"
-          :amount="amount"
-          :decay="decay"
-          :typeId="typeId"
-          :balanceDate="balanceDate"
-        />
-        <hr />
-        {{ amount }}, {{ balance }}, {{ balanceDate }}, {{ decay }}, {{ id }}, {{ linkedUser }},
-        {{ memo }}, {{ properties }}
+      <b-collapse class="pb-4 pt-5" v-model="visible">
+        <decay-information-first-transaction v-if="decay.start === null" :decay="decay" />
+        <decay-information-long v-else :amount="amount" :decay="decay" :typeId="typeId" />
       </b-collapse>
     </div>
   </div>
 </template>
 <script>
-import DecayInformation from '../DecayInformation'
+import DecayInformationShort from '../DecayInformations/DecayInformation-Short'
+import DecayInformationLong from '../DecayInformations/DecayInformation-Long'
+import DecayInformationFirstTransaction from '../DecayInformations/DecayInformation-FirstTransaction'
 
 export default {
   name: 'slot-receive',
   components: {
-    DecayInformation,
+    DecayInformationShort,
+    DecayInformationLong,
+    DecayInformationFirstTransaction,
   },
   props: {
     amount: {
diff --git a/frontend/src/components/transaction-slots/TransactionSend.vue b/frontend/src/components/Transactions/TransactionSend.vue
similarity index 82%
rename from frontend/src/components/transaction-slots/TransactionSend.vue
rename to frontend/src/components/Transactions/TransactionSend.vue
index 3ee4b3bf0..f6cdac911 100644
--- a/frontend/src/components/transaction-slots/TransactionSend.vue
+++ b/frontend/src/components/Transactions/TransactionSend.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="visible ? 'bg-secondary' : ''">
     <div @click="visible = !visible">
       <!-- Collaps Icon  -->
       <div class="text-right" style="width: 95%; position: absolute">
@@ -74,7 +74,7 @@
               </b-col>
               <b-col cols="7">
                 <div class="gdd-transaction-list-item-decay">
-                  <decay-information v-if="decay" decaytyp="short" :decay="decay" />
+                  <decay-information-short decaytyp="short" :decay="decay" />
                 </div>
               </b-col>
             </b-row>
@@ -82,28 +82,23 @@
         </b-row>
       </div>
 
-      <b-collapse class="pb-4" v-model="visible">
-        <decay-information
-          decaytyp="new"
-          :amount="amount"
-          :decay="decay"
-          :typeId="typeId"
-          :balanceDate="balanceDate"
-        />
-        <hr />
-        {{ amount }}, {{ balance }}, {{ balanceDate }}, {{ decay }}, {{ id }}, {{ linkedUser }},
-        {{ memo }}, {{ properties }}
+      <b-collapse class="pb-4 pt-5" v-model="visible">
+        <decay-information-first-transaction v-if="decay.start === null" :decay="decay" />
+        <decay-information-long v-else :amount="amount" :decay="decay" :typeId="typeId" />
       </b-collapse>
     </div>
   </div>
 </template>
 <script>
-import DecayInformation from '../DecayInformation'
-
+import DecayInformationShort from '../DecayInformations/DecayInformation-Short'
+import DecayInformationLong from '../DecayInformations/DecayInformation-Long'
+import DecayInformationFirstTransaction from '../DecayInformations/DecayInformation-FirstTransaction'
 export default {
   name: 'slot-send',
   components: {
-    DecayInformation,
+    DecayInformationShort,
+    DecayInformationLong,
+    DecayInformationFirstTransaction,
   },
   props: {
     amount: {
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 3bfad63e8..748bffe25 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -21,7 +21,7 @@
     "switch-to-this-community": "zu dieser Gemeinschaft wechseln"
   },
   "decay": {
-    "befor_startblock_transaction": "Diese Transaktion beinhaltet keine Vergänglichkeit.",
+    "before_startblock_transaction": "Diese Transaktion beinhaltet keine Vergänglichkeit.",
     "calculation_decay": "Berechnung der Vergänglichkeit",
     "calculation_total": "Berechnung der Gesamtsumme",
     "created": "Geschöpft",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index b06030947..557c0a42c 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -21,7 +21,7 @@
     "switch-to-this-community": "Switch to this community"
   },
   "decay": {
-    "befor_startblock_transaction": "This transaction does not include decay.",
+    "before_startblock_transaction": "This transaction does not include decay.",
     "calculation_decay": "Calculation of Decay",
     "calculation_total": "Calculation of the total Amount",
     "created": "Created",
diff --git a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
index e3e7df505..2613dd174 100644
--- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
@@ -17,34 +17,42 @@
         :key="id"
         :style="typeId === 'DECAY' ? 'background-color:#f1e0ae3d' : ''"
       >
-        <transaction-decay
-          class="list-group-item gdd-transaction-list-item"
-          v-if="typeId === 'DECAY'"
-          v-bind="transactions[index]"
-          :properties="getProperties(typeId)"
-        />
+        <transaction-list-item :typeId="typeId">
+          <template #DECAY>
+            <transaction-decay
+              class="list-group-item gdd-transaction-list-item"
+              v-bind="transactions[index]"
+              :properties="getProperties(typeId)"
+            />
+          </template>
 
-        <transaction-send
-          class="list-group-item gdd-transaction-list-item"
-          v-if="typeId === 'SEND'"
-          v-bind="transactions[index]"
-          :decayStartBlock="decayStartBlock"
-          :properties="getProperties(typeId)"
-        />
-        <transaction-receive
-          class="list-group-item gdd-transaction-list-item"
-          v-if="typeId === 'RECEIVE'"
-          v-bind="transactions[index]"
-          :decayStartBlock="decayStartBlock"
-          :properties="getProperties(typeId)"
-        />
-        <transaction-creation
-          class="list-group-item gdd-transaction-list-item"
-          v-if="typeId === 'CREATION'"
-          v-bind="transactions[index]"
-          :decayStartBlock="decayStartBlock"
-          :properties="getProperties(typeId)"
-        />
+          <template #SEND>
+            <transaction-send
+              class="list-group-item gdd-transaction-list-item"
+              v-bind="transactions[index]"
+              :decayStartBlock="decayStartBlock"
+              :properties="getProperties(typeId)"
+            />
+          </template>
+
+          <template #RECEIVE>
+            <transaction-receive
+              class="list-group-item gdd-transaction-list-item"
+              v-bind="transactions[index]"
+              :decayStartBlock="decayStartBlock"
+              :properties="getProperties(typeId)"
+            />
+          </template>
+
+          <template #CREATION>
+            <transaction-creation
+              class="list-group-item gdd-transaction-list-item"
+              v-bind="transactions[index]"
+              :decayStartBlock="decayStartBlock"
+              :properties="getProperties(typeId)"
+            />
+          </template>
+        </transaction-list-item>
       </div>
     </div>
     <pagination-buttons
@@ -60,11 +68,12 @@
 </template>
 
 <script>
+import TransactionListItem from '../../../components/TransactionListItem'
 import PaginationButtons from '../../../components/PaginationButtons'
-import TransactionDecay from '../../../components/transaction-slots/TransactionDecay'
-import TransactionSend from '../../../components/transaction-slots/TransactionSend'
-import TransactionReceive from '../../../components/transaction-slots/TransactionReceive'
-import TransactionCreation from '../../../components/transaction-slots/TransactionCreation'
+import TransactionDecay from '../../../components/Transactions/TransactionDecay'
+import TransactionSend from '../../../components/Transactions/TransactionSend'
+import TransactionReceive from '../../../components/Transactions/TransactionReceive'
+import TransactionCreation from '../../../components/Transactions/TransactionCreation'
 
 const iconsByType = {
   SEND: { icon: 'arrow-left-circle', classes: 'text-danger', operator: '−' },
@@ -76,6 +85,7 @@ const iconsByType = {
 export default {
   name: 'gdd-transaction-list',
   components: {
+    TransactionListItem,
     PaginationButtons,
     TransactionDecay,
     TransactionSend,