From 12dd1bd01757fd54b9a3c6393199801e9e475e60 Mon Sep 17 00:00:00 2001
From: Mateusz Rybczonek <m.rybczonek@gmail.com>
Date: Mon, 19 Feb 2024 12:28:15 +0100
Subject: [PATCH] feat: show eth transaction hash on redemptions

---
 package.json                                  |  2 +-
 .../earnings/RedemptionHistoryTableRow.vue    | 40 +++++++++++--------
 src/interfaces/HposInterface.ts               |  1 +
 src/locales/en.ts                             |  1 +
 src/pages/RedemptionHistoryPage.vue           | 15 +++++++
 src/utils/redemptions.ts                      |  1 +
 6 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 07c8ee11..ff80adb4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "host-console",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.3",
   "private": true,
   "homepage": "https://holo-host.github.io/host-console-ui/",
   "scripts": {
diff --git a/src/components/earnings/RedemptionHistoryTableRow.vue b/src/components/earnings/RedemptionHistoryTableRow.vue
index a7e90abb..ae8dab2d 100644
--- a/src/components/earnings/RedemptionHistoryTableRow.vue
+++ b/src/components/earnings/RedemptionHistoryTableRow.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ClipboardDocumentIcon } from '@heroicons/vue/24/outline'
+import { ClipboardDocumentIcon, ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/outline'
 import BaseTableRow from '@uicommon/components/BaseTableRow.vue'
 import BaseTableRowItem from '@uicommon/components/BaseTableRowItem.vue'
 import { copyToClipboard } from '@uicommon/utils/clipboardUtils'
@@ -12,6 +12,7 @@ interface ExtendedRedemption extends Redemption {
   formattedRequestedAmount: string
   formattedRedemptionAmount: string
   formattedTransactionId: string
+  formattedEthTransactionId: string
 }
 
 const props = defineProps<{
@@ -109,21 +110,23 @@ function showTransactionPrice(state: boolean): void {
       />
     </BaseTableRowItem>
 
-    <!--		<BaseTableRowItem-->
-    <!--      :value="props.redemption.formattedTransactionId"-->
-    <!--      is-visible-on-mobile-->
-    <!--      is-bold-->
-    <!--      :is-italic="props.redemption.status === 'pending'"-->
-    <!--    >-->
-    <!--      <a-->
-    <!--        v-if="props.redemption.transactionId"-->
-    <!--        :href="`https://goerli.etherscan.io/tx/${props.redemption.transactionId}`"-->
-    <!--        target="_blank"-->
-    <!--        class="redemption-history-table-row__transaction-link"-->
-    <!--      >-->
-    <!--        <ArrowTopRightOnSquareIcon class="redemption-history-table-row__transaction-link-icon" />-->
-    <!--      </a>-->
-    <!--    </BaseTableRowItem>-->
+    <BaseTableRowItem
+      :value="props.redemption.formattedEthTransactionId"
+      is-visible-on-mobile
+      is-bold
+      :is-italic="props.redemption.status === 'pending'"
+    >
+      <a
+        v-if="props.redemption.transactionEthHash"
+        :href="`https://goerli.etherscan.io/tx/${props.redemption.transactionEthHash}`"
+        target="_blank"
+        class="redemption-history-table-row__transaction-link"
+      >
+        {{ props.redemption.formattedTransactionEthHash }}
+        <ArrowTopRightOnSquareIcon class="redemption-history-table-row__transaction-link-icon" />
+      </a>
+			<span v-else>{{ props.redemption.formattedTransactionEthHash }}</span>
+    </BaseTableRowItem>
 
     <BaseTableRowItem
       :value="props.redemption.status"
@@ -141,12 +144,17 @@ function showTransactionPrice(state: boolean): void {
   }
 
   &__transaction-link {
+    display: flex;
+    align-items: center;
     height: 22px;
+    text-decoration: none;
+    color: var(--grey-color);
   }
 
   &__transaction-link-icon {
     width: 17px;
     margin-left: 4px;
+    margin-top: -4px;
     color: var(--grey-dark-color);
     cursor: pointer;
   }
diff --git a/src/interfaces/HposInterface.ts b/src/interfaces/HposInterface.ts
index 0493363c..bd0efe85 100644
--- a/src/interfaces/HposInterface.ts
+++ b/src/interfaces/HposInterface.ts
@@ -254,6 +254,7 @@ export interface Redemption {
   completedAmount: string
   redemptionAmount: string
   transactionId: string
+  transactionEthHash: string
   status: string
   isPartial: boolean
 }
diff --git a/src/locales/en.ts b/src/locales/en.ts
index eed06893..e75233ef 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -253,6 +253,7 @@ export default {
         hf_amount: 'HF Amount',
         redemption_amount: 'Redemption Amount',
         transaction_id: 'HF Transaction ID',
+        transaction_eth_hash: 'ETH Transaction Hash',
         status: 'Status'
       },
       original_requested_amount: 'Original Requested Amount: {amount}'
diff --git a/src/pages/RedemptionHistoryPage.vue b/src/pages/RedemptionHistoryPage.vue
index bd969e65..0f8951bc 100644
--- a/src/pages/RedemptionHistoryPage.vue
+++ b/src/pages/RedemptionHistoryPage.vue
@@ -47,6 +47,11 @@ const redemptions = computed(() => {
           ? `...${redemption.transactionId.substring(
               redemption.transactionId.length - kVisibleHashLength
             )}`
+          : '---',
+      formattedTransactionEthHash: redemption.transactionEthHash
+          ? `...${redemption.transactionEthHash.substring(
+              redemption.transactionEthHash.length - kVisibleHashLength
+            )}`
           : '---'
       }))
     : []
@@ -109,6 +114,16 @@ const headersMap = computed(
           type: 'string'
         }
       ],
+      [
+        'transactionEthHash',
+        {
+          key: 'transactionEthHash',
+          label: t('redemption.history.headers.transaction_eth_hash'),
+          isVisibleOnMobile: true,
+          isSortable: true,
+          type: 'string'
+        }
+      ],
       [
         'status',
         {
diff --git a/src/utils/redemptions.ts b/src/utils/redemptions.ts
index 69b836f0..32b5d89e 100644
--- a/src/utils/redemptions.ts
+++ b/src/utils/redemptions.ts
@@ -7,6 +7,7 @@ export function parseRedemption(redemption): Redemption {
     completedAmount: Number(redemption.amount),
     redemptionAmount: Number(redemption.amount),
     transactionId: redemption.id,
+    transactionEthHash: redemption.ethereumTransactionHash,
     status: redemption.status,
     isPartial: false
   }