From 05f3b1f18c17f15d5306f9b05afe9b66df97d682 Mon Sep 17 00:00:00 2001
From: Iveta <quietbits@gmail.com>
Date: Tue, 29 Oct 2024 15:15:39 -0400
Subject: [PATCH] Display transaction hash with XDR input

---
 src/app/(sidebar)/transaction/submit/page.tsx |  6 +++++
 src/app/(sidebar)/xdr/view/page.tsx           |  6 +++++
 .../TransactionHashReadOnlyField.tsx          | 25 +++++++++++++++++++
 src/helpers/transactionHashFromXdr.ts         |  6 +++++
 4 files changed, 43 insertions(+)
 create mode 100644 src/components/TransactionHashReadOnlyField.tsx
 create mode 100644 src/helpers/transactionHashFromXdr.ts

diff --git a/src/app/(sidebar)/transaction/submit/page.tsx b/src/app/(sidebar)/transaction/submit/page.tsx
index 6cdf7a78..ebb03739 100644
--- a/src/app/(sidebar)/transaction/submit/page.tsx
+++ b/src/app/(sidebar)/transaction/submit/page.tsx
@@ -35,6 +35,7 @@ import { ValidationResponseCard } from "@/components/ValidationResponseCard";
 import { TxResponse } from "@/components/TxResponse";
 import { SaveTransactionModal } from "@/components/SaveTransactionModal";
 import { SdsLink } from "@/components/SdsLink";
+import { TransactionHashReadOnlyField } from "@/components/TransactionHashReadOnlyField";
 
 import {
   HorizonErrorResponse,
@@ -482,6 +483,11 @@ export default function SubmitTransaction() {
             hasCopyButton
           />
 
+          <TransactionHashReadOnlyField
+            xdr={xdr.blob}
+            networkPassphrase={network.passphrase}
+          />
+
           <Box
             gap="lg"
             direction="row"
diff --git a/src/app/(sidebar)/xdr/view/page.tsx b/src/app/(sidebar)/xdr/view/page.tsx
index a2419532..eb0ec768 100644
--- a/src/app/(sidebar)/xdr/view/page.tsx
+++ b/src/app/(sidebar)/xdr/view/page.tsx
@@ -23,6 +23,7 @@ import { SdsLink } from "@/components/SdsLink";
 import { XdrPicker } from "@/components/FormElements/XdrPicker";
 import { XdrTypeSelect } from "@/components/XdrTypeSelect";
 import { PrettyJsonTransaction } from "@/components/PrettyJsonTransaction";
+import { TransactionHashReadOnlyField } from "@/components/TransactionHashReadOnlyField";
 
 import { parseToLosslessJson } from "@/helpers/parseToLosslessJson";
 import { useIsXdrInit } from "@/hooks/useIsXdrInit";
@@ -136,6 +137,11 @@ export default function ViewXdr() {
             disabled={isFetchingLatestTxn}
           />
 
+          <TransactionHashReadOnlyField
+            xdr={xdr.blob}
+            networkPassphrase={network.passphrase}
+          />
+
           <XdrTypeSelect error={xdrJsonDecoded?.error} />
 
           <>
diff --git a/src/components/TransactionHashReadOnlyField.tsx b/src/components/TransactionHashReadOnlyField.tsx
new file mode 100644
index 00000000..f0a70bf1
--- /dev/null
+++ b/src/components/TransactionHashReadOnlyField.tsx
@@ -0,0 +1,25 @@
+import { Input } from "@stellar/design-system";
+import { transactionHashFromXdr } from "@/helpers/transactionHashFromXdr";
+
+export const TransactionHashReadOnlyField = ({
+  xdr,
+  networkPassphrase,
+}: {
+  xdr: string;
+  networkPassphrase: string;
+}) => {
+  if (!xdr) {
+    return null;
+  }
+
+  return (
+    <Input
+      id="tx-hash"
+      fieldSize="md"
+      label="Transaction hash"
+      value={transactionHashFromXdr(xdr, networkPassphrase)}
+      copyButton={{ position: "right" }}
+      disabled
+    />
+  );
+};
diff --git a/src/helpers/transactionHashFromXdr.ts b/src/helpers/transactionHashFromXdr.ts
new file mode 100644
index 00000000..632601be
--- /dev/null
+++ b/src/helpers/transactionHashFromXdr.ts
@@ -0,0 +1,6 @@
+import { TransactionBuilder } from "@stellar/stellar-sdk";
+
+export const transactionHashFromXdr = (
+  xdr: string,
+  networkPassphrase: string,
+) => TransactionBuilder.fromXDR(xdr, networkPassphrase).hash().toString("hex");