feat: added handling for different transactions

src/App.vue

@@ -241,4 +241,16 @@ a:hover {
 .slide-fade-enter, .slide-fade-leave-to {
   opacity: 0;
 }
+
+.row {
+  display: flex;
+  justify-content: space-between;
+  margin: 0.6rem 0;
+}
+.row.first {
+  margin-bottom: 0.6rem;
+}
+.row.last {
+  margin-top: 0.6rem;
+}
 </style>

src/components/SignTX/parsedTx/addSignatory.vue

@@ -0,0 +1,47 @@
+<!--
+  Copyright D3 Ledger, Inc. All Rights Reserved.
+  SPDX-License-Identifier: Apache-2.0
+-->
+<template>
+  <div style="padding: 2rem">
+    <div class="row first">
+      <span>Time</span>
+      <span>{{ format(tx[0].time, 'HH:mm:ss MM/DD/YYYY') }} </span>
+    </div>
+    <el-divider />
+    <div
+      v-if="tx[0].params.accountId"
+      class="row"
+    >
+      <span>Sender</span>
+      <span>{{ tx[0].params.accountId }}</span>
+    </div>
+    <el-divider />
+    <div
+      v-if="tx[0].params.publicKey"
+      class="row"
+    >
+      <span>Public key</span>
+      <span>{{ tx[0].params.publicKey }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import format from 'date-fns/format'
+
+export default {
+  props: {
+    tx: {
+      type: Array,
+      required: true,
+      default: () => [{}]
+    }
+  },
+  methods: {
+    format (...args) {
+      return format(...args)
+    }
+  }
+}
+</script>

src/components/SignTX/parsedTx/setAccountDetail.vue

@@ -0,0 +1,66 @@
+<!--
+  Copyright D3 Ledger, Inc. All Rights Reserved.
+  SPDX-License-Identifier: Apache-2.0
+-->
+<template>
+  <div style="padding: 2rem">
+    <div class="row first">
+      <span>Time</span>
+      <span>{{ format(tx[0].time, 'HH:mm:ss MM/DD/YYYY') }} </span>
+    </div>
+    <el-divider />
+    <div
+      v-if="tx[0].params.accountId"
+      class="row"
+    >
+      <span>Sender</span>
+      <span>{{ tx[0].params.accountId }}</span>
+    </div>
+    <el-divider />
+    <div
+      v-if="tx[0].params.key && tx[0].params.key.includes('_whitelist')"
+      class="row"
+    >
+      <span v-if="tx[0].params.key.includes('btc')">BTC Address</span>
+      <span v-if="tx[0].params.key.includes('eth')">ETH Address</span>
+      <span>{{ getLastAddress(tx[0].params.value) }}</span>
+    </div>
+    <div
+      v-if="tx[0].params.key && tx[0].params.key.includes('email')"
+      class="row"
+    >
+      <span>Email</span>
+      <span>{{ tx[0].params.value }}</span>
+    </div>
+    <div
+      v-if="tx[0].params.key && tx[0].params.key.includes('notifications')"
+      class="row"
+    >
+      <span>Notifications</span>
+      <span>{{ tx[0].params.value ? 'ACTIVATE' : 'DIACTIVATE' }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import format from 'date-fns/format'
+
+export default {
+  props: {
+    tx: {
+      type: Array,
+      required: true,
+      default: () => [{}]
+    }
+  },
+  methods: {
+    format (...args) {
+      return format(...args)
+    },
+    getLastAddress (value) {
+      // eslint-disable-next-line
+      return JSON.parse(value.replace(/\\\"/g, '"')).pop()
+    }
+  }
+}
+</script>

src/components/SignTX/parsedTx/transferAsset.vue

@@ -0,0 +1,89 @@
+<!--
+  Copyright D3 Ledger, Inc. All Rights Reserved.
+  SPDX-License-Identifier: Apache-2.0
+-->
+<template>
+  <div style="padding: 2rem">
+    <div class="row first">
+      <span>Time</span>
+      <span>{{ format(tx[0].time, 'HH:mm:ss MM/DD/YYYY') }} </span>
+    </div>
+    <el-divider />
+    <div
+      v-if="tx[0].params.srcAccountId"
+      class="row"
+    >
+      <span>Sender</span>
+      <span>{{ tx[0].params.srcAccountId }}</span>
+    </div>
+    <div
+      v-if="tx[0].params.destAccountId"
+      class="row"
+    >
+      <span>Receiver</span>
+      <span>{{ tx[0].params.destAccountId }}</span>
+    </div>
+    <el-divider />
+    <div
+      v-if="tx[0].params.amount"
+      class="row"
+    >
+      <span>Amount <span v-if="tx[2]">(give)</span></span>
+      <span>{{ tx[0].params.amount }} {{ getAssetName(tx[0].params.assetId) }}</span>
+    </div>
+    <div
+      v-if="tx[0].params.amount"
+      class="row"
+    >
+      <span>Fee</span>
+      <span>{{ feeAmount }} {{ getAssetName(tx[0].params.assetId) }}</span>
+    </div>
+    <el-divider />
+    <div
+      v-if="total > 0"
+      class="row last"
+    >
+      <span>Total <span v-if="tx[2]">give</span></span>
+      <span>{{ total }} {{ getAssetName(tx[0].params.assetId) }}</span>
+    </div>
+    <div
+      v-if="tx[2]"
+      class="row last"
+    >
+      <span>Total recieve</span>
+      <span>{{ tx[2].params.amount }} {{ getAssetName(tx[2].params.assetId) }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import format from 'date-fns/format'
+import BigNumber from 'bignumber.js'
+BigNumber.set({ EXPONENTIAL_AT: [-19, 20] })
+
+export default {
+  props: {
+    tx: {
+      type: Array,
+      required: true,
+      default: () => [{}]
+    }
+  },
+  computed: {
+    feeAmount () {
+      return this.tx[1] ? this.tx[1].params.amount : 0
+    },
+    total () {
+      return BigNumber(this.tx[0].params.amount || 0).plus(this.feeAmount)
+    }
+  },
+  methods: {
+    format (...args) {
+      return format(...args)
+    },
+    getAssetName (assetId) {
+      return assetId ? assetId.split('#')[0] : ''
+    },
+  }
+}
+</script>

src/components/SignTX/signStage.vue

@@ -50,7 +50,7 @@ export default {
     sign: {
       type: Object,
       required: true
-    },
+    }
   },
   methods: {
     onFileChosen (file, fileList, index) {